From 50db7dc908d3c684315e395c820263ed94316f16 Mon Sep 17 00:00:00 2001
From: harrywan <445436867@qq.com>
Date: Tue, 22 Feb 2022 19:02:43 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20layout=E7=BB=84=E4=BB=B6=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9=E6=80=A7=E6=9B=B4=E5=A5=BD,=E5=8D=87=E7=BA=A7fes-desi?=
 =?UTF-8?q?gn=E7=89=88=E6=9C=AC=20(#100)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/app/pc/package.json             |  2 +-
 packages/fes-plugin-layout/package.json       |  2 +-
 .../src/runtime/views/BaseLayout.vue          | 59 ++++++++-----------
 packages/fes-template/.fes.js                 |  6 +-
 packages/fes-template/package.json            |  2 +-
 packages/fes-template/src/pages/index.vue     |  1 +
 .../src/pages/menuTest/{a.vue => @id.vue}     | 11 +++-
 .../fes-template/src/pages/menuTest/index.vue |  5 ++
 .../src/pages/menuTest/layout.vue             |  8 +++
 yarn.lock                                     |  8 +--
 10 files changed, 58 insertions(+), 46 deletions(-)
 rename packages/fes-template/src/pages/menuTest/{a.vue => @id.vue} (54%)
 create mode 100644 packages/fes-template/src/pages/menuTest/layout.vue

diff --git a/packages/create-fes-app/templates/app/pc/package.json b/packages/create-fes-app/templates/app/pc/package.json
index e6c3065f..54b42aa4 100644
--- a/packages/create-fes-app/templates/app/pc/package.json
+++ b/packages/create-fes-app/templates/app/pc/package.json
@@ -52,7 +52,7 @@
     "@fesjs/plugin-layout": "^4.0.0",
     "@fesjs/plugin-model": "^2.0.0",
     "@fesjs/plugin-enums": "^2.0.0",
-    "@fesjs/fes-design": "^0.2.6",
+    "@fesjs/fes-design": "^0.3.0",
     "vue": "^3.2.6",
     "core-js": "^3.8.3"
   },
diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json
index 7223dc9b..15c1c502 100644
--- a/packages/fes-plugin-layout/package.json
+++ b/packages/fes-plugin-layout/package.json
@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "@fesjs/fes": "^2.0.0",
-    "@fesjs/fes-design": "^0.2.6",
+    "@fesjs/fes-design": "^0.3.3",
     "vue": "^3.0.5"
   }
 }
diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
index c9643e34..adf1efda 100644
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
@@ -3,7 +3,7 @@
         <template v-if="navigation === 'side'">
             <f-aside
                 v-if="routeLayout.sidebar"
-                v-model:collapsed="collapsed"
+                v-model:collapsed="collapsedRef"
                 :fixed="fixedSideBar"
                 :width="`${sideWidth}px`"
                 class="layout-aside"
@@ -17,26 +17,20 @@
                 <Menu
                     class="layout-menu"
                     :menus="menus"
-                    :collapsed="collapsed"
+                    :collapsed="collapsedRef"
                     mode="vertical"
                     :inverted="theme === 'dark'"
                 />
             </f-aside>
             <f-layout
                 :fixed="fixedSideBar"
-                :style="{
-                    left: fixedSideBar
-                        ? collapsed
-                            ? '48px'
-                            : `${sideWidth}px`
-                        : 'auto'
-                }"
+                :style="sideStyleRef"
             >
                 <f-header
                     v-if="routeLayout.header"
                     ref="headerRef"
                     class="layout-header"
-                    :fixed="currentFixedHeader"
+                    :fixed="currentFixedHeaderRef"
                 >
                     <div class="layout-header-custom">
                         <slot name="customHeader"></slot>
@@ -47,8 +41,8 @@
                 </f-header>
                 <f-layout
                     :embedded="!multiTabs"
-                    :fixed="currentFixedHeader"
-                    :style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
+                    :fixed="currentFixedHeaderRef"
+                    :style="headerStyleRef"
                 >
                     <f-main class="layout-main">
                         <MultiTabProvider :multiTabs="multiTabs" />
