feat(ui): 重构界面布局和样式

- 调整列表项布局，增加左右分区
- 优化底部倒计时和进度条布局
- 统一文字样式和大小
- 调整颜色和间距
- 增加返回按键处理

src/pages/index/index.ux

@@ -9,14 +9,16 @@
     <div class="header-divider"></div>
     
     <!-- 账户列表 -->
-    <list class="totp-list" style="position: absolute; top: 70px; bottom: 70px; left: 2px; right: 2px; width: 208px;">
+    <list class="totp-list" style="position: absolute; top: 55px; bottom: 48px; left: 6px; right: 6px; width: 324px;">
-      <list-item class="totp-item" style="height: 115px; margin-bottom: 10px; background-color: #1a1a1a; border-radius: 15px; border: 1px solid #333; flex-direction: column; justify-content: space-between; padding: 8px;" type="account" for="{{totpList}}" onclick="showDetail($idx)">
+      <list-item class="totp-item" style="height: 90px; margin-bottom: 4px; background-color: #1a1a1a; border-radius: 8px; border: 1px solid #333; flex-direction: row; align-items: center; padding: 8px 6px 8px 12px;" type="account" for="{{totpList}}" onclick="showDetail($idx)">
-        <div style="flex-direction: column; width: 100%; margin-bottom: 8px;">
+        <!-- 左侧：服务名和用户名 -->
-          <text style="font-size: 24px; color: #fff; font-weight: bold; margin-bottom: 3px; text-align: left; width: 100%; line-height: 26px;">{{$item.name}}</text>
+        <div style="flex: 1; flex-direction: column; justify-content: center; margin-right: 0px;">
-          <text style="font-size: 18px; color: #999; text-align: left; width: 100%; line-height: 22px;" show="{{$item.usr}}">{{$item.usr}}</text>
+          <text style="font-size: 30px; color: #fff; font-weight: bold; margin-bottom: 1px; text-align: left; line-height: 32px;">{{$item.name}}</text>
+          <text style="font-size: 24px; color: #999; text-align: left; line-height: 25px; width:200px" show="{{$item.usr}}">{{$item.usr}}</text>
         </div>
-        <div style="align-items: center; justify-content: center; width: 100%; height: 45px;">
+        <!-- 右侧：验证码 -->
-          <text style="font-size: 32px; color: #00ff88; font-family: monospace; font-weight: bold; letter-spacing: 4px; text-align: center; width: 100%; line-height: 36px;">{{$item.otp}}</text>
+        <div style="width: 140px; height: 100%; align-items: center; justify-content: flex-end;">
+          <text style="font-size: 36px; color: #00ff88; font-family: monospace; font-weight: bold; letter-spacing: 1px; text-align: right; line-height: 38px; white-space: nowrap;">{{$item.otp}}</text>
         </div>
       </list-item>
     </list>
@@ -27,12 +29,21 @@
       <text class="empty-text">暂无验证器</text>
     </div>
     
-    <!-- 底部弧形倒计时进度条 -->
+    <!-- 底部倒计时和进度条并排 -->
     <div class="countdown-container" show="{{totpList.length > 0}}">
-      <!-- 弧形进度条 -->
+      <div style="position: absolute; bottom: 8px; left: 12px; right: 12px; height: 40px; flex-direction: row; align-items: center;">
-      <progress style="position: absolute; left: 0px; bottom: 10px; center-x: 106px; center-y: 0px; width: 212px; height: 100px; radius: 100px; start-angle: 240deg; total-angle: -120deg; stroke-width: 8px; background-color: rgba(255, 255, 255, 0.2); color: {{progressColor}};" percent="{{timeProgress}}" type="arc"></progress>
+        <!-- 左侧倒计时文字 -->
-      <!-- 倒计时文字 -->
+        <div style="width: 100px; height: 100%; align-items: center; justify-content: center;">
-      <text class="countdown-text" style="position: absolute; bottom: 35px; left: 0px; right: 0px; text-align: center; font-size: 20px; font-weight: bold; color: {{textColor}}; transition: color 500ms ease-out;">{{timeLeft}}秒</text>
+          <text class="countdown-text" style="font-size: 24px; font-weight: bold; color: {{textColor}}; transition: color 500ms ease-out; text-align: center;">{{timeLeft}}秒</text>
+        </div>
+        <!-- 右侧进度条 -->
+        <div style="flex: 1; height: 100%; align-items: center; justify-content: center; margin-left: 8px;">
+          <!-- 进度条背景 -->
+          <div style="position: absolute; left: 0px; right: 0px; height: 8px; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px;"></div>
+          <!-- 进度条 -->
+          <progress style="position: absolute; left: 0px; right: 0px; height: 8px; background-color: transparent; color: {{progressColor}}; border-radius: 4px;" percent="{{timeProgress}}" type="horizontal"></progress>
+        </div>
+      </div>
     </div>
 
     <!-- 详情页面 -->
