feat: update

src/layout/components/NavBar.vue

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="nav-bar flex-h">
-    <div class="title">{{ route.name === "ViewWidget" ? "" : appStore.pageTitle || t(pageName) }}</div>
+    <div class="title">{{ route.name === "ViewWidget" ? "" : appStore.pageTitle || pageName }}</div>
     <div class="app-config">
       <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
       <TimePicker

src/layout/components/SideBar.vue

@@ -36,14 +36,14 @@ limitations under the License. -->
                   <Icon size="lg" :iconName="menu.meta.icon" />
                 </el-icon>
                 <span class="title" :class="isCollapse ? 'collapse' : ''">
-                  {{ t(menu.meta.title) }}
+                  {{ menu.meta.title }}
                 </span>
               </router-link>
             </template>
             <el-menu-item-group>
               <el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
                 <router-link class="items" :to="m.path">
-                  <span class="title">{{ m.meta && t(m.meta.title) }}</span>
+                  <span class="title">{{ m.meta && m.meta.title }}</span>
                 </router-link>
               </el-menu-item>
             </el-menu-item-group>
@@ -56,7 +56,7 @@ limitations under the License. -->
             </el-icon>
             <template #title>
               <router-link class="items menu-title" :to="menu.children[0].path">
-                <span class="title">{{ t(menu.meta.title) }}</span>
+                <span class="title">{{ menu.meta.title }}</span>
               </router-link>
             </template>
           </el-menu-item>
@@ -70,13 +70,11 @@ limitations under the License. -->
   import { ref } from "vue";
   import type { RouteRecordRaw } from "vue-router";
   import { useRouter, useRoute } from "vue-router";
-  import { useI18n } from "vue-i18n";
   import Icon from "@/components/Icon.vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
 
   /*global Recordable*/
   const appStore = useAppStoreWithOut();
-  const { t } = useI18n();
   const name = ref<string>(String(useRouter().currentRoute.value.name));
   const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black");
   const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);

src/router/index.ts

