多链互联中继系统可视化控制台

多链互联中继系统可视化控制台是一个面向 Relayer 场景的前后端分离项目，用于展示多链接入状态、跨链消息生命周期和跨链流量分布。项目提供 全局概览、消息追踪、统计热力图 三类核心视图，适合用于组内协作、方案演示和真实数据联调。

项目简介

本项目由前端展示层和后端聚合层组成：

• 前端：基于 Vue 3、Vite、Element Plus、ECharts，负责交互与可视化展示
• 后端：基于 Spring Boot、MyBatis、MySQL，负责聚合 Relayer 相关数据并提供接口
• 数据策略：优先读取生命周期分析表；当分析表数据不足时，自动回退到归档表、消息池和 ACL 相关数据

适用场景包括：

• 快速了解当前多链接入与组件运行状态
• 演示跨链消息在 Relayer 体系中的处理流程
• 接入真实数据库后观察拓扑、消息、证明和统计结果

核心功能

模块	路由	说明
全局概览	/overview	展示接入链路、组件状态、网络拓扑、核心 KPI 和实时消息流
消息追踪	/trace/:messageId?	按 messageId、ucpId 或 messageKey 查看单条消息生命周期
统计热力图	/analytics	按链级、域名级、应用级分析跨链路径、成功率、时延和流向

系统架构

flowchart LR
    A["Relayer MySQL 数据库"] --> B["Spring Boot API"]
    B --> C["Vue 3 可视化前端"]

    A --> D["生命周期分析表"]
    A --> E["归档表 / 消息池 / ACL"]

    D --> B
    E --> B

Loading

后端当前提供的核心接口如下：

• GET /api/overview/summary
• GET /api/overview/topology
• GET /api/overview/live-feed
• GET /api/trace/{messageId}
• GET /api/analytics/heatmap
• GET /api/system/status

仓库结构

.
├── backend/                    # Spring Boot 后端
│   ├── src/main/java/...       # Controller / Service / Mapper
│   └── src/main/resources/     # application.yml 与 MyBatis XML
├── frontend/                   # Vue 3 前端
│   ├── src/api/                # 接口封装
│   ├── src/pages/              # 页面入口
│   ├── src/components/         # 图表与业务组件
│   └── .env.live               # 前端真实数据配置
├── sql/                        # 分析表初始化 SQL
├── scripts/                    # 数据探索与辅助脚本
└── out/                        # 数据结构分析产物

技术栈

前端

• Vue 3
• Vite
• TypeScript
• Element Plus
• ECharts
• vue-echarts
• Vue Router

后端

• Java 17
• Spring Boot 3.3.3
• MyBatis
• MySQL
• Maven

数据来源与回退逻辑

为保证在真实数据尚未完全沉淀时仍可展示关键页面，后端采用分层读取策略：

1. 优先读取分析表
   • relayer_message_lifecycle
   • relayer_message_stage_event
   • relayer_analytics_hourly
2. 分析表不足时回退到归档与业务表
   • sdp_msg_archive
   • auth_msg_archive
   • ucp_pool
   • sdp_msg_pool
3. 进一步回退到关系类基础表
   • cross_chain_msg_acl
   • domain_cert
   • tpbta
   • plugin_server_objects
   • ptc_service

这意味着即使生命周期宽表尚未完成灌数，系统仍可展示基础拓扑、部分消息追踪结果和热力分析数据。

快速开始

当前项目以 本地链真实数据接入 为主，前端默认面向真实后端接口运行；后续接入系统和其他测试链时，无需调整前端整体使用方式。

1. 环境准备

• Java 17
• Maven 3.9+
• Node.js 18+
• npm
• MySQL 8.x
• 已存在的 relayer 数据库

2. 初始化分析表

如需启用生命周期追踪和热力分析增强能力，先执行：

mysql -h127.0.0.1 -P3306 -uroot -p relayer < sql/relayer_demo_analytics.sql

3. 启动后端

cd backend
export RELAYER_DB_HOST=127.0.0.1
export RELAYER_DB_PORT=3306
export RELAYER_DB_NAME=relayer
export RELAYER_DB_USER=root
export RELAYER_DB_PASSWORD=你的数据库密码
mvn spring-boot:run

