@opentiny/vue-docs 1.0.2 → 1.0.4

package/resources/pc/demo/tree/node-draggable.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test('可拖拽节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/node-draggable');
+
+  const draggedDom = page.getByRole('treeitem', { name: '三级 1-1-1' })
+  // 获取拖拽元素位置
+  const { x, y } = await draggedDom.boundingBox()
+
+  // 1. 兄弟节点之间交换位置
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x, y + 55)
+  await page.mouse.up()
+  // 拖拽完成判断位置是否变化
+  await expect(page.getByRole('treeitem', { name: '二级 1-1' }).locator('.tiny-tree-node__content').nth(1)).toContainText('1-1-2')
+
+  // 2. 拖拽兄弟节点跨层级
+  await page.mouse.move(x, y)
+  await page.mouse.down()
+  await page.mouse.move(x, y + 30)
+  await page.mouse.up()
+  // 判断新的子节点和父节点的位置
+  await expect(page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('.tiny-tree-node__children .tiny-tree-node')).toHaveCount(1)
+});

package/resources/pc/demo/tree/node-events.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test';
+
+test('勾选节点事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/node-events')
+
+  const nodeCheckbox = page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('span').nth(2)
+  await nodeCheckbox.click()
+  await expect(page.getByText('勾选节点后的事件').first()).toBeVisible()
+  await expect(page.getByText('节点选中状态发生变化时触发的事件').first()).toBeVisible()
+});

package/resources/pc/demo/tree/node-key.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@playwright/test';
+
+test('唯一标识', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/node-key');
+
+  await page.getByRole('button', { name: '设置当前选中的节点的 key' }).click()
+  await expect(page.getByRole('treeitem', { name: '二级 2-1' })).toHaveClass(/is-current/)
+
+  await page.getByRole('button', { name: '设置当前选中的节点', exact: true }).click();
+  await expect(page.getByRole('treeitem', { name: '三级 1-1-2' })).toHaveClass(/is-current/)
+
+  await page.getByText('三级 1-1-1').click();
+  await page.getByRole('button', { name: '获取当前被选中节点的 key' }).click();
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]/div[1]')).toContainText('9')
+
+  await page.getByRole('button', { name: '获得当前选中的节点' }).click();
+  await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]/div[2]')).toContainText('"id": 9')
+
+  const newNode1 = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[5]/div[1]/div/div[2]/div/div/div[2]/div[3]/div')
+  await expect(newNode1).toHaveCount(0)
+  await page.getByRole('button', { name: '为 Tree 中的一个节点追加一个子节点' }).click();
+  await expect(newNode1).toHaveCount(1)
+
+  const newNode2 = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[5]/div[4]/div')
+  await expect(newNode2).toHaveCount(0)
+  await page.getByRole('button', { name: '根据节点数据在父节点下插入一个子节点' }).click();
+  await expect(newNode2).toHaveCount(1)
+
+  const newNode3 = page.getByRole('treeitem', { name: '一级 5' })
+  await expect(newNode3).toHaveCount(0)
+  await page.getByRole('button', { name: '为 Tree 的一个节点的前面增加一个节点' }).click();
+  await expect(newNode3).toHaveCount(1)
+
+  const node = page.locator('div').filter({ hasText: /^一级 2$/ })
+  await expect(node).toHaveCount(1)
+  await page.getByRole('button', { name: '删除节点' }).click();
+  await expect(node).toHaveCount(0)
+});

package/resources/pc/demo/tree/node-props-config.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('数据节点属性配置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/node-props-config');
+
+  await expect(page.locator('#preview .tiny-tree-node__content').first()).toHaveText('一级 1')
+  const childCount = await page.getByRole('treeitem', { name: '一级 1' }).locator('.tiny-tree-node__children .tiny-tree-node__content').count()
+  await expect(childCount).toBeGreaterThan(0)
+});

package/resources/pc/demo/tree/render-after-expand.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+
+test('展开后渲染', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/render-after-expand');
+
+  // 非展开渲染, 子节点存在dom中, 被隐藏
+  const childNode = page.getByRole('treeitem', { name: '二级 1-1', includeHidden: true })
+  await expect(childNode).toBeHidden(0)
+});

