邹方成
2b4b9a2e9c
refactor: 优化市场价值计算逻辑和行业均值计算 fix: 修复环境变量和配置文件问题 chore: 更新Docker镜像版本至v1.4 docs: 更新需求文档和部署说明 style: 调整代码格式和样式 build: 配置Vite构建工具和依赖管理 test: 添加前端组件测试基础 ci: 设置CI/CD脚本和工作流 perf: 优化前端性能和数据加载
83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<template>
|
|
<div v-if="reloadFlag" class="relative">
|
|
<slot></slot>
|
|
<div v-show="showPlaceholder" class="absolute-lt h-full w-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">
|
|
<icon-custom-no-data :class="iconClass" />
|
|
<p class="absolute-lb w-full text-center" :class="descClass">{{ emptyDesc }}</p>
|
|
</div>
|
|
</div>
|
|
<div v-show="!network" class="absolute-center">
|
|
<div
|
|
class="relative"
|
|
:class="{ 'cursor-pointer': showNetworkReload }"
|
|
@click="handleReload"
|
|
>
|
|
<icon-custom-network-error :class="iconClass" />
|
|
<p class="absolute-lb w-full text-center" :class="descClass">{{ networkErrorDesc }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, nextTick, watch, onUnmounted } from 'vue'
|
|
|
|
defineOptions({ name: 'LoadingEmptyWrapper' })
|
|
|
|
const NETWORK_ERROR_MSG = '网络似乎开了小差~'
|
|
|
|
const props = {
|
|
loading: false,
|
|
empty: false,
|
|
loadingSize: 'medium',
|
|
placeholderClass: 'bg-white dark:bg-dark transition-background-color duration-300 ease-in-out',
|
|
emptyDesc: '暂无数据',
|
|
iconClass: 'text-320px text-primary',
|
|
descClass: 'text-16px text-#666',
|
|
showNetworkReload: false,
|
|
}
|
|
|
|
// 网络状态
|
|
const network = ref(window.navigator.onLine)
|
|
const reloadFlag = ref(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
|
|
reloadFlag.value = false
|
|
nextTick(() => {
|
|
reloadFlag.value = true
|
|
})
|
|
}
|
|
|
|
const stopHandle = watch(
|
|
() => props.loading,
|
|
(newValue) => {
|
|
// 结束加载判断一下网络状态
|
|
if (!newValue) {
|
|
network.value = window.navigator.onLine
|
|
}
|
|
},
|
|
)
|
|
|
|
onUnmounted(() => {
|
|
stopHandle()
|
|
})
|
|
</script>
|
|
|
|
<style scoped></style>
|