@hsu-react/ui 0.0.13 → 0.0.15

package/lib/utils/getUUID.d.ts

@@ -1,4 +1,4 @@
 /**
- * 生成 UUID v4
+ * Generate a UUID v4
  */
 export declare const getUUID: () => string;

package/lib/utils/getUUID.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getUUID = void 0;
 /**
- * 生成 UUID v4
+ * Generate a UUID v4
  */
 const getUUID = () => {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",
@@ -63,7 +63,7 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@hsu-react/single-router": "0.0.26",
+    "@hsu-react/single-router": "0.0.27",
     "@iconify/json": "^2.2.385",
     "@iconify/react": "^5.0.1",
     "@uiw/codemirror-theme-vscode": "^4.25.1",
@@ -80,7 +80,7 @@
     "echarts": "^5.5.1",
     "echarts-gl": "^2.0.9",
     "highlight.js": "^11.11.1",
-    "hsu-utils": "^0.0.54",
+    "hsu-utils": "^0.0.55",
     "js-cookie": "^3.0.5",
     "katex": "^0.17.0",
     "lodash": "^4.17.21",

package/src/components/Button/index.tsx

@@ -21,8 +21,8 @@ interface ButtonFC
   Chakra: React.FC<ChakraButtonProps>;
 }
 
-// forwardRef：被 Tooltip / Popconfirm 等浮层组件包裹时可直接拿到按钮 DOM，
-// 避免 rc 库退回 findDOMNode 触发 React 弃用警告
+// forwardRef: when wrapped by overlay components like Tooltip / Popconfirm, the button DOM can be accessed directly,
+// preventing rc libraries from falling back to findDOMNode and triggering React deprecation warnings
 const InternalButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
     const {

package/src/components/ChainGraph/ChainGraphServices/Edges/ArrowEdge.ts

@@ -30,13 +30,13 @@ export default function ArrowEdge(
     const line = group.addShape("path", {
       attrs: {
         path: [
-          // 起始点
+          // Start point
           ["M", startPoint.x, startPoint.y],
-          // 水平向右到中间X位置
+          // Horizontally right to the middle X position
           ["L", (startPoint.x + endPoint.x) / 2, startPoint.y],
-          // 垂直向下/上到终点Y位置
+          // Vertically down/up to the end point's Y position
           ["L", (startPoint.x + endPoint.x) / 2, endPoint.y],
-          // 水平向右到终点
+          // Horizontally right to the end point
           ["L", endPoint.x, endPoint.y],
         ],
         endArrow: {

package/src/components/ChainGraph/ChainGraphServices/NodeEvents.ts

@@ -21,7 +21,7 @@ export default class NodeEvents {
     this.onNodeClick("text-shape");
   }
 
-  // ==================== 节点 hover ====================
+  // ==================== Node hover ====================
   private onNodeHover = () => {
     this._graph?.on("node:mouseenter", (e) => {
       const node = e.item;
@@ -40,7 +40,7 @@ export default class NodeEvents {
     });
   };
 
-  // ==================== 折叠展开 ====================
+  // ==================== Collapse/expand ====================
   private onCollapseExpand = () => {
     this._graph?.on("collapse-icon:mouseenter", () => {
       this._graph?.setMode("collapseExpand");
@@ -51,7 +51,7 @@ export default class NodeEvents {
     });
   };
 
-  // ==================== 节点点击 ====================
+  // ==================== Node click ====================
   private onNodeClick = (shapeName: string) => {
     this._graph?.on(`${shapeName}:click`, (e) => {
       const node = e.item;

package/src/components/ChainGraph/ChainGraphServices/RootNode.ts

@@ -9,17 +9,17 @@ import { NodeColor, NodeStyle } from ".";
 import { getTextSize } from ".";
 import { TreeGraphData } from "..";
 
-// ==================== 常量定义 ====================
-const DEFAULT_PADDING = 20; // 节点内边距
-const DEFAULT_LINE_HEIGHT = 18; // 行高
-const DEFAULT_LINE_GAP = 2; // 行间距
-const DEFAULT_ICON_RADIUS = 8; // 折叠图标半径
-const DEFAULT_FONT_SIZE = 20; // 根节点默认字体大小
-const DEFAULT_TEXT_COLOR = "#0c0d0e"; // 默认文本颜色
-const DEFAULT_BG_COLOR = "#fff"; // 默认背景颜色
-const DEFAULT_STROKE_COLOR = "#4096ff"; // 默认边框颜色
-const DEFAULT_HOVER_TEXT_COLOR = "#fff"; // 悬停时文本颜色
-const TEXT_WIDTH_TOLERANCE = 0.01; // 文本宽度容差
+// ==================== Constant definitions ====================
+const DEFAULT_PADDING = 20; // Node padding
+const DEFAULT_LINE_HEIGHT = 18; // Line height
+const DEFAULT_LINE_GAP = 2; // Line spacing
+const DEFAULT_ICON_RADIUS = 8; // Collapse icon radius
+const DEFAULT_FONT_SIZE = 20; // Default font size for root node
+const DEFAULT_TEXT_COLOR = "#0c0d0e"; // Default text color
+const DEFAULT_BG_COLOR = "#fff"; // Default background color
+const DEFAULT_STROKE_COLOR = "#4096ff"; // Default border color
+const DEFAULT_HOVER_TEXT_COLOR = "#fff"; // Text color on hover
+const TEXT_WIDTH_TOLERANCE = 0.01; // Text width tolerance
 
 interface RootNodeProps {
   showPort?: boolean;
@@ -60,7 +60,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
     render,
   } = styles || {};
 
-  // ==================== 文本样式 ====================
+  // ==================== Text styles ====================
   const _textStyle: ShapeStyle = {
     fill: DEFAULT_TEXT_COLOR,
     fontSize: DEFAULT_FONT_SIZE,
@@ -78,7 +78,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
     ...textHoverStyle,
   };
 
-  // ==================== 背景样式 ====================
+  // ==================== Background styles ====================
   const _bgStyle: ShapeStyle = {
     fill: DEFAULT_BG_COLOR,
     stroke: DEFAULT_STROKE_COLOR,
@@ -97,7 +97,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
     ...hoverBgStyle,
   };
 
-  // ==================== 展开折叠Icon样式 ====================
+  // ==================== Expand/collapse icon style ====================
   const _collapseIconStyle: ShapeStyle = {
     stroke: DEFAULT_STROKE_COLOR,
     lineWidth: 1,
@@ -105,12 +105,12 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
     ...collapseIconStyle,
   };
 
-  // ==================== 配置 ====================
+  // ==================== Options ====================
   const options = {
     styles: {},
   };
 
-  // ==================== 获取颜色配置 ====================
+  // ==================== Get color config ====================
   const getColorConfig = (item: Item) => {
     const index = (item._cfg?.model?.level as number) - rootLevel;
     return {
@@ -120,7 +120,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
     };
   };
 
-  // ==================== 设置状态 ====================
+  // ==================== Set state ====================
   const setState = (name?: string, value?: string | boolean, item?: Item) => {
     if (!item) return;
 
@@ -131,7 +131,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
 
     const { color, hoverColor, selectedColor } = getColorConfig(item);
 
-    // 处理折叠状态
+    // Handle collapse state
     if (name === "collapse") {
       collapseShape?.attr({
         symbol: value ? G6.Marker.collapse : G6.Marker.expand,
@@ -139,7 +139,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
       return;
     }
 
-    // 处理悬停状态
+    // Handle hover state
     if (name === "hover" && !item.hasState("click") && hasHover) {
       const isHover = Boolean(value);
       const renderStyle = render?.(
@@ -166,7 +166,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
       return;
     }
 
-    // 处理选中状态
+    // Handle selected state
     if (name === "click" && hasSelected) {
       const isSelected = Boolean(value);
       const renderStyle = render?.(
@@ -193,7 +193,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
     }
   };
 
-  // ==================== 文本换行处理 ====================
+  // ==================== Text wrapping ====================
   const wrapText = (label: string, maxWidth: number): string[] => {
     const lines: string[] = [];
     let currentLine = "";
@@ -218,7 +218,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
     return lines.length > 0 ? lines : [label];
   };
 
-  // ==================== 计算节点尺寸 ====================
+  // ==================== Calculate node size ====================
   const calculateNodeSize = (
     label: string,
     fontSize: number
@@ -239,7 +239,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
     return { width: nodeWidth, height: nodeHeight, lines };
   };
 
-  // ==================== 绘制 ====================
+  // ==================== Draw ====================
   const draw = (cfg: ModelConfig, group: IGroup) => {
     const renderStyle = render?.(cfg, "default");
     cfg.textStyle = { ..._textStyle, ...renderStyle?.textStyle };
@@ -261,7 +261,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
     cfg.height = nodeHeight;
     cfg.line = lineCount;
 
-    // 绘制背景
+    // Draw background
     const node = group.addShape("rect", {
       attrs: {
         ..._bgStyle,
@@ -276,7 +276,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
       name: "rect-shape",
     });
 
-    // 绘制文本
+    // Draw text
     lines?.forEach((line, lineIndex) => {
       const { width: lineWidth } = getTextSize(line, _textStyle);
       const textX =
@@ -302,7 +302,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
       });
     });
 
-    // 绘制展开折叠图标
+    // Draw expand/collapse icon
     const hasChildren =
       cfg.children && (cfg.children as TreeGraphData[]).length > 0;
     if (hasChildren) {
@@ -323,7 +323,7 @@ export default function RootNode(rootNodeProps: RootNodeProps): ShapeOptions {
       });
     }
 
-    // 自定义形状
+    // Custom shapes
     if (addShape) {
       addShape(group, cfg);
     }

package/src/components/ChainGraph/ChainGraphServices/TreeNode.ts

@@ -8,19 +8,19 @@ import G6, {
 import { getTextSize, NodeColor, NodeStyle } from ".";
 import { TreeGraphData } from "..";
 
-// ==================== 常量定义 ====================
-const DEFAULT_PADDING = 20; // 节点内边距
-const DEFAULT_LINE_HEIGHT = 18; // 行高
-const DEFAULT_LINE_GAP = 2; // 行间距
-const DEFAULT_ICON_RADIUS = 8; // 折叠图标半径
-const DEFAULT_PORT_WIDTH = 3; // 连接桩宽度
-const DEFAULT_PORT_HEIGHT = 18; // 连接桩高度
-const DEFAULT_FONT_SIZE = 16; // 树节点默认字体大小
-const DEFAULT_TEXT_COLOR = "#0c0d0e"; // 默认文本颜色
-const DEFAULT_BG_COLOR = "#fff"; // 默认背景颜色
-const DEFAULT_STROKE_COLOR = "#4096ff"; // 默认边框颜色
-const DEFAULT_HOVER_TEXT_COLOR = "#fff"; // 悬停时文本颜色
-const TEXT_WIDTH_TOLERANCE = 0.01; // 文本宽度容差
+// ==================== Constant definitions ====================
+const DEFAULT_PADDING = 20; // Node padding
+const DEFAULT_LINE_HEIGHT = 18; // Line height
+const DEFAULT_LINE_GAP = 2; // Line spacing
+const DEFAULT_ICON_RADIUS = 8; // Collapse icon radius
+const DEFAULT_PORT_WIDTH = 3; // Connection port width
+const DEFAULT_PORT_HEIGHT = 18; // Connection port height
+const DEFAULT_FONT_SIZE = 16; // Default font size for tree node
+const DEFAULT_TEXT_COLOR = "#0c0d0e"; // Default text color
+const DEFAULT_BG_COLOR = "#fff"; // Default background color
+const DEFAULT_STROKE_COLOR = "#4096ff"; // Default border color
+const DEFAULT_HOVER_TEXT_COLOR = "#fff"; // Text color on hover
+const TEXT_WIDTH_TOLERANCE = 0.01; // Text width tolerance
 
 interface TreeNodeProps {
   showPort?: boolean;
@@ -62,7 +62,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     render,
   } = styles || {};
 
-  // ==================== 文本样式 ====================
+  // ==================== Text styles ====================
   const _textStyle: ShapeStyle = {
     fill: DEFAULT_TEXT_COLOR,
     fontSize: DEFAULT_FONT_SIZE,
@@ -79,7 +79,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     ...textHoverStyle,
   };
 
-  // ==================== 背景样式 ====================
+  // ==================== Background styles ====================
   const _bgStyle: ShapeStyle = {
     fill: DEFAULT_BG_COLOR,
     stroke: DEFAULT_STROKE_COLOR,
@@ -98,7 +98,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     ...hoverBgStyle,
   };
 
-  // ==================== 展开折叠Icon样式 ====================
+  // ==================== Expand/collapse icon style ====================
   const _collapseIconStyle: ShapeStyle = {
     stroke: DEFAULT_STROKE_COLOR,
     lineWidth: 1,
@@ -106,17 +106,17 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     ...collapseIconStyle,
   };
 
-  // ==================== 连接桩样式 ====================
+  // ==================== Connection port style ====================
   const _portStyle: ShapeStyle = {
     fill: DEFAULT_STROKE_COLOR,
   };
 
-  // ==================== 配置 ====================
+  // ==================== Options ====================
   const options = {
     styles: {},
   };
 
-  // ==================== 获取颜色配置 ====================
+  // ==================== Get color config ====================
   const getColorConfig = (item: Item) => {
     const index = (item._cfg?.model?.level as number) - rootLevel;
     const colorArrayLength = colors.length + 1;
@@ -127,7 +127,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     };
   };
 
-  // ==================== 设置状态 ====================
+  // ==================== Set state ====================
   const setState = (name?: string, value?: string | boolean, item?: Item) => {
     if (!item) return;
 
@@ -138,7 +138,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
 
     const { color, hoverColor, selectedColor } = getColorConfig(item);
 
-    // 处理折叠状态
+    // Handle collapse state
     if (name === "collapse") {
       collapseShape?.attr({
         symbol: value ? G6.Marker.collapse : G6.Marker.expand,
@@ -146,7 +146,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       return;
     }
 
-    // 处理悬停状态
+    // Handle hover state
     if (name === "hover" && !item.hasState("click") && hasHover) {
       const isHover = Boolean(value);
       const renderStyle = render?.(
@@ -175,7 +175,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       return;
     }
 
-    // 处理选中状态
+    // Handle selected state
     if (name === "click" && hasSelected) {
       const isSelected = Boolean(value);
       const renderStyle = render?.(
@@ -204,7 +204,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     }
   };
 
-  // ==================== 文本换行处理 ====================
+  // ==================== Text wrapping ====================
   const wrapText = (label: string, maxWidth: number): string[] => {
     const lines: string[] = [];
     let currentLine = "";
@@ -229,7 +229,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     return lines.length > 0 ? lines : [label || ""];
   };
 
-  // ==================== 计算节点尺寸 ====================
+  // ==================== Calculate node size ====================
   const calculateNodeSize = (
     label: string,
     fontSize: number
@@ -250,7 +250,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     return { width: nodeWidth, height: nodeHeight, lines };
   };
 
-  // ==================== 计算文本位置 ====================
+  // ==================== Calculate text position ====================
   const calculateTextPosition = (
     lineWidth: number,
     nodeWidth: number,
@@ -267,7 +267,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     return -lineWidth + nodeWidth / 2 - DEFAULT_PADDING;
   };
 
-  // ==================== 绘制 ====================
+  // ==================== Draw ====================
   const draw = (cfg: ModelConfig, group: IGroup) => {
     const renderStyle = render?.(cfg, "default");
     cfg.textStyle = { ..._textStyle, ...renderStyle?.textStyle };
@@ -291,7 +291,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
     cfg.height = nodeHeight;
     cfg.line = lineCount;
 
-    // 绘制背景
+    // Draw background
     const node = group.addShape("rect", {
       attrs: {
         ..._bgStyle,
@@ -306,7 +306,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       name: "rect-shape",
     });
 
-    // 绘制文本
+    // Draw text
     lines?.forEach((line, lineIndex) => {
       const { width: lineWidth } = getTextSize(line, _textStyle);
       const textX = calculateTextPosition(lineWidth, nodeWidth, direction);
@@ -329,7 +329,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       });
     });
 
-    // 绘制展开折叠图标
+    // Draw expand/collapse icon
     const hasChildren =
       cfg.children && (cfg.children as TreeGraphData[]).length > 0;
     if (hasChildren) {
@@ -350,7 +350,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       });
     }
 
-    // 绘制连接桩
+    // Draw connection port
     if (showPort) {
       const portX =
         direction === "right"
@@ -378,7 +378,7 @@ export default function TreeNode(treeNodeProps: TreeNodeProps): ShapeOptions {
       });
     }
 
-    // 自定义形状
+    // Custom shapes
     if (addShape) {
       addShape(group, cfg);
     }

package/src/components/ChainGraph/ChainGraphServices/index.ts

@@ -22,10 +22,10 @@ import {
   edgeStyle,
 } from "../_utils";
 
-// 重新导出 getTextSize 以保持向后兼容
+// Re-export getTextSize for backward compatibility
 export { getTextSize };
 
-// ==================== 链图服务 ====================
+// ==================== Chain graph service ====================
 export interface NodeStyle {
   textStyle?: ShapeStyle;
   textSelectedStyle?: ShapeStyle;
@@ -154,7 +154,7 @@ export default class ChainGraphServices {
     const _root = { ...root };
     const _node = { maxWidth: 260, ...node };
 
-    /** 注册根节点 */
+    /** Register root node */
     G6.registerNode(
       "root-node",
       RootNode({
@@ -167,7 +167,7 @@ export default class ChainGraphServices {
       }),
       "rect"
     );
-    /** 注册树节点 */
+    /** Register tree node */
     G6.registerNode(
       "tree-node",
       TreeNode({
@@ -181,7 +181,7 @@ export default class ChainGraphServices {
       }),
       "rect"
     );
-    /** 注册箭头边 */
+    /** Register arrow edge */
     G6.registerEdge("arrow-edge", ArrowEdge({ styles: edge?.style }));
 
     const _layout = {
@@ -353,7 +353,7 @@ export default class ChainGraphServices {
     rendered?.(this);
   }
 
-  // ==================== 调整大小 ====================
+  // ==================== Resize ====================
   private _resize = (containerId: string) => {
     const graph = this._graph;
     const container = document.getElementById(containerId) as HTMLDivElement;
@@ -398,7 +398,7 @@ export default class ChainGraphServices {
     }
   };
 
-  // ==================== 设置MiniMap ====================
+  // ==================== Set MiniMap ====================
   public setMiniMap = (showMiniMap: boolean) => {
     if (!this._minimap) return;
 
@@ -411,7 +411,7 @@ export default class ChainGraphServices {
     }
   };
 
-  // ==================== 设置数据 ====================
+  // ==================== Set data ====================
   public setData = ({
     data,
     level = 1,
@@ -509,7 +509,7 @@ export default class ChainGraphServices {
     this._data = data;
   };
 
-  // ==================== 搜索 ====================
+  // ==================== Search ====================
   public onSearch = (searchVal: string) => {
     if (
       !this._graph ||
@@ -543,7 +543,7 @@ export default class ChainGraphServices {
     }
   };
 
-  // ==================== 展开所有节点 ====================
+  // ==================== Expand all nodes ====================
   public expandAll = ({
     allExpand,
     level = 1,
@@ -586,7 +586,7 @@ export default class ChainGraphServices {
     }
   };
 
-  // ==================== 修改布局 ====================
+  // ==================== Change layout ====================
   public changeLayout = (
     octopus: boolean,
     rootLevel: number = 1,

package/src/components/ChainGraph/_components/SearchSelect/index.module.scss

@@ -1,5 +1,5 @@
-// 定位容器给定 32px 固定高度，Select 通过 height:100% 填满它，
-// 避免 Select 根的 height:100% 直接相对图谱（绝对定位祖先）解析成整图高度而被拉伸。
+// The positioning container is given a fixed 32px height, and the Select fills it via height:100%,
+// preventing the Select root's height:100% from resolving against the graph (its absolutely positioned ancestor) and being stretched to the full graph height.
 .wrapper {
   position: absolute;
   top: 20px;

package/src/components/ChainGraph/_utils/findAncestorsOfNode.ts

@@ -1,11 +1,11 @@
 import { TreeGraphData } from "..";
 
 /**
- * 树结构找节点所有父节点
- * @param tree 树数据
- * @param targetNodeId 目标节点ID
- * @param childrenKey 子节点键名，默认为 "children"
- * @returns 祖先节点ID数组
+ * Find all ancestor nodes of a node in a tree structure
+ * @param tree Tree data
+ * @param targetNodeId Target node ID
+ * @param childrenKey Key name for child nodes, defaults to "children"
+ * @returns Array of ancestor node IDs
  */
 export function findAncestorsOfNode(
   tree: TreeGraphData,
@@ -16,24 +16,24 @@ export function findAncestorsOfNode(
 
   function traverse(node: TreeGraphData) {
     if (node.id === targetNodeId) {
-      // 找到目标节点
-      ancestors = [...ancestors, node.id]; // 将目标节点添加到祖先列表中（可选，取决于是否需要包含目标节点自身）
-      return true; // 停止遍历
+      // Target node found
+      ancestors = [...ancestors, node.id]; // Add the target node to the ancestor list (optional, depending on whether the target node itself should be included)
+      return true; // Stop traversal
     }
 
-    // 递归遍历子节点
+    // Recursively traverse child nodes
     if (node[childrenKey] && (node[childrenKey] as TreeGraphData[]).length) {
       (node[childrenKey] as TreeGraphData[])?.forEach(
         (child: TreeGraphData) => {
           if (traverse(child)) {
-            ancestors.push(node.id); // 如果子节点中找到了目标节点，将当前节点添加到祖先列表
-            return true; // 停止遍历
+            ancestors.push(node.id); // If the target node was found among the children, add the current node to the ancestor list
+            return true; // Stop traversal
           }
         }
       );
     }
 
-    return false; // 未找到目标节点
+    return false; // Target node not found
   }
 
   traverse(tree);

package/src/components/ChainGraph/_utils/getTextSize.ts

@@ -2,10 +2,10 @@ import { ShapeStyle } from "@antv/g6";
 import { get_string_size } from "hsu-utils";
 
 /**
- * 获取文字大小
- * @param text 文本内容
- * @param textStyle 文本样式
- * @returns 文本的宽度和高度
+ * Get text size
+ * @param text Text content
+ * @param textStyle Text style
+ * @returns Width and height of the text
  */
 export const getTextSize = (text: string, textStyle: ShapeStyle) => {
   if (!text) return { width: 0, height: 0 };

package/src/components/ChainGraph/_utils/styles.ts

@@ -1,7 +1,7 @@
 import { ShapeStyle } from "@antv/g6";
 
 /**
- * 根节点文字样式
+ * Root node text style
  */
 export const rootTextStyle: ShapeStyle = {
   fontSize: 20,
@@ -9,14 +9,14 @@ export const rootTextStyle: ShapeStyle = {
 };
 
 /**
- * 节点文字样式
+ * Node text style
  */
 export const nodeTextStyle: ShapeStyle = {
   fontSize: 16,
 };
 
 /**
- * 边样式
+ * Edge style
  */
 export const edgeStyle: ShapeStyle = {
   stroke: "#4096ff",

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

@@ -24,9 +24,9 @@
     bottom: 20px;
     left: 20px;
 
-    background-color: rgba(253, 253, 255, 1);
+    background-color: var(--cf-surface);
 
-    border: 1px solid #2977e7;
+    border: 1px solid var(--primary-color);
 
     transition: all 0.5s ease;