@@ -716,6 +727,17 @@ export default {
     vibrator.vibrate({
       mode: 'short'
     })
+  },
+
+  onBackPress() {
+    console.log('触发：onBackPress')
+    // 如果详情页打开，则关闭详情页返回列表
+    if (this.showDetailPage) {
+      this.hideDetail()
+      return true  // 自己处理，不执行系统默认返回
+    }
+    // 否则执行系统默认返回行为（退出应用）
+    return false
   }
 
 }
@@ -748,7 +770,7 @@ export default {
 }
 
 .header-title {
-  font-size: 18px;
+  font-size: 24px;
   color: #fff;
   font-weight: bold;
   text-align: center;
@@ -756,9 +778,9 @@ export default {
 
 .header-divider {
   position: absolute;
-  top: 55px;
+  top: 45px;
-  left: 20px;
+  left: 30px;
-  right: 20px;
+  right: 30px;
   height: 1px;
   background: linear-gradient(to right, transparent, #333, transparent);
   flex-shrink: 0;
@@ -782,23 +804,23 @@ export default {
 }
 
 .empty-icon {
-  font-size: 48px;
+  font-size: 56px;
-  margin-bottom: 16px;
+  margin-bottom: 20px;
 }
 
 .empty-text {
-  font-size: 16px;
+  font-size: 20px;
   color: #666;
   text-align: center;
 }
 
-/* 底部弧形倒计时 */
+/* 底部并排倒计时 */
 .countdown-container {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
-  height: 100px;
+  height: 48px;
   background-color: transparent;
 }
 
@@ -821,24 +843,24 @@ export default {
 
 .detail-content {
   flex: 1;
-  padding: 40px 20px 20px 20px;
+  padding: 30px 15px 15px 15px;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
 
 .detail-service {
-  font-size: 28px;
+  font-size: 40px;
   color: #fff;
   font-weight: bold;
-  margin-bottom: 8px;
+  margin-bottom: 10px;
   text-align: center;
 }
 
 .detail-account {
-  font-size: 22px;
+  font-size: 30px;
   color: #999;
-  margin-bottom: 30px;
+  margin-bottom: 25px;
   text-align: center;
 }
 
@@ -846,32 +868,32 @@ export default {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-bottom: 25px;
+  margin-bottom: 20px;
-  padding: 20px;
+  padding: 15px;
   background-color: #1a1a1a;
   border-radius: 12px;
   border: 2px solid #333;
   height: 120px;
-  width: 170px;
+  width: 280px;
 }
 
 .detail-code-row {
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  margin: 6px 0;
+  margin: 4px 0;
 }
 
 .detail-code-digit {
-  width: 30px;
+  width: 36px;
-  height: 50px;
+  height: 42px;
   margin: 0 1px;
   justify-content: center;
   align-items: center;
 }
 
 .detail-code-num {
-  font-size: 32px;
+  font-size: 36px;
   color: #00ff88;
   font-weight: bold;
   font-family: monospace;
@@ -880,7 +902,7 @@ export default {
 }
 
 .detail-code-single {
-  font-size: 32px;
+  font-size: 36px;
   color: #00ff88;
   font-weight: bold;
   font-family: monospace;
@@ -890,7 +912,7 @@ export default {
 }
 
 .detail-time {
-  font-size: 22px;
+  font-size: 30px;
   color: #AAA;
   text-align: center;
 }