@opentiny/vue-docs 2.2.18 → 2.2.19

package/demos/pc/app/dialog-box/center-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" center title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/center.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" center title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/close-on-click-modal-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" :close-on-click-modal="false" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/close-on-click-modal.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" :close-on-click-modal="false" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/close-on-press-escape-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box :visible="boxVisibility" :close-on-press-escape="false" title="消息" width="30%" @close="close">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/close-on-press-escape.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box :visible="boxVisibility" :close-on-press-escape="false" title="消息" width="30%" @close="close">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/custom-dialog-content-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
-      <tiny-alert description="内容是Alert组件"></tiny-alert>
+      <tiny-alert description="内容是 Alert 组件"></tiny-alert>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/custom-dialog-content.vue

@@ -2,7 +2,7 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
-      <tiny-alert description="内容是Alert组件"></tiny-alert>
+      <tiny-alert description="内容是 Alert 组件"></tiny-alert>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/custom-dialog-footer-composition-api.vue

@@ -2,9 +2,9 @@
   <div>
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
-        <div style="width: 100%; height: 100%; background: #dddddd">自定义footer区域</div>
+        <div style="width: 100%; height: 100%; background: #dddddd">自定义 footer 区域</div>
       </template>
     </tiny-dialog-box>
   </div>

package/demos/pc/app/dialog-box/custom-dialog-footer.spec.ts

@@ -4,6 +4,6 @@ test('dialogBox 自定义底部', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#custom-dialog-footer')
   await page.getByRole('button', { name: /Dialog/ }).click()
-  await expect(page.locator('.tiny-dialog-box__footer > div')).toHaveText('自定义footer区域')
+  await expect(page.locator('.tiny-dialog-box__footer > div')).toHaveText(/自定义/)
   await page.getByLabel('Close').click()
 })

package/demos/pc/app/dialog-box/custom-dialog-title-composition-api.vue

@@ -3,9 +3,9 @@
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" width="30%">
       <template #title>
-        <div style="width: 80%; height: 100%; background: #dddddd">自定义title区域</div>
+        <div style="width: 80%; height: 100%; background: #dddddd">自定义 title 区域</div>
       </template>
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/custom-dialog-title.spec.ts

@@ -4,6 +4,6 @@ test('dialogBox 自定义标题', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('dialog-box#custom-dialog-title')
   await page.getByRole('button', { name: /Dialog/ }).click()
-  await expect(page.locator('.tiny-dialog-box__header > div')).toHaveText('自定义title区域')
+  await expect(page.locator('.tiny-dialog-box__header > div')).toHaveText(/自定义/)
   await page.getByRole('button', { name: /确 定/ }).click()
 })

package/demos/pc/app/dialog-box/custom-dialog-title.vue

@@ -3,9 +3,9 @@
     <tiny-button @click="boxVisibility = true" title="弹出 Dialog">弹出 Dialog</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility" width="30%">
       <template #title>
-        <div style="width: 80%; height: 100%; background: #dddddd">自定义title区域</div>
+        <div style="width: 80%; height: 100%; background: #dddddd">自定义 title 区域</div>
       </template>
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/dialog-top-height-composition-api.vue

@@ -3,13 +3,13 @@
     <tiny-button @click="boxVisibility1 = true" type="info">显示在顶部</tiny-button>
     <tiny-button @click="boxVisibility2 = true">距离顶部 300px</tiny-button>
     <tiny-dialog-box top="0" v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
     <tiny-dialog-box top="300px" v-model:visible="boxVisibility2" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility2 = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/dialog-top-height.vue

@@ -3,13 +3,13 @@
     <tiny-button @click="boxVisibility1 = true" type="info">显示在顶部</tiny-button>
     <tiny-button @click="boxVisibility2 = true">距离顶部 300px</tiny-button>
     <tiny-dialog-box top="0" v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
     <tiny-dialog-box top="300px" v-model:visible="boxVisibility2" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility2 = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/dialog-width-composition-api.vue

@@ -3,13 +3,13 @@
     <tiny-button @click="boxVisibility1 = true" type="info">宽度 30%</tiny-button>
     <tiny-button @click="boxVisibility2 = true">宽度 60%</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
     <tiny-dialog-box v-model:visible="boxVisibility2" title="消息" width="60%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility2 = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/dialog-width.vue

