@opentiny/vue-docs 2.1.7 → 2.1.8

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

@@ -5,136 +5,119 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
-      'codeFiles': ['basic-usage.vue']
-    },
-    {
-      'demoId': 'data-source',
-      'name': { 'zh-CN': '数据源', 'en-US': 'Data Source' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>data</code> 属性设置里程碑数据。</p>\n',
-        'en-US': '<p>Set milestone data through the <code>data</code> attribute. </p>\n'
-      },
-      'codeFiles': ['data-source.vue']
-    },
-    {
-      'demoId': 'data-field-mapping',
-      'name': { 'zh-CN': '数据字段映射', 'en-US': 'Data Field Mapping' },
       'desc': {
         'zh-CN':
-          '<div class="tip custom-block"><p class="custom-block-title">数据字段映射属性说明</p>\n<p><code>completed-field</code>：设置里程碑完成状态对应的取值，默认为 <code>completed</code>\n<code>flag-content-field</code>：设置节点旗子数据中描述对应的字段名，默认为 <code>content</code>\n<code>flag-field</code>：设置节点信息中旗子数据所在字段名，默认为 <code>flags</code>\n<code>flag-name-field</code>：设置节点旗子数据中名称对应的字段名，默认为 <code>name</code>\n<code>flag-status-field</code>：设置节点旗子数据中状态对应的字段名，默认为 <code>status</code>\n<code>name-field</code>：设置节点信息中名称对应的字段名，默认为 <code>name</code>\n<code>status-field</code>：设置数据状态对应的字段名，默认为 <code>status</code>\n<code>time-field</code>：设置节点时间信息对应的字段名，默认为 <code>time</code></p>\n</div>\n',
+          '通过<code>data</code>设置每个节点的标题、日期、和状态；<code>milestones-status</code>设置每种状态对应的颜色值；前者的<code>status</code>字段对应后者的键值。',
         'en-US':
-          '<div class="tip custom-block"><p class="custom-block-title"> Data Field Mapping Attribute Description </p>\n<p><code>completed-field</code>: Set the value corresponding to the milestone completion status. The default value is <code>completed</code>\n<code>flag-content-field</code>: Set the field name corresponding to the description in the node flag data. The default value is <code>content</code>\n<code>flag-field</code>: Set the field name of the node flag data. The default value is <code>flags</code>\n<code>flag-name-field</code>. Set the field name corresponding to the name in the node flag data. The default value is <code>name</code>\n<code>flag-status-field</code>: Set the field name corresponding to the status in the node flag data. The default value is <code>status</code>\n<code>name-field</code>: Set the field name corresponding to the name in the node information. The default value is <code>name</code>\n<code>status-field</code>: Set the field name corresponding to the data status. The default value is <code>status</code>\n<code>time-field</code>. Field name corresponding to the node time information. The default value is <code>time</code></p>\n</div>\n'
+          'Set the title, date, and status of each node through<code>data</code>; <code>Milestones status</code>Set the color values corresponding to each state; The<code>status</code>field of the former corresponds to the key value of the latter.'
       },
-      'codeFiles': ['data-field-mapping.vue']
+      'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'flag-before',
-      'name': { 'zh-CN': '旗帜数据来源前面节点', 'en-US': 'Flag data source node' },
+      'name': { 'zh-CN': '旗子数据来源', 'en-US': 'Flag data source' },
       'desc': {
         'zh-CN':
-          '<p>通过 <code>flag-before</code> 可设置里程碑上活动（即旗子）上的数据从前面还是后面节点上获取，默认为 <code>false</code> 取后面节点上的数据。</p>\n',
+          '通过<code>flag-before</code>设置旗子的数据来源，是来自前面还是后面的节点，默认为<code>false</code>取后面节点上的数据。',
         'en-US':
-          '<p>You can use <code>flag-before</code> to set whether the data of the activity (i.e. flag) on the milestone is obtained from the previous node or the subsequent node. The default value is <code>false</code> to obtain the data of the subsequent node. </p>\n'
+          'Set the data source of the flag through<code>flag-before</code>, whether it comes from the preceding or following nodes. The default value is<code>false</code>to retrieve the data from the following nodes.'
       },
       'codeFiles': ['flag-before.vue']
     },
     {
       'demoId': 'line-style',
-      'name': { 'zh-CN': '进度条颜色', 'en-US': 'Progress bar color' },
+      'name': { 'zh-CN': '线条颜色和间距', 'en-US': 'Line color and Space' },
       'desc': {
-        'zh-CN': '<p>通过 <code>line-style</code> 属性设置线条颜色。</p>\n',
-        'en-US': '<p>Sets the line color through the <code>line-style</code> attribute. </p>\n'
+        'zh-CN': '通过<code>line-style</code>设置线条颜色，<code>space</code>设置节点间距。',
+        'en-US': 'Set the line color and node spacing through<code>line-style</code>.'
       },
       'codeFiles': ['line-style.vue']
     },
