happy-life-star/docs/plans/2026-03-07-mini-program-restore-design.md

小程序还原修复设计文档

创建日期: 2026-03-07 状态: 已批准

项目概述

将 mini-program-prototype 原型设计 100% 还原到 mini-program 微信小程序中，同时保持与 life-script Web 端完全一致的 API 接口调用。

项目关系

┌─────────────────────────────────────────────────────────┐
│  mini-program-prototype  (原型设计 - 设计标准)          │
│  - 紫色星空主题                                          │
│  - 5 步 Onboarding 引导                                    │
│  - 三 Tab 主页面 (Record/Script/Path)                    │
└─────────────────────────────────────────────────────────┘
                          ↓ 设计还原
┌─────────────────────────────────────────────────────────┐
│  mini-program (微信小程序 - 实现目标)                    │
│  - UniApp 框架                                           │
│  - Vue 3 + TypeScript                                    │
│  - 需要修复 UI 和 API 对接                                  │
└─────────────────────────────────────────────────────────┘
                          ↓ API 对齐
┌─────────────────────────────────────────────────────────┐
│  life-script (Web 端 - API 标准)                          │
│  - React + Vite                                          │
│  - 完整的 API 服务层                                       │
│  - 后端地址：101.200.208.45:19089                        │
└─────────────────────────────────────────────────────────┘

设计标准

1. 颜色系统

用途	色值	说明
主背景	#0F071A	深紫色背景
渐变顶部	#1A0B2E	顶部渐变
渐变底部	#050208	底部渐变
主紫色	#A855F7	主要强调色
深紫色	#9333EA	按钮渐变
浅紫色	#C084FC	文字强调
粉色	#E879F9	辅助强调

2. 核心组件

玻璃态卡片 (.glass)

background: rgba(168, 85, 247, 0.05);
backdrop-filter: blur(20px);
border: 1px solid rgba(168, 85, 247, 0.15);
border-radius: 24rpx;

金色边框卡片 (.glass-gold)

background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
border: 1px solid rgba(168, 85, 247, 0.3);
border-radius: 32rpx;

渐变按钮 (.btn-primary)

background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
border-radius: 32rpx;
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);

3. 动画效果

• 星空背景: 60 个随机星星，漂移动画
• 步骤指示器: 5 个点，激活状态变宽发光
• 页面切换: GSAP fade-in + slide-up
• AI 回复: 打字机效果

页面流程

Splash → Login → Onboarding(5 步) → Main
                                        ↓
         ┌────────────┬────────────┬────────────┬────────────┐
         │            │            │            │            │
     RecordView   ScriptView   PathView     Profile      Music
     回溯过去     创造未来     路径实现     个人中心     播放器

API 接口对齐

认证服务 (auth.js)

接口	方法	路径
登录	POST	/auth/login
注册	POST	/auth/register
刷新 Token	POST	/auth/refresh

用户档案 (userProfile.js)

接口	方法	路径
获取用户信息	GET	/userProfile/get
创建用户档案	POST	/userProfile/create
更新用户档案	PUT	/userProfile/update

生命事件 (lifeEvent.js)

接口	方法	路径
获取事件列表	GET	/lifeEvent/list
创建事件	POST	/lifeEvent/create
更新事件	PUT	/lifeEvent/update
删除事件	DELETE	/lifeEvent/delete

爽文剧本 (epicScript.js)

接口	方法	路径
获取剧本列表	GET	/epicScript/listAll
生成剧本	POST	/epicScript/generate
选择剧本	PUT	/epicScript/select
删除剧本	DELETE	/epicScript/delete

实施顺序

1. 启动页 (Splash) - 品牌展示，自动跳转
2. 登录页 (Login) - 账号密码登录
3. 引导页 (Onboarding) - 5 步用户信息收集
4. 主页 (Main) - Tab 导航容器
5. 记录页 (RecordView) - 生命事件记录
6. 剧本页 (ScriptView) - AI 剧本生成
7. 路径页 (PathView) - 目标路径实现
8. 个人页 (Profile) - 用户设置

技术栈

• 框架: UniApp (Vue 3)
• 语言: TypeScript
• 状态管理: Pinia
• HTTP 请求: uni.request 封装
• 样式: SCSS + Tailwind-like 工具类

后端配置

• 生产环境: http://101.200.208.45:19089/api
• WebSocket: ws://101.200.208.45:19089/ws

验证标准

1. ✅ UI 设计与原型 100% 一致
2. ✅ 所有 API 调用与 Web 端一致
3. ✅ 页面流程完整无阻断
4. ✅ 浏览器 Console 无错误
5. ✅ 小程序端运行正常