示例总览

文档站内置一组可以实际运行的 Vue 3 示例，覆盖基础布局、数据加载、节点交互和高级配置。说明文档与宽屏运行页使用同一套 VitePress 服务。

运行示例应用

pnpm install
pnpm dev:docs

默认访问地址是 http://localhost:3001。从本页进入在线演示，或直接访问 /demos/<示例名称>。

按场景选择

场景	文档示例	Demo 路由
全量组织数据	静态数据	运行
接口按需加载	异步懒加载	运行
业务卡片与点击	自定义节点	运行
内容决定卡片尺寸	高级布局：动态尺寸	运行
调整层级间距	高级布局：间距	运行
自定义接口字段	高级布局：字段映射	运行
子节点排序	高级布局：排序	运行
同级节点分层	高级布局：权重	运行
节点高亮	交互与状态	运行
搜索并定位	交互与状态	运行
大数据布局	—	运行

示例的共同结构

所有 Vue 示例遵循同一条数据流：

创建 OrgTreeCore
      ↓
调用 loadData()
      ↓
OrgTreeProvider 注入 SDK
      ↓
OrgTree 订阅布局与状态
      ↓
scoped slot 渲染业务卡片

建议先复制最接近业务的数据模式，再逐步加入动态尺寸、自定义字段和状态交互。一次启用过多配置会增加排查布局问题的成本。

阅读源码

示例源码位于：

apps/docs/src/demos/
├─ StaticDataDemo.vue
├─ AsyncLoadDemo.vue
├─ DynamicSizeDemo.vue
├─ NodeStatusDemo.vue
├─ NodeSearchDemo.vue
├─ NodeClickDemo.vue
├─ TransformChildrenDemo.vue
├─ CustomFieldMapDemo.vue
└─ WeightLayerDemo.vue

对应的测试数据和 API 模拟位于 apps/docs/src/mock/。