实施计划: 003 - 用户端体验

本文档为“用户端体验”功能规格的技术实施计划。

1. 总体思路

用户端体验是转化的关键，需要保证页面的高性能和交互的流畅性。后端需提供快速响应的API，前端则通过无限滚动等技术优化大数据量下的列表展示。

短链接服务 (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)，用于追踪邀请状态。

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: 返回当前用户的奖励记录列表。

UserCenter.vue: 用户个人中心的主页面，整合分享和记录查看功能。
ShareModule.vue: 用于展示分享信息的组件，包含：
- “一键复制”短链接的按钮。
- 展示分享海报，并处理服务端/客户端渲染的逻辑。
InfiniteScrollList.vue: 一个可复用的列表组件，封装“滚动到底部自动加载下一页”的逻辑。
InvitedFriendItem.vue: 用于渲染“邀请记录”列表中的单项，展示好友的隐私保护信息和邀请状态。
RewardItem.vue: 用于渲染“奖励明细”列表中的单项。

在API客户端中新增与用户中心相关的接口请求函数。
使用 Pinia 管理用户状态，并可以结合 useSWRV 或自定义的 useFetch Composable 函数来管理分页数据的获取、缓存和“无限滚动”的状态。
在 ShareModule.vue 中实现降级逻辑：当从服务端获取海报图片失败或超时，能自动切换到客户端渲染模式。