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,102 @@
+<template>
+  <div class="page">
+    <text class="title">设置</text>
+    <text class="label">服务器地址</text>
+    <input class="input" type="text" value="{{serverUrl}}" onchange="onServerChange" />
+    <text class="label">用户ID</text>
+    <input class="input" type="text" value="{{userId}}" onchange="onUserChange" />
+    <text class="label">Token</text>
+    <input class="input" type="password" value="{{token}}" onchange="onTokenChange" />
+    <text class="label">连接模式</text>
+    <text class="mode">{{mode}}</text>
+
+    <div class="actions">
+      <input class="btn" type="button" value="保存(空壳)" onclick="save" />
+      <input class="btn btn-ghost" type="button" value="返回" onclick="goBack" />
+    </div>
+  </div>
+</template>
+
+<script>
+import router from '@system.router'
+
+export default {
+  private: {
+    serverUrl: 'ws://127.0.0.1:8787',
+    userId: '',
+    token: '',
+    mode: 'relay（服务器中转）'
+  },
+  onServerChange(e) { this.serverUrl = e && e.value || '' },
+  onUserChange(e) { this.userId = e && e.value || '' },
+  onTokenChange(e) { this.token = e && e.value || '' },
+  save() {
+    // 空壳：后续持久化并与 index 页同步
+    console.log('save settings', this.serverUrl, this.userId)
+  },
+  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;
+}
+
+.label {
+  color: #8fa4c9;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
+.input {
+  width: 100%;
+  height: 44px;
+  border-radius: 10px;
+  background-color: #152238;
+  color: #e6f0ff;
+  font-size: 16px;
+  padding: 0 10px;
+  margin-bottom: 6px;
+}
+
+.mode {
+  color: #b7c8e8;
+  font-size: 15px;
+}
+
+.actions {
+  flex-direction: row;
+  margin-top: 18px;
+  gap: 12px;
+}
+
+.btn {
+  width: 130px;
+  height: 44px;
+  border-radius: 22px;
+  background-color: #33b4ff;
+  color: #08131f;
+  font-size: 16px;
+  text-align: center;
+}
+
+.btn-ghost {
+  background-color: #1c2c47;
+  color: #dbe8ff;
+}
+</style>