feat: 添加路由参数配置，支持自动隐藏 Layout、自动全屏功能并添加示例页

.env.development

@@ -13,12 +13,12 @@ VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhos
 VITE_DROP_CONSOLE = false
 
 # Basic interface address SPA
-VITE_GLOB_API_URL=/basic-api
-# VITE_GLOB_API_URL=http://localhost:8181
+# VITE_GLOB_API_URL=/basic-api
+VITE_GLOB_API_URL=http://192.168.0.156:8081
 
 # Interface prefix
-VITE_GLOB_API_URL_PREFIX=
-# VITE_GLOB_API_URL_PREFIX=/api
+# VITE_GLOB_API_URL_PREFIX=
+VITE_GLOB_API_URL_PREFIX=/api
 
 # File upload address， optional
 VITE_GLOB_UPLOAD_URL=/upload

src/layouts/default/index.vue

 <template>
     <Layout :class="prefixCls" v-bind="lockEvents">
         <LayoutFeatures />
-        <LayoutHeader fixed v-if="getShowFullHeaderRef" />
+        <LayoutHeader fixed v-if="getShowFullHeaderRef && !hideLayout" />
         <Layout :class="[layoutClass]">
-            <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
+            <LayoutSideBar v-if="(getShowSidebar || getIsMobile) && !hideLayout" />
             <Layout :class="`${prefixCls}-main`">
-                <LayoutMultipleHeader />
+                <LayoutMultipleHeader v-if="!hideLayout" />
                 <LayoutContent />
-                <LayoutFooter />
+                <LayoutFooter v-if="!hideLayout" />
             </Layout>
         </Layout>
     </Layout>
@@ -27,6 +27,7 @@
     import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'
     import { useDesign } from '/@/hooks/web/useDesign'
     import { useLockPage } from '/@/hooks/web/useLockPage'
+    import { router } from '/@/router'
 
     import { useAppInject } from '/@/hooks/web/useAppInject'
 
@@ -58,6 +59,9 @@
                 return cls
             })
 
+            // 判断是否需要隐藏布局
+            const hideLayout = computed(() => !!router.currentRoute.value.meta?.hideLayout)
+
             return {
                 getShowFullHeaderRef,
                 getShowSidebar,
@@ -66,6 +70,7 @@
                 getIsMixSidebar,
                 layoutClass,
                 lockEvents,
+                hideLayout,
             }
         },
     })

src/locales/lang/zh-CN/routes/demo.ts

@@ -161,7 +161,13 @@ export default {
         page: '引导页',
     },
     example: {
-        page: '示例页',
+        example: '示例页',
+
+        api: 'API 示例',
+
+        hideLayout: '测试 - 隐藏布局',
+
+        fullScreen: '测试 - 自动全屏',
     },
     system: {
         moduleName: '系统管理',

src/router/guard/index.ts

@@ -12,6 +12,7 @@ import { createStateGuard } from './stateGuard'
 import nProgress from 'nprogress'
 import projectSetting from '/@/settings/projectSetting'
 import { createParamMenuGuard } from './paramMenuGuard'
+import { useFullscreen } from '@vueuse/core'
 
 // Don't change the order of creation
 export function setupRouterGuard(router: Router) {
@@ -24,6 +25,7 @@ export function setupRouterGuard(router: Router) {
     createPermissionGuard(router)
     createParamMenuGuard(router) // must after createPermissionGuard (menu has been built.)
     createStateGuard(router)
+    createAutoFullScreenGuard(router)
 }
 
 /**
@@ -145,3 +147,23 @@ export function createProgressGuard(router: Router) {
         return true
     })
 }
+
+export function createAutoFullScreenGuard(router: Router) {
+    const { enter, exit, isFullscreen } = useFullscreen()
+
+    router.beforeEach(async (to) => {
+        if (to.meta.autoFullScreen) {
+            !isFullscreen.value && enter()
+        }
+
+        return true
+    })
+
+    router.afterEach(async (to) => {
+        if (!to.meta.autoFullScreen) {
+            isFullscreen.value && exit()
+        }
+
+        return true
+    })
+}

src/router/routes/modules/demo/example.ts

@@ -10,9 +10,8 @@ const setup: AppRouteModule = {
     redirect: '/example/index',
     meta: {
         orderNo: 90001,
-        hideChildrenInMenu: true,
         icon: 'healthicons:virus-lab-research-test-tube-outline',
-        title: t('routes.demo.example.page'),
+        title: t('routes.demo.example.example'),
     },
     children: [
         {
@@ -20,9 +19,29 @@ const setup: AppRouteModule = {
             name: 'ExamplePage',
             component: () => import('/@/views/demo/example/index.vue'),
             meta: {
-                title: t('routes.demo.example.page'),
+                title: t('routes.demo.example.api'),
                 icon: 'healthicons:virus-lab-research-test-tube-outline',
-                hideMenu: true,
+            },
+        },
+        {
+            path: 'hide-layout',
+            name: 'HideLayoutPage',
+            component: () => import('/@/views/demo/example/index.vue'),
+            meta: {
+                title: t('routes.demo.example.hideLayout'),
+                icon: 'healthicons:virus-lab-research-test-tube-outline',
+                hideLayout: true,
+            },
+        },
+        {
+            path: 'auto-full-screen',
+            name: 'AutoFullScreenPage',
+            component: () => import('/@/views/demo/example/index.vue'),
+            meta: {
+                title: t('routes.demo.example.fullScreen'),
+                icon: 'healthicons:virus-lab-research-test-tube-outline',
+                hideLayout: true,
+                autoFullScreen: true,
             },
         },
     ],

src/views/demo/example/index.vue

@@ -12,6 +12,14 @@
                 text.value = body
             }, 1500)
         })
+
+        API.permission.tree
+            .request({
+                pid: '0',
+            })
+            .then((body) => {
+                console.log(body)
+            })
     })
 </script>
 

tsconfig.json

@@ -41,6 +41,6 @@
         "build/**/*.d.ts",
         "mock/**/*.ts",
         "vite.config.ts"
-    ],
-    "exclude": ["node_modules", "tests/server/**/*.ts", "dist", "**/*.js"]
+    ]
+    // "exclude": ["node_modules", "tests/server/**/*.ts", "dist", "**/*.js"]
 }

types/vue-router.d.ts

@@ -41,5 +41,9 @@ declare module 'vue-router' {
         ignoreRoute?: boolean
         // Hide path for children
         hidePathForChildren?: boolean
+        // 隐藏布局
+        hideLayout?: boolean
+        // 自动全屏
+        autoFullScreen?: boolean
     }
 }