频谱监测性能实验台 UI Spec

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

📋 需求拆解

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

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

🎯 页面规格

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

🔍 待实测问题

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

最后更新：2026-08-04

4.8 KiB Raw Permalink Blame History Unescape Escape

频谱监测性能实验台 UI Spec

📋 需求拆解

🎯 页面规格

✅ 验收标准

🔍 待实测问题

4.8 KiB

Raw Permalink Blame History