[documentation] update documentation

f820602h · f820602h · commit ae9a4f53e880 · 2023-10-02T11:52:17.000+08:00
diff --git a/doc/stage-play-scene.md b/doc/stage-play-scene.md
@@ -1,23 +1,30 @@
 # StagePlayScene
 
-`<StagePlaySpotlight>` is the primary component used to highlight elements in a guided tour. Each `<StagePlayScene>` should be used within `<StagePlaySpotlight>`.
+The component used to configure each step in the guided tour. All the elements you wish to highlight in a single step must be placed within the slot of `<StagePlayScene>`.
 
-It's recommended to use it directly in the root component.
-
-``` vue{2,6,10}
+``` vue{2,6,15}
 <script setup lang="ts">
-import { StagePlaySpotlight } from 'vue-stage-play'
+import { StagePlayScene } from 'vue-stage-play'
 </script>
 
 <template>
-  <StagePlaySpotlight>
-    <div class="root">
-      <!-- ... -->
-    </div>
-  </StagePlaySpotlight>
+  <StagePlayScene actName="demo" :scene="1">
+    <template #default>
+      <div class="title">
+        <!-- ... -->
+      </div>
+      <div class="content">
+        <!-- ... -->
+      </div>
+    </template>
+  </StagePlayScene>
 </template>
 ```
 
+:::tip
+`<StagePlayScene>` will render an actual element. Hence, you may need to set the `margin` to it, rather than the highlighted elements.
+:::
+
 ## Props
 
 <script setup>
diff --git a/doc/stage-play-spotlight.md b/doc/stage-play-spotlight.md
@@ -1,6 +1,6 @@
 # StagePlaySpotlight
 
-`<StagePlaySpotlight>` is the primary component used to highlight elements in a guided tour. Each `<StagePlayScene>` should be used within `<StagePlaySpotlight>`.
+The primary component used to highlight elements in a guided tour. Each `<StagePlayScene>` should be used within `<StagePlaySpotlight>`.
 
 It's recommended to use it directly in the root component.
 
