头像设置

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

@@ -166,9 +166,134 @@ function bindEvents() {
     }
 }
 
+// 生成8位的用户ID
+function generateUserId() {
+    // 生成8位随机字符串，包含字母和数字
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let result = 'user_';
+    for (let i = 0; i < 8; i++) {
+        result += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return result;
+}
+
+// 加载用户设置
+function loadUserSettings() {
+    const userSettings = localStorage.getItem('userSettings');
+    if (userSettings) {
+        try {
+            const settings = JSON.parse(userSettings);
+
+            // 设置用户ID
+            if (settings.userId) {
+                document.getElementById('userIdInput').value = settings.userId;
+            }
+
+            // 设置昵称
+            if (settings.name) {
+                document.getElementById('nicknameInput').value = settings.name;
+                document.getElementById('userName').textContent = settings.name;
+            }
+
+            // 设置头像
+            if (settings.avatar) {
+                document.getElementById('userAvatar').src = settings.avatar;
+                document.getElementById('avatarPreview').src = settings.avatar;
+            }
+        } catch (error) {
+            console.error('Error loading user settings:', error);
+        }
+    } else {
+        // 生成新的用户ID
+        const newUserId = generateUserId();
+        document.getElementById('userIdInput').value = newUserId;
+
+        // 保存默认设置
+        saveSettings();
+    }
+}
+
+// 保存用户设置
+function saveSettings() {
+    const settings = {
+        userId: document.getElementById('userIdInput').value,
+        name: document.getElementById('nicknameInput').value || '我',
+        avatar: document.getElementById('avatarPreview').src
+    };
+
+    localStorage.setItem('userSettings', JSON.stringify(settings));
+
+    // 更新界面显示
+    document.getElementById('userName').textContent = settings.name;
+    document.getElementById('userAvatar').src = settings.avatar;
+
+    showNotification('设置已保存', 'success');
+}
+
+// 处理头像上传
+function handleAvatarUpload(event) {
+    const file = event.target.files[0];
+    if (file) {
+        // 检查文件类型
+        if (!file.type.startsWith('image/')) {
+            showNotification('请选择图片文件', 'error');
+            return;
+        }
+
+        // 检查文件大小
+        if (file.size > 2 * 1024 * 1024) { // 2MB限制
+            showNotification('图片大小不能超过2MB', 'error');
+            return;
+        }
+
+        // 读取图片文件
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            const imageUrl = e.target.result;
+            document.getElementById('avatarPreview').src = imageUrl;
+            showNotification('头像已更新', 'success');
+        };
+        reader.readAsDataURL(file);
+    }
+}
+
+// 复制用户ID到剪贴板
+function copyUserId() {
+    const userIdInput = document.getElementById('userIdInput');
+    userIdInput.select();
+    document.execCommand('copy');
+    showNotification('用户ID已复制到剪贴板', 'success');
+}
+
+// 切换设置菜单
+function toggleSettingsMenu() {
+    const settingsMenu = document.getElementById('settingsMenu');
+    settingsMenu.classList.toggle('hidden');
+}
+
+// 点击外部关闭设置菜单
+document.addEventListener('click', function(event) {
+    const settingsMenu = document.getElementById('settingsMenu');
+    const userSettingsBtn = document.getElementById('userSettingsBtn');
+
+    if (!settingsMenu.contains(event.target) && !userSettingsBtn.contains(event.target)) {
+        settingsMenu.classList.add('hidden');
+    }
+});
+
+// 绑定用户设置相关事件
+function bindUserSettingsEvents() {
+    // 设置按钮点击事件
+    const userSettingsBtn = document.getElementById('userSettingsBtn');
+    if (userSettingsBtn) {
+        userSettingsBtn.addEventListener('click', toggleSettingsMenu);
+    }
+}
+
 // 页面加载完成后初始化
 window.addEventListener('DOMContentLoaded', () => {
     bindEvents();
+    bindUserSettingsEvents();
 
     // 检查本地存储中是否有连接ID
     const savedConnectionId = localStorage.getItem('connectionId');
@@ -178,6 +303,9 @@ window.addEventListener('DOMContentLoaded', () => {
             connectionIdInput.value = savedConnectionId;
         }
     }
+
+    // 加载用户设置
+    loadUserSettings();
 });
 
 // 导出全局函数
@@ -185,4 +313,7 @@ window.showNotification = showNotification;
 window.joinCall = joinCall;
 window.createCall = createCall;
 window.selectConnectionId = selectConnectionId;
-window.selectConnectionId = selectConnectionId;
+window.saveSettings = saveSettings;
+window.handleAvatarUpload = handleAvatarUpload;
+window.copyUserId = copyUserId;
+window.toggleSettingsMenu = toggleSettingsMenu;