# 右侧「系统」面板 · UI 重设计规范 v1

> 目标：把当前单列拉伸的面板，改成**一眼率（glanceable）+ 可扫描 + 可下钻**的系统监控面板；420px 单列与宽屏/全屏双列都成立。
> 效果图待用假数据重新生成（原浅色 / 深色 / 宽屏双列三张效果图印有真实机型信息，已删除）。

## 1. 现状诊断（对着线上截图）

| # | 问题 | 说明 |
|---|---|---|
| 1 | CPU 一处信息说四遍 | 环形（82px）+ 旁边 32px 大数字 + 右上「每核占用」+ 一排每核条；环中心是空的，主值不在环里 |
| 2 | 宽度浪费 | 面板被全屏/拉宽后仍单列铺满，1286px 宽下大量横向空白，单位/数值距离过远 |
| 3 | 每核不成图 | 10 根等宽高条更像「分段进度」，没有 0–100% 基准、没有最高/最低、没有 hover 值 |
| 4 | 网络不是趋势 | 一排方块 + 「近 11s」，看不出时间轴、上下行、峰值；累计流量和实时速率混在一条 |
| 5 | 层级弱 | 区块标题、主值、单位、次级说明字号接近；单位散落（/s、GB、T 位置不统一） |
| 6 | 状态语义缺位 | 没有「正常/偏高/不可用」；只能用颜色猜；温度不可用时整块消失，用户以为坏了 |
| 7 | 进程过于简陋 | 无表头、无排序、无占比可视化，只有 3 行 |
| 8 | 节奏不统一 | 环与大数字基线不齐；每块内边距、分隔线粗细/间距不一致；底部大片留白无收束 |

## 2. 设计原则（对齐行业做法）

- **一指标一主值**：主值只出现一次（CPU 用环内百分比，不再另起大数字）；单位跟值、字号降一级。
- **图表必须可读**：趋势图有 60s 时间窗与峰值；每核有 0–100% 基准与最高/最低；网络用「上行/下行两行 spark」而非并排柱。
- **颜色只表达状态**：正常/偏高/临界三档（≤60/60–85/≥85），中性数据用 accent/灰，不用彩虹色。
- **密度分两档**：420px 单列（默认右栏）；≥720px 双列（全屏/拉宽），同一套区块重排而不是拉伸。
- **对齐与节奏**：4/8px 栅格；section 16px 内边距，14px 上下间距；数字一律 `tabular-nums`。
- **降级有位置**：不可用/过期/首帧都有明确占位（虚线说明条、`—`、灰点），不让区块凭空消失。

行业参照：macOS Activity Monitor（概览+历史图+表格）、iStat Menus / Stats（行式 sparkline + 单位后缀）、btop（每核网格）、Grafana Stat panel（主值 + spark + min/max）、Datadog（阈值色）、Apple HIG（8pt 栅格、层级字体）。

## 3. 结构规范

```
[设备行]  ● 本机 · Example Mac · Apple M2 Pro · 10 核 · macOS 15.0       [1s]
──────────────────────────────────────────────────────────────
CPU            [正常]
◔24%   近60s 峰值41%  ⟿spark               负载 2.31/2.10/1.98
                                           温度 —
▁▃▅ 每核（0–100%）                          最高68% · 最低4%
──────────────────────────────────────────────────────────────
内存                                        21.3 / 32 GB
[████████░░░░░░░░]   已用21.3 缓存4.6 可用10.7 交换6.4
──────────────────────────────────────────────────────────────
磁盘                        [剩余87%]       1.6 / 1.8 TB
[██░░░░░]   读 52.8 KB/s          写 3.5 MB/s
──────────────────────────────────────────────────────────────
网络                                    [近60s]
↑ 105 KB/s  ⟿spark(绿)
↓ 8.8 KB/s   ⟿spark(蓝)
累计 ↑168 G · ↓98.0 G
──────────────────────────────────────────────────────────────
温度   [不可用]
ⓘ macOS 没有免特权温度源，装可选 helper 后自动出现        如何启用 →
──────────────────────────────────────────────────────────────
Top 进程                              [按CPU|按内存]
进程                占用条        CPU    内存
node              ███████░░░    38.2%   4.1 G
...
──────────────────────────────────────────────────────────────
[风扇 1.2K rpm] [功耗 28W] [进程 486] [运行 9d 5h]
──────────────────────────────────────────────────────────────
● 采样 1s · 仅本机                                    设置 → 系统 HUD
```

尺寸/样式：

