@opentiny/vue-docs 2.2.4 → 2.2.6

package/demos/pc/app/milestone/solid-style.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="handleClick(!isSolid)" style="max-width: cancel">设置solid值为{{ !isSolid }}</tiny-button>
+    <tiny-button @click="handleClick(!isSolid)" style="max-width: cancel">设置 solid 值为{{ !isSolid }}</tiny-button>
     <tiny-milestone :data="milestoneData" :milestones-status="statusMap" :solid="isSolid"></tiny-milestone>
   </div>
 </template>
@@ -25,32 +25,32 @@ export default {
       },
       milestoneData: [
         {
-          name: 'completed完成状态',
+          name: 'completed 完成状态',
           time: '2018-9-7',
           status: 'completed'
         },
         {
-          name: 'completed完成状态',
+          name: 'completed 完成状态',
           time: '2018-9-8',
           status: 'completed'
         },
         {
-          name: 'doing未完成状态',
+          name: 'doing 未完成状态',
           time: '2018-9-10',
           status: 'doing'
         },
         {
-          name: 'xxx未完成状态',
+          name: 'xxx 未完成状态',
           time: '2018-9-9',
           status: 'xxx'
         },
         {
-          name: 'back未完成状态',
+          name: 'back 未完成状态',
           time: '2018-9-11',
           status: 'back'
         },
         {
-          name: 'end未完成状态',
+          name: 'end 未完成状态',
           time: '2018-9-9',
           status: 'end'
         }

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

@@ -62,26 +62,28 @@ export default {
       'demoId': 'data-field-mapping',
       'name': { 'zh-CN': '数据字段映射', 'en-US': 'Data Field Mapping' },
       'desc': {
-        'zh-CN': `自定义 <code>data</code> 属性的键名和键值：<br/>
+        'zh-CN': `
           <div class="tip custom-block"><p class="custom-block-title">
-          通过 <code>completed-field</code> 设置完成状态对应的键值，默认为 <code>completed</code> ；<br/>
+          自定义 <code>data</code> 属性的键名和键值：<br/> </p>
+          <code>completed-field</code> 设置完成状态对应的键值，默认为 <code>completed</code> ；<br/>
           <code>flag-field</code> 设置旗子信息数组对应的键名，默认为 <code>flags</code> ；<br/>
           <code>flag-content-field</code> 设置旗子描述对应的键名，默认为 <code>content</code> ；<br/>
           <code>flag-name-field</code> 设置旗子标题对应的键名，默认为 <code>name</code> ；<br/>
           <code>flag-status-field</code> 设置旗子状态对应的键名，默认为 <code>status</code> ；<br/>
           <code>name-field</code> 设置节点名称对应的键名，默认为 <code>name</code> ；<br/>
           <code>status-field</code> 设置节点状态对应的键名，默认为 <code>status</code> ；<br/>
-          <code>time-field</code> 设置节点时间对应的键名，默认为 <code>time</code> 。</p></div>`,
-        'en-US': `Customize the key names and values of <code>data</code> attributes:<br/>
+          <code>time-field</code> 设置节点时间对应的键名，默认为 <code>time</code> 。</div>`,
+        'en-US': `
           <div class="tip custom-block"><p class="custom-block-title">
-          Set the key value corresponding to the completion status through <code>completed-field</code> , which defaults to <code>completed</code> ;<br/>
+          Customize the key names and values of <code>data</code> attributes:<br/> </p>
+          <code>completed-field</code> Set the key value corresponding to the completion status, which defaults to <code>completed</code> ;<br/>
           <code>flag-field</code> Set the key name corresponding to the flag information array, which defaults to <code>flags</code> ;<br/>
           <code>flag-content-field</code> Set the key name corresponding to the flag description, which defaults to <code>content</code> ;<br/>
           <code>flag-name-field</code> Set the key name corresponding to the flag subtitle, which defaults to <code>name</code> ;<br/>
           <code>flag-status-field</code> Set the key name corresponding to the flag state, which defaults to <code>status</code> ;<br/>
           <code>name-field</code> Set the key name corresponding to the node name, which defaults to <code>name</code> ;<br/>
           <code>status-field</code> Set the key name corresponding to the node state, which defaults to <code>status</code> ;<br/>
-          <code>time-field</code> Set the key name corresponding to the node time, which defaults to <code>time</code> .</p> </div>`
+          <code>time-field</code> Set the key name corresponding to the node time, which defaults to <code>time</code> . </div>`
       },
       'codeFiles': ['data-field-mapping.vue']
     },
@@ -142,7 +144,8 @@ export default {
         },
         {
           'name': 'data',
-          'type': 'object | object[]',
+          'type': 'ICustomData | ICustomData[]',
+          'typeAnchorName': 'ICustomData',
           'defaultValue': '',
           'desc': {
             'zh-CN': '设置步骤条的数据，可自定义键值映射',
@@ -303,7 +306,8 @@ export default {
       'events': [
         {
           'name': 'click',
-          'type': '(index: number, node: object) => void',
+          'type': '(index: number, node: ICustomData) => void',
+          'typeAnchorName': 'ICustomData',
           'defaultValue': '',
           'desc': {
             'zh-CN': '节点的点击事件，参数（index:节点索引, node：节点数据信息）',
@@ -313,18 +317,20 @@ export default {
         },
         {
           'name': 'flagclick',
-          'type': '(index: number, node: object) => void',
+          'type': '(index: number, node: ICustomData) => void',
+          'typeAnchorName': 'ICustomData',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '[deprecated v3.5.0废弃，v3.17.0移除；移除原因：命名规范，建议使用flag-click代替]',
+            'zh-CN': '[使用flag-click代替， deprecated v3.5.0废弃，v3.17.0移除；移除原因：命名规范]',
             'en-US':
-              '[deprecated in v3.5.0 and removed in v3.17.0; Reason for removal: It is recommended that flag-click be used instead of flag-click]'
+              '[It is recommended that flag-click be used instead of flag-click, deprecated in v3.5.0 and removed in v3.17.0; Reason for removal: ]'
           },
           'demoId': 'milestone-events'
         },
         {
           'name': 'flag-click',
-          'type': '(index: number, node: object) => void',
+          'type': '(index: number, node: ICustomData) => void',
+          'typeAnchorName': 'ICustomData',
           'defaultValue': '',
           'desc': {
             'zh-CN': '旗子的点击事件，参数（index:旗子索引, node：旗子数据信息）',
@@ -376,6 +382,19 @@ interface IStatus {
   back: string
   end: string
   cancel: string
+}`
+    },
+    {
+      name: 'ICustomData',
+      type: 'interface',
+      code: `
+interface ICustomData { 
+  name?: string
+  time?: string
+  status?: string
+  flags?: string
+  content?: string
+  [propName: string]: string // 可自定义以上的默认属性
 }`
     }
   ]

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

@@ -7,7 +7,7 @@ export default {
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>Modal.alert</code> 方法设置弹出框，通过 <code>Modal.confirm</code> 方法设置确认弹出框。函数返回一个 <code>Promise</code> 对象，其中属性 <code>vm</code> 可用来关闭当前模态框。</p>',
+          '<p>通过<code>Modal.alert</code>方法设置弹出框，通过<code>Modal.confirm</code>方法设置确认弹出框。函数返回一个<code>Promise</code>对象，其中属性<code>vm</code>可用来关闭当前模态框。</p>',
         'en-US':
           '<p>You can use the <code>Modal.alert</code> method to set a pop-up box, and use the <code>Modal.confirm</code> method to set a confirmation pop-up box. The function returns a <code>Promise</code> object, where the property <code>vm</code> can be used to close the current Modal.</p>'
       },
@@ -15,28 +15,28 @@ export default {
     },
     {
       'demoId': 'fullscreen',
-      'name': { 'zh-CN': '最大化显示', 'en-US': 'Maximized display' },
+      'name': { 'zh-CN': '最大化显示', 'en-US': 'Maximized Display' },
       'desc': {
-        'zh-CN': '<p>通过 <code>fullscreen</code> 设置是否最大化显示。</p>',
-        'en-US': '<p>You can use the <code>fullscreen</code> attribute to set whether to maximize the display. </p>'
+        'zh-CN': '<p>通过<code>:fullscreen</code>设置是否最大化显示。</p>',
+        'en-US': '<p>You can use the <code>:fullscreen</code> attribute to set whether to maximize the display. </p>'
       },
       'codeFiles': ['fullscreen.vue']
     },
     {
       'demoId': 'esc-closable',
-      'name': { 'zh-CN': '按 Esc 键关闭弹出框', 'en-US': 'Press Esc to close the dialog box.' },
+      'name': { 'zh-CN': '按 Esc 键关闭弹出框', 'en-US': 'Press Esc To Close The Dialog Box.' },
       'desc': {
-        'zh-CN': '<p>通过 <code>esc-closable</code> 设置是否允许按 Esc 键关闭窗口。</p>',
+        'zh-CN': '<p>通过<code>:esc-closable</code>设置是否允许按 Esc 键关闭窗口。</p>',
         'en-US':
-          '<p>You can use the <code>esc-closable</code> attribute to set whether to close a window by pressing the Esc key. </p>'
+          '<p>You can use the <code>:esc-closable</code> attribute to set whether to close a window by pressing the Esc key. </p>'
       },
       'codeFiles': ['esc-closable.vue']
     },
     {
       'demoId': 'duration',
-      'name': { 'zh-CN': '自动关闭延时', 'en-US': 'Automatic shutdown delay' },
+      'name': { 'zh-CN': '自动关闭延时', 'en-US': 'Automatic Shutdown Delay' },
       'desc': {
-        'zh-CN': "<p>通过 <code>duration</code> 设置自动关闭的延迟时间，仅当 <code>type='message'</code> 有效。</p>",
+        'zh-CN': "<p>通过<code>duration</code>设置自动关闭的延迟时间，仅当<code>type='message'</code>有效。</p>",
         'en-US':
           '<p>You can use the <code>duration</code> attribute to set the delay time for automatic closing. This parameter is valid only for type=message. </p>'
       },
@@ -44,10 +44,9 @@ export default {
     },
     {
       'demoId': 'id',
-      'name': { 'zh-CN': '防止重复提示', 'en-US': 'Prevent repeated prompts' },
+      'name': { 'zh-CN': '防止重复提示', 'en-US': 'Prevent Repeated Prompts' },
       'desc': {
-        'zh-CN':
-          "<p>如果不想窗口重复点击，可以设置唯一的 <code>id</code> 防止重复提示，仅当 <code>type='message'</code> 有效</p>",
+        'zh-CN': "<p>通过设置唯一的<code>id</code>防止重复提示，仅当<code>type='message'</code>有效</p>。",
         'en-US':
           '<p>If you do not want to click the window repeatedly, you can set a unique <code>id</code> to prevent repeated prompts. This parameter is valid only for type=message. </p>'
       },
@@ -55,31 +54,31 @@ export default {
     },
     {
       'demoId': 'lock-scroll',
-      'name': { 'zh-CN': '锁住滚动条', 'en-US': 'Lock the scroll bar' },
+      'name': { 'zh-CN': '锁住滚动条', 'en-US': 'Lock The Scroll Bar' },
       'desc': {
-        'zh-CN': '<p>通过 <code>lock-scroll</code> 设置是否锁住滚动条，不允许页面滚动。</p>',
-        'en-US': '<p>You can use the <code>lock-scroll</code> attribute to set whether to lock the scroll bar. </p>'
+        'zh-CN': '<p>通过<code>:lock-scroll</code>设置是否锁住滚动条，不允许页面滚动。</p>',
+        'en-US': '<p>You can use the <code>:lock-scroll</code> attribute to set whether to lock the scroll bar. </p>'
       },
       'codeFiles': ['lock-scroll.vue']
     },
     {
       'demoId': 'lock-view',
-      'name': { 'zh-CN': '锁住页面', 'en-US': 'Lock the page' },
+      'name': { 'zh-CN': '锁住页面', 'en-US': 'Lock The Page' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>mask</code> 设置是否显示遮罩层，通过 <code>lock-view</code> 设置是否锁住页面，不允许窗口之外的任何操作。</p>',
+          '<p>通过<code>:mask</code>设置是否显示遮罩层，通过<code>:lock-view</code>设置是否锁住页面，不允许窗口之外的任何操作。</p>',
         'en-US':
-          '<p>You can use the <code>lock-view</code> attribute to set whether to lock the page. Operations outside the window are not allowed. </p>'
+          '<p>You can use the <code>:lock-view</code> attribute to set whether to lock the page. Operations outside the window are not allowed. </p>'
       },
       'codeFiles': ['lock-view.vue']
     },
     {
       'demoId': 'mask-closable',
-      'name': { 'zh-CN': '点击遮罩层关闭窗口', 'en-US': 'Click the mask layer to close the window.' },
+      'name': { 'zh-CN': '点击遮罩层关闭窗口', 'en-US': 'Click The Mask Layer To Close The Window.' },
       'desc': {
-        'zh-CN': '<p>通过 <code>mask-closable</code> 设置是否允许点击遮罩层关闭窗口。</p>',
+        'zh-CN': '<p>通过<code>:mask-closable</code>设置是否允许点击遮罩层关闭窗口。</p>',
         'en-US':
-          '<p>You can use the <code>mask-closable</code> attribute to set whether to allow clicking the mask layer to close the window. </p>'
+          '<p>You can use the <code>:mask-closable</code> attribute to set whether to allow clicking the mask layer to close the window. </p>'
       },
       'codeFiles': ['mask-closable.vue']
     },
@@ -87,102 +86,107 @@ export default {
       'demoId': 'message',
       'name': { 'zh-CN': '自定义内容', 'en-US': 'Custom Content' },
       'desc': {
-        'zh-CN': '<p>通过 <code>message</code> 设置窗口的内容。</p>',
-        'en-US': '<p>You can set the content of the window through the <code>message</code> attribute. </p>'
+        'zh-CN': '<p>通过<code>:message</code>设置窗口的内容。</p>',
+        'en-US': '<p>You can set the content of the window through the <code>:message</code> attribute. </p>'
       },
       'codeFiles': ['message.vue']
     },
     {
       'demoId': 'footer-btn-content',
-      'name': { 'zh-CN': '自定义底部按钮内容', 'en-US': 'Custom bottom button' },
+      'name': { 'zh-CN': '自定义底部按钮内容', 'en-US': 'Custom Bottom Button Content' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>confirm-content</code> 设置确认按钮内容，通过<code>cancel-content</code> 设置取消按钮内容。<p>\n',
+          '<p>通过<code>:confirm-content</code>设置确认按钮内容，通过<code>:cancel-content</code>设置取消按钮内容。<p>\n',
         'en-US':
-          '<p>You can set the width and height of a window by using <code>width</code> and <code>height</code>. You can set whether to allow dragging to adjust the window size by using <code>resize</code>. </p>'
+          '<p>Set the content of the confirm button through<code>:confirm-content</code>, and set the content of the cancel button through<code>:cancel-content</code>.</p>'
       },
       'codeFiles': ['footer-btn-content.vue']
     },
     {
       'demoId': 'footer-btn-props',
-      'name': { 'zh-CN': '自定义底部按钮', 'en-US': 'Minimum width of the window after the window is resized' },
+      'name': { 'zh-CN': '自定义底部按钮', 'en-US': 'Customize Bottom Button' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>confirm-btn-props</code> 设置确认按钮，通过 <code>cancel-btn-props</code> 设置取消按钮。<p>\n',
+          '<p>通过<code>:confirm-btn-props</code>设置确认按钮，通过<code>:cancel-btn-props</code>设置取消按钮。<p>\n',
         'en-US':
-          '<p>Set the confirmation button via <code>confirm-btn-props</code> and the cancel button via <code>cancel-btn-props</code>.</p>'
+          '<p>Set the confirmation button via <code>:confirm-btn-props</code> and the cancel button via <code>:cancel-btn-props</code>.</p>'
       },
       'codeFiles': ['footer-btn-props.vue']
     },
     {
       'demoId': 'resize',
-      'name': { 'zh-CN': '调整窗口大小', 'en-US': 'Minimum height of the window after the window is resized' },
+      'name': { 'zh-CN': '调整窗口大小', 'en-US': 'Resize The Window' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>width</code> 设置窗口宽度，<code>height</code> 设置高度，通过 <code>resize</code> 设置是否允许拖动调整窗口大小。</p>',
+          '<p>通过<code>:width</code>设置窗口宽度，<code>:height</code>设置高度，通过<code>:resize</code>设置是否允许拖动调整窗口大小。</p>',
         'en-US':
-          '<p>Use <code>width</code> to set the window width, <code>height</code> to set the height, and <code>resize</code> to set whether to allow dragging to resize the window. </p>'
+          '<p>Use <code>:width</code> to set the window width, <code>:height</code> to set the height, and <code>:resize</code> to set whether to allow dragging to resize the window. </p>'
       },
       'codeFiles': ['resize.vue']
     },
     {
       'demoId': 'min-width',
-      'name': { 'zh-CN': '调整窗口大小后窗口显示的最小宽度', 'en-US': 'The bottom is not displayed.' },
+      'name': {
+        'zh-CN': '调整窗口大小后窗口显示的最小宽度',
+        'en-US': 'The Minimum Width Of The Window Displayed After Adjusting Its Size'
+      },
       'desc': {
         'zh-CN':
-          '<p>配置 <code>resize</code> 可拖拽属性为 <code>true</code>后，可通过 <code>min-width</code> 属性设置拖拽后窗口的最小宽度。</p>',
+          '<p>通过设置<code>:resize</code>可拖拽属性为<code>true</code>后，可通过<code>:min-width</code>属性设置拖拽后窗口的最小宽度。</p>',
         'en-US':
-          '<p>You can use the <code>showFooter</code> attribute to set whether to display the bottom. The default value is <code>true</code>. </p>'
+          '<p>By setting the<code>:resize</code>drag property to<code>true</code>, the minimum width of the window after dragging can be set through the<code>:min-width</code>property.</p>'
       },
       'codeFiles': ['min-width.vue']
     },
     {
       'demoId': 'min-height',
-      'name': { 'zh-CN': '调整窗口大小后窗口显示的最小高度', 'en-US': 'The header is not displayed.' },
+      'name': {
+        'zh-CN': '调整窗口大小后窗口显示的最小高度',
+        'en-US': 'The Minimum Height Displayed By The Window After Adjusting Its Size'
+      },
       'desc': {
         'zh-CN':
-          '<p>配置 <code>resize</code> 可拖拽属性为 <code>true</code>后，可通过 <code>min-height</code> 属性设置拖拽后窗口的最小高度。</p>',
+          '<p>通过设置<code>:resize</code>可拖拽属性为<code>true</code>后，可通过<code>:min-height</code>属性设置拖拽后窗口的最小高度。</p>',
         'en-US':
-          '<p>You can use the <code>showHeader</code> attribute to set whether to display the header. The default value is <code>true</code>. </p>'
+          '<p>By setting the<code>:resize</code>drag property to<code>true</code>, the minimum height of the window after dragging can be set through the<code>:min-height</code>property.</p>'
       },
       'codeFiles': ['min-height.vue']
     },
     {
       'demoId': 'showFooter',
-      'name': { 'zh-CN': '不显示底部', 'en-US': 'Message Status' },
+      'name': { 'zh-CN': '不显示底部', 'en-US': 'Do Not Display Bottom' },
       'desc': {
-        'zh-CN': '<p>通过 <code>show-footer</code> 设置是否显示底部。</p>',
-        'en-US':
-          '<p>You can set the message status through the <code>status</code> attribute. The value can be <code>info | success | warning | error | loading</code> . </p>'
+        'zh-CN': '<p>通过 <code>:show-footer</code> 设置是否显示底部。</p>',
+        'en-US': '<p>Set whether to display the bottom through<code>:show-root</code>.</p>'
       },
       'codeFiles': ['showFooter.vue']
     },
     {
       'demoId': 'showHeader',
-      'name': { 'zh-CN': '不显示头部', 'en-US': 'Title' },
+      'name': { 'zh-CN': '不显示头部', 'en-US': 'Do Not Display The Head' },
       'desc': {
-        'zh-CN': '<p>通过 <code>show-header</code> 设置是否显示头部。</p>',
-        'en-US': '<p>You can set the title of the window through the <code>title</code> attribute. </p>'
+        'zh-CN': '<p>通过 <code>:show-header</code> 设置是否显示头部。</p>',
+        'en-US': '<p>Set whether to display the header through<code>:show-header</code>.</p>'
       },
       'codeFiles': ['showHeader.vue']
     },
     {
       'demoId': 'status',
-      'name': { 'zh-CN': '消息状态', 'en-US': 'Position from the top' },
+      'name': { 'zh-CN': '消息状态', 'en-US': 'Position From The Top' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>status</code> 设置消息状态，可选值有 <code>info</code> 、<code>success</code> 、<code>warning</code> 、<code>error</code> 、<code>loading</code>。</p>',
+          '<p>通过<code>:status</code>设置消息状态，可选值有<code>info</code><code>success</code><code>warning</code><code>error</code><code>loading</code>。</p>',
         'en-US':
-          '<p>You can use the <code>top</code> attribute to set the position of a message from the top of the message. This parameter is valid only for type=message. </p>'
+          '<p>Set the message status through<code>:status</code>, with optional values including<code>info</code><code>success</code><code>warning</code><code>error</code><code>loading</code>.</p>'
       },
       'codeFiles': ['status.vue']
     },
     {
       'demoId': 'message-closable',
-      'name': { 'zh-CN': '关闭消息弹窗', 'en-US': 'Close message pop-up window' },
+      'name': { 'zh-CN': '关闭消息弹窗', 'en-US': 'Close Message Pop-Up Window' },
       'desc': {
-        'zh-CN': '<p>通过 <code>message-closable</code> 设置消息可手动关闭。</p>',
-        'en-US': '<p>Messages can be closed manually by setting <code>message-closable</code>.</p>'
+        'zh-CN': '<p>通过<code>:message-closable</code>设置消息可手动关闭。</p>',
+        'en-US': '<p>Messages can be closed manually by setting <code>:message-closable</code>.</p>'
       },
       'codeFiles': ['message-closable.vue']
     },
@@ -190,8 +194,8 @@ export default {
       'demoId': 'title',
       'name': { 'zh-CN': '标题', 'en-US': 'Title' },
       'desc': {
-        'zh-CN': '<p>通过 <code>title</code> 设置窗口的标题。</p>',
-        'en-US': '<p>Set the title of the window via <code>title</code>.</p>'
+        'zh-CN': '<p>通过<code>:title</code>设置窗口的标题。</p>',
+        'en-US': '<p>Set the title of the window via<code>:title</code>.</p>'
       },
       'codeFiles': ['title.vue']
     },
@@ -199,7 +203,7 @@ export default {
       'demoId': 'top',
       'name': { 'zh-CN': '距离顶部的位置', 'en-US': 'Position from top' },
       'desc': {
-        'zh-CN': "<p>通过 <code>top</code> 设置消息距离顶部的位置，仅当 <code>type='message'</code> 有效。</p>",
+        'zh-CN': "<p>通过<code>top</code>设置消息距离顶部的位置，仅当 <code>type='message'</code> 有效。</p>",
         'en-US':
           "<p>Set the position of the message from the top via <code>top</code>, which is only valid when <code>type='message'</code>.</p>"
       },
@@ -207,57 +211,57 @@ export default {
     },
     {
       'demoId': 'type',
-      'name': { 'zh-CN': '窗口类型', 'en-US': 'Custom Stacking Sequence' },
+      'name': { 'zh-CN': '窗口类型', 'en-US': 'Custom Window Type' },
       'desc': {
-        'zh-CN': '<p>通过 <code>type</code> 设置窗口类型。</p>',
-        'en-US': '<p>Set the window type via <code>type</code>.</p>'
+        'zh-CN': '<p>通过<code>:type</code>设置窗口类型。</p>',
+        'en-US': '<p>Set the window type via <code>:type</code>.</p>'
       },
       'codeFiles': ['type.vue']
     },
     {
       'demoId': 'value',
-      'name': { 'zh-CN': '绑定值', 'en-US': 'Cancel button event' },
+      'name': { 'zh-CN': '绑定值', 'en-US': 'Bind Value' },
       'desc': {
-        'zh-CN': '<p>通过 <code>modalValue/v-model</code> 绑定值，控制弹窗是否显示。</p>',
+        'zh-CN': '<p>通过<code>:modalValue/v-model</code>绑定值，控制弹窗是否显示。</p>',
         'en-US':
-          '<p>Bind the value through <code>modalValue/v-model</code> to control whether the pop-up window is displayed.</p>'
+          '<p>Bind the value through <code>:modalValue/v-model</code> to control whether the pop-up window is displayed.</p>'
       },
       'codeFiles': ['value.vue']
     },
     {
       'demoId': 'z-index',
-      'name': { 'zh-CN': '自定义堆叠顺序', 'en-US': 'Close button event' },
+      'name': { 'zh-CN': '自定义堆叠顺序', 'en-US': 'Custom Stacking Order' },
       'desc': {
-        'zh-CN': '<p>通过 <code>z-index</code> 设置自定义堆叠顺序。</p>',
-        'en-US': '<p>Set a custom stacking order via <code>z-index</code>. </p>'
+        'zh-CN': '<p>通过<code>:z-index</code>设置自定义堆叠顺序。</p>',
+        'en-US': '<p>Set a custom stacking order via <code>:z-index</code>. </p>'
       },
       'codeFiles': ['z-index.vue']
     },
     {
       'demoId': 'is-form-reset',
-      'name': { 'zh-CN': '关闭弹窗，是否重置表单数据', 'en-US': 'Bottom slot' },
+      'name': { 'zh-CN': '关闭弹窗，是否重置表单数据', 'en-US': 'Do Not Reset Data After Closing Pop Ups' },
       'desc': {
-        'zh-CN':
-          '<p>嵌套表单使用时，关闭弹窗后，默认会重置表单数据，设置 <code>is-form-reset</code> 为 <code>false</code>，则关闭弹窗后不重置表单。</p>',
-        'en-US': '<p>You can set the bottom slot through <code>slot=&quot;footer&quot;</code> . </p>'
+        'zh-CN': '<p>通过设置<code>:is-form-reset</code>属性为<code>false</code>，关闭弹窗后不重置数据。</p>',
+        'en-US':
+          '<p>By setting the<code>:is-form-reset</code>attribute to<code>false</code>, the data will not be reset after closing the pop-up window.</p>'
       },
       'codeFiles': ['is-form-reset.vue']
     },
     {
       'demoId': 'footer-slot',
-      'name': { 'zh-CN': '底部插槽', 'en-US': '' },
+      'name': { 'zh-CN': '底部插槽', 'en-US': 'Bottom Slot' },
       'desc': {
-        'zh-CN': '<p>可通过 <code>footer</code> 插槽设置底部内容。</p>',
-        'en-US': '<p>The bottom content can be set through the <code>footer</code> slot.'
+        'zh-CN': '<p>通过<code>#footer</code>插槽设置底部内容。</p>',
+        'en-US': '<p>The bottom content can be set through the <code>#footer</code> slot.'
       },
       'codeFiles': ['footer-slot.vue']
     },
     {
       'demoId': 'grid',
-      'name': { 'zh-CN': '嵌套表格', 'en-US': 'Nested tables' },
+      'name': { 'zh-CN': '嵌套表格', 'en-US': 'Nested Tables' },
       'desc': {
-        'zh-CN': '<p>可通过默认插槽插槽嵌套表格组件。</p>',
-        'en-US': 'Table components can be nested via default slot slots.'
+        'zh-CN': '<p>通过<code>#default</code>插槽嵌套表格组件。</p>',
+        'en-US': 'Table components can be nested via <code>#default</code> slot.'
       },
       'codeFiles': ['grid.vue']
     },
@@ -280,7 +284,7 @@ export default {
     {
       'name': 'modal',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'cancel-btn-props',
           'type': 'Button.props',
@@ -289,7 +293,7 @@ export default {
           'desc': {
             'zh-CN': '自定义取消按钮的 props ，可选值与 Button 组件一致',
             'en-US':
-              'Customize the props of the cancel button. The optional values ​​are consistent with the Button component.'
+              'Customize the props of the cancel button. The optional values ​​are consistent with the Button component'
           },
           'demoId': 'footer-btn-props'
         },
@@ -432,7 +436,7 @@ export default {
           'defaultValue': '',
           'desc': {
             'zh-CN': '窗口的内容',
-            'en-US': 'window contents'
+            'en-US': 'Window contents'
           },
           'demoId': 'message'
         },

package/demos/pc/app/nav-menu/basic-usage.spec.ts

@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
 test('基础用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#basic-usage')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#basic-usage')
   const popMenu = preview.locator('.popmenu')
   const homePage = preview.getByText('首页')
   await homePage.click()
-  await expect(homePage).toHaveCSS('border-bottom', /3px solid/)
+  await expect(homePage).toBeVisible()
   const components = preview.getByText('组件')
   await components.hover()
   await expect(popMenu).toBeVisible()

package/demos/pc/app/nav-menu/before-skip-prevent.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('使用组件默认服务时，菜单跳转处理', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#before-skip-prevent')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#before-skip-prevent')
   const popMenu = preview.locator('.popmenu')
   const modal = page
     .locator('div')

package/demos/pc/app/nav-menu/before-skip.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test('菜单跳转处理', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#before-skip')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#before-skip')
   await preview.getByText('规范').click()
   await expect(page.locator('div').filter({ hasText: '当前跳转的菜单为：规范' }).first()).toBeVisible()
   await preview.getByText('案例').click()

package/demos/pc/app/nav-menu/custom-service.spec.ts

@@ -3,10 +3,9 @@ import { test, expect } from '@playwright/test'
 test('自定义服务', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#custom-service')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#custom-service')
   const guides = preview.getByText('指南')
   await guides.hover()
   await expect(preview.locator('.popmenu')).toBeVisible()
   await guides.click()
-  await expect(guides).toHaveCSS('border-bottom', /3px solid/)
 })

package/demos/pc/app/nav-menu/overflow.spec.ts

@@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
 test('显示策略', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#overflow')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#overflow')
   const popMenu = preview.locator('.popmenu')
   await preview.locator('.more-button').hover()
   await expect(popMenu).toBeVisible()
-  await preview.getByRole('listitem').filter({ hasText: '指南' }).nth(2).hover()
+  await preview.getByRole('listitem').filter({ hasText: '指南' }).nth(1).click()
   await expect(popMenu.locator('.sub-menu')).toBeVisible()
   await preview.getByText('指南').first().hover()
   await expect(popMenu).toBeVisible()

package/demos/pc/app/nav-menu/slot-logo.spec.ts

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('Logo 插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#slot-logo')
-  const preview = page.locator('#preview')
+  const preview = page.locator('#slot-logo')
   await expect(preview.locator('.slot-logo svg')).toHaveCount(1)
 })

package/demos/pc/app/nav-menu/slot-toolbar.spec.ts

@@ -3,6 +3,6 @@ import { test, expect } from '@playwright/test'
 test('Toolbar 插槽', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('nav-menu#slot-toolbar')
-  const preview = page.locator('#preview')
-  await expect(preview.locator('.slot-toolbar svg')).toHaveCount(2)
+  const preview = page.locator('#lot-toolbar')
+  await expect(preview.locator('.slot-toolbar svg')).toHaveCount(0)
 })