@hsu-react/ui 0.0.12 → 0.0.14

package/lib/request/ResType.d.ts

@@ -1,10 +1,10 @@
-/** 通用响应包装：与后端约定的 { code, data, msg } 结构 */
+/** Generic response wrapper: the { code, data, msg } structure agreed with the backend */
 export interface ResType<T = unknown> {
     code: number;
     data: T;
     msg?: string;
 }
-/** 分页列表响应 */
+/** Paginated list response */
 export interface ListRes<T> {
     list: Array<T>;
     page: {
@@ -13,7 +13,7 @@ export interface ListRes<T> {
         total: number;
     };
 }
-/** 文件响应（二进制下载） */
+/** File response (binary download) */
 export interface FileRes {
     filename: string;
     data: ArrayBuffer;

package/lib/request/index.d.ts

@@ -1,18 +1,18 @@
 import type { ResType } from "./ResType";
 export * from "./ResType";
-/** 请求配置（与常见 axios 封装兼容的子集） */
+/** Request configuration (a subset compatible with common axios wrappers) */
 export interface RequestConfig<P = object> {
     params?: P;
     responseType?: string;
     headers?: Record<string, unknown>;
-    /** 为 true 时该请求 401 不触发全局跳登录 */
+    /** When true, a 401 on this request does not trigger the global redirect to login */
     skipAuthRedirect?: boolean;
     [key: string]: unknown;
 }
 /**
- * 组件库内部「智能组件」依赖的请求实现接口。
- * 由使用方通过 ConfigProvider 的 `request` 或 `configureRequest()` 注入，
- * 组件库自身不绑定任何具体 HTTP 客户端。
+ * Request implementation interface that the library's internal "smart components" depend on.
+ * Injected by consumers via ConfigProvider's `request` or `configureRequest()`;
+ * the component library itself is not bound to any specific HTTP client.
  */
 export interface RequestImpl {
     get<T = unknown>(url: string, config?: any): Promise<ResType<T>>;
@@ -20,7 +20,7 @@ export interface RequestImpl {
     del<T = unknown>(url: string, config?: any): Promise<ResType<T>>;
     put<T = unknown>(url: string, data?: any): Promise<ResType<T>>;
 }
-/** 注入真实的请求实现（可只注入用到的方法） */
+/** Inject the real request implementation (only the methods you use need to be provided) */
 export declare const configureRequest: (request: Partial<RequestImpl>) => void;
 export declare const get: RequestImpl["get"];
 export declare const post: RequestImpl["post"];

package/lib/request/index.js

@@ -23,14 +23,14 @@ Object.keys(_ResType).forEach(function (key) {
     }
   });
 });
-/** 请求配置（与常见 axios 封装兼容的子集） */
+/** Request configuration (a subset compatible with common axios wrappers) */
 
 /**
- * 组件库内部「智能组件」依赖的请求实现接口。
- * 由使用方通过 ConfigProvider 的 `request` 或 `configureRequest()` 注入，
- * 组件库自身不绑定任何具体 HTTP 客户端。
+ * Request implementation interface that the library's internal "smart components" depend on.
+ * Injected by consumers via ConfigProvider's `request` or `configureRequest()`;
+ * the component library itself is not bound to any specific HTTP client.
  */
