From 2036d5c58d5f2c5d9794bda8e051b7e2cdf05007 Mon Sep 17 00:00:00 2001
From: ray <1490493387@qq.com>
Date: Sun, 7 Jul 2024 17:23:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E5=8F=B0=E9=80=9A=E7=9F=A5=E5=85=AC=E5=91=8A=E5=92=8C=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F=E6=B6=88=E6=81=AF=E9=80=9A=E7=9F=A5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/enums/MessageTypeEnum.ts                  |  15 ++
 src/enums/NoticeTypeEnum.ts                   |  30 ++++
 .../NavBar/components/NavbarAction.vue        | 107 ++++++++++--
 src/views/dashboard/components/VisitTrend.vue |   6 +-
 src/views/dashboard/index.vue                 | 159 ++++++++++++------
 5 files changed, 255 insertions(+), 62 deletions(-)
 create mode 100644 src/enums/MessageTypeEnum.ts
 create mode 100644 src/enums/NoticeTypeEnum.ts

diff --git a/src/enums/MessageTypeEnum.ts b/src/enums/MessageTypeEnum.ts
new file mode 100644
index 00000000..42a6fb94
--- /dev/null
+++ b/src/enums/MessageTypeEnum.ts
@@ -0,0 +1,15 @@
+/* 消息类型枚举 */
+export const enum MessageTypeEnum {
+  /* 消息 */
+  MESSAGE = "MESSAGE",
+  /* 通知 */
+  NOTICE = "NOTICE",
+  /* 待办 */
+  TODO = "TODO",
+}
+
+export const MessageTypeLabels = {
+  [MessageTypeEnum.MESSAGE]: "消息",
+  [MessageTypeEnum.NOTICE]: "通知",
+  [MessageTypeEnum.TODO]: "待办",
+};
diff --git a/src/enums/NoticeTypeEnum.ts b/src/enums/NoticeTypeEnum.ts
new file mode 100644
index 00000000..49c0f8eb
--- /dev/null
+++ b/src/enums/NoticeTypeEnum.ts
@@ -0,0 +1,30 @@
+/* 通知类型枚举 */
+export const enum NoticeTypeEnum {
+  /** 系统升级 */
+  SYSTEM_UPGRADE = "SYSTEM_UPGRADE",
+  /** 系统维护 */
+  SYSTEM_MAINTENANCE = "SYSTEM_MAINTENANCE",
+  /** 安全警告 */
+  SECURITY_ALERT = "SECURITY_ALERT",
+  /** 假期通知 */
+  HOLIDAY_NOTICE = "HOLIDAY_NOTICE",
+  /** 公司新闻 */
+  COMPANY_NEWS = "COMPANY_NEWS",
+  /** 其他通知 */
+  OTHER = "OTHER",
+}
+
+// 定义标签映射
+const NoticeTypeLabels: Record<NoticeTypeEnum, string> = {
+  [NoticeTypeEnum.SYSTEM_UPGRADE]: "系统升级",
+  [NoticeTypeEnum.SYSTEM_MAINTENANCE]: "系统维护",
+  [NoticeTypeEnum.SECURITY_ALERT]: "安全警告",
+  [NoticeTypeEnum.HOLIDAY_NOTICE]: "假期通知",
+  [NoticeTypeEnum.COMPANY_NEWS]: "公司新闻",
+  [NoticeTypeEnum.OTHER]: "其他通知",
+};
+
+// 导出获取标签函数
+export const getNoticeLabel = (type: NoticeTypeEnum): string => {
+  return NoticeTypeLabels[type] || "";
+};
diff --git a/src/layout/components/NavBar/components/NavbarAction.vue b/src/layout/components/NavBar/components/NavbarAction.vue
index 6f199f79..d1d4eb21 100644
--- a/src/layout/components/NavBar/components/NavbarAction.vue
+++ b/src/layout/components/NavBar/components/NavbarAction.vue
@@ -20,10 +20,47 @@
       <!-- 语言选择 -->
       <lang-select class="nav-action-item" />
 
+      <!-- 消息通知 -->
       <el-dropdown class="message nav-action-item" trigger="click">
         <el-badge is-dot>
