SuperAPI AI 工具集

hyperframes-overview-edit

办公与效率

查看项目

更新于 10-15 20:10

技能介绍

用途:这是 hyperframes-overview 的必需子模块,确保每个 overview.html 都带有文本内联编辑功能,并作为生成或修改时三处代码片段的检查清单来源,以及把补丁写回文件的解析规则来源。

使用时机:新建 overview.html 时配合上层 hyperframes-overview 插入三处片段;修改或复查旧文件时先验证功能是否缺失;用户粘贴以 # Overview edits — 开头的补丁时按 references/patch-parser.md 写回文件。

快速验证是否缺失:grep -L "class="edit-btn"" topics/*/overview.html,列出文件即缺少 Edit 功能。

应用三步:Step 1 在 .aim-toast .toast-sel { ... } 规则之后插入 references/css.html;Step 2 在 .header-right 内 <button class="aim-btn"> 之前加入 <button class="edit-btn" id="nav-edit" aria-label="text edit">Edit</button>;Step 3 在 IIFE 结尾 })() 之前插入文本编辑模块,按锚点属性选择卡新闻用 data-card(references/js-card.html),16:9 幻灯片用 data-slide(references/js-slide.html)。

两种服务模式:Live 用 serve-live.sh(bash .codex/skills/hyperframes-overview-edit/serve-live.sh topics/<主题> <端口>),点击 Done 时经 POST /save 直接把补丁写入 index.html 与 overview.html;Static 模式 serve.sh 无 POST 端点,浏览器 fetch 失败后回退为剪贴板复制,用户再把补丁粘贴回对话由 agent 应用。浏览器始终先试 live,失败再回退。

补丁格式以 # Overview edits — <topic-id> (N change(s)) 开头,按 ## Card/Slide N (类型) 分节,含 .q-text 等选择器与 OLD/NEW 内容;agent 按 patch-parser.md 同时改 index.html 与 overview.html,并回报修改数,渲染仍需用户批准。

限制:仅可编辑纯文本叶节点,含 IMG、aria-hidden 或块级子元素的元素被锁定;内联标签在 innerHTML 层做 diff 得以保留;编辑为会话内临时状态,刷新前需点 Done;Done 后需同步左侧缩略图;缩略图须与编辑区使用同一 display 模型(幻灯片 .thumb .scene{display:flex}、卡新闻 .thumb .card{display:flex});PDF/打印基于右侧 #detail-frame 原卡,通过 @media print 隐藏 .strip、.main-header 与 Aim/Edit UI。集成测试须通过六项:Edit 按钮位置、虚线轮廓、两种模式的 Toast 文案、缩略图即时同步、PDF 无左栏、回退补丁格式一致。相关技能为 hyperframes-overview、hyperframes-card-news,使用说明记录在 AGENTS.md 的 Review Workflow — Overview First, Render Second 一节。