@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/button/dynamic-disabled.vue

@@ -11,19 +11,26 @@
     </tiny-row>
 
     <tiny-row>
-      <tiny-button :disabled="disabled" plain>默认按钮</tiny-button>
+      <tiny-button :disabled="disabled" plain>朴素按钮</tiny-button>
       <tiny-button type="primary" :disabled="disabled" plain>主要按钮</tiny-button>
       <tiny-button type="success" :disabled="disabled" plain>成功按钮</tiny-button>
       <tiny-button type="info" :disabled="disabled" plain>信息按钮</tiny-button>
       <tiny-button type="warning" :disabled="disabled" plain>警告按钮</tiny-button>
       <tiny-button type="danger" :disabled="disabled" plain>危险按钮</tiny-button>
     </tiny-row>
+
+    <tiny-row>
+      <tiny-button :disabled="disabled" ghost>幽灵按钮</tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled">图标按钮</tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled"> </tiny-button>
+      <tiny-button :icon="TinyIconSearch" :disabled="disabled" circle> </tiny-button>
+    </tiny-row>
   </tiny-layout>
 </template>
 
 <script>
 import { Button, Layout, Row, Switch } from '@opentiny/vue'
-import { IconSearch } from '@opentiny/vue-icon'
+import { iconSearch } from '@opentiny/vue-icon'
 
 export default {
   components: {
@@ -35,7 +42,7 @@ export default {
   data() {
     return {
       disabled: false,
-      IconSearch: IconSearch()
+      TinyIconSearch: iconSearch()
     }
   }
 }
@@ -47,5 +54,7 @@ export default {
 }
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/ghost-composition-api.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="gray-bg">
+    <tiny-button ghost>幽灵按钮</tiny-button>
+    <tiny-button ghost type="primary">主要按钮</tiny-button>
+    <tiny-button ghost type="success">成功按钮</tiny-button>
+    <tiny-button ghost type="info">信息按钮</tiny-button>
+    <tiny-button ghost type="warning">告警按钮</tiny-button>
+    <tiny-button ghost type="danger">危险按钮</tiny-button>
+  </div>
+</template>
+
+<script setup>
+import { Button as TinyButton } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.gray-bg {
+  background: #ccc;
+  padding: 20px 10px 10px;
+}
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
+}
+</style>

package/demos/pc/app/button/ghost.spec.ts

@@ -0,0 +1,69 @@
+import { test, expect } from '@playwright/test'
+
+test('幽灵按钮', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('button#ghost')
+
+  const demo = page.locator('#ghost')
+  const getGhostBtn = (index: number) => demo.locator('.tiny-button').nth(index)
+
+  // 默认幽灵按钮
+  await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(37, 43, 58)')
+  await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(0).hover()
+  await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(94, 124, 224)')
+  await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
+
+  // 主要幽灵按钮
+  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(94, 124, 224)')
+  await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(1).hover()
+  await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(118, 147, 245)')
+  await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(118, 147, 245)')
+
+  // 成功幽灵按钮
+  await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(80, 212, 171)')
+  await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(80, 212, 171)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(2).hover()
+  await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(172, 242, 220)')
+  await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(172, 242, 220)')
+
+  // 信息幽灵按钮
+  await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(37, 43, 58)')
+  await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(37, 43, 58)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(3).hover()
+  await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(92, 97, 115)')
+  await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(92, 97, 115)')
+
+  // 告警幽灵按钮
+  await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 152, 65)')
+  await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(250, 152, 65)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(4).hover()
+  await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 194, 10)')
+  await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(250, 194, 10)')
+
+  // 危险幽灵按钮
+  await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(199, 0, 11)')
+  await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(199, 0, 11)')
+  await page.waitForTimeout(200)
+  await getGhostBtn(5).hover()
+  await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(214, 74, 82)')
+  await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
+  await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(214, 74, 82)')
+})

package/demos/pc/app/button/ghost.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="gray-bg">
+    <tiny-button ghost>幽灵按钮</tiny-button>
+    <tiny-button ghost type="primary">主要按钮</tiny-button>
+    <tiny-button ghost type="success">成功按钮</tiny-button>
+    <tiny-button ghost type="info">信息按钮</tiny-button>
+    <tiny-button ghost type="warning">告警按钮</tiny-button>
+    <tiny-button ghost type="danger">危险按钮</tiny-button>
+  </div>
+</template>
+
+<script>
+import { Button } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyButton: Button
+  }
+}
+</script>
+
+<style scoped>
+.gray-bg {
+  background: #ccc;
+  padding: 20px 10px 10px;
+}
+.tiny-button {
+  margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
+}
+</style>

