@hsu-react/ui 1.0.0 → 2.0.1

package/lib/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/lib/components/Markdown/Views/MermaidBlock.js

@@ -17,7 +17,21 @@ const loadMermaid = () => {
     mermaidPromise = Promise.resolve().then(() => _interopRequireWildcard(require("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/lib/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/lib/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/lib/components/Modal/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ModalProps as AntdModalProps } from "antd";
+import { Modal as AntdModal, ModalProps as AntdModalProps } from "antd";
 import { ButtonProps } from "../Button";
 export interface ModalProps extends AntdModalProps {
     moveable?: boolean;
@@ -7,5 +7,15 @@ export interface ModalProps extends AntdModalProps {
     full?: boolean;
     titleButtonGroup?: ButtonProps[];
 }
-declare const Modal: React.FC<ModalProps>;
+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;
+}
+declare const Modal: ModalFC;
 export default Modal;

package/lib/components/Modal/index.js

@@ -9,6 +9,8 @@ var _antd = require("antd");
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 var _hooks = require("./_hooks");
 var _Button = _interopRequireDefault(require("../Button"));
+var _semantic = require("../../utils/semantic");
+var _feedback = require("../../feedback");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Modal = props => {
@@ -22,7 +24,10 @@ const Modal = 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,
@@ -68,23 +73,24 @@ const Modal = props => {
         }, index))
       })]
     }) : title,
-    destroyOnClose: destroyOnClose,
+    destroyOnHidden: destroyOnHidden,
     open: open,
     onCancel: handleCancel,
     onOk: handleOk,
     className: `${_indexModule.default.Modal} ${className} ${full ? _indexModule.default.full : ""}`,
-    classNames: {
-      ...classNames,
-      header: `${cls} ${_indexModule.default.header} ${classNames?.header ?? ""} ${moveable ? _indexModule.default.moveable : ""}`,
-      content: `${_indexModule.default.content} ${classNames?.content ?? ""}`,
-      body: `${_indexModule.default.body} ${classNames?.body ?? ""}`,
-      footer: `${_indexModule.default.footer} ${classNames?.footer ?? ""} ${footer === false ? _indexModule.default.noFooter : ""}`
-    },
+    classNames: (0, _semantic.mergeSemantic)(classNames, outer => ({
+      ...outer,
+      header: `${cls} ${_indexModule.default.header} ${outer.header ?? ""} ${moveable ? _indexModule.default.moveable : ""}`,
+      // v5 called this slot `content`; v6 renamed it to `container`
+      container: `${_indexModule.default.content} ${outer.container ?? ""}`,
+      body: `${_indexModule.default.body} ${outer.body ?? ""}`,
+      footer: `${_indexModule.default.footer} ${outer.footer ?? ""} ${footer === false ? _indexModule.default.noFooter : ""}`
+    })),
     footer: footer,
     afterClose: () => {
       afterClose?.();
       resetModal();
-      if (destroyOnClose) {
+      if (destroyOnHidden) {
         setModal(null);
         setModalHeader(null);
         setOriginalStyle(null);
@@ -92,4 +98,18 @@ const Modal = props => {
     }
   });
 };
+
+/**
+ * 确认框。签名与 antd 一致，但**会跟随主题** —— 指向的是 ../feedback 里的代理，
+ * 输出渲染在 ConfigProvider 内的 holder 里，而不是 antd 那个脱离 React 树的静态方法。
+ * 没挂 ConfigProvider 时自动回退到 antd 静态方法（功能正常，不跟随主题）。
+ */
+Modal.confirm = _feedback.modalFuncs.confirm;
+Modal.info = _feedback.modalFuncs.info;
+Modal.success = _feedback.modalFuncs.success;
+Modal.error = _feedback.modalFuncs.error;
+Modal.warning = _feedback.modalFuncs.warning;
+Modal.useModal = _antd.Modal.useModal;
+Modal.destroyAll = _antd.Modal.destroyAll;
+Modal.config = _antd.Modal.config;
 var _default = exports.default = Modal;

package/lib/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/lib/components/Operate/index.js

