【m】两页面合并

client/public/onebyone/main.js

@@ -1,18 +1,82 @@
 /**
  * 主入口文件
  * 初始化应用，连接各个模块
+ * SPA架构：connect视图和call视图在同一页面切换
  */
 import store from './store.js';
 import UIRenderer from './renderer.js';
 import { showNotification } from './utils.js';
 import chatMessage from './chatmessage.js';
+import {
+    bindConnectViewEvents,
+    initWebSocket,
+    loadUserSettings
+} from './connectview.js';
 
 // 全局变量
 let connectionId = "";
+// 当前视图状态：'connect' 或 'call'（可用于未来扩展）
+let currentView = 'connect';
+
 /**
- * 绑定DOM事件
+ * 切换到call视图（创建/加入通话后）
+ * @param {string} connectionId - 连接ID
  */
-function bindDomEvents() {
+async function switchToCallView(connectionId) {
+    const connectView = document.getElementById('connectView');
+    const callView = document.getElementById('callView');
+    
+    if (connectView) connectView.classList.add('hidden');
+    if (callView) callView.classList.remove('hidden');
+    
+    currentView = 'call';
+    
+    try {
+        // 初始化渲染器
+        const renderer = new UIRenderer(store);
+        
+        // 加入通话
+        await store.joinCall(connectionId);
+        
+        // 设置WebRTC连接
+        await store.setUp(connectionId);
+        
+        renderer.renderHeaderTitle();
+        
+        // 绑定DOM事件
+        bindCallViewDomEvents();
+        
+        console.log('Video call app initialized successfully');
+    } catch (error) {
+        console.error('Error initializing app:', error);
+        showNotification('初始化失败，请刷新页面重试', 'error');
+    }
+}
+
+/**
+ * 处理加入通话
+ * @param {string} connectionId - 连接ID
+ */
+async function handleJoinCall(connectionId) {
+    showNotification(`正在加入通话 (${connectionId})`);
+    localStorage.setItem('connectionId', connectionId);
+    await switchToCallView(connectionId);
+}
+
+/**
+ * 处理创建通话
+ */
+async function handleCreateCall() {
+    showNotification('正在创建通话...');
+    const connectionId = 'conn_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+    localStorage.setItem('connectionId', connectionId);
+    await switchToCallView(connectionId);
+}
+
+/**
+ * 绑定call视图DOM事件
+ */
+function bindCallViewDomEvents() {
     // 切换侧边栏
     window.toggleSidebar = function () {
         chatMessage.toggleSidebar();
@@ -145,8 +209,10 @@ function bindDomEvents() {
     });
 
     // 绑定对话框事件
-    document.getElementById('cancelEndCall').addEventListener('click', window.cancelEndCall);
-    document.getElementById('confirmEndCall').addEventListener('click', window.confirmEndCall);
+    const cancelEndCall = document.getElementById('cancelEndCall');
+    const confirmEndCall = document.getElementById('confirmEndCall');
+    if (cancelEndCall) cancelEndCall.addEventListener('click', window.cancelEndCall);
+    if (confirmEndCall) confirmEndCall.addEventListener('click', window.confirmEndCall);
 
     // 更多选项按钮事件
     const moreOptionsBtn = document.getElementById('moreOptionsBtn');
@@ -166,47 +232,41 @@ function bindDomEvents() {
     });
 
     // 绑定通话请求对话框事件
-    if (document.getElementById('rejectCall')) {
-        document.getElementById('rejectCall').addEventListener('click', window.rejectCall);
-    }
-    if (document.getElementById('acceptCall')) {
-        document.getElementById('acceptCall').addEventListener('click', window.acceptCall);
-    }
+    const rejectCall = document.getElementById('rejectCall');
+    const acceptCall = document.getElementById('acceptCall');
+    if (rejectCall) rejectCall.addEventListener('click', window.rejectCall);
+    if (acceptCall) acceptCall.addEventListener('click', window.acceptCall);
 }
 
-
-// 页面加载完成后初始化
+// 页面加载完成后初始化（SPA入口）
 window.addEventListener('DOMContentLoaded', async () => {
     try {
-        // 检查本地存储中是否有连接ID
-        const connectionId = localStorage.getItem('connectionId');
+        // 显示connect视图，隐藏call视图
+        const connectView = document.getElementById('connectView');
+        const callView = document.getElementById('callView');
+        if (connectView) connectView.classList.remove('hidden');
+        if (callView) callView.classList.add('hidden');
+        currentView = 'connect';
 
-        if (!connectionId) {
-            // 如果没有连接ID，跳转到连接界面
-            window.location.href = './connect/connect.html';
-            return;
+        // 加载用户设置
+        loadUserSettings();
+
+        // 初始化WebSocket连接（在connect视图就建立WebSocket）
+        await initWebSocket();
+
+        // 绑定connect视图事件（加入通话、创建通话等）
+        bindConnectViewEvents(handleJoinCall, handleCreateCall);
+
+        // 检查是否有保存的连接ID，填入输入框
+        const savedConnectionId = localStorage.getItem('connectionId');
+        if (savedConnectionId) {
+            const connectionIdInput = document.getElementById('connectionIdInput');
+            if (connectionIdInput) connectionIdInput.value = savedConnectionId;
         }
 
-        // 初始化 store
-        //await store.init();
-
-        // 初始化渲染器
-        const renderer = new UIRenderer(store);
-
-        // 加入通话
-        await store.joinCall(connectionId);
-
-        // 设置WebRTC连接
-        await store.setUp(connectionId);
-
-        renderer.renderHeaderTitle();
-
-        // 绑定DOM事件
-        bindDomEvents();
-
-        console.log('Video call app initialized successfully');
+        console.log('SPA initialized, showing connect view');
     } catch (error) {
-        console.error('Error initializing app:', error);
+        console.error('Error initializing SPA:', error);
         showNotification('初始化失败，请刷新页面重试', 'error');
     }
 });