From a5bfd009d3f640166d5deee108e5b3daea22f2a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= <harrywan@webank.com>
Date: Wed, 6 Jan 2021 19:50:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=20layout=E6=94=AF=E6=8C=81side?=
 =?UTF-8?q?=E5=92=8Ctop=E4=B8=A4=E7=A7=8D=E5=B8=83=E5=B1=80=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E4=B8=A4=E7=A7=8D=E6=A8=A1=E5=BC=8F=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81fixedHeader=E5=92=8CfixedSideBar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/fes-compiler/package.json            |   1 -
 packages/fes-plugin-access/package.json       |   1 -
 packages/fes-plugin-icon/package.json         |   1 -
 packages/fes-plugin-layout/package.json       |   1 -
 .../fes-plugin-layout/src/template/index.tpl  |   2 +-
 .../src/views/BaseLayout.vue                  | 167 ++++++++++++++----
 .../src/views/MultiTabProvider.vue            | 129 ++++++++++----
 packages/fes-plugin-locale/package.json       |   1 -
 .../src/views/SelectLang.vue                  |   7 +-
 packages/fes-plugin-model/package.json        |   1 -
 packages/fes-plugin-request/package.json      |   1 -
 11 files changed, 231 insertions(+), 81 deletions(-)

diff --git a/packages/fes-compiler/package.json b/packages/fes-compiler/package.json
index c5021b92..e590aa2f 100644
--- a/packages/fes-compiler/package.json
+++ b/packages/fes-compiler/package.json
@@ -3,7 +3,6 @@
   "version": "2.0.0-alpha.0",
   "description": "@webank/fes-compiler",
   "main": "lib/index.js",
-  "types": "lib/index.d.ts",
   "files": [
     "lib"
   ],
diff --git a/packages/fes-plugin-access/package.json b/packages/fes-plugin-access/package.json
index 75bbc5bc..0c37d838 100644
--- a/packages/fes-plugin-access/package.json
+++ b/packages/fes-plugin-access/package.json
@@ -6,7 +6,6 @@
   "files": [
     "lib"
   ],
-  "module": "dist/index.esm.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/packages/fes-plugin-icon/package.json b/packages/fes-plugin-icon/package.json
index 58a0d70d..5a5b8c1a 100644
--- a/packages/fes-plugin-icon/package.json
+++ b/packages/fes-plugin-icon/package.json
@@ -9,7 +9,6 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "module": "dist/index.esm.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WeBankFinTech/fes.js.git",
diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json
index c03bf457..cff9269b 100644
--- a/packages/fes-plugin-layout/package.json
+++ b/packages/fes-plugin-layout/package.json
@@ -6,7 +6,6 @@
   "files": [
     "lib"
   ],
-  "module": "dist/index.esm.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/packages/fes-plugin-layout/src/template/index.tpl b/packages/fes-plugin-layout/src/template/index.tpl
index ff67008d..dd6ea19f 100644
--- a/packages/fes-plugin-layout/src/template/index.tpl
+++ b/packages/fes-plugin-layout/src/template/index.tpl
@@ -33,7 +33,7 @@ const Layout = defineComponent({
                     return null;
                 },
             };
-            return <BaseLayout {...userConfig} v-slots={slots}></BaseLayout>;
+            return <BaseLayout locale={ localeShared ? true : false } {...userConfig} v-slots={slots}></BaseLayout>;
         };
     }
 })
diff --git a/packages/fes-plugin-layout/src/views/BaseLayout.vue b/packages/fes-plugin-layout/src/views/BaseLayout.vue
index 40b451c9..9b0ad043 100644
--- a/packages/fes-plugin-layout/src/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/views/BaseLayout.vue
@@ -1,49 +1,75 @@
 <template>
