@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/pc/app/guide/highlight-box-composition-api.vue

@@ -10,8 +10,14 @@
           <tiny-button plain class="hight3">新手引导3</tiny-button>
         </div>
         <div>
-          <tiny-alert class="hight4" :closable="false" description="type 为默认值 info"></tiny-alert>
-          <tiny-alert class="hight5" type="success" size="large" :closable="false" description="提交结果页用于反馈一系列操作任务的处理结果。">
+          <tiny-alert class="hight4" :closable="false" description="type 为默认值 info。"></tiny-alert>
+          <tiny-alert
+            class="hight5"
+            type="success"
+            size="large"
+            :closable="false"
+            description="提交结果页用于反馈一系列操作任务的处理结果。"
+          >
             <tiny-button size="mini" type="primary">继续提交</tiny-button>
             <tiny-button size="mini">取消操作</tiny-button>
           </tiny-alert>
@@ -23,12 +29,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import {
-  Guide as TinyGuide,
-  Alert as TinyAlert,
-  Button as TinyButton,
-  Divider as TinyDivider
-} from '@opentiny/vue'
+import { Guide as TinyGuide, Alert as TinyAlert, Button as TinyButton, Divider as TinyDivider } from '@opentiny/vue'
 
 const showStep = ref(false)
 const domData = ref([

package/demos/pc/app/guide/highlight-box.vue

@@ -10,8 +10,14 @@
           <tiny-button plain class="hight3">新手引导3</tiny-button>
         </div>
         <div>
-          <tiny-alert class="hight4" :closable="false" description="type 为默认值 info"></tiny-alert>
-          <tiny-alert class="hight5" type="success" size="large" :closable="false" description="提交结果页用于反馈一系列操作任务的处理结果。">
+          <tiny-alert class="hight4" :closable="false" description="type 为默认值 info。"></tiny-alert>
+          <tiny-alert
+            class="hight5"
+            type="success"
+            size="large"
+            :closable="false"
+            description="提交结果页用于反馈一系列操作任务的处理结果。"
+          >
             <tiny-button size="mini" type="primary">继续提交</tiny-button>
             <tiny-button size="mini">取消操作</tiny-button>
           </tiny-alert>

package/demos/pc/app/guide/offset-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-alert class="demo-guide-offset" :closable="false" description="type 为默认值 info"></tiny-alert>
+    <tiny-alert class="demo-guide-offset" :closable="false" description="type 为默认值 info。"></tiny-alert>
     <tiny-button plain @click="stepStartDefault">默认</tiny-button>
     <tiny-button plain @click="stepStartMainAxis">纵轴偏移 50px</tiny-button>
     <tiny-button plain @click="stepStartCrossAxis">横轴偏移 50px</tiny-button>
@@ -8,7 +8,12 @@
     <tiny-guide :show-step="showStepDefault" :dom-data="domDataDefault"></tiny-guide>
     <tiny-guide :show-step="showStepMainAxis" :dom-data="domDataMainAxis" :main-axis="50"></tiny-guide>
     <tiny-guide :show-step="showStepCrossAxis" :dom-data="domDataCrossAxis" :cross-axis="50"></tiny-guide>
-    <tiny-guide :show-step="showStepAlignmentAxis" :dom-data="domDataAlignmentAxis" :alignment-axis="50" pop-position="bottom-start"></tiny-guide>
+    <tiny-guide
+      :show-step="showStepAlignmentAxis"
+      :dom-data="domDataAlignmentAxis"
+      :alignment-axis="50"
+      pop-position="bottom-start"
+    ></tiny-guide>
   </div>
 </template>
 

package/demos/pc/app/guide/offset.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-alert class="demo-guide-offset" :closable="false" description="type 为默认值 info"></tiny-alert>
+    <tiny-alert class="demo-guide-offset" :closable="false" description="type 为默认值 info。"></tiny-alert>
     <tiny-button plain @click="stepStartDefault">默认</tiny-button>
     <tiny-button plain @click="stepStartMainAxis">纵轴偏移 50px</tiny-button>
     <tiny-button plain @click="stepStartCrossAxis">横轴偏移 50px</tiny-button>
@@ -8,7 +8,12 @@
     <tiny-guide :show-step="showStepDefault" :dom-data="domDataDefault"></tiny-guide>
     <tiny-guide :show-step="showStepMainAxis" :dom-data="domDataMainAxis" :main-axis="50"></tiny-guide>
     <tiny-guide :show-step="showStepCrossAxis" :dom-data="domDataCrossAxis" :cross-axis="50"></tiny-guide>
-    <tiny-guide :show-step="showStepAlignmentAxis" :dom-data="domDataAlignmentAxis" :alignment-axis="50" pop-position="bottom-start"></tiny-guide>
+    <tiny-guide
+      :show-step="showStepAlignmentAxis"
+      :dom-data="domDataAlignmentAxis"
+      :alignment-axis="50"
+      pop-position="bottom-start"
+    ></tiny-guide>
   </div>
 </template>
 

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

@@ -1,12 +1,7 @@
 <template>
   <div>
-    <tiny-button plain class="h1" @click="stepStart">新手引导自定义宽高</tiny-button>
-    <tiny-guide
-      :show-step="showStep"
-      :dom-data="domData"
-      width="300"
-      height="200"
-    ></tiny-guide>
+    <tiny-button plain class="auto-size" @click="stepStart">新手引导自定义宽高</tiny-button>
+    <tiny-guide :show-step="showStep" :dom-data="domData" width="300" height="200"></tiny-guide>
   </div>
 </template>
 
@@ -19,7 +14,7 @@ const domData = ref([
   {
     title: '新手引导标题1',
     text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
-    domElement: '.h1',
+    domElement: '.auto-size',
     button: [
       {
         text: '完成',

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

@@ -1,12 +1,7 @@
 <template>
   <div>
-    <tiny-button plain class="h1" @click="stepStart">新手引导自定义宽高</tiny-button>
-    <tiny-guide
-      :show-step="showStep"
-      :dom-data="domData"
-      width="300"
-      height="200"
-    ></tiny-guide>
+    <tiny-button plain class="auto-size" @click="stepStart">新手引导自定义宽高</tiny-button>
+    <tiny-guide :show-step="showStep" :dom-data="domData" width="300" height="200"></tiny-guide>
   </div>
 </template>
 
@@ -25,7 +20,7 @@ export default {
         {
           title: '新手引导标题1',
           text: '这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是新手引导文案这里是是新手引导',
-          domElement: '.h1',
+          domElement: '.auto-size',
           button: [
             {
               text: '完成',

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

@@ -70,10 +70,10 @@ export default {
     },
     {
       'demoId': 'modal-overlay-opening',
-      'name': { 'zh-CN': '设置模态叠加层开口', 'en-US': '' },
+      'name': { 'zh-CN': '模态叠加层开口', 'en-US': '' },
       'desc': {
         'zh-CN': `
-          <p><code>modal-overlay-opening-padding</code>：可以在模态叠加层开口周围添加的填充量，控制引导元素高亮范围；</p>
+          <p><code>modal-overlay-opening-padding</code>：可以在模态叠加层开口周围添加的填充量，控制引导元素高亮范围。</p>
           <p><code>modal-overlay-opening-radius</code>：可以在模态叠加层开口周围添加的边界半径量，控制引导元素高亮圆角。</p>
         `,
         'en-US': ''

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

@@ -4,6 +4,13 @@ test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('image#basic-usage')
 
-  const img = page.locator('.tiny-image > .tiny-image__inner')
-  await expect(img).toHaveCount(5)
+  const preview = page.locator('.pc-demo-container')
+  const imgs = preview.locator('.tiny-image > .tiny-image__inner')
+  await expect(imgs).toHaveCount(5)
+
+  await expect(imgs.nth(0)).toHaveCSS('object-fit', 'fill')
+  await expect(imgs.nth(1)).toHaveCSS('object-fit', 'contain')
+  await expect(imgs.nth(2)).toHaveCSS('object-fit', 'cover')
+  await expect(imgs.nth(3)).toHaveCSS('object-fit', 'none')
+  await expect(imgs.nth(4)).toHaveCSS('object-fit', 'scale-down')
 })

package/demos/pc/app/image/events.spec.ts

@@ -4,6 +4,8 @@ test('事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('image#events')
   const errorSlot = page.locator('.tiny-image__error')
-  await page.waitForTimeout(300)
+  const eventMsg = page.getByText('加载失败触发事件')
+
   await expect(errorSlot).toHaveCount(1)
+  await expect(eventMsg).toHaveCount(1)
 })

package/demos/pc/app/image/lazy-composition-api.vue

@@ -2,7 +2,7 @@
   <div>
     <div style="margin: 12px">滚动下面的容器，通过开发者工具中的观察网络请求：</div>
     <div class="demo-image__lazy" style="height: 300px; overflow-y: auto">
-      <tiny-image v-for="url in srcList" :key="url" :src="url" lazy></tiny-image>
+      <tiny-image v-for="url in srcList" :key="url" :src="url" lazy fit="fill"></tiny-image>
     </div>
   </div>
 </template>
@@ -21,6 +21,6 @@ const srcList = ref([
 <style scoped>
 .demo-image__lazy .tiny-image {
   display: block;
-  min-height: 200px;
+  min-height: 500px;
 }
 </style>

package/demos/pc/app/image/lazy.spec.ts

@@ -5,12 +5,15 @@ test('懒加载', async ({ page }) => {
   await page.goto('image#lazy')
 
   const preview = page.locator('.pc-demo-container')
-  await expect(preview.locator('.demo-image__lazy div').locator('img')).toHaveCount(2)
+  await expect(preview.locator('.demo-image__lazy div').locator('img')).toHaveCount(1)
 
+  // 滚动2次，触发下面2张加载
   const imageBox = preview.locator('.demo-image__lazy')
   await imageBox.hover()
-  await page.mouse.wheel(0, 2000)
-  await page.waitForTimeout(300)
-  await page.mouse.wheel(0, 1000)
+  await page.mouse.wheel(0, 300)
+  await page.waitForTimeout(100)
+  await page.mouse.wheel(0, 500)
+  await page.waitForTimeout(30)
+
   await expect(preview.locator('.demo-image__lazy').locator('img')).toHaveCount(3)
 })

package/demos/pc/app/image/lazy.vue

@@ -2,7 +2,7 @@
   <div>
     <div style="margin: 12px">滚动下面的容器，通过开发者工具中的观察网络请求：</div>
     <div class="demo-image__lazy" style="height: 300px; overflow-y: auto">
-      <tiny-image v-for="url in srcList" :key="url" :src="url" lazy></tiny-image>
+      <tiny-image v-for="url in srcList" :key="url" :src="url" lazy fit="fill"></tiny-image>
     </div>
   </div>
 </template>
@@ -29,6 +29,6 @@ export default {
 <style scoped>
 .demo-image__lazy .tiny-image {
   display: block;
-  min-height: 200px;
+  min-height: 500px;
 }
 </style>

package/demos/pc/app/image/preview-in-dialog.spec.ts

@@ -3,7 +3,21 @@ import { test, expect } from '@playwright/test'
 test('对话框中预览图片', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('image#preview-in-dialog')
-  await page.getByRole('button', { name: '弹出Dialog' }).click()
+
+  const preview = page.locator('.pc-demo-container')
+  const viewerImage = page.locator('.tiny-image-viewer')
+  const btn = preview.getByRole('button', { name: '弹出Dialog' })
   const dialog = page.locator('.pc-demo-container .tiny-dialog-box__title')
+  const image = preview.locator('.tiny-image__inner')
+
+  // 打开对话框
+  await btn.click()
+  await page.waitForTimeout(50)
   await expect(dialog).toBeVisible()
+  await expect(image).toBeVisible()
+
+  // 打开预览
+  await image.click()
+  await page.waitForTimeout(50)
+  await expect(viewerImage).toBeVisible()
 })

package/demos/pc/app/image/preview.spec.ts

@@ -5,35 +5,50 @@ test('图片大图', async ({ page }) => {
 
   await page.goto('image#preview')
   const preview = page.locator('.pc-demo-container')
-
   await preview.locator('.tiny-image__inner').click()
-  const viewerImage = page.locator('.tiny-image-viewer')
-  await expect(viewerImage).toHaveCount(1)
+  await page.waitForTimeout(50)
 
+  // viewerImage 是插入到body末尾的。
+  const viewerImage = page.locator('.tiny-image-viewer')
+  const mask = viewerImage.locator('.tiny-image-viewer__mask')
   const toolbar = viewerImage.locator('.tiny-image-viewer__actions-inner')
   const canvas = viewerImage.locator('.tiny-image-viewer__img')
+
+  // 验证出现
+  await expect(viewerImage).toHaveCount(1)
+  await expect(canvas).toHaveCount(1)
+  await expect(mask).toHaveCSS('position', 'absolute')
+  await expect(mask).toHaveCSS('opacity', '0.5')
+  await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+
   // 点击缩小
   await toolbar.locator('svg').first().click()
+  await page.waitForTimeout(20)
   await expect(canvas).toHaveCSS('transform', 'matrix(0.8, 0, 0, 0.8, 0, 0)')
 
   //   点击放大
   await toolbar.locator('svg').nth(1).click()
+  await page.waitForTimeout(20)
   await expect(canvas).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
 
   // 点击向左旋转
   await toolbar.locator('svg').nth(3).click()
+  await page.waitForTimeout(20)
   await expect(canvas).toHaveCSS('transform', 'matrix(0, -1, 1, 0, 0, 0)')
 
-  // // 点击切换上一张图片
-  // let preImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
-  // await page.locator('span:nth-child(3) > .tiny-svg').click()
-  // let currentImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
-  // await expect(preImageSrc).not.toEqual(currentImageSrc)
-  // // 点击切换下一张图片
-  // preImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
-  // await page.locator('span:nth-child(4) > .tiny-svg').click()
-  // currentImageSrc = await page.locator('.tiny-image-viewer__img').getAttribute('src')
-  // await expect(preImageSrc).not.toEqual(currentImageSrc)
+  const prev = viewerImage.locator('.tiny-image-viewer__prev')
+  const next = viewerImage.locator('.tiny-image-viewer__next')
+
+  // // 点击切换
+  await next.click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveAttribute('src', /house\.jpg/)
+
+  await prev.click()
+  await page.waitForTimeout(20)
+  await prev.click()
+  await page.waitForTimeout(20)
+  await expect(canvas).toHaveAttribute('src', /bridge\.jpg/)
 
   // 点击关闭
   await viewerImage.locator('.tiny-image-viewer__close').click()

package/demos/pc/app/image/slot.spec.ts

@@ -5,5 +5,8 @@ test('插槽', async ({ page }) => {
 
   await page.goto('image#slot')
   const errorSlot = page.locator('.tiny-image__error')
+  const customLost = page.getByText('图片已丢失')
+
   await expect(errorSlot).toBeVisible()
+  await expect(customLost).toBeVisible()
 })

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

@@ -193,7 +193,7 @@ export default {
         {
           'name': 'autocomplete',
           'type': 'string',
-          'defaultValue': 'off',
+          'defaultValue': `'off'`,
           'desc': {
             'zh-CN': '原生 autocomplete 属性',
             'en-US': 'Native autocomplete attribute'
@@ -317,7 +317,7 @@ export default {
         },
         {
           'name': 'modelValue / v-model',
-          'type': 'string , number',
+          'type': 'string | number',
           'defaultValue': '',
           'desc': {
             'zh-CN': '设置文本的绑定值',
@@ -347,7 +347,7 @@ export default {
         },
         {
           'name': 'prefix-icon',
-          'type': 'Component',
+          'type': 'VueComponent',
           'defaultValue': '',
           'desc': {
             'zh-CN': '输入框头部图标',
@@ -367,7 +367,7 @@ export default {
         },
         {
           'name': 'resize',
-          'type': '"both" | "horizontal" | "vertical" | "none"',
+          'type': `'both' | 'horizontal' | 'vertical' | 'none'`,
           'defaultValue': '',
           'desc': {
             'zh-CN': '控制是否能被用户缩放',
@@ -408,7 +408,7 @@ export default {
         },
         {
           'name': 'size',
-          'type': '"medium" | "small" | "mini"',
+          'type': `'medium' | 'small' | 'mini'`,
           'defaultValue': '',
           'desc': {
             'zh-CN': '输入框尺寸，只在 type!="textarea" 时有效',
@@ -428,7 +428,7 @@ export default {
         },
         {
           'name': 'suffix-icon',
-          'type': 'Component',
+          'type': 'VueComponent',
           'defaultValue': '',
           'desc': {
             'zh-CN': '输入框尾部图标',
@@ -441,19 +441,19 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '原生属性，输入框的tabindex',
+            'zh-CN': '原生属性，输入框的 tabindex',
             'en-US': 'Native attribute, tabindex in the text box'
           },
           'demoId': ''
         },
         {
           'name': 'type',
-          'type': '"text" | "textarea" | "password" | InputHTMLAttributes.type',
-          'defaultValue': 'text',
+          'type': `'text' | 'textarea' | 'password' | InputHTMLAttributes.type`,
+          'defaultValue': `'text'`,
           'desc': {
-            'zh-CN': '设置input框的type属性，默认为 text,可选值 text，textarea 和其他 原生 input 的 type 值',
+            'zh-CN': '设置 input 框的 type 属性，默认为 "text",可选值 "text"，"textarea" 和其他 原生 input 的 type 值',
             'en-US':
-              'Set the type attribute of the input box. The default value is text. The options are text, textarea, and type values of other native inputs.'
+              'Set the type attribute of the input box. The default value is "text". The options are "text", "textarea", and type values of other native inputs.'
           },
           'demoId': 'type'
         },

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

@@ -1,5 +1,5 @@
 <template>
-  <tiny-link :underline="false">默认链接</tiny-link>
+  <tiny-link>默认链接</tiny-link>
 </template>
 
 <script setup lang="jsx">

package/demos/pc/app/link/basic-usage.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('link#basic-usage')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#basic-usage')
   const anchor = preview.locator('a')
   await anchor.hover()
   await expect(anchor).toHaveCSS('color', 'rgb(82, 110, 204)')

package/demos/pc/app/link/basic-usage.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-link :underline="false">默认链接</tiny-link>
+  <tiny-link>默认链接</tiny-link>
 </template>
 
 <script lang="jsx">

package/demos/pc/app/link/config-href.spec.ts

@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
 test('链接地址', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('link#config-href')
-  const preview = page.locator('#preview')
-  const anchor = preview.getByRole('link', { name: '默认链接' })
+  const demo = page.locator('#config-href')
+  const anchor = demo.getByRole('link', { name: '默认链接' })
   await expect(anchor).toHaveAttribute('target', '_blank')
   await expect(anchor).toHaveAttribute('href', /\S+/)
 })

package/demos/pc/app/link/custom-icon.spec.ts

@@ -3,13 +3,13 @@ import { test, expect } from '@playwright/test'
 test('自定义图标', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('link#custom-icon')
-  const preview = page.locator('#preview')
-  const edit = preview.locator('a').filter({ hasText: '编辑' })
+  const demo = page.locator('#custom-icon')
+  const edit = demo.locator('a').filter({ hasText: '编辑' })
   await expect(edit.locator('svg')).toHaveCount(1)
-  const disabled = preview.locator('a').filter({ hasText: '禁用' })
+  const disabled = demo.locator('a').filter({ hasText: '禁用' })
   await expect(disabled.locator('svg')).toHaveCount(1)
-  const view = preview.locator('a').filter({ hasText: '查看' })
+  const view = demo.locator('a').filter({ hasText: '查看' })
   await expect(view.locator('svg')).toHaveCount(1)
-  const del = preview.locator('a').filter({ hasText: '删除' })
+  const del = demo.locator('a').filter({ hasText: '删除' })
   await expect(del.locator('svg')).toHaveCount(1)
 })

package/demos/pc/app/link/dynamic-disable.spec.ts

@@ -3,28 +3,28 @@ import { test, expect } from '@playwright/test'
 test('禁用', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('link#dynamic-disable')
-  const preview = page.locator('#preview')
-  let anchor = preview.locator('a').filter({ hasText: '默认链接' })
+  const demo = page.locator('#dynamic-disable')
+  let anchor = demo.locator('a').filter({ hasText: '默认链接' })
   await expect(anchor).toHaveCSS('cursor', 'not-allowed')
   await anchor.hover()
   await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
-  anchor = preview.locator('a').filter({ hasText: '主要链接' })
+  anchor = demo.locator('a').filter({ hasText: '主要链接' })
   await expect(anchor).toHaveCSS('cursor', 'not-allowed')
   await anchor.hover()
-  await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
-  anchor = preview.locator('a').filter({ hasText: '成功链接' })
+  await expect(anchor).toHaveCSS('color', 'rgb(160, 207, 255)')
+  anchor = demo.locator('a').filter({ hasText: '成功链接' })
   await expect(anchor).toHaveCSS('cursor', 'not-allowed')
   await anchor.hover()
-  await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
-  anchor = preview.locator('a').filter({ hasText: '警告链接' })
+  await expect(anchor).toHaveCSS('color', 'rgb(166, 195, 185)')
+  anchor = demo.locator('a').filter({ hasText: '警告链接' })
   await expect(anchor).toHaveCSS('cursor', 'not-allowed')
   await anchor.hover()
-  await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
-  anchor = preview.locator('a').filter({ hasText: '危险链接' })
+  await expect(anchor).toHaveCSS('color', 'rgb(211, 198, 162)')
+  anchor = demo.locator('a').filter({ hasText: '危险链接' })
   await expect(anchor).toHaveCSS('cursor', 'not-allowed')
   await anchor.hover()
-  await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')
-  anchor = preview.locator('a').filter({ hasText: '信息链接' })
+  await expect(anchor).toHaveCSS('color', 'rgb(216, 186, 181)')
+  anchor = demo.locator('a').filter({ hasText: '信息链接' })
   await expect(anchor).toHaveCSS('cursor', 'not-allowed')
   await anchor.hover()
   await expect(anchor).toHaveCSS('color', 'rgb(191, 191, 191)')

package/demos/pc/app/link/focus-no-underline.spec.ts

@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
 test('聚焦时有无下划线', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('link#focus-no-underline')
-  const preview = page.locator('#preview')
-  let anchor = preview.locator('a').filter({ hasText: '无下划线' })
+  const demo = page.locator('#focus-no-underline')
+  let anchor = demo.locator('a').filter({ hasText: '无下划线' })
   await anchor.hover()
   await expect(anchor).toHaveCSS('text-decoration', /none/)
   // 无法获取到伪元素::after，暂时跳过测试
-  anchor = preview.locator('a').filter({ hasText: '有下划线' })
+  anchor = demo.locator('a').filter({ hasText: '有下划线' })
   await anchor.hover()
 })

package/demos/pc/app/link/link-style-composition-api.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <tiny-link :underline="false"> 默认链接 </tiny-link>
-    <tiny-link :underline="false" type="primary"> 主要链接 </tiny-link>
-    <tiny-link :underline="false" type="success"> 成功链接 </tiny-link>
-    <tiny-link :underline="false" type="warning"> 警告链接 </tiny-link>
-    <tiny-link :underline="false" type="danger"> 危险链接 </tiny-link>
-    <tiny-link :underline="false" type="info"> 信息链接 </tiny-link>
+    <tiny-link> 默认链接 </tiny-link>
+    <tiny-link type="primary"> 主要链接 </tiny-link>
+    <tiny-link type="success"> 成功链接 </tiny-link>
+    <tiny-link type="warning"> 警告链接 </tiny-link>
+    <tiny-link type="danger"> 危险链接 </tiny-link>
+    <tiny-link type="info"> 信息链接 </tiny-link>
   </div>
 </template>
 

package/demos/pc/app/link/link-style.spec.ts

@@ -3,23 +3,52 @@ import { test, expect } from '@playwright/test'
 test('主题样式', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('link#link-style')
-  const preview = page.locator('#preview')
-  let anchor = preview.locator('a').filter({ hasText: '默认链接' })
+
+  const demo = page.locator('#link-style')
+  let getAfter = async (index: number) =>
+    await page.evaluate((index: number) => {
+      const link = document.querySelector(`#link-style .tiny-link:nth-child(${index})`)
+      if (link) {
+        const { borderBottomColor } = window.getComputedStyle(link, '::after')
+        return borderBottomColor
+      } else {
+        return ''
+      }
+    }, index)
+
+  let anchor = demo.locator('a').filter({ hasText: '默认链接' })
+  await expect(anchor).toHaveCSS('color', 'rgb(37, 43, 58)')
   await anchor.hover()
+  await expect(await getAfter(1)).toBe('rgb(94, 124, 224)')
   await expect(anchor).toHaveCSS('color', 'rgb(82, 110, 204)')
-  anchor = preview.locator('a').filter({ hasText: '主要链接' })
+
+  anchor = demo.locator('a').filter({ hasText: '主要链接' })
+  await expect(anchor).toHaveCSS('color', 'rgb(94, 124, 224)')
   await anchor.hover()
+  await expect(await getAfter(2)).toBe('rgb(94, 124, 224)')
   await expect(anchor).toHaveCSS('color', 'rgb(118, 147, 245)')
-  anchor = preview.locator('a').filter({ hasText: '成功链接' })
+
+  anchor = demo.locator('a').filter({ hasText: '成功链接' })
+  await expect(anchor).toHaveCSS('color', 'rgb(80, 212, 171)')
   await anchor.hover()
+  await expect(await getAfter(3)).toBe('rgb(80, 212, 171)')
   await expect(anchor).toHaveCSS('color', 'rgb(172, 242, 220)')
-  anchor = preview.locator('a').filter({ hasText: '警告链接' })
+
+  anchor = demo.locator('a').filter({ hasText: '警告链接' })
+  await expect(anchor).toHaveCSS('color', 'rgb(250, 152, 65)')
   await anchor.hover()
+  await expect(await getAfter(4)).toBe('rgb(250, 152, 65)')
   await expect(anchor).toHaveCSS('color', 'rgb(250, 194, 10)')
-  anchor = preview.locator('a').filter({ hasText: '危险链接' })
+
+  anchor = demo.locator('a').filter({ hasText: '危险链接' })
+  await expect(anchor).toHaveCSS('color', 'rgb(199, 0, 11)')
   await anchor.hover()
+  await expect(await getAfter(5)).toBe('rgb(199, 0, 11)')
   await expect(anchor).toHaveCSS('color', 'rgb(214, 74, 82)')
-  anchor = preview.locator('a').filter({ hasText: '信息链接' })
+
+  anchor = demo.locator('a').filter({ hasText: '信息链接' })
+  await expect(anchor).toHaveCSS('color', 'rgb(37, 43, 58)')
   await anchor.hover()
+  await expect(await getAfter(6)).toBe('rgb(37, 43, 58)')
   await expect(anchor).toHaveCSS('color', 'rgb(92, 97, 115)')
 })