forked from SmartBench/CMVR-IOT-UI
zhanghao
181cff4277
- 调整了StatCards.vue中的字母间距，以提高可读性。 - 更新了RightBottomCharts.vue和RightTopCharts.vue中的图表样式，通过新的调色板和背景设置增强了视觉吸引力。 - 修改了图表中的工具提示和轴样式，以提高对比度和可见性。 - 将流程编辑器中的背景颜色更改为使用CSS变量，以保持一致性。 - 引入了新的网络主题风格，包括渐变和阴影，以提供沉浸式的暗色模式体验。 - 为各种组件添加了深色覆盖，以确保与新主题的兼容性。
100 lines
3.0 KiB
Vue
100 lines
3.0 KiB
Vue
<template>
|
|
<el-menu class="topbar-menu" :ellipsis="false" :default-active="activeMenu" :active-text-color="theme" mode="horizontal">
|
|
<sidebar-item :key="route.path + index" v-for="(route, index) in topMenus" :item="route" :base-path="route.path" />
|
|
|
|
<el-sub-menu index="more" class="el-sub-menu__hide-arrow" v-if="moreRoutes.length > 0">
|
|
<template #title>
|
|
<span>更多菜单</span>
|
|
</template>
|
|
<sidebar-item :key="route.path + index" v-for="(route, index) in moreRoutes" :item="route" :base-path="route.path" />
|
|
</el-sub-menu>
|
|
</el-menu>
|
|
</template>
|
|
|
|
<script setup>
|
|
import SidebarItem from '../Sidebar/SidebarItem'
|
|
import useAppStore from '@/store/modules/app'
|
|
import useSettingsStore from '@/store/modules/settings'
|
|
import usePermissionStore from '@/store/modules/permission'
|
|
|
|
const route = useRoute()
|
|
const appStore = useAppStore()
|
|
const settingsStore = useSettingsStore()
|
|
const permissionStore = usePermissionStore()
|
|
|
|
const sidebarRouters = computed(() => permissionStore.sidebarRouters)
|
|
const theme = computed(() => settingsStore.theme)
|
|
const device = computed(() => appStore.device)
|
|
const activeMenu = computed(() => {
|
|
const { meta, path } = route
|
|
if (meta.activeMenu) {
|
|
return meta.activeMenu
|
|
}
|
|
return path
|
|
})
|
|
|
|
const visibleNumber = ref(5)
|
|
const topMenus = computed(() => {
|
|
return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(0, visibleNumber.value)
|
|
})
|
|
const moreRoutes = computed(() => {
|
|
return permissionStore.sidebarRouters.filter((f) => !f.hidden).slice(visibleNumber.value)
|
|
})
|
|
function setVisibleNumber() {
|
|
const width = document.body.getBoundingClientRect().width / 3
|
|
visibleNumber.value = Math.max(1, parseInt(width / 85))
|
|
}
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('resize', setVisibleNumber)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener('resize', setVisibleNumber)
|
|
})
|
|
|
|
onMounted(() => {
|
|
setVisibleNumber()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/* menu item */
|
|
.topbar-menu.el-menu--horizontal .el-submenu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
|
|
padding: 0 10px !important;
|
|
}
|
|
|
|
.topbar-menu.el-menu--horizontal > .el-menu-item {
|
|
float: left;
|
|
height: 64px !important;
|
|
line-height: 64px !important;
|
|
color: var(--navbar-text) !important;
|
|
padding: 0 5px !important;
|
|
margin: 0 10px !important;
|
|
}
|
|
|
|
.el-sub-menu.is-active .svg-icon, .el-menu-item.is-active .svg-icon + span, .el-sub-menu.is-active .svg-icon + span, .el-sub-menu.is-active .el-sub-menu__title span {
|
|
color: v-bind(theme);
|
|
}
|
|
|
|
/* sub-menu item */
|
|
.topbar-menu.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
|
|
float: left;
|
|
line-height: 64px !important;
|
|
color: var(--navbar-text) !important;
|
|
margin: 0 15px -3px!important;
|
|
}
|
|
|
|
/* topbar more arrow */
|
|
.topbar-menu .el-sub-menu .el-sub-menu__icon-arrow {
|
|
position: static;
|
|
margin-left: 8px;
|
|
margin-top: 0px;
|
|
display: block !important;
|
|
}
|
|
|
|
/* menu__title el-menu-item */
|
|
.topbar-menu.el-menu--horizontal .el-sub-menu__title, .topbar-menu.el-menu--horizontal .el-menu-item {
|
|
height: 64px;
|
|
}
|
|
</style>
|