6969 v-for =" (item, index) in visitStatsList"
7070 :key =" index"
7171 >
72- <el-skeleton :loading =" loading " :rows =" 5" animated >
72+ <el-skeleton :loading =" visitStatsLoading " :rows =" 5" animated >
7373 <template #template >
7474 <el-card >
75- <div >
76- <el-skeleton-item variant =" h3" style =" width 40% "
77- <el-skeleton-item
78- variant =" rect"
79- style =" float right ; width 1em ; height 1em "
80- />
81- </div >
82- <div class =" mt-10 flex-x-between"
75+ <template #header >
76+ <div >
77+ <el-skeleton-item variant =" h3" style =" width 40% "
78+ <el-skeleton-item
79+ variant =" rect"
80+ style =" float right ; width 1em ; height 1em "
81+ />
82+ </div >
83+ </template >
84+
85+ <div class =" flex-x-between"
8386 <el-skeleton-item variant =" text" style =" width 30% "
8487 <el-skeleton-item
8588 variant =" circle"
9295 </div >
9396 </el-card >
9497 </template >
95- <template v-if =" ! loading " >
98+ <template v-if =" ! visitStatsLoading " >
9699 <el-card shadow =" never"
97100 <template #header >
98101 <div class =" flex-x-between"
135138 </el-col >
136139 </el-row >
137140
138- <!-- Echarts 图表 -->
139141 <el-row :gutter =" 10" class =" mt-5"
140142 <el-col :xs =" 24" :span =" 16"
143+ <!-- 访问趋势统计图 -->
141144 <VisitTrend id =" VisitTrend" width =" 100%" height =" 400px"
142145 </el-col >
143146 <el-col :xs =" 24" :span =" 8"
144147 <el-card >
145148 <template #header >
146- <span > 通知公告</span >
149+ <div class =" flex-x-between"
150+ <div class =" flex-y-center"
151+ 通知公告<el-icon class =" ml-1" Notification /></el-icon >
152+ </div >
153+ <el-link type =" primary"
154+ <span class =" text-xs" span
155+ ><el-icon class =" text-xs" ArrowRight /></el-icon
156+ ></el-link >
157+ </div >
147158 </template >
148159
149160 <el-scrollbar height =" 400px"
150- <div v-for =" (item, index) in notices" :key =" index" class =" mb-2"
151- <el-alert :title =" item.title" :closable =" false" class =" mb-2"
152- <template #default >{{ item.description }} </template >
153- </el-alert >
161+ <div
162+ v-for =" (item, index) in notices"
163+ :key =" index"
164+ class =" flex-y-center py-3"
165+ >
166+ <el-tag :type =" getNoticeLevelTag(item.level)" size =" small"
167+ {{ getNoticeLabel(item.type) }}
168+ </el-tag >
169+ <el-text
170+ truncated
171+ class =" !mx-2 flex-1 !text-xs !text-[var(--el-text-color-secondary)]"
172+ >
173+ {{ item.title }}
174+ </el-text >
175+ <el-link >
176+ <el-icon class =" text-sm" View /></el-icon >
177+ </el-link >
154178 </div >
155179 </el-scrollbar >
156180 </el-card >
@@ -166,7 +190,7 @@ defineOptions({
166190});
167191
168192import { useUserStore } from " @/store/modules/user"
169- import { useTransition , TransitionPresets } from " @vueuse/core "
193+ import { NoticeTypeEnum , getNoticeLabel } from " @/enums/NoticeTypeEnum "
170194
171195import StatsAPI , { VisitStatsVO } from " @/api/log"
172196const = useUserStore ();
@@ -210,37 +234,8 @@ const statisticData = ref([
210234 },
211235]);
212236
213- const = ref ([
214- {
215- title: " v2.12.0"
216- description: " 新增系统日志，访问趋势统计等功能。"
217- },
218- {
219- title: " v2.11.5"
220- description: " 修复了一些问题，优化了一些代码。"
221- },
222- {
223- title: " v2.11.4"
224- description: " 修复了一些问题，优化了一些代码。"
225- },
226- {
227- title: " v2.11.3"
228- description: " 修复了一些问题，优化了一些代码。"
229- },
230- {
231- title: " v2.11.2"
232- description: " 修复了一些问题，优化了一些代码。"
233- },
234- {
235- title: " v2.11.1"
236- description: " 修复了一些问题，优化了一些代码。"
237- },
238- ]);
239-
240- const = ref (true );
241-
237+ const = ref (true );
242238const = ref <VisitStats [] | null >(Array (3 ).fill ({}));
243-
244239interface VisitStats {
245240 title: string ;
246241 icon: string ;
@@ -252,7 +247,7 @@ interface VisitStats {
252247 todayCount: number ;
253248 totalCount: number ;
254249}
255-
250+ /** 加载访问统计数据 */
256251const = async () => {
257252 const : VisitStatsVO [] = await StatsAPI .getVisitStats ();
258253
@@ -272,7 +267,7 @@ const loadVisitStatsData = async () => {
272267 totalCount: item .totalCount ,
273268 }));
274269 visitStatsList .value = transformedList ;
275- loading .value = false ;
270+ visitStatsLoading .value = false ;
276271 }
277272};
278273
@@ -313,6 +308,79 @@ const getVisitStatsIcon = (type: string) => {
313308 }
314309};
315310
311+ const = ref ([
312+ {
313+ level: 2 ,
314+ type: NoticeTypeEnum .SYSTEM_UPGRADE ,
315+ title: " v2.12.0 新增系统日志，访问趋势统计功能。"
316+ },
317+ {
318+ level: 0 ,
319+ type: NoticeTypeEnum .COMPANY_NEWS ,
320+ title: " 公司将在 7 月 1 日举办年中总结大会，请各部门做好准备。"
321+ },
322+ {
323+ level: 3 ,
324+ type: NoticeTypeEnum .HOLIDAY_NOTICE ,
325+ title: " 端午节假期从 6 月 12 日至 6 月 14 日放假，共 3 天。"
326+ },
327+
328+ {
329+ level: 2 ,
330+ type: NoticeTypeEnum .SECURITY_ALERT ,
331+ title: " 最近发现一些钓鱼邮件，请大家提高警惕，不要点击陌生链接。"
332+ },
333+ {
334+ level: 2 ,
335+ type: NoticeTypeEnum .SYSTEM_MAINTENANCE ,
336+ title: " 系统将于本周六凌晨 2 点进行维护，预计维护时间为 2 小时。"
337+ },
338+ {
339+ level: 0 ,
340+ type: NoticeTypeEnum .OTHER ,
341+ title: " 公司新规章制度发布，请大家及时查阅。"
342+ },
343+ {
344+ level: 3 ,
345+ type: NoticeTypeEnum .HOLIDAY_NOTICE ,
346+ title: " 中秋节假期从 9 月 22 日至 9 月 24 日放假，共 3 天。"
347+ },
348+ {
349+ level: 1 ,
350+ type: NoticeTypeEnum .COMPANY_NEWS ,
351+ title: " 公司将在 10 月 15 日举办新产品发布会，敬请期待。"
352+ },
353+ {
354+ level: 2 ,
355+ type: NoticeTypeEnum .SECURITY_ALERT ,
356+ title:
357+ " 请注意，近期有恶意软件通过即时通讯工具传播，请勿下载不明来源的文件。"
358+ },
359+ {
360+ level: 2 ,
361+ type: NoticeTypeEnum .SYSTEM_MAINTENANCE ,
362+ title: " 系统将于下周日凌晨 3 点进行升级，预计维护时间为 1 小时。"
363+ },
364+ {
365+ level: 3 ,
366+ type: NoticeTypeEnum .OTHER ,
367+ title: " 公司年度体检通知已发布，请各位员工按时参加。"
368+ },
369+ ]);
370+
371+ const = (type : number ) => {
372+ switch (type ) {
373+ case 0 :
374+ return " danger"
375+ case 1 :
376+ return " warning"
377+ case 2 :
378+ return " primary"
379+ default :
380+ return " success"
381+ }
382+ };
383+
316384onMounted (() => {
317385 loadVisitStatsData ();
318386});
0 commit comments