feat(ui): add progress component

packages/site/src/app/App.tsx

@@ -1,5 +1,5 @@
 import type { DConfigContextData } from '@react-devui/ui/hooks/d-config/contex';
-import type { DLang, DTheme } from '@react-devui/ui/utils/global';
+import type { DLang } from '@react-devui/ui/utils/global';
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,6 +11,8 @@ import { environment } from '../environments/environment';
 import { AppLayout } from './components';
 import { AppRoutes } from './routes/Routes';
 
+type DTheme = 'light' | 'dark';
+
 export interface AppContextData {
   gTheme: DTheme;
   gOnThemeChange: (theme: DTheme) => void;
@@ -55,13 +57,23 @@ export function App() {
     document.documentElement.lang = i18n.language;
   }, [i18n.language]);
 
+  useEffect(() => {
+    document.body.classList.toggle('dark', theme === 'dark');
+    if (theme === 'dark') {
+      const colorScheme = document.documentElement.style.colorScheme;
+      document.documentElement.style.colorScheme = 'dark';
+      return () => {
+        document.documentElement.style.colorScheme = colorScheme;
+      };
+    }
+  }, [theme]);
+
   const rootContext = useMemo<DConfigContextData>(
     () => ({
-      theme,
       i18n: { lang: i18n.language as DLang },
       updatePosition: { scroll: ['main.app-main'], resize: ['article.app-route-article'] },
     }),
-    [i18n.language, theme]
+    [i18n.language]
   );
 
   const contextValue = useMemo<AppContextData>(

packages/site/src/app/styles/_app.scss

@@ -271,6 +271,14 @@ h3 {
       min-width: 800px;
     }
   }
