菜单修改
This commit is contained in:
parent
cff2a60701
commit
b55ef58246
@ -2,7 +2,6 @@
|
||||
<div class="layout-navbars-breadcrumb-index" :class="setBreadcrumbStyle">
|
||||
<div class="left-section">
|
||||
<Logo v-if="setIsShowLogo" />
|
||||
<Breadcrumb />
|
||||
</div>
|
||||
|
||||
<Horizontal :menuList="state.menuList" />
|
||||
@ -82,7 +81,11 @@ const filterRoutesFun = <T extends RouteItem>(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
|
||||
})
|
||||
}
|
||||
|
||||
@ -32,6 +32,10 @@
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">
|
||||
<i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>
|
||||
</div>
|
||||
|
||||
<div class="layout-navbars-breadcrumb-user-icon" @click="onMsgClick">
|
||||
<el-badge :is-dot="state.unread">
|
||||
<el-icon :title="$t('message.user.title4')">
|
||||
@ -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()
|
||||
|
||||
@ -5,15 +5,16 @@
|
||||
<el-sub-menu :index="val.path" v-if="val.children && val.children.length > 0" :key="val.path">
|
||||
<template #title>
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
<span>{{ $t(val.meta.title) }}</span>
|
||||
<span>{{ $t(val.meta.title) + '111111'}}</span>
|
||||
</template>
|
||||
<SubItem :chil="val.children" />
|
||||
</el-sub-menu>
|
||||
|
||||
<template v-else>
|
||||
<el-menu-item :index="val.path" :key="val.path">
|
||||
<template #title v-if="!val.meta.isLink || (val.meta.isLink && val.meta.isIframe)">
|
||||
<SvgIcon :name="val.meta.icon" />
|
||||
{{ $t(val.meta.title) }}
|
||||
{{ $t(val.meta.title) + '222222' }}
|
||||
</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
@ -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后左侧导航菜单数据不变的问题
|
||||
|
||||
@ -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-one|tags-style-four|tags-style-five>"，默认 tags-style-five
|
||||
// 定义的值与 `/src/layout/navBars/tagsView/tagsView.vue` 中的 class 同名
|
||||
tagsStyle: 'tags-style-five',
|
||||
// 主页面切换动画：可选值"<slide-right|slide-left|opacitys>"，默认 slide-right
|
||||
animation: 'opacitys',
|
||||
// 分栏高亮风格：可选值"<columns-round|columns-card>"，默认 columns-round
|
||||
columnsAsideStyle: 'columns-round',
|
||||
// 分栏布局风格：可选值"<columns-horizontal|columns-vertical>"，默认 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|en|zh-tw>"，默认 zh-cn
|
||||
globalI18n: 'zh-cn',
|
||||
// 默认全局组件大小，可选值"<large|'default'|small>"，默认 '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: {
|
||||
|
||||
@ -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; /* 完全隐藏下拉弹出层 */
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user