chore(skeleton): split demo (#2757)

jdf2e · Dec 17, 2023 · 47efca2 · 47efca2
1 parent 812af28
commit 47efca2
Show file tree

Hide file tree

Showing 18 changed files with 257 additions and 527 deletions.
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/avatar.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/avatar.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated avatar avatar-size="60px" row="3"> </nut-skeleton>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/basic.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/basic.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="200px" height="15px" animated></nut-skeleton>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/index.vue
@@ -1,80 +1,50 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-skeleton width="250px" height="15px" animated> </nut-skeleton>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>传入多行</h2>
-    <nut-skeleton width="250px" height="15px" title animated row="3"> </nut-skeleton>
+    <h2>{{ t('row') }}</h2>
+    <Row />
 
-    <h2>显示头像</h2>
-    <nut-skeleton width="250px" height="15px" title animated avatar row="3"> </nut-skeleton>
+    <h2>{{ t('avatar') }}</h2>
+    <Avatar />
 
-    <h2>标题段落圆角风格</h2>
-    <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
+    <h2>{{ t('round') }}</h2>
+    <Round />
 
-    <h2>图片组合</h2>
+    <h2>{{ t('picture') }}</h2>
+    <Picture />
 
-    <div class="pic-compose">
-      <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-      <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
-    </div>
-
-    <h2>显示子组件</h2>
-    <view class="content">
-      <nut-switch v-model="checked" />
-      <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
-        <view class="container">
-          <nut-avatar size="50">
-            <img
-              src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
-            />
-          </nut-avatar>
-          <view class="right-content">
-            <view class="title">NutUI</view>
-            <view class="desc"
-              >一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。</view
-            >
-          </view>
-        </view>
-      </nut-skeleton>
-    </view>
+    <h2>{{ t('sub') }}</h2>
+    <Sub />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-const checked = ref(false);
-</script>
-
-<style lang="scss">
-.content {
-  .nut-switch {
-    margin: 0 16px 8px 0;
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Row from './row.vue';
+import Avatar from './avatar.vue';
+import Round from './round.vue';
+import Picture from './picture.vue';
+import Sub from './sub.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    row: '传入多行',
+    avatar: '显示头像',
+    round: '标题段落圆角风格',
+    picture: '图片组合',
+    sub: '显示子组件'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    row: 'Multi lines',
+    avatar: 'Show Avatar',
+    round: 'Round Style',
+    picture: 'Picture combination',
+    sub: 'Display sub-component'
   }
-  .container {
-    display: flex;
-    .right-content {
-      margin-left: 19px;
-      font-family: PingFangSC;
-      display: flex;
-      flex-direction: column;
-      .title {
-        font-size: 14px;
-        color: rgba(51, 51, 51, 1);
-      }
-      .desc {
-        margin-top: 10px;
-        font-size: 13px;
-        color: rgba(154, 155, 157, 1);
-      }
-    }
-  }
-}
-.pic-compose {
-  display: flex;
-  justify-content: space-between;
-  .item {
-    width: 47%;
-  }
-}
-</style>
+});
+</script>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/picture.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/picture.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="skeleton-picture">
+    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+  </div>
+</template>
+<style>
+.skeleton-picture {
+  display: flex;
+  justify-content: space-between;
+  .item {
+    width: 47%;
+  }
+}
+</style>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/round.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/round.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/row.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/row.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated row="3"> </nut-skeleton>
+</template>
diff --git a/packages/nutui-taro-demo/src/exhibition/pages/skeleton/sub.vue b/packages/nutui-taro-demo/src/exhibition/pages/skeleton/sub.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="demo-skeleton">
+    <nut-switch v-model="checked" />
+    <nut-skeleton width="250px" height="15px" title animated avatar row="3" :loading="!checked">
+      <div class="container">
+        <nut-avatar :size="50">
+          <img
+            src="https://img14.360buyimg.com/imagetools/jfs/t1/167902/2/8762/791358/603742d7E9b4275e3/e09d8f9a8bf4c0ef.png"
+          />
+        </nut-avatar>
+        <div class="right-content">
+          <div class="title">NutUI</div>
+          <div class="desc">
+            一套京东风格的轻量级移动端Vue组库，提供丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。
+          </div>
+        </div>
+      </div>
+    </nut-skeleton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+const checked = ref(false);
+</script>
+
+<style>
+.demo-skeleton .container {
+  display: flex;
+}
+.demo-skeleton .right-content {
+  margin-left: 19px;
+  font-family: PingFangSC;
+  display: flex;
+  flex-direction: column;
+}
+.demo-skeleton .title {
+  font-size: 14px;
+  color: rgba(51, 51, 51, 1);
+}
+.demo-skeleton .desc {
+  margin-top: 10px;
+  font-size: 13px;
+  color: rgba(154, 155, 157, 1);
+}
+</style>
diff --git a/src/packages/__VUE/skeleton/demo.vue b/src/packages/__VUE/skeleton/demo.vue
diff --git a/src/packages/__VUE/skeleton/demo/avatar.vue b/src/packages/__VUE/skeleton/demo/avatar.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated avatar avatar-size="60px" row="3"> </nut-skeleton>
+</template>
diff --git a/src/packages/__VUE/skeleton/demo/basic.vue b/src/packages/__VUE/skeleton/demo/basic.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="200px" height="15px" animated></nut-skeleton>
+</template>
diff --git a/src/packages/__VUE/skeleton/demo/index.vue b/src/packages/__VUE/skeleton/demo/index.vue
@@ -0,0 +1,50 @@
+<template>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
+
+    <h2>{{ t('row') }}</h2>
+    <Row />
+
+    <h2>{{ t('avatar') }}</h2>
+    <Avatar />
+
+    <h2>{{ t('round') }}</h2>
+    <Round />
+
+    <h2>{{ t('picture') }}</h2>
+    <Picture />
+
+    <h2>{{ t('sub') }}</h2>
+    <Sub />
+  </Demo>
+</template>
+
+<script setup lang="ts">
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Row from './row.vue';
+import Avatar from './avatar.vue';
+import Round from './round.vue';
+import Picture from './picture.vue';
+import Sub from './sub.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    row: '传入多行',
+    avatar: '显示头像',
+    round: '标题段落圆角风格',
+    picture: '图片组合',
+    sub: '显示子组件'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    row: 'Multi lines',
+    avatar: 'Show Avatar',
+    round: 'Round Style',
+    picture: 'Picture combination',
+    sub: 'Display sub-component'
+  }
+});
+</script>
diff --git a/src/packages/__VUE/skeleton/demo/picture.vue b/src/packages/__VUE/skeleton/demo/picture.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="skeleton-picture">
+    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+    <nut-skeleton width="250px" height="15px" title animated row="3" class="item"> </nut-skeleton>
+  </div>
+</template>
+<style>
+.skeleton-picture {
+  display: flex;
+  justify-content: space-between;
+  .item {
+    width: 47%;
+  }
+}
+</style>
diff --git a/src/packages/__VUE/skeleton/demo/round.vue b/src/packages/__VUE/skeleton/demo/round.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated round></nut-skeleton>
+</template>
diff --git a/src/packages/__VUE/skeleton/demo/row.vue b/src/packages/__VUE/skeleton/demo/row.vue
@@ -0,0 +1,3 @@
+<template>
+  <nut-skeleton width="250px" height="15px" animated row="3"> </nut-skeleton>
+</template>