DSHWatch_Server/docs/WATCH_UI.md

DSHWatch 手表端 UI 规范（v0.1）

本文件是对 docs/DESIGN.md §5 的细化，用于对齐手表端 UI 颗粒度。仍属"报告/规范"阶段，不含最终可运行代码。

---

1. 主页骨架：三页 + Swiper + 自定义指示点

Vela 原生提供 swiper 组件（container/swiper），关键能力：

• index（当前页）
• indicator（内置圆点，可关闭）
• loop（是否循环）
• previousmargin / nextmargin（可露出相邻页一小部分）
• change 事件（{ index }）
• swipeTo({ index }) 方法（程序切页）
• indicator-color / indicator-selected-color / indicator-size（内置点样式）

用户要求：当前页为长条、其他为小点。内置 indicator 是统一圆点，无法做成"当前页长条"。因此方案是：

• swiper 的 indicator 置为 false（不显示内置点）。
• 在 swiper 下方自己放一行指示条：3 个条目（左/中/右页）。
• 监听 swiper 的 change 事件更新 currentIndex。
• 渲染时：currentIndex 对应的条目为长条（宽 20px、高 6px、圆角），其余为小圆点（6px、半透明）。

伪模板（仅示意，非最终代码）

<template>
  <div class="page">
    <swiper class="swiper" index="{{currentIndex}}" indicator="false"
            loop="false" previousmargin="12px" nextmargin="12px"
            onchange="onSwipeChange">
      <div class="page-item">  <!-- 左：会话 -->
        <session-list ... />
      </div>
      <div class="page-item">  <!-- 中：主页/吉祥物 -->
        <mascot ... />
        <text class="status">{{ statusText }}</text>
      </div>
      <div class="page-item">  <!-- 右：设置 -->
        <settings ... />
      </div>
    </swiper>
    <div class="dots">
      <div class="dot {{ currentIndex === 0 ? 'dot-active' : '' }}"></div>
      <div class="dot {{ currentIndex === 1 ? 'dot-active' : '' }}"></div>
      <div class="dot {{ currentIndex === 2 ? 'dot-active' : '' }}"></div>
    </div>
  </div>
</template>

<style>
  .dot { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.35); }
  .dot-active { width: 20px; border-radius: 3px; background: #33b4ff; }
  .dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
</style>

交互要点

• 左右滑动手势由 swiper 原生支持（enableswipe 默认 true）。
• change 事件把 index 同步到 data，驱动 dots 高亮。
• 从会话页/设置页点击返回主页：调用 swiper 实例的 swipeTo({ index: 1 })。
• loop=false，避免三页循环造成"底部指示器错位"。

---

2. 中间页（主页/吉祥物）

• 中心大图：DSniang1.png（压缩到 240~320px）。
• 状态文字（在线/离线/思考中/执行中/等待批准）用吉祥物下方一行字。
• 顶部小字：当前会话 id 前 6 位 + 标题。
• 点击吉祥物 → 详情/骨架页：
  • 状态卡片（在线、当前会话、模型、运行中/空闲）。
  • 最近事件摘要（最近 5~8 条 session/event 的 text 摘要）。
  • 快捷操作：重跑/停止/新会话。
• 状态变化时吉祥物可切换：
  • 思考/等待：DSniang02.png（带气泡）。
  • 交互彩蛋：rua.gif（点按/摸头）。

---

3. 左页（会话）

• 列表数据源：session.list（经手机网关转发）。
• 每行显示：
  • 标题（无标题则取 id 前 6 位）
  • running 标记（绿色小点 / "执行中"）
  • 最近活动时间（转成相对时间，如 3 分钟前）
• 点击行为：设置当前会话 → 切回主页 → 刷新状态。
• 需要滚动列表：用 list 组件 + for/tid 避免闪烁（官方 FAQ）。

---

4. 右页（设置）

• 服务器地址（手机/用户填）
• userId
• token（可切换明文/掩码）
• 连接状态：服务器状态 + 手环↔手机连接状态（connect.getReadyState，轮询；官方 FAQ 建议进页面轮询，别只取一次）
• 余额显示预留（占位，方案后定）
• 主题/动效开关（预留）

---

5. 输入法 / 键盘

• 参考 Vela 输入法组件（open source：NEORUAA/Vela_input_method），支持中英文、圆/方屏。
• 在输入指令页面使用该自定义组件。
• 快捷指令（预设按钮）：如 "查看今日任务"、"总结当前进度"、"停止"。
• 语音输入：预留，默认关闭（system.record 对 Band 10/10 Pro 大概率不支持）。

---

6. 与手机/服务器的状态同步

手表不直接连服务器，所有的请求/事件经手机转发。

手表 → 手机（interconnect）：

• 类型 command / text / cancel / settings / heartbeat
• 负载含 sessionId、content、text 等。

手机 → 手表（interconnect）：

• 类型 status / event / ack / settings
• 手机把服务器 status/event 整理成手表可读的短文本（手表端不渲染原始大 JSON）。

---

7. 验收标准（手表侧 P1）

1. 三个页面能左右滑动切换；底部指示器当前页长条、其他小点。
2. 主页显示吉祥物 + 在线/离线/思考/执行状态；点吉祥物能进详情骨架。
3. 左页能列出会话并选中；右页能填 server/userId/token 并显示连接状态。
4. 手表通过 interconnect 与手机 APP 打通，能收到服务器状态/事件。
5. 手表能发快捷指令，经手机→服务器→Harness 执行并回显。

---

8. 待定

• "分骨架"具体指状态页还是子代理列表（见 DESIGN.md §12）。
• 是否手环本地缓存最近状态（离线可见）。
• 包名（建议 com.dshwatch.app）待确认。