@opentiny/vue-docs 2.1.10 → 2.2.1

package/demos/pc/app/container/basic-usage-composition-api.vue

@@ -1,16 +1,25 @@
 <template>
-  <div class="demo-container coBox7">
-    <tiny-button-group :data="patternData" v-model="myPattern"></tiny-button-group>
-    <tiny-container :pattern="myPattern">
-      <tiny-layout> Main </tiny-layout>
+  <div class="demo-container">
+    <div class="option-row">
+      <span class="tip">选择版型：</span>
+      <tiny-radio-group v-model="pattern">
+        <tiny-radio label="default">默认:default</tiny-radio>
+        <tiny-radio label="classic">经典:classic</tiny-radio>
+        <tiny-radio label="simple">简约:simple</tiny-radio>
+        <tiny-radio label="fashion">时尚:fashion</tiny-radio>
+        <tiny-radio label="legend">传奇:legend</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <tiny-container :pattern="pattern">
+      <div>Main</div>
       <template #header>
-        <tiny-layout>Header</tiny-layout>
+        <div>Header</div>
       </template>
       <template #aside>
-        <tiny-layout>Aside</tiny-layout>
+        <div>Aside</div>
       </template>
       <template #footer>
-        <tiny-layout>Footer</tiny-layout>
+        <div>Footer</div>
       </template>
     </tiny-container>
   </div>
@@ -18,19 +27,27 @@
 
 <script setup lang="jsx">
 import { ref } from 'vue'
