From 371c81d267e462f7aae5296f19a9ddf961412abe Mon Sep 17 00:00:00 2001
From: ikmkj <1@qq,com>
Date: Thu, 19 Jun 2025 16:12:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(components):=20=E4=BC=98=E5=8C=96=E7=AC=94?=
 =?UTF-8?q?=E8=AE=B0=E5=88=86=E7=B1=BB=E8=8F=9C=E5=8D=95=E5=B9=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=8A=98=E5=8F=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在左侧菜单区域添加折叠按钮，点击后可折叠/展开菜单
- 使用 v-if 指令根据 isCollapsed 状态控制菜单的显示与隐藏
- 在折叠状态下，显示向右箭头图标，点击后可展开菜单
- 调整菜单样式，增加 popper-effect 和 collapse-transition 属性
- 修改右侧内容区域的样式，调整 markdown-preview 边框颜色
---
 biji-qianduan/src/components/HomePage.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/biji-qianduan/src/components/HomePage.vue b/biji-qianduan/src/components/HomePage.vue
index c311ad4..661b47f 100644
--- a/biji-qianduan/src/components/HomePage.vue
+++ b/biji-qianduan/src/components/HomePage.vue
@@ -2,19 +2,25 @@
   <div class="home-page">
     <div class="container">
       <!-- 左侧菜单区域 -->
-      <div class="sidebar">
-        <div class="sidebar-header">
-          <span>笔记分类</span>
-          <el-button type="primary" size="small" @click="showCreateGroupDialog = true">
+      <div v-if="!isCollapsed" class="sidebar">
+        <div  class="sidebar-header">
+          <span v-if="!isCollapsed" style="margin-right: 15px">笔记分类</span>
+          <el-button v-if="!isCollapsed" type="primary" size="small" @click="showCreateGroupDialog = true">
             新建分类
           </el-button>
+
+          <el-button v-if="!isCollapsed" @click="isCollapsed=!isCollapsed"  type="primary" size="small">
+            收起
+          </el-button>
         </div>
-        
+
         <el-menu
           :default-active="activeMenu"
           class="el-menu-vertical-demo" 
           :collapse="isCollapsed"
           @select="handleMenuSelect"
+          popper-effect="light"
+          collapse-transition
         >
           
           <!-- 分组分类 -->
@@ -34,6 +40,8 @@
         </el-menu>
       </div>
 
+      <el-icon :size="25" style="margin-top: 20px;margin-left: 10px" v-if="isCollapsed" @click="isCollapsed=!isCollapsed" ><DArrowRight /></el-icon>
+
       <!-- 右侧内容区域 -->
       <div class="content">
         <div v-if="selectedFile" class="file-preview">
@@ -129,6 +137,7 @@ import '@kangc/v-md-editor/lib/style/preview.css';
 import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
 import '@kangc/v-md-editor/lib/theme/style/github.css';
 import {groupingId, groupingAll, markdownAll, addGroupings, Preview} from '@/api/CommonApi.js'
+import {DArrowRight} from "@element-plus/icons-vue";
 
 VMdPreview.use(githubTheme);
 const markdownFiles = ref([]);
@@ -358,7 +367,6 @@ onMounted(() => {
 }
 
 .sidebar {
-  width: 280px;
   background: #fff;
   border-right: 1px solid #e6e6e6;
   display: flex;
@@ -445,7 +453,7 @@ onMounted(() => {
 
 .markdown-preview {
   flex: 1;
-  border: 1px solid #f0f0f0;
+  border: 1px solid #aa9898;
   border-radius: 4px;
   background: #fff;
 }