UI调整

src/main/vue/src/components/SysMenu.vue

@@ -1,6 +1,6 @@
 <template>
     <el-menu-item v-if="isLeaf" :index="menu.id" :route="{path:menu.extra.href}">
-        {{menu.label}}
+        <i class="fa-fw" :class="menu.extra.icon" v-if="menu.extra.icon"></i><span slot="title">{{menu.label}}</span>
     </el-menu-item>
     <el-submenu v-else :index="menu.id">
         <template slot="title">

src/main/vue/src/main.less

@@ -12,6 +12,10 @@ html, body {
     padding: 0;
 }
 
+html {
+    background: white;
+}
+
 a {
     text-decoration: none;
 }

src/main/vue/src/pages/App.vue

@@ -1,46 +1,49 @@
 <template>
     <el-container id="app">
-        <el-header class="header">
-            <div style="flex-grow: 1">
-                <router-link :to="{name:'dashboard'}">一个很厉害的后台管理</router-link>
-            </div>
-            <el-dropdown @command="onCommand">
-                <img :src="userInfo ? userInfo.icon || '' : ''" class="avatar"/>
-                <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
-                </el-dropdown-menu>
-            </el-dropdown>
-        </el-header>
+        <el-aside :width="collapse ? '65px' : '200px'" class="aside">
+            <div class="logo-wrapper">Logo</div>
+            <el-menu
+                :collapse="collapse"
+                background-color="#324157"
+                text-color="#BFCBD9"
+                active-text-color="#20A0FF"
+                :unique-opened="true"
+                :router="true"
+                :default-active="activeMenu"
+                style="border-right: 1px solid #545c64"
+                class="el-menu-vertical-demo">
+                <sys-menu v-for="item in menus" :menu="item" :key="item.id"></sys-menu>
+            </el-menu>
+        </el-aside>
         <el-container>
-            <el-aside width="200px" class="aside">
-                <!--<el-menu-->
-                <!--background-color="#324157"-->
-                <!--text-color="#BFCBD9"-->
-                <!--active-text-color="#20A0FF"-->
-                <!--:unique-opened="true"-->
-                <!--:router="true"-->
-                <!--style="border-right: 1px solid #545c64">-->
-                <!--<el-submenu index="1">-->
-                <!--<template slot="title"><i class="el-icon-menu"></i>菜单1</template>-->
-                <!--<el-menu-item index="1-1" :route="{path:'/users'}">选项1</el-menu-item>-->
-                <!--<el-menu-item index="1-2" :route="{path:'/user'}">选项2</el-menu-item>-->
-                <!--</el-submenu>-->
-                <!--</el-menu>-->
-                <el-menu
-                    background-color="#324157"
-                    text-color="#BFCBD9"
-                    active-text-color="#20A0FF"
-                    :unique-opened="true"
-                    :router="true"
-                    :default-active="activeMenu"
-                    style="border-right: 1px solid #545c64">
-                    <sys-menu v-for="item in menus" :menu="item" :key="item.id"></sys-menu>
-                </el-menu>
-            </el-aside>
+            <el-header class="header">
+                <div class="header-btn" @click="collapse=!collapse">
+                    <div :style="{transform: collapse ? 'rotate(90deg)' : ''}">
+                        <i class="fas fa-bars" style="font-size: 20px;"></i>
+                    </div>
+                </div>
+                <div style="flex-grow: 1; margin-left: 20px;">
+                    <router-link :to="{name:'dashboard'}">一个很厉害的后台管理</router-link>
+                </div>
+
+                <el-tooltip effect="dark" :content="isFullscreen ? '退出全屏' : '全屏'" placement="bottom" :open-delay="1000">
+                    <div class="header-btn" @click="toggleFullScreen" ref="fullscreen">
+                        <i class="fas fa-expand" style="font-size: 20px;"></i>
+                    </div>
+                </el-tooltip>
+
+                <el-dropdown @command="onCommand" style="margin-left: 20px;">
+                    <img :src="userInfo ? userInfo.icon || '' : ''" class="avatar"/>
+                    <el-dropdown-menu slot="dropdown">
+                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+            </el-header>
             <el-main>
                 <router-view></router-view>
             </el-main>
         </el-container>
