[{"data":1,"prerenderedAt":265},["ShallowReactive",2],{"navigation_docs":3,"-guide-virtual":102,"-guide-virtual-surround":260},[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":69,"body":104,"description":253,"extension":254,"links":255,"meta":256,"navigation":257,"path":70,"seo":258,"stem":71,"__hash__":259},"docs\u002F1.guide\u002F7.virtual.md",{"type":105,"value":106,"toc":247},"minimark",[107,116,122,126,233,237],[108,109,110,111,115],"p",{},"数据量大时（如单节点几千直属子节点的平铺组织架构），开启 ",[112,113,114],"code",{},"virtual"," 后，同层可见兄弟数达阈值（50）的行只渲染视口内的窗口，DOM 数量与滚动流畅度不再随总数增长。",[117,118,119],"docs-demo",{},[120,121],"demo-virtual",{},[123,124,125],"h2",{"id":125},"行为约定",[127,128,129,153,159,188,194,204,221,227],"ul",{},[130,131,132,136,137,140,141,144,145,148,149,152],"li",{},[133,134,135],"strong",{},"窗口化口径","：按「未被 filter 隐藏的可见兄弟」窗口化；aria（",[112,138,139],{},"aria-setsize"," \u002F ",[112,142,143],{},"aria-posinset","）、",[112,146,147],{},"show-node-num"," 计数、",[112,150,151],{},"getVisibleNodes()"," 等全部按全量可见列表输出，窗口化不影响语义。",[130,154,155,158],{},[133,156,157],{},"几何等价","：未渲染兄弟的位置由等尺寸占位块顶住，行总宽、每个渲染节点的坐标与连接线走向和全量渲染逐像素一致；占位块自带连线段续接横线，行首 \u002F 行末的边界帽（去线与圆角）语义由占位块自然继承，无需特殊处理。",[130,160,161,164,165,168,169,172,173,176,177,180,181,184,185,187],{},[133,162,163],{},"尺寸要求","：要求数字型 ",[112,166,167],{},"label-width","（占位块尺寸来自宽度模型：叶 \u002F 折叠 = ",[112,170,171],{},"label-width + 2×sibling 间距","，展开 = ",[112,174,175],{},"max(label-width, Σ 子盒宽) + 2×sibling 间距","，与 float 布局的 shrink-wrap 结果一致）；horizontal 布局还要求 ",[112,178,179],{},"label-height","。",[112,182,183],{},"auto"," 尺寸下模型不可知，达标行退回全量渲染并输出开发期警告。卡片宽度若被 CSS 覆盖（非 ",[112,186,167],{}," 途径），模型不再成立。",[130,189,190,193],{},[133,191,192],{},"窄容器行为","：全量渲染在窄容器里 float 会折行；virtual 行保持单行横向滚动（占位块把最小内容宽度顶到全行宽）——这是期望的虚拟滚动行为，与全量渲染的差异仅出现在「本会折行」的窄容器场景。",[130,195,196,199,200,203],{},[133,197,198],{},"定位与漫游","：",[112,201,202],{},"scrollToNode"," 与键盘漫游（方向键 \u002F Home \u002F End）遇到窗口外目标时先揭示（强制渲染其邻近区间）再定位，逐条推进不跳焦。",[130,205,206,209,210,140,213,216,217,220],{},[133,207,208],{},"创建期生效","：与 ",[112,211,212],{},"node-key",[112,214,215],{},"direction"," 同属创建期快照，运行时变更输出警告，需换 ",[112,218,219],{},":key"," 重建实例。",[130,222,223,226],{},[133,224,225],{},"深层小行不受益","：窗口化只优化「同层大量兄弟」；每层只有几个节点的深树（如 1000 层 × 每层 10 个）不达阈值，全部渲染。",[130,228,229,232],{},[133,230,231],{},"已知边界","：万级数据的首帧成本主要在 store 构建（1 万节点约 3s，与 virtual 无关、全量渲染同样存在）；virtual 消除的是 DOM 数量与滚动 \u002F 展开时的渲染卡顿。",[123,234,236],{"id":235},"与-okrtreeviewport-的关系","与 OkrTreeViewport 的关系",[108,238,239,240,243,244,246],{},"两者互补：",[112,241,242],{},"OkrTreeViewport"," 负责缩放与平移，",[112,245,114],{}," 负责窗口化渲染，可同时开启——画布平移 \u002F 缩放会触发窗口重算。",{"title":248,"searchDepth":249,"depth":249,"links":250},"",2,[251,252],{"id":125,"depth":249,"text":125},{"id":235,"depth":249,"text":236},"virtual 虚拟滚动的行为约定：窗口化口径、几何等价、尺寸要求与定位漫游","md",null,{},{"icon":72},{"title":69,"description":253},"r6qGG3Y90KplIDc4LV-23mAoRIlLDuUZG65YTVuSjaw",[261,263],{"title":64,"path":65,"stem":66,"description":262,"icon":67,"children":-1},"lazy + load 懒加载的行为约定：isLeaf 叶子标记、失败重试与加载中状态",{"title":74,"path":75,"stem":76,"description":264,"icon":72,"children":-1},"OkrTreeViewport 的 props、ref 方法、滚轮\u002F拖拽\u002F触控交互契约与 PNG \u002F SVG 导出",1790437331869]