# 部署流程图弹窗开发指南

## 1. 概述

本指南用于指导前端开发部署流程图可视化弹窗，展示部署工作流的执行状态、节点详情和统计信息。

---

## 2. API 接口

### 2.1 接口信息

```typescript
GET /api/v1/deploy-records/{deployRecordId}/flow-graph
```

### 2.2 请求参数

| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| deployRecordId | Long | 是 | 部署记录ID |

### 2.3 响应数据结构

```typescript
interface DeployRecordFlowGraphDTO {
  // ============ 部署记录基本信息 ============
  deployRecordId: number;          // 部署记录ID
  businessKey: string;              // 业务标识（UUID）
  deployStatus: DeployStatus;       // 部署状态
  deployBy: string;                 // 部署人
  deployRemark: string;             // 部署备注
  deployStartTime: string;          // 部署开始时间（ISO格式）
  deployEndTime: string;            // 部署结束时间（ISO格式）
  deployDuration: number;           // 部署总时长（秒）

  // ============ 业务上下文信息 ============
  applicationName: string;          // 应用名称
  applicationCode: string;          // 应用编码
  environmentName: string;          // 环境名称
  teamName: string;                 // 团队名称

  // ============ 工作流实例信息 ============
  workflowInstanceId: number;       // 工作流实例ID
  processInstanceId: string;        // 流程实例ID（Flowable）
  workflowStatus: WorkflowStatus;   // 工作流实例状态
  workflowStartTime: string;        // 工作流开始时间
  workflowEndTime: string;          // 工作流结束时间
  workflowDuration: number;         // 工作流总时长（秒）

  // ============ 执行统计信息 ============
  totalNodeCount: number;           // 总节点数
  executedNodeCount: number;        // 已执行节点数
  successNodeCount: number;         // 成功节点数
  failedNodeCount: number;          // 失败节点数
  runningNodeCount: number;         // 运行中节点数

  // ============ 流程图数据 ============
  graph: WorkflowDefinitionGraph;   // 流程图结构
  nodeInstances: NodeInstanceDTO[]; // 节点执行状态列表
}

// 节点实例DTO
interface NodeInstanceDTO {
  id: number | null;                // 节点实例ID（未执行节点为null）
  nodeId: string;                   // 节点ID
  nodeName: string;                 // 节点名称
  nodeType: string;                 // 节点类型
  status: NodeStatus;               // 节点状态
  startTime: string | null;         // 开始时间
  endTime: string | null;           // 结束时间
  duration: number | null;          // 执行时长（秒）
  errorMessage: string | null;      // 错误信息（失败时）
  processInstanceId: string;        // 流程实例ID
  createTime: string | null;        // 创建时间
  updateTime: string | null;        // 更新时间
}

// 流程图结构
interface WorkflowDefinitionGraph {
  nodes: GraphNode[];               // 节点列表
  edges: GraphEdge[];               // 边列表
}

interface GraphNode {
  id: string;                       // 节点ID
  nodeCode: string;                 // 节点编码
  nodeType: string;                 // 节点类型
  nodeName: string;                 // 节点名称
  position: { x: number; y: number }; // 节点位置
  configs: Record<string, any>;     // 节点配置
  inputMapping: Record<string, any>; // 输入映射
  outputs: OutputField[];           // 输出字段定义
}

interface GraphEdge {
  id: string;                       // 边ID
  from: string;                     // 源节点ID
  to: string;                       // 目标节点ID
  name: string;                     // 边名称
  config: {
    type: string;                   // 边类型
    condition: {
      type: string;                 // 条件类型
      priority: number;             // 优先级
      expression?: string;          // 条件表达式
    };
  };
}

// 枚举类型
enum DeployStatus {
  CREATED = 'CREATED',              // 已创建
  PENDING_APPROVAL = 'PENDING_APPROVAL', // 待审批
  RUNNING = 'RUNNING',              // 运行中
  SUCCESS = 'SUCCESS',              // 成功
  FAILED = 'FAILED',                // 失败
  REJECTED = 'REJECTED',            // 审批拒绝
  CANCELLED = 'CANCELLED',          // 已取消
  TERMINATED = 'TERMINATED',        // 已终止
  PARTIAL_SUCCESS = 'PARTIAL_SUCCESS' // 部分成功
}

enum NodeStatus {
  NOT_STARTED = 'NOT_STARTED',      // 未开始
  RUNNING = 'RUNNING',              // 运行中
  SUSPENDED = 'SUSPENDED',          // 已暂停
  COMPLETED = 'COMPLETED',          // 已完成
  TERMINATED = 'TERMINATED',        // 已终止
  FAILED = 'FAILED'                 // 执行失败
}
```