@@ -65,7 +59,7 @@
                 ref="headerRef"
                 class="layout-header"
                 :inverted="theme === 'dark'"
-                :fixed="currentFixedHeader"
+                :fixed="currentFixedHeaderRef"
             >
                 <div v-if="routeLayout.logo" class="layout-logo">
                     <img :src="logo" class="logo-img" />
@@ -86,8 +80,8 @@
             </f-header>
             <f-layout
                 :embedded="!multiTabs"
-                :fixed="currentFixedHeader"
-                :style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
+                :fixed="currentFixedHeaderRef"
+                :style="headerStyleRef"
             >
                 <f-main class="layout-main">
                     <MultiTabProvider :multiTabs="multiTabs" />
@@ -102,7 +96,7 @@
                 v-if="routeLayout.header"
                 ref="headerRef"
                 class="layout-header"
-                :fixed="currentFixedHeader"
+                :fixed="currentFixedHeaderRef"
                 :inverted="theme === 'dark'"
             >
                 <div v-if="routeLayout.logo" class="layout-logo">
@@ -116,13 +110,10 @@
                     <slot name="locale"></slot>
                 </template>
             </f-header>
-            <f-layout
-                :fixed="currentFixedHeader"
-                :style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
-            >
+            <f-layout :fixed="currentFixedHeaderRef" :style="headerStyleRef">
                 <f-aside
                     v-if="routeLayout.sidebar"
-                    v-model:collapsed="collapsed"
+                    v-model:collapsed="collapsedRef"
                     :fixed="fixedSideBar"
                     :width="`${sideWidth}px`"
                     collapsible
@@ -131,20 +122,14 @@
                     <Menu
                         class="layout-menu"
                         :menus="menus"
-                        :collapsed="collapsed"
+                        :collapsed="collapsedRef"
                         mode="vertical"
                     />
                 </f-aside>
                 <f-layout
                     :embedded="!multiTabs"
                     :fixed="fixedSideBar"
-                    :style="{
-                        left: fixedSideBar
-                            ? collapsed
-                                ? '48px'
-                                : `${sideWidth}px`
-                            : 'auto'
-                    }"
+                    :style="sideStyleRef"
                 >
                     <f-main class="layout-main">
                         <MultiTabProvider :multiTabs="multiTabs" />
@@ -234,7 +219,7 @@ export default {
             }
         });
 
-        const collapsed = ref(false);
+        const collapsedRef = ref(false);
         const route = useRoute();
         const runtimeConfig = plugin.applyPlugins({
             key: 'layout',
@@ -271,16 +256,24 @@ export default {
             }
             return config;
         });
-        const currentFixedHeader = computed(
+        const currentFixedHeaderRef = computed(
             () => props.fixedHeader || props.navigation === 'mixin'
         );
+        const headerStyleRef = computed(() => (currentFixedHeaderRef.value ? { top: `${headerHeightRef.value}px` } : {}));
+        const sideStyleRef = computed(() => (props.fixedSideBar
+            ? {
+                left: collapsedRef.value ? '48px' : `${props.sideWidth}px`
+            }
+            : {}));
         return {
             headerRef,
             headerHeightRef,
             route,
             routeLayout,
-            collapsed,
-            currentFixedHeader
+            collapsedRef,
+            currentFixedHeaderRef,
+            headerStyleRef,
+            sideStyleRef
         };
     }
 };
diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js
index e9af40ae..82c2d81d 100644
--- a/packages/fes-template/.fes.js
+++ b/packages/fes-template/.fes.js
@@ -34,7 +34,7 @@ export default {
         title: 'Fes.js',
         footer: 'Created by MumbleFE',
         multiTabs: false,
-        navigation: 'mixin',
+        navigation: 'side',
         theme: 'dark',
         menus: [
             {
@@ -64,10 +64,6 @@ export default {
                         title: '子菜单',
                         path: '/menuTest'
                     },
-                    {
-                        title: '子菜单a',
-                        path: '/menuTest/a'
-                    }
                 ]
             },
             {
diff --git a/packages/fes-template/package.json b/packages/fes-template/package.json
index 547fe21a..84fda620 100644
--- a/packages/fes-template/package.json
+++ b/packages/fes-template/package.json
@@ -60,7 +60,7 @@
     "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
     "@fesjs/plugin-windicss": "^2.0.0",
     "@fesjs/plugin-pinia": "^2.0.0",
-    "@fesjs/fes-design": "^0.2.10",
+    "@fesjs/fes-design": "^0.3.3",
     "vue": "^3.0.5",
     "vuex": "^4.0.0",
     "pinia": "^2.0.11"
diff --git a/packages/fes-template/src/pages/index.vue b/packages/fes-template/src/pages/index.vue
index ec5f7c64..c8fb7f9b 100644
--- a/packages/fes-template/src/pages/index.vue
+++ b/packages/fes-template/src/pages/index.vue
@@ -21,6 +21,7 @@ export default {
 
 <style>
 .page {
+    height: 1000px;
 }
 </style>
 
diff --git a/packages/fes-template/src/pages/menuTest/a.vue b/packages/fes-template/src/pages/menuTest/@id.vue
similarity index 54%
rename from packages/fes-template/src/pages/menuTest/a.vue
rename to packages/fes-template/src/pages/menuTest/@id.vue
index cb0d9d84..4977d60f 100644
--- a/packages/fes-template/src/pages/menuTest/a.vue
+++ b/packages/fes-template/src/pages/menuTest/@id.vue
@@ -1,14 +1,23 @@
 <template>
     <div class="page">
-        menuTest-a
+        menuTest: {{route.params}}
     </div>
 </template>
+<config>
+{
+    "title": "menuTest-详情"
+}
+</config>
 <script>
+import { useRoute } from '@fesjs/fes';
+
 export default {
     components: {
     },
     setup() {
+        const route = useRoute();
         return {
+            route
         };
     }
 };
diff --git a/packages/fes-template/src/pages/menuTest/index.vue b/packages/fes-template/src/pages/menuTest/index.vue
index cc76a7e4..d3ce9c1b 100644
--- a/packages/fes-template/src/pages/menuTest/index.vue
+++ b/packages/fes-template/src/pages/menuTest/index.vue
@@ -3,6 +3,11 @@
         menuTest-index
     </div>
 </template>
+<config>
+{
+    "title": "menuTest"
+}
+</config>
 <script>
 export default {
     components: {
diff --git a/packages/fes-template/src/pages/menuTest/layout.vue b/packages/fes-template/src/pages/menuTest/layout.vue
new file mode 100644
index 00000000..6e323c0d
--- /dev/null
+++ b/packages/fes-template/src/pages/menuTest/layout.vue
@@ -0,0 +1,8 @@
+<template>
+    <div style="display: flex;flex-direction: column;">
+        <router-link to="/menuTest/1">Go to 1</router-link>
+        <router-link to="/menuTest/2">Go to 2</router-link>
+        <router-link to="/menuTest/3">Go to 3</router-link>
+    </div>
+    <router-view />
+</template>
diff --git a/yarn.lock b/yarn.lock
index 308b0025..e5507e3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1453,10 +1453,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fesjs/fes-design@^0.2.10":
-  version "0.2.11"
-  resolved "https://registry.npmmirror.com/@fesjs/fes-design/-/fes-design-0.2.11.tgz#b0b7857e8122e787206ba0166f6c7b894a323b28"
-  integrity sha512-kunu3gOHsDied7XT57btH7WkhyAe4WNvKHoSsFzYlMmvT3wIW9RlYlmebD8e7SRCq12Ule1F+7YdYHDf/w6v/A==
+"@fesjs/fes-design@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.npmmirror.com/@fesjs/fes-design/-/fes-design-0.3.3.tgz#c78a1ec37869de7e12ae94468fbb0fb04e0d6a81"
+  integrity sha512-wSbgMzsBILHhHhUV8EqYBLJYn3r0chO7jCx0dpIEDHxGmve8yUL3G23saJLFKF28P/GUEHr5u4iUf8b05+sgNg==
   dependencies:
     "@babel/runtime" "^7.16.3"
     "@juggle/resize-observer" "^3.3.1"