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

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

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
-              :files="groupMarkdownFiles"
-              :is-user-logged-in="userStore.isLoggedIn"
-              @preview="previewFile"
-          />
+          <div class="note-list-wrapper">
+            <NoteList
+                :files="groupMarkdownFiles"
+                :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;