-    <a-layout class="main-layout">
-        <a-layout-sider
-            v-if="routeHasLayout"
-            v-model:collapsed="collapsed"
-            :width="sideWidth"
-            :class="{ collapsed: collapsed }"
-            collapsible
-            theme="dark"
-            class="layout-sider"
-        >
-            <div class="logo">
-                <img :src="logo" class="logo-img" />
-                <h1 class="logo-name">{{title}}</h1>
-            </div>
-            <Menu :menus="menus" :theme="theme" />
-        </a-layout-sider>
-        <a-layout>
-            <a-layout-header v-if="routeHasLayout" class="layout-header">
-                <div class="layout-header-user">
+    <a-layout
+        v-if="routeHasLayout"
+        :class="[
+            collapsed ? 'main-layout-collapsed' : '',
+            `main-layout-navigation-${navigation}`
+        ]"
+        class="main-layout"
+    >
+        <template v-if="navigation !== 'top'">
+            <div v-if="fixedSideBar" class="layout-sider-fixed-stuff"></div>
+            <a-layout-sider
+                v-model:collapsed="collapsed"
+                :width="sideWidth"
+                :class="[
+                    'layout-sider',
+                    fixedSideBar ? 'layout-sider-fixed' : ''
+                ]"
+                collapsible
+                theme="dark"
+            >
+                <div class="layout-logo">
+                    <img :src="logo" class="logo-img" />
+                    <h1 class="logo-name">{{title}}</h1>
+                </div>
+                <Menu :menus="menus" :theme="theme" />
+            </a-layout-sider>
+        </template>
+        <a-layout class="child-layout">
+            <a-layout-header v-if="fixedHeader" class="layout-header">
+            </a-layout-header>
+            <a-layout-header
+                :class="[fixedHeader ? 'layout-header-fixed' : '']"
+                class="layout-header"
+            >
+                <template v-if="navigation === 'top'">
+                    <div class="layout-logo">
+                        <img :src="logo" class="logo-img" />
+                        <h1 class="logo-name">{{title}}</h1>
+                    </div>
+                    <Menu :menus="menus" :theme="theme" class="layout-menu" mode="horizontal" />
+                </template>
+                <div class="layout-header-custom">
                     <slot name="userCenter"></slot>
                 </div>
-                <slot name="locale"></slot>
+                <template v-if="locale">
+                    <slot name="locale"></slot>
+                </template>
             </a-layout-header>
             <a-layout-content class="layout-content">
                 <MultiTabProvider v-if="multiTabs" />
                 <router-view v-else></router-view>
             </a-layout-content>
-            <a-layout-footer v-if="routeHasLayout" class="layout-footer">
+            <a-layout-footer class="layout-footer">
                 Ant Design ©2020 Created by MumbleFe
             </a-layout-footer>
         </a-layout>
     </a-layout>
+    <div v-else class="layout-content">
+        <MultiTabProvider v-if="multiTabs" />
+        <router-view v-else></router-view>
+    </div>
 </template>
 
 <script>
-import {
-    ref, computed
-} from 'vue';
+import { ref, computed } from 'vue';
 import { useRoute } from '@@/core/coreExports';
 import Layout from 'ant-design-vue/lib/layout';
 import 'ant-design-vue/lib/layout/style';
 import Menu from './Menu';
 import MultiTabProvider from './MultiTabProvider';
 
