@opentiny/vue-docs 2.2.6 → 2.2.7

package/demos/pc/app/bulletin-board/base.spec.ts

@@ -4,14 +4,14 @@ test('BulletinBoard 基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#base')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#base')
   const tabTitle = preview.locator('.tiny-tabs__item')
   const tabContent = preview.locator('.tiny-tab-pane')
 
   // 默认激活第一项选项卡
   await expect(tabTitle.first()).toHaveClass(/is-active/)
+  await expect(tabTitle.first()).toContainText('TINY 更新日志')
   await expect(tabTitle.first()).toHaveCSS('color', 'rgb(94, 124, 224)')
-  await expect(tabTitle.first()).toHaveCSS('border-bottom', '3px solid rgb(94, 124, 224)')
   await expect(tabContent.first()).toHaveClass(/active-item/)
   await expect(tabContent.first()).toBeVisible()
 
@@ -25,7 +25,6 @@ test('BulletinBoard 基本用法', async ({ page }) => {
     await tabTitle.nth(i).click()
     await expect(tabTitle.nth(i)).toHaveClass(/is-active/)
     await expect(tabTitle.nth(i)).toHaveCSS('color', 'rgb(94, 124, 224)')
-    await expect(tabTitle.nth(i)).toHaveCSS('border-bottom', '3px solid rgb(94, 124, 224)')
     await expect(tabContent.nth(i)).toHaveClass(/active-item/)
     await expect(tabContent.nth(i)).toBeVisible()
   }

package/demos/pc/app/bulletin-board/icon.spec.ts

@@ -4,7 +4,7 @@ test('BulletinBoard 自定义新公告前缀', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#icon')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#icon')
   const tabContent = preview.locator('.tiny-tab-pane')
 
   // 自定义图标替代默认文字'NEW'

package/demos/pc/app/bulletin-board/more-link.spec.ts

@@ -4,8 +4,14 @@ test('BulletinBoard 显示 “更多” 链接(', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#more-link')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#more-link')
   const moreLink = preview.locator('.tiny-bulletin-board__more-link')
 
-  await expect(moreLink).toHaveCount(3)
+  await expect(moreLink.nth(0)).toContainText('更多')
+  await expect(moreLink.nth(1)).toContainText('更多')
+  await expect(moreLink.nth(2)).toContainText('更多')
+
+  await expect(moreLink.nth(0)).toHaveAttribute('href', '/Alert')
+  await expect(moreLink.nth(1)).toHaveAttribute('href', '/Alert')
+  await expect(moreLink.nth(2)).toHaveAttribute('href', '/Alert')
 })

package/demos/pc/app/bulletin-board/route.spec.ts

@@ -1,12 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('BulletinBoard 基于Route的跳转(', async ({ page }) => {
+test('BulletinBoard 基于Route的跳转', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#route')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#route')
   const contentTitle = preview.locator('.tiny-bulletin-board__textTitle')
 
   // 判断a标签href属性值
-  expect(await contentTitle.getAttribute('href')).toBe('/#/Alert')
+  await expect(contentTitle).toHaveAttribute('href', '/#/Alert')
 })

package/demos/pc/app/bulletin-board/tab-title.spec.ts

@@ -4,7 +4,7 @@ test('BulletinBoard 选项卡标题(', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#tab-title')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#tab-title')
   const tabTitle = preview.locator('.tiny-tabs__item')
 
   await expect(tabTitle).toHaveCount(3)

package/demos/pc/app/bulletin-board/title.spec.ts

@@ -4,7 +4,7 @@ test('BulletinBoard 公告牌标题(', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#title')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#title')
   const title = preview.locator('.tiny-bulletin-board__title')
 
   await expect(title).toBeVisible()

package/demos/pc/app/bulletin-board/url.spec.ts

@@ -1,12 +1,12 @@
 import { test, expect } from '@playwright/test'
 
-test('BulletinBoard 基于Url的跳转(', async ({ page }) => {
+test('BulletinBoard 基于Url的跳转', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('bulletin-board#url')
 
-  const preview = page.locator('#preview')
+  const preview = page.locator('#url')
   const contentTitle = preview.locator('.tiny-bulletin-board__textTitle')
 
   // a标签href属性值
-  expect(await contentTitle.getAttribute('href')).toBe('localhost:3000/#/webcore/zh-CN/guide/changelog')
+  await expect(contentTitle).toHaveAttribute('href', 'localhost:3000/#/webcore/zh-CN/guide/changelog')
 })

package/demos/pc/app/bulletin-board/webdoc/bulletin-board.js

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN':
-          '<p>必须设置 <code>data</code> 属性设置公告牌公告信息数据，以及 <code>tab-title</code> 属性设置每个公告牌标题。</p>\n',
+          '<p>通过 <code>data</code> 设置公告牌公告信息数据，<code>tab-title</code> 属性设置每个公告牌标题。</p>\n',
         'en-US':
           '<p>The <code>data</code> attribute must be set to set the bulletin information data, and the <code>tab-title</code> attribute must be set to set the title of each bulletin board. </p>\n'
       },
@@ -17,7 +17,7 @@ export default {
       'demoId': 'title',
       'name': { 'zh-CN': '公告牌标题', 'en-US': 'Billboard Title' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>title</code> 设置公告牌标题。</p>\n',
+        'zh-CN': '<p>通过 <code>title</code> 设置公告牌标题。</p>\n',
         'en-US': '<p>You can use <code>title</code> to set the bulletin board title. </p>\n'
       },
       'codeFiles': ['title.vue']
@@ -26,7 +26,7 @@ export default {
       'demoId': 'active-name',
       'name': { 'zh-CN': '默认激活的选项卡', 'en-US': 'Default Activated Tab' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>active-name</code> 设置默认激活的选项卡，从 <code>1</code> 开始计算。</p>\n',
+        'zh-CN': '<p>通过 <code>active-name</code> 设置默认激活的选项卡，从 <code>1</code> 开始计算。</p>\n',
         'en-US':
           '<p>You can set the default active tab by <code>active-name</code>, starting from <code>1</code>. </p>\n'
       },
@@ -36,7 +36,7 @@ export default {
       'demoId': 'tab-title',
       'name': { 'zh-CN': '选项卡标题', 'en-US': 'Tab Title' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>tab-title</code> 属性自定义选项卡标题。</p>\n',
+        'zh-CN': '<p>通过 <code>tab-title</code> 设置自定义选项卡标题。</p>\n',
         'en-US': '<p>You can customize the tab title by using the <code>tab-title</code> attribute. </p>\n'
       },
       'codeFiles': ['tab-title.vue']
@@ -45,7 +45,8 @@ export default {
       'demoId': 'url',
       'name': { 'zh-CN': '基于Url的跳转', 'en-US': 'URL-based redirection' },
       'desc': {
-        'zh-CN': '<p>基于 Url 的跳转是根据数据中的 <code>url</code> 和 <code>target</code> 字段进行跳转的。</p>\n',
+        'zh-CN':
+          '<p>基于 <code>Url</code> 的跳转是通过数据中的 <code>url</code> 和 <code>target</code> 字段进行设置的。</p>\n',
         'en-US':
           '<p>The URL-based redirection is based on the <code>url</code> and <code>target</code> fields in the data. </p>\n'
       },
@@ -55,7 +56,7 @@ export default {
       'demoId': 'route',
       'name': { 'zh-CN': '基于Route的跳转', 'en-US': 'Route-based redirection' },
       'desc': {
-        'zh-CN': '<p>基于 Route 的跳转是根据数据中的 <code>route</code> 字段进行跳转的。</p>\n',
+        'zh-CN': '<p>基于  <code>Route</code> 的跳转是通过数据中的 <code>route</code> 字段进行设置的的。</p>\n',
         'en-US': '<p>Route-based redirection is performed based on the <code>route</code> field in the data. </p>\n'
       },
       'codeFiles': ['route.vue']
@@ -65,7 +66,7 @@ export default {
       'name': { 'zh-CN': '显示 “更多” 链接', 'en-US': 'Show More links' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>more-link</code> 显示并设置更多链接。 <code>show-more</code> 设置是否显示更多按钮，默认为 true。</p>\n',
+          '<p>通过 <code>more-link</code> 显示并设置更多链接。 <code>show-more</code> 设置是否显示更多按钮，默认为 true。</p>\n',
         'en-US':
           '<p>You can use <code>more-link</code> to display and set more links. <code>show-more</code> Sets whether to display the More button. The default value is true. </p>\n'
       },
@@ -75,7 +76,7 @@ export default {
       'demoId': 'icon',
       'name': { 'zh-CN': '自定义新公告前缀', 'en-US': 'User-defined bulletin prefix' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>icon</code> 自定义新公告前缀图标。</p>\n',
+        'zh-CN': '<p>通过 <code>icon</code> 自定义新公告前缀图标。</p>\n',
         'en-US': '<p>You can use <code>icon</code> to customize the new bulletin prefix icon. </p>\n'
       },
       'codeFiles': ['icon.vue']
@@ -85,11 +86,11 @@ export default {
     {
       'name': 'bulletin-board',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'active-name',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 1',
+          'defaultValue': '1',
           'desc': {
             'zh-CN': "默认显示第1栏，可选'1' '2' '3'等",
             'en-US': 'By default, column 1 is displayed. You can select 1, 2, or 3.'
@@ -117,7 +118,7 @@ export default {
         {
           'name': 'show-more',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
             'zh-CN': '是否显示更多按钮，默认显示,需要与 more-link 同时使用',
             'en-US':

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

package/demos/pc/app/carousel/manual-play.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#manual-play')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#manual-play')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   const numButtons = preview.locator('#num').getByRole('button')
 

package/demos/pc/app/carousel/play-interval.spec.ts

@@ -3,15 +3,11 @@ import { test, expect } from '@playwright/test'
 test('轮播间隔时间', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('carousel#play-interval')
-  const preview = page.locator('#preview')
-  const carouselItems = preview.locator('div.tiny-carousel__item')
-
-  // 当前应该显示第二张幻灯片
-  await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-  await page.waitForTimeout(1000)
-  // 当前应该显示第三张幻灯片
-  await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
-  await page.waitForTimeout(1000)
-  // 当前应该显示第四张幻灯片
-  await expect(carouselItems.nth(3)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+  const preview = page.locator('#play-interval')
+  const carouselItems = preview.locator('div.tiny-carousel__item.is-animating')
+  const carouselItemsActive = preview.locator('div.tiny-carousel__item.is-active')
+  await expect(carouselItems).toHaveCSS('transition', 'transform 0.4s ease-in-out 0s')
+  await page.waitForTimeout(500)
+  await expect(carouselItemsActive).toHaveCSS('z-index', '2')
+  await page.waitForTimeout(500)
 })

package/demos/pc/app/carousel/show-title.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#show-title')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#show-title')
   const carouselItems = preview.locator('div.tiny-carousel__item')
   const indicators = preview.getByRole('list').getByRole('button')
   await expect(carouselItems.first().locator('span')).toHaveText('幻灯片 - 1')

package/demos/pc/app/carousel/up-down-carousel.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#up-down-carousel')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#up-down-carousel')
   const indicators = preview.getByRole('button')
   const carouselItems = preview.locator('.tiny-carousel__item')
   await indicators.nth(1).hover()

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

@@ -287,7 +287,7 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': { 'zh-CN': '幻灯片名称', 'en-US': 'Slide Name' },
-          'demoId': 'show-title'
+          'demoId': 'manual-play'
         }
       ],
       'slots': [

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

@@ -502,7 +502,7 @@ export default {
             'zh-CN': '次级菜单的展开方式',
             'en-US': 'The expansion mode of the secondary menu'
           },
-          'demoId': 'basic-usage'
+          'demoId': 'expand-trigger'
         },
         {
           'name': 'multiple',

package/demos/pc/app/chart/webdoc/chart-attributes-demo.js

@@ -80,5 +80,5 @@ export default {
       'codeFiles': ['props/demo3.vue']
     }
   ],
-  apis: [{ 'name': 'chart-attributes-demo', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-attributes-demo', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-autonavi-map.js

@@ -14,5 +14,5 @@ export default {
       'codeFiles': ['amap/base.vue']
     }
   ],
-  apis: [{ 'name': 'chart-autonavi-map', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-autonavi-map', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-baidu-map.js

@@ -14,5 +14,5 @@ export default {
       'codeFiles': ['bmap/base.vue']
     }
   ],
-  apis: [{ 'name': 'chart-baidu-map', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-baidu-map', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-bar.js

@@ -50,5 +50,5 @@ export default {
       'codeFiles': ['bar/demo7.vue']
     }
   ],
-  apis: [{ 'name': 'chart-bar', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-bar', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-boxplot.js

@@ -34,5 +34,5 @@ export default {
       'codeFiles': ['boxplot/vertical.vue']
     }
   ],
-  apis: [{ 'name': 'chart-boxplot', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-boxplot', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-candle.js

@@ -50,5 +50,5 @@ export default {
       'codeFiles': ['candle/demo7.vue']
     }
   ],
-  apis: [{ 'name': 'chart-candle', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-candle', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-events.js

@@ -14,5 +14,5 @@ export default {
       'codeFiles': ['events/base.vue']
     }
   ],
-  apis: [{ 'name': 'chart-events', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-events', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-funnel.js

@@ -53,5 +53,5 @@ export default {
       'codeFiles': ['funnel/demo7.vue']
     }
   ],
-  apis: [{ 'name': 'chart-funnel', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-funnel', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-gauge.js

@@ -38,5 +38,5 @@ export default {
       'codeFiles': ['gauge/demo5.vue']
     }
   ],
-  apis: [{ 'name': 'chart-gauge', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-gauge', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-graph.js

@@ -26,5 +26,5 @@ export default {
       'codeFiles': ['graph/demo3.vue']
     }
   ],
-  apis: [{ 'name': 'chart-graph', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-graph', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-heatmap.js

@@ -41,5 +41,5 @@ export default {
       'codeFiles': ['heatmap/demo5.vue']
     }
   ],
-  apis: [{ 'name': 'chart-heatmap', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-heatmap', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-histogram.js

@@ -56,5 +56,5 @@ export default {
       'codeFiles': ['histogram/demo8.vue']
     }
   ],
-  apis: [{ 'name': 'chart-histogram', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-histogram', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }

package/demos/pc/app/chart/webdoc/chart-line.js

@@ -62,5 +62,5 @@ export default {
       'codeFiles': ['line/demo9.vue']
     }
   ],
-  apis: [{ 'name': 'chart-line', 'type': 'component', 'properties': [], 'events': [], 'slots': [] }]
+  apis: [{ 'name': 'chart-line', 'type': 'component', 'props': [], 'events': [], 'slots': [] }]
 }