refactor: 主题配置 滑块 防遮挡界面调整

src/layout/components/Header/ToolBarRight.vue

@@ -7,6 +7,7 @@
 			<SizeSelect />
 			<Language />
 			<Message />
+			<ThemeSetting />
 		</div>
 		<Avatar />
 	</div>
@@ -20,6 +21,7 @@ import SearchMenu from './components/SearchMenu.vue'
 import Message from './components/Message.vue'
 import Avatar from './components/Avatar.vue'
 import SwitchDarkTheme from './components/SwitchDarkTheme.vue'
+import ThemeSetting from './components/ThemeSetting.vue'
 </script>
 
 <style lang="scss">

src/layout/components/Header/components/ThemeSetting.vue

@@ -0,0 +1,17 @@
+<template>
+	<el-tooltip v-if="setting.showSettings" placement="top" :content="$t('le.layout.setting.title')">
+		<div class="menu--theme-setting menu-item le-hover-effect--bg" @click="changeVisible">
+			<el-icon>
+				<Setting />
+			</el-icon>
+		</div>
+	</el-tooltip>
+</template>
+
+<script setup lang="ts">
+import useStore from '@/store'
+const { setting } = useStore()
+const changeVisible = () => {
+	setting.settingsVisible = !setting.settingsVisible
+}
+</script>

src/layout/components/Settings/index.vue

@@ -1,145 +1,146 @@
 <template>
-	<div class="drawer-wrap">
-		<h3 class="drawer-title">{{ $t('le.layout.setting.title') }}</h3>
-		<el-scrollbar class="drawer-content">
-			<el-divider class="local-divider">
-				<el-icon><SetUp /></el-icon>{{ $t('le.layout.setting.themeModeTitle') }}
-			</el-divider>
-			<div class="drawer-item">
-				<span>{{ $t('le.layout.setting.themeColor') }}</span>
-				<theme-picker @change="themeChange" />
-			</div>
-			<div class="drawer-item" @click.stop="">
-				<span>{{ $t('le.layout.setting.themeDark') }}</span>
-				<el-switch v-model="isDark" inline-prompt active-icon="Sunny" inactive-icon="Moon" @change="switchDark" />
-			</div>
-			<div class="drawer-item" @click.stop="">
-				<span>{{ $t('le.layout.setting.themeGray') }}</span>
-				<el-switch v-model="isGrey" inline-prompt @change="changeGreyOrWeak('grey', $event)" />
-			</div>
-			<div class="drawer-item" @click.stop="">
-				<span>{{ $t('le.layout.setting.themeWeak') }}</span>
-				<el-switch v-model="isWeak" inline-prompt @change="changeGreyOrWeak('weak', $event)" />
-			</div>
-			<div class="drawer-item">
-				<span>{{ $t('le.layout.setting.sideDark') }}</span>
-				<el-switch v-model="asideInverted" @change="setAsideTheme" />
-			</div>
-			<div class="drawer-item">
-				<span>{{ $t('le.layout.setting.headDark') }}</span>
-				<el-switch v-model="headerInverted" @change="setHeaderTheme" />
-			</div>
-			<div v-show="footer" class="drawer-item">
-				<span>{{ $t('le.layout.setting.footDark') }}</span>
-				<el-switch v-model="footerInverted" @change="setFooterTheme" />
-			</div>
+	<el-drawer v-model="settingsVisible" class="theme-setting-wrap" :title="$t('le.layout.setting.title')" size="280px">
+		<div class="drawer-wrap">
+			<el-scrollbar class="drawer-content">
+				<el-divider class="local-divider">
+					<el-icon><SetUp /></el-icon>{{ $t('le.layout.setting.themeModeTitle') }}
+				</el-divider>
+				<div class="drawer-item">
+					<span>{{ $t('le.layout.setting.themeColor') }}</span>
+					<theme-picker @change="themeChange" />
+				</div>
+				<div class="drawer-item" @click.stop="">
+					<span>{{ $t('le.layout.setting.themeDark') }}</span>
+					<el-switch v-model="isDark" inline-prompt active-icon="Sunny" inactive-icon="Moon" @change="switchDark" />
+				</div>
+				<div class="drawer-item" @click.stop="">
+					<span>{{ $t('le.layout.setting.themeGray') }}</span>
+					<el-switch v-model="isGrey" inline-prompt @change="changeGreyOrWeak('grey', $event)" />
+				</div>
+				<div class="drawer-item" @click.stop="">
+					<span>{{ $t('le.layout.setting.themeWeak') }}</span>
+					<el-switch v-model="isWeak" inline-prompt @change="changeGreyOrWeak('weak', $event)" />
+				</div>
+				<div class="drawer-item">
+					<span>{{ $t('le.layout.setting.sideDark') }}</span>
+					<el-switch v-model="asideInverted" @change="setAsideTheme" />
+				</div>
+				<div class="drawer-item">
+					<span>{{ $t('le.layout.setting.headDark') }}</span>
+					<el-switch v-model="headerInverted" @change="setHeaderTheme" />
+				</div>
+				<div v-show="footer" class="drawer-item">
+					<span>{{ $t('le.layout.setting.footDark') }}</span>
+					<el-switch v-model="footerInverted" @change="setFooterTheme" />
+				</div>
 
