From 1a6ea421e667161c363b9518f0ea032032db3b1d Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Tue, 15 Apr 2025 23:16:00 +0800
Subject: [PATCH] update

---
 .../src/services/status-monitor.service.ts    |  16 +-
 .../frontend/src/components/FileManager.vue   | 716 +++++++++---------
 .../frontend/src/components/StatusMonitor.vue |  51 +-
 packages/frontend/src/components/Terminal.vue |   1 +
 .../src/components/TerminalTabBar.vue         | 146 ++++
 .../components/WorkspaceConnectionList.vue    |  17 +-
 .../src/composables/useFileUploader.ts        |  18 +-
 .../src/composables/useSftpActions.ts         | 275 +++----
 .../src/composables/useSshTerminal.ts         | 171 ++++-
 .../src/composables/useStatusMonitor.ts       | 123 ++-
 .../src/composables/useWebSocketConnection.ts | 220 +++---
 packages/frontend/src/locales/en.json         |   6 +-
 packages/frontend/src/locales/zh.json         |  11 +-
 packages/frontend/src/stores/session.store.ts | 252 ++++++
 .../frontend/src/types/websocket.types.ts     |   2 +-
 packages/frontend/src/views/WorkspaceView.vue | 325 ++++----
 16 files changed, 1435 insertions(+), 915 deletions(-)
 create mode 100644 packages/frontend/src/components/TerminalTabBar.vue
 create mode 100644 packages/frontend/src/stores/session.store.ts

