github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-13 08:17:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add activate

Browse Source
This commit is contained in:
Fine 2023-07-11 21:47:01 +08:00
parent d27a1833cd
commit a3b040d495
5 changed files with 44 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,37 +29,39 @@ limitations under the License. -->
:style="{ border: 'none' }" :style="{ border: 'none' }"
> >
<template v-for="(menu, index) in routes" :key="index"> <template v-for="(menu, index) in routes" :key="index">
<el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup" popper-class="sub-list"> <span v-if="menu.meta.activate">
<template #title> <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup" popper-class="sub-list">
<router-link class="items" :to="menu.path"> <template #title>
<el-icon class="menu-icons" :style="{ marginRight: '12px' }" @mouseover="setCollapse"> <router-link class="items" :to="menu.path">
<Icon size="lg" :iconName="menu.meta.icon" /> <el-icon class="menu-icons" :style="{ marginRight: '12px' }" @mouseover="setCollapse">
</el-icon> <Icon size="lg" :iconName="menu.meta.icon" />
<span class="title" :class="isCollapse ? 'collapse' : ''"> </el-icon>
{{ menu.meta.title }} <span class="title" :class="isCollapse ? 'collapse' : ''">
</span> {{ menu.meta.title }}
</router-link> </span>
</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>
</router-link> </router-link>
</el-menu-item> </template>
</el-menu-item-group> <el-menu-item-group>
</el-sub-menu> <el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
<el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else> <router-link class="items" :to="m.path">
<el-icon class="menu-icons" :style="{ marginRight: '12px' }" @mouseover="setCollapse"> <span class="title">{{ m.meta && m.meta.title }}</span>
<router-link class="items menu-title" :to="menu.children[0].path"> </router-link>
<Icon size="lg" :iconName="menu.meta.icon" /> </el-menu-item>
</router-link> </el-menu-item-group>
</el-icon> </el-sub-menu>
<template #title> <el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else>
<router-link class="items menu-title" :to="menu.children[0].path"> <el-icon class="menu-icons" :style="{ marginRight: '12px' }" @mouseover="setCollapse">
<span class="title">{{ menu.meta.title }}</span> <router-link class="items menu-title" :to="menu.children[0].path">
</router-link> <Icon size="lg" :iconName="menu.meta.icon" />
</template> </router-link>
</el-menu-item> </el-icon>
<template #title>
<router-link class="items menu-title" :to="menu.children[0].path">
<span class="title">{{ menu.meta.title }}</span>
</router-link>
</template>
</el-menu-item>
</span>
</template> </template>
</el-menu> </el-menu>
</div> </div>
@ -95,7 +97,7 @@ limitations under the License. -->
theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black"; theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black";
}; };
const filterMenus = (menus: Recordable[]) => { const filterMenus = (menus: Recordable[]) => {
return menus.filter((d) => d.meta && !d.meta.notShow); return menus.filter((d) => d.meta && !d.meta.notShow && d.meta.activate);
}; };
function setCollapse() { function setCollapse() {
open.value = true; open.value = true;

1
src/router/alarm.ts
View File

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

3
src/router/dashboard.ts
View File

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

5
src/router/layer.ts
View File

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

3
src/router/marketplace.ts
View File

@ -25,6 +25,7 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
title: "Marketplace", title: "Marketplace",
icon: "marketplace", icon: "marketplace",
hasGroup: true, hasGroup: true,
activate: true,
}, },
component: Layout, component: Layout,
children: [ children: [
@ -33,6 +34,7 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
name: "MenusManagement", name: "MenusManagement",
meta: { meta: {
title: "Categories", title: "Categories",
activate: true,
}, },
component: () => import("@/views/marketplace/Menus.vue"), component: () => import("@/views/marketplace/Menus.vue"),
}, },
@ -41,6 +43,7 @@ export const routesMarketplace: Array<RouteRecordRaw> = [
name: "Settings", name: "Settings",
meta: { meta: {
title: "Settings", title: "Settings",
activate: true,
}, },
component: () => import("@/views/marketplace/Settings.vue"), component: () => import("@/views/marketplace/Settings.vue"),
}, },