feat: 公告弹窗优化

Yi.Ai.Vue3/src/components/SystemAnnouncementDialog/index.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
 import type { AnnouncementLogDto } from '@/api';
 import type { CloseType } from '@/stores/modules/announcement';
+import { getSystemAnnouncements } from '@/api';
 import { ElMessage } from 'element-plus';
 import { storeToRefs } from 'pinia';
 import { useAnnouncementStore } from '@/stores';
 
 const announcementStore = useAnnouncementStore();
+const isLoadingData = ref(false);
 
 const activeTab = ref('activity');
 
@@ -73,6 +75,31 @@ function getActivityStatus(activity: AnnouncementLogDto): 'active' | 'expired' {
   const endTime = new Date(activity.endTime);
   return now > endTime ? 'expired' : 'active';
 }
+
+// 监听弹窗显示状态，每次打开时从后端获取最新数据
+watch(isDialogVisible, async (newValue) => {
+  if (newValue) {
+    // 弹窗打开时，从后端获取最新数据
+    isLoadingData.value = true;
+    try {
+      const res = await getSystemAnnouncements();
+      if (res && res.data && Array.isArray(res.data)) {
+        announcementStore.setAnnouncementData(res.data);
+      }
+      else {
+        announcementStore.setAnnouncementData([]);
+      }
+    }
+    catch (error) {
+      console.error('获取系统公告失败:', error);
+      ElMessage.error('获取公告数据失败，请稍后重试');
+      announcementStore.setAnnouncementData([]);
+    }
+    finally {
+      isLoadingData.value = false;
+    }
+  }
+});
 </script>
 
 <template>
@@ -83,7 +110,7 @@ function getActivityStatus(activity: AnnouncementLogDto): 'active' | 'expired' {
     :close-on-click-modal="true"
     class="announcement-dialog"
   >
-    <div class="announcement-dialog-content">
+    <div v-loading="isLoadingData" class="announcement-dialog-content">
       <el-tabs v-model="activeTab" class="announcement-tabs">
         <!-- 活动Tab -->
         <el-tab-pane label="活动" name="activity">