""" 提取 board-finance H5 原型「经营一览」板块的精确 computed style 配置与 screenshot_h5_pages.py 一致：iPhone 15 Pro Max (430×932, DPR:3) 输出：每个关键元素的 padding/margin/gap/lineHeight/fontSize/height """ import asyncio import json from pathlib import Path from playwright.async_api import async_playwright BASE_URL = "http://127.0.0.1:5500/docs/h5_ui/pages" OUT_DIR = Path(__file__).resolve().parents[2] / "export" / "h5_style_extract" OUT_DIR.mkdir(parents=True, exist_ok=True) EXTRACT_JS = """ () => { const section = document.getElementById('section-overview'); if (!section) return { error: 'section-overview not found' }; const results = []; function extract(el, label) { const cs = getComputedStyle(el); return { label, tag: el.tagName, className: el.className?.substring?.(0, 80) || '', text: el.textContent?.trim()?.substring(0, 40) || '', paddingTop: cs.paddingTop, paddingBottom: cs.paddingBottom, paddingLeft: cs.paddingLeft, paddingRight: cs.paddingRight, marginTop: cs.marginTop, marginBottom: cs.marginBottom, marginLeft: cs.marginLeft, marginRight: cs.marginRight, gap: cs.gap, rowGap: cs.rowGap, columnGap: cs.columnGap, lineHeight: cs.lineHeight, fontSize: cs.fontSize, fontWeight: cs.fontWeight, height: cs.height, width: cs.width, borderTop: cs.borderTopWidth, borderBottom: cs.borderBottomWidth, display: cs.display, gridTemplateColumns: cs.gridTemplateColumns || '', }; } // 1. 板块根 results.push(extract(section, 'section-overview (root)')); // 2. 板块头 .summary-header const header = section.querySelector('.summary-header'); if (header) { results.push(extract(header, 'summary-header')); // 头部内子元素 header.querySelectorAll('h3, p, span').forEach((el, i) => { results.push(extract(el, `header-child-${i} (${el.tagName})`)); }); } // 3. 板块正文 .summary-content const content = section.querySelector('.summary-content'); if (content) { results.push(extract(content, 'summary-content')); } // 4. 收入概览子标题行 const subLabels = section.querySelectorAll('.summary-content > div > .flex.items-center.gap-2'); subLabels.forEach((el, i) => { results.push(extract(el, `sub-label-row-${i}`)); el.querySelectorAll('span').forEach((s, j) => { results.push(extract(s, `sub-label-row-${i}-span-${j}`)); }); }); // 5. 3列网格 const grid3 = section.querySelector('.grid.grid-cols-3'); if (grid3) { results.push(extract(grid3, 'grid-cols-3')); // 每个 cell grid3.querySelectorAll(':scope > div').forEach((cell, i) => { results.push(extract(cell, `grid3-cell-${i}`)); // cell 内的标签行和值 cell.querySelectorAll('p, span, div').forEach((el, j) => { results.push(extract(el, `grid3-cell-${i}-child-${j}`)); }); }); } // 6. 确认收入行 (bg-white/10 rounded-xl) const confirmedRow = section.querySelector('.bg-white\\\\/10'); // Tailwind 的 class 含 / 不好选，用更通用的方式 const allRoundedXl = section.querySelectorAll('.rounded-xl'); allRoundedXl.forEach((el, i) => { results.push(extract(el, `rounded-xl-${i}`)); el.querySelectorAll('p, span').forEach((c, j) => { results.push(extract(c, `rounded-xl-${i}-child-${j}`)); }); }); // 7. 分割线 const divider = section.querySelector('.border-t'); if (divider) { results.push(extract(divider, 'divider (border-t)')); } // 8. 2列网格 const grid2 = section.querySelector('.grid.grid-cols-2'); if (grid2) { results.push(extract(grid2, 'grid-cols-2')); grid2.querySelectorAll(':scope > div').forEach((cell, i) => { results.push(extract(cell, `grid2-cell-${i}`)); cell.querySelectorAll('p, span, div').forEach((el, j) => { results.push(extract(el, `grid2-cell-${i}-child-${j}`)); }); }); } // 9. AI 洞察 const aiSection = section.querySelector('.ai-insight-section'); if (aiSection) { results.push(extract(aiSection, 'ai-insight-section')); const aiHeader = aiSection.querySelector('.ai-insight-header'); if (aiHeader) { results.push(extract(aiHeader, 'ai-insight-header')); aiHeader.querySelectorAll('span, div').forEach((el, i) => { results.push(extract(el, `ai-header-child-${i}`)); }); } aiSection.querySelectorAll('p').forEach((el, i) => { results.push(extract(el, `ai-body-p-${i}`)); }); } return results; } """ async def main(): print("=" * 60) print("H5 样式提取 — iPhone 15 Pro Max (430×932, DPR:3)") print("=" * 60) async with async_playwright() as p: browser = await p.chromium.launch( headless=False, args=["--hide-scrollbars"], ) context = await browser.new_context( viewport={"width": 430, "height": 932}, device_scale_factor=3, ) page = await context.new_page() # 验证 DPR dpr = await page.evaluate("() => window.devicePixelRatio") print(f"devicePixelRatio = {dpr}") assert dpr == 3 # 导航 url = f"{BASE_URL}/board-finance.html" await page.goto(url, wait_until="load", timeout=15000) await page.wait_for_timeout(2500) # Tailwind CDN JIT 渲染 # 截图（对照用） screenshot_path = OUT_DIR / "board-finance-overview.png" # 先尝试截取板块区域 section = page.locator("#section-overview") await section.screenshot(path=str(screenshot_path)) print(f"截图: {screenshot_path}") # 提取样式 styles = await page.evaluate(EXTRACT_JS) # 保存 out_path = OUT_DIR / "board-finance-overview-styles.json" with open(out_path, "w", encoding="utf-8") as f: json.dump(styles, f, ensure_ascii=False, indent=2) print(f"样式数据: {out_path}") print(f"共提取 {len(styles)} 个元素") # 打印关键摘要 print("\n" + "=" * 60) print("关键间距摘要（px，需 ×2×0.875 转 rpx）：") print("=" * 60) for item in styles: label = item['label'] # 只打印有意义的容器级元素 if any(k in label for k in ['header', 'content', 'grid', 'divider', 'confirmed', 'rounded', 'ai-insight', 'sub-label-row']): if 'child' not in label: pt = item['paddingTop'] pb = item['paddingBottom'] mt = item['marginTop'] mb = item['marginBottom'] gap = item['gap'] print(f" {label}:") print(f" padding: {pt} / {pb} (T/B) | margin: {mt} / {mb} (T/B) | gap: {gap}") await browser.close() print(f"\n✅ 完成，详细数据见 {out_path}") if __name__ == "__main__": asyncio.run(main())