diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/basic.vue
new file mode 100644
index 0000000000..093d6cb920
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/countdown/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-countdown :start-time="start" :end-time="end"></nut-countdown>
+</template>
+
+<script setup>
+const start = Date.now();
+const end = Date.now() + 60 * 1000;
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/control.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/control.vue
new file mode 100644
index 0000000000..3bfe55d856
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/countdown/control.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-space align="center">
+    <nut-countdown :end-time="end" :paused="paused" @paused="onPaused" @restart="onRestart" />
+    <nut-button size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
+  </nut-space>
+</template>
+<script setup>
+import { ref } from 'vue';
+const paused = ref(false);
+const end = ref(Date.now() + 60 * 1000);
+
+const toggle = () => {
+  paused.value = !paused.value;
+};
+const onPaused = (v) => {
+  console.log('paused: ', v);
+};
+const onRestart = (v) => {
+  console.log('restart: ', v);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/custom.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/custom.vue
new file mode 100644
index 0000000000..fadf5cebfe
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/countdown/custom.vue
@@ -0,0 +1,38 @@
+<template>
+  <nut-countdown v-model="time" :end-time="end">
+    <nut-space>
+      <div class="countdown-item">{{ time.d }}</div>
+      <div>:</div>
+      <div class="countdown-item">{{ time.h }}</div>
+      <div>:</div>
+      <div class="countdown-item">{{ time.m }}</div>
+      <div>:</div>
+      <div class="countdown-item">{{ time.s }}</div>
+    </nut-space>
+  </nut-countdown>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const end = ref(Date.now() + 1000 * 60 * 60 * 24 * 12);
+const time = ref({
+  d: '1',
+  h: '00',
+  m: '00',
+  s: '00'
+});
+</script>
+
+<style>
+.countdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  background: #e8220e;
+  color: #fff;
+  font-size: 14px;
+  border-radius: 6px;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/format.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/format.vue
new file mode 100644
index 0000000000..09c1c487de
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/countdown/format.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-countdown :end-time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+</template>
+
+<script setup>
+const time = Date.now() + 60 * 1000;
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/index.vue
index bdf0aafbfd..14cb181500 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/countdown/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/countdown/index.vue
@@ -1,140 +1,50 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell>
-      <nut-countdown :end-time="state.end" @end="onend"></nut-countdown>
-    </nut-cell>
-    <h2>自定义格式</h2>
-    <nut-cell>
-      <nut-countdown :end-time="state.end" format="DD 天 HH 时 mm 分 ss 秒" />
-    </nut-cell>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>毫秒级渲染</h2>
+    <h2>{{ t('format') }}</h2>
+    <Format />
 
-    <nut-cell>
-      <nut-countdown :end-time="state.end" millisecond format="HH:mm:ss:SS" />
-    </nut-cell>
+    <h2>{{ t('millisecond') }}</h2>
+    <Millisecond />
 
-    <h2>以服务端的时间为准</h2>
+    <h2>{{ t('control') }}</h2>
+    <Control />
 
-    <nut-cell>
-      <nut-countdown :start-time="state.serverTime" :end-time="state.end" />
-    </nut-cell>
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
 
-    <h2>异步更新结束时间</h2>
-
-    <nut-cell>
-      <nut-countdown :end-time="state.asyncEnd" />
-    </nut-cell>
-
-    <h2>控制开始和暂停的倒计时</h2>
-
-    <nut-cell>
-      <nut-countdown :end-time="state.end" :paused="state.paused" @paused="onpaused" @restart="onrestart" />
-      <div style="position: absolute; right: 10px; top: 9px">
-        <nut-button type="primary" size="small" @click="toggle">{{ state.paused ? 'start' : 'stop' }}</nut-button>
-      </div>
-    </nut-cell>
-
-    <h2>自定义展示样式</h2>
-
-    <nut-cell>
-      <span>
-        <nut-countdown v-model="state.resetTime" :end-time="state.end">
-          <div class="countdown-part-box">
-            <div class="part-item-symbol">{{ state.resetTime.d }}天</div>
-            <div class="part-item h">{{ state.resetTime.h }}</div>
-            <span class="part-item-symbol">:</span>
-            <div class="part-item m">{{ state.resetTime.m }}</div>
-            <span class="part-item-symbol">:</span>
-            <div class="part-item s">{{ state.resetTime.s }}</div>
-          </div>
-        </nut-countdown>
-      </span>
-    </nut-cell>
-
-    <h2>手动控制</h2>
-    <nut-cell>
-      <nut-countdown ref="Countdown" time="20000" :auto-start="false" format="ss:SS" />
-    </nut-cell>
-
-    <nut-grid :column-num="3">
-      <nut-grid-item><nut-button type="primary" @click="start">开始</nut-button></nut-grid-item>
-      <nut-grid-item><nut-button type="primary" @click="pause">暂停</nut-button></nut-grid-item>
-      <nut-grid-item><nut-button type="primary" @click="reset">重置</nut-button></nut-grid-item>
-    </nut-grid>
+    <h2>{{ t('ref') }}</h2>
+    <RefDemo />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, reactive } from 'vue';
-const Countdown = ref<any>(null);
-const state = reactive({
-  serverTime: Date.now() - 20 * 1000,
-  end: Date.now() + 60 * 1000,
-  starttime: Date.now(),
-  asyncEnd: 0,
-  paused: false,
-  resetTime: {
-    d: '1',
-    h: '00',
-    m: '00',
-    s: '00'
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Format from './format.vue';
+import Millisecond from './millisecond.vue';
+import Control from './control.vue';
+import Custom from './custom.vue';
+import RefDemo from './ref.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    format: '自定义格式',
+    millisecond: '毫秒级渲染',
+    control: '控制开始和暂停的倒计时',
+    custom: '自定义展示样式',
+    ref: 'Ref 方法'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    format: 'Custom Format',
+    millisecond: 'Millisecond',
+    control: 'Manual Control',
+    custom: 'Custom Style',
+    ref: 'Ref Methods'
   }
 });
