feat: 增加了MenuLayout和HomeLayout布局

build/vite/plugin/index.ts

@@ -49,9 +49,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, prodMock)
 
   if (isBuild) {
     // rollup-plugin-gzip
-    vitePlugins.push(
-      configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE),
-    );
+    vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE));
   }
 
   return vitePlugins;

mock/getRouter.json

@@ -1,113 +0,0 @@
-{
-  "code": 200,
-  "data": [
-    {
-      "children": [
-        {
-          "children": [],
-          "component": "/todo/todo",
-          "id": 1019,
-          "meta": {
-            "activeMenu": null,
-            "alwaysShow": false,
-            "frameSrc": "",
-            "hidden": false,
-            "icon": "",
-            "isFrame": 0,
-            "isRoot": false,
-            "noCache": false,
-            "query": "",
-            "title": "菜单1"
-          },
-          "name": " ",
-          "parentId": 1018,
-          "path": "menu1",
-          "redirect": ""
-        }
-      ],
-      "component": "LAYOUT",
-      "id": 1018,
-      "meta": {
-        "activeMenu": null,
-        "alwaysShow": false,
-        "frameSrc": "",
-        "hidden": false,
-        "icon": "ApartmentOutlined",
-        "isFrame": 0,
-        "isRoot": false,
-        "noCache": false,
-        "query": "",
-        "title": "院内安全态势"
-      },
-      "name": "Scene",
-      "parentId": -1,
-      "path": "/guard",
-      "redirect": ""
-    },
-    {
-      "children": [
-        {
-          "children": [],
-          "component": "/todo/todo",
-          "id": 1023,
-          "meta": {
-            "activeMenu": null,
-            "alwaysShow": false,
-            "frameSrc": "",
-            "hidden": false,
-            "icon": "",
-            "isFrame": 0,
-            "isRoot": false,
-            "noCache": false,
-            "query": "",
-            "title": "生产安全菜单1"
-          },
-          "name": "DeviceCamera",
-          "parentId": 1022,
-          "path": "camera",
-          "redirect": ""
-        },
-        {
-          "children": [],
-          "component": "/todo/todo",
-          "id": 1024,
-          "meta": {
-            "activeMenu": null,
-            "alwaysShow": false,
-            "frameSrc": "",
-            "hidden": false,
-            "icon": "",
-            "isFrame": 0,
-            "isRoot": false,
-            "noCache": false,
-            "query": "",
-            "title": "生产安全菜单2"
-          },
-          "name": "DeviceNVR",
-          "parentId": 1022,
-          "path": "nvr",
-          "redirect": ""
-        }
-      ],
-      "component": "LAYOUT",
-      "id": 1022,
-      "meta": {
-        "activeMenu": null,
-        "alwaysShow": false,
-        "frameSrc": "",
-        "hidden": false,
-        "icon": "CameraOutlined",
-        "isFrame": 0,
-        "isRoot": false,
-        "noCache": false,
-        "query": "",
-        "title": "生产安全"
-      },
-      "name": "Device",
-      "parentId": -1,
-      "path": "/safety",
-      "redirect": ""
-    }
-  ],
-  "message": "成功"
-}

mock/login/info.ts

