chore(empty): split demo (#2760)

jdf2e · Dec 18, 2023 · 98d7a22 · 98d7a22
1 parent 47efca2
commit 98d7a22
Show file tree

Hide file tree

Showing 14 changed files with 143 additions and 296 deletions.
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/empty/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/empty/basic.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-empty description="404"></nut-empty>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/empty/bottom.vue b/packages/nutui-taro-demo/src/exhibition/pages/empty/bottom.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-empty image="error" description="Error">
+    <div style="margin-top: 10px">
+      <nut-button type="primary">Refresh</nut-button>
+    </div>
+  </nut-empty>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/empty/custom.vue b/packages/nutui-taro-demo/src/exhibition/pages/empty/custom.vue
@@ -0,0 +1,6 @@
+<template>
+  <nut-empty
+    image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
+    description="Description"
+  ></nut-empty>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/empty/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/empty/index.vue
@@ -1,53 +1,38 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <div class="show">
-      <nut-empty description="无数据"></nut-empty>
-    </div>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>图片类型，内置3个</h2>
-    <div class="show">
-      <nut-tabs v-model="tabValue">
-        <nut-tab-pane title="无内容">
-          <nut-empty image="empty" description="无内容"></nut-empty>
-        </nut-tab-pane>
-        <nut-tab-pane title="加载失败/错误">
-          <nut-empty image="error" description="加载失败/错误"></nut-empty>
-        </nut-tab-pane>
-        <nut-tab-pane title="无网络">
-          <nut-empty image="network" description="无网络"></nut-empty>
-        </nut-tab-pane>
-      </nut-tabs>
-    </div>
+    <h2>{{ t('type') }}</h2>
+    <Type />
 
-    <h2>自定义图片</h2>
-    <div class="show">
-      <nut-empty
-        image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
-        description="无优惠券"
-      ></nut-empty>
-    </div>
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
 
-    <h2>底部内容</h2>
-    <div class="show">
-      <nut-empty image="error" description="加载失败">
-        <div style="margin-top: 10px">
-          <nut-button icon="refresh" type="primary">重试</nut-button>
-        </div>
-      </nut-empty>
-    </div>
+    <h2>{{ t('bottom') }}</h2>
+    <Bottom />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-const tabValue = ref(0);
-</script>
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Type from './type.vue';
+import Custom from './custom.vue';
+import Bottom from './bottom.vue';
 
-<style lang="scss">
-.demo {
-  .show {
-    background: #ffffff;
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    type: '图片类型',
+    custom: '自定义图片',
+    bottom: '底部内容'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    type: 'Image Type',
+    custom: 'Custom Image',
+    bottom: 'Bottom Content'
   }
-}
-</style>
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/empty/type.vue b/packages/nutui-taro-demo/src/exhibition/pages/empty/type.vue
@@ -0,0 +1,17 @@
+<template>
+  <nut-tabs v-model="tabValue">
+    <nut-tab-pane title="empty" pane-key="0">
+      <nut-empty image="empty" description="empty"></nut-empty>
+    </nut-tab-pane>
+    <nut-tab-pane title="error" pane-key="1">
+      <nut-empty image="error" description="error"></nut-empty>
+    </nut-tab-pane>
+    <nut-tab-pane title="network" pane-key="2">
+      <nut-empty image="network" description="network"></nut-empty>
+    </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const tabValue = ref('0');
+</script>
diff --git a/src/packages/__VUE/empty/demo.vue b/src/packages/__VUE/empty/demo.vue
diff --git a/src/packages/__VUE/empty/demo/basic.vue b/src/packages/__VUE/empty/demo/basic.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-empty description="404"></nut-empty>
+</template>
diff --git a/src/packages/__VUE/empty/demo/bottom.vue b/src/packages/__VUE/empty/demo/bottom.vue
@@ -0,0 +1,7 @@
+<template>
+  <nut-empty image="error" description="Error">
+    <div style="margin-top: 10px">
+      <nut-button type="primary">Refresh</nut-button>
+    </div>
+  </nut-empty>
+</template>
diff --git a/src/packages/__VUE/empty/demo/custom.vue b/src/packages/__VUE/empty/demo/custom.vue
@@ -0,0 +1,6 @@
+<template>
+  <nut-empty
+    image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
+    description="Description"
+  ></nut-empty>
+</template>
diff --git a/src/packages/__VUE/empty/demo/index.vue b/src/packages/__VUE/empty/demo/index.vue
@@ -0,0 +1,38 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('type') }}</h2>
+    <Type />
+
+    <h2>{{ t('custom') }}</h2>
+    <Custom />
+
+    <h2>{{ t('bottom') }}</h2>
+    <Bottom />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Type from './type.vue';
+import Custom from './custom.vue';
+import Bottom from './bottom.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    type: '图片类型',
+    custom: '自定义图片',
+    bottom: '底部内容'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    type: 'Image Type',
+    custom: 'Custom Image',
+    bottom: 'Bottom Content'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/empty/demo/type.vue b/src/packages/__VUE/empty/demo/type.vue
@@ -0,0 +1,17 @@
+<template>
+  <nut-tabs v-model="tabValue">
+    <nut-tab-pane title="empty" pane-key="0">
+      <nut-empty image="empty" description="empty"></nut-empty>
+    </nut-tab-pane>
+    <nut-tab-pane title="error" pane-key="1">
+      <nut-empty image="error" description="error"></nut-empty>
+    </nut-tab-pane>
+    <nut-tab-pane title="network" pane-key="2">
+      <nut-empty image="network" description="network"></nut-empty>
+    </nut-tab-pane>
+  </nut-tabs>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+const tabValue = ref('0');
+</script>
diff --git a/src/packages/__VUE/empty/doc.en-US.md b/src/packages/__VUE/empty/doc.en-US.md
@@ -16,72 +16,19 @@ app.use(Empty);
 
 ### Basic Usage
 
-:::demo
-
-```vue
-<template>
-  <nut-empty description="no data"></nut-empty>
-</template>
-```
-
-:::
+> demo: empty basic
 
 ### Image Type
 
-:::demo
-
-```vue
-<template>
-  <nut-tabs v-model="tabValue">
-    <nut-tab-pane title="empty">
-      <nut-empty image="empty" description="no cotent"></nut-empty>
-    </nut-tab-pane>
-    <nut-tab-pane title="error">
-      <nut-empty image="error" description="error"></nut-empty>
-    </nut-tab-pane>
-    <nut-tab-pane title="no network">
-      <nut-empty image="network" description="network"></nut-empty>
-    </nut-tab-pane>
-  </nut-tabs>
-</template>
-<script setup>
-import { ref } from 'vue';
-const tabValue = ref(0);
-</script>
-```
-
-:::
+> demo: empty type
 
 ### Custom Image
 
-:::demo
-
-```vue
-<template>
-  <nut-empty
-    image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
-    description="Description"
-  ></nut-empty>
-</template>
-```
-
-:::
+> demo: empty custom
 
 ### Bottom Content
 
-:::demo
-
-```vue
-<template>
-  <nut-empty image="error" description="Failed to load">
-    <div style="margin-top: 10px">
-      <nut-button icon="refresh" type="primary">Retry</nut-button>
-    </div>
-  </nut-empty>
-</template>
-```
-
-:::
+> demo: empty bottom
 
 ## Empty