-
-const toggle = () => {
-  state.paused = !state.paused;
-};
-const onend = () => {
-  console.log('countdown: ended.');
-};
-const onpaused = (v) => {
-  console.log('paused: ', v);
-};
-const onrestart = (v) => {
-  console.log('restart: ', v);
-};
-const start = () => {
-  Countdown.value.start();
-};
-
-const pause = () => {
-  Countdown.value.pause();
-};
-
-const reset = () => {
-  Countdown.value.reset();
-};
-onMounted(() => {
-  console.log(Countdown.value);
-});
-
-setTimeout(() => {
-  state.asyncEnd = Date.now() + 30 * 1000;
-}, 3000);
 </script>
-
-<style lang="scss">
-.countdown-part-box {
-  display: flex;
-  align-items: center;
-
-  .part-item {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 25px;
-    background: #e8220e;
-    color: #fff;
-    font-size: 14px;
-    border-radius: 6px;
-  }
-
-  .part-item-symbol {
-    margin: 0 5px;
-  }
-}
-</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/millisecond.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/millisecond.vue
new file mode 100644
index 0000000000..6b39f87995
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/countdown/millisecond.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-countdown :end-time="time" millisecond format="HH:mm:ss:SS" />
+</template>
+
+<script setup>
+const time = Date.now() + 60 * 1000;
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/countdown/ref.vue b/packages/nutui-taro-demo/src/exhibition/pages/countdown/ref.vue
new file mode 100644
index 0000000000..399ad65fbd
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/countdown/ref.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-space>
+    <nut-countdown ref="Countdown" time="20000" :auto-start="false" format="ss:SS" />
+    <nut-button size="mini" @click="start"> Start </nut-button>
+    <nut-button size="mini" @click="pause"> Pause </nut-button>
+    <nut-button size="mini" @click="reset"> Reset </nut-button>
+  </nut-space>
+</template>
+<script setup>
+import { ref } from 'vue';
+const Countdown = ref(null);
+const start = () => {
+  Countdown.value.start();
+};
+const pause = () => {
+  Countdown.value.pause();
+};
+const reset = () => {
+  Countdown.value.reset();
+};
+</script>
diff --git a/src/packages/__VUE/countdown/demo.vue b/src/packages/__VUE/countdown/demo.vue
deleted file mode 100644
index caaa0d076a..0000000000
--- a/src/packages/__VUE/countdown/demo.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-cell>
-      <nut-countdown :end-time="state.end" @end="onend"></nut-countdown>
-    </nut-cell>
-    <h2>{{ translate('format') }}</h2>
-    <nut-cell>
-      <nut-countdown
-        :end-time="state.end"
-        :format="`DD ${translate('day')} HH ${translate('hour')} mm ${translate('minute')} ss ${translate('second')}`"
-      />
-    </nut-cell>
-
-    <h2>{{ translate('millisecond') }}</h2>
-
-    <nut-cell>
-      <nut-countdown :end-time="state.end" millisecond format="HH:mm:ss:SS" />
-    </nut-cell>
-
-    <h2>{{ translate('serverTime') }}</h2>
-
-    <nut-cell>
-      <nut-countdown :start-time="state.serverTime" :end-time="state.end" />
-    </nut-cell>
-
-    <h2>{{ translate('async') }}</h2>
-
-    <nut-cell>
-      <nut-countdown :end-time="state.asyncEnd" />
-    </nut-cell>
-
-    <h2>{{ translate('controlTime') }}</h2>
-
-    <nut-cell>
-      <nut-countdown :end-time="state.end" :paused="state.paused" @paused="onpaused" @restart="onrestart" />
-      <div style="position: absolute; right: 10px; top: 9px">
-        <nut-button type="primary" size="small" @click="toggle">{{ state.paused ? 'start' : 'stop' }}</nut-button>
-      </div>
-    </nut-cell>
-
-    <h2>{{ translate('customStyle') }}</h2>
-
-    <nut-cell>
-      <span>
-        <nut-countdown v-model="state.resetTime" :end-time="state.end">
-          <div class="countdown-part-box">
-            <div class="part-item-symbol">{{ state.resetTime.d }}{{ translate('day') }}</div>
-            <div class="part-item h">{{ state.resetTime.h }}</div>
-            <span class="part-item-symbol">:</span>
-            <div class="part-item m">{{ state.resetTime.m }}</div>
-            <span class="part-item-symbol">:</span>
-            <div class="part-item s">{{ state.resetTime.s }}</div>
-          </div>
-        </nut-countdown>
-      </span>
-    </nut-cell>
-
-    <h2>{{ translate('handleControl') }}</h2>
-    <nut-cell>
-      <nut-countdown ref="Countdown" time="20000" :auto-start="false" format="ss:SS" />
-    </nut-cell>
-
-    <nut-grid :column-num="3">
-      <nut-grid-item
-        ><nut-button type="primary" @click="start">{{ translate('start') }}</nut-button></nut-grid-item
-      >
-      <nut-grid-item
-        ><nut-button type="primary" @click="pause">{{ translate('pause') }}</nut-button></nut-grid-item
-      >
-      <nut-grid-item
-        ><nut-button type="primary" @click="reset">{{ translate('reset') }}</nut-button></nut-grid-item
-      >
-    </nut-grid>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref, reactive } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    format: '自定义格式',
-    millisecond: '毫秒级渲染',
-    serverTime: '以服务端的时间为准',
-    async: '异步更新结束时间',
-    controlTime: '控制开始和暂停的倒计时',
-    customStyle: '自定义展示样式',
-    handleControl: '手动控制',
-    start: '开始',
-    pause: '暂停',
-    reset: '重置',
-    day: '天',
-    hour: '时',
-    minute: '分',
-    second: '秒'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    format: 'Custom Format',
-    millisecond: 'Millisecond',
-    serverTime: 'Server Time Prevails',
-    async: 'End-Time of Asyn Update',
-    controlTime: 'Manual Control',
-    customStyle: 'Custom Style',
-    handleControl: 'Handle Control',
-    start: 'Start',
-    pause: 'Pause',
-    reset: 'Reset',
-    day: 'Day',
-    hour: ':',
-    minute: ':',
-    second: ''
-  }
-});
-const Countdown = ref<any>(null);
-const state = reactive({
-  serverTime: Date.now() - 20 * 1000,
-  end: Date.now() + 60 * 1000,
-  starttime: Date.now(),
-  asyncEnd: 0,
-  paused: false,
-  resetTime: {
-    d: '1',
-    h: '00',
-    m: '00',
-    s: '00'
-  }
-});
-
-const toggle = () => {
-  state.paused = !state.paused;
-};
-const onend = () => {
-  console.log('countdown: ended.');
-};
-const onpaused = (v: any) => {
-  console.log('paused: ', v);
-};
-const onrestart = (v: any) => {
-  console.log('restart: ', v);
-};
-const start = () => {
-  Countdown.value.start();
-};
-
-const pause = () => {
-  Countdown.value.pause();
-};
-
-const reset = () => {
-  Countdown.value.reset();
-};
-onMounted(() => {
-  console.log(Countdown.value);
-});
-
-setTimeout(() => {
-  state.asyncEnd = Date.now() + 30 * 1000;
-}, 3000);
-</script>
-
-<style lang="scss" scoped>
-.countdown-part-box {
-  display: flex;
-  align-items: center;
-
-  .part-item {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    height: 25px;
-    background: #e8220e;
-    color: #fff;
-    font-size: 14px;
-    border-radius: 6px;
-  }
-
-  .part-item-symbol {
-    margin: 0 5px;
-  }
-}
-</style>
diff --git a/src/packages/__VUE/countdown/demo/basic.vue b/src/packages/__VUE/countdown/demo/basic.vue
new file mode 100644
index 0000000000..093d6cb920
--- /dev/null
+++ b/src/packages/__VUE/countdown/demo/basic.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-countdown :start-time="start" :end-time="end"></nut-countdown>
+</template>
+
+<script setup>
+const start = Date.now();
+const end = Date.now() + 60 * 1000;
+</script>
diff --git a/src/packages/__VUE/countdown/demo/control.vue b/src/packages/__VUE/countdown/demo/control.vue
new file mode 100644
index 0000000000..3bfe55d856
--- /dev/null
+++ b/src/packages/__VUE/countdown/demo/control.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-space align="center">
+    <nut-countdown :end-time="end" :paused="paused" @paused="onPaused" @restart="onRestart" />
+    <nut-button size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
+  </nut-space>
+</template>
+<script setup>
+import { ref } from 'vue';
+const paused = ref(false);
+const end = ref(Date.now() + 60 * 1000);
+
+const toggle = () => {
+  paused.value = !paused.value;
+};
+const onPaused = (v) => {
+  console.log('paused: ', v);
+};
+const onRestart = (v) => {
+  console.log('restart: ', v);
+};
+</script>
diff --git a/src/packages/__VUE/countdown/demo/custom.vue b/src/packages/__VUE/countdown/demo/custom.vue
new file mode 100644
index 0000000000..fadf5cebfe
--- /dev/null
+++ b/src/packages/__VUE/countdown/demo/custom.vue
@@ -0,0 +1,38 @@
+<template>
+  <nut-countdown v-model="time" :end-time="end">
+    <nut-space>
+      <div class="countdown-item">{{ time.d }}</div>
+      <div>:</div>
+      <div class="countdown-item">{{ time.h }}</div>
+      <div>:</div>
+      <div class="countdown-item">{{ time.m }}</div>
+      <div>:</div>
+      <div class="countdown-item">{{ time.s }}</div>
+    </nut-space>
+  </nut-countdown>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const end = ref(Date.now() + 1000 * 60 * 60 * 24 * 12);
+const time = ref({
+  d: '1',
+  h: '00',
+  m: '00',
+  s: '00'
+});
+</script>
+
+<style>
+.countdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  background: #e8220e;
+  color: #fff;
+  font-size: 14px;
+  border-radius: 6px;
+}
+</style>
diff --git a/src/packages/__VUE/countdown/demo/format.vue b/src/packages/__VUE/countdown/demo/format.vue
new file mode 100644
index 0000000000..09c1c487de
--- /dev/null
+++ b/src/packages/__VUE/countdown/demo/format.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-countdown :end-time="time" format="DD 天 HH 时 mm 分 ss 秒" />
+</template>
+
+<script setup>
+const time = Date.now() + 60 * 1000;
+</script>
diff --git a/src/packages/__VUE/countdown/demo/index.vue b/src/packages/__VUE/countdown/demo/index.vue
new file mode 100644
index 0000000000..8964685801
--- /dev/null
+++ b/src/packages/__VUE/countdown/demo/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('format') }}</h2>
+    <Format />
+
+    <h2>{{ t('millisecond') }}</h2>
+    <Millisecond />
+
+    <h2>{{ t('control') }}</h2>
+    <Control />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('ref') }}</h2>
+    <RefDemo />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Format from './format.vue';
+import Millisecond from './millisecond.vue';
+import Control from './control.vue';
+import Custom from './custom.vue';
+import RefDemo from './ref.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    format: '自定义格式',
+    millisecond: '毫秒级渲染',
+    control: '控制开始和暂停的倒计时',
+    custom: '自定义展示样式',
+    ref: 'Ref 方法'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    format: 'Custom Format',
+    millisecond: 'Millisecond',
+    control: 'Manual Control',
+    custom: 'Custom Style',
+    ref: 'Ref Methods'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/countdown/demo/millisecond.vue b/src/packages/__VUE/countdown/demo/millisecond.vue
new file mode 100644
index 0000000000..6b39f87995
--- /dev/null
+++ b/src/packages/__VUE/countdown/demo/millisecond.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-countdown :end-time="time" millisecond format="HH:mm:ss:SS" />
+</template>
+
+<script setup>
+const time = Date.now() + 60 * 1000;
+</script>
diff --git a/src/packages/__VUE/countdown/demo/ref.vue b/src/packages/__VUE/countdown/demo/ref.vue
new file mode 100644
index 0000000000..399ad65fbd
--- /dev/null
+++ b/src/packages/__VUE/countdown/demo/ref.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-space>
+    <nut-countdown ref="Countdown" time="20000" :auto-start="false" format="ss:SS" />
+    <nut-button size="mini" @click="start"> Start </nut-button>
+    <nut-button size="mini" @click="pause"> Pause </nut-button>
+    <nut-button size="mini" @click="reset"> Reset </nut-button>
+  </nut-space>
+</template>
+<script setup>
+import { ref } from 'vue';
+const Countdown = ref(null);
+const start = () => {
+  Countdown.value.start();
+};
+const pause = () => {
+  Countdown.value.pause();
+};
+const reset = () => {
+  Countdown.value.reset();
+};
+</script>
diff --git a/src/packages/__VUE/countdown/doc.en-US.md b/src/packages/__VUE/countdown/doc.en-US.md
index 2e01800bbc..8a47870315 100644
--- a/src/packages/__VUE/countdown/doc.en-US.md
+++ b/src/packages/__VUE/countdown/doc.en-US.md
@@ -16,217 +16,31 @@ app.use(Countdown);
 
 ### Basic Usage
 