---

## 3. UI 设计建议

### 3.1 整体布局

建议使用全屏或大尺寸弹窗（1200px+），分为三个主要区域：

```
┌─────────────────────────────────────────────────────────────┐
│  📋 头部信息区（部署基本信息 + 统计卡片）                    │
├─────────────────────────────────────────────────────────────┤
│                                                               │
│  🎨 流程图可视化区（Canvas绘制）                             │
│     - 节点按状态着色                                          │
│     - 支持缩放、拖拽                                          │
│     - 点击节点查看详情                                        │
│                                                               │
├─────────────────────────────────────────────────────────────┤
│  📊 底部详情区（选中节点的详细信息）                          │
└─────────────────────────────────────────────────────────────┘
```

### 3.2 头部信息区

显示关键信息和统计数据：

```tsx
// 第一行：基本信息
┌───────────────────────────────────────────────────────────┐
│ 🚀 部署流程详情                              [关闭 ✕]     │
├───────────────────────────────────────────────────────────┤
│ 应用：应用名称 (应用编码) | 环境：生产环境 | 团队：运维组  │
│ 部署人：张三 | 开始时间：2025-11-05 14:00:00              │
│ 状态：🟢 运行中 | 总时长：5分30秒                          │
└───────────────────────────────────────────────────────────┘

// 第二行：统计卡片
┌──────────┬──────────┬──────────┬──────────┬──────────┐
│ 总节点   │ 已执行   │ 成功     │ 失败     │ 运行中   │
│    8     │    5     │    4     │    0     │    1     │
│  100%    │   62%    │   50%    │    0%    │   12%    │
└──────────┴──────────┴──────────┴──────────┴──────────┘
```

### 3.3 流程图可视化区

#### 节点状态着色方案

```typescript
const nodeColorMap = {
  NOT_STARTED: '#d9d9d9',    // 未开始：灰色
  RUNNING: '#1890ff',         // 运行中：蓝色（闪烁动画）
  COMPLETED: '#52c41a',       // 已完成：绿色
  FAILED: '#ff4d4f',          // 失败：红色
  SUSPENDED: '#faad14',       // 暂停：橙色
  TERMINATED: '#8c8c8c'       // 终止：深灰
};

const nodeIconMap = {
  START_EVENT: '▶️',
  END_EVENT: '⏹️',
  USER_TASK: '👤',
  SERVICE_TASK: '⚙️',
  APPROVAL: '✓',
  SCRIPT_TASK: '📝',
  JENKINS_BUILD: '🔨',
  NOTIFICATION: '🔔'
};
```

#### 节点显示内容

```
┌─────────────────┐
│  🔨 Jenkins构建  │  ← 节点图标 + 名称
├─────────────────┤
│  ✓ 已完成        │  ← 状态（带图标）
│  ⏱ 2分30秒      │  ← 执行时长
└─────────────────┘
```

失败节点特殊标记：
```
┌─────────────────┐
│  ⚙️ 部署服务     │
├─────────────────┤
│  ✗ 执行失败      │  ← 红色状态
│  ⚠️ 点击查看错误 │  ← 错误提示
└─────────────────┘
```

### 3.4 底部详情区

选中节点后显示完整信息：

