diff --git a/web/apps/web-ele/src/views/ai-platform/workflow/editor/components/VariableSelector.vue b/web/apps/web-ele/src/views/ai-platform/workflow/editor/components/VariableSelector.vue index cd0eff4..d53a7d6 100644 --- a/web/apps/web-ele/src/views/ai-platform/workflow/editor/components/VariableSelector.vue +++ b/web/apps/web-ele/src/views/ai-platform/workflow/editor/components/VariableSelector.vue @@ -474,25 +474,6 @@ const availableNodes = computed(() => { ]; break; } - case 'text_to_sql': { - const textToSqlOutputVar = - node.data.output_variable || 'text_to_sql_result'; - variables = [ - { - key: `${textToSqlOutputVar}_sql`, - label: $t( - 'ai-platform.workflow.editor.variableSelector.generatedSqlStatement', - ), - }, - { - key: `${textToSqlOutputVar}_thought`, - label: $t( - 'ai-platform.workflow.editor.variableSelector.sqlThought', - ), - }, - ]; - break; - } default: { // 其他未知节点类型,尝试从 output_variable 获取 if (node.data.output_variable) { diff --git a/web/apps/web-ele/src/views/ai-platform/workflow/editor/nodes/BaseNode.vue b/web/apps/web-ele/src/views/ai-platform/workflow/editor/nodes/BaseNode.vue index b995139..99e0b36 100644 --- a/web/apps/web-ele/src/views/ai-platform/workflow/editor/nodes/BaseNode.vue +++ b/web/apps/web-ele/src/views/ai-platform/workflow/editor/nodes/BaseNode.vue @@ -10,8 +10,13 @@ import { ElTooltip } from 'element-plus'; import NodeResultCard from '../components/NodeResultCard.vue'; +type NodeColorConfig = { + headerBg: string; + iconBg: string; + iconColor: string; +}; + const props = defineProps<{ - // 新增:完整的执行结果(用于节点下方展示) executionResult?: NodeExecutionResult; executionStatus?: { elapsed_time?: number; @@ -29,12 +34,120 @@ const props = defineProps<{ }>(); const addButtonRef = ref(null); +const onNodeAddClick = inject< + (nodeId: string, position: { x: number; y: number }) => void +>('onNodeAddClick'); -// 从父组件注入的添加节点函数 -const onNodeAddClick = - inject<(nodeId: string, position: { x: number; y: number }) => void>( - 'onNodeAddClick', - ); +const nodeColorConfigs: Record = { + start: { + headerBg: + 'bg-gradient-to-r from-emerald-50 to-green-50 dark:from-emerald-950 dark:to-green-950', + iconBg: 'bg-emerald-200 dark:bg-emerald-800', + iconColor: 'text-emerald-600 dark:text-emerald-400', + }, + end: { + headerBg: + 'bg-gradient-to-r from-rose-50 to-red-50 dark:from-rose-950 dark:to-red-950', + iconBg: 'bg-rose-200 dark:bg-rose-800', + iconColor: 'text-rose-600 dark:text-rose-400', + }, + condition: { + headerBg: + 'bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-950 dark:to-yellow-950', + iconBg: 'bg-amber-200 dark:bg-amber-800', + iconColor: 'text-amber-600 dark:text-amber-400', + }, + parallel: { + headerBg: + 'bg-gradient-to-r from-cyan-50 to-sky-50 dark:from-cyan-950 dark:to-sky-950', + iconBg: 'bg-cyan-200 dark:bg-cyan-800', + iconColor: 'text-cyan-600 dark:text-cyan-400', + }, + merge: { + headerBg: + 'bg-gradient-to-r from-slate-50 to-gray-100 dark:from-slate-900 dark:to-gray-900', + iconBg: 'bg-slate-300 dark:bg-slate-700', + iconColor: 'text-slate-600 dark:text-slate-400', + }, + llm: { + headerBg: + 'bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-950 dark:to-purple-950', + iconBg: 'bg-violet-200 dark:bg-violet-800', + iconColor: 'text-violet-600 dark:text-violet-400', + }, + intent: { + headerBg: + 'bg-gradient-to-r from-fuchsia-50 to-pink-50 dark:from-fuchsia-950 dark:to-pink-950', + iconBg: 'bg-fuchsia-200 dark:bg-fuchsia-800', + iconColor: 'text-fuchsia-600 dark:text-fuchsia-400', + }, + code: { + headerBg: + 'bg-gradient-to-r from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950', + iconBg: 'bg-orange-200 dark:bg-orange-800', + iconColor: 'text-orange-600 dark:text-orange-400', + }, + template: { + headerBg: + 'bg-gradient-to-r from-teal-50 to-emerald-50 dark:from-teal-950 dark:to-emerald-950', + iconBg: 'bg-teal-200 dark:bg-teal-800', + iconColor: 'text-teal-600 dark:text-teal-400', + }, + http: { + headerBg: + 'bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950 dark:to-indigo-950', + iconBg: 'bg-blue-200 dark:bg-blue-800', + iconColor: 'text-blue-600 dark:text-blue-400', + }, + question: { + headerBg: + 'bg-gradient-to-r from-sky-50 to-blue-50 dark:from-sky-950 dark:to-blue-950', + iconBg: 'bg-sky-200 dark:bg-sky-800', + iconColor: 'text-sky-600 dark:text-sky-400', + }, + choice: { + headerBg: + 'bg-gradient-to-r from-lime-50 to-green-50 dark:from-lime-950 dark:to-green-950', + iconBg: 'bg-lime-200 dark:bg-lime-800', + iconColor: 'text-lime-600 dark:text-lime-400', + }, + message: { + headerBg: + 'bg-gradient-to-r from-pink-50 to-rose-50 dark:from-pink-950 dark:to-rose-950', + iconBg: 'bg-pink-200 dark:bg-pink-800', + iconColor: 'text-pink-600 dark:text-pink-400', + }, + confirm: { + headerBg: + 'bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-950 dark:to-red-950', + iconBg: 'bg-orange-200 dark:bg-orange-800', + iconColor: 'text-orange-600 dark:text-orange-400', + }, + loop: { + headerBg: + 'bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950 dark:to-cyan-950', + iconBg: 'bg-blue-200 dark:bg-blue-800', + iconColor: 'text-blue-600 dark:text-blue-400', + }, + subflow: { + headerBg: + 'bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-950 dark:to-purple-950', + iconBg: 'bg-indigo-200 dark:bg-indigo-800', + iconColor: 'text-indigo-600 dark:text-indigo-400', + }, + knowledge_retrieval: { + headerBg: + 'bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-teal-950 dark:to-cyan-950', + iconBg: 'bg-teal-200 dark:bg-teal-800', + iconColor: 'text-teal-600 dark:text-teal-400', + }, +}; + +const defaultNodeColorConfig: NodeColorConfig = { + headerBg: 'bg-gradient-to-r from-card to-muted', + iconBg: 'bg-card border border-border', + iconColor: 'text-primary', +}; const handleClick = () => { const rect = addButtonRef.value?.getBoundingClientRect(); @@ -43,190 +156,13 @@ const handleClick = () => { } }; -// 节点类型配色 - 支持 dark 模式,使用 Tailwind dark: 前缀 -const nodeColorConfig = computed(() => { - const configs: Record< - string, - { headerBg: string; iconBg: string; iconColor: string } - > = { - // 流程控制 - start: { - headerBg: - 'bg-gradient-to-r from-emerald-50 to-green-50 dark:from-emerald-950 dark:to-green-950', - iconBg: 'bg-emerald-200 dark:bg-emerald-800', - iconColor: 'text-emerald-600 dark:text-emerald-400', - }, - end: { - headerBg: - 'bg-gradient-to-r from-rose-50 to-red-50 dark:from-rose-950 dark:to-red-950', - iconBg: 'bg-rose-200 dark:bg-rose-800', - iconColor: 'text-rose-600 dark:text-rose-400', - }, - condition: { - headerBg: - 'bg-gradient-to-r from-amber-50 to-yellow-50 dark:from-amber-950 dark:to-yellow-950', - iconBg: 'bg-amber-200 dark:bg-amber-800', - iconColor: 'text-amber-600 dark:text-amber-400', - }, - parallel: { - headerBg: - 'bg-gradient-to-r from-cyan-50 to-sky-50 dark:from-cyan-950 dark:to-sky-950', - iconBg: 'bg-cyan-200 dark:bg-cyan-800', - iconColor: 'text-cyan-600 dark:text-cyan-400', - }, - merge: { - headerBg: - 'bg-gradient-to-r from-slate-50 to-gray-100 dark:from-slate-900 dark:to-gray-900', - iconBg: 'bg-slate-300 dark:bg-slate-700', - iconColor: 'text-slate-600 dark:text-slate-400', - }, - - // AI 相关 - llm: { - headerBg: - 'bg-gradient-to-r from-violet-50 to-purple-50 dark:from-violet-950 dark:to-purple-950', - iconBg: 'bg-violet-200 dark:bg-violet-800', - iconColor: 'text-violet-600 dark:text-violet-400', - }, - intent: { - headerBg: - 'bg-gradient-to-r from-fuchsia-50 to-pink-50 dark:from-fuchsia-950 dark:to-pink-950', - iconBg: 'bg-fuchsia-200 dark:bg-fuchsia-800', - iconColor: 'text-fuchsia-600 dark:text-fuchsia-400', - }, - - // 代码和模板 - code: { - headerBg: - 'bg-gradient-to-r from-orange-50 to-amber-50 dark:from-orange-950 dark:to-amber-950', - iconBg: 'bg-orange-200 dark:bg-orange-800', - iconColor: 'text-orange-600 dark:text-orange-400', - }, - template: { - headerBg: - 'bg-gradient-to-r from-teal-50 to-emerald-50 dark:from-teal-950 dark:to-emerald-950', - iconBg: 'bg-teal-200 dark:bg-teal-800', - iconColor: 'text-teal-600 dark:text-teal-400', - }, - - // HTTP - http: { - headerBg: - 'bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950 dark:to-indigo-950', - iconBg: 'bg-blue-200 dark:bg-blue-800', - iconColor: 'text-blue-600 dark:text-blue-400', - }, - - // 数据库 - db_query: { - headerBg: - 'bg-gradient-to-r from-indigo-50 to-blue-50 dark:from-indigo-950 dark:to-blue-950', - iconBg: 'bg-indigo-200 dark:bg-indigo-800', - iconColor: 'text-indigo-600 dark:text-indigo-400', - }, - db_insert: { - headerBg: - 'bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950', - iconBg: 'bg-green-200 dark:bg-green-800', - iconColor: 'text-green-600 dark:text-green-400', - }, - db_update: { - headerBg: - 'bg-gradient-to-r from-yellow-50 to-amber-50 dark:from-yellow-950 dark:to-amber-950', - iconBg: 'bg-yellow-200 dark:bg-yellow-800', - iconColor: 'text-yellow-600 dark:text-yellow-400', - }, - db_delete: { - headerBg: - 'bg-gradient-to-r from-red-50 to-rose-50 dark:from-red-950 dark:to-rose-950', - iconBg: 'bg-red-200 dark:bg-red-800', - iconColor: 'text-red-600 dark:text-red-400', - }, - db_sql: { - headerBg: - 'bg-gradient-to-r from-purple-50 to-violet-50 dark:from-purple-950 dark:to-violet-950', - iconBg: 'bg-purple-200 dark:bg-purple-800', - iconColor: 'text-purple-600 dark:text-purple-400', - }, - - // Text-to-SQL - text_to_sql: { - headerBg: - 'bg-gradient-to-r from-cyan-50 to-teal-50 dark:from-cyan-950 dark:to-teal-950', - iconBg: 'bg-cyan-200 dark:bg-cyan-800', - iconColor: 'text-cyan-600 dark:text-cyan-400', - }, - - // 对话流 - question: { - headerBg: - 'bg-gradient-to-r from-sky-50 to-blue-50 dark:from-sky-950 dark:to-blue-950', - iconBg: 'bg-sky-200 dark:bg-sky-800', - iconColor: 'text-sky-600 dark:text-sky-400', - }, - choice: { - headerBg: - 'bg-gradient-to-r from-lime-50 to-green-50 dark:from-lime-950 dark:to-green-950', - iconBg: 'bg-lime-200 dark:bg-lime-800', - iconColor: 'text-lime-600 dark:text-lime-400', - }, - message: { - headerBg: - 'bg-gradient-to-r from-pink-50 to-rose-50 dark:from-pink-950 dark:to-rose-950', - iconBg: 'bg-pink-200 dark:bg-pink-800', - iconColor: 'text-pink-600 dark:text-pink-400', - }, - confirm: { - headerBg: - 'bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-950 dark:to-red-950', - iconBg: 'bg-orange-200 dark:bg-orange-800', - iconColor: 'text-orange-600 dark:text-orange-400', - }, - - // Snowflake - snowflake_cortex_llm: { - headerBg: - 'bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-cyan-950 dark:to-blue-950', - iconBg: 'bg-cyan-200 dark:bg-cyan-800', - iconColor: 'text-cyan-600 dark:text-cyan-400', - }, - snowflake_cortex_analyst: { - headerBg: - 'bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-950 dark:to-cyan-950', - iconBg: 'bg-blue-200 dark:bg-blue-800', - iconColor: 'text-blue-600 dark:text-blue-400', - }, - - // 子流程 - subflow: { - headerBg: - 'bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-950 dark:to-purple-950', - iconBg: 'bg-indigo-200 dark:bg-indigo-800', - iconColor: 'text-indigo-600 dark:text-indigo-400', - }, - - // 知识库 - knowledge_retrieval: { - headerBg: - 'bg-gradient-to-r from-teal-50 to-cyan-50 dark:from-teal-950 dark:to-cyan-950', - iconBg: 'bg-teal-200 dark:bg-teal-800', - iconColor: 'text-teal-600 dark:text-teal-400', - }, - }; - - return ( - configs[props.nodeType || ''] || { - headerBg: 'bg-gradient-to-r from-card to-muted', - iconBg: 'bg-card border border-border', - iconColor: 'text-primary', - } - ); -}); +const nodeColorConfig = computed( + () => nodeColorConfigs[props.nodeType || ''] || defaultNodeColorConfig, +);