@hsu-react/ui 0.0.12 → 0.0.14

package/lib/components/Input/index.js

@@ -37,7 +37,7 @@ const Input = props => {
   const [isComposing, setComposing] = (0, _react.useState)(false);
   const ref = (0, _react.useRef)(null);
 
-  // 处理转义：如果值中包含 escapeCharacters 中的字符，则在前面加上转义
+  // Handle escaping: if the value contains characters listed in escapeCharacters, prefix them with an escape
   const escapeValue = (0, _react.useCallback)(val => {
     if (!escapeCharacters || escapeCharacters.length === 0) {
       return val;
@@ -46,19 +46,19 @@ const Input = props => {
     let i = 0;
     while (i < val.length) {
       const char = val[i];
-      // 检查是否是转义字符，且下一个字符是需要转义的字符
+      // Check if this is an escape character and the next character is one that needs escaping
       if (char === "\\" && i + 1 < val.length) {
         const nextChar = val[i + 1];
-        // 如果下一个字符是需要转义的字符，说明已经转义过了，直接添加
+        // If the next character is one that needs escaping, it is already escaped; append as is
         if (escapeCharacters.includes(nextChar)) {
           result += char + nextChar;
           i += 2;
           continue;
         }
       }
-      // 如果当前字符是需要转义的字符，且前面没有转义符，则添加转义符
+      // If the current character needs escaping and is not already preceded by an escape, add the escape character
       if (escapeCharacters.includes(char)) {
-        // 检查前面是否已经有转义符（避免重复转义）
+        // Check whether an escape character already precedes it (avoid double escaping)
         if (i === 0 || val[i - 1] !== "\\") {
           result += "\\" + char;
         } else {
@@ -72,7 +72,7 @@ const Input = props => {
     return result;
   }, [escapeCharacters]);
 
-  // 处理去转义：如果值中包含转义格式，则去除转义
+  // Handle unescaping: if the value contains escaped sequences, remove the escapes
   const unescapeValue = (0, _react.useCallback)(val => {
     if (!escapeCharacters || escapeCharacters.length === 0) {
       return val;
@@ -81,11 +81,11 @@ const Input = props => {
     let i = 0;
     while (i < val.length) {
       const char = val[i];
-      // 如果当前字符是反斜杠，且下一个字符是需要转义的字符
+      // If the current character is a backslash and the next character is one that needs escaping
       if (char === "\\" && i + 1 < val.length) {
         const nextChar = val[i + 1];
         if (escapeCharacters.includes(nextChar)) {
-          // 跳过反斜杠，只添加需要转义的字符
+          // Skip the backslash and append only the escaped character
           result += nextChar;
           i += 2;
           continue;
@@ -97,7 +97,7 @@ const Input = props => {
     return result;
   }, [escapeCharacters]);
 
-  // 初始化时优先使用 value，其次使用 defaultValue
+  // On initialization, prefer value, then fall back to defaultValue
   const getInitialValue = () => {
     const rawValue = value !== undefined ? typeof value === "number" ? `${value}` : value?.toString() ?? "" : defaultValue !== undefined ? typeof defaultValue === "number" ? `${defaultValue}` : defaultValue?.toString() ?? "" : "";
     return unescapeValue(rawValue);
@@ -111,7 +111,7 @@ const Input = props => {
       const trimmedValue = _value.trim();
       const finalValue = trimmedValue === "" ? "" : _value;
       setLastValue(finalValue);
-      // 如果设置了 escapeCharacters 且值匹配，则返回转义后的值
+      // If escapeCharacters is set and the value matches, return the escaped value
       const escapedValue = escapeValue(finalValue);
       onChange?.(escapedValue);
     }
@@ -119,17 +119,17 @@ const Input = 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) {
         const rawValue = typeof value === "number" ? `${value}` : value?.toString();
-        // 去除转义后再显示
+        // Unescape before displaying
         const newValue = unescapeValue(rawValue);
         setValue(newValue);
         setLastValue(newValue);
       } else {
-        // 只在初始化或外部主动设置为 undefined 时清空
+        // Clear only on initialization or when explicitly set to undefined externally
         setValue("");
         setLastValue("");
       }
@@ -153,7 +153,7 @@ const Input = props => {
       },
       value: _value,
       onChange: e => {
-        // 用户输入时，先去除转义，然后再设置到状态中
+        // On user input, unescape first, then set into state
         const inputValue = e.target.value;
         const unescapedInput = unescapeValue(inputValue);
         setValue(unescapedInput);

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

@@ -1,8 +1,8 @@
 .antdInput {
   width: 100%;
   height: 100%;
-  // 父级未给定高度时（height:100% 解析为 auto），保证最小高度，避免输入框被压扁；
-  // 内部 .ant-input-wrapper / .ant-input 通过 min-height: inherit 继承该值。
+  // When the parent has no set height (height:100% resolves to auto), ensure a minimum height so the input is not squashed;
+  // the inner .ant-input-wrapper / .ant-input inherit this value via min-height: inherit.
   min-height: 32px;
 
   :global(.ant-input-clear-icon) {

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

@@ -6,7 +6,7 @@
   width: 100%;
   height: 100%;
 
-  background: #fff;
+  background: var(--cf-surface);
 
   border-radius: 10px;
 
@@ -31,7 +31,7 @@
     overflow: hidden;
 
     &.disabled {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: var(--cf-subtle);
 
       cursor: no-drop;
 
@@ -46,7 +46,7 @@
           .section {
             textarea,
             .section-container {
-              background: rgba(0, 0, 0, 0.04);
+              background: var(--cf-subtle);
             }
           }
         }

package/lib/components/Markdown/Views/ArtifactBlock.d.ts

@@ -1,15 +1,15 @@
 import React from "react";
 export interface ArtifactBlockProps {
-    /** 原始代码（html/svg） */
+    /** Raw source code (html/svg) */
     code: string;
-    /** 语言标记（html / svg） */
+    /** Language tag (html / svg) */
     lang: string;
-    /** 代码视图（沿用外层的高亮代码块渲染） */
+    /** Code view (reuses the outer highlighted code block rendering) */
     codeView: React.ReactNode;
 }
 /**
- * HTML/SVG Artifacts 预览块（对标 Claude Artifacts）：代码 / 预览两个页签，
- * 预览在 sandbox iframe（仅 allow-scripts，无同源权限）里渲染模型产出的页面。
+ * HTML/SVG Artifacts preview block (modeled after Claude Artifacts): code / preview tabs;
+ * the preview renders the model-generated page in a sandbox iframe (allow-scripts only, no same-origin access).
  */
 declare const ArtifactBlock: React.FC<ArtifactBlockProps>;
 export default ArtifactBlock;

package/lib/components/Markdown/Views/ArtifactBlock.js

@@ -12,8 +12,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 /**
- * HTML/SVG Artifacts 预览块（对标 Claude Artifacts）：代码 / 预览两个页签，
- * 预览在 sandbox iframe（仅 allow-scripts，无同源权限）里渲染模型产出的页面。
+ * HTML/SVG Artifacts preview block (modeled after Claude Artifacts): code / preview tabs;
+ * the preview renders the model-generated page in a sandbox iframe (allow-scripts only, no same-origin access).
  */
 const ArtifactBlock = ({
   code,

package/lib/components/Markdown/Views/MermaidBlock.d.ts

@@ -3,8 +3,8 @@ export interface MermaidBlockProps {
     code: string;
 }
 /**
- * Mermaid 图渲染块（对标 Claude/Kimi 等的流程图渲染）：
- * 渲染成功显示 SVG；语法不完整（如流式生成中）静默回退为代码展示。
+ * Mermaid diagram rendering block (modeled after the flowchart rendering in Claude/Kimi etc.):
+ * shows SVG on successful render; silently falls back to code display when the syntax is incomplete (e.g. during streaming).
  */
 declare const MermaidBlock: React.FC<MermaidBlockProps>;
 export default MermaidBlock;

package/lib/components/Markdown/Views/MermaidBlock.js

@@ -10,7 +10,7 @@ var _blocksModule = _interopRequireDefault(require("./blocks.module.scss"));
 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; } // mermaid 体积大，懒加载并全局只初始化一次
+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; } // mermaid is large; lazy-load it and initialize globally only once
 let mermaidPromise = null;
 const loadMermaid = () => {
   if (!mermaidPromise) {
@@ -26,8 +26,8 @@ const loadMermaid = () => {
   return mermaidPromise;
 };
 /**
- * Mermaid 图渲染块（对标 Claude/Kimi 等的流程图渲染）：
- * 渲染成功显示 SVG；语法不完整（如流式生成中）静默回退为代码展示。
+ * Mermaid diagram rendering block (modeled after the flowchart rendering in Claude/Kimi etc.):
+ * shows SVG on successful render; silently falls back to code display when the syntax is incomplete (e.g. during streaming).
  */
 const MermaidBlock = ({
   code
@@ -42,9 +42,9 @@ const MermaidBlock = ({
       }) => {
         if (!cancelled) setSvg(rendered);
       }).catch(() => {
-        // 流式生成中代码不完整属正常态，回退为代码展示
+        // Incomplete code during streaming is normal; fall back to code display
         if (!cancelled) setSvg(null);
-        // mermaid.render 失败会在 DOM 残留错误占位节点，清理掉
+        // A failed mermaid.render leaves an error placeholder node in the DOM; clean it up
         document.getElementById(`d${id}`)?.remove();
       });
     }, 300);

package/lib/components/Markdown/Views/blocks.module.scss

@@ -4,7 +4,7 @@
   padding: 12px;
   margin: 8px 0;
   background: #fff;
-  border: 1px solid #ececee;
+  border: 1px solid var(--cf-border-weak);
   border-radius: 8px;
   overflow-x: auto;
 
@@ -17,7 +17,7 @@
 .mermaidFallback {
   margin: 8px 0;
   padding: 12px;
-  background: #f7f7f8;
+  background: var(--cf-subtle);
   border-radius: 8px;
   overflow-x: auto;
 
@@ -28,7 +28,7 @@
 
 .artifact {
   margin: 8px 0;
-  border: 1px solid #ececee;
+  border: 1px solid var(--cf-border-weak);
   border-radius: 10px;
   overflow: hidden;
 
@@ -37,14 +37,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 6px 12px;
-    background: #f7f7f8;
-    border-bottom: 1px solid #ececee;
+    background: var(--cf-subtle);
+    border-bottom: 1px solid var(--cf-border-weak);
   }
 
   .artifactLang {
     font-size: 12px;
     font-weight: 600;
-    color: #6b6e76;
+    color: var(--cf-text-2);
   }
 
   .artifactTabs {
@@ -58,21 +58,21 @@
     border: none;
     border-radius: 999px;
     background: transparent;
-    color: #6b6e76;
+    color: var(--cf-text-2);
     cursor: pointer;
 
     &:hover {
-      background: #ececee;
+      background: var(--cf-row-hover);
     }
   }
 
   .artifactTabActive {
-    background: #fff;
+    background: var(--cf-surface);
     color: #4f46e5;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    box-shadow: var(--cf-shadow-1);
 
     &:hover {
-      background: #fff;
+      background: var(--cf-surface);
     }
   }
 

package/lib/components/Markdown/Views/index.js

@@ -20,11 +20,11 @@ var _MermaidBlock = _interopRequireDefault(require("./MermaidBlock"));
 var _ArtifactBlock = _interopRequireDefault(require("./ArtifactBlock"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/** 支持 Artifacts 预览的代码块语言（对标 Claude Artifacts） */const ARTIFACT_LANGS = new Set(["html", "svg"]);
+/** Code block languages that support Artifacts preview (modeled after Claude Artifacts) */const ARTIFACT_LANGS = new Set(["html", "svg"]);
 
 /**
- * 从代码块 children 还原纯文本源码：rehype-highlight 会把代码切成嵌套的
- * <span> 高亮元素，直接 join 会得到 [object Object]，需递归抽取文本。
+ * Recover the plain-text source from code block children: rehype-highlight splits code into
+ * nested <span> highlight elements; joining directly yields [object Object], so extract text recursively.
  */
 const extractText = node => {
   if (node == null || typeof node === "boolean") return "";
@@ -57,7 +57,7 @@ const MarkdownViews = props => {
           const lang = match[1].toLowerCase();
           const codeText = extractText(children);
 
-          // Mermaid 图：直接渲染为 SVG（流式不完整时回退代码展示）
+          // Mermaid diagrams: render directly as SVG (fall back to code display when streaming output is incomplete)
           if (lang === "mermaid") {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MermaidBlock.default, {
               code: codeText
@@ -84,7 +84,7 @@ const MarkdownViews = props => {
             })]
           });
 
-          // HTML/SVG：Artifacts 预览（sandbox iframe）+ 代码两个页签
+          // HTML/SVG: Artifacts preview (sandbox iframe) + code tabs
           if (ARTIFACT_LANGS.has(lang)) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArtifactBlock.default, {
               code: codeText,

package/lib/components/Markdown/Views/index.module.scss

@@ -31,7 +31,7 @@
     td {
       padding: 4px 8px;
 
-      border: 1px solid #868686;
+      border: 1px solid var(--cf-border);
     }
   }
 

package/lib/components/Modal/_hooks/useModalDrag.d.ts

@@ -6,7 +6,7 @@ interface UseModalDragProps {
     edgeDetection?: boolean;
 }
 /**
- * 处理 Modal 拖拽功能
+ * Handle Modal drag functionality
  */
 export declare function useModalDrag({ moveable, modal, modalHeader, open, edgeDetection, }: UseModalDragProps): void;
 export {};

package/lib/components/Modal/_hooks/useModalDrag.js

@@ -7,7 +7,7 @@ exports.useModalDrag = useModalDrag;
 var _react = require("react");
 var _utils = require("../_utils");
 /**
- * 处理 Modal 拖拽功能
+ * Handle Modal drag functionality
  */
 function useModalDrag({
   moveable,

package/lib/components/Modal/_hooks/useModalElements.d.ts

@@ -3,7 +3,7 @@ interface UseModalElementsProps {
     open?: boolean;
 }
 /**
- * 查找并管理 Modal DOM 元素
+ * Locate and manage Modal DOM elements
  */
 export declare function useModalElements({ open }: UseModalElementsProps): {
     cls: string;

package/lib/components/Modal/_hooks/useModalElements.js

@@ -7,7 +7,7 @@ exports.useModalElements = useModalElements;
 var _react = require("react");
 var _hsuUtils = require("hsu-utils");
 /**
- * 查找并管理 Modal DOM 元素
+ * Locate and manage Modal DOM elements
  */
 function useModalElements({
   open

package/lib/components/Modal/_utils/calculatePosition.d.ts

@@ -1,11 +1,11 @@
 /**
- * 计算模态框位置，考虑边界检测
- * @param left 目标左边距
- * @param top 目标上边距
- * @param modalWidth 模态框宽度
- * @param modalHeight 模态框高度
- * @param edgeDetection 是否启用边界检测
- * @returns 计算后的位置
+ * Calculate the modal position, taking edge detection into account
+ * @param left Target left offset
+ * @param top Target top offset
+ * @param modalWidth Modal width
+ * @param modalHeight Modal height
+ * @param edgeDetection Whether edge detection is enabled
+ * @returns The calculated position
  */
 export declare function calculatePosition(left: number, top: number, modalWidth: number, modalHeight: number, edgeDetection: boolean): {
     left: number;

package/lib/components/Modal/_utils/calculatePosition.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.calculatePosition = calculatePosition;
 /**
- * 计算模态框位置，考虑边界检测
- * @param left 目标左边距
- * @param top 目标上边距
- * @param modalWidth 模态框宽度
- * @param modalHeight 模态框高度
- * @param edgeDetection 是否启用边界检测
- * @returns 计算后的位置
+ * Calculate the modal position, taking edge detection into account
+ * @param left Target left offset
+ * @param top Target top offset
+ * @param modalWidth Modal width
+ * @param modalHeight Modal height
+ * @param edgeDetection Whether edge detection is enabled
+ * @returns The calculated position
  */
 function calculatePosition(left, top, modalWidth, modalHeight, edgeDetection) {
   if (!edgeDetection) {

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

@@ -62,7 +62,7 @@
         align-items: center;
         justify-content: flex-end;
         column-gap: 10px;
-        margin-left: auto; // title 为空时仍保持靠右
+        margin-left: auto; // Stay right-aligned even when title is empty
       }
     }
   }

package/lib/components/Operate/_hooks/useOperateEllipsis.d.ts

@@ -1,10 +1,10 @@
 import { OperateProps } from "../index";
 /**
- * 计算操作按钮是否超出显示范围
- * @param menu - 菜单项数组
- * @param maxVisible - 最大可见数量
- * @param enableEllipsis - 是否启用省略
- * @returns 是否超出
+ * Determine whether the operate buttons overflow the visible range
+ * @param menu - Array of menu items
+ * @param maxVisible - Maximum number of visible items
+ * @param enableEllipsis - Whether ellipsis is enabled
+ * @returns Whether it overflows
  */
 declare const useOperateEllipsis: (menu: OperateProps[], maxVisible?: number, enableEllipsis?: boolean) => boolean;
 export default useOperateEllipsis;

package/lib/components/Operate/_hooks/useOperateEllipsis.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 /**
- * 计算操作按钮是否超出显示范围
- * @param menu - 菜单项数组
- * @param maxVisible - 最大可见数量
- * @param enableEllipsis - 是否启用省略
- * @returns 是否超出
+ * Determine whether the operate buttons overflow the visible range
+ * @param menu - Array of menu items
+ * @param maxVisible - Maximum number of visible items
+ * @param enableEllipsis - Whether ellipsis is enabled
+ * @returns Whether it overflows
  */
 const useOperateEllipsis = (menu, maxVisible, enableEllipsis = true) => {
   return (0, _react.useMemo)(() => {

package/lib/components/Operate/index.js

@@ -19,10 +19,10 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
- * 渲染图标
- * @param icon - 图标配置
- * @param defaultIcon - 默认图标
- * @returns 渲染的图标元素
+ * Render an icon
+ * @param icon - Icon configuration
+ * @param defaultIcon - Default icon
+ * @returns The rendered icon element
  */
 const renderIcon = (icon, defaultIcon) => {
   if (icon === false) return null;
@@ -35,7 +35,7 @@ const renderIcon = (icon, defaultIcon) => {
 };
 
 /**
- * 阻止事件冒泡的处理器
+ * Handler that stops event propagation
  */
 const stopPropagation = e => {
   e?.stopPropagation();
@@ -61,15 +61,15 @@ const Operate = props => {
     checkPermission
   } = (0, _usePermissions.default)();
 
-  // 过滤菜单项（根据权限和隐藏状态）
+  // Filter menu items (by permission and hidden state)
   const filteredMenu = (0, _react.useMemo)(() => {
     return menu.filter(item => !item.hidden && checkPermission(item.hasPermi));
   }, [menu, checkPermission]);
 
-  // 计算是否超出
+  // Determine whether it overflows
   const isOverflow = (0, _useOperateEllipsis.default)(filteredMenu, maxVisible, enableEllipsis);
 
-  // 计算可见的菜单项和隐藏的菜单项
+  // Compute the visible and hidden menu items
   const {
     visibleItems,
     hiddenItems
@@ -86,23 +86,23 @@ const Operate = props => {
     };
   }, [filteredMenu, isOverflow, maxVisible]);
 
-  // 处理确认事件
+  // Handle the confirm event
   const handleConfirm = (0, _react.useCallback)(e => {
     stopPropagation(e);
     onConfirm?.() ?? onClick?.();
   }, [onConfirm, onClick]);
 
-  // 处理菜单项确认事件
+  // Handle the confirm event for a menu item
   const handleMenuItemConfirm = (0, _react.useCallback)(item => e => {
     stopPropagation(e);
     item.onConfirm?.() ?? item.onClick?.();
   }, []);
   if (hidden) return null;
 
-  // 渲染按钮的通用配置
+  // Common configuration for rendering the button
   const buttonClassName = `${_indexModule.default.Operate} ${className ?? ""}`.trim();
 
-  // 准备传递给 Button 的 props（排除 hasPermi，因为 Button 不支持 false 类型）
+  // Prepare props to pass to Button (exclude hasPermi, since Button does not support the false type)
   const buttonProps = {
     ...config,
     ...(hasPermi?.length ? {
@@ -110,9 +110,9 @@ const Operate = props => {
     } : {})
   };
 
-  // 如果有菜单，渲染多个操作按钮
+  // If there is a menu, render multiple operate buttons
   if (menu.length > 0) {
-    // 生成下拉菜单项（用于"更多"按钮）
+    // Generate dropdown menu items (for the "more" button)
     const menuItems = hiddenItems?.map(item => {
       const hasConfirm = !!item.onConfirm;
       const defaultIcon = item.delete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FormOutlined, {});
@@ -158,7 +158,7 @@ const Operate = props => {
           className: itemClassName,
           hasPermi: itemHasPermi
         } = item;
-        // 透传剩余 Button 属性时排除事件/配置键，避免 onConfirm 等泄漏到 DOM（React 警告）
+        // When passing through the remaining Button props, exclude event/config keys to prevent onConfirm etc. from leaking to the DOM (React warning)
         const itemButtonProps = Object.fromEntries(Object.entries(item).filter(([key]) => !["title", "icon", "delete", "className", "hasPermi", "menu", "onClick", "onConfirm", "popconfirm", "hidden", "maxVisible", "enableEllipsis", "moreIcon"].includes(key)));
         const defaultIcon = itemDelete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FormOutlined, {});
         const buttonContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
@@ -214,7 +214,7 @@ const Operate = props => {
     });
   }
 
-  // 单个操作按钮
+  // Single operate button
   const hasConfirm = !!onConfirm;
   const defaultIcon = isDelete ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DeleteOutlined, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.FormOutlined, {});
   const buttonContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {

package/lib/components/Panel/DefaultPanel/index.module.scss

@@ -45,7 +45,7 @@
 
   background: var(--cf-surface);
 
-  // CF 风格：描边白卡片
+  // CF style: outlined white card
   border-radius: 8px;
   border: 1px solid var(--cf-border);
 }

package/lib/components/Panel/IframePanel/index.module.scss

@@ -57,7 +57,7 @@
     height: 60px;
 
     font-size: 50px;
-    color: #6b7280;
+    color: var(--cf-text-2);
 
     background: var(--cf-surface);
 

package/lib/components/Panel/ListPanel/ListModalPanel/index.d.ts

@@ -13,7 +13,7 @@ interface TableTools {
     columnMgt?: IColumnMgt;
 }
 export interface ListModalPanelTabelProps extends Omit<TableProps, "title"> {
-    /** 透传给内部 Table 的 key，用于在异构列集切换时强制重挂载表格 */
+    /** Key passed through to the inner Table, used to force-remount the table when switching between heterogeneous column sets */
     key?: React.Key;
     title?: string;
     buttonGroup?: ButtonProps[];
@@ -44,7 +44,7 @@ export interface ListModalPanelProps<T extends SearchModeKeys = "Default"> exten
     modalClassName?: string;
     className?: string;
     searchProps?: SearchModePropsMap[T];
-    /** Search 组件模式：default-基础 | Advanced-高级筛选 | Collapsible-可折叠 | WithFilter-带筛选器 | WithMore-带更多项 | Card-卡片式 */
+    /** Search component mode: default-basic | Advanced-advanced filtering | Collapsible-collapsible | WithFilter-with filter | WithMore-with more items | Card-card style */
     searchMode?: T;
     tableProps?: ListModalPanelTabelProps;
     hasPermi?: string[];

package/lib/components/Panel/ListPanel/ListModalPanel/index.js

@@ -40,8 +40,8 @@ const ListModalPanel = props => {
     tableContainerClassName,
     tips,
     otherTool,
-    // 异构列集切换时用于强制重挂载表格的 key；显式提取，避免随 ...tableConfig
-    // 展开进 JSX 触发 React "key prop being spread" 警告
+    // Key used to force-remount the table when switching between heterogeneous column sets; extracted
+    // explicitly so it is not spread into JSX via ...tableConfig, which triggers React's "key prop being spread" warning
     key: tableInstanceKey,
     ...tableConfig
   } = tableProps;
@@ -54,8 +54,8 @@ const ListModalPanel = props => {
   const [_columns, setColumns] = (0, _react.useState)(columns);
   const [showColumnMgt, setShowColumnMgt] = (0, _react.useState)(false);
   const [isFullscreen, setIsFullscreen] = (0, _react.useState)(false);
-  // 弹窗打开动画是否已完成：Search 的列数/展开等 DOM 测量要等弹窗完全展开
-  // 才能取到准确尺寸（zoom 动画只变 transform，不触发 ResizeObserver）
+  // Whether the modal's opening animation has finished: Search's DOM measurements (column count/expansion, etc.)
+  // only yield accurate sizes after the modal is fully expanded (the zoom animation only changes transform and does not trigger ResizeObserver)
   const [modalReady, setModalReady] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     if (modalConfig.open) {
@@ -76,7 +76,7 @@ const ListModalPanel = props => {
     }
   }, [columnMgt, columns]);
 
-  // 根据 searchMode 渲染对应的 Search 组件
+  // Render the matching Search component based on searchMode
   const SearchComponent = (0, _react.useMemo)(() => {
     const searchClassName = (0, _classnames.default)(searchProps?.className, _indexModule.default.search);
     switch (searchMode) {