feat(web): 优化样式

service-web/client/src/pages/ai/flow/FlowEditor.tsx

@@ -26,16 +26,37 @@ import {useDataStore} from './store/DataStore.ts'
 import {useFlowStore} from './store/FlowStore.ts'
 
 const FlowableDiv = styled.div`
-    height: 92vh;
+    height: 100%;
+
+    .react-flow__node.selectable {
+        &:focus {
+            box-shadow: 0 0 20px 1px #e8e8e8;
+            border-radius: 8px;
+        }
+    }
+
+    .react-flow__handle.connectionindicator {
+        width: 10px;
+        height: 10px;
+        background-color: #ffffff;
+        border: 1px solid #000000;
+
+        &:hover {
+            background-color: #e8e8e8;
+            border: 1px solid #c6c6c6;
+        }
+    }
 
     .toolbar {
+        position: absolute;
+        right: 20px;
+        top: 20px;
     }
 
     .node-card {
-        cursor: grab;
+        cursor: default;
 
         .card-container {
-            cursor: default;
         }
     }
 `
@@ -112,7 +133,7 @@ function FlowEditor() {
                   {
                     type: 'wrapper',
                     size: 'none',
-                    className: 'space-x-1 float-right',
+                    className: 'space-x-2 text-right',
                     body: [
                       {
                         type: 'action',
@@ -258,10 +279,10 @@ function FlowEditor() {
       "data": {
         "BMFP3Eov94": {
           "inputs": {
-            "文件名": {
+            "name": {
               "type": "text"
             },
-            "文件描述": {
+            "description": {
               "type": "text",
               "description": "文件描述"
             }

service-web/client/src/pages/ai/flow/node/AmisNode.tsx

@@ -69,71 +69,70 @@ const AmisNode = (
   const nodeName = isEmpty(nodeData?.node?.name) ? defaultNodeName : nodeData.node.name
   const nodeDescription = isEmpty(nodeData?.node?.description) ? defaultNodeDescription : nodeData.node?.description
   return (
-    <div className="p-1 w-64">
+    <div className="w-64">
-      <Card
+      <Dropdown
-        className="node-card"
+        className="card-container"
-        title={nodeName}
+        trigger={['contextMenu']}
-        size="small"
+        menu={{
-        hoverable
+          items: [
-      >
+            {
-        <Dropdown
+              key: 'edit',
-          className="card-container"
+              label: '编辑',
-          trigger={['contextMenu']}
+              icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
-          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,
-                    defaultNodeName,
-                    defaultNodeDescription,
-                    [
-                      {
-                        type: 'input-text',
-                        name: 'node.name',
-                        label: '节点名称',
-                        placeholder: nodeName,
-                      },
-                      {
-                        type: 'textarea',
-                        name: 'node.description',
-                        label: '节点描述',
-                        placeholder: nodeDescription,
-                      },
-                      {
-                        type: 'divider',
-                      },
-                      ...(columnSchema ?? []),
-                    ],
-                  )
-                  break
-                case 'remove':
-                  // @ts-ignore
-                  removeNode(id)
-                  break
-              }
             },
-          }}
+            {
+              key: 'remove',
+              label: '删除',
+              icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
+            },
+          ],
+          onClick: menu => {
+            switch (menu.key) {
+              case 'edit':
+                // @ts-ignore
+                editNode(
+                  id,
+                  defaultNodeName,
+                  defaultNodeDescription,
+                  [
+                    {
+                      type: 'input-text',
+                      name: 'node.name',
+                      label: '节点名称',
+                      placeholder: nodeName,
+                    },
+                    {
+                      type: 'textarea',
+                      name: 'node.description',
+                      label: '节点描述',
+                      placeholder: nodeDescription,
+                    },
+                    {
+                      type: 'divider',
+                    },
+                    ...(columnSchema ?? []),
+                  ],
+                )
+                break
+              case 'remove':
+                // @ts-ignore
+                removeNode(id)
+                break
+            }
+          },
+        }}
+      >
+        <Card
+          className="node-card"
+          title={nodeName}
+          size="small"
         >
           <div className="card-description p-2 text-secondary text-sm">
             {nodeDescription}
             {extraNodeDescription?.(nodeData)}
           </div>
-        </Dropdown>
+        </Card>
-      </Card>
+      </Dropdown>
       {isEqual(type, 'start') || isEqual(type, 'normal')
         ? <Handle type="source" position={Position.Right}/> : undefined}
       {isEqual(type, 'end') || isEqual(type, 'normal')