@opentiny/vue-docs 2.2.7 → 2.2.9

package/demos/pc/app/calendar/custom-calendar-toolbar.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('calendar#custom-calendar-toolbar')
+  const pcDemo = page.locator('.pc-demo')
+  const selectedDay = page.getByRole('cell', { name: '10' }).locator('div').first()
+  const time = page.locator('.today')
+
+  // 校验选中功能
+  await selectedDay.click()
+  await page.waitForTimeout(200)
+  await expect(selectedDay).toHaveClass(/selected/)
+  // 校验插槽日期按钮是否生效
+  await pcDemo.getByRole('button', { name: '今天' }).click()
+  await page.waitForTimeout(200)
+  await expect(time).toHaveClass(/selected/)
+})

package/demos/pc/app/calendar/custom-calendar-toolbar.vue

@@ -6,7 +6,7 @@
   </tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar, Button } from '@opentiny/vue'
 
 export default {
@@ -17,9 +17,9 @@ export default {
   methods: {
     toToday(scope) {
       let year = new Date().getFullYear()
-      let month = new Date().getMonth() + 1
+      let month = new Date().getMonth()
       let day = new Date().getDate()
-      scope.selectedDate = new Date(year + '-' + month + '-' + day).valueOf()
+      scope.selectedDate = new Date(year, month, day).valueOf()
     }
   }
 }

package/demos/pc/app/calendar/custom-day-cell-composition-api.vue

@@ -6,7 +6,7 @@
   </tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Calendar as TinyCalendar } from '@opentiny/vue'
 

package/demos/pc/app/calendar/custom-day-cell.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义日期单元格', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar#custom-day-cell')
+  const pcDemo = page.locator('.pc-demo')
+  await expect(pcDemo).toHaveText(/通知事项/)
+  await expect(pcDemo).toHaveText(/这是一条警告/)
+  await expect(pcDemo).toHaveText(/这是一条错误/)
+})

package/demos/pc/app/calendar/custom-day-cell.vue

@@ -6,7 +6,7 @@
   </tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/calendar/dynamic-add-schedule-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-calendar :events="eventslist" :year="2019" :month="9"> </tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Calendar as TinyCalendar } from '@opentiny/vue'
 

package/demos/pc/app/calendar/dynamic-add-schedule.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test'
+
+test('添加日程事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar#dynamic-add-schedule')
+  const selectedDay4 = page.getByText('通知事项通知事项A', { exact: true })
+  const dayFun4 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '请注意该通知事项A' })
+
+  const selectedDay13 = page.getByRole('listitem').filter({ hasText: '这是一条警告' })
+  const dayFun13 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '这是一条警告消息这是一条警告' })
+
+  const selectedDay14 = page.getByRole('listitem').filter({ hasText: '这是一条错误' })
+  const datFun14 = page.locator('.tiny-calendar__tip-content').filter({ hasText: '这是一条错误，还有错误' })
+
+  await selectedDay4.hover()
+  await page.waitForTimeout(200)
+  await expect(dayFun4).toBeVisible()
+
+  await selectedDay13.hover()
+  await page.waitForTimeout(200)
+  await expect(dayFun13).toBeVisible()
+
+  await selectedDay14.hover()
+  await page.waitForTimeout(200)
+  await expect(datFun14).toBeVisible()
+})

package/demos/pc/app/calendar/dynamic-add-schedule.vue

@@ -2,7 +2,7 @@
   <tiny-calendar :events="eventslist" :year="2019" :month="9"> </tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar } from '@opentiny/vue'
 
 export default {

package/demos/pc/app/calendar/show-selected-date-composition-api.vue

@@ -2,6 +2,6 @@
   <tiny-calendar show-selected></tiny-calendar>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { Calendar as TinyCalendar } from '@opentiny/vue'
 </script>

package/demos/pc/app/calendar/show-selected-date.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar#show-selected-date')
+  const pcDemo = page.locator('.pc-demo')
+  const selectedDay = page.getByRole('cell', { name: '15' })
+  const showText = pcDemo.locator('.tiny-calendar__selected')
+  const year = new Date().getFullYear()
+  const month = new Date().getMonth() + 1
+  const selectedTime = year + '-' + month + '-' + '15'
+  await selectedDay.click()
+  await expect(showText).toHaveText('You selected date: ' + selectedTime)
+})

