27 lines
1.0 KiB
TypeScript
27 lines
1.0 KiB
TypeScript
// File: frontend/app/workflow/components/OutputNode.tsx
|
|
// Description: 自定义结束节点组件
|
|
|
|
import React, { memo } from 'react';
|
|
import { Handle, Position } from 'reactflow';
|
|
import { CheckCircle } from 'lucide-react';
|
|
import type { OutputNodeData, CustomNodeProps } from './types'; // 导入类型
|
|
|
|
const OutputNodeComponent = ({ data }: CustomNodeProps<OutputNodeData>) => {
|
|
return (
|
|
<div className="react-flow__node-default bg-blue-100 dark:bg-blue-900 border-blue-300 dark:border-blue-700 p-4 rounded-lg shadow-md w-40">
|
|
<Handle
|
|
type="target"
|
|
position={Position.Top}
|
|
id="output-target"
|
|
className="w-3 h-3 !bg-blue-500"
|
|
/>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<CheckCircle size={16} className="text-blue-700 dark:text-blue-300" />
|
|
<strong className="text-blue-800 dark:text-blue-200">{data.label || '结束流程'}</strong>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
OutputNodeComponent.displayName = 'OutputNode';
|
|
export const OutputNode = memo(OutputNodeComponent); |