手机提词器生成器 Skill
适用场景
- 做口播 / 直播 / 讲课，需要手机端滚动提词
- 想要不装 App、断网也能用的轻量工具
- 本场有多套台词，需要来回切换
- 需要"装到桌面当 App"或离线缓存（PWA）
目录结构
teleprompter-generator/
├── SKILL.md ← 本文件
├── assets/
│ ├── teleprompter_template.html ← 完整单文件模板（约 32KB，内联 CSS/JS，零依赖）
│ └── pwa/ ← 完整 PWA 配套（generate.py 会自动复制到输出目录）
│ ├── manifest.json
│ ├── sw.js
│ └── icon.svg ← SVG 矢量图标，避免技能市场上传二进制文件被拒
└── scripts/
└── generate.py ← 参数化生成器（纯标准库，无外部依赖）
> 模板本身是自包含的：所有 CSS/JS 内联在一个 HTML 里，不请求任何 CDN，断网照常运行。
> 用 generate.py 生成时（默认），会自动在输出目录附上 PWA 全套配套文件，产物即是一个可装桌面的完整 PWA（HTML 文件名与 manifest/sw 引用会自动对齐）。
工作方式
两种用法，按用户需求选：
用法 A：直接给模板（最快）
把 assets/teleprompter_template.html 复制到用户指定目录（如 outputs/tools/teleprompter.html 或用户桌面），即生成可用提词器。
import shutil, os
src = os.path.join(skill_dir, "assets", "teleprompter_template.html")
dst = "用户指定的输出路径.html"
shutil.copy(src, dst)
用法 B：参数化定制（generate.py）
支持改标题、预填默认台词、默认字号/速度：
# 基础：输出到指定路径
python scripts/generate.py --out 输出路径.html
# 定制标题 + 预填台词（文本或文件）+ 默认字号/速度
python scripts/generate.py \
--out 输出路径.html \
--title "我的提词器" \
--default 台词.txt \
--font 48 --speed 100
--default可为「直接文本」或「文件路径」（文件按 UTF-8 读取）--font24–140 px；--speed20–400 px/s- 默认会带全套 PWA 配套（
manifest.json/sw.js/图标）复制到同目录；加--no-pwa则只输出单文件 HTML
操作规范（SOP）
- 确认输出路径：默认放
E:\WorkBuddyData\outputs\tools\，或按用户要求改。 - 选用法：无定制需求 → 用法 A；要改标题/预填词 → 用法 B。
- 生成文件：复制或运行 generate.py（默认即输出完整 PWA 目录）。
- 告知用法：告诉用户怎么拿到手机（见下「分发」）。
- PWA 已内置：generate.py 产物默认含 manifest+sw+图标，直接部署到静态托管即"可装桌面"。
核心实现要点（避免重踩坑）
生成器产出的 HTML 已内置以下实现，给二次开发参考：
- 正向滚动：用
transform: translateY(startOff - pos)而非scrollTop。startOff = vh*0.92，内容从屏底升入向结尾滚。切勿用flex-end贴底，否则一开播只显末尾。 - 分镜：空行
\n\s*\n切分 = 一个分镜；时间轴节点left按sceneStart[i]/total*100%定位，点节点jumpToScene(i)。 - 横竖屏：监听
resize+orientationchange，旋转后重算字号（横屏 ×1.12）并measure()重测滚动距离。 - 多文案：
localStorage数组[{id,title,text}]；切换loadPrompt(id, keepPlaying)；播报中switchPrompt(±1)。 - 删除用二次点击确认，不要
confirm()（移动端 WebView 常静默拦截）。 - 拖拽微调 + 进度条跳转 + 时间条：台词区
pointermove上下滑 = 手动微调pos（位移按state.dragMul倍率放大，#drag滑块无级调节 0.5x–5x，含 1/2/3x 预设）；拖拽自动暂停，轻点仍 toggle 播放。顶部#seek进度条pointerdown/move按clientX/width算百分比跳pos，往左拖即回到前面。进度条下方#timebar实时显示「已播 mm:ss · 剩余 mm:ss」（按total/speed估算）。三者均用touch-action:none+setPointerCapture防手势冲突。 - PWA：
manifest.json+sw.js（cache-first）即可离线 + 装桌面，但需 HTTPS 或 localhost 才生效。
分发到手机（三种）
| 方式 | 操作 | 离线 | 装桌面 |
|---|---|---|---|
| IM/网盘发文件 | 通过 IM 工具或网盘发 .html（被拦则发 .zip 手机解压） |
✅ | 用浏览器「添加到主屏幕」等价 |
| 局域网直连 | 同 WiFi，http://<电脑IP>:<端口>/teleprompter.html |
✅ | ✅ |
| 部署静态托管 + 加主屏 | GitHub Pages/Netlify 拿 https，手机「添加到主屏幕」 | ✅ | 原生体验 |
APK 路线：本地无 Android SDK，不直打 APK。最稳是 PWA→托管→用 Google 官方 Bubblewrap 转 TWA-APK，或第三方 PWA-to-APK 在线服务作为备选，离线缓存照常生效。
注意事项
- 单文件即可离线运行，不需要任何服务器或网络。
- App 内置浏览器直接打开 HTML 渲染可能异常，务必「用其他应用打开」选 Chrome/Safari。
- 超长稿（>2万字）建议用空行分镜拆段，避免单 DOM 过长；如需十万字级可加虚拟滚动。
- 纯前端、不收集任何数据，草稿只存用户本机 localStorage。
