update

packages/frontend/src/views/WorkspaceView.vue

@@ -8,12 +8,13 @@ import StatusMonitorComponent from '../components/StatusMonitor.vue';
 import WorkspaceConnectionListComponent from '../components/WorkspaceConnectionList.vue';
 import AddConnectionFormComponent from '../components/AddConnectionForm.vue';
 import TerminalTabBar from '../components/TerminalTabBar.vue';
-import { useSessionStore, type SessionTabInfoWithStatus } from '../stores/session.store';
+import CommandInputBar from '../components/CommandInputBar.vue'; // 导入新组件
+import { useSessionStore, type SessionTabInfoWithStatus, type SshTerminalInstance } from '../stores/session.store'; // 导入 SshTerminalInstance
 import type { ConnectionInfo } from '../stores/connections.store';
 // 导入 splitpanes 组件
 import { Splitpanes, Pane } from 'splitpanes';
 // 导入管理器实例类型，用于 FileManagerComponent 的 prop 类型断言
-import type { SftpManagerInstance } from '../stores/session.store';
+// import type { SftpManagerInstance } from '../stores/session.store'; // SftpManagerInstance 已在上面导入
 
 // --- Setup ---
 const { t } = useI18n();
@@ -61,6 +62,20 @@ onBeforeUnmount(() => {
    console.log('[工作区视图] 连接已更新');
    handleFormClose();
  };
+
+ // 处理命令发送
+ const handleSendCommand = (command: string) => {
+   // 类型断言确保 terminalManager 存在 sendData 方法
+   const terminalManager = activeSession.value?.terminalManager as (SshTerminalInstance | undefined);
+   if (terminalManager && typeof terminalManager.sendData === 'function') {
+     console.log(`[WorkspaceView] Sending command to active session ${activeSessionId.value}: ${command.trim()}`);
+     // 注意：CommandInputBar 已经添加了 '\n'
+     terminalManager.sendData(command);
+   } else {
+     console.warn('[WorkspaceView] Cannot send command, no active session or terminal manager with sendData method.');
+     // 可以考虑给用户一个提示
+   }
+ };
 </script>
 
 <template>
@@ -79,19 +94,19 @@ onBeforeUnmount(() => {
         <!-- 左侧边栏 Pane -->
         <pane size="20" min-size="15" class="sidebar-pane">
           <WorkspaceConnectionListComponent
-            @connect-request="sessionStore.handleConnectRequest"
-            @open-new-session="sessionStore.handleOpenNewSession"
-            @request-add-connection="handleRequestAddConnection"
-            @request-edit-connection="handleRequestEditConnection"
+            @connect-request="(id) => { console.log(`[WorkspaceView] Received 'connect-request' event for ID: ${id}`); sessionStore.handleConnectRequest(id); }"
+            @open-new-session="(id) => { console.log(`[WorkspaceView] Received 'open-new-session' event for ID: ${id}`); sessionStore.handleOpenNewSession(id); }"
+            @request-add-connection="() => { console.log('[WorkspaceView] Received \'request-add-connection\' event'); handleRequestAddConnection(); }"
+            @request-edit-connection="(conn) => { console.log(`[WorkspaceView] Received 'request-edit-connection' event for connection:`, conn); handleRequestEditConnection(conn); }"
           />
         </pane>
 
-        <!-- 中间区域 Pane (包含终端和文件管理器) -->
-        <pane size="65" min-size="30">
-           <!-- 上下分割 (终端 | 文件管理器) -->
-           <splitpanes :horizontal="true" style="height: 100%">
-              <!-- 终端 Pane -->
-              <pane size="65" min-size="20" class="terminal-pane">
+        <!-- 中间区域 Pane (包含终端、命令栏、文件管理器) -->
+        <pane size="65" min-size="30" class="middle-pane">
+           <!-- 上下分割 (终端 | 命令栏 | 文件管理器) - 禁用双击分割线行为 -->
+           <splitpanes :horizontal="true" style="height: 100%" :dbl-click-splitter="false">
+              <!-- 上方 Pane (终端) -->
+              <pane size="60" min-size="20" class="terminal-pane">
                  <!-- 会话终端区域: 只渲染活动会话的终端 -->
                  <div
                    v-for="tabInfo in sessionTabsWithStatus"
@@ -116,13 +131,17 @@ onBeforeUnmount(() => {
                    <h2>{{ t('workspace.selectConnectionPrompt') }}</h2>
                    <p>{{ t('workspace.selectConnectionHint') }}</p>
                  </div>
-                 <!-- 终端占位符 -->
-                 <div v-if="!activeSessionId" class="terminal-placeholder">
-                   <h2>{{ t('workspace.selectConnectionPrompt') }}</h2>
-                   <p>{{ t('workspace.selectConnectionHint') }}</p>
-                 </div>
-              </pane>
-              <!-- 文件管理器 Pane -->
+              </pane> <!-- End Terminal Pane -->
+
+              <!-- 中间 Pane (命令栏) - 恢复，仅设置 min-size -->
+              <pane size="5" min-size="5" class="command-bar-pane">
+                 <CommandInputBar
+                   v-if="activeSessionId"
+                   @send-command="handleSendCommand"
+                 />
+              </pane> <!-- End Command Bar Pane -->
+
+              <!-- 下方 Pane (文件管理器) - 恢复原始 size -->
               <pane size="35" min-size="15" class="file-manager-pane">
                  <!-- 为每个会话渲染文件管理器实例，用 v-show 控制 -->
                  <div
@@ -148,8 +167,8 @@ onBeforeUnmount(() => {
                  <!-- 文件管理器占位符 -->
                  <div v-if="!activeSessionId" class="pane-placeholder">{{ t('fileManager.noActiveSession') }}</div>
               </pane>
-           </splitpanes>
-        </pane>
+           </splitpanes> <!-- End Terminal/FM Splitpanes -->
+        </pane> <!-- End Middle Pane -->
 
         <!-- 右侧边栏 Pane (状态监视器) - 添加 status-monitor-pane 类 -->
         <pane size="15" min-size="10" class="sidebar-pane status-monitor-pane">
@@ -190,10 +209,12 @@ onBeforeUnmount(() => {
 .workspace-view {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 60px - 30px - 2rem); /* 调整以适应您的 header/footer/padding */
+  height: calc(100vh - 60px - 30px - 2rem); /* 恢复原始高度计算 */
   overflow: hidden;
 }
 
+/* 移除 fixed-command-bar 样式 */
+
 .main-content-area {
     display: flex;
     flex: 1;
@@ -203,19 +224,40 @@ onBeforeUnmount(() => {
 
 /* 为 Pane 添加一些基本样式 */
 .sidebar-pane, /* 用于左右侧边栏 */
+.middle-pane, /* 中间包含终端、命令栏、文件管理器的 Pane */
 .terminal-pane,
+.command-bar-pane, /* 命令栏 Pane */
 .file-manager-pane {
-  display: flex;
+  display: flex; /* 确保 Pane 内容可以正确布局 */
   flex-direction: column;
   overflow: hidden; /* Pane 内部内容溢出时隐藏 */
   background-color: #f8f9fa; /* 默认背景色 */
 }
+.middle-pane {
+    padding: 0; /* 移除 middle-pane 的内边距 */
+}
+
+/* 命令栏 Pane 特定样式 - 添加 max-height */
+.command-bar-pane {
+  background-color: #e9ecef; /* 背景色 */
+  justify-content: center; /* 垂直居中输入框 */
+  max-height: 200px; /* 使用 CSS 限制最大高度，例如 200px */
+  overflow: auto; /* 如果内容超出，允许滚动 */
+}
+/* 调整内部 CommandInputBar 样式 */
+.command-bar-pane > .command-input-bar {
+    border: none; /* 移除 CommandInputBar 的边框 */
+    background-color: transparent; /* 移除 CommandInputBar 的背景 */
+    min-height: auto; /* 移除最小高度 */
+    padding: 2px 10px; /* 调整内边距 */
+}
+
 .terminal-pane {
     background-color: #1e1e1e; /* 终端背景 */
     position: relative; /* 保持相对定位用于占位符 */
 }
 .file-manager-pane {
-    border-top: 1px solid #ccc; /* 终端和文件管理器之间的分隔线 */
+    /* 分隔线由 splitpanes 提供 */
 }
 
 /* 终端会话包装器 */
@@ -234,14 +276,6 @@ onBeforeUnmount(() => {
     overflow: hidden;
 }
 
-/* 文件管理器包装器 (内部组件应填充) */
-.file-manager-wrapper {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
 /* 状态监视器包装器 (内部组件应填充) */
 .status-monitor-wrapper {
     flex: 1;
@@ -267,14 +301,6 @@ onBeforeUnmount(() => {
 }
 
 
-/* 终端占位符 */
-.terminal-placeholder {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-
 /* 终端占位符 */
 .terminal-placeholder {
     position: absolute;
@@ -353,4 +379,9 @@ onBeforeUnmount(() => {
   bottom: 2px;
   width: 100%;
 }
+
+/* 尝试提高中间区域水平分割线的 z-index */
+.middle-pane .splitpanes--horizontal > .splitpanes__splitter {
+  z-index: 10; /* 确保分割线在内容之上 */
+}
 </style>