fix: 公告优化
This commit is contained in:
@@ -1,67 +1,8 @@
|
|||||||
<script setup lang="ts">
|
<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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<router-view />
|
<router-view />
|
||||||
<!-- 系统公告弹窗 -->
|
|
||||||
<SystemAnnouncementDialog />
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss"></style>
|
||||||
|
|||||||
@@ -52,7 +52,7 @@ function handleClose(type: CloseType) {
|
|||||||
announcementStore.closeDialog(type);
|
announcementStore.closeDialog(type);
|
||||||
|
|
||||||
const messages = {
|
const messages = {
|
||||||
today: '今日内不再显示',
|
today: '一周内不再显示',
|
||||||
permanent: '公告已关闭',
|
permanent: '公告已关闭',
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -199,7 +199,7 @@ function getActivityStatus(activity: AnnouncementLogDto): 'active' | 'expired' {
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button @click="handleClose('today')">
|
<el-button @click="handleClose('today')">
|
||||||
今日关闭
|
关闭一周
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="primary" @click="handleClose('permanent')">
|
<el-button type="primary" @click="handleClose('permanent')">
|
||||||
关闭公告
|
关闭公告
|
||||||
|
|||||||
@@ -1,13 +1,16 @@
|
|||||||
<!-- 纵向布局作为基础布局 -->
|
<!-- 纵向布局作为基础布局 -->
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import { getSystemAnnouncements } from '@/api';
|
||||||
|
import SystemAnnouncementDialog from '@/components/SystemAnnouncementDialog/index.vue';
|
||||||
import { useSafeArea } from '@/hooks/useSafeArea';
|
import { useSafeArea } from '@/hooks/useSafeArea';
|
||||||
import { useWindowWidthObserver } from '@/hooks/useWindowWidthObserver';
|
import { useWindowWidthObserver } from '@/hooks/useWindowWidthObserver';
|
||||||
import Aside from '@/layouts/components/Aside/index.vue';
|
import Aside from '@/layouts/components/Aside/index.vue';
|
||||||
import Header from '@/layouts/components/Header/index.vue';
|
import Header from '@/layouts/components/Header/index.vue';
|
||||||
import Main from '@/layouts/components/Main/index.vue';
|
import Main from '@/layouts/components/Main/index.vue';
|
||||||
import { useDesignStore } from '@/stores';
|
import { useAnnouncementStore, useDesignStore } from '@/stores';
|
||||||
|
|
||||||
const designStore = useDesignStore();
|
const designStore = useDesignStore();
|
||||||
|
const announcementStore = useAnnouncementStore();
|
||||||
|
|
||||||
const isCollapse = computed(() => designStore.isCollapse);
|
const isCollapse = computed(() => designStore.isCollapse);
|
||||||
|
|
||||||
@@ -24,6 +27,32 @@ useSafeArea({
|
|||||||
|
|
||||||
/** 监听窗口大小变化,折叠侧边栏 */
|
/** 监听窗口大小变化,折叠侧边栏 */
|
||||||
useWindowWidthObserver();
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -39,6 +68,8 @@ useWindowWidthObserver();
|
|||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
</el-container>
|
</el-container>
|
||||||
|
<!-- 系统公告弹窗 -->
|
||||||
|
<SystemAnnouncementDialog />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -37,11 +37,11 @@ export const useAnnouncementStore = defineStore(
|
|||||||
const elapsed = now - closedAt.value;
|
const elapsed = now - closedAt.value;
|
||||||
|
|
||||||
if (closeType.value === 'permanent')
|
if (closeType.value === 'permanent')
|
||||||
return false;
|
return true;
|
||||||
|
|
||||||
if (closeType.value === 'today') {
|
if (closeType.value === 'today') {
|
||||||
// 检查是否已过去一天(24小时)
|
// 检查是否已过去一周(7天)
|
||||||
return elapsed > 24 * 60 * 60 * 1000;
|
return elapsed > 7 * 24 * 60 * 60 * 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
return true;
|
||||||
@@ -72,7 +72,7 @@ export const useAnnouncementStore = defineStore(
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
persist: {
|
persist: {
|
||||||
// 只持久化关闭状态相关的数据
|
// 只持久化关闭状态相关的数据,公告数据不缓存
|
||||||
paths: ['closeType', 'closedAt'],
|
paths: ['closeType', 'closedAt'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user