80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import type {NodeProps} from '@xyflow/react'
|
|
import {Tag} from 'antd'
|
|
import React, {useCallback, useEffect} from 'react'
|
|
import {useContextStore} from '../store/ContextStore.ts'
|
|
import {useDataStore} from '../store/DataStore.ts'
|
|
import {useFlowStore} from '../store/FlowStore.ts'
|
|
import AmisNode, {inputsFormColumns, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
|
|
|
|
const languageMap: Record<string, string> = {
|
|
'javascript': 'Javascript',
|
|
'python': 'Python',
|
|
'Lua': 'lua',
|
|
}
|
|
|
|
const CodeNode = (props: NodeProps) => {
|
|
const {getNodes, getEdges} = useFlowStore()
|
|
const {getData, mergeDataById, getDataById} = useDataStore()
|
|
const {getInputSchema} = useContextStore()
|
|
|
|
const nodeData = getDataById(props.id)
|
|
|
|
useEffect(() => {
|
|
mergeDataById(
|
|
props.id,
|
|
{
|
|
outputs: {
|
|
result: {
|
|
type: 'string',
|
|
},
|
|
},
|
|
},
|
|
)
|
|
}, [props.id])
|
|
|
|
const columnsSchema = useCallback(() => [
|
|
...inputsFormColumns(props.id, getInputSchema(), getNodes(), getEdges(), getData()),
|
|
{
|
|
type: 'divider',
|
|
},
|
|
{
|
|
type: 'select',
|
|
name: 'type',
|
|
label: '代码类型',
|
|
required: true,
|
|
selectFirst: true,
|
|
options: Object.keys(languageMap).map(key => ({label: languageMap[key], value: key})),
|
|
},
|
|
{
|
|
type: 'editor',
|
|
required: true,
|
|
label: '代码内容',
|
|
name: 'content',
|
|
language: '${type}',
|
|
options: {
|
|
wordWrap: 'bounded',
|
|
},
|
|
},
|
|
{
|
|
type: 'divider',
|
|
},
|
|
...outputsFormColumns(true, true),
|
|
], [props.id])
|
|
return (
|
|
<AmisNode
|
|
nodeProps={props}
|
|
extraNodeDescription={
|
|
nodeData?.type
|
|
? <div className="mt-2 flex justify-between">
|
|
<span>代码类型</span>
|
|
<Tag className="m-0" color="blue">{languageMap[nodeData.type]}</Tag>
|
|
</div>
|
|
: <></>
|
|
}
|
|
columnSchema={columnsSchema}
|
|
handler={<NormalNodeHandler/>}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default React.memo(CodeNode) |