# 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）待确认。