fix: 修复了导出预览固定显示activeFormat的问题

Author: FreecellRaid

src/components/panels/ExportFormatPanel.vue

@@ -71,8 +71,7 @@
                                 class="icon-button"
                                 :class="{
                                     'is-active':
-                                        windowStore.activeFocus ===
-                                        fmt.formatId,
+                                        previewedFormatIds.has(fmt.formatId),
                                 }"
                                 @click.stop="handleTogglePreview(fmt.formatId)"
                                 title="预览模板效果"
@@ -152,17 +151,28 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { Plus, ChevronRight, Trash2, Check, Eye } from '@lucide/vue';
-import { useExportStore } from '@/stores/exportStore';
+import { EXPORT_PRESET_IDS, useExportStore } from '@/stores/exportStore';
 import { useWindowStore } from '@/stores/windowStore';
 
 const exportStore = useExportStore();
 const windowStore = useWindowStore();
 const expandedId = ref<string | null>(exportStore.activeFormatId);
+const previewedFormatIds = computed(() => {
+    const ids = new Set<string>();
+
+    for (const win of windowStore.openWindows.values()) {
+        if (win.windowName === 'exportPreview') {
+            ids.add(win.originalId);
+        }
+    }
+
+    return ids;
+});
 
 function handleTogglePreview(formatId: string) {
-    exportStore.activeFormatId = formatId;
+    exportStore.setActive(formatId);
     windowStore.openExportPreview(formatId);
 }
 
@@ -171,7 +181,7 @@ function toggleExpand(id: string) {
 }
 
 function isPreset(id: string) {
-    return ['standard', 'magic'].includes(id);
+    return EXPORT_PRESET_IDS.includes(id as (typeof EXPORT_PRESET_IDS)[number]);
 }
 
 function handleCreateFormat() {

src/components/workspace/ExportPreview.vue

@@ -180,27 +180,15 @@ const styleStore = useStyleStore();
 const exportStore = useExportStore();
 const uiStore = useUiStore();
 const windowStore = useWindowStore();
-const activeFormat = computed(() => exportStore.activeFormat);
 const props = defineProps<{
     windowId: string;
     originalId: string;
 }>();
 const effectiveWindowId = computed(() => props.windowId);
 const isActive = computed(() => windowStore.activeFocus === props.windowId);
-
-// view的生命周期统一交给windowStore处理，不在组件层调用
-// onMounted(() => {
-//     windowStore.registerWindow({
-//         windowId: effectiveWindowId.value,
-//         windowName: 'exportPreview',
-//         windowType: 'view',
-//         originalId: props.originalId,
-//     });
-// });
-
-// onUnmounted(() => {
-//     windowStore.unregisterWindow(effectiveWindowId.value);
-// });
+const activeFormat = computed(
+    () => exportStore.formatById(props.originalId) || exportStore.activeFormat,
+);
 
 const canClose = computed(() => {
     return (

src/stores/exportStore.ts

@@ -2,7 +2,16 @@ import { defineStore } from 'pinia';
 import type { ExportFormat } from '@/types/export';
 import { generateId } from '@/utils/id';
 
-const PRESETS: ExportFormat[] = [
+export const EXPORT_PRESET_IDS = [
+    'magic',
+    'standard',
+    'markdown',
+    'classicTrpgLog',
+    'hangingIndent',
+    'echoWorkshop',
+] as const;
+
+export const PRESETS: ExportFormat[] = [
     {
         formatId: 'magic',
         formatName: '神人格式',
@@ -96,6 +105,10 @@ export const useExportStore = defineStore('export', {
                 ) || state.formats[0]
             );
         },
+        formatById(state) {
+            return (id: string): ExportFormat | undefined =>
+                state.formats.find((f: ExportFormat) => f.formatId === id);
+        },
     },
     actions: {
         createFormat() {
@@ -132,7 +145,8 @@ export const useExportStore = defineStore('export', {
             this.saveToLocal();
         },
         deleteFormat(id: string) {
-            if (id === 'standard' || id === 'magic') return;
+            if (EXPORT_PRESET_IDS.includes(id as (typeof EXPORT_PRESET_IDS)[number]))
+                return;
             this.formats = this.formats.filter(
                 (f: ExportFormat) => f.formatId !== id,
             );