package/resources/pc/demo/tree/render-content.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+test('自定义内容区渲染', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/render-content');
+
+  const node = page.getByRole('treeitem', { name: '三级 1-1-1' })
+  const customContent1 = node.getByText('Append')
+  const customContent2 = node.getByText('Delete')
+  const customContent3 = page.locator('span').filter({ hasText: '二级 1-1AppendDelete' }).getByRole('button', { name: 'Append' }).nth(0)
+  const customContent4 = page.getByRole('treeitem', { name: '一级 1 Append Delete' }).getByRole('button', { name: 'Append' }).nth(0)
+  const appendedNode = page.getByRole('treeitem', { name: 'testtest' })
+  for (const item of [customContent1, customContent2, customContent3, customContent4]) {
+    await expect(item).toHaveCount(1)
+  }
+
+  await customContent1.click()
+  await expect(appendedNode).toHaveCount(1)
+  await appendedNode.getByRole('button', { name: 'Delete' }).click();
+  await expect(appendedNode).toHaveCount(0)
+});

package/resources/pc/demo/tree/set-tree-icon.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test('展开折叠图标分别设置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/set-tree-icon')
+
+  const node = page.getByRole('treeitem', { name: '一级 1' }).locator('div')
+
+  await node.click()
+  const collapseIcon = node.locator('.tree-node-icon').first()
+  const expendIcon = node.locator('.tree-node-icon').nth(1)
+  await expect(collapseIcon).not.toEqual(expendIcon)
+});

package/resources/pc/demo/tree/show-checkbox.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test';
+
+test('是否开启多选模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/show-checkbox')
+
+  const checkbox1 = page.getByRole('treeitem', { name: '三级 1-1-2' }).locator('.tiny-checkbox')
+  const checkbox2 = page.getByRole('treeitem', { name: '二级 3-2' }).locator('.tiny-checkbox')
+  const checkbox3 = page.getByRole('treeitem', { name: '三级 1-1-1' }).locator('.tiny-checkbox')
+  const checkbox4 = page.getByRole('treeitem', { name: '三级 3-3-1' }).locator('.tiny-checkbox')
+  const checkedClass = /is-checked/
+
+  await expect(checkbox1).toBeVisible()
+  await checkbox1.click()
+  await expect(checkbox1).toHaveClass(checkedClass)
+  await checkbox1.click()
+  await expect(checkbox1).not.toHaveClass(checkedClass)
+
+  await expect(checkbox2).not.toHaveClass(checkedClass)
+  await page.getByRole('button', { name: '通过 data 设置节点的勾选状态' }).click()
+  await expect(checkbox2).toHaveClass(checkedClass)
+
+  await expect(checkbox3).not.toHaveClass(checkedClass)
+  await page.getByRole('button', { name: '通过 key 设置节点的当前选中状态' }).click();
+  await expect(checkbox3).toHaveClass(checkedClass)
+
+  await expect(checkbox1).not.toHaveClass(checkedClass)
+  await page.getByRole('button', { name: '通过 node 设置节点的当前选中状态' }).click();
+  await expect(checkbox1).toHaveClass(checkedClass)
+
+  await expect(checkbox4).not.toBeVisible()
+  await page.getByRole('button', { name: '通过 keys 设置节点子元素' }).click();
+  await expect(checkbox4).toBeVisible()
+});

package/resources/pc/demo/tree/single-select-radio.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test';
+
+test('单选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/single-select-radio')
+
+  const node1 = page.getByRole('treeitem', { name: '一级 3' })
+  const node2 = page.getByRole('treeitem', { name: '二级 3-1' })
+
+  await expect(node1.locator('.tiny-radio').first()).toBeVisible()
+
+  await node1.click()
+  await node2.click()
+  await expect(node2.locator('.tiny-radio')).toHaveClass(/is-checked/)
+  await expect(node1.locator('.tiny-radio').first()).not.toHaveClass(/is-checked/)
+});

package/resources/pc/demo/tree/single-select-radio.vue

@@ -1,14 +1,6 @@
 <template>
-  <tiny-tree
-    :data="data5"
-    :default-checked-keys="defaultcheckedkeys"
-    node-key="id"
-    default-expand-all
-    show-radio
-    :show-checkbox="false"
-    @check-change="onCheckChange"
-    check-strictly
-  ></tiny-tree>
+  <tiny-tree :data="data5" :default-checked-keys="defaultcheckedkeys" node-key="id" default-expand-all show-radio
+    :show-checkbox="false" :check-on-click-node="true" @check-change="onCheckChange" check-strictly></tiny-tree>
 </template>
 
 <script lang="jsx">

