@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/tree-menu/show-checkbox.spec.ts

@@ -4,65 +4,103 @@ test('节点可勾选', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tree-menu#show-checkbox')
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
-  const node = treeMenu.getByRole('treeitem', { name: '首页' })
+  const wrap = page.locator('#show-checkbox')
+  const treeMenu = wrap.locator('.tiny-tree-menu').nth(0)
+  const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
+  const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
+  const node = treeNodeContent.filter({ hasText: /^首页$/ })
   const selectedClass = /is-checked/
-  await expect(node.locator('.tiny-tree-node__content .tiny-checkbox')).toBeVisible()
-  await page.getByRole('treeitem', { name: '首页' }).locator('.tiny-checkbox').click()
-  await expect(node).toHaveClass(/is-current/)
-  await expect(node.locator('.tiny-tree-node__content .tiny-checkbox')).toHaveClass(selectedClass)
+
+  // 可勾选节点显示复选框且默认选中
+  await expect(node.locator('.tiny-checkbox')).toBeVisible()
+  await expect(treeNode.filter({ hasText: /^首页$/ })).toHaveClass(selectedClass)
+  await expect(node.locator('.tiny-checkbox')).toHaveClass(selectedClass)
+  await node.click()
+  await expect(treeNode.filter({ hasText: /^首页$/ })).toHaveClass(/is-current/)
 
   // 父级选中, 子孙节点同时都选中
-  await page.getByRole('treeitem', { name: '指南', exact: true }).locator('.tiny-checkbox').click()
-  await treeMenu.getByRole('treeitem', { name: '指南' }).click()
-  await expect(treeMenu.getByRole('treeitem', { name: '引入组件' }).first().locator('.tiny-checkbox')).toHaveClass(
-    selectedClass
-  )
-  await expect(treeMenu.getByRole('treeitem', { name: '后端适配器' }).first().locator('.tiny-checkbox')).toHaveClass(
-    selectedClass
-  )
-  await treeMenu.getByRole('treeitem', { name: '引入组件' }).first().click()
-  await expect(
-    treeMenu.getByRole('treeitem', { name: '按需引入' }).first().locator('.tiny-checkbox').first()
-  ).toHaveClass(selectedClass)
+  await treeNodeContent
+    .filter({ hasText: /^指南$/ })
+    .locator('.tiny-checkbox')
+    .click()
+  await treeNodeContent.filter({ hasText: /^指南$/ }).click()
+  await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tiny-checkbox')).toHaveClass(selectedClass)
+  await expect(treeNodeContent.filter({ hasText: /^引入组件$/ }).locator('.tiny-checkbox')).toHaveClass(selectedClass)
+  await expect(treeNodeContent.filter({ hasText: /^后端适配器$/ }).locator('.tiny-checkbox')).toHaveClass(selectedClass)
+
+  await treeNodeContent.filter({ hasText: /^引入组件$/ }).click()
+  await expect(treeNodeContent.filter({ hasText: /^按需引入$/ }).locator('.tiny-checkbox')).toHaveClass(selectedClass)
+  await expect(treeNodeContent.filter({ hasText: /^完整引入$/ }).locator('.tiny-checkbox')).toHaveClass(selectedClass)
 
   // 子节点取消勾选, 祖先节点改变勾选状态
-  await treeMenu.getByRole('treeitem', { name: '按需引入' }).first().locator('.tiny-checkbox').first().click()
+  await treeNodeContent
+    .filter({ hasText: /^完整引入$/ })
+    .locator('.tiny-checkbox')
+    .click()
+  await expect(
+    treeNodeContent
+      .filter({ hasText: /^引入组件$/ })
+      .locator('.tiny-checkbox__input')
+      .first()
+  ).toHaveClass(/is-indeterminate/)
   await expect(
-    treeMenu.getByRole('treeitem', { name: '引入组件' }).first().locator('.tiny-checkbox__input').first()
+    treeNodeContent
+      .filter({ hasText: /^指南$/ })
+      .locator('.tiny-checkbox__input')
+      .first()
   ).toHaveClass(/is-indeterminate/)
-  await expect(treeMenu.getByRole('treeitem', { name: '指南' }).locator('.tiny-checkbox__input').first()).toHaveClass(
+  await treeNodeContent
+    .filter({ hasText: /^按需引入$/ })
+    .locator('.tiny-checkbox')
+    .click()
+  await expect(treeNodeContent.filter({ hasText: /^引入组件$/ }).locator('.tiny-checkbox__input')).not.toHaveClass(
     /is-indeterminate/
   )
-  await treeMenu.getByRole('treeitem', { name: '完整引入' }).first().locator('.tiny-checkbox').first().click()
-  await expect(
-    treeMenu.getByRole('treeitem', { name: '引入组件' }).first().locator('.tiny-checkbox__input').first()
-  ).not.toHaveClass(/is-indeterminate/)
+  await expect(treeNode.filter({ hasText: /^引入组件/ })).not.toHaveClass(selectedClass)
+  await expect(treeNode.filter({ hasText: /^按需引入$/ })).toHaveClass(/is-current/)
 })
 
