docs(tree-menu): [tree-menu] Optimize TreeMenu component documentation and demos (#905)

examples/sites/demos/pc/app/tree-menu/accordion-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-tree-menu :data="treeData" accordion></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
@@ -32,10 +32,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',

examples/sites/demos/pc/app/tree-menu/accordion.vue

@@ -2,7 +2,7 @@
   <tiny-tree-menu :data="treeData" accordion></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/tree-menu/basic-usage-composition-api.vue

@@ -2,6 +2,6 @@
   <tiny-tree-menu></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 </script>

examples/sites/demos/pc/app/tree-menu/basic-usage.vue

@@ -2,15 +2,12 @@
   <tiny-tree-menu></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {
   components: {
     TinyTreeMenu: TreeMenu
-  },
-  data() {
-    return {}
   }
 }
 </script>

examples/sites/demos/pc/app/tree-menu/check-strictly.spec.ts

@@ -1,24 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('父子级不相关联', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#check-strictly')
-
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
-  const checkedClass = /is-checked/
-
-  // 父节点勾选不会改变子节点
-  await treeMenu.getByRole('treeitem', { name: '指南' }).locator('svg').first().click()
-  await expect(treeMenu.getByRole('treeitem', { name: '引入组件' }).locator('svg').first()).not.toHaveClass(
-    checkedClass
-  )
-  await expect(page.getByRole('treeitem', { name: '构建部署' }).first().locator('span').nth(1)).not.toHaveClass(
-    checkedClass
-  )
-
-  // 子节点勾选不改变父节点
-  await page.getByRole('treeitem', { name: '引入组件' }).first().click()
-  await page.getByRole('treeitem', { name: '按需引入' }).locator('span').nth(2).click()
-  await page.getByRole('treeitem', { name: '完整引入' }).locator('span').nth(2).click()
-  await expect(page.getByRole('treeitem', { name: '引入组件' }).locator('span').nth(1)).not.toHaveClass(checkedClass)
-})

examples/sites/demos/pc/app/tree-menu/current-node-composition-api.vue

@@ -1,30 +1,24 @@
 <template>
-  <div class="node-key">
-    <tiny-row :flex="true">
-      <tiny-col :span="6">
-        <tiny-button @click="setCurrentKey" title="设置当前选中的节点的 key">设置当前选中的节点的 key</tiny-button>
-      </tiny-col>
-      <tiny-col :span="6">
-        <tiny-button @click="setCurrentNode" title="设置当前选中的节点">设置当前选中的节点</tiny-button>
-      </tiny-col>
-    </tiny-row>
+  <div>
+    <p>场景1：通过 setCurrentKey(key:string|number) 设置当前节点</p>
+    <tiny-button @click="setCurrentKey" title="点击设置当前节点">setCurrentKey</tiny-button>
+    <p>场景2：通过 setCurrentNode(node:ITreeNode) 设置当前节点</p>
+    <tiny-button @click="setCurrentNode" title="点击设置当前节点">setCurrentNode</tiny-button>
+    <p>场景3：通过 getCurrentKey() 获取当前节点的 key 为：{{ currentKey }}</p>
+    <tiny-button @click="getCurrentKey" title="点击获取当前节点的 key">getCurrentKey</tiny-button>
+    <p>场景4：通过 getCurrentNode() 获取当前节点的数据为：{{ currentNode }}</p>
+    <tiny-button @click="getCurrentNode" title="点击获取当前节点数据">getCurrentNode</tiny-button>
 
