From e0adcf868bf434a06bf98169ad3d6c5d03a11a4d Mon Sep 17 00:00:00 2001
From: ocean_gao <gaopandyx@163.com>
Date: Tue, 21 May 2024 15:17:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(plugin-layout):=20=E5=A2=9E=E5=8A=A0=20top?=
 =?UTF-8?q?-left=20=E5=B8=83=E5=B1=80=E7=B1=BB=E5=9E=8B=20(#243)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/runtime/views/BaseLayout.vue          | 88 +++++++++++++++++++
 packages/fes-plugin-layout/types.d.ts         |  2 +-
 2 files changed, 89 insertions(+), 1 deletion(-)

diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
index 58c6a3e3..f064f68d 100644
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
@@ -127,6 +127,58 @@
                 </FFooter>
             </FLayout>
         </template>
+        <template v-else-if="currentNavigation === 'top-left'">
+            <FHeader ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
+                <div class="layout-logo">
+                    <img v-if="logo" :src="logo" class="logo-img">
+                    <div v-if="title" class="logo-name">
+                        {{ title }}
+                    </div>
+                </div>
+                <LayoutMenu
+                    class="layout-menu"
+                    :menus="rootMenus"
+                    mode="horizontal"
+                    :inverted="theme === 'dark'"
+                />
+                <div class="layout-header-custom">
+                    <slot name="renderCustom" :menus="menus" />
+                </div>
+                <template v-if="locale">
+                    <slot name="locale" />
+                </template>
+            </FHeader>
+            <FLayout v-if="activeSubMenus.length" :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
+                <FAside v-model:collapsed="collapsedRef" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside">
+                    <LayoutMenu
+                        class="layout-menu"
+                        :menus="activeSubMenus"
+                        :collapsed="collapsedRef"
+                        mode="vertical"
+                        :expanded-keys="menuProps?.expandedKeys"
+                        :default-expand-all="menuProps?.defaultExpandAll"
+                        :accordion="menuProps?.accordion"
+                    />
+                </FAside>
+
+                <FLayout :embedded="!multiTabs" :fixed="isFixedSidebar" :style="sideStyleRef">
+                    <FMain class="layout-main">
+                        <MultiTabProvider :multi-tabs="multiTabs" />
+                    </FMain>
+                    <FFooter v-if="footer" class="layout-footer">
+                        {{ footer }}
+                    </FFooter>
+                </FLayout>
+            </FLayout>
+            <FLayout v-else :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
+                <FMain class="layout-main">
+                    <MultiTabProvider :multi-tabs="multiTabs" />
+                </FMain>
+                <FFooter v-if="footer" class="layout-footer">
+                    {{ footer }}
+                </FFooter>
+            </FLayout>
+        </template>
         <template v-else-if="currentNavigation === 'mixin'">
             <FHeader ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef" :inverted="theme === 'dark'">
                 <div class="layout-logo">
@@ -282,6 +334,40 @@ export default {
             },
         );
 
+        const rootMenus = computed(() => {
+            return props.menus.filter((menu) => {
+                return menu.path;
+            }).map((menu) => {
+                const { children, ...others } = menu;
+                return {
+                    ...others,
+                    _children: children,
+                };
+            });
+        });
+
+        const activeRootMenu = computed(() => {
+            const matchRootMenus = rootMenus.value.filter((menu) => {
+                const match = menu.match;
+                if (!match || !Array.isArray(match)) {
+                    return false;
+                }
+                return match.some((str) => {
+                    const reg = new RegExp(str);
+                    return reg.test(route.path);
+                });
+            });
+
+            return matchRootMenus[0] ?? null;
+        });
+
+        const activeSubMenus = computed(() => {
+            if (!activeRootMenu.value) {
+                return [];
+            }
+            return activeRootMenu.value._children || [];
+        });
+
         return {
             headerRef,
             headerHeightRef,
@@ -291,6 +377,8 @@ export default {
             headerStyleRef,
             sideStyleRef,
             currentNavigation,
+            rootMenus,
+            activeSubMenus,
         };
     },
 };
diff --git a/packages/fes-plugin-layout/types.d.ts b/packages/fes-plugin-layout/types.d.ts
index 2ce1c828..71b3a58b 100644
--- a/packages/fes-plugin-layout/types.d.ts
+++ b/packages/fes-plugin-layout/types.d.ts
@@ -22,7 +22,7 @@ interface Menu {
     children?: Menu[];
 }
 
-type Navigation = 'side' | 'mixin' | 'top' | 'left-right';
+type Navigation = 'side' | 'mixin' | 'top' | 'left-right' | 'top-left';
 
 export const Page: Component;