feat: 使用fes-design替换layout插件 80%

packages/fes-plugin-layout/package.json

@@ -33,7 +33,7 @@
     "@ant-design/icons-vue": "^6.0.0",
     "ant-design-vue": "^2.2.0",
     "@fesjs/fes": "^2.0.0",
-    "@fesjs/fes-design": "^0.1.2",
+    "@fesjs/fes-design": "^0.1.7",
     "vue": "^3.0.5"
   }
 }

packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue

@@ -21,7 +21,16 @@
                     :inverted="theme === 'dark'"
                 />
             </f-aside>
-            <f-layout>
+            <f-layout
+                :fixed="fixedSideBar"
+                :style="{
+                    left: fixedSideBar
+                        ? collapsed
+                            ? '48px'
+                            : `${sideWidth}px`
+                        : 'auto'
+                }"
+            >
                 <f-header
                     v-if="routeLayout.top"
                     class="layout-header"
@@ -34,14 +43,19 @@
                         <slot name="locale"></slot>
                     </template>
                 </f-header>
+                <f-layout
+                    :embedded="!multiTabs"
+                    :fixed="currentFixedHeader"
+                    :style="{ top: currentFixedHeader ? '54px' : 'auto' }"
+                >
                     <f-main class="layout-main">
-                    <MultiTabProvider v-if="multiTabs" />
+                        <MultiTabProvider :multiTabs="multiTabs" />
-                    <router-view v-else></router-view>
                     </f-main>
                     <f-footer v-if="footer" class="layout-footer">
                         {{footer}}
                     </f-footer>
                 </f-layout>
+            </f-layout>
         </template>
         <template v-if="navigation === 'top'">
             <f-header
@@ -67,19 +81,25 @@
                     <slot name="locale"></slot>
                 </template>
             </f-header>
+            <f-layout
+                :embedded="!multiTabs"
+                :fixed="currentFixedHeader"
+                :style="{ top: currentFixedHeader ? '54px' : 'auto' }"
+            >
                 <f-main class="layout-main">
-                <MultiTabProvider v-if="multiTabs" />
+                    <MultiTabProvider :multiTabs="multiTabs" />
-                <router-view v-else></router-view>
                 </f-main>
                 <f-footer v-if="footer" class="layout-footer">
                     {{footer}}
                 </f-footer>
+            </f-layout>
         </template>
         <template v-if="navigation === 'mixin'">
             <f-header
                 v-if="routeLayout.top"
                 class="layout-header"
                 :fixed="currentFixedHeader"
+                :inverted="theme === 'dark'"
             >
                 <div v-if="routeLayout.logo" class="layout-logo">
                     <img :src="logo" class="logo-img" />
@@ -92,13 +112,15 @@
                     <slot name="locale"></slot>
                 </template>
             </f-header>
-            <f-layout>
+            <f-layout
+                :fixed="currentFixedHeader"
+                :style="{ top: currentFixedHeader ? '54px' : 'auto' }"
+            >
                 <f-aside
                     v-if="routeLayout.side"
                     v-model:collapsed="collapsed"
                     :fixed="fixedSideBar"
                     collapsible
-                    :inverted="theme === 'dark'"
                     class="layout-aside"
                 >
                     <Menu
@@ -106,13 +128,21 @@
                         :menus="menus"
                         :collapsed="collapsed"
                         mode="vertical"
-                        :inverted="theme === 'dark'"
                     />
                 </f-aside>
-                <f-layout>
+                <f-layout
+                    :embedded="!multiTabs"
+                    :fixed="fixedSideBar"
+                    :style="{
+                        left: fixedSideBar
+                            ? collapsed
+                                ? '48px'
+                                : `${sideWidth}px`
+                            : 'auto'
+                    }"
+                >
                     <f-main class="layout-main">
-                        <MultiTabProvider v-if="multiTabs" />
+                        <MultiTabProvider :multiTabs="multiTabs" />
-                        <router-view v-else></router-view>
                     </f-main>
                     <f-footer v-if="footer" class="layout-footer">
                         {{footer}}
@@ -121,9 +151,7 @@
             </f-layout>
         </template>
     </f-layout>
-    <div v-else class="content-wrapper">
+    <router-view v-else></router-view>
-        <router-view></router-view>
-    </div>
 </template>
 
 <script>
