test: 暂存

src/App.tsx

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

src/pages/container/components/TextArea.tsx

@@ -4,7 +4,7 @@ import { clsx } from 'clsx';
 
 type Props = {
   value?: string;
-  onChange?: (evn: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onChange?: (data: string) => void;
   readonly?: boolean;
   className?: string;
 };
@@ -13,14 +13,19 @@ export const TextArea = (props: Props) => {
   useEffect(() => {
     setCode(props.value || '');
   }, []);
+  const _onChange = (value: string) => {
+    setCode(value);
+    props.onChange && props.onChange(value);
+  };
   return (
-    <div className={clsx('min-h-16 max-h-52 overflow-scroll p-1')}>
+    <div className={clsx('min-h-16 max-h-52 overflow-scroll p-1 ', props.className)}>
       <CodeEditor
         value={code}
         language='js'
+        className='border rounded-sm'
         readOnly={props.readonly}
         placeholder='Please enter JS code.'
-        onChange={(evn) => setCode(evn.target.value)}
+        onChange={(evn) => _onChange(evn.target.value)}
         padding={10}
         style={{
           backgroundColor: '#f5f5f5',

src/pages/container/edit/List.tsx

@@ -1,4 +1,3 @@
-import { query } from '@/modules';
 import { Button, Input, message, Modal, Table } from 'antd';
 import { useEffect, useState } from 'react';
 import { TextArea } from '../components/TextArea';
@@ -14,6 +13,7 @@ const FormModal = () => {
         showEdit: state.showEdit,
         setShowEdit: state.setShowEdit,
         formData: state.formData,
+        updateData: state.updateData,
       };
     }),
   );
@@ -21,15 +21,16 @@ const FormModal = () => {
     const open = containerStore.showEdit;
     if (open) {
       form.setFieldsValue(containerStore.formData || {});
+    } else {
+      form.resetFields();
     }
   }, [containerStore.showEdit]);
   const onFinish = async (values: any) => {
-    console.log(values);
-    onClose();
+    containerStore.updateData(values);
   };
   const onClose = () => {
     containerStore.setShowEdit(false);
-    form.setFieldsValue({});
+    form.resetFields();
   };
   const isEdit = containerStore.formData.id;
   return (
@@ -39,13 +40,16 @@ const FormModal = () => {
       onClose={() => containerStore.setShowEdit(false)}
       destroyOnClose
       footer={false}
+      width={800}
       onCancel={onClose}>
       <Form
         form={form}
         onFinish={onFinish}
         labelCol={{
           span: 4,
-          offset: 2,
+        }}
+        wrapperCol={{
+          span: 20,
         }}>
         <Form.Item name='id' hidden>
           <Input />
@@ -60,7 +64,7 @@ const FormModal = () => {
           <Button type='primary' htmlType='submit'>
             Submit
           </Button>
-          <Button htmlType='reset' onClick={onClose}>
+          <Button className='ml-2' htmlType='reset' onClick={onClose}>
             Cancel
           </Button>
         </Form.Item>
@@ -75,7 +79,9 @@ export const ContainerList = () => {
         setFormData: state.setFormData,
         setShowEdit: state.setShowEdit,
         list: state.list,
+        deleteData: state.deleteData,
         getList: state.getList,
+        loading: state.loading,
       };
     }),
   );
@@ -84,10 +90,10 @@ export const ContainerList = () => {
   }, []);
 
   const columns = [
-    {
-      title: 'ID',
-      dataIndex: 'id',
-    },
+    // {
+    //   title: 'ID',
+    //   dataIndex: 'id',
+    // },
     {
       title: 'Title',
       dataIndex: 'title',
@@ -95,6 +101,7 @@ export const ContainerList = () => {
     {
       title: 'Code',
       dataIndex: 'code',
+      width: '40%',
       render: (text: string, record: any) => {
         return <TextArea value={text} readonly />;
       },
@@ -117,14 +124,20 @@ export const ContainerList = () => {
               }}>
               Edit
             </Button>
-            <Button danger>Delete</Button>
+            <Button
+              danger
+              onClick={() => {
+                containerStore.deleteData(record.id);
+              }}>
+              Delete
+            </Button>
           </div>
         );
       },
     },
   ];
   return (
-    <div className='w-full h-full '>
+    <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 '
@@ -136,7 +149,19 @@ export const ContainerList = () => {
           Add
         </Button>
       </div>
-      <Table dataSource={containerStore.list} rowKey='id' columns={columns} />
+      <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/container/store/index.ts

@@ -10,7 +10,7 @@ type ContainerStore = {
   setLoading: (loading: boolean) => void;
   list: any[];
   getList: () => Promise<void>;
-  postData: (data: any) => Promise<void>;
+  updateData: (data: any) => Promise<void>;
   deleteData: (id: string) => Promise<void>;
 };
 export const useContainerStore = create<ContainerStore>((set, get) => {
@@ -23,17 +23,20 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
     setLoading: (loading) => set({ loading }),
     list: [],
     getList: async () => {
+      set({ loading: true });
+
       const res = await query.post({
         path: 'container',
         key: 'list',
       });
+      set({ loading: false });
       if (res.code === 200) {
         set({ list: res.data });
       } else {
         message.error(res.msg || 'Request failed');
       }
     },
-    postData: async (data) => {
+    updateData: async (data) => {
       const { getList } = get();
       const res = await query.post({
         path: 'container',
@@ -41,6 +44,8 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
         data,
       });
       if (res.code === 200) {
+        message.success('Success');
+        set({ showEdit: false, formData: [] });
         getList();
       } else {
         message.error(res.msg || 'Request failed');
@@ -55,6 +60,7 @@ export const useContainerStore = create<ContainerStore>((set, get) => {
       });
       if (res.code === 200) {
         getList();
+        message.success('Success');
       } else {
         message.error(res.msg || 'Request failed');
       }

src/pages/panel/edit/List.tsx

@@ -0,0 +1,3 @@
+export const List = () => {
+  return <div>List</div>;
+};

src/pages/panel/flow/Flow.tsx

@@ -0,0 +1,117 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  ReactFlow,
+  MiniMap,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  ReactFlowProvider,
+  useStore,
+  NodeTypes,
+  useReactFlow,
+  useStoreApi,
+  Panel,
+} from '@xyflow/react';
+import type { Node } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { useShallow } from 'zustand/react/shallow';
+import { useAddNode } from '@abearxiong/flows';
+import { Router, Container } from '@abearxiong/flows';
+console.log("R", Router);
+import { useContainerMenu, useRouterMenu } from '@abearxiong/flows';
+import { Button } from 'antd';
+// router: Router
+const nodeTypes = {
+  container: Container,
+};
+export const initialNodes: Node[] = [
+  { id: '1', position: { x: 100, y: 100 }, data: { label: '1' } },
+  { id: '2', position: { x: 100, y: 400 }, data: { label: '2' } },
+  { id: '3', position: { x: 100, y: 700 }, data: { label: '3' }, drag: true },
+].map((node) => ({
+  ...node,
+  // type: 'router',
+  type: 'container',
+  position: {
+    x: node.position.y,
+    y: node.position.x,
+  },
+}));
+
+export const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];
+
+export const Flow = () => {
+  return (
+    <ReactFlowProvider>
+      <ReactFlowApp />
+    </ReactFlowProvider>
+  );
+};
+const ReactFlowApp = () => {
+  const [nodes, setNodes, onNodesChange] = useNodesState([...initialNodes]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<any>([...initialEdges]);
+
+  const reactFlow = useReactFlow();
+
+  const onConnect = useCallback((params) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  const { menuCom, onContextMenu, onClose } = useContainerMenu((item, cacheData) => {
+    console.log(item, cacheData);
+  });
+  const { onNeedAdd, onAdd, onMouseMove, adding } = useAddNode();
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      onChange={(e) => {
+        console.log('change', e);
+      }}
+      onChangeCapture={(e) => {
+        console.log('change capture', e);
+      }}
+      onNodeDragStop={(e) => {
+        console.log('drag stop', e);
+      }}
+      nodeTypes={nodeTypes}
+      onMove={(e, viewport) => {
+        // console.log('move', e, viewport)
+      }}
+      onContextMenu={(e) => {
+        e.preventDefault();
+      }}
+      onPaneClick={(e) => {
+        if (adding) {
+          onAdd();
+        }
+      }}
+      onNodeContextMenu={(e, node) => {
+        console.log('context menu', e, node);
+        onContextMenu(e as any, node);
+      }}
+      onMouseMove={(e) => onMouseMove(e)}
+      onClick={(e) => {
+        onClose();
+      }}>
+      <MiniMap />
+      <Controls />
+      <Background gap={[14, 14]} size={2} color='#E4E5E7' />
+      <Panel>{menuCom}</Panel>
+      <Panel>
+        <Button
+          type='primary'
+          onClick={(e) => {
+            onNeedAdd({ id: '5', data: { label: '测试添加按钮' }, type: 'router' }, e);
+          }}>
+          测试添加按钮
+        </Button>
+      </Panel>
+    </ReactFlow>
+  );
+};
+
+export default Flow;

src/pages/panel/flow/index.tsx

@@ -0,0 +1,10 @@
+import Flow from './Flow';
+
+export const App = () => {
+  return (
+    <div className='w-full h-full'>
+      sdf
+      <Flow />
+    </div>
+  );
+};

src/pages/panel/index.tsx

@@ -0,0 +1,17 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { List } from './edit/List';
+import { Main } from './layouts';
+import { App as FlowApp } from './flow';
+
+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='flow' element={<FlowApp />} />
+        <Route path='*' element={'Not Found'}></Route>
+      </Route>
+    </Routes>
+  );
+};

src/pages/panel/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/panel/store/edit.ts

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

src/pages/panel/store/index.ts

@@ -0,0 +1,3 @@
+export * from './edit';
+
+export * from './panel';

src/pages/panel/store/panel.ts

@@ -0,0 +1,14 @@
+import { create } from 'zustand';
+import { query } from '@/modules';
+import { message } from 'antd';
+
+type PanelStore = {
+  id: string;
+  setId: (id: string) => void;
+};
+export const usePanelStore = create<PanelStore>((set, get) => {
+  return {
+    id: '',
+    setId: (id) => set({ id }),
+  };
+});