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,13 +69,7 @@ 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
-        className="node-card"
-        title={nodeName}
-        size="small"
-        hoverable
-      >
       <Dropdown
         className="card-container"
         trigger={['contextMenu']}
@@ -127,13 +121,18 @@ const AmisNode = (
             }
           },
         }}
+      >
+        <Card
+          className="node-card"
+          title={nodeName}
+          size="small"
         >
           <div className="card-description p-2 text-secondary text-sm">
             {nodeDescription}
             {extraNodeDescription?.(nodeData)}
           </div>
-        </Dropdown>
         </Card>
+      </Dropdown>
       {isEqual(type, 'start') || isEqual(type, 'normal')
         ? <Handle type="source" position={Position.Right}/> : undefined}
       {isEqual(type, 'end') || isEqual(type, 'normal')