```
┌─────────────────────────────────────────────────────────┐
│ 📌 节点详情                                             │
├─────────────────────────────────────────────────────────┤
│ 节点名称：Jenkins构建                                    │
│ 节点类型：SERVICE_TASK (服务任务)                       │
│ 执行状态：✓ 已完成                                      │
│                                                          │
│ ⏱️ 时间信息                                             │
│   开始时间：2025-11-05 14:02:30                         │
│   结束时间：2025-11-05 14:05:00                         │
│   执行时长：2分30秒                                      │
│                                                          │
│ 📊 执行结果（如果有）                                    │
│   构建编号：#123                                         │
│   构建状态：SUCCESS                                      │
│   构建产物：app-1.0.0.jar                               │
│                                                          │
│ ⚠️ 错误信息（失败时显示）                               │
│   连接超时：无法连接到Jenkins服务器 (timeout: 30s)      │
└─────────────────────────────────────────────────────────┘
```

---

## 4. 组件划分建议

### 4.1 组件层次结构

```
DeployFlowGraphModal (弹窗容器)
├── FlowGraphHeader (头部信息)
│   ├── DeployBasicInfo (基本信息)
│   └── ExecutionStatistics (统计卡片)
├── FlowGraphCanvas (流程图画布)
│   ├── GraphNode (节点组件)
│   └── GraphEdge (边组件)
└── NodeDetailPanel (节点详情面板)
```

### 4.2 核心组件代码示例

#### 4.2.1 弹窗容器组件

```tsx
// DeployFlowGraphModal.tsx
import React, { useState, useEffect } from 'react';
import { Modal, Spin, message } from 'antd';
import { getDeployFlowGraph } from '@/services/deploy';
import type { DeployRecordFlowGraphDTO, NodeInstanceDTO } from '@/types/deploy';

interface Props {
  visible: boolean;
  deployRecordId: number;
  onClose: () => void;
}

export const DeployFlowGraphModal: React.FC<Props> = ({
  visible,
  deployRecordId,
  onClose
}) => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<DeployRecordFlowGraphDTO | null>(null);
  const [selectedNode, setSelectedNode] = useState<NodeInstanceDTO | null>(null);

  useEffect(() => {
    if (visible && deployRecordId) {
      loadFlowGraph();
    }
  }, [visible, deployRecordId]);

  const loadFlowGraph = async () => {
    setLoading(true);
    try {
      const response = await getDeployFlowGraph(deployRecordId);
      setData(response.data);
    } catch (error) {
      message.error('加载流程图失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      title="部署流程详情"
      open={visible}
      onCancel={onClose}
      width={1200}
      footer={null}
      destroyOnClose
    >
      <Spin spinning={loading}>
        {data && (
          <div className="deploy-flow-graph">
            {/* 头部信息 */}
            <FlowGraphHeader data={data} />
            
            {/* 流程图画布 */}
            <FlowGraphCanvas
              graph={data.graph}
              nodeInstances={data.nodeInstances}
              selectedNode={selectedNode}
              onNodeClick={setSelectedNode}
            />
            
            {/* 节点详情面板 */}
            {selectedNode && (
              <NodeDetailPanel
                node={selectedNode}
                onClose={() => setSelectedNode(null)}
              />
            )}
          </div>
        )}
      </Spin>
    </Modal>
  );
};
```

#### 4.2.2 头部信息组件

