feat: 暂存， 添加ui2

src/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-d
 import { ConfigProvider } from 'antd';
 import { App as ContainerApp } from './pages/container';
 import { App as PanelApp } from './pages/panel';
+import { App as PublishApp } from './pages/publish';
 
 export const App = () => {
   return (
@@ -15,6 +16,7 @@ export const App = () => {
             <Route path='/' element={<Navigate to='/container/' />} />
             <Route path='/container/*' element={<ContainerApp />} />
             <Route path='/panel/*' element={<PanelApp />} />
+            <Route path='/publish/*' element={<PublishApp />} />
             <Route path='/404' element={<div>404</div>} />
             <Route path='*' element={<div>404</div>} />
           </Routes>

src/pages/container/edit/List.tsx

@@ -84,6 +84,7 @@ export const ContainerList = () => {
         deleteData: state.deleteData,
         getList: state.getList,
         loading: state.loading,
+        publishData: state.publishData,
       };
     }),
   );
@@ -145,6 +146,12 @@ export const ContainerList = () => {
               }}>
               Preview
             </Button>
+            <Button
+              onClick={() => {
+                containerStore.publishData(record);
+              }}>
+              Publish
+            </Button>
             <Button
               danger
               onClick={() => {

src/pages/container/store/index.ts

@@ -12,6 +12,7 @@ type ContainerStore = {
   getList: () => Promise<void>;
   updateData: (data: any) => Promise<void>;
   deleteData: (id: string) => Promise<void>;
+  publishData: (data: any) => Promise<void>;
 };
 export const useContainerStore = create<ContainerStore>((set, get) => {
   return {
@@ -65,5 +66,29 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
         message.error(res.msg || 'Request failed');
       }
     },
+    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: {
+          id: data.id,
+          publish: publish,
+          type: 'patch',
+        },
+      });
+      if (res.code === 200) {
+        message.success('Success');
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
   };
 });

src/pages/panel/deck/index.tsx