package/demos/pc/app/calendar/show-selected-date.vue

@@ -2,7 +2,7 @@
   <tiny-calendar show-selected></tiny-calendar>
 </template>
 
-<script lang="jsx">
+<script>
 import { Calendar } from '@opentiny/vue'
 
 export default {

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

@@ -69,17 +69,18 @@ export default {
       'props': [
         {
           'name': 'events',
-          'type': 'Array',
+          'type': 'eventLists[]',
+          'typeAnchorName': 'eventLists',
           'defaultValue': '',
           'desc': { 'zh-CN': '事件列表', 'en-US': 'Event List' },
           'demoId': 'dynamic-add-schedule'
         },
         {
           'name': 'mode',
-          'type': 'string',
-          'defaultValue': '',
+          'type': "'month' | 'year'",
+          'defaultValue': "'month'",
           'desc': {
-            'zh-CN': '显示模式，month / year 可选，默认 month',
+            'zh-CN': '日历显示模式',
             'en-US': 'Display mode. The value can be month or year. The default value is month.'
           },
           'demoId': 'calendar-mode'
@@ -89,7 +90,7 @@ export default {
           'type': 'number',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '指定月份，默认当月',
+            'zh-CN': '指定月份，默认当前月份',
             'en-US': 'Specified month. The default value is the current month.'
           },
           'demoId': 'custom-day-cell'
@@ -97,15 +98,15 @@ export default {
         {
           'name': 'show-selected',
           'type': 'boolean',
-          'defaultValue': '',
-          'desc': { 'zh-CN': '显示选中的日期', 'en-US': 'Display the selected date.' },
+          'defaultValue': 'false',
+          'desc': { 'zh-CN': '是否显示选中的日期', 'en-US': 'Display the selected date.' },
           'demoId': 'show-selected-date'
         },
         {
           'name': 'year',
           'type': 'number',
           'defaultValue': '',
-          'desc': { 'zh-CN': '指定年份，默认今年', 'en-US': 'Specified year. The default year is this year.' },
+          'desc': { 'zh-CN': '指定年份，默认当前年份', 'en-US': 'Specified year. The default year is this year.' },
           'demoId': 'custom-day-cell'
         }
       ],
@@ -127,5 +128,18 @@ export default {
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'eventLists',
+      type: 'interface',
+      code: `
+      interface eventLists [{
+        time: 1534297845236, // 指定需要展示事件的日期
+        title: '消息', // 指定事件标题
+        content: '这是一条消息', // 指定事件的具体内容
+        type: 'info' // 事件主题类型，包括 warning、error、info、success。
+      }]`
+    }
   ]
 }

package/demos/pc/app/calendar-view/basic-usage.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('calendar-view#basic-usage')
+  const demoPage = page.locator('#basic-usage')
+  const fixWeek2 = page.getByText('前端周会2').first()
+  const popWeek2 = page.locator('.title').filter({ hasText: '前端周会2' })
+  // 校验固定内容
+  await expect(demoPage).toHaveText(/15前端周会2前端周会2-1前端周会1/)
+  await expect(demoPage).toHaveText(/16前端周会4前端周会3/)
+  await expect(demoPage).toHaveText(/25节假日25-28前端周会5/)
+  await expect(demoPage.locator('.events-end').first()).toHaveClass(/bg-green/)
+  // 校验hover弹出框
+  await fixWeek2.hover()
+  await page.waitForTimeout(200)
+  await expect(popWeek2).toBeVisible()
+})

