refactor(layout): 优化首页布局以解决移动端白屏问题

- 添加 list-view-container 和 note-list-wrapper 类以优化列表视图布局- 在移动端样式中添加相应的布局调整，确保内容区域高度适配屏幕
- 通过 flex布局改善滚动体验，避免白屏现象

biji-qianduan/src/assets/styles/mobile.css

@@ -17,6 +17,21 @@
 
   .home-page.is-mobile .content {
     padding: 8px;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .home-page.is-mobile .list-view-container {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .home-page.is-mobile .note-list-wrapper {
+    flex: 1;
+    overflow-y: auto;
   }
 
   .sidebar-overlay {
@@ -140,4 +155,4 @@
 
 .fab .el-icon {
   font-size: 24px; /* 调整图标大小 */
-}
+}

biji-qianduan/src/components/HomePage.vue

@@ -43,7 +43,7 @@
         />
 
         <!-- Home/List View -->
-        <div v-else>
+        <div v-else class="list-view-container">
           <HomeHeader
               :is-mobile="isMobile"
               v-model:search-keyword="searchKeyword"
@@ -56,11 +56,13 @@
               @upload-markdown="handleMarkdownUpload"
               @toggle-collapse="isCollapsed = !isCollapsed"
           />
-          <NoteList
+          <div class="note-list-wrapper">
-              :files="groupMarkdownFiles"
+            <NoteList
-              :is-user-logged-in="userStore.isLoggedIn"
+                :files="groupMarkdownFiles"
-              @preview="previewFile"
+                :is-user-logged-in="userStore.isLoggedIn"
-          />
+                @preview="previewFile"
+            />
+          </div>
         </div>
       </el-main>
     </el-container>
@@ -497,6 +499,17 @@ watch([selectedFile, showEditor], ([newFile, newShowEditor]) => {
 </style>
 
 <style scoped>
+.list-view-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.note-list-wrapper {
+  flex: 1;
+  overflow-y: auto;
+}
+
 .home-page {
   height: 100vh;
   overflow: hidden;