mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-17 04:55:25 +00:00
update side bar
This commit is contained in:
Qiuxia Fan
parent
ad15f8c074
commit
e0f4a8fc2e
15
src/assets/icons/version.svg
Normal file
15
src/assets/icons/version.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@ -55,8 +55,8 @@ defineProps({
|
||||
}
|
||||
|
||||
&.lg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
|
||||
@ -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
|
||||
limitations under the License. -->
|
||||
<template>
|
||||
<div class="side-bar">
|
||||
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
|
||||
<Icon
|
||||
:size="isCollapse ? 'xl' : 'logo'"
|
||||
:iconName="isCollapse ? 'logo' : 'logo-sw'"
|
||||
/>
|
||||
</div>
|
||||
<el-menu
|
||||
active-text-color="#448dfe"
|
||||
background-color="#252a2f"
|
||||
class="el-menu-vertical"
|
||||
:default-active="name"
|
||||
text-color="#efefef"
|
||||
:unique-opened="true"
|
||||
: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 #title>
|
||||
<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>
|
||||
</router-link>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item
|
||||
v-for="(m, idx) in filterMenus(menu.children)"
|
||||
:index="m.name"
|
||||
:key="idx"
|
||||
>
|
||||
<div class="side-bar flex-v">
|
||||
<div>
|
||||
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
|
||||
<Icon
|
||||
:size="isCollapse ? 'xl' : 'logo'"
|
||||
:iconName="isCollapse ? 'logo' : 'logo-sw'"
|
||||
/>
|
||||
</div>
|
||||
<el-menu
|
||||
active-text-color="#448dfe"
|
||||
background-color="#252a2f"
|
||||
class="el-menu-vertical"
|
||||
:default-active="name"
|
||||
text-color="#efefef"
|
||||
:unique-opened="true"
|
||||
: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 #title>
|
||||
<router-link
|
||||
class="items"
|
||||
:to="m.path"
|
||||
:exact="m.meta.exact || false"
|
||||
:to="menu.path"
|
||||
: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>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-sub-menu>
|
||||
<el-menu-item
|
||||
:index="String(menu.name)"
|
||||
@click="changePage(menu)"
|
||||
v-else
|
||||
>
|
||||
<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
|
||||
class="items"
|
||||
:to="menu.children[0].path"
|
||||
:exact="menu.meta.exact"
|
||||
>
|
||||
<span>{{ t(menu.meta.title) }}</span>
|
||||
</router-link>
|
||||
</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"
|
||||
/>
|
||||
</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"
|
||||
:exact="m.meta.exact || false"
|
||||
>
|
||||
<span>{{ t(m.meta.title) }}</span>
|
||||
</router-link>
|
||||
</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
</el-sub-menu>
|
||||
<el-menu-item
|
||||
:index="String(menu.name)"
|
||||
@click="changePage(menu)"
|
||||
v-else
|
||||
>
|
||||
<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
|
||||
class="items"
|
||||
:to="menu.children[0].path"
|
||||
:exact="menu.meta.exact"
|
||||
>
|
||||
<span>{{ t(menu.meta.title) }}</span>
|
||||
</router-link>
|
||||
</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 class="version">
|
||||
<el-popover
|
||||
@ -109,7 +111,9 @@ limitations under the License. -->
|
||||
:content="appStore.version"
|
||||
>
|
||||
<template #reference>
|
||||
{{ t("version") }}
|
||||
<span>
|
||||
<Icon iconName="version" size="middle" />
|
||||
</span>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
@ -122,6 +126,7 @@ import { useRouter, RouteRecordRaw } from "vue-router";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useAppStoreWithOut } from "@/store/modules/app";
|
||||
import { ElMessage } from "element-plus";
|
||||
import Icon from "@/components/Icon.vue";
|
||||
|
||||
const appStore = useAppStoreWithOut();
|
||||
const { t } = useI18n();
|
||||
@ -154,19 +159,22 @@ async function getVersion() {
|
||||
<style lang="scss" scoped>
|
||||
.side-bar {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
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) {
|
||||
width: 210px;
|
||||
font-size: 18px;
|
||||
width: 200px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.logo-icon-collapse {
|
||||
width: 65px;
|
||||
margin: 15px 0 30px 0;
|
||||
margin: 15px 0 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -179,24 +187,14 @@ span.collapse {
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
margin: 15px 0 30px 15px;
|
||||
margin: 15px 0 10px 20px;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.el-sub-menu .el-icon {
|
||||
height: 26px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.el-sub-menu__title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-control {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
left: 215px;
|
||||
left: 200px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s linear;
|
||||
z-index: 99;
|
||||
@ -218,10 +216,9 @@ span.collapse {
|
||||
|
||||
.version {
|
||||
color: #eee;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -123,3 +123,21 @@ code,
|
||||
pre {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -27,7 +27,7 @@ module.exports = {
|
||||
},
|
||||
chainWebpack: (config) => {
|
||||
config.plugin("html").tap((args) => {
|
||||
args[0].title = "SkyWalking";
|
||||
args[0].title = "Apache SkyWalking";
|
||||
return args;
|
||||
});
|
||||
const svgRule = config.module.rule("svg");
|
||||
|
||||
Loading…
Reference in New Issue
Block a user