feat: switch dynamic to shadcn

web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx

@@ -1,30 +1,81 @@
-import { Form, Input, InputNumber, Select, Switch } from 'antd';
+// import { Form, Input, InputNumber, Select, Switch } from 'antd';
 import {
   DynamicFormItemType,
   IDynamicFormItemConfig,
 } from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { ControllerRenderProps } from "react-hook-form";
 
 export default function DynamicFormItemComponent({
   config,
+  field,
 }: {
   config: IDynamicFormItemConfig;
+  field: ControllerRenderProps<any, any>;
 }) {
-  return (
-    <Form.Item
-      label={config.label.zh_CN}
-      name={config.name}
-      rules={[{ required: config.required, message: '该项为必填项哦～' }]}
-      initialValue={config.default}
-    >
-      {config.type === DynamicFormItemType.INT && <InputNumber />}
+  switch (config.type) {
+    case DynamicFormItemType.INT:
+    case DynamicFormItemType.FLOAT:
+      return (
+        <Input
+          type="number"
+          {...field}
+          onChange={(e) => field.onChange(Number(e.target.value))}
+        />
+      );
 
-      {config.type === DynamicFormItemType.STRING && <Input />}
+    case DynamicFormItemType.STRING:
+      return <Input {...field} />;
 
-      {config.type === DynamicFormItemType.BOOLEAN && <Switch defaultChecked />}
+    case DynamicFormItemType.BOOLEAN:
+      return (
+        <Checkbox
+          checked={field.value}
+          onCheckedChange={field.onChange}
+        />
+      );
 
-      {config.type === DynamicFormItemType.STRING_ARRAY && (
-        <Select options={[]} />
-      )}
-    </Form.Item>
-  );
+    case DynamicFormItemType.STRING_ARRAY:
+      return (
+        <Select
+          value={field.value}
+          onValueChange={field.onChange}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="请选择" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {/* 这里需要根据实际情况添加选项 */}
+              <SelectItem value="option1">选项1</SelectItem>
+              <SelectItem value="option2">选项2</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      );
+
+    case DynamicFormItemType.SELECT:
+      return (
+        <Select
+          value={field.value}
+          onValueChange={field.onChange}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="请选择" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {/* 这里需要根据实际情况添加选项 */}
+              <SelectItem value="option1">选项1</SelectItem>
+              <SelectItem value="option2">选项2</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      );
+
+    default:
+      return <Input {...field} />;
+  }
 }