{
label: node.nodeName,
nodeType: node.nodeType as any,
category: getNodeCategory(node.nodeType) as any,
- icon: nodeDefinition?.uiConfig.style.icon || getNodeIcon(node.nodeType),
- color: nodeDefinition?.uiConfig.style.fill || getNodeColor(node.nodeType),
+ icon: nodeDefinition?.renderConfig.icon.content || getNodeIcon(node.nodeType),
+ color: nodeDefinition?.renderConfig.theme.primary || getNodeColor(node.nodeType),
configs: node.configs || {},
inputMapping: node.inputMapping || {},
outputMapping: node.outputMapping || {},
diff --git a/frontend/src/pages/Workflow/Design/index.tsx b/frontend/src/pages/Workflow/Design/index.tsx
index c9b9e7ac..6ac6c87b 100644
--- a/frontend/src/pages/Workflow/Design/index.tsx
+++ b/frontend/src/pages/Workflow/Design/index.tsx
@@ -358,8 +358,8 @@ const WorkflowDesignInner: React.FC = () => {
label: nodeDefinition.nodeName,
nodeType: nodeDefinition.nodeType,
category: nodeDefinition.category,
- icon: nodeDefinition.uiConfig.style.icon,
- color: nodeDefinition.uiConfig.style.fill,
+ icon: nodeDefinition.renderConfig.icon.content,
+ color: nodeDefinition.renderConfig.theme.primary,
// 保存原始节点定义引用，用于配置
nodeDefinition,
// 初始化配置数据
diff --git a/frontend/src/pages/Workflow/Design/nodes/EndEventNode.tsx b/frontend/src/pages/Workflow/Design/nodes/EndEventNode.tsx
index c71c404f..0cc60827 100644
--- a/frontend/src/pages/Workflow/Design/nodes/EndEventNode.tsx
+++ b/frontend/src/pages/Workflow/Design/nodes/EndEventNode.tsx
@@ -1,10 +1,8 @@
-import React, { memo } from 'react';
-import { Handle, Position, NodeProps } from '@xyflow/react';
import { BaseNodeDefinition, NodeType, NodeCategory } from './types';
-import type { FlowNodeData } from '../types';
/**
- * 结束事件节点定义（元数据）
+ * 结束事件节点定义（纯配置）
+ * 使用 BaseNode 组件渲染，无需自定义渲染代码
*/
export const EndEventNodeDefinition: BaseNodeDefinition = {
nodeCode: "END_EVENT",
@@ -13,14 +11,29 @@ export const EndEventNodeDefinition: BaseNodeDefinition = {
category: NodeCategory.EVENT,
description: "工作流的结束节点",
- uiConfig: {
- size: { width: 80, height: 50 },
- style: {
- fill: '#ff4d4f',
- stroke: '#cf1322',
- strokeWidth: 2,
- icon: 'stop-circle',
- iconColor: '#fff'
+ // 渲染配置（配置驱动）
+ renderConfig: {
+ shape: 'circle',
+ size: { width: 100, height: 60 },
+ icon: {
+ type: 'emoji',
+ content: '⏹️',
+ size: 40
+ },
+ theme: {
+ primary: '#ef4444',
+ secondary: '#f87171',
+ selectedBorder: '#3b82f6',
+ hoverBorder: '#ef4444',
+ gradient: ['#fef2f2', '#fee2e2']
+ },
+ handles: {
+ input: true, // 结束节点有输入
+ output: false // 无输出
+ },
+ features: {
+ showBadge: false, // 结束节点不显示徽章
+ showHoverMenu: false // 结束节点不显示菜单
}
},
@@ -52,89 +65,4 @@ export const EndEventNodeDefinition: BaseNodeDefinition = {
}
};
-/**
- * 结束事件节点渲染组件
- */
-const EndEventNode: React.FC
= ({ data, selected }) => {
- const nodeData = data as FlowNodeData;
- const [isHovered, setIsHovered] = React.useState(false);
-
- return (
- setIsHovered(true)}
- onMouseLeave={() => setIsHovered(false)}
- style={{
- padding: '12px',
- borderRadius: '50%',
- border: `3px solid ${selected ? '#3b82f6' : '#ef4444'}`,
- background: selected
- ? 'linear-gradient(135deg, #fee2e2 0%, #fecaca 100%)'
- : 'linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%)',
- minWidth: '70px',
- minHeight: '70px',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- position: 'relative',
- boxShadow: selected
- ? '0 8px 16px rgba(59, 130, 246, 0.25), 0 2px 4px rgba(59, 130, 246, 0.15)'
- : isHovered
- ? '0 6px 12px rgba(239, 68, 68, 0.2), 0 2px 4px rgba(239, 68, 68, 0.1)'
- : '0 2px 8px rgba(0,0,0,0.08)',
- cursor: 'pointer',
- transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
- transform: isHovered ? 'scale(1.05)' : 'scale(1)',
- }}
- >
- {/* 图标 */}
-
- ⏹️
-
-
- {/* 输入连接点 */}
-
-
- {/* 节点标签 */}
-
- {nodeData.label || '结束'}
-
-
setIsHovered(true)}
- onMouseLeave={() => setIsHovered(false)}
- style={{
- padding: '16px 20px',
- borderRadius: '12px',
- border: `2px solid ${selected ? '#3b82f6' : isHovered ? '#73d13d' : '#e5e7eb'}`,
- background: selected
- ? 'linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%)'
- : 'linear-gradient(135deg, #ffffff 0%, #f6ffed 100%)',
- minWidth: '160px',
- minHeight: '80px',
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- justifyContent: 'center',
- position: 'relative',
- boxShadow: selected
- ? '0 8px 16px rgba(59, 130, 246, 0.2), 0 2px 8px rgba(59, 130, 246, 0.1)'
- : isHovered
- ? '0 6px 16px rgba(82, 196, 26, 0.15), 0 2px 6px rgba(82, 196, 26, 0.08)'
- : '0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)',
- cursor: 'pointer',
- transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
- transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',
- }}
- >
- {/* 输入连接点 */}
-
-
- {/* 节点内容 */}
-
- {/* 图标背景 */}
-
- 🔨
-
-
- {/* 标签 */}
-
- {nodeData.label || 'Jenkins构建'}
-
-
-
- {/* 输出连接点 */}
-
-
- {/* 配置指示器 */}
- {nodeData.configs && Object.keys(nodeData.configs).length > 3 && (
-
- ✓
-
- )}
-
- {/* Hover操作菜单 */}
- {isHovered && !selected && (
-
- )}
-
setIsHovered(true)}
- onMouseLeave={() => setIsHovered(false)}
- style={{
- padding: '12px',
- borderRadius: '50%',
- border: `3px solid ${selected ? '#3b82f6' : '#10b981'}`,
- background: selected
- ? 'linear-gradient(135deg, #d0fce8 0%, #a7f3d0 100%)'
- : 'linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%)',
- minWidth: '70px',
- minHeight: '70px',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- position: 'relative',
- boxShadow: selected
- ? '0 8px 16px rgba(59, 130, 246, 0.25), 0 2px 4px rgba(59, 130, 246, 0.15)'
- : isHovered
- ? '0 6px 12px rgba(16, 185, 129, 0.2), 0 2px 4px rgba(16, 185, 129, 0.1)'
- : '0 2px 8px rgba(0,0,0,0.08)',
- cursor: 'pointer',
- transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
- transform: isHovered ? 'scale(1.05)' : 'scale(1)',
- }}
- >
- {/* 图标 */}
-
- ▶️
-
-
- {/* 输出连接点 */}
-
-
- {/* 节点标签 */}
-
- {nodeData.label || '开始'}
-
-
节点未配置定义
;
+ }
+
+ const config = definition.renderConfig;
+ const [isHovered, setIsHovered] = useState(false);
+
+ // 🎨 计算容器样式
+ const getContainerStyle = (): CSSProperties => {
+ const { shape, size, theme } = config;
+
+ const baseStyle: CSSProperties = {
+ minWidth: `${size.width}px`,
+ minHeight: `${size.height}px`,
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ position: 'relative',
+ cursor: 'pointer',
+ transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+ };
+
+ // 根据形状设置样式
+ switch (shape) {
+ case 'circle':
+ baseStyle.borderRadius = '50%';
+ baseStyle.padding = '12px';
+ break;
+ case 'rounded-rect':
+ baseStyle.borderRadius = '12px';
+ baseStyle.padding = '16px 20px';
+ break;
+ case 'rect':
+ baseStyle.borderRadius = '4px';
+ baseStyle.padding = '16px 20px';
+ break;
+ case 'diamond':
+ baseStyle.transform = 'rotate(45deg)';
+ baseStyle.padding = '16px';
+ break;
+ }
+
+ // 边框和背景
+ const borderColor = selected
+ ? theme.selectedBorder
+ : isHovered
+ ? theme.hoverBorder
+ : '#e5e7eb';
+
+ baseStyle.border = `${selected ? '3px' : '2px'} solid ${borderColor}`;
+ baseStyle.background = selected
+ ? `linear-gradient(135deg, ${theme.gradient[0]} 0%, #f0f9ff 100%)`
+ : `linear-gradient(135deg, ${theme.gradient[0]} 0%, ${theme.gradient[1]} 100%)`;
+
+ // 阴影
+ baseStyle.boxShadow = selected
+ ? `0 8px 16px ${theme.selectedBorder}33, 0 2px 8px ${theme.selectedBorder}22`
+ : isHovered
+ ? `0 6px 16px ${theme.hoverBorder}26, 0 2px 6px ${theme.hoverBorder}14`
+ : '0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04)';
+
+ // Hover 效果
+ if (isHovered) {
+ baseStyle.transform = 'translateY(-2px)';
+ }
+
+ return baseStyle;
+ };
+
+ // 🔌 计算连接点样式
+ const getHandleStyle = (): CSSProperties => {
+ return {
+ background: config.theme.primary,
+ border: '3px solid white',
+ width: '14px',
+ height: '14px',
+ boxShadow: '0 2px 4px rgba(0,0,0,0.15)',
+ transition: 'all 0.2s ease',
+ transform: isHovered ? 'scale(1.2)' : 'scale(1)',
+ };
+ };
+
+ // 🎭 渲染图标
+ const renderIcon = () => {
+ const { icon, theme } = config;
+
+ if (icon.type === 'emoji') {
+ return (
+
+
+ {icon.content}
+
+
+ );
+ }
+
+ // TODO: 支持自定义组件图标
+ return {icon.content};
+ };
+
+ // 🎖️ 渲染配置徽章
+ const renderBadge = () => {
+ if (!config.features.showBadge) return null;
+ if (!nodeData.configs || Object.keys(nodeData.configs).length <= 3) return null;
+
+ return (
+
+ ✓
+
+ );
+ };
+
+ // 📋 渲染 Hover 菜单
+ const renderHoverMenu = () => {
+ if (!config.features.showHoverMenu) return null;
+ if (!isHovered || selected) return null;
+
+ return (
+
+ );
+ };
+
+ return (
+ setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ style={getContainerStyle()}
+ >
+ {/* 🔌 输入连接点 */}
+ {config.handles.input && (
+
+ )}
+
+ {/* 📦 节点内容 */}
+
+ {/* 🎭 图标 */}
+ {renderIcon()}
+
+ {/* 🏷️ 标签 */}
+
+ {nodeData.label || definition.nodeName}
+
+
+
+ {/* 🔌 输出连接点 */}
+ {config.handles.output && (
+
+ )}
+
+ {/* 🎖️ 配置徽章 */}
+ {renderBadge()}
+
+ {/* 📋 Hover 菜单 */}
+ {renderHoverMenu()}
+