# HTML to PPTX 导出引擎

## 背景

DashiAI PPT Skill 中包含一个 `html-deck-to-pptx` 导出子包，能将 HTML 演示文稿导出为可编辑的 PPTX 文件。该子包目前为专有组件（非开源），但其核心逻辑可复刻。

我们需要一个独立、可控的导出引擎，集成到现有工作流中。凡是 Hermes/Agogent 生成的 HTML PPT，都能一键导出为**文字可编辑、布局可还原**的 PPTX 文件。

---

## 需求

### 输入

- 一个 HTML 文件（含完整 CSS 内联或外联），结构为横向翻页的演示文稿
- 每页用 `<section>` 或特定容器标识
- 样式通过 CSS 定义（font-size, color, font-weight, text-align, background-color 等）

### 输出

- 一个标准的 `.pptx` 文件，可用 Microsoft PowerPoint / WPS / Keynote 打开
- **文字必须可编辑**（双击修改字体、大小、颜色）
- **形状/框线/背景色保持矢量**（可拖动、缩放）
- **排版布局按原始位置还原**（x, y, width, height 尽可能一致）

### 可放弃的特性（第一期不做）

- JS 图表（ECharts/Chart.js）→ 导出为截图占位或忽略
- CSS 渐变/阴影/圆角 → 简化或忽略
- 入场/翻页动画 → 忽略
- Web 字体 → 映射为 Office 相近字体
- 响应式布局 → 固定一宽高比

---

## 技术方案

### 架构

```
HTML 文件
   ↓
启动本地 HTTP 服务（Node.js http-server 或 express）
   ↓
Chrome headless（通过 playwright）打开页面
   ↓
遍历 DOM，提取每页每个元素：
  - 位置（offsetLeft, offsetTop, offsetWidth, offsetHeight）
  - 文字内容（innerText）
  - 样式（font-size, color, font-weight, text-align, background-color 等）
   ↓
pptxgenjs 按页创建 slide，按坐标绘制 TextBox / Shape
   ↓
输出 .pptx 文件
```

### 核心依赖

| 依赖 | 用途 | 备注 |
|------|------|------|
| `playwright` | 控制 Chrome headless 渲染页面、提取 DOM 信息 | 你的环境已有 Chrome |
| `pptxgenjs` | 生成 PPTX 文件（OOXML） | 纯 JS，不依赖 Office |
| `http-server` 或 express | 本地静态文件服务 | |

### 可选升级

- 支持 PNG/JPEG 图片的提取与还原
- 表格结构识别（`<table>` → PPT 表格）
- 列表识别（`<ul>/<ol>` → PPT 列表）
- CSS 圆角/边框映射
- 批量导出（多 HTML 文件）

---

## 验收标准

1. **输入一个 10 页的 HTML PPT**，导出 PPTX 后在 PowerPoint 中打开
2. **每一页的标题、正文文字可双击编辑**
3. **文字字体、大小、颜色、粗体与原 HTML 一致**
4. **布局位置基本还原**（不要求像素级，但段落不应错位到其他区域）
5. **执行时间不超过 30 秒**（10 页）

---

## 工作流集成

```bash
# 命令行调用
html2pptx input.html output.pptx

# 或
html2pptx input.html -o output.pptx

# 或指定端口
html2pptx input.html -o output.pptx -p 8080
```

输出文件路径直接返回给用户，用户双击或在 PowerPoint 中打开即可。

---

## 第一版范围（MVP）

- [ ] 基础架构：HTTP 服务 + Chrome headless 渲染 + DOM 提取
- [ ] 文字提取：位置、内容、font-size、color、font-weight、text-align
- [ ] PPTX 生成：pptxgenjs 建 slide，画 TextBox
- [ ] 分页识别：按 `<section>` 或 `[data-slide]` 切割
- [ ] 背景色还原：slide 背景色
- [ ] 对齐方式：left/center/right

第一版不做的：
- 图片提取
- 表格识别
- 列表识别
- 渐变/阴影/圆角