@opentiny/vue-docs 2.2.7 → 2.2.9

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

@@ -471,7 +471,7 @@ export default {
         },
         {
           'name': 'icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': {
             'zh-CN': '自定义节点图标',
@@ -481,7 +481,7 @@ export default {
         },
         {
           'name': 'expand-icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': { 'zh-CN': '指示展开的图标', 'en-US': 'Indicates the expanded icon' },
           'demoId': 'icons'
@@ -490,12 +490,15 @@ export default {
           'name': 'expand-icon-color',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '指示展开的图标色', 'en-US': 'Indicates the expanded icon color' },
+          'desc': {
+            'zh-CN': '指示展开的图标色',
+            'en-US': 'Indicates the expanded icon color'
+          },
           'demoId': 'icons'
         },
         {
           'name': 'shrink-icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '',
           'desc': { 'zh-CN': '指示收缩的图标', 'en-US': 'Icon indicating shrink' },
           'demoId': 'icons'
@@ -504,14 +507,20 @@ export default {
           'name': 'shrink-icon-color',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '指示收缩的图标色', 'en-US': 'Icon indicating shrink  color' },
+          'desc': {
+            'zh-CN': '指示收缩的图标色',
+            'en-US': 'Icon indicating shrink  color'
+          },
           'demoId': 'icons'
         },
         {
           'name': 'empty-text',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '内容为空的时候展示的文本', 'en-US': 'Text displayed when the content is empty' },
+          'desc': {
+            'zh-CN': '内容为空的时候展示的文本',
+            'en-US': 'Text displayed when the content is empty'
+          },
           'demoId': 'slot'
         },
         {
@@ -538,14 +547,20 @@ export default {
           'name': 'highlight-current',
           'type': 'boolean',
           'defaultValue': 'true',
-          'desc': { 'zh-CN': '是否高亮当前选中节点', 'en-US': 'Whether to highlight the selected node' },
+          'desc': {
+            'zh-CN': '是否高亮当前选中节点',
+            'en-US': 'Whether to highlight the selected node'
+          },
           'demoId': 'node-hl'
         },
         {
           'name': 'current-node-key',
           'type': 'string',
           'defaultValue': '',
-          'desc': { 'zh-CN': '当前选中节点', 'en-US': 'Currently selected node' },
+          'desc': {
+            'zh-CN': '当前选中节点',
+            'en-US': 'Currently selected node'
+          },
           'demoId': 'node-hl'
         },
         {
@@ -559,7 +574,10 @@ export default {
           'name': 'default-expanded-keys',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '默认展开节点的keys', 'en-US': 'The keys of the node are expanded by default' },
+          'desc': {
+            'zh-CN': '默认展开节点的keys',
+            'en-US': 'The keys of the node are expanded by default'
+          },
           'demoId': 'expand-control'
         },
         {
@@ -576,21 +594,30 @@ export default {
           'name': 'default-expand-all',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '是否默认展开所有节点', 'en-US': 'Whether to expand all nodes by default' },
+          'desc': {
+            'zh-CN': '是否默认展开所有节点',
+            'en-US': 'Whether to expand all nodes by default'
+          },
           'demoId': 'expand-control'
         },
         {
           'name': 'show-checkbox',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '是否为多选模式', 'en-US': 'Whether to select multiple mode' },
+          'desc': {
+            'zh-CN': '是否为多选模式',
+            'en-US': 'Whether to select multiple mode'
+          },
           'demoId': 'checkbox'
         },
         {
           'name': 'check-strictly',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '是否为父子严格模式', 'en-US': 'Whether it is in strict parent-child mode' },
+          'desc': {
+            'zh-CN': '是否为父子严格模式',
+            'en-US': 'Whether it is in strict parent-child mode'
+          },
           'demoId': 'checkbox'
         },
         {
@@ -607,14 +634,20 @@ export default {
           'name': 'default-checked-keys',
           'type': 'string[]',
           'defaultValue': '',
-          'desc': { 'zh-CN': '默认勾选的节点的keys', 'en-US': 'keys of the node selected by default' },
+          'desc': {
+            'zh-CN': '默认勾选的节点的keys',
+            'en-US': 'keys of the node selected by default'
+          },
           'demoId': 'checkbox'
         },
         {
           'name': 'show-radio',
           'type': 'boolean',
           'defaultValue': 'false',
-          'desc': { 'zh-CN': '是否为单选模式', 'en-US': 'Whether to select an radio mode' },
+          'desc': {
+            'zh-CN': '是否为单选模式',
+            'en-US': 'Whether to select an radio mode'
+          },
           'demoId': 'radio'
         },
         {
@@ -694,7 +727,10 @@ export default {
           'name': 'allow-drag',
           'type': '(node)=>boolean',
           'defaultValue': '',
-          'desc': { 'zh-CN': '判断节点能否被拖拽', 'en-US': 'Whether a node can be dragged.' },
+          'desc': {
+            'zh-CN': '判断节点能否被拖拽',
+            'en-US': 'Whether a node can be dragged.'
+          },
           'demoId': 'drag'
         },
         {
@@ -1104,7 +1140,10 @@ export default {
           'name': 'insertBefore',
           'type': '(newData:object, targetNodeOrTargetKey: object | string) => void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '在一个节点的前面增加一个节点', 'en-US': 'Add a node before a tree node.' },
+          'desc': {
+            'zh-CN': '在一个节点的前面增加一个节点',
+            'en-US': 'Add a node before a tree node.'
+          },
           'demoId': 'node-op'
         },
         {
@@ -1242,7 +1281,10 @@ export default {
           'name': 'openEdit',
           'type': '() => void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '组件进入编辑状态', 'en-US': 'The component enters the edit state' },
+          'desc': {
+            'zh-CN': '组件进入编辑状态',
+            'en-US': 'The component enters the edit state'
+          },
           'demoId': 'edit'
         },
 
@@ -1250,7 +1292,10 @@ export default {
           'name': 'closeEdit',
           'type': '() => void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '组件退出编辑状态', 'en-US': 'The component exits the editing state' },
+          'desc': {
+            'zh-CN': '组件退出编辑状态',
+            'en-US': 'The component exits the editing state'
+          },
           'demoId': 'edit'
         },
         {
@@ -1294,7 +1339,10 @@ export default {
           'name': 'closeMenu',
           'type': '() => void',
           'defaultValue': '',
-          'desc': { 'zh-CN': '关闭节点的自定义菜单', 'en-US': 'Close the custom menu of the node' },
+          'desc': {
+            'zh-CN': '关闭节点的自定义菜单',
+            'en-US': 'Close the custom menu of the node'
+          },
           'demoId': 'contextmenu'
         }
       ]

package/demos/pc/app/tree-menu/custom-icon.spec.ts

@@ -16,4 +16,5 @@ test('自定义前置图标', async ({ page }) => {
 
   const wrap = page.locator('#custom-icon')
   const treeMenu = wrap.locator('.tiny-tree-menu')
+  // TINY-TODO : 补充前置图标后再补充此测试用例
 })

package/demos/pc/app/tree-menu/only-check-children.spec.ts

@@ -1,5 +1,27 @@
 import { test, expect } from '@playwright/test'
 
 test('父级只展开不跳转', async ({ page }) => {
-  
-})
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#only-check-children')
+
+  const wrap = page.locator('#only-check-children')
+  const treeMenu = wrap.locator('.tiny-tree-menu')
+  const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
+  const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
+
+  await treeNodeContent.filter({ hasText: /^指南$/ }).click()
+  await expect(treeNode.filter({ hasText: /^指南/ })).toHaveClass(/is-expanded/)
+  // TINY-TODO: 补充修复 onlyCheckChildren 属性功能后打开
+  // await expect(treeNode.filter({ hasText: /^指南/ })).not.toHaveClass(/is-current/)
+  // await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).not.toHaveCSS(
+  //   'color',
+  //   '#1476ff'
+  // )
+  // await treeNodeContent.filter({ hasText: /^后端适配器$/ }).click()
+  // await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toHaveClass(/is-current/)
+  // await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).toHaveCSS('color', '#1476ff')
+  // await expect(treeNodeContent.filter({ hasText: /^后端适配器$/ }).locator('.tree-node-body')).toHaveCSS(
+  //   'color',
+  //   '#1476ff'
+  // )
+})

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

@@ -1,6 +1,26 @@
 import { test, expect } from '@playwright/test'
 
-
 test('字段映射', async ({ page }) => {
- 
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#props')
+
+  const wrap = page.locator('#props')
+  const treeMenu = wrap.locator('.tiny-tree-menu')
+  const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
+  const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
+
+  await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeHidden()
+  await treeNodeContent.filter({ hasText: /^指南$/ }).click()
+  await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeVisible()
+  await treeNode.filter({ hasText: /^后端适配器$/ }).click()
+  await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toHaveClass(/is-current/)
+  await treeNodeContent.filter({ hasText: /^指南$/ }).click()
+  await expect(treeNode.filter({ hasText: /^后端适配器$/ })).toBeHidden()
+
+  // 过滤功能
+  await treeMenu.locator('.tiny-input__inner').fill('添加标签页')
+  await expect(page.getByTitle('添加标签页')).toBeVisible()
+  await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeHidden()
+  await treeMenu.locator('.tiny-input__inner').clear()
+  await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeVisible()
 })

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

@@ -1,10 +1,42 @@
 import { test, expect } from '@playwright/test'
 
-
 test('底部一键展开', async ({ page }) => {
- 
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#show-expand')
+
+  const wrap = page.locator('#show-expand')
+  const treeMenu = wrap.locator('.tiny-tree-menu')
+  const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
+  const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
+  const expandButton = treeMenu.locator('.tiny-tree-menu__expand .tiny-svg')
+
+  await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible()
+  // TINY-TODO: showExpand 功能补全后打开
+  /*  await expect(expandButton).toBeVisible()
+  // 点击收起
+  await expandButton.click()
+  await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible()
+  await expect(treeMenu).toHaveClass(/tiny-tree-menu__collapse/)
+  await expect(treeMenu).toHaveCSS('overflow', 'hidden')
+  await expect(treeMenu).toHaveCSS('width', '48px')
+  await expect(treeMenu).toHaveCSS('padding-right', '0')
+  await expect(expandButton).toBeVisible()
+  // 点击展开
+  await expandButton.click()
+  await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible()
+  await expect(treeMenu).not.toHaveClass(/tiny-tree-menu__collapse/)
+  await expect(expandButton).toBeVisible() */
 })
 
 test('自定义节点图标', async ({ page }) => {
- 
-})
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#show-expand')
+
+  const wrap = page.locator('#show-expand')
+  const treeMenu = wrap.locator('.tiny-tree-menu')
+  const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
+  const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
+
+  await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible()
+  await expect(treeNodeContent.filter({ hasText: /^首页$/ }).locator('.tree-node-name .tiny-svg')).toBeVisible()
+})

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