package/resources/pc/demo/tree/slot-deffault.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test('默认插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree/slot-deffault');
+
+  const currentNodeContent = page.getByText('一级 1')
+  await expect(currentNodeContent).toHaveClass('custom-label')
+});

package/resources/pc/demo/tree/slot-deffault.vue

@@ -1,7 +1,9 @@
 <template>
   <tiny-tree :data="data5">
     <template #default="sourceData">
-      <div class="tiny-tree-node__label">{{ sourceData.data.label }}</div>
+      <div class="custom-label">
+        {{ sourceData.data.label }}
+      </div>
     </template>
   </tiny-tree>
 </template>
@@ -80,3 +82,18 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.custom-label {
+  color: #5e7ce0;
+}
+:deep(.is-current>.tiny-tree-node__content)  svg {
+  fill: #fff;
+}
+
+:deep(.is-current>.tiny-tree-node__content) .custom-label {
+  color: #fff;
+  font-weight: 500;
+  margin-left: 8px;
+}
+</style>

package/resources/pc/demo/tree-menu/accordion.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('手风琴', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/accordion')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await treeMenu.getByTitle('指南').click()
+  await expect(treeMenu.getByTitle('引入组件')).toBeVisible()
+  await expect(treeMenu.getByTitle('构建部署')).toBeVisible()
+  await treeMenu.getByTitle('引入组件').click()
+  await expect(treeMenu.getByTitle('按需引入')).toBeVisible()
+  await expect(treeMenu.getByTitle('完整引入')).toBeVisible()
+  await treeMenu.getByTitle('指南').click()
+  await expect(treeMenu.getByTitle('引入组件')).not.toBeVisible()
+  await expect(treeMenu.getByTitle('完整引入')).not.toBeVisible()
+})

package/resources/pc/demo/tree-menu/basic-usage.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('基本使用,无数据场景', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/basic-usage')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await expect(treeMenu.getByPlaceholder('请输入内容进行筛选')).toBeVisible()
+  await expect(treeMenu).toContainText('暂无数据')
+})

package/resources/pc/demo/tree-menu/can-draggable.spec.ts

@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test'
+
+test('拖动菜单', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/can-draggable')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  const node = treeMenu.getByTitle('首页')
+
+  // 同一层次节点拖拽
+  const { x: x0, y: y0 } = await node.boundingBox()
+
+  await page.mouse.move(x0, y0)
+  await page.mouse.down()
+  await page.mouse.move(x0, y0 + 80)
+  await page.mouse.up()
+
+  // 判断位置是否变化
+  const { x: x1, y: y1 } = await node.boundingBox()
+  expect(y1).toBeGreaterThan(y0)
+
+  // 拖拽进到兄弟节点成为其子节点
+  await page.mouse.move(x1, y1)
+  await page.mouse.down()
+  await page.mouse.move(x1, y1 - 20)
+  await page.mouse.up()
+
+  // 判断是否放到兄弟节点内
+  await treeMenu.getByTitle('指南').click()
+  await expect(treeMenu.getByRole('treeitem', { name: '指南' }).getByRole('treeitem', { name: '首页' })).toBeVisible()
+
+  // 拖拽到父节点同级
+  const { x: x2, y: y2 } = await node.boundingBox()
+
+  await page.mouse.move(x2, y2)
+  await page.mouse.down()
+  await page.mouse.move(x2, y2 + 80)
+  await page.mouse.up()
+  await expect(treeMenu.getByRole('treeitem', { name: '指南' }).getByRole('treeitem', { name: '首页' })).toBeVisible()
+})

package/resources/pc/demo/tree-menu/check-strictly.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('父子级不相关联', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/check-strictly')
+
+  // 父节点勾选不会改变子节点
+  await page.getByRole('treeitem', { name: '指南', exact: true }).getByRole('img').first().click()
+  await expect(page.getByRole('treeitem', { name: '引入组件' }).locator('span').nth(1)).not.toHaveClass(/is-checked/)
+  await expect(page.getByRole('treeitem', { name: '构建部署' }).locator('span').nth(1)).not.toHaveClass(/is-checked/)
+
+  // 子节点勾选不改变父节点
+  await page.getByRole('treeitem', { name: '引入组件' }).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(/is-checked/)
+})

