@hsu-react/ui 0.0.2 → 0.0.3

package/src/components/FormItem/index.md

@@ -16,13 +16,9 @@ title: FormItem 表单项
 import { FormItem } from "@hsu-react/ui";
 ```
 
-## 基础用法
-
 `FormItem` 通过 `type` 指定控件类型，业务参数统一放在 `componentProps` 中，需置于 antd `Form` 之内。下面按类型分别演示：
 
-### 输入类
-
-#### INPUT 输入框
+## 输入框
 
 ```tsx
 import React from "react";
@@ -30,13 +26,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="INPUT" name="input" label="输入框" required />
+  <Form>
+    <FormItem type="INPUT" name="input" label="输入框" />
   </Form>
 );
 ```
 
-#### TEXTAREA 多行文本
+## 多行文本
 
 ```tsx
 import React from "react";
@@ -44,13 +40,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
+  <Form>
     <FormItem type="TEXTAREA" name="textarea" label="多行文本" />
   </Form>
 );
 ```
 
-#### PASSWORD 密码
+## 密码
 
 ```tsx
 import React from "react";
@@ -58,13 +54,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
+  <Form>
     <FormItem type="PASSWORD" name="password" label="密码" />
   </Form>
 );
 ```
 
-#### PASSWORDSTRENGTH 密码强度
+## 密码强度
 
 ```tsx
 import React from "react";
@@ -72,13 +68,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
+  <Form>
     <FormItem type="PASSWORDSTRENGTH" name="pwd" label="密码强度" />
   </Form>
 );
 ```
 
-#### INPUTNUMBER 数字
+## 数字
 
 ```tsx
 import React from "react";
@@ -86,13 +82,18 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="INPUTNUMBER" name="number" label="数字" componentProps={{ min: 0, max: 100 }} />
+  <Form>
+    <FormItem
+      type="INPUTNUMBER"
+      name="number"
+      label="数字"
+      componentProps={{ min: 0, max: 100 }}
+    />
   </Form>
 );
 ```
 
-#### RANGEINPUT 范围输入
+## 范围输入
 
 ```tsx
 import React from "react";
@@ -100,13 +101,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
+  <Form>
     <FormItem type="RANGEINPUT" name="range" label="范围输入" />
   </Form>
 );
 ```
 
-#### SLIDER 滑块
+## 滑块
 
 ```tsx
 import React from "react";
@@ -114,13 +115,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="SLIDER" name="slider" label="滑块" />
+  <Form>
+    <FormItem type="SLIDER" name="slider" label="滑块" initialValue={30} />
   </Form>
 );
 ```
 
-#### TEXT 只读文本
+## 只读文本
 
 ```tsx
 import React from "react";
@@ -128,13 +129,18 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="TEXT" name="text" label="只读文本" componentProps={{ value: "只读文本内容" }} />
+  <Form>
+    <FormItem
+      type="TEXT"
+      name="text"
+      label="只读文本"
+      initialValue="只读文本内容"
+    />
   </Form>
 );
 ```
 
-#### AUTO 自定义控件
+## 自定义控件
 
 ```tsx
 import React from "react";
@@ -142,15 +148,18 @@ import { FormItem } from "@hsu-react/ui";
 import { Form, Input } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="AUTO" name="auto" label="自定义控件" element={<Input placeholder="任意自定义控件" />} />
+  <Form>
+    <FormItem
+      type="AUTO"
+      name="auto"
+      label="自定义控件"
+      element={<Input placeholder="任意自定义控件" />}
+    />
   </Form>
 );
 ```
 
-### 选择类
-
-#### SELECT 选择器
+## 下拉选择
 
 ```tsx
 import React from "react";
@@ -164,13 +173,18 @@ const options = [
 ];
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="SELECT" name="select" label="选择器" componentProps={{ options }} />
+  <Form>
+    <FormItem
+      type="SELECT"
+      name="select"
+      label="选择器"
+      componentProps={{ options }}
+    />
   </Form>
 );
 ```
 
-#### AUTOCOMPLETESELECT 自动完成
+## 自动完成
 
 ```tsx
 import React from "react";
@@ -184,13 +198,18 @@ const options = [
 ];
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="AUTOCOMPLETESELECT" name="ac" label="自动完成" componentProps={{ options }} />
+  <Form>
+    <FormItem
+      type="AUTOCOMPLETESELECT"
+      name="ac"
+      label="自动完成"
+      componentProps={{ options }}
+    />
   </Form>
 );
 ```
 
-#### TREESELECT 树选择
+## 树选择
 
 ```tsx
 import React from "react";
@@ -210,13 +229,18 @@ const treeData = [
 ];
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="TREESELECT" name="treeSelect" label="树选择" componentProps={{ treeData }} />
+  <Form>
+    <FormItem
+      type="TREESELECT"
+      name="treeSelect"
+      label="树选择"
+      componentProps={{ treeData }}
+    />
   </Form>
 );
 ```
 
-#### ICONSELECT 图标选择
+## 图标选择
 
 ```tsx
 import React from "react";
@@ -224,13 +248,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
+  <Form>
     <FormItem type="ICONSELECT" name="icon" label="图标选择" />
   </Form>
 );
 ```
 
-#### SEGMENTED 分段控制
+## 分段控制
 
 ```tsx
 import React from "react";
@@ -244,13 +268,18 @@ const options = [
 ];
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="SEGMENTED" name="segmented" label="分段控制" componentProps={{ options }} />
+  <Form>
+    <FormItem
+      type="SEGMENTED"
+      name="segmented"
+      label="分段控制"
+      componentProps={{ options }}
+    />
   </Form>
 );
 ```
 
-#### RADIO 单选
+## 单选
 
 ```tsx
 import React from "react";
