fix: 公告优化
This commit is contained in:
@@ -1,67 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import type { AnnouncementLogDto } from '@/api';
|
||||
import { getSystemAnnouncements } from '@/api';
|
||||
import SystemAnnouncementDialog from '@/components/SystemAnnouncementDialog/index.vue';
|
||||
import { useAnnouncementStore } from '@/stores';
|
||||
|
||||
const announcementStore = useAnnouncementStore();
|
||||
|
||||
// 模拟数据(当后端接口未就绪时使用)
|
||||
const mockData: AnnouncementLogDto[] = [
|
||||
{
|
||||
title: 'v2.3.0',
|
||||
content: [
|
||||
'重大更新',
|
||||
'1:优化整体',
|
||||
'2: 还有谁',
|
||||
],
|
||||
imageUrl: 'https://ccnetcore.com/prod-api/wwwroot/logo.png',
|
||||
startTime: '2025-11-10 14:58:58',
|
||||
endTime: null,
|
||||
type: 'System',
|
||||
},
|
||||
{
|
||||
title: 'KFC翻牌活动',
|
||||
content: [
|
||||
'666',
|
||||
'777',
|
||||
'2: 还有谁',
|
||||
],
|
||||
imageUrl: 'https://ccnetcore.com/prod-api/wwwroot/logo.png',
|
||||
startTime: '2025-11-10 14:58:58',
|
||||
endTime: '2025-11-15 14:59:49',
|
||||
type: 'Activity',
|
||||
},
|
||||
];
|
||||
|
||||
// 应用加载时检查是否需要显示公告弹窗
|
||||
onMounted(async () => {
|
||||
console.log('announcementStore.shouldShowDialog--', announcementStore.shouldShowDialog);
|
||||
// 检查是否应该显示弹窗
|
||||
if (announcementStore.shouldShowDialog) {
|
||||
try {
|
||||
// 获取公告数据
|
||||
const res = await getSystemAnnouncements();
|
||||
if (res && res.data && Array.isArray(res.data) && res.data.length > 0) {
|
||||
announcementStore.setAnnouncementData(res.data);
|
||||
// 显示弹窗
|
||||
announcementStore.openDialog();
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取系统公告失败,使用模拟数据:', error);
|
||||
// 使用模拟数据作为降级方案
|
||||
announcementStore.setAnnouncementData(mockData);
|
||||
announcementStore.openDialog();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<router-view />
|
||||
<!-- 系统公告弹窗 -->
|
||||
<SystemAnnouncementDialog />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -52,7 +52,7 @@ function handleClose(type: CloseType) {
|
||||
announcementStore.closeDialog(type);
|
||||
|
||||
const messages = {
|
||||
today: '今日内不再显示',
|
||||
today: '一周内不再显示',
|
||||
permanent: '公告已关闭',
|
||||
};
|
||||
|
||||
@@ -199,7 +199,7 @@ function getActivityStatus(activity: AnnouncementLogDto): 'active' | 'expired' {
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleClose('today')">
|
||||
今日关闭
|
||||
关闭一周
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleClose('permanent')">
|
||||
关闭公告
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
<!-- 纵向布局作为基础布局 -->
|
||||
<script setup lang="ts">
|
||||
import { getSystemAnnouncements } from '@/api';
|
||||
import SystemAnnouncementDialog from '@/components/SystemAnnouncementDialog/index.vue';
|
||||
import { useSafeArea } from '@/hooks/useSafeArea';
|
||||
import { useWindowWidthObserver } from '@/hooks/useWindowWidthObserver';
|
||||
import Aside from '@/layouts/components/Aside/index.vue';
|
||||
import Header from '@/layouts/components/Header/index.vue';
|
||||
import Main from '@/layouts/components/Main/index.vue';
|
||||
import { useDesignStore } from '@/stores';
|
||||
import { useAnnouncementStore, useDesignStore } from '@/stores';
|
||||
|
||||
const designStore = useDesignStore();
|
||||
const announcementStore = useAnnouncementStore();
|
||||
|
||||
const isCollapse = computed(() => designStore.isCollapse);
|
||||
|
||||
@@ -24,6 +27,32 @@ useSafeArea({
|
||||
|
||||
/** 监听窗口大小变化,折叠侧边栏 */
|
||||
useWindowWidthObserver();
|
||||
|
||||
// 应用加载时检查是否需要显示公告弹窗
|
||||
onMounted(async () => {
|
||||
console.log('announcementStore.shouldShowDialog--', announcementStore.shouldShowDialog);
|
||||
// 检查是否应该显示弹窗(只有"关闭一周"且未超过7天才不显示)
|
||||
if (announcementStore.shouldShowDialog) {
|
||||
try {
|
||||
// 从接口获取公告数据(不使用缓存)
|
||||
const res = await getSystemAnnouncements();
|
||||
if (res && res.data && Array.isArray(res.data) && res.data.length > 0) {
|
||||
announcementStore.setAnnouncementData(res.data);
|
||||
}
|
||||
else {
|
||||
// 接口返回成功但数据为空,设置空数组
|
||||
announcementStore.setAnnouncementData([]);
|
||||
}
|
||||
}
|
||||
catch (error) {
|
||||
console.error('获取系统公告失败:', error);
|
||||
// API失败时设置空数组,仍然显示弹窗(显示错误或空状态)
|
||||
announcementStore.setAnnouncementData([]);
|
||||
}
|
||||
// 无论成功失败都显示弹窗
|
||||
announcementStore.openDialog();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -39,6 +68,8 @@ useWindowWidthObserver();
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
<!-- 系统公告弹窗 -->
|
||||
<SystemAnnouncementDialog />
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@@ -37,11 +37,11 @@ export const useAnnouncementStore = defineStore(
|
||||
const elapsed = now - closedAt.value;
|
||||
|
||||
if (closeType.value === 'permanent')
|
||||
return false;
|
||||
return true;
|
||||
|
||||
if (closeType.value === 'today') {
|
||||
// 检查是否已过去一天(24小时)
|
||||
return elapsed > 24 * 60 * 60 * 1000;
|
||||
// 检查是否已过去一周(7天)
|
||||
return elapsed > 7 * 24 * 60 * 60 * 1000;
|
||||
}
|
||||
|
||||
return true;
|
||||
@@ -72,7 +72,7 @@ export const useAnnouncementStore = defineStore(
|
||||
},
|
||||
{
|
||||
persist: {
|
||||
// 只持久化关闭状态相关的数据
|
||||
// 只持久化关闭状态相关的数据,公告数据不缓存
|
||||
paths: ['closeType', 'closedAt'],
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user