refactor: ♻️ 控制台通知公告替换为最新动态
This commit is contained in:
@@ -218,35 +218,63 @@
|
|||||||
<ECharts :options="visitTrendChartOptions" height="400px" />
|
<ECharts :options="visitTrendChartOptions" height="400px" />
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
<!-- 通知公告 -->
|
<!-- 最新动态 -->
|
||||||
<el-col :xs="24" :span="8">
|
<el-col :xs="24" :span="8">
|
||||||
<el-card>
|
<el-card>
|
||||||
<template #header>
|
<template #header>
|
||||||
<div class="flex-x-between">
|
<div class="flex-x-between">
|
||||||
<div class="flex-y-center">通知公告</div>
|
<span class="header-title">最新动态</span>
|
||||||
<el-link type="primary">
|
<el-link
|
||||||
<span class="text-xs" @click="navigateToNoticePage">查看更多</span>
|
type="primary"
|
||||||
<el-icon class="text-xs"><ArrowRight /></el-icon>
|
:underline="false"
|
||||||
|
href="https://gitee.com/youlaiorg/vue3-element-admin/releases"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
完整记录
|
||||||
|
<el-icon class="link-icon"><TopRight /></el-icon>
|
||||||
</el-link>
|
</el-link>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<el-scrollbar height="400px">
|
<el-scrollbar height="400px">
|
||||||
<div v-for="(item, index) in notices" :key="index" class="flex-y-center py-4">
|
<el-timeline class="p-3">
|
||||||
<DictLabel v-model="item.type" code="notice_type" size="small" />
|
<el-timeline-item
|
||||||
<el-text truncated class="!mx-2 flex-1 !text-xs !text-gray">
|
v-for="(item, index) in vesionList"
|
||||||
{{ item.title }}
|
:key="index"
|
||||||
</el-text>
|
:timestamp="item.date"
|
||||||
<el-link @click="openNoticeDetail(item.id)">
|
placement="top"
|
||||||
<el-icon class="text-sm"><View /></el-icon>
|
: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>
|
</el-link>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-timeline-item>
|
||||||
|
</el-timeline>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<NoticeDetail ref="noticeDetailRef" />
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -257,18 +285,48 @@ defineOptions({
|
|||||||
});
|
});
|
||||||
|
|
||||||
import { dayjs } from "element-plus";
|
import { dayjs } from "element-plus";
|
||||||
import router from "@/router";
|
|
||||||
import LogAPI, { VisitStatsVO, VisitTrendVO } from "@/api/system/log";
|
import LogAPI, { VisitStatsVO, VisitTrendVO } from "@/api/system/log";
|
||||||
import NoticeAPI, { NoticePageVO } from "@/api/system/notice";
|
|
||||||
import { useUserStore } from "@/store/modules/user";
|
import { useUserStore } from "@/store/modules/user";
|
||||||
import { formatGrowthRate } from "@/utils";
|
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 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();
|
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(
|
watch(
|
||||||
() => visitTrendDateRange.value,
|
() => visitTrendDateRange.value,
|
||||||
@@ -463,7 +496,6 @@ watch(
|
|||||||
// 组件挂载后加载访客统计数据和通知公告数据
|
// 组件挂载后加载访客统计数据和通知公告数据
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
fetchVisitStatsData();
|
fetchVisitStatsData();
|
||||||
fetchMyNotices();
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -479,5 +511,27 @@ onMounted(() => {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
border: 0;
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user