@hsu-react/ui 0.0.1 → 0.0.3

package/src/components/Form/index.md

@@ -8,10 +8,188 @@ title: Form 表单
 
 # Form 表单
 
-> `Form` 组件。完整 API 见源码类型定义，下方为基础用法。
+配置驱动的表单集合，通过 `formItems` 描述表单项，提供弹窗表单、抽屉表单、导入表单三种形态及 `useForm`。
 
 ## 引入
 
 ```ts
 import { Form } from "@hsu-react/ui";
 ```
+
+## 弹窗表单
+
+`Form` 是一个命名空间对象，常用 `Form.Modal` 渲染弹窗表单，表单项通过 `formItems` 配置。点击下方按钮试试：
+
+```tsx
+import React, { useState } from "react";
+import { Form } from "@hsu-react/ui";
+import { Button, message } from "antd";
+
+export default () => {
+  const [open, setOpen] = useState(false);
+
+  const formItems = [
+    { type: "INPUT", name: "name", label: "姓名", required: true },
+    {
+      type: "SELECT",
+      name: "role",
+      label: "角色",
+      componentProps: {
+        options: [
+          { label: "管理员", value: "admin" },
+          { label: "访客", value: "guest" },
+        ],
+      },
+    },
+    {
+      type: "INPUTNUMBER",
+      name: "age",
+      label: "年龄",
+      componentProps: { min: 0, max: 120 },
+    },
+    { type: "SWITCH", name: "enabled", label: "启用" },
+  ];
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        新增用户
+      </Button>
+      <Form.Modal
+        open={open}
+        title="新增用户"
+        formItems={formItems}
+        onOk={(data) => {
+          message.success("提交数据：" + JSON.stringify(data));
+          setOpen(false);
+        }}
+        onCancel={() => setOpen(false)}
+      />
+    </>
+  );
+};
+```
+
+## 抽屉表单
+
+抽屉形态的表单，用法与 `Form.Modal` 一致，通过 `formItems` 配置表单项，适合内容较多的录入场景。
+
+```tsx
+import React, { useState } from "react";
+import { Form } from "@hsu-react/ui";
+import { Button, message } from "antd";
+
+export default () => {
+  const [open, setOpen] = useState(false);
+
+  const formItems = [
+    { type: "INPUT", name: "name", label: "姓名", required: true },
+    {
+      type: "SELECT",
+      name: "role",
+      label: "角色",
+      componentProps: {
+        options: [
+          { label: "管理员", value: "admin" },
+          { label: "访客", value: "guest" },
+        ],
+      },
+    },
+    { type: "TEXTAREA", name: "remark", label: "备注" },
+  ];
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        打开抽屉表单
+      </Button>
+      <Form.Drawer
+        open={open}
+        title="编辑用户"
+        formItems={formItems}
+        onClose={() => setOpen(false)}
+        buttonGroup={[
+          {
+            title: "取消",
+            onClick: () => setOpen(false),
+          },
+          {
+            title: "确定",
+            type: "primary",
+            onClick: () => {
+              message.success("已提交");
+              setOpen(false);
+            },
+          },
+        ]}
+      />
+    </>
+  );
+};
+```
+
+## 导入表单
+
+导入表单，弹窗内提供文件上传，可配置上传地址 `uploadAction` 与模板下载地址 `template`。
+
+```tsx
+import React, { useState } from "react";
+import { Form } from "@hsu-react/ui";
+import { Button } from "antd";
+
+export default () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button type="primary" onClick={() => setOpen(true)}>
+        导入数据
+      </Button>
+      <Form.Import
+        open={open}
+        title="导入数据"
+        uploadAction="https://example.com/api/upload"
+        templateName="导入模板.xlsx"
+        onCancel={() => setOpen(false)}
+      />
+    </>
+  );
+};
+```
+
+## API
+
+`Form` 是一个对象，包含以下成员：
+
+| 成员 | 说明 | 类型 |
+| --- | --- | --- |
+| Form.Modal | 弹窗表单 | `React.FC<ModalFormProps>` |
+| Form.Drawer | 抽屉表单 | `React.FC<DrawerFormProps>` |
+| Form.Import | 导入表单（上传文件） | `React.FC<ImportFormProps>` |
+| Form.useForm | antd `Form.useForm`，创建表单实例 | `typeof AntdForm.useForm` |
+
+### Form.Modal（ModalFormProps）
+
+在 `Modal`（antd `ModalProps`，`onCancel` / `onOk` 已重写）基础上扩展：
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| formItems | 表单项配置；传对象时按分组渲染 | `FormItemProps[] \| Record<string, FormItemProps[]>` | `[]` |
+| extraFormItems | 额外的自定义表单项节点 | `ExtraFormItem[]` | - |
+| externalForm | 外部传入的表单实例 | `FormInstance` | - |
+| value | 表单回填值 | `Record<string, unknown>` | - |
+| onOk | 校验通过后的提交回调 | `(data, form: FormInstance) => void` | - |
+| onCancel | 取消回调 | `() => void` | - |
+| hasPermi | 权限码 | `string[]` | - |
+| layout / formItemLayout | 表单 / 表单项布局方向 | `'horizontal' \| 'vertical'` | - |
+| columnNum | 表单列数 | `number` | - |
+| disabled | 是否禁用整个表单 | `boolean` | - |
+| onValuesChange | 表单值变化回调 | `(value, values) => void` | - |
+
+### Form.Drawer（DrawerFormProps）
+
+在 antd `DrawerProps`（`onClose` 已重写）基础上扩展：`formItems`、`extraFormItems`、`externalForm`、`value`、`hasPermi`、`buttonGroup`（底部按钮组 `ButtonProps[]`）、`onClose`、`reset`。
+
+### Form.Import（ImportFormProps）
+
+在 `Modal`（`onCancel` / `onOk` 已重写）基础上扩展：`open`、`title`、`onCancel`、`uploadAction`（上传地址）、`template`（模板下载地址）、`templateName`、`hasPermi`、`formClassName`、`formItemClassName`、`uploadProps`。

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

