From ed3f554254ec699ebbab0e9946e3e925d810848c Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Tue, 19 Dec 2023 23:44:28 +0800
Subject: [PATCH] chore(ecard): split demo (#2770)

---
 .../src/business/pages/ecard/basic.vue        | 39 ++++++++++++++
 .../src/business/pages/ecard/index.vue        | 45 ++++------------
 src/packages/__VUE/ecard/demo.vue             | 51 -------------------
 src/packages/__VUE/ecard/demo/basic.vue       | 39 ++++++++++++++
 src/packages/__VUE/ecard/demo/index.vue       | 19 +++++++
 src/packages/__VUE/ecard/doc.en-US.md         | 48 +----------------
 src/packages/__VUE/ecard/doc.md               | 48 +----------------
 src/packages/__VUE/ecard/doc.taro.md          | 48 +----------------
 8 files changed, 114 insertions(+), 223 deletions(-)
 create mode 100644 packages/nutui-taro-demo/src/business/pages/ecard/basic.vue
 delete mode 100644 src/packages/__VUE/ecard/demo.vue
 create mode 100644 src/packages/__VUE/ecard/demo/basic.vue
 create mode 100644 src/packages/__VUE/ecard/demo/index.vue

diff --git a/packages/nutui-taro-demo/src/business/pages/ecard/basic.vue b/packages/nutui-taro-demo/src/business/pages/ecard/basic.vue
new file mode 100644
index 0000000000..220b018e8e
--- /dev/null
+++ b/packages/nutui-taro-demo/src/business/pages/ecard/basic.vue
@@ -0,0 +1,39 @@
+<template>
+  <nut-cell>
+    <nut-ecard
+      v-model="money"
+      :data-list="dataList"
+      @input-change="inputChange"
+      @change="change"
+      @change-step="changeStep"
+    ></nut-ecard>
+  </nut-cell>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const dataList = ref([
+  {
+    price: 10
+  },
+  {
+    price: 20
+  },
+  {
+    price: 30
+  },
+  {
+    price: 40
+  }
+]);
+const money = ref(10);
+const inputChange = (val: number) => {
+  money.value = val;
+};
+const change = (item: any) => {
+  money.value = item.price;
+};
+const changeStep = (num: number, price: number) => {
+  const val = price * num;
+  money.value = val;
+};
+</script>
diff --git a/packages/nutui-taro-demo/src/business/pages/ecard/index.vue b/packages/nutui-taro-demo/src/business/pages/ecard/index.vue
index ec31a8aa25..32fa0cc315 100644
--- a/packages/nutui-taro-demo/src/business/pages/ecard/index.vue
+++ b/packages/nutui-taro-demo/src/business/pages/ecard/index.vue
@@ -1,42 +1,19 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell>
-      <nut-ecard
-        v-model="money"
-        :data-list="dataList"
-        @input-change="inputChange"
-        @change="change"
-        @change-step="changeStep"
-      ></nut-ecard>
-    </nut-cell>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
   </Demo>
 </template>
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
-const dataList = reactive([
-  {
-    price: 10
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法'
   },
-  {
-    price: 20
-  },
-  {
-    price: 30
-  },
-  {
-    price: 40
+  'en-US': {
+    basic: 'Basic Usage'
   }
-]);
-const money = ref(0);
-const inputChange = (val: number) => {
-  money.value = val;
-};
-const change = (item: { price: number }) => {
-  money.value = item.price;
-};
-const changeStep = (num: number, price: number) => {
-  const val = price * num;
-  money.value = val;
-};
+});
 </script>
