仪表盘与管理后台
Nuxt 模板中的仪表盘与管理后台界面。
模板在受保护的 user layout 下组合了仪表盘示例、部分已接通的账户页面，
以及真实的管理员用户基础能力。各页面完成度不同，不能把整个区域都视为已接通。
布局与页面
app/layouts/user.vue 提供响应式侧栏、面包屑、主题/语言切换与正文 slot。页面
通过 definePageMeta({ layout: "user", middleware: "auth" }) 使用它。
| 页面 | 当前状态 |
|---|---|
dashboard.vue | 示例/UI starter——表格、图表与摘要数据均为硬编码 |
admin/users.vue | 读取已接通——从带角色校验的真实 API 获取用户 |
account/subscription.vue | 读取已接通——读取当前用户的数据库订阅记录 |
setting/profile.vue | 基础更新已接通——读取 session，更新姓名/头像 URL |
account/order.vue | 占位页——只有文字 |
setting/billing.vue | 占位页——只有文字 |
setting/security.vue | 占位页——只有文字 |
用户侧栏暴露仪表盘、管理、订单/订阅、资料和安全入口。菜单角色过滤只负责展示， API 授权才是权威边界。
仪表盘组件
SectionCards.vue显示带静态示例数字的摘要卡片。ChartAreaInteractive.vue使用@unovis/vue与硬编码时间序列。DataTable.vue、DraggableRow.vue、DragHandle.vue使用@tanstack/vue-table与 dnd-kit 构建可排序示例表格。UsersTable.vue渲染和筛选真实管理员用户数据。
dashboard.vue 与 ChartAreaInteractive.vue 中的示例数组都要替换；只改表格并
不会让图表变成实时数据。
管理员用户
admin/users.vue 声明 middleware: ["auth", "admin"]，请求
GET /api/admin/users，并有加载、错误和重试状态。服务端仍独立调用
requireAuth，仅 role === "admin" 时返回数据，否则为 403；接口支持页码、
页大小、搜索、角色和封禁过滤。
两层保护各有作用：客户端中间件避免错误导航，API 角色检查则在页面守卫被绕过 时仍能保护数据。
页面当前一次请求前 50 个用户，UsersTable 在本地筛选。数据规模增大后，应把
控件接到服务端的查询与分页参数。
已连接的用户 API
| API | 实际行为 |
|---|---|
GET/PUT /api/user/profile | 真实的当前用户资料读取/更新 |
GET /api/user/subscription | 真实 Drizzle 订阅记录与套餐匹配 |
GET /api/user/settings | 要求登录，但返回示例偏好/安全数据 |
GET /api/user/billing | 要求登录，但返回示例账单/用量数据 |
侧栏用户菜单通过 useSession() 显示姓名、邮箱、头像与退出。资料页的 “Upload
Avatar” 目前只是弹窗要求输入 URL，并非文件上传流程。
接入真实产品数据
SSR 友好的初始读取使用 useFetch，事件驱动刷新/修改使用 $fetch。敏感聚合与
所有权检查必须放在 Nitro 路由，不要放在浏览器。
定义指标
确定产品自己的卡片、图表序列、表格列、时间范围与角色，新增带认证且查询有界的 聚合接口。
替换示例数据
在 dashboard.vue 获取指标，以带类型 props 传入卡片/图表/表格，并补齐加载、
空数据、错误与刷新状态。
完成账户与设置
从支付表构建订单历史，接入真实账单/设置数据，实现安全操作，并用选定的存储 流程替换头像 URL 弹窗。
安全实现修改操作
服务端用 Zod 校验，检查所有权/角色，返回稳定错误，防重复提交，刷新缓存数据， 并记录敏感管理操作。
验证
- 未登录访问仪表盘会跳转登录，API 返回 401。
- 非管理员无法打开管理页或读取
/api/admin/users。 - 资料更新和订阅读取只作用于当前用户。
- 产品上线前已替换 mock 卡片、图表与表格行。
- 订单、账单与安全占位页已经实现或移除。
- 加载、空数据、错误、分页与修改状态均经过测试。