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