refactor: ♻️ 通知公告、字典重构问题修复和优化

src/components/Dictionary/DictLabel.vue

@@ -1,6 +1,6 @@
 <template>
-  <template v-if="tag">
-    <el-tag :type="tag">{{ label }}</el-tag>
+  <template v-if="tagType">
+    <el-tag :type="tagType" :size="tagSize">{{ label }}</el-tag>
   </template>
   <template v-else>
     <span>{{ label }}</span>
@@ -10,26 +10,55 @@
 <script setup lang="ts">
 import DictDataAPI from "@/api/dict-data";
 import Cache from "@/utils/cache";
+import requestCache from "@/utils/requestCache"; // 导入共享的缓存
 
 const props = defineProps({
-  dictCode: String,
-  value: [String, Number],
+  code: String,
+  modelValue: [String, Number],
+  size: {
+    type: String,
+    default: "default",
+  },
 });
 
 const label = ref("");
-const tag = ref<
+const tagType = ref<
   "success" | "warning" | "info" | "primary" | "danger" | undefined
 >();
 
+const tagSize = ref(props.size as "default" | "large" | "small");
+
 const dictCache = new Cache("dict_");
 
 const getLabelAndTagByValue = async (dictCode: string, value: any) => {
+  // 先从本地缓存中获取字典数据
   let dictData = dictCache.getCache(dictCode);
+
+  // 如果本地缓存没有数据，则检查是否已经发起请求
   if (!dictData) {
-    dictData = await DictDataAPI.getOptions(dictCode);
-    dictCache.setCache(dictCode, dictData, 3 * 60 * 1000); // 缓存 3 分钟
+    if (!requestCache.has(dictCode)) {
+      // 发起请求并存入请求缓存，确保后续请求能复用此 Promise
+      const requestPromise = DictDataAPI.getOptions(dictCode)
+        .then((data) => {
+          dictCache.setCache(dictCode, data, 3 * 60 * 1000); // 缓存 3 分钟
+          requestCache.delete(dictCode); // 请求完成后删除请求缓存
+          return data;
+        })
+        .catch((error) => {
+          requestCache.delete(dictCode); // 出错时也要删除缓存
+          throw error;
+        });
+
+      // 将当前请求存入请求缓存
+      requestCache.set(dictCode, requestPromise);
+    }
+
+    // 等待请求完成并获取数据
+    dictData = await requestCache.get(dictCode);
+    console.log(`Received data for ${dictCode}:`, dictData);
   }
 
+  // 查找对应的字典项
   const dictEntry = dictData.find((item: any) => item.value == value);
   return {
     label: dictEntry ? dictEntry.label : "",
@@ -40,13 +69,16 @@ const getLabelAndTagByValue = async (dictCode: string, value: any) => {
 // 监听 props 的变化，获取并更新 label 和 tag
 const fetchLabelAndTag = async () => {
   const result = await getLabelAndTagByValue(
-    props.dictCode as string,
-    props.value
+    props.code as string,
+    props.modelValue
   );
   label.value = result.label;
-  tag.value = result.tag;
+  tagType.value = result.tag;
 };
 
+// 首次挂载时获取字典数据
 onMounted(fetchLabelAndTag);
-watch(() => props.value, fetchLabelAndTag);
+
+// 当 modelValue 发生变化时重新获取
+watch(() => props.modelValue, fetchLabelAndTag);
 </script>

src/components/Dictionary/index.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   },
   modelValue: {
     type: [String, Number],
-    required: true,
+    required: false,
   },
   placeholder: {
     type: String,

src/components/Notice/index.vue

@@ -1,58 +1,176 @@
 <template>
   <div>
-    <el-dropdown class="flex-center h-full align-middle">
-      <el-badge v-if="messages.length > 0" :value="messages.length" :max="99">
-        <div><i-ep-bell /></div>
-      </el-badge>
-      <el-badge v-else>
-        <i-ep-bell />
-      </el-badge>
+    <el-dropdown class="flex-center wh-full align-middle">
+      <div class="wh-full">
+        <el-badge
+          :offset="[-10, 15]"
+          v-if="notices.length > 0"
+          :value="notices.length"
+          :max="99"
+          class="wh-full"
+        >
+          <i-ep-bell class="notification-icon h-full" />
+        </el-badge>
+        <el-badge :offset="[-10, 15]" v-else>
+          <i-ep-bell class="notification-icon h-full" />
+        </el-badge>
+      </div>
 
       <template #dropdown>
-        <div class="p-5">
-          <template v-if="messages.length > 0">
-            <div
-              class="w400px flex-x-between py-2"
-              v-for="(item, index) in messages"
-              :key="index"
-            >
-              <div>
-                <el-tag type="success" size="small">系统通知</el-tag>
-                <el-link
-                  type="primary"
-                  @click="readNotice(item.id)"
-                  class="ml-1"
+        <div class="p-2">
+          <el-tabs v-model="activeTab">
+            <el-tab-pane label="通知" name="notice">
+              <template v-if="notices.length > 0">
+                <div
+                  class="w400px flex-x-between p-1"
+                  v-for="(item, index) in notices"
+                  :key="index"
                 >
-                  {{ item.title }}
+                  <div class="flex-center">
+                    <DictLabel
+                      code="notice_type"
+                      v-model="item.type"
+                      size="small"
+                      class="mr-1"
+                    />
+                    <el-text
+                      type="primary"
+                      @click="readNotice(item.id)"
+                      size="small"
+                      class="w200px cursor-pointer"
+                      truncated
+                    >
+                      {{ item.title }}
+                    </el-text>
+                  </div>
+                  <div>
+                    {{ item.publishTime }}
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <div class="flex-center h150px w350px">
+                  <el-empty :image-size="50" description="暂无通知" />
+                </div>
+              </template>
+              <el-divider />
+              <div class="flex-x-between">
+                <el-link type="primary" :underline="false" @click="viewMore">
+                  <span class="text-xs">查看更多</span>
+                  <el-icon class="text-xs">
+                    <ArrowRight />
+                  </el-icon>
+                </el-link>
+                <el-link
+                  v-if="notices.length > 0"
+                  type="primary"
+                  :underline="false"
+                  @click="markAllAsRead"
+                >
+                  <span class="text-xs">全部已读</span>
                 </el-link>
               </div>
-              <div>
-                {{ item.publishTime }}
+            </el-tab-pane>
+            <el-tab-pane label="消息" name="message">
+              <template v-if="messages.length > 0">
+                <div
+                  class="w400px flex-x-between p-1"
+                  v-for="(item, index) in messages"
+                  :key="index"
+                >
+                  <div>
+                    <DictLabel
+                      code="notice_type"
+                      v-model="item.type"
+                      size="small"
+                    />
+                    <el-link
+                      type="primary"
+                      @click="readNotice(item.id)"
+                      class="ml-1"
+                    >
+                      {{ item.title }}
+                    </el-link>
+                  </div>
+                  <div>
+                    {{ item.publishTime }}
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <div class="flex-center h150px w350px">
+                  <el-empty :image-size="50" description="暂无消息" />
+                </div>
+              </template>
+              <el-divider />
+              <div class="flex-x-between">
+                <el-link type="primary" :underline="false" @click="viewMore">
+                  <span class="text-xs">查看更多</span>
+                  <el-icon class="text-xs">
+                    <ArrowRight />
+                  </el-icon>
+                </el-link>
+                <el-link
+                  v-if="messages.length > 0"
+                  type="primary"
+                  :underline="false"
+                  @click="markAllAsRead"
+                >
+                  <span class="text-xs">全部已读</span>
+                </el-link>
               </div>
-            </div>
-          </template>
-          <template v-else>
-            <div class="flex-center h150px w350px">
-              <el-empty :image-size="30" description="暂无消息" />
-            </div>
-          </template>
-          <el-divider />
-          <div class="flex-x-between">
-            <el-link type="primary" :underline="false" @click="viewMore">
-              <span class="text-xs">查看更多</span>
-              <el-icon class="text-xs">
-                <ArrowRight />
-              </el-icon>
-            </el-link>
-            <el-link
-              v-if="messages.length > 0"
-              type="primary"
-              :underline="false"
-              @click="markAllAsRead"
-            >
-              <span class="text-xs">全部已读</span>
-            </el-link>
-          </div>
+            </el-tab-pane>
+
+            <el-tab-pane label="待办" name="task">
+              <template v-if="tasks.length > 0">
+                <div
+                  class="w400px flex-x-between p-1"
+                  v-for="(item, index) in tasks"
+                  :key="index"
+                >
+                  <div>
+                    <DictLabel
+                      code="notice_type"
+                      v-model="item.type"
+                      size="small"
+                    />
+                    <el-link
+                      type="primary"
+                      @click="readNotice(item.id)"
+                      class="ml-1"
+                    >
+                      {{ item.title }}
+                    </el-link>
+                  </div>
+                  <div>
+                    {{ item.publishTime }}
+                  </div>
+                </div>
+              </template>
+              <template v-else>
+                <div class="flex-center h150px w350px">
+                  <el-empty :image-size="50" description="暂无待办" />
+                </div>
+              </template>
+              <el-divider />
+              <div class="flex-x-between">
+                <el-link type="primary" :underline="false" @click="viewMore">
+                  <span class="text-xs">查看更多</span>
+                  <el-icon class="text-xs">
+                    <ArrowRight />
+                  </el-icon>
+                </el-link>
+                <el-link
+                  v-if="tasks.length > 0"
+                  type="primary"
+                  :underline="false"
+                  @click="markAllAsRead"
+                >
+                  <span class="text-xs">全部已读</span>
+                </el-link>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
         </div>
       </template>
     </el-dropdown>
@@ -62,18 +180,21 @@
 </template>
 
 <script setup lang="ts">
-import NoticeAPI, { NoticePageQuery, NoticePageVO } from "@/api/notice";
-import WebSocketManager from "@/utils/socket";
+import NoticeAPI, { NoticePageVO } from "@/api/notice";
+import WebSocketManager from "@/utils/websocket";
 import router from "@/router";
 
-const messages = ref<NoticePageVO[]>([]);
+const activeTab = ref("notice");
+const notices = ref<NoticePageVO[]>([]);
+const messages = ref<any[]>([]);
+const tasks = ref<any[]>([]);
 const noticeDetailRef = ref();
 
 // 获取未读消息列表并连接 WebSocket
 onMounted(() => {
   NoticeAPI.getMyNoticePage({ pageNum: 1, pageSize: 5, isRead: 0 }).then(
     (data) => {
-      messages.value = data.list;
+      notices.value = data.list;
     }
   );
 
@@ -81,10 +202,12 @@ onMounted(() => {
     console.log("收到消息：", message);
     const data = JSON.parse(message);
     const id = data.id;
-    if (!messages.value.some((msg) => msg.id === id)) {
-      messages.value.unshift({
+    if (!notices.value.some((notice) => notice.id == id)) {
+      notices.value.unshift({
         id,
         title: data.title,
+        type: data.type,
+        publishTime: data.publishTime,
       });
 
       ElNotification({
@@ -100,9 +223,9 @@ onMounted(() => {
 // 阅读通知公告
 function readNotice(id: string) {
   noticeDetailRef.value.openNotice(id);
-  const index = messages.value.findIndex((msg) => msg.id === id);
+  const index = notices.value.findIndex((notice) => notice.id === id);
   if (index >= 0) {
-    messages.value.splice(index, 1); // 从消息列表中移除已读消息
+    notices.value.splice(index, 1); // 从消息列表中移除已读消息
   }
 }
 
@@ -114,9 +237,14 @@ function viewMore() {
 // 全部已读
 function markAllAsRead() {
   NoticeAPI.readAll().then(() => {
-    messages.value = [];
+    notices.value = [];
   });
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.layout-top .notification-icon,
+.layout-mix .notification-icon {
+  color: #fff;
+}
+</style>