-    {
-      'demoId': 'milestones-status',
-      'name': { 'zh-CN': '状态与颜色对应关系', 'en-US': 'Mapping Between Status and Color' },
-      'desc': {
-        'zh-CN':
-          '<p><code>milestones-status</code> 属性对象中，键对应 <code>data</code> 属性的数据中的 <code>status</code> 字段，然后控制不同状态与颜色的对应关系。</p>\n',
-        'en-US':
-          'In the <p><code>milestones-status</code> attribute object, the key corresponds to the <code>status</code> field in the data of the <code>data</code> attribute, and then controls the mapping between different states and colors. </p>\n'
-      },
-      'codeFiles': ['milestones-status.vue']
-    },
     {
       'demoId': 'show-number',
       'name': {
-        'zh-CN': '取消未完成状态序号显示',
-        'en-US': 'Cancel the display of the sequence number in the unfinished state.'
+        'zh-CN': '序号',
+        'en-US': 'Sequence number'
       },
       'desc': {
-        'zh-CN': '<p>设置 <code>show-number</code> 为 false 后，里程碑未完成的节点上将不显示序号，默认为 true 。</p>\n',
+        'zh-CN':
+          '通过<code>show-number</code>设置未完成状态的节点是否显示序号；默认为<code>true</code>显示；<code>start</code>设置节点的序号起始值，默认为<code>-1</code>。',
         'en-US':
-          '<p>After <code>show-number</code> is set to false, the sequence number is not displayed on the node where the milestone is not completed. The default value is true. </p>\n'
+          'Set whether nodes in incomplete status display serial numbers through<code>show-number</code>; Default to display as<code>true</code>;<code>start</code>Set the starting value of the nodes sequence number, which defaults to<code>-1</code>.'
       },
       'codeFiles': ['show-number.vue']
     },
     {
       'demoId': 'solid-style',
-      'name': { 'zh-CN': '已完成节点实心显示', 'en-US': 'Completed node solid display' },
+      'name': { 'zh-CN': '实心显示', 'en-US': 'Completed node solid display' },
       'desc': {
         'zh-CN':
-          '<p>通过设置 <code>solid</code> 属性为 true 可设置已经完成节点显示为实心，且光晕不透明，默认为 false 。</p>\n',
+          '通过<code>solid</code>设置已完成状态的节点是否实心显示，实心显示则光晕不透明；默认为<code>false</code>不显示。',
         'en-US':
-          '<p>You can set the <code>solid</code> attribute to true to set the completed node to be displayed as solid and the halo is opaque. The default value is false. </p>\n'
+          'Set whether nodes in the completed state are displayed as solid through<code>solid</code>, and if solid is displayed, the halo is opaque; The default is not displayed as<code>false</code>.'
       },
       'codeFiles': ['solid-style.vue']
     },
     {
-      'demoId': 'milestone-space',
-      'name': { 'zh-CN': '宽度', 'en-US': 'Width' },
-      'desc': {
-        'zh-CN': '<p>通过 <code>space</code> 属性设置步骤条的宽度。</p>\n',
-        'en-US': '<p>Use the <code>space</code> attribute to set the width of the step bar. </p>\n'
-      },
-      'codeFiles': ['milestone-space.vue']
-    },
-    {
-      'demoId': 'start-index',
-      'name': { 'zh-CN': '序号起始值', 'en-US': 'Start sequence number' },
+      'demoId': 'data-field-mapping',
+      'name': { 'zh-CN': '数据字段映射', 'en-US': 'Data Field Mapping' },
       'desc': {
-        'zh-CN': '<p>通过 <code>start</code> 属性设置里程碑节点的序号起始值，默认为 -1 。</p>\n',
-        'en-US':
-          '<p>Set the start sequence number of the milestone node through the <code>start</code> attribute. The default value is - 1. </p>\n'
+        'zh-CN': `自定义<code>data</code>属性的键名和键值：<br/>
+          <div class="tip custom-block"><p class="custom-block-title">
+          通过<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/>
+          <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/>
+          <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>`
       },
-      'codeFiles': ['start-index.vue']
+      'codeFiles': ['data-field-mapping.vue']
     },
     {
       'demoId': 'custom-icon-slot',
-      'name': { 'zh-CN': '自定义节点图标', 'en-US': 'Custom Node Icons' },
+      'name': { 'zh-CN': '定义图标', 'en-US': 'Custom Node Icons' },
       'desc': {
-        'zh-CN': '<p>通过 <code>icon</code> 作用域插槽可自定义图标。</p>\n',
-        'en-US': '<p>The icon can be customized through the <code>icon</code>scope slot. </p>\n'
+        'zh-CN': '通过<code>icon</code>作用域插槽自定义节点的图标。',
+        'en-US': 'Customize the node icon through the<code>icon</code>scope slot.'
       },
       'codeFiles': ['custom-icon-slot.vue']
     },
     {
       'demoId': 'custom-bottom',
-      'name': { 'zh-CN': '自定义节点下方内容', 'en-US': 'Content under a customized node' },
+      'name': { 'zh-CN': '定义下方内容', 'en-US': 'Content under a customized node' },
       'desc': {
-        'zh-CN': '<p>通过 <code>bottom</code> 作用域插槽可自定义节点下方的内容。</p>\n',
-        'en-US': '<p>You can customize the content below a node through the <code>bottom</code> scope slot. </p>\n'
+        'zh-CN': '通过<code>bottom</code>作用域插槽自定义节点下方的内容。',
+        'en-US': 'Customize the content below the node through the<code>bottom</code>scope slot.'
       },
       'codeFiles': ['custom-bottom.vue']
     },
     {
       'demoId': 'custom-top',
-      'name': { 'zh-CN': '自定义节点上方内容', 'en-US': 'Content above the customized node' },
+      'name': { 'zh-CN': '定义上方内容', 'en-US': 'Content above the customized node' },
       'desc': {
-        'zh-CN': '<p>通过 <code>top</code> 作用域插槽可自定义节点上方的内容。</p>\n',
-        'en-US': '<p>The <code>top</code> scope slot allows you to customize the content above the node. </p>\n'
+        'zh-CN': '通过<code>top</code>作用域插槽自定义节点上方的内容。',
+        'en-US': 'Customize the content above the node through the<code>top</code>scope slot.'
       },
       'codeFiles': ['custom-top.vue']
     },
     {
       'demoId': 'custom-flag',
-      'name': { 'zh-CN': '自定义旗帜内容', 'en-US': 'Custom Flag Content' },
+      'name': { 'zh-CN': '定义旗帜内容', 'en-US': 'Custom Flag Content' },
       'desc': {
-        'zh-CN': '<p>通过 <code>flag</code> 作用域插槽可自定义节点旗帜的内容。</p>\n',
-        'en-US': '<p>You can customize the content of the node flag through the <code>flag</code> scope slot. </p>\n'
+        'zh-CN': '通过<code>flag</code>作用域插槽自定义节点旗子的内容。',
+        'en-US': 'Customize the content of node flags through the<code>flag</code>scope slot.'
       },
       'codeFiles': ['custom-flag.vue']
     },
