优化和功能完善

2026-03-07 19:32:58 +08:00
parent 97a74d5969
commit 6658ee3ed8
122 changed files with 526 additions and 22139 deletions
@@ -0,0 +1,153 @@
+# 小程序还原修复设计文档
+
+**创建日期**: 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)
+```css
+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)
+```css
+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)
+```css
+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. ✅ 小程序端运行正常