From 5fade7f8bd2ad156ad277feee6ab946f96b10b08 Mon Sep 17 00:00:00 2001
From: ikmkj <1@qq,com>
Date: Fri, 8 Aug 2025 19:10:14 +0800
Subject: [PATCH] =?UTF-8?q?(mfeatobile):=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E8=8F=9C=E5=8D=95=E5=B9=B6=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 优化移动端侧边栏菜单的显示逻辑
- 添加移动端特有的菜单项，包括用户信息、系统管理等
- 实现移动菜单的折叠和展开功能
- 新增移动端创建笔记的浮动按钮
-优化样式，增加侧边栏遮罩和菜单头部样式
---
 biji-qianduan/src/components/HomePage.vue | 87 ++++++++++++++++++++++-
 1 file changed, 84 insertions(+), 3 deletions(-)

diff --git a/biji-qianduan/src/components/HomePage.vue b/biji-qianduan/src/components/HomePage.vue
index 8e8408f..ee4598f 100644
--- a/biji-qianduan/src/components/HomePage.vue
+++ b/biji-qianduan/src/components/HomePage.vue
@@ -1,7 +1,7 @@
 <template>
   <el-container class="home-page" :class="{'is-mobile': isMobile}">
     <!-- 左侧菜单区域 -->
-    <el-aside class="sidebar" :width="isMobile ? '0' : (isCollapsed ? '64px' : '250px')">
+    <el-aside class="sidebar" :width="isCollapsed ? (isMobile ? '0' : '64px') : '250px'">
       <div class="sidebar-header">
         <span v-if="!isCollapsed" style="margin-right: 15px; font-weight: bold;">笔记分类</span>
         <el-button v-if="!isCollapsed" type="primary" size="small" @click="showCreateGroupDialog = true" circle>
@@ -16,6 +16,7 @@
       </div>
 
       <el-menu
+          v-if="!isMobile"
           :default-active="activeMenu"
           class="el-menu-vertical-demo"
           :collapse="isCollapsed"
@@ -31,6 +32,44 @@
           <template #title>回收站</template>
         </ElMenuItem>
       </el-menu>
+
+      <!-- Mobile Menu -->
+      <el-menu
+          v-if="isMobile"
+          :default-active="activeMenu"
+          class="el-menu-vertical-demo"
+          :collapse="isCollapsed"
+      >
+        <div class="mobile-menu-header">
+          <div v-if="userStore.isLoggedIn" class="user-info">
+            <span class="username">欢迎, {{ userStore.userInfo?.username }}</span>
+          </div>
+          <div v-else class="guest-info">
+            <el-button type="primary" @click="goToLogin">登录</el-button>
+            <el-button @click="goToRegister">注册</el-button>
+          </div>
+        </div>
+
+        <template v-for="menu in categoryTree" :key="menu.id">
+          <component :is="renderMenu(menu)" />
+        </template>
+        <ElMenuItem index="trash" @click="goToTrash">
+          <ElIcon><Delete /></ElIcon>
+          <template #title>回收站</template>
+        </ElMenuItem>
+        <ElMenuItem v-if="userStore.isLoggedIn" index="system-settings" @click="showSystemSettingsDialog = true">
+          <ElIcon><setting /></ElIcon>
+          <template #title>系统管理</template>
+        </ElMenuItem>
+        <ElMenuItem v-if="userStore.isLoggedIn" index="update-password" @click="showUpdatePasswordDialog = true">
+          <ElIcon><lock /></ElIcon>
+          <template #title>修改密码</template>
+        </ElMenuItem>
+        <ElMenuItem v-if="userStore.isLoggedIn" index="logout" @click="handleLogout">
+          <ElIcon><SwitchButton /></ElIcon>
+          <template #title>退出登录</template>
+        </ElMenuItem>
+      </el-menu>
     </el-aside>
 
     <!-- 右侧内容区域 -->
@@ -321,6 +360,17 @@
       </el-main>
     </el-container>
     <div v-if="isMobile && !isCollapsed" class="sidebar-overlay" @click="isCollapsed = true"></div>
+
+    <!-- Mobile FAB for creating note -->
+    <el-button
+        v-if="isMobile && userStore.isLoggedIn"
+        class="fab"
+        type="primary"
+        circle
+        @click="showCreateNoteDialog = true"
+    >
+      <el-icon><Plus /></el-icon>
+    </el-button>
   </el-container>
 </template>
 
@@ -347,7 +397,7 @@ import {
   generateRegistrationCode,
   updatePassword
 } from '@/api/CommonApi.js'
-import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu, User, Back } from "@element-plus/icons-vue";
+import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu, User, Back, Setting, SwitchButton } from "@element-plus/icons-vue";
 import { useUserStore } from '../stores/user';
 import { useRouter } from 'vue-router';
 import { privateNoteContent } from '../utils/privateNoteContent.js';
@@ -362,7 +412,7 @@ const groupMarkdownFiles = ref([]);
 const showEditor = ref(false);
 const selectedFile = ref(null);
 const activeMenu = ref('all');
-const isCollapsed = ref(true);
+const isCollapsed = ref(window.innerWidth < 768);
 const showCreateGroupDialog = ref(false);
 const showCreateNoteDialog = ref(false);
 const showRenameDialog = ref(false);
@@ -1567,3 +1617,34 @@ display: flex;
 align-items: center;
 gap: 10px;
 }
+
+.sidebar-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+}
+
+.fab {
+  position: fixed;
+  bottom: 80px;
+  right: 20px;
+  z-index: 100;
+  width: 56px;
+  height: 56px;
+  box-shadow: 0 4px 12px rgba(0,0,0,.15);
+}
+
+.mobile-menu-header {
+  padding: 20px;
+  text-align: center;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.mobile-menu-header .username {
+  font-weight: bold;
+  font-size: 16px;
+}
\ No newline at end of file