@@ -1,8 +1,9 @@
-import { Container } from '@abearxiong/container';
+import { Container, ContainerEdit } from '@abearxiong/container';
 import { useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router';
 import { query } from '@/modules';
 import { message } from 'antd';
+import '@abearxiong/container/dist/container.css';
 
 export const Deck = () => {
   const params = useParams<{ id: string }>();
@@ -78,10 +79,11 @@ export const Deck = () => {
   };
   const init = async (data: any[]) => {
     // console.log('data', data, ref.current);
-    const container = new Container({
+    const container = new ContainerEdit({
       root: ref.current!,
       data: data as any,
       showChild: true,
+      // edit: false,
     });
     container.render(id!);
     containerRef.current = container;

src/pages/panel/edit/List.tsx

@@ -124,9 +124,15 @@ export const List = () => {
             </Button>
             <Button
               onClick={() => {
-                navicate('/container/preview/' + record.id);
+                navicate('/panel/flow/' + record.id);
               }}>
-              Preview
+              Flow
+            </Button>
+            <Button
+              onClick={() => {
+                navicate('/panel/deck/' + record.id);
+              }}>
+              Deck
             </Button>
             <Button
               danger

src/pages/panel/flow/index.tsx

@@ -2,12 +2,12 @@ import { useParams } from 'react-router';
 import Flow from './Flow';
 import { usePanelStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
-import { useEffect } from 'react';
-
+import { useEffect, useRef } from 'react';
+import { DialogModal } from '@kevisual/ui';
+import '@kevisual/ui';
 export const App = () => {
   const param = useParams();
   const id = param.id;
-
   const panel = usePanelStore(
     useShallow((state) => {
       return {

src/pages/publish/edit/List.tsx

@@ -0,0 +1,178 @@
+import { Button, Input, message, Modal, Table } from 'antd';
+import { useEffect, useState } from 'react';
+import { usePublishStore } from '../store';
+import { useShallow } from 'zustand/react/shallow';
+import { Form } from 'antd';
+import copy from 'copy-to-clipboard';
+import { useNavigate } from 'react-router';
+const FormModal = () => {
+  const [form] = Form.useForm();
+  const containerStore = usePublishStore(
+    useShallow((state) => {
+      return {
+        showEdit: state.showEdit,
+        setShowEdit: state.setShowEdit,
+        formData: state.formData,
+        updateData: state.updateData,
+      };
+    }),
+  );
+  useEffect(() => {
+    const open = containerStore.showEdit;
+    if (open) {
+      form.setFieldsValue(containerStore.formData || {});
+    } else {
+      form.resetFields();
+    }
+  }, [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='title' label='title'>
+          <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 List = () => {
+  const navicate = useNavigate();
+  const containerStore = usePublishStore(
+    useShallow((state) => {
+      return {
+        setFormData: state.setFormData,
+        setShowEdit: state.setShowEdit,
+        list: state.list,
+        deleteData: state.deleteData,
+        getList: state.getList,
+        loading: state.loading,
+      };
+    }),
+  );
+  useEffect(() => {
+    containerStore.getList();
+  }, []);
+
+  const columns = [
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      render: (text: string) => {
+        return (
+          <div
+            className='w-40 truncate cursor-pointer'
+            title={text}
+            onClick={() => {
+              copy(text);
+              message.success('copy success');
+            }}>
+            {text}
+          </div>
+        );
+      },
+    },
+    {
+      title: 'Title',
+      dataIndex: 'title',
+    },
+
+    {
+      title: 'Source',
+      dataIndex: 'source',
+    },
+    {
+      title: 'Operation',
+      dataIndex: 'operation',
+      render: (text: string, record: any) => {
+        return (
+          <div className='flex gap-2'>
+            <Button
+              type='primary'
+              onClick={() => {
+                containerStore.setFormData(record);
+                containerStore.setShowEdit(true);
+              }}>
+              Edit
+            </Button>
+            <Button
+              onClick={() => {
+                navicate('/container/preview/' + record.id);
+              }}>
+              Preview
+            </Button>
+            <Button
+              danger
+              onClick={() => {
+                containerStore.deleteData(record.id);
+              }}>
+              Delete
+            </Button>
+          </div>
+        );
+      },
+    },
+  ];
+  return (
+    <div className='w-full h-full flex flex-col'>
+      <div className='mb-2 w-full p-2 bg-white rounded-lg'>
+        <Button
+          className='w-20 '
+          type='primary'
+          onClick={() => {
+            containerStore.setFormData({});
+            containerStore.setShowEdit(true);
+          }}>
+          Add
+        </Button>
+      </div>
+      <div className='flex-grow overflow-scroll'>
+        <Table
+          pagination={false}
+          scroll={{
+            y: 600,
+          }}
+          loading={containerStore.loading}
+          dataSource={containerStore.list}
+          rowKey='id'
+          columns={columns}
+        />
+      </div>
+      <div className='h-2'></div>
+      <FormModal />
+    </div>
+  );
+};

src/pages/publish/index.tsx

@@ -0,0 +1,14 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { List } from './edit/List';
+import { Main } from './layouts';
+export const App = () => {
+  return (
+    <Routes>
+      <Route element={<Main />}>
+        <Route path='/' element={<Navigate to='/panel/edit/list' />}></Route>
+        <Route path='edit/list' element={<List />} />
+        <Route path='*' element={'Not Found'}></Route>
+      </Route>
+    </Routes>
+  );
+};

src/pages/publish/layouts/index.tsx

@@ -0,0 +1,20 @@
+import { Outlet } from 'react-router';
+
+export const Main = () => {
+  return (
+    <div className='flex w-full h-full flex-col bg-gray-200'>
+      <div className='h-12 bg-white p-2 mb-2'>Deck And Flow</div>
+      <div
+        className='flex'
+        style={{
+          height: 'calc(100vh - 4rem)',
+        }}>
+        <div className='flex-grow overflow-hidden mx-2'>
+          <div className='w-full h-full rounded-lg'>
+            <Outlet />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/pages/publish/store/index.ts

@@ -0,0 +1,69 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+type Store = {
+  showEdit: boolean;
+  setShowEdit: (showEdit: boolean) => void;
+  formData: any;
+  setFormData: (formData: any) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+  list: any[];
+  getList: () => Promise<void>;
+  updateData: (data: any) => Promise<void>;
+  deleteData: (id: string) => Promise<void>;
+};
+export const usePublishStore = create<Store>((set, get) => {
+  return {
+    showEdit: false,
+    setShowEdit: (showEdit) => set({ showEdit }),
+    formData: {},
+    setFormData: (formData) => set({ formData }),
+    loading: false,
+    setLoading: (loading) => set({ loading }),
+    list: [],
+    getList: async () => {
+      set({ loading: true });
+
+      const res = await query.post({
+        path: 'resource',
+        key: 'list',
+      });
+      set({ loading: false });
+      if (res.code === 200) {
+        set({ list: res.data });
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+    updateData: async (data) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'resource',
+        key: 'update',
+        data,
+      });
+      if (res.code === 200) {
+        message.success('Success');
+        set({ showEdit: false, formData: [] });
+        getList();
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+    deleteData: async (id) => {
+      const { getList } = get();
+      const res = await query.post({
+        path: 'resource',
+        key: 'delete',
+        id,
+      });
+      if (res.code === 200) {
+        getList();
+        message.success('Success');
+      } else {
+        message.error(res.msg || 'Request failed');
+      }
+    },
+  };
+});