# 酷黑云控大屏设计规范

版本：Portfolio Reconstruction 1.0  
适用范围：车辆调度大屏、车辆路测大屏、五路视频弹窗  
基准画布：Web 1920 × 1080 px

## 1. 设计目标

这套界面服务于车辆、路侧设备、地图、视频、控制与事件的实时监控。视觉规则优先保证：

1. 当前对象始终清晰；
2. 地图保持为主要空间上下文；
3. 状态色只表达状态，不承担装饰；
4. 控制动作与实时反馈形成稳定的左右关系；
5. 车辆与路侧页面共用同一套信息层级和组件语言。

## 2. 证据说明

### 蓝湖标注可确认

- 画布：1920 × 1080 px，Web @1x / @2x；
- 车辆调度大屏版本 4，2024-08-05；
- 车辆路测大屏版本 9，2024-08-07；
- 路测视频弹窗版本 1，2024-07-25；
- 正文字体：SourceHanSansCN-Regular；
- 操作按钮字体：YouSheBiaoTiHei；
- 大屏主标题字体：HYk2gj；
- 具体尺寸、色值和位置见后续章节。

### 切图可确认

- 132 个导出文件，包含 66 个 1× 资产及对应 2× 资产；
- 顶部装饰框：1920 × 223 px；
- 左、右侧整屏装饰资产：692 × 1080 px；
- 通用小控件、按钮、状态灯、视频容器与弹窗背景均有 1× / 2× 交付。

## 3. 色彩令牌

| Token | HEX | 用途 |
|---|---:|---|
| `surface.canvas` | `#081020` | 主画布深色基底，依据交付稿与切图恢复 |
| `surface.panel` | `#00093A` | 视频弹窗底色，蓝湖精确值 |
| `line.primary` | `#4794FF` | 选择器、视频标题条、2 px 内边框 |
| `line.modal` | `#7EB0FF` | 视频弹窗 2 px 内边框 |
| `text.primary` | `#FFFFFF` | 关键数据和大屏标题 |
| `text.label` | `#A8CBFF` | 字段标签、说明文本 |
| `text.table` | `#CDDFFF` | 表头与表格辅助信息 |
| `text.button` | `#E0E5FA` | 控制按钮文字 |
| `data.info` | `#04A3FF` | 实时数值、信息状态 |
| `state.success` | `#36FF7D` | 已连接、正常运行 |
| `state.danger` | `#FF5656` | 危险、停止、异常 |
| `effect.cyan` | `#31BEFF` | 激活按钮高光 |
| `effect.green` | `#14FF61` | 成功按钮高光 |

### 使用原则

- 页面背景和结构装饰使用低亮度蓝黑色；
- 信息蓝用于可交互边界与实时数值；
- 绿色只表示成功、连接或允许运行；
- 红色只表示危险、停止或异常；
- 大面积高亮色不得作为内容背景，避免削弱地图与状态辨识。

## 4. 字体系统

| 层级 | 字体 | 字号 | 颜色 | 说明 |
|---|---|---:|---:|---|
| 大屏主标题 | HYk2gj | 38 px | `#FFFFFF` → `#5CACFB` | 339 × 37 px，居中 |
| 操作按钮 | YouSheBiaoTiHei | 20 px / 32 px | `#E0E5FA` | 强动作、短标签 |
| 关键数据 | SourceHanSansCN-Regular | 16 px | `#FFFFFF` / 状态色 | 车辆编号、数值、状态 |
| 字段标签 | SourceHanSansCN-Regular | 14 px | `#A8CBFF` | 字段名称 |
| 表格表头 | SourceHanSansCN-Regular | 14 px | `#CDDFFF` | 数据表格 |

注意：模块标题条大量使用独立 PNG 装饰资产。后续重构时，装饰框可保留为图片，文字应尽量转为可编辑文本。

## 5. 画布与布局

- 基准尺寸：1920 × 1080 px；
- 顶部标题装饰资产：1920 × 223 px；
- 左侧装饰资产：692 × 1080 px；
- 右侧装饰资产：692 × 1080 px；
- 中央地图为弹性主区域，车辆与路侧页面保持同一中心锚点；
- 左侧负责对象信息与控制，右侧负责状态、视频与事件；
- 信息密度以 8 px 为建议基础网格，常用间距为 8 / 16 / 24 / 32 px。

### 蓝湖位置样例