-			<el-divider class="local-divider">
-				<el-icon><Menu /></el-icon>{{ $t('le.layout.setting.layoutMode') }}
-			</el-divider>
-			<div class="layout-box">
-				<el-tooltip effect="dark" :content="$t('le.layout.setting.layoutLeftMenuMode')" placement="top" :show-after="200">
-					<div :class="['layout-item layout-left', { 'is-active': layout == 'left' }]" @click="setLayout('left')">
-						<div class="layout-light"></div>
-						<div class="layout-container">
-							<div class="layout-dark"></div>
-							<div class="layout-content"></div>
+				<el-divider class="local-divider">
+					<el-icon><Menu /></el-icon>{{ $t('le.layout.setting.layoutMode') }}
+				</el-divider>
+				<div class="layout-box">
+					<el-tooltip effect="dark" :content="$t('le.layout.setting.layoutLeftMenuMode')" placement="top" :show-after="200">
+						<div :class="['layout-item layout-left', { 'is-active': layout == 'left' }]" @click="setLayout('left')">
+							<div class="layout-light"></div>
+							<div class="layout-container">
+								<div class="layout-dark"></div>
+								<div class="layout-content"></div>
+							</div>
+							<el-icon v-if="layout == 'left'">
+								<CircleCheckFilled />
+							</el-icon>
+						</div>
+					</el-tooltip>
+					<el-tooltip effect="dark" :content="$t('le.layout.setting.layoutLeftMenuBlendingMode')" placement="top" :show-after="200">
+						<div :class="['layout-item layout-leftMix', { 'is-active': layout == 'leftMix' }]" @click="setLayout('leftMix')">
+							<div class="layout-light"></div>
+							<div class="layout-light light-2"></div>
+							<div class="layout-container">
+								<div class="layout-dark"></div>
+								<div class="layout-content"></div>
+							</div>
+							<el-icon v-if="layout == 'leftMix'">
+								<CircleCheckFilled />
+							</el-icon>
 						</div>
-						<el-icon v-if="layout == 'left'">
-							<CircleCheckFilled />
-						</el-icon>
-					</div>
-				</el-tooltip>
-				<el-tooltip effect="dark" :content="$t('le.layout.setting.layoutLeftMenuBlendingMode')" placement="top" :show-after="200">
-					<div :class="['layout-item layout-leftMix', { 'is-active': layout == 'leftMix' }]" @click="setLayout('leftMix')">
-						<div class="layout-light"></div>
-						<div class="layout-light light-2"></div>
-						<div class="layout-container">
+					</el-tooltip>
+					<el-tooltip effect="dark" :content="$t('le.layout.setting.layoutTopMenuMode')" placement="top" :show-after="200">
+						<div :class="['layout-item layout-top', { 'is-active': layout == 'top' }]" @click="setLayout('top')">
 							<div class="layout-dark"></div>
 							<div class="layout-content"></div>
+							<el-icon v-if="layout == 'top'">
+								<CircleCheckFilled />
+							</el-icon>
 						</div>