package/resources/pc/demo/tree-menu/data-resource.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('绑定数据源', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/data-resource')
+
+  await page.getByTitle('指南', { exact: true }).click()
+  await expect(page.getByTitle('后端适配器')).toBeVisible()
+  await page.getByTitle('后端适配器').click()
+  await expect(page.getByRole('treeitem', { name: '后端适配器' })).toHaveClass(/is-current/)
+  await page.getByTitle('指南', { exact: true }).click()
+  await expect(page.getByTitle('后端适配器')).not.toBeVisible()
+
+  // 过滤功能
+  await page.locator('#preview').getByPlaceholder('请输入内容进行筛选').fill('添加标签页')
+  await expect(page.getByTitle('添加标签页')).toBeVisible()
+  await expect(page.getByTitle('指南', { exact: true })).not.toBeVisible()
+  await page.locator('#preview').getByPlaceholder('请输入内容进行筛选').clear()
+  await expect(page.getByTitle('指南', { exact: true })).toBeVisible()
+})

package/resources/pc/demo/tree-menu/default-expand-all.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('默认展开全部菜单', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/default-expand-all')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await expect(treeMenu.getByTitle('首页')).toBeVisible()
+  await expect(treeMenu.getByTitle('组件').first()).toBeVisible()
+  await expect(treeMenu.getByTitle('引入组件')).toBeVisible()
+  await expect(treeMenu.getByRole('link', { name: 'Button 按钮' })).toBeVisible()
+  await expect(treeMenu.getByTitle('教程')).toBeVisible()
+  await expect(treeMenu.getByTitle('页面布局')).toBeVisible()
+  await expect(treeMenu.getByTitle('列表属性配置')).toBeVisible()
+})

package/resources/pc/demo/tree-menu/default-expanded-keys.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('默认展开某节点', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/default-expanded-keys')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  // 默认展开节点
+  await expect(treeMenu.getByTitle('数据组件')).toBeVisible()
+  // 默认展开节点的祖先节点展开
+  await expect(treeMenu.getByTitle('组件', { exact: true }).first()).toBeVisible()
+  // 默认展开节点兄弟节点展开
+  await expect(treeMenu.getByTitle('导航组件')).toBeVisible()
+  // 默认展开节点的下一层次节点不展开
+  await expect(treeMenu.getByTitle('Datepicker 日期')).not.toBeVisible()
+  // 非默认展开节点子的祖先节点的子节点不展开
+  await expect(treeMenu.getByTitle('页面布局')).not.toBeVisible()
+
+})

package/resources/pc/demo/tree-menu/empty-text.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义空数据文本', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/empty-text')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await expect(treeMenu).toHaveText('空数据')
+})

package/resources/pc/demo/tree-menu/event-allow-draggable.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('拖拽菜单回调事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/event-allow-draggable')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  const node = treeMenu.getByTitle('首页')
+
+  const { x: x0, y: y0 } = await node.boundingBox()
+  await page.mouse.move(x0, y0)
+  await page.mouse.down()
+  await page.mouse.move(x0, y0 + 10)
+  await expect(page.getByText('拖拽节点开始时触发的事件').first()).toBeVisible()
+  await page.mouse.move(x0, y0 + 80)
+  await page.mouse.up()
+  await expect(page.getByText('拖拽结束时触发的事件').first()).toBeVisible()
+
+})

package/resources/pc/demo/tree-menu/event-check-change.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('节点选中状态发生变化时的回调', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/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()
+})

package/resources/pc/demo/tree-menu/event-current-change.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('当前选中节点变化事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/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()
+})

package/resources/pc/demo/tree-menu/event-current-change.vue

