fix: 系统公告弹窗前端

Yi.Ai.Vue3/src/layouts/components/Header/components/AnnouncementBtn.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { Bell } from '@element-plus/icons-vue'
+import { storeToRefs } from 'pinia'
+import { useAnnouncementStore } from '@/stores'
+
+const announcementStore = useAnnouncementStore()
+const { announcements } = storeToRefs(announcementStore)
+
+// 计算未读公告数量（最新公告）
+const unreadCount = computed(() => {
+  return announcements.value.filter(a => a.type === 'latest').length
+})
+
+// 打开公告弹窗
+function openAnnouncement() {
+  announcementStore.openDialog()
+}
+</script>
+
+<template>
+  <div class="announcement-btn-container">
+    <el-badge
+      :value="unreadCount"
+      :hidden="unreadCount === 0"
+      :max="99"
+      class="announcement-badge"
+    >
+      <div
+        class="announcement-btn"
+        @click="openAnnouncement"
+      >
+        <el-icon :size="20">
+          <Bell />
+        </el-icon>
+      </div>
+    </el-badge>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.announcement-btn-container {
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+
+  .announcement-badge {
+    :deep(.el-badge__content) {
+      background-color: #f56c6c;
+      border: none;
+      font-size: 12px;
+      height: 18px;
+      line-height: 18px;
+      padding: 0 6px;
+    }
+  }
+
+  .announcement-btn {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    .el-icon {
+      color: #606266;
+      transition: color 0.3s;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.05);
+
+      .el-icon {
+        color: #409eff;
+      }
+    }
+  }
+}
+
+// 移动端适配
+@media screen and (max-width: 768px) {
+  .announcement-btn-container {
+    margin-right: 8px;
+
+    .announcement-btn {
+      width: 36px;
+      height: 36px;
+
+      .el-icon {
+        font-size: 18px;
+      }
+    }
+
+    .announcement-badge {
+      :deep(.el-badge__content) {
+        font-size: 10px;
+        height: 16px;
+        line-height: 16px;
+        padding: 0 4px;
+      }
+    }
+  }
+}
+</style>

Yi.Ai.Vue3/src/layouts/components/Header/index.vue

@@ -4,6 +4,7 @@ import { onKeyStroke } from '@vueuse/core';
 import { SIDE_BAR_WIDTH } from '@/config/index';
 import { useDesignStore, useUserStore } from '@/stores';
 import { useSessionStore } from '@/stores/modules/session';
+import AnnouncementBtn from './components/AnnouncementBtn.vue';
 import Avatar from './components/Avatar.vue';
 import Collapse from './components/Collapse.vue';
 import CreateChat from './components/CreateChat.vue';
@@ -69,6 +70,7 @@ onKeyStroke(event => event.ctrlKey && event.key.toLowerCase() === 'k', handleCtr
 
         <!-- 右边 -->
         <div class="right-box flex h-full items-center pr-20px flex-shrink-0 mr-auto flex-row">
+          <AnnouncementBtn />
           <Avatar v-show="userStore.userInfo" />
           <LoginBtn v-show="!userStore.userInfo" />
         </div>