zouhaitao/stc32g128k
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: optimize SOS button behavior, add 2-step pairing wizard, and IPC exit action

Browse Source
This commit is contained in:
zouhaitao
2026-07-09 17:42:55 +08:00
parent 1168e747e6
commit 32c07c0466
16 changed files with 821 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
Docs/40_ui-design/main.md
View File

@@ -1,85 +1,107 @@
# UI 设计 (Docs/40_ui-design/main.md)
本章节定义手环 135x240 TFT LCD 屏幕的画面布局、各页面坐标位置、中文字体/ASCII 字符对齐基线以及局部刷新逻辑。
本章节定义手环 120x240 Truly AMOLED 屏幕的画面布局、各页面坐标位置、中文字体/ASCII 字符对齐基线以及局部刷新逻辑。
## 1. 屏幕物理参数与刷新机制
* **屏幕规格**：1.14寸 TFT LCD 屏，物理分辨率 **`135x240`**。
* **竖向屏规范**：屏幕窗口配置为 **`135` 像素宽，`240` 像素高**。页面中的时钟、菜单、报警元素均采用竖屏垂直居中排版。
* **坐标偏移修正**：TFT LCD 驱动芯片（ST7789V）的显示 RAM 大小为 240x320 像素。在控制 135x240 的竖屏物理面板时，为了将显示窗口完美对齐至显示区域，防止花屏或偏置错误，写屏窗口渲染必须应用 **X 轴偏移量 +52，Y 轴偏移量 +40**。即：`LCD_SetWindow(x1 + 52, x2 + 52, y1 + 40, y2 + 40)`。
* **屏幕规格**：0.95寸 Truly AMOLED 屏，物理分辨率 **`120x240`**。
* **竖向屏规范**：屏幕窗口配置为 **`120` 像素宽，`240` 像素高**。页面中的时钟、菜单、报警元素均采用竖屏垂直居中排版（以 `X=60` 为几何中线）。
* **坐标偏移修正**： Truly AMOLED 屏幕驱动芯片（RM69310）控制的 GRAM 存在偏置。为了使画面对齐，写屏窗口渲染必须应用 **X 轴偏移量 +4，Y 轴偏移量 +0**。即：`LCD_SetWindow(x1 + 4, x2 + 4, y1, y2)`。
* **局部刷新防抖机制**：清除重绘标志（`Redraw`）的动作必须在具体的刷新绘制块结束时重置，防止因为主循环高速轮询而产生屏幕闪烁。
---
## 2. 页面布局与坐标坐标规范
### 2.1 时钟待机界面 (STATE_NORMAL / STATE_ARMED / STATE_DISARMED)
### 2.1 时钟待机界面 (STATE_CLOCK)
时钟页面作为常态显示，包括状态栏、数字时钟和日期行。
```
+-----------------------------------------+
| 🔒 ARME 🔋 85% | <- 状态栏 (Y=24~27)
| 🔒 ARME 🔋 85% | <- 状态栏 (Y=24~27)
| |
| |
| 10:35 | <- 中央时间 (Y=80~128)
| |
| |
| VEN. 07-10 | <- 底部日期 (Y=180)
| |
+-----------------------------------------+
```
* **状态栏电量显示（极重要）**：
* **电池图标** 绘制在 `X=107, Y=27`。
* **电量百分比** 绘制在 `X=77, Y=24`。如果处于充电状态，追加 `+` 号后缀显示为 `85%+`，起始绘制点向左平移（如 `X=69`）以确保与电池图标之间依然有安全间距。
* 两个控件在 `135` 像素宽的屏幕上保持 **6 像素安全间距**，彻底防范乱码和字符相撞。
* **电池图标** 绘制在 `X=82, Y=27`。
* **电量百分比** 绘制在 `X=76, Y=24`（以 `text-anchor="end"` 右对齐绘制）。如果处于充电状态，追加 `+` 号后缀显示为 `85%+`，起始绘制坐标向左偏置，以确保与电池图标之间依然有安全间距，不发生碰撞。
* **安防状态显示**：
* **布防状态 (ARMED)**：状态栏左侧显示红色闭锁 `🔒` 图标，显示 `ARME`。
* **撤防状态 (DISARMED)**：状态栏左侧显示绿色开锁 `🔓` 图标，显示 `DESARME`。
### 2.2 传感器配对选择菜单 (STATE_PAIR_MENU)
### 2.2 主选择菜单页面 (STATE_MENU)
* **顶部标题**：显示 `MODE PAIR P-XX`（其中 XX 为当前已配对的传感器数量）。
* **列表滚动框**：采用 3 行滚动列表，可在 **7 种传感器类型**（门磁、红外、烟感、紧急、气体、水浸、振动）中上下循环滚动选中。当前行高亮并显示粗体外框，字号放大（如 `DETEC. PORTE`），非当前行暗淡显示。
* **按键确认行为**：在配对菜单页面，短按侧边 **■ 确认键** 进入所选防区类型的对码等待状态。
由时钟待机长按 CONFIRM 键 3 秒进入。显示四个功能条目，供滚动选择：
```
+-----------------------------------------+
| - MENU - | <- 标题 (Y=30)
| |
| 1. DATE/HEURE | <- 条目 1 (Y=80)
| > 2. APPAIRAGE < | <- 选中项高亮并加尖括号 (Y=115)
| 3. ARM/DISARM | <- 条目 3 (Y=150)
| 4. LIAISON IPC | <- 条目 4 (Y=185)
+-----------------------------------------+
```
* 当前所选中的菜单项前后加上闪烁的 `> <` 箭头或以高亮粗体形式渲染，其余非选中项正常亮度显示。
* 短按 ▲ 键向上滚动，▼ 键向下滚动。短按 CONFIRM 键进入该项。
### 2.3 报警触发与本地 SOS 界面 (STATE_ALARMING / STATE_SOS_EMITTED)
### 2.3 功能设定与子界面设计
* **报警提示边框**：全屏闪烁的红色警告虚线/实线边框。
* **中央图标**：根据触发的防区传感器类型，居中绘制对应的单色位图图标（32x32px）：
* 门磁：`🚪` 开门图标。
* 红外：`👤` 人体辐射波纹图标。
* 烟感：`🔥` 火苗图标。
* 紧急按钮：`🆘` 求救图标。
* 燃气：`💨` 毒气云雾图标。
* 水浸：`💧` 滴水波纹图标。
* 振动：`📳` 震动线框图标。
* **主动 SOS 界面**：大字显示 `SOS EMIS`，居中显示 `🚨` 旋转警灯图标。
* **绑定 IPC 界面 (STATE_BINDING)**：
* 顶部标题：`LIAISON IPC` (法语：与 IPC 绑定)。
* 中央：正在发送提示，显示 `ENVOI EN COURS`，配对确认锁图标。
* **手环 Factory ID 显示**：底部居中显示手环自身出厂地址：`ID: 0xXXXXX`，以便用户配对及辨识。
#### 2.3.1 时间日期修改界面 (STATE_SET_TIME)
* **页面指示**：顶部大字 `REGLAGE HEURE`。
* **数据列表**：居中分行显示当前编辑的 `HOUR`、`MIN`、`SEC`、`YEAR`、`MONTH`、`DAY`。
* **光标与交互**：当前正在修改的数值行（如修改“小时”）闪烁或带有下划线高亮。按 ▲ 键增加数值，▼ 键减小数值，短按 CONFIRM 确认并跳转至下一项，全部设置完后自动保存返回时钟页。
### 2.4 对码确认与序号微调界面 (STATE_PAIR_CONFIRM)
#### 2.3.2 传感器对码等待与配对界面 (STATE_PAIR_SEARCH)
* **顶部标题**：显示 `APPAIRAGE`（配对）。
* **中央图案**：绘制雷达搜索波纹动画 `SEARCHING...`，并闪烁提示 `DECLENCH. SENS`（触发传感器）。
#### 2.3.3 对码确认与二步微调界面 (STATE_PAIR_CONFIRM)
当手环解码到传感器对码信号后，切入此确认页：
```
+-----------------------------------------+
✓ RECU (对码成功) (Y=40)
[ 🚪 ICON ] (Y=80)
PORTE (Y=135)
[ 01 ] (Y=165) <- 序号微调框 (可按 ▲/▼ 修改)
| ✓ RECU (Y=40)
|
| PORTE (Y=90) <- 步骤1: 传感器类型 (可按 ▲/▼ 修改)
|
| [ 🚪 ICON ] (Y=130) <- 对应位图图标 (32x32px)
|
| [ 01 ] (Y=180) <- 步骤2: 序号选框 (可按 ▲/▼ 修改)
+-----------------------------------------+
```
* **元素定位**：
* 顶部显示提示语 `✓ RECU`（法语：已接收），绿字。
* 中央显示捕获传感器 32x32 对应位图图标。
* 下方第一行展示传感器名称前缀（如 `PORTE`）。
* 下方第二行展示序号选框 `[ 01 ]`：其中包含两个外括号，中间的数字即为 `selected_suffix_num`（01~99）。当用户按 ▲ 或 ▼ 键时，中间数字动态增减并实时局部刷新，外括号保持静止，增强可编辑交互感。
* **确认行为**：短按 CONFIRM 键或 SOS 键保存退出。
* **二步选择焦点逻辑**：
* **步骤1 (编辑类型)**：焦点在类型文字处（例如类型名称前后有闪烁括号 `[ PORTE ]`），此时按 ▲/▼ 键可在门磁、红外、烟感等 7 种传感器类型间循环切换，图标实时更换。点击 CONFIRM 键保存当前类型并锁定，焦点切换到步骤2。
* **步骤2 (编辑序号)**：焦点切换在底部的序号选框 `[ 01 ]`。此时按 ▲/▼ 键自增或自减数字序号（01~99）。点击 CONFIRM 键完成最终保存并存入数据库，返回时钟待机。
* *长按 CONFIRM 键 3 秒放弃修改并直接返回时钟待机*。
#### 2.3.4 系统布撤防手动选择界面 (STATE_ARM_DISARM_SELECT)
* **顶部标题**：显示 `REG. ALARME`。
* **两个状态选项**：
* `[ ARME ]`
* `[ DESARME ]`
* 按 ▲ / ▼ 键在这两者之间切换高亮。按 CONFIRM 键确认生效，系统状态转入 ARMED 或 DISARMED 并返回时钟页。
#### 2.3.5 IPC 绑定发射界面 (STATE_IPC_BIND)
* **页面指示**：显示 `LIAISON IPC` (IPC 绑定)。
* **发射中提示**：中央大字显示 `ENVOI EN COURS`（正在发送），绘制动态发射波形，系统使用 `bracelet_factory_id` 自动连续发射 EV1527 数据码为 `0x01` 的对码广播包。
* **物理地址展示**：屏幕底部显示当前手环出厂唯一地址 `ID: 0xXXXXX`。
* **退出/返回机制**：
1. 自动退出：发射持续约 3 秒后，自动结束并退回时钟待机状态；
2. 按键退出：**长按 CONFIRM 键 3 秒** 或 **长按 ▼ 键 2 秒** 立刻主动退出发射状态并返回时钟待机。
### 2.4 报警触发与本地 SOS 界面 (STATE_ALARMING / STATE_SOS_EMITTED)
* **报警提示边框**：全屏闪烁的红色警告虚线/实线边框。
* **中央图标**：根据触发的防区传感器类型，居中绘制对应的单色位图图标（32x32px）。
* **主动 SOS 界面**：大字显示 `SOS EMIS`，居中显示 `🚨` 旋转警灯图标。
---
@@ -87,6 +109,6 @@
为保证排版美观，[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`。
* 对于标准 8px 宽字符：X 轴绘制起点为 `(120 - len * 8) / 2`。
* 对于双倍放大 16px 宽时钟字符：X 轴绘制起点为 `(120 - len * 16) / 2`。
* **百分号（%）符号基线修正**：百分号字符在 `lcd_font.h` 数组的索引 `0x25` 中，点阵数据需**向上平移 2 像素**，以和 `0~9` 数字的基线保持严格水平对齐，避免百分号整体下沉。

168
Docs/40_ui-design/wristband_ui_gallery.html
View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wristband LCD UI Gallery</title>
<title>Wristband AMOLED UI Gallery</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -70,7 +70,7 @@
/* Realistic Smartwatch CSS Simulator */
.watch-device {
position: relative;
width: 175px;
width: 160px;
height: 280px;
background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
border-radius: 35px;
@@ -105,7 +105,7 @@
}
.screen-bezel {
position: relative;
width: 145px;
width: 130px;
height: 250px;
background-color: #000000;
border-radius: 25px;
@@ -118,7 +118,7 @@
/* Inlined SVG Scaling */
.screen-bezel svg {
width: 135px;
width: 120px;
height: 240px;
display: block;
}
@@ -149,7 +149,7 @@
</head>
<body>
<div class="container">
<h1>手环 LCD 屏幕 UI 效果图画册 (V2.0)</h1>
<h1>手环 AMOLED 屏幕 UI 效果图画册 (V2.1)</h1>
<div class="subtitle">所有 10 类显示界面在手环硬件上的 1:1 视觉仿真效果及按键映射说明</div>
<div class="grid">
@@ -159,20 +159,20 @@
<div class="card-desc">常规待机状态，顶部仅显示电量，界面宽裕</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="240" viewBox="0 0 135 240">
<rect width="135" height="240" fill="#000000"/>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<!-- Status Bar (Right: Battery Icon) -->
<rect x="107" y="27" width="20" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.2"/>
<rect x="109" y="29" width="13" height="6" rx="1" fill="#10B981"/>
<rect x="128" y="30" width="1.5" height="4" rx="0.5" fill="#64748B"/>
<text x="101" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%</text>
<rect x="82" y="27" width="20" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.2"/>
<rect x="84" y="29" width="13" height="6" rx="1" fill="#10B981"/>
<rect x="103" y="30" width="1.5" height="4" rx="0.5" fill="#64748B"/>
<text x="76" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%</text>
<!-- Time -->
<text x="67.5" y="115" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
<text x="60" y="115" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
<!-- Date -->
<text x="67.5" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text>
<text x="60" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text>
</svg>
</div>
</div>
@@ -188,23 +188,23 @@
<div class="card-desc">布防锁定 🔒 移至正下方，完美避免电池重叠</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="240" viewBox="0 0 135 240">
<rect width="135" height="240" fill="#000000"/>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<!-- Status Bar (Right: Battery Icon) -->
<rect x="107" y="27" width="20" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.2"/>
<rect x="109" y="29" width="13" height="6" rx="1" fill="#10B981"/>
<rect x="128" y="30" width="1.5" height="4" rx="0.5" fill="#64748B"/>
<text x="101" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%+</text>
<rect x="82" y="27" width="20" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.2"/>
<rect x="84" y="29" width="13" height="6" rx="1" fill="#10B981"/>
<rect x="103" y="30" width="1.5" height="4" rx="0.5" fill="#64748B"/>
<text x="76" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%+</text>
<!-- Time -->
<text x="67.5" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
<text x="60" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
<!-- Date -->
<text x="67.5" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text>
<text x="60" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text>
<!-- Armed Status at the very bottom (Y=205) -->
<g transform="translate(46, 192)">
<g transform="translate(39, 192)">
<rect x="0" y="0" width="12" height="12" rx="2" fill="none" stroke="#EF4444" stroke-width="1.2"/>
<circle cx="6" cy="4" r="2.5" fill="none" stroke="#EF4444" stroke-width="1.2"/>
<rect x="5" y="6" width="2" height="3" fill="#EF4444"/>
@@ -225,23 +225,23 @@
<div class="card-desc">撤防解锁 🔓 移至正下方，界面均衡清爽</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="240" viewBox="0 0 135 240">
<rect width="135" height="240" fill="#000000"/>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<!-- Status Bar (Right: Battery Icon) -->
<rect x="107" y="27" width="20" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.2"/>
<rect x="109" y="29" width="13" height="6" rx="1" fill="#10B981"/>
<rect x="128" y="30" width="1.5" height="4" rx="0.5" fill="#64748B"/>
<text x="101" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%</text>
<rect x="82" y="27" width="20" height="10" rx="2" fill="none" stroke="#64748B" stroke-width="1.2"/>
<rect x="84" y="29" width="13" height="6" rx="1" fill="#10B981"/>
<rect x="103" y="30" width="1.5" height="4" rx="0.5" fill="#64748B"/>
<text x="76" y="36" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="end">85%</text>
<!-- Time -->
<text x="67.5" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
<text x="60" y="115" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="24" font-weight="bold" text-anchor="middle">10:35</text>
<!-- Date -->
<text x="67.5" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text>
<text x="60" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">THU 07-02</text>
<!-- Disarmed Status at the very bottom (Y=205) -->
<g transform="translate(34, 192)">
<g transform="translate(27, 192)">
<rect x="0" y="3" width="12" height="9" rx="1.5" fill="none" stroke="#10B981" stroke-width="1.2"/>
<path d="M 3 3 L 3 1.5 C 3 0.7, 6 0.7, 8 1.5 L 8 4" fill="none" stroke="#10B981" stroke-width="1.2"/>
<text x="18" y="10" fill="#10B981" font-family="system-ui, sans-serif" font-size="9" font-weight="bold" text-anchor="start">DESARME</text>
@@ -257,17 +257,21 @@
<!-- 4. Pairing Menu -->
<div class="card">
<div class="card-title">4. 滚动选择菜单</div>
<div class="card-title">4. 主选择菜单</div>
<div class="card-desc">选择要对码配对的传感器类型</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="240" viewBox="0 0 135 240">
<rect width="135" height="240" fill="#000000"/>
<text x="67.5" y="35" fill="#FFB74D" font-family="system-ui, sans-serif" font-size="10" font-weight="bold" text-anchor="middle">PAIR MENU P-00</text>
<text x="67.5" y="80" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">🚪 DOOR SENSOR</text>
<rect x="10" y="105" width="115" height="30" rx="6" fill="none" stroke="#00E5FF" stroke-width="1.5"/>
<text x="67.5" y="124" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="10" font-weight="bold" text-anchor="middle">👤 PIR MOTION</text>
<text x="67.5" y="165" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">🔥 SMOKE DETECT</text>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<text x="60" y="35" fill="#FFB74D" font-family="system-ui, sans-serif" font-size="11" font-weight="bold" text-anchor="middle">- MENU -</text>
<text x="60" y="80" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">1. DATE/HEURE</text>
<!-- Highlight selection APPAIRAGE -->
<rect x="10" y="102" width="100" height="24" rx="4" fill="none" stroke="#00E5FF" stroke-width="1.2"/>
<text x="60" y="118" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="10" font-weight="bold" text-anchor="middle">> 2. APPAIRAGE &lt;</text>
<text x="60" y="155" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">3. ARM/DISARM</text>
<text x="60" y="190" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">4. LIAISON IPC</text>
</svg>
</div>
</div>
@@ -283,14 +287,14 @@
<div class="card-desc">雷达波纹 📡 扫射等待射频对码信号</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="240" viewBox="0 0 135 240">
<rect width="135" height="240" fill="#000000"/>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<g transform="translate(0, 10)">
<path d="M 60 70 L 67.5 90 M 59.5 75 A 10 10 0 0 1 75.5 75 M 55.5 70 A 15 15 0 0 1 79.5 70 M 51.5 65 A 20 20 0 0 1 83.5 65" stroke="#00E5FF" stroke-width="2" fill="none" stroke-linecap="round"/>
<circle cx="67.5" cy="92" r="2" fill="#00E5FF"/>
<path d="M 60 70 L 67.5 90 M 52 75 A 10 10 0 0 1 68 75 M 48 70 A 15 15 0 0 1 72 70 M 44 65 A 20 20 0 0 1 76 65" stroke="#00E5FF" stroke-width="2" fill="none" stroke-linecap="round"/>
<circle cx="60" cy="92" r="2" fill="#00E5FF"/>
</g>
<text x="67.5" y="145" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="11" font-weight="bold" text-anchor="middle">SEARCHING...</text>
<text x="67.5" y="170" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">TRIGGER SENSOR</text>
<text x="60" y="145" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="11" font-weight="bold" text-anchor="middle">SEARCHING...</text>
<text x="60" y="170" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">TRIGGER SENSOR</text>
</svg>
</div>
</div>
@@ -306,24 +310,24 @@
<div class="card-desc">展示传感器类型，按 ▲/▼ 键手动增减后缀序号并确认</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="240" viewBox="0 0 135 240">
<rect width="135" height="240" fill="#000000"/>
<text x="67.5" y="45" fill="#10B981" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">v RECU</text>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<text x="60" y="45" fill="#10B981" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">v RECU</text>
<!-- 门磁图标 -->
<g transform="translate(54.5, 70)">
<g transform="translate(47, 70)">
<rect x="0" y="2" width="16" height="28" rx="2" fill="none" stroke="#FFFFFF" stroke-width="1.8"/>
<rect x="20" y="6" width="6" height="20" rx="1" fill="none" stroke="#10B981" stroke-width="1.8"/>
<circle cx="4" cy="16" r="1.5" fill="#FFFFFF"/>
</g>
<text x="67.5" y="140" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">PORTE</text>
<text x="60" y="140" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">PORTE</text>
<!-- 序号选框 [ 01 ] -->
<rect x="37.5" y="160" width="60" height="22" rx="4" fill="none" stroke="#00E5FF" stroke-width="1.5"/>
<text x="67.5" y="176" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">01</text>
<rect x="30" y="160" width="60" height="22" rx="4" fill="none" stroke="#00E5FF" stroke-width="1.5"/>
<text x="60" y="176" fill="#00E5FF" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">01</text>
<text x="67.5" y="215" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">ADDR: 0x37A86</text>
<text x="60" y="215" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">ADDR: 0x37A86</text>
</svg>
</div>
</div>
@@ -339,15 +343,15 @@
<div class="card-desc">高保真圆形对勾绿色成功徽章 (✓)</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="240" viewBox="0 0 135 240">
<rect width="135" height="240" fill="#000000"/>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<!-- Symmetrical Circular Success Badge -->
<circle cx="67.5" cy="90" r="24" stroke="#10B981" stroke-width="2.5" fill="none"/>
<path d="M 55.5 90 L 63.5 98 L 79.5 82" stroke="#10B981" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="60" cy="90" r="24" stroke="#10B981" stroke-width="2.5" fill="none"/>
<path d="M 48 90 L 56 98 L 72 82" stroke="#10B981" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<text x="67.5" y="145" fill="#10B981" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">PAIR SUCCESS</text>
<text x="67.5" y="175" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">ADDR: 0x37A86</text>
<text x="60" y="145" fill="#10B981" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">PAIR SUCCESS</text>
<text x="60" y="175" fill="#64748B" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">ADDR: 0x37A86</text>
</svg>
</div>
</div>
@@ -363,15 +367,15 @@
<div class="card-desc">高保真圆形红叉失败徽章 (❌)</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="240" viewBox="0 0 135 240">
<rect width="135" height="240" fill="#000000"/>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<!-- Symmetrical Circular Fail Badge -->
<circle cx="67.5" cy="90" r="24" stroke="#EF4444" stroke-width="2.5" fill="none"/>
<path d="M 57.5 80 L 77.5 100 M 77.5 80 L 57.5 100" stroke="#EF4444" stroke-width="3.5" fill="none" stroke-linecap="round"/>
<circle cx="60" cy="90" r="24" stroke="#EF4444" stroke-width="2.5" fill="none"/>
<path d="M 50 80 L 70 100 M 70 80 L 50 100" stroke="#EF4444" stroke-width="3.5" fill="none" stroke-linecap="round"/>
<text x="67.5" y="155" fill="#EF4444" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">PAIR FAILED</text>
<text x="67.5" y="180" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">TYPE MISMATCH</text>
<text x="60" y="155" fill="#EF4444" font-family="system-ui, sans-serif" font-size="12" font-weight="bold" text-anchor="middle">PAIR FAILED</text>
<text x="60" y="180" fill="#64748B" font-family="system-ui, sans-serif" font-size="9" text-anchor="middle">TYPE MISMATCH</text>
</svg>
</div>
</div>
@@ -387,15 +391,15 @@
<div class="card-desc">门磁/烟感等传感器触发的警报画面</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="240" viewBox="0 0 135 240">
<rect width="135" height="240" fill="#000000"/>
<rect x="4" y="4" width="127" height="232" rx="20" stroke="#EF4444" stroke-width="2.5" fill="none" stroke-dasharray="6 4"/>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<rect x="4" y="4" width="112" height="232" rx="20" stroke="#EF4444" stroke-width="2.5" fill="none" stroke-dasharray="6 4"/>
<g transform="translate(0, 10)">
<rect x="59.5" y="55" width="16" height="30" rx="1" fill="none" stroke="#EF4444" stroke-width="2.5"/>
<circle cx="71.5" cy="70" r="1.5" fill="#EF4444"/>
<rect x="52" y="55" width="16" height="30" rx="1" fill="none" stroke="#EF4444" stroke-width="2.5"/>
<circle cx="64" cy="70" r="1.5" fill="#EF4444"/>
</g>
<text x="67.5" y="130" fill="#EF4444" font-family="system-ui, sans-serif" font-size="11" font-weight="bold" text-anchor="middle">FRONT DOOR</text>
<text x="67.5" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">ZONE 0 | ALARM</text>
<text x="60" y="130" fill="#EF4444" font-family="system-ui, sans-serif" font-size="11" font-weight="bold" text-anchor="middle">FRONT DOOR</text>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">ZONE 0 | ALARM</text>
</svg>
</div>
</div>
@@ -411,26 +415,26 @@
<div class="card-desc">高保真闪光警报灯图标，字形避开边缘</div>
<div class="watch-device">
<div class="screen-bezel">
<svg xmlns="http://www.w3.org/2000/svg" width="135" height="240" viewBox="0 0 135 240">
<rect width="135" height="240" fill="#000000"/>
<rect x="4" y="4" width="127" height="232" rx="20" stroke="#EF4444" stroke-width="2.5" fill="none"/>
<rect x="8" y="8" width="119" height="224" rx="17" stroke="#FFFFFF" stroke-width="1" fill="none"/>
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="240" viewBox="0 0 120 240">
<rect width="120" height="240" fill="#000000"/>
<rect x="4" y="4" width="112" height="232" rx="20" stroke="#EF4444" stroke-width="2.5" fill="none"/>
<rect x="8" y="8" width="104" height="224" rx="17" stroke="#FFFFFF" stroke-width="1" fill="none"/>
<!-- High-Fidelity Siren Icon -->
<g transform="translate(0, -3)">
<!-- Light Beams -->
<path d="M 67.5 48 L 67.5 54 M 52.5 52 L 57.5 57 M 82.5 52 L 77.5 57 M 47.5 65 L 53.5 67 M 87.5 65 L 81.5 67" stroke="#EF4444" stroke-width="2" stroke-linecap="round"/>
<path d="M 60 48 L 60 54 M 45 52 L 50 57 M 75 52 L 70 57 M 40 65 L 46 67 M 80 65 L 74 67" stroke="#EF4444" stroke-width="2" stroke-linecap="round"/>
<!-- Siren Glass Dome -->
<path d="M 53.5 82 C 53.5 64, 81.5 64, 81.5 82 Z" fill="#EF4444" stroke="#EF4444" stroke-width="1.5"/>
<path d="M 46 82 C 46 64, 74 64, 74 82 Z" fill="#EF4444" stroke="#EF4444" stroke-width="1.5"/>
<!-- Bulb inside -->
<circle cx="67.5" cy="77" r="4.5" fill="#FFFFFF"/>
<circle cx="60" cy="77" r="4.5" fill="#FFFFFF"/>
<!-- Metallic Base -->
<rect x="49.5" y="82" width="36" height="6" rx="1.5" fill="#64748B"/>
<rect x="42" y="82" width="36" height="6" rx="1.5" fill="#64748B"/>
</g>
<!-- Centered SOS Alarm Texts safely inside circular active area -->
<text x="67.5" y="138" fill="#EF4444" font-family="system-ui, sans-serif" font-size="11" font-weight="bold" text-anchor="middle">🆘 EMIT SOS</text>
<text x="67.5" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">BAND TRIGGERED</text>
<text x="60" y="138" fill="#EF4444" font-family="system-ui, sans-serif" font-size="11" font-weight="bold" text-anchor="middle">🆘 EMIT SOS</text>
<text x="60" y="165" fill="#FFFFFF" font-family="system-ui, sans-serif" font-size="10" text-anchor="middle">BAND TRIGGERED</text>
</svg>
</div>
</div>