mrlee/MrleeAdmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加header 滚动条分割

Browse Source
This commit is contained in:
Mr.April
2026-04-17 15:13:38 +08:00
parent ecedab030b
commit 5f1b1c279d
7 changed files with 230 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -4,3 +4,4 @@ dist
.output
.nuxt
.vercel
app/apps/*
app/api/site/index.ts
+8
View File
@@ -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}`)
}
app/layouts/components/header-actions.vue
+1 -2
View File
@@ -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');
};
/**
app/layouts/components/header.vue
+47 -3
View File
@@ -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 {
app/layouts/components/menu-sub.vue
+164 -5
View File
@@ -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>
app/layouts/components/menu.vue
+8 -1
View File
@@ -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')
app/layouts/default.vue
+1 -2
View File
@@ -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;
}
/* 响应式断点 */