mirror of
https://github.com/aculix/huashu-design.git
synced 2026-10-27 07:15:54 +00:00
launch huashu-design v1.0: 9 demos + marketing-first README
- 新增 9 个能力 demo（workflow + capability），每个 MP4 + GIF + 60fps - README 重写：营销 hook 开头 · 功能优先结构 · 自然嵌入 GIF - 修复 render-video.js Google Fonts networkidle 超时 - 修复 c1-ios-prototype 刘海/Home Indicator 背景色 - 补充 references/editable-pptx.md 和 scripts/export_deck_stage_pdf.mjs Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
alchainandClaude Opus 4.7 committed
1 parent
f3692aac10
commit
b127f8baa3
24 files changed
+8206
-281
No files matched your search
+102
-32
@@ -1,26 +1,39 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* export_deck_pptx.mjs — 把多文件 slide deck 导出为 PPTX（图片铺底）
|
||||
* export_deck_pptx.mjs — 把多文件 slide deck 导出为 PPTX
|
||||
*
|
||||
* 两种模式：
|
||||
* --mode image 图片铺底，视觉 100% 保真，⚠️ 文字不可编辑
|
||||
* --mode editable 文本框原生，文字可编辑，要求 HTML 符合 4 条硬约束（见 references/editable-pptx.md）
|
||||
*
|
||||
* 用法：
|
||||
* node export_deck_pptx.mjs --slides <dir> --out <file.pptx> [--width 1920] [--height 1080]
|
||||
* # 图片模式（默认）
|
||||
* 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 随便写，不挑格式
|
||||
*
|
||||
* 如果用户需要「可编辑文字」的 PPTX：
|
||||
* ❌ 不要在 claude-design 的 HTML 上硬上 html2pptx——claude-design 的 HTML 视觉自由度高，
|
||||
* 很少能满足 html2pptx 的严格约束（p 标签语法、无 ::before、无 span margin 等）。
|
||||
* 实测 32 页里能 pass 的不到 30%，剩下的要逐页改造 + 逐页修字体溢出——工时失控。
|
||||
* ✅ 正确做法：切换到 **huashu-slides** skill 的 Path A，按它的 HTML 格式**从头重构**
|
||||
* 每一页。huashu-slides 的 HTML 从一开始就符合 html2pptx 约束，可 100% 导出可编辑 PPTX。
|
||||
* --mode editable 特点：
|
||||
* - 调用 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 的第一行就按约束写
|
||||
*
|
||||
* 依赖：playwright pptxgenjs
|
||||
* npm install playwright pptxgenjs
|
||||
* 依赖：
|
||||
* --mode image: npm install playwright pptxgenjs
|
||||
* --mode editable: npm install playwright pptxgenjs sharp
|
||||
*
|
||||
* 会按文件名排序（01-xxx.html → 02-xxx.html → ...）
|
||||
* 按文件名排序（01-xxx.html → 02-xxx.html → ...）。
|
||||
*/
|
||||
|
||||
import { chromium } from 'playwright';
|
||||
@@ -28,36 +41,32 @@ 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 };
|
||||
const args = { width: 1920, height: 1080, mode: 'image' };
|
||||
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> [--width 1920] [--height 1080]');
|
||||
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`);
|
||||
process.exit(1);
|
||||
}
|
||||
return args;
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const { slides, out, width, height } = 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);
|
||||
}
|
||||
console.log(`Found ${files.length} slides, rendering to PNG...`);
|
||||
async function exportImage({ slidesDir, outFile, files, width, height }) {
|
||||
console.log(`[image mode] Rendering ${files.length} slides as PNG...`);
|
||||
|
||||
const browser = await chromium.launch();
|
||||
const ctx = await browser.newContext({ viewport: { width, height } });
|
||||
@@ -76,7 +85,6 @@ async function main() {
|
||||
}
|
||||
await browser.close();
|
||||
|
||||
// Build PPTX
|
||||
const pres = new pptxgen();
|
||||
pres.defineLayout({ name: 'DECK', width: width / 96, height: height / 96 });
|
||||
pres.layout = 'DECK';
|
||||
@@ -86,12 +94,74 @@ async function main() {
|
||||
}
|
||||
await pres.writeFile({ fileName: outFile });
|
||||
|
||||
// cleanup
|
||||
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)`);
|
||||
console.log(` 要可编辑？改走 huashu-slides 的 Path A 从头重构 HTML。`);
|
||||
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;
|
||||
try {
|
||||
html2pptx = require(path.join(__dirname, 'html2pptx.js'));
|
||||
} catch (e) {
|
||||
console.error(`✗ 加载 html2pptx.js 失败：${e.message}`);
|
||||
console.error(` 该模块依赖 sharp —— 请跑 npm install sharp 后重试。`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const pres = new pptxgen();
|
||||
pres.layout = 'LAYOUT_WIDE'; // 13.333 × 7.5 inch，对应 HTML body 960 × 540 pt
|
||||
|
||||
const errors = [];
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const f = files[i];
|
||||
const fullPath = path.join(slidesDir, f);
|
||||
try {
|
||||
await html2pptx(fullPath, pres);
|
||||
console.log(` [${i + 1}/${files.length}] ${f} ✓`);
|
||||
} catch (e) {
|
||||
console.error(` [${i + 1}/${files.length}] ${f} ✗ ${e.message}`);
|
||||
errors.push({ file: f, error: e.message });
|
||||
}
|
||||
}
|
||||
|
||||
if (errors.length) {
|
||||
console.error(`\n⚠️ ${errors.length} 张 slide 转换失败。常见原因：HTML 不符合 4 条硬约束。`);
|
||||
console.error(` 详见 references/editable-pptx.md 的「常见错误速查」。`);
|
||||
if (errors.length === files.length) {
|
||||
console.error(`✗ 全部失败，不生成 PPTX。`);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
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 });
|
||||
}
|
||||
}
|
||||
|
||||
main().catch(e => { console.error(e); process.exit(1); });
|
||||
Reference in new issue
Block a user