feat(biji): 优化笔记展示功能并调整端口

-将服务器端口从 8083 改为 8084
- 在数据库中添加 grouping_id 字段
- 实现笔记分组展示功能
-优化笔记编辑页面布局
-重构后端接口返回类型
- 移除 MarkdownFile 实体中的 userId 字段

biji-qianduan/src/components/HomePage.vue

@@ -2,22 +2,25 @@
   <div class="home-page">
     <el-container style="height: 100vh;">
       <!-- 左侧菜单栏 -->
-      <el-aside width="300px" style="background-color: #f5f7fa; border-right: 1px solid #ebeef5;">
-        <div class="sidebar-header">
-          <h3>笔记分类</h3>
+      <el-aside :width="isCollapsed ? '64px' : '300px'" style="background-color: #f5f7fa; border-right: 1px solid #ebeef5; transition: width 0.3s;">
+        <div class="sidebar-header" :style="{ justifyContent: isCollapsed ? 'center' : 'space-between' }">
+          <h3 v-if="!isCollapsed">笔记分类</h3>
           <el-button @click="isCollapsed = !isCollapsed" size="small" type="text">
-            {{ isCollapsed ? '展开' : '收起' }}
+            <el-icon v-if="isCollapsed">
+              <Expand />
+            </el-icon>
+            <span v-else>收起</span>
           </el-button>
         </div>
         
         <el-menu
-          v-if="!isCollapsed"
+          v-show="!isCollapsed"
           default-active="all"
           class="el-menu-vertical-demo"
           @select="handleMenuSelect"
         >
           <el-menu-item index="all">
-            <span>全部笔记</span>
+            <span>全部文档</span>
           </el-menu-item>
           
           <el-submenu v-for="group in groupings" :key="group.id" :index="'group-'+group.id">
@@ -53,6 +56,18 @@
           </div>
         </div>
         
+        <!-- 文件列表 -->
+        <div v-if="!selectedFile" class="file-list">
+          <div v-for="group in groupings" :key="group.id" class="group-section">
+            <h3>{{ group.grouping }}</h3>
+            <ul>
+              <li v-for="file in groupFiles[group.id]" :key="file.id" @click="selectFile(file)">
+                {{ file.title }}
+              </li>
+            </ul>
+          </div>
+        </div>
+        
         <div v-if="selectedFile" class="file-preview">
           <div class="preview-header">
             <h2>{{ selectedFile.title }}</h2>
@@ -79,6 +94,7 @@
 import { ref, onMounted } from 'vue';
 import axios from 'axios';
 import { ElMessage } from 'element-plus';
+import { Expand } from '@element-plus/icons-vue';
 import MarkdownEditor from './MarkdownEditor.vue';
 import VMdPreview from '@kangc/v-md-editor/lib/preview';
 import '@kangc/v-md-editor/lib/style/preview.css';
@@ -90,10 +106,11 @@ VMdPreview.use(githubTheme);
 export default {
   components: {
     MarkdownEditor,
-    [VMdPreview.name]: VMdPreview
+    [VMdPreview.name]: VMdPreview,
+    Expand
   },
   setup() {
-    const API_BASE_URL = 'http://localhost:8083';
+    const API_BASE_URL = 'http://localhost:8084';
     const markdownFiles = ref([]);
     const groupings = ref([]);
     const groupFiles = ref({});
@@ -128,6 +145,11 @@ export default {
       }
     };
     
+    // 选择文件预览
+    const selectFile = (file) => {
+      selectedFile.value = file;
+    };
+    
     // 编辑笔记
     const editNote = (file) => {
       currentFileId.value = file.id;
@@ -154,7 +176,7 @@ export default {
         const fileId = index.split('-')[1];
         const file = markdownFiles.value.find(f => f.id == fileId);
         if (file) {
-          selectedFile.value = file;
+          selectFile(file);
         }
       }
     };
@@ -203,6 +225,7 @@ export default {
       currentFileId,
       selectedFile,
       isCollapsed,
+      selectFile,
       editNote,
       deleteNote,
       handleMarkdownUpload,
@@ -242,6 +265,35 @@ export default {
   margin-left: 10px;
 }
 
+.file-list {
+  margin-top: 20px;
+}
+
+.group-section {
+  margin-bottom: 20px;
+}
+
+.group-section h3 {
+  margin-bottom: 10px;
+  font-size: 18px;
+  color: #333;
+}
+
+.group-section ul {
+  list-style: none;
+  padding: 0;
+}
+
+.group-section li {
+  padding: 8px 0;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+}
+
+.group-section li:hover {
+  background-color: #f5f7fa;
+}
+
 .file-preview {
   padding: 20px;
   border: 1px solid #ebeef5;
@@ -263,4 +315,15 @@ export default {
   border-radius: 4px;
   background: #fff;
 }
+
+/* 修复菜单折叠样式 */
+.el-menu-vertical-demo {
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+}
+.sidebar-header {
+  height: 60px;
+  display: flex;
+  align-items: center;
+}
 </style>