From 34927b0f5133a7f826bbc6a34568f1cd70cc9939 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= <harrywan@webank.com>
Date: Mon, 18 Jan 2021 15:41:32 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20plugin-layout=E5=8E=BB=E6=8E=89=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8<style=20vars>?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/runtime/views/BaseLayout.vue          | 48 ++++++++++++-------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
index c31b1767..9ee87419 100644
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
@@ -8,7 +8,7 @@
         class="main-layout"
     >
         <template v-if="navigation !== 'top'">
-            <div v-if="fixedSideBar" class="layout-sider-fixed-stuff"></div>
+            <div v-if="fixedSideBar" :style="siderFixedStuffStyle" class="layout-sider-fixed-stuff"></div>
             <a-layout-sider
                 v-model:collapsed="collapsed"
                 :width="sideWidth"
@@ -30,6 +30,7 @@
             <a-layout-header v-if="currentFixedHeader" class="layout-header">
             </a-layout-header>
             <a-layout-header
+                :style="headerFixedStyle"
                 :class="[currentFixedHeader ? 'layout-header-fixed' : '']"
                 class="layout-header"
             >
@@ -129,6 +130,7 @@ export default {
         }
     },
     setup(props) {
+        const collapsed = ref(false);
         const route = useRoute();
         const routeHasLayout = computed(() => {
             const _routeLayout = route.meta.layout;
@@ -141,12 +143,39 @@ export default {
             return props.theme;
         });
         const currentFixedHeader = computed(() => props.fixedHeader || props.navigation === 'mixin');
+        const siderFixedStuffStyle = computed(() => {
+            if (collapsed.value) {
+                return {
+                    width: '80px'
+                };
+            }
+            return {
+                width: `${props.sideWidth}px`
+            };
+        });
+        const headerFixedStyle = computed(() => {
+            if (!currentFixedHeader.value) {
+                return {};
+            }
+            if (props.navigation === 'side') {
+                return {
+                    left: `${props.sideWidth}px`,
+                    width: `calc(100% - ${props.sideWidth}px)`
+                };
+            }
+            return {
+                left: 0,
+                width: '100%'
+            };
+        });
         return {
             siderTheme,
             currentFixedHeader,
             route,
             routeHasLayout,
-            collapsed: ref(false)
+            collapsed,
+            siderFixedStuffStyle,
+            headerFixedStyle
         };
     }
 };
@@ -164,10 +193,6 @@ export default {
                 }
             }
         }
-        .layout-sider-fixed-stuff {
-            overflow: hidden;
-            width: 80px;
-        }
     }
     &.main-layout-navigation-top {
         .layout-header {
@@ -198,10 +223,6 @@ export default {
                     line-height: 32px;
                 }
             }
-            &.layout-header-fixed {
-                left: 0;
-                width: 100%;
-            }
         }
     }
     &.main-layout-navigation-mixin {
@@ -240,15 +261,10 @@ export default {
                     line-height: 32px;
                 }
             }
-            &.layout-header-fixed {
-                left: 0;
-                width: 100%;
-            }
         }
     }
     .layout-sider-fixed-stuff {
         overflow: hidden;
-        width: var(--sideWidth);
         transition: width 0.2s;
         flex-shrink: 0;
     }
@@ -299,10 +315,8 @@ export default {
         &.layout-header-fixed {
             position: fixed;
             top: 0;
-            left: var(--sideWidth);
             right: 0;
             z-index: 10;
-            width: calc(100% - var(--sideWidth));
         }
     }
     .layout-content {