github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-02 06:04:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: optimize side bar component to make it more friendly (#230)

Browse Source
This commit is contained in:
Fine0830 2023-02-09 17:54:11 +08:00 committed by GitHub
parent 2b88266d67
commit 1877776720
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 79 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/layout/components/NavBar.vue
View File

@ -101,7 +101,7 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.nav-bar { .nav-bar {
padding: 5px 10px 5px 28px; padding: 5px 10px;
text-align: left; text-align: left;
justify-content: space-between; justify-content: space-between;
background-color: #fafbfc; background-color: #fafbfc;

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

@ -13,62 +13,54 @@ 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" v-if="showMenu"> <div class="side-bar" v-if="showMenu" @click="isCollapse = false" @mouseleave="isCollapse = true">
<div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'"> <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
<Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" /> <Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" />
</div> </div>
<el-menu <div class="menu scroll_bar_dark" :style="isCollapse ? {} : { width: '220px' }">
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" :collapse="isCollapse"
: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"> <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
<template #title> <template #title>
<router-link class="items" :to="menu.path"> <router-link class="items" :to="menu.path">
<el-icon class="menu-icons" :style="{ marginRight: '12px' }"> <el-icon class="menu-icons" :style="{ marginRight: '12px' }" @mouseover="setCollapse">
<Icon size="lg" :iconName="menu.meta.icon" /> <Icon size="lg" :iconName="menu.meta.icon" />
</el-icon> </el-icon>
<span class="title" :class="isCollapse ? 'collapse' : ''"> <span class="title" :class="isCollapse ? 'collapse' : ''">
{{ t(menu.meta.title) }} {{ t(menu.meta.title) }}
</span> </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 && t(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' }"> <span class="title">{{ m.meta && t(m.meta.title) }}</span>
<router-link class="items" :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" :to="menu.children[0].path"> <el-icon class="menu-icons" :style="{ marginRight: '12px' }" @mouseover="setCollapse">
<span class="title">{{ t(menu.meta.title) }}</span> <router-link class="items" :to="menu.children[0].path">
</router-link> <Icon size="lg" :iconName="menu.meta.icon" />
</template> </router-link>
</el-menu-item> </el-icon>
</template> <template #title>
</el-menu> <router-link class="items" :to="menu.children[0].path">
<div <span class="title">{{ t(menu.meta.title) }}</span>
class="menu-control" </router-link>
:class="isCollapse ? 'collapse' : ''" </template>
:style="{ </el-menu-item>
color: theme === 'light' ? '#eee' : '#252a2f', </template>
}" </el-menu>
>
<Icon size="middle" iconName="format_indent_decrease" @click="controlMenu" />
</div> </div>
</div> </div>
</template> </template>
@ -87,7 +79,7 @@ limitations under the License. -->
const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black"); const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black");
const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes); const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
const route = useRoute(); const route = useRoute();
const isCollapse = ref(false); const isCollapse = ref(true);
const showMenu = ref(true); const showMenu = ref(true);
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) { if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
@ -98,29 +90,37 @@ limitations under the License. -->
if (route.name === "ViewWidget") { if (route.name === "ViewWidget") {
showMenu.value = false; showMenu.value = false;
} }
const controlMenu = () => {
isCollapse.value = !isCollapse.value;
};
const changePage = (menu: RouteRecordRaw) => { const changePage = (menu: RouteRecordRaw) => {
theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black"; theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black";
}; };
const filterMenus = (menus: any[]) => { const filterMenus = (menus: any[]) => {
return menus.filter((d) => d.meta && !d.meta.notShow); return menus.filter((d) => d.meta && !d.meta.notShow);
}; };
function setCollapse() {
isCollapse.value = false;
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.side-bar { .side-bar {
background: #252a2f; background: #252a2f;
height: 100%; height: 100%;
margin-bottom: 100px; overflow: hidden;
margin-bottom: 180px;
}
.menu {
height: calc(100% - 30px);
overflow: hidden;
}
.menu:hover {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;
} }
.el-menu-vertical:not(.el-menu--collapse) { .el-menu-vertical:not(.el-menu--collapse) {
width: 220px; width: 220px;
font-size: 16px; font-size: 14px;
} }
.logo-icon-collapse { .logo-icon-collapse {
@ -142,16 +142,6 @@ limitations under the License. -->
width: 110px; width: 110px;
} }
.menu-control {
position: absolute;
top: 7px;
left: 220px;
cursor: pointer;
transition: all 0.2s linear;
z-index: 99;
color: #252a2f;
}
.menu-control.collapse { .menu-control.collapse {
left: 70px; left: 70px;
} }

2
src/router/data/aws.ts
View File

@ -57,7 +57,7 @@ export default [
notShow: true, notShow: true,
layer: "AWS_S3", layer: "AWS_S3",
}, },
}, },
], ],
}, },
]; ];

18
src/styles/lib.scss
View File

@ -197,3 +197,21 @@
box-shadow: inset 0 0 6px #ccc; box-shadow: inset 0 0 6px #ccc;
background-color: #aaa; background-color: #aaa;
} }
.scroll_bar_dark::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: #666;
}
.scroll_bar_dark::-webkit-scrollbar-track {
background-color: #252a2f;
border-radius: 3px;
box-shadow: inset 0 0 6px #999;
}
.scroll_bar_dark::-webkit-scrollbar-thumb {
border-radius: 3px;
box-shadow: inset 0 0 6px #888;
background-color: #999;
}