coder/ai-chat-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 用户头像上传功能

Browse Source
This commit is contained in:
hubian
2026-04-27 20:02:40 +08:00
parent 0244715a8a
commit 22a109d6c0
3 changed files with 227 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
www/app.js
View File

@@ -1493,6 +1493,9 @@ function renderProfilePage() {
const userAvatar = currentUser?.avatar || '👤';
const userSignature = currentUser?.signature || '这个人很懒，什么都没写~';
// 渲染头像（支持 emoji 和上传图片）
const avatarHtml = renderAvatar(userAvatar);
return `
<div class="profile-page">
<header class="page-header">
@@ -1502,7 +1505,7 @@ function renderProfilePage() {
<div class="profile-content">
<!-- 用户卡片 -->
<div class="profile-user-card" id="userCard">
<div class="profile-avatar-large" id="profileAvatar">${userAvatar}</div>
<div class="profile-avatar-large" id="profileAvatar">${avatarHtml}</div>
<div class="profile-user-info">
<div class="profile-name">${currentUser ? currentUser.username : '游客'}</div>
<div class="profile-signature">${currentUser ? userSignature : '登录后解锁更多功能'}</div>
@@ -1750,6 +1753,9 @@ function renderEditProfilePage() {
const age = currentUser.age || '';
const region = currentUser.region || '';
// 渲染头像预览（支持 emoji 和上传图片）
const avatarPreviewHtml = renderAvatar(avatar);
const editHtml = `
<div class="edit-profile-page">
<header class="edit-header">
@@ -1763,9 +1769,16 @@ function renderEditProfilePage() {
<!-- 头像选择 -->
<div class="edit-section">
<div class="edit-avatar-section">
<div class="edit-avatar-preview" id="editAvatarPreview">${avatar}</div>
<div class="edit-avatar-preview" id="editAvatarPreview">${avatarPreviewHtml}</div>
<div class="edit-avatar-label">点击更换头像</div>
</div>
<div class="avatar-upload-section">
<input type="file" id="avatarUploadInput" accept="image/*" style="display: none;">
<button class="avatar-upload-btn" id="avatarUploadBtn">
<svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
上传头像
</button>
</div>
<div class="avatar-selector" id="avatarSelector">
${['👤', '😊', '😎', '🤓', '🧑', '👨', '👩', '🧒', '👴', '👵', '🦸', '🧙', '🤖', '👽', '🥷'].map(a => `
<div class="avatar-option ${a === avatar ? 'selected' : ''}" data-avatar="${a}">${a}</div>
@@ -1846,9 +1859,28 @@ function renderEditProfilePage() {
document.getElementById('editAvatarPreview').textContent = newAvatar;
document.querySelectorAll('.avatar-option').forEach(o => o.classList.remove('selected'));
option.classList.add('selected');
// 清除上传的头像标记
uploadedAvatarData = null;
});
});
// 绑定头像上传按钮
const uploadBtn = document.getElementById('avatarUploadBtn');
const uploadInput = document.getElementById('avatarUploadInput');
if (uploadBtn && uploadInput) {
uploadBtn.addEventListener('click', () => {
uploadInput.click();
});
uploadInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
handleAvatarUpload(file);
}
});
}
// 绑定性别选择
document.querySelectorAll('.gender-option').forEach(option => {
option.addEventListener('click', () => {
@@ -1864,8 +1896,58 @@ function renderEditProfilePage() {
}
}
function handleSaveProfile() {
const newAvatar = document.querySelector('.avatar-option.selected')?.getAttribute('data-avatar') || '👤';
// 上传头像变量
let uploadedAvatarData = null;
// 处理头像上传
async function handleAvatarUpload(file) {
// 验证文件类型
if (!file.type.startsWith('image/')) {
showToast('请上传图片文件');
return;
}
// 验证文件大小（最大 2MB）
if (file.size > 2 * 1024 * 1024) {
showToast('图片大小不能超过2MB');
return;
}
try {
// 读取文件为 base64
const reader = new FileReader();
reader.onload = async (e) => {
const base64Data = e.target.result;
// 显示预览
const previewEl = document.getElementById('editAvatarPreview');
if (previewEl) {
previewEl.innerHTML = `<img src="${base64Data}" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover;">`;
}
// 清除预设头像选中状态
document.querySelectorAll('.avatar-option').forEach(o => o.classList.remove('selected'));
// 保存上传的头像数据
uploadedAvatarData = base64Data;
showToast('头像已加载，保存后生效');
};
reader.readAsDataURL(file);
} catch (e) {
showToast('头像加载失败');
}
}
async function handleSaveProfile() {
// 检查是否有上传的头像
let newAvatar = uploadedAvatarData;
// 如果没有上传头像，使用预设头像
if (!newAvatar) {
newAvatar = document.querySelector('.avatar-option.selected')?.getAttribute('data-avatar') || currentUser.avatar || '👤';
}
const newUsername = document.getElementById('editUsername')?.value.trim();
const newSignature = document.getElementById('editSignature')?.value.trim();
const newEmail = document.getElementById('editEmail')?.value.trim();
@@ -1874,8 +1956,8 @@ function handleSaveProfile() {
const newRegion = document.getElementById('editRegion')?.value.trim();
// 验证用户名
if (!newUsername || newUsername.length < 3 || newUsername.length > 20) {
showToast('用户名需要3-20个字符');
if (!newUsername || newUsername.length < 2 || newUsername.length > 20) {
showToast('用户名需要2-20个字符');
return;
}
@@ -1902,6 +1984,30 @@ function handleSaveProfile() {
// 如果用户已登录，调用 backend API 更新
if (currentUser.id) {
// 先处理头像上传（如果有上传的头像）
if (uploadedAvatarData) {
try {
const avatarRes = await fetch(`/api/user/${currentUser.id}/avatar`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ avatar: uploadedAvatarData })
});
const avatarData = await avatarRes.json();
if (avatarData.success && avatarData.avatar_url) {
// 使用上传后的头像 URL
newAvatar = avatarData.avatar;
currentUser.avatar = newAvatar;
} else {
showToast(avatarData.error || '头像上传失败');
return;
}
} catch (e) {
showToast('头像上传失败，请重试');
return;
}
}
// 更新用户资料
fetch(`/api/user/${currentUser.id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
@@ -3978,6 +4084,21 @@ function logStatsToBackend(type, key, value = 1) {
}).catch(e => console.error('统计记录失败:', e));
}
// 渲染头像（支持 emoji 和上传的图片）
function renderAvatar(avatar) {
if (!avatar) return '👤';
// 检查是否是 emoji（单个字符或者预设列表中的）
const emojiAvatars = ['👤', '😊', '😎', '🤓', '🧑', '👨', '👩', '🧒', '👴', '👵', '🦸', '🧙', '🤖', '👽', '🥷'];
if (emojiAvatars.includes(avatar) || avatar.length <= 4) {
return avatar;
}
// 否则认为是上传的文件名
return `<img src="/api/avatars/${avatar}" style="width: 100%; height: 100%; border-radius: 50%; object-fit: cover;" onerror="this.parentElement.textContent='👤'">`;
}
// 执行 Tavily 搜索
async function performSearch(query) {
try {

25
www/style.css
View File

@@ -1049,6 +1049,31 @@ body {
box-shadow: 0 0 8px rgba(102, 126, 234, 0.3);
}
.avatar-upload-section {
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.avatar-upload-btn {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 14px;
cursor: pointer;
transition: all 0.2s;
}
.avatar-upload-btn:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.edit-input-group {
margin-bottom: 16px;
}