aurora-admin/site/examples/tree.json

{
 "slug": "tree",
 "curated": true,
 "mode": "single",
 "examples": [
  {
   "id": "tree-ex-1",
   "title": "基础用法",
   "titleSrc": "",
   "desc": "",
   "html": "<div class=\"demo\">\n  <h1>Kole UI · Tree 组件（纯 H5）</h1>\n  <p class=\"sub\">对齐 Tree 规范：节点高32px、缩进16px/级、箭头12px、选中态 #F0F5FF + 品牌色、支持复选框级联</p>\n  <label style=\"font-size:13px;color:var(--color-text-secondary);margin-right:16px;\">\n    <input id=\"chkToggle\" type=\"checkbox\" checked onchange=\"checkable=this.checked; render();\" />\n    启用复选框\n  </label>\n  <div class=\"kole-tree\" id=\"tree\" role=\"tree\" style=\"margin-top:12px\"></div>\n</div>",
   "preview": {
    "show": [
     [
      0
     ]
    ],
    "hide": [],
    "mode": "single"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<h1>Kole UI · Tree 组件（纯 H5）</h1>\n<p>对齐 Tree 规范：节点高32px、缩进16px/级、箭头12px、选中态 #F0F5FF + 品牌色、支持复选框级联</p>\n<label style=\"font-size:13px;color:var(--color-text-secondary);margin-right:16px;\">\n  <input id=\"chkToggle\" type=\"checkbox\" checked onchange=\"checkable=this.checked; render();\" />\n  启用复选框\n</label>\n<div class=\"kole-tree\" role=\"tree\" style=\"margin-top:12px\"></div>",
    "jsx": "import { useState } from 'react';\nimport { KoleTree } from 'kole-ui/react';\n\nconst TREE_DATA = [\n  { key: 'org', title: '某某科技', children: [\n    { key: 'tech', title: '技术中心', children: [\n      { key: 'fe', title: '前端组' },\n      { key: 'be', title: '后端组' }\n    ] },\n    { key: 'product', title: '产品中心', children: [\n      { key: 'pm', title: '产品组' },\n      { key: 'ux', title: '设计组' }\n    ] }\n  ] }\n];\n\nfunction OrgTree() {\n  const [selectedKeys, setSelectedKeys] = useState(['fe']);\n  const [checkedKeys, setCheckedKeys] = useState(['tech']);\n  const handleSelect = (key) => setSelectedKeys([key]);\n  return (\n    <KoleTree\n      data={TREE_DATA}\n      checkable\n      defaultExpandedKeys={['org']}\n      selectedKeys={selectedKeys}\n      checkedKeys={checkedKeys}\n      onSelect={handleSelect}\n      onCheck={setCheckedKeys}\n    />\n  );\n}",
    "vue3": "<template>\n  <KoleTree\n    :data=\"TREE_DATA\"\n    checkable\n    :default-expanded-keys=\"['org']\"\n    v-model:selected-keys=\"selectedKeys\"\n    v-model:checked-keys=\"checkedKeys\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleTree } from 'kole-ui/vue3';\n\nconst selectedKeys = ref(['fe']);\nconst checkedKeys = ref(['tech']);\nconst TREE_DATA = [\n  { key: 'org', title: '某某科技', children: [\n    { key: 'tech', title: '技术中心', children: [\n      { key: 'fe', title: '前端组' },\n      { key: 'be', title: '后端组' }\n    ] },\n    { key: 'product', title: '产品中心', children: [\n      { key: 'pm', title: '产品组' },\n      { key: 'ux', title: '设计组' }\n    ] }\n  ] }\n];\n</script>",
    "vue2": "<template>\n  <KoleTree\n    :data=\"TREE_DATA\"\n    checkable\n    :default-expanded-keys=\"['org']\"\n    :selected-keys=\"selectedKeys\"\n    :checked-keys=\"checkedKeys\"\n    @select=\"selectedKeys = [$event]\"\n    @check=\"checkedKeys = $event\"\n  />\n</template>\n\n<script>\nimport { KoleTree } from 'kole-ui/vue2';\nexport default {\n  components: { KoleTree },\n  data() {\n    return {\n      selectedKeys: ['fe'],\n      checkedKeys: ['tech'],\n      TREE_DATA: [\n        { key: 'org', title: '某某科技', children: [\n          { key: 'tech', title: '技术中心', children: [\n            { key: 'fe', title: '前端组' },\n            { key: 'be', title: '后端组' }\n          ] },\n          { key: 'product', title: '产品中心', children: [\n            { key: 'pm', title: '产品组' },\n            { key: 'ux', title: '设计组' }\n          ] }\n        ] }\n      ]\n    };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleTree } from 'kole-ui/react';\n\nconst TREE_DATA = [\n  { key: 'org', title: '某某科技', children: [\n    { key: 'tech', title: '技术中心', children: [\n      { key: 'fe', title: '前端组' },\n      { key: 'be', title: '后端组' }\n    ] },\n    { key: 'product', title: '产品中心', children: [\n      { key: 'pm', title: '产品组' },\n      { key: 'ux', title: '设计组' }\n    ] }\n  ] }\n];\n\nfunction OrgTree(): JSX.Element {\n  const [selectedKeys, setSelectedKeys] = useState(['fe']);\n  const [checkedKeys, setCheckedKeys] = useState(['tech']);\n  const handleSelect = (key) => setSelectedKeys([key]);\n  return (\n    <KoleTree\n      data={TREE_DATA}\n      checkable\n      defaultExpandedKeys={['org']}\n      selectedKeys={selectedKeys}\n      checkedKeys={checkedKeys}\n      onSelect={handleSelect}\n      onCheck={setCheckedKeys}\n    />\n  );\n}\n\nexport default OrgTree;",
    "vue3ts": "<template>\n\n  <KoleTree\n    :data=\"TREE_DATA\"\n    checkable\n    :default-expanded-keys=\"['org']\"\n    v-model:selected-keys=\"selectedKeys\"\n    v-model:checked-keys=\"checkedKeys\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleTree } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('基础用法');\nconst selectedKeys = ref(['fe']);\nconst checkedKeys = ref(['tech']);\nconst TREE_DATA = [\n  { key: 'org', title: '某某科技', children: [\n    { key: 'tech', title: '技术中心', children: [\n      { key: 'fe', title: '前端组' },\n      { key: 'be', title: '后端组' }\n    ] },\n    { key: 'product', title: '产品中心', children: [\n      { key: 'pm', title: '产品组' },\n      { key: 'ux', title: '设计组' }\n    ] }\n  ] }\n];\n</script>",
    "vue2ts": "<template>\n\n  <KoleTree\n    :data=\"TREE_DATA\"\n    checkable\n    :default-expanded-keys=\"['org']\"\n    :selected-keys=\"selectedKeys\"\n    :checked-keys=\"checkedKeys\"\n    @select=\"selectedKeys = [$event]\"\n    @check=\"checkedKeys = $event\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleTree } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleTree },\n  data(): Record<string, unknown> {\n    return {\n      selectedKeys: ['fe'],\n      checkedKeys: ['tech'],\n      TREE_DATA: [\n        { key: 'org', title: '某某科技', children: [\n          { key: 'tech', title: '技术中心', children: [\n            { key: 'fe', title: '前端组' },\n            { key: 'be', title: '后端组' }\n          ] },\n          { key: 'product', title: '产品中心', children: [\n            { key: 'pm', title: '产品组' },\n            { key: 'ux', title: '设计组' }\n          ] }\n        ] }\n      ]\n    };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Tree.html 第 43-54 行的 treeData（org → 技术中心/产品中心 → 前端组/后端组/产品组/设计组）与第 57-59 行的初始状态 expanded=[\"org\"]、selected=[\"fe\"]、checked=[\"tech\"]，以及第 37 行默认勾选的「启用复选框」。",
    "prop 名 data / checkable / defaultExpandedKeys / selectedKeys / checkedKeys 逐项见 frameworks/Tree.jsx 第 27-35 行参数表与 frameworks/Tree.vue3.vue 第 33-40 行 defineProps；级联勾选由组件内部完成。"
   ]
  }
 ]
}