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

build: migrate the build tool from vue-cli to vite4 (#208)

Browse Source
This commit is contained in:
Fine0830
2022-12-17 14:07:03 +08:00
committed by GitHub
parent 1e0c253488
commit 44dcb1e7f6
214 changed files with 27014 additions and 54234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,10 +15,7 @@ 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'"
/>
<Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" />
</div>
<el-menu
active-text-color="#448dfe"
@@ -43,22 +40,14 @@ limitations under the License. -->
</router-link>
</template>
<el-menu-item-group>
<el-menu-item
v-for="(m, idx) in filterMenus(menu.children)"
:index="m.name"
:key="idx"
>
<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>
</el-menu-item>
</el-menu-item-group>
</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' }">
<router-link class="items" :to="menu.children[0].path">
<Icon size="lg" :iconName="menu.meta.icon" />
@@ -79,124 +68,117 @@ limitations under the License. -->
color: theme === 'light' ? '#eee' : '#252a2f',
}"
>
<Icon
size="middle"
iconName="format_indent_decrease"
@click="controlMenu"
/>
<Icon size="middle" iconName="format_indent_decrease" @click="controlMenu" />
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useRouter, RouteRecordRaw } from "vue-router";
import { useI18n } from "vue-i18n";
import Icon from "@/components/Icon.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
import { ref } from "vue";
import type { RouteRecordRaw } from "vue-router";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import Icon from "@/components/Icon.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
const appStore = useAppStoreWithOut();
const { t } = useI18n();
const name = ref<string>(String(useRouter().currentRoute.value.name));
const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
? ref("light")
: ref("black");
const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
appStore.setIsMobile(true);
} else {
appStore.setIsMobile(false);
}
const isCollapse = ref(false);
const controlMenu = () => {
isCollapse.value = !isCollapse.value;
};
const changePage = (menu: RouteRecordRaw) => {
theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name))
? "light"
: "black";
};
const filterMenus = (menus: any[]) => {
return menus.filter((d) => d.meta && !d.meta.notShow);
};
const appStore = useAppStoreWithOut();
const { t } = useI18n();
const name = ref<string>(String(useRouter().currentRoute.value.name));
const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black");
const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
appStore.setIsMobile(true);
} else {
appStore.setIsMobile(false);
}
const isCollapse = ref(false);
const controlMenu = () => {
isCollapse.value = !isCollapse.value;
};
const changePage = (menu: RouteRecordRaw) => {
theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black";
};
const filterMenus = (menus: any[]) => {
return menus.filter((d) => d.meta && !d.meta.notShow);
};
</script>
<style lang="scss" scoped>
.side-bar {
background: #252a2f;
height: 100%;
margin-bottom: 100px;
overflow-y: auto;
overflow-x: hidden;
}
.side-bar {
background: #252a2f;
height: 100%;
margin-bottom: 100px;
overflow-y: auto;
overflow-x: hidden;
}
.el-menu-vertical:not(.el-menu--collapse) {
width: 220px;
font-size: 16px;
}
.el-menu-vertical:not(.el-menu--collapse) {
width: 220px;
font-size: 16px;
}
.logo-icon-collapse {
width: 65px;
margin: 15px 0 10px 0;
text-align: center;
}
.logo-icon-collapse {
width: 65px;
margin: 15px 0 10px 0;
text-align: center;
}
span.collapse {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
span.collapse {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
.logo-icon {
margin: 15px 0 10px 20px;
width: 110px;
}
.logo-icon {
margin: 15px 0 10px 20px;
width: 110px;
}
.menu-control {
position: absolute;
top: 7px;
left: 220px;
cursor: pointer;
transition: all 0.2s linear;
z-index: 99;
color: #252a2f;
}
.menu-control {
position: absolute;
top: 7px;
left: 220px;
cursor: pointer;
transition: all 0.2s linear;
z-index: 99;
color: #252a2f;
}
.menu-control.collapse {
left: 70px;
}
.menu-control.collapse {
left: 70px;
}
.el-icon.el-sub-menu__icon-arrow {
height: 12px;
}
.el-icon.el-sub-menu__icon-arrow {
height: 12px;
}
.items {
display: inline-block;
width: 100%;
}
.items {
display: inline-block;
width: 100%;
}
.version {
color: #eee;
font-size: 12px;
cursor: pointer;
padding-left: 23px;
margin-bottom: 10px;
position: absolute;
bottom: 0;
left: 10px;
}
.version {
color: #eee;
font-size: 12px;
cursor: pointer;
padding-left: 23px;
margin-bottom: 10px;
position: absolute;
bottom: 0;
left: 10px;
}
.empty {
width: 100%;
height: 60px;
}
.empty {
width: 100%;
height: 60px;
}
.title {
display: inline-block;
max-width: 110px;
text-overflow: ellipsis;
overflow: hidden;
}
.title {
display: inline-block;
max-width: 110px;
text-overflow: ellipsis;
overflow: hidden;
}
</style>