# 实现计划

## 1. 标签页切换时自动刷新列表

### 1.1 问题分析
- 当前 `el-tabs` 组件没有添加 `tab-change` 事件监听
- 切换标签页时，列表数据不会自动刷新

### 1.2 解决方案
- 为 `el-tabs` 组件添加 `@tab-change` 事件监听
- 在事件处理函数中，根据当前激活的标签页调用对应的获取数据方法
- 邀请码列表调用 `getInviteCodeList()`
- 邀请用户列表调用 `getInviteList()`

## 2. 隐藏用户id的筛选条件

### 2.1 问题分析
- 当前用户id的筛选条件是可见的输入框
- 需要隐藏该筛选条件，但保持使用路由传过来的id
- 保持其他查询条件不变

### 2.2 解决方案
- 仅隐藏用户id的表单项，使用 `v-if="false"` 或 `style="display: none"`
- 保持现有的 `filterForm` 结构和查询逻辑不变
- 确保获取邀请码列表时，默认使用路由传过来的 `userId`

## 3. 添加删除二维码功能

### 3.1 问题分析
- 当前邀请码列表没有删除功能
- 需要调用 `deleteInviteCode` 方法删除邀请码

### 3.2 解决方案
- 在邀请码列表中添加一列操作列
- 操作列中添加删除按钮
- 点击删除按钮时，弹出确认对话框
- 确认后调用 `deleteInviteCode` 方法
- 删除成功后刷新邀请码列表

## 4. 实现步骤

### 4.1 修改标签页组件
- 添加 `@tab-change` 事件监听
- 实现 `handleTabChange` 方法

### 4.2 隐藏用户id筛选条件
- 在用户id的表单项上添加 `style="display: none"` 或 `v-if="false"`
- 保持其他查询条件不变

### 4.3 添加删除功能
- 在邀请码列表中添加操作列
- 添加删除按钮和确认对话框
- 实现 `handleDeleteCode` 方法

### 4.4 优化样式
- 调整操作列的宽度和样式

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

# 预期效果

- 切换标签页时，对应列表自动刷新数据
- 邀请码列表中不再显示用户id筛选条件，但其他查询条件保持不变
- 邀请码列表中添加删除按钮，点击可删除邀请码，删除前有确认提示
- 删除成功后列表自动刷新

# 技术实现

- 使用 Vue 3 的 Composition API
- 使用 Element Plus 的组件和事件
- 调用已有的 `deleteInviteCode` 方法
- 使用 `ref` 管理响应式数据
- 使用 `async/await` 处理异步操作