fix(ui,a11y): 修 logo 深色模式不可见 + 补 tailwind font-calligraphy 工具类

修复 A:header logo 深色模式字被吞
- logo.svg 右侧公司名(睿新致遠 + NOVALON)硬编码 fill='#0A0E14',
  深色背景下 background 同色不可见,红色印章下书法字与英文全部被吞。
- 复用既有 logo-white.svg(白字 + 红印章)作为深色版,
  header 渲染双 <Image>,按 html[data-theme] CSS 显隐。
- 双 Image 不占位(display:none),零 JS 闪烁,未来主题切换器自动生效。

修复 B:font-calligraphy 工具类不生成
- tailwind.config.js 的 fontFamily 此前未声明 calligraphy key,
  导致 font-calligraphy utility 永不生成,4 处装饰书法字
  (BrandStamp「值得信赖」/ ChallengeSection「使命」/ WhyUsSection「睿」「我们」)
  静默回退 sans。
- fontFamily 加 calligraphy: ['var(--font-calligraphy-system)']。

审计脚本:
- logo-compare*.mjs:生产 vs 本地 logo 对比定位
- logo-dark-verify.mjs:明暗双版渲染验证
- font-calligraphy-verify.mjs:合成探针验证 utility 生效

验证:
- type-check 0 error · lint 0 error(127 warnings 既有项与本次无关)
- 深浅色 header 截图:明暗版正确切换,书法字 + NOVALON 清晰可见
- font-calligraphy 合成探针 computed fontFamily = STKaiti, KaiTi, 楷体, SimKai, serif ✓
This commit is contained in:
2026-09-20 11:50:58 +08:00
parent 09ff3e026b
commit 918d845aef
9 changed files with 383 additions and 1 deletions
+11
View File
@@ -380,6 +380,17 @@ body {
--grid-gap-2xl: 3rem;
}
/* === Logo 明暗双版(html[data-theme] 驱动)===
站点主题由 html[data-theme='dark'] 属性驱动,而非 .dark class,
因此 Tailwind dark: 变体(darkMode:'class')不匹配 —— 用显式属性选择器切换。
- logo.svg(深黑字)用于浅色背景;logo-white.svg(白字)用于深色背景。
两个 <Image> 都在 DOM 内、按 data-theme 显隐(display:none,不占位),
无 JS 闪烁,未来主题切换器改 data-theme 时自动生效。
SSR 初始 HTML 无 data-theme → 默认显示 light 版,head 内联脚本同步设置
data-theme 后即时切换,不产生重叠。 */
html[data-theme='dark'] .logo-on-light { display: none; }
html:not([data-theme='dark']) .logo-on-dark { display: none; }
/* === 暗黑模式(html[data-theme='dark'])===
策略:仅覆盖 CSS 变量,组件无需逐元素反色。
- 文字墨色 --color-ink 反色为浅色(其语义收窄为"文字/描边跟随主题")