微信小程序页面迁移校验之前 P5任务处理之前
This commit is contained in:
212
scripts/ops/extract_h5_styles.py
Normal file
212
scripts/ops/extract_h5_styles.py
Normal file
@@ -0,0 +1,212 @@
|
||||
"""
|
||||
提取 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())
|
||||
Reference in New Issue
Block a user