Initial DSHWatch DSHWatch_Server scaffold

docs/WATCH_UI.md

@@ -0,0 +1,142 @@
+# 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）待确认。