deotalandAi/.trae/documents/实现邀请明细页面.md

实现步骤

1. 新建邀请明细页面组件

• 创建 d:\work\Aiproject\DeotalandAi\apps\frontend\src\views\user\invite-records.vue 文件
• 实现页面布局，包括标题、表格和分页组件
• 设计双选项卡切换："积分明细"和"佣金记录"（仅达人会员可见）
• 采用极简风格设计，遵循 ui-ux-pro-max.md 中的设计规则

2. 修改路由配置

• 在 freeRoutes 数组中添加新路由 /user-center/invite-records
• 指向新建的邀请明细页面组件

3. 修改用户中心页面

• 在"邀请码"部分的右侧添加"邀请明细"按钮
• 移除"邀请积分明细"模块（即 .invite-related-section）
• 添加按钮点击事件，使用 router.push() 跳转到新页面

4. 实现 API 调用和数据处理

• 在邀请明细页面中调用 UserController 的 getInviteRecords() 方法获取积分明细
• 对于达人会员，额外调用 getInviteCommissionRecords() 方法获取佣金记录
• 处理返回的数据，将其转换为表格所需的格式
• 实现数据加载状态和空状态处理

5. 设计风格调整

• 采用极简风格设计，使用简洁的颜色和字体
• 确保响应式设计，适配移动端、桌面端、平板端
• 使用合适的间距和布局，保持页面整洁
• 实现平滑的过渡效果和交互反馈

技术要点

• 使用 Vue3 Composition API 开发
• 根据用户角色（达人会员/免费会员）动态显示不同内容
• 实现中英文国际化支持
• 确保页面性能和加载速度
• 遵循 ui-ux-pro-max.md 中的设计规则，特别是极简风格要求

预期效果

• 用户中心页面的邀请码部分右侧会出现"邀请明细"按钮
• 点击按钮会跳转到新的邀请明细页面
• 免费会员只能看到"积分明细"选项卡，展示被邀请用户、获得积分和日期
• 达人会员可以看到"积分明细"和"佣金记录"两个选项卡
• "佣金记录"选项卡展示被邀请用户邮箱、实际消费金额、佣金比例、佣金金额和订单时间
• 页面采用极简风格设计，视觉效果简洁美观
• 支持响应式布局，适配不同设备尺寸