-          <i-ep-bell />
+          <div class="flex-center h100% p10px">
+            <i-ep-bell />
+          </div>
         </el-badge>
+        <template #dropdown>
+          <div class="px-5 py-2">
+            <el-tabs v-model="activeTab">
+              <el-tab-pane
+                v-for="(label, key) in MessageTypeLabels"
+                :label="label"
+                :name="key"
+                :key="key"
+              >
+                <div
+                  class="w-[380px] py-2"
+                  v-for="message in getFilteredMessages(key)"
+                  :key="message.id"
+                >
+                  <el-link type="primary">
+                    <el-text class="w-350px" size="default" truncated>
+                      {{ message.title }}</el-text
+                    >
+                  </el-link>
+                </div>
+              </el-tab-pane>
+            </el-tabs>
+            <el-divider />
+            <div class="flex-x-between">
+              <el-link type="primary" :underline="false">
+                <span class="text-xs">查看更多</span
+                ><el-icon class="text-xs"><ArrowRight /></el-icon
+              ></el-link>
+              <el-link type="primary" :underline="false">
+                <span class="text-xs">全部已读</span></el-link
+              >
+            </div>
+          </div>
+        </template>
       </el-dropdown>
     </template>
 
@@ -71,6 +108,7 @@ import {
 } from "@/store";
 import defaultSettings from "@/settings";
 import { DeviceEnum } from "@/enums/DeviceEnum";
+import { MessageTypeEnum, MessageTypeLabels } from "@/enums/MessageTypeEnum";
 
 const appStore = useAppStore();
 const tagsViewStore = useTagsViewStore();
@@ -84,9 +122,49 @@ const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
 
 const { isFullscreen, toggle } = useFullscreen();
 
