Dev #25
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: novalon/novalon-website#25
Reference in New Issue
Block a user
基线更新范围与之前 17 个 failed 一一对应： - 营销页：home / products / product-erp / solutions / solution-manufacturing services / service-software / news / news-detail / team / methodology - 共享：about / contact / header / footer / theme-light / theme-dark 根因：HEADbf9c992基线是在 globals.css rgb 变量仍是逗号分隔（bug 状态）、 CTAButton 切换未完成时生成的快照。当前代码已是修复+切换后状态： - globals.css 22 个 rgb 变量空格分隔（commit 011189a） - CTAButton 全站 27 处切换（commit 5c1b883） size diff 佐证：team-fullpage 230K→648K（深色 CTA 从透明 bug 变为真实深色背景）。为 html[data-theme='dark'] 添加完整 CSS 变量覆盖块，建立暗黑模式基石。 --color-ink 收窄为'文字/描边跟随主题'语义，深色 UI 元素（卡片/按钮/遮罩/ 代码块/页脚）迁到 --color-dark-bg / --color-overlay 独立 token，避免 ink 反色为浅色文字时连带把深色区块变浅（双语义冲突）。 【基础设施】 - globals.css： * html/body 顶部硬编码 #FFFFFF !important 改 var() 化（保留 !important） * :root 新增 --color-overlay / --color-overlay-rgb（遮罩/深色叠加层， 永不反色） * 新增 html[data-theme='dark'] 覆盖块：墨色反色为浅色文字，bg/text/ border 层级反色，link 反色；保留 --color-dark-* / --color-brand-section * pre 背景 var(--color-ink) → var(--color-dark-bg) - tailwind.config.js：注册 overlay 色（rgb() 形式，支持 /50 /60 修饰符） - layout.tsx：head 内联防 FOUC 同步脚本，读 localStorage['novalon-theme'] 设置 data-theme（当前无切换 UI，仅作未来挂载点） 【首页试点 + 布局组件】（浅色值完全等价 → 浅色零视觉差异） - home-content-v15.tsx：7 处 bg-white → bg-bg-primary（narrative/insights/ cases sections 与卡片），2 处 bg-ink → bg-dark-bg（案例卡 bg-dark-bg 不 随反色，保留深色画布） - header.tsx / mega-dropdown.tsx：bg-white → bg-bg-primary（导航栏/移动 端菜单/下拉面板） - footer.tsx：bg-[#0A0E14] → bg-dark-bg（语义统一，视觉零差异） 【全局 UI 组件】（深色区块语义统一 + 遮罩固定深色） - button.tsx：secondary 'bg-ink hover:bg-ink-light' → bg-dark-bg / hover:bg-dark-bg-secondary； outline 'hover:bg-ink hover:border-ink' → hover:bg-dark-bg / border-dark-bg - stats-showcase / milestone-timeline：isDark 分支 bg-ink → bg-dark-bg - metric-card：isDark 分支 bg-ink/50 → bg-overlay/50，hover:bg-ink → hover:bg-overlay - dialog / alert-dialog：遮罩 bg-ink/60 → bg-overlay/60（永不反色） - button.test.tsx：断言 bg-ink → bg-dark-bg，注释同步 【验证】 - type-check 0 errors - lint 0 errors（127 warnings 既有，非本次引入） - jest 128 suites / 1623 passed（button 断言同步通过） - 视觉回归先非 update：21 passed（浅色安全门零 diff）+ 1 failed （仅 theme-dark-main，dark 快照从浅色名义变真正深色 = 语义修复预期） - update-snapshots：22 passed，仅 theme-dark-main 基线重写 - computed-style 权威验证（一次性脚本，已删除）： dark 7 项断言全过（html/body/hero/导航栏/案例卡→深色 #0A0E14； body 文字→浅色 #F8FAFC；footer/overlay→保持深色）；light 4 项零回归 【未在 Phase 1 范围】（已识别，留待 Phase 2/3 决策） - service-detail-content-v4.tsx 等营销页 bg-white：Phase 2 批量 token 化 - admin 页面 bg-white + RichTextEditor：admin 边界决策 + Phase 3 - 品牌红 #C41E3A 在深色底对比度复检：Phase 3将 about-content-v4（8 处）与 brand-content（6 处）的浅色 bg-white 全部迁 到 bg-bg-primary，浅色下值完全等价（#FFFFFF）→ 浅色视觉零差异；dark 模式 下随 token 自动反色为 #0A0E14，section 间 bg-bg-secondary 交替保留设计层 次（#0F1419）。 【变更】 - about-content-v4.tsx：Hero×2 + section×2 + 卡片×2 + min-h-screen wrapper×2 - brand-content.tsx：main wrapper + Hero + section×2 + 卡片×2 + hover:bg-white→hover:bg-bg-primary 【验证】 - type-check 0 / lint 0 errors（127 warnings 既有） - jest 128 suites / 1623 passed - 视觉回归 22 passed（含关于我们 /about 全页浅色快照零 diff） - computed-style 一次性脚本验证（已删除）： - dark: /about 与 /about/brand 的 html/body/header 背景 → rgb(10,14,20) ✓ - dark: sectionBgs = [#0A0E14, #0F1419, #0A0E14]（bg-primary/bg-secondary 交替层次保留，dark 下 secondary → #0F1419 是设计意图） - light: 零深色残留，所有 section 在浅色范围内 【设计确认】 - about/brand 的第二个 section 使用 bg-bg-secondary（#F8FAFC 浅灰）是设计 意图的层次交替，dark 下自动反色为 #0F1419（深一档），无需改动 - 一次性 computed-style 脚本对 'section 全部 #FFFFFF/#0A0E14' 的断言过严 → 修正为'第一个 section 是预期主色 + 所有 section 不在反色范围'，覆盖 真正的浅色→深色反色语义 【Phase 2 剩余批次】 - 批次 2：services-content-v3 + service-detail-content-v4 + solution-value - 批次 3：product-detail-content-v3 + products/standalone + detail-hero - 批次 4：admin 全量（login + media + roles + notifications + content + page）仪表盘模型卡/统计卡的 blue/amber/purple/teal/rose/indigo 图标底是纯装饰 多色强调（非语义状态），原用 raw bg-X-50 等 Solid 浅色，暗黑模式仍为浅色盒。 - 复用项目既有 accent 色组（bg-accent-{hue}-soft 透明浅色调 + text-accent-{hue}）， 透明 soft 叠加暗黑页面底色即自动反色为深色底（与 products-content-v3 / metric-card 既定模式一致）。 - tailwind.config.js + globals.css：accent 组补 rose/indigo 两色（DEFAULT + soft + rgb），blue/amber/teal/purple 已由既有 token 覆盖，无需新增。 验证：type-check 0 errors；lint 0 errors；单测 1624 passed；视觉回归 22 passed； Playwright 实测新增 rose/indigo 变量接线正确，装饰框实际渲染色 浅 rgb(231,240,254) → 暗 rgb(16,28,47) 确认反色。 Co-Authored-By: 阿睿 <workbuddy@tencent.com>