From fadc8fd4720029e9b84fe631c0a8665386a60f0e Mon Sep 17 00:00:00 2001
From: ikmkj <1@qq,com>
Date: Fri, 8 Aug 2025 21:30:00 +0800
Subject: [PATCH] =?UTF-8?q?refactor(layout):=20=E4=BC=98=E5=8C=96=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=E5=B8=83=E5=B1=80=E4=BB=A5=E8=A7=A3=E5=86=B3=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E7=99=BD=E5=B1=8F=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 list-view-container 和 note-list-wrapper 类以优化列表视图布局- 在移动端样式中添加相应的布局调整，确保内容区域高度适配屏幕
- 通过 flex布局改善滚动体验，避免白屏现象
---
 biji-qianduan/src/assets/styles/mobile.css | 17 ++++++++++++++-
 biji-qianduan/src/components/HomePage.vue  | 25 ++++++++++++++++------
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/biji-qianduan/src/assets/styles/mobile.css b/biji-qianduan/src/assets/styles/mobile.css
index 8224fc4..9b89b58 100644
--- a/biji-qianduan/src/assets/styles/mobile.css
+++ b/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; /* 调整图标大小 */
-}
\ No newline at end of file
+}
diff --git a/biji-qianduan/src/components/HomePage.vue b/biji-qianduan/src/components/HomePage.vue
index 4c1e6ef..d45fa57 100644
--- a/biji-qianduan/src/components/HomePage.vue
+++ b/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;