From 485b11f61262d89a0ff9b04fa9bbfd58a9fd5eea Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Tue, 16 Jan 2024 23:04:21 +0800
Subject: [PATCH] chore(action-sheet): split demo (#2846)

---
 .../src/feedback/pages/actionsheet/basic.vue  |  26 +++
 .../feedback/pages/actionsheet/content.vue    |  19 ++
 .../src/feedback/pages/actionsheet/custom.vue |  35 ++++
 .../src/feedback/pages/actionsheet/index.vue  | 163 +++------------
 .../src/feedback/pages/actionsheet/status.vue |  28 +++
 src/packages/__VUE/actionsheet/demo.vue       | 186 -----------------
 src/packages/__VUE/actionsheet/demo/basic.vue |  26 +++
 .../__VUE/actionsheet/demo/content.vue        |  19 ++
 .../__VUE/actionsheet/demo/custom.vue         |  35 ++++
 src/packages/__VUE/actionsheet/demo/index.vue |  38 ++++
 .../__VUE/actionsheet/demo/status.vue         |  28 +++
 src/packages/__VUE/actionsheet/doc.en-US.md   | 190 +-----------------
 src/packages/__VUE/actionsheet/doc.md         | 190 +-----------------
 src/packages/__VUE/actionsheet/doc.taro.md    | 190 +-----------------
 14 files changed, 296 insertions(+), 877 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/feedback/pages/actionsheet/basic.vue
 create mode 100644 packages/nutui-taro-demo/src/feedback/pages/actionsheet/content.vue
 create mode 100644 packages/nutui-taro-demo/src/feedback/pages/actionsheet/custom.vue
 create mode 100644 packages/nutui-taro-demo/src/feedback/pages/actionsheet/status.vue
 delete mode 100644 src/packages/__VUE/actionsheet/demo.vue
 create mode 100644 src/packages/__VUE/actionsheet/demo/basic.vue
 create mode 100644 src/packages/__VUE/actionsheet/demo/content.vue
 create mode 100644 src/packages/__VUE/actionsheet/demo/custom.vue
 create mode 100644 src/packages/__VUE/actionsheet/demo/index.vue
 create mode 100644 src/packages/__VUE/actionsheet/demo/status.vue

diff --git a/packages/nutui-taro-demo/src/feedback/pages/actionsheet/basic.vue b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/basic.vue
new file mode 100644
index 0000000000..9ee30b95ab
--- /dev/null
+++ b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/basic.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-cell title="click" :desc="val" @click="click"></nut-cell>
+  <nut-action-sheet v-model:visible="show" :menu-items="menuItems" @choose="choose" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: 'A'
+  },
+  {
+    name: 'B'
+  },
+  {
+    name: 'C'
+  }
+];
+const click = () => {
+  show.value = true;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/feedback/pages/actionsheet/content.vue b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/content.vue
new file mode 100644
index 0000000000..4000d3a6e4
--- /dev/null
+++ b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/content.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-cell title="click" :desc="val" @click="click"></nut-cell>
+  <nut-action-sheet v-model:visible="show" title="Title">
+    <div class="custom-content">Custom Content</div>
+  </nut-action-sheet>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref('');
+const click = () => {
+  show.value = true;
+};
+</script>
+<style>
+.custom-content {
+  padding: 10px 10px 160px;
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/feedback/pages/actionsheet/custom.vue b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/custom.vue
new file mode 100644
index 0000000000..5f3fba026f
--- /dev/null
+++ b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/custom.vue
@@ -0,0 +1,35 @@
+<template>
+  <nut-cell title="click" :desc="val" @click="click"></nut-cell>
+  <nut-action-sheet
+    v-model:visible="show"
+    title="Title"
+    :menu-items="menuItems"
+    cancel-txt="Cancel"
+    description="Description"
+    @choose="choose"
+  />
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: 'A'
+  },
+  {
+    name: 'B'
+  },
+  {
+    name: 'C',
+    color: 'red',
+    subname: 'desc'
+  }
+];
+const click = () => {
+  show.value = true;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/feedback/pages/actionsheet/index.vue b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/index.vue
index 494a4b7e4d..499d21675f 100644
--- a/packages/nutui-taro-demo/src/feedback/pages/actionsheet/index.vue
+++ b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/index.vue
@@ -1,147 +1,38 @@
 <template>
-  <Demo class="actionsheet">
-    <h2>基础用法</h2>
-    <nut-cell is-link @click="switchActionSheet('isVisible1')">
-      <div>基础用法</div>
-      <div>{{ state.val1 }}</div>
-    </nut-cell>
-    <nut-action-sheet v-model:visible="state.isVisible1" :menu-items="menuItemsOne" @choose="chooseItem" />
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <nut-cell is-link @click="switchActionSheet('isVisible2')">
-      <div>展示取消按钮</div>
-      <div>{{ state.val2 }}</div>
-    </nut-cell>
-    <nut-action-sheet
-      v-model:visible="state.isVisible2"
-      cancel-txt="取消"
-      :menu-items="menuItemsOne"
-      @choose="chooseItemTwo"
-    />
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
 
-    <nut-cell is-link @click="switchActionSheet('isVisible3')">
-      <div>展示描述信息</div>
-      <div>{{ state.val3 }}</div>
-    </nut-cell>
-    <nut-action-sheet
-      v-model:visible="state.isVisible3"
-      title="标题"
-      description="这是一段描述信息"
-      :menu-items="menuItemsTwo"
-      cancel-txt="取消"
-      @choose="chooseItemThree"
-    />
+    <h2>{{ t('status') }}</h2>
+    <Status />
 
-    <h2>选项状态</h2>
-    <nut-cell is-link @click="switchActionSheet('isVisible4')">
-      <div>选项状态</div>
-      <div>{{ state.val4 }}</div>
-    </nut-cell>
-    <nut-action-sheet
-      v-model:visible="state.isVisible4"
-      cancel-txt="取消"
-      :menu-items="menuItemsThree"
-      choose-tag-value="选中选项"
-      @choose="chooseItemFour"
-    />
-
-    <h2>自定义内容</h2>
-    <nut-cell is-link @click="switchActionSheet('isVisible5')">
-      <div>自定义内容</div>
-    </nut-cell>
-    <nut-action-sheet v-model:visible="state.isVisible5" title="标题">
-      <div class="custom-content">自定义内容</div>
-    </nut-action-sheet>
+    <h2>{{ t('content') }}</h2>
+    <Content />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue';
-interface Item {
-  name: string;
-  subname?: string;
-  color?: string;
-  disable?: boolean;
-  loading?: boolean;
-}
-const state = reactive({
-  isVisible1: false,
-  isVisible2: false,
-  isVisible3: false,
-  isVisible4: false,
-  isVisible5: false,
-  val1: '',
-  val2: '',
-  val3: '',
-  val4: ''
-});
-const menuItemsOne: Item[] = [
-  {
-    name: '选项一'
-  },
-  {
-    name: '选项二'
-  },
-  {
-    name: '选项三'
-  }
-];
-const menuItemsTwo: Item[] = [
-  {
-    name: '选项一'
-  },
-  {
-    name: '选项二'
-  },
-  {
-    name: '选项三',
-    color: 'red',
-    subname: '描述信息'
-  }
-];
-const menuItemsThree: Item[] = [
-  {
-    name: '选中选项'
-  },
-  {
-    name: '禁用选项',
-    disable: true
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Custom from './custom.vue';
+import Status from './status.vue';
+import Content from './content.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    custom: '自定义信息',
+    status: '选项状态',
+    content: '自定义内容'
   },
-  {
-    name: '加载选项',
-    loading: true
+  'en-US': {
+    basic: 'Basic Usage',
+    custom: 'Custom Info',
+    status: 'Option Status',
+    content: 'Custom Content'
   }
-];
-const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4' | 'isVisible5') => {
-  state[param] = !state[param];
-};
-
-const chooseItem = (itemParams: any) => {
-  console.log(itemParams, 'itemParams');
-  state.val1 = itemParams.name;
-};
-
-function chooseItemTwo(itemParams: Item) {
-  state.val2 = itemParams.name;
-}
-function chooseItemThree(itemParams: Item) {
-  state.val3 = itemParams.name;
-}
-function chooseItemFour(itemParams: Item) {
-  state.val4 = itemParams.name;
-}
+});
 </script>
