From 26a0f6a8670ca33c589a1d3c34d1707ea60cd711 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Sat, 23 Dec 2023 21:50:05 +0800
Subject: [PATCH] chore(collapse): split demo

---
 .../exhibition/pages/collapse/accordion.vue   |  14 ++
 .../src/exhibition/pages/collapse/basic.vue   |  11 ++
 .../src/exhibition/pages/collapse/custom.vue  |  12 ++
 .../src/exhibition/pages/collapse/data.vue    |  14 ++
 .../exhibition/pages/collapse/disabled.vue    |   7 +
 .../src/exhibition/pages/collapse/extra.vue   |   9 ++
 .../src/exhibition/pages/collapse/index.vue   |  96 +++++------
 src/packages/__VUE/collapse/demo.vue          | 143 -----------------
 .../__VUE/collapse/demo/accordion.vue         |  14 ++
 src/packages/__VUE/collapse/demo/basic.vue    |  11 ++
 src/packages/__VUE/collapse/demo/custom.vue   |  12 ++
 src/packages/__VUE/collapse/demo/data.vue     |  14 ++
 src/packages/__VUE/collapse/demo/disabled.vue |   7 +
 src/packages/__VUE/collapse/demo/extra.vue    |   9 ++
 src/packages/__VUE/collapse/demo/index.vue    |  49 ++++++
 src/packages/__VUE/collapse/doc.en-US.md      | 150 +++---------------
 src/packages/__VUE/collapse/doc.md            | 130 ++-------------
 src/packages/__VUE/collapse/doc.taro.md       | 130 ++-------------
 18 files changed, 284 insertions(+), 548 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/collapse/accordion.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/collapse/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/collapse/custom.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/collapse/data.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/collapse/disabled.vue
 create mode 100644 packages/nutui-taro-demo/src/exhibition/pages/collapse/extra.vue
 delete mode 100644 src/packages/__VUE/collapse/demo.vue
 create mode 100644 src/packages/__VUE/collapse/demo/accordion.vue
 create mode 100644 src/packages/__VUE/collapse/demo/basic.vue
 create mode 100644 src/packages/__VUE/collapse/demo/custom.vue
 create mode 100644 src/packages/__VUE/collapse/demo/data.vue
 create mode 100644 src/packages/__VUE/collapse/demo/disabled.vue
 create mode 100644 src/packages/__VUE/collapse/demo/extra.vue
 create mode 100644 src/packages/__VUE/collapse/demo/index.vue