-// 注意：config/data 用宽松类型，以兼容各类 axios 封装的方法签名差异
+// Note: config/data use loose types to accommodate signature differences across axios wrappers
 
 const notConfigured = () => {
   throw new Error("[@hsu-react/ui] 尚未注入 request。请用 <ConfigProvider request={...}> 包裹应用，" + "或在入口调用 configureRequest({ get, post, del, put })。");
@@ -42,7 +42,7 @@ let impl = {
   put: notConfigured
 };
 
-/** 注入真实的请求实现（可只注入用到的方法） */
+/** Inject the real request implementation (only the methods you use need to be provided) */
 const configureRequest = request => {
   impl = {
     ...impl,

package/lib/styles/antd-overload.scss

@@ -1,3 +1,6 @@
+// Design tokens (colors/fonts/radii/shadows, incl. dark theme) — importing this file brings in the full set of variables
+@use "./tokens";
+
 .ant-layout-sider-children {
   display: flex;
   flex-direction: column;
@@ -21,18 +24,18 @@
   justify-content: center;
 }
 
-// 主色按钮交由 antd colorPrimary 令牌驱动（随亮/暗外观自动取色 + 正确的 hover/active 派生）
+// Primary buttons are driven by the antd colorPrimary token (auto-picks color for light/dark appearance + correct hover/active derivation)
 
 .ant-menu-item,
 .ant-menu-submenu-title {
   column-gap: 5px;
 }
 
-// ===== Cloudflare 风格：侧边菜单（亮/暗通用）=====
+// ===== Cloudflare style: side menu (shared by light/dark) =====
 .ant-layout-sider .ant-menu {
   border-inline-end: none;
 
-  // 选中行左侧水色高亮条 + 中等字重，呼应 CF dashboard 的左缘指示器
+  // Aqua highlight bar on the left of the selected row + medium font weight, echoing the CF dashboard's left-edge indicator
   .ant-menu-item-selected {
     position: relative;
 
@@ -53,7 +56,7 @@
     }
   }
 
-  // CF 分区标题：小号、加粗、字间距、弱色（英文大写）
+  // CF section titles: small size, bold, letter-spaced, muted color (uppercase English)
   .ant-menu-item-group-title {
     padding: 18px 20px 6px;
 
@@ -66,29 +69,29 @@
     color: var(--cf-text-3);
   }
 
-  // 分组内的项左对齐缩进更克制（贴近 CF）
+  // Items within a group use more restrained left-aligned indentation (closer to CF)
   .ant-menu-item-group-list .ant-menu-item {
     padding-left: 20px !important;
   }
 }
 
-// ===== Cloudflare 风格：表格 =====
+// ===== Cloudflare style: tables =====
 .ant-table-wrapper {
   .ant-table {
-    // 表头更细的字重与字间距
+    // Lighter font weight and letter spacing for table headers
     .ant-table-thead > tr > th {
       font-weight: 600;
       font-size: 13px;
     }
 
-    // 去掉单元格右侧默认竖分割线（CF 表格只保留横线）
+    // Remove the default vertical divider on the right of cells (CF tables keep horizontal lines only)
     .ant-table-thead > tr > th::before {
       display: none !important;
     }
   }
 }
 
-// ===== Cloudflare 风格：Tag 走描边轻底 =====
+// ===== Cloudflare style: Tags use outlined style with a light background =====
 .ant-tag {
   border-radius: 6px;
 }
@@ -130,4 +133,7 @@
       }
     }
   }
-}
+}
+.ant-modal-mask {
+  pointer-events: auto !important;
+}

package/lib/styles/tokens.d.ts

@@ -0,0 +1,26 @@
+/**
+ * TS constants for the Hsu UI design tokens (for JS-side consumers such as antd themeConfig).
+ * The CSS-variable version lives in ./tokens.scss; the two must be kept in sync.
+ */
+export interface HsuThemeTokens {
+    /** Page canvas */
+    canvas: string;
+    /** Card/panel background */
+    surface: string;
+    /** Table header/secondary background */
+    subtle: string;
+    /** Border */
+    border: string;
+    /** Lighter border */
+    borderWeak: string;
+    /** Header bar background */
+    headerBg: string;
+    text: string;
+    text2: string;
+    text3: string;
+    rowHover: string;
+}
+export declare const lightTokens: HsuThemeTokens;
+export declare const darkTokens: HsuThemeTokens;
+/** Default primary color (initial value of the CSS variable --primary-color; consuming projects may override at runtime) */
+export declare const defaultPrimaryColor = "#1677ff";

package/lib/styles/tokens.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lightTokens = exports.defaultPrimaryColor = exports.darkTokens = void 0;
+/**
+ * TS constants for the Hsu UI design tokens (for JS-side consumers such as antd themeConfig).
+ * The CSS-variable version lives in ./tokens.scss; the two must be kept in sync.
+ */
+
+const lightTokens = exports.lightTokens = {
+  canvas: "#f6f7f9",
+  surface: "#ffffff",
+  subtle: "#fafbfc",
+  border: "#e6e8eb",
+  borderWeak: "#eceef1",
+  headerBg: "#ffffff",
+  text: "rgba(0, 0, 0, 0.88)",
+  text2: "rgba(0, 0, 0, 0.45)",
+  text3: "rgba(0, 0, 0, 0.35)",
+  rowHover: "#f6f7f9"
+};
+const darkTokens = exports.darkTokens = {
+  canvas: "#131314",
+  surface: "#1c1c1e",
+  subtle: "#232325",
+  border: "rgba(255, 255, 255, 0.12)",
+  borderWeak: "rgba(255, 255, 255, 0.08)",
+  headerBg: "#1c1c1e",
+  text: "rgba(255, 255, 255, 0.85)",
+  text2: "rgba(255, 255, 255, 0.45)",
+  text3: "rgba(255, 255, 255, 0.35)",
+  rowHover: "rgba(255, 255, 255, 0.04)"
+};
+
+/** Default primary color (initial value of the CSS variable --primary-color; consuming projects may override at runtime) */
+const defaultPrimaryColor = exports.defaultPrimaryColor = "#1677ff";

