From d024f448b00bcdb574a273af040d151f97ee158a Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Tue, 6 Jul 2021 18:53:50 +0800
Subject: [PATCH] =?UTF-8?q?ADD=20=E5=B8=83=E5=B1=80=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=BB=8F=E5=85=B8=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/index.js               |  2 +-
 src/layout/components/setting.vue |  1 +
 src/layout/index.vue              | 75 +++++++++++++++++++++++++------
 3 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/src/config/index.js b/src/config/index.js
index bcceb8c4..3239f242 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -11,7 +11,7 @@ const DEFAULT_CONFIG = {
 	//MOCK接口地址
 	MOCK_URL: "https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api",
 
-	//布局 默认：default | 通栏：header
+	//布局 默认：default | 通栏：header | 经典：menu
 	LAYOUT: 'default',
 
 	//菜单是否折叠
diff --git a/src/layout/components/setting.vue b/src/layout/components/setting.vue
index 9403ec0d..d6599d1f 100644
--- a/src/layout/components/setting.vue
+++ b/src/layout/components/setting.vue
@@ -6,6 +6,7 @@
 			<el-select v-model="layout" placeholder="请选择">
 				<el-option label="默认" value="default"></el-option>
 				<el-option label="通栏" value="header"></el-option>
+				<el-option label="经典" value="menu"></el-option>
 			</el-select>
 		</el-form-item>
 		<el-form-item label="折叠菜单">
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 2b8ad841..c2773535 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -4,7 +4,7 @@
 		<header class="adminui-header">
 			<div class="adminui-header-left">
 				<div class="logo-bar">
-					<img class="logo" :alt="appName" src="img/logo.png">
+					<img class="logo" src="img/logo.png">
 					<span>{{ $CONFIG.APP_NAME }}</span>
 				</div>
 				<ul v-if="!ismobile" class="nav">
@@ -24,9 +24,46 @@
 					<h2>{{ pmenu.meta.title }}</h2>
 				</div>
 				<div class="adminui-side-scroll">
-					<el-menu :default-active="$route.meta.active || $route.fullPath" router :collapse="menuIsCollapse">
-						<NavMenu :navMenus="nextMenu"></NavMenu>
-					</el-menu>
+					<el-scrollbar>
+						<el-menu :default-active="$route.meta.active || $route.fullPath" router :collapse="menuIsCollapse">
+							<NavMenu :navMenus="nextMenu"></NavMenu>
+						</el-menu>
+					</el-scrollbar>
+				</div>
+			</div>
+			<Side-m v-if="ismobile"></Side-m>
+			<div class="aminui-body el-container">
+				<Topbar v-if="!ismobile"></Topbar>
+				<Tags v-if="!ismobile && layoutTags"></Tags>
+				<div class="adminui-main" id="adminui-main">
+					<router-view></router-view>
+					<iframe-view></iframe-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<!-- 经典布局 -->
+	<template v-else-if="layout=='menu'">
+		<header class="adminui-header">
+			<div class="adminui-header-left">
+				<div class="logo-bar">
+					<img class="logo" src="img/logo.png">
+					<span>{{ $CONFIG.APP_NAME }}</span>
+				</div>
+			</div>
+			<div class="adminui-header-right">
+				<userbar></userbar>
+			</div>
+		</header>
+		<section class="aminui-wrapper">
+			<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
+				<div class="adminui-side-scroll">
+					<el-scrollbar>
+						<el-menu :default-active="$route.meta.active || $route.fullPath" router :collapse="menuIsCollapse">
+							<NavMenu :navMenus="menu"></NavMenu>
+						</el-menu>
+					</el-scrollbar>
 				</div>
 			</div>
 			<Side-m v-if="ismobile"></Side-m>
@@ -46,13 +83,15 @@
 		<section class="aminui-wrapper">
 			<div v-if="!ismobile" class="aminui-side-split">
 				<div class="adminui-side-split-scroll">
-					<ul>
-						<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''"
-							@click="showMenu(item)">
-							<i :class="item.meta.icon || 'el-icon-menu'"></i>
-							<p>{{ item.meta.title }}</p>
-						</li>
-					</ul>
+					<el-scrollbar>
+						<ul>
+							<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''"
+								@click="showMenu(item)">
+								<i :class="item.meta.icon || 'el-icon-menu'"></i>
+								<p>{{ item.meta.title }}</p>
+							</li>
+						</ul>
+					</el-scrollbar>
 				</div>
 			</div>
 			<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
@@ -60,9 +99,11 @@
 					<h2>{{ pmenu.meta.title }}</h2>
 				</div>
 				<div class="adminui-side-scroll">
-					<el-menu :default-active="$route.meta.active || $route.fullPath" router :collapse="menuIsCollapse">
-						<NavMenu :navMenus="nextMenu"></NavMenu>
-					</el-menu>
+					<el-scrollbar>
+						<el-menu :default-active="$route.meta.active || $route.fullPath" router :collapse="menuIsCollapse">
+							<NavMenu :navMenus="nextMenu"></NavMenu>
+						</el-menu>
+					</el-scrollbar>
 				</div>
 			</div>
 			<Side-m v-if="ismobile"></Side-m>
@@ -140,6 +181,12 @@
 		watch: {
 			$route() {
 				this.showThis()
+			},
+			layout: {
+				handler(val){
+					document.body.setAttribute('data-layout', val)
+				},
+				immediate: true,
 			}
 		},
 		methods: {