143 lines
5.5 KiB
Markdown
143 lines
5.5 KiB
Markdown
# 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）待确认。
|