人生时间管理小程序开发:全栈实现与功能对齐

By 16675108757, 18 April, 2026
角色
user
content

你是一名资深全栈工程师,请基于已有 Web 项目“Merelife(区区三万天)”实现一个微信小程序版本(uni-app + Vue3),要求功能对齐、数据流可靠、视觉风格统一,并输出可直接落地的代码。

【项目目标】
做一个“人生时间管理”小程序,核心体验是:
1) 生命日历(30000天格子)
2) 人生年轮(按年份评分与统计)
3) 愿望清单(进度、打卡)
4) 重要他人(纪念日、关系)
5) 用户登录/注册(支持云端同步)
6) 设置页(本地优先 + 可手动上传 MySQL 备份)

【技术栈要求】
- uni-app + Vue3(script setup)
- 小程序端样式使用 scoped css,保持组件化
- 请求层统一封装(token 自动注入)
- 本地缓存使用 uni.setStorageSync / uni.getStorageSync
- 不要引入项目中未使用的重型依赖

【必须遵循的数据与业务规则】
- 本地优先:不登录也能用,本地可完整记录
- 登录后可拉取云端数据并同步
- 日历数据支持:status、content、imageData(Base64 DataURL)
- 图片前端限制 2MB
- 不允许示例数据覆盖真实数据(特别是愿望、重要他人)
- 所有写接口必须带用户身份凭证(Bearer Token)

【后端 API(必须严格对齐)】
用户:
- POST /api/user/register
- POST /api/user/login
- PUT /api/user
- GET /api/user/{id}

日历:
- POST /api/calendar/batch
- GET /api/calendar/user/{userId}

愿望:
- POST /api/wish/batch
- GET /api/wish/user/{userId}

重要他人:
- POST /api/important-person/batch
- GET /api/important-person/user/{userId}

MySQL 上传:
- POST /api/sync/mysql

【鉴权要求】
- 登录/注册成功后保存 token 与 user
- 请求拦截器自动在 Authorization 注入:Bearer <token>
- 401/403 时给出友好提示并回到登录态
- 用户隔离:读取/写入时必须按 userId 分区缓存键

【UI 风格(严格按现有网页端气质)】
关键词:温柔、治愈、轻拟物、玻璃拟态、奶油色系、微动效
- 主背景渐变:#FFFBF8 -> #F9F7F5
- 主色:#F2C6D0(粉玫瑰)、#F4D9C5(蜜桃)
- 辅助色:#D4EDDF(薄荷)、#EDE2D4(木质米)
- 深文本:#2A2724,次文本:#8C8A88
- 卡片:半透明白 + blur + 大圆角 + 轻阴影
- 按钮:粉/桃渐变,按压有 scale 反馈
- 列表项和标签有层次,避免“纯功能粗糙感”

【页面结构建议】
1. 登录/注册页(可切换模式)
2. 首页/生命日历页(最近记录、状态编辑、今日定位)
3. 年轮页(年度评分、统计概览)
4. 愿望页(新增/编辑/进度/打卡)
5. 重要他人页(新增/编辑/日期提醒信息)
6. 设置页(账号信息、同步、MySQL备份上传)

【代码质量要求】
- 先给目录结构,再给关键文件代码
- 每个页面都给出完整 template + script setup + style scoped
- 抽离 API 层、storage 工具、auth 工具
- 明确每个数据结构(TS/JS JSDoc均可)
- 给出关键异常处理(网络失败、鉴权失败、空数据)
- 不写“伪代码”,要可运行

【输出格式要求】
按以下顺序输出:
1) 实现点清单
2) 目录结构
3) 关键代码文件(逐个)
4) 接口与数据结构说明
5) 联调步骤(如何验证登录、同步、上传MySQL)
6) 风险点与回归检查项

现在开始生成:请先输出“目录结构 + API与状态管理设计”,再输出页面代码。

total_tokens
0
uiParsing
关闭