feat(plugin-layout): 支持配置 403、404 的 navigation (#224)

* feat: 升级 eslint 配置及版本 * feat(plugin-layout): 支持配置 403、404 的 navigation * docs: 补充文档
2024-11-29 18:28:09 +08:00 · 2024-01-12 12:43:57 +08:00 · 2024-01-12 12:43:57 +08:00 · 74fa0ba122
commit 74fa0ba122
parent 14d7f6eaad
8 changed files with 605 additions and 400 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,48 +1,35 @@
 {
-  // Enable the ESlint flat config support
-  "eslint.experimental.useFlatConfig": true,
+    // Enable the ESlint flat config support
+    "eslint.experimental.useFlatConfig": true,

-  // Disable the default formatter, use eslint instead
-  "prettier.enable": false,
-  "editor.formatOnSave": false,
+    // Disable the default formatter, use eslint instead
+    "prettier.enable": false,
+    "editor.formatOnSave": false,

-  // Auto fix
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
-    "source.organizeImports": "never"
-  },
+    // Auto fix
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit",
+        "source.organizeImports": "never"
+    },

-  // Silent the stylistic rules in you IDE, but still auto fix them
-  "eslint.rules.customizations": [
-    { "rule": "style/*", "severity": "off" },
-    { "rule": "*-indent", "severity": "off" },
-    { "rule": "*-spacing", "severity": "off" },
-    { "rule": "*-spaces", "severity": "off" },
-    { "rule": "*-order", "severity": "off" },
-    { "rule": "*-dangle", "severity": "off" },
-    { "rule": "*-newline", "severity": "off" },
-    { "rule": "*quotes", "severity": "off" },
-    { "rule": "*semi", "severity": "off" }
-  ],
+    // Enable eslint for all supported languages
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact",
+        "vue",
+        "html",
+        "markdown",
+        "json",
+        "jsonc",
+        "yaml"
+    ],

-  // Enable eslint for all supported languages
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "vue",
-    "html",
-    "markdown",
-    "json",
-    "jsonc",
-    "yaml"
-  ],
-
-  "pair-diff.patterns": [
-    {
-      "source": "./fixtures/output/**/*.*",
-      "target": "./fixtures/input/<base>"
-    }
-  ]
+    "pair-diff.patterns": [
+        {
+            "source": "./fixtures/output/**/*.*",
+            "target": "./fixtures/input/<base>"
+        }
+    ]
 }
--- a/docs/reference/plugin/plugins/layout.md
+++ b/docs/reference/plugin/plugins/layout.md
@ -90,8 +90,9 @@ Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由，以 `layout

 ```vue
 <template>
-    <Page></Page>
+    <Page />
 </template>