package/demos/pc/app/button/icon-composition-api.vue

@@ -39,5 +39,7 @@ const TinyIconSearch = iconSearch()
 }
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/icon.vue

@@ -50,5 +50,7 @@ export default {
 }
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/loading-composition-api.vue

@@ -16,5 +16,7 @@ import { Button as TinyButton } from '@opentiny/vue'
 <style scoped>
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/loading.vue

@@ -22,5 +22,7 @@ export default {
 <style scoped>
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/size-composition-api.vue

@@ -68,5 +68,7 @@ const TinyIconEdit = iconEdit()
 
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/size.vue

@@ -79,5 +79,7 @@ export default {
 
 .tiny-button {
   margin-bottom: 10px;
+  margin-left: 0;
+  margin-right: 8px;
 }
 </style>

package/demos/pc/app/button/text-composition-api.vue

@@ -24,7 +24,7 @@ const TinyIconMail = iconMail()
 <style scoped>
 .title {
   margin-top: 16px;
-  padding: 10px 0 6px 10px;
+  padding: 10px 0 6px 0;
   font-size: 16px;
   font-weight: bold;
 }

package/demos/pc/app/button/text.vue

@@ -33,7 +33,7 @@ export default {
 <style scoped>
 .title {
   margin-top: 16px;
-  padding: 10px 0 6px 10px;
+  padding: 10px 0 6px 0;
   font-size: 16px;
   font-weight: bold;
 }

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

@@ -13,6 +13,15 @@ export default {
       },
       'codeFiles': ['basic-usage.vue']
     },
+    {
+      'demoId': 'ghost',
+      'name': { 'zh-CN': '幽灵按钮', 'en-US': 'Ghost button' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>ghost</code> 设置幽灵按钮。</p>',
+        'en-US': '<p>Set up ghost buttons via <code>ghost</code>.</p>'
+      },
+      'codeFiles': ['ghost.vue']
+    },
     {
       'demoId': 'dynamic-disabled',
       'name': { 'zh-CN': '动态禁用按钮', 'en-US': 'Dynamic Disable Button' },
@@ -139,6 +148,16 @@ export default {
           },
           'demoId': 'dynamic-disabled'
         },
+        {
+          'name': 'ghost',
+          'type': 'boolean',
+          'defaultValue': 'false',
+          'desc': {
+            'zh-CN': '是否幽灵按钮',
+            'en-US': 'Is ghost button'
+          },
+          'demoId': 'ghost'
+        },
         {
           'name': 'icon',
           'type': 'VueComponent',
@@ -221,7 +240,8 @@ export default {
         },
         {
           'name': 'type',
-          'type': "'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'",
+          'type': 'IButtonType',
+          'typeAnchorName': 'IButtonType',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
@@ -255,5 +275,12 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IButtonType',
+      type: 'interface',
+      code: `type IButtonType = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'`
+    }
   ]
 }

package/demos/pc/app/button-group/button-group-multiple-composition-api.vue

@@ -10,15 +10,15 @@ import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
 
 const checkedVal = ref('Button1')
 const groupData = ref([
-  { text: 'Button1', value: 'Button1' },
-  { text: 'Button2', value: 'Button2' },
-  { text: 'Button3', value: 'Button3' },
-  { text: 'Button4', value: 'Button4' },
-  { text: 'Button5', value: 'Button5' },
-  { text: 'Button6', value: 'Button6' },
-  { text: 'Button7', value: 'Button7' },
-  { text: 'Button8', value: 'Button8' },
-  { text: 'Button9', value: 'Button9' },
+  { text: 'Button01', value: 'Button01' },
+  { text: 'Button02', value: 'Button02' },
+  { text: 'Button03', value: 'Button03' },
+  { text: 'Button04', value: 'Button04' },
+  { text: 'Button05', value: 'Button05' },
+  { text: 'Button06', value: 'Button06' },
+  { text: 'Button07', value: 'Button07' },
+  { text: 'Button08', value: 'Button08' },
+  { text: 'Button09', value: 'Button09' },
   { text: 'Button10', value: 'Button10' },
   { text: 'Button11', value: 'Button11' },
   { text: 'Button12', value: 'Button12' }

package/demos/pc/app/button-group/button-group-multiple.vue

@@ -15,15 +15,15 @@ export default {
     return {
       checkedVal: 'Button1',
       groupData: [
-        { text: 'Button1', value: 'Button1' },
-        { text: 'Button2', value: 'Button2' },
-        { text: 'Button3', value: 'Button3' },
-        { text: 'Button4', value: 'Button4' },
-        { text: 'Button5', value: 'Button5' },
-        { text: 'Button6', value: 'Button6' },
-        { text: 'Button7', value: 'Button7' },
-        { text: 'Button8', value: 'Button8' },
-        { text: 'Button9', value: 'Button9' },
+        { text: 'Button01', value: 'Button01' },
+        { text: 'Button02', value: 'Button02' },
+        { text: 'Button03', value: 'Button03' },
+        { text: 'Button04', value: 'Button04' },
+        { text: 'Button05', value: 'Button05' },
+        { text: 'Button06', value: 'Button06' },
+        { text: 'Button07', value: 'Button07' },
+        { text: 'Button08', value: 'Button08' },
+        { text: 'Button09', value: 'Button09' },
         { text: 'Button10', value: 'Button10' },
         { text: 'Button11', value: 'Button11' },
         { text: 'Button12', value: 'Button12' }

package/demos/pc/app/button-group/change-event-composition-api.vue

@@ -16,6 +16,6 @@ const groupData = ref([
 ])
 
 function handleChange(val) {
-  Modal.message(`change事件触发了，选中值为${val}`)
+  Modal.message({ message: `change事件触发了，选中值为${val}`, status: 'info' })
 }
 </script>

package/demos/pc/app/button-group/change-event.vue

@@ -23,7 +23,7 @@ export default {
   },
   methods: {
     handleChange(val) {
-      Modal.message(`change事件触发了，选中值为${val}`)
+      Modal.message({ message: `change事件触发了，选中值为${val}`, status: 'info' })
     }
   }
 }

package/demos/pc/app/button-group/show-edit-composition-api.vue

@@ -24,6 +24,6 @@ const groupData = ref([
 ])
 
 function handleEdit() {
-  Modal.message('edit事件触发了')
+  Modal.message({ message: 'edit事件触发了', status: 'info' })
 }
 </script>

package/demos/pc/app/button-group/show-edit.vue

@@ -31,7 +31,7 @@ export default {
   },
   methods: {
     handleEdit() {
-      Modal.message('edit事件触发了')
+      Modal.message({ message: 'edit事件触发了', status: 'info' })
     }
   }
 }

package/demos/pc/app/button-group/webdoc/button-group.js

@@ -6,10 +6,9 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN':
-          '<p>通过 <code>data</code> 设置按钮组数据，类型为 <a href="#IButtonGroupData">IButtonGroupData</a> ，通过 <code>v-model</code> 设置绑定值。</p>',
+        'zh-CN': '<p>通过 <code>data</code> 设置按钮组数据，<code>v-model</code> 设置绑定值。</p>',
         'en-US':
-          '<p>Set the button group data to type <a="# IButtonGroupData">IButtonGroupData</a> through <code>data</code> , and set the binding value through <code>v model</code> .</p>'
+          '<p>Set the button group data through <code>data</code> , and set the binding value through <code>v model</code> .</p>'
       },
       'codeFiles': ['basic-usage.vue']
     },

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

@@ -66,7 +66,7 @@ export default {
     {
       'name': 'calendar',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'events',
           'type': 'Array',

package/demos/pc/app/calendar-view/webdoc/calendar-view.js

@@ -15,7 +15,8 @@ export default {
       'demoId': 'calendar-mode',
       'name': { 'zh-CN': '显示模式', 'en-US': 'Display mode' },
       'desc': {
-        'zh-CN': '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 <code>month</code> / <code>timeline</code> / <code>schedule</code>。</p>\n',
+        'zh-CN':
+          '<p>通过 <code>mode</code> 属性指定以年的形式显示，将展示当年的每个月份。可选值有 <code>month</code> / <code>timeline</code> / <code>schedule</code>。</p>\n',
         'en-US':
           '<p>The <code>mode</code> attribute specifies that each month of the current year is displayed. The options are <code>month</code> / <code>timeline</code> / <code>schedule</code>. </p>\n'
       },
@@ -128,7 +129,7 @@ export default {
     {
       'name': 'calendar-view',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'day-times',
           'type': 'Array',

package/demos/pc/app/carousel/autoplay.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('自动切换', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#autoplay')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#autoplay')
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   // 默认显示第一张幻灯片

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

@@ -3,26 +3,17 @@ import { test, expect } from '@playwright/test'
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#basic-usage')
-  const preview = page.locator('#preview')
-  const carousel = preview.locator('.tiny-carousel')
-  const carouselItems = preview.locator('div.tiny-carousel__item')
-  // 默认显示第一张幻灯片
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-
-  await carousel.hover()
-  await page.waitForTimeout(100)
-  // 点击下一张按钮
-  await preview.locator('button:nth-child(2)').click()
-  // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-
-  // 点击上一张按钮
-  await page.locator('.tiny-carousel__arrow').first().click()
-  // 当前应该显示第一张幻灯片
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-
-  // 点击底部按钮切换
+  const preview = page.locator('#basic-usage')
+  await page.locator('div').filter({ hasText: /^1$/ }).click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
   await preview.getByRole('list').getByRole('button').nth(1).click()
-  // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+  await preview.getByRole('list').getByRole('button').nth(2).click()
+  await preview.getByRole('list').getByRole('button').nth(3).click()
 })

package/demos/pc/app/carousel/card-mode.spec.ts

@@ -3,42 +3,21 @@ import { test, expect } from '@playwright/test'
 test('卡片模式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#card-mode')
-  const preview = page.locator('#preview')
-  const carousel = preview.locator('.tiny-carousel')
-  const carouselItems = preview.locator('div.tiny-carousel__item')
-  // 默认显示第一张幻灯片
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 192.75, 0)')
-  // 第二张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, 418.267, 0)')
-  // 第四张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(3)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, -32.7675, 0)')
-
-  await carousel.hover()
-  await page.waitForTimeout(100)
-  // 点击下一张按钮
-  await preview.locator('button:nth-child(2)').click()
-  // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 192.75, 0)')
-  // 第三张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, 418.267, 0)')
-  // 第一张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, -32.7675, 0)')
-
-  // 点击底部按钮切换
+  const preview = page.locator('#card-mode')
+  const carouselItems = page.locator(
+    '.tiny-carousel > .tiny-carousel__container > .tiny-carousel__item > .tiny-carousel__mask'
+  )
+  await page.locator('div').filter({ hasText: /^1$/ }).click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await preview.locator('.tiny-carousel__arrow').first().click()
+  await expect(carouselItems).toHaveCount(4)
+  await preview.getByRole('list').getByRole('button').nth(1).click()
   await preview.getByRole('list').getByRole('button').nth(2).click()
-  // 当前应该显示第三张幻灯片
-  await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 192.75, 0)')
-  // 第四张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(3)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, 418.267, 0)')
-  // 第二张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, -32.7675, 0)')
-
-  // 点击上一张按钮
-  await page.locator('.tiny-carousel__arrow').first().click()
-  // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 192.75, 0)')
-  // 第三张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, 418.267, 0)')
-  // 第一张幻灯片应该可见，并且被缩放
-  await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(0.83, 0, 0, 0.83, -32.7675, 0)')
+  await preview.getByRole('list').getByRole('button').nth(3).click()
 })

package/demos/pc/app/carousel/carousel-arrow-always.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('总是显示切换箭头', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#carousel-arrow-always')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#carousel-arrow-always')
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   // 默认显示第一张幻灯片

package/demos/pc/app/carousel/carousel-arrow-hover.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('hover 时显示切换箭头', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#carousel-arrow-hover')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#carousel-arrow-hover')
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
 

package/demos/pc/app/carousel/carousel-arrow-never.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('隐藏切换箭头', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#carousel-arrow-never')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#carousel-arrow-never')
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
 

package/demos/pc/app/carousel/carousel-events.spec.ts

@@ -3,23 +3,25 @@ import { test, expect } from '@playwright/test'
 test('走马灯事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#carousel-events')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#carousel-events')
   const carousel = preview.locator('.tiny-carousel')
   const carouselTip = preview.locator('.carousel-tip')
 
   await carousel.hover()
   await page.waitForTimeout(300)
   const arrow = carousel.locator('.tiny-carousel__arrow')
+  const rightArrow = page.locator('.tiny-carousel__container > button:nth-child(2)')
+  await page.locator('.tiny-carousel__arrow').first().click()
   // 左侧切换按钮应该可见
   await expect(arrow.first()).toBeVisible()
   // 右侧切换按钮应该可见
-  await expect(arrow.nth(1)).toBeVisible()
+  await expect(rightArrow).toBeVisible()
 
   // 点击左侧切换按钮
   await arrow.first().click()
   await expect(carouselTip).toHaveText(/3\D+0/)
   await page.waitForTimeout(320)
   // 点击右侧切换按钮
-  await arrow.nth(1).click()
+  await rightArrow.click()
   await expect(carouselTip).toHaveText(/0\D+3/)
 })

package/demos/pc/app/carousel/close-loop.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('关闭循环轮播', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#close-loop')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#close-loop')
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   const arrow = carousel.locator('.tiny-carousel__arrow')

package/demos/pc/app/carousel/indicator-trigger.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('指示器和触发方式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#indicator-trigger')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#indicator-trigger')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   const indicators = preview.getByRole('list').getByRole('button')