feat: 去掉antd

src/pages/container/edit/List.tsx

@@ -1,9 +1,6 @@
-import { Input, Modal, Select } from 'antd';
 import { Fragment, Suspense, useEffect, useState } from 'react';
-import { TextArea } from '../components/TextArea';
 import { useContainerStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
-import { Form } from 'antd';
 // import copy from 'copy-to-clipboard';
 import { useNewNavigate } from '@/modules';
 import { message } from '@/modules/message';
@@ -19,10 +16,16 @@ import { isObjectNull } from '@/utils/is-null';
 import { CardBlank } from '@/components/card/CardBlank';
 import { Settings } from 'lucide-react';
 import React from 'react';
-
+import { useModal } from '@kevisual/center-components/modal/Confirm.tsx';
+import { useForm, Controller } from 'react-hook-form';
+import { TextField } from '@mui/material';
+import { pick } from 'lodash-es';
+import { useTranslation } from 'react-i18next';
+import { TagsInput } from '@kevisual/center-components/select/TagsInput.tsx';
 const DrawEdit = React.lazy(() => import('../module/DrawEdit'));
+
 const FormModal = () => {
-  const [form] = Form.useForm();
+  const { control, handleSubmit, reset, setValue } = useForm();
   const containerStore = useContainerStore(
     useShallow((state) => {
       return {
@@ -33,70 +36,75 @@ 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 {
+        Object.keys(containerStore.formData).forEach((key) => {
+          setValue(key, containerStore.formData[key]);
+        });
       }
     }
+    return () => {
+      reset({});
+    };
   }, [containerStore.showEdit]);
+
   const onFinish = async (values: any) => {
-    containerStore.updateData(values);
+    const pickValues = pick(values, ['id', 'title', 'description', 'tags', 'code']);
+    containerStore.updateData(pickValues);
   };
+
   const onClose = () => {
     containerStore.setShowEdit(false);
-    form.resetFields();
+    reset();
   };
+
   const isEdit = containerStore.formData.id;
+  const { t } = useTranslation();
   return (
-    <Dialog open={containerStore.showEdit} onClose={() => containerStore.setShowEdit(false)}>
+    <Dialog open={containerStore.showEdit} onClose={onClose}>
       <DialogTitle>{isEdit ? 'Edit' : 'Add'}</DialogTitle>
       <DialogContent sx={{ padding: '20px', minWidth: '600px' }}>
-        <Form
-          form={form}
-          onFinish={onFinish}
-          labelCol={{
-            span: 4,
-          }}
-          wrapperCol={{
-            span: 20,
-          }}>
-          <Form.Item name='id' hidden>
-            <Input />
-          </Form.Item>
-          <Form.Item name='title' label='title'>
-            <Input />
-          </Form.Item>
-          <Form.Item name='description' label='description'>
-            <Input.TextArea rows={4} />
-          </Form.Item>
-          <Form.Item name='tags' label='tags'>
-            <Select mode='tags' />
-          </Form.Item>
+        <form className='flex flex-col gap-6 pt-2' onSubmit={handleSubmit(onFinish)}>
+          <Controller name='title' control={control} defaultValue='' render={({ field }) => <TextField {...field} label='Title' fullWidth />} />
+          <Controller
+            name='description'
+            control={control}
+            defaultValue=''
+            render={({ field }) => <TextField {...field} label='Description' multiline rows={4} fullWidth />}
+          />
+          <Controller
+            name='tags'
+            control={control}
+            defaultValue={[]}
+            render={({ field }) => {
+              return <TagsInput key={'tags'} label='Tags' placeholder='添加标签' value={field.value} onChange={(value) => field.onChange(value)} />;
+            }}
+          />
           {!isEdit && (
-            <Form.Item name='code' label='code'>
-              <TextArea />
-            </Form.Item>
+            <Controller name='code' control={control} defaultValue='' render={({ field }) => <TextField {...field} label='Code' multiline fullWidth />} />
           )}
-          <Form.Item label=' ' colon={false}>
+          <div>
             <Button variant='contained' type='submit'>
-              提交
+              {t('Submit')}
             </Button>
             <Button className='ml-2' onClick={onClose}>
-              取消
+              {t('Cancel')}
             </Button>
-          </Form.Item>
-        </Form>
+          </div>
+        </form>
       </DialogContent>
     </Dialog>
   );
 };
 const PublishFormModal = () => {
-  const [form] = Form.useForm();
+  const { control, handleSubmit, reset, setValue, getValues } = useForm();
+  const { t } = useTranslation();
   const containerStore = useContainerStore(
     useShallow((state) => {
       return {
@@ -107,20 +115,25 @@ const PublishFormModal = () => {
       };
     }),
   );
+
   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 {
+        Object.keys(containerStore.formData).forEach((key) => {
+          setValue(key, containerStore.formData[key]);
+        });
       }
     }
   }, [containerStore.showEdit]);
+
   const onFinish = async () => {
-    const values = form.getFieldsValue();
-    const containerRes = await containerStore.updateData(values, { closePublish: false });
+    const values = getValues();
+    const pickValues = pick(values, ['id', 'publish.key', 'publish.version', 'publish.fileName', 'publish.description']);
+    const containerRes = await containerStore.updateData(pickValues, { closePublish: false });
     if (containerRes.code === 200) {
       const code = containerRes.data?.code || '-';
       const fileName = values['publish']?.['fileName'];
@@ -139,12 +152,11 @@ const PublishFormModal = () => {
       const key = values['publish']['key'];
       const version = values['publish']['version'];
       const file = toFile(code, directoryAndName.name);
-      const res = await uploadFileChunked(file, {
+      const res = (await uploadFileChunked(file, {
         appKey: key,
         version,
         directory: directoryAndName.directory,
-      });
-      // @ts-ignore
+      })) as any;
       if (res.code === 200) {
         message.success('upload success');
       } else {
@@ -152,66 +164,67 @@ const PublishFormModal = () => {
       }
     }
   };
+
   const onUpdate = async () => {
-    const values = form.getFieldsValue();
+    const values = getValues();
     containerStore.updateData(values);
   };
+
   const onClose = () => {
     containerStore.setShowEdit(false);
-    form.resetFields();
+    reset();
   };
+
   return (
-    <Dialog open={containerStore.showEdit} onClose={() => containerStore.setShowEdit(false)}>
+    <Dialog open={containerStore.showEdit} onClose={onClose}>
       <DialogTitle>Publish</DialogTitle>
       <DialogContent sx={{ padding: '10px', minWidth: '600px' }}>
-        <Form
-          form={form}
-          onFinish={onFinish}
-          labelCol={{
-            span: 6,
-          }}
-          wrapperCol={{
-            span: 18,
-          }}>
-          <Form.Item name='id' hidden>
-            <Input />
-          </Form.Item>
-          <Form.Item name={['publish', 'key']} label='App key' required>
-            <Input />
-          </Form.Item>
-          <Form.Item name={['publish', 'version']} label='App Version' required>
-            <Input />
-          </Form.Item>
-          <Form.Item name={['publish', 'fileName']} label='Filename' tooltip='可以是文件夹格式，比如(directory/a.name)' required>
-            <Input />
-          </Form.Item>
-          <Form.Item name={['publish', 'description']} label='Description'>
-            <Input.TextArea rows={4} />
-          </Form.Item>
-          <Form.Item label=' ' colon={false}>
-            <div className='flex gap-3'>
-              <Tooltip
-                placement='top'
-                title='根据文件名和code的字符串的内容，自动生成文件。并保存。如果是其他文件类型，转成base64上传。比如图片以类似data:image/jpeg;开头'>
-                <Button variant='contained' color='primary' type='submit'>
-                  上传
-                </Button>
-              </Tooltip>
-
-              <Button variant='contained' onClick={onUpdate}>
-                保存
+        <form className='flex flex-col gap-6 pt-2' onSubmit={handleSubmit(onFinish)}>
+          <Controller
+            name='publish.key'
+            control={control}
+            defaultValue=''
+            render={({ field }) => <TextField {...field} label='App key' required fullWidth />}
+          />
+          <Controller
+            name='publish.version'
+            control={control}
+            defaultValue=''
+            render={({ field }) => <TextField {...field} label='App Version' required fullWidth />}
+          />
+          <Controller
+            name='publish.fileName'
+            control={control}
+            defaultValue=''
+            render={({ field }) => <TextField {...field} label='Filename' required fullWidth />}
+          />
+          <Controller
+            name='publish.description'
+            control={control}
+            defaultValue=''
+            render={({ field }) => <TextField {...field} label='Description' multiline rows={4} fullWidth />}
+          />
+          <div className='flex gap-3'>
+            <Tooltip
+              placement='top'
+              title='根据文件名和code的字符串的内容，自动生成文件。并保存。如果是其他文件类型，转成base64上传。比如图片以类似data:image/jpeg;开头'>
+              <Button variant='contained' color='primary' type='submit'>
+                {t('Upload')}
               </Button>
-              <Button onClick={onClose}>取消</Button>
-            </div>
-          </Form.Item>
-        </Form>
+            </Tooltip>
+            <Button variant='contained' onClick={onUpdate}>
+              {t('Submit')}
+            </Button>
+            <Button onClick={onClose}>{t('Cancel')}</Button>
+          </div>
+        </form>
       </DialogContent>
     </Dialog>
   );
 };
 export const ContainerList = () => {
   const navicate = useNewNavigate();
-  const [modal, contextHolder] = Modal.useModal();
+  const [modal, contextHolder] = useModal();
   const containerStore = useContainerStore(
     useShallow((state) => {
       return {
@@ -271,7 +284,7 @@ export const ContainerList = () => {
                             e.stopPropagation();
                           }}>
                           {item.title || '-'}
-                          <div className='font-thin card-key ml-3'>{item.tags ? item.tags.join(', ') : ''}</div>
+                          <div className='font-thin card-key ml-3'>{item.tags ? item.tags?.join?.(', ') : ''}</div>
                         </div>
                         <div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div>
                       </div>

src/pages/container/index.tsx

@@ -16,4 +16,3 @@ export const App = () => {
   );
 };
 
-export * from './module/Select';

src/pages/container/module/Select.tsx

@@ -1,39 +0,0 @@
-import { query } from '@/modules';
-import { Select as AntSelect, SelectProps } from 'antd';
-import { useEffect, useState } from 'react';
-import { message } from '@/modules/message';
-export const Select = (props: SelectProps) => {
-  const [options, setOptions] = useState<{ value: string; id: string }[]>([]);
-  useEffect(() => {
-    fetch();
-  }, []);
-  const fetch = async () => {
-    const res = await query.post({
-      path: 'container',
-      key: 'list',
-    });
-    if (res.code !== 200) {
-      message.error(res.message || '获取容器列表失败');
-      return;
-    }
-    const data = res.data || [];
-    setOptions(
-      data.map((item: any) => {
-        return {
-          label: item.title,
-          value: item.id,
-        };
-      }),
-    );
-  };
-  return (
-    <AntSelect
-      {...props}
-      options={options}
-      // onChange={(e) => {
-      //   const labelValue = options.find((item) => item.value === e);
-      //   props.onChange?.(e, options);
-      // }}
-    />
-  );
-};