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: update menus

Browse Source
This commit is contained in:
Fine 2023-02-09 17:18:39 +08:00
parent 74dd7e4cc3
commit d87f5a0cfd
2 changed files with 11 additions and 19 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;

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

@ -13,7 +13,7 @@ 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="setCollapse" @mouseleave="closeMenu">
<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>
@ -24,7 +24,6 @@ limitations under the License. -->
class="el-menu-vertical" class="el-menu-vertical"
:default-active="name" :default-active="name"
text-color="#efefef" text-color="#efefef"
:unique-opened="true"
:collapse="isCollapse" :collapse="isCollapse"
:style="{ border: 'none' }" :style="{ border: 'none' }"
> >
@ -32,7 +31,7 @@ limitations under the License. -->
<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' : ''">
@ -49,7 +48,7 @@ limitations under the License. -->
</el-menu-item-group> </el-menu-item-group>
</el-sub-menu> </el-sub-menu>
<el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else> <el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else>
<el-icon class="menu-icons" :style="{ marginRight: '12px' }"> <el-icon class="menu-icons" :style="{ marginRight: '12px' }" @mouseover="setCollapse">
<router-link class="items" :to="menu.children[0].path"> <router-link class="items" :to="menu.children[0].path">
<Icon size="lg" :iconName="menu.meta.icon" /> <Icon size="lg" :iconName="menu.meta.icon" />
</router-link> </router-link>
@ -63,15 +62,6 @@ limitations under the License. -->
</template> </template>
</el-menu> </el-menu>
</div> </div>
<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>
</template> </template>
@ -89,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)) {
@ -100,15 +90,18 @@ 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;
}
function closeMenu() {
isCollapse.value = true;
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -126,7 +119,6 @@ limitations under the License. -->
.menu:hover { .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) {