-:::demo
+> demo: countdown basic
 
-```vue
-<template>
-  <nut-countdown :end-time="end"></nut-countdown>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
-
-### 自定义格式
+### Format
 
 Different countdown display text can be realized by setting the `format` attribute.
 
-:::demo
-
-```vue
-<template>
-  <nut-countdown :end-time="end" format="DD Day HH : mm : ss" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
+> demo: countdown format
 
 ### Millisecond
 
-:::demo
-
-```vue
-<template>
-  <nut-countdown :end-time="end" millisecond format="HH:mm:ss:SS" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
-
-### Server Time Prevails
-
-:::demo
-
-```vue
-<template>
-  <nut-countdown :start-time="serverTime" :end-time="end" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const serverTime = ref(Date.now() - 20 * 1000);
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
-
-### End-Time of Asyn Update
-
-:::demo
-
-```vue
-<template>
-  <nut-countdown :end-time="asyncEnd" />
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-const asyncEnd = ref(0);
-onMounted(() => {
-  setTimeout(() => {
-    asyncEnd.value = Date.now() + 30 * 1000;
-  }, 3000);
-});
-</script>
-```
-
-:::
+> demo: countdown millisecond
 
 ### Manual Control
 
 Paused and restarted the countdown with the `paused` attribute
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-countdown :end-time="end" :paused="paused" @paused="onPaused" @restart="onRestart" />
-    <div style="position:absolute;right:10px;top:9px">
-      <nut-button type="primary" size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
-    </div>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const paused = ref(false);
-const end = ref(Date.now() + 60 * 1000);
-
-const toggle = () => {
-  paused.value = !paused.value;
-};
-const onPaused = (v) => {
-  console.log('paused: ', v);
-};
-const onRestart = (v) => {
-  console.log('restart: ', v);
-};
-</script>
-```
-
-:::
+> demo: countdown control
 
 ### Custom Style
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-countdown v-model="resetTime" :end-time="end">
-      <div class="countdown-part-box">
-        <div class="part-item-symbol">{{ resetTime.d }}天</div>
-        <div class="part-item h">{{ resetTime.h }}</div>
-        <span class="part-item-symbol">:</span>
-        <div class="part-item m">{{ resetTime.m }}</div>
-        <span class="part-item-symbol">:</span>
-        <div class="part-item s">{{ resetTime.s }}</div>
-      </div>
-    </nut-countdown>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-const resetTime = ref({
-  d: '1',
-  h: '00',
-  m: '00',
-  s: '00'
-});
-</script>
-<style>
-.countdown-part-box {
-  display: flex;
-  align-items: center;
-}
-.part-item {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 25px;
-  background: #e8220e;
-  color: #fff;
-  font-size: 14px;
-  border-radius: 6px;
-}
-
-.part-item-symbol {
-  margin: 0 5px;
-}
-</style>
-```
+> demo: countdown custom
 
