From 0b223049f7aae9bf5717544fae89a1dce958a5da Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Fri, 22 Dec 2023 00:55:20 +0800
Subject: [PATCH] chore(tabs): split demo (#2787)

---
 .../src/nav/pages/tabs/auto-height.vue        |  16 ++
 .../src/nav/pages/tabs/basic.vue              |  11 +
 .../src/nav/pages/tabs/custom.vue             |  50 ++++
 .../src/nav/pages/tabs/index.vue              | 192 +++++---------
 .../src/nav/pages/tabs/scroll.vue             |  12 +
 .../src/nav/pages/tabs/size.vue               |  21 ++
 .../src/nav/pages/tabs/smile.vue              |  11 +
 .../src/nav/pages/tabs/swipeable.vue          |  11 +
 .../src/nav/pages/tabs/vertical-smile.vue     |  11 +
 .../src/nav/pages/tabs/vertical.vue           |  12 +
 src/packages/__VUE/tabs/demo.vue              | 162 ------------
 src/packages/__VUE/tabs/demo/auto-height.vue  |  16 ++
 src/packages/__VUE/tabs/demo/basic.vue        |  11 +
 src/packages/__VUE/tabs/demo/custom.vue       |  50 ++++
 src/packages/__VUE/tabs/demo/index.vue        |  68 +++++
 src/packages/__VUE/tabs/demo/scroll.vue       |  12 +
 src/packages/__VUE/tabs/demo/size.vue         |  21 ++
 src/packages/__VUE/tabs/demo/smile.vue        |  11 +
 src/packages/__VUE/tabs/demo/swipeable.vue    |  11 +
 .../__VUE/tabs/demo/vertical-smile.vue        |  11 +
 src/packages/__VUE/tabs/demo/vertical.vue     |  12 +
 src/packages/__VUE/tabs/doc.en-US.md          | 244 ++----------------
 src/packages/__VUE/tabs/doc.md                | 242 ++---------------
 src/packages/__VUE/tabs/doc.taro.md           | 244 ++----------------
 24 files changed, 487 insertions(+), 975 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/tabs/auto-height.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/tabs/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/tabs/custom.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/tabs/scroll.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/tabs/size.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/tabs/smile.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/tabs/swipeable.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/tabs/vertical-smile.vue
 create mode 100644 packages/nutui-taro-demo/src/nav/pages/tabs/vertical.vue
 delete mode 100644 src/packages/__VUE/tabs/demo.vue
 create mode 100644 src/packages/__VUE/tabs/demo/auto-height.vue
 create mode 100644 src/packages/__VUE/tabs/demo/basic.vue
 create mode 100644 src/packages/__VUE/tabs/demo/custom.vue
 create mode 100644 src/packages/__VUE/tabs/demo/index.vue
 create mode 100644 src/packages/__VUE/tabs/demo/scroll.vue
 create mode 100644 src/packages/__VUE/tabs/demo/size.vue
 create mode 100644 src/packages/__VUE/tabs/demo/smile.vue
 create mode 100644 src/packages/__VUE/tabs/demo/swipeable.vue
 create mode 100644 src/packages/__VUE/tabs/demo/vertical-smile.vue
 create mode 100644 src/packages/__VUE/tabs/demo/vertical.vue

diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/auto-height.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/auto-height.vue
new file mode 100644
index 0000000000..76c9c5e158
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/auto-height.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-tabs v-model="value" auto-height>
+    <nut-tab-pane title="Tab 1" pane-key="1">
+      <p>Content 1</p>
+      <p>Content 1</p>
+      <p>Content 1</p>
+      <p>Content 1</p>
+    </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/basic.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/basic.vue
new file mode 100644
index 0000000000..08e2d023bd
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/basic.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/custom.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/custom.vue
new file mode 100644
index 0000000000..92bfa0a322
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/custom.vue
@@ -0,0 +1,50 @@
+<template>
+  <nut-tabs v-model="value">
+    <template #titles>
+      <div v-for="item in list" :key="item.paneKey" class="custom-tab-item" @click="value = item.paneKey">
+        <div
+          class="custom-title"
+          :class="{
+            active: value === item.paneKey
+          }"
+          >{{ item.title }}</div
+        >
+      </div>
+    </template>
+    <nut-tab-pane v-for="item in list" :key="item.paneKey" :pane-key="item.paneKey"> {{ item.title }} </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('c1');
+const list = ref([
+  {
+    title: 'Tab 1',
+    paneKey: 'c1'
+  },
+  {
+    title: 'Tab 2',
+    paneKey: 'c2'
+  },
+  {
+    title: 'Tab 3',
+    paneKey: 'c3'
+  }
+]);
+</script>
+<style>
+.custom-tab-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+.custom-title {
+  color: black;
+  cursor: pointer;
+}
+.custom-title.active {
+  color: red;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue
index a918301487..392ab94654 100644
--- a/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/index.vue
@@ -1,142 +1,68 @@
 <template>
   <Demo class="full">
-    <h2>基础用法</h2>
-    <nut-tabs v-model="state.tab1value">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>手势滑动切换</h2>
-    <nut-tabs v-model="state.tab1value" swipeable>
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>基础用法-微笑曲线</h2>
-    <nut-tabs v-model="state.tab11value" type="smile">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>通过 pane-key 匹配</h2>
-    <nut-tabs v-model="state.tab2value">
-      <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2" pane-key="1" :disabled="true"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>Tab Pane 自动高度</h2>
-    <nut-tabs v-model="state.tab2value" :auto-height="true">
-      <nut-tab-pane title="Tab 1" pane-key="0">
-        <p>Tab 1</p>
-        <p>Tab 1</p>
-        <p>Tab 1</p>
-        <p>Tab 1</p>
-      </nut-tab-pane>
-      <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>数据异步渲染 3s</h2>
-    <nut-tabs v-model="state.tab3value">
-      <nut-tab-pane v-for="item in state.list3" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-    </nut-tabs>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>数量多，滚动操作（横向）</h2>
-    <nut-tabs v-model="state.tab4value" title-scroll title-gutter="10" name="tab4value">
-      <nut-tab-pane v-for="item in state.list4" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-    </nut-tabs>
-    <h2>数量多，滚动操作（纵向）</h2>
-    <nut-tabs
-      v-model="state.tab4value"
-      title-scroll
-      name="tab4valueVertical"
-      direction="vertical"
-      style="height: 220px"
-    >
-      <nut-tab-pane v-for="item in state.list4" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-    </nut-tabs>
-    <h2>左右布局</h2>
-    <nut-tabs v-model="state.tab5value" style="height: 300px" title-scroll direction="vertical">
-      <nut-tab-pane v-for="item in state.list5" :key="item" :pane-key="item" :title="'Tab ' + item">
-        Tab {{ item }}
-      </nut-tab-pane>
-    </nut-tabs>
-    <h2>左右布局-微笑曲线</h2>
-    <nut-tabs v-model="state.tab6value" style="height: 300px" type="smile" title-scroll direction="vertical">
-      <nut-tab-pane v-for="item in state.list5" :key="item" :pane-key="item" :title="'Tab ' + item">
-        Tab {{ item }}
-      </nut-tab-pane>
-    </nut-tabs>
-    <h2>标签栏字体尺寸 large normal small </h2>
-    <nut-tabs v-model="state.tab1value" size="large">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <nut-tabs v-model="state.tab1value" size="normal">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <nut-tabs v-model="state.tab1value" size="small">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>自定义标签栏</h2>
-    <nut-tabs v-model="state.tab7value">
-      <template #titles>
-        <div
-          v-for="item in state.list6"
-          :key="item.paneKey"
-          class="nut-tabs__titles-item"
-          :class="{ active: state.tab7value == item.paneKey }"
-          @click="state.tab7value = item.paneKey"
-        >
-          <Dongdong />
-          <span class="nut-tabs__titles-item__text">{{ item.title }}</span>
-          <span class="nut-tabs__titles-item__line"></span>
-        </div>
-      </template>
-      <nut-tab-pane v-for="item in state.list6" :key="item" :pane-key="item.paneKey">
-        {{ item.title }}
-      </nut-tab-pane>
-    </nut-tabs>
+    <h2>{{ t('smile') }}</h2>
+    <Smile />
+
+    <h2>{{ t('autoHeight') }}</h2>
+    <AutoHeight />
+
+    <h2>{{ t('swipeable') }}</h2>
+    <Swipeable />
+
+    <h2>{{ t('scroll') }}</h2>
+    <Scroll />
+
+    <h2>{{ t('vertical') }}</h2>
+    <Vertical />
+
+    <h2>{{ t('verticalSmile') }}</h2>
+    <VerticalSmile />
+
+    <h2>{{ t('size') }}</h2>
+    <Size />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { Dongdong } from '@nutui/icons-vue-taro';
-import { reactive } from 'vue';
-const state = reactive({
-  tab1value: '0',
-  tab11value: '0',
-  tab2value: '0',
-  tab3value: '0',
-  tab4value: '0',
-  tab5value: '0',
-  tab6value: '0',
-  tab7value: 'c1',
-  list3: Array.from(new Array(2).keys()),
-  list4: Array.from(new Array(10).keys()),
-  list5: Array.from(new Array(2).keys()),
-  list6: [
-    {
-      title: '自定义 1',
-      paneKey: 'c1',
-      icon: 'dongdong'
-    },
-    {
-      title: '自定义 2',
-      paneKey: 'c2',
-      icon: 'JD'
-    },
-    {
-      title: '自定义 3',
-      paneKey: 'c3'
-    }
-  ]
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Smile from './smile.vue';
+import AutoHeight from './auto-height.vue';
+import Swipeable from './swipeable.vue';
+import Scroll from './scroll.vue';
+import Vertical from './vertical.vue';
+import VerticalSmile from './vertical-smile.vue';
+import Size from './size.vue';
+import Custom from './custom.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    smile: '微笑曲线',
+    autoHeight: '自动高度',
+    swipeable: '手势滑动切换',
+    scroll: '标题滚动（上下布局）',
+    vertical: '标题滚动（左右布局）',
+    verticalSmile: '左右布局-微笑曲线',
+    size: '字体尺寸',
+    custom: '自定义标签栏'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    smile: 'Smile Type',
+    autoHeight: 'Auto Height',
+    swipeable: 'Swipeable',
+    scroll: 'Title Scroll (horizontal)',
+    vertical: 'Title Scroll (vertical)',
+    verticalSmile: 'Vertical + Smile Type',
+    size: 'FontSize',
+    custom: 'Custom Tab'
+  }
 });