-
-<style lang="scss">
-.custom-wrap {
-  padding: 110px 0;
-  text-align: center;
-}
-.actionsheet {
-  .nut-cell {
-    justify-content: space-between;
-  }
-}
-.custom-content {
-  padding: 10px 10px 160px;
-}
-</style>
diff --git a/packages/nutui-taro-demo/src/feedback/pages/actionsheet/status.vue b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/status.vue
new file mode 100644
index 0000000000..6586f196a6
--- /dev/null
+++ b/packages/nutui-taro-demo/src/feedback/pages/actionsheet/status.vue
@@ -0,0 +1,28 @@
+<template>
+  <nut-cell title="click" :desc="val" @click="click"></nut-cell>
+  <nut-action-sheet v-model:visible="show" :menu-items="menuItems" @choose="choose" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: 'Default'
+  },
+  {
+    name: 'Disabled',
+    disable: true
+  },
+  {
+    name: 'Color',
+    color: 'red'
+  }
+];
+const click = () => {
+  show.value = true;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
+</script>
diff --git a/src/packages/__VUE/actionsheet/demo.vue b/src/packages/__VUE/actionsheet/demo.vue
deleted file mode 100644
index 94187f76aa..0000000000
--- a/src/packages/__VUE/actionsheet/demo.vue
+++ /dev/null
@@ -1,186 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-cell is-link @click="switchActionSheet('isVisible1')">
-      <div>{{ translate('basic') }}</div>
-      <div>{{ state.val1 }}</div>
-    </nut-cell>
-    <nut-action-sheet v-model:visible="state.isVisible1" :menu-items="menuItemsOne" @choose="chooseItem" />
-
-    <nut-cell is-link @click="switchActionSheet('isVisible2')">
-      <div>{{ translate('showCancelButton') }}</div>
-      <div>{{ state.val2 }}</div>
-    </nut-cell>
-    <nut-action-sheet
-      v-model:visible="state.isVisible2"
-      :cancel-txt="translate('cancelTxt')"
-      :menu-items="menuItemsOne"
-      @choose="chooseItemTwo"
-    />
-
-    <nut-cell is-link @click="switchActionSheet('isVisible3')">
-      <div>{{ translate('showDescription') }}</div>
-      <div>{{ state.val3 }}</div>
-    </nut-cell>
-    <nut-action-sheet
-      v-model:visible="state.isVisible3"
-      :title="translate('title')"
-      :description="desc"
-      :menu-items="menuItemsTwo"
-      :cancel-txt="translate('cancelTxt')"
-      @choose="chooseItemThree"
-    />
-
-    <h2>{{ translate('optionStatus') }}</h2>
-    <nut-cell is-link @click="switchActionSheet('isVisible4')">
-      <div>{{ translate('optionStatus') }}</div>
-      <div>{{ state.val4 }}</div>
-    </nut-cell>
-    <nut-action-sheet
-      v-model:visible="state.isVisible4"
-      :cancel-txt="translate('cancelTxt')"
-      :menu-items="menuItemsThree"
-      :choose-tag-value="chooseTagValue"
-      @choose="chooseItemFour"
-    />
-
-    <h2>{{ translate('customContent') }}</h2>
-    <nut-cell is-link @click="switchActionSheet('isVisible5')">
-      <div>{{ translate('customContent') }}</div>
-    </nut-cell>
-    <nut-action-sheet v-model:visible="state.isVisible5" :title="translate('title')">
-      <div class="custom-content">{{ translate('customContent') }}</div>
-    </nut-action-sheet>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, reactive } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法',
-    showCancelButton: '展示取消按钮',
-    showDescription: '展示描述信息',
-    optionStatus: '选项状态',
-    customContent: '自定义内容',
-    cancelTxt: '取消',
-    title: '标题',
-    optionOne: '选项一',
-    optionTwo: '选项二',
-    optionThree: '选项三',
-    showDesc: '这是一段描述信息',
-    checkOption: '选中选项',
-    desc: '描述信息',
-    disableOption: '禁用选项',
-    loadOptions: '加载选项'
-  },
-  'en-US': {
-    basic: 'Basic Usage',
-    showCancelButton: 'Show Cancel Button',
-    showDescription: 'Show Description',
-    optionStatus: 'Option Status',
-    customContent: 'Custom Content',
-    cancelTxt: 'cancle',
-    title: 'title',
-    optionOne: 'option one',
-    optionTwo: 'option two',
-    optionThree: 'option three',
-    showDesc: 'This is a description',
-    checkOption: 'Check option',
-    desc: 'Description',
-    disableOption: 'Disable option',
-    loadOptions: 'Load options'
-  }
-});
-interface Item {
-  name: string;
-  subname?: string;
-  color?: string;
-  disable?: boolean;
-  loading?: boolean;
-}
-const state = reactive({
-  isVisible1: false,
-  isVisible2: false,
-  isVisible3: false,
-  isVisible4: false,
-  isVisible5: false,
-  val1: '',
-  val2: '',
-  val3: '',
-  val4: ''
-});
-const chooseTagValue = computed(() => translate('checkOption'));
-const desc = computed(() => translate('showDesc'));
-const menuItemsOne = computed(() => [
-  {
-    name: translate('optionOne')
-  },
-  {
-    name: translate('optionTwo')
-  },
-  {
-    name: translate('optionThree')
-  }
-]);
-const menuItemsTwo = computed(() => [
-  {
-    name: translate('optionOne')
-  },
-  {
-    name: translate('optionTwo')
-  },
-  {
-    name: translate('optionThree'),
-    color: 'red',
-    subname: translate('desc')
-  }
-]);
-const menuItemsThree = computed(() => [
-  {
-    name: translate('checkOption')
-  },
-  {
-    name: translate('disableOption'),
-    disable: true
-  },
-  {
-    name: translate('loadOptions'),
-    loading: true
-  }
-]);
-const switchActionSheet = (param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4' | 'isVisible5') => {
-  state[param] = !state[param];
-};
-
-const chooseItem = (itemParams: any) => {
-  state.val1 = itemParams.name;
-};
-
-function chooseItemTwo(itemParams: Item) {
-  state.val2 = itemParams.name;
-}
-function chooseItemThree(itemParams: Item) {
-  state.val3 = itemParams.name;
-}
-function chooseItemFour(itemParams: Item) {
-  state.val4 = itemParams.name;
-}
-</script>
-
-<style lang="scss" scoped>
-.nut-cell {
-  justify-content: space-between;
-}
-
-.custom-content {
-  padding: 10px 10px 160px;
-}
-
-.nut-theme-dark {
-  .custom-content {
-    color: white;
-  }
-}
-</style>
diff --git a/src/packages/__VUE/actionsheet/demo/basic.vue b/src/packages/__VUE/actionsheet/demo/basic.vue
new file mode 100644
index 0000000000..9ee30b95ab
--- /dev/null
+++ b/src/packages/__VUE/actionsheet/demo/basic.vue
@@ -0,0 +1,26 @@
+<template>
+  <nut-cell title="click" :desc="val" @click="click"></nut-cell>
+  <nut-action-sheet v-model:visible="show" :menu-items="menuItems" @choose="choose" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: 'A'
+  },
+  {
+    name: 'B'
+  },
+  {
+    name: 'C'
+  }
+];
+const click = () => {
+  show.value = true;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
+</script>
diff --git a/src/packages/__VUE/actionsheet/demo/content.vue b/src/packages/__VUE/actionsheet/demo/content.vue
new file mode 100644
index 0000000000..4000d3a6e4
--- /dev/null
+++ b/src/packages/__VUE/actionsheet/demo/content.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-cell title="click" :desc="val" @click="click"></nut-cell>
+  <nut-action-sheet v-model:visible="show" title="Title">
+    <div class="custom-content">Custom Content</div>
+  </nut-action-sheet>
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref('');
+const click = () => {
+  show.value = true;
+};
+</script>
+<style>
+.custom-content {
+  padding: 10px 10px 160px;
+}
+</style>
diff --git a/src/packages/__VUE/actionsheet/demo/custom.vue b/src/packages/__VUE/actionsheet/demo/custom.vue
new file mode 100644
index 0000000000..5f3fba026f
--- /dev/null
+++ b/src/packages/__VUE/actionsheet/demo/custom.vue
@@ -0,0 +1,35 @@
+<template>
+  <nut-cell title="click" :desc="val" @click="click"></nut-cell>
+  <nut-action-sheet
+    v-model:visible="show"
+    title="Title"
+    :menu-items="menuItems"
+    cancel-txt="Cancel"
+    description="Description"
+    @choose="choose"
+  />
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: 'A'
+  },
+  {
+    name: 'B'
+  },
+  {
+    name: 'C',
+    color: 'red',
+    subname: 'desc'
+  }
+];
+const click = () => {
+  show.value = true;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
+</script>
diff --git a/src/packages/__VUE/actionsheet/demo/index.vue b/src/packages/__VUE/actionsheet/demo/index.vue
new file mode 100644
index 0000000000..f9c5a68edb
--- /dev/null
+++ b/src/packages/__VUE/actionsheet/demo/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('status') }}</h2>
+    <Status />
+
+    <h2>{{ t('content') }}</h2>
+    <Content />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Custom from './custom.vue';
+import Status from './status.vue';
+import Content from './content.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    custom: '自定义信息',
+    status: '选项状态',
+    content: '自定义内容'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    custom: 'Custom Info',
+    status: 'Option Status',
+    content: 'Custom Content'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/actionsheet/demo/status.vue b/src/packages/__VUE/actionsheet/demo/status.vue
new file mode 100644
index 0000000000..6586f196a6
--- /dev/null
+++ b/src/packages/__VUE/actionsheet/demo/status.vue
@@ -0,0 +1,28 @@
+<template>
+  <nut-cell title="click" :desc="val" @click="click"></nut-cell>
+  <nut-action-sheet v-model:visible="show" :menu-items="menuItems" @choose="choose" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const show = ref(false);
+const val = ref('');
+const menuItems = [
+  {
+    name: 'Default'
+  },
+  {
+    name: 'Disabled',
+    disable: true
+  },
+  {
+    name: 'Color',
+    color: 'red'
+  }
+];
+const click = () => {
+  show.value = true;
+};
+const choose = (item) => {
+  val.value = item.name;
+};
+</script>
diff --git a/src/packages/__VUE/actionsheet/doc.en-US.md b/src/packages/__VUE/actionsheet/doc.en-US.md
index 4e1ff6176d..0369e37bbb 100644
--- a/src/packages/__VUE/actionsheet/doc.en-US.md
+++ b/src/packages/__VUE/actionsheet/doc.en-US.md
@@ -16,199 +16,19 @@ app.use(ActionSheet);
 
 ### Basic Usage
 
