云盘实现了点击热点上报系统，供 UED 根据页面点击分布调整设计。结果如下：
实现
采集上报
云盘使用 React，常规业务事件由 React 合成事件代理。热点 SDK 在 document 上监听点击事件，读取坐标后按设计稿尺寸 1200 * 800 归一化并上报。伪代码如下：
// 监听页面的点击事件
document.addEventListener('click', function(e) {
// 获取点击的原始坐标
var x = e.pageX;
var y = e.pageY;
// 获取页面的实际尺寸
var pageWidth = document.documentElement.scrollWidth;
var pageHeight = document.documentElement.scrollHeight;
// 将坐标值缩放到 1200 * 800 的设计稿坐标
var scaledX = Math.round(x / pageWidth * 1200);
var scaledY = Math.round(y / pageHeight * 800);
// 打包成对象
var reportData = {
x: scaledX,
y: scaledY,
};
// 将数据上报到服务器（这里假设你有一个名为 report 的函数来完成数据上报）
report(reportData);
});
数据清洗
上报数据写入 Kafka，由 Java 任务消费，并按分钟写入 MySQL。写入时按版本、AB 等维度分组。
数据展示
后台上传不同版本的设计稿（1200 * 800），再根据版本从数据库查询对应时间段的点位数据，并通过 ECharts 热力图展示。
当前限制
- 滚动
云盘当前没有整页滚动，因此未实现滚动场景下的点击坐标校准。