-setTimeout(() => {
-  state.list3.push(999);
-}, 3000);
 </script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/scroll.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/scroll.vue
new file mode 100644
index 0000000000..403cc6182c
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/scroll.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-tabs v-model="value" title-scroll title-gutter="10" name="tabName">
+    <nut-tab-pane v-for="item in list" :key="item" :title="`Tab ${item}`" :pane-key="item">
+      Content {{ item }}
+    </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+const list = new Array(10).fill(0).map((_, index) => index + 1);
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/size.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/size.vue
new file mode 100644
index 0000000000..1f66c2b0ad
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/size.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-tabs v-model="value" size="large">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+  <nut-tabs v-model="value" size="normal">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+  <nut-tabs v-model="value" size="small">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/smile.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/smile.vue
new file mode 100644
index 0000000000..b2044a7897
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/smile.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" type="smile">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/swipeable.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/swipeable.vue
new file mode 100644
index 0000000000..507dfccd4e
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/swipeable.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" swipeable>
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/vertical-smile.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/vertical-smile.vue
new file mode 100644
index 0000000000..b13706cf6d
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/vertical-smile.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" type="smile" direction="vertical">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/packages/nutui-taro-demo/src/nav/pages/tabs/vertical.vue b/packages/nutui-taro-demo/src/nav/pages/tabs/vertical.vue
new file mode 100644
index 0000000000..336cd2aab8
--- /dev/null
+++ b/packages/nutui-taro-demo/src/nav/pages/tabs/vertical.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-tabs v-model="value" direction="vertical" title-scroll style="height: 200px" name="tabName">
+    <nut-tab-pane v-for="item in list" :key="item" :title="`Tab ${item}`" :pane-key="item">
+      Content {{ item }}
+    </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+const list = new Array(10).fill(0).map((_, index) => index + 1);
+</script>
diff --git a/src/packages/__VUE/tabs/demo.vue b/src/packages/__VUE/tabs/demo.vue
deleted file mode 100644
index 8306e19640..0000000000
--- a/src/packages/__VUE/tabs/demo.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<template>
-  <div class="demo full">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-tabs v-model="state.tab1value">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>{{ translate('swipeable') }}</h2>
-    <nut-tabs v-model="state.tab1value" swipeable>
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>{{ translate('title1') }}</h2>
-    <nut-tabs v-model="state.tab11value" type="smile">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>{{ translate('title9') }}</h2>
-    <nut-tabs v-model="state.tab2value" :auto-height="true">
-      <nut-tab-pane title="Tab 1" pane-key="0">
-        <p>Tab 1</p>
-        <p>Tab 1</p>
-        <p>Tab 1</p>
-        <p>Tab 1</p>
-      </nut-tab-pane>
-      <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>{{ translate('title3') }}</h2>
-    <nut-tabs v-model="state.tab3value">
-      <nut-tab-pane v-for="item in state.list3" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-    </nut-tabs>
-
-    <h2>{{ translate('title4') }}</h2>
-    <nut-tabs v-model="state.tab4value" title-scroll title-gutter="10">
-      <nut-tab-pane v-for="item in state.list4" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-    </nut-tabs>
-    <h2>{{ translate('title10') }}</h2>
-    <nut-tabs v-model="state.tab4value" title-scroll direction="vertical" style="height: 150px">
-      <nut-tab-pane v-for="item in state.list4" :key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-    </nut-tabs>
-    <h2>{{ translate('title5') }}</h2>
-    <nut-tabs v-model="state.tab5value" style="height: 300px" title-scroll direction="vertical">
-      <nut-tab-pane v-for="item in state.list5" :key="item" :pane-key="item" :title="'Tab ' + item">
-        Tab {{ item }}
-      </nut-tab-pane>
-    </nut-tabs>
-    <h2>{{ translate('title6') }}</h2>
-    <nut-tabs v-model="state.tab6value" style="height: 300px" type="smile" title-scroll direction="vertical">
-      <nut-tab-pane v-for="item in state.list5" :key="item" :pane-key="item" :title="'Tab ' + item">
-        Tab {{ item }}
-      </nut-tab-pane>
-    </nut-tabs>
-    <h2>{{ translate('title7') }}</h2>
-    <nut-tabs v-model="state.tab8value" size="large">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <nut-tabs v-model="state.tab8value" size="normal">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <nut-tabs v-model="state.tab8value" size="small">
-      <nut-tab-pane title="Tab 1"> Tab 1 </nut-tab-pane>
-      <nut-tab-pane title="Tab 2"> Tab 2 </nut-tab-pane>
-      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
-    </nut-tabs>
-    <h2>{{ translate('title8') }}</h2>
-    <nut-tabs v-model="state.tab7value">
-      <template #titles>
-        <div
-          v-for="item in state.list6"
-          :key="item.paneKey"
-          class="nut-tabs__titles-item"
-          :class="{ active: state.tab7value == item.paneKey }"
-          @click="state.tab7value = item.paneKey"
-        >
-          <Dongdong />
-          <span class="nut-tabs__titles-item__text">{{ item.title }}</span>
-          <span class="nut-tabs__titles-item__line"></span>
-        </div>
-      </template>
-      <nut-tab-pane v-for="item in state.list6" :key="item.paneKey" :pane-key="item.paneKey">
-        {{ item.title }}
-      </nut-tab-pane>
-    </nut-tabs>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, computed } from 'vue';
-import { Dongdong } from '@nutui/icons-vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    swipeable: '手势滑动切换',
-    title1: '基础用法-微笑曲线',
-    title3: '数据异步渲染 3s',
-    title4: '数量多，滚动操作（横向）',
-    title5: '左右布局',
-    title6: '左右布局-微笑曲线',
-    title7: '标签栏字体尺寸 large normal small',
-    title8: '自定义标签栏',
-    title9: 'TabPane 自动高度',
-    title10: '数量多，滚动操作（纵向）',
-    custom: () => `自定义 ${1}`
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    swipeable: 'Swipeable',
-    title1: 'Basic Usage - Smile Curve',
-    title3: 'Data is rendered asynchronously for 3s',
-    title4: 'A large number of scrolling operations(horizontal)',
-    title5: 'Left and right layout',
-    title6: 'Left and Right Layout - Smile Curve',
-    title7: 'tab bar font size large normal small',
-    title8: 'custom tab bar',
-    title9: 'TabPane auto height',
-    title10: 'A large number of scrolling operations(vertical)',
-    custom: () => `custom ${1}`
-  }
-});
-const state = reactive({
-  tab1value: '0',
-  tab11value: '0',
-  tab2value: '0',
-  tab3value: '0',
-  tab4value: '0',
-  tab5value: '0',
-  tab6value: '0',
-  tab7value: 'c1',
-  tab8value: '0',
-  list3: Array.from(new Array(2).keys()),
-  list4: Array.from(new Array(10).keys()),
-  list5: Array.from(new Array(2).keys()),
-  list6: computed(() => [
-    {
-      title: translate('custom', 1),
-      paneKey: 'c1',
-      icon: 'dongdong'
-    },
-    {
-      title: translate('custom', 2),
-      paneKey: 'c2',
-      icon: 'JD'
-    },
-    {
-      title: translate('custom', 3),
-      paneKey: 'c3'
-    }
-  ])
-});
-setTimeout(() => {
-  state.list3.push(999);
-}, 3000);
-</script>
diff --git a/src/packages/__VUE/tabs/demo/auto-height.vue b/src/packages/__VUE/tabs/demo/auto-height.vue
new file mode 100644
index 0000000000..76c9c5e158
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/auto-height.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-tabs v-model="value" auto-height>
+    <nut-tab-pane title="Tab 1" pane-key="1">
+      <p>Content 1</p>
+      <p>Content 1</p>
+      <p>Content 1</p>
+      <p>Content 1</p>
+    </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/src/packages/__VUE/tabs/demo/basic.vue b/src/packages/__VUE/tabs/demo/basic.vue
new file mode 100644
index 0000000000..08e2d023bd
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/basic.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/src/packages/__VUE/tabs/demo/custom.vue b/src/packages/__VUE/tabs/demo/custom.vue
new file mode 100644
index 0000000000..92bfa0a322
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/custom.vue
@@ -0,0 +1,50 @@
+<template>
+  <nut-tabs v-model="value">
+    <template #titles>
+      <div v-for="item in list" :key="item.paneKey" class="custom-tab-item" @click="value = item.paneKey">
+        <div
+          class="custom-title"
+          :class="{
+            active: value === item.paneKey
+          }"
+          >{{ item.title }}</div
+        >
+      </div>
+    </template>
+    <nut-tab-pane v-for="item in list" :key="item.paneKey" :pane-key="item.paneKey"> {{ item.title }} </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('c1');
+const list = ref([
+  {
+    title: 'Tab 1',
+    paneKey: 'c1'
+  },
+  {
+    title: 'Tab 2',
+    paneKey: 'c2'
+  },
+  {
+    title: 'Tab 3',
+    paneKey: 'c3'
+  }
+]);
+</script>
+<style>
+.custom-tab-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+}
+.custom-title {
+  color: black;
+  cursor: pointer;
+}
+.custom-title.active {
+  color: red;
+}
+</style>
diff --git a/src/packages/__VUE/tabs/demo/index.vue b/src/packages/__VUE/tabs/demo/index.vue
new file mode 100644
index 0000000000..105980f942
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <Demo class="full">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('smile') }}</h2>
+    <Smile />
+
+    <h2>{{ t('autoHeight') }}</h2>
+    <AutoHeight />
+
+    <h2>{{ t('swipeable') }}</h2>
+    <Swipeable />
+
+    <h2>{{ t('scroll') }}</h2>
+    <Scroll />
+
+    <h2>{{ t('vertical') }}</h2>
+    <Vertical />
+
+    <h2>{{ t('verticalSmile') }}</h2>
+    <VerticalSmile />
+
+    <h2>{{ t('size') }}</h2>
+    <Size />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Smile from './smile.vue';
+import AutoHeight from './auto-height.vue';
+import Swipeable from './swipeable.vue';
+import Scroll from './scroll.vue';
+import Vertical from './vertical.vue';
+import VerticalSmile from './vertical-smile.vue';
+import Size from './size.vue';
+import Custom from './custom.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    smile: '微笑曲线',
+    autoHeight: '自动高度',
+    swipeable: '手势滑动切换',
+    scroll: '标题滚动（上下布局）',
+    vertical: '标题滚动（左右布局）',
+    verticalSmile: '左右布局-微笑曲线',
+    size: '字体尺寸',
+    custom: '自定义标签栏'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    smile: 'Smile Type',
+    autoHeight: 'Auto Height',
+    swipeable: 'Swipeable',
+    scroll: 'Title Scroll (horizontal)',
+    vertical: 'Title Scroll (vertical)',
+    verticalSmile: 'Vertical + Smile Type',
+    size: 'FontSize',
+    custom: 'Custom Tab'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/tabs/demo/scroll.vue b/src/packages/__VUE/tabs/demo/scroll.vue
new file mode 100644
index 0000000000..403cc6182c
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/scroll.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-tabs v-model="value" title-scroll title-gutter="10" name="tabName">
+    <nut-tab-pane v-for="item in list" :key="item" :title="`Tab ${item}`" :pane-key="item">
+      Content {{ item }}
+    </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+const list = new Array(10).fill(0).map((_, index) => index + 1);
+</script>
diff --git a/src/packages/__VUE/tabs/demo/size.vue b/src/packages/__VUE/tabs/demo/size.vue
new file mode 100644
index 0000000000..1f66c2b0ad
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/size.vue
@@ -0,0 +1,21 @@
+<template>
+  <nut-tabs v-model="value" size="large">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+  <nut-tabs v-model="value" size="normal">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+  <nut-tabs v-model="value" size="small">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/src/packages/__VUE/tabs/demo/smile.vue b/src/packages/__VUE/tabs/demo/smile.vue
new file mode 100644
index 0000000000..b2044a7897
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/smile.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" type="smile">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/src/packages/__VUE/tabs/demo/swipeable.vue b/src/packages/__VUE/tabs/demo/swipeable.vue
new file mode 100644
index 0000000000..507dfccd4e
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/swipeable.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" swipeable>
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/src/packages/__VUE/tabs/demo/vertical-smile.vue b/src/packages/__VUE/tabs/demo/vertical-smile.vue
new file mode 100644
index 0000000000..b13706cf6d
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/vertical-smile.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-tabs v-model="value" type="smile" direction="vertical">
+    <nut-tab-pane title="Tab 1" pane-key="1"> Content 1 </nut-tab-pane>
+    <nut-tab-pane title="Tab 2" pane-key="2"> Content 2 </nut-tab-pane>
+    <nut-tab-pane title="Tab 3" pane-key="3"> Content 3 </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+</script>
diff --git a/src/packages/__VUE/tabs/demo/vertical.vue b/src/packages/__VUE/tabs/demo/vertical.vue
new file mode 100644
index 0000000000..3f78252ef5
--- /dev/null
+++ b/src/packages/__VUE/tabs/demo/vertical.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-tabs v-model="value" direction="vertical" title-scroll style="height: 200px">
+    <nut-tab-pane v-for="item in list" :key="item" :title="`Tab ${item}`" :pane-key="item">
+      Content {{ item }}
+    </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const value = ref('1');
+const list = new Array(10).fill(0).map((_, index) => index + 1);
+</script>
diff --git a/src/packages/__VUE/tabs/doc.en-US.md b/src/packages/__VUE/tabs/doc.en-US.md
index dc0d0f329b..b8ceb34b21 100644
--- a/src/packages/__VUE/tabs/doc.en-US.md
+++ b/src/packages/__VUE/tabs/doc.en-US.md
@@ -17,249 +17,39 @@ app.use(TabPane);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
-
-:::
+> demo: tabs basic
 
