feat(biji-qianduan): 优化移动端适配并添加相关功能

- 新增移动端样式文件，优化小屏幕布局和交互- 在 HomePage 组件中添加移动端导航栏和搜索功能
- 修改 App.vue 以适应移动端布局- 更新 package.json 中的依赖版本
- 新增移动优先设计文档

biji-qianduan/src/components/HomePage.vue

@@ -1,13 +1,13 @@
 <template>
-  <el-container class="home-page">
+  <el-container class="home-page" :class="{'is-mobile': isMobile}">
     <!-- 左侧菜单区域 -->
-    <el-aside :width="isCollapsed ? '64px' : '250px'" class="sidebar">
+    <el-aside class="sidebar" :class="{'is-collapsed': isCollapsed}">
       <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>
           <el-icon><Plus /></el-icon>
         </el-button>
-        <el-button @click="isCollapsed = !isCollapsed" type="primary" size="small" circle>
+        <el-button @click="isCollapsed = !isCollapsed" type="primary" size="small" circle v-if="!isMobile">
           <el-icon>
             <Fold v-if="!isCollapsed" />
             <Expand v-else />
@@ -76,7 +76,8 @@
         </div>
 
         <div v-else>
-          <el-header class="header">
+          <!-- Desktop Header -->
+          <el-header class="header" v-if="!isMobile">
             <h1 @click="resetToHomeView" style="cursor: pointer; flex-grow: 1;">我的笔记</h1>
             <div class="actions">
               <el-input
@@ -114,6 +115,33 @@
             </div>
           </el-header>
 
+          <!-- Mobile Header -->
+          <el-header class="header mobile-header" v-if="isMobile">
+            <el-button @click="isCollapsed = !isCollapsed" text circle class="mobile-menu-toggle">
+              <el-icon size="24"><Menu /></el-icon>
+            </el-button>
+            <h1 class="mobile-title">我的笔记</h1>
+            <el-button text circle class="mobile-search-toggle" @click="handleSearch">
+              <el-icon size="22"><Search /></el-icon>
+            </el-button>
+          </el-header>
+
+          <!-- Mobile Search Bar -->
+          <div v-if="isMobile" class="mobile-search-container">
+            <el-input
+                v-model="searchKeyword"
+                placeholder="搜索笔记标题"
+                class="search-input"
+                @keyup.enter="handleSearch"
+            >
+              <template #append>
+                <el-button @click="handleSearch">
+                  <el-icon><Search /></el-icon>
+                </el-button>
+              </template>
+            </el-input>
+          </div>
+
           <div v-if="groupMarkdownFiles.length > 0" class="file-list">
             <el-card v-for="file in groupMarkdownFiles" :key="file.id" shadow="hover" class="file-item" :class="{ 'private-note': file.isPrivate === 1 }">
               <div @click="previewFile(file)" class="file-title">
@@ -280,11 +308,12 @@
         </el-dialog>
       </el-main>
     </el-container>
+    <div v-if="isMobile && !isCollapsed" class="sidebar-overlay" @click="isCollapsed = true"></div>
   </el-container>
 </template>
 
 <script setup>
-import {onMounted, ref, nextTick, watch, h, computed} from 'vue';
+import {onMounted, ref, nextTick, watch, h, computed, onBeforeUnmount} from 'vue';
 import {ElMessage, ElSubMenu, ElMenuItem, ElIcon, ElMessageBox, ElTooltip} from 'element-plus';
 import Vditor from 'vditor';
 import 'vditor/dist/index.css';
@@ -306,7 +335,7 @@ import {
   generateRegistrationCode,
   updatePassword
 } from '@/api/CommonApi.js'
-import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled } from "@element-plus/icons-vue";
+import { Plus, Fold, Expand, Folder, Document, Search, Edit, Delete, ArrowDown, Clock, Lock, InfoFilled, Menu } from "@element-plus/icons-vue";
 import { useUserStore } from '../stores/user';
 import { useRouter } from 'vue-router';
 import { privateNoteContent } from '../utils/privateNoteContent.js';
@@ -390,6 +419,15 @@ let debounceTimer = null;
 
 const categoryCascaderOptions = computed(() => categoryTree.value);
 
+const isMobile = ref(window.innerWidth < 768);
+
+const handleResize = () => {
+  isMobile.value = window.innerWidth < 768;
+  if (isMobile.value) {
+    isCollapsed.value = true;
+  }
+};
+
 const initVditor = () => {
   vditor.value = new Vditor('vditor', {
     height: 'calc(100vh - 120px)',