From ee97fd3ad74156b2a5f0aefcc8da90bd1a81b651 Mon Sep 17 00:00:00 2001 From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com> Date: Mon, 21 Apr 2025 01:09:31 +0800 Subject: [PATCH] update --- .../src/components/LayoutRenderer.vue | 55 ++++++++++--------- .../frontend/src/stores/fileEditor.store.ts | 10 +++- 2 files changed, 37 insertions(+), 28 deletions(-) diff --git a/packages/frontend/src/components/LayoutRenderer.vue b/packages/frontend/src/components/LayoutRenderer.vue index 08650db..af9403f 100644 --- a/packages/frontend/src/components/LayoutRenderer.vue +++ b/packages/frontend/src/components/LayoutRenderer.vue @@ -6,6 +6,7 @@ import '@fortawesome/fontawesome-free/css/all.min.css'; import { Splitpanes, Pane } from 'splitpanes'; import { useLayoutStore, type LayoutNode, type PaneName } from '../stores/layout.store'; import { useSessionStore } from '../stores/session.store'; +import { useFileEditorStore } from '../stores/fileEditor.store'; // <-- Import FileEditorStore import { storeToRefs } from 'pinia'; import { defineEmits } from 'vue'; @@ -65,9 +66,11 @@ const emit = defineEmits({ // --- Setup --- const layoutStore = useLayoutStore(); const sessionStore = useSessionStore(); +const fileEditorStore = useFileEditorStore(); // <-- Initialize FileEditorStore const { t } = useI18n(); // <-- Get translation function const { activeSession } = storeToRefs(sessionStore); const { sidebarPanes } = storeToRefs(layoutStore); +const { orderedTabs: editorTabsFromStore, activeTabId: activeEditorTabIdFromStore } = storeToRefs(fileEditorStore); // <-- Get editor state // --- Sidebar State --- const activeLeftSidebarPane = ref(null); @@ -227,28 +230,8 @@ const componentProps = computed(() => { } }); -// 为侧栏组件计算 Props (可能需要简化或根据组件调整) -const sidebarComponentProps = computed(() => (paneName: PaneName | null) => { - if (!paneName) return {}; - // 侧栏组件通常不需要像主布局那样复杂的事件转发和 session 依赖 - // 这里可以返回一个通用的 props 对象,或者根据 paneName 返回特定 props - // 示例:只传递 class - return { class: 'sidebar-pane-content' }; - // 如果侧栏组件也需要 session 信息或事件: - /* - switch (paneName) { - case 'connections': - return { - class: 'sidebar-pane-content', - onConnectRequest: (id: number) => emit('connect-request', id), - // ... 其他 connections 需要的 props - }; - // ... 其他 case - default: - return { class: 'sidebar-pane-content' }; - } - */ -}); +// --- REMOVED sidebarComponentProps computed property --- +// Props for sidebar components will be determined directly in the template // --- Methods --- @@ -493,8 +476,18 @@ const getIconClasses = (paneName: PaneName): string[] => { v-if="currentLeftSidebarComponent" :is="currentLeftSidebarComponent" :key="`left-panel-${activeLeftSidebarPane}`" - v-bind="sidebarComponentProps(activeLeftSidebarPane)" - /> + class="sidebar-pane-content" + v-bind="activeLeftSidebarPane === 'editor' ? { + tabs: editorTabsFromStore, + activeTabId: activeEditorTabIdFromStore, + sessionId: activeSessionId, // Pass session ID if needed by editor in sidebar + onCloseTab: (tabId: string) => emit('closeEditorTab', tabId), + onActivateTab: (tabId: string) => emit('activateEditorTab', tabId), + 'onUpdate:content': (payload: { tabId: string; content: string }) => emit('updateEditorContent', payload), + onRequestSave: (tabId: string) => emit('saveEditorTab', tabId) + } : {}" + /> + @@ -504,8 +497,18 @@ const getIconClasses = (paneName: PaneName): string[] => { v-if="currentRightSidebarComponent" :is="currentRightSidebarComponent" :key="`right-panel-${activeRightSidebarPane}`" - v-bind="sidebarComponentProps(activeRightSidebarPane)" - /> + class="sidebar-pane-content" + v-bind="activeRightSidebarPane === 'editor' ? { + tabs: editorTabsFromStore, + activeTabId: activeEditorTabIdFromStore, + sessionId: activeSessionId, // Pass session ID if needed by editor in sidebar + onCloseTab: (tabId: string) => emit('closeEditorTab', tabId), + onActivateTab: (tabId: string) => emit('activateEditorTab', tabId), + 'onUpdate:content': (payload: { tabId: string; content: string }) => emit('updateEditorContent', payload), + onRequestSave: (tabId: string) => emit('saveEditorTab', tabId) + } : {}" + /> + diff --git a/packages/frontend/src/stores/fileEditor.store.ts b/packages/frontend/src/stores/fileEditor.store.ts index 9df3ac4..307330a 100644 --- a/packages/frontend/src/stores/fileEditor.store.ts +++ b/packages/frontend/src/stores/fileEditor.store.ts @@ -1,4 +1,4 @@ -import { ref, computed, readonly, watch } from 'vue'; +import { ref, computed, readonly, watch, nextTick } from 'vue'; // Import nextTick import { defineStore } from 'pinia'; import { useI18n } from 'vue-i18n'; import { useSessionStore } from './session.store'; // 导入会话 Store @@ -157,7 +157,13 @@ export const useFileEditorStore = defineStore('fileEditor', () => { // sessionId: sessionId, // 记录来源会话 }; tabs.value.set(tabId, newTab); - setActiveTab(tabId); // 激活新标签页 + // setActiveTab(tabId); // 移除同步激活 + + // 使用 nextTick 延迟激活,给 DOM 更新留出时间 + nextTick(() => { + setActiveTab(tabId); + }); + // 不再在这里触发弹窗 // popupTrigger.value++;