diff --git a/src/packages/__VUE/ecard/demo.vue b/src/packages/__VUE/ecard/demo.vue
deleted file mode 100644
index 7409b7a9b2..0000000000
--- a/src/packages/__VUE/ecard/demo.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-cell>
-      <nut-ecard
-        v-model="money"
-        :data-list="dataList"
-        @input-change="inputChange"
-        @change="change"
-        @change-step="changeStep"
-      ></nut-ecard>
-    </nut-cell>
-  </div>
-</template>
-<script setup lang="ts">
-import { reactive, ref } from 'vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-const translate = useTranslate({
-  'zh-CN': {
-    basic: '基础用法'
-  },
-  'en-US': {
-    basic: 'Basic Usage'
-  }
-});
-const dataList = reactive([
-  {
-    price: 10
-  },
-  {
-    price: 20
-  },
-  {
-    price: 30
-  },
-  {
-    price: 40
-  }
-]);
-const money = ref(10);
-const inputChange = (val: number) => {
-  money.value = val;
-};
-const change = (item: { price: number }) => {
-  money.value = item.price;
-};
-const changeStep = (num: number, price: number) => {
-  const val = price * num;
-  money.value = val;
-};
-</script>
diff --git a/src/packages/__VUE/ecard/demo/basic.vue b/src/packages/__VUE/ecard/demo/basic.vue
new file mode 100644
index 0000000000..220b018e8e
--- /dev/null
+++ b/src/packages/__VUE/ecard/demo/basic.vue
@@ -0,0 +1,39 @@
+<template>
+  <nut-cell>
+    <nut-ecard
+      v-model="money"
+      :data-list="dataList"
+      @input-change="inputChange"
+      @change="change"
+      @change-step="changeStep"
+    ></nut-ecard>
+  </nut-cell>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const dataList = ref([
+  {
+    price: 10
+  },
+  {
+    price: 20
+  },
+  {
+    price: 30
+  },
+  {
+    price: 40
+  }
+]);
+const money = ref(10);
+const inputChange = (val: number) => {
+  money.value = val;
+};
+const change = (item: any) => {
+  money.value = item.price;
+};
+const changeStep = (num: number, price: number) => {
+  const val = price * num;
+  money.value = val;
+};
+</script>
diff --git a/src/packages/__VUE/ecard/demo/index.vue b/src/packages/__VUE/ecard/demo/index.vue
new file mode 100644
index 0000000000..3be62780bd
--- /dev/null
+++ b/src/packages/__VUE/ecard/demo/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+  </Demo>
+</template>
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法'
+  },
+  'en-US': {
+    basic: 'Basic Usage'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/ecard/doc.en-US.md b/src/packages/__VUE/ecard/doc.en-US.md
index 7a8e2b1464..5a3695e541 100644
--- a/src/packages/__VUE/ecard/doc.en-US.md
+++ b/src/packages/__VUE/ecard/doc.en-US.md
@@ -16,51 +16,7 @@ app.use(Ecard);
 
 ### Basic
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-ecard
-      v-model="money"
-      @input-change="inputChange"
-      @change="change"
-      @change-step="changeStep"
-      :data-list="dataList"
-    ></nut-ecard>
-  </nut-cell>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-const dataList = reactive([
-  {
-    price: 10
-  },
-  {
-    price: 20
-  },
-  {
-    price: 30
-  },
-  {
-    price: 40
-  }
-]);
-const money = ref(10);
-const inputChange = (val) => {
-  money.value = val;
-};
-const change = (item) => {
-  money.value = item.price;
-};
-const changeStep = (num, price) => {
-  const val = price * num;
-  money.value = val;
-};
-</script>
-```
-
-:::
+> demo: ecard basic
 
 ## API
 
@@ -68,7 +24,7 @@ const changeStep = (num, price) => {
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| modelValue | Price | number | `0` |
+| model-value | Price | number | `0` |
 | choose-text | Main Title | string | `Select` |
 | other-value-text | Other Text | string | `Other Value` |
 | data-list | Ecard List | Array | `DataList[]` |
diff --git a/src/packages/__VUE/ecard/doc.md b/src/packages/__VUE/ecard/doc.md
index 0851ea19d1..d9f9af3675 100644
--- a/src/packages/__VUE/ecard/doc.md
+++ b/src/packages/__VUE/ecard/doc.md
@@ -16,51 +16,7 @@ app.use(Ecard);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-ecard
-      v-model="money"
-      @input-change="inputChange"
-      @change="change"
-      @change-step="changeStep"
-      :data-list="dataList"
-    ></nut-ecard>
-  </nut-cell>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-const dataList = reactive([
-  {
-    price: 10
-  },
-  {
-    price: 20
-  },
-  {
-    price: 30
-  },
-  {
-    price: 40
-  }
-]);
-const money = ref(10);
-const inputChange = (val) => {
-  money.value = val;
-};
-const change = (item) => {
-  money.value = item.price;
-};
-const changeStep = (num, price) => {
-  const val = price * num;
-  money.value = val;
-};
-</script>
-```
-
-:::
+> demo: ecard basic
 
 ## API
 
@@ -68,7 +24,7 @@ const changeStep = (num, price) => {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| modelValue | 购买电子卡所需价钱 | number | `0` |
+| model-value | 购买电子卡所需价钱 | number | `0` |
 | choose-text | 选择面值文案 | string | `请选择电子卡面值` |
 | other-value-text | 其他面值文案 | string | `其他面值` |
 | data-list | 电子卡面值列表 | Array | `DataList[]` |
diff --git a/src/packages/__VUE/ecard/doc.taro.md b/src/packages/__VUE/ecard/doc.taro.md
index 194f888665..3715685b0d 100644
--- a/src/packages/__VUE/ecard/doc.taro.md
+++ b/src/packages/__VUE/ecard/doc.taro.md
@@ -16,51 +16,7 @@ app.use(Ecard);
 
 ### 基础用法
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-ecard
-      v-model="money"
-      @input-change="inputChange"
-      @change="change"
-      @change-step="changeStep"
-      :data-list="dataList"
-    ></nut-ecard>
-  </nut-cell>
-</template>
-<script setup>
-import { ref, reactive } from 'vue';
-const dataList = reactive([
-  {
-    price: 10
-  },
-  {
-    price: 20
-  },
-  {
-    price: 30
-  },
-  {
-    price: 40
-  }
-]);
-const money = ref(10);
-const inputChange = (val) => {
-  money.value = val;
-};
-const change = (item) => {
-  money.value = item.price;
-};
-const changeStep = (num, price) => {
-  const val = price * num;
-  money.value = val;
-};
-</script>
-```
-
-:::
+> demo: ecard basic business
 
 ## API
 
@@ -68,7 +24,7 @@ const changeStep = (num, price) => {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| modelValue | 购买电子卡所需价钱 | number | `0` |
+| model-value | 购买电子卡所需价钱 | number | `0` |
 | choose-text | 选择面值文案 | string | `请选择电子卡面值` |
 | other-value-text | 其他面值文案 | string | `其他面值` |
 | data-list | 电子卡面值列表 | Array | `DataList[]` |