141 lines
4.7 KiB
JavaScript
141 lines
4.7 KiB
JavaScript
#!/usr/bin/env node
|
||
/**
|
||
* 融合方案（Stripe Fintech Bento + 看板 + 左侧任务/右侧表单主从）三视图截图生成脚本
|
||
*/
|
||
import fs from 'node:fs';
|
||
import path from 'node:path';
|
||
import { fileURLToPath } from 'node:url';
|
||
import { createRequire } from 'node:module';
|
||
|
||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||
const root = path.resolve(__dirname, '..');
|
||
const outDir = path.join(root, 'src/resources/design-system/lease-contract-combo-shots');
|
||
|
||
async function loadPuppeteer() {
|
||
const require = createRequire(import.meta.url);
|
||
try {
|
||
return require('puppeteer');
|
||
} catch {
|
||
return require('puppeteer-core');
|
||
}
|
||
}
|
||
|
||
const COMBOS = [
|
||
{
|
||
view: 'list',
|
||
viewLabel: '列表模式 (List View)',
|
||
desc: 'Stripe Fintech 高端台账列表：显示项目、客户/签约主体、履约与审批状态、交付车辆与金额',
|
||
},
|
||
{
|
||
view: 'kanban',
|
||
viewLabel: '看板模式 (Kanban View)',
|
||
desc: 'Pipeline 阶段履约看板：草稿箱、待我审批/盖章中、履约执行中、已终止/归档 4 大生命周期列',
|
||
},
|
||
{
|
||
view: 'split',
|
||
viewLabel: '主从/表单模式 (Master-Detail View)',
|
||
desc: '左侧任务菜单 + 右侧表单内容区：包含合同概览、关联车辆与运单、电子盖章存证与合规审批',
|
||
},
|
||
];
|
||
|
||
async function main() {
|
||
fs.mkdirSync(outDir, { recursive: true });
|
||
const puppeteer = await loadPuppeteer();
|
||
|
||
const browser = await puppeteer.launch({
|
||
headless: true,
|
||
executablePath:
|
||
process.env.PUPPETEER_EXECUTABLE_PATH ||
|
||
'/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
|
||
defaultViewport: { width: 1440, height: 1024, deviceScaleFactor: 2 },
|
||
args: ['--no-sandbox', '--disable-setuid-sandbox'],
|
||
});
|
||
|
||
const page = await browser.newPage();
|
||
page.setDefaultTimeout(60000);
|
||
|
||
const baseUrl = 'http://127.0.0.1:51720';
|
||
const modes = ['light', 'dark'];
|
||
const results = [];
|
||
|
||
for (const combo of COMBOS) {
|
||
for (const mode of modes) {
|
||
const demoUrl = `${baseUrl}/prototypes/oneos-prototype-demo/?oneosTheme=${mode}#proto=lease-contract-redesign`;
|
||
console.log(`正在渲染 Combo [${combo.view}] (${mode})...`);
|
||
|
||
await page.goto(demoUrl, { waitUntil: 'networkidle2' });
|
||
await page.waitForSelector('.oneos-shell', { timeout: 30000 });
|
||
await page.waitForSelector('.oneos-shell-frame', { timeout: 30000 });
|
||
|
||
// 给外壳设置主题属性
|
||
await page.evaluate((m) => {
|
||
document.documentElement.dataset.dsMode = m;
|
||
document.documentElement.dataset.oneosTheme = m;
|
||
const shell = document.querySelector('.oneos-shell');
|
||
if (shell) shell.dataset.oneosTheme = m;
|
||
}, mode);
|
||
|
||
// 找到子 iframe 并修改 src 为带 ?concept=combo&view=list/kanban/split 的页面
|
||
const iframeElement = await page.$('.oneos-shell-frame');
|
||
if (iframeElement) {
|
||
const targetSrc = `${baseUrl}/prototypes/lease-contract-redesign/?concept=combo&view=${combo.view}&oneosTheme=${mode}`;
|
||
await page.evaluate((el, src) => {
|
||
el.src = src;
|
||
}, iframeElement, targetSrc);
|
||
}
|
||
|
||
// 等待新 iframe 载入并对齐主题
|
||
await new Promise((r) => setTimeout(r, 1200));
|
||
|
||
const childFrame = page.frames().find(
|
||
(f) => f !== page.mainFrame() && f.url().includes('lease-contract-redesign'),
|
||
);
|
||
|
||
if (childFrame) {
|
||
await childFrame.evaluate((m) => {
|
||
document.documentElement.dataset.dsMode = m;
|
||
document.documentElement.dataset.oneosTheme = m;
|
||
}, mode);
|
||
}
|
||
|
||
await new Promise((r) => setTimeout(r, 400));
|
||
|
||
const fileName = `combo-${combo.view}-${mode}.png`;
|
||
const outPath = path.join(outDir, fileName);
|
||
|
||
await page.screenshot({ path: outPath, type: 'png', fullPage: false });
|
||
console.log('Successfully written:', fileName);
|
||
results.push({
|
||
fileName,
|
||
viewLabel: combo.viewLabel,
|
||
desc: combo.desc,
|
||
mode: mode === 'light' ? '浅色' : '暗色',
|
||
});
|
||
}
|
||
}
|
||
|
||
const readme = `# 租赁合同管理 — Stripe Bento 统一三视图 (列表 / 看板 / 左任务右表单) 截图
|
||
|
||
生成时间：${new Date().toISOString().slice(0, 10)}
|
||
底稿风格：以概念 2 (Stripe Fintech UI) 为基础视觉基调，三视图规范统一下的无缝切换体验。
|
||
|
||
| 文件 | 视图模式 | 模式 | 页面特性说明 |
|
||
|------|----------|------|--------------|
|
||
${results
|
||
.map(
|
||
(r) =>
|
||
`| \`${r.fileName}\` | **${r.viewLabel}** | ${r.mode} | ${r.desc} |`,
|
||
)
|
||
.join('\n')}
|
||
`;
|
||
|
||
fs.writeFileSync(path.join(outDir, 'README.md'), readme);
|
||
await browser.close();
|
||
console.log('三视图融合方案截图全部成功生成并保存至：', outDir);
|
||
}
|
||
|
||
main().catch((err) => {
|
||
console.error(err);
|
||
process.exit(1);
|
||
});
|