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

feat: add theme switch

Browse Source
This commit is contained in:
Fine 2023-11-07 11:17:19 +08:00
parent d86543aeed
commit 5a62284650
1 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,6 +51,9 @@ limitations under the License. -->
<span title="refresh" class="ghost ml-5 cp" @click="handleReload"> <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
<Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" /> <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
</span> </span>
<span class="ghost ml-5">
<el-switch v-model="theme" @change="changeTheme" />
</span>
<span class="version ml-5 cp"> <span class="version ml-5 cp">
<el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version"> <el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">
<template #reference> <template #reference>
@ -84,11 +87,24 @@ limitations under the License. -->
const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]); const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]);
const timeRange = ref<number>(0); const timeRange = ref<number>(0);
const pageTitle = ref<string>(""); const pageTitle = ref<string>("");
const theme = ref<boolean>(false);
resetDuration(); resetDuration();
getVersion(); getVersion();
getNavPaths(); getNavPaths();
function changeTheme() {
const root = document.documentElement;
if (theme.value) {
root.classList.add("dark");
root.classList.remove("light");
} else {
root.classList.add("light");
root.classList.remove("dark");
}
}
function getName(list: any[]) { function getName(list: any[]) {
return list.find((d: any) => d.selected) || {}; return list.find((d: any) => d.selected) || {};
} }