docs(Progress): improve transition demo (#9335)

* docs(Progress): improve transition demo

* fix: demo margin

src/circle/demo/index.vue

@@ -2,8 +2,6 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const format = (rate: number) => Math.min(Math.max(rate, 0), 100);
-
 const i18n = {
   'zh-CN': {
     left: '左侧',
@@ -43,6 +41,8 @@ const gradientColor = {
   '100%': '#6149f6',
 };
 
+const format = (rate: number) => Math.min(Math.max(rate, 0), 100);
+
 const add = () => {
   rate.value = format(rate.value + 20);
 };

src/progress/demo/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import { reactive } from '@vue/reactivity';
 
 const i18n = {
   'zh-CN': {
@@ -8,39 +8,27 @@ const i18n = {
     title3: '样式定制',
     strokeWidth: '线条粗细',
     transition: '过渡效果',
-    increase: '增加',
-    decrease: '减少',
   },
   'en-US': {
     title2: 'Inactive',
     title3: 'Custom Style',
     strokeWidth: 'Stroke Width',
-    transition: 'Transition Effect',
+    transition: 'Transition',
-    increase: 'increase',
-    decrease: 'decrease',
   },
 };
 
 const t = useTranslate(i18n);
 
-const state = reactive({
+const percentage = ref(50);
-  percentage: 0,
-});
 
-const increment = 10;
+const format = (rate: number) => Math.min(Math.max(rate, 0), 100);
-const increase = () => {
+
-  if (state.percentage >= 100 - increment) {
+const add = () => {
-    state.percentage = 100;
+  percentage.value = format(percentage.value + 20);
-  } else {
-    state.percentage += increment;
-  }
 };
-const decrease = () => {
+
-  if (state.percentage <= increment) {
+const reduce = () => {
-    state.percentage = 0;
+  percentage.value = format(percentage.value - 20);
-  } else {
-    state.percentage -= increment;
-  }
 };
 </script>
 
@@ -69,10 +57,15 @@ const decrease = () => {
   </demo-block>
 
   <demo-block :title="t('transition')">
-    <van-progress inactive :percentage="state.percentage" />
+    <van-progress inactive :percentage="percentage" />
-    <div style="display: flex; justify-content: space-around">
+    <div style="margin-top: 15px">
-      <van-button @click="decrease">{{ t('decrease') }}</van-button>
+      <van-button :text="t('add')" type="primary" size="small" @click="add" />
-      <van-button @click="increase">{{ t('increase') }}</van-button>
+      <van-button
+        :text="t('decrease')"
+        type="danger"
+        size="small"
+        @click="reduce"
+      />
     </div>
   </demo-block>
 </template>
@@ -82,11 +75,19 @@ const decrease = () => {
   background: var(--van-white);
 
   .van-progress {
-    margin: 20px;
+    margin: 20px 16px;
 
     &:first-of-type {
       margin-top: 5px;
     }
   }
+
+  .van-button {
+    margin: var(--van-padding-md) 0 0 10px;
+
+    &:first-of-type {
+      margin-left: var(--van-padding-md);
+    }
+  }
 }
 </style>

src/progress/test/__snapshots__/demo.spec.ts.snap

@@ -80,31 +80,31 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-progress">
     <span class="van-progress__portion"
-          style="background: rgb(202, 202, 202); transform: scaleX(0);"
+          style="background: rgb(202, 202, 202); transform: scaleX(0.5);"
     >
     </span>
-    <span style="left: 0%; transform: translate(-0%,-50%); background: rgb(202, 202, 202);"
+    <span style="left: 50%; transform: translate(-50%,-50%); background: rgb(202, 202, 202);"
           class="van-progress__pivot"
     >
-      0%
+      50%
     </span>
   </div>
-  <div style="display: flex; justify-content: space-around;">
+  <div style="margin-top: 15px;">
     <button type="button"
-            class="van-button van-button--default van-button--normal"
+            class="van-button van-button--primary van-button--small"
     >
       <div class="van-button__content">
         <span class="van-button__text">
-          decrease
+          Add
         </span>
       </div>
     </button>
     <button type="button"
-            class="van-button van-button--default van-button--normal"
+            class="van-button van-button--danger van-button--small"
     >
       <div class="van-button__content">
         <span class="van-button__text">
-          increase
+          Decrease
         </span>
       </div>
     </button>