feat(web): 增加流程定义基本能力
This commit is contained in:
v-zhangjc9
@@ -1,19 +1,378 @@
|
||||
import {Tinyflow} from '@tinyflow-ai/react'
|
||||
import '@tinyflow-ai/react/dist/index.css'
|
||||
import {PlusCircleFilled, SaveFilled} from '@ant-design/icons'
|
||||
import {
|
||||
addEdge,
|
||||
applyEdgeChanges,
|
||||
applyNodeChanges,
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
Controls,
|
||||
type Edge,
|
||||
Handle,
|
||||
MiniMap,
|
||||
type Node,
|
||||
type NodeProps,
|
||||
type OnConnect,
|
||||
type OnEdgesChange,
|
||||
type OnNodesChange,
|
||||
Position,
|
||||
ReactFlow,
|
||||
} from '@xyflow/react'
|
||||
import {useMount} from 'ahooks'
|
||||
import type {Schema} from 'amis'
|
||||
import {Button, Dropdown, message} from 'antd'
|
||||
import {arrToMap, contain, find, isEqual, isNil, randomId} from 'licia'
|
||||
import {type JSX, useState} from 'react'
|
||||
import styled from 'styled-components'
|
||||
import '@xyflow/react/dist/style.css'
|
||||
import {create} from 'zustand/react'
|
||||
import {amisRender, commonInfo} from '../util/amis.tsx'
|
||||
|
||||
function Test() {
|
||||
const FlowableDiv = styled.div`
|
||||
height: 93vh;
|
||||
|
||||
.toolbar {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
}
|
||||
`
|
||||
|
||||
type AmisNodeType = 'normal' | 'start' | 'end'
|
||||
|
||||
const AmisNode = (
|
||||
props: NodeProps,
|
||||
type: AmisNodeType,
|
||||
name: String,
|
||||
description?: String,
|
||||
columnSchema?: Schema[],
|
||||
) => {
|
||||
const {id, data} = props
|
||||
const {setDataById} = data
|
||||
return (
|
||||
<div className="flowable">
|
||||
<Tinyflow
|
||||
className="tinyflow-instance"
|
||||
style={{height: '95vh'}}
|
||||
onDataChange={(value) => {
|
||||
console.log(value)
|
||||
console.log(JSON.stringify(value))
|
||||
}}
|
||||
/>
|
||||
<div className="p-1 w-80">
|
||||
{amisRender(
|
||||
{
|
||||
type: 'card',
|
||||
header: {
|
||||
title: name,
|
||||
subTitle: description,
|
||||
},
|
||||
body: isNil(columnSchema)
|
||||
? undefined
|
||||
: {
|
||||
debug: commonInfo.debug,
|
||||
type: 'form',
|
||||
className: 'nodrag nopan',
|
||||
wrapWithPanel: false,
|
||||
onEvent: {
|
||||
change: {
|
||||
actions: [
|
||||
{
|
||||
actionType: 'custom',
|
||||
// @ts-ignore
|
||||
script: (context, action, event) => {
|
||||
// @ts-ignore
|
||||
setDataById(id, context.props.data)
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
body: [
|
||||
...(columnSchema ?? []),
|
||||
{
|
||||
type: 'hidden',
|
||||
name: 'nodeId',
|
||||
value: props.id,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
)}
|
||||
{isEqual(type, 'start') || isEqual(type, 'normal')
|
||||
? <Handle type="source" position={Position.Right}/> : undefined}
|
||||
{isEqual(type, 'end') || isEqual(type, 'normal')
|
||||
? <Handle type="target" position={Position.Left}/> : undefined}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const StartAmisNode = (props: NodeProps) => AmisNode(
|
||||
props,
|
||||
'start',
|
||||
'开始节点',
|
||||
'定义输入变量',
|
||||
[
|
||||
{
|
||||
type: 'input-kvs',
|
||||
name: 'fields',
|
||||
addButtonText: '新增入参',
|
||||
draggable: false,
|
||||
keyItem: {
|
||||
label: '参数名称',
|
||||
},
|
||||
valueItems: [
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'description',
|
||||
label: '参数描述',
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: 'type',
|
||||
label: '参数类型',
|
||||
required: true,
|
||||
selectFirst: true,
|
||||
options: [
|
||||
{
|
||||
label: '文本',
|
||||
value: 'text',
|
||||
},
|
||||
{
|
||||
label: '数字',
|
||||
value: 'number',
|
||||
},
|
||||
{
|
||||
label: '文件',
|
||||
value: 'files',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
)
|
||||
const EndAmisNode = (props: NodeProps) => AmisNode(
|
||||
props,
|
||||
'end',
|
||||
'结束节点',
|
||||
'定义输出变量',
|
||||
[
|
||||
{
|
||||
type: 'input-kvs',
|
||||
name: 'fields',
|
||||
addButtonText: '新增输出',
|
||||
draggable: false,
|
||||
keyItem: {
|
||||
label: '参数名称',
|
||||
},
|
||||
valueItems: [
|
||||
{
|
||||
type: 'select',
|
||||
name: 'type',
|
||||
label: '参数',
|
||||
required: true,
|
||||
selectFirst: true,
|
||||
options: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
)
|
||||
const LlmAmisNode = (props: NodeProps) => AmisNode(
|
||||
props,
|
||||
'normal',
|
||||
'大模型节点',
|
||||
'使用大模型对话',
|
||||
[
|
||||
{
|
||||
type: 'select',
|
||||
name: 'model',
|
||||
label: '大模型',
|
||||
required: true,
|
||||
selectFirst: true,
|
||||
options: [
|
||||
{
|
||||
label: 'Qwen3',
|
||||
value: 'qwen3',
|
||||
},
|
||||
{
|
||||
label: 'Deepseek',
|
||||
value: 'deepseek',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'textarea',
|
||||
name: 'systemPrompt',
|
||||
label: '系统提示词',
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
)
|
||||
|
||||
const initialNodes: Node[] = [
|
||||
{
|
||||
id: 'BMFP3Eov94',
|
||||
type: 'start-amis-node',
|
||||
position: {x: 10, y: 50},
|
||||
data: {},
|
||||
},
|
||||
{
|
||||
id: 'PYK8LjduQ1',
|
||||
type: 'end-amis-node',
|
||||
position: {x: 500, y: 50},
|
||||
data: {},
|
||||
},
|
||||
]
|
||||
const initialEdges: Edge[] = []
|
||||
|
||||
const useStore = create<{
|
||||
data: Record<string, any>,
|
||||
getData: () => Record<string, any>,
|
||||
setData: (data: Record<string, any>) => void,
|
||||
getDataById: (id: string) => any,
|
||||
setDataById: (id: string, data: any) => void,
|
||||
}>((set, get) => ({
|
||||
data: {},
|
||||
getData: () => get().data,
|
||||
setData: (data) => set(data),
|
||||
getDataById: id => get().data[id],
|
||||
setDataById: (id, data) => {
|
||||
let updateData = get().data
|
||||
updateData[id] = data
|
||||
set({
|
||||
data: updateData,
|
||||
})
|
||||
},
|
||||
}))
|
||||
|
||||
const useFlowStore = create<{
|
||||
nodes: Node[],
|
||||
onNodesChange: OnNodesChange,
|
||||
addNode: (node: Node) => void,
|
||||
setNodes: (nodes: Node[]) => void,
|
||||
|
||||
edges: Edge[],
|
||||
onEdgesChange: OnEdgesChange,
|
||||
setEdges: (edges: Edge[]) => void,
|
||||
|
||||
onConnect: OnConnect,
|
||||
}>((set, get) => ({
|
||||
nodes: [],
|
||||
onNodesChange: changes => {
|
||||
set({
|
||||
nodes: applyNodeChanges(changes, get().nodes),
|
||||
})
|
||||
},
|
||||
addNode: node => set({nodes: get().nodes.concat(node)}),
|
||||
setNodes: nodes => set({nodes}),
|
||||
|
||||
edges: [],
|
||||
onEdgesChange: changes => {
|
||||
set({
|
||||
edges: applyEdgeChanges(changes, get().edges),
|
||||
})
|
||||
},
|
||||
setEdges: edges => set({edges}),
|
||||
|
||||
onConnect: connection => {
|
||||
set({
|
||||
edges: addEdge(connection, get().edges),
|
||||
})
|
||||
},
|
||||
}))
|
||||
|
||||
function Test() {
|
||||
const [messageApi, contextHolder] = message.useMessage()
|
||||
const [nodeDef] = useState<{
|
||||
key: string,
|
||||
name: string,
|
||||
component: (props: NodeProps) => JSX.Element
|
||||
}[]>([
|
||||
{
|
||||
key: 'start-amis-node',
|
||||
name: '开始',
|
||||
component: StartAmisNode,
|
||||
},
|
||||
{
|
||||
key: 'end-amis-node',
|
||||
name: '结束',
|
||||
component: EndAmisNode,
|
||||
},
|
||||
{
|
||||
key: 'llm-amis-node',
|
||||
name: '大模型',
|
||||
component: LlmAmisNode,
|
||||
},
|
||||
])
|
||||
|
||||
const {getData, getDataById, setDataById} = useStore()
|
||||
const {
|
||||
nodes,
|
||||
addNode,
|
||||
setNodes,
|
||||
onNodesChange,
|
||||
edges,
|
||||
setEdges,
|
||||
onEdgesChange,
|
||||
onConnect,
|
||||
} = useFlowStore()
|
||||
|
||||
useMount(() => {
|
||||
for (let node of initialNodes) {
|
||||
node.data = {
|
||||
getDataById,
|
||||
setDataById,
|
||||
}
|
||||
}
|
||||
setNodes(initialNodes)
|
||||
setEdges(initialEdges)
|
||||
})
|
||||
|
||||
return (
|
||||
<FlowableDiv>
|
||||
{contextHolder}
|
||||
<div className="toolbar space-x-2">
|
||||
<Button type="primary" onClick={() => console.log(getData())}>
|
||||
<SaveFilled/>
|
||||
保存
|
||||
</Button>
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: nodeDef.map(def => ({key: def.key, label: def.name})),
|
||||
onClick: ({key}) => {
|
||||
if (isEqual(key, 'start-amis-node') || isEqual(key, 'end-amis-node')) {
|
||||
contain(nodes, (node: Node) => isEqual(key, node.type))
|
||||
messageApi.error('只能存在1个开始/结束节点')
|
||||
return
|
||||
}
|
||||
|
||||
addNode({
|
||||
id: randomId(10),
|
||||
type: key,
|
||||
position: {x: 100, y: 100},
|
||||
data: {
|
||||
getDataById,
|
||||
setDataById,
|
||||
},
|
||||
})
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button type="dashed">
|
||||
<PlusCircleFilled/>
|
||||
新增节点
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onConnect={onConnect}
|
||||
// @ts-ignore
|
||||
nodeTypes={arrToMap(
|
||||
nodeDef.map(def => def.key),
|
||||
key => find(nodeDef, def => isEqual(key, def.key))!.component)
|
||||
}
|
||||
>
|
||||
<Controls/>
|
||||
<MiniMap/>
|
||||
<Background variant={BackgroundVariant.Dots} gap={12} size={1}/>
|
||||
</ReactFlow>
|
||||
</FlowableDiv>
|
||||
)
|
||||
}
|
||||
|
||||
export default Test
|
||||
Reference in New Issue
Block a user