github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-09-21 13:49:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add menus in side bar (#30)

Browse Source
This commit is contained in:
Fine0830
2022-03-21 15:36:56 +08:00
committed by GitHub
parent 42d8e909f6
commit 61f82c54df
21 changed files with 386 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,13 +33,17 @@ limitations under the License. -->
<template v-for="(menu, index) in routes" :key="index">
<el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
<template #title>
<router-link :to="menu.path" :exact="menu.meta.exact || false">
<router-link
class="items"
:to="menu.path"
:exact="menu.meta.exact || false"
>
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<Icon size="lg" :iconName="menu.meta.icon" />
</el-icon>
<span :class="isCollapse ? 'collapse' : ''">{{
t(menu.meta.title)
}}</span>
<span :class="isCollapse ? 'collapse' : ''">
{{ t(menu.meta.title) }}
</span>
</router-link>
</template>
<el-menu-item-group>
@@ -48,7 +52,11 @@ limitations under the License. -->
:index="m.name"
:key="idx"
>
<router-link :to="m.path" :exact="m.meta.exact || false">
<router-link
class="items"
:to="m.path"
:exact="m.meta.exact || false"
>
<span>{{ t(m.meta.title) }}</span>
</router-link>
</el-menu-item>
@@ -59,13 +67,21 @@ limitations under the License. -->
@click="changePage(menu)"
v-else
>
<el-icon class="menu-icons" :style="{ margin: '-10px 12px 0 0' }">
<router-link :to="menu.children[0].path" :exact="menu.meta.exact">
<el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<router-link
class="items"
:to="menu.children[0].path"
:exact="menu.meta.exact"
>
<Icon size="lg" :iconName="menu.meta.icon" />
</router-link>
</el-icon>
<template #title>
<router-link :to="menu.children[0].path" :exact="menu.meta.exact">
<router-link
class="items"
:to="menu.children[0].path"
:exact="menu.meta.exact"
>
<span>{{ t(menu.meta.title) }}</span>
</router-link>
</template>
@@ -99,7 +115,7 @@ const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
? ref("light")
: ref("black");
const routes = ref<any>(useRouter().options.routes);
const isCollapse = ref(true);
const isCollapse = ref(false);
const controlMenu = () => {
isCollapse.value = !isCollapse.value;
};
@@ -172,4 +188,9 @@ span.collapse {
.el-icon.el-sub-menu__icon-arrow {
height: 12px;
}
.items {
display: inline-block;
width: 100%;
}
</style>