91 lines
3.2 KiB
Markdown
91 lines
3.2 KiB
Markdown
# 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方法。 |