simple-memo/docs/project_plan.md

# 简记 Memo - 项目重构规划文档

> 本文档面向前后端开发人员，统一规划「复盘、心情、待办、账单」四大核心模块的业务功能、接口定义与 UI 设计规范。
> 版本：v2.0  
> 日期：2026-07-28

---

## 一、项目概述与现状分析

### 1.1 产品定位
「简记 Memo」是一款轻量级个人生活记录小程序，聚焦每日四大维度：**待办事项、账单收支、心情记录、每日复盘**。通过 AI 智能识别降低记录门槛，结合成长激励体系提升用户粘性。

### 1.2 现有架构问题

| 问题类别 | 具体表现 | 影响 |
|---------|---------|------|
| **数据层** | 复盘模块仅使用本地 `uni.setStorageSync`，未接入后端 | 数据无法跨设备同步，易丢失 |
| **接口层** | 首页需并发调用 3+ 接口获取当日数据 | 加载慢、代码冗余 |
| **UI 层** | 四个核心页面头部、卡片、按钮、弹窗样式均不统一 | 体验割裂，维护成本高 |
| **交互层** | 日历组件在首页/复盘/待办中重复实现 | 代码冗余，行为不一致 |
| **交互层** | 列表滑动操作在待办和账单中实现方式不同 | 用户学习成本高 |

### 1.3 重构目标
1. **数据统一**：复盘模块全面接入后端，四模块数据全部云端同步
2. **接口聚合**：提供首页聚合接口，减少请求次数
3. **UI 统一**：制定设计规范，四模块页面风格、布局、交互高度一致
4. **组件复用**：抽取公共组件（日历、列表项、筛选器、模态框、空状态）
5. **操作丝滑**：统一动画曲线、过渡时长、触摸反馈

---

## 二、四大模块业务功能定义

### 2.1 模块总览

```
┌─────────────────────────────────────────────────────────────┐
│                        首页 (Dashboard)                       │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐            │
│  │  待办   │ │  账单   │ │  心情   │ │  复盘   │   快捷入口   │
│  │  3/5   │ │ +120   │ │  😊    │ │  已记录 │            │
│  └─────────┘ └─────────┘ └─────────┘ └─────────┘            │
│  ─────────────────────────────────────────────────────────  │
│  AI 智能输入框："开会花了50块，下午要写周报，心情不错"           │
│  ─────────────────────────────────────────────────────────  │
│  今日概览：完成进度环 + 最近待办 + 最近账单                    │
└─────────────────────────────────────────────────────────────┘
                              │
        ┌─────────┬─────────┼─────────┬─────────┐
        ▼         ▼         ▼         ▼         ▼
    ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐  ┌──────┐
    │ 待办 │  │ 心情 │  │ 账单 │  │ 复盘 │  │ 我的 │
    │ 列表 │  │ 记录 │  │ 明细 │  │ 编辑 │  │ 中心 │
    └──────┘  └──────┘  └──────┘  └──────┘  └──────┘
```

### 2.2 待办模块（Todo）

**核心功能**：
- 按日期创建、编辑、删除待办事项
- 支持优先级（高/中/低）、分类（工作/生活/学习）、时间段设置
- 支持批量选择与批量操作（完成/删除）
- 按时间范围筛选（今日/本周/本月/自定义）
- 按状态筛选（全部/待办/已完成）
- 日历视图展示任务分布（有无任务、完成状态标记）
- 关键词搜索

**新增功能规划**：
- 待办重复规则（每日/每周/每月重复）
- 待办提醒推送（依赖服务端定时任务）

### 2.3 心情模块（Mood）

**核心功能**：
- 每日选择心情 emoji（20 种表情）
- 文字记录当日心情与感悟（200 字以内）
- AI 心语小笺：根据心情生成治愈文案并生成分享卡片
- 心情日历：按月查看心情分布（已有 `moodCalendar` 页面）

**新增功能规划**：
- 心情周报/月报统计（情绪趋势曲线 + 高频心情标签）
- 心情标签词云

### 2.4 账单模块（Bill）

**核心功能**：
- 记录支出/收入账单（金额、分类、渠道、备注、日期）
- 分类管理（预设 23 个分类 + 自定义分类）
- 月度预算设置与进度追踪
- 多维度筛选（时间：今日/本周/本月/上月/本年/自定义；类型：全部/支出/收入）
- 分类统计（支出/收入占比、横向滚动卡片）
- 账单导出

**新增功能规划**：
- 年度收支趋势图
- 自定义分类支持图标与颜色完整自定义

### 2.5 复盘模块（Review）

**核心功能**：
- 按日期进行每日复盘
- 采用 **KPT 复盘法**：Keep（保持）、Problem（问题）、Try（尝试）
- 复盘历史列表查看
- 复盘内容搜索

> **设计决策**：仅保留 KPT 一种复盘方法。理由：KPT 更简洁实用，3 个维度覆盖日常复盘需求，填写门槛低，适合小程序场景。GRAI 法（4 维度）更适合企业级项目复盘，个人日记场景偏重。

**重要改造点**：
- 当前复盘数据仅保存在本地 Storage，**已全面接入后端接口**
- 新增复盘历史列表页
- API 响应兼容嵌套格式 `{kpt: {keep, problem, try}}` 和扁平格式 `{keep, problem, try}`

---

## 三、接口文档

