refactor: ♻️ 控制台通知公告替换为最新动态

This commit is contained in:
Ray.Hao
2025-02-22 23:39:42 +08:00
parent f9e4d1b936
commit 7094eedf6d

View File

@@ -218,35 +218,63 @@
<ECharts :options="visitTrendChartOptions" height="400px" />
</el-card>
</el-col>
<!-- 通知公告 -->
<!-- 最新动态 -->
<el-col :xs="24" :span="8">
<el-card>
<template #header>
<div class="flex-x-between">
<div class="flex-y-center">通知公告</div>
<el-link type="primary">
<span class="text-xs" @click="navigateToNoticePage">查看更多</span>
<el-icon class="text-xs"><ArrowRight /></el-icon>
<span class="header-title">最新动态</span>
<el-link
type="primary"
:underline="false"
href="https://gitee.com/youlaiorg/vue3-element-admin/releases"
target="_blank"
>
完整记录
<el-icon class="link-icon"><TopRight /></el-icon>
</el-link>
</div>
</template>
<el-scrollbar height="400px">
<div v-for="(item, index) in notices" :key="index" class="flex-y-center py-4">
<DictLabel v-model="item.type" code="notice_type" size="small" />
<el-text truncated class="!mx-2 flex-1 !text-xs !text-gray">
{{ item.title }}
</el-text>
<el-link @click="openNoticeDetail(item.id)">
<el-icon class="text-sm"><View /></el-icon>
</el-link>
</div>
<el-timeline class="p-3">
<el-timeline-item
v-for="(item, index) in vesionList"
:key="index"
:timestamp="item.date"
placement="top"
:color="index === 0 ? '#67C23A' : '#909399'"
:hollow="index !== 0"
size="large"
>
<div class="version-item" :class="{ 'latest-item': index === 0 }">
<div>
<el-text tag="strong">{{ item.title }}</el-text>
<el-tag v-if="item.tag" :type="index === 0 ? 'success' : 'info'" size="small">
{{ item.tag }}
</el-tag>
</div>
<el-text class="version-content">{{ item.content }}</el-text>
<div v-if="item.link">
<el-link
:type="index === 0 ? 'primary' : 'info'"
:href="item.link"
target="_blank"
:underline="false"
>
详情
<el-icon class="link-icon"><TopRight /></el-icon>
</el-link>
</div>
</div>
</el-timeline-item>
</el-timeline>
</el-scrollbar>
</el-card>
</el-col>
</el-row>
<NoticeDetail ref="noticeDetailRef" />
</div>
</template>
@@ -257,18 +285,48 @@ defineOptions({
});
import { dayjs } from "element-plus";
import router from "@/router";
import LogAPI, { VisitStatsVO, VisitTrendVO } from "@/api/system/log";
import NoticeAPI, { NoticePageVO } from "@/api/system/notice";
import { useUserStore } from "@/store/modules/user";
import { formatGrowthRate } from "@/utils";
interface VersionItem {
id: string;
title: string; // 版本标题v2.4.0
date: string; // 发布时间
content: string; // 版本描述
link: string; // 详情链接
tag?: string; // 版本标签(可选)
}
const userStore = useUserStore();
const noticeDetailRef = ref();
// 当前通知公告列表
const notices = ref<NoticePageVO[]>([]);
const vesionList = ref<VersionItem[]>([
{
id: "1",
title: "v2.4.0",
date: "2021-09-01 00:00:00",
content: "实现基础框架搭建,包含权限管理、路由系统等核心功能。",
link: "https://gitee.com/youlaiorg/vue3-element-admin/releases",
tag: "里程碑",
},
{
id: "1",
title: "v2.4.0",
date: "2021-09-01 00:00:00",
content: "实现基础框架搭建,包含权限管理、路由系统等核心功能。",
link: "https://gitee.com/youlaiorg/vue3-element-admin/releases",
tag: "里程碑",
},
{
id: "1",
title: "v2.4.0",
date: "2021-09-01 00:00:00",
content: "实现基础框架搭建,包含权限管理、路由系统等核心功能。",
link: "https://gitee.com/youlaiorg/vue3-element-admin/releases",
tag: "里程碑",
},
]);
// 当前时间(用于计算问候语)
const currentDate = new Date();
@@ -425,31 +483,6 @@ const computeGrowthRateClass = (growthRate?: number): string => {
}
};
/**
* 获取当前用户的通知公告数据
*/
const fetchMyNotices = () => {
NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 10 }).then((data) => {
notices.value = data.list;
});
};
/**
* 跳转至通知公告详情页面(查看更多通知)
*/
function navigateToNoticePage() {
router.push({ path: "/myNotice" });
}
/**
* 打开指定通知详情
*
* @param id - 通知 ID
*/
function openNoticeDetail(id: string) {
noticeDetailRef.value.openNotice(id);
}
// 监听访问趋势日期范围的变化,重新获取趋势数据
watch(
() => visitTrendDateRange.value,
@@ -463,7 +496,6 @@ watch(
// 组件挂载后加载访客统计数据和通知公告数据
onMounted(() => {
fetchVisitStatsData();
fetchMyNotices();
});
</script>
@@ -479,5 +511,27 @@ onMounted(() => {
z-index: 1;
border: 0;
}
.version-item {
padding: 16px;
margin-bottom: 12px;
background: var(--el-fill-color-lighter);
border-radius: 8px;
transition: all 0.2s;
&.latest-item {
background: var(--el-color-primary-light-9);
border: 1px solid var(--el-color-primary-light-5);
}
&:hover {
transform: translateX(5px);
}
.version-content {
margin-bottom: 12px;
font-size: 13px;
line-height: 1.5;
color: var(--el-text-color-secondary);
}
}
}
</style>