管理面板
规则
- 数据表格：服务器端分页、排序和过滤——永远不要在客户端加载所有行——使用
?page=1&limit=25&sort=createdAt&order=desc - CRUD 模式：列表（表格）、创建（表单/模态框）、读取（详情视图）、更新（编辑表单）、删除（确认对话框）——所有资源布局一致
- 基于角色的访问：定义角色（admin、editor、viewer）并配合权限矩阵——在每个 API 路由的服务器端检查权限，而不仅仅是 UI
- 批量操作：选择多行、批量操作（删除、导出、状态变更）——确认破坏性操作，大批量时后台处理
- 搜索：关键字段上的防抖文本搜索（300ms）——结合列过滤器进行精确查询
- 用户管理：列出用户、查看详情、更改角色、禁用/启用账户、模拟登录（仅限 admin 并记录审计日志）
- 审计日志：记录谁在何时更改了什么——
{ userId, action, resource, resourceId, changes, timestamp } - 布局：侧边导航（可折叠）、面包屑、带操作按钮的页面标题——响应式但面向桌面优化
权限检查模式
const PERMISSIONS = {
admin: ["users:read", "users:write", "users:delete", "data:read", "data:write", "data:delete"],
editor: ["data:read", "data:write"],
viewer: ["data:read"],
} as const;
function can(role: string, permission: string): boolean {
return PERMISSIONS[role]?.includes(permission) ?? false;
}
// 中间件
if (!can(user.role, "users:write")) return Response.json({ error: "Forbidden" }, { status: 403 });
数据表格 API 模式
GET /api/admin/users?page=1&limit=25&sort=createdAt&order=desc&search=john&role=admin
返回：{ data: [...], total: 150, page: 1, limit: 25, totalPages: 6 }
避免
- 仅客户端权限检查——始终在服务器端强制执行
- 加载所有数据然后在浏览器中分页——使用服务器端分页
- 破坏性操作无确认——始终确认删除和批量操作
- 缺失审计追踪——你需要知道谁更改了什么