update 优化 控制台debuger位置错误问题

update 优化 TopNav 菜单样式
fix 修复 布局配置失效问题
This commit is contained in:
疯狂的狮子Li 2023-09-01 11:41:00 +08:00
parent f8d551e226
commit 23bf840684
10 changed files with 51 additions and 30 deletions

View File

@ -38,6 +38,6 @@
"vite": "3.2.3", "vite": "3.2.3",
"vite-plugin-compression": "0.5.1", "vite-plugin-compression": "0.5.1",
"vite-plugin-svg-icons": "2.0.1", "vite-plugin-svg-icons": "2.0.1",
"vite-plugin-vue-setup-extend": "0.4.0" "unplugin-vue-setup-extend-plus": "0.4.9"
} }
} }

View File

@ -6,10 +6,12 @@
: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 :icon-class="item.meta.icon" /> <svg-icon
{{ item.meta.title }}</el-menu-item v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
> :icon-class="item.meta.icon"/>
{{ item.meta.title }}
</el-menu-item>
</template> </template>
<!-- 顶部菜单超出数量折叠 --> <!-- 顶部菜单超出数量折叠 -->
@ -19,10 +21,12 @@
<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 :icon-class="item.meta.icon" /> <svg-icon
{{ item.meta.title }}</el-menu-item v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
> :icon-class="item.meta.icon"/>
{{ item.meta.title }}
</el-menu-item>
</template> </template>
</el-sub-menu> </el-sub-menu>
</el-menu> </el-menu>
@ -189,4 +193,22 @@ onMounted(() => {
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 {
background-color: #ffffff !important;
}
/* 图标右间距 */
.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> </style>

View File

@ -33,7 +33,7 @@
<router-link to="/user/profile"> <router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item> <el-dropdown-item>个人中心</el-dropdown-item>
</router-link> </router-link>
<el-dropdown-item command="setLayout"> <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
<span>布局设置</span> <span>布局设置</span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item divided command="logout"> <el-dropdown-item divided command="logout">

View File

@ -280,7 +280,7 @@ function handleScroll() {
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
margin-right: 2px; margin-right: 5px;
} }
} }
} }

View File

@ -10,7 +10,7 @@ export default {
/** /**
* 是否系统布局配置 * 是否系统布局配置
*/ */
showSettings: false, showSettings: true,
/** /**
* 是否显示顶部导航 * 是否显示顶部导航

View File

@ -10,7 +10,7 @@
</template> </template>
<div> <div>
<div class="text-center"> <div class="text-center">
<userAvatar :user="state.user" /> <userAvatar />
</div> </div>
<ul class="list-group list-group-striped"> <ul class="list-group list-group-striped">
<li class="list-group-item"> <li class="list-group-item">

View File

@ -1,5 +1,5 @@
import setupExtend from 'vite-plugin-vue-setup-extend' import setupExtend from 'unplugin-vue-setup-extend-plus/vite'
export default function createSetupExtend() { export default function createSetupExtend() {
return setupExtend() return setupExtend({})
} }

View File

@ -5,10 +5,12 @@
@select="handleSelect" @select="handleSelect"
> >
<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 :icon-class="item.meta.icon" /> <svg-icon
{{ item.meta.title }}</el-menu-item v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
> :icon-class="item.meta.icon"/>
{{ item.meta.title }}
</el-menu-item>
</template> </template>
<!-- 顶部菜单超出数量折叠 --> <!-- 顶部菜单超出数量折叠 -->
@ -18,10 +20,12 @@
<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 :icon-class="item.meta.icon" /> <svg-icon
{{ item.meta.title }}</el-menu-item v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
> :icon-class="item.meta.icon"/>
{{ item.meta.title }}
</el-menu-item>
</template> </template>
</el-submenu> </el-submenu>
</el-menu> </el-menu>

View File

@ -8,7 +8,7 @@
</div> </div>
<div> <div>
<div class="text-center"> <div class="text-center">
<userAvatar :user="user" /> <userAvatar />
</div> </div>
<ul class="list-group list-group-striped"> <ul class="list-group list-group-striped">
<li class="list-group-item"> <li class="list-group-item">

View File

@ -61,11 +61,6 @@ import { debounce } from '@/utils'
export default { export default {
components: { VueCropper }, components: { VueCropper },
props: {
user: {
type: Object
}
},
data() { data() {
return { return {
// //