@hsu-react/ui 0.0.13 → 0.0.14

package/lib/components/ChainGraph/ChainGraphServices/RootNode.js

@@ -7,17 +7,17 @@ exports.default = RootNode;
 var _g = _interopRequireDefault(require("@antv/g6"));
 var _ = require(".");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// ==================== 常量定义 ====================
-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
 
 function RootNode(rootNodeProps) {
   const {
@@ -43,7 +43,7 @@ function RootNode(rootNodeProps) {
     render
   } = styles || {};
 
-  // ==================== 文本样式 ====================
+  // ==================== Text styles ====================
   const _textStyle = {
     fill: DEFAULT_TEXT_COLOR,
     fontSize: DEFAULT_FONT_SIZE,
@@ -59,7 +59,7 @@ function RootNode(rootNodeProps) {
     ...textHoverStyle
   };
 
-  // ==================== 背景样式 ====================
+  // ==================== Background styles ====================
   const _bgStyle = {
     fill: DEFAULT_BG_COLOR,
     stroke: DEFAULT_STROKE_COLOR,
@@ -76,7 +76,7 @@ function RootNode(rootNodeProps) {
     ...hoverBgStyle
   };
 
-  // ==================== 展开折叠Icon样式 ====================
+  // ==================== Expand/collapse icon style ====================
   const _collapseIconStyle = {
     stroke: DEFAULT_STROKE_COLOR,
     lineWidth: 1,
@@ -84,12 +84,12 @@ function RootNode(rootNodeProps) {
     ...collapseIconStyle
   };
 
-  // ==================== 配置 ====================
+  // ==================== Options ====================
   const options = {
     styles: {}
   };
 
-  // ==================== 获取颜色配置 ====================
+  // ==================== Get color config ====================
   const getColorConfig = item => {
     const index = item._cfg?.model?.level - rootLevel;
     return {
@@ -99,7 +99,7 @@ function RootNode(rootNodeProps) {
     };
   };
 
-  // ==================== 设置状态 ====================
+  // ==================== Set state ====================
   const setState = (name, value, item) => {
     if (!item) return;
     const group = item.get("group");
@@ -112,7 +112,7 @@ function RootNode(rootNodeProps) {
       selectedColor
     } = getColorConfig(item);
 
-    // 处理折叠状态
+    // Handle collapse state
     if (name === "collapse") {
       collapseShape?.attr({
         symbol: value ? _g.default.Marker.collapse : _g.default.Marker.expand
@@ -120,7 +120,7 @@ function RootNode(rootNodeProps) {
       return;
     }
 
-    // 处理悬停状态
+    // Handle hover state
     if (name === "hover" && !item.hasState("click") && hasHover) {
       const isHover = Boolean(value);
       const renderStyle = render?.(item._cfg, isHover ? "hover" : "default");
@@ -141,7 +141,7 @@ function RootNode(rootNodeProps) {
       return;
     }
 
-    // 处理选中状态
+    // Handle selected state
     if (name === "click" && hasSelected) {
       const isSelected = Boolean(value);
       const renderStyle = render?.(item._cfg, isSelected ? "selected" : "default");
@@ -162,7 +162,7 @@ function RootNode(rootNodeProps) {
     }
   };
 
-  // ==================== 文本换行处理 ====================
+  // ==================== Text wrapping ====================
   const wrapText = (label, maxWidth) => {
     const lines = [];
     let currentLine = "";
@@ -185,7 +185,7 @@ function RootNode(rootNodeProps) {
     return lines.length > 0 ? lines : [label];
   };
 
-  // ==================== 计算节点尺寸 ====================
+  // ==================== Calculate node size ====================
   const calculateNodeSize = (label, fontSize) => {
     const {
       width,
@@ -203,7 +203,7 @@ function RootNode(rootNodeProps) {
     };
   };
 
-  // ==================== 绘制 ====================
+  // ==================== Draw ====================
   const draw = (cfg, group) => {
     const renderStyle = render?.(cfg, "default");
     cfg.textStyle = {
@@ -224,7 +224,7 @@ function RootNode(rootNodeProps) {
     cfg.height = nodeHeight;
     cfg.line = lineCount;
 
-    // 绘制背景
+    // Draw background
     const node = group.addShape("rect", {
       attrs: {
         ..._bgStyle,
@@ -239,7 +239,7 @@ function RootNode(rootNodeProps) {
       name: "rect-shape"
     });
 
-    // 绘制文本
+    // Draw text
     lines?.forEach((line, lineIndex) => {
       const {
         width: lineWidth
@@ -260,7 +260,7 @@ function RootNode(rootNodeProps) {
       });
     });
 
-    // 绘制展开折叠图标
+    // Draw expand/collapse icon
     const hasChildren = cfg.children && cfg.children.length > 0;
     if (hasChildren) {
       const iconX = nodeWidth / 2;
@@ -278,7 +278,7 @@ function RootNode(rootNodeProps) {
       });
     }
 
-    // 自定义形状
+    // Custom shapes
     if (addShape) {
       addShape(group, cfg);
     }

package/lib/components/ChainGraph/ChainGraphServices/TreeNode.js

@@ -7,19 +7,19 @@ exports.default = TreeNode;
 var _g = _interopRequireDefault(require("@antv/g6"));
 var _ = require(".");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// ==================== 常量定义 ====================
-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
 
 function TreeNode(treeNodeProps) {
   const {
@@ -46,7 +46,7 @@ function TreeNode(treeNodeProps) {
     render
   } = styles || {};
 
-  // ==================== 文本样式 ====================
+  // ==================== Text styles ====================
   const _textStyle = {
     fill: DEFAULT_TEXT_COLOR,
     fontSize: DEFAULT_FONT_SIZE,
@@ -61,7 +61,7 @@ function TreeNode(treeNodeProps) {
     ...textHoverStyle
   };
 
-  // ==================== 背景样式 ====================
+  // ==================== Background styles ====================
   const _bgStyle = {
     fill: DEFAULT_BG_COLOR,
     stroke: DEFAULT_STROKE_COLOR,
@@ -78,7 +78,7 @@ function TreeNode(treeNodeProps) {
     ...hoverBgStyle
   };
 
-  // ==================== 展开折叠Icon样式 ====================
+  // ==================== Expand/collapse icon style ====================
   const _collapseIconStyle = {
     stroke: DEFAULT_STROKE_COLOR,
     lineWidth: 1,
@@ -86,17 +86,17 @@ function TreeNode(treeNodeProps) {
     ...collapseIconStyle
   };
 
-  // ==================== 连接桩样式 ====================
+  // ==================== Connection port style ====================
   const _portStyle = {
     fill: DEFAULT_STROKE_COLOR
   };
 
-  // ==================== 配置 ====================
+  // ==================== Options ====================
   const options = {
     styles: {}
   };
 
-  // ==================== 获取颜色配置 ====================
+  // ==================== Get color config ====================
   const getColorConfig = item => {
     const index = item._cfg?.model?.level - rootLevel;
     const colorArrayLength = colors.length + 1;
@@ -107,7 +107,7 @@ function TreeNode(treeNodeProps) {
     };
   };
 
-  // ==================== 设置状态 ====================
+  // ==================== Set state ====================
   const setState = (name, value, item) => {
     if (!item) return;
     const group = item.get("group");
@@ -120,7 +120,7 @@ function TreeNode(treeNodeProps) {
       selectedColor
     } = getColorConfig(item);
 
-    // 处理折叠状态
+    // Handle collapse state
     if (name === "collapse") {
       collapseShape?.attr({
         symbol: value ? _g.default.Marker.collapse : _g.default.Marker.expand
@@ -128,7 +128,7 @@ function TreeNode(treeNodeProps) {
       return;
     }
 
-    // 处理悬停状态
+    // Handle hover state
     if (name === "hover" && !item.hasState("click") && hasHover) {
       const isHover = Boolean(value);
       const renderStyle = render?.(item._cfg, isHover ? "hover" : "default");
@@ -151,7 +151,7 @@ function TreeNode(treeNodeProps) {
       return;
     }
 
-    // 处理选中状态
+    // Handle selected state
     if (name === "click" && hasSelected) {
       const isSelected = Boolean(value);
       const renderStyle = render?.(item._cfg, isSelected ? "selected" : "default");
@@ -174,7 +174,7 @@ function TreeNode(treeNodeProps) {
     }
   };
 
-  // ==================== 文本换行处理 ====================
+  // ==================== Text wrapping ====================
   const wrapText = (label, maxWidth) => {
     const lines = [];
     let currentLine = "";
@@ -197,7 +197,7 @@ function TreeNode(treeNodeProps) {
     return lines.length > 0 ? lines : [label || ""];
   };
 
-  // ==================== 计算节点尺寸 ====================
+  // ==================== Calculate node size ====================
   const calculateNodeSize = (label, fontSize) => {
     const {
       width,
@@ -215,7 +215,7 @@ function TreeNode(treeNodeProps) {
     };
   };
 
-  // ==================== 计算文本位置 ====================
+  // ==================== Calculate text position ====================
   const calculateTextPosition = (lineWidth, nodeWidth, direction) => {
     if (textAlign === "center") {
       return -lineWidth / 2;
@@ -226,7 +226,7 @@ function TreeNode(treeNodeProps) {
     return -lineWidth + nodeWidth / 2 - DEFAULT_PADDING;
   };
 
-  // ==================== 绘制 ====================
+  // ==================== Draw ====================
   const draw = (cfg, group) => {
     const renderStyle = render?.(cfg, "default");
     cfg.textStyle = {
@@ -249,7 +249,7 @@ function TreeNode(treeNodeProps) {
     cfg.height = nodeHeight;
     cfg.line = lineCount;
 
-    // 绘制背景
+    // Draw background
     const node = group.addShape("rect", {
       attrs: {
         ..._bgStyle,
@@ -264,7 +264,7 @@ function TreeNode(treeNodeProps) {
       name: "rect-shape"
     });
 
-    // 绘制文本
+    // Draw text
     lines?.forEach((line, lineIndex) => {
       const {
         width: lineWidth
@@ -285,7 +285,7 @@ function TreeNode(treeNodeProps) {
       });
     });
 
-    // 绘制展开折叠图标
+    // Draw expand/collapse icon
     const hasChildren = cfg.children && cfg.children.length > 0;
     if (hasChildren) {
       const iconX = direction === "right" ? nodeWidth / 2 : -nodeWidth / 2;
@@ -303,7 +303,7 @@ function TreeNode(treeNodeProps) {
       });
     }
 
-    // 绘制连接桩
+    // Draw connection port
     if (showPort) {
       const portX = direction === "right" ? -nodeWidth / 2 - DEFAULT_PORT_WIDTH : nodeWidth / 2;
       const portY = -(nodeHeight - DEFAULT_LINE_HEIGHT) / lineCount + nodeHeight / 2 - DEFAULT_PORT_HEIGHT / 2;
@@ -321,7 +321,7 @@ function TreeNode(treeNodeProps) {
       });
     }
 
-    // 自定义形状
+    // Custom shapes
     if (addShape) {
       addShape(group, cfg);
     }

package/lib/components/ChainGraph/ChainGraphServices/index.js

@@ -18,9 +18,9 @@ var _hsuUtils = require("hsu-utils");
 var _NodeEvents = _interopRequireDefault(require("./NodeEvents"));
 var _utils = require("../_utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// 重新导出 getTextSize 以保持向后兼容
+// Re-export getTextSize for backward compatibility
 
-// ==================== 链图服务 ====================
+// ==================== Chain graph service ====================
 
 class ChainGraphServices {
   _graph = null;
@@ -90,7 +90,7 @@ class ChainGraphServices {
       ...node
     };
 
-    /** 注册根节点 */
+    /** Register root node */
     _g.default.registerNode("root-node", (0, _RootNode.default)({
       styles: _root,
       colors,
@@ -99,7 +99,7 @@ class ChainGraphServices {
       hasSelected,
       addShape
     }), "rect");
-    /** 注册树节点 */
+    /** Register tree node */
     _g.default.registerNode("tree-node", (0, _TreeNode.default)({
       styles: _node,
       showPort,
@@ -109,7 +109,7 @@ class ChainGraphServices {
       hasSelected,
       addShape
     }), "rect");
-    /** 注册箭头边 */
+    /** Register arrow edge */
     _g.default.registerEdge("arrow-edge", (0, _ArrowEdge.default)({
       styles: edge?.style
     }));
@@ -243,7 +243,7 @@ class ChainGraphServices {
     rendered?.(this);
   }
 
-  // ==================== 调整大小 ====================
+  // ==================== Resize ====================
   _resize = containerId => {
     const graph = this._graph;
     const container = document.getElementById(containerId);
@@ -283,7 +283,7 @@ class ChainGraphServices {
     }
   };
 
-  // ==================== 设置MiniMap ====================
+  // ==================== Set MiniMap ====================
   setMiniMap = showMiniMap => {
     if (!this._minimap) return;
     const graph = this._graph;
@@ -294,7 +294,7 @@ class ChainGraphServices {
     }
   };
 
-  // ==================== 设置数据 ====================
+  // ==================== Set data ====================
   setData = ({
     data,
     level = 1,
@@ -364,7 +364,7 @@ class ChainGraphServices {
     this._data = data;
   };
 
-  // ==================== 搜索 ====================
+  // ==================== Search ====================
   onSearch = searchVal => {
     if (!this._graph || this._graph.destroyed || !this._data || searchVal === this._searchVal) {
       return;
@@ -388,7 +388,7 @@ class ChainGraphServices {
     }
   };
 
-  // ==================== 展开所有节点 ====================
+  // ==================== Expand all nodes ====================
   expandAll = ({
     allExpand,
     level = 1,
@@ -422,7 +422,7 @@ class ChainGraphServices {
     }
   };
 
-  // ==================== 修改布局 ====================
+  // ==================== Change layout ====================
   changeLayout = (octopus, rootLevel = 1, getImage) => {
     if (!this._graph || this._graph.destroyed || octopus === this._octopus) {
       return;

package/lib/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/lib/components/ChainGraph/_utils/findAncestorsOfNode.d.ts

@@ -1,9 +1,9 @@
 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 declare function findAncestorsOfNode(tree: TreeGraphData, targetNodeId: string, childrenKey?: string): string[];

package/lib/components/ChainGraph/_utils/findAncestorsOfNode.js

@@ -5,31 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.findAncestorsOfNode = findAncestorsOfNode;
 /**
- * 树结构找节点所有父节点
- * @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
  */
 function findAncestorsOfNode(tree, targetNodeId, childrenKey = "children") {
   let ancestors = [];
   function traverse(node) {
     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].length) {
       node[childrenKey]?.forEach(child => {
         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);
   return ancestors;

package/lib/components/ChainGraph/_utils/getTextSize.d.ts

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

package/lib/components/ChainGraph/_utils/getTextSize.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.getTextSize = void 0;
 var _hsuUtils = require("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
  */
 const getTextSize = (text, textStyle) => {
   if (!text) return {

package/lib/components/ChainGraph/_utils/styles.d.ts

@@ -1,13 +1,13 @@
 import { ShapeStyle } from "@antv/g6";
 /**
- * 根节点文字样式
+ * Root node text style
  */
 export declare const rootTextStyle: ShapeStyle;
 /**
- * 节点文字样式
+ * Node text style
  */
 export declare const nodeTextStyle: ShapeStyle;
 /**
- * 边样式
+ * Edge style
  */
 export declare const edgeStyle: ShapeStyle;

package/lib/components/ChainGraph/_utils/styles.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.rootTextStyle = exports.nodeTextStyle = exports.edgeStyle = void 0;
 /**
- * 根节点文字样式
+ * Root node text style
  */
 const rootTextStyle = exports.rootTextStyle = {
   fontSize: 20,
@@ -13,14 +13,14 @@ const rootTextStyle = exports.rootTextStyle = {
 };
 
 /**
- * 节点文字样式
+ * Node text style
  */
 const nodeTextStyle = exports.nodeTextStyle = {
   fontSize: 16
 };
 
 /**
- * 边样式
+ * Edge style
  */
 const edgeStyle = exports.edgeStyle = {
   stroke: "#4096ff"

package/lib/components/ChainGraph/index.js

@@ -49,7 +49,7 @@ const ChainGraph = (0, _mobxReactLite.observer)(props => {
   const miniMapContainerId = (0, _react.useMemo)(() => (0, _hsuUtils.generateRandomStr)(10), []);
   const [searchVal, setSearchVal] = (0, _react.useState)("");
 
-  // ==================== 初始化 ====================
+  // ==================== Initialization ====================
   const graph = (0, _hooks.useChainGraphInit)({
     containerId,
     miniMapContainerId,
@@ -67,7 +67,7 @@ const ChainGraph = (0, _mobxReactLite.observer)(props => {
     addShape
   });
 
-  // ==================== 设置数据 ====================
+  // ==================== Set data ====================
   const {
     isLayouting
   } = (0, _hooks.useChainGraphData)({
@@ -79,13 +79,13 @@ const ChainGraph = (0, _mobxReactLite.observer)(props => {
     labelRender
   });
 
-  // ==================== 搜索 ====================
+  // ==================== Search ====================
   (0, _hooks.useChainGraphSearch)({
     graph,
     searchVal
   });
 
-  // ==================== 展开所有节点 ====================
+  // ==================== Expand all nodes ====================
   const {
     setAllExpand
   } = (0, _hooks.useChainGraphExpand)({
@@ -94,7 +94,7 @@ const ChainGraph = (0, _mobxReactLite.observer)(props => {
     rootLevel
   });
 
-  // ==================== 修改布局 ====================
+  // ==================== Change layout ====================
   (0, _hooks.useChainGraphLayout)({
     graph,
     octopus,
@@ -102,13 +102,13 @@ const ChainGraph = (0, _mobxReactLite.observer)(props => {
     getImage
   });
 
-  // ==================== 设置MiniMap ====================
+  // ==================== Set MiniMap ====================
   (0, _hooks.useChainGraphMiniMap)({
     graph,
     showMiniMap
   });
 
-  // ==================== 调整大小 ====================
+  // ==================== Resize ====================
   (0, _hooks.useChainGraphResize)({
     graph,
     containerId,

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