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:
1 parent
80ab3ee3f3
commit
76b6b6b022
4 files changed
+14
-32
No files matched your search
@@ -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。*
|
||||||
@@ -47,6 +47,7 @@ public/media/my-post/clip.mp4 ← 文件放这里
|
|||||||
```
|
```
|
||||||
|
|
||||||
- `preload="metadata"` 必写(不预拖流量,只取时长/首帧)
|
- `preload="metadata"` 必写(不预拖流量,只取时长/首帧)
|
||||||
|
- **图注警示**:斜体图注行内不要裸写 `<video>`/`<audio>` 字样——markdown 会把它渲染成真实元素(黑盒+吞文字),提及时用反引号 \`<video>\`
|
||||||
- 样式已全局处理(视频全宽圆角黑底、音频胶囊条)
|
- 样式已全局处理(视频全宽圆角黑底、音频胶囊条)
|
||||||
- /media/ 命名空间同时覆盖"仓内小文件"与"仓外 store 大文件"(见体积纪律表)
|
- /media/ 命名空间同时覆盖"仓内小文件"与"仓外 store 大文件"(见体积纪律表)
|
||||||
|
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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>
|
||||||
Reference in new issue
Block a user