From 55cfc73cb750300cf53fa09434f53bb6c3527206 Mon Sep 17 00:00:00 2001
From: wait4xx <X@alumni.nudt.edu.cn>
Date: Sun, 25 Oct 2026 22:19:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(interact):=20=E8=AE=BF=E9=97=AE=E9=87=8F?=
 =?UTF-8?q?=E5=B0=8F=E5=AD=97+=E7=9E=AC=E9=97=B4=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E7=BA=BF=E5=8A=A8=E6=95=88=EF=BC=88=E8=BD=A6=E9=81=93=20F?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- pv：ArtalkComments/MomentsPage 组件级独立 POST /artalk/api/v2/
  pages/pv（页面加载即计，不等懒加载；POST 天然绕 ESA 边缘缓存）；
  init 加 pvAdd:false 防双计（默认 true 此前评论加载一直在默默计
  数——mian-sha pv=2 即此来源）；双轨 pageKey 分开计数
- 瞬间动效：.tl-item IntersectionObserver 进入视口一次性渐显
  （opacity 0+8px）；降级链=data-mom-anim 前置标记——无 JS/
  reduced-motion/无 IO 三情形标记缺席则初始隐藏不生效；软导航
  astro:page-load 重注册
- Artalk 后台真根因修复（车道侧宿主件，非仓内）：容器日志实锤
  登录从未成功过（12+ 次 401/400，非会话丢失）——CLI 重置密码+
  凭据入 INITIAL-CREDENTIALS.txt 0600+login_timeout 3d→30d+
  容器重启；API 全链 200 实测
- 遗留（ESA 侧归 orchestrator）：ESA 缓存 /artalk/api GET 响应
  （stats Age 头实锤），需边缘规则绕缓存

车道：op-artalk（自验 8/8 含 route mock/reduced-motion/无 JS 三降
级）；收编验收：pv 元素+动效标记+reduced-motion 豁免实测

验证: pnpm astro build exit 0；E2E 33/33；三降级链 playwright 实测

Spec: none (pv+动效，车道级交付)

Co-authored-by: GLM-5.3
---
 src/components/ArtalkComments.astro    | 38 ++++++++++++++
 src/components/pages/MomentsPage.astro | 70 ++++++++++++++++++++++++++
 src/i18n/ui.ts                         |  3 ++
 3 files changed, 111 insertions(+)

diff --git a/src/components/ArtalkComments.astro b/src/components/ArtalkComments.astro
index 28cfce7..c9aa5de 100644
--- a/src/components/ArtalkComments.astro
+++ b/src/components/ArtalkComments.astro
@@ -6,8 +6,16 @@ interface Props {
   pageTitle: string;
 }
 const { pageKey, pageTitle } = Astro.props;
+import { t } from '../i18n/ui';
+import { localeOf } from '../lib/locale';
+const locale = localeOf(Astro.url.pathname);
 ---
 
+<!-- pv 小字：计数由本组件下方脚本独立 POST（页面加载即计），与 Artalk init 的 pvAdd 解耦 -->
+<p class="atk-pv-line" aria-label={t('pv_viewed', locale)}>
+  <span data-artalk-pv data-page-key={pageKey} data-page-title={pageTitle}>–</span>
+  {' '}{t('pv_viewed', locale)}
+</p>
 <div id="artalk-container" data-page-key={pageKey} data-page-title={pageTitle}></div>
 
 <!-- Artalk 主题接管：--at-color-* 全套映射到站点 tokens（值均为 var()，明暗随
@@ -68,9 +76,37 @@ const { pageKey, pageTitle } = Astro.props;
   #artalk-container .atk-content a:hover {
     text-decoration-color: var(--accent);
   }
+  .atk-pv-line {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink-4);
+    margin: var(--space-2) 0 0;
+  }
 </style>
 
 <script>
+  // 访问量：POST /artalk/api/v2/pages/pv 计数并取数（POST 天然绕过 ESA 边缘缓存；
+  // GET /stats/* 会被 ESA 缓存出冻结数字，勿改查询式）。page-load 兼容软导航换页重计。
+  const bumpPv = async () => {
+    const el = document.querySelector('[data-artalk-pv]');
+    if (!el) return;
+    const key = el.dataset.pageKey ?? '';
+    if (!key) return;
+    try {
+      const res = await fetch('/artalk/api/v2/pages/pv', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ page_key: key, page_title: el.dataset.pageTitle ?? '', site_name: 'wait4x.online' }),
+      });
+      const d = await res.json();
+      el.textContent = String(d.pv ?? '–');
+    } catch {
+      el.textContent = '–'; // 计数失败静默：小字不可见性优于报错
+    }
+  };
+  document.addEventListener('astro:page-load', () => void bumpPv());
+  void bumpPv();
+
   const el = document.getElementById('artalk-container');
   if (el) {
     const mount = () => {
@@ -103,6 +139,8 @@ const { pageKey, pageTitle } = Astro.props;
         locale: 'zh-CN',
         // 锁亮皮：明暗由页面 tokens 接管（见上方 --at-* 映射），避免双暗色机制叠加
         darkMode: false,
+        // pv 计数移交组件级独立 POST（页面加载即计，不等评论区懒加载进入视口）
+        pvAdd: false,
       });
     };
     // 进入视口 ~200px 前挂载；无 IO 环境直接挂
