121 lines
3.8 KiB
JavaScript
121 lines
3.8 KiB
JavaScript
/**
|
|
* 连接界面逻辑
|
|
* 处理初始连接、创建通话和加入通话的功能
|
|
*/
|
|
|
|
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;
|