feat: code optimization (#14)

* feat: 代码优化

* feat: update FormList

* feat: update

* feat: FormItem 优化

* feat: 类型优化

* fix: formItemProps

Author: wanpan11

src/components/FormList/index.tsx

@@ -3,7 +3,7 @@ import { Button, Form, FormInstance, FormProps } from "antd";
 
 import { getFormElement } from "../tools";
 
-export interface FormListProps extends Pick<FormProps, "form" | "colon" | "className" | "style" | "layout" | "labelAlign" | "onValuesChange"> {
+export interface FormListProps extends Pick<FormProps, "form" | "colon" | "className" | "style" | "layout" | "labelAlign" | "onValuesChange" | "disabled"> {
   labelCol?: number;
   wrapperCol?: number;
 
@@ -71,6 +71,7 @@ const FormList = (props: FormListProps) => {
   // 该值变化后会触发表单值更新
   useEffect(() => {
     if (stageValues && realForm) {
+      realForm.resetFields();
       realForm.setFieldsValue(stageValues);
     }
 
@@ -112,9 +113,10 @@ const FormList = (props: FormListProps) => {
             rules={[e.rule]}
             hidden={!(e.visible ?? true)}
             name={e.name ? e.name : undefined}
-            valuePropName={e.type === "switch" ? "checked" : "value"}
             key={typeof e.name === "string" ? e.name || idx : e.name.join("_")}
+            valuePropName={e.valuePropName ? e.valuePropName : e.type === "switch" ? "checked" : "value"}
             initialValue={e.type === "radio" ? e.options?.[0].value : e.type === "switch" ? true : undefined}
+            {...e.formItemProps}
           >
             {getFormElement(e.type, e)}
           </Form.Item>

src/components/tools.tsx

@@ -5,7 +5,15 @@ const { RangePicker } = DatePicker;
 export const getFormElement = (type: FormItem["type"], info: FormItem) => {
   switch (type) {
     case "radio":
-      return <Radio.Group options={info.options || []} optionType={info.optionType || "button"} buttonStyle="outline" disabled={info.disable} {...info.otherOptions} />;
+      return (
+        <Radio.Group
+          options={info.options || []}
+          optionType={info.otherOptions?.optionType || "button"}
+          buttonStyle="outline"
+          disabled={info.disable}
+          {...info.otherOptions}
+        />
+      );
 
     case "checkbox":
       return <Checkbox.Group style={{ width: "100%" }} options={info.options || []} {...info.otherOptions} />;
@@ -27,7 +35,7 @@ export const getFormElement = (type: FormItem["type"], info: FormItem) => {
         <Select
           showSearch
           allowClear
-          mode={info.mode}
+          mode={info.otherOptions?.mode}
           placeholder={info.placeholder}
           disabled={info.disable}
           options={info.options as { value: string }[]}
@@ -40,17 +48,36 @@ export const getFormElement = (type: FormItem["type"], info: FormItem) => {
       );
 
     case "rangePick":
-      return <RangePicker disabled={info.disable} showTime={info.showTime} placeholder={["开始时间", "结束时间"]} {...info.otherOptions} />;
+      return <RangePicker disabled={info.disable} showTime={info.otherOptions?.showTime} placeholder={["开始时间", "结束时间"]} {...info.otherOptions} />;
 
     case "datePick":
-      return <DatePicker disabled={info.disable} showTime={info.showTime} {...info.otherOptions} />;
+      return <DatePicker disabled={info.disable} showTime={info.otherOptions?.showTime} {...info.otherOptions} />;
 
     case "textArea":
       return (
-        <Input.TextArea placeholder={info.placeholder} disabled={info.disable} showCount maxLength={info.maxLength || 500} className="mb-6 h-32" {...info.otherOptions} />
+        <Input.TextArea
+          showCount
+          disabled={info.disable}
+          placeholder={info.placeholder}
+          maxLength={info.otherOptions?.maxLength || 500}
+          classNames={{
+            textarea: "h-40 resize-none",
+          }}
+          {...info.otherOptions}
+        />
       );
 
     case "treeSelect":
-      return <TreeSelect allowClear placeholder={info.placeholder} disabled={info.disable} treeDefaultExpandAll className="w-full" {...info.otherOptions} />;
+      return (
+        <TreeSelect
+          allowClear
+          placeholder={info.placeholder}
+          treeData={info.options}
+          disabled={info.disable}
+          treeDefaultExpandAll
+          className="w-full"
+          {...info.otherOptions}
+        />
+      );
   }
 };

src/formIten.d.ts

@@ -0,0 +1,18 @@
+declare interface FormItem {
+  name: string | (number | string)[];
+  label?: string | React.ReactNode;
+  placeholder?: string;
+  initialValue?: unknown;
+  rule?: any;
+  hide?: boolean;
+  visible?: boolean;
+  disable?: boolean;
+  extra?: string | React.ReactNode;
+  type: "input" | "numberInput" | "select" | "treeSelect" | "datePick" | "rangePick" | "radio" | "checkbox" | "textArea" | "switch" | "blockNode" | "node";
+  valuePropName?: string;
+  formItemProps?: import("antd").FormItemProps;
+  // 特有属性
+  rightNode?: React.ReactNode; // node
+  options?: { label: string | React.ReactNode; value: any }[];
+  otherOptions?: Record<string, any>; // 组件额外属性
+}

src/hooks/useSwrData.ts

@@ -49,10 +49,10 @@ export function useSwrData<R, P = any>(props: UseSwrDataProps<P, R> & { paging?:
  * @param {UseSwrDataProps<P, R>} props - Hook 的属性。
  * @param {string | any[]} props.reqKey - SWR 请求的 key，用于缓存。
  * @param {(params: P) => Promise<R>} props.req - 用于获取数据的请求函数。
- * @param {P} [props.params] - 请求函数的参数。
+ * @param {P} [props.params] - 请求函数的参数 受控参数。
  * @param {boolean} [props.ready=true] - 标志请求是否准备好发送。
  * @param {boolean} [props.paging=false] - 标志是否启用分页。
- * @param {Partial<P>} [props.defaultSearch={}] - 默认的搜索参数。
+ * @param {Partial<P>} [props.defaultSearch={}] - 默认的搜索参数 初始参数。
  * @param {PageInfo} [props.defaultPage=defaultPageInfo] - 默认的分页信息。
  * @param {SWRConfiguration} [props.swrConfig] - SWR 配置选项。
  *

src/index.d.ts

@@ -23,38 +23,17 @@ interface IndexRoute {
 }
 type Route = PathRoute | IndexRoute;
 interface PageProps {
-  children: ReactNode;
+  children: React.ReactNode;
   title: string;
 }
 
 interface MenuItem {
   key: string | number;
   path: string;
-  label: string | ReactNode;
-  icon?: ReactNode;
+  label: string | React.ReactNode;
+  icon?: React.ReactNode;
   children?: MenuItem[];
 }
-interface FormItem {
-  name: string | (number | string)[];
-  label?: string | ReactNode;
-  placeholder?: string;
-  initialValue?: unknown;
-  rule?: any;
-  hide?: boolean;
-  visible?: boolean;
-  disable?: boolean;
-  extra?: string | ReactNode;
-  type: "input" | "numberInput" | "select" | "treeSelect" | "datePick" | "rangePick" | "radio" | "checkbox" | "textArea" | "switch" | "blockNode" | "node";
-  valuePropName?: string;
-  // 特有属性
-  rightNode?: ReactNode; // node
-  mode?: "multiple";
-  optionType?: "default" | "button";
-  maxLength?: number;
-  showTime?: boolean;
-  options?: { label: string | ReactNode; value: any }[];
-  otherOptions?: Record<string, any>; // 组件额外属性
-}
 
 interface AxiosRes<T> {
   code: number;