github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-12 15:52:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update menus

Browse Source
This commit is contained in:
Fine 2023-07-12 17:49:26 +08:00
parent 5781948ada
commit 861ab093cc
8 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/layout/components/SideBar.vue
View File

@ -36,14 +36,14 @@ limitations under the License. -->
<Icon size="lg" :iconName="menu.meta.icon" />
</el-icon>
<span class="title" :class="isCollapse ? 'collapse' : ''">
{{ menu.meta.title }}
{{ t(menu.meta.i18nKey) }}
</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 && m.meta.title }}</span>
<span class="title">{{ t(m.meta && m.meta.i18nKey) }}</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">{{ menu.meta.title }}</span>
<span class="title">{{ t(menu.meta.i18nKey) }}</span>
</router-link>
</template>
</el-menu-item>
@ -70,10 +70,12 @@ limitations under the License. -->
import { ref, watch } 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 { t } = useI18n();
const appStore = useAppStoreWithOut();
const router = useRouter();
const name = ref<string>(String(router.currentRoute.value.name));

2
src/router/alarm.ts
View File

@ -22,7 +22,7 @@ export const routesAlarm: Array<RouteRecordRaw> = [
path: "",
name: "Alarm",
meta: {
title: "Alerting",
i18nKey: "alarm",
icon: "spam",
hasGroup: false,
activate: true,

6
src/router/dashboard.ts
View File

@ -23,7 +23,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
component: Layout,
name: "Dashboard",
meta: {
title: "Dashboards",
i18nKey: "dashboards",
icon: "dashboard_customize",
hasGroup: true,
activate: true,
@ -34,7 +34,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
component: () => import("@/views/dashboard/List.vue"),
name: "List",
meta: {
title: "Dashboard List",
i18nKey: "dashboardList",
activate: true,
},
},
@ -43,7 +43,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
component: () => import("@/views/dashboard/New.vue"),
name: "New",
meta: {
title: "New Dashboard",
i18nKey: "dashboardNew",
activate: true,
},
},

6
src/router/layer.ts
View File

@ -31,6 +31,8 @@ async function layerDashboards() {
title: item.title,
hasGroup: item.hasGroup,
activate: item.activate,
descKey: item.descKey,
i18nKey: item.i18nKey,
},
children: item.subItems && item.subItems.length ? [] : undefined,
};
@ -43,6 +45,8 @@ async function layerDashboards() {
layer: child.layer,
icon: child.icon || "cloud_queue",
activate: child.activate,
descKey: child.descKey,
i18nKey: child.i18nKey,
},
component: () => import("@/views/Layer.vue"),
};
@ -68,6 +72,8 @@ async function layerDashboards() {
layer: item.layer,
icon: item.icon,
activate: item.activate,
descKey: item.descKey,
i18nKey: item.i18nKey,
},
component: () => import("@/views/Layer.vue"),
},

2
src/router/marketplace.ts
View File

@ -22,7 +22,7 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
path: "",
name: "Marketplace",
meta: {
title: "Marketplace",
i18nKey: "marketplace",
icon: "marketplace",
hasGroup: false,
activate: true,

2
src/router/settings.ts
View File

@ -22,7 +22,7 @@ export const routesSettings: Array<RouteRecordRaw> = [
path: "",
name: "Settings",
meta: {
title: "Settings",
i18nKey: "settings",
icon: "settings",
hasGroup: false,
activate: true,

1
src/store/modules/app.ts
View File

@ -175,6 +175,7 @@ export const appStore = defineStore({
const id = `${item.title.replace(/\s+/g, "-")}`;
item.name = `${id}-${index}${sub}`;
item.path = `/${t}/${id}`;
item.descKey = `${item.i18nKey}_desc`;
return item;
});
}

8
src/views/Marketplace.vue
View File

@ -25,10 +25,10 @@ limitations under the License. -->
>
<router-link :to="menu.hasGroup ? '' : menu.path || ''">
<div class="title" :class="menu.activate ? (menu.hasGroup ? '' : 'actived-font') : 'disabled'">
{{ menu.title }}
{{ t(menu.i18nKey) }}
</div>
</router-link>
<div class="mt-10"> {{ menu.description }} </div>
<div class="mt-10"> {{ t(menu.descKey) }} </div>
<el-link :href="menu.documentLink" target="_blank" class="link" v-show="menu.documentLink">
<el-button class="mt-10" size="small" type="primary"> {{ t("document") }} </el-button>
</el-link>
@ -37,9 +37,9 @@ limitations under the License. -->
<div class="mt-10 cards">
<el-card shadow="hover" v-for="(item, index) in currentItems.subItems || []" :key="index" class="card">
<router-link :to="item.path || ''">
<div class="title" :class="item.activate ? 'actived-font' : 'disabled'"> {{ item.title }}</div>
<div class="title" :class="item.activate ? 'actived-font' : 'disabled'"> {{ t(item.i18nKey) }}</div>
</router-link>
<div class="mt-10"> {{ item.description }} </div>
<div class="mt-10"> {{ t(item.descKey) }} </div>
<el-link :href="item.documentLink" target="_blank" class="link" v-show="item.documentLink">
<el-button class="mt-10" size="small" type="primary"> {{ t("document") }} </el-button>
</el-link>