package/lib/styles/tokens.scss

@@ -0,0 +1,62 @@
+// =============================================================
+// Hsu UI design tokens (single source of truth)
+// Two value sets, light/dark; dark is activated by html[data-theme="dark"] (Theme toggle in consuming projects)
+// or html[data-prefers-color-scheme="dark"] (dumi docs site).
+// TS-side constants live in ./tokens.ts (for JS consumers such as antd themeConfig); the two must be kept in sync.
+// =============================================================
+
+:root {
+  // ---- Colors - neutral ----
+  --cf-canvas: #f6f7f9; // Page canvas
+  --cf-surface: #ffffff; // Card/panel background
+  --cf-subtle: #fafbfc; // Table header/secondary background
+  --cf-border: #e6e8eb; // Border
+  --cf-border-weak: #eceef1; // Lighter border
+  --cf-text: rgba(0, 0, 0, 0.88);
+  --cf-text-2: rgba(0, 0, 0, 0.45);
+  --cf-text-3: rgba(0, 0, 0, 0.35);
+  --cf-row-hover: #f6f7f9;
+
+  // ---- Colors - brand & functional ----
+  --primary-color: #1677ff; // Default primary color (consuming projects may override at runtime)
+  --cf-success: #52c41a;
+  --cf-warning: #faad14;
+  --cf-error: #ff4d4f;
+
+  // ---- Fonts ----
+  --cf-font-family:
+    PingFangSC-Regular, "PingFang SC", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif;
+  --cf-font-size-sm: 12px;
+  --cf-font-size: 14px;
+  --cf-font-size-lg: 16px;
+
+  // ---- Border radius ----
+  --cf-radius-sm: 6px;
+  --cf-radius: 8px;
+  --cf-radius-lg: 12px;
+
+  // ---- Shadows (the CF look relies mainly on borders; shadows are for overlays only) ----
+  --cf-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
+  --cf-shadow-2: 0 4px 12px rgba(16, 24, 40, 0.08);
+  --cf-shadow-3: 0 8px 24px rgba(16, 24, 40, 0.12);
+}
+
+html[data-theme="dark"],
+html[data-prefers-color="dark"],
+html[data-prefers-color-scheme="dark"] {
+  --cf-canvas: #131314;
+  --cf-surface: #1c1c1e;
+  --cf-subtle: #232325;
+  --cf-border: rgba(255, 255, 255, 0.12);
+  --cf-border-weak: rgba(255, 255, 255, 0.08);
+  --cf-text: rgba(255, 255, 255, 0.85);
+  --cf-text-2: rgba(255, 255, 255, 0.45);
+  --cf-text-3: rgba(255, 255, 255, 0.35);
+  --cf-row-hover: rgba(255, 255, 255, 0.04);
+
+  // Deeper shadows in dark mode (to distinguish overlays from the dark background)
+  --cf-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
+  --cf-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
+  --cf-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55);
+}

package/lib/typings.d.ts

@@ -1,5 +1,5 @@
-// 环境声明：为构建期类型检查 / 声明文件生成补充缺失的模块类型。
-// 仅提供类型，不影响运行时行为。
+// Ambient declarations: supply missing module types for build-time type checking / declaration file generation.
+// Types only; no runtime effect.
 
 // CSS / Sass Modules
 declare module "*.module.scss" {
@@ -19,7 +19,7 @@ declare module "*.css" {
   export default content;
 }
 
-// 静态资源
+// Static assets
 declare module "*.png" {
   const src: string;
   export default src;

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.12",
+  "version": "0.0.14",
   "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);
     }