mirror of
https://gitcode.com/yangzongzhuan/RuoYi-Vue3.git
synced 2026-05-22 19:08:37 +00:00
优化样式
This commit is contained in:
RuoYi
@@ -67,7 +67,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ElMessageBox } from 'element-plus'
|
import { ElMessageBox } from 'element-plus'
|
||||||
import Breadcrumb from '@/components/Breadcrumb/index.vue'
|
import Breadcrumb from '@/components/Breadcrumb/index.vue'
|
||||||
import TopNav from '@/components/TopNav/index.vue'
|
import TopNav from './TopNav/index.vue'
|
||||||
import TopBar from './TopBar/index.vue'
|
import TopBar from './TopBar/index.vue'
|
||||||
import Logo from './Sidebar/Logo.vue'
|
import Logo from './Sidebar/Logo.vue'
|
||||||
import Hamburger from '@/components/Hamburger/index.vue'
|
import Hamburger from '@/components/Hamburger/index.vue'
|
||||||
|
|||||||
@@ -389,7 +389,7 @@ function handleScroll(): void {
|
|||||||
$divider: 1px solid var(--tags-item-border, #d8dce5);
|
$divider: 1px solid var(--tags-item-border, #d8dce5);
|
||||||
|
|
||||||
.tags-nav-btn {
|
.tags-nav-btn {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -565,7 +565,6 @@ function handleScroll(): void {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-left: 0 !important;
|
margin-left: 0 !important;
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-container.fullscreen-mode .fixed-header {
|
.main-container.fullscreen-mode .fixed-header {
|
||||||
|
|||||||
@@ -1,220 +1,220 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="activeMenu"
|
:default-active="activeMenu"
|
||||||
mode="horizontal"
|
mode="horizontal"
|
||||||
@select="handleSelect"
|
@select="handleSelect"
|
||||||
:ellipsis="false"
|
:ellipsis="false"
|
||||||
>
|
>
|
||||||
<template v-for="(item, index) in topMenus">
|
<template v-for="(item, index) in topMenus">
|
||||||
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber">
|
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber">
|
||||||
<svg-icon
|
<svg-icon
|
||||||
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
||||||
:icon-class="item.meta.icon"/>
|
:icon-class="item.meta.icon"/>
|
||||||
{{ item.meta.title }}
|
{{ item.meta.title }}
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<!-- 顶部菜单超出数量折叠 -->
|
<!-- 顶部菜单超出数量折叠 -->
|
||||||
<el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
|
<el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
|
||||||
<template #title>更多菜单</template>
|
<template #title>更多菜单</template>
|
||||||
<template v-for="(item, index) in topMenus">
|
<template v-for="(item, index) in topMenus">
|
||||||
<el-menu-item
|
<el-menu-item
|
||||||
:index="item.path"
|
:index="item.path"
|
||||||
:key="index"
|
:key="index"
|
||||||
v-if="index >= visibleNumber">
|
v-if="index >= visibleNumber">
|
||||||
<svg-icon
|
<svg-icon
|
||||||
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
||||||
:icon-class="item.meta.icon"/>
|
:icon-class="item.meta.icon"/>
|
||||||
{{ item.meta.title }}
|
{{ item.meta.title }}
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
</el-sub-menu>
|
</el-sub-menu>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { constantRoutes } from "@/router"
|
import { constantRoutes } from "@/router"
|
||||||
import { isHttp } from '@/utils/validate'
|
import { isHttp } from '@/utils/validate'
|
||||||
import useAppStore from '@/store/modules/app'
|
import useAppStore from '@/store/modules/app'
|
||||||
import useSettingsStore from '@/store/modules/settings'
|
import useSettingsStore from '@/store/modules/settings'
|
||||||
import usePermissionStore from '@/store/modules/permission'
|
import usePermissionStore from '@/store/modules/permission'
|
||||||
|
|
||||||
// 顶部栏初始数
|
// 顶部栏初始数
|
||||||
const visibleNumber = ref<number | null>(null)
|
const visibleNumber = ref<number | null>(null)
|
||||||
// 当前激活菜单的 index
|
// 当前激活菜单的 index
|
||||||
const currentIndex = ref<string | null>(null)
|
const currentIndex = ref<string | null>(null)
|
||||||
// 隐藏侧边栏路由
|
// 隐藏侧边栏路由
|
||||||
const hideList = ['/index', '/user/profile']
|
const hideList = ['/index', '/user/profile']
|
||||||
|
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore()
|
||||||
const settingsStore = useSettingsStore()
|
const settingsStore = useSettingsStore()
|
||||||
const permissionStore = usePermissionStore()
|
const permissionStore = usePermissionStore()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
|
||||||
// 主题颜色
|
// 主题颜色
|
||||||
const theme = computed(() => settingsStore.theme)
|
const theme = computed(() => settingsStore.theme)
|
||||||
// 所有的路由信息
|
// 所有的路由信息
|
||||||
const routers = computed(() => permissionStore.topbarRouters)
|
const routers = computed(() => permissionStore.topbarRouters)
|
||||||
|
|
||||||
// 顶部显示菜单
|
// 顶部显示菜单
|
||||||
const topMenus = computed(() => {
|
const topMenus = computed(() => {
|
||||||
const topMenus: any[] = []
|
const topMenus: any[] = []
|
||||||
routers.value.map((menu: any) => {
|
routers.value.map((menu: any) => {
|
||||||
if (menu.hidden !== true) {
|
if (menu.hidden !== true) {
|
||||||
// 兼容顶部栏一级菜单内部跳转
|
// 兼容顶部栏一级菜单内部跳转
|
||||||
if (menu.path === '/' && menu.children) {
|
if (menu.path === '/' && menu.children) {
|
||||||
topMenus.push(menu.children[0])
|
topMenus.push(menu.children[0])
|
||||||
} else {
|
} else {
|
||||||
topMenus.push(menu)
|
topMenus.push(menu)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return topMenus
|
return topMenus
|
||||||
})
|
})
|
||||||
|
|
||||||
// 设置子路由
|
// 设置子路由
|
||||||
const childrenMenus = computed(() => {
|
const childrenMenus = computed(() => {
|
||||||
const childrenMenus: any[] = []
|
const childrenMenus: any[] = []
|
||||||
routers.value.map((router: any) => {
|
routers.value.map((router: any) => {
|
||||||
for (const item in router.children) {
|
for (const item in router.children) {
|
||||||
if (router.children[item].parentPath === undefined) {
|
if (router.children[item].parentPath === undefined) {
|
||||||
if(router.path === "/") {
|
if(router.path === "/") {
|
||||||
router.children[item].path = "/" + router.children[item].path
|
router.children[item].path = "/" + router.children[item].path
|
||||||
} else {
|
} else {
|
||||||
if(!isHttp(router.children[item].path)) {
|
if(!isHttp(router.children[item].path)) {
|
||||||
router.children[item].path = router.path + "/" + router.children[item].path
|
router.children[item].path = router.path + "/" + router.children[item].path
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
router.children[item].parentPath = router.path
|
router.children[item].parentPath = router.path
|
||||||
}
|
}
|
||||||
childrenMenus.push(router.children[item])
|
childrenMenus.push(router.children[item])
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return constantRoutes.concat(childrenMenus)
|
return constantRoutes.concat(childrenMenus)
|
||||||
})
|
})
|
||||||
|
|
||||||
// 默认激活的菜单
|
// 默认激活的菜单
|
||||||
const activeMenu = computed(() => {
|
const activeMenu = computed(() => {
|
||||||
const path = route.path
|
const path = route.path
|
||||||
let activePath = path
|
let activePath = path
|
||||||
if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
|
if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
|
||||||
const tmpPath = path.substring(1, path.length)
|
const tmpPath = path.substring(1, path.length)
|
||||||
if (!route.meta.link) {
|
if (!route.meta.link) {
|
||||||
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"))
|
activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"))
|
||||||
appStore.toggleSideBarHide(false)
|
appStore.toggleSideBarHide(false)
|
||||||
}
|
}
|
||||||
} else if(!(route as any).children) {
|
} else if(!(route as any).children) {
|
||||||
activePath = path
|
activePath = path
|
||||||
appStore.toggleSideBarHide(true)
|
appStore.toggleSideBarHide(true)
|
||||||
}
|
}
|
||||||
activeRoutes(activePath)
|
activeRoutes(activePath)
|
||||||
return activePath
|
return activePath
|
||||||
})
|
})
|
||||||
|
|
||||||
function setVisibleNumber(): void {
|
function setVisibleNumber(): void {
|
||||||
const width = document.body.getBoundingClientRect().width / 3
|
const width = document.body.getBoundingClientRect().width / 3
|
||||||
visibleNumber.value = Math.max(1, parseInt(String(width / 85)))
|
visibleNumber.value = Math.max(1, parseInt(String(width / 85)))
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleSelect(key: string, keyPath: string[]): void {
|
function handleSelect(key: string, keyPath: string[]): void {
|
||||||
currentIndex.value = key
|
currentIndex.value = key
|
||||||
const route = routers.value.find((item: any) => item.path === key)
|
const route = routers.value.find((item: any) => item.path === key)
|
||||||
if (isHttp(key)) {
|
if (isHttp(key)) {
|
||||||
// http(s):// 路径新窗口打开
|
// http(s):// 路径新窗口打开
|
||||||
window.open(key, "_blank")
|
window.open(key, "_blank")
|
||||||
} else if (!route || !route.children) {
|
} else if (!route || !route.children) {
|
||||||
// 没有子路由路径内部打开
|
// 没有子路由路径内部打开
|
||||||
const routeMenu = childrenMenus.value.find((item: any) => item.path === key)
|
const routeMenu = childrenMenus.value.find((item: any) => item.path === key)
|
||||||
if (routeMenu && routeMenu.query) {
|
if (routeMenu && routeMenu.query) {
|
||||||
const query = JSON.parse(routeMenu.query)
|
const query = JSON.parse(routeMenu.query)
|
||||||
router.push({ path: key, query: query })
|
router.push({ path: key, query: query })
|
||||||
} else {
|
} else {
|
||||||
router.push({ path: key })
|
router.push({ path: key })
|
||||||
}
|
}
|
||||||
appStore.toggleSideBarHide(true)
|
appStore.toggleSideBarHide(true)
|
||||||
} else {
|
} else {
|
||||||
// 显示左侧联动菜单
|
// 显示左侧联动菜单
|
||||||
activeRoutes(key)
|
activeRoutes(key)
|
||||||
appStore.toggleSideBarHide(false)
|
appStore.toggleSideBarHide(false)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function activeRoutes(key: string){
|
function activeRoutes(key: string){
|
||||||
const routes: any[] = []
|
const routes: any[] = []
|
||||||
if (childrenMenus.value && childrenMenus.value.length > 0) {
|
if (childrenMenus.value && childrenMenus.value.length > 0) {
|
||||||
childrenMenus.value.map((item: any) => {
|
childrenMenus.value.map((item: any) => {
|
||||||
if (key == item.parentPath || (key == "index" && "" == item.path)) {
|
if (key == item.parentPath || (key == "index" && "" == item.path)) {
|
||||||
routes.push(item)
|
routes.push(item)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
if(routes.length > 0) {
|
if(routes.length > 0) {
|
||||||
permissionStore.setSidebarRouters(routes)
|
permissionStore.setSidebarRouters(routes)
|
||||||
} else {
|
} else {
|
||||||
appStore.toggleSideBarHide(true)
|
appStore.toggleSideBarHide(true)
|
||||||
}
|
}
|
||||||
return routes
|
return routes
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.addEventListener('resize', setVisibleNumber)
|
window.addEventListener('resize', setVisibleNumber)
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
window.removeEventListener('resize', setVisibleNumber)
|
window.removeEventListener('resize', setVisibleNumber)
|
||||||
})
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setVisibleNumber()
|
setVisibleNumber()
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.topmenu-container.el-menu--horizontal {
|
.topmenu-container.el-menu--horizontal {
|
||||||
height: 50px !important;
|
height: 50px !important;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topmenu-container.el-menu--horizontal > .el-menu-item {
|
.topmenu-container.el-menu--horizontal > .el-menu-item {
|
||||||
float: left;
|
float: left;
|
||||||
height: 50px !important;
|
height: 50px !important;
|
||||||
line-height: 50px !important;
|
line-height: 50px !important;
|
||||||
color: #303133 !important;
|
color: #303133 !important;
|
||||||
padding: 0 5px !important;
|
padding: 0 5px !important;
|
||||||
margin: 0 10px !important;
|
margin: 0 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
|
.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
|
||||||
border-bottom: 2px solid #{'var(--theme)'} !important;
|
border-bottom: 2px solid #{'var(--theme)'} !important;
|
||||||
color: #303133;
|
color: #303133;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* sub-menu item */
|
/* sub-menu item */
|
||||||
.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
|
.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
|
||||||
float: left;
|
float: left;
|
||||||
height: 50px !important;
|
height: 50px !important;
|
||||||
line-height: 50px !important;
|
line-height: 50px !important;
|
||||||
color: #303133 !important;
|
color: #303133 !important;
|
||||||
padding: 0 5px !important;
|
padding: 0 5px !important;
|
||||||
margin: 0 10px !important;
|
margin: 0 10px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 背景色隐藏 */
|
/* 背景色隐藏 */
|
||||||
.topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
|
.topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 图标右间距 */
|
/* 图标右间距 */
|
||||||
.topmenu-container .svg-icon {
|
.topmenu-container .svg-icon {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* topmenu more arrow */
|
/* topmenu more arrow */
|
||||||
.topmenu-container .el-sub-menu .el-sub-menu__icon-arrow {
|
.topmenu-container .el-sub-menu .el-sub-menu__icon-arrow {
|
||||||
position: static;
|
position: static;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user