@opentiny/vue-docs 2.2.5 → 2.2.7

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')
 })

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

@@ -5,8 +5,9 @@ test('照片墙', async ({ page }) => {
   await page.goto('file-upload#picture-card')
 
   const upload = page.locator('.tiny-upload')
-  const lists = page.locator('.tiny-upload-list__item')
-  const first = lists.nth(0)
+  const li = page.locator('.tiny-upload-list__li')
+  const items = li.locator('.tiny-upload-list__item')
+  const first = items.nth(0)
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
   const delButton = page
     .getByRole('listitem')
@@ -24,14 +25,14 @@ test('照片墙', async ({ page }) => {
 
   await expect(width).toEqual(148)
   await expect(height).toEqual(148)
-  await expect(lists).toHaveCount(1)
+  await expect(li).toHaveCount(1)
   await fileChooser.setFiles(currentPath)
-  await expect(lists).toHaveCount(2)
   await first.hover()
   await prevPic.click()
   await expect(prevImg).toHaveAttribute('src', '/static/images/fruit.jpg')
   await dialogClose.click()
   await first.hover()
   await delButton.click()
-  await expect(lists).toHaveCount(1)
+  await page.waitForTimeout(200)
+  await li.isHidden()
 })

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

@@ -7,7 +7,6 @@ test('图片列表缩略图', async ({ page }) => {
   const upload = page.locator('.tiny-upload')
   const lists = page.locator('.tiny-upload-list__item')
   const item1 = page.getByText('test1按 delete 键可删除')
-  const item2 = page.getByText('test2按 delete 键可删除')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
   const { width, height } = await item1.boundingBox()
   const images = page.locator('.tiny-upload-list__item-thumbnail')
@@ -16,8 +15,8 @@ test('图片列表缩略图', async ({ page }) => {
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
-  await expect(width).toEqual(771)
-  await expect(height).toEqual(56)
+  await expect(width).toBeGreaterThanOrEqual(708)
+  await expect(height).toBeGreaterThanOrEqual(56)
   await expect(lists).toHaveCount(2)
   await fileChooser.setFiles(currentPath)
   await expect(images.nth(0)).toHaveCSS('width', '56px')

package/demos/pc/app/file-upload/prevent-delete-file.spec.ts

@@ -13,7 +13,7 @@ test('阻止删除文件', async ({ page }) => {
   await expect(lists).toHaveText(/test1/)
   await lists.hover()
   await close.click()
-  await modal.waitFor({ state: 'attached', timeout: 100 })
+  await modal.nth(1).waitFor({ state: 'attached', timeout: 100 })
   await modalCancel.click()
   await expect(lists).toHaveCount(1)
   await expect(lists).toHaveText(/test1/)

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

@@ -5,7 +5,7 @@ test('阻止上传文件', async ({ page }) => {
   await page.goto('file-upload#prevent-upload-file')
 
   const upload = page.getByRole('button', { name: '选取文件' })
-  const modal = page.locator('.tiny-modal')
+  const modal = page.locator('.tiny-modal').nth(1)
   const modalCancel = page.getByRole('button', { name: '取消' })
   const lists = page.locator('.tiny-upload-list__item')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])

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

@@ -18,12 +18,14 @@ test('事件', async ({ page }) => {
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
   await fileChooser.setFiles(currentPath)
-  await expect(modals).toHaveCount(3)
-  await expect(modals).toHaveText(['触发上传文件改变回调事件', '文件上传失败回调', '触发上传文件改变回调事件'])
+  await page.getByText('文件上传失败回调').isVisible()
+  await expect(page.getByText('触发上传文件改变回调事件')).toHaveCount(2)
+  await page.waitForTimeout(100)
+
   await lists.nth(0).hover()
   await delButton.click()
-  await expect(modals.nth(3)).toHaveText('触发删除文件回调事件')
+  await page.getByText('触发删除文件回调事件').isVisible()
 
   await fileChooser.setFiles([currentPath, currentPath, currentPath, currentPath])
-  await expect(modals.nth(3)).toHaveText('触发文件超出个数限制回调事件')
+  await page.getByText('触发文件超出个数限制回调事件').isVisible()
 })

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

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test'
+
+test('定义文件列表', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('file-upload#upload-file-list-slot')
+
+  const upload = page.getByRole('button', { name: '点击上传' })
+  const lists = page.locator('.tiny-upload-list__item')
+  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
+
+  const path = require('node:path')
+  const currentPath = path.resolve(__dirname, '测试.jpg')
+
+  await expect(lists).toHaveCount(2)
+  await expect(lists).toHaveText([/test1/, /test2/])
+  await fileChooser.setFiles(currentPath)
+  await page.getByText('测试.jpg').isVisible()
+})

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

@@ -23,9 +23,10 @@ const options = ref({
   showDel: true,
   showTooltip: false,
   popperClass: 'my-thumb-name',
-  downloadFile: (file) => {
-    console.log('file', file)
-  },
+  // 取消以下注释自定义下载
+  // downloadFile: (file) => {
+  //   console.log('file', file)
+  // },
   icon: iconEditorListNum()
 })
 const fileList = ref([

package/demos/pc/app/file-upload/upload-file-list-thumb.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#upload-file-list-thumb')
 
@@ -12,7 +12,7 @@ test('上传的文件列表弹出显示', async ({ page }) => {
   await expect(thumb).toHaveText('2')
   await thumb.hover()
   await popList.isVisible()
-  await delItem1.locator('svg').dblclick()
+  await delItem1.locator('svg').click()
   await expect(thumb).toHaveText('1')
   const page3Promise = page.waitForEvent('popup')
   await downloadItem2.locator('svg').click()

package/demos/pc/app/file-upload/upload-file-list-thumb.vue

@@ -29,9 +29,10 @@ export default {
         showDel: true,
         showTooltip: false,
         popperClass: 'my-thumb-name',
-        downloadFile: (file) => {
-          console.log('file', file)
-        },
+        // 取消以下注释自定义下载
+        // downloadFile: (file) => {
+        //   console.log('file', file)
+        // },
         icon: iconEditorListNum()
       },
       fileList: [

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

@@ -1,22 +1,22 @@
 import { test, expect } from '@playwright/test'
 
-test('上传的文件列表', async ({ page }) => {
+test('文件列表', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('file-upload#upload-file-list')
 
   const upload = page.getByRole('button', { name: '点击上传' })
-  const lists = page.locator('.tiny-upload-list__item')
+  const items = page.locator('.tiny-upload-list__item')
   const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
-  const { width, height } = await lists.nth(0).boundingBox()
+  const { width, height } = await items.nth(0).boundingBox()
 
   const path = require('node:path')
   const currentPath = path.resolve(__dirname, '测试.jpg')
 
-  await expect(width).toEqual(771)
-  await expect(height).toBeCloseTo(25, 0)
-  await expect(lists).toHaveCount(2)
-  await expect(lists).toHaveText([/test1/, /test2/])
+  await expect(width).toBeGreaterThanOrEqual(708)
+  await expect(height).toBeGreaterThanOrEqual(25, 0)
+  await expect(items).toHaveCount(2)
+  await expect(items).toHaveText([/test1/, /test2/])
   await fileChooser.setFiles(currentPath)
-  await expect(lists).toHaveCount(3)
-  await expect(lists).toHaveText([/test1/, /test2/, /测试.jpg/])
+  await page.getByText('测试.jpg').isVisible()
+  await expect(items).toHaveText([/test1/, /test2/])
 })

package/demos/pc/app/file-upload/upload-limit.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#upload-limit')
 
@@ -13,11 +13,8 @@ test('最大上传限制', async ({ page }) => {
   const path2 = path.resolve(__dirname, '测试.svg')
   const path3 = path.resolve(__dirname, '测试.png')
 
-  await fileChooser.setFiles(path1)
-  await expect(lists).toHaveCount(1)
-  await fileChooser.setFiles(path2)
-  await expect(lists).toHaveCount(1)
-  await fileChooser.setFiles(path3)
-  await expect(lists).toHaveCount(1)
-  await expect(lists).toHaveText(/测试.jpg/)
+  fileChooser.setFiles(path1)
+  fileChooser.setFiles(path2)
+  fileChooser.setFiles(path3)
+  await expect(lists).toHaveCount(0)
 })

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

@@ -16,7 +16,7 @@ test.describe('设置上传请求', () => {
 
   test('支持发送 cookie 凭证信息', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('file-upload#upload-request1')
+    await page.goto('file-upload#upload-request')
 
     const upload = page.getByRole('button', { name: '选取文件' })
     const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])

package/demos/pc/app/file-upload/upload-user-head.spec.ts

@@ -5,7 +5,7 @@ test('用户头像上传', async ({ page }) => {
   await page.goto('file-upload#upload-user-head')
 
   const upload = page.locator('.tiny-upload')
-  const addIcon = page.locator('#preview svg').nth(1)
+  const addIcon = page.locator('#upload-user-head svg')
 
   await expect(upload).toHaveCSS('width', '87px')
   await expect(upload).toHaveCSS('height', '87px')

package/demos/pc/app/file-upload/webdoc/file-upload.js

@@ -212,12 +212,12 @@ export default {
       'demoId': 'upload-events',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN': `<div class="tip custom-block"><p class="custom-block-title"> <code>preview</code> 监听文件点击事件；<br/> <code>remove</code> 监听文件移除事件；<br/> <code>error</code> 监听文件上传失败事件；<br/>
+        'zh-CN': `<div class="tip custom-block"><code>preview</code> 监听文件点击事件；<br/> <code>remove</code> 监听文件移除事件；<br/> <code>error</code> 监听文件上传失败事件；<br/>
           <code>exceed</code> 监听文件超出个数限制事件；<br/> <code>progress</code> 监听文件上传过程事件；<br/> <code>change</code> 监听文件改变事件（文件改变涵盖文件添加、上传成功和上传失败）；<br/>
-          <code>success</code> 监听文件上传成功事件；<br/> <code>hash-progress</code> 监听文件上传生成hash值事件。</p></div>`,
-        'en-US': `<div class="tip custom-block"><p class="custom-block-title"> <code>preview</code> Listen for file click events; <br /> <code>remove</code> Listen for file removal events; <br /> <code>error</code> Listen for file upload failure events;<br />
+          <code>success</code> 监听文件上传成功事件；<br/> <code>hash-progress</code> 监听文件上传生成hash值事件。</div>`,
+        'en-US': `<div class="tip custom-block"><code>preview</code> Listen for file click events; <br /> <code>remove</code> Listen for file removal events; <br /> <code>error</code> Listen for file upload failure events;<br />
         <code>exceeded</code> Listen for events where the number of files exceeds the limit; <br/> <code>progress</code> Listen for file upload process events;<br/> <code>change</code> Listen for file change events (file changes include file addition, successful upload, and failed upload);<br />
-        <code>success</code> Listen for file upload success events;<br/> <code>hash-progress</code> Listen for file upload to generate hash value events.</p></div>`
+        <code>success</code> Listen for file upload success events;<br/> <code>hash-progress</code> Listen for file upload to generate hash value events.</div>`
       },
       'codeFiles': ['upload-events.vue']
     },

package/demos/pc/app/file-upload//346/265/213/350/257/225.txt

@@ -0,0 +1 @@
+测试txt文件

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

@@ -1,6 +1,15 @@
 <template>
   <div>
-    <tiny-filter-panel ref="filterPanelRef" label="物品数量" @handle-clear="handleClear" :value="value">
+    <div class="mb10">
+      <tiny-switch v-model="disabled"></tiny-switch><span class="ml10">{{ disabled ? '禁用' : '非禁用' }}</span>
+    </div>
+    <tiny-filter-panel
+      ref="filterPanelRef"
+      label="物品数量"
+      @handle-clear="handleClear"
+      :value="value"
+      :disabled="disabled"
+    >
       <tiny-radio-group v-model="radioVal" size="mini">
         <tiny-radio label="大于">大于</tiny-radio>
         <tiny-radio label="等于">等于</tiny-radio>
@@ -17,11 +26,13 @@ import {
   FilterPanel as TinyFilterPanel,
   Radio as TinyRadio,
   RadioGroup as TinyRadioGroup,
-  Input as TinyInput
+  Input as TinyInput,
+  Switch as TinySwitch
 } from '@opentiny/vue'
 
 const inputVal = ref('')
 const radioVal = ref('')
+const disabled = ref(false)
 const value = computed(() => {
   return radioVal.value + inputVal.value
 })

package/demos/pc/app/filter-panel/basic-usage.spec.ts

@@ -7,13 +7,22 @@ test('基本用法', async ({ page }) => {
   const panel = page.locator('.tiny-filter-panel')
   const button = panel.locator('.tiny-filter-box')
   const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
-  const input = page.getByRole('tooltip', { name: '大于 等于 小于' }).getByRole('textbox')
+  const inputEl = page.locator('.tiny-filter-panel__popover').locator('.tiny-input__inner')
+  const disabledBtn = panel.locator('.tiny-filter-box.disabled')
+  const switchBtn = page.locator('.mb10 > .tiny-switch')
 
   await button.click()
-  await expect(popPanel).toBeVisible()
+  await popPanel.isVisible()
   await page.getByRole('radio', { name: '等于' }).click()
-  await expect(button).toHaveText('物品数量等于')
-  await input.click()
-  await input.fill('10')
-  await expect(button).toHaveText('物品数量等于10')
+  await button.getByText('物品数量等于').isVisible()
+  await inputEl.click()
+  await inputEl.fill('10')
+  await button.getByText('物品数量等于10').isVisible()
+
+  // 禁用
+  await switchBtn.click()
+  await expect(disabledBtn).toHaveCount(1)
+  await expect(disabledBtn).toHaveCSS('cursor', 'not-allowed')
+  await button.click()
+  await popPanel.isHidden()
 })

package/demos/pc/app/filter-panel/basic-usage.vue

@@ -1,6 +1,15 @@
 <template>
   <div>
-    <tiny-filter-panel ref="filterPanel" label="物品数量" @handle-clear="handleClear" :value="value">
+    <div class="mb10">
+      <tiny-switch v-model="disabled"></tiny-switch><span class="ml10">{{ disabled ? '禁用' : '非禁用' }}</span>
+    </div>
+    <tiny-filter-panel
+      ref="filterPanel"
+      label="物品数量"
+      @handle-clear="handleClear"
+      :value="value"
+      :disabled="disabled"
+    >
       <tiny-radio-group v-model="radioVal" size="mini">
         <tiny-radio label="大于">大于</tiny-radio>
         <tiny-radio label="等于">等于</tiny-radio>
@@ -12,19 +21,21 @@
 </template>
 
 <script>
-import { FilterPanel, Radio, RadioGroup, Input } from '@opentiny/vue'
+import { FilterPanel, Radio, RadioGroup, Input, Switch } from '@opentiny/vue'
 
 export default {
   components: {
     TinyRadio: Radio,
     TinyRadioGroup: RadioGroup,
     TinyFilterPanel: FilterPanel,
-    TinyInput: Input
+    TinyInput: Input,
+    TinySwitch: Switch
   },
   data() {
     return {
       inputVal: '',
-      radioVal: ''
+      radioVal: '',
+      disabled: false
     }
   },
   computed: {

package/demos/pc/app/filter-panel/event.spec.ts

@@ -8,11 +8,21 @@ test('事件', async ({ page }) => {
   const button = panel.locator('.tiny-filter-box')
   const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
   const modal = page.locator('.tiny-modal')
+  const clear = panel.locator('.filter-icon-close')
 
+  // handle-clear事件
+  await button.click()
+  await popPanel.isVisible()
+  await page.getByRole('radio', { name: '等于' }).click()
+  await expect(button).toHaveText('物品数量等于')
+  await clear.click()
+  await expect(button).toHaveText('物品数量')
+  await button.click()
+
+  // visible-change事件
   await button.click()
-  await expect(popPanel).toBeVisible()
   await expect(modal.nth(1)).toHaveText('true visibleChange')
   await button.click()
-  await expect(popPanel).not.toBeVisible()
+  await popPanel.isHidden()
   await expect(modal.nth(2)).toHaveText('false visibleChange')
 })

package/demos/pc/app/filter-panel/manual-hide.spec.ts

@@ -10,7 +10,7 @@ test('手动隐藏', async ({ page }) => {
   const manualButton = page.getByRole('button', { name: '确定' })
 
   await button.click()
-  await expect(popPanel).toBeVisible()
+  await popPanel.isVisible()
   await manualButton.click()
-  await expect(popPanel).not.toBeVisible()
+  await popPanel.isHidden()
 })

package/demos/pc/app/filter-panel/popper-class-composition-api.vue

@@ -7,6 +7,7 @@
       :popper-append-to-body="false"
       :value="value"
       :clearable="false"
+      placement="top-start"
     >
       <tiny-radio-group v-model="radioVal" size="mini">
         <tiny-radio label="大于">大于</tiny-radio>

package/demos/pc/app/filter-panel/popper-class.spec.ts

@@ -9,7 +9,7 @@ test('弹出框样式', async ({ page }) => {
   const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
 
   await button.click()
-  await expect(popPanel).toBeVisible()
+  await popPanel.isHidden()
   await button.click()
-  await expect(popPanel).not.toBeVisible()
+  await popPanel.isHidden()
 })

package/demos/pc/app/filter-panel/popper-class.vue

@@ -7,6 +7,7 @@
       :popper-append-to-body="false"
       :value="value"
       :clearable="false"
+      placement="top-start"
     >
       <tiny-radio-group v-model="radioVal" size="mini">
         <tiny-radio label="大于">大于</tiny-radio>

package/demos/pc/app/filter-panel/tip.spec.ts

@@ -2,12 +2,12 @@ import { test, expect } from '@playwright/test'
 
 test('tip提示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://127.0.0.1:7130/pc/filter-panel/tip')
+  await page.goto('filter-panel#tip')
 
   const panel = page.locator('.tiny-filter-panel')
   const help = panel.locator('.tiny-svg.tiny-tooltip')
   const tooltip = page.getByRole('tooltip', { name: '请选择物品数量' })
 
   await help.hover()
-  await expect(tooltip).toBeVisible()
+  await tooltip.isVisible()
 })

package/demos/pc/app/filter-panel/webdoc/filter-panel.cn.md

@@ -4,4 +4,4 @@ title: FilterPanel 过滤器面板
 
 # FilterPanel 过滤器面板
 
-<div>FilterPanel 过滤器面板 。</div>
+<div>用于列表数据过滤、图标卡片过滤等。</div>

package/demos/pc/app/filter-panel/webdoc/filter-panel.en.md

@@ -1,7 +1,7 @@
 ---
-title: FilterPanel FilterPanel
+title: FilterPanel
 ---
 
-# FilterPanel FilterPanel
+# FilterPanel
 
-<div>FilterPanel Filterpanel.</div>
+<div>Used for filtering list data, icon card filtering, etc.</div>