@opentiny/vue-docs 2.2.5 → 2.2.7

package/demos/pc/app/color-picker/alpha.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('测试Alpha', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#enable-alpha')
+  await page.locator('.tiny-color-picker__inner').click()
+  await page.locator('.black').click()
+  await page.getByText('演示AlphaAlpha选择。取消选择').click()
+  await page.getByText('用户选择了取消').click()
+  await page.locator('.tiny-color-picker__inner').click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByText('#804040FF').click()
+})

package/demos/pc/app/color-picker/base.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('基本用法', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#basic-usage')
+  await page.locator('.tiny-color-picker__inner').click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.locator('#basic-usage').getByRole('img').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})

package/demos/pc/app/color-picker/default-visible.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('默认显示色盘', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#default-visible')
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})

package/demos/pc/app/color-picker/dynamic-color-change.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('color-picker#dynamic-color-change')
+  await page.getByRole('button', { name: '切换', exact: true }).click()
+  await page.getByRole('button', { name: '切换', exact: true }).click()
+  await page.getByRole('button', { name: '切换', exact: true }).click()
+})

package/demos/pc/app/color-picker/event.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test'
+
+test('事件触发', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-picker#event')
+  await page.locator('#event').getByRole('img').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.locator('#event').getByRole('img').click()
+  await page.getByRole('button', { name: '取消' }).click()
+})

package/demos/pc/app/color-picker/history.spec.ts