@@ -3,13 +3,13 @@
     <tiny-button @click="boxVisibility1 = true" type="info">宽度 30%</tiny-button>
     <tiny-button @click="boxVisibility2 = true">宽度 60%</tiny-button>
     <tiny-dialog-box v-model:visible="boxVisibility1" title="消息" width="30%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility1 = false">确 定</tiny-button>
       </template>
     </tiny-dialog-box>
     <tiny-dialog-box v-model:visible="boxVisibility2" title="消息" width="60%">
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility2 = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/draggable-composition-api.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true"> 可拖拽弹窗 </tiny-button>
-    <tiny-button @click="boxVisibility = true"> 可编辑拖拽弹窗 </tiny-button>
+    <tiny-button @click="dragDialog"> 可拖拽弹窗 </tiny-button>
+    <tiny-button @click="dragDialogOutSide"> 可拖拽出窗口弹窗 </tiny-button>
     <tiny-dialog-box
+      v-if="boxVisibility"
       draggable
       v-model:visible="boxVisibility"
       title="鼠标移入标题区域单击拖拽"
+      :drag-outside-window="isDragOutSideFlag"
       width="30%"
       @drag-start="dragStart"
       @drag-end="dragEnd"
@@ -18,7 +20,7 @@
           <tiny-input v-model="input" clearable></tiny-input>
         </div>
       </template>
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false"> 确 定 </tiny-button>
       </template>
@@ -31,6 +33,7 @@ import { ref } from 'vue'
 import { Button as TinyButton, DialogBox as TinyDialogBox, Notify, Input as TinyInput, Modal } from '@opentiny/vue'
 
 const boxVisibility = ref(false)
+const isDragOutSideFlag = ref(false)
 const isNotifyMoving = ref(false)
 const input = ref('鼠标移入标题区域单击拖拽')
 
@@ -60,4 +63,13 @@ function dragMove() {
 function beforeClose() {
   Modal.message({ message: 'before-close', status: 'info' })
 }
+function dragDialog() {
+  boxVisibility.value = true
+  isDragOutSideFlag.value = false
+}
+
+function dragDialogOutSide() {
+  boxVisibility.value = true
+  isDragOutSideFlag.value = true
+}
 </script>

package/demos/pc/app/dialog-box/draggable.spec.ts

@@ -7,13 +7,13 @@ test('dialogBox 可拖拽的弹窗', async ({ page }) => {
   const button = page.getByRole('button', { name: '可拖拽弹窗' })
   const notify = page.locator('.tiny-notify')
   const dialogBox = page.locator('.tiny-dialog-box')
-  const title = dialogBox.locator('.tiny-dialog-box__title')
+  const header = dialogBox.locator('.tiny-dialog-box__header')
 
   await button.click()
   await expect(dialogBox).toBeVisible()
 
   // 获取拖拽元素的位置
-  const { x, y } = await title.boundingBox()
+  const { x, y } = await header.boundingBox()
 
   // 开始拖拽
   await page.mouse.move(x + 2, y + 2)

package/demos/pc/app/dialog-box/draggable.vue

@@ -1,11 +1,14 @@
 <template>
   <div>
-    <tiny-button @click="boxVisibility = true"> 可拖拽弹窗 </tiny-button>
+    <tiny-button @click="dragDialog"> 可拖拽弹窗 </tiny-button>
+    <tiny-button @click="dragDialogOutSide"> 可拖拽出窗口弹窗 </tiny-button>
     <tiny-dialog-box
+      v-if="boxVisibility"
       draggable
       v-model:visible="boxVisibility"
       title="鼠标移入标题区域单击拖拽"
       width="30%"
+      :drag-outside-window="isDragOutSideFlag"
       @drag-start="dragStart"
       @drag-end="dragEnd"
       @drag-move="dragMove"
@@ -17,7 +20,7 @@
           <tiny-input v-model="input" clearable></tiny-input>
         </div>
       </template>
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false"> 确 定 </tiny-button>
       </template>
@@ -38,7 +41,8 @@ export default {
     return {
       input: '鼠标移入标题区域单击拖拽',
       boxVisibility: false,
-      isNotifyMoving: false
+      isNotifyMoving: false,
+      isDragOutSideFlag: false
     }
   },
   methods: {
@@ -65,6 +69,14 @@ export default {
     },
     beforeClose() {
       Modal.message({ message: 'before-close', status: 'info' })
+    },
+    dragDialog() {
+      this.boxVisibility = true
+      this.isDragOutSideFlag = false
+    },
+    dragDialogOutSide() {
+      this.boxVisibility = true
+      this.isDragOutSideFlag = true
     }
   }
 }

package/demos/pc/app/dialog-box/form-in-dialog.spec.ts

@@ -16,7 +16,6 @@ test('弹窗表单', async ({ page }) => {
 
   // 验证下拉选择校验提示不会异常
   await page.locator('#form-in-dialog').locator('.tiny-select__tags-group').click()
-  await page.locator('#form-in-dialog').locator('.tiny-svg.tiny-dialog-box__close').first().click()
   await page.waitForTimeout(200)
   await expect(page.locator('.tiny-form__valid.tiny-tooltip')).not.toBeVisible()
 })

package/demos/pc/app/dialog-box/open-close-events-composition-api.vue

@@ -10,7 +10,7 @@
       @opened="opened"
       @closed="closed"
     >
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/open-close-events.vue

@@ -10,7 +10,7 @@
       @opened="opened"
       @closed="closed"
     >
-      <span>dialog-box内容</span>
+      <span>dialog-box 内容</span>
       <template #footer>
         <tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
       </template>

package/demos/pc/app/dialog-box/webdoc/dialog-box.js

@@ -207,9 +207,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>可通过<code>draggable</code>属性设置<code>true</code>，鼠标点击标题区域拖拽；通过<code>:dragOutsideWindow</code>属性设置<code>true</code>，将弹窗拖出窗口。具体事件：<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>。</p>\n',
+          '<p>可通过<code>draggable</code>属性设置<code>true</code>，鼠标点击标题区域拖拽；通过<code>drag-outside-window</code>属性设置<code>true</code>，将弹窗拖出窗口。具体事件：<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>。</p>\n',
         'en-US':
-          '<p>By setting the<code>draggable</code>attribute to<code>true</code>, click and drag in the title area with the mouse; setting the code <code>dragOutsideWindow</code>attribute to<code>true</code>, drag the dialog box outside the window.Specific events:<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>.</p>\n'
+          '<p>By setting the<code>draggable</code>attribute to<code>true</code>, click and drag in the title area with the mouse; setting the code <code>drag-outside-window</code>attribute to<code>true</code>, drag the dialog box outside the window.Specific events:<code>@drag-start</code><code>@drag-move</code><code>@drag-end</code>.</p>\n'
       },
       codeFiles: ['draggable.vue']
     },