-    <tiny-row :flex="true">
-      <tiny-col :span="6">
-        <tiny-button @click="getCurrentKey" title="获取当前被选中节点的 key">获取当前被选中节点的 key</tiny-button>
-        {{ currentKey }}
-      </tiny-col>
-      <tiny-col :span="6">
-        <tiny-button @click="getCurrentNode" title="获取当前选中的节点">获得当前选中的节点</tiny-button
-        >{{ currentNode }}
-      </tiny-col>
-    </tiny-row>
-
-    <tiny-tree-menu ref="treeMenu" :data="treeData" :default-expanded-keys="expandedKeys" node-key="id"></tiny-tree-menu>
+    <tiny-tree-menu
+      ref="treeMenu"
+      node-key="id"
+      :data="treeData"
+      :default-expanded-keys="expandedKeys"
+    ></tiny-tree-menu>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, reactive } from 'vue'
 import { TreeMenu as TinyTreeMenu, Button as TinyButton, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
 
@@ -55,10 +49,6 @@ const treeData = reactive([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -159,11 +149,12 @@ const getCurrentNode = () => {
 }
 </script>
 
-<style scoped>
-.node-key .tiny-row {
-  margin-bottom: 10px;
+<style lang="less" scoped>
+.tiny-button {
+  margin: 0 10px 10px 0;
 }
-.node-key .tiny-button {
-  max-width: 300px;
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>

examples/sites/demos/pc/app/tree-menu/current-node.vue

@@ -1,30 +1,24 @@
 <template>
-  <div class="node-key">
-    <tiny-row :flex="true">
-      <tiny-col :span="6">
-        <tiny-button @click="setCurrentKey" title="设置当前选中的节点的 key">设置当前选中的节点的 key</tiny-button>
-      </tiny-col>
-      <tiny-col :span="6">
-        <tiny-button @click="setCurrentNode" title="设置当前选中的节点">设置当前选中的节点</tiny-button>
-      </tiny-col>
-    </tiny-row>
+  <div>
+    <p>场景1：通过 setCurrentKey(key:string|number) 设置当前节点</p>
+    <tiny-button @click="setCurrentKey" title="点击设置当前节点">setCurrentKey</tiny-button>
+    <p>场景2：通过 setCurrentNode(node:ITreeNode) 设置当前节点</p>
+    <tiny-button @click="setCurrentNode" title="点击设置当前节点">setCurrentNode</tiny-button>
+    <p>场景3：通过 getCurrentKey() 获取当前节点的 key 为：{{ currentKey }}</p>
+    <tiny-button @click="getCurrentKey" title="点击获取当前节点的 key">getCurrentKey</tiny-button>
+    <p>场景4：通过 getCurrentNode() 获取当前节点的数据为：{{ currentNode }}</p>
+    <tiny-button @click="getCurrentNode" title="点击获取当前节点数据">getCurrentNode</tiny-button>
 
-    <tiny-row :flex="true">
-      <tiny-col :span="6">
-        <tiny-button @click="getCurrentKey" title="获取当前被选中节点的 key">获取当前被选中节点的 key</tiny-button>
-        <span id="current-node-key"> {{ currentKey }}</span>
-      </tiny-col>
-      <tiny-col :span="6">
-        <tiny-button @click="getCurrentNode" title="获取当前选中的节点">获取当前选中的节点</tiny-button>
-        <span id="current-node"> {{ currentNode }}</span>
-      </tiny-col>
-    </tiny-row>
-
-    <tiny-tree-menu ref="treeMenu" :data="treeData" :default-expanded-keys="expandedKeys"  node-key="id"></tiny-tree-menu>
+    <tiny-tree-menu
+      ref="treeMenu"
+      node-key="id"
+      :data="treeData"
+      :default-expanded-keys="expandedKeys"
+    ></tiny-tree-menu>
   </div>
 </template>
 
-<script lang="ts">
+<script>
 import { TreeMenu, Button, Row, Col } from '@opentiny/vue'
 
 export default {
@@ -62,10 +56,6 @@ export default {
           id: 300,
           label: '组件',
           children: [
-            {
-              id: 300,
-              label: '组件'
-            },
             {
               id: 301,
               label: '表单组件',
@@ -170,11 +160,12 @@ export default {
 }
 </script>
 
-<style scoped>
-.node-key .tiny-row {
-  margin-bottom: 10px;
+<style lang="less" scoped>
+.tiny-button {
+  margin: 0 10px 10px 0;
 }
-.node-key .tiny-button {
-  max-width: 300px;
+p {
+  font-size: 14px;
+  line-height: 1.5;
 }
 </style>

examples/sites/demos/pc/app/tree-menu/custom-icon-composition-api.vue

@@ -0,0 +1,11 @@
+<template>
+  <tiny-tree-menu :search-icon="tinyIconCalendar" :prefix-icon="tinyIconDoubleRight"></tiny-tree-menu>
+</template>
+
+<script setup>
+import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { iconCalendar, iconDoubleRight } from '@opentiny/vue-icon'
+
+const tinyIconCalendar = iconCalendar()
+const tinyIconDoubleRight = iconDoubleRight()
+</script>

examples/sites/demos/pc/app/tree-menu/custom-icon.vue

@@ -0,0 +1,20 @@
+<template>
+  <tiny-tree-menu :search-icon="tinyIconCalendar" :prefix-icon="tinyIconDoubleRight"></tiny-tree-menu>
+</template>
+
+<script>
+import { TreeMenu } from '@opentiny/vue'
+import { iconCalendar, iconDoubleRight } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTreeMenu: TreeMenu
+  },
+  data() {
+    return {
+      tinyIconCalendar: iconCalendar(),
+      tinyIconDoubleRight: iconDoubleRight()
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/tree-menu/data-resource-composition-api.vue

@@ -1,8 +1,13 @@
 <template>
-  <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+  <div>
+    <p>场景1：静态数据</p>
+    <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <p>场景2：服务端数据</p>
+    <tiny-tree-menu :get-menu-data-sync="getMenuDataSync"></tiny-tree-menu>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
@@ -32,10 +37,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -112,4 +113,15 @@ const treeData = ref([
     label: '更新日志'
   }
 ])
+
+const getMenuDataSync = () => {
+  return treeData.value
+}
 </script>
+
+<style lang="less" scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/data-resource.spec.ts

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('绑定数据源', async ({ page }) => {
+test('静态数据', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#data-resource')
+  await page.goto('http://localhost:7130/pc/tree-menu/data-resource')
 
   await page.getByTitle('指南', { exact: true }).click()
   await expect(page.getByTitle('后端适配器')).toBeVisible()
@@ -18,3 +18,18 @@ test('绑定数据源', async ({ page }) => {
   await page.locator('#preview').getByPlaceholder('请输入内容进行筛选').locator('input').clear()
   await expect(page.getByTitle('指南', { exact: true })).toBeVisible()
 })
+
+test('服务端数据', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/get-menu-data-sync')
+
+  await page.getByTitle('指南', { exact: true }).click()
+  await expect(page.getByTitle('引入组件')).toBeVisible()
+  await expect(page.getByRole('treeitem', { name: '按需引入' })).not.toBeVisible()
+  await page.getByTitle('引入组件').click()
+  await expect(page.getByRole('treeitem', { name: '按需引入' }).first()).toBeVisible()
+  await page.getByTitle('指南', { exact: true }).click()
+  await expect(page.getByTitle('按需引入')).not.toBeVisible()
+  await expect(page.getByTitle('组件', { exact: true })).toBeVisible()
+  await expect(page.getByTitle('规范')).toBeVisible()
+})

examples/sites/demos/pc/app/tree-menu/data-resource.vue

@@ -1,8 +1,13 @@
 <template>
-  <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+  <div>
+    <p>场景1：静态数据</p>
+    <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <p>场景2：服务端数据</p>
+    <tiny-tree-menu :get-menu-data-sync="getMenuDataSync"></tiny-tree-menu>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {
@@ -118,6 +123,18 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    getMenuDataSync() {
+      return this.treeData
+    }
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/default-expand-all-composition-api.vue

@@ -2,13 +2,13 @@
   <tiny-tree-menu
     node-key="id"
     :data="treeData"
-    :default-expand-all="true"
-    :show-checkbox="true"
     :default-checked-keys="expandeArr"
+    default-expand-all
+    show-checkbox
   ></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
@@ -39,10 +39,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -172,3 +168,10 @@ const treeData = ref([
   }
 ])
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/default-expand-all.vue

@@ -2,13 +2,13 @@
   <tiny-tree-menu
     node-key="id"
     :data="treeData"
-    :default-expand-all="true"
-    :show-checkbox="true"
     :default-checked-keys="expandeArr"
+    default-expand-all
+    show-checkbox
   ></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {
@@ -44,10 +44,6 @@ export default {
           id: 300,
           label: '组件',
           children: [
-            {
-              id: 300,
-              label: '组件'
-            },
             {
               id: 301,
               label: '表单组件',
@@ -180,3 +176,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/default-expanded-keys-composition-api.vue

@@ -1,12 +1,12 @@
 <template>
-  <tiny-tree-menu :data="treeData" node-key="id" ref="treeMenuRef" :default-expanded-keys="expandeArr"></tiny-tree-menu>
+  <tiny-tree-menu :data="treeData" node-key="id" :default-expanded-keys="expandeArr"></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
-const expandeArr = ref([302])
+const expandeArr = ref([30101])
 const treeData = ref([
   {
     id: 100,
@@ -33,10 +33,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -114,3 +110,10 @@ const treeData = ref([
   }
 ])
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight-composition-api.vue

@@ -1,21 +1,21 @@
 <template>
-  <div class="tiny-demo">
-    <h4>点击改变<tiny-button @click="changeHighlight">highlight</tiny-button></h4>
+  <div>
+    <tiny-button @click="changeHighlight" type="primary">设置展开并高亮</tiny-button>
     <tiny-tree-menu
       node-key="id"
       :data="treeData"
-      :default-expanded-keys="expandedKeys"
+      :default-expanded-keys="expandeArr"
       :default-expanded-keys-highlight="highlight"
     ></tiny-tree-menu>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, reactive } from 'vue'
 import { TreeMenu as TinyTreeMenu, Button as TinyButton } from '@opentiny/vue'
 
-const expandedKeys = reactive([20101])
-const highlight = ref(401)
+let expandeArr = reactive([30101])
+const highlight = ref(30101)
 const treeData = reactive([
   {
     id: 100,
@@ -42,10 +42,6 @@ const treeData = reactive([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -125,7 +121,18 @@ const treeData = reactive([
 
 const changeHighlight = () => {
   setTimeout(() => {
-    highlight.value = 20101
+    expandeArr = expandeArr.concat([401])
+    highlight.value = 401
   }, 100)
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+.tiny-button {
+  margin-bottom: 10px;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/default-expanded-keys-highlight.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="tiny-demo">
-    <h4>点击改变<tiny-button @click="changeHighlight">highlight</tiny-button></h4>
+  <div>
+    <tiny-button @click="changeHighlight" type="primary">设置展开并高亮</tiny-button>
     <tiny-tree-menu
       node-key="id"
       :data="treeData"
-      :default-expanded-keys="expandedKeys"
+      :default-expanded-keys="expandeArr"
       :default-expanded-keys-highlight="highlight"
     ></tiny-tree-menu>
   </div>
@@ -20,8 +20,8 @@ export default {
   },
   data() {
     return {
-      expandedKeys: [20101],
-      highlight: 401,
+      expandeArr: [30101],
+      highlight: 30101,
       treeData: [
         {
           id: 100,
@@ -59,7 +59,7 @@ export default {
                 {
                   id: 30101,
                   label: 'Button 按钮',
-                  url: 'http://his-beta.huawei.com/aurora/#/webcore/v3/zh-CN/component/button'
+                  url: 'https://tinyuidesign.cloudbu.huawei.com/tiny-vue/zh-CN/os-theme/components/button'
                 },
                 { id: 30102, label: 'Datepicker 日期', url: '' },
                 { id: 30103, label: 'Dropdown 下拉框', url: '' },
@@ -133,9 +133,20 @@ export default {
   methods: {
     changeHighlight() {
       setTimeout(() => {
-        this.highlight = 20101
+        this.expandeArr = this.expandeArr.concat([401])
+        this.highlight = 401
       }, 100)
     }
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+.tiny-button {
+  margin-bottom: 10px;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/default-expanded-keys.spec.ts

@@ -15,4 +15,4 @@ test('默认展开某节点', async ({ page }) => {
   await expect(treeMenu.getByTitle('Datepicker 日期')).not.toBeVisible()
   // 非默认展开节点子的祖先节点的子节点不展开
   await expect(treeMenu.getByTitle('页面布局')).not.toBeVisible()
-})
+})

examples/sites/demos/pc/app/tree-menu/default-expanded-keys.vue

@@ -1,17 +1,18 @@
 <template>
-  <tiny-tree-menu :data="treeData" node-key="id" ref="treeMenu" :default-expanded-keys="expandeArr"></tiny-tree-menu>
+  <tiny-tree-menu :data="treeData" node-key="id" :default-expanded-keys="expandeArr"> </tiny-tree-menu>
 </template>
 
-<script lang="jsx">
-import { TreeMenu } from '@opentiny/vue'
+<script>
+import { TreeMenu, Button } from '@opentiny/vue'
 
 export default {
   components: {
-    TinyTreeMenu: TreeMenu
+    TinyTreeMenu: TreeMenu,
+    TinyButton: Button
   },
   data() {
     return {
-      expandeArr: [302],
+      expandeArr: [30101],
       treeData: [
         {
           id: 100,
@@ -38,10 +39,6 @@ export default {
           id: 300,
           label: '组件',
           children: [
-            {
-              id: 300,
-              label: '组件'
-            },
             {
               id: 301,
               label: '表单组件',
@@ -122,3 +119,10 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/draggable-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-tree-menu :data="treeData" draggable></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
@@ -32,10 +32,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',

examples/sites/demos/pc/app/tree-menu/draggable.vue

@@ -2,7 +2,7 @@
   <tiny-tree-menu :data="treeData" draggable></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {
@@ -37,10 +37,6 @@ export default {
           id: 300,
           label: '组件',
           children: [
-            {
-              id: 300,
-              label: '组件'
-            },
             {
               id: 301,
               label: '表单组件',

examples/sites/demos/pc/app/tree-menu/empty-text-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-tree-menu :data="treeData" empty-text="空数据"></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 

examples/sites/demos/pc/app/tree-menu/empty-text.vue

@@ -2,7 +2,7 @@
   <tiny-tree-menu :data="treeData" empty-text="空数据"></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/tree-menu/event-allow-draggable-composition-api.vue

@@ -9,7 +9,7 @@
   ></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu, Modal } from '@opentiny/vue'
 
@@ -39,10 +39,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',

examples/sites/demos/pc/app/tree-menu/event-allow-draggable.vue

@@ -1,15 +1,15 @@
 <template>
   <tiny-tree-menu
     :data="treeData"
+    draggable
     :allow-drag="dragCallback"
     :allow-drop="dropCallback"
     @node-drag-start="dragStart"
     @node-drag-end="dragEnd"
-    draggable
   ></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu, Modal } from '@opentiny/vue'
 
 export default {
@@ -17,16 +17,20 @@ export default {
     TinyTreeMenu: TreeMenu
   },
   methods: {
-    dropCallback() {
+    dropCallback(params1, params2, params3) {
+      console.log('allow-drop', params1, params2, params3)
       return true
     },
-    dragCallback() {
+    dragCallback(params) {
+      console.log('allow-drag', params)
       return true
     },
-    dragStart() {
+    dragStart(node, event) {
+      console.log('drag-start', node, event)
       Modal.message('拖拽节点开始时触发的事件')
     },
-    dragEnd() {
+    dragEnd(draggingNode, targetNode, dropType, event) {
+      console.log('drag-end', draggingNode, targetNode, dropType, event)
       Modal.message('拖拽结束时触发的事件')
     }
   },

examples/sites/demos/pc/app/tree-menu/event-check-change.spec.ts

@@ -1,16 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('节点选中状态发生变化时的回调', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#event-check-change')
-
-  const checkBox = page.getByRole('treeitem', { name: '首页' }).locator('span').nth(2)
-
-  // 选中节点
-  await checkBox.click()
-  await expect(page.locator('.tiny-modal').filter({ hasText: '节点-首页被选中了' })).toBeVisible()
-
-  // 取消选中
-  await checkBox.click()
-  await expect(page.locator('.tiny-modal').filter({ hasText: '节点-首页被取消了' })).toBeVisible()
-})

examples/sites/demos/pc/app/tree-menu/event-current-change-composition-api.vue

@@ -1,171 +0,0 @@
-<template>
-  <tiny-tree-menu :data="treeData" @current-change="currentChange"></tiny-tree-menu>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu, Modal } from '@opentiny/vue'
-
-const treeData = ref([
-  {
-    id: 100,
-    label: '首页'
-  },
-  {
-    id: 200,
-    label: '指南',
-    children: [
-      {
-        id: 201,
-        label: '引入组件',
-        children: [
-          { id: 20101, label: '按需引入' },
-          { id: 20102, label: '完整引入' }
-        ]
-      },
-      { id: 202, label: '后端适配器' },
-      { id: 203, label: '服务代理' },
-      { id: 204, label: '构建部署' }
-    ]
-  },
-  {
-    id: 300,
-    label: '组件',
-    children: [
-      {
-        id: 300,
-        label: '组件'
-      },
-      {
-        id: 301,
-        label: '表单组件',
-        children: [
-          {
-            id: 30101,
-            label: 'Button 按钮',
-            url: 'button'
-          },
-          {
-            id: 30102,
-            label: 'Datepicker 日期',
-            url: 'datepicker'
-          },
-          {
-            id: 30103,
-            label: 'Dropdown 下拉框',
-            url: 'dropdown'
-          },
-          {
-            id: 30104,
-            label: 'DropTimes 下拉时间',
-            url: 'droptimes'
-          },
-          {
-            id: 30105,
-            label: 'Input 输入框',
-            url: 'input'
-          }
-        ]
-      },
-      { id: 302, label: '数据组件' },
-      { id: 303, label: '导航组件' },
-      { id: 304, label: '业务组件' }
-    ]
-  },
-  {
-    id: 400,
-    label: '教程',
-    children: [
-      {
-        id: 401,
-        label: '页面布局',
-        children: [
-          {
-            id: 40101,
-            label: '添加标签页',
-            url: 'addtabs'
-          },
-          {
-            id: 40102,
-            label: '标签页配置',
-            url: 'tabsattr'
-          }
-        ]
-      },
-      {
-        id: 402,
-        label: '查询功能',
-        children: [
-          {
-            id: 40201,
-            label: '添加查询页面',
-            url: 'addlist'
-          },
-          {
-            id: 40202,
-            label: '列表属性配置',
-            url: 'listattr'
-          },
-          {
-            id: 40203,
-            label: '通讯录查询',
-            url: 'searchfunc'
-          }
-        ]
-      },
-      {
-        id: 403,
-        label: '新增功能',
-        children: [
-          {
-            id: 40301,
-            label: '表单新增功能',
-            url: 'addservice'
-          },
-          {
-            id: 40302,
-            label: '表单数据验证',
-            url: 'valid'
-          }
-        ]
-      },
-      {
-        id: 404,
-        label: '编辑功能',
-        children: [
-          {
-            id: 40401,
-            label: '开启编辑功能',
-            url: 'editattr'
-          },
-          {
-            id: 40402,
-            label: '保存表格数据',
-            url: 'savefunc'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 500,
-    label: '规范'
-  },
-  {
-    id: 600,
-    label: '性能'
-  },
-  {
-    id: 700,
-    label: '案例'
-  },
-  {
-    id: 800,
-    label: '更新日志'
-  }
-])
-
-function currentChange(data) {
-  Modal.message({ message: `选中节点变化为:${data.label}`, status: 'info' })
-}
-</script>

examples/sites/demos/pc/app/tree-menu/event-current-change.spec.ts

@@ -1,12 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('当前选中节点变化事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#event-current-change')
-
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
-  await treeMenu.getByTitle('指南', { exact: true }).click()
-  await expect(page.locator('div').filter({ hasText: '选中节点变化为:指南' }).nth(1)).toBeVisible()
-  await treeMenu.getByTitle('后端适配器', { exact: true }).click()
-  await expect(page.locator('div').filter({ hasText: '选中节点变化为:后端适配器' }).nth(1)).toBeVisible()
-})

examples/sites/demos/pc/app/tree-menu/event-current-change.vue

@@ -1,180 +0,0 @@
-<template>
-  <tiny-tree-menu :data="treeData" @current-change="currentChange"></tiny-tree-menu>
-</template>
-
-<script lang="jsx">
-import { TreeMenu, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTreeMenu: TreeMenu
-  },
-  data() {
-    return {
-      treeData: [
-        {
-          id: 100,
-          label: '首页'
-        },
-        {
-          id: 200,
-          label: '指南',
-          children: [
-            {
-              id: 201,
-              label: '引入组件',
-              children: [
-                { id: 20101, label: '按需引入' },
-                { id: 20102, label: '完整引入' }
-              ]
-            },
-            { id: 202, label: '后端适配器' },
-            { id: 203, label: '服务代理' },
-            { id: 204, label: '构建部署' }
-          ]
-        },
-        {
-          id: 300,
-          label: '组件',
-          children: [
-            {
-              id: 300,
-              label: '组件'
-            },
-            {
-              id: 301,
-              label: '表单组件',
-              children: [
-                {
-                  id: 30101,
-                  label: 'Button 按钮',
-                  url: 'button'
-                },
-                {
-                  id: 30102,
-                  label: 'Datepicker 日期',
-                  url: 'datepicker'
-                },
-                {
-                  id: 30103,
-                  label: 'Dropdown 下拉框',
-                  url: 'dropdown'
-                },
-                {
-                  id: 30104,
-                  label: 'DropTimes 下拉时间',
-                  url: 'droptimes'
-                },
-                {
-                  id: 30105,
-                  label: 'Input 输入框',
-                  url: 'input'
-                }
-              ]
-            },
-            { id: 302, label: '数据组件' },
-            { id: 303, label: '导航组件' },
-            { id: 304, label: '业务组件' }
-          ]
-        },
-        {
-          id: 400,
-          label: '教程',
-          children: [
-            {
-              id: 401,
-              label: '页面布局',
-              children: [
-                {
-                  id: 40101,
-                  label: '添加标签页',
-                  url: 'addtabs'
-                },
-                {
-                  id: 40102,
-                  label: '标签页配置',
-                  url: 'tabsattr'
-                }
-              ]
-            },
-            {
-              id: 402,
-              label: '查询功能',
-              children: [
-                {
-                  id: 40201,
-                  label: '添加查询页面',
-                  url: 'addlist'
-                },
-                {
-                  id: 40202,
-                  label: '列表属性配置',
-                  url: 'listattr'
-                },
-                {
-                  id: 40203,
-                  label: '通讯录查询',
-                  url: 'searchfunc'
-                }
-              ]
-            },
-            {
-              id: 403,
-              label: '新增功能',
-              children: [
-                {
-                  id: 40301,
-                  label: '表单新增功能',
-                  url: 'addservice'
-                },
-                {
-                  id: 40302,
-                  label: '表单数据验证',
-                  url: 'valid'
-                }
-              ]
-            },
-            {
-              id: 404,
-              label: '编辑功能',
-              children: [
-                {
-                  id: 40401,
-                  label: '开启编辑功能',
-                  url: 'editattr'
-                },
-                {
-                  id: 40402,
-                  label: '保存表格数据',
-                  url: 'savefunc'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 500,
-          label: '规范'
-        },
-        {
-          id: 600,
-          label: '性能'
-        },
-        {
-          id: 700,
-          label: '案例'
-        },
-        {
-          id: 800,
-          label: '更新日志'
-        }
-      ]
-    }
-  },
-  methods: {
-    currentChange(data) {
-      Modal.message({ message: `选中节点变化为:${data.label}`, status: 'info' })
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/tree-menu/event-node-click-composition-api.vue

@@ -1,171 +0,0 @@
-<template>
-  <tiny-tree-menu :data="treeData" @node-click="handleNodeClick"></tiny-tree-menu>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu, Modal } from '@opentiny/vue'
-
-const treeData = ref([
-  {
-    id: 100,
-    label: '首页'
-  },
-  {
-    id: 200,
-    label: '指南',
-    children: [
-      {
-        id: 201,
-        label: '引入组件',
-        children: [
-          { id: 20101, label: '按需引入' },
-          { id: 20102, label: '完整引入' }
-        ]
-      },
-      { id: 202, label: '后端适配器' },
-      { id: 203, label: '服务代理' },
-      { id: 204, label: '构建部署' }
-    ]
-  },
-  {
-    id: 300,
-    label: '组件',
-    children: [
-      {
-        id: 300,
-        label: '组件'
-      },
-      {
-        id: 301,
-        label: '表单组件',
-        children: [
-          {
-            id: 30101,
-            label: 'Button 按钮',
-            url: 'button'
-          },
-          {
-            id: 30102,
-            label: 'Datepicker 日期',
-            url: 'datepicker'
-          },
-          {
-            id: 30103,
-            label: 'Dropdown 下拉框',
-            url: 'dropdown'
-          },
-          {
-            id: 30104,
-            label: 'DropTimes 下拉时间',
-            url: 'droptimes'
-          },
-          {
-            id: 30105,
-            label: 'Input 输入框',
-            url: 'input'
-          }
-        ]
-      },
-      { id: 302, label: '数据组件' },
-      { id: 303, label: '导航组件' },
-      { id: 304, label: '业务组件' }
-    ]
-  },
-  {
-    id: 400,
-    label: '教程',
-    children: [
-      {
-        id: 401,
-        label: '页面布局',
-        children: [
-          {
-            id: 40101,
-            label: '添加标签页',
-            url: 'addtabs'
-          },
-          {
-            id: 40102,
-            label: '标签页配置',
-            url: 'tabsattr'
-          }
-        ]
-      },
-      {
-        id: 402,
-        label: '查询功能',
-        children: [
-          {
-            id: 40201,
-            label: '添加查询页面',
-            url: 'addlist'
-          },
-          {
-            id: 40202,
-            label: '列表属性配置',
-            url: 'listattr'
-          },
-          {
-            id: 40203,
-            label: '通讯录查询',
-            url: 'searchfunc'
-          }
-        ]
-      },
-      {
-        id: 403,
-        label: '新增功能',
-        children: [
-          {
-            id: 40301,
-            label: '表单新增功能',
-            url: 'addservice'
-          },
-          {
-            id: 40302,
-            label: '表单数据验证',
-            url: 'valid'
-          }
-        ]
-      },
-      {
-        id: 404,
-        label: '编辑功能',
-        children: [
-          {
-            id: 40401,
-            label: '开启编辑功能',
-            url: 'editattr'
-          },
-          {
-            id: 40402,
-            label: '保存表格数据',
-            url: 'savefunc'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 500,
-    label: '规范'
-  },
-  {
-    id: 600,
-    label: '性能'
-  },
-  {
-    id: 700,
-    label: '案例'
-  },
-  {
-    id: 800,
-    label: '更新日志'
-  }
-])
-
-function handleNodeClick(data) {
-  Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
-}
-</script>

examples/sites/demos/pc/app/tree-menu/event-node-click.spec.ts

@@ -1,14 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('节点被点击事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#event-node-click')
-
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
-  await treeMenu.getByTitle('首页', { exact: true }).click()
-  await expect(page.locator('div').filter({ hasText: '节点-首页被点击了' }).nth(1)).toBeVisible()
-  await treeMenu.getByTitle('指南', { exact: true }).click()
-  await expect(page.locator('div').filter({ hasText: '节点-指南被点击了' }).nth(1)).toBeVisible()
-  await treeMenu.getByTitle('后端适配器', { exact: true }).click()
-  await expect(page.locator('div').filter({ hasText: '节点-后端适配器被点击了' }).nth(1)).toBeVisible()
-})

examples/sites/demos/pc/app/tree-menu/event-node-click.vue

@@ -1,180 +0,0 @@
-<template>
-  <tiny-tree-menu :data="treeData" @node-click="handleNodeClick"></tiny-tree-menu>
-</template>
-
-<script lang="jsx">
-import { TreeMenu, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTreeMenu: TreeMenu
-  },
-  data() {
-    return {
-      treeData: [
-        {
-          id: 100,
-          label: '首页'
-        },
-        {
-          id: 200,
-          label: '指南',
-          children: [
-            {
-              id: 201,
-              label: '引入组件',
-              children: [
-                { id: 20101, label: '按需引入' },
-                { id: 20102, label: '完整引入' }
-              ]
-            },
-            { id: 202, label: '后端适配器' },
-            { id: 203, label: '服务代理' },
-            { id: 204, label: '构建部署' }
-          ]
-        },
-        {
-          id: 300,
-          label: '组件',
-          children: [
-            {
-              id: 300,
-              label: '组件'
-            },
-            {
-              id: 301,
-              label: '表单组件',
-              children: [
-                {
-                  id: 30101,
-                  label: 'Button 按钮',
-                  url: 'button'
-                },
-                {
-                  id: 30102,
-                  label: 'Datepicker 日期',
-                  url: 'datepicker'
-                },
-                {
-                  id: 30103,
-                  label: 'Dropdown 下拉框',
-                  url: 'dropdown'
-                },
-                {
-                  id: 30104,
-                  label: 'DropTimes 下拉时间',
-                  url: 'droptimes'
-                },
-                {
-                  id: 30105,
-                  label: 'Input 输入框',
-                  url: 'input'
-                }
-              ]
-            },
-            { id: 302, label: '数据组件' },
-            { id: 303, label: '导航组件' },
-            { id: 304, label: '业务组件' }
-          ]
-        },
-        {
-          id: 400,
-          label: '教程',
-          children: [
-            {
-              id: 401,
-              label: '页面布局',
-              children: [
-                {
-                  id: 40101,
-                  label: '添加标签页',
-                  url: 'addtabs'
-                },
-                {
-                  id: 40102,
-                  label: '标签页配置',
-                  url: 'tabsattr'
-                }
-              ]
-            },
-            {
-              id: 402,
-              label: '查询功能',
-              children: [
-                {
-                  id: 40201,
-                  label: '添加查询页面',
-                  url: 'addlist'
-                },
-                {
-                  id: 40202,
-                  label: '列表属性配置',
-                  url: 'listattr'
-                },
-                {
-                  id: 40203,
-                  label: '通讯录查询',
-                  url: 'searchfunc'
-                }
-              ]
-            },
-            {
-              id: 403,
-              label: '新增功能',
-              children: [
-                {
-                  id: 40301,
-                  label: '表单新增功能',
-                  url: 'addservice'
-                },
-                {
-                  id: 40302,
-                  label: '表单数据验证',
-                  url: 'valid'
-                }
-              ]
-            },
-            {
-              id: 404,
-              label: '编辑功能',
-              children: [
-                {
-                  id: 40401,
-                  label: '开启编辑功能',
-                  url: 'editattr'
-                },
-                {
-                  id: 40402,
-                  label: '保存表格数据',
-                  url: 'savefunc'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 500,
-          label: '规范'
-        },
-        {
-          id: 600,
-          label: '性能'
-        },
-        {
-          id: 700,
-          label: '案例'
-        },
-        {
-          id: 800,
-          label: '更新日志'
-        }
-      ]
-    }
-  },
-  methods: {
-    handleNodeClick(data) {
-      Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/tree-menu/event-node-collapse-composition-api.vue

@@ -1,171 +0,0 @@
-<template>
-  <tiny-tree-menu :data="treeData" @node-collapse="nodeCollapse"></tiny-tree-menu>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu, Modal } from '@opentiny/vue'
-
-const treeData = ref([
-  {
-    id: 100,
-    label: '首页11111111111111111111111111111111111111111111111111'
-  },
-  {
-    id: 200,
-    label: '指南',
-    children: [
-      {
-        id: 201,
-        label: '引入组件',
-        children: [
-          { id: 20101, label: '按需引入' },
-          { id: 20102, label: '完整引入' }
-        ]
-      },
-      { id: 202, label: '后端适配器' },
-      { id: 203, label: '服务代理' },
-      { id: 204, label: '构建部署' }
-    ]
-  },
-  {
-    id: 300,
-    label: '组件',
-    children: [
-      {
-        id: 300,
-        label: '组件'
-      },
-      {
-        id: 301,
-        label: '表单组件',
-        children: [
-          {
-            id: 30101,
-            label: 'Button 按钮',
-            url: 'button'
-          },
-          {
-            id: 30102,
-            label: 'Datepicker 日期',
-            url: 'datepicker'
-          },
-          {
-            id: 30103,
-            label: 'Dropdown 下拉框',
-            url: 'dropdown'
-          },
-          {
-            id: 30104,
-            label: 'DropTimes 下拉时间',
-            url: 'droptimes'
-          },
-          {
-            id: 30105,
-            label: 'Input 输入框',
-            url: 'input'
-          }
-        ]
-      },
-      { id: 302, label: '数据组件' },
-      { id: 303, label: '导航组件' },
-      { id: 304, label: '业务组件' }
-    ]
-  },
-  {
-    id: 400,
-    label: '教程',
-    children: [
-      {
-        id: 401,
-        label: '页面布局',
-        children: [
-          {
-            id: 40101,
-            label: '添加标签页',
-            url: 'addtabs'
-          },
-          {
-            id: 40102,
-            label: '标签页配置',
-            url: 'tabsattr'
-          }
-        ]
-      },
-      {
-        id: 402,
-        label: '查询功能',
-        children: [
-          {
-            id: 40201,
-            label: '添加查询页面',
-            url: 'addlist'
-          },
-          {
-            id: 40202,
-            label: '列表属性配置',
-            url: 'listattr'
-          },
-          {
-            id: 40203,
-            label: '通讯录查询',
-            url: 'searchfunc'
-          }
-        ]
-      },
-      {
-        id: 403,
-        label: '新增功能',
-        children: [
-          {
-            id: 40301,
-            label: '表单新增功能',
-            url: 'addservice'
-          },
-          {
-            id: 40302,
-            label: '表单数据验证',
-            url: 'valid'
-          }
-        ]
-      },
-      {
-        id: 404,
-        label: '编辑功能',
-        children: [
-          {
-            id: 40401,
-            label: '开启编辑功能',
-            url: 'editattr'
-          },
-          {
-            id: 40402,
-            label: '保存表格数据',
-            url: 'savefunc'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 500,
-    label: '规范'
-  },
-  {
-    id: 600,
-    label: '性能'
-  },
-  {
-    id: 700,
-    label: '案例'
-  },
-  {
-    id: 800,
-    label: '更新日志'
-  }
-])
-
-function nodeCollapse(data) {
-  Modal.message({ message: `节点-${data.label}被关闭了`, status: 'info' })
-}
-</script>

examples/sites/demos/pc/app/tree-menu/event-node-collapse.spec.ts

@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('节点被折叠时触发的事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#event-node-collapse')
-
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
-  await treeMenu.getByTitle('指南', { exact: true }).click()
-  await treeMenu.getByTitle('指南', { exact: true }).click()
-  await expect(page.locator('.tiny-modal').filter({ hasText: '节点-指南被关闭了' })).toBeVisible()
-})

examples/sites/demos/pc/app/tree-menu/event-node-collapse.vue

@@ -1,180 +0,0 @@
-<template>
-  <tiny-tree-menu :data="treeData" @node-collapse="nodeCollapse"></tiny-tree-menu>
-</template>
-
-<script lang="jsx">
-import { TreeMenu, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTreeMenu: TreeMenu
-  },
-  data() {
-    return {
-      treeData: [
-        {
-          id: 100,
-          label: '首页11111111111111111111111111111111111111111111111111'
-        },
-        {
-          id: 200,
-          label: '指南',
-          children: [
-            {
-              id: 201,
-              label: '引入组件',
-              children: [
-                { id: 20101, label: '按需引入' },
-                { id: 20102, label: '完整引入' }
-              ]
-            },
-            { id: 202, label: '后端适配器' },
-            { id: 203, label: '服务代理' },
-            { id: 204, label: '构建部署' }
-          ]
-        },
-        {
-          id: 300,
-          label: '组件',
-          children: [
-            {
-              id: 300,
-              label: '组件'
-            },
-            {
-              id: 301,
-              label: '表单组件',
-              children: [
-                {
-                  id: 30101,
-                  label: 'Button 按钮',
-                  url: 'button'
-                },
-                {
-                  id: 30102,
-                  label: 'Datepicker 日期',
-                  url: 'datepicker'
-                },
-                {
-                  id: 30103,
-                  label: 'Dropdown 下拉框',
-                  url: 'dropdown'
-                },
-                {
-                  id: 30104,
-                  label: 'DropTimes 下拉时间',
-                  url: 'droptimes'
-                },
-                {
-                  id: 30105,
-                  label: 'Input 输入框',
-                  url: 'input'
-                }
-              ]
-            },
-            { id: 302, label: '数据组件' },
-            { id: 303, label: '导航组件' },
-            { id: 304, label: '业务组件' }
-          ]
-        },
-        {
-          id: 400,
-          label: '教程',
-          children: [
-            {
-              id: 401,
-              label: '页面布局',
-              children: [
-                {
-                  id: 40101,
-                  label: '添加标签页',
-                  url: 'addtabs'
-                },
-                {
-                  id: 40102,
-                  label: '标签页配置',
-                  url: 'tabsattr'
-                }
-              ]
-            },
-            {
-              id: 402,
-              label: '查询功能',
-              children: [
-                {
-                  id: 40201,
-                  label: '添加查询页面',
-                  url: 'addlist'
-                },
-                {
-                  id: 40202,
-                  label: '列表属性配置',
-                  url: 'listattr'
-                },
-                {
-                  id: 40203,
-                  label: '通讯录查询',
-                  url: 'searchfunc'
-                }
-              ]
-            },
-            {
-              id: 403,
-              label: '新增功能',
-              children: [
-                {
-                  id: 40301,
-                  label: '表单新增功能',
-                  url: 'addservice'
-                },
-                {
-                  id: 40302,
-                  label: '表单数据验证',
-                  url: 'valid'
-                }
-              ]
-            },
-            {
-              id: 404,
-              label: '编辑功能',
-              children: [
-                {
-                  id: 40401,
-                  label: '开启编辑功能',
-                  url: 'editattr'
-                },
-                {
-                  id: 40402,
-                  label: '保存表格数据',
-                  url: 'savefunc'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 500,
-          label: '规范'
-        },
-        {
-          id: 600,
-          label: '性能'
-        },
-        {
-          id: 700,
-          label: '案例'
-        },
-        {
-          id: 800,
-          label: '更新日志'
-        }
-      ]
-    }
-  },
-  methods: {
-    nodeCollapse(data) {
-      Modal.message({ message: `节点-${data.label}被关闭了`, status: 'info' })
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/tree-menu/event-node-expand-composition-api.vue

@@ -1,171 +0,0 @@
-<template>
-  <tiny-tree-menu :data="treeData" @node-expand="nodeExpand"></tiny-tree-menu>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu, Modal } from '@opentiny/vue'
-
-const treeData = ref([
-  {
-    id: 100,
-    label: '首页11111111111111111111111111111111111111111111111111'
-  },
-  {
-    id: 200,
-    label: '指南',
-    children: [
-      {
-        id: 201,
-        label: '引入组件',
-        children: [
-          { id: 20101, label: '按需引入' },
-          { id: 20102, label: '完整引入' }
-        ]
-      },
-      { id: 202, label: '后端适配器' },
-      { id: 203, label: '服务代理' },
-      { id: 204, label: '构建部署' }
-    ]
-  },
-  {
-    id: 300,
-    label: '组件',
-    children: [
-      {
-        id: 300,
-        label: '组件'
-      },
-      {
-        id: 301,
-        label: '表单组件',
-        children: [
-          {
-            id: 30101,
-            label: 'Button 按钮',
-            url: 'button'
-          },
-          {
-            id: 30102,
-            label: 'Datepicker 日期',
-            url: 'datepicker'
-          },
-          {
-            id: 30103,
-            label: 'Dropdown 下拉框',
-            url: 'dropdown'
-          },
-          {
-            id: 30104,
-            label: 'DropTimes 下拉时间',
-            url: 'droptimes'
-          },
-          {
-            id: 30105,
-            label: 'Input 输入框',
-            url: 'input'
-          }
-        ]
-      },
-      { id: 302, label: '数据组件' },
-      { id: 303, label: '导航组件' },
-      { id: 304, label: '业务组件' }
-    ]
-  },
-  {
-    id: 400,
-    label: '教程',
-    children: [
-      {
-        id: 401,
-        label: '页面布局',
-        children: [
-          {
-            id: 40101,
-            label: '添加标签页',
-            url: 'addtabs'
-          },
-          {
-            id: 40102,
-            label: '标签页配置',
-            url: 'tabsattr'
-          }
-        ]
-      },
-      {
-        id: 402,
-        label: '查询功能',
-        children: [
-          {
-            id: 40201,
-            label: '添加查询页面',
-            url: 'addlist'
-          },
-          {
-            id: 40202,
-            label: '列表属性配置',
-            url: 'listattr'
-          },
-          {
-            id: 40203,
-            label: '通讯录查询',
-            url: 'searchfunc'
-          }
-        ]
-      },
-      {
-        id: 403,
-        label: '新增功能',
-        children: [
-          {
-            id: 40301,
-            label: '表单新增功能',
-            url: 'addservice'
-          },
-          {
-            id: 40302,
-            label: '表单数据验证',
-            url: 'valid'
-          }
-        ]
-      },
-      {
-        id: 404,
-        label: '编辑功能',
-        children: [
-          {
-            id: 40401,
-            label: '开启编辑功能',
-            url: 'editattr'
-          },
-          {
-            id: 40402,
-            label: '保存表格数据',
-            url: 'savefunc'
-          }
-        ]
-      }
-    ]
-  },
-  {
-    id: 500,
-    label: '规范'
-  },
-  {
-    id: 600,
-    label: '性能'
-  },
-  {
-    id: 700,
-    label: '案例'
-  },
-  {
-    id: 800,
-    label: '更新日志'
-  }
-])
-
-function nodeExpand(data) {
-  Modal.message({ message: `节点-${data.label}被打开了`, status: 'info' })
-}
-</script>

examples/sites/demos/pc/app/tree-menu/event-node-expand.spec.ts

@@ -1,10 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('节点被展开时触发的事件', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#event-node-expand')
-
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
-  await treeMenu.getByTitle('指南', { exact: true }).click()
-  await expect(page.locator('.tiny-modal').filter({ hasText: '节点-指南被打开了' })).toBeVisible()
-})

examples/sites/demos/pc/app/tree-menu/event-node-expand.vue

@@ -1,180 +0,0 @@
-<template>
-  <tiny-tree-menu :data="treeData" @node-expand="nodeExpand"></tiny-tree-menu>
-</template>
-
-<script lang="jsx">
-import { TreeMenu, Modal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyTreeMenu: TreeMenu
-  },
-  data() {
-    return {
-      treeData: [
-        {
-          id: 100,
-          label: '首页11111111111111111111111111111111111111111111111111'
-        },
-        {
-          id: 200,
-          label: '指南',
-          children: [
-            {
-              id: 201,
-              label: '引入组件',
-              children: [
-                { id: 20101, label: '按需引入' },
-                { id: 20102, label: '完整引入' }
-              ]
-            },
-            { id: 202, label: '后端适配器' },
-            { id: 203, label: '服务代理' },
-            { id: 204, label: '构建部署' }
-          ]
-        },
-        {
-          id: 300,
-          label: '组件',
-          children: [
-            {
-              id: 300,
-              label: '组件'
-            },
-            {
-              id: 301,
-              label: '表单组件',
-              children: [
-                {
-                  id: 30101,
-                  label: 'Button 按钮',
-                  url: 'button'
-                },
-                {
-                  id: 30102,
-                  label: 'Datepicker 日期',
-                  url: 'datepicker'
-                },
-                {
-                  id: 30103,
-                  label: 'Dropdown 下拉框',
-                  url: 'dropdown'
-                },
-                {
-                  id: 30104,
-                  label: 'DropTimes 下拉时间',
-                  url: 'droptimes'
-                },
-                {
-                  id: 30105,
-                  label: 'Input 输入框',
-                  url: 'input'
-                }
-              ]
-            },
-            { id: 302, label: '数据组件' },
-            { id: 303, label: '导航组件' },
-            { id: 304, label: '业务组件' }
-          ]
-        },
-        {
-          id: 400,
-          label: '教程',
-          children: [
-            {
-              id: 401,
-              label: '页面布局',
-              children: [
-                {
-                  id: 40101,
-                  label: '添加标签页',
-                  url: 'addtabs'
-                },
-                {
-                  id: 40102,
-                  label: '标签页配置',
-                  url: 'tabsattr'
-                }
-              ]
-            },
-            {
-              id: 402,
-              label: '查询功能',
-              children: [
-                {
-                  id: 40201,
-                  label: '添加查询页面',
-                  url: 'addlist'
-                },
-                {
-                  id: 40202,
-                  label: '列表属性配置',
-                  url: 'listattr'
-                },
-                {
-                  id: 40203,
-                  label: '通讯录查询',
-                  url: 'searchfunc'
-                }
-              ]
-            },
-            {
-              id: 403,
-              label: '新增功能',
-              children: [
-                {
-                  id: 40301,
-                  label: '表单新增功能',
-                  url: 'addservice'
-                },
-                {
-                  id: 40302,
-                  label: '表单数据验证',
-                  url: 'valid'
-                }
-              ]
-            },
-            {
-              id: 404,
-              label: '编辑功能',
-              children: [
-                {
-                  id: 40401,
-                  label: '开启编辑功能',
-                  url: 'editattr'
-                },
-                {
-                  id: 40402,
-                  label: '保存表格数据',
-                  url: 'savefunc'
-                }
-              ]
-            }
-          ]
-        },
-        {
-          id: 500,
-          label: '规范'
-        },
-        {
-          id: 600,
-          label: '性能'
-        },
-        {
-          id: 700,
-          label: '案例'
-        },
-        {
-          id: 800,
-          label: '更新日志'
-        }
-      ]
-    }
-  },
-  methods: {
-    nodeExpand(data) {
-      Modal.message({ message: `节点-${data.label}被打开了`, status: 'info' })
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/tree-menu/events-composition-api.vue

@@ -1,8 +1,16 @@
 <template>
-  <tiny-tree-menu :data="treeData" @check-change="checkChange" :show-checkbox="true"></tiny-tree-menu>
+  <tiny-tree-menu
+    :data="treeData"
+    :show-checkbox="true"
+    @check-change="checkChange"
+    @node-click="handleNodeClick"
+    @current-change="currentChange"
+    @node-expand="nodeExpand"
+    @node-collapse="nodeCollapse"
+  ></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu, Modal } from '@opentiny/vue'
 
@@ -32,10 +40,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -165,7 +169,23 @@ const treeData = ref([
   }
 ])
 
-function checkChange(node, newVal) {
+const handleNodeClick = (data) => {
+  Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
+}
+
+const currentChange = (data) => {
+  Modal.message({ message: `选中节点变化为:${data.label}`, status: 'info' })
+}
+
+const nodeExpand = (data) => {
+  Modal.message({ message: `节点-${data.label}被打开了`, status: 'info' })
+}
+
+const nodeCollapse = (data) => {
+  Modal.message({ message: `节点-${data.label}被关闭了`, status: 'info' })
+}
+
+const checkChange = (node, newVal) => {
   let state = newVal ? '选中' : '取消'
   Modal.message({
     message: `节点-${node.label}被${state}了`,

examples/sites/demos/pc/app/tree-menu/events.spec.ts

@@ -0,0 +1,62 @@
+import { test, expect } from '@playwright/test'
+
+test('节点被点击事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#event-node-click')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await treeMenu.getByTitle('首页', { exact: true }).click()
+  await expect(page.locator('div').filter({ hasText: '节点-首页被点击了' }).nth(1)).toBeVisible()
+  await treeMenu.getByTitle('指南', { exact: true }).click()
+  await expect(page.locator('div').filter({ hasText: '节点-指南被点击了' }).nth(1)).toBeVisible()
+  await treeMenu.getByTitle('后端适配器', { exact: true }).click()
+  await expect(page.locator('div').filter({ hasText: '节点-后端适配器被点击了' }).nth(1)).toBeVisible()
+})
+
+
+test('当前选中节点变化事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#event-current-change')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await treeMenu.getByTitle('指南', { exact: true }).click()
+  await expect(page.locator('div').filter({ hasText: '选中节点变化为:指南' }).nth(1)).toBeVisible()
+  await treeMenu.getByTitle('后端适配器', { exact: true }).click()
+  await expect(page.locator('div').filter({ hasText: '选中节点变化为:后端适配器' }).nth(1)).toBeVisible()
+})
+
+test('节点被折叠时触发的事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#event-node-collapse')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await treeMenu.getByTitle('指南', { exact: true }).click()
+  await treeMenu.getByTitle('指南', { exact: true }).click()
+  await expect(page.locator('.tiny-modal').filter({ hasText: '节点-指南被关闭了' })).toBeVisible()
+})
+
+
+test('节点被展开时触发的事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#event-node-expand')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await treeMenu.getByTitle('指南', { exact: true }).click()
+  await expect(page.locator('.tiny-modal').filter({ hasText: '节点-指南被打开了' })).toBeVisible()
+})
+
+
+test('节点选中状态发生变化时的回调', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#event-check-change')
+
+  const checkBox = page.getByRole('treeitem', { name: '首页' }).locator('span').nth(2)
+
+  // 选中节点
+  await checkBox.click()
+  await expect(page.locator('.tiny-modal').filter({ hasText: '节点-首页被选中了' })).toBeVisible()
+
+  // 取消选中
+  await checkBox.click()
+  await expect(page.locator('.tiny-modal').filter({ hasText: '节点-首页被取消了' })).toBeVisible()
+})

examples/sites/demos/pc/app/tree-menu/events.vue

@@ -1,24 +1,22 @@
 <template>
-  <tiny-tree-menu :data="treeData" @check-change="checkChange" :show-checkbox="true"></tiny-tree-menu>
+  <tiny-tree-menu
+    :data="treeData"
+    :show-checkbox="true"
+    @check-change="checkChange"
+    @node-click="handleNodeClick"
+    @current-change="currentChange"
+    @node-expand="nodeExpand"
+    @node-collapse="nodeCollapse"
+  ></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu, Modal } from '@opentiny/vue'
 
 export default {
   components: {
     TinyTreeMenu: TreeMenu
   },
-  methods: {
-    checkChange(node, newVal) {
-      let state = newVal ? '选中' : '取消'
-      Modal.message({
-        message: `节点-${node.label}被${state}了`,
-        status: 'info'
-      })
-    }
-  },
-
   data() {
     return {
       treeData: [
@@ -180,6 +178,27 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    handleNodeClick(data) {
+      Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
+    },
+    currentChange(data) {
+      Modal.message({ message: `选中节点变化为:${data.label}`, status: 'info' })
+    },
+    nodeExpand(data) {
+      Modal.message({ message: `节点-${data.label}被打开了`, status: 'info' })
+    },
+    nodeCollapse(data) {
+      Modal.message({ message: `节点-${data.label}被关闭了`, status: 'info' })
+    },
+    checkChange(node, newVal) {
+      let state = newVal ? '选中' : '取消'
+      Modal.message({
+        message: `节点-${node.label}被${state}了`,
+        status: 'info'
+      })
+    }
   }
 }
 </script>

examples/sites/demos/pc/app/tree-menu/expand-on-click-node-composition-api.vue

@@ -1,8 +1,13 @@
 <template>
-  <tiny-tree-menu :data="treeData" :expand-on-click-node="true"></tiny-tree-menu>
+  <div>
+    <p>场景1：默认点击文字展开菜单</p>
+    <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <p>场景2：点击展开按钮才可展开菜单</p>
+    <tiny-tree-menu :data="treeData" :expand-on-click-node="false"></tiny-tree-menu>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
@@ -32,10 +37,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -165,3 +166,14 @@ const treeData = ref([
   }
 ])
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/expand-on-click-node.vue

@@ -1,8 +1,13 @@
 <template>
-  <tiny-tree-menu :data="treeData" :expand-on-click-node="true"></tiny-tree-menu>
+  <div>
+    <p>场景1：默认点击文字展开菜单</p>
+    <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <p>场景2：点击展开按钮才可展开菜单</p>
+    <tiny-tree-menu :data="treeData" :expand-on-click-node="false"></tiny-tree-menu>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {
@@ -173,3 +178,14 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/filter-node-method-composition-api.vue

@@ -2,14 +2,14 @@
   <tiny-tree-menu :data="treeData" :filter-node-method="filterNode"></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([
   {
     id: 100,
-    label: '首页11111111111111111111111111111111111111111111111111'
+    label: '首页'
   },
   {
     id: 200,
@@ -32,10 +32,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -165,8 +161,10 @@ const treeData = ref([
   }
 ])
 
-function filterNode(value, data) {
-  if (!value) return true
+const filterNode = (value, data) => {
+  if (!value) {
+    return true
+  }
   return data.label === value
 }
 </script>

examples/sites/demos/pc/app/tree-menu/filter-node-method.vue

@@ -2,7 +2,7 @@
   <tiny-tree-menu :data="treeData" :filter-node-method="filterNode"></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {
@@ -14,7 +14,7 @@ export default {
       treeData: [
         {
           id: 100,
-          label: '首页11111111111111111111111111111111111111111111111111'
+          label: '首页'
         },
         {
           id: 200,
@@ -173,7 +173,9 @@ export default {
   },
   methods: {
     filterNode(value, data) {
-      if (!value) return true
+      if (!value) {
+        return true
+      }
       return data.label === value
     }
   }

examples/sites/demos/pc/app/tree-menu/get-menu-data-sync.spec.ts

@@ -1,16 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('get-menu-data-sync 同步获取数据', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#get-menu-data-sync')
-
-  await page.getByTitle('指南', { exact: true }).click()
-  await expect(page.getByTitle('引入组件')).toBeVisible()
-  await expect(page.getByRole('treeitem', { name: '按需引入' })).not.toBeVisible()
-  await page.getByTitle('引入组件').click()
-  await expect(page.getByRole('treeitem', { name: '按需引入' }).first()).toBeVisible()
-  await page.getByTitle('指南', { exact: true }).click()
-  await expect(page.getByTitle('按需引入')).not.toBeVisible()
-  await expect(page.getByTitle('组件', { exact: true })).toBeVisible()
-  await expect(page.getByTitle('规范')).toBeVisible()
-})

examples/sites/demos/pc/app/tree-menu/indent-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-tree-menu :data="treeData" :indent="50"></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
@@ -32,10 +32,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',

examples/sites/demos/pc/app/tree-menu/indent.vue

@@ -2,7 +2,7 @@
   <tiny-tree-menu :data="treeData" :indent="50"></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/tree-menu/lazy-load-composition-api.vue

@@ -1,10 +1,8 @@
 <template>
-  <div>
-    <tiny-tree-menu :load="loadNode" lazy></tiny-tree-menu>
-  </div>
+  <tiny-tree-menu lazy :load="loadNode"></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 

examples/sites/demos/pc/app/tree-menu/lazy-load.vue

@@ -1,10 +1,8 @@
 <template>
-  <div>
-    <tiny-tree-menu :load="loadNode" lazy></tiny-tree-menu>
-  </div>
+  <tiny-tree-menu lazy :load="loadNode"></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/tree-menu/menu-collapsible-composition-api.vue

@@ -1,12 +1,11 @@
 <template>
-  <tiny-tree-menu :data="treeData" :menu-collapsible="menuCollapsible"></tiny-tree-menu>
+  <tiny-tree-menu :data="treeData" menu-collapsible></tiny-tree-menu>
 </template>
 
 <script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
-const menuCollapsible = ref(true)
 const treeData = ref([
   {
     id: 100,
@@ -33,10 +32,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',

examples/sites/demos/pc/app/tree-menu/menu-collapsible.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-tree-menu :data="treeData" :menu-collapsible="menuCollapsible"></tiny-tree-menu>
+  <tiny-tree-menu :data="treeData" menu-collapsible></tiny-tree-menu>
 </template>
 
 <script>
@@ -11,7 +11,6 @@ export default {
   },
   data() {
     return {
-      menuCollapsible: true,
       treeData: [
         {
           id: 100,
@@ -20,6 +19,7 @@ export default {
         {
           id: 200,
           label: '指南',
+
           children: [
             {
               id: 201,

examples/sites/demos/pc/app/tree-menu/only-check-children-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-tree-menu :get-menu-data-sync="getMenuDataSync"></tiny-tree-menu>
+  <tiny-tree-menu :data="treeData" only-check-children @node-click="handleNodeClick"></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
@@ -32,10 +32,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -113,7 +109,7 @@ const treeData = ref([
   }
 ])
 
-function getMenuDataSync() {
-  return treeData.value
+const handleNodeClick = (data) => {
+  Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
 }
 </script>

examples/sites/demos/pc/app/tree-menu/only-check-children.spec.ts

@@ -0,0 +1,5 @@
+import { test, expect } from '@playwright/test'
+
+test('父级只展开不跳转', async ({ page }) => {
+  
+})

examples/sites/demos/pc/app/tree-menu/only-check-children.vue

@@ -1,9 +1,9 @@
 <template>
-  <tiny-tree-menu :get-menu-data-sync="getMenuDataSync"></tiny-tree-menu>
+  <tiny-tree-menu :data="treeData" only-check-children @node-click="handleNodeClick"></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
-import { TreeMenu } from '@opentiny/vue'
+<script>
+import { TreeMenu, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -120,8 +120,8 @@ export default {
     }
   },
   methods: {
-    getMenuDataSync() {
-      return this.treeData
+    handleNodeClick(data) {
+      Modal.message({ message: `节点-${data.label}被点击了`, status: 'info' })
     }
   }
 }

examples/sites/demos/pc/app/tree-menu/props-composition-api.vue

@@ -0,0 +1,129 @@
+<template>
+  <tiny-tree-menu :data="treeData" :props="mapField"></tiny-tree-menu>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+
+const mapField = reactive({
+  label: 'name',
+  children: 'zones'
+})
+
+const treeData = reactive([
+  {
+    id: 100,
+    name: '首页'
+  },
+  {
+    id: 200,
+    name: '指南',
+
+    zones: [
+      {
+        id: 201,
+        name: '引入组件',
+        zones: [
+          { id: 20101, name: '按需引入' },
+          { id: 20102, name: '完整引入' }
+        ]
+      },
+      { id: 202, name: '后端适配器' },
+      { id: 203, name: '服务代理' },
+      { id: 204, name: '构建部署' }
+    ]
+  },
+  {
+    id: 300,
+    name: '组件',
+
+    zones: [
+      {
+        id: 300,
+        name: '组件'
+      },
+      {
+        id: 301,
+        name: '表单组件',
+        zones: [
+          {
+            id: 30101,
+            name: 'Button 按钮',
+            url: 'button'
+          },
+          { id: 30102, name: 'Datepicker 日期', url: '' },
+          { id: 30103, name: 'Dropdown 下拉框', url: '' },
+          { id: 30104, name: 'DropTimes 下拉时间', url: '' },
+          { id: 30105, name: 'Input 输入框', url: '' }
+        ]
+      },
+      { id: 302, name: '数据组件' },
+      { id: 303, name: '导航组件' },
+      { id: 304, name: '业务组件' }
+    ]
+  },
+  {
+    id: 400,
+    name: '教程',
+    zones: [
+      {
+        id: 401,
+        name: '页面布局',
+        zones: [
+          { id: 40101, name: '添加标签页', url: '' },
+          { id: 40102, name: '标签页配置', url: '' }
+        ]
+      },
+      {
+        id: 402,
+        name: '查询功能',
+        zones: [
+          { id: 40201, name: '添加查询页面', url: '' },
+          { id: 40202, name: '列表属性配置', url: '' },
+          { id: 40203, name: '通讯录查询', url: '' }
+        ]
+      },
+      {
+        id: 403,
+        name: '新增功能',
+        zones: [
+          { id: 40301, name: '表单新增功能', url: '' },
+          { id: 40302, name: '表单数据验证', url: '' }
+        ]
+      },
+      {
+        id: 404,
+        name: '编辑功能',
+        zones: [
+          { id: 40401, name: '开启编辑功能', url: '' },
+          { id: 40402, name: '保存表格数据', url: '' }
+        ]
+      }
+    ]
+  },
+  {
+    id: 500,
+    name: '规范'
+  },
+  {
+    id: 600,
+    name: '性能'
+  },
+  {
+    id: 700,
+    name: '案例'
+  },
+  {
+    id: 800,
+    name: '更新日志'
+  }
+])
+</script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/props.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test'
+
+
+test('字段映射', async ({ page }) => {
+ 
+})

examples/sites/demos/pc/app/tree-menu/props.vue

@@ -0,0 +1,129 @@
+<template>
+  <tiny-tree-menu :data="treeData" :props="mapField"></tiny-tree-menu>
+</template>
+
+<script>
+import { TreeMenu, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyTreeMenu: TreeMenu
+  },
+  data() {
+    return {
+      mapField: {
+        label: 'name',
+        children: 'zones'
+      },
+      treeData: [
+        {
+          id: 100,
+          name: '首页'
+        },
+        {
+          id: 200,
+          name: '指南',
+
+          zones: [
+            {
+              id: 201,
+              name: '引入组件',
+              zones: [
+                { id: 20101, name: '按需引入' },
+                { id: 20102, name: '完整引入' }
+              ]
+            },
+            { id: 202, name: '后端适配器' },
+            { id: 203, name: '服务代理' },
+            { id: 204, name: '构建部署' }
+          ]
+        },
+        {
+          id: 300,
+          name: '组件',
+
+          zones: [
+            {
+              id: 300,
+              name: '组件'
+            },
+            {
+              id: 301,
+              name: '表单组件',
+              zones: [
+                {
+                  id: 30101,
+                  name: 'Button 按钮',
+                  url: 'button'
+                },
+                { id: 30102, name: 'Datepicker 日期', url: '' },
+                { id: 30103, name: 'Dropdown 下拉框', url: '' },
+                { id: 30104, name: 'DropTimes 下拉时间', url: '' },
+                { id: 30105, name: 'Input 输入框', url: '' }
+              ]
+            },
+            { id: 302, name: '数据组件' },
+            { id: 303, name: '导航组件' },
+            { id: 304, name: '业务组件' }
+          ]
+        },
+        {
+          id: 400,
+          name: '教程',
+          zones: [
+            {
+              id: 401,
+              name: '页面布局',
+              zones: [
+                { id: 40101, name: '添加标签页', url: '' },
+                { id: 40102, name: '标签页配置', url: '' }
+              ]
+            },
+            {
+              id: 402,
+              name: '查询功能',
+              zones: [
+                { id: 40201, name: '添加查询页面', url: '' },
+                { id: 40202, name: '列表属性配置', url: '' },
+                { id: 40203, name: '通讯录查询', url: '' }
+              ]
+            },
+            {
+              id: 403,
+              name: '新增功能',
+              zones: [
+                { id: 40301, name: '表单新增功能', url: '' },
+                { id: 40302, name: '表单数据验证', url: '' }
+              ]
+            },
+            {
+              id: 404,
+              name: '编辑功能',
+              zones: [
+                { id: 40401, name: '开启编辑功能', url: '' },
+                { id: 40402, name: '保存表格数据', url: '' }
+              ]
+            }
+          ]
+        },
+        {
+          id: 500,
+          name: '规范'
+        },
+        {
+          id: 600,
+          name: '性能'
+        },
+        {
+          id: 700,
+          name: '案例'
+        },
+        {
+          id: 800,
+          name: '更新日志'
+        }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/tree-menu/search-icon-composition-api.vue

@@ -1,10 +0,0 @@
-<template>
-  <tiny-tree-menu :search-icon="IconCalendar"></tiny-tree-menu>
-</template>
-
-<script setup lang="jsx">
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
-import { iconCalendar } from '@opentiny/vue-icon'
-
-const IconCalendar = iconCalendar()
-</script>

examples/sites/demos/pc/app/tree-menu/search-icon.vue

@@ -1,19 +0,0 @@
-<template>
-  <tiny-tree-menu :search-icon="IconCalendar"></tiny-tree-menu>
-</template>
-
-<script lang="jsx">
-import { TreeMenu } from '@opentiny/vue'
-import { IconCalendar } from '@opentiny/vue-icon'
-
-export default {
-  components: {
-    TinyTreeMenu: TreeMenu
-  },
-  data() {
-    return {
-      IconCalendar: IconCalendar()
-    }
-  }
-}
-</script>

examples/sites/demos/pc/app/tree-menu/show-checkbox-composition-api.vue

@@ -1,11 +1,17 @@
 <template>
-  <tiny-tree-menu :data="treeData" :show-checkbox="true"></tiny-tree-menu>
+  <div>
+    <p>场景1：节点可勾选 + 默认选中</p>
+    <tiny-tree-menu node-key="id" show-checkbox :data="treeData" :default-checked-keys="expandeArr"></tiny-tree-menu>
+    <p>场景2：节点可勾选 + 父子级不相关联</p>
+    <tiny-tree-menu :data="treeData" show-checkbox check-strictly></tiny-tree-menu>
+  </div>
 </template>
 
-<script setup lang="jsx">
-import { ref } from 'vue'
+<script setup>
+import { ref, reactive } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
+const expandeArr = reactive([100])
 const treeData = ref([
   {
     id: 100,
@@ -32,10 +38,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -165,3 +167,14 @@ const treeData = ref([
   }
 ])
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/show-checkbox.spec.ts

@@ -39,3 +39,30 @@ test('节点可勾选', async ({ page }) => {
     treeMenu.getByRole('treeitem', { name: '引入组件' }).first().locator('.tiny-checkbox__input').first()
   ).not.toHaveClass(/is-indeterminate/)
 })
+
+
+test('父子级不相关联', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#check-strictly')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  const checkedClass = /is-checked/
+
+  // 父节点勾选不会改变子节点
+  await treeMenu.getByRole('treeitem', { name: '指南' }).locator('svg').first().click()
+  await expect(treeMenu.getByRole('treeitem', { name: '引入组件' }).locator('svg').first()).not.toHaveClass(
+    checkedClass
+  )
+  await expect(page.getByRole('treeitem', { name: '构建部署' }).first().locator('span').nth(1)).not.toHaveClass(
+    checkedClass
+  )
+
+  // 子节点勾选不改变父节点
+  await page.getByRole('treeitem', { name: '引入组件' }).first().click()
+  await page.getByRole('treeitem', { name: '按需引入' }).locator('span').nth(2).click()
+  await page.getByRole('treeitem', { name: '完整引入' }).locator('span').nth(2).click()
+  await expect(page.getByRole('treeitem', { name: '引入组件' }).locator('span').nth(1)).not.toHaveClass(checkedClass)
+})
+
+test('可勾选节点默认选中', async ({ page }) => {
+})

examples/sites/demos/pc/app/tree-menu/show-checkbox.vue

@@ -1,8 +1,13 @@
 <template>
-  <tiny-tree-menu :data="treeData" :show-checkbox="true"></tiny-tree-menu>
+  <div>
+    <p>场景1：节点可勾选 + 默认选中</p>
+    <tiny-tree-menu node-key="id" show-checkbox :data="treeData" :default-checked-keys="expandeArr"></tiny-tree-menu>
+    <p>场景2：节点可勾选 + 父子级不相关联</p>
+    <tiny-tree-menu :data="treeData" show-checkbox check-strictly></tiny-tree-menu>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {
@@ -12,6 +17,7 @@ export default {
 
   data() {
     return {
+      expandeArr: [100],
       treeData: [
         {
           id: 100,
@@ -38,10 +44,6 @@ export default {
           id: 300,
           label: '组件',
           children: [
-            {
-              id: 300,
-              label: '组件'
-            },
             {
               id: 301,
               label: '表单组件',
@@ -174,3 +176,14 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/show-expand-composition-api.vue

@@ -1,19 +1,22 @@
 <template>
-  <tiny-tree-menu :data="treeData" :show-checkbox="true" :check-strictly="true"></tiny-tree-menu>
+  <tiny-tree-menu :data="treeData" show-expand></tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
-import { ref } from 'vue'
+<script setup>
+import { reactive } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { iconApp, iconExpressSearch, iconTotal, iconUnfreeze, iconFile } from '@opentiny/vue-icon'
 
-const treeData = ref([
+const treeData = reactive([
   {
     id: 100,
-    label: '首页'
+    label: '首页',
+    customIcon: iconApp()
   },
   {
     id: 200,
     label: '指南',
+    customIcon: iconExpressSearch(),
     children: [
       {
         id: 201,
@@ -31,6 +34,7 @@ const treeData = ref([
   {
     id: 300,
     label: '组件',
+    customIcon: iconTotal(),
     children: [
       {
         id: 300,
@@ -59,6 +63,7 @@ const treeData = ref([
   {
     id: 400,
     label: '教程',
+    customIcon: iconUnfreeze(),
     children: [
       {
         id: 401,
@@ -97,19 +102,23 @@ const treeData = ref([
   },
   {
     id: 500,
-    label: '规范'
+    label: '规范',
+    customIcon: iconFile()
   },
   {
     id: 600,
-    label: '性能'
+    label: '性能',
+    customIcon: iconFile()
   },
   {
     id: 700,
-    label: '案例'
+    label: '案例',
+    customIcon: iconFile()
   },
   {
     id: 800,
-    label: '更新日志'
+    label: '更新日志',
+    customIcon: iconFile()
   }
 ])
 </script>

examples/sites/demos/pc/app/tree-menu/show-expand.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+
+test('底部一键展开', async ({ page }) => {
+ 
+})
+
+test('自定义节点图标', async ({ page }) => {
+ 
+})

examples/sites/demos/pc/app/tree-menu/show-expand.vue

@@ -0,0 +1,132 @@
+<template>
+  <tiny-tree-menu :data="treeData" show-expand></tiny-tree-menu>
+</template>
+
+<script>
+import { TreeMenu } from '@opentiny/vue'
+import { iconApp, iconExpressSearch, iconTotal, iconUnfreeze, iconFile } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyTreeMenu: TreeMenu
+  },
+  data() {
+    return {
+      treeData: [
+        {
+          id: 100,
+          label: '首页',
+          customIcon: iconApp()
+        },
+        {
+          id: 200,
+          label: '指南',
+          customIcon: iconExpressSearch(),
+          children: [
+            {
+              id: 201,
+              label: '引入组件',
+              children: [
+                { id: 20101, label: '按需引入' },
+                { id: 20102, label: '完整引入' }
+              ]
+            },
+            { id: 202, label: '后端适配器' },
+            { id: 203, label: '服务代理' },
+            { id: 204, label: '构建部署' }
+          ]
+        },
+        {
+          id: 300,
+          label: '组件',
+          customIcon: iconTotal(),
+          children: [
+            {
+              id: 300,
+              label: '组件'
+            },
+            {
+              id: 301,
+              label: '表单组件',
+              children: [
+                {
+                  id: 30101,
+                  label: 'Button 按钮',
+                  url: 'button'
+                },
+                { id: 30102, label: 'Datepicker 日期', url: '' },
+                { id: 30103, label: 'Dropdown 下拉框', url: '' },
+                { id: 30104, label: 'DropTimes 下拉时间', url: '' },
+                { id: 30105, label: 'Input 输入框', url: '' }
+              ]
+            },
+            { id: 302, label: '数据组件' },
+            { id: 303, label: '导航组件' },
+            { id: 304, label: '业务组件' }
+          ]
+        },
+        {
+          id: 400,
+          label: '教程',
+          customIcon: iconUnfreeze(),
+          children: [
+            {
+              id: 401,
+              label: '页面布局',
+              children: [
+                { id: 40101, label: '添加标签页', url: '' },
+                { id: 40102, label: '标签页配置', url: '' }
+              ]
+            },
+            {
+              id: 402,
+              label: '查询功能',
+              children: [
+                { id: 40201, label: '添加查询页面', url: '' },
+                { id: 40202, label: '列表属性配置', url: '' },
+                { id: 40203, label: '通讯录查询', url: '' }
+              ]
+            },
+            {
+              id: 403,
+              label: '新增功能',
+              children: [
+                { id: 40301, label: '表单新增功能', url: '' },
+                { id: 40302, label: '表单数据验证', url: '' }
+              ]
+            },
+            {
+              id: 404,
+              label: '编辑功能',
+              children: [
+                { id: 40401, label: '开启编辑功能', url: '' },
+                { id: 40402, label: '保存表格数据', url: '' }
+              ]
+            }
+          ]
+        },
+        {
+          id: 500,
+          label: '规范',
+          customIcon: iconFile()
+        },
+        {
+          id: 600,
+          label: '性能',
+          customIcon: iconFile()
+        },
+        {
+          id: 700,
+          label: '案例',
+          customIcon: iconFile()
+        },
+        {
+          id: 800,
+          label: '更新日志',
+          customIcon: iconFile()
+        }
+      ]
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/tree-menu/show-filter-composition-api.vue

@@ -1,15 +1,20 @@
 <template>
-  <tiny-tree-menu :data="treeData" wrap show-filter show-title></tiny-tree-menu>
+  <div>
+    <p>场景1：默认 可过滤 + 原生 title 属性提示</p>
+    <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <p>场景2：不可过滤 + 不设置原生 title 属性</p>
+    <tiny-tree-menu :data="treeData" :show-filter="false" :show-title="false"></tiny-tree-menu>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 
 const treeData = ref([
   {
     id: 100,
-    label: '首页111111111111111111111111111111111111111'
+    label: '首页'
   },
   {
     id: 200,
@@ -32,10 +37,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -165,3 +166,14 @@ const treeData = ref([
   }
 ])
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/show-filter.spec.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test'
+
+test('不可搜索不显示 title', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+ 
+})

examples/sites/demos/pc/app/tree-menu/show-filter.vue

@@ -1,8 +1,13 @@
 <template>
-  <tiny-tree-menu :data="treeData" wrap show-filter show-title></tiny-tree-menu>
+  <div>
+    <p>场景1：默认 可过滤 + 原生 title 属性提示</p>
+    <tiny-tree-menu :data="treeData"></tiny-tree-menu>
+    <p>场景2：不可过滤 + 不设置原生 title 属性</p>
+    <tiny-tree-menu :data="treeData" :show-filter="false" :show-title="false"></tiny-tree-menu>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {
@@ -14,7 +19,7 @@ export default {
       treeData: [
         {
           id: 100,
-          label: '首页111111111111111111111111111111111111111'
+          label: '首页'
         },
         {
           id: 200,
@@ -37,10 +42,6 @@ export default {
           id: 300,
           label: '组件',
           children: [
-            {
-              id: 300,
-              label: '组件'
-            },
             {
               id: 301,
               label: '表单组件',
@@ -173,3 +174,14 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/show-number-composition-api.vue

@@ -0,0 +1,135 @@
+<template>
+  <tiny-tree-menu
+    :data="treeData"
+    default-expand-all
+    show-number
+    :collapsible="false"
+    :node-height="32"
+  ></tiny-tree-menu>
+</template>
+
+<script setup>
+import { reactive } from 'vue'
+import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+
+const treeData = reactive([
+  {
+    id: 100,
+    label: '首页',
+    number: 0
+  },
+  {
+    id: 200,
+    label: '指南',
+    number: 9999,
+    children: [
+      {
+        id: 201,
+        label: '引入组件',
+        children: [
+          { id: 20101, label: '按需引入', number: '9.9k' },
+          { id: 20102, label: '完整引入', number: 1 }
+        ]
+      },
+      { id: 202, label: '后端适配器', number: 0 },
+      { id: 203, label: '服务代理' },
+      { id: 204, label: '构建部署' }
+    ]
+  },
+  {
+    id: 300,
+    label: '组件',
+    number: 8888,
+    children: [
+      {
+        id: 300,
+        label: '组件'
+      },
+      {
+        id: 301,
+        label: '表单组件',
+        children: [
+          {
+            id: 30101,
+            label: 'Button 按钮',
+            url: 'button'
+          },
+          { id: 30102, label: 'Datepicker 日期', url: '' },
+          { id: 30103, label: 'Dropdown 下拉框', url: '' },
+          { id: 30104, label: 'DropTimes 下拉时间', url: '' },
+          { id: 30105, label: 'Input 输入框', url: '' }
+        ]
+      },
+      { id: 302, label: '数据组件' },
+      { id: 303, label: '导航组件' },
+      { id: 304, label: '业务组件' }
+    ]
+  },
+  {
+    id: 400,
+    label: '教程',
+    children: [
+      {
+        id: 401,
+        label: '页面布局',
+        children: [
+          { id: 40101, label: '添加标签页', url: '' },
+          { id: 40102, label: '标签页配置', url: '' }
+        ]
+      },
+      {
+        id: 402,
+        label: '查询功能',
+        children: [
+          { id: 40201, label: '添加查询页面', url: '' },
+          { id: 40202, label: '列表属性配置', url: '' },
+          { id: 40203, label: '通讯录查询', url: '' }
+        ]
+      },
+      {
+        id: 403,
+        label: '新增功能',
+        children: [
+          { id: 40301, label: '表单新增功能', url: '' },
+          { id: 40302, label: '表单数据验证', url: '' }
+        ]
+      },
+      {
+        id: 404,
+        label: '编辑功能',
+        children: [
+          { id: 40401, label: '开启编辑功能', url: '' },
+          { id: 40402, label: '保存表格数据', url: '' }
+        ]
+      }
+    ]
+  },
+  {
+    id: 500,
+    label: '规范'
+  },
+  {
+    id: 600,
+    label: '性能'
+  },
+  {
+    id: 700,
+    label: '案例'
+  },
+  {
+    id: 800,
+    label: '更新日志'
+  }
+])
+</script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/show-number.spec.ts

@@ -0,0 +1,4 @@
+import { test, expect } from '@playwright/test'
+
+test('显示数字', async ({ page }) => {
+})

examples/sites/demos/pc/app/tree-menu/show-number.vue

@@ -1,8 +1,14 @@
 <template>
-  <tiny-tree-menu :data="treeData" :show-checkbox="true" :check-strictly="true"></tiny-tree-menu>
+  <tiny-tree-menu
+    :data="treeData"
+    default-expand-all
+    show-number
+    :collapsible="false"
+    :node-height="32"
+  ></tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 
 export default {
@@ -14,21 +20,23 @@ export default {
       treeData: [
         {
           id: 100,
-          label: '首页'
+          label: '首页',
+          number: 0
         },
         {
           id: 200,
           label: '指南',
+          number: 9999,
           children: [
             {
               id: 201,
               label: '引入组件',
               children: [
-                { id: 20101, label: '按需引入' },
-                { id: 20102, label: '完整引入' }
+                { id: 20101, label: '按需引入', number: '9.9k' },
+                { id: 20102, label: '完整引入', number: 1 }
               ]
             },
-            { id: 202, label: '后端适配器' },
+            { id: 202, label: '后端适配器', number: 0 },
             { id: 203, label: '服务代理' },
             { id: 204, label: '构建部署' }
           ]
@@ -36,6 +44,7 @@ export default {
         {
           id: 300,
           label: '组件',
+          number: 8888,
           children: [
             {
               id: 300,
@@ -121,3 +130,14 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/text-ellipsis-composition-api.vue

@@ -1,17 +1,20 @@
 <template>
-  <tiny-tree-menu :data="treeData" ellipsis :prefix-icon="IconDoubleRight"></tiny-tree-menu>
+  <div>
+    <p>场景1：文字超长省略显示</p>
+    <tiny-tree-menu :data="treeData" ellipsis></tiny-tree-menu>
+    <p>场景2：文字超长换行显示</p>
+    <tiny-tree-menu :data="treeData" wrap></tiny-tree-menu>
+  </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
-import { iconDoubleRight } from '@opentiny/vue-icon'
 
-const IconDoubleRight = iconDoubleRight()
 const treeData = ref([
   {
     id: 100,
-    label: '首页11111111111111111111111111111111111111111111111111'
+    label: '首页文字超长示例文字超长示例文字超长示例文字超长示例文字超长示例文字超长示例文字超长示例'
   },
   {
     id: 200,
@@ -34,10 +37,6 @@ const treeData = ref([
     id: 300,
     label: '组件',
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件',
@@ -167,3 +166,14 @@ const treeData = ref([
   }
 ])
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/text-ellipsis.spec.ts

@@ -7,3 +7,12 @@ test('文字超长省略显示', async ({ page }) => {
   const treeMenu = page.locator('#preview .tiny-tree-menu')
   await expect(treeMenu.locator('.tiny-tree')).toHaveClass(/tiny-tree-menu__overflow/)
 })
+
+test('文字超长换行显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#text-wrap')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await expect(treeMenu.locator('.tiny-tree')).toHaveClass(/tiny-tree-menu__wrap/)
+})
+

examples/sites/demos/pc/app/tree-menu/text-ellipsis.vue

@@ -1,10 +1,14 @@
 <template>
-  <tiny-tree-menu :data="treeData" ellipsis :prefix-icon="IconDoubleRight"></tiny-tree-menu>
+  <div>
+    <p>场景1：文字超长点点点</p>
+    <tiny-tree-menu :data="treeData" ellipsis></tiny-tree-menu>
+    <p>场景2：文字超长换行</p>
+    <tiny-tree-menu :data="treeData" wrap></tiny-tree-menu>
+  </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
-import { IconDoubleRight } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -12,11 +16,10 @@ export default {
   },
   data() {
     return {
-      IconDoubleRight: IconDoubleRight(),
       treeData: [
         {
           id: 100,
-          label: '首页11111111111111111111111111111111111111111111111111'
+          label: '首页文字超长示例文字超长示例文字超长示例文字超长示例文字超长示例文字超长示例文字超长示例'
         },
         {
           id: 200,
@@ -175,3 +178,14 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-tree-menu {
+  height: 300px;
+  overflow: auto;
+}
+p {
+  font-size: 14px;
+  line-height: 1.5;
+}
+</style>

examples/sites/demos/pc/app/tree-menu/text-wrap.spec.ts

@@ -1,9 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('text-wrap 文字超长换行显示', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#text-wrap')
-
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
-  await expect(treeMenu.locator('.tiny-tree')).toHaveClass(/tiny-tree-menu__wrap/)
-})

examples/sites/demos/pc/app/tree-menu/tree-menu-slot-composition-api.vue

@@ -1,15 +1,15 @@
 <template>
   <tiny-tree-menu :data="treeData" class="tree-menu-demo">
     <template #default="slotScope">
-      <component :is="icons[slotScope.data.id]" style="margin-right: 4px; margin-left: -20px"></component>
       <a :target="slotScope.data.target" :class="slotScope.data.class">
         {{ slotScope.data.label }}
       </a>
+      <component v-if="slotScope.data.icon" :is="slotScope.data.icon" class="custom-icon"></component>
     </template>
   </tiny-tree-menu>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
 import { iconApp, iconCustom, iconText, iconTotal } from '@opentiny/vue-icon'
@@ -22,16 +22,18 @@ const icons = ref({
 })
 const treeData = ref([
   {
-    id: 'home',
+    id: 100,
     label: '首页',
     class: 'treeClass',
-    target: '_blank'
+    target: '_blank',
+    icon: iconApp()
   },
   {
-    id: 'guide',
+    id: 200,
     label: '指南',
     class: 'treeNodeClass',
     target: '_self',
+    icon: iconCustom(),
     children: [
       {
         id: 201,
@@ -45,11 +47,8 @@ const treeData = ref([
   {
     id: 'component',
     label: '组件',
+    icon: iconTotal(),
     children: [
-      {
-        id: 300,
-        label: '组件'
-      },
       {
         id: 301,
         label: '表单组件'
@@ -62,6 +61,7 @@ const treeData = ref([
   {
     id: 'book',
     label: '教程',
+    icon: iconText(),
     children: [
       {
         id: 401,
@@ -123,4 +123,7 @@ const treeData = ref([
   color: #333;
   text-decoration: none;
 }
+.custom-icon {
+  margin-left: 8px;
+}
 </style>

examples/sites/demos/pc/app/tree-menu/tree-menu-slot.vue

@@ -1,15 +1,15 @@
 <template>
   <tiny-tree-menu :data="treeData" class="tree-menu-demo">
     <template #default="slotScope">
-      <component :is="icons[slotScope.data.id]" style="margin-right: 4px; margin-left: -20px"></component>
       <a :target="slotScope.data.target" :class="slotScope.data.class">
         {{ slotScope.data.label }}
       </a>
+      <component v-if="slotScope.data.icon" :is="slotScope.data.icon" class="custom-icon"></component>
     </template>
   </tiny-tree-menu>
 </template>
 
-<script lang="jsx">
+<script>
 import { TreeMenu } from '@opentiny/vue'
 import { iconApp, iconCustom, iconText, iconTotal } from '@opentiny/vue-icon'
 
@@ -19,24 +19,20 @@ export default {
   },
   data() {
     return {
-      icons: {
-        home: iconApp(),
-        guide: iconCustom(),
-        book: iconText(),
-        component: iconTotal()
-      },
       treeData: [
         {
-          id: 'home',
+          id: 100,
           label: '首页',
           class: 'treeClass',
-          target: '_blank'
+          target: '_blank',
+          icon: iconApp()
         },
         {
-          id: 'guide',
+          id: 200,
           label: '指南',
           class: 'treeNodeClass',
           target: '_self',
+          icon: iconCustom(),
           children: [
             {
               id: 201,
@@ -48,13 +44,10 @@ export default {
           ]
         },
         {
-          id: 'component',
+          id: '300',
           label: '组件',
+          icon: iconTotal(),
           children: [
-            {
-              id: 300,
-              label: '组件'
-            },
             {
               id: 301,
               label: '表单组件'
@@ -67,6 +60,7 @@ export default {
         {
           id: 'book',
           label: '教程',
+          icon: iconText(),
           children: [
             {
               id: 401,
@@ -131,4 +125,7 @@ export default {
   color: #333;
   text-decoration: none;
 }
+.custom-icon {
+  margin-left: 8px;
+}
 </style>

examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.cn.md

@@ -4,4 +4,4 @@ title: TreeMenu 树型菜单
 
 # TreeMenu 树型菜单
 
-<div>以树形方式显示的菜单，适用于版型定制的一种组件。</div>
+> 以树形方式显示的菜单，适用于版型定制的一种组件。

examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.en.md

@@ -4,4 +4,4 @@ title: TreeMenu
 
 # TreeMenu
 
-<div>The menu is displayed in tree mode and is applicable to a component of version customization.</div>
+> The menu is displayed in tree mode and is applicable to a component of version customization.