diff --git a/packages/nutui-taro-demo/src/basic/pages/button/index.vue b/packages/nutui-taro-demo/src/basic/pages/button/index.vue
index aa72797f47..9983fb3c21 100644
--- a/packages/nutui-taro-demo/src/basic/pages/button/index.vue
+++ b/packages/nutui-taro-demo/src/basic/pages/button/index.vue
@@ -16,13 +16,13 @@
     <Loading />
 
     <h2>{{ t('icon') }}</h2>
-    <Icon />
+    <IconDemo />
 
     <h2>{{ t('size') }}</h2>
     <Size />
 
     <h2>{{ t('block') }}</h2>
-    <Block />
+    <BlockDemo />
 
     <h2>{{ t('color') }}</h2>
     <Color />
@@ -36,9 +36,9 @@ import Plain from './plain.vue';
 import Disabled from './disabled.vue';
 import Shape from './shape.vue';
 import Loading from './loading.vue';
-import Icon from './icon.vue';
+import IconDemo from './icon.vue';
 import Size from './size.vue';
-import Block from './block.vue';
+import BlockDemo from './block.vue';
 import Color from './color.vue';
 const t = useTranslate({
   'zh-CN': {
diff --git a/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue b/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue
index ed8c182362..f63bff7148 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/radio/index.vue
@@ -10,7 +10,7 @@
     <Disabled />
 
     <h2>{{ t('icon') }}</h2>
-    <Icon />
+    <IconDemo />
 
     <h2>{{ t('position') }}</h2>
     <Position />
@@ -34,7 +34,7 @@ import { useTranslate } from '../../../utils';
 import Basic from './basic.vue';
 import Horizontal from './horizontal.vue';
 import Disabled from './disabled.vue';
-import Icon from './icon.vue';
+import IconDemo from './icon.vue';
 import Position from './position.vue';
 import IconSize from './icon-size.vue';
 import Shape from './shape.vue';
diff --git a/packages/nutui-taro-demo/src/dentry/pages/rate/basic.vue b/packages/nutui-taro-demo/src/dentry/pages/rate/basic.vue
new file mode 100644
index 0000000000..7176a33c0a
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/rate/basic.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/rate/color.vue b/packages/nutui-taro-demo/src/dentry/pages/rate/color.vue
new file mode 100644
index 0000000000..ab25aa4c33
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/rate/color.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" active-color="skyblue" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/rate/count.vue b/packages/nutui-taro-demo/src/dentry/pages/rate/count.vue
new file mode 100644
index 0000000000..3ca10d7e49
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/rate/count.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" :count="10" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/rate/disabled.vue b/packages/nutui-taro-demo/src/dentry/pages/rate/disabled.vue
new file mode 100644
index 0000000000..e52db6fa5c
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/rate/disabled.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" disabled />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/rate/event.vue b/packages/nutui-taro-demo/src/dentry/pages/rate/event.vue
new file mode 100644
index 0000000000..d863678825
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/rate/event.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-rate v-model="value" @change="onChange" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+const onChange = (val: number) => {
+  console.log(val);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/rate/half.vue b/packages/nutui-taro-demo/src/dentry/pages/rate/half.vue
new file mode 100644
index 0000000000..2d4f82f0fa
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/rate/half.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" allow-half />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3.5);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/rate/icon.vue b/packages/nutui-taro-demo/src/dentry/pages/rate/icon.vue
new file mode 100644
index 0000000000..297e6a0f2c
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/rate/icon.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-rate v-model="value" :custom-icon="HeartFill" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue-taro';
+const value = ref(3);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/rate/index.vue b/packages/nutui-taro-demo/src/dentry/pages/rate/index.vue
index 42dd4518f4..de0115dcb7 100644
--- a/packages/nutui-taro-demo/src/dentry/pages/rate/index.vue
+++ b/packages/nutui-taro-demo/src/dentry/pages/rate/index.vue
@@ -1,54 +1,68 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell class="cell">
-      <nut-rate v-model="state.val" />
-    </nut-cell>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>半星</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val1" allow-half></nut-rate></nut-cell>
+    <h2>{{ t('half') }}</h2>
+    <Half />
 
-    <h2>自定义 icon </h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val2" :custom-icon="HeartFill"></nut-rate></nut-cell>
+    <h2>{{ t('icon') }}</h2>
+    <IconDemo />
 
-    <h2>自定义数量</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val3" count="10"></nut-rate></nut-cell>
+    <h2>{{ t('count') }}</h2>
+    <Count />
 
-    <h2>自定义颜色</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val4" active-color="#FFC800"></nut-rate></nut-cell>
+    <h2>{{ t('color') }}</h2>
+    <Color />
 
-    <h2>禁用状态</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val5" disabled></nut-rate></nut-cell>
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
 
-    <h2>只读状态</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val6" readonly></nut-rate></nut-cell>
+    <h2>{{ t('read') }}</h2>
+    <Read />
 
-    <h2>绑定事件</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val7" @change="onChange"></nut-rate></nut-cell>
+    <h2>{{ t('event') }}</h2>
+    <Event />
 
-    <h2>自定义尺寸 35px</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val8" size="35"></nut-rate></nut-cell>
+    <h2>{{ t('size') }}</h2>
+    <Size />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { HeartFill } from '@nutui/icons-vue-taro';
-
-const state = reactive({
-  val: 3,
-  val1: 3.5,
-  val2: 3,
-  val3: 3,
-  val4: 3,
-  val5: 3,
-  val6: 3,
-  val7: 3,
-  val8: 3
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Half from './half.vue';
+import IconDemo from './icon.vue';
+import Count from './count.vue';
+import Color from './color.vue';
+import Disabled from './disabled.vue';
+import Read from './read.vue';
+import Event from './event.vue';
+import Size from './size.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    half: '半星',
+    icon: '自定义图标',
+    count: '自定义数量',
+    color: '自定义颜色',
+    disabled: '禁用状态',
+    read: '只读状态',
+    event: '绑定事件',
+    size: '自定义尺寸 35px'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    half: 'Half Star',
+    icon: 'Custom Icon',
+    count: 'Custom Count',
+    color: 'Custom Color',
+    disabled: 'Disabled',
+    read: 'Read Only',
+    event: 'event',
+    size: 'Custom size 35px'
+  }
 });
-const onChange = (val) => {
-  console.log(val);
-};
 </script>
-
-<style lang="scss" scoped></style>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/rate/read.vue b/packages/nutui-taro-demo/src/dentry/pages/rate/read.vue
new file mode 100644
index 0000000000..e846990ac4
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/rate/read.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" readonly />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/packages/nutui-taro-demo/src/dentry/pages/rate/size.vue b/packages/nutui-taro-demo/src/dentry/pages/rate/size.vue
new file mode 100644
index 0000000000..88323fda27
--- /dev/null
+++ b/packages/nutui-taro-demo/src/dentry/pages/rate/size.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" size="35" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/packages/nutui-taro-demo/src/layout/pages/divider/vertical.vue b/packages/nutui-taro-demo/src/layout/pages/divider/vertical.vue
index 2978aa7201..e7cbdff002 100644
--- a/packages/nutui-taro-demo/src/layout/pages/divider/vertical.vue
+++ b/packages/nutui-taro-demo/src/layout/pages/divider/vertical.vue
@@ -2,7 +2,7 @@
   <div :style="{ fontSize: '14px', marginLeft: '27px', color: '#909ca4' }">
     text1
     <nut-divider direction="vertical" />
-    <a href="#" style="color: #1989fa"> link </a>
+    link
     <nut-divider direction="vertical" />
     text2
   </div>
diff --git a/src/packages/__VUE/rate/demo.vue b/src/packages/__VUE/rate/demo.vue
deleted file mode 100644
index b4ed4ebc3d..0000000000
--- a/src/packages/__VUE/rate/demo.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-cell class="cell">
-      <nut-rate v-model="state.val" />
-    </nut-cell>
-
-    <h2>{{ translate('title1') }}</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val1" allow-half></nut-rate></nut-cell>
-
-    <h2>{{ translate('title2') }}</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val2" :custom-icon="HeartFill"></nut-rate></nut-cell>
-
-    <h2>{{ translate('title3') }}</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val3" count="10"></nut-rate></nut-cell>
-
-    <h2>{{ translate('title4') }}</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val4" active-color="#FFC800"></nut-rate></nut-cell>
-
-    <h2>{{ translate('title5') }}</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val5" disabled></nut-rate></nut-cell>
-
-    <h2>{{ translate('title6') }}</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val6" readonly></nut-rate></nut-cell>
-
-    <h2>{{ translate('title7') }}</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val7" @change="onChange"></nut-rate></nut-cell>
-
-    <h2>{{ translate('title8') }}</h2>
-    <nut-cell class="cell"><nut-rate v-model="state.val8" size="35"></nut-rate></nut-cell>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive } from 'vue';
-import { HeartFill } from '@nutui/icons-vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { showToast } from '@/packages/nutui.vue';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    title1: '半星',
-    title2: '自定义 icon',
-    title3: '自定义数量',
-    title4: '自定义颜色',
-    title5: '禁用状态',
-    title6: '只读状态',
-    title7: '绑定事件',
-    title8: '自定义尺寸 35px'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    title1: 'Half Star',
-    title2: 'Custom icon',
-    title3: 'Custom quantity',
-    title4: 'Custom color',
-    title5: 'disabled state',
-    title6: 'read-only status',
-    title7: 'bind event',
-    title8: 'Custom size 35px'
-  }
-});
-const state = reactive({
-  val: 3,
-  val1: 3.5,
-  val2: 3,
-  val3: 3,
-  val4: 3,
-  val5: 3,
-  val6: 3,
-  val7: 3,
-  val8: 3
-});
-const onChange = (val: string) => {
-  showToast.text(val);
-};
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/packages/__VUE/rate/demo/basic.vue b/src/packages/__VUE/rate/demo/basic.vue
new file mode 100644
index 0000000000..7176a33c0a
--- /dev/null
+++ b/src/packages/__VUE/rate/demo/basic.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/src/packages/__VUE/rate/demo/color.vue b/src/packages/__VUE/rate/demo/color.vue
new file mode 100644
index 0000000000..ab25aa4c33
--- /dev/null
+++ b/src/packages/__VUE/rate/demo/color.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" active-color="skyblue" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/src/packages/__VUE/rate/demo/count.vue b/src/packages/__VUE/rate/demo/count.vue
new file mode 100644
index 0000000000..3ca10d7e49
--- /dev/null
+++ b/src/packages/__VUE/rate/demo/count.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" :count="10" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/src/packages/__VUE/rate/demo/disabled.vue b/src/packages/__VUE/rate/demo/disabled.vue
new file mode 100644
index 0000000000..e52db6fa5c
--- /dev/null
+++ b/src/packages/__VUE/rate/demo/disabled.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" disabled />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/src/packages/__VUE/rate/demo/event.vue b/src/packages/__VUE/rate/demo/event.vue
new file mode 100644
index 0000000000..d863678825
--- /dev/null
+++ b/src/packages/__VUE/rate/demo/event.vue
@@ -0,0 +1,10 @@
+<template>
+  <nut-rate v-model="value" @change="onChange" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+const onChange = (val: number) => {
+  console.log(val);
+};
+</script>
diff --git a/src/packages/__VUE/rate/demo/half.vue b/src/packages/__VUE/rate/demo/half.vue
new file mode 100644
index 0000000000..2d4f82f0fa
--- /dev/null
+++ b/src/packages/__VUE/rate/demo/half.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" allow-half />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3.5);
+</script>
diff --git a/src/packages/__VUE/rate/demo/icon.vue b/src/packages/__VUE/rate/demo/icon.vue
new file mode 100644
index 0000000000..9b0c95caf5
--- /dev/null
+++ b/src/packages/__VUE/rate/demo/icon.vue
@@ -0,0 +1,8 @@
+<template>
+  <nut-rate v-model="value" :custom-icon="HeartFill" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { HeartFill } from '@nutui/icons-vue';
+const value = ref(3);
+</script>
diff --git a/src/packages/__VUE/rate/demo/index.vue b/src/packages/__VUE/rate/demo/index.vue
new file mode 100644
index 0000000000..435523ef6b
--- /dev/null
+++ b/src/packages/__VUE/rate/demo/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('half') }}</h2>
+    <Half />
+
+    <h2>{{ t('icon') }}</h2>
+    <Icon />
+
+    <h2>{{ t('count') }}</h2>
+    <Count />
+
+    <h2>{{ t('color') }}</h2>
+    <Color />
+
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
+
+    <h2>{{ t('read') }}</h2>
+    <Read />
+
+    <h2>{{ t('event') }}</h2>
+    <Event />
+
+    <h2>{{ t('size') }}</h2>
+    <Size />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Half from './half.vue';
+import Icon from './icon.vue';
+import Count from './count.vue';
+import Color from './color.vue';
+import Disabled from './disabled.vue';
+import Read from './read.vue';
+import Event from './event.vue';
+import Size from './size.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    half: '半星',
+    icon: '自定义图标',
+    count: '自定义数量',
+    color: '自定义颜色',
+    disabled: '禁用状态',
+    read: '只读状态',
+    event: '绑定事件',
+    size: '自定义尺寸 35px'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    half: 'Half Star',
+    icon: 'Custom Icon',
+    count: 'Custom Count',
+    color: 'Custom Color',
+    disabled: 'Disabled',
+    read: 'Read Only',
+    event: 'event',
+    size: 'Custom size 35px'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/rate/demo/read.vue b/src/packages/__VUE/rate/demo/read.vue
new file mode 100644
index 0000000000..e846990ac4
--- /dev/null
+++ b/src/packages/__VUE/rate/demo/read.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" readonly />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/src/packages/__VUE/rate/demo/size.vue b/src/packages/__VUE/rate/demo/size.vue
new file mode 100644
index 0000000000..88323fda27
--- /dev/null
+++ b/src/packages/__VUE/rate/demo/size.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-rate v-model="value" size="35" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref(3);
+</script>
diff --git a/src/packages/__VUE/rate/doc.en-US.md b/src/packages/__VUE/rate/doc.en-US.md
index a09f0a6482..fe181b2ec2 100644
--- a/src/packages/__VUE/rate/doc.en-US.md
+++ b/src/packages/__VUE/rate/doc.en-US.md
@@ -16,175 +16,63 @@ app.use(Rate);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate basic
 