@@ -8,8 +8,8 @@ test('测试历史记录', async ({ page }) => {
   const arrow = page.locator('.tiny-collapse-item__arrow')
   await arrow.click()
   await expect(page.locator('.tiny-color-select-panel__history')).toHaveCount(1)
-  await page.locator('.mr20.fw-bold').click()
-  //用户行为更改历史记录测试
+  await page.getByRole('button', { name: '选择' }).click()
+  // 用户行为更改历史记录测试
   await page.getByRole('button', { name: 'Append history color' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')
@@ -17,7 +17,7 @@ test('测试历史记录', async ({ page }) => {
   await expect(
     page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(2)')
   ).toBeVisible()
-  //点击色块中心，并点击选择，历史记录增加1的测试
+  // 点击色块中心，并点击选择，历史记录增加1的测试
   const black = page.locator('.black')
   const center = await black.boundingBox()
   const x = center?.x ?? 0 + (center?.width ?? 0) / 2

package/demos/pc/app/color-picker/predefine.spec.ts

@@ -10,8 +10,8 @@ test('测试预定义颜色', async ({ page }) => {
   await expect(
     page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(8)')
   ).toBeVisible()
-  await page.locator('.mr20.fw-bold').click()
-  //用户行为预定义颜色测试
+  await page.getByRole('button', { name: '选择' }).click()
+  // 用户行为预定义颜色测试
   await page.getByRole('button', { name: 'Append predefine color' }).click()
   await page.locator('.tiny-color-picker').click()
   await page.waitForSelector('.tiny-collapse-item__arrow')

package/demos/pc/app/color-picker/webdoc/color-picker.js

@@ -5,33 +5,47 @@ 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>v-model</code>绑定数据即可。',
+        'en-US': 'By referencing component tags,<code>v model</code>bind data.'
+      },
       'codeFiles': ['base.vue']
     },
     {
       'demoId': 'size',
       'name': { 'zh-CN': '尺寸设置', 'en-US': 'Size Setting' },
-      'desc': { 'zh-CN': '通过 size 属性设置large 、medium 、small 、mini 四种不同大小尺寸。不设置时为默认尺寸。', 'en-US': 'For details, see the following example.' },
+      'desc': {
+        'zh-CN':
+          '通过<code>size</code>属性设置<code>large</code><code>medium</code><code>small</code><code>mini</code>四种不同大小尺寸。不设置时为默认尺寸。',
+        'en-US':
+          'Set the size attribute to four different sizes: <code>large</code>, <code>medium</code>, <code>small</code>, and <code>mini</code>. Default size when not set'
+      },
       'codeFiles': ['size.vue']
     },
     {
       'demoId': 'event',
-      'name': { 'zh-CN': '事件触发', 'en-US': 'event' },
-      'desc': { 'zh-CN': '点击确认是将会触发confirm事件, 取消时触发cancel事件', 'en-US': 'When click confirm will trigger confirm event. When click outside or cancel will trigger cancel event' },
+      'name': { 'zh-CN': '事件触发', 'en-US': 'eventing' },
+      'desc': {
+        'zh-CN': '通过点击确认时触发<code>confirm</code>事件, 取消时触发<code>cancel</code>事件。',
+        'en-US':
+          'When click confirm will trigger <code>confirm</code>event. When click outside or cancel will trigger <code>cancel</code> event.'
+      },
       'codeFiles': ['event.vue']
     },
     {
       'demoId': 'enable-alpha',
       'name': { 'zh-CN': 'Alpha', 'en-US': 'Alpha' },
-      'desc': { 'zh-CN': 'Alpha选择', 'en-US': 'Alpha select.' },
+      'desc': { 'zh-CN': '<code>Alpha</code>选择。', 'en-US': '<code>Alpha</code>select.' },
       'codeFiles': ['alpha.vue']
     },
     {
       'demoId': 'history',
       'name': { 'zh-CN': '历史记录', 'en-US': 'history' },
       'desc': {
-        'zh-CN': '当history不为undefined时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到history. 用户行为会更改历史记录, 外部可以更改历史记录',
-        'en-US': 'When history is not undefined, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the history User behavior can change history, and external users can also change history'
+        'zh-CN':
+          '当<code>history</code>不为<code>undefined</code>时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到<code>history</code>. 用户行为会更改历史记录, 外部可以更改历史记录。',
+        'en-US':
+          'When <code>history</code> is not <code>undefined</code>, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the <code>history</code> User behavior can change history, and external users can also change history.'
       },
       'codeFiles': ['history.vue']
     },
@@ -39,11 +53,12 @@ export default {
       'demoId': 'predefine',
       'name': {
         'zh-CN': '预定义颜色',
-        'en-US': 'predefine color'
+        'en-US': 'Predefine color'
       },
       'desc': {
-        'zh-CN': '提供给一些定义颜色, 用户行为不会更改预定义颜色, 但外部可以更改',
-        'en-US': 'Provide some defined colors, user behavior will not change the predefined colors, but can be changed externally'
+        'zh-CN': '通过<code>predefine</code>预定义颜色值，用户行为不会更改预定义颜色, 但外部可以更改。',
+        'en-US':
+          'By<code>predefine</code>predefined color values, user behavior does not change the predefined colors, but they can be changed externally.'
       },
       'codeFiles': ['predefine.vue']
     },
@@ -51,8 +66,10 @@ export default {
       'demoId': 'default-visible',
       'name': { 'zh-CN': '默认显示', 'en-US': 'default-visible' },
       'desc': {
-        'zh-CN': '当visible为true时, 将会默认显示color-select. visible是响应式的, 所以你可以强制控制color-select的状态。当visible切换的时候, 会触发cancel事件',
-        'en-US': 'If visible is true the <code>color-select</code> will show. The visible prop is reactive so you can force change <code>color-select</code> show or not. When change visible will trigger cancel event'
+        'zh-CN':
+          '当<code>visible</code>为<code>true</code>时, 将会默认显示<code>color-select</code>。 <code>visible</code>是响应式的, 所以你可以强制控制<code>color-select</code>的状态。当<code>visible</code>切换的时候, 会触发<code>cancel</code>事件。',
+        'en-US':
+          'If <code>visible</code> is true the <code>color-select</code> will show. The visible prop is reactive so you can force change <code>color-select</code> show or not. When change <code>visible</code> will trigger <code>cancel</code> event.'
       },
       'codeFiles': ['default-visible.vue']
     },
@@ -60,27 +77,17 @@ export default {
       'demoId': 'dynamic-color-change',
       'name': { 'zh-CN': '颜色动态切换', 'en-US': 'dynamic-color-change' },
       'desc': {
-        'zh-CN': '可以动态切换color属性, 以满足各种需求',
-        'en-US': 'Can dynamically switch color attributes to meet various needs'
+        'zh-CN': '通过动态切换<code>color</code>属性, 以满足各种需求。',
+        'en-US': 'Can dynamically switch <code>color</code> attributes to meet various needs.'
       },
       'codeFiles': ['dynamic-color-change.vue']
-    },
+    }
   ],
   apis: [
     {
       'name': 'color-picker',
       'type': 'component',
-      'properties': [
-        {
-          'name': 'modelValue',
-          'type': 'string',
-          'defaultValue': 'transparent',
-          desc: {
-            'zh-CN': '默认颜色',
-            'en-US': 'default color'
-          },
-          demoId: 'basic-usage'
-        },
+      'props': [
         {
           name: 'visible',
           type: 'boolean',
@@ -97,7 +104,8 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '定义color-picker尺寸;该属性的可选值为 large / medium / small / mini',
-            'en-US': 'Define color-picker dimensions; The optional values for this attribute are large/medium/small/mini'
+            'en-US':
+              'Define color-picker dimensions; The optional values for this attribute are large/medium/small/mini'
           },
           demoId: 'size'
         },

package/demos/pc/app/color-select-panel/alpha.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test'
+
+test('测试Alpha', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#alpha')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})

package/demos/pc/app/color-select-panel/base.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('color-select-panel#basic-usage')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+})

package/demos/pc/app/color-select-panel/event.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('事件触发', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#event')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '取消' }).click()
+})

package/demos/pc/app/color-select-panel/history.spec.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('历史记录', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#history')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Append history color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '历史记录' }).click()
+  await page.getByRole('button', { name: 'Pop history color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '历史记录' }).click()
+})

package/demos/pc/app/color-select-panel/predefine.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/test'
+
+test('预定义颜色', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('color-select-panel#predefine')
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.locator('.black').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Append predefine color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+  await page.locator('.tiny-color-select-panel__predefine > div:nth-child(8)').click()
+  await page.getByRole('button', { name: 'Pop predefine color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.locator('.tiny-color-select-panel__inner__hue-select').click()
+  await page.getByRole('button', { name: '选择' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+  await page.getByRole('button', { name: 'Append predefine color' }).click()
+  await page.getByRole('button', { name: 'Show Color select panel' }).click()
+  await page.getByRole('button', { name: '预定义颜色' }).click()
+})

package/demos/pc/app/color-select-panel/webdoc/color-select-panel.js

@@ -5,58 +5,61 @@ 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>visible</code>设置显示色彩选择面板。',
+        'en-US': 'Set the display color selection panel through<code>visible</code>.'
+      },
       'codeFiles': ['base.vue']
     },
     {
       'demoId': 'alpha',
-      'name': {'zh-CN': '透明度', 'en-US': 'Alpha'},
-      'desc': {'zh-CN': '透明度选择', 'en-US': 'Alpha select.'},
+      'name': { 'zh-CN': '透明度', 'en-US': 'Alpha' },
+      'desc': {
+        'zh-CN': '通过<code>alpha</code>设置透明度选择。',
+        'en-US': 'Set transparency selection through<code>alpha</code>.'
+      },
       'codeFiles': ['alpha.vue']
     },
     {
       'demoId': 'event',
       'name': { 'zh-CN': '事件触发', 'en-US': 'event' },
-      'desc': { 'zh-CN': '点击确认是将会触发confirm事件, 取消时触发cancel事件', 'en-US': 'When click confirm will trigger confirm event. When click outside or cancel will trigger cancel event' },
+      'desc': {
+        'zh-CN': '通过点击确认时触发<code>confirm</code>事件, 取消时触发<code>cancel</code>事件。',
+        'en-US':
+          'When click confirm will trigger confirm event. When click outside or cancel will trigger cancel event.'
+      },
       'codeFiles': ['event.vue']
     },
     {
       'demoId': 'history',
       'name': { 'zh-CN': '历史记录', 'en-US': 'history' },
       'desc': {
-        'zh-CN': '当history不为undefined时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到history. 用户行为会更改历史记录, 外部可以更改历史记录',
-        'en-US': 'When history is not undefined, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the history User behavior can change history, and external users can also change history'
+        'zh-CN':
+          '当<code>history</code>不为<code>undefined</code>时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到<code>history</code>用户行为会更改历史记录, 外部可以更改历史记录。',
+        'en-US':
+          'When <code>history</code> is not <code>undefined</code>, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the <code>history</code> User behavior can change history, and external users can also change history.'
       },
       'codeFiles': ['history.vue']
     },
     {
       'demoId': 'predefine',
-      'name': { 
+      'name': {
         'zh-CN': '预定义颜色',
-        'en-US': 'predefine color' 
+        'en-US': 'predefine color'
       },
-      'desc': { 
-        'zh-CN': '提供给一些定义颜色, 用户行为不会更改预定义颜色, 但外部可以更改',
-        'en-US': 'Provide some defined colors, user behavior will not change the predefined colors, but can be changed externally' 
+      'desc': {
+        'zh-CN': '通过<code>predefine</code>预定义颜色值，用户行为不会更改预定义颜色, 但外部可以更改。',
+        'en-US':
+          'By<code>predefine</code>predefined color values, user behavior does not change the predefined colors, but they can be changed externally.'
       },
       'codeFiles': ['predefine.vue']
-    },
+    }
   ],
   apis: [
     {
       'name': 'color select panel',
       'type': 'component',
-      'properties': [
-        {
-          name: 'modelValue',
-          type: 'String',
-          defaultValue: 'transparent',
-          desc: {
-            'zh-CN': '默认颜色',
-            'en-US': 'default color'
-          },
-          demoId: 'basic-usage'
-        },
+      'props': [
         {
           name: 'visible',
           type: 'boolean',
@@ -64,7 +67,7 @@ export default {
           desc: {
             'zh-CN': '是否默认显示color select panel',
             'en-US': 'Is color select panel displayed by default'
-          },
+          }
         },
         {
           name: 'alpha',
@@ -80,8 +83,8 @@ export default {
           name: 'history',
           type: 'string[] | undefined',
           defaultValue: 'undefined',
-          desc:{
-            'zh-CN': '时候启用历史记录,',
+          desc: {
+            'zh-CN': '时候启用历史记录',
             'en-US': 'enable history or not'
           },
           demoId: 'history'
@@ -90,8 +93,8 @@ export default {
           name: 'predefine',
           type: 'string[] | undefined',
           defaultValue: 'undefined',
-          desc:{
-            'zh-CN': '时候启用历史记录,',
+          desc: {
+            'zh-CN': '时候启用历史记录',
             'en-US': 'enable predefine or not'
           },
           demoId: 'predefine'
@@ -122,7 +125,7 @@ export default {
           name: 'color-update',
           type: '(color:Color) => void',
           defaultValue: '',
-          desc:{
+          desc: {
             'zh-cn': '当颜色更新的时候会触发该事件，包括：点击预定义颜色、点击历史记录',
             'en-US': 'when click predefine color or history, will trigger color-update event'
           }

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

@@ -34,7 +34,7 @@ export default {
     {
       'name': 'company',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'modelValue / v-model',
           'type': 'string , number',

package/demos/pc/app/config-provider/basic.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('config-provider#base')
+  await page.locator('.tiny-config-provider > .tiny-alert > .tiny-svg').nth(1).click()
+  await page.waitForTimeout(500)
+  await expect(page.locator('.tiny-modal > .tiny-modal__box').nth(1)).toHaveText('触发自定方法')
+})

package/demos/pc/app/config-provider/tag.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test'
+
+test('测试自定义标签', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('config-provider#tag')
+  await page.getByText('这是一个Tag被DOM包裹').click()
+  await page.locator('#tag span').nth(2).click()
+  await page.waitForTimeout(300)
+  await page.locator('#tag span').nth(2).click()
+  await page.waitForTimeout(300)
+  await expect(page.locator('.tiny-switch').nth(2)).toHaveCSS('background-color', 'rgb(94, 124, 224)')
+})

package/demos/pc/app/config-provider/text-direct.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('测试改变文字方向', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('config-provider#text-direct')
+  await page.getByRole('link', { name: '改变文字方向' }).click()
+  await page.getByRole('button', { name: 'RTL' }).click()
+  await page.waitForTimeout(300)
+  await page.getByRole('button', { name: 'LTR' }).click()
+  await page.waitForTimeout(300)
+})

package/demos/pc/app/config-provider/webdoc/config-provider.cn.md

@@ -1,7 +1,7 @@
 ---
-title: ConfigProvide 组件
+title: ConfigProvider 组件
 ---
 
-# ConfigProvide 组件
+# ConfigProvider 组件
 
 <div></div>

package/demos/pc/app/config-provider/webdoc/config-provider.en.md

@@ -0,0 +1,7 @@
+---
+title: ConfigProvide Assembly
+---
+
+# ConfigProvide Assembly
+
+<div></div>

package/demos/pc/app/config-provider/webdoc/config-provider.js

@@ -4,24 +4,32 @@ export default {
   demos: [
     {
       'demoId': 'base',
-      'name': { 'zh-CN': '基本使用', 'en-US': '' },
-      'desc': { 'zh-CN': '可以通过<code>design</code>属性配置自定义不同设计规范的图标和逻辑', 'en-US': '' },
+      'name': { 'zh-CN': '基本使用', 'en-US': 'Basic Use' },
+      'desc': {
+        'zh-CN': '通过<code>design</code>属性配置自定义不同设计规范的图标和逻辑。',
+        'en-US':
+          'Icons and logic for different design specifications can be customized through the <code>design</code> attribute configuration.'
+      },
       'codeFiles': ['base.vue']
     },
     {
       'demoId': 'text-direct',
-      'name': { 'zh-CN': '改变文字方向', 'en-US': '' },
+      'name': { 'zh-CN': '改变文字方向', 'en-US': 'Change the direction of text' },
       'desc': {
         'zh-CN':
-          '有时, 我们需要改变文字的排列方向, 例如我们在排列阿拉伯语是就需要RTL而非LTR.config-provider也考虑到了这点,只需要覆写design.direction即可',
-        'en-US': ''
+          '通过<code>:direction="ltr"</code>设置文字对齐方向，<code>ltr</code>为左对齐，<code>rtl</code>为右对齐。',
+        'en-US':
+          'Set the text alignment direction through<code>: direction="ltr"</code>, where<code>ltr</code>is left aligned and<code>rtl</code>is right aligned.'
       },
       'codeFiles': ['text-direct.vue']
     },
     {
       'demoId': 'tag',
-      'name': { 'zh-CN': '自定义标签', 'en-US': '' },
-      'desc': { 'zh-CN': '可以通过<code>tag</code>可以自定义容器标签', 'en-US': '' },
+      'name': { 'zh-CN': '自定义标签', 'en-US': 'Custom tags' },
+      'desc': {
+        'zh-CN': '通过<code>tag</code>可以自定义容器标签。',
+        'en-US': 'Container labels can be customized through<code>tag</code>.'
+      },
       'codeFiles': ['tag.vue']
     }
   ],
@@ -29,34 +37,34 @@ export default {
     {
       'name': 'config-provider',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'design',
           'type': 'ConfigProviderProps',
           'defaultValue': '',
-          'desc': { 'zh-CN': '规范，可以通过该属于定制一些自定义的交互规范', 'en-US': '' },
-          'demoId': 'base'
-        },
-        {
-          'name': 'breakPoints',
-          'type': 'breakPoint',
-          'defaultValue': "{'xs': 480,'sm': 640,'md': 768,'lg': 1024,'xl': 1280,'2xl': 1536}",
-          'desc': { 'zh-CN': '断点, 为Layout提供', 'en-US': '' },
+          'desc': {
+            'zh-CN': '规范，可以通过该属于定制一些自定义的交互规范',
+            'en-US': 'Standardization can be achieved by customizing some custom interaction specifications'
+          },
           'demoId': 'base'
         },
         {
           'name': 'direction',
           'type': "'ltr' | 'rtl'",
           'defaultValue': 'ltr',
-          'desc': { 'zh-CN': '文字排版方向', 'en-US': '' },
-          'demoId': 'text-dire'
+          'desc': { 'zh-CN': '文字排版方向', 'en-US': 'Text layout direction' },
+          'demoId': 'text-direct'
         },
         {
           'name': 'tag',
           'type': 'object',
           'defaultValue': "{enable: true,name: 'div'}",
-          'desc': { 'zh-CN': '是否被元素包裹, 如果是vue2且没有一个单一节点, 组件会自动创建一个div', 'en-US': '' },
-          'demoId': 'base'
+          'desc': {
+            'zh-CN': '是否被元素包裹, 如果是vue2且没有一个单一节点, 组件会自动创建一个div',
+            'en-US':
+              'Whether it is wrapped by elements, if it is Vue2 and there is no single node, the component will automatically create a div'
+          },
+          'demoId': 'tag'
         }
       ],
       'events': [],