@hsu-react/ui 1.0.0 → 2.0.1

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

@@ -25,10 +25,10 @@
         padding: var(--th-padding);
 
         &:global(.ant-table-column-has-sorters) {
-          background: var(--cf-subtle);
+          background: var(--vita-muted);
 
           &:hover {
-            background: var(--cf-subtle);
+            background: var(--vita-muted);
           }
         }
       }
@@ -61,11 +61,11 @@
 
         // 排序列：antd 会用 bodySortBg 单独给该列的单元格上底色，这里抹掉，
         // 让「哪一列在排序」只由表头的高亮与箭头表达。
-        // 只抹静止态——从前连悬浮态一起抹掉、再补一支 --cf-subtle 回来，
+        // 只抹静止态——从前连悬浮态一起抹掉、再补一支 --vita-muted 回来，
         // 而整行其余单元格走的是 antd 的 rowHoverBg，两支值并不相等（库自带调色板下
         // 是 #fafbfc vs #f6f7f9），悬浮一行时排序列会比其余列深一块、整行裂成两截。
         // 排除掉悬浮态后，该单元格自然落回 antd 的行悬浮规则，与整行始终同色，
-        // 且不依赖消费方是否同步设置了 --cf-subtle / rowHoverBg。
+        // 且不依赖消费方是否同步设置了 --vita-muted / rowHoverBg。
         &:global(.ant-table-column-sort):not(:global(.ant-table-cell-row-hover)) {
           background: transparent;
         }