### 3.1 接口设计原则
1. 统一请求方式：`POST`
2. 统一响应格式：
```json
{
  "code": 200,
  "message": "success",
  "data": { ... }
}
```
3. 日期格式：`YYYY-MM-DD`
4. 月份格式：`YYYY-MM`

### 3.2 现有接口保留清单

以下接口已稳定运行，本次规划**完全保留**，仅做部分参数优化建议：

#### 用户模块
| 接口 | 路径 | 说明 |
|-----|------|------|
| 微信登录 | `POST /user/login` | 保留 |
| 获取用户信息 | `POST /user/info` | 保留 |
| 更新用户信息 | `POST /user/edit` | 保留 |
| 退出登录 | `POST /user/logout` | 保留 |
| 获取用户配置 | `POST /user/config/info` | 保留 |
| 编辑用户配置 | `POST /user/config/edit` | 保留 |
| 获取头像列表 | `POST /user/avatar/list` | 保留 |

#### 待办模块
| 接口 | 路径 | 说明 |
|-----|------|------|
| 添加待办 | `POST /todo/add` | 保留 |
| 获取待办列表 | `POST /todo/list` | 保留，建议支持 `start_date` + `end_date` 范围查询 |
| 删除待办 | `POST /todo/delete` | 保留 |
| 完成/取消完成 | `POST /todo/done` | 保留 |
| 编辑待办 | `POST /todo/edit` | 保留 |

#### 账单模块
| 接口 | 路径 | 说明 |
|-----|------|------|
| 添加账单 | `POST /bill/add` | 保留 |
| 编辑账单 | `POST /bill/edit` | 保留 |
| 获取账单列表 | `POST /bill/list` | 保留，建议支持 `start_time` + `end_time` |
| 删除账单 | `POST /bill/delete` | 保留 |
| 获取月度统计 | `POST /bill/stat/month` | 保留 |
| 获取分类统计 | `POST /bill/stat/category` | 保留 |
| 导出账单 | `POST /bill/export` | 保留 |

#### 预算模块
| 接口 | 路径 | 说明 |
|-----|------|------|
| 获取月度预算 | `POST /budget/get` | 保留 |
| 设置月度预算 | `POST /budget/set` | 保留 |
| 删除月度预算 | `POST /budget/delete` | 保留 |

#### 分类管理模块
| 接口 | 路径 | 说明 |
|-----|------|------|
| 获取自定义分类 | `POST /category/list` | 保留 |
| 添加自定义分类 | `POST /category/add` | 保留 |
| 删除自定义分类 | `POST /category/delete` | 保留 |

#### 心情模块
| 接口 | 路径 | 说明 |
|-----|------|------|
| 获取某天心情 | `POST /mood/get` | 保留 |
| 保存心情 | `POST /mood/save` | 保留 |
| 获取心情列表 | `POST /mood/list` | 保留 |
| 删除心情 | `POST /mood/delete` | 保留 |
| 获取 AI 心情结果 | `POST /ai/mood/result` | 保留 |
| 重新生成 AI 心情 | `POST /ai/mood/regenerate` | 保留 |

#### 成长系统模块
| 接口 | 路径 | 说明 |
|-----|------|------|
| 获取成长信息 | `POST /growth/info` | 保留 |
| 获取成就列表 | `POST /growth/achievements` | 保留 |
| 获取成长规则 | `POST /growth/rules` | 保留 |

#### AI 模块
| 接口 | 路径 | 说明 |
|-----|------|------|
| AI 智能分类 | `POST /ai/classify` | 保留 |

#### 邮箱/安全模块
| 接口 | 路径 | 说明 |
|-----|------|------|
| 获取图形验证码 | `POST /captcha/digit` | 保留 |
| 发送邮箱验证码 | `POST /user/email/code` | 保留 |
| 设置/修改邮箱 | `POST /user/email/set` | 保留 |
| 邮箱登录 | `POST /user/email/login` | 保留 |
| 注册 | `POST /user/register` | 保留 |
| 重置密码 | `POST /user/reset-password` | 保留 |
| 修改密码 | `POST /user/change-password` | 保留 |
| 检查邮箱存在 | `POST /user/email/exists` | 保留 |
| 绑定微信 | `POST /user/bind-wechat` | 保留 |
| 检查微信绑定 | `POST /user/check-wechat` | 保留 |

---

### 3.3 复盘模块接口（已全面接入后端）

复盘模块已从本地 `uni.setStorageSync` 迁移至后端接口。前端同时兼容嵌套格式和扁平格式的响应数据。

#### 3.3.1 保存复盘
```http
POST /review/save
```
**请求参数**：
| 字段 | 类型 | 必填 | 说明 |
|-----|------|------|------|
| date | string | 是 | 日期 YYYY-MM-DD |
| method | string | 是 | 复盘方法：固定为 `kpt` |
| kpt | object | 是 | KPT 数据 |
| kpt.keep | string | 否 | 保持 |
| kpt.problem | string | 否 | 问题 |
| kpt.try | string | 否 | 尝试 |

> 注：GRAI 法已移除，method 固定传 `kpt`。后端保留 `grai` 字段兼容历史数据。

**响应数据**：
```json
{
  "id": "review_123",
  "date": "2026-07-28",
  "method": "kpt",
  "kpt": {
    "keep": "今天按时完成了所有待办",
    "problem": "下午注意力不集中",
    "try": "明天尝试番茄工作法"
  },
  "created_at": "2026-07-28T22:00:00Z",
  "updated_at": "2026-07-28T22:00:00Z"
}
```

