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-plugin-compression": "0.5.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"
>
<template v-for="(item, index) in topMenus">
<el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item
>
<el-menu-item :style="{'--theme': theme}" :index="item.path" :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 }}
</el-menu-item>
</template>
<!-- 顶部菜单超出数量折叠 -->
@ -19,10 +21,12 @@
<el-menu-item
:index="item.path"
:key="index"
v-if="index >= visibleNumber"
><svg-icon :icon-class="item.meta.icon" />
{{ item.meta.title }}</el-menu-item
>
v-if="index >= visibleNumber">
<svg-icon
v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
:icon-class="item.meta.icon"/>
{{ item.meta.title }}
</el-menu-item>
</template>
</el-sub-menu>
</el-menu>
@ -189,4 +193,22 @@ onMounted(() => {
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 !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>

View File

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

View File

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

View File

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

View File

@ -10,7 +10,7 @@
</template>
<div>
<div class="text-center">
<userAvatar :user="state.user" />
<userAvatar />
</div>
<ul class="list-group list-group-striped">
<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() {
return setupExtend()
return setupExtend({})
}

View File

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

View File

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

View File

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