Web 管理台页面说明

管理台访问地址 https://yeezytb.com/fanglian-admin，数据接口走后端 /api/v1/*，业务页面每 5 秒轮询刷新。顶部导航自左向右：文档、关系图谱、设备白名单、设备状态、事件记录、用户管理、激活码。

页面速查表

首页 /

品牌叙事 Landing 页：Hero（标语 + 绑定关系示例图）→ 数据带（4 端协同、3 类传感器等）→ 四个平台能力区（设备状态 / 事件回溯 / 关系图谱 / 订阅通知的示意卡片）→ 工作流四步（感知 / 上报 / 汇聚 / 触达）。CTA 按钮直达「设备状态」与「关系图谱」。

首页所有展示数据均为示例，非真实生产数据。

关系图谱 /admin/graph

全台信息密度最高的页面，聚合白名单、设备、用户三类数据，以三列画布呈现「用户 → 家庭组（内嵌 Hub 卡）→ 传感器」。

• 四种连线：设备绑定（橙色）、家庭组绑定（绿色）、Hub→传感器（灰色）、亲友卡（紫色虚线，失效卡降低透明度）。
• 交互：拖拽平移、滚轮缩放、适应/复位视图；悬停高亮关联链路；点击节点弹出详情抽屉（Hub 详情含配对码、绑定用户、传感器清单；用户详情含 openid 复制与绑定清单）。
• 筛选：关键词搜索、在线/离线分段、隐藏未绑定用户（默认开）、聚焦单一用户；未绑定用户收进独立虚线区域。
• 演示模式：URL 加 ?demo=1 可用内置 mock 数据演示多角色交叉绑定场景。

设备白名单 /admin/whitelist

设备库存（device_inventory）的只读视图：

• 顶部 5 个 KPI：白名单设备 / 已激活 / 未激活 / 注册用户 / 绑定关系。
• 表格列：家庭组、Hub、激活状态、激活时间、固件版本、配对码（未绑定设备显示 8 位绿底码，已绑定显示「已绑定」徽标）、已注册传感器、绑定用户、绑定来源。
• 支持搜索与激活状态筛选。白名单录入只能在服务器跑脚本（见固件与烧录），本页不提供新增入口。

设备状态 /admin/devices

全量 Hub 监控页：

• 顶部 3 个 KPI：Hub 总数 / 在线 / 离线·未激活。
• Hub 卡片按家庭组分组，每块标题为「家庭组 <household_id>」；卡片展示自定义名 + hub_id、固件版本、在线状态呼吸灯、最近上报时间，以及每个业务传感器（磁吸/压力/按钮）与其最近事件徽章。
• 支持按 Hub ID / 名称搜索、按在线状态筛选；点击卡片进入 Hub 详情页。

心跳传感器不在卡片中展示——它与 Hub 在线状态重复，只看业务传感器。

Hub 详情 /admin/devices/:hubId

单台 Hub 的按日巡查页：

• 日期选择器默认今天，可回看任意历史日期。
• 两个 KPI：当日业务传感器触发次数、距上次触发时长。
• 两张表：传感器表（Sensor ID / 名称 / 最近事件类型 / 最近时间）与当日事件明细表。

事件记录 /admin/events

今日全量事件流水页：

• 页头统计 chip：今日事件总数，及磁吸 / 压力 / 按钮 / 心跳各类型计数。
• 三维筛选：按 Hub、传感器类型、事件类型，实时显示命中条数。
• 表格列：时间（带类型色点）、Hub ID、Sensor ID、事件类型徽章、说明文案。

用户管理 /admin/users

注册用户列表与会员管理：

• 表格列：用户（称呼 + openid 短码，悬停看全文）、注册时间、家庭组数、设备数、会员状态（有效 / 有效·亲友共享 / 已过期 / 未开通，含到期时间与剩余天数）、亲友卡关系、激活码兑换记录（掩码）。
• 操作：延期 30 天、延期 365 天、撤销会员。
• 筛选：搜索称呼 / openid、会员状态分段、隐藏未绑定用户（默认开）。

该页依赖 NEXT_PUBLIC_ADMIN_SECRET 与后端 ADMIN_SECRET 配对；fanglian_web_admin 是后台管理员身份，不计入注册用户。

激活码管理 /admin/subscriptions（导航名「激活码」）

商业化发码入口：

• 右上角「生成月卡」（30 天）/「生成年卡」（365 天），生成后弹窗展示明文码（仅此一次，红色警告提示），支持一键复制。
• 列表展示掩码激活码、套餐、状态（未使用 / 已激活 / 已撤销）、使用人 openid、激活与创建时间，新生成的排最前。
• 支持按码 / 使用人搜索、按状态与套餐筛选。

调试入口 /demo

无硬件联调工具：手动填写 Hub ID + Hub Token（存浏览器 localStorage；可在服务器 /var/www/fanglian/data/fanglian_metadata.json 查到），四个按钮分别以真实设备身份触发磁吸 / 压力 / 按钮事件与心跳，用于验证设备状态、事件记录、关系图谱的联动。

设计约定

• 自定义名优先展示，系统 ID 以灰色小字 mono 字体随第二行展示。
• 在线状态用绿色呼吸灯（animate-ping），离线红色、未激活黄色。
• 传感器类型色彩：磁吸 = 橙（accent）、压力 = 绿、按钮 = 黄。
• 表格统一 min-w + 横向滚动，时间戳与状态标签不折行，长 ID 可断行。