# 移动端高保真原型

## 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图的形式呈现，旨在清晰地传达移动端的设计思路。