修改connet

WebApp/client/public/onebyone/connect/connect.html

@@ -36,7 +36,7 @@
                 </p>
             </div>
 
-            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+            <div class="flex flex-col sm:flex-row gap-4 justify-center mb-6">
                 <button id="connectBtn" class="flex-1 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-xl transition-colors flex items-center justify-center gap-2">
                     <i class="fas fa-phone"></i>
                     <span>加入通话</span>
@@ -46,6 +46,20 @@
                     <span>创建通话</span>
                 </button>
             </div>
+
+            <!-- 浏览全部ID按钮 -->
+            <button id="browseIdsBtn" class="w-full px-6 py-3 glass hover:bg-white/10 rounded-xl transition-colors flex items-center justify-center gap-2 mb-4">
+                <i class="fas fa-list"></i>
+                <span>浏览全部ID</span>
+            </button>
+
+            <!-- 连接ID列表 -->
+            <div id="connectionIdsList" class="glass rounded-xl p-4 mb-6 hidden">
+                <h3 class="text-sm font-medium text-gray-300 mb-2">可用的连接ID</h3>
+                <div id="idsContainer" class="max-h-40 overflow-y-auto space-y-2">
+                    <!-- 连接ID将在这里动态生成 -->
+                </div>
+            </div>
         </div>
     </div>
 

WebApp/client/public/onebyone/connect/connect.js

@@ -5,6 +5,7 @@
 
 import store from '../store.js';
 
+
 // 通知函数
 function showNotification(message, type = 'info') {
     const notification = document.getElementById('notification');
@@ -75,6 +76,65 @@ function createCall() {
     window.location.href = '../index.html';
 }
 
+
+// 获取所有连接ID
+async function getAllConnectionIds() {
+    showNotification('正在获取连接ID列表...');
+    try {
+        const response = await fetch('/signaling/connection-ids');
+        if (!response.ok) {
+            throw new Error('Failed to fetch connection IDs');
+        }
+        const data = await response.json();
+        displayConnectionIds(data.connectionIds);
+    } catch (error) {
+        console.error('Error fetching connection IDs:', error);
+        showNotification('获取连接ID失败', 'error');
+    }
+}
+
+// 显示连接ID列表
+function displayConnectionIds(connectionIds) {
+    const idsContainer = document.getElementById('idsContainer');
+    const connectionIdsList = document.getElementById('connectionIdsList');
+
+    if (idsContainer) {
+        // 清空容器
+        idsContainer.innerHTML = '';
+
+        if (connectionIds.length === 0) {
+            idsContainer.innerHTML = '<p class="text-gray-500 text-sm">暂无可用的连接ID</p>';
+        } else {
+            // 为每个连接ID创建一个元素
+            connectionIds.forEach(id => {
+                const idElement = document.createElement('div');
+                idElement.className = 'flex items-center justify-between p-2 bg-white/5 rounded-lg hover:bg-white/10 cursor-pointer transition-colors';
+                idElement.innerHTML = `
+                    <span class="text-sm">${id}</span>
+                    <button class="text-xs bg-indigo-600 hover:bg-indigo-700 px-2 py-1 rounded" onclick="selectConnectionId('${id}')">选择</button>
+                `;
+                idsContainer.appendChild(idElement);
+            });
+        }
+
+        // 显示连接ID列表
+        if (connectionIdsList) {
+            connectionIdsList.classList.remove('hidden');
+        }
+
+        showNotification(`找到 ${connectionIds.length} 个连接ID`);
+    }
+}
+
+// 选择连接ID
+function selectConnectionId(id) {
+    const connectionIdInput = document.getElementById('connectionIdInput');
+    if (connectionIdInput) {
+        connectionIdInput.value = id;
+        showNotification(`已选择连接ID: ${id}`);
+    }
+}
+
 // 绑定事件监听器
 function bindEvents() {
     // 连接按钮
@@ -89,6 +149,12 @@ function bindEvents() {
         createCallBtn.addEventListener('click', createCall);
     }
 
+    // 浏览全部ID按钮
+    const browseIdsBtn = document.getElementById('browseIdsBtn');
+    if (browseIdsBtn) {
+        browseIdsBtn.addEventListener('click', getAllConnectionIds);
+    }
+
     // 输入框回车事件
     const connectionIdInput = document.getElementById('connectionIdInput');
     if (connectionIdInput) {
@@ -118,3 +184,5 @@ window.addEventListener('DOMContentLoaded', () => {
 window.showNotification = showNotification;
 window.joinCall = joinCall;
 window.createCall = createCall;
+window.selectConnectionId = selectConnectionId;
+window.selectConnectionId = selectConnectionId;