feat: 去掉antd

src/pages/app/edit/AppVersionList.tsx

@@ -2,8 +2,14 @@ import { useNavigation, useParams } from 'react-router';
 import { useAppVersionStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Form, Input, Modal, Tooltip } from 'antd';
-import { CloudUploadOutlined, DeleteOutlined, EditOutlined, FileOutlined, LeftOutlined, LinkOutlined, PlusOutlined } from '@ant-design/icons';
+import CloudUploadOutlined from '@ant-design/icons/CloudUploadOutlined';
+import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
+import FileOutlined from '@ant-design/icons/FileOutlined';
+import LeftOutlined from '@ant-design/icons/LeftOutlined';
+import LinkOutlined from '@ant-design/icons/LinkOutlined';
+import PlusOutlined from '@ant-design/icons/PlusOutlined';
+import { useModal } from '@kevisual/center-components/modal/Confirm.tsx';
+import { Tooltip } from '@mui/material';
 import { isObjectNull } from '@/utils/is-null';
 import { FileUpload } from '../modules/FileUpload';
 import clsx from 'clsx';
@@ -13,9 +19,13 @@ import { Button } from '@mui/material';
 import { Dialog, DialogContent, DialogTitle, ButtonGroup } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { IconButton } from '@kevisual/center-components/button/index.tsx';
+import { useForm, Controller } from 'react-hook-form';
+import { TextField } from '@mui/material';
+import { pick } from 'lodash-es';
+
 const FormModal = () => {
   const { t } = useTranslation();
-  const [form] = Form.useForm();
+  const { control, handleSubmit, reset } = useForm();
   const containerStore = useAppVersionStore(
     useShallow((state) => {
       return {
@@ -26,62 +36,56 @@ const FormModal = () => {
       };
     }),
   );
+
   useEffect(() => {
     const open = containerStore.showEdit;
     if (open) {
-      if (open) {
-        const isNull = isObjectNull(containerStore.formData);
-        if (isNull) {
-          form.setFieldsValue({});
-        } else form.setFieldsValue(containerStore.formData);
+      const isNull = isObjectNull(containerStore.formData);
+      if (isNull) {
+        reset({});
+      } else {
+        reset(containerStore.formData);
       }
     }
   }, [containerStore.showEdit]);
+
   const onFinish = async (values: any) => {
-    containerStore.updateData(values);
+    const pickValues = pick(values, ['id', 'key', 'version']);
+    containerStore.updateData(pickValues);
   };
+
   const onClose = () => {
     containerStore.setShowEdit(false);
-    form.resetFields();
+    reset();
   };
+
   const isEdit = containerStore.formData.id;
+
   return (
-    <Modal
-      title={isEdit ? 'Edit' : 'Add'}
+    <Dialog
       open={containerStore.showEdit}
       onClose={() => containerStore.setShowEdit(false)}
-      destroyOnClose
-      footer={false}
-      width={800}
-      onCancel={onClose}>
-      <Form
-        form={form}
-        onFinish={onFinish}
-        labelCol={{
-          span: 4,
-        }}
-        wrapperCol={{
-          span: 20,
-        }}>
-        <Form.Item name='id' hidden>
-          <Input />
-        </Form.Item>
-        <Form.Item name='key' label='key'>
-          <Input disabled />
-        </Form.Item>
-        <Form.Item name='version' label='version'>
-          <Input />
-        </Form.Item>
-        <Form.Item label=' ' colon={false}>
-          <Button type='submit' variant='contained' color='primary'>
-            {t('submit')}
-          </Button>
-          <Button className='ml-2' onClick={onClose}>
-            {t('cancel')}
-          </Button>
-        </Form.Item>
-      </Form>
-    </Modal>
+      sx={{
+        '& .MuiDialog-paper': {
+          width: '800px',
+        },
+      }}>
+      <DialogTitle>{isEdit ? 'Edit' : 'Add'}</DialogTitle>
+      <DialogContent>
+        <form className='flex flex-col gap-6' onSubmit={handleSubmit(onFinish)}>
+          <Controller name='key' control={control} defaultValue='' render={({ field }) => <TextField label='key' {...field} disabled />} />
+          <Controller name='version' control={control} defaultValue='' render={({ field }) => <TextField label='version' {...field} />} />
+          <div>
+            <Button type='submit' variant='contained' color='primary'>
+              {t('submit')}
+            </Button>
+            <Button className='ml-2' onClick={onClose}>
+              {t('cancel')}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
   );
 };
 
@@ -105,7 +109,7 @@ export const AppVersionList = () => {
     }),
   );
   const navigate = useNewNavigate();
-  const [modal, contextHolder] = Modal.useModal();
+  const [modal, contextHolder] = useModal();
   const [isUpload, setIsUpload] = useState(false);
   useEffect(() => {
     // fetch app version list