<template>
  <div class="block">
    <h1>概述</h1>
    <p>任务成果的树状列表，按不同类型分组，不同分组的成果图层拥有不同的操作菜单和交互方式</p>
  </div>
  
  <div class="block">
    <h1>代码示例</h1>
    <RunCase label="基本用法" file="./task-tree/Basic.vue">
      <template #component>
        <Basic />
      </template>
      <template #description>
        <p>设置<code>treeList</code>属性来显示树状列表</p>
      </template>
    </RunCase>

    <RunCase label="点击选中" file="./task-tree/Select.vue">
      <template #component>
        <Select />
      </template>
      <template #description>
        <p>点击子节点可以选中当前图层</p>
      </template>
    </RunCase>
  </div>

  <div class="block">
    <h1>API</h1>
    <h2>props</h2>
    <PropsTable type="task-tree"/>
    <h2>events</h2>
    <EventsTable type="task-tree"/>
  </div>
  
</template>

<script setup>
import Basic from '../components/task-tree/Basic.vue'
import Select from '../components/task-tree/Select.vue'

</script>