feat: watch UI empty shell (3-page swiper, mascot, sessions, settings, detail, input)

2026-09-01 18:45:58 +08:00
parent 25798241db
commit a8ee608e6f
10 changed files with 615 additions and 46 deletions
@@ -0,0 +1,108 @@
+<template>
+  <div class="page">
+    <text class="title">输入指令</text>
+    <input class="text-input" type="text" value="{{text}}" placeholder="输入内容..." onchange="onTextChange" />
+    <div class="quick-list">
+      <div class="quick-row" for="{{quick}}" tid="{{$index}}" onclick="sendQuick({{$index}})">
+        <text class="quick-text">{{$item}}</text>
+      </div>
+    </div>
+    <div class="actions">
+      <input class="btn" type="button" value="发送" onclick="sendText" />
+      <input class="btn btn-ghost" type="button" value="返回" onclick="goBack" />
+    </div>
+  </div>
+</template>
+
+<script>
+import router from '@system.router'
+
+export default {
+  private: {
+    text: '',
+    quick: ['查看今日任务', '总结当前进度', '停止当前任务']
+  },
+  onTextChange(e) {
+    this.text = e && e.value || ''
+  },
+  sendQuick(index) {
+    const item = this.quick[index]
+    // 空壳：后续通过 interconnect 发给手机/服务器
+    console.log('quick send', item)
+    this.text = item
+  },
+  sendText() {
+    // 空壳：后续通过 interconnect 发送
+    console.log('send text', this.text)
+  },
+  goBack() {
+    router.back()
+  }
+}
+</script>
+
+<style>
+.page {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  padding: 12px;
+  box-sizing: border-box;
+  background-color: #0b1220;
+}
+
+.title {
+  color: #e6f0ff;
+  font-size: 22px;
+  font-weight: bold;
+  margin-bottom: 12px;
+}
+
+.text-input {
+  width: 100%;
+  height: 64px;
+  border-radius: 12px;
+  background-color: #152238;
+  color: #e6f0ff;
+  font-size: 16px;
+  padding: 0 10px;
+  margin-bottom: 14px;
+}
+
+.quick-list {
+  flex-direction: column;
+}
+
+.quick-row {
+  padding: 10px 12px;
+  border-radius: 10px;
+  background-color: #152238;
+  margin-bottom: 8px;
+}
+
+.quick-text {
+  color: #b7c8e8;
+  font-size: 16px;
+}
+
+.actions {
+  flex-direction: row;
+  margin-top: 16px;
+  gap: 12px;
+}
+
+.btn {
+  width: 110px;
+  height: 44px;
+  border-radius: 22px;
+  background-color: #33b4ff;
+  color: #08131f;
+  font-size: 16px;
+  text-align: center;
+}
+
+.btn-ghost {
+  background-color: #1c2c47;
+  color: #dbe8ff;
+}
+</style>