package/demos/pc/app/drawer/tips-props-composition-api.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="demo-drawer">
+    <tiny-button @click="fn" type="primary"> 展开抽屉 </tiny-button>
+    <tiny-drawer title="标题" :tipsProps="tipsProps" :visible="visible" @update:visible="visible = $event">
+      <div>内容区域</div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from 'vue'
+import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
+
+const visible = ref(false)
+const tipsProps = reactive({
+  content: '这是一段帮助提示。。。',
+  placement: 'right'
+})
+
+function fn() {
+  visible.value = true
+}
+</script>

package/demos/pc/app/drawer/tips-props.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('drawer#tips-props')
+
+  const drawer = page.locator('.tiny-drawer__main')
+  const helpIcon = drawer.locator('.tiny-drawer__help-icon')
+  const tooltip = page.getByRole('tooltip', { name: '这是一段帮助提示。。。' })
+
+  await page.getByRole('button', { name: '展开抽屉' }).click()
+  await expect(helpIcon).toBeVisible()
+  await helpIcon.hover()
+  await expect(tooltip).toBeVisible()
+})

package/demos/pc/app/drawer/tips-props.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="demo-drawer">
+    <tiny-button @click="fn" type="primary"> 展开抽屉 </tiny-button>
+    <tiny-drawer title="标题" :tipsProps="tipsProps" :visible="visible" @update:visible="visible = $event">
+      <div>内容区域</div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDrawer: Drawer,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      visible: false,
+      tipsProps: {
+        content: '这是一段帮助提示。。。',
+        placement: 'right'
+      }
+    }
+  },
+  methods: {
+    fn() {
+      this.visible = true
+    }
+  }
+}
+</script>

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

@@ -27,6 +27,16 @@ export default {
       },
       codeFiles: ['placement.vue']
     },
