【m】界面分为3个页面

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

@@ -0,0 +1,120 @@
+/**
+ * 连接界面逻辑
+ * 处理初始连接、创建通话和加入通话的功能
+ */
+
+import store from '../store.js';
+
+// 通知函数
+function showNotification(message, type = 'info') {
+    const notification = document.getElementById('notification');
+    const notificationText = document.getElementById('notificationText');
+
+    if (notification && notificationText) {
+        notificationText.textContent = message;
+
+        // 清除之前的类
+        notification.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 glass px-6 py-3 rounded-full flex items-center gap-3 opacity-0 pointer-events-none transition-all duration-300 z-50 translate-y-[-20px]';
+
+        // 根据类型添加不同的图标
+        const iconElement = notification.querySelector('i');
+        if (iconElement) {
+            iconElement.className = 'fas fa-info-circle text-indigo-400';
+            switch (type) {
+                case 'success':
+                    iconElement.className = 'fas fa-check-circle text-green-400';
+                    break;
+                case 'error':
+                    iconElement.className = 'fas fa-exclamation-circle text-red-400';
+                    break;
+                case 'warning':
+                    iconElement.className = 'fas fa-exclamation-triangle text-yellow-400';
+                    break;
+            }
+        }
+
+        // 显示通知
+        notification.classList.remove('opacity-0', 'translate-y-[-20px]');
+        notification.classList.add('opacity-100', 'translate-y-0');
+
+        // 3秒后隐藏
+        setTimeout(() => {
+            notification.classList.remove('opacity-100', 'translate-y-0');
+            notification.classList.add('opacity-0', 'translate-y-[-20px]');
+        }, 3000);
+    }
+}
+
+// 加入通话
+function joinCall() {
+    const connectionId = document.getElementById('connectionIdInput').value.trim();
+    if (connectionId) {
+        showNotification(`正在加入通话 (${connectionId})`);
+
+        // 保存连接ID到本地存储
+        localStorage.setItem('connectionId', connectionId);
+
+        // 跳转到通话界面
+        window.location.href = '../index.html';
+    } else {
+        showNotification('请输入连接ID', 'error');
+    }
+}
+
+// 创建通话
+function createCall() {
+    showNotification('正在创建通话...');
+
+    // 生成随机连接ID
+    const connectionId = 'conn_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+
+    // 保存连接ID到本地存储
+    localStorage.setItem('connectionId', connectionId);
+
+    // 跳转到通话界面
+    window.location.href = '../index.html';
+}
+
+// 绑定事件监听器
+function bindEvents() {
+    // 连接按钮
+    const connectBtn = document.getElementById('connectBtn');
+    if (connectBtn) {
+        connectBtn.addEventListener('click', joinCall);
+    }
+
+    // 创建通话按钮
+    const createCallBtn = document.getElementById('createCallBtn');
+    if (createCallBtn) {
+        createCallBtn.addEventListener('click', createCall);
+    }
+
+    // 输入框回车事件
+    const connectionIdInput = document.getElementById('connectionIdInput');
+    if (connectionIdInput) {
+        connectionIdInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                joinCall();
+            }
+        });
+    }
+}
+
+// 页面加载完成后初始化
+window.addEventListener('DOMContentLoaded', () => {
+    bindEvents();
+
+    // 检查本地存储中是否有连接ID
+    const savedConnectionId = localStorage.getItem('connectionId');
+    if (savedConnectionId) {
+        const connectionIdInput = document.getElementById('connectionIdInput');
+        if (connectionIdInput) {
+            connectionIdInput.value = savedConnectionId;
+        }
+    }
+});
+
+// 导出全局函数
+window.showNotification = showNotification;
+window.joinCall = joinCall;
+window.createCall = createCall;