From 8d381ad1ac67566e38265f686dd30f2a9fc23f5e Mon Sep 17 00:00:00 2001
From: wanchun <445436867@qq.com>
Date: Tue, 28 Dec 2021 20:08:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BD=BF=E7=94=A8fes-design=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2layout=E6=8F=92=E4=BB=B6=2080%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/fes-plugin-layout/package.json       |   2 +-
 .../src/runtime/views/BaseLayout.vue          | 140 +++++++++---------
 .../src/runtime/views/MultiTabProvider.vue    | 104 +++++++------
 packages/fes-plugin-locale/package.json       |   2 +-
 .../src/runtime/views/SelectLang.vue          |  10 +-
 .../app1/src/components/PageLoading.vue       |   9 +-
 .../main/src/components/PageLoading.vue       |  10 +-
 packages/fes-plugin-qiankun/package.json      |   3 +-
 packages/fes-template/.fes.js                 |   2 +-
 packages/fes-template/package.json            |   2 +-
 .../src/components/PageLoading.vue            |   7 +-
 packages/fes-template/src/pages/index.vue     |   7 +-
 yarn.lock                                     |   8 +-
 13 files changed, 159 insertions(+), 147 deletions(-)

diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json
index 699a14a7..dafff536 100644
--- a/packages/fes-plugin-layout/package.json
+++ b/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"
   }
 }
diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
index 954fad49..21f3bc9f 100644
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/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,13 +43,18 @@
                         <slot name="locale"></slot>
                     </template>
                 </f-header>
-                <f-main class="layout-main">
-                    <MultiTabProvider v-if="multiTabs" />
-                    <router-view v-else></router-view>
-                </f-main>
-                <f-footer v-if="footer" class="layout-footer">
-                    {{footer}}
-                </f-footer>
+                <f-layout
+                    :embedded="!multiTabs"
+                    :fixed="currentFixedHeader"
+                    :style="{ top: currentFixedHeader ? '54px' : 'auto' }"
+                >
+                    <f-main class="layout-main">
+                        <MultiTabProvider :multiTabs="multiTabs" />
+                    </f-main>
+                    <f-footer v-if="footer" class="layout-footer">
+                        {{footer}}
+                    </f-footer>
+                </f-layout>
             </f-layout>
         </template>
         <template v-if="navigation === 'top'">
@@ -67,19 +81,25 @@
                     <slot name="locale"></slot>
                 </template>
             </f-header>
-            <f-main class="layout-main">
-                <MultiTabProvider v-if="multiTabs" />
-                <router-view v-else></router-view>
-            </f-main>
-            <f-footer v-if="footer" class="layout-footer">
-                {{footer}}
-            </f-footer>
+            <f-layout
+                :embedded="!multiTabs"
+                :fixed="currentFixedHeader"
+                :style="{ top: currentFixedHeader ? '54px' : 'auto' }"
+            >
+                <f-main class="layout-main">
+                    <MultiTabProvider :multiTabs="multiTabs" />
+                </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" />
-                        <router-view v-else></router-view>
+                        <MultiTabProvider :multiTabs="multiTabs" />
                     </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></router-view>
-    </div>
+    <router-view v-else></router-view>
 </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,
-            asideFixedStyle
-            // sideTheme,
-            // currentFixedHeader,
-            // siderFixedStuffStyle,
-            // headerFixedStyle
+            currentFixedHeader
         };
     }
 };
 </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>
diff --git a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
index 668f9909..9a50927e 100644
--- a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
@@ -1,53 +1,56 @@
 <template>
-    <a-tabs
-        :activeKey="route.path"
-        class="layout-content-tabs"
-        hide-add
-        type="editable-card"
-        @tabClick="switchPage"
-        @edit="onEdit"
-    >
-        <a-tab-pane
-            v-for="page in pageList"
-            :key="page.path"
-            :closable="route.path !== page.path"
+    <template v-if="multiTabs">
+        <a-tabs
+            :activeKey="route.path"
+            class="layout-content-tabs"
+            hide-add
+            type="editable-card"
+            @tabClick="switchPage"
+            @edit="onEdit"
         >
-            <template #tab>
-                {{page.title}}
-                <ReloadOutlined
-                    v-show="route.path === page.path"
-                    class="layout-tabs-close-icon"
-                    @click="reloadPage(page.path)"
-                />
-            </template>
-        </a-tab-pane>
-        <template #tabBarExtraContent>
-            <a-dropdown>
-                <div class="layout-tabs-more-icon">
-                    <MoreOutlined />
-                </div>
-                <template #overlay>
-                    <a-menu @click="handlerMore">
-                        <a-menu-item key="closeOtherPage">
-                            <a href="javascript:;">关闭其他</a>
-                        </a-menu-item>
-                        <a-menu-item key="reloadPage">
-                            <a href="javascript:;">刷新当前页</a>
-                        </a-menu-item>
-                    </a-menu>
+            <a-tab-pane
+                v-for="page in pageList"
+                :key="page.path"
+                :closable="route.path !== page.path"
+            >
+                <template #tab>
+                    {{page.title}}
+                    <ReloadOutlined
+                        v-show="route.path === page.path"
+                        class="layout-tabs-close-icon"
+                        @click="reloadPage(page.path)"
+                    />
                 </template>