@@ -30,6 +30,8 @@ const router = createRouter({
 
 (window as any).axiosCancel = [];
 
+const defaultPath = routesLayers[0].children[0].path;
+
 router.beforeEach((to, from, next) => {
   // const token = window.localStorage.getItem("skywalking-authority");
   if ((window as any).axiosCancel.length !== 0) {
@@ -38,8 +40,9 @@ router.beforeEach((to, from, next) => {
     }
     (window as any).axiosCancel = [];
   }
+
   if (to.path === "/") {
-    next({ path: "/general" });
+    next({ path: defaultPath });
   } else {
     next();
   }

src/router/layer.ts

@@ -14,21 +14,47 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import LayerJson from "./data";
 import Layout from "@/layout/Index.vue";
+import { useAppStoreWithOut } from "@/store/modules/app";
 
-function layerDashboards() {
-  const routes = LayerJson.map((item: any) => {
-    item.component = Layout;
-    if (item.children) {
-      item.children = item.children.map((d: any) => {
-        d.component = () => import("@/views/Layer.vue");
-        return d;
-      });
+async function layerDashboards() {
+  const appStore = useAppStoreWithOut();
+  await appStore.getActivateMenus();
+  const routes = appStore.currentMenus.map((item: any) => {
+    const route: any = {
+      path: "",
+      component: Layout,
+      meta: {
+        icon: item.icon,
+        title: item.title,
+      },
+      children: item.subItems && item.subItems.length ? [] : undefined,
+    };
+    for (const child of item.subItems || []) {
+      const d: any = {
+        name: child.name,
+        path: child.path,
+        meta: {
+          title: child.title,
+          layer: child.layer,
+        },
+      };
+      d.component = () => import("@/views/Layer.vue");
+      route.children.push(d);
+      const tab: any = {
+        name: `${child.name}ActiveTabIndex`,
+        path: `/${child.name}/tab/:activeTabIndex`,
+        meta: {
+          notShow: true,
+          layer: child.layer,
+        },
+      };
+      tab.component = () => import("@/views/Layer.vue");
+      route.children.push(tab);
     }
-    return item;
+    return route;
   });
   return routes;
 }
 
-export default layerDashboards();
+export default await layerDashboards();

src/store/modules/app.ts

@@ -22,6 +22,7 @@ import getLocalTime from "@/utils/localtime";
 import type { AxiosResponse } from "axios";
 import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
 import { TimeType } from "@/constants/data";
+import type { MenuOptions } from "@/types/app";
 /*global Nullable*/
 interface AppState {
   durationRow: Recordable;
@@ -35,7 +36,9 @@ interface AppState {
   version: string;
   isMobile: boolean;
   reloadTimer: Nullable<IntervalHandle>;
-  currentMenus: any;
+  currentMenus: MenuOptions[];
+  activateMenus: MenuOptions[];
+  checkedKeys: string[];
 }
 
 export const appStore = defineStore({
@@ -57,6 +60,8 @@ export const appStore = defineStore({
     isMobile: false,
     reloadTimer: null,
     currentMenus: [],
+    activateMenus: [],
+    checkedKeys: [],
   }),
   getters: {
     duration(): Duration {
@@ -127,9 +132,12 @@ export const appStore = defineStore({
     updateDurationRow(data: Duration) {
       this.durationRow = data;
     },
-    setCurrentMenus(menus: any) {
+    setCurrentMenus(menus: MenuOptions[]) {
       this.currentMenus = menus;
     },
+    setCheckedKeys(keys: string[]) {
+      this.checkedKeys = keys;
+    },
     setUTC(utcHour: number, utcMin: number): void {
       this.runEventStack();
       this.utcMin = utcMin;
@@ -163,6 +171,72 @@ export const appStore = defineStore({
         500,
       );
     },
+    async getActivateMenus() {
+      const resp = (await this.queryMenuItems()) || {};
+      const menus = (resp.getMenuItems || []).map((d: MenuOptions, index: number) => {
+        const name = `${d.title.replace(/\s+/g, "-")}-${index}`;
+        d.name = name;
+        d.path = `/${name}`;
+        if (d.subItems && d.subItems.length) {
+          d.hasGroup = true;
+          d.subItems = d.subItems.map((item: any, sub: number) => {
+            const id = `${d.title.replace(/\s+/g, "-")}-${index}${sub}`;
+            item.name = id;
+            item.path = `/${id}`;
+            return item;
+          });
+        } else {
+          d.subItems = [
+            {
+              name: d.name,
+              path: d.path,
+              title: d.title,
+              layer: d.layer,
+              activate: d.activate,
+              icon: d.icon,
+            },
+          ];
+        }
+
+        return d;
+      });
+      this.activateMenus = menus.filter((d: MenuOptions) => {
+        if (d.activate) {
+          d.subItems = d.subItems.filter((item: any) => {
+            if (item.activate) {
+              return item;
+            }
+          });
+          return d;
+        }
+      });
+      const customMenus = localStorage.getItem("customMenus");
+      if (customMenus) {
+        this.checkedKeys = JSON.parse(customMenus);
+      } else {
+        for (const menus of this.activateMenus) {
+          this.checkedKeys.push(menus.name);
+          for (const item of menus.subItems) {
+            this.checkedKeys.push(item.name);
+          }
+        }
+        window.localStorage.setItem("customMenus", JSON.stringify(this.checkedKeys));
+      }
+      await this.getCurrentMenus();
+    },
+    getCurrentMenus() {
+      const current = this.activateMenus.filter((d: MenuOptions) => {
+        if (this.checkedKeys.includes(d.name)) {
+          d.subItems = d.subItems.filter((item: any) => {
+            if (this.checkedKeys.includes(item.name)) {
+              return item;
+            }
+          });
+          return d;
+        }
+      });
+      this.setCurrentMenus(current);
+    },
     async queryOAPTimeInfo() {
       const res: AxiosResponse = await graphql.query("queryOAPTimeInfo").params({});
       if (res.data.errors) {

src/types/app.d.ts

@@ -52,10 +52,16 @@ export interface MenuOptions {
   icon: string;
   title: string;
   activate: boolean;
+  name?: string;
+  path?: string;
+  hasGroup?: boolean;
   subItems: {
     layer: string;
     icon: string;
     title: string;
     activate: boolean;
+    name?: string;
+    path?: string;
+    notShow?: boolean;
   }[];
 }

src/utils/cancelToken.ts

@@ -21,5 +21,5 @@ const CancelToken = axios.CancelToken;
 export const cancelToken = (): any =>
   new CancelToken(function executor(c) {
     const w = window as any;
-    w.axiosCancel.push(c);
+    (w.axiosCancel || []).push(c);
   });

src/views/marketplace/Menus.vue

@@ -16,11 +16,11 @@ limitations under the License. -->
   <div class="menus flex-v">
     <el-tree
       ref="treeRef"
-      :data="activateMenus"
+      :data="appStore.activateMenus"
       show-checkbox
       node-key="id"
       default-expand-all
-      :default-checked-keys="checkedKeys"
+      :default-checked-keys="appStore.checkedKeys"
       :props="defaultProps"
     />
     <div class="footer flex-v">
@@ -33,81 +33,25 @@ limitations under the License. -->
 <script lang="ts" setup>
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
-  import { MenuOptions } from "@/types/app";
   import { useAppStoreWithOut } from "@/store/modules/app";
 
   const appStore = useAppStoreWithOut();
   const { t } = useI18n();
   const treeRef = ref<InstanceType<any>>();
-  const activateMenus = ref<MenuOptions[]>([]);
-  const checkedKeys = ref<string[]>([]);
   const defaultProps = {
     children: "subItems",
     label: "title",
   };
 
   appStore.setPageTitle("Menus");
-  getActivateMenus();
 
   function getCheckedNodes() {
-    checkedKeys.value = treeRef.value!.getCheckedKeys(false);
-    setCurrentMenus();
+    const checkedKeys = treeRef.value!.getCheckedKeys(false);
+
+    appStore.setCheckedKeys(checkedKeys);
+    appStore.getCurrentMenus();
     window.localStorage.setItem("customMenus", JSON.stringify(checkedKeys.value));
   }
-
-  async function getActivateMenus() {
-    const resp = (await appStore.queryMenuItems()) || {};
-    const menus = (resp.getMenuItems || []).map((d: MenuOptions, index: number) => {
-      d.id = String(index);
-      if (d.subItems) {
-        d.subItems = d.subItems.map((item: MenuOptions, subIndex: number) => {
-          item.id = `${index}-${subIndex}`;
-          return item;
-        });
-      } else {
-        d.subItem = [];
-      }
-
-      return d;
-    });
-    activateMenus.value = menus.filter((d: MenuOptions) => {
-      if (d.activate) {
-        d.subItems = d.subItems.filter((item: MenuOptions) => {
-          if (item.activate) {
-            return item;
-          }
-        });
-        return d;
-      }
-    });
-    const customMenus = localStorage.getItem("customMenus");
-    if (customMenus) {
-      checkedKeys.value = JSON.parse(customMenus);
-    } else {
-      for (const menus of activateMenus.value) {
-        checkedKeys.value.push(menus.id);
-        for (const item of menus.subItems) {
-          checkedKeys.value.push(item.id);
-        }
-      }
-      window.localStorage.setItem("customMenus", JSON.stringify(checkedKeys.value));
-    }
-    setCurrentMenus();
-  }
-
-  function setCurrentMenus() {
-    const current = activateMenus.value.filter((d: MenuOptions) => {
-      if (checkedKeys.value.includes(d.id)) {
-        d.subItems = d.subItems.filter((item: MenuOptions) => {
-          if (checkedKeys.value.includes(item.id)) {
-            return item;
-          }
-        });
-        return d;
-      }
-    });
-    appStore.setCurrentMenus(current);
-  }
 </script>
 <style lang="scss" scoped>
   .menus {