143 lines
4.8 KiB
Markdown
143 lines
4.8 KiB
Markdown
# 频谱监测性能实验台 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_
|