chore: v3.1.10

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [3.1.10](https://ssh.github.com:443/WeBankFinTech/fes.js/compare/v3.1.9...v3.1.10) (2024-05-21)
+
+
+### Features
+
+* **plugin-layout:** 增加 top-left 布局类型 ([#243](https://ssh.github.com:443/WeBankFinTech/fes.js/issues/243)) ([8375fe9](https://ssh.github.com:443/WeBankFinTech/fes.js/commit/8375fe9be7f9469732e0a32120e0a1c7c846bc31))
+
+
+
 ## [3.1.9](https://github.com/WeBankFinTech/fes.js/compare/v3.1.8...v3.1.9) (2024-5-8)
 
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "fes.js",
     "type": "module",
-    "version": "3.1.9",
+    "version": "3.1.10",
     "private": true,
     "description": "一个好用的前端管理台快速开发框架",
     "preferGlobal": true,

packages/fes-plugin-layout/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fesjs/plugin-layout",
-    "version": "5.1.11",
+    "version": "5.1.12",
     "description": "@fesjs/plugin-layout",
     "author": "harrywan",
     "license": "MIT",

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,
         };
     },
 };

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;