-### Basic Usage - Smile Curve
+### Smile Type
 
-:::demo
+> demo: tabs smile
 
-```vue
-<template>
-  <nut-tabs v-model="value" swipeable>
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
+### Auto Height
 
-:::
+> demo: tabs auto-height
 
-### Match by pane-key
+### Swipeable
 
-:::demo
+> demo: tabs swipeable
 
-```vue
-<template>
-  <nut-tabs v-model="value" type="smile">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
+### Title Scroll (horizontal)
 
-:::
-
-### TabPane height auto
-
-Automatic height. When set to `true`, `nut-tabs` and `nut-tabs__content` will change with the height of the current `nut-tab-pane`.
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" auto-height>
-    <nut-tab-pane title="Tab 1" pane-key="0">
-      <p>Tab 1</p>
-      <p>Tab 1</p>
-      <p>Tab 1</p>
-      <p>Tab 1</p>
-    </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
+> demo: tabs scroll
 
-:::
-
-### Data is rendered asynchronously for 3s
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value">
-    <nut-tab-pane v-for="item in list" :title="'Tab ' + item" :pane-key="item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = ref(new Array(2).fill(0).map((_, index) => index));
-setTimeout(() => {
-  list.value.push(999);
-}, 3000);
-</script>
-```
+### Title Scroll (vertical)
 
-:::
+> demo: tabs vertical
 
-### A large number of scrolling operations
-
-The automatic scrolling direction of the title bar can be modified through the `direction` property.
-
-In the `taro` environment, `name` must be set to enable the automatic scrolling function of the title bar.
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" title-scroll title-gutter="10" name="tabName">
-    <nut-tab-pane v-for="item in list" :title="'Tab ' + item" :pane-key="item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = new Array(10).fill(0).map((_, index) => index);
-</script>
-```
+### vertical + Smile Type
 
