@hsu-react/ui 1.0.0 → 2.0.1

package/src/components/Form/index.md

@@ -157,6 +157,24 @@ export default () => {
 };
 ```
 
+## antd 原生成员
+
+除了上面三个本库封装的表单形态，`Form` 还原样透出了 antd 的成员，省得再单独 `import { Form } from "antd"`：
+
+```tsx | pure
+Form.Item          // antd 的 Form.Item
+Form.List
+Form.ErrorList
+Form.Provider
+Form.useForm
+Form.useWatch
+Form.useFormInstance
+```
+
+> **`Form.Item` 与顶层导出的 `FormItem` 不是一个东西。** `Form.Item` 是 antd 原生的，保持 antd 语义；
+> `FormItem` 是本库的增强版（label 宽度计算、tips 气泡、`hasPermi` 权限、按 `type` 自动生成 placeholder 等）。
+> 刻意不让 `Form.Item` 指向增强版，否则同名不同 API，出问题时很难排查。
+
 ## API
 
 `Form` 是一个对象，包含以下成员：

package/src/components/Form/index.tsx

@@ -9,14 +9,32 @@ interface FormType {
   Modal: React.FC<ModalFormProps>;
   Drawer: React.FC<DrawerFormProps>;
   Import: React.FC<ImportFormProps>;
+  /**
+   * antd 的 `Form.Item`，原样透出。
+   *
+   * 注意与库顶层导出的 `FormItem` 区分：那个是本库自己的增强版（带 label 宽度计算、
+   * tips、权限、按 type 生成 placeholder 等）。这里保持 antd 语义，避免同名不同 API。
+   */
+  Item: typeof AntdForm.Item;
+  List: typeof AntdForm.List;
+  ErrorList: typeof AntdForm.ErrorList;
+  Provider: typeof AntdForm.Provider;
   useForm: typeof AntdForm.useForm;
+  useWatch: typeof AntdForm.useWatch;
+  useFormInstance: typeof AntdForm.useFormInstance;
 }
 
 const Form: FormType = {
   Modal: ModalForm,
   Drawer: DrawerForm,
   Import: ImportForm,
+  Item: AntdForm.Item,
+  List: AntdForm.List,
+  ErrorList: AntdForm.ErrorList,
+  Provider: AntdForm.Provider,
   useForm: AntdForm.useForm,
+  useWatch: AntdForm.useWatch,
+  useFormInstance: AntdForm.useFormInstance,
 };
 
 export default Form;

package/src/components/FormItem/FormInput/FormPasswordStrength/index.module.scss

@@ -19,9 +19,9 @@
     height: 6px;
 
     border: 0;
-    border-radius: 6px;
+    border-radius: var(--vita-radius-sm);
 
-    background-color: var(--cf-border);
+    background-color: var(--vita-border);
   }
 
   /* When value is in [min, low] */
@@ -53,7 +53,7 @@
 
     background-color: transparent;
 
-    border-color: var(--cf-surface);
+    border-color: var(--vita-surface);
     border-style: solid;
     border-width: 0 5px;
   }

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

@@ -4,7 +4,7 @@
   display: flex;
   align-items: center;
 
-  color: var(--cf-text);
+  color: var(--vita-foreground);
   font-size: 14px;
 
   > label {
@@ -21,8 +21,8 @@
       > span:global(.ant-radio) {
         width: 24px;
         min-width: 24px;
-        height: 24px;
-        min-height: 24px;
+        height: var(--vita-control-height-sm);
+        min-height: var(--vita-control-height-sm);
 
         border-radius: 2px;
 
@@ -31,12 +31,10 @@
           height: 100%;
         }
 
-        :global(.ant-radio-inner) {
-          width: 100%;
-          height: 100%;
-
-          border-radius: inherit;
-          border-color: var(--cf-border) !important;
+        // v6 draws the dot on `.ant-radio` itself (the old `.ant-radio-inner` span is gone),
+        // so the fill-the-parent sizing is dropped.
+        & {
+          border-color: var(--vita-border) !important;
 
           background: transparent !important;
 
@@ -66,7 +64,7 @@
         }
 
         &:global(.ant-radio-checked) {
-          :global(.ant-radio-inner) {
+          & {
             background: rgba(255, 255, 255, 1) !important;
 
             &::after {
@@ -78,16 +76,16 @@
         }
 
         &:global(.ant-radio-disabled) {
-          :global(.ant-radio-inner) {
+          & {
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
-              border-color: var(--cf-border) !important;
+              border-color: var(--vita-border) !important;
             }
           }
 
           &:global(.ant-radio-checked) {
-            :global(.ant-radio-inner) {
+            & {
               background: rgba(0, 0, 0, 0.04) !important;
             }
           }

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

@@ -1,7 +1,7 @@
 .FormSegmented {
   height: 100%;
 
-  color: var(--cf-text);
+  color: var(--vita-foreground);
 
   :global(.ant-segmented-group) {
     height: 100%;

package/src/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/src/components/FormItem/FormUpload/FormImage/index.tsx

@@ -1,4 +1,5 @@
-import { UploadFile, notification } from "antd";
+import { UploadFile } from "antd";
+import { notification } from "../../../../feedback";
 import ItemContainer, { ItemContainerProps } from "../../ItemContainer";
 import React, { ReactNode, useState } from "react";
 import Upload, { UploadProps as BasicUploadProps } from "../../../Upload";

package/src/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/src/components/FormItem/FormUpload/index.tsx

@@ -1,4 +1,5 @@
-import { Button, UploadFile, notification } from "antd";
+import { Button, UploadFile } from "antd";
+import { notification } from "../../../feedback";
 import FormImage, { FormImageProps } from "./FormImage";
 import ItemContainer, { ItemContainerProps } from "../ItemContainer";
 import Upload, {

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