-:::demo
+> demo: actionsheet basic
 
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>Basic Usage</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" @choose="choose" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: 'option one'
-  },
-  {
-    name: 'optione two'
-  },
-  {
-    name: 'option three'
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
-
-### Show Cancel Button
+### Custom Info
 
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>Show Cancel Button</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" cancel-txt="取消" @choose="choose">
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: 'option one'
-  },
-  {
-    name: 'option two'
-  },
-  {
-    name: 'option three'
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
-
-### Show Description
-
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>Show Description</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet
-    v-model:visible="visible"
-    cancel-txt="cancel"
-    description="This is a presentation"
-    :menu-items="menuItems"
-    @choose="choose"
-  >
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: 'option one'
-  },
-  {
-    name: 'option two'
-  },
-  {
-    name: 'option three',
-    subname: 'Description'
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
+> demo: actionsheet custom
 
 ### Option Status
 
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>Option Status</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet
-    v-model:visible="visible"
-    :menu-items="menuItems"
-    choose-tag-value="Shading Options"
-    @choose="choose"
-    cancel-txt="cancel"
-  >
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: 'Shading Options'
-  },
-  {
-    name: 'Disable option',
-    disable: true
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
+> demo: actionsheet status
 
 ### Custom Content
 
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>Custom Content</div>
-  </nut-cell>
-  <nut-action-sheet v-model:visible="visible" title="标题">
-    <div class="custom-content">Custom Content</div>
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const click = (param) => {
-  visible.value = !visible.value;
-};
-</script>
-<style>
-.custom-content {
-  padding: 10px 10px 160px;
-}
-</style>
-```
-
-:::
+> demo: actionsheet content
 
 ## API
 
diff --git a/src/packages/__VUE/actionsheet/doc.md b/src/packages/__VUE/actionsheet/doc.md
index cc69910db1..1d0f5365b9 100644
--- a/src/packages/__VUE/actionsheet/doc.md
+++ b/src/packages/__VUE/actionsheet/doc.md
@@ -16,199 +16,19 @@ app.use(ActionSheet);
 
 ### 基础用法
 
-:::demo
+> demo: actionsheet basic
 
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>基础用法</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" @choose="choose" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: '选项一'
-  },
-  {
-    name: '选项二'
-  },
-  {
-    name: '选项三'
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
-
-### 展示取消按钮
+### 自定义信息
 
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>展示取消按钮</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" cancel-txt="取消" @choose="choose">
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: '选项一'
-  },
-  {
-    name: '选项二'
-  },
-  {
-    name: '选项三'
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
-
-### 展示描述信息
-
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>展示描述信息</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet
-    v-model:visible="visible"
-    cancel-txt="取消"
-    description="这是一段展示信息"
-    :menu-items="menuItems"
-    @choose="choose"
-  >
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: '选项一'
-  },
-  {
-    name: '选项二'
-  },
-  {
-    name: '选项三',
-    subname: '描述信息'
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
+> demo: actionsheet custom
 
 ### 选项状态
 
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>选项状态</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet
-    v-model:visible="visible"
-    :menu-items="menuItems"
-    choose-tag-value="着色选项"
-    @choose="choose"
-    cancel-txt="取消"
-  >
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: '着色选项'
-  },
-  {
-    name: '禁用选项',
-    disable: true
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
+> demo: actionsheet status
 
 ### 自定义内容
 
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>自定义内容</div>
-  </nut-cell>
-  <nut-action-sheet v-model:visible="visible" title="标题">
-    <div class="custom-content">自定义内容</div>
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const click = (param) => {
-  visible.value = !visible.value;
-};
-</script>
-<style>
-.custom-content {
-  padding: 10px 10px 160px;
-}
-</style>
-```
-
-:::
+> demo: actionsheet content
 
 ## API
 
diff --git a/src/packages/__VUE/actionsheet/doc.taro.md b/src/packages/__VUE/actionsheet/doc.taro.md
index 354444bcd4..7c2a76672c 100644
--- a/src/packages/__VUE/actionsheet/doc.taro.md
+++ b/src/packages/__VUE/actionsheet/doc.taro.md
@@ -16,199 +16,19 @@ app.use(ActionSheet);
 
 ### 基础用法
 
-:::demo
+> demo: actionsheet basic feedback
 
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>基础用法</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" @choose="choose" />
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: '选项一'
-  },
-  {
-    name: '选项二'
-  },
-  {
-    name: '选项三'
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
-
-### 展示取消按钮
+### 自定义信息
 
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>展示取消按钮</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet v-model:visible="visible" :menu-items="menuItems" cancel-txt="取消" @choose="choose">
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: '选项一'
-  },
-  {
-    name: '选项二'
-  },
-  {
-    name: '选项三'
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
-
-### 展示描述信息
-
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>展示描述信息</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet
-    v-model:visible="visible"
-    cancel-txt="取消"
-    description="这是一段展示信息"
-    :menu-items="menuItems"
-    @choose="choose"
-  >
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: '选项一'
-  },
-  {
-    name: '选项二'
-  },
-  {
-    name: '选项三',
-    subname: '描述信息'
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
+> demo: actionsheet custom feedback
 
 ### 选项状态
 
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>选项状态</div>
-    <div>{{ val }}</div>
-  </nut-cell>
-  <nut-action-sheet
-    v-model:visible="visible"
-    :menu-items="menuItems"
-    choose-tag-value="着色选项"
-    @choose="choose"
-    cancel-txt="取消"
-  >
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const menuItems = [
-  {
-    name: '着色选项'
-  },
-  {
-    name: '禁用选项',
-    disable: true
-  }
-];
-const click = (param) => {
-  visible.value = !visible.value;
-};
-const choose = (item) => {
-  val.value = item.name;
-};
-</script>
-```
-
-:::
+> demo: actionsheet status feedback
 
 ### 自定义内容
 
-:::demo
-
-```vue
-<template>
-  <nut-cell is-link @click="click">
-    <div>自定义内容</div>
-  </nut-cell>
-  <nut-action-sheet v-model:visible="visible" title="标题">
-    <div class="custom-content">自定义内容</div>
-  </nut-action-sheet>
-</template>
-<script setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const val = ref('');
-const click = (param) => {
-  visible.value = !visible.value;
-};
-</script>
-<style>
-.custom-content {
-  padding: 10px 10px 160px;
-}
-</style>
-```
-
-:::
+> demo: actionsheet content feedback
 
 ## API