@@ -264,13 +293,18 @@ const options = [
 ];
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="RADIO" name="radio" label="单选" componentProps={{ options }} />
+  <Form>
+    <FormItem
+      type="RADIO"
+      name="radio"
+      label="单选"
+      componentProps={{ options }}
+    />
   </Form>
 );
 ```
 
-#### CHECKBOX 单个多选框
+## 单个多选框
 
 ```tsx
 import React from "react";
@@ -278,13 +312,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
+  <Form>
     <FormItem type="CHECKBOX" name="checkbox" label="多选框" />
   </Form>
 );
 ```
 
-#### CHECKBOXGROUP 多选组
+## 多选组
 
 ```tsx
 import React from "react";
@@ -298,13 +332,18 @@ const options = [
 ];
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="CHECKBOXGROUP" name="checkboxGroup" label="多选组" componentProps={{ options }} />
+  <Form>
+    <FormItem
+      type="CHECKBOXGROUP"
+      name="checkboxGroup"
+      label="多选组"
+      componentProps={{ options }}
+    />
   </Form>
 );
 ```
 
-#### SWITCH 开关
+## 开关
 
 ```tsx
 import React from "react";
@@ -312,13 +351,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
+  <Form>
     <FormItem type="SWITCH" name="switch" label="开关" />
   </Form>
 );
 ```
 
-#### DATEPICKER 日期
+## 日期选择
 
 ```tsx
 import React from "react";
@@ -326,13 +365,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
+  <Form>
     <FormItem type="DATEPICKER" name="date" label="日期" />
   </Form>
 );
 ```
 
-#### RANGEPICKER 日期范围
+## 日期范围
 
 ```tsx
 import React from "react";
@@ -340,13 +379,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
+  <Form>
     <FormItem type="RANGEPICKER" name="dateRange" label="日期范围" />
   </Form>
 );
 ```
 
-#### STEPPICKER 步进日期
+## 步进日期
 
 ```tsx
 import React from "react";
@@ -354,13 +393,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
+  <Form>
     <FormItem type="STEPPICKER" name="step" label="步进日期" />
   </Form>
 );
 ```
 
-#### TREE 树形控件
+## 树形控件
 
 ```tsx
 import React from "react";
@@ -380,15 +419,18 @@ const treeData = [
 ];
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="TREE" name="tree" label="树形控件" componentProps={{ treeData }} />
+  <Form>
+    <FormItem
+      type="TREE"
+      name="tree"
+      label="树形控件"
+      componentProps={{ treeData }}
+    />
   </Form>
 );
 ```
 
-### 富文本 / 代码
-
-#### EDITOR 富文本
+## 富文本
 
 ```tsx
 import React from "react";
@@ -396,13 +438,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
+  <Form>
     <FormItem type="EDITOR" name="editor" label="富文本" />
   </Form>
 );
 ```
 
-#### CODEMIRROR 代码
+## 代码
 
 ```tsx
 import React from "react";
@@ -410,15 +452,18 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="CODEMIRROR" name="code" label="代码" componentProps={{ language: "json" }} />
+  <Form>
+    <FormItem
+      type="CODEMIRROR"
+      name="code"
+      label="代码"
+      componentProps={{ language: "json" }}
+    />
   </Form>
 );
 ```
 
-### 上传类
-
-#### FILE 文件上传
+## 文件上传
 
 ```tsx
 import React from "react";
@@ -426,13 +471,18 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="FILE" name="file" label="文件上传" componentProps={{ action: "/api/upload" }} />
+  <Form>
+    <FormItem
+      type="FILE"
+      name="file"
+      label="文件上传"
+      componentProps={{ action: "/api/upload" }}
+    />
   </Form>
 );
 ```
 
-#### IMAGEFILE 图片上传
+## 图片上传
 
 ```tsx
 import React from "react";
@@ -440,8 +490,13 @@ import { FormItem } from "@hsu-react/ui";
 import { Form } from "antd";
 
 export default () => (
-  <Form layout="vertical" style={{ maxWidth: 420 }}>
-    <FormItem type="IMAGEFILE" name="image" label="图片上传" componentProps={{ action: "/api/upload" }} />
+  <Form>
+    <FormItem
+      type="IMAGEFILE"
+      name="image"
+      label="图片上传"
+      componentProps={{ action: "/api/upload" }}
+    />
   </Form>
 );
 ```
@@ -450,21 +505,21 @@ export default () => (
 
 `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`               | -              |
+| 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`）：
 

package/src/components/Icon/index.md

@@ -16,7 +16,7 @@ title: Icon 图标
 import { Icon } from "@hsu-react/ui";
 ```
 
-## 基础用法
+## antd 图标
 
 antd 图标名（驼峰）：
 
@@ -34,6 +34,8 @@ export default () => (
 );
 ```
 
+## iconify 图标
+
 iconify 图标名（`集合:名称`，需先注册对应图标集）：
 
 ```tsx

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

@@ -31,14 +31,14 @@
     .RangeInput {
       display: flex;
       align-items: center;
+      column-gap: 5px;
 
       width: 100%;
       height: 100%;
 
-      border-radius: 6px;
-      border: 1px solid var(--cf-border);
-
-      transition: border-color 0.3s, box-shadow 0.3s;
+      transition:
+        border-color 0.3s,
+        box-shadow 0.3s;
 
       [class*="antdInput-"] {
         border: none !important;