Components

TreeView 树形视图

面向云资源拓扑、文件树及细粒度权限的多层级树控件，支持异步懒加载、多选、图标插槽、拖拽重排与清晰的选中高亮提示。

资源拓扑与选中高亮

使用 highlight-variant 配置选中的视觉高亮风格（subtle / solid / bar），配合状态徽标提供即时反馈。

高亮风格:

hk-prod-01 (集群)
- Pods
- 持久卷 (PVC)
sg-edge-02 (边缘节点)

当前选中：prod-cluster；展开节点：prod-cluster

<TreeView
  v-model="selectedResource"
  v-model:expanded="expandedResources"
  highlight-variant="subtle"
  :nodes="asyncNodes"
  :load-children="fetchChildren"
>
  <template #icon="{ node }">
    <ServerIcon v-if="node.id.includes('cluster')" />
  </template>
</TreeView>

多选模式 (Multiple)

开启 multiple 支持复选节点集合，通过 v-model:selected-ids 受控管理已选节点集合。

工作负载
- API 网关服务
- 统一鉴权中心
- 支付网关核心
- 消息投递中心

已选节点数：2gateway, auth

<TreeView
  v-model:selected-ids="selectedPods"
  multiple
  highlight-variant="subtle"
  :nodes="nodes"
/>

拖拽排序与重排 (Draggable)

开启 draggable 允许在树内移动节点层级或顺序；触发 @drop 事件返回拖拽源、目标与插入位置。

部署步骤
- 1. 代码规约检查
- 2. 镜像构建与缓存
- 3. 金丝雀灰度发布
- 4. 存活探针健康校验

<TreeView
  :nodes="nodes"
  draggable
  @drop="handleDrop"
/>

权限级联复选

checkable 模式适用于细粒度访问策略分配，勾选状态自动向后代节点级联。

<TreeView
  v-model:checked-ids="grants"
  :nodes="permissions"
  checkable
  :default-expanded-ids="['project', 'production']"
/>

API 参考

属性	类型	默认值	说明
`nodes`	`TreeNode[]`	`—`	树节点列表，支持 id、label、children、disabled、isLeaf、icon。
`v-model`	`string`	`—`	单选模式下当前选中节点的 id。
`multiple`	`boolean`	`false`	是否启用多选模式。
`v-model:selected-ids`	`string[]`	`[]`	多选模式下受控的已选节点 ID 列表。
`v-model:expanded`	`string[]`	`—`	受控的展开节点 ID 列表（同时兼容 v-model:expanded-ids）。
`default-expanded-ids`	`string[]`	`[]`	非受控模式下的默认展开集合。
`highlight-variant`	`'subtle' \| 'solid' \| 'bar'`	`'subtle'`	选中的高亮样式变体：subtle 为柔和浅底色与边框环、solid 为强对比主题填充、bar 为左侧重点竖条与弱底色。
`load-children`	`(node: TreeNode) => Promise<TreeNode[] \| void>`	`—`	异步拉取子节点的方法。设置 isLeaf: false 时展开会触发 loading 动效并调用该回调。
`draggable`	`boolean`	`false`	启用 HTML5 拖拽重排与层级调整。
`checkable / v-model:checked-ids`	`boolean / string[]`	`false / []`	启用复选框并受控绑定勾选项。
`cascade`	`boolean`	`true`	勾选父节点时是否自动级联子节点。
`#icon / #label`	`slot`	`—`	自定义节点前缀图标与文本标签的插槽，接收 { node, expanded, selected }。
`drop`	`event (TreeDropEvent)`	`—`	拖拽落点事件，包含 draggedNode、targetNode 与 position (before \| inside \| after)。