> **兼容说明**：前端同时支持后端返回嵌套格式 `{kpt: {keep, problem, try}}` 和扁平格式 `{keep, problem, try}`，确保接口对接顺畅。

#### 3.3.2 获取单日复盘
```http
POST /review/get
```
**请求参数**：
| 字段 | 类型 | 必填 | 说明 |
|-----|------|------|------|
| date | string | 是 | 日期 YYYY-MM-DD |

**响应数据**：同保存复盘响应，无数据时返回 `null`

#### 3.3.3 获取复盘列表
```http
POST /review/list
```
**请求参数**：
| 字段 | 类型 | 必填 | 说明 |
|-----|------|------|------|
| startDate | string | 否 | 开始日期 YYYY-MM-DD |
| endDate | string | 否 | 结束日期 YYYY-MM-DD |
| method | string | 否 | 筛选方法：`kpt`（历史可能含 `grai` 数据） |
| keyword | string | 否 | 搜索关键词（搜索 keep/problem/try/goal 等字段） |
| page | number | 否 | 页码，默认 1 |
| pageSize | number | 否 | 每页条数，默认 20 |

**响应数据**：
```json
{
  "list": [
    {
      "id": "review_123",
      "date": "2026-07-28",
      "method": "kpt",
      "summary": "今天按时完成了所有待办...",
      "created_at": "2026-07-28T22:00:00Z"
    }
  ],
  "total": 100,
  "page": 1,
  "pageSize": 20
}
```

#### 3.3.4 删除复盘
```http
POST /review/delete
```
**请求参数**：
| 字段 | 类型 | 必填 | 说明 |
|-----|------|------|------|
| id | string | 是 | 复盘 ID |

---

### 3.4 新增接口

#### 3.4.1 首页聚合数据接口（推荐优先实现）

**目的**：替代首页并发请求 `getTodoList` + `getBillList` + `getMoodByDate`，一接口返回当日全部概况。

```http
POST /dashboard/daily
```

**请求参数**：
| 字段 | 类型 | 必填 | 说明 |
|-----|------|------|------|
| date | string | 是 | 日期 YYYY-MM-DD，不传默认今天 |

**响应数据**：
```json
{
  "date": "2026-07-28",
  "todo": {
    "total": 5,
    "done": 3,
    "undone": 2,
    "list": [
      { "id": "1", "title": "写周报", "done": 0, "priority": 1, "category": "work" }
    ]
  },
  "bill": {
    "expend": 128.5,
    "income": 0,
    "balance": -128.5,
    "list": [
      { "id": "1", "type": 1, "money": 28.5, "cate": "food", "note": "午餐" }
    ]
  },
  "mood": {
    "recorded": true,
    "emoji": "😊",
    "content": "今天心情不错，工作顺利",
    "ai_generated": true,
    "ai_text": "阳光正好，微风不燥..."
  },
  "review": {
    "recorded": true,
    "method": "kpt"
  },
  "growth": {
    "todayExp": 45,
    "maxDailyExp": 120,
    "streakDays": 7
  }
}
```

#### 3.4.2 待办统计接口

```http
POST /todo/stat
```

**请求参数**：
| 字段 | 类型 | 必填 | 说明 |
|-----|------|------|------|
| start_date | string | 是 | 开始日期 |
| end_date | string | 是 | 结束日期 |

**响应数据**：
```json
{
  "total": 50,
  "done": 42,
  "undone": 8,
  "completion_rate": 84.0,
  "by_category": {
    "work": { "total": 20, "done": 18 },
    "life": { "total": 20, "done": 16 },
    "study": { "total": 10, "done": 8 }
  },
  "by_priority": {
    "1": { "total": 10, "done": 9 },
    "2": { "total": 25, "done": 21 },
    "3": { "total": 15, "done": 12 }
  }
}
```

#### 3.4.3 心情统计接口

```http
POST /mood/stat
```

**请求参数**：
| 字段 | 类型 | 必填 | 说明 |
|-----|------|------|------|
| month | string | 是 | 月份 YYYY-MM |

**响应数据**：
```json
{
  "month": "2026-07",
  "total_days": 28,
  "recorded_days": 25,
  "mood_distribution": {
    "😊": 10,
    "😌": 8,
    "😔": 4,
    "😤": 2,
    "😴": 1
  },
  "weekly_trend": [
    { "week": "W1", "avg_score": 4.2 },
    { "week": "W2", "avg_score": 3.8 },
    { "week": "W3", "avg_score": 4.5 },
    { "week": "W4", "avg_score": 4.0 }
  ],
  "top_phrases": ["开心", "平静", "工作顺利"]
}
```

#### 3.4.4 账单聚合统计接口（整合现有接口）

**目的**：将 `getMonthStat` + `getCateStat` 整合为一个更灵活的统计接口。

```http
POST /bill/stat/aggregate
```

**请求参数**：
| 字段 | 类型 | 必填 | 说明 |
|-----|------|------|------|
| start_date | string | 是 | 开始日期 |
| end_date | string | 是 | 结束日期 |
| type | number | 否 | 类型筛选 1-支出 2-收入，不传则全部 |

