@hsu-react/ui 0.0.25 → 2.0.0

package/src/components/FormItem/ItemContainer/index.module.scss

@@ -1,10 +1,12 @@
+@use "../../../styles/responsive" as r;
+
 .formItem {
   --label-width: auto;
   --label-height: max-content;
-  --label-min-height: 32px;
+  --label-min-height: var(--vita-control-height);
   --input-width: 100%;
   --input-height: max-content;
-  --input-min-height: 32px;
+  --input-min-height: var(--vita-control-height);
   --input-horizontal-min-width: 0px;
   --input-horizontal-flex-grow: 1;
 
@@ -120,7 +122,7 @@
         justify-content: flex-end;
         flex-basis: 100%;
 
-        color: var(--cf-text-2);
+        color: var(--vita-muted-foreground);
         font-size: 14px;
         white-space: pre-wrap;
       }
@@ -185,7 +187,7 @@
             margin-inline-start: 0px;
             margin-inline-end: 4px;
 
-            color: var(--cf-error);
+            color: var(--vita-error);
             font-size: 14px;
             font-family: SimSun, sans-serif;
             line-height: 1;
@@ -201,7 +203,7 @@
             margin-inline-start: 0px;
             margin-inline-end: 4px;
 
-            color: var(--cf-error);
+            color: var(--vita-error);
             font-size: 14px;
             font-family: SimSun, sans-serif;
             line-height: 1;
@@ -226,7 +228,7 @@
           margin-inline-start: 4px;
           margin-inline-end: 0px;
 
-          color: var(--cf-error);
+          color: var(--vita-error);
           font-size: 14px;
           font-family: SimSun, sans-serif;
           line-height: 1;
@@ -255,7 +257,7 @@
             margin-inline-start: 4px;
             margin-inline-end: 0px;
 
-            color: var(--cf-error);
+            color: var(--vita-error);
             font-size: 14px;
             font-family: SimSun, sans-serif;
             line-height: 1;
@@ -304,6 +306,30 @@
       }
     }
 
+    // 小屏改成标签在上：水平布局是「固定宽标签 + 有最小宽的输入框」，两者相加在窄视口里
+    // 放不下，nowrap 会把整行顶出屏幕。这是响应式表单的标准处理。
+    @include r.down(md) {
+      :global(.ant-form-item-row) {
+        flex-direction: column;
+        flex-wrap: wrap;
+        row-gap: 4px;
+
+        height: max-content;
+
+        :global(.ant-form-item-label) {
+          width: 100%;
+          text-align: start;
+          margin-right: 0px !important;
+          padding-bottom: 0px;
+        }
+
+        :global(.ant-form-item-control) {
+          width: 100%;
+          min-width: 0;
+        }
+      }
+    }
+
     &.start {
       :global(.ant-form-item-control-input-content) {
         text-align: left;

package/src/components/FormItem/ItemContainer/index.tsx

@@ -114,8 +114,8 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
         <Tooltip
           arrow={false}
           placement="top"
-          color="var(--cf-subtle)"
-          styles={{ body: { color: "var(--cf-text)", padding: "6px 12px" } }}
+          color="var(--vita-muted)"
+          styles={{ container: { color: "var(--vita-foreground)", padding: "6px 12px" } }}
           {...tipsConfig}
         >
           {typeof icon === "string" ? (
@@ -126,7 +126,7 @@ const ItemContainer: React.FC<ItemContainerProps> = (props) => {
                 e.stopPropagation();
               }}
               fontSize={16}
-              color="var(--cf-text-3)"
+              color="var(--vita-subtle-foreground)"
             />
           ) : (
             <div

package/src/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/src/components/Input/Number/index.tsx

@@ -1,6 +1,7 @@
 import {
   InputNumber as AntdInputNumber,
   InputNumberProps as AntdInputNumberProps,
+  Space,
 } from "antd";
 import React, { useEffect, useRef, useState } from "react";
 import { CloseCircleFilled } from "@ant-design/icons";
@@ -8,6 +9,7 @@ import { CloseCircleFilled } from "@ant-design/icons";
 import classNames from "classnames";
 import styles from "./index.module.scss";
 import { useDebounceEffect } from "ahooks";
+import type { InputNumberRef } from "../../../types/antd";
 
 export interface InputNumberProps extends Omit<
   AntdInputNumberProps,
@@ -30,10 +32,13 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
     disabled,
     allowClear = true,
     addonAfter,
+    suffix,
     wrapperClassName,
     ...inputConfig
   } = props;
-  const ref = useRef<HTMLInputElement>(null);
+  // antd v6 types InputNumber's ref as `InputNumberRef`, which extends `HTMLInputElement` — so
+  // `getRef` keeps handing consumers an `HTMLInputElement` exactly as before.
+  const ref = useRef<InputNumberRef>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   // On initialization, prefer value, then fall back to defaultValue
@@ -88,47 +93,6 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
     getRef?.(ref.current);
   }, [getRef]);
 
