@opentiny/vue-docs 2.2.5 → 2.2.7

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

@@ -88,13 +88,15 @@ export default {
           组件支持显示一个输入框，去过滤显示在左右列表的数据项。<br>
           通过 <code>filterable</code> 属性开启左右侧列表的搜索功能，默认是根据label内容过滤。<br>
           通过 <code>filter-placeholder</code> 属性自定义左右搜索框占位符。<br>
-          通过 <code>filter-method</code> 钩子函数，可自定义左右列表搜索的方法。
+          通过 <code>filter-method</code> 钩子函数，可自定义左右列表搜索的方法。<br>
+          调用 <code>clearQuery()</code> 方法,可清空左右侧列表的搜索框，参数为 left 或者 right 。<br>
         `,
         'en-US': `
           At the top of the left and right lists, you can display an input field to filter the data items that display the left and right lists. <br>
           Use the <code>filterable</code> attribute to enable the search function of the left and right lists, which by default filter based on the label content. <br>
           Use the <code>filter-placeholder</code> attribute to define the placeholder for the left and right search boxes. <br>
-          The <code>filter-method</code> hook allows you to customize the way you search the left and right lists.
+          The <code>filter-method</code> hook allows you to customize the way you search the left and right lists.<br>
+          The <code>clearQuery()</code> method clears the search box in the left and right lists with either the left or right arguments.<br>
         `
       },
       'codeFiles': ['custom-filter.vue']
@@ -114,7 +116,6 @@ export default {
       },
       'codeFiles': ['default-checked.vue']
     },
-
     {
       'demoId': 'drop-config',
       'name': { 'zh-CN': '可拖拽', 'en-US': 'Drag left and right' },
@@ -136,16 +137,7 @@ export default {
       },
       'codeFiles': ['target-order.vue']
     },
-    {
-      'demoId': 'manual-clear-query',
-      'name': { 'zh-CN': '手动清空搜索框', 'en-US': 'Clear the search box manually' },
-      'desc': {
-        'zh-CN': '调用 <code>clearQuery()</code> 方法可清空左右侧列表的搜索框，参数为 left 或者 right 。',
-        'en-US':
-          'The <code>clearQuery()</code> method clears the search box in the left and right lists with either the left or right arguments.'
-      },
-      'codeFiles': ['manual-clear-query.vue']
-    },
+
     {
       'demoId': 'before-transfer',
       'name': { 'zh-CN': '穿梭拦截', 'en-US': 'Clear the search box manually' },
@@ -208,7 +200,7 @@ export default {
           'demoId': 'basic-usage'
         },
         {
-          'name': 'modelValue',
+          'name': 'v-model / modelValue',
           'type': 'string[]',
           'defaultValue': '[]',
           'desc': {
@@ -280,6 +272,7 @@ export default {
           'name': 'format',
           'type': 'object',
           'defaultValue':
+            // eslint-disable-next-line no-template-curly-in-string
             "{ <br>&nbsp; noChecked:'${checked}/${total}', <br>&nbsp; hasChecked: '${checked}/${total}' <br>}",
           'desc': { 'zh-CN': '列表顶部勾选状态文案', 'en-US': 'Check the status copy at the top of the list' },
           'demoId': 'custom-titles'
@@ -525,7 +518,7 @@ export default {
           'type': '(name: string) => void',
           'defaultValue': '',
           'desc': { 'zh-CN': '清空某个面板的搜索关键词', 'en-US': 'Clear the search keywords of a panel.' },
-          'demoId': 'manual-clear-query'
+          'demoId': 'custom-filter'
         }
       ]
     }

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

@@ -4,20 +4,30 @@ test('tree组件基本使用', 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()
+  const preview = page.locator('.pc-demo-container')
+  const tree = preview.locator('.tiny-tree')
+  const showLineBtn = preview.locator('.tiny-radio').nth(0)
+  const miniBtn = preview.locator('.tiny-radio').nth(2)
+  const offsetBtn = preview.locator('.tiny-radio').nth(6)
+  const indentSpan = preview.locator('.tiny-tree-node__content-indent').nth(1)
+
+  // 测试渲染出数据
+  await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
+
+  // 测试连接线  有连线时，show-line
+  await showLineBtn.click()
+  await page.waitForTimeout(20)
+  expect(await tree.locator('.show-line').count()).toBeGreaterThan(1)
+
+  // 测试字体
+  await expect(tree.getByText('数据 1-1-1')).toHaveCSS('font-size', '14px')
+  await miniBtn.click()
+  await page.waitForTimeout(20)
+  await expect(tree.getByText('数据 1-1-1')).toHaveCSS('font-size', '12px')
+
+  // 测试偏移  18px + 8 padding
+  await expect(indentSpan).toHaveCSS('width', '26px')
+  await offsetBtn.click()
+  await page.waitForTimeout(20)
+  await expect(indentSpan).toHaveCSS('width', '46px')
 })

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

@@ -1,23 +1,41 @@
 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#check-op')
+
+  const preview = page.locator('.pc-demo-container')
+  const tree = preview.locator('.tiny-tree').nth(0)
+  const treeChecked = tree.locator('label.is-checked')
+  const btn1 = preview.getByText('查询勾选状态')
+  const btn2 = preview.getByText('清除全部勾选')
+  const btn3 = preview.getByText('根据节点数据勾选')
+  const btn4 = preview.getByText('根据node-key勾选')
+  const btn5 = preview.getByText('根据node-key,多值勾选')
+  const btn6 = preview.getByText('根据node,多值勾选')
+
+  await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
+  await expect(treeChecked).toHaveCount(0)
+
+  await btn3.click()
+  await expect(treeChecked).toHaveCount(4)
+  await page.waitForTimeout(20)
+
+  await btn4.click()
+  await expect(treeChecked).toHaveCount(1)
+  await page.waitForTimeout(20)
+
+  await btn5.click()
+  await expect(treeChecked).toHaveCount(6)
+  await page.waitForTimeout(20)
+
+  await btn6.click()
+  await expect(treeChecked).toHaveCount(3)
+  await page.waitForTimeout(20)
+
+  await btn2.click()
+  await expect(treeChecked).toHaveCount(0)
+  await page.waitForTimeout(20)
+
+  await btn1.click()
 })

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

@@ -1,23 +1,28 @@
 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#checkbox')
 
-  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 tree1Checked = tree1.locator('label.is-checked')
+  const tree2Checked = tree2.locator('label.is-checked')
+
+  await expect(tree1.getByText('数据 1-1-1')).toHaveCount(1)
+  await page.waitForTimeout(50)
+
+  // 测试左树
+  await expect(tree1Checked).toHaveCount(3)
+  await tree1.getByText('数据 3').nth(0).click()
+  await page.waitForTimeout(50)
+  await expect(tree1Checked).toHaveCount(5)
+
+  // 测试右树
+  await expect(tree2Checked).toHaveCount(1)
+  await tree2.locator('.tiny-checkbox__inner').nth(5).click()
+  await page.waitForTimeout(50)
+  await expect(tree2Checked).toHaveCount(2)
 })

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

@@ -1,14 +1,15 @@
 import { test, expect } from '@playwright/test'
 
-test('可自定义右键菜单内容', async ({ page }) => {
+test('右键菜单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tree#contextmenu')
 
-  await page.getByText('三级 1-1-1').first().click({
-    button: 'right'
-  })
-  const menu = page.locator('#preview .tiny-tree-node__menu')
-  await expect(menu).toBeVisible()
-  await page.locator('.context-menu li').first().click()
-  await expect(menu).not.toBeVisible()
+  const preview = page.locator('.pc-demo-container')
+  const tree = preview.locator('.tiny-tree').nth(0)
+  const node = tree.getByText('数据 1-1-1')
+  await expect(node).toHaveCount(1)
+
+  await node.click({ button: 'right' })
+  await page.waitForTimeout(20)
+  await expect(tree.getByText('更新')).toHaveCount(1)
 })

package/demos/pc/app/tree/drag.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#drag')
 
-  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)
+  await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
+
+  await tree.getByText('数据 2-1').dragTo(tree.getByText('数据 1-1-1'))
+  await page.waitForTimeout(100)
+  await tree.getByText('数据 1-1-1').dragTo(tree.getByText('数据 2-2'))
+  await page.waitForTimeout(100)
 })

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

@@ -1,106 +1,27 @@
 import { test, expect } from '@playwright/test'
 
-test.describe('节点编辑', () => {
-  test('编辑节点内容', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('tree#edit')
-
-    const tree = page.locator('#preview .tiny-tree')
-    const node = tree.locator('.tiny-tree-node').first()
-    const nodeLeft = node.locator('.tiny-tree-node__content-left').first()
-    const nodeRight = node.locator('.tiny-tree-node__content-right').first()
-
-    await page.getByRole('button', { name: '进入编辑' }).click()
-    await expect(nodeRight.getByTitle('编辑')).toBeVisible()
-    await nodeRight.getByTitle('编辑').click()
-    await expect(nodeLeft.locator('.tiny-input')).toBeVisible()
-    await expect(nodeLeft.locator('.tiny-input input')).toHaveValue('一级 1')
-    await nodeLeft.locator('.tiny-input input').fill('aaa')
-    await nodeLeft.locator('.tiny-input input').blur()
-    await expect(node.locator('.tiny-tree-node__label').first()).toHaveText('aaa')
-  })
-
-  test('进入编辑状态后删除节点', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('tree#edit')
-
-    const tree = page.locator('#preview .tiny-tree')
-    const node = tree.locator('.tiny-tree-node').first()
-    const delBtn = node.locator('.tiny-tree-node__content-right > span:nth-child(2) > .tiny-svg').first()
-    const delPopover = page.locator('.tiny-tree__del-popover').nth(1)
-    await page.getByRole('button', { name: '进入编辑' }).click()
-    await delBtn.click()
-    await expect(delPopover).toBeVisible()
-
-    // 连同子孙节点一起删除
-    await delPopover.getByRole('button', { name: '确定' }).click()
-    await expect(node).not.toContainText('一级 1')
-    await expect(tree.locator('.tiny-tree-node')).toHaveCount(2)
-
-    // 保留子孙节点
-    await delBtn.click()
-    await delPopover.locator('.tiny-checkbox').click()
-    await delPopover.getByRole('button', { name: '确定' }).click()
-    await expect(node.locator('.tiny-tree-node__label')).toHaveText('一级 3')
-    await expect(tree.locator('.tiny-tree-node')).toHaveCount(3)
-  })
-
-  test('进入编辑状态后新增子节点', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('tree#edit')
-
-    const tree = page.locator('#preview .tiny-tree')
-    const nodes = tree.locator('.tiny-tree-node')
-    const node = nodes.first()
-    const newNode = nodes.filter({ hasText: 'aaa' }).first()
-
-    await page.getByRole('button', { name: '进入编辑' }).click()
-    await node.getByTitle('新增下级').first().click()
-    await node.getByRole('textbox').fill('aaa')
-    await node.getByRole('textbox').blur()
-    await expect(newNode).toBeVisible()
-  })
-
-  test('取消编辑', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('tree#edit')
-
-    const tree = page.locator('#preview .tiny-tree')
-    const nodes = tree.locator('.tiny-tree-node')
-    const node = nodes.first()
-    const delBtn = node.locator('.tiny-tree-node__content-right > span:nth-child(2) > .tiny-svg').first()
-    const delPopover = page.locator('.tiny-tree__del-popover').nth(1)
-
-    await expect(nodes).toHaveCount(6)
-
-    // 删除一些节点
-    await page.getByRole('button', { name: '进入编辑' }).click()
-    await delBtn.click()
-    await delPopover.getByRole('button', { name: '确定' }).click()
-    await expect(nodes).toHaveCount(2)
-
-    // 取消编辑后已删除节点重新恢复
-    await page.getByRole('button', { name: '取消编辑' }).click()
-    await expect(nodes).toHaveCount(6)
-  })
-
-  test('保存编辑', async ({ page }) => {
-    page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('tree#edit')
-
-    const tree = page.locator('#preview .tiny-tree')
-    const node = tree.locator('.tiny-tree-node').first()
-    const nodeLeft = node.locator('.tiny-tree-node__content-left').first()
-    const nodeRight = node.locator('.tiny-tree-node__content-right').first()
-
-    // 编辑节点内容
-    await page.getByRole('button', { name: '进入编辑' }).click()
-    await nodeRight.getByTitle('编辑').click()
-    await nodeLeft.locator('.tiny-input input').fill('aaa')
-    await nodeLeft.locator('.tiny-input input').blur()
-
-    // 保存编辑, 检查是否正确保存
-    await page.getByRole('button', { name: '保存编辑' }).click()
-    await expect(node.locator('.tiny-tree-node__label').first()).toHaveText('aaa')
-  })
+test('编辑', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree#edit')
+
+  const preview = page.locator('.pc-demo-container')
+  const tree = preview.locator('.tiny-tree').nth(0)
+  const btn1 = preview.getByText('进入编辑')
+  const btn2 = preview.getByText('取消编辑')
+  const btn3 = preview.getByText('新建子节点')
+  const editIcons = tree.locator('[title="编辑"]')
+  const input = tree.locator('.tiny-input input')
+
+  await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
+  await btn1.click()
+  await expect(editIcons).toHaveCount(8)
+  await page.waitForTimeout(20)
+
+  await btn2.click()
+  await expect(editIcons).toHaveCount(0)
+  await page.waitForTimeout(20)
+
+  await btn3.click()
+  await expect(input).toHaveCount(1)
+  input.fill('123')
 })

package/demos/pc/app/tree/expand-control.spec.ts

@@ -1,23 +1,27 @@
 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#expand-control')
 
-  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 allBtn = preview.getByText('切换全部展开收起')
+  const openBtn = preview.getByText('展开高亮')
+  const closeBtn = preview.getByText('收起高亮')
+
+  // 测试全部收起
+  await expect(tree1.locator('.is-expanded')).toHaveCount(8) //  叶子节点也有这个类
+  await allBtn.click()
+  await expect(tree1.locator('.is-expanded')).toHaveCount(0)
+
+  // 测试收起/展开
+  await page.waitForTimeout(50)
+  await expect(tree2.locator('.is-expanded')).toHaveCount(1)
+  await closeBtn.click()
+  await expect(tree2.locator('.is-expanded')).toHaveCount(0)
+  await page.waitForTimeout(50)
+  await openBtn.click()
+  await expect(tree2.locator('.is-expanded')).toHaveCount(1)
 })

package/demos/pc/app/tree/filter-view-composition-api.vue

@@ -28,10 +28,11 @@
       :show-auxi="showAuxi === 'show'"
     >
       <!-- 屏蔽默认的后缀图标 -->
-      <template #suffix="{ node }"> <div></div> </template>
+      <template #suffix> <div></div> </template>
     </tiny-tree>
   </div>
 </template>
+
 <script setup lang="jsx">
 import { ref } from 'vue'
 import { Tree as TinyTree, RadioGroup as TinyRadioGroup, Radio as TinyRadio, Input as TinyInput } from '@opentiny/vue'
@@ -62,9 +63,10 @@ const data = ref([
 ])
 
 function inputChange() {
-  treeRef.value.filter(this.filterText)
+  treeRef.value.filter(filterText.value)
 }
 
+// eslint-disable-next-line unused-imports/no-unused-vars
 function filterNodeMethod(text, data, node) {
   return data.label.includes(text)
 }

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/filter-view.vue

@@ -28,7 +28,7 @@
       :show-auxi="showAuxi === 'show'"
     >
       <!-- 屏蔽默认的后缀图标 -->
-      <template #suffix="{ node }"> <div></div> </template>
+      <template #suffix> <div></div> </template>
     </tiny-tree>
   </div>
 </template>
@@ -74,6 +74,7 @@ export default {
     inputChange() {
       this.$refs.treeRef.filter(this.filterText)
     },
+    // eslint-disable-next-line unused-imports/no-unused-vars
     filterNodeMethod(text, data, node) {
       return data.label.includes(text)
     }

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

@@ -3,10 +3,10 @@
     <tiny-tree :data="data" :icon="icon"></tiny-tree>
     <tiny-tree
       :data="data"
-      :expandIcon="expandIcon"
-      expandIconColor="red"
-      :shrinkIcon="shrinkIcon"
-      shrinkIconColor="blue"
+      :expand-icon="expandIcon"
+      expand-icon-color="red"
+      :shrink-icon="shrinkIcon"
+      shrink-icon-color="blue"
     ></tiny-tree>
   </div>
 </template>

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

@@ -3,10 +3,10 @@
     <tiny-tree :data="data" :icon="icon"></tiny-tree>
     <tiny-tree
       :data="data"
-      :expandIcon="expandIcon"
-      expandIconColor="red"
-      :shrinkIcon="shrinkIcon"
-      shrinkIconColor="blue"
+      :expand-icon="expandIcon"
+      expand-icon-color="red"
+      :shrink-icon="shrinkIcon"
+      shrink-icon-color="blue"
     ></tiny-tree>
   </div>
 </template>