diff --git a/service-web/client/src/pages/App.tsx b/service-web/client/src/pages/App.tsx
index 718ce93..7606b14 100644
--- a/service-web/client/src/pages/App.tsx
+++ b/service-web/client/src/pages/App.tsx
@@ -2,6 +2,7 @@ import {ProLayout} from '@ant-design/pro-components'
import React from 'react'
import {Outlet, useLocation, useNavigate} from 'react-router'
import {menus} from '../route.tsx'
+import {ConfigProvider} from 'antd'
const App: React.FC = () => {
const navigate = useNavigate()
@@ -34,7 +35,18 @@ const App: React.FC = () => {
style={{minHeight: '100vh'}}
contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
>
-
+
+
+
)
}
diff --git a/service-web/client/src/pages/Test.tsx b/service-web/client/src/pages/Test.tsx
index dc6cb82..36334a0 100644
--- a/service-web/client/src/pages/Test.tsx
+++ b/service-web/client/src/pages/Test.tsx
@@ -1,4 +1,4 @@
-import {DeleteFilled, EditFilled, PlusCircleFilled, SaveFilled} from '@ant-design/icons'
+import {DeleteFilled, EditFilled, FolderFilled, PlusCircleFilled, SaveFilled} from '@ant-design/icons'
import {
addEdge,
applyEdgeChanges,
@@ -19,12 +19,13 @@ import {
} from '@xyflow/react'
import {useMount} from 'ahooks'
import type {Schema} from 'amis'
-import {Button, Card, Dropdown, message, Popover} from 'antd'
-import {arrToMap, contain, find, isEqual, randomId} from 'licia'
+import {Button, Card, Drawer, Dropdown, message, Space} from 'antd'
+import {arrToMap, filter, find, findIdx, isEqual, isNil, randomId} from 'licia'
import {type JSX, useState} from 'react'
import styled from 'styled-components'
import '@xyflow/react/dist/style.css'
import {create} from 'zustand/react'
+import {amisRender, commonInfo} from '../util/amis.tsx'
const FlowableDiv = styled.div`
height: 93vh;
@@ -45,64 +46,48 @@ const AmisNode = (
columnSchema?: Schema[],
) => {
const {id, data} = props
- const {setDataById} = data
+ const {removeNode, editNode} = data
return (
-
- {/*{amisRender(
- {
- type: 'card',
- header: {
- title: name,
- subTitle: description,
- },
- body: isNil(columnSchema)
- ? undefined
- : {
- debug: commonInfo.debug,
- type: 'form',
- className: 'nodrag nopan',
- wrapWithPanel: false,
- onEvent: {
- change: {
- actions: [
- {
- actionType: 'custom',
- // @ts-ignore
- script: (context, action, event) => {
- // @ts-ignore
- setDataById(id, context.props.data)
- },
- },
- ],
- },
- },
- body: [
- ...(columnSchema ?? []),
- {
- type: 'hidden',
- name: 'nodeId',
- value: props.id,
- },
- ],
- },
- },
- )}*/}
-
- }
+
+
- ,
- ,
- ]}
- hoverable
+ ,
+ },
+ {
+ key: 'remove',
+ label: '删除',
+ icon: ,
+ },
+ ],
+ onClick: menu => {
+ switch (menu.key) {
+ case 'edit':
+ // @ts-ignore
+ editNode(id, name, description, columnSchema)
+ break
+ case 'remove':
+ // @ts-ignore
+ removeNode(id)
+ break
+ }
+ }
+ }}
>
-
-
-
+
+ {description}
+
+
+
{isEqual(type, 'start') || isEqual(type, 'normal')
?
: undefined}
{isEqual(type, 'end') || isEqual(type, 'normal')
@@ -219,13 +204,13 @@ const initialNodes: Node[] = [
{
id: 'BMFP3Eov94',
type: 'start-amis-node',
- position: {x: 10, y: 50},
+ position: {x: 10, y: 100},
data: {},
},
{
id: 'PYK8LjduQ1',
type: 'end-amis-node',
- position: {x: 500, y: 50},
+ position: {x: 500, y: 100},
data: {},
},
]
@@ -255,6 +240,7 @@ const useFlowStore = create<{
nodes: Node[],
onNodesChange: OnNodesChange,
addNode: (node: Node) => void,
+ removeNode: (id: string) => void,
setNodes: (nodes: Node[]) => void,
edges: Edge[],
@@ -270,6 +256,11 @@ const useFlowStore = create<{
})
},
addNode: node => set({nodes: get().nodes.concat(node)}),
+ removeNode: id => {
+ set({
+ nodes: filter(get().nodes, node => !isEqual(node.id, id))
+ })
+ },
setNodes: nodes => set({nodes}),
edges: [],
@@ -310,11 +301,14 @@ function Test() {
component: LlmAmisNode,
},
])
+ const [open, setOpen] = useState(false)
+ const onClose = () => setOpen(false)
const {getData, getDataById, setDataById} = useStore()
const {
nodes,
addNode,
+ removeNode,
setNodes,
onNodesChange,
edges,
@@ -323,11 +317,46 @@ function Test() {
onConnect,
} = useFlowStore()
+ const [currentNodeForm, setCurrentNodeForm] = useState()
+ const editNode = (id: string, name: string, description: string, columnSchema?: Schema[]) => {
+ if (!isNil(columnSchema)) {
+ setCurrentNodeForm(
+ amisRender(
+ {
+ debug: commonInfo.debug,
+ title: name,
+ type: 'form',
+ wrapWithPanel: false,
+ onEvent: {
+ change: {
+ actions: [
+ {
+ actionType: 'custom',
+ // @ts-ignore
+ script: (context, action, event) => {
+ console.log(id, context.props.data)
+ setDataById(id, context.props.data)
+ },
+ }
+ ]
+ }
+ },
+ body: columnSchema,
+ },
+ getDataById(id),
+ )
+ )
+ setOpen(true)
+ }
+ }
+
useMount(() => {
for (let node of initialNodes) {
node.data = {
getDataById,
setDataById,
+ removeNode,
+ editNode,
}
}
setNodes(initialNodes)
@@ -337,8 +366,8 @@ function Test() {
return (
{contextHolder}
-
-
-
+
+
+ {currentNodeForm}
+
-
+
)