@@ -232,65 +260,30 @@ export default {
         const currentFixedHeader = computed(
             () => props.fixedHeader || props.navigation === 'mixin'
         );
-        const asideFixedStyle = computed(() => {
-            if (
-                routeLayout.value.top
-                && props.navigation === 'mixin'
-                && props.fixedSideBar
-            ) {
-                return {
-                    top: '54px'
-                };
-            }
-            return {};
-        });
-
-        // const sideTheme = computed(() => {
-        //     if (props.navigation === 'mixin') {
-        //         return 'light';
-        //     }
-        //     return props.theme;
-        // });
-
-        // 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 {
             route,
             routeLayout,
             collapsed,
-            currentFixedHeader,
+            currentFixedHeader
-            asideFixedStyle
-            // sideTheme,
-            // currentFixedHeader,
-            // siderFixedStuffStyle,
-            // headerFixedStyle
         };
     }
 };
 </script>
 <style lang="less" scoped>
 .main-layout {
-    min-height: 100vh;
+    height: 100vh;
     .layout-header {
         display: flex;
+        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+        z-index: 1;
+        .layout-menu {
+            border-bottom: none;
+        }
         .layout-logo {
             display: flex;
+            margin: 0 24px;
             justify-content: flex-start;
             align-items: center;
-            min-width: 165px;
             height: 100%;
             overflow: hidden;
             transition: all 0.3s;
@@ -311,6 +304,8 @@ export default {
         }
     }
     .fes-layout-aside {
+        z-index: 1;
+        box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 5%);
         .layout-logo {
             height: 32px;
             margin: 16px;
@@ -318,7 +313,7 @@ export default {
             justify-content: flex-start;
             align-items: center;
             .logo-img {
-                height: 32px;
+                height: 36px;
                 width: auto;
             }
             .logo-name {
@@ -335,6 +330,10 @@ export default {
         &.is-collapsed {
             .layout-logo {
                 justify-content: center;
+                .logo-img {
+                    width: 40px;
+                    height: auto;
+                }
                 .logo-name {
                     display: none;
                 }
@@ -342,11 +341,8 @@ export default {
         }
     }
     .layout-footer {
+        padding: 16px;
         text-align: center;
     }
 }
-
-.content-wrapper {
-    position: relative;
-}
 </style>

packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue

@@ -1,4 +1,5 @@
 <template>
+    <template v-if="multiTabs">
         <a-tabs
             :activeKey="route.path"
             class="layout-content-tabs"
@@ -45,9 +46,11 @@
             </keep-alive>
         </router-view>
     </template>
+    <router-view v-else></router-view>
+</template>
 <script>
 import {
-    computed, onMounted, reactive, unref, ref
+    computed, onMounted, unref, ref
 } from 'vue';
 import Tabs from 'ant-design-vue/lib/tabs';
 import Dropdown from 'ant-design-vue/lib/dropdown';
@@ -71,17 +74,20 @@ export default {
         ReloadOutlined,
         MoreOutlined
     },
+    props: {
+        multiTabs: Boolean
+    },
     setup() {
         const route = useRoute();
         const router = useRouter();
         const pageList = ref([]);
 
-        const createPage = (route) => {
+        const createPage = (_route) => {
-            const title = route.meta.title;
+            const title = _route.meta.title;
             return {
-                path: route.path,
+                path: _route.path,
-                route,
+                route: _route,
-                name: route.meta.name,
+                name: _route.meta.name,
                 title: computed(() => transTitle(title)),
                 key: getKey()
             };

packages/fes-plugin-locale/package.json

@@ -33,7 +33,7 @@
   "peerDependencies": {
     "@ant-design/icons-vue": "^6.0.0",
     "@fesjs/fes": "^2.0.0",
-    "@fesjs/fes-design": "^0.1.2",
+    "@fesjs/fes-design": "^0.1.7",
     "vue": "^3.0.5"
   }
 }

packages/fes-plugin-locale/src/runtime/views/SelectLang.vue

@@ -1,5 +1,5 @@
 <template>
-    <FTooltip v-model="isOpened">
+    <FTooltip v-model="isOpened" popperClass="lang-popper" mode="popover">
         <div class="lang-icon">
             <GlobalOutlined />
         </div>
@@ -61,8 +61,13 @@ export default {
     }
 };
 </script>
-
+<style>
+.fes-tooltip.fes-tooltip-popover.lang-popper {
+    padding: 0;
+}
+</style>
 <style lang="less" scoped>
+
 .lang-icon {
     margin: 0 8px;
     padding: 0 4px;
@@ -70,6 +75,7 @@ export default {
 }
 .lang-container {
     width: 180px;
+    background: #ffffff;
     .lang-option {
         display: flex;
         align-items: center;

packages/fes-plugin-qiankun/examples/app1/src/components/PageLoading.vue

@@ -1,14 +1,15 @@
 <template>
     <div class="page-loading">
-        <Spin size="large" />
+        <f-spin size="large" stroke="#5384ff" />
     </div>
 </template>
 <script>
-import Spin from 'ant-design-vue/lib/spin';
+import { FSpin } from '@fesjs/fes-design';
-import 'ant-design-vue/lib/spin/style/css';
 
 export default {
-    components: { Spin },
+    components: {
+        FSpin
+    },
     setup() {
         return {
         };

packages/fes-plugin-qiankun/examples/main/src/components/PageLoading.vue

@@ -1,17 +1,17 @@
 <template>
     <div class="page-loading">
-        <Spin size="large" />
+        <f-spin size="large" stroke="#5384ff" />
     </div>
 </template>
 <script>
-import Spin from 'ant-design-vue/lib/spin';
+import { FSpin } from '@fesjs/fes-design';
-import 'ant-design-vue/lib/spin/style/css';
 
 export default {
-    components: { Spin },
+    components: {
+        FSpin
+    },
     setup() {
         return {
-
         };
     }
 };

packages/fes-plugin-qiankun/package.json

@@ -39,6 +39,7 @@
   },
   "peerDependencies": {
     "@fesjs/fes": "^2.0.0",
-    "vue": "^3.0.5"
+    "vue": "^3.0.5",
+    "@fesjs/fes-design": "^0.1.7"
   }
 }

packages/fes-template/.fes.js

@@ -34,7 +34,7 @@ export default {
         title: "Fes.js",
         footer: "Created by MumbleFe",
         multiTabs: true,
-        navigation: "side",
+        navigation: "top",
         theme: 'dark',
         menus: [
             {

packages/fes-template/package.json

@@ -59,7 +59,7 @@
     "@fesjs/plugin-sass": "^2.0.0",
     "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
     "@fesjs/plugin-windicss": "^2.0.0",
-    "@fesjs/fes-design": "^0.1.2",
+    "@fesjs/fes-design": "^0.1.7",
     "ant-design-vue": "^2.2.0",
     "vue": "^3.0.5",
     "vuex": "^4.0.0"

packages/fes-template/src/components/PageLoading.vue

@@ -1,15 +1,14 @@
 <template>
     <div class="page-loading">
-        <Spin size="large" />
+        <f-spin size="large" stroke="#5384ff" />
     </div>
 </template>
 <script>
-import Spin from 'ant-design-vue/lib/spin';
+import { FSpin } from '@fesjs/fes-design';
-import 'ant-design-vue/lib/spin/style/css';
 
 export default {
     components: {
-        Spin
+        FSpin
     },
     setup() {
         return {

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

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="page">
         home
     </div>
 </template>
@@ -20,5 +20,8 @@ export default {
 };
 </script>
 
-<style module>
+<style>
+.page {
+    min-height: 100vh;
+}
 </style>

yarn.lock

@@ -1400,10 +1400,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fesjs/fes-design@^0.1.2":
+"@fesjs/fes-design@^0.1.7":
-  version "0.1.2"
+  version "0.1.7"
-  resolved "https://registry.npmmirror.com/@fesjs/fes-design/download/@fesjs/fes-design-0.1.2.tgz#be1751561f10585bbb95de72e8863072112f640a"
+  resolved "https://registry.npmmirror.com/@fesjs/fes-design/download/@fesjs/fes-design-0.1.7.tgz#0443e36f10c41a4bca62909137d0f590f0a39a75"
-  integrity sha512-JIUd2uIC0O2E2JCUCm1pxT4ZSQg0z1+rFmtN0zS7OO0usZDKN0T/LSnivDc3K7QSAGMTeOYTgQCb6bLqf8jAfQ==
+  integrity sha512-VWjkCWzvZ8rN99xZtkeNr06GsvhHteLlaoujaO3NQ8cf03QkehIeNhlrAMiFuIRkB+13SUeHmJMo1qoL9lJV4g==
   dependencies:
     "@babel/runtime" "^7.16.3"
     "@juggle/resize-observer" "^3.3.1"