diff --git a/packages/nutui-taro-demo/src/exhibition/pages/collapse/accordion.vue b/packages/nutui-taro-demo/src/exhibition/pages/collapse/accordion.vue
new file mode 100644
index 0000000000..fc045513ce
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/collapse/accordion.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-collapse v-model="val" accordion @change="change">
+    <nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
+    <nut-collapse-item name="name3" title="Title 3"> Content 3 </nut-collapse-item>
+  </nut-collapse>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref(['name2', 'name3']);
+const change = (modelValue: string[], name: string, status: boolean) => {
+  console.log(modelValue, name, status);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/collapse/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/collapse/basic.vue
new file mode 100644
index 0000000000..47b6d289d7
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/collapse/basic.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-collapse>
+    <nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2" value="Description"> Content 2 </nut-collapse-item>
+    <nut-collapse-item name="name3">
+      <template #title> Title 3 </template>
+      <template #value> Description </template>
+      Content 3
+    </nut-collapse-item>
+  </nut-collapse>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/collapse/custom.vue b/packages/nutui-taro-demo/src/exhibition/pages/collapse/custom.vue
new file mode 100644
index 0000000000..480e82576d
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/collapse/custom.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-collapse>
+    <nut-collapse-item name="name1" title="Title 1">
+      <template #icon> <Notice /> </template>
+      Content 1
+    </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2" :icon="Follow"> Content 2 </nut-collapse-item>
+  </nut-collapse>
+</template>
+<script setup lang="ts">
+import { Notice, Follow } from '@nutui/icons-vue-taro';
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/collapse/data.vue b/packages/nutui-taro-demo/src/exhibition/pages/collapse/data.vue
new file mode 100644
index 0000000000..e2ee7edd43
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/collapse/data.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-collapse v-model="val" @change="change">
+    <nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
+    <nut-collapse-item name="name3" title="Title 3"> Content 3 </nut-collapse-item>
+  </nut-collapse>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref(['name2', 'name3']);
+const change = (modelValue: string[], name: string, status: boolean) => {
+  console.log(modelValue, name, status);
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/collapse/disabled.vue b/packages/nutui-taro-demo/src/exhibition/pages/collapse/disabled.vue
new file mode 100644
index 0000000000..9b42836d13
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/collapse/disabled.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-collapse>
+    <nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2" disabled> Content 2 </nut-collapse-item>
+    <nut-collapse-item name="name3" title="Title 3" disabled> Content 3 </nut-collapse-item>
+  </nut-collapse>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/collapse/extra.vue b/packages/nutui-taro-demo/src/exhibition/pages/collapse/extra.vue
new file mode 100644
index 0000000000..8d37c0e6ed
--- /dev/null
+++ b/packages/nutui-taro-demo/src/exhibition/pages/collapse/extra.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-collapse>
+    <nut-collapse-item name="name1" title="Title 1">
+      <template #extra> Extra Content </template>
+      Content 1
+    </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
+  </nut-collapse>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/collapse/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/collapse/index.vue
index 64c8d6f10d..e7d841167a 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/collapse/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/collapse/index.vue
@@ -1,61 +1,49 @@
 <template>
   <Demo class="full">
-    <h2>基础用法</h2>
-    <nut-collapse v-model="data.active1" @change="change">
-      <nut-collapse-item :title="data.title1" :name="1">
-        京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
-      </nut-collapse-item>
-      <nut-collapse-item :title="data.title2" :name="2"> 京东到家：教师节期间 创意花束销量增长53倍 </nut-collapse-item>
-      <nut-collapse-item :title="data.title3" :name="3" disabled> </nut-collapse-item>
-    </nut-collapse>
-    <h2>手风琴</h2>
-    <nut-collapse v-model="data.active2" :accordion="true">
-      <nut-collapse-item :title="data.title1" :name="1">
-        <template #value> 文本测试 </template>
-        华为终端操作系统EMUI 11发布，9月11日正式开启
-      </nut-collapse-item>
-      <nut-collapse-item :title="data.title2" :name="2" :value="data.subTitle">
-        中国服务机器人市场已占全球市场超1/4
-      </nut-collapse-item>
-      <nut-collapse-item :title="data.title3" :name="3">
-        QuestMobile：90后互联网用户规模超越80后达3.62亿
-      </nut-collapse-item>
-    </nut-collapse>
-    <h2>自定义折叠图标</h2>
-    <nut-collapse v-model="data.active3" :accordion="true">
-      <nut-collapse-item :title="data.title1" :name="1" :icon="Notice"> 京东数科IPO将引入“绿鞋机制” </nut-collapse-item>
-      <nut-collapse-item :title="data.title2" :name="2" value="文本内容" :icon="Follow">
-        世界制造业大会开幕，阿里巴巴与安徽合作再升级
-      </nut-collapse-item>
-    </nut-collapse>
-    <h2>设置固定内容（不折叠部分）</h2>
-    <nut-collapse v-model="data.active6" :accordion="true">
-      <nut-collapse-item :title="data.title1" :name="1">
-        <template #extra>固定内容</template>
-        NutUI是一套拥有京东风格的轻量级的 Vue 组件库
-      </nut-collapse-item>
-      <nut-collapse-item :title="data.title2" :name="2">
-        在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
-      </nut-collapse-item>
-    </nut-collapse>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('data') }}</h2>
+    <Data />
+
+    <h2>{{ t('accordion') }}</h2>
+    <Accordion />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
+
+    <h2>{{ t('extra') }}</h2>
+    <Extra />
   </Demo>
 </template>
 <script setup lang="ts">
