From 76b6b6b0228c5f30a0f5c24f57c1e24f9a5f50c7 Mon Sep 17 00:00:00 2001
From: wait4xx <X@alumni.nudt.edu.cn>
Date: Sun, 25 Oct 2026 12:20:42 +0800
Subject: [PATCH] =?UTF-8?q?fix(polish):=20=E8=A7=86=E8=A7=89=E7=BB=88?=
 =?UTF-8?q?=E5=AE=A1=E4=B8=A4=E9=98=BB=E5=A1=9E+=E4=B8=A4=E5=BB=BA?=
 =?UTF-8?q?=E8=AE=AE=E2=80=94=E2=80=94=E8=83=B6=E5=9B=8A=E7=9C=9F=E6=8C=82?=
 =?UTF-8?q?=E8=BD=BD=E4=B8=8E=E5=9B=BE=E6=B3=A8=E5=AD=97=E9=9D=A2=E9=87=8F?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 灯箱：.lb-act class+图标真实挂载（T1 的 python replace 对 i18n 化后
  文案静默失配成死代码——replace 无 assert 的教训）；清 560px 媒体
  查询内整段重复规则
- 样张图注：斜体行内裸 <video>/<audio> 字面量化（markdown 渲染成
  真元素：黑盒+吞文字）；指南加图注警示
- Artalk 建议项：输入框边界加深一档（--line 白底近不可见）；暗色
  发送按钮换深字（白字压浅底 2.4:1 低于 AA）

验证: build 23 页；样张页 video 元素 2→1（幽灵元素消失）；
      node tests/e2e.mjs 30/30 PASS；复验图 18/19 待视觉确认

Spec: 2026-10-25_add-media-and-polish

Co-authored-by: GLM-5.3
---
 content/posts/media-sample.md          |  4 +--
 docs/写作指南.md                       |  1 +
 src/components/ArtalkComments.astro    |  2 +-
 src/components/pages/GalleryPage.astro | 39 +++++++-------------------
 4 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/content/posts/media-sample.md b/content/posts/media-sample.md
index 1b633ce..3f16e0f 100644
--- a/content/posts/media-sample.md
+++ b/content/posts/media-sample.md
@@ -23,10 +23,10 @@ draft: false
 
 <video controls preload="metadata" width="320" height="240" src="/media/media-sample/sample-video.mp4"></video>
 
-*原生 <video> 控件，无 JS；源文件 45KB，faststart 已开启。*
+*原生 `<video>` 控件，无 JS；源文件 45KB，faststart 已开启。*
 
 ## 音频（raw HTML，440Hz 正弦波 mp3）
 
 <audio controls preload="metadata" src="/media/media-sample/sample-audio.mp3"></audio>
 
-*原生 <audio> 控件；源文件 18KB。*
+*原生 `<audio>` 控件；源文件 18KB。*
diff --git a/docs/写作指南.md b/docs/写作指南.md
index 9540aee..d447c23 100644
--- a/docs/写作指南.md
+++ b/docs/写作指南.md
@@ -47,6 +47,7 @@ public/media/my-post/clip.mp4      ← 文件放这里
 ```
 
 - `preload="metadata"` 必写（不预拖流量，只取时长/首帧）
+- **图注警示**：斜体图注行内不要裸写 `<video>`/`<audio>` 字样——markdown 会把它渲染成真实元素（黑盒+吞文字），提及时用反引号 \`<video>\`
 - 样式已全局处理（视频全宽圆角黑底、音频胶囊条）
 - /media/ 命名空间同时覆盖"仓内小文件"与"仓外 store 大文件"（见体积纪律表）
 
diff --git a/src/components/ArtalkComments.astro b/src/components/ArtalkComments.astro
index ac4c469..28cfce7 100644
--- a/src/components/ArtalkComments.astro
+++ b/src/components/ArtalkComments.astro
@@ -23,7 +23,7 @@ const { pageKey, pageTitle } = Astro.props;
     --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: var(--line);
+    --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);
diff --git a/src/components/pages/GalleryPage.astro b/src/components/pages/GalleryPage.astro
index 4837101..5753968 100644
--- a/src/components/pages/GalleryPage.astro
+++ b/src/components/pages/GalleryPage.astro
@@ -133,8 +133,14 @@ const first = cards[0];
         <span id="lb-exif">{first?.exif}</span>
         <span id="lb-count">1 / {cards.length}</span>
         <span class="lb-orig">
-          <a id="lb-original" href={first?.original} target="_blank" rel="noopener">{t('gallery_lightbox_original', locale)}</a>
-          <a id="lb-download" href={first?.original} download>{t('gallery_lightbox_download', locale)}</a>
+          <a id="lb-original" class="lb-act" href={first?.original} target="_blank" rel="noopener">
+            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h6v6M21 3l-9 9M10 5H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-4"></path></svg>
+            {t('gallery_lightbox_original', locale)}
+          </a>
+          <a id="lb-download" class="lb-act" href={first?.original} download>
+            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m0 0 4-4m-4 4-4-4M4 21h16"></path></svg>
+            {t('gallery_lightbox_download', locale)}
+          </a>
         </span>
       </div>
       <button id="lb-next" class="tap lbnav" type="button" aria-label={t('gallery_lightbox_next', locale)}>
@@ -417,33 +423,8 @@ const first = cards[0];
     right: var(--space-3);
   }
   @media (max-width: 560px) {
-    .lb-bottom { flex-wrap: wrap; }
-    .lb-orig {
-    display: inline-flex;
-    gap: var(--space-3);
-    margin-left: var(--space-2);
-  }
-  /* 动作胶囊：与 lbnav 同语言（暗底/描边/阴影），不再是裸链 */
-  .lb-act {
-    display: inline-flex;
-    align-items: center;
-    gap: 5px;
-    padding: 7px 12px;
-    border-radius: 10px;
-    border: 1px solid rgba(255, 255, 255, 0.22);
-    background: rgba(20, 24, 30, 0.55);
-    color: #dfe6f3;
-    font-family: var(--font-mono);
-    font-size: 12px;
-    text-decoration: none;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
-    backdrop-filter: blur(4px);
-    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
-  }
-  .lb-act:hover {
-    background: rgba(40, 48, 60, 0.75);
-    color: #fff;
-  }
+    .lb-bottom { flex-wrap: wrap; justify-content: center; }
+    .lb-orig { margin-left: 0; }
   .lb-meta { order: 3; flex-basis: 100%; }
   }
 </style>