diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue index f5576306..26a0285e 100644 --- a/src/layout/components/NavBar.vue +++ b/src/layout/components/NavBar.vue @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. --> - {{ m.meta && t(m.meta.title) }} + {{ m.meta && m.meta.title }} @@ -56,7 +56,7 @@ limitations under the License. --> @@ -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(useRouter().currentRoute.value.name)); const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black"); const routes = ref(useRouter().options.routes); diff --git a/src/router/index.ts b/src/router/index.ts index d3d9f771..1a471de8 100644 --- a/src/router/index.ts +++ b/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(); } diff --git a/src/router/layer.ts b/src/router/layer.ts index dc0fdc06..3ba8d334 100644 --- a/src/router/layer.ts +++ b/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(); diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index ba36aef5..1204e264 100644 --- a/src/store/modules/app.ts +++ b/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; - 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) { diff --git a/src/types/app.d.ts b/src/types/app.d.ts index 2d12b4c3..028e031c 100644 --- a/src/types/app.d.ts +++ b/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; }[]; } diff --git a/src/utils/cancelToken.ts b/src/utils/cancelToken.ts index 44da32ea..a4466adf 100644 --- a/src/utils/cancelToken.ts +++ b/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); }); diff --git a/src/views/marketplace/Menus.vue b/src/views/marketplace/Menus.vue index d32e6e37..82b316db 100644 --- a/src/views/marketplace/Menus.vue +++ b/src/views/marketplace/Menus.vue @@ -16,11 +16,11 @@ limitations under the License. -->
@@ -33,81 +33,25 @@ limitations under the License. -->