Files
novalon-website/scripts/audit/home-cta-verify.mjs
T
zhangxiang 2a8b81f042 fix(build): 改 darkMode 为 variant 模式让 Tailwind dark: 变体按 data-theme='dark' 触发
- tailwind.config.js darkMode 从 'class' 改为 ['variant', '[data-theme="dark"] &']
- 'class' 模式匹配 .dark class,但站点用 html[data-theme='dark'] 属性,导致 dark: 变体全局失效
- variant 模式让 dark:bg-foo 类生成 [data-theme="dark"] .dark\:bg-foo 选择器
- 验证:临时加 dark:bg-blue-500 → CSS 含正确选择器;运行时浅色 bg=white、深色 bg=rgb(59,130,246)

回归测试脚本:
- darkmode-selector-verify.mjs:合成探针验证 utility 生效
- home-cta-verify.mjs:定位 home 本地简化 CTASection 实际渲染(之前误判为'不渲染')

诚实标注:
- 全站 grep dark: utility class 仅发现 cta-button.tsx 2 处,但均为 TS 对象 key(非 utility),故 dark: 失效问题无直接破坏
- 修复属'基础设施补全':未来添加 dark: 工具类即按 data-theme='dark' 自动生效

home-content-v15.tsx 的 CTASection(line 978-998)是**文件本地简化版**
(仅标题 + CTAButton,无 BrandStamp),与 src/components/sections/cta-section.tsx
(含 BrandStamp「值得信赖」)是不同组件。前者实际渲染,后者无路由使用(待用资产)。
本修复不涉及 CTASection 渲染路径。

验证:
- type-check 0 error
- lint 0 error
- 编译产物含 [data-theme="dark"] .dark\:bg-blue-500 选择器
- 运行时合成探针 PASS(浅色 white / 深色 blue)
2026-09-02 11:37:24 +08:00

25 lines
1.2 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// 验证 home 本地 CTASection 实际渲染(含 BrandStamp 的是 src/components/sections/cta-section.tsx
import { chromium } from 'playwright';
const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
await page.goto('http://127.0.0.1:3000/', { waitUntil: 'networkidle' });
await page.waitForTimeout(2000);
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await page.waitForTimeout(2000);
const dump = await page.evaluate(() => {
// home 本地简化版的特征 className
const homeCta = document.querySelector('section.relative.py-24.sm\\:py-32');
// 公开 cta-section 的特征 id
const srcCta = document.querySelector('section#cta');
// BrandStamp 容器特征(inline-block px-3 py-1.5 border-2 border-[var(--color-brand)] rounded-sm
const stamp = document.querySelector('.inline-block.px-3.py-1\\.5.border-2');
return {
homeCtaPresent: !!homeCta,
homeCtaText: homeCta ? (homeCta.textContent || '').slice(0, 60) : null,
srcCtaPresent: !!srcCta,
brandStampPresent: !!stamp,
};
});
await browser.close();
console.log(JSON.stringify(dump, null, 2));