-import { reactive } from 'vue';
-import { Notice, Follow } from '@nutui/icons-vue-taro';
-const data = reactive({
-  active1: [1, '2'],
-  active2: 1,
-  active3: 1,
-  active4: 1,
-  active5: 1,
-  active6: 1,
-  title1: '标题1',
-  title2: '标题2',
-  title3: '标题3',
-  subTitle: '副标题'
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Data from './data.vue';
+import Accordion from './accordion.vue';
+import Custom from './custom.vue';
+import Disabled from './disabled.vue';
+import Extra from './extra.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    data: '绑定数据与事件',
+    accordion: '手风琴',
+    custom: '自定义折叠图标',
+    disabled: '禁用状态',
+    extra: '设置固定内容（不折叠）'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    data: 'v-model & onChange',
+    accordion: 'Accordion',
+    custom: 'Custom Icon',
+    disabled: 'Disabled CollapseItem',
+    extra: 'Set fixed content (do not collapse)'
+  }
 });
-const change = (name: string) => {
-  console.log(`点击了name是${name}的面板`);
-};
 </script>
diff --git a/src/packages/__VUE/collapse/demo.vue b/src/packages/__VUE/collapse/demo.vue
deleted file mode 100644
index 105278856f..0000000000
--- a/src/packages/__VUE/collapse/demo.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-  <div class="demo full">
-    <h2>{{ translate('basic1') }}</h2>
-    <nut-collapse v-model="data.active1" @change="change">
-      <nut-collapse-item :name="1">
-        <template #title>
-          {{ translate('title1') }}
-        </template>
-        {{ translate('desc1') }}
-      </nut-collapse-item>
-      <nut-collapse-item :title="translate('title2')" :name="2">
-        {{ translate('desc2') }}
-      </nut-collapse-item>
-      <nut-collapse-item :title="translate('title3')" :name="3" disabled> </nut-collapse-item>
-    </nut-collapse>
-    <!-- <h2>{{ translate('basic2') }}</h2>
-    <nut-collapse v-model="active4" :accordion="true" @change="change">
-      <nut-collapse-item :title="translate('title1')" :name="1">
-        {{ translate('desc3') }}
-      </nut-collapse-item>
-      <nut-collapse-item :title="translate('title2')" :name="2"> {{ translate('desc4') }} </nut-collapse-item>
-    </nut-collapse> -->
-    <h2>{{ translate('basic3') }}</h2>
-    <nut-collapse v-model="data.active2" accordion @change="change">
-      <nut-collapse-item :title="translate('title1')" :name="1"> {{ translate('desc5') }} </nut-collapse-item>
-      <nut-collapse-item :title="translate('title2')" :name="2" :value="translate('subtitle')">
-        {{ translate('desc6') }}
-      </nut-collapse-item>
-      <nut-collapse-item :title="translate('title3')" :name="3">
-        {{ translate('desc7') }}
-      </nut-collapse-item>
-    </nut-collapse>
-    <h2>{{ translate('basic4') }}</h2>
-    <nut-collapse v-model="data.active3" :accordion="true">
-      <nut-collapse-item :title="translate('title1')" :name="1" :icon="Notice">
-        <template #value> {{ translate('title4') }} </template>
-        {{ translate('desc8') }}
-      </nut-collapse-item>
-      <nut-collapse-item :title="translate('title2')" :name="2" :value="translate('title6')" :icon="Follow">
-        {{ translate('desc9') }}
-      </nut-collapse-item>
-    </nut-collapse>
-    <!-- <h2>{{ translate('basic5') }}</h2>
-    <nut-collapse v-model="active5" :accordion="true">
-      <nut-collapse-item :title="translate('title1')" :name="1" :icon="Comment">
-        {{ translate('desc10') }}
-      </nut-collapse-item>
-      <nut-collapse-item :title="translate('title2')" :name="2" :sub-title="translate('title6')">
-        {{ translate('desc11') }}
-      </nut-collapse-item>
-    </nut-collapse> -->
-    <h2>{{ translate('basic6') }}</h2>
-    <nut-collapse v-model="data.active6" :accordion="true">
-      <nut-collapse-item :title="translate('title1')" :name="1">
-        <template #extra>{{ translate('title5') }}</template>
-        {{ translate('desc1') }}
-      </nut-collapse-item>
-      <nut-collapse-item :title="translate('title2')" :name="2">
-        {{ translate('desc2') }}
-      </nut-collapse-item>
-    </nut-collapse>
-  </div>
-</template>
-<script setup lang="ts">
-import { reactive } from 'vue';
-import { Notice, Follow } from '@nutui/icons-vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
-  'zh-CN': {
-    basic1: '基础用法',
-    basic2: '无icon样式',
-    basic3: '手风琴',
-    basic4: '自定义折叠图标',
-    basic5: '自定义标题图标',
-    basic6: '设置固定内容（不折叠）',
-    title1: '标题1',
-    title2: '标题2',
-    title3: '标题3',
-    title4: '文本测试',
-    title5: '固定内容',
-    title6: '文本内容',
-    desc1: 'NutUI是一套拥有京东风格的轻量级的 Vue 组件库',
-    desc2: '在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！',
-    desc3: '引入Vue3新特性 Composition API、Teleport、Emits 等',
-    desc4: '全面使用 TypeScipt',
-    desc5: '基于京东设计语言体系，构建场景',
-    desc6: '提高界⾯的模块化通用程度',
-    desc7: '采用组合式 API Composition 语法重构，结构清晰，功能模块化',
-    desc8: ' NUTUI3.0重新思考其内在的一致性和可组合性',
-    desc9: '提⾼产研输出对接的效率，降低输出工作量',
-    desc10: '组件 emits 事件单独提取，增强代码可读性',
-    desc11: '使用 Teleport 新特性重构挂载类组件',
-    subtitle: '副标题'
-  },
-  'en-US': {
-    basic1: 'Basic Usage',
-    basic2: 'No icon style',
-    basic3: 'accordion',
-    basic4: 'Custom collapse Icon',
-    basic5: 'Custom title Icon',
-    basic6: 'Set fixed content (do not collapse)',
-    title1: 'title1',
-    title2: 'title2',
-    title3: 'title3',
-    title4: 'text test',
-    title5: 'fixed content',
-    title6: 'text content',
-    desc1: 'Nutui is a lightweight Vue component library with JD style',
-    desc2:
-      'The product has been comprehensively upgraded in terms of function, experience, ease of use and flexibility!',
-    desc3: 'Introduce new features of vue3, such as Composition API, teleport, emits, etc',
-    desc4: 'Full use of typescipt',
-    desc5: 'Build scenes based on JD design language system',
-    desc6: 'Improve the modularity and generality of the boundary',
-    desc7: 'It adopts combinatorial API composition syntax to reconstruct, with clear structure and modular function',
-    desc8: 'NUTUI3. 0 rethink its internal consistency and composability',
-    desc9: 'Improve the efficiency of production research output docking and reduce the output workload',
-    desc10: 'component emits events are extracted separately to enhance code readability',
-    desc11: 'reconstruct and mount class components using the new feature of teleport',
-    subtitle: 'subtitle'
-  }
-});
-const data = reactive({
-  active1: [1, 2],
-  active2: 1,
-  active3: 1,
-  active4: 1,
-  active5: 1,
-  active6: 1,
-  title1: '标题1',
-  title2: '标题2',
-  title3: '标题3',
-  subTitle: '副标题'
-});
-const change = (current: any, name: string | number, status: boolean) => {
-  console.log(current, name, status);
-};
-</script>
-<style lang="scss">
-.nut-collapse-item .collapse-extraWrapper .collapse-extraRender {
-  color: red;
-}
-</style>
diff --git a/src/packages/__VUE/collapse/demo/accordion.vue b/src/packages/__VUE/collapse/demo/accordion.vue
new file mode 100644
index 0000000000..fc045513ce
--- /dev/null
+++ b/src/packages/__VUE/collapse/demo/accordion.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-collapse v-model="val" accordion @change="change">
+    <nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
+    <nut-collapse-item name="name3" title="Title 3"> Content 3 </nut-collapse-item>
+  </nut-collapse>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref(['name2', 'name3']);
+const change = (modelValue: string[], name: string, status: boolean) => {
+  console.log(modelValue, name, status);
+};
+</script>
diff --git a/src/packages/__VUE/collapse/demo/basic.vue b/src/packages/__VUE/collapse/demo/basic.vue
new file mode 100644
index 0000000000..47b6d289d7
--- /dev/null
+++ b/src/packages/__VUE/collapse/demo/basic.vue
@@ -0,0 +1,11 @@
+<template>
+  <nut-collapse>
+    <nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2" value="Description"> Content 2 </nut-collapse-item>
+    <nut-collapse-item name="name3">
+      <template #title> Title 3 </template>
+      <template #value> Description </template>
+      Content 3
+    </nut-collapse-item>
+  </nut-collapse>
+</template>
diff --git a/src/packages/__VUE/collapse/demo/custom.vue b/src/packages/__VUE/collapse/demo/custom.vue
new file mode 100644
index 0000000000..e6301768e7
--- /dev/null
+++ b/src/packages/__VUE/collapse/demo/custom.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-collapse>
+    <nut-collapse-item name="name1" title="Title 1">
+      <template #icon> <Notice /> </template>
+      Content 1
+    </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2" :icon="Follow"> Content 2 </nut-collapse-item>
+  </nut-collapse>
+</template>
+<script setup lang="ts">
+import { Notice, Follow } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/collapse/demo/data.vue b/src/packages/__VUE/collapse/demo/data.vue
new file mode 100644
index 0000000000..e2ee7edd43
--- /dev/null
+++ b/src/packages/__VUE/collapse/demo/data.vue
@@ -0,0 +1,14 @@
+<template>
+  <nut-collapse v-model="val" @change="change">
+    <nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
+    <nut-collapse-item name="name3" title="Title 3"> Content 3 </nut-collapse-item>
+  </nut-collapse>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const val = ref(['name2', 'name3']);
+const change = (modelValue: string[], name: string, status: boolean) => {
+  console.log(modelValue, name, status);
+};
+</script>
diff --git a/src/packages/__VUE/collapse/demo/disabled.vue b/src/packages/__VUE/collapse/demo/disabled.vue
new file mode 100644
index 0000000000..9b42836d13
--- /dev/null
+++ b/src/packages/__VUE/collapse/demo/disabled.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-collapse>
+    <nut-collapse-item name="name1" title="Title 1"> Content 1 </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2" disabled> Content 2 </nut-collapse-item>
+    <nut-collapse-item name="name3" title="Title 3" disabled> Content 3 </nut-collapse-item>
+  </nut-collapse>
+</template>
diff --git a/src/packages/__VUE/collapse/demo/extra.vue b/src/packages/__VUE/collapse/demo/extra.vue
new file mode 100644
index 0000000000..8d37c0e6ed
--- /dev/null
+++ b/src/packages/__VUE/collapse/demo/extra.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-collapse>
+    <nut-collapse-item name="name1" title="Title 1">
+      <template #extra> Extra Content </template>
+      Content 1
+    </nut-collapse-item>
+    <nut-collapse-item name="name2" title="Title 2"> Content 2 </nut-collapse-item>
+  </nut-collapse>
+</template>
diff --git a/src/packages/__VUE/collapse/demo/index.vue b/src/packages/__VUE/collapse/demo/index.vue
new file mode 100644
index 0000000000..25ec6baa2f
--- /dev/null
+++ b/src/packages/__VUE/collapse/demo/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <Demo class="full">
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('data') }}</h2>
+    <Data />
+
+    <h2>{{ t('accordion') }}</h2>
+    <Accordion />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
+
+    <h2>{{ t('extra') }}</h2>
+    <Extra />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Data from './data.vue';
+import Accordion from './accordion.vue';
+import Custom from './custom.vue';
+import Disabled from './disabled.vue';
+import Extra from './extra.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    data: '绑定数据与事件',
+    accordion: '手风琴',
+    custom: '自定义折叠图标',
+    disabled: '禁用状态',
+    extra: '设置固定内容（不折叠）'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    data: 'v-model & onChange',
+    accordion: 'Accordion',
+    custom: 'Custom Icon',
+    disabled: 'Disabled CollapseItem',
+    extra: 'Set fixed content (do not collapse)'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/collapse/doc.en-US.md b/src/packages/__VUE/collapse/doc.en-US.md
index 9ca035a72c..235e5eac4a 100644
--- a/src/packages/__VUE/collapse/doc.en-US.md
+++ b/src/packages/__VUE/collapse/doc.en-US.md
@@ -17,135 +17,35 @@ app.use(CollapseItem);
 
 ### Basic Usage
 
