修复生产环境下主题色修改功能失效的问题

页面结构可切换初步

样式名称修改

vue/src/component/form/Anchor/index.vue

@@ -26,7 +26,7 @@ export default {
         bounds: {type: Number, default: 0},
         getContainer: {
             type: Function,
-            default: () => document.querySelector('#app .router-main>.scroll-container')
+            default: () => document.querySelector('#app .page-main>.scroll-container')
         },
     },
 

vue/src/component/menu/NavMenu/style.scss

@@ -6,6 +6,19 @@
     display: none;
 }
 
+//hover时，菜单左侧图标放大
+.el-menu-item,
+.el-submenu__title {
+    > .icon, > .el-tooltip > .icon {
+        transition: transform .1s;
+    }
+
+    &:hover > .icon,
+    &:hover > .el-tooltip > .icon {
+        transform: scale(1.2);
+    }
+}
+
 /*-------侧边栏垂直菜单开始---------*/
 .el-menu--vertical.el-menu {
     overflow-y: auto;

vue/src/globalMethod/Guide/utils.js

@@ -32,7 +32,7 @@ export function getStyleProperty(element, propertyName, prefixVendor = false) {
 }
 
 export function inMainPage(element) {
-    const appView = document.querySelector('.router-main')
+    const appView = document.querySelector('.page-main')
     if (!appView) throw new Error('路由页面未加载')
     return appView.contains(element)
 }

vue/src/layout/component/Aside/OnePart/index.vue

@@ -69,6 +69,11 @@ export default {
 
             //鼠标在侧边栏外部，true
             return this.mouseOutside
+        },
+
+        //是否需要显示logo
+        showLogo() {
+            return pageGetters.showLogo && (this.isMobile || pageGetters.position === 'left-right')
         }
     },
 
