feat: 暂存，添加上传文件

src/pages/app/edit/AppVersionList.tsx

@@ -0,0 +1,153 @@
+import { useParams } from 'react-router';
+import { useAppVersionStore } from '../store';
+import { useShallow } from 'zustand/react/shallow';
+import { useEffect } from 'react';
+import { Button, Form, Input, Modal } from 'antd';
+import { DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
+import { isObjectNull } from '@/utils/is-null';
+import { useNavigate } from 'react-router';
+import { FileUpload } from '../modules/FileUpload';
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const containerStore = useAppVersionStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        updateData: state.updateData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = containerStore.showEdit;
+    if (open) {
+      if (open) {
+        const isNull = isObjectNull(containerStore.formData);
+        if (isNull) {
+          form.setFieldsValue({});
+        } else form.setFieldsValue(containerStore.formData);
+      }
+    }
+  }, [containerStore.showEdit]);
+  const onFinish = async (values: any) => {
+    containerStore.updateData(values);
+  };
+  const onClose = () => {
+    containerStore.setShowEdit(false);
+    form.resetFields();
+  };
+  const isEdit = containerStore.formData.id;
+  return (
+    <Modal
+      title={isEdit ? 'Edit' : 'Add'}
+      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='primary' htmlType='submit'>
+            Submit
+          </Button>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export const AppVersionList = () => {
+  const params = useParams();
+  const appKey = params.appKey;
+  const versionStore = useAppVersionStore(
+    useShallow((state) => {
+      return {
+        list: state.list,
+        getList: state.getList,
+        setKey: state.setKey,
+        setShowEdit: state.setShowEdit,
+        setFormData: state.setFormData,
+        deleteData: state.deleteData,
+      };
+    }),
+  );
+  useEffect(() => {
+    // fetch app version list
+    if (appKey) {
+      versionStore.setKey(appKey);
+      versionStore.getList();
+    }
+  }, []);
+  return (
+    <div className='w-full h-full flex bg-slate-100'>
+      <div className='p-2 bg-white'>
+        <Button
+          onClick={() => {
+            versionStore.setFormData({ key: appKey });
+            versionStore.setShowEdit(true);
+          }}
+          icon={<PlusOutlined />}
+        />
+      </div>
+      <div>
+        <FileUpload />
+      </div>
+      <div className='flex-grow h-full'>
+        <div className='w-full h-full p-4'>
+          <div className='w-full h-full rounded-lg bg-white'>
+            <div className='flex gap-2 flex-wrap p-4'>
+              {versionStore.list.map((item, index) => {
+                return (
+                  <div className='card border-t' key={index}>
+                    <div>{item.version}</div>
+
+                    <div>
+                      <Button.Group>
+                        <Button
+                          onClick={() => {
+                            versionStore.setFormData(item);
+                            versionStore.setShowEdit(true);
+                          }}
+                          icon={<EditOutlined />}
+                        />
+                        <Button
+                          onClick={() => {
+                            versionStore.deleteData(item.id);
+                          }}
+                          icon={<DeleteOutlined />}
+                        />
+                      </Button.Group>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+      <FormModal />
+    </div>
+  );
+};