From 19ffcf180bf8d697a90048212cb70e5096da20b1 Mon Sep 17 00:00:00 2001 From: wait4xx Date: Sun, 25 Oct 2026 11:45:06 +0800 Subject: [PATCH] =?UTF-8?q?feat(media):=20=E7=81=AF=E7=AE=B1=E5=8A=A8?= =?UTF-8?q?=E4=BD=9C=E8=83=B6=E5=9B=8A=E5=8C=96=E4=B8=8E=E6=AD=A3=E6=96=87?= =?UTF-8?q?=E4=B8=89=E5=AA=92=E6=A0=B7=E5=BC=8F=E6=AE=B5=EF=BC=88T1/T3?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 原图/下载：裸链 → 与 lbnav 同语言的胶囊按钮（图标+文字+暗底描边） - global.css 媒体段：正文 img 圆角限宽、*斜体独立段*图注约定、 video/audio 全宽样式（raw HTML 直书方案，指南随后） 验证: pnpm astro build 21 页 exit 0 Spec: 2026-10-25_add-media-and-polish Co-authored-by: GLM-5.3 --- src/components/pages/GalleryPage.astro | 44 +++++++++++++++++++++----- src/styles/global.css | 34 ++++++++++++++++++++ 2 files changed, 70 insertions(+), 8 deletions(-) diff --git a/src/components/pages/GalleryPage.astro b/src/components/pages/GalleryPage.astro index a657cbc..4837101 100644 --- a/src/components/pages/GalleryPage.astro +++ b/src/components/pages/GalleryPage.astro @@ -357,12 +357,26 @@ const first = cards[0]; gap: var(--space-3); margin-left: var(--space-2); } - .lb-orig a { + /* 动作胶囊：与 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; - color: #9db4ff; /* 灯箱恒为暗底：用亮蓝替代主题 --accent（亮色态下对比不足） */ - text-decoration: underline; - text-underline-offset: 0.2em; + 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 { flex: 1; @@ -409,12 +423,26 @@ const first = cards[0]; gap: var(--space-3); margin-left: var(--space-2); } - .lb-orig a { + /* 动作胶囊：与 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; - color: #9db4ff; /* 灯箱恒为暗底：用亮蓝替代主题 --accent（亮色态下对比不足） */ - text-decoration: underline; - text-underline-offset: 0.2em; + 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%; } } diff --git a/src/styles/global.css b/src/styles/global.css index 31c399a..fb0cc1d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -137,6 +137,40 @@ pre code { background: none; border: none; padding: 0; font-size: inherit; } .term-dots { display: flex; gap: 6px; margin-bottom: var(--space-2); } .term-dots span { width: 10px; height: 10px; border-radius: 50%; background: #30363d; } +/* ---------- 正文媒体（图/视频/音频，Phase 5 媒体支持） ---------- */ +/* 图片：markdown 相对路径经 Astro 图片服务优化；版心内圆角限宽 */ +.prose-reading img, .prose-tech img { + border-radius: 10px; + margin-block: 1.2em; + max-width: 100%; + height: auto; +} +/* 图注约定：紧跟媒体的 *斜体独立段* 视为图注（写作指南 docs/写作指南.md） */ +.prose-reading p > em:only-child, .prose-tech p > em:only-child { + display: block; + text-align: center; + font-size: 0.85em; + font-family: var(--font-sans); + color: var(--ink-3); + margin-top: -0.6em; + margin-bottom: 1.2em; +} +/* 视频与音频：原生标签，markdown raw HTML 直书（指南有模板） */ +.prose-reading video, .prose-tech video, +.prose-reading audio, .prose-tech audio { + display: block; + width: 100%; + margin-block: 1.2em; +} +.prose-reading video, .prose-tech video { + border-radius: 10px; + background: #000; + max-height: 72dvh; +} +.prose-reading audio, .prose-tech audio { + border-radius: 999px; +} + /* ---------- 列表/分隔 ---------- */ hr { border: none; border-top: 1px solid var(--line); margin-block: var(--space-4); }