feat(web): 优化流程界面显示

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

@@ -16,7 +16,7 @@ import {arrToMap, 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 {amisRender, commonInfo} from '../../../util/amis.tsx'
+import {amisRender, commonInfo, horizontalFormOptions} from '../../../util/amis.tsx'
 import StartNode from './node/StartNode.tsx'
 import EndNode from './node/EndNode.tsx'
 import LlmNode from './node/LlmNode.tsx'
@@ -103,15 +103,10 @@ function FlowEditor() {
             type: 'wrapper',
             size: 'none',
             body: [
-              {
-                type: 'tpl',
-                className: 'text-secondary',
-                tpl: description,
-              },
               {
                 debug: commonInfo.debug,
-                title: name,
                 type: 'form',
+                ...horizontalFormOptions(),
                 wrapWithPanel: false,
                 onEvent: {
                   submitSucc: {
@@ -229,6 +224,7 @@ function FlowEditor() {
         closeIcon={false}
         maskClosable={false}
         destroyOnHidden
+        size="large"
       >
         {currentNodeForm}
       </Drawer>

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

@@ -2,24 +2,30 @@ import {Handle, type NodeProps, Position} from '@xyflow/react'
 import type {Schema} from 'amis'
 import {Card, Dropdown} from 'antd'
 import {DeleteFilled, EditFilled} from '@ant-design/icons'
-import {isEqual} from 'licia'
+import {isEmpty, isEqual} from 'licia'
+import type {JSX} from 'react'
 
 export type AmisNodeType = 'normal' | 'start' | 'end'
 
 const AmisNode = (
   props: NodeProps,
   type: AmisNodeType,
-  name: String,
-  description?: String,
+  defaultNodeName: String,
+  defaultNodeDescription?: String,
+  extraNodeDescription?: (nodeData: any) => JSX.Element,
   columnSchema?: Schema[],
 ) => {
   const {id, data} = props
   const {getDataById, removeNode, editNode} = data
+  // @ts-ignore
+  const nodeData = getDataById(id)
+  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">
       <Card
         className="node-card"
-        title={name}
+        title={nodeName}
         size="small"
         hoverable
       >
@@ -43,7 +49,29 @@ const AmisNode = (
               switch (menu.key) {
                 case 'edit':
                   // @ts-ignore
-                  editNode(id, name, description, columnSchema)
+                  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
@@ -54,7 +82,8 @@ const AmisNode = (
           }}
         >
           <div className="card-description p-2 text-secondary text-sm">
-            {description}
+            {nodeDescription}
+            {extraNodeDescription?.(nodeData)}
           </div>
         </Dropdown>
       </Card>

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

@@ -1,22 +1,27 @@
 import type {NodeProps} from '@xyflow/react'
 import AmisNode from './AmisNode.tsx'
+import {horizontalFormOptions} from '../../../../util/amis.tsx'
 
 const EndNode = (props: NodeProps) => AmisNode(
   props,
   'end',
   '结束节点',
   '定义输出变量',
+  undefined,
   [
     {
       type: 'input-kvs',
-      name: 'fields',
+      name: 'outputVariables',
+      label: '输出变量',
       addButtonText: '新增输出',
       draggable: false,
       keyItem: {
+        ...horizontalFormOptions(),
         label: '参数名称',
       },
       valueItems: [
         {
+          ...horizontalFormOptions(),
           type: 'select',
           name: 'type',
           label: '参数',

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

@@ -6,6 +6,7 @@ const LlmNode = (props: NodeProps) => AmisNode(
   'normal',
   '大模型节点',
   '使用大模型对话',
+  undefined,
   [
     {
       type: 'select',

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

@@ -1,27 +1,33 @@
 import type {NodeProps} from '@xyflow/react'
 import AmisNode from './AmisNode.tsx'
+import {horizontalFormOptions} from '../../../../util/amis.tsx'
 
 const StartNode = (props: NodeProps) => AmisNode(
   props,
   'start',
   '开始节点',
   '定义输入变量',
+  undefined,
   [
     {
       type: 'input-kvs',
-      name: 'fields',
+      name: 'inputVariables',
+      label: '输入变量',
       addButtonText: '新增入参',
       draggable: false,
       keyItem: {
         label: '参数名称',
+        ...horizontalFormOptions(),
       },
       valueItems: [
         {
+          ...horizontalFormOptions(),
           type: 'input-text',
           name: 'description',
           label: '参数描述',
         },
         {
+          ...horizontalFormOptions(),
           type: 'select',
           name: 'type',
           label: '参数类型',

service-web/client/src/util/amis.tsx

@@ -274,6 +274,15 @@ export function serviceLogByAppNameAndHost(name: string, host: string) {
   )
 }
 
+export function horizontalFormOptions() {
+  return {
+    mode: 'horizontal',
+    horizontal: {
+      leftFixed: 'sm'
+    },
+  }
+}
+
 export function crudCommonOptions() {
   return {
     affixHeader: false,