```tsx
// FlowGraphHeader.tsx
import React from 'react';
import { Tag, Statistic, Card, Row, Col, Descriptions } from 'antd';
import type { DeployRecordFlowGraphDTO } from '@/types/deploy';
import { formatDuration, getStatusTag } from '@/utils/deploy';

interface Props {
  data: DeployRecordFlowGraphDTO;
}

export const FlowGraphHeader: React.FC<Props> = ({ data }) => {
  return (
    <div className="flow-graph-header">
      {/* 基本信息 */}
      <Descriptions column={3} size="small" bordered style={{ marginBottom: 16 }}>
        <Descriptions.Item label="应用">
          {data.applicationName} ({data.applicationCode})
        </Descriptions.Item>
        <Descriptions.Item label="环境">
          {data.environmentName}
        </Descriptions.Item>
        <Descriptions.Item label="团队">
          {data.teamName}
        </Descriptions.Item>
        <Descriptions.Item label="部署人">
          {data.deployBy}
        </Descriptions.Item>
        <Descriptions.Item label="开始时间">
          {data.deployStartTime}
        </Descriptions.Item>
        <Descriptions.Item label="状态">
          {getStatusTag(data.deployStatus)}
        </Descriptions.Item>
        <Descriptions.Item label="总时长" span={3}>
          {formatDuration(data.deployDuration)}
        </Descriptions.Item>
        {data.deployRemark && (
          <Descriptions.Item label="备注" span={3}>
            {data.deployRemark}
          </Descriptions.Item>
        )}
      </Descriptions>

      {/* 统计卡片 */}
      <Row gutter={16}>
        <Col span={4}>
          <Card>
            <Statistic
              title="总节点"
              value={data.totalNodeCount}
              suffix="个"
            />
          </Card>
        </Col>
        <Col span={5}>
          <Card>
            <Statistic
              title="已执行"
              value={data.executedNodeCount}
              suffix={`/ ${data.totalNodeCount}`}
              valueStyle={{ color: '#1890ff' }}
            />
            <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
              {((data.executedNodeCount / data.totalNodeCount) * 100).toFixed(0)}%
            </div>
          </Card>
        </Col>
        <Col span={5}>
          <Card>
            <Statistic
              title="成功"
              value={data.successNodeCount}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col span={5}>
          <Card>
            <Statistic
              title="失败"
              value={data.failedNodeCount}
              valueStyle={{ color: data.failedNodeCount > 0 ? '#ff4d4f' : undefined }}
            />
          </Card>
        </Col>
        <Col span={5}>
          <Card>
            <Statistic
              title="运行中"
              value={data.runningNodeCount}
              valueStyle={{ color: data.runningNodeCount > 0 ? '#1890ff' : undefined }}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};
```

#### 4.2.3 流程图画布组件（使用 AntV X6）

