diff --git a/src/hooks/useCache.ts b/src/hooks/useCache.ts index 1902b8d..ebb9d0e 100644 --- a/src/hooks/useCache.ts +++ b/src/hooks/useCache.ts @@ -3,6 +3,7 @@ */ import Keys from '@/api/Keys' +import { useTheme } from '@/utils/useTheme' import WebStorageCache from 'web-storage-cache' type CacheType = 'localStorage' | 'sessionStorage' @@ -17,7 +18,9 @@ export const useCache = (type: CacheType = 'localStorage') => { } } +const { setTheme } = useTheme() export const deleteUserCache = () => { + setTheme('light') const { wsCache } = useCache() wsCache.delete(Keys.STORAGE_USER_INFO) wsCache.delete(Keys.STORAGE_ROLE_ROUTERS) diff --git a/src/pages/deviceInfo/components/data-filter.vue b/src/pages/deviceInfo/components/data-filter.vue index f22ea04..730547a 100644 --- a/src/pages/deviceInfo/components/data-filter.vue +++ b/src/pages/deviceInfo/components/data-filter.vue @@ -46,6 +46,7 @@ v-model="filterData.categoryId" :options="categoryTreeData" placeholder="请选择设备分类" + style="width: 100%;" :props="{ checkStrictly: true, value: 'id', diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue index 9898f43..4393078 100644 --- a/src/pages/home/index.vue +++ b/src/pages/home/index.vue @@ -258,7 +258,7 @@ onMounted(() => { .shortcut-list { display: flex; align-items: center; - column-gap: 28px; + column-gap: 40px; } .item { display: flex; @@ -266,7 +266,7 @@ onMounted(() => { align-items: center; cursor: pointer; span { - margin-top: 8px; + margin-top: 10px; font-size: 16px; color: var(--label-color); } @@ -275,12 +275,12 @@ onMounted(() => { } } :deep(.wrap-body) { - padding-top: 0; + // padding-top: 0; padding-left: 20px; } :deep(.el-button) { - width: 84px; - height: 84px; + width: 78px; + height: 78px; } } } diff --git a/src/utils/useTheme.ts b/src/utils/useTheme.ts index 4271b17..ca96995 100644 --- a/src/utils/useTheme.ts +++ b/src/utils/useTheme.ts @@ -4,7 +4,7 @@ const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches const localTheme = localStorage.getItem(Keys.STORAGE_THEME) || (prefersDark ? 'dark' : 'light') - const theme = ref<'light' | 'dark'>(localTheme as 'light' | 'dark'); +const theme = ref<'light' | 'dark'>(localTheme as 'light' | 'dark') const chartGraphicTextColor = computed(() => theme.value === 'dark' ? '#ccc' : '#4d4d4d' @@ -13,6 +13,7 @@ const chartGraphicTextColor = computed(() => watchEffect(() => { const html = document.querySelector('html') if (theme.value === 'dark') { + html?.classList.remove('light') html?.classList.add('dark') } else { html?.classList.remove('dark') @@ -25,11 +26,15 @@ watchEffect(() => { function toggle() { theme.value = theme.value === 'light' ? 'dark' : 'light' } +function setTheme(value: 'light' | 'dark') { + theme.value = value +} export function useTheme() { return { theme, toggle, + setTheme, chartGraphicTextColor, } }