@@ -159,15 +164,13 @@ export default {
     render() {
         if (this.menus.length <= 0) return
 
-        const showLogo = pageGetters.showLogo && pageGetters.logoPosition === 'aside'
-
         const aside = (
             <aside
                 class={{'aside': true, 'sidebar': true, 'collapse': this.collapse}}
                 on-mouseleave={() => this.mouseOutside = true}
                 on-mouseenter={() => this.mouseOutside = false}
             >
-                {showLogo && <logo show-title={!this.collapse}/>}
+                {this.showLogo && <logo show-title={!this.collapse}/>}
                 <nav-menu
                     menus={this.menus}
                     collapse={this.collapse}

vue/src/layout/component/Aside/TwoPart/root.vue

@@ -52,6 +52,11 @@ export default {
     computed: {
         menus() {
             return appGetters.menus.map(root => ({...root, children: undefined}))
+        },
+
+        //是否需要显示logo
+        showLogo() {
+            return pageGetters.showLogo && pageGetters.position === 'left-right'
         }
     },
 
@@ -99,8 +104,6 @@ export default {
     },
 
     render() {
-        const showLogo = pageGetters.showLogo && pageGetters.logoPosition === 'aside'
-
         return (
             <div class="root-sidebar-container">
                 <div
@@ -108,7 +111,7 @@ export default {
                     on-mouseleave={() => this.mouseOutside = true}
                     on-mouseenter={() => this.mouseOutside = false}
                 >
-                    {showLogo && <logo show-title={!this.mouseOutside}/>}
+                    {this.showLogo && <logo show-title={!this.mouseOutside}/>}
                     <ul class="el-menu el-menu--vertical">
                         {this.menus.map(({fullPath, meta: {title, icon}}) => (
                             <item

vue/src/layout/component/Header/Navbar/index.vue

@@ -4,9 +4,11 @@ import GuideMixin from '@/mixin/guide'
 import Bell from "./component/Bell"
 import Hamburger from './component/Hamburger'
 import HeadMenu from "./component/HeadMenu"
+import Logo from "@/layout/component/Logo"
 import SettingDrawer from '@/layout/component/SettingDrawer'
 import {getters as appGetters} from "@/layout/store/app"
 import {getters as asideGetters, mutations as asideMutations} from "@/layout/store/aside"
+import {getters as pageGetters} from "@/layout/store/page"
 import {getSidebarMenus} from "@/layout/util"
 import {elConfirm} from "@/util/message"
 import {refreshPage} from "@/util/route"
@@ -16,7 +18,7 @@ export default {
 
     mixins: [GuideMixin.navbar],
 
-    components: {Hamburger, Bell, HeadMenu, SettingDrawer},
+    components: {Bell, Hamburger, HeadMenu, Logo, SettingDrawer},
 
     data: () => ({settingDrawer: false}),
 
@@ -38,6 +40,14 @@ export default {
             }
         },
 
+        renderLogo() {
+            const render =
+                !appGetters.isMobile
+                && pageGetters.showLogo
+                && pageGetters.position === 'top-bottom'
+
+            if (render) return <logo show-title/>
+        },
         renderHamburger() {
             //渲染折叠按钮的条件
             //①侧边栏有菜单
@@ -107,7 +117,9 @@ export default {
     render() {
         return (
             <nav class="navbar">
-                <div style="flex: 0.5">
+                {this.renderLogo()}
+
+                <div style="flex: 1">
                     {this.renderHamburger()}
                     {this.renderHeadMenuMenu()}
                 </div>
@@ -133,7 +145,7 @@ export default {
     align-items: center;
     flex-wrap: nowrap;
     height: $nav-height;
-    padding: 0 12px;
+    padding-left: 12px;
     transition: height .3s ease-in-out;
     position: relative;
     z-index: 9;
@@ -163,6 +175,18 @@ export default {
         }
     }
 
+    .logo-container {
+        width: auto;
+        min-width: 192px;
+        padding-left: 0;
+
+        > .logo-link > h1 {
+            font-weight: 400;
+            color: #303133;
+            font-size: 16px;
+        }
+    }
+
     .avatar-wrapper {
         display: flex;
         align-items: center;

vue/src/layout/component/Header/index.vue

@@ -4,15 +4,13 @@ import VNavbar from './Navbar'
 import TagsView from './TagsView'
 
 export default {
-    name: "Header",
-
-    components: {VNavbar, TagsView},
+    functional: true,
 
     render() {
         return (
-            <header class="header-container">
-                <v-navbar/>
-                {tagsViewGetters.enabled && <tags-view/>}
+            <header>
+                <VNavbar/>
+                {tagsViewGetters.enabled && <TagsView/>}
             </header>
         )
     }

vue/src/layout/component/Logo.vue

@@ -17,7 +17,7 @@ export default {
             <div class={logoClass}>
                 <router-link class="logo-link" to="/">
                     <img src={`${process.env.BASE_URL}static/img/logo.svg`}/>
-                    {showTitle && <h1 class="logo-title">{title}</h1>}
+                    {showTitle && <h1>{title}</h1>}
                 </router-link>
             </div>
         )
@@ -46,12 +46,12 @@ $logoSize: 30px;
             height: $logoSize;
             vertical-align: middle;
 
-            & + .logo-title {
+            & + h1 {
                 margin-left: 12px;
             }
         }
 
-        .logo-title {
+        > h1 {
             display: inline-block;
             margin: 0;
             color: #ffffff;

vue/src/layout/component/Page/component/BackToTop.vue

@@ -4,7 +4,7 @@ export default {
 
     render() {
         return (
-            <el-backtop target=".router-main .scroll-container" visibility-height={400} bottom={66}>
+            <el-backtop target=".page-main .scroll-container" visibility-height={400} bottom={66}>
                 <div class="back-to-top">
                     <v-icon icon="el-icon-top"/>
                 </div>

vue/src/layout/component/Page/index.vue

@@ -11,24 +11,34 @@ export default {
 
     components: {BackToTop, PageHeader, PageView, PageFooter},
 
-    methods: {
-        renderPage() {
-            const render = pageGetters.showPageHeader && this.$route.meta.pageHeader !== false
-            const className = {'scroll-container': true, 'has-page-header': render}
-            const {enabled, cachedViews, transitionName} = tagsViewGetters
+    computed: {
+        renderPageHeader() {
+            return pageGetters.showPageHeader && this.$route.meta.pageHeader !== false
+        },
+        pageClass() {
+            return {'scroll-container': true, 'has-page-header': this.renderPageHeader}
+        }
+    },
+
+    render() {
+        const {showIframe, iframeList, currentIframe} = pageGetters
+        const {cachedViews, transitionName, enabled} = tagsViewGetters
 
         return (
-                <div v-show={!pageGetters.showIframe} class={className}>
-                    {render && <page-header/>}
-                    <page-view include={cachedViews} transition-name={transitionName} cacheable={enabled}/>
+            <main class="page-main">
+                <div v-show={!showIframe} class={this.pageClass}>
+                    {this.renderPageHeader && <page-header/>}
+
+                    <page-view
+                        include={cachedViews}
+                        transition-name={transitionName}
+                        cacheable={enabled}
+                    />
+
                     <page-footer/>
                 </div>
-            )
-        },
-        renderIframe() {
-            const {showIframe, iframeList, currentIframe} = pageGetters
 
-            return iframeList.map(src => (
+                {iframeList.map(src => (
                     <iframe
                         v-show={showIframe && src === currentIframe}
                         id={src}
@@ -38,15 +48,8 @@ export default {
                         height="100%"
                         width="100%"
                     />
-            ))
-        }
-    },
+                ))}
 
-    render() {
-        return (
-            <main class="router-main">
-                {this.renderPage()}
-                {this.renderIframe()}
                 {pageGetters.showBackToTop && <back-to-top/>}
             </main>
         )
@@ -54,4 +57,36 @@ export default {
 }
 </script>
 
-<style lang="scss" src="./style.scss"></style>
+<style lang="scss">
+@import "~@/asset/style/variables.scss";
+
+.page-main {
+    position: relative;
+    flex: 1;
+    overflow: hidden;
+    background-color: #f0f2f5;
+
+    > .scroll-container {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow-y: overlay;
+        overflow-x: inherit;
+
+        > .page-view {
+            margin: $page-view-margin;
+            flex: 1;
+        }
+    }
+
+    .back-to-top {
+        height: 100%;
+        width: 100%;
+        background-color: #f2f5f6;
+        box-shadow: 0 0 6px rgba(0, 0, 0, .12);
+        text-align: center;
+        line-height: 40px;
+        color: #1989fa;
+    }
+}
+</style>

vue/src/layout/component/Page/style.scss

@@ -1,31 +0,0 @@
-@import "~@/asset/style/variables.scss";
-
-.router-main {
-    position: relative;
-    flex: 1;
-    overflow: hidden;
-    background-color: #f0f2f5;
-
-    > .scroll-container {
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        overflow-y: overlay;
-        overflow-x: inherit;
-
-        > .page-view {
-            margin: $page-view-margin;
-            flex: 1;
-        }
-    }
-
-    .back-to-top {
-        height: 100%;
-        width: 100%;
-        background-color: #f2f5f6;
-        box-shadow: 0 0 6px rgba(0, 0, 0, .12);
-        text-align: center;
-        line-height: 40px;
-        color: #1989fa;
-    }
-}

vue/src/layout/component/SettingDrawer.vue

@@ -33,15 +33,15 @@
                 <el-switch :value="pageGetters.showLogo" @input="changePageShowLogo"/>
             </div>
             <div class="drawer-item">
-                <span>logo位置</span>
+                <span>分层结构</span>
                 <el-select
-                    :value="pageGetters.logoPosition"
+                    :value="pageGetters.position"
                     size="mini"
                     style="width: 80px"
-                    @input="changePageLogoPosition"
+                    @input="changePagePosition"
                 >
-                    <el-option value="aside" label="侧栏"/>
-                    <el-option value="head" label="顶栏"/>
+                    <el-option value="top-bottom" label="上下"/>
+                    <el-option value="left-right" label="左右"/>
                 </el-select>
             </div>
             <div class="drawer-item">
@@ -142,6 +142,8 @@ export default {
                     navMode: 'mix'
                 },
                 page: {
+                    showLogo: true,
+                    position: 'left-right',
                     showPageHeader: true,
                     showBackToTop: true
                 },
@@ -169,10 +171,11 @@ export default {
             appMutations.color(app.color)
             appMutations.navMode(app.navMode)
 
+            pageMutations.showLogo(page.showLogo)
+            pageMutations.position(page.position)
             pageMutations.showPageHeader(page.showPageHeader)
             pageMutations.showBackToTop(page.showBackToTop)
 
-            asideMutations.showLogo(aside.showLogo)
             asideMutations.uniqueOpen(aside.uniqueOpen)
             asideMutations.collapse(aside.collapse)
             asideMutations.showParentOnCollapse(aside.showParentOnCollapse)
@@ -188,6 +191,8 @@ export default {
             app.color = appGetters.color
             app.navMode = appGetters.navMode
 
+            page.showLogo = pageGetters.showLogo
+            page.position = pageGetters.position
             page.showPageHeader = pageGetters.showPageHeader
             page.showBackToTop = pageGetters.showBackToTop
 
@@ -218,8 +223,8 @@ export default {
         changePageShowLogo(v) {
             pageMutations.showLogo(v)
         },
-        changePageLogoPosition(v) {
-            pageMutations.logoPosition(v)
+        changePagePosition(v) {
+            pageMutations.position(v)
         },
         changePageShowHeader(v) {
             pageMutations.showPageHeader(v)
@@ -254,11 +259,13 @@ export default {
 
     created() {
         //增强所有以change开头的方法
-        for (const key of Object.keys(this)) {
-            if (!key.startsWith('change')) continue
-            const originMethod = this[key]
+        for (const [key, value] of Object.entries(this)) {
+            if (typeof value !== 'function' || !key.startsWith('change')) {
+                continue
+            }
+
             this[key] = (...arg) => {
-                originMethod.apply(this, arg)
+                value.apply(this, arg)
                 this.saveSetting()
             }
         }
@@ -269,6 +276,9 @@ export default {
         setLocalPersonalSettings(this.setting)
 
         this.updateLayoutStore()
+
+        //初始化时尝试修改主题色
+        this.changeThemeColor(this.setting.app.color)
     }
 }
 </script>

vue/src/layout/index.vue

@@ -4,6 +4,7 @@ import VAside from './component/Aside'
 import VHeader from './component/Header'
 import VPage from './component/Page'
 import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
+import {getters as pageGetters} from "@/layout/store/page"
 import {getters as tagsViewGetters} from "@/layout/store/tagsView"
 import {debounce} from "@/util"
 import {isMobile} from "@/util/browser"
@@ -16,23 +17,33 @@ export default {
     components: {VAside, VHeader, VPage},
 
     computed: {
-        containerClass() {
-            const arr = ['main-container', 'has-nav', `nav-mode-${appGetters.navMode}`]
-            tagsViewGetters.enabled && arr.push('has-tags-view')
-            return arr
-        }
+        isLeftRight() {
+            return pageGetters.position === 'left-right'
         },
-
-    methods: {
-        $_resizeHandler() {
-            if (!document.hidden) {
-                appMutations.isMobile(isMobile())
+        wrapperClass() {
+            return {
+                'app-wrapper': true,
+                'flex-column': !this.isLeftRight
             }
+        },
+        containerClass() {
+            return [
+                'main-container',
+                'has-nav',
+                `nav-mode-${appGetters.navMode}`,
+                this.isLeftRight && 'flex-column',
+                tagsViewGetters.enabled && 'has-tags-view'
+            ]
+        },
+        renderAside() {
+            return appGetters.isMobile || ['aside', 'aside-two-part', 'mix'].includes(appGetters.navMode)
         }
     },
 
     mounted() {
-        this.$_resizeHandler = debounce(this.$_resizeHandler)
+        this.$_resizeHandler = debounce(() => {
+            !document.hidden && appMutations.isMobile(isMobile())
+        })
         this.$_resizeHandler()
 
         window.addEventListener('resize', this.$_resizeHandler)
@@ -43,13 +54,12 @@ export default {
     },
 
     render() {
-        const renderAide = appGetters.isMobile || appGetters.navMode !== 'head'
         return (
-            <section class="app-wrapper">
-                {renderAide && <v-aside/>}
+            <section class={this.wrapperClass}>
+                {this.isLeftRight ? this.renderAside && <v-aside/> : <v-header/>}
 
                 <section class={this.containerClass}>
-                    <v-header/>
+                    {this.isLeftRight ? <v-header/> : <v-aside/>}
                     <v-page/>
                 </section>
             </section>
@@ -59,6 +69,11 @@ export default {
 </script>
 
 <style lang="scss">
+.app-wrapper.flex-column,
+.main-container.flex-column {
+    flex-direction: column;
+}
+
 .app-wrapper {
     display: flex;
     position: relative;
@@ -70,7 +85,6 @@ export default {
         flex: 1;
         overflow: hidden;
         position: relative;
-        flex-direction: column;
     }
 }
 </style>

vue/src/layout/store/aside.js

@@ -10,9 +10,6 @@ const state = {
     //抽屉模式时的显隐
     show: false,
 
-    //显示顶部logo
-    showLogo: true,
-
     //手风琴效果
     uniqueOpen: true,
 

vue/src/layout/store/page.js

@@ -13,8 +13,8 @@ const state = {
 
     //是否显示侧边栏或顶部导航栏的logo
     showLogo: true,
-    //logo位置，侧边栏（'aside'）、顶部导航栏（'head）
-    logoPosition: 'aside',
+    //分层结构，上下（'top-bottom'）、左右（'left-right'）
+    position: 'left-right',
     //是否显示页头
     showPageHeader: true,
     //是否显示返回顶部按钮

vue/src/view/example/cool/fluidPage.vue

@@ -38,7 +38,7 @@ export default {
     },
 
     mounted() {
-        this.parentDom = document.querySelector('.router-main')
+        this.parentDom = document.querySelector('.page-main')
         this.width = this.parentDom.clientWidth
         this.height = this.parentDom.clientHeight
         this.$_resizeHandler = debounce(() => {

vue/vue.config.js

@@ -56,6 +56,12 @@ module.exports = {
             }
         },
         plugins: [
+            new ThemeColorReplacer({
+                fileName: 'css/theme-colors.[contenthash:8].css',
+                matchColors: forElementUI.getElementUISeries('#1890ff'),
+                changeSelector: forElementUI.changeSelector,
+                injectCss: true
+            }),
             new CompressionWebpackPlugin({
                 filename: '[path].gz[query]',
                 algorithm: 'gzip',
@@ -64,11 +70,6 @@ module.exports = {
                 minRatio: 0.8,
                 deleteOriginalAssets: false,        //是否删除源文件
             }),
-            new ThemeColorReplacer({
-                fileName: 'css/theme-colors.[contenthash:8].css',
-                matchColors: forElementUI.getElementUISeries('#1890ff'),
-                changeSelector: forElementUI.changeSelector
-            }),
             settings.isDev ? EMPTY_PLUGIN : new BundleAnalyzerPlugin()
         ]
     },