feat: 移除暗夜模式
This commit is contained in:
parent
e460c98d92
commit
87f7b3265d
|
@ -35,18 +35,6 @@
|
||||||
</template>
|
</template>
|
||||||
</a-dropdown>
|
</a-dropdown>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<a-tooltip
|
|
||||||
:content="theme === 'light' ? $t('settings.navbar.theme.toDark') : $t('settings.navbar.theme.toLight')"
|
|
||||||
>
|
|
||||||
<a-button class="nav-btn" type="outline" :shape="'circle'" @click="handleToggleTheme">
|
|
||||||
<template #icon>
|
|
||||||
<icon-moon-fill v-if="theme === 'dark'" />
|
|
||||||
<icon-sun-fill v-else />
|
|
||||||
</template>
|
|
||||||
</a-button>
|
|
||||||
</a-tooltip>
|
|
||||||
</li>
|
|
||||||
<li>
|
<li>
|
||||||
<a-tooltip :content="$t('settings.navbar.alerts')">
|
<a-tooltip :content="$t('settings.navbar.alerts')">
|
||||||
<div class="message-box-trigger">
|
<div class="message-box-trigger">
|
||||||
|
@ -157,21 +145,6 @@
|
||||||
return appStore.theme;
|
return appStore.theme;
|
||||||
});
|
});
|
||||||
const topMenu = computed(() => appStore.topMenu && appStore.menu);
|
const topMenu = computed(() => appStore.topMenu && appStore.menu);
|
||||||
const isDark = useDark({
|
|
||||||
selector: 'body',
|
|
||||||
attribute: 'MS-theme',
|
|
||||||
valueDark: 'dark',
|
|
||||||
valueLight: 'light',
|
|
||||||
storageKey: 'MS-theme',
|
|
||||||
onChanged(dark: boolean) {
|
|
||||||
// overridden default behavior
|
|
||||||
appStore.toggleTheme(dark);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const toggleTheme = useToggle(isDark);
|
|
||||||
const handleToggleTheme = () => {
|
|
||||||
toggleTheme();
|
|
||||||
};
|
|
||||||
// const setVisible = () => {
|
// const setVisible = () => {
|
||||||
// appStore.updateSettings({ globalSettings: true });
|
// appStore.updateSettings({ globalSettings: true });
|
||||||
// };
|
// };
|
||||||
|
|
|
@ -1,30 +0,0 @@
|
||||||
import { computed } from 'vue';
|
|
||||||
import { EChartsOption } from 'echarts';
|
|
||||||
import { useAppStore } from '@/store';
|
|
||||||
|
|
||||||
// for code hints
|
|
||||||
// import { SeriesOption } from 'echarts';
|
|
||||||
// Because there are so many configuration items, this provides a relatively convenient code hint.
|
|
||||||
// When using vue, pay attention to the reactive issues. It is necessary to ensure that corresponding functions can be triggered, TypeScript does not report errors, and code writing is convenient.
|
|
||||||
interface optionsFn {
|
|
||||||
(isDark: boolean): EChartsOption;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* echarts 配置
|
|
||||||
*/
|
|
||||||
export default function useChartOption(sourceOption: optionsFn) {
|
|
||||||
const appStore = useAppStore();
|
|
||||||
const isDark = computed(() => {
|
|
||||||
return appStore.theme === 'dark';
|
|
||||||
});
|
|
||||||
// echarts support https://echarts.apache.org/zh/theme-builder.html
|
|
||||||
// It's not used here
|
|
||||||
// TODO echarts themes
|
|
||||||
const chartOption = computed<EChartsOption>(() => {
|
|
||||||
return sourceOption(isDark.value);
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
chartOption,
|
|
||||||
};
|
|
||||||
}
|
|
|
@ -1,16 +0,0 @@
|
||||||
import { computed } from 'vue';
|
|
||||||
import { useAppStore } from '@/store';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 暗黑模式相关
|
|
||||||
* @returns 调用方法
|
|
||||||
*/
|
|
||||||
export default function useThemes() {
|
|
||||||
const appStore = useAppStore();
|
|
||||||
const isDark = computed(() => {
|
|
||||||
return appStore.theme === 'dark';
|
|
||||||
});
|
|
||||||
return {
|
|
||||||
isDark,
|
|
||||||
};
|
|
||||||
}
|
|
|
@ -6,8 +6,6 @@ export default {
|
||||||
'settings.language': 'Language',
|
'settings.language': 'Language',
|
||||||
'settings.navbar': 'Navbar',
|
'settings.navbar': 'Navbar',
|
||||||
'settings.menuWidth': 'Menu Width (px)',
|
'settings.menuWidth': 'Menu Width (px)',
|
||||||
'settings.navbar.theme.toLight': 'Click to use light mode',
|
|
||||||
'settings.navbar.theme.toDark': 'Click to use dark mode',
|
|
||||||
'settings.navbar.screen.toFull': 'Click to switch to full screen mode',
|
'settings.navbar.screen.toFull': 'Click to switch to full screen mode',
|
||||||
'settings.navbar.screen.toExit': 'Click to exit the full screen mode',
|
'settings.navbar.screen.toExit': 'Click to exit the full screen mode',
|
||||||
'settings.navbar.alerts': 'alerts',
|
'settings.navbar.alerts': 'alerts',
|
||||||
|
|
|
@ -6,8 +6,6 @@ export default {
|
||||||
'settings.language': '语言',
|
'settings.language': '语言',
|
||||||
'settings.navbar': '导航栏',
|
'settings.navbar': '导航栏',
|
||||||
'settings.menuWidth': '菜单宽度 (px)',
|
'settings.menuWidth': '菜单宽度 (px)',
|
||||||
'settings.navbar.theme.toLight': '点击切换为亮色模式',
|
|
||||||
'settings.navbar.theme.toDark': '点击切换为暗黑模式',
|
|
||||||
'settings.navbar.screen.toFull': '点击切换全屏模式',
|
'settings.navbar.screen.toFull': '点击切换全屏模式',
|
||||||
'settings.navbar.screen.toExit': '点击退出全屏模式',
|
'settings.navbar.screen.toExit': '点击退出全屏模式',
|
||||||
'settings.navbar.alerts': '消息通知',
|
'settings.navbar.alerts': '消息通知',
|
||||||
|
|
|
@ -33,20 +33,6 @@ const useAppStore = defineStore('app', {
|
||||||
// @ts-ignore-next-line
|
// @ts-ignore-next-line
|
||||||
this.$patch(partial);
|
this.$patch(partial);
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
|
||||||
* 切换暗黑模式
|
|
||||||
* @param dark 是否暗黑模式
|
|
||||||
*/
|
|
||||||
toggleTheme(dark: boolean) {
|
|
||||||
if (dark) {
|
|
||||||
this.theme = 'dark';
|
|
||||||
document.body.setAttribute('MS-theme', 'dark');
|
|
||||||
} else {
|
|
||||||
this.theme = 'light';
|
|
||||||
document.body.removeAttribute('MS-theme');
|
|
||||||
}
|
|
||||||
},
|
|
||||||
/**
|
/**
|
||||||
* 切换显示模式
|
* 切换显示模式
|
||||||
* @param device 显示模式:mobile | desktop
|
* @param device 显示模式:mobile | desktop
|
||||||
|
|
Loading…
Reference in New Issue