-
 test('父子级不相关联', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#check-strictly')
+  await page.goto('tree-menu#show-checkbox')
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
-  const checkedClass = /is-checked/
+  const wrap = page.locator('#show-checkbox')
+  const treeMenu = wrap.locator('.tiny-tree-menu').nth(1)
+  const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
+  const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
 
   // 父节点勾选不会改变子节点
-  await treeMenu.getByRole('treeitem', { name: '指南' }).locator('svg').first().click()
-  await expect(treeMenu.getByRole('treeitem', { name: '引入组件' }).locator('svg').first()).not.toHaveClass(
-    checkedClass
+  await treeNodeContent
+    .filter({ hasText: /^指南$/ })
+    .locator('.tiny-checkbox')
+    .click()
+  await expect(treeNode.filter({ hasText: /^指南/ })).toHaveClass(/is-current is-checked/)
+  await treeNodeContent.filter({ hasText: /^指南$/ }).click()
+  await expect(treeNodeContent.filter({ hasText: /^引入组件$/ }).locator('.tiny-checkbox')).not.toHaveClass(
+    /is-checked/
   )
-  await expect(page.getByRole('treeitem', { name: '构建部署' }).first().locator('span').nth(1)).not.toHaveClass(
-    checkedClass
+  await expect(treeNodeContent.filter({ hasText: /^构建部署$/ }).locator('.tiny-checkbox')).not.toHaveClass(
+    /is-checked/
   )
 
   // 子节点勾选不改变父节点
-  await page.getByRole('treeitem', { name: '引入组件' }).first().click()
-  await page.getByRole('treeitem', { name: '按需引入' }).locator('span').nth(2).click()
-  await page.getByRole('treeitem', { name: '完整引入' }).locator('span').nth(2).click()
-  await expect(page.getByRole('treeitem', { name: '引入组件' }).locator('span').nth(1)).not.toHaveClass(checkedClass)
-})
-
-test('可勾选节点默认选中', async ({ page }) => {
+  await treeNodeContent.filter({ hasText: /^引入组件$/ }).click()
+  await expect(treeNode.filter({ hasText: /^引入组件/ })).toHaveClass(/is-current is-focusable is-expanded/)
+  await expect(treeNode.filter({ hasText: /^引入组件/ })).not.toHaveClass(/is-checked/)
+  await expect(treeNodeContent.filter({ hasText: /^引入组件$/ }).locator('.tiny-checkbox')).not.toHaveClass(
+    /is-checked/
+  )
+  await treeNodeContent
+    .filter({ hasText: /^按需引入$/ })
+    .locator('.tiny-checkbox')
+    .click()
+  await treeNodeContent
+    .filter({ hasText: /^完整引入$/ })
+    .locator('.tiny-checkbox')
+    .click()
+  await expect(treeNodeContent.filter({ hasText: /^按需引入$/ }).locator('.tiny-checkbox')).toHaveClass(/is-checked/)
+  await expect(treeNodeContent.filter({ hasText: /^完整引入$/ }).locator('.tiny-checkbox')).toHaveClass(/is-checked/)
+  await expect(treeNodeContent.filter({ hasText: /^引入组件$/ }).locator('.tiny-checkbox')).not.toHaveClass(
+    /is-checked/
+  )
 })

package/demos/pc/app/tree-menu/text-ellipsis.spec.ts

@@ -4,15 +4,18 @@ test('文字超长省略显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tree-menu#text-ellipsis')
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  const wrap = page.locator('#text-ellipsis')
+  const treeMenu = wrap.locator('.tiny-tree-menu').nth(0)
+
   await expect(treeMenu.locator('.tiny-tree')).toHaveClass(/tiny-tree-menu__overflow/)
 })
 
 test('文字超长换行显示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('tree-menu#text-wrap')
+  await page.goto('tree-menu#text-ellipsis')
+
+  const wrap = page.locator('#text-ellipsis')
+  const treeMenu = wrap.locator('.tiny-tree-menu').nth(1)
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
   await expect(treeMenu.locator('.tiny-tree')).toHaveClass(/tiny-tree-menu__wrap/)
 })
