3. Web 前端技术选型：React/Vue 框架对比、UI 组件库选择、状态管理方案

在自助容量压测作业平台中，Web 前端承担着任务编排、实时监控、报告展示等核心交互。选型需兼顾开发效率、生态成熟度、团队技术栈与长期维护成本。本章从框架、UI 组件库、状态管理三个维度进行技术选型分析。

3.1 框架选型：React vs Vue 3

React 与 Vue 3 均为当前主流前端框架，但在设计哲学、数据流、渲染机制上存在显著差异。以下从压测平台的关键需求出发进行对比：

3.2 UI 组件库选择

压测平台包含大量数据表格、表单、图表、拖拽编排等场景，UI 组件库需满足以下要求：

• 表格组件：支持虚拟滚动、列固定、行展开、批量操作
• 表单组件：动态表单项、校验联动、JSON Schema 渲染
• 图表组件：实时折线图、柱状图、热力图（TPS/响应时间/错误率）
• 拖拽组件：任务节点拖拽编排、DAG 流程图
• 主题定制：支持暗色模式、品牌色替换

3.3 状态管理方案

压测平台的状态管理需分层处理，避免全局状态膨胀。推荐采用 服务端状态 + 客户端状态 分离策略：

• 服务端状态：任务列表、压测报告、实时指标 —— 使用 React Query / TanStack Query 或 Vue Query 管理缓存与自动刷新
• 客户端状态：表单填写、UI 交互状态、拖拽编排 —— 使用 Zustand (React) 或 Pinia (Vue 3)
• URL 状态：筛选条件、分页页码、Tab 切换 —— 使用 React Router / Vue Router 的 query 参数

3.4 状态管理代码示例

以 React + Zustand 为例，展示压测任务编排的状态管理核心代码：

// store/taskStore.ts
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';

interface TaskNode {
  id: string;
  type: 'http' | 'grpc' | 'websocket' | 'wait';
  label: string;
  config: Record<string, any>;
}

interface TaskEdge {
  source: string;
  target: string;
  condition?: string;
}

interface TaskStore {
  nodes: TaskNode[];
  edges: TaskEdge[];
  selectedNodeId: string | null;
  
  // 操作
  addNode: (node: TaskNode) => void;
  removeNode: (id: string) => void;
  updateNodeConfig: (id: string, config: Record<string, any>) => void;
  setSelectedNode: (id: string | null) => void;
  addEdge: (edge: TaskEdge) => void;
  removeEdge: (source: string, target: string) => void;
}

export const useTaskStore = create<TaskStore>()(
  devtools(
    persist(
      (set) => ({
        nodes: [],
        edges: [],
        selectedNodeId: null,
        
        addNode: (node) =>
          set((state) => ({ nodes: [...state.nodes, node] })),
        
        removeNode: (id) =>
          set((state) => ({
            nodes: state.nodes.filter((n) => n.id !== id),
            edges: state.edges.filter(
              (e) => e.source !== id && e.target !== id
            ),
          })),
        
        updateNodeConfig: (id, config) =>
          set((state) => ({
            nodes: state.nodes.map((n) =>
              n.id === id ? { ...n, config: { ...n.config, ...config } } : n
            ),
          })),
        
        setSelectedNode: (id) => set({ selectedNodeId: id }),
        
        addEdge: (edge) =>
          set((state) => ({ edges: [...state.edges, edge] })),
        
        removeEdge: (source, target) =>
          set((state) => ({
            edges: state.edges.filter(
              (e) => !(e.source === source && e.target === target)
            ),
          })),
      }),
      {
        name: 'task-editor-storage',
        partialize: (state) => ({
          nodes: state.nodes,
          edges: state.edges,
        }),
      }
    )
  )
);

3.5 选型总结