@hsu-react/ui 0.0.1 → 0.0.3

package/src/components/FormItem/index.md

@@ -8,10 +8,523 @@ title: FormItem 表单项
 
 # FormItem 表单项
 
-> `FormItem` 组件。完整 API 见源码类型定义，下方为基础用法。
+通过 `type` 字段驱动的统一表单项组件，根据类型渲染对应的输入 / 选择 / 上传等控件，需配合 antd `Form` 使用。
 
 ## 引入
 
 ```ts
 import { FormItem } from "@hsu-react/ui";
 ```
+
+`FormItem` 通过 `type` 指定控件类型，业务参数统一放在 `componentProps` 中，需置于 antd `Form` 之内。下面按类型分别演示：
+
+## 输入框
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="INPUT" name="input" label="输入框" />
+  </Form>
+);
+```
+
+## 多行文本
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="TEXTAREA" name="textarea" label="多行文本" />
+  </Form>
+);
+```
+
+## 密码
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="PASSWORD" name="password" label="密码" />
+  </Form>
+);
+```
+
+## 密码强度
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="PASSWORDSTRENGTH" name="pwd" label="密码强度" />
+  </Form>
+);
+```
+
+## 数字
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem
+      type="INPUTNUMBER"
+      name="number"
+      label="数字"
+      componentProps={{ min: 0, max: 100 }}
+    />
+  </Form>
+);
+```
+
+## 范围输入
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="RANGEINPUT" name="range" label="范围输入" />
+  </Form>
+);
+```
+
+## 滑块
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="SLIDER" name="slider" label="滑块" initialValue={30} />
+  </Form>
+);
+```
+
+## 只读文本
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem
+      type="TEXT"
+      name="text"
+      label="只读文本"
+      initialValue="只读文本内容"
+    />
+  </Form>
+);
+```
+
+## 自定义控件
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form, Input } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem
+      type="AUTO"
+      name="auto"
+      label="自定义控件"
+      element={<Input placeholder="任意自定义控件" />}
+    />
+  </Form>
+);
+```
+
+## 下拉选择
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+const options = [
+  { label: "选项一", value: "1" },
+  { label: "选项二", value: "2" },
+  { label: "选项三", value: "3" },
+];
+
+export default () => (
+  <Form>
+    <FormItem
+      type="SELECT"
+      name="select"
+      label="选择器"
+      componentProps={{ options }}
+    />
+  </Form>
+);
+```
+
+## 自动完成
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+const options = [
+  { label: "选项一", value: "1" },
+  { label: "选项二", value: "2" },
+  { label: "选项三", value: "3" },
+];
+
+export default () => (
+  <Form>
+    <FormItem
+      type="AUTOCOMPLETESELECT"
+      name="ac"
+      label="自动完成"
+      componentProps={{ options }}
+    />
+  </Form>
+);
+```
+
+## 树选择
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+const treeData = [
+  {
+    title: "父节点",
+    value: "0",
+    key: "0",
+    children: [
+      { title: "子节点 1", value: "0-1", key: "0-1" },
+      { title: "子节点 2", value: "0-2", key: "0-2" },
+    ],
+  },
+];
+
+export default () => (
+  <Form>
+    <FormItem
+      type="TREESELECT"
+      name="treeSelect"
+      label="树选择"
+      componentProps={{ treeData }}
+    />
+  </Form>
+);
+```
+
+## 图标选择
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="ICONSELECT" name="icon" label="图标选择" />
+  </Form>
+);
+```
+
+## 分段控制
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+const options = [
+  { label: "选项一", value: "1" },
+  { label: "选项二", value: "2" },
+  { label: "选项三", value: "3" },
+];
+
+export default () => (
+  <Form>
+    <FormItem
+      type="SEGMENTED"
+      name="segmented"
+      label="分段控制"
+      componentProps={{ options }}
+    />
+  </Form>
+);
+```
+
+## 单选
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+const options = [
+  { label: "选项一", value: "1" },
+  { label: "选项二", value: "2" },
+  { label: "选项三", value: "3" },
+];
+
+export default () => (
+  <Form>
+    <FormItem
+      type="RADIO"
+      name="radio"
+      label="单选"
+      componentProps={{ options }}
+    />
+  </Form>
+);
+```
+
+## 单个多选框
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="CHECKBOX" name="checkbox" label="多选框" />
+  </Form>
+);
+```
+
+## 多选组
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+const options = [
+  { label: "选项一", value: "1" },
+  { label: "选项二", value: "2" },
+  { label: "选项三", value: "3" },
+];
+
+export default () => (
+  <Form>
+    <FormItem
+      type="CHECKBOXGROUP"
+      name="checkboxGroup"
+      label="多选组"
+      componentProps={{ options }}
+    />
+  </Form>
+);
+```
+
+## 开关
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="SWITCH" name="switch" label="开关" />
+  </Form>
+);
+```
+
+## 日期选择
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="DATEPICKER" name="date" label="日期" />
+  </Form>
+);
+```
+
+## 日期范围
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="RANGEPICKER" name="dateRange" label="日期范围" />
+  </Form>
+);
+```
+
+## 步进日期
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="STEPPICKER" name="step" label="步进日期" />
+  </Form>
+);
+```
+
+## 树形控件
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+const treeData = [
+  {
+    title: "父节点",
+    value: "0",
+    key: "0",
+    children: [
+      { title: "子节点 1", value: "0-1", key: "0-1" },
+      { title: "子节点 2", value: "0-2", key: "0-2" },
+    ],
+  },
+];
+
+export default () => (
+  <Form>
+    <FormItem
+      type="TREE"
+      name="tree"
+      label="树形控件"
+      componentProps={{ treeData }}
+    />
+  </Form>
+);
+```
+
+## 富文本
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem type="EDITOR" name="editor" label="富文本" />
+  </Form>
+);
+```
+
+## 代码
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem
+      type="CODEMIRROR"
+      name="code"
+      label="代码"
+      componentProps={{ language: "json" }}
+    />
+  </Form>
+);
+```
+
+## 文件上传
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem
+      type="FILE"
+      name="file"
+      label="文件上传"
+      componentProps={{ action: "/api/upload" }}
+    />
+  </Form>
+);
+```
+
+## 图片上传
+
+```tsx
+import React from "react";
+import { FormItem } from "@hsu-react/ui";
+import { Form } from "antd";
+
+export default () => (
+  <Form>
+    <FormItem
+      type="IMAGEFILE"
+      name="image"
+      label="图片上传"
+      componentProps={{ action: "/api/upload" }}
+    />
+  </Form>
+);
+```
+
+## API
+
+`FormItemProps` 是按 `type` 区分的联合类型：`{ type } & BaseFormItem & 对应控件 Props`。除 `type`、`visible` 外，其余通用属性继承自 `ItemContainerProps`（扩展自 antd `FormItemProps`），各控件的专有参数通过 `componentProps` 传入。
+
+| 属性           | 说明                                                   | 类型                         | 默认值         |
+| -------------- | ------------------------------------------------------ | ---------------------------- | -------------- |
+| type           | 表单项类型，决定渲染的控件                             | `FormItemType`               | -              |
+| visible        | 是否渲染该项，为 `false` 时不渲染                      | `boolean`                    | `true`         |
+| name           | 字段名（antd Form 字段）                               | `NamePath`                   | -              |
+| label          | 标签内容                                               | `ReactNode`                  | -              |
+| componentProps | 透传给底层控件的属性（如 `options`、`placeholder` 等） | 对应控件 Props               | -              |
+| labelWidth     | 标签宽度                                               | `string \| number`           | -              |
+| layout         | 标签与控件的排列方向                                   | `'horizontal' \| 'vertical'` | `'horizontal'` |
+| requiredMsg    | 必填校验提示文案                                       | `string`                     | -              |
+| tips           | 标签旁的提示气泡（antd `TooltipProps` + 图标配置）     | `TipsProps & TooltipProps`   | -              |
+| hasPermi       | 权限码；无权限时不渲染                                 | `string[]`                   | -              |
+| disabled       | 是否禁用                                               | `boolean`                    | -              |
+| en             | 是否使用英文占位文案                                   | `boolean`                    | -              |
+| hideLabel      | 是否隐藏标签                                           | `boolean`                    | `false`        |
+
+`type` 可选值（`FormItemType`）：
+
+- 输入类：`AUTO`、`INPUT`、`TEXTAREA`、`PASSWORD`、`PASSWORDSTRENGTH`、`INPUTNUMBER`、`RANGEINPUT`、`SLIDER`、`EDITOR`、`CODEMIRROR`、`TEXT`
+- 选择类：`SELECT`、`TREESELECT`、`AUTOCOMPLETESELECT`、`SEGMENTED`、`SWITCH`、`RADIO`、`CHECKBOX`、`CHECKBOXGROUP`、`DATEPICKER`、`RANGEPICKER`、`STEPPICKER`、`TREE`、`ICONSELECT`
+- 上传类：`FILE`、`IMAGEFILE`
+
+> 同时导出 `FormItemContainer`（即 `ItemContainer`）及类型 `FormItemType`、`FormItemProps`、`PlaceholderDict` / `PlaceholderDictEn` 占位文案字典。

package/src/components/Icon/index.md

@@ -16,20 +16,40 @@ title: Icon 图标
 import { Icon } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## antd 图标
+
+antd 图标名（驼峰）：
 
 ```tsx
 import React from "react";
 import { Icon } from "@hsu-react/ui";
