引入tailwind css，调整样式

web/src/App.vue

@@ -1,29 +1,29 @@
 <template>
   <el-config-provider>
-    <router-view/>
+    <router-view />
   </el-config-provider>
 </template>
 
 <script setup>
-import {ElConfigProvider} from 'element-plus';
-import {onMounted, ref, watch} from "vue";
-import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
-import {isChrome, isMobile} from "@/utils/libs";
-import {showMessageInfo} from "@/utils/dialog";
-import {useSharedStore} from "@/store/sharedata";
-import {getUserToken} from "@/store/session";
+import { ElConfigProvider } from "element-plus";
+import { onMounted, ref, watch } from "vue";
+import { checkSession, getClientId, getSystemInfo } from "@/store/cache";
+import { isChrome, isMobile } from "@/utils/libs";
+import { showMessageInfo } from "@/utils/dialog";
+import { useSharedStore } from "@/store/sharedata";
+import { getUserToken } from "@/store/session";
 
 const debounce = (fn, delay) => {
-  let timer
+  let timer;
   return (...args) => {
     if (timer) {
-      clearTimeout(timer)
+      clearTimeout(timer);
     }
     timer = setTimeout(() => {
-      fn(...args)
-    }, delay)
-  }
-}
+      fn(...args);
+    }, delay);
+  };
+};
 
 const _ResizeObserver = window.ResizeObserver;
 window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
@@ -31,63 +31,69 @@ window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
     callback = debounce(callback, 200);
     super(callback);
   }
-}
+};
 
-const store = useSharedStore()
+const store = useSharedStore();
 onMounted(() => {
   // 获取系统参数
   getSystemInfo().then((res) => {
-    const link = document.createElement('link')
-    link.rel = 'shortcut icon'
-    link.href = res.data.logo
-    document.head.appendChild(link)
-  })
+    const link = document.createElement("link");
+    link.rel = "shortcut icon";
+    link.href = res.data.logo;
+    document.head.appendChild(link);
+  });
   if (!isChrome() && !isMobile()) {
-    showMessageInfo("建议使用 Chrome 浏览器以获得最佳体验。")
+    showMessageInfo("建议使用 Chrome 浏览器以获得最佳体验。");
   }
 
-  checkSession().then(() => {
-    store.setIsLogin(true)
-  }).catch(()=>{})
-})
+  checkSession()
+    .then(() => {
+      store.setIsLogin(true);
+    })
+    .catch(() => {});
 
-watch(() => store.isLogin, (val) => {
-  if (val) {
-    connect()
-  }
-})
+  // 设置主题
+  document.documentElement.setAttribute("data-theme", store.theme);
+});
 
-const handler = ref(0)
-// 初始化 websocket 连接
-const connect = () => {
-  let host = process.env.VUE_APP_WS_HOST
-  if (host === '') {
-    if (location.protocol === 'https:') {
-      host = 'wss://' + location.host;
-    } else {
-      host = 'ws://' + location.host;
+watch(
+  () => store.isLogin,
+  (val) => {
+    if (val) {
+      connect();
     }
   }
-  const clientId = getClientId()
-  const _socket = new WebSocket(host + `/api/ws?client_id=${clientId}`,["token",getUserToken()]);
-  _socket.addEventListener('open', () => {
-    console.log('WebSocket 已连接')
+);
+
+const handler = ref(0);
+// 初始化 websocket 连接
+const connect = () => {
+  let host = process.env.VUE_APP_WS_HOST;
+  if (host === "") {
+    if (location.protocol === "https:") {
+      host = "wss://" + location.host;
+    } else {
+      host = "ws://" + location.host;
+    }
+  }
+  const clientId = getClientId();
+  const _socket = new WebSocket(host + `/api/ws?client_id=${clientId}`, ["token", getUserToken()]);
+  _socket.addEventListener("open", () => {
+    console.log("WebSocket 已连接");
     handler.value = setInterval(() => {
       if (_socket.readyState === WebSocket.OPEN) {
-        _socket.send(JSON.stringify({"type":"ping"}))
+        _socket.send(JSON.stringify({ type: "ping" }));
       }
-    },5000)
-  })
-  _socket.addEventListener('close', () => {
-    clearInterval(handler.value)
-    connect()
+    }, 5000);
   });
-  store.setSocket(_socket)
-}
-
+  _socket.addEventListener("close", () => {
+    clearInterval(handler.value);
+    connect();
+  });
+  store.setSocket(_socket);
+};
 </script>
 
-
 <style lang="stylus">
 html, body {
   margin: 0;
@@ -137,4 +143,5 @@ html, body {
   color #07C160
 }
 
+@import '@/assets/iconfont/iconfont.css'
 </style>