@opentiny/vue-docs 2.2.5 → 2.2.7

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

@@ -68,7 +68,7 @@ export default {
             'en-US':
               'The row group attribute can be configured. Columns with the same value are displayed in a row group.'
           },
-          'demoId': 'grid-row-grouping#row-grouping'
+          'demoId': 'grid-row-grouping#row-grouping-row-grouping'
         },
         {
           'name': 'toolbar',
@@ -81,7 +81,7 @@ export default {
         {
           'name': 'align',
           'type': `'left' | 'center' | 'right'`,
-          'defaultValue': 'left',
+          'defaultValue': `'left'`,
           'desc': {
             'zh-CN': '所有的列对齐方式;该属性的可选值为 left（左对齐）, center（居中对齐）, right（右对齐）',
             'en-US':
@@ -202,7 +202,7 @@ export default {
         {
           'name': 'footer-align',
           'type': `'left' | 'center' | 'right'`,
-          'defaultValue': '继承 align',
+          'defaultValue': `'left'`,
           'desc': {
             'zh-CN': '所有的表尾列的对齐方式;该属性的可选值为 left（左对齐）, center（居中对齐）, right（右对齐）',
             'en-US':
@@ -265,8 +265,8 @@ export default {
         },
         {
           'name': 'header-align',
-          'type': 'string',
-          'defaultValue': '继承 align',
+          'type': `'left' | 'center' | 'right'`,
+          'defaultValue': `'left'`,
           'desc': {
             'zh-CN': '所有的表头列的对齐方式;该属性的可选值为 left（左对齐）, center（居中对齐）, right（右对齐）',
             'en-US':
@@ -369,7 +369,14 @@ export default {
           'type': 'boolean',
           'defaultValue': 'true',
           'desc': { 'zh-CN': '表格是否显示加载中', 'en-US': 'Whether the table is being loaded.' },
-          'demoId': 'grid-loading#loading-grid-loading-off-tip'
+          'demoId': 'grid-loading#loading-grid-loading-tip'
+        },
+        {
+          'name': 'loading-component',
+          'type': 'VueComponent',
+          'defaultValue': '--',
+          'desc': { 'zh-CN': '自定义表格loading', 'en-US': 'Whether the table is being loaded.' },
+          'demoId': 'grid-loading#loading-grid-custom-loading'
         },
         {
           'name': 'max-height',
@@ -449,7 +456,7 @@ export default {
         {
           'name': 'row-id',
           'type': 'string',
-          'defaultValue': '_RID',
+          'defaultValue': `'_RID'`,
           'desc': {
             'zh-CN': '自定义行数据唯一主键的字段名（行数据必须要有唯一主键，默认自动生成）',
             'en-US':
@@ -478,7 +485,7 @@ export default {
         {
           'name': 'show-header',
           'type': 'boolean',
-          'defaultValue': 'false',
+          'defaultValue': 'true',
           'desc': { 'zh-CN': '是否显示表头', 'en-US': 'Whether to display the table header' },
           'demoId': 'grid-header#header-hide-grid-header'
         },
@@ -543,7 +550,7 @@ export default {
           'name': 'span-method',
           'type': '(args: ISpanMethodArgs) => { rowspan: number, colspan: number }',
           'typeAnchorName': 'ISpanMethodArgs',
-          'defaultValue': '{ rowspan: 1, colspan: 1}',
+          'defaultValue': '{ rowspan: 1, colspan: 1 }',
           'desc': {
             'zh-CN': '合并行或列，该函数返回计算后的值',
             'en-US': 'Consolidate rows or columns. This function returns the calculated value.'
@@ -848,10 +855,10 @@ export default {
             'zh-CN': '用于单选行，手动清空用户的选择',
             'en-US': 'This is used to select a single row. Manually clear the user selection.'
           },
-          'demoId': 'grid-operation-column#operation-column-default-serial-column'
+          'demoId': 'grid-operation-column#operation-column-clear-and-set-radio-row'
         },
         {
-          'name': 'clearRowExpand()',
+          'name': 'clearRowExpand',
           'type': '()=> void',
           'defaultValue': '--',
           'desc': {
@@ -1014,7 +1021,7 @@ export default {
             'zh-CN': '获取表格的可视列，也可以指定索引获取列',
             'en-US': 'Obtains the visual column of the table or specifies the index to obtain the column.'
           },
-          'demoId': 'grid-dynamically-columns#dynamically-columns-columns-dynamic'
+          'demoId': 'grid-custom#custom-server-storage'
         },
         {
           'name': 'getCurrentRow',
@@ -1212,7 +1219,7 @@ export default {
             'en-US':
               'Inserts one or more rows into a table. Second parameter: row specified position (tree tables are not supported), null inserted from the first row, and –1 inserted from the last row'
           },
-          'demoId': 'grid-toolbar#toolbar-insert-delete-update'
+          'demoId': 'grid-toolbar#toolbar-insert-remove-rows'
         },
         {
           'name': 'loadColumn',
@@ -1268,7 +1275,7 @@ export default {
             'en-US':
               'Data data is refreshed synchronously. If this method is used, the component does not record the status of adding, deleting, and modifying, and can only implement the corresponding logic. (This parameter may be used in some special scenarios, for example, when a node element in a deep tree changes.)'
           },
-          'demoId': 'grid-tree-grid#tree-table-tree-grid-insert-delete-update'
+          'demoId': 'grid-tree-table#tree-table-tree-grid-insert-delete-update'
         },
         {
           'name': 'reloadCustoms',
@@ -1416,14 +1423,14 @@ export default {
           'demoId': 'grid-tree-table#tree-table-set-tree-expansion'
         },
         {
-          'name': 'setCurrentRow(row)',
+          'name': 'setCurrentRow',
           'type': '(row: IRow)=> Promise',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '用于当前行，设置某一行为高亮状态',
             'en-US': 'Sets the highlight status of a row for the current row.'
           },
-          'demoId': 'grid-highlight#highlight-highlight-hover-row'
+          'demoId': 'grid-highlight#highlight-set-current-row'
         },
         {
           'name': 'setRadioRow',
@@ -1518,7 +1525,7 @@ export default {
             'zh-CN': '用于可树形表格，切换展开树形节点',
             'en-US': 'This parameter is used to switch and expand tree nodes in a tree table.'
           },
-          'demoId': 'grid-expand#expand-set-row-expansion'
+          'demoId': 'grid-expand#expand-set-tree-expansion'
         },
         {
           'name': 'validate',
@@ -1567,7 +1574,7 @@ export default {
             'en-US':
               'This event is valid only when toolbar.buttons are configured. This event is triggered when a toolbar button is clicked'
           },
-          'demoId': 'grid-toolbar#toolbar-insert-delete-update'
+          'demoId': 'grid-event#event-toolbar-button-click-event'
         },
         {
           'name': 'cell-click',
@@ -1578,7 +1585,7 @@ export default {
             'zh-CN': '单元格被点击时会触发该事件',
             'en-US': 'This event is triggered when a cell is clicked'
           },
-          'demoId': 'grid-event#event-cell-click-event'
+          'demoId': 'grid-event#event-click-event'
         },
         {
           'name': 'cancel-page-change',
@@ -1611,7 +1618,7 @@ export default {
             'zh-CN': '单元格被双击时会触发该事件',
             'en-US': 'This event is triggered when a cell is double-clicked'
           },
-          'demoId': 'grid-event#event-cell-click-event'
+          'demoId': 'grid-event#event-click-event'
         },
         {
           'name': 'cell-mouseenter',
@@ -1668,7 +1675,7 @@ export default {
             'zh-CN': '单元格被激活编辑时会触发该事件',
             'en-US': 'This event is triggered when a cell is activated for editing'
           },
-          'demoId': 'grid-event#event-edit-actived-event'
+          'demoId': 'grid-event#event-edit-event'
         },
         {
           'name': 'edit-closed',
@@ -1679,7 +1686,7 @@ export default {
             'zh-CN': '单元格编辑状态下被关闭时会触发该事件',
             'en-US': 'This event is triggered when a cell is closed in the editing state'
           },
-          'demoId': 'grid-event#event-edit-actived-event'
+          'demoId': 'grid-event#event-edit-event'
         },
         {
           'name': 'edit-disabled',
@@ -1690,7 +1697,7 @@ export default {
             'zh-CN': '当单元格激活时如果是禁用状态时会触发该事件',
             'en-US': 'This event is triggered when a cell is activated and is disabled'
           },
-          'demoId': 'grid-event#event-edit-actived-event'
+          'demoId': 'grid-event#event-edit-event'
         },
         {
           'name': 'filter-change',
@@ -1933,7 +1940,7 @@ export default {
         {
           'name': 'footer-align',
           'type': `'left' | 'center' | 'right'`,
-          'defaultValue': '继承 align > 继承 table 的 footer-align',
+          'defaultValue': `'left'`,
           'desc': {
             'zh-CN': '表尾列的对齐方式;该属性的可选值为 left（左对其）, center（居中对其）, right（右对齐）',
             'en-US':
@@ -1955,7 +1962,7 @@ export default {
         {
           'name': 'header-align',
           'type': "'left' | 'center' | 'right'",
-          'defaultValue': '继承 align > 继承 table 的 header-align',
+          'defaultValue': `'left'`,
           'desc': {
             'zh-CN': '表头列的对齐方式;该属性的可选值为 left（左对其）, center（居中对其）, right（右对齐）',
             'en-US':
@@ -2324,7 +2331,7 @@ export default {
             'zh-CN': '列宽拖动配置（需要设置 id）',
             'en-US': 'Column width dragging configuration (id needs to be set)'
           },
-          'demoId': 'grid-customized#custom-column-width'
+          'demoId': 'grid-custom#custom-column-width'
         },
         {
           'name': 'setting',
@@ -2408,7 +2415,7 @@ export default {
             'zh-CN': '当工具栏的按钮被点击时会后触发该事件',
             'en-US': 'This event is triggered when a button on the toolbar is clicked'
           },
-          'demoId': 'grid-event#event-toolbar-button-click-event'
+          'demoId': 'grid-validation#validation-before-submit-validation'
         },
         {
           'name': 'save-setting',
@@ -2443,16 +2450,6 @@ export default {
             'en-US': 'Click the Reset button on the personalized panel to trigger the event.'
           },
           'demoId': 'grid-custom#custom-ordercolumn-local'
-        },
-        {
-          'name': 'on-before-move',
-          'type': `(type: 'column' | 'row', row: IRow)=> boolean`,
-          'defaultValue': '--',
-          'desc': {
-            'zh-CN': '个性化面板拖拽前事件',
-            'en-US': 'event before the personalized panel is dragged'
-          },
-          'demoId': 'grid-custom#custom-prsonalized-drag'
         }
       ]
     }

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

@@ -1,10 +1,10 @@
 <template>
   <div class="demo-guide-callback">
-    <p>当前事件回调：{{ label }}</p>
+    <p>当前事件回调：{{ label }}{{ label ? '。' : '' }}</p>
     <tiny-button plain class="e1" @click="stepStart">展示前的回调</tiny-button>
     <tiny-button plain class="e2">展示的回调</tiny-button>
     <tiny-button plain class="e3">隐藏前的回调</tiny-button>
-    <br>
+    <br />
     <tiny-button plain class="e4">隐藏的回调</tiny-button>
     <tiny-button plain class="e5">关闭的回调</tiny-button>
     <tiny-button plain class="e6">完成/销毁的回调</tiny-button>

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

@@ -1,10 +1,10 @@
 <template>
   <div class="demo-guide-callback">
-    <p>当前事件回调：{{ label }}</p>
+    <p>当前事件回调：{{ label }}{{ label ? '。' : '' }}</p>
     <tiny-button plain class="e1" @click="stepStart">展示前的回调</tiny-button>
     <tiny-button plain class="e2">展示的回调</tiny-button>
     <tiny-button plain class="e3">隐藏前的回调</tiny-button>
-    <br>
+    <br />
     <tiny-button plain class="e4">隐藏的回调</tiny-button>
     <tiny-button plain class="e5">关闭的回调</tiny-button>
     <tiny-button plain class="e6">完成/销毁的回调</tiny-button>

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/hrapprover/webdoc/hrapprover.js

@@ -45,7 +45,7 @@ export default {
     {
       'name': 'hrapprover',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'value',
           'type': 'string ',

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/image/webdoc/image.js

@@ -155,7 +155,7 @@ export default {
             'en-US':
               'After lazy loading is enabled, the container listens for the scroll event. The default value of this property is the parent element of the last overflow value being auto or scroll'
           },
-          'demoId': 'lazy'
+          'demoId': ''
         },
         {
           'name': 'preview-src-list',
@@ -172,7 +172,7 @@ export default {
             'zh-CN': '设置图片预览外层元素的 z-index',
             'en-US': 'Set the z-index of the image preview wrapper'
           },
-          'demoId': 'preview'
+          'demoId': ''
         }
       ],
       'events': [