fix: 前端页面架构重构初版

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

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useAnnouncementStore } from '@/stores';
+
+const announcementStore = useAnnouncementStore();
+const { announcements } = storeToRefs(announcementStore);
+
+// 计算未读公告数量（系统公告数量）
+const unreadCount = computed(() => {
+  if (!Array.isArray(announcements.value))
+    return 0;
+  return announcements.value.filter(a => a.type === 'System').length;
+});
+
+// 打开公告弹窗
+function openAnnouncement() {
+  announcementStore.openDialog();
+}
+</script>
+
+<template>
+  <div class="announcement-btn-container" data-tour="announcement-btn">
+    <el-badge
+      is-dot
+      class="announcement-badge"
+    >
+      <!--      :value="unreadCount" -->
+      <!--      :hidden="unreadCount === 0" -->
+      <!--      :max="99" -->
+      <div
+        class="announcement-btn"
+        title="查看公告"
+        @click="openAnnouncement"
+      >
+        <!-- PC端显示文字 -->
+        <span class="pc-text">公告</span>
+        <!-- 移动端显示图标 -->
+        <svg
+          class="mobile-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+          <path d="M13.73 21a2 2 0 0 1-3.46 0" />
+        </svg>
+      </div>
+    </el-badge>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.announcement-btn-container {
+  display: flex;
+  align-items: center;
+
+  .announcement-badge {
+    :deep(.el-badge__content) {
+      background-color: #f56c6c;
+      border: none;
+    }
+  }
+
+  .announcement-btn {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    cursor: pointer;
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #409eff;
+    transition: all 0.2s;
+
+    &:hover {
+      color: #66b1ff;
+      transform: translateY(-1px);
+    }
+
+    // PC端显示文字，隐藏图标
+    .pc-text {
+      display: inline;
+      margin: 0 12px;
+
+    }
+
+    .mobile-icon {
+      display: none;
+    }
+  }
+}
+
+// 移动端显示图标，隐藏文字
+@media (max-width: 768px) {
+  .announcement-btn-container {
+    .announcement-btn {
+      .pc-text {
+        display: none;
+      }
+
+      .mobile-icon {
+        display: inline;
+      }
+    }
+  }
+}
+</style>