@@ -637,7 +637,7 @@ const info = {
 
 export default [
   {
-    url: '/api/login/info',
+    url: '/eye_api_bak/api/login/info',
     timeout: 1000,
     method: 'post',
     response: () => {

mock/login/routers.ts

@@ -25,7 +25,7 @@ const list = [
         redirect: '',
       },
     ],
-    component: 'LAYOUT',
+    component: 'MENU_LAYOUT',
     id: 1018,
     meta: {
       activeMenu: null,
@@ -41,7 +41,7 @@ const list = [
     },
     name: 'Scene',
     parentId: -1,
-    path: '/guard',
+    path: '/institute-safety',
     redirect: '',
   },
   {
@@ -89,7 +89,7 @@ const list = [
         redirect: '',
       },
     ],
-    component: 'LAYOUT',
+    component: 'MENU_LAYOUT',
     id: 1022,
     meta: {
       activeMenu: null,
@@ -112,7 +112,7 @@ const list = [
 
 export default [
   {
-    url: '/api/login/getRouters',
+    url: '/eye_api_bak/api/admin/menu/getRouters',
     timeout: 1000,
     method: 'get',
     response: () => {

src/App.vue

@@ -1,10 +1,7 @@
 <template>
   <el-config-provider size="default" :zIndex="zIndex">
     <AppProvider>
-      <HeaderMenu />
-      <div>
-        <RouterView />
-      </div>
+      <RouterView />
     </AppProvider>
   </el-config-provider>
 </template>
@@ -13,7 +10,6 @@
   import { ref } from 'vue';
   import { ElConfigProvider } from 'element-plus';
   import { AppProvider } from '@/components/Application';
-  import HeaderMenu from '@/layout/components/header-menu/HeaderMenu.vue';
 
   const zIndex = ref(3000);
 </script>

src/hooks/setting/useProjectSetting.ts

@@ -18,7 +18,7 @@ export function useProjectSetting() {
 
   const getCrumbsSetting = computed(() => projectStore.crumbsSetting);
 
-  const getPermissionMode = computed(() => projectStore.permissionMode);
+  const getPermissionMode = computed(() => projectStore.permissionMode || 'BACK');
 
   const getShowFooter = computed(() => projectStore.showFooter);
 

src/layout/HomeLayout.vue

@@ -0,0 +1,17 @@
+<!-- 公司首页的layout -->
+
+<template>
+  <div>
+    <HeaderMenu></HeaderMenu>
+    <div>
+      <slot></slot>
+      <router-view></router-view>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import HeaderMenu from './components/header-menu/HeaderMenu.vue';
+</script>
+
+<style scoped lang="scss"></style>

src/layout/MenuLayout.vue

@@ -0,0 +1,27 @@
+<!-- 带有二级菜单的layout -->
+
+<template>
+  <div>
+    <HeaderMenu></HeaderMenu>
+    <div class="contentWrapper">
+      <div style="width: 300px"> 左侧菜单 </div>
+      <div class="main">
+        <router-view></router-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import HeaderMenu from './components/header-menu/HeaderMenu.vue';
+</script>
+
+<style scoped lang="scss">
+  .contentWrapper {
+    display: flex;
+    gap: 20px;
+  }
+  .main {
+    flex: 1;
+  }
+</style>

src/layout/components/header-menu/HeaderMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="header">
     <div>上飞院安全智能管控平台</div>
-    <div class="item">首页</div>
-    <div class="item">院内安全态势</div>
-    <div class="item">生产安全</div>
+    <router-link class="item" to="/home">首页</router-link>
+    <router-link class="item" to="/institute-safety">院内安全态势</router-link>
+    <router-link class="item" to="/safety">生产安全</router-link>
   </div>
 </template>
 <script lang="ts" setup></script>

src/layout/index.vue

@@ -47,11 +47,7 @@
           'page-full-screen': isFullscreen && !getDarkTheme,
         }"
       >
-        <TabsView
-          v-if="isMultiTabs"
-          v-model:collapsed="collapsed"
-          @page-full-screen="togglePageFullScreen"
-        />
+        <TabsView v-if="isMultiTabs" v-model:collapsed="collapsed" @page-full-screen="togglePageFullScreen" />
         <div class="admin-layout-content-main">
           <div class="main-view" ref="adminBodyRef">
             <MainView />
@@ -238,8 +234,8 @@
     box-sizing: border-box;
     position: relative;
     z-index: auto;
-    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-      background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+      color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     &-shade {
       position: fixed;
       top: 0;
@@ -247,8 +243,7 @@
       right: 0;
       bottom: 0;
       z-index: 101;
-      transition: background-color 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
-        left 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
+      transition: background-color 0.3s cubic-bezier(0.2, 0, 0, 1) 0s, left 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
       visibility: hidden;
     }
     //侧边栏
@@ -282,8 +277,7 @@
 
       &-son {
         flex: 1;
-        transition: padding-left 0.3s cubic-bezier(0.2, 0, 0, 1) 0s,
-          box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
+        transition: padding-left 0.3s cubic-bezier(0.2, 0, 0, 1) 0s, box-shadow 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
       }
     }
 

src/router/constant.ts

@@ -5,3 +5,8 @@ export const ErrorPage = () => import('@/views/exception/404.vue');
 export const Layout = () => import('@/layout/index.vue');
 
 export const ParentLayout = () => import('@/layout/parentLayout.vue');
+
+/** 公司主页的layout */
+export const HomeLayout = () => import('@/layout/HomeLayout.vue');
+/** 带有子菜单的layout */
+export const MenuLayout = () => import('@/layout/MenuLayout.vue');

src/router/generator-routers.ts

@@ -1,7 +1,7 @@
 import { getRouters } from '@/api/system/menu';
 import { constantRouterIcon } from './router-icons';
 import { RouteRecordRaw } from 'vue-router';
-import { Layout, ParentLayout } from '@/router/constant';
+import { Layout, ParentLayout, HomeLayout, MenuLayout } from '@/router/constant';
 import type { AppRouteRecordRaw } from '@/router/types';
 
 const Iframe = () => import('@/views/iframe/index.vue');
@@ -9,6 +9,8 @@ const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>();
 
 LayoutMap.set('LAYOUT', Layout);
 LayoutMap.set('IFRAME', Iframe);
+LayoutMap.set('HOME_LAYOUT', HomeLayout);
+LayoutMap.set('MENU_LAYOUT', MenuLayout);
 
 /**
  * 格式化 后端 结构信息并递归生成层级路由表
@@ -97,10 +99,7 @@ export const asyncImportRoute = (routes: AppRouteRecordRaw[] | undefined): void
 /**
  * 动态导入
  * */
-export const dynamicImport = (
-  viewsModules: Record<string, () => Promise<Recordable>>,
-  component: string,
-) => {
+export const dynamicImport = (viewsModules: Record<string, () => Promise<Recordable>>, component: string) => {
   const keys = Object.keys(viewsModules);
   const matchKeys = keys.filter((key) => {
     let k = key.replace('../views', '');

src/router/router-guards.ts

@@ -11,7 +11,7 @@ import { getRedirectUrl } from '@/utils/getRedirectUrl';
 
 const LOGIN_PATH = PageEnum.BASE_LOGIN;
 
-const whitePathList = [LOGIN_PATH, PageEnum.HOME_PAGE, PageEnum.BASE_HOME]; // no redirect whitelist
+const whitePathList = [LOGIN_PATH, PageEnum.HOME_PAGE]; // no redirect whitelist
 
 export function createRouterGuards(router: Router) {
   const userStore = useUserStoreWidthOut();
@@ -50,9 +50,9 @@ export function createRouterGuards(router: Router) {
       //   };
       // }
       // next(redirectData);
-      window.location.href = getRedirectUrl();
-      next();
-      return;
+      // window.location.href = getRedirectUrl();
+      // next();
+      // return;
     }
 
     if (asyncRouteStore.getIsDynamicAddedRoute) {

src/store/modules/asyncRoute.ts

@@ -28,11 +28,7 @@ export interface IAsyncRouteState {
   isDynamicAddedRoute: boolean;
 }
 
-function filter<T = any>(
-  tree: T[],
-  func: (n: T) => boolean,
-  config: Partial<TreeHelperConfig> = {},
-): T[] {
+function filter<T = any>(tree: T[], func: (n: T) => boolean, config: Partial<TreeHelperConfig> = {}): T[] {
   config = getConfig(config);
   const children = config.children as string;
 
@@ -73,9 +69,7 @@ export const useAsyncRouteStore = defineStore({
     //从缓存列表删除路由
     removeKeepAliveComponents(compNames) {
       if (!compNames || !compNames.length) return;
-      this.keepAliveComponents = this.keepAliveComponents.filter(
-        (item) => !compNames.includes(item),
-      );
+      this.keepAliveComponents = this.keepAliveComponents.filter((item) => !compNames.includes(item));
     },
     setDynamicAddedRoute(added: boolean) {
       this.isDynamicAddedRoute = added;
@@ -111,6 +105,7 @@ export const useAsyncRouteStore = defineStore({
         // 动态获取菜单
         try {
           accessedRouters = await generatorDynamicRouter();
+          console.log('accessedRouters', accessedRouters);
         } catch (error) {
           console.log(error);
         }

src/views/home/home.vue

@@ -1,3 +1,6 @@
 <template>
-  <div> home页面 </div>
+  <HomeLayout> 这是公司主页 </HomeLayout>
 </template>
+<script setup lang="ts">
+  import HomeLayout from '@/layout/HomeLayout.vue';
+</script>

utils/devProxy/index.ts

@@ -5,4 +5,4 @@ import * as config from './shangfei/proxy';
 // import * as config from './zhongjiancai/proxy';
 // import * as config from './local/proxy';
 
-export default start(config.proxy, config.appConfigPath);
+// export default start(config.proxy, config.appConfigPath);

vite.config.ts

@@ -76,7 +76,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     server: {
       host: true,
       port: VITE_PORT,
-      proxy: devProxy,
+      // proxy: devProxy,
       // proxy: {
       //     '/api': {
       //         target: '',