[{"data":1,"prerenderedAt":318},["ShallowReactive",2],{"navigation_docs":3,"-guide-group":102,"-guide-group-surround":313},[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":78,"body":104,"description":306,"extension":307,"links":308,"meta":309,"navigation":310,"path":79,"seo":311,"stem":80,"__hash__":312},"docs\u002F1.guide\u002F9.group.md",{"type":105,"value":106,"toc":302},"minimark",[107,124,173,221,227,231,250,264,268,292,298],[108,109,110,114,115,119,120,123],"p",{},[111,112,113],"code",{},"align-root"," 让每棵树的根节点在",[116,117,118],"strong",{},"自身容器内","居中。多棵 OKR 树并排对比、而容器宽度装不下最深的一侧时，各树\"各自居中\"的坐标就不一致——这正是原版需要\"结合业务层手动测量 DOM\"的场景。",[111,121,122],{},"\u003COkrTreeGroup>"," 把它收进组件：",[125,126,132],"pre",{"className":127,"code":128,"filename":129,"language":130,"meta":131,"style":131},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cokr-tree-group>\n  \u003Cvue-okr-tree :data=\"a\" :left-data=\"leftA\" only-both-tree direction=\"horizontal\" node-key=\"id\" \u002F>\n  \u003Cvue-okr-tree :data=\"b\" :left-data=\"leftB\" only-both-tree direction=\"horizontal\" node-key=\"id\" \u002F>\n\u003C\u002Fokr-tree-group>\n","App.vue","vue","",[111,133,134,150,157,163],{"__ignoreMap":131},[135,136,139,143,147],"span",{"class":137,"line":138},"line",1,[135,140,142],{"class":141},"sMK4o","\u003C",[135,144,146],{"class":145},"swJcz","okr-tree-group",[135,148,149],{"class":141},">\n",[135,151,153],{"class":137,"line":152},2,[135,154,156],{"class":155},"sTEyZ","  \u003Cvue-okr-tree :data=\"a\" :left-data=\"leftA\" only-both-tree direction=\"horizontal\" node-key=\"id\" \u002F>\n",[135,158,160],{"class":137,"line":159},3,[135,161,162],{"class":155},"  \u003Cvue-okr-tree :data=\"b\" :left-data=\"leftB\" only-both-tree direction=\"horizontal\" node-key=\"id\" \u002F>\n",[135,164,166,169,171],{"class":137,"line":165},4,[135,167,168],{"class":141},"\u003C\u002F",[135,170,146],{"class":145},[135,172,149],{"class":141},[174,175,176,189],"table",{},[177,178,179],"thead",{},[180,181,182,186],"tr",{},[183,184,185],"th",{},"名称",[183,187,188],{},"说明",[190,191,192,211],"tbody",{},[180,193,194,200],{},[195,196,197],"td",{},[111,198,199],{},"align",[195,201,202,203,206,207,210],{},"prop，boolean，默认 ",[111,204,205],{},"true","；",[111,208,209],{},"false"," 时各树独立排布",[180,212,213,218],{},[195,214,215],{},[111,216,217],{},"refresh()",[195,219,220],{},"方法，手动重新测量（字体加载完成、外部样式变化等特殊场景）",[108,222,223,224,226],{},"成员树需开启 ",[111,225,113],{},"（默认已开）。",[228,229,230],"h2",{"id":230},"测量机制",[108,232,233,234,237,238,241,242,245,246,249],{},"组读取每个成员",[116,235,236],{},"左子树容器的自然宽度","取最大值，统一写回容器上的 ",[111,239,240],{},"--okr-group-left-width","，于是各树根节点落在同一条竖线上。测量期间组根带 ",[111,243,244],{},"is-measuring","、完成后带 ",[111,247,248],{},"is-measured","（可用于自己加过渡样式）。",[108,251,252,253,256,257,260,261,263],{},"自动重测的触发点：成员挂载 \u002F 更新、",[111,254,255],{},"ResizeObserver"," 观察到的组内尺寸变化、以及 ",[111,258,259],{},"document.fonts.ready","（字体落地后文字宽度会变）。所以 ",[111,262,217],{}," 只在极少数外部样式绕过这些信号时才需要手动调——比如异步注入的样式表改了节点内边距。",[228,265,267],{"id":266},"与画布ssr-的组合","与画布、SSR 的组合",[269,270,271,282],"ul",{},[272,273,274,275,281],"li",{},"可以放进 ",[276,277,278],"a",{"href":75},[111,279,280],{},"\u003COkrTreeViewport>"," 内一起用；缩放平移不影响对齐结果（测量读的是布局宽度，不含 transform）。",[272,283,284,285,288,289,291],{},"SSR 下服务端渲染的是",[116,286,287],{},"未测量","状态（没有 ",[111,290,240],{},"），首屏各树按自身容器居中，挂载后测量完成才对齐。这是浏览器 API 依赖，不是缺陷；若首屏对齐对你是硬需求，把整组包在客户端组件里或预留等宽容器。",[293,294,295],"docs-demo",{},[296,297],"demo-group",{},[299,300,301],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":131,"searchDepth":152,"depth":152,"links":303},[304,305],{"id":230,"depth":152,"text":230},{"id":266,"depth":152,"text":267},"OkrTreeGroup 多树根对齐的测量机制与自动重测触发点","md",null,{},{"icon":81},{"title":78,"description":306},"kgAJbQKU-WaVYJWO7-RalHoUMeaNfUNF_YNYbVER-Ck",[314,316],{"title":74,"path":75,"stem":76,"description":315,"icon":72,"children":-1},"OkrTreeViewport 的 props、ref 方法、滚轮\u002F拖拽\u002F触控交互契约与 PNG \u002F SVG 导出",{"title":83,"path":84,"stem":85,"description":317,"icon":86,"children":-1},"CSS 变量主题化、六套内置主题、SVG 连接线与无样式模式",1793606852962]