-:::
-
-### Handle Control
-
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-countdown time="20000" ref="Countdown" :auto-start="false" format="ss:SS" />
-  </nut-cell>
-  <nut-grid :column-num="3">
-    <nut-grid-item><nut-button type="primary" @click="start">开始</nut-button></nut-grid-item>
-    <nut-grid-item><nut-button type="primary" @click="pause">暂停</nut-button></nut-grid-item>
-    <nut-grid-item><nut-button type="primary" @click="reset">重置</nut-button></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { ref } from 'vue';
-const Countdown = ref(null);
-const start = () => {
-  Countdown.value.start();
-};
-const pause = () => {
-  Countdown.value.pause();
-};
-const reset = () => {
-  Countdown.value.reset();
-};
-</script>
-```
+### Ref Methods
 
-:::
+> demo: countdown ref
 
 ## API
 
diff --git a/src/packages/__VUE/countdown/doc.md b/src/packages/__VUE/countdown/doc.md
index 428174e3d5..70f3f387bf 100644
--- a/src/packages/__VUE/countdown/doc.md
+++ b/src/packages/__VUE/countdown/doc.md
@@ -16,219 +16,33 @@ app.use(Countdown);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-countdown :end-time="end"></nut-countdown>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
+> demo: countdown basic
 
 ### 自定义格式
 
 通过设置 `format` 属性可实现不同的倒计时展示文本
 
-:::demo
-
-```vue
-<template>
-  <nut-countdown :end-time="end" format="DD 天 HH 时 mm 分 ss 秒" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
+> demo: countdown format
 
 ### 毫秒级渲染
 
