@hsu-react/ui 0.0.1

package/src/components/FormItem/rules.ts

@@ -0,0 +1,100 @@
+import { Rule } from "antd/es/form";
+
+export const LengthRule = (
+  codeLength: number = 20,
+  msg: string = "字符数超出限制",
+  en: boolean = false,
+  val?: string
+): Rule => {
+  let rule: Rule = {
+    validator: (_, value) => {
+      if (!value) {
+        return Promise.resolve();
+      }
+
+      const regex = new RegExp(`^.{${codeLength + 1},}$`);
+
+      if (val ? regex.test(value[val]) : regex.test(value)) {
+        return Promise.reject(new Error(msg));
+      }
+
+      return Promise.resolve();
+    },
+  };
+
+  if (en) {
+    rule = {
+      validator: (_, value) => {
+        if (!value) {
+          return Promise.resolve();
+        }
+
+        const wordCount = (val ? value[val] : value).trim().split(/\s+/).length;
+
+        if (wordCount > codeLength) {
+          return Promise.reject(new Error(msg));
+        }
+
+        return Promise.resolve();
+      },
+    };
+  }
+
+  return rule;
+};
+
+export const InputTypeRule = (type: RegExp, msg: string): Rule => {
+  const rule: Rule = {
+    validator: (_, value) => {
+      if (!value) {
+        return Promise.resolve();
+      }
+
+      if (!type.test(value)) {
+        return Promise.reject(new Error(msg));
+      }
+
+      return Promise.resolve();
+    },
+  };
+
+  return rule;
+};
+
+export const PhoneRule: Rule = {
+  validator: (_, value) => {
+    if (!value) {
+      return Promise.resolve();
+    }
+
+    const regex =
+      /^(?:(?:\+|00)86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[235-8]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|66\d{2})\d{6}$/;
+
+    if (!regex.test(value)) {
+      return Promise.reject(new Error("请输入正确格式的手机号"));
+    }
+
+    return Promise.resolve();
+  },
+};
+
+export const Password: Rule = {
+  validator: (_, value) => {
+    if (!value) {
+      return Promise.resolve();
+    }
+
+    const regex =
+      /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@#$￥%^&*!,.()[\]……{};':",.<>?`~\\+_=|·\\-]).{8,20}$/;
+
+    if (!regex.test(value)) {
+      return Promise.reject(
+        new Error(
+          "密码格式不正确，长度必须为 8-20 个字符，必须同时包含数字、字母以及特殊字符（例如：# % $@...）"
+        )
+      );
+    }
+
+    return Promise.resolve();
+  },
+};

package/src/components/Icon/index.md

@@ -0,0 +1,43 @@
+---
+nav: 组件
+group:
+  title: 通用
+  order: 1
+title: Icon 图标
+---
+
+# Icon 图标
+
+统一图标入口：传入 antd 图标名（如 `UserOutlined`）走 `@ant-design/icons`，传入 iconify 名（如 `ph:user-bold`）走 `@iconify/react`（需先 `addCollection` 注册图标集）。
+
+## 引入
+
+```ts
+import { Icon } from "@hsu-react/ui";
+```
+
+## 基础用法
+
+```tsx
+import React from "react";
+import { Icon } from "@hsu-react/ui";
+import { Space } from "antd";
+
+export default () => (
+  <Space size="large" style={{ fontSize: 22 }}>
+    <Icon icon="UserOutlined" />
+    <Icon icon="SettingOutlined" />
+    <Icon icon="HomeOutlined" />
+    <Icon icon="HeartFilled" style={{ color: "#eb2f96" }} />
+  </Space>
+);
+```
+
+## API
+
+| 属性 | 说明 | 类型 |
+| --- | --- | --- |
+| icon | 图标名：antd 图标名 或 iconify 名 | `string` |
+| iconProps | 透传给 iconify 的属性 | `object` |
+
+继承原生 `span` 属性（`className` / `style` / `onClick` 等）。

package/src/components/Icon/index.module.less

@@ -0,0 +1,8 @@
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  width: max-content;
+  height: max-content;
+}

package/src/components/Icon/index.tsx

