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

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

biji-qianduan/src/App.vue

@@ -1,5 +1,3 @@
-
-
 <template>
   <div id="app">
     <router-view></router-view>
@@ -64,4 +62,4 @@ watchEffect(() => {
 .theme-switcher:active {
   transform: scale(0.95);
 }
-</style>
+</style>

biji-qianduan/src/assets/styles/mobile.css

@@ -0,0 +1,124 @@
+/* 移动端适配样式 */
+
+/* 当屏幕宽度小于768px时应用以下样式 */
+@media (max-width: 768px) {
+  /* 首页布局调整 */
+  .home-page.is-mobile .sidebar {
+    position: absolute;
+    z-index: 1001;
+    transition: transform 0.3s ease;
+    height: 100%;
+    transform: translateX(-100%);
+    background-color: #fff; /* 确保侧边栏有背景色 */
+  }
+
+  .home-page.is-mobile .sidebar:not(.is-collapsed) {
+    transform: translateX(0);
+  }
+
+  .home-page.is-mobile .content {
+    padding: 8px;
+  }
+
+  .sidebar-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+  }
+
+  .mobile-menu-toggle {
+    margin-right: 10px;
+  }
+
+  .header .actions, .preview-header .actions {
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  
+  .preview-header .actions .el-button {
+    margin-left: 0 !important;
+  }
+
+  .mobile-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 10px;
+  }
+
+  .mobile-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--text-color);
+  }
+  
+  .mobile-search-container {
+    padding: 0 10px 10px;
+    background-color: #fff;
+  }
+
+  .dark-theme .mobile-search-container {
+     background-color: var(--bg-color);
+  }
+
+  .search-input {
+    width: 100%; /* Make search full width on mobile */
+  }
+
+  .file-list {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .file-item {
+    margin-bottom: 0;
+  }
+
+  .el-dialog {
+    width: 95% !important;
+    max-width: 400px;
+  }
+
+  /* 登录和注册页面 */
+  .login-card, .register-card {
+    width: 90%;
+    padding: 2rem 1.5rem;
+  }
+
+  .login-card .card-header h2 {
+    font-size: 1.5rem;
+  }
+
+  .login-card .button-group, .register-card .button-group {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .register-card .card-header h2 {
+    font-size: 1.5rem;
+  }
+
+  /* 回收站页面 */
+  .el-table {
+    display: none; /* 在小屏幕上隐藏表格 */
+  }
+
+  .trash-cards {
+    display: block; /* 显示卡片布局 */
+  }
+
+  .trash-card {
+    margin-bottom: 15px;
+  }
+}
+
+/* 针对回收站的卡片式布局 (默认隐藏) */
+.trash-cards {
+  display: none;
+}

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)',

biji-qianduan/src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import './assets/styles/global.css'
+import './assets/styles/mobile.css'
 import App from './App.vue'
 import router from './router/'
 import ElementPlus from 'element-plus'