-:::demo
-
-```vue
-<template>
-  <nut-countdown :end-time="end" millisecond format="HH:mm:ss:SS" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
-
-### 以服务端的时间为准
-
-:::demo
-
-```vue
-<template>
-  <nut-countdown :start-time="serverTime" :end-time="end" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const serverTime = ref(Date.now() - 20 * 1000);
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
-
-### 异步更新结束时间
-
-:::demo
-
-```vue
-<template>
-  <nut-countdown :end-time="asyncEnd" />
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-const asyncEnd = ref(0);
-onMounted(() => {
-  setTimeout(() => {
-    asyncEnd.value = Date.now() + 30 * 1000;
-  }, 3000);
-});
-</script>
-```
-
-:::
+> demo: countdown millisecond
 
 ### 控制开始和暂停倒计时
 
 通过 `paused` 属性实现倒计时的暂停和重启
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-countdown :end-time="end" :paused="paused" @paused="onPaused" @restart="onRestart" />
-    <div style="position:absolute;right:10px;top:9px">
-      <nut-button type="primary" size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
-    </div>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const paused = ref(false);
-const end = ref(Date.now() + 60 * 1000);
-
-const toggle = () => {
-  paused.value = !paused.value;
-};
-const onPaused = (v) => {
-  console.log('paused: ', v);
-};
-const onRestart = (v) => {
-  console.log('restart: ', v);
-};
-</script>
-```
-
-:::
+> demo: countdown control
 
 ### 自定义展示样式
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-countdown v-model="resetTime" :end-time="end">
-      <div class="countdown-part-box">
-        <div class="part-item-symbol">{{ resetTime.d }}天</div>
-        <div class="part-item h">{{ resetTime.h }}</div>
-        <span class="part-item-symbol">:</span>
-        <div class="part-item m">{{ resetTime.m }}</div>
-        <span class="part-item-symbol">:</span>
-        <div class="part-item s">{{ resetTime.s }}</div>
-      </div>
-    </nut-countdown>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-const resetTime = ref({
-  d: '1',
-  h: '00',
-  m: '00',
-  s: '00'
-});
-</script>
-<style>
-.countdown-part-box {
-  display: flex;
-  align-items: center;
-}
-.part-item {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 25px;
-  background: #e8220e;
-  color: #fff;
-  font-size: 14px;
-  border-radius: 6px;
-}
-
-.part-item-symbol {
-  margin: 0 5px;
-}
-</style>
-```
+> demo: countdown custom
 
