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} -
- @@ -346,9 +375,12 @@ function Test() { menu={{ items: nodeDef.map(def => ({key: def.key, label: def.name})), onClick: ({key}) => { - if (isEqual(key, 'start-amis-node') || isEqual(key, 'end-amis-node')) { - contain(nodes, (node: Node) => isEqual(key, node.type)) - messageApi.error('只能存在1个开始/结束节点') + if (isEqual(key, 'start-amis-node') && findIdx(nodes, (node: Node) => isEqual(key, node.type)) > -1) { + messageApi.error('只能存在1个开始节点') + return + } + if (isEqual(key, 'end-amis-node') && findIdx(nodes, (node: Node) => isEqual(key, node.type)) > -1) { + messageApi.error('只能存在1个结束节点') return } @@ -359,6 +391,8 @@ function Test() { data: { getDataById, setDataById, + removeNode, + editNode, }, }) }, @@ -369,7 +403,15 @@ function Test() { 新增节点 -
+ + + {currentNodeForm} + - +
)