feat 首页头部

src/components/AppHeader.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { onMounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMessageStore } from '@/stores/modules/message'
+
 interface NavItem {
   label: string
   path: string
@@ -15,6 +19,11 @@ const navItems: NavItem[] = [
   { label: '财务中心', path: '/finance' },
   { label: '个人中心', path: '/profile' },
 ]
+
+// 🔔 消息提示：顶栏铃铛展示未读数量，点击进入消息中心
+const messageStore = useMessageStore()
+const { unreadCount } = storeToRefs(messageStore)
+onMounted(() => void messageStore.fetchUnreadCount())
 </script>
 
 <template>
@@ -33,13 +42,34 @@ const navItems: NavItem[] = [
 
       <div class="app-header__actions">
         <RouterLink to="/demand" class="app-header__action">
-          <img src="@/assets/icons/quick-report.png" class="app-header__action-icon" alt="">
+          <img
+            src="@/assets/icons/quick-report.png"
+            class="app-header__action-icon"
+            alt=""
+          />
           快捷提报
         </RouterLink>
         <RouterLink to="/service" class="app-header__action">
-          <img src="@/assets/icons/online-service.png" class="app-header__action-icon" alt="">
+          <img
+            src="@/assets/icons/online-service.png"
+            class="app-header__action-icon"
+            alt=""
+          />
           在线客服
         </RouterLink>
+        <RouterLink
+          to="/message"
+          class="app-header__bell"
+          aria-label="消息中心"
+        >
+          <span class="app-header__bell-icon">🔔</span>
+          <span v-if="unreadCount > 0" class="app-header__badge">{{
+            unreadCount > 99 ? '99+' : unreadCount
+          }}</span>
+        </RouterLink>
+        <RouterLink to="/login" class="app-header__login link">
+          登录
+        </RouterLink>
       </div>
     </div>
   </header>
@@ -66,9 +96,9 @@ const navItems: NavItem[] = [
   // 导航首项 x275 = 左留白 155 + 120
   &__nav {
     .flex(row, center);
-    gap: @header-nav-gap;   // 设计实测 94（首页 x275→311，案例库 x405）
+    gap: @header-nav-gap; // 设计实测 94（首页 x275→311，案例库 x405）
     height: 100%;
-    margin-left: 120px;
+    margin-left: 0px;
 
     @media (max-width: 1600px) {
       gap: 48px;
@@ -110,7 +140,7 @@ const navItems: NavItem[] = [
 
   &__actions {
     .flex(row, flex-end, center);
-    gap: 29px;               // 设计：胶囊1 右缘 1665 → 胶囊2 左缘 1694
+    gap: 29px; // 设计：胶囊1 右缘 1665 → 胶囊2 左缘 1694
     margin-left: auto;
     flex-shrink: 0;
   }
@@ -137,5 +167,41 @@ const navItems: NavItem[] = [
       height: 18px;
     }
   }
+
+  // 🔔 消息铃铛：展示未读数量红点，点击进入消息中心
+  &__bell {
+    position: relative;
+    .flex(row, center, center);
+    width: 36px;
+    height: 36px;
+    flex-shrink: 0;
+
+    &-icon {
+      font-size: 20px;
+      line-height: 1;
+    }
+  }
+
+  &__badge {
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: @radius-round;
+    background: @danger-color;
+    color: @white;
+    font-size: 12px;
+    line-height: 16px;
+    text-align: center;
+    box-sizing: border-box;
+  }
+
+  // 登录：文字链接，点击直达登录页
+  &__login {
+    font-size: 16px;
+    font-weight: 500;
+  }
 }
 </style>