# 用户管理模块重新设计

## Overview

重新实现 `app/pages/admin/users/` 模块，面向日常运维场景，提供功能完整、操作高效的用户管理界面。

## Layout Structure

```
┌─────────────────────────────────────────────────────────────┐
│  Header: 标题 "用户管理" + 统计卡片(总数/管理员/禁用)        │
├─────────────────────────────────────────────────────────────┤
│  Filter Bar: [状态标签] [角色下拉] [搜索框] [+新增用户]      │
├─────────────────────────────────────────────────────────────┤
│  Table: ☑ | 用户 | 邮箱 | 角色 | 状态 | 注册时间 | 操作     │
│         ☐   张三   xxx@  管理员  正常  2024-01   编辑       │
│         ☐   李四   ---   普通用户  禁用  2024-02  编辑       │
├─────────────────────────────────────────────────────────────┤
│  Batch Bar (选中后显示): 已选中 N 项 [启用] [禁用] [删除]    │
├─────────────────────────────────────────────────────────────┤
│  Pagination: 共 X 条，第 1/5 页 [上一页] [下一页]            │
└─────────────────────────────────────────────────────────────┘

Drawer: 点击编辑从右侧滑入，宽度 480px
```

## Components

### Filter Bar

- **状态标签筛选**：全部 / 正常 / 禁用，点击切换，pill 样式
- **角色下拉**：全部角色 / 管理员 / 普通用户
- **搜索框**：placeholder "搜索用户名、邮箱"，回车触发搜索，搜索图标在左侧
- **新增用户按钮**：右上角，primary 样式，图标 + 文字

### Stats Cards

- 三列 grid 布局
- 卡片：总用户数、管理员数、已禁用数
- 数字使用 display 字体（28px），标签使用 caption（13px）

### Data Table

- **列头**：全选checkbox、用户、邮箱、角色、状态、注册时间、操作
- **用户名列**：头像(36px圆形) + 昵称 + @username
- **角色/状态**：badge 样式，admin 用 coral 背景，user 用 teal 背景
- **可排序列头**：用户名、注册时间，点击切换升序/降序，排序图标
- **操作列**：「编辑」文字按钮

### Batch Action Bar

- 选中 > 0 时从表格下方滑出
- 显示 "已选中 N 项"
- 三个按钮：启用（teal）/ 禁用（muted）/ 删除（error）
- 删除按钮点击后弹出确认 Dialog，内容 "确定删除选中的 N 个用户？此操作不可撤销。"

### Detail Drawer

- 从右侧滑入，宽度 480px，overlay 背景
- 标题："编辑用户" + 用户名
- 字段：用户名（只读）、昵称、邮箱、角色（select）、状态（select）
- 底部：取消（secondary）+ 保存（primary）按钮

### Create Modal

- 居中弹窗，最大宽度 440px
- 标题：新增用户
- 字段：用户名、密码、邮箱（选填）、角色（select）
- 底部：取消 + 创建按钮

### Confirm Dialog

- 居中弹窗，最大宽度 400px
- 标题：确认删除
- 内容：确定删除选中的 N 个用户？此操作不可撤销。
- 底部：取消 + 确认删除（error 样式）

## States

### Table States

- **Loading**：表格区域显示 "加载中..."
- **Empty**：无数据时显示 "暂无用户"
- **Error**：错误时显示错误信息，支持重试

### Empty States

- 无筛选结果时显示 "未找到匹配的用户"

## API Integration

- `GET /api/users` — 列表查询，支持 `page`, `pageSize`, `search`, `status`, `role`, `sortBy`, `sortOrder`
- `POST /api/users` — 创建用户
- `PUT /api/users/:id` — 更新用户
- `DELETE /api/users/:id` — 删除用户
- `PUT /api/users/batch` — 批量操作，支持 `action: 'enable' | 'disable' | 'delete'`, `ids: number[]`

## Design Tokens

遵循 DESIGN.md 系统：

- 颜色：`primary` (#cc785c), `accent-teal` (#5db8a6), `error` (#c64545)
- 字体：display 用于数字，body 用于正文
- 圆角：md (8px) 用于按钮/输入，lg (12px) 用于卡片
- 间距：16px (md), 24px (lg), 32px (xl)