@@ -1,6 +1,57 @@
 import { test, expect } from '@playwright/test'
 
-test('不可搜索不显示 title', async ({ page }) => {
+test('默认可搜索 + 显示 title', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
- 
-})
+  await page.goto('tree-menu#show-filter')
+
+  const wrap = page.locator('#show-filter')
+  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')
+
+  // 显示输入框
+  await expect(treeMenu).toHaveClass(/tiny-tree-menu__show-filter/)
+  await expect(treeMenu.locator('.tiny-input__inner')).toBeVisible()
+  await expect(treeNodeContent.filter({ hasText: /^首页$/ })).toBeVisible()
+  await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeVisible()
+  await treeMenu.locator('.tiny-input__inner').fill('首页')
+  await treeMenu.locator('.tiny-input__inner').press('Enter')
+  await expect(treeNodeContent.filter({ hasText: /^首页$/ })).toBeVisible()
+  await expect(treeNodeContent.filter({ hasText: /^指南$/ })).toBeHidden()
+  await treeMenu.locator('.tiny-input__inner').fill('')
+  await treeMenu.locator('.tiny-input__inner').press('Enter')
+
+  // 有 title 属性
+  await expect(treeNodeContent.filter({ hasText: /^首页$/ }).locator('.tree-node-body')).toHaveAttribute(
+    'title',
+    '首页'
+  )
+  await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).toHaveAttribute(
+    'title',
+    '指南'
+  )
+})
+
+test('不可搜索 + 不显示 title', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#show-filter')
+
+  const wrap = page.locator('#show-filter')
+  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 expect(treeMenu).not.toHaveClass(/tiny-tree-menu__show-filter/)
+  await expect(treeMenu.locator('.tiny-input__inner')).not.toBeVisible()
+
+  // 有 title 属性
+  await expect(treeNodeContent.filter({ hasText: /^首页$/ }).locator('.tree-node-body')).not.toHaveAttribute(
+    'title',
+    '首页'
+  )
+  await expect(treeNodeContent.filter({ hasText: /^指南$/ }).locator('.tree-node-body')).not.toHaveAttribute(
+    'title',
+    '指南'
+  )
+})

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

