@hsu-react/ui 1.0.0 → 2.0.1

package/src/components/Input/Range/index.module.scss

@@ -1,3 +1,5 @@
+@use "../../../styles/responsive" as r;
+
 .RangeContainer {
   display: flex;
   align-items: center;
@@ -47,7 +49,7 @@
       }
 
       > span {
-        color: var(--cf-text-3);
+        color: var(--vita-subtle-foreground);
 
         user-select: none;
 
@@ -56,9 +58,9 @@
 
       &.focused,
       &:hover {
-        border-color: var(--primary-color);
+        border-color: var(--vita-primary);
 
-        box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 10%, transparent);
+        box-shadow: var(--vita-focus-ring);
       }
     }
 
@@ -69,7 +71,7 @@
 
       transform: translateY(-50%);
 
-      color: var(--cf-text-3);
+      color: var(--vita-subtle-foreground);
 
       opacity: 0;
 
@@ -78,7 +80,16 @@
       transition: all 0.3s;
     }
 
-    &:hover {
+    // 同上：清除按钮在触屏上必须常驻，否则没有任何办法触发它。
+    @include r.hover {
+      &:hover {
+        .RangeClear {
+          opacity: 1;
+        }
+      }
+    }
+
+    @include r.touch {
       .RangeClear {
         opacity: 1;
       }

package/src/components/Input/TextArea/index.module.scss

@@ -10,23 +10,23 @@
   height: max-content;
 
   // CF style: outlined input control that follows the appearance theme
-  background: var(--cf-surface);
+  background: var(--vita-surface);
 
   border-width: 1px;
   border-style: solid;
-  border-color: var(--cf-border);
-  border-radius: 6px;
+  border-color: var(--vita-border);
+  border-radius: var(--vita-radius);
 
-  color: var(--cf-text);
+  color: var(--vita-foreground);
 
   transition: border-color 0.3s, box-shadow 0.3s;
 
   &.disabled:not(.text) {
-    background-color: var(--cf-subtle);
+    background-color: var(--vita-muted);
 
-    border-color: var(--cf-border);
+    border-color: var(--vita-border);
 
-    color: var(--cf-text-3) !important;
+    color: var(--vita-subtle-foreground) !important;
 
     cursor: not-allowed;
   }
@@ -38,7 +38,7 @@
 
     > textarea,
     > span {
-      color: var(--cf-text);
+      color: var(--vita-foreground);
 
       cursor: default;
     }
@@ -86,7 +86,7 @@
           position: relative;
           bottom: auto;
 
-          color: var(--cf-text-2);
+          color: var(--vita-muted-foreground);
           font-size: 14px;
         }
 
@@ -111,15 +111,15 @@
   }
 
   &:not(.hasError).focused {
-    border-color: var(--primary-color);
+    border-color: var(--vita-primary);
 
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 12%, transparent);
+    box-shadow: var(--vita-focus-ring);
   }
 
   &.hasError {
-    border-color: var(--cf-error);
+    border-color: var(--vita-error);
 
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cf-error) 6%, transparent);
+    box-shadow: var(--vita-focus-ring-error);
 
     :global(.ant-input-status-error) {
       border: none !important;

package/src/components/Input/index.md

@@ -148,6 +148,20 @@ export default () => {
 };
 ```
 
+## 验证码输入框
+
+`Input.OTP` 是 antd v6 新增的分格验证码输入框，原样透出。
+
+```tsx
+import React from "react";
+import { Input } from "@hsu-react/ui";
+
+export default () => <Input.OTP length={6} onChange={(v) => console.log(v)} />;
+```
+
+> 子组件一览：`Input.Search`、`Input.TextArea`、`Input.Password`、`Input.Number`、`Input.Range`、`Input.OTP`。
+> 前五个是本库封装（`Number` / `Range` 为本库独有），`OTP` 为 antd 原样透出。
+
 ## API
 
 在 [antd InputProps](https://ant.design/components/input-cn) 基础上扩展（并移除了 `onCompositionStart`、`onCompositionEnd`、`ref`，重写了 `onChange`）：

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

@@ -3,7 +3,7 @@
   height: 100%;
   // When the parent has no set height (height:100% resolves to auto), ensure a minimum height so the input is not squashed;
   // the inner .ant-input-wrapper / .ant-input inherit this value via min-height: inherit.
-  min-height: 32px;
+  min-height: var(--vita-control-height);
 
   :global(.ant-input-clear-icon) {
     font-size: 14px;

package/src/components/Input/index.tsx

@@ -34,6 +34,8 @@ interface InputFC extends React.FC<InputProps> {
   Password: React.FC<PasswordProps>;
   Number: React.FC<InputNumberProps>;
   Range: React.FC<RangeInputProps>;
+  /** antd v6 新增的验证码输入框 */
+  OTP: typeof AntdInput.OTP;
 }
 
 const Input: InputFC = (props) => {
@@ -219,5 +221,7 @@ Input.TextArea = TextArea;
 Input.Password = Password;
 Input.Number = InputNumber;
 Input.Range = RangeInput;
+// antd v6 新增的验证码输入框，原样透出
+Input.OTP = AntdInput.OTP;
 
 export default Input;

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

@@ -6,7 +6,7 @@
   width: 100%;
   height: 100%;
 
-  background: var(--cf-surface);
+  background: var(--vita-surface);
 
   border-radius: 10px;
 
@@ -26,12 +26,12 @@
   .mdEditor {
     height: 100%;
 
-    border-radius: 8px;
+    border-radius: var(--vita-radius);
 
     overflow: hidden;
 
     &.disabled {
-      background-color: var(--cf-subtle);
+      background-color: var(--vita-muted);
 
       cursor: no-drop;
 
@@ -46,7 +46,7 @@
           .section {
             textarea,
             .section-container {
-              background: var(--cf-subtle);
+              background: var(--vita-muted);
             }
           }
         }

package/src/components/Markdown/Views/MermaidBlock.tsx

@@ -10,7 +10,21 @@ const loadMermaid = () => {
     mermaidPromise = import("mermaid").then((m) => {
       m.default.initialize({
         startOnLoad: false,
-        securityLevel: "loose",
+        // mermaid 默认就是 strict，这里此前改成了 loose。改回来的原因：
+        //
+        // Markdown 渲染的是不可信内容 —— Chat 的用户消息、AI 回复、以及 FilePreview 打开的
+        // .md 文件，任何一处都能塞一段 ```mermaid。而 loose 恰好放开了两个交互面
+        // （mermaid 源码 chunk-ICXQ74PX / chunk-V7JOEXUC）：
+        //
+        //   formatUrl:    if (securityLevel !== "loose") return sanitizeUrl(url);
+        //   setClickFunc: if (securityLevel !== "loose") return;
+        //
+        // 即 loose 下 `click A "javascript:..."` 的 URL 不过 sanitizeUrl，
+        // `click A call fn()` 还能经 runFunc 沿 window[...] 调到任意全局函数。
+        // 图本身的标签文本倒是不受影响 —— 那条路径无论哪个 level 都会过 DOMPurify。
+        //
+        // strict 下这两条都关掉，图形渲染不受影响；本库也从未对外暴露过 mermaid 的交互能力。
+        securityLevel: "strict",
         theme: "neutral",
       });
       return m.default;

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

