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

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

doc/mobile_prototype.md

@@ -0,0 +1,128 @@
+# 移动端高保真原型
+
+## 1. 设计原则
+
+- **简洁至上**: 界面元素保持简洁，避免不必要的装饰，让用户专注于内容。
+- **移动优先**: 所有设计首先考虑在小屏幕上的呈现效果和操作体验。
+- **色彩协调**: 采用柔和且具有科技感的色彩方案，并提供完整的暗黑模式支持。
+- **交互流畅**: 通过精细的动效和即时反馈，提升用户操作的流畅感和满足感。
+
+## 2. 色彩与字体
+
+- **主色调**: `#4A90E2` (科技蓝)
+- **辅助色**: `#F5F7FA` (背景灰), `#FFFFFF` (白色), `#FF4D4F` (危险红), `#52C41A` (成功绿)
+- **字体**: Inter (无衬线字体)
+
+## 3. 原型设计
+
+### 页面一：主页 (笔记列表)
+
+```mermaid
+graph TD
+    subgraph 手机屏幕
+        direction TB
+        subgraph 顶部导航栏
+            A[笔记]
+        end
+        subgraph 内容区域
+            B[搜索框]
+            C[笔记卡片1]
+            D[笔记卡片2]
+            E[...]
+        end
+        subgraph 悬浮操作按钮
+            F[+]
+        end
+        subgraph 底部导航栏
+            G[笔记] -- active --> G
+            H[搜索]
+            I[我的]
+        end
+    end
+
+    style A fill:#4A90E2,stroke:#333,stroke-width:2px,color:#fff
+    style F fill:#52C41A,stroke:#333,stroke-width:2px,color:#fff,border-radius:50%
+    style G fill:#4A90E2,stroke:#333,stroke-width:2px,color:#fff
+```
+
+- **描述**:
+  - **顶部**: 显示当前页面标题“笔记”。
+  - **内容**:
+    - 一个固定的搜索框，方便用户快速查找笔记。
+    - 笔记以卡片形式垂直排列，每张卡片显示标题、摘要和所属分类。
+    - 支持下拉刷新和上拉加载更多。
+  - **悬浮按钮 (FAB)**: 右下角的“+”按钮，用于快速创建新笔记。
+  - **底部导航**:
+    - **笔记**: 当前激活的Tab。
+    - **搜索**: 跳转到专门的搜索页面。
+    - **我的**: 跳转到用户中心页面。
+
+### 页面二：笔记详情/编辑页
+
+```mermaid
+graph TD
+    subgraph 手机屏幕
+        direction TB
+        subgraph 顶部导航栏
+            J[返回]
+            K[笔记标题]
+            L[保存]
+            M[...]
+        end
+        subgraph 内容区域
+            N[Markdown渲染视图 / Vditor编辑器]
+        end
+    end
+```
+
+- **描述**:
+  - **顶部**:
+    - 左侧为“返回”按钮。
+    - 中间显示笔记标题。
+    - 右侧在查看模式下显示“编辑”和“更多”操作（如删除、移动）；在编辑模式下显示“保存”。
+  - **内容**:
+    - 查看模式下，渲染Markdown内容。
+    - 编辑模式下，加载Vditor编辑器，并将常用编辑工具栏固定在键盘上方。
+
+### 页面三：“我的”页面
+
+```mermaid
+graph TD
+    subgraph 手机屏幕
+        direction TB
+        subgraph 用户信息
+            O[头像]
+            P[用户名]
+        end
+        subgraph 菜单列表
+            Q[笔记分类]
+            R[回收站]
+            S[系统管理]
+            T[修改密码]
+            U[退出登录]
+        end
+        subgraph 底部导航栏
+            V[笔记]
+            W[搜索]
+            X[我的] -- active --> X
+        end
+    end
+```
+
+- **描述**:
+  - **顶部**: 显示用户头像和用户名。
+  - **菜单**:
+    - **笔记分类**: 点击后以下钻（Drilldown）或弹窗形式展示分类树，方便用户按分类筛选笔记。
+    - **回收站**: 跳转到回收站页面。
+    - **系统管理**: 仅管理员可见，用于管理注册设置。
+    - **修改密码/退出登录**: 用户账户操作。
+
+## 4. 交互动画
+
+- **页面切换**: 使用平滑的左右滑动效果。
+- **FAB点击**: 按钮轻微放大并伴有涟漪效果。
+- **加载**: 使用骨架屏（Skeleton Screen）作为内容区域的占位符，提升加载体验。
+
+---
+
+这份高保真原型以Markdown和Mermaid图的形式呈现，旨在清晰地传达移动端的设计思路。