k_online_ui/src/components/VEmpty/src/VEmpty.vue

<script setup lang="ts">
import lightPng from './images/default_image.png'
import darkPng from './images/default_dark_image.png'
import { useThemeStore } from '@/stores/modules/theme'
import { useI18n } from 'vue-i18n'

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

<template>
  <div class="v-empty">
    <div class="empty-img">
      <img :src="emptyImg" alt="" />
    </div>
    <p class="title">
      <slot name="title">{{ t('common.noResultsFound') }}</slot>
    </p>
    <slot name="result">
      <p class="light">{{ t('common.emptyResultLine1') }}</p>
      <p class="light">{{ t('common.emptyResultLine2') }}</p>
    </slot>
    <div class="suggestion">
      <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: 600;
    color: var(--color-neutral-2);
  }
  .light {
    font-size: 12px;
    line-height: 18px;
    color: var(--color-neutral-3);
  }
  .suggestion {
    margin-top: 16px;
    padding: 8px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 6px;
    text-align: left;
    background-color: var(--color-table-header-bg);
    :deep(p) {
      margin: 0;
      color: var(--color-neutral-3);
    }
  }
}
</style>