improve: 优化首页按钮布局

Author: fywmjj

src/pages/index/index.ux

@@ -1,18 +1,13 @@
 <template>
   <div class="page-container">
     <!-- Background Image -->
-    <!-- 背景图的路径也统一调整到images子目录了。 -->
     <image class="bg-image" src="/common/images/bg.png"></image>
 
     <!-- True Ending Overlay Image -->
-    <!-- 真结局的图片路径也挪到images目录了。 -->
-    <!-- 修复：现在只要达成Happy Ending，就会显示真结局视觉效果。 -->
-    <!-- 修复：移除图片透明度，使其完全不透明。 -->
     <image class="true-end-visual" src="/common/images/ATRI_TrueEnding.png" if="{{ showTrueEndVisuals }}"></image>
 
     <!-- Main Menu Buttons Container -->
-    <!-- 修复：将主菜单按钮容器整体上移，避免TRUE END按钮与EXIT按钮挤压。 -->
-    <div class="main-menu-button-container">
+    <div class="main-menu-button-container" style="top: {{ mainMenuTopOffset }}px;">
       <text class="main-menu-button true-end-button" if="{{ showTrueEndVisuals }}" @click="loadGame('TE')">TRUE END</text>
       <text class="main-menu-button" @click="startGame()">START</text>
       <text class="main-menu-button {{ hasSaveData ? '' : 'disabled' }}" @click="showLoadOverlay()">LOAD</text>
@@ -57,19 +52,23 @@
     left: 0;
     width: 100%;
     height: auto;
-    /* 修复：移除透明度 */
-    /* opacity: 0.8; */
   }
 
   /* === Main Menu Button Styles === */