默认后端地址：http://127.0.0.1:18081

4. 启动前端

cd frontend
npm install
npm run dev:live

前端通过 Vite 代理将 /api 请求转发到 VITE_BACKEND_TARGET，默认目标为 http://127.0.0.1:18081。

配置说明

后端环境变量

后端配置文件位于 backend/src/main/resources/application.yml。

变量	默认值	说明
SERVER_PORT	18081	后端服务端口
RELAYER_DB_HOST	127.0.0.1	MySQL 主机地址
RELAYER_DB_PORT	3306	MySQL 端口
RELAYER_DB_NAME	relayer	数据库名称
RELAYER_DB_USER	root	数据库用户名
RELAYER_DB_PASSWORD	change_me	数据库密码
RELAYER_ADMIN_HOST	127.0.0.1	Relayer Admin 地址
RELAYER_ADMIN_PORT	8088	Relayer Admin 端口
ETHEREUM_RPC	127.0.0.1:32002	默认链 RPC 地址

前端运行模式

• 当前默认使用 frontend/.env.live
• 前端通过 /api 代理请求真实后端接口
• 当前适用于本地链真实数据接入场景
• 后续接入其他测试链时，可继续沿用同一套前端刷新与展示逻辑

常用命令：

cd frontend
npm run dev:live
npm run build

刷新机制

系统当前采用 前端定时轮询后端接口 的方式刷新页面数据，适合当前本地链联调以及后续接入其他测试链的使用场景。

• 前端通过 /api 代理请求真实后端接口
• 后端运行后，前端会自动周期性拉取最新数据
• 当前无需引入 WebSocket 或消息推送机制
• 后续接入其他测试链时，无需修改前端刷新机制，只需保证后端接口持续返回最新状态

当前页面刷新频率如下：

• 全局概览：每 4 秒刷新一次
• 消息追踪：每 3 秒刷新一次
• 统计热力图：每 10 秒刷新一次

因此，在系统运行期间，只要后端接口数据发生变化，前端页面会自动更新，无需手动刷新浏览器。

页面说明

全局概览

用于查看系统整体状态，主要包括：

• 物理链与逻辑域名接入数量
• 插件服务、PTC、Relayer 运行状态
• 域名与物理链拓扑关系
• 消息总量、成功率、处理中数量、平均时延
• 最新消息流转记录

消息追踪

用于查看单条消息当前所处阶段，支持：

• 按 messageId、ucpId、messageKey 查询
• 展示源链发起、Relayer 捕获、统一证明构建、PTC 验证、目标链执行等阶段
• 当生命周期宽表为空时，自动回退到归档表和 ACL 信息生成追踪结果

统计热力图

用于分析跨链路径分布，支持：

• 链级、域名级、应用级视图
• 时间范围筛选
• 自环过滤
• 成功率、平均时延、最近消息时间和 Sankey 流向展示

辅助脚本与资料

• sql/relayer_demo_analytics.sql：创建生命周期宽表、阶段表、小时统计表和原始链事件表
• scripts/explore_relayer_schema.py：扫描本地 relayer 数据库并输出表结构报告与字段映射建议
• out/schema_report.md：当前数据库结构探索报告

已知边界

当前展示能力会受到真实库数据完整度影响，主要包括：

• crosschain_channel 为空时，无法完整展示通道已建成状态
• bta 与 tpbta 数据不足时，锚点和 lane 绑定信息会缺失
• ucp_pool、sdp_msg_pool、auth_msg_pool 数据不足时，实时链路细节会减少
• 生命周期宽表为空时，系统会自动回退，但精细时延和阶段信息会相应减少

阅读建议

对于首次接触本项目的成员，建议按以下顺序阅读：

1. 阅读本 README
2. 启动前后端联调环境，观察真实数据刷新效果
3. 查看 frontend/src/pages/ 下的页面实现
4. 查看 backend/src/main/java/com/demo/relayer/controller/ 下的接口入口
5. 结合 backend/src/main/resources/mapper/xml/ 理解真实数据来源