html-slide-reportlisted
Install: claude install-skill 1231Johnny/claude-skills
# HTML 幻灯式汇报材料
幻灯页面与导出的两套分发件（示例数据）：
## 什么时候用
- 汇报要**现场讲**（需要全屏、键盘翻页、投影友好）；
- 同一份内容还要**发出去**（需要 PDF）；
- 对方可能还要**改**（需要 PPTX）。
传统做法是做一套 PPT，但 PPT 里的图表是死的、数据一变就得手工重排。这里反过来：**HTML 是唯一的事实来源，PDF 和 PPTX 都是从它导出的快照**。改数据只需���跑脚本，出图和导出全自动。
代价是导出这一步有点绕——浏览器渲染 → 截图 → 拼装，见下文第 3 步。
---
## 第 1 步：幻灯骨架
核心是 CSS `scroll-snap`，让每一页在滚动时自动对齐整屏，达到翻页效果而不需要写 JS 翻页逻辑：
```css
html { scroll-snap-type: y mandatory; scroll-behavior: smooth; }
.slide {
height: 100vh; scroll-snap-align: start;
display: flex; flex-direction: column;
padding: 56px 72px; box-sizing: border-box;
overflow: hidden;
}
```
键盘导航是十来行 JS：
```javascript
const slides = [...document.querySelectorAll('.slide')];
let i = 0;
addEventListener('keydown', e => {
if (['ArrowDown','ArrowRight',' ','PageDown'].includes(e.key)) { i = Math.min(i+1, slides.length-1); }
else if (['ArrowUp','ArrowLeft','PageUp'].includes(e.key)) { i = Math.max(i-1, 0); }
else return;
e.preventDefault();
slides[i].scrollIntoView({ behavior: 'smooth' });
});
// 滚动时反向同步页码（用户拖滚动条后页码不能错位）
const io = new IntersectionObserver(es => es.forEach(e => {
if (e.isIntersecting) i = slides.indexOf(e.target);
}), { threshold: 0.6 });
slides.forEach(s => io.observe(s));
```
**用 `IntersectionObserver` 反向同步当前页，不要只用键盘事件维护索引。** 用户一旦滚了滚轮，键盘维护的索引就和实际页码脱节了，表现为"按一下方向键跳两页"。
完整可运行的骨架见 `references/slide-spec.md`。
---
## 第 2 步：内容组织
### 数据前置
**把数据表格单独做成一页，放在观点页之前。** 观众看到结论之前先看到原始依据，后面所有的分析才有落点。这是这套材料最受认可的一点。
典型页序：
```
0 封面
1 数据明细表