sunct/simple-memo-wx

Fork 0

Files

T

sunct ecca407485 首次提交：初始化项目代码

2026-07-31 14:42:05 +08:00

44 KiB

Raw Permalink Blame History

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

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

一、项目概述与现状分析

1.1 产品定位

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

1.2 现有架构问题

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

1.3 重构目标

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

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

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 接口设计原则

统一请求方式：POST
统一响应格式：

{
  "code": 200,
  "message": "success",
  "data": { ... }
}

日期格式：YYYY-MM-DD
月份格式：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 保存复盘

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 字段兼容历史数据。

响应数据：

{
  "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 获取单日复盘

POST /review/get

请求参数：

字段	类型	必填	说明
date	string	是	日期 YYYY-MM-DD

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

3.3.3 获取复盘列表

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

响应数据：

{
  "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 删除复盘

POST /review/delete

请求参数：

字段	类型	必填	说明
id	string	是	复盘 ID

3.4 新增接口

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

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

POST /dashboard/daily

请求参数：

字段	类型	必填	说明
date	string	是	日期 YYYY-MM-DD，不传默认今天

响应数据：

{
  "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 待办统计接口

POST /todo/stat

请求参数：

字段	类型	必填	说明
start_date	string	是	开始日期
end_date	string	是	结束日期

响应数据：

{
  "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 心情统计接口

POST /mood/stat

请求参数：

字段	类型	必填	说明
month	string	是	月份 YYYY-MM

响应数据：

{
  "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 整合为一个更灵活的统计接口。

POST /bill/stat/aggregate

请求参数：

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

响应数据：

{
  "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 设计原则

温暖自然：沿用现有暖陶/抹茶/暮蓝等主题色系，保持低饱和度、手作感
统一间距：建立 4rpx 基栅格，所有间距为 4 的倍数
统一圆角：卡片 20rpx，按钮 14rpx，标签 12rpx，头像/图标 16rpx
统一阴影：仅卡片使用阴影 0 8rpx 24rpx ${shadowLight}，避免过度层级
操作反馈：所有可点击元素添加 :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）

<!-- 统一组件 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）

<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 快速录入。

布局调整：

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

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

重大改造：

现有 review.vue 改为复盘编辑页
新增 pages/review/reviewList.vue 为复盘历史列表页
所有数据从本地 Storage 迁移到后端接口
仅保留 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）

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）

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）

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）

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;
}

八、开发顺序建议

第一阶段：基础设施 ✅ 已完成

✅ 开发公共组件：AppCard、PageHeader、CapsuleFilter、BottomSheet、CenterModal
✅ 开发 InlineCalendar、SwipeableItem、ProgressBar、SkeletonScreen 组件
✅ 开发 themeMixin、growthModalMixin、moodMixin 混入
✅ 实现请求缓存（apiCache.js）和请求去重机制

第二阶段：接口对接 ✅ 已完成

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

第三阶段：页面重构 ✅ 已完成

✅ 重构 pages/review/review.vue，接入后端 + 统一 UI + 仅保留 KPT 法
✅ 新增 pages/review/reviewList.vue 复盘历史列表
✅ 重构 pages/todo/todo.vue，接入公共组件
✅ 重构 pages/mood/mood.vue，接入公共组件
✅ 重构 pages/bill/bill.vue，接入公共组件
✅ 优化 pages/index/index.vue，接入聚合接口

第四阶段：体验优化 ✅ 已完成

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

九、注意事项

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

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

44 KiB Raw Permalink Blame History Unescape Escape

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

一、项目概述与现状分析

1.1 产品定位

1.2 现有架构问题

1.3 重构目标

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

2.1 模块总览

2.2 待办模块（Todo）

2.3 心情模块（Mood）

2.4 账单模块（Bill）

2.5 复盘模块（Review）

三、接口文档

3.1 接口设计原则

3.2 现有接口保留清单

用户模块

待办模块

账单模块

预算模块

分类管理模块

心情模块

成长系统模块

AI 模块

邮箱/安全模块

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

3.3.1 保存复盘

3.3.2 获取单日复盘

3.3.3 获取复盘列表

3.3.4 删除复盘

3.4 新增接口

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

3.4.2 待办统计接口

3.4.3 心情统计接口

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

3.5 接口整合与废弃建议

四、统一 UI 设计规范

4.1 设计原则

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

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

4.4 字体规范

4.5 公共组件规范

4.5.1 页面头部（PageHeader）

4.5.2 统一卡片（AppCard）

4.5.3 统一按钮

4.5.4 统一模态框（BottomSheet / CenterModal）

4.5.5 统一日历组件（InlineCalendar）

4.5.6 统一列表项（SwipeableItem）

4.5.7 统一空状态（EmptyState）

五、各模块页面详细设计

5.1 首页（pages/index/index）

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

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

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

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

5.5.1 复盘编辑页（review.vue）

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

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

六、公共组件开发清单

七、数据结构定义

7.1 待办项（TodoItem）

7.2 账单项（BillItem）

7.3 心情项（MoodItem）

7.4 复盘项（ReviewItem）

八、开发顺序建议

第一阶段：基础设施 ✅ 已完成

第二阶段：接口对接 ✅ 已完成

第三阶段：页面重构 ✅ 已完成

第四阶段：体验优化 ✅ 已完成

九、注意事项

44 KiB

Raw Permalink Blame History