@@ -142,10 +125,9 @@ export default {
       'demoId': 'milestone-events',
       'name': { 'zh-CN': '事件', 'en-US': 'Event' },
       'desc': {
-        'zh-CN':
-          '<p>单击里程碑节点时触发 <code>click</code> 事件，参数（index:节点索引, node：节点数据信息）。单击里程碑旗帜时触发 <code>flag-click</code> 事件，参数（index:节点内旗子的索引, node：节点上旗子的数据信息）。</p>\n',
+        'zh-CN': '通过<code>click</code>监听单击节点事件，<code>flag-click</code>监听单击旗子事件。',
         'en-US':
-          '<p>The <code>click</code> event is triggered when a milestone node is clicked. Parameter: (index: node index; node: node data information). The <code>flag-click</code> event is triggered when a milestone flag is clicked. (index: index of the flag on the node; node: data information of the flag on the node). </p>\n'
+          'Listen for click node events through<code>click</code>, and<code>flag-click</code>listen for click flag sub events.'
       },
       'codeFiles': ['milestone-events.vue']
     }
@@ -154,131 +136,133 @@ export default {
     {
       'name': 'milestone',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'completed-field',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 completed',
+          'defaultValue': 'completed',
           'desc': {
-            'zh-CN': "设置里程碑完成状态对应的取值，默认为 'completed'",
-            'en-US': "Set the milestone completion status. The default value is'completed'"
+            'zh-CN': '设置节点完成状态对应的键值',
+            'en-US': 'Set the key values corresponding to the node completion status'
           },
           'demoId': 'data-field-mapping'
         },
         {
           'name': 'data',
-          'type': 'object , Array',
+          'type': 'object | array',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '设置步骤条的数据 。;设置步骤条的数据 。',
-            'en-US': 'Set the step bar data. ;Set the data of the step bar.'
+            'zh-CN': '设置步骤条的数据',
+            'en-US': 'Set the step bar data'
           },
-          'demoId': 'data-source'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'flag-before',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
           'desc': {
-            'zh-CN': '设置里程碑上活动即旗子上的数据从前面还是后面节点上获取，默认为 false 取后面节点上的数据。',
+            'zh-CN': '设置旗子的数据是取自前面还是后面的节点，默认取后面节点上的数据',
             'en-US':
-              'Set whether the data on the flag of an activity on a milestone is obtained from the previous node or the next node. The default value is false.'
+              'Set whether the flag data is taken from the preceding or following nodes, and default to taking data from the following nodes'
           },
           'demoId': 'flag-before'
         },
         {
           'name': 'flag-content-field',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 content',
+          'defaultValue': 'content',
           'desc': {
-            'zh-CN': "设置节点旗子数据中描述对应的字段名，默认为 'content'",
-            'en-US':
-              "Set the field name corresponding to the description in the node flag data. The default value is'content'"
+            'zh-CN': '设置旗子内容描述部分对应的键名',
+            'en-US': 'Set the key name corresponding to the flag content description section'
           },
           'demoId': 'data-field-mapping'
         },
         {
-          'name': 'flag-status-field',
+          'name': 'flag-field',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 status',
+          'defaultValue': 'flags',
           'desc': {
-            'zh-CN': "设置节点旗子数据中状态对应的字段名，默认为 'status'",
-            'en-US': "Name of the field corresponding to the status in the node flag data. The default value is'status'"
+            'zh-CN': '设置旗子信息数组对应的键名',
+            'en-US': 'Set the key name corresponding to the flag information array'
           },
           'demoId': 'data-field-mapping'
         },
         {
-          'name': 'flag-field',
+          'name': 'flag-name-field',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 flags',
+          'defaultValue': 'name',
           'desc': {
-            'zh-CN': "设置节点信息中旗子数据所在字段名，默认为 'flags'",
-            'en-US':
-              'Set the name of the field where the flag data is located in the node information. The default value is flags.'
+            'zh-CN': '设置旗子标题对应的键名',
+            'en-US': 'Set the key name corresponding to the flag title'
           },
           'demoId': 'data-field-mapping'
         },
         {
-          'name': 'flag-name-field',
+          'name': 'flag-status-field',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 name',
+          'defaultValue': 'status',
           'desc': {
-            'zh-CN': "设置节点旗子数据中名称对应的字段名，默认为 'name'",
-            'en-US': "Set the field name corresponding to the name in the node flag data. The default value is'name'"
+            'zh-CN': '设置旗子状态对应的键名',
+            'en-US': 'Set the key name corresponding to the flag state'
           },
           'demoId': 'data-field-mapping'
         },
         {
           'name': 'line-style',
-          'type': 'string , number',
-          'defaultValue': '该属性的默认值为 1',
+          'type': 'number | string',
+          'defaultValue': '1',
           'desc': {
-            'zh-CN':
-              '在里程碑模式下，设置线条颜色取值模式，默认为1，采用两种颜色区分完成与未完成状态，完成状态的线条颜色与milestonesStatus定义的完成颜色一致。\n设置为 2 时线条颜色根随节点状态。\n设置为 16进制的色值 如：#1890ff 时，线条不区分状态，全部为所设置的颜色。',
-            'en-US':
-              'In milestone mode, set the line color value mode. The default value is 1. Two colors are used to distinguish the completed state from the uncompleted state. The line color of the completed state is the same as the completion color defined by milestonesStatus. \nIf this parameter is set to 2, the line color is based on the node status. \nIf the color value is set to a hexadecimal value, for example, #1890ff, the line color is the configured color regardless of status.'
+            'zh-CN': `线条颜色取值模式为数字时，只有1和2可选；如果为字符串则需传入 16 进制颜色值<br />
+              设置为数字 1 时只有完成与未完成两种状态的线条颜色，完成状态的线条颜色与 milestones-status 定义的 completed 状态的颜色一致<br />
+              设置为数字 2 时线条颜色根随节点状态颜色<br />
+              当设置为字符串形式的 16 进制色值时，如：#1890FF 时，线条不区分状态，全部统一为所设置的颜色`,
+            'en-US': `When the line color value mode is numeric, only 1 and 2 can be selected; If it is a string, the hexadecimal color value needs to be passed in<br/>
+              When set to the number 1, there are only two types of line colors: complete and incomplete. The color of the completed state line is consistent with the color of the completed state defined by milestone status<br/>
+              When set to number 2, the root color of the line follows the node state color<br/>
+              When set to a hexadecimal color value in string form, such as # 1890FF, the lines do not differentiate between states and are all unified to the set color`
           },
           'demoId': 'line-style'
         },
         {
           'name': 'milestones-status',
-          'type': 'object',
-          'defaultValue': '该属性的默认值为 Function',
+          'type': 'IStatus',
+          'typeAnchorName': 'IStatus',
+          'defaultValue': '',
           'desc': {
-            'zh-CN': "定义里程碑的状态与颜色对应关系，颜色取值必需为 16进制 如：{completed: '#1890FF'}",
+            'zh-CN': '定义状态与颜色对应关系，颜色取值须是 16 进制颜色值或组件库的主题变量',
             'en-US':
-              "Define the mapping between the milestone status and color. The color must be a hexadecimal number, for example, {completed:'#1890FF'}"
+              'Define the correspondence between state and color, and the color value must be a hexadecimal color value or a theme variable from the component library'
           },
-          'demoId': 'milestones-status'
+          'demoId': 'basic-usage'
         },
         {
           'name': 'name-field',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 name',
+          'defaultValue': 'name',
           'desc': {
-            'zh-CN': "设置节点信息中名称对应的字段名，默认为 'name'",
-            'en-US': "Set the field name corresponding to the name in the node information. The default value is'name'"
+            'zh-CN': '设置节点名称对应的键名',
+            'en-US': 'Set the key name corresponding to the node name'
           },
           'demoId': 'data-field-mapping'
         },
         {
           'name': 'show-number',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 true',
+          'defaultValue': 'true',
           'desc': {
-            'zh-CN': '设置未完成的状态是否显示序号，默认为 true',
-            'en-US': 'Whether to display sequence numbers for unfinished states. The default value is true.'
+            'zh-CN': '设置未完成状态的节点是否显示序号',
+            'en-US': 'Set whether nodes in incomplete status display serial numbers'
           },
           'demoId': 'show-number'
         },
         {
           'name': 'solid',
           'type': 'boolean',
-          'defaultValue': '该属性的默认值为 false',
+          'defaultValue': 'false',
           'desc': {
-            'zh-CN': '在里程碑模式下，设置已经完成节点显示为实心，且光晕不透明，默认为 false',
-            'en-US':
-              'In milestone mode, set the completed node to be displayed as solid and the halo is opaque. The default value is false.'
+            'zh-CN': '在里程碑模式下，设置已经完成节点显示为实心，且光晕不透明',
+            'en-US': 'In milestone mode, set the completed node to be displayed as solid and the halo is opaque'
           },
           'demoId': 'solid-style'
         },
