@hsu-react/ui 1.0.0 → 2.0.0

package/es/components/Input/Number/index.module.scss

@@ -1,78 +1,51 @@
 .inputNumberWrapper {
-  position: relative;
-
   display: inline-flex;
 
   width: 100%;
   height: 100%;
+  // 父级没有确定高度时 height:100% 退化成 auto，控件就变成内容撑高：
+  // 内层 32 的行高 + 1px 上下边框 = 34，比其他控件高 2px。给个下限兜住，
+  // 与 Select 外框的处理一致。
+  min-height: var(--vita-control-height);
 
-  .antdInput {
+  .compact {
     width: 100%;
     height: 100%;
+    min-height: inherit;
+  }
 
-    :global(.ant-input-number-wrapper) {
-      height: 100%;
-      min-height: inherit;
-
-      > :global(.ant-input-number),
-      > :global(.ant-input-number-affix-wrapper) {
-        height: 100%;
-        min-height: inherit;
-      }
-
-      > :global(.ant-input-number) {
-        > :global(.ant-input-number-input-wrap) {
-          height: 100%;
-          min-height: inherit;
+  .antdInput {
+    width: 100%;
+    height: 100%;
+    min-height: inherit;
 
-          > :global(.ant-input-number-input) {
-            height: 100%;
-            min-height: inherit;
-          }
-        }
-      }
-    }
+    // With `addonAfter` the input sits inside a Space.Compact cell, so it must still stretch.
+    flex: 1;
 
-    > :global(.ant-input-number-input-wrap) {
+    // 这里刻意不再往下传 min-height。传下去会把内层输入框的内容盒撑到 32，
+    // 外层 .ant-input-number 再加 1px 上下边框就变成 34，比其他控件高 2px。
+    // 高度下限由外层这个带边框的元素自己兜（border-box，正好 32）。
+    :global(.ant-input-number-input-wrap),
+    :global(.ant-input-number-input) {
       height: 100%;
-      min-height: inherit;
-
-      > :global(.ant-input-number-input) {
-        height: 100%;
-      }
-    }
-  }
-
-  &.inputNumberWrapperClear {
-    input {
-      padding-right: 33px;
     }
   }
 
+  // Rides antd's `suffix` slot, so it needs no positioning of its own — see index.tsx for why the
+  // previous absolute-positioned version had to measure the addon's width.
+  //
+  // antd sets `pointer-events: none` on `.ant-input-number-suffix` so decorative content (units,
+  // status icons) lets clicks fall through to the input. This one is a button, so it opts back in.
   .clearIcon {
-    position: absolute;
-    right: 11px;
-    top: 50%;
-    transform: translateY(-50%);
+    pointer-events: auto;
+
     cursor: pointer;
-    color: var(--cf-text-3);
+    color: var(--vita-subtle-foreground);
     font-size: 14px;
-    z-index: 1;
     transition: color 0.3s;
 
     &:hover {
-      color: var(--cf-text-2);
-    }
-  }
-
-  // Adjust the clear icon position when addonAfter is present
-  // Ant Design's addonAfter generates :global(.ant-input-number-group-addon)
-  // The clear icon needs to shift left to avoid overlapping the addon
-  // Use a CSS variable to set the addon width dynamically; the default 60px is a reasonable estimate
-  // JS computes the actual width and sets the CSS variable to override it
-  &.hasAddonAfter {
-    .clearIcon {
-      right: calc(11px + var(--addon-after-width, 60px));
+      color: var(--vita-muted-foreground);
     }
   }
 }

package/es/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/es/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/es/components/Input/index.d.ts

@@ -1,4 +1,4 @@
-import { InputProps as AntdInputProps, InputRef, TooltipProps } from "antd";
+import { Input as AntdInput, InputProps as AntdInputProps, InputRef, TooltipProps } from "antd";
 import { InputNumberProps } from "./Number";
 import { PasswordProps } from "./Password";
 import React from "react";
@@ -19,6 +19,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;
 }
 declare const Input: InputFC;
 export default Input;

package/es/components/Input/index.js

@@ -187,4 +187,6 @@ Input.TextArea = TextArea;
 Input.Password = Password;
 Input.Number = InputNumber;
 Input.Range = RangeInput;
+// antd v6 新增的验证码输入框，原样透出
+Input.OTP = AntdInput.OTP;
 export default Input;

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

@@ -16,7 +16,21 @@ var loadMermaid = function loadMermaid() {
     mermaidPromise = import("mermaid").then(function (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/es/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/es/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/es/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/es/components/Modal/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["moveable", "className", "classNames", "open", "onCancel", "onOk", "afterClose", "edgeDetection", "full", "destroyOnClose", "footer", "title", "titleButtonGroup"];
+var _excluded = ["moveable", "className", "classNames", "open", "onCancel", "onOk", "afterClose", "edgeDetection", "full", "destroyOnClose", "destroyOnHidden", "footer", "title", "titleButtonGroup"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -12,11 +12,12 @@ import { Modal as AntdModal } from "antd";
 import styles from "./index.module.scss";
 import { useModalElements, useModalDrag } from "./_hooks";
 import Button from "../Button";
+import { mergeSemantic } from "../../utils/semantic";
+import { modalFuncs } from "../../feedback";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Modal = function Modal(props) {
-  var _classNames$header, _classNames$content, _classNames$body, _classNames$footer;
   var _props$moveable = props.moveable,
     moveable = _props$moveable === void 0 ? true : _props$moveable,
     className = props.className,
@@ -29,8 +30,9 @@ var Modal = function Modal(props) {
     edgeDetection = _props$edgeDetection === void 0 ? true : _props$edgeDetection,
     _props$full = props.full,
     full = _props$full === void 0 ? false : _props$full,
-    _props$destroyOnClose = props.destroyOnClose,
-    destroyOnClose = _props$destroyOnClose === void 0 ? true : _props$destroyOnClose,
+    destroyOnClose = props.destroyOnClose,
+    _props$destroyOnHidde = props.destroyOnHidden,
+    destroyOnHidden = _props$destroyOnHidde === void 0 ? destroyOnClose !== null && destroyOnClose !== void 0 ? destroyOnClose : true : _props$destroyOnHidde,
     footer = props.footer,
     title = props.title,
     titleButtonGroup = props.titleButtonGroup,
@@ -74,22 +76,26 @@ var Modal = function Modal(props) {
         })
       })]
     }) : title,
-    destroyOnClose: destroyOnClose,
+    destroyOnHidden: destroyOnHidden,
     open: open,
     onCancel: handleCancel,
     onOk: handleOk,
     className: "".concat(styles.Modal, " ").concat(className, " ").concat(full ? styles.full : ""),
-    classNames: _objectSpread(_objectSpread({}, classNames), {}, {
-      header: "".concat(cls, " ").concat(styles.header, " ").concat((_classNames$header = classNames === null || classNames === void 0 ? void 0 : classNames.header) !== null && _classNames$header !== void 0 ? _classNames$header : "", " ").concat(moveable ? styles.moveable : ""),
-      content: "".concat(styles.content, " ").concat((_classNames$content = classNames === null || classNames === void 0 ? void 0 : classNames.content) !== null && _classNames$content !== void 0 ? _classNames$content : ""),
-      body: "".concat(styles.body, " ").concat((_classNames$body = classNames === null || classNames === void 0 ? void 0 : classNames.body) !== null && _classNames$body !== void 0 ? _classNames$body : ""),
-      footer: "".concat(styles.footer, " ").concat((_classNames$footer = classNames === null || classNames === void 0 ? void 0 : classNames.footer) !== null && _classNames$footer !== void 0 ? _classNames$footer : "", " ").concat(footer === false ? styles.noFooter : "")
+    classNames: mergeSemantic(classNames, function (outer) {
+      var _outer$header, _outer$container, _outer$body, _outer$footer;
+      return _objectSpread(_objectSpread({}, outer), {}, {
+        header: "".concat(cls, " ").concat(styles.header, " ").concat((_outer$header = outer.header) !== null && _outer$header !== void 0 ? _outer$header : "", " ").concat(moveable ? styles.moveable : ""),
+        // v5 called this slot `content`; v6 renamed it to `container`
+        container: "".concat(styles.content, " ").concat((_outer$container = outer.container) !== null && _outer$container !== void 0 ? _outer$container : ""),
+        body: "".concat(styles.body, " ").concat((_outer$body = outer.body) !== null && _outer$body !== void 0 ? _outer$body : ""),
+        footer: "".concat(styles.footer, " ").concat((_outer$footer = outer.footer) !== null && _outer$footer !== void 0 ? _outer$footer : "", " ").concat(footer === false ? styles.noFooter : "")
+      });
     }),
     footer: footer,
     afterClose: function afterClose() {
       _afterClose === null || _afterClose === void 0 || _afterClose();
       resetModal();
-      if (destroyOnClose) {
+      if (destroyOnHidden) {
         setModal(null);
         setModalHeader(null);
         setOriginalStyle(null);
@@ -97,4 +103,18 @@ var Modal = function Modal(props) {
     }
   }));
 };
+
+/**
+ * 确认框。签名与 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/es/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/es/components/Operate/index.js

@@ -209,7 +209,9 @@ var Operate = function Operate(props) {
         }
         return buttonContent;
       }), isOverflow && hiddenItems.length > 0 && /*#__PURE__*/_jsx(Dropdown, {
-        overlayClassName: styles.menu,
+        classNames: {
+          root: styles.menu
+        },
         placement: "bottom",
         menu: {
           items: menuItems

package/es/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;