k_online_ui/src/components/TableEmpty/TableEmpty.vue

<script setup lang="ts">
import { computed } from 'vue'
import lightPng from './image/default_notification_setting@2x.png'
import darkPng from './image/default_notification_setting@2x.png'
import { useThemeStore } from '@/stores/modules/theme'

const themeStore = useThemeStore()
// 判断当前系统主题模式
const emptyImg = computed(() => {
  return themeStore.theme === 'dark' ? darkPng : lightPng
})

const props = defineProps({
  EmptyTitle: String
})
</script>

<template>
  <div class="v-empty">
    <div class="empty-img">
      <img :src="emptyImg" alt="" style="width: 100px;" />
    </div>
    <p class="title">
      <slot name="title">{{ props.EmptyTitle }}</slot>
    </p>
    <div>
      <slot name="suggestion"></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.v-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  .empty-img {
    margin-bottom: 16px;
  }
  .title {
    margin-bottom: 8px;
    font-weight: 400;
    color: var(--color-neutral-2);
  }
}
</style>