From aae0b8c328acafd696111ff4912d4a93e2699334 Mon Sep 17 00:00:00 2001 From: xingyu4j <xingyu4j@vip.qq.com> Date: Wed, 23 Nov 2022 16:34:09 +0800 Subject: [PATCH] fix: dark --- yudao-ui-admin-vue3/src/App.vue | 21 ++++++++----------- yudao-ui-admin-vue3/src/views/Login/Login.vue | 4 ++-- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/yudao-ui-admin-vue3/src/App.vue b/yudao-ui-admin-vue3/src/App.vue index 6ffa53649..8236a03e9 100644 --- a/yudao-ui-admin-vue3/src/App.vue +++ b/yudao-ui-admin-vue3/src/App.vue @@ -1,26 +1,22 @@ -<template> - <ConfigGlobal :size="currentSize"> - <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" /> - </ConfigGlobal> -</template> <script setup lang="ts"> import { computed } from 'vue' -import Cookies from 'js-cookie' import { isDark } from '@/utils/is' import { useAppStore } from '@/store/modules/app' import { useDesign } from '@/hooks/web/useDesign' import { ConfigGlobal } from '@/components/ConfigGlobal' +import { useCache } from '@/hooks/web/useCache' const { getPrefixCls } = useDesign() const prefixCls = getPrefixCls('app') const appStore = useAppStore() const currentSize = computed(() => appStore.getCurrentSize) const greyMode = computed(() => appStore.getGreyMode) +const { wsCache } = useCache() // 根据浏览器当前主题设置系统主题色 const setDefaultTheme = () => { - if (Cookies.get('isDark')) { - if (Cookies.get('isDark') === 'true') { + if (wsCache.get('isDark')) { + if (wsCache.get('isDark') || wsCache.get('isDark') === 'true') { appStore.setIsDark(true) } else { appStore.setIsDark(false) @@ -32,15 +28,17 @@ const setDefaultTheme = () => { } setDefaultTheme() </script> - +<template> + <ConfigGlobal :size="currentSize"> + <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" /> + </ConfigGlobal> +</template> <style lang="scss"> $prefix-cls: #{$namespace}-app; - .size { width: 100%; height: 100%; } - html, body { padding: 0 !important; @@ -52,7 +50,6 @@ body { @extend .size; } } - .#{$prefix-cls}-grey-mode { filter: grayscale(100%); } diff --git a/yudao-ui-admin-vue3/src/views/Login/Login.vue b/yudao-ui-admin-vue3/src/views/Login/Login.vue index 3c5b85ac6..4492d7238 100644 --- a/yudao-ui-admin-vue3/src/views/Login/Login.vue +++ b/yudao-ui-admin-vue3/src/views/Login/Login.vue @@ -1,7 +1,7 @@ <template> <div :class="prefixCls" - class="h-[100%] relative overflow-hidden <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px" + class="h-[100%] relative <xl:bg-v-dark <sm:px-10px <xl:px-10px <md:px-10px" > <div class="relative h-full flex mx-auto"> <div @@ -74,7 +74,7 @@ const prefixCls = getPrefixCls('login') </script> <style lang="scss" scoped> -$prefix-cls: #{$namespace}-panel; +$prefix-cls: #{$namespace}-login; .#{$prefix-cls} { &__left {