github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-17 16:15:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

update side bar

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-28 12:08:08 +08:00
parent ad15f8c074
commit e0f4a8fc2e
5 changed files with 138 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/assets/icons/version.svg Normal file
View File

@ -0,0 +1,15 @@
<!-- Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<svg t="1648440420715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3665" width="32" height="32"><path d="M914.894958 0 109.105042 0c-21.501383 0-38.907264 14.078286-38.907264 31.740136L70.197778 990.855388c0 25.340915 34.811763 40.443077 60.664616 26.108822l350.677314-194.280351c13.054411-7.167128 29.948355-7.423096 43.002765-0.255969l368.851102 196.328102c25.852853 13.822317 60.152678-1.279844 60.152678-26.62076L953.546253 31.740136C953.802222 14.334255 936.39634 0 914.894958 0zM562.681831 746.661113l-101.363662 0-196.328102-547.773322 90.61297 0 155.885025 454.344695 2.30372 0 155.117118-454.344695 90.61297 0L562.681831 746.661113z" p-id="3666" fill="#e6e6e6"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
src/components/Icon.vue
View File

@ -55,8 +55,8 @@ defineProps({
} }
&.lg { &.lg {
width: 24px; width: 22px;
height: 24px; height: 22px;
} }
&.loading { &.loading {

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

@ -13,93 +13,95 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="side-bar"> <div class="side-bar flex-v">
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'"> <div>
<Icon <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
:size="isCollapse ? 'xl' : 'logo'" <Icon
:iconName="isCollapse ? 'logo' : 'logo-sw'" :size="isCollapse ? 'xl' : 'logo'"
/> :iconName="isCollapse ? 'logo' : 'logo-sw'"
</div> />
<el-menu </div>
active-text-color="#448dfe" <el-menu
background-color="#252a2f" active-text-color="#448dfe"
class="el-menu-vertical" background-color="#252a2f"
:default-active="name" class="el-menu-vertical"
text-color="#efefef" :default-active="name"
:unique-opened="true" text-color="#efefef"
:collapse="isCollapse" :unique-opened="true"
:style="{ border: 'none' }" :collapse="isCollapse"
> :style="{ border: 'none' }"
<template v-for="(menu, index) in routes" :key="index"> >
<el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup"> <template v-for="(menu, index) in routes" :key="index">
<template #title> <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
<router-link <template #title>
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>
</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 <router-link
class="items" class="items"
:to="m.path" :to="menu.path"
:exact="m.meta.exact || false" :exact="menu.meta.exact || false"
> >
<span>{{ t(m.meta.title) }}</span> <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>
</router-link> </router-link>
</el-menu-item> </template>
</el-menu-item-group> <el-menu-item-group>
</el-sub-menu> <el-menu-item
<el-menu-item v-for="(m, idx) in filterMenus(menu.children)"
:index="String(menu.name)" :index="m.name"
@click="changePage(menu)" :key="idx"
v-else >
> <router-link
<el-icon class="menu-icons" :style="{ marginRight: '12px' }"> class="items"
<router-link :to="m.path"
class="items" :exact="m.meta.exact || false"
:to="menu.children[0].path" >
:exact="menu.meta.exact" <span>{{ t(m.meta.title) }}</span>
> </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
<router-link :index="String(menu.name)"
class="items" @click="changePage(menu)"
:to="menu.children[0].path" v-else
:exact="menu.meta.exact" >
> <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<span>{{ t(menu.meta.title) }}</span> <router-link
</router-link> class="items"
</template> :to="menu.children[0].path"
</el-menu-item> :exact="menu.meta.exact"
</template> >
</el-menu> <Icon size="lg" :iconName="menu.meta.icon" />
<div </router-link>
class="menu-control" </el-icon>
:class="isCollapse ? 'collapse' : ''" <template #title>
:style="{ <router-link
color: theme === 'light' ? '#eee' : '#252a2f', class="items"
}" :to="menu.children[0].path"
> :exact="menu.meta.exact"
<Icon >
size="middle" <span>{{ t(menu.meta.title) }}</span>
iconName="format_indent_decrease" </router-link>
@click="controlMenu" </template>
/> </el-menu-item>
</template>
</el-menu>
<div
class="menu-control"
:class="isCollapse ? 'collapse' : ''"
:style="{
color: theme === 'light' ? '#eee' : '#252a2f',
}"
>
<Icon
size="middle"
iconName="format_indent_decrease"
@click="controlMenu"
/>
</div>
</div> </div>
<div class="version"> <div class="version">
<el-popover <el-popover
@ -109,7 +111,9 @@ limitations under the License. -->
:content="appStore.version" :content="appStore.version"
> >
<template #reference> <template #reference>
{{ t("version") }} <span>
<Icon iconName="version" size="middle" />
</span>
</template> </template>
</el-popover> </el-popover>
</div> </div>
@ -122,6 +126,7 @@ import { useRouter, RouteRecordRaw } from "vue-router";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import Icon from "@/components/Icon.vue";
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
const { t } = useI18n(); const { t } = useI18n();
@ -154,19 +159,22 @@ async function getVersion() {
<style lang="scss" scoped> <style lang="scss" scoped>
.side-bar { .side-bar {
position: relative; position: relative;
height: 100%;
background: #252a2f; background: #252a2f;
font-weight: bold; height: 100%;
overflow-y: auto;
overflow-x: hidden;
min-height: 700px;
justify-content: space-between;
} }
.el-menu-vertical:not(.el-menu--collapse) { .el-menu-vertical:not(.el-menu--collapse) {
width: 210px; width: 200px;
font-size: 18px; font-size: 16px;
} }
.logo-icon-collapse { .logo-icon-collapse {
width: 65px; width: 65px;
margin: 15px 0 30px 0; margin: 15px 0 10px 0;
text-align: center; text-align: center;
} }
@ -179,24 +187,14 @@ span.collapse {
} }
.logo-icon { .logo-icon {
margin: 15px 0 30px 15px; margin: 15px 0 10px 20px;
width: 110px; width: 110px;
} }
.el-sub-menu .el-icon {
height: 26px;
margin-right: 0;
}
.el-sub-menu__title {
font-size: 16px;
font-weight: bold;
}
.menu-control { .menu-control {
position: absolute; position: fixed;
top: 8px; top: 8px;
left: 215px; left: 200px;
cursor: pointer; cursor: pointer;
transition: all 0.2s linear; transition: all 0.2s linear;
z-index: 99; z-index: 99;
@ -218,10 +216,9 @@ span.collapse {
.version { .version {
color: #eee; color: #eee;
position: fixed;
bottom: 20px;
left: 20px;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
padding-left: 10px;
margin-bottom: 10px;
} }
</style> </style>

18
src/styles/reset.scss
View File

@ -123,3 +123,21 @@ code,
pre { pre {
font-family: Consolas, Menlo, Courier, monospace; font-family: Consolas, Menlo, Courier, monospace;
} }
.el-menu {
--el-menu-item-height: 50px;
}
.el-menu-item-group__title {
display: none;
}
.el-sub-menu .el-menu-item {
height: 40px;
line-height: 40px;
padding-left: 52px !important;
}
.el-icon.menu-icons {
margin-right: 8px !important;
}

2
vue.config.js
View File

@ -27,7 +27,7 @@ module.exports = {
}, },
chainWebpack: (config) => { chainWebpack: (config) => {
config.plugin("html").tap((args) => { config.plugin("html").tap((args) => {
args[0].title = "SkyWalking"; args[0].title = "Apache SkyWalking";
return args; return args;
}); });
const svgRule = config.module.rule("svg"); const svgRule = config.module.rule("svg");