refactor: tailwindcss样式优化

Former-commit-id: 3ab444012a3b3f81929830d5c73df8c68437cb87

src/store/modules/app.ts

@@ -8,6 +8,7 @@ import {
 import { defineStore } from 'pinia';
 import { getLanguage } from '@/lang/index';
 import { computed, reactive, ref } from 'vue';
+import { useStorage } from '@vueuse/core';
 
 // Element Plus 语言包
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
@@ -27,7 +28,7 @@ export enum SizeType {
 // setup
 export const useAppStore = defineStore('app', () => {
   // state
-  const device = ref<DeviceType>(DeviceType.desktop);
+  const device = useStorage<string>('device', 'desktop');
   const size = ref(getSize() || 'default');
   const language = ref(getLanguage());
   const sidebar = reactive({
@@ -66,7 +67,7 @@ export const useAppStore = defineStore('app', () => {
     setSidebarStatus('opened');
   }
 
-  function toggleDevice(val: DeviceType) {
+  function toggleDevice(val: string) {
     device.value = val;
   }
 

src/store/modules/settings.ts

@@ -1,26 +1,38 @@
 import { defineStore } from 'pinia';
 import defaultSettings from '../../settings';
 import { ref } from 'vue';
-import { useCssVar, useStorage } from '@vueuse/core';
+import { useStorage } from '@vueuse/core';
 
-const el = document.documentElement;
+/**
+ * 主题类型
+ */
+export enum ThemeType {
+  light,
+  dark
+}
+
+/**
+ * 布局类型
+ */
+export enum LayoutType {
+  left,
+  top,
+  mix
+}
 
 export const useSettingsStore = defineStore('setting', () => {
   // state
-  const theme = useStorage('theme', useCssVar('--el-color-primary', el))
-
   const showSettings = ref<boolean>(defaultSettings.showSettings);
-  const tagsView = useStorage<boolean>('tagsView', defaultSettings.tagsView)
+  const tagsView = useStorage<boolean>('tagsView', defaultSettings.tagsView);
   const fixedHeader = ref<boolean>(defaultSettings.fixedHeader);
   const sidebarLogo = ref<boolean>(defaultSettings.sidebarLogo);
 
+  const layout = useStorage<string>('layout', defaultSettings.layout);
+
   // actions
   function changeSetting(param: { key: string; value: any }) {
     const { key, value } = param;
     switch (key) {
-      case 'theme':
-        theme.value = value;
-        break;
       case 'showSettings':
         showSettings.value = value;
         break;
@@ -33,17 +45,20 @@ export const useSettingsStore = defineStore('setting', () => {
       case 'sidevarLogo':
         sidebarLogo.value = value;
         break;
+      case 'layout':
+        layout.value = value;
+        break;
       default:
         break;
     }
   }
 
   return {
-    theme,
     showSettings,
     tagsView,
     fixedHeader,
     sidebarLogo,
+    layout,
     changeSetting
   };
 });