feat(i18n): UI 字典串接与三页薄化——/en/ 全站落成

- op-gitea 车道：ui.ts 扩 26 键（占位 {n}/{title}/{exif} 约定），五组件 locale prop 串接，zh 零回归（48 键/18 页实测） - orchestrator 收尾：gallery/moments/about 三页 body 提取为 components/pages/*Page（zh/en 薄页双路由），/en/ 全家福 21 页 - 提取工程三坑入库：HTML 注释不可进 frontmatter 模块区；搬移脚本会吃开栏 ---；单级页面搬二级目录后 import 全线差一层验证: astro build 21 页 exit 0；/en/ 七类路由产物断言过；en 页 ICP 备案保留；zh 侧文案抽查不变 Spec: 2026-10-25_add-blog-i18n Co-authored-by: GLM-5.3
2026-10-25 09:26:14 +08:00
1 parent c74815b516
commit 4aa79fca06
@@ -0,0 +1,150 @@
+---
+import { Image } from 'astro:assets';
+import { getCollection } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { t } from '../../i18n/ui';
+import type { Locale } from '../../lib/locale';
+
+// /en/ 侧由 T4 薄页传 locale='en'；zh 路由无人传参，默认 zh 零回归
+interface Props {
+  locale?: Locale;
+}
+const { locale = 'zh' } = Astro.props;
+
+const moments = (await getCollection('moments')).sort(
+  (a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime(),
+);
+const iso = (d: Date) => d.toISOString();
+---
+
+<BaseLayout title={`${t('moments_title', locale)} · wait4x`}>
+  <h1 class="page-title">{t('moments_title', locale)}</h1>
+  <p class="page-note">{t('moments_note', locale)}</p>
+  <ol class="tl">
+    {moments.map((m) => (
+      <li class="tl-item">
+        <time class="tl-date" datetime={iso(m.data.pubDate)}>
+          {iso(m.data.pubDate).slice(0, 10)}
+        </time>
+        <div class="mom-card">
+          {m.data.image && (
+            <figure
+              class:list={[
+                'mom-fig',
+                (m.data.image.width ?? 0) < (m.data.image.height ?? 0) && 'vt',
+              ]}
+            >
+              <Image
+                src={m.data.image}
+                alt={m.data.text ?? m.data.tags.join(' ')}
+                widths={[480, 840]}
+                sizes="(min-width: 760px) 420px, calc(100vw - 140px)"
+              />
+            </figure>
+          )}
+          {m.data.text && <p>{m.data.text}</p>}
+          {m.data.tags.length > 0 && (
+            <p class="mom-tags">
+              {m.data.tags.map((tag) => <code class="tag">{`#${tag}`}</code>)}
+            </p>
+          )}
+        </div>
+      </li>
+    ))}
+  </ol>
+</BaseLayout>
+
+<style>
+  .page-title {
+    font-size: var(--text-h1);
+    line-height: var(--leading-heading);
+    color: var(--ink-1);
+    margin-top: var(--space-5);
+    text-wrap: balance;
+  }
+  .page-note {
+    font-size: 13px;
+    color: var(--ink-4);
+    margin-block: var(--space-1) var(--space-4);
+  }
+  .tl {
+    list-style: none;
+    margin: var(--space-4) 0 0;
+    padding: 0;
+  }
+  /* 时间线骨架：左 mono 日期 + 竖线 + --accent 节点 + 右侧内容卡 */
+  .tl-item {
+    position: relative;
+    margin: 0 0 var(--space-4) calc(var(--space-5) + var(--space-4));
+    padding-left: var(--space-4);
+    border-left: 1px solid var(--line);
+  }
+  .tl-item:last-child { margin-bottom: 0; }
+  .tl-item::before {
+    content: '';
+    position: absolute;
+    left: -5px;
+    top: 7px;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--accent);
+    box-shadow: 0 0 0 3px var(--bg);
+  }
+  .tl-date {
+    position: absolute;
+    left: calc(-1 * (var(--space-5) + var(--space-4)));
+    top: 4px;
+    width: var(--space-5);
+    text-align: right;
+    font-family: var(--font-mono);
+    font-size: 12.5px;
+    color: var(--ink-4);
+    font-variant-numeric: tabular-nums;
+  }
+  .mom-card {
+    border: 1px solid var(--line);
+    border-radius: 12px;
+    padding: var(--space-3) var(--space-4);
+    background: var(--bg-soft);
+  }
+  .mom-card > p { font-size: 15px; color: var(--ink-2); }
+  .mom-fig {
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 0 0 var(--space-2);
+    max-width: 420px;
+  }
+  .mom-fig.vt { max-width: 260px; }
+  .mom-fig :global(img) { width: 100%; height: auto; }
+  .mom-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1);
+    margin-top: var(--space-2);
+  }
+  .tag {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink-3);
+    background: var(--bg);
+    border-radius: 5px;
+    padding: 1px 7px;
+    white-space: nowrap;
+  }
+  /* 窄屏：日期卡到卡片上方，竖线左移收窄 */
+  @media (max-width: 760px) {
+    .tl-item { margin-left: var(--space-3); }
+    .tl-date {
+      position: static;
+      display: block;
+      width: auto;
+      text-align: left;
+      margin-bottom: var(--space-1);
+    }
+  }
+  @media (max-width: 560px) {
+    .mom-card { padding: var(--space-2) var(--space-3); }
+    .mom-fig { max-width: 100%; }
+  }
+</style>