package/demos/pc/app/calendar-view/calendar-day-mark.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('日期标记', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-day-mark')
+  const listitem = page.getByRole('listitem')
+  const day30 = listitem.filter({ hasText: '30周日' }).locator('span').nth(2)
+  const day1 = listitem.filter({ hasText: '1周一' }).locator('span').nth(2)
+  const day6 = listitem.filter({ hasText: '6周六' }).locator('span').nth(2)
+  const day7 = page.getByText('7周日')
+  const rightSvg = page.locator('.header-right > .tiny-svg')
+  const day8 = listitem.filter({ hasText: '8周一' }).locator('span').nth(2)
+  await expect(day30).toBeVisible()
+  await expect(day1).toHaveClass(/mark/)
+  await expect(day1).toHaveClass(/mark-red/)
+  await expect(day6).toHaveClass(/mark/)
+  await expect(day7).not.toBeVisible()
+  await rightSvg.click()
+  await page.waitForTimeout(200)
+  await expect(day7).toBeVisible()
+  await expect(day8).toHaveClass(/mark/)
+  await expect(day8).toHaveClass(/mark-red/)
+})

package/demos/pc/app/calendar-view/calendar-disabled-day-composition-api.vue

@@ -2,13 +2,13 @@
   <tiny-calendar-view :events="eventslist" :year="2023" :month="5" :disabled="disabled"></tiny-calendar-view>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 import { CalendarView as TinyCalendarView } from '@opentiny/vue'
 
 const eventslist = ref([])
 
 const disabled = (date) => {
-  return date.split('-')[2] < 5
+  return date.split('-')[2] < 15
 }
 </script>

package/demos/pc/app/calendar-view/calendar-disabled-day.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('日期禁用', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-disabled-day')
+  const day10 = page.getByText('10').nth(1)
+  const day14 = page.getByText('14').nth(1)
+  const day15 = page.getByText('15').nth(1)
+  await expect(day10).toHaveClass(/is-disabled/)
+  await expect(day14).toHaveClass(/is-disabled/)
+  await expect(day15).toHaveClass('date')
+})

package/demos/pc/app/calendar-view/calendar-disabled-day.vue

@@ -16,7 +16,7 @@ export default {
   },
   methods: {
     disabled(date) {
-      return date.split('-')[2] < 5
+      return date.split('-')[2] < 15
     }
   }
 }

package/demos/pc/app/calendar-view/calendar-event.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-event')
+  const timeInput = page.locator('.tiny-filter-box').locator('.value')
+  const timeBtn = page.getByText('2023 年 05 月')
+  const leftYear = page.getByRole('button', { name: '前一年' })
+  const month6 = page.getByText('六月')
+  const leftSvg = page.locator('.header-left > .tiny-svg')
+  const rightSvg = page.locator('.header-right > .tiny-svg')
+  await timeBtn.click()
+  await page.waitForTimeout(100)
+  await leftYear.click()
+  await page.waitForTimeout(100)
+  await month6.click()
+  await page.waitForTimeout(100)
+  await expect(timeInput).toHaveText('2022 年 06 月')
+  await leftSvg.click()
+  await page.waitForTimeout(100)
+  await expect(timeInput).toHaveText('2022 年 05 月')
+  await rightSvg.click()
+  await page.waitForTimeout(100)
+  await expect(timeInput).toHaveText('2022 年 06 月')
+})

package/demos/pc/app/calendar-view/calendar-mode.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('显示模式', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-mode')
+  const monthBtn = page.locator('label').nth(2)
+  const timelineBtn = page.locator('label').nth(3)
+  const scheduleBtn = page.locator('label').nth(4)
+  const dmonthDom = page.locator('.tiny-calendar-view-month__main')
+  const timelineDom = page.locator('.tiny-calendar-view-week__timeline')
+  const scheduleDom = page.locator('.tiny-calendar-view-week__schedule')
+  // 验证按钮是否选中，验证时间组件页面是否正确
+  await expect(monthBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
+  await expect(dmonthDom).toBeVisible()
+
+  await timelineBtn.click()
+  await page.waitForTimeout(100)
+  await expect(timelineBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
+  await expect(timelineDom).toBeVisible()
+
+  await scheduleBtn.click()
+  await page.waitForTimeout(100)
+  await expect(scheduleBtn.locator('.tiny-svg')).toHaveClass(/fill-brand/)
+  await expect(scheduleDom).toBeVisible()
+})

package/demos/pc/app/calendar-view/calendar-schedule-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('calendar-view#calendar-schedule-slot')
+  const solt1 = page.locator('.new-schedule').first()
+  const soltData1 = page.getByText('新增事件2023-4-30')
+  const solt5 = page.locator('li:nth-child(5) > .new-schedule')
+  const soltData5 = page.getByText('新增事件2023-5-4')
+  await expect(solt1).toBeVisible()
+  await page.waitForTimeout(200)
+  await solt1.click()
+  await page.waitForTimeout(100)
+  await expect(soltData1).toBeVisible()
+  await solt5.click()
+  await page.waitForTimeout(100)
+  await expect(soltData5).toBeVisible()
+})