@@ -1,3 +1,15 @@
+.passwordStrength {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  width: 100%;
+
+  .passwordInput {
+    width: 100%;
+  }
+}
+
 .strengthBar {
   position: relative;
 

package/src/components/FormItem/FormInput/FormPasswordStrength/index.tsx

@@ -16,7 +16,7 @@ const PasswordStrength: React.FC<InputProps> = (props) => {
   const [fraction, setFraction] = useState<number>(0);
 
   return (
-    <>
+    <div className={styles.passwordStrength}>
       <Input.Password
         {...inputConfig}
         placeholder={placeholder ?? "请输入"}
@@ -38,7 +38,7 @@ const PasswordStrength: React.FC<InputProps> = (props) => {
         value={fraction}
         className={styles.strengthBar}
       />
-    </>
+    </div>
   );
 };
 

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

@@ -18,7 +18,7 @@
 
   &.rect {
     > label {
-      > span.ant-radio {
+      > span:global(.ant-radio) {
         width: 24px;
         min-width: 24px;
         height: 24px;
@@ -26,12 +26,12 @@
 
         border-radius: 2px;
 
-        input[type="radio"].ant-radio-input {
+        input[type="radio"]:global(.ant-radio-input) {
           width: 100%;
           height: 100%;
         }
 
-        .ant-radio-inner {
+        :global(.ant-radio-inner) {
           width: 100%;
           height: 100%;
 
@@ -65,8 +65,8 @@
           }
         }
 
-        &.ant-radio-checked {
-          .ant-radio-inner {
+        &:global(.ant-radio-checked) {
+          :global(.ant-radio-inner) {
             background: rgba(255, 255, 255, 1) !important;
 
             &::after {
@@ -77,8 +77,8 @@
           }
         }
 
-        &.ant-radio-disabled {
-          .ant-radio-inner {
+        &:global(.ant-radio-disabled) {
+          :global(.ant-radio-inner) {
             background: rgba(0, 0, 0, 0.04) !important;
 
             &::after {
@@ -86,8 +86,8 @@
             }
           }
 
-          &.ant-radio-checked {
-            .ant-radio-inner {
+          &:global(.ant-radio-checked) {
+            :global(.ant-radio-inner) {
               background: rgba(0, 0, 0, 0.04) !important;
             }
           }

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

@@ -3,7 +3,7 @@
 
   color: var(--cf-text);
 
-  .ant-segmented-group {
+  :global(.ant-segmented-group) {
     height: 100%;
 
     font-family: inherit;
@@ -17,7 +17,7 @@
       font-weight: inherit;
       color: inherit;
 
-      .ant-segmented-item-label {
+      :global(.ant-segmented-item-label) {
         display: flex;
         align-items: center;
         justify-content: center;

package/src/components/FormItem/FormUpload/index.module.less

@@ -1,7 +1,7 @@
 .upload {
   height: 100%;
 
-  .ant-upload {
+  :global(.ant-upload) {
     height: max-content;
 
     .upBtn {
@@ -15,7 +15,7 @@
     column-gap: 10px;
   }
 
-  .ant-upload-disabled {
+  :global(.ant-upload-disabled) {
     .singleFile {
       cursor: not-allowed;
 
@@ -97,7 +97,7 @@
     }
   }
 
-  &.ant-upload-drag {
+  &:global(.ant-upload-drag) {
     height: 180px;
 
     border-radius: 8px;
@@ -134,7 +134,7 @@
 }
 
 .FormUpload {
-  .ant-form-item-control-input-content {
+  :global(.ant-form-item-control-input-content) {
     > span {
       width: 100%;
     }

package/src/components/FormItem/ItemContainer/index.module.less

@@ -19,15 +19,15 @@
     cursor: pointer;
   }
 
-  .ant-picker {
+  :global(.ant-picker) {
     width: 100%;
   }
 
-  .ant-form-item-row {
+  :global(.ant-form-item-row) {
     width: 100%;
     height: 100%;
 
-    .ant-form-item-control {
+    :global(.ant-form-item-control) {
       display: flex;
       flex-direction: column;
       row-gap: 5px;
@@ -35,11 +35,11 @@
       width: var(--input-width) !important;
       max-width: 100%;
 
-      .ant-form-item-control-input {
+      :global(.ant-form-item-control-input) {
         height: var(--input-height);
         min-height: var(--input-min-height);
 
-        .ant-form-item-control-input-content {
+        :global(.ant-form-item-control-input-content) {
           display: flex;
           align-items: center;
 
@@ -54,7 +54,7 @@
     }
   }
 
-  .ant-form-item-label {
+  :global(.ant-form-item-label) {
     flex: 0 1 auto !important;
     display: inline-flex;
     align-items: center;
@@ -156,7 +156,7 @@
         cursor: pointer;
       }
 
-      &.ant-form-item-no-colon {
+      &:global(.ant-form-item-no-colon) {
         .label {
           &::after {
             content: none;
@@ -175,7 +175,7 @@
         content: none !important;
       }
 
-      &.ant-form-item-required {
+      &:global(.ant-form-item-required) {
         .label {
           &::before {
             content: "*";
@@ -212,7 +212,7 @@
   }
 
   &.after {
-    label.ant-form-item-required {
+    label:global(.ant-form-item-required) {
       .label {
         &::before {
           content: none !important;
@@ -241,7 +241,7 @@
     }
 
     &.hasLabelContent {
-      label.ant-form-item-required {
+      label:global(.ant-form-item-required) {
         &::after {
           content: none;
         }
@@ -266,7 +266,7 @@
   }
 
   &.hideRequired {
-    label.ant-form-item-required {
+    label:global(.ant-form-item-required) {
       .label {
         &::before {
           content: none !important;
@@ -281,7 +281,7 @@
     }
 
     &.after {
-      label.ant-form-item-required {
+      label:global(.ant-form-item-required) {
         .label {
           &::after {
             content: none !important;
@@ -292,11 +292,11 @@
   }
 
   &.horizontal {
-    .ant-form-item-row {
+    :global(.ant-form-item-row) {
       flex-wrap: nowrap;
       column-gap: 5px;
 
-      .ant-form-item-control {
+      :global(.ant-form-item-control) {
         flex: 1 !important;
         flex-grow: var(--input-horizontal-flex-grow) !important;
 
@@ -305,13 +305,13 @@
     }
 
     &.start {
-      .ant-form-item-control-input-content {
+      :global(.ant-form-item-control-input-content) {
         text-align: left;
       }
     }
 
     &.between {
-      .ant-form-item-control-input-content {
+      :global(.ant-form-item-control-input-content) {
         text-align: right;
       }
     }
@@ -320,13 +320,13 @@
   &.vertical {
     --label-height: max-content;
 
-    .ant-form-item-row {
+    :global(.ant-form-item-row) {
       flex-direction: column;
       row-gap: 5px;
 
       height: max-content;
 
-      .ant-form-item-label {
+      :global(.ant-form-item-label) {
         text-align: start;
 
         width: 100%;
@@ -353,7 +353,7 @@
         }
       }
 
-      .ant-form-item-control {
+      :global(.ant-form-item-control) {
         flex: 0 1 auto !important;
         display: flex;
         flex-direction: column;
@@ -364,8 +364,8 @@
   }
 
   &.legacyHasLabelExtra {
-    .ant-form-item-row {
-      .ant-form-item-label {
+    :global(.ant-form-item-row) {
+      :global(.ant-form-item-label) {
         label {
           flex-direction: column;
           flex-wrap: nowrap;
@@ -380,7 +380,7 @@
   }
 
   &.hideAdditiona {
-    .ant-form-item-additional {
+    :global(.ant-form-item-additional) {
       display: none;
     }
   }