fix(polish): 视觉终审两阻塞+两建议——胶囊真挂载与图注字面量化

- 灯箱:.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
This commit is contained in:
wait4xandGLM-5.3 committed 2026-10-25 12:20:42 +08:00
1 parent 80ab3ee3f3
commit 76b6b6b022
4 files changed
+14 -32

No files matched your search

+2 -2
View File
@@ -23,10 +23,10 @@ draft: false
<video controls preload="metadata" width="320" height="240" src="/media/media-sample/sample-video.mp4"></video> <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) ## 音频(raw HTML,440Hz 正弦波 mp3)
<audio controls preload="metadata" src="/media/media-sample/sample-audio.mp3"></audio> <audio controls preload="metadata" src="/media/media-sample/sample-audio.mp3"></audio>
*原生 <audio> 控件;源文件 18KB。* *原生 `<audio>` 控件;源文件 18KB。*
+1
View File
@@ -47,6 +47,7 @@ public/media/my-post/clip.mp4 ← 文件放这里
``` ```
- `preload="metadata"` 必写(不预拖流量,只取时长/首帧) - `preload="metadata"` 必写(不预拖流量,只取时长/首帧)
- **图注警示**:斜体图注行内不要裸写 `<video>`/`<audio>` 字样——markdown 会把它渲染成真实元素(黑盒+吞文字),提及时用反引号 \`<video>\`
- 样式已全局处理(视频全宽圆角黑底、音频胶囊条) - 样式已全局处理(视频全宽圆角黑底、音频胶囊条)
- /media/ 命名空间同时覆盖"仓内小文件"与"仓外 store 大文件"(见体积纪律表) - /media/ 命名空间同时覆盖"仓内小文件"与"仓外 store 大文件"(见体积纪律表)
+1 -1
View File
@@ -23,7 +23,7 @@ const { pageKey, pageTitle } = Astro.props;
--at-color-bg-grey: var(--bg-soft); --at-color-bg-grey: var(--bg-soft);
--at-color-bg-grey-transl: color-mix(in oklab, var(--bg-soft) 95%, transparent); --at-color-bg-grey-transl: color-mix(in oklab, var(--bg-soft) 95%, transparent);
--at-color-bg-light: var(--accent-soft); --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-font: var(--ink-2);
--at-color-deep: var(--ink-1); --at-color-deep: var(--ink-1);
--at-color-sub: var(--ink-3); --at-color-sub: var(--ink-3);
+10 -29
View File
@@ -133,8 +133,14 @@ const first = cards[0];
<span id="lb-exif">{first?.exif}</span> <span id="lb-exif">{first?.exif}</span>
<span id="lb-count">1 / {cards.length}</span> <span id="lb-count">1 / {cards.length}</span>
<span class="lb-orig"> <span class="lb-orig">
<a id="lb-original" href={first?.original} target="_blank" rel="noopener">{t('gallery_lightbox_original', locale)}</a> <a id="lb-original" class="lb-act" href={first?.original} target="_blank" rel="noopener">
<a id="lb-download" href={first?.original} download>{t('gallery_lightbox_download', locale)}</a> <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> </span>
</div> </div>
<button id="lb-next" class="tap lbnav" type="button" aria-label={t('gallery_lightbox_next', locale)}> <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); right: var(--space-3);
} }
@media (max-width: 560px) { @media (max-width: 560px) {
.lb-bottom { flex-wrap: wrap; } .lb-bottom { flex-wrap: wrap; justify-content: center; }
.lb-orig { .lb-orig { margin-left: 0; }
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-meta { order: 3; flex-basis: 100%; } .lb-meta { order: 3; flex-basis: 100%; }
} }
</style> </style>