+
     </el-container>
 </template>
 
@@ -52,12 +55,23 @@
         name: 'App',
         created() {
             this.getMenus();
+            let fn = () => {
+                this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
+
+            };
+            document.addEventListener('fullscreenchange', fn);
+            document.addEventListener('webkitfullscreenchange', fn);
+            document.addEventListener('mozfullscreenchange', fn);
+            document.addEventListener('MSFullscreenChange', fn);
         },
         data() {
             return {
                 rawMenus: [],
                 menus: [],
-                activeMenu: ''
+                activeMenu: '',
+                menuPath: [],
+                collapse: false,
+                isFullscreen: false
             }
         },
         computed: {
@@ -65,19 +79,25 @@
         },
         methods: {
             findActiveMenu() {
+                this.activeMenu = '';
+                this.menuPath = [];
                 let path = this.$route.path;
-                const findActiveMenu = menus => {
-                    menus.forEach(i => {
+                const findActiveMenu = (parents, childMenus) => {
+                    childMenus.forEach(i => {
+                        let parents_copy = [...parents];
                         if (i.extra.href === path) {
+                            parents_copy.push(i);
+                            this.menuPath = parents_copy.map(i => i.name);
                             this.activeMenu = i.id;
                         } else {
                             if (i.children) {
-                                findActiveMenu(i.children);
+                                parents_copy.push(i);
+                                findActiveMenu(parents_copy, i.children);
                             }
                         }
                     })
                 };
-                findActiveMenu(this.rawMenus);
+                findActiveMenu([], this.rawMenus);
             },
             getMenus() {
                 this.$http.get({
@@ -110,6 +130,19 @@
                     }
                 })
             },
+            toggleFullScreen() {
+                this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
+                let element = document.body;
+                let requestMethod;
+                if (this.isFullscreen) {
+                    requestMethod = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen;
+                } else {
+                    requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
+                }
+                if (requestMethod) {
+                    requestMethod.call(this.isFullscreen ? document : element);
+                }
+            },
             onCommand(command) {
                 if (command === 'logout') {
                     this.$http.post({
@@ -124,8 +157,16 @@
             }
         },
         watch: {
-            $route() {
+            $route(val) {
                 this.findActiveMenu(this.rawMenus);
+            },
+            isFullscreen(val) {
+                this.$refs.fullscreen.innerHTML = '';
+                let i = document.createElement('i');
+                i.style.fontSize = '20px';
+                i.className = val ? 'fas fa-compress' : 'fas fa-expand';
+                this.$refs.fullscreen.append(i);
+                FontAwesome.dom.i2svg();
             }
         },
         components: {
@@ -133,17 +174,43 @@
         }
     }
 </script>
-
+<style lang="less">
+    .aside {
+        .el-menu {
+            border: none !important;
+            &:not(.el-menu--collapse) {
+                width: 200px;
+            }
+        }
+    }
+</style>
 <style lang="less" scoped>
     #app {
         height: 100%;
     }
 
     .header {
-        color: #D7E5F5;
-        background: #20A0FF;
+        color: #303133;
+        background: #fff;
         display: flex;
         align-items: center;
+        padding-left: 0;
+        border-bottom: 1px solid #DCDFE6;
+        .header-btn {
+            width: 60px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            & > div {
+                transition: all 0.3s;
+            }
+            &:hover {
+                background: fade(black, 10%);
+            }
+        }
         .avatar {
             width: 40px;
             height: 40px;
@@ -152,13 +219,24 @@
         }
         a {
             &:visited {
-                color: #D7E5F5;
+                color: #303133;
             }
         }
     }
 
     .aside {
         background: #324157;
+        transition: all 0.4s ease;
+        .logo-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 60px;
+            color: white;
+            font-size: 20px;
+            font-weight: 700;
+            background: fade(black, 20%);
+        }
     }
 
     .aside::-webkit-scrollbar {