github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 09:48:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

sidebar only in dashboard

Browse Source
This commit is contained in:
Brandon Fergerson 2022-04-29 18:53:05 +02:00
parent 4a42e986aa
commit 2cc94c4adc
1 changed files with 97 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,104 +12,108 @@ distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 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" v-if="isFullview === false">
<!-- <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">--> <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
<!-- <Icon--> <Icon
<!-- :size="isCollapse ? 'xl' : 'logo'"--> :size="isCollapse ? 'xl' : 'logo'"
<!-- :iconName="isCollapse ? 'logo' : 'logo-sw'"--> :iconName="isCollapse ? 'logo' : 'logo-sw'"
<!-- />--> />
<!-- </div>--> </div>
<!-- <el-menu--> <el-menu
<!-- active-text-color="#448dfe"--> active-text-color="#448dfe"
<!-- background-color="#252a2f"--> background-color="#252a2f"
<!-- class="el-menu-vertical"--> class="el-menu-vertical"
<!-- :default-active="name"--> :default-active="name"
<!-- text-color="#efefef"--> text-color="#efefef"
<!-- :unique-opened="true"--> :unique-opened="true"
<!-- :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--> <router-link
<!-- class="items"--> class="items"
<!-- :to="menu.path"--> :to="menu.path"
<!-- :exact="menu.meta.exact || false"--> :exact="menu.meta.exact || false"
<!-- >--> >
<!-- <el-icon class="menu-icons" :style="{ marginRight: '12px' }">--> <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<!-- <Icon size="lg" :iconName="menu.meta.icon" />--> <Icon size="lg" :iconName="menu.meta.icon" />
<!-- </el-icon>--> </el-icon>
<!-- <span :class="isCollapse ? 'collapse' : ''">--> <span :class="isCollapse ? 'collapse' : ''">
<!-- {{ t(menu.meta.title) }}--> {{ t(menu.meta.title) }}
<!-- </span>--> </span>
<!-- </router-link>--> </router-link>
<!-- </template>--> </template>
<!-- <el-menu-item-group>--> <el-menu-item-group>
<!-- <el-menu-item--> <el-menu-item
<!-- v-for="(m, idx) in filterMenus(menu.children)"--> v-for="(m, idx) in filterMenus(menu.children)"
<!-- :index="m.name"--> :index="m.name"
<!-- :key="idx"--> :key="idx"
<!-- >--> >
<!-- <router-link--> <router-link
<!-- class="items"--> class="items"
<!-- :to="m.path"--> :to="m.path"
<!-- :exact="m.meta.exact || false"--> :exact="m.meta.exact || false"
<!-- >--> >
<!-- <span>{{ t(m.meta.title) }}</span>--> <span>{{ t(m.meta.title) }}</span>
<!-- </router-link>--> </router-link>
<!-- </el-menu-item>--> </el-menu-item>
<!-- </el-menu-item-group>--> </el-menu-item-group>
<!-- </el-sub-menu>--> </el-sub-menu>
<!-- <el-menu-item--> <el-menu-item
<!-- :index="String(menu.name)"--> :index="String(menu.name)"
<!-- @click="changePage(menu)"--> @click="changePage(menu)"
<!-- v-else--> v-else
<!-- >--> >
<!-- <el-icon class="menu-icons" :style="{ marginRight: '12px' }">--> <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
<!-- <router-link--> <router-link
<!-- class="items"--> class="items"
<!-- :to="menu.children[0].path"--> :to="menu.children[0].path"
<!-- :exact="menu.meta.exact"--> :exact="menu.meta.exact"
<!-- >--> >
<!-- <Icon size="lg" :iconName="menu.meta.icon" />--> <Icon size="lg" :iconName="menu.meta.icon" />
<!-- </router-link>--> </router-link>
<!-- </el-icon>--> </el-icon>
<!-- <template #title>--> <template #title>
<!-- <router-link--> <router-link
<!-- class="items"--> class="items"
<!-- :to="menu.children[0].path"--> :to="menu.children[0].path"
<!-- :exact="menu.meta.exact"--> :exact="menu.meta.exact"
<!-- >--> >
<!-- <span>{{ t(menu.meta.title) }}</span>--> <span>{{ t(menu.meta.title) }}</span>
<!-- </router-link>--> </router-link>
<!-- </template>--> </template>
<!-- </el-menu-item>--> </el-menu-item>
<!-- </template>--> </template>
<!-- </el-menu>--> </el-menu>
<!-- <div--> <div
<!-- class="menu-control"--> class="menu-control"
<!-- :class="isCollapse ? 'collapse' : ''"--> :class="isCollapse ? 'collapse' : ''"
<!-- :style="{--> :style="{
<!-- color: theme === 'light' ? '#eee' : '#252a2f',--> color: theme === 'light' ? '#eee' : '#252a2f',
<!-- }"--> }"
<!-- >--> >
<!-- <Icon--> <Icon
<!-- size="middle"--> size="middle"
<!-- iconName="format_indent_decrease"--> iconName="format_indent_decrease"
<!-- @click="controlMenu"--> @click="controlMenu"
<!-- />--> />
<!-- </div>--> </div>
<!-- </div>--> </div>
<!--</template>--> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { computed, ref } from "vue";
import { useRouter, RouteRecordRaw } from "vue-router"; import { useRouter, RouteRecordRaw, useRoute } from "vue-router";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import Icon from "@/components/Icon.vue"; import Icon from "@/components/Icon.vue";
const { path } = useRoute();
const isFullview = computed(() => {
return path.includes("fullview");
});
const { t } = useI18n(); const { t } = useI18n();
const name = ref<any>(String(useRouter().currentRoute.value.name)); const name = ref<any>(String(useRouter().currentRoute.value.name));
const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")