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

<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>