-import { Container as TinyContainer, Layout as TinyLayout, ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
+import { Container as TinyContainer, Radio as TinyRadio, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
 
-const myPattern = ref('default')
-const patternData = ref([
-  { text: '默认:default', value: 'default' },
-  { text: '经典:classic', value: 'classic' },
-  { text: '简约:simple', value: 'simple' },
-  { text: '时尚:fashion', value: 'fashion' },
-  { text: '传奇:legend', value: 'legend' }
-])
+const pattern = ref('default')
 </script>
 
-<style>
+<style scoped>
+.option-row {
+  display: flex;
+  align-items: center;
+}
+.option-row > span {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 100px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.option-row .tiny-radio-group {
+  flex-wrap: wrap;
+  height: 60px;
+}
 .demo-container .tiny-container {
   height: 300px;
   color: #5f6774;
@@ -40,25 +57,25 @@ const patternData = ref([
   margin-top: 24px;
 }
 
-.demo-container .tiny-container .tiny-container__header {
+.demo-container .tiny-container :deep(.tiny-container__header) {
   background-color: #ecf8ff;
   border: 3px solid #ffffff;
   color: #5b90af;
 }
 
-.demo-container .tiny-container .tiny-container__aside {
+.demo-container .tiny-container :deep(.tiny-container__aside) {
   background-color: #fff0f0;
   border: 3px solid #ffffff;
   color: #d27070;
 }
 
-.demo-container .tiny-container .tiny-container__main {
+.demo-container .tiny-container :deep(.tiny-container__main) {
   background-color: #fffdec;
   border: 3px solid #ffffff;
   color: #b1a859;
 }
 
-.demo-container .tiny-container .tiny-container__footer {
+.demo-container .tiny-container :deep(.tiny-container__footer) {
   background-color: #e8ffed;
   border: 3px solid #ffffff;
   color: #84a18a;

package/demos/pc/app/container/basic-usage.spec.js

@@ -2,15 +2,8 @@ import { test, expect } from '@playwright/test'
 
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('container#custom-container')
-  await page.getByText('默认布局').click()
-  await page.locator('#preview').getByText('Header').click()
-  await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 60px;')
-  await page.locator('#preview').getByText('Aside').click()
-  await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'width: 200px; top: 60px;')
-  await page.getByText('Main').click()
-  await expect(page.locator('.tiny-container > div').nth(2)).toHaveAttribute(
-    'style',
-    'top: 60px; left: 200px; bottom: 0px;'
-  )
+
+  await page.goto('container#basic-usage')
+  const header = page.locator('.pc-demo-container .tiny-container__header')
+  await expect(header).toHaveText('Header')
 })

package/demos/pc/app/container/basic-usage.vue

@@ -1,46 +1,63 @@
 <template>
-  <div class="demo-container coBox7">
-    <tiny-button-group :data="patternData" v-model="myPattern"></tiny-button-group>
-    <tiny-container :pattern="myPattern">
-      <tiny-layout> Main </tiny-layout>
+  <div class="demo-container">
+    <div class="option-row">
+      <span class="tip">选择版型：</span>
+      <tiny-radio-group v-model="pattern">
+        <tiny-radio label="default">默认:default</tiny-radio>
+        <tiny-radio label="classic">经典:classic</tiny-radio>
+        <tiny-radio label="simple">简约:simple</tiny-radio>
+        <tiny-radio label="fashion">时尚:fashion</tiny-radio>
+        <tiny-radio label="legend">传奇:legend</tiny-radio>
+      </tiny-radio-group>
+    </div>
+    <tiny-container :pattern="pattern">
+      <div>Main</div>
       <template #header>
-        <tiny-layout>Header</tiny-layout>
+        <div>Header</div>
       </template>
       <template #aside>
-        <tiny-layout>Aside</tiny-layout>
+        <div>Aside</div>
       </template>
       <template #footer>
-        <tiny-layout>Footer</tiny-layout>
+        <div>Footer</div>
       </template>
     </tiny-container>
   </div>
 </template>
 
 <script lang="jsx">
-import { Container, Layout, ButtonGroup } from '@opentiny/vue'
+import { Container, Radio, RadioGroup } from '@opentiny/vue'
 
 export default {
   components: {
     TinyContainer: Container,
-    TinyLayout: Layout,
-    TinyButtonGroup: ButtonGroup
+    TinyRadio: Radio,
+    TinyRadioGroup: RadioGroup
   },
   data() {
     return {
-      myPattern: 'default',
-      patternData: [
-        { text: '默认:default', value: 'default' },
-        { text: '经典:classic', value: 'classic' },
-        { text: '简约:simple', value: 'simple' },
-        { text: '时尚:fashion', value: 'fashion' },
-        { text: '传奇:legend', value: 'legend' }
-      ]
+      pattern: 'default'
     }
   }
 }
 </script>
 
-<style>
+<style scoped>
+.option-row {
+  display: flex;
+  align-items: center;
+}
+.option-row > span {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 100px;
+  font-size: 16px;
+  font-weight: bold;
+}
+.option-row .tiny-radio-group {
+  flex-wrap: wrap;
+  height: 60px;
+}
 .demo-container .tiny-container {
   height: 300px;
   color: #5f6774;
@@ -50,25 +67,25 @@ export default {
   margin-top: 24px;
 }
 
-.demo-container .tiny-container .tiny-container__header {
+.demo-container .tiny-container :deep(.tiny-container__header) {
   background-color: #ecf8ff;
   border: 3px solid #ffffff;
   color: #5b90af;
 }
 
-.demo-container .tiny-container .tiny-container__aside {
+.demo-container .tiny-container :deep(.tiny-container__aside) {
   background-color: #fff0f0;
   border: 3px solid #ffffff;
   color: #d27070;
 }
 
-.demo-container .tiny-container .tiny-container__main {
+.demo-container .tiny-container :deep(.tiny-container__main) {
   background-color: #fffdec;
   border: 3px solid #ffffff;
   color: #b1a859;
 }
 
-.demo-container .tiny-container .tiny-container__footer {
+.demo-container .tiny-container :deep(.tiny-container__footer) {
   background-color: #e8ffed;
   border: 3px solid #ffffff;
   color: #84a18a;

package/demos/pc/app/container/custom-with-height-composition-api.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="demo-container coBox7">
+  <div class="demo-container">
     <tiny-container
       :pattern="pattern"
       :aside-width="asideWidth"
@@ -30,7 +30,7 @@ const footerHeight = ref(80)
 const headerHeight = ref(80)
 </script>
 
-<style>
+<style scoped>
 .demo-container .tiny-container {
   height: 300px;
   color: #5f6774;
@@ -39,31 +39,31 @@ const headerHeight = ref(80)
   position: relative;
 }
 
-.demo-container .tiny-container .tiny-container__header {
+.demo-container .tiny-container :deep(.tiny-container__header) {
   background-color: #ecf8ff;
   border: 3px solid #ffffff;
   color: #5b90af;
 }
 
-.demo-container .tiny-container .tiny-container__aside {
+.demo-container .tiny-container :deep(.tiny-container__aside) {
   background-color: #fff0f0;
   border: 3px solid #ffffff;
   color: #d27070;
 }
 
-.demo-container .tiny-container .tiny-container__main {
+.demo-container .tiny-container :deep(.tiny-container__main) {
   background-color: #fffdec;
   border: 3px solid #ffffff;
   color: #b1a859;
 }
 
-.demo-container .tiny-container .tiny-container__footer {
+.demo-container .tiny-container :deep(.tiny-container__footer) {
   background-color: #e8ffed;
   border: 3px solid #ffffff;
   color: #84a18a;
 }
 
-.demo-container .tiny-container .main .changePattern .tiny-radio {
+.demo-container .tiny-container :deep(.main .changePattern .tiny-radio) {
   color: #a3a355;
   font-size: 16px;
   margin: 0 7px;

package/demos/pc/app/container/custom-with-height.spec.js

@@ -2,12 +2,8 @@ import { test, expect } from '@playwright/test'
 
 test('自定义宽度和高度', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+
   await page.goto('container#custom-with-height')
-  await page.locator('.f12 > div:nth-child(6)').click()
-  await page.getByText('header-height：80').click()
-  await expect(page.locator('.tiny-container > div').first()).toHaveAttribute('style', 'height: 80px;')
-  await page.getByText('aside-width：200').click()
-  await expect(page.locator('.tiny-container > div').nth(1)).toHaveAttribute('style', 'width: 200px; top: 80px;')
-  await page.getByText('footer-height：80').click()
-  await expect(page.locator('.tiny-container > div').nth(3)).toHaveAttribute('style', 'height: 80px; left: 200px;')
+  const header = page.locator('.pc-demo-container .tiny-container__header')
+  await expect(header).toHaveCSS('height', '80px')
 })

package/demos/pc/app/container/custom-with-height.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="demo-container coBox7">
+  <div class="demo-container">
     <tiny-container
       :pattern="pattern"
       :aside-width="asideWidth"
@@ -39,7 +39,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .demo-container .tiny-container {
   height: 300px;
   color: #5f6774;
@@ -48,31 +48,31 @@ export default {
   position: relative;
 }
 
-.demo-container .tiny-container .tiny-container__header {
+.demo-container .tiny-container :deep(.tiny-container__header) {
   background-color: #ecf8ff;
   border: 3px solid #ffffff;
   color: #5b90af;
 }
 
-.demo-container .tiny-container .tiny-container__aside {
+.demo-container .tiny-container :deep(.tiny-container__aside) {
   background-color: #fff0f0;
   border: 3px solid #ffffff;
   color: #d27070;
 }
 
-.demo-container .tiny-container .tiny-container__main {
+.demo-container .tiny-container :deep(.tiny-container__main) {
   background-color: #fffdec;
   border: 3px solid #ffffff;
   color: #b1a859;
 }
 
-.demo-container .tiny-container .tiny-container__footer {
+.demo-container .tiny-container :deep(.tiny-container__footer) {
   background-color: #e8ffed;
   border: 3px solid #ffffff;
   color: #84a18a;
 }
 
-.demo-container .tiny-container .main .changePattern .tiny-radio {
+.demo-container .tiny-container :deep(.main .changePattern .tiny-radio) {
   color: #a3a355;
   font-size: 16px;
   margin: 0 7px;

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

@@ -41,7 +41,7 @@ export default {
     {
       'name': 'container',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'pattern',
           'type': `'default' | 'simple' | 'legend' | 'classic' | 'fashion'`,

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

@@ -4,21 +4,28 @@ test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dropdown#basic-usage')
 
-  const preview = page.locator('#preview')
-  const dropDown = preview.locator('.tiny-dropdown')
-  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
-  const dropDownMenuItem = page.locator('body > .tiny-dropdown-menu > .tiny-dropdown-item')
+  const wrap = page.locator('#basic-usage')
+  const dropDown = wrap.locator('.tiny-dropdown')
+  console.log(dropDown)
+  const dropDownMenu = page.locator('body').locator('.my-class')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+  const dropDownSvg = dropDown.locator('svg')
 
-  await expect(dropDown.locator('svg > path')).toHaveAttribute('d', 'M2 6h20L12 19z')
+  // 箭头是否存在
+  await expect(dropDownSvg).toBeVisible()
+  await expect(dropDownSvg.locator('path')).toHaveAttribute('d', 'M2 6h20L12 19z')
+
+  await page.waitForTimeout(500)
   await dropDown.hover()
   await expect(dropDownMenu).toBeVisible()
   // 箭头是否变成向上
-  await expect(dropDown.locator('svg')).toHaveCSS('transform', 'matrix(-1, 0, 0, -1, 0, 0)')
+  await expect(dropDown.locator('.tiny-dropdown--visible')).toHaveCSS('transform', 'matrix(1, 0, 0, -1, 0, 0)')
   await expect(dropDownMenuItem).toHaveCount(6)
   await expect(dropDownMenuItem.filter({ hasText: '双皮奶' })).toHaveClass(/is-disabled/)
   await expect(dropDownMenuItem.filter({ hasText: '双皮奶' })).toHaveCSS('cursor', 'not-allowed')
 
   // 测试悬浮效果
+  await page.waitForTimeout(500)
   await dropDownMenuItem.first().hover()
   await expect(dropDownMenuItem.first()).toHaveCSS('color', 'rgb(82, 110, 204)')
   await expect(dropDownMenuItem.first()).toHaveCSS('background-color', 'rgb(242, 245, 252)')

package/demos/pc/app/dropdown/disabled.spec.ts

@@ -4,14 +4,58 @@ test('禁用下拉菜单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dropdown#disabled')
 
-  const preview = page.locator('#preview')
-  const disabledDropDown = preview.locator('.tiny-dropdown').nth(1)
+  const wrap = page.locator('#disabled')
+  const disabledDropDown = wrap.locator('.tiny-dropdown').nth(0)
+  const dropDownTrigger = disabledDropDown.locator('.tiny-dropdown__trigger')
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
 
-  await expect(disabledDropDown.locator('.tiny-dropdown__trigger')).toHaveAttribute('disabled', 'true')
-  await expect(disabledDropDown.locator('.tiny-dropdown__trigger')).toHaveCSS('cursor', 'not-allowed')
-  await expect(disabledDropDown.locator('.tiny-dropdown__title')).toHaveCSS('color', 'rgb(173, 176, 184)')
+  await expect(dropDownTrigger).toHaveClass(/is-disabled/)
+  await expect(dropDownTrigger).toHaveCSS('cursor', 'not-allowed')
+  await expect(dropDownTrigger).toHaveCSS('color', 'rgb(173, 176, 184)')
   await expect(disabledDropDown.locator('svg')).toHaveCSS('fill', 'rgb(173, 176, 184)')
+  await page.waitForTimeout(1200)
   await disabledDropDown.hover()
   await expect(dropDownMenu).not.toBeVisible()
 })
+
+test('按钮类型禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#disabled')
+
+  const wrap = page.locator('#disabled')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const textButton = dropDown.locator('.tiny-button').nth(0)
+  const triggerButton = dropDown.locator('.tiny-button').nth(1)
+
+  // 按钮有禁用类名
+  await expect(textButton).toHaveClass(/is-disabled/)
+  await expect(triggerButton).toHaveClass(/is-disabled/)
+  // 禁用手势
+  await expect(textButton).toHaveCSS('cursor', 'not-allowed')
+  await expect(triggerButton).toHaveCSS('cursor', 'not-allowed')
+  // 禁用文本色
+  await expect(textButton).toHaveCSS('color', 'rgb(173, 176, 184)')
+  await expect(triggerButton).toHaveCSS('color', 'rgb(173, 176, 184)')
+  // 图标禁用色
+  await expect(triggerButton.locator('svg')).toHaveCSS('fill', 'rgb(173, 176, 184)')
+  await page.waitForTimeout(1200)
+  await triggerButton.hover()
+  await expect(dropDownMenu).not.toBeVisible()
+})
+
+test('菜单项禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#disabled')
+
+  const wrap = page.locator('#disabled')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(2)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+
+  await page.waitForTimeout(1200)
+  await dropDown.hover()
+  await expect(dropDownMenu).toBeVisible()
+  await expect(dropDownMenuItem.filter({ hasText: '不能选择' })).toHaveClass(/is-disabled/)
+  await expect(dropDownMenuItem.filter({ hasText: '不能选择' })).toHaveCSS('color', 'rgb(173, 176, 184)')
+})

package/demos/pc/app/dropdown/events.spec.ts

@@ -1,19 +1,51 @@
 import { test, expect } from '@playwright/test'
 
-test('内置事件', async ({ page }) => {
+test('按钮类型内置事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dropdown#events')
 
-  const preview = page.locator('#preview')
-  const dropDown = preview.locator('.tiny-dropdown')
+  const wrap = page.locator('#events')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(0)
   const notify = page.locator('.tiny-notify')
   const dropDownMenuItem = page.locator('body > .tiny-dropdown-menu > .tiny-dropdown-item')
 
-  await dropDown.locator('button').first().click()
+  // 验证 button-click
+  await dropDown.locator('button').nth(0).click()
   await expect(notify.filter({ hasText: '下拉菜单内置按钮点击事件' })).toBeVisible()
+
+  // 验证 visible-change
+  await page.waitForTimeout(500)
   await dropDown.locator('button').nth(1).hover()
   await expect(notify.filter({ hasText: '下拉菜单显隐事件，当前为显示' })).toBeVisible()
-  await dropDownMenuItem.filter({ hasText: '狮子头' }).click()
+  await page.waitForTimeout(500)
+  await dropDown.locator('button').nth(0).hover()
   await expect(notify.filter({ hasText: '下拉菜单显隐事件，当前为隐藏' })).toBeVisible()
+
+  // 验证 item-click
+  await page.waitForTimeout(500)
+  await dropDown.locator('button').nth(1).hover()
+  await dropDownMenuItem.filter({ hasText: '黄金糕' }).click()
   await expect(notify.filter({ hasText: 'itemClick 回调事件' })).toBeVisible()
 })
+
+test('配置式内置事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#events')
+
+  const wrap = page.locator('#events')
+  const notify = page.locator('.tiny-notify')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+  await expect(dropDown).toHaveClass(/options-event/)
+  const dropDownMenuItem = page.locator('body > .tiny-dropdown-menu > .tiny-dropdown-item')
+
+  // 验证 visible-change
+  await page.waitForTimeout(500)
+  await dropDown.hover()
+  await expect(notify.filter({ hasText: '下拉菜单显隐事件，当前为显示' })).toBeVisible()
+
+  // 验证 item-click
+  await dropDownMenuItem.filter({ hasText: '黄金糕' }).click()
+  await expect(notify.filter({ hasText: 'itemClick 回调事件' })).toBeVisible()
+  // 验证 visible-change
+  await expect(notify.filter({ hasText: '下拉菜单显隐事件，当前为隐藏' })).toBeVisible()
+})

package/demos/pc/app/dropdown/events.vue

@@ -18,7 +18,7 @@
     </tiny-dropdown>
 
     <p>场景2：配置式</p>
-    <tiny-dropdown @item-click="itemClick" @button-click="buttonClick" @visible-change="visibleChange">
+    <tiny-dropdown class="options-event" @item-click="itemClick" @visible-change="visibleChange">
       <template #dropdown>
         <tiny-dropdown-menu :options="options"> </tiny-dropdown-menu>
       </template>

package/demos/pc/app/dropdown/hide-on-click.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('dropdown#hide-on-click')
 
-  const preview = page.locator('#preview')
-  const dropDown = preview.locator('.tiny-dropdown')
+  const wrap = page.locator('#hide-on-click')
+  const dropDown = wrap.locator('.tiny-dropdown')
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
-  const dropDownMenuItem = page.locator('body > .tiny-dropdown-menu > .tiny-dropdown-item')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
 
+  await page.waitForTimeout(1300)
   await dropDown.hover()
   await expect(dropDownMenu).toBeVisible()
   // 点击菜单项后菜单不消失

package/demos/pc/app/dropdown/multi-level-composition-api.vue

@@ -12,11 +12,11 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { reactive } from 'vue'
 import { iconStarDisable } from '@opentiny/vue-icon'
 import { Dropdown as TinyDropdown, DropdownMenu as TinyDropdownMenu, Notify } from '@opentiny/vue'
 
-const options = ref([
+const options = reactive([
   {
     label: '老友粉1',
     icon: iconStarDisable(),
@@ -39,7 +39,33 @@ const options = ref([
   }
 ])
 
-function itemClick(data) {
+const menuOptions = reactive({
+  options: [
+    {
+      label: '老友粉',
+      icon: iconStarDisable(),
+      children: [
+        {
+          label: '老友粉2.1',
+          children: [{ label: '狮子头3.1' }]
+        },
+        { label: '老友粉2.2' },
+        { label: '老友粉2.3', disabled: true }
+      ]
+    },
+    {
+      label: '狮子头',
+      divided: true
+    },
+    {
+      label: '黄金糕',
+      divided: true,
+      icon: iconStarDisable()
+    }
+  ]
+})
+
+const itemClick = (data) => {
   Notify({
     type: 'info',
     title: 'itemData',

package/demos/pc/app/dropdown/multi-level.spec.ts

@@ -1,16 +1,42 @@
 import { test, expect } from '@playwright/test'
 
-test('多级菜单', async ({ page }) => {
+test('多级菜单,使用 menu-options', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dropdown#multi-level')
 
-  const preview = page.locator('#preview')
-  const dropDown = preview.locator('.tiny-dropdown')
-  const dropDownMenuItem = page.locator('body > .tiny-dropdown-menu > .tiny-dropdown-item')
+  const wrap = page.locator('#multi-level')
+  const dropDown = wrap.locator('.tiny-dropdown').first()
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
   const notify = page.locator('.tiny-notify')
 
+  await page.waitForTimeout(1500)
   await dropDown.hover()
-  await dropDownMenuItem.getByText('老友粉1').hover()
+  await expect(dropDownMenu).toBeVisible()
+  await dropDownMenuItem.first().hover()
+  await dropDownMenuItem.getByText('老友粉2.1').hover()
+  await dropDownMenuItem.getByText('狮子头3.1').click()
+  await expect(
+    notify.filter({
+      hasText: '配置式可以通过 data.itemData 获取配置数据：{"label":"狮子头3.1"}'
+    })
+  ).toBeVisible()
+})
+
+test('多级菜单,使用 options', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#multi-level')
+
+  const wrap = page.locator('#multi-level')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+  const notify = page.locator('.tiny-notify')
+
+  await page.waitForTimeout(1500)
+  await dropDown.hover()
+  await expect(dropDownMenu).toBeVisible()
+  await dropDownMenuItem.first().hover()
   await dropDownMenuItem.getByText('老友粉2.1').hover()
   await dropDownMenuItem.getByText('狮子头3.1').click()
   await expect(