-:::
-
-### 手动控制
+### Ref 方法
 
 通过 `ref` 获取到组件实例后，可以调用 `start`、`pause`、`reset` 方法。在使用手动控制时，通过 `time` 属性实现倒计时总时长，单位为毫秒。`start-time`、`end-time` 属性失效
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-countdown time="20000" ref="Countdown" :auto-start="false" format="ss:SS" />
-  </nut-cell>
-  <nut-grid :column-num="3">
-    <nut-grid-item><nut-button type="primary" @click="start">开始</nut-button></nut-grid-item>
-    <nut-grid-item><nut-button type="primary" @click="pause">暂停</nut-button></nut-grid-item>
-    <nut-grid-item><nut-button type="primary" @click="reset">重置</nut-button></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { ref } from 'vue';
-const Countdown = ref(null);
-const start = () => {
-  Countdown.value.start();
-};
-const pause = () => {
-  Countdown.value.pause();
-};
-const reset = () => {
-  Countdown.value.reset();
-};
-</script>
-```
-
-:::
+> demo: countdown ref
 
 ## API
 
diff --git a/src/packages/__VUE/countdown/doc.taro.md b/src/packages/__VUE/countdown/doc.taro.md
index ca951c5b4f..7fbd90d6d8 100644
--- a/src/packages/__VUE/countdown/doc.taro.md
+++ b/src/packages/__VUE/countdown/doc.taro.md
@@ -16,219 +16,33 @@ app.use(Countdown);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-countdown :end-time="end"></nut-countdown>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
+> demo: countdown basic exhibition
 
 ### 自定义格式
 
 通过设置 `format` 属性可实现不同的倒计时展示文本
 
-:::demo
-
-```vue
-<template>
-  <nut-countdown :end-time="end" format="DD 天 HH 时 mm 分 ss 秒" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
+> demo: countdown format exhibition
 
 ### 毫秒级渲染
 
