From 5f1b1c279d68abe2563c99cfc58d56a03bd6d65a Mon Sep 17 00:00:00 2001
From: "Mr.April" <liuguanqin.g@163.com>
Date: Fri, 17 Apr 2026 15:12:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0header=20=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E5=88=86=E5=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                |   1 +
 app/api/site/index.ts                     |   8 +
 app/layouts/components/header-actions.vue |   3 +-
 app/layouts/components/header.vue         |  50 ++++++-
 app/layouts/components/menu-sub.vue       | 169 +++++++++++++++++++++-
 app/layouts/components/menu.vue           |   9 +-
 app/layouts/default.vue                   |   3 +-
 7 files changed, 230 insertions(+), 13 deletions(-)

diff --git a/.gitignore b/.gitignore
index e10359c..5c15477 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ dist
 .output
 .nuxt
 .vercel
+app/apps/*
diff --git a/app/api/site/index.ts b/app/api/site/index.ts
index 2848c4f..de720b2 100644
--- a/app/api/site/index.ts
+++ b/app/api/site/index.ts
@@ -44,4 +44,12 @@ export function getWebGroupConfigs(): Promise<Record<string, any>> {
     return request.get('/system/config/group/web')
 }
 
+/**
+ * 根据配置编码获取单一配置
+ * @param code 配置编码，如 web_site_setting, web_payment_config 等
+ */
+export function getConfigByCode(code: string): Promise<Record<string, any>> {
+    return request.get(`/system/config/code/${code}`)
+}
+
 
diff --git a/app/layouts/components/header-actions.vue b/app/layouts/components/header-actions.vue
index e1b9677..3276de5 100644
--- a/app/layouts/components/header-actions.vue
+++ b/app/layouts/components/header-actions.vue
@@ -106,7 +106,6 @@ import { useConfigStore } from "~/stores/config";
 import { t } from "~/composables/lang";
 import { getDark, setDark } from "~/utils/dark";
 
-
 const memberStore = useMemberStore();
 const systemStore = useSystemStore();
 const configStore = useConfigStore();
