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

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>
+      <NodeToolbar>
+        <Space>
+          <Tooltip title="复制节点">
+            <Button
+              className="text-secondary"
+              disabled
+              type="text"
+              size="small"
+              icon={<CopyFilled/>}
+            />
+          </Tooltip>
+          <Tooltip title="编辑节点">
+            <Button
+              className="text-secondary"
+              type="text"
+              size="small"
+              icon={<EditFilled/>}
+              onClick={() => onOpenEditDrawerClick()}
+            />
+          </Tooltip>
+          <Tooltip title="删除节点">
+            <Button
+              className="text-secondary"
+              type="text"
+              size="small"
+              icon={<DeleteFilled/>}
+              onClick={() => onRemoveClick()}
+            />
+          </Tooltip>
+        </Space>
+      </NodeToolbar>
       <Card
         className="node-card"
         title={nodeName}
         extra={<span className="text-gray-300 text-xs">{id}</span>}
         size="small"
-        actions={[
-          <Button
-            className="text-secondary"
-            disabled
-            type="text"
-            size="small"
-            icon={<CopyFilled/>}
-            block
-          />,
-          <Button
-            className="text-secondary"
-            type="text"
-            size="small"
-            icon={<EditFilled/>}
-            block
-            onClick={() => onOpenEditDrawerClick()}
-          />,
-          <Button
-            className="text-secondary"
-            type="text"
-            size="small"
-            icon={<DeleteFilled/>}
-            block
-            onClick={() => onRemoveClick()}
-          />,
-        ]}
       >
         <div className="card-description p-2 text-secondary text-sm">
           {nodeDescription}