@hsu-react/ui 0.0.13 → 0.0.14

package/src/components/CodeMirror/index.tsx

@@ -11,30 +11,30 @@ import { linter, LintSource, Diagnostic } from "@codemirror/lint";
 import { sqlLinter, loadSqlParser } from "./linters/sqlLinter";
 import { jsonLinter, loadJsonParser } from "./linters/jsonLinter";
 
-// 支持的语言类型
+// Supported language types
 export type CodeMirrorLanguageType = "sql" | "json" | "plain";
 
 export interface CodeMirrorProps extends Omit<
   ReactCodeMirrorProps,
   "extensions" | "onError"
 > {
-  /** 语言类型，支持按需引入 */
+  /** Language type, supports on-demand loading */
   language?: CodeMirrorLanguageType;
-  /** 是否启用语法检查 */
+  /** Whether to enable syntax linting */
   enableLint?: boolean;
-  /** 错误信息回调 */
+  /** Error message callback */
   onLintError?: (error: string | null) => void;
-  /** 是否有错误，用于显示错误边框 */
+  /** Whether there is an error, used to show the error border */
   hasError?: boolean;
-  /** 是否翻译错误信息为中文，默认 false */
+  /** Whether to translate error messages into Chinese, default false */
   translateError?: boolean;
   /**
-   * JSON 校验是否允许根节点为数组 `[...]`，默认 false（仅允许对象 `{...}`）
+   * Whether JSON validation allows the root node to be an array `[...]`, default false (only objects `{...}` are allowed)
    */
   allowJsonArrayRoot?: boolean;
 }
 
