From b473472a60e5de69b49be399b09a1f50eb643d01 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Mon, 25 Dec 2023 11:06:31 +0800
Subject: [PATCH] chore(badge): split demo (#2799)

---
 .../src/exhibition/pages/badge/basic.vue      |  16 ++
 .../src/exhibition/pages/badge/color.vue      |  16 ++
 .../src/exhibition/pages/badge/icon.vue       |  26 +++
 .../src/exhibition/pages/badge/index.vue      | 121 ++++-------
 .../src/exhibition/pages/badge/max.vue        |  13 ++
 .../src/exhibition/pages/badge/position.vue   |  13 ++
 src/packages/__VUE/badge/demo.vue             | 121 -----------
 src/packages/__VUE/badge/demo/basic.vue       |  16 ++
 src/packages/__VUE/badge/demo/color.vue       |  16 ++
 src/packages/__VUE/badge/demo/icon.vue        |  26 +++
 src/packages/__VUE/badge/demo/index.vue       |  52 +++++
 src/packages/__VUE/badge/demo/max.vue         |  13 ++
 src/packages/__VUE/badge/demo/position.vue    |  13 ++
 src/packages/__VUE/badge/doc.en-US.md         | 189 +-----------------
 src/packages/__VUE/badge/doc.md               | 189 +-----------------
 src/packages/__VUE/badge/doc.taro.md          | 189 +-----------------
 16 files changed, 270 insertions(+), 759 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/badge/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/badge/color.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/badge/icon.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/badge/max.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/badge/position.vue
 delete mode 100644 src/packages/__VUE/badge/demo.vue
 create mode 100644 src/packages/__VUE/badge/demo/basic.vue
 create mode 100644 src/packages/__VUE/badge/demo/color.vue
 create mode 100644 src/packages/__VUE/badge/demo/icon.vue
 create mode 100644 src/packages/__VUE/badge/demo/index.vue
 create mode 100644 src/packages/__VUE/badge/demo/max.vue
 create mode 100644 src/packages/__VUE/badge/demo/position.vue

diff --git a/packages/nutui-taro-demo/src/exhibition/pages/badge/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/badge/basic.vue
new file mode 100644
index 0000000000..b56ea1cb9e
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/badge/basic.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <nut-badge :value="8">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge dot>
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/badge/color.vue b/packages/nutui-taro-demo/src/exhibition/pages/badge/color.vue
new file mode 100644
index 0000000000..25cd3bbf51
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/badge/color.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <nut-badge :value="8" color="skyblue">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76" color="green">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW" color="purple">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge dot color="blue">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/badge/icon.vue b/packages/nutui-taro-demo/src/exhibition/pages/badge/icon.vue
new file mode 100644
index 0000000000..34f2faf182
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/badge/icon.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <nut-badge>
+      <template #icon>
+        <Check color="#ffffff" size="12px"></Check>
+      </template>
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge>
+      <template #icon>
+        <Link color="#ffffff" size="12px"></Link>
+      </template>
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge>
+      <template #icon>
+        <Download color="#ffffff" size="12px"></Download>
+      </template>
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Check, Link, Download } from '@nutui/icons-vue-taro';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/badge/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/badge/index.vue
index e27588eb68..f20e9539bb 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/badge/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/badge/index.vue
@@ -1,97 +1,46 @@
 <template>
   <Demo class="badge-demo">
-    <h2>基础用法</h2>
-    <nut-row>
-      <nut-badge :value="8">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge :value="76">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge value="NEW">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge value="NEW" bubble>
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge dot>
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-    </nut-row>
-    <h2>最大值</h2>
-    <nut-row>
-      <nut-badge :value="200" :max="9">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge :value="200" :max="20">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge :value="200" :max="99">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-    </nut-row>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>自定义颜色</h2>
-    <nut-row>
-      <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-    </nut-row>
+    <h2>{{ t('max') }}</h2>
+    <Max />
 
-    <h2>自定义徽标内容</h2>
-    <nut-row>
-      <nut-badge>
-        <template #icon>
-          <Check color="#ffffff" size="12px"></Check>
-        </template>
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge>
-        <template #icon>
-          <Link color="#ffffff" size="12px"></Link>
-        </template>
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge>
-        <template #icon>
-          <Download color="#ffffff" size="12px"></Download>
-        </template>
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-    </nut-row>
+    <h2>{{ t('color') }}</h2>
+    <Color />
 
