@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/pc/app/tree/filter-view.spec.ts

@@ -1,23 +1,21 @@
 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#filter-view')
 
-  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 btnPlain = preview.getByText('平铺视图 plain')
+  const checkboxs = tree.locator('.tiny-tree__plain-node .tiny-checkbox')
+  const input = preview.locator('.tiny-input input')
+
+  await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
+
+  await btnPlain.click()
+  await expect(checkboxs).toHaveCount(8)
+  await page.waitForTimeout(20)
+
+  await input.fill('1-1')
+  await expect(checkboxs).toHaveCount(3)
 })

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

@@ -1,23 +1,25 @@
 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#icons')
 
-  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 tree1 = preview.locator('.tiny-tree').nth(0)
+  const tree2 = preview.locator('.tiny-tree').nth(1)
+
+  const icon1 = tree1.locator('svg path').nth(0)
+  const icon2 = tree2.locator('svg path').nth(0)
+
+  // 测试tree1
+  await expect(tree1.getByText('数据 2')).toHaveCount(1)
+  await expect(icon1).toHaveAttribute('d', 'm6 2 13 10L6 22V2zm2 4v12l8-6.1L8 6z')
+
+  // 测试tree2
+  await expect(tree2.getByText('数据 2')).toHaveCount(1)
+  await expect(icon2).toHaveAttribute(
+    'd',
+    'M13 11h4c.6 0 1 .4 1 1s-.4 1-1 1h-4v4c0 .6-.4 1-1 1s-1-.4-1-1v-4H7c-.6 0-1-.4-1-1s.4-1 1-1h4V7c0-.6.4-1 1-1s1 .4 1 1v4zM3 1h18c.9 0 2 1.1 2 2v18c0 .9-1 2-2 2H3c-.9 0-2-1.1-2-2V3c0-.9 1.1-2 2-2zm0 2v18h18V3H3z'
+  )
+  await expect(icon2).toHaveCSS('fill', 'rgb(255, 0, 0)')
 })

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/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.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/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>

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([

package/demos/pc/app/tree-menu/current-node.spec.ts

@@ -4,22 +4,29 @@ test('设置当前节点', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tree-menu#current-node')
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  const wrap = page.locator('#current-node')
+  const treeMenu = wrap.locator('.tiny-tree-menu')
+  const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
+  const button = wrap.locator('.tiny-button')
   const currentCls = /is-current/
 
   // 通过key设置当前节点
-  await page.getByRole('button', { name: '设置当前选中的节点的 key' }).click()
-  await expect(treeMenu.locator('.tiny-tree-node').filter({ hasText: '按需引入' }).nth(2)).toHaveClass(currentCls)
-  await page.getByRole('button', { name: '获取当前被选中节点的 key' }).click()
-  await expect(page.locator('#current-node-key')).toHaveText('20101')
-  await page.getByRole('button', { name: '获取当前选中的节点' }).click()
-  await expect(page.locator('#current-node')).toHaveText('{ "id": 20101, "label": "按需引入" }')
+  await button.nth(0).click()
+  await expect(treeNode.filter({ hasText: /^按需引入$/ })).toHaveClass(currentCls)
+  // 获取当前被选中节点的 key
+  await button.nth(2).click()
+  await expect(wrap.locator('.current-node-key')).toHaveText('20101')
+  // 获取当前节点的数据
+  await button.nth(3).click()
+  await expect(wrap.locator('.current-node')).toHaveText('{ "id": 20101, "label": "按需引入" }')
 
   // 通过node设置当前节点
-  await page.getByRole('button', { name: '设置当前选中的节点' }).nth(1).click()
-  await expect(treeMenu.locator('.tiny-tree-node').filter({ hasText: '规范' })).toHaveClass(currentCls)
-  await page.getByRole('button', { name: '获取当前被选中节点的 key' }).click()
-  await expect(page.locator('#current-node-key')).toHaveText('500')
-  await page.getByRole('button', { name: '获取当前选中的节点' }).click()
-  await expect(page.locator('#current-node')).toHaveText('{ "id": 500, "label": "规范" }')
+  await button.nth(1).click()
+  await expect(treeNode.filter({ hasText: /^规范$/ })).toHaveClass(currentCls)
+  // 获取当前被选中节点的 key
+  await button.nth(2).click()
+  await expect(wrap.locator('.current-node-key')).toHaveText('500')
+  // 获取当前节点的数据
+  await button.nth(3).click()
+  await expect(wrap.locator('.current-node')).toHaveText('{ "id": 500, "label": "规范" }')
 })

package/demos/pc/app/tree-menu/current-node.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
@@ -19,14 +23,12 @@
 </template>
 
 <script>
-import { TreeMenu, Button, Row, Col } from '@opentiny/vue'
+import { TreeMenu, Button } from '@opentiny/vue'
 
 export default {
   components: {
     TinyTreeMenu: TreeMenu,
-    TinyButton: Button,
-    TinyRow: Row,
-    TinyCol: Col
+    TinyButton: Button
   },
   data() {
     return {

package/demos/pc/app/tree-menu/custom-icon.spec.ts

@@ -2,8 +2,18 @@ import { test, expect } from '@playwright/test'
 
 test('自定义搜索图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#search-icon')
+  await page.goto('tree-menu#custom-icon')
+
+  const wrap = page.locator('#custom-icon')
+  const treeMenu = wrap.locator('.tiny-tree-menu')
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
   await expect(treeMenu.locator('.tiny-input__prefix .tiny-input__icon')).toBeVisible()
 })
+
+test('自定义前置图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#custom-icon')
+
+  const wrap = page.locator('#custom-icon')
+  const treeMenu = wrap.locator('.tiny-tree-menu')
+})