package/demos/pc/app/calendar-view/calendar-timeline-range.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('时间线范围配置', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-timeline-range')
+  const dayTime = page.locator('.day-times')
+  const firstTime = dayTime.locator('ul>li>span').first()
+  const lastTime = dayTime.getByText('21:00')
+  await expect(firstTime).toHaveText('10:00')
+  await expect(lastTime).not.toBeVisible()
+})

package/demos/pc/app/calendar-view/calendar-timeline-slot.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test'
+
+test('时间线插槽', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#calendar-timeline-slot')
+  const demoPage = page.locator('#calendar-timeline-slot')
+  const fixWeek2 = page.getByText('前端周会2').first()
+  const popWeek2 = page.locator('.title').filter({ hasText: '前端周会2' })
+  const fixWeek = page.locator('#calendar-timeline-slot').getByText('节假日25-28')
+  const popWeek = page.locator('.title').filter({ hasText: '节假日25-28' })
+  // 校验固定内容
+  await expect(demoPage).toHaveText(/15前端周会2前端周会2-1前端周会1/)
+  await expect(demoPage).toHaveText(/16前端周会4前端周会3/)
+  await expect(demoPage).toHaveText(/25节假日25-28前端周会5/)
+  await expect(demoPage.locator('.events-end').first()).toHaveClass(/bg-green/)
+  // 校验hover弹出框
+  await fixWeek2.hover()
+  await page.waitForTimeout(100)
+  await expect(popWeek2).toBeVisible()
+  await fixWeek.hover()
+  await page.waitForTimeout(100)
+  await expect(popWeek).toBeVisible()
+})

package/demos/pc/app/calendar-view/custom-calendar-toolbar.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义工具栏', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#custom-calendar-toolbar')
+  const toolDom = page.getByRole('paragraph').filter({ hasText: '此处为自定义工具栏插槽' })
+  await expect(toolDom).toBeVisible()
+})

package/demos/pc/app/calendar-view/custom-day-bg-color.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义单元格背景色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#custom-day-bg-color')
+  const selectDay = page.getByRole('listitem').filter({ hasText: '10' }).first()
+  await expect(selectDay).toHaveClass(/bg-red/)
+})

package/demos/pc/app/calendar-view/custom-header.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('自定义头部显示', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#custom-header')
+  const timelineBtn = page.locator('label').nth(3)
+  const customHeader = page.getByText('2023-5-3 周三')
+  await timelineBtn.click()
+  await page.waitForTimeout(200)
+  await expect(customHeader).toBeVisible()
+})

package/demos/pc/app/calendar-view/multi-select-composition-api.vue

@@ -11,13 +11,13 @@
   </tiny-calendar-view>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 import { CalendarView as TinyCalendarView, Modal } from '@opentiny/vue'
 
 const eventslist = ref([])
 
 const selectedDateChange = (date) => {
-  Modal.message(`当前选择${JSON.stringify(date)}`)
+  Modal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
 }
 </script>

package/demos/pc/app/calendar-view/multi-select.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('日期多选', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#multi-select')
+  const selectDay16 = page.getByRole('listitem').filter({ hasText: '16' })
+  const selectDay17 = page.getByRole('listitem').filter({ hasText: '17' })
+  await selectDay16.click()
+  await selectDay17.click()
+  await page.waitForTimeout(100)
+  await expect(selectDay16.locator('.day-selected')).toBeVisible()
+  await expect(selectDay17.locator('.day-selected')).toBeVisible()
+})

package/demos/pc/app/calendar-view/multi-select.vue

@@ -25,7 +25,7 @@ export default {
   },
   methods: {
     selectedDateChange(date) {
-      Modal.message(`当前选择${JSON.stringify(date)}`)
+      Modal.message({ message: `当前选择${JSON.stringify(date)}`, status: 'info' })
     }
   }
 }

