@hsu-react/ui 0.0.13 → 0.0.14

package/lib/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/lib/components/FormItem/databaseTypeMapping.js

@@ -9,17 +9,17 @@ exports.getFormItemTypeByDatabaseType = getFormItemTypeByDatabaseType;
 exports.getRecommendedFormItemType = getRecommendedFormItemType;
 exports.shouldUseTextarea = shouldUseTextarea;
 /**
- * 数据库类型到表单类型的映射
- * 支持 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
  */
 const DATABASE_TYPE_TO_FORM_ITEM_MAP = exports.DATABASE_TYPE_TO_FORM_ITEM_MAP = {
-  // ========== 字符串类型 ==========
+  // ========== String types ==========
   VARCHAR: "INPUT",
   CHAR: "INPUT",
   TEXT: "TEXTAREA",
@@ -31,7 +31,7 @@ const DATABASE_TYPE_TO_FORM_ITEM_MAP = exports.DATABASE_TYPE_TO_FORM_ITEM_MAP =
   NTEXT: "TEXTAREA",
   CLOB: "TEXTAREA",
   STRING: "INPUT",
-  // ========== 数值类型 ==========
+  // ========== Numeric types ==========
   INT: "INPUTNUMBER",
   INTEGER: "INPUTNUMBER",
   BIGINT: "INPUTNUMBER",
@@ -46,7 +46,7 @@ const DATABASE_TYPE_TO_FORM_ITEM_MAP = exports.DATABASE_TYPE_TO_FORM_ITEM_MAP =
   NUMBER: "INPUTNUMBER",
   MONEY: "INPUTNUMBER",
   SMALLMONEY: "INPUTNUMBER",
-  // ========== 日期时间类型 ==========
+  // ========== Date/time types ==========
   DATE: "DATEPICKER",
   TIME: "DATEPICKER",
   DATETIME: "DATEPICKER",
@@ -55,11 +55,11 @@ const DATABASE_TYPE_TO_FORM_ITEM_MAP = exports.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",
@@ -68,47 +68,47 @@ const DATABASE_TYPE_TO_FORM_ITEM_MAP = exports.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
  */
 function getFormItemTypeByDatabaseType(databaseType, defaultType = "INPUT") {
   const upperType = databaseType.toUpperCase().trim();
 
-  // 处理带括号的类型，如 VARCHAR(255), INT(11) 等
+  // Handle types with parentheses, e.g. VARCHAR(255), INT(11), etc.
   const 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
  */
 function shouldUseTextarea(databaseType, length, threshold = 255) {
   const upperType = databaseType.toUpperCase().trim();
   const 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;
   }
@@ -116,24 +116,24 @@ function shouldUseTextarea(databaseType, length, threshold = 255) {
 }
 
 /**
- * 根据数据库类型获取智能推荐的表单类型
- * 结合类型和长度等信息进行智能判断
- * @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
  */
 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
  */
 const DATABASE_TYPE_CATEGORIES = exports.DATABASE_TYPE_CATEGORIES = {
   STRING: ["VARCHAR", "CHAR", "TEXT", "TINYTEXT", "MEDIUMTEXT", "LONGTEXT", "NVARCHAR", "NCHAR", "NTEXT", "CLOB", "STRING"],
@@ -146,9 +146,9 @@ const DATABASE_TYPE_CATEGORIES = exports.DATABASE_TYPE_CATEGORIES = {
 };
 
 /**
- * 获取数据库类型的分类
- * @param databaseType 数据库类型
- * @returns 类型分类
+ * Get the category of a database type
+ * @param databaseType Database type
+ * @returns Type category
  */
 function getDatabaseTypeCategory(databaseType) {
   const upperType = databaseType.toUpperCase().trim();
@@ -162,7 +162,7 @@ function getDatabaseTypeCategory(databaseType) {
 }
 
 /**
- * 反向映射：表单类型到推荐的数据库类型
+ * Reverse mapping: form item types to recommended database types
  */
 const FORM_ITEM_TO_DATABASE_TYPE_MAP = exports.FORM_ITEM_TO_DATABASE_TYPE_MAP = {
   INPUT: ["VARCHAR", "CHAR", "NVARCHAR", "NCHAR", "STRING", "UUID"],

package/lib/components/FormItem/index.js

@@ -28,17 +28,17 @@ var _FormCodeMirror = _interopRequireDefault(require("./FormCodeMirror"));
 var _react = _interopRequireDefault(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// 公共基础类型
+// Common base type
 
-// 核心映射（按分组排序）
+// Core mapping (sorted by group)
 
-// 派生类型
+// Derived type
 
-// 表单项属性
+// Form item props
 
-// 中文字典
+// Chinese dictionary
 const PlaceholderDict = exports.PlaceholderDict = {
-  // 输入类
+  // Input types
   AUTO: "",
   INPUT: "请输入",
   TEXTAREA: "请输入",
@@ -50,7 +50,7 @@ const PlaceholderDict = exports.PlaceholderDict = {
   EDITOR: "请输入",
   CODEMIRROR: "请输入",
   TEXT: "请输入",
-  // 选择类
+  // Selection types
   SELECT: "请选择",
   TREESELECT: "请选择",
   AUTOCOMPLETESELECT: "请选择",
@@ -64,14 +64,14 @@ const PlaceholderDict = exports.PlaceholderDict = {
   STEPPICKER: "请选择",
   TREE: "请选择",
   ICONSELECT: "请选择",
-  // 上传类
+  // Upload types
   FILE: "请上传",
   IMAGEFILE: "请上传"
 };
 
-// 英文字典
+// English dictionary
 const PlaceholderDictEn = exports.PlaceholderDictEn = {
-  // 输入类
+  // Input types
   AUTO: "",
   INPUT: "Please enter",
   TEXTAREA: "Please enter",
@@ -83,7 +83,7 @@ const PlaceholderDictEn = exports.PlaceholderDictEn = {
   EDITOR: "Please enter",
   CODEMIRROR: "Please enter",
   TEXT: "Please enter",
-  // 选择类
+  // Selection types
   SELECT: "Please select",
   TREESELECT: "Please select",
   AUTOCOMPLETESELECT: "Please select",
@@ -97,7 +97,7 @@ const PlaceholderDictEn = exports.PlaceholderDictEn = {
   STEPPICKER: "Please select",
   TREE: "Please select",
   ICONSELECT: "Please select",
-  // 上传类
+  // Upload types
   FILE: "Please upload",
   IMAGEFILE: "Please upload"
 };

package/lib/components/Icon/index.js

@@ -13,7 +13,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/** 判断是否为 AntD 图标组件名（如 "SettingOutlined"），并返回对应组件 */
+/** Check whether it is an AntD icon component name (e.g. "SettingOutlined") and return the corresponding component */
 const getAntdIcon = icon => {
   if (typeof icon !== "string") return undefined;
   if (!/(?:Outlined|Filled|TwoTone)$/.test(icon)) return undefined;
@@ -40,7 +40,7 @@ const Icon = props => {
     ...style
   };
 
-  // 兼容 AntD 图标名（如 "SettingOutlined"），直接渲染对应 AntD 图标组件
+  // Support AntD icon names (e.g. "SettingOutlined") by rendering the corresponding AntD icon component directly
   const AntdNamedIcon = getAntdIcon(icon);
   if (AntdNamedIcon) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(AntdNamedIcon, {
@@ -51,8 +51,8 @@ const Icon = props => {
     });
   }
 
-  // iconify 图标：直接用 span 承载 Iconify 自带的 svg，避免把它嵌套进 antd Icon
-  // 的 svg（其 viewBox 会把内层 svg 缩放成极小值导致图标不可见）。
+  // Iconify icons: host Iconify's own svg directly in a span, instead of nesting it inside
+  // the antd Icon's svg (whose viewBox would scale the inner svg down so much the icon becomes invisible).
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...iconConfig,
     role: "img",

package/lib/components/Input/Number/index.js

@@ -30,7 +30,7 @@ const InputNumber = props => {
   const ref = (0, _react.useRef)(null);
   const wrapperRef = (0, _react.useRef)(null);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? typeof value === "number" ? `${value}` : value?.toString() ?? "" : defaultValue !== undefined ? typeof defaultValue === "number" ? `${defaultValue}` : defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
   const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
@@ -44,7 +44,7 @@ const InputNumber = props => {
     wait: 10
   });
   (0, _react.useEffect)(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
       if (value !== undefined) {
@@ -52,7 +52,7 @@ const InputNumber = props => {
         setValue(newValue);
         setLastValue(newValue);
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }
@@ -62,7 +62,7 @@ const InputNumber = props => {
     getRef?.(ref.current);
   }, [getRef]);
 
-  // 动态计算 addonAfter 的宽度，并设置 CSS 变量
+  // Dynamically compute the width of addonAfter and set the CSS variable
   (0, _react.useEffect)(() => {
     if (addonAfter && wrapperRef.current) {
       const updateAddonWidth = () => {
@@ -72,12 +72,12 @@ const InputNumber = props => {
         }
       };
 
-      // 使用 requestAnimationFrame 确保 DOM 渲染完成后再计算
+      // Use requestAnimationFrame to ensure the DOM has rendered before computing
       const rafId = requestAnimationFrame(() => {
         updateAddonWidth();
       });
 
-      // 监听窗口大小变化和元素大小变化，重新计算
+      // Observe window and element size changes to recompute
       const resizeObserver = new ResizeObserver(() => {
         updateAddonWidth();
       });

package/lib/components/Input/Number/index.module.scss

@@ -65,11 +65,11 @@
     }
   }
 
-  // 当存在 addonAfter 时，调整清除图标位置
-  // Ant Design 的 addonAfter 会生成 :global(.ant-input-number-group-addon)
-  // 清除图标需要向左偏移，避免与 addon 重叠
-  // 使用 CSS 变量来动态设置 addon 宽度，默认值 60px 是合理的估算
-  // 通过 JS 动态计算实际宽度并设置 CSS 变量来覆盖
+  // Adjust the clear icon position when addonAfter is present
+  // Ant Design's addonAfter generates :global(.ant-input-number-group-addon)
+  // The clear icon needs to shift left to avoid overlapping the addon
+  // Use a CSS variable to set the addon width dynamically; the default 60px is a reasonable estimate
+  // JS computes the actual width and sets the CSS variable to override it
   &.hasAddonAfter {
     .clearIcon {
       right: calc(11px + var(--addon-after-width, 60px));

package/lib/components/Input/Password/index.js

@@ -24,7 +24,7 @@ const Password = props => {
   const [isComposing, setComposing] = (0, _react.useState)(false);
   const ref = (0, _react.useRef)(null);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value?.toString() ?? "" : defaultValue !== undefined ? defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
   const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
@@ -38,14 +38,14 @@ const Password = props => {
     }
   }, [_value, isComposing, lastValue, onChange]);
   (0, _react.useEffect)(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
       if (value !== undefined) {
         setValue(value?.toString());
         setLastValue(value?.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }

package/lib/components/Input/Range/index.js

@@ -29,21 +29,21 @@ const RangeInput = props => {
     disabled
   } = props;
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value : defaultValue;
   const [_value, setValue] = (0, _react.useState)(initialValue);
   const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
   const [focus, setFocus] = (0, _react.useState)(false);
   const prevValueRef = _react.default.useRef(undefined);
   (0, _react.useEffect)(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (!_hsuUtils.Equal.ObjEqual(prevValueRef.current, value)) {
       prevValueRef.current = value;
       if (value !== undefined) {
         setValue(value);
         setLastValue(value);
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue(undefined);
         setLastValue(undefined);
       }

package/lib/components/Input/Range/index.module.scss

@@ -56,9 +56,9 @@
 
       &.focused,
       &:hover {
-        border-color: #1677ff;
+        border-color: var(--primary-color);
 
-        box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 10%, transparent);
       }
     }
 

package/lib/components/Input/Search/index.js

@@ -24,7 +24,7 @@ const Search = props => {
   const [isComposing, setComposing] = (0, _react.useState)(false);
   const ref = (0, _react.useRef)(null);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value?.toString() ?? "" : defaultValue !== undefined ? defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
   const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
@@ -38,14 +38,14 @@ const Search = props => {
     }
   }, [_value, isComposing, lastValue, onChange]);
   (0, _react.useEffect)(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
       if (value !== undefined) {
         setValue(value?.toString());
         setLastValue(value?.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }

package/lib/components/Input/TextArea/index.js

@@ -37,7 +37,7 @@ const TextArea = props => {
   const ref = (0, _react.useRef)(null);
   const [focused, setFocused] = (0, _react.useState)(false);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const initialValue = value !== undefined ? value?.toString() ?? "" : defaultValue !== undefined ? defaultValue?.toString() ?? "" : "";
   const [_value, setValue] = (0, _react.useState)(initialValue);
   const [lastValue, setLastValue] = (0, _react.useState)(initialValue);
@@ -52,14 +52,14 @@ const TextArea = props => {
     }
   }, [isComposing, onChange, _value, lastValue]);
   (0, _react.useEffect)(() => {
-    // 只在外部 value prop 真正变化时才更新内部状态
+    // Update internal state only when the external value prop actually changes
     if (prevValueRef.current !== value) {
       prevValueRef.current = value;
       if (value !== undefined) {
         setValue(value?.toString());
         setLastValue(value?.toString());
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }
@@ -69,7 +69,7 @@ const TextArea = props => {
     getRef?.(ref.current);
   }, [getRef]);
   (0, _react.useEffect)(() => {
-    // 使用 MutationObserver 监听错误状态变化
+    // Use a MutationObserver to watch for error state changes
     const checkError = () => {
       if (ref.current?.resizableTextArea?.textArea) {
         const textAreaElement = ref.current.resizableTextArea.textArea;
@@ -78,10 +78,10 @@ const TextArea = props => {
       }
     };
 
-    // 初始检查
+    // Initial check
     checkError();
 
-    // 监听 DOM 变化
+    // Observe DOM changes
     if (ref.current?.resizableTextArea?.textArea) {
       const textAreaElement = ref.current.resizableTextArea.textArea;
       const observer = new MutationObserver(checkError);

package/lib/components/Input/TextArea/index.module.scss

@@ -9,7 +9,7 @@
   min-width: 0;
   height: max-content;
 
-  // CF 风格：随外观切换的描边输入控件
+  // CF style: outlined input control that follows the appearance theme
   background: var(--cf-surface);
 
   border-width: 1px;
@@ -86,7 +86,7 @@
           position: relative;
           bottom: auto;
 
-          color: #909399;
+          color: var(--cf-text-2);
           font-size: 14px;
         }
 
@@ -113,13 +113,13 @@
   &:not(.hasError).focused {
     border-color: var(--primary-color);
 
-    box-shadow: 0 0 0 2px rgba(19, 194, 194, 0.12);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 12%, transparent);
   }
 
   &.hasError {
-    border-color: #ff4d4f;
+    border-color: var(--cf-error);
 
-    box-shadow: 0 0 0 2px rgba(255, 38, 5, 0.06);
+    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cf-error) 6%, transparent);
 
     :global(.ant-input-status-error) {
       border: none !important;