-						<el-icon v-if="layout == 'leftMix'">
-							<CircleCheckFilled />
-						</el-icon>
-					</div>
-				</el-tooltip>
-				<el-tooltip effect="dark" :content="$t('le.layout.setting.layoutTopMenuMode')" placement="top" :show-after="200">
-					<div :class="['layout-item layout-top', { 'is-active': layout == 'top' }]" @click="setLayout('top')">
-						<div class="layout-dark"></div>
-						<div class="layout-content"></div>
-						<el-icon v-if="layout == 'top'">
-							<CircleCheckFilled />
-						</el-icon>
-					</div>
-				</el-tooltip>
-				<el-tooltip effect="dark" :content="$t('le.layout.setting.layoutTopMenuBlendingMode')" placement="top" :show-after="200">
-					<div :class="['layout-item layout-topMix', { 'is-active': layout == 'topMix' }]" @click="setLayout('topMix')">
-						<div class="layout-dark"></div>
-						<div class="layout-container">
-							<div class="layout-light"></div>
-							<div class="layout-content"></div>
+					</el-tooltip>
+					<el-tooltip effect="dark" :content="$t('le.layout.setting.layoutTopMenuBlendingMode')" placement="top" :show-after="200">
+						<div :class="['layout-item layout-topMix', { 'is-active': layout == 'topMix' }]" @click="setLayout('topMix')">
+							<div class="layout-dark"></div>
+							<div class="layout-container">
+								<div class="layout-light"></div>
+								<div class="layout-content"></div>
+							</div>
+							<el-icon v-if="layout == 'topMix'">
+								<CircleCheckFilled />
+							</el-icon>
 						</div>
-						<el-icon v-if="layout == 'topMix'">
-							<CircleCheckFilled />
-						</el-icon>
-					</div>
-				</el-tooltip>
-			</div>
+					</el-tooltip>
+				</div>
 
-			<el-divider class="local-divider">
-				<el-icon><Operation /></el-icon>{{ $t('le.layout.setting.pageFunctions') }}
-			</el-divider>
-			<div class="drawer-item">
-				<span>{{ $t('le.layout.setting.footerVisible') }}</span>
-				<el-switch v-model="footer" />
-			</div>
-			<div class="drawer-item">
-				<span>{{ $t('le.layout.setting.crumbVisible') }}</span>
-				<el-switch v-model="breadcrumb" />
-			</div>
-			<div v-show="breadcrumb" class="drawer-item">
-				<span>{{ $t('le.layout.setting.crumbIconVisible') }}</span>
-				<el-switch v-model="breadcrumbIcon" />
-			</div>
+				<el-divider class="local-divider">
+					<el-icon><Operation /></el-icon>{{ $t('le.layout.setting.pageFunctions') }}
+				</el-divider>
+				<div class="drawer-item">
+					<span>{{ $t('le.layout.setting.footerVisible') }}</span>
+					<el-switch v-model="footer" />
+				</div>
+				<div class="drawer-item">
+					<span>{{ $t('le.layout.setting.crumbVisible') }}</span>
+					<el-switch v-model="breadcrumb" />
+				</div>
+				<div v-show="breadcrumb" class="drawer-item">
+					<span>{{ $t('le.layout.setting.crumbIconVisible') }}</span>
+					<el-switch v-model="breadcrumbIcon" />
+				</div>
 
-			<div class="drawer-item">
-				<span>{{ $t('le.layout.setting.tabsVisible') }}</span>
-				<el-switch v-model="tabsVisible" />
-			</div>
+				<div class="drawer-item">
+					<span>{{ $t('le.layout.setting.tabsVisible') }}</span>
+					<el-switch v-model="tabsVisible" />
+				</div>
 
-			<div v-show="tabsVisible" class="drawer-item">
-				<span>{{ $t('le.layout.setting.tabsIcon') }}</span>
-				<el-switch v-model="tabsIcon" />
-			</div>
+				<div v-show="tabsVisible" class="drawer-item">
+					<span>{{ $t('le.layout.setting.tabsIcon') }}</span>
+					<el-switch v-model="tabsIcon" />
+				</div>
 
-			<div v-show="tabsVisible" class="drawer-item">
-				<span>{{ $t('le.layout.setting.tabsMode') }}</span>
-				<el-select v-model="tabsMode" style="width: 130px">
-					<el-option v-for="v of tabsModeList" :key="v.value" :value="v.value" :label="$t(v.label)" />
-				</el-select>
-			</div>
+				<div v-show="tabsVisible" class="drawer-item">
+					<span>{{ $t('le.layout.setting.tabsMode') }}</span>
+					<el-select v-model="tabsMode" style="width: 130px">
+						<el-option v-for="v of tabsModeList" :key="v.value" :value="v.value" :label="$t(v.label)" />
+					</el-select>
+				</div>
 
-			<div class="drawer-item">
-				<span>{{ $t('le.layout.setting.pageAnimate') }}</span>
-				<el-switch v-model="animate" />
-			</div>
+				<div class="drawer-item">
+					<span>{{ $t('le.layout.setting.pageAnimate') }}</span>
+					<el-switch v-model="animate" />
+				</div>
 
-			<div class="drawer-item">
-				<span>{{ $t('le.layout.setting.pageAnimateMode') }}</span>
-				<el-select v-model="animateMode" style="width: 100px">
-					<el-option v-for="v of animateList" :key="v.value" :value="v.value" :label="$t(v.label)" />
-				</el-select>
-			</div>
+				<div class="drawer-item">
+					<span>{{ $t('le.layout.setting.pageAnimateMode') }}</span>
+					<el-select v-model="animateMode" style="width: 100px">
+						<el-option v-for="v of animateList" :key="v.value" :value="v.value" :label="$t(v.label)" />
+					</el-select>
+				</div>
 
-			<el-divider class="local-divider">
-				<el-icon><Setting /></el-icon>{{ $t('le.layout.setting.title') }}
-			</el-divider>
+				<el-divider class="local-divider">
+					<el-icon><Setting /></el-icon>{{ $t('le.layout.setting.title') }}
+				</el-divider>
 
-			<div class="drawer-item">
-				<el-button type="warning" style="width: 100%" @click="handle_resetTheme"> {{ $t('le.layout.setting.reset') }} </el-button>
-			</div>
-		</el-scrollbar>
-	</div>
+				<div class="drawer-item">
+					<el-button type="warning" style="width: 100%" @click="handle_resetTheme"> {{ $t('le.layout.setting.reset') }} </el-button>
+				</div>
+			</el-scrollbar>
+		</div>
+	</el-drawer>
 </template>
 
 <script setup lang="ts">
@@ -217,7 +218,8 @@ const {
 	tabsIcon,
 	tabsMode,
 	animate,
-	animateMode
+	animateMode,
+	settingsVisible
 } = storeToRefs(setting)
 
 function themeChange(val: any) {
@@ -238,172 +240,174 @@ const setLayout = (val: LayoutType) => {
 // )
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 $header_height: 55px;
-.drawer-wrap {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	//padding: 0 24px 16px 24px;
-	padding-bottom: 10px;
-	font-size: 14px;
-	line-height: 1.5;
-	word-wrap: break-word;
-
-	.drawer-title {
+.theme-setting-wrap {
+	.el-drawer__header {
 		padding: 16px 24px;
 		//margin: 0 -24px;
 		//padding: 16px 0;
 		height: $header_height;
 		font-size: 16px;
 		border-bottom: 1px solid var(--el-border-color-lighter);
+		margin-bottom: 0;
 	}
-
-	/*.drawer-content {
-		height: calc(100% - $header_height);
-	}*/
-
-	.local-divider {
-		margin: 24px;
-		width: auto;
-		.el-icon {
-			position: relative;
-			top: 2px;
-			right: 5px;
-		}
-		:deep(.el-divider__text) {
-			width: max-content;
-		}
+	.el-drawer__body {
+		padding: 0;
 	}
 
-	.drawer-item {
+	.drawer-wrap {
+		position: relative;
 		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		color: var(--el-text-color-primary);
+		flex-direction: column;
+		height: 100%;
+		//padding: 0 24px 16px 24px;
+		padding-bottom: 10px;
 		font-size: 14px;
-		padding: 4px 24px;
-	}
+		line-height: 1.5;
+		word-wrap: break-word;
 
-	.layout-box {
-		position: relative;
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-		//padding: 12px 6px 0;
-		padding: 4px 24px;
-		.layout-item {
-			position: relative;
-			box-sizing: border-box;
-			width: 100px;
-			height: 70px;
-			padding: 6px;
-			cursor: pointer;
-			border-radius: 5px;
-			box-shadow: 0 0 5px 1px var(--el-border-color-dark);
-			transition: all 0.2s;
-			.layout-dark {
-				background-color: var(--el-color-primary);
-				border-radius: 3px;
-			}
-			.layout-light {
-				background-color: var(--el-color-primary-light-5);
-				border-radius: 3px;
-			}
-			.layout-content {
-				background-color: var(--el-color-primary-light-8);
-				//border: 1px dashed var(--el-color-primary);
-				border: 1px solid var(--el-color-primary);
-				border-radius: 3px;
-			}
+		.local-divider {
+			margin: 24px;
+			width: auto;
 			.el-icon {
-				position: absolute;
-				right: 10px;
-				bottom: 10px;
-				color: var(--el-color-primary);
-				transition: all 0.2s;
+				position: relative;
+				top: 2px;
+				right: 5px;
 			}
-			&:hover {
-				box-shadow: 0 0 5px 1px var(--el-text-color-secondary);
+			:deep(.el-divider__text) {
+				width: max-content;
 			}
 		}
-		.is-active {
-			box-shadow: 0 0 0 2px var(--el-color-primary) !important;
+
+		.drawer-item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			color: var(--el-text-color-primary);
+			font-size: 14px;
+			padding: 4px 24px;
 		}
-		.layout-left {
+
+		.layout-box {
+			position: relative;
 			display: flex;
+			flex-wrap: wrap;
 			justify-content: space-between;
-			margin-bottom: 12px;
-			.layout-light {
-				width: 20%;
+			//padding: 12px 6px 0;
+			padding: 4px 24px;
+			.layout-item {
+				position: relative;
+				box-sizing: border-box;
+				width: 100px;
+				height: 70px;
+				padding: 6px;
+				cursor: pointer;
+				border-radius: 5px;
+				box-shadow: 0 0 5px 1px var(--el-border-color-dark);
+				transition: all 0.2s;
+				.layout-dark {
+					background-color: var(--el-color-primary);
+					border-radius: 3px;
+				}
+				.layout-light {
+					background-color: var(--el-color-primary-light-5);
+					border-radius: 3px;
+				}
+				.layout-content {
+					background-color: var(--el-color-primary-light-8);
+					//border: 1px dashed var(--el-color-primary);
+					border: 1px solid var(--el-color-primary);
+					border-radius: 3px;
+				}
+				.el-icon {
+					position: absolute;
+					right: 10px;
+					bottom: 10px;
+					color: var(--el-color-primary);
+					transition: all 0.2s;
+				}
+				&:hover {
+					box-shadow: 0 0 5px 1px var(--el-text-color-secondary);
+				}
+			}
+			.is-active {
+				box-shadow: 0 0 0 2px var(--el-color-primary) !important;
 			}
-			.layout-container {
+			.layout-left {
 				display: flex;
-				flex-direction: column;
 				justify-content: space-between;
-				width: 72%;
-				.layout-dark {
-					height: 20%;
+				margin-bottom: 12px;
+				.layout-light {
+					width: 20%;
 				}
-				.layout-content {
-					height: 67%;
+				.layout-container {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+					width: 72%;
+					.layout-dark {
+						height: 20%;
+					}
+					.layout-content {
+						height: 67%;
+					}
 				}
 			}
-		}
-		.layout-leftMix {
-			display: flex;
-			justify-content: space-between;
-			margin-bottom: 12px;
-			.layout-light {
-				width: 14%;
-				&.light-2 {
-					width: 17%;
+			.layout-leftMix {
+				display: flex;
+				justify-content: space-between;
+				margin-bottom: 12px;
+				.layout-light {
+					width: 14%;
+					&.light-2 {
+						width: 17%;
+					}
+				}
+				.layout-container {
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+					width: 55%;
+					.layout-dark {
+						height: 20%;
+					}
+					.layout-content {
+						height: 67%;
+						width: 100%;
+					}
 				}
 			}
-			.layout-container {
+			.layout-top {
 				display: flex;
 				flex-direction: column;
 				justify-content: space-between;
-				width: 55%;
+				//margin-bottom: 12px;
 				.layout-dark {
 					height: 20%;
 				}
 				.layout-content {
 					height: 67%;
-					width: 100%;
 				}
 			}
-		}
-		.layout-top {
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			//margin-bottom: 12px;
-			.layout-dark {
-				height: 20%;
-			}
-			.layout-content {
-				height: 67%;
-			}
-		}
-		.layout-topMix {
-			display: flex;
-			flex-direction: column;
-			justify-content: space-between;
-			//margin-bottom: 12px;
-			.layout-dark {
-				height: 22%;
-			}
-			.layout-container {
+			.layout-topMix {
 				display: flex;
+				flex-direction: column;
 				justify-content: space-between;
-				height: 70%;
-				.layout-light {
-					width: 20%;
+				//margin-bottom: 12px;
+				.layout-dark {
+					height: 22%;
 				}
-				.layout-content {
-					width: 70%;
+				.layout-container {
+					display: flex;
+					justify-content: space-between;
+					height: 70%;
+					.layout-light {
+						width: 20%;
+					}
+					.layout-content {
+						width: 70%;
+					}
 				}
 			}
 		}

src/layout/components/index.ts

@@ -1,3 +1,3 @@
 export { default as AppMain } from './AppMain.vue'
-export { default as Settings } from './Settings/index.vue'
+export { default as ThemeSettings } from './Settings/index.vue'
 export { default as TagsView } from './TagsView/index.vue'

src/layout/index.vue

@@ -1,28 +1,24 @@
-<!-- 💥 这里是一次性加载 LayoutComponents -->
 <template>
 	<component :is="LayoutComponents[layout]" />
-	<!--	<ThemeDrawer />-->
-	<RightPanel v-if="showSettings">
-		<Settings />
-	</RightPanel>
+	<ThemeSettings v-if="showSettings" />
 </template>
 
 <script setup lang="ts" name="layout">
 import { computed, type Component } from 'vue'
 import { LayoutType } from '@/store/interface'
 import useStore from '@/store'
-import RightPanel from '@/components/RightPanel/index.vue'
-import LayoutTop from './LayoutTop/index.vue'
-import LayoutTopMix from './LayoutTopMix/index.vue'
+// import RightPanel from '@/components/RightPanel/index.vue'
 import LayoutLeft from './LayoutLeft/index.vue'
 import LayoutLeftMix from './LayoutLeftMix/index.vue'
-import { Settings } from '@/layout/components'
+import LayoutTop from './LayoutTop/index.vue'
+import LayoutTopMix from './LayoutTopMix/index.vue'
+import { ThemeSettings } from '@/layout/components'
 
 const LayoutComponents: Record<LayoutType, Component> = {
-	topMix: LayoutTopMix,
-	top: LayoutTop,
 	left: LayoutLeft,
-	leftMix: LayoutLeftMix
+	leftMix: LayoutLeftMix,
+	topMix: LayoutTopMix,
+	top: LayoutTop
 }
 const { setting } = useStore()
 const layout = computed(() => setting.layout)

src/settings.ts

@@ -1,7 +1,10 @@
 import { SettingState } from '@/types'
 import { name } from '@/../package.json'
 export const defaultSettingState: SettingState = {
+	// 开启主题设置
 	showSettings: true,
+	// 主题配置Visible
+	settingsVisible: false,
 	/** 主题模式 */
 	// 主题颜色
 	themeColor: '#409eff',
@@ -41,10 +44,6 @@ export const defaultSettingState: SettingState = {
 	tabsMode: 'rectangle',
 	// 页面内容全屏
 	contentMaximize: false,
-	/*// todo???
-	fixedHeader: true,
-	// 是否显示Logo
-	sidebarLogo: true,*/
 	// 手风琴
 	accordion: true
 }

src/store/modules/settings.ts

@@ -37,7 +37,10 @@ export const useSettingStore = defineStore({
 			}
 		}
 	},
-	persist: true
+	// persist: true
+	persist: {
+		paths: Object.keys(defaultSettings).filter(key => key !== 'settingsVisible')
+	}
 })
 
 export default useSettingStore

src/types/store.d.ts

@@ -25,8 +25,10 @@ export interface PermissionState {
  * 设置状态类型声明
  */
 export interface SettingState {
-	// 展示设置
+	// 开启主题设置
 	showSettings: boolean
+	// 主题配置Visible
+	settingsVisible: boolean
 	// 展示底部
 	footer: boolean
 	// 折叠菜单
@@ -55,10 +57,6 @@ export interface SettingState {
 	tabsMode: string
 	// 页面内容全屏
 	contentMaximize: boolean
-	// // 固定 Header
-	// fixedHeader: boolean
-	// // 侧边栏 Logo
-	// sidebarLogo: boolean
 	// 手风琴
 	accordion: boolean
 	// 面包屑