docs(steps): [steps] optimize steps docs (#801)

examples/sites/demos/pc/app/steps/advanced-steps-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-steps :data="data" type="advanced" :active="advancedActive" @click="advancedClick"></tiny-steps>
+  <tiny-steps :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Steps as TinySteps, Modal } from '@opentiny/vue'
 
@@ -14,7 +14,7 @@ const data = ref([
   { name: 'Billing', count: 0, status: 'done' }
 ])
 
-function advancedClick(index, node) {
+const advancedClick = (index, node) => {
   advancedActive.value = index
 
   Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)

examples/sites/demos/pc/app/steps/advanced-steps.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-steps :data="data" type="advanced" :active="advancedActive" @click="advancedClick"></tiny-steps>
+  <tiny-steps :data="data" :active="advancedActive" @click="advancedClick"></tiny-steps>
 </template>
 
-<script lang="jsx">
+<script>
 import { Steps, Modal } from '@opentiny/vue'
 
 export default {
@@ -15,8 +15,8 @@ export default {
       data: [
         { name: 'Basic Info', count: 3, status: 'doing' },
         { name: 'BOQ Info', count: 0, status: 'done' },
-        { name: 'Involved Parties', count: 10, status: 'doing' },
-        { name: 'Billing', count: 0, status: 'done' }
+        { name: 'Involved Parties', count: 10, status: 'error' },
+        { name: 'Billing', count: 0, status: 'disabled' }
       ]
     }
   },

examples/sites/demos/pc/app/steps/click-composition-api.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="content">
+  <div class="demo-steps-click">
     <div>点击步骤条节点来切换选中状态</div>
-    <tiny-steps :data="stepsData" :active="defaultActive" type="normal" @click="normalClick"></tiny-steps>
+    <tiny-steps :data="stepsData" :active="defaultActive" @click="normalClick"></tiny-steps>
     <div v-if="currentNode">
-      <span>选中节点index:{{ currentNode.index }}; </span><br />
-      <span> 选中节点node: {{ currentNode.node }} </span>
+      <span>选中节点 index: {{ currentNode.index }} </span><br />
+      <span>选中节点 node: {{ currentNode.node }} </span>
     </div>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Steps as TinySteps } from '@opentiny/vue'
 
@@ -38,7 +38,7 @@ const stepsData = ref([
 const defaultActive = ref(1)
 const currentNode = ref(null)
 
-function normalClick(index, node) {
+const normalClick = (index, node) => {
   defaultActive.value = index
   currentNode.value = {
     index,
@@ -48,13 +48,18 @@ function normalClick(index, node) {
 </script>
 
 <style scoped>
-.content {
+.demo-steps-click {
   padding: 20px;
   max-width: 50%;
   min-width: 700px;
+  font-size: 14px;
 }
 
-.content > div:not(:last-child) {
+.demo-steps-click > div:not(:last-child) {
   margin: 0 0 20px 0;
 }
+
+span {
+  line-height: 1.5;
+}
 </style>

examples/sites/demos/pc/app/steps/click.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="content">
-    <div>点击步骤条节点来切换选中状态</div>
-    <tiny-steps :data="stepsData" :active="defaultActive" type="normal" @click="normalClick"></tiny-steps>
+  <div class="demo-steps-click">
+    <tiny-steps :data="stepsData" :active="defaultActive" @click="normalClick"></tiny-steps>
     <div v-if="currentNode">
-      <span>选中节点index:{{ currentNode.index }}; </span><br />
-      <span> 选中节点node: {{ currentNode.node }} </span>
+      <span>选中节点 index: {{ currentNode.index }}</span
+      ><br />
+      <span>选中节点 node: {{ currentNode.node }} </span>
     </div>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Steps } from '@opentiny/vue'
 
 export default {
@@ -57,13 +57,17 @@ export default {
 </script>
 
 <style scoped>
-.content {
+.demo-steps-click {
   padding: 20px;
   max-width: 50%;
   min-width: 700px;
 }
 
-.content > div:not(:last-child) {
+.demo-steps-click > div:not(:last-child) {
   margin: 0 0 20px 0;
 }
+
+span {
+  line-height: 1.5;
+}
 </style>

examples/sites/demos/pc/app/steps/custom-steps-item-composition-api.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="content">
+  <div class="demo-steps-custom-field">
     <tiny-steps :data="stepsData" name-field="reName" count-field="reCount" status-field="reStatus"></tiny-steps>
   </div>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { Steps as TinySteps } from '@opentiny/vue'
 
@@ -33,7 +33,7 @@ const stepsData = ref([
 </script>
 
 <style scoped>
-.content {
+.demo-steps-custom-field {
   padding: 20px;
   max-width: 50%;
   min-width: 700px;

examples/sites/demos/pc/app/steps/custom-steps-item.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="content">
+  <div class="demo-steps-custom-field">
     <tiny-steps :data="stepsData" name-field="reName" count-field="reCount" status-field="reStatus"></tiny-steps>
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Steps } from '@opentiny/vue'
 
 export default {
@@ -41,7 +41,7 @@ export default {
 </script>
 
 <style scoped>
-.content {
+.demo-steps-custom-field {
   padding: 20px;
   max-width: 50%;
   min-width: 700px;

examples/sites/demos/pc/app/steps/node-status-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-time-line :data="data" :active="normalActive" type="normal" @click="normalClick"></tiny-time-line>
+  <tiny-time-line :data="data" :active="normalActive" @click="normalClick"></tiny-time-line>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 

examples/sites/demos/pc/app/steps/node-status.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-time-line :data="data" :active="normalActive" type="normal" @click="normalClick"></tiny-time-line>
+  <tiny-time-line :data="data" :active="normalActive" @click="normalClick"></tiny-time-line>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeLine, Modal } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/steps/normal-steps-composition-api.vue

@@ -1,15 +1,15 @@
 <template>
-  <tiny-time-line :data="data" :active="normalActive" type="normal" @click="normalClick"></tiny-time-line>
+  <tiny-time-line :data="data" :active="normalActive" @click="normalClick"></tiny-time-line>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 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' }])
 
-function normalClick(index, node) {
+const normalClick = (index, node) => {
   normalActive.value = index
 
   Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)

examples/sites/demos/pc/app/steps/normal-steps.vue

@@ -1,8 +1,8 @@
 <template>
-  <tiny-time-line :data="data" :active="normalActive" type="normal" @click="normalClick"></tiny-time-line>
+  <tiny-time-line :data="data" :active="normalActive" @click="normalClick"></tiny-time-line>
 </template>
 
-<script lang="jsx">
+<script>
 import { TimeLine, Modal } from '@opentiny/vue'
 
 export default {

examples/sites/demos/pc/app/steps/only-number-composition-api.vue

@@ -2,7 +2,7 @@
   <tiny-time-line :data="data" :active="normalActive" :only-number="onlyNumber" @click="normalClick"></tiny-time-line>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref } from 'vue'
 import { TimeLine as TinyTimeLine, Modal } from '@opentiny/vue'
 

examples/sites/demos/pc/app/steps/only-number.vue

@@ -2,7 +2,7 @@
   <tiny-time-line :data="data" :active="normalActive" :only-number="true" @click="normalClick"></tiny-time-line>
 </template>
 
-<script lang="ts">
+<script>
 import { TimeLine, Modal } from '@opentiny/vue'
 
 export default {