package/demos/pc/app/calendar-view/set-working-day-composition-api.vue

@@ -16,13 +16,9 @@
   </tiny-calendar-view>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
-import {
-  CalendarView as TinyCalendarView,
-  Button as TinyButton,
-  Modal
-} from '@opentiny/vue'
+import { CalendarView as TinyCalendarView, Button as TinyButton, Modal } from '@opentiny/vue'
 
 const workingDays = ref([])
 const offDays = ref([])
@@ -37,7 +33,7 @@ const map = {
 
 const setDays = (type) => {
   if (!selectedDate.value.length) {
-    Modal.message('请选择日期')
+    Modal.message({ message: '请选择日期', status: 'info' })
     return
   }
   map[type].value.push(...selectedDate.value)

package/demos/pc/app/calendar-view/set-working-day.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test'
+
+test('设置工作日或节假日', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('calendar-view#set-working-day')
+  const workDay = page.getByRole('button', { name: '工作日' })
+  const restDay = page.getByRole('button', { name: '休息日' })
+  const holiDay = page.getByRole('button', { name: '节假日' })
+  const selectDay16 = page.getByRole('listitem').filter({ hasText: '16' })
+  const selectDay17 = page.getByRole('listitem').filter({ hasText: '17' })
+  const selectDay18 = page.getByRole('listitem').filter({ hasText: '18' })
+  await selectDay16.click()
+  await workDay.click()
+  await selectDay17.click()
+  await restDay.click()
+  await selectDay18.click()
+  await holiDay.click()
+  await page.waitForTimeout(200)
+  await expect(selectDay16).toHaveClass(/bg-blue/)
+  await expect(selectDay17).toHaveClass(/bg-green/)
+  await expect(selectDay18).toHaveClass(/bg-yellow/)
+})

package/demos/pc/app/calendar-view/set-working-day.vue

@@ -35,7 +35,7 @@ export default {
   methods: {
     setDays(type) {
       if (!this.selectedDate.length) {
-        Modal.message('请选择日期')
+        Modal.message({ message: '请选择日期', status: 'info' })
         return
       }
       this[type].push(...this.selectedDate)

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

@@ -97,7 +97,7 @@ export default {
     },
     {
       'demoId': 'custom-day-bg-color',
-      'name': { 'zh-CN': '自定义日期单元格背景色', 'en-US': 'Add Schedule Event' },
+      'name': { 'zh-CN': '自定义单元格背景色', 'en-US': 'Add Schedule Event' },
       'desc': {
         'zh-CN':
           '<p>自定义日期单元格背景色。</p>\n<p>目前只支持预置的颜色，可选颜色blue、green、red、yellow、purple、cyan、grey</p>\n',

package/demos/pc/app/carousel/autoplay-composition-api.vue

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

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

@@ -2,7 +2,9 @@ import { test, expect } from '@playwright/test'
 
 test('自动切换', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
+
   await page.goto('carousel#autoplay')
+  await page.waitForTimeout(100)
   const preview = page.locator('#autoplay')
   const carousel = preview.locator('.tiny-carousel')
   const carouselItems = preview.locator('div.tiny-carousel__item')

package/demos/pc/app/carousel/autoplay.vue

@@ -19,10 +19,10 @@ export default {
 
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

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

@@ -12,10 +12,10 @@ import { Carousel as TinyCarousel, CarouselItem as TinyCarouselItem } from '@ope
 
 <style scoped>
 .carousel-item-demo:nth-child(2n) {
-  background-color: #99a9bf;
+  background-color: #fafafa;
 }
 
 .carousel-item-demo:nth-child(2n + 1) {
-  background-color: #d3dce6;
+  background-color: #edf0f3;
 }
 </style>

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

@@ -5,15 +5,8 @@ test('基础用法', async ({ page }) => {
   await page.goto('carousel#basic-usage')
   const preview = page.locator('#basic-usage')
   await page.locator('div').filter({ hasText: /^1$/ }).click()
+  await preview.getByRole('list').getByRole('button').nth(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 preview.getByRole('list').getByRole('button').nth(2).click()
-  await preview.getByRole('list').getByRole('button').nth(3).click()
 })