增强性能

Author: Sunwuyuan

index.html

@@ -71,6 +71,9 @@
           background:#ffffff;
           z-index:99999;
         }
+        #app-shell.dark {
+          background:#121212;
+        }
         #app-shell .shell-logo {
           width:72px;height:72px;
           border-radius:16px;
@@ -82,22 +85,30 @@
           border-radius:2px;
           overflow:hidden;
         }
+        #app-shell.dark .shell-bar-track {
+          background:#333333;
+        }
         #app-shell .shell-bar-fill {
           width:40%;height:100%;
           background:#1976d2;
           border-radius:2px;
           animation:shell-slide 1.2s ease-in-out infinite;
         }
+        #app-shell.dark .shell-bar-fill {
+          background:#64b5f6;
+        }
         @keyframes shell-slide {
           0%{transform:translateX(-100%)}
           100%{transform:translateX(350%)}
         }
-        @media (prefers-color-scheme:dark) {
-          #app-shell{background:#121212}
-          #app-shell .shell-bar-track{background:#333333}
-          #app-shell .shell-bar-fill{background:#64b5f6}
-        }
       </style>
+      <script>
+        (function(){
+          var t = localStorage.getItem('theme');
+          var dark = t === 'dark' || (!t && window.matchMedia('(prefers-color-scheme:dark)').matches);
+          if (dark) document.getElementById('app-shell').classList.add('dark');
+        })();
+      </script>
       <img class="shell-logo" src="/favicon.png" alt="ZeroCat" />
       <div class="shell-bar-track"><div class="shell-bar-fill"></div></div>
     </div>

src/components/AppHeader.vue

@@ -367,9 +367,13 @@ export default {
 
     this.updateSubNavItems(this.$route);
 
-    // Initialize theme
+    // Initialize theme — 无存储时跟随系统
     this.theme = useTheme();
-    this.isDarkTheme = savedTheme === "dark";
+    if (savedTheme) {
+      this.isDarkTheme = savedTheme === "dark";
+    } else {
+      this.isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    }
     this.applyTheme();
   },
   watch: {

src/layouts/DefaultLayout.vue

@@ -27,38 +27,18 @@
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from "vue";
-import { useTheme } from "vuetify";
+import { ref } from "vue";
 import AppHeader from "@/components/AppHeader.vue";
 import UnifiedSidebar from "@/components/sidebar/UnifiedSidebar.vue";
 import Toast from "primevue/toast";
 import error404 from "@/components/error/404.vue";
 import { use404 } from "@/composables/use404";
 
-const theme = useTheme();
-
 // 抽屉状态 - 默认关闭，不缓存
 const drawer = ref(false);
 
-// 主题管理
-const initTheme = () => {
-  const savedTheme = localStorage.getItem("theme");
-  if (savedTheme) {
-    theme.global.name.value = savedTheme;
-  } else {
-    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-    theme.global.name.value = prefersDark ? "dark" : "light";
-    localStorage.setItem("theme", theme.global.name.value);
-  }
-};
-
-watch(() => theme.global.name.value, (newTheme) => {
-  localStorage.setItem("theme", newTheme);
-});
-
-onMounted(() => {
-  initTheme();
-});
+// 主题管理 — 初始化由 vuetify.js 的 getInitialTheme 完成，此处无需重复
+// watch 仅用于响应用户手动切换（来自 AppHeader/Sidebar 的 toggleTheme）
 </script>
 
 <style>

src/layouts/SimpleLayout.vue

@@ -13,18 +13,7 @@
 
 <script setup>
 import Toast from "primevue/toast";
-import {onMounted} from 'vue';
-import {useTheme} from 'vuetify';
-
-const theme = useTheme();
-
-// 从本地存储中获取主题设置
-onMounted(() => {
-  const savedTheme = localStorage.getItem('theme');
-  if (savedTheme) {
-    theme.global.name.value = savedTheme;
-  }
-});
+// 主题初始化由 vuetify.js 的 getInitialTheme 完成，无需在布局中重复
 </script>
 
 <style>

src/plugins/vuetify.js

@@ -51,9 +51,19 @@ const vscodeTheme = {
   }
 }
 
+// 根据本地存储或系统偏好决定初始主题
+function getInitialTheme() {
+  const saved = localStorage.getItem('theme');
+  if (saved === 'dark' || saved === 'vscodeTheme') return 'dark';
+  if (saved === 'light') return 'light';
+  // 无存储时跟随系统
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) return 'dark';
+  return 'light';
+}
+
 export default createVuetify({
   theme: {
-    defaultTheme: 'vscodeTheme',
+    defaultTheme: getInitialTheme(),
     themes: {
       vscodeTheme,
     },

src/styles/settings.scss

@@ -9,6 +9,16 @@
 //   $color-pack: false
 // );
 
+// 覆盖 @mdi/font 的 @font-face，添加 font-display: swap 确保文本始终可见
+@font-face {
+  font-family: "Material Design Icons";
+  src: url("@mdi/font/fonts/materialdesignicons-webfont.woff2?v=7.4.47") format("woff2"),
+       url("@mdi/font/fonts/materialdesignicons-webfont.woff?v=7.4.47") format("woff");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 // Material Design 3 页面过渡动画
 .md3-enter-active,
 .md3-leave-active {