```tsx
// FlowGraphCanvas.tsx
import React, { useEffect, useRef } from 'react';
import { Graph } from '@antv/x6';
import type { WorkflowDefinitionGraph, NodeInstanceDTO } from '@/types/deploy';
import { getNodeColor, getNodeIcon } from '@/utils/workflow';

interface Props {
  graph: WorkflowDefinitionGraph;
  nodeInstances: NodeInstanceDTO[];
  selectedNode: NodeInstanceDTO | null;
  onNodeClick: (node: NodeInstanceDTO) => void;
}

export const FlowGraphCanvas: React.FC<Props> = ({
  graph,
  nodeInstances,
  selectedNode,
  onNodeClick
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const graphRef = useRef<Graph | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    // 创建画布
    const graphInstance = new Graph({
      container: containerRef.current,
      width: 1100,
      height: 500,
      grid: true,
      panning: true,
      mousewheel: {
        enabled: true,
        modifiers: ['ctrl', 'meta'],
      },
    });

    graphRef.current = graphInstance;

    // 渲染节点
    renderNodes(graphInstance);

    // 渲染边
    renderEdges(graphInstance);

    // 监听节点点击
    graphInstance.on('node:click', ({ node }) => {
      const nodeId = node.id;
      const nodeInstance = nodeInstances.find(n => n.nodeId === nodeId);
      if (nodeInstance) {
        onNodeClick(nodeInstance);
      }
    });

    return () => {
      graphInstance.dispose();
    };
  }, [graph, nodeInstances]);

  const renderNodes = (graphInstance: Graph) => {
    graph.nodes.forEach(node => {
      const nodeInstance = nodeInstances.find(n => n.nodeId === node.id);
      const status = nodeInstance?.status || 'NOT_STARTED';
      const color = getNodeColor(status);
      const icon = getNodeIcon(node.nodeType);

      graphInstance.addNode({
        id: node.id,
        x: node.position.x,
        y: node.position.y,
        width: 120,
        height: 80,
        label: `${icon} ${node.nodeName}`,
        attrs: {
          body: {
            fill: color,
            stroke: status === selectedNode?.nodeId ? '#1890ff' : '#d9d9d9',
            strokeWidth: status === selectedNode?.nodeId ? 3 : 1,
            rx: 6,
            ry: 6,
          },
          label: {
            fill: '#ffffff',
            fontSize: 12,
          },
        },
        data: {
          status,
          duration: nodeInstance?.duration,
          hasError: !!nodeInstance?.errorMessage,
        },
      });

      // 添加状态标签
      if (nodeInstance) {
        graphInstance.addNode({
          id: `${node.id}-status`,
          x: node.position.x + 5,
          y: node.position.y + 60,
          width: 110,
          height: 18,
          label: getStatusLabel(status, nodeInstance.duration),
          attrs: {
            body: {
              fill: 'rgba(255, 255, 255, 0.9)',
              stroke: 'none',
              rx: 3,
              ry: 3,
            },
            label: {
              fill: '#000000',
              fontSize: 10,
            },
          },
        });
      }
    });
  };

  const renderEdges = (graphInstance: Graph) => {
    graph.edges.forEach(edge => {
      graphInstance.addEdge({
        id: edge.id,
        source: edge.from,
        target: edge.to,
        label: edge.name,
        attrs: {
          line: {
            stroke: '#8c8c8c',
            strokeWidth: 2,
            targetMarker: {
              name: 'classic',
              size: 8,
            },
          },
          label: {
            fill: '#595959',
            fontSize: 11,
          },
        },
      });
    });
  };

  return (
    <div
      ref={containerRef}
      className="flow-graph-canvas"
      style={{ border: '1px solid #d9d9d9', marginTop: 16 }}
    />
  );
};
```

#### 4.2.4 节点详情面板

```tsx
// NodeDetailPanel.tsx
import React from 'react';
import { Card, Descriptions, Tag, Alert } from 'antd';
import type { NodeInstanceDTO } from '@/types/deploy';
import { formatDuration, getStatusTag } from '@/utils/deploy';

interface Props {
  node: NodeInstanceDTO;
  onClose: () => void;
}

export const NodeDetailPanel: React.FC<Props> = ({ node, onClose }) => {
  return (
    <Card
      title="📌 节点详情"
      extra={<a onClick={onClose}>关闭</a>}
      style={{ marginTop: 16 }}
    >
      <Descriptions column={2} bordered size="small">
        <Descriptions.Item label="节点名称" span={2}>
          {node.nodeName}
        </Descriptions.Item>
        <Descriptions.Item label="节点类型">
          {node.nodeType}
        </Descriptions.Item>
        <Descriptions.Item label="执行状态">
          {getStatusTag(node.status)}
        </Descriptions.Item>
        
        {node.startTime && (
          <>
            <Descriptions.Item label="开始时间">
              {node.startTime}
            </Descriptions.Item>
            <Descriptions.Item label="结束时间">
              {node.endTime || '执行中...'}
            </Descriptions.Item>
            <Descriptions.Item label="执行时长" span={2}>
              {node.duration ? formatDuration(node.duration) : '计算中...'}
            </Descriptions.Item>
          </>
        )}

        {node.status === 'NOT_STARTED' && (
          <Descriptions.Item label="说明" span={2}>
            <Tag color="default">该节点尚未执行</Tag>
          </Descriptions.Item>
        )}
      </Descriptions>

      {/* 错误信息 */}
      {node.errorMessage && (
        <Alert
          message="执行错误"
          description={node.errorMessage}
          type="error"
          showIcon
          style={{ marginTop: 16 }}
        />
      )}

      {/* 执行结果（outputs）*/}
      {node.outputs && Object.keys(node.outputs).length > 0 && (
        <div style={{ marginTop: 16 }}>
          <h4>📊 执行结果</h4>
          <Descriptions column={1} bordered size="small">
            {Object.entries(node.outputs).map(([key, value]) => (
              <Descriptions.Item key={key} label={key}>
                {typeof value === 'object' ? JSON.stringify(value) : String(value)}
              </Descriptions.Item>
            ))}
          </Descriptions>
        </div>
      )}
    </Card>
  );
};
```