-            </a-dropdown>
-        </template>
-    </a-tabs>
-    <router-view v-slot="{ Component, route }">
-        <keep-alive>
-            <component :is="Component" :key="getPageKey(route)" />
-        </keep-alive>
-    </router-view>
+            </a-tab-pane>
+            <template #tabBarExtraContent>
+                <a-dropdown>
+                    <div class="layout-tabs-more-icon">
+                        <MoreOutlined />
+                    </div>
+                    <template #overlay>
+                        <a-menu @click="handlerMore">
+                            <a-menu-item key="closeOtherPage">
+                                <a href="javascript:;">关闭其他</a>
+                            </a-menu-item>
+                            <a-menu-item key="reloadPage">
+                                <a href="javascript:;">刷新当前页</a>
+                            </a-menu-item>
+                        </a-menu>
+                    </template>
+                </a-dropdown>
+            </template>
+        </a-tabs>
+        <router-view v-slot="{ Component, route }">
+            <keep-alive>
+                <component :is="Component" :key="getPageKey(route)" />
+            </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 title = route.meta.title;
+        const createPage = (_route) => {
+            const title = _route.meta.title;
             return {
-                path: route.path,
-                route,
-                name: route.meta.name,
+                path: _route.path,
+                route: _route,
+                name: _route.meta.name,
                 title: computed(() => transTitle(title)),
                 key: getKey()
             };
diff --git a/packages/fes-plugin-locale/package.json b/packages/fes-plugin-locale/package.json
index 3966d9df..91eb72dc 100644
--- a/packages/fes-plugin-locale/package.json
+++ b/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"
   }
 }
diff --git a/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue b/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue
index 0fcfc62f..3fecf013 100644
--- a/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue
+++ b/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;
diff --git a/packages/fes-plugin-qiankun/examples/app1/src/components/PageLoading.vue b/packages/fes-plugin-qiankun/examples/app1/src/components/PageLoading.vue
index 7af67ee9..e544021a 100644
--- a/packages/fes-plugin-qiankun/examples/app1/src/components/PageLoading.vue
+++ b/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 'ant-design-vue/lib/spin/style/css';
+import { FSpin } from '@fesjs/fes-design';
 
 export default {
-    components: { Spin },
+    components: {
+        FSpin
+    },
     setup() {
         return {
         };
diff --git a/packages/fes-plugin-qiankun/examples/main/src/components/PageLoading.vue b/packages/fes-plugin-qiankun/examples/main/src/components/PageLoading.vue
index 1d1b5b14..e544021a 100644
--- a/packages/fes-plugin-qiankun/examples/main/src/components/PageLoading.vue
+++ b/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 'ant-design-vue/lib/spin/style/css';
+import { FSpin } from '@fesjs/fes-design';
 
 export default {
-    components: { Spin },
+    components: {
+        FSpin
+    },
     setup() {
         return {
-
         };
     }
 };
diff --git a/packages/fes-plugin-qiankun/package.json b/packages/fes-plugin-qiankun/package.json
index ef23dc42..2ce85fbf 100644
--- a/packages/fes-plugin-qiankun/package.json
+++ b/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"
   }
 }
diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js
index f5d64787..85352ffd 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: true,
-        navigation: "side",
+        navigation: "top",
         theme: 'dark',
         menus: [
             {
diff --git a/packages/fes-template/package.json b/packages/fes-template/package.json
index 59fac3bc..eff21cbb 100644
--- a/packages/fes-template/package.json
+++ b/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"
diff --git a/packages/fes-template/src/components/PageLoading.vue b/packages/fes-template/src/components/PageLoading.vue
index aa7c9bbe..e544021a 100644
--- a/packages/fes-template/src/components/PageLoading.vue
+++ b/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 'ant-design-vue/lib/spin/style/css';
+import { FSpin } from '@fesjs/fes-design';
 
 export default {
     components: {
-        Spin
+        FSpin
     },
     setup() {
         return {
diff --git a/packages/fes-template/src/pages/index.vue b/packages/fes-template/src/pages/index.vue
index 6b635544..02421515 100644
--- a/packages/fes-template/src/pages/index.vue
+++ b/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>
diff --git a/yarn.lock b/yarn.lock
index f3b1cfa7..c9a6523e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1400,10 +1400,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fesjs/fes-design@^0.1.2":
-  version "0.1.2"
-  resolved "https://registry.npmmirror.com/@fesjs/fes-design/download/@fesjs/fes-design-0.1.2.tgz#be1751561f10585bbb95de72e8863072112f640a"
-  integrity sha512-JIUd2uIC0O2E2JCUCm1pxT4ZSQg0z1+rFmtN0zS7OO0usZDKN0T/LSnivDc3K7QSAGMTeOYTgQCb6bLqf8jAfQ==
+"@fesjs/fes-design@^0.1.7":
+  version "0.1.7"
+  resolved "https://registry.npmmirror.com/@fesjs/fes-design/download/@fesjs/fes-design-0.1.7.tgz#0443e36f10c41a4bca62909137d0f590f0a39a75"
+  integrity sha512-VWjkCWzvZ8rN99xZtkeNr06GsvhHteLlaoujaO3NQ8cf03QkehIeNhlrAMiFuIRkB+13SUeHmJMo1qoL9lJV4g==
   dependencies:
     "@babel/runtime" "^7.16.3"
     "@juggle/resize-observer" "^3.3.1"