@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/tree/lazy-composition-api.vue

@@ -1,15 +1,15 @@
 <template>
   <div>
-    <tiny-tree lazy :load="load" :afterLoad="afterLoad" @load-data="loadedData"></tiny-tree>
+    <tiny-tree lazy :load="load" :after-load="afterLoad" @load-data="loadedData"></tiny-tree>
   </div>
 </template>
 
 <script setup lang="jsx">
-import { ref } from 'vue'
 import { Tree as TinyTree } from '@opentiny/vue'
 
+// node为点击的节点， resolve为回调函数，用于异步返回下层节点的数据
 function load(node, resolve) {
-  // node为点击的节点， resolve为回调函数，用于异步返回下层节点的数据
+  // eslint-disable-next-line no-console
   console.log('即将加载节点下级数据：', node)
 
   // 通过 level =0 来识别第一次加载
@@ -37,9 +37,11 @@ function load(node, resolve) {
   }
 }
 function afterLoad(data) {
+  // eslint-disable-next-line no-console
   console.log('afterLoad属性触发：', data)
 }
 function loadedData(data) {
+  // eslint-disable-next-line no-console
   console.log('load-data 事件触发：', data)
 }
 </script>

package/demos/pc/app/tree/lazy.spec.ts

@@ -1,23 +1,15 @@
 import { test, expect } from '@playwright/test'
 
