feat(web): 优化编辑界面

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()
@@ -33,8 +34,19 @@ const App: React.FC = () => {
       splitMenus={true}
       style={{minHeight: '100vh'}}
       contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
+    >
+      <ConfigProvider
+      theme={{
+        components: {
+          Card: {
+            bodyPadding: 0,
+            bodyPaddingSM: 0,
+          }
+        }
+      }}
       >
         <Outlet/>
+      </ConfigProvider>
     </ProLayout>
   )
 }

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 (
-    <div className="p-1 w-72">
-      {/*{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,
-                },
-              ],
-            },
-        },
-      )}*/}
-      <Popover
-        content={
-          <EditFilled/>
-        }
-      >
+    <div className="p-1 w-64">
       <Card
+        title={name}
         size="small"
-          actions={[
-            <EditFilled key="edit"/>,
-            <DeleteFilled key="remove"/>,
-          ]}
         hoverable
       >
-          <Card.Meta title={name} description={description}/>
+        <Dropdown
+          trigger={['contextMenu']}
+          menu={{
+            items: [
+              {
+                key: 'edit',
+                label: '编辑',
+                icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
+              },
+              {
+                key: 'remove',
+                label: '删除',
+                icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
+              },
+            ],
+            onClick: menu => {
+              switch (menu.key) {
+                case 'edit':
+                  // @ts-ignore
+                  editNode(id, name, description, columnSchema)
+                  break
+                case 'remove':
+                  // @ts-ignore
+                  removeNode(id)
+                  break
+              }
+            }
+          }}
+        >
+          <div className="card-description p-2 text-secondary text-sm">
+            {description}
+          </div>
+        </Dropdown>
       </Card>
-      </Popover>
       {isEqual(type, 'start') || isEqual(type, 'normal')
         ? <Handle type="source" position={Position.Right}/> : 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<JSX.Element>()
+  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 (
     <FlowableDiv>
       {contextHolder}
-      <div className="toolbar space-x-2">
-        <Button type="primary" onClick={() => console.log(getData())}>
+      <Space className="toolbar">
+        <Button type="primary" onClick={() => console.log(JSON.stringify(getData()))}>
           <SaveFilled/>
           保存
         </Button>
@@ -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() {
             新增节点
           </Button>
         </Dropdown>
-      </div>
+      </Space>
+      <Drawer
+        title="节点编辑"
+        open={open}
+        onClose={onClose}
+        destroyOnHidden
+      >
+        {currentNodeForm}
+      </Drawer>
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -384,7 +426,7 @@ function Test() {
       >
         <Controls/>
         <MiniMap/>
-        <Background variant={BackgroundVariant.Dots} gap={12} size={1}/>
+        <Background variant={BackgroundVariant.Cross} gap={20} size={3}/>
       </ReactFlow>
     </FlowableDiv>
   )