-Control the expanded panel list through 'V-model', and 'activenames' is in array format
-
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeNames" @change="onChange">
-    <nut-collapse-item :name="1">
-      <template #title> {{ title.title1 }} </template>
-      Nutui is a lightweight Vue component library with JD style
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2">
-      The product has been comprehensively upgraded in terms of function, experience, ease of use and flexibility!
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title3" :name="3" disabled> </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const activeNames = ref([1, 2]);
-const title = reactive({
-  title1: 'title1',
-  title2: 'title2',
-  title3: 'title3'
-});
-const onChange = (modelValue, currName, status) => {
-  // currName: collapse-item name
-  // status: true open, false close
-  console.log(modelValue, currName, status);
-};
-</script>
-```
+The CollapseItem component must set the name property as a unique identifier.
 
-:::
-
-### accordion
-
-You can set accordion mode through 'accordion', and expand up to one panel. At this time, 'activename' is in string format`value` you can set the content of a subtitle
-
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title.title1" :name="1" :value="subTitle">
-      Build scenes based on JD design language system
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2">
-      Improve the modularity and generality of the boundary
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title3" :name="3">
-      It adopts combinatorial API composition syntax to reconstruct, with clear structure and modular function
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const activeName = ref(1);
-const subTitle = 'subtitle';
-const title = reactive({
-  title1: 'title1',
-  title2: 'title2',
-  title3: 'title3'
-});
-</script>
-```
+> demo: collapse basic
 
