feat: add layout and org

src/pages/panel/deck/index.tsx

@@ -11,6 +11,7 @@ import { CloseOutlined, MessageOutlined, SaveOutlined, SelectOutlined } from '@a
 import { useDeckPageStore } from './deck-store';
 import { FormModal } from './Model.tsx';
 import { useAiStore } from '@/pages/ai-chat/index.tsx';
+
 export const useListener = (id?: string, opts?: any) => {
   const { refresh } = opts || {};
   const connected = useStore((state) => state.connected);
@@ -269,14 +270,10 @@ export const Deck = () => {
     deckPageStore.setPageData([..._pageData]);
   };
   const init = async (data: any[]) => {
-    console.log(
-      'init',
-      data.filter((item) => item.codeId),
-    );
     // console.log('data', data, ref.current);
     const container = new ContainerEdit({
       root: ref.current!,
-      data: data.filter((item) => item.codeId),
+      data: data,
       showChild: true,
       // edit: false,
     });

src/pages/panel/edit/List.tsx

@@ -7,8 +7,10 @@ import copy from 'copy-to-clipboard';
 import { useNavigate } from 'react-router';
 import { useToCodeEditor } from '@/pages/code-editor';
 import { CardBlank } from '@/components/card/CardBlank';
-import { DeleteOutlined, EditOutlined, ForkOutlined, GoldOutlined, PlusOutlined, ToolOutlined } from '@ant-design/icons';
+import { CloudUploadOutlined, DeleteOutlined, EditOutlined, ForkOutlined, GoldOutlined, PlusOutlined, ToolOutlined } from '@ant-design/icons';
 import { isObjectNull } from '@/utils/is-null';
+import { PublishFormModal } from './modal/PublishFormModal';
+
 const FormModal = () => {
   const [form] = Form.useForm();
   const editStore = useEditStore(
@@ -97,6 +99,7 @@ export const List = () => {
         deleteData: state.deleteData,
         getList: state.getList,
         loading: state.loading,
+        setShowPublishModal: state.setShowPublishModal,
       };
     }),
   );
@@ -160,6 +163,15 @@ export const List = () => {
                             icon={<ToolOutlined />}
                           />
                         </Tooltip>
+                        <Tooltip title='Publish'>
+                          <Button
+                            onClick={() => {
+                              editStore.setFormData(item);
+                              editStore.setShowPublishModal(true);
+                            }}
+                            icon={<CloudUploadOutlined />}
+                          />
+                        </Tooltip>
                         <Tooltip title='delete'>
                           <Button
                             onClick={() => {
@@ -179,6 +191,7 @@ export const List = () => {
         </div>
       </div>
       <FormModal />
+      <PublishFormModal />
     </div>
   );
 };

src/pages/panel/edit/modal/PublishFormModal.tsx

@@ -0,0 +1,97 @@
+import { useEditStore } from '../../store';
+import { Button, Input, message, Modal, Tooltip } from 'antd';
+import { useEffect, version } from 'react';
+import { useShallow } from 'zustand/react/shallow';
+import { Form } from 'antd';
+import { CloudUploadOutlined, DeleteOutlined, EditOutlined, ForkOutlined, GoldOutlined, PlusOutlined, ToolOutlined } from '@ant-design/icons';
+import { isObjectNull } from '@/utils/is-null';
+
+export const PublishFormModal = () => {
+  const [form] = Form.useForm();
+  const editStore = useEditStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showPublishModal,
+        setShowEdit: state.setShowPublishModal,
+        formData: state.formData,
+        setFormData: state.setFormData,
+        updateData: state.updateData,
+        publishData: state.publishData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = editStore.showEdit;
+    if (open) {
+      if (isObjectNull(editStore.formData.data)) {
+        form.setFieldsValue({
+          publish: {},
+        });
+      } else
+        form.setFieldsValue({
+          ...editStore.formData,
+          publish: {
+            ...editStore.formData?.publish,
+          },
+        });
+    }
+  }, [editStore.showEdit, editStore.formData]);
+  const onFinish = async (values: any) => {
+    editStore.updateData(values);
+  };
+  const onClose = () => {
+    editStore.setShowEdit(false);
+    form.resetFields();
+    editStore.setFormData({});
+  };
+  const isEdit = editStore.formData.publish?.id;
+  const onPublish = () => {
+    // @ts-ignore
+    const values = form.getFieldsValue();
+    editStore.publishData(values);
+  };
+  return (
+    <Modal title={'Version Publish'} open={editStore.showEdit} onClose={onClose} 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', 'id']} hidden>
+          <Input />
+        </Form.Item>
+        <Form.Item name={['publish', 'key']} label='key'>
+          <Input disabled={isEdit} />
+        </Form.Item>
+        <Form.Item name={['publish', 'version']} label='version'>
+          <Input
+            disabled={isEdit}
+            addonAfter={
+              <div className='cursor-pointer hover:text-gray-400' onClick={onPublish}>
+                发布
+              </div>
+            }
+          />
+        </Form.Item>
+        <Form.Item name={['publish', 'description']} label='description'>
+          <Input.TextArea rows={4} />
+        </Form.Item>
+        <Form.Item label=' ' colon={false}>
+          <Button type='primary' htmlType='submit'>
+            Save
+          </Button>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
+            Cancel
+          </Button>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};

src/pages/panel/store/edit.ts

@@ -13,6 +13,9 @@ type EditStore = {
   getList: () => Promise<void>;
   updateData: (data: any) => Promise<void>;
   deleteData: (id: string) => Promise<void>;
+  showPublishModal: boolean;
+  setShowPublishModal: (showPublishModal: boolean) => void;
+  publishData: (data: any) => Promise<void>;
 };
 export const useEditStore = create<EditStore>((set, get) => {
   return {
@@ -49,6 +52,27 @@ export const useEditStore = create<EditStore>((set, get) => {
         message.error(res.message || 'Request failed');
       }
     },
+    publishData: async (data) => {
+      const { getList, list } = get();
+      const res = await query.post({
+        path: 'page',
+        key: 'publish',
+        data,
+      });
+      if (res.code === 200) {
+        message.success('Success');
+        set({ formData: res.data });
+        const newList = list.map((item) => {
+          if (item.id === data.id) {
+            return res.data;
+          }
+          return item;
+        });
+        set({ list: newList });
+      } else {
+        message.error(res.message || 'Request failed');
+      }
+    },
     deleteData: async (id) => {
       const { getList } = get();
       const res = await query.post({
@@ -63,5 +87,7 @@ export const useEditStore = create<EditStore>((set, get) => {
         message.error(res.message || 'Request failed');
       }
     },
+    showPublishModal: false,
+    setShowPublishModal: (showPublishModal) => set({ showPublishModal }),
   };
 });

src/pages/panel/store/panel.ts

@@ -70,7 +70,7 @@ export const usePanelStore = create<PanelStore>((set, get) => {
         },
       });
       if (res.code === 200) {
-        message.success('Success');
+        message.success('Success', 1);
         set(
           produce((state) => {
             state.data = res.data;
@@ -92,7 +92,7 @@ export const usePanelStore = create<PanelStore>((set, get) => {
         },
       });
       if (res.code === 200) {
-        message.success('Success');
+        message.success('Success', 1);
         // getList();
       } else {
         message.error(res.message || 'Request failed');
@@ -114,7 +114,7 @@ export const usePanelStore = create<PanelStore>((set, get) => {
       loaded();
       set({ loading: false });
       if (res.code === 200) {
-        message.success('Success');
+        message.success('Update Style Success', 1);
         // getList();
         return true;
       } else {