mirror of
https://github.com/aculix/huashu-design.git
synced 2026-10-27 07:15:54 +00:00
docs: HTML-first 幻灯片架构 + grammar 模板 + moxt 实战经验
幻灯片交付升级为 HTML-first：每页独立 HTML + index.html 聚合永远是 默认基础产物，PDF/PPTX 是从 HTML 一行命令导出的衍生物。 核心变化： - export_deck_pptx.mjs 删掉 image 模式（168 行→85 行），只保留 editable 路径 - editable-pptx.md 末尾新增 Fallback 章节：已有视觉稿又必须出 editable PPTX 时，AI 以视觉稿为蓝本重写合规 HTML（不是硬转截图） - slide-decks.md 新增 3 节： · 批量制作前先做 2 页 grammar showcase 的流程规则（≥5 页 deck 强制） · 出版物 grammar 模板（masthead + kicker + h1 + italic 副 + footer，moxt 实测） · 常见踩坑（emoji 不渲染 / playwright 路径 / 字体加载 / 信息密度） - SKILL.md 同步更新 checkpoint 和 Starter Components 表格 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
alchainandClaude Opus 4.7 committed
1 parent
807ae8a7da
commit
a75835d3ef
4 files changed
+259
-138
No files matched your search
@@ -1,109 +1,69 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* export_deck_pptx.mjs — 把多文件 slide deck 导出为 PPTX
|
||||
*
|
||||
* 两种模式：
|
||||
* --mode image 图片铺底，视觉 100% 保真，⚠️ 文字不可编辑
|
||||
* --mode editable 文本框原生，文字可编辑，要求 HTML 符合 4 条硬约束（见 references/editable-pptx.md）
|
||||
* export_deck_pptx.mjs — 把多文件 slide deck 导出为可编辑 PPTX
|
||||
*
|
||||
* 用法：
|
||||
* # 图片模式（默认）
|
||||
* node export_deck_pptx.mjs --slides <dir> --out <file.pptx>
|
||||
* # 可编辑模式
|
||||
* node export_deck_pptx.mjs --slides <dir> --out <file.pptx> --mode editable
|
||||
*
|
||||
* --mode image 特点：
|
||||
* - 每张 slide 截图成 PNG，满铺一张 PPTX 页面
|
||||
* - 视觉 100% 保真（因为就是图片）
|
||||
* - 文字不可编辑
|
||||
* - HTML 随便写，不挑格式
|
||||
*
|
||||
* --mode editable 特点：
|
||||
* - 调用 scripts/html2pptx.js 把 HTML DOM 逐元素翻译成 PowerPoint 对象
|
||||
* 行为：
|
||||
* - 调用 scripts/html2pptx.js 把 HTML DOM 逐元素翻译成 PowerPoint 原生对象
|
||||
* - 文字是真文本框，PPT 里直接双击能编辑
|
||||
* - ⚠️ HTML 必须符合 4 条硬约束（见 references/editable-pptx.md）：
|
||||
* 1. 文字包在 <p>/<h1>-<h6> 里（div 不能直接放文字）
|
||||
* 2. 不用 CSS 渐变
|
||||
* 3. <p>/<h*> 不能有 background/border/shadow（放外层 div）
|
||||
* 4. div 不能 background-image（用 <img>）
|
||||
* - body 尺寸默认 960pt × 540pt（LAYOUT_WIDE，13.333″ × 7.5″）
|
||||
* - 视觉驱动的 HTML 几乎无法 pass —— 必须从写 HTML 的第一行就按约束写
|
||||
* - body 尺寸 960pt × 540pt（LAYOUT_WIDE，13.333″ × 7.5″）
|
||||
*
|
||||
* 依赖：
|
||||
* --mode image: npm install playwright pptxgenjs
|
||||
* --mode editable: npm install playwright pptxgenjs sharp
|
||||
* ⚠️ HTML 必须符合 4 条硬约束（见 references/editable-pptx.md）：
|
||||
* 1. 文字包在 <p>/<h1>-<h6> 里（div 不能直接放文字）
|
||||
* 2. 不用 CSS 渐变
|
||||
* 3. <p>/<h*> 不能有 background/border/shadow（放外层 div）
|
||||
* 4. div 不能 background-image（用 <img>）
|
||||
*
|
||||
* 视觉驱动的 HTML 几乎无法 pass —— 必须从写 HTML 的第一行就按约束写。
|
||||
* 视觉自由度优先的场景（动画、web component、CSS 渐变、复杂 SVG）
|
||||
* 应改用 export_deck_pdf.mjs / export_deck_stage_pdf.mjs 导出 PDF。
|
||||
*
|
||||
* 依赖：npm install playwright pptxgenjs sharp
|
||||
*
|
||||
* 按文件名排序（01-xxx.html → 02-xxx.html → ...）。
|
||||
*/
|
||||
|
||||
import { chromium } from 'playwright';
|
||||
import pptxgen from 'pptxgenjs';
|
||||
import fs from 'fs/promises';
|
||||
import path from 'path';
|
||||
import os from 'os';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
function parseArgs() {
|
||||
const args = { width: 1920, height: 1080, mode: 'image' };
|
||||
const args = {};
|
||||
const a = process.argv.slice(2);
|
||||
for (let i = 0; i < a.length; i += 2) {
|
||||
const k = a[i].replace(/^--/, '');
|
||||
args[k] = a[i + 1];
|
||||
}
|
||||
if (!args.slides || !args.out) {
|
||||
console.error('用法: node export_deck_pptx.mjs --slides <dir> --out <file.pptx> [--mode image|editable] [--width 1920] [--height 1080]');
|
||||
process.exit(1);
|
||||
}
|
||||
args.width = parseInt(args.width);
|
||||
args.height = parseInt(args.height);
|
||||
if (!['image', 'editable'].includes(args.mode)) {
|
||||
console.error(`未知 --mode: ${args.mode}。支持: image, editable`);
|
||||
console.error('用法: node export_deck_pptx.mjs --slides <dir> --out <file.pptx>');
|
||||
console.error('');
|
||||
console.error('⚠️ HTML 必须符合 4 条硬约束（见 references/editable-pptx.md）。');
|
||||
console.error(' 视觉自由度优先的场景请改用 export_deck_pdf.mjs 导出 PDF。');
|
||||
process.exit(1);
|
||||
}
|
||||
return args;
|
||||
}
|
||||
|
||||
async function exportImage({ slidesDir, outFile, files, width, height }) {
|
||||
console.log(`[image mode] Rendering ${files.length} slides as PNG...`);
|
||||
async function main() {
|
||||
const { slides, out } = parseArgs();
|
||||
const slidesDir = path.resolve(slides);
|
||||
const outFile = path.resolve(out);
|
||||
|
||||
const browser = await chromium.launch();
|
||||
const ctx = await browser.newContext({ viewport: { width, height } });
|
||||
const page = await ctx.newPage();
|
||||
|
||||
const tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), 'deck-pptx-'));
|
||||
const pngs = [];
|
||||
for (const f of files) {
|
||||
const url = 'file://' + path.join(slidesDir, f);
|
||||
await page.goto(url, { waitUntil: 'networkidle' }).catch(() => page.goto(url));
|
||||
await page.waitForTimeout(1200);
|
||||
const out = path.join(tmpDir, f.replace(/\.html$/, '.png'));
|
||||
await page.screenshot({ path: out, fullPage: false });
|
||||
pngs.push(out);
|
||||
console.log(` [${pngs.length}/${files.length}] ${f}`);
|
||||
const files = (await fs.readdir(slidesDir))
|
||||
.filter(f => f.endsWith('.html'))
|
||||
.sort();
|
||||
if (!files.length) {
|
||||
console.error(`No .html files found in ${slidesDir}`);
|
||||
process.exit(1);
|
||||
}
|
||||
await browser.close();
|
||||
|
||||
const pres = new pptxgen();
|
||||
pres.defineLayout({ name: 'DECK', width: width / 96, height: height / 96 });
|
||||
pres.layout = 'DECK';
|
||||
for (const png of pngs) {
|
||||
const s = pres.addSlide();
|
||||
s.addImage({ path: png, x: 0, y: 0, w: pres.width, h: pres.height });
|
||||
}
|
||||
await pres.writeFile({ fileName: outFile });
|
||||
console.log(`Converting ${files.length} slides via html2pptx...`);
|
||||
|
||||
for (const p of pngs) await fs.unlink(p).catch(() => {});
|
||||
await fs.rmdir(tmpDir).catch(() => {});
|
||||
|
||||
console.log(`\n✓ Wrote ${outFile} (${files.length} slides, image mode, 文字不可编辑)`);
|
||||
}
|
||||
|
||||
async function exportEditable({ slidesDir, outFile, files }) {
|
||||
console.log(`[editable mode] Converting ${files.length} slides via html2pptx...`);
|
||||
|
||||
// 动态 require html2pptx.js（CommonJS 模块）
|
||||
const { createRequire } = await import('module');
|
||||
const require = createRequire(import.meta.url);
|
||||
let html2pptx;
|
||||
@@ -111,7 +71,7 @@ async function exportEditable({ slidesDir, outFile, files }) {
|
||||
html2pptx = require(path.join(__dirname, 'html2pptx.js'));
|
||||
} catch (e) {
|
||||
console.error(`✗ 加载 html2pptx.js 失败：${e.message}`);
|
||||
console.error(` 该模块依赖 sharp —— 请跑 npm install sharp 后重试。`);
|
||||
console.error(` 依赖缺失时请跑：npm install playwright pptxgenjs sharp`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
@@ -141,27 +101,7 @@ async function exportEditable({ slidesDir, outFile, files }) {
|
||||
}
|
||||
|
||||
await pres.writeFile({ fileName: outFile });
|
||||
console.log(`\n✓ Wrote ${outFile} (${files.length - errors.length}/${files.length} slides, editable mode, 文字可在 PPT 中直接编辑)`);
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const { slides, out, width, height, mode } = parseArgs();
|
||||
const slidesDir = path.resolve(slides);
|
||||
const outFile = path.resolve(out);
|
||||
|
||||
const files = (await fs.readdir(slidesDir))
|
||||
.filter(f => f.endsWith('.html'))
|
||||
.sort();
|
||||
if (!files.length) {
|
||||
console.error(`No .html files found in ${slidesDir}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (mode === 'image') {
|
||||
await exportImage({ slidesDir, outFile, files, width, height });
|
||||
} else {
|
||||
await exportEditable({ slidesDir, outFile, files });
|
||||
}
|
||||
console.log(`\n✓ Wrote ${outFile} (${files.length - errors.length}/${files.length} slides, 可编辑 PPTX)`);
|
||||
}
|
||||
|
||||
main().catch(e => { console.error(e); process.exit(1); });
|
||||
Reference in new issue
Block a user