From 9eb0704c8e7d201191952524118c867eaf4c8641 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= <harrywan@webank.com>
Date: Fri, 8 Jan 2021 18:57:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=20plugin-layout=E6=94=AF=E6=8C=81mixin?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/BaseLayout.vue                  | 65 +++++++++++++++++--
 packages/fes-plugin-layout/src/views/Menu.vue |  2 +-
 packages/fes-preset-built-in/src/index.js     |  6 +-
 3 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/packages/fes-plugin-layout/src/views/BaseLayout.vue b/packages/fes-plugin-layout/src/views/BaseLayout.vue
index 9b0ad043..32cbbd4c 100644
--- a/packages/fes-plugin-layout/src/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/views/BaseLayout.vue
@@ -16,23 +16,27 @@
                     'layout-sider',
                     fixedSideBar ? 'layout-sider-fixed' : ''
                 ]"
+                :theme="siderTheme"
                 collapsible
-                theme="dark"
             >
-                <div class="layout-logo">
+                <div v-if="navigation !== 'mixin'" class="layout-logo">
                     <img :src="logo" class="logo-img" />
                     <h1 class="logo-name">{{title}}</h1>
                 </div>
-                <Menu :menus="menus" :theme="theme" />
+                <Menu :menus="menus" :theme="siderTheme" />
             </a-layout-sider>
         </template>
         <a-layout class="child-layout">
-            <a-layout-header v-if="fixedHeader" class="layout-header">
+            <a-layout-header v-if="currentFixedHeader" class="layout-header">
             </a-layout-header>
             <a-layout-header
-                :class="[fixedHeader ? 'layout-header-fixed' : '']"
+                :class="[currentFixedHeader ? 'layout-header-fixed' : '']"
                 class="layout-header"
             >
+                <div v-if="navigation === 'mixin'" class="layout-logo">
+                    <img :src="logo" class="logo-img" />
+                    <h1 class="logo-name">{{title}}</h1>
+                </div>
                 <template v-if="navigation === 'top'">
                     <div class="layout-logo">
                         <img :src="logo" class="logo-img" />
@@ -105,7 +109,7 @@ export default {
         },
         navigation: {
             type: String,
-            default: 'side' // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）
+            default: 'mixin' // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）
         },
         fixedHeader: {
             type: Boolean,
@@ -124,13 +128,22 @@ export default {
             default: 200
         }
     },
-    setup() {
+    setup(props) {
         const route = useRoute();
         const routeHasLayout = computed(() => {
             const _routeLayout = route.meta.layout;
             return _routeLayout === undefined ? true : _routeLayout;
         });
+        const siderTheme = computed(() => {
+            if (props.navigation === 'mixin') {
+                return 'light';
+            }
+            return props.theme;
+        });
+        const currentFixedHeader = computed(() => props.fixedHeader || props.navigation === 'mixin');
         return {
+            siderTheme,
+            currentFixedHeader,
             route,
             routeHasLayout,
             collapsed: ref(false)
@@ -191,6 +204,44 @@ export default {
             }
         }
     }
+    &.main-layout-navigation-mixin {
+        .layout-sider {
+            padding: 48px 0 0;
+        }
+        .layout-header {
+            padding-left: 24px;
+            color: hsla(0,0%,100%,.65);
+            background: #001529;
+            .layout-menu {
+                line-height: 48px;
+            }
+            .layout-logo {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                min-width: 165px;
+                height: 100%;
+                overflow: hidden;
+                transition: all .3s;
+                .logo-img {
+                    height: 32px;
+                    width: auto;
+                }
+                .logo-name {
+                    overflow: hidden;
+                    margin: 0 0 0 12px;
+                    color: #fff;
+                    font-weight: 600;
+                    font-size: 18px;
+                    line-height: 32px;
+                }
+            }
+            &.layout-header-fixed {
+                left: 0;
+                width: 100%;
+            }
+        }
+    }
     .layout-sider-fixed-stuff {
         overflow: hidden;
         width: var(--sideWidth);
diff --git a/packages/fes-plugin-layout/src/views/Menu.vue b/packages/fes-plugin-layout/src/views/Menu.vue
index 3813932a..5ee7d084 100644
--- a/packages/fes-plugin-layout/src/views/Menu.vue
+++ b/packages/fes-plugin-layout/src/views/Menu.vue
@@ -2,7 +2,7 @@
     <a-menu
         :selectedKeys="selectedKeys"
         @click="onMenuClick"
-        theme="dark"
+        :theme="theme"
         mode="inline"
     >
         <template v-for="(item, index) in menus" :key="index">
diff --git a/packages/fes-preset-built-in/src/index.js b/packages/fes-preset-built-in/src/index.js
index 3b256beb..211a97a1 100644
--- a/packages/fes-preset-built-in/src/index.js
+++ b/packages/fes-preset-built-in/src/index.js
@@ -4,9 +4,6 @@ export default function () {
             // register methods
             require.resolve('./plugins/registerMethods'),
 
-            // misc
-            require.resolve('./plugins/misc/route'),
-
             // generate files
             require.resolve('./plugins/generateFiles/core/plugin'),
             require.resolve('./plugins/generateFiles/core/exports/coreExports'),
@@ -49,6 +46,9 @@ export default function () {
             require.resolve('./plugins/features/terserOptions'),
             require.resolve('./plugins/features/vueLoader'),
 
+            // misc
+            require.resolve('./plugins/misc/route'),
+
             // commands
             require.resolve('./plugins/commands/build'),
             require.resolve('./plugins/commands/dev')