feat: 封装table img empty组件

src/components/TableImgEmpty/TableImgEmpty.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import lightPng from './image/empty-light.png'
+import darkPng from './image/empty-dark.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="table-img-empty">
+    <img :src="emptyImg" />
+    <div class="empty-text">No data</div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.table-img-empty {
+  .empty-text {
+    margin: 8px 0;
+    color: var(--color-neutral-2);
+    text-align: center;
+    font-size: 14px;
+    font-weight: 700;
+  }
+}
+</style>

src/views/Report/src/ReportView.vue

@@ -5,12 +5,8 @@ import { useRowClickStyle } from '@/hooks/rowClickStyle'
 import { formatNumber } from '@/utils/tools'
 import { useRouter } from 'vue-router'
 import { useCalculatingHeight } from '@/hooks/calculatingHeight'
-import emptyImgLight from './images/empty-light.png'
-import emptyImgDark from './images/empty-dark.png'
-import { useThemeStore } from '@/stores/modules/theme'
 
 const router = useRouter()
-const themeStore = useThemeStore()
 
 const textSearch = ref('')
 // search report name
@@ -18,10 +14,6 @@ const SearchInput = () => {
   getTableData()
 }
 
-const emptyImg = computed(() => {
-  return themeStore.theme === 'dark' ? emptyImgDark : emptyImgLight
-})
-
 const filterRef: Ref<HTMLElement | null> = ref(null)
 const containerHeight = useCalculatingHeight(document.documentElement, 256, [filterRef])
 
@@ -140,8 +132,7 @@ onMounted(() => {
     >
       <!-- 空数据时的插槽 -->
       <template #empty>
-        <img :src="emptyImg" />
-        <div class="empty-text">No data</div>
+        <TableImgEmpty />
       </template>
       <template #action="{ row }">
         <el-button class="el-button--blue" @click="handleClickDetail(row)" style="height: 24px">
@@ -228,11 +219,4 @@ onMounted(() => {
 :deep(.el-icon svg) {
   width: 1em !important;
 }
-.empty-text {
-  margin: 8px 0;
-  color: var(--color-neutral-2);
-  text-align: center;
-  font-size: 14px;
-  font-weight: 700;
-}
 </style>

src/views/Report/src/components/ReportDetail/src/ReportDetail.vue

@@ -224,7 +224,7 @@ const applyNewColumn = () => {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
   }
   .filters-title {
     font-size: 18px;

src/views/Report/src/components/ReportDetail/src/components/FieldsTable.vue

@@ -234,8 +234,7 @@ defineExpose({
       >
         <!-- 空数据时的插槽 -->
         <template #empty>
-          <img src="../images/default_no_data@2x.png" />
-          <div class="empty-text">No data</div>
+          <TableImgEmpty></TableImgEmpty>
         </template>
         <!-- Status字段的插槽 -->
         <template #status="{ row, column }">
@@ -304,11 +303,4 @@ defineExpose({
     width: 20px;
   }
 }
-.empty-text {
-  margin: 8px 0;
-  color: var(--color-neutral-2);
-  text-align: center;
-  font-size: 14px;
-  font-weight: 700;
-}
 </style>

src/views/Report/src/components/ReportSchedule/src/components/FieldsTable.vue

@@ -180,8 +180,7 @@ defineExpose({
       >
         <!-- 空数据时的插槽 -->
         <template #empty>
-          <img src="../../../ReportDetail/src/images/default_no_data@2x.png" />
-          <div class="empty-text">No data</div>
+          <TableImgEmpty></TableImgEmpty>
         </template>
         <!-- Status字段的插槽 -->
         <template #status="{ row, column }">
@@ -243,11 +242,4 @@ defineExpose({
   border-radius: 12px;
   border-top: 1px solid var(--color-border);
 }
-.empty-text {
-  margin: 8px 0;
-  color: var(--color-neutral-2);
-  text-align: center;
-  font-size: 14px;
-  font-weight: 700;
-}
 </style>

src/views/Report/src/components/ReportSchedule/src/components/TimeRange.vue

@@ -263,10 +263,7 @@ defineExpose({
                   <el-radio-button label="Past 30 days" value="Past 30 days" />
                   <el-radio-button label="Customize" value="Customize" />
                 </el-radio-group>
-                <div
-                  class="flex"
-                  style="align-items: end; margin: 16px 8px 16px 0; flex-wrap: wrap"
-                >
+                <div class="flex" style="align-items: end; margin: 16px 8px 8px 0; flex-wrap: wrap">
                   <div class="date_flex" style="margin-right: 10px">
                     <div class="time_title">Start Date</div>
                     <div class="flex">
@@ -331,7 +328,7 @@ defineExpose({
                     <el-radio-button label="Customize" value="Customize" />
                   </el-radio-group>
                 </div>
-                <div style="display: flex; padding-bottom: 16px">
+                <div style="display: flex; padding-bottom: 8px">
                   <div style="margin-right: 9px; width: 50%">
                     <div class="date_text">Start Date</div>
                     <el-date-picker