- 大屏标题：x 796 / y 46 / 339 × 37 px；
- 车辆选择器：x 247 / y 70 / 166 × 34 px；
- 车辆详情标题切图：x 43 / y 150 / 391 × 59 px；
- 字段标签“车辆名称”：x 111 / y 251 / 58 × 13 px；
- 状态“已连接”：x 1555 / y 237 / 46 × 16 px。

## 6. 组件

### 6.1 选择器

- 基准：166 × 34 px；
- 圆角：2 px；
- 内边框：2 px；
- 主色：`#4794FF`；
- 字段标签使用 14 px，选中值使用 16 px；
- 下拉箭头需保持最小 24 px 点击区域。

### 6.2 操作按钮

- 文本：YouSheBiaoTiHei 20 px，行高 32 px；
- 按钮文字色：`#E0E5FA`；
- 常用小按钮切图：166 × 34 px；
- 状态型按钮切图：184 × 46 px；
- 激活态可使用青色与绿色高光；
- 外阴影参考：x 2 / y 0 / blur 8 / `#053708`。

### 6.3 状态灯

- 切图基准：53 × 54 px；
- 绿、黄、红三色只表达交通灯或设备状态；
- 状态必须同时配合文字，不能只依赖颜色；
- 同一组件组内灯体尺寸、间距和光晕强度保持一致。

### 6.4 模块标题条

- 常用切图：391 × 59 px、391 × 42 px；
- 标题条只承担模块分组，不承载长句；
- 标题与内容区域之间至少保留 16 px；
- 同级模块使用相同标题条高度。

### 6.5 表格

- 表头文字：SourceHanSansCN-Regular 14 px / `#CDDFFF`；
- 行高建议 32 px；
- 分割线使用低透明度蓝色；
- 表格不使用大面积实色底，以保持与地图和视频的亮度层级。

### 6.6 五路视频弹窗

- 弹窗：x 339 / y 148 / 1243 × 785 px；
- 背景：`#00093A`；
- 内边框：2 px / `#7EB0FF`；
- 上排视频容器：380 × 239 px；
- 下排视频容器：288 × 182 px；
- 视频标题条：379 × 34 px，2 px 边框，2 px 圆角；
- 关闭图标：28 × 28 px；
- 弹窗用于按需查看，不在主页面永久占用五块视频面积。

## 7. 状态与反馈

| 状态 | 颜色 | 示例 |
|---|---:|---|
| Default | `#A8CBFF` | 标签、未强调信息 |
| Selected | `#4794FF` | 当前车辆、当前方向、当前视角 |
| Info | `#04A3FF` | 电量、速度、数值反馈 |
| Success | `#36FF7D` | 已连接、正常 |
| Warning | 黄灯切图 | 等待、注意 |
| Danger | `#FF5656` | 停止、异常、危险动作 |
| Disabled | 降低至 35%–45% 不透明度 | 暂不可用操作 |

危险操作需同时具备颜色、文字和二次确认，不能只靠红色提示。

## 8. 地图与点云

- 地图始终是车辆与路侧设备的空间主上下文；
- 选中对象后，地图高亮、对象详情、状态和视频同步更新；
- 点云亮度不得超过关键状态文字；
- 路线、对象与交通灯必须在缩放后保持可辨识；
- 地图视觉参数需以颜色、亮度、层级和透明度交付给研发，而不是只提供静态截图。

## 9. 切图交付

- Web 同时输出 @1x 和 @2x；
- PNG 不压缩，适用于发光、透明、复杂装饰资产；
- 纯色背景、边框、文字和简单圆角优先由代码实现；
- 可拉伸装饰框应改为九宫格或三段式资产，避免整图拉伸；
- 资产命名建议统一为：
  - `frame/header`
  - `frame/side-left`
  - `frame/side-right`
  - `control/button-primary`
  - `control/button-danger`
  - `status/light-green`
  - `status/light-yellow`
  - `status/light-red`
  - `icon/play`
  - `icon/stop`
  - `icon/close`

## 10. 研发验收

- 核对 1920 × 1080 下的像素还原；
- 核对不同浏览器缩放比例下的文字清晰度；
- 核对对象选择、地图高亮、详情、状态与视频联动；
- 核对五路视频按需展开与关闭；
- 核对点云旋转、缩放和细节显示；
- 核对正常、选中、危险、禁用和加载状态；
- 文字必须可选择、可替换，不能继续新增不可编辑文字切图。