-:::demo
-
-```vue
-<template>
-  <nut-countdown :end-time="end" millisecond format="HH:mm:ss:SS" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
-
-### 以服务端的时间为准
-
-:::demo
-
-```vue
-<template>
-  <nut-countdown :start-time="serverTime" :end-time="end" />
-</template>
-
-<script setup>
-import { ref } from 'vue';
-const serverTime = ref(Date.now() - 20 * 1000);
-const end = ref(Date.now() + 60 * 1000);
-</script>
-```
-
-:::
-
-### 异步更新结束时间
-
-:::demo
-
-```vue
-<template>
-  <nut-countdown :end-time="asyncEnd" />
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-const asyncEnd = ref(0);
-onMounted(() => {
-  setTimeout(() => {
-    asyncEnd.value = Date.now() + 30 * 1000;
-  }, 3000);
-});
-</script>
-```
-
-:::
+> demo: countdown millisecond exhibition
 
 ### 控制开始和暂停倒计时
 
 通过 `paused` 属性实现倒计时的暂停和重启
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-countdown :end-time="end" :paused="paused" @paused="onPaused" @restart="onRestart" />
-    <div style="position:absolute;right:10px;top:9px">
-      <nut-button type="primary" size="small" @click="toggle">{{ paused ? 'start' : 'stop' }}</nut-button>
-    </div>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const paused = ref(false);
-const end = ref(Date.now() + 60 * 1000);
-
-const toggle = () => {
-  paused.value = !paused.value;
-};
-const onPaused = (v) => {
-  console.log('paused: ', v);
-};
-const onRestart = (v) => {
-  console.log('restart: ', v);
-};
-</script>
-```
-
-:::
+> demo: countdown control exhibition
 
 ### 自定义展示样式
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-countdown v-model="resetTime" :end-time="end">
-      <div class="countdown-part-box">
-        <div class="part-item-symbol">{{ resetTime.d }}天</div>
-        <div class="part-item h">{{ resetTime.h }}</div>
-        <span class="part-item-symbol">:</span>
-        <div class="part-item m">{{ resetTime.m }}</div>
-        <span class="part-item-symbol">:</span>
-        <div class="part-item s">{{ resetTime.s }}</div>
-      </div>
-    </nut-countdown>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const end = ref(Date.now() + 60 * 1000);
-const resetTime = ref({
-  d: '1',
-  h: '00',
-  m: '00',
-  s: '00'
-});
-</script>
-<style>
-.countdown-part-box {
-  display: flex;
-  align-items: center;
-}
-.part-item {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 25px;
-  background: #e8220e;
-  color: #fff;
-  font-size: 14px;
-  border-radius: 6px;
-}
-
-.part-item-symbol {
-  margin: 0 5px;
-}
-</style>
-```
+> demo: countdown custom exhibition
 
-:::
-
-### 手动控制
+### Ref 方法
 
 通过 `ref` 获取到组件实例后，可以调用 `start`、`pause`、`reset` 方法。在使用手动控制时，通过 `time` 属性实现倒计时总时长，单位为毫秒。`start-time`、`end-time` 属性失效
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-countdown time="20000" ref="Countdown" :auto-start="false" format="ss:SS" />
-  </nut-cell>
-  <nut-grid :column-num="3">
-    <nut-grid-item><nut-button type="primary" @click="start">开始</nut-button></nut-grid-item>
-    <nut-grid-item><nut-button type="primary" @click="pause">暂停</nut-button></nut-grid-item>
-    <nut-grid-item><nut-button type="primary" @click="reset">重置</nut-button></nut-grid-item>
-  </nut-grid>
-</template>
-<script setup>
-import { ref } from 'vue';
-const Countdown = ref(null);
-const start = () => {
-  Countdown.value.start();
-};
-const pause = () => {
-  Countdown.value.pause();
-};
-const reset = () => {
-  Countdown.value.reset();
-};
-</script>
-```
-
-:::
+> demo: countdown ref exhibition
 
 ## API