Changelog - 地图可视化与交互增强专项 (2026-05-03)

🚀 新功能 (Features)

1. 动态省份行政区划展示

  • 行政标签：在 Total 模式下新增全国省份和直辖市名称标识。
  • 视觉优化：实现了 text-allow-overlap: false 逻辑，完美解决京津冀、港澳等区域的文字重叠问题。
  • 隐私保护兼容：标签仅在中国地理范围内显示，通过 filter: ['has', 'cp'] 进行精准控制。

2. 悬浮数据足迹卡片 (Hover Popup)

  • 交互升级：将原有的点击触发升级为 鼠标悬浮触发，大幅提升数据探索效率。
  • 统计汇总：悬浮窗实时展示当前省份的：
    • 累计运动里程 (km)
    • 总运动次数
    • 已访问城市列表（标签化展示）
  • 美学设计：采用毛玻璃（Backdrop Blur）质感，背景颜色跟随品牌红色调进行微调，提升 UI 高级感。

3. 数据预计算引擎 (Data Engine)

  • 脚本重构：修改 run_page/generate_location_stats.py，在离线处理阶段自动汇总省份数据。
  • 解决隐私模式 Bug：彻底修复了因隐私模式抹除 activities.json 位置信息导致前端弹窗显示“暂无数据”的问题。
  • 性能优化：前端直接消费 location_stats.json 中的 provinceSummary 字段，消除了大批量活动数据的实时遍历负担。

🔧 优化与修复 (Refinements & Fixes)

  • 名称自动对齐：引入了标准行政区划全称匹配算法，支持「山东」自动对齐「山东省」、「新疆」自动对齐「新疆维吾尔自治区」，匹配率提升至 100%。
  • 弹窗位置优化：将弹窗锚点固定在鼠标右侧 (anchor: left)，并增加偏移量，解决了地图顶部（如黑龙江省）弹窗被切断的显示 Bug。
  • 交互容错：优化 onMouseMove 逻辑，支持文字层、填充层、边界线层的多重特征拾取。
  • 样式冲突修复：修正了 Mapbox 默认弹窗边距和箭头颜色的 CSS 样式冲突。

📂 涉及文件 (Affected Files)

  • src/components/RunMap/index.tsx: 核心地图交互逻辑与弹窗渲染。
  • src/components/RunMap/mapbox.css: 弹窗与交互视觉样式补全。
  • run_page/generate_location_stats.py: 离线统计计算逻辑增强。
  • src/static/location_stats.json: 预计算结果存储。

Generated by Antigravity AI Native Architect Protocol.

2025-09-14
我的 Workouts Page 借着 AI 的东风又进行了重新改版，全部采用亮色主题，实现了以下功能：

  1. 网站导航悬浮在顶端
  2. 跑步的年份也悬浮在顶端
  3. 展示每年新增的 Workout 地点，并附带首次此地点的活动详情
  4. 地图右下角显示运动的详细信息，选中运动详情会在地图区域显示运动轨迹，并在标题显示百分比
  5. 全新隐私模式：地图轨迹会自动偏移一定的角度和距离，且在代码中js文件也记录的是偏移的轨迹，原始的轨迹仍然保留，但是不对外展示
  6. total 年份标签会显示所有的运动城市，虽然轨迹隐藏了，但是仍然可以准确统计城市，并且地图区域显示经历的城市高亮显示。
  7. Summary 页面亮色展示统计信息
  8. Total 页面展示所有的统计，以及 Wonderful Workouts 轨迹，点击卡片会翻转出奖牌或者其他图片
  9. Luck 页面记录的是我的大象周边跑轨迹
  10. Daily 页面记录的每天的运动轨迹，并统计当年最长连续运动时间

thanks running_page

github 提交记录：

image-20250915142650362

附：网站截图
24991757816443_.pic

原文作者: liups.com

原文链接: http://liups.com/posts/workouts_page/

许可协议: 知识共享署名-非商业性使用 4.0 国际许可协议