---

## 5. 工具函数

```typescript
// utils/deploy.ts

/**
 * 格式化时长
 */
export function formatDuration(seconds: number | null): string {
  if (seconds === null || seconds === undefined) {
    return '-';
  }
  
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;
  
  if (hours > 0) {
    return `${hours}小时${minutes}分${secs}秒`;
  } else if (minutes > 0) {
    return `${minutes}分${secs}秒`;
  } else {
    return `${secs}秒`;
  }
}

/**
 * 获取状态标签
 */
export function getStatusTag(status: string): React.ReactNode {
  const statusConfig = {
    NOT_STARTED: { color: 'default', text: '未开始' },
    RUNNING: { color: 'processing', text: '运行中' },
    COMPLETED: { color: 'success', text: '已完成' },
    FAILED: { color: 'error', text: '执行失败' },
    SUSPENDED: { color: 'warning', text: '已暂停' },
    TERMINATED: { color: 'default', text: '已终止' },
    
    CREATED: { color: 'default', text: '已创建' },
    PENDING_APPROVAL: { color: 'warning', text: '待审批' },
    SUCCESS: { color: 'success', text: '成功' },
    REJECTED: { color: 'error', text: '审批拒绝' },
    CANCELLED: { color: 'default', text: '已取消' },
    PARTIAL_SUCCESS: { color: 'warning', text: '部分成功' },
  };
  
  const config = statusConfig[status] || { color: 'default', text: status };
  return <Tag color={config.color}>{config.text}</Tag>;
}

/**
 * 获取节点颜色
 */
export function getNodeColor(status: string): string {
  const colorMap = {
    NOT_STARTED: '#d9d9d9',
    RUNNING: '#1890ff',
    COMPLETED: '#52c41a',
    FAILED: '#ff4d4f',
    SUSPENDED: '#faad14',
    TERMINATED: '#8c8c8c',
  };
  return colorMap[status] || '#d9d9d9';
}

/**
 * 获取节点图标
 */
export function getNodeIcon(nodeType: string): string {
  const iconMap = {
    START_EVENT: '▶️',
    END_EVENT: '⏹️',
    USER_TASK: '👤',
    SERVICE_TASK: '⚙️',
    APPROVAL: '✓',
    SCRIPT_TASK: '📝',
    JENKINS_BUILD: '🔨',
    NOTIFICATION: '🔔',
  };
  return iconMap[nodeType] || '⚙️';
}

/**
 * 获取状态文本
 */
function getStatusLabel(status: string, duration: number | null): string {
  const statusText = {
    NOT_STARTED: '未开始',
    RUNNING: '运行中',
    COMPLETED: '已完成',
    FAILED: '执行失败',
    SUSPENDED: '已暂停',
    TERMINATED: '已终止',
  };
  
  const text = statusText[status] || status;
  const timeText = duration ? ` | ${formatDuration(duration)}` : '';
  
  return `${text}${timeText}`;
}
```

---

## 6. 高级功能建议

### 6.1 实时刷新

对于运行中的部署，建议实现定时刷新：

```typescript
useEffect(() => {
  if (data?.runningNodeCount > 0) {
    const timer = setInterval(() => {
      loadFlowGraph(); // 每5秒刷新一次
    }, 5000);
    
    return () => clearInterval(timer);
  }
}, [data?.runningNodeCount]);
```

### 6.2 节点动画

运行中的节点添加闪烁动画：

```css
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}

.node-running {
  animation: pulse 2s infinite;
}
```

### 6.3 进度条展示

在头部添加整体进度条：

