test: 暂存

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 }),
+  };
+});