+
 <script>
 import { Page } from '@fesjs/fes';
 export default {
@ -112,7 +113,7 @@ export default {
 export default {
    layout: {
        // 标题
-        title: "Fes.js",
+        title: 'Fes.js',
        // 底部文字
        footer: 'Created by MumbleFE',
        // 主题light
@ -128,6 +129,7 @@ export default {
        }],

    },
+};
 ```

 #### 运行时配置方式
@ -146,27 +148,29 @@ export const layout = {
 };
 ```

-在`fes.js`中，运行时配置有定义对象和函数两种方式，当使用函数配置`layout`时，`layoutConfig`是编译时配置结果，`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。  
+在`fes.js`中，运行时配置有定义对象和函数两种方式，当使用函数配置`layout`时，`layoutConfig`是编译时配置结果，`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。
 。

 ```js
-export const layout = (layoutConfig, { initialState }) => ({
-    renderCustom: () => <UserCenter />,
-    menus: () => {
-        const menusRef = ref(layoutConfig.menus);
-        watch(
-            () => initialState.userName,
-            () => {
-                menusRef.value = [
-                    {
-                        name: 'store',
-                    },
-                ];
-            },
-        );
-        return menusRef;
-    },
-});
+export function layout(layoutConfig, { initialState }) {
+    return {
+        renderCustom: () => <UserCenter />,
+        menus: () => {
+            const menusRef = ref(layoutConfig.menus);
+            watch(
+                () => initialState.userName,
+                () => {
+                    menusRef.value = [
+                        {
+                            name: 'store',
+                        },
+                    ];
+                },
+            );
+            return menusRef;
+        },
+    };
+}
 ```

 最终配置结果是运行时配置跟编译时配置合并的结果，运行时配置优先于编译时配置。
@ -194,6 +198,12 @@ export const layout = (layoutConfig, { initialState }) => ({

 -   **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin`

+### navigationOnError
+
+-   **类型**：`String`、`Function`
+
+-   **详情**：指定 `403`、`404` 时，页面的布局类型。值同 `navigation`。也支持函数返回。
+
 ### isFixedHeader

 -   **类型**：`Boolean`
@ -382,7 +392,7 @@ import { useRoute, useTabTitle } from '@fesjs/fes';

 const titleRef = useTabTitle(`详情-${route.params?.id}`);

-//如果要更新
+// 如果要更新
 titleRef.value = 'changed';
 </script>
 ```
--- a/eslint.config.js
+++ b/eslint.config.js
@ -2,19 +2,36 @@
 import antfu from '@antfu/eslint-config';

 export default await antfu({
+    files: ['**/*.js', '**/*.jsx', '**/*.vue', '**/*.ts'],
+    // TODO: 使用 ignore 代替 cli 命令中的配置
    stylistic: {
-        indent: 4, // 4, or 'tab'
-        quotes: 'single', // or 'double'
+        indent: 4,
+        quotes: 'single',
        semi: 'always',
    },
    typescript: true,
    vue: true,
    rules: {
+        'curly': ['error', 'multi-line'],
        'vue/block-order': [
            'error',
            {
                order: ['template', 'script', 'style'],
            },
        ],
+        'style/member-delimiter-style': [
+            'error',
+            {
+                multiline: {
+                    delimiter: 'semi',
+                    requireLast: true,
+                },
+                singleline: {
+                    delimiter: 'semi',
+                    requireLast: false,
+                },
+                multilineDetection: 'brackets',
+            },
+        ],
    },
 });
--- a/package.json
+++ b/package.json
@ -1,13 +1,21 @@
 {
    "name": "fes.js",
+    "type": "module",
    "version": "3.1.1",
+    "private": true,
    "description": "一个好用的前端管理台快速开发框架",
    "preferGlobal": true,
-    "private": true,
    "workspaces": [
        "packages/*"
    ],
-    "type": "module",
+    "license": "MIT",
+    "keywords": [
+        "管理端",
+        "fes",
+        "fast",
+        "easy",
+        "strong"
+    ],
    "scripts": {
        "bootstrap": "pnpm i",
        "dev": "node scripts/build.mjs --watch",
@ -18,17 +26,10 @@
        "docs:build": "vitepress build docs",
        "docs:build-pages": "BASE=fes.js vitepress build docs",
        "test": "fes test",
-        "lint": "eslint -c ./.eslintrc.js --ignore-pattern='templates' --ext .js,.jsx,.vue,.ts",
-        "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
+        "lint": "eslint --ignore-pattern='templates'",
+        "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+        "hooks:sync": "simple-git-hooks"
    },
-    "license": "MIT",
-    "keywords": [
-        "管理端",
-        "fes",
-        "fast",
-        "easy",
-        "strong"
-    ],
    "dependencies": {
        "chalk": "^5.0.1",
        "conventional-changelog-cli": "^4.1.0",
@ -38,14 +39,14 @@
        "semver": "^7.3.6"
    },
    "devDependencies": {
-        "@antfu/eslint-config": "^2.1.1",
+        "@antfu/eslint-config": "^2.6.2",
        "@commitlint/cli": "^11.0.0",
        "@commitlint/config-conventional": "^11.0.0",
        "chokidar": "^3.5.3",
        "commitizen": "^4.3.0",
        "cz-conventional-changelog": "^3.3.0",
        "deepmerge": "^4.2.2",
-        "eslint": "^8.54.0",
+        "eslint": "^8.56.0",
        "fs-extra": "^11.1.1",
        "lint-staged": "^13.2.0",
        "simple-git-hooks": "^2.9.0",
@ -54,15 +55,15 @@
        "vue": "^3.3.4",
        "yargs-parser": "^21.1.1"
    },
+    "simple-git-hooks": {
+        "pre-commit": "lint-staged",
+        "commit-msg": "commitlint"
+    },
    "lint-staged": {
        "*.{js,jsx,vue,ts}": [
            "npm run lint"
        ]
    },
-    "simple-git-hooks": {
-        "pre-commit": "lint-staged",
-        "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    },
    "config": {
        "commitizen": {
            "path": "./node_modules/cz-conventional-changelog"
--- a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
@ -1,7 +1,7 @@
 <template>
-    <f-layout class="main-layout">
+    <FLayout class="main-layout">
        <template v-if="currentNavigation === 'side'">
-            <f-aside
+            <FAside
                v-model:collapsed="collapsedRef"
                :fixed="isFixedSidebar"
                :width="`${sideWidth}px`"
@ -10,41 +10,43 @@
                :inverted="theme === 'dark'"
            >
                <div class="layout-logo">
-                    <img v-if="logo" :src="logo" class="logo-img" />
-                    <div v-if="title" class="logo-name">{{ title }}</div>
+                    <img v-if="logo" :src="logo" class="logo-img">
+                    <div v-if="title" class="logo-name">
+                        {{ title }}
+                    </div>
                </div>
-                <Menu
+                <LayoutMenu
                    class="layout-menu"
                    :menus="menus"
                    :collapsed="collapsedRef"
                    mode="vertical"
                    :inverted="theme === 'dark'"
-                    :expandedKeys="menuProps?.expandedKeys"
-                    :defaultExpandAll="menuProps?.defaultExpandAll"
+                    :expanded-keys="menuProps?.expandedKeys"
+                    :default-expand-all="menuProps?.defaultExpandAll"
                    :accordion="menuProps?.accordion"
                />
-            </f-aside>
-            <f-layout :fixed="isFixedSidebar" :style="sideStyleRef">
-                <f-header ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef">
+            </FAside>
+            <FLayout :fixed="isFixedSidebar" :style="sideStyleRef">
+                <FHeader ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef">
                    <div class="layout-header-custom">
-                        <slot name="renderCustom" :menus="menus"></slot>
+                        <slot name="renderCustom" :menus="menus" />
                    </div>
                    <template v-if="locale">
-                        <slot name="locale"></slot>
+                        <slot name="locale" />
                    </template>
-                </f-header>
-                <f-layout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
-                    <f-main class="layout-main">
-                        <MultiTabProvider :multiTabs="multiTabs" />
-                    </f-main>
-                    <f-footer v-if="footer" class="layout-footer">
+                </FHeader>
+                <FLayout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
+                    <FMain class="layout-main">
+                        <MultiTabProvider :multi-tabs="multiTabs" />
+                    </FMain>
+                    <FFooter v-if="footer" class="layout-footer">
                        {{ footer }}
-                    </f-footer>
-                </f-layout>
-            </f-layout>
+                    </FFooter>
+                </FLayout>
+            </FLayout>
        </template>
        <template v-else-if="currentNavigation === 'left-right'">
-            <f-aside
+            <FAside
                v-model:collapsed="collapsedRef"
                :fixed="isFixedSidebar"
                :width="`${sideWidth}px`"
@ -55,121 +57,127 @@
                <div class="flex-between">
                    <div>
                        <div class="layout-logo">
-                            <img v-if="logo" :src="logo" class="logo-img" />
-                            <div v-if="title" class="logo-name">{{ title }}</div>
+                            <img v-if="logo" :src="logo" class="logo-img">
+                            <div v-if="title" class="logo-name">
+                                {{ title }}
+                            </div>
                        </div>
-                        <Menu
+                        <LayoutMenu
                            class="layout-menu"
                            :menus="menus"
                            :collapsed="collapsedRef"
                            mode="vertical"
                            :inverted="theme === 'dark'"
-                            :expandedKeys="menuProps?.expandedKeys"
-                            :defaultExpandAll="menuProps?.defaultExpandAll"
+                            :expanded-keys="menuProps?.expandedKeys"
+                            :default-expand-all="menuProps?.defaultExpandAll"
                            :accordion="menuProps?.accordion"
                        />
                    </div>
                    <div>
                        <div class="layout-aside-custom">
-                            <slot name="renderCustom" :menus="menus"></slot>
+                            <slot name="renderCustom" :menus="menus" />
                        </div>
                        <div v-if="locale" class="layout-aside-locale">
-                            <slot name="locale"></slot>
+                            <slot name="locale" />
                        </div>
                    </div>
                </div>
-            </f-aside>
-            <f-layout :fixed="isFixedSidebar" :style="sideStyleRef">
-                <f-layout :embedded="!multiTabs">
-                    <f-main class="layout-main">
-                        <MultiTabProvider :multiTabs="multiTabs" />
-                    </f-main>
-                    <f-footer v-if="footer" class="layout-footer">
+            </FAside>
+            <FLayout :fixed="isFixedSidebar" :style="sideStyleRef">
+                <FLayout :embedded="!multiTabs">
+                    <FMain class="layout-main">
+                        <MultiTabProvider :multi-tabs="multiTabs" />
+                    </FMain>
+                    <FFooter v-if="footer" class="layout-footer">
                        {{ footer }}
-                    </f-footer>
-                </f-layout>
-            </f-layout>
+                    </FFooter>
+                </FLayout>
+            </FLayout>
        </template>
        <template v-else-if="currentNavigation === 'top'">
-            <f-header ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
+            <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>
+                    <img v-if="logo" :src="logo" class="logo-img">
+                    <div v-if="title" class="logo-name">
+                        {{ title }}
+                    </div>
                </div>
-                <Menu
+                <LayoutMenu
                    class="layout-menu"
                    :menus="menus"
                    mode="horizontal"
                    :inverted="theme === 'dark'"
-                    :expandedKeys="menuProps?.expandedKeys"
-                    :defaultExpandAll="menuProps?.defaultExpandAll"
+                    :expanded-keys="menuProps?.expandedKeys"
+                    :default-expand-all="menuProps?.defaultExpandAll"
                    :accordion="menuProps?.accordion"
                />
                <div class="layout-header-custom">
-                    <slot name="renderCustom" :menus="menus"></slot>
+                    <slot name="renderCustom" :menus="menus" />
                </div>
                <template v-if="locale">
-                    <slot name="locale"></slot>
+                    <slot name="locale" />
                </template>
-            </f-header>
-            <f-layout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
-                <f-main class="layout-main">
-                    <MultiTabProvider :multiTabs="multiTabs" />
-                </f-main>
-                <f-footer v-if="footer" class="layout-footer">
+            </FHeader>
+            <FLayout :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
+                <FMain class="layout-main">
+                    <MultiTabProvider :multi-tabs="multiTabs" />
+                </FMain>
+                <FFooter v-if="footer" class="layout-footer">
                    {{ footer }}
-                </f-footer>
-            </f-layout>
+                </FFooter>
+            </FLayout>
        </template>
        <template v-else-if="currentNavigation === 'mixin'">
-            <f-header ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef" :inverted="theme === 'dark'">
+            <FHeader ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef" :inverted="theme === 'dark'">
                <div class="layout-logo">
-                    <img v-if="logo" :src="logo" class="logo-img" />
-                    <div v-if="title" class="logo-name">{{ title }}</div>
+                    <img v-if="logo" :src="logo" class="logo-img">
+                    <div v-if="title" class="logo-name">
+                        {{ title }}
+                    </div>
                </div>
                <div class="layout-header-custom">
-                    <slot name="renderCustom" :menus="menus"></slot>
+                    <slot name="renderCustom" :menus="menus" />
                </div>
                <template v-if="locale">
-                    <slot name="locale"></slot>
+                    <slot name="locale" />
                </template>
-            </f-header>
-            <f-layout :fixed="currentFixedHeaderRef" :style="headerStyleRef">
-                <f-aside v-model:collapsed="collapsedRef" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside">
-                    <Menu
+            </FHeader>
+            <FLayout :fixed="currentFixedHeaderRef" :style="headerStyleRef">
+                <FAside v-model:collapsed="collapsedRef" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside">
+                    <LayoutMenu
                        class="layout-menu"
                        :menus="menus"
                        :collapsed="collapsedRef"
                        mode="vertical"
-                        :expandedKeys="menuProps?.expandedKeys"
-                        :defaultExpandAll="menuProps?.defaultExpandAll"
+                        :expanded-keys="menuProps?.expandedKeys"
+                        :default-expand-all="menuProps?.defaultExpandAll"
                        :accordion="menuProps?.accordion"
                    />
-                </f-aside>
-                <f-layout :embedded="!multiTabs" :fixed="isFixedSidebar" :style="sideStyleRef">
-                    <f-main class="layout-main">
-                        <MultiTabProvider :multiTabs="multiTabs" />
-                    </f-main>
-                    <f-footer v-if="footer" class="layout-footer">
+                </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 }}
-                    </f-footer>
-                </f-layout>
-            </f-layout>
+                    </FFooter>
+                </FLayout>
+            </FLayout>
        </template>
        <template v-else>
-            <f-main class="layout-main">
-                <router-view></router-view>
-            </f-main>
+            <FMain class="layout-main">
+                <router-view />
+            </FMain>
        </template>
-    </f-layout>
+    </FLayout>
 </template>

 <script>
-import { ref, computed, watch, nextTick } from 'vue';
 import { useRoute, useRouter } from '@@/core/coreExports';
-import { FLayout, FAside, FMain, FFooter, FHeader } from '@fesjs/fes-design';
+import { FAside, FFooter, FHeader, FLayout, FMain } from '@fesjs/fes-design';
+import { computed, nextTick, ref, watch } from 'vue';
 import defaultLogo from '../assets/logo.png';
-import Menu from './Menu.vue';
+import LayoutMenu from './Menu.vue';
 import MultiTabProvider from './MultiTabProvider.vue';

 export default {
@ -179,7 +187,7 @@ export default {
        FMain,
        FFooter,
        FHeader,
-        Menu,
+        LayoutMenu,
        MultiTabProvider,
    },
    props: {
@ -209,6 +217,9 @@ export default {
            type: String,
            default: 'side', // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）
        },
+        navigationOnError: {
+            type: [String, Function], // 403, 404 时的 navigation
+        },
        isFixedHeader: {
            type: Boolean,
            default: false,
@ -241,6 +252,12 @@ export default {
            if (route.meta.layout && route.meta.layout.navigation !== undefined) {
                return route.meta.layout.navigation;
            }
+            if (props.navigationOnError !== undefined && ['/403', '/404'].includes(route.path)) {
+                if (typeof props.navigationOnError === 'function') {
+                    return props.navigationOnError(route);
+                }
+                return props.navigationOnError;
+            }
            return props.navigation;
        });

@ -278,6 +295,7 @@ export default {
    },
 };
 </script>
+
 <style lang="less" scoped>
 .main-layout {
    height: 100vh;
--- a/packages/fes-plugin-layout/src/runtime/views/index.jsx
+++ b/packages/fes-plugin-layout/src/runtime/views/index.jsx
@ -1,9 +1,9 @@
-import { unref, defineComponent, computed } from 'vue';
 import { plugin } from '@@/core/coreExports';
 import { getRoutes } from '@@/core/routes/routes';
-// eslint-disable-next-line import/extensions
-import getConfig from '../helpers/getConfig';
+import { computed, defineComponent, unref } from 'vue';
+
 import fillMenu from '../helpers/fillMenu';
+import getConfig from '../helpers/getConfig';
 import BaseLayout from './BaseLayout.vue';

 const Layout = defineComponent({
@ -33,11 +33,12 @@ const Layout = defineComponent({
            return (
                <BaseLayout
                    menus={filledMenuRef.value}
-                    locale={localeShared ? true : false}
+                    locale={!!localeShared}
                    title={config.title}
                    logo={config.logo}
                    theme={config.theme}
                    navigation={config.navigation}
+                    navigationOnError={config.navigationOnError}
                    isFixedHeader={config.isFixedHeader}
                    isFixedSidebar={config.isFixedSidebar}
                    multiTabs={config.multiTabs}
@ -45,7 +46,7 @@ const Layout = defineComponent({
                    footer={config.footer}
                    menuProps={config.menuProps}
                    v-slots={slots}
-                ></BaseLayout>
+                />
            );
        };
    },
--- a/packages/fes-plugin-layout/types.d.ts
+++ b/packages/fes-plugin-layout/types.d.ts
@ -1,6 +1,6 @@
-import { Component, VNode, Ref } from 'vue';
-import { Router, RouteLocationNormalized, NavigationGuardNext, NavigationGuard } from 'vue-router';
-import { MenuOption } from '@fesjs/fes-design/es/menu/interface';
+import type { MenuOption } from '@fesjs/fes-design/es/menu/interface';
+import type { Component, Ref, VNode } from 'vue';
+import type { NavigationGuard, NavigationGuardNext, RouteLocationNormalized, Router } from 'vue-router';

 interface CustomNavigationGuardOption {
    router: Router;
@ -22,6 +22,8 @@ interface Menu {
    children?: Menu[];
 }

+type Navigation = 'side' | 'mixin' | 'top' | 'left-right';
+
 export const Page: Component;

 export function useTabTitle(title: string | Ref<string>): void;
@ -29,7 +31,8 @@ export function useTabTitle(title: string | Ref<string>): void;
 interface LayoutRuntimeConfig {
    footer?: string;
    theme?: 'dark' | 'light';
-    navigation?: 'side' | 'top' | 'mixin' | 'left-right';
+    navigation?: Navigation;
+    navigationOnError?: Navigation | ((route: RouteLocationNormalized) => Navigation | null);
    title?: string;
    isFixedHeader?: boolean;
    isFixedSidebar?: boolean;
@ -51,28 +54,29 @@ declare module '@fesjs/fes' {
    interface RouteMeta {
        'keep-alive'?: boolean;
        layout?: {
-            navigation?: 'side' | 'mixin' | 'top' | 'left-right' | null;
+            navigation?: Navigation | null;
        };
    }
    interface PluginBuildConfig {
        layout?:
            | {
-                  footer: string;
-                  theme: 'dark' | 'light';
-                  navigation: 'side' | 'top' | 'mixin' | 'left-right';
-                  title: string;
-                  isFixedHeader: boolean;
-                  isFixedSidebar: boolean;
-                  logo: string;
-                  multiTabs: boolean;
-                  sideWidth: number;
-                  menus: Menu[];
-                  menuProps: {
-                      expandedKeys: string[];
-                      defaultExpandAll: boolean;
-                      accordion: boolean;
-                  };
-              }
+                footer: string;
+                theme: 'dark' | 'light';
+                navigation: Navigation;
+                navigationOnError: Navigation;
+                title: string;
+                isFixedHeader: boolean;
+                isFixedSidebar: boolean;
+                logo: string;
+                multiTabs: boolean;
+                sideWidth: number;
+                menus: Menu[];
+                menuProps: {
+                    expandedKeys: string[];
+                    defaultExpandAll: boolean;
+                    accordion: boolean;
+                };
+            }
            | false;
    }
    interface PluginRuntimeConfig {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml