设置添加面包屑,logo配置

This commit is contained in:
xinjie 2022-11-15 14:23:03 +08:00
parent 1ab009544f
commit 8055572f19
4 changed files with 45 additions and 5 deletions

View File

@ -1,4 +1,6 @@
const defaultSetting = {
showCrumb: true, // 是否显示面包屑
showLogo: true, // 是否显示logo
isUniqueOpened: false, //只展开一个一级菜单
sideWidth: 200, //侧边栏宽度
sideTheme: 'light', //侧边栏主题

View File

@ -8,7 +8,7 @@
<div class="navbar-item">
<refresh />
</div>
<div class="flex items-center px-2" v-if="!isMobile">
<div class="flex items-center px-2" v-if="!isMobile && settingStore.showCrumb">
<breadcrumb />
</div>
</div>

View File

@ -57,9 +57,23 @@
/>
</div>
</div>
<div class="setting-item mb-5">
<div class="text-tx-secondary mb-4">菜单栏宽度</div>
<div><el-input-number v-model="sideWidth" :min="180" :max="250" /></div>
<div class="setting-item mb-5 flex justify-between items-center">
<div class="text-tx-secondary flex-none mr-3">菜单栏宽度</div>
<div>
<el-input-number v-model="sideWidth" :min="180" :max="250" />
</div>
</div>
<div class="setting-item mb-5 flex justify-between items-center">
<div class="text-tx-secondary flex-none mr-3">显示LOGO</div>
<div>
<el-switch v-model="showLogo" :active-value="true" :inactive-value="false" />
</div>
</div>
<div class="setting-item mb-5 flex justify-between items-center">
<div class="text-tx-secondary flex-none mr-3">显示面包屑</div>
<div>
<el-switch v-model="showCrumb" :active-value="true" :inactive-value="false" />
</div>
</div>
<div class="setting-item mb-5 flex justify-between items-center">
<el-button @click="resetTheme">重置主题</el-button>
@ -158,6 +172,30 @@ const theme = computed({
}
})
const showLogo = computed({
get() {
return settingStore.showLogo
},
set(value) {
settingStore.setSetting({
key: 'showLogo',
value
})
}
})
const showCrumb = computed({
get() {
return settingStore.showCrumb
},
set(value) {
settingStore.setSetting({
key: 'showCrumb',
value
})
}
})
const isDark = useDark()
const themeChange = () => {
settingStore.setTheme(isDark.value)

View File

@ -1,6 +1,6 @@
<template>
<div class="side" :style="sideStyle">
<side-logo :show-title="!isCollapsed" :theme="sideTheme" />
<side-logo v-if="settingStore.showLogo" :show-title="!isCollapsed" :theme="sideTheme" />
<side-menu
:routes="routes"
:isCollapsed="isCollapsed"