From 4d67af77b18b318bf98fa024f39055f6d6164d27 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Fri, 21 Jul 2023 00:54:51 +0800
Subject: [PATCH] chore(empty): optimize (#2443)

---
 .../src/exhibition/pages/empty/index.vue      | 24 ++----
 .../__VUE/empty/__tests__/index.spec.ts       | 66 +++++++--------
 src/packages/__VUE/empty/demo.vue             | 25 ++----
 src/packages/__VUE/empty/doc.en-US.md         | 33 +++-----
 src/packages/__VUE/empty/doc.md               | 33 +++-----
 src/packages/__VUE/empty/doc.taro.md          | 33 +++-----
 src/packages/__VUE/empty/index.taro.vue       | 77 ++++++-----------
 src/packages/__VUE/empty/index.vue            | 82 +++++++------------
 src/packages/__VUE/empty/types.ts             |  1 +
 9 files changed, 141 insertions(+), 233 deletions(-)
 create mode 100644 src/packages/__VUE/empty/types.ts

diff --git a/packages/nutui-taro-demo/src/exhibition/pages/empty/index.vue b/packages/nutui-taro-demo/src/exhibition/pages/empty/index.vue
index 00af5b0e97..7db7be3045 100644
--- a/packages/nutui-taro-demo/src/exhibition/pages/empty/index.vue
+++ b/packages/nutui-taro-demo/src/exhibition/pages/empty/index.vue
@@ -23,11 +23,10 @@
 
     <h2>自定义图片</h2>
     <div class="show">
-      <nut-empty description="无优惠券">
-        <template #image>
-          <img src="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" />
-        </template>
-      </nut-empty>
+      <nut-empty
+        image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
+        description="无优惠券"
+      ></nut-empty>
     </div>
 
     <h2>底部内容</h2>
@@ -41,21 +40,12 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { ref } from 'vue';
 import Taro from '@tarojs/taro';
 import Header from '../../../components/header.vue';
-export default {
-  components: { Header },
-  setup() {
-    const env = Taro.getEnv();
-    const tabValue = ref(0);
-    return {
-      tabValue,
-      env
-    };
-  }
-};
+const env = Taro.getEnv();
+const tabValue = ref(0);
 </script>
 
 <style lang="scss">
diff --git a/src/packages/__VUE/empty/__tests__/index.spec.ts b/src/packages/__VUE/empty/__tests__/index.spec.ts
index 661716ad29..a8683f3859 100644
--- a/src/packages/__VUE/empty/__tests__/index.spec.ts
+++ b/src/packages/__VUE/empty/__tests__/index.spec.ts
@@ -1,46 +1,48 @@
 import { mount } from '@vue/test-utils';
 import Empty from '../../empty/index.vue';
 
-describe('Empty', () => {
-  test('should be shown when passing image and description', () => {
-    const wrapper = mount(Empty, {
-      props: {
-        image: 'empty',
-        description: '这是文字描述'
-      }
-    });
-
-    expect(wrapper.html()).toContain('img');
-    expect(wrapper.html()).toContain('这是文字描述');
+test('Empty: should be shown when passing image and description', () => {
+  const wrapper = mount(Empty, {
+    props: {
+      image: 'empty',
+      imageSize: '50',
+      description: '这是文字描述'
+    }
   });
 
-  test('should be shown when passing slot image', () => {
-    const wrapper = mount(Empty, {
-      slots: {
-        image: '<img src="https://abc.png"/>'
-      }
-    });
+  expect(wrapper.html()).toContain('img');
+  expect(wrapper.html()).toContain('这是文字描述');
+});
 
-    expect(wrapper.html()).toContain('abc.png');
+test('Empty: should be shown when passing slot image', () => {
+  const wrapper = mount(Empty, {
+    slots: {
+      image: '<img src="https://abc.png"/>'
+    }
   });
 
-  test('should be shown when passing slot description', () => {
-    const wrapper = mount(Empty, {
-      slots: {
-        description: 'test'
-      }
-    });
+  expect(wrapper.html()).toContain('abc.png');
+});
 
-    expect(wrapper.html()).toContain('test');
+test('Empty: should be shown when passing slot description', () => {
+  const wrapper = mount(Empty, {
+    props: {
+      image: 'https://abc.png'
+    },
+    slots: {
+      description: 'test'
+    }
   });
 
-  test('should be shown when passing slot defalut', () => {
-    const wrapper = mount(Empty, {
-      slots: {
-        default: '加载失败，请刷新页面'
-      }
-    });
+  expect(wrapper.html()).toContain('test');
+});
 
-    expect(wrapper.html()).toContain('加载失败');
+test('Empty: should be shown when passing slot defalut', () => {
+  const wrapper = mount(Empty, {
+    slots: {
+      default: '加载失败，请刷新页面'
+    }
   });
+
+  expect(wrapper.html()).toContain('加载失败');
 });
diff --git a/src/packages/__VUE/empty/demo.vue b/src/packages/__VUE/empty/demo.vue
index 7c6c6b377d..dc7d921156 100644
--- a/src/packages/__VUE/empty/demo.vue
+++ b/src/packages/__VUE/empty/demo.vue
@@ -22,10 +22,10 @@
 
     <h2>{{ translate('customImg') }}</h2>
     <div class="show">
-      <nut-empty :description="translate('description')">
-        <template #image>
-          <img src="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" />
-        </template>
+      <nut-empty
+        image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
+        :description="translate('description')"
+      >
       </nut-empty>
     </div>
 
@@ -40,8 +40,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { ref, defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 const { translate } = createComponent('empty');
 import { useTranslate } from '@/sites/assets/util/useTranslate';
@@ -74,17 +74,8 @@ const initTranslate = () =>
       retry: 'Retry'
     }
   });
-export default defineComponent({
-  props: {},
-  setup() {
-    initTranslate();
-    const tabValue = ref(0);
-    return {
-      tabValue,
-      translate
-    };
-  }
-});
+initTranslate();
+const tabValue = ref(0);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/__VUE/empty/doc.en-US.md b/src/packages/__VUE/empty/doc.en-US.md
index a49910c0f6..0229dcf5e8 100644
--- a/src/packages/__VUE/empty/doc.en-US.md
+++ b/src/packages/__VUE/empty/doc.en-US.md
@@ -6,7 +6,7 @@ Occupation reminder when empty.
 
 ### Install
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Empty } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-empty description="no data"></nut-empty>
 </template>
@@ -30,7 +30,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-tabs v-model="tabValue">
     <nut-tab-pane title="empty">
@@ -44,16 +44,8 @@ app.use(Empty);
     </nut-tab-pane>
   </nut-tabs>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const tabValue = ref(0);
-      return {
-        tabValue
-      };
-    }
-  };
+<script setup>
+const tabValue = ref(0);
 </script>
 ```
 
@@ -63,13 +55,12 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-empty description="Description">
-    <template #image>
-      <img src="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" />
-    </template>
-  </nut-empty>
+  <nut-empty
+    image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
+    description="Description"
+  ></nut-empty>
 </template>
 ```
 
@@ -79,7 +70,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-empty image="error" description="Failed to load">
     <div style="margin-top: 10px">
@@ -91,7 +82,7 @@ app.use(Empty);
 
 :::
 
-## API
+## Empty
 
 ### Props
 
diff --git a/src/packages/__VUE/empty/doc.md b/src/packages/__VUE/empty/doc.md
index 8c4b632172..56cf46ab31 100644
--- a/src/packages/__VUE/empty/doc.md
+++ b/src/packages/__VUE/empty/doc.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Empty } from '@nutui/nutui';
 
@@ -18,7 +18,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-empty description="无数据"></nut-empty>
 </template>
@@ -30,7 +30,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-tabs v-model="tabValue">
     <nut-tab-pane title="无内容">
@@ -44,16 +44,8 @@ app.use(Empty);
     </nut-tab-pane>
   </nut-tabs>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const tabValue = ref(0);
-      return {
-        tabValue
-      };
-    }
-  };
+<script setup>
+const tabValue = ref(0);
 </script>
 ```
 
@@ -63,13 +55,12 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-empty description="描述文字">
-    <template #image>
-      <img src="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" />
-    </template>
-  </nut-empty>
+  <nut-empty
+    image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
+    description="描述文字"
+  ></nut-empty>
 </template>
 ```
 
@@ -79,7 +70,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-empty image="error" description="加载失败">
     <div style="margin-top: 10px">
@@ -91,7 +82,7 @@ app.use(Empty);
 
 :::
 
-## API
+## Empty
 
 ### Props
 
diff --git a/src/packages/__VUE/empty/doc.taro.md b/src/packages/__VUE/empty/doc.taro.md
index e75892b54e..1c3670adc4 100644
--- a/src/packages/__VUE/empty/doc.taro.md
+++ b/src/packages/__VUE/empty/doc.taro.md
@@ -6,7 +6,7 @@
 
 ### 安装
 
-```javascript
+```js
 import { createApp } from 'vue';
 import { Empty } from '@nutui/nutui-taro';
 
@@ -18,7 +18,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-empty description="无数据"></nut-empty>
 </template>
@@ -30,7 +30,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-tabs v-model="tabValue">
     <nut-tab-pane title="无内容">
@@ -44,16 +44,8 @@ app.use(Empty);
     </nut-tab-pane>
   </nut-tabs>
 </template>
-<script lang="ts">
-  import { ref } from 'vue';
-  export default {
-    setup() {
-      const tabValue = ref(0);
-      return {
-        tabValue
-      };
-    }
-  };
+<script setup>
+const tabValue = ref(0);
 </script>
 ```
 
@@ -63,13 +55,12 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
-  <nut-empty description="描述文字">
-    <template #image>
-      <img src="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png" />
-    </template>
-  </nut-empty>
+  <nut-empty
+    image="https://static-ftcms.jd.com/p/files/61a9e3313985005b3958672e.png"
+    description="描述文字"
+  ></nut-empty>
 </template>
 ```
 
@@ -79,7 +70,7 @@ app.use(Empty);
 
 :::demo
 
-```html
+```vue
 <template>
   <nut-empty image="error" description="加载失败">
     <div style="margin-top: 10px">
@@ -91,7 +82,7 @@ app.use(Empty);
 
 :::
 
-## API
+## Empty
 
 ### Props
 
diff --git a/src/packages/__VUE/empty/index.taro.vue b/src/packages/__VUE/empty/index.taro.vue
index 49eb7f0764..43cdd3ea05 100644
--- a/src/packages/__VUE/empty/index.taro.vue
+++ b/src/packages/__VUE/empty/index.taro.vue
@@ -1,42 +1,26 @@
 <template>
   <view class="nut-empty">
-    <!-- 占位图 -->
-    <view class="nut-empty__box" :style="imgStyle">
-      <template v-if="$slots.image">
-        <slot name="image"></slot>
-      </template>
-      <template v-else>
-        <img v-if="imageUrl" class="nut-empty__box--img" :src="imageUrl" />
-      </template>
+    <view class="nut-empty__box" :style="style">
+      <slot name="image">
+        <img v-if="src" class="nut-empty__box--img" :src="src" />
+      </slot>
     </view>
 
-    <!-- 文本区 -->
-    <template v-if="$slots.description">
-      <slot name="description"></slot>
-    </template>
-    <template v-else>
+    <slot name="description">
       <view class="nut-empty__description">{{ description || translate('noData') }}</view>
-    </template>
+    </slot>
 
-    <!-- 自定义slot -->
-    <template v-if="$slots.default">
-      <slot></slot>
-    </template>
+    <slot></slot>
   </view>
 </template>
 <script lang="ts">
-import { toRefs, computed } from 'vue';
+import { computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { EmptyImage } from './types';
+import { pxCheck } from '@/packages/utils/pxCheck';
 const { create, translate } = createComponent('empty');
 
-type statusOptions = {
-  [key: string]: string;
-};
-
-/**
- * 内置图片地址
- */
-const defaultStatus: statusOptions = {
+const defaultStatus: any = {
   empty: 'https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png',
   error: 'https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png',
   network: 'https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png'
@@ -45,45 +29,34 @@ const defaultStatus: statusOptions = {
 export default create({
   props: {
     image: {
-      type: String,
-      default: 'empty' //默认empty
+      type: String as PropType<EmptyImage>,
+      default: 'empty'
     },
     imageSize: {
-      type: [Number, String], // 图片大小，正方形
+      type: [Number, String],
       default: ''
     },
     description: {
-      type: String, // 文字区
+      type: String,
       default: ''
     }
   },
-
   setup(props) {
-    const { image, imageSize } = toRefs(props);
-
-    /**
-     * 根据imgSize计算行内样式
-     */
-    const imgStyle = computed(() => {
-      if (!imageSize.value) {
-        return '';
-      }
-      if (typeof imageSize.value === 'number') {
-        return `width:${imageSize.value}px;height:${imageSize.value}px`;
+    const style = computed(() => {
+      if (props.imageSize) {
+        return {
+          width: pxCheck(props.imageSize),
+          height: pxCheck(props.imageSize)
+        };
       }
-      return `width:${imageSize.value};height:${imageSize.value}`;
+      return {};
     });
 
-    // 是否 URL
     const isHttpUrl =
-      image.value.startsWith('https://') || image.value.startsWith('http://') || image.value.startsWith('//');
-    const imageUrl = isHttpUrl ? image.value : defaultStatus[image.value];
+      props.image.startsWith('https://') || props.image.startsWith('http://') || props.image.startsWith('//');
+    const src = isHttpUrl ? props.image : defaultStatus[props.image];
 
-    return {
-      imageUrl,
-      imgStyle,
-      translate
-    };
+    return { src, style, translate };
   }
 });
 </script>
diff --git a/src/packages/__VUE/empty/index.vue b/src/packages/__VUE/empty/index.vue
index 6a0d768116..e631392f53 100644
--- a/src/packages/__VUE/empty/index.vue
+++ b/src/packages/__VUE/empty/index.vue
@@ -1,42 +1,26 @@
 <template>
   <view class="nut-empty">
-    <!-- 占位图 -->
-    <view class="nut-empty__box" :style="imgStyle">
-      <template v-if="$slots.image">
-        <slot name="image"></slot>
-      </template>
-      <template v-else>
-        <img v-if="imageUrl" class="nut-empty__box--img" :src="imageUrl" />
-      </template>
+    <view class="nut-empty__box" :style="style">
+      <slot name="image">
+        <img v-if="src" class="nut-empty__box--img" :src="src" />
+      </slot>
     </view>
 
-    <!-- 文本区 -->
-    <template v-if="$slots.description">
-      <slot name="description"></slot>
-    </template>
-    <template v-else>
+    <slot name="description">
       <view class="nut-empty__description">{{ description || translate('noData') }}</view>
-    </template>
+    </slot>
 
-    <!-- 自定义slot -->
-    <template v-if="$slots.default">
-      <slot></slot>
-    </template>
+    <slot></slot>
   </view>
 </template>
 <script lang="ts">
-import { toRefs, computed } from 'vue';
+import { computed, PropType } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { EmptyImage } from './types';
+import { pxCheck } from '@/packages/utils/pxCheck';
 const { create, translate } = createComponent('empty');
 
-type statusOptions = {
-  [key: string]: string;
-};
-
-/**
- * 内置图片地址
- */
-const defaultStatus: statusOptions = {
+const defaultStatus: any = {
   empty: 'https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png',
   error: 'https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png',
   network: 'https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png'
@@ -45,44 +29,38 @@ const defaultStatus: statusOptions = {
 export default create({
   props: {
     image: {
-      type: String,
-      default: 'empty' //默认empty
+      type: String as PropType<EmptyImage>,
+      default: 'empty'
     },
     imageSize: {
-      type: [Number, String], // 图片大小，正方形
+      type: [Number, String],
       default: ''
     },
     description: {
-      type: String, // 文字区
+      type: String,
       default: ''
     }
   },
-
   setup(props) {
-    const { image, imageSize } = toRefs(props);
-
-    /**
-     * 根据imgSize计算行内样式
-     */
-    const imgStyle = computed(() => {
-      if (!imageSize.value) {
-        return '';
-      }
-      if (typeof imageSize.value === 'number') {
-        return `width:${imageSize.value}px;height:${imageSize.value}px`;
+    const style = computed(() => {
+      if (props.imageSize) {
+        return {
+          width: pxCheck(props.imageSize),
+          height: pxCheck(props.imageSize)
+        };
       }
-      return `width:${imageSize.value};height:${imageSize.value}`;
+      return {};
     });
 
-    const isHttpUrl =
-      image.value.startsWith('https://') || image.value.startsWith('http://') || image.value.startsWith('//');
-    const imageUrl = isHttpUrl ? image.value : defaultStatus[image.value];
+    const src = computed(() => {
+      if (props.image.startsWith('https://') || props.image.startsWith('http://') || props.image.startsWith('//')) {
+        return props.image;
+      } else {
+        return defaultStatus[props.image];
+      }
+    });
 
-    return {
-      imageUrl,
-      imgStyle,
-      translate
-    };
+    return { src, style, translate };
   }
 });
 </script>
diff --git a/src/packages/__VUE/empty/types.ts b/src/packages/__VUE/empty/types.ts
new file mode 100644
index 0000000000..5fa7f54666
--- /dev/null
+++ b/src/packages/__VUE/empty/types.ts
@@ -0,0 +1 @@
+export type EmptyImage = 'empty' | 'error' | 'network' | string;