-    <h2>自定义位置</h2>
-    <nut-row>
-      <nut-badge :value="8" top="5" right="5">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge :value="76" top="10" right="10">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge value="NEW">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-    </nut-row>
+    <h2>{{ t('icon') }}</h2>
+    <IconDemo />
 
-    <h2>独立展示</h2>
-    <nut-row>
-      <nut-badge :value="8"> </nut-badge>
-      <nut-badge :value="76"> </nut-badge>
-      <nut-badge value="NEW"> </nut-badge>
-    </nut-row>
+    <h2>{{ t('position') }}</h2>
+    <Position />
   </Demo>
 </template>
-<script lang="ts" setup>
-import { Check, Link, Download } from '@nutui/icons-vue-taro';
+
+<script setup lang="ts">
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Max from './max.vue';
+import Color from './color.vue';
+import IconDemo from './icon.vue';
+import Position from './position.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    max: '最大值',
+    color: '自定义颜色',
+    icon: '自定义徽标内容',
+    position: '自定义位置'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    max: 'Max',
+    color: 'Custom Color',
+    icon: 'Custom Content',
+    position: 'Custom Position '
+  }
+});
 </script>
 
 <style lang="scss">
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/badge/max.vue b/packages/nutui-taro-demo/src/exhibition/pages/badge/max.vue
new file mode 100644
index 0000000000..3e90cc1f84
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/badge/max.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <nut-badge :value="200" :max="9">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="200" :max="20">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="200" :max="99">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/badge/position.vue b/packages/nutui-taro-demo/src/exhibition/pages/badge/position.vue
new file mode 100644
index 0000000000..6b270a2d8f
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/badge/position.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <nut-badge :value="8" top="5" right="5">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76" top="10" right="10">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
diff --git a/src/packages/__VUE/badge/demo.vue b/src/packages/__VUE/badge/demo.vue
deleted file mode 100644
index 3d7d7ef51f..0000000000
--- a/src/packages/__VUE/badge/demo.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
-  <view class="demo">
-    <h2>{{ translate('title') }}</h2>
-    <nut-row>
-      <nut-badge :value="8">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge :value="76">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge value="NEW">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge value="NEW" bubble>
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge dot>
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-    </nut-row>
-    <h2>{{ translate('title1') }}</h2>
-    <nut-row>
-      <nut-badge :value="200" :max="9">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge :value="200" :max="20">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge :value="200" :max="99">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-    </nut-row>
-
-    <h2>{{ translate('title2') }}</h2>
-    <nut-row>
-      <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-    </nut-row>
-
-    <h2>{{ translate('title3') }}</h2>
-    <nut-row>
-      <nut-badge>
-        <template #icon>
-          <Check color="#ffffff" width="12px" height="12px"></Check>
-        </template>
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge>
-        <template #icon>
-          <IconLink color="#ffffff" width="12px" height="12px"> </IconLink>
-        </template>
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge>
-        <template #icon>
-          <Download color="#ffffff" width="12px" height="12px"></Download>
-        </template>
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-    </nut-row>
-
-    <h2>{{ translate('title4') }}</h2>
-    <nut-row>
-      <nut-badge :value="8" top="5" right="5">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge :value="76" top="10" right="10">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-      <nut-badge value="NEW">
-        <nut-avatar shape="square"></nut-avatar>
-      </nut-badge>
-    </nut-row>
-
-    <h2>{{ translate('title5') }}</h2>
-    <nut-row>
-      <nut-badge :value="8"> </nut-badge>
-      <nut-badge :value="76"> </nut-badge>
-      <nut-badge value="NEW"> </nut-badge>
-    </nut-row>
-  </view>
-</template>
-
-<script setup lang="ts">
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { Check, Download, Link as IconLink } from '@nutui/icons-vue';
-const translate = useTranslate({
-  'zh-CN': {
-    title: '基础用法',
-    title1: '最大值',
-    title2: '自定义颜色',
-    title3: '自定义徽标内容',
-    title4: '自定义位置',
-    title5: '独立展示'
-  },
-  'en-US': {
-    title: 'Basic Usage',
-    title1: 'Max',
-    title2: 'Custom Color',
-    title3: 'Custom Content',
-    title4: 'Custom Position ',
-    title5: 'Standalone'
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
diff --git a/src/packages/__VUE/badge/demo/basic.vue b/src/packages/__VUE/badge/demo/basic.vue
new file mode 100644
index 0000000000..b56ea1cb9e
--- /dev/null
+++ b/src/packages/__VUE/badge/demo/basic.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <nut-badge :value="8">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge dot>
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
diff --git a/src/packages/__VUE/badge/demo/color.vue b/src/packages/__VUE/badge/demo/color.vue
new file mode 100644
index 0000000000..25cd3bbf51
--- /dev/null
+++ b/src/packages/__VUE/badge/demo/color.vue
@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <nut-badge :value="8" color="skyblue">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76" color="green">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW" color="purple">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge dot color="blue">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
diff --git a/src/packages/__VUE/badge/demo/icon.vue b/src/packages/__VUE/badge/demo/icon.vue
new file mode 100644
index 0000000000..9e2dfb1d7b
--- /dev/null
+++ b/src/packages/__VUE/badge/demo/icon.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <nut-badge>
+      <template #icon>
+        <Check color="#ffffff" width="12px" height="12px"></Check>
+      </template>
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge>
+      <template #icon>
+        <Link color="#ffffff" width="12px" height="12px"></Link>
+      </template>
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge>
+      <template #icon>
+        <Download color="#ffffff" width="12px" height="12px"></Download>
+      </template>
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Check, Link, Download } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/badge/demo/index.vue b/src/packages/__VUE/badge/demo/index.vue
new file mode 100644
index 0000000000..3ab58dc33b
--- /dev/null
+++ b/src/packages/__VUE/badge/demo/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <Demo class="badge-demo">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('max') }}</h2>
+    <Max />
+
+    <h2>{{ t('color') }}</h2>
+    <Color />
+
+    <h2>{{ t('icon') }}</h2>
+    <IconDemo />
+
+    <h2>{{ t('position') }}</h2>
+    <Position />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Max from './max.vue';
+import Color from './color.vue';
+import IconDemo from './icon.vue';
+import Position from './position.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    max: '最大值',
+    color: '自定义颜色',
+    icon: '自定义徽标内容',
+    position: '自定义位置'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    max: 'Max',
+    color: 'Custom Color',
+    icon: 'Custom Content',
+    position: 'Custom Position '
+  }
+});
+</script>
+
+<style lang="scss">
+.badge-demo {
+  .nut-badge {
+    margin-right: 40px;
+  }
+}
+</style>
diff --git a/src/packages/__VUE/badge/demo/max.vue b/src/packages/__VUE/badge/demo/max.vue
new file mode 100644
index 0000000000..3e90cc1f84
--- /dev/null
+++ b/src/packages/__VUE/badge/demo/max.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <nut-badge :value="200" :max="9">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="200" :max="20">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="200" :max="99">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
diff --git a/src/packages/__VUE/badge/demo/position.vue b/src/packages/__VUE/badge/demo/position.vue
new file mode 100644
index 0000000000..6b270a2d8f
--- /dev/null
+++ b/src/packages/__VUE/badge/demo/position.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <nut-badge :value="8" top="5" right="5">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge :value="76" top="10" right="10">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+    <nut-badge value="NEW">
+      <nut-avatar shape="square"></nut-avatar>
+    </nut-badge>
+  </div>
+</template>
diff --git a/src/packages/__VUE/badge/doc.en-US.md b/src/packages/__VUE/badge/doc.en-US.md
index f0791d61cc..63019a2d80 100644
--- a/src/packages/__VUE/badge/doc.en-US.md
+++ b/src/packages/__VUE/badge/doc.en-US.md
@@ -16,202 +16,23 @@ app.use(Badge);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="76">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge value="NEW">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge dot>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge basic
 
 ### Max
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="200" :max="9">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="200" :max="20">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="200" :max="99">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge max
 
 ### Custom Color
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge color
 
 ### Custom Content
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge>
-      <template #icon>
-        <Check color="#ffffff" width="12px" height="12px"></Check>
-      </template>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge>
-      <template #icon>
-        <Link color="#ffffff" width="12px" height="12px"></Link>
-      </template>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge>
-      <template #icon>
-        <Download color="#ffffff" width="12px" height="12px"></Download>
-      </template>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<script setup>
-import { Check, Link, Download } from '@nutui/icons-vue';
-</script>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge icon
 
 ### Custom Position
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8" top="5" right="5">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="76" top="10" right="10">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge value="NEW">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
-
-### Standalone
-
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8"> </nut-badge>
-    <nut-badge :value="76"> </nut-badge>
-    <nut-badge value="NEW"> </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge position
 
 ## API
 
