@hsu-react/ui 0.0.12 → 0.0.14

package/lib/components/DatePicker/index.js

@@ -60,7 +60,7 @@ const DatePicker = props => {
   const defaultValueRef = (0, _react.useRef)(defaultValue);
   const showTimeRef = (0, _react.useRef)(showTime);
 
-  // 保持 ref 最新
+  // Keep refs up to date
   (0, _react.useEffect)(() => {
     onChangeRef.current = onChange;
     valueRef.current = value;
@@ -68,7 +68,7 @@ const DatePicker = props => {
     showTimeRef.current = showTime;
   }, [onChange, value, defaultValue, showTime]);
 
-  // 格式化日期值的辅助函数
+  // Helper function for formatting date values
   const formatDateByPicker = (0, _react.useCallback)((dateValue, pickerType) => {
     if (pickerType === "date") {
       if (showTimeRef.current) {
@@ -89,19 +89,19 @@ const DatePicker = props => {
     return "";
   }, []);
 
-  // 处理 picker 变更时的 onChange
+  // Handle onChange when the picker changes
   const handlePickerChange = (0, _react.useCallback)(newPicker => {
-    // 当 picker 变更时，触发一次 onChange
+    // When the picker changes, trigger onChange once
     if (onChangeRef.current) {
-      // 优先使用 value，如果没有则使用 defaultValue
+      // Prefer value; fall back to defaultValue if absent
       const currentValue = valueRef.current ?? defaultValueRef.current;
       if (currentValue) {
-        // 如果有当前值或默认值，使用新的 picker 格式重新格式化
+        // If there is a current or default value, reformat it with the new picker format
         const dateValue = (0, _dayjs.default)(currentValue.toString());
         const formattedDate = formatDateByPicker(dateValue, newPicker);
         onChangeRef.current(formattedDate, newPicker);
       } else {
-        // 如果既没有值也没有默认值，触发 onChange 传入空字符串
+        // If there is neither a value nor a default value, trigger onChange with an empty string
         onChangeRef.current("", newPicker);
       }
     }
@@ -110,11 +110,11 @@ const DatePicker = props => {
     if (pickerProps !== undefined) {
       const prevPicker = prevPickerRef.current;
 
-      // 标记为已初始化
+      // Mark as initialized
       if (!isInitializedRef.current) {
         isInitializedRef.current = true;
       } else {
-        // 当 picker 变更时，触发一次 onChange（排除初始化）
+        // When the picker changes, trigger onChange once (excluding initialization)
         if (prevPicker !== undefined && prevPicker !== pickerProps) {
           handlePickerChange(pickerProps);
         }

package/lib/components/Editor/index.js

@@ -17,7 +17,7 @@ const EditorContent = props => {
     value = ""
   } = props;
 
-  // 编辑器配置
+  // Editor configuration
   const editorConfig = {
     readOnly: true,
     autoFocus: false
@@ -45,10 +45,10 @@ const Editor = props => {
     setHtml(value || "");
   }, [value]);
 
-  // 工具栏配置
+  // Toolbar configuration
   const toolbarConfig = {};
 
-  // 编辑器配置
+  // Editor configuration
   const editorConfig = {
     placeholder,
     autoFocus: false,

package/lib/components/Editor/index.module.scss

@@ -11,7 +11,7 @@
   border-radius: 6px;
 
   .toolbar {
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid var(--cf-border);
 
     .w-e-bar-item {
       color: var(--cf-text-3);
@@ -33,7 +33,7 @@
       cursor: not-allowed;
 
       .w-e-text-container {
-        background-color: rgba(0, 0, 0, 0.04);
+        background-color: var(--cf-subtle);
 
         color: var(--cf-text-3);
       }

package/lib/components/FileCol/index.js

@@ -27,10 +27,10 @@ const FileCol = props => {
           className: _indexModule.default.fileItem,
           children: [!hideNm && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
             title: file.name,
-            color: "#f2f4f5",
+            color: "var(--cf-subtle)",
             styles: {
               body: {
-                color: "#131212",
+                color: "var(--cf-text)",
                 padding: "6px 16px"
               }
             },

package/lib/components/FilePreview/_components/BasePreview/index.module.scss

@@ -63,7 +63,7 @@
 
     border-radius: 4px;
 
-    background-color: #fff;
+    background-color: var(--cf-surface);
 
     overflow: auto;
 
@@ -73,7 +73,7 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: #fff;
+      background-color: var(--cf-surface);
     }
   }
 }

package/lib/components/FilePreview/_components/PdfPreview/index.module.scss

@@ -133,11 +133,11 @@
 
     padding: 5px 10px;
 
-    background-color: #fff;
+    background-color: var(--cf-surface);
 
     border-radius: 4px;
 
-    box-shadow: 0 4px 15px 0 rgba(0, 73, 164, 0.11);
+    box-shadow: var(--cf-shadow-3);
 
     .toolItem {
       display: flex;
@@ -161,7 +161,7 @@
         cursor: pointer;
 
         &:hover {
-          background-color: rgba(0, 0, 0, 0.1);
+          background-color: var(--cf-row-hover);
         }
 
         &.disabled {

package/lib/components/FilePreview/_hooks/useXlsxData.d.ts

@@ -4,7 +4,7 @@ interface UseXlsxDataProps {
     fileUrl?: string;
 }
 /**
- * 加载并解析 xlsx 文件
+ * Load and parse an xlsx file
  */
 export declare function useXlsxData({ fileType, fileUrl }: UseXlsxDataProps): WorkBook | undefined;
 export {};

package/lib/components/FilePreview/_hooks/useXlsxData.js

@@ -7,7 +7,7 @@ exports.useXlsxData = useXlsxData;
 var _react = require("react");
 var _xlsx = require("xlsx");
 /**
- * 加载并解析 xlsx 文件
+ * Load and parse an xlsx file
  */
 function useXlsxData({
   fileType,

package/lib/components/FilePreview/index.module.scss

@@ -73,7 +73,7 @@
 
     border-radius: 4px;
 
-    background-color: #fff;
+    background-color: var(--cf-surface);
 
     overflow: auto;
 
@@ -83,7 +83,7 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: #fff;
+      background-color: var(--cf-surface);
     }
   }
 }

package/lib/components/Form/ModalForm/_hooks/useAdaptiveColumnNum.d.ts

@@ -1,11 +1,11 @@
 import { RefObject } from "react";
 /**
- * 根据容器宽度动态调整列数
- * @param containerRef 需要监听宽度的容器
- * @param columnNum 基础列数
- * @param enabled 是否开启自适应
- * @param minColumnNum 最小列数
- * @param maxColumnNum 最大列数
- * @param baseWidth 参考宽度（根据设计稿可调整）
+ * Dynamically adjust the column count based on container width
+ * @param containerRef Container whose width should be observed
+ * @param columnNum Base column count
+ * @param enabled Whether adaptive mode is enabled
+ * @param minColumnNum Minimum column count
+ * @param maxColumnNum Maximum column count
+ * @param baseWidth Reference width (adjustable per design spec)
  */
 export declare const useAdaptiveColumnNum: (containerRef: RefObject<HTMLElement> | HTMLElement | null, columnNum: number, enabled?: boolean, minColumnNum?: number, maxColumnNum?: number, baseWidth?: number, active?: boolean) => number;

package/lib/components/Form/ModalForm/_hooks/useAdaptiveColumnNum.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.useAdaptiveColumnNum = void 0;
 var _react = require("react");
 /**
- * 根据容器宽度动态调整列数
- * @param containerRef 需要监听宽度的容器
- * @param columnNum 基础列数
- * @param enabled 是否开启自适应
- * @param minColumnNum 最小列数
- * @param maxColumnNum 最大列数
- * @param baseWidth 参考宽度（根据设计稿可调整）
+ * Dynamically adjust the column count based on container width
+ * @param containerRef Container whose width should be observed
+ * @param columnNum Base column count
+ * @param enabled Whether adaptive mode is enabled
+ * @param minColumnNum Minimum column count
+ * @param maxColumnNum Maximum column count
+ * @param baseWidth Reference width (adjustable per design spec)
  */
 const useAdaptiveColumnNum = (containerRef, columnNum, enabled = true, minColumnNum = 1, maxColumnNum, baseWidth = 1200, active = true) => {
   const [adaptiveColumnNum, setAdaptiveColumnNum] = (0, _react.useState)(columnNum);
@@ -29,7 +29,7 @@ const useAdaptiveColumnNum = (containerRef, columnNum, enabled = true, minColumn
       if (!container) return;
       const containerWidth = container.parentElement.offsetWidth;
 
-      // 以 baseWidth 为基准，根据当前容器宽度等比例缩放
+      // Scale proportionally to the current container width, using baseWidth as the baseline
       let next = Math.round(columnNum * containerWidth / baseWidth);
       if (next < minColumnNum) next = minColumnNum;
       if (maxColumnNum !== undefined && next > maxColumnNum) {

package/lib/components/Form/ModalForm/_hooks/useColumnFormItems.d.ts

@@ -1,7 +1,7 @@
 import { FormItemProps } from "../../../FormItem";
 /**
- * 计算列布局中的表单项
- * @param columnNum 列数
- * @returns 计算列表单项的函数
+ * Compute the form items within a column layout
+ * @param columnNum Column count
+ * @returns Function that computes the form items of a column
  */
 export declare const useColumnFormItems: (columnNum: number) => (formItems: FormItemProps[], idx: number) => FormItemProps[];

package/lib/components/Form/ModalForm/_hooks/useColumnFormItems.js

@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.useColumnFormItems = void 0;
 var _react = require("react");
 /**
- * 计算列布局中的表单项
- * @param columnNum 列数
- * @returns 计算列表单项的函数
+ * Compute the form items within a column layout
+ * @param columnNum Column count
+ * @returns Function that computes the form items of a column
  */
 const useColumnFormItems = columnNum => {
   /**
-   * 获取指定索引之前所有全宽表单项（width === "100%"）的索引
-   * @param formItems 所有表单项
-   * @param endIndex 结束索引（包含）
-   * @returns 全宽表单项的索引数组
+   * Get the indices of all full-width form items (width === "100%") before the given index
+   * @param formItems All form items
+   * @param endIndex End index (inclusive)
+   * @returns Array of indices of full-width form items
    */
   const getFullWidthIndices = (0, _react.useCallback)((formItems, endIndex) => {
     const fullWidthIndices = [];
@@ -28,31 +28,31 @@ const useColumnFormItems = columnNum => {
   }, []);
 
   /**
-   * 计算表单项在列布局中的实际列位置索引
-   * 考虑全宽项（width === "100%"）会占据整行，影响后续项的列位置
-   * @param formItems 所有表单项
-   * @param itemIndex 表单项的原始索引
-   * @returns 实际列位置索引
+   * Calculate the actual column position index of a form item within the column layout
+   * Accounts for full-width items (width === "100%") occupying an entire row, which affects the column positions of subsequent items
+   * @param formItems All form items
+   * @param itemIndex Original index of the form item
+   * @returns Actual column position index
    */
   const calculateActualColumnIndex = (0, _react.useCallback)((formItems, itemIndex) => {
     const fullWidthIndices = getFullWidthIndices(formItems, itemIndex);
 
-    // 计算由于全宽项导致的列偏移量
-    // 使用 reduce 累积偏移量
+    // Calculate the column offset caused by full-width items
+    // Accumulate the offset using reduce
     const offset = fullWidthIndices.reduce((acc, curr, idx) => acc + (columnNum - (curr + acc + idx * (columnNum - 1)) % columnNum), 0);
 
-    // 全宽项后的补充项数量
+    // Number of supplementary items after full-width items
     const supplementItemsCount = fullWidthIndices.filter(idx => idx !== itemIndex).length;
     const additionalOffset = supplementItemsCount * (columnNum - 1);
 
-    // 返回实际列索引
+    // Return the actual column index
     return (itemIndex + offset + additionalOffset) % columnNum;
   }, [columnNum, getFullWidthIndices]);
   const columnFormItems = (0, _react.useCallback)((formItems, idx) => {
-    // 计算目标索引的实际列索引
+    // Calculate the actual column index for the target index
     const targetColumnIndex = calculateActualColumnIndex(formItems, idx);
 
-    // 筛选出与目标项在同一列的所有表单项
+    // Filter out all form items in the same column as the target item
     const sameColumnItems = formItems.filter((_, itemIndex) => {
       const itemColumnIndex = calculateActualColumnIndex(formItems, itemIndex);
       return itemColumnIndex === targetColumnIndex;

package/lib/components/Form/ModalForm/_hooks/useFormItems.d.ts

@@ -1,9 +1,9 @@
 import { FormItemProps } from "../../../FormItem";
 /**
- * 处理表单项的布局和标签宽度计算
- * @param formItems 表单项配置
- * @param layout 布局方式
- * @param columnNum 列数
- * @returns 处理后的表单项
+ * Handle form item layout and label width calculation
+ * @param formItems Form item configuration
+ * @param layout Layout mode
+ * @param columnNum Column count
+ * @returns Processed form items
  */
 export declare const useFormItems: (formItems: FormItemProps[] | Record<string, FormItemProps[]>, layout?: "horizontal" | "vertical", columnNum?: number) => Record<string, FormItemProps[]>;

package/lib/components/Form/ModalForm/_hooks/useFormItems.js

@@ -9,11 +9,11 @@ var _useLabelWidth = _interopRequireDefault(require("../../../../hooks/useLabelW
 var _useColumnFormItems = require("./useColumnFormItems");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * 处理表单项的布局和标签宽度计算
- * @param formItems 表单项配置
- * @param layout 布局方式
- * @param columnNum 列数
- * @returns 处理后的表单项
+ * Handle form item layout and label width calculation
+ * @param formItems Form item configuration
+ * @param layout Layout mode
+ * @param columnNum Column count
+ * @returns Processed form items
  */
 const useFormItems = (formItems, layout, columnNum = 2) => {
   const [labelWidth, getLabelWidth] = (0, _useLabelWidth.default)(Array.isArray(formItems) ? formItems : Object.values(formItems ?? {}).flat());

package/lib/components/FormItem/FormCodeMirror/index.js

@@ -23,33 +23,33 @@ const FormCodeMirror = props => {
   const [errorMessage, setErrorMessage] = _react.default.useState(null);
   const form = _antd.Form.useFormInstance();
 
-  // 处理 CodeMirror 的错误回调
+  // Handle the CodeMirror error callback
   const handleError = _react.default.useCallback(error => {
     setErrorMessage(error);
 
-    // 如果有错误，触发表单验证
+    // If there is an error, trigger form validation
     if (name && form) {
       try {
         if (error) {
-          // 设置字段错误
+          // Set the field error
           form.setFields([{
             name: name,
             errors: [" "]
           }]);
         } else {
-          // 清除字段错误
+          // Clear the field error
           form.setFields([{
             name: name,
             errors: []
           }]);
         }
       } catch (e) {
-        // 忽略错误，可能表单还未初始化
+        // Ignore the error; the form may not be initialized yet
       }
     }
   }, [name, form]);
 
-  // 合并验证规则，仅在启用 lint 时添加语法错误验证
+  // Merge validation rules; add syntax error validation only when lint is enabled
   const mergedRules = _react.default.useMemo(() => {
     if (!enableLint) {
       return rules;

package/lib/components/FormItem/FormInput/FormPasswordStrength/index.module.scss

@@ -21,18 +21,18 @@
     border: 0;
     border-radius: 6px;
 
-    background-color: #00000040;
+    background-color: var(--cf-border);
   }
 
-  /* value 处于 [min, low]时 */
+  /* When value is in [min, low] */
   &::-webkit-meter-even-less-good-value {
     background: #ed6f6f;
   }
-  /* value 处于 [low, optimum]时 */
+  /* When value is in [low, optimum] */
   &::-webkit-meter-suboptimum-value {
     background: #efbd47;
   }
-  /* value 处于 [optimum, max]时 */
+  /* When value is in [optimum, max] */
   &::-webkit-meter-optimum-value {
     background: #55d187;
   }
@@ -53,7 +53,7 @@
 
     background-color: transparent;
 
-    border-color: #fff;
+    border-color: var(--cf-surface);
     border-style: solid;
     border-width: 0 5px;
   }

package/lib/components/FormItem/FormRadio/index.module.scss

@@ -36,7 +36,7 @@
           height: 100%;
 
           border-radius: inherit;
-          border-color: rgba(204, 204, 204, 1) !important;
+          border-color: var(--cf-border) !important;
 
           background: transparent !important;
 
@@ -82,7 +82,7 @@
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
-              border-color: rgba(204, 204, 204, 1) !important;
+              border-color: var(--cf-border) !important;
             }
           }
 

package/lib/components/FormItem/FormUpload/index.module.scss

@@ -20,7 +20,7 @@
       cursor: not-allowed;
 
       > div {
-        background-color: rgba(0, 0, 0, 0.04);
+        background-color: var(--cf-subtle);
 
         border-color: var(--cf-border);
 
@@ -47,7 +47,7 @@
       width: max-content;
       height: 46px;
 
-      border: 1px solid rgba(204, 204, 204, 1);
+      border: 1px solid var(--cf-border);
 
       > span {
         &:first-child {
@@ -61,9 +61,9 @@
           font-family: Noto Sans SC;
           font-size: 18px;
           font-weight: 500;
-          color: rgba(51, 51, 51, 1);
+          color: var(--cf-text);
 
-          border-right: 1px solid rgba(204, 204, 204, 1);
+          border-right: 1px solid var(--cf-border);
         }
 
         &:nth-child(2) {
@@ -77,7 +77,7 @@
           font-family: Noto Sans SC;
           font-size: 18px;
           font-weight: 500;
-          color: rgba(122, 122, 122, 1);
+          color: var(--cf-text-2);
 
           > a {
             white-space: nowrap;
@@ -93,7 +93,7 @@
       font-family: Noto Sans SC;
       font-size: 18px;
       font-weight: 500;
-      color: rgba(122, 122, 122, 1);
+      color: var(--cf-text-2);
     }
   }
 
@@ -101,25 +101,25 @@
     height: 180px;
 
     border-radius: 8px;
-    border: 1px dashed rgba(19, 76, 255, 0.6);
-    background: rgba(19, 76, 255, 0.02);
+    border: 1px dashed color-mix(in srgb, var(--primary-color) 60%, transparent);
+    background: color-mix(in srgb, var(--primary-color) 2%, transparent);
 
     transition: all 0.3s;
 
     &:hover {
-      background: rgba(19, 76, 255, 0.08);
+      background: color-mix(in srgb, var(--primary-color) 8%, transparent);
 
-      border-color: #134cff;
+      border-color: var(--primary-color);
     }
 
     .uploadIcon {
       font-size: 40px;
-      color: #134cff;
+      color: var(--primary-color);
     }
 
     .uploadText {
       font-size: 14px;
-      color: #212121;
+      color: var(--cf-text);
 
       > div:first-child {
         margin: 16px 0 8px;
@@ -127,7 +127,7 @@
 
       > div:last-child {
         font-size: 12px;
-        color: #8d8e99;
+        color: var(--cf-text-2);
       }
     }
   }

package/lib/components/FormItem/ItemContainer/index.d.ts

@@ -35,7 +35,7 @@ export interface ItemContainerProps extends FormItemProps {
     labelBreak?: boolean;
     hideAdditiona?: boolean;
     hideLabel?: boolean;
-    /** 显隐开关，由 FormItem 消费；在此解构剥离，避免透传到 DOM */
+    /** Visibility switch, consumed by FormItem; destructured and stripped here to avoid passing it through to the DOM */
     visible?: boolean;
 }
 declare const ItemContainer: React.FC<ItemContainerProps>;

package/lib/components/FormItem/ItemContainer/index.js

@@ -85,10 +85,10 @@ const ItemContainer = props => {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
         arrow: false,
         placement: "top",
-        color: "#f2f4f5",
+        color: "var(--cf-subtle)",
         styles: {
           body: {
-            color: "#131212",
+            color: "var(--cf-text)",
             padding: "6px 12px"
           }
         },
@@ -100,7 +100,7 @@ const ItemContainer = props => {
             e.stopPropagation();
           },
           fontSize: 16,
-          color: "#999999"
+          color: "var(--cf-text-3)"
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: (0, _classnames.default)(_indexModule.default.tipsIconNode, iconClassName),
           onClick: e => {

package/lib/components/FormItem/ItemContainer/index.module.scss

@@ -185,7 +185,7 @@
             margin-inline-start: 0px;
             margin-inline-end: 4px;
 
-            color: #ff4d4f;
+            color: var(--cf-error);
             font-size: 14px;
             font-family: SimSun, sans-serif;
             line-height: 1;
@@ -201,7 +201,7 @@
             margin-inline-start: 0px;
             margin-inline-end: 4px;
 
-            color: #ff4d4f;
+            color: var(--cf-error);
             font-size: 14px;
             font-family: SimSun, sans-serif;
             line-height: 1;
@@ -226,7 +226,7 @@
           margin-inline-start: 4px;
           margin-inline-end: 0px;
 
-          color: #ff4d4f;
+          color: var(--cf-error);
           font-size: 14px;
           font-family: SimSun, sans-serif;
           line-height: 1;
@@ -255,7 +255,7 @@
             margin-inline-start: 4px;
             margin-inline-end: 0px;
 
-            color: #ff4d4f;
+            color: var(--cf-error);
             font-size: 14px;
             font-family: SimSun, sans-serif;
             line-height: 1;