56 lines
1.8 KiB
Markdown
56 lines
1.8 KiB
Markdown
# 实现计划
|
||
|
||
## 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` 文件
|
||
|
||
# 预期效果
|
||
|
||
- 页面顶部显示两个标签页，可切换查看不同列表
|
||
- 邀请码列表支持筛选和生成邀请码功能
|
||
- 现有邀请用户列表功能保持不变
|
||
- 整体布局美观，用户体验良好 |