From cacdb0920152dcf6d1a3c993e352f35857b53758 Mon Sep 17 00:00:00 2001 From: hubian <908234780@qq.com> Date: Mon, 27 Apr 2026 11:50:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=88=91=E7=9A=84=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 用户编辑: - 用户头像选择（15种预设头像） - 用户名修改（唯一性检查） - 个性签名 - 个人资料（手机号只读、邮箱、性别、年龄、地区） 消息通知: - 通知开关、声音、震动设置 - 免打扰时段设置 隐私安全: - 修改密码 - 账号信息查看 - 清除聊天记录 - 清除缓存 - 数据安全状态显示 帮助与反馈: - 使用帮助指南 - 问题反馈表单 - 联系方式 关于: - 版本信息 - 检查更新 - 隐私政策/用户协议入口 --- www/app.js | 923 +++++++++++++++++++++++++++++++++++++++++++++++-- www/index.html | 6 +- www/style.css | 688 +++++++++++++++++++++++++++++++++--- 3 files changed, 1537 insertions(+), 80 deletions(-) diff --git a/www/app.js b/www/app.js index 617ba04..1be0811 100644 --- a/www/app.js +++ b/www/app.js @@ -1331,6 +1331,8 @@ function showAgentFavoritePage() { function renderProfilePage() { const quota = getRemainingQuota(); + const userAvatar = currentUser?.avatar || '👤'; + const userSignature = currentUser?.signature || '这个人很懒，什么都没写~'; return `
@@ -1339,22 +1341,24 @@ function renderProfilePage() {
-
-
${currentUser ? '👤' : '👤'}
-
${currentUser ? currentUser.username : '游客'}
+ +
+
${userAvatar}
+ ${currentUser - ? `
已登录
- ` - : `
未登录
- ` + ? `
›
` + : `` }
${!currentUser && quota ? ` +
今日使用配额（游客）
@@ -1370,28 +1374,73 @@ function renderProfilePage() { 智能体消息 ${quota.agentMsgRemain}/${GUEST_LIMITS.maxAgentMessagesPerDay}
-
- 可用智能体 - 仅通用助手 🤖 -
登录后解锁全部功能
` : ''} -
-
- - 关于 + +
+ ${currentUser ? ` +
+
👤
+ 用户编辑 + 头像、用户名、签名、资料 + ›
-
- - 清除数据 + ` : ''} + +
+
🔔
+ 消息通知 + 通知设置、消息提醒 + › +
+ +
+
🔒
+ 隐私安全 + 账号安全、隐私设置 + › +
+ +
+
❓
+ 帮助与反馈 + 使用帮助、问题反馈 + › +
+ +
+
📋
+ 关于 + 版本信息 + › +
+
+ + + ${currentUser ? ` +
+
+
🚪
+ 退出登录 + › +
+
+ ` : ''} + +
+
+
🗑️
+ 清除数据 + 删除所有本地数据 + ›
-

AI助手 v3.4.1

+

AI助手 v3.5.0

基于智谱 GLM-4.5-Air

@@ -1400,28 +1449,67 @@ function renderProfilePage() { } function bindProfilePageEvents() { - // 登录按钮 - const loginBtn = document.getElementById('loginBtn'); - if (loginBtn) { - loginBtn.addEventListener('click', () => { + // 用户卡片点击（已登录用户进入编辑页面） + const userCard = document.getElementById('userCard'); + if (userCard && currentUser) { + userCard.addEventListener('click', () => { + showEditProfilePage(); + }); + } + + // 小登录按钮 + const loginBtnSmall = document.getElementById('loginBtnSmall'); + if (loginBtnSmall) { + loginBtnSmall.addEventListener('click', () => { showLoginPage(); }); } - // 注册按钮 - const registerBtn = document.getElementById('registerBtn'); - if (registerBtn) { - registerBtn.addEventListener('click', () => { + // 小注册按钮 + const registerBtnSmall = document.getElementById('registerBtnSmall'); + if (registerBtnSmall) { + registerBtnSmall.addEventListener('click', () => { showRegisterPage(); }); } - // 跳过按钮（游客模式） - const skipBtn = document.getElementById('skipBtn'); - if (skipBtn) { - skipBtn.addEventListener('click', () => { - showToast('以游客模式继续使用'); - switchPage('chats'); + // 用户编辑按钮 + const editProfileBtn = document.getElementById('editProfileBtn'); + if (editProfileBtn) { + editProfileBtn.addEventListener('click', () => { + showEditProfilePage(); + }); + } + + // 消息通知按钮 + const notificationBtn = document.getElementById('notificationBtn'); + if (notificationBtn) { + notificationBtn.addEventListener('click', () => { + showNotificationPage(); + }); + } + + // 隐私安全按钮 + const privacyBtn = document.getElementById('privacyBtn'); + if (privacyBtn) { + privacyBtn.addEventListener('click', () => { + showPrivacyPage(); + }); + } + + // 帮助与反馈按钮 + const helpBtn = document.getElementById('helpBtn'); + if (helpBtn) { + helpBtn.addEventListener('click', () => { + showHelpPage(); + }); + } + + // 关于按钮 + const aboutBtn = document.getElementById('aboutBtn'); + if (aboutBtn) { + aboutBtn.addEventListener('click', () => { + showAboutPage(); }); } @@ -1454,6 +1542,767 @@ function bindProfilePageEvents() { } } +// ==================== 用户编辑页面 ==================== + +function showEditProfilePage() { + if (!currentUser) { + showToast('请先登录'); + return; + } + + // 获取完整用户信息 + const users = JSON.parse(localStorage.getItem('registeredUsers') || '[]'); + const fullUser = users.find(u => u.username === currentUser.username); + + const avatar = currentUser.avatar || '👤'; + const signature = currentUser.signature || ''; + const phone = fullUser?.phone || ''; + const email = fullUser?.email || ''; + const gender = currentUser.gender || ''; + const age = currentUser.age || ''; + const region = currentUser.region || ''; + + const editHtml = ` +
+
+ +

用户编辑

+
+ +
+ +
+
+
${avatar}
+
点击更换头像
+
+
+ ${['👤', '😊', '😎', '🤓', '🧑', '👨', '👩', '🧒', '👴', '👵', '🦸', '🧙', '🤖', '👽', '🥷'].map(a => ` +
${a}
+ `).join('')} +
+
+ + +
+
基本信息
+ +
+ + +
+ +
+ + +
+
+ + +
+
个人资料
+ +
+ + + 不可修改 +
+ +
+ + +
+ +
+ +
+
男 👨
+
女 👩
+
其他 🧑
+
保密 🤐
+
+
+ +
+ + +
+ +
+ + +
+
+ + +
+
+ `; + + appContainer.innerHTML = editHtml; + + // 绑定返回按钮 + const backBtn = document.getElementById('editBackBtn'); + if (backBtn) { + backBtn.addEventListener('click', () => { + switchPage('profile'); + }); + } + + // 绑定头像选择 + document.querySelectorAll('.avatar-option').forEach(option => { + option.addEventListener('click', () => { + const newAvatar = option.getAttribute('data-avatar'); + document.getElementById('editAvatarPreview').textContent = newAvatar; + document.querySelectorAll('.avatar-option').forEach(o => o.classList.remove('selected')); + option.classList.add('selected'); + }); + }); + + // 绑定性别选择 + document.querySelectorAll('.gender-option').forEach(option => { + option.addEventListener('click', () => { + document.querySelectorAll('.gender-option').forEach(o => o.classList.remove('selected')); + option.classList.add('selected'); + }); + }); + + // 绑定保存按钮 + const saveBtn = document.getElementById('saveProfileBtn'); + if (saveBtn) { + saveBtn.addEventListener('click', handleSaveProfile); + } +} + +function handleSaveProfile() { + const newAvatar = document.querySelector('.avatar-option.selected')?.getAttribute('data-avatar') || '👤'; + const newUsername = document.getElementById('editUsername')?.value.trim(); + const newSignature = document.getElementById('editSignature')?.value.trim(); + const newEmail = document.getElementById('editEmail')?.value.trim(); + const newGender = document.querySelector('.gender-option.selected')?.getAttribute('data-gender') || ''; + const newAge = document.getElementById('editAge')?.value; + const newRegion = document.getElementById('editRegion')?.value.trim(); + + // 验证用户名 + if (!newUsername || newUsername.length < 3 || newUsername.length > 20) { + showToast('用户名需要3-20个字符'); + return; + } + + // 验证邮箱 + if (newEmail && !validateEmail(newEmail)) { + showToast('请输入正确的邮箱格式'); + return; + } + + // 验证年龄 + if (newAge && (parseInt(newAge) < 1 || parseInt(newAge) > 120)) { + showToast('年龄需要在1-120之间'); + return; + } + + // 检查用户名是否被其他人占用 + const users = JSON.parse(localStorage.getItem('registeredUsers') || '[]'); + if (newUsername !== currentUser.username) { + if (users.find(u => u.username === newUsername)) { + showToast('用户名已被占用'); + return; + } + // 更新用户名 + const userIndex = users.findIndex(u => u.username === currentUser.username); + if (userIndex >= 0) { + users[userIndex].username = newUsername; + } + } + + // 更新邮箱 + const userIndex = users.findIndex(u => u.username === currentUser.username); + if (userIndex >= 0) { + users[userIndex].email = newEmail; + } + + // 更新 currentUser + currentUser.avatar = newAvatar; + currentUser.username = newUsername; + currentUser.signature = newSignature; + currentUser.gender = newGender; + currentUser.age = newAge ? parseInt(newAge) : ''; + currentUser.region = newRegion; + + saveCurrentUser(); + localStorage.setItem('registeredUsers', JSON.stringify(users)); + + showToast('保存成功'); + switchPage('profile'); +} + +// ==================== 消息通知页面 ==================== + +function showNotificationPage() { + // 加载通知设置 + const settings = JSON.parse(localStorage.getItem('notificationSettings') || '{}'); + const enableNotification = settings.enableNotification !== false; + const enableSound = settings.enableSound !== false; + const enableVibration = settings.enableVibration !== false; + const quietHoursStart = settings.quietHoursStart || '23:00'; + const quietHoursEnd = settings.quietHoursEnd || '08:00'; + + const notificationHtml = ` +
+
+ +

消息通知

+
+ +
+
+
通知设置
+ +
+
+ 开启通知 + 接收消息推送通知 +
+
+
+
+
+ +
+
+ 通知声音 + 收到通知时播放声音 +
+
+
+
+
+ +
+
+ 震动提醒 + 收到通知时震动 +
+
+
+
+
+
+ +
+
免打扰时段
+ +
+
+ 开始时间 +
+ +
+ +
+
+ 结束时间 +
+ +
+ +
免打扰时段内不会收到通知
+
+
+
+ `; + + appContainer.innerHTML = notificationHtml; + + // 绑定返回按钮 + const backBtn = document.getElementById('notificationBackBtn'); + if (backBtn) { + backBtn.addEventListener('click', () => { + saveNotificationSettings(); + switchPage('profile'); + }); + } + + // 绑定开关切换 + document.querySelectorAll('.settings-toggle').forEach(toggle => { + toggle.addEventListener('click', () => { + toggle.classList.toggle('active'); + }); + }); +} + +function saveNotificationSettings() { + const settings = { + enableNotification: document.getElementById('toggleNotification')?.classList.contains('active'), + enableSound: document.getElementById('toggleSound')?.classList.contains('active'), + enableVibration: document.getElementById('toggleVibration')?.classList.contains('active'), + quietHoursStart: document.getElementById('quietHoursStart')?.value || '23:00', + quietHoursEnd: document.getElementById('quietHoursEnd')?.value || '08:00' + }; + localStorage.setItem('notificationSettings', JSON.stringify(settings)); +} + +// ==================== 隐私安全页面 ==================== + +function showPrivacyPage() { + const privacyHtml = ` +
+
+ +

隐私安全

+
+ +
+
+
账号安全
+ + ${currentUser ? ` +
+
+ 修改密码 + 定期修改密码保障账号安全 +
+ › +
+ +
+
+ 账号信息 + 查看注册时间等信息 +
+ › +
+ ` : ` +
登录后可管理账号安全
+ `} +
+ +
+
隐私设置
+ +
+
+ 清除聊天记录 + 删除所有对话历史 +
+ +
+ +
+
+ 清除缓存 + 清除应用缓存数据 +
+ +
+
+ +
+
数据安全
+ +
+
+ 数据本地存储 + 所有数据存储在本地，不上传服务器 +
+ 安全 +
+ +
+
+ 对话加密 + 对话内容采用本地加密存储 +
+ 已开启 +
+
+
+
+ `; + + appContainer.innerHTML = privacyHtml; + + // 绑定返回按钮 + const backBtn = document.getElementById('privacyBackBtn'); + if (backBtn) { + backBtn.addEventListener('click', () => { + switchPage('profile'); + }); + } + + // 修改密码 + const changePasswordBtn = document.getElementById('changePasswordBtn'); + if (changePasswordBtn) { + changePasswordBtn.addEventListener('click', () => { + showChangePasswordPage(); + }); + } + + // 账号信息 + const showAccountInfoBtn = document.getElementById('showAccountInfoBtn'); + if (showAccountInfoBtn) { + showAccountInfoBtn.addEventListener('click', () => { + showAccountInfoDialog(); + }); + } + + // 清除聊天记录 + const clearChatsBtn = document.getElementById('clearChatsBtn'); + if (clearChatsBtn) { + clearChatsBtn.addEventListener('click', () => { + if (confirm('确定要清除所有聊天记录吗？')) { + conversations = []; + saveConversations(); + showToast('聊天记录已清除'); + } + }); + } + + // 清除缓存 + const clearCacheBtn = document.getElementById('clearCacheBtn'); + if (clearCacheBtn) { + clearCacheBtn.addEventListener('click', () => { + // 清除临时数据，保留用户数据 + localStorage.removeItem('currentPage'); + localStorage.removeItem('dailyUsage'); + showToast('缓存已清除'); + }); + } +} + +function showChangePasswordPage() { + const changePwdHtml = ` +
+
+ +

修改密码

+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ `; + + appContainer.innerHTML = changePwdHtml; + + // 绑定返回按钮 + const backBtn = document.getElementById('changePwdBackBtn'); + if (backBtn) { + backBtn.addEventListener('click', () => { + showPrivacyPage(); + }); + } + + // 绑定提交按钮 + const submitBtn = document.getElementById('changePwdSubmitBtn'); + if (submitBtn) { + submitBtn.addEventListener('click', handleChangePassword); + } +} + +function handleChangePassword() { + const currentPwd = document.getElementById('currentPassword')?.value; + const newPwd = document.getElementById('newPassword')?.value; + const confirmNewPwd = document.getElementById('confirmNewPassword')?.value; + + // 验证 + if (!currentPwd) { + showToast('请输入当前密码'); + return; + } + + if (!newPwd || newPwd.length < 6 || newPwd.length > 20) { + showToast('新密码需要6-20个字符'); + return; + } + + if (newPwd !== confirmNewPwd) { + showToast('两次密码不一致'); + return; + } + + // 验证当前密码 + const users = JSON.parse(localStorage.getItem('registeredUsers') || '[]'); + const user = users.find(u => u.username === currentUser.username); + + if (!user || user.password !== currentPwd) { + showToast('当前密码错误'); + return; + } + + // 更新密码 + user.password = newPwd; + localStorage.setItem('registeredUsers', JSON.stringify(users)); + + showToast('密码已修改'); + showPrivacyPage(); +} + +function showAccountInfoDialog() { + const users = JSON.parse(localStorage.getItem('registeredUsers') || '[]'); + const user = users.find(u => u.username === currentUser.username); + + const registeredAt = user?.registeredAt ? new Date(user.registeredAt).toLocaleString('zh-CN') : '未知'; + const phone = user?.phone || '未设置'; + const email = user?.email || '未设置'; + + const dialogHtml = ` +
+
+
账号信息
+
+
+ 用户名 + ${currentUser.username} +
+
+ 手机号 + ${phone} +
+
+ 邮箱 + ${email} +
+
+ 注册时间 + ${registeredAt} +
+
+ +
+
+ `; + + document.body.insertAdjacentHTML('beforeend', dialogHtml); + + document.getElementById('closeAccountInfo')?.addEventListener('click', () => { + document.getElementById('accountInfoDialog')?.remove(); + }); + + document.getElementById('accountInfoDialog')?.addEventListener('click', (e) => { + if (e.target.id === 'accountInfoDialog') { + document.getElementById('accountInfoDialog')?.remove(); + } + }); +} + +// ==================== 帮助与反馈页面 ==================== + +function showHelpPage() { + const helpHtml = ` +
+
+ +

帮助与反馈

+
+ +
+
+
使用帮助
+ +
+
💬
+
+ 如何开始对话 + 点击对话页面的 + 按钮创建新对话 +
+
+ +
+
🤖
+
+ 如何使用智能体 + 切换到智能体页面，选择想要使用的智能体 +
+
+ +
+
🔍
+
+ 如何搜索对话 + 点击对话页面的搜索按钮输入关键词 +
+
+ +
+
⭐
+
+ 如何收藏智能体 + 长按智能体卡片选择收藏，或去发现页面添加 +
+
+
+ +
+
问题反馈
+ + +
+ +
+
联系我们
+ +
+
📧
+
+ 邮箱 + support@example.com +
+
+
+
+
+ `; + + appContainer.innerHTML = helpHtml; + + // 绑定返回按钮 + const backBtn = document.getElementById('helpBackBtn'); + if (backBtn) { + backBtn.addEventListener('click', () => { + switchPage('profile'); + }); + } + + // 提交反馈 + const submitBtn = document.getElementById('submitFeedbackBtn'); + if (submitBtn) { + submitBtn.addEventListener('click', () => { + const content = document.getElementById('feedbackContent')?.value.trim(); + if (!content) { + showToast('请输入反馈内容'); + return; + } + + // 保存反馈（模拟） + const feedbacks = JSON.parse(localStorage.getItem('feedbacks') || '[]'); + feedbacks.push({ + content, + userId: currentUser?.username || 'guest', + createdAt: Date.now() + }); + localStorage.setItem('feedbacks', JSON.stringify(feedbacks)); + + showToast('感谢您的反馈'); + document.getElementById('feedbackContent').value = ''; + }); + } +} + +// ==================== 关于页面 ==================== + +function showAboutPage() { + const aboutHtml = ` +
+
+ +

关于

+
+ +
+ +
AI助手
+
v3.5.0
+ +
+

基于智谱 GLM-4.5-Air 大模型

+

提供智能对话、多种智能体服务

+
+ +
+
+ 开发者 + OpenClaw Team +
+
+ 更新日期 + 2026-04-27 +
+
+ +
+ + + +
+
+
+ `; + + appContainer.innerHTML = aboutHtml; + + // 绑定返回按钮 + const backBtn = document.getElementById('aboutBackBtn'); + if (backBtn) { + backBtn.addEventListener('click', () => { + switchPage('profile'); + }); + } + + // 检查更新 + const checkUpdateBtn = document.getElementById('checkUpdateBtn'); + if (checkUpdateBtn) { + checkUpdateBtn.addEventListener('click', () => { + showToast('当前已是最新版本'); + }); + } + + // 隐私政策 + const privacyPolicyBtn = document.getElementById('privacyPolicyBtn'); + if (privacyPolicyBtn) { + privacyPolicyBtn.addEventListener('click', () => { + showToast('隐私政策页面待完善'); + }); + } + + // 用户协议 + const userAgreementBtn = document.getElementById('userAgreementBtn'); + if (userAgreementBtn) { + userAgreementBtn.addEventListener('click', () => { + showToast('用户协议页面待完善'); + }); + } +} + // ==================== 登录页面 ==================== function showLoginPage() { diff --git a/www/index.html b/www/index.html index a4516b4..6807564 100644 --- a/www/index.html +++ b/www/index.html @@ -8,12 +8,12 @@ AI助手 - +
- - + + \ No newline at end of file diff --git a/www/style.css b/www/style.css index a8a3acf..fdb6fdd 100644 --- a/www/style.css +++ b/www/style.css @@ -833,88 +833,696 @@ body { /* ==================== 我的页面 ==================== */ -.profile-card { +.profile-user-card { + display: flex; + align-items: center; + padding: 16px; + background: white; + border-radius: 12px; + margin-bottom: 16px; + cursor: pointer; + transition: background 0.2s; +} + +.profile-user-card:hover { + background: rgba(102, 126, 234, 0.05); +} + +.profile-avatar-large { + font-size: 48px; + margin-right: 12px; +} + +.profile-user-info { + flex: 1; +} + +.profile-user-info .profile-name { + font-size: 18px; + font-weight: 600; + color: var(--text-color); + margin-bottom: 4px; +} + +.profile-signature { + font-size: 14px; + color: var(--text-light); +} + +.profile-arrow { + font-size: 20px; + color: var(--text-light); +} + +.profile-login-buttons-inline { + display: flex; + gap: 8px; +} + +.login-btn-small, .register-btn-small { + padding: 8px 16px; + background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%); + color: white; + border: none; + border-radius: 6px; + font-size: 14px; + cursor: pointer; +} + +.register-btn-small { + background: white; + border: 1px solid var(--primary); + color: var(--primary); +} + +/* ==================== 功能菜单 ==================== */ + +.profile-menu-section { + background: white; + border-radius: 12px; + margin-bottom: 16px; + overflow: hidden; +} + +.profile-menu-item { + display: flex; + align-items: center; + padding: 14px 16px; + border-bottom: 1px solid var(--border-color); + cursor: pointer; + transition: background 0.2s; +} + +.profile-menu-item:last-child { + border-bottom: none; +} + +.profile-menu-item:hover { + background: rgba(102, 126, 234, 0.05); +} + +.profile-menu-item .menu-icon { + font-size: 20px; + margin-right: 12px; + width: 24px; + text-align: center; +} + +.profile-menu-item .menu-text { + font-size: 16px; + font-weight: 500; + color: var(--text-color); +} + +.profile-menu-item .menu-desc { + font-size: 12px; + color: var(--text-light); + margin-left: 8px; + flex: 1; +} + +.profile-menu-item .menu-arrow { + font-size: 18px; + color: var(--text-light); +} + +.profile-menu-item.danger .menu-text { + color: #e53e3e; +} + +.profile-menu-item.danger:hover { + background: rgba(229, 62, 62, 0.05); +} + +/* ==================== 用户编辑页面 ==================== */ + +.edit-profile-page { display: flex; flex-direction: column; + height: 100vh; + height: 100dvh; + background: #f5f5f5; +} + +.edit-header { + display: flex; align-items: center; - padding: 24px; + padding: 12px 16px; + background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%); + color: white; +} + +.edit-header h1 { + font-size: 18px; + font-weight: 600; + margin-left: 12px; +} + +.edit-content { + flex: 1; + padding: 16px; + overflow-y: auto; +} + +.edit-section { background: white; + padding: 16px; border-radius: 12px; margin-bottom: 16px; } -.profile-avatar { - font-size: 48px; +.edit-section-title { + font-size: 14px; + font-weight: 600; + color: var(--text-color); + margin-bottom: 16px; +} + +.edit-avatar-section { + display: flex; + flex-direction: column; + align-items: center; + padding-bottom: 16px; + margin-bottom: 16px; + border-bottom: 1px solid var(--border-color); +} + +.edit-avatar-preview { + font-size: 64px; margin-bottom: 8px; } -.profile-name { - font-size: 18px; - font-weight: 600; +.edit-avatar-label { + font-size: 12px; + color: var(--text-light); +} + +.avatar-selector { + display: flex; + flex-wrap: wrap; + gap: 8px; + justify-content: center; +} + +.avatar-option { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + font-size: 28px; + background: white; + border: 2px solid var(--border-color); + border-radius: 12px; + cursor: pointer; + transition: all 0.2s; +} + +.avatar-option:hover { + border-color: var(--primary); + transform: scale(1.05); +} + +.avatar-option.selected { + border-color: var(--primary); + background: rgba(102, 126, 234, 0.1); + box-shadow: 0 0 8px rgba(102, 126, 234, 0.3); +} + +.edit-input-group { + margin-bottom: 16px; +} + +.edit-input-group:last-child { + margin-bottom: 0; +} + +.edit-input-group label { + display: block; + font-size: 14px; + font-weight: 500; color: var(--text-color); margin-bottom: 8px; } -.profile-status { +.edit-input-group input, +.edit-input-group textarea { + width: 100%; + padding: 12px; + border: 1px solid var(--border-color); + border-radius: 8px; font-size: 14px; - color: #22c55e; - margin-bottom: 16px; + outline: none; + transition: border-color 0.2s; } -.profile-status.guest { +.edit-input-group input:focus, +.edit-input-group textarea:focus { + border-color: var(--primary); +} + +.edit-input-group textarea { + resize: none; + font-family: inherit; +} + +.edit-input-group.readonly input { + background: var(--bg-color); color: var(--text-light); } -.profile-login-buttons { - display: flex; - flex-direction: column; - gap: 12px; - width: 100%; +.readonly-tip { + font-size: 12px; + color: var(--text-light); + margin-top: 4px; } -.login-btn, .register-btn, .logout-btn { +.gender-selector { + display: flex; + gap: 8px; +} + +.gender-option { + padding: 10px 16px; + background: white; + border: 1px solid var(--border-color); + border-radius: 8px; + font-size: 14px; + cursor: pointer; + transition: all 0.2s; +} + +.gender-option:hover { + border-color: var(--primary); +} + +.gender-option.selected { + border-color: var(--primary); + background: rgba(102, 126, 234, 0.1); + color: var(--primary); +} + +.edit-save-btn { + width: 100%; + padding: 14px; + background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%); + color: white; + border: none; + border-radius: 10px; + font-size: 16px; + font-weight: 500; + cursor: pointer; + margin-top: 16px; +} + +.edit-save-btn:hover { + opacity: 0.9; +} + +/* ==================== 设置页面 ==================== */ + +.settings-page { + display: flex; + flex-direction: column; + height: 100vh; + height: 100dvh; + background: #f5f5f5; +} + +.settings-header { + display: flex; + align-items: center; + padding: 12px 16px; + background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%); + color: white; +} + +.settings-header h1 { + font-size: 18px; + font-weight: 600; + margin-left: 12px; +} + +.settings-content { + flex: 1; + padding: 16px; + overflow-y: auto; +} + +.settings-section { + background: white; + padding: 16px; + border-radius: 12px; + margin-bottom: 16px; +} + +.settings-section-title { + font-size: 14px; + font-weight: 600; + color: var(--text-color); + margin-bottom: 16px; +} + +.settings-item { + display: flex; + align-items: center; + padding: 12px 0; + border-bottom: 1px solid var(--border-color); +} + +.settings-item:last-child { + border-bottom: none; + padding-bottom: 0; +} + +.settings-info { + flex: 1; +} + +.settings-label { + font-size: 15px; + font-weight: 500; + color: var(--text-color); +} + +.settings-desc { + font-size: 12px; + color: var(--text-light); + display: block; + margin-top: 2px; +} + +.settings-arrow { + font-size: 18px; + color: var(--text-light); +} + +.settings-toggle { + width: 50px; + height: 28px; + background: var(--border-color); + border-radius: 14px; + position: relative; + cursor: pointer; + transition: background 0.2s; +} + +.settings-toggle.active { + background: var(--primary); +} + +.toggle-switch { + width: 24px; + height: 24px; + background: white; + border-radius: 12px; + position: absolute; + left: 2px; + top: 2px; + transition: left 0.2s; +} + +.settings-toggle.active .toggle-switch { + left: 24px; +} + +.settings-time-input { + padding: 8px 12px; + border: 1px solid var(--border-color); + border-radius: 8px; + font-size: 14px; +} + +.settings-tip { + font-size: 12px; + color: var(--text-light); + margin-top: 8px; +} + +.settings-action-btn { + padding: 8px 16px; + background: var(--primary); + color: white; + border: none; + border-radius: 8px; + font-size: 14px; + cursor: pointer; +} + +.settings-action-btn.danger { + background: #e53e3e; +} + +.settings-badge { + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; +} + +.settings-badge.safe { + background: rgba(34, 197, 94, 0.1); + color: #22c55e; +} + +/* ==================== 帮助页面 ==================== */ + +.help-item { + display: flex; + align-items: center; + padding: 12px 0; + border-bottom: 1px solid var(--border-color); +} + +.help-item:last-child { + border-bottom: none; +} + +.help-icon { + font-size: 24px; + margin-right: 12px; +} + +.help-info { + flex: 1; +} + +.help-title { + font-size: 15px; + font-weight: 500; + color: var(--text-color); +} + +.help-desc { + font-size: 12px; + color: var(--text-light); + display: block; + margin-top: 2px; +} + +.feedback-form { + margin-top: 16px; +} + +.feedback-form textarea { + width: 100%; + padding: 12px; + border: 1px solid var(--border-color); + border-radius: 8px; + font-size: 14px; + resize: none; + font-family: inherit; +} + +.feedback-submit-btn { width: 100%; padding: 12px; background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; - font-size: 16px; - font-weight: 500; + font-size: 14px; + margin-top: 12px; cursor: pointer; - transition: transform 0.2s; } -.login-btn:hover, .register-btn:hover, .logout-btn:hover { - transform: scale(1.02); +.contact-item { + display: flex; + align-items: center; + padding: 12px 0; } -.register-btn { - background: white; - border: 2px solid var(--primary); - color: var(--primary); +.contact-icon { + font-size: 20px; + margin-right: 12px; } -.logout-btn { - background: #fee2e2; - color: #e53e3e; -} - -.skip-btn { - width: 100%; - padding: 10px; - background: transparent; - border: 1px solid var(--border-color); +.contact-info .contact-label { + font-size: 14px; color: var(--text-light); +} + +.contact-info .contact-value { + font-size: 15px; + color: var(--text-color); +} + +/* ==================== 关于页面 ==================== */ + +.about-content { + text-align: center; +} + +.about-logo { + font-size: 72px; + margin-bottom: 16px; +} + +.about-name { + font-size: 24px; + font-weight: 600; + color: var(--text-color); + margin-bottom: 8px; +} + +.about-version { + font-size: 14px; + color: var(--text-light); + margin-bottom: 24px; +} + +.about-info { + padding: 16px; + background: white; + border-radius: 12px; + margin-bottom: 16px; +} + +.about-info p { + font-size: 14px; + color: var(--text-light); + margin: 4px 0; +} + +.about-section { + background: white; + padding: 16px; + border-radius: 12px; + margin-bottom: 16px; +} + +.about-item { + display: flex; + justify-content: space-between; + padding: 8px 0; +} + +.about-label { + font-size: 14px; + color: var(--text-light); +} + +.about-value { + font-size: 14px; + color: var(--text-color); +} + +.about-links { + background: white; + border-radius: 12px; + overflow: hidden; +} + +.about-link-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 14px 16px; + border-bottom: 1px solid var(--border-color); + cursor: pointer; +} + +.about-link-item:last-child { + border-bottom: none; +} + +.about-link-item:hover { + background: rgba(102, 126, 234, 0.05); +} + +.about-link-item span:first-child { + font-size: 15px; + color: var(--text-color); +} + +.about-link-item .about-arrow { + font-size: 18px; + color: var(--text-light); +} + +/* ==================== 信息对话框 ==================== */ + +.info-dialog { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 2000; +} + +.info-dialog-content { + background: white; + padding: 24px; + border-radius: 16px; + max-width: 300px; + width: 90%; +} + +.info-dialog-title { + font-size: 18px; + font-weight: 600; + color: var(--text-color); + margin-bottom: 16px; + text-align: center; +} + +.info-dialog-items { + margin-bottom: 16px; +} + +.info-item { + display: flex; + justify-content: space-between; + padding: 8px 0; + border-bottom: 1px solid var(--border-color); +} + +.info-item:last-child { + border-bottom: none; +} + +.info-label { + font-size: 14px; + color: var(--text-light); +} + +.info-value { + font-size: 14px; + color: var(--text-color); +} + +.info-dialog-close { + width: 100%; + padding: 12px; + background: var(--primary); + color: white; + border: none; border-radius: 8px; font-size: 14px; cursor: pointer; } -.skip-btn:hover { - background: rgba(0,0,0,0.05); -} - /* ==================== 配额显示 ==================== */ .quota-card {