Liquid247 Admin：运营后台的功能与前端工程实践

项目概览

Liquid247 Admin 是一套运营后台前端，将情报内容、监测配置、运营数据和账号管理集中在同一个工作空间。项目使用 React 与 TypeScript 开发，通过 MSW 在浏览器中模拟业务接口，无需后端服务即可体验主要操作流程。

• 在线演示
• GitHub 源码

当前部署为 Mock 演示版本，未连接真实交易所、账号服务或数据库。文中的探测、统计和业务操作均基于模拟数据。

情报工作台与内容发布

情报工作台提供分栏搜索、分页、编辑、保存、发布、下架和再发布操作，并统一使用已发布、未发布、已下架三种发布状态。超级管理员可以删除未发布内容，或归档已经发布过的内容。

编辑页包含标题、正文、类型、Token、发布时间、定时安排、点击量、收藏量和冻结快照。正文使用 Tiptap 富文本编辑器，支持标题、加粗、斜体、下划线、删除线、列表、引用、链接、分隔线，以及撤销和重做。

富文本以编辑器 JSON 字段 body_doc 作为主数据，自动提取纯文本保存到 body。前台预览按允许的节点与链接协议渲染，使编辑、存储与预览共享内容规范。

定时发布使用独立的 scheduled_at 字段，计划执行前仍保持未发布状态；实际发布时再更新发布时间。演示中的定时发布通过应用运行期间的请求触发检查，因此需要页面运行，不是离线执行的服务端任务。

监测与基础数据管理

后台将内容生产需要的基础资料与监测能力拆分为多个模块：

• 术语库：搜索、新增、编辑、删除以及发布状态管理。
• 监测池：搜索、启停和加入前探测，模拟成功、失败和超时结果。
• 巨鲸名单：维护地址、场所、胜率和 30 日盈亏，支持复制原始地址并展示最新关联情报。
• 链接数据：新增、编辑、探测和启停数据源，行情密钥仅维护 secret:// 引用。
• 延迟检测：查看节点覆盖、延迟和状态，执行周期或手动模拟探测，并配置阈值与异常策略。

探测凭证与品种、交易对绑定。禁用品种或数据源后，对应定时情报暂停自动发布；延迟异常时，则根据配置决定是否停止自动发布。

运营统计与账号权限

值班总览使用统一日期区间展示六项指标、PV/UV 趋势、新增注册趋势和类型分布，演示统计覆盖近 90 天数据。

前台用户管理支持按邮箱、数字 ID 和昵称搜索，以及停用、恢复、查看只读偏好与收藏、生成一次展示的模拟临时密码。

后台区分超级管理员和内容管理员。超级管理员负责创建、删除、启停内容管理员，并配置五个板块的授权。会话、导航、路由和 Mock 写接口均进行权限检查；停用或删除后台账号后，会清除该账号的模拟会话。

操作日志记录时间、账号、角色、动作、数字对象 ID、备注以及操作前后的状态，用于回看演示业务中的变更过程。

技术栈与工程结构

业务代码按职责组织：

src/app          路由布局、登录会话与权限
src/features     业务页面
src/components   共用页面、表格、筛选、状态与富文本编辑器
src/content      富文本规范、纯文本转换与安全预览
src/services     请求封装
src/mocks        种子数据、领域规则与 MSW 接口
src/types.ts     业务枚举与数据类型
e2e              浏览器流程测试

页面通过 services 请求接口，不直接访问模拟数据仓库。这一分层为后续接入真实服务保留了调用契约。

演示数据与部署

模拟数据保存在浏览器 localStorage 的 liquid247:mock-db:v2 中，修改后刷新仍会保留。项目支持旧版数据迁移，也提供“重置演示数据”入口来恢复初始状态。

MSW 的 Service Worker 需要 HTTPS 或 localhost 等安全上下文。静态部署时，应确保 /mockServiceWorker.js 可直接访问，并为 /admin/* 配置回退到 index.html。

若接入真实服务，需要将 MSW 启动限制在 Mock 模式，并调整请求地址。鉴权、审计、定时任务、密码服务和正式持久化需要由服务端实现；当前浏览器中的模拟流程用于展示前端功能与工程设计。

项目入口

• 体验 Liquid247 Admin 在线后台
• 查看 Liquid247 Admin 源码