仪表盘与管理后台
把模板中的仪表盘示例改造成真实连接的产品界面。
模板提供了完善的仪表盘外壳，以及若干 Example（示例） 和 UI starter （UI 起点） 页面。外壳已连接认证，但大多数业务数据与写操作需要按你的产品实现。
仪表盘外壳
客户端布局 src/app/[locale]/(dashboard)/layout.tsx 组合了：
- 可折叠的 shadcn 侧边栏，以及
src/config/user-sidebar-config.ts路由配置。 - 带侧栏开关、路径面包屑、语言切换和主题切换的吸顶头部。
DashboardSideUser：通过useSession()显示姓名、邮箱和头像，并调用signOut()。- 仪表盘、管理、账户、个人资料、安全与账单导航。
当前已连接的部分
| 界面/接口 | 状态 | 当前行为 |
|---|---|---|
| 仪表盘外壳/用户菜单 | Integrated（已集成） | 会话身份、退出和响应式外壳 |
/api/user/profile | Integrated（已集成） | 认证后查询/更新用户表，使用 Zod 校验 |
/api/user/subscription | Integrated（已集成） | 认证后读取订阅表 |
/api/user/settings | Example（示例） | 读取真实会话，但偏好与安全默认值是静态数据 |
/api/user/billing | Example（示例） | 有认证，但订阅/账单/用量响应为静态数据 |
/api/admin/users | Integrated（已集成） | 认证、管理员角色校验、筛选、分页与数据库查询 |
| 支付记录 | Integrated（已集成） | Creem webhook 可写入订单/订阅表 |
每个用户 API 都会权威校验 Better Auth 会话。管理员 API 还要求
session.user.role === "admin"，否则在查询用户前返回 401 或 403。
当前仍是示例 UI 的部分
| 页面/组件 | 状态 | 待完成工作 |
|---|---|---|
| 仪表盘卡片/图表/表格 | Example（示例） | 数据是 SectionCards、ChartAreaInteractive、DataTable 内的常量 |
/admin/users 页面 | Example（示例） | 使用 mockUsers，操作不会调用真实管理员 API |
/account/subscription | Example（示例） | 显示 mockSubscription（还标成 Stripe），未读取 Creem 订阅表/API |
/account/order | UI starter（UI 起点） | 静态空状态，未查询订单 |
/setting/billing | UI starter（UI 起点） | “Coming soon” 空状态 |
/setting/security | UI starter（UI 起点） | “Coming soon” 空状态，无密码/2FA/会话操作 |
/setting/profile | UI starter（UI 起点） | 读取 useSession，但 Save 与 Upload 没有处理函数 |
不要认为 /admin/users 页面已完成角色保护。src/proxy.ts 对 /admin
只检查 Better Auth 会话 Cookie，不验证会话或角色。页面使用模拟数据，
DashboardSideContent 当前也没有应用侧栏配置中的 roles 元数据。只有
/api/admin/users 执行了权威管理员校验。
proxy 检查只是提前改善导航体验，不是授权。Server Component 查询、Route Handler 与写操作都必须在数据边界进行保护。
连接真实数据
仪表盘指标
图表/表格可继续作为 Client Component，但应在父级 Server Component 中查询和聚合
数据，再把可序列化的普通数组作为 props 传入。移出组件里的 stats、chartData
和 initialData 常量；互不依赖的数据库查询可用 Promise.all 并行执行。
管理员用户列表
用 /api/admin/users?page=...&search=... 的响应替换 mockUsers，或把相同查询
抽成仅服务端函数，由经过角色校验的 Server Component 使用。客户端请求仍需保留
API 的服务端角色校验。封禁/编辑操作应调用带认证和角色检查的写接口；当前下拉菜单
除复制邮箱外都只是视觉控件。
账户与设置
- 订阅：读取
/api/user/subscription，用真实 Creem 产品/状态字段替换mockSubscription。 - 订单：按已认证用户 ID 查询订单表，绝不能信任客户端提交的用户 ID。
- 个人资料：Save 调用
PUT /api/user/profile；通过持久存储上传头像，再保存 URL。 - 安全：如果启用相应能力，使用 Better Auth API 管理密码、会话和 2FA。
- 账单：用提供商门户、发票、支付方式和真实用量模型替换静态 billing 响应。
实施清单
- 定义产品真正需要的指标、表格、角色和账户操作。
- 添加仅服务端查询，并限定到
session.user.id或租户 ID。 - 在每个受保护查询与写操作中校验完整服务端会话。
- 除 API 外，也给管理员页面/布局添加权威管理员检查。
- 为体验隐藏无权限导航（但不能把隐藏导航当作安全措施）。
- 用数据库/API 数据替换常量与模拟记录。
- 添加 Zod schema、写操作、加载/错误/空状态和 toast 反馈。
- 大表格在服务端实现分页和筛选参数。
- 为角色、封禁、账单与安全变更增加审计日志。
- 测试未登录、普通用户、管理员、空数据和提供商失败场景。