feat: 去掉antd

src/pages/user/edit/List.tsx

@@ -1,8 +1,6 @@
-import { Input, Modal } from 'antd';
 import { Fragment, useEffect, useState } from 'react';
 import { useUserStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
-import { Form } from 'antd';
 import EditOutlined from '@ant-design/icons/EditOutlined';
 import SaveOutlined from '@ant-design/icons/SaveOutlined';
 import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
@@ -14,8 +12,13 @@ import { CardBlank } from '@kevisual/center-components/card/CardBlank.tsx';
 import { Dialog, ButtonGroup, Button, DialogContent, DialogTitle } from '@mui/material';
 import { IconButton } from '@kevisual/center-components/button/index.tsx';
 import { useTranslation } from 'react-i18next';
+import { useModal } from '@kevisual/center-components/modal/Confirm.tsx';
+import { TextField } from '@mui/material';
+import { useForm, Controller } from 'react-hook-form';
+import { pick } from 'lodash-es';
+
 const FormModal = () => {
-  const [form] = Form.useForm();
+  const { control, handleSubmit, reset } = useForm();
   const userStore = useUserStore(
     useShallow((state) => {
       return {
@@ -27,25 +30,34 @@ const FormModal = () => {
       };
     }),
   );
+
   useEffect(() => {
     const open = userStore.showEdit;
     if (open) {
       const isNull = isObjectNull(userStore.formData);
       if (isNull) {
-        form.setFieldsValue({});
-      } else form.setFieldsValue(userStore.formData);
+        reset({});
+      } else reset(userStore.formData);
     }
+    return () => {
+      reset({});
+    };
   }, [userStore.showEdit]);
-  const onFinish = async (values: any) => {
-    userStore.updateData(values);
+
+  const onFinish = (values: any) => {
+    const pickValues = pick(values, ['id', 'username', 'description']);
+    userStore.updateData(pickValues);
   };
+
   const onClose = () => {
     userStore.setShowEdit(false);
-    form.setFieldsValue({});
+    reset({});
     userStore.setFormData({});
   };
+
   const isEdit = userStore.formData.id;
   const { t } = useTranslation();
+
   return (
     <Dialog
       open={userStore.showEdit}
@@ -57,39 +69,30 @@ const FormModal = () => {
       }}>
       <DialogTitle>{isEdit ? t('Edit') : t('Add')}</DialogTitle>
       <DialogContent>
-        <Form
-          form={form}
-          onFinish={onFinish}
-          labelCol={{
-            span: 4,
-          }}
-          wrapperCol={{
-            span: 20,
-          }}>
-          <Form.Item name='id' hidden>
-            <Input />
-          </Form.Item>
-          <Form.Item name='username' label='username'>
-            <Input />
-          </Form.Item>
-          <Form.Item name='description' label='description'>
-            <Input.TextArea rows={4} />
-          </Form.Item>
-          <Form.Item label=' ' colon={false}>
+        <form onSubmit={handleSubmit(onFinish)}>
+          <Controller name='username' control={control} defaultValue='' render={({ field }) => <TextField {...field} label='username' fullWidth />} />
+          <Controller
+            name='description'
+            control={control}
+            defaultValue=''
+            render={({ field }) => <TextField {...field} label='description' multiline rows={4} fullWidth />}
+          />
+          <div>
             <Button type='submit' variant='contained'>
               {t('Submit')}
             </Button>
-            <Button className='ml-2' type='reset' onClick={onClose}>
+            <Button className='ml-2' type='button' onClick={onClose}>
               {t('Cancel')}
             </Button>
-          </Form.Item>
-        </Form>
+          </div>
+        </form>
       </DialogContent>
     </Dialog>
   );
 };
+
 export const List = () => {
-  const [modal, contextHolder] = Modal.useModal();
+  const [modal, contextHolder] = useModal();
   const userStore = useUserStore(
     useShallow((state) => {
       return {
@@ -104,8 +107,6 @@ export const List = () => {
       };
     }),
   );
-  const [codeEdit, setCodeEdit] = useState(false);
-  const [code, setCode] = useState('');
   useEffect(() => {
     userStore.getList();
   }, []);
@@ -132,9 +133,7 @@ export const List = () => {
                       className='flex text-sm gap flex-col w-[400px] max-h-[400px] bg-white p-4 rounded-lg'
                       key={item.id}
                       onClick={() => {
-                        setCode(item.code);
-                        userStore.setFormData(item);
-                        setCodeEdit(true);
+                        // userStore.setFormData(item);
                       }}>
                       <div className='px-4 cursor-pointer'>
                         <div
@@ -156,7 +155,6 @@ export const List = () => {
                             onClick={(e) => {
                               userStore.setFormData(item);
                               userStore.setShowEdit(true);
-                              setCodeEdit(false);
                               e.stopPropagation();
                             }}>
                             <EditOutlined />
@@ -188,36 +186,6 @@ export const List = () => {
             )}
           </div>
         </div>
-        <div className={clsx('bg-gray-100 border-l-gray-200 border-bg-slate-300 w-[600px] shark-0', !codeEdit && 'hidden', 'hidden')}>
-          <div className='bg-white  p-2'>
-            <div className='mt-2 ml-2 flex gap-2'>
-              <Button
-                onClick={() => {
-                  setCodeEdit(false);
-                  userStore.setFormData({});
-                }}>
-                <LeftOutlined />
-              </Button>
-              <Button
-                onClick={() => {
-                  console.log('save', userStore.formData);
-                  userStore.updateData({ ...userStore.formData, code });
-                }}>
-                <SaveOutlined />
-              </Button>
-            </div>
-          </div>
-          <div className='h-[94%] p-2 rounded-2 shadow-xs'>
-            <Input.TextArea
-              value={code}
-              onChange={(value) => {
-                // setCode(value);
-              }}
-              className='h-full max-h-full scrollbar'
-              style={{ overflow: 'auto' }}
-            />
-          </div>
-        </div>
       </div>
       <FormModal />
       {contextHolder}