@@ -183,7 +182,7 @@ const handleLogin = () => {
 
 const handleLoginClick = () => {
   handleLogin();
-  $emit('menu-click');
+  emit('menu-click');
 };
 
 /**
diff --git a/app/layouts/components/header.vue b/app/layouts/components/header.vue
index 9b53b47..160d2fe 100644
--- a/app/layouts/components/header.vue
+++ b/app/layouts/components/header.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="ma-header">
+<div class="ma-header" :class="{ 'is-scrolled': isScrolled }">
     <div class="header-container">
         <!-- 左侧logo -->
         <div class="header-left">
@@ -51,22 +51,51 @@ import MobileDrawer from './mobile-drawer.vue'
 import HeaderActions from './header-actions.vue'
 import { Icon } from '~/components/icon'
 import { useSystemStore } from '~/stores/system'
+import { inject, ref, nextTick, onMounted, onUnmounted } from 'vue'
+
+// 注入父级提供的 scrollbar ref
+const mainScrollbarRef = inject('mainScrollbarRef', ref(null))
 
 
 // 判断是否为移动端
 const isMobile = ref(false)
+const isScrolled = ref(false)
 const systemStore = useSystemStore()
+
 const checkMobile = () => {
     isMobile.value = window.innerWidth <= 768
 }
 
+const handleScroll = () => {
+    const scrollbar = mainScrollbarRef.value as any
+    if (scrollbar) {
+        const wrap = scrollbar.wrapRef || scrollbar.$el?.querySelector?.('.el-scrollbar__wrap')
+        if (wrap) {
+            isScrolled.value = wrap.scrollTop > 0
+        }
+    }
+}
+
 onMounted(() => {
     checkMobile()
+    nextTick(() => {
+        handleScroll()
+        const scrollbar = mainScrollbarRef.value as any
+        const wrap = scrollbar?.wrapRef || scrollbar?.$el?.querySelector?.('.el-scrollbar__wrap')
+        if (wrap) {
+            wrap.addEventListener('scroll', handleScroll)
+        }
+    })
     window.addEventListener('resize', checkMobile)
 })
 
 onUnmounted(() => {
     window.removeEventListener('resize', checkMobile)
+    const scrollbar = mainScrollbarRef.value as any
+    const wrap = scrollbar?.wrapRef || scrollbar?.$el?.querySelector?.('.el-scrollbar__wrap')
+    if (wrap) {
+        wrap.removeEventListener('scroll', handleScroll)
+    }
 })
 
 const handleLanguageChange = (languageName: string) => {
@@ -87,11 +116,26 @@ const toggleDarkMode = () => {
 <style scoped lang="scss">
 .ma-header {
     background-color: var(--ma-bg-color-overlay);
-    /* 暂时注释掉阴影，避免左右两边出现阴影线条 */
-    /* box-shadow: 0 2px 4px rgba(0 0 0 / 8%); */
     position: relative;
     z-index: 1000;
     width: 100%;
+
+    // 使用伪元素实现底部边框线，横跨整个视口宽度
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 100vw;
+        height: 1px;
+        background-color: transparent;
+        transition: background-color 0.3s ease;
+    }
+
+    &.is-scrolled::after {
+        background-color: var(--el-border-color-light);
+    }
 }
 
 .header-container {
diff --git a/app/layouts/components/menu-sub.vue b/app/layouts/components/menu-sub.vue
index 9b2ed44..02acc07 100644
--- a/app/layouts/components/menu-sub.vue
+++ b/app/layouts/components/menu-sub.vue
@@ -7,14 +7,35 @@
             </template>
             <MenuSub :menus="item.children" :show-icon="showIcon" @menu-click="$emit('menu-click')" />
         </el-sub-menu>
-        <el-menu-item 
+        <el-menu-item
             v-else-if="checkMenuShow(item)"
-            @click="onClickMenu(item)" 
-            :index="'column-' + item.id" 
-            :class="item.name.replace(/[\/]/g, '-')"
+            @click="onClickMenu(item)"
+            :index="'column-' + item.id"
+            :class="getMenuItemClass(item)"
+            :data-menu-id="item.id"
+            :data-menu-name="item.name"
+            :data-menu-path="item.path"
+            :data-menu-controllable="item.extra?.controllable ? 'true' : undefined"
         >
             <Icon v-if="showIcon && item.icon" :icon="item.icon" color="var(--el-text-color-primary)" />
-            <template #title>{{ item.title }}</template>
+            <template #title>
+                <span class="menu-title">{{ item.title }}</span>
+                <!-- 徽章 -->
+                <span
+                    v-if="item.extra?.badge"
+                    class="menu-badge"
+                    :class="[`badge-${item.extra?.badgeType || 'danger'}`]"
+                    :data-badge="item.extra.badge"
+                >
+                    {{ item.extra.badge }}
+                </span>
+                <!-- 红点（仅显示状态无数量时） -->
+                <span
+                    v-else-if="item.extra?.badge === '' || item.extra?.dot"
+                    class="menu-dot"
+                    :class="[`dot-${item.extra?.badgeType || 'danger'}`]"
+                ></span>
+            </template>
         </el-menu-item>
     </div>
 </template>
@@ -24,6 +45,7 @@ import type { Menus } from '~/stores/interface'
 import { navigateTo } from 'nuxt/app'
 import { useSystemStore } from '~/stores/system'
 import { Icon } from '~/components/icon'
+import { onMounted, onUnmounted } from 'vue'
 
 interface Props {
     menus: Menus[]
@@ -41,6 +63,14 @@ const emit = defineEmits<{
 
 const systemStore = useSystemStore()
 
+// 组件挂载后，如果有可操控菜单，触发事件通知外部
+onMounted(() => {
+    const hasControllable = props.menus.some(item => item.extra?.controllable)
+    if (hasControllable) {
+        window.dispatchEvent(new CustomEvent('menu:controllable:mounted'))
+    }
+})
+
 const checkMenuShow = (menu: Menus): boolean => {
     if (!menu) {
         return false
@@ -55,6 +85,32 @@ const checkMenuShow = (menu: Menus): boolean => {
     return systemStore.checkMenuPermission(menu)
 }
 
+/**
+ * 获取菜单项的 CSS 类名
+ * - 提供可操作的 DOM 标识
+ */
+const getMenuItemClass = (item: Menus): string => {
+    const classes: string[] = []
+
+    // 基础类：根据 name 生成（保留中文，仅替换特殊字符）
+    if (item.name) {
+        const baseClass = item.name.replace(/[^\w\u4e00-\u9fa5\-]/g, '-')
+        if (baseClass) classes.push(`menu-${baseClass}`)
+    }
+
+    // 可操控菜单标识（通过 extra.controllable）
+    if (item.extra?.controllable) {
+        classes.push('menu-controllable')
+    }
+
+    // 有徽章时的特殊类
+    if (item.extra?.badge || item.extra?.dot) {
+        classes.push('has-badge')
+    }
+
+    return classes.join(' ')
+}
+
 const onClickMenu = (menu: Menus) => {
     // 检查权限
     if (!systemStore.checkMenuPermission(menu)) {
@@ -94,4 +150,107 @@ const onClickMenu = (menu: Menus) => {
 .is-active > .icon {
     color: var(--el-menu-active-color) !important;
 }
+
+// 菜单标题
+.menu-title {
+    flex: 1;
+}
+
+// 徽章样式
+.menu-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 6px;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 9px;
+    margin-left: 6px;
+    flex-shrink: 0;
+
+    // 颜色变体
+    &.badge-danger {
+        background-color: var(--el-color-danger);
+        color: #fff;
+    }
+
+    &.badge-warning {
+        background-color: var(--el-color-warning);
+        color: #fff;
+    }
+
+    &.badge-success {
+        background-color: var(--el-color-success);
+        color: #fff;
+    }
+
+    &.badge-info {
+        background-color: var(--el-color-info);
+        color: #fff;
+    }
+
+    &.badge-primary {
+        background-color: var(--el-color-primary);
+        color: #fff;
+    }
+}
+
+// 红点样式
+.menu-dot {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    margin-left: 6px;
+    flex-shrink: 0;
+
+    &.dot-danger {
+        background-color: var(--el-color-danger);
+    }
+
+    &.dot-warning {
+        background-color: var(--el-color-warning);
+    }
+
+    &.dot-success {
+        background-color: var(--el-color-success);
+    }
+
+    &.dot-info {
+        background-color: var(--el-color-info);
+    }
+
+    &.dot-primary {
+        background-color: var(--el-color-primary);
+    }
+}
+
+// 可操控菜单特殊样式（如通知菜单）
+:deep(.menu-controllable) {
+    position: relative;
+
+    .menu-badge,
+    .menu-dot {
+        animation: pulse 2s infinite;
+    }
+}
+
+// 脉冲动画
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.7;
+    }
+}
+
+// 有徽章的菜单项高亮
+:deep(.has-badge) {
+    .menu-title {
+        font-weight: 500;
+    }
+}
 </style>
diff --git a/app/layouts/components/menu.vue b/app/layouts/components/menu.vue
index 17e039f..c00cc2e 100644
--- a/app/layouts/components/menu.vue
+++ b/app/layouts/components/menu.vue
@@ -1,6 +1,6 @@
 <template>
     <el-menu :default-active="state.activeMenu" @select="onSelect">
-        <MenuSub :menus="systemStore.navMenu" :show-icon="showIcon" @menu-click="$emit('menu-click')" />
+        <MenuSub :menus="systemStore.navMenu" :show-icon="showIcon" @menu-click="$emit('menu-click')" :key="navMenuKey" />
     </el-menu>
 </template>
 
@@ -34,6 +34,13 @@ const state = reactive({
     switchingLanguage: false,
 })
 
+// 调试用：检查 navMenu 中是否有消息中心
+const navMenuKey = computed(() => {
+    const hasNotify = systemStore.navMenu?.some((m: Menus) => m.name === '消息中心' || m.path === '/notify')
+    console.log('[Menu] navMenu has 消息中心:', hasNotify, 'menus:', systemStore.navMenu?.map((m: Menus) => m.name))
+    return hasNotify ? 'with-notify' : 'no-notify'
+})
+
 const setActiveMenu = (route: RouteLocationNormalizedLoaded) => {
     if (route.path == '/') return (state.activeMenu = 'index')
 
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 41c08cd..7743ee2 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -81,7 +81,7 @@ provide('mainScrollbarRef', mainScrollbarRef);
         flex-direction: column;
         width: 100%;
         max-width: 100%;
-        overflow-x: hidden;
+        overflow-x: visible;
         padding: 0;
       }
       
@@ -100,7 +100,6 @@ provide('mainScrollbarRef', mainScrollbarRef);
   margin: 0;
   padding: 0;
   width: 100%;
-  overflow-x: hidden;
 }
 
 /* 响应式断点 */