From 529903d65339d9ad832f5e14cfd168acc63f2cfd 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, 30 Nov 2023 17:11:59 +0800
Subject: [PATCH] fix(docs): fixed some bugs of demo (#978)

---
 .../app/modal/footer-btn-content-composition-api.vue |  2 +-
 .../demos/pc/app/steps/size-composition-api.vue      | 11 +++++++----
 examples/sites/demos/pc/app/steps/size.vue           |  7 ++++++-
 .../app/steps/slot-description-composition-api.vue   |  2 +-
 .../pc/app/steps/vertical-steps-composition-api.vue  |  2 +-
 .../app/time-line/timeline-item-composition-api.vue  |  4 ++--
 .../sites/demos/pc/app/time-line/timeline-item.vue   | 10 +++++++---
 .../only-check-children-composition-api.vue          |  2 +-
 .../sites/demos/pc/app/tree/drag-composition-api.vue | 12 ++++++------
 examples/sites/demos/pc/app/tree/node-op.vue         | 11 +++++++++--
 10 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/examples/sites/demos/pc/app/modal/footer-btn-content-composition-api.vue b/examples/sites/demos/pc/app/modal/footer-btn-content-composition-api.vue
index 599d815b0..cda2e5721 100644
--- a/examples/sites/demos/pc/app/modal/footer-btn-content-composition-api.vue
+++ b/examples/sites/demos/pc/app/modal/footer-btn-content-composition-api.vue
@@ -26,7 +26,7 @@ const confirmContent2 = ref('确定')
 const cancelContent2 = ref('再想想')
 
 function btnClick1() {
-  Modal.confirm({
+  TinyModal.confirm({
     message: '自定义确定按钮和取消按钮文本',
     confirmContent: confirmContent1.value,
     cancelContent: cancelContent1.value
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 29ad34710..9096b9b6a 100644
--- a/examples/sites/demos/pc/app/steps/size-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/size-composition-api.vue
@@ -1,12 +1,12 @@
 <template>
-  <tiny-steps vertical line size="small" :data="data" :visible-num="4" :active="advancedActive"></tiny-steps>
+  <tiny-steps vertical line size="small" :data="data" :active="active" @click="normalClick"></tiny-steps>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
+import { Steps as TinySteps, Modal } from '@opentiny/vue'
 
-const normalActive = ref(0)
+const active = ref(0)
 const data = ref([
   {
     name: 'Basic Info'
@@ -23,5 +23,8 @@ const data = ref([
     disabled: true
   }
 ])
-const normalActive1 = ref(0)
+
+const normalClick = (index, node) => {
+  active.value = index
+}
 </script>
diff --git a/examples/sites/demos/pc/app/steps/size.vue b/examples/sites/demos/pc/app/steps/size.vue
index 4950262e1..73fd3e07a 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" :visible-num="4" :active="advancedActive"></tiny-steps>
+  <tiny-steps vertical line size="small" :data="data" :active="advancedActive" @click="normalClick"></tiny-steps>
 </template>
 
 <script>
@@ -26,6 +26,11 @@ export default {
         { name: 'Billing', status: '', description: '默认无状态' }
       ]
     }
+  },
+  methods: {
+    normalClick(index, node) {
+      normalActive.value = index
+    }
   }
 }
 </script>
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 477f5fd60..c7bddb5ae 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
@@ -12,7 +12,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TimeLine as TinyTimeLine } from '@opentiny/vue'
+import { TimeLine as TinyTimeLine, TimelineItem as TinyTimelineItem } from '@opentiny/vue'
 
 const active = ref(0)
 const data = ref([
diff --git a/examples/sites/demos/pc/app/steps/vertical-steps-composition-api.vue b/examples/sites/demos/pc/app/steps/vertical-steps-composition-api.vue
index e9094480b..a26c2f898 100644
--- a/examples/sites/demos/pc/app/steps/vertical-steps-composition-api.vue
+++ b/examples/sites/demos/pc/app/steps/vertical-steps-composition-api.vue
@@ -23,7 +23,7 @@ const data = ref([
 ])
 
 const onClick = (index, node) => {
-  timeActive1.value = index
+  timeActive.value = index
 
   Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
 }
diff --git a/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue b/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue
index 3bedf9b25..17c6cccfa 100644
--- a/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue
+++ b/examples/sites/demos/pc/app/time-line/timeline-item-composition-api.vue
@@ -1,6 +1,6 @@
 <template>
-  <tiny-time-line :active="active" text-position="right" space="200px">
-    <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="onItemClick(i)"> </tiny-timeline-item>
+  <tiny-time-line :active="active" space="200px">
+    <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="onItemClick"> </tiny-timeline-item>
   </tiny-time-line>
 </template>
 
diff --git a/examples/sites/demos/pc/app/time-line/timeline-item.vue b/examples/sites/demos/pc/app/time-line/timeline-item.vue
index c032cdf82..d8e804636 100644
--- a/examples/sites/demos/pc/app/time-line/timeline-item.vue
+++ b/examples/sites/demos/pc/app/time-line/timeline-item.vue
@@ -1,11 +1,11 @@
 <template>
   <tiny-time-line :active="active" text-position="right" space="200px">
-    <tiny-timeline-item v-for="(item, i) in data" :node="item" @click="onItemClick(i)"> </tiny-timeline-item>
+    <tiny-timeline-item v-for="(item, i) in data" :node="item" :key="i" @click="onItemClick"> </tiny-timeline-item>
   </tiny-time-line>
 </template>
 
 <script lang="ts">
-import { TimeLine, TimelineItem } from '@opentiny/vue'
+import { TimeLine, TimelineItem, Modal } from '@opentiny/vue'
 
 export default {
   components: {
@@ -24,8 +24,12 @@ export default {
     }
   },
   methods: {
-    onItemClick(index) {
+    onItemClick(index, node) {
       this.active = index
+      Modal.message({
+        message: 'click 事件，当前 index：' + index + ' 节点信息：' + node.name + ',' + node.time,
+        status: 'info'
+      })
     }
   }
 }
diff --git a/examples/sites/demos/pc/app/tree-menu/only-check-children-composition-api.vue b/examples/sites/demos/pc/app/tree-menu/only-check-children-composition-api.vue
index f5805efbb..0dec24467 100644
--- a/examples/sites/demos/pc/app/tree-menu/only-check-children-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree-menu/only-check-children-composition-api.vue
@@ -4,7 +4,7 @@
 
 <script setup>
 import { ref } from 'vue'
-import { TreeMenu as TinyTreeMenu } from '@opentiny/vue'
+import { TreeMenu as TinyTreeMenu, Modal } from '@opentiny/vue'
 
 const treeData = ref([
   {
diff --git a/examples/sites/demos/pc/app/tree/drag-composition-api.vue b/examples/sites/demos/pc/app/tree/drag-composition-api.vue
index 12b6c330a..14444b05e 100644
--- a/examples/sites/demos/pc/app/tree/drag-composition-api.vue
+++ b/examples/sites/demos/pc/app/tree/drag-composition-api.vue
@@ -61,22 +61,22 @@ function allowDrop(srcNode, targetNode, type) {
   return !targetNode.data.id.startsWith('3')
 }
 function nodeDrop(srcNode, targetNode, dropType, event) {
-  this.listenEvent == 'node-drop' && console.log('nodeDrop 事件参数：', { srcNode, targetNode, dropType, event })
+  listenEvent.value == 'node-drop' && console.log('nodeDrop 事件参数：', { srcNode, targetNode, dropType, event })
 }
 function dragStart(node, event) {
-  this.listenEvent == 'node-drag-start' && console.log('dragStart 事件参数：', { node, event })
+  listenEvent.value == 'node-drag-start' && console.log('dragStart 事件参数：', { node, event })
 }
 function dragEnter(srcNode, targetNode, event) {
-  this.listenEvent == 'node-drag-enter' && console.log('dragEnter 事件参数：', { srcNode, targetNode, event })
+  listenEvent.value == 'node-drag-enter' && console.log('dragEnter 事件参数：', { srcNode, targetNode, event })
 }
 function dragOver(srcNode, targetNode, event) {
-  this.listenEvent == 'node-drag-over' && console.log('dragOver 事件参数：', { srcNode, targetNode, event })
+  listenEvent.value == 'node-drag-over' && console.log('dragOver 事件参数：', { srcNode, targetNode, event })
 }
 function dragLeave(srcNode, targetNode, event) {
-  this.listenEvent == 'node-drag-leave' && console.log('dragLeave 事件参数：', { srcNode, targetNode, event })
+  listenEvent.value == 'node-drag-leave' && console.log('dragLeave 事件参数：', { srcNode, targetNode, event })
 }
 function dragEnd(srcNode, targetNode, dropType, event) {
-  this.listenEvent == 'node-drag-end' && console.log('dragEnd 事件参数：', { srcNode, targetNode, dropType, event })
+  listenEvent.value == 'node-drag-end' && console.log('dragEnd 事件参数：', { srcNode, targetNode, dropType, event })
 }
 </script>
 
diff --git a/examples/sites/demos/pc/app/tree/node-op.vue b/examples/sites/demos/pc/app/tree/node-op.vue
index 9dcd81564..9bee1904e 100644
--- a/examples/sites/demos/pc/app/tree/node-op.vue
+++ b/examples/sites/demos/pc/app/tree/node-op.vue
@@ -7,7 +7,13 @@
       <tiny-button @click="updateKeyChildren">更新子节点</tiny-button>
       <tiny-button @click="remove">删除当前节点</tiny-button>
     </div>
-    <tiny-tree ref="treeRef" :data="data" node-key="id" default-expand-all></tiny-tree>
+    <tiny-tree
+      ref="treeRef"
+      :data="data"
+      node-key="id"
+      default-expand-all
+      :current-node-key="currentNodeKey"
+    ></tiny-tree>
   </div>
 </template>
 
@@ -41,7 +47,8 @@ export default {
           label: '数据 3',
           children: [{ id: '3-1', label: '数据 3-1' }]
         }
-      ]
+      ],
+      currentNodeKey: '1-1'
     }
   },
   methods: {