Commit aae0b8c328acafd696111ff4912d4a93e2699334
1 parent
4209625b
fix: dark
Showing
2 changed files
with
11 additions
and
14 deletions
yudao-ui-admin-vue3/src/App.vue
| 1 | -<template> | |
| 2 | - <ConfigGlobal :size="currentSize"> | |
| 3 | - <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" /> | |
| 4 | - </ConfigGlobal> | |
| 5 | -</template> | |
| 6 | 1 | <script setup lang="ts"> |
| 7 | 2 | import { computed } from 'vue' |
| 8 | -import Cookies from 'js-cookie' | |
| 9 | 3 | import { isDark } from '@/utils/is' |
| 10 | 4 | import { useAppStore } from '@/store/modules/app' |
| 11 | 5 | import { useDesign } from '@/hooks/web/useDesign' |
| 12 | 6 | import { ConfigGlobal } from '@/components/ConfigGlobal' |
| 7 | +import { useCache } from '@/hooks/web/useCache' | |
| 13 | 8 | |
| 14 | 9 | const { getPrefixCls } = useDesign() |
| 15 | 10 | const prefixCls = getPrefixCls('app') |
| 16 | 11 | const appStore = useAppStore() |
| 17 | 12 | const currentSize = computed(() => appStore.getCurrentSize) |
| 18 | 13 | const greyMode = computed(() => appStore.getGreyMode) |
| 14 | +const { wsCache } = useCache() | |
| 19 | 15 | |
| 20 | 16 | // 根据浏览器当前主题设置系统主题色 |
| 21 | 17 | const setDefaultTheme = () => { |
| 22 | - if (Cookies.get('isDark')) { | |
| 23 | - if (Cookies.get('isDark') === 'true') { | |
| 18 | + if (wsCache.get('isDark')) { | |
| 19 | + if (wsCache.get('isDark') || wsCache.get('isDark') === 'true') { | |
| 24 | 20 | appStore.setIsDark(true) |
| 25 | 21 | } else { |
| 26 | 22 | appStore.setIsDark(false) |
| ... | ... | @@ -32,15 +28,17 @@ const setDefaultTheme = () => { |
| 32 | 28 | } |
| 33 | 29 | setDefaultTheme() |
| 34 | 30 | </script> |
| 35 | - | |
| 31 | +<template> | |
| 32 | + <ConfigGlobal :size="currentSize"> | |
| 33 | + <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" /> | |
| 34 | + </ConfigGlobal> | |
| 35 | +</template> | |
| 36 | 36 | <style lang="scss"> |
| 37 | 37 | $prefix-cls: #{$namespace}-app; |
| 38 | - | |
| 39 | 38 | .size { |
| 40 | 39 | width: 100%; |
| 41 | 40 | height: 100%; |
| 42 | 41 | } |
| 43 | - | |
| 44 | 42 | html, |
| 45 | 43 | body { |
| 46 | 44 | padding: 0 !important; |
| ... | ... | @@ -52,7 +50,6 @@ body { |
| 52 | 50 | @extend .size; |
| 53 | 51 | } |
| 54 | 52 | } |
| 55 | - | |
| 56 | 53 | .#{$prefix-cls}-grey-mode { |
| 57 | 54 | filter: grayscale(100%); |
| 58 | 55 | } | ... | ... |
yudao-ui-admin-vue3/src/views/Login/Login.vue
| 1 | 1 | <template> |
| 2 | 2 | <div |
| 3 | 3 | :class="prefixCls" |
| 4 | - class="h-[100%] relative overflow-hidden <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px" | |
| 4 | + class="h-[100%] relative <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px" | |
| 5 | 5 | > |
| 6 | 6 | <div class="relative h-full flex mx-auto"> |
| 7 | 7 | <div |
| ... | ... | @@ -74,7 +74,7 @@ const prefixCls = getPrefixCls('login') |
| 74 | 74 | </script> |
| 75 | 75 | |
| 76 | 76 | <style lang="scss" scoped> |
| 77 | -$prefix-cls: #{$namespace}-panel; | |
| 77 | +$prefix-cls: #{$namespace}-login; | |
| 78 | 78 | |
| 79 | 79 | .#{$prefix-cls} { |
| 80 | 80 | &__left { | ... | ... |