154 lines
5.7 KiB
Markdown
154 lines
5.7 KiB
Markdown
# 小程序还原修复设计文档
|
|
|
|
**创建日期**: 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. ✅ 小程序端运行正常
|