-

package/demos/pc/app/tree-menu/tree-menu-slot.spec.ts

@@ -4,9 +4,10 @@ test('插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('tree-menu#tree-menu-slot')
 
-  const treeMenu = page.locator('#preview .tiny-tree-menu')
+  const treeMenu = page.locator('#tree-menu-slot .tiny-tree-menu')
+
   await expect(treeMenu.getByText('首页')).toHaveClass('treeClass')
   await expect(treeMenu.getByText('指南')).toHaveClass('treeNodeClass')
-  await expect(treeMenu.getByTitle('首页').locator('.tiny-svg')).toHaveCSS('margin-right', '4px')
-  await expect(treeMenu.getByTitle('教程').locator('.tiny-svg')).toHaveCSS('margin-left', '-20px')
+  await expect(treeMenu.getByTitle('首页').locator('.tiny-svg')).toHaveCSS('margin-left', '8px')
+  await expect(treeMenu.getByTitle('教程').locator('.tiny-svg')).toHaveCSS('margin-left', '8px')
 })

package/demos/pc/app/tree-menu/webdoc/tree-menu.cn.md

@@ -4,4 +4,4 @@ title: TreeMenu 树型菜单
 
 # TreeMenu 树型菜单
 
-> 以树形方式显示的菜单，适用于版型定制的一种组件。
+以树形方式显示的菜单，适用于版型定制的一种组件。

package/demos/pc/app/tree-menu/webdoc/tree-menu.en.md

@@ -4,4 +4,4 @@ title: TreeMenu
 
 # TreeMenu
 
-> The menu is displayed in tree mode and is applicable to a component of version customization.
+The menu is displayed in tree mode and is applicable to a component of version customization.

package/demos/pc/app/tree-menu/webdoc/tree-menu.js

@@ -6,8 +6,8 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '<p>不配置数据源时，默认从框架服务读取数据。</p>\n',
-        'en-US': '<p>If no data is configured, data is read from the framework service by default. </p>\n'
+        'zh-CN': '<p>通过引用组件标签即可，默认从框架服务读取数据 。</p>\n',
+        'en-US': '<p>By referencing component labels, data is read from the framework service by default. </p>\n'
       },
       'codeFiles': ['basic-usage.vue']
     },