-// 按需引入语言支持
+// Load language support on demand
 const getLanguageExtension = async (language: CodeMirrorLanguageType) => {
   switch (language) {
     case "sql": {
@@ -80,12 +80,12 @@ const CodeMirror: React.FC<CodeMirrorProps> = (props) => {
         let lintSource: LintSource | null = null;
 
         if (language === "sql") {
-          // 预加载 SQL 解析器
+          // Preload the SQL parser
           await loadSqlParser();
           lintSource = sqlLinter(translateError);
           newExtensions.push(linter(lintSource));
         } else if (language === "json") {
-          // 预加载 JSON 解析器
+          // Preload the JSON parser
           await loadJsonParser();
           lintSource = jsonLinter({
             translate: translateError,
@@ -94,16 +94,16 @@ const CodeMirror: React.FC<CodeMirrorProps> = (props) => {
           newExtensions.push(linter(lintSource));
         }
 
-        // 添加错误监听扩展
+        // Add an error listener extension
         if (lintSource) {
           newExtensions.push(
             EditorView.updateListener.of((update) => {
               if (update.docChanged || update.viewportChanged) {
-                // 延迟执行以等待 linter 完成
+                // Delay execution to wait for the linter to finish
                 setTimeout(async () => {
                   try {
                     const diagnosticsResult = lintSource?.(update.view);
-                    // 处理可能是 Promise 的情况
+                    // Handle the case where the result may be a Promise
                     const diagnostics: readonly Diagnostic[] =
                       diagnosticsResult instanceof Promise
                         ? await diagnosticsResult
@@ -118,7 +118,7 @@ const CodeMirror: React.FC<CodeMirrorProps> = (props) => {
                       onLintErrorRef.current?.(null);
                     }
                   } catch (e) {
-                    // 忽略错误
+                    // Ignore errors
                     onLintErrorRef.current?.(null);
                   }
                 }, 150);
@@ -127,7 +127,7 @@ const CodeMirror: React.FC<CodeMirrorProps> = (props) => {
           );
         }
       } else {
-        // 如果禁用了 lint，清除错误
+        // If lint is disabled, clear the error
         onLintErrorRef.current?.(null);
       }
 

package/src/components/CodeMirror/linters/errorTranslator.ts

@@ -1,12 +1,12 @@
 /**
- * 将英文错误信息翻译成中文
+ * Translate English error messages into Chinese
  */
 export function translateError(message: string): string {
   if (!message) return message;
 
   let translated = message;
 
-  // 先处理完整的 JSON 错误模式（优先级最高）
+  // Handle complete JSON error patterns first (highest priority)
   const jsonPatterns: Array<[RegExp, string]> = [
     [
       /Unexpected token (.+) in JSON at position (\d+)/gi,
@@ -40,12 +40,12 @@ export function translateError(message: string): string {
     [/Unexpected end of JSON input/gi, "JSON 输入意外结束"],
   ];
 
-  // 应用 JSON 完整模式
+  // Apply the complete JSON patterns
   jsonPatterns?.forEach(([pattern, replacement]) => {
     translated = translated.replace(pattern, replacement);
   });
 
-  // 处理位置信息（如果还没有被上面的模式处理）
+  // Handle position info (if not already handled by the patterns above)
   if (translated.includes("at position")) {
     const positionMatch = translated.match(/at position (\d+)/);
     if (positionMatch) {
@@ -56,7 +56,7 @@ export function translateError(message: string): string {
     }
   }
 
-  // 处理常见的单词翻译（按长度从长到短排序，优先匹配长短语）
+  // Handle common word translations (sorted by length from long to short, matching longer phrases first)
   const wordTranslations: Array<[string, string]> = [
     ["but found", "但找到"],
     ["in JSON", "在 JSON 中"],
@@ -90,14 +90,14 @@ export function translateError(message: string): string {
     ["but", "但是"],
   ];
 
-  // 应用单词翻译（按顺序，长短语优先）
+  // Apply word translations (in order, longer phrases first)
   wordTranslations?.forEach(([en, zh]) => {
-    // 对于短语，直接替换
+    // For phrases, replace directly
     if (en.includes(" ")) {
       const regex = new RegExp(en.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
       translated = translated.replace(regex, zh);
     } else {
-      // 对于单词，使用单词边界
+      // For single words, use word boundaries
       const regex = new RegExp(
         `\\b${en.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\b`,
         "gi"
@@ -106,7 +106,7 @@ export function translateError(message: string): string {
     }
   });
 
-  // 处理常见的 SQL 错误模式
+  // Handle common SQL error patterns
   const sqlPatterns: Array<[RegExp, string]> = [
     [/SyntaxError: (.+)/gi, "语法错误: $1"],
     [/Expected (.+) but found (.+)/gi, "期望 $1 但找到 $2"],
@@ -119,16 +119,16 @@ export function translateError(message: string): string {
     translated = translated.replace(pattern, replacement);
   });
 
-  // 清理多余的空白字符和标点
+  // Clean up extra whitespace and punctuation
   translated = translated
-    .replace(/\s+/g, " ") // 多个空格合并为一个
-    .replace(/\s*,\s*/g, "，") // 英文逗号改为中文逗号
-    .replace(/\s*:\s*/g, "：") // 英文冒号改为中文冒号
-    .replace(/\s*\.\s*/g, "。") // 英文句号改为中文句号
+    .replace(/\s+/g, " ") // Merge multiple spaces into one
+    .replace(/\s*,\s*/g, "，") // Replace English commas with Chinese commas
+    .replace(/\s*:\s*/g, "：") // Replace English colons with Chinese colons
+    .replace(/\s*\.\s*/g, "。") // Replace English periods with Chinese periods
     .trim();
 
-  // 最后检查：如果还有明显的英文单词残留，尝试翻译常见单词
-  // 注意：这些单词可能已经在前面的翻译中被处理，这里作为兜底
+  // Final check: if obvious English words remain, try translating common words
+  // Note: these words may already have been handled by earlier translations; this is a fallback
   const commonEnglishWords: Array<[string, string]> = [
     ["or", "或"],
     ["and", "和"],
@@ -152,14 +152,14 @@ export function translateError(message: string): string {
     ["to", "到"],
   ];
 
-  // 直接替换，不需要先检查（避免正则状态问题）
+  // Replace directly without checking first (avoids regex state issues)
   commonEnglishWords?.forEach(([en, zh]) => {
-    // 使用单词边界，确保只替换完整的单词
+    // Use word boundaries to ensure only complete words are replaced
     const regex = new RegExp(`\\b${en}\\b`, "gi");
     translated = translated.replace(regex, zh);
   });
 
-  // 最终清理：移除多余的空格
+  // Final cleanup: remove extra spaces
   translated = translated.replace(/\s+/g, " ").trim();
 
   return translated;

package/src/components/CodeMirror/linters/jsonLinter.ts

@@ -2,10 +2,10 @@ import { EditorView } from "@codemirror/view";
 import { Diagnostic } from "@codemirror/lint";
 import { translateError } from "./errorTranslator";
 
-// 全局 JSON 解析器实例
+// Global JSON parser instance
 let jsonParser: { parse: (text: string) => unknown } | null = null;
 
-// 预加载 JSON 解析器
+// Preload the JSON parser
 const loadJsonParser = async () => {
   if (!jsonParser) {
     try {
@@ -19,10 +19,10 @@ const loadJsonParser = async () => {
 };
 
 export interface JsonLinterOptions {
-  /** 是否翻译错误信息为中文 */
+  /** Whether to translate error messages into Chinese */
   translate?: boolean;
   /**
-   * 是否允许根节点为 JSON 数组 `[...]`（仅影响顶层字符校验，默认 false 仅允许 `{...}`）
+   * Whether to allow the root node to be a JSON array `[...]` (only affects top-level character validation; default false, only `{...}` is allowed)
    */
   allowArrayRoot?: boolean;
 }
@@ -39,7 +39,7 @@ function resolveJsonLinterOptions(
   };
 }
 
-// JSON 语法检查器（可传 `boolean` 表示仅开启 translate，兼容旧用法）
+// JSON syntax linter (a `boolean` can be passed to only enable translate, for backward compatibility)
 export function jsonLinter(options: JsonLinterOptions | boolean = false) {
   const { translate, allowArrayRoot } = resolveJsonLinterOptions(options);
 
@@ -51,7 +51,7 @@ export function jsonLinter(options: JsonLinterOptions | boolean = false) {
       return diagnostics;
     }
 
-    // 默认必须以 `{` 开头；开启 allowArrayRoot 时亦允许 `[`
+    // By default the text must start with `{`; when allowArrayRoot is enabled, `[` is also allowed
     const trimmedStart = text.trimStart();
     const rootOk =
       trimmedStart.startsWith("{") ||
@@ -79,11 +79,11 @@ export function jsonLinter(options: JsonLinterOptions | boolean = false) {
         const error = e as Error;
         const message = error.message;
 
-        // 尝试从错误消息中提取位置信息
+        // Try to extract position info from the error message
         let from = 0;
         let to = text.length;
 
-        // 解析位置信息，例如 "Unexpected token } in JSON at position 10"
+        // Parse position info, e.g. "Unexpected token } in JSON at position 10"
         const positionMatch = message.match(/at position (\d+)/);
         if (positionMatch) {
           const position = parseInt(positionMatch[1], 10);
@@ -91,7 +91,7 @@ export function jsonLinter(options: JsonLinterOptions | boolean = false) {
           to = Math.min(text.length, position + 1);
         }
 
-        // 根据 translate 参数决定是否翻译错误信息
+        // Decide whether to translate the error message based on the translate parameter
         const finalMessage = translate ? translateError(message) : message;
 
         diagnostics.push({
@@ -102,7 +102,7 @@ export function jsonLinter(options: JsonLinterOptions | boolean = false) {
         });
       }
     } else {
-      // 如果解析器还未加载，尝试加载
+      // If the parser is not loaded yet, try to load it
       loadJsonParser().then((parser) => {
         if (parser) {
           try {
@@ -118,5 +118,5 @@ export function jsonLinter(options: JsonLinterOptions | boolean = false) {
   };
 }
 
-// 导出预加载函数，供外部使用
+// Export the preload function for external use
 export { loadJsonParser };

package/src/components/CodeMirror/linters/sqlLinter.ts

@@ -2,15 +2,15 @@ import { EditorView } from "@codemirror/view";
 import { Diagnostic } from "@codemirror/lint";
 import { translateError } from "./errorTranslator";
 
-// 全局 SQL 解析器实例
+// Global SQL parser instance
 let sqlParser: { astify: (sql: string) => unknown } | null = null;
 
-// MongoDB 解析器函数类型
+// MongoDB parser function type
 type MongoParser = (query: string) => unknown;
 
 let mongoParser: MongoParser | null = null;
 
-// 预加载 SQL 解析器
+// Preload the SQL parser
 const loadSqlParser = async () => {
   if (!sqlParser) {
     try {
@@ -23,7 +23,7 @@ const loadSqlParser = async () => {
   return sqlParser;
 };
 
-// 预加载 MongoDB 解析器
+// Preload the MongoDB parser
 const loadMongoParser = async () => {
   if (!mongoParser) {
     try {
@@ -36,16 +36,16 @@ const loadMongoParser = async () => {
   return mongoParser;
 };
 
-// 检测是否为 MongoDB use 语句
+// Detect whether the text is a MongoDB use statement
 function isMongoUseStatement(text: string): boolean {
   const trimmed = text.trim();
-  // MongoDB use 语句格式：use database_name
-  // 数据库名可以包含字母、数字、下划线、连字符等
+  // MongoDB use statement format: use database_name
+  // The database name may contain letters, digits, underscores, hyphens, etc.
   const usePattern = /^use\s+[a-zA-Z0-9_-]+(\s*;?\s*)$/i;
   return usePattern.test(trimmed);
 }
 
-// 校验 MongoDB use 语句
+// Validate a MongoDB use statement
 function validateMongoUseStatement(text: string): {
   valid: boolean;
   error?: string;
@@ -56,7 +56,7 @@ function validateMongoUseStatement(text: string): {
     return { valid: false, error: "use 语句不能为空" };
   }
 
-  // 检查格式：use database_name
+  // Check the format: use database_name
   const usePattern = /^use\s+([a-zA-Z0-9_-]+)(\s*;?\s*)$/i;
   const match = trimmed.match(usePattern);
 
@@ -69,7 +69,7 @@ function validateMongoUseStatement(text: string): {
     return { valid: false, error: "数据库名称不能为空" };
   }
 
-  // 数据库名不能以数字开头
+  // The database name cannot start with a digit
   if (/^\d/.test(dbName)) {
     return { valid: false, error: "数据库名称不能以数字开头" };
   }
@@ -77,11 +77,11 @@ function validateMongoUseStatement(text: string): {
   return { valid: true };
 }
 
-// 检测查询类型：SQL 或 MongoDB
+// Detect the query type: SQL or MongoDB
 function detectQueryType(text: string): "sql" | "mongodb" {
   const trimmed = text.trim();
 
-  // 优先判断是否可能为 MongoDB 查询（MongoDB shell 命令格式）
+  // First check whether it might be a MongoDB query (MongoDB shell command format)
   const isMongo =
     trimmed.startsWith("db.") ||
     trimmed.includes(".find(") ||
@@ -96,11 +96,11 @@ function detectQueryType(text: string): "sql" | "mongodb" {
     return "mongodb";
   }
 
-  // 默认尝试 SQL
+  // Fall back to SQL by default
   return "sql";
 }
 
-// SQL 和 MongoDB 语法检查器（自动识别）
+// SQL and MongoDB syntax linter (auto-detected)
 export function sqlLinter(translate: boolean = false) {
   return (view: EditorView) => {
     const diagnostics: Diagnostic[] = [];
@@ -110,25 +110,25 @@ export function sqlLinter(translate: boolean = false) {
       return diagnostics;
     }
 
-    // 按行分割文本
+    // Split the text by lines
     const lines = text.split("\n");
     let currentOffset = 0;
     const nonUseLines: Array<{ line: string; start: number; end: number }> = [];
 
-    // 第一遍遍历：单独判断 use 行，收集非 use 行
+    // First pass: check use lines individually, collect non-use lines
     for (let i = 0; i < lines.length; i++) {
       const line = lines[i];
       const lineStart = currentOffset;
       const lineEnd = currentOffset + line.length;
       const trimmedLine = line.trim();
 
-      // 跳过空行
+      // Skip empty lines
       if (!trimmedLine) {
-        currentOffset = lineEnd + 1; // +1 是换行符
+        currentOffset = lineEnd + 1; // +1 for the newline character
         continue;
       }
 
-      // 单独判断 use 行
+      // Check use lines individually
       if (isMongoUseStatement(trimmedLine)) {
         const validation = validateMongoUseStatement(trimmedLine);
         if (!validation.valid) {
@@ -142,7 +142,7 @@ export function sqlLinter(translate: boolean = false) {
           });
         }
       } else {
-        // 收集非 use 行
+        // Collect non-use lines
         nonUseLines.push({
           line: line,
           start: lineStart,
@@ -150,21 +150,21 @@ export function sqlLinter(translate: boolean = false) {
         });
       }
 
-      currentOffset = lineEnd + 1; // +1 是换行符
+      currentOffset = lineEnd + 1; // +1 for the newline character
     }
 
-    // 第二遍：统一判断所有非 use 行
+    // Second pass: validate all non-use lines together
     if (nonUseLines.length > 0) {
-      // 合并所有非 use 行
+      // Merge all non-use lines
       const nonUseText = nonUseLines?.map((item) => item.line).join("\n");
       const nonUseStart = nonUseLines[0].start;
       const nonUseEnd = nonUseLines[nonUseLines.length - 1].end;
 
-      // 判断查询类型
+      // Determine the query type
       const queryType = detectQueryType(nonUseText);
 
       if (queryType === "mongodb") {
-        // MongoDB 语句使用 mongoParser 校验
+        // Validate MongoDB statements with mongoParser
         if (mongoParser) {
           try {
             mongoParser(nonUseText);
@@ -178,7 +178,7 @@ export function sqlLinter(translate: boolean = false) {
             });
           }
         } else {
-          // 如果解析器还未加载，尝试加载
+          // If the parser is not loaded yet, try to load it
           loadMongoParser().then((parser) => {
             if (parser) {
               try {
@@ -190,7 +190,7 @@ export function sqlLinter(translate: boolean = false) {
           });
         }
       } else {
-        // SQL 语句使用 SQL 解析器
+        // Validate SQL statements with the SQL parser
         if (sqlParser) {
           try {
             sqlParser.astify(nonUseText);
@@ -204,7 +204,7 @@ export function sqlLinter(translate: boolean = false) {
             });
           }
         } else {
-          // 如果解析器还未加载，尝试加载
+          // If the parser is not loaded yet, try to load it
           loadSqlParser().then((parser) => {
             if (parser) {
               try {
@@ -222,5 +222,5 @@ export function sqlLinter(translate: boolean = false) {
   };
 }
 
-// 导出预加载函数，供外部使用
+// Export the preload functions for external use
 export { loadSqlParser, loadMongoParser };

package/src/components/Copy/index.module.scss

@@ -8,16 +8,16 @@
 
   font-size: 14px;
   line-height: 18px;
-  color: #5e6772;
+  color: var(--cf-text-2);
 
   cursor: pointer;
 
   transition: color 0.3s, background-color 0.3s;
 
   &:hover {
-    color: #060607;
+    color: var(--cf-text);
 
-    background-color: #f3f5fc;
+    background-color: var(--cf-row-hover);
 
     border-radius: 4px;
   }

package/src/components/DatePicker/defaultModalPickerGetPopupContainer.ts

@@ -1,6 +1,6 @@
 /**
- * 将日期浮层挂到当前 antd Modal 的 wrap 上，避免父级 overflow:hidden（如嵌入弹窗）裁切；
- * 与数据资源等大屏 BaseModal 内原先独立弹窗的常见表现一致。非弹窗场景回退 document.body。
+ * Mount the date popup on the current antd Modal's wrap to avoid clipping by a parent's overflow:hidden (e.g. when embedded in a modal);
+ * consistent with the usual behavior of formerly standalone popups inside large-screen BaseModals such as data resources. Falls back to document.body in non-modal scenarios.
  */
 export function defaultModalPickerGetPopupContainer(node: HTMLElement) {
   return (node.closest(".ant-modal-wrap") as HTMLElement) ?? document.body;

package/src/components/DatePicker/index.tsx

@@ -68,7 +68,7 @@ const DatePicker: DatePickerFC = (props) => {
   const defaultValueRef = useRef(defaultValue);
   const showTimeRef = useRef(showTime);
 
-  // 保持 ref 最新
+  // Keep refs up to date
   useEffect(() => {
     onChangeRef.current = onChange;
     valueRef.current = value;
@@ -76,7 +76,7 @@ const DatePicker: DatePickerFC = (props) => {
     showTimeRef.current = showTime;
   }, [onChange, value, defaultValue, showTime]);
 
-  // 格式化日期值的辅助函数
+  // Helper function for formatting date values
   const formatDateByPicker = useCallback(
     (dateValue: dayjs.Dayjs, pickerType: Picker): string => {
       if (pickerType === "date") {
@@ -100,20 +100,20 @@ const DatePicker: DatePickerFC = (props) => {
     [],
   );
 
-  // 处理 picker 变更时的 onChange
+  // Handle onChange when the picker changes
   const handlePickerChange = useCallback(
     (newPicker: Picker) => {
-      // 当 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 = dayjs(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);
         }
       }
@@ -125,11 +125,11 @@ const DatePicker: DatePickerFC = (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/src/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/src/components/Editor/index.tsx

@@ -11,7 +11,7 @@ interface EditorContentProps {
 const EditorContent: React.FC<EditorContentProps> = (props) => {
   const { value = "" } = props;
 
-  // 编辑器配置
+  // Editor configuration
   const editorConfig: Partial<IEditorConfig> = {
     readOnly: true,
     autoFocus: false,
@@ -51,10 +51,10 @@ const Editor: EditorFC = (props) => {
     setHtml(value || "");
   }, [value]);
 
-  // 工具栏配置
+  // Toolbar configuration
   const toolbarConfig = {};
 
-  // 编辑器配置
+  // Editor configuration
   const editorConfig: Partial<IEditorConfig> = {
     placeholder,
     autoFocus: false,

package/src/components/FileCol/index.tsx

@@ -30,8 +30,8 @@ const FileCol: React.FC<UrlItemProps> = (props) => {
               {!hideNm && (
                 <Tooltip
                   title={file.name}
-                  color="#f2f4f5"
-                  styles={{ body: { color: "#131212", padding: "6px 16px" } }}
+                  color="var(--cf-subtle)"
+                  styles={{ body: { color: "var(--cf-text)", padding: "6px 16px" } }}
                 >
                   <span className={styles.fileName}>{file.name}</span>
                 </Tooltip>

package/src/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/src/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/src/components/FilePreview/_hooks/useXlsxData.ts

@@ -7,7 +7,7 @@ interface UseXlsxDataProps {
 }
 
 /**
- * 加载并解析 xlsx 文件
+ * Load and parse an xlsx file
  */
 export function useXlsxData({ fileType, fileUrl }: UseXlsxDataProps) {
   const [xlsxData, setXlsxData] = useState<WorkBook | undefined>(undefined);