+
+  section[id^='Progress'] {
+    .d-progress--dashboard,
+    .d-progress--circle {
+      margin-right: 8px;
+      margin-bottom: 12px;
+    }
+  }
 }
 
 .app-demo-col {

packages/ui/src/components/date-picker/DatePickerPanel.tsx

@@ -26,7 +26,6 @@ function DatePickerPanel(props: DDatePickerPanelProps, ref: React.ForwardedRef<D
   //#endregion
 
   const dataRef = useRef<{
-    loopFn?: (unit: UnitType, value: number) => void;
     clearLoop?: () => void;
     clearTid?: () => void;
     clearHoverTid?: () => void;
@@ -45,12 +44,9 @@ function DatePickerPanel(props: DDatePickerPanelProps, ref: React.ForwardedRef<D
     setShowDate(dayjs(t));
   });
 
-  dataRef.current.loopFn = (unit, value) => {
-    updateView(showDate.set(unit, showDate.get(unit) + value).toDate());
-  };
   const handleButtonDown = (unit: UnitType, value: number) => {
     const loop = () => {
-      dataRef.current.loopFn?.(unit, value);
+      setShowDate((d) => d.set(unit, d.get(unit) + value));
       dataRef.current.clearLoop = asyncCapture.setTimeout(() => loop(), 50);
     };
     dataRef.current.clearTid = asyncCapture.setTimeout(() => loop(), 400);

packages/ui/src/components/date-picker/README.zh-Hant.md

@@ -1,5 +1,5 @@
 ---
-title: 时间选择框
+title: 日期选择框
 ---
 
 ## API

packages/ui/src/components/empty/Empty.tsx

@@ -1,6 +1,6 @@
 import { isUndefined } from 'lodash';
 
-import { usePrefixConfig, useComponentConfig, useTranslation, useThemeConfig } from '../../hooks';
+import { usePrefixConfig, useComponentConfig, useTranslation } from '../../hooks';
 import { DCustomIcon } from '../../icons';
 import { registerComponentMate, getClassName } from '../../utils';
 
@@ -20,7 +20,6 @@ export function DEmpty(props: DEmptyProps) {
 
   //#region Context
   const dPrefix = usePrefixConfig();
-  const theme = useThemeConfig();
   //#endregion
 
   const [t] = useTranslation('Common');
@@ -29,7 +28,7 @@ export function DEmpty(props: DEmptyProps) {
     <div {...restProps} className={getClassName(className, `${dPrefix}empty`)}>
       {isUndefined(dIcon) ? (
         <DCustomIcon viewBox="0 -20 1442 1024" width={140} height={104}>
-          <path
+          {/* <path
             d="M159.816113 858.429296c0 88.496676 253.605859 160.263211 566.430648 160.263211s566.416225-71.766535 566.416225-160.263211c0-88.511099-253.605859-160.277634-566.416225-160.277634-312.824789 0.014423-566.430648 71.766535-566.430648 160.277634z"
             fill="#fff"
             fillOpacity={0.08}
@@ -98,7 +97,7 @@ export function DEmpty(props: DEmptyProps) {
           <path
             d="M341.294873 866.174197c-20.898254-5.538254-38.493746-3.317183-53.882591-2.22107-15.403268 1.110535-27.489352 2.22107-40.700395-2.206648l2.192226-5.538254c11.004394 4.427718 24.215437 3.317183 38.508169 2.221071 16.484958-1.110535 34.094873-3.317183 54.993126 2.206648l-1.110535 5.538253z"
             fill={theme === 'light' ? '#94A0B2' : '#4f5f78'}
-          ></path>
+          ></path> */}
         </DCustomIcon>
       ) : (
         dIcon

packages/ui/src/components/index.ts

@@ -49,6 +49,9 @@ export { NotificationService } from './notification';
 export type { DPaginationProps } from './pagination';
 export { DPagination } from './pagination';
 
+export type { DProgressProps } from './progress';
+export { DProgress } from './progress';
+
 export type { DRadioProps, DRadioGroupProps } from './radio';
 export { DRadio, DRadioGroup } from './radio';
 

packages/ui/src/components/input/Input.tsx

@@ -81,7 +81,6 @@ export function DInput(props: DInputProps) {
   const combineInputRef = useForkRef(inputRef, dInputRef);
 
   const dataRef = useRef<{
-    loopFn?: (isIncrease: boolean) => void;
     clearLoop?: () => void;
     clearTid?: () => void;
   }>({});
@@ -100,27 +99,25 @@ export function DInput(props: DInputProps) {
   const disabled = dDisabled || gDisabled || dFormControl?.control.disabled;
 
   const changeNumber = useEventCallback((isIncrease = true) => {
-    const stepVal = dStep ?? 1;
-    let val = (() => {
-      if (isNumber(value)) {
-        return value;
-      }
-      const num = value ? Number(value) : 0;
-      if (Number.isNaN(num)) {
-        return 0;
-      }
-      return num;
-    })();
-    val = isIncrease ? val + stepVal : val - stepVal;
-    changeValue(Math.max(dMin ?? -Infinity, Math.min(dMax ?? Infinity, val)).toFixed(stepVal.toString().split('.')[1]?.length ?? 0));
+    changeValue((val) => {
+      const stepVal = dStep ?? 1;
+      const newVal = (() => {
+        if (isNumber(val)) {
+          return val;
+        }
+        const num = val ? Number(val) : 0;
+        if (Number.isNaN(num)) {
+          return 0;
+        }
+        return isIncrease ? num + stepVal : num - stepVal;
+      })();
+      return Math.max(dMin ?? -Infinity, Math.min(dMax ?? Infinity, newVal)).toFixed(stepVal.toString().split('.')[1]?.length ?? 0);
+    });
   });
 
-  dataRef.current.loopFn = (isIncrease) => {
-    changeNumber(isIncrease);
-  };
   const handleNumberMouseDown = (isIncrease = true) => {
     const loop = () => {
-      dataRef.current.loopFn?.(isIncrease);
+      changeNumber(isIncrease);
       dataRef.current.clearLoop = asyncCapture.setTimeout(() => loop(), 50);
     };
     dataRef.current.clearTid = asyncCapture.setTimeout(() => loop(), 400);