refactor: 将MainWorkSpace单/双屏的渲染统一

FreecellRaid · FreecellRaid · commit ffe8a492528b · 2026-04-24T20:10:01.000+08:00
- 删除了MainWorkSpace中原单/双屏的两套模板，通过v-for渲染workspacePanes
- 将ChunkListPanel/SearchPanel中有关pane的替换收到了windowStore的统一入口
diff --git a/src/components/panels/ChunkListPanel.vue b/src/components/panels/ChunkListPanel.vue
@@ -336,18 +336,8 @@ function handleChunkSelect(chunkId: string, event: MouseEvent) {
 
     if (!event.ctrlKey && !event.metaKey && !event.shiftKey) {
         if (windowStore.isInSplitMode()) {
-            const activeViewId = windowStore.currentActiveView.windowId;
-            const splitPanes = windowStore.splitPanes;
-
-            // 判断最后活跃的视图是左侧还是右侧，并在对应的 pane 中打开新的 Chunk
-            if (splitPanes[0]?.windowId === activeViewId) {
-                windowStore.setPaneView(0, 'chunkView', chunkId);
-            } else if (splitPanes[1]?.windowId === activeViewId) {
-                windowStore.setPaneView(1, 'chunkView', chunkId);
-            } else {
-                // 兜底逻辑：如果找不到对应关系，默认在左侧打开
-                windowStore.setPaneView(0, 'chunkView', chunkId);
-            }
+            const activePaneIndex = windowStore.getActivePaneIndex() ?? 0;
+            windowStore.setPaneView(activePaneIndex, 'chunkView', chunkId);
         } else {
             // 单窗口模式，直接使用 setActiveChunk 切换视图
             windowStore.setActiveChunk(chunkId);
diff --git a/src/components/workspace/MainWorkspace.vue b/src/components/workspace/MainWorkspace.vue
@@ -1,65 +1,45 @@
 <template>
     <div class="main-workspace">
         <FileImporter v-if="isWorkspaceEmpty" />
-        <template v-else-if="windowStore.splitMode === 'single'">
-            <component
-                :is="getViewComponent(currentActiveView.windowName)"
-                v-if="currentActiveView"
-                :key="currentActiveView.windowId"
-                v-bind="getComponentProps(currentActiveView)"
-            />
-            <DefaultView v-else />
-        </template>
-
         <template v-else>
             <div
                 class="split-container"
                 :class="{
                     'split-vertical': windowStore.splitDirection === 'vertical',
                 }"
             >
-                <div
-                    class="split-pane"
-                    :style="getPaneStyle(0)"
-                    @pointerdown.capture="handlePaneClick(0)"
-                >
-                    <component
-                        :is="getViewComponent(leftPane.windowName)"
-                        v-if="leftPane"
-                        :key="leftPane.windowId"
-                        v-bind="getComponentProps(leftPane)"
-                    />
-                </div>
-
-                <div
-                    v-if="rightPane"
-                    class="split-resize-handle"
-                    :class="{
-                        'resize-vertical':
-                            windowStore.splitDirection === 'vertical',
-                    }"
-                    @mousedown="startResize"
-                ></div>
-
-                <div
-                    class="split-pane"
-                    :style="getPaneStyle(1)"
-                    @pointerdown.capture="handlePaneClick(1)"
-                >
-                    <component
-                        :is="getViewComponent(rightPane.windowName)"
-                        v-if="rightPane"
-                        :key="rightPane.windowId"
-                        v-bind="getComponentProps(rightPane)"
-                    />
-                </div>
+                <template v-for="pane in workspacePanes" :key="pane.paneIndex">
+                    <div
+                        class="split-pane"
+                        :style="getPaneStyle(pane.paneIndex)"
+                        @pointerdown.capture="handlePaneClick(pane.paneIndex)"
+                    >
+                        <component
+                            :is="getViewComponent(pane.instance?.windowName)"
+                            v-if="pane.instance"
+                            :key="pane.instance.windowId"
+                            v-bind="getComponentProps(pane.instance)"
+                        />
+                        <DefaultView v-else />
+                    </div>
+
+                    <div
+                        v-if="shouldRenderResizeHandle(pane.paneIndex)"
+                        class="split-resize-handle"
+                        :class="{
+                            'resize-vertical':
+                                windowStore.splitDirection === 'vertical',
+                        }"
+                        @mousedown="startResize"
+                    ></div>
+                </template>
             </div>
         </template>
     </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useLogStore } from '@/stores/logStore';
 import { useWindowStore } from '@/stores/windowStore';
 import type { WindowInstance, WindowName } from '@/types/window';