-:::
+> demo: tabs vertical-smile
 
-### Left and right layout
+### FontSize
 
-:::demo
+> demo: tabs size
 
-```vue
-<template>
-  <nut-tabs style="height:300px" v-model="value" title-scroll direction="vertical">
-    <nut-tab-pane v-for="item in list" :pane-key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = new Array(2).fill(0).map((_, index) => index);
-</script>
-```
-
-:::
-
-### Left and Right Layout - Smile Curve
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs style="height:300px" v-model="value" type="smile" title-scroll direction="vertical">
-    <nut-tab-pane v-for="item in list" :pane-key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = new Array(2).fill(0).map((_, index) => index);
-</script>
-```
-
-:::
-
-### tab bar font size large normal small
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" size="large">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-  <nut-tabs v-model="value" size="normal">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-  <nut-tabs v-model="value" size="small">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
-
-:::
-
-### custom tab bar
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value">
-    <template #titles>
-      <div
-        class="nut-tabs__titles-item"
-        @click="value = item.paneKey"
-        :class="{ active: value == item.paneKey }"
-        :key="item.paneKey"
-        v-for="item in list"
-      >
-        <Dongdong />
-        <span class="nut-tabs__titles-item__text">{{ item.title }}</span>
-        <span class="nut-tabs__titles-item__line"></span>
-      </div>
-    </template>
-    <nut-tab-pane v-for="item in list" :pane-key="item.paneKey"> {{ item.title }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { Dongdong } from '@nutui/icons-vue';
-const value = ref('c1');
-const list = ref([
-  {
-    title: 'Custom 1',
-    paneKey: 'c1'
-  },
-  {
-    title: 'Custom 2',
-    paneKey: 'c2'
-  },
-  {
-    title: 'Custom 3',
-    paneKey: 'c3'
-  }
-]);
-</script>
-```
+### Custom Tab
 