@@ -1,4 +1,17 @@
 import { test, expect } from '@playwright/test'
 
 test('显示数字', async ({ page }) => {
-})
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('tree-menu#show-number')
+
+  const wrap = page.locator('#show-number')
+  const treeMenu = wrap.locator('.tiny-tree-menu')
+  const treeNode = treeMenu.locator('.tiny-tree-node__wrapper > .tiny-tree-node')
+  const treeNodeContent = treeNode.locator('> .tiny-tree-node__content')
+
+  await expect(treeNodeContent.filter({ hasText: /首页$/ }).locator('.tree-node-number')).toHaveText('0')
+  await expect(treeNodeContent.filter({ hasText: /指南$/ }).locator('.tree-node-number')).toHaveText('9999')
+  await expect(treeNodeContent.filter({ hasText: /按需引入$/ }).locator('.tree-node-number')).toHaveText('9.9k')
+  await expect(treeNodeContent.filter({ hasText: /完整引入$/ }).locator('.tree-node-number')).toHaveText('1')
+  await expect(treeNodeContent.filter({ hasText: /后端适配器$/ }).locator('.tree-node-number')).toHaveText('0')
+})

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

@@ -561,7 +561,7 @@ export default {
         },
         {
           'name': 'prefix-icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '自定义前置图标',
@@ -571,7 +571,7 @@ export default {
         },
         {
           'name': 'suffix-icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '自定义后置图标',
@@ -581,7 +581,7 @@ export default {
         },
         {
           'name': 'search-icon',
-          'type': 'VueComponent',
+          'type': 'Component',
           'defaultValue': '--',
           'desc': {
             'zh-CN': '自定义搜索图标',
@@ -848,7 +848,7 @@ interface ITreeNodeData {
   // show-number 时展示的字段
   "number"?: number | string
   // 自定义每个节点的图标
-  "customIcon": VueComponent 
+  "customIcon": Component 
 }        
 `
     },

package/demos/pc/app/user-head/image-user-head-composition-api.vue

@@ -6,5 +6,5 @@
 import { ref } from 'vue'
 import { UserHead as TinyUserHead } from '@opentiny/vue'
 
-const imgUrl = ref('/static/images/ld.png')
+const imgUrl = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`)
 </script>

package/demos/pc/app/user-head/image-user-head.vue

@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      imgUrl: '/static/images/ld.png'
+      imgUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`
     }
   }
 }

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

@@ -6,7 +6,7 @@ export default {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
-        'zh-CN': '通过 <code>type="icon"</code> 设置头像。',
+        'zh-CN': '可通过<code>type="icon"</code>属性设置头像。',
         'en-US': 'Set a profile picture through<code>type="icon"</code>.'
       },
       'codeFiles': ['basic-usage.vue']
@@ -15,7 +15,7 @@ export default {
       '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']
@@ -24,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']
@@ -33,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']
@@ -42,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']
@@ -51,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']
@@ -60,7 +60,7 @@ export default {
       'demoId': 'message-count-total',
       'name': { 'zh-CN': '头像消息计数', 'en-US': 'Avatar Message Count' },
       'desc': {
-        'zh-CN': '通过<code>:message-total="100"</code>设置消息数据。',
+        'zh-CN': '可通过<code>message-total="100"</code>属性设置消息数据。',
         'en-US': `Set message data through<code>message-total='100'</code>. `
       },
       'codeFiles': ['message-count-total.vue']
@@ -69,7 +69,7 @@ export default {
       'demoId': 'message-count-type',
       'name': { 'zh-CN': '使用小红点代替具体数值', 'en-US': 'Use a red dot instead of a specific value' },
       'desc': {
-        'zh-CN': '通过<code>:message-type="basic"</code>设置消息显示替代成小红点。',
+        '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']
@@ -78,7 +78,7 @@ export default {
       'demoId': 'message-count-limit',
       'name': { 'zh-CN': '消息计数上限', 'en-US': 'Maximum number of messages' },
       'desc': {
-        'zh-CN': '通过<code>:message-upper-limit="99"</code>设置消息数据上限。',
+        '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']
@@ -88,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'
       },
@@ -98,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']
@@ -107,8 +107,8 @@ export default {
       'demoId': 'custom-user-head-content',
       'name': { 'zh-CN': '自定义图像内容', 'en-US': 'Custom Image Content' },
       'desc': {
-        'zh-CN': '<p>通过插槽自定义图像内容。</p>\n',
-        'en-US': '<p>Customize the image content by slot. </p>\n'
+        'zh-CN': '<p>可通过<code>#default</code>插槽设置自定义图像内容。</p>\n',
+        'en-US': '<p>Customize the image content by slot<code>#default</code>. </p>\n'
       },
       'codeFiles': ['custom-user-head-content.vue']
     },
@@ -116,7 +116,7 @@ export default {
       'demoId': 'render-user-head-in-grid',
       'name': { 'zh-CN': 'Grid 单元格展示头像', 'en-US': 'Avatar Displayed in Grid Cells' },
       'desc': {
-        'zh-CN': '通过Grid单元格属性<code>renderer</code>传入封装用户头像组件（HTML格式）。',
+        '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>.'
       },
@@ -154,7 +154,7 @@ export default {
           'type': 'string',
           'defaultValue': `'details'`,
           'desc': {
-            'zh-CN': '消息类型 details|basic 可选。该属性的可选值为 details / basic',
+            'zh-CN': '消息类型 details|basic 可选',
             'en-US': 'Message type details|basic is optional. The value of this attribute can be details or basic.'
           },
           'demoId': 'message-count-type'
@@ -185,7 +185,7 @@ export default {
           'type': 'string',
           'defaultValue': `'label'`,
           'desc': {
-            'zh-CN': '头像类型，icon|image|label 可选。该属性的可选值为 icon / image / label',
+            'zh-CN': '头像类型，icon|image|label 可选',
             'en-US':
               'Avatar type. The options are icon, image, and label. ;The value of this attribute can be icon / image / label'
           },
@@ -196,7 +196,7 @@ export default {
           'type': 'string',
           'defaultValue': '',
           'desc': {
-            'zh-CN': 'type=icon 时为图标类名，type=label时为字体串，type=image时为资源路径',
+            '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'
           },