feat: add the MYSQL layer and update layer routers (#134)

src/constants/data.ts

@@ -29,8 +29,8 @@ export const Languages = [
 export const RoutesMap: { [key: string]: string } = {
   GeneralServices: "GENERAL",
   GeneralServicesActiveTabIndex: "GENERAL",
-  Database: "VIRTUAL_DATABASE",
+  VirtualDatabase: "VIRTUAL_DATABASE",
-  DatabaseActiveTabIndex: "VIRTUAL_DATABASE",
+  VirtualDatabaseActiveTabIndex: "VIRTUAL_DATABASE",
   MeshServices: "MESH",
   MeshServicesActiveTabIndex: "MESH",
   ControlPanel: "MESH_CP",
@@ -50,4 +50,6 @@ export const RoutesMap: { [key: string]: string } = {
   KubernetesClusterActiveTabIndex: "K8S",
   KubernetesService: "K8S_SERVICE",
   KubernetesServiceActiveTabIndex: "K8S_SERVICE",
+  MySQL: "MYSQL",
+  MySQLActiveTabIndex: "MYSQL",
 };

src/locales/lang/en.ts

@@ -32,6 +32,7 @@ const msg = {
   dashboards: "Dashboards",
   profiles: "Profiles",
   database: "Database",
+  mySQL: "MySQL",
   serviceName: "Service Name",
   technologies: "Technologies",
   generalServicePanel: "General Service Panel",

src/locales/lang/es.ts

@@ -32,6 +32,7 @@ const msg = {
   dashboards: "Paneles",
   profiles: "Perfiles",
   database: "Base de Datos",
+  mySQL: "MySQL",
   serviceName: "Nombre Servicio",
   technologies: "Tecnologías",
   generalServicePanel: "Panel Servicio General",

src/locales/lang/zh.ts

@@ -32,6 +32,7 @@ const msg = {
   dashboards: "仪表盘",
   profiles: "性能剖析",
   database: "数据库",
+  mySQL: "MySQL",
   serviceName: "服务名称",
   technologies: "技术",
   health: "健康",

src/router/database.ts

@@ -26,22 +26,22 @@ export const routesDatabase: Array<RouteRecordRaw> = [
       icon: "storage",
       hasGroup: true,
     },
-    redirect: "/database",
+    redirect: "/mySQL",
     component: Layout,
     children: [
       {
-        path: "/database",
+        path: "/mySQL",
-        name: "Database",
+        name: "MySQL",
         meta: {
-          title: "virtualDatabase",
+          title: "mySQL",
           exact: true,
         },
         component: () =>
           import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
       },
       {
-        path: "/database/tab/:activeTabIndex",
+        path: "/mySQL/tab/:activeTabIndex",
-        name: "DatabaseActiveTabIndex",
+        name: "MySQLActiveTabIndex",
         meta: {
           notShow: true,
         },

src/router/general.ts

@@ -24,7 +24,7 @@ export const routesGen: Array<RouteRecordRaw> = [
     meta: {
       title: "general",
       icon: "chart",
-      hasGroup: false,
+      hasGroup: true,
       exact: true,
     },
     component: Layout,
@@ -34,6 +34,7 @@ export const routesGen: Array<RouteRecordRaw> = [
         name: "GeneralServices",
         meta: {
           exact: true,
+          title: "services",
         },
         component: () =>
           import(/* webpackChunkName: "layers" */ "@/views/Layer.vue"),
@@ -43,10 +44,30 @@ export const routesGen: Array<RouteRecordRaw> = [
         name: "GeneralServicesActiveTabIndex",
         meta: {
           exact: true,
+          notShow: true,
         },
         component: () =>
           import(/* webpackChunkName: "layers" */ "@/views/Layer.vue"),
       },
+      {
+        path: "/database",
+        name: "VirtualDatabase",
+        meta: {
+          title: "virtualDatabase",
+          exact: true,
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/database/tab/:activeTabIndex",
+        name: "VirtualDatabaseActiveTabIndex",
+        meta: {
+          notShow: true,
+        },
+        component: () =>
+          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
     ],
   },
 ];

src/styles/reset.scss

@@ -139,8 +139,10 @@ pre {
   padding-left: 56px !important;
 }
 
-.el-icon.menu-icons {
+.el-sub-menu__title {
-  margin-top: -3px !important;
+  .el-icon.menu-icons {
+    margin-top: -5px !important;
+  }
 }
 
 .el-switch__label--left {