2025-05-01 14:10:46 +08:00

29 lines
1.0 KiB
TypeScript

// File: frontend/app/workflow/components/StartNode.tsx
// Description: 自定义开始节点组件
import React, { memo } from 'react';
import { Handle, Position } from 'reactflow';
import { Play } from 'lucide-react';
import type { StartNodeData, CustomNodeProps } from './types'; // 导入类型
const StartNodeComponent = ({ data }: CustomNodeProps<StartNodeData>) => {
return (
<div className="react-flow__node-default bg-green-100 dark:bg-green-900 border-green-300 dark:border-green-700 p-4 rounded-lg shadow-md w-40">
<div className="flex items-center gap-2 mb-2">
<Play size={16} className="text-green-700 dark:text-green-300" />
<strong className="text-green-800 dark:text-green-200">{data.label || '开始流程'}</strong>
</div>
<Handle
type="source"
position={Position.Bottom}
id="start-source"
className="w-3 h-3 !bg-green-500"
/>
</div>
);
};
StartNodeComponent.displayName = 'StartNode';
// 使用 memo 优化
export const StartNode = memo(StartNodeComponent);