refactor(projects): 细节完善

src/components/business/LoadingEmptyWrapper/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div v-if="reloadFlag" class="relative">
+    <slot></slot>
+    <div v-show="showPlaceholder" class="absolute-lt w-full h-full" :class="placeholderClass">
+      <div v-show="loading" class="absolute-center">
+        <n-spin :show="true" :size="loadingSize" />
+      </div>
+      <div v-show="isEmpty" class="absolute-center">
+        <div class="relative" :class="emptyNetworkClass">
+          <svg-empty-data class="text-primary" />
+          <p class="absolute-lb w-full text-center">{{ emptyDesc }}</p>
+        </div>
+      </div>
+      <div v-show="!network" class="absolute-center">
+        <div
+          class="relative"
+          :class="[{ 'cursor-pointer': showNetworkReload }, emptyNetworkClass]"
+          @click="handleReload"
+        >
+          <svg-network-error class="text-primary" />
+          <p class="absolute-lb w-full text-center">{{ networkErrorDesc }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, nextTick, onUnmounted } from 'vue';
+import { NSpin } from 'naive-ui';
+import { NETWORK_ERROR_MSG } from '@/config';
+import { SvgEmptyData, SvgNetworkError } from '@/components';
+import { useBoolean } from '@/hooks';
+
+interface Props {
+  /** 是否加载 */
+  loading: boolean;
+  /** 是否为空 */
+  empty?: boolean;
+  /** 加载图标的大小 */
+  loadingSize?: 'small' | 'medium' | 'large';
+  /** 中间占位符的class */
+  placeholderClass?: string;
+  /** 空数据描述文本 */
+  emptyDesc?: string;
+  /** 空数据和网络异常占位class */
+  emptyNetworkClass?: string;
+  /** 显示网络异常的重试点击按钮 */
+  showNetworkReload?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  empty: false,
+  loadingSize: 'medium',
+  placeholderClass: 'bg-white',
+  emptyDesc: '暂无数据',
+  emptyNetworkClass: 'w-320px h-320px text-16px text-[#666]',
+  showNetworkReload: false
+});
+
+// 网络状态
+const { bool: network, setBool: setNetwork } = useBoolean(window.navigator.onLine);
+const { bool: reloadFlag, setBool: setReload } = useBoolean(true);
+
+// 数据是否为空
+const isEmpty = computed(() => props.empty && !props.loading && network.value);
+
+const showPlaceholder = computed(() => props.loading || isEmpty.value || !network.value);
+
+const networkErrorDesc = computed(() =>
+  props.showNetworkReload ? `${NETWORK_ERROR_MSG}, 点击重试` : NETWORK_ERROR_MSG
+);
+
+function handleReload() {
+  if (!props.showNetworkReload) return;
+  setReload(false);
+  nextTick(() => {
+    setReload(true);
+  });
+}
+
+const stopHandle = watch(
+  () => props.loading,
+  newValue => {
+    // 结束加载判断一下网络状态
+    if (!newValue) {
+      setNetwork(window.navigator.onLine);
+    }
+  }
+);
+
+onUnmounted(() => {
+  stopHandle();
+});
+</script>
+<style scoped></style>

src/components/business/index.ts

@@ -1,3 +1,4 @@
+import LoadingEmptyWrapper from './LoadingEmptyWrapper/index.vue';
 import LoginAgreement from './LoginAgreement/index.vue';
 
-export { LoginAgreement };
+export { LoadingEmptyWrapper, LoginAgreement };