-:::
-
-### Custom collapse Icon
-
-Set custom icons through icon and rotate to set the rotation angle of icons
-
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title.title1" :name="1" :icon="Notice">
-      <template #value> text test </template>
-      NUTUI3. 0 rethink its internal consistency and composability
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2" :icon="Follow">
-      Improve the efficiency of production research output docking and reduce the output workload
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-import { Notice, Follow } from '@nutui/icons-vue';
-const activeName = ref(1);
-const title = reactive({
-  title1: 'title1',
-  title2: 'title2'
-});
-</script>
-```
+### v-model & onChange
 
-:::
-
-### Set fixed content (do not collapse)
-
-Set content through slot: extra
-
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title.title1" :name="1">
-      <template #extra>fixed content</template>
-      Nutui is a lightweight Vue component library with JD style
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2">
-      The product has been comprehensively upgraded in terms of function, experience, ease of use and flexibility!
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const activeName = ref(1);
-const title = reactive({
-  title1: 'title1',
-  title2: 'title2'
-});
-</script>
-```
+The expanded CollapseItem can be controlled through `v-model`, which is an array type by default, where the value is the name attribute of the corresponding CollapseItem.
+
+> demo: collapse data
+
+### 手风琴
+
+Accordion mode can be set through `accordion`, and up to one panel can be expanded. In this case, `v-model` is a single name.
+
+> demo: collapse accordion
+
+### 自定义折叠图标
+
+Set a custom icon through the `slots.icon` or `props.icon` property.
+
+> demo: collapse custom
+
+### 禁用状态
+
+> demo: collapse disabled
+
+### 设置固定内容（不折叠）
 