-  /* 修复：将主菜单按钮容器整体上移，避免TRUE END按钮与EXIT按钮挤压。 */
-  .main-menu-button-container { position: absolute; top: 180px; /* 从215px调整到180px，向上移动 */ left: 35px; /* Slightly adjusted */ display: flex; flex-direction: column; align-items: flex-start; }
+  .main-menu-button-container {
+    position: absolute;
+    /* top 值将通过 mainMenuTopOffset 动态设置 */
+    left: 35px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
   .main-menu-button {
-    font-size: 30px; /* Reduced size */
+    font-size: 30px;
     font-weight: bold;
     color: #0A55BC;
-    padding: 3px 0; /* Reduced padding */
-    margin-bottom: 12px; /* Adjusted spacing */
+    padding: 3px 0;
+    margin-bottom: 12px; /* 保持按钮间的固定间距 */
   }
   .true-end-button { color: #FFD700; }
   .main-menu-button.disabled { color: #aaaaaa; }
@@ -79,11 +78,11 @@
 
   /* Load Overlay */
   .load-overlay { padding: 20px; justify-content: flex-start; }
-  .overlay-scroll { width: 100%; flex-grow: 1; display: flex; flex-direction: column; align-items: center; /* Requires <scroll> component for actual scrolling */ }
+  .overlay-scroll { width: 100%; flex-grow: 1; display: flex; flex-direction: column; align-items: center; }
   .overlay-title { font-size: 22px; color: #333333; font-weight: bold; margin-bottom: 20px; margin-top: 10px; }
   .save-slot-button { width: 90%; max-width: 280px; height: 55px; background-color: rgba(80, 192, 231, 0.8); color: #ffffff; font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 15px; display: flex; justify-content: center; align-items: center; border-radius: 8px; flex-shrink: 0; }
   .save-load-empty { margin-top: 20px; font-size: 18px; color: #888888; }
-  .close-button { margin-top: auto; padding: 10px 20px; font-size: 20px; color: #007aff; } /* No underline */
+  .close-button { margin-top: auto; padding: 10px 20px; font-size: 20px; color: #007aff; }
 
   /* Tips Overlay */
   .tips-overlay { background-color: rgba(255, 255, 255, 0.98); padding: 20px; }
@@ -106,29 +105,83 @@
 
   export default {
     private: {
-      recoveryData: [], finStatus: { HE: false, BE: false },
-      isLoadOverlayVisible: false, isTipsOverlayVisible: false,
+      recoveryData: [],
+      finStatus: { HE: false, BE: false },
+      isLoadOverlayVisible: false,
+      isTipsOverlayVisible: false,
     },
     computed: {
-        // 修复：现在只要达成Happy Ending (HE)，就显示TRUE END按钮和图片。
-        // 之前需要同时达成HE和BE才显示，可能不符合预期。
         showTrueEndVisuals() { return this.finStatus && this.finStatus.HE === true; },
-        hasSaveData() { return this.recoveryData && this.recoveryData.length > 0; }
+        hasSaveData() { return this.recoveryData && this.recoveryData.length > 0; },
+
+        mainMenuTopOffset() {
+          // 设定一个基础的 top 值，使得当 START 是第一个按钮时，位置比较合适
+          const baseTopForFirstButton = 215; // 这个值可以根据视觉效果微调
+          // TRUE END 按钮及其 margin 大约占用的垂直空间
+          const trueEndButtonSpace = 30 + 12; // 假设字体30，margin-bottom 12
+
+          if (this.showTrueEndVisuals) {
+            // 如果显示 TRUE END，我们希望 TRUE END 按钮在 baseTopForFirstButton 的位置
+            return baseTopForFirstButton;
+          } else {
+            // 如果不显示 TRUE END，我们希望 START 按钮在 baseTopForFirstButton 的位置
+            // 但是，由于 START 按钮在 TRUE END 按钮之后，
+            // 如果我们直接返回 baseTopForFirstButton，会导致 START 按钮位置正确，
+            // 但因为少了一个按钮，EXIT 下方会有空隙。
+            // 所以，当没有 TRUE END 按钮时，整个按钮组应该向上移动一个按钮的空间。
+            // 这样，START 按钮会出现在 baseTopForFirstButton - trueEndButtonSpace 的位置，
+            // 这可能太靠上了。
+
+            // 让我们重新思考：
+            // 目标：无论 TRUE END 是否显示，按钮列表的整体视觉中心或底部大致不变。
+            // 或者，第一个可见按钮的起始位置是固定的。
+
+            // 如果我们希望第一个可见按钮（TRUE END 或 START）都从大约 215px 的位置开始：
+            return 215; // 无论如何，第一个按钮都从 215px 开始。
+                        // 这样，当 TRUE END 不显示时，START 从 215px 开始，
+                        // 由于少了一个按钮，EXIT 会更靠上，其下方空隙会变大。
+                        // 这与问题描述一致。
+
+            // 解决空隙问题的核心是：当按钮数量减少时，如何处理多余的空间。
+            // 如果我们希望按钮列表的底部对齐，或者最后一个按钮（EXIT）的位置相对固定。
+            // 假设 EXIT 按钮理想的 top 位置是 Y_exit。
+            // 有 TRUE END: container_top + 4 * (button_height + margin) + exit_button_height = Y_exit_bottom
+            // 无 TRUE END: new_container_top + 3 * (button_height + margin) + exit_button_height = Y_exit_bottom
+            // 这太复杂了。
+
+            // 最简单的处理方法：
+            // 保持按钮间的 margin-bottom 不变。
+            // 当 TRUE END 不显示时，将整个容器向上移动，使得 START 按钮占据原来 TRUE END 的位置。
+            // 这样，EXIT 按钮也会相应上移，其下方的空隙会自然减小。
+            const topWhenTrueEndIsVisible = 215; // 假设这是 TRUE END 按钮的理想起始 top
+            const spaceOfOneButton = 30 + 12; // 按钮高度 + margin
+
+            if (this.showTrueEndVisuals) {
+                return topWhenTrueEndIsVisible;
+            } else {
+                // 当 TRUE END 不显示时，我们希望 START 按钮出现在 topWhenTrueEndIsVisible 的位置
+                // 由于 START 是列表中的第二个元素（逻辑上），而容器的 top 是针对第一个元素的
+                // 所以，容器的 top 应该设置为 topWhenTrueEndIsVisible
+                // 这样 START 按钮就会从 topWhenTrueEndIsVisible 开始。
+                // 此时，因为列表少了一个按钮，EXIT 按钮会更靠上，其下方的空隙会变大。
+                // 这与问题描述一致。
+
+                // 为了解决空隙，我们需要让整个按钮组在没有 TRUE END 时向上移动。
+                // 移动的距离正好是一个按钮所占的空间。
+                return topWhenTrueEndIsVisible - spaceOfOneButton;
+            }
+          }
+        }
     },
 
     onInit() {
-      // 应用启动时的初始化流程，加载各种数据。这块逻辑比较复杂，得确保每一步都稳妥，不然启动就崩了可不好。👍
       console.log("[Index] onInit: Loading initial data.");
-      // 移除了settings的加载，因为现在设置页面独立了，它自己负责加载。
       this.loadRecoveryData()
           .then(() => this.loadFinStatus())
           .then(() => this.checkIfTipsNeeded())
           .catch(err => { console.error("[Index] Load chain error:", err); this.checkIfTipsNeeded(); });
     },
-    // onHide 生命周期钩子不再需要，因为文本预览动画已移至独立设置页面。
 
-    // --- 数据加载器 ---
-    // loadSettings 方法已移至新的设置页面。
     loadRecoveryData() { return new Promise((resolve) => {
         storage.get({ key: STORAGE_KEYS.RECOVERY_DATA,
             success: (d) => { if (d) { try { this.recoveryData = JSON.parse(d); } catch (e) { this.recoveryData = []; } } else { this.recoveryData = []; } resolve(); },
@@ -147,9 +200,7 @@
          complete: () => {} });
      },
 
-    // --- 导航与操作 ---
     startGame() {
-      // 开始游戏按钮的点击事件，跳转到游戏详情页。加了个加载提示，避免用户一直点，毕竟加载需要时间嘛。
       router.push({ uri: 'pages/detail' }); prompt.showToast({ message: "加载游戏中..." });
     },
     loadGame(indexOrType) {
@@ -160,20 +211,13 @@
     },
     exitApp() { try { this.$app.exit(); } catch(e) { prompt.showToast({ message: "无法退出" }); } },
 
-    // --- 遮罩层控制 ---
     showLoadOverlay() { if (this.hasSaveData) { this.isLoadOverlayVisible = true; } else { prompt.showToast({message: "没有存档"}); } },
     hideLoadOverlay() { this.isLoadOverlayVisible = false; },
 
     showSettingsOverlay() {
         console.log("[Index] showSettingsOverlay called. Navigating to settings page.");
-        // 以前这里是直接显示一个浮层，现在把设置功能独立成一个页面了。
-        // 这样结构更清晰，也解决了之前定位的一些玄学问题。一举两得！🥳
         router.push({ uri: 'pages/settings' });
     },
-    // hideSettingsOverlay 方法已移除，因为现在是页面跳转，而不是显示/隐藏浮层。
     hideTipsOverlay() { this.isTipsOverlayVisible = false; storage.set({ key: STORAGE_KEYS.TIPS_SHOWN, value: JSON.stringify(TIPS_SEEN_FLAG), success: () => {}, fail: () => {}, complete: () => {} }); },
-
-    // --- 设置逻辑 (已移至 /pages/settings/settings.ux) ---
-    // updateTempSetting, saveSettingsAndClose, startTextPreviewAnimation, stopTextPreviewAnimation, animateTextPreview 方法已移至新的设置页面。
   }
 </script>