# AdminUserList.vue 页面重新设计方案

## 1. 设计目标
- 整合所有提供的API方法，实现完整的管理员用户管理功能
- 提供良好的用户体验，包括表单验证、加载状态和操作反馈
- 支持批量操作和分页功能
- 保持代码结构清晰，易于维护
- **确保所有文本支持中英文切换**，使用现有的i18n机制

## 2. 页面结构设计

### 2.1 基础布局
- 保留原有的标题、卡片、搜索栏、表格和分页组件
- 添加批量操作工具栏
- 新增三个对话框：
  - 用户创建/编辑对话框
  - 密码重置对话框
  - 操作确认对话框（用于删除和启用/禁用操作）

### 2.2 表格列设计
- 保留原有的用户名、邮箱、状态等列
- 新增角色列，显示用户关联的角色
- 新增全选复选框，支持批量操作
- 调整操作列，添加更多功能按钮

## 3. 功能实现

### 3.1 数据管理
- 使用`ref`和`reactive`管理页面状态
- 实现分页数据加载，使用`getAdminUsersList`方法
- 添加搜索和筛选功能
- 实现数据刷新机制

### 3.2 用户管理功能
- **创建用户**：点击"添加用户"按钮，打开创建对话框，调用`createAdminUser`方法
- **编辑用户**：点击"编辑"按钮，打开编辑对话框，调用`getAdminUserDetail`和`updateAdminUser`方法
- **删除用户**：支持单条删除和批量删除，调用`deleteAdminUsers`方法
- **启用/禁用用户**：点击状态切换按钮，调用`enableDisableUser`方法
- **重置密码**：点击"重置密码"按钮，打开密码重置对话框，调用`resetUserPassword`方法

### 3.3 表单验证
- 为用户创建/编辑表单添加验证规则
- 为密码重置表单添加验证规则
- 提供清晰的错误提示

### 3.4 交互体验
- 添加加载状态指示器
- 提供操作成功/失败的消息提示
- 实现平滑的对话框过渡效果
- 支持键盘快捷键（可选）

### 3.5 国际化支持
- 所有文本内容使用`{{ t('key') }}`语法，确保支持中英文切换
- 表单验证消息也需要国际化
- 动态生成的文本（如角色名称）也需要考虑国际化

## 4. API集成
- 导入`AdminRoleManagement`类
- 实例化API服务对象
- 实现所有API方法的调用和错误处理
- 添加请求取消机制（可选）

## 5. 代码结构
- 保持`<template>`、`<script setup>`和`<style scoped>`的清晰分离
- 使用组合式API编写逻辑
- 提取重复逻辑为可复用的函数
- 添加适当的注释

## 6. 实现步骤

1. 更新页面模板，添加对话框和批量操作工具栏
2. 实现数据加载和分页逻辑
3. 实现用户创建功能
4. 实现用户编辑功能
5. 实现用户删除功能
6. 实现用户启用/禁用功能
7. 实现密码重置功能
8. 添加表单验证和错误处理
9. 确保所有文本支持中英文切换
10. 优化UI/UX
11. 测试所有功能

## 7. 技术要点
- 使用Vue 3组合式API
- 使用Element Plus组件库
- 实现响应式设计
- 遵循代码规范
- 确保性能优化
- **正确使用i18n机制，支持中英文切换**

这个方案将实现一个功能完整、用户体验良好、支持中英文切换的管理员用户管理页面，整合了所有提供的API方法。