@@ -0,0 +1,120 @@
+import {
+  Icon as Iconify,
+  IconifyIcon,
+  IconProps as IconifyProps,
+} from "@iconify/react";
+
+import AntdIcon, * as AntdIcons from "@ant-design/icons";
+import React, { useEffect, useRef } from "react";
+import classNames from "classnames";
+import styles from "./index.module.less";
+
+type AntdNamedIconComponent = React.ForwardRefExoticComponent<
+  {
+    className?: string;
+    style?: React.CSSProperties;
+  } & React.RefAttributes<HTMLSpanElement>
+>;
+
+/** 判断是否为 AntD 图标组件名（如 "SettingOutlined"），并返回对应组件 */
+const getAntdIcon = (
+  icon: unknown
+): AntdNamedIconComponent | undefined => {
+  if (typeof icon !== "string") return undefined;
+  if (!/(?:Outlined|Filled|TwoTone)$/.test(icon)) return undefined;
+  return (AntdIcons as unknown as Record<string, AntdNamedIconComponent | undefined>)[
+    icon
+  ];
+};
+
+interface IconProps
+  extends React.DetailedHTMLProps<
+    React.HTMLAttributes<HTMLSpanElement>,
+    HTMLDivElement
+  > {
+  iconProps?: Omit<IconifyProps, "icon">;
+  icon: IconifyIcon | string;
+  onRef?: (ref?: React.RefObject<HTMLDivElement>) => void;
+  fontSize?: number | string;
+}
+
+const Icon: React.FC<IconProps> = (props) => {
+  const {
+    iconProps,
+    icon,
+    className,
+    color,
+    style,
+    onRef,
+    fontSize,
+    ...iconConfig
+  } = props;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    onRef?.(ref);
+  }, [onRef, ref]);
+
+  const mergedStyle: React.CSSProperties = {
+    color,
+    fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+    ...style,
+  };
+
+  // 兼容 AntD 图标名（如 "SettingOutlined"），直接渲染对应 AntD 图标组件
+  const AntdNamedIcon = getAntdIcon(icon);
+  if (AntdNamedIcon) {
+    return (
+      <AntdNamedIcon
+        {...iconConfig}
+        className={classNames([styles.icon, className])}
+        style={mergedStyle}
+        ref={ref as unknown as React.Ref<HTMLSpanElement>}
+      />
+    );
+  }
+
+  return (
+    <AntdIcon
+      {...iconConfig}
+      // 与 antd 缺省值一致；显式传入以消除开发态 viewBox 告警（子节点是 Iconify 自带 viewBox 的 svg）
+      viewBox="0 0 1024 1024"
+      className={classNames([styles.icon, className])}
+      style={mergedStyle}
+      ref={ref}
+    >
+      <Iconify
+        {...iconProps}
+        icon={icon}
+        width="1em"
+        height="1em"
+        onLoad={() => {
+          setTimeout(() => {
+            if (ref.current) {
+              const svg = ref.current.childNodes[0] as SVGSVGElement;
+              const svg_i = svg.childNodes[0] as SVGSVGElement;
+
+              const { height } = svg.getBoundingClientRect();
+              const { height: height_i } = svg_i.getBoundingClientRect();
+
+              const viewBox_i = svg_i.getAttribute("viewBox");
+              const viewBox_i_height = viewBox_i?.split(" ")[3];
+
+              if (Number(viewBox_i_height) <= 24) return;
+
+              const y_i =
+                Number(viewBox_i_height) - (Number(height) - Number(height_i));
+
+              svg_i.setAttribute(
+                "viewBox",
+                `0 0 ${viewBox_i?.split(" ")[2]} ${y_i.toFixed(0)}`
+              );
+            }
+          }, 1);
+        }}
+      />
+    </AntdIcon>
+  );
+};
+
+export default Icon;

package/src/components/Input/Number/index.module.less

