🐞 fix(conf): inline css 问题

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ustb-wifi-tools",
   "private": true,
-  "version": "0.8.5",
+  "version": "0.8.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ustb-wifi-tools"
-version = "0.8.5"
+version = "0.8.6"
 description = "A Tauri App that can be used to get information of the USTB Wifi"
 authors = ["CakeAL"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "productName": "ustb-wifi-tools",
   "mainBinaryName": "ustb-wifi-tools",
-  "version": "0.8.5",
+  "version": "0.8.6",
   "identifier": "ustb.wifi.tools",
   "build": {
     "beforeDevCommand": "pnpm dev",
@@ -23,7 +23,7 @@
       }
     ],
     "security": {
-      "csp": "default-src 'self' ipc: http://ipc.localhost; img-src 'self' asset: http://asset.localhost",
+      "csp": "default-src 'self' ipc: http://ipc.localhost; img-src 'self' asset: http://asset.localhost; style-src 'self' 'unsafe-inline';",
       "assetProtocol": {
         "enable": true,
         "scope": ["*/**"]

src/App.vue

@@ -47,21 +47,21 @@ const currentView = computed((): RouteComponent => {
 const theme = ref<any | undefined>(undefined);
 const themeMedia = window.matchMedia("(prefers-color-scheme: dark)");
 const os_type = ref<number>(0);
+theme.value = themeMedia.matches ? darkTheme : undefined;
 
 onMounted(() => {
   get_os_type()
     .then(() => {
-      applyTheme(themeMedia.matches);
+      applyBackgroundColor(themeMedia.matches);
     })
     .then(apply_background);
-
   themeMedia.addEventListener("change", (event) => {
-    applyTheme(event.matches);
+    theme.value = event.matches ? darkTheme : undefined;
+    applyBackgroundColor(event.matches);
   });
 });
 
-const applyTheme = (isDark: boolean) => {
-  theme.value = isDark ? darkTheme : undefined;
+const applyBackgroundColor = (isDark: boolean) => {
   if (os_type.value % 2 === 0) {
     document.body.style.backgroundColor = isDark ? "#1f1f1f" : "#e6e6e6";
   }
@@ -80,9 +80,9 @@ const apply_background = async () => {
     let settings = JSON.parse(res);
     // 如果存在 background 路径的情况下
     if (settings.background_image_path !== null) {
-      let html = document.querySelector('body');
+      let html = document.querySelector("body");
       if (html) {
-        let style = document.createElement('style');
+        let style = document.createElement("style");
         style.innerHTML = `
           body { 
             background-color: rgba(0, 0, 0, 0); 
@@ -94,14 +94,16 @@ const apply_background = async () => {
             left: 0; 
             right: 0; 
             bottom: 0; 
-            background-image: url("${convertFileSrc(settings.background_image_path)}"); 
+            background-image: url("${convertFileSrc(
+              settings.background_image_path
+            )}"); 
             background-size: cover; 
             background-position: center; 
             filter: blur(${settings.background_blur}px);
             opacity: ${settings.background_transparence / 100}; 
             z-index: -1; 
           }
-        `
+        `;
         document.head.appendChild(style);
       }
     }

src/pages/About.vue

@@ -66,7 +66,7 @@ const show1 = ref(false);
         <p>4. 通过 pt 站下载大型软件（比如 Photoshop 等）</p>
         <p>5. 自建/使用 ipv6 代理服务器</p>
         <br/>
-        <p>当前 version = "0.8.5"</p>
+        <p>当前 version = "0.8.6"</p>
     </n-space>
     </n-card>
   </div>