@opentiny/vue-docs 2.2.4 → 2.2.6

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

@@ -5,22 +5,27 @@ test('多级菜单,使用 menu-options', async ({ page }) => {
   await page.goto('dropdown#multi-level')
 
   const wrap = page.locator('#multi-level')
-  const dropDown = wrap.locator('.tiny-dropdown').first()
+  const dropDown = wrap.locator('.tiny-dropdown').nth(0)
   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 page.waitForTimeout(2000)
   await dropDown.hover()
   await expect(dropDownMenu).toBeVisible()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.first().hover()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.getByText('老友粉2.1').hover()
+  await expect(dropDownMenuItem.getByText('狮子头3.1')).toBeVisible()
   await dropDownMenuItem.getByText('狮子头3.1').click()
+  await page.waitForTimeout(1000)
+
   await expect(
-    notify.filter({
+    page.locator('.tiny-modal').filter({
       hasText: '配置式可以通过 data.itemData 获取配置数据：{"label":"狮子头3.1"}'
     })
-  ).toBeVisible()
+  ).toHaveCount(1)
+  await page.waitForTimeout(500)
 })
 
 test('多级菜单,使用 options', async ({ page }) => {
@@ -31,17 +36,19 @@ test('多级菜单,使用 options', async ({ page }) => {
   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 page.waitForTimeout(2000)
   await dropDown.hover()
   await expect(dropDownMenu).toBeVisible()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.first().hover()
+  await page.waitForTimeout(500)
   await dropDownMenuItem.getByText('老友粉2.1').hover()
   await dropDownMenuItem.getByText('狮子头3.1').click()
+  await page.waitForTimeout(1000)
   await expect(
-    notify.filter({
+    page.locator('.tiny-modal').filter({
       hasText: '配置式可以通过 data.itemData 获取配置数据：{"label":"狮子头3.1"}'
     })
-  ).toBeVisible()
+  ).toHaveCount(1)
 })

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

@@ -13,7 +13,7 @@
 
 <script>
 import { iconStarDisable } from '@opentiny/vue-icon'
-import { Dropdown, DropdownMenu, Notify } from '@opentiny/vue'
+import { Dropdown, DropdownMenu, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -73,12 +73,8 @@ export default {
   },
   methods: {
     itemClick(data) {
-      Notify({
-        type: 'info',
-        title: 'itemData',
-        message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`,
-        position: 'top-right',
-        duration: 2000
+      Modal.message({
+        message: `配置式可以通过 data.itemData 获取配置数据：${JSON.stringify(data.itemData)}`
       })
     }
   }

package/demos/pc/app/dropdown/show-icon-composition-api.vue

@@ -1,26 +1,49 @@
 <template>
-  <tiny-dropdown :show-icon="false">
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
-        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>场景1： 只显示文本</p>
+    <tiny-dropdown :show-icon="false">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+    <p>场景2：自定义图且只显示图标</p>
+    <tiny-dropdown title="" :suffix-icon="tinyIconEllipsis">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
-<script>
-import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+<script setup>
+import {
+  Dropdown as TinyDropdown,
+  DropdownMenu as TinyDropdownMenu,
+  DropdownItem as TinyDropdownItem
+} from '@opentiny/vue'
+import { iconEllipsis } from '@opentiny/vue-icon'
 
-export default {
-  components: {
-    TinyDropdown: Dropdown,
-    TinyDropdownMenu: DropdownMenu,
-    TinyDropdownItem: DropdownItem
-  }
-}
+const tinyIconEllipsis = iconEllipsis()
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>

package/demos/pc/app/dropdown/show-icon.vue

@@ -1,26 +1,56 @@
 <template>
-  <tiny-dropdown :show-icon="false">
-    <template #dropdown>
-      <tiny-dropdown-menu>
-        <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
-        <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
-        <tiny-dropdown-item>狮子头</tiny-dropdown-item>
-        <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
-        <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
-        <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
-      </tiny-dropdown-menu>
-    </template>
-  </tiny-dropdown>
+  <div>
+    <p>场景1： 只显示文本</p>
+    <tiny-dropdown :show-icon="false">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+    <p>场景2：自定义图且只显示图标</p>
+    <tiny-dropdown class="custom-icon" title="" :suffix-icon="tinyIconEllipsis">
+      <template #dropdown>
+        <tiny-dropdown-menu>
+          <tiny-dropdown-item label="老友粉"></tiny-dropdown-item>
+          <tiny-dropdown-item>黄金糕</tiny-dropdown-item>
+          <tiny-dropdown-item>狮子头</tiny-dropdown-item>
+          <tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
+          <tiny-dropdown-item>双皮奶</tiny-dropdown-item>
+          <tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
+        </tiny-dropdown-menu>
+      </template>
+    </tiny-dropdown>
+  </div>
 </template>
 
 <script>
 import { Dropdown, DropdownMenu, DropdownItem } from '@opentiny/vue'
+import { iconEllipsis } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyDropdown: Dropdown,
     TinyDropdownMenu: DropdownMenu,
     TinyDropdownItem: DropdownItem
+  },
+  data() {
+    return {
+      tinyIconEllipsis: iconEllipsis()
+    }
   }
 }
 </script>
+
+<style lang="less" scoped>
+p {
+  line-height: 1.5;
+  font-size: 14px;
+  margin-top: 30px;
+}
+</style>

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

@@ -33,11 +33,12 @@ export default {
     },
     {
       'demoId': 'show-icon',
-      'name': { 'zh-CN': '隐藏图标', 'en-US': 'Show icons' },
+      'name': { 'zh-CN': '图标', 'en-US': 'Show icons' },
       'desc': {
-        'zh-CN': '<p>通过 <code>show-icon</code> 属性设置触发源的图标显示或隐藏，默认显示，设置为 false 时隐藏。</p>\n',
+        'zh-CN':
+          '<p>通过 <code>show-icon</code> 属性设置是否显示下拉触发源图标，<code>suffix-icon</code> 设置下拉触发源图标。</p>\n',
         'en-US':
-          '<p>Additional sizes: <code>medium</code>, <code>small</code>, <code>mini</code>, configured by setting the <code>size</code> property. </p>\n'
+          '<p> Set whether to display the dropdown trigger source icon through the <code>show-icon</code> attribute, and set the dropdown trigger source icon through the <code>suffix-icon</code> setting. </p>\n'
       },
       'codeFiles': ['show-icon.vue']
     },
@@ -237,6 +238,16 @@ export default {
           },
           'demoId': 'trigger'
         },
+        {
+          'name': 'size',
+          'type': '"medium" | "small" | "mini"',
+          'defaultValue': '',
+          'desc': {
+            'zh-CN': '菜单尺寸。注意：只在 split-button为 true 的情况下生效',
+            'en-US': 'Menu size. Note: Only takes effect when split-button is true'
+          },
+          'demoId': 'size'
+        },
         {
           'name': 'split-button',
           'type': 'boolean',
@@ -248,14 +259,24 @@ export default {
           'demoId': 'split-button'
         },
         {
-          'name': 'size',
-          'type': '"medium" | "small" | "mini"',
+          'name': 'show-icon',
+          'type': 'boolean',
+          'defaultValue': 'true',
+          'desc': {
+            'zh-CN': '是否显示下拉触发源图标',
+            'en-US': 'Is the dropdown trigger source icon displayed'
+          },
+          'demoId': 'show-icon'
+        },
+        {
+          'name': 'suffix-icon',
+          'type': 'VueComponent',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '菜单尺寸。注意：只在 split-button为 true 的情况下生效',
-            'en-US': 'Menu size. Note: Only takes effect when split-button is true'
+            'zh-CN': '下拉触发源图标',
+            'en-US': 'Dropdown trigger source icon'
           },
-          'demoId': 'size'
+          'demoId': 'show-icon'
         },
         {
           'name': 'type',

package/demos/pc/app/fall-menu/custom-menuitem.spec.ts

@@ -3,18 +3,15 @@ import { test, expect } from '@playwright/test'
 test('自定义内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('fall-menu#custom-menuitem')
-  const preview = page.locator('#preview')
   // 子菜单列表容器
-  const fallMenuBox = preview.locator('.tiny-fall-menu__box')
+  const preview = page.locator('.tiny-fall-menu__wrap')
   // 父菜单列表
-  const fallMenuList = preview.locator('.tiny-fall-menu__list')
-  await page.getByText('首页level1').hover()
-  await expect(fallMenuBox).toBeHidden()
-  await page.getByText('指南level1').hover()
-  await expect(fallMenuBox).toBeVisible()
+  const fallMenuList = page.locator('.tiny-fall-menu__list')
+  await preview.getByText('指南 level1').hover()
+  await page.waitForTimeout(1000)
   // 点击左、右侧图标切换列表
-  await preview.locator('.icon-slot-right').click()
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-right').click()
   await expect(fallMenuList).toHaveCSS('left', /^-\d+px/)
-  await preview.locator('.icon-slot-left').click()
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-left').click()
   await expect(fallMenuList).toHaveCSS('left', '0px')
 })

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

@@ -1,28 +1,17 @@
 import { test, expect } from '@playwright/test'
 
-test('自定义左、右侧图标', async ({ page }) => {
+test('自定义内容', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('fall-menu#custom-slider-icon')
-  const preview = page.locator('#preview')
-  // 右侧插槽图标
-  const rightSlotIcon = preview.locator('.icon-slot-right')
+  await page.goto('fall-menu#custom-menuitem')
+  // 子菜单列表容器
+  const preview = page.locator('.tiny-fall-menu__wrap')
   // 父菜单列表
-  const fallMenuList = preview.locator('.tiny-fall-menu__list')
-  // 是否是默认图标
-  await expect(rightSlotIcon.locator('svg path').getAttribute('d')).not.toContain(
-    'M7 21c.2 0 .5-.1.6-.2l9.9-8c.2-.2.4-.5.4-.8'
-  )
-  // 点击右侧更多切换图标
-  await rightSlotIcon.click()
-  // 向左移动
+  const fallMenuList = page.locator('.tiny-fall-menu__list')
+  await preview.getByText('组件 level1').hover()
+  await page.waitForTimeout(1000)
+  // 点击左、右侧图标切换列表
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-right').click()
   await expect(fallMenuList).toHaveCSS('left', /^-\d+px/)
-  // 左侧插槽图标
-  const leftSlotIcon = preview.locator('.icon-slot-left')
-  await expect(leftSlotIcon.locator('svg path').getAttribute('d')).not.toContain(
-    'M17 21c-.2 0-.5-.1-.6-.2l-9.9-8c-.4-.2-.5-.5-.5-.8'
-  )
-  // 点击左侧更多切换图标
-  await leftSlotIcon.click()
-  // 向右移动
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-left').click()
   await expect(fallMenuList).toHaveCSS('left', '0px')
 })

package/demos/pc/app/fall-menu/data-resource.spec.ts

@@ -4,22 +4,19 @@ import { test, expect } from '@playwright/test'
 test('基础用法、数据源', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('fall-menu#data-resource')
-  const preview = page.locator('#preview')
-  await preview.getByRole('link', { name: '指南' }).hover()
-  const fallMenuBox = preview.locator('.tiny-fall-menu__box')
+  const preview = page.locator('.tiny-fall-menu__wrap')
   // 父菜单列表
-  const fallMenuList = preview.locator('.tiny-fall-menu__list')
+  const fallMenuList = page.locator('.tiny-fall-menu__list')
   // 菜单列表应该可见
-  await expect(fallMenuBox).toBeVisible()
-  await preview.getByRole('link', { name: '规范' }).hover()
+  await preview.getByText(/^指南*$/i).hover()
+  await page.waitForTimeout(1000)
   // 菜单列表应该不可见
-  await expect(fallMenuBox).toBeHidden()
   // 点击右侧更多切换图标
-  await preview.getByRole('img').nth(1).click()
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-right').click()
   // 向左移动
   await expect(fallMenuList).toHaveCSS('left', /^-\d+px/)
   // 点击左侧更多切换图标
-  await preview.getByRole('img').nth(1).click()
+  await preview.locator('.tiny-fall-menu__nav > .tiny-fall-menu__subnav > .icon-slot-left').click()
   // 向右移动
   await expect(fallMenuList).toHaveCSS('left', '0px')
 })

package/demos/pc/app/file-upload/abort-quest.spec.ts

@@ -4,8 +4,8 @@ test('手动取消上传请求', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#abort-quest')
 
-  const upload = page.locator('.tiny-upload')
-  const lists = page.locator('.tiny-upload-list__item')
+  const upload = page.getByRole('button', { name: '点击上传' })
+  const item = page.locator('.tiny-upload-list__li').nth(0)
   const modal = page.locator('.tiny-modal')
   const button = page.locator('button').filter({ hasText: '取消上传' })
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
@@ -13,9 +13,10 @@ test('手动取消上传请求', async ({ page }) => {
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
-  await button.click()
-  await expect(modal).toHaveText('手动取消上传')
   await fileChooser.setFiles(currentPath)
+  await item.isVisible()
+  await button.click()
+  await expect(modal.nth(1)).toHaveText('手动取消上传')
+  await item.isHidden()
   await expect(fileChooser.isMultiple()).toBe(false)
-  await expect(lists).toHaveCount(1)
 })

package/demos/pc/app/file-upload/accept-file-image.spec.ts

@@ -1,21 +1,26 @@
 import { test, expect } from '@playwright/test'
 
-test('只能上传的图片文件类型', async ({ page }) => {
+test('限制文件类型', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#accept-file-image')
 
   const upload = page.getByRole('button', { name: '点击上传' })
-  const lists = page.locator('.tiny-upload-list__item')
+  const lists = page.locator('.tiny-upload-list__li')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
 
   const path = require('node:path')
   const path1 = path.resolve(__dirname, '测试.jpg')
   const path2 = path.resolve(__dirname, '测试.svg')
   const path3 = path.resolve(__dirname, '测试.png')
+  const path4 = path.resolve(__dirname, '测试.txt')
 
   await fileChooser.setFiles(path1)
   await fileChooser.setFiles(path2)
   await fileChooser.setFiles(path3)
-  await expect(lists).toHaveCount(3)
-  await expect(lists).toHaveText([/测试.jpg/, /测试.svg/, /测试.png/])
+  await fileChooser.setFiles(path4)
+  await page.getByText('格式（.txt）暂不支持').isVisible()
+
+  await page.getByText('测试.jpg').isVisible()
+  await page.getByText('测试.svg').isVisible()
+  await page.getByText('测试.png').isVisible()
 })

package/demos/pc/app/file-upload/custom-trigger.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('自定义触发文件选项框', async ({ page }) => {
+test('触发源插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#custom-trigger')
 

package/demos/pc/app/file-upload/disabled.spec.ts

@@ -1,11 +1,10 @@
 import { test, expect } from '@playwright/test'
 
-test('基本用法', async ({ page }) => {
+test('禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/file-upload/disabled')
+  await page.goto('file-upload#disabled')
 
-  const upload = page.getByRole('button', { name: '点击上传' })
-  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+  const upload = page.locator('.tiny-upload')
 
-  await expect(fileChooser).toBeUndefined()
+  await expect(upload).toHaveClass(/is-disabled/)
 })

package/demos/pc/app/file-upload/drag-upload.spec.ts

@@ -15,6 +15,6 @@ test('是否可以拖拽上传', async ({ page }) => {
   await expect(drag).toHaveCSS('width', '360px')
   await expect(drag).toHaveCSS('height', '180px')
   await fileChooser.setFiles(currentPath)
-  await expect(lists).toHaveText(/测试.jpg/)
+  await expect(lists.nth(0)).toHaveText(/测试.jpg/)
   await expect(input).toHaveAttribute('accept', '.png,.jpeg,.jpg')
 })

package/demos/pc/app/file-upload/file-picture-card.spec.ts

@@ -1,17 +1,17 @@
 import { test, expect } from '@playwright/test'
 
-test('文件缩略图', async ({ page, context }) => {
+test('照片墙的预览、下载与删除', async ({ page, context }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#file-picture-card')
 
   const upload = page.locator('.tiny-upload')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
   const lists = page.locator('.tiny-upload-list__item')
-  const prevPic = page.locator('#preview').getByRole('listitem').locator('svg').first()
+  const prevPic = page.locator('#file-picture-card svg').first()
   const prevImg = page.locator('.tiny-dialog-box__body > img')
   const dialogClose = page.getByRole('button', { name: 'Close' })
-  const dowPic = page.locator('#preview').getByRole('listitem').locator('svg').nth(1)
-  const delbutton = page.locator('#preview').getByRole('listitem').locator('svg').nth(2)
+  const dowPic = page.locator('#file-picture-card svg').nth(1)
+  const delbutton = page.locator('#file-picture-card svg').nth(2)
 
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
@@ -19,17 +19,18 @@ test('文件缩略图', async ({ page, context }) => {
   await expect(lists).toHaveCount(0)
   await fileChooser.setFiles(currentPath)
   await expect(lists).toHaveCount(1)
+  await lists.first().hover()
   const [newPage] = await Promise.all([context.waitForEvent('page'), dowPic.click()])
   await expect(newPage.url()).toContain('blob:http://localhost:')
   await newPage.close()
-  await lists.hover()
+  await lists.first().hover()
   await prevPic.click()
   await prevImg.isVisible()
   const { width, height } = await lists.boundingBox()
   await expect(width).toEqual(148)
   await expect(height).toEqual(148)
   await dialogClose.click()
-  await lists.hover()
+  await lists.first().hover()
   await delbutton.click()
   await expect(lists).toHaveCount(0)
 })

package/demos/pc/app/file-upload/form-validation.spec.ts

@@ -2,9 +2,9 @@ import { test, expect } from '@playwright/test'
 
 test('表单校验', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/file-upload/form-validation')
+  await page.goto('file-upload#form-validation')
 
-  const button = page.locator('.tiny-button')
+  const button = page.locator('button').filter({ hasText: '提交' })
   const tip = page.locator('.tiny-form-item__validate-message')
 
   await button.click()

package/demos/pc/app/file-upload/image-size.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test'
 
-test('获取上传的片的原始尺寸', async ({ page }) => {
+test('获取图片的原始尺寸', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#image-size')
 
@@ -12,5 +12,5 @@ test('获取上传的片的原始尺寸', async ({ page }) => {
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
   await fileChooser.setFiles(currentPath)
-  await expect(modal).toHaveText(/宽：\d+ 高：\d+/)
+  await expect(modal.nth(1)).toHaveText(/宽：\d+ 高：\d+/)
 })

package/demos/pc/app/file-upload/max-file-count.spec.ts

@@ -1,21 +1,21 @@
 import { test, expect } from '@playwright/test'
 
-test('最大上传文件数', async ({ page }) => {
+test('最大上传数', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#max-file-count')
 
   const upload = page.getByRole('button', { name: '点击上传' })
-  const lists = page.locator('.tiny-upload-list__item')
+  const lists = page.locator('.tiny-upload-list__li')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
-  const modal = page.locator('.tiny-modal')
+  const modal = page.locator('.tiny-modal').getByText(/文件数不能超过/)
 
   const path = require('node:path')
   const path1 = path.resolve(__dirname, '测试.jpg')
   const path2 = path.resolve(__dirname, '测试.png')
 
+  await fileChooser.setFiles([path1, path2])
+  await modal.isVisible()
   await fileChooser.setFiles(path1)
   await expect(lists).toHaveCount(1)
-  await fileChooser.setFiles(path2)
-  await expect(lists).toHaveCount(1)
-  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await upload.isHidden()
 })

package/demos/pc/app/file-upload/paste-upload-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <tiny-file-upload drag accept=".png,.jpeg,.jpg" action="#" paste-upload :auto-upload="false" :max-name-length="3">
-    <icon-fileupload class="tiny-svg-size icon-fileupload"></icon-fileupload>
+    <icon-file-upload class="tiny-svg-size icon-fileupload"></icon-file-upload>
   </tiny-file-upload>
 </template>
 
@@ -8,5 +8,5 @@
 import { FileUpload as TinyFileUpload } from '@opentiny/vue'
 import { iconFileupload } from '@opentiny/vue-icon'
 
-const IconFileupload = iconFileupload()
+const IconFileUpload = iconFileupload()
 </script>

package/demos/pc/app/file-upload/paste-upload.spec.ts

@@ -1,10 +1,27 @@
 import { test, expect } from '@playwright/test'
 
-test('文件多选', async ({ page }) => {
+test('粘贴上传', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/file-upload/paste-upload')
+  await page.goto('file-upload#paste-upload')
 
   const drag = page.locator('.tiny-upload-dragger')
   await expect(drag).toHaveCSS('width', '360px')
   await expect(drag).toHaveCSS('height', '180px')
+
+  const path = require('node:path')
+  const pathJpg = path.resolve(__dirname, '测试.jpg')
+
+  await page.goto(pathJpg)
+
+  await page.keyboard.down('Control')
+  await page.keyboard.press('KeyC')
+  await page.keyboard.up('Control')
+
+  await page.goto('file-upload#paste-upload')
+
+  await page.focus('div.tiny-upload-dragger')
+
+  await page.keyboard.down('Control')
+  await page.keyboard.press('KeyV')
+  await page.keyboard.up('Control')
 })