refactor: ♻️ 控制台通知公告和导航栏消息通知样式优化

2024-07-07 17:23:44 +08:00
parent 4ef2cb1cb9
commit 2036d5c58d
5 changed files with 255 additions and 62 deletions
--- a/src/enums/MessageTypeEnum.ts
+++ 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]: "待办",
+};
--- a/src/enums/NoticeTypeEnum.ts
+++ 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] || "";
+};
--- 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>
--- 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();
--- 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();
 });