@@ -14,7 +14,7 @@ export default {
       treeData: [
         {
           id: 100,
-          label: '首页11111111111111111111111111111111111111111111111111'
+          label: '首页'
         },
         {
           id: 200,

package/resources/pc/demo/tree-menu/event-node-click.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('节点被点击事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/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()
+})

package/resources/pc/demo/tree-menu/event-node-click.vue

@@ -14,7 +14,7 @@ export default {
       treeData: [
         {
           id: 100,
-          label: '首页11111111111111111111111111111111111111111111111111'
+          label: '首页'
         },
         {
           id: 200,

package/resources/pc/demo/tree-menu/event-node-collapse.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('节点被折叠时触发的事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/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()
+})

package/resources/pc/demo/tree-menu/event-node-expand.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('节点被展开时触发的事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/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()
+})

package/resources/pc/demo/tree-menu/expand-on-click-node.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('点击文字展开菜单', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/expand-on-click-node')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await treeMenu.getByTitle('指南', { exact: true }).click()
+  await expect(treeMenu.getByTitle('后端适配器')).toBeVisible()
+})

package/resources/pc/demo/tree-menu/filter-node-method.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('搜索规则配置 精确匹配', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/filter-node-method')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await treeMenu.getByPlaceholder('请输入内容进行筛选').fill('组件')
+  await expect(treeMenu.getByRole('group').getByTitle('组件', { exact: true })).toBeVisible()
+  await expect(treeMenu.getByTitle('引入组件')).not.toBeVisible()
+  await expect(treeMenu.getByTitle('表单组件')).not.toBeVisible()
+})

package/resources/pc/demo/tree-menu/get-menu-data-sync.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('get-menu-data-sync 同步获取数据', 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: '按需引入' })).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()
+})

package/resources/pc/demo/tree-menu/lazy-load.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('懒加载', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/lazy-load')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await treeMenu.getByTitle('表单组件', { exact: true }).click()
+  await expect(treeMenu.getByTitle('表单组件1')).not.toBeVisible()
+  // 等到异步加载完成
+  await page.waitForTimeout(600)
+  await expect(treeMenu.getByTitle('表单组件1')).toBeVisible()
+})

package/resources/pc/demo/tree-menu/search-icon.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义搜索图标', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/search-icon')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  await expect(treeMenu.locator('.tiny-input__prefix .tiny-input__icon')).toBeVisible()
+})

package/resources/pc/demo/tree-menu/show-checkbox.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test'
+
+test('节点可勾选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/tree-menu/show-checkbox')
+
+  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  const node = treeMenu.getByRole('treeitem', { name: '首页' })
+  const selectedClass = /is-checked/
+  await expect(node.locator('.tiny-tree-node__content .tiny-checkbox')).toBeVisible()
+  await page.getByRole('treeitem', { name: '首页' }).locator('span').nth(2).click()
+  await expect(node).toHaveClass(/is-current/)
+  await expect(node.locator('.tiny-tree-node__content .tiny-checkbox')).toHaveClass(selectedClass)
+
+  // 父级选中, 子孙节点同时都选中
+  await page.getByRole('treeitem', { name: '指南', exact: true }).locator('span').nth(2).click()
+  await treeMenu.getByRole('treeitem', { name: '指南' }).click()
+  await expect(treeMenu.getByRole('treeitem', { name: '引入组件' }).locator('.tiny-checkbox')).toHaveClass(selectedClass)
+  await expect(treeMenu.getByRole('treeitem', { name: '后端适配器' }).locator('.tiny-checkbox')).toHaveClass(selectedClass)
+  await treeMenu.getByRole('treeitem', { name: '引入组件' }).click()
+  await expect(treeMenu.getByRole('treeitem', { name: '按需引入' }).locator('.tiny-checkbox')).toHaveClass(selectedClass)
+
+  // 子节点取消勾选, 祖先节点改变勾选状态
+  await page.getByRole('treeitem', { name: '按需引入' }).locator('span').nth(2).click()
+  await expect(treeMenu.getByRole('treeitem', { name: '引入组件' }).locator('.tiny-checkbox__input').first()).toHaveClass(/is-indeterminate/)
+  await expect(treeMenu.getByRole('treeitem', { name: '指南' }).locator('.tiny-checkbox__input').first()).toHaveClass(/is-indeterminate/)
+  await page.getByRole('treeitem', { name: '完整引入' }).locator('span').nth(2).click()
+  await expect(treeMenu.getByRole('treeitem', { name: '引入组件' }).locator('.tiny-checkbox__input').first()).not.toHaveClass(/is-indeterminate/)
+})