From 31eb44caee09e0e07a56135640a7b0036cb70503 Mon Sep 17 00:00:00 2001
From: wait4xx <X@alumni.nudt.edu.cn>
Date: Tue, 3 Nov 2026 11:18:35 +0800
Subject: [PATCH] =?UTF-8?q?fix(comments):=20=E8=AF=84=E8=AE=BA=E5=A4=B1?=
 =?UTF-8?q?=E8=B4=A5=E6=8F=90=E7=A4=BA=E8=AF=AF=E6=8A=A5=E4=B8=8E=E7=9E=AC?=
 =?UTF-8?q?=E9=97=B4=E8=AF=84=E8=AE=BA=E5=8C=BA=E9=85=8D=E8=89=B2=E8=84=B1?=
 =?UTF-8?q?=E5=90=8C=E6=AD=A5=EF=BC=885i=20T2/T3=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户实测：「评论区总是显示加载失败，但是实际上是正常显示的，另外瞬间的评论区
的颜色和主题色不同步」。

T2 误报根因：软导航/二次挂载时 `#artalk-lib` 脚本标签已在 DOM，但 `window.Artalk`
尚未就绪，旧代码直接 `initArtalk()` → `!lib` 分支 `showRetry(true)` → 失败提示
永久显示；随后库加载完成、评论正常渲染，提示却留在页面上。
- 脚本标签在但库未就绪 → 等它的 load 事件再 init，不再立即判失败
- 失败提示只留真失败：script.onerror，或超时且确实未挂载
- `mounting` 在所有成功/失败路径复位（旧代码失败后永真，把 IO/锚点/滚底/重试全堵死）
- 成功路径清提示；三条触发路径与重试钮、astro:page-load 复核全部保留

T3 配色脱同步：18 个 `--at-color-*` 映射原先只写在 `#artalk-container` 作用域，
瞬间容器是 `mom-atk-<slug>` 不在其内 → 回落到 Artalk 默认白底。
- 抽成共享片段 geek/ArtalkThemeStyles.astro（两处引用，杜绝双份漂移）
- **额外挖出的第 4 个坑**：Artalk init 成功会给容器加 `.artalk` 类，其 CDN 样式表
  里 `.artalk{--at-color-bg:#fff}` 与裸属性选择器 `[data-artalk-panel]` 同特异性
  且后加载 → 平级后来居上。瞬间容器选择器加 `body` 前缀 (0,1,1) 压住；
  文章页是 `#artalk-container`(1,0,0) 本来就压得住，所以只有瞬间翻白

验证: 构建 exit 0；E2E 46/46；我独立复测——
      ① 文章页挂载成功且 #artalk-retry 保持 hidden
      ② 连发 3 次 astro:page-load 仍不误报、仍挂载
      ③ 瞬间评论区明暗两态 --at-color-bg 实测 rgb(255,255,255)/rgb(25,29,35)
         分别等于 --bg，容器带 .artalk 类（说明是 init 后真态）

Spec: 2026-11-02_blog-5i-fonts-polish (T2/T3)

Co-authored-by: GLM-5.3
---
 src/components/ArtalkComments.astro         | 95 +++++++--------------
 src/components/MomentComments.astro         |  3 +
 src/components/geek/ArtalkThemeStyles.astro | 86 +++++++++++++++++++
 3 files changed, 120 insertions(+), 64 deletions(-)
 create mode 100644 src/components/geek/ArtalkThemeStyles.astro