@@ -74,10 +74,10 @@
       &:global(.ant-table-row-selected) {
         :global(.ant-table-cell) {
           &:global(.ant-table-column-sort) {
-            background: color-mix(in srgb, var(--primary-color) 12%, transparent);
+            background: color-mix(in srgb, var(--vita-primary) 12%, transparent);
 
             &:global(.ant-table-cell-row-hover) {
-              background: color-mix(in srgb, var(--primary-color) 22%, transparent);
+              background: color-mix(in srgb, var(--vita-primary) 22%, transparent);
             }
           }
         }
@@ -130,7 +130,7 @@
 
     :global(.ant-checkbox) {
       &:global(.ant-checkbox-checked) {
-        :global(.ant-checkbox-inner) {
+        & {
           &::after {
             top: 45%;
             inset-inline-start: 25%;
@@ -145,7 +145,7 @@
 
   // Table
   .antdTable {
-    border-color: var(--cf-border-weak);
+    border-color: var(--vita-border-weak);
 
     *:not(:global(.ant-table-cell) *) {
       border-color: inherit !important;
@@ -174,7 +174,7 @@
         :global(.ant-table-container) {
           :global(.ant-table-content) {
             > table {
-              border-left: 1px solid var(--cf-border-weak);
+              border-left: 1px solid var(--vita-border-weak);
             }
           }
         }
@@ -239,23 +239,23 @@
         :global(.ant-table-container) {
           > :global(.ant-table-header) {
             > table {
-              border-radius: 6px 6px 0 0;
-              border-left: 1px solid var(--cf-border-weak);
+              border-radius: var(--vita-radius-sm) var(--vita-radius-sm) 0 0;
+              border-left: 1px solid var(--vita-border-weak);
             }
           }
 
           > :global(.ant-table-body) {
             > table {
               border-radius: 0px !important;
-              border-left: 1px solid var(--cf-border-weak);
+              border-left: 1px solid var(--vita-border-weak);
             }
           }
 
           > :global(.ant-table-summary) {
             > table {
               border-radius: 0px !important;
-              border-left: 1px solid var(--cf-border-weak);
-              border-top: 1px solid var(--cf-border-weak);
+              border-left: 1px solid var(--vita-border-weak);
+              border-top: 1px solid var(--vita-border-weak);
             }
           }
         }

package/src/components/Table/index.tsx

@@ -128,7 +128,23 @@ export interface TableProps<RecordType = AnyObject>
 type TableFC = (<T extends AnyObject>(
   props: TableProps<T>
 ) => JSX.Element | null) &
-  React.FC<TableProps<AnyObject>>;
+  React.FC<TableProps<AnyObject>> & {
+    /** antd 的 `Table.Summary`，用来渲染合计行 */
+    Summary: typeof AntdTable.Summary;
+    /** antd 的 `Table.Column`，供 JSX 声明列（本库更推荐用 `columns` 属性） */
+    Column: typeof AntdTable.Column;
+    /** antd 的 `Table.ColumnGroup` */
+    ColumnGroup: typeof AntdTable.ColumnGroup;
+    /** 展开列的占位符，放进 `columns` 里可指定展开图标的位置 */
+    EXPAND_COLUMN: typeof AntdTable.EXPAND_COLUMN;
+    /** 选择列的占位符，同上 */
+    SELECTION_COLUMN: typeof AntdTable.SELECTION_COLUMN;
+    SELECTION_ALL: typeof AntdTable.SELECTION_ALL;
+    SELECTION_INVERT: typeof AntdTable.SELECTION_INVERT;
+    SELECTION_NONE: typeof AntdTable.SELECTION_NONE;
+    /** 拖拽排序：`Table.Drag.Handle` 作为拖拽手柄列 */
+    Drag: typeof Drag;
+  };
 
 const Table: TableFC = <T extends AnyObject>(props: TableProps<T>) => {
   const {
@@ -348,4 +364,14 @@ const Table: TableFC = <T extends AnyObject>(props: TableProps<T>) => {
   );
 };
 
+Table.Summary = AntdTable.Summary;
+Table.Column = AntdTable.Column;
+Table.ColumnGroup = AntdTable.ColumnGroup;
+Table.EXPAND_COLUMN = AntdTable.EXPAND_COLUMN;
+Table.SELECTION_COLUMN = AntdTable.SELECTION_COLUMN;
+Table.SELECTION_ALL = AntdTable.SELECTION_ALL;
+Table.SELECTION_INVERT = AntdTable.SELECTION_INVERT;
+Table.SELECTION_NONE = AntdTable.SELECTION_NONE;
+Table.Drag = Drag;
+
 export default Table;

package/src/components/Tags/_components/EllipsisTag/index.tsx

@@ -39,7 +39,7 @@ const EllipsisTag: React.FC<EllipsisTagProps> = (props) => {
       }}
       color="#fff"
       styles={{
-        body: {
+        container: {
           padding: "6px",
           maxHeight: "300px",
           overflow: "auto",

package/src/components/TextEllipsis/index.tsx

@@ -1,6 +1,7 @@
 import { Tooltip, TooltipProps } from "antd";
 import { ReactNode, useEffect, useRef, useState } from "react";
 import cssStyles from "./index.module.scss";
+import { mergeSemantic } from "../../utils/semantic";
 
 // Default Tooltip width
 const DEFAULT_TOOLTIP_WIDTH = 200;
@@ -201,15 +202,16 @@ const TextEllipsis: React.FC<TextEllipsisProps> = ({
       placement="bottomLeft"
       {...restTooltipConfig}
       title={isOverflow && !disabled ? tooltipTitle : undefined}
-      styles={{
-        body: {
+      styles={mergeSemantic(styles, (outer) => ({
+        // v5 called this slot `body`; v6 renamed it to `container`
+        container: {
           width: tooltipWidth,
           overflow: "auto",
           maxHeight: "300px",
           whiteSpace: "pre-wrap",
         },
-        ...styles,
-      }}
+        ...outer,
+      }))}
     >
       {content}
     </Tooltip>

package/src/components/Tree/index.md

@@ -55,6 +55,15 @@ export default () => (
 );
 ```
 
+## 子组件
+
+```tsx | pure
+Tree.DirectoryTree  // antd 的目录树（文件夹图标 + 目录态选中）
+Tree.TreeNode       // antd 的 JSX 节点声明
+```
+
+`TreeNode` 供 JSX 写法，本库更推荐用 `treeData`。
+
 ## API
 
 在 [antd TreeProps](https://ant.design/components/tree-cn)（已 `Omit` 掉 `treeData`、`loadData`、`loadedKeys`、`titleRender`）基础上扩展：

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

@@ -11,9 +11,9 @@
   height: 100%;
   min-height: 0px !important;
 
-  background: var(--cf-surface);
+  background: var(--vita-surface);
 
-  border-radius: 8px;
+  border-radius: var(--vita-radius);
 
   .title_search {
     display: flex;
@@ -35,7 +35,7 @@
     }
 
     .search {
-      height: 32px;
+      height: var(--vita-control-height);
 
       .searchIcon {
         font-size: 16px;
@@ -58,11 +58,11 @@
 
     :global(.ant-tree-treenode) {
       &:hover {
-        background: var(--cf-subtle);
+        background: var(--vita-muted);
       }
 
       &:has(> :global(.ant-tree-node-selected)) {
-        background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
+        background-color: color-mix(in srgb, var(--vita-primary) 12%, transparent);
 
         :global(.ant-tree-node-selected) {
           background-color: transparent;
@@ -131,7 +131,7 @@
   &.legacyHasSelectedNodeBackground {
     .treeContainer {
       :global(.ant-tree-treenode):global(.ant-tree-treenode-selected) {
-        background-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
+        background-color: color-mix(in srgb, var(--vita-primary) 12%, transparent);
 
         :global(.ant-tree-node-selected) {
           background-color: transparent;

package/src/components/Tree/index.tsx

@@ -72,7 +72,14 @@ export interface TreeProps extends Omit<
   titleSearchBarClassName?: string;
 }
 
-const Tree: React.FC<TreeProps> = (props) => {
+interface TreeFC extends React.FC<TreeProps> {
+  /** antd 的目录树（带文件夹图标与目录态选中） */
+  DirectoryTree: typeof AntdTree.DirectoryTree;
+  /** antd 的 `Tree.TreeNode`，供 JSX 写法（本库更推荐用 `treeData`） */
+  TreeNode: typeof AntdTree.TreeNode;
+}
+
+const Tree = ((props: TreeProps) => {
   const {
     title,
     titleRender,
@@ -304,6 +311,9 @@ const Tree: React.FC<TreeProps> = (props) => {
       </div>
     </div>
   );
-};
+}) as TreeFC;
+
+Tree.DirectoryTree = AntdTree.DirectoryTree;
+Tree.TreeNode = AntdTree.TreeNode;
 
 export default Tree;

package/src/components/Upload/_components/UploadedItem/index.tsx

@@ -94,9 +94,9 @@ export const UploadedItem: React.FC<UploadedItemProps> = ({
     <div className={classNames(styles.fileItem, listProps?.item)}>
       <Tooltip
         title={name}
-        color="var(--cf-subtle)"
+        color="var(--vita-muted)"
         styles={{
-          body: { color: "var(--cf-text)", padding: "6px 16px" },
+          container: { color: "var(--vita-foreground)", padding: "6px 16px" },
         }}
       >
         <div className={classNames(styles.fileName, listProps?.itemName)}>

package/src/components/Upload/_components/UploadingItem/index.tsx

@@ -32,9 +32,9 @@ export const UploadingItem: React.FC<UploadingItemProps> = ({
       <div className={styles.uploading}>
         <Tooltip
           title={name}
-          color="var(--cf-subtle)"
+          color="var(--vita-muted)"
           styles={{
-            body: { color: "var(--cf-text)", padding: "6px 16px" },
+            container: { color: "var(--vita-foreground)", padding: "6px 16px" },
           }}
         >
           <div

package/src/components/Upload/_utils/normalUpload.ts

@@ -3,7 +3,7 @@ import { RcFile } from "antd/es/upload";
 import { deepCopy } from "hsu-utils";
 import { validateFile, createFormData, isSuccessResponse } from ".";
 import { UploadingList } from "..";
-import type { UploadRequestOption } from "rc-upload/lib/interface";
+import type { UploadRequestOption } from "../../../types/antd";
 
 interface NormalUploadOptions {
   file: RcFile;

package/src/components/Upload/_utils/validateFile.ts

@@ -8,6 +8,60 @@ interface ValidateFileOptions {
   en?: boolean;
 }
 
+/**
+ * 文件是否命中 accept —— 与 antd 保持一致的语义。
+ *
+ * 此前是把 accept 拼进正则：`new RegExp(`(${accept.replace(/,/g, "|")})$`)`，有两个问题：
+ * 字符没转义（`.png` 里的 `.` 是「任意字符」，实测放行了 `axpng`），且 HTML 允许的 MIME
+ * 形式里 `image/*` 的 `*` 会被当成量词（实测把 photo.png 判成了格式错误）。把外部字符串
+ * 拼进正则本身也是 ReDoS 入口。
+ *
+ * 这里照抄 @rc-component/upload 的 attr-accept 语义，而不是另写一套：这个函数是上传前的
+ * 预校验，antd 自己的 accept 过滤也在跑，两边规则一旦不一致，就会出现「antd 放行、我们拦下」
+ * 或反过来的割裂。逐条 some()，任一命中即通过，全不命中即拒绝 —— 不做额外兜底。
+ */
+const matchesAccept = (
+  file: { name: string; type?: string },
+  accept: string
+): boolean => {
+  const items = accept.split(",");
+  const fileName = file.name || "";
+  const mimeType = file.type || "";
+  const baseMimeType = mimeType.replace(/\/.*$/, "");
+
+  return items.some((item) => {
+    const validType = item.trim();
+    if (!validType) return false;
+
+    // `*` / `*​/*`：全部放行
+    if (/^\*(\/\*)?$/.test(validType)) return true;
+
+    // 扩展名。jpg 与 jpeg 互认，与 attr-accept 一致
+    if (validType.charAt(0) === ".") {
+      const lowerName = fileName.toLowerCase();
+      const lowerType = validType.toLowerCase();
+      const affixes =
+        lowerType === ".jpg" || lowerType === ".jpeg"
+          ? [".jpg", ".jpeg"]
+          : [lowerType];
+      return affixes.some((affix) => lowerName.endsWith(affix));
+    }
+
+    // `image/*` 这类通配
+    if (/\/\*$/.test(validType)) {
+      return baseMimeType === validType.replace(/\/.*$/, "");
+    }
+
+    // MIME 全等
+    if (mimeType === validType) return true;
+
+    // `png` 这种没有点也没有斜杠的写法是无效 accept，attr-accept 选择跳过而不是拦下
+    if (/^\w+$/.test(validType)) return true;
+
+    return false;
+  });
+};
+
 /**
  * Validate file format and size
  */
@@ -18,8 +72,7 @@ export function validateFile({
   en,
 }: ValidateFileOptions): { valid: boolean; error?: Error } {
   if (accept) {
-    const fileRegex = new RegExp(`(${accept.replace(/,/g, "|")})$`);
-    if (!fileRegex.test(file.name.toLowerCase())) {
+    if (!matchesAccept(file, accept)) {
       return {
         valid: false,
         error: new Error(

package/src/components/Upload/index.md

@@ -64,6 +64,15 @@ export default () => {
 };
 ```
 
+## 子组件
+
+```tsx | pure
+Upload.Dragger      // antd 的拖拽上传区
+Upload.LIST_IGNORE  // beforeUpload 返回它表示「跳过该文件且不进 fileList」
+```
+
+本库的 `Upload` 传 `drop` 属性即可切成拖拽形态；`Upload.Dragger` 是 antd 原生的那个，两者不要混用。
+
 ## API
 
 继承 antd [UploadProps](https://ant.design/components/upload-cn)（移除原 `action`、`data` 后重新定义），新增/重写属性如下：

package/src/components/Upload/index.tsx

@@ -3,7 +3,7 @@ import {
   UploadProps as AntdUploadProps,
   UploadFile,
 } from "antd";
-import type { UploadRequestOption } from "rc-upload/lib/interface";
+import type { UploadRequestOption } from "../../types/antd";
 import React, { useCallback } from "react";
 import { Canceler } from "axios";
 import { RcFile } from "antd/es/upload";
@@ -58,7 +58,14 @@ export interface UploadProps extends Omit<AntdUploadProps, "action" | "data"> {
   en?: boolean;
 }
 
-const Upload: React.FC<UploadProps> = (props) => {
+interface UploadFC extends React.FC<UploadProps> {
+  /** antd 的拖拽上传区 */
+  Dragger: typeof AntdUpload.Dragger;
+  /** `beforeUpload` 返回它表示「跳过这个文件且不进 fileList」 */
+  LIST_IGNORE: typeof AntdUpload.LIST_IGNORE;
+}
+
+const Upload = ((props: UploadProps) => {
   const {
     disabled = false,
     drop,
@@ -86,6 +93,11 @@ const Upload: React.FC<UploadProps> = (props) => {
     ...uploadConfig
   } = props;
 
+  // antd v6 widened `accept` to `string | { format: string; filter?: ... }`. This component's own
+  // extension check (validateFile) only understands the comma-separated string, so read the format
+  // out of the object form; antd still applies the full config to the native file input.
+  const acceptFormat = typeof accept === "string" ? accept : accept.format;
+
   const {
     fileList: _fileList,
     setFileList,
@@ -131,7 +143,7 @@ const Upload: React.FC<UploadProps> = (props) => {
         chunkNum,
         data,
         headers,
-        accept,
+        accept: acceptFormat,
         size,
         en,
         uploadingList,
@@ -148,7 +160,7 @@ const Upload: React.FC<UploadProps> = (props) => {
       chunkNum,
       data,
       headers,
-      accept,
+      acceptFormat,
       size,
       en,
       uploadingList,
@@ -180,7 +192,7 @@ const Upload: React.FC<UploadProps> = (props) => {
         action,
         data,
         headers,
-        accept,
+        accept: acceptFormat,
         size,
         en,
         uploadingList,
@@ -195,7 +207,7 @@ const Upload: React.FC<UploadProps> = (props) => {
       action,
       data,
       headers,
-      accept,
+      acceptFormat,
       size,
       en,
       uploadingList,
@@ -301,6 +313,9 @@ const Upload: React.FC<UploadProps> = (props) => {
       />
     </>
   );
-};
+}) as UploadFC;
+
+Upload.Dragger = AntdUpload.Dragger;
+Upload.LIST_IGNORE = AntdUpload.LIST_IGNORE;
 
 export default Upload;

package/src/config-provider/index.tsx

@@ -1,27 +1,70 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
+import {
+  ConfigProvider as AntdConfigProvider,
+  theme as antdTheme,
+  type ThemeConfig,
+} from "antd";
 
 import { PermissionsContent } from "../hooks/usePermissions";
+import useIsDark from "../hooks/useIsDark";
 import { configureRequest, RequestImpl } from "../request";
+import { toAntdComponents, toAntdTheme } from "../styles/tokens";
+import { FeedbackHolder } from "../feedback";
 
 export interface ConfigProviderProps {
   /** Current user's permission code list; when provided, usePermissions / hasPermi validate against it. If omitted, everything is allowed by default */
   permissions?: string[] | null;
   /** Inject the HTTP request implementation, used by smart components such as ImportForm */
   request?: Partial<RequestImpl>;
+  /**
+   * Brand colour. Sets both halves of the token layer at once: the `--vita-primary` CSS variable
+   * (via `--primary-color`, so pre-2.0 overrides keep working) and antd's `colorPrimary`.
+   *
+   * Setting the CSS variable by hand only moves this library's own styles — antd derives a
+   * 10-step palette from the JS token and cannot read a `var()`. Going through this prop is what
+   * keeps the two in step.
+   */
+  primaryColor?: string;
+  /**
+   * Force light/dark instead of following `html[data-theme]` / the OS preference.
+   * The CSS variables follow the same signals on their own.
+   */
+  dark?: boolean;
+  /**
+   * Extra antd theme config, merged on top of the generated one — escape hatch for a consumer
+   * that wants a token this library does not map.
+   */
+  theme?: ThemeConfig;
+  /**
+   * Set to `false` to stop managing antd's theme entirely, leaving it to the host app.
+   * Components this library wraps still follow the `--vita-*` variables; antd components it does
+   * not wrap will fall back to antd's stock look.
+   */
+  antdTheme?: boolean;
   children?: React.ReactNode;
 }
 
 /**
- * Hsu UI global configuration: injects permissions and the request implementation.
+ * Hsu UI global configuration: permissions, the request implementation, and the design tokens.
+ *
+ * On the theme: the `--vita-*` CSS variables cover everything this library styles itself, but not
+ * the antd components it merely re-exports or that a page uses directly. Feeding antd's
+ * `theme.token` from the very same tokens is what makes an unwrapped `<Steps />` land on the same
+ * palette, radii and type scale as a wrapped `<Table />` — without this library having to wrap all
+ * 75 antd components to keep the look consistent.
  *
  * @example
- * <ConfigProvider permissions={perms} request={{ get, post, del, put }}>
+ * <ConfigProvider permissions={perms} request={{ get, post, del, put }} primaryColor="#7c3aed">
  *   <App />
  * </ConfigProvider>
  */
 const ConfigProvider: React.FC<ConfigProviderProps> = ({
   permissions = null,
   request,
+  primaryColor,
+  dark,
+  theme,
+  antdTheme: manageAntdTheme = true,
   children,
 }) => {
   // Inject synchronously during render so child components get the request implementation on their very first interaction
@@ -31,11 +74,48 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
 
   const permissionsValue = useMemo(() => ({ permissions }), [permissions]);
 
-  return (
+  const detectedDark = useIsDark();
+  const isDark = dark ?? detectedDark;
+
+  const themeConfig = useMemo<ThemeConfig>(
+    () => ({
+      algorithm: isDark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
+      ...theme,
+      token: { ...toAntdTheme({ dark: isDark, primaryColor }), ...theme?.token },
+      components: { ...toAntdComponents(), ...theme?.components },
+    }),
+    [isDark, primaryColor, theme]
+  );
+
+  // Written onto <html> rather than a wrapper element: this provider usually sits at the very top
+  // of the tree, and slipping an extra div in there would change the layout of whatever it wraps.
+  // `--primary-color` rather than `--vita-primary` because the generated tokens make the latter
+  // point at the former, so writing the legacy name keeps both spellings working for consumers.
+  useEffect(() => {
+    if (!primaryColor || typeof document === "undefined") return;
+
+    const root = document.documentElement;
+    const previous = root.style.getPropertyValue("--primary-color");
+    root.style.setProperty("--primary-color", primaryColor);
+
+    return () => {
+      if (previous) root.style.setProperty("--primary-color", previous);
+      else root.style.removeProperty("--primary-color");
+    };
+  }, [primaryColor]);
+
+  const tree = (
     <PermissionsContent.Provider value={permissionsValue}>
+      {/* 让 message / notification / Modal.confirm 这类命令式 API 的输出落在树内，
+          从而能读到下面注入的主题。见 ../feedback。 */}
+      <FeedbackHolder />
       {children}
     </PermissionsContent.Provider>
   );
+
+  if (!manageAntdTheme) return tree;
+
+  return <AntdConfigProvider theme={themeConfig}>{tree}</AntdConfigProvider>;
 };
 
 export default ConfigProvider;