jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(projects): 修复主题相关，自适应操作系统暗黑模式

Browse Source
This commit is contained in:
Soybean
2021-10-25 17:57:43 +08:00
parent 4c85569b76
commit bfa42d769d
11 changed files with 301 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/layouts/BasicLayout/components/GlobalHeader/components/ThemeMode.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<hover-container class="px-12px" :show-tooltip="false">
<n-switch :value="theme.darkMode" @update:value="handleDarkMode">
<template #checked>
<icon-mdi-white-balance-sunny class="text-14px g_text-primary" />
</template>
<template #unchecked>
<icon-mdi-moon-waning-crescent class="text-14px g_text-primary" />
</template>
</n-switch>
</hover-container>
</template>
<script lang="ts" setup>
import { NSwitch } from 'naive-ui';
import { HoverContainer } from '@/components';
import { useThemeStore } from '@/store';
const theme = useThemeStore();
const { handleDarkMode } = useThemeStore();
</script>
<style scoped>
:deep(.n-switch__rail) {
background-color: #000e1c !important;
}
</style>

3
src/layouts/BasicLayout/components/GlobalHeader/components/index.ts
View File

@ -1,8 +1,9 @@
import GlobalBreadcrumb from './GlobalBreadcrumb.vue';
import UserAvatar from './UserAvatar.vue';
import MenuCollapse from './MenuCollapse.vue';
import ThemeMode from './ThemeMode.vue';
import FullScreen from './FullScreen.vue';
import SettingDrawerButton from './SettingDrawerButton.vue';
import GihubSite from './GihubSite.vue';
export { GlobalBreadcrumb, UserAvatar, MenuCollapse, FullScreen, SettingDrawerButton, GihubSite };
export { GlobalBreadcrumb, UserAvatar, MenuCollapse, ThemeMode, FullScreen, SettingDrawerButton, GihubSite };

11
src/layouts/BasicLayout/components/GlobalHeader/index.vue
View File

@ -19,6 +19,7 @@
<div class="flex justify-end h-full">
<gihub-site />
<full-screen />
<theme-mode />
<user-avatar />
<setting-drawer-button v-if="showSettingButton" />
</div>
@ -30,7 +31,15 @@
import { computed } from 'vue';
import { NLayoutHeader } from 'naive-ui';
import { useThemeStore } from '@/store';
import { GlobalBreadcrumb, UserAvatar, MenuCollapse, FullScreen, GihubSite, SettingDrawerButton } from './components';
import {
GlobalBreadcrumb,
UserAvatar,
MenuCollapse,
ThemeMode,
FullScreen,
GihubSite,
SettingDrawerButton
} from './components';
import { GlobalLogo } from '../common';
import HeaderMenu from './components/HeaderMenu.vue';