-:::
+> demo: collapse extra
 
 ## API
 
diff --git a/src/packages/__VUE/collapse/doc.md b/src/packages/__VUE/collapse/doc.md
index 1279c8070c..ac1d41360c 100644
--- a/src/packages/__VUE/collapse/doc.md
+++ b/src/packages/__VUE/collapse/doc.md
@@ -17,131 +17,35 @@ app.use(CollapseItem);
 
 ### 基础用法
 
-通过`v-model`控制展开的面板列表，`activeNames`为数组格式
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeNames" @change="onChange">
-    <nut-collapse-item :name="1">
-      <template #title> {{ title.title1 }} </template>
-      NutUI是一套拥有京东风格的轻量级的 Vue 组件库
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2">
-      在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title3" :name="3" disabled> </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const activeNames = ref([1, 2]);
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2',
-  title3: '标题3'
-});
-const onChange = (modelValue, currName, status) => {
-  // currName: 当前操作的 collapse-item 的 name
-  // status: true 打开 false 关闭
-  console.log(modelValue, currName, status);
-};
-</script>
-```
+CollapseItem 组件必须设置 name 属性作为唯一标识符。
+
+> demo: collapse basic
+
+### 绑定数据与事件
 
-:::
+通过 `v-model` 可以控制展开的 CollapseItem，默认情况下为数组类型，其中的值是对应 CollapseItem 的 name 属性。
+
+> demo: collapse data
 
 ### 手风琴
 
-通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式；`value`可以设置右侧的内容
-
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title.title1" :name="1" :value="subTitle">
-      基于京东设计语言体系，构建场景
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2"> 提高界⾯的模块化通用程度 </nut-collapse-item>
-    <nut-collapse-item :title="title.title3" :name="3">
-      采用组合式 API Composition 语法重构，结构清晰，功能模块化
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const activeName = ref(1);
-const subTitle = '副标题';
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2',
-  title3: '标题3'
-});
-</script>
-```
+通过 `accordion` 可以设置为手风琴模式，最多展开一个面板，此时 `v-model` 为单个 name。
 
