feat: 🚀 新增界面配置功能

HalseySpicy · Jul 12, 2022 · 39ffc5e · 39ffc5e · vercel · Jul 12, 2022
1 parent eadb89b
commit 39ffc5e
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 38 deletions.
diff --git a/src/layout/Header/components/Theme.vue b/src/layout/Header/components/Theme.vue
@@ -4,12 +4,12 @@
 			<i :class="'iconfont icon-zhuti'" class="icon-style" @click="openDrawer"></i>
 		</el-tooltip>
 		<el-drawer v-model="drawerVisible" title="布局设置" size="300px">
-			<el-divider class="divider">
+			<el-divider class="divider" content-position="center">
 				<el-icon><ColdDrink /></el-icon>
 				全局主题
 			</el-divider>
 			<div class="theme-item">
-				<span>primary</span>
+				<span>主题颜色</span>
 				<el-color-picker v-model="themeConfig.primary" :predefine="colorList" @change="changePrimary"> </el-color-picker>
 			</div>
 			<div class="theme-item">
@@ -24,6 +24,27 @@
 				<span>色弱模式</span>
 				<el-switch v-model="themeConfig.isWeak" @change="changeGreyOrWeak($event, 'weak')" />
 			</div>
+			<br />
+			<el-divider class="divider" content-position="center">
+				<el-icon><Setting /></el-icon>
+				界面设置
+			</el-divider>
+			<div class="theme-item">
+				<span>折叠菜单</span>
+				<el-switch v-model="isCollapse" />
+			</div>
+			<div class="theme-item">
+				<span>面包屑导航</span>
+				<el-switch v-model="themeConfig.breadcrumb" />
+			</div>
+			<div class="theme-item">
+				<span>标签栏</span>
+				<el-switch v-model="themeConfig.tabs" />
+			</div>
+			<div class="theme-item">
+				<span>页脚</span>
+				<el-switch v-model="themeConfig.footer" />
+			</div>
 		</el-drawer>
 	</div>
 </template>
@@ -32,12 +53,26 @@
 import { ref, computed } from "vue";
 import { useTheme } from "@/hooks/useTheme";
 import SwitchDark from "@/components/SwitchDark/index.vue";
+import { MenuStore } from "@/store/modules/menu";
 import { GlobalStore } from "@/store";
+
 // 预定义主题颜色
 const colorList = ["#409EFF", "#DAA96E", "#0C819F", "#009688", "#27ae60", "#ff5c93", "#e74c3c", "#fd726d", "#f39c12", "#9b59b6"];
+
 // 主题初始化
 const globalStore = GlobalStore();
 const themeConfig = computed(() => globalStore.themeConfig);
+
+const menuStore = MenuStore();
+const isCollapse = computed({
+	get() {
+		return menuStore.isCollapse;
+	},
+	set() {
+		menuStore.setCollapse();
+	}
+});
+
 const { changePrimary, changeGreyOrWeak } = useTheme();
 
 // 打开主题设置

diff --git a/src/layout/Header/index.vue b/src/layout/Header/index.vue
@@ -2,7 +2,7 @@
 	<div class="header">
 		<div class="header-lf flx-center">
 			<CollapseIcon></CollapseIcon>
-			<Breadcrumb></Breadcrumb>
+			<Breadcrumb v-if="themeConfig.breadcrumb"></Breadcrumb>
 		</div>
 		<div class="header-ri flx-center">
 			<!-- Assembly size -->
@@ -24,6 +24,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import CollapseIcon from "./components/CollapseIcon.vue";
 import Breadcrumb from "./components/Breadcrumb.vue";
 import SearchMenu from "./components/SearchMenu.vue";
@@ -32,6 +33,10 @@ import Language from "./components/Language.vue";
 import AssemblySize from "./components/AssemblySize.vue";
 import Theme from "./components/Theme.vue";
 import Avatar from "./components/Avatar.vue";
+import { GlobalStore } from "@/store";
+
+const globalStore = GlobalStore();
+const themeConfig = computed(() => globalStore.themeConfig);
 </script>
 
 <style scoped lang="scss">

