fix: 样式调整

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)

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',

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;
+      width: 78px;
-      height: 84px;
+      height: 78px;
     }
   }
 }

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,
   }
 }