54 lines
3.0 KiB
Markdown
54 lines
3.0 KiB
Markdown
# 实施计划: 003 - 用户端体验
|
||
|
||
本文档为“用户端体验”功能规格的技术实施计划。
|
||
|
||
## 1. 总体思路
|
||
|
||
用户端体验是转化的关键，需要保证页面的高性能和交互的流畅性。后端需提供快速响应的API，前端则通过无限滚动等技术优化大数据量下的列表展示。
|
||
|
||
## 2. 后端开发任务 (Backend Tasks)
|
||
|
||
### 2.1. 新增服务与数据库设计
|
||
|
||
- **短链接服务 (Short Link Service)**
|
||
- **数据库**: 创建 `short_links` 表，包含 `id`, `code` (唯一索引), `original_url`, `created_at`。
|
||
- **内部API**: 创建一个内部 `POST /api/v1/internal/shorten` 接口，用于生成和存储短链接。
|
||
- **公共重定向**: 创建一个公共 `GET /r/{code}` 接口，用于处理短链接的302重定向。
|
||
|
||
- **海报生成服务 (Poster Generation Service)**
|
||
- **技术选型**: 引入图像处理库（如 Node.js 的 `sharp` 或 Python 的 `Pillow`）。
|
||
- **API设计**: 创建 `GET /api/v1/me/poster` 接口。默认返回 `image/png` 格式的图片文件流。当接收到 `?render=client` 参数时，返回构建海报所需的JSON数据（背景图URL、文案、二维码数据等），以支持客户端渲染的降级方案。
|
||
|
||
- **数据库更新**
|
||
- 在 `invitations` 表（或类似表）中增加 `status` 字段 (enum: `clicked`, `registered`, `ordered`)，用于追踪邀请状态。
|
||
|
||
### 2.2. API Endpoint 设计
|
||
|
||
- `GET /api/v1/me/invitation-info`: **获取当前用户的邀请信息**
|
||
- Response: `{ short_link, ... }`，返回已生成的专属短链接。
|
||
|
||
- `GET /api/v1/me/invited-friends`: **获取邀请好友列表（分页）**
|
||
- Query Params: `page`, `limit`。
|
||
- Response: 返回经过隐私处理（昵称、打码手机号、头像）的好友列表及其状态。
|
||
|
||
- `GET /api/v1/me/rewards`: **获取奖励明细列表（分页）**
|
||
- Query Params: `page`, `limit`。
|
||
- Response: 返回当前用户的奖励记录列表。
|
||
|
||
## 3. 前端开发任务 (Frontend Tasks)
|
||
|
||
### 3.1. UI 组件设计
|
||
|
||
- **`UserCenter.vue`**: 用户个人中心的主页面，整合分享和记录查看功能。
|
||
- **`ShareModule.vue`**: 用于展示分享信息的组件，包含：
|
||
- “一键复制”短链接的按钮。
|
||
- 展示分享海报，并处理服务端/客户端渲染的逻辑。
|
||
- **`InfiniteScrollList.vue`**: 一个可复用的列表组件，封装“滚动到底部自动加载下一页”的逻辑。
|
||
- **`InvitedFriendItem.vue`**: 用于渲染“邀请记录”列表中的单项，展示好友的隐私保护信息和邀请状态。
|
||
- **`RewardItem.vue`**: 用于渲染“奖励明细”列表中的单项。
|
||
|
||
### 3.2. API 集成与状态管理
|
||
|
||
- 在API客户端中新增与用户中心相关的接口请求函数。
|
||
- 使用 `Pinia` 管理用户状态，并可以结合 `useSWRV` 或自定义的 `useFetch` Composable 函数来管理分页数据的获取、缓存和“无限滚动”的状态。
|
||
- 在 `ShareModule.vue` 中实现降级逻辑：当从服务端获取海报图片失败或超时，能自动切换到客户端渲染模式。 |