**响应数据**：
```json
{
  "total_expend": 3250.5,
  "total_income": 8000.0,
  "balance": 4749.5,
  "budget": {
    "amount": 5000,
    "used": 3250.5,
    "remaining": 1749.5,
    "progress": 65.0
  },
  "by_category": [
    {
      "cate": "food",
      "label": "餐饮",
      "icon": "🍚",
      "color": "#ff6b6b",
      "expend": 1200,
      "income": 0,
      "expend_rate": 36.9,
      "income_rate": 0
    }
  ],
  "by_channel": [
    { "channel": "wechat", "label": "微信", "amount": 2000 }
  ],
  "daily_trend": [
    { "date": "2026-07-01", "expend": 100, "income": 0 },
    { "date": "2026-07-02", "expend": 50, "income": 8000 }
  ]
}
```

---

### 3.5 接口整合与废弃建议

| 现有接口 | 建议 | 说明 |
|---------|------|------|
| `POST /bill/stat/month` | **保留但标记为兼容** | 建议前端逐步迁移到 `/bill/stat/aggregate` |
| `POST /bill/stat/category` | **保留但标记为兼容** | 同上 |
| `POST /review/save` | **修复接入** | 后端需确保接口可用，前端需替换本地存储逻辑 |
| `POST /review/get` | **修复接入** | 同上 |
| `POST /review/list` | **修复接入** | 同上，前端需新增复盘列表页 |
| `POST /review/delete` | **修复接入** | 同上 |

---

## 四、统一 UI 设计规范

### 4.1 设计原则

1. **温暖自然**：沿用现有暖陶/抹茶/暮蓝等主题色系，保持低饱和度、手作感
2. **统一间距**：建立 4rpx 基栅格，所有间距为 4 的倍数
3. **统一圆角**：卡片 20rpx，按钮 14rpx，标签 12rpx，头像/图标 16rpx
4. **统一阴影**：仅卡片使用阴影 `0 8rpx 24rpx ${shadowLight}`，避免过度层级
5. **操作反馈**：所有可点击元素添加 `:active` 态，缩放 0.96-0.98，过渡 0.2s

### 4.2 页面布局骨架（四模块统一）

所有核心模块页面采用统一的 **三段式布局**：

```
┌─────────────────────────────────────┐
│  Page Header (固定高度 ~120rpx)      │
│  ┌──────┬──────────────┬────────┐   │
│  │ 返回 │   标题+日期   │ 操作Btn │   │
│  └──────┴──────────────┴────────┘   │
├─────────────────────────────────────┤
│  Filter Bar (可选，固定或吸顶)        │
│  [全部][今日][本周][本月] ...        │
├─────────────────────────────────────┤
│                                     │
│  Main Content (scroll-view)          │
│  ┌─────────────────────────────┐    │
│  │      Stat Cards 统计卡片      │    │
│  └─────────────────────────────┘    │
│  ┌─────────────────────────────┐    │
│  │      Content List / Form     │    │
│  └─────────────────────────────┘    │
│                                     │
├─────────────────────────────────────┤
│  Footer Action (固定底部)            │
│  ┌─────────────────────────────┐    │
│  │     [  保存 / 添加 / 提交  ]   │    │
│  └─────────────────────────────┘    │
└─────────────────────────────────────┘
```

### 4.3 色彩规范（基于现有主题系统）

沿用 `utils/theme.js` 中的 `THEME_PRESETS`，确保所有页面 100% 使用 `themeConfig` 绑定，禁止硬编码颜色。

| 用途 | 主题变量 | 默认值（暖陶） |
|-----|---------|--------------|
| 页面背景 | `themeConfig.bgColor` | `#FAF6F0` |
| 卡片背景 | `themeConfig.cardBgColor` | `#FFFCF8` |
| 主文本 | `themeConfig.textPrimary` | `#3D3630` |
| 次要文本 | `themeConfig.textSecondary` | `#7A7066` |
| 禁用文本 | `themeConfig.textDisabled` | `#B0A89E` |
| 主题色 | `themeConfig.primaryColor` | `#C68E3F` |
| 辅助色 | `themeConfig.secondaryColor` | `#4A9E7F` |
| 成功/收入 | `themeConfig.successColor` | `#5B9E6E` |
| 危险/支出 | `themeConfig.dangerColor` | `#C75B4A` |
| 警告 | `themeConfig.warningColor` | `#D4A24A` |
| 边框 | `themeConfig.borderColor` | `#E8E2DA` |
| 轻边框 | `themeConfig.borderLight` | `#F2EDE6` |
| 渐变按钮 | `themeConfig.gradientSoft` | `linear-gradient(135deg, #C68E3F, #D4AA60)` |
| 阴影轻 | `themeConfig.shadowLight` | `rgba(61,54,48,0.04)` |

### 4.4 字体规范

| 元素 | 字号 | 字重 | 行高 |
|-----|------|------|------|
| 页面大标题 | 36rpx | 700 | 1.2 |
| 页面副标题/日期 | 24rpx | 500 | 1.4 |
| 卡片标题 | 30rpx | 700 | 1.3 |
| 正文内容 | 28rpx | 400 | 1.6 |
| 标签/辅助文字 | 22rpx | 500 | 1.4 |
| 金额数字 | 34rpx | 700 | 1.0 |
| 按钮文字 | 32rpx | 600 | 1.0 |

### 4.5 公共组件规范

#### 4.5.1 页面头部（PageHeader）

```vue
<!-- 统一组件 props -->
<PageHeader
  title="待办清单"
  subtitle="高效规划每一天"
  :showBack="true"
  :date="currentDate"
  @dateChange="onDateChange"
>
  <template #right>
    <view class="header-btn" @click="toggleBatch">
      <FaIcon icon="bars" />
    </view>
  </template>
</PageHeader>
```

