仪表盘与管理后台
把模板中的仪表盘示例改造成真实连接的产品界面。
Dashboard 是围绕部分已接通认证/D1 边界的精致 UI starter。外壳、session 用户、资料名称修改、用户 API 与管理员授权可用;许多可见业务数据仍为静态或 mock。
外壳与保护
{-$locale}/_dashboard.tsx 在 beforeLoad 使用 requireAuth,再渲染
DashboardSidebar、语言感知面包屑、主题/语言控制与 Outlet。侧栏从 Better Auth
session 读取用户菜单和角色导航,退出登录已接通。
每个敏感 API 都会独立读取 session。路由守卫只保护导航,不能保护直接 API 请求。
管理员用户路由增加 requireAdmin,/api/admin/users 也会在查询 D1 前分别返回
401/403。
当前功能状态
| 界面 | 状态 | 实际行为 |
|---|---|---|
| Dashboard 外壳/用户菜单 | 完整接入 | Session 身份、退出、语言导航与认证守卫 |
| 统计卡/图表/表格 | UI starter | 硬编码 stats、chart series 与 initialData;本地交互可用 |
| 资料名称 | 完整接入 | React Hook Form + Zod → 已认证 PUT /api/user/profile → D1 |
| 头像 | UI starter | 显示 session image;Upload 按钮无 handler |
| 管理员用户 API | 完整接入 | 角色校验、搜索/角色/封禁筛选、分页与 D1 查询 |
| 管理员用户页 | UI starter | 使用 mockUsers,未调用真实 API;action 未接通 |
| 订阅 API | 完整接入 | 读取当前用户的 subscription 表记录 |
| 订阅页 | UI starter | 使用硬编码 Stripe 示例,没有调用 Creem/D1 API |
| 订单页 | UI starter | 静态空状态,未查询 order 表 |
| Billing 页面/API | 示例/UI starter | 页面显示 coming soon;API 返回占位 free plan/usage |
| Security 页面/settings API | 示例/UI starter | 页面显示 coming soon;API 返回真实 session 加静态偏好/安全默认值 |
页面受保护且视觉完整,并不代表数据已连接。管理员页没有使用已工作的管理员 API; 订阅页仍显示 Stripe mock,而本模板的支付示例实际使用 Creem。
Dashboard 组件
SectionCards 演示响应式 KPI card;ChartAreaInteractive 使用 Recharts 与本地
时间范围筛选;DataTable 演示 @tanstack/react-table 的排序、筛选、分页、列
可见性、选择,以及 @dnd-kit 行拖动。这些是可复用交互模式,不是分析数据模型。
把组件模块级 sample array 替换为 loader data 或 props。指标来源和聚合周期应在 服务端定义,不要把原始事件或高权限记录发到浏览器再聚合。
把页面连接到 D1
- 定义页面所需的最小可序列化 view model。
- 通过
createServerFn支持的 route loader 读取 session/数据;需要客户端刷新或 mutation 时也可调用已认证 API。 - 所有查询按已认证用户/tenant 过滤,绝不信任客户端 user ID。
- 并行启动独立读取,只返回可展示字段。
- 补齐 loading、empty、error 与 stale 状态。
- Mutation 成功后重新验证 router/session 数据。
管理员页可复用 /api/admin/users?page=&pageSize=&search=&role=&banned=,或把同一
查询放到 server function。保留 requireAdmin 与服务端角色检查。封禁/编辑 action
应接 Better Auth admin API 或显式授权 handler,而不只是修改表格 state。
账户页应查询 Creem 流程写入的 order 与 subscription 表。暴露管理 action 前,
先定义退款、取消、pending、entitlement 与 provider 对账的展示方式。
产品化验证
- 未登录用户被重定向,直接调用用户 API 返回 401。
- 非管理员不能打开管理员路由或调用其 API。
- 指标和表格来自作用域正确的服务端数据,而非 sample array。
- 管理员搜索/分页显示 D1 用户,action 安全持久化。
- 名称更新同步到 D1 与 session/UI;头像上传已接通或移除。
- 订单/订阅反映 Creem 表与 webhook 变化。
- Billing/security 控件端到端实现,否则清晰移除。
- 测试 loading、empty、失败、移动端、键盘与本地化状态。
