deotalandAi/.trae/documents/添加邀请码列表功能.md

实现计划

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 文件

预期效果

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