""" 测量 board-finance H5 原型「经营一览」板块内所有关键元素的 实际渲染位置（getBoundingClientRect），计算相邻元素间的真实垂直间距。 配置与 screenshot_h5_pages.py 一致：iPhone 15 Pro Max (430×932, DPR:3) """ 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) # 用 getBoundingClientRect 测量每个关键元素的精确位置 MEASURE_JS = """ () => { const section = document.getElementById('section-overview'); if (!section) return { error: 'not found' }; const sRect = section.getBoundingClientRect(); function measure(el, label) { const r = el.getBoundingClientRect(); const cs = getComputedStyle(el); return { label, top: Math.round(r.top * 100) / 100, bottom: Math.round(r.bottom * 100) / 100, height: Math.round(r.height * 100) / 100, left: Math.round(r.left * 100) / 100, right: Math.round(r.right * 100) / 100, width: Math.round(r.width * 100) / 100, // 相对于板块顶部的偏移 relTop: Math.round((r.top - sRect.top) * 100) / 100, relBottom: Math.round((r.bottom - sRect.top) * 100) / 100, fontSize: cs.fontSize, lineHeight: cs.lineHeight, paddingTop: cs.paddingTop, paddingBottom: cs.paddingBottom, text: el.textContent?.trim()?.substring(0, 30) || '', }; } const items = []; // 板块根 items.push(measure(section, 'SECTION_ROOT')); // 板块头 const header = section.querySelector('.summary-header'); if (header) { items.push(measure(header, 'HEADER_BAR')); const h3 = header.querySelector('h3'); if (h3) items.push(measure(h3, 'HEADER_TITLE')); const p = header.querySelector('p'); if (p) items.push(measure(p, 'HEADER_DESC')); const emoji = header.querySelector('span'); if (emoji) items.push(measure(emoji, 'HEADER_EMOJI')); } // 板块正文 const content = section.querySelector('.summary-content'); if (content) { items.push(measure(content, 'CONTENT_BODY')); } // 收入概览子标题行 const subRows = content?.querySelectorAll(':scope > div > .flex.items-center.gap-2'); if (subRows) { subRows.forEach((el, i) => { items.push(measure(el, `SUB_LABEL_${i}`)); el.querySelectorAll('span').forEach((s, j) => { items.push(measure(s, `SUB_LABEL_${i}_SPAN_${j}`)); }); }); } // 3列网格 const grid3 = section.querySelector('.grid.grid-cols-3'); if (grid3) { items.push(measure(grid3, 'GRID_3COL')); grid3.querySelectorAll(':scope > div').forEach((cell, i) => { items.push(measure(cell, `GRID3_CELL_${i}`)); // 标签文字 const labelP = cell.querySelector('p'); if (labelP) items.push(measure(labelP, `GRID3_CELL_${i}_LABEL`)); // 数值文字（第二个 p） const allP = cell.querySelectorAll('p'); if (allP[1]) items.push(measure(allP[1], `GRID3_CELL_${i}_VALUE`)); // 环比 const compare = cell.querySelector('.compare-data'); if (compare) items.push(measure(compare, `GRID3_CELL_${i}_COMPARE`)); }); } // 确认收入行（bg-white/10 rounded-xl 内的第一个） const confirmedRow = content?.querySelector('.rounded-xl'); if (confirmedRow) { items.push(measure(confirmedRow, 'CONFIRMED_ROW')); confirmedRow.querySelectorAll('p').forEach((p, i) => { items.push(measure(p, `CONFIRMED_P_${i}`)); }); } // 分割线 const divider = content?.querySelector('.border-t'); if (divider) { items.push(measure(divider, 'DIVIDER')); } // 现金流水子标题行 // 它是 divider 后面的 div 内的 flex 行 const cashSection = divider?.nextElementSibling; if (cashSection) { const cashSubLabel = cashSection.querySelector('.flex.items-center.gap-2'); if (cashSubLabel) { items.push(measure(cashSubLabel, 'CASH_SUB_LABEL')); } } // 2列网格 const grid2 = section.querySelector('.grid.grid-cols-2'); if (grid2) { items.push(measure(grid2, 'GRID_2COL')); grid2.querySelectorAll(':scope > div').forEach((cell, i) => { items.push(measure(cell, `GRID2_CELL_${i}`)); const allP = cell.querySelectorAll('p'); if (allP[0]) items.push(measure(allP[0], `GRID2_CELL_${i}_LABEL`)); if (allP[1]) items.push(measure(allP[1], `GRID2_CELL_${i}_VALUE`)); const compare = cell.querySelector('.compare-data'); if (compare) items.push(measure(compare, `GRID2_CELL_${i}_COMPARE`)); }); } // AI 洞察 const aiSection = section.querySelector('.ai-insight-section'); if (aiSection) { items.push(measure(aiSection, 'AI_SECTION')); const aiHeader = aiSection.querySelector('.ai-insight-header'); if (aiHeader) items.push(measure(aiHeader, 'AI_HEADER')); const aiTitle = aiSection.querySelector('.ai-insight-title'); if (aiTitle) items.push(measure(aiTitle, 'AI_TITLE')); aiSection.querySelectorAll('p').forEach((p, i) => { items.push(measure(p, `AI_LINE_${i}`)); }); } return items; } """ async def main(): print("=" * 70) print("H5 垂直间距精确测量 — getBoundingClientRect") print("iPhone 15 Pro Max (430×932, DPR:3)") print("=" * 70) 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 = await page.evaluate("() => window.devicePixelRatio") 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) items = await page.evaluate(MEASURE_JS) # 保存原始数据 out_path = OUT_DIR / "board-finance-vertical-gaps.json" with open(out_path, "w", encoding="utf-8") as f: json.dump(items, f, ensure_ascii=False, indent=2) # 计算相邻元素间的真实垂直间距 print(f"\n共测量 {len(items)} 个元素\n") # 按 relTop 排序，打印每个元素的位置 sorted_items = sorted(items, key=lambda x: x['relTop']) print(f"{'元素':<30} {'relTop':>8} {'relBot':>8} {'height':>8} {'fontSize':>10} {'lineH':>10}") print("-" * 100) for it in sorted_items: print(f"{it['label']:<30} {it['relTop']:>8.1f} {it['relBottom']:>8.1f} {it['height']:>8.1f} {it['fontSize']:>10} {it['lineHeight']:>10}") # 计算关键间距对 print("\n" + "=" * 70) print("关键垂直间距（相邻元素 bottom→top 的实际 px 距离）") print("公式：gap_rpx = gap_px × 2 × 0.875") print("=" * 70) gap_pairs = [ ("HEADER_BAR", "CONTENT_BODY", "头部栏底 → 正文顶"), ("HEADER_TITLE", "HEADER_DESC", "标题底 → 副标题顶"), ("SUB_LABEL_0", "GRID_3COL", "收入概览标签底 → 3列网格顶"), ("GRID3_CELL_0_LABEL", "GRID3_CELL_0_VALUE", "标签底 → 数值顶（cell0）"), ("GRID3_CELL_0_VALUE", "GRID3_CELL_0_COMPARE", "数值底 → 环比顶（cell0）"), ("GRID_3COL", "CONFIRMED_ROW", "3列网格底 → 确认收入行顶"), ("CONFIRMED_ROW", "DIVIDER", "确认收入行底 → 分割线顶"), ("DIVIDER", "CASH_SUB_LABEL", "分割线底 → 现金流水标签顶"), ("CASH_SUB_LABEL", "GRID_2COL", "现金流水标签底 → 2列网格顶"), ("GRID2_CELL_0_LABEL", "GRID2_CELL_0_VALUE", "标签底 → 数值顶（2col cell0）"), ("GRID2_CELL_0_VALUE", "GRID2_CELL_0_COMPARE", "数值底 → 环比顶（2col cell0）"), ("GRID_2COL", "AI_SECTION", "2列网格底 → AI洞察顶"), ("AI_HEADER", "AI_LINE_0", "AI标题底 → 第一行文字顶"), ("AI_LINE_0", "AI_LINE_1", "AI第1行底 → 第2行顶"), ] item_map = {it['label']: it for it in items} for from_label, to_label, desc in gap_pairs: fr = item_map.get(from_label) to = item_map.get(to_label) if fr and to: gap_px = to['relTop'] - fr['relBottom'] gap_rpx = round(gap_px * 2 * 0.875, 1) print(f" {desc}") print(f" {from_label}.bottom={fr['relBottom']:.1f} → {to_label}.top={to['relTop']:.1f}") print(f" 间距: {gap_px:.1f}px → {gap_rpx:.1f}rpx") print() else: missing = from_label if not fr else to_label print(f" {desc}: ⚠️ 未找到 {missing}") print() await browser.close() print(f"原始数据: {out_path}") if __name__ == "__main__": asyncio.run(main())