From 03fe176d3d9c4f7d1b1c3fae33cc1642c29c46fc Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Sun, 30 May 2021 22:12:09 +0800
Subject: [PATCH] UP 1.1.2

---
 package.json                      |   2 +-
 src/config/index.js               |   8 +-
 src/layout/components/NavMenu.vue |   6 +-
 src/layout/components/head.vue    | 128 --------------
 src/layout/components/setting.vue |  45 +++++
 src/layout/components/side.vue    |  90 ----------
 src/layout/components/topbar.vue  |  42 +++++
 src/layout/components/userbar.vue | 121 ++++++++++++++
 src/layout/index.vue              | 165 ++++++++++++++++--
 src/main.js                       |   2 +-
 src/router/index.js               |   7 +-
 src/store/modules/global.js       |  20 ++-
 src/style/app.less                |  50 +++---
 src/views/home/components/C2.vue  |  10 ++
 src/views/template/itemList.vue   |  76 ---------
 src/views/template/list.vue       | 269 ------------------------------
 src/views/template/show.vue       |  35 ----
 src/views/template/sideList.vue   | 127 --------------
 18 files changed, 434 insertions(+), 769 deletions(-)
 delete mode 100644 src/layout/components/head.vue
 create mode 100644 src/layout/components/setting.vue
 delete mode 100644 src/layout/components/side.vue
 create mode 100644 src/layout/components/topbar.vue
 create mode 100644 src/layout/components/userbar.vue
 delete mode 100644 src/views/template/itemList.vue
 delete mode 100644 src/views/template/list.vue
 delete mode 100644 src/views/template/show.vue
 delete mode 100644 src/views/template/sideList.vue

