update

packages/frontend/src/components/DockerManager.vue

@@ -0,0 +1,467 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch, computed } from 'vue';
+// import apiClient from '../utils/apiClient'; // Removed apiClient
+import { useI18n } from 'vue-i18n';
+import { useSessionStore } from '../stores/session.store'; // Import session store
+import { storeToRefs } from 'pinia';
+
+const { t } = useI18n();
+const sessionStore = useSessionStore();
+const { activeSession } = storeToRefs(sessionStore); // Get reactive active session
+
+// --- Interfaces (Keep these) ---
+interface PortInfo {
+  IP?: string;
+  PrivatePort: number;
+  PublicPort?: number;
+  Type: 'tcp' | 'udp' | string;
+}
+
+interface DockerContainer {
+  id: string; // <--- Changed from Id to id
+  Names: string[];
+  Image: string;
+  ImageID: string;
+  Command: string;
+  Created: number;
+  State: 'created' | 'restarting' | 'running' | 'removing' | 'paused' | 'exited' | 'dead' | string;
+  Status: string;
+  Ports: PortInfo[];
+  Labels: Record<string, string>;
+}
+
+// --- State ---
+const containers = ref<DockerContainer[]>([]);
+const isLoading = ref(false);
+const error = ref<string | null>(null);
+const isDockerAvailable = ref(true); // This will now reflect remote docker availability
+let refreshInterval: ReturnType<typeof setInterval> | null = null;
+let wsUnsubscribeHooks: (() => void)[] = []; // To store unsubscribe functions
+
+// --- Computed ---
+const currentSessionId = computed(() => activeSession.value?.sessionId);
+// Add computed property for SSH connection status
+const sshConnectionStatus = computed(() => activeSession.value?.wsManager.connectionStatus.value ?? 'disconnected');
+
+// --- Methods ---
+
+// Clear existing WebSocket listeners
+const clearWsListeners = () => {
+  wsUnsubscribeHooks.forEach(unsub => unsub());
+  wsUnsubscribeHooks = [];
+};
+
+// Setup WebSocket listeners for the current active session
+const setupWsListeners = () => {
+  clearWsListeners(); // Clear previous listeners first
+  if (!activeSession.value) return;
+
+  const wsManager = activeSession.value.wsManager;
+
+  // Listener for Docker status updates
+  const unsubStatus = wsManager.onMessage('docker:status:update', (payload) => {
+    console.log('[DockerManager] Received docker:status:update', payload);
+    isLoading.value = false; // Stop loading indicator
+    if (payload && typeof payload.available === 'boolean') {
+      isDockerAvailable.value = payload.available;
+      if (payload.available && Array.isArray(payload.containers)) {
+        containers.value = payload.containers;
+        error.value = null;
+      } else {
+        containers.value = [];
+        error.value = null; // Clear error if Docker just unavailable
+        // Stop interval if Docker becomes unavailable remotely
+        if (refreshInterval) {
+            clearInterval(refreshInterval);
+            refreshInterval = null;
+            console.log('[DockerManager] Stopped refresh interval due to remote Docker unavailability.');
+        }
+      }
+    } else {
+        // Handle invalid payload
+        isDockerAvailable.value = false;
+        containers.value = [];
+        error.value = t('dockerManager.error.invalidResponse');
+        if (refreshInterval) clearInterval(refreshInterval);
+        refreshInterval = null;
+    }
+  });
+
+  // Listener for Docker status fetch errors
+  const unsubStatusError = wsManager.onMessage('docker:status:error', (payload) => {
+      console.error('[DockerManager] Received docker:status:error', payload);
+      isLoading.value = false;
+      error.value = payload?.message || t('dockerManager.error.fetchFailed');
+      isDockerAvailable.value = false; // Assume unavailable on error
+      containers.value = [];
+      if (refreshInterval) clearInterval(refreshInterval); // Stop interval on error
+      refreshInterval = null;
+  });
+
+  // Listener for Docker command execution errors (optional, could use notifications)
+  const unsubCommandError = wsManager.onMessage('docker:command:error', (payload) => {
+      console.error('[DockerManager] Received docker:command:error', payload);
+      // Display error to user (e.g., using a notification system)
+      alert(`${t('dockerManager.error.commandFailed', { command: payload?.command || '?' })}: ${payload?.message || 'Unknown error'}`);
+  });
+
+  // --- NEW: Listener for backend requesting a status update ---
+  const unsubRequestUpdate = wsManager.onMessage('request_docker_status_update', () => {
+      console.log('[DockerManager] Received request_docker_status_update from backend.');
+      // Debounce or add slight delay? Maybe not needed if backend delay is sufficient.
+      requestDockerStatus(); // Trigger a status refresh immediately
+  });
+
+  wsUnsubscribeHooks.push(unsubStatus, unsubStatusError, unsubCommandError, unsubRequestUpdate); // Add new unsubscribe hook
+};
+
+
+// Request Docker status via WebSocket - NOW CHECKS SSH STATUS
+const requestDockerStatus = () => {
+  // Only request if SSH is connected
+  if (sshConnectionStatus.value !== 'connected') {
+    console.log(`[DockerManager] SSH not connected (status: ${sshConnectionStatus.value}), skipping Docker status request.`);
+    // No need to set loading=false here, as it should only be set true when connected
+    return;
+  }
+   if (!activeSession.value) { // Should not happen if ssh is connected, but for safety
+       console.warn('[DockerManager] requestDockerStatus called without active session.');
+       return;
+   }
+
+  console.log(`[DockerManager] Requesting Docker status for session ${activeSession.value.sessionId}`);
+  isLoading.value = true; // Show loading indicator
+  error.value = null; // Clear previous error
+  activeSession.value.wsManager.sendMessage({ type: 'docker:get_status' });
+};
+
+// Send command for a specific container via WebSocket
+const sendDockerCommand = (containerId: string, command: 'start' | 'stop' | 'restart' | 'remove') => {
+   // Check SSH status first
+   if (sshConnectionStatus.value !== 'connected') {
+       console.warn('[DockerManager] Cannot send command, SSH not connected.');
+       alert(t('dockerManager.error.sshNotConnected')); // Inform user
+       return;
+   }
+   if (!activeSession.value) { // Safety check
+       console.warn('[DockerManager] Cannot send command, no active session.');
+       return;
+   }
+   if (!isDockerAvailable.value) {
+      console.warn('[DockerManager] Cannot send command, remote Docker is not available.');
+      alert(t('dockerManager.notAvailable'));
+      return;
+   }
+
+  console.log(`[DockerManager] Sending command '${command}' for container ${containerId} via session ${activeSession.value.sessionId}`);
+  activeSession.value.wsManager.sendMessage({
+    type: 'docker:command',
+    payload: { containerId, command }
+  });
+  // Optionally trigger a status refresh sooner after a command
+  // setTimeout(requestDockerStatus, 500); // e.g., refresh after 0.5s
+
+  // --- 添加日志，检查传入的 containerId ---
+  console.log(`[DockerManager] Preparing to send command. containerId: "${containerId}" (Type: ${typeof containerId}), command: "${command}"`);
+  // --- 结束日志 ---
+
+  console.log(`[DockerManager] Sending command '${command}' for container ${containerId} via session ${activeSession.value.sessionId}`);
+  activeSession.value.wsManager.sendMessage({
+    type: 'docker:command',
+    payload: { containerId, command }
+  });
+};
+
+// --- Lifecycle and Watchers ---
+
+// Watch for changes in the active session OR SSH connection status
+watch([currentSessionId, sshConnectionStatus], ([newSessionId, newSshStatus], [oldSessionId, oldSshStatus]) => {
+  console.log(`[DockerManager] Watch triggered. Session: ${oldSessionId}=>${newSessionId}, SSH Status: ${oldSshStatus}=>${newSshStatus}`);
+
+  // --- Reset state on session change or SSH disconnect/error ---
+  if (newSessionId !== oldSessionId || (newSessionId && (newSshStatus === 'disconnected' || newSshStatus === 'error'))) {
+      console.log('[DockerManager] Resetting state due to session change or SSH disconnect/error.');
+      containers.value = [];
+      isLoading.value = false;
+      error.value = null;
+      isDockerAvailable.value = true; // Assume available until fetch attempt
+
+      if (refreshInterval) {
+          clearInterval(refreshInterval);
+          refreshInterval = null;
+          console.log('[DockerManager] Cleared refresh interval.');
+      }
+      clearWsListeners(); // Clear listeners on disconnect or session change
+  }
+
+  // --- Setup listeners and fetch data when session is active AND SSH is connected ---
+  if (newSessionId && newSshStatus === 'connected') {
+      // Only setup listeners/fetch if we weren't already connected in this session
+      if (oldSshStatus !== 'connected' || newSessionId !== oldSessionId) {
+          console.log(`[DockerManager] Session ${newSessionId} connected. Setting up listeners and fetching initial status.`);
+          setupWsListeners();
+          requestDockerStatus(); // Fetch initial status now that SSH is connected
+
+          // Start interval only when SSH is connected
+          if (!refreshInterval) {
+              refreshInterval = setInterval(requestDockerStatus, 1000); // Check status every second
+              console.log('[DockerManager] Refresh interval started.');
+          }
+      }
+  } else if (newSessionId && newSshStatus === 'connecting') { // <--- Removed 'initializing' check
+       // If connecting, ensure loading indicator is potentially active, but don't fetch yet
+       isLoading.value = true; // Show loading as SSH connects
+       error.value = null; // Clear previous errors
+       containers.value = []; // Clear old containers
+       isDockerAvailable.value = false; // Docker not available until SSH connects
+       console.log('[DockerManager] SSH is connecting, waiting...');
+  } else {
+      // Handle cases like no active session (newSessionId is null)
+      isLoading.value = false; // Ensure loading is off if no session
+      console.log('[DockerManager] No active session or SSH not connected.');
+  }
+
+}, { immediate: true, deep: true }); // immediate: true to run on initial mount, deep might be needed for status object?
+
+
+onUnmounted(() => {
+  console.log('[DockerManager] Component unmounted.');
+  clearWsListeners(); // Clean up listeners
+  if (refreshInterval) {
+    clearInterval(refreshInterval);
+    refreshInterval = null;
+    console.log('[DockerManager] Refresh interval cleared on unmount.');
+  }
+});
+
+</script>
+
+<template>
+  <div class="docker-manager pane-content">
+     <!-- Case 1: No active session -->
+     <div v-if="!currentSessionId" class="unavailable-placeholder">
+        <i class="fas fa-plug"></i>
+        <p>{{ t('dockerManager.error.noActiveSession') }}</p>
+        <small>{{ t('dockerManager.error.connectFirst') }}</small>
+    </div>
+    <!-- Case 2: Active session, SSH connecting -->
+    <div v-else-if="sshConnectionStatus === 'connecting'" class="loading-placeholder"> <!-- <--- Removed 'initializing' check -->
+        <i class="fas fa-spinner fa-spin"></i>
+        <p>{{ t('dockerManager.waitingForSsh') }}</p>
+        <small>{{ activeSession?.wsManager.statusMessage.value || '...' }}</small>
+     </div>
+     <!-- Case 3: Active session, SSH disconnected -->
+      <div v-else-if="sshConnectionStatus === 'disconnected'" class="unavailable-placeholder">
+         <i class="fas fa-unlink"></i>
+         <p>{{ t('dockerManager.error.sshDisconnected') }}</p>
+         <small>{{ activeSession?.wsManager.statusMessage.value || '...' }}</small>
+      </div>
+     <!-- Case 4: Active session, SSH error -->
+      <div v-else-if="sshConnectionStatus === 'error'" class="error-placeholder">
+         <i class="fas fa-exclamation-circle error-icon"></i>
+         <p>{{ t('dockerManager.error.sshError') }}</p>
+         <small>{{ activeSession?.wsManager.statusMessage.value || 'Unknown SSH error' }}</small>
+      </div>
+     <!-- Case 5: Active session, SSH connected, Docker loading -->
+    <div v-else-if="isLoading && containers.length === 0" class="loading-placeholder">
+        <i class="fas fa-spinner fa-spin"></i> {{ t('dockerManager.loading') }}
+    </div>
+     <!-- Case 6: Active session, SSH connected, Docker unavailable -->
+    <div v-else-if="!isDockerAvailable" class="unavailable-placeholder">
+        <i class="fab fa-docker error-icon"></i>
+        <p>{{ t('dockerManager.notAvailable') }}</p>
+        <small>{{ t('dockerManager.installHintRemote') }}</small> <!-- Use a remote-specific hint -->
+    </div>
+     <!-- Case 7: Active session, SSH connected, Fetch error -->
+     <div v-else-if="error" class="error-placeholder">
+        <i class="fas fa-exclamation-triangle error-icon"></i>
+        <p>{{ t('dockerManager.error.fetchFailed') }}</p>
+        <small>{{ error }}</small>
+     </div>
+     <!-- Case 8: Active session, SSH connected, Docker available, show list -->
+    <div v-else class="container-list">
+      <div v-if="containers.length === 0 && !isLoading" class="empty-placeholder">
+        {{ t('dockerManager.noContainers') }}
+      </div>
+      <table v-else>
+        <thead>
+          <tr>
+            <th>{{ t('dockerManager.header.name') }}</th>
+            <th>{{ t('dockerManager.header.image') }}</th>
+            <th>{{ t('dockerManager.header.status') }}</th>
+            <th>{{ t('dockerManager.header.ports') }}</th>
+            <th>{{ t('dockerManager.header.actions') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- Key change: Use container.id -->
+          <tr v-for="container in containers" :key="container.id">
+            <td>{{ container.Names?.join(', ') || 'N/A' }}</td>
+            <td>{{ container.Image }}</td>
+            <td>
+                <span :class="['status-badge', `status-${container.State?.toLowerCase()}`]">
+                    {{ container.Status }}
+                </span>
+            </td>
+            <!-- Corrected Port mapping display logic -->
+            <td>{{ container.Ports?.map(p => `${p.IP ? p.IP + ':' : ''}${p.PublicPort ? p.PublicPort + '->' : ''}${p.PrivatePort}/${p.Type}`).join(', ') || 'N/A' }}</td>
+            <td class="action-buttons">
+              <!-- Pass container.id instead of container.Id -->
+              <button @click="sendDockerCommand(container.id, 'start')" :title="t('dockerManager.action.start')" class="action-btn start" :disabled="container.State === 'running'">
+                <i class="fas fa-play"></i>
+              </button>
+              <button @click="sendDockerCommand(container.id, 'stop')" :title="t('dockerManager.action.stop')" class="action-btn stop" :disabled="container.State !== 'running'">
+                 <i class="fas fa-stop"></i>
+              </button>
+              <button @click="sendDockerCommand(container.id, 'restart')" :title="t('dockerManager.action.restart')" class="action-btn restart" :disabled="container.State !== 'running'">
+                 <i class="fas fa-sync-alt"></i>
+              </button>
+               <button @click="sendDockerCommand(container.id, 'remove')" :title="t('dockerManager.action.remove')" class="action-btn remove" :disabled="container.State === 'running'">
+                 <i class="fas fa-trash-alt"></i>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Styles remain largely the same */
+.docker-manager {
+  padding: var(--base-padding, 1rem);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  background-color: var(--app-bg-color);
+  color: var(--text-color);
+}
+
+.loading-placeholder,
+.error-placeholder,
+.unavailable-placeholder,
+.empty-placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-grow: 1;
+  color: var(--text-color-secondary);
+  height: 100%;
+}
+.unavailable-placeholder i:first-child, .loading-placeholder i:first-child { /* Target the icon */
+    font-size: 2.5rem;
+    margin-bottom: 0.75rem;
+}
+.unavailable-placeholder p, .loading-placeholder p {
+    margin-top: 0.5rem;
+    margin-bottom: 0.3rem;
+    font-weight: 500;
+}
+.unavailable-placeholder small, .loading-placeholder small {
+    font-size: 0.8em;
+    max-width: 80%;
+    color: var(--text-color-disabled); /* Lighter color for subtext */
+}
+
+
+.error-placeholder p {
+    margin-top: 0.5rem;
+    margin-bottom: 0.3rem;
+    font-weight: 500;
+}
+.error-placeholder small {
+    font-size: 0.8em;
+    max-width: 80%;
+}
+
+.error-icon {
+    font-size: 2rem;
+    color: var(--color-danger, #dc3545);
+    margin-bottom: 0.5rem;
+}
+.unavailable-placeholder .error-icon { /* Style for docker icon when unavailable */
+     color: var(--text-color-secondary);
+}
+
+
+.container-list {
+  flex-grow: 1;
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9em;
+}
+
+th, td {
+  padding: 0.6rem 0.8rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-color-light, #eee);
+  white-space: nowrap;
+}
+td:first-child, th:first-child {
+    white-space: normal;
+}
+
+
+th {
+  background-color: var(--header-bg-color);
+  font-weight: 600;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+tbody tr:hover {
+  background-color: var(--hover-bg-color, #f5f5f5);
+}
+
+.status-badge {
+    padding: 0.2em 0.6em;
+    border-radius: 10px;
+    font-size: 0.8em;
+    font-weight: 500;
+    color: #fff;
+    background-color: var(--text-color-secondary);
+}
+
+.status-running { background-color: var(--color-success, #28a745); }
+.status-exited { background-color: var(--color-danger, #dc3545); }
+.status-paused { background-color: var(--color-warning, #ffc107); color: #333; }
+.status-restarting { background-color: var(--color-info, #17a2b8); }
+.status-created { background-color: var(--text-color-secondary); }
+
+
+.action-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.action-btn {
+  background: none;
+  border: none;
+  color: var(--text-color-secondary);
+  cursor: pointer;
+  padding: 0.3rem;
+  font-size: 1rem;
+  transition: color 0.2s ease;
+}
+.action-btn[disabled] {
+    color: var(--text-color-disabled);
+    cursor: not-allowed;
+}
+.action-btn:not([disabled]):hover {
+  color: var(--text-color);
+}
+.action-btn.start:not([disabled]):hover { color: var(--color-success, #28a745); }
+.action-btn.stop:not([disabled]):hover { color: var(--color-warning, #ffc107); }
+.action-btn.restart:not([disabled]):hover { color: var(--color-info, #17a2b8); }
+.action-btn.remove:not([disabled]):hover { color: var(--color-danger, #dc3545); }
+
+</style>

packages/frontend/src/components/LayoutRenderer.vue

@@ -72,6 +72,7 @@ const componentMap: Record<PaneName, Component> = {
   statusMonitor: defineAsyncComponent(() => import('./StatusMonitor.vue')),
   commandHistory: defineAsyncComponent(() => import('../views/CommandHistoryView.vue')),
   quickCommands: defineAsyncComponent(() => import('../views/QuickCommandsView.vue')),
+  dockerManager: defineAsyncComponent(() => import('./DockerManager.vue')), // <--- 添加 dockerManager 映射
 };
 
 // --- Computed ---
@@ -179,9 +180,17 @@ const componentProps = computed(() => {
          class: 'pane-content',
          onExecuteCommand: (command: string) => emit('sendCommand', command), // 复用 sendCommand 事件
        };
-    default:
-      return { class: 'pane-content' };
-  }
+   case 'dockerManager':
+     // DockerManager 可能不需要 session 信息，但需要转发事件
+     return {
+       class: 'pane-content',
+       // 假设 DockerManager 会发出 'docker-command' 事件
+       // onDockerCommand: (payload: { containerId: string; command: 'up' | 'down' | 'restart' | 'stop' }) => emit('dockerCommand', payload),
+       // 暂时不添加事件转发，等组件实现后再确定
+     };
+   default:
+     return { class: 'pane-content' };
+ }
 });
 
 // --- Methods ---

packages/frontend/src/locales/en.json

@@ -781,5 +781,38 @@
       "commandInput": "Enter command...",
       "terminalSearch": "Search terminal..."
     }
+  },
+  "dockerManager": {
+    "loading": "Loading Docker Containers...",
+    "notAvailable": "Docker Not Available on Remote Host",
+    "installHint": "Please ensure Docker is installed and running on the remote host.",
+    "installHintRemote": "Please ensure Docker is installed and running on the remote host.",
+    "error": {
+      "fetchFailed": "Failed to fetch remote container status",
+      "commandFailed": "Failed to execute remote command '{command}'",
+      "invalidResponse": "Received invalid response from server",
+      "noActiveSession": "No active SSH session.",
+      "connectFirst": "Please connect to an SSH session first.",
+      "sshDisconnected": "SSH session disconnected.",
+      "sshError": "SSH Connection Error",
+      "sshNotConnected": "SSH session is not connected."
+    },
+    "noContainers": "No running or stopped containers found on remote host.",
+    "header": {
+      "name": "Name",
+      "image": "Image",
+      "status": "Status",
+      "ports": "Ports",
+      "actions": "Actions"
+    },
+    "action": {
+      "up": "Start/Up",
+      "down": "Remove/Down",
+      "restart": "Restart",
+      "stop": "Stop",
+      "start": "Start",
+      "remove": "Remove"
+    },
+    "waitingForSsh": "Waiting for SSH connection..."
   }
 }

packages/frontend/src/locales/zh.json

@@ -781,5 +781,38 @@
       "commandInput": "输入命令...",
       "terminalSearch": "搜索终端..."
     }
+  },
+  "dockerManager": {
+    "loading": "正在加载 Docker 容器...",
+    "notAvailable": "远程主机 Docker 不可用",
+    "installHint": "请确保远程主机上已安装并运行 Docker。",
+    "installHintRemote": "请确保远程主机上已安装并运行 Docker。",
+    "error": {
+      "fetchFailed": "获取远程容器状态失败",
+      "commandFailed": "执行远程命令 '{command}' 失败",
+      "invalidResponse": "收到无效的服务器响应",
+      "noActiveSession": "无活动的 SSH 会话。",
+      "connectFirst": "请先连接到一个 SSH 会话。",
+      "sshDisconnected": "SSH 会话已断开。",
+      "sshError": "SSH 连接错误",
+      "sshNotConnected": "SSH 会话未连接。"
+    },
+    "noContainers": "在远程主机上未找到正在运行或已停止的容器。",
+    "header": {
+      "name": "名称",
+      "image": "镜像",
+      "status": "状态",
+      "ports": "端口",
+      "actions": "操作"
+    },
+    "action": {
+      "up": "启动/Up",
+      "down": "移除/Down",
+      "restart": "重启",
+      "stop": "停止",
+      "start": "启动",
+      "remove": "移除"
+    },
+    "waitingForSsh": "等待 SSH 连接..."
   }
 }

packages/frontend/src/stores/layout.store.ts

@@ -4,7 +4,7 @@ import { ref, computed, watch, type Ref, type ComputedRef } from 'vue';
 import apiClient from '../utils/apiClient'; // 使用统一的 apiClient
 
 // 定义所有可用面板的名称
-export type PaneName = 'connections' | 'terminal' | 'commandBar' | 'fileManager' | 'editor' | 'statusMonitor' | 'commandHistory' | 'quickCommands';
+export type PaneName = 'connections' | 'terminal' | 'commandBar' | 'fileManager' | 'editor' | 'statusMonitor' | 'commandHistory' | 'quickCommands' | 'dockerManager';
 
 // 定义布局节点接口
 export interface LayoutNode {
@@ -92,7 +92,8 @@ export const useLayoutStore = defineStore('layout', () => {
   // 存储所有理论上可用的面板名称
   const allPossiblePanes: Ref<PaneName[]> = ref([
     'connections', 'terminal', 'commandBar', 'fileManager',
-    'editor', 'statusMonitor', 'commandHistory', 'quickCommands'
+    'editor', 'statusMonitor', 'commandHistory', 'quickCommands',
+    'dockerManager' // <--- 在这里添加 'dockerManager'
   ]);
   // 新增：控制布局（Header/Footer）可见性的状态
   const isLayoutVisible: Ref<boolean> = ref(true); // 控制整体布局（Header/Footer）可见性