refractor(web): 增加输入节点

2025-07-20 17:17:22 +08:00
parent 77a09472aa
commit a5282762ed
14 changed files with 462 additions and 257 deletions
--- a/service-web/client/src/components/flow/node/InputNode.tsx
+++ b/service-web/client/src/components/flow/node/InputNode.tsx
@@ -0,0 +1,123 @@
+import type {NodeProps} from '@xyflow/react'
+import React, {useCallback} from 'react'
+import AmisNode, {nodeClassName, outputsFormColumns, StartNodeHandler} from './AmisNode.tsx'
+import {horizontalFormOptions} from '../../../util/amis.tsx'
+import {typeMap} from '../../../pages/ai/task/InputSchema.tsx'
+import type {FormSchema, OutputVariableType} from '../types.ts'
+import {isEmpty} from 'licia'
+
+const originTypeMap: Record<string, OutputVariableType> = {
+  text: 'text',
+  textarea: 'text',
+  number: 'number',
+  files: 'array-text',
+}
+
+const InputNode = (props: NodeProps) => {
+  const formSchema: () => FormSchema = useCallback(() => ({
+    events: {
+      change: {
+        actions: [
+          {
+            actionType: 'validate',
+          },
+          {
+            actionType: 'custom',
+            // @ts-ignore
+            script: (context, doAction, event) => {
+              let data = event?.data
+              console.log(data)
+              if (data && isEmpty(data?.validateResult?.error ?? undefined)) {
+                let inputs = data.validateResult?.payload?.inputs ?? {}
+                if (inputs) {
+                  let outputs: Record<string, { type: OutputVariableType }> = {}
+                  for (let key of Object.keys(inputs)) {
+                    outputs[key] = {
+                      type: originTypeMap[inputs[key].type],
+                    }
+                  }
+                  doAction({
+                    actionType: 'setValue',
+                    args: {
+                      value: {
+                        outputs
+                      },
+                    },
+                  })
+                }
+              }
+            },
+          },
+        ]
+      }
+    },
+    columns: [
+      {
+        type: 'input-kvs',
+        name: 'inputs',
+        label: '输入变量',
+        required: true,
+        addButtonText: '新增入参',
+        draggable: false,
+        keyItem: {
+          label: '参数名称',
+          ...horizontalFormOptions(),
+          validations: {
+            isAlphanumeric: true,
+          },
+        },
+        valueItems: [
+          {
+            ...horizontalFormOptions(),
+            type: 'input-text',
+            name: 'label',
+            required: true,
+            label: '中文名称',
+            clearValueOnEmpty: true,
+            clearable: true,
+          },
+          {
+            ...horizontalFormOptions(),
+            type: 'input-text',
+            name: 'description',
+            label: '参数描述',
+            clearValueOnEmpty: true,
+            clearable: true,
+          },
+          {
+            ...horizontalFormOptions(),
+            type: 'select',
+            name: 'type',
+            label: '参数类型',
+            required: true,
+            selectFirst: true,
+            options: Object.keys(typeMap).map(key => ({label: typeMap[key], value: key})),
+          },
+          {
+            ...horizontalFormOptions(),
+            type: 'switch',
+            name: 'required',
+            label: '是否必填',
+            required: true,
+            value: true,
+          },
+        ],
+      },
+      {
+        type: 'divider',
+      },
+      ...outputsFormColumns(false, false),
+    ]
+  }), [props.id])
+
+  return (
+    <AmisNode
+      className={nodeClassName('input')}
+      nodeProps={props}
+      formSchema={formSchema}
+      handler={<StartNodeHandler/>}
+    />
+  )
+}
+
+export default React.memo(InputNode)