diff --git a/package.json b/package.json
index 75e81bb0..933c51ec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "SCUI-Admin",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"private": true,
 	"scripts": {
 		"serve": "vue-cli-service serve",
diff --git a/src/config/index.js b/src/config/index.js
index 4dc37434..a65d1220 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -3,7 +3,7 @@ const DEFAULT_CONFIG = {
 	APP_NAME: "SCUI",
 
 	//版本号
-	APP_VER: "1.1.1",
+	APP_VER: "1.1.2",
 
 	//接口地址
 	API_URL: "",
@@ -11,6 +11,12 @@ const DEFAULT_CONFIG = {
 	//MOCK接口地址
 	MOCK_URL: "https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api",
 
+	//布局 默认：default | 通栏：header
+	LAYOUT: 'default',
+
+	//菜单是否折叠
+	MENU_IS_COLLAPSE: false,
+
 	//是否开启多标签
 	LAYOUT_TAGS: true,
 
diff --git a/src/layout/components/NavMenu.vue b/src/layout/components/NavMenu.vue
index dd91dc5c..d30e97f8 100644
--- a/src/layout/components/NavMenu.vue
+++ b/src/layout/components/NavMenu.vue
@@ -6,12 +6,14 @@
 		<el-menu-item v-if="!navMenu.children" :index="navMenu.path">
 			<a v-if="navMenu.meta&&navMenu.meta.type=='link'" :href="navMenu.path" target="_blank" @click.stop='a'></a>
 			<i v-if="navMenu.meta&&navMenu.meta.icon" :class="navMenu.meta.icon || 'el-icon-menu'"></i>
-			<span>{{navMenu.meta.title}}</span>
+			<template #title>
+				<span>{{navMenu.meta.title}}</span>
+			</template>
 		</el-menu-item>
 		<el-submenu v-if="navMenu.children" :index="navMenu.path">
 			<template #title>
 				<i v-if="navMenu.meta&&navMenu.meta.icon" :class="navMenu.meta.icon || 'el-icon-menu'"></i>
-				<span> {{navMenu.meta.title}}</span>
+				<span>{{navMenu.meta.title}}</span>
 			</template>
 			<NavMenu :navMenus="navMenu.children"></NavMenu>
 		</el-submenu>
diff --git a/src/layout/components/head.vue b/src/layout/components/head.vue
deleted file mode 100644
index f043bcd1..00000000
--- a/src/layout/components/head.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-	<div class="adminui-header">
-		<div class="left-panel">
-			<el-breadcrumb separator-class="el-icon-arrow-right" class="hidden-sm-and-down">
-				<template v-for="(item) in breadList" v-bind:key="item" >
-					<el-breadcrumb-item v-if="item.path !='/'"><i v-if="item.meta&&item.meta.icon" :class="item.meta.icon || 'el-icon-menu'"></i>{{item.meta.title}}</el-breadcrumb-item>
-				</template>
-			</el-breadcrumb>
-		</div>
-		<div class="center-panel">
-
-		</div>
-		<div class="right-panel">
-			<div class="screen panel-item hidden-sm-and-down" @click="screen">
-				<i class="el-icon-full-screen"></i>
-			</div>
-			<div class="setting panel-item hidden-sm-and-down">
-				<i class="el-icon-setting"></i>
-			</div>
-			<el-popover placement="bottom" :width="360" trigger="click">
-				<template #reference>
-					<div class="msg panel-item">
-						<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
-							<i class="el-icon-bell"></i>
-						</el-badge>
-					</div>
-				</template>
-				<div>
-					<el-empty v-if="msgList.length==0" description="暂无新消息"></el-empty>
-					<div v-else class="msgList">
-						<header>
-							<label>通知</label>
-							<el-link :underline="false" href="javascript:void(0);" @click="markRead">全部标记已读</el-link>
-						</header>
-						<ul>
-							<el-scrollbar>
-								<li v-for="item in msgList" v-bind:key="item.id">
-									<a :href="item.link" target="_blank">
-										<h2>{{item.title}}</h2>
-										<p>{{item.describe}}</p>
-									</a>
-								</li>
-							</el-scrollbar>
-						</ul>
-						<footer><el-link :underline="false" href="https://gitee.com/lolicode/scui" target="_blank">前往通知中心</el-link></footer>
-					</div>
-				</div>
-			</el-popover>
-			<el-dropdown trigger="click" @command="handleUser">
-				<div class="user panel-item">
-					<el-avatar :size="30">{{ userNameF }}</el-avatar>
-					<label>{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i></label>
-				</div>
-				<template #dropdown>
-					<el-dropdown-menu>
-						<el-dropdown-item command="uc">个人设置</el-dropdown-item>
-						<el-dropdown-item command="cmd">CMD</el-dropdown-item>
-						<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
-					</el-dropdown-menu>
-				</template>
-			</el-dropdown>
-		</div>
-	</div>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				breadList: [],
-				userName: "",
-				userNameF: "",
-				msgList: [
-					{
-						id: 1,
-						title: "关于版本发布的通知",
-						describe: "点进去Gitee获取最新开源版本",
-						link: "https://gitee.com/lolicode/scui"
-					},
-					{
-						id: 2,
-						title: "感谢登录SCUI Admin",
-						describe: "Vue 3.0 + Vue-Router 4.0 + ElementPlus + Axios 后台管理系统。",
-						link: "https://gitee.com/lolicode/scui"
-					}
-				]
-			}
-		},
-		created() {
-			var userInfo = this.$TOOL.data.get("user").userInfo;
-			this.userName = userInfo.userName;
-			this.userNameF = this.userName.substring(0,1);
-			this.getBreadcrumb();
-		},
-		watch: {
-			$route() {
-				this.getBreadcrumb();
-			}
-		},
-		methods: {
-			//个人信息
-			handleUser(command) {
-				if(command == "uc"){
-					this.$router.push({path: '/usercenter'});
-				}
-				if(command == "outLogin"){
-					this.$router.replace({path: '/login'});
-				}
-				if(command == "cmd"){
-					this.$router.push({path: '/cmd'});
-				}
-			},
-			getBreadcrumb(){
-				let matched = this.$route.matched;
-				this.breadList = matched;
-			},
-			//全屏
-			screen(){
-				var element = document.documentElement;
-				this.$TOOL.screen(element)
-			},
-			//标记已读
-			markRead(){
-				this.msgList = []
-			}
-		}
-	}
-</script>
diff --git a/src/layout/components/setting.vue b/src/layout/components/setting.vue
new file mode 100644
index 00000000..9403ec0d
--- /dev/null
+++ b/src/layout/components/setting.vue
@@ -0,0 +1,45 @@
+<template>
+	<el-form ref="form" label-width="120px" label-position="left" style="padding:0 20px;">
+		<el-alert title="以下配置可实时预览，开发者可在 config/index.js 中配置默认值，非常不建议在生产环境下开放布局设置" type="error" :closable="false"></el-alert>
+		<el-divider></el-divider>
+		<el-form-item label="框架布局">
+			<el-select v-model="layout" placeholder="请选择">
+				<el-option label="默认" value="default"></el-option>
+				<el-option label="通栏" value="header"></el-option>
+			</el-select>
+		</el-form-item>
+		<el-form-item label="折叠菜单">
+			<el-switch v-model="menuIsCollapse"></el-switch>
+		</el-form-item>
+		<el-form-item label="标签栏">
+			<el-switch v-model="layoutTags"></el-switch>
+		</el-form-item>
+		<el-divider></el-divider>
+	</el-form>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				layout: this.$store.state.global.layout,
+				menuIsCollapse: this.$store.state.global.menuIsCollapse,
+				layoutTags: this.$store.state.global.layoutTags,
+			}
+		},
+		watch: {
+			layout(val) {
+				this.$store.commit("SET_layout", val)
+			},
+			menuIsCollapse(){
+				this.$store.commit("TOGGLE_menuIsCollapse")
+			},
+			layoutTags(){
+				this.$store.commit("TOGGLE_layoutTags")
+			}
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/layout/components/side.vue b/src/layout/components/side.vue
deleted file mode 100644
index 1f3d8d55..00000000
--- a/src/layout/components/side.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-	<div class="aminui-side-split">
-		<div class="adminui-side-split-scroll">
-			<ul>
-				<li v-for="item in menu" v-bind: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>
-		</div>
-	</div>
-
-	<div class="aminui-side">
-		<div class="adminui-side-top">
-			<h2>{{ pmenu.meta.title }}</h2>
-		</div>
-		<div class="adminui-side-scroll">
-			<el-menu :default-active="$route.fullPath" router>
-				<NavMenu :navMenus="nextMenu"></NavMenu>
-			</el-menu>
-		</div>
-	</div>
-
-</template>
-
-<script>
-	import NavMenu from './NavMenu.vue';
-
-	export default {
-		components: {
-			NavMenu
-		},
-		data() {
-			return {
-				menu: [],
-				nextMenu: [],
-				pmenu: {}
-			}
-		},
-		created: function() {
-			var menu = this.$TOOL.data.get("user").menuList;
-			var home = this.$router.options.routes[0].children[0];
-			menu.unshift(home);
-			this.menu = this.filterUrl(menu);
-			this.showThis()
-		},
-		setup() {
-
-		},
-		watch: {
-			$route() {
-				this.showThis()
-			}
-		},
-		methods: {
-			//路由监听高亮
-			showThis(){
-				var home = this.$router.options.routes[0].children[0];
-				this.pmenu = this.$route.matched[1] || home;
-				this.nextMenu = this.filterUrl(this.pmenu.children);
-			},
-			//点击显示
-			showMenu(route) {
-				this.pmenu = route;
-				this.nextMenu = this.filterUrl(route.children);
-			},
-			//转换外部链接的路由
-			filterUrl(map){
-				var newMap = []
-				map && map.forEach(item => {
-					item.meta = item.meta?item.meta:{};
-					//处理隐藏
-					if(item.meta.hidden){
-						return false
-					}
-					//处理http
-					if(item.meta.type=='iframe'){
-						item.path = `/i/${item.name}`;
-					}
-					//递归循环
-					if(item.children&&item.children.length > 0){
-						this.filterUrl(item.children);
-					}
-					newMap.push(item)
-				})
-				return newMap;
-			}
-		}
-	}
-</script>
diff --git a/src/layout/components/topbar.vue b/src/layout/components/topbar.vue
new file mode 100644
index 00000000..9a2c0f7e
--- /dev/null
+++ b/src/layout/components/topbar.vue
@@ -0,0 +1,42 @@
+<template>
+	<div class="adminui-topbar">
+		<div class="left-panel">
+			<div class="menu-collapse hidden-sm-and-down" @click="$store.commit('TOGGLE_menuIsCollapse')">
+				<i class="el-icon-s-fold"></i>
+			</div>
+			<el-breadcrumb separator-class="el-icon-arrow-right" class="hidden-sm-and-down">
+				<template v-for="(item) in breadList" v-bind:key="item" >
+					<el-breadcrumb-item v-if="item.path !='/'">{{item.meta.title}}</el-breadcrumb-item>
+				</template>
+			</el-breadcrumb>
+		</div>
+		<div class="center-panel"></div>
+		<div class="right-panel">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				breadList: []
+			}
+		},
+		created() {
+			this.getBreadcrumb();
+		},
+		watch: {
+			$route() {
+				this.getBreadcrumb();
+			}
+		},
+		methods: {
+			getBreadcrumb(){
+				let matched = this.$route.matched;
+				this.breadList = matched;
+			}
+		}
+	}
+</script>
diff --git a/src/layout/components/userbar.vue b/src/layout/components/userbar.vue
new file mode 100644
index 00000000..3d77b626
--- /dev/null
+++ b/src/layout/components/userbar.vue
@@ -0,0 +1,121 @@
+<template>
+	<div class="user-bar">
+		<div class="screen panel-item hidden-sm-and-down" @click="screen">
+			<i class="el-icon-full-screen"></i>
+		</div>
+		<el-popover placement="bottom" :width="360" trigger="click">
+			<template #reference>
+				<div class="msg panel-item">
+					<el-badge :hidden="msgList.length==0" :value="msgList.length" class="badge" type="danger">
+						<i class="el-icon-bell"></i>
+					</el-badge>
+				</div>
+			</template>
+			<div>
+				<el-empty v-if="msgList.length==0" description="暂无新消息"></el-empty>
+				<div v-else class="msgList">
+					<header>
+						<label>通知</label>
+						<el-link :underline="false" href="javascript:void(0);" @click="markRead">全部标记已读</el-link>
+					</header>
+					<ul>
+						<el-scrollbar>
+							<li v-for="item in msgList" v-bind:key="item.id">
+								<a :href="item.link" target="_blank">
+									<h2>{{item.title}}</h2>
+									<p>{{item.describe}}</p>
+								</a>
+							</li>
+						</el-scrollbar>
+					</ul>
+					<footer><el-link :underline="false" href="https://gitee.com/lolicode/scui" target="_blank">前往通知中心</el-link></footer>
+				</div>
+			</div>
+		</el-popover>
+		<el-dropdown trigger="click" @command="handleUser" style="height: 100%;">
+			<div class="user panel-item">
+				<el-avatar :size="30">{{ userNameF }}</el-avatar>
+				<label>{{ userName }}<i class="el-icon-arrow-down el-icon--right"></i></label>
+			</div>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item command="uc">个人设置</el-dropdown-item>
+					<el-dropdown-item command="cmd">CMD</el-dropdown-item>
+					<el-dropdown-item divided command="outLogin">退出登录</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
+	</div>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				userName: "",
+				userNameF: "",
+				msgList: [
+					{
+						id: 1,
+						title: "关于版本发布的通知",
+						describe: "点进去Gitee获取最新开源版本",
+						link: "https://gitee.com/lolicode/scui"
+					},
+					{
+						id: 2,
+						title: "感谢登录SCUI Admin",
+						describe: "Vue 3.0 + Vue-Router 4.0 + ElementPlus + Axios 后台管理系统。",
+						link: "https://gitee.com/lolicode/scui"
+					}
+				]
+			}
+		},
+		created() {
+			var userInfo = this.$TOOL.data.get("user").userInfo;
+			this.userName = userInfo.userName;
+			this.userNameF = this.userName.substring(0,1);
+		},
+		methods: {
+			//个人信息
+			handleUser(command) {
+				if(command == "uc"){
+					this.$router.push({path: '/usercenter'});
+				}
+				if(command == "outLogin"){
+					this.$router.replace({path: '/login'});
+				}
+				if(command == "cmd"){
+					this.$router.push({path: '/cmd'});
+				}
+			},
+			//全屏
+			screen(){
+				var element = document.documentElement;
+				this.$TOOL.screen(element)
+			},
+			//标记已读
+			markRead(){
+				this.msgList = []
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.user-bar {display: flex;align-items: center;height: 100%;}
+	.user-bar .panel-item {padding: 0 10px;cursor: pointer;height: 100%;display: flex;align-items: center;}
+	.user-bar .panel-item i {font-size: 16px;}
+	.user-bar .panel-item:hover {background: rgba(0, 0, 0, 0.1);}
+	.user-bar .user {display: flex;align-items: center;}
+	.user-bar .user label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
+
+	.msgList header {height:35px;line-height: 35px;display: flex;justify-content: space-between;}
+	.msgList footer {height:35px;line-height: 35px;text-align:center;}
+	.msgList ul {height:180px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
+	.msgList ul li a {display: inline-block;width: 100%;height: 100%;padding:10px;border: 1px solid transparent;cursor:pointer;}
+	.msgList ul li h2 {font-size: 14px;font-weight: normal;line-height: 1.8;}
+	.msgList ul li h2 i {margin-right: 10px;}
+	.msgList ul li p {font-size: 12px;color: #999;line-height: 1.8;}
+	.msgList ul li a:hover {background: #ecf5ff;border-top: 1px solid #d9ecff;border-bottom: 1px solid #d9ecff;}
+	.msgList ul li a:hover h2 {color: #409EFF;}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index 19be62d2..25e44acb 100644
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,44 +1,147 @@
 <template>
-	<Side v-if="!ismobile"></Side>
-	<Side-m v-if="ismobile"></Side-m>
-	<div class="aminui-body el-container">
-		<Head></Head>
-		<Tags v-if="!ismobile && $CONFIG.LAYOUT_TAGS"></Tags>
-		<div class="adminui-main" id="adminui-main">
-			<router-view></router-view>
-		</div>
-	</div>
+	<!-- 通栏布局 -->
+	<template v-if="layout=='header'">
+		<header class="adminui-header">
+			<div class="adminui-header-left">
+				<div class="logo">
+					<i class="el-icon-platform-eleme"></i>
+					<span>SCUI-Admin</span>
+				</div>
+				<ul v-if="!ismobile" class="nav">
+					<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>
+						<span>{{ item.meta.title }}</span>
+					</li>
+				</ul>
+			</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 v-if="!menuIsCollapse" class="adminui-side-top">
+					<h2>{{ pmenu.meta.title }}</h2>
+				</div>
+				<div class="adminui-side-scroll">
+					<el-menu :default-active="$route.fullPath" router :collapse="menuIsCollapse">
+						<NavMenu :navMenus="nextMenu"></NavMenu>
+					</el-menu>
+				</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>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<!-- 默认布局 -->
+	<template v-else>
+		<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>
+				</div>
+			</div>
+			<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
+				<div v-if="!menuIsCollapse" class="adminui-side-top">
+					<h2>{{ pmenu.meta.title }}</h2>
+				</div>
+				<div class="adminui-side-scroll">
+					<el-menu :default-active="$route.fullPath" router :collapse="menuIsCollapse">
+						<NavMenu :navMenus="nextMenu"></NavMenu>
+					</el-menu>
+				</div>
+			</div>
+			<Side-m v-if="ismobile"></Side-m>
+			<div class="aminui-body el-container">
+				<Topbar>
+					<userbar></userbar>
+				</Topbar>
+				<Tags v-if="!ismobile && layoutTags"></Tags>
+				<div class="adminui-main" id="adminui-main">
+					<router-view></router-view>
+				</div>
+			</div>
+		</section>
+	</template>
+
+	<div class="layout-setting" @click="openSetting"><i class="el-icon-brush"></i></div>
+
+	<el-drawer title="布局实时演示" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
+		<setting></setting>
+	</el-drawer>
 </template>
 
 <script>
-	import Side from './components/side.vue';
 	import SideM from './components/sideM.vue';
-	import Head from './components/head.vue';
+	import Topbar from './components/topbar.vue';
 	import Tags from './components/tags.vue';
+	import NavMenu from './components/NavMenu.vue';
+	import userbar from './components/userbar.vue';
+	import setting from './components/setting.vue';
 
 	export default {
 		name: 'index',
 		components: {
-			Side,
 			SideM,
-			Head,
-			Tags
+			Topbar,
+			Tags,
+			NavMenu,
+			userbar,
+			setting
 		},
 		data() {
 			return {
-
+				settingDialog: false,
+				menu: [],
+				nextMenu: [],
+				pmenu: {}
 			}
 		},
 		computed:{
 			ismobile(){
 				return this.$store.state.global.ismobile
+			},
+			layout(){
+				return this.$store.state.global.layout
+			},
+			layoutTags(){
+				return this.$store.state.global.layoutTags
+			},
+			menuIsCollapse(){
+				return this.$store.state.global.menuIsCollapse
 			}
 		},
 		created() {
 			this.onLayoutResize();
 			window.addEventListener('resize', this.onLayoutResize);
+			var menu = this.$TOOL.data.get("user").menuList;
+			var home = this.$router.options.routes[0].children[0];
+			menu.unshift(home);
+			this.menu = this.filterUrl(menu);
+			this.showThis()
+		},
+		watch: {
+			$route() {
+				this.showThis()
+			}
 		},
 		methods: {
+			openSetting(){
+				this.settingDialog = true;
+			},
 			onLayoutResize(){
 				const clientWidth = document.body.clientWidth;
 				if(clientWidth < 992){
@@ -46,6 +149,38 @@
 				}else{
 					this.$store.commit("SET_ismobile", false)
 				}
+			},
+			//路由监听高亮
+			showThis(){
+				var home = this.$router.options.routes[0].children[0];
+				this.pmenu = this.$route.matched[1] || home;
+				this.nextMenu = this.filterUrl(this.pmenu.children);
+			},
+			//点击显示
+			showMenu(route) {
+				this.pmenu = route;
+				this.nextMenu = this.filterUrl(route.children);
+			},
+			//转换外部链接的路由
+			filterUrl(map){
+				var newMap = []
+				map && map.forEach(item => {
+					item.meta = item.meta?item.meta:{};
+					//处理隐藏
+					if(item.meta.hidden){
+						return false
+					}
+					//处理http
+					if(item.meta.type=='iframe'){
+						item.path = `/i/${item.name}`;
+					}
+					//递归循环
+					if(item.children&&item.children.length > 0){
+						this.filterUrl(item.children);
+					}
+					newMap.push(item)
+				})
+				return newMap;
 			}
 		}
 	}
diff --git a/src/main.js b/src/main.js
index aa0590f8..ab818675 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,7 +26,7 @@ app.config.globalProperties.$HAS = permission;
 
 app.use(store);
 app.use(router);
-app.use(ElementPlus, {size: 'small', zIndex: 1000 ,locale: locale});
+app.use(ElementPlus, {size: 'small', zIndex: 2000 ,locale: locale});
 
 app.component('scTable', scTable);
 app.component('scFilterBar', scFilterBar);
diff --git a/src/router/index.js b/src/router/index.js
index ad8c85eb..b7ff40b7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,6 +25,7 @@ const routes = [{
 						path: "/dashboard",
 						meta: {
 							title: "控制台",
+							icon: "el-icon-menu",
 							affix: true
 						},
 						component: () => import(/* webpackChunkName: "home" */ '@/views/home'),
@@ -33,7 +34,8 @@ const routes = [{
 						name: "userCenter",
 						path: "/usercenter",
 						meta: {
-							title: "个人信息"
+							title: "个人信息",
+							icon: "el-icon-user",
 						},
 						component: () => import(/* webpackChunkName: "usercenter" */ '@/views/userCenter'),
 					},
@@ -41,7 +43,8 @@ const routes = [{
 						name: "autocode",
 						path: "/autocode",
 						meta: {
-							title: "代码生成器"
+							title: "代码生成器",
+							icon: "el-icon-magic-stick",
 						},
 						component: () => import(/* webpackChunkName: "autocode" */ '@/views/autocode'),
 					}
diff --git a/src/store/modules/global.js b/src/store/modules/global.js
index f0087030..b053d91c 100644
--- a/src/store/modules/global.js
+++ b/src/store/modules/global.js
@@ -1,10 +1,28 @@
+import config from "@/config";
+
 export default {
 	state: {
-		ismobile: false
+		//移动端布局
+		ismobile: false,
+		//布局
+		layout: config.LAYOUT,
+		//菜单是否折叠 toggle
+		menuIsCollapse: config.MENU_IS_COLLAPSE,
+		//多标签栏
+		layoutTags: config.LAYOUT_TAGS,
 	},
 	mutations: {
 		SET_ismobile(state, key){
 			state.ismobile = key
+		},
+		SET_layout(state, key){
+			state.layout = key
+		},
+		TOGGLE_menuIsCollapse(state){
+			state.menuIsCollapse = !state.menuIsCollapse
+		},
+		TOGGLE_layoutTags(state){
+			state.layoutTags = !state.layoutTags
 		}
 	}
 }
diff --git a/src/style/app.less b/src/style/app.less
index b90899fa..2a7b82fb 100644
--- a/src/style/app.less
+++ b/src/style/app.less
@@ -16,7 +16,26 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 ::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}
 
 /* 大布局样式 */
-.aminui {display: flex;}
+.aminui {display: flex;flex-flow: column;}
+.aminui-wrapper {display: flex;flex:1;overflow: auto;}
+
+/*布局设置*/
+.layout-setting {position: fixed;width: 40px;height: 40px;border-radius: 3px 0 0 3px;bottom: 100px;right: 0px;z-index: 100;background: #409EFF;display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;}
+.layout-setting i {font-size: 18px;color: #fff;}
+
+/* 头部 */
+.adminui-header {height: 60px;background: #222b45;color: #fff;display: flex;justify-content:space-between;}
+.adminui-header-left {display: flex;align-items: center;padding-left:20px;}
+.adminui-header-right {display: flex;align-items: center;}
+.adminui-header .logo {font-size: 20px;font-weight: bold;display: flex;align-items: center;}
+.adminui-header .logo i {font-size: 30px;color: #09f;margin-right: 10px;}
+.adminui-header .nav {display: flex;height: 100%;margin-left: 40px;}
+.adminui-header .nav li {padding:0 10px;margin: 0 10px 0 0;font-size: 14px;color: rgba(255, 255, 255, 0.6);list-style: none;height: 100%;display: flex;align-items: center;cursor: pointer;}
+.adminui-header .nav li i {margin-right: 5px;}
+.adminui-header .nav li:hover {color: #fff;}
+.adminui-header .nav li.active {background: rgba(255, 255, 255, 0.1);color: #fff;}
+.adminui-header .user-bar .panel-item:hover {background: rgba(255, 255, 255, 0.1)!important;}
+.adminui-header .user-bar .user label{color: #fff;}
 
 /* 左侧菜单 */
 .aminui-side-split {width:65px;flex-shrink:0;background: #333;}
@@ -32,36 +51,25 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-side-split-scroll::-webkit-scrollbar-track {background-color: rgba(255, 255, 255, 0);}
 .adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
 
-.aminui-side {display: flex;flex-flow: column;flex-shrink:0;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
+.aminui-side {display: flex;flex-flow: column;flex-shrink:0;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;transition:width 0.3s;}
 .adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
 .adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
 .adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
+.aminui-side.isCollapse {width: 64px;}
 
 /* 右侧内容 */
 .aminui-body {flex: 1;display: flex;flex-flow: column;}
 
-.adminui-header {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
-.adminui-header .left-panel {display: flex;align-items: center;padding-left:20px;}
-.adminui-header .right-panel {display: flex;align-items: center;}
+.adminui-topbar {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
+.adminui-topbar .left-panel {display: flex;align-items: center;}
+.adminui-topbar .right-panel {display: flex;align-items: center;}
+
 .right-panel-search {display: flex;align-items: center;}
 .right-panel-search > * + * {margin-left:10px;}
-.adminui-header .panel-item {height:50px;line-height: 50px;padding:0 10px;cursor: pointer;}
-.adminui-header .panel-item i {font-size: 16px;}
-.adminui-header .panel-item .badge .el-badge__content {top:15px}
-.adminui-header .panel-item:hover {background: #eee;}
-.adminui-header .el-breadcrumb .el-breadcrumb__inner i {margin-right:5px;}
-.adminui-header .user {display: flex;align-items: center;}
-.adminui-header .user label {display: inline-block;margin-left:5px;font-size: 12px;cursor:pointer;}
 
-.msgList header {height:35px;line-height: 35px;display: flex;justify-content: space-between;}
-.msgList footer {height:35px;line-height: 35px;text-align:center;}
-.msgList ul {height:180px;border-top: 1px solid #eee;border-bottom: 1px solid #eee;}
-.msgList ul li a {display: inline-block;width: 100%;height: 100%;padding:10px;border: 1px solid transparent;cursor:pointer;}
-.msgList ul li h2 {font-size: 14px;font-weight: normal;line-height: 1.8;}
-.msgList ul li h2 i {margin-right: 10px;}
-.msgList ul li p {font-size: 12px;color: #999;line-height: 1.8;}
-.msgList ul li a:hover {background: #ecf5ff;border-top: 1px solid #d9ecff;border-bottom: 1px solid #d9ecff;}
-.msgList ul li a:hover h2 {color: #409EFF;}
+.adminui-topbar .menu-collapse {height: 50px;width: 60px;padding: 0 20px;display: flex;align-items: center;cursor: pointer;}
+.adminui-topbar .menu-collapse i {font-size: 16px;}
+.adminui-topbar .menu-collapse:hover {background-image: linear-gradient(90deg, #d9ecff, transparent);}
 
 .adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;box-shadow: 0 1px 4px rgba(0,21,41,.08);}
 .adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;}
diff --git a/src/views/home/components/C2.vue b/src/views/home/components/C2.vue
index 96385fc9..f6e5ee81 100644
--- a/src/views/home/components/C2.vue
+++ b/src/views/home/components/C2.vue
@@ -22,6 +22,16 @@
 		data() {
 			return {
 				activities: [
+					{
+						content: [
+							"[新增] 布局实时演示",
+							"[优化] 抽离tinymce、echarts模块",
+							"[优化] 更换富文本编辑为tinymce",
+							"[优化] 打印工具可直接传入html",
+							"[删除] 诺干个无用的模板",
+						],
+						timestamp: '2021-05-30'
+					},
 					{
 						content: [
 							"[优化] 上传组件上传行为",
diff --git a/src/views/template/itemList.vue b/src/views/template/itemList.vue
deleted file mode 100644
index 0b569be8..00000000
--- a/src/views/template/itemList.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-	<el-container>
-		<el-header>
-			<div class="left-panel">
-
-			</div>
-			<div class="right-panel">
-				<div class="right-panel-search">
-					<el-input v-model="keyword" placeholder="请输入内容" clearable></el-input>
-					<el-button type="primary" icon="el-icon-search"></el-button>
-				</div>
-			</div>
-		</el-header>
-		<el-main class="nopadding">
-			<div class="sc-itemList">
-				<div class="sc-itemList-list">
-					<el-row :gutter="20">
-
-						<el-col :xl="6" :lg="8" :md="8" :sm="12" :xs="24" v-for="item in list" :key="item.title">
-							<el-card shadow="hover" :body-style="{ padding: '0px' }">
-								<el-image :src="item.image" fit="cover" :preview-src-list="[item.image]"></el-image>
-								<div class="title">
-									<h2>{{item.title}}</h2>
-									<p>
-										<el-tag type="warning">免费</el-tag>
-										<el-tag v-for="tag in item.tags" :key="tag">{{tag}}</el-tag>
-									</p>
-								</div>
-							</el-card>
-						</el-col>
-
-					</el-row>
-				</div>
-				<div class="sc-itemList-page">
-					<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="20" :page-size="20" :currentPage="1" ></el-pagination>
-				</div>
-			</div>
-		</el-main>
-	</el-container>
-</template>
-
-<script>
-	export default {
-		name: 'itemList',
-		data() {
-			return {
-				keyword: "",
-				list: [
-					{
-						title: "VUE Next",
-						tags: ["跨平台", "3.0", "测试版"],
-						image: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
-					},
-					{
-						title: "Element Plus",
-						tags: ["Vue3.0", "个人"],
-						image: ""
-					}
-				]
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.el-card {margin-bottom: 20px;height:310px;}
-	.el-image {width: 100%;height:200px;background: #ddd;}
-	.title {padding:20px;}
-	.title h2 {font-size: 16px;}
-	.title p {font-size: 12px;color: #999;margin-top: 15px;}
-	.title p .el-tag {margin-right:8px;}
-
-	.sc-itemList {display:flex;flex-direction:column;height:100%;}
-	.sc-itemList-list {flex:1;border-bottom: 1px solid #EBEEF5;padding:20px;overflow: auto;}
-	.sc-itemList-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
-</style>
diff --git a/src/views/template/list.vue b/src/views/template/list.vue
deleted file mode 100644
index e8d2be24..00000000
--- a/src/views/template/list.vue
+++ /dev/null
@@ -1,269 +0,0 @@
-<template>
-	<el-container>
-		<el-header>
-			<div class="left-panel">
-				<el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
-				<el-popconfirm :title="'确定删除选中的 '+selection.length+' 项吗？'" @confirm="batch_del">
-					<template #reference>
-						<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
-					</template>
-				</el-popconfirm>
-			</div>
-			<div class="right-panel">
-				<div class="right-panel-search">
-					<el-input v-model="search.name" placeholder="请输入内容" clearable></el-input>
-					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
-				</div>
-				<scFilterBar ref="scFilterBar" :options="options" @change="updata"></scFilterBar>
-			</div>
-		</el-header>
-		<el-main class="nopadding">
-			<scTable ref="table" :apiObj="apiObj" :column="column" @selection-change="selectionChange">
-				<!-- 表格列开始 -->
-				<el-table-column type="selection" width="50"></el-table-column>
-
-				<el-table-column label="序号" type="index" width="50"></el-table-column>
-
-				<el-table-column label="头像" width="60">
-					<template #default="scope">
-						<el-avatar size="small">{{ scope.row.name.substring(0,1) }}</el-avatar>
-					</template>
-				</el-table-column>
-
-				<el-table-column label="名称" prop="name" width="150"></el-table-column>
-
-				<el-table-column label="进度" prop="progress" width="200">
-					<template #default="scope">
-						<el-progress :percentage="scope.row.progress" status="success"></el-progress>
-					</template>
-				</el-table-column>
-
-				<el-table-column label="邮箱" prop="yx" width="150"></el-table-column>
-
-				<el-table-column label="状态" prop="audit" width="50">
-					<template #default="scope">
-						<el-tag>{{scope.row.audit}}</el-tag>
-					</template>
-				</el-table-column>
-
-				<el-table-column label="加入时间" prop="date" width="170"></el-table-column>
-
-				<el-table-column label="操作" fixed="right" align="right" width="140">
-					<template #default="scope">
-						<el-button @click="table_show(scope.row, scope.$index)" type="text" size="small">查看</el-button>
-						<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
-						<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.$index)">
-							<template #reference>
-								<el-button type="text" size="small">删除</el-button>
-							</template>
-						</el-popconfirm>
-					</template>
-				</el-table-column>
-				<!-- 表格列结束 -->
-			</scTable>
-		</el-main>
-	</el-container>
-
-	<!-- 弹窗开始 -->
-	<el-dialog :title="titleMap[dialogMode]" :width="600" v-model="showDialog" :before-close="closeDialog" append-to-body>
-		<el-form :model="form" :rules="rules" :disabled="dialogMode=='show'" ref="dialogForm" label-width="80px" label-position="top">
-			<el-row :gutter="20">
-				<el-col :span="12">
-					<el-form-item label="名称" prop="name">
-						<el-input v-model="form.name"></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :span="12">
-					<el-form-item label="邮箱" prop="yx">
-						<el-input v-model="form.yx"></el-input>
-					</el-form-item>
-				</el-col>
-			</el-row>
-			<el-row :gutter="20">
-				<el-col :span="12">
-					<el-form-item label="进度" prop="progress">
-						<el-input v-model.number="form.progress"></el-input>
-					</el-form-item>
-				</el-col>
-				<el-col :span="12">
-					<el-form-item label="状态" prop="audit">
-						<el-switch v-model="form.audit" active-value="1" inactive-value="0"></el-switch>
-					</el-form-item>
-				</el-col>
-			</el-row>
-		</el-form>
-		<template #footer>
-			<el-button @click="closeDialog">取 消</el-button>
-			<el-button v-if="dialogMode=='add'" type="primary" @click="submitForm()">创 建</el-button>
-			<el-button v-if="dialogMode=='edit'" type="primary" @click="editForm()">保 存</el-button>
-		</template>
-	</el-dialog>
-	<!-- 弹窗结束 -->
-</template>
-
-<script>
-	export default {
-		name: 'list',
-		data() {
-			return {
-				search : {
-					name: ""
-				},
-				options: [
-					{
-						label: '状态',
-						value: 'type',
-						type: 'select',
-						extend: {
-							data:[
-								{
-									label: "通过",
-									value: "0"
-								},
-								{
-									label: "失败",
-									value: "1"
-								}
-							]
-						}
-					},
-					{
-						label: '加入时间',
-						value: 'date',
-						type: 'daterange'
-					}
-				],
-				apiObj: this.$API.demo.demolist.list,
-				selection: [],
-				showDialog: false,
-				dialogMode: "add",
-				editIndex: null,
-				titleMap: {
-					add: "新增",
-					edit: "编辑",
-					show: "查看"
-				},
-				form: {
-					name: "",
-					audit: "1",
-					yx: "",
-					progress: 0
-				},
-				rules: {
-					name: [
-						{ required: true, message: '请输入名称' },
-					],
-					yx: [
-						{ required: true, message: '请输入完整的邮箱地址' },
-					],
-					progress: [
-						{ required: true, message: '请输入进度' },
-					]
-				},
-				column: [
-					{
-						label: "NAME",
-						prop: "name",
-						width: 150
-					},
-					{
-						label: "PROGRESS",
-						prop: "progress",
-						width: 150
-					},
-					{
-						label: "AUDIT",
-						prop: "audit",
-						width: 150
-					}
-				]
-			}
-		},
-		mounted() {
-
-		},
-		methods: {
-			//表格选择后回调事件
-			selectionChange(selection){
-				this.selection = selection;
-			},
-			//行删除
-			table_del(index){
-				this.$refs.table.tableData.splice(index, 1);
-			},
-			//批量删除
-			batch_del(){
-				var _this = this;
-				_this.selection.forEach(function (item) {
-					_this.$refs.table.tableData.forEach(function (itemI, indexI) {
-						if (item.id === itemI.id) {
-							_this.$refs.table.tableData.splice(indexI, 1)
-						}
-					})
-				})
-			},
-			//关闭弹窗
-			closeDialog(){
-				this.showDialog = false;
-				this.$nextTick(() => {
-					this.$refs.dialogForm.resetFields();
-				})
-			},
-			//打开弹窗
-			openDialog(mode){
-				this.dialogMode = mode;
-				this.showDialog = true;
-			},
-			//新增提交
-			submitForm(){
-				this.$refs.dialogForm.validate((valid) => {
-					if (valid) {
-						var newData = {
-							...this.form,
-							id: new Date().getTime(),
-							date: "2021-04-30 13:57:00"
-						}
-						this.$refs.table.tableData.unshift(newData)
-						this.closeDialog();
-					}else{
-						return false;
-					}
-				})
-			},
-			//编辑
-			table_edit(row, index){
-				this.editIndex = index;
-				this.openDialog('edit');
-				this.$nextTick(() => {
-					this.form = {...row}
-				});
-			},
-			//编辑提交
-			editForm(){
-				this.$refs.dialogForm.validate((valid) => {
-					if (valid) {
-						Object.assign(this.$refs.table.tableData[this.editIndex], this.form)
-						this.closeDialog();
-					}else{
-						return false;
-					}
-				})
-			},
-			//查看
-			table_show(row){
-				this.openDialog('show');
-				this.$nextTick(() => {
-					this.form = {...row}
-				});
-			},
-			upsearch(){
-				var data = Object.assign({}, this.search, this.$refs.scFilterBar.getFilter());
-				this.$refs.table.upData(data)
-			},
-			updata(val){
-				var data = Object.assign({},this.search, val);
-				this.$refs.table.upData(data)
-			}
-		}
-	}
-</script>
diff --git a/src/views/template/show.vue b/src/views/template/show.vue
deleted file mode 100644
index dac92d50..00000000
--- a/src/views/template/show.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-	<div>
-		<el-empty description="SHOW"></el-empty>
-		<h2>ID={{ id }}</h2>
-		<el-input v-model="input" placeholder="请输入内容"></el-input>
-	</div>
-</template>
-
-<script>
-	export default {
-		name: 'show',
-		props: ['showid'],
-		data() {
-			return {
-				id: this.$route.params.id || this.showid,
-				input: ""
-			}
-		},
-		mounted: function() {
-			//如果路由与组件名称相同修改tags title，防止作用于非路由组件时修改tags
-			if(this.$route.name==this.$options.name){
-				this.$store.commit("updateViewTags", {
-					path: this.$route.path,
-					meta: {
-						title:"详情ID="+this.id
-					}
-				})
-			}
-		}
-	}
-</script>
-
-<style scoped>
-	.main {width:200px;}
-</style>
diff --git a/src/views/template/sideList.vue b/src/views/template/sideList.vue
deleted file mode 100644
index cd87a25b..00000000
--- a/src/views/template/sideList.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-	<el-container>
-		<el-aside width="200px">
-			<div>
-				<el-tree node-key="id" :data="data" :default-expanded-keys="[1]" :highlight-current="true" :expand-on-click-node="false" :show-checkbox="true" @node-click="handleNodeClick"></el-tree>
-			</div>
-		</el-aside>
-		<el-container>
-			<el-header>
-				<div>
-					<el-button type="primary" icon="el-icon-plus"></el-button>
-					<el-button type="primary" icon="el-icon-delete"></el-button>
-					<el-button type="primary">默认按钮</el-button>
-					<el-dropdown style="margin-left: 10px;">
-						<el-button type="primary" plain icon="el-icon-arrow-down"></el-button>
-						<template #dropdown>
-							<el-dropdown-menu>
-								<el-dropdown-item>黄金糕</el-dropdown-item>
-								<el-dropdown-item>狮子头</el-dropdown-item>
-							</el-dropdown-menu>
-						</template>
-					</el-dropdown>
-				</div>
-			</el-header>
-			<el-main class="nopadding">
-				<scTable ref="table" :data="tableData" row-key="name">
-					<!-- 表格列开始 -->
-					<el-table-column type="selection" width="50"></el-table-column>
-					<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column>
-					<el-table-column label="图标" width="80">
-						<template #default="scope">
-							<i :class="scope.row.meta.icon"></i>
-						</template>
-					</el-table-column>
-					<el-table-column label="路由名称" prop="name" width="100"></el-table-column>
-					<el-table-column label="路由地址" prop="path" width="200">
-						<template #default="scope">
-							<el-tag>{{scope.row.path}}</el-tag>
-						</template>
-					</el-table-column>
-					<el-table-column label="路由组件" prop="component" width="100"></el-table-column>
-					<el-table-column label="是否隐藏" prop="meta.hidden" width="100">
-						<template #default="scope">
-							{{ scope.row.meta.hidden?"是":"否" }}
-						</template>
-					</el-table-column>
-
-					<el-table-column label="操作" fixed="right" align="right" width="140">
-						<template #default="scope">
-							<el-button @click="table_edit(scope.row)" type="text" size="mini">编辑</el-button>
-							<el-dropdown style="margin-left:10px;">
-								<el-button size="mini" type="primary" plain icon="el-icon-arrow-down"></el-button>
-								<template #dropdown>
-									<el-dropdown-menu>
-										<el-dropdown-item @click="table_show(scope.row)">查看</el-dropdown-item>
-										<el-dropdown-item>更新数据</el-dropdown-item>
-										<el-dropdown-item>转移</el-dropdown-item>
-										<el-dropdown-item>删除</el-dropdown-item>
-									</el-dropdown-menu>
-								</template>
-							</el-dropdown>
-						</template>
-					</el-table-column>
-					<!-- 表格列结束 -->
-				</scTable>
-			</el-main>
-		</el-container>
-	</el-container>
-
-	<el-drawer title="我是标题" v-model="drawer" :size="800" :append-to-body="true" direction="rtl" destroy-on-close>
-		<Show showid="我来自父组件"></Show>
-	</el-drawer>
-
-</template>
-
-<script>
-	import Show from './show.vue';
-
-	export default {
-		name: 'sideList',
-		components: {
-			Show
-		},
-		data() {
-			return {
-				data: [
-					{label: '桌面'},
-					{label: '下载'},
-					{label: '文档'},
-					{label: '图片'},
-					{label: '磁盘', id: 1, children:[
-						{label: 'Windows (C)'},
-						{label: '本地磁盘 (D)'},
-						{label: '本地磁盘 (E)'}
-					]}
-				],
-				tableData: [],
-				drawer: false
-			}
-		},
-		async created() {
-			var userInfo = await this.$API.user.login.get();
-			this.tableData = userInfo.data.menuList;
-		},
-		mounted(){
-
-		},
-		methods: {
-			handleNodeClick(data){
-				console.log(data);
-			},
-			table_show(row) {
-				this.$router.push({
-					path: '/template/show/' + row.meta.title
-				});
-			},
-			table_edit(row) {
-				console.log(row);
-				this.drawer = true
-			}
-		}
-	}
-</script>
-
-<style scoped>
-
-</style>