-:::
+> demo: tabs custom
 
 ## API
 
diff --git a/src/packages/__VUE/tabs/doc.md b/src/packages/__VUE/tabs/doc.md
index 25819f175d..ff8da5286d 100644
--- a/src/packages/__VUE/tabs/doc.md
+++ b/src/packages/__VUE/tabs/doc.md
@@ -17,249 +17,39 @@ app.use(TabPane);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
-
-:::
-
-### 手势滑动切换
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" swipeable>
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
-
-:::
-
-### 基础用法-微笑曲线
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" type="smile">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
-
-:::
-
-### TabPane 自动高度
-
-自动高度。设置为 true 时，nut-tabs 和 nut-tabs\_\_content 会随着当前 nut-tab-pane 的高度而发生变化。
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" auto-height>
-    <nut-tab-pane title="Tab 1" pane-key="0">
-      <p>Tab 1</p>
-      <p>Tab 1</p>
-      <p>Tab 1</p>
-      <p>Tab 1</p>
-    </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
-
-:::
-
-### 数据异步渲染 3s
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value">
-    <nut-tab-pane v-for="item in list" :title="'Tab ' + item" :pane-key="item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = ref(new Array(2).fill(0).map((_, index) => index));
-setTimeout(() => {
-  list.value.push(999);
-}, 3000);
-</script>
-```
+> demo: tabs basic
 
-:::
+### Smile 类型
 
-### 数量多，滚动操作
+> demo: tabs smile
 
-可通过`direction`属性修改标题栏自动滚动方向。
+### 自动高度
 
-在`taro`环境下，必须设置`name`以开启标题栏自动滚动功能。
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" title-scroll title-gutter="10" name="tabName">
-    <nut-tab-pane v-for="item in list" :title="'Tab ' + item" :pane-key="item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = new Array(10).fill(0).map((_, index) => index);
-</script>
-```
+> demo: tabs auto-height
 
