---
id: v4-1865-wifi-hotspot-mode
title: V4-1865 LCD Touchscreen Mode Toggle UX Design
doc_type: handoff
status: in-dev
last_updated: 2026-06-02
sources:
  - { type: jira, ref: "V4-1865", url: "https://tvunetworks.atlassian.net/browse/V4-1865" }
  - { type: jira, ref: "FB-7775", url: "https://tvunetworks.atlassian.net/browse/FB-7775" }
figma:
  file: rJJjWWs51n2iFOlCIC7aYG
  nodes:
    - { id: "6601:2", label: "Config-T page — V4-1865 (LCD pickup reference)", url: "https://www.figma.com/design/rJJjWWs51n2iFOlCIC7aYG/Config-T---Local-UI---v7.7---8.0--20240220?node-id=6601-2" }
---

# Pickup · V4-1865 LCD Touchscreen Mode Toggle UX Design

**Created**: 2026-06-02
**Author**: Nancy Zeng
**Status**: Ready to pick up · Config-T side complete, LCD side TBD
**Audience**: Next-session AI (and any human collaborator)

---

## 0. 起手协议（必读 · 不可跳）

**任何对 TVU 产品 Figma 文件做写操作前**，按 [`tvu-design-system/AGENTS.md` §"Mockup Write Gate"](../../../tvu-design-system/AGENTS.md) 完成 4 步必读：

1. ✅ Read `tvu-design-system/docs/internal/mockup-conventions.md` 全文（重点 M0 / M1 / M-COLOR / M-INTEGRITY / M23 / M29 / M32 / M35 / M43 / M46 / M47 + **M-DISCIPLINE umbrella**）
2. ✅ Read `tvu-design-system/docs/internal/design-process.md` § Pre-Phase 0 + § Stage 0.5 + § Scope Handling + § Delivery Cleanup Gate
   - ⚠️ **新增 Step A.1** (commit `32d85811`) · Pre-Phase 0 起手必读 parent FB-* 评论链；本次 LCD 任务 **必触发**（详见 §3）
3. ✅ Read `tvu-design-system/docs/internal/figma-component-catalog.md` 标题列表（lazy reference）
4. ✅ 从 `tvu-design-system/docs/site-review-manifest.json` 拿 library fileKey

**M-DISCIPLINE 强制要求**：读完起手协议、画第一个产品 frame 之前，**必须用 `TodoWrite` 把本次任务适用规则物化成 todo list**。最小子集（Jira 关联型 mockup）：
- M45 (page 命名) / M23.8 (Jira annotation + hyperlink) / Pre-Phase 0 Step A intake / **Step A.1 (parent FB comments)** / M0 / 画 frame / M23 / M23.6 / audit + walkthrough

---

## 1. 任务上下文（一句话）

把 V4-1865 「Hotspot 模块 3-mode 操作」的 UI 从 **Config-T web 端**镜像到 **TM1100 LCD touchscreen 端**，让用户可在物理设备上切换 Mode (Disable / Hotspot / WiFi)。

---

## 2. 已完成状态（Config-T 端，**不要重做**）

