refine presenter layout and overview

references/presenter-mode.md

@@ -93,11 +93,14 @@ window.__SPEAKER_NOTES__ = SPEAKER_NOTES;
 - 主体保持两栏：左侧预览、右侧备注；左侧当前页在上、下一页在下。
 - 当前页与下一页 iframe 始终严格保持 `16:9`。空间不足时留边并整体等比缩小，不得裁切、压扁或让页面内部文字重新排版。
 - 小屏优先缩小下一页预览，把空间留给当前页。
-- 控制顺序固定为：`首页 / 上一页 / 总览 / 下一页 / 尾页`；到尾页后“尾页”变为“重新开始”。
-- 总览卡片显示页码、标题和当前页高亮，点击缩略图直接跳页；`ESC` 切换总览。
+- 底栏分成三段：左侧是 `已进行 / 本页 / 剩余或超时` 三组时间，中间是两行控制（第一行 `首页 / 上一页 / 下一页 / 尾页`，第二行 `开始或暂停 / 重置 / 排练`），右侧只显示 `第几页 / 总页数` 和完成百分比。不要在底栏重复当前页标题。
+- `自动翻页` 放在右上角状态栏，不占用底部翻页区。
+- `宫格` 放在“当前页”标题旁。打开后直接用宫格替换当前页/下一页预览区，不要弹出突兀的全屏层；卡片显示页码、标题、章节和进度，点击页面后立即回到当前页/下一页预览。`ESC` 切换宫格。
+- 右侧卡片依次显示 `标题 / 本页目的 / 草稿（备注）`，避免把标题或页面目的混进草稿正文。
 - 演讲者可从“均衡 / 页面优先 / 备注优先”三种布局选择。
 - 备注编辑按 `data-slide-id` 存入 `localStorage`，显示保存状态；切页后备注滚动回顶部，并允许调整字号。
 - `Home` / `End`、方向键、PageUp/PageDown 与可见按钮保持一致；光标在备注编辑器中时不得触发翻页。
+- 设置面板使用可辨识的卡片层级；开关使用胶囊 switch，数值间隔使用带减号、数值和加号的 stepper，不直接暴露浏览器原生复选框或粗糙数字输入框。
 
 ## 6. 时间控制与排练
 
@@ -171,6 +174,6 @@ node <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html
 node <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html --target-minutes 30
 ```
 
-浏览器实测至少包含：进入演讲模式、弹窗允许/拦截、前后翻页、总览跳页、首页/尾页、尾页重新开始、观众窗口关闭后的状态变化、重新打开后恢复同步、备注保存、计时、排练记录、自动翻页暂停/恢复、激光笔、圈选、清除、黑屏、白屏、冻结与演前检查。
+浏览器实测至少包含：进入演讲模式、弹窗允许/拦截、前后翻页、内嵌宫格替换预览与选页返回、首页/尾页、尾页重新开始、观众窗口关闭后的状态变化、重新打开后恢复同步、备注保存、计时、排练记录、自动翻页暂停/恢复、激光笔、圈选、清除、黑屏、白屏、冻结、设置面板与演前检查。
 
 至少在一组常用尺寸和一组小屏尺寸下检查：当前页/下一页上下排列，两个 iframe 宽高比均为 `16:9`，且没有超出各自容器。