feat(components): 优化笔记分类菜单并添加折叠功能

- 在左侧菜单区域添加折叠按钮，点击后可折叠/展开菜单
- 使用 v-if 指令根据 isCollapsed 状态控制菜单的显示与隐藏
- 在折叠状态下，显示向右箭头图标，点击后可展开菜单
- 调整菜单样式，增加 popper-effect 和 collapse-transition 属性
- 修改右侧内容区域的样式，调整 markdown-preview 边框颜色

biji-qianduan/src/components/HomePage.vue

@@ -2,12 +2,16 @@
   <div class="home-page">
     <div class="container">
       <!-- 左侧菜单区域 -->
-      <div class="sidebar">
+      <div v-if="!isCollapsed" class="sidebar">
         <div  class="sidebar-header">
-          <span>笔记分类</span>
-          <el-button type="primary" size="small" @click="showCreateGroupDialog = true">
+          <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
@@ -15,6 +19,8 @@
           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;
 }