| 项 | 规范 |
|---|---|
| 字号阶 | 区块标题 11px/650 字距 .3；主值 16–18px/700；正文 11–12px；单位/说明 9.5–10.5px |
| 主值 | CPU 环 64px（stroke 5.4，环内 15px/700）；内存/磁盘右对齐 13px/650 + 单位 10px |
| 每核 | 10 列网格，高 30px，圆角 2px，`opacity .85`；底部左侧「每核（0–100%）」右侧最高/最低 |
| 条 | 高 8px，圆角 99，track=`--dsw-alias-scrollbar-bg-l1`；内存分段 2px 间隙 |
| 趋势 | spark 高 22–34px，面积渐变 16%，线宽 1.5–1.6；网络上下行分两行 |
| 状态徽标 | 9.5px/600，ok/warn/err 三色 soft 背景；`不可用` 用中性灰 |
| 分隔 | 1px（=0.5px 渲染）`--dsw-alias-border-l3`；section 间 14px |
| 进程 | 行高 24px；名称 11px；占用条 3px；CPU/内存右对齐 `tabular-nums` |

## 4. 响应式

| 断点 | 布局 |
|---|---|
| < 720px（默认右栏 420） | 单列，顺序：CPU → 内存 → 磁盘 → 网络 → 温度 → 进程 → 更多 |
| ≥ 720px（右栏全屏/拉宽） | 双列：左 [CPU、磁盘、温度] / 右 [内存、网络、更多]；Top 进程通栏（名称 200 + 条 220 + 数值右对齐） |

## 5. 状态矩阵

| 指标 | 正常 | 偏高 | 临界 | 不可用 | 过期 |
|---|---|---|---|---|---|
| CPU/内存/磁盘 | 绿环/条 | 琥珀 | 红 | — | 数值 + 灰点 + `过期 12s` |
| 温度 | 绿/琥珀/红文字 | — | — | 虚线说明条 + 「不可用」 | 同上 |
| 网络 | 上行绿/下行蓝 | — | — | `—` + 说明 | 保留最后值 |
| 首帧（无前值） | `—`（不要 0/NaN） | | | | |

## 6. 实现映射（client.js `SystemPane`）

1. 拆组件：`DevRow` / `SecHead` / `CpuHero` / `CoreGrid` / `MemBar` / `DiskBar` / `NetRows` / `TempUnavailable` / `ProcTable` / `MoreChips` / `PaneFoot`。
2. store 扩展：`history` 从「只存网络」扩到 `{ t, cpu, rx, tx }`（60 点环形），CPU spark 才能画。
3. 新增 i18n 键：`cpuStatus`/`peak`/`loadLabel`/`perCore`/`maxMin`/`read`/`write`/`netUp`/`netDown`/`cumulative`/`tempHelp`/`sortCpu`/`sortMem`/`fan`/`power`/`procCount`/`uptime`（zh/en 同步）。
4. 颜色只用 `--dsw-*`：`state-success/warn/error-primary`、`label-primary/secondary/tertiary`、`scrollbar-bg-l1`、`bg-layer-2`、`border-l3`。
5. 宽度断点用容器宽度（右栏 420 / 全屏 ≥720），不要用 window.innerWidth（右栏可拖宽/全屏）。
6. 进程排序：`按CPU`/`按内存` 两态，切换本地排序，不重新请求。

## 7. 实现状态（0.1.2 已落地）

- [x] `SystemPane` 重写：DevRow / CpuHero（环 + spark + 负载/温度）/ CoreGrid / MemBar / DiskBar / NetRows / TempUnavailable / ProcTable / MoreChips / PaneFoot；
- [x] 响应式断点 **600px**（右栏默认 420 单列；≥600 双列，进程表通栏）；
- [x] store history 扩到 `{ t, cpu, rx, tx }`，CPU 60s 趋势；
- [x] stale 按各 section 采样周期判定（fast/slow/top），修掉内存/磁盘“已过期 4s”误报；
- [x] 默认指标隐藏改为 `["load"]`（Top 进程默认可见）；
- [x] 速率单位统一 `B/s`（KB/s、MB/s），进程表支持按 CPU / 内存排序；
- [x] 真实实例验证：420 单列与 719 宽双列均正常，无 console 错误（真实实例截图不入库，仅保留 harness 假数据截图）。

## 8. 验收清单

- [ ] 420 与 900 宽都不出现拉伸空行 / 横向溢出；
- [ ] 每个指标只有一个主值；单位与值同行且字号降级；
- [ ] CPU 有 60s 趋势与峰值；每核有基准线说明与最高/最低；
- [ ] 网络上下行分行、各自 spark；累计与实时分离；
- [ ] 温度不可用为显式说明条，不是消失；
- [ ] 首帧/过期/异常三态都有占位；
- [ ] 深浅色只用 `--dsw-*`，无硬编码色值（fallback 除外）；
- [ ] 进程表有表头与排序，数值右对齐；
- [ ] 设置页保持现有规范（顶部 GitHub/反馈/检查更新 + 位置开关）。