头像设置
This commit is contained in:
@@ -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>
|
||||
<!--
|
||||
============================================================
|
||||
初始连接界面
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user