@hsu-react/ui 0.0.25 → 2.0.0

package/lib/components/FormItem/FormSlider/index.module.scss

@@ -9,7 +9,7 @@
 
   box-shadow: none !important;
 
-  border-radius: 4px;
+  border-radius: var(--vita-radius-xs);
 
   background-color: transparent !important;
 }

package/lib/components/FormItem/FormUpload/FormImage/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _antd = require("antd");
+var _feedback = require("../../../../feedback");
 var _ItemContainer = _interopRequireDefault(require("../../ItemContainer"));
 var _react = _interopRequireWildcard(require("react"));
 var _Upload = _interopRequireDefault(require("../../../Upload"));
@@ -49,13 +49,13 @@ const FormImage = props => {
   }) => {
     fileList?.forEach((file, index) => {
       if (file.status === "error") {
-        !beforeUpload && _antd.notification.error({
+        !beforeUpload && _feedback.notification.error({
           message: file.error?.message || (en ? "Upload failed" : "上传失败")
         });
         fileList.splice(index, 1);
       } else if (file.response) {
         if (file.response?.code !== 0 && file.response?.code !== 200 && file.response?.code !== undefined) {
-          _antd.notification.error({
+          _feedback.notification.error({
             message: file.response.msg
           });
           fileList.splice(index, 1);

package/lib/components/FormItem/FormUpload/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _antd = require("antd");
+var _feedback = require("../../../feedback");
 var _FormImage = _interopRequireDefault(require("./FormImage"));
 var _ItemContainer = _interopRequireDefault(require("../ItemContainer"));
 var _Upload = _interopRequireDefault(require("../../Upload"));
@@ -50,13 +51,13 @@ const FormUpload = props => {
   }) => {
     fileList?.forEach((file, index) => {
       if (file.status === "error") {
-        !beforeUpload && _antd.notification.error({
+        !beforeUpload && _feedback.notification.error({
           message: file.error?.message || (en ? "Upload failed" : "上传失败")
         });
         fileList.splice(index, 1);
       } else if (file.response) {
         if (file.response?.code !== 0 && file.response?.code !== 200 && file.response?.code !== undefined) {
-          _antd.notification.error({
+          _feedback.notification.error({
             message: file.response.msg
           });
           fileList.splice(index, 1);

package/lib/components/FormItem/FormUpload/index.module.scss

@@ -5,7 +5,7 @@
     height: max-content;
 
     .upBtn {
-      height: 32px;
+      height: var(--vita-control-height);
     }
   }
 
@@ -20,12 +20,12 @@
       cursor: not-allowed;
 
       > div {
-        background-color: var(--cf-subtle);
+        background-color: var(--vita-muted);
 
-        border-color: var(--cf-border);
+        border-color: var(--vita-border);
 
         > span {
-          color: var(--cf-text-3) !important;
+          color: var(--vita-subtle-foreground) !important;
         }
       }
     }
@@ -47,7 +47,7 @@
       width: max-content;
       height: 46px;
 
-      border: 1px solid var(--cf-border);
+      border: 1px solid var(--vita-border);
 
       > span {
         &:first-child {
@@ -61,9 +61,9 @@
           font-family: Noto Sans SC;
           font-size: 18px;
           font-weight: 500;
-          color: var(--cf-text);
+          color: var(--vita-foreground);
 
-          border-right: 1px solid var(--cf-border);
+          border-right: 1px solid var(--vita-border);
         }
 
         &:nth-child(2) {
@@ -77,7 +77,7 @@
           font-family: Noto Sans SC;
           font-size: 18px;
           font-weight: 500;
-          color: var(--cf-text-2);
+          color: var(--vita-muted-foreground);
 
           > a {
             white-space: nowrap;
@@ -93,33 +93,33 @@
       font-family: Noto Sans SC;
       font-size: 18px;
       font-weight: 500;
-      color: var(--cf-text-2);
+      color: var(--vita-muted-foreground);
     }
   }
 
   &:global(.ant-upload-drag) {
     height: 180px;
 
-    border-radius: 8px;
-    border: 1px dashed color-mix(in srgb, var(--primary-color) 60%, transparent);
-    background: color-mix(in srgb, var(--primary-color) 2%, transparent);
+    border-radius: var(--vita-radius);
+    border: 1px dashed color-mix(in srgb, var(--vita-primary) 60%, transparent);
+    background: color-mix(in srgb, var(--vita-primary) 2%, transparent);
 
     transition: all 0.3s;
 
     &:hover {
-      background: color-mix(in srgb, var(--primary-color) 8%, transparent);
+      background: color-mix(in srgb, var(--vita-primary) 8%, transparent);
 
-      border-color: var(--primary-color);
+      border-color: var(--vita-primary);
     }
 
     .uploadIcon {
       font-size: 40px;
-      color: var(--primary-color);
+      color: var(--vita-primary);
     }
 
     .uploadText {
       font-size: 14px;
-      color: var(--cf-text);
+      color: var(--vita-foreground);
 
       > div:first-child {
         margin: 16px 0 8px;
@@ -127,7 +127,7 @@
 
       > div:last-child {
         font-size: 12px;
-        color: var(--cf-text-2);
+        color: var(--vita-muted-foreground);
       }
     }
   }

package/lib/components/FormItem/ItemContainer/index.js

@@ -85,10 +85,10 @@ const ItemContainer = props => {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
         arrow: false,
         placement: "top",
-        color: "var(--cf-subtle)",
+        color: "var(--vita-muted)",
         styles: {
-          body: {
-            color: "var(--cf-text)",
+          container: {
+            color: "var(--vita-foreground)",
             padding: "6px 12px"
           }
         },
@@ -100,7 +100,7 @@ const ItemContainer = props => {
             e.stopPropagation();
           },
           fontSize: 16,
-          color: "var(--cf-text-3)"
+          color: "var(--vita-subtle-foreground)"
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: (0, _classnames.default)(_indexModule.default.tipsIconNode, iconClassName),
           onClick: e => {

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

@@ -24,9 +24,12 @@ const InputNumber = props => {
     disabled,
     allowClear = true,
     addonAfter,
+    suffix,
     wrapperClassName,
     ...inputConfig
   } = props;
+  // antd v6 types InputNumber's ref as `InputNumberRef`, which extends `HTMLInputElement` — so
+  // `getRef` keeps handing consumers an `HTMLInputElement` exactly as before.
   const ref = (0, _react.useRef)(null);
   const wrapperRef = (0, _react.useRef)(null);
 
@@ -61,38 +64,6 @@ const InputNumber = props => {
   (0, _react.useEffect)(() => {
     getRef?.(ref.current);
   }, [getRef]);
-
-  // Dynamically compute the width of addonAfter and set the CSS variable
-  (0, _react.useEffect)(() => {
-    if (addonAfter && wrapperRef.current) {
-      const updateAddonWidth = () => {
-        const addonElement = wrapperRef.current?.querySelector(".ant-input-number-group-addon");
-        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");
-        if (addonElement) {
-          resizeObserver.observe(addonElement);
-        }
-      }
-      return () => {
-        cancelAnimationFrame(rafId);
-        resizeObserver.disconnect();
-      };
-    }
-  }, [addonAfter]);
   const handleClear = e => {
     e.stopPropagation();
     setValue("");
@@ -100,29 +71,42 @@ const InputNumber = props => {
     onChange?.("");
   };
   const showClear = allowClear && _value !== "" && _value !== undefined && !disabled;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    ref: wrapperRef,
-    className: (0, _classnames.default)(_indexModule.default.inputNumberWrapper, wrapperClassName, {
-      [_indexModule.default.inputNumberWrapperClear]: showClear,
-      [_indexModule.default.hasAddonAfter]: !!addonAfter
+  const input = /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.InputNumber, {
+    ref: ref,
+    value: _value,
+    onChange: e => {
+      const newValue = e === null || e === undefined ? "" : (typeof e === "number" ? e : e || "").toString();
+      setValue(newValue);
+    },
+    className: (0, _classnames.default)(_indexModule.default.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: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [showClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseCircleFilled, {
+        className: _indexModule.default.clearIcon,
+        onClick: handleClear
+      }), suffix]
     }),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.InputNumber, {
-      ref: ref,
-      value: _value,
-      onChange: e => {
-        const newValue = e === null || e === undefined ? "" : (typeof e === "number" ? e : e || "").toString();
-        setValue(newValue);
-      },
-      className: (0, _classnames.default)(_indexModule.default.antdInput, className),
-      controls: false,
-      disabled: disabled,
-      addonAfter: addonAfter,
-      ...inputConfig,
-      stringMode: true
-    }), showClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CloseCircleFilled, {
-      className: _indexModule.default.clearIcon,
-      onClick: handleClear
-    })]
+    ...inputConfig,
+    stringMode: true
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: wrapperRef,
+    className: (0, _classnames.default)(_indexModule.default.inputNumberWrapper, wrapperClassName),
+    children: addonAfter ?
+    /*#__PURE__*/
+    // antd v6 deprecated `addonAfter` in favour of Space.Compact + Space.Addon
+    (0, _jsxRuntime.jsxs)(_antd.Space.Compact, {
+      className: _indexModule.default.compact,
+      children: [input, /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space.Addon, {
+        children: addonAfter
+      })]
+    }) : input
   });
 };
 var _default = exports.default = InputNumber;

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

@@ -171,4 +171,6 @@ Input.TextArea = _TextArea.default;
 Input.Password = _Password.default;
 Input.Number = _Number.default;
 Input.Range = _Range.default;
+// antd v6 新增的验证码输入框，原样透出
+Input.OTP = _antd.Input.OTP;
 var _default = exports.default = Input;

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