@@ -0,0 +1,78 @@
+.inputNumberWrapper {
+  position: relative;
+
+  display: inline-flex;
+
+  width: 100%;
+  height: 100%;
+
+  .antdInput {
+    width: 100%;
+    height: 100%;
+
+    .ant-input-number-wrapper {
+      height: 100%;
+      min-height: inherit;
+
+      > .ant-input-number,
+      > .ant-input-number-affix-wrapper {
+        height: 100%;
+        min-height: inherit;
+      }
+
+      > .ant-input-number {
+        > .ant-input-number-input-wrap {
+          height: 100%;
+          min-height: inherit;
+
+          > .ant-input-number-input {
+            height: 100%;
+            min-height: inherit;
+          }
+        }
+      }
+    }
+
+    > .ant-input-number-input-wrap {
+      height: 100%;
+      min-height: inherit;
+
+      > .ant-input-number-input {
+        height: 100%;
+      }
+    }
+  }
+
+  &.inputNumberWrapperClear {
+    input {
+      padding-right: 33px;
+    }
+  }
+
+  .clearIcon {
+    position: absolute;
+    right: 11px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: var(--cf-text-3);
+    font-size: 14px;
+    z-index: 1;
+    transition: color 0.3s;
+
+    &:hover {
+      color: var(--cf-text-2);
+    }
+  }
+
+  // 当存在 addonAfter 时，调整清除图标位置
+  // Ant Design 的 addonAfter 会生成 .ant-input-number-group-addon
+  // 清除图标需要向左偏移，避免与 addon 重叠
+  // 使用 CSS 变量来动态设置 addon 宽度，默认值 60px 是合理的估算
+  // 通过 JS 动态计算实际宽度并设置 CSS 变量来覆盖
+  &.hasAddonAfter {
+    .clearIcon {
+      right: calc(11px + var(--addon-after-width, 60px));
+    }
+  }
+}

package/src/components/Input/Number/index.tsx