-
 export default {
     components: {
         [Layout.name]: Layout,
@@ -75,7 +101,7 @@ export default {
         },
         theme: {
             type: String,
-            default: 'dark'
+            default: 'dark' // light、dark
         },
         navigation: {
             type: String,
@@ -113,29 +139,86 @@ export default {
 };
 </script>
 
-<style lang="less">
+<style lang="less" vars="{ sideWidth: sideWidth +'px' }">
 .main-layout {
     min-height: 100vh;
-    .layout-sider{
-        &.collapsed{
-            .logo{
+    &.main-layout-collapsed {
+        .layout-sider {
+            .logo {
                 justify-content: center;
-                .logo-name{
+                .logo-name {
                     display: none;
                 }
             }
         }
-        .logo {
+        .layout-sider-fixed-stuff {
+            overflow: hidden;
+            width: 80px;
+        }
+    }
+    &.main-layout-navigation-top {
+        .layout-header {
+            padding-left: 24px;
+            color: hsla(0,0%,100%,.65);
+            background: #001529;
+            .layout-menu {
+                line-height: 48px;
+            }
+            .layout-logo {
+                display: flex;
+                justify-content: flex-start;
+                align-items: center;
+                min-width: 165px;
+                height: 100%;
+                overflow: hidden;
+                transition: all .3s;
+                .logo-img {
+                    height: 32px;
+                    width: auto;
+                }
+                .logo-name {
+                    overflow: hidden;
+                    margin: 0 0 0 12px;
+                    color: #fff;
+                    font-weight: 600;
+                    font-size: 18px;
+                    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;
+    }
+    .child-layout {
+        position: relative;
+    }
+    .layout-sider {
+        &.layout-sider-fixed {
+            position: fixed;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 200px;
+        }
+        .layout-logo {
             height: 32px;
             margin: 16px;
             display: flex;
             justify-content: flex-start;
             align-items: center;
-            .logo-img{
+            .logo-img {
                 height: 32px;
                 width: auto;
             }
-            .logo-name{
+            .logo-name {
                 overflow: hidden;
                 margin: 0 0 0 12px;
                 color: #fff;
@@ -153,10 +236,18 @@ export default {
         height: 48px;
         line-height: 48px;
         background: #fff;
-        box-shadow: 0 1px 4px rgba(0,21,41,.08);
-        padding: 0 24px;
-        .layout-header-user {
-            flex: 1
+        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+        padding: 0;
+        .layout-header-custom {
+            flex: 1;
+        }
+        &.layout-header-fixed {
+            position: fixed;
+            top: 0;
+            left: var(--sideWidth);
+            right: 0;
+            z-index: 10;
+            width: calc(100% - var(--sideWidth));
         }
     }
     .layout-content {
diff --git a/packages/fes-plugin-layout/src/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/views/MultiTabProvider.vue
index 5bcdd5bd..ac414d7c 100644
--- a/packages/fes-plugin-layout/src/views/MultiTabProvider.vue
+++ b/packages/fes-plugin-layout/src/views/MultiTabProvider.vue
@@ -1,11 +1,38 @@
 <template>
-    <a-tabs :activeKey="route.path" @tabClick="switchTab" class="layout-content-tabs" hide-add type="editable-card">
-        <a-tab-pane v-for="page in openedPageList" :key="page.path" closable>
+    <a-tabs
+        :activeKey="route.path"
+        @tabClick="switchPage"
+        class="layout-content-tabs"
+        hide-add
+        type="editable-card"
+    >
+        <a-tab-pane v-for="page in pageList" :key="page.path" closable>
             <template #tab>
                 {{page.name}}
-                <ReloadOutlined v-show="route.path === page.path" @click="reloadTab(page.path)" class="layout-tabs-close-icon" />
+                <ReloadOutlined
+                    v-show="route.path === page.path"
+                    @click="reloadPage(page.path)"
+                    class="layout-tabs-close-icon"
+                />
             </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>
+                </template>
+            </a-dropdown>
+        </template>
     </a-tabs>
     <router-view v-slot="{ Component, route }">
         <keep-alive>
@@ -14,38 +41,46 @@
     </router-view>
 </template>
 <script>
-import {
-    reactive, unref
-} from 'vue';
+import { reactive, unref } from 'vue';
 import Tabs from 'ant-design-vue/lib/tabs';
+import Dropdown from 'ant-design-vue/lib/dropdown';
+import Menu from 'ant-design-vue/lib/menu';
+import 'ant-design-vue/lib/menu/style';
+import 'ant-design-vue/lib/dropdown/style';
 import 'ant-design-vue/lib/tabs/style';
-import { ReloadOutlined } from '@ant-design/icons-vue';
+import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue';
 import { useRouter, useRoute } from '@@/core/coreExports';
 
 let i = 0;
 const getKey = () => ++i;
 export default {
     components: {
+        [Dropdown.name]: Dropdown,
+        [Menu.name]: Menu,
+        [Menu.Item.name]: Menu.Item,
         [Tabs.name]: Tabs,
         [Tabs.TabPane.name]: Tabs.TabPane,
-        ReloadOutlined
+        ReloadOutlined,
+        MoreOutlined
     },
     setup() {
         const route = useRoute();
         const router = useRouter();
-        const openedPageList = reactive([{
-            path: unref(route.path),
-            route: {
-                query: unref(route.query),
-                params: unref(route.params)
-            },
-            name: unref(route.meta).name,
-            key: getKey()
-        }]);
-        const findPage = path => openedPageList.find(item => unref(item.path) === path);
+        const pageList = reactive([
+            {
+                path: unref(route.path),
+                route: {
+                    query: unref(route.query),
+                    params: unref(route.params)
+                },
+                name: unref(route.meta).name,
+                key: getKey()
+            }
+        ]);
+        const findPage = path => pageList.find(item => unref(item.path) === unref(path));
         router.beforeEach((to) => {
             if (!findPage(to.path)) {
-                openedPageList.push({
+                pageList.push({
                     path: to.path,
                     route: to,
                     name: to.meta.name,
@@ -55,7 +90,7 @@ export default {
             return true;
         });
         // 还需要考虑参数
-        const switchTab = (path) => {
+        const switchPage = (path) => {
             const selectedPage = findPage(path);
             if (selectedPage) {
                 router.push({
@@ -65,12 +100,17 @@ export default {
                 });
             }
         };
-        const reloadTab = (path) => {
-            const selectedPage = findPage(path);
+        const reloadPage = (path) => {
+            const selectedPage = findPage(path || unref(route.path));
             if (selectedPage) {
                 selectedPage.key = getKey();
             }
         };
+        const closeOtherPage = (path) => {
+            const selectedPage = findPage(path || unref(route.path));
+            pageList.length = 0;
+            pageList.push(selectedPage);
+        };
         const getPageKey = (_route) => {
             const selectedPage = findPage(_route.path);
             if (selectedPage) {
@@ -78,12 +118,25 @@ export default {
             }
             return '';
         };
+        const handlerMore = ({ key }) => {
+            console.log(key);
+            switch (key) {
+                case 'closeOtherPage':
+                    closeOtherPage();
+                    break;
+                case 'reloadPage':
+                    reloadPage();
+                    break;
+                default:
+            }
+        };
         return {
             route,
-            openedPageList,
+            pageList,
             getPageKey,
-            reloadTab,
-            switchTab
+            reloadPage,
+            switchPage,
+            handlerMore
         };
     }
 };
@@ -96,15 +149,23 @@ export default {
     width: 100%;
     .ant-tabs-nav-container {
         padding-left: 16px;
-        .layout-tabs-close-icon {
-            vertical-align: middle;
-            color: rgba(0, 0, 0, 0.45);
-            font-size: 12px;
-            margin-left: 6px;
-            margin-top: -2px;
-            &:hover{
-                color: rgba(0, 0, 0, 0.8);
-            }
+    }
+    .layout-tabs-close-icon {
+        vertical-align: middle;
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 12px;
+        margin-left: 6px;
+        margin-top: -2px;
+        &:hover {
+            color: rgba(0, 0, 0, 0.8);
+        }
+    }
+    .layout-tabs-more-icon {
+        margin-right: 8px;
+        padding: 0 4px;
+        color: rgba(0, 0, 0, 0.45);
+        &:hover {
+            color: rgba(0, 0, 0, 0.8);
         }
     }
 }
diff --git a/packages/fes-plugin-locale/package.json b/packages/fes-plugin-locale/package.json
index d8f50aed..f1c5fc8e 100644
--- a/packages/fes-plugin-locale/package.json
+++ b/packages/fes-plugin-locale/package.json
@@ -6,7 +6,6 @@
   "files": [
     "lib"
   ],
-  "module": "dist/index.esm.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/packages/fes-plugin-locale/src/views/SelectLang.vue b/packages/fes-plugin-locale/src/views/SelectLang.vue
index 963cca8c..751f6381 100644
--- a/packages/fes-plugin-locale/src/views/SelectLang.vue
+++ b/packages/fes-plugin-locale/src/views/SelectLang.vue
@@ -1,6 +1,6 @@
 <template>
     <a-dropdown>
-        <GlobalOutlined />
+        <div class="lang-icon"><GlobalOutlined /></div>
         <template #overlay>
             <a-menu :selectedKeys="selectedKeys" @click="handleClick">
                 <a-menu-item
@@ -53,6 +53,11 @@ export default {
 </script>
 
 <style lang="less">
+.lang-icon {
+    margin: 0 8px;
+    padding: 0 4px;
+    cursor: pointer;
+}
 .lang-item {
     display: flex;
     align-items: center;
diff --git a/packages/fes-plugin-model/package.json b/packages/fes-plugin-model/package.json
index 2701475a..ba8a212f 100644
--- a/packages/fes-plugin-model/package.json
+++ b/packages/fes-plugin-model/package.json
@@ -6,7 +6,6 @@
   "files": [
     "lib"
   ],
-  "module": "dist/index.esm.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/packages/fes-plugin-request/package.json b/packages/fes-plugin-request/package.json
index 1f28c210..d6ca6b4f 100644
--- a/packages/fes-plugin-request/package.json
+++ b/packages/fes-plugin-request/package.json
@@ -9,7 +9,6 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "module": "dist/index.esm.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WeBankFinTech/fes.js.git",