# 实现计划

## 1. 组件结构调整
- 在 `AdminUserInvites.vue` 组件中添加 Element Plus 的 `el-tabs` 组件，创建两个标签页
- 标签页1：邀请码列表
- 标签页2：邀请用户列表（现有功能）

## 2. 邀请码列表实现

### 2.1 表格结构
- 添加 `el-table` 组件，展示邀请码数据
- 表格列包括：ID、用户名、邮箱、邀请码、使用状态、邀请用户、使用时间、创建时间
- 使用 `el-loading` 处理加载状态

### 2.2 数据获取与分页
- 使用 `getInviteCodeList` 方法获取邀请码数据
- 添加分页组件，支持页码和每页条数调整
- 实现分页相关的事件处理函数

### 2.3 筛选功能
- 添加筛选表单，包含：
  - 用户ID输入框
  - 邀请码输入框
  - 使用状态下拉选择器
  - 查询和重置按钮

### 2.4 生成邀请码功能
- 添加"生成邀请码"按钮
- 点击后弹出 `el-dialog` 对话框
- 对话框中包含数量输入框和确认/取消按钮
- 调用 `generateInviteCode` 方法生成邀请码

## 3. 邀请用户列表调整
- 为现有列表添加"邀请用户列表"标题
- 保持原有功能不变

## 4. 样式优化
- 调整表格样式，确保两个列表视觉一致性
- 优化筛选区域和按钮布局
- 确保整体页面布局美观合理

## 5. 功能测试
- 测试邀请码列表的数据加载和分页
- 测试筛选功能是否正常工作
- 测试生成邀请码功能是否正常
- 测试邀请用户列表功能是否不受影响

## 6. 文件修改
- 仅修改 `d:/work/Aiproject/DeotalandAi/apps/FrontendDesigner/src/views/admin/AdminUsers/AdminUserInvites.vue` 文件

# 预期效果

- 页面顶部显示两个标签页，可切换查看不同列表
- 邀请码列表支持筛选和生成邀请码功能
- 现有邀请用户列表功能保持不变
- 整体布局美观，用户体验良好