**样式规范**：
- 高度：自适应，内边距 `24rpx 36rpx`
- 顶部安全区：`padding-top: calc(24rpx + env(safe-area-inset-top))`
- 标题字号：36rpx，700
- 副标题字号：24rpx，500
- 右侧按钮：68rpx × 68rpx，圆角 20rpx，背景 `cardBgColor`
- 按钮点击态：`transform: scale(0.93); transition: all 0.25s ease`

#### 4.5.2 统一卡片（AppCard）

```vue
<AppCard :padding="24" :radius="20">
  <!-- 内容 -->
</AppCard>
```

**样式规范**：
- 背景：`themeConfig.cardBgColor`
- 圆角：20rpx
- 内边距：24rpx（可根据内容调整 20-32rpx）
- 阴影：`0 8rpx 24rpx ${themeConfig.shadowLight}`
- 边框：2rpx solid transparent（仅作为占位，实际靠阴影区分层级）

#### 4.5.3 统一按钮

**主按钮（底部固定）**：
- 宽度：100%（减去左右边距）
- 高度：108rpx
- 圆角：100rpx（全圆角胶囊）
- 背景：`themeConfig.gradientVibrant`
- 文字：32rpx，#fff，600
- 阴影：`0 12rpx 36rpx ${themeConfig.shadowColor}`
- 禁用态：`opacity: 0.5; pointer-events: none`

**次要按钮（模态框内）**：
- 高度：88rpx-96rpx
- 圆角：14rpx
- 取消按钮：背景 `rgba(0,0,0,0.05)`，文字 `textSecondary`
- 确认按钮：背景 `gradientSoft`，文字 #fff

**胶囊筛选标签**：
- 内边距：10rpx 24rpx
- 圆角：22rpx
- 默认态：背景 `borderColor`，文字 `textSecondary`
- 激活态：背景 `primaryColor`，文字 #fff
- 过渡：`all 0.25s ease`

#### 4.5.4 统一模态框（BottomSheet / CenterModal）

**底部弹出（用于新增/编辑）**：
- 宽度：100%
- 圆角：顶部 24rpx
- 背景：`cardBgColor`
- 动画：`slideUp 0.3s ease`
- 最大高度：85vh
- 底部安全区：`padding-bottom: calc(24rpx + env(safe-area-inset-bottom))`

**居中弹窗（用于确认/设置）**：
- 宽度：600rpx
- 圆角：20rpx
- 背景：`cardBgColor`
- 动画：`popUp 0.25s ease`

#### 4.5.5 统一日历组件（InlineCalendar）

当前首页、复盘页各自实现了一套日历。**必须抽取为统一组件**。

**组件能力**：
- 月份切换（上一月/下一月）
- 日期选择回调
- 标记日期（传入有数据的日期数组）
- 今日高亮
- 选中态高亮（背景 `gradientSoft`，文字 #fff）

**样式规范**：
- 背景：`cardBgColor`
- 圆角：20rpx
- 内边距：24rpx
- 星期标题：20rpx，600，`textSecondary`
- 日期格子：72rpx × 72rpx，圆角 10rpx
- 非当月日期：`opacity: 0.25`
- 数据标记点：8rpx 圆点，`primaryColor`

#### 4.5.6 统一列表项（SwipeableItem）

当前待办和账单的滑动删除/编辑逻辑各自实现，需统一。

**组件能力**：
- 左滑/右滑露出操作按钮
- 支持多个操作按钮（编辑、删除、完成）
- 点击主区域收起滑动菜单
- 同时只允许一项展开

**样式规范**：
- 滑动按钮宽度：80rpx/个
- 按钮高度：100%
- 编辑按钮：`primaryColor`
- 删除按钮：`dangerColor`
- 完成按钮：`successColor`
- 文字：24rpx，#fff
- 滑动过渡：`transform 0.3s ease`

#### 4.5.7 统一空状态（EmptyState）

当前已存在 `components/EmptyState.vue`，**所有列表页面强制使用**。

**规范**：
- 图标：48rpx emoji 或 FaIcon
- 标题：26rpx，600，`textSecondary`
- 描述：22rpx，`textDisabled`
- 操作按钮（可选）：主按钮样式 mini 版

---

## 五、各模块页面详细设计

### 5.1 首页（pages/index/index）

**定位**：今日 Dashboard，聚合展示 + AI 快速录入。

**布局调整**：
1. **顶部问候区**：保留现有头像 + 问候语 + 日期显示，统一样式
2. **AI 智能记录卡片**：
    - 优化为更明显的录入入口
    - 快捷标签横向滚动（替代当前换行）
    - 结果提示条动画优化
3. **快捷入口四宫格**：
    - 统一为 AppCard 样式
    - 图标背景色使用各模块主题色 + 15% 透明度
    - 待办显示 `待完成/总数`，账单显示 `今日收支`，心情显示 `今日emoji或未记录`，复盘显示 `已完成/未记录`
4. **今日概览卡片**：
    - 保留完成进度环
    - 增加「复盘状态」行：今日是否已复盘
    - 最近待办列表最多展示 3 条（当前 2 条）
    - 增加「最近账单」3 条预览（新增）

**数据加载优化**：
- 优先调用新增接口 `POST /dashboard/daily`
- 失败时降级为现有并发请求

---

### 5.2 待办模块（pages/todo/todo）

**定位**：任务管理中心，强调高效规划与批量操作。