@@ -192,7 +192,9 @@ const Operate = props => {
         }
         return buttonContent;
       }), isOverflow && hiddenItems.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Dropdown, {
-        overlayClassName: _indexModule.default.menu,
+        classNames: {
+          root: _indexModule.default.menu
+        },
         placement: "bottom",
         menu: {
           items: menuItems

package/lib/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/lib/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/lib/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/lib/components/Panel/IframePanel/index.js

@@ -29,7 +29,9 @@ const IframePanel = props => {
       children: children
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Spin, {
       spinning: spinning,
-      wrapperClassName: _indexModule.default.spin,
+      classNames: {
+        root: _indexModule.default.spin
+      },
       size: "large",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
         ...coreProps,

package/lib/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/lib/components/Panel/ListPanel/ListModalPanel/index.d.ts

@@ -1,10 +1,10 @@
 import React, { ReactNode } from "react";
 import { SearchModeKeys, SearchModePropsMap } from "../../../Search";
 import { TableProps } from "../../../Table";
-import { ChakraButtonProps as BasicButtonProps } from "../../../Button";
+import { ButtonProps as HsuButtonProps } from "../../../Button";
 import { TabBarProps } from "../../../TabBar";
 import { ModalProps } from "../../../Modal";
-interface ButtonProps extends Omit<BasicButtonProps, "children" | "title"> {
+interface ButtonProps extends Omit<HsuButtonProps, "children" | "title"> {
     title?: ReactNode;
     children?: ReactNode;
 }

package/lib/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/lib/components/Panel/ListPanel/_components/ColumnMgt/index.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _antd = require("antd");
+var _semantic = require("../../../../../utils/semantic");
+var _feedback = require("../../../../../feedback");
 var _react = _interopRequireWildcard(require("react"));
 var _Table = _interopRequireWildcard(require("../../../../Table"));
 var _Input = _interopRequireDefault(require("../../../../Input"));
@@ -36,17 +37,9 @@ const ColumnMgt = props => {
     min = 1
   } = columnCount;
   const {
-    classNames = {},
+    classNames,
     ...modalConfig
   } = modalProps;
-  const {
-    header,
-    body,
-    footer,
-    mask,
-    content,
-    wrapper
-  } = classNames;
   const [_dataSource, setDataSource] = (0, _react.useState)([]);
   const {
     checkPermission
@@ -211,14 +204,10 @@ const ColumnMgt = props => {
     centered: true,
     width: "40%",
     className: `${_indexModule.default.ColumnMgt} ${className ?? ""}`,
-    classNames: {
-      header: `${header ?? ""}`,
-      body: `${_indexModule.default.body} ${body ?? ""}`,
-      footer: `${footer ?? ""}`,
-      mask: `${mask ?? ""}`,
-      content: `${content ?? ""}`,
-      wrapper: `${wrapper ?? ""}`
-    },
+    classNames: (0, _semantic.mergeSemantic)(classNames, outer => ({
+      ...outer,
+      body: `${_indexModule.default.body} ${outer.body ?? ""}`
+    })),
     title: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: _indexModule.default.title,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -259,10 +248,10 @@ const ColumnMgt = props => {
       if (newDataSource?.length) {
         const showColumns = newDataSource.filter(i => !i.hidden && i.dataIndex).length;
         if (showColumns < min) {
-          return _antd.message.error(`至少选择${min}项显示列`);
+          return _feedback.message.error(`至少选择${min}项显示列`);
         }
         if (max && showColumns > max) {
-          return _antd.message.error(`最多选择${max}项显示列`);
+          return _feedback.message.error(`最多选择${max}项显示列`);
         }
         const selectedDataIndexes = newDataSource.filter(item => !item.hidden && item.dataIndex)?.map(item => item.dataIndex);
         onSelectionChange?.(selectedDataIndexes, _dataSource);

package/lib/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/lib/components/Panel/ListPanel/_components/ToolBar/index.js

@@ -59,7 +59,7 @@ const ToolBar = props => {
               children,
               ...buttonProps
             } = button;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default.Chakra, {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
               ...buttonProps,
               children: title || children
             }, idx);

package/lib/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/lib/components/Panel/ListPanel/index.d.ts

@@ -2,11 +2,11 @@ import { BreadcrumbProps } from "antd";
 import React, { ReactNode } from "react";
 import { SearchModeKeys, SearchModePropsMap } from "../../Search";
 import { TableProps } from "../../Table";
-import { ChakraButtonProps as BasicButtonProps } from "../../Button";
+import { ButtonProps as HsuButtonProps } from "../../Button";
 import { TabBarProps } from "../../TabBar";
 import { TreeProps } from "../../Tree";
 import { ListModalPanelProps } from "./ListModalPanel";
-interface ButtonProps extends Omit<BasicButtonProps, "children" | "title"> {
+interface ButtonProps extends Omit<HsuButtonProps, "children" | "title"> {
     title?: ReactNode;
     children?: ReactNode;
 }

package/lib/components/Panel/ListPanel/index.module.scss

@@ -51,14 +51,14 @@
 
   &:hover {
     &::before {
-      background: color-mix(in srgb, var(--primary-color) 45%, transparent);
+      background: color-mix(in srgb, var(--vita-primary) 45%, transparent);
     }
   }
 }
 
 .resizing {
   &::before {
-    background: var(--primary-color);
+    background: var(--vita-primary);
   }
 }
 
@@ -89,11 +89,11 @@
     min-height: 0px;
     padding: 10px;
 
-    background: var(--cf-surface);
+    background: var(--vita-surface);
 
     // CF style: outlined white card + small border radius, no shadow
-    border-radius: 8px;
-    border: 1px solid var(--cf-border);
+    border-radius: var(--vita-radius);
+    border: 1px solid var(--vita-border);
     box-shadow: none;
   }
 
@@ -111,22 +111,22 @@
 
     > div {
       margin-left: 0 !important;
-      border-radius: 6px !important;
+      border-radius: var(--vita-radius-sm) !important;
 
-      background: var(--cf-surface);
+      background: var(--vita-surface);
     }
   }
 
   &.hasHeaderTabBar {
     &:not(:has(.search)) {
       .headerTabBarContainer {
-        border-radius: 8px;
+        border-radius: var(--vita-radius);
       }
     }
 
     &.legacyNoSearch {
       .headerTabBarContainer {
-        border-radius: 8px;
+        border-radius: var(--vita-radius);
       }
     }
   }