From b235929c7755f4633e6fc97877666d3f0399d73b Mon Sep 17 00:00:00 2001
From: Fine0830 <fanxue0830@gmail.com>
Date: Tue, 20 Sep 2022 16:24:42 +0800
Subject: [PATCH] feat: enhance menu configuration to make it easier to change
 (#161)

---
 src/constants/data.ts                      | 33 +-------------------
 src/layout/components/SideBar.vue          | 24 +++------------
 src/router/alarm.ts                        |  4 ---
 src/router/dashboard.ts                    |  3 --
 src/router/{ => data}/browser.ts           | 12 ++------
 src/router/{ => data}/database.ts          | 19 ++++--------
 src/router/{ => data}/functions.ts         | 13 ++------
 src/router/{ => data}/general.ts           | 28 +++++------------
 src/router/data/index.ts                   | 35 ++++++++++++++++++++++
 src/router/{ => data}/infrastructure.ts    | 12 ++------
 src/router/{ => data}/k8s.ts               | 17 ++++-------
 src/router/{ => data}/selfObservability.ts | 17 ++++-------
 src/router/{ => data}/serviceMesh.ts       | 23 +++++---------
 src/router/index.ts                        | 18 ++---------
 src/router/layer.ts                        | 35 ++++++++++++++++++++++
 src/router/setting.ts                      |  2 --
 src/views/Layer.vue                        |  3 +-
 17 files changed, 115 insertions(+), 183 deletions(-)
 rename src/router/{ => data}/browser.ts (76%)
 rename src/router/{ => data}/database.ts (72%)
 rename src/router/{ => data}/functions.ts (73%)
 rename src/router/{ => data}/general.ts (68%)
 create mode 100644 src/router/data/index.ts
 rename src/router/{ => data}/infrastructure.ts (82%)
 rename src/router/{ => data}/k8s.ts (77%)
 rename src/router/{ => data}/selfObservability.ts (75%)
 rename src/router/{ => data}/serviceMesh.ts (73%)
 create mode 100644 src/router/layer.ts

diff --git a/src/constants/data.ts b/src/constants/data.ts
index 84b4bb39..77238da5 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 export enum TimeType {
   MINUTE_TIME = "MINUTE",
   HOUR_TIME = "HOUR",
@@ -25,35 +26,3 @@ export const Languages = [
   { label: "Chinese", value: "zh" },
   { label: "Spanish", value: "es" },
 ];
-
-export const RoutesMap: { [key: string]: string } = {
-  GeneralServices: "GENERAL",
-  GeneralServicesActiveTabIndex: "GENERAL",
-  VirtualDatabase: "VIRTUAL_DATABASE",
-  VirtualDatabaseActiveTabIndex: "VIRTUAL_DATABASE",
-  VirtualCache: "VIRTUAL_CACHE",
-  VirtualCacheActiveTabIndex: "VIRTUAL_CACHE",
-  MeshServices: "MESH",
-  MeshServicesActiveTabIndex: "MESH",
-  ControlPanel: "MESH_CP",
-  ControlPanelActiveTabIndex: "MESH_CP",
-  DataPanel: "MESH_DP",
-  DataPanelActiveTabIndex: "MESH_DP",
-  Linux: "OS_LINUX",
-  SkyWalkingServer: "SO11Y_OAP",
-  SkyWalkingServerActiveTabIndex: "SO11Y_OAP",
-  SatelliteActiveTabIndex: "SO11Y_SATELLITE",
-  Satellite: "SO11Y_SATELLITE",
-  Functions: "FAAS",
-  FunctionsActiveTabIndex: "FAAS",
-  Browser: "BROWSER",
-  BrowserActiveTabIndex: "BROWSER",
-  KubernetesCluster: "K8S",
-  KubernetesClusterActiveTabIndex: "K8S",
-  KubernetesService: "K8S_SERVICE",
-  KubernetesServiceActiveTabIndex: "K8S_SERVICE",
-  MySQL: "MYSQL",
-  MySQLActiveTabIndex: "MYSQL",
-  PostgreSQL: "POSTGRESQL",
-  PostgreSQLActiveTabIndex: "POSTGRESQL",
-};
diff --git a/src/layout/components/SideBar.vue b/src/layout/components/SideBar.vue
index a343cd59..b9afcc48 100644
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -33,11 +33,7 @@ limitations under the License. -->
       <template v-for="(menu, index) in routes" :key="index">
         <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
           <template #title>
-            <router-link
-              class="items"
-              :to="menu.path"
-              :exact="menu.meta.exact || false"
-            >
+            <router-link class="items" :to="menu.path">
               <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
                 <Icon size="lg" :iconName="menu.meta.icon" />
               </el-icon>
@@ -52,11 +48,7 @@ limitations under the License. -->
               :index="m.name"
               :key="idx"
             >
-              <router-link
-                class="items"
-                :to="m.path"
-                :exact="(m.meta && m.meta.exact) || false"
-              >
+              <router-link class="items" :to="m.path">
                 <span class="title">{{ m.meta && t(m.meta.title) }}</span>
               </router-link>
             </el-menu-item>
@@ -68,20 +60,12 @@ limitations under the License. -->
           v-else
         >
           <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
-            <router-link
-              class="items"
-              :to="menu.children[0].path"
-              :exact="menu.meta.exact"
-            >
+            <router-link class="items" :to="menu.children[0].path">
               <Icon size="lg" :iconName="menu.meta.icon" />
             </router-link>
           </el-icon>
           <template #title>
-            <router-link
-              class="items"
-              :to="menu.children[0].path"
-              :exact="menu.meta.exact"
-            >
+            <router-link class="items" :to="menu.children[0].path">
               <span class="title">{{ t(menu.meta.title) }}</span>
             </router-link>
           </template>
diff --git a/src/router/alarm.ts b/src/router/alarm.ts
index debaa61a..5475041f 100644
--- a/src/router/alarm.ts
+++ b/src/router/alarm.ts
@@ -25,16 +25,12 @@ export const routesAlarm: Array<RouteRecordRaw> = [
       title: "alarm",
       icon: "spam",
       hasGroup: false,
-      exact: true,
     },
     component: Layout,
     children: [
       {
         path: "/alerting",
         name: "Alarm",
-        meta: {
-          exact: false,
-        },
         component: () =>
           import(/* webpackChunkName: "alerting" */ "@/views/Alarm.vue"),
       },
diff --git a/src/router/dashboard.ts b/src/router/dashboard.ts
index f3480379..a38f5846 100644
--- a/src/router/dashboard.ts
+++ b/src/router/dashboard.ts
@@ -26,7 +26,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       title: "dashboards",
       icon: "dashboard_customize",
       hasGroup: true,
-      exact: true,
     },
     children: [
       {
@@ -38,7 +37,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         name: "List",
         meta: {
           title: "dashboardList",
-          exact: false,
         },
       },
       {
@@ -50,7 +48,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         name: "New",
         meta: {
           title: "dashboardNew",
-          exact: false,
         },
       },
       {
diff --git a/src/router/browser.ts b/src/router/data/browser.ts
similarity index 76%
rename from src/router/browser.ts
rename to src/router/data/browser.ts
index a7a4eb20..d4cdf31e 100644
--- a/src/router/browser.ts
+++ b/src/router/data/browser.ts
@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesBrowser: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "Browser",
@@ -26,26 +24,22 @@ export const routesBrowser: Array<RouteRecordRaw> = [
       icon: "language",
     },
     redirect: "/browser",
-    component: Layout,
     children: [
       {
         path: "/browser",
         name: "Browser",
         meta: {
           title: "browser",
-          exact: true,
+          layer: "BROWSER",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/browser/tab/:activeTabIndex",
         name: "BrowserActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "BROWSER",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },
diff --git a/src/router/database.ts b/src/router/data/database.ts
similarity index 72%
rename from src/router/database.ts
rename to src/router/data/database.ts
index efa11f17..4507deba 100644
--- a/src/router/database.ts
+++ b/src/router/data/database.ts
@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesDatabase: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "Database",
@@ -27,45 +25,38 @@ export const routesDatabase: Array<RouteRecordRaw> = [
       hasGroup: true,
     },
     redirect: "/mySQL",
-    component: Layout,
     children: [
       {
         path: "/mySQL",
         name: "MySQL",
         meta: {
           title: "mySQL",
-          exact: true,
+          layer: "MYSQL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mySQL/tab/:activeTabIndex",
         name: "MySQLActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "MYSQL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/postgreSQL",
         name: "PostgreSQL",
         meta: {
           title: "postgreSQL",
-          exact: true,
+          layer: "POSTGRESQL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/postgreSQL/tab/:activeTabIndex",
         name: "PostgreSQLActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "POSTGRESQL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },
diff --git a/src/router/functions.ts b/src/router/data/functions.ts
similarity index 73%
rename from src/router/functions.ts
rename to src/router/data/functions.ts
index ddafec92..9429b52a 100644
--- a/src/router/functions.ts
+++ b/src/router/data/functions.ts
@@ -14,34 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesFunctions: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "Functions",
     meta: {
       title: "functions",
       icon: "cloud_queue",
+      layer: "FAAS",
     },
     redirect: "/functions",
-    component: Layout,
     children: [
       {
         path: "/functions",
         name: "Functions",
-        meta: {
-          exact: true,
-        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/functions/tab/:activeTabIndex",
         name: "FunctionsActiveTabIndex",
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },
diff --git a/src/router/general.ts b/src/router/data/general.ts
similarity index 68%
rename from src/router/general.ts
rename to src/router/data/general.ts
index adef59da..b6ba797e 100644
--- a/src/router/general.ts
+++ b/src/router/data/general.ts
@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesGen: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "General",
@@ -25,67 +23,55 @@ export const routesGen: Array<RouteRecordRaw> = [
       title: "general",
       icon: "chart",
       hasGroup: true,
-      exact: true,
     },
-    component: Layout,
     children: [
       {
         path: "/general",
         name: "GeneralServices",
         meta: {
-          exact: true,
           title: "services",
+          layer: "GENERAL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layers" */ "@/views/Layer.vue"),
       },
       {
         path: "/general/tab/:activeTabIndex",
         name: "GeneralServicesActiveTabIndex",
         meta: {
-          exact: true,
           notShow: true,
+          layer: "GENERAL",
         },
-        component: () =>
-          import(/* webpackChunkName: "layers" */ "@/views/Layer.vue"),
       },
       {
         path: "/database",
         name: "VirtualDatabase",
         meta: {
           title: "virtualDatabase",
-          exact: true,
+          layer: "VIRTUAL_DATABASE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/database/tab/:activeTabIndex",
         name: "VirtualDatabaseActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "VIRTUAL_DATABASE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/cache",
         name: "VirtualCache",
         meta: {
           title: "virtualCache",
-          exact: true,
+          layer: "VIRTUAL_CACHE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/cache/tab/:activeTabIndex",
         name: "VirtualCacheActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "VIRTUAL_CACHE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },
diff --git a/src/router/data/index.ts b/src/router/data/index.ts
new file mode 100644
index 00000000..54a55b52
--- /dev/null
+++ b/src/router/data/index.ts
@@ -0,0 +1,35 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import general from "./general";
+import serviceMesh from "./serviceMesh";
+import database from "./database";
+import infrastructure from "./infrastructure";
+import selfObservability from "./selfObservability";
+import functions from "./functions";
+import browser from "./browser";
+import k8s from "./k8s";
+
+export default [
+  ...general,
+  ...serviceMesh,
+  ...functions,
+  ...k8s,
+  ...infrastructure,
+  ...browser,
+  ...database,
+  ...selfObservability,
+];
diff --git a/src/router/infrastructure.ts b/src/router/data/infrastructure.ts
similarity index 82%
rename from src/router/infrastructure.ts
rename to src/router/data/infrastructure.ts
index fbd38580..d725d63b 100644
--- a/src/router/infrastructure.ts
+++ b/src/router/data/infrastructure.ts
@@ -14,30 +14,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesInfra: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "Infrastructure",
     meta: {
       title: "infrastructure",
       icon: "scatter_plot",
-      exact: true,
       hasGroup: true,
     },
     redirect: "/linux",
-    component: Layout,
     children: [
       {
         path: "/linux",
         name: "Linux",
         meta: {
           title: "linux",
+          layer: "OS_LINUX",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/linux/tab/:activeTabIndex",
@@ -45,9 +40,8 @@ export const routesInfra: Array<RouteRecordRaw> = [
         meta: {
           title: "linux",
           notShow: true,
+          layer: "OS_LINUX",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       // {
       //   path: "/infrastructure/vm",
diff --git a/src/router/k8s.ts b/src/router/data/k8s.ts
similarity index 77%
rename from src/router/k8s.ts
rename to src/router/data/k8s.ts
index a9390bd8..bc93aa7d 100644
--- a/src/router/k8s.ts
+++ b/src/router/data/k8s.ts
@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesK8s: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "Kubernetes",
@@ -27,7 +25,6 @@ export const routesK8s: Array<RouteRecordRaw> = [
       hasGroup: true,
     },
     redirect: "/kubernetes/cluster",
-    component: Layout,
     children: [
       {
         path: "/kubernetes/cluster",
@@ -35,9 +32,8 @@ export const routesK8s: Array<RouteRecordRaw> = [
         meta: {
           notShow: false,
           title: "kubernetesCluster",
+          layer: "K8S",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/kubernetes/cluster/tab/:activeTabIndex",
@@ -45,9 +41,8 @@ export const routesK8s: Array<RouteRecordRaw> = [
         meta: {
           notShow: true,
           title: "kubernetesClusterActiveTabIndex",
+          layer: "K8S",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/kubernetes/service",
@@ -55,9 +50,8 @@ export const routesK8s: Array<RouteRecordRaw> = [
         meta: {
           notShow: false,
           title: "kubernetesService",
+          layer: "K8S_SERVICE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/kubernetes/service/tab/:activeTabIndex",
@@ -65,9 +59,8 @@ export const routesK8s: Array<RouteRecordRaw> = [
         meta: {
           notShow: true,
           title: "kubernetesServiceActiveTabIndex",
+          layer: "K8S_SERVICE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },
diff --git a/src/router/selfObservability.ts b/src/router/data/selfObservability.ts
similarity index 75%
rename from src/router/selfObservability.ts
rename to src/router/data/selfObservability.ts
index b2e610b1..9e283cce 100644
--- a/src/router/selfObservability.ts
+++ b/src/router/data/selfObservability.ts
@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesSelf: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "SelfObservability",
@@ -27,43 +25,38 @@ export const routesSelf: Array<RouteRecordRaw> = [
       icon: "logo",
       hasGroup: true,
     },
-    component: Layout,
     children: [
       {
         path: "/self/skyWalkingServer",
         name: "SkyWalkingServer",
         meta: {
           title: "skyWalkingServer",
+          layer: "SO11Y_OAP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/self/skyWalkingServer/tab/:activeTabIndex",
         name: "SkyWalkingServerActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "SO11Y_OAP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/self/satellite",
         name: "Satellite",
         meta: {
           title: "satellite",
+          layer: "SO11Y_SATELLITE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/self/satellite/tab/:activeTabIndex",
         name: "SatelliteActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "SO11Y_SATELLITE",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },
diff --git a/src/router/serviceMesh.ts b/src/router/data/serviceMesh.ts
similarity index 73%
rename from src/router/serviceMesh.ts
rename to src/router/data/serviceMesh.ts
index 04df1bb2..89abbde9 100644
--- a/src/router/serviceMesh.ts
+++ b/src/router/data/serviceMesh.ts
@@ -14,10 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
 
-export const routesMesh: Array<RouteRecordRaw> = [
+export default [
   {
     path: "",
     name: "ServiceMesh",
@@ -27,7 +25,6 @@ export const routesMesh: Array<RouteRecordRaw> = [
       icon: "epic",
       hasGroup: true,
     },
-    component: Layout,
     children: [
       {
         path: "/mesh/services",
@@ -35,18 +32,16 @@ export const routesMesh: Array<RouteRecordRaw> = [
         meta: {
           notShow: false,
           title: "services",
+          layer: "MESH",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mesh/services/tab/:activeTabIndex",
         name: "MeshServicesActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "MESH",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mesh/controlPanel",
@@ -54,18 +49,16 @@ export const routesMesh: Array<RouteRecordRaw> = [
         meta: {
           notShow: false,
           title: "controlPanel",
+          layer: "MESH_CP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mesh/controlPanel/tab/:activeTabIndex",
         name: "ControlPanelActiveTabIndex",
         meta: {
           notShow: true,
+          layer: "MESH_CP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mesh/dataPanel",
@@ -73,9 +66,8 @@ export const routesMesh: Array<RouteRecordRaw> = [
         meta: {
           notShow: false,
           title: "dataPanel",
+          layer: "MESH_DP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
         path: "/mesh/dataPanel/tab/:activeTabIndex",
@@ -83,9 +75,8 @@ export const routesMesh: Array<RouteRecordRaw> = [
         meta: {
           notShow: true,
           title: "dataPanelActiveTabIndex",
+          layer: "MESH_DP",
         },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
     ],
   },
diff --git a/src/router/index.ts b/src/router/index.ts
index b4a57531..94471dc5 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -15,27 +15,13 @@
  * limitations under the License.
  */
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
-import { routesGen } from "./general";
-import { routesMesh } from "./serviceMesh";
-import { routesDatabase } from "./database";
-import { routesInfra } from "./infrastructure";
 import { routesDashboard } from "./dashboard";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
-import { routesSelf } from "./selfObservability";
-import { routesFunctions } from "./functions";
-import { routesBrowser } from "./browser";
-import { routesK8s } from "./k8s";
+import routesLayers from "./layer";
 
 const routes: Array<RouteRecordRaw> = [
-  ...routesGen,
-  ...routesMesh,
-  ...routesFunctions,
-  ...routesK8s,
-  ...routesInfra,
-  ...routesBrowser,
-  ...routesDatabase,
-  ...routesSelf,
+  ...routesLayers,
   ...routesDashboard,
   ...routesAlarm,
   ...routesSetting,
diff --git a/src/router/layer.ts b/src/router/layer.ts
new file mode 100644
index 00000000..b62d2047
--- /dev/null
+++ b/src/router/layer.ts
@@ -0,0 +1,35 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import LayerJson from "./data";
+import Layout from "@/layout/Index.vue";
+
+function layerDashboards() {
+  const routes = LayerJson.map((item: any) => {
+    item.component = Layout;
+    if (item.children) {
+      item.children = item.children.map((d: any) => {
+        d.component = () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue");
+        return d;
+      });
+    }
+    return item;
+  });
+  return routes;
+}
+
+export default layerDashboards();
diff --git a/src/router/setting.ts b/src/router/setting.ts
index 9045c08e..fc80ac8c 100644
--- a/src/router/setting.ts
+++ b/src/router/setting.ts
@@ -25,7 +25,6 @@ export const routesSetting: Array<RouteRecordRaw> = [
       title: "settings",
       icon: "settings",
       hasGroup: false,
-      exact: false,
     },
     component: Layout,
     children: [
@@ -36,7 +35,6 @@ export const routesSetting: Array<RouteRecordRaw> = [
           title: "settings",
           icon: "settings",
           hasGroup: false,
-          exact: false,
         },
         component: () =>
           import(/* webpackChunkName: "settings" */ "@/views/Settings.vue"),
diff --git a/src/views/Layer.vue b/src/views/Layer.vue
index 7004c520..566afae1 100644
--- a/src/views/Layer.vue
+++ b/src/views/Layer.vue
@@ -27,7 +27,6 @@ import { useDashboardStore } from "@/store/modules/dashboard";
 import Dashboard from "./dashboard/Edit.vue";
 import { useI18n } from "vue-i18n";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { RoutesMap } from "@/constants/data";
 
 const route = useRoute();
 const { t } = useI18n();
@@ -38,7 +37,7 @@ const layer = ref<string>("GENERAL");
 getDashboard();
 
 async function getDashboard() {
-  layer.value = RoutesMap[String(route.name)];
+  layer.value = String(route.meta.layer);
   dashboardStore.setLayer(layer.value);
   dashboardStore.setMode(false);
   await dashboardStore.setDashboards();