# UI 设计 (Docs/40_ui-design/main.md)

本章节定义手环 135x240 TFT LCD 屏幕的画面布局、各页面坐标位置、中文字体/ASCII 字符对齐基线以及局部刷新逻辑。

## 1. 屏幕物理参数与刷新机制

*   **屏幕规格**：1.14寸 TFT LCD 屏，物理分辨率 **`135x240`**。
*   **坐标偏移修正**：写屏窗口渲染存在 **4 像素的 X 轴偏移量**，调用 `LCD_SetWindow(x1 + 4, x2 + 4, y1, y2)`。
*   **局部刷新防抖机制**：清除重绘标志（`Redraw`）的动作必须在具体的刷新绘制块结束时重置，防止因为主循环高速轮询而产生屏幕闪烁。

---

## 2. 页面布局与坐标坐标规范

### 2.1 时钟待机界面 (STATE_NORMAL / STATE_ARMED / STATE_DISARMED)

时钟页面作为常态显示，包括状态栏、数字时钟和日期行。

```
+-----------------------------------------+
|  🔒 ARME                      🔋 85%    | <- 状态栏 (Y=24~27)
|                                         |
|                                         |
|                 10:35                   | <- 中央时间 (Y=80~128)
|                                         |
|                                         |
|              VEN. 07-10                 | <- 底部日期 (Y=180)
+-----------------------------------------+
```

*   **状态栏电量显示（极重要）**：
    *   **电池图标** 绘制在 `X=107, Y=27`。
    *   **电量百分比** 绘制在 `X=77, Y=24`。
    *   两个控件在 `135` 像素宽的屏幕上保持 **6 像素安全间距**（77 + 3*8 = 101，与 107 之间为 6px），彻底防范乱码和字符相撞。
*   **安防状态显示**：
    *   **布防状态 (ARMED)**：状态栏左侧显示红色闭锁 `🔒` 图标，显示 `ARME`。
    *   **撤防状态 (DISARMED)**：状态栏左侧显示绿色开锁 `🔓` 图标，显示 `DESARME`。

### 2.2 传感器配对选择菜单 (STATE_PAIR_MENU)

*   **顶部标题**：显示 `MODE PAIR P-XX`（其中 XX 为当前已配对的传感器数量）。
*   **列表滚动框**：采用 3 行滚动列表，当前行高亮并显示粗体外框，字号放大（如 `DETEC. PORTE`），非当前行暗淡显示。
*   **按键确认行为**：在配对菜单页面，短按侧边 **■ 确认键** 进入所选防区类型的对码等待状态。

### 2.3 报警触发与本地 SOS 界面 (STATE_ALARMING / STATE_SOS_EMITTED)

*   **报警提示边框**：全屏闪烁的红色警告虚线/实线边框。
*   **中央图标**：根据触发的防区传感器类型，居中绘制对应的单色位图图标（32x32px）：
    *   门磁：`🚪` 开门图标。
    *   红外：`👤` 人体辐射波纹图标。
    *   烟感：`🔥` 火苗图标。
    *   燃气：`💨` 毒气云雾图标。
    *   水浸：`💧` 滴水波纹图标。
    *   **主动 SOS 界面**：大字显示 `SOS EMIS`，居中显示 `🚨` 旋转警灯图标。
*   **绑定 IPC 界面 (STATE_BINDING)**：
    *   顶部标题：`LIAISON IPC` (法语：与 IPC 绑定)。
    *   中央：正在发送提示，显示 `ENVOI EN COURS`，配对确认锁图标。
    *   **手环 Factory ID 显示**：底部居中显示手环自身出厂地址：`ID: 0xXXXXX`，以便用户配对及辨识。

---

## 3. 文字居中对齐与字模基线规范

为保证排版美观，[Drivers/lcd_font.h](file:///c:/workfile/105/stc32g12k128/Drivers/lcd_font.h) 内的标准字模点阵需要满足如下基线对齐：
*   **水平居中公式**：
    *   对于标准 8px 宽字符：X 轴绘制起点为 `(135 - len * 8) / 2`。
    *   对于双倍放大 16px 宽时钟字符：X 轴绘制起点为 `(135 - len * 16) / 2`。
*   **百分号（%）符号基线修正**：百分号字符在 `lcd_font.h` 数组的索引 `0x25` 中，点阵数据需**向上平移 2 像素**，以和 `0~9` 数字的基线保持严格水平对齐，避免百分号整体下沉。