@@ -294,7 +294,7 @@ export default {
     {
       'name': 'tree-menu',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'accordion',
           'type': 'boolean',

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

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

package/demos/pc/app/user-account/webdoc/user-account.js

@@ -25,7 +25,7 @@ export default {
     {
       'name': 'user-account',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'getUserInfo',
           'type': 'Function',

package/demos/pc/app/user-contact/data-source.spec.ts

@@ -5,9 +5,6 @@ test('设置数据源', async ({ page }) => {
   await page.goto('user-contact#data-source')
   const partBox = page.locator('.dropdown-part')
   await partBox.hover()
-  const imageUrl = page.locator('.tiny-user-head div').first()
-  await expect(imageUrl).toHaveCSS(
-    'background-image',
-    'url("user-contact#static/images/fruit.jpg")'
-  )
+  const imageUrl = page.locator('.tiny-user-contact').first()
+  await expect(imageUrl).toHaveText('小红')
 })

package/demos/pc/app/user-contact/webdoc/user-contact.js

@@ -5,7 +5,12 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN':
+          '通过<code>:data</code>设置数据源。<code>imgUrl:图片路径</code><code>userName:姓名</code><code>userDescription:用户描述</code>。',
+        'en-US':
+          'Set the data source through<code>: data</code>.<code>imgUrl:"Image URL"</code><code>userName:"Name"</code><code>userDescription: User Description</code>.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
@@ -13,9 +18,9 @@ export default {
       'name': { 'zh-CN': '设置数据源', 'en-US': 'Set Data Source' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>data</code> 设置数据源, <code>imgUrl</code> 表示的是图片路径, <code>userName</code> 表示的是姓名, <code>userDescription</code> 表示的是用户描述。</p>\n',
+          '<p>通过 <code>:data</code> 设置数据源, <code>imgUrl</code> 表示的是图片路径, <code>userName</code> 表示的是姓名, <code>userDescription</code> 表示的是用户描述。</p>\n',
         'en-US':
-          '<p>You can use <code>data</code> to set the data source. <code>imgUrl</code> indicates the image path, and <code>userName</code> indicates the name. <code>userDescription</code> indicates the user description. </p>\n'
+          '<p>Set the data source through<code>: data</code>. <code>imgUrl</code> indicates the image path, and <code>userName</code> indicates the name. <code>userDescription</code> indicates the user description. </p>\n'
       },
       'codeFiles': ['data-source.vue']
     },
@@ -27,16 +32,19 @@ export default {
       },
       'desc': {
         'zh-CN':
-          '<p>定制弹框不显示的内容\n<code>show-img</code> 是否显示头像,值为 true 时显示， false 隐藏,默认 true。\n<code>show-name</code> 是否显示名字,值为  true 时显示， false 隐藏,默认 true。\n<code>show-number</code> 是否显示用户账号,值为  true 时显示， false 隐藏,默认 true。</p>\n',
+          '<p>通过设置<code>show-img</code> 是否显示头像，<code>show-name</code> 是否显示名字,<code>show-number</code> 是否显示用户账号,默认值为<code>true</code>。</p>',
         'en-US':
-          '<p>Customize the content that is not displayed in the dialog box.\n<code>show-img</code>Indicates whether to display the avatar. The value true indicates that the avatar is displayed. The value false indicates that the avatar is hidden. The default value is true. \n<code>show-name</code> Indicates whether to display the name. The value true indicates that the name is displayed, and the value false indicates that the name is hidden. The default value is true. \n<code>show-number</code>Indicates whether to display the user account number. If the value is true, the user account number. is displayed. If the value is false, the user account number. is hidden. The default value is true. </p>\n'
+          '<p>By setting<code>show img</code>to display avatars,<code>show name</code>to display names, and<code>show number</code>to display user accounts, the default value is<code>true</code>.</p> '
       },
       'codeFiles': ['not-displayed-content.vue']
     },
     {
       'demoId': 'slots-usercontact',
       'name': { 'zh-CN': '自定义默认插槽', 'en-US': 'Customize the default slot' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过在组件内插入<code>div</code>元素即可。',
+        'en-US': 'You can insert the<code>div</code>element within the component.'
+      },
       'codeFiles': ['slots-usercontact.vue']
     }
   ],
@@ -44,12 +52,12 @@ export default {
     {
       'name': 'user-contact',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'data',
           'type': 'object',
           'defaultValue': '',
-          'desc': { 'zh-CN': '设置的数据;数据设置', 'en-US': 'Setted data; Data Settings' },
+          'desc': { 'zh-CN': '设置的数据', 'en-US': 'Setted data; Data Settings' },
           'demoId': 'data-source'
         },
         {
@@ -58,7 +66,7 @@ export default {
           'defaultValue': '该属性的默认值为 true',
           'desc': {
             'zh-CN': '是否显示头像，默认 true',
-            'en-US': 'Indicates whether to display the avatar. The default value is true.'
+            'en-US': 'Indicates whether to display the avatar. The default value is true'
           },
           'demoId': 'not-displayed-content'
         },
@@ -68,7 +76,7 @@ export default {
           'defaultValue': '该属性的默认值为 true',
           'desc': {
             'zh-CN': '是否显示姓名 userName,默认 true',
-            'en-US': 'Indicates whether to display userName. The default value is true.'
+            'en-US': 'Indicates whether to display userName. The default value is true'
           },
           'demoId': 'not-displayed-content'
         },
@@ -78,7 +86,7 @@ export default {
           'defaultValue': '该属性的默认值为 true',
           'desc': {
             'zh-CN': '是否显示工号 roleNumber,默认 true',
-            'en-US': 'Indicates whether to display the employee ID roleNumber. The default value is true.'
+            'en-US': 'Indicates whether to display the employee ID roleNumber. The default value is true'
           },
           'demoId': 'not-displayed-content'
         },
@@ -88,7 +96,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
-            'en-US': 'Add a class name for the popper. For details, see the popover component.'
+            'en-US': 'Add a class name for the popper. For details, see the popover component'
           },
           'demoId': ''
         },
@@ -100,7 +108,7 @@ export default {
             'zh-CN':
               '是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false (可参考 select 组件)',
             'en-US':
-              'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component).'
+              'Indicates whether to insert a pop-up box to the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false (for details, see the select component)'
           },
           'demoId': ''
         },

package/demos/pc/app/user-head/icon-user-head.spec.ts

@@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'
 
-test('图片头像', async ({ page }) => {
+test('图标头像', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('user-head#image-user-head')
-  const minBox = page.locator('.tiny-user-head__portrait')
+  await page.goto('user-head#icon-user-head')
+  const minBox = page.locator('.tiny-user-head > .tiny-user-head__portrait')
   await expect(minBox).toHaveCSS('background-image', 'none')
 })

package/demos/pc/app/user-head/image-user-head.spec.ts

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('图片头像', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('user-head#image-user-head')
-  const headImg = page.locator('.tiny-user-head')
-  await expect(headImg).toHaveAttribute('value', 'localhost:3000/webnova/static/img/compontent.b2f0f5b.png')
+  const minBox = page.locator('.tiny-user-head > .tiny-user-head__portrait')
+  await expect(minBox).toHaveCSS('color', 'rgb(255, 255, 255)')
 })

package/demos/pc/app/user-head/webdoc/user-head.js

@@ -5,14 +5,17 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过 <code>type="icon"</code> 设置头像。',
+        'en-US': 'Set a profile picture through<code>type="icon"</code>.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'min-user-head',
       'name': { 'zh-CN': '小头像', 'en-US': 'Avatar' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>min</code> 设置小头像。</p>\n',
+        'zh-CN': '<p>通过 <code>min</code> 设置小头像。</p>\n',
         'en-US': '<p>You can use <code>min</code> to set a small avatar. </p>\n'
       },
       'codeFiles': ['min-user-head.vue']
@@ -21,7 +24,7 @@ export default {
       'demoId': 'round-user-head',
       'name': { 'zh-CN': '圆形头像', 'en-US': 'Round Head' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>round</code> 设置圆形头像。</p>\n',
+        'zh-CN': '<p>通过 <code>round</code> 设置圆形头像。</p>\n',
         'en-US': '<p>You can use <code>round</code> to set a round avatar. </p>\n'
       },
       'codeFiles': ['round-user-head.vue']
@@ -30,7 +33,7 @@ export default {
       'demoId': 'label-user-head',
       'name': { 'zh-CN': '文字头像', 'en-US': 'Avatar' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>type=&quot;label&quot;</code> 设置文字头像。</p>\n',
+        'zh-CN': '<p>通过 <code>type=&quot;label&quot;</code> 设置文字头像。</p>\n',
         'en-US': '<p>You can use <code>type=&quot;label&quot;</code> to set the text avatar. </p>\n'
       },
       'codeFiles': ['label-user-head.vue']
@@ -39,7 +42,7 @@ export default {
       'demoId': 'icon-user-head',
       'name': { 'zh-CN': '图标头像', 'en-US': 'Icon avatar' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>type=&quot;icon&quot;</code> 设置图标头像。</p>\n',
+        'zh-CN': '<p>通过 <code>type=&quot;icon&quot;</code> 设置图标头像。</p>\n',
         'en-US': '<p>You can use <code>type=&quot;icon&quot;</code> to set the icon avatar. </p>\n'
       },
       'codeFiles': ['icon-user-head.vue']
@@ -48,7 +51,7 @@ export default {
       'demoId': 'image-user-head',
       'name': { 'zh-CN': '图片头像', 'en-US': 'Avatar' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>type=&quot;image&quot;</code> 设置图片头像。</p>\n',
+        'zh-CN': '<p>通过 <code>type=&quot;image&quot;</code> 设置图片头像。</p>\n',
         'en-US': '<p>You can use <code>type=&quot;image&quot;</code> to set the picture avatar. </p>\n'
       },
       'codeFiles': ['image-user-head.vue']
@@ -56,19 +59,28 @@ export default {
     {
       'demoId': 'message-count-total',
       'name': { 'zh-CN': '头像消息计数', 'en-US': 'Avatar Message Count' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过<code>:message-total="100"</code>设置消息数据。',
+        'en-US': `Set message data through<code>message-total='100'</code>. `
+      },
       'codeFiles': ['message-count-total.vue']
     },
     {
       'demoId': 'message-count-type',
-      'name': { 'zh-CN': '使用小红点代替具体数值', 'en-US': 'Use a red dot instead of a specific value.' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'name': { 'zh-CN': '使用小红点代替具体数值', 'en-US': 'Use a red dot instead of a specific value' },
+      'desc': {
+        'zh-CN': '通过<code>:message-type="basic"</code>设置消息显示替代成小红点。',
+        'en-US': `Set the message display to be replaced with a small red dot through<code>message-type='basic'</code>.`
+      },
       'codeFiles': ['message-count-type.vue']
     },
     {
       'demoId': 'message-count-limit',
       'name': { 'zh-CN': '消息计数上限', 'en-US': 'Maximum number of messages' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过<code>:message-upper-limit="99"</code>设置消息数据上限。',
+        'en-US': `Set the message data upper limit through<code>message-upper-limit='99'</code>.`
+      },
       'codeFiles': ['message-count-limit.vue']
     },
     {
@@ -76,7 +88,7 @@ export default {
       'name': { 'zh-CN': '自定义颜色', 'en-US': 'Custom Color' },
       'desc': {
         'zh-CN':
-          '<p>可通过 <code>color</code> 自定义颜色，图标或文字类型（type属性值为 icon 或 label ）的情况下，设置字体颜色和背景色。</p>\n',
+          '<p>通过 <code>color</code> 自定义颜色，图标或文字类型（type属性值为 icon 或 label ）的情况下，设置字体颜色和背景色。</p>\n',
         'en-US':
           '<p>You can use <code>color</code> to customize the color. If the icon or text type is set to icon or label, set the font color and background color. </p>\n'
       },
@@ -86,7 +98,7 @@ export default {
       'demoId': 'custom-background-color',
       'name': { 'zh-CN': '自定义背景颜色', 'en-US': 'Custom background color' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>background-color</code> 自定义背景颜色。</p>\n',
+        'zh-CN': '<p>通过 <code>background-color</code> 自定义背景颜色。</p>\n',
         'en-US': '<p>You can use <code>background-color</code> to customize the background color. </p>\n'
       },
       'codeFiles': ['custom-background-color.vue']
@@ -103,7 +115,11 @@ export default {
     {
       'demoId': 'render-user-head-in-grid',
       'name': { 'zh-CN': 'Grid 单元格展示头像', 'en-US': 'Avatar Displayed in Grid Cells' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN': '通过Grid单元格属性<code>renderer</code>传入封装用户头像组件（HTML格式）。',
+        'en-US':
+          'Pass in the encapsulated user avatar component (in HTML format) through the Grid cell attribute<code>renderer</code>.'
+      },
       'codeFiles': ['render-user-head-in-grid.vue']
     }
   ],
@@ -111,35 +127,35 @@ export default {
     {
       'name': 'user-head',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'background-color',
           'type': 'string',
-          'defaultValue': '#d9d9d9',
-          'desc': { 'zh-CN': '背景色 。', 'en-US': 'Background color.' },
+          'defaultValue': `'#d9d9d9'`,
+          'desc': { 'zh-CN': '背景色', 'en-US': 'Background color' },
           'demoId': 'custom-background-color'
         },
         {
           'name': 'color',
           'type': 'string',
-          'defaultValue': '#ffffff',
-          'desc': { 'zh-CN': '文字颜色 。', 'en-US': 'Text color.' },
+          'defaultValue': `'#ffffff'`,
+          'desc': { 'zh-CN': '文字颜色', 'en-US': 'Text color' },
           'demoId': 'color'
         },
         {
           'name': 'message-total',
           'type': 'number',
           'defaultValue': '',
-          'desc': { 'zh-CN': '消息计数 。', 'en-US': 'Number of messages.' },
+          'desc': { 'zh-CN': '消息计数', 'en-US': 'Number of messages' },
           'demoId': 'message-count-total'
         },
         {
           'name': 'message-type',
           'type': 'string',
-          'defaultValue': 'details',
+          'defaultValue': `'details'`,
           'desc': {
-            'zh-CN': '消息类型 details|basic 可选 。;该属性的可选值为 details / basic',
-            'en-US': 'Message type details|basic is optional. ;The value of this attribute can be details or basic'
+            'zh-CN': '消息类型 details|basic 可选。该属性的可选值为 details / basic',
+            'en-US': 'Message type details|basic is optional. The value of this attribute can be details or basic.'
           },
           'demoId': 'message-count-type'
         },
@@ -147,29 +163,29 @@ export default {
           'name': 'message-upper-limit',
           'type': 'number',
           'defaultValue': '0',
-          'desc': { 'zh-CN': '消息显示上限 。', 'en-US': 'Maximum number of displayed messages.' },
+          'desc': { 'zh-CN': '消息显示上限', 'en-US': 'Maximum number of displayed messages' },
           'demoId': 'message-count-limit'
         },
         {
           'name': 'min',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '小尺寸模式 。', 'en-US': 'Small size mode.' },
+          'desc': { 'zh-CN': '小尺寸模式', 'en-US': 'Small size mode' },
           'demoId': 'min-user-head'
         },
         {
           'name': 'round',
           'type': 'boolean',
           'defaultValue': '',
-          'desc': { 'zh-CN': '圆形模式 。', 'en-US': 'Circular mode.' },
+          'desc': { 'zh-CN': '圆形模式', 'en-US': 'Circular mode' },
           'demoId': 'round-user-head'
         },
         {
           'name': 'type',
           'type': 'string',
-          'defaultValue': 'label',
+          'defaultValue': `'label'`,
           'desc': {
-            'zh-CN': '头像类型，icon|image|label 可选。;该属性的可选值为 icon / image / label',
+            'zh-CN': '头像类型，icon|image|label 可选。该属性的可选值为 icon / image / label',
             'en-US':
               'Avatar type. The options are icon, image, and label. ;The value of this attribute can be icon / image / label'
           },
@@ -182,7 +198,7 @@ export default {
           'desc': {
             'zh-CN': 'type=icon 时为图标类名，type=label时为字体串，type=image时为资源路径',
             'en-US':
-              'If type is set to icon, it indicates the icon class name. If type is set to label, it indicates the font string. If type is set to image, it indicates the resource path.'
+              'If type is set to icon, it indicates the icon class name. If type is set to label, it indicates the font string. If type is set to image, it indicates the resource path'
           },
           'demoId': 'icon-user-head'
         }

package/demos/pc/app/user-link/webdoc/user-link.js

@@ -92,7 +92,7 @@ export default {
     {
       'name': 'user-link',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'value',
           'type': 'string',

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

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('watermark#basic')
+
+  const watermark = page.locator('#basic .tiny-watermark-wrapper')
+  await expect(watermark.locator('div').nth(1)).toHaveCSS('z-index', '9')
+})

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

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('图片水印', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('watermark#image')
+
+  const watermark = page.locator('#image .tiny-watermark-wrapper')
+  await expect(watermark.locator('div').nth(1)).toHaveCSS('z-index', '9')
+})