实现工作台布局
|
@ -1,8 +1,8 @@
|
||||||
{
|
{
|
||||||
"name": "ruoyi",
|
"name": "youkechuanmei_vue",
|
||||||
"version": "3.9.0",
|
"version": "3.9.0",
|
||||||
"description": "媒介管理系统",
|
"description": "媒介管理系统",
|
||||||
"author": "若依",
|
"author": "hivekion",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
BIN
src/assets/images/PPTAnalysisTool.png
Normal file
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/images/avatar_icon.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/bigBackgroud.png
Normal file
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/images/calibrationPlatform.png
Normal file
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/images/logout_icon.png
Normal file
After Width: | Height: | Size: 676 B |
BIN
src/assets/images/longitudeConversion.png
Normal file
After Width: | Height: | Size: 24 KiB |
BIN
src/assets/images/mediaLibary.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/images/mediaMap.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/images/notic-icon.png
Normal file
After Width: | Height: | Size: 531 B |
BIN
src/assets/images/outdoorMediaMap.png
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/supplierManage.png
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/images/system-notic-bg.png
Normal file
After Width: | Height: | Size: 6.8 KiB |
BIN
src/assets/logo/homeLogo.png
Normal file
After Width: | Height: | Size: 6.9 KiB |
|
@ -1,15 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<el-menu
|
<el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect" :ellipsis="false">
|
||||||
:default-active="activeMenu"
|
|
||||||
mode="horizontal"
|
|
||||||
@select="handleSelect"
|
|
||||||
: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 !== '#'" :icon-class="item.meta.icon" />
|
||||||
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
|
||||||
:icon-class="item.meta.icon"/>
|
|
||||||
{{ item.meta.title }}
|
{{ item.meta.title }}
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
|
@ -18,13 +11,8 @@
|
||||||
<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" :key="index" v-if="index >= visibleNumber">
|
||||||
:index="item.path"
|
<svg-icon v-if="item.meta && item.meta.icon && item.meta.icon !== '#'" :icon-class="item.meta.icon" />
|
||||||
:key="index"
|
|
||||||
v-if="index >= visibleNumber">
|
|
||||||
<svg-icon
|
|
||||||
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
|
|
||||||
:icon-class="item.meta.icon"/>
|
|
||||||
{{ item.meta.title }}
|
{{ item.meta.title }}
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
|
@ -55,7 +43,212 @@ const router = useRouter()
|
||||||
// 主题颜色
|
// 主题颜色
|
||||||
const theme = computed(() => settingsStore.theme)
|
const theme = computed(() => settingsStore.theme)
|
||||||
// 所有的路由信息
|
// 所有的路由信息
|
||||||
const routers = computed(() => permissionStore.topbarRouters)
|
// const routers = computed(() => permissionStore.topbarRouters)
|
||||||
|
const routers = ref([
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
hidden: false,
|
||||||
|
component: "Layout",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: "工作台",
|
||||||
|
path: "index",
|
||||||
|
hidden: false,
|
||||||
|
component: "index",
|
||||||
|
meta: {
|
||||||
|
title: "工作台",
|
||||||
|
noCache: false,
|
||||||
|
link: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
hidden: false,
|
||||||
|
component: "Layout",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: "媒体库管理",
|
||||||
|
path: "mediaLibrary",
|
||||||
|
hidden: false,
|
||||||
|
component: "index",
|
||||||
|
meta: {
|
||||||
|
title: "媒体库管理",
|
||||||
|
noCache: false,
|
||||||
|
link: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
hidden: false,
|
||||||
|
component: "Layout",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: "户外媒介数据",
|
||||||
|
path: "outdoorMedia",
|
||||||
|
hidden: false,
|
||||||
|
component: "index",
|
||||||
|
meta: {
|
||||||
|
title: "户外媒介数据",
|
||||||
|
noCache: false,
|
||||||
|
link: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
hidden: false,
|
||||||
|
component: "Layout",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: "供应商",
|
||||||
|
path: "supplier",
|
||||||
|
hidden: false,
|
||||||
|
component: "index",
|
||||||
|
meta: {
|
||||||
|
title: "供应商",
|
||||||
|
noCache: false,
|
||||||
|
link: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/",
|
||||||
|
hidden: false,
|
||||||
|
component: "Layout",
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
name: "问题反馈",
|
||||||
|
path: "problemFeedback",
|
||||||
|
hidden: false,
|
||||||
|
component: "index",
|
||||||
|
meta: {
|
||||||
|
title: "问题反馈",
|
||||||
|
noCache: false,
|
||||||
|
link: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "System",
|
||||||
|
"path": "/system",
|
||||||
|
"hidden": false,
|
||||||
|
"redirect": "noRedirect",
|
||||||
|
"component": "Layout",
|
||||||
|
"alwaysShow": true,
|
||||||
|
"meta": {
|
||||||
|
"title": "系统管理",
|
||||||
|
"noCache": false,
|
||||||
|
"link": null
|
||||||
|
},
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "Menu",
|
||||||
|
"path": "menu",
|
||||||
|
"hidden": false,
|
||||||
|
"component": "system/menu/index",
|
||||||
|
"meta": {
|
||||||
|
"title": "菜单管理",
|
||||||
|
"icon": "#",
|
||||||
|
"noCache": false,
|
||||||
|
"link": null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Dept",
|
||||||
|
"path": "dept",
|
||||||
|
"hidden": false,
|
||||||
|
"component": "system/dept/index",
|
||||||
|
"meta": {
|
||||||
|
"title": "部门管理",
|
||||||
|
"icon": "#",
|
||||||
|
"noCache": false,
|
||||||
|
"link": null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Role",
|
||||||
|
"path": "role",
|
||||||
|
"hidden": false,
|
||||||
|
"component": "system/role/index",
|
||||||
|
"meta": {
|
||||||
|
"title": "角色管理",
|
||||||
|
"icon": "#",
|
||||||
|
"noCache": false,
|
||||||
|
"link": null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "User",
|
||||||
|
"path": "user",
|
||||||
|
"hidden": false,
|
||||||
|
"component": "system/user/index",
|
||||||
|
"meta": {
|
||||||
|
"title": "用户管理",
|
||||||
|
"icon": "#",
|
||||||
|
"noCache": false,
|
||||||
|
"link": null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Locality",
|
||||||
|
"path": "locality",
|
||||||
|
"hidden": false,
|
||||||
|
"component": "system/locality/index",
|
||||||
|
"meta": {
|
||||||
|
"title": "属地管理",
|
||||||
|
"icon": "#",
|
||||||
|
"noCache": false,
|
||||||
|
"link": null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Section",
|
||||||
|
"path": "section",
|
||||||
|
"hidden": false,
|
||||||
|
"component": "system/section/index",
|
||||||
|
"meta": {
|
||||||
|
"title": "科室管理",
|
||||||
|
"icon": "#",
|
||||||
|
"noCache": false,
|
||||||
|
"link": null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "UserApproval",
|
||||||
|
"path": "userApproval",
|
||||||
|
"hidden": false,
|
||||||
|
"component": "system/userApproval/index",
|
||||||
|
"meta": {
|
||||||
|
"title": "新用户审批",
|
||||||
|
"icon": "#",
|
||||||
|
"noCache": false,
|
||||||
|
"link": null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Dict",
|
||||||
|
"path": "dict",
|
||||||
|
"hidden": false,
|
||||||
|
"component": "system/dict/index",
|
||||||
|
"meta": {
|
||||||
|
"title": "字典管理",
|
||||||
|
"icon": "#",
|
||||||
|
"noCache": false,
|
||||||
|
"link": null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
console.log('routers', routers.value)
|
||||||
|
|
||||||
// 顶部显示菜单
|
// 顶部显示菜单
|
||||||
const topMenus = computed(() => {
|
const topMenus = computed(() => {
|
||||||
|
@ -73,6 +266,8 @@ const topMenus = computed(() => {
|
||||||
return topMenus
|
return topMenus
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 设置子路由
|
// 设置子路由
|
||||||
const childrenMenus = computed(() => {
|
const childrenMenus = computed(() => {
|
||||||
let childrenMenus = []
|
let childrenMenus = []
|
||||||
|
@ -113,7 +308,9 @@ const activeMenu = computed(() => {
|
||||||
})
|
})
|
||||||
|
|
||||||
function setVisibleNumber() {
|
function setVisibleNumber() {
|
||||||
|
console.log('sdfsda')
|
||||||
const width = document.body.getBoundingClientRect().width / 3
|
const width = document.body.getBoundingClientRect().width / 3
|
||||||
|
console.log('sdfsda', width)
|
||||||
visibleNumber.value = parseInt(width / 85)
|
visibleNumber.value = parseInt(width / 85)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -171,47 +368,94 @@ onMounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.topmenu-container.el-menu--horizontal > .el-menu-item {
|
.el-menu--horizontal {
|
||||||
float: left;
|
height: 43px;
|
||||||
height: 50px !important;
|
background: transparent;
|
||||||
line-height: 50px !important;
|
|
||||||
color: #999093 !important;
|
|
||||||
padding: 0 5px !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 {
|
.el-menu--horizontal.el-menu {
|
||||||
border-bottom: 2px solid #{'var(--theme)'} !important;
|
border-bottom: 0px solid var(--el-menu-border-color);
|
||||||
color: #303133;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* sub-menu item */
|
.el-menu--horizontal>.el-menu-item {
|
||||||
.topmenu-container.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
|
font-family: Microsoft YaHei;
|
||||||
float: left;
|
font-weight: 600;
|
||||||
height: 50px !important;
|
font-size: 18px;
|
||||||
line-height: 50px !important;
|
color: #FFFFFF;
|
||||||
color: #999093 !important;
|
padding: 0px !important;
|
||||||
padding: 0 5px !important;
|
margin: 0 36px !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 {
|
.el-menu--horizontal>.el-menu-item.is-active,
|
||||||
background-color: #ffffff;
|
.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
|
||||||
|
border-bottom: 2px solid #FFFFFF;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 图标右间距 */
|
// 菜单鼠标滑过
|
||||||
.topmenu-container .svg-icon {
|
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
|
||||||
margin-right: 4px;
|
.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
|
||||||
|
.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
|
||||||
|
border-bottom: 2px solid #FFFFFF;
|
||||||
|
color: #FFFFFF !important;
|
||||||
|
background-color: transparent !important;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* topmenu more arrow */
|
.el-menu--horizontal .el-menu .el-menu-item:hover {
|
||||||
.topmenu-container .el-sub-menu .el-sub-menu__icon-arrow {
|
color: #ffffff !important;
|
||||||
position: static;
|
background: #545454 !important;
|
||||||
vertical-align: middle;
|
|
||||||
margin-left: 8px;
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-menu--horizontal .el-menu .el-menu-item.is-active {
|
||||||
|
color: #ffffff !important;
|
||||||
|
background: #545454 !important;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
// .topmenu-container.el-menu--horizontal>.el-menu-item {
|
||||||
|
// float: left;
|
||||||
|
// height: 50px !important;
|
||||||
|
// line-height: 50px !important;
|
||||||
|
// color: #999093 !important;
|
||||||
|
// padding: 0 5px !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 {
|
||||||
|
// border-bottom: 2px solid #{'var(--theme)'} !important;
|
||||||
|
// color: #303133;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /* sub-menu item */
|
||||||
|
// .topmenu-container.el-menu--horizontal>.el-sub-menu .el-sub-menu__title {
|
||||||
|
// float: left;
|
||||||
|
// height: 50px !important;
|
||||||
|
// line-height: 50px !important;
|
||||||
|
// color: #999093 !important;
|
||||||
|
// padding: 0 5px !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 {
|
||||||
|
// background-color: #ffffff;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /* 图标右间距 */
|
||||||
|
// .topmenu-container .svg-icon {
|
||||||
|
// margin-right: 4px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// /* topmenu more arrow */
|
||||||
|
// .topmenu-container .el-sub-menu .el-sub-menu__icon-arrow {
|
||||||
|
// position: static;
|
||||||
|
// vertical-align: middle;
|
||||||
|
// margin-left: 8px;
|
||||||
|
// margin-top: 0px;
|
||||||
|
// }</style>
|
||||||
|
|
|
@ -37,8 +37,8 @@ function addIframe() {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.app-main {
|
.app-main {
|
||||||
/* 50= navbar 50 */
|
/* 80= navbar 80 */
|
||||||
min-height: calc(100vh - 50px);
|
min-height: calc(100vh - 80px);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -49,17 +49,17 @@ function addIframe() {
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-header + .app-main {
|
.fixed-header + .app-main {
|
||||||
padding-top: 50px;
|
padding-top: 80px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hasTagsView {
|
.hasTagsView {
|
||||||
.app-main {
|
.app-main {
|
||||||
/* 84 = navbar + tags-view = 50 + 34 */
|
/* 114 = navbar + tags-view = 80 + 34 */
|
||||||
min-height: calc(100vh - 84px);
|
min-height: calc(100vh - 114px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixed-header + .app-main {
|
.fixed-header + .app-main {
|
||||||
padding-top: 84px;
|
padding-top: 114px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,68 +1,40 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="navbar">
|
<div class="navbar">
|
||||||
<hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
<!-- <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container"
|
||||||
|
@toggleClick="toggleSideBar" /> -->
|
||||||
<breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
<breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
|
||||||
<top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
|
<div class="navContent">
|
||||||
|
<div class="systemLogoContent">
|
||||||
|
<img v-if="homeLogo" :src="homeLogo" class="sidebar-logo" />
|
||||||
|
</div>
|
||||||
|
<div class="topmenu-container">
|
||||||
|
<top-nav v-if="settingsStore.topNav" id="topmenu-container" />
|
||||||
|
</div>
|
||||||
<div class="right-menu">
|
<div class="right-menu">
|
||||||
<template v-if="appStore.device !== 'mobile'">
|
<div class="el-dropdown avatar-container right-menu-item hover-effect">
|
||||||
<header-search id="header-search" class="right-menu-item" />
|
|
||||||
|
|
||||||
<el-tooltip content="源码地址" effect="dark" placement="bottom">
|
|
||||||
<ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
|
|
||||||
</el-tooltip>
|
|
||||||
|
|
||||||
<el-tooltip content="文档地址" effect="dark" placement="bottom">
|
|
||||||
<ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
|
|
||||||
</el-tooltip>
|
|
||||||
|
|
||||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
|
||||||
|
|
||||||
<el-tooltip content="主题模式" effect="dark" placement="bottom">
|
|
||||||
<div class="right-menu-item hover-effect theme-switch-wrapper" @click="toggleTheme">
|
|
||||||
<svg-icon v-if="settingsStore.isDark" icon-class="sunny" />
|
|
||||||
<svg-icon v-if="!settingsStore.isDark" icon-class="moon" />
|
|
||||||
</div>
|
|
||||||
</el-tooltip>
|
|
||||||
|
|
||||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
||||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
|
||||||
</el-tooltip>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<el-dropdown @command="handleCommand" class="avatar-container right-menu-item hover-effect" trigger="hover">
|
|
||||||
<div class="avatar-wrapper">
|
<div class="avatar-wrapper">
|
||||||
<img :src="userStore.avatar" class="user-avatar" />
|
<img :src="userStore.avatar ? userStore.avatar : avatar_icon" class="user-avatar" />
|
||||||
<span class="user-nickname"> {{ userStore.nickName }} </span>
|
<span class="user-nickname"> {{ userStore.nickName }} admin </span>
|
||||||
|
<div class="logout_icon">
|
||||||
|
<img :src="logout_icon" class="custom-icon" @click="logout" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<router-link to="/user/profile">
|
|
||||||
<el-dropdown-item>个人中心</el-dropdown-item>
|
|
||||||
</router-link>
|
|
||||||
<el-dropdown-item divided command="logout">
|
|
||||||
<span>退出登录</span>
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
<div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
|
<div class="right-menu-item hover-effect setting" @click="setLayout" v-if="settingsStore.showSettings">
|
||||||
<svg-icon icon-class="more-up" />
|
<svg-icon icon-class="more-up" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ElMessageBox } from 'element-plus'
|
import { ElMessageBox } from 'element-plus'
|
||||||
import Breadcrumb from '@/components/Breadcrumb'
|
import Breadcrumb from '@/components/Breadcrumb'
|
||||||
|
import homeLogo from '@/assets/logo/homeLogo.png'
|
||||||
|
import avatar_icon from '@/assets/images/avatar_icon.png'
|
||||||
|
import logout_icon from '@/assets/images/logout_icon.png'
|
||||||
import TopNav from '@/components/TopNav'
|
import TopNav from '@/components/TopNav'
|
||||||
import Hamburger from '@/components/Hamburger'
|
|
||||||
import Screenfull from '@/components/Screenfull'
|
|
||||||
import SizeSelect from '@/components/SizeSelect'
|
|
||||||
import HeaderSearch from '@/components/HeaderSearch'
|
|
||||||
import RuoYiGit from '@/components/RuoYi/Git'
|
|
||||||
import RuoYiDoc from '@/components/RuoYi/Doc'
|
|
||||||
import useAppStore from '@/store/modules/app'
|
import useAppStore from '@/store/modules/app'
|
||||||
import useUserStore from '@/store/modules/user'
|
import useUserStore from '@/store/modules/user'
|
||||||
import useSettingsStore from '@/store/modules/settings'
|
import useSettingsStore from '@/store/modules/settings'
|
||||||
|
@ -71,24 +43,14 @@ const appStore = useAppStore()
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
const settingsStore = useSettingsStore()
|
const settingsStore = useSettingsStore()
|
||||||
|
|
||||||
|
console.log('settingsStore.topNav', settingsStore.topNav)
|
||||||
|
|
||||||
function toggleSideBar() {
|
function toggleSideBar() {
|
||||||
appStore.toggleSideBar()
|
appStore.toggleSideBar()
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleCommand(command) {
|
// 退出系统
|
||||||
switch (command) {
|
const logout = () => {
|
||||||
case "setLayout":
|
|
||||||
setLayout()
|
|
||||||
break
|
|
||||||
case "logout":
|
|
||||||
logout()
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function logout() {
|
|
||||||
ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
|
ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
|
@ -111,60 +73,56 @@ function toggleTheme() {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang='scss' scoped>
|
<style lang='scss' scoped>
|
||||||
|
.myRow {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
height: 50px;
|
height: 80px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--navbar-bg);
|
background: transparent;
|
||||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
box-shadow: none;
|
||||||
|
|
||||||
.hamburger-container {
|
.navContent {
|
||||||
line-height: 46px;
|
height: 43px;
|
||||||
height: 100%;
|
width: 1840px;
|
||||||
float: left;
|
margin: 19px auto 18px auto;
|
||||||
cursor: pointer;
|
display: flex; // 添加flex布局
|
||||||
transition: background 0.3s;
|
justify-content: space-between; // 使子元素平均分布
|
||||||
-webkit-tap-highlight-color: transparent;
|
align-items: center; // 垂直居中
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgba(0, 0, 0, 0.025);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-container {
|
.systemLogoContent {
|
||||||
float: left;
|
width: 220px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topmenu-container {
|
.topmenu-container {
|
||||||
position: absolute;
|
flex: 1; // 占据剩余空间
|
||||||
left: 50px;
|
padding-left: 284px; // 替代原来的padding-left
|
||||||
}
|
|
||||||
|
|
||||||
.errLog-container {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-menu {
|
.right-menu {
|
||||||
float: right;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
line-height: 50px;
|
width: 220px;
|
||||||
display: flex;
|
text-align: right;
|
||||||
|
line-height: normal; // 覆盖原来的line-height
|
||||||
|
display: flex; // 内部也使用flex
|
||||||
|
align-items: center; // 垂直居中
|
||||||
|
justify-content: flex-end; // 内容靠右
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-menu-item {
|
.right-menu-item {
|
||||||
display: inline-block;
|
|
||||||
padding: 0 8px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #5a5e66;
|
color: #5a5e66;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
|
|
||||||
&.hover-effect {
|
&.hover-effect {
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.3s;
|
transition: background 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -191,23 +149,22 @@ function toggleTheme() {
|
||||||
padding-right: 0px;
|
padding-right: 0px;
|
||||||
|
|
||||||
.avatar-wrapper {
|
.avatar-wrapper {
|
||||||
margin-top: 10px;
|
display: flex;
|
||||||
right: 5px;
|
align-items: center;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.user-avatar {
|
.user-avatar {
|
||||||
cursor: pointer;
|
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-nickname {
|
.user-nickname {
|
||||||
position: relative;
|
bottom: 0 !important; // 移除原来的bottom定位
|
||||||
left: 5px;
|
margin-left: 8px;
|
||||||
bottom: 10px;
|
font-family: Microsoft YaHei;
|
||||||
font-size: 14px;
|
font-weight: 400;
|
||||||
font-weight: bold;
|
font-size: 18px;
|
||||||
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
|
@ -220,5 +177,32 @@ function toggleTheme() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.logout_icon {
|
||||||
|
margin-left: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-container {
|
||||||
|
line-height: 46px;
|
||||||
|
height: 100%;
|
||||||
|
float: left;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.025);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-container {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.errLog-container {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="{ 'has-logo': showLogo }" class="sidebar-container">
|
<div :class="{ 'has-logo': showLogo }" class="sidebar-container">
|
||||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
<!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
|
||||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="activeMenu"
|
:default-active="activeMenu"
|
||||||
|
@ -70,16 +70,17 @@ const activeMenu = computed(() => {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
background-color: v-bind(getMenuBackground);
|
background-color: transparent;
|
||||||
|
|
||||||
.scrollbar-wrapper {
|
.scrollbar-wrapper {
|
||||||
background-color: v-bind(getMenuBackground);
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu {
|
.el-menu {
|
||||||
border: none;
|
border: none;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
.el-menu-item, .el-sub-menu__title {
|
.el-menu-item, .el-sub-menu__title {
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
import { fa } from "element-plus/es/locales.mjs";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
/**
|
/**
|
||||||
* 网页标题
|
* 网页标题
|
||||||
|
@ -7,22 +9,22 @@ export default {
|
||||||
/**
|
/**
|
||||||
* 侧边栏主题 深色主题theme-dark,浅色主题theme-light
|
* 侧边栏主题 深色主题theme-dark,浅色主题theme-light
|
||||||
*/
|
*/
|
||||||
sideTheme: 'theme-dark',
|
sideTheme: 'theme-light',
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 是否系统布局配置
|
* 是否系统布局配置
|
||||||
*/
|
*/
|
||||||
showSettings: true,
|
showSettings: false,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 是否显示顶部导航
|
* 是否显示顶部导航
|
||||||
*/
|
*/
|
||||||
topNav: false,
|
topNav: true,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 是否显示 tagsView
|
* 是否显示 tagsView
|
||||||
*/
|
*/
|
||||||
tagsView: true,
|
tagsView: false,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 显示页签图标
|
* 显示页签图标
|
||||||
|
@ -32,7 +34,7 @@ export default {
|
||||||
/**
|
/**
|
||||||
* 是否固定头部
|
* 是否固定头部
|
||||||
*/
|
*/
|
||||||
fixedHeader: false,
|
fixedHeader: true,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 是否显示logo
|
* 是否显示logo
|
||||||
|
|