-:::
+> demo: collapse accordion
 
 ### 自定义折叠图标
 
-通过 icon 设置自定义图标
-
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title.title1" :name="1" :icon="Notice">
-      <template #value> 文本测试 </template>
-      NUTUI3.0重新思考其内在的一致性和可组合性
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2" :icon="Follow">
-      提⾼产研输出对接的效率，降低输出工作量
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-import { Notice, Follow } from '@nutui/icons-vue';
-const activeName = ref(1);
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2'
-});
-</script>
-```
+通过 `slots.icon` 或者 `props.icon` 属性设置自定义图标
 
-:::
+> demo: collapse custom
 
-### 设置固定内容（不折叠）
+### 禁用状态
 
-通过 slot:extra 设置内容
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title.title1" :name="1">
-      <template #extra>固定内容</template>
-      NutUI是一套拥有京东风格的轻量级的 Vue 组件库
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2">
-      在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const activeName = ref(1);
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2'
-});
-</script>
-```
+> demo: collapse disabled
+
+### 设置固定内容（不折叠）
 
-:::
+> demo: collapse extra
 
 ## API
 
diff --git a/src/packages/__VUE/collapse/doc.taro.md b/src/packages/__VUE/collapse/doc.taro.md
index 6ec5ca1e6a..d29b7b8cf5 100644
--- a/src/packages/__VUE/collapse/doc.taro.md
+++ b/src/packages/__VUE/collapse/doc.taro.md
@@ -17,131 +17,35 @@ app.use(CollapseItem);
 
 ### 基础用法
 
