From ef239a0ea51a326581a09b2a5f66f56f4ab6750f Mon Sep 17 00:00:00 2001
From: stary <834207172@qq.COM>
Date: Fri, 10 Apr 2026 17:14:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=B4=E5=83=8F=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../public/onebyone/connect/connect.html      |  39 +++++
 .../client/public/onebyone/connect/connect.js | 133 +++++++++++++++++-
 WebApp/client/public/onebyone/store.js        |  27 ++++
 3 files changed, 198 insertions(+), 1 deletion(-)
diff --git a/WebApp/client/public/onebyone/connect/connect.html b/WebApp/client/public/onebyone/connect/connect.html
index dd33d5d..85ef3f4 100644
--- a/WebApp/client/public/onebyone/connect/connect.html
+++ b/WebApp/client/public/onebyone/connect/connect.html
@@ -9,6 +9,45 @@
     <link rel="stylesheet" href="../css/style.css">
 </head>
 <body class="h-screen w-screen flex flex-col text-white bg-grid relative">
+        <!-- 用户设置区域 -->
+        <div class="absolute top-4 right-4 z-10">
+            <button id="userSettingsBtn" class="flex items-center gap-2 glass px-3 py-2 rounded-full hover:bg-white/10 transition-colors">
+                <img id="userAvatar" src="/images/p1.png" class="w-8 h-8 rounded-full object-cover">
+                <span id="userName" class="text-sm font-medium">我</span>
+                <i class="fas fa-chevron-down text-xs text-gray-400"></i>
+            </button>
+
+            <!-- 设置菜单 -->
+            <div id="settingsMenu" class="hidden absolute top-full right-0 mt-2 glass rounded-xl shadow-lg w-48 z-20">
+                <div class="p-4 border-b border-white/10">
+                    <h3 class="text-sm font-medium mb-2">个人设置</h3>
+                    <div class="space-y-3">
+                        <div>
+                            <label class="block text-xs text-gray-400 mb-1">昵称</label>
+                            <input type="text" id="nicknameInput" class="w-full bg-transparent border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="输入昵称">
+                        </div>
+                        <div>
+                            <label class="block text-xs text-gray-400 mb-1">头像</label>
+                            <div class="flex items-center gap-3">
+                                <img id="avatarPreview" src="/images/p1.png" class="w-10 h-10 rounded-full object-cover">
+                                <input type="file" id="avatarInput" accept="image/*" class="hidden" onchange="handleAvatarUpload(event)">
+                                <button onclick="document.getElementById('avatarInput').click()" class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors">更换头像</button>
+                            </div>
+                        </div>
+                        <div>
+                            <label class="block text-xs text-gray-400 mb-1">用户ID</label>
+                            <div class="flex items-center gap-2">
+                                <input type="text" id="userIdInput" class="flex-1 bg-transparent border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500" readonly>
+                                <button onclick="copyUserId()" class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors">复制</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-2">
+                    <button onclick="saveSettings()" class="w-full px-4 py-2 text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors">保存设置</button>
+                </div>
+            </div>
+        </div>
     <!--
     ============================================================
     初始连接界面
diff --git a/WebApp/client/public/onebyone/connect/connect.js b/WebApp/client/public/onebyone/connect/connect.js
index 7f8ff15..e91f303 100644
--- a/WebApp/client/public/onebyone/connect/connect.js
+++ b/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;
diff --git a/WebApp/client/public/onebyone/store.js b/WebApp/client/public/onebyone/store.js
index 2f4a793..0d67247 100644
--- a/WebApp/client/public/onebyone/store.js
+++ b/WebApp/client/public/onebyone/store.js
@@ -49,9 +49,36 @@ class CallStateManager {
     async init() {
         // 初始化配置
         await this.setupConfig();
+        // 加载用户设置
+        this.loadUserSettings();
         // 获取本地摄像头视频流
         await this.getLocalStream();
     }
+
+    // 加载用户设置
+    loadUserSettings() {
+        const userSettings = localStorage.getItem('userSettings');
+        if (userSettings) {
+            try {
+                const settings = JSON.parse(userSettings);
+
+                // 更新本地用户信息
+                if (settings.name || settings.avatar) {
+                    this.state.session.localUser = {
+                        ...this.state.session.localUser,
+                        id: settings.userId || this.state.session.localUser.id,
+                        name: settings.name || this.state.session.localUser.name,
+                        avatar: settings.avatar || this.state.session.localUser.avatar
+                    };
+
+                    // 通知UI更新
+                    this.notify({ type: 'USER_SETTINGS_UPDATED', user: this.state.session.localUser });
+                }
+            } catch (error) {
+                console.error('Error loading user settings:', error);
+            }
+        }
+    }
     async setupConfig() {
         const res = await getServerConfig();
         this.useWebSocket = res.useWebSocket;