-/**
- * 注销
- */
+const activeTab = ref(MessageTypeEnum.MESSAGE);
+
+const messages = ref([
+  {
+    id: 1,
+    title: "系统升级通知：服务器将于今晚12点进行升级维护，请提前保存工作内容。",
+    type: MessageTypeEnum.MESSAGE,
+  },
+  {
+    id: 2,
+    title: "新功能发布：我们的应用程序现在支持多语言功能。",
+    type: MessageTypeEnum.MESSAGE,
+  },
+  {
+    id: 3,
+    title: "重要提醒：请定期更改您的密码以保证账户安全。",
+    type: MessageTypeEnum.MESSAGE,
+  },
+  {
+    id: 4,
+    title: "通知：您有一条未读的系统消息，请及时查看。",
+    type: MessageTypeEnum.NOTICE,
+  },
+  {
+    id: 5,
+    title: "新订单通知：您有一笔新的订单需要处理。",
+    type: MessageTypeEnum.NOTICE,
+  },
+  {
+    id: 6,
+    title: "审核提醒：您的审核请求已被批准。",
+    type: MessageTypeEnum.NOTICE,
+  },
+  { id: 7, title: "待办事项：完成用户权限设置。", type: MessageTypeEnum.TODO },
+  { id: 8, title: "待办事项：更新产品列表。", type: MessageTypeEnum.TODO },
+  { id: 9, title: "待办事项：备份数据库。", type: MessageTypeEnum.TODO },
+]);
+
+const getFilteredMessages = (type: MessageTypeEnum) => {
+  return messages.value.filter((message) => message.type === type);
+};
+
+/* 注销 */
 function logout() {
   ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
     confirmButtonText: "确定",
@@ -121,18 +199,25 @@ function logout() {
 }
 
 :deep(.message .el-badge__content.is-fixed.is-dot) {
-  top: 10px;
+  top: 5px;
+  right: 10px;
 }
 
-.layout-top,
-.layout-mix {
-  .nav-action-item,
-  .el-icon {
-    color: var(--el-color-white);
-  }
+:deep(.el-divider--horizontal) {
+  margin: 10px 0;
 }
 
 .dark .nav-action-item:hover {
   background: rgb(255 255 255 / 20%);
 }
+
+.see-more {
+  padding: 10px 0;
+  text-align: center;
+}
+
+.see-more a {
+  color: var(--el-color-primary);
+  text-decoration: none;
+}
 </style>
diff --git a/src/views/dashboard/components/VisitTrend.vue b/src/views/dashboard/components/VisitTrend.vue
index 415986df..7e4960cc 100644
--- a/src/views/dashboard/components/VisitTrend.vue
+++ b/src/views/dashboard/components/VisitTrend.vue
@@ -95,7 +95,7 @@ const setChartOptions = (data: VisitTrendVO) => {
         type: "line",
         data: data.pvList,
         areaStyle: {
-          color: "rgba(64, 158, 255, 0.3)",
+          color: "rgba(64, 158, 255, 0.1)",
         },
         smooth: true,
         itemStyle: {
@@ -110,7 +110,7 @@ const setChartOptions = (data: VisitTrendVO) => {
         type: "line",
         data: data.ipList,
         areaStyle: {
-          color: "rgba(103, 194, 58, 0.3)",
+          color: "rgba(103, 194, 58, 0.1)",
         },
         smooth: true,
         itemStyle: {
@@ -187,7 +187,7 @@ const handleDownloadChart = () => {
     if (ctx) {
       ctx.drawImage(img, 0, 0, img.width, img.height);
       const link = document.createElement("a");
-      link.download = `业绩柱状图.png`;
+      link.download = `访问趋势.png`;
       link.href = canvas.toDataURL("image/png", 0.9);
       document.body.appendChild(link);
       link.click();
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index e71679ca..303ad176 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -72,17 +72,20 @@
         v-for="(item, index) in visitStatsList"
         :key="index"
       >
-        <el-skeleton :loading="loading" :rows="5" animated>
+        <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
           <template #template>
             <el-card>
-              <div>
-                <el-skeleton-item variant="h3" style="width: 40%" />
-                <el-skeleton-item
-                  variant="rect"
-                  style="float: right; width: 1em; height: 1em"
-                />
-              </div>
-              <div class="mt-10 flex-x-between">
+              <template #header>
+                <div>
+                  <el-skeleton-item variant="h3" style="width: 40%" />
+                  <el-skeleton-item
+                    variant="rect"
+                    style="float: right; width: 1em; height: 1em"
+                  />
+                </div>
+              </template>
+
+              <div class="flex-x-between">
                 <el-skeleton-item variant="text" style="width: 30%" />
                 <el-skeleton-item
                   variant="circle"
@@ -95,7 +98,7 @@
               </div>
             </el-card>
           </template>
-          <template v-if="!loading">
+          <template v-if="!visitStatsLoading">
             <el-card shadow="never">
               <template #header>
                 <div class="flex-x-between">
@@ -146,14 +149,30 @@
       <el-col :xs="24" :span="8">
         <el-card>
           <template #header>
-            <span> 通知公告</span>
+            <div class="flex-x-between">
+              <span> 通知公告</span>
+              <el-link type="primary">
+                <span class="text-xs">查看更多</span
+                ><el-icon class="text-xs"><ArrowRight /></el-icon
+              ></el-link>
+            </div>
           </template>
 
           <el-scrollbar height="400px">
-            <div v-for="(item, index) in notices" :key="index" class="mb-2">
-              <el-alert :title="item.title" :closable="false" class="mb-2">
-                <template #default>{{ item.description }} </template>
-              </el-alert>
+            <div
+              v-for="(item, index) in notices"
+              :key="index"
+              class="py-3 flex-y-center"
+            >
+              <el-tag :type="getNoticeLevelTag(item.level)" size="small">
+                {{ getNoticeLabel(item.type) }}
+              </el-tag>
+              <el-text truncated class="!mx-2 flex-1">
+                {{ item.title }}
+              </el-text>
+              <el-link>
+                <i-ep-View />
+              </el-link>
             </div>
           </el-scrollbar>
         </el-card>
@@ -169,7 +188,7 @@ defineOptions({
 });
 
 import { useUserStore } from "@/store/modules/user";
-import { useTransition, TransitionPresets } from "@vueuse/core";
+import { NoticeTypeEnum, getNoticeLabel } from "@/enums/NoticeTypeEnum";
 
 import StatsAPI, { VisitStatsVO } from "@/api/log";
 const userStore = useUserStore();
@@ -213,37 +232,8 @@ const statisticData = ref([
   },
 ]);
 
-const notices = ref([
-  {
-    title: "v2.12.0",
-    description: "新增系统日志，访问趋势统计等功能。",
-  },
-  {
-    title: "v2.11.5",
-    description: "修复了一些问题，优化了一些代码。",
-  },
-  {
-    title: "v2.11.4",
-    description: "修复了一些问题，优化了一些代码。",
-  },
-  {
-    title: "v2.11.3",
-    description: "修复了一些问题，优化了一些代码。",
-  },
-  {
-    title: "v2.11.2",
-    description: "修复了一些问题，优化了一些代码。",
-  },
-  {
-    title: "v2.11.1",
-    description: "修复了一些问题，优化了一些代码。",
-  },
-]);
-
-const loading = ref(true);
-
+const visitStatsLoading = ref(true);
 const visitStatsList = ref<VisitStats[] | null>(Array(3).fill({}));
-
 interface VisitStats {
   title: string;
   icon: string;
@@ -255,7 +245,7 @@ interface VisitStats {
   todayCount: number;
   totalCount: number;
 }
-
+/** 加载访问统计数据 */
 const loadVisitStatsData = async () => {
   const list: VisitStatsVO[] = await StatsAPI.getVisitStats();
 
@@ -275,7 +265,7 @@ const loadVisitStatsData = async () => {
       totalCount: item.totalCount,
     }));
     visitStatsList.value = transformedList;
-    loading.value = false;
+    visitStatsLoading.value = false;
   }
 };
 
@@ -316,6 +306,79 @@ const getVisitStatsIcon = (type: string) => {
   }
 };
 
+const notices = ref([
+  {
+    level: 2,
+    type: NoticeTypeEnum.SYSTEM_UPGRADE,
+    title: "v2.12.0 新增系统日志，访问趋势统计功能。",
+  },
+  {
+    level: 0,
+    type: NoticeTypeEnum.COMPANY_NEWS,
+    title: "公司将在 7 月 1 日举办年中总结大会，请各部门做好准备。",
+  },
+  {
+    level: 3,
+    type: NoticeTypeEnum.HOLIDAY_NOTICE,
+    title: "端午节假期从 6 月 12 日至 6 月 14 日放假，共 3 天。",
+  },
+
+  {
+    level: 2,
+    type: NoticeTypeEnum.SECURITY_ALERT,
+    title: "最近发现一些钓鱼邮件，请大家提高警惕，不要点击陌生链接。",
+  },
+  {
+    level: 2,
+    type: NoticeTypeEnum.SYSTEM_MAINTENANCE,
+    title: "系统将于本周六凌晨 2 点进行维护，预计维护时间为 2 小时。",
+  },
+  {
+    level: 0,
+    type: NoticeTypeEnum.OTHER,
+    title: "公司新规章制度发布，请大家及时查阅。",
+  },
+  {
+    level: 3,
+    type: NoticeTypeEnum.HOLIDAY_NOTICE,
+    title: "中秋节假期从 9 月 22 日至 9 月 24 日放假，共 3 天。",
+  },
+  {
+    level: 1,
+    type: NoticeTypeEnum.COMPANY_NEWS,
+    title: "公司将在 10 月 15 日举办新产品发布会，敬请期待。",
+  },
+  {
+    level: 2,
+    type: NoticeTypeEnum.SECURITY_ALERT,
+    title:
+      "请注意，近期有恶意软件通过即时通讯工具传播，请勿下载不明来源的文件。",
+  },
+  {
+    level: 2,
+    type: NoticeTypeEnum.SYSTEM_MAINTENANCE,
+    title: "系统将于下周日凌晨 3 点进行升级，预计维护时间为 1 小时。",
+  },
+  {
+    level: 3,
+    type: NoticeTypeEnum.OTHER,
+    title: "公司年度体检通知已发布，请各位员工按时参加。",
+  },
+]);
+
+const getNoticeLevelTag = (type: number) => {
+  switch (type) {
+    case 0:
+      return "danger";
+    case 1:
+      return "warning";
+    case 2:
+      return "primary";
+    default:
+      return "success";
+  }
+};
+
 onMounted(() => {
   loadVisitStatsData();
 });