@@ -286,36 +270,39 @@ export default {
           'name': 'space',
           'type': 'number',
           'defaultValue': '',
-          'desc': { 'zh-CN': '设置步骤条的宽度。', 'en-US': 'Set the width of the step bar.' },
-          'demoId': 'milestone-space'
+          'desc': {
+            'zh-CN': '设置相邻节点的间距，即节点间线条的长度',
+            'en-US': 'Set the spacing between adjacent nodes, i.e. the length of lines between nodes'
+          },
+          'demoId': 'line-style'
         },
         {
           'name': 'start',
           'type': 'number',
-          'defaultValue': '该属性的默认值为 -1',
+          'defaultValue': '-1',
           'desc': {
-            'zh-CN': '设置步骤条序号起始值，默认为 -1 。',
-            'en-US': 'Set the start step sequence number. The default value is -1.'
+            'zh-CN': '设置节点的序号起始值，从首个节点开始计算',
+            'en-US': 'Set the starting value of the nodes sequence number, starting from the first node'
           },
-          'demoId': 'start-index'
+          'demoId': 'show-number'
         },
         {
           'name': 'status-field',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 status',
+          'defaultValue': 'status',
           'desc': {
-            'zh-CN': "设置数据状态对应的字段名，默认为 'status'",
-            'en-US': "Name of the field corresponding to the data status. The default value is'status'"
+            'zh-CN': '设置节点状态对应的键名',
+            'en-US': 'Set the key name corresponding to the node state'
           },
           'demoId': 'data-field-mapping'
         },
         {
           'name': 'time-field',
           'type': 'string',
-          'defaultValue': '该属性的默认值为 time',
+          'defaultValue': 'time',
           'desc': {
-            'zh-CN': "设置节点时间信息对应的字段名，默认为 'time'",
-            'en-US': "Name of the field corresponding to the node time information. The default value is'time'"
+            'zh-CN': '设置节点时间信息对应的键名',
+            'en-US': 'Set the key name corresponding to node time information'
           },
           'demoId': 'data-field-mapping'
         }