-test('tree组件基本使用', async ({ page }) => {
+test('懒加载', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#basic-usage')
+  await page.goto('tree#lazy')
 
-  const tree = page.locator('#preview .tiny-tree')
-  await tree.getByText('一级 1').click()
-  await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
-  await page.getByText('二级 1-1').click()
-  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
-  await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
-  await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
-  await page
-    .getByRole('treeitem', { name: '一级 1' })
-    .first()
-    .locator('div')
-    .filter({ hasText: '一级 1' })
-    .first()
-    .click()
-  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
-  await page.locator('.tiny-modal__box').first().click()
+  const preview = page.locator('.pc-demo-container')
+  const tree = preview.locator('.tiny-tree').nth(0)
+  const node2 = tree.getByText('#数据 2')
+
+  await expect(node2).toHaveCount(1)
+  await node2.click()
+  await page.waitForTimeout(20)
+  await expect(node2).toHaveCount(6)
 })

package/demos/pc/app/tree/lazy.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-tree lazy :load="load" :afterLoad="afterLoad" @load-data="loadedData"></tiny-tree>
+    <tiny-tree lazy :load="load" :after-load="afterLoad" @load-data="loadedData"></tiny-tree>
   </div>
 </template>
 
@@ -12,8 +12,9 @@ export default {
     TinyTree: Tree
   },
   methods: {
+    // node为点击的节点， resolve为回调函数，用于异步返回下层节点的数据
     load(node, resolve) {
-      // node为点击的节点， resolve为回调函数，用于异步返回下层节点的数据
+      // eslint-disable-next-line no-console
       console.log('即将加载节点下级数据：', node)
 
       // 通过 level =0 来识别第一次加载
@@ -41,9 +42,11 @@ export default {
       }
     },
     afterLoad(data) {
+      // eslint-disable-next-line no-console
       console.log('afterLoad属性触发：', data)
     },
     loadedData(data) {
+      // eslint-disable-next-line no-console
       console.log('load-data 事件触发：', data)
     }
   }

package/demos/pc/app/tree/node-hl.spec.ts

@@ -1,23 +1,32 @@
 import { test, expect } from '@playwright/test'
 
-test('tree组件基本使用', async ({ page }) => {
+test('节点选择与高亮', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#basic-usage')
+  await page.goto('tree#node-hl')
 
-  const tree = page.locator('#preview .tiny-tree')
-  await tree.getByText('一级 1').click()
-  await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
-  await page.getByText('二级 1-1').click()
-  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
-  await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
-  await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
-  await page
-    .getByRole('treeitem', { name: '一级 1' })
-    .first()
-    .locator('div')
-    .filter({ hasText: '一级 1' })
-    .first()
-    .click()
-  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
-  await page.locator('.tiny-modal__box').first().click()
+  const preview = page.locator('.pc-demo-container')
+  const tree = preview.locator('.tiny-tree')
+  const node = tree.getByText('数据 1-1-1')
+  const currNode = tree.locator('.is-current')
+  const button = preview.getByText('手动高亮节点')
+
+  await expect(node).toHaveCount(1)
+
+  // 测试点击后，打印事件
+  const values = [] as string[]
+  page.on('console', async (msg) => {
+    for (const arg of msg.args()) {
+      values.push(await arg.jsonValue())
+    }
+  })
+  await node.click()
+  await page.waitForTimeout(50)
+
+  expect(values.length).toBe(2)
+  expect(values[0].startsWith('当前高亮节点')).toBeTruthy()
+
+  // 测试自动点击
+  await button.click()
+  await page.waitForTimeout(50)
+  await expect(currNode.getByText('数据 2-1')).toHaveCount(1)
 })

package/demos/pc/app/tree/node-op-composition-api.vue

@@ -7,7 +7,13 @@
       <tiny-button @click="updateKeyChildren">更新子节点</tiny-button>
       <tiny-button @click="remove">删除当前节点</tiny-button>
     </div>
-    <tiny-tree ref="treeRef" :data="data" node-key="id" default-expand-all></tiny-tree>
+    <tiny-tree
+      ref="treeRef"
+      :data="data"
+      node-key="id"
+      default-expand-all
+      :current-node-key="currentNodeKey"
+    ></tiny-tree>
   </div>
 </template>
 
@@ -37,29 +43,29 @@ const data = ref([
     children: [{ id: '3-1', label: '数据 3-1' }]
   }
 ])
-
+const currentNodeKey = ref('1-1')
 function insertBefore() {
   const currentKey = treeRef.value.getCurrentKey()
 
-  treeRef.value.insertBefore({ id: id, label: 'insertBefore ' + id }, currentKey)
+  treeRef.value.insertBefore({ id, label: 'insertBefore ' + id }, currentKey)
   id++
 }
 
 function insertAfter() {
   const currentKey = treeRef.value.getCurrentKey()
-  treeRef.value.insertAfter({ id: id, label: 'insertAfter ' + id }, currentKey)
+  treeRef.value.insertAfter({ id, label: 'insertAfter ' + id }, currentKey)
   id++
 }
 function append() {
   const currentKey = treeRef.value.getCurrentKey()
-  treeRef.value.append({ id: id, label: 'append ' + id }, currentKey)
+  treeRef.value.append({ id, label: 'append ' + id }, currentKey)
 
   id++
 }
 function updateKeyChildren() {
   const currentKey = treeRef.value.getCurrentKey()
 
-  treeRef.value.updateKeyChildren(currentKey, [{ id: id, label: 'update ' + id }])
+  treeRef.value.updateKeyChildren(currentKey, [{ id, label: 'update ' + id }])
   id++
 }
 function remove() {

package/demos/pc/app/tree/node-op.spec.ts

@@ -1,23 +1,36 @@
 import { test, expect } from '@playwright/test'
 
-test('tree组件基本使用', async ({ page }) => {
+test('节点操作', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#basic-usage')
-
-  const tree = page.locator('#preview .tiny-tree')
-  await tree.getByText('一级 1').click()
-  await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
-  await page.getByText('二级 1-1').click()
-  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
-  await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
-  await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
-  await page
-    .getByRole('treeitem', { name: '一级 1' })
-    .first()
-    .locator('div')
-    .filter({ hasText: '一级 1' })
-    .first()
-    .click()
-  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
-  await page.locator('.tiny-modal__box').first().click()
+  await page.goto('tree#node-op')
+
+  const preview = page.locator('.pc-demo-container')
+  const tree = preview.locator('.tiny-tree')
+
+  const insertBefore = preview.getByText('添加前节点')
+  const insertAfter = preview.getByText('添加后节点')
+  const append = preview.getByText('添加子节点')
+  const updateKeyChildren = preview.getByText('更新子节点')
+  const remove = preview.getByText('删除当前节点')
+
+  await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
+
+  await insertBefore.click()
+  await expect(tree.getByText('insertBefore 1000')).toHaveCount(1)
+  await page.waitForTimeout(20)
+
+  await insertAfter.click()
+  await expect(tree.getByText('insertAfter 1001')).toHaveCount(1)
+  await page.waitForTimeout(20)
+
+  await append.click()
+  await expect(tree.getByText('append 1002')).toHaveCount(1)
+  await page.waitForTimeout(20)
+
+  await updateKeyChildren.click()
+  await expect(tree.getByText('update 1003')).toHaveCount(1)
+  await page.waitForTimeout(20)
+
+  await remove.click()
+  await expect(tree.getByText('数据 1-1')).toHaveCount(0)
 })

package/demos/pc/app/tree/other.spec.ts

@@ -1,23 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('tree组件基本使用', async ({ page }) => {
+test('其它', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#basic-usage')
+  await page.goto('tree#other')
 
-  const tree = page.locator('#preview .tiny-tree')
-  await tree.getByText('一级 1').click()
-  await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
-  await page.getByText('二级 1-1').click()
-  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
-  await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
-  await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
-  await page
-    .getByRole('treeitem', { name: '一级 1' })
-    .first()
-    .locator('div')
-    .filter({ hasText: '一级 1' })
-    .first()
-    .click()
-  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
-  await page.locator('.tiny-modal__box').first().click()
+  const tree = page.locator('.pc-demo-container')
+  await expect(tree.getByText('数据 1')).toHaveCount(1)
+  await expect(tree.getByText('同时勾选下级')).toHaveCount(1)
 })

package/demos/pc/app/tree/props.spec.ts

@@ -1,23 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('tree组件基本使用', async ({ page }) => {
+test('属性', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#basic-usage')
+  await page.goto('tree#props')
 
-  const tree = page.locator('#preview .tiny-tree')
-  await tree.getByText('一级 1').click()
-  await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
-  await page.getByText('二级 1-1').click()
-  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
-  await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
-  await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
-  await page
-    .getByRole('treeitem', { name: '一级 1' })
-    .first()
-    .locator('div')
-    .filter({ hasText: '一级 1' })
-    .first()
-    .click()
-  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
-  await page.locator('.tiny-modal__box').first().click()
+  const tree = page.locator('.pc-demo-container')
+  await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
+
+  // 测试disabled
+  await expect(tree.getByText('数据 2-2')).toHaveCSS('color', 'rgb(173, 176, 184)')
 })

package/demos/pc/app/tree/radio-composition-api.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable unused-imports/no-unused-vars -->
 <template>
   <div>
     <div class="node-tip">在开发者控制台中查看它的打印信息：</div>
@@ -22,6 +23,7 @@ import { ref } from 'vue'
 import { Tree as TinyTree, Button as TinyButton } from '@opentiny/vue'
 
 const treeRef = ref()
+const defaultRadioKey = ref(['1-1'])
 const data = ref([
   {
     id: '1',
@@ -44,8 +46,6 @@ const data = ref([
 ])
 
 function getChecks() {
-  const currentKey = treeRef.value.getCurrentKey()
-
   // 查询勾选的值
   const checkedKeys = treeRef.value.getCheckedKeys()
   // 查询勾选叶子的值
@@ -59,6 +59,7 @@ function getChecks() {
   // 查询半选的节点数据
   const checkedHalfNodes = treeRef.value.getHalfCheckedNodes()
 
+  // eslint-disable-next-line no-console
   console.log('当前组件的勾选状态为： ', treeRef.value, {
     checkedKeys,
     checkedKeysOnlyLeaf,
@@ -69,12 +70,13 @@ function getChecks() {
   })
 }
 function setCurrentRadio() {
-  this.defaultRadioKey = ['3-1']
-  this.$refs.treeRef.setCurrentRadio()
+  defaultRadioKey.value = ['3-1']
+  treeRef.value.setCurrentRadio()
 }
 
 function checkChange(data, checked, indeterminate) {
-  console.log('checkChange事件：', arguments)
+  // eslint-disable-next-line no-console
+  console.log('checkChange事件：', { data, checked, indeterminate })
 }
 </script>
 

package/demos/pc/app/tree/radio.spec.ts

@@ -1,23 +1,15 @@
 import { test, expect } from '@playwright/test'
 
-test('tree组件基本使用', async ({ page }) => {
+test('单选', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#basic-usage')
+  await page.goto('tree#radio')
 
-  const tree = page.locator('#preview .tiny-tree')
-  await tree.getByText('一级 1').click()
-  await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
-  await page.getByText('二级 1-1').click()
-  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
-  await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
-  await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
-  await page
-    .getByRole('treeitem', { name: '一级 1' })
-    .first()
-    .locator('div')
-    .filter({ hasText: '一级 1' })
-    .first()
-    .click()
-  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
-  await page.locator('.tiny-modal__box').first().click()
+  const preview = page.locator('.pc-demo-container')
+  const tree = preview.locator('.tiny-tree').nth(0)
+  const treeChecked = tree.locator('label.is-checked')
+  const btn = preview.getByText('勾选指定节点')
+
+  await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
+  await expect(treeChecked).toHaveCount(1)
+  await btn.click()
 })

package/demos/pc/app/tree/radio.vue

@@ -52,8 +52,6 @@ export default {
   },
   methods: {
     getChecks() {
-      const currentKey = this.$refs.treeRef.getCurrentKey()
-
       // 查询勾选的值
       const checkedKeys = this.$refs.treeRef.getCheckedKeys()
       // 查询勾选叶子的值
@@ -67,6 +65,7 @@ export default {
       // 查询半选的节点数据
       const checkedHalfNodes = this.$refs.treeRef.getHalfCheckedNodes()
 
+      // eslint-disable-next-line no-console
       console.log('当前组件的勾选状态为： ', this.$refs.treeRef, {
         checkedKeys,
         checkedKeysOnlyLeaf,
@@ -81,7 +80,8 @@ export default {
       this.$refs.treeRef.setCurrentRadio()
     },
     checkChange(data, checked, indeterminate) {
-      console.log('checkChange事件：', arguments)
+      // eslint-disable-next-line no-console
+      console.log('checkChange事件：', { data, checked, indeterminate })
     }
   }
 }

package/demos/pc/app/tree/slot.spec.ts

@@ -1,23 +1,17 @@
 import { test, expect } from '@playwright/test'
 
-test('tree组件基本使用', async ({ page }) => {
+test('插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree#basic-usage')
+  await page.goto('tree#slot')
 
-  const tree = page.locator('#preview .tiny-tree')
-  await tree.getByText('一级 1').click()
-  await expect(tree.locator('.tiny-tree-node').first()).toHaveClass(/is-current/)
-  await page.getByText('二级 1-1').click()
-  await expect(tree.locator('.tiny-tree-node').nth(1)).toHaveClass(/is-current/)
-  await page.getByRole('treeitem', { name: '三级 1-1-1' }).first().click()
-  await page.getByRole('treeitem', { name: '一级 3' }).locator('.tiny-svg').click()
-  await page
-    .getByRole('treeitem', { name: '一级 1' })
-    .first()
-    .locator('div')
-    .filter({ hasText: '一级 1' })
-    .first()
-    .click()
-  await expect(page.getByRole('treeitem', { name: '一级 1-1', includeHidden: true })).toBeHidden({ timeout: 0 })
-  await page.locator('.tiny-modal__box').first().click()
+  const tree = page.locator('.pc-demo-container')
+  const button = page.getByRole('button', { name: '加载数据' })
+
+  // 测试无数据
+  await expect(tree.getByText('组件无数据')).toHaveCount(1)
+
+  // 测试有数据
+  await button.click()
+  await expect(tree.getByText('数据 1-1-1')).toHaveCount(2)
+  await expect(tree.getByText('新增')).toHaveCount(8)
 })

package/demos/pc/app/tree/webdoc/tree.js

@@ -190,7 +190,7 @@ export default {
           通过 <code> check-strictly </code> 属性，指定是否严格模式。属性默认为 <code> false </code>。严格模式时勾选父节点，子节点自动全选中；子节点全选中，自动勾选父节点。<br>
           通过 <code>  check-on-click-node </code> 属性，点击节点时，同时进行勾选/反勾选节点。 属性默认值为 <code> false </code>, 即点击节点不自动勾选。<br>
           通过 <code> default-checked-keys  </code> 属性，设置默认加载时，自动勾选的节点的keys数组。<br>
-          <div class="tip custom-block">  严格模式下父子不相互影响，勾选父节点时不会自动勾选子节点，适于于某些特殊场景。 </div>
+          <div class="tip custom-block">  严格模式下父子不相互影响，勾选父节点时不会自动勾选子节点，适用于某些特殊场景。 </div>
         `,
         'en-US': `Enable multiple selection by using the <code> show-checkbox </code> property. <br>
           The <code> check-strictly </code> property specifies whether strict mode is used. The default property is <code> false </code>. If you select the parent node, all child nodes are automatically selected. If all child nodes are selected, the parent node is automatically selected. <br>
@@ -212,7 +212,7 @@ export default {
             <code> setChecked </code> 勾选时，可以深度递归勾选(deep:true)，也可以只勾选某节点。<br> 
             建议使用 <code> setCheckedKeys </code>进行勾选，保证父子联动状态统一，详见下面例子。 
           </div>
-          通过 <code> check </code> 事件，监听勾选节点的事件。<br>
+          通过 <code> check </code> 事件，监听组件的勾选事件。<br>
           通过 <code> check-change </code> 事件，监听节点状态变化的回调。<br>
           <div class="tip custom-block"> 
               <code> check </code> 事件触发在点击的元素上， 事件参数为：被点击的节点和勾选后组件的整体勾选状态。<br>
@@ -416,7 +416,7 @@ export default {
     {
       'name': 'tree',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'data',
           'type': 'Array',
@@ -688,14 +688,14 @@ export default {
             'zh-CN': '是否开启节点拖拽',
             'en-US': 'Whether to enable the node dragging function'
           },
-          'demoId': 'node-draggable'
+          'demoId': 'drag'
         },
         {
           'name': 'allow-drag',
           'type': '(node)=>boolean',
           'defaultValue': '',
           'desc': { 'zh-CN': '判断节点能否被拖拽', 'en-US': 'Whether a node can be dragged.' },
-          'demoId': 'allow-drag'
+          'demoId': 'drag'
         },
         {
           'name': 'allow-drop',
@@ -707,7 +707,7 @@ export default {
             'en-US':
               "Whether the target node can be placed during dragging. The type parameter has three situations: 'prev',' inner', and'next', which indicate that it is placed before the target node, inserted into the target node, and placed after the target node respectively"
           },
-          'demoId': 'allow-drop'
+          'demoId': 'drag'
         },
         {
           'name': 'show-contextmenu',
@@ -717,7 +717,7 @@ export default {
             'zh-CN': '是否启用右键菜单功能',
             'en-US': 'Whether to enable the right-click menu function'
           },
-          'demoId': 'node-draggable'
+          'demoId': 'contextmenu'
         },
         {
           'name': 'accordion',
@@ -747,7 +747,7 @@ export default {
             'zh-CN': '是否在第一次展开某个树节点后才渲染其子节点',
             'en-US': 'Whether to render child nodes after the first expansion of a tree node'
           },
-          'demoId': 'other'
+          'demoId': ''
         },
         {
           'name': 'show-check-easily',
@@ -839,7 +839,7 @@ export default {
             'zh-CN': '懒加载时，加载数据成功的事件;<br>参数说明：{data: 加载的数据}',
             'en-US': 'During lazy loading, data is loaded successfully. <br> Parameter description: {data: loaded data}'
           },
-          'demoId': 'check-op'
+          'demoId': 'lazy'
         },
         {
           'name': 'node-drop',
@@ -1039,7 +1039,7 @@ export default {
           'demoId': 'node-hl'
         },
         {
-          'name': 'getNodeKey ',
+          'name': 'getNodeKey',
           'type': '(node:object) => number',
           'defaultValue': '',
           'desc': {
@@ -1049,7 +1049,7 @@ export default {
           'demoId': 'node-hl'
         },
         {
-          'name': 'getNodePath ',
+          'name': 'getNodePath',
           'type': '(key:string) => object[]',
           'defaultValue': '',
           'desc': {
@@ -1066,7 +1066,7 @@ export default {
             'zh-CN': '通过 key 设置某个节点的当前选中状态',
             'en-US': 'Use key to set the selected status of a node'
           },
-          'demoId': 'node-key'
+          'demoId': 'node-op'
         },
         {
           'name': 'setCurrentNode',
@@ -1076,7 +1076,7 @@ export default {
             'zh-CN': '通过节点数据， 设置某个节点的当前选中状态',
             'en-US': 'This section describes how to set the selected status of a node based on node data'
           },
-          'demoId': 'node-key'
+          'demoId': 'node-op'
         },
         {
           'name': 'expandAllNodes',
@@ -1221,7 +1221,7 @@ export default {
           'demoId': 'check-op'
         },
         {
-          'name': 'setCurrentRadio ',
+          'name': 'setCurrentRadio',
           'type': '() => void',
           'defaultValue': '',
           'desc': {
@@ -1261,7 +1261,7 @@ export default {
           'demoId': 'edit'
         },
         {
-          'name': 'addNode ',
+          'name': 'addNode',
           'type': '(node:object) => void',
           'defaultValue': '',
           'desc': {

package/demos/pc/app/tree-menu/accordion.spec.ts

@@ -4,7 +4,9 @@ test('手风琴', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tree-menu#accordion')
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  const wrap = page.locator('#accordion')
+  const treeMenu = wrap.locator('.tiny-tree-menu')
+
   await treeMenu.getByTitle('指南').click()
   await expect(treeMenu.getByTitle('引入组件')).toBeVisible()
   await expect(treeMenu.getByTitle('构建部署')).toBeVisible()

package/demos/pc/app/tree-menu/basic-usage.spec.ts

@@ -4,7 +4,9 @@ test('基本使用,无数据场景', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tree-menu#basic-usage')
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
-  await expect(treeMenu.getByPlaceholder('请输入内容进行筛选').locator('input')).toBeVisible()
+  const wrap = page.locator('#basic-usage')
+  const treeMenu = wrap.locator('.tiny-tree-menu')
+
+  await expect(treeMenu.locator('.tiny-input__inner')).toBeVisible()
   await expect(treeMenu).toContainText('暂无数据')
 })

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

@@ -4,9 +4,13 @@
     <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>
+    <p>
+      场景3：通过 getCurrentKey() 获取当前节点的 key 为：<span class="current-node-key">{{ currentKey }}</span>
+    </p>
     <tiny-button @click="getCurrentKey" title="点击获取当前节点的 key">getCurrentKey</tiny-button>
-    <p>场景4：通过 getCurrentNode() 获取当前节点的数据为：{{ currentNode }}</p>
+    <p>
+      场景4：通过 getCurrentNode() 获取当前节点的数据为：<span class="current-node">{{ currentNode }}</span>
+    </p>
     <tiny-button @click="getCurrentNode" title="点击获取当前节点数据">getCurrentNode</tiny-button>
 
     <tiny-tree-menu
@@ -20,7 +24,7 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { TreeMenu as TinyTreeMenu, Button as TinyButton, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
+import { TreeMenu as TinyTreeMenu, Button as TinyButton } from '@opentiny/vue'
 
 const treeMenu = ref(null)
 const treeData = reactive([