@@ -71,13 +51,7 @@ import DefaultView from './DefaultView.vue';
 const logStore = useLogStore();
 const windowStore = useWindowStore();
 const isWorkspaceEmpty = computed(() => logStore.documents.length === 0);
-const currentActiveView = computed(() => windowStore.currentActiveView);
-
-// 分屏数据映射
-const leftPane = computed(() => windowStore.splitPanes[0]);
-const rightPane = computed(() => windowStore.splitPanes[1]);
-
-const splitSizes = ref<[number, number]>(windowStore.splitSizes);
+const workspacePanes = computed(() => windowStore.workspacePanes);
 
 const viewComponentMap: Partial<Record<WindowName, any>> = {
     chunkView: ChunkView,
@@ -86,7 +60,8 @@ const viewComponentMap: Partial<Record<WindowName, any>> = {
 };
 
 // 根据 WindowName 获取对应的 Vue 组件
-function getViewComponent(name: WindowName) {
+function getViewComponent(name?: WindowName) {
+    if (!name) return DefaultView;
     return viewComponentMap[name] || DefaultView;
 }
 
@@ -99,28 +74,35 @@ function getComponentProps(instance: WindowInstance) {
 
 function getPaneStyle(index: 0 | 1): Record<string, string> {
     const isHorizontal = windowStore.splitDirection === 'horizontal';
-    const size = splitSizes.value[index];
+    const size =
+        workspacePanes.value.length === 1 ? 100 : windowStore.splitSizes[index];
 
     return isHorizontal
         ? { width: `${size}%`, height: '100%' }
         : { width: '100%', height: `${size}%` };
 }
 
 function handlePaneClick(paneIndex: 0 | 1) {
-    const pane = paneIndex === 0 ? leftPane.value : rightPane.value;
-    if (pane) {
-        windowStore.setFocus(pane.windowId);
+    const pane = workspacePanes.value.find(
+        (item) => item.paneIndex === paneIndex,
+    );
+    if (pane?.instance) {
+        windowStore.setFocus(pane.instance.windowId);
     }
 }
 
+function shouldRenderResizeHandle(paneIndex: 0 | 1) {
+    return paneIndex < workspacePanes.value.length - 1;
+}
+
 function startResize(e: MouseEvent) {
     e.preventDefault();
     const isHorizontal = windowStore.splitDirection === 'horizontal';
     const container = (e.target as HTMLElement).parentElement;
     if (!container) return;
 
     const startPos = isHorizontal ? e.clientX : e.clientY;
-    const startSizes = [...splitSizes.value];
+    const startSizes = [...windowStore.splitSizes];
     const containerSize = isHorizontal
         ? container.clientWidth
         : container.clientHeight;
@@ -136,8 +118,6 @@ function startResize(e: MouseEvent) {
             Math.max(20, startSizes[0] + deltaPercent),
         );
         const newRightSize = 100 - newLeftSize;
-
-        splitSizes.value = [newLeftSize, newRightSize];
         windowStore.splitSizes = [newLeftSize, newRightSize];
     }
 
diff --git a/src/composables/useCommandDispatcher.ts b/src/composables/useCommandDispatcher.ts
@@ -336,16 +336,8 @@ export function useCommandDispatcher() {
             windowStore.requestMessageReveal(chunkId, target.messageId);
 
             if (windowStore.isInSplitMode()) {
-                const activeViewId = windowStore.currentActiveView.windowId;
-                const splitPanes = windowStore.splitPanes;
-
-                if (splitPanes[0]?.windowId === activeViewId) {
-                    windowStore.setPaneView(0, 'chunkView', chunkId);
-                } else if (splitPanes[1]?.windowId === activeViewId) {
-                    windowStore.setPaneView(1, 'chunkView', chunkId);
-                } else {
-                    windowStore.setPaneView(0, 'chunkView', chunkId);
-                }
+                const activePaneIndex = windowStore.getActivePaneIndex() ?? 0;
+                windowStore.setPaneView(activePaneIndex, 'chunkView', chunkId);
                 return;
             }
 
diff --git a/src/stores/windowStore.ts b/src/stores/windowStore.ts
@@ -6,6 +6,7 @@ import type {
     WindowInstance,
     SplitMode,
     SplitDirection,
+    WorkspacePane,
 } from '@/types/window';
 import { generateId } from '@/utils/id';
 
@@ -168,9 +169,8 @@ function windowStore() {
         // 如果当前活跃窗口本身就是预览窗口，直接在当前位置切换模板
         if (currentView.windowName === 'exportPreview') {
             if (splitMode.value === 'double') {
-                const activePos = getActivePanePosition();
                 setPaneView(
-                    activePos === 'left' ? 0 : 1,
+                    getActivePaneIndex() ?? 0,
                     'exportPreview',
                     formatId,
                 );
@@ -190,8 +190,8 @@ function windowStore() {
         }
         if (splitMode.value === 'double') {
             // 已在双屏：找到不活跃的那一侧并替换
-            const activePos = getActivePanePosition();
-            const targetPaneIndex = activePos === 'left' ? 1 : 0;
+            const activePaneIndex = getActivePaneIndex() ?? 0;
+            const targetPaneIndex = activePaneIndex === 0 ? 1 : 0;
             setPaneView(targetPaneIndex, 'exportPreview', formatId);
         } else {
             // 单屏模式：直接开启分屏预览
@@ -253,16 +253,35 @@ function windowStore() {
         );
     });
 
+    const workspacePanes = computed((): WorkspacePane[] => {
+        if (splitMode.value === 'double') {
+            return ([0, 1] as const).map((paneIndex) => {
+                const instance = splitPanes.value[paneIndex];
+                return {
+                    paneIndex,
+                    instance,
+                    isActive: instance?.windowId === activeFocus.value,
+                };
+            });
+        }
+
+        const instance = currentActiveView.value;
+        return [
+            {
+                paneIndex: 0,
+                instance,
+                isActive: instance.windowId === activeFocus.value,
+            },
+        ];
+    });
+
     function isInSplitMode(): boolean {
         return splitMode.value === 'double';
     }
 
-    function getActivePanePosition(): 'left' | 'right' | null {
-        if (splitMode.value !== 'double') return null;
-        const activeId = activeFocus.value;
-        if (splitPanes.value[0]?.windowId === activeId) return 'left';
-        if (splitPanes.value[1]?.windowId === activeId) return 'right';
-        return null;
+    function getActivePaneIndex(): 0 | 1 | null {
+        const activePane = workspacePanes.value.find((pane) => pane.isActive);
+        return activePane?.paneIndex ?? null;
     }
 
     // 打开帮助弹窗
@@ -391,10 +410,10 @@ function windowStore() {
         rightSidebarVisible,
         currentActiveWindow,
         currentActiveView,
+        workspacePanes,
         isHelpOpen,
         splitMode,
         splitDirection,
-        splitPanes,
         splitSizes,
         pendingMessageReveal,
 
@@ -416,6 +435,7 @@ function windowStore() {
         setPaneView,
         closePane,
         isInSplitMode,
+        getActivePaneIndex,
         requestMessageReveal,
         clearPendingMessageReveal,
     };
diff --git a/src/types/window.ts b/src/types/window.ts
@@ -26,10 +26,9 @@ export interface WindowInstance {
 
 export type SplitDirection = 'horizontal' | 'vertical';
 export type SplitMode = 'single' | 'double';
-// TODO: 未来会把这里的单/双窗口统一
-export interface SplitState {
-    mode: SplitMode;
-    direction: SplitDirection;
-    panes: [WindowInstance, WindowInstance | null];
-    sizes: [number, number];
+
+export interface WorkspacePane {
+    paneIndex: 0 | 1;
+    instance: WindowInstance | null;
+    isActive: boolean;
 }
