@hsu-react/ui 0.0.12 → 0.0.14

package/src/components/Upload/index.tsx

@@ -107,7 +107,7 @@ const Upload: React.FC<UploadProps> = (props) => {
     setFile: setPreviewFile,
   } = useUploadPreview();
 
-  // 分片上传
+  // Chunked upload
   const chunkCustomRequest: AntdUploadProps["customRequest"] = useCallback(
     async (options: UploadRequestOption) => {
       const { file: _file, onSuccess, onError, onProgress } = options;
@@ -157,7 +157,7 @@ const Upload: React.FC<UploadProps> = (props) => {
     ]
   );
 
-  // 普通上传
+  // Normal upload
   const customRequest: AntdUploadProps["customRequest"] = useCallback(
     async (options: UploadRequestOption) => {
       const { file: _file, onSuccess, onError, onProgress } = options;

package/src/config-provider/index.tsx

@@ -4,15 +4,15 @@ import { PermissionsContent } from "../hooks/usePermissions";
 import { configureRequest, RequestImpl } from "../request";
 
 export interface ConfigProviderProps {
-  /** 当前用户权限码列表；传入后 usePermissions / hasPermi 据此校验。不传则默认全部放行 */
+  /** Current user's permission code list; when provided, usePermissions / hasPermi validate against it. If omitted, everything is allowed by default */
   permissions?: string[] | null;
-  /** 注入 HTTP 请求实现，供 ImportForm 等智能组件使用 */
+  /** Inject the HTTP request implementation, used by smart components such as ImportForm */
   request?: Partial<RequestImpl>;
   children?: React.ReactNode;
 }
 
 /**
- * Hsu UI 全局配置：注入权限与请求实现。
+ * Hsu UI global configuration: injects permissions and the request implementation.
  *
  * @example
  * <ConfigProvider permissions={perms} request={{ get, post, del, put }}>
@@ -24,7 +24,7 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
   request,
   children,
 }) => {
-  // 在渲染期同步注入，确保子组件首次交互即可拿到 request 实现
+  // Inject synchronously during render so child components get the request implementation on their very first interaction
   useMemo(() => {
     if (request) configureRequest(request);
   }, [request]);

package/src/hooks/usePermissions.ts

@@ -17,12 +17,12 @@ export default function usePermissions(hasPermi?: string[]): {
 
   const checkPermission = useCallback(
     (hasPermi: string[] | undefined) => {
-      // 如果hasPermi或permissions为空，则认为有权限
+      // If hasPermi or permissions is empty, treat as permitted
       if (!hasPermi || !permissions) {
         return true;
       }
 
-      // 如果hasPermi或permissions为空数组，则认为没有权限
+      // If hasPermi or permissions is an empty array, treat as not permitted
       if (
         (Array.isArray(hasPermi) && !hasPermi.length) ||
         (Array.isArray(permissions) && !permissions.length)
@@ -30,7 +30,7 @@ export default function usePermissions(hasPermi?: string[]): {
         return false;
       }
 
-      // 如果hasPermi和permissions都不为空数组，则判断hasPermi是否在permissions中
+      // If neither hasPermi nor permissions is an empty array, check whether hasPermi is included in permissions
       return array_is_includes(permissions, hasPermi);
     },
     [permissions]

package/src/index.ts

@@ -1,8 +1,8 @@
-// 全局配置（权限 + 请求注入）
+// Global configuration (permissions + request injection)
 export { default as ConfigProvider } from "./config-provider";
 export type { ConfigProviderProps } from "./config-provider";
 
-// 请求注入层
+// Request injection layer
 export {
   configureRequest,
   get,
@@ -16,7 +16,11 @@ export type { RequestImpl, RequestConfig, ResType, ListRes, FileRes } from "./re
 export { usePermissions, PermissionsContent, useLabelWidth } from "./hooks";
 export { getUUID, supportsHasSelector, isLegacyHasSelectorBrowser } from "./utils";
 
-// 组件
+// Design tokens (TS constants for JS-side consumers such as antd themeConfig; CSS-variable version lives in es/styles/tokens.scss)
+export { lightTokens, darkTokens, defaultPrimaryColor } from "./styles/tokens";
+export type { HsuThemeTokens } from "./styles/tokens";
+
+// Components
 export { default as Button } from "./components/Button";
 export * from "./components/Button";
 export { default as ChainGraph } from "./components/ChainGraph";
@@ -84,5 +88,5 @@ export * from "./components/Tree";
 export { default as Upload } from "./components/Upload";
 export * from "./components/Upload";
 
-// 显式消歧：Table 与 Descriptions 均导出了 ColumnsType，以 Table 的为准（公共 API）。
+// Explicit disambiguation: both Table and Descriptions export ColumnsType; Table's takes precedence (public API).
 export type { ColumnsType } from "./components/Table";

package/src/request/ResType.ts

@@ -1,11 +1,11 @@
-/** 通用响应包装：与后端约定的 { 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: {
@@ -15,7 +15,7 @@ export interface ListRes<T> {
   };
 }
 
-/** 文件响应（二进制下载） */
+/** File response (binary download) */
 export interface FileRes {
   filename: string;
   data: ArrayBuffer;

package/src/request/index.ts

@@ -2,22 +2,22 @@ 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.
  */
-// 注意：config/data 用宽松类型，以兼容各类 axios 封装的方法签名差异
+// Note: config/data use loose types to accommodate signature differences across axios wrappers
 export interface RequestImpl {
   get<T = unknown>(url: string, config?: any): Promise<ResType<T>>;
   post<T = unknown>(url: string, data?: any, config?: any): Promise<ResType<T>>;
@@ -39,7 +39,7 @@ let impl: RequestImpl = {
   put: notConfigured,
 };
 
-/** 注入真实的请求实现（可只注入用到的方法） */
+/** Inject the real request implementation (only the methods you use need to be provided) */
 export const configureRequest = (request: Partial<RequestImpl>): void => {
   impl = { ...impl, ...request } as RequestImpl;
 };

package/src/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/src/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/src/styles/tokens.ts

@@ -0,0 +1,52 @@
+/**
+ * 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 const lightTokens: HsuThemeTokens = {
+  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",
+};
+
+export const darkTokens: HsuThemeTokens = {
+  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) */
+export const defaultPrimaryColor = "#1677ff";

package/src/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/src/utils/getUUID.ts

@@ -1,5 +1,5 @@
 /**
- * 生成 UUID v4
+ * Generate a UUID v4
  */
 export const getUUID = (): string => {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {