update

packages/frontend/src/components/TerminalTabBar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { PropType } from 'vue';
+import { ref, PropType } from 'vue'; // 导入 ref
+import WorkspaceConnectionListComponent from './WorkspaceConnectionList.vue'; // 导入连接列表组件
+import { useSessionStore } from '../stores/session.store'; // 导入 session store
 // 导入会话状态类型
 import type { SessionTabInfoWithStatus } from '../stores/session.store'; // 导入更新后的类型
 
@@ -28,6 +30,22 @@ const closeSession = (event: MouseEvent, sessionId: string) => {
   event.stopPropagation(); // 阻止事件冒泡到标签点击事件
   emit('close-session', sessionId);
 };
+
+// --- 新增：弹出窗口状态和处理 ---
+const sessionStore = useSessionStore();
+const showConnectionListPopup = ref(false);
+
+const togglePopup = () => {
+  showConnectionListPopup.value = !showConnectionListPopup.value;
+};
+
+// 处理从弹出列表中选择连接的事件
+const handlePopupConnect = (connectionId: number) => {
+  console.log(`[TabBar] Popup connect request for ID: ${connectionId}`);
+  // 使用 sessionStore 的方法来处理连接请求（它现在总是新建标签）
+  sessionStore.handleConnectRequest(connectionId);
+  showConnectionListPopup.value = false; // 关闭弹出窗口
+};
 </script>
 
 <template>
@@ -48,8 +66,23 @@ const closeSession = (event: MouseEvent, sessionId: string) => {
         </button>
       </li>
     </ul>
-    <!-- 可以添加一个 "+" 按钮来打开新标签/连接 -->
-    <!-- <button class="add-tab-button">+</button> -->
+    <!-- 新增 "+" 按钮 -->
+    <button class="add-tab-button" @click="togglePopup" title="新建连接标签页">
+      <i class="fas fa-plus"></i>
+    </button>
+
+    <!-- 新增：连接列表弹出窗口 -->
+    <div v-if="showConnectionListPopup" class="connection-list-popup" @click.self="togglePopup">
+      <div class="popup-content">
+        <button class="popup-close-button" @click="togglePopup">&times;</button>
+        <h3>选择要连接的服务器</h3>
+        <WorkspaceConnectionListComponent
+          @connect-request="handlePopupConnect"
+          @open-new-session="handlePopupConnect"
+          class="popup-connection-list"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -60,7 +93,8 @@ const closeSession = (event: MouseEvent, sessionId: string) => {
   border-bottom: 1px solid #bdbdbd;
   overflow-x: auto; /* 如果标签过多则允许水平滚动 */
   white-space: nowrap;
-  padding: 0 0.5rem; /* 左右留出一点空间 */
+  /* padding: 0 0.5rem; */ /* 移除左右内边距，让标签列表和按钮自己控制 */
+  padding-right: 0.5rem; /* 只保留右侧内边距给按钮 */
   height: 2.5rem; /* 固定标签栏高度 */
   box-sizing: border-box; /* 确保 padding 不会增加总高度 */
 }
@@ -83,8 +117,8 @@ const closeSession = (event: MouseEvent, sessionId: string) => {
 
 .tab-list {
   list-style: none;
-  padding: 0;
-  margin: 0;
+  padding: 0; /* 确保列表无内边距 */
+  margin: 0; /* 确保列表无外边距 */
   display: flex;
 }
 
@@ -156,18 +190,91 @@ const closeSession = (event: MouseEvent, sessionId: string) => {
     color: #333333;
 }
 
-/* 可选：添加新标签按钮样式 */
-/*
+/* 添加新标签按钮样式 */
 .add-tab-button {
   background: none;
   border: none;
-  padding: 0.5rem 0.8rem;
+  border-left: 1px solid #bdbdbd; /* 左侧分隔线 */
+  padding: 0 0.8rem;
+  /* margin-left: 0.5rem; */ /* 移除左外边距 */
   cursor: pointer;
-  font-size: 1.2em;
+  font-size: 1.1em;
   color: #616161;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  flex-shrink: 0; /* 防止按钮被压缩 */
 }
 .add-tab-button:hover {
   background-color: #d0d0d0;
 }
-*/
+.add-tab-button i {
+  line-height: 1; /* 确保图标垂直居中 */
+}
+
+/* 弹出窗口样式 */
+.connection-list-popup {
+  position: fixed; /* 固定定位，覆盖整个屏幕 */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000; /* 确保在最上层 */
+}
+
+.popup-content {
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+  width: 80%;
+  max-width: 500px; /* 限制最大宽度 */
+  max-height: 80vh; /* 限制最大高度 */
+  display: flex;
+  flex-direction: column;
+  position: relative; /* 为了关闭按钮定位 */
+}
+
+.popup-close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: #aaa;
+  line-height: 1;
+}
+.popup-close-button:hover {
+  color: #333;
+}
+
+.popup-content h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  text-align: center;
+  color: #333;
+}
+
+.popup-connection-list {
+  flex-grow: 1; /* 让列表占据剩余空间 */
+  overflow-y: auto; /* 列表内容滚动 */
+  /* 可能需要覆盖 WorkspaceConnectionList 的一些默认样式 */
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+/* 覆盖 WorkspaceConnectionList 内部样式（如果需要） */
+/* :deep(.popup-connection-list .search-add-bar) { */
+  /* display: none; */ /* 不再隐藏搜索栏 */
+/* } */
+:deep(.popup-connection-list .connection-list-area) {
+  padding: 0; /* 保持移除内边距 */
+}
+
 </style>