Templater
/
nuxt-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 Commits
11 Branches
1 Tag
5.1 MiB
 
 
 
 
Branch: shadcn-as
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'shadcn-as'
${ noResults }
nuxt-app/docs/superpowers/specs/2026-05-27-users-management...

4.6 KiB
Raw Permalink Blame History

用户管理模块重新设计

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)