仪表盘与管理后台

把模板中的仪表盘示例改造成真实连接的产品界面。

Dashboard 是围绕部分已接通认证/D1 边界的精致 UI starter。外壳、session 用户、资料名称修改、用户 API 与管理员授权可用;许多可见业务数据仍为静态或 mock。

外壳与保护

{-$locale}/_dashboard.tsxbeforeLoad 使用 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

  1. 定义页面所需的最小可序列化 view model。
  2. 通过 createServerFn 支持的 route loader 读取 session/数据;需要客户端刷新或 mutation 时也可调用已认证 API。
  3. 所有查询按已认证用户/tenant 过滤,绝不信任客户端 user ID。
  4. 并行启动独立读取,只返回可展示字段。
  5. 补齐 loading、empty、error 与 stale 状态。
  6. Mutation 成功后重新验证 router/session 数据。

管理员页可复用 /api/admin/users?page=&pageSize=&search=&role=&banned=,或把同一 查询放到 server function。保留 requireAdmin 与服务端角色检查。封禁/编辑 action 应接 Better Auth admin API 或显式授权 handler,而不只是修改表格 state。

账户页应查询 Creem 流程写入的 ordersubscription 表。暴露管理 action 前, 先定义退款、取消、pending、entitlement 与 provider 对账的展示方式。

产品化验证

  • 未登录用户被重定向,直接调用用户 API 返回 401。
  • 非管理员不能打开管理员路由或调用其 API。
  • 指标和表格来自作用域正确的服务端数据,而非 sample array。
  • 管理员搜索/分页显示 D1 用户,action 安全持久化。
  • 名称更新同步到 D1 与 session/UI;头像上传已接通或移除。
  • 订单/订阅反映 Creem 表与 webhook 变化。
  • Billing/security 控件端到端实现,否则清晰移除。
  • 测试 loading、empty、失败、移动端、键盘与本地化状态。

相关页面

On this page