@@ -323,7 +310,7 @@ export default {
       'events': [
         {
           'name': 'click',
-          'type': '',
+          'type': '(index: number, node: object) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '节点的点击事件，参数（index:节点索引, node：节点数据信息）',
@@ -333,7 +320,7 @@ export default {
         },
         {
           'name': 'flagclick',
-          'type': '',
+          'type': '(index: number, node: object) => void',
           'defaultValue': '',
           'desc': {
             'zh-CN': '[deprecated v3.5.0废弃，v3.17.0移除；移除原因：命名规范，建议使用flag-click代替]',
@@ -344,23 +331,22 @@ export default {
         },
         {
           'name': 'flag-click',
-          'type': '',
+          'type': '(index: number, node: object) => void',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '里程碑模式下，活动旗子的点击事件，参数（index:节点内旗子的索引, node：节点上旗子的数据信息）',
-            'en-US':
-              'In milestone mode, this parameter indicates the click event of the activity flag. (index: index of the flag on the node; node: data information of the flag on the node)'
+            'zh-CN': '旗子的点击事件，参数（index:旗子索引, node：旗子数据信息）',
+            'en-US': 'Flag click event, parameters (index: flag index, node: data information of flag)'
           },
           'demoId': 'milestone-events'
         }
       ],
       'slots': [
         {
-          'name': 'top',
+          'name': 'bottom',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '节点上方内容', 'en-US': 'Content above the node' },
-          'demoId': 'custom-top'
+          'desc': { 'zh-CN': '节点下方内容', 'en-US': 'Content under a node' },
+          'demoId': 'custom-bottom'
         },
         {
           'name': 'flag',
@@ -370,20 +356,34 @@ export default {
           'demoId': 'custom-flag'
         },
         {
-          'name': 'bottom',
+          'name': 'icon',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '节点下方内容', 'en-US': 'Content under a node' },
-          'demoId': 'custom-bottom'
+          'desc': { 'zh-CN': '节点图标', 'en-US': 'Node icon' },
+          'demoId': 'custom-icon-slot'
         },
         {
-          'name': 'icon',
+          'name': 'top',
           'type': '',
           'defaultValue': '',
-          'desc': { 'zh-CN': '节点图标', 'en-US': 'Node icon' },
-          'demoId': 'custom-icon-slot'
+          'desc': { 'zh-CN': '节点上方内容', 'en-US': 'Content above the node' },
+          'demoId': 'custom-top'
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IStatus',
+      type: 'interface',
+      code: `
+interface IStatus {
+  completed?: string // 可通过completed-field自定义completed键名
+  doing: string
+  back: string
+  end: string
+  cancel: string
+}`
+    }
   ]
 }

package/demos/pc/app/modal/base.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('基本用法', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/modal/base')
+  await page.goto('modal#base')
 
   // 基本提示框
   const modal = page.locator('.tiny-modal.type__alert')

package/demos/pc/app/modal/cancel-event.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('取消事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/modal/cancel-event')
+  await page.goto('modal#cancel-event')
 
   const modal = page.locator('.tiny-modal').filter({ hasText: 'test' })
   await page.getByRole('button', { name: '点击取消按钮时触发事件' }).click()

package/demos/pc/app/modal/close-event.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('关闭按钮事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/modal/close-event')
+  await page.goto('modal#close-event')
 
   const modal = page.locator('.tiny-modal').filter({ hasText: 'test' })
   await page.getByRole('button', { name: '点击关闭按钮时触发事件' }).click()

package/demos/pc/app/modal/confirm-event.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('确认按钮事件', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/modal/confirm-event')
+  await page.goto('modal#confirm-event')
 
   const modal = page.locator('.tiny-modal').filter({ hasText: 'test' })
   await page.getByRole('button', { name: '点击确定按钮触发事件' }).click()

package/demos/pc/app/modal/duration.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('自动关闭延时', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/modal/duration')
+  await page.goto('modal#duration')
 
   const modal = page.locator('.tiny-modal')
   await page.getByRole('button', { name: '默认3000ms后自动关闭提示框' }).click()

package/demos/pc/app/modal/esc-closable.spec.ts

@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test'
 
 test('按 Esc 键关闭弹出框', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('http://localhost:7130/pc/modal/esc-closable')
+  await page.goto('modal#esc-closable')
 
   const modal = page.locator('.tiny-modal.type__alert')
   await page.getByRole('button', { name: '按 Esc 键可以关闭弹出框' }).click()

package/demos/pc/app/modal/footer-btn-content.spec.ts

@@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
 test.describe('自定义底部按钮文本', () => {
   test('自定义确定按钮文本', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('http://localhost:7130/pc/modal/footer-btn-content')
+    await page.goto('modal#footer-btn-content')
 
     const modal = page.locator('.tiny-modal')
     const confirmBtn1 = modal.locator('.tiny-modal__footer .tiny-button--primary').nth(1)
@@ -19,7 +19,7 @@ test.describe('自定义底部按钮文本', () => {
 
   test('自定义取消按钮文本', async ({ page }) => {
     page.on('pageerror', (exception) => expect(exception).toBeNull())
-    await page.goto('http://localhost:7130/pc/modal/footer-btn-content')
+    await page.goto('modal#footer-btn-content')
 
     const modal = page.locator('.tiny-modal')
     const cancelBtn1 = modal.locator('.tiny-modal__footer .tiny-button--default').nth(1)