[{"data":1,"prerenderedAt":247},["ShallowReactive",2],{"navigation_docs":3,"-guide-devtools":102,"-guide-devtools-surround":242},[4,82,87,92,97],{"title":5,"icon":6,"path":7,"stem":8,"children":9},"指南","i-lucide-list-tree","\u002Fguide","1.guide",[10,14,19,24,29,34,39,44,48,53,58,63,68,73,77],{"title":11,"path":7,"stem":12,"icon":13},"指南总览","1.guide\u002Findex","i-lucide-map",{"title":15,"path":16,"stem":17,"icon":18},"快速开始","\u002Fguide\u002Fquick-start","1.guide\u002F1.quick-start","i-lucide-rocket",{"title":20,"path":21,"stem":22,"icon":23},"键盘导航与可访问性","\u002Fguide\u002Fkeyboard","1.guide\u002F10.keyboard","i-lucide-keyboard",{"title":25,"path":26,"stem":27,"icon":28},"类型化 createTypedOkrTree","\u002Fguide\u002Ftyped","1.guide\u002F11.typed","i-lucide-type",{"title":30,"path":31,"stem":32,"icon":33},"Vue Devtools 面板","\u002Fguide\u002Fdevtools","1.guide\u002F12.devtools","i-lucide-wrench",{"title":35,"path":36,"stem":37,"icon":38},"需要注意的行为","\u002Fguide\u002Fbehavior","1.guide\u002F13.behavior","i-lucide-triangle-alert",{"title":40,"path":41,"stem":42,"icon":43},"仓库与本地开发","\u002Fguide\u002Frepo","1.guide\u002F14.repo","i-lucide-folder-git-2",{"title":45,"path":46,"stem":47},"Demo 总览（可交互）","\u002Fguide\u002Fdemos","1.guide\u002F2.demos",{"title":49,"path":50,"stem":51,"icon":52},"自定义节点内容","\u002Fguide\u002Fnode-content","1.guide\u002F3.node-content","i-lucide-layout-template",{"title":54,"path":55,"stem":56,"icon":57},"受控状态与方法","\u002Fguide\u002Fcontrolled","1.guide\u002F4.controlled","i-lucide-sliders-horizontal",{"title":59,"path":60,"stem":61,"icon":62},"复选框与拖拽","\u002Fguide\u002Finteraction","1.guide\u002F5.interaction","i-lucide-mouse-pointer-click",{"title":64,"path":65,"stem":66,"icon":67},"懒加载子节点","\u002Fguide\u002Flazy","1.guide\u002F6.lazy","i-lucide-layers",{"title":69,"path":70,"stem":71,"icon":72},"虚拟滚动 virtual","\u002Fguide\u002Fvirtual","1.guide\u002F7.virtual","i-lucide-scan",{"title":74,"path":75,"stem":76,"icon":72},"画布缩放 OkrTreeViewport","\u002Fguide\u002Fviewport","1.guide\u002F8.viewport",{"title":78,"path":79,"stem":80,"icon":81},"多树根对齐 OkrTreeGroup","\u002Fguide\u002Fgroup","1.guide\u002F9.group","i-lucide-network",{"title":83,"path":84,"stem":85,"icon":86},"主题与样式定制","\u002Ftheme","2.theme","i-lucide-palette",{"title":88,"path":89,"stem":90,"icon":91},"API","\u002Fapi","3.api","i-lucide-braces",{"title":93,"path":94,"stem":95,"icon":96},"与 vue-okr-tree 的差异（迁移说明）","\u002Fmigration","4.migration","i-lucide-arrow-right-left",{"title":98,"path":99,"stem":100,"icon":101},"更新日志","\u002Fchangelog","5.changelog","i-lucide-history",{"id":103,"title":30,"body":104,"description":235,"extension":236,"links":237,"meta":238,"navigation":239,"path":31,"seo":240,"stem":32,"__hash__":241},"docs\u002F1.guide\u002F12.devtools.md",{"type":105,"value":106,"toc":228},"minimark",[107,116,120,153,156,159,196,199,214],[108,109,110,111,115],"p",{},"开发环境下，本库会向 Vue Devtools 注册一个 ",[112,113,114],"strong",{},"OkrTree"," 面板（Tab 栏在「Components \u002F Pinia」等旁边），用于查看每棵存活树实例的内部状态，不需要任何额外安装或初始化。",[117,118,119],"h2",{"id":119},"使用方式",[121,122,123,135,147],"ol",{},[124,125,126,127,134],"li",{},"浏览器装好 ",[128,129,133],"a",{"href":130,"rel":131},"https:\u002F\u002Fdevtools.vuejs.org\u002F",[132],"nofollow","Vue Devtools 扩展","（v6 及以上）。",[124,136,137,138,142,143,146],{},"正常开发运行（",[139,140,141],"code",{},"pnpm dev"," 或你自己项目的 dev server），页面上渲染出任意 ",[139,144,145],{},"\u003CVueOkrTree>"," 即可。",[124,148,149,150,152],{},"打开 Vue Devtools，切到 ",[112,151,114],{}," 面板：左列列出当前存活的树实例（按根节点文案标识），点击右侧即可查看。",[108,154,155],{},"面板数据按需拉取——点击、展开、勾选后回到面板即见最新状态，不占用任何渲染路径。",[117,157,158],{"id":158},"能看到什么",[160,161,162,176,182],"ul",{},[124,163,164,167,168,171,172,175],{},[112,165,166],{},"树实例列表","：每棵实例一条，附注册表节点数 tag；OKR 模式（",[139,169,170],{},"only-both-tree","）额外带 ",[139,173,174],{},"OKR"," 标记，节点数显示为「右树+左树」。",[124,177,178,181],{},[112,179,180],{},"概要","：右树 \u002F 左树节点数、展开节点数、当前节点（key 与文案）、开启复选框时的勾选 \u002F 半选计数。",[124,183,184,187,188,191,192,195],{},[112,185,186],{},"节点注册表","：右树 \u002F 左树各一分节，逐节点列出文案、层级、展开、可见、勾选 \u002F 半选、子节点数——即 ",[139,189,190],{},"store.nodesMap"," 的可读视图，排查「",[139,193,194],{},"getNode"," 为什么取不到」「这个节点为什么被过滤掉了」这类问题时直接对照。",[117,197,198],{"id":198},"生产安全性",[108,200,201,202,205,206,209,210,213],{},"面板代码与开发期警告同一套门控（运行时 ",[139,203,204],{},"process.env.NODE_ENV !== 'production'","，由使用方的打包器替换）：",[112,207,208],{},"只在开发构建里生效，消费方的生产构建会把它整体消除","，与 Pinia \u002F Vue Router 内置 Devtools 集成是同一模型。npm 包产物因此增大约 1.5 kB gzip（ESM 预算内），但不会进入你的生产包；SSR 渲染与浏览器直接引 UMD（无 ",[139,211,212],{},"process","）时自动视为生产环境，不会注册。",[108,215,216,217,220,221,224,225,227],{},"实现是零依赖的：直接按 ",[139,218,219],{},"@vue\u002Fdevtools-api"," v6 的线协议与 ",[139,222,223],{},"window.__VUE_DEVTOOLS_GLOBAL_HOOK__"," 握手（事件名与排队条目形状逐字同源），没有引入 ",[139,226,219],{}," 依赖。姊妹包 react-okr-tree 无对应物——React DevTools 不提供第三方自定义面板 API。",{"title":229,"searchDepth":230,"depth":230,"links":231},"",2,[232,233,234],{"id":119,"depth":230,"text":119},{"id":158,"depth":230,"text":158},{"id":198,"depth":230,"text":198},"开发期 OkrTree 面板：树实例列表、概要统计与节点注册表的可视化调试","md",null,{},{"icon":33},{"title":30,"description":235},"HFUVAxjz6qAe5JNa9SQOosQ_c_MNFw7rdz3P8wBFiP4",[243,245],{"title":25,"path":26,"stem":27,"description":244,"icon":28,"children":-1},"createTypedOkrTree\u003CT>() 的类型覆盖位置与导出清单",{"title":35,"path":36,"stem":37,"description":246,"icon":38,"children":-1},"回写源数据、node-key 缺失、冻结 \u002F 只读数据等边界行为清单",1790437331065]