chore: 添加设计分析参考和辅助脚本

- IHG设计分析HTML参考页面 - 布局检查、DOM诊断、验收测试等辅助脚本
2026-06-07 16:22:11 +08:00
parent b1f3a395ca
commit 929f3ed250
15 changed files with 3011 additions and 0 deletions
@@ -0,0 +1,65 @@
+const { chromium } = require("playwright");
+(async () => {
+  const browser = await chromium.launch({ headless: true });
+  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
+  
+  try {
+    await page.goto("http://localhost:3001/products/novavis", { waitUntil: "domcontentloaded", timeout: 15000 });
+    await page.waitForTimeout(4000);
+    
+    const result = await page.evaluate(() => {
+      const header = document.querySelector("header .container-wide");
+      const headerRect = header?.getBoundingClientRect();
+      const headerContentLeft = headerRect ? headerRect.left : null;
+      
+      const sections = document.querySelectorAll("section");
+      const sectionData = [];
+      
+      sections.forEach((section, i) => {
+        const rect = section.getBoundingClientRect();
+        if (rect.height < 30) return;
+        
+        const container = section.querySelector(".container-wide, .container-full");
+        const containerRect = container?.getBoundingClientRect();
+        
+        const firstTextBlock = section.querySelector("h1, h2, h3, p");
+        const textRect = firstTextBlock?.getBoundingClientRect();
+        
+        sectionData.push({
+          index: i,
+          sectionLeft: Math.round(rect.left),
+          containerLeft: containerRect ? Math.round(containerRect.left) : null,
+          firstTextLeft: textRect ? Math.round(textRect.left) : null,
+          height: Math.round(rect.height),
+          text: firstTextBlock?.textContent?.substring(0, 40).trim(),
+        });
+      });
+      
+      return { headerContentLeft, sections: sectionData };
+    });
+    
+    console.log("=== NovaVis 产品页内容对齐检测 ===\n");
+    console.log(`Header container left: ${result.headerContentLeft}px\n`);
+    
+    let allAligned = true;
+    for (const s of result.sections) {
+      const containerOk = s.containerLeft === result.headerContentLeft;
+      const textOk = s.firstTextLeft !== null && Math.abs(s.firstTextLeft - result.headerContentLeft) < 5;
+      
+      if (!containerOk && s.containerLeft !== null) {
+        allAligned = false;
+        console.log(`  ❌ Section[${s.index}]: containerLeft=${s.containerLeft} (期望 ${result.headerContentLeft}) | ${s.text?.substring(0, 30)}`);
+      } else if (s.containerLeft !== null) {
+        console.log(`  ✅ Section[${s.index}]: containerLeft=${s.containerLeft} | ${s.text?.substring(0, 30)}`);
+      }
+    }
+    
+    if (allAligned) {
+      console.log("\n🎉 所有区块容器与 Header 对齐！");
+    }
+    
+  } catch(e) {
+    console.error("ERROR:", e.message);
+  }
+  await browser.close();
+})();