```tsx
<Progress
  percent={(data.executedNodeCount / data.totalNodeCount) * 100}
  status={data.failedNodeCount > 0 ? 'exception' : 'active'}
  format={(percent) => `${data.executedNodeCount} / ${data.totalNodeCount}`}
/>
```

### 6.4 节点搜索/过滤

添加节点名称搜索功能：

```tsx
<Input
  placeholder="搜索节点"
  prefix={<SearchOutlined />}
  onChange={(e) => handleSearchNode(e.target.value)}
/>
```

### 6.5 导出功能

支持导出流程图为图片或PDF：

```typescript
import html2canvas from 'html2canvas';

const exportFlowGraph = async () => {
  const canvas = await html2canvas(containerRef.current);
  const link = document.createElement('a');
  link.download = `deploy-flow-${deployRecordId}.png`;
  link.href = canvas.toDataURL();
  link.click();
};
```

---

## 7. 注意事项

### 7.1 性能优化

1. **虚拟滚动**：节点数量超过50个时使用虚拟滚动
2. **懒加载**：详情面板内容按需加载
3. **防抖节流**：缩放、拖拽等操作使用防抖

### 7.2 异常处理

1. **空数据处理**：显示"暂无流程图数据"提示
2. **加载失败**：提供重试按钮
3. **超时处理**：超过30秒显示超时提示

### 7.3 用户体验

1. **加载状态**：使用骨架屏或加载动画
2. **操作提示**：提供操作引导（缩放、拖拽说明）
3. **快捷键**：支持ESC关闭弹窗，Ctrl+滚轮缩放

### 7.4 移动端适配

如需移动端支持，建议：
- 使用响应式布局
- 触摸手势支持
- 简化节点显示信息

---

## 8. 测试用例

### 8.1 基本功能测试

- [ ] 弹窗正常打开和关闭
- [ ] 数据正确加载和显示
- [ ] 节点正确渲染（位置、颜色、图标）
- [ ] 边正确连接
- [ ] 点击节点显示详情

### 8.2 状态测试

- [ ] 未开始节点显示为灰色
- [ ] 运行中节点显示蓝色并闪烁
- [ ] 成功节点显示绿色
- [ ] 失败节点显示红色并显示错误信息

### 8.3 交互测试

- [ ] 画布拖拽功能正常
- [ ] 画布缩放功能正常
- [ ] 节点选中高亮正常
- [ ] 统计数据准确

---

## 9. 参考资源

### 9.1 推荐库

- **流程图渲染**：[AntV X6](https://x6.antv.vision/)
- **UI组件**：[Ant Design](https://ant.design/)
- **图表统计**：[AntV G2Plot](https://g2plot.antv.vision/)

### 9.2 设计参考

- Jenkins 构建详情页
- GitLab CI/CD Pipeline 可视化
- GitHub Actions 工作流可视化

---

## 10. 常见问题

**Q1: 节点太多时如何优化显示？**
A: 使用缩略图导航 + 局部放大；超过100个节点时考虑分页或折叠显示。

**Q2: 如何处理长时间运行的部署？**
A: 实现自动刷新（5-10秒间隔）+ WebSocket推送更新。

**Q3: 失败节点如何快速定位？**
A: 在头部添加"快速定位失败节点"按钮，点击自动滚动并高亮。

**Q4: 如何显示审批节点的审批人信息？**
A: 在节点 outputs 中包含 `approver`、`approvalTime` 等信息，详情面板中展示。

---

## 11. 迭代计划

### V1.0（基础版）
- ✅ 流程图基本渲染
- ✅ 节点状态显示
- ✅ 统计信息展示
- ✅ 节点详情查看

### V2.0（增强版）
- 📋 实时刷新
- 📋 节点搜索/过滤
- 📋 导出功能
- 📋 操作历史记录

### V3.0（高级版）
- 📋 时间轴视图
- 📋 性能分析（节点耗时对比）
- 📋 历史部署对比
- 📋 智能建议（性能优化建议）

---

## 联系方式

如有问题，请联系后端开发团队或查阅API文档。