@opentiny/vue-docs 2.1.10 → 2.2.0

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <p>场景1：使用 menu-options 属性定义 children</p>
-    <tiny-dropdown :menu-options="menuOptions"></tiny-dropdown>
+    <tiny-dropdown :menu-options="menuOptions" @item-click="itemClick"></tiny-dropdown>
     <p>场景2：使用 options 属性定义 children</p>
     <tiny-dropdown @item-click="itemClick">
       <template #dropdown>
@@ -68,15 +68,7 @@ export default {
             icon: iconStarDisable()
           }
         ]
-      },
-      childrenOption: [
-        {
-          label: '老友粉2.1',
-          children: [{ label: '狮子头3.1' }]
-        },
-        { label: '老友粉2.2' },
-        { label: '老友粉2.3', disabled: true }
-      ]
+      }
     }
   },
   methods: {

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

@@ -1,18 +1,98 @@
 import { test, expect } from '@playwright/test'
 
-test('使用配置式', async ({ page }) => {
+// 场景1
+test('配置式：使用 menu-options', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dropdown#options')
 
-  const preview = page.locator('#preview')
-  const dropDown = preview.locator('.tiny-dropdown')
-  const menuOptionDropDown = dropDown.first()
-  const titleOptionDropDown = dropDown.nth(2)
+  const wrap = page.locator('#options')
+  const dropDown = wrap.locator('.tiny-dropdown').first()
   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 expect(titleOptionDropDown).toContainText('点击下拉')
-  await menuOptionDropDown.hover()
+  await page.waitForTimeout(200)
+  await dropDown.hover()
+  await expect(dropDownMenu.first()).toBeVisible()
+  await expect(dropDownMenuItem.first()).toContainText('老友粉')
+  await expect(dropDownMenuItem.first()).toHaveClass(/is-disabled/)
+  await expect(dropDownMenuItem.nth(2)).toContainText('黄金糕')
+  // 检测配置的图标是否出现
+  await expect(dropDownMenuItem.nth(2).locator('svg > path')).toHaveAttribute('d', /^M12 2\.8c\.1 0.+2-\.6-\.3-1-\.3z$/)
+})
+
+// 场景2
+test('配置式：使用 menu-options 和 title', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#options')
+
+  const wrap = page.locator('#options')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+
+  await expect(dropDown).toContainText('点击下拉')
+  await page.waitForTimeout(200)
+  await dropDown.hover()
+  await expect(dropDownMenu.first()).toBeVisible()
+  await expect(dropDownMenuItem.first()).toContainText('老友粉')
+  await expect(dropDownMenuItem.first()).toHaveClass(/is-disabled/)
+  await expect(dropDownMenuItem.nth(2)).toContainText('黄金糕')
+  // 检测配置的图标是否出现
+  await expect(dropDownMenuItem.nth(2).locator('svg > path')).toHaveAttribute('d', /^M12 2\.8c\.1 0.+2-\.6-\.3-1-\.3z$/)
+})
+
+// 场景3
+test('配置式：使用 menu-options 和 text-field', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#options')
+
+  const wrap = page.locator('#options')
+  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.first()).toBeVisible()
+  await expect(dropDownMenuItem.first()).toContainText('老友粉')
+  await expect(dropDownMenuItem.first()).toHaveClass(/is-disabled/)
+  await expect(dropDownMenuItem.nth(2)).toContainText('黄金糕')
+  // 检测配置的图标是否出现
+  await expect(dropDownMenuItem.nth(2).locator('svg > path')).toHaveAttribute('d', /^M12 2\.8c\.1 0.+2-\.6-\.3-1-\.3z$/)
+})
+
+// 场景4
+test('配置式：使用 options', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#options')
+
+  const wrap = page.locator('#options')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(3)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+
+  await page.waitForTimeout(300)
+  await dropDown.hover()
+  await expect(dropDownMenu.first()).toBeVisible()
+  await expect(dropDownMenuItem.first()).toContainText('老友粉')
+  await expect(dropDownMenuItem.first()).toHaveClass(/is-disabled/)
+  await expect(dropDownMenuItem.nth(2)).toContainText('黄金糕')
+  // 检测配置的图标是否出现
+  await expect(dropDownMenuItem.nth(2).locator('svg > path')).toHaveAttribute('d', /^M12 2\.8c\.1 0.+2-\.6-\.3-1-\.3z$/)
+})
+
+// 场景5
+test('配置式：使用 options 和 text-field ', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('dropdown#options')
+
+  const wrap = page.locator('#options')
+  const dropDown = wrap.locator('.tiny-dropdown').nth(4)
+  const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
+  const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
+
+  await page.waitForTimeout(300)
+  await dropDown.hover()
   await expect(dropDownMenu.first()).toBeVisible()
   await expect(dropDownMenuItem.first()).toContainText('老友粉')
   await expect(dropDownMenuItem.first()).toHaveClass(/is-disabled/)

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

@@ -4,8 +4,9 @@ test('不同尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dropdown#size')
 
-  const preview = page.locator('#preview')
-  const dropDown = preview.locator('.tiny-dropdown')
+  const wrap = page.locator('#size')
+  const dropDown = wrap.locator('.tiny-dropdown')
+
   const defaultDropDown = dropDown.first()
   const mediumDropDown = dropDown.nth(1)
   const smallDropDown = dropDown.nth(2)

package/demos/pc/app/dropdown/slots-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-dropdown @visible-change="visibleChange">
     <span>默认插槽</span>
     <template #suffix-icon>
-      <tiny-icon-sandwich-collapse></tiny-icon-sandwich-collapse>
+      <tiny-icon-ascending></tiny-icon-ascending>
     </template>
     <template #dropdown>
       <tiny-dropdown-menu>
@@ -17,12 +17,12 @@
 </template>
 
 <script setup>
-import { iconSandwichCollapse } from '@opentiny/vue-icon'
+import { iconAscending } from '@opentiny/vue-icon'
 import {
   Dropdown as TinyDropdown,
   DropdownMenu as TinyDropdownMenu,
   DropdownItem as TinyDropdownItem
 } from '@opentiny/vue'
 
-const TinyIconSandwichCollapse = iconSandwichCollapse()
+const TinyIconAscending = iconAscending()
 </script>

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

@@ -1,11 +1,18 @@
 import { test, expect } from '@playwright/test'
 
-test('默认插槽', async ({ page }) => {
+test('插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('dropdown#slot-default')
+  await page.goto('dropdown#slots')
 
-  const preview = page.locator('#preview')
-  const dropDown = preview.locator('.tiny-dropdown')
+  const wrap = page.locator('#slots')
+  const dropDown = wrap.locator('.tiny-dropdown')
+  const dropDownSvg = dropDown.locator('svg')
 
+  // 默认插槽
   await expect(dropDown).toContainText('默认插槽')
+  // suffix-icon 插槽
+  await expect(dropDownSvg.locator('path')).toHaveAttribute(
+    'd',
+    'M337.288 105.538c11.775-6.513 13.163-7.275 22.5-2.313l4.188 2.3c3.712 4.863 4.387 5.75 5.063 9.962l.475 3.388v377.463h-37.5V163.875l-105.5 105.538L200 242.9l137.288-137.362zM500 418.75v37.5h-75v-37.5h75zm37.5-87.5v37.5H425v-37.5h112.5zm37.5-87.5v37.5H425v-37.5h150zm37.5-87.5v37.5H425v-37.5h187.5z'
+  )
 })

package/demos/pc/app/dropdown/split-button.spec.ts

@@ -1,11 +1,11 @@
 import { test, expect } from '@playwright/test'
 
-test('触发对象,配置split-button属性', async ({ page }) => {
+test('按钮类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dropdown#split-button')
 
-  const preview = page.locator('#preview')
-  const dropDown = preview.locator('.tiny-dropdown')
+  const wrap = page.locator('#split-button')
+  const dropDown = wrap.locator('.tiny-dropdown')
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const textBtn = dropDown.locator('button').first()
   const dropDownBtn = dropDown.locator('button').nth(1)
@@ -16,7 +16,9 @@ test('触发对象,配置split-button属性', async ({ page }) => {
   await expect(textBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
   await expect(dropDownBtn).toHaveCSS('background-color', 'rgb(80, 212, 171)')
   await expect(dropDownBtn).toHaveCSS('color', 'rgb(255, 255, 255)')
+
   // 文字悬浮不出现下拉菜单
+  await page.waitForTimeout(500)
   await textBtn.hover()
   await expect(dropDownMenu).not.toBeVisible()
   await dropDownBtn.hover()

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

@@ -4,8 +4,8 @@ test('自定义文本', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dropdown#title')
 
-  const preview = page.locator('#preview')
-  const dropDown = preview.locator('.tiny-dropdown')
+  const wrap = page.locator('#title')
+  const dropDown = wrap.locator('.tiny-dropdown')
 
   await expect(dropDown).toContainText('自定义文本')
 })

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

@@ -4,14 +4,18 @@ test('触发方式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dropdown#trigger')
 
-  const preview = page.locator('#preview')
-  const dropDown = preview.locator('.tiny-dropdown')
+  const wrap = page.locator('#trigger')
+  const dropDown = wrap.locator('.tiny-dropdown')
   const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
   const hoverTrigger = dropDown.first()
   const clickTrigger = dropDown.nth(1)
 
+  // hover
+  await page.waitForTimeout(1200)
   await hoverTrigger.hover()
   await expect(dropDownMenu.first()).toBeVisible()
+  // click
+  await page.waitForTimeout(1200)
   await clickTrigger.hover()
   await expect(dropDownMenu.nth(1)).not.toBeVisible()
   await clickTrigger.click()

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

@@ -5,7 +5,10 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '<p></p>\n', 'en-US': '<p></p>\n' },
+      'desc': {
+        'zh-CN': '<p>使用 tiny-dropdown-item 定义菜单节点</p>\n',
+        'en-US': '<p>Define menu nodes using tiny-dropdown-item</p>\n'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -246,23 +249,21 @@ export default {
         },
         {
           'name': 'size',
-          'type': 'string',
+          'type': '"medium" | "small" | "mini"',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '菜单尺寸，可选值： medium / small / mini。注意：只在 split-button为 true 的情况下生效',
-            'en-US': 'Menu size, optional values: medium/small/mini. Note: Only takes effect when split-button is true'
+            'zh-CN': '菜单尺寸。注意：只在 split-button为 true 的情况下生效',
+            'en-US': 'Menu size. Note: Only takes effect when split-button is true'
           },
           'demoId': 'size'
         },
         {
           'name': 'type',
-          'type': 'string',
+          'type': '"primary" | "success" | "warning" | "danger" | "info" | "text"',
           'defaultValue': '',
           'desc': {
-            'zh-CN':
-              '按钮类型，可选值: primary / success / warning / danger / info / text。注意：只在split-button为 true 的情况下有效',
-            'en-US':
-              'Button type, optional values: primary/success/warning/danger/info/text. Note: Only valid if split button is true'
+            'zh-CN': '按钮类型。注意：只在split-button为 true 的情况下有效',
+            'en-US': 'Button type. Note: Only valid if split button is true'
           },
           'demoId': 'split-button'
         },
@@ -278,11 +279,11 @@ export default {
         },
         {
           'name': 'trigger',
-          'type': 'string',
+          'type': '"hover" | "click"',
           'defaultValue': 'hover',
           'desc': {
-            'zh-CN': '触发下拉的方式。可选值：hover / click',
-            'en-US': 'Trigger the dropdown method. Optional values: hover / click'
+            'zh-CN': '触发下拉的方式',
+            'en-US': 'Trigger the dropdown method'
           },
           'demoId': 'trigger'
         },
@@ -310,8 +311,8 @@ export default {
       'events': [
         {
           'name': 'button-click',
-          'type': 'Function() => void',
-          'defaultValue': 'Function',
+          'type': '() => void',
+          'defaultValue': '',
           'desc': {
             'zh-CN': '监听左侧按钮点击事件，仅 split-button 为 true 时生效',
             'en-US': 'Listen for the left button click event, only effective when split-button is true'
@@ -320,7 +321,8 @@ export default {
         },
         {
           'name': 'item-click',
-          'type': 'Function(data:IItemClickParam) => void',
+          'type': '(data:IItemClickParam) => void',
+          'typeAnchorName': 'IItemClickParam',
           'defaultValue': '',
           'desc': {
             'zh-CN': '监听点击菜单项事件',
@@ -330,7 +332,7 @@ export default {
         },
         {
           'name': 'visible-change',
-          'type': 'Function(status:boolean) => void',
+          'type': '(status:boolean) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '监听下拉框的显示或隐藏状态',
@@ -363,7 +365,7 @@ export default {
       ]
     },
     {
-      'name': 'dropdownMenu',
+      'name': 'dropdown-menu',
       'type': 'component',
       'properties': [
         {
@@ -379,18 +381,17 @@ export default {
         },
         {
           'name': 'placement',
-          'type': 'string',
+          'type': ' "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end"',
           'defaultValue': 'bottom-end',
           'desc': {
-            'zh-CN': '菜单弹出位置。可选值: top / top-start / top-end / bottom / bottom-start / bottom-end',
-            'en-US':
-              'Menu pop-up location. Optional values: top / top-start / top-end/bottom / bottom-start / bottom-end'
+            'zh-CN': '菜单弹出位置',
+            'en-US': 'Menu pop-up location '
           },
           'demoId': 'basic-usage'
         },
         {
           'name': 'popper-class',
-          'type': '',
+          'type': 'string',
           'defaultValue': '',
           'desc': {
             'zh-CN': '下拉弹框的类名，用于自定义样式',
@@ -423,28 +424,37 @@ export default {
       ]
     },
     {
-      'name': 'dropdownItem',
+      'name': 'dropdown-item',
       'type': 'component',
       'properties': [
         {
           'name': 'disabled',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '是否禁用', 'en-US': 'Is it disabled' },
+          'desc': {
+            'zh-CN': '是否禁用',
+            'en-US': 'Is it disabled'
+          },
           'demoId': 'disabled'
         },
         {
           'name': 'divided',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '是否显示分割线', 'en-US': 'Show split lines' },
+          'desc': {
+            'zh-CN': '是否显示分割线',
+            'en-US': 'Show split lines'
+          },
           'demoId': 'events'
         },
         {
           'name': 'icon',
-          'type': '',
+          'type': 'VueComponent',
           'defaultValue': '',
-          'desc': { 'zh-CN': '内嵌图标', 'en-US': 'Embedded icon' },
+          'desc': {
+            'zh-CN': '内嵌图标',
+            'en-US': 'Embedded icon'
+          },
           'demoId': 'events'
         },
         {
@@ -452,14 +462,20 @@ export default {
           'type': 'IItemData',
           'typeAnchorName': 'IItemData',
           'defaultValue': '',
-          'desc': { 'zh-CN': '菜单项的配置信息', 'en-US': 'Configuration information for menu items' },
+          'desc': {
+            'zh-CN': '菜单项的配置信息',
+            'en-US': 'Configuration information for menu items'
+          },
           'demoId': 'events'
         },
         {
           'name': 'label',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '菜单项的文本', 'en-US': 'Text for menu items' },
+          'desc': {
+            'zh-CN': '菜单项的文本',
+            'en-US': 'Text for menu items'
+          },
           'demoId': 'events'
         }
       ],
@@ -468,7 +484,10 @@ export default {
           'name': 'default',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '菜单项文本区域', 'en-US': 'Menu item text area' },
+          'desc': {
+            'zh-CN': '菜单项文本区域',
+            'en-US': 'Menu item text area'
+          },
           'demoId': 'basic-usage'
         }
       ]
@@ -480,10 +499,10 @@ export default {
       type: 'interface',
       code: `
 interface IMenuOption {
-  "options": IItemData[]
-  "textField"?: string
-  "popper-class"?: string
-  "placement"?: top | top-start | top-end | bottom | bottom-start | bottom-end
+  options: IItemData[]
+  textField?: string
+  popperClass?: string
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'
 }        
 `
     },
@@ -492,13 +511,13 @@ interface IMenuOption {
       type: 'interface',
       code: `        
 interface IMenuOption {
-  "itemData": IItemData
+  itemData: IItemData
   // dropdownItem 组件的实例
-  "vm": {
-    "selected": boolean
-    "textField: string
-    "tipPosition: string
-    "$el": HTMLElement
+  vm: {
+    selected: boolean
+    textField: string
+    tipPosition: string
+    $el: HTMLElement
   }
 }
 `
@@ -508,9 +527,9 @@ interface IMenuOption {
       type: 'interface',
       code: `        
 interface IItemData {
-  "label"?: string
-  "disabled"?: boolean
-  "divided"?: boolean
+  label?: string
+  disabled?: boolean
+  divided?: boolean
 }
 `
     }

package/demos/pc/app/fall-menu/custom-menuitem-composition-api.vue

@@ -2,13 +2,13 @@
   <div class="left-panel">
     <tiny-fall-menu :data="dataset">
       <template #level1="data">
-        <a>{{ data.slotScope.title + 'level1' }}</a>
+        <a>{{ `${data.slotScope.title} level1 ` }}</a>
       </template>
       <template #level2="data">
-        <span>{{ data.slotScope.title + 'level2' }}</span>
+        <span>{{ `${data.slotScope.title} level2 ` }}</span>
       </template>
       <template #level3="data">
-        <a v-for="(level3, index) in data.slotScope" :href="level3.url" :key="index">{{ level3.title + 'level3' }}</a>
+        <a v-for="(level3, index) in data.slotScope" :href="level3.url" :key="index">{{ `${level3.title} level3 ` }}</a>
       </template>
     </tiny-fall-menu>
   </div>

package/demos/pc/app/fall-menu/custom-menuitem.vue

@@ -2,13 +2,13 @@
   <div class="left-panel">
     <fall-menu :data="dataset">
       <template #level1="data">
-        <a>{{ data.slotScope.title + 'level1' }}</a>
+        <a>{{ `${data.slotScope.title} level1 ` }}</a>
       </template>
       <template #level2="data">
-        <span>{{ data.slotScope.title + 'level2' }}</span>
+        <span>{{ `${data.slotScope.title} level2 ` }}</span>
       </template>
       <template #level3="data">
-        <a v-for="(level3, index) in data.slotScope" :href="level3.url" :key="index">{{ level3.title + 'level3' }}</a>
+        <a v-for="(level3, index) in data.slotScope" :href="level3.url" :key="index">{{ `${level3.title} level3 ` }}</a>
       </template>
     </fall-menu>
   </div>

package/demos/pc/app/fall-menu/webdoc/fall-menu.js

@@ -5,7 +5,7 @@ export default {
     {
       'demoId': 'data-basic',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': { 'zh-CN': '详细用法参考如下示例。', 'en-US': 'For details, see the following example.' },
       'codeFiles': ['data-resource.vue']
     },
     {
@@ -44,10 +44,10 @@ export default {
     {
       'name': 'fall-menu',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'data',
-          'type': 'object , Array',
+          'type': 'object | object[]',
           'defaultValue': '',
           'desc': {
             'zh-CN': '设置瀑布菜单的数据。',
@@ -93,7 +93,8 @@ export default {
           'desc': { 'zh-CN': '自定义右侧切换图标', 'en-US': 'Customize the switch icon on the right.' },
           'demoId': 'custom-slider-icon'
         }
-      ]
+      ],
+      types: []
     }
   ]
 }

package/demos/pc/app/form/{basic-usage.spec.js → basic-usage.spec.ts}

@@ -2,10 +2,10 @@ import { test, expect } from '@playwright/test'
 
 test('测试基本表单', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('form#frequently-used-form')
+  await page.goto('form#basic-usage')
 
-  const preview = page.locator('#preview')
-  const numeric = preview.locator('.tiny-numeric')
+  const demo = page.locator('#basic-usage')
+  const numeric = demo.locator('.tiny-numeric')
   const numericInput = numeric.locator('.tiny-numeric__input-inner')
   const increaseIcon = numeric.locator('.tiny-numeric__increase')
   const decreaseIcon = numeric.locator('.tiny-numeric__decrease')
@@ -19,29 +19,23 @@ test('测试基本表单', async ({ page }) => {
   await expect(numericInput).toHaveValue('0')
 
   // 日期选择器
-  const datePicker = preview.getByRole('textbox').first()
+  const datePicker = demo.getByRole('textbox').first()
   await datePicker.click()
   await page.getByRole('cell', { name: '15' }).getByText('15').click()
   await expect(datePicker).toHaveValue(/15/)
 
   // 時間选择器
-  const timePicker = preview.getByRole('textbox').nth(1)
+  const timePicker = demo.getByRole('textbox').nth(1)
   await timePicker.click()
   await page.getByRole('listitem').filter({ hasText: '00:30' }).click()
   await expect(timePicker).toHaveValue('00:30')
 
   // 其他输入
-  await preview.getByPlaceholder('click').hover()
+  await demo.getByPlaceholder('click').first().hover()
   await expect(page.getByRole('tooltip', { name: 'TinyUI Form Demo' })).toBeVisible()
-  await preview.getByPlaceholder('click').click()
-  await preview.getByPlaceholder('click').fill('123')
-  await preview.locator('textarea').click()
-  await preview.locator('textarea').fill('456')
 
   // 提交按钮
   const dialog = page.getByText('消息提示提交确认')
-  await preview.getByRole('button', { name: '提交' }).click()
+  await demo.getByRole('button', { name: '提交' }).click()
   await expect(dialog).toBeVisible()
-  await page.getByRole('button', { name: '确认' }).click()
-  await expect(dialog).not.toBeVisible()
 })

package/demos/pc/app/form/custom-validation-rule-composition-api.vue

@@ -58,7 +58,9 @@ const rules = ref({
 })
 
 function handleSubmit() {
-  ruleFormRef.value.validate()
+  ruleFormRef.value.validate(() => {
+    // empty
+  })
 }
 
 function changeRule() {