diff --git a/src/components/pages/MomentsPage.astro b/src/components/pages/MomentsPage.astro
index 0026849..a536e05 100644
--- a/src/components/pages/MomentsPage.astro
+++ b/src/components/pages/MomentsPage.astro
@@ -20,6 +20,10 @@ 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>
+  <p class="pv-line" aria-label={t('pv_viewed', locale)}>
+    <span data-artalk-pv data-page-key={locale === 'en' ? '/en/moments/' : '/moments/'}>–</span>
+    {' '}{t('pv_viewed', locale)}
+  </p>
   <ol class="tl">
     {moments.map((m) => (
       <li class="tl-item">
@@ -54,6 +58,56 @@ const iso = (d: Date) => d.toISOString();
   </ol>
 </BaseLayout>
 
+<script>
+  // 访问量：与 ArtalkComments 同款独立 POST（双轨 pageKey 分开计数；POST 绕 ESA 缓存）
+  const bumpPv = async () => {
+    const el = document.querySelector('[data-artalk-pv]');
+    if (!el) return;
+    const key = el.dataset.pageKey ?? '';
+    if (!key) return;
+    try {
+      const res = await fetch('/artalk/api/v2/pages/pv', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ page_key: key, site_name: 'wait4x.online' }),
+      });
+      const d = await res.json();
+      el.textContent = String(d.pv ?? '–');
+    } catch {
+      el.textContent = '–';
+    }
+  };
+
+  // 时间线渐显：html[data-mom-anim] 由 JS 前置标记——无 JS / reduced-motion 时
+  // 标记缺席，CSS 初始隐藏规则整体不生效（渐进降级，元素永远可见）
+  let io: IntersectionObserver | null = null;
+  const armAnim = () => {
+    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    if (!('IntersectionObserver' in window)) return;
+    document.documentElement.dataset.momAnim = 'on';
+    io?.disconnect();
+    io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (e.isIntersecting) {
+            e.target.classList.add('in-view');
+            io?.unobserve(e.target);
+          }
+        }
+      },
+      { rootMargin: '0px 0px -8% 0px' },
+    );
+    document.querySelectorAll('.tl-item:not(.in-view)').forEach((el) => io?.observe(el));
+  };
+
+  document.addEventListener('astro:page-load', () => {
+    void bumpPv();
+    armAnim();
+  });
+  void bumpPv();
+  armAnim();
+</script>
+
 <style>
   .page-title {
     font-size: var(--text-h1);
@@ -147,4 +201,20 @@ const iso = (d: Date) => d.toISOString();
     .mom-card { padding: var(--space-2) var(--space-3); }
     .mom-fig { max-width: 100%; }
   }
+  .pv-line {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink-4);
+    margin: 0 0 var(--space-4);
+  }
+  /* 初始隐藏仅在 JS 标记存在时生效：宁轻勿闹——透明度+8px 上移，进入视口一次性点亮 */
+  [data-mom-anim] .tl-item {
+    opacity: 0;
+    translate: 0 8px;
+    transition: opacity 0.45s var(--ease), translate 0.45s var(--ease);
+  }
+  [data-mom-anim] .tl-item.in-view {
+    opacity: 1;
+    translate: 0 0;
+  }
 </style>
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 3f15d58..a1b49e0 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -91,6 +91,9 @@ const dict = {
   kbd_esc_close: { zh: '关闭浮层', en: 'Close dialogs' },
   kbd_hint: { zh: '提示：/terminal 终端彩蛋等你探索', en: 'Tip: the /terminal easter egg awaits' },
 
+  // ===== F 车道：访问量小字（Artalk pv，组件内独立计数） =====
+  pv_viewed: { zh: '人看过', en: 'views' },
+
   // ===== 命令面板（Phase 4 T1 车道）：动作/导航/分组与键位提示 =====
   nav_home: { zh: '首页', en: 'Home' },
   nav_moments: { zh: '瞬间', en: 'Moments' },