@hsu-react/ui 0.0.12 → 0.0.14

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

@@ -7,13 +7,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useEffect, useState } 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 var useAdaptiveColumnNum = function useAdaptiveColumnNum(containerRef, columnNum) {
   var enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
@@ -38,7 +38,7 @@ export var useAdaptiveColumnNum = function useAdaptiveColumnNum(containerRef, co
       if (!container) return;
       var containerWidth = container.parentElement.offsetWidth;
 
-      // 以 baseWidth 为基准，根据当前容器宽度等比例缩放
+      // Scale proportionally to the current container width, using baseWidth as the baseline
       var next = Math.round(columnNum * containerWidth / baseWidth);
       if (next < minColumnNum) next = minColumnNum;
       if (maxColumnNum !== undefined && next > maxColumnNum) {

package/es/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/es/components/Form/ModalForm/_hooks/useColumnFormItems.js

@@ -1,15 +1,15 @@
 import { useCallback } from "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
  */
 export var useColumnFormItems = function 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
    */
   var getFullWidthIndices = useCallback(function (formItems, endIndex) {
     var fullWidthIndices = [];
@@ -23,35 +23,35 @@ export var useColumnFormItems = function 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
    */
   var calculateActualColumnIndex = useCallback(function (formItems, itemIndex) {
     var fullWidthIndices = getFullWidthIndices(formItems, itemIndex);
 
-    // 计算由于全宽项导致的列偏移量
-    // 使用 reduce 累积偏移量
+    // Calculate the column offset caused by full-width items
+    // Accumulate the offset using reduce
     var offset = fullWidthIndices.reduce(function (acc, curr, idx) {
       return acc + (columnNum - (curr + acc + idx * (columnNum - 1)) % columnNum);
     }, 0);
 
-    // 全宽项后的补充项数量
+    // Number of supplementary items after full-width items
     var supplementItemsCount = fullWidthIndices.filter(function (idx) {
       return idx !== itemIndex;
     }).length;
     var additionalOffset = supplementItemsCount * (columnNum - 1);
 
-    // 返回实际列索引
+    // Return the actual column index
     return (itemIndex + offset + additionalOffset) % columnNum;
   }, [columnNum, getFullWidthIndices]);
   var columnFormItems = useCallback(function (formItems, idx) {
-    // 计算目标索引的实际列索引
+    // Calculate the actual column index for the target index
     var targetColumnIndex = calculateActualColumnIndex(formItems, idx);
 
-    // 筛选出与目标项在同一列的所有表单项
+    // Filter out all form items in the same column as the target item
     var sameColumnItems = formItems.filter(function (_, itemIndex) {
       var itemColumnIndex = calculateActualColumnIndex(formItems, itemIndex);
       return itemColumnIndex === targetColumnIndex;

package/es/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/es/components/Form/ModalForm/_hooks/useFormItems.js

@@ -9,11 +9,11 @@ import useLabelWidth from "../../../../hooks/useLabelWidth";
 import { useColumnFormItems } from "./useColumnFormItems";
 
 /**
- * 处理表单项的布局和标签宽度计算
- * @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 var useFormItems = function useFormItems(formItems, layout) {
   var columnNum = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;

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

@@ -39,33 +39,33 @@ var FormCodeMirror = function FormCodeMirror(props) {
     setErrorMessage = _React$useState2[1];
   var form = Form.useFormInstance();
 
-  // 处理 CodeMirror 的错误回调
+  // Handle the CodeMirror error callback
   var handleError = React.useCallback(function (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
   var mergedRules = React.useMemo(function () {
     if (!enableLint) {
       return rules;

package/es/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/es/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/es/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/es/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/es/components/FormItem/ItemContainer/index.js

@@ -101,10 +101,10 @@ var ItemContainer = function ItemContainer(props) {
       }), /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
         arrow: false,
         placement: "top",
-        color: "#f2f4f5",
+        color: "var(--cf-subtle)",
         styles: {
           body: {
-            color: "#131212",
+            color: "var(--cf-text)",
             padding: "6px 12px"
           }
         }
@@ -116,7 +116,7 @@ var ItemContainer = function ItemContainer(props) {
             e.stopPropagation();
           },
           fontSize: 16,
-          color: "#999999"
+          color: "var(--cf-text-3)"
         }) : /*#__PURE__*/_jsx("div", {
           className: classNames(styles.tipsIconNode, iconClassName),
           onClick: function onClick(e) {

package/es/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;

package/es/components/FormItem/databaseTypeMapping.d.ts

@@ -1,39 +1,39 @@
 import { FormItemType } from "./index";
 /**
- * 数据库类型到表单类型的映射
- * 支持 MySQL、PostgreSQL、Oracle、SQL Server、SQLite 等常见数据库
+ * Mapping from database types to form item types
+ * Supports common databases such as MySQL, PostgreSQL, Oracle, SQL Server, SQLite, etc.
  */
 export type DatabaseType = "VARCHAR" | "CHAR" | "TEXT" | "TINYTEXT" | "MEDIUMTEXT" | "LONGTEXT" | "NVARCHAR" | "NCHAR" | "NTEXT" | "CLOB" | "STRING" | "INT" | "INTEGER" | "BIGINT" | "SMALLINT" | "TINYINT" | "MEDIUMINT" | "DECIMAL" | "NUMERIC" | "FLOAT" | "DOUBLE" | "REAL" | "NUMBER" | "MONEY" | "SMALLMONEY" | "DATE" | "TIME" | "DATETIME" | "TIMESTAMP" | "YEAR" | "DATETIME2" | "SMALLDATETIME" | "DATETIMEOFFSET" | "BOOLEAN" | "BOOL" | "BIT" | "BLOB" | "TINYBLOB" | "MEDIUMBLOB" | "LONGBLOB" | "BINARY" | "VARBINARY" | "IMAGE" | "BYTEA" | "JSON" | "JSONB" | "UUID" | "ENUM" | "SET";
 /**
- * 数据库类型到表单类型的映射表
+ * Mapping table from database types to form item types
  */
 export declare const DATABASE_TYPE_TO_FORM_ITEM_MAP: Record<string, FormItemType>;
 /**
- * 根据数据库类型获取对应的表单类型
- * @param databaseType 数据库类型（不区分大小写）
- * @param defaultType 默认表单类型，如果找不到映射则返回此类型
- * @returns 表单类型
+ * Get the corresponding form item type by database type
+ * @param databaseType Database type (case-insensitive)
+ * @param defaultType Default form item type, returned when no mapping is found
+ * @returns Form item type
  */
 export declare function getFormItemTypeByDatabaseType(databaseType: string, defaultType?: FormItemType): FormItemType;
 /**
- * 根据数据库类型和长度判断是否应该使用 TEXTAREA
- * 如果字符串类型长度超过阈值，建议使用 TEXTAREA
- * @param databaseType 数据库类型
- * @param length 字段长度
- * @param threshold 阈值，默认 255
- * @returns 是否应该使用 TEXTAREA
+ * Determine whether TEXTAREA should be used based on database type and length
+ * If a string type's length exceeds the threshold, TEXTAREA is recommended
+ * @param databaseType Database type
+ * @param length Field length
+ * @param threshold Threshold, defaults to 255
+ * @returns Whether TEXTAREA should be used
  */
 export declare function shouldUseTextarea(databaseType: string, length?: number, threshold?: number): boolean;
 /**
- * 根据数据库类型获取智能推荐的表单类型
- * 结合类型和长度等信息进行智能判断
- * @param databaseType 数据库类型
- * @param length 字段长度
- * @returns 推荐的表单类型
+ * Get the intelligently recommended form item type by database type
+ * Makes a smart decision combining type, length, and other information
+ * @param databaseType Database type
+ * @param length Field length
+ * @returns Recommended form item type
  */
 export declare function getRecommendedFormItemType(databaseType: string, length?: number): FormItemType;
 /**
- * 数据库类型分类
+ * Database type categories
  */
 export declare const DATABASE_TYPE_CATEGORIES: {
     readonly STRING: readonly ["VARCHAR", "CHAR", "TEXT", "TINYTEXT", "MEDIUMTEXT", "LONGTEXT", "NVARCHAR", "NCHAR", "NTEXT", "CLOB", "STRING"];
@@ -45,12 +45,12 @@ export declare const DATABASE_TYPE_CATEGORIES: {
     readonly OTHER: readonly ["UUID", "ENUM", "SET"];
 };
 /**
- * 获取数据库类型的分类
- * @param databaseType 数据库类型
- * @returns 类型分类
+ * Get the category of a database type
+ * @param databaseType Database type
+ * @returns Type category
  */
 export declare function getDatabaseTypeCategory(databaseType: string): keyof typeof DATABASE_TYPE_CATEGORIES | null;
 /**
- * 反向映射：表单类型到推荐的数据库类型
+ * Reverse mapping: form item types to recommended database types
  */
 export declare const FORM_ITEM_TO_DATABASE_TYPE_MAP: Partial<Record<FormItemType, DatabaseType[]>>;

package/es/components/FormItem/databaseTypeMapping.js

@@ -5,17 +5,17 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 /**
- * 数据库类型到表单类型的映射
- * 支持 MySQL、PostgreSQL、Oracle、SQL Server、SQLite 等常见数据库
+ * Mapping from database types to form item types
+ * Supports common databases such as MySQL, PostgreSQL, Oracle, SQL Server, SQLite, etc.
  */
 
-// 数据库类型枚举（不区分大小写）
+// Database type enum (case-insensitive)
 
 /**
- * 数据库类型到表单类型的映射表
+ * Mapping table from database types to form item types
  */
 export var DATABASE_TYPE_TO_FORM_ITEM_MAP = {
-  // ========== 字符串类型 ==========
+  // ========== String types ==========
   VARCHAR: "INPUT",
   CHAR: "INPUT",
   TEXT: "TEXTAREA",
@@ -27,7 +27,7 @@ export var DATABASE_TYPE_TO_FORM_ITEM_MAP = {
   NTEXT: "TEXTAREA",
   CLOB: "TEXTAREA",
   STRING: "INPUT",
-  // ========== 数值类型 ==========
+  // ========== Numeric types ==========
   INT: "INPUTNUMBER",
   INTEGER: "INPUTNUMBER",
   BIGINT: "INPUTNUMBER",
@@ -42,7 +42,7 @@ export var DATABASE_TYPE_TO_FORM_ITEM_MAP = {
   NUMBER: "INPUTNUMBER",
   MONEY: "INPUTNUMBER",
   SMALLMONEY: "INPUTNUMBER",
-  // ========== 日期时间类型 ==========
+  // ========== Date/time types ==========
   DATE: "DATEPICKER",
   TIME: "DATEPICKER",
   DATETIME: "DATEPICKER",
@@ -51,11 +51,11 @@ export var DATABASE_TYPE_TO_FORM_ITEM_MAP = {
   DATETIME2: "DATEPICKER",
   SMALLDATETIME: "DATEPICKER",
   DATETIMEOFFSET: "DATEPICKER",
-  // ========== 布尔类型 ==========
+  // ========== Boolean types ==========
   BOOLEAN: "SWITCH",
   BOOL: "SWITCH",
   BIT: "SWITCH",
-  // ========== 二进制类型 ==========
+  // ========== Binary types ==========
   BLOB: "FILE",
   TINYBLOB: "FILE",
   MEDIUMBLOB: "FILE",
@@ -64,49 +64,49 @@ export var DATABASE_TYPE_TO_FORM_ITEM_MAP = {
   VARBINARY: "FILE",
   IMAGE: "IMAGEFILE",
   BYTEA: "FILE",
-  // ========== JSON 类型 ==========
+  // ========== JSON types ==========
   JSON: "CODEMIRROR",
   JSONB: "CODEMIRROR",
-  // ========== 其他类型 ==========
+  // ========== Other types ==========
   UUID: "INPUT",
   ENUM: "SELECT",
   SET: "CHECKBOXGROUP"
 };
 
 /**
- * 根据数据库类型获取对应的表单类型
- * @param databaseType 数据库类型（不区分大小写）
- * @param defaultType 默认表单类型，如果找不到映射则返回此类型
- * @returns 表单类型
+ * Get the corresponding form item type by database type
+ * @param databaseType Database type (case-insensitive)
+ * @param defaultType Default form item type, returned when no mapping is found
+ * @returns Form item type
  */
 export function getFormItemTypeByDatabaseType(databaseType) {
   var defaultType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "INPUT";
   var upperType = databaseType.toUpperCase().trim();
 
-  // 处理带括号的类型，如 VARCHAR(255), INT(11) 等
+  // Handle types with parentheses, e.g. VARCHAR(255), INT(11), etc.
   var baseType = upperType.split("(")[0].trim();
   return DATABASE_TYPE_TO_FORM_ITEM_MAP[baseType] || defaultType;
 }
 
 /**
- * 根据数据库类型和长度判断是否应该使用 TEXTAREA
- * 如果字符串类型长度超过阈值，建议使用 TEXTAREA
- * @param databaseType 数据库类型
- * @param length 字段长度
- * @param threshold 阈值，默认 255
- * @returns 是否应该使用 TEXTAREA
+ * Determine whether TEXTAREA should be used based on database type and length
+ * If a string type's length exceeds the threshold, TEXTAREA is recommended
+ * @param databaseType Database type
+ * @param length Field length
+ * @param threshold Threshold, defaults to 255
+ * @returns Whether TEXTAREA should be used
  */
 export function shouldUseTextarea(databaseType, length) {
   var threshold = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 255;
   var upperType = databaseType.toUpperCase().trim();
   var baseType = upperType.split("(")[0].trim();
 
-  // 如果已经是 TEXT 类型，直接返回 true
+  // If it is already a TEXT type, return true directly
   if (["TEXT", "TINYTEXT", "MEDIUMTEXT", "LONGTEXT", "NTEXT", "CLOB"].includes(baseType)) {
     return true;
   }
 
-  // 如果是 VARCHAR 或 CHAR 类型，且长度超过阈值，建议使用 TEXTAREA
+  // If it is a VARCHAR or CHAR type and the length exceeds the threshold, TEXTAREA is recommended
   if (["VARCHAR", "CHAR", "NVARCHAR", "NCHAR"].includes(baseType)) {
     return length ? length > threshold : false;
   }
@@ -114,24 +114,24 @@ export function shouldUseTextarea(databaseType, length) {
 }
 
 /**
- * 根据数据库类型获取智能推荐的表单类型
- * 结合类型和长度等信息进行智能判断
- * @param databaseType 数据库类型
- * @param length 字段长度
- * @returns 推荐的表单类型
+ * Get the intelligently recommended form item type by database type
+ * Makes a smart decision combining type, length, and other information
+ * @param databaseType Database type
+ * @param length Field length
+ * @returns Recommended form item type
  */
 export function getRecommendedFormItemType(databaseType, length) {
-  // 如果字符串类型长度较大，使用 TEXTAREA
+  // If the string type has a large length, use TEXTAREA
   if (shouldUseTextarea(databaseType, length)) {
     return "TEXTAREA";
   }
 
-  // 使用基础映射
+  // Use the base mapping
   return getFormItemTypeByDatabaseType(databaseType);
 }
 
 /**
- * 数据库类型分类
+ * Database type categories
  */
 export var DATABASE_TYPE_CATEGORIES = {
   STRING: ["VARCHAR", "CHAR", "TEXT", "TINYTEXT", "MEDIUMTEXT", "LONGTEXT", "NVARCHAR", "NCHAR", "NTEXT", "CLOB", "STRING"],
@@ -144,9 +144,9 @@ export var DATABASE_TYPE_CATEGORIES = {
 };
 
 /**
- * 获取数据库类型的分类
- * @param databaseType 数据库类型
- * @returns 类型分类
+ * Get the category of a database type
+ * @param databaseType Database type
+ * @returns Type category
  */
 export function getDatabaseTypeCategory(databaseType) {
   var upperType = databaseType.toUpperCase().trim();
@@ -163,7 +163,7 @@ export function getDatabaseTypeCategory(databaseType) {
 }
 
 /**
- * 反向映射：表单类型到推荐的数据库类型
+ * Reverse mapping: form item types to recommended database types
  */
 export var FORM_ITEM_TO_DATABASE_TYPE_MAP = {
   INPUT: ["VARCHAR", "CHAR", "NVARCHAR", "NCHAR", "STRING", "UUID"],