feat: enhance the marketplace page (#298)

src/router/alarm.ts

@@ -25,6 +25,7 @@ export const routesAlarm: Array<RouteRecordRaw> = [
       title: "Alerting",
       icon: "spam",
       hasGroup: false,
+      activate: true,
     },
     component: Layout,
     children: [

src/router/dashboard.ts

@@ -26,6 +26,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       title: "Dashboards",
       icon: "dashboard_customize",
       hasGroup: true,
+      activate: true,
     },
     children: [
       {
@@ -34,6 +35,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         name: "List",
         meta: {
           title: "Dashboard List",
+          activate: true,
         },
       },
       {
@@ -42,6 +44,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         name: "New",
         meta: {
           title: "New Dashboard",
+          activate: true,
         },
       },
       {

src/router/index.ts

@@ -20,8 +20,15 @@ import { routesDashboard } from "./dashboard";
 import { routesMarketplace } from "./marketplace";
 import { routesAlarm } from "./alarm";
 import routesLayers from "./layer";
+import { routesSettings } from "./settings";
 
-const routes: Array<RouteRecordRaw> = [...routesMarketplace, ...routesLayers, ...routesDashboard, ...routesAlarm];
+const routes: Array<RouteRecordRaw> = [
+  ...routesMarketplace,
+  ...routesLayers,
+  ...routesAlarm,
+  ...routesDashboard,
+  ...routesSettings,
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -30,8 +37,6 @@ const router = createRouter({
 
 (window as any).axiosCancel = [];
 
-const defaultPath = (routesLayers[0] && routesLayers[0].children[0].path) || "";
-
 router.beforeEach((to, from, next) => {
   // const token = window.localStorage.getItem("skywalking-authority");
   if ((window as any).axiosCancel.length !== 0) {
@@ -42,6 +47,7 @@ router.beforeEach((to, from, next) => {
   }
 
   if (to.path === "/") {
+    const defaultPath = (routesLayers[0] && routesLayers[0].children[0].path) || "";
     next({ path: defaultPath });
   } else {
     next();

src/router/layer.ts

@@ -21,7 +21,7 @@ import type { MenuOptions } from "@/types/app";
 async function layerDashboards() {
   const appStore = useAppStoreWithOut();
   await appStore.getActivateMenus();
-  const routes = appStore.activateMenus.map((item: MenuOptions) => {
+  const routes = appStore.allMenus.map((item: MenuOptions) => {
     const route: any = {
       path: "",
       name: item.name,
@@ -30,6 +30,7 @@ async function layerDashboards() {
         icon: item.icon || "cloud_queue",
         title: item.title,
         hasGroup: item.hasGroup,
+        activate: item.activate,
       },
       children: item.subItems && item.subItems.length ? [] : undefined,
     };
@@ -41,6 +42,7 @@ async function layerDashboards() {
           title: child.title,
           layer: child.layer,
           icon: child.icon || "cloud_queue",
+          activate: child.activate,
         },
         component: () => import("@/views/Layer.vue"),
       };
@@ -65,6 +67,7 @@ async function layerDashboards() {
             title: item.title,
             layer: item.layer,
             icon: item.icon,
+            activate: item.activate,
           },
           component: () => import("@/views/Layer.vue"),
         },

src/router/marketplace.ts

@@ -24,26 +24,16 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
     meta: {
       title: "Marketplace",
       icon: "marketplace",
-      hasGroup: true,
+      hasGroup: false,
+      activate: true,
     },
     component: Layout,
     children: [
       {
-        path: "/marketplace/menus",
+        path: "/marketplace",
         name: "MenusManagement",
-        meta: {
-          title: "Categories",
-        },
         component: () => import("@/views/marketplace/Menus.vue"),
       },
-      {
-        path: "/marketplace/settings",
-        name: "Settings",
-        meta: {
-          title: "Settings",
-        },
-        component: () => import("@/views/marketplace/Settings.vue"),
-      },
     ],
   },
 ];

src/router/settings.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 type { RouteRecordRaw } from "vue-router";
+import Layout from "@/layout/Index.vue";
+
+export const routesSettings: Array<RouteRecordRaw> = [
+  {
+    path: "",
+    name: "Settings",
+    meta: {
+      title: "Settings",
+      icon: "settings",
+      hasGroup: false,
+      activate: true,
+    },
+    component: Layout,
+    children: [
+      {
+        path: "/settings",
+        name: "Settings",
+        component: () => import("@/views/marketplace/Settings.vue"),
+      },
+    ],
+  },
+];