-import { Space } from "antd";
 
 export default () => (
-  <Space size="large" style={{ fontSize: 22 }}>
+  <div style={{ display: "flex", gap: 20, alignItems: "center", fontSize: 22 }}>
     <Icon icon="UserOutlined" />
     <Icon icon="SettingOutlined" />
     <Icon icon="HomeOutlined" />
     <Icon icon="HeartFilled" style={{ color: "#eb2f96" }} />
-  </Space>
+  </div>
+);
+```
+
+## iconify 图标
+
+iconify 图标名（`集合:名称`，需先注册对应图标集）：
+
+```tsx
+import React from "react";
+import { Icon } from "@hsu-react/ui";
+
+export default () => (
+  <div style={{ display: "flex", gap: 20, alignItems: "center", fontSize: 22 }}>
+    <Icon icon="ph:user-bold" />
+    <Icon icon="mdi:home" />
+    <Icon icon="tabler:settings" />
+    <Icon icon="solar:heart-bold" style={{ color: "#eb2f96" }} />
+    <Icon icon="carbon:document" />
+  </div>
 );
 ```
 

package/src/components/Icon/index.tsx

@@ -4,7 +4,7 @@ import {
   IconProps as IconifyProps,
 } from "@iconify/react";
 
-import AntdIcon, * as AntdIcons from "@ant-design/icons";
+import * as AntdIcons from "@ant-design/icons";
 import React, { useEffect, useRef } from "react";
 import classNames from "classnames";
 import styles from "./index.module.less";
@@ -74,46 +74,18 @@ const Icon: React.FC<IconProps> = (props) => {
     );
   }
 
+  // iconify 图标：直接用 span 承载 Iconify 自带的 svg，避免把它嵌套进 antd Icon
+  // 的 svg（其 viewBox 会把内层 svg 缩放成极小值导致图标不可见）。
   return (
-    <AntdIcon
+    <span
       {...iconConfig}
-      // 与 antd 缺省值一致；显式传入以消除开发态 viewBox 告警（子节点是 Iconify 自带 viewBox 的 svg）
-      viewBox="0 0 1024 1024"
-      className={classNames([styles.icon, className])}
+      role="img"
+      ref={ref as unknown as React.Ref<HTMLSpanElement>}
+      className={classNames(["anticon", 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>
+      <Iconify {...iconProps} icon={icon} width="1em" height="1em" />
+    </span>
   );
 };
 

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

@@ -10,22 +10,22 @@
     width: 100%;
     height: 100%;
 
-    .ant-input-number-wrapper {
+    :global(.ant-input-number-wrapper) {
       height: 100%;
       min-height: inherit;
 
-      > .ant-input-number,
-      > .ant-input-number-affix-wrapper {
+      > :global(.ant-input-number),
+      > :global(.ant-input-number-affix-wrapper) {
         height: 100%;
         min-height: inherit;
       }
 
-      > .ant-input-number {
-        > .ant-input-number-input-wrap {
+      > :global(.ant-input-number) {
+        > :global(.ant-input-number-input-wrap) {
           height: 100%;
           min-height: inherit;
 
-          > .ant-input-number-input {
+          > :global(.ant-input-number-input) {
             height: 100%;
             min-height: inherit;
           }
@@ -33,11 +33,11 @@
       }
     }
 
-    > .ant-input-number-input-wrap {
+    > :global(.ant-input-number-input-wrap) {
       height: 100%;
       min-height: inherit;
 
-      > .ant-input-number-input {
+      > :global(.ant-input-number-input) {
         height: 100%;
       }
     }
@@ -66,7 +66,7 @@
   }
 
   // 当存在 addonAfter 时，调整清除图标位置
-  // Ant Design 的 addonAfter 会生成 .ant-input-number-group-addon
+  // Ant Design 的 addonAfter 会生成 :global(.ant-input-number-group-addon)
   // 清除图标需要向左偏移，避免与 addon 重叠
   // 使用 CSS 变量来动态设置 addon 宽度，默认值 60px 是合理的估算
   // 通过 JS 动态计算实际宽度并设置 CSS 变量来覆盖

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

@@ -2,12 +2,12 @@
   width: 100%;
   height: 100%;
 
-  .ant-input-wrapper {
+  :global(.ant-input-wrapper) {
     height: 100%;
     min-height: inherit;
 
-    > .ant-input,
-    > .ant-input-affix-wrapper {
+    > :global(.ant-input),
+    > :global(.ant-input-affix-wrapper) {
       height: 100%;
       min-height: inherit;
     }