@@ -0,0 +1,174 @@
+import {
+  InputNumber as AntdInputNumber,
+  InputNumberProps as AntdInputNumberProps,
+} from "antd";
+import React, { useEffect, useRef, useState } from "react";
+import { CloseCircleFilled } from "@ant-design/icons";
+
+import classNames from "classnames";
+import styles from "./index.module.less";
+import { useDebounceEffect } from "ahooks";
+
+export interface InputNumberProps extends Omit<
+  AntdInputNumberProps,
+  "ref" | "onChange" | "value"
+> {
+  getRef?: (ref: HTMLInputElement | null) => void;
+  onChange?: (value: string) => void;
+  value?: string;
+  allowClear?: boolean;
+  wrapperClassName?: string;
+}
+
+const InputNumber: React.FC<InputNumberProps> = (props) => {
+  const {
+    onChange,
+    getRef,
+    value,
+    defaultValue,
+    className,
+    disabled,
+    allowClear = true,
+    addonAfter,
+    wrapperClassName,
+    ...inputConfig
+  } = props;
+  const ref = useRef<HTMLInputElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  // 初始化时优先使用 value，其次使用 defaultValue
+  const initialValue =
+    value !== undefined
+      ? typeof value === "number"
+        ? `${value}`
+        : (value?.toString() ?? "")
+      : defaultValue !== undefined
+        ? typeof defaultValue === "number"
+          ? `${defaultValue}`
+          : (defaultValue?.toString() ?? "")
+        : "";
+
+  const [_value, setValue] = useState<string>(initialValue);
+  const [lastValue, setLastValue] = useState<string>(initialValue);
+  const prevValueRef = useRef<typeof value>(undefined);
+
+  useDebounceEffect(
+    () => {
+      if (_value !== lastValue) {
+        setLastValue(_value);
+
+        onChange?.(_value);
+      }
+    },
+    [_value, lastValue, onChange],
+    {
+      wait: 10,
+    },
+  );
+
+  useEffect(() => {
+    // 只在外部 value prop 真正变化时才更新内部状态
+    if (prevValueRef.current !== value) {
+      prevValueRef.current = value;
+
+      if (value !== undefined) {
+        const newValue =
+          typeof value === "number" ? `${value}` : value?.toString();
+        setValue(newValue);
+        setLastValue(newValue);
+      } else {
+        // 只在初始化或外部主动设置为 undefined 时清空
+        setValue("");
+        setLastValue("");
+      }
+    }
+  }, [value]);
+
+  useEffect(() => {
+    getRef?.(ref.current);
+  }, [getRef]);
+
+  // 动态计算 addonAfter 的宽度，并设置 CSS 变量
+  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`,
+          );
+        }
+      };
+
+      // 使用 requestAnimationFrame 确保 DOM 渲染完成后再计算
+      const rafId = requestAnimationFrame(() => {
+        updateAddonWidth();
+      });
+
+      // 监听窗口大小变化和元素大小变化，重新计算
+      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("");
+    setLastValue("");
+    onChange?.("");
+  };
+
+  const showClear =
+    allowClear && _value !== "" && _value !== undefined && !disabled;
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={classNames(styles.inputNumberWrapper, wrapperClassName, {
+        [styles.inputNumberWrapperClear]: showClear,
+        [styles.hasAddonAfter]: !!addonAfter,
+      })}
+    >
+      <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} />
+      )}
+    </div>
+  );
+};
+
+export default InputNumber;

package/src/components/Input/Password/index.module.less

@@ -0,0 +1,15 @@
+.antdInput {
+  width: 100%;
+  height: 100%;
+
+  .ant-input-wrapper {
+    height: 100%;
+    min-height: inherit;
+
+    > .ant-input,
+    > .ant-input-affix-wrapper {
+      height: 100%;
+      min-height: inherit;
+    }
+  }
+}

package/src/components/Input/Password/index.tsx

@@ -0,0 +1,85 @@
+import AntdPassword, {
+  PasswordProps as AntdPasswordProps,
+} from "antd/es/input/Password";
+import React, { useEffect, useRef, useState } from "react";
+
+import { InputRef } from "antd/es/input";
+import classNames from "classnames";
+import styles from "./index.module.less";
+
+export interface PasswordProps
+  extends Omit<
+    AntdPasswordProps,
+    "onCompositionStart" | "onCompositionEnd" | "ref" | "onChange"
+  > {
+  getRef?: (ref: InputRef | null) => void;
+  onChange?: (value: string) => void;
+}
+
+const Password: React.FC<PasswordProps> = (props) => {
+  const { onChange, getRef, value, defaultValue, className, ...inputConfig } =
+    props;
+  const [isComposing, setComposing] = useState<boolean>(false);
+  const ref = useRef<InputRef>(null);
+
+  // 初始化时优先使用 value，其次使用 defaultValue
+  const initialValue =
+    value !== undefined
+      ? value?.toString() ?? ""
+      : defaultValue !== undefined
+      ? defaultValue?.toString() ?? ""
+      : "";
+
+  const [_value, setValue] = useState<string>(initialValue);
+  const [lastValue, setLastValue] = useState<string>(initialValue);
+  const prevValueRef = useRef<typeof value>(undefined);
+
+  useEffect(() => {
+    if (!isComposing && _value !== lastValue) {
+      const trimmedValue = _value.trim();
+      const finalValue = trimmedValue === "" ? "" : _value;
+      setLastValue(finalValue);
+      onChange?.(finalValue);
+    }
+  }, [_value, isComposing, lastValue, onChange]);
+
+  useEffect(() => {
+    // 只在外部 value prop 真正变化时才更新内部状态
+    if (prevValueRef.current !== value) {
+      prevValueRef.current = value;
+
+      if (value !== undefined) {
+        setValue(value?.toString());
+        setLastValue(value?.toString());
+      } else {
+        // 只在初始化或外部主动设置为 undefined 时清空
+        setValue("");
+        setLastValue("");
+      }
+    }
+  }, [value]);
+
+  useEffect(() => {
+    getRef?.(ref.current);
+  }, [getRef]);
+
+  return (
+    <AntdPassword
+      className={classNames(styles.antdInput, className)}
+      ref={ref}
+      onCompositionStart={() => setComposing(true)}
+      onCompositionEnd={() => {
+        setTimeout(() => {
+          setComposing(false);
+        }, 1);
+      }}
+      value={_value}
+      onChange={(e) => {
+        setValue(e.target.value);
+      }}
+      {...inputConfig}
+    />
+  );
+};
+
+export default Password;