-通过`v-model`控制展开的面板列表，`activeNames`为数组格式
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeNames" @change="onChange">
-    <nut-collapse-item :name="1">
-      <template #title> {{ title.title1 }} </template>
-      NutUI是一套拥有京东风格的轻量级的 Vue 组件库
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2">
-      在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title3" :name="3" disabled> </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const activeNames = ref([1, 2]);
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2',
-  title3: '标题3'
-});
-const onChange = (modelValue, currName, status) => {
-  // currName: 当前操作的 collapse-item 的 name
-  // status: true 打开 false 关闭
-  console.log(modelValue, currName, status);
-};
-</script>
-```
+CollapseItem 组件必须设置 name 属性作为唯一标识符。
+
+> demo: collapse basic exhibition
+
+### 绑定数据与事件
 
-:::
+通过 `v-model` 可以控制展开的 CollapseItem，默认情况下为数组类型，其中的值是对应 CollapseItem 的 name 属性。
+
+> demo: collapse data exhibition
 
 ### 手风琴
 
-通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式；`value`可以设置右侧的内容
-
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title.title1" :name="1" :value="subTitle">
-      基于京东设计语言体系，构建场景
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2"> 提高界⾯的模块化通用程度 </nut-collapse-item>
-    <nut-collapse-item :title="title.title3" :name="3">
-      采用组合式 API Composition 语法重构，结构清晰，功能模块化
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const activeName = ref(1);
-const subTitle = '副标题';
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2',
-  title3: '标题3'
-});
-</script>
-```
+通过 `accordion` 可以设置为手风琴模式，最多展开一个面板，此时 `v-model` 为单个 name。
 
-:::
+> demo: collapse accordion exhibition
 
 ### 自定义折叠图标
 
-通过 icon 设置自定义图标
-
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title.title1" :name="1" :icon="Notice">
-      <template #value> 文本测试 </template>
-      NUTUI3.0重新思考其内在的一致性和可组合性
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2" :icon="Follow">
-      提⾼产研输出对接的效率，降低输出工作量
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-import { Notice, Follow } from '@nutui/icons-vue';
-const activeName = ref(1);
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2'
-});
-</script>
-```
+通过 `slots.icon` 或者 `props.icon` 属性设置自定义图标
 
-:::
+> demo: collapse custom exhibition
 
-### 设置固定内容（不折叠）
+### 禁用状态
 
-通过 slot:extra 设置内容
-:::demo
-
-```vue
-<template>
-  <nut-collapse v-model="activeName" :accordion="true">
-    <nut-collapse-item :title="title.title1" :name="1">
-      <template #extra>固定内容</template>
-      NutUI是一套拥有京东风格的轻量级的 Vue 组件库
-    </nut-collapse-item>
-    <nut-collapse-item :title="title.title2" :name="2">
-      在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
-    </nut-collapse-item>
-  </nut-collapse>
-</template>
-<script setup>
-import { reactive, ref } from 'vue';
-const activeName = ref(1);
-const title = reactive({
-  title1: '标题1',
-  title2: '标题2'
-});
-</script>
-```
+> demo: collapse disabled exhibition
+
+### 设置固定内容（不折叠）
 
-:::
+> demo: collapse extra exhibition
 
 ## API