refractor(web): 优化节点和流程图显示效果

service-web/client/src/components/flow/FlowEditor.tsx

@@ -1,5 +1,5 @@
 import {PlusCircleFilled, RollbackOutlined, SaveFilled} from '@ant-design/icons'
-import {Background, BackgroundVariant, Controls, MiniMap, ReactFlow} from '@xyflow/react'
+import {Background, BackgroundVariant, Controls, MiniMap, Panel, ReactFlow} from '@xyflow/react'
 import {Button, Dropdown, message, Popconfirm, Space} from 'antd'
 import {arrToMap, isEqual, randomId, unique} from 'licia'
 import {useEffect} from 'react'
@@ -34,13 +34,6 @@ const FlowableDiv = styled.div`
         }
     }
 
-    .toolbar {
-        position: absolute;
-        right: 20px;
-        top: 20px;
-        z-index: 10;
-    }
-
     .node-card {
         cursor: default;
 
@@ -85,6 +78,27 @@ function FlowEditor(props: FlowEditorProps) {
   return (
     <FlowableDiv className="h-full w-full">
       {contextHolder}
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={(connection) => {
+          try {
+            if (commonInfo.debug) {
+              console.info('Connection', JSON.stringify(connection), JSON.stringify({nodes, edges, data}))
+            }
+            checkAddConnection(connection, nodes, edges)
+            onConnect(connection)
+          } catch (e) {
+            // @ts-ignore
+            messageApi.error(e.toString())
+          }
+        }}
+        // @ts-ignore
+        nodeTypes={arrToMap(Object.keys(NodeRegistryMap), key => NodeRegistryMap[key]!.component)}
+      >
+        <Panel position="top-right">
           <Space className="toolbar">
             <Dropdown
               menu={{
@@ -159,26 +173,7 @@ function FlowEditor(props: FlowEditorProps) {
               保存
             </Button>
           </Space>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={(connection) => {
-          try {
-            if (commonInfo.debug) {
-              console.info('Connection', JSON.stringify(connection), JSON.stringify({nodes, edges, data}))
-            }
-            checkAddConnection(connection, nodes, edges)
-            onConnect(connection)
-          } catch (e) {
-            // @ts-ignore
-            messageApi.error(e.toString())
-          }
-        }}
-        // @ts-ignore
-        nodeTypes={arrToMap(Object.keys(NodeRegistryMap), key => NodeRegistryMap[key]!.component)}
-      >
+        </Panel>
         <Controls/>
         <MiniMap/>
         <Background variant={BackgroundVariant.Cross} gap={20} size={3}/>

service-web/client/src/components/flow/node/AmisNode.tsx

@@ -1,7 +1,7 @@
 import {CopyFilled, DeleteFilled, EditFilled} from '@ant-design/icons'
-import {type Edge, Handle, type Node, type NodeProps, Position} from '@xyflow/react'
+import {type Edge, Handle, type Node, type NodeProps, NodeToolbar, Position} from '@xyflow/react'
 import type {Schema} from 'amis'
-import {Button, Card, Drawer} from 'antd'
+import {Button, Card, Drawer, Space, Tooltip} from 'antd'
 import {type JSX, useCallback, useState} from 'react'
 import styled from 'styled-components'
 import {amisRender, commonInfo, horizontalFormOptions} from '../../../util/amis.tsx'
@@ -247,37 +247,42 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
       >
         {editDrawerForm}
       </Drawer>
-      <Card
-        className="node-card"
-        title={nodeName}
-        extra={<span className="text-gray-300 text-xs">{id}</span>}
-        size="small"
-        actions={[
+      <NodeToolbar>
+        <Space>
+          <Tooltip title="复制节点">
             <Button
               className="text-secondary"
               disabled
               type="text"
               size="small"
               icon={<CopyFilled/>}
-            block
-          />,
+            />
+          </Tooltip>
+          <Tooltip title="编辑节点">
             <Button
               className="text-secondary"
               type="text"
               size="small"
               icon={<EditFilled/>}
-            block
               onClick={() => onOpenEditDrawerClick()}
-          />,
+            />
+          </Tooltip>
+          <Tooltip title="删除节点">
             <Button
               className="text-secondary"
               type="text"
               size="small"
               icon={<DeleteFilled/>}
-            block
               onClick={() => onRemoveClick()}
-          />,
-        ]}
+            />
+          </Tooltip>
+        </Space>
+      </NodeToolbar>
+      <Card
+        className="node-card"
+        title={nodeName}
+        extra={<span className="text-gray-300 text-xs">{id}</span>}
+        size="small"
       >
         <div className="card-description p-2 text-secondary text-sm">
           {nodeDescription}