From b55ef582461fa95399e4dba1087a7f642f8fc2dc Mon Sep 17 00:00:00 2001 From: Asoka Date: Thu, 5 Jun 2025 11:10:43 +0800 Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/navBars/topBar/index.vue | 7 +- src/layout/navBars/topBar/user.vue | 5 +- src/layout/navMenu/horizontal.vue | 12 +- src/stores/themeConfig.ts | 187 +++++++--------------------- src/theme/element.scss | 15 +++ 5 files changed, 76 insertions(+), 150 deletions(-) diff --git a/src/layout/navBars/topBar/index.vue b/src/layout/navBars/topBar/index.vue index fc9dba7..4fb0ff1 100644 --- a/src/layout/navBars/topBar/index.vue +++ b/src/layout/navBars/topBar/index.vue @@ -2,7 +2,6 @@
-
@@ -82,7 +81,11 @@ const filterRoutesFun = (arr: T[]): T[] => { .filter((item: T) => !item.meta?.isHide) .map((item: T) => { item = Object.assign({}, item) - if (item.children) item.children = filterRoutesFun(item.children) + // 移除 children 以避免下拉菜单效果 + // if (item.children) item.children = filterRoutesFun(item.children) + if (item.children) { + delete (item as any).children // 删除子菜单数据以避免下拉效果 + } return item }) } diff --git a/src/layout/navBars/topBar/user.vue b/src/layout/navBars/topBar/user.vue index 305063a..99f7b3b 100644 --- a/src/layout/navBars/topBar/user.vue +++ b/src/layout/navBars/topBar/user.vue @@ -32,6 +32,10 @@ +
+ +
+
@@ -61,7 +65,6 @@ import { WebSocketClient } from '/@/utils/ws' // 引入组件 const Msg = defineAsyncComponent(() => import('/@/layout/navBars/topBar/msg.vue')) -const Search = defineAsyncComponent(() => import('/@/layout/navBars/topBar/search.vue')) // 定义变量内容 const { locale, t } = useI18n() diff --git a/src/layout/navMenu/horizontal.vue b/src/layout/navMenu/horizontal.vue index 3e3e940..b834fe2 100644 --- a/src/layout/navMenu/horizontal.vue +++ b/src/layout/navMenu/horizontal.vue @@ -5,15 +5,16 @@ + @@ -36,7 +37,7 @@ import { cloneDeep } from 'lodash-es' const router = useRouter() // 引入组件 -const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue')) +// const SubItem = defineAsyncComponent(() => import('/@/layout/navMenu/subItem.vue')) // 已移除下拉菜单，不再需要 // 定义父组件传过来的值 const props = defineProps({ @@ -107,12 +108,8 @@ const setSendClassicChildren = (path: string) => { } // 设置页面当前路由高亮 const setCurrentRouterHighlight = (currentRoute: RouteToFrom) => { - console.log('currentRoute', currentRoute) - const { path, meta } = currentRoute if (themeConfig.value.layout === 'classic') { - console.log('themeConfig.value.layout', themeConfig.value.layout) - let rootPath = getRootPath(path || '') rootPath = rootPath || path || '' state.defaultActive = `/${rootPath?.split('/')[1]}` @@ -133,7 +130,6 @@ onBeforeMount(() => { }) // 路由更新时 onBeforeRouteUpdate((to) => { - console.log('to', to) // 修复：https://gitee.com/lyt-top/vue-next-admin/issues/I3YX6G setCurrentRouterHighlight(to) // 修复经典布局开启切割菜单时，点击tagsView后左侧导航菜单数据不变的问题 diff --git a/src/stores/themeConfig.ts b/src/stores/themeConfig.ts index abd7d92..5072d7f 100644 --- a/src/stores/themeConfig.ts +++ b/src/stores/themeConfig.ts @@ -9,145 +9,54 @@ import { defineStore } from 'pinia' export const useThemeConfig = defineStore('themeConfig', { state: (): ThemeConfigState => ({ themeConfig: { - // 是否开启布局配置抽屉 - isDrawer: false, - // 是否创建一个h5历史，否则创建一个 hash 历史记录 - isCreateWebHistory: true, - - /** - * 全局主题 - */ - // 默认 primary 主题颜色 蓝色 #409eff 红色 #F34D37 紫色 #6954f0 绿色 #41b584 - primary: '#409eff', - // 是否开启深色模式 - isDark: false, - - /** - * 顶栏设置 - */ - // 默认顶栏导航背景颜色 #FFFFFF #323233 - topBar: '#FFFFFF', - // 默认顶栏导航字体颜色 - topBarColor: '#eaeaea', - // 是否开启顶栏背景颜色渐变 - isTopBarColorGradual: false, - - /** - * 菜单设置 - */ - // 默认菜单导航背景颜色 #FFFFFF #252526 - menuBar: '#FFFFFF', - // 默认菜单导航字体颜色 - menuBarColor: '#eaeaea', - // 默认菜单高亮背景色 - menuBarActiveColor: 'rgba(0, 0, 0, 0.2)', - // 是否开启菜单背景颜色渐变 - isMenuBarColorGradual: false, - - /** - * 分栏设置 - */ - // 默认分栏菜单背景颜色 - columnsMenuBar: '#333333', - // 默认分栏菜单字体颜色 - columnsMenuBarColor: '#eaeaea', - // 默认分栏菜单高亮字体颜色 - columnsMenuBarActiveColor: '#ffffff', - // 是否开启分栏菜单背景颜色渐变 - isColumnsMenuBarColorGradual: false, - // 是否开启分栏菜单鼠标悬停预加载(预览菜单) - isColumnsMenuHoverPreload: false, - - /** - * 界面设置 - */ - // 是否开启菜单水平折叠效果 - isCollapse: false, - // 是否开启菜单手风琴效果 - isUniqueOpened: true, - // 是否开启固定 Header - isFixedHeader: true, - // 初始化变量，用于更新菜单 el-scrollbar 的高度，请勿删除 - isFixedHeaderChange: false, - // 是否开启经典布局分割菜单（仅经典布局生效） - isClassicSplitMenu: true, - // 是否开启自动锁屏 - isLockScreen: false, - // 开启自动锁屏倒计时(s/秒) - lockScreenTime: 30, - - /** - * 界面显示 - */ - // 是否开启侧边栏 Logo - isShowLogo: true, - // 初始化变量，用于 el-scrollbar 的高度更新，请勿删除 - isShowLogoChange: false, - // 是否开启 Breadcrumb，强制经典、横向布局不显示 - isBreadcrumb: true, - // 是否开启 Tagsview - isTagsview: true, - // 是否开启 Breadcrumb 图标 - isBreadcrumbIcon: false, - // 是否开启 Tagsview 图标 - isTagsviewIcon: false, - // 是否开启 TagsView 缓存 - isCacheTagsView: true, - // 是否开启 TagsView 拖拽 - isSortableTagsView: true, - // 是否开启 TagsView 共用 - isShareTagsView: false, - // 是否开启 Footer 底部版权信息 - isFooter: false, - // 是否开启灰色模式 - isGrayscale: false, - // 是否开启色弱模式 - isInvert: false, - // 是否开启水印 - isWatermark: false, - // 水印文案 - watermarkText: 'NPP', - - /** - * 其它设置 - */ - // Tagsview 风格：可选值""，默认 tags-style-five - // 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名 - tagsStyle: 'tags-style-five', - // 主页面切换动画：可选值""，默认 slide-right - animation: 'opacitys', - // 分栏高亮风格：可选值""，默认 columns-round - columnsAsideStyle: 'columns-round', - // 分栏布局风格：可选值""，默认 columns-horizontal - columnsAsideLayout: 'columns-horizontal', - - /** - * 布局切换 - * 注意：为了演示，切换布局时，颜色会被还原成默认，代码位置：/@/layout/navBars/topBar/setings.vue - * 中的 `initSetLayoutChange(设置布局切换，重置主题样式)` 方法 - */ - // 布局切换：可选值"<默认 defaults | 经典 classic | 横向 transverse | 分栏 columns>"，默认 defaults - layout: 'columns', - - /** - * 后端控制路由 - */ - // 是否开启后端控制路由 - isRequestRoutes: true, - - /** - * 全局网站标题 / 副标题 - */ - // 网站主标题（菜单导航、浏览器当前网页标题） - globalTitle: 'NPP', - // 网站副标题（登录页顶部文字） - globalViceTitle: 'Smart Pilot', - // 网站副标题（登录页顶部文字） - globalViceTitleMsg: 'NPP Smart Pilot', - // 默认初始语言，可选值""，默认 zh-cn - globalI18n: 'zh-cn', - // 默认全局组件大小，可选值""，默认 'large' - globalComponentSize: 'default', + "isDrawer": false, + "isCreateWebHistory": true, + "primary": "#41b584", + "isDark": false, + "topBar": "#FFFFFF", + "topBarColor": "#606266", + "isTopBarColorGradual": false, + "menuBar": "#FFFFFF", + "menuBarColor": "#606266", + "menuBarActiveColor": "#ecf7f2", + "isMenuBarColorGradual": false, + "columnsMenuBar": "#333333", + "columnsMenuBarColor": "#eaeaea", + "columnsMenuBarActiveColor": "#ffffff", + "isColumnsMenuBarColorGradual": false, + "isColumnsMenuHoverPreload": true, + "isCollapse": false, + "isUniqueOpened": false, + "isFixedHeader": true, + "isFixedHeaderChange": false, + "isClassicSplitMenu": false, + "isLockScreen": false, + "lockScreenTime": 30, + "isShowLogo": true, + "isShowLogoChange": false, + "isBreadcrumb": true, + "isTagsview": false, + "isBreadcrumbIcon": false, + "isTagsviewIcon": false, + "isCacheTagsView": true, + "isSortableTagsView": true, + "isShareTagsView": false, + "isFooter": false, + "isGrayscale": false, + "isInvert": false, + "isWatermark": false, + "watermarkText": "NPP", + "tagsStyle": "tags-style-five", + "animation": "opacitys", + "columnsAsideStyle": "columns-round", + "columnsAsideLayout": "columns-horizontal", + "layout": "classic", + "isRequestRoutes": true, + "globalTitle": "NPP", + "globalViceTitle": "Smart Pilot", + "globalViceTitleMsg": "NPP Smart Pilot", + "globalI18n": "zh-cn", + "globalComponentSize": "default" }, }), actions: { diff --git a/src/theme/element.scss b/src/theme/element.scss index 9b613f6..1238425 100644 --- a/src/theme/element.scss +++ b/src/theme/element.scss @@ -384,3 +384,18 @@ .el-segmented { padding: 0px; } + +/* 隐藏水平菜单的下拉效果 */ +.el-menu--horizontal { + .el-sub-menu .el-sub-menu__icon-arrow { + display: none !important; /* 隐藏下拉箭头 */ + } + + .el-sub-menu__title:hover + .el-menu { + display: none !important; /* 隐藏下拉菜单 */ + } + + .el-popper.is-pure.is-light { + display: none !important; /* 完全隐藏下拉弹出层 */ + } +}