| 维度 | 状态 |
|---|---|
| Jira ticket | [V4-1865](https://tvunetworks.atlassian.net/browse/V4-1865) (Config-T scope) · 当前 status: **To Do** · 等 Bonnie/Danner 开发 review |
| Figma page | [`6601:2 < V4-1865 > Enable Reuse of TM1100 Pack Second Internal WiFi Module 20260529`](https://www.figma.com/design/rJJjWWs51n2iFOlCIC7aYG/Config-T---Local-UI---v7.7---8.0--20240220?node-id=6601-2) |
| Frames | F0 baseline / F1 WiFi `< 1/2 >` / F2 WiFi `< 2/2 >` / F3 Hotspot Mode=Disable / F4 Hotspot Mode=Hotspot / F5 Hotspot Mode=WiFi / F6 M23 spec card (废) / PRD card + Jira widget + 2 section UX cards (v4 final) |
| UX review | ✅ Passed · Trevor Yao 2026-06-01 (FB-7775 #244618) "looks good" 仅 "a" 冠词 fix（已应用） |
| Handoff docs | [`v2`](./2026-06-01-v4-1865-mockup-v2-handoff.md) （含 §9 library compliance refactor + §10 v4 重构）· 2026-05-29 [`v1`](./2026-05-29-v4-1865-mockup-handoff.md) 留作 v1→v2 反思参照 |

---

## 3. LCD scope · 必读的 FB 评论链（执行 Step A.1）

⚠️ **不可跳**：起手用 Jira MCP 拉 V4-1865 + FB-7775 完整评论链。最关键的 LCD 触发原话：

### [FB-7775 comment #203897](https://tvunetworks.atlassian.net/browse/FB-7775?focusedCommentId=203897) · Trevor Yao · 2025-10-29 11:01 PT

> @Danner Dai Please do. **We can add the toggle on the touchscreen for the users to switch.** @Nancy Zeng FYI.

这条是 LCD scope 的**直接源头**。

### 其他相关 FB context（必扫一遍）

| 评论 | 时间 | 作者 | 关键信息 |
|---|---|---|---|
| #185872 | 2025-07-07 | Trevor | "I don't think we have a second internal WiFi module" — 架构 clarification 起源 |
| #185933 | 2025-07-07 | Joshua | "The hotspot is only a way of connecting to the configuration page correct?" — 业务场景澄清 |
| #203531 | 2025-10-28 | Trevor | "One for WiFi, the other one is used for HotSpot... Are you saying you want to disable HotSpot and turn it into a second WiFi?" — 真正架构定调 |
| #203850 | 2025-10-29 | Danner | "I will review current dialing logic and evaluate whether we can support it without any side effect" |
| **#203897** | **2025-10-29** | **Trevor** | **LCD touchscreen 加 toggle 拍板 ← 本任务起源** |
| #238632 | 2026-04-21 | Trevor | "Yes we can add it. Just to confirm, this wouldn't cause the loss of ConfigT that's accessible from WebR and CC, right?" |
| #238671 | 2026-04-21 | Danner | "I think ConfigT access still can work via CC/WebR" |
| #238868 | 2026-04-22 | Danner | winni 验证 ConfigT via CC works without Hotspot |
| **#244618** | **2026-06-01** | **Trevor** | **review V4-1865 Config-T mockup pass · "a" 冠词 fix** |
| #244776 | 2026-06-01 | **Nancy** | 反提：LCD 是否 expand V4-1865 还是开新 ticket？**待 Trevor 回复** |

### LCD scope 决策 gate（动手前必 confirm）

**A. Trevor 已回复 LCD scope 决定 → 按他的方向做**
- 若 Trevor 说 "expand V4-1865" → 同 V4-1865 ticket 内加 LCD frames（page `6601:2` 内继续，或新建 page）
- 若 Trevor 说 "open new ticket" → 等新 V4-* ticket 建好再开工

**B. Trevor 还没回复 → 先停下 ask 用户拍板**
- Owner Nancy 可代行拍板（推荐"开新 ticket"避免 V4-1865 scope creep）
- 或先在新 Figma page 草稿，等 Trevor 回复后再正式落 ticket

---

## 4. LCD 目标 Figma 文件（已登记 [`FIGMA_LINKS.md`](../FIGMA_LINKS.md)）

| 维度 | 值 |
|---|---|
| 文件名 | `Touch Screen v7.7+& 8.0+ 20240220` |
| 链接 | https://www.figma.com/design/0054ib0nLmt27bC3QlGDl7/Touch-Screen-v7.7---8.0--20240220 |
| fileKey | `0054ib0nLmt27bC3QlGDl7` |
| 适用产品 | TM1100 及同系列 pack 的本机 LCD 触屏 UI |
| 库归属 | legacy hybrid（自身 legacy 库 + tvu-design-system 新库 attached）· 沿用 legacy 范式不切新库（与 Config-T 同策略）|

### 起手必探（Pre-Phase 0 输入 #1-#4）

1. **输入 #1 参考**：V4-1865 Config-T mockup `6601:2` 的 F3/F4/F5 (Hotspot 3-mode 三态) 是直接参考
2. **输入 #2 目标 Figma 链接**：见上 + 找到 Network / Hotspot / WiFi 相关 baseline page (用户协助提供 node-id 最佳；MCP `get_metadata` 不带 nodeId 只返 1 page bug 已知，需用 `use_figma` + `figma.root.children` enumerate 所有 page)
3. **输入 #3 功能需求**：LCD 触屏端加 Mode (Disable / Hotspot / WiFi) toggle，行为对齐 Config-T (FB-7775 #203897)
4. **输入 #4 硬件 / 系统架构 context**：同 Config-T——Hotspot 模块切换为第二 WLAN client；Onboard WiFi 只有 1 个内置 + 未来 USB 扩展

---

## 5. 可复用的 V4-1865 设计决策（不必从 0 推）

| 决策 | 来源 | LCD 端适用性 |
|---|---|---|
| **3-mode model** (Disable / Hotspot / WiFi) | v2 architecture | ✅ 直接复用 |
| **Mode = single source of truth** (Hotspot 段 Mode 决定 WiFi 段是否有 Module 2) | v2 architecture | ✅ 但 LCD 端可能没有 "WiFi 段的 pagination" 概念，需 confirm LCD 当前 Network 页结构 |
| **Mode 用 radio 不用 dropdown** (M22 design intent) | v3 user pushback | ✅ 若 LCD 触屏空间允许 |
| **Hide-not-dim** (Mode ≠ Hotspot 时 params 直接隐藏) | v2 file convention | ⚠️ 需验证 LCD 文件是否同 convention（先 probe Touch Screen baseline 找 disabled state 范例）|
| **Radio + description 双语 + Tips 灰描述文字** | v3 / v4 final | ⚠️ LCD 屏幕小，"description 文字"是否塞得下需评估 |
| **PRD card / UX delivery card M23 canonical**（navy + 4px cyan / 双语 Layout A-逐行 / Noto Sans SC ZH @0.45） | M23 canonical | ✅ 复用，per-frame UX 卡紧邻 mockup |
| **Jira widget + M23.8 hyperlink** | M23.8 | ✅ 复用（指向 V4-1865 或新 ticket）|
| **流程连线 + GROUP 条件标签** | M23.6 / Q14 | ✅ 跨 frame mode 转换 + 跨 section 联动 |
| **跨 node arrow 必 probe `absoluteBoundingBox`** | Q14 (commit `b445319e`) | ✅ 严格遵守 |

---

## 6. 可能的设计 trade-off（动手前要想清）

### 屏幕尺寸约束

- Config-T 是 web 端宽屏，radio 行 + description 文字横着放 1 行有空间
- LCD 触屏（TM1100 大约 5"/720×1280 或类似）—— **垂直空间紧张**，3-radio + description 可能太长

**候选解决**：
- (a) Keep description, 缩短文字（"Module off" → "Off" 等）
- (b) Drop description，仅 radio + Mode 名（dev/QA 靠 spec 理解 mode 含义；LCD 用户从 mode 名 + LCD 上下文 infer）
- (c) Mode 行用 3-segment 横向 tab（占 1 行高度）替代垂直 radio (3 行)

⚠️ 决策必须先**找 Touch Screen 文件里现有 multi-state 控件范例**(M21 sibling visual contract)，sibling 用啥本任务跟啥，不凭空选。

### 输入交互

- Config-T 是鼠标 / 键盘 → click radio
- LCD 触屏 → 手指 tap，**最小点击区 ≥ 44px**
- 现有 LCD touch UI 怎么处理 radio / toggle？需 baseline probe

### 跨 section 联动是否在 LCD 上保留？

Config-T 上 Mode = WiFi 时 WiFi section 出现 pagination `< 1/2 >`。LCD 端是否需要相同联动？
- 如果 LCD 当前 Network UI 没有 pagination 概念 → 可能简化为"Mode = WiFi 时显示 connect-to-WiFi 二级页面"
- 需 baseline probe

---

## 7. 推荐起手 8 步（design-process.md 8-step Jira flow）

1. **① Page 关联**（M45）：新建 page 命名 `< V4-1865 > LCD Mode Toggle 20260602` (或新 ticket key)；位置：Touch Screen 文件的 V4 (V8.0+) 段
2. **② Jira component**（M23.8）：加 Jira requirement instance + V4-1865 hyperlink (或新 ticket)
3. **③ Mockup 主体**（Phase 0 + library-first）：先 baseline probe → 设 mode 选择器 → 3 state frame
4. **④ UX 交付说明**（M23 canonical）：navy + 4px cyan / 双语 / Layout A-逐行
5. **⑤ 设计走查 F1**：design-walkthrough skill 跑 6-section audit
6. **⑥ Persona 测试 F2**：persona-simulation skill F2-late
7. **⑦ 用户体验地图**：5-stage × 5-lens journey map
8. **⑧ 规则回流**：本次发现的新规则回 tvu-design-system 真源

---

## 8. 新 session AI 起手第一句话（建议模板）

```
读 docs/handoffs/2026-06-02-v4-1865-lcd-pickup.md，按里面起手协议 §0 完成 4 步必读 +
M-DISCIPLINE 物化 TodoWrite，然后执行 §3 Step A.1 拉 V4-1865 + FB-7775 完整评论链，
等我 confirm LCD scope (expand V4-1865 还是开新 ticket) 再进 §7 8 步流程。
```

---

## 9. 待 Owner 决策的 2 个 gate

| Gate | 问题 | 选项 |
|---|---|---|
| **A** | LCD 是 expand V4-1865 还是开新 ticket？ | (a) 等 Trevor FB-7775 #244776 回复 / (b) Owner 自行拍板 → 推荐开新 V4 ticket "LCD touchscreen Mode toggle" 避免 scope creep |
| **B** | Touch Screen 文件 baseline 入口 page 在哪？ | 用户给具体 node-id URL 或让 AI 用 `figma.root.children` enumerate 找 Network/Hotspot 类 page |

---

## 10. Cross-reference

- V4-1865 v2 完整 architecture handoff: [`2026-06-01-v4-1865-mockup-v2-handoff.md`](./2026-06-01-v4-1865-mockup-v2-handoff.md)
- V4-1865 v1 错版反思: [`2026-05-29-v4-1865-mockup-handoff.md`](./2026-05-29-v4-1865-mockup-handoff.md)
- TVU 设计系统 rules backflow retrospect: `tvu-design-system/docs/internal/retrospection/2026-06-01-v4-1865-rules-backflow.md`
- 项目 Figma 文件索引: [`../FIGMA_LINKS.md`](../FIGMA_LINKS.md)
- Latest tvu-design-system commits 必读: `b445319e` (6 rules) / `32d85811` (Step A.1) / `00795d31` (Jira comment)