用途:面向 src/prototypes/ 下的多原型项目,把 @axhub/annotation 接入任意原型,维护目录、组件标注、组件状态三类能力;只约束技术接入方式,不决定标注文案、设计原则或页面风格。
主要能力:目录(folder 分组、route 交由宿主切换页面/状态/数据源/URL、markdown 内联文档、markdownPath 指向 docs/*.md、link 打开其他原型或外链)使用 directory.nodes;组件标注(给页面元素挂 marker 与说明)使用 data.nodes[] 加 locator;组件状态使用 data.nodes[].controls 配合 useProtoDevState。
使用方式:先定位 src/prototypes/<prototype-id>/,读取页面代码、annotation-source.json 与相邻资料,判断所需能力;用 AnnotationSourceDocument wire format 维护 annotation-source.json,页面通过 AnnotationViewer 静态导入同一份 JSON;多页面/多状态传 currentPageId 或用 getCurrentPageId;目录 route 节点只在 onDirectoryRoute 回调宿主;验证通常运行:npm run typecheck 与 node scripts/check-app-ready.mjs /prototypes/<prototype-name>。字段结构与接入示例见 references/axhub-annotation.md。
细节与限制:组件标注节点需稳定 id、locator、正文与时间字段,优先用 data-annotation-id 等稳定选择器;pageId 可省略或为字符串/数组;hasMarkdown 为 true 时用 markdownMap[node.id],否则用 annotationText 与 images;弹窗等活动层根选择器写入 presentation.layerSelectors;controls 只写可序列化字段,支持 input、inputNumber、select、segmented、switch、checkbox、slider、textarea、text、button、colorPicker,三个及以下离散选项常用 segmented;不要写公开 API 中不存在的参数,不要用不稳定 CSS 选择器作为唯一定位;Markdown 图片须随原型发布到 assets/ 并使用最终可访问 URL,不要用本地路径、/api/markdown-file 或 ../assets/...;对外提供预览须使用 ready 检查返回的完整 targetUrl。