+    {
+      demoId: 'tips-props',
+      name: { 'zh-CN': '帮助提示', 'en-US': 'Help tips' },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>tips-props</code> 属性可自定义标题帮助提示信息，具体属性配置参考 <a href="tooltip#tooltip">ToolTip 组件</a> 的 props 说明。</p>',
+        'en-US': ''
+      },
+      codeFiles: ['tips-props.vue']
+    },
     {
       demoId: 'width',
       name: {
@@ -139,18 +149,6 @@ export default {
       },
       codeFiles: ['z-index.vue']
     },
-    {
-      demoId: 'default-slot',
-      name: {
-        'zh-CN': '默认插槽',
-        'en-US': ''
-      },
-      desc: {
-        'zh-CN': '<p>自定义抽屉主体内容。</p>',
-        'en-US': ''
-      },
-      codeFiles: ['default-slot.vue']
-    },
     {
       demoId: 'header-slot',
       name: {

package/demos/pc/app/drop-roles/custom-service.spec.ts

@@ -4,7 +4,7 @@ test('自定义服务', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).not.toBeNull())
   await page.goto('drop-roles#custom-service')
 
-  const input = page.getByPlaceholder('选择角色')
+  const input = page.locator('.tiny-select input')
   const listItems = page.getByRole('listitem')
   const url = await page.evaluate(() => window.location.href)
   const notify1 = page.locator('.tiny-notify').filter({

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

@@ -9,7 +9,7 @@ test('文件选择前确认', async ({ page }) => {
   await upload.click()
   await page.locator('.tiny-modal').filter({ hasText: 'beforeAddFile 钩子函数' }).isVisible()
 
-  const confirmBtn = page.getByRole('button', { name: '确认' })
+  const confirmBtn = page.getByRole('button', { name: '确定' })
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), confirmBtn.click()])
 
   // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires

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

@@ -21,7 +21,7 @@ test('照片墙的预览、下载与删除', async ({ page, context }) => {
   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 expect(newPage.url()).toContain('blob:http')
   await newPage.close()
   await lists.first().hover()
   await prevPic.click()

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

@@ -9,12 +9,12 @@ test('手动上传', async ({ page }) => {
   const lists = page.locator('.tiny-upload-list__item')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
 
+  // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
   await fileChooser.setFiles(currentPath)
   await expect(lists).toHaveText(/测试.jpg/)
   await server.click()
-  await lists.waitFor({ state: 'hidden', timeout: 3000 })
   await expect(lists).toHaveCount(0)
 })

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

@@ -20,6 +20,7 @@ test('照片墙', async ({ page }) => {
   const dialogClose = page.getByRole('button', { name: 'Close' })
   const { width, height } = await first.boundingBox()
 
+  // eslint-disable-next-line @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
@@ -29,10 +30,10 @@ test('照片墙', async ({ page }) => {
   await fileChooser.setFiles(currentPath)
   await first.hover()
   await prevPic.click()
-  await expect(prevImg).toHaveAttribute('src', '/static/images/fruit.jpg')
+  await expect(prevImg).toHaveAttribute('src', /\/fruit.jpg/)
   await dialogClose.click()
   await first.hover()
   await delButton.click()
   await page.waitForTimeout(200)
-  await li.isHidden()
+  await first.isHidden()
 })

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

@@ -16,13 +16,13 @@ test('图片列表缩略图', async ({ page }) => {
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
-  await expect(width).toBeGreaterThanOrEqual(700)
+  await expect(width).toBeGreaterThanOrEqual(height)
   await expect(height).toBeGreaterThanOrEqual(56)
   await expect(lists).toHaveCount(2)
   await fileChooser.setFiles(currentPath)
   await expect(images.nth(0)).toHaveCSS('width', '56px')
   await expect(images.nth(0)).toHaveCSS('height', '56px')
-  await expect(images.nth(0)).toHaveAttribute('src', '/static/images/fruit.jpg')
-  await expect(images.nth(1)).toHaveAttribute('src', '/static/images/book.jpg')
+  await expect(images.nth(0)).toHaveAttribute('src', /\/fruit.jpg/)
+  await expect(images.nth(1)).toHaveAttribute('src', /\/book.jpg/)
   await expect(triangles.nth(0)).toHaveCSS('transform', 'matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)')
 })

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

@@ -13,7 +13,7 @@ test('文件列表', async ({ page }) => {
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
-  await expect(width).toBeGreaterThanOrEqual(700)
+  await expect(width).toBeGreaterThanOrEqual(height)
   await expect(height).toBeGreaterThanOrEqual(25, 0)
   await expect(items).toHaveCount(2)
   await expect(items).toHaveText([/test1/, /test2/])

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

@@ -10,8 +10,11 @@ test.describe('设置上传请求', () => {
 
     const upload = page.getByRole('button', { name: '选取文件' })
     const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
-    const [request] = await Promise.all([page.waitForEvent('requestfailed'), fileChooser.setFiles(path1)])
-    await expect(request.url()).toEqual('http://localhost:3000/api/upload')
+    await fileChooser.setFiles(path1)
+    page.on('requestfailed', (request) => {
+      expect(request.url()).toEqual('http://localhost:3000/api/upload')
+    })
+    await page.waitForTimeout(200)
   })
 
   test('支持发送 cookie 凭证信息', async ({ page }) => {
@@ -20,10 +23,12 @@ test.describe('设置上传请求', () => {
 
     const upload = page.getByRole('button', { name: '选取文件' })
     const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
-    const [request] = await Promise.all([page.waitForEvent('requestfailed'), fileChooser.setFiles(path1)])
-    const { authorization } = await request.headers()
+    await fileChooser.setFiles(path1)
+    page.on('requestfailed', (request) => {
+      const { authorization } = request.headers()
 
-    await expect(request.headers()).not.toBeNull()
-    await expect(authorization).toEqual('Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==')
+      expect(request.headers()).not.toBeNull()
+      expect(authorization).toEqual('Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==')
+    })
   })
 })