**布局重构**：

```
┌─────────────────────────────────────┐
│  Header: 待办清单 / 高效规划每一天     │
│         [批量模式Btn]                │
├─────────────────────────────────────┤
│  SearchBar: 🔍 搜索待办               │
├─────────────────────────────────────┤
│  FilterRow1: [今日][本周][本月][自定义]│
│  FilterRow2: [全部][待办][已完成]      │
├─────────────────────────────────────┤
│  InlineCalendar（时间筛非今日时显示）  │
├─────────────────────────────────────┤
│  ListHeader: ● 任务列表        12项   │
├─────────────────────────────────────┤
│  ┌─────────────────────────────┐    │
│  │ ☐ 🔴 写周报        14:00    │    │
│  │    工作 · 今天               │    │
│  └─────────────────────────────┘    │
│  ┌─────────────────────────────┐    │
│  │ ☑ 🟡 买咖啡豆               │    │
│  │    生活 · 今天  [已完成]      │    │
│  └─────────────────────────────┘    │
├─────────────────────────────────────┤
│  EmptyState（无数据时）               │
├─────────────────────────────────────┤
│  [+] 悬浮添加按钮                     │
└─────────────────────────────────────┘
```

**样式统一**：
- 页面背景：`bgColor`
- 所有卡片使用 AppCard 规范
- 任务列表项使用 SwipeableItem 组件
- 优先级标识统一为圆形徽章（🔴🟡🟢 或 FaIcon），尺寸 40rpx
- 批量操作底部栏：固定底部，背景 `cardBgColor`，阴影 `shadowMedium`

**交互优化**：
- 任务完成动画：点击后 checkbox 缩放弹跳 `cubic-bezier(0.34, 1.56, 0.64, 1)`
- 新增/编辑弹窗统一为 BottomSheet，字段分区：标题 > 日期/优先级 > 时间段 > 分类 > 备注

---

### 5.3 心情模块（pages/mood/mood）

**定位**：情绪记录与治愈空间，强调温暖与仪式感。

**布局重构**：

```
┌─────────────────────────────────────┐
│  Header: 记录心情 / 7月28日         │
│         [心情日历Btn]                │
├─────────────────────────────────────┤
│  Hero区域：                           │
│  ┌─────────────────────────────┐    │
│  │    今天心情如何？             │    │
│  │    选择最贴合此刻感受的...      │    │
│  └─────────────────────────────┘    │
├─────────────────────────────────────┤
│  MoodSelector（5列网格）              │
│  😊  😌  😔  😤  😴                 │
│  😰  😄  🤔  😢  😎                 │
│  ...                                │
├─────────────────────────────────────┤
│  SelectedBanner（选中后展示）         │
│  ┌─────────────────────────────┐    │
│  │  😊  开心                    │    │
│  │      今天是开心的一天          │    │
│  └─────────────────────────────┘    │
├─────────────────────────────────────┤
│  InputCard: 想对自己说                │
│  ┌─────────────────────────────┐    │
│  │  记录此刻的心情与感悟...       │    │
│  │  ─────────── 0/200           │    │
│  └─────────────────────────────┘    │
├─────────────────────────────────────┤
│  QuickPhrases: 快捷短语流式布局        │
│  [今天很棒！] [工作很累] [加油呀] ...  │
├─────────────────────────────────────┤
│  [  发送心情  ✨  ]                   │
└─────────────────────────────────────┘
```

**样式统一**：
- 心情选项卡片：110rpx × 110rpx，圆形，背景 `cardBgColor`
- 选中态：缩放 1.15，背景 `primaryColor + 12%`，边框 `primaryColor`
- 过渡动画：`all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)`
- 文字输入区：AppCard 样式，内边距 28rpx
- 进度条：10rpx 高度，圆角 100rpx，背景 `borderLight`，填充 `gradientSoft`

**交互优化**：
- 心情选中后，banner 区域淡入上移
- 保存成功后触发 AI 生成，弹窗使用居中 Modal，展示加载/成功/失败状态
- AI 结果卡片支持「换一换」和「保存图片」

---

### 5.4 账单模块（pages/bill/bill）

**定位**：收支明细与财务概览，强调数据清晰与预算控制。

**布局重构**：

```
┌─────────────────────────────────────┐
│  Header: 记账 / 记录每一笔收支         │
│         [预算设置Btn]                │
├─────────────────────────────────────┤
│  SearchBar: 🔍 搜索备注/分类           │
├─────────────────────────────────────┤
│  FilterRow1: [全部][支出][收入]        │
│  FilterRow2: [今日][本周][本月][上月]..│
├─────────────────────────────────────┤
│  BudgetCard（本月/上月预算进度，可选）   │
│  本月预算 ¥5000    [========>--] 65% │
├─────────────────────────────────────┤
│  StatGrid（4宫格统计卡片）              │
│  ┌──────┐┌──────┐┌──────┐┌──────┐   │
│  │总支出 ││总收入 ││周期结余││累计结余│   │
│  │¥3250 ││¥8000 ││+¥4749││+¥4749│   │
│  └──────┘└──────┘└──────┘└──────┘   │
├─────────────────────────────────────┤
│  CateStat（分类统计）                  │
│  [餐饮¥1200] [交通¥300] [购物¥800]... │
├─────────────────────────────────────┤
│  BillList（账单列表）                  │
│  ┌─────────────────────────────┐    │
│  │ 🍚 餐饮    午餐      -¥28.5 │    │
│  │    微信 · 07/28            │    │
│  └─────────────────────────────┘    │
├─────────────────────────────────────┤
│  [+] 悬浮添加按钮                     │
└─────────────────────────────────────┘
```

