146 lines
4.2 KiB
TypeScript
146 lines
4.2 KiB
TypeScript
import {DeleteFilled, EditFilled} from '@ant-design/icons'
|
|
import {Handle, type NodeProps, Position} from '@xyflow/react'
|
|
import type {Schema} from 'amis'
|
|
import {Card, Dropdown} from 'antd'
|
|
import {isEmpty, isEqual} from 'licia'
|
|
import type {JSX} from 'react'
|
|
import {horizontalFormOptions} from '../../../../util/amis.tsx'
|
|
|
|
export type AmisNodeType = 'normal' | 'start' | 'end'
|
|
|
|
export function outputsFormColumns(editable: boolean = false, preload?: any): Schema[] {
|
|
return [
|
|
{
|
|
disabled: !editable,
|
|
type: 'input-kvs',
|
|
name: 'outputs',
|
|
label: '输出变量',
|
|
value: preload,
|
|
addButtonText: '新增输出',
|
|
draggable: false,
|
|
keyItem: {
|
|
...horizontalFormOptions(),
|
|
label: '参数名称',
|
|
},
|
|
valueItems: [
|
|
{
|
|
...horizontalFormOptions(),
|
|
type: 'select',
|
|
name: 'type',
|
|
label: '参数',
|
|
required: true,
|
|
selectFirst: true,
|
|
options: [
|
|
{
|
|
label: '文本',
|
|
value: 'string',
|
|
},
|
|
{
|
|
label: '数字',
|
|
value: 'number',
|
|
},
|
|
{
|
|
label: '文本数组',
|
|
value: 'array-string',
|
|
},
|
|
{
|
|
label: '对象数组',
|
|
value: 'array-object',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
]
|
|
}
|
|
|
|
const AmisNode = (
|
|
props: NodeProps,
|
|
type: AmisNodeType,
|
|
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={nodeName}
|
|
size="small"
|
|
hoverable
|
|
>
|
|
<Dropdown
|
|
className="card-container"
|
|
trigger={['contextMenu']}
|
|
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
|
|
}
|
|
},
|
|
}}
|
|
>
|
|
<div className="card-description p-2 text-secondary text-sm">
|
|
{nodeDescription}
|
|
{extraNodeDescription?.(nodeData)}
|
|
</div>
|
|
</Dropdown>
|
|
</Card>
|
|
{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>
|
|
)
|
|
}
|
|
|
|
export default AmisNode
|