fix(polish): 视觉复核三轮——热力图末列可见与 en 首页版面平权

- 热力图:桌面 10px 格+2px 缝收进版心(53 列 634px 无横滚——唯一有
  数据的最新列曾被裁在滚出区呈空表);移动端锚定 scrollLeft 到最新列
- en 首页补 IdCard 名片区 + Latest photos 影像条(视觉复核版面平权建议)
- en/index 重复导入 getCollection 修复(构建炸点)

验证: pnpm astro build 21 页 exit 0;node tests/e2e.mjs 30/30 PASS
      (新构建全链)

Spec: 2026-10-25_fix-site-polish

Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed 2026-10-25 11:12:04 +08:00
1 parent e21fac7e1d
commit ebafa415b2
2 files changed
+26 -1

No files matched your search

+12 -1
View File
@@ -29,7 +29,7 @@ const summary = labels.summary.replace('{n}', String(total));
<section class="heatmap">
<h2 class="hm-title">{labels.title}</h2>
<!-- 53 列窄栏触屏放不下,容器横滚(格子原生 title 提示,无 JS) -->
<div class="hm-scroll">
<div class="hm-scroll" data-anchor-latest>
<div class="hm-grid" role="img" aria-label={summary}>
{weeks.map((week) =>
week.map((day) => (
@@ -51,6 +51,10 @@ const summary = labels.summary.replace('{n}', String(total));
<span class="hm-note">{labels.note}</span>
</p>
</section>
<script is:inline>
// 移动端横滚时锚定到最右(最新)列——数据在"今天",默认 scrollLeft=0 会展示一年前的空区
document.querySelectorAll('[data-anchor-latest]').forEach((el) => { el.scrollLeft = el.scrollWidth; });
</script>
<style>
.heatmap { margin-top: var(--space-6); }
@@ -96,6 +100,13 @@ const summary = labels.summary.replace('{n}', String(total));
color: var(--ink-3);
}
.hm-legend .hm-c { width: 9px; height: 9px; }
/* 桌面收进版心:10px 格 + 2px 缝 = 12px 节距 × 53 列 ≈ 634px,
无横滚(视觉复核:唯一有数据的最新的列曾恰被裁在滚出区) */
@media (min-width: 820px) {
.hm-grid { gap: 2px; }
.hm-c { width: 10px; height: 10px; }
.hm-scroll { overflow-x: visible; }
}
.hm-note {
margin-left: var(--space-3);
font-family: var(--font-mono);