fix: restore complex 3-page index after package alignment (emulator renders)

src/pages/index/index.ux

@@ -1,14 +1,138 @@
 <template>
   <div class="page">
-    <text class="title">DSHWatch</text>
+    <swiper class="swiper" index="{{currentIndex}}" indicator="false" loop="false"
-    <text class="status">加载中…</text>
+            previousmargin="14px" nextmargin="14px" onchange="onSwipeChange">
+      <!-- 左页：会话 -->
+      <div class="page-item left-page">
+        <text class="page-title">会话</text>
+        <div class="session-list">
+          <div class="session-row" for="{{sessions}}" onclick="selectSession($index)">
+            <text class="session-title">{{$item.title}}</text>
+            <text class="session-dot" if="{{$item.running}}">●</text>
+          </div>
+        </div>
+        <text class="page-hint" if="{{!sessions.length}}">暂无会话</text>
+      </div>
+
+      <!-- 中页：主页 / 吉祥物 -->
+      <div class="page-item center-page">
+        <image class="mascot" src="/common/dsniang.png" onclick="openDetail" />
+        <text class="status-text">{{statusText}}</text>
+        <text class="session-hint">{{activeTitle}}</text>
+        <div class="center-actions">
+          <input class="btn" type="button" value="输入" onclick="openInput" />
+          <input class="btn btn-ghost" type="button" value="详情" onclick="openDetail" />
+        </div>
+      </div>
+
+      <!-- 右页：设置 -->
+      <div class="page-item right-page">
+        <text class="page-title">设置</text>
+        <text class="setting-label">服务器</text>
+        <input class="setting-input" type="text" value="{{settings.serverUrl}}" onchange="onServerChange" />
+        <text class="setting-label">用户ID</text>
+        <input class="setting-input" type="text" value="{{settings.userId}}" onchange="onUserChange" />
+        <text class="setting-label">Token</text>
+        <input class="setting-input" type="text" value="{{settings.token}}" onchange="onTokenChange" />
+        <text class="conn-text">{{connText}}</text>
+        <input class="btn" type="button" value="连接状态" onclick="refreshConn" />
+        <input class="btn btn-ghost" type="button" value="更多设置" onclick="openSettings" />
+      </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>
 
 <script>
+import router from '@system.router'
+import bridge from '../../common/bridge.js'
+
 export default {
   private: {
-    status: '加载中…'
+    currentIndex: 1,
+    sessions: [],
+    statusText: '加载中…',
+    activeTitle: 'DSHWatch 初始化中…',
+    settings: {
+      serverUrl: 'ws://127.0.0.1:8787',
+      userId: '',
+      token: ''
+    },
+    connText: '正在连接…'
+  },
+
+  onInit() {
+    // 空壳：仅预留
+  },
+
+  onReady() {
+    this._unsub = bridge.subscribe({
+      status: (s) => {
+        this.statusText = s
+        this.connText = s
+      },
+      message: (msg) => {
+        this.handleBridgeMessage(msg)
+      }
+    })
+    bridge.refreshConn()
+  },
+
+  onDestroy() {
+    if (this._unsub) this._unsub()
+  },
+
+  onSwipeChange(e) {
+    if (e && typeof e.index === 'number') {
+      this.currentIndex = e.index
+    }
+  },
+
+  goTo(index) {
+    // index 属性绑定已驱动 swiper 切换；此处主要同步 data
+    this.currentIndex = index
+  },
+
+  selectSession(index) {
+    const item = this.sessions[index]
+    if (item) {
+      this.activeTitle = '会话 ' + item.title
+      this.goTo(1)
+    }
+  },
+
+  openDetail() {
+    router.push({ uri: '/pages/detail' })
+  },
+
+  openInput() {
+    router.push({ uri: '/pages/input' })
+  },
+
+  openSettings() {
+    router.push({ uri: '/pages/settings' })
+  },
+
+  onServerChange(e) { this.settings.serverUrl = e && e.value || '' },
+  onUserChange(e) { this.settings.userId = e && e.value || '' },
+  onTokenChange(e) { this.settings.token = e && e.value || '' },
+
+  refreshConn() {
+    bridge.refreshConn()
+  },
+
+  handleBridgeMessage(msg) {
+    // 空壳：按 PROTOCOL.md 处理手机下发的 status/event 等
+    if (msg && msg.type === 'status' && msg.payload) {
+      this.statusText = msg.payload.statusText || this.statusText
+      this.activeTitle = msg.payload.activeTitle || this.activeTitle
+      if (msg.payload.sessions) this.sessions = msg.payload.sessions
+    }
   }
 }
 </script>
@@ -18,18 +142,154 @@ export default {
   width: 100%;
   height: 100%;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   background-color: #0b1220;
 }
-.title {
+
-  color: #e6f0ff;
+.swiper {
-  font-size: 34px;
+  flex: 1;
-  font-weight: bold;
+  width: 100%;
+  indicator-size: 0px;
 }
-.status {
+
-  color: #7d8fb0;
+.page-item {
+  width: 100%;
+  height: 100%;
+  padding: 12px;
+  box-sizing: border-box;
+}
+
+.left-page,
+.right-page {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.center-page {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.page-title {
+  color: #e6f0ff;
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 12px;
+}
+
+.page-hint {
+  color: #6b7a99;
+  font-size: 16px;
+  margin-top: 20px;
+}
+
+.session-list {
+  width: 100%;
+  flex-direction: column;
+}
+
+.session-row {
+  width: 100%;
+  height: 44px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  padding: 0 10px;
+  border-radius: 10px;
+  background-color: #152238;
+}
+
+.session-title {
+  color: #dbe8ff;
+  font-size: 17px;
+}
+
+.session-dot {
+  color: #33b4ff;
+  font-size: 16px;
+}
+
+.mascot {
+  width: 180px;
+  height: 180px;
+}
+
+.status-text {
+  color: #e6f0ff;
   font-size: 18px;
-  margin-top: 12px;
+  margin-top: 14px;
+}
+
+.session-hint {
+  color: #7d8fb0;
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.center-actions {
+  flex-direction: row;
+  margin-top: 18px;
+  gap: 12px;
+}
+
+.btn {
+  width: 100px;
+  height: 40px;
+  border-radius: 20px;
+  background-color: #33b4ff;
+  color: #08131f;
+  font-size: 16px;
+  text-align: center;
+}
+
+.btn-ghost {
+  background-color: #1c2c47;
+  color: #dbe8ff;
+}
+
+.setting-label {
+  color: #8fa4c9;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
+.setting-input {
+  width: 100%;
+  height: 38px;
+  border-radius: 8px;
+  background-color: #152238;
+  color: #e6f0ff;
+  font-size: 15px;
+  padding: 0 8px;
+  margin-bottom: 4px;
+}
+
+.conn-text {
+  color: #6b7a99;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
+.dots {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 14px;
+  margin-top: 4px;
+  gap: 8px;
+}
+
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.28);
+}
+
+.dot-active {
+  width: 22px;
+  border-radius: 4px;
+  background-color: #33b4ff;
 }
 </style>