feat: add container publish

src/pages/container/edit/List.tsx

@@ -16,6 +16,7 @@ import {
   MessageOutlined,
   PlusOutlined,
   DashboardOutlined,
+  CloudUploadOutlined,
 } from '@ant-design/icons';
 import clsx from 'clsx';
 import { isObjectNull } from '@/utils/is-null';
@@ -97,6 +98,85 @@ const FormModal = () => {
     </Modal>
   );
 };
+const PublishFormModal = () => {
+  const [form] = Form.useForm();
+  const containerStore = useContainerStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showPublish,
+        setShowEdit: state.setShowPublish,
+        formData: state.formData,
+        updateData: state.publishData,
+      };
+    }),
+  );
+  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={'Publish'}
+      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={['publish', 'title']} label='title'>
+          <Input />
+        </Form.Item>
+        <Form.Item name={['publish', 'description']} label='description'>
+          <Input.TextArea rows={4} />
+        </Form.Item>
+        <Form.Item name={['publish', 'version']} label='version' required>
+          <Input />
+        </Form.Item>
+        <Form.Item name={['publish', 'key']} label='key' required>
+          <Input />
+        </Form.Item>
+        <Form.Item name={['publish', 'fileName']} label='file name' required>
+          <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 ContainerList = () => {
   const navicate = useNewNavigate();
   const containerStore = useContainerStore(
@@ -108,7 +188,8 @@ export const ContainerList = () => {
         deleteData: state.deleteData,
         getList: state.getList,
         loading: state.loading,
-        publishData: state.publishData,
+        // publishData: state.publishData,
+        setShowPublish: state.setShowPublish,
         updateData: state.updateData,
         formData: state.formData,
       };
@@ -189,26 +270,40 @@ export const ContainerList = () => {
                               e.stopPropagation();
                             }}
                             icon={<EditOutlined />}></Button>
-                          <Button
+                          <Tooltip title='预览'>
-                            onClick={(e) => {
+                            <Button
-                              // navicate('/container/preview/' + item.id);
+                              onClick={(e) => {
-                              window.open('/container/preview/' + item.id);
+                                // navicate('/container/preview/' + item.id);
-                              e.stopPropagation();
+                                window.open('/container/preview/' + item.id);
-                            }}
+                                e.stopPropagation();
-                            icon={<LinkOutlined />}></Button>
+                              }}
-                          <Button
+                              icon={<LinkOutlined />}></Button>
-                            onClick={(e) => {
+                          </Tooltip>
-                              e.stopPropagation();
+                          <Tooltip title='publish'>
-                              Modal.confirm({
+                            <Button
-                                title: 'Delete',
+                              onClick={(e) => {
-                                content: 'Are you sure delete this data?',
+                                // containerStore.publishData(item);
-                                onOk: () => {
+                                containerStore.setFormData(item);
-                                  containerStore.deleteData(item.id);
+                                containerStore.setShowPublish(true);
-                                },
+                                e.stopPropagation();
-                              });
+                              }}
-                              e.stopPropagation();
+                              icon={<CloudUploadOutlined />}></Button>
-                            }}
+                          </Tooltip>
-                            icon={<DeleteOutlined />}></Button>
+                          <Tooltip title='删除'>
+                            <Button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                Modal.confirm({
+                                  title: 'Delete',
+                                  content: 'Are you sure delete this data?',
+                                  onOk: () => {
+                                    containerStore.deleteData(item.id);
+                                  },
+                                });
+                                e.stopPropagation();
+                              }}
+                              icon={<DeleteOutlined />}></Button>
+                          </Tooltip>
                         </Button.Group>
                       </div>
                     </div>
@@ -273,6 +368,7 @@ export const ContainerList = () => {
         </div>
       </div>
       <FormModal />
+      <PublishFormModal />
     </div>
   );
 };

src/pages/container/store/index.ts

@@ -4,6 +4,8 @@ import { message } from 'antd';
 type ContainerStore = {
   showEdit: boolean;
   setShowEdit: (showEdit: boolean) => void;
+  showPublish: boolean;
+  setShowPublish: (showPublish: boolean) => void;
   formData: any;
   setFormData: (formData: any) => void;
   loading: boolean;
@@ -18,6 +20,8 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
   return {
     showEdit: false,
     setShowEdit: (showEdit) => set({ showEdit }),
+    showPublish: false,
+    setShowPublish: (showPublish) => set({ showPublish }),
     formData: {},
     setFormData: (formData) => set({ formData }),
     loading: false,
@@ -25,7 +29,6 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
     list: [],
     getList: async () => {
       set({ loading: true });
-
       const res = await query.post({
         path: 'container',
         key: 'list',
@@ -67,22 +70,10 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
       }
     },
     publishData: async (data) => {
-      const hasPublish = !!data.publish?.name;
-      const publish = {
-        name: 'test-import',
-      };
-      if (!hasPublish) {
-        console.error('need publish.name');
-        return;
-      }
       const res = await query.post({
         path: 'container',
         key: 'publish',
-        data: {
+        data,
-          id: data.id,
-          publish: publish,
-          type: 'patch',
-        },
       });
       if (res.code === 200) {
         message.success('Success');