diff --git a/src/packages/__VUE/badge/doc.md b/src/packages/__VUE/badge/doc.md
index c06ecb4dee..b0e963cf1a 100644
--- a/src/packages/__VUE/badge/doc.md
+++ b/src/packages/__VUE/badge/doc.md
@@ -16,202 +16,23 @@ app.use(Badge);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="76">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge value="NEW">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge dot>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge basic
 
 ### 最大值
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="200" :max="9">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="200" :max="20">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="200" :max="99">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge max
 
 ### 自定义颜色
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge color
 
 ### 自定义徽标内容
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge>
-      <template #icon>
-        <Check color="#ffffff" width="12px" height="12px"></Check>
-      </template>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge>
-      <template #icon>
-        <Link color="#ffffff" width="12px" height="12px"></Link>
-      </template>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge>
-      <template #icon>
-        <Download color="#ffffff" width="12px" height="12px"></Download>
-      </template>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<script setup>
-import { Check, Link, Download } from '@nutui/icons-vue';
-</script>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge icon
 
 ### 自定义位置
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8" top="5" right="5">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="76" top="10" right="10">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge value="NEW">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
-
-### 独立展示
-
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8"> </nut-badge>
-    <nut-badge :value="76"> </nut-badge>
-    <nut-badge value="NEW"> </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge position
 
 ## API
 