diff --git a/src/components/ArtalkComments.astro b/src/components/ArtalkComments.astro
index 463b8ba..38d2be3 100644
--- a/src/components/ArtalkComments.astro
+++ b/src/components/ArtalkComments.astro
@@ -8,6 +8,7 @@ interface Props {
 const { pageKey, pageTitle } = Astro.props;
 import { t } from '../i18n/ui';
 import ViewMeta from './geek/ViewMeta.astro';
+import ArtalkThemeStyles from './geek/ArtalkThemeStyles.astro';
 import { localeOf } from '../lib/locale';
 const locale = localeOf(Astro.url.pathname);
 ---
@@ -21,64 +22,10 @@ const locale = localeOf(Astro.url.pathname);
   <button type="button" class="atk-retry-btn" id="artalk-retry-btn">重试</button>
 </p>
 
-<!-- Artalk 主题接管：--at-color-* 全套映射到站点 tokens（值均为 var()，明暗随
-     html[data-theme] 翻转 tokens 自动生效，一套规则双态成立）。
-     依据：Artalk.css(v2.10) 全部表面由这 18 个变量驱动；init 锁 darkMode:false
-     防 Artalk 自带 atk-dark-mode 类与接管层打架。弹层挂 body 下需单独同款映射 -->
+<!-- 主题接管（--at-color-* 全套映射 + 气质规则）已抽到共享片段：
+     文章容器 #artalk-container 与瞬间容器 [data-artalk-panel] 用同一份，避免漂移 -->
+<ArtalkThemeStyles />
 <style is:global>
-  #artalk-container,
-  /* Artalk.css 运行时才挂 head，平级选择器后来居上：body 前缀提一级特异性保住覆盖 */
-  body .atk-layer-wrap {
-    --at-color-bg: var(--bg);
-    --at-color-bg-transl: color-mix(in oklab, var(--bg) 95%, transparent);
-    --at-color-bg-grey: var(--bg-soft);
-    --at-color-bg-grey-transl: color-mix(in oklab, var(--bg-soft) 95%, transparent);
-    --at-color-bg-light: var(--accent-soft);
-    --at-color-border: color-mix(in oklab, var(--ink-4) 55%, transparent); /* --line 在白底近不可见（视觉终审建议项），加深一档 */
-    --at-color-font: var(--ink-2);
-    --at-color-deep: var(--ink-1);
-    --at-color-sub: var(--ink-3);
-    --at-color-grey: var(--ink-3);
-    --at-color-meta: var(--ink-4);
-    --at-color-light: var(--ink-4);
-    --at-color-main: var(--accent);
-    /* 高度限高渐隐遮罩必须与 bg 同源，否则暗色下露白腿 */
-    --at-color-gradient: linear-gradient(180deg, transparent, var(--bg));
-    /* red/pink/yellow/green 语义功能色保留官方默认：纪律只管气质，不损语义 */
-  }
-
-  /* 气质对齐（不动排版）：字体、头像圆角、时间戳 mono、链接纪律 */
-  #artalk-container {
-    font-family: var(--font-sans);
-  }
-  #artalk-container .atk-avatar img {
-    border-radius: 8px;
-  }
-  #artalk-container .atk-meta,
-  #artalk-container .atk-ua {
-    font-family: var(--font-mono);
-    font-size: 12px;
-  }
-  #artalk-container .atk-copyright {
-    font-family: var(--font-mono);
-    font-size: 11px;
-    color: var(--ink-4);
-  }
-  #artalk-container .atk-textarea,
-  #artalk-container .atk-input,
-  #artalk-container .atk-send-btn,
-  #artalk-container .atk-btn {
-    border-radius: 8px;
-  }
-  #artalk-container .atk-content a {
-    color: var(--accent);
-    text-decoration: underline;
-    text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
-    text-underline-offset: 0.2em;
-  }
-  #artalk-container .atk-content a:hover {
-    text-decoration-color: var(--accent);
-  }
   .atk-load-hint {
     display: flex;
     align-items: center;
@@ -113,16 +60,33 @@ const locale = localeOf(Astro.url.pathname);
     let mounted = false;
     const retryEl = document.getElementById('artalk-retry');
     const showRetry = (show: boolean) => { if (retryEl) retryEl.hidden = !show; };
+    const libReady = () => (window as unknown as { Artalk?: { init: (o: object) => void } }).Artalk;
+    // 超时兜底：5s 确实未挂载才提示；同时**复位 mounting** —— 否则一次超时会把后续
+    // 所有触发（IO / 锚点 / 滚底 / 重试）全堵死，评论区从此空着
     const armTimeout = () => {
       window.setTimeout(() => {
-        if (!mounted) showRetry(true);
+        if (mounted) return;
+        mounting = false;
+        showRetry(true);
       }, 5000);
     };
     const mount = () => {
       if (mounting || mounted) return;
       mounting = true;
       armTimeout();
-      if (document.getElementById('artalk-lib')) return initArtalk();
+      // 库已就绪（软导航二次进入、文章间跳转最常见）→ 直接 init
+      if (libReady()) return initArtalk();
+      const existing = document.getElementById('artalk-lib') as HTMLScriptElement | null;
+      if (existing) {
+        // 脚本标签已在、但库还没就绪（软导航后二次挂载的典型态）：**等它 load**。
+        // 这里直接判失败，正是用户看到的「评论区正常显示却挂着加载失败提示」的根因。
+        const onLoad = () => {
+          existing.removeEventListener('load', onLoad);
+          initArtalk();
+        };
+        existing.addEventListener('load', onLoad);
+        return;
+      }
       // 官方部署文档要求 CSS 手动引入（JS 不自动注入）；此前缺失导致评论区自上线起跑在 UA 默认样式上
       const cssReady = new Promise<void>((done) => {
         if (document.getElementById('artalk-css')) return done();
@@ -138,18 +102,21 @@ const locale = localeOf(Astro.url.pathname);
       s.id = 'artalk-lib';
       s.src = 'https://wait4x.online/artalk/dist/Artalk.js';
       s.onload = () => { void cssReady.then(initArtalk); };
+      // 真失败之一：脚本拉不到（404 / 被拦截）——只有这时才报错
+      s.onerror = () => { mounting = false; showRetry(true); };
       document.head.appendChild(s);
     };
     const initArtalk = () => {
-      const lib = (window as unknown as { Artalk?: { init: (o: object) => void } }).Artalk;
-      // 只有库真正就绪才算挂载成功：否则脚本 404/被拦截时会把"空容器"误标成已挂载，
-      // 5s 兜底提示也被一并绕过（用户看到的正是"评论区一直空着"）
+      const lib = libReady();
+      // 库仍未就绪：可能是 onload 早于 window.Artalk 赋值，也可能是慢网。此处**不报错**
+      // （报错就是用户看到的误报），复位后交给超时兜底或后续触发再试。
       if (!lib) {
-        showRetry(true);
+        mounting = false;
         return;
       }
       mounted = true;
-      showRetry(false);
+      mounting = false;
+      showRetry(false); // 挂载成功 → 清掉任何已显示的提示
       el.dataset.artalkMounted = '1';
       lib?.init({
         el: '#artalk-container',
diff --git a/src/components/MomentComments.astro b/src/components/MomentComments.astro
index 727b027..50668c8 100644
--- a/src/components/MomentComments.astro
+++ b/src/components/MomentComments.astro
@@ -16,6 +16,7 @@
  * 放在卡片底部让读者不开评论也能看见条数。
  */
 import ViewMeta from './geek/ViewMeta.astro';
+import ArtalkThemeStyles from './geek/ArtalkThemeStyles.astro';
 import { t } from '../i18n/ui';
 import type { Locale } from '../lib/locale';
 
@@ -52,6 +53,8 @@ const retryText = locale === 'zh' ? '重试' : 'Retry';
       </p>
     </div>
   </details>
+  <!-- 与文章页共用同一份 Artalk 主题映射（瞬间容器 mom-atk-* 无此映射时会回落官方默认色） -->
+  <ArtalkThemeStyles />
   <div class="mom-cm-meta">
     <ViewMeta pageKey={pageKey} locale={locale} mode="readonly" showPv={false} />
   </div>
diff --git a/src/components/geek/ArtalkThemeStyles.astro b/src/components/geek/ArtalkThemeStyles.astro
new file mode 100644
index 0000000..fdfb8bf
--- /dev/null
+++ b/src/components/geek/ArtalkThemeStyles.astro
@@ -0,0 +1,86 @@
+---
+/**
+ * Artalk 主题接管（Phase 5i T3：从 ArtalkComments 抽出的共享片段，两处组件共用，不复制两份）。
+ *
+ * 为什么要抽：文章页容器是 `#artalk-container`，瞬间页容器是 `mom-atk-<slug>`
+ * （带 `[data-artalk-panel]`）。原先 18 个 `--at-color-*` 映射只写在 `#artalk-container`
+ * 作用域，瞬间评论区因此回落 Artalk 官方默认色（白底深字）——暗色主题下尤其突兀。
+ * 现在一套片段覆盖三种宿主：文章容器 / 瞬间容器 / Artalk 弹层（挂在 body 下）。
+ *
+ * 依据：Artalk.css(v2.10) 全部表面由这 18 个变量驱动；值均为 `var(--token)`，
+ * 明暗随 `html[data-theme]` 翻转自动生效，一套规则双态成立。init 侧统一锁
+ * `darkMode: false`，防 Artalk 自带 `atk-dark-mode` 类与接管层打架。
+ */
+---
+
+<style is:global>
+  /* ── 18 个色彩变量：三种宿主一套映射 ──
+     瞬间容器必须用 `body [data-artalk-panel]`(0,1,1)：Artalk init 后会给容器加 `.artalk` 类，
+     它从 CDN 后加载的样式表里有 `.artalk{--at-color-bg:#fff…}`，与裸属性选择器 (0,1,0) 同特异性
+     且后来居上 → 暗色下瞬间评论区会翻白底（实测踩到）。文章容器是 ID(1,0,0) 本就压得住。 */
+  #artalk-container,
+  body [data-artalk-panel],
+  /* Artalk.css 运行时才挂 head，平级选择器后来居上：body 前缀提一级特异性保住覆盖 */
+  body .atk-layer-wrap {
+    --at-color-bg: var(--bg);
+    --at-color-bg-transl: color-mix(in oklab, var(--bg) 95%, transparent);
+    --at-color-bg-grey: var(--bg-soft);
+    --at-color-bg-grey-transl: color-mix(in oklab, var(--bg-soft) 95%, transparent);
+    --at-color-bg-light: var(--accent-soft);
+    --at-color-border: color-mix(in oklab, var(--ink-4) 55%, transparent); /* --line 在白底近不可见（视觉终审建议项），加深一档 */
+    --at-color-font: var(--ink-2);
+    --at-color-deep: var(--ink-1);
+    --at-color-sub: var(--ink-3);
+    --at-color-grey: var(--ink-3);
+    --at-color-meta: var(--ink-4);
+    --at-color-light: var(--ink-4);
+    --at-color-main: var(--accent);
+    /* 高度限高渐隐遮罩必须与 bg 同源，否则暗色下露白腿 */
+    --at-color-gradient: linear-gradient(180deg, transparent, var(--bg));
+    /* red/pink/yellow/green 语义功能色保留官方默认：纪律只管气质，不损语义 */
+  }
+
+  /* ── 气质对齐（不动排版）：字体、头像圆角、时间戳 mono、链接纪律 ── */
+  #artalk-container,
+  body [data-artalk-panel] {
+    font-family: var(--font-sans);
+  }
+  #artalk-container .atk-avatar img,
+  body [data-artalk-panel] .atk-avatar img {
+    border-radius: 8px;
+  }
+  #artalk-container .atk-meta,
+  #artalk-container .atk-ua,
+  body [data-artalk-panel] .atk-meta,
+  body [data-artalk-panel] .atk-ua {
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  #artalk-container .atk-copyright,
+  body [data-artalk-panel] .atk-copyright {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-4);
+  }
+  #artalk-container .atk-textarea,
+  #artalk-container .atk-input,
+  #artalk-container .atk-send-btn,
+  #artalk-container .atk-btn,
+  body [data-artalk-panel] .atk-textarea,
+  body [data-artalk-panel] .atk-input,
+  body [data-artalk-panel] .atk-send-btn,
+  body [data-artalk-panel] .atk-btn {
+    border-radius: 8px;
+  }
+  #artalk-container .atk-content a,
+  body [data-artalk-panel] .atk-content a {
+    color: var(--accent);
+    text-decoration: underline;
+    text-decoration-color: color-mix(in oklab, var(--accent) 40%, transparent);
+    text-underline-offset: 0.2em;
+  }
+  #artalk-container .atk-content a:hover,
+  body [data-artalk-panel] .atk-content a:hover {
+    text-decoration-color: var(--accent);
+  }
+</style>