aa6a9cbd84
Some checks failed
CI / Lint & TypeCheck (push) Has been cancelled
CI / Unit Tests (push) Has been cancelled
CI / Build Frontend (push) Has been cancelled
CI / Rust Check (push) Has been cancelled
CI / Security Scan (push) Has been cancelled
CI / E2E Tests (push) Has been cancelled
refactor: 统一Hands系统常量到单个源文件 refactor: 更新Hands中文名称和描述 fix: 修复技能市场在连接状态变化时重新加载 fix: 修复身份变更提案的错误处理逻辑 docs: 更新多个功能文档的验证状态和实现位置 docs: 更新Hands系统文档 test: 添加测试文件验证工作区路径
73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
/**
|
|
* Export Node Component
|
|
*
|
|
* Node for exporting workflow results to various formats.
|
|
*/
|
|
|
|
import React, { memo } from 'react';
|
|
import { Handle, Position, NodeProps } from '@xyflow/react';
|
|
import type { ExportNodeData } from '../../../lib/workflow-builder/types';
|
|
|
|
export const ExportNode = memo(({ data, selected }: NodeProps<ExportNodeData>) => {
|
|
const formatLabels: Record<string, string> = {
|
|
pptx: 'PowerPoint',
|
|
html: 'HTML',
|
|
pdf: 'PDF',
|
|
markdown: 'Markdown',
|
|
json: 'JSON',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`
|
|
px-4 py-3 rounded-lg border-2 min-w-[180px]
|
|
bg-blue-50 border-blue-300
|
|
${selected ? 'border-blue-500 shadow-lg shadow-blue-200' : ''}
|
|
`}
|
|
>
|
|
{/* Input Handle */}
|
|
<Handle
|
|
type="target"
|
|
position={Position.Left}
|
|
className="w-3 h-3 bg-blue-400 border-2 border-white"
|
|
/>
|
|
|
|
{/* Output Handle */}
|
|
<Handle
|
|
type="source"
|
|
position={Position.Right}
|
|
className="w-3 h-3 bg-blue-500 border-2 border-white"
|
|
/>
|
|
|
|
{/* Header */}
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="text-lg">📤</span>
|
|
<span className="font-medium text-blue-800">{data.label}</span>
|
|
</div>
|
|
|
|
{/* Formats */}
|
|
<div className="flex flex-wrap gap-1">
|
|
{data.formats.map((format) => (
|
|
<span
|
|
key={format}
|
|
className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded"
|
|
>
|
|
{formatLabels[format] || format}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
{/* Output Directory */}
|
|
{data.outputDir && (
|
|
<div className="text-xs text-blue-500 mt-2 truncate">
|
|
📁 {data.outputDir}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
ExportNode.displayName = 'ExportNode';
|
|
|
|
export default ExportNode;
|