+
setCode(evn.target.value)}
+ onChange={(evn) => _onChange(evn.target.value)}
padding={10}
style={{
backgroundColor: '#f5f5f5',
diff --git a/src/pages/container/edit/List.tsx b/src/pages/container/edit/List.tsx
index 99ced86..5424413 100644
--- a/src/pages/container/edit/List.tsx
+++ b/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}>
);
},
},
];
return (
-
+
);
diff --git a/src/pages/container/store/index.ts b/src/pages/container/store/index.ts
index 1741f77..648cc35 100644
--- a/src/pages/container/store/index.ts
+++ b/src/pages/container/store/index.ts
@@ -10,7 +10,7 @@ type ContainerStore = {
setLoading: (loading: boolean) => void;
list: any[];
getList: () => Promise
;
- postData: (data: any) => Promise;
+ updateData: (data: any) => Promise;
deleteData: (id: string) => Promise;
};
export const useContainerStore = create((set, get) => {
@@ -23,17 +23,20 @@ export const useContainerStore = create((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((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((set, get) => {
});
if (res.code === 200) {
getList();
+ message.success('Success');
} else {
message.error(res.msg || 'Request failed');
}
diff --git a/src/pages/panel/deck/index.tsx b/src/pages/panel/deck/index.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/panel/edit/List.tsx b/src/pages/panel/edit/List.tsx
new file mode 100644
index 0000000..dccf5d5
--- /dev/null
+++ b/src/pages/panel/edit/List.tsx
@@ -0,0 +1,3 @@
+export const List = () => {
+ return List
;
+};
diff --git a/src/pages/panel/flow/Flow.tsx b/src/pages/panel/flow/Flow.tsx
new file mode 100644
index 0000000..e60c7fc
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+const ReactFlowApp = () => {
+ const [nodes, setNodes, onNodesChange] = useNodesState([...initialNodes]);
+ const [edges, setEdges, onEdgesChange] = useEdgesState([...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 (
+ {
+ 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();
+ }}>
+
+
+
+ {menuCom}
+
+
+
+
+ );
+};
+
+export default Flow;
diff --git a/src/pages/panel/flow/index.tsx b/src/pages/panel/flow/index.tsx
new file mode 100644
index 0000000..38dacfd
--- /dev/null
+++ b/src/pages/panel/flow/index.tsx
@@ -0,0 +1,10 @@
+import Flow from './Flow';
+
+export const App = () => {
+ return (
+
+ sdf
+
+
+ );
+};
diff --git a/src/pages/panel/index.tsx b/src/pages/panel/index.tsx
new file mode 100644
index 0000000..e2e2e89
--- /dev/null
+++ b/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 (
+
+ }>
+ }>
+ } />
+ } />
+
+
+
+ );
+};
diff --git a/src/pages/panel/layouts/index.tsx b/src/pages/panel/layouts/index.tsx
new file mode 100644
index 0000000..2de5322
--- /dev/null
+++ b/src/pages/panel/layouts/index.tsx
@@ -0,0 +1,20 @@
+import { Outlet } from 'react-router';
+
+export const Main = () => {
+ return (
+
+ );
+};
diff --git a/src/pages/panel/store/edit.ts b/src/pages/panel/store/edit.ts
new file mode 100644
index 0000000..d5d2898
--- /dev/null
+++ b/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;
+ updateData: (data: any) => Promise;
+ deleteData: (id: string) => Promise;
+};
+export const useEditStore = create((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');
+ }
+ },
+ };
+});
diff --git a/src/pages/panel/store/index.ts b/src/pages/panel/store/index.ts
new file mode 100644
index 0000000..1e8eae5
--- /dev/null
+++ b/src/pages/panel/store/index.ts
@@ -0,0 +1,3 @@
+export * from './edit';
+
+export * from './panel';
\ No newline at end of file
diff --git a/src/pages/panel/store/panel.ts b/src/pages/panel/store/panel.ts
new file mode 100644
index 0000000..165d51b
--- /dev/null
+++ b/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((set, get) => {
+ return {
+ id: '',
+ setId: (id) => set({ id }),
+ };
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index 243a1ef..e857c0c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,7 +1,7 @@
/** @type {import('tailwindcss').Config} */
export default {
- darkMode: ["class"],
- content: ['./src/**/*.{ts,tsx}'],
+ darkMode: ['class'],
+ content: ['./src/**/*.{ts,tsx}', './node_modules/@abearxiong/flows/**/*.{ts,tsx}'],
plugins: [require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography')],
theme: {
extend: {},
@@ -22,9 +22,9 @@ export default {
// => @media (min-width: 1536px) { ... }
'3xl': '1920px',
// => @media (min-width: 1920) { ... }
- '4xl': '2560px'
+ '4xl': '2560px',
// => @media (min-width: 2560) { ... }
- }
+ },
},
- plugins: [require("tailwindcss-animate")]
-}
+ plugins: [require('tailwindcss-animate')],
+};
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 1e2274d..aa501b0 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -17,6 +17,7 @@
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "./",
+ "types": [],
"paths": {
"@/*": [
"src/*"
@@ -24,11 +25,14 @@
},
/* Linting */
"strict": true,
+ "noImplicitAny": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true
},
"include": [
- "src"
+ "src",
+ "./node_modules/@abearxiong/flows/**/*",
+ "./node_modules/.pnpm/@abearxiong+flows@0.0.1-alpha.6_@xyflow+react@12.3.0_@types+react@18.3.7_immer@10.1.1_react-d_f4d35tqb5yuohcch2fzlye5hn4/**/*"
]
}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index de6b67e..29a74f9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,25 +1,28 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from 'tailwindcss'
-import autoprefixer from 'autoprefixer'
-import path from 'path'
-import nesting from 'tailwindcss/nesting'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from 'tailwindcss';
+import autoprefixer from 'autoprefixer';
+import path from 'path';
+import nesting from 'tailwindcss/nesting';
// https://vitejs.dev/config/
export default defineConfig({
- plugins: [react()],
+ plugins: [
+ react(),
+ ],
+
css: {
postcss: {
- plugins: [nesting, tailwindcss, autoprefixer]
- }
+ plugins: [nesting, tailwindcss, autoprefixer],
+ },
},
resolve: {
alias: {
- '@': path.resolve(__dirname, './src')
- }
+ '@': path.resolve(__dirname, './src'),
+ },
},
define: {
- DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development')
+ DEV_SERVER: JSON.stringify(process.env.NODE_ENV === 'development'),
},
server: {
port: 6010,
@@ -27,8 +30,8 @@ export default defineConfig({
'/api': {
target: 'http://localhost:4000',
changeOrigin: true,
- rewrite: (path) => path.replace(/^\/api/, '/api')
- }
- }
- }
-})
+ rewrite: (path) => path.replace(/^\/api/, '/api'),
+ },
+ },
+ },
+});