feat: 使首页的教程placehold支持中文，同时使markdown编辑器同app主题变化

src/stores/theme.ts

@@ -1,67 +1,73 @@
-import { ref, computed, watch } from 'vue'
-import { defineStore } from 'pinia'
+import { ref, computed, watch } from "vue";
+import { defineStore } from "pinia";
 
 // 本地存储主题的键名
-const THEME_STORAGE_KEY = 'fpga-weblab-theme'
+const THEME_STORAGE_KEY = "fpga-weblab-theme";
 
-export const useThemeStore = defineStore('theme', () => {
-  const allTheme = ["winter", "night"]
+export const useThemeStore = defineStore("theme", () => {
+  const allTheme = ["winter", "night"];
   const darkTheme = "night";
   const lightTheme = "winter";
-  
+
   // 尝试从本地存储中获取保存的主题
   const getSavedTheme = (): string | null => {
-    return localStorage.getItem(THEME_STORAGE_KEY)
-  }
-  
+    return localStorage.getItem(THEME_STORAGE_KEY);
+  };
+
   // 检测系统主题偏好
   const getPreferredTheme = (): string => {
-    const savedTheme = getSavedTheme()
+    const savedTheme = getSavedTheme();
     // 如果有保存的主题设置，优先使用
     if (savedTheme && allTheme.includes(savedTheme)) {
-      return savedTheme
+      return savedTheme;
     }
     // 否则检测系统主题模式
-    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches 
-      ? darkTheme : lightTheme
-  }
-  
+    return window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? darkTheme
+      : lightTheme;
+  };
+
   // 初始化主题为首选主题
-  const currentTheme = ref(getPreferredTheme())
+  const currentTheme = ref(getPreferredTheme());
+  const currentMode = computed(() =>
+    currentTheme.value === darkTheme ? "dark" : "light",
+  );
 
   // 保存主题到本地存储
   const saveTheme = (theme: string) => {
-    localStorage.setItem(THEME_STORAGE_KEY, theme)
-  }
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+  };
 
   // 当主题变化时，保存到本地存储
   watch(currentTheme, (newTheme) => {
-    saveTheme(newTheme)
-  })
+    saveTheme(newTheme);
+  });
 
   // 添加系统主题变化的监听
   const setupThemeListener = () => {
     if (window.matchMedia) {
-      const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)')
+      const colorSchemeQuery = window.matchMedia(
+        "(prefers-color-scheme: dark)",
+      );
       const handler = (e: MediaQueryListEvent) => {
         // 只有当用户没有手动设置过主题时，才跟随系统变化
         if (!getSavedTheme()) {
-          currentTheme.value = e.matches ? darkTheme : lightTheme
+          currentTheme.value = e.matches ? darkTheme : lightTheme;
         }
-      }
-      
+      };
+
       // 添加主题变化监听器
-      colorSchemeQuery.addEventListener('change', handler)
+      colorSchemeQuery.addEventListener("change", handler);
     }
-  }
+  };
   function setTheme(theme: string) {
-    const isContained: boolean = allTheme.includes(theme)
+    const isContained: boolean = allTheme.includes(theme);
     if (isContained) {
-      currentTheme.value = theme
-      saveTheme(theme) // 保存主题到本地存储
-    }
-    else {
-      console.error(`Not have such theme: ${theme}`)
+      currentTheme.value = theme;
+      saveTheme(theme); // 保存主题到本地存储
+    } else {
+      console.error(`Not have such theme: ${theme}`);
     }
   }
 
@@ -77,26 +83,26 @@ export const useThemeStore = defineStore('theme', () => {
   }
 
   function isDarkTheme(): boolean {
-    return currentTheme.value == darkTheme
+    return currentTheme.value == darkTheme;
   }
 
   function isLightTheme(): boolean {
-    return currentTheme.value == lightTheme
+    return currentTheme.value == lightTheme;
   }
 
   // 初始化时设置系统主题变化监听器
-  if (typeof window !== 'undefined') {
-    setupThemeListener()
+  if (typeof window !== "undefined") {
+    setupThemeListener();
   }
 
   return {
     allTheme,
     currentTheme,
+    currentMode,
     setTheme,
     toggleTheme,
     isDarkTheme,
     isLightTheme,
-    setupThemeListener
-  }
-})
-
+    setupThemeListener,
+  };
+});