-  // Dynamically compute the width of addonAfter and set the CSS variable
-  useEffect(() => {
-    if (addonAfter && wrapperRef.current) {
-      const updateAddonWidth = () => {
-        const addonElement = wrapperRef.current?.querySelector(
-          ".ant-input-number-group-addon",
-        ) as HTMLElement | null;
-        if (addonElement && addonElement.offsetWidth > 0) {
-          wrapperRef.current?.style.setProperty(
-            "--addon-after-width",
-            `${addonElement.offsetWidth}px`,
-          );
-        }
-      };
-
-      // Use requestAnimationFrame to ensure the DOM has rendered before computing
-      const rafId = requestAnimationFrame(() => {
-        updateAddonWidth();
-      });
-
-      // Observe window and element size changes to recompute
-      const resizeObserver = new ResizeObserver(() => {
-        updateAddonWidth();
-      });
-
-      if (wrapperRef.current) {
-        const addonElement = wrapperRef.current.querySelector(
-          ".ant-input-number-group-addon",
-        ) as HTMLElement | null;
-        if (addonElement) {
-          resizeObserver.observe(addonElement);
-        }
-      }
-
-      return () => {
-        cancelAnimationFrame(rafId);
-        resizeObserver.disconnect();
-      };
-    }
-  }, [addonAfter]);
-
   const handleClear = (e: React.MouseEvent) => {
     e.stopPropagation();
     setValue("");
@@ -139,33 +103,53 @@ const InputNumber: React.FC<InputNumberProps> = (props) => {
   const showClear =
     allowClear && _value !== "" && _value !== undefined && !disabled;
 
+  const input = (
+    <AntdInputNumber
+      ref={ref}
+      value={_value}
+      onChange={(e) => {
+        const newValue =
+          e === null || e === undefined
+            ? ""
+            : (typeof e === "number" ? e : e || "").toString();
+        setValue(newValue);
+      }}
+      className={classNames(styles.antdInput, className)}
+      controls={false}
+      disabled={disabled}
+      // The clear button used to be absolutely positioned over the wrapper, which meant its offset
+      // had to be recomputed from the addon's measured width (a rAF + ResizeObserver dance writing
+      // `--addon-after-width`). Riding antd's own `suffix` slot instead puts it inside the input,
+      // so it can never collide with the addon and nothing needs measuring.
+      suffix={
+        <>
+          {showClear && (
+            <CloseCircleFilled
+              className={styles.clearIcon}
+              onClick={handleClear}
+            />
+          )}
+          {suffix}
+        </>
+      }
+      {...inputConfig}
+      stringMode
+    />
+  );
+
   return (
     <div
       ref={wrapperRef}
-      className={classNames(styles.inputNumberWrapper, wrapperClassName, {
-        [styles.inputNumberWrapperClear]: showClear,
-        [styles.hasAddonAfter]: !!addonAfter,
-      })}
+      className={classNames(styles.inputNumberWrapper, wrapperClassName)}
     >
-      <AntdInputNumber
-        ref={ref}
-        value={_value}
-        onChange={(e) => {
-          const newValue =
-            e === null || e === undefined
-              ? ""
-              : (typeof e === "number" ? e : e || "").toString();
-          setValue(newValue);
-        }}
-        className={classNames(styles.antdInput, className)}
-        controls={false}
-        disabled={disabled}
-        addonAfter={addonAfter}
-        {...inputConfig}
-        stringMode
-      />
-      {showClear && (
-        <CloseCircleFilled className={styles.clearIcon} onClick={handleClear} />
+      {addonAfter ? (
+        // antd v6 deprecated `addonAfter` in favour of Space.Compact + Space.Addon
+        <Space.Compact className={styles.compact}>
+          {input}
+          <Space.Addon>{addonAfter}</Space.Addon>
+        </Space.Compact>
+      ) : (
+        input
       )}
     </div>
   );

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);
     }
   }