**样式统一**：
- 统计 4 宫格：每个格子为 AppCard，内部图标 48rpx，金额 26rpx 700，标签 20rpx
- 分类统计：≤2 个时纵向满宽卡片，>2 个时横向滚动卡片（宽度 200rpx）
- 分类图标：56rpx × 56rpx，圆角 16rpx，白色图标文字
- 账单列表项：高度 140rpx，使用 SwipeableItem，左滑显示编辑+删除
- 金额颜色：支出 `dangerColor`，收入 `successColor`

**交互优化**：
- 分类统计卡片点击后筛选对应分类，列表实时过滤
- 记账弹窗（BottomSheet）分区：类型切换（支出/收入大按钮）> 金额输入（大字号）> 快捷金额 > 分类网格 > 渠道选择 > 备注 > 日期 > 底部按钮
- 金额输入框获得焦点时自动弹出数字键盘

---

### 5.5 复盘模块（pages/review/review + 新增 reviewList）

**定位**：每日反思与成长记录，强调结构化思考。

**重大改造**：
1. 现有 `review.vue` 改为**复盘编辑页**
2. 新增 `pages/review/reviewList.vue` 为**复盘历史列表页**
3. 所有数据从本地 Storage 迁移到后端接口
4. **仅保留 KPT 复盘法**，移除 GRAI 方法切换

#### 5.5.1 复盘编辑页（review.vue）

```
┌─────────────────────────────────────┐
│  Header: 今日复盘 / 7月28日          │
│         [日历Btn] [历史Btn]           │
├─────────────────────────────────────┤
│  IntroCard: 💡 KPT复盘法              │
│  通过记录做得好的、遇到的问题...        │
├─────────────────────────────────────┤
│  Card 1: Keep（保持）                 │
│  ┌─────────────────────────────┐    │
│  │ 💡 做得好的地方               │    │
│  │ ───────────────────────────  │    │
│  │ 今天按时完成了所有待办...      │    │
│  │ ─────────── 45/500           │    │
│  └─────────────────────────────┘    │
│  Card 2: Problem（问题）              │
│  ┌─────────────────────────────┐    │
│  │ ⚠️ 遇到的挑战                │    │
│  │ ───────────────────────────  │    │
│  │ 下午注意力不集中...           │    │
│  │ ─────────── 12/500           │    │
│  └─────────────────────────────┘    │
│  Card 3: Try（尝试）                  │
│  ┌─────────────────────────────┐    │
│  │ 🚀 改进方向                   │    │
│  │ ───────────────────────────  │    │
│  │ 明天尝试番茄工作法...          │    │
│  │ ─────────── 28/500           │    │
│  └─────────────────────────────┘    │
├─────────────────────────────────────┤
│  [  保存复盘  ✨  ]                   │
└─────────────────────────────────────┘
```

**样式统一**：
- 介绍卡片：AppCard，左侧图标 56rpx，圆角 16rpx
- 输入卡片：AppCard，内边距 26rpx
    - 卡片头部：图标 wrap 60rpx + 标题 30rpx 700 + 副标题 24rpx
    - 输入框：min-height 160rpx，28rpx，行高 1.8
    - 底部进度条：8rpx 高度 + 字数统计

**交互优化**：
- 日期切换使用 InlineCalendar 组件
- 离开页面时自动保存草稿到本地 Storage

#### 5.5.2 复盘历史列表页（新增 reviewList.vue）

**路由**：`pages/review/reviewList`

```
┌─────────────────────────────────────┐
│  Header: 复盘历史 / 回顾与成长         │
├─────────────────────────────────────┤
│  Filter: 🔍搜索                       │
├─────────────────────────────────────┤
│  ┌─────────────────────────────┐    │
│  │ 07月28日 周一                  │    │
│  │ 保持：今天按时完成了所有待办...   │    │
│  └─────────────────────────────┘    │
│  ┌─────────────────────────────┐    │
│  │ 07月27日 周日                  │    │
│  │ 保持：专注度很高...            │    │
│  └─────────────────────────────┘    │
└─────────────────────────────────────┘
```

- 列表项使用 AppCard，点击后进入复盘编辑页查看详情
- 支持按日期范围筛选

---

### 5.6 我的心情日历（pages/moodCalendar/moodCalendar）

**定位**：月度心情可视化回顾。

**布局优化**：
- 顶部月份切换器统一样式（与 InlineCalendar 一致）
- 日历格子内展示当日心情 emoji（28rpx）
- 底部增加「本月心情统计」卡片：
    - 心情分布横向条形图
    - 高频词汇标签
    - 平均心情评分

---

## 六、公共组件开发清单

| 组件名 | 路径 | 用途 | 优先级 |
|-------|------|------|--------|
| `PageHeader` | `components/PageHeader.vue` | 统一页面头部 | 高 |
| `AppCard` | `components/AppCard.vue` | 统一卡片容器 | 高 |
| `InlineCalendar` | `components/InlineCalendar.vue` | 内联日历（选择/展示） | 高 |
| `SwipeableItem` | `components/SwipeableItem.vue` | 滑动列表项 | 高 |
| `CapsuleFilter` | `components/CapsuleFilter.vue` | 胶囊筛选标签组 | 高 |
| `BottomSheet` | `components/BottomSheet.vue` | 底部弹出模态框 | 高 |
| `CenterModal` | `components/CenterModal.vue` | 居中模态框 | 高 |
| `StatCard` | `components/StatCard.vue` | 统计数字卡片 | 中 |
| `ProgressBar` | `components/ProgressBar.vue` | 进度条（预算/经验等） | 中 |
| `EmptyState` | `components/EmptyState.vue` | 空状态（已存在，需推广到所有页面） | 高 |

