@hsu-react/ui 1.0.0 → 2.0.0

package/src/components/Markdown/Views/index.module.scss

@@ -31,7 +31,7 @@
     td {
       padding: 4px 8px;
 
-      border: 1px solid var(--cf-border);
+      border: 1px solid var(--vita-border);
     }
   }
 
@@ -54,7 +54,7 @@
     overflow: hidden;
 
     border: 1px solid rgba(240, 237, 234, 0.2);
-    border-radius: 6px;
+    border-radius: var(--vita-radius-sm);
 
     .nav {
       display: flex;
@@ -70,7 +70,7 @@
       background: #212121;
 
       // Copy's root div (class is module-hashed, so it can only be reached as a child).
-      // It colors itself from theme tokens — in light mode --cf-text-2 is near-black,
+      // It colors itself from theme tokens — in light mode --vita-muted-foreground is near-black,
       // which disappears against this strip. The strip stays dark on purpose to match the
       // atom-one-dark code body, so the button is pinned to light-on-dark rather than
       // following the page theme.

package/src/components/Markdown/index.md

@@ -64,6 +64,28 @@ export default () => {
 };
 ```
 
+## Mermaid 图表
+
+代码块语言标为 `mermaid` 时会渲染成图。语法不完整时（比如流式输出到一半）静默回退成代码块展示。
+
+> 出于安全考虑用的是 mermaid 的默认 `securityLevel: "strict"`：Markdown 渲染的往往是不可信内容（聊天消息、AI 回复、上传的 .md），而 `loose` 会放开 `click` 交互 —— 链接 URL 不过 `sanitizeUrl`，且能经 `runFunc` 调到任意全局函数。图形渲染本身不受影响。
+
+```tsx
+import React from "react";
+import { Markdown } from "@hsu-react/ui";
+
+const content = `\`\`\`mermaid
+flowchart LR
+  A[开始] --> B{判断}
+  B -->|是| C[处理]
+  B -->|否| D[跳过]
+  C --> E[结束]
+  D --> E
+\`\`\``;
+
+export default () => <Markdown.Views>{content}</Markdown.Views>;
+```
+
 ## API
 
 ### Markdown.Views

package/src/components/Modal/index.md

@@ -45,6 +45,25 @@ export default () => {
 };
 ```
 
+## 子组件
+
+```tsx | pure
+Modal.confirm / info / success / error / warning   // 确认框，跟随主题
+Modal.useModal                                     // antd 的 hook 版本
+Modal.destroyAll
+Modal.config
+```
+
+2.0 之前这些没有透出，消费方只能自己去 `import { Modal } from "antd"`。
+
+> **这里的 `Modal.confirm` 会跟随主题**，与 antd 的同名静态方法不同。
+>
+> antd 的 `Modal.confirm` 是脱离 React 树调用的，读不到 `ConfigProvider` 注入的 `theme.token`，换过品牌色或切暗色后观感会与页面割裂。本库把它指向了内部的一层代理：`ConfigProvider` 里挂着 `Modal.useModal()` 的实例与 `contextHolder`，调用只是转发过去，所以写法不变而输出在树内。详见指南的[命令式反馈](/guide#命令式反馈message--notification--modalconfirm)一节。
+>
+> 因此**不需要**再自己写 `useModal` + `contextHolder`。`Modal.useModal` 仍然透出，只是通常用不上了。
+>
+> 未挂 `ConfigProvider` 时自动回退到 antd 的静态方法：功能正常，只是不跟随主题。
+
 ## API
 
 在 [antd ModalProps](https://ant.design/components/modal-cn) 基础上扩展：
@@ -56,4 +75,6 @@ export default () => {
 | full | 是否以全屏方式展示 | `boolean` | `false` |
 | titleButtonGroup | 标题区右侧的按钮组配置 | `ButtonProps[]` | - |
 
-> 其余属性（`open`、`onOk`、`onCancel`、`footer`、`width` 等）与 antd `Modal` 一致；`destroyOnClose` 默认为 `true`。
+> 其余属性（`open`、`onOk`、`onCancel`、`footer`、`width` 等）与 antd `Modal` 一致。
+>
+> 关闭时销毁内容默认开启。antd v6 把 `destroyOnClose` 改名为 `destroyOnHidden`，两个名字本组件都认（传了 `destroyOnHidden` 以它为准），所以 1.x 时期的写法不用改。

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

@@ -1,9 +1,19 @@
+@use "../../styles/responsive" as r;
+
 .Modal {
   > div {
     width: 100%;
     height: 100%;
   }
 
+  // 弹窗宽度是按桌面写死的（modalWidth.sm/md/lg = 600/800/1200）。小屏上这些值远超视口，
+  // 会顶出横向滚动，所以在 md 以下改成按视口收缩并贴边。
+  @include r.down(md) {
+    width: calc(100vw - 24px) !important;
+    max-width: calc(100vw - 24px) !important;
+    margin: 12px auto;
+  }
+
   &.full {
     width: 100% !important;
     max-width: 100% !important;
@@ -53,7 +63,7 @@
       justify-content: space-between;
 
       width: 100%;
-      height: 32px;
+      height: var(--vita-control-height);
 
       font-size: 20px;
 

package/src/components/Modal/index.tsx

@@ -3,6 +3,8 @@ import { Modal as AntdModal, ModalProps as AntdModalProps } from "antd";
 import styles from "./index.module.scss";
 import { useModalElements, useModalDrag } from "./_hooks";
 import Button, { ButtonProps } from "../Button";
+import { mergeSemantic } from "../../utils/semantic";
+import { modalFuncs } from "../../feedback";
 
 export interface ModalProps extends AntdModalProps {
   moveable?: boolean;
@@ -11,7 +13,18 @@ export interface ModalProps extends AntdModalProps {
   titleButtonGroup?: ButtonProps[];
 }
 
-const Modal: React.FC<ModalProps> = (props) => {
+interface ModalFC extends React.FC<ModalProps> {
+  confirm: typeof AntdModal.confirm;
+  info: typeof AntdModal.info;
+  success: typeof AntdModal.success;
+  error: typeof AntdModal.error;
+  warning: typeof AntdModal.warning;
+  useModal: typeof AntdModal.useModal;
+  destroyAll: typeof AntdModal.destroyAll;
+  config: typeof AntdModal.config;
+}
+
+const Modal = ((props: ModalProps) => {
   const {
     moveable = true,
     className,
@@ -22,7 +35,10 @@ const Modal: React.FC<ModalProps> = (props) => {
     afterClose,
     edgeDetection = true,
     full = false,
-    destroyOnClose = true,
+    // antd v6 renamed `destroyOnClose` to `destroyOnHidden`; keep honouring the old name so
+    // existing consumers keep working, and forward the new one.
+    destroyOnClose,
+    destroyOnHidden = destroyOnClose ?? true,
     footer,
     title,
     titleButtonGroup,
@@ -53,7 +69,9 @@ const Modal: React.FC<ModalProps> = (props) => {
     }
   };
 
-  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const handleCancel = (
+    e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLElement>
+  ) => {
     onCancel?.(e);
   };
 
@@ -79,27 +97,28 @@ const Modal: React.FC<ModalProps> = (props) => {
           title
         )
       }
-      destroyOnClose={destroyOnClose}
+      destroyOnHidden={destroyOnHidden}
       open={open}
       onCancel={handleCancel}
       onOk={handleOk}
       className={`${styles.Modal} ${className} ${full ? styles.full : ""}`}
-      classNames={{
-        ...classNames,
-        header: `${cls} ${styles.header} ${classNames?.header ?? ""} ${
+      classNames={mergeSemantic(classNames, (outer) => ({
+        ...outer,
+        header: `${cls} ${styles.header} ${outer.header ?? ""} ${
           moveable ? styles.moveable : ""
         }`,
-        content: `${styles.content} ${classNames?.content ?? ""}`,
-        body: `${styles.body} ${classNames?.body ?? ""}`,
-        footer: `${styles.footer} ${classNames?.footer ?? ""} ${
+        // v5 called this slot `content`; v6 renamed it to `container`
+        container: `${styles.content} ${outer.container ?? ""}`,
+        body: `${styles.body} ${outer.body ?? ""}`,
+        footer: `${styles.footer} ${outer.footer ?? ""} ${
           footer === false ? styles.noFooter : ""
         }`,
-      }}
+      }))}
       footer={footer}
       afterClose={() => {
         afterClose?.();
         resetModal();
-        if (destroyOnClose) {
+        if (destroyOnHidden) {
           setModal(null);
           setModalHeader(null);
           setOriginalStyle(null);
@@ -107,6 +126,20 @@ const Modal: React.FC<ModalProps> = (props) => {
       }}
     />
   );
-};
+}) as ModalFC;
+
+/**
+ * 确认框。签名与 antd 一致，但**会跟随主题** —— 指向的是 ../feedback 里的代理，
+ * 输出渲染在 ConfigProvider 内的 holder 里，而不是 antd 那个脱离 React 树的静态方法。
+ * 没挂 ConfigProvider 时自动回退到 antd 静态方法（功能正常，不跟随主题）。
+ */
+Modal.confirm = modalFuncs.confirm;
+Modal.info = modalFuncs.info;
+Modal.success = modalFuncs.success;
+Modal.error = modalFuncs.error;
+Modal.warning = modalFuncs.warning;
+Modal.useModal = AntdModal.useModal;
+Modal.destroyAll = AntdModal.destroyAll;
+Modal.config = AntdModal.config;
 
 export default Modal;

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

@@ -13,7 +13,7 @@
   > ul > li {
     padding: 4px 0px !important;
 
-    border-bottom: 1px solid var(--cf-border);
+    border-bottom: 1px solid var(--vita-border);
 
     &:first-child {
       padding-top: 0px !important;

package/src/components/Operate/index.tsx

@@ -267,7 +267,7 @@ const Operate: React.FC<OperateProps> = (props) => {
         })}
         {isOverflow && hiddenItems.length > 0 && (
           <Dropdown
-            overlayClassName={styles.menu}
+            classNames={{ root: styles.menu }}
             placement="bottom"
             menu={{ items: menuItems }}
           >

package/src/components/Pagination/index.md

@@ -0,0 +1,107 @@
+---
+nav: 组件
+group:
+  title: 数据展示
+  order: 4
+title: Pagination 分页
+---
+
+# Pagination 分页
+
+在 antd `Pagination` 之上封装：`pageSizeOptions` 收成数字数组、页数与每页条数可以完全不受控、外加一套用于「不知道总数」场景的简洁模式。
+
+1.0.0 起从 `Table` 内部提升为公开组件 —— `Table` 的内置分页用的就是它。
+
+## 引入
+
+```ts
+import { Pagination } from "@hsu-react/ui";
+```
+
+## 基本用法
+
+`current` / `pageSize` 都不传时组件自己维护状态，翻页立即生效；传了就以外部值为准（受控）。
+
+```tsx
+import React from "react";
+import { Pagination } from "@hsu-react/ui";
+
+export default () => (
+  <Pagination
+    total={185}
+    pageSize={10}
+    pageSizeOptions={[10, 20, 50]}
+    showSizeChanger
+    showTotal={(total) => `共 ${total} 条`}
+  />
+);
+```
+
+## 带边框
+
+`bordered` 给分页加一圈边框与内边距，适合直接贴在列表下方、和上方内容有分隔的场景。
+
+```tsx
+import React from "react";
+import { Pagination } from "@hsu-react/ui";
+
+export default () => (
+  <Pagination bordered total={185} pageSize={10} align="end" />
+);
+```
+
+## 简洁模式
+
+`simple` 不是 antd 那个简洁模式，而是一套**不依赖 total** 的上一页 / 下一页：接口只返回当前页数据、拿不到总数时用它。
+
+此时必须传 `listLength`（当前页拿到几条）—— 「下一页」是否可点靠它判断：拿到的条数少于 `pageSize` 就说明到底了。
+
+```tsx
+import React, { useState } from "react";
+import { Pagination } from "@hsu-react/ui";
+
+export default () => {
+  const [size, setSize] = useState(10);
+  // 假设第 3 页只返回了 4 条，说明已经到底
+  const [len, setLen] = useState(10);
+
+  return (
+    <Pagination
+      simple
+      showSizeChanger
+      pageSize={size}
+      pageSizeOptions={[10, 20]}
+      listLength={len}
+      showTotal={() => "已加载"}
+      onChange={(page, pageSize) => {
+        setSize(pageSize);
+        setLen(page >= 3 ? 4 : pageSize);
+      }}
+    />
+  );
+};
+```
+
+## API
+
+在 [antd PaginationProps](https://ant.design/components/pagination-cn) 基础上重写 / 新增：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| pageSizeOptions | 每页条数选项。**类型收成了数字数组**（antd 是 `string[]`）；当前 `pageSize` 不在其中时会自动并入并排序 | `number[]` | `[]` |
+| bordered | 加边框与内边距 | `boolean` | `false` |
+| simple | 简洁模式：只有上一页 / 下一页，不需要 `total` | `boolean` | `false` |
+| listLength | 当前页实际拿到的条数，**simple 模式必传**，用于判断「下一页」是否可点 | `number` | - |
+| showTotal | 同 antd，另外允许传 `false` 显式关掉 | `false \| ((total, range) => ReactNode)` | - |
+
+> 其余属性透传给 antd `Pagination`。
+>
+> `PaginationProps` 上还有一个 `onStaticPaginationChange`，它**只在 `Table` 里生效** —— `Table` 用 `staticDataSource` 做前端分页时，用它把页码变化透给外部。类型挂在这里是因为 `Table` 的 `pagination` 属性直接复用了这个接口，单独给 `<Pagination>` 传不会有任何效果。
+
+## 受控与非受控
+
+这是最容易踩的一点：
+
+- **都不传** `current` / `pageSize` —— 组件内部维护，点了就翻，你只需要在 `onChange` 里去取数据
+- **只传其一** —— 传的那个受控，另一个仍由内部维护
+- **传了就必须更新它**：`current` 传了但 `onChange` 里没有把它改掉，页码会翻不动。这和 antd 的行为一致，只是本组件在不传时多给了一层内部状态，容易让人以为「传了也能自己翻」

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

@@ -47,21 +47,22 @@
       }
 
       :global(.ant-pagination-options-size-changer) {
-        :global(.ant-select-selector) {
+        // antd v6 flattened Select: the box moved from the `.ant-select-selector` child onto the
+        // `.ant-select` root, and the value now lives in `.ant-select-content`.
+        :global(.ant-select) {
           height: 100% !important;
+        }
 
-          :global(.ant-select-selection-item) {
-            display: flex;
-            align-items: center;
+        :global(.ant-select-content) {
+          display: flex;
+          align-items: center;
 
-            line-height: normal !important;
-          }
+          line-height: normal !important;
         }
 
-        :global(.ant-select-arrow) {
+        // The suffix sits in the flex flow now, so it needs no vertical re-centring.
+        :global(.ant-select-suffix) {
           margin-top: 0px;
-
-          transform: translateY(-50%);
         }
       }
 
@@ -79,8 +80,8 @@
   &.bordered {
     > li {
       &:not(:global(.ant-pagination-options)):not(:global(.ant-pagination-total-text)) {
-        border: 1px solid var(--cf-border);
-        border-radius: 4px;
+        border: 1px solid var(--vita-border);
+        border-radius: var(--vita-radius-xs);
       }
 
       &:global(.ant-pagination-item) {
@@ -90,8 +91,8 @@
             :global(.ant-pagination-item-disabled)
           ):hover,
         &:global(.ant-pagination-item-active) {
-          background-color: var(--primary-color, #1890ff);
-          border-color: var(--primary-color, #1890ff);
+          background-color: var(--vita-primary, #1890ff);
+          border-color: var(--vita-primary, #1890ff);
 
           > a {
             color: #ffffff;
@@ -99,7 +100,7 @@
         }
 
         &:not(:global(.ant-pagination-item-active)):not(:global(.ant-pagination-item-disabled)) {
-          border-color: var(--cf-border);
+          border-color: var(--vita-border);
         }
 
         &:not(:global(.ant-pagination-item-active)):global(.ant-pagination-item-disabled) {
@@ -110,7 +111,7 @@
           }
 
           > a {
-            color: var(--cf-text-3);
+            color: var(--vita-subtle-foreground);
 
             cursor: not-allowed;
           }
@@ -164,10 +165,10 @@
     justify-content: center;
     column-gap: 3px;
 
-    height: 24px;
+    height: var(--vita-control-height-sm);
     padding: 0px 5px;
 
-    border-radius: 6px;
+    border-radius: var(--vita-radius-sm);
 
     font-size: 12px;
     line-height: 16px;
@@ -179,7 +180,7 @@
     user-select: none;
 
     &:hover {
-      background-color: var(--cf-subtle);
+      background-color: var(--vita-muted);
     }
 
     .icon {

package/src/components/Pagination/index.tsx

@@ -5,7 +5,7 @@ import {
 } from "antd";
 import React, { ReactNode, useMemo, useRef } from "react";
 
-import { BaseSelectRef } from "rc-select";
+import type { SelectRef } from "../../types/antd";
 import Icon from "../Icon";
 import classNames from "classnames";
 import styles from "./index.module.scss";
@@ -35,7 +35,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     showTotal,
     align,
   } = props;
-  const selectRef = useRef<BaseSelectRef>(null);
+  const selectRef = useRef<SelectRef>(null);
   // Pass the raw values directly without defaults; let usePaginationSync handle them itself
   const { _pageNum, _pageSize, setPageNum, setPageSize } = usePaginationSync({
     current: props.current,

package/src/components/Panel/DefaultPanel/index.module.scss

@@ -43,9 +43,9 @@
   width: 100%;
   padding: 10px;
 
-  background: var(--cf-surface);
+  background: var(--vita-surface);
 
   // CF style: outlined white card
-  border-radius: 8px;
-  border: 1px solid var(--cf-border);
+  border-radius: var(--vita-radius);
+  border: 1px solid var(--vita-border);
 }

package/src/components/Panel/IframePanel/index.module.scss

@@ -57,9 +57,9 @@
     height: 60px;
 
     font-size: 50px;
-    color: var(--cf-text-2);
+    color: var(--vita-muted-foreground);
 
-    background: var(--cf-surface);
+    background: var(--vita-surface);
 
     border-radius: 50%;
 

package/src/components/Panel/IframePanel/index.tsx

@@ -26,7 +26,11 @@ const IframePanel: React.FC<IframePanelProps> = (props) => {
           {children}
         </div>
       ) : (
-        <Spin spinning={spinning} wrapperClassName={styles.spin} size="large">
+        <Spin
+          spinning={spinning}
+          classNames={{ root: styles.spin }}
+          size="large"
+        >
           <iframe {...coreProps} ref={ref} onLoad={() => setSpinning(false)} />
         </Spin>
       )}

package/src/components/Panel/ListPanel/ListModalPanel/index.module.scss

@@ -34,9 +34,9 @@
     width: 100%;
     min-height: 0px;
 
-    background: var(--cf-surface);
+    background: var(--vita-surface);
 
-    border-radius: 8px;
+    border-radius: var(--vita-radius);
 
     .tips {
       width: 100%;

package/src/components/Panel/ListPanel/ListModalPanel/index.tsx

@@ -5,7 +5,7 @@ import Search, {
 } from "../../../Search";
 import Table, { ColumnsType, TableProps } from "../../../Table";
 
-import { ChakraButtonProps as BasicButtonProps } from "../../../Button";
+import { ButtonProps as HsuButtonProps } from "../../../Button";
 import { TabBarProps } from "../../../TabBar";
 import {
   FullscreenExitOutlined,
@@ -19,7 +19,7 @@ import Modal, { ModalProps } from "../../../Modal";
 import ToolBar from "../_components/ToolBar";
 import ColumnMgt from "../_components/ColumnMgt";
 
-interface ButtonProps extends Omit<BasicButtonProps, "children" | "title"> {
+interface ButtonProps extends Omit<HsuButtonProps, "children" | "title"> {
   title?: ReactNode;
   children?: ReactNode;
 }

package/src/components/Panel/ListPanel/_components/ColumnMgt/index.module.scss

@@ -3,19 +3,19 @@
     cursor: default;
 
     > div:not(.tips) {
-      color: var(--cf-text-2);
+      color: var(--vita-muted-foreground);
     }
 
     .tips {
       font-size: 12px;
       font-weight: normal;
 
-      color: var(--cf-text-3);
+      color: var(--vita-subtle-foreground);
     }
   }
 
   .widthInput {
-    height: 32px !important;
+    height: var(--vita-control-height) !important;
   }
 
   .body {

package/src/components/Panel/ListPanel/_components/ColumnMgt/index.tsx

@@ -1,4 +1,5 @@
-import { message } from "antd";
+import { mergeSemantic } from "../../../../../utils/semantic";
+import { message } from "../../../../../feedback";
 import React, { useEffect, useState } from "react";
 import Table, { ColumnsType, TableDrag } from "../../../../Table";
 
@@ -49,8 +50,7 @@ const ColumnMgt: React.FC<ColumnMgtProps> = (props) => {
     onSelectionChange,
   } = props;
   const { max, min = 1 } = columnCount;
-  const { classNames = {}, ...modalConfig } = modalProps;
-  const { header, body, footer, mask, content, wrapper } = classNames;
+  const { classNames, ...modalConfig } = modalProps;
   const [_dataSource, setDataSource] = useState<Array<DataSource>>([]);
   const { checkPermission } = usePermissions();
 
@@ -287,14 +287,10 @@ const ColumnMgt: React.FC<ColumnMgtProps> = (props) => {
       centered
       width={"40%"}
       className={`${styles.ColumnMgt} ${className ?? ""}`}
-      classNames={{
-        header: `${header ?? ""}`,
-        body: `${styles.body} ${body ?? ""}`,
-        footer: `${footer ?? ""}`,
-        mask: `${mask ?? ""}`,
-        content: `${content ?? ""}`,
-        wrapper: `${wrapper ?? ""}`,
-      }}
+      classNames={mergeSemantic(classNames, (outer) => ({
+        ...outer,
+        body: `${styles.body} ${outer.body ?? ""}`,
+      }))}
       title={
         <div className={styles.title}>
           <div>自定义显示列项</div>

package/src/components/Panel/ListPanel/_components/ToolBar/index.module.scss

@@ -1,3 +1,5 @@
+@use "../../../../../styles/responsive" as r;
+
 .ToolBar {
   display: flex;
   justify-content: space-between;
@@ -6,6 +8,17 @@
 
   min-height: max-content;
 
+  // 标题与按钮组在窄屏里挤成一行会互相压扁（按钮文字被截断），改为换行分两排。
+  @include r.down(md) {
+    flex-wrap: wrap;
+    row-gap: 8px;
+
+    .title_tabBar,
+    .btns_tools {
+      width: 100%;
+    }
+  }
+
   .title_tabBar {
     display: flex;
     align-items: center;
@@ -33,7 +46,7 @@
     }
 
     .tabBar {
-      height: 32px;
+      height: var(--vita-control-height);
     }
   }
 

package/src/components/Panel/ListPanel/_components/ToolBar/index.tsx

@@ -71,9 +71,9 @@ const ToolBar: React.FC<ToolBarProps> = (props) => {
                   {buttonGroup?.map((button, idx) => {
                     const { title, children, ...buttonProps } = button;
                     return (
-                      <Button.Chakra key={idx} {...buttonProps}>
+                      <Button key={idx} {...buttonProps}>
                         {title || children}
-                      </Button.Chakra>
+                      </Button>
                     );
                   })}
                 </div>