diff --git a/src/packages/__VUE/badge/doc.taro.md b/src/packages/__VUE/badge/doc.taro.md
index 6e874bec5d..339565f8f2 100644
--- a/src/packages/__VUE/badge/doc.taro.md
+++ b/src/packages/__VUE/badge/doc.taro.md
@@ -16,202 +16,23 @@ app.use(Badge);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="76">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge value="NEW">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge dot>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge basic exhibition
 
 ### 最大值
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="200" :max="9">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="200" :max="20">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="200" :max="99">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge max exhibition
 
 ### 自定义颜色
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="76" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge value="NEW" color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge dot color="linear-gradient(315deg, rgba(73,143,242,1) 0%,rgba(73,101,242,1) 100%)">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge color exhibition
 
 ### 自定义徽标内容
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge>
-      <template #icon>
-        <Check color="#ffffff" size="12px"></Check>
-      </template>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge>
-      <template #icon>
-        <Link color="#ffffff" size="12px"></Link>
-      </template>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge>
-      <template #icon>
-        <Download color="#ffffff" size="12px"></Download>
-      </template>
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<script setup>
-import { Check, Link, Download } from '@nutui/icons-vue-taro';
-</script>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge icon exhibition
 
 ### 自定义位置
 
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8" top="5" right="5">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge :value="76" top="10" right="10">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-    <nut-badge value="NEW">
-      <nut-avatar shape="square"></nut-avatar>
-    </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
-
-### 独立展示
-
-:::demo
-
-```vue
-<template>
-  <div class="demo">
-    <nut-badge :value="8"> </nut-badge>
-    <nut-badge :value="76"> </nut-badge>
-    <nut-badge value="NEW"> </nut-badge>
-  </div>
-</template>
-
-<style>
-.demo {
-  padding: 30px 17px 0 17px;
-}
-.nut-badge {
-  margin-right: 40px;
-}
-</style>
-```
-
-:::
+> demo: badge position exhibition
 
 ## API