---

## 七、数据结构定义

### 7.1 待办项（TodoItem）
```typescript
interface TodoItem {
  id: string;
  title: string;
  date: string;        // YYYY-MM-DD
  done: number;        // 0-未完成 1-已完成
  priority: number;    // 1-高 2-中 3-低
  category: string;    // work / life / study
  start_time?: string; // HH:MM
  end_time?: string;   // HH:MM
  remark?: string;
  repeat_type?: number; // 0-不重复 1-每日 2-每周 3-每月
  created_at: string;
  updated_at: string;
}
```

### 7.2 账单项（BillItem）
```typescript
interface BillItem {
  id: string;
  type: number;        // 1-支出 2-收入
  money: string;       // 金额字符串，保留两位小数
  cate: string;        // 分类 value
  channel?: string;    // 支付渠道
  note?: string;
  date: string;        // YYYY-MM-DD
  created_at: string;
}
```

### 7.3 心情项（MoodItem）
```typescript
interface MoodItem {
  id: string;
  date: string;        // YYYY-MM-DD
  emoji: string;       // emoji 字符
  content?: string;    // 文字内容
  ai_text?: string;    // AI 生成文案
  ai_image_url?: string;
  generate_count?: number;
  created_at: string;
}
```

### 7.4 复盘项（ReviewItem）
```typescript
interface ReviewItem {
  id: string;
  date: string;        // YYYY-MM-DD
  method: 'kpt';      // 固定为 kpt（历史数据可能含 'grai'）
  kpt?: {
    keep: string;
    problem: string;
    try: string;
  };
  created_at: string;
  updated_at: string;
}
```

---

## 八、开发顺序建议

### 第一阶段：基础设施 ✅ 已完成
1. ✅ 开发公共组件：`AppCard`、`PageHeader`、`CapsuleFilter`、`BottomSheet`、`CenterModal`
2. ✅ 开发 `InlineCalendar`、`SwipeableItem`、`ProgressBar`、`SkeletonScreen` 组件
3. ✅ 开发 `themeMixin`、`growthModalMixin`、`moodMixin` 混入
4. ✅ 实现请求缓存（`apiCache.js`）和请求去重机制

### 第二阶段：接口对接 ✅ 已完成
1. ✅ 前端复盘模块全面接入后端 API（`saveReview`、`getReviewByDate`、`getReviewList`、`deleteReview`）
2. ✅ 新增聚合接口 `getDashboardDaily`（首页 3 合 1）
3. ✅ 新增统计接口 `getTodoStat`、`getMoodStat`、`getBillAggregateStat`
4. ✅ 移除复盘模块本地 Storage 逻辑（保留草稿自动保存）
5. ✅ 修复字体加载 ERR_CACHE_MISS（移除 CSS @font-face 本地路径）

### 第三阶段：页面重构 ✅ 已完成
1. ✅ 重构 `pages/review/review.vue`，接入后端 + 统一 UI + 仅保留 KPT 法
2. ✅ 新增 `pages/review/reviewList.vue` 复盘历史列表
3. ✅ 重构 `pages/todo/todo.vue`，接入公共组件
4. ✅ 重构 `pages/mood/mood.vue`，接入公共组件
5. ✅ 重构 `pages/bill/bill.vue`，接入公共组件
6. ✅ 优化 `pages/index/index.vue`，接入聚合接口

### 第四阶段：体验优化 ✅ 已完成
1. ✅ 统一所有页面过渡动画（pageFadeIn、cardEnter、theme-transition）
2. ✅ 优化列表加载骨架屏（SkeletonScreen 组件，支持 list/card/stats/dashboard/form 布局）
3. ✅ 空状态全覆盖（EmptyState 组件）
4. ✅ 请求缓存与去重（apiCache.js + request.js cache 选项）

---

## 九、注意事项

1. **复盘数据迁移**：复盘由本地改为云端，老用户本地数据需考虑提示「历史数据将保留在本地，新复盘将同步到云端」，或在版本更新时提供一次性上传引导。
2. **接口兼容性**：`POST /todo/list` 现有参数为 `date`，建议后端同时支持 `start_date` + `end_date` 以适配日历范围查询，保持向后兼容。
3. **主题一致性**：所有重构页面必须 100% 使用 `themeConfig` 变量，禁止任何硬编码颜色值。
4. **安全区适配**：所有固定底部操作栏必须添加 `env(safe-area-inset-bottom)` 适配。
5. **性能优化**：列表页使用虚拟滚动或分页加载，避免一次性渲染大量数据。
6. **字体加载**：微信小程序中字体仅通过 JS `uni.loadFontFace()` + base64 加载，CSS `@font-face` 本地路径会导致 ERR_CACHE_MISS，已移除。
7. **复盘方法简化**：仅保留 KPT 复盘法，GRAI 法已移除。历史数据可能包含 GRAI 记录，列表页兼容展示。

---

*文档结束。如有疑问请在开发群中沟通确认。*