skill-forge-hub 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -4
- package/annual-report/SKILL.md +17 -2
- package/annual-report/resources/disk-and-html.md +3 -1
- package/annual-report/resources/reference.html +360 -0
- package/annual-report/user-config.md +3 -0
- package/cli.js +175 -36
- package/daily-report/SKILL.md +20 -5
- package/daily-report/resources/content-rules.md +9 -9
- package/daily-report/resources/disk-and-html.md +4 -2
- package/daily-report/resources/reference.html +613 -0
- package/daily-report/resources/usage-guide.md +10 -10
- package/daily-report/user-config.md +5 -2
- package/magic-deck/SKILL.md +52 -0
- package/magic-deck/resources/deck-spec.md +248 -0
- package/magic-deck/resources/reference.html +710 -0
- package/magic-deck/user-config.md +37 -0
- package/meta-forge/SKILL.md +46 -0
- package/meta-forge/resources/forge-rules.md +74 -0
- package/meta-forge/resources/usage-guide.md +41 -0
- package/meta-forge/user-config.md +19 -0
- package/package.json +3 -1
- package/spec-doc2spec/SKILL.md +17 -8
- package/spec-doc2spec/user-config.md +22 -0
- package/spec-spec2doc/SKILL.md +17 -8
- package/spec-spec2doc/user-config.md +22 -0
- package/weekly-report/SKILL.md +20 -5
- package/weekly-report/resources/content-rules.md +10 -10
- package/weekly-report/resources/disk-and-html.md +4 -2
- package/weekly-report/resources/industry-dictionary.md +1 -1
- package/weekly-report/resources/reference.html +866 -0
- package/weekly-report/resources/usage-guide.md +10 -10
- package/weekly-report/user-config.md +5 -2
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
- 「上周三的日报」→ 上一周的周三(周一为一周起点)
|
|
8
8
|
- 「10月20号的日报」→ 当年 10 月 20 日(该日期晚于今天则取去年同日)
|
|
9
9
|
- 「20261020 的日报」→ 直接按数字日期解析
|
|
10
|
-
- 「10月20号到25号的日报」「11.05~11.07」「上周一到上周五」→
|
|
10
|
+
- 「10月20号到25号的日报」「11.05~11.07」「上周一到上周五」→ 连续日期批量生成,每天一份(前一天明日计划自动从后一天任务进度抽取)
|
|
11
11
|
- 同一日期重复生成会直接覆盖原文件;说「保留之前的」→ 文件名追加时间戳另存不覆盖
|
|
12
12
|
- 说「日报和周报都要」→ 日报、周报按各自流程分别生成,同日数据自动去重
|
|
13
13
|
- 说「打开/查看今天的日报」→ 该报告文件已存在时直接打开不重新生成;不存在则按正常流程生成
|
|
@@ -15,16 +15,16 @@
|
|
|
15
15
|
- 说「只写 xxx 的日报 / 只聚合 xxx 仓库」→ 只收集指定仓库的提交,跳过其它仓库
|
|
16
16
|
|
|
17
17
|
## 口头追加任务
|
|
18
|
-
- 说「补充一下:上午改了角标接口,下午跟测试联调」→
|
|
18
|
+
- 说「补充一下:上午改了角标接口,下午跟测试联调」→ 自动按语义拆成多条任务,润色为规范格式并入「今日任务进度」
|
|
19
19
|
- 拆分信号:时间词(上午/下午/晚上)、连接词(还有/另外/以及)、分号顿号列举、数字列举
|
|
20
|
-
- 补充内容带分段词时按段并入:「明日计划:xxx」→ 明日计划段;「风险:xxx」→ 风险阻塞点段(说「风险暂无/无风险」→
|
|
20
|
+
- 补充内容带分段词时按段并入:「明日计划:xxx」→ 明日计划段;「风险:xxx」→ 风险阻塞点段(说「风险暂无/无风险」→ 风险段写「暂无」);不带分段词默认并入「今日任务进度」
|
|
21
21
|
- 与 git 提交聚合出的任务自动去重,同一件事只保留一条
|
|
22
22
|
|
|
23
23
|
## 贴文字 / 发图片 / 给文件整理日报(无 git 提交也适用)
|
|
24
24
|
- 直接贴一段文字说「整理成日报 / 把这段文字整理成日报」→ 以文字为主源生成,不依赖 git 提交(非开发岗位也可用);说「只整理这段文字 / 只按这段 / 不用 git」同样跳过 git 与会话上下文
|
|
25
25
|
- 发图片(截图/照片等 jpg/png/webp)或给文件(md/txt/docx/pdf 等)说「整理成日报」→ 先用 Read 读取:图片按视觉理解提取图中文字信息,md/txt 直接读文本,docx/pdf 优先尝试 pandoc 转文本(无 pandoc 则请用户粘贴文字),再按纯文字模式整理
|
|
26
26
|
- 图片模糊/内容读不清时:先把已提取的部分展示给用户确认或补充,不瞎编没读到的内容
|
|
27
|
-
- 自动分段归类:文字里写「明天/接下来/计划…」→ 明日计划;「风险/阻塞/问题/卡住…」→ 风险阻塞点;其余 →
|
|
27
|
+
- 自动分段归类:文字里写「明天/接下来/计划…」→ 明日计划;「风险/阻塞/问题/卡住…」→ 风险阻塞点;其余 → 今日任务进度(用户已明确分段则按用户分段)
|
|
28
28
|
- 自动拆条润色:按主题拆成一条条(日报粒度 20-40 字/点),口语整理为动词开头的规范描述
|
|
29
29
|
- 量化与用时:没有代码提交就没有文件数/行数;进度没写默认完成 100%、计划 0%;用时没提就不写,不瞎编
|
|
30
30
|
- 默认直接生成落盘(CONFIRM: never,无需确认);把顶部 CONFIRM 改为 text/always,或临时说「先看看效果/先出效果」→ 先在对话输出整理好的报告正文,用户说「可以/确认/落盘」→ 再落盘文件与内容区截图并开 html;说「改一下 xxx」→ 按意见修改后重新出效果再确认
|
|
@@ -32,22 +32,22 @@
|
|
|
32
32
|
- 说「不落盘/别写文件」时跳过确认,直接对话输出
|
|
33
33
|
|
|
34
34
|
## 自定义模板(适配各类岗位)
|
|
35
|
-
-
|
|
35
|
+
- 内置模板为三段式(今日任务进度/明日计划/风险阻塞点),适合开发岗位;其他岗位可自定义模板
|
|
36
36
|
- 临时换模板:说「这次按 xxx 来」→ 口头描述结构(如"按四段:工作内容/存在问题/明日计划/需要支持"),当次按该结构生成,不改配置
|
|
37
37
|
- 永久换模板:把顶部配置 TEMPLATE 改为 custom,并按 SKILL.md 的「📝 自定义模板」节说明修改段结构,之后默认按新模板生成
|
|
38
38
|
- 说「以后都用这个模板」→ 自动把当前口述的结构写入「📝 自定义模板」节并把 TEMPLATE 改为 custom
|
|
39
39
|
- 模板优先于纯文字模式的信号词归类:指定了段名后,文字按段名归类填充
|
|
40
40
|
|
|
41
41
|
## 角色定制(我的职业画像)
|
|
42
|
-
- 默认按顶部「默认配置」ROLE
|
|
42
|
+
- 默认按顶部「默认配置」ROLE 生成(当前:全栈开发工程师(企业内技术开发));说「我的职业是 XX / 我的主要工作是 XX / 以后默认用 XX 角色」→ 永久修改 ROLE
|
|
43
43
|
- 说「以 XX 的身份写日报」→ 当次按该角色生成(内置 12 行业词条:研发/销售/运营/产品/HR/财务/市场/客服/项目/行政/法务/设计可直接用),不改配置
|
|
44
44
|
- 词典外行业走兜底:按骨架 + 你提供的素材现场生成词条;说「记住这个行业」→ 固化为新词条
|
|
45
45
|
|
|
46
46
|
## 控制落盘(临时要求,仅对当次生效)
|
|
47
|
-
- 默认:对话输出 Markdown + md/txt/html 三文件 + 内容区截图 content-png 落盘到 DIR(auto 按系统选:macOS=/Users/luzhaosheng/MyWork
|
|
47
|
+
- 默认:对话输出 Markdown + md/txt/html 三文件 + 内容区截图 content-png 落盘到 DIR(auto 按系统选:macOS=/Users/luzhaosheng/MyWork/reports、Windows=d:\Workspace_QCoder\reports)/<日期>/ + html 自动打开(DIR 目录/盘符不存在时自动改用用户主目录下 reports:macOS=~/reports、Windows=%USERPROFILE%\reports)
|
|
48
48
|
- 说「写到桌面」→ 本次落盘到桌面(macOS=~/Desktop、Windows=%USERPROFILE%\Desktop);说「存到 ~/report / D:\report」→ 本次用指定目录(均自动按日期建子目录)
|
|
49
49
|
- 说「不落盘/别写文件」→ 本次只在对话输出,不写文件、不开浏览器
|
|
50
|
-
- 说「只要 md」「只出 html」「只要内容区截图」→ 本次只落指定格式文件;说「这次不截图」→ 本次跳过截图(content-png = 三张卡片整体一张图,四周约 40px
|
|
50
|
+
- 说「只要 md」「只出 html」「只要内容区截图」→ 本次只落指定格式文件;说「这次不截图」→ 本次跳过截图(content-png = 三张卡片整体一张图,四周约 40px 留白、「今日任务进度」标题右侧带目标日期徽章,不含头部标题、复制按钮、页脚)
|
|
51
51
|
- 说「只要截图/重新截个图」(如「给 10月22号的日报截个图」)→ 本次不重新生成内容,只对现有 html 执行内容区截图(覆盖 content-png,需 html 已存在,找不到则提示先生成)
|
|
52
52
|
- 说「别开浏览器」→ 本次落盘后不自动打开 html
|
|
53
53
|
- 说「保留之前的」→ 同日期重复生成时不覆盖,文件名追加时间戳另存
|
|
@@ -56,8 +56,8 @@
|
|
|
56
56
|
| 配置项 | 作用 | 可选值 / 示例 |
|
|
57
57
|
|---|---|---|
|
|
58
58
|
| DISK | 是否落盘写文件 | true(落盘,默认)/ false(默认只在对话输出) |
|
|
59
|
-
| FORMATS | 落盘哪些格式(数组) | [md, txt, html, content-png](默认,含内容区截图)/ [md, html] / [md, txt, html](不截图);content-png = 三张卡片整体截图(四周约 40px
|
|
60
|
-
| DIR | 落盘根目录 | auto(按当前系统自动选 DIR_MAC / DIR_WIN,默认);DIR_MAC = macOS 根目录(/Users/luzhaosheng/MyWork
|
|
59
|
+
| FORMATS | 落盘哪些格式(数组) | [md, txt, html, content-png](默认,含内容区截图)/ [md, html] / [md, txt, html](不截图);content-png = 三张卡片整体截图(四周约 40px 留白、任务进度节带日期徽章),不含头部标题/复制按钮/页脚 |
|
|
60
|
+
| DIR | 落盘根目录 | auto(按当前系统自动选 DIR_MAC / DIR_WIN,默认);DIR_MAC = macOS 根目录(/Users/luzhaosheng/MyWork/reports);DIR_WIN = Windows 根目录(d:\Workspace_QCoder\reports) |
|
|
61
61
|
| OPEN_HTML | 落盘后是否自动打开 html | true(自动打开,默认)/ false(不打开) |
|
|
62
62
|
| TEMPLATE | 报告模板 | default(内置三段式,默认)/ custom(按「📝 自定义模板」节的结构生成) |
|
|
63
63
|
| CONFIRM | 落盘前先出效果确认 | never(直接生成不确认,默认)/ text(纯文字整理模式确认)/ always(所有生成都确认) |
|
|
@@ -2,18 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
> 你的个人配置全放在这里。skill-forge 升级技能时官方只更新 SKILL.md 与 resources/,
|
|
4
4
|
> 本文件始终保留你的版本——落盘目录、格式、角色画像、自定义模板放心改。
|
|
5
|
+
> 官方升级若带来新配置点,会另存 `user-config.md.upstream` 对照文件到同目录,
|
|
6
|
+
> 你按需查看并手动合并新配置点到本文件。
|
|
5
7
|
|
|
6
8
|
|
|
7
9
|
## ⚙️ 默认配置(用户可手动修改;临时口头要求永远优先)
|
|
8
10
|
|
|
9
11
|
```yaml
|
|
10
12
|
DISK: true # 是否落盘写文件;false = 默认只在对话输出,不写文件不开浏览器
|
|
11
|
-
|
|
13
|
+
CONFIG_VERSION: 1 # 配置结构版本:skill 升级时若配置结构变化会递增;AI 每次执行前对比 SKILL.md「配置版本机制」节声明的当前版本,不一致时按 SKILL.md 的迁移规则处理(先备份本文件为带时间戳 .bak,再迁移,最后对话告知用户)
|
|
14
|
+
FORMATS: [md, txt, html, content-png] # 落盘哪些格式(数组,可删减/增,如 [md, html] / [md, txt, html](不截图);content-png = 整页内容区截图(头部标题卡片 + 今日任务进度/明日计划/风险阻塞点三张分节卡片整体截出,头部卡片必须带上),删除该项即不截图;不影响对话中的 md 正文输出)
|
|
12
15
|
DIR: auto # 落盘根目录:auto = 按当前系统自动选 DIR_MAC / DIR_WIN(也可直接写死某个绝对路径)
|
|
13
16
|
DIR_MAC: /Users/luzhaosheng/MyWork/智慧食堂/reports # macOS 落盘根目录(自动按目标日期建子目录;目录不存在时回退用户主目录下 reports)
|
|
14
17
|
DIR_WIN: d:\Workspace_QCoder\reports # Windows 落盘根目录(自动按目标日期建子目录;目录/盘符不存在时回退用户主目录下 reports)
|
|
15
18
|
OPEN_HTML: true # 落盘后是否自动用浏览器打开 html(FORMATS 不含 html 时忽略)
|
|
16
|
-
TEMPLATE: default # 报告模板:default =
|
|
19
|
+
TEMPLATE: default # 报告模板:default = 内置三段式(任务进度/明日计划/风险阻塞点);custom = 使用下方「📝 自定义模板」节;口头临时指定模板仅当次生效
|
|
17
20
|
ROLE: 全栈开发工程师(企业内技术开发) # 用户默认职业角色与主要工作内容(两者并存:职业名 + 括号内工作内容,生成内容/术语/量化指标/节奏条/风险话术全部按此画像走);用户随口描述职业时(如「我搞装修的,天天跑工地」)→ AI 提炼为规范表述(装修项目经理(负责工地现场管理、施工进度与质量巡检))更新此处;说「以 XX 的身份写」→ 当次临时换角色不改配置;说「以后默认用 XX 角色 / 我的职业是 XX / 我的主要工作是 XX」→ 永久更新此处
|
|
18
21
|
CONFIRM: never # 落盘前确认:never = 直接生成落盘不确认(默认);text = 纯文字整理模式先出效果确认后再落盘;always = 任何方式生成都先确认;临时说「先看看效果」当次先确认、说「不用确认」当次跳过
|
|
19
22
|
```
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: magic-deck
|
|
3
|
+
description: 把内容做成 HTML 形态、PPT 体验的魔法幻灯(单文件离线打开、零外部依赖)。内置播放引擎(自动播放/循环/间隔可设/从头或当前播放)、键盘热键(翻页/直达/截图/复制/全屏)、五套内置模板(经典商务/极简留白/杂志画册/黑金发布/时间线叙事)+ 四套主题即点即换(整份或单页自由换肤)、页内连接与外部链接、逐页 PNG 截图(本页/选页批量,选页面板默认全选=一键导出全部页)与本页/选页批量文字复制(均不含任何操作元素)、全屏放映纯净模式(无关元素自动退场)。当用户请求把内容做成幻灯片/PPT/演示文稿、生成 HTML 幻灯、做分享页/汇报页,提到 magic-deck 或 /magic-deck,或询问其用法(怎么用/使用说明/能干什么)时使用。
|
|
4
|
+
allowed-tools: Bash, Read, Write
|
|
5
|
+
disable-model-invocation: false
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# 魔法幻灯生成(magic-deck)
|
|
9
|
+
|
|
10
|
+
把用户内容排版为单文件 HTML 幻灯片(16:9 舞台 + 播放引擎 + 四套风格 + 全屏放映),落盘并自动打开。
|
|
11
|
+
|
|
12
|
+
## 生成流程
|
|
13
|
+
|
|
14
|
+
0. **读用户配置**(TEMPLATE/THEME/WIDTH/HEIGHT/SEC/FILENAME/DIR 等)→ 先 Read 同目录 `user-config.md`
|
|
15
|
+
1. **收集内容**:解析用户提供的内容(文字/文件/结构化要点),确定页数与每页版式
|
|
16
|
+
2. **生成 HTML**(按 TEMPLATE 选版式骨架、四主题 CSS 变量、单页主题按钮、播放引擎、热键、截图/复制、全屏纯净模式)→ 先 Read `resources/reference.html` + `resources/deck-spec.md` 两份,以 reference.html 为骨架逐处替换内容
|
|
17
|
+
3. **落盘与命名**:写 `<文件名>.html` 到 DIR 目录,自动打开浏览器供用户放映。命名三级优先:①用户口头指定文件名 → 用指定名;②未指定且 FILENAME=auto → 按本次内容主题+用途总结中文名(如「智能探针系统-产品介绍」,让用户日后能按名找回继续改);③FILENAME 写死固定名 → 用固定名。重名一律自动加日期后缀,绝不覆盖;落盘目录复用不清空、不改动目录内既有文件
|
|
18
|
+
4. **使用咨询**(用户只问「怎么用」等用法、未要求生成)→ 输出纯文字使用指南(功能/热键/截图/复制/全屏/主题),不生成 HTML
|
|
19
|
+
|
|
20
|
+
## ⚙️ 配置与自定义
|
|
21
|
+
|
|
22
|
+
**执行本 skill 前必须先 Read 同目录 `user-config.md`**:默认配置(TEMPLATE/THEME/WIDTH/HEIGHT/SEC/FILENAME/DIR 等)与用户模板都在该文件中,以它为准。升级技能时 user-config.md 不会被覆盖,你的修改永久保留;官方更新配置时另存 `user-config.md.upstream` 对照文件,可按需手动合并新配置点。
|
|
23
|
+
|
|
24
|
+
## 规则速览
|
|
25
|
+
|
|
26
|
+
- 单文件 HTML 离线双击可打开:禁用 CDN/@import/外链 CSS/JS/图片/网络字体,字体用系统栈
|
|
27
|
+
- 模板五套(版式骨架,生成时按 TEMPLATE/口头点名选定)与主题四套(配色,运行时整份或「仅本页」单页换肤)正交组合;`.slide` 自带 `background:var(--bg)` 使单页换肤整页变色
|
|
28
|
+
- 工具栏控件统一 flex 垂直居中:`.toolbar/.group` flex + align-items:center + gap;`.tbtn` inline-flex + gap:6px + line-height:1;checkbox 14×14 与文字 6px 间距,文字不贴控件、上下不偏斜
|
|
29
|
+
- 页面 1280×720 舞台 + 按窗口等比缩放(--sc),窗口任意大小不变形
|
|
30
|
+
- 结构顺序:背景装饰 → 顶部进度条 → 工具栏 → 页码 → 提示 → 左右箭头 → 舞台页组 → 说明弹层 → 播放引擎
|
|
31
|
+
- 左右箭头不常驻:默认透明,鼠标在页面内才显现;触屏设备(hover:none)保持可见
|
|
32
|
+
- 全屏放映纯净模式:`:root:fullscreen` 下工具栏/页码/提示/箭头/弹层与背景氛围层全部隐藏、页面黑底 `#000`(与 PPT 软件放映一致:幻灯按比例充满画面,比例不匹配处补黑边,绝无主题氛围边框),只留主体;热键全屏下照常生效
|
|
33
|
+
- 截图与复制只含主体内容,绝不包含工具栏/页码/箭头等操作元素;复制分「⧉ 复制本页」(当前页文字)与「▦ 选页复制」(面板勾选任意页、默认全选=一键复制全部,按「【第 N 页】」分隔);截图分「📷 截图本页」与「▦ 选页截图」(面板勾选任意页、默认全选=串行逐张下载全部页 slide-页码-主题.png,进度实时显示已保存 k/N 页;文字通道不含图片,图片走截图)
|
|
34
|
+
- 落盘命名三级优先:口头指定 > FILENAME=auto 按主题+用途总结中文名 > 写死固定名;重名加日期后缀不覆盖,目录复用不清空
|
|
35
|
+
- 完整规范(骨架/主题色值/模板库/单页主题/播放引擎/热键表/截图实现)见 `resources/deck-spec.md`
|
|
36
|
+
|
|
37
|
+
## 🔧 配置版本机制(升级保护)
|
|
38
|
+
|
|
39
|
+
`user-config.md` 首行有 `CONFIG_VERSION` 字段,声明配置结构版本。本 skill 当前要求版本为 1。每次执行前先读 user-config.md:
|
|
40
|
+
|
|
41
|
+
1. 若 CONFIG_VERSION 缺失或小于当前要求版本:先将旧 `user-config.md` 备份为 `user-config.md.bak-<时间戳>`
|
|
42
|
+
2. 按版本迁移规则迁移字段(新增字段补默认值、改名字段按映射改名、删除字段保留在备份并在对话中提示用户)
|
|
43
|
+
3. 更新 `CONFIG_VERSION` 为当前版本
|
|
44
|
+
4. 对话告知用户「配置已升级到 vN:新增 X、改名 Y」
|
|
45
|
+
|
|
46
|
+
禁止在未声明版本变更的情况下静默修改配置语义;升级技能时 user-config.md 不会被覆盖(官方更新另存 `user-config.md.upstream` 对照文件)。
|
|
47
|
+
|
|
48
|
+
## 📏 文档同步自检纪律(维护者必读)
|
|
49
|
+
|
|
50
|
+
- 修改本 skill 任何文件后,必须 grep 全文核对:新词已命中、旧词零残留(改一处查一处)
|
|
51
|
+
- 修改 HTML 效果必须双处同步:`resources/reference.html` 与 `resources/deck-spec.md` 对应描述同时更新,禁止只改一处
|
|
52
|
+
- 修改配置键必须三处同步:user-config.md 的 yaml、SKILL.md 配置键清单、deck-spec.md 对应规则
|
|
@@ -0,0 +1,248 @@
|
|
|
1
|
+
# magic-deck HTML 幻灯片完整规范
|
|
2
|
+
|
|
3
|
+
> ⛔ **Reference 铁律(最高优先)**:本目录 `reference.html` 是定稿骨架源码(默认 classic 模板 + 四主题 + 全部组件 + 播放引擎 + 单页主题)。生成 HTML 时必须先 Read `resources/reference.html` 与本文件两份,以 reference.html 为骨架逐处替换内容;两者冲突时**以 reference.html 为准**。修改本 skill 的 HTML 效果时,必须同步更新 `resources/reference.html` 与本文档的对应描述,禁止只改一处。
|
|
4
|
+
|
|
5
|
+
生成单文件 HTML 幻灯片(HTML 形态、PPT 体验),所有实现细节以本文为准。
|
|
6
|
+
|
|
7
|
+
## 0. 铁律
|
|
8
|
+
|
|
9
|
+
- **单文件零依赖**:禁用 CDN/@import/外链 CSS/JS/图片/网络字体,双击离线可打开;字体用系统栈 `ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,'Microsoft YaHei',monospace`
|
|
10
|
+
- **舞台 1280×720(16:9)**,按窗口等比缩放(--sc),窗口任意大小不变形
|
|
11
|
+
- **截图与复制只含主体**:截图克隆当前 slide、复制取 slide innerText,绝不包含工具栏/页码/箭头/提示等操作元素
|
|
12
|
+
- **全屏纯净**:`:root:fullscreen` 下所有操作元素与背景氛围层(.bg-glow/.bg-grid)全部隐藏、页面底色纯黑 `#000`,只留舞台主体(与 PPT 软件放映一致:幻灯按比例充满画面,比例不匹配处补黑边,绝无主题氛围边框/光斑/网格)
|
|
13
|
+
- 操作元素(toolbar/pageno/hint/nav/help-mask)全部 fixed 定位在舞台之外,永远不进 slide 内部
|
|
14
|
+
|
|
15
|
+
## 1. 骨架结构(body 顺序固定)
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<div class="bg-glow"></div> <!-- 背景光斑(两个径向渐变 + 底色) -->
|
|
19
|
+
<div class="bg-grid"></div> <!-- 网格纹理(72px 格,径向 mask 渐隐) -->
|
|
20
|
+
<div class="progress"><div class="fill" id="progFill"></div></div> <!-- 顶部 3px 渐变进度 -->
|
|
21
|
+
<div class="toolbar"> <!-- 右上工具栏:主题组 + 播放组 + 工具组 -->
|
|
22
|
+
<div class="group"><button class="tbtn theme" data-theme="tech|biz|mono|warm">…×4
|
|
23
|
+
<button class="tbtn" id="btnScope" title="仅本页/全部">⭮ 仅本页</button></div>
|
|
24
|
+
<div class="group"><button class="tbtn" id="btnPlay">▶ 自动播放</button>
|
|
25
|
+
<select class="tbtn" id="selInterval">3s/5s/8s/10s</select>
|
|
26
|
+
<label class="tbtn"><input type="checkbox" id="chkLoop">循环</label>
|
|
27
|
+
<label class="tbtn"><input type="checkbox" id="chkFromStart" checked>从头</label></div>
|
|
28
|
+
<div class="group"><button class="tbtn" id="btnCopy">⧉ 复制本页</button>
|
|
29
|
+
<button class="tbtn" id="btnCopyMulti">▦ 选页复制</button>
|
|
30
|
+
<button class="tbtn" id="btnShot">📷 截图本页</button>
|
|
31
|
+
<button class="tbtn" id="btnShotMulti">▦ 选页截图</button>
|
|
32
|
+
<button class="tbtn" id="btnFull">⛶ 全屏</button>
|
|
33
|
+
<button class="tbtn help" id="btnHelp">?</button></div>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="pageno" id="pageNo"><b>1</b> / N</div>
|
|
36
|
+
<div class="hint">← → 翻页 · 空格下一页 · P 播放 · S 截图 · C 复制 · F 全屏 · ? 操作说明</div>
|
|
37
|
+
<button class="nav prev" id="btnPrev">‹</button>
|
|
38
|
+
<button class="nav next" id="btnNext">›</button>
|
|
39
|
+
<main class="stage"><div class="deck" id="deck">
|
|
40
|
+
<section class="slide cover active" data-title="封面">…</section>
|
|
41
|
+
<section class="slide" data-title="目录">…</section>
|
|
42
|
+
…(每页一个 section.slide,第一页带 active)
|
|
43
|
+
</div></main>
|
|
44
|
+
<div class="help-mask" id="helpMask">…说明弹层…</div>
|
|
45
|
+
<div class="help-mask" id="copyMask">…选页复制面板…</div>
|
|
46
|
+
<div class="help-mask" id="shotMask">…选页截图面板…</div>
|
|
47
|
+
<script>播放引擎(见 §6)</script>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## 2. 四主题 CSS 变量(完整色值,全部 8 变量齐备)
|
|
51
|
+
|
|
52
|
+
```css
|
|
53
|
+
:root, [data-theme="tech"]{ /* 深蓝科技(默认) */
|
|
54
|
+
--bg:#0a1929; --bg2:#071525; --panel:rgba(11,30,55,.72); --panel-solid:#0b1e37;
|
|
55
|
+
--text:#bae6fd; --muted:#5b7fa5; --accent:#0ea5e9; --accent2:#14b8a6;
|
|
56
|
+
--border:rgba(14,165,233,.18); --glow:rgba(14,165,233,.35);
|
|
57
|
+
--title-grad:linear-gradient(90deg,#7dd3fc,#0ea5e9 45%,#818cf8);
|
|
58
|
+
--tag-bg:rgba(14,165,233,.12);
|
|
59
|
+
}
|
|
60
|
+
[data-theme="biz"]{ /* 浅色商务 */
|
|
61
|
+
--bg:#f4f6fb; --bg2:#e9edf5; --panel:rgba(255,255,255,.85); --panel-solid:#ffffff;
|
|
62
|
+
--text:#1e293b; --muted:#64748b; --accent:#2563eb; --accent2:#0891b2;
|
|
63
|
+
--border:rgba(37,99,235,.14); --glow:rgba(37,99,235,.18);
|
|
64
|
+
--title-grad:linear-gradient(90deg,#1e40af,#2563eb 55%,#0891b2);
|
|
65
|
+
--tag-bg:rgba(37,99,235,.08);
|
|
66
|
+
}
|
|
67
|
+
[data-theme="mono"]{ /* 极简黑白 */
|
|
68
|
+
--bg:#fafafa; --bg2:#f0f0f0; --panel:rgba(255,255,255,.9); --panel-solid:#ffffff;
|
|
69
|
+
--text:#16181d; --muted:#6b7280; --accent:#111111; --accent2:#4b5563;
|
|
70
|
+
--border:rgba(17,17,17,.14); --glow:rgba(17,17,17,.08);
|
|
71
|
+
--title-grad:linear-gradient(90deg,#111,#333 60%,#666);
|
|
72
|
+
--tag-bg:rgba(17,17,17,.06);
|
|
73
|
+
}
|
|
74
|
+
[data-theme="warm"]{ /* 温暖渐变 */
|
|
75
|
+
--bg:#fdf3e7; --bg2:#f7e7d3; --panel:rgba(255,250,243,.85); --panel-solid:#fffaf3;
|
|
76
|
+
--text:#43301f; --muted:#8a7565; --accent:#d97706; --accent2:#ea580c;
|
|
77
|
+
--border:rgba(217,119,6,.18); --glow:rgba(217,119,6,.22);
|
|
78
|
+
--title-grad:linear-gradient(90deg,#b45309,#d97706 50%,#ea580c);
|
|
79
|
+
--tag-bg:rgba(217,119,6,.1);
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
主题切换(全局):`document.documentElement.setAttribute('data-theme', name)`,工具栏色点与色板卡同步 .on/.active-theme。
|
|
83
|
+
|
|
84
|
+
### 2.1 单页主题(整份或单页自由换肤)
|
|
85
|
+
|
|
86
|
+
- 主题色点点击默认改全局;工具栏主题组旁有「仅本页」toggle 按钮(#btnScope,⭮ 图标,.on 高亮):开启后色点点击只改当前页 `slides[cur].setAttribute('data-theme', name)`;再点一次恢复全局,且全局切换时 JS 遍历 slides 移除所有 slide 级 data-theme
|
|
87
|
+
- CSS 变量就近解析天然支持:`[data-theme="xxx"]` 属性选择器写在 slide 上即覆盖该页全部 var();`.slide` 必须自带背景 `background:var(--bg)`(页背景跟随主题,全局 .bg-glow/.bg-grid 作为舞台外围氛围层)
|
|
88
|
+
- 单页主题的 slide 上保留 data-theme 属性持久生效;截图(§7)克隆 slide 时该属性自然入图,无需特殊处理
|
|
89
|
+
- 生成时按 user-config 的 THEME 给 documentElement 设默认主题,单页差异化主题由用户放映时点选
|
|
90
|
+
|
|
91
|
+
## 2.2 模板库(五套版式骨架,与主题正交:模板管版式结构、主题管配色)
|
|
92
|
+
|
|
93
|
+
生成时按 user-config 的 `TEMPLATE` 选一套版式骨架;用户口头点名模板名(如「用杂志风模板」)当次生效不改配置。五套模板共用 §4 全部组件与 CSS 变量,只换结构:
|
|
94
|
+
|
|
95
|
+
### T1 classic 经典商务(默认,现骨架不动)
|
|
96
|
+
- 封面:logo 块 76px + 64px 大标题 + sub + 底部署名
|
|
97
|
+
- 内容页:`.s-head` 左色条标题 + `.grid2/.grid3` 卡片栅格;数据页:`.bignum` 大数字卡栅格;目录:`.toc` 条目列表
|
|
98
|
+
|
|
99
|
+
### T2 minimal 极简留白
|
|
100
|
+
- 骨架:`<div class="t-minimal">` 包整页内容;封面:无 logo 块,76px 大标题居中 + 细线分隔 + sub + 署名右上角
|
|
101
|
+
- 内容页:标题 44px 居中无色条 + 要点列表 `.points`(每条 28px/1.9 行距,窄栏 640px 居中);禁止 .card 描边与 .panel 面板,只用文字与留白
|
|
102
|
+
- 数据页:`.bignum` 大数字 88px 居中 + 标签
|
|
103
|
+
- CSS:`.t-minimal .s-title{font-size:44px;text-align:center}`;`.t-minimal .points{margin:0 auto;max-width:640px}`;`.t-minimal .points li{padding:12px 0;border-bottom:1px solid var(--border)}`;`.t-minimal .bignum b{font-size:88px}`
|
|
104
|
+
|
|
105
|
+
### T3 magazine 杂志画册
|
|
106
|
+
- 骨架:`<div class="t-magazine">`;封面:超大标题 96px 跨版左对齐 + 右上 .tag 期号 + 底部双栏署名行
|
|
107
|
+
- 内容页:左右分栏 `.m-split`(grid 46% 54%):左文(标题 36px + 段落)+ 右图位 `.m-figure`(高 380px 圆角 18 渐变块 var(--accent) 系 + 内嵌 .chip 标注)
|
|
108
|
+
- 数据页:横向大数字带 `.m-strip`(flex 三项,每项 64px 数字 + 标签,项间 1px var(--border) 分隔)
|
|
109
|
+
- CSS:`.t-magazine .s-title{font-size:96px;line-height:1.05}`;`.m-split{display:grid;grid-template-columns:46% 54%;gap:56px;align-items:center}`;`.m-figure{height:380px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--accent2));opacity:.85}`;`.m-strip{display:flex;justify-content:space-between}`;`.m-strip>div{flex:1;text-align:center;border-left:1px solid var(--border)}`
|
|
110
|
+
|
|
111
|
+
### T4 keynote 黑金发布
|
|
112
|
+
- 骨架:`<div class="t-keynote">`;封面:巨号 112px 标题居中 + 副题 24px + 底部小字日期署名
|
|
113
|
+
- 内容页:每页只放一个核心观点——`.k-big` 64px 加粗大字居中 + `.k-sub` 22px muted 一句解释 + 底部细进度横线;禁止栅格卡片堆料
|
|
114
|
+
- 数据页:单个 `.bignum` 160px 巨型数字居中 + 标签 + 环形进度装饰 `.k-ring`(conic-gradient 圆环 120px,数字在环内)
|
|
115
|
+
- CSS:`.t-keynote .s-title{font-size:112px}`;`.k-big{font-size:64px;font-weight:900;text-align:center;margin:auto}`;`.k-sub{font-size:22px;color:var(--muted);text-align:center}`;`.k-ring{width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--accent) 0 72%,var(--border) 72% 100%);display:flex;align-items:center;justify-content:center}`
|
|
116
|
+
|
|
117
|
+
### T5 timeline 时间线叙事
|
|
118
|
+
- 骨架:`<div class="t-timeline">`;封面/结束页同 classic
|
|
119
|
+
- 内容页:纵向时间线 `.tl`(左侧 3px var(--accent) 竖线 + 节点圆点 14px + 每条 .tl-item 卡片:时间 .tl-time 24px 加粗 + 标题 + 描述)
|
|
120
|
+
- 数据页:时间线节点上挂 .bignum 小数字
|
|
121
|
+
- CSS:`.tl{position:relative;padding-left:32px}`;`.tl::before{content:'';position:absolute;left:6px;top:8px;bottom:8px;width:3px;background:var(--accent)}`;`.tl-item{position:relative;padding:18px 0 18px 24px}`;`.tl-item::before{content:'';position:absolute;left:-32px;top:24px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--tag-bg)}`
|
|
122
|
+
|
|
123
|
+
模板选择仅在生成时定版式(user-config TEMPLATE 或口头点名),工具栏不提供运行时模板切换;运行时切换的是主题(全局/单页)。
|
|
124
|
+
|
|
125
|
+
## 3. 舞台与切换
|
|
126
|
+
|
|
127
|
+
```css
|
|
128
|
+
.stage{ position:fixed; inset:0; z-index:1; display:flex; align-items:center; justify-content:center; }
|
|
129
|
+
.deck{ position:relative; width:1280px; height:720px; transform:scale(var(--sc,1)); transform-origin:center center; flex:0 0 auto; }
|
|
130
|
+
.slide{ position:absolute; inset:0; padding:64px 80px; background:var(--bg); display:flex; flex-direction:column;
|
|
131
|
+
opacity:0; visibility:hidden; transform:translateX(36px);
|
|
132
|
+
transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
|
|
133
|
+
.slide.active{ opacity:1; visibility:visible; transform:translateX(0); transition:opacity .45s ease, transform .45s ease; }
|
|
134
|
+
.slide.dim{ opacity:0; transform:translateX(-36px); }
|
|
135
|
+
```
|
|
136
|
+
缩放:`fit()` 里 `--sc = min(innerWidth/1280, innerHeight/720)`,resize 监听重算。
|
|
137
|
+
|
|
138
|
+
## 4. 版式组件(全部主题变量驱动,不写死颜色)
|
|
139
|
+
|
|
140
|
+
- `.s-title`:40px/900 渐变文字(background-clip:text + color:transparent + text-shadow var(--glow))
|
|
141
|
+
- `.s-head`:左色条(6×34px 渐变 + 发光)+ 标题 + 右上 `.tag` 胶囊;页标题一般 32px
|
|
142
|
+
- `.panel`:主题面板(--panel 底 + 细边 + 圆角 14 + backdrop blur)
|
|
143
|
+
- `.grid2/.grid3/.grid4`:栅格布局(22/22/18px gap)
|
|
144
|
+
- `.card`:内容卡(圆角 12,hover 上浮 + 发光);`.card h4 .en` 英文小标签
|
|
145
|
+
- `.bignum`:大数字卡(52px 渐变数字 + 标签)
|
|
146
|
+
- `.toc`:目录条目(data-goto 跳页、序号块、页码),hover 右移
|
|
147
|
+
- `.checklist`:对勾清单(::before ✓ 渐变方块)
|
|
148
|
+
- `.theme-card`:主题色板卡(swatches 色块 + 名称 + 描述,点击切主题)
|
|
149
|
+
- `.cover`:封面(logo 块 76px + 64px 大标题 + sub + 底部署名,含 SIGNATURE)
|
|
150
|
+
- `.endpage`:结束页(56px 标题 + 致谢)
|
|
151
|
+
- `.chip`:内容小标签;`.chip.new` 加 chipPulse 呼吸
|
|
152
|
+
|
|
153
|
+
## 5. 操作元素(固定样式,禁止改动定位语义)
|
|
154
|
+
|
|
155
|
+
- `.toolbar`:right:18px top:14px,`display:flex + align-items:center + gap:10px`(各组垂直居中、组间留白)
|
|
156
|
+
- `.group`:胶囊组(圆角 999),`display:flex + align-items:center + gap:8px + padding:4px 6px`
|
|
157
|
+
- `.tbtn`:`display:inline-flex + align-items:center + justify-content:center + gap:6px + padding:7px 12px + line-height:1`(button/select/label 三种控件统一 flex 垂直居中,图标与文字 6px 间距、文字不贴边);`.tbtn.on` 高亮;`.tbtn.theme` 16px 圆形色点,.on 加 outline
|
|
158
|
+
- `select.tbtn`:与按钮同高同 padding,文字垂直居中;`label.tbtn`:cursor:pointer,内 `input[type=checkbox]` 14×14 + margin:0 + flex:0 0 auto(复选框与文字 gap 6px 垂直居中,不与文字贴靠)
|
|
159
|
+
- 禁止「文字直接贴控件边缘/控件内文字上下偏斜」的写法:一律走 flex + gap 规则
|
|
160
|
+
- `.pageno`:left:18px bottom:16px 胶囊页码
|
|
161
|
+
- `.nav`:左右 46px 圆钮,**默认 opacity:0 不常驻**;`body:hover .nav{ opacity:1 }` 鼠标在页面内才显现;`@media (hover:none){ .nav{ opacity:1 } }` 触屏保持可见;hover 时边框/文字变 accent 加发光
|
|
162
|
+
- `.hint`:底部居中 11px 键位提示
|
|
163
|
+
- `.help-mask`:全屏遮罩(open 类显示);`.help-panel` 内 kbd 键帽表格列全部热键 + `.help-note` 说明截图/复制只含主体、全屏自动隐藏操作元素、?shot 全量截图用法
|
|
164
|
+
- `#copyMask`:选页复制面板;`#shotMask`:选页截图面板——两面板结构同款,均复用 help-mask 遮罩类(全屏自动隐藏);`.copy-panel` 430px 宽纵向 flex(头部标题+全选 / 中部 `.cp-list` 页清单滚动区 / 底部取消+执行 / 末尾 .help-note 小字提示);`.cp-item` 行 = checkbox + 页码(accent 加粗)+ 首行预览(muted 单行省略),hover 用 --tag-bg;`.cp-foot .tbtn.primary` 主按钮 accent 底;勾选项截图面板用 `.sp-check`、复制面板用 `.cp-check`,各面板容器内自查询互不干扰
|
|
165
|
+
|
|
166
|
+
## 6. 播放引擎 JS(核心,逐条照做)
|
|
167
|
+
|
|
168
|
+
```js
|
|
169
|
+
var cur = 0, timer = null, playing = false;
|
|
170
|
+
function go(i){
|
|
171
|
+
cur = Math.max(0, Math.min(N - 1, i));
|
|
172
|
+
slides.forEach(function(s, k){
|
|
173
|
+
s.classList.toggle('active', k === cur);
|
|
174
|
+
s.classList.toggle('dim', k !== cur);
|
|
175
|
+
});
|
|
176
|
+
progFill.style.width = ((cur + 1) / N * 100) + '%';
|
|
177
|
+
pageNo.innerHTML = '<b>' + (cur + 1) + '</b> / ' + N;
|
|
178
|
+
if (location.hash !== '#/' + (cur + 1)) history.replaceState(null, '', '#/' + (cur + 1));
|
|
179
|
+
}
|
|
180
|
+
function next(){ if (cur < N - 1) go(cur + 1); else if (chkLoop.checked) go(0); }
|
|
181
|
+
function prev(){ if (cur > 0) go(cur - 1); else if (chkLoop.checked) go(N - 1); }
|
|
182
|
+
```
|
|
183
|
+
- **自动播放**:startPlay 里 `var sec = parseInt(selInterval.value, 10); if (!isFinite(sec) || sec < 1) sec = 5;` 兜底(防 NaN 连翻);到末页未勾循环则 stopPlay;播放时按钮变「⏸ 暂停」加 .on
|
|
184
|
+
- **键盘**:`document.addEventListener('keydown', …)`,先 `if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;`(防在控件内误触),再 `if (e.repeat) return;`(长按只响应首次)
|
|
185
|
+
- **热键表**:
|
|
186
|
+
- ←/→/↑/↓/PageUp/PageDown:上/下一页;Space:下一页(均 preventDefault)
|
|
187
|
+
- Home/End:首页/末页;1-9:数字直达对应页(`/^[1-9]$/.test(e.key)`)
|
|
188
|
+
- P:播放/暂停;S:截图本页;C:复制本页;F:全屏;?:说明弹层;Esc:关弹层 + 退全屏
|
|
189
|
+
- **全屏**:`toggleFull()` = fullscreenElement 存在则 exitFullscreen,否则 document.documentElement.requestFullscreen
|
|
190
|
+
- **主题作用域**:btnScope 未 .on 时主题点击 → `documentElement.setAttribute('data-theme', name)` + 遍历 slides 移除所有 slide 级 data-theme;btnScope .on 时 → `slides[cur].setAttribute('data-theme', name)`(仅当前页变色);`?theme=biz` 参数走全局;工具栏色点 .on 态按全局主题显示
|
|
191
|
+
- **页内连接**:deck 上事件委托,`closest('[data-goto]')` 跳页;目录条目/任意元素都可用
|
|
192
|
+
- **外部链接**:任意 `<a href="https://…">` 正常打开,不拦截
|
|
193
|
+
- **hash 定位**:`#/N` 定位第 N 页,hashchange 监听;**初始跳页用 jumped 标记**——`var jumped = false; if (sm){ go(parseInt(sm[1],10)-1); jumped = true; } … 最后 if (!jumped) go(0);`(init 末尾无条件 go(0) 会覆盖 ?shot 跳页,必须跳过)
|
|
194
|
+
- **?shot 参数**:`?shot=N` 定位第 N 页(配合 Chrome headless 逐页截图);`?shot=all` 不跳页(外部逐页访问 ?shot=N 抓全量);`?theme=biz` 切主题(只认 tech/biz/mono/warm)
|
|
195
|
+
|
|
196
|
+
## 7. 截图与复制(只含主体,是硬性要求)
|
|
197
|
+
|
|
198
|
+
- **复制**:`btnCopy` 取 `slides[cur].innerText`,压缩连续空行为单行、trim;clipboard.writeText 主路径 + textarea/execCommand 兜底;成功按钮变「✓ 已复制」1.5s
|
|
199
|
+
- **选页复制**:`btnCopyMulti` 打开 `#copyMask` 面板——`openCopyPanel` 按页生成 `.cp-item` 清单(checkbox 默认全选 + 页码 + 首行文字预览 escapeHtml);`cpAll` 全选/清空联动、勾选变化实时更新按钮计数「复制所选(N 页)」;`copySelectedPages` 收集选中页各自 innerText 压缩 trim,按「【第 N 页】」分隔 join '\n\n' 后走 fallbackCopy;默认全选时一次点击=复制全部页文字;Esc/点遮罩/取消关闭;文字通道不含图片(图片走截图)
|
|
200
|
+
- **截图(零依赖 SVG foreignObject → Canvas → PNG 2x,本页/选页共用 `renderShot(i, cb)`)**:
|
|
201
|
+
1. `clone = slides[i].cloneNode(true)`,移除 dim 类,inline 重设 position/inset/padding/display/opacity/visibility/transform/transition 为终态
|
|
202
|
+
2. 收集页面全部 `<style>` 文本拼进克隆 wrap 的 style;wrap 设 `data-theme` 全局主题兜底 + `width:1280px;height:720px;background:var(--bg)`(slide 级 data-theme 随克隆自然携带,单页主题页无需处理)
|
|
203
|
+
3. `svg(1280×720 viewBox) + foreignObject(1280×720)` 装 wrap,`new XMLSerializer().serializeToString(svg)` → `data:image/svg+xml;charset=utf-8,` + encodeURIComponent 赋给 `new Image()`
|
|
204
|
+
4. onload 里 `canvas 2560×1440`(2 倍清晰度)drawImage 后 `a.download = 'slide-页码-主题.png'` 点击下载并 `cb()` 接力;onerror 走 `cb(err)` 同样接力不断链;单页成功按钮变「✓ 已保存」1.5s;onerror 变「✗ 失败」
|
|
205
|
+
- **克隆只取 slide 本体**——工具栏/页码/箭头/提示在 slide 之外,天然不入图;slide 内也不得放任何操作元素
|
|
206
|
+
- **选页截图**:`btnShotMulti` 打开 `#shotMask` 面板——`openShotPanel` 按页生成清单(checkbox 默认全选 + 页码 + 首行文字预览);`spAll` 全选/清空联动、勾选变化实时更新主按钮「截图所选(N 页)」;`shotSelectedPages` 收集选中页**串行**逐张 `renderShot(idx[k], step)`(上一张 onload 后才起下一张,避免并发下载乱序与浏览器吞下载),进度文案「已保存 k/N 页…」,全部完成按钮变「✓ 已保存 N 页」1.5s 并自动关面板;面板底部 .help-note 注明浏览器首次会询问「下载多个文件」许可;与选页复制面板互斥打开;Esc/点遮罩/取消关闭
|
|
207
|
+
|
|
208
|
+
## 8. 全屏放映纯净模式(PPT 放映规范:黑底 + 幻灯充满画面)
|
|
209
|
+
|
|
210
|
+
```css
|
|
211
|
+
/* 左右箭头不常驻:鼠标在页面内时才显现,放映画面保持干净 */
|
|
212
|
+
.nav{ … opacity:0; }
|
|
213
|
+
body:hover .nav{ opacity:1; }
|
|
214
|
+
@media (hover:none){ .nav{ opacity:1; } } /* 触屏无 hover,箭头保持可见 */
|
|
215
|
+
|
|
216
|
+
/* 全屏放映模式:与 PPT 软件放映一致——黑底、幻灯按比例充满画面、比例不匹配处补黑边 */
|
|
217
|
+
:root:fullscreen{ background:#000; }
|
|
218
|
+
:root:fullscreen .bg-glow,
|
|
219
|
+
:root:fullscreen .bg-grid{ display:none !important; } /* 氛围层只在窗口浏览态,放映时退场 */
|
|
220
|
+
:root:fullscreen .toolbar,
|
|
221
|
+
:root:fullscreen .pageno,
|
|
222
|
+
:root:fullscreen .hint,
|
|
223
|
+
:root:fullscreen .nav,
|
|
224
|
+
:root:fullscreen .help-mask{ display:none !important; }
|
|
225
|
+
```
|
|
226
|
+
- **黑底规则**:全屏放映背景纯黑 `#000`,.bg-glow/.bg-grid 氛围层全屏下退场——幻灯自身 `background:var(--bg)` 保持主题配色(浅色主题=白页浮在黑底上、深色主题=深蓝页与黑底自然衔接),画面四周除比例补黑外无任何边框/光斑/网格,与 PowerPoint/Keynote/WPS 放映行为一致
|
|
227
|
+
- 全屏下热键照常(键盘监听在 document 上,按钮隐藏不影响 S/P/C/F/Esc)
|
|
228
|
+
- 说明弹层打开时进全屏也一并隐藏(!important 覆盖 .open 的 display:flex)
|
|
229
|
+
- 退出全屏自动恢复(规则随 :fullscreen 伪类失效)
|
|
230
|
+
|
|
231
|
+
## 9. 背景装饰
|
|
232
|
+
|
|
233
|
+
- `.bg-glow`:fixed 全屏,两个 radial-gradient 光斑(顶部 60%/50% + 右下 40%/35%,var(--glow))+ var(--bg) 底色
|
|
234
|
+
- `.bg-grid`:fixed 全屏 72px 网格线(var(--border) 1px 纵横双向),radial mask 由中心向四周渐隐(mask-image + -webkit-mask-image 双写)
|
|
235
|
+
|
|
236
|
+
## 10. 页数与版式建议
|
|
237
|
+
|
|
238
|
+
- 推荐结构:封面 → 目录 → 内容页×N → 结束页;单页信息密度适中(每页 ≤5 要点)
|
|
239
|
+
- 目录条目 `.toc-item` 带 `data-goto="页序号-1"`(第 3 页写 2)
|
|
240
|
+
- 数据类内容优先 .bignum 大数字卡 / .grid 栅格;流程类优先 .checklist;叙事类用 .panel 段落
|
|
241
|
+
- 结束页/封面署名用 user-config 的 SIGNATURE
|
|
242
|
+
|
|
243
|
+
## 11. 落盘与命名(生成侧规则,与 HTML 骨架无关)
|
|
244
|
+
|
|
245
|
+
- 落盘目录取 user-config 的 DIR;目录不存在则创建,已存在则复用——**不清空、不改动目录内既有文件**
|
|
246
|
+
- 文件名三级优先:①用户口头指定 → 用指定名;②未指定且 FILENAME=auto → 按本次内容主题+用途总结中文名(格式 `{主题}-{用途}`,如「智能探针系统-产品介绍」,只用中英文数字与连字符);③FILENAME 写死固定名 → 用固定名
|
|
247
|
+
- 重名一律自动加日期后缀(如 -20261109),绝不覆盖既有文件
|
|
248
|
+
- 生成后按 user-config 的 OPEN_HTML 自动打开浏览器放映
|