WebIndex/components/card/SectionCard.vue

<script lang="ts" setup>
defineProps<{
  loading: boolean
  error: boolean
  empty: boolean
  errMsg?: object
}>()

const emit = defineEmits(['reload']),

  handleReload = () => {
    emit('reload')
  }
</script>

<template>
  <div
    :class="{ 'justify-center': (empty || error) }"
    class="container flex"
  >
    <!-- 加载骨架 -->
    <div
      v-if="loading"
      class="h-56 w-full text-2xl font-bold"
    >
      <slot name="skeleton">
        <div class="grid w-full grid-cols-1 gap-4 overflow-hidden sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          <div
            v-for="index of 3"
            :key="index"
            class="h-56 animate-pulse rounded-2xl bg-gray-200"
          />
        </div>
      </slot>
    </div>
    <div
      v-else
      class="w-full"
    >
      <!-- 错误处理 -->
      <div
        v-if="error"
        @click="handleReload"
      >
        <div class="flex items-center justify-center gap-8">
          <p class="text-2xl text-gray-700 border-2 border-black py-2 px-8 rounded-full rounded-br-lg">
            载入错误
          </p>
          <img
            class="h-32 w-auto relative"
            src="~/assets/images/common/plana_e.png"
            alt=""
          >
        </div>
        <div
          v-if="errMsg"
          class="bg-white mt-4 p-4 border border-dashed rounded-md"
          style="font-family: 'LXGW WenKai Mono', monospace"
        >
          {{ errMsg }}
        </div>
        <p class="text-right text-xs">
          (点击重试)
        </p>
      </div>
      <div v-else>
        <!-- 正式内容 -->
        <div v-if="empty">
          <div
            v-if="empty"
            class="flex items-center justify-center gap-8"
            @click="handleReload"
          >
            <p class="text-2xl text-gray-700 border-2 border-black py-2 px-8 rounded-full rounded-br-lg">
              最近没有动态~
            </p>
            <img
              class="h-32 w-auto relative"
              src="~/assets/images/common/plana_e.png"
              alt=""
            >
          </div>
          <p class="text-right text-xs">
            (点击重试)
          </p>
        </div>

        <slot
          v-else
          name="default"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>