Enhance theme management and improve component logic for better user experience

- Updated theme handling in index.html and ui.ts to support migration from old format, ensuring compatibility with previous user settings.
- Refactored VndbPanel.vue to streamline game ID handling and improve race condition checks during data loading.
- Simplified the onEnter function in ImageViewer.vue to ensure sound effects play correctly during transitions.

index.html

@@ -16,7 +16,14 @@
         var saved = localStorage.getItem('ui-state');
         if (saved) {
           var state = JSON.parse(saved);
-          var themeMode = state.themeMode || 'system';
+          var themeMode = state.themeMode;
+          
+          // 迁移旧版格式：如果没有 themeMode 但有 isDarkMode，转换为新格式
+          if (!themeMode && typeof state.isDarkMode === 'boolean') {
+            themeMode = state.isDarkMode ? 'dark' : 'light';
+          }
+          
+          themeMode = themeMode || 'system';
           
           if (themeMode === 'dark') {
             isDark = true;

src/components/ImageViewer.vue

@@ -68,8 +68,9 @@ const imageStyle = computed(() => {
 })
 
 // 进入动画时播放音效
-function onEnter() {
+function onEnter(_el: Element, done: () => void) {
   playTransitionUp()
+  done()
 }
 
 // 监听图片切换

src/components/VndbPanel.vue

@@ -637,13 +637,16 @@ watch(() => searchStore.vndbInfo, async (newInfo) => {
     quotes: false,
   }
   
+  // 先捕获游戏 ID，用于后续竞态检查
+  const vnIdAtStart = newInfo?.id || null
+  const vnIdForScreenshots = newInfo?.id
+  
   // 更新当前游戏 ID
-  currentVnId.value = newInfo?.id || null
+  currentVnId.value = vnIdAtStart
   
   // 如果有游戏 ID，加载角色和名言，然后自动翻译
-  if (newInfo?.id) {
-    const vnIdAtStart = newInfo.id
-    loadCharactersAndQuotes(newInfo.id).then(() => {
+  if (vnIdAtStart) {
+    loadCharactersAndQuotes(vnIdAtStart).then(() => {
       // 检查是否仍是同一个游戏（防止切换游戏时数据错乱）
       if (currentVnId.value === vnIdAtStart) {
         // 自动触发 AI 翻译（静默模式，不播放音效）
@@ -654,11 +657,9 @@ watch(() => searchStore.vndbInfo, async (newInfo) => {
   
   // 检查缓存的截图是否已加载
   if (newInfo?.screenshots && newInfo.screenshots.length > 0) {
-    const vnIdForScreenshots = newInfo?.id
     nextTick(() => {
       requestAnimationFrame(() => {
-        // 只有当有有效的游戏 ID 时才进行竞态检查
-        // 如果没有 ID，则无法进行有意义的检查，直接处理截图
+        // 竞态检查：如果用户已切换到其他游戏，跳过处理
         if (vnIdForScreenshots && currentVnId.value !== vnIdForScreenshots) {
           return
         }

src/stores/ui.ts

@@ -267,7 +267,21 @@ export const useUIStore = defineStore('ui', () => {
       const saved = localStorage.getItem(STORAGE_KEY)
       if (saved) {
         const parsed: Partial<PersistedUIState> = JSON.parse(saved)
-        themeMode.value = parsed.themeMode ?? DEFAULT_PERSISTED_STATE.themeMode
+        
+        // 迁移旧版格式：如果没有 themeMode 但有 isDarkMode，转换为新格式
+        let savedThemeMode = parsed.themeMode
+        if (!savedThemeMode && typeof parsed.isDarkMode === 'boolean') {
+          savedThemeMode = parsed.isDarkMode ? 'dark' : 'light'
+          // 立即保存迁移后的格式，避免下次再迁移
+          try {
+            const migrated = { ...parsed, themeMode: savedThemeMode }
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(migrated))
+          } catch {
+            // 保存失败，忽略
+          }
+        }
+        
+        themeMode.value = savedThemeMode ?? DEFAULT_PERSISTED_STATE.themeMode
         customCSS.value = parsed.customCSS ?? DEFAULT_PERSISTED_STATE.customCSS
         showSearchHistory.value = parsed.showSearchHistory ?? DEFAULT_PERSISTED_STATE.showSearchHistory
       }