sgd.git - Gitblit

			@@ -4,6 +4,27 @@
			<div>
			<div class="setting-drawer-content">
			<div class="setting-drawer-title">
			<h3 class="drawer-title">菜单导航设置</h3>
			</div>
			<div class="nav-wrap">
			<el-tooltip content="左侧菜单" placement="bottom">
			<div class="item left" @click="handleNavType(1)" :style="{'--theme': theme}" :class="{ activeItem: navType == 1 }">
			<b></b><b></b>
			</div>
			</el-tooltip>

			<el-tooltip content="混合菜单" placement="bottom">
			<div class="item mix" @click="handleNavType(2)" :style="{'--theme': theme}" :class="{ activeItem: navType == 2 }">
			<b></b><b></b>
			</div>
			</el-tooltip>
			<el-tooltip content="顶部菜单" placement="bottom">
			<div class="item top" @click="handleNavType(3)" :style="{'--theme': theme}" :class="{ activeItem: navType == 3 }">
			<b></b><b></b>
			</div>
			</el-tooltip>
			</div>
			<div class="setting-drawer-title">
			<h3 class="drawer-title">主题风格设置</h3>
			</div>
			<div class="setting-drawer-block-checbox">
			@@ -38,11 +59,6 @@
			<el-divider/>

			<h3 class="drawer-title">系统布局配置</h3>

			<div class="drawer-item">
			<span>开启 TopNav</span>
			<el-switch v-model="topNav" class="drawer-switch" />
			</div>

			<div class="drawer-item">
			<span>开启 Tags-Views</span>
			@@ -93,6 +109,7 @@
			return {
			theme: this.$store.state.settings.theme,
			sideTheme: this.$store.state.settings.sideTheme,
			navType: this.$store.state.settings.navType,
			showSettings: false
			}
			},
			@@ -106,21 +123,6 @@
			key: 'fixedHeader',
			value: val
			})
			}
			},
			topNav: {
			get() {
			return this.$store.state.settings.topNav
			},
			set(val) {
			this.$store.dispatch('settings/changeSetting', {
			key: 'topNav',
			value: val
			})
			if (!val) {
			this.$store.dispatch('app/toggleSideBarHide', false)
			this.$store.commit("SET_SIDEBAR_ROUTERS", this.$store.state.permission.defaultRoutes)
			}
			}
			},
			tagsView: {
			@@ -180,6 +182,25 @@
			}
			}
			},
			watch: {
			navType: {
			handler(val) {
			if (val == 1) {
			this.$store.dispatch("app/toggleSideBarHide", false)
			}
			if (val == 2) {
			}
			if (val == 3) {
			this.$store.dispatch("app/toggleSideBarHide", true)
			}
			if ([1, 3].includes(val)) {
			this.$store.commit("SET_SIDEBAR_ROUTERS",this.$store.state.permission.defaultRoutes)
			}
			},
			immediate: true,
			deep: true
			}
			},
			methods: {
			themeChange(val) {
			this.$store.dispatch('settings/changeSetting', {
			@@ -195,6 +216,13 @@
			})
			this.sideTheme = val
			},
			handleNavType(val) {
			this.$store.dispatch('settings/changeSetting', {
			key: 'navType',
			value: val
			})
			this.navType = val
			},
			openSetting() {
			this.showSettings = true
			},
			@@ -206,7 +234,7 @@
			this.$cache.local.set(
			"layout-setting",
			`{
			"topNav":${this.topNav},
			"navType":${this.navType},
			"tagsView":${this.tagsView},
			"tagsIcon":${this.tagsIcon},
			"fixedHeader":${this.fixedHeader},
			@@ -295,4 +323,67 @@
			float: right
			}
			}

			// 导航模式
			.nav-wrap {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 10px;
			margin-bottom: 20px;

			.activeItem {
			border: 2px solid #{'var(--theme)'} !important;
			}

			.item {
			position: relative;
			margin-right: 16px;
			cursor: pointer;
			width: 56px;
			height: 48px;
			border-radius: 4px;
			background: #f0f2f5;
			border: 2px solid transparent;
			}

			.left {
			b:first-child {
			display: block;
			height: 30%;
			background: #fff;
			}
			b:last-child {
			width: 30%;
			background: #1b2a47;
			position: absolute;
			height: 100%;
			top: 0;
			border-radius: 4px 0 0 4px;
			}
			}
			.mix {
			b:first-child {
			border-radius: 4px 4px 0 0;
			display: block;
			height: 30%;
			background: #1b2a47;
			}
			b:last-child {
			width: 30%;
			background: #1b2a47;
			position: absolute;
			height: 70%;
			border-radius: 0 0 0 4px;
			}
			}
			.top {
			b:first-child {
			display: block;
			height: 30%;
			background: #1b2a47;
			border-radius: 4px 4px 0 0;
			}
			}
			}
			</style>