refactor: layout组件兼容性更好,升级fes-design版本 (#100)

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"
   },

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"
   }
 }

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="{
+                :style="sideStyleRef"
-                    left: fixedSideBar
-                        ? collapsed
-                            ? '48px'
-                            : `${sideWidth}px`
-                        : 'auto'
-                }"
             >
                 <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"
+                    :fixed="currentFixedHeaderRef"
-                    :style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
+                    :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"
+                :fixed="currentFixedHeaderRef"
-                :style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
+                :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
+            <f-layout :fixed="currentFixedHeaderRef" :style="headerStyleRef">
-                :fixed="currentFixedHeader"
-                :style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
-            >
                 <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="{
+                    :style="sideStyleRef"
-                        left: fixedSideBar
-                            ? collapsed
-                                ? '48px'
-                                : `${sideWidth}px`
-                            : 'auto'
-                    }"
                 >
                     <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,
+            collapsedRef,
-            currentFixedHeader
+            currentFixedHeaderRef,
+            headerStyleRef,
+            sideStyleRef
         };
     }
 };

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'
-                    }
                 ]
             },
             {

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"

packages/fes-template/src/pages/index.vue

@@ -21,6 +21,7 @@ export default {
 
 <style>
 .page {
+    height: 1000px;
 }
 </style>
 

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
         };
     }
 };

packages/fes-template/src/pages/menuTest/index.vue

@@ -3,6 +3,11 @@
         menuTest-index
     </div>
 </template>
+<config>
+{
+    "title": "menuTest"
+}
+</config>
 <script>
 export default {
     components: {

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>

yarn.lock

@@ -1453,10 +1453,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fesjs/fes-design@^0.2.10":
+"@fesjs/fes-design@^0.3.3":
-  version "0.2.11"
+  version "0.3.3"
-  resolved "https://registry.npmmirror.com/@fesjs/fes-design/-/fes-design-0.2.11.tgz#b0b7857e8122e787206ba0166f6c7b894a323b28"
+  resolved "https://registry.npmmirror.com/@fesjs/fes-design/-/fes-design-0.3.3.tgz#c78a1ec37869de7e12ae94468fbb0fb04e0d6a81"
-  integrity sha512-kunu3gOHsDied7XT57btH7WkhyAe4WNvKHoSsFzYlMmvT3wIW9RlYlmebD8e7SRCq12Ule1F+7YdYHDf/w6v/A==
+  integrity sha512-wSbgMzsBILHhHhUV8EqYBLJYn3r0chO7jCx0dpIEDHxGmve8yUL3G23saJLFKF28P/GUEHr5u4iUf8b05+sgNg==
   dependencies:
     "@babel/runtime" "^7.16.3"
     "@juggle/resize-observer" "^3.3.1"