@@ -4,8 +4,8 @@
   padding: 12px;
   margin: 8px 0;
   background: #fff;
-  border: 1px solid var(--cf-border-weak);
-  border-radius: 8px;
+  border: 1px solid var(--vita-border-weak);
+  border-radius: var(--vita-radius);
   overflow-x: auto;
 
   svg {
@@ -17,8 +17,8 @@
 .mermaidFallback {
   margin: 8px 0;
   padding: 12px;
-  background: var(--cf-subtle);
-  border-radius: 8px;
+  background: var(--vita-muted);
+  border-radius: var(--vita-radius);
   overflow-x: auto;
 
   code {
@@ -28,7 +28,7 @@
 
 .artifact {
   margin: 8px 0;
-  border: 1px solid var(--cf-border-weak);
+  border: 1px solid var(--vita-border-weak);
   border-radius: 10px;
   overflow: hidden;
 
@@ -37,14 +37,14 @@
     align-items: center;
     justify-content: space-between;
     padding: 6px 12px;
-    background: var(--cf-subtle);
-    border-bottom: 1px solid var(--cf-border-weak);
+    background: var(--vita-muted);
+    border-bottom: 1px solid var(--vita-border-weak);
   }
 
   .artifactLang {
     font-size: 12px;
     font-weight: 600;
-    color: var(--cf-text-2);
+    color: var(--vita-muted-foreground);
   }
 
   .artifactTabs {
@@ -58,21 +58,21 @@
     border: none;
     border-radius: 999px;
     background: transparent;
-    color: var(--cf-text-2);
+    color: var(--vita-muted-foreground);
     cursor: pointer;
 
     &:hover {
-      background: var(--cf-row-hover);
+      background: var(--vita-hover);
     }
   }
 
   .artifactTabActive {
-    background: var(--cf-surface);
+    background: var(--vita-surface);
     color: #4f46e5;
-    box-shadow: var(--cf-shadow-1);
+    box-shadow: var(--vita-shadow-1);
 
     &:hover {
-      background: var(--cf-surface);
+      background: var(--vita-surface);
     }
   }
 

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 的行为一致，只是本组件在不传时多给了一层内部状态，容易让人以为「传了也能自己翻」