diff --git a/src/layout/Menu/components/SubItem.vue b/src/layout/Menu/components/SubItem.vue
@@ -17,7 +17,7 @@
 				<span>{{ subItem.title }}</span>
 			</template>
 			<template v-else #title>
-				<a class="href" :href="subItem.isLink" target="_blank">{{ subItem.title }}</a>
+				<a class="menu-href" :href="subItem.isLink" target="_blank">{{ subItem.title }}</a>
 			</template>
 		</el-menu-item>
 	</template>

diff --git a/src/layout/Menu/index.scss b/src/layout/Menu/index.scss
@@ -29,37 +29,14 @@
 			overflow: auto;
 			overflow-x: hidden;
 			border-right: none;
-			.el-menu-item {
-				&.is-active {
-					background-color: #060708 !important;
-				}
-				&.is-active::before {
-					position: absolute;
-					top: 0;
-					bottom: 0;
-					left: 0;
-					width: 4px;
-					content: "";
-					background: $primary-color;
-				}
-			}
 		}
 	}
 }
+.el-menu,
 .el-menu--popup {
 	.el-menu-item {
-		background-color: #191a20;
-		i {
-			margin-right: 5px;
-		}
-		&:hover {
-			i,
-			span {
-				color: #ffffff !important;
-			}
-		}
 		&.is-active {
-			background-color: #060708 !important;
+			background-color: #060708;
 			&::before {
 				position: absolute;
 				top: 0;
@@ -69,14 +46,10 @@
 				content: "";
 				background: $primary-color;
 			}
-			i,
-			span {
-				color: #ffffff !important;
-			}
 		}
 	}
 }
-.href {
+.menu-href {
 	display: inline-block;
 	width: 100%;
 	height: 100%;

diff --git a/src/layout/index.scss b/src/layout/index.scss
@@ -6,7 +6,6 @@
 	.el-aside {
 		width: auto;
 		overflow: inherit;
-		background-color: #191a20;
 	}
 	.el-header,
 	.el-footer {

diff --git a/src/layout/index.vue b/src/layout/index.vue
@@ -6,7 +6,7 @@
 		<el-container>
 			<el-header>
 				<Header></Header>
-				<Tabs></Tabs>
+				<Tabs v-if="themeConfig.tabs"></Tabs>
 			</el-header>
 			<el-main>
 				<section class="main-box">
@@ -19,14 +19,15 @@
 					</router-view>
 				</section>
 			</el-main>
-			<el-footer>
+			<el-footer v-if="themeConfig.footer">
 				<Footer></Footer>
 			</el-footer>
 		</el-container>
 	</el-container>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import Menu from "./Menu/index.vue";
 import Header from "./Header/index.vue";
 import Tabs from "./Tabs/index.vue";
@@ -35,8 +36,11 @@ import cacheRouter from "@/routers/cacheRouter";
 import { onMounted } from "vue";
 import { getAuthButtons } from "@/api/modules/login";
 import { AuthStore } from "@/store/modules/auth";
+import { GlobalStore } from "@/store";
 
 const authStore = AuthStore();
+const globalStore = GlobalStore();
+const themeConfig = computed(() => globalStore.themeConfig);
 
 onMounted(async () => {
 	// 获取按钮权限列表

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -27,7 +27,13 @@ export const GlobalStore = defineStore({
 			// 灰色模式
 			isGrey: false,
 			// 色弱模式
-			isWeak: false
+			isWeak: false,
+			// 面包屑导航
+			breadcrumb: true,
+			// 标签页
+			tabs: true,
+			// 页脚
+			footer: true
 		}
 	}),
 	getters: {},

diff --git a/src/store/interface/index.ts b/src/store/interface/index.ts
@@ -4,6 +4,9 @@ export interface ThemeConfigProp {
 	isDark: boolean;
 	isGrey: boolean;
 	isWeak: boolean;
+	breadcrumb: boolean;
+	tabs: boolean;
+	footer: boolean;
 }
 
 /* GlobalState */