-### half star
+### Half Star
 
-:::demo
-
-```vue
-<template>
-  <nut-rate allow-half v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3.5);
-</script>
-```
+> demo: rate half
 
-:::
+### Custom Icon
 
-### Custom icon
-
-:::demo
-
-```vue
-<template>
-  <nut-rate :custom-icon="HeartFill" v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-import { HeartFill } from '@nutui/icons-vue';
-const value = ref(3);
-</script>
-```
+> demo: rate icon
 
-:::
+### Custom Count
 
-### Custom Quantity
-
-:::demo
-
-```vue
-<template>
-  <nut-rate count="10" v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate count
 
 ### Custom Color
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" active-color="#FFC800" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
-
-### Disabled state
+> demo: rate color
 
-:::demo
-
-```vue
-<template>
-  <nut-rate disabled v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
+### Disabled
 
-:::
+> demo: rate disabled
 
-### read-only status
-
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" readonly />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
+### Read Only
 
-:::
+> demo: rate read
 
-### Binding events
+### Binding Event
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" @change="onChange" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-const onChange = (val) => {
-  console.log(val);
-};
-</script>
-```
-
-:::
+> demo: rate event
 
 ### Custom Size 35px
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" size="35" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate size
 
 ## API
 
 ### Props
 
-| Attribute    | Description                                                                                     | Type             | Default     |
-| ------------ | ----------------------------------------------------------------------------------------------- | ---------------- | ----------- |
-| v-model      | The current number of stars, you can use v-model to bind data in both directions                | number \| string | -           |
-| count        | Total number \| string of stars                                                                 | number \| string | `5`         |
-| active-color | Icon selection color                                                                            | string           | `#fa200c`   |
-| void-color   | Icon unselected color                                                                           | string           | `#ccc`      |
-| allow-half   | half star                                                                                       | boolean          | `false`     |
-| readonly     | read-only                                                                                       | boolean          | `false`     |
-| disabled     | whether to disable                                                                              | boolean          | `false`     |
-| spacing      | spacing                                                                                         | number \| string | `20`        |
-| touchable    | Whether to allow select rate by touch gesture                                                   | boolean          | `true`      |
-| size         | `Icon` custom size , eg `20px` `2em` `2rem`                                                     | number \| string | -           |
-| custom-icon  | custom `Icon`, set [VNode](https://vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode \| h       | `StarFillN` |
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model | The current number of stars, you can use v-model to bind data in both directions | number \| string | - |
+| count | Total number \| string of stars | number \| string | `5` |
+| active-color | Icon selection color | string | `#fa200c` |
+| void-color | Icon unselected color | string | `#ccc` |
+| allow-half | half star | boolean | `false` |
+| readonly | read-only | boolean | `false` |
+| disabled | whether to disable | boolean | `false` |
+| spacing | spacing | number \| string | `20` |
+| touchable | Whether to allow select rate by touch gesture | boolean | `true` |
+| size | `Icon` custom size , eg `20px` `2em` `2rem` | number \| string | - |
+| custom-icon | custom `Icon`, set [VNode](https://vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode \| h | `StarFillN` |
 
 ### Events
 
-| Event  | Description                                                | Arguments |
-| ------ | ---------------------------------------------------------- | --------- |
-| change | An event that fires whenever the current score is modified | val       |
+| Event | Description | Arguments |
+| --- | --- | --- |
+| change | An event that fires whenever the current score is modified | val |
 
 ## Theming
 
@@ -192,7 +80,7 @@ const value = ref(3);
 
 The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/component/configprovider).
 
-| Name                       | Default Value              |
-| -------------------------- | -------------------------- |
-| --nut-rate-icon-color      | _var(--nut-primary-color)_ |
+| Name | Default Value |
+| --- | --- |
+| --nut-rate-icon-color | _var(--nut-primary-color)_ |
 | --nut-rate-icon-void-color | _var(--nut-disable-color)_ |
diff --git a/src/packages/__VUE/rate/doc.md b/src/packages/__VUE/rate/doc.md
index 8c89adda3d..8ba4912ee3 100644
--- a/src/packages/__VUE/rate/doc.md
+++ b/src/packages/__VUE/rate/doc.md
@@ -16,175 +16,63 @@ app.use(Rate);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate basic
 
 ### 半星
 
-:::demo
-
-```vue
-<template>
-  <nut-rate allow-half v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3.5);
-</script>
-```
-
-:::
+> demo: rate half
 
 ### 自定义 icon
 
-:::demo
-
-```vue
-<template>
-  <nut-rate :custom-icon="HeartFill" v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-import { HeartFill } from '@nutui/icons-vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate icon
 
 ### 自定义数量
 
-:::demo
-
-```vue
-<template>
-  <nut-rate count="10" v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate count
 
 ### 自定义颜色
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" active-color="#FFC800" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate color
 
 ### 禁用状态
 
-:::demo
-
-```vue
-<template>
-  <nut-rate disabled v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate disabled
 
 ### 只读状态
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" readonly />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate read
 
 ### 绑定事件
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" @change="onChange" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-const onChange = (val) => {
-  console.log(val);
-};
-</script>
-```
-
-:::
+> demo: rate event
 
 ### 自定义尺寸 35px
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" size="35" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate size
 
 ## API
 
 ### Props
 
-| 参数         | 说明                                                                                                | 类型             | 默认值      |
-| ------------ | --------------------------------------------------------------------------------------------------- | ---------------- | ----------- |
-| v-model      | 当前 `star` 数，可使用 `v-model` 双向绑定数据                                                       | number \| string | -           |
-| count        | `star` 总数                                                                                         | number \| string | `5`         |
-| active-color | 图标选中颜色                                                                                        | string           | `#fa200c`   |
-| void-color   | 图标未选中颜色                                                                                      | string           | `#ccc`      |
-| allow-half   | 是否半星                                                                                            | boolean          | `false`     |
-| readonly     | 是否只读                                                                                            | boolean          | `false`     |
-| disabled     | 是否禁用                                                                                            | boolean          | `false`     |
-| spacing      | 间距                                                                                                | number \| string | `20`        |
-| touchable    | 是否可以通过滑动手势选择评分                                                                        | boolean          | `true`      |
-| size         | `Icon` 尺寸大小，如 `20px` `2em` `2rem`                                                             | number \| string | -           |
-| custom-icon  | 自定义 `Icon`, 传入 [VNode](https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode            | `StarFillN` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前 `star` 数，可使用 `v-model` 双向绑定数据 | number \| string | - |
+| count | `star` 总数 | number \| string | `5` |
+| active-color | 图标选中颜色 | string | `#fa200c` |
+| void-color | 图标未选中颜色 | string | `#ccc` |
+| allow-half | 是否半星 | boolean | `false` |
+| readonly | 是否只读 | boolean | `false` |
+| disabled | 是否禁用 | boolean | `false` |
+| spacing | 间距 | number \| string | `20` |
+| touchable | 是否可以通过滑动手势选择评分 | boolean | `true` |
+| size | `Icon` 尺寸大小，如 `20px` `2em` `2rem` | number \| string | - |
+| custom-icon | 自定义 `Icon`, 传入 [VNode](https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode | `StarFillN` |
 
 ### Events
 
-| 事件名 | 说明                       | 回调参数 |
-| ------ | -------------------------- | -------- |
-| change | 当前分值修改时时触发的事件 | 当前值   |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 当前分值修改时时触发的事件 | 当前值 |
 
 ## 主题定制
 
@@ -192,7 +80,7 @@ const value = ref(3);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                       | 默认值                     |
-| -------------------------- | -------------------------- |
-| --nut-rate-icon-color      | _var(--nut-primary-color)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-rate-icon-color | _var(--nut-primary-color)_ |
 | --nut-rate-icon-void-color | _var(--nut-disable-color)_ |
diff --git a/src/packages/__VUE/rate/doc.taro.md b/src/packages/__VUE/rate/doc.taro.md
index c6b5784f06..0a4f2a4f2f 100644
--- a/src/packages/__VUE/rate/doc.taro.md
+++ b/src/packages/__VUE/rate/doc.taro.md
@@ -16,174 +16,62 @@ app.use(Rate);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate basic dentry
 
 ### 半星
 
-:::demo
-
-```vue
-<template>
-  <nut-rate allow-half v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3.5);
-</script>
-```
-
-:::
+> demo: rate half dentry
 
 ### 自定义 icon
 
-:::demo
-
-```vue
-<template>
-  <nut-rate :custom-icon="HeartFill" v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-import { HeartFill } from '@nutui/icons-vue-taro';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate icon dentry
 
 ### 自定义数量
 
-:::demo
-
-```vue
-<template>
-  <nut-rate count="10" v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate count dentry
 
 ### 自定义颜色
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" active-color="#FFC800" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate color dentry
 
 ### 禁用状态
 
-:::demo
-
-```vue
-<template>
-  <nut-rate disabled v-model="value" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate disabled dentry
 
 ### 只读状态
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" readonly />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate read dentry
 
 ### 绑定事件
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" @change="onChange" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-const onChange = (val) => {
-  console.log(val);
-};
-</script>
-```
-
-:::
+> demo: rate event dentry
 
 ### 自定义尺寸 35px
 
-:::demo
-
-```vue
-<template>
-  <nut-rate v-model="value" size="35" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref(3);
-</script>
-```
-
-:::
+> demo: rate size dentry
 
 ## API
 
 ### Props
 
-| 参数         | 说明                                                                                                | 类型             | 默认值      |
-| ------------ | --------------------------------------------------------------------------------------------------- | ---------------- | ----------- |
-| v-model      | 当前 `star` 数，可使用 `v-model` 双向绑定数据                                                       | number \| string | -           |
-| count        | `star` 总数                                                                                         | number \| string | `5`         |
-| active-color | 图标选中颜色                                                                                        | string           | `#fa200c`   |
-| void-color   | 图标未选中颜色                                                                                      | string           | `#ccc`      |
-| allow-half   | 是否半星                                                                                            | boolean          | `false`     |
-| readonly     | 是否只读                                                                                            | boolean          | `false`     |
-| disabled     | 是否禁用                                                                                            | boolean          | `false`     |
-| spacing      | 间距                                                                                                | number \| string | `20`        |
-| size         | `Icon` 尺寸大小，如 `20px` `2em` `2rem`                                                             | number \| string | -           |
-| custom-icon  | 自定义 `Icon`, 传入 [VNode](https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode            | `StarFillN` |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 当前 `star` 数，可使用 `v-model` 双向绑定数据 | number \| string | - |
+| count | `star` 总数 | number \| string | `5` |
+| active-color | 图标选中颜色 | string | `#fa200c` |
+| void-color | 图标未选中颜色 | string | `#ccc` |
+| allow-half | 是否半星 | boolean | `false` |
+| readonly | 是否只读 | boolean | `false` |
+| disabled | 是否禁用 | boolean | `false` |
+| spacing | 间距 | number \| string | `20` |
+| size | `Icon` 尺寸大小，如 `20px` `2em` `2rem` | number \| string | - |
+| custom-icon | 自定义 `Icon`, 传入 [VNode](https://cn.vuejs.org/guide/extras/render-function.html#creating-vnodes) | VNode | `StarFillN` |
 
 ### Events
 
-| 事件名 | 说明                       | 回调参数 |
-| ------ | -------------------------- | -------- |
-| change | 当前分值修改时时触发的事件 | 当前值   |
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 当前分值修改时时触发的事件 | 当前值 |
 
 ## 主题定制
 
@@ -191,7 +79,7 @@ const value = ref(3);
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
 
-| 名称                       | 默认值                     |
-| -------------------------- | -------------------------- |
-| --nut-rate-icon-color      | _var(--nut-primary-color)_ |
+| 名称 | 默认值 |
+| --- | --- |
+| --nut-rate-icon-color | _var(--nut-primary-color)_ |
 | --nut-rate-icon-void-color | _var(--nut-disable-color)_ |