# 频谱监测性能实验台 UI Spec

_实现约束与验收基准 · Web / Vue · 2026-08-04_

---

## 📋 需求拆解

| 项目 | 定义 |
| --- | --- |
| 页面类型 | 高密度工程监测台 |
| 目标用户 | 频谱监测、无线电和前端性能工程师 |
| 核心任务 | 调整负载参数并观察曲线、瀑布及性能指标 |
| 首屏主信息 | 运行状态、FPS、数据率、渲染耗时、频谱视图 |
| 次要信息 | GPU 内存估算、丢帧、端到端延迟、选区结果 |
| 平台 | 桌面 Web 优先，平板可查看，移动端仅用于诊断 |
| 数据源 | Web Worker 模拟二进制强度帧 |

必须包含正常、暂停、配置应用中、WebGL 不支持和 Worker 异常状态。页面不包含营销内容，不使用装饰型卡片；控制条和性能条保持紧凑，主区域用于频谱数据。

## 🎯 页面规格

```yaml
screen:
  name: 频谱监测性能实验台
  surface: web
  type: dashboard
  goal: 测量全频或多窗口曲线与瀑布图的浏览器性能边界
  target_users:
    - 频谱监测工程师
    - 前端性能工程师
  primary_task: 配置数据规模并在交互过程中判断是否满足性能目标
  information_density: high
  visual_style: 安静、专业、偏仪器界面

platform:
  stack: Vue 3 + TypeScript + Web Worker + WebGL2
  existing_components:
    - lucide-vue-next
  state_management: Vue Composition API local state
  routing_or_navigation: 单页面
  design_system: 项目内紧凑变量与原生表单控件

layout:
  shell: 固定标题与控制区、性能状态条、可滚动频谱区域
  max_width_or_device_rule: 桌面占满可用宽度，最小支持 768px
  background: 中性深灰仪器背景
  content_container: 全宽无装饰外卡片
  regions:
    - id: control_bar
      name: 测试控制
      priority: high
      position: 顶部
      adaptive_behavior: 窄屏换行
    - id: metrics_bar
      name: 性能指标
      priority: high
      position: 控制区下方
      adaptive_behavior: 自动换列
    - id: spectrum_surface
      name: 频谱与瀑布
      priority: high
      position: 主内容区
      adaptive_behavior: 1 至 4 列响应式网格
    - id: selection_feedback
      name: 选区结果
      priority: medium
      position: 性能条右侧
      adaptive_behavior: 窄屏独占一行

interactions:
  - name: 应用负载配置
    trigger: 点击应用按钮
    result: 重建 Worker 数据规模和 GPU 纹理
    feedback: 指标归零并显示运行状态
    risk: none
  - name: 暂停数据流
    trigger: 点击暂停按钮
    result: Worker 停止生成帧
    feedback: 状态显示已暂停
    risk: none
  - name: 调整阈值
    trigger: 拖动阈值滑块
    result: 所有曲线更新阈值线和超限颜色
    feedback: 实时显示 dBm 数值
    risk: none
  - name: 框选频率区域
    trigger: 在任一窗口按下并拖动
    result: 显示矩形和频率范围
    feedback: 性能条显示窗口编号与起止频率
    risk: none

tokens:
  color_style: 中性深色背景，青绿数据，黄色阈值，红色告警
  primary: "#2dd4bf"
  success: "#55d187"
  warning: "#f5c451"
  danger: "#ff735f"
  background: "#101416"
  typography: 系统无衬线字体与等宽数字
  spacing: 4/8/12/16/24
  radius: 4px
  elevation_or_shadow: 无大面积阴影，仅使用边框分层
  density: compact

adaptive:
  desktop: 1440px 以上显示四列频率窗口
  tablet: 768 至 1199px 显示两列
  mobile: 低于 768px 显示单列并允许控制条换行
  text_scale: 支持浏览器 125% 缩放且不重叠
  orientation: 桌面横向优先

accessibility:
  semantics: Canvas 具有描述文本，每个频率窗口具有可访问名称
  focus_order: 配置控件、运行控制、频谱窗口
  labels: 图标按钮必须提供 aria-label 和 title
  contrast: 文本和状态色满足深色背景可读性
  motion: prefers-reduced-motion 下关闭非必要过渡
  touch_targets: 交互控件最小高度 32px
```

## ✅ 验收标准

1. 支持 1、8、16、32、64 个窗口以及 512 至 8192 FFT 点
2. 每个窗口同时出现当前曲线、阈值线和瀑布历史
3. 参数应用后不刷新页面，指标和纹理正确重置
4. 框选后显示频率范围，选择层不改变 Canvas 尺寸
5. 实时显示 FPS、接收频率、吞吐、上传、绘制、延迟、丢帧和纹理内存
6. FFT TypedArray 不进入 Vue 深层响应式状态
7. 桌面、平板和移动宽度无文本重叠或水平溢出
8. WebGL2 初始化失败时显示明确错误，而不是空白画布

## 🔍 待实测问题

- 目标设备在 64 × 4096 × 20 Hz 下的 Worker 生成能力
- 不同 GPU 对 `R8 texture2DArray` 连续行上传的耗时差异
- 画布高度、设备像素比和多窗口布局对填充率的影响
- 8192 点曲线使用原始 `LINE_STRIP` 时是否需要屏幕空间 LOD

---

_最后更新：2026-08-04_