diff --git a/packages/backend/src/services/status-monitor.service.ts b/packages/backend/src/services/status-monitor.service.ts
index eb3f487..26e863c 100644
--- a/packages/backend/src/services/status-monitor.service.ts
+++ b/packages/backend/src/services/status-monitor.service.ts
@@ -50,14 +50,14 @@ export class StatusMonitorService {
     startStatusPolling(sessionId: string, interval: number = DEFAULT_POLLING_INTERVAL): void {
         const state = this.clientStates.get(sessionId);
         if (!state || !state.sshClient) {
-            console.warn(`[StatusMonitor] 无法为会话 ${sessionId} 启动状态轮询：状态无效或 SSH 客户端不存在。`);
+            //console.warn(`[StatusMonitor] 无法为会话 ${sessionId} 启动状态轮询：状态无效或 SSH 客户端不存在。`);
             return;
         }
         if (state.statusIntervalId) {
-            console.warn(`[StatusMonitor] 会话 ${sessionId} 的状态轮询已在运行中。`);
+            //console.warn(`[StatusMonitor] 会话 ${sessionId} 的状态轮询已在运行中。`);
             return;
         }
-        console.log(`[StatusMonitor] 为会话 ${sessionId} 启动状态轮询，间隔 ${interval}ms`);
+        //console.warn(`[StatusMonitor] 为会话 ${sessionId} 启动状态轮询，间隔 ${interval}ms`);
         this.fetchAndSendServerStatus(sessionId); // 立即执行一次
         state.statusIntervalId = setInterval(() => {
             this.fetchAndSendServerStatus(sessionId);
@@ -71,7 +71,7 @@ export class StatusMonitorService {
     stopStatusPolling(sessionId: string): void {
         const state = this.clientStates.get(sessionId);
         if (state?.statusIntervalId) {
-            console.log(`[StatusMonitor] 停止会话 ${sessionId} 的状态轮询。`);
+            //console.warn(`[StatusMonitor] 停止会话 ${sessionId} 的状态轮询。`);
             clearInterval(state.statusIntervalId);
             state.statusIntervalId = undefined;
             previousNetStats.delete(sessionId); // 清理网络统计缓存
@@ -85,7 +85,7 @@ export class StatusMonitorService {
     private async fetchAndSendServerStatus(sessionId: string): Promise<void> {
         const state = this.clientStates.get(sessionId);
         if (!state || !state.sshClient || state.ws.readyState !== WebSocket.OPEN) {
-            console.warn(`[StatusMonitor] 无法获取会话 ${sessionId} 的状态，停止轮询。原因：状态无效、SSH断开或WS关闭。`);
+            //console.warn(`[StatusMonitor] 无法获取会话 ${sessionId} 的状态，停止轮询。原因：状态无效、SSH断开或WS关闭。`);
             this.stopStatusPolling(sessionId);
             return;
         }
@@ -94,7 +94,7 @@ export class StatusMonitorService {
             const status = await this.fetchServerStatus(state.sshClient, sessionId);
             state.ws.send(JSON.stringify({ type: 'status_update', payload: { connectionId: state.dbConnectionId, status } }));
         } catch (error: any) {
-            console.error(`[StatusMonitor] 获取会话 ${sessionId} 服务器状态失败:`, error);
+            //console.warn(`[StatusMonitor] 获取会话 ${sessionId} 服务器状态失败:`, error);
             state.ws.send(JSON.stringify({ type: 'status_error', payload: { connectionId: state.dbConnectionId, message: `获取状态失败: ${error.message}` } }));
         }
     }
@@ -308,13 +308,13 @@ export class StatusMonitorService {
                 stream.on('close', (code: number, signal?: string) => {
                     // Don't reject on non-zero exit code, as some commands might return non-zero normally
                     // if (code !== 0) {
-                    //     console.warn(`[StatusMonitor] Command '${command}' exited with code ${code}`);
+                    //     //console.warn(`[StatusMonitor] Command '${command}' exited with code ${code}`);
                     // }
                     resolve(output.trim());
                 }).on('data', (data: Buffer) => {
                     output += data.toString('utf8');
                 }).stderr.on('data', (data: Buffer) => {
-                    console.warn(`[StatusMonitor] Command '${command}' stderr: ${data.toString('utf8').trim()}`);
+                    //console.warn(`[StatusMonitor] Command '${command}' stderr: ${data.toString('utf8').trim()}`);
                 });
             });
         });
diff --git a/packages/frontend/src/components/FileManager.vue b/packages/frontend/src/components/FileManager.vue
index 6426c1d..13b832d 100644
--- a/packages/frontend/src/components/FileManager.vue
+++ b/packages/frontend/src/components/FileManager.vue
@@ -1,62 +1,85 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch, watchEffect } from 'vue'; // Import watchEffect
+import { ref, computed, onMounted, onBeforeUnmount, nextTick, watchEffect, type PropType, readonly } from 'vue'; // 恢复导入
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-// 移除 MonacoEditor 直接导入，因为它现在在 FileEditorOverlay 中
-// import MonacoEditor from './MonacoEditor.vue';
-import { useSftpActions } from '../composables/useSftpActions';
+import { useRoute } from 'vue-router'; // 保留用于生成下载 URL (如果下载逻辑移动则可移除)
+// 导入 SFTP Actions 工厂函数和所需的类型
+import { createSftpActionsManager, type WebSocketDependencies } from '../composables/useSftpActions'; // 恢复 WebSocketDependencies
 import { useFileUploader } from '../composables/useFileUploader';
 import { useFileEditor } from '../composables/useFileEditor';
-import { useWebSocketConnection } from '../composables/useWebSocketConnection'; // 导入 WebSocket composable
-// 导入新拆分的 UI 组件
+// WebSocket composable 不再直接使用
 import FileUploadPopup from './FileUploadPopup.vue';
 import FileEditorOverlay from './FileEditorOverlay.vue';
 // 从类型文件导入所需类型
-import type { FileListItem, FileAttributes } from '../types/sftp.types';
-import type { UploadItem } from '../types/upload.types';
+import type { FileListItem } from '../types/sftp.types';
+// 从 websocket 类型文件导入所需类型
 import type { WebSocketMessage } from '../types/websocket.types'; // 导入 WebSocketMessage
 
+// 定义 SftpManagerInstance 类型，基于 createSftpActionsManager 的返回类型
+type SftpManagerInstance = ReturnType<typeof createSftpActionsManager>;
 
-// --- 接口定义 (已移至类型文件) ---
 
 // --- Props ---
-const props = defineProps<{
-  // ws: WebSocket | null; // 移除 ws prop
-  isConnected: boolean; // 保留 isConnected prop，用于禁用操作
-}>();
+const props = defineProps({
+  sessionId: {
+    type: String,
+    required: true,
+  },
+  // 注入此会话特定的 SFTP 管理器实例
+  sftpManager: {
+    type: Object as PropType<SftpManagerInstance>,
+    required: true,
+  },
+  // 注入数据库连接 ID
+  dbConnectionId: {
+    type: String,
+    required: true,
+  },
+  // 注入此组件及其子 composables 所需的 WebSocket 依赖项
+  wsDeps: {
+    type: Object as PropType<WebSocketDependencies>,
+    required: true,
+  },
+});
 
 // --- 核心 Composables ---
 const { t } = useI18n();
-const route = useRoute();
-// 导入 sendMessage 和 onMessage 用于 realpath 请求
-const { isSftpReady, sendMessage, onMessage } = useWebSocketConnection();
-const currentPath = ref<string>('.'); // 当前路径状态保留在组件中，传递给 composables
+const route = useRoute(); // Keep for download URL generation for now
+const currentPath = ref<string>('.'); // Current path state remains local, passed to manager if needed
 
-// SFTP 操作模块
+// Access SFTP state and methods from the injected manager instance
 const {
-    fileList, // 从 composable 获取文件列表
-    isLoading, // 从 composable 获取加载状态
-    error,     // 从 composable 获取错误状态
+    fileList,
+    isLoading,
+    error,
     loadDirectory,
     createDirectory,
     createFile,
     deleteItems,
     renameItem,
     changePermissions,
-    readFile, // 暴露给 useFileEditor
-    writeFile, // 暴露给 useFileEditor
-    joinPath, // 从 composable 获取 joinPath
-    clearSftpError, // 导入清除错误的函数
-} = useSftpActions(currentPath); // 传入 currentPath ref
+    readFile, // Provided by the manager
+    writeFile, // Provided by the manager
+    joinPath,
+    clearSftpError,
+    cleanup: cleanupSftpHandlers, // Get the cleanup function from the manager
+} = props.sftpManager; // 直接从 props 获取
 
-// 文件上传模块
+// 文件上传模块 - Needs WebSocket dependencies and session context
 const {
-    uploads, // 从 composable 获取上传列表
+    uploads,
     startFileUpload,
     cancelUpload,
-} = useFileUploader(currentPath, fileList, () => loadDirectory(currentPath.value)); // 传入依赖
+    // cleanup: cleanupUploader, // 假设 uploader 也提供 cleanup
+} = useFileUploader(
+    currentPath,
+    fileList, // 传递来自 sftpManager 的 fileList ref
+    () => loadDirectory(currentPath.value), // Refresh function uses manager's loadDirectory
+    props.sessionId, // 传递 sessionId
+    props.dbConnectionId // 传递 dbConnectionId
+    // useFileUploader 内部创建自己的 ws 连接, 不需要 wsDeps
+);
 
-// 文件编辑器模块
+// 文件编辑器模块 - Needs file operations from sftpManager
 const {
     isEditorVisible,
     editingFilePath,
@@ -66,58 +89,54 @@ const {
     isSaving,
     saveStatus,
     saveError,
-    editingFileContent, // v-model 绑定
+    editingFileContent,
     openFile,
     saveFile,
     closeEditor,
-} = useFileEditor(readFile, writeFile); // 传入依赖
+    // cleanup: cleanupEditor, // 假设 editor 也提供 cleanup
+} = useFileEditor(
+    readFile, // 使用注入的 sftpManager 中的 readFile
+    writeFile // Use writeFile from the injected sftpManager
+);
 
-// --- UI 状态 Refs ---
-const fileInputRef = ref<HTMLInputElement | null>(null); // 用于触发文件选择
-const selectedItems = ref(new Set<string>()); // 文件选择状态
-const lastClickedIndex = ref(-1); // 用于 Shift 多选
-const contextMenuVisible = ref(false); // 右键菜单可见性
-const contextMenuPosition = ref({ x: 0, y: 0 }); // 右键菜单位置
-const contextMenuItems = ref<Array<{ label: string; action: () => void; disabled?: boolean }>>([]); // 右键菜单项
-const contextTargetItem = ref<FileListItem | null>(null); // 右键菜单目标项
-const isDraggingOver = ref(false); // 拖拽覆盖状态
-const sortKey = ref<keyof FileListItem | 'type' | 'size' | 'mtime'>('filename'); // 排序字段
-const sortDirection = ref<'asc' | 'desc'>('asc'); // 排序方向
-const initialLoadDone = ref(false); // Track if the initial load has been triggered
-const isFetchingInitialPath = ref(false); // Track if fetching realpath
-const isEditingPath = ref(false); // State for path editing mode
-const pathInputRef = ref<HTMLInputElement | null>(null); // Ref for the path input element
-const editablePath = ref(''); // Temp storage for the path being edited
+// --- UI 状态 Refs (Remain mostly the same) ---
+const fileInputRef = ref<HTMLInputElement | null>(null);
+const selectedItems = ref(new Set<string>());
+const lastClickedIndex = ref(-1);
+const contextMenuVisible = ref(false);
+const contextMenuPosition = ref({ x: 0, y: 0 });
+const contextMenuItems = ref<Array<{ label: string; action: () => void; disabled?: boolean }>>([]);
+const contextTargetItem = ref<FileListItem | null>(null);
+const isDraggingOver = ref(false);
+const sortKey = ref<keyof FileListItem | 'type' | 'size' | 'mtime'>('filename');
+const sortDirection = ref<'asc' | 'desc'>('asc');
+const initialLoadDone = ref(false);
+const isFetchingInitialPath = ref(false);
+const isEditingPath = ref(false);
+const pathInputRef = ref<HTMLInputElement | null>(null);
+const editablePath = ref('');
 
-// --- Column Resizing State ---
+// --- Column Resizing State (Remains the same) ---
 const tableRef = ref<HTMLTableElement | null>(null);
-const colWidths = ref({ // Initial widths (adjust as needed)
-  type: 50,
-  name: 300,
-  size: 100,
-  permissions: 120,
-  modified: 180,
+const colWidths = ref({
+    type: 50,
+    name: 300,
+    size: 100,
+    permissions: 120,
+    modified: 180,
 });
 const isResizing = ref(false);
 const resizingColumnIndex = ref(-1);
 const startX = ref(0);
 const startWidth = ref(0);
 
-// --- Editor State (已移至 useFileEditor) ---
-// const isEditorVisible = ref(false);
-// ... 其他编辑器状态 ...
+// --- 辅助函数 ---
+// 重新添加 generateRequestId，因为 watchEffect 中需要它
+const generateRequestId = (): string => `req-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+// joinPath 由 props.sftpManager 提供
+// sortFiles 在此组件内部用于排序显示
 
-// --- 辅助函数 (部分移至 composables) ---
-// generateRequestId 已移至 composables 内部使用
-// joinPath 从 useSftpActions 获取
-// sortFiles 已移至 useSftpActions 内部使用
-// Helper function (Copied from useSftpActions) - needed for realpath request
-const generateRequestId = (): string => {
-    return `req-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-};
-
-
-// 保留 UI 格式化函数
+// UI 格式化函数保持不变
 const formatSize = (size: number): string => {
     if (size < 1024) return `${size} B`;
     if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
@@ -126,132 +145,117 @@ const formatSize = (size: number): string => {
 };
 
 const formatMode = (mode: number): string => {
-  const perm = mode & 0o777; let str = '';
-  str += (perm & 0o400) ? 'r' : '-'; str += (perm & 0o200) ? 'w' : '-'; str += (perm & 0o100) ? 'x' : '-';
-  str += (perm & 0o040) ? 'r' : '-'; str += (perm & 0o020) ? 'w' : '-'; str += (perm & 0o010) ? 'x' : '-';
-  str += (perm & 0o004) ? 'r' : '-'; str += (perm & 0o002) ? 'w' : '-'; str += (perm & 0o001) ? 'x' : '-';
+    const perm = mode & 0o777; let str = '';
+    str += (perm & 0o400) ? 'r' : '-'; str += (perm & 0o200) ? 'w' : '-'; str += (perm & 0o100) ? 'x' : '-';
+    str += (perm & 0o040) ? 'r' : '-'; str += (perm & 0o020) ? 'w' : '-'; str += (perm & 0o010) ? 'x' : '-';
+    str += (perm & 0o004) ? 'r' : '-'; str += (perm & 0o002) ? 'w' : '-'; str += (perm & 0o001) ? 'x' : '-';
     return str;
 };
 
-// --- 编辑器辅助函数 (已移至 useFileEditor) ---
-// getLanguageFromFilename 已移至 useFileEditor
-// closeEditor 由 useFileEditor 提供
-// handleSaveFile 由 useFileEditor 提供
-
-
-// --- 上下文菜单逻辑 (部分操作现在调用 composable 方法) ---
+// --- 上下文菜单逻辑 ---
+// Actions now call methods from props.sftpManager
 const showContextMenu = (event: MouseEvent, item?: FileListItem) => {
-  event.preventDefault();
-  const targetItem = item || null;
+    event.preventDefault();
+    const targetItem = item || null;
 
-  // Adjust selection based on right-click target
-  if (targetItem && !event.ctrlKey && !event.metaKey && !event.shiftKey && !selectedItems.value.has(targetItem.filename)) {
-      selectedItems.value.clear();
-      selectedItems.value.add(targetItem.filename);
-      lastClickedIndex.value = fileList.value.findIndex(f => f.filename === targetItem.filename);
-  } else if (!targetItem) {
-      selectedItems.value.clear();
-      lastClickedIndex.value = -1;
-  }
+    // Adjust selection based on right-click target
+    if (targetItem && !event.ctrlKey && !event.metaKey && !event.shiftKey && !selectedItems.value.has(targetItem.filename)) {
+        selectedItems.value.clear();
+        selectedItems.value.add(targetItem.filename);
+        // 使用 props.sftpManager 中的 fileList
+        lastClickedIndex.value = fileList.value.findIndex((f: FileListItem) => f.filename === targetItem.filename); // 已添加类型
+    } else if (!targetItem) {
+        selectedItems.value.clear();
+        lastClickedIndex.value = -1;
+    }
 
-  contextTargetItem.value = targetItem;
-  let menu: Array<{ label: string; action: () => void; disabled?: boolean }> = [];
-  const selectionSize = selectedItems.value.size;
-  const clickedItemIsSelected = targetItem && selectedItems.value.has(targetItem.filename);
+    contextTargetItem.value = targetItem;
+    let menu: Array<{ label: string; action: () => void; disabled?: boolean }> = [];
+    const selectionSize = selectedItems.value.size;
+    const clickedItemIsSelected = targetItem && selectedItems.value.has(targetItem.filename);
+    const canPerformActions = props.wsDeps.isConnected.value && props.wsDeps.isSftpReady.value; // 恢复使用 props.wsDeps
 
-  // 构建上下文菜单项
-  if (selectionSize > 1 && clickedItemIsSelected) {
-      // 多选时的菜单
-      menu = [
-          { label: t('fileManager.actions.deleteMultiple', { count: selectionSize }), action: handleDeleteSelectedClick }, // 修改为调用新的处理函数
-          { label: t('fileManager.actions.refresh'), action: () => loadDirectory(currentPath.value) }, // 调用 useSftpActions 的方法
-      ];
-  } else if (targetItem && targetItem.filename !== '..') {
-      // 单个项目（非 '..'）的菜单
-      menu = [
-          { label: t('fileManager.actions.newFolder'), action: handleNewFolderContextMenuClick }, // 修改为调用新的处理函数
-          { label: t('fileManager.actions.newFile'), action: handleNewFileContextMenuClick }, // 修改为调用新的处理函数
-          { label: t('fileManager.actions.upload'), action: triggerFileUpload }, // 调用组件内的方法触发 input
-          { label: t('fileManager.actions.refresh'), action: () => loadDirectory(currentPath.value) }, // 调用 useSftpActions 的方法
-      ];
+    // Build context menu items
+    if (selectionSize > 1 && clickedItemIsSelected) {
+        // Multi-selection menu
+        menu = [
+            { label: t('fileManager.actions.deleteMultiple', { count: selectionSize }), action: handleDeleteSelectedClick, disabled: !canPerformActions },
+            { label: t('fileManager.actions.refresh'), action: () => loadDirectory(currentPath.value), disabled: !canPerformActions },
+        ];
+    } else if (targetItem && targetItem.filename !== '..') {
+        // Single item (not '..') menu
+        menu = [
+            { label: t('fileManager.actions.newFolder'), action: handleNewFolderContextMenuClick, disabled: !canPerformActions },
+            { label: t('fileManager.actions.newFile'), action: handleNewFileContextMenuClick, disabled: !canPerformActions },
+            { label: t('fileManager.actions.upload'), action: triggerFileUpload, disabled: !canPerformActions }, // Upload depends on connection
+            { label: t('fileManager.actions.refresh'), action: () => loadDirectory(currentPath.value), disabled: !canPerformActions },
+        ];
         if (targetItem.attrs.isFile) {
-            // 如果是文件，添加下载选项
-            menu.splice(1, 0, { label: t('fileManager.actions.download', { name: targetItem.filename }), action: () => triggerDownload(targetItem) });
+            menu.splice(1, 0, { label: t('fileManager.actions.download', { name: targetItem.filename }), action: () => triggerDownload(targetItem), disabled: !canPerformActions }); // Download depends on connection
         }
-       // 添加删除选项
-       menu.push({ label: t('fileManager.actions.delete'), action: handleDeleteSelectedClick }); // 修改为调用新的处理函数
-       // 添加重命名选项
-       menu.push({ label: t('fileManager.actions.rename'), action: () => handleRenameContextMenuClick(targetItem) }); // 调用新的处理函数
-       // 添加修改权限选项
-       menu.push({ label: t('fileManager.actions.changePermissions'), action: () => handleChangePermissionsContextMenuClick(targetItem) }); // 调用新的处理函数
+        menu.push({ label: t('fileManager.actions.delete'), action: handleDeleteSelectedClick, disabled: !canPerformActions });
+        menu.push({ label: t('fileManager.actions.rename'), action: () => handleRenameContextMenuClick(targetItem), disabled: !canPerformActions });
+        menu.push({ label: t('fileManager.actions.changePermissions'), action: () => handleChangePermissionsContextMenuClick(targetItem), disabled: !canPerformActions });
 
-  } else if (!targetItem) {
-      // 在空白处右键的菜单
-      menu = [
-          { label: t('fileManager.actions.newFolder'), action: handleNewFolderContextMenuClick }, // 修改为调用新的处理函数
-          { label: t('fileManager.actions.newFile'), action: handleNewFileContextMenuClick }, // 修改为调用新的处理函数
-          { label: t('fileManager.actions.upload'), action: triggerFileUpload }, // 调用组件内的方法触发 input
-          { label: t('fileManager.actions.refresh'), action: () => loadDirectory(currentPath.value) }, // 调用 useSftpActions 的方法
-      ];
-  } else { // 点击 '..' 时的菜单
-        menu = [ { label: t('fileManager.actions.refresh'), action: () => loadDirectory(currentPath.value) } ]; // 调用 useSftpActions 的方法
-   }
+    } else if (!targetItem) {
+        // Right-click on empty space menu
+        menu = [
+            { label: t('fileManager.actions.newFolder'), action: handleNewFolderContextMenuClick, disabled: !canPerformActions },
+            { label: t('fileManager.actions.newFile'), action: handleNewFileContextMenuClick, disabled: !canPerformActions },
+            { label: t('fileManager.actions.upload'), action: triggerFileUpload, disabled: !canPerformActions },
+            { label: t('fileManager.actions.refresh'), action: () => loadDirectory(currentPath.value), disabled: !canPerformActions },
+        ];
+    } else { // Clicked on '..'
+        menu = [{ label: t('fileManager.actions.refresh'), action: () => loadDirectory(currentPath.value), disabled: !canPerformActions }];
+    }
 
-   contextMenuItems.value = menu;
+    contextMenuItems.value = menu;
 
-   // Calculate initial position
-   let posX = event.clientX;
-   let posY = event.clientY;
+    // Calculate initial position
+    let posX = event.clientX;
+    let posY = event.clientY;
 
-   // Estimate menu dimensions (adjust if necessary based on actual menu size)
-   const estimatedMenuWidth = 180;
-   const estimatedMenuHeight = 200; // Adjust based on max items
+    // Estimate menu dimensions
+    const estimatedMenuWidth = 180;
+    const estimatedMenuHeight = contextMenuItems.value.length * 35; // Estimate height based on items
 
-   // Adjust position if menu would go off-screen
-   if (posX + estimatedMenuWidth > window.innerWidth) {
-       posX = window.innerWidth - estimatedMenuWidth - 5; // Adjust and add small padding
-   }
-   if (posY + estimatedMenuHeight > window.innerHeight) {
-       posY = window.innerHeight - estimatedMenuHeight - 5; // Adjust and add small padding
-   }
-    // Ensure position is not negative
-   posX = Math.max(0, posX);
-   posY = Math.max(0, posY);
+    // Adjust position if menu would go off-screen
+    if (posX + estimatedMenuWidth > window.innerWidth) {
+        posX = window.innerWidth - estimatedMenuWidth - 5;
+    }
+    if (posY + estimatedMenuHeight > window.innerHeight) {
+        posY = window.innerHeight - estimatedMenuHeight - 5;
+    }
+    posX = Math.max(0, posX);
+    posY = Math.max(0, posY);
 
+    contextMenuPosition.value = { x: posX, y: posY };
+    contextMenuVisible.value = true;
 
-   contextMenuPosition.value = { x: posX, y: posY };
-   contextMenuVisible.value = true;
-
-   // Add global listener to hide menu, using capture phase and once
-  nextTick(() => {
-      document.removeEventListener('click', hideContextMenu, { capture: true }); // Clean up just in case
-      document.addEventListener('click', hideContextMenu, { capture: true, once: true });
-  });
+    // Add global listener to hide menu
+    nextTick(() => {
+        document.removeEventListener('click', hideContextMenu, { capture: true });
+        document.addEventListener('click', hideContextMenu, { capture: true, once: true });
+    });
 };
 
 const hideContextMenu = () => {
-  if (!contextMenuVisible.value) return; // Prevent unnecessary runs
-  contextMenuVisible.value = false;
-  contextMenuItems.value = [];
-  contextTargetItem.value = null;
-  // Explicitly remove listener just in case 'once' didn't fire or was removed prematurely
-  document.removeEventListener('click', hideContextMenu, { capture: true });
+    if (!contextMenuVisible.value) return;
+    contextMenuVisible.value = false;
+    contextMenuItems.value = [];
+    contextTargetItem.value = null;
+    document.removeEventListener('click', hideContextMenu, { capture: true });
 };
 
-
-// --- WebSocket 消息处理 (已移至 composables) ---
-// watch(() => props.ws, ...) 已移除
-// watch(() => props.isConnected, ...) 已移除 (部分逻辑移至 onMounted 和 isConnected watch)
-// handleWebSocketMessage 已移除
-
 // --- 目录加载与导航 ---
-// loadDirectory 由 useSftpActions 提供
+// loadDirectory is provided by props.sftpManager
 
 // --- 列表项点击与选择逻辑 ---
-const handleItemClick = (event: MouseEvent, item: FileListItem) => {
-    // Do not hide context menu here, let the global listener or menu item click handle it.
+// handleItemClick 中的 item 参数已有类型
 
-    const itemIndex = fileList.value.findIndex(f => f.filename === item.filename);
+// --- 列表项点击与选择逻辑 ---
+const handleItemClick = (event: MouseEvent, item: FileListItem) => { // item 已有类型
+    const itemIndex = fileList.value.findIndex((f: FileListItem) => f.filename === item.filename); // f 已有类型
     if (itemIndex === -1 && item.filename !== '..') return;
 
     if (event.ctrlKey || event.metaKey) {
@@ -265,6 +269,7 @@ const handleItemClick = (event: MouseEvent, item: FileListItem) => {
         const start = Math.min(lastClickedIndex.value, itemIndex);
         const end = Math.max(lastClickedIndex.value, itemIndex);
         for (let i = start; i <= end; i++) {
+            // Use fileList from props
             if (fileList.value[i]) selectedItems.value.add(fileList.value[i].filename);
         }
     } else {
@@ -277,38 +282,42 @@ const handleItemClick = (event: MouseEvent, item: FileListItem) => {
         }
 
         if (item.attrs.isDirectory) {
-            // 检查是否已在加载，防止快速重复点击
-            if (isLoading.value) {
-                console.log('[文件管理器] 忽略目录点击，因为正在加载...');
+            if (isLoading.value) { // Use isLoading from props
+                console.log(`[FileManager ${props.sessionId}] Ignoring directory click, already loading...`);
                 return;
             }
-            // 处理目录点击：导航
             const newPath = item.filename === '..'
                 ? currentPath.value.substring(0, currentPath.value.lastIndexOf('/')) || '/'
-                : joinPath(currentPath.value, item.filename); // 使用 composable 的 joinPath
-            loadDirectory(newPath); // 使用 composable 的 loadDirectory
+                : joinPath(currentPath.value, item.filename); // Use joinPath from props
+            loadDirectory(newPath); // Use loadDirectory from props
         } else if (item.attrs.isFile) {
-            // 处理文件点击：打开编辑器
-            const filePath = joinPath(currentPath.value, item.filename); // 使用 composable 的 joinPath
-            openFile(filePath); // 使用 useFileEditor 的 openFile
+            const filePath = joinPath(currentPath.value, item.filename); // Use joinPath from props
+            openFile(filePath); // Use openFile from useFileEditor
         }
     }
 };
 
 // --- 下载逻辑 ---
+// triggerDownload 中的 item 参数已有类型
 
-const triggerDownload = (item: FileListItem) => {
-    const currentConnectionId = route.params.connectionId as string;
+// --- 下载逻辑 ---
+const triggerDownload = (item: FileListItem) => { // item 已有类型
+    // 恢复使用 props.wsDeps.isConnected
+    if (!props.wsDeps.isConnected.value) {
+        alert(t('fileManager.errors.notConnected'));
+        return;
+    }
+    // connectionId might need to be passed differently, maybe via sftpManager or wsDeps
+    // For now, keep using route.params as a fallback, but this is not ideal for multi-session
+    const currentConnectionId = route.params.connectionId as string; // TODO: Revisit this for multi-session
     if (!currentConnectionId) {
-        // error.value = t('fileManager.errors.missingConnectionId'); // 错误状态由 useSftpActions 管理
-        console.error("无法下载：缺少连接 ID"); // 或者显示一个临时的 alert
+        console.error(`[FileManager ${props.sessionId}] Cannot download: Missing connection ID.`);
         alert(t('fileManager.errors.missingConnectionId'));
         return;
     }
-    const downloadPath = joinPath(currentPath.value, item.filename); // 使用 composable 的 joinPath
-    // TODO: 考虑将 API URL 基础部分提取到配置或环境变量中
+    const downloadPath = joinPath(currentPath.value, item.filename); // Use joinPath from props
     const downloadUrl = `/api/v1/sftp/download?connectionId=${currentConnectionId}&remotePath=${encodeURIComponent(downloadPath)}`;
-    console.log(`[文件管理器] 触发下载: ${downloadUrl}`);
+    console.log(`[FileManager ${props.sessionId}] Triggering download: ${downloadUrl}`);
     const link = document.createElement('a');
     link.href = downloadUrl;
     link.setAttribute('download', item.filename);
@@ -319,25 +328,22 @@ const triggerDownload = (item: FileListItem) => {
 
 // --- 拖放上传逻辑 ---
 const handleDragEnter = (event: DragEvent) => {
-    // Check if files are being dragged
-    if (event.dataTransfer?.types.includes('Files')) {
+    if (props.wsDeps.isConnected.value && event.dataTransfer?.types.includes('Files')) { // 恢复使用 props.wsDeps.isConnected
         isDraggingOver.value = true;
     }
 };
 
 const handleDragOver = (event: DragEvent) => {
-    // Necessary to allow drop
     event.preventDefault();
-    if (event.dataTransfer && event.dataTransfer.types.includes('Files')) { // Added null check
-        event.dataTransfer.dropEffect = 'copy'; // Show copy cursor
-        isDraggingOver.value = true; // Ensure state is true
-    } else if (event.dataTransfer) { // Added null check
+    if (props.wsDeps.isConnected.value && event.dataTransfer?.types.includes('Files')) { // 恢复使用 props.wsDeps.isConnected
+        event.dataTransfer.dropEffect = 'copy';
+        isDraggingOver.value = true;
+    } else if (event.dataTransfer) {
         event.dataTransfer.dropEffect = 'none';
     }
 };
 
 const handleDragLeave = (event: DragEvent) => {
-    // Check if the leave event is going outside the container or onto a child element
     const target = event.relatedTarget as Node | null;
     const container = (event.currentTarget as HTMLElement);
     if (!target || !container.contains(target)) {
@@ -347,34 +353,33 @@ const handleDragLeave = (event: DragEvent) => {
 
 const handleDrop = (event: DragEvent) => {
     isDraggingOver.value = false;
-    if (!event.dataTransfer?.files || !props.isConnected) { // 使用 props.isConnected
+    // 恢复使用 props.wsDeps.isConnected
+    if (!event.dataTransfer?.files || !props.wsDeps.isConnected.value) {
         return;
     }
     const files = Array.from(event.dataTransfer.files);
     if (files.length > 0) {
-        console.log(`[文件管理器] 拖放了 ${files.length} 个文件。`);
-        files.forEach(startFileUpload); // 调用 useFileUploader 的方法
+        console.log(`[FileManager ${props.sessionId}] Dropped ${files.length} files.`);
+        files.forEach(startFileUpload); // Use startFileUpload from useFileUploader
     }
 };
 
-// --- 文件上传逻辑 (已移至 useFileUploader) ---
-const triggerFileUpload = () => { fileInputRef.value?.click(); }; // 保留触发器
+// --- 文件上传逻辑 ---
+const triggerFileUpload = () => { fileInputRef.value?.click(); };
 const handleFileSelected = (event: Event) => {
     const input = event.target as HTMLInputElement;
-    if (!input.files || !props.isConnected) return; // 使用 props.isConnected
-    Array.from(input.files).forEach(startFileUpload); // 调用 useFileUploader 的方法
-    input.value = ''; // 清空 input 以允许再次选择相同文件
+    // 恢复使用 props.wsDeps.isConnected
+    if (!input.files || !props.wsDeps.isConnected.value) return;
+    Array.from(input.files).forEach(startFileUpload); // Use startFileUpload from useFileUploader
+    input.value = '';
 };
-// startFileUpload 已移至 useFileUploader
-// sendFileChunks 已移至 useFileUploader
-// cancelUpload 由 useFileUploader 提供
 
-// --- SFTP 操作处理函数 (现在调用 composable 方法) ---
+// --- SFTP 操作处理函数 ---
+// 恢复使用 props.wsDeps.isConnected 和 props.sftpManager 的方法
 const handleDeleteSelectedClick = () => {
-    if (!props.isConnected || selectedItems.value.size === 0) return;
-    // 从 composable 获取 fileList 来查找选中的项
+    if (!props.wsDeps.isConnected.value || selectedItems.value.size === 0) return; // 恢复使用 props.wsDeps
     const itemsToDelete = Array.from(selectedItems.value)
-                               .map(filename => fileList.value.find(f => f.filename === filename))
+                               .map(filename => fileList.value.find((f: FileListItem) => f.filename === filename)) // f 已有类型
                                .filter((item): item is FileListItem => item !== undefined);
     if (itemsToDelete.length === 0) return;
 
@@ -386,21 +391,21 @@ const handleDeleteSelectedClick = () => {
             : t('fileManager.prompts.confirmDeleteFile', { name: itemsToDelete[0].filename });
 
     if (confirm(confirmMsg)) {
-        deleteItems(itemsToDelete); // 调用 useSftpActions 的方法
-        selectedItems.value.clear(); // 清空选择
+        deleteItems(itemsToDelete); // Use deleteItems from props
+        selectedItems.value.clear();
     }
 };
 
-const handleRenameContextMenuClick = (item: FileListItem) => {
-    if (!props.isConnected || !item) return;
+const handleRenameContextMenuClick = (item: FileListItem) => { // item 已有类型
+    if (!props.wsDeps.isConnected.value || !item) return; // 恢复使用 props.wsDeps
     const newName = prompt(t('fileManager.prompts.enterNewName', { oldName: item.filename }), item.filename);
     if (newName && newName !== item.filename) {
-        renameItem(item, newName); // 调用 useSftpActions 的方法
+        renameItem(item, newName); // Use renameItem from props.sftpManager
     }
 };
 
-const handleChangePermissionsContextMenuClick = (item: FileListItem) => {
-    if (!props.isConnected || !item) return;
+const handleChangePermissionsContextMenuClick = (item: FileListItem) => { // item 已有类型
+    if (!props.wsDeps.isConnected.value || !item) return; // 恢复使用 props.wsDeps
     const currentModeOctal = (item.attrs.mode & 0o777).toString(8).padStart(3, '0');
     const newModeStr = prompt(t('fileManager.prompts.enterNewPermissions', { name: item.filename, currentMode: currentModeOctal }), currentModeOctal);
     if (newModeStr) {
@@ -409,91 +414,69 @@ const handleChangePermissionsContextMenuClick = (item: FileListItem) => {
             return;
         }
         const newMode = parseInt(newModeStr, 8);
-        changePermissions(item, newMode); // 调用 useSftpActions 的方法
+        changePermissions(item, newMode); // Use changePermissions from props.sftpManager
     }
 };
 
 const handleNewFolderContextMenuClick = () => {
-    if (!props.isConnected) return;
+    if (!props.wsDeps.isConnected.value) return; // 恢复使用 props.wsDeps
     const folderName = prompt(t('fileManager.prompts.enterFolderName'));
     if (folderName) {
-        // 可以在这里添加客户端的文件名验证（例如，是否已存在）
-        if (fileList.value.some(item => item.filename === folderName)) {
-             alert(t('fileManager.errors.folderExists', { name: folderName })); // 假设有这个翻译
+        if (fileList.value.some((item: FileListItem) => item.filename === folderName)) { // item 已有类型
+             alert(t('fileManager.errors.folderExists', { name: folderName }));
              return;
         }
-        createDirectory(folderName); // 调用 useSftpActions 的方法
+        createDirectory(folderName); // Use createDirectory from props.sftpManager
     }
 };
 
 const handleNewFileContextMenuClick = () => {
-    if (!props.isConnected) return;
+    if (!props.wsDeps.isConnected.value) return; // 恢复使用 props.wsDeps
     const fileName = prompt(t('fileManager.prompts.enterFileName'));
     if (fileName) {
-        // 可以在这里添加客户端的文件名验证
-        if (fileList.value.some(item => item.filename === fileName)) {
+        if (fileList.value.some((item: FileListItem) => item.filename === fileName)) { // item 已有类型
             alert(t('fileManager.errors.fileExists', { name: fileName }));
             return;
         }
-        createFile(fileName); // 调用 useSftpActions 的方法
+        createFile(fileName); // Use createFile from props.sftpManager
     }
 };
 
 
-// --- 排序逻辑 (现在作用于从 composable 获取的 fileList) ---
+// --- 排序逻辑 ---
+// Uses fileList from props.sftpManager
 const sortedFileList = computed(() => {
-    const list = [...fileList.value]; // Create a shallow copy to avoid mutating original
+    // Ensure fileList.value is used (it's reactive from the manager)
+    if (!fileList.value) return [];
+    const list = [...fileList.value];
     const key = sortKey.value;
     const direction = sortDirection.value === 'asc' ? 1 : -1;
 
     list.sort((a, b) => {
-        // Always keep directories first when sorting by anything other than type
         if (key !== 'type') {
             if (a.attrs.isDirectory && !b.attrs.isDirectory) return -1;
             if (!a.attrs.isDirectory && b.attrs.isDirectory) return 1;
         }
-
         let valA: string | number | boolean;
         let valB: string | number | boolean;
-
         switch (key) {
             case 'type':
-                // Sort by type: Directory > Symlink > File
                 valA = a.attrs.isDirectory ? 0 : (a.attrs.isSymbolicLink ? 1 : 2);
                 valB = b.attrs.isDirectory ? 0 : (b.attrs.isSymbolicLink ? 1 : 2);
                 break;
-            case 'filename':
-                valA = a.filename.toLowerCase();
-                valB = b.filename.toLowerCase();
-                break;
-            case 'size':
-                valA = a.attrs.isFile ? a.attrs.size : -1; // Treat dirs as -1 size for sorting
-                valB = b.attrs.isFile ? b.attrs.size : -1;
-                break;
-            case 'mtime':
-                valA = a.attrs.mtime;
-                valB = b.attrs.mtime;
-                break;
-            default: // Should not happen with defined keys, but fallback to filename
-                valA = a.filename.toLowerCase();
-                valB = b.filename.toLowerCase();
+            case 'filename': valA = a.filename.toLowerCase(); valB = b.filename.toLowerCase(); break;
+            case 'size': valA = a.attrs.isFile ? a.attrs.size : -1; valB = b.attrs.isFile ? b.attrs.size : -1; break;
+            case 'mtime': valA = a.attrs.mtime; valB = b.attrs.mtime; break;
+            default: valA = a.filename.toLowerCase(); valB = b.filename.toLowerCase();
         }
-
         if (valA < valB) return -1 * direction;
         if (valA > valB) return 1 * direction;
-
-        // Secondary sort by filename if primary values are equal
-        if (key !== 'filename') {
-            return a.filename.localeCompare(b.filename);
-        }
-
+        if (key !== 'filename') return a.filename.localeCompare(b.filename);
         return 0;
     });
-    // 返回排序后的列表副本
     return list;
 });
 
-// 处理表头点击排序
 const handleSort = (key: keyof FileListItem | 'type' | 'size' | 'mtime') => {
     if (sortKey.value === key) {
         sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc';
@@ -505,96 +488,86 @@ const handleSort = (key: keyof FileListItem | 'type' | 'size' | 'mtime') => {
 
 // --- 生命周期钩子 ---
 onMounted(() => {
-    console.log('[文件管理器] 组件已挂载。');
-    // 初始加载逻辑现在由 isConnected 的 watch 处理
-    // if (props.isConnected) {
-    //     console.log('[文件管理器] 挂载时连接已激活，加载初始目录。');
-    //     loadDirectory(currentPath.value); // 调用 composable 的方法
-    // }
+    console.log(`[FileManager ${props.sessionId}] Component mounted.`);
+    // Initial load logic is handled by watchEffect
 });
 
 // 使用 watchEffect 监听连接和 SFTP 就绪状态以触发初始加载
+// 恢复使用 props.wsDeps
 watchEffect((onCleanup) => {
     let unregisterSuccess: (() => void) | undefined;
     let unregisterError: (() => void) | undefined;
-    let timeoutId: number | undefined; // Use number for browser timeout ID
+    let timeoutId: number | undefined;
 
-    // 清理函数，用于注销监听器和清除超时
     const cleanupListeners = () => {
         unregisterSuccess?.();
         unregisterError?.();
         if (timeoutId) clearTimeout(timeoutId);
-        // Only reset isFetchingInitialPath if it was set by this effect instance
         if (isFetchingInitialPath.value) {
              isFetchingInitialPath.value = false;
         }
     };
 
-    // 注册清理回调
     onCleanup(cleanupListeners);
 
-    // 条件判断：连接、SFTP就绪、不在加载、初始加载未完成、未在获取初始路径
-    // Note: Removed fileList.value.length === 0 check to allow re-fetching if needed after disconnect/reconnect
-    if (props.isConnected && isSftpReady.value && !isLoading.value && !initialLoadDone.value && !isFetchingInitialPath.value) {
-        console.log('[文件管理器] 连接已建立，SFTP 已就绪，触发初始路径获取。');
-        isFetchingInitialPath.value = true; // 标记正在获取初始路径
+    // 恢复使用 props.wsDeps.isConnected 和 props.wsDeps.isSftpReady
+    // 恢复使用 props.sftpManager.isLoading
+    if (props.wsDeps.isConnected.value && props.wsDeps.isSftpReady.value && !isLoading.value && !initialLoadDone.value && !isFetchingInitialPath.value) {
+        console.log(`[FileManager ${props.sessionId}] Connection ready, fetching initial path.`);
+        isFetchingInitialPath.value = true;
 
-        const requestId = generateRequestId();
-        const requestedPath = '.'; // Always request the real path for '.'
+        // 恢复使用 props.wsDeps 中的 sendMessage 和 onMessage
+        const { sendMessage: wsSend, onMessage: wsOnMessage } = props.wsDeps;
+        const requestId = generateRequestId(); // 使用本地辅助函数
+        const requestedPath = '.';
 
-        // 设置成功回调
-        unregisterSuccess = onMessage('sftp:realpath:success', (payload, message: WebSocketMessage) => {
+        unregisterSuccess = wsOnMessage('sftp:realpath:success', (payload: any, message: WebSocketMessage) => { // message 已有类型
             if (message.requestId === requestId && payload.requestedPath === requestedPath) {
                 const absolutePath = payload.absolutePath;
-                console.log(`[文件管理器] 收到 "." 的绝对路径: ${absolutePath}，开始加载目录。`);
-                currentPath.value = absolutePath; // 更新当前路径
-                loadDirectory(absolutePath); // 加载实际路径
-                initialLoadDone.value = true; // 标记初始加载完成
-                cleanupListeners(); // 清理监听器和超时
+                console.log(`[FileManager ${props.sessionId}] 收到 '.' 的绝对路径: ${absolutePath}。开始加载目录。`);
+                currentPath.value = absolutePath;
+                loadDirectory(absolutePath); // 使用 props 中的 loadDirectory
+                initialLoadDone.value = true;
+                cleanupListeners();
             }
         });
 
-        // 设置错误回调
-        unregisterError = onMessage('sftp:realpath:error', (payload, message: WebSocketMessage) => {
-            // Check if the error corresponds to *this* specific realpath request
+        unregisterError = wsOnMessage('sftp:realpath:error', (payload: any, message: WebSocketMessage) => { // message 已有类型
             if (message.requestId === requestId && message.path === requestedPath) {
-                console.error(`[文件管理器] 获取初始路径 "." 失败:`, payload);
-                // Display error via console or a dedicated UI element, cannot assign to readonly 'error'
-                console.error(t('fileManager.errors.getInitialPathFailed', { message: payload?.message || payload || 'Unknown error' }));
-                // Do NOT set initialLoadDone = true, allowing retry if conditions change
-                // Do NOT call loadDirectory('.') as it might loop on error
-                cleanupListeners(); // Clean up listeners and timeout
+                console.error(`[FileManager ${props.sessionId}] 获取 '.' 的 realpath 失败:`, payload);
+                // 适当地显示错误，也许设置 props.sftpManager.error?
+                // 目前仅记录日志。
+                cleanupListeners();
             }
         });
 
-        // 发送 realpath 请求
-        console.log(`[文件管理器] 发送 sftp:realpath 请求 (ID: ${requestId}) for path: ${requestedPath}`);
-        sendMessage({ type: 'sftp:realpath', requestId: requestId, payload: { path: requestedPath } });
+        console.log(`[FileManager ${props.sessionId}] 发送 sftp:realpath 请求 (ID: ${requestId}) for path: ${requestedPath}`);
+        wsSend({ type: 'sftp:realpath', requestId: requestId, payload: { path: requestedPath } });
 
-        // 设置超时
         timeoutId = setTimeout(() => {
-            console.error(`[文件管理器] 获取初始路径 "." 超时 (ID: ${requestId})。`);
-            // Display error via console or a dedicated UI element
-            console.error(t('fileManager.errors.getInitialPathTimeout'));
-            cleanupListeners(); // 清理监听器
+            console.error(`[FileManager ${props.sessionId}] 获取 '.' 的 realpath 超时 (ID: ${requestId})。`);
+            cleanupListeners();
         }, 10000); // 10 秒超时
 
-    } else if (!props.isConnected) {
-        // 连接断开时的清理
-        console.log('[文件管理器] 连接已断开 (watchEffect)，重置 initialLoadDone 和 isFetchingInitialPath。');
+    } else if (!props.wsDeps.isConnected.value && initialLoadDone.value) { // 恢复使用 props.wsDeps.isConnected
+        console.log(`[FileManager ${props.sessionId}] 连接丢失 (之前已加载)，重置状态。`);
         selectedItems.value.clear();
         lastClickedIndex.value = -1;
-        initialLoadDone.value = false; // 重置初始加载状态，允许下次连接时重新获取
+        initialLoadDone.value = false; // 重置初始加载状态
         isFetchingInitialPath.value = false; // 重置获取状态
-        cleanupListeners(); // 确保断开连接时清理监听器和超时
+        cleanupListeners();
     }
 });
 
 
 onBeforeUnmount(() => {
-    console.log('[文件管理器] 组件将卸载。');
-    // WebSocket 监听器和上传任务的清理由各自的 composable 处理
-    // 确保上下文菜单监听器被移除
+    console.log(`[FileManager ${props.sessionId}] 组件即将卸载。`);
+    // 调用注入的 SFTP 管理器提供的清理函数
+    cleanupSftpHandlers();
+    // 如果其他 composables 也提供了 cleanup 函数，在此处调用
+    // cleanupUploader?.();
+    // cleanupEditor?.();
+    // 移除上下文菜单监听器
     document.removeEventListener('click', hideContextMenu, { capture: true });
 });
 
@@ -605,109 +578,93 @@ const getColumnKeyByIndex = (index: number): keyof typeof colWidths.value | null
 };
 
 const startResize = (event: MouseEvent, index: number) => {
-  event.stopPropagation(); // Stop the event from bubbling up to the th's click handler
-  event.preventDefault(); // Prevent text selection during drag
-  isResizing.value = true;
-  resizingColumnIndex.value = index;
-  startX.value = event.clientX;
-  const colKey = getColumnKeyByIndex(index);
-  if (colKey) {
-      startWidth.value = colWidths.value[colKey];
-  } else {
-      // Fallback or error handling if index is out of bounds
-      const thElement = (event.target as HTMLElement).closest('th');
-      startWidth.value = thElement?.offsetWidth ?? 100; // Estimate if key not found
-  }
-
-
-  document.addEventListener('mousemove', handleResize);
-  document.addEventListener('mouseup', stopResize);
-  document.body.style.cursor = 'col-resize'; // Change cursor globally
-  document.body.style.userSelect = 'none'; // Prevent text selection globally
+    event.stopPropagation();
+    event.preventDefault();
+    isResizing.value = true;
+    resizingColumnIndex.value = index;
+    startX.value = event.clientX;
+    const colKey = getColumnKeyByIndex(index);
+    if (colKey) {
+        startWidth.value = colWidths.value[colKey];
+    } else {
+        const thElement = (event.target as HTMLElement).closest('th');
+        startWidth.value = thElement?.offsetWidth ?? 100;
+    }
+    document.addEventListener('mousemove', handleResize);
+    document.addEventListener('mouseup', stopResize);
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
 };
 
 const handleResize = (event: MouseEvent) => {
-  if (!isResizing.value || resizingColumnIndex.value < 0) return;
-
-  const currentX = event.clientX;
-  const diffX = currentX - startX.value;
-  const newWidth = Math.max(30, startWidth.value + diffX); // Minimum width 30px
-
-  const colKey = getColumnKeyByIndex(resizingColumnIndex.value);
-   if (colKey) {
-       colWidths.value[colKey] = newWidth;
-   }
-   // Note: Direct manipulation of <col> width via style might be needed
-   // if reactive updates to :style don't work reliably with table-layout:fixed.
-   // Let's try with reactive refs first.
+    if (!isResizing.value || resizingColumnIndex.value < 0) return;
+    const currentX = event.clientX;
+    const diffX = currentX - startX.value;
+    const newWidth = Math.max(30, startWidth.value + diffX);
+    const colKey = getColumnKeyByIndex(resizingColumnIndex.value);
+    if (colKey) {
+        colWidths.value[colKey] = newWidth;
+    }
 };
 
 const stopResize = () => {
-  if (isResizing.value) {
-    isResizing.value = false;
-    resizingColumnIndex.value = -1;
-    document.removeEventListener('mousemove', handleResize);
-    document.removeEventListener('mouseup', stopResize);
-    document.body.style.cursor = ''; // Reset cursor
-  document.body.style.userSelect = ''; // Reset text selection
-  }
+    if (isResizing.value) {
+        isResizing.value = false;
+        resizingColumnIndex.value = -1;
+        document.removeEventListener('mousemove', handleResize);
+        document.removeEventListener('mouseup', stopResize);
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+    }
 };
 
-// --- Path Editing Logic ---
+// --- 路径编辑逻辑 ---
 const startPathEdit = () => {
-    if (isLoading.value || !props.isConnected) return; // Don't allow edit while loading or disconnected
-    editablePath.value = currentPath.value; // Initialize input with current path
+    // 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected
+    if (isLoading.value || !props.wsDeps.isConnected.value) return;
+    editablePath.value = currentPath.value;
     isEditingPath.value = true;
     nextTick(() => {
-        pathInputRef.value?.focus(); // Focus the input after it becomes visible
-        pathInputRef.value?.select(); // Select the text
+        pathInputRef.value?.focus();
+        pathInputRef.value?.select();
     });
 };
 
 const handlePathInput = async (event?: Event) => {
-    // Check if triggered by blur or Enter key
     if (event && event instanceof KeyboardEvent && event.key !== 'Enter') {
-        return; // Ignore other key presses
+        return;
     }
-
     const newPath = editablePath.value.trim();
-    isEditingPath.value = false; // Exit editing mode immediately
-
+    isEditingPath.value = false;
     if (newPath === currentPath.value || !newPath) {
-        return; // No change or empty path, do nothing
+        return;
     }
-
-    console.log(`[文件管理器] 尝试导航到新路径: ${newPath}`);
-    // Call loadDirectory which handles path validation via backend
+    console.log(`[FileManager ${props.sessionId}] 尝试导航到新路径: ${newPath}`);
+    // 调用 props 中的 loadDirectory
     await loadDirectory(newPath);
-
-    // If loadDirectory resulted in an error (handled within useSftpActions),
-    // the currentPath will not have changed, effectively reverting the UI.
-    // If successful, currentPath is updated by loadDirectory, and the UI reflects the new path.
 };
 
 const cancelPathEdit = () => {
     isEditingPath.value = false;
-    // No need to reset editablePath, it will be set on next edit start
 };
 
-// Function to clear the error message - now calls the composable's function
+// 清除错误消息的函数 - 调用 props 中的 clearSftpError
 const clearError = () => {
     clearSftpError();
 };
 
-
 </script>
 
 <template>
   <div class="file-manager">
     <div class="toolbar">
         <div class="path-bar">
-          <span v-show="!isEditingPath"> 
-            {{ t('fileManager.currentPath') }}: <strong @click="startPathEdit" :title="t('fileManager.editPathTooltip')" class="editable-path">{{ currentPath }}</strong>
+          <span v-show="!isEditingPath">
+            <!-- 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected -->
+            {{ t('fileManager.currentPath') }}: <strong @click="startPathEdit" :title="t('fileManager.editPathTooltip')" class="editable-path" :class="{ 'disabled': isLoading || !props.wsDeps.isConnected.value }">{{ currentPath }}</strong>
           </span>
           <input
-            v-show="isEditingPath" 
+            v-show="isEditingPath"
             ref="pathInputRef"
             type="text"
             v-model="editablePath"
@@ -715,21 +672,24 @@ const clearError = () => {
             @keyup.enter="handlePathInput"
             @blur="handlePathInput"
             @keyup.esc="cancelPathEdit"
-            
           />
-          <button @click.stop="loadDirectory(currentPath)" :disabled="isLoading || !isConnected || isEditingPath" :title="t('fileManager.actions.refresh')">🔄</button>
-          <!-- Pass event to handleItemClick for '..' -->
-          <button @click.stop="handleItemClick($event, { filename: '..', longname: '', attrs: { isDirectory: true, isFile: false, isSymbolicLink: false, size: 0, uid: 0, gid: 0, mode: 0, atime: 0, mtime: 0 } })" :disabled="isLoading || !isConnected || currentPath === '/' || isEditingPath" :title="t('fileManager.actions.parentDirectory')">⬆️</button>
+          <!-- 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected.value -->
+          <button @click.stop="loadDirectory(currentPath)" :disabled="isLoading || !props.wsDeps.isConnected.value || isEditingPath" :title="t('fileManager.actions.refresh')">🔄</button>
+          <!-- 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected.value -->
+          <button @click.stop="handleItemClick($event, { filename: '..', longname: '..', attrs: { isDirectory: true, isFile: false, isSymbolicLink: false, size: 0, uid: 0, gid: 0, mode: 0, atime: 0, mtime: 0 } })" :disabled="isLoading || !props.wsDeps.isConnected.value || currentPath === '/' || isEditingPath" :title="t('fileManager.actions.parentDirectory')">⬆️</button>
         </div>
         <div class="actions-bar">
              <input type="file" ref="fileInputRef" @change="handleFileSelected" multiple style="display: none;" />
-             <button @click="triggerFileUpload" :disabled="isLoading || !props.isConnected" :title="t('fileManager.actions.uploadFile')">📤 {{ t('fileManager.actions.upload') }}</button>
-             <button @click="handleNewFolderContextMenuClick" :disabled="isLoading || !props.isConnected" :title="t('fileManager.actions.newFolder')">➕ {{ t('fileManager.actions.newFolder') }}</button> <!-- 调用修改后的函数 -->
-             <button @click="handleNewFileContextMenuClick" :disabled="isLoading || !props.isConnected" :title="t('fileManager.actions.newFile')">📄 {{ t('fileManager.actions.newFile') }}</button> <!-- 调用修改后的函数 -->
+             <!-- 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected.value -->
+             <button @click="triggerFileUpload" :disabled="isLoading || !props.wsDeps.isConnected.value" :title="t('fileManager.actions.uploadFile')">📤 {{ t('fileManager.actions.upload') }}</button>
+             <!-- 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected.value -->
+             <button @click="handleNewFolderContextMenuClick" :disabled="isLoading || !props.wsDeps.isConnected.value" :title="t('fileManager.actions.newFolder')">➕ {{ t('fileManager.actions.newFolder') }}</button>
+             <!-- 恢复使用 props.sftpManager.isLoading 和 props.wsDeps.isConnected.value -->
+             <button @click="handleNewFileContextMenuClick" :disabled="isLoading || !props.wsDeps.isConnected.value" :title="t('fileManager.actions.newFile')">📄 {{ t('fileManager.actions.newFile') }}</button>
         </div>
     </div>
 
-    <!-- File List Container -->
+    <!-- 文件列表容器 -->
     <div
       class="file-list-container"
       :class="{ 'drag-over': isDraggingOver }"
diff --git a/packages/frontend/src/components/StatusMonitor.vue b/packages/frontend/src/components/StatusMonitor.vue
index c81e073..3e5ba4b 100644
--- a/packages/frontend/src/components/StatusMonitor.vue
+++ b/packages/frontend/src/components/StatusMonitor.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="status-monitor">
     <h4>服务器状态</h4>
-    <div v-if="!statusData" class="loading-status">
+    <div v-if="!serverStatus" class="loading-status">
       等待数据...
     </div>
     <div v-else class="status-grid">
@@ -19,14 +19,14 @@
       <div class="status-item">
         <label>CPU:</label>
         <div class="progress-bar-container">
-          <div class="progress-bar" :style="{ width: `${statusData.cpuPercent ?? 0}%` }"></div>
+          <div class="progress-bar" :style="{ width: `${serverStatus.cpuPercent ?? 0}%` }"></div>
         </div>
-        <span>{{ statusData.cpuPercent?.toFixed(1) ?? 'N/A' }}%</span>
+        <span>{{ serverStatus.cpuPercent?.toFixed(1) ?? 'N/A' }}%</span>
       </div>
       <div class="status-item">
         <label>内存:</label>
         <div class="progress-bar-container">
-          <div class="progress-bar" :style="{ width: `${statusData.memPercent ?? 0}%` }"></div>
+          <div class="progress-bar" :style="{ width: `${serverStatus.memPercent ?? 0}%` }"></div>
         </div>
         <span class="mem-disk-details">{{ memDisplay }}</span>
       </div>
@@ -34,25 +34,25 @@
        <div class="status-item">
         <label>Swap:</label>
         <div class="progress-bar-container">
-          <div class="progress-bar swap-bar" :style="{ width: `${statusData.swapPercent ?? 0}%` }"></div>
+          <div class="progress-bar swap-bar" :style="{ width: `${serverStatus.swapPercent ?? 0}%` }"></div>
         </div>
         <span class="mem-disk-details">{{ swapDisplay }}</span>
       </div>
       <div class="status-item">
         <label>磁盘 (/):</label>
         <div class="progress-bar-container">
-          <div class="progress-bar" :style="{ width: `${statusData.diskPercent ?? 0}%` }"></div>
+          <div class="progress-bar" :style="{ width: `${serverStatus.diskPercent ?? 0}%` }"></div>
         </div>
         <span class="mem-disk-details">{{ diskDisplay }}</span>
       </div>
       <div class="status-item network-rate">
-          <label>网络 ({{ statusData.netInterface || '...' }}):</label>
-          <span class="rate down">⬇ {{ formatBytesPerSecond(statusData.netRxRate) }}</span>
-          <span class="rate up">⬆ {{ formatBytesPerSecond(statusData.netTxRate) }}</span>
+          <label>网络 ({{ serverStatus.netInterface || '...' }}):</label>
+          <span class="rate down">⬇ {{ formatBytesPerSecond(serverStatus.netRxRate) }}</span>
+          <span class="rate up">⬆ {{ formatBytesPerSecond(serverStatus.netTxRate) }}</span>
       </div>
     </div>
-     <div v-if="error" class="status-error">
-        错误: {{ error }}
+     <div v-if="statusError" class="status-error">
+        错误: {{ statusError }}
      </div>
   </div>
 </template>
@@ -79,18 +79,19 @@ interface ServerStatus {
   osName?: string; // 操作系统名称
 }
 
-// Props 用于接收父组件传递的状态数据和错误信息
+// 更新 Props 定义
 const props = defineProps<{
-  statusData: ServerStatus | null;
-  error?: string | null;
+  sessionId: string; // 添加会话 ID
+  serverStatus: ServerStatus | null; // 更改名称从 statusData 到 serverStatus
+  statusError?: string | null; // 更改名称从 error 到 statusError
 }>();
 
 // --- 缓存状态 ---
 const cachedCpuModel = ref<string | null>(null);
 const cachedOsName = ref<string | null>(null);
 
-// 监听传入的 statusData 变化以更新缓存
-watch(() => props.statusData, (newData) => {
+// 监听传入的 serverStatus 变化以更新缓存 (更新引用)
+watch(() => props.serverStatus, (newData) => {
   if (newData) {
     // 仅当新数据有效时更新缓存
     if (newData.cpuModel !== undefined && newData.cpuModel !== null && newData.cpuModel !== '') {
@@ -103,15 +104,15 @@ watch(() => props.statusData, (newData) => {
   // 如果 newData 为 null (例如断开连接)，不清除缓存
 }, { immediate: true }); // 立即执行一次以初始化缓存
 
-// --- 显示计算属性 (包含缓存逻辑) ---
+// --- 显示计算属性 (包含缓存逻辑) - 更新引用 ---
 const displayCpuModel = computed(() => {
   // 优先使用当前有效数据，否则回退到缓存，最后是 'N/A'
-  return (props.statusData?.cpuModel ?? cachedCpuModel.value) || 'N/A';
+  return (props.serverStatus?.cpuModel ?? cachedCpuModel.value) || 'N/A';
 });
 
 const displayOsName = computed(() => {
   // 优先使用当前有效数据，否则回退到缓存，最后是 'N/A'
-  return (props.statusData?.osName ?? cachedOsName.value) || 'N/A';
+  return (props.serverStatus?.osName ?? cachedOsName.value) || 'N/A';
 });
 
 
@@ -133,9 +134,9 @@ const formatKbToGb = (kb?: number): string => {
     return `${gb.toFixed(1)} GB`;
 };
 
-// 计算属性用于显示内存信息
+// 计算属性用于显示内存信息 (更新引用)
 const memDisplay = computed(() => {
-    const data = props.statusData;
+    const data = props.serverStatus;
     if (!data || data.memUsed === undefined || data.memTotal === undefined) return 'N/A'; // 检查数据有效性
     const percent = data.memPercent !== undefined ? `(${data.memPercent.toFixed(1)}%)` : '';
     // 确保 MB 值在是整数时不显示小数
@@ -144,9 +145,9 @@ const memDisplay = computed(() => {
     return `${usedMb} MB / ${totalMb} MB ${percent}`;
 });
 
-// 计算属性用于显示磁盘信息
+// 计算属性用于显示磁盘信息 (更新引用)
 const diskDisplay = computed(() => {
-    const data = props.statusData;
+    const data = props.serverStatus;
     if (!data || data.diskUsed === undefined || data.diskTotal === undefined) return 'N/A'; // 检查数据有效性
     // 百分比代表已用空间
     const percent = data.diskPercent !== undefined ? `(${data.diskPercent.toFixed(1)}%)` : '';
@@ -154,9 +155,9 @@ const diskDisplay = computed(() => {
     return `${formatKbToGb(data.diskUsed)} / ${formatKbToGb(data.diskTotal)} ${percent}`;
 });
 
-// 计算属性用于显示 Swap 信息
+// 计算属性用于显示 Swap 信息 (更新引用)
 const swapDisplay = computed(() => {
-    const data = props.statusData;
+    const data = props.serverStatus;
     // 处理 swap 可能为 undefined 或 0 的情况
     const used = data?.swapUsed ?? 0;
     const total = data?.swapTotal ?? 0;
diff --git a/packages/frontend/src/components/Terminal.vue b/packages/frontend/src/components/Terminal.vue
index 61ebc39..44a0613 100644
--- a/packages/frontend/src/components/Terminal.vue
+++ b/packages/frontend/src/components/Terminal.vue
@@ -7,6 +7,7 @@ import 'xterm/css/xterm.css'; // 引入 xterm 样式
 
 // 定义 props 和 emits
 const props = defineProps<{
+  sessionId: string; // 会话 ID
   stream?: ReadableStream<string>; // 用于接收来自 WebSocket 的数据流 (可选)
   options?: object; // xterm 的配置选项
 }>();
diff --git a/packages/frontend/src/components/TerminalTabBar.vue b/packages/frontend/src/components/TerminalTabBar.vue
new file mode 100644
index 0000000..3929308
--- /dev/null
+++ b/packages/frontend/src/components/TerminalTabBar.vue
@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+// 定义会话状态的简化接口 (仅包含标签栏需要的信息)
+interface SessionTabInfo {
+  sessionId: string;
+  connectionName: string; // 显示在标签上的名称
+}
+
+// 定义 Props
+const props = defineProps({
+  sessions: {
+    type: Array as PropType<SessionTabInfo[]>,
+    required: true,
+  },
+  activeSessionId: {
+    type: String as PropType<string | null>,
+    required: true,
+  },
+});
+
+// 定义事件
+const emit = defineEmits(['activate-session', 'close-session']);
+
+const activateSession = (sessionId: string) => {
+  if (sessionId !== props.activeSessionId) {
+    emit('activate-session', sessionId);
+  }
+};
+
+const closeSession = (event: MouseEvent, sessionId: string) => {
+  event.stopPropagation(); // 阻止事件冒泡到标签点击事件
+  emit('close-session', sessionId);
+};
+</script>
+
+<template>
+  <div class="terminal-tab-bar">
+    <ul class="tab-list">
+      <li
+        v-for="session in sessions"
+        :key="session.sessionId"
+        :class="['tab-item', { active: session.sessionId === activeSessionId }]"
+        @click="activateSession(session.sessionId)"
+        :title="session.connectionName"
+      >
+        <span class="tab-name">{{ session.connectionName }}</span>
+        <button class="close-tab-button" @click="closeSession($event, session.sessionId)" title="关闭标签页">
+          &times; <!-- 使用 HTML 实体 '×' -->
+        </button>
+      </li>
+    </ul>
+    <!-- 可以添加一个 "+" 按钮来打开新标签/连接 -->
+    <!-- <button class="add-tab-button">+</button> -->
+  </div>
+</template>
+
+<style scoped>
+.terminal-tab-bar {
+  display: flex;
+  background-color: #e0e0e0; /* 标签栏背景色 */
+  border-bottom: 1px solid #bdbdbd;
+  overflow-x: auto; /* 如果标签过多则允许水平滚动 */
+  white-space: nowrap;
+  padding: 0 0.5rem; /* 左右留出一点空间 */
+}
+
+.tab-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+.tab-item {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.8rem;
+  cursor: pointer;
+  border-right: 1px solid #bdbdbd;
+  background-color: #f0f0f0; /* 未激活标签背景 */
+  color: #616161; /* 未激活标签文字颜色 */
+  transition: background-color 0.2s ease, color 0.2s ease;
+  max-width: 200px; /* 限制标签最大宽度 */
+  position: relative; /* 为了关闭按钮定位 */
+}
+
+.tab-item:hover {
+  background-color: #e0e0e0; /* 悬停时背景 */
+}
+
+.tab-item.active {
+  background-color: #ffffff; /* 激活标签背景 */
+  color: #333333; /* 激活标签文字颜色 */
+  border-bottom: 1px solid #ffffff; /* 覆盖底部边框，使其看起来与下方内容区域连接 */
+  position: relative;
+  z-index: 1; /* 确保激活标签在上方 */
+}
+
+.tab-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 0.8rem; /* 与关闭按钮的间距 */
+}
+
+.close-tab-button {
+  background: none;
+  border: none;
+  color: #9e9e9e;
+  cursor: pointer;
+  font-size: 1.1em;
+  padding: 0 0.3rem;
+  line-height: 1;
+  border-radius: 50%;
+  margin-left: auto; /* 将按钮推到右侧 */
+}
+
+.close-tab-button:hover {
+  background-color: #bdbdbd;
+  color: #ffffff;
+}
+
+.tab-item.active .close-tab-button {
+    color: #757575; /* 激活标签上的关闭按钮颜色 */
+}
+.tab-item.active .close-tab-button:hover {
+    background-color: #e0e0e0;
+    color: #333333;
+}
+
+/* 可选：添加新标签按钮样式 */
+/*
+.add-tab-button {
+  background: none;
+  border: none;
+  padding: 0.5rem 0.8rem;
+  cursor: pointer;
+  font-size: 1.2em;
+  color: #616161;
+}
+.add-tab-button:hover {
+  background-color: #d0d0d0;
+}
+*/
+</style>
diff --git a/packages/frontend/src/components/WorkspaceConnectionList.vue b/packages/frontend/src/components/WorkspaceConnectionList.vue
index 66b54c4..255ff8a 100644
--- a/packages/frontend/src/components/WorkspaceConnectionList.vue
+++ b/packages/frontend/src/components/WorkspaceConnectionList.vue
@@ -7,7 +7,12 @@ import { useConnectionsStore, ConnectionInfo } from '../stores/connections.store
 import { useTagsStore, TagInfo } from '../stores/tags.store';
 
 // 定义事件
-const emit = defineEmits(['connect-request', 'request-add-connection', 'request-edit-connection']); // 添加新事件
+const emit = defineEmits([
+  'connect-request',        // 左键单击 - 请求激活或替换当前标签
+  'open-new-session',       // 中键单击 - 请求在新标签中打开
+  'request-add-connection', // 右键菜单 - 添加
+  'request-edit-connection' // 右键菜单 - 编辑
+]);
 
 const { t } = useI18n();
 // const router = useRouter(); // 不再需要
@@ -127,6 +132,12 @@ onMounted(() => {
   connectionsStore.fetchConnections();
   tagsStore.fetchTags();
 });
+
+// 处理中键点击（在新标签页打开）
+const handleOpenInNewTab = (connectionId: number) => {
+  emit('open-new-session', connectionId);
+  closeContextMenu(); // 如果右键菜单是打开的，也关闭它
+};
 </script>
 
 <template>
@@ -156,7 +167,9 @@ onMounted(() => {
             v-for="conn in group.connections"
             :key="conn.id"
             class="connection-item"
-            @click="handleConnect(conn.id)"
+            @click.left="handleConnect(conn.id)"
+            @click.middle.prevent="handleOpenInNewTab(conn.id)"
+            @auxclick.prevent="handleOpenInNewTab(conn.id)"
             @contextmenu.prevent="showContextMenu($event, conn)"
           >
             <i class="fas fa-server connection-icon"></i>
diff --git a/packages/frontend/src/composables/useFileUploader.ts b/packages/frontend/src/composables/useFileUploader.ts
index 676cbdc..535d09d 100644
--- a/packages/frontend/src/composables/useFileUploader.ts
+++ b/packages/frontend/src/composables/useFileUploader.ts
@@ -1,5 +1,5 @@
-import { ref, reactive, nextTick, onUnmounted, type Ref } from 'vue';
-import { useWebSocketConnection } from './useWebSocketConnection'; // 只导入 hook
+import { ref, reactive, nextTick, onUnmounted, readonly, type Ref } from 'vue'; // 再次修正导入，移除大写 Readonly
+import { createWebSocketConnectionManager } from './useWebSocketConnection'; // 导入工厂函数
 import { useI18n } from 'vue-i18n';
 import type { FileListItem } from '../types/sftp.types'; // 从 sftp 类型文件导入
 import type { UploadItem } from '../types/upload.types'; // 从 upload 类型文件导入
@@ -20,14 +20,16 @@ const joinPath = (base: string, name: string): string => {
     return `${base}/${name}`;
 };
 
-
 export function useFileUploader(
     currentPathRef: Ref<string>,
-    fileListRef: Ref<Readonly<FileListItem[]>>, // 传入 fileList 用于检查覆盖
-    refreshDirectory: () => void // 上传成功后刷新目录的回调函数
+    fileListRef: Readonly<Ref<readonly FileListItem[]>>, // 使用 Readonly 类型
+    refreshDirectory: () => void, // 上传成功后刷新目录的回调函数
+    sessionId: string,
+    dbConnectionId: string
 ) {
     const { t } = useI18n();
-    const { sendMessage, onMessage, isConnected } = useWebSocketConnection();
+    // 使用工厂函数创建WebSocket连接管理器，并传入t函数
+    const { sendMessage, onMessage, isConnected } = createWebSocketConnectionManager(sessionId, dbConnectionId, t);
 
     // 对 uploads 字典使用 reactive 以获得更好的深度响应性
     const uploads = reactive<Record<string, UploadItem>>({});
@@ -128,8 +130,8 @@ export function useFileUploader(
         const remotePath = joinPath(currentPathRef.value, file.name);
 
         // 使用传入的 fileListRef 检查是否覆盖
-        // 为 item 添加显式类型 FileListItem
-        if (fileListRef.value.some((item: FileListItem) => item.filename === file.name && !item.attrs.isDirectory)) {
+        // fileListRef.value 现在是 readonly FileListItem[]
+        if (fileListRef.value.some((item: FileListItem) => item.filename === file.name && !item.attrs.isDirectory)) { // 添加 item 类型注解
             if (!confirm(t('fileManager.prompts.confirmOverwrite', { name: file.name }))) {
                 console.log(`[文件上传模块] 用户取消了 ${file.name} 的上传`);
                 return; // 用户取消覆盖
diff --git a/packages/frontend/src/composables/useSftpActions.ts b/packages/frontend/src/composables/useSftpActions.ts
index 509731f..7c41106 100644
--- a/packages/frontend/src/composables/useSftpActions.ts
+++ b/packages/frontend/src/composables/useSftpActions.ts
@@ -1,43 +1,68 @@
-import { ref, readonly, type Ref, onUnmounted } from 'vue';
-import { useWebSocketConnection } from './useWebSocketConnection'; // 只导入 hook
-import { useI18n } from 'vue-i18n';
-// 确保从类型文件导入所有需要的类型
-import type { FileListItem, FileAttributes, EditorFileContent } from '../types/sftp.types';
-import type { WebSocketMessage, MessagePayload } from '../types/websocket.types'; // 从类型文件导入
+import { ref, readonly, type Ref, type ComputedRef } from 'vue'; // Removed onUnmounted, added ComputedRef
+import type { FileListItem, EditorFileContent } from '../types/sftp.types';
+import type { WebSocketMessage, MessagePayload, MessageHandler } from '../types/websocket.types'; // 从类型文件导入
 
-// --- 接口定义 (已移至 sftp.types.ts) ---
+/**
+ * @interface WebSocketDependencies
+ * @description Defines the necessary functions and state required from a WebSocket manager instance.
+ */
+export interface WebSocketDependencies {
+    sendMessage: (message: WebSocketMessage) => void;
+    onMessage: (type: string, handler: MessageHandler) => () => void;
+    isConnected: ComputedRef<boolean>;
+    isSftpReady: Readonly<Ref<boolean>>;
+}
 
-// Helper function (Copied from FileManager.vue)
-const generateRequestId = (): string => {
-    return `req-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-};
+// Helper function
+const generateRequestId = (): string => `req-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
 
-// Helper function (Copied from FileManager.vue)
+// Helper function
 const joinPath = (base: string, name: string): string => {
     if (base === '/') return `/${name}`;
-    // Handle cases where base might end with '/' already
-    if (base.endsWith('/')) return `${base}${name}`;
-    return `${base}/${name}`;
+    return base.endsWith('/') ? `${base}${name}` : `${base}/${name}`;
 };
 
-// Helper function (Copied from FileManager.vue)
+// Helper function
 const sortFiles = (a: FileListItem, b: FileListItem): number => {
     if (a.attrs.isDirectory && !b.attrs.isDirectory) return -1;
     if (!a.attrs.isDirectory && b.attrs.isDirectory) return 1;
     return a.filename.localeCompare(b.filename);
 };
 
-
-export function useSftpActions(currentPathRef: Ref<string>) {
-    const { t } = useI18n();
-    // Import isSftpReady along with other needed functions/state
-    const { sendMessage, onMessage, isConnected, isSftpReady } = useWebSocketConnection();
+/**
+ * 创建并管理单个 SFTP 会话的操作。
+ * 每个实例对应一个会话 (Session) 并依赖于一个 WebSocket 管理器实例。
+ *
+ * @param {string} sessionId - 此 SFTP 管理器关联的会话 ID (用于日志记录)。
+ * @param {Ref<string>} currentPathRef - 一个外部 ref，用于跟踪和更新当前目录路径。
+ * @param {WebSocketDependencies} wsDeps - 从对应的 WebSocket 管理器实例注入的依赖项。
+ * @param {Function} t - i18n 翻译函数，从父组件传入
+ * @returns 一个包含状态、方法和清理函数的 SFTP 操作管理器对象。
+ */
+export function createSftpActionsManager(
+    sessionId: string,
+    currentPathRef: Ref<string>,
+    wsDeps: WebSocketDependencies,
+    t: Function
+) {
+    const { sendMessage, onMessage, isConnected, isSftpReady } = wsDeps; // 使用注入的依赖
 
     const fileList = ref<FileListItem[]>([]);
     const isLoading = ref<boolean>(false);
     const error = ref<string | null>(null);
+    const instanceSessionId = sessionId; // 保存会话 ID 用于日志
 
-    // Function to clear the error state
+    // 用于存储注销函数的数组
+    const unregisterCallbacks: (() => void)[] = [];
+
+    // 清理函数，用于注销所有消息处理器
+    const cleanup = () => {
+        console.log(`[SFTP ${instanceSessionId}] Cleaning up message handlers.`);
+        unregisterCallbacks.forEach(cb => cb());
+        unregisterCallbacks.length = 0; // 清空数组
+    };
+
+    // 清除错误状态的函数
     const clearSftpError = () => {
         error.value = null;
     };
@@ -45,42 +70,37 @@ export function useSftpActions(currentPathRef: Ref<string>) {
     // --- Action Methods ---
 
     const loadDirectory = (path: string) => {
-        // Check if SFTP is ready first
         if (!isSftpReady.value) {
-            error.value = t('fileManager.errors.sftpNotReady'); // Use a specific error message
+            error.value = t('fileManager.errors.sftpNotReady');
             isLoading.value = false;
-            fileList.value = []; // Clear list if not ready
-            console.warn(`[useSftpActions] Attempted to load directory ${path} but SFTP is not ready.`);
+            fileList.value = [];
+            console.warn(`[SFTP ${instanceSessionId}] Attempted to load directory ${path} but SFTP is not ready.`);
             return;
         }
-        // Original isConnected check might still be relevant as a fallback, but isSftpReady implies isConnected
-        // if (!isConnected.value) { ... } // Can likely be removed if isSftpReady logic is robust
 
-        console.log(`[useSftpActions] Loading directory: ${path}`);
+        console.log(`[SFTP ${instanceSessionId}] Loading directory: ${path}`);
         isLoading.value = true;
         error.value = null;
-        currentPathRef.value = path; // Update the external ref passed in
+        currentPathRef.value = path; // 更新外部 ref
         const requestId = generateRequestId();
         sendMessage({ type: 'sftp:readdir', requestId: requestId, payload: { path } });
-        // Response handled by onSftpReaddirSuccess/Error
     };
 
     const createDirectory = (newDirName: string) => {
         if (!isSftpReady.value) {
             error.value = t('fileManager.errors.sftpNotReady');
-            console.warn(`[useSftpActions] Attempted to create directory ${newDirName} but SFTP is not ready.`);
+            console.warn(`[SFTP ${instanceSessionId}] Attempted to create directory ${newDirName} but SFTP is not ready.`);
             return;
         }
         const newFolderPath = joinPath(currentPathRef.value, newDirName);
         const requestId = generateRequestId();
         sendMessage({ type: 'sftp:mkdir', requestId: requestId, payload: { path: newFolderPath } });
-        // Response handled by onSftpMkdirSuccess/Error
     };
 
     const createFile = (newFileName: string) => {
         if (!isSftpReady.value) {
             error.value = t('fileManager.errors.sftpNotReady');
-            console.warn(`[useSftpActions] Attempted to create file ${newFileName} but SFTP is not ready.`);
+            console.warn(`[SFTP ${instanceSessionId}] Attempted to create file ${newFileName} but SFTP is not ready.`);
             return;
         }
         const newFilePath = joinPath(currentPathRef.value, newFileName);
@@ -88,15 +108,14 @@ export function useSftpActions(currentPathRef: Ref<string>) {
         sendMessage({
             type: 'sftp:writefile',
             requestId: requestId,
-            payload: { path: newFilePath, content: '', encoding: 'utf8' } // Create by writing empty content
+            payload: { path: newFilePath, content: '', encoding: 'utf8' }
         });
-        // Response handled by onSftpWriteFileSuccess/Error (will trigger refresh)
     };
 
     const deleteItems = (items: FileListItem[]) => {
         if (!isSftpReady.value) {
             error.value = t('fileManager.errors.sftpNotReady');
-            console.warn(`[useSftpActions] Attempted to delete items but SFTP is not ready.`);
+            console.warn(`[SFTP ${instanceSessionId}] Attempted to delete items but SFTP is not ready.`);
             return;
         }
         if (items.length === 0) return;
@@ -106,13 +125,12 @@ export function useSftpActions(currentPathRef: Ref<string>) {
             const requestId = generateRequestId();
             sendMessage({ type: actionType, requestId: requestId, payload: { path: targetPath } });
         });
-        // Responses handled by onSftpRmdirSuccess/Error, onSftpUnlinkSuccess/Error (will trigger refresh)
     };
 
     const renameItem = (item: FileListItem, newName: string) => {
         if (!isSftpReady.value) {
             error.value = t('fileManager.errors.sftpNotReady');
-            console.warn(`[useSftpActions] Attempted to rename item ${item.filename} but SFTP is not ready.`);
+            console.warn(`[SFTP ${instanceSessionId}] Attempted to rename item ${item.filename} but SFTP is not ready.`);
             return;
         }
         if (!newName || item.filename === newName) return;
@@ -120,82 +138,96 @@ export function useSftpActions(currentPathRef: Ref<string>) {
         const newPath = joinPath(currentPathRef.value, newName);
         const requestId = generateRequestId();
         sendMessage({ type: 'sftp:rename', requestId: requestId, payload: { oldPath, newPath } });
-        // Response handled by onSftpRenameSuccess/Error (will trigger refresh)
     };
 
     const changePermissions = (item: FileListItem, mode: number) => {
         if (!isSftpReady.value) {
             error.value = t('fileManager.errors.sftpNotReady');
-            console.warn(`[useSftpActions] Attempted to change permissions for ${item.filename} but SFTP is not ready.`);
+            console.warn(`[SFTP ${instanceSessionId}] Attempted to change permissions for ${item.filename} but SFTP is not ready.`);
             return;
         }
         const targetPath = joinPath(currentPathRef.value, item.filename);
         const requestId = generateRequestId();
         sendMessage({ type: 'sftp:chmod', requestId: requestId, payload: { path: targetPath, mode: mode } });
-        // Response handled by onSftpChmodSuccess/Error (will trigger refresh)
     };
 
-    // 注意: readFile 和 writeFile 的核心逻辑将由 useFileEditor 管理,
-    // 但 useSftpActions 可以提供基础的发送/接收机制（如果其他地方需要），
-    // 或者 useFileEditor 可以直接调用 sendMessage。暂时保留这些方法在这里。
-
-    const readFile = (path: string): Promise<EditorFileContent> => { // 使用导入的 EditorFileContent 类型
+    // readFile 和 writeFile 仍然返回 Promise，并在内部处理自己的消息监听器注销
+    const readFile = (path: string): Promise<EditorFileContent> => {
         return new Promise((resolve, reject) => {
             if (!isSftpReady.value) {
-                console.warn(`[useSftpActions] Attempted to read file ${path} but SFTP is not ready.`);
+                console.warn(`[SFTP ${instanceSessionId}] Attempted to read file ${path} but SFTP is not ready.`);
                 return reject(new Error(t('fileManager.errors.sftpNotReady')));
             }
             const requestId = generateRequestId();
+            let unregisterSuccess: (() => void) | null = null;
+            let unregisterError: (() => void) | null = null;
 
-            const unregisterSuccess = onMessage('sftp:readfile:success', (payload, message) => {
+            const timeoutId = setTimeout(() => {
+                unregisterSuccess?.();
+                unregisterError?.();
+                reject(new Error(t('fileManager.errors.readFileTimeout')));
+            }, 20000); // 20 秒超时
+
+            unregisterSuccess = onMessage('sftp:readfile:success', (payload: MessagePayload, message: WebSocketMessage) => {
+                // 确保 payload 是期望的类型
+                const successPayload = payload as { content: string; encoding: 'utf8' | 'base64' };
                 if (message.requestId === requestId && message.path === path) {
+                    clearTimeout(timeoutId);
                     unregisterSuccess?.();
                     unregisterError?.();
-                    resolve({ content: payload.content, encoding: payload.encoding });
+                    resolve({ content: successPayload.content, encoding: successPayload.encoding });
                 }
             });
 
-            const unregisterError = onMessage('sftp:readfile:error', (payload, message) => {
+            unregisterError = onMessage('sftp:readfile:error', (payload: MessagePayload, message: WebSocketMessage) => {
+                 // 确保 payload 是期望的类型 (string)
+                 const errorPayload = payload as string;
                 if (message.requestId === requestId && message.path === path) {
+                    clearTimeout(timeoutId);
                     unregisterSuccess?.();
                     unregisterError?.();
-                    reject(new Error(payload || 'Failed to read file'));
+                    reject(new Error(errorPayload || 'Failed to read file'));
                 }
             });
 
             sendMessage({ type: 'sftp:readfile', requestId: requestId, payload: { path } });
-
-            // Timeout for the request
-            setTimeout(() => {
-                unregisterSuccess?.();
-                unregisterError?.();
-                reject(new Error(t('fileManager.errors.readFileTimeout')));
-            }, 20000); // 20 second timeout
         });
     };
 
      const writeFile = (path: string, content: string): Promise<void> => {
         return new Promise((resolve, reject) => {
             if (!isSftpReady.value) {
-                 console.warn(`[useSftpActions] Attempted to write file ${path} but SFTP is not ready.`);
+                 console.warn(`[SFTP ${instanceSessionId}] Attempted to write file ${path} but SFTP is not ready.`);
                 return reject(new Error(t('fileManager.errors.sftpNotReady')));
             }
             const requestId = generateRequestId();
-            const encoding: 'utf8' | 'base64' = 'utf8'; // Assuming always sending utf8
+            const encoding: 'utf8' | 'base64' = 'utf8'; // 假设总是 utf8
+            let unregisterSuccess: (() => void) | null = null;
+            let unregisterError: (() => void) | null = null;
 
-            const unregisterSuccess = onMessage('sftp:writefile:success', (payload, message) => {
+            const timeoutId = setTimeout(() => {
+                unregisterSuccess?.();
+                unregisterError?.();
+                reject(new Error(t('fileManager.errors.saveTimeout')));
+            }, 20000); // 20 秒超时
+
+            unregisterSuccess = onMessage('sftp:writefile:success', (payload: MessagePayload, message: WebSocketMessage) => {
                 if (message.requestId === requestId && message.path === path) {
+                    clearTimeout(timeoutId);
                     unregisterSuccess?.();
                     unregisterError?.();
                     resolve();
                 }
             });
 
-            const unregisterError = onMessage('sftp:writefile:error', (payload, message) => {
+            unregisterError = onMessage('sftp:writefile:error', (payload: MessagePayload, message: WebSocketMessage) => {
+                // 确保 payload 是期望的类型 (string)
+                const errorPayload = payload as string;
                 if (message.requestId === requestId && message.path === path) {
+                    clearTimeout(timeoutId);
                     unregisterSuccess?.();
                     unregisterError?.();
-                    reject(new Error(payload || 'Failed to write file'));
+                    reject(new Error(errorPayload || 'Failed to write file'));
                 }
             });
 
@@ -204,112 +236,80 @@ export function useSftpActions(currentPathRef: Ref<string>) {
                 requestId: requestId,
                 payload: { path, content, encoding }
             });
-
-             // Timeout for the request
-             setTimeout(() => {
-                unregisterSuccess?.();
-                unregisterError?.();
-                reject(new Error(t('fileManager.errors.saveTimeout')));
-            }, 20000); // 20 second timeout
         });
     };
 
 
     // --- Message Handlers ---
 
-    const onSftpReaddirSuccess = (payload: FileListItem[], message: WebSocketMessage) => {
-        // Only update if the path matches the current path this composable instance is tracking
+    const onSftpReaddirSuccess = (payload: MessagePayload, message: WebSocketMessage) => {
+        // 类型断言，因为我们知道 readdir:success 的 payload 是 FileListItem[]
+        const fileListPayload = payload as FileListItem[];
         if (message.path === currentPathRef.value) {
-            console.log(`[useSftpActions] Received file list for ${message.path}`);
-            fileList.value = payload.sort(sortFiles);
+            console.log(`[SFTP ${instanceSessionId}] Received file list for ${message.path}`);
+            fileList.value = fileListPayload.sort(sortFiles);
             isLoading.value = false;
             error.value = null;
         } else {
-             console.log(`[useSftpActions] Ignoring readdir success for ${message.path} (current: ${currentPathRef.value})`);
+             console.log(`[SFTP ${instanceSessionId}] Ignoring readdir success for ${message.path} (current: ${currentPathRef.value})`);
         }
     };
 
-    const onSftpReaddirError = (payload: string, message: WebSocketMessage) => {
+    const onSftpReaddirError = (payload: MessagePayload, message: WebSocketMessage) => {
+        // 类型断言，因为我们知道 readdir:error 的 payload 是 string
+        const errorPayload = payload as string;
         if (message.path === currentPathRef.value) {
-            console.error(`[useSftpActions] Error loading directory ${message.path}:`, payload);
-            error.value = payload; // Set the error message
+            console.error(`[SFTP ${instanceSessionId}] Error loading directory ${message.path}:`, errorPayload);
+            error.value = errorPayload;
             isLoading.value = false;
-            // Do NOT clear fileList.value here, keep the previous list visible
         }
     };
 
-    // Generic handler for actions that should trigger a refresh on success
     const onActionSuccessRefresh = (payload: MessagePayload, message: WebSocketMessage) => {
-        // Simplify: Always refresh the current directory on any relevant success action.
-        // This avoids potential issues with path comparison logic.
-        console.log(`[useSftpActions] Action ${message.type} successful. Refreshing current directory: ${currentPathRef.value}`);
-        loadDirectory(currentPathRef.value); // Refresh the current directory
-        error.value = null; // Clear previous errors on success
+        console.log(`[SFTP ${instanceSessionId}] Action ${message.type} successful. Refreshing current directory: ${currentPathRef.value}`);
+        loadDirectory(currentPathRef.value);
+        error.value = null;
     };
 
-    // Generic handler for action errors
-    const onActionError = (payload: string, message: WebSocketMessage) => {
-        console.error(`[useSftpActions] Action ${message.type} failed:`, payload);
-        // Display a generic error or use specific messages based on type
+    const onActionError = (payload: MessagePayload, message: WebSocketMessage) => {
+        // 类型断言，因为我们知道这些错误的 payload 是 string
+        const errorPayload = payload as string;
+        console.error(`[SFTP ${instanceSessionId}] Action ${message.type} failed:`, errorPayload);
         const actionTypeMap: Record<string, string> = {
             'sftp:mkdir:error': t('fileManager.errors.createFolderFailed'),
             'sftp:rmdir:error': t('fileManager.errors.deleteFailed'),
             'sftp:unlink:error': t('fileManager.errors.deleteFailed'),
             'sftp:rename:error': t('fileManager.errors.renameFailed'),
             'sftp:chmod:error': t('fileManager.errors.chmodFailed'),
-            'sftp:writefile:error': t('fileManager.errors.saveFailed'), // Added writefile error
+            'sftp:writefile:error': t('fileManager.errors.saveFailed'),
         };
         const prefix = actionTypeMap[message.type] || t('fileManager.errors.generic');
-        error.value = `${prefix}: ${payload}`;
-        // Optionally stop loading indicator if one was active for this action
+        error.value = `${prefix}: ${errorPayload}`;
     };
 
-    // --- Register Handlers ---
-    const unregisterReaddirSuccess = onMessage('sftp:readdir:success', onSftpReaddirSuccess);
-    const unregisterReaddirError = onMessage('sftp:readdir:error', onSftpReaddirError);
+    // --- Register Handlers & Store Unregister Callbacks ---
+    unregisterCallbacks.push(onMessage('sftp:readdir:success', onSftpReaddirSuccess));
+    unregisterCallbacks.push(onMessage('sftp:readdir:error', onSftpReaddirError));
+    unregisterCallbacks.push(onMessage('sftp:mkdir:success', onActionSuccessRefresh));
+    unregisterCallbacks.push(onMessage('sftp:rmdir:success', onActionSuccessRefresh));
+    unregisterCallbacks.push(onMessage('sftp:unlink:success', onActionSuccessRefresh));
+    unregisterCallbacks.push(onMessage('sftp:rename:success', onActionSuccessRefresh));
+    unregisterCallbacks.push(onMessage('sftp:chmod:success', onActionSuccessRefresh));
+    unregisterCallbacks.push(onMessage('sftp:writefile:success', onActionSuccessRefresh));
+    unregisterCallbacks.push(onMessage('sftp:mkdir:error', onActionError));
+    unregisterCallbacks.push(onMessage('sftp:rmdir:error', onActionError));
+    unregisterCallbacks.push(onMessage('sftp:unlink:error', onActionError));
+    unregisterCallbacks.push(onMessage('sftp:rename:error', onActionError));
+    unregisterCallbacks.push(onMessage('sftp:chmod:error', onActionError));
+    unregisterCallbacks.push(onMessage('sftp:writefile:error', onActionError));
 
-    // Register generic handlers for actions that trigger refresh on success
-    const unregisterMkdirSuccess = onMessage('sftp:mkdir:success', onActionSuccessRefresh);
-    const unregisterRmdirSuccess = onMessage('sftp:rmdir:success', onActionSuccessRefresh);
-    const unregisterUnlinkSuccess = onMessage('sftp:unlink:success', onActionSuccessRefresh);
-    const unregisterRenameSuccess = onMessage('sftp:rename:success', onActionSuccessRefresh);
-    const unregisterChmodSuccess = onMessage('sftp:chmod:success', onActionSuccessRefresh);
-    const unregisterWritefileSuccess = onMessage('sftp:writefile:success', onActionSuccessRefresh); // Refresh on successful write too
-
-    // Register generic error handlers
-    const unregisterMkdirError = onMessage('sftp:mkdir:error', onActionError);
-    const unregisterRmdirError = onMessage('sftp:rmdir:error', onActionError);
-    const unregisterUnlinkError = onMessage('sftp:unlink:error', onActionError);
-    const unregisterRenameError = onMessage('sftp:rename:error', onActionError);
-    const unregisterChmodError = onMessage('sftp:chmod:error', onActionError);
-    const unregisterWritefileError = onMessage('sftp:writefile:error', onActionError); // Handle writefile error display
-
-    // Unregister handlers when the composable's scope is destroyed
-    onUnmounted(() => {
-        console.log('[useSftpActions] Unmounting and unregistering handlers.');
-        unregisterReaddirSuccess?.();
-        unregisterReaddirError?.();
-        unregisterMkdirSuccess?.();
-        unregisterRmdirSuccess?.();
-        unregisterUnlinkSuccess?.();
-        unregisterRenameSuccess?.();
-        unregisterChmodSuccess?.();
-        unregisterWritefileSuccess?.();
-        unregisterMkdirError?.();
-        unregisterRmdirError?.();
-        unregisterUnlinkError?.();
-        unregisterRenameError?.();
-        unregisterChmodError?.();
-        unregisterWritefileError?.();
-        // Note: readFile/writeFile promise handlers are unregistered within the promise logic
-    });
+    // 移除 onUnmounted 块
 
     return {
         // State
         fileList: readonly(fileList),
         isLoading: readonly(isLoading),
         error: readonly(error),
-        // currentPath: readonly(currentPath), // Path is managed via the passed ref
 
         // Methods
         loadDirectory,
@@ -318,9 +318,12 @@ export function useSftpActions(currentPathRef: Ref<string>) {
         deleteItems,
         renameItem,
         changePermissions,
-        readFile, // Expose if needed by editor composable
-        writeFile, // Expose if needed by editor composable
-        joinPath, // Expose helper if needed externally
-        clearSftpError, // Expose the clear error function
+        readFile,
+        writeFile,
+        joinPath, // 暴露辅助函数
+        clearSftpError,
+
+        // Cleanup function
+        cleanup,
     };
 }
diff --git a/packages/frontend/src/composables/useSshTerminal.ts b/packages/frontend/src/composables/useSshTerminal.ts
index 667e3c6..cfbd4fa 100644
--- a/packages/frontend/src/composables/useSshTerminal.ts
+++ b/packages/frontend/src/composables/useSshTerminal.ts
@@ -1,12 +1,25 @@
-import { ref, onUnmounted, type Ref } from 'vue';
-import { useWebSocketConnection } from './useWebSocketConnection'; // 只导入 hook 本身
-import { useI18n } from 'vue-i18n';
+import { ref, readonly, type Ref, ComputedRef } from 'vue'; // 修正导入，移除大写 Readonly
+// import { useWebSocketConnection } from './useWebSocketConnection'; // 移除全局导入
 import type { Terminal } from 'xterm';
-import type { WebSocketMessage, MessagePayload } from '../types/websocket.types'; // 从类型文件导入
+import type { WebSocketMessage, MessagePayload } from '../types/websocket.types';
 
-export function useSshTerminal() {
-    const { t } = useI18n();
-    const { sendMessage, onMessage, isConnected } = useWebSocketConnection();
+// 定义与 WebSocket 相关的依赖接口
+export interface SshTerminalDependencies {
+    sendMessage: (message: WebSocketMessage) => void;
+    onMessage: (type: string, handler: (payload: any, fullMessage?: WebSocketMessage) => void) => () => void;
+    isConnected: ComputedRef<boolean>;
+}
+
+/**
+ * 创建一个 SSH 终端管理器实例
+ * @param sessionId 会话唯一标识符
+ * @param wsDeps WebSocket 依赖对象
+ * @param t i18n 翻译函数，从父组件传入
+ * @returns SSH 终端管理器实例
+ */
+export function createSshTerminalManager(sessionId: string, wsDeps: SshTerminalDependencies, t: Function) {
+    // 使用依赖注入的 WebSocket 函数
+    const { sendMessage, onMessage, isConnected } = wsDeps;
 
     const terminalInstance = ref<Terminal | null>(null);
     const terminalOutputBuffer = ref<string[]>([]); // 缓冲 WebSocket 消息直到终端准备好
@@ -22,7 +35,7 @@ export function useSshTerminal() {
     // --- 终端事件处理 ---
 
     const handleTerminalReady = (term: Terminal) => {
-        console.log('[SSH终端模块] 终端实例已就绪。');
+        console.log(`[会话 ${sessionId}][SSH终端模块] 终端实例已就绪。`);
         terminalInstance.value = term;
         // 将缓冲区的输出写入终端
         terminalOutputBuffer.value.forEach(data => term.write(data));
@@ -32,31 +45,36 @@ export function useSshTerminal() {
     };
 
     const handleTerminalData = (data: string) => {
-        // console.debug('[SSH终端模块] 接收到终端输入:', data);
-        sendMessage({ type: 'ssh:input', payload: { data } });
+        // console.debug(`[会话 ${sessionId}][SSH终端模块] 接收到终端输入:`, data);
+        sendMessage({ type: 'ssh:input', sessionId, payload: { data } });
     };
 
     const handleTerminalResize = (dimensions: { cols: number; rows: number }) => {
-        console.log('[SSH终端模块] 发送终端大小调整:', dimensions);
-        sendMessage({ type: 'ssh:resize', payload: dimensions });
+        console.log(`[会话 ${sessionId}][SSH终端模块] 发送终端大小调整:`, dimensions);
+        sendMessage({ type: 'ssh:resize', sessionId, payload: dimensions });
     };
 
     // --- WebSocket 消息处理 ---
 
-    const handleSshOutput = (payload: MessagePayload, message: WebSocketMessage) => {
+    const handleSshOutput = (payload: MessagePayload, message?: WebSocketMessage) => {
+        // 检查消息是否属于此会话
+        if (message?.sessionId && message.sessionId !== sessionId) {
+            return; // 忽略不属于此会话的消息
+        }
+
         let outputData = payload;
         // 检查是否为 Base64 编码 (需要后端配合发送 encoding 字段)
-        if (message.encoding === 'base64' && typeof outputData === 'string') {
+        if (message?.encoding === 'base64' && typeof outputData === 'string') {
             try {
                 outputData = atob(outputData); // 在浏览器环境中使用 atob
             } catch (e) {
-                console.error('[SSH终端模块] Base64 解码失败:', e, '原始数据:', message.payload);
+                console.error(`[会话 ${sessionId}][SSH终端模块] Base64 解码失败:`, e, '原始数据:', message.payload);
                 outputData = `\r\n[解码错误: ${e}]\r\n`; // 在终端显示解码错误
             }
         }
         // 如果不是 base64 或解码失败，确保它是字符串
         else if (typeof outputData !== 'string') {
-             console.warn('[SSH终端模块] 收到非字符串 ssh:output payload:', outputData);
+             console.warn(`[会话 ${sessionId}][SSH终端模块] 收到非字符串 ssh:output payload:`, outputData);
              try {
                  outputData = JSON.stringify(outputData); // 尝试序列化
              } catch {
@@ -64,6 +82,19 @@ export function useSshTerminal() {
              }
         }
 
+        // 尝试过滤掉非标准的 OSC 184 序列
+        // 注意：这个正则表达式可能需要根据实际序列进行调整
+        // 它尝试匹配 \x1b]184;... 直到 \x1b\\ 或 \x07
+        const osc184Regex = /\x1b]184;[^\x1b\x07]*(\x1b\\|\x07)/g;
+        if (typeof outputData === 'string') {
+            const originalLength = outputData.length;
+            outputData = outputData.replace(osc184Regex, '');
+            if (outputData.length < originalLength) {
+                 console.warn(`[会话 ${sessionId}][SSH终端模块] 过滤掉 OSC 184 序列。`);
+            }
+        }
+
+
         if (terminalInstance.value) {
             terminalInstance.value.write(outputData);
         } else {
@@ -72,50 +103,80 @@ export function useSshTerminal() {
         }
     };
 
-    const handleSshConnected = () => {
-        console.log('[SSH终端模块] SSH 会话已连接。');
+    const handleSshConnected = (payload: MessagePayload, message?: WebSocketMessage) => {
+        // 检查消息是否属于此会话
+        if (message?.sessionId && message.sessionId !== sessionId) {
+            return; // 忽略不属于此会话的消息
+        }
+
+        console.log(`[会话 ${sessionId}][SSH终端模块] SSH 会话已连接。`);
         // 连接成功后聚焦终端
         terminalInstance.value?.focus();
         // 清空可能存在的旧缓冲（虽然理论上此时应该已经 ready 了）
         if (terminalOutputBuffer.value.length > 0) {
-             console.warn('[SSH终端模块] SSH 连接时仍有缓冲数据，正在写入...');
+             console.warn(`[会话 ${sessionId}][SSH终端模块] SSH 连接时仍有缓冲数据，正在写入...`);
              terminalOutputBuffer.value.forEach(data => terminalInstance.value?.write(data));
              terminalOutputBuffer.value = [];
         }
     };
 
-    const handleSshDisconnected = (payload: MessagePayload) => {
+    const handleSshDisconnected = (payload: MessagePayload, message?: WebSocketMessage) => {
+        // 检查消息是否属于此会话
+        if (message?.sessionId && message.sessionId !== sessionId) {
+            return; // 忽略不属于此会话的消息
+        }
+
         const reason = payload || t('workspace.terminal.unknownReason'); // 使用 i18n 获取未知原因文本
-        console.log('[SSH终端模块] SSH 会话已断开:', reason);
+        console.log(`[会话 ${sessionId}][SSH终端模块] SSH 会话已断开:`, reason);
         terminalInstance.value?.writeln(`\r\n\x1b[31m${getTerminalText('disconnectMsg', { reason })}\x1b[0m`);
         // 可以在这里添加其他清理逻辑，例如禁用输入
     };
 
-    const handleSshError = (payload: MessagePayload) => {
+    const handleSshError = (payload: MessagePayload, message?: WebSocketMessage) => {
+        // 检查消息是否属于此会话
+        if (message?.sessionId && message.sessionId !== sessionId) {
+            return; // 忽略不属于此会话的消息
+        }
+
         const errorMsg = payload || t('workspace.terminal.unknownSshError'); // 使用 i18n
-        console.error('[SSH终端模块] SSH 错误:', errorMsg);
+        console.error(`[会话 ${sessionId}][SSH终端模块] SSH 错误:`, errorMsg);
         terminalInstance.value?.writeln(`\r\n\x1b[31m${getTerminalText('genericErrorMsg', { message: errorMsg })}\x1b[0m`);
     };
 
-    const handleSshStatus = (payload: MessagePayload) => {
+    const handleSshStatus = (payload: MessagePayload, message?: WebSocketMessage) => {
+        // 检查消息是否属于此会话
+        if (message?.sessionId && message.sessionId !== sessionId) {
+            return; // 忽略不属于此会话的消息
+        }
+
         // 这个消息现在由 useWebSocketConnection 处理以更新全局状态栏消息
         // 这里可以保留日志或用于其他特定于终端的 UI 更新（如果需要）
         const statusKey = payload?.key || 'unknown';
         const statusParams = payload?.params || {};
-        console.log('[SSH终端模块] 收到 SSH 状态更新:', statusKey, statusParams);
+        console.log(`[会话 ${sessionId}][SSH终端模块] 收到 SSH 状态更新:`, statusKey, statusParams);
         // 可以在终端打印一些状态信息吗？
         // terminalInstance.value?.writeln(`\r\n\x1b[34m[状态: ${statusKey}]\x1b[0m`);
     };
 
-    const handleInfoMessage = (payload: MessagePayload) => {
-        console.log('[SSH终端模块] 收到后端信息:', payload);
+    const handleInfoMessage = (payload: MessagePayload, message?: WebSocketMessage) => {
+        // 检查消息是否属于此会话
+        if (message?.sessionId && message.sessionId !== sessionId) {
+            return; // 忽略不属于此会话的消息
+        }
+
+        console.log(`[会话 ${sessionId}][SSH终端模块] 收到后端信息:`, payload);
         terminalInstance.value?.writeln(`\r\n\x1b[34m${getTerminalText('infoPrefix')} ${payload}\x1b[0m`);
     };
 
-    const handleErrorMessage = (payload: MessagePayload) => {
+    const handleErrorMessage = (payload: MessagePayload, message?: WebSocketMessage) => {
+        // 检查消息是否属于此会话
+        if (message?.sessionId && message.sessionId !== sessionId) {
+            return; // 忽略不属于此会话的消息
+        }
+
         // 通用错误也可能需要显示在终端
         const errorMsg = payload || t('workspace.terminal.unknownGenericError'); // 使用 i18n
-        console.error('[SSH终端模块] 收到后端通用错误:', errorMsg);
+        console.error(`[会话 ${sessionId}][SSH终端模块] 收到后端通用错误:`, errorMsg);
         terminalInstance.value?.writeln(`\r\n\x1b[31m${getTerminalText('errorPrefix')} ${errorMsg}\x1b[0m`);
     };
 
@@ -131,30 +192,62 @@ export function useSshTerminal() {
         unregisterHandlers.push(onMessage('ssh:status', handleSshStatus));
         unregisterHandlers.push(onMessage('info', handleInfoMessage));
         unregisterHandlers.push(onMessage('error', handleErrorMessage)); // 也处理通用错误
-        console.log('[SSH终端模块] 已注册 SSH 相关消息处理器。');
+        console.log(`[会话 ${sessionId}][SSH终端模块] 已注册 SSH 相关消息处理器。`);
     };
 
     const unregisterAllSshHandlers = () => {
-        console.log('[SSH终端模块] 注销 SSH 相关消息处理器...');
+        console.log(`[会话 ${sessionId}][SSH终端模块] 注销 SSH 相关消息处理器...`);
         unregisterHandlers.forEach(unregister => unregister?.());
         unregisterHandlers.length = 0; // 清空数组
     };
 
-    // --- 清理 ---
-    onUnmounted(() => {
+    // 初始化时自动注册处理程序
+    registerSshHandlers();
+
+    // --- 清理函数 ---
+    const cleanup = () => {
         unregisterAllSshHandlers();
         // terminalInstance.value?.dispose(); // 终端实例的销毁由 TerminalComponent 负责
         terminalInstance.value = null;
-        console.log('[SSH终端模块] Composable 已卸载。');
-    });
+        console.log(`[会话 ${sessionId}][SSH终端模块] 已清理。`);
+    };
 
-    // --- 暴露给组件的接口 ---
+    // 返回工厂实例
     return {
-        terminalInstance, // 暴露终端实例 ref，以便组件可以访问（如果需要）
+        // 公共接口
         handleTerminalReady,
         handleTerminalData,
         handleTerminalResize,
-        registerSshHandlers, // 暴露注册函数，由父组件在连接后调用
-        unregisterAllSshHandlers, // 暴露注销函数，在断开或卸载时调用
+        cleanup
+    };
+}
+
+// 保留兼容旧代码的函数（将在完全迁移后移除）
+export function useSshTerminal(t: (key: string) => string) {
+    console.warn('⚠️ 使用已弃用的 useSshTerminal() 全局单例。请迁移到 createSshTerminalManager() 工厂函数。');
+    
+    const terminalInstance = ref<Terminal | null>(null);
+    
+    const handleTerminalReady = (term: Terminal) => {
+        console.log('[SSH终端模块][旧] 终端实例已就绪，但使用了已弃用的单例模式。');
+        terminalInstance.value = term;
+    };
+    
+    const handleTerminalData = (data: string) => {
+        console.warn('[SSH终端模块][旧] 收到终端数据，但使用了已弃用的单例模式，无法发送。');
+    };
+    
+    const handleTerminalResize = (dimensions: { cols: number; rows: number }) => {
+        console.warn('[SSH终端模块][旧] 收到终端大小调整，但使用了已弃用的单例模式，无法发送。');
+    };
+    
+    // 返回与旧接口兼容的空函数，以避免错误
+    return {
+        terminalInstance,
+        handleTerminalReady,
+        handleTerminalData,
+        handleTerminalResize,
+        registerSshHandlers: () => console.warn('[SSH终端模块][旧] 调用了已弃用的 registerSshHandlers'),
+        unregisterAllSshHandlers: () => console.warn('[SSH终端模块][旧] 调用了已弃用的 unregisterAllSshHandlers'),
     };
 }
diff --git a/packages/frontend/src/composables/useStatusMonitor.ts b/packages/frontend/src/composables/useStatusMonitor.ts
index 1c75ffd..a515181 100644
--- a/packages/frontend/src/composables/useStatusMonitor.ts
+++ b/packages/frontend/src/composables/useStatusMonitor.ts
@@ -1,34 +1,54 @@
-import { ref, readonly, onUnmounted } from 'vue';
-import { useWebSocketConnection } from './useWebSocketConnection'; // 只导入 hook
-import type { ServerStatus } from '../types/server.types'; // 从类型文件导入
-import type { WebSocketMessage, MessagePayload } from '../types/websocket.types'; // 从类型文件导入
+import { ref, readonly, watch, type Ref, ComputedRef } from 'vue'; // 修正导入，移除大写 Readonly, 添加 watch
+// import { useWebSocketConnection } from './useWebSocketConnection'; // 移除全局导入
+import type { ServerStatus } from '../types/server.types';
+import type { WebSocketMessage, MessagePayload } from '../types/websocket.types';
 
-// --- 接口定义 (已移至 server.types.ts) ---
+// 定义与 WebSocket 相关的依赖接口
+export interface StatusMonitorDependencies {
+    onMessage: (type: string, handler: (payload: any, fullMessage?: WebSocketMessage) => void) => () => void;
+    isConnected: ComputedRef<boolean>;
+}
 
-export function useStatusMonitor() {
-    const { onMessage, isConnected } = useWebSocketConnection();
+/**
+ * 创建一个状态监控管理器实例
+ * @param sessionId 会话唯一标识符
+ * @param wsDeps WebSocket 依赖对象
+ * @returns 状态监控管理器实例
+ */
+export function createStatusMonitorManager(sessionId: string, wsDeps: StatusMonitorDependencies) {
+    const { onMessage, isConnected } = wsDeps;
 
     const serverStatus = ref<ServerStatus | null>(null);
     const statusError = ref<string | null>(null); // 存储状态获取错误
 
     // --- WebSocket 消息处理 ---
-    const handleStatusUpdate = (payload: MessagePayload, message: WebSocketMessage) => {
-        // console.debug('[状态监控模块] 收到 status_update:', payload);
+    const handleStatusUpdate = (payload: MessagePayload, message?: WebSocketMessage) => {
+        // 检查消息是否属于此会话
+        if (message?.sessionId && message.sessionId !== sessionId) {
+            return; // 忽略不属于此会话的消息
+        }
+
+        // console.debug(`[会话 ${sessionId}][状态监控模块] 收到 status_update:`, JSON.stringify(payload)); // 添加日志
         if (payload && payload.status) {
             serverStatus.value = payload.status;
             statusError.value = null; // 收到有效状态时清除错误
         } else {
-            console.warn('[状态监控模块] 收到缺少 payload.status 的 status_update 消息');
+            console.warn(`[会话 ${sessionId}][状态监控模块] 收到缺少 payload.status 的 status_update 消息`);
             // 可以选择设置一个错误状态，表明数据格式不正确
             // statusError.value = '收到的状态数据格式无效';
         }
     };
 
     // 处理可能的后端状态错误消息 (如果后端会发送的话)
-    const handleStatusError = (payload: MessagePayload, message: WebSocketMessage) => {
-         console.error('[状态监控模块] 收到状态错误消息:', payload);
-         statusError.value = typeof payload === 'string' ? payload : '获取服务器状态时发生未知错误';
-         serverStatus.value = null; // 出错时清除状态数据
+    const handleStatusError = (payload: MessagePayload, message?: WebSocketMessage) => {
+        // 检查消息是否属于此会话
+        if (message?.sessionId && message.sessionId !== sessionId) {
+            return; // 忽略不属于此会话的消息
+        }
+
+        console.error(`[会话 ${sessionId}][状态监控模块] 收到状态错误消息:`, payload);
+        statusError.value = typeof payload === 'string' ? payload : '获取服务器状态时发生未知错误';
+        serverStatus.value = null; // 出错时清除状态数据
     };
 
     // --- 注册 WebSocket 消息处理器 ---
@@ -36,36 +56,81 @@ export function useStatusMonitor() {
     let unregisterError: (() => void) | null = null;
 
     const registerStatusHandlers = () => {
-        // 仅在连接时注册处理器
+        // 防止重复注册
+        if (unregisterUpdate || unregisterError) {
+            console.log(`[会话 ${sessionId}][状态监控模块] 处理器已注册，跳过。`);
+            return;
+        }
         if (isConnected.value) {
-            console.log('[状态监控模块] 注册状态消息处理器。');
+            console.log(`[会话 ${sessionId}][状态监控模块] 注册状态消息处理器。`);
             unregisterUpdate = onMessage('status_update', handleStatusUpdate);
-            // 假设后端可能发送 'status:error' 类型的特定错误
             unregisterError = onMessage('status:error', handleStatusError);
         } else {
-             console.warn('[状态监控模块] WebSocket 未连接，无法注册状态处理器。');
+            console.warn(`[会话 ${sessionId}][状态监控模块] WebSocket 未连接，无法注册状态处理器。`);
         }
     };
 
     const unregisterAllStatusHandlers = () => {
-        console.log('[状态监控模块] 注销状态消息处理器。');
-        unregisterUpdate?.();
-        unregisterError?.();
-        unregisterUpdate = null;
-        unregisterError = null;
+        if (unregisterUpdate || unregisterError) {
+            console.log(`[会话 ${sessionId}][状态监控模块] 注销状态消息处理器。`);
+            unregisterUpdate?.();
+            unregisterError?.();
+            unregisterUpdate = null;
+            unregisterError = null;
+        }
     };
 
-    // --- 清理 ---
-    onUnmounted(() => {
+    // 监听连接状态变化以自动注册/注销处理器
+    watch(isConnected, (newValue, oldValue) => {
+        console.log(`[会话 ${sessionId}][状态监控模块] 连接状态变化: ${oldValue} -> ${newValue}`);
+        if (newValue) {
+            registerStatusHandlers();
+            // 连接成功后，可以考虑请求一次初始状态（如果后端支持）
+            // sendMessage({ type: 'status:get', sessionId });
+        } else {
+            unregisterAllStatusHandlers();
+            // 连接断开时清除状态
+            serverStatus.value = null;
+            statusError.value = '连接已断开'; // 或者使用 i18n
+        }
+    }, { immediate: true }); // immediate: true 确保初始状态下也会执行一次
+
+    // --- 清理函数 ---
+    const cleanup = () => {
         unregisterAllStatusHandlers();
-        console.log('[状态监控模块] Composable 已卸载。');
-    });
+        console.log(`[会话 ${sessionId}][状态监控模块] 已清理。`);
+    };
 
     // --- 暴露接口 ---
     return {
         serverStatus: readonly(serverStatus), // 只读状态
         statusError: readonly(statusError),   // 只读错误状态
-        registerStatusHandlers,       // 暴露注册函数
-        unregisterAllStatusHandlers,  // 暴露注销函数
+        registerStatusHandlers,       // 暴露注册函数，以便在需要时可以重新注册
+        unregisterAllStatusHandlers,  // 暴露注销函数，以便在需要时可以手动注销
+        cleanup,                      // 暴露清理函数，在会话关闭时调用
+    };
+}
+
+// 保留兼容旧代码的函数（将在完全迁移后移除）
+export function useStatusMonitor() {
+    console.warn('⚠️ 使用已弃用的 useStatusMonitor() 全局单例。请迁移到 createStatusMonitorManager() 工厂函数。');
+    
+    const serverStatus = ref<ServerStatus | null>(null);
+    const statusError = ref<string | null>(null);
+    
+    const registerStatusHandlers = () => {
+        console.warn('[状态监控模块][旧] 调用了已弃用的 registerStatusHandlers');
+    };
+    
+    const unregisterAllStatusHandlers = () => {
+        console.warn('[状态监控模块][旧] 调用了已弃用的 unregisterAllStatusHandlers');
+    };
+    
+    // 返回与旧接口兼容的空对象，以避免错误
+    return {
+        serverStatus: readonly(serverStatus),
+        statusError: readonly(statusError),
+        registerStatusHandlers,
+        unregisterAllStatusHandlers,
     };
 }
diff --git a/packages/frontend/src/composables/useWebSocketConnection.ts b/packages/frontend/src/composables/useWebSocketConnection.ts
index cb4c35c..54caea7 100644
--- a/packages/frontend/src/composables/useWebSocketConnection.ts
+++ b/packages/frontend/src/composables/useWebSocketConnection.ts
@@ -1,215 +1,223 @@
-import { ref, shallowRef, onUnmounted, computed, type Ref, readonly } from 'vue';
-import { useI18n } from 'vue-i18n';
-// 从类型文件导入 WebSocket 相关类型
+import { ref, shallowRef, computed, readonly } from 'vue';
 import type { ConnectionStatus, MessagePayload, WebSocketMessage, MessageHandler } from '../types/websocket.types';
 
-// --- 类型定义 (已移至 websocket.types.ts) ---
-// export type ConnectionStatus = ...;
-// export type MessagePayload = ...;
-// export interface WebSocketMessage { ... }
-// export type MessageHandler = ...;
+/**
+ * 创建并管理单个 WebSocket 连接实例。
+ * 每个实例对应一个会话 (Session)。
+ *
+ * @param {string} sessionId - 此 WebSocket 连接关联的会话 ID (用于日志记录)。
+ * @param {string} dbConnectionId - 此 WebSocket 连接关联的数据库连接 ID (用于后端识别)。
+ * @param {Function} t - i18n 翻译函数，从父组件传入
+ * @returns 一个包含状态和方法的 WebSocket 连接管理器对象。
+ */
+export function createWebSocketConnectionManager(sessionId: string, dbConnectionId: string, t: Function) {
+    // --- Instance State ---
+    // 每个实例拥有独立的 WebSocket 对象、状态和消息处理器
+    const ws = shallowRef<WebSocket | null>(null); // WebSocket 实例
+    const connectionStatus = ref<ConnectionStatus>('disconnected'); // 连接状态
+    const statusMessage = ref<string>(''); // 状态描述文本
+    const isSftpReady = ref<boolean>(false); // SFTP 是否就绪
+    const messageHandlers = new Map<string, Set<MessageHandler>>(); // 此实例的消息处理器注册表
+    const instanceSessionId = sessionId; // 保存会话 ID 用于日志
+    const instanceDbConnectionId = dbConnectionId; // 保存数据库连接 ID
+    // --- End Instance State ---
 
-// --- Singleton State within the module scope ---
-// This ensures only one WebSocket connection and state is managed across the app.
-const ws = shallowRef<WebSocket | null>(null); // Use shallowRef for the WebSocket object itself
-const connectionStatus = ref<ConnectionStatus>('disconnected');
-const statusMessage = ref<string>('');
-const connectionIdForSession = ref<string | null>(null); // Store the connectionId used for the current session
-const isSftpReady = ref<boolean>(false); // Track SFTP readiness
-
-// Registry for message handlers
-const messageHandlers = new Map<string, Set<MessageHandler>>();
-// --- End Singleton State ---
-
-
-export function useWebSocketConnection() {
-    const { t } = useI18n(); // Get t function for status messages
-
-    // Helper to get status text safely
+    /**
+     * 安全地获取状态文本的辅助函数
+     * @param {string} statusKey - i18n 键名 (例如 'connectingWs')
+     * @param {Record<string, unknown>} [params] - i18n 插值参数
+     * @returns {string} 翻译后的文本或键名本身 (如果翻译失败)
+     */
     const getStatusText = (statusKey: string, params?: Record<string, unknown>): string => {
         try {
-            // Use a fallback key or message if translation is missing
             const translated = t(`workspace.status.${statusKey}`, params || {});
-            // Check if the key itself was returned (indicating missing translation)
             return translated === `workspace.status.${statusKey}` ? statusKey : translated;
         } catch (e) {
-            console.warn(`[i18n] Error getting translation for workspace.status.${statusKey}:`, e);
-            return statusKey; // Fallback to the key itself
+            console.warn(`[WebSocket ${instanceSessionId}] i18n 错误 (键: workspace.status.${statusKey}):`, e);
+            return statusKey;
         }
     };
 
-    // Function to dispatch a message to all registered handlers for its type
+    /**
+     * 将收到的消息分发给已注册的处理器
+     * @param {string} type - 消息类型
+     * @param {MessagePayload} payload - 消息负载
+     * @param {WebSocketMessage} fullMessage - 完整的消息对象
+     */
     const dispatchMessage = (type: string, payload: MessagePayload, fullMessage: WebSocketMessage) => {
         if (messageHandlers.has(type)) {
             messageHandlers.get(type)?.forEach(handler => {
                 try {
                     handler(payload, fullMessage);
                 } catch (e) {
-                    console.error(`[WebSocket] Error in message handler for type "${type}":`, e);
+                    console.error(`[WebSocket ${instanceSessionId}] 消息处理器错误 (类型: "${type}"):`, e);
                 }
             });
         }
     };
 
-
-    const connect = (url: string, connId: string) => {
-        // Prevent multiple connections or connection attempts
+    /**
+     * 建立 WebSocket 连接
+     * @param {string} url - WebSocket 服务器 URL
+     */
+    const connect = (url: string) => {
+        // 防止重复连接同一实例
         if (ws.value && (ws.value.readyState === WebSocket.OPEN || ws.value.readyState === WebSocket.CONNECTING)) {
-            // If it's the same connection ID and already open/connecting, do nothing
-            if (connectionIdForSession.value === connId) {
-                 console.warn(`[WebSocket] Connection for ${connId} already open or connecting.`);
-                 return;
-            }
-            // If different connection ID, close the old one first
-            console.log(`[WebSocket] Closing existing connection for ${connectionIdForSession.value} before connecting to ${connId}`);
-            disconnect(); // Ensure cleanup before new connection
+            console.warn(`[WebSocket ${instanceSessionId}] 连接已打开或正在连接中。`);
+            return;
         }
 
-        console.log(`[WebSocket] Attempting to connect to: ${url} for connection ${connId}`);
-        connectionIdForSession.value = connId;
+        console.log(`[WebSocket ${instanceSessionId}] 尝试连接到: ${url} (DB Conn ID: ${instanceDbConnectionId})`);
         statusMessage.value = getStatusText('connectingWs', { url });
         connectionStatus.value = 'connecting';
+        isSftpReady.value = false; // 重置 SFTP 状态
 
         try {
             ws.value = new WebSocket(url);
 
             ws.value.onopen = () => {
-                console.log('[WebSocket] Connection opened.');
+                console.log(`[WebSocket ${instanceSessionId}] 连接已打开。`);
                 statusMessage.value = getStatusText('wsConnected');
-                // Status remains 'connecting' until ssh:connected is received
-                // Send the initial connection message required by the backend
-                sendMessage({ type: 'ssh:connect', payload: { connectionId: connId } });
-                // Dispatch an internal event if needed
-                // dispatchMessage('internal:opened', {}, { type: 'internal:opened' });
+                // 状态保持 'connecting' 直到收到 ssh:connected
+                // 发送后端所需的初始连接消息，包含数据库连接 ID
+                sendMessage({ type: 'ssh:connect', payload: { connectionId: instanceDbConnectionId } });
+                dispatchMessage('internal:opened', {}, { type: 'internal:opened' }); // 触发内部打开事件
             };
 
             ws.value.onmessage = (event: MessageEvent) => {
                 try {
                     const message: WebSocketMessage = JSON.parse(event.data);
-                    // console.debug('[WebSocket] Received:', message.type); // Less verbose logging
+                    // console.debug(`[WebSocket ${instanceSessionId}] 收到:`, message.type);
 
-                    // --- Update Global Connection Status based on specific messages ---
+                    // --- 更新此实例的连接状态 ---
                     if (message.type === 'ssh:connected') {
                         if (connectionStatus.value !== 'connected') {
-                            console.log('[WebSocket] SSH session connected.');
+                            console.log(`[WebSocket ${instanceSessionId}] SSH 会话已连接。`);
                             connectionStatus.value = 'connected';
                             statusMessage.value = getStatusText('connected');
                         }
                     } else if (message.type === 'ssh:disconnected') {
-                         if (connectionStatus.value !== 'disconnected') {
-                            console.log('[WebSocket] SSH session disconnected.');
+                        if (connectionStatus.value !== 'disconnected') {
+                            console.log(`[WebSocket ${instanceSessionId}] SSH 会话已断开。`);
                             connectionStatus.value = 'disconnected';
-                            statusMessage.value = getStatusText('disconnected', { reason: message.payload || 'Unknown reason' });
-                         }
-                    } else if (message.type === 'ssh:error' || message.type === 'error') { // Handle generic backend errors too
+                            statusMessage.value = getStatusText('disconnected', { reason: message.payload || '未知原因' });
+                            isSftpReady.value = false; // SSH 断开，SFTP 也应不可用
+                        }
+                    } else if (message.type === 'ssh:error' || message.type === 'error') {
                         if (connectionStatus.value !== 'disconnected' && connectionStatus.value !== 'error') {
-                            console.error('[WebSocket] Received error message:', message.payload);
+                            console.error(`[WebSocket ${instanceSessionId}] 收到错误消息:`, message.payload);
                             connectionStatus.value = 'error';
-                            let errorMsg = message.payload || 'Unknown error';
+                            let errorMsg = message.payload || '未知错误';
                             if (typeof errorMsg === 'object' && errorMsg.message) errorMsg = errorMsg.message;
                             statusMessage.value = getStatusText('error', { message: errorMsg });
-                            isSftpReady.value = false; // Reset SFTP status on error
+                            isSftpReady.value = false;
                         }
                     } else if (message.type === 'sftp_ready') {
-                        console.log('[WebSocket] SFTP session ready.');
+                        console.log(`[WebSocket ${instanceSessionId}] SFTP 会话已就绪。`);
                         isSftpReady.value = true;
                     }
-                    // --- End Status Update ---
+                    // --- 状态更新结束 ---
 
-                    // Dispatch message to specific handlers
+                    // 分发消息给此实例的处理器
                     dispatchMessage(message.type, message.payload, message);
 
                 } catch (e) {
-                    console.error('[WebSocket] Error processing message:', e, 'Raw data:', event.data);
-                    // Optionally dispatch raw data if needed by some handler
-                    // dispatchMessage('internal:raw', event.data, { type: 'internal:raw' });
+                    console.error(`[WebSocket ${instanceSessionId}] 处理消息时出错:`, e, '原始数据:', event.data);
+                    dispatchMessage('internal:raw', event.data, { type: 'internal:raw' });
                 }
             };
 
             ws.value.onerror = (event) => {
-                console.error('[WebSocket] Connection error:', event);
-                if (connectionStatus.value !== 'disconnected') { // Avoid overwriting disconnect status
+                console.error(`[WebSocket ${instanceSessionId}] 连接错误:`, event);
+                if (connectionStatus.value !== 'disconnected') {
                     connectionStatus.value = 'error';
                     statusMessage.value = getStatusText('wsError');
                 }
                 dispatchMessage('internal:error', event, { type: 'internal:error' });
-                isSftpReady.value = false; // Reset SFTP status on WS error
-                ws.value = null; // Clean up on error
-                connectionIdForSession.value = null;
+                isSftpReady.value = false;
+                ws.value = null; // 清理实例
             };
 
             ws.value.onclose = (event) => {
-                console.log(`[WebSocket] Connection closed: Code=${event.code}, Reason=${event.reason}`);
-                // Update status only if not already handled by ssh:disconnected or error
+                console.log(`[WebSocket ${instanceSessionId}] 连接已关闭: Code=${event.code}, Reason=${event.reason}`);
                 if (connectionStatus.value !== 'disconnected' && connectionStatus.value !== 'error') {
                     connectionStatus.value = 'disconnected';
                     statusMessage.value = getStatusText('wsClosed', { code: event.code });
                 }
                 dispatchMessage('internal:closed', { code: event.code, reason: event.reason }, { type: 'internal:closed' });
-                isSftpReady.value = false; // Reset SFTP status on close
-                ws.value = null; // Clean up reference
-                connectionIdForSession.value = null;
-                // Optionally clear handlers on close? Depends on desired behavior.
-                // messageHandlers.clear();
+                isSftpReady.value = false;
+                ws.value = null; // 清理实例引用
+                // 不自动清除处理器，以便在重连时可能复用
             };
         } catch (err) {
-             console.error('[WebSocket] Failed to create WebSocket instance:', err);
+             console.error(`[WebSocket ${instanceSessionId}] 创建 WebSocket 实例失败:`, err);
              connectionStatus.value = 'error';
-             statusMessage.value = getStatusText('wsError'); // Or a more specific creation error
-             isSftpReady.value = false; // Reset SFTP status on creation error
+             statusMessage.value = getStatusText('wsError');
+             isSftpReady.value = false;
              ws.value = null;
-             connectionIdForSession.value = null;
         }
     };
 
+    /**
+     * 手动断开此 WebSocket 连接
+     */
     const disconnect = () => {
         if (ws.value) {
-            console.log('[WebSocket] Closing connection manually...');
-            // Set status immediately to prevent race conditions with onclose
+            console.log(`[WebSocket ${instanceSessionId}] 手动关闭连接...`);
             if (connectionStatus.value !== 'disconnected') {
                  connectionStatus.value = 'disconnected';
-                 statusMessage.value = getStatusText('disconnected', { reason: 'Manual disconnect' });
+                 statusMessage.value = getStatusText('disconnected', { reason: '手动断开' });
             }
-             ws.value.close(1000, 'Client initiated disconnect'); // Use standard code and reason
+             ws.value.close(1000, '客户端主动断开'); // 使用标准代码和原因
              ws.value = null;
-             connectionIdForSession.value = null;
-             isSftpReady.value = false; // Reset SFTP status on manual disconnect
-            // messageHandlers.clear(); // Clear handlers on manual disconnect
+             isSftpReady.value = false;
+             // 手动断开时可以考虑清除处理器，取决于是否需要重连逻辑
+             // messageHandlers.clear();
+        } else {
+             console.log(`[WebSocket ${instanceSessionId}] 连接已关闭或不存在，无需断开。`);
         }
     };
 
+    /**
+     * 发送 WebSocket 消息
+     * @param {WebSocketMessage} message - 要发送的消息对象
+     */
     const sendMessage = (message: WebSocketMessage) => {
         if (ws.value && ws.value.readyState === WebSocket.OPEN) {
             try {
                 const messageString = JSON.stringify(message);
-                // console.debug('[WebSocket] Sending:', message.type); // Less verbose
+                // console.debug(`[WebSocket ${instanceSessionId}] 发送:`, message.type);
                 ws.value.send(messageString);
             } catch (e) {
-                console.error('[WebSocket] Failed to stringify or send message:', e, message);
+                console.error(`[WebSocket ${instanceSessionId}] 序列化或发送消息失败:`, e, message);
             }
         } else {
-            console.warn(`[WebSocket] Cannot send message, connection not open. State: ${connectionStatus.value}, ReadyState: ${ws.value?.readyState}`);
+            console.warn(`[WebSocket ${instanceSessionId}] 无法发送消息，连接未打开。状态: ${connectionStatus.value}, ReadyState: ${ws.value?.readyState}`);
         }
     };
 
-    // Register a handler for a specific message type
-    const onMessage = (type: string, handler: MessageHandler) => {
+    /**
+     * 注册一个消息处理器
+     * @param {string} type - 要监听的消息类型
+     * @param {MessageHandler} handler - 处理函数
+     * @returns {Function} 一个用于注销此处理器的函数
+     */
+    const onMessage = (type: string, handler: MessageHandler): (() => void) => {
         if (!messageHandlers.has(type)) {
             messageHandlers.set(type, new Set());
         }
         const handlersSet = messageHandlers.get(type);
         if (handlersSet) {
              handlersSet.add(handler);
-             console.debug(`[WebSocket] Handler registered for type: ${type}`);
+             // console.debug(`[WebSocket ${instanceSessionId}] 已注册处理器: ${type}`);
         }
 
-
-        // Return an unregister function
+        // 返回注销函数
         return () => {
             const currentSet = messageHandlers.get(type);
             if (currentSet) {
                 currentSet.delete(handler);
-                console.debug(`[WebSocket] Handler unregistered for type: ${type}`);
+                // console.debug(`[WebSocket ${instanceSessionId}] 已注销处理器: ${type}`);
                 if (currentSet.size === 0) {
                     messageHandlers.delete(type);
                 }
@@ -217,20 +225,18 @@ export function useWebSocketConnection() {
         };
     };
 
-    // Cleanup logic: The singleton nature means disconnect should be called explicitly
-    // when the connection is no longer needed (e.g., when WorkspaceView unmounts).
-    // onUnmounted is generally tied to the component instance using the composable.
-    // If useWebSocketConnection is called in WorkspaceView's setup, its onUnmounted
-    // will trigger disconnect, which is the desired behavior.
+    // 注意：没有在此处使用 onUnmounted。
+    // disconnect 方法需要由外部调用者 (例如 WorkspaceView) 在会话关闭时显式调用。
 
+    // 返回此实例的状态和方法
     return {
-        // State (Exported as readonly refs where appropriate)
+        // 状态 (只读引用)
         isConnected: computed(() => connectionStatus.value === 'connected'),
-        isSftpReady: readonly(isSftpReady), // Expose SFTP readiness state
+        isSftpReady: readonly(isSftpReady),
         connectionStatus: readonly(connectionStatus),
         statusMessage: readonly(statusMessage),
 
-        // Methods
+        // 方法
         connect,
         disconnect,
         sendMessage,
diff --git a/packages/frontend/src/locales/en.json b/packages/frontend/src/locales/en.json
index 0919b35..9661623 100644
--- a/packages/frontend/src/locales/en.json
+++ b/packages/frontend/src/locales/en.json
@@ -3,6 +3,7 @@
   "nav": {
     "dashboard": "Dashboard",
     "connections": "Connections",
+    "terminal": "Terminal",
     "proxies": "Proxies",
     "login": "Login",
     "logout": "Logout",
@@ -149,7 +150,10 @@
     }
   },
   "workspace": {
-    "statusBar": "Status: {status} (Connection ID: {id})",
+    "noActiveSession": "No Active Session",
+    "selectConnectionPrompt": "Please select a connection",
+    "selectConnectionHint": "Select a connection from the left list, or click the 'Add New Connection' button to create a new one.",
+    "statusBar": "Status: {status} | Connection: {id}",
     "status": {
       "initializing": "Initializing...",
       "connectingWs": "Connecting to {url}...",
diff --git a/packages/frontend/src/locales/zh.json b/packages/frontend/src/locales/zh.json
index f15a5a8..02053a9 100644
--- a/packages/frontend/src/locales/zh.json
+++ b/packages/frontend/src/locales/zh.json
@@ -28,7 +28,7 @@
     "addConnection": "添加新连接",
     "loading": "正在加载连接...",
     "error": "加载连接失败: {error}",
-    "noConnections": "还没有任何连接。点击“添加新连接”来创建一个吧！",
+    "noConnections": "还没有任何连接。点击'添加新连接'来创建一个吧！",
     "table": {
       "name": "名称",
       "host": "主机",
@@ -108,7 +108,7 @@
     "addProxy": "添加新代理",
     "loading": "正在加载代理...",
     "error": "加载代理列表失败: {error}",
-    "noProxies": "还没有任何代理配置。点击“添加新代理”来创建一个吧！",
+    "noProxies": "还没有任何代理配置。点击'添加新代理'来创建一个吧！",
     "table": {
       "name": "名称",
       "type": "类型",
@@ -151,7 +151,8 @@
     }
   },
   "workspace": {
-    "statusBar": "状态: {status} (连接 ID: {id})",
+    "noActiveSession": "无活动会话",
+    "statusBar": "状态: {status} | 连接: {id}",
     "status": {
       "initializing": "正在初始化...",
       "connectingWs": "正在连接到 {url}...",
@@ -172,7 +173,7 @@
        "unknown": "未知状态"
      },
      "selectConnectionPrompt": "请选择一个连接",
-     "selectConnectionHint": "从左侧列表中选择一个连接以开始。",
+     "selectConnectionHint": "从左侧列表中选择一个连接，或点击'添加新连接'按钮创建一个新连接。",
      "terminal": {
       "infoPrefix": "[信息]",
       "errorPrefix": "[错误]",
@@ -257,7 +258,7 @@
     "addTag": "添加新标签",
     "loading": "正在加载标签...",
     "error": "加载标签列表失败: {error}",
-    "noTags": "还没有任何标签。点击“添加新标签”来创建一个吧！",
+    "noTags": "还没有任何标签。点击'添加新标签'来创建一个吧！",
     "table": {
       "name": "名称",
       "updatedAt": "更新时间",
diff --git a/packages/frontend/src/stores/session.store.ts b/packages/frontend/src/stores/session.store.ts
new file mode 100644
index 0000000..9837a1e
--- /dev/null
+++ b/packages/frontend/src/stores/session.store.ts
@@ -0,0 +1,252 @@
+import { ref, computed, shallowRef, type Ref } from 'vue'; // 导入 shallowRef
+import { defineStore } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { useConnectionsStore, type ConnectionInfo } from './connections.store';
+
+// 导入管理器工厂函数 (用于创建实例)
+import { createWebSocketConnectionManager } from '../composables/useWebSocketConnection';
+import { createSftpActionsManager, type WebSocketDependencies } from '../composables/useSftpActions';
+import { createSshTerminalManager, type SshTerminalDependencies } from '../composables/useSshTerminal';
+import { createStatusMonitorManager, type StatusMonitorDependencies } from '../composables/useStatusMonitor';
+
+// --- 辅助函数 ---
+function generateSessionId(): string {
+  return Date.now().toString(36) + Math.random().toString(36).substring(2);
+}
+
+// --- 类型定义 (导出以便其他模块使用) ---
+export type WsManagerInstance = ReturnType<typeof createWebSocketConnectionManager>;
+export type SftpManagerInstance = ReturnType<typeof createSftpActionsManager>;
+export type SshTerminalInstance = ReturnType<typeof createSshTerminalManager>;
+export type StatusMonitorInstance = ReturnType<typeof createStatusMonitorManager>;
+
+export interface SessionState {
+  sessionId: string;
+  connectionId: string; // 数据库中的连接 ID
+  connectionName: string; // 用于显示
+  wsManager: WsManagerInstance;
+  sftpManager: SftpManagerInstance;
+  terminalManager: SshTerminalInstance;
+  statusMonitorManager: StatusMonitorInstance;
+  currentSftpPath: Ref<string>; // SFTP 当前路径 (可能需要保留在此处或移至 SftpManager 内部)
+}
+
+export const useSessionStore = defineStore('session', () => {
+  // --- 依赖 ---
+  const { t } = useI18n();
+  const connectionsStore = useConnectionsStore();
+
+  // --- State ---
+  // 使用 shallowRef 避免深度响应性问题，保留管理器实例内部的响应性
+  const sessions = shallowRef<Map<string, SessionState>>(new Map());
+  const activeSessionId = ref<string | null>(null);
+
+  // --- Getters ---
+  const sessionTabs = computed(() => {
+    return Array.from(sessions.value.values()).map(session => ({
+      sessionId: session.sessionId,
+      connectionName: session.connectionName,
+    }));
+  });
+
+  const activeSession = computed((): SessionState | null => {
+    if (!activeSessionId.value) return null;
+    return sessions.value.get(activeSessionId.value) || null;
+  });
+
+  // --- Actions ---
+
+  /**
+   * 根据连接 ID 查找连接信息
+   */
+  const findConnectionInfo = (connectionId: number | string): ConnectionInfo | undefined => {
+    return connectionsStore.connections.find(c => c.id === Number(connectionId));
+  };
+
+  /**
+   * 打开一个新的会话标签页
+   */
+  const openNewSession = (connectionId: number | string) => {
+    console.log(`[SessionStore] 请求打开新会话: ${connectionId}`);
+    const connInfo = findConnectionInfo(connectionId);
+    if (!connInfo) {
+      console.error(`[SessionStore] 无法打开新会话：找不到 ID 为 ${connectionId} 的连接信息。`);
+      // TODO: 向用户显示错误
+      return;
+    }
+
+    const newSessionId = generateSessionId();
+    const dbConnId = String(connInfo.id);
+
+    // 1. 创建管理器实例 (从 WorkspaceView 迁移)
+    const wsManager = createWebSocketConnectionManager(newSessionId, dbConnId, t);
+    const currentSftpPath = ref<string>('.'); // SFTP 路径状态
+    const wsDeps: WebSocketDependencies = {
+        sendMessage: wsManager.sendMessage,
+        onMessage: wsManager.onMessage,
+        isConnected: wsManager.isConnected,
+        isSftpReady: wsManager.isSftpReady,
+    };
+    const sftpManager = createSftpActionsManager(newSessionId, currentSftpPath, wsDeps, t);
+    const sshTerminalDeps: SshTerminalDependencies = {
+        sendMessage: wsManager.sendMessage,
+        onMessage: wsManager.onMessage,
+        isConnected: wsManager.isConnected,
+    };
+    const terminalManager = createSshTerminalManager(newSessionId, sshTerminalDeps, t);
+    const statusMonitorDeps: StatusMonitorDependencies = {
+        onMessage: wsManager.onMessage,
+        isConnected: wsManager.isConnected,
+    };
+    const statusMonitorManager = createStatusMonitorManager(newSessionId, statusMonitorDeps);
+
+    // 2. 创建 SessionState 对象
+    const newSession: SessionState = {
+        sessionId: newSessionId,
+        connectionId: dbConnId,
+        connectionName: connInfo.name || connInfo.host,
+        wsManager: wsManager,
+        sftpManager: sftpManager,
+        terminalManager: terminalManager,
+        statusMonitorManager: statusMonitorManager,
+        currentSftpPath: currentSftpPath,
+    };
+
+    // 3. 添加到 Map 并激活 (需要创建 Map 的新实例以触发 shallowRef 更新)
+    const newSessionsMap = new Map(sessions.value);
+    newSessionsMap.set(newSessionId, newSession);
+    sessions.value = newSessionsMap; // 触发 shallowRef 更新
+    activeSessionId.value = newSessionId;
+    console.log(`[SessionStore] 已创建新会话实例: ${newSessionId} for connection ${dbConnId}`);
+
+    // 4. 启动 WebSocket 连接
+    const wsUrl = `ws://${window.location.hostname}:3001`; // TODO: 从配置获取 URL
+    wsManager.connect(wsUrl);
+    console.log(`[SessionStore] 已为会话 ${newSessionId} 启动 WebSocket 连接。`);
+  };
+
+  /**
+   * 激活指定 ID 的会话标签页
+   */
+  const activateSession = (sessionId: string) => {
+    if (sessions.value.has(sessionId)) {
+      if (activeSessionId.value !== sessionId) {
+        activeSessionId.value = sessionId;
+        console.log(`[SessionStore] 已激活会话: ${sessionId}`);
+        // TODO: 可能需要 nextTick 来聚焦终端?
+      } else {
+        console.log(`[SessionStore] 会话 ${sessionId} 已经是活动状态。`);
+      }
+    } else {
+      console.warn(`[SessionStore] 尝试激活不存在的会话 ID: ${sessionId}`);
+    }
+  };
+
+  /**
+   * 关闭指定 ID 的会话标签页
+   */
+  const closeSession = (sessionId: string) => {
+    console.log(`[SessionStore] 请求关闭会话 ID: ${sessionId}`);
+    const sessionToClose = sessions.value.get(sessionId);
+    if (!sessionToClose) {
+      console.warn(`[SessionStore] 尝试关闭不存在的会话 ID: ${sessionId}`);
+      return;
+    }
+
+    // 1. 调用实例上的清理和断开方法 (从 WorkspaceView 迁移)
+    sessionToClose.wsManager.disconnect();
+    console.log(`[SessionStore] 已为会话 ${sessionId} 调用 wsManager.disconnect()`);
+    sessionToClose.sftpManager.cleanup();
+    console.log(`[SessionStore] 已为会话 ${sessionId} 调用 sftpManager.cleanup()`);
+    sessionToClose.terminalManager.cleanup();
+    console.log(`[SessionStore] 已为会话 ${sessionId} 调用 terminalManager.cleanup()`);
+    sessionToClose.statusMonitorManager.cleanup();
+    console.log(`[SessionStore] 已为会话 ${sessionId} 调用 statusMonitorManager.cleanup()`);
+
+    // 2. 从 Map 中移除会话 (需要创建 Map 的新实例以触发 shallowRef 更新)
+    const newSessionsMap = new Map(sessions.value);
+    newSessionsMap.delete(sessionId);
+    sessions.value = newSessionsMap; // 触发 shallowRef 更新
+    console.log(`[SessionStore] 已从 Map 中移除会话: ${sessionId}`);
+
+    // 3. 切换活动标签页
+    if (activeSessionId.value === sessionId) {
+      const remainingSessions = Array.from(sessions.value.keys());
+      const nextActiveId = remainingSessions.length > 0 ? remainingSessions[remainingSessions.length - 1] : null;
+      activeSessionId.value = nextActiveId;
+      console.log(`[SessionStore] 关闭活动会话后，切换到: ${nextActiveId}`);
+    }
+  };
+
+  /**
+   * 处理连接列表的左键点击（连接或激活）
+   */
+  const handleConnectRequest = (connectionId: number | string) => {
+    const connIdStr = String(connectionId);
+    console.log(`[SessionStore] 处理连接请求: ${connIdStr}`);
+
+    let existingSessionId: string | null = null;
+    for (const [sessionId, session] of sessions.value.entries()) {
+      if (session.connectionId === connIdStr) {
+        existingSessionId = sessionId;
+        break;
+      }
+    }
+
+    if (existingSessionId) {
+      if (activeSessionId.value !== existingSessionId) {
+        console.log(`[SessionStore] 激活已存在的会话: ${existingSessionId}`);
+        activateSession(existingSessionId);
+      } else {
+        console.log(`[SessionStore] 点击的连接 ${connIdStr} 已在活动会话 ${existingSessionId} 中，无需操作。`);
+      }
+    } else {
+      // 当前行为：替换当前活动会话（如果存在）
+      if (activeSession.value) {
+        console.log(`[SessionStore] 替换当前会话 ${activeSessionId.value} 为新连接 ${connIdStr}`);
+        closeSession(activeSessionId.value!); // 确保 activeSessionId 存在
+        openNewSession(connIdStr);
+      } else {
+        console.log(`[SessionStore] 当前无活动会话，打开新会话: ${connIdStr}`);
+        openNewSession(connIdStr);
+      }
+      // 备选行为：总是打开新标签页？需要调整 openNewSession 逻辑
+    }
+  };
+
+  /**
+   * 处理连接列表的中键点击（总是打开新会话）
+   */
+  const handleOpenNewSession = (connectionId: number | string) => {
+    console.log(`[SessionStore] 处理打开新会话请求: ${connectionId}`);
+    openNewSession(connectionId);
+  };
+
+  /**
+   * 清理所有会话（例如在应用卸载时）
+   */
+  const cleanupAllSessions = () => {
+    console.log('[SessionStore] 清理所有会话...');
+    sessions.value.forEach((session, sessionId) => {
+      closeSession(sessionId); // 调用单个会话的关闭逻辑
+    });
+    sessions.value.clear();
+    activeSessionId.value = null;
+  };
+
+  return {
+    // State
+    sessions,
+    activeSessionId,
+    // Getters
+    sessionTabs,
+    activeSession,
+    // Actions
+    openNewSession,
+    activateSession,
+    closeSession,
+    handleConnectRequest,
+    handleOpenNewSession,
+    cleanupAllSessions,
+  };
+});
diff --git a/packages/frontend/src/types/websocket.types.ts b/packages/frontend/src/types/websocket.types.ts
index 449c03c..df9ce58 100644
--- a/packages/frontend/src/types/websocket.types.ts
+++ b/packages/frontend/src/types/websocket.types.ts
@@ -14,4 +14,4 @@ export interface WebSocketMessage {
 }
 
 // 消息处理器函数类型
-export type MessageHandler = (payload: MessagePayload, message: WebSocketMessage) => void;
+export type MessageHandler = (payload: MessagePayload, message: WebSocketMessage) => void; // 恢复 message 参数为必需
diff --git a/packages/frontend/src/views/WorkspaceView.vue b/packages/frontend/src/views/WorkspaceView.vue
index 85ef1ca..6c5c76f 100644
--- a/packages/frontend/src/views/WorkspaceView.vue
+++ b/packages/frontend/src/views/WorkspaceView.vue
@@ -1,203 +1,175 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, watch } from 'vue'; // 移除 computed, useRoute, useRouter
+import { onMounted, onBeforeUnmount, computed, ref } from 'vue'; // 移除不再需要的导入
 import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia'; // 导入 storeToRefs
 import TerminalComponent from '../components/Terminal.vue';
 import FileManagerComponent from '../components/FileManager.vue';
 import StatusMonitorComponent from '../components/StatusMonitor.vue';
 import WorkspaceConnectionListComponent from '../components/WorkspaceConnectionList.vue';
-import AddConnectionFormComponent from '../components/AddConnectionForm.vue'; // 引入表单组件
-import type { ConnectionInfo } from '../stores/connections.store'; // 引入 ConnectionInfo 类型
-import type { Terminal } from 'xterm';
-import { useWebSocketConnection } from '../composables/useWebSocketConnection';
-import { useSshTerminal } from '../composables/useSshTerminal'; // 导入 SSH 终端模块
-import { useStatusMonitor } from '../composables/useStatusMonitor';
-import type { ServerStatus } from '../types/server.types';
-// import { useConnectionsStore } from '../stores/connections.store'; // 不再直接在此处使用 store
-// import { storeToRefs } from 'pinia'; // 不再直接在此处使用 storeToRefs
-
-// --- 接口定义 ---
-// ServerStatus 现在从 types/server.types.ts 导入
+import AddConnectionFormComponent from '../components/AddConnectionForm.vue';
+import TerminalTabBar from '../components/TerminalTabBar.vue';
+import { useSessionStore } from '../stores/session.store'; // 导入 Session Store
+import type { ConnectionInfo } from '../stores/connections.store'; // 保持 ConnectionInfo 类型导入
+// 导入管理器实例类型，用于 FileManagerComponent 的 prop 类型断言
+import type { SftpManagerInstance } from '../stores/session.store';
 
+// --- Setup ---
 const { t } = useI18n();
+const sessionStore = useSessionStore();
 
-// --- 内部状态 ---
-const activeConnectionId = ref<string | null>(null);
-const showAddEditForm = ref(false); // 控制表单模态框显示
-const connectionToEdit = ref<ConnectionInfo | null>(null); // 要编辑的连接
-
-// --- 连接 Store (不再需要在此处直接引用 connections, loading, error) ---
-// const connectionsStore = useConnectionsStore();
-// const { connections, isLoading: connectionsLoading, error: connectionsError } = storeToRefs(connectionsStore);
-
-// --- WebSocket 连接模块 ---
-const {
-    isConnected,
-    connectionStatus, // Get reactive status from composable
-    statusMessage,    // Get reactive status message from composable
-    connect,
-    disconnect,
-    sendMessage,
-    onMessage,
-} = useWebSocketConnection();
-
-// --- SSH 终端模块 ---
-const {
-    // terminalInstance, // 不再需要直接从这里访问
-    handleTerminalReady,
-    handleTerminalData,
-    handleTerminalResize,
-    registerSshHandlers,
-    unregisterAllSshHandlers,
-} = useSshTerminal();
-
-// --- 状态监控模块 ---
-const {
-    serverStatus, // 从 composable 获取状态
-    statusError,  // 从 composable 获取错误
-    registerStatusHandlers, // 重命名以避免与 SSH 冲突
-    unregisterAllStatusHandlers, // 重命名以避免与 SSH 冲突
-} = useStatusMonitor();
+// --- 从 Store 获取响应式状态和 Getters ---
+// 使用 storeToRefs 保持响应性，或者直接在模板中使用 sessionStore.xxx
+const { sessionTabs, activeSessionId, activeSession } = storeToRefs(sessionStore);
 
+// --- UI 状态 (保持本地) ---
+const showAddEditForm = ref(false);
+const connectionToEdit = ref<ConnectionInfo | null>(null);
 
 // --- 生命周期钩子 ---
 onMounted(() => {
-  // 组件挂载时不自动连接，等待用户选择
-  // if (activeConnectionId.value) {
-  //   const wsUrl = `ws://${window.location.hostname}:3001`;
-  //   connect(wsUrl, activeConnectionId.value);
-    // 不在此处立即注册，等待 isConnected 变为 true
-    // registerSshHandlers();
-    // registerStatusHandlers();
-  // } else {
-    // console.log('[工作区视图] 没有活动的连接 ID。'); // 不再是错误
-  // }
+  console.log('[工作区视图] 组件已挂载。');
+  // 可以在这里执行一些初始化操作，如果需要的话
 });
 
 onBeforeUnmount(() => {
-  disconnect(); // 使用 WebSocket 模块的 disconnect
-  unregisterAllSshHandlers(); // 注销 SSH 终端处理器
-  unregisterAllStatusHandlers(); // 使用状态监控模块的注销函数
+  console.log('[工作区视图] 组件即将卸载，清理所有会话...');
+  sessionStore.cleanupAllSessions(); // 调用 store action 清理
 });
 
-// 监听 activeConnectionId 变化以处理连接切换
-watch(activeConnectionId, (newId, oldId) => {
-    console.log(`[工作区视图] 活动连接 ID 从 ${oldId} 更改为 ${newId}`);
-    // 断开旧连接 (如果存在)
-    if (oldId) {
-        disconnect(); // isConnected 会变为 false，触发清理
-    }
-    // 连接新的 WebSocket (如果新 ID 有效)
-    if (newId) {
-        console.log(`[工作区视图] 正在连接到 ID: ${newId}...`);
-        const wsUrl = `ws://${window.location.hostname}:3001`;
-        connect(wsUrl, newId); // connect 会处理 isConnected 状态
-    }
-    // 注意：处理器的注册/注销现在完全由 isConnected 的 watch 驱动
-});
+// --- 监听器 (如果需要监听 store 状态变化) ---
+// watch(activeSessionId, (newSessionId, oldSessionId) => {
+//     console.log(`[工作区视图] 活动会话 ID 从 ${oldSessionId} 更改为 ${newSessionId}`);
+//     if (newSessionId) {
+//         nextTick(() => {
+//             // TODO: 聚焦到活动会话的终端 (此逻辑可能移至 Store 或保留在此处)
+//             console.log(`[工作区视图] TODO: 聚焦会话 ${newSessionId} 的终端`);
+//         });
+//     }
+// });
 
-// 监听 WebSocket 连接状态变化来注册/注销处理器
-watch(isConnected, (connected) => {
-    if (connected) {
-        console.log('[工作区视图] WebSocket 已连接，注册 SSH 和状态处理器。');
-        registerSshHandlers();
-        registerStatusHandlers();
-    } else {
-        console.log('[工作区视图] WebSocket 已断开，注销 SSH 和状态处理器。');
-        // isConnected 变为 false 时，确保清理
-        unregisterAllSshHandlers();
-        unregisterAllStatusHandlers();
-        // 注意：disconnect() 应该在 connectionId 变化或组件卸载时调用，
-        // isConnected 变为 false 是结果，而不是原因。
-    }
-});
-
- // 辅助函数：获取终端消息文本 (已移至 useSshTerminal)
-
- // --- 连接列表点击处理 ---
- const handleConnectRequest = (id: number | string) => {
-   console.log(`[工作区视图] 请求激活连接 ID: ${id}`);
-   activeConnectionId.value = String(id);
- };
-
- // --- 表单模态框处理 ---
+// --- 本地方法 (仅处理 UI 状态) ---
  const handleRequestAddConnection = () => {
-   connectionToEdit.value = null; // 确保是添加模式
+   connectionToEdit.value = null;
    showAddEditForm.value = true;
  };
 
  const handleRequestEditConnection = (connection: ConnectionInfo) => {
-   connectionToEdit.value = connection; // 设置要编辑的连接
+   connectionToEdit.value = connection;
    showAddEditForm.value = true;
  };
 
  const handleFormClose = () => {
    showAddEditForm.value = false;
-   connectionToEdit.value = null; // 清除编辑状态
+   connectionToEdit.value = null;
  };
 
  const handleConnectionAdded = () => {
    console.log('[工作区视图] 连接已添加');
    handleFormClose();
-   // WorkspaceConnectionList 会自动从 store 更新
  };
 
  const handleConnectionUpdated = () => {
    console.log('[工作区视图] 连接已更新');
    handleFormClose();
-   // WorkspaceConnectionList 会自动从 store 更新
  };
 
+ // --- 移除本地会话管理函数 ---
+ // findConnectionInfo, openNewSession, activateSession, closeSession,
+ // handleConnectRequest, handleOpenNewSession 已移至 sessionStore
+
  </script>
 
 <template>
   <div class="workspace-view">
+    <!-- 标签栏: 绑定到 store 的状态和 actions -->
+    <TerminalTabBar
+        :sessions="sessionTabs"
+        :active-session-id="activeSessionId"
+        @activate-session="sessionStore.activateSession"
+        @close-session="sessionStore.closeSession"
+    />
+
     <div class="status-bar">
-      <!-- 使用 t 函数渲染状态栏文本, 显示 activeConnectionId -->
-      {{ t('workspace.statusBar', { status: statusMessage, id: activeConnectionId ?? 'N/A' }) }}
-      <!-- 状态颜色仍然通过 class 绑定 -->
-      <!-- 使用来自 useWebSocketConnection 的状态 -->
-      <span :class="`status-${connectionStatus}`"></span>
+      <!-- 状态栏显示活动会话的信息: 从 store getter 获取 -->
+      {{ t('workspace.statusBar', {
+           status: activeSession?.wsManager.statusMessage.value ?? t('workspace.status.disconnected'),
+           id: activeSession?.connectionId ?? t('workspace.noActiveSession')
+         })
+      }}
+      <!-- 从 activeSession getter 获取连接状态 -->
+      <span :class="`status-${activeSession?.wsManager.connectionStatus.value ?? 'disconnected'}`"></span>
     </div>
     <div class="main-content-area">
-      <!-- 新增左侧边栏 -->
+      <!-- 左侧边栏: 事件绑定到 store actions -->
       <div class="left-sidebar">
-        <!-- 监听新的事件 -->
         <WorkspaceConnectionListComponent
-          @connect-request="handleConnectRequest"
+          @connect-request="sessionStore.handleConnectRequest"
+          @open-new-session="sessionStore.handleOpenNewSession"
           @request-add-connection="handleRequestAddConnection"
           @request-edit-connection="handleRequestEditConnection"
         />
       </div>
-      <!-- 主工作区 (添加 v-if/v-else), 条件改为 activeConnectionId -->
-      <div v-if="activeConnectionId" class="main-workspace-area">
-        <div class="left-pane">
-          <div class="terminal-wrapper">
-            <!-- 将事件绑定到 useSshTerminal 的处理函数 -->
-          <TerminalComponent
-            @ready="handleTerminalReady"
-            @data="handleTerminalData"
-              @resize="handleTerminalResize"
-            />
-          </div>
-          <!-- 文件管理器窗格 -->
-          <div class="file-manager-wrapper">
-             <!-- Removed :ws prop. Communication will be handled via composables -->
-             <FileManagerComponent :is-connected="isConnected" />
-          </div>
+      <!-- 主工作区容器 -->
+      <div class="main-workspace-container">
+        <!-- 会话区域: 循环 store 中的 sessions Map -->
+        <!-- 注意: v-for sessions.values() 可能不是响应式的，因为 sessions 是 shallowRef -->
+        <!-- 改为 v-for session in sessionTabs，然后通过 session.sessionId 获取完整 session -->
+        <div
+          v-for="tabInfo in sessionTabs"
+          :key="tabInfo.sessionId"
+          v-show="tabInfo.sessionId === activeSessionId"
+          class="main-workspace-area-session"
+        >
+          <!-- 获取当前循环的完整 session 对象 -->
+          <template v-if="sessionStore.sessions.get(tabInfo.sessionId)">
+            <div class="left-pane">
+              <div class="terminal-wrapper" :data-session-id="tabInfo.sessionId">
+                <!-- TerminalComponent: 事件绑定到 activeSession 的管理器方法 -->
+                <TerminalComponent
+                  :key="tabInfo.sessionId"
+                  :session-id="tabInfo.sessionId"
+                  @ready="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalReady"
+                  @data="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalData"
+                  @resize="sessionStore.sessions.get(tabInfo.sessionId)?.terminalManager.handleTerminalResize"
+                />
+              </div>
+              <div class="file-manager-wrapper">
+                <!-- FileManagerComponent: Props 绑定到 activeSession 的管理器 -->
+                <!-- 确保传递正确的 wsDeps -->
+                <FileManagerComponent
+                  :key="tabInfo.sessionId"
+                  :session-id="tabInfo.sessionId"
+                  :db-connection-id="sessionStore.sessions.get(tabInfo.sessionId)!.connectionId"
+                  :sftp-manager="sessionStore.sessions.get(tabInfo.sessionId)!.sftpManager"
+                  :ws-deps="{
+                    sendMessage: sessionStore.sessions.get(tabInfo.sessionId)!.wsManager.sendMessage,
+                    onMessage: sessionStore.sessions.get(tabInfo.sessionId)!.wsManager.onMessage,
+                    isConnected: sessionStore.sessions.get(tabInfo.sessionId)!.wsManager.isConnected,
+                    isSftpReady: sessionStore.sessions.get(tabInfo.sessionId)!.wsManager.isSftpReady
+                  }"
+                />
+              </div>
+            </div>
+            <div class="status-monitor-wrapper">
+              <!-- StatusMonitorComponent: Props 绑定到 activeSession 的管理器状态 -->
+              <StatusMonitorComponent
+                :key="tabInfo.sessionId"
+                :session-id="tabInfo.sessionId"
+                :server-status="(sessionStore.sessions.get(tabInfo.sessionId)?.statusMonitorManager.serverStatus.value) ?? null"
+                :status-error="(sessionStore.sessions.get(tabInfo.sessionId)?.statusMonitorManager.statusError.value) ?? null"
+              />
+            </div>
+          </template>
         </div>
-        <!-- 状态监控窗格 -->
-        <div class="status-monitor-wrapper">
-          <StatusMonitorComponent :status-data="serverStatus" :error="statusError" />
+        <!-- 占位符 -->
+        <div v-if="!activeSessionId" class="main-workspace-area placeholder">
+          <h2>{{ t('workspace.selectConnectionPrompt') }}</h2>
+          <p>{{ t('workspace.selectConnectionHint') }}</p>
         </div>
       </div>
-      <!-- 当没有 connectionId 时显示提示 -->
-      <div v-else class="main-workspace-area placeholder">
-        <h2>{{ t('workspace.selectConnectionPrompt') }}</h2>
-        <p>{{ t('workspace.selectConnectionHint') }}</p>
-      </div>
     </div>
 
-    <!-- 添加/编辑连接表单模态框 -->
+    <!-- 添加/编辑连接表单模态框 (保持不变) -->
     <AddConnectionFormComponent
       v-if="showAddEditForm"
       :connection-to-edit="connectionToEdit"
@@ -212,8 +184,7 @@ watch(isConnected, (connected) => {
 .workspace-view {
   display: flex;
   flex-direction: column;
-  /* 调整高度计算以适应可能的 header/footer/status-bar */
-  height: calc(100vh - 60px - 30px - 2rem); /* 假设 header 60px, footer 30px, padding 2rem */
+  height: calc(100vh - 60px - 30px - 60px - 2rem); /* 调整以适应布局 */
   overflow: hidden;
 }
 
@@ -232,83 +203,85 @@ watch(isConnected, (connected) => {
 
 .main-content-area {
     display: flex;
-    flex-grow: 1; /* Take remaining vertical space */
+    flex-grow: 1;
     overflow: hidden;
-    /* 新增样式 */
-    border-top: 1px solid #ccc; /* Add a top border for separation */
+    border-top: 1px solid #ccc;
 }
 
-/* 新增左侧边栏样式 */
 .left-sidebar {
-    width: 250px; /* 示例宽度 */
-    min-width: 200px; /* 最小宽度 */
+    width: 250px;
+    min-width: 200px;
     height: 100%;
     border-right: 2px solid #ccc;
-    overflow-y: auto; /* 如果列表过长则允许滚动 */
+    overflow-y: auto;
     display: flex;
     flex-direction: column;
 }
 .left-sidebar > * {
-    flex-grow: 1; /* 让 WorkspaceConnectionList 填充 */
+    flex-grow: 1;
 }
 
-
-/* 主工作区容器 */
-.main-workspace-area {
-    flex-grow: 1; /* 占据剩余空间 */
+.main-workspace-container {
+    flex-grow: 1;
+    position: relative;
+    overflow: hidden;
     display: flex;
+}
+
+.main-workspace-area-session {
+    width: 100%;
     height: 100%;
+    display: flex;
     overflow: hidden;
 }
 
 .left-pane {
     display: flex;
     flex-direction: column;
-    /* width: 80%; */ /* 不再固定宽度，改为 flex */
-    flex-grow: 1; /* 占据主工作区大部分空间 */
+    flex-grow: 1;
     height: 100%;
-    min-width: 300px; /* 保证终端和文件管理器有最小宽度 */
+    min-width: 300px;
 }
 
 .terminal-wrapper {
-  height: 60%; /* 示例：终端占 60% 高度 */
-  background-color: #1e1e1e; /* 终端背景色 */
-  overflow: hidden; /* 内部滚动由 xterm 处理 */
-  display: flex; /* Ensure TerminalComponent fills this wrapper */
+  height: 60%;
+  background-color: #1e1e1e;
+  overflow: hidden;
+  display: flex;
   flex-direction: column;
 }
 .terminal-wrapper > * {
-    flex-grow: 1; /* Make TerminalComponent fill the wrapper */
+    flex-grow: 1;
 }
 
-
 .file-manager-wrapper {
-    height: 40%; /* 示例：文件管理器占 40% 高度 */
-    border-top: 2px solid #ccc; /* Add top border */
-    overflow: hidden; /* 防止自身滚动 */
-    display: flex; /* Ensure FileManagerComponent fills this wrapper */
+    height: 40%;
+    border-top: 2px solid #ccc;
+    overflow: hidden;
+    display: flex;
     flex-direction: column;
 }
 .file-manager-wrapper > * {
-    flex-grow: 1; /* Make FileManagerComponent fill the wrapper */
+    flex-grow: 1;
 }
 
 .status-monitor-wrapper {
-    /* width: 20%; */ /* 不再固定宽度，改为 flex-basis */
-    flex-basis: 250px; /* 示例基础宽度 */
-    min-width: 200px; /* 最小宽度 */
+    flex-basis: 250px;
+    min-width: 200px;
     height: 100%;
     border-left: 2px solid #ccc;
     overflow: hidden;
-    display: flex; /* Ensure StatusMonitorComponent fills this wrapper */
+    display: flex;
     flex-direction: column;
 }
 .status-monitor-wrapper > * {
-    flex-grow: 1; /* Make StatusMonitorComponent fill the wrapper */
+    flex-grow: 1;
 }
 
-/* 新增：占位符样式 */
 .main-workspace-area.placeholder {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -316,7 +289,7 @@ watch(isConnected, (connected) => {
     text-align: center;
     color: #6c757d;
     padding: 2rem;
-    background-color: #f8f9fa; /* Match sidebar background */
+    background-color: #f8f9fa;
 }
 .main-workspace-area.placeholder h2 {
     margin-bottom: 0.5rem;