feat(plugin-layout): 增加 top-left 布局类型

WeBankFinTech · May 21, 2024 · 6858c55 · 6858c55
1 parent ed561d7
commit 6858c55
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 1 deletion.
diff --git 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
@@ -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;