# 小程序还原修复设计文档

**创建日期**: 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. ✅ 小程序端运行正常