From 9065b867aa9c8cd4a8e6da9d99957dc04143968c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E6=80=A1=E6=9E=97?= <huangyilin16@qq.com>
Date: Thu, 7 Dec 2023 09:35:53 +0800
Subject: [PATCH] Fix some bugs of demo (#1037)

* fix(docs): fixed some bugs of demo

* fix(steps): Optimized steps docs

* fix(timeline): [time-line] Optimized timeline api docs

* fix(tree-menu): [tree-menu] Optimized treeMenu docs

* fix(tree-menu): [tree-menu] ellipse props did not work
---
 .../pc/app/steps/click-composition-api.vue    |  1 -
 .../app/steps/node-status-composition-api.vue |  2 +-
 .../sites/demos/pc/app/steps/node-status.vue  |  2 +-
 .../steps/normal-steps-composition-api.vue    |  2 +-
 .../sites/demos/pc/app/steps/normal-steps.vue |  2 +-
 .../app/steps/only-number-composition-api.vue |  2 +-
 .../sites/demos/pc/app/steps/only-number.vue  |  2 +-
 .../steps/show-divider-composition-api.vue    |  2 +-
 .../sites/demos/pc/app/steps/show-divider.vue |  2 +-
 .../pc/app/steps/size-composition-api.vue     | 15 ++++----
 examples/sites/demos/pc/app/steps/size.vue    |  8 ++---
 .../slot-active-node-desc-composition-api.vue |  4 ++-
 .../pc/app/steps/slot-active-node-desc.vue    |  4 ++-
 .../slot-description-composition-api.vue      | 12 +++----
 .../demos/pc/app/steps/slot-description.vue   | 10 +++---
 .../app/steps/slot-item-composition-api.vue   |  1 -
 .../sites/demos/pc/app/steps/slot-item.vue    |  1 -
 .../steps/text-position-composition-api.vue   |  2 +-
 .../demos/pc/app/steps/text-position.vue      |  2 +-
 .../sites/demos/pc/app/steps/webdoc/steps.js  | 35 ++++++++++---------
 .../pc/app/time-line/webdoc/time-line.js      | 24 ++++++-------
 .../pc/app/tree-menu/webdoc/tree-menu.cn.md   |  2 +-
 .../pc/app/tree-menu/webdoc/tree-menu.en.md   |  2 +-
 .../pc/app/tree-menu/webdoc/tree-menu.js      |  2 +-
 packages/theme/src/tree-menu/index.less       | 15 ++++++--
 packages/theme/src/tree-menu/vars.less        |  6 ++--
 packages/vue/src/tree/src/pc.vue              |  3 +-
 27 files changed, 89 insertions(+), 76 deletions(-)

diff --git a/examples/sites/demos/pc/app/steps/click-composition-api.vue b/examples/sites/demos/pc/app/steps/click-composition-api.vue
index b59755ec1..ff1fc0f35 100644
--- a/examples/sites/demos/pc/app/steps/click-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/click-composition-api.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="demo-steps-click">
-    <div>点击步骤条节点来切换选中状态</div>
     <tiny-steps :data="stepsData" :active="defaultActive" @click="normalClick"></tiny-steps>
     <div v-if="currentNode">
       <span>选中节点 index: {{ currentNode.index }} </span><br />
diff --git a/examples/sites/demos/pc/app/steps/node-status-composition-api.vue b/examples/sites/demos/pc/app/steps/node-status-composition-api.vue
index ebc8f758a..9a95c94ac 100644
--- a/examples/sites/demos/pc/app/steps/node-status-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/node-status-composition-api.vue
@@ -9,7 +9,7 @@ import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 const normalActive = ref(0)
 const data = ref([
   {
-    name: 'Basic Info.'
+    name: 'Basic Info'
   },
   {
     name: 'BOQ Info'
diff --git a/examples/sites/demos/pc/app/steps/node-status.vue b/examples/sites/demos/pc/app/steps/node-status.vue
index 0679dbd71..33c98e615 100644
--- a/examples/sites/demos/pc/app/steps/node-status.vue
+++ b/examples/sites/demos/pc/app/steps/node-status.vue
@@ -14,7 +14,7 @@ export default {
       normalActive: 0,
       data: [
         {
-          name: 'Basic Info.'
+          name: 'Basic Info'
         },
         {
           name: 'BOQ Info'
diff --git a/examples/sites/demos/pc/app/steps/normal-steps-composition-api.vue b/examples/sites/demos/pc/app/steps/normal-steps-composition-api.vue
index 444568507..02d784143 100644
--- a/examples/sites/demos/pc/app/steps/normal-steps-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/normal-steps-composition-api.vue
@@ -7,7 +7,7 @@ import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 
 const normalActive = ref(0)
-const data = ref([{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
+const data = ref([{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
 
 const normalClick = (index, node) => {
   normalActive.value = index
diff --git a/examples/sites/demos/pc/app/steps/normal-steps.vue b/examples/sites/demos/pc/app/steps/normal-steps.vue
index a3c33f809..a90992ef9 100644
--- a/examples/sites/demos/pc/app/steps/normal-steps.vue
+++ b/examples/sites/demos/pc/app/steps/normal-steps.vue
@@ -12,7 +12,7 @@ export default {
   data() {
     return {
       normalActive: 0,
-      data: [{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
+      data: [{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
     }
   },
   methods: {
diff --git a/examples/sites/demos/pc/app/steps/only-number-composition-api.vue b/examples/sites/demos/pc/app/steps/only-number-composition-api.vue
index 0d31fa9e0..de7885a13 100644
--- a/examples/sites/demos/pc/app/steps/only-number-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/only-number-composition-api.vue
@@ -7,7 +7,7 @@ import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 
 const normalActive = ref(0)
-const data = ref([{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
+const data = ref([{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
 const onlyNumber = ref(true)
 
 function normalClick(index, node) {
diff --git a/examples/sites/demos/pc/app/steps/only-number.vue b/examples/sites/demos/pc/app/steps/only-number.vue
index 167644a09..c5e222274 100644
--- a/examples/sites/demos/pc/app/steps/only-number.vue
+++ b/examples/sites/demos/pc/app/steps/only-number.vue
@@ -12,7 +12,7 @@ export default {
   data() {
     return {
       normalActive: 0,
-      data: [{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
+      data: [{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
     }
   },
   methods: {
diff --git a/examples/sites/demos/pc/app/steps/show-divider-composition-api.vue b/examples/sites/demos/pc/app/steps/show-divider-composition-api.vue
index 6fe97e570..2f799862e 100644
--- a/examples/sites/demos/pc/app/steps/show-divider-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/show-divider-composition-api.vue
@@ -8,7 +8,7 @@ import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 
 const normalActive = ref(0)
-const data = ref([{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
+const data = ref([{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }])
 
 const normalClick = (index, node) => {
   normalActive.value = index
diff --git a/examples/sites/demos/pc/app/steps/show-divider.vue b/examples/sites/demos/pc/app/steps/show-divider.vue
index cb8b47c74..5b1f2958c 100644
--- a/examples/sites/demos/pc/app/steps/show-divider.vue
+++ b/examples/sites/demos/pc/app/steps/show-divider.vue
@@ -13,7 +13,7 @@ export default {
   data() {
     return {
       normalActive: 0,
-      data: [{ name: 'Basic Info.' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
+      data: [{ name: 'Basic Info' }, { name: 'BOQ Info' }, { name: 'Involved Parties' }, { name: 'Billing' }]
     }
   },
   methods: {
diff --git a/examples/sites/demos/pc/app/steps/size-composition-api.vue b/examples/sites/demos/pc/app/steps/size-composition-api.vue
index 9096b9b6a..32b3f4f3e 100644
--- a/examples/sites/demos/pc/app/steps/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/size-composition-api.vue
@@ -9,19 +9,16 @@ import { Steps as TinySteps, Modal } from '@opentiny/vue'
 const active = ref(0)
 const data = ref([
   {
-    name: 'Basic Info'
-  },
-  {
-    name: 'AAAAA'
+    name: 'Basic Info',
+    status: 'done'
   },
+  { name: 'BOQ Info', status: 'done', description: 'done 已完成' },
+  { name: 'BBQ Info', status: 'error', description: 'error 错误' },
   {
     name: 'Involved Parties',
-    error: true
+    status: 'disabled'
   },
-  {
-    name: 'Billing',
-    disabled: true
-  }
+  { name: 'Billing', status: '', description: '默认无状态' }
 ])
 
 const normalClick = (index, node) => {
diff --git a/examples/sites/demos/pc/app/steps/size.vue b/examples/sites/demos/pc/app/steps/size.vue
index 73fd3e07a..0f52c15b3 100644
--- a/examples/sites/demos/pc/app/steps/size.vue
+++ b/examples/sites/demos/pc/app/steps/size.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-steps vertical line size="small" :data="data" :active="advancedActive" @click="normalClick"></tiny-steps>
+  <tiny-steps vertical line size="small" :data="data" :active="active" @click="normalClick"></tiny-steps>
 </template>
 
 <script>
@@ -11,7 +11,7 @@ export default {
   },
   data() {
     return {
-      advancedActive: 1,
+      active: 1,
       data: [
         {
           name: 'Basic Info',
@@ -20,7 +20,7 @@ export default {
         { name: 'BOQ Info', status: 'done', description: 'done 已完成' },
         { name: 'BBQ Info', status: 'error', description: 'error 错误' },
         {
-          name: 'Involved Parties Involved Parties Involved Parties',
+          name: 'Involved Parties',
           status: 'disabled'
         },
         { name: 'Billing', status: '', description: '默认无状态' }
@@ -29,7 +29,7 @@ export default {
   },
   methods: {
     normalClick(index, node) {
-      normalActive.value = index
+      this.active = index
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/steps/slot-active-node-desc-composition-api.vue b/examples/sites/demos/pc/app/steps/slot-active-node-desc-composition-api.vue
index d8d3e7590..9713b431b 100644
--- a/examples/sites/demos/pc/app/steps/slot-active-node-desc-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/slot-active-node-desc-composition-api.vue
@@ -12,7 +12,7 @@ import { TimeLine as TinyTimeLine } from '@opentiny/vue'
 
 const active = ref(0)
 const data = ref([
-  { name: 'Basic Info.', desc: '基本信息必填' },
+  { name: 'Basic Info', desc: '基本信息必填' },
   { name: 'BOQ Info', desc: '第二步信息' },
   { name: 'Involved Parties', desc: '第三步信息' },
   { name: 'Billing', desc: '最终步骤信息' }
@@ -26,6 +26,8 @@ function normalClick(index, node) {
 <style scoped>
 .active-node-desc {
   width: 100px;
+  padding: 2px;
+  margin-top: 2px;
   background-color: #fafafa;
   font-size: 12px;
 }
diff --git a/examples/sites/demos/pc/app/steps/slot-active-node-desc.vue b/examples/sites/demos/pc/app/steps/slot-active-node-desc.vue
index 04d064f3a..506f7a3c2 100644
--- a/examples/sites/demos/pc/app/steps/slot-active-node-desc.vue
+++ b/examples/sites/demos/pc/app/steps/slot-active-node-desc.vue
@@ -17,7 +17,7 @@ export default {
     return {
       active: 0,
       data: [
-        { name: 'Basic Info.', desc: '基本信息必填' },
+        { name: 'Basic Info', desc: '基本信息必填' },
         { name: 'BOQ Info', desc: '第二步信息' },
         { name: 'Involved Parties', desc: '第三步信息' },
         { name: 'Billing', desc: '最终步骤信息' }
@@ -35,6 +35,8 @@ export default {
 <style scoped>
 .active-node-desc {
   width: 100px;
+  padding: 2px;
+  margin-top: 2px;
   background-color: #fafafa;
   font-size: 12px;
 }
diff --git a/examples/sites/demos/pc/app/steps/slot-description-composition-api.vue b/examples/sites/demos/pc/app/steps/slot-description-composition-api.vue
index c7bddb5ae..709535b86 100644
--- a/examples/sites/demos/pc/app/steps/slot-description-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/slot-description-composition-api.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-time-line :active="active" :show-divider="true" text-position="right" space="280px">
+  <tiny-time-line :active="active" :show-divider="true" text-position="right" space="220px">
     <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="normalClick(i)">
       <template #description>
         <div class="my-description">
@@ -16,10 +16,9 @@ import { TimeLine as TinyTimeLine, TimelineItem as TinyTimelineItem } from '@ope
 
 const active = ref(0)
 const data = ref([
-  { name: 'Basic Info.', description: '基本信息必填' },
-  { name: 'BOQ Info', description: '第二步信息' },
-  { name: 'Involved Parties', description: '第三步信息' },
-  { name: 'Billing', description: '最终步骤信息' }
+  { name: 'Basic Info', description: '基本信息必填' },
+  { name: 'BOQ Info', description: '第二步描述信息' },
+  { name: 'Billing', description: '最终步骤描述' }
 ])
 
 const normalClick = (index, node) => {
@@ -30,7 +29,8 @@ const normalClick = (index, node) => {
 <style scoped>
 .my-description {
   width: 100px;
-  background-color: #fafafa;
+  padding: 0 2px;
+  margin-top: 4px;
   font-size: 12px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/steps/slot-description.vue b/examples/sites/demos/pc/app/steps/slot-description.vue
index b81073f6d..a8841f64a 100644
--- a/examples/sites/demos/pc/app/steps/slot-description.vue
+++ b/examples/sites/demos/pc/app/steps/slot-description.vue
@@ -1,5 +1,5 @@
 <template>
-  <tiny-time-line :active="active" text-position="right" show-divider="true" space="280px">
+  <tiny-time-line :active="active" text-position="right" show-divider="true" space="220px">
     <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="normalClick(i)">
       <template #description>
         <div class="my-description">
@@ -22,9 +22,9 @@ export default {
     return {
       active: 1,
       data: [
-        { name: 'Basic Info.', description: '基本信息必填' },
+        { name: 'Basic Info', description: '基本信息必填' },
         { name: 'BOQ Info', description: '第二步描述信息' },
-        { name: 'Billing', description: '最终步骤信息' }
+        { name: 'Billing', description: '最终步骤描述' }
       ]
     }
   },
@@ -39,8 +39,8 @@ export default {
 <style scoped>
 .my-description {
   width: 100px;
-  margin-top: 2px;
-  background-color: #eee;
+  padding: 0 2px;
+  margin-top: 4px;
   font-size: 12px;
 }
 </style>
diff --git a/examples/sites/demos/pc/app/steps/slot-item-composition-api.vue b/examples/sites/demos/pc/app/steps/slot-item-composition-api.vue
index 818e86dcf..1ccfc617d 100644
--- a/examples/sites/demos/pc/app/steps/slot-item-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/slot-item-composition-api.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="demo-steps-slot-item">
-    <div>通过 item 插槽添加自定义图标</div>
     <tiny-steps :data="stepsData">
       <template #item="data">
         <a class="label"
diff --git a/examples/sites/demos/pc/app/steps/slot-item.vue b/examples/sites/demos/pc/app/steps/slot-item.vue
index d483a7cc4..e859dc875 100644
--- a/examples/sites/demos/pc/app/steps/slot-item.vue
+++ b/examples/sites/demos/pc/app/steps/slot-item.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="demo-steps-slot-item">
-    <div>通过 item 插槽添加自定义图标：</div>
     <tiny-steps :data="stepsData">
       <template #item="data">
         <a class="label"
diff --git a/examples/sites/demos/pc/app/steps/text-position-composition-api.vue b/examples/sites/demos/pc/app/steps/text-position-composition-api.vue
index 141238ae8..aebec47cd 100644
--- a/examples/sites/demos/pc/app/steps/text-position-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/text-position-composition-api.vue
@@ -9,7 +9,7 @@ import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 const normalActive = ref(0)
 const data = ref([
   {
-    name: 'Basic Info.'
+    name: 'Basic Info'
   },
   {
     name: 'AAAAA'
diff --git a/examples/sites/demos/pc/app/steps/text-position.vue b/examples/sites/demos/pc/app/steps/text-position.vue
index 405c3cff3..e3651f928 100644
--- a/examples/sites/demos/pc/app/steps/text-position.vue
+++ b/examples/sites/demos/pc/app/steps/text-position.vue
@@ -14,7 +14,7 @@ export default {
       normalActive: 0,
       data: [
         {
-          name: 'Basic Info.'
+          name: 'Basic Info'
         },
         {
           name: 'AAAAA'
diff --git a/examples/sites/demos/pc/app/steps/webdoc/steps.js b/examples/sites/demos/pc/app/steps/webdoc/steps.js
index 443aebd2b..7d7588bda 100644
--- a/examples/sites/demos/pc/app/steps/webdoc/steps.js
+++ b/examples/sites/demos/pc/app/steps/webdoc/steps.js
@@ -45,7 +45,7 @@ export default {
       'name': { 'zh-CN': '节点状态', 'en-US': 'Timeline Step Bar' },
       'desc': {
         'zh-CN':
-          '<p>通过单个节点数据中的 <code>disabled</code> 属性配置是否禁用；<code>error</code> 属性配置错误状态</p>\n',
+          '<p>通过单个节点数据中的 <code>disabled</code> 属性配置是否禁用；<code>error</code> 属性配置错误状态。</p>\n',
         'en-US':
           '<p>The <code>disabled</code> attribute in single node data is used to configure whether to disable, while the <code>error</code> attribute is used to configure error state</p>\n'
       },
@@ -123,15 +123,6 @@ export default {
       },
       'codeFiles': ['only-number.vue']
     },
-    {
-      'demoId': 'click',
-      'name': { 'zh-CN': '点击事件', 'en-US': '' },
-      'desc': {
-        'zh-CN': '<p>点击节点时触发 <code>click</code> 事件。</p>\n',
-        'en-US': 'Trigger <code>click</code> event when clicking on a node.'
-      },
-      'codeFiles': ['click.vue']
-    },
     {
       'demoId': 'slot-item',
       'name': { 'zh-CN': 'item插槽', 'en-US': 'item slot' },
@@ -140,13 +131,22 @@ export default {
         'en-US': 'Customize step bar node content through scope slot <code>item</code>.'
       },
       'codeFiles': ['slot-item.vue']
+    },
+    {
+      'demoId': 'click',
+      'name': { 'zh-CN': '点击事件', 'en-US': '' },
+      'desc': {
+        'zh-CN': '<p>点击节点时触发 <code>click</code> 事件。</p>\n',
+        'en-US': 'Trigger <code>click</code> event when clicking on a node.'
+      },
+      'codeFiles': ['click.vue']
     }
   ],
   apis: [
     {
       'name': 'steps',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'active',
           'type': 'number',
@@ -160,7 +160,7 @@ export default {
         {
           'name': 'count-field',
           'type': 'string',
-          'defaultValue': 'count',
+          'defaultValue': "'count'",
           'desc': {
             'zh-CN': '条形步骤条里徽标计数对应的字段名',
             'en-US': 'Custom field name corresponding to logo count in bar steps'
@@ -183,7 +183,7 @@ export default {
         {
           'name': 'name-field',
           'type': 'string',
-          'defaultValue': 'name',
+          'defaultValue': "'name'",
           'desc': {
             'zh-CN': '节点名称对应的字段名',
             'en-US': 'Field name corresponds to  name of node'
@@ -225,7 +225,7 @@ export default {
           'type': 'string | number',
           'defaultValue': '',
           'desc': {
-            'zh-CN': '节点宽度, 可取值数字、带长度单位数值与百分比，传数字则默认以 px 为长度单位。',
+            'zh-CN': '节点宽度, 可取值数字、带长度单位数值与百分比，传数字则默认以 px 为长度单位',
             'en-US':
               'Node width can be set to numeric values, values with length units, or percentages. Numeric values will default to using pixels as the length unit'
           },
@@ -234,7 +234,7 @@ export default {
         {
           'name': 'status-field',
           'type': 'string',
-          'defaultValue': 'status',
+          'defaultValue': "'status'",
           'desc': {
             'zh-CN': '数据状态对应的字段名，用于条形步骤条',
             'en-US': 'Field name corresponding to data status, used for bar steps '
@@ -244,7 +244,7 @@ export default {
         {
           'name': 'text-position',
           'type': 'string',
-          'defaultValue': 'bottom',
+          'defaultValue': "'bottom'",
           'desc': {
             'zh-CN': '节点名称的位置， 可选值有right | bottom，用于单链型步骤条',
             'en-US':
@@ -256,7 +256,8 @@ export default {
       'events': [
         {
           'name': 'click',
-          'type': '(index: number, node: IStepsItem | ITimelineItem) => void',
+          'type':
+            '(index: number, node: <a href="#IStepsItem">IStepsItem</a> | <a href="time-line#ITimelineItem">ITimelineItem</a>) => void',
           'desc': {
             'zh-CN': '节点点击事件，参数：<li>index: 点击节点的索引</li><li>node：点击节点的数据</li>',
             'en-US': 'Node click event. Parameter: (index: node index, node: node data information)'
diff --git a/examples/sites/demos/pc/app/time-line/webdoc/time-line.js b/examples/sites/demos/pc/app/time-line/webdoc/time-line.js
index d1b2079de..036bf2fbb 100644
--- a/examples/sites/demos/pc/app/time-line/webdoc/time-line.js
+++ b/examples/sites/demos/pc/app/time-line/webdoc/time-line.js
@@ -47,14 +47,14 @@ export default {
       'demoId': 'status',
       'name': { 'zh-CN': '节点状态', 'en-US': 'Status of Node' },
       'desc': {
-        'zh-CN': '<p>在单项数据中使用 <code>status</code> 指定对应节点的状态.</p>',
+        'zh-CN': '<p>在单项数据中使用 <code>status</code> 指定对应节点的状态。</p>',
         'en-US': '<p>Use the <code>shape</code> attribute to set the appearance of a vertical time line node. </p>'
       },
       'codeFiles': ['status.vue']
     },
     {
       'demoId': 'set-node-width',
-      'name': { 'zh-CN': '宽度设置', 'en-US': 'Width Setting' },
+      'name': { 'zh-CN': '宽度', 'en-US': 'Width Setting' },
       'desc': {
         'zh-CN': '<p>通过 <code>space</code> 属性设置节点的宽度。</p>\n',
         'en-US': '<p>Use the <code>space</code> attribute to set the width of timeline node. </p>\n'
@@ -108,7 +108,7 @@ export default {
     {
       'name': 'time-line',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'active',
           'type': 'number',
@@ -154,7 +154,7 @@ export default {
         {
           'name': 'name-field',
           'type': 'string',
-          'defaultValue': 'name',
+          'defaultValue': "'name'",
           'desc': {
             'zh-CN': '节点名称对应的字段名',
             'en-US': 'Set the field name in the node information.'
@@ -174,10 +174,10 @@ export default {
         {
           'name': 'shape',
           'type': 'string',
-          'defaultValue': 'circle',
+          'defaultValue': "'circle'",
           'desc': {
-            'zh-CN': '圆点外形: 空心圆形或实心圆点，分别对应 circle | dot',
-            'en-US': 'Set the appearance of point, optional values include circle and dot'
+            'zh-CN': "圆点外形: 空心圆形或实心圆点，取值分别对应 'circle' | 'dot'",
+            'en-US': "Set the appearance of point, optional values include 'circle' and 'dot'"
           },
           'demoId': 'shape'
         },
@@ -196,7 +196,7 @@ export default {
           'type': 'string | number',
           'defaultValue': '--',
           'desc': {
-            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位。',
+            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位',
             'en-US':
               'Set the width of the timeline.The value can be a number, a numeric string with length units, or a percentage string. For numbers, the default length unit is px'
           },
@@ -215,7 +215,7 @@ export default {
         {
           'name': 'time-field',
           'type': 'string',
-          'defaultValue': 'time',
+          'defaultValue': "'time'",
           'desc': {
             'zh-CN': '节点时间信息对应的字段名',
             'en-US': 'The name of the field corresponding to the node time information'
@@ -236,7 +236,7 @@ export default {
       'events': [
         {
           'name': 'click',
-          'type': '(index: number, node: ITimelineItem) => void',
+          'type': '(index: number, node: <a href="#ITimelineItem">ITimelineItem</a>) => void',
           'desc': {
             'zh-CN': '节点的点击事件，参数：<br />index：点击节点的下标<br /> node： 点击节点数据}',
             'en-US': 'Click event of a node. arguments:<br />index: click the subscript of a node<br />node: node data'
@@ -299,7 +299,7 @@ export default {
           'type': 'string | number',
           'defaultValue': '--',
           'desc': {
-            'zh-CN': '连接线长度，仅当 timeline 组件 text-position 属性取值为 true 时生效，设置后 space 属性失效。',
+            'zh-CN': '连接线长度，仅当 timeline 组件 text-position 属性取值为 true 时生效，设置后 space 属性失效',
             'en-US':
               'The length of the connection line and it is valid only when text-position is set to true. After setting, the space property is invalid'
           },
@@ -310,7 +310,7 @@ export default {
           'type': 'string | number',
           'defaultValue': '--',
           'desc': {
-            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位。',
+            'zh-CN': '节点宽度， 取值为数字、带长度单位的数值字符串和百分比字符串，数字会默认以px为长度单位',
             'en-US':
               'Set the width of the timeline.The value can be a number, a numeric string with length units, or a percentage string. For numbers, the default length unit is px'
           },
diff --git a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.cn.md b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.cn.md
index bd4ca2d48..1ed3458d5 100644
--- a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.cn.md
+++ b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.cn.md
@@ -4,4 +4,4 @@ title: TreeMenu 树型菜单
 
 # TreeMenu 树型菜单
 
-> 以树形方式显示的菜单，适用于版型定制的一种组件。
+以树形方式显示的菜单，适用于版型定制的一种组件。
diff --git a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.en.md b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.en.md
index d11319424..943e9ccda 100644
--- a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.en.md
+++ b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.en.md
@@ -4,4 +4,4 @@ title: TreeMenu
 
 # TreeMenu
 
-> The menu is displayed in tree mode and is applicable to a component of version customization.
+The menu is displayed in tree mode and is applicable to a component of version customization.
diff --git a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
index a765b35e7..a282bac52 100644
--- a/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
+++ b/examples/sites/demos/pc/app/tree-menu/webdoc/tree-menu.js
@@ -294,7 +294,7 @@ export default {
     {
       'name': 'tree-menu',
       'type': 'component',
-      'properties': [
+      'props': [
         {
           'name': 'accordion',
           'type': 'boolean',
diff --git a/packages/theme/src/tree-menu/index.less b/packages/theme/src/tree-menu/index.less
index 8f81c1fff..a2d09459e 100644
--- a/packages/theme/src/tree-menu/index.less
+++ b/packages/theme/src/tree-menu/index.less
@@ -100,7 +100,7 @@
           right: 16px;
           max-width: 36px;
           overflow: hidden;
-          font-size: var(--tree-menu-node-number-font-size);
+          font-size: var(--ti-tree-menu-node-number-font-size);
         }
 
         .tree-node {
@@ -108,7 +108,13 @@
         }
 
         .tree-node-name {
+          display: flex;
+          align-items: center;
           padding: 0 var(--ti-tree-menu-node-body-text-padding-horizontal);
+
+          svg {
+            margin-right: var(--ti-tree-menu-prefix-icon-margin-right);
+          }
         }
       }
 
@@ -128,7 +134,7 @@
 
       .@{tree-node-prefix-cls}__content-left {
         position: relative;
-        padding-left: var(--tree-menu-node-vertical-line-margin-right);
+        padding-left: var(--ti-tree-menu-node-vertical-line-margin-right);
       }
 
       &.is-current {
@@ -177,6 +183,11 @@
     &.@{tree-prefix-cls} {
       .@{tree-node-prefix-cls} {
         .@{tree-node-prefix-cls}__content {
+          &-box {
+            max-width: 100%;
+            padding-right: 0;
+          }
+
           .tree-node-name {
             white-space: nowrap;
             overflow: hidden;
diff --git a/packages/theme/src/tree-menu/vars.less b/packages/theme/src/tree-menu/vars.less
index ed0afebfe..1a296267f 100644
--- a/packages/theme/src/tree-menu/vars.less
+++ b/packages/theme/src/tree-menu/vars.less
@@ -36,7 +36,9 @@
   // 折叠图标右边距
   --ti-tree-menu-collapse-icon-margin-right: var(--ti-common-size-2x, 8px);
   // 节点序号字号
-  --tree-menu-node-number-font-size: var(--ti-common-font-size-base, 12px);
+  --ti-tree-menu-node-number-font-size: var(--ti-common-font-size-base, 12px);
   // 活跃节点竖线与文本的间距
-  --tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px);
+  --ti-tree-menu-node-vertical-line-margin-right: var(--ti-common-size-4x, 16px);
+  // 前缀图标右边距
+  --ti-tree-menu-prefix-icon-margin-right: var(--ti-common-size-2x, 8px);
 }
diff --git a/packages/vue/src/tree/src/pc.vue b/packages/vue/src/tree/src/pc.vue
index 661bbfdf1..1d6d7ac83 100644
--- a/packages/vue/src/tree/src/pc.vue
+++ b/packages/vue/src/tree/src/pc.vue
@@ -228,7 +228,8 @@ export default defineComponent({
     'current-change',
     'node-click',
     'leave-plain-view',
-    'check-plain'
+    'check-plain',
+    'load-data'
   ],
   provide() {
     return {