## 实现步骤

### 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 中的设计规则，特别是极简风格要求

## 预期效果

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