前端架构总览

技术选型与理由

技术	版本	选型理由
React	19	成熟的组件化 UI 框架，生态丰富，函数式组件 + Hooks 范式简洁高效
TypeScript	5.x	静态类型保障前后端接口对齐，IDE 支持好，减少运行时错误
Vite	7	极快的开发服务器启动和 HMR，ESM 原生支持，配置简洁
TailwindCSS	v4	原子化 CSS 工具类，与 React 内联式开发风格互补，用于布局基础类
React Router	v7	声明式路由，嵌套布局支持，URL 参数类型安全
Lucide React	latest	轻量 SVG 图标库，Tree-shakeable，风格统一

样式策略：主体使用 CSS 自定义属性（CSS Variables）+ 内联 style 对象实现主题化；TailwindCSS 仅用于 flex、items-center、gap 等布局工具类。

项目结构

src/unet_dt/ui/
├── index.html              # HTML 入口
├── package.json            # 依赖与脚本
├── vite.config.ts          # Vite 配置（含 API 代理）
├── tailwind.config.ts      # Tailwind 配置
├── tsconfig.json           # TypeScript 配置
└── src/
    ├── main.tsx            # React 应用入口
    ├── App.tsx             # 路由定义与全局布局
    ├── index.css           # 全局样式（CSS Variables）
    ├── api/
    │   └── client.ts       # HTTP API 客户端封装
    ├── components/         # 可复用 UI 组件（11 个）
    │   ├── Layout.tsx      # 全局布局（Sidebar + Content Area）
    │   ├── Sidebar.tsx     # 侧边导航栏
    │   ├── HealthStrip.tsx # 顶部健康状态条
    │   ├── PageHeader.tsx  # 页面标题区域
    │   ├── Card.tsx        # 通用卡片容器
    │   ├── MetaCard.tsx    # 指标摘要卡片
    │   ├── StatusBadge.tsx # 运行状态标签
    │   ├── RunsTable.tsx   # 运行列表表格
    │   ├── TabGroup.tsx    # 标签页切换
    │   ├── BarChart.tsx    # 柱状图组件
    │   └── Pagination.tsx  # 分页控件
    ├── hooks/              # 自定义 React Hooks（3 个）
    │   ├── usePolling.ts   # 通用轮询 Hook
    │   ├── useRunPolling.ts # 运行状态轮询 Hook
    │   └── useWebSocket.ts # WebSocket 连接 Hook
    ├── pages/              # 路由页面组件（8 个文件，10 个页面）
    │   ├── Dashboard.tsx   # 运行仪表盘（首页）
    │   ├── CreateRun.tsx   # 创建运行
    │   ├── RunDetail.tsx   # 运行详情
    │   ├── ABCompare.tsx   # A/B 对比
    │   ├── LiveMonitor.tsx # 实时监控
    │   ├── SystemConfig.tsx # 系统配置
    │   ├── HealthCheck.tsx # 节点健康检查
    │   ├── ScenarioList.tsx # 场景列表
    │   └── ScenarioEditor.tsx # 场景编辑器（新建/编辑复用）
    └── types/              # TypeScript 类型定义
        ├── run.ts          # 运行、指标、产物等类型
        └── scenario.ts     # 场景相关类型

路由设计

路由定义在 App.tsx 中，使用 react-router-dom 的 BrowserRouter + Routes：

路由	页面组件	说明
`/`	`Dashboard`	运行仪表盘（默认首页）
`/create`	`CreateRun`	创建新运行
`/runs/:runId`	`RunDetail`	运行详情页
`/compare`	`ABCompare`	A/B 策略对比
`/monitor`	`LiveMonitor`	实时监控
`/config`	`SystemConfig`	系统与节点配置
`/health`	`HealthCheck`	节点健康检查
`/scenarios`	`ScenarioList`	场景管理列表
`/scenarios/new`	`ScenarioEditor`	新建场景
`/scenarios/:id/edit`	`ScenarioEditor`	编辑场景

所有路由嵌套在 Layout 组件内，Layout 提供 Sidebar 导航 + Content 主区域的固定布局。

API 代理配置

Vite 开发服务器配置了 API 代理（vite.config.ts），将前端的 API 请求透明转发到后端：

typescript

server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8000',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
    '/ws': {
      target: 'ws://localhost:8000',
      ws: true,
    },
  },
}

前端 client.ts 中的 API 调用均使用相对路径（如 /health），由 Vite 代理或生产环境的 Nginx 转发。

主题系统

应用使用 CSS 自定义属性实现主题化，变量定义在 index.css 的 :root 中：

css

:root {
  --background: #FAFBFC;
  --foreground: #1A1A2E;
  --primary: #5B6AF0;
  --primary-foreground: #FFFFFF;
  --muted: #F4F4F5;
  --muted-foreground: #71717A;
  --border: #E4E4E7;
  --input: #D4D4D8;
  --destructive: #EF4444;
  --white: #FFFFFF;
}

组件通过内联 style 对象引用这些变量（如 backgroundColor: "var(--primary)"），实现一致的视觉风格。

数据流概览

用户操作 → React 组件 → api/client.ts → HTTP/WS 请求
                ↑                              ↓
              状态更新 ←── JSON 响应 / WS 事件推送

数据获取：页面组件在 useEffect 中调用 client.ts 的 API 函数
实时更新：
- useRunPolling hook：HTTP 轮询 GET /runs/{id}/status，1 秒间隔
- usePolling hook：通用轮询（如 HealthCheck 页 15 秒刷新）
- useWebSocket hook：WebSocket 连接（可选，当前 LiveMonitor 未使用）
状态管理：使用 React 内置 useState + useEffect，无外部状态管理库

前端架构总览 ​

技术选型与理由 ​

项目结构 ​

路由设计 ​

API 代理配置 ​

主题系统 ​