-:::
+### 手势滑动切换
 
-### 左右布局
+> demo: tabs swipeable
 
-:::demo
+### 标题滚动（上下布局）
 
-```vue
-<template>
-  <nut-tabs style="height:300px" v-model="value" title-scroll direction="vertical">
-    <nut-tab-pane v-for="item in list" :pane-key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = new Array(2).fill(0).map((_, index) => index);
-</script>
-```
+> demo: tabs scroll
 
-:::
+### 标题滚动（左右布局）
 
-### 左右布局-微笑曲线
+> demo: tabs vertical
 
-:::demo
+### 左右布局 + Smile 类型
 
-```vue
-<template>
-  <nut-tabs style="height:300px" v-model="value" type="smile" title-scroll direction="vertical">
-    <nut-tab-pane v-for="item in list" :pane-key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = new Array(2).fill(0).map((_, index) => index);
-</script>
-```
+> demo: tabs vertical-smile
 
-:::
-
-### 标签栏字体尺寸 large normal small
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" size="large">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-  <nut-tabs v-model="value" size="normal">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-  <nut-tabs v-model="value" size="small">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
+### 字体尺寸
 
-:::
+> demo: tabs size
 
 ### 自定义标签栏
 
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value">
-    <template #titles>
-      <div
-        class="nut-tabs__titles-item"
-        @click="value = item.paneKey"
-        :class="{ active: value == item.paneKey }"
-        :key="item.paneKey"
-        v-for="item in list"
-      >
-        <Dongdong />
-        <span class="nut-tabs__titles-item__text">{{ item.title }}</span>
-        <span class="nut-tabs__titles-item__line"></span>
-      </div>
-    </template>
-    <nut-tab-pane v-for="item in list" :pane-key="item.paneKey"> {{ item.title }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { Dongdong } from '@nutui/icons-vue';
-const value = ref('c1');
-const list = ref([
-  {
-    title: '自定义 1',
-    paneKey: 'c1'
-  },
-  {
-    title: '自定义 2',
-    paneKey: 'c2'
-  },
-  {
-    title: '自定义 3',
-    paneKey: 'c3'
-  }
-]);
-</script>
-```
-
-:::
+> demo: tabs custom
 
 ## API
 
diff --git a/src/packages/__VUE/tabs/doc.taro.md b/src/packages/__VUE/tabs/doc.taro.md
index c7e26e9cb8..af4aac0066 100644
--- a/src/packages/__VUE/tabs/doc.taro.md
+++ b/src/packages/__VUE/tabs/doc.taro.md
@@ -17,249 +17,39 @@ app.use(TabPane);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
-
-:::
-
-### 手势滑动切换
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" swipeable>
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
-
-:::
-
-### 基础用法-微笑曲线
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" type="smile">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
-
-:::
-
-### TabPane 自动高度
-
-自动高度。设置为 true 时，nut-tabs 和 nut-tabs\_\_content 会随着当前 nut-tab-pane 的高度而发生变化。
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" auto-height>
-    <nut-tab-pane title="Tab 1" pane-key="0">
-      <p>Tab 1</p>
-      <p>Tab 1</p>
-      <p>Tab 1</p>
-      <p>Tab 1</p>
-    </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
-
-:::
-
-### 数据异步渲染 3s
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value">
-    <nut-tab-pane v-for="item in list" :title="'Tab ' + item" :pane-key="item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = ref(new Array(2).fill(0).map((_, index) => index));
-setTimeout(() => {
-  list.value.push(999);
-}, 3000);
-</script>
-```
+> demo: tabs basic nav
 
-:::
+### Smile 类型
 
-### 数量多，滚动操作
+> demo: tabs smile nav
 
-可通过`direction`属性修改标题栏自动滚动方向。
+### 自动高度
 
-在`taro`环境下，必须设置`name`以开启标题栏自动滚动功能。
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" title-scroll title-gutter="10" name="tabName">
-    <nut-tab-pane v-for="item in list" :title="'Tab ' + item" :pane-key="item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = new Array(10).fill(0).map((_, index) => index);
-</script>
-```
+> demo: tabs auto-height nav
 
-:::
+### 手势滑动切换
 
-### 左右布局
+> demo: tabs swipeable nav
 
-:::demo
+### 标题滚动（上下布局）
 
-```vue
-<template>
-  <nut-tabs style="height:300px" v-model="value" title-scroll direction="vertical">
-    <nut-tab-pane v-for="item in list" :pane-key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = new Array(2).fill(0).map((_, index) => index);
-</script>
-```
+> demo: tabs scroll nav
 
-:::
+### 标题滚动（左右布局）
 
-### 左右布局-微笑曲线
+> demo: tabs vertical nav
 
-:::demo
+### 左右布局 + Smile 类型
 
-```vue
-<template>
-  <nut-tabs style="height:300px" v-model="value" type="smile" title-scroll direction="vertical">
-    <nut-tab-pane v-for="item in list" :pane-key="item" :title="'Tab ' + item"> Tab {{ item }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-const list = new Array(2).fill(0).map((_, index) => index);
-</script>
-```
+> demo: tabs vertical-smile nav
 
-:::
-
-### 标签栏字体尺寸 large normal small
-
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value" size="large">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-  <nut-tabs v-model="value" size="normal">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-  <nut-tabs v-model="value" size="small">
-    <nut-tab-pane title="Tab 1" pane-key="0"> Tab 1 </nut-tab-pane>
-    <nut-tab-pane title="Tab 2" pane-key="1"> Tab 2 </nut-tab-pane>
-    <nut-tab-pane title="Tab 3" pane-key="2"> Tab 3 </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const value = ref('0');
-</script>
-```
+### 字体尺寸
 
-:::
+> demo: tabs size nav
 
 ### 自定义标签栏
 
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="value">
-    <template #titles>
-      <div
-        class="nut-tabs__titles-item"
-        @click="value = item.paneKey"
-        :class="{ active: value == item.paneKey }"
-        :key="item.paneKey"
-        v-for="item in list"
-      >
-        <Dongdong />
-        <span class="nut-tabs__titles-item__text">{{ item.title }}</span>
-        <span class="nut-tabs__titles-item__line"></span>
-      </div>
-    </template>
-    <nut-tab-pane v-for="item in list" :pane-key="item.paneKey"> {{ item.title }} </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-import { Dongdong } from '@nutui/icons-vue';
-const value = ref('c1');
-const list = ref([
-  {
-    title: '自定义 1',
-    paneKey: 'c1'
-  },
-  {
-    title: '自定义 2',
-    paneKey: 'c2'
-  },
-  {
-    title: '自定义 3',
-    paneKey: 'c3'
-  }
-]);
-</script>
-```
-
-:::
+> demo: tabs custom nav
 
 ## API
 
@@ -268,7 +58,7 @@ const list = ref([
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | v-model | 绑定当前选中标签的标识符 | number \| string | `0` |
-| color | 标签选中色 | string | `#1a1a1a ` |
+| color | 标签选中色 | string | `#1a1a1a` |
 | background | 标签栏背景颜色 | string | `#f5f5f5` |
 | direction | 使用横纵方向 可选值 horizontal、vertical | string | `horizontal` |
 | type | 选中底部展示样式 可选值 line、smile | string | `line` |