yixiong/platform-prototype
17
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：完善文档编写的技能包和模板文件

Browse Source
This commit is contained in:
fengpu
2026-09-10 11:53:07 +08:00
parent 982cb1c068
commit 9434681a80
8 changed files with 373 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_templates/docs/brochure-template.html
+39 -6
View File
@@ -54,12 +54,12 @@
/* ===== 封面 ===== */
.cover{ background:linear-gradient(135deg,#0a2540 0%,#0a5cb8 55%,#1890FF 100%);color:#fff; }
.cover .inner{ justify-content:space-between;position:relative; }
.cover__top{ display:flex;justify-content:space-between;align-items:center;font-size:13px;opacity:.92; }
.cover__top{ display:flex;justify-content:space-between;align-items:center;font-size:14px;color:rgba(255,255,255,.96); }
.cover__logo{ font-weight:800;font-size:16px;letter-spacing:1px;display:flex;align-items:center;gap:8px; }
.cover__logo .dot{ width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#40c9ff,#1890FF); }
.cover__mid{ display:flex;align-items:center;justify-content:space-between;gap:40px; }
.cover__title{ font-size:44px;font-weight:900;line-height:1.2;margin-bottom:14px;letter-spacing:2px; }
.cover__slogan{ font-size:16px;opacity:.92;line-height:1.9; }
.cover__slogan{ font-size:16px;color:rgba(255,255,255,.96);line-height:1.9; }
.cover__tags{ margin-top:22px;display:flex;gap:10px;flex-wrap:wrap; }
.cover__tag{ padding:7px 16px;border:1px solid rgba(255,255,255,.5);border-radius:20px;font-size:13px;background:rgba(255,255,255,.08); }
.cover__deco{ width:280px;height:280px;position:relative;flex-shrink:0; }
@@ -67,7 +67,7 @@
.r1{ width:280px;height:280px;border:2px solid rgba(255,255,255,.18); }
.r2{ width:210px;height:210px;border:2px dashed rgba(255,255,255,.22);left:35px;top:35px; }
.r3{ width:140px;height:140px;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%);left:70px;top:70px; }
.cover__bottom{ display:flex;justify-content:space-between;font-size:12px;opacity:.82; }
.cover__bottom{ display:flex;justify-content:space-between;font-size:14px;color:rgba(255,255,255,.96); }
/* ===== 概述 ===== */
.stat-row{ display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0; }
@@ -100,11 +100,21 @@
.term span{ font-size:11.5px;color:var(--ink-2);line-height:1.6; }
/* ===== 封底 ===== */
.shots{ display:flex;flex-direction:column;gap:20px;flex:1;justify-content:center; }
.shots__row{ display:flex;gap:26px;justify-content:center;align-items:flex-end; }
.shot{ display:flex;flex-direction:column;align-items:center;gap:8px; }
.shot__frame{ overflow:hidden;box-shadow:0 6px 18px rgba(15,60,120,.14);background:#f5f7fa; }
.shot__frame--phone{ border:4px solid #2d3748;border-radius:16px; }
.shot__frame--phone img{ width:130px;height:282px;object-fit:cover;object-position:top;display:block; }
.shot__frame--web{ border:1px solid #d9e1ec;border-radius:10px; }
.shot__frame--web img{ width:290px;height:181px;object-fit:cover;object-position:top;display:block; }
.shot__label{ font-size:11px;color:var(--ink-2); }
.back{ background:linear-gradient(135deg,#0a2540,#0a5cb8);color:#fff; }
.back .inner{ align-items:center;justify-content:center;text-align:center; }
.back__title{ font-size:32px;font-weight:900;margin-bottom:12px; }
.back__line{ font-size:14px;opacity:.9;line-height:2; }
.back__foot{ margin-top:30px;font-size:12px;opacity:.7; }
.back__line{ font-size:15px;color:rgba(255,255,255,.96);line-height:2; }
.back__foot{ margin-top:30px;font-size:14px;color:rgba(255,255,255,.92); }
</style>
</head>
<body>
@@ -184,7 +194,30 @@
</div>
</section>
<!-- 6. 封底 -->
<!-- 6. 产品界面展示 -->
<section class="page">
<div class="inner">
<div class="head"><span class="kicker">界面展示</span><h2 class="sec">产品界面预览</h2><div class="secbar"></div></div>
<div class="shots">
<div class="shots__row">
<div class="shot">
<div class="shot__frame shot__frame--phone"><img src="{截图相对路径}" alt="{页面名}"></div>
<span class="shot__label">{页面名}</span>
</div>
<!-- 复制 .shot，第一行放 5 张 APP 竖版截图（phone） -->
</div>
<div class="shots__row">
<div class="shot">
<div class="shot__frame shot__frame--web"><img src="{截图相对路径}" alt="{页面名}"></div>
<span class="shot__label">{页面名}</span>
</div>
<!-- 复制 .shot，第二行放 3 张 Web 端截图（web） -->
</div>
</div>
</div>
</section>
<!-- 7. 封底 -->
<section class="page back">
<div class="inner">
<div class="back__title">{子系统名}</div>
_templates/docs/pdf-export.js
+43
View File
@@ -0,0 +1,43 @@
#!/usr/bin/env node
/**
* HTML 宣传册转 PDF（横版 A4，保留背景）
* 用法：node pdf-export.js <html文件路径>
* 输出：与 HTML 同目录同名 .pdf
* 依赖：playwright（chromium），无则用系统 Edge 兜底
*/
const { chromium } = require('playwright');
const { pathToFileURL } = require('url');
const path = require('path');
const htmlFile = process.argv[2];
if (!htmlFile) {
console.error('用法：node pdf-export.js <html文件路径>');
process.exit(1);
}
(async () => {
const abs = path.resolve(htmlFile);
const url = pathToFileURL(abs).href;
const pdfFile = process.argv[3] || abs.replace(/\.html$/i, '.pdf');
let browser;
try {
browser = await chromium.launch();
} catch (e) {
// playwright 自带 chromium 不可用时，退回系统 Edge
browser = await chromium.launch({ channel: 'msedge' });
}
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle' });
await page.pdf({
path: pdfFile,
format: 'A4',
landscape: true,
printBackground: true,
margin: { top: 0, bottom: 0, left: 0, right: 0 },
displayHeaderFooter: false,
});
await browser.close();
console.log('PDF 已生成：' + pdfFile);
})();