From c8cea4c1a10a040e1d51920cc0e49ce1305bcfa1 Mon Sep 17 00:00:00 2001 From: hubian <908234780@qq.com> Date: Mon, 27 Apr 2026 11:06:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E6=B3=A8=E5=86=8C?= =?UTF-8?q?=E7=B3=BB=E7=BB=9F=20+=20=E6=B8=B8=E5=AE=A2=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E9=99=90=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 功能： - 登录/注册界面（本地存储用户数据） - 我的页面显示用户状态、登录/退出按钮 - 游客配额显示（对话会话/消息/智能体消息） 游客限制： - 每天最多1个对话会话 - 每天最多20条对话消息 - 只能使用通用助手智能体 - 每天最多20条智能体消息 - 登录用户无限制 限制提示： - 达到限制弹出提示对话框 - 提示登录解锁全部功能 --- www/app.js | 606 ++++++++++++++++++++++++++++++++++++++++++++++++- www/index.html | 6 +- www/style.css | 315 +++++++++++++++++++++++++ 3 files changed, 913 insertions(+), 14 deletions(-) diff --git a/www/app.js b/www/app.js index 3b1ab61..e1fe6f7 100644 --- a/www/app.js +++ b/www/app.js @@ -67,6 +67,166 @@ let pinnedAgents = { let currentAgent = null; // 当前选中的智能体 +// 用户状态 +let currentUser = null; // 当前登录用户 { username, password, registeredAt } + +// 每日使用统计（未登录用户） +let dailyUsage = { + date: null, // 日期 YYYY-MM-DD + chatSessions: 0, // 对话会话数 + chatMessages: 0, // 对话消息数 + agentUsed: null, // 使用的智能体ID（只能用一个） + agentMessages: 0 // 智能体消息数 +}; + +// 未登录用户限制 +const GUEST_LIMITS = { + maxChatSessionsPerDay: 1, // 每天最多1个对话会话 + maxChatMessagesPerDay: 20, // 每天最多20条对话消息 + maxAgentPerDay: 1, // 每天只能用1个智能体（通用助手） + maxAgentMessagesPerDay: 20 // 每天最多20条智能体消息 +}; + +// 获取今日日期字符串 +function getTodayDate() { + const today = new Date(); + return `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`; +} + +// 检查并重置每日使用统计 +function checkDailyUsage() { + const today = getTodayDate(); + if (dailyUsage.date !== today) { + // 新的一天，重置统计 + dailyUsage = { + date: today, + chatSessions: 0, + chatMessages: 0, + agentUsed: null, + agentMessages: 0 + }; + saveDailyUsage(); + } +} + +// 保存用户状态 +function saveCurrentUser() { + if (currentUser) { + localStorage.setItem('currentUser', JSON.stringify(currentUser)); + } else { + localStorage.removeItem('currentUser'); + } +} + +// 保存每日使用统计 +function saveDailyUsage() { + localStorage.setItem('dailyUsage', JSON.stringify(dailyUsage)); +} + +// 检查是否可以创建新对话（未登录用户） +function canCreateNewChat() { + if (currentUser) return true; // 登录用户无限制 + + checkDailyUsage(); + return dailyUsage.chatSessions < GUEST_LIMITS.maxChatSessionsPerDay; +} + +// 检查是否可以发送对话消息（未登录用户） +function canSendChatMessage() { + if (currentUser) return true; // 登录用户无限制 + + checkDailyUsage(); + return dailyUsage.chatMessages < GUEST_LIMITS.maxChatMessagesPerDay; +} + +// 检查是否可以使用智能体（未登录用户） +function canUseAgent(agentId) { + if (currentUser) return true; // 登录用户无限制 + + checkDailyUsage(); + + // 未登录用户只能使用通用助手 + if (agentId !== 'assistant') { + return { allowed: false, reason: 'guest_agent_only' }; + } + + // 如果今天还没用智能体，可以用 + if (!dailyUsage.agentUsed) { + return { allowed: true }; + } + + // 如果已经用了其他智能体，不能换 + if (dailyUsage.agentUsed !== agentId) { + return { allowed: false, reason: 'guest_one_agent_only' }; + } + + return { allowed: true }; +} + +// 检查是否可以发送智能体消息（未登录用户） +function canSendAgentMessage() { + if (currentUser) return true; // 登录用户无限制 + + checkDailyUsage(); + return dailyUsage.agentMessages < GUEST_LIMITS.maxAgentMessagesPerDay; +} + +// 增加对话会话计数 +function incrementChatSession() { + if (!currentUser) { + checkDailyUsage(); + dailyUsage.chatSessions++; + saveDailyUsage(); + } +} + +// 增加对话消息计数 +function incrementChatMessage() { + if (!currentUser) { + checkDailyUsage(); + dailyUsage.chatMessages++; + saveDailyUsage(); + } +} + +// 设置使用的智能体（未登录用户） +function setAgentUsed(agentId) { + if (!currentUser) { + checkDailyUsage(); + if (!dailyUsage.agentUsed) { + dailyUsage.agentUsed = agentId; + saveDailyUsage(); + } + } +} + +// 增加智能体消息计数 +function incrementAgentMessage() { + if (!currentUser) { + checkDailyUsage(); + dailyUsage.agentMessages++; + saveDailyUsage(); + } +} + +// 获取剩余配额提示 +function getRemainingQuota() { + if (currentUser) return null; // 登录用户无限制 + + checkDailyUsage(); + + const chatSessionRemain = GUEST_LIMITS.maxChatSessionsPerDay - dailyUsage.chatSessions; + const chatMsgRemain = GUEST_LIMITS.maxChatMessagesPerDay - dailyUsage.chatMessages; + const agentMsgRemain = GUEST_LIMITS.maxAgentMessagesPerDay - dailyUsage.agentMessages; + + return { + chatSessionRemain, + chatMsgRemain, + agentMsgRemain, + agentUsed: dailyUsage.agentUsed + }; +} + // 获取使用智能体的对话列表（按时间倒序） function getAgentConversationHistory(limit = 5) { return conversations @@ -145,6 +305,21 @@ document.addEventListener('DOMContentLoaded', () => { pinnedAgents = JSON.parse(savedPinnedAgents); } + // 加载用户登录状态 + const savedUser = localStorage.getItem('currentUser'); + if (savedUser) { + currentUser = JSON.parse(savedUser); + } + + // 加载每日使用统计 + const savedDailyUsage = localStorage.getItem('dailyUsage'); + if (savedDailyUsage) { + dailyUsage = JSON.parse(savedDailyUsage); + } + + // 检查并重置每日使用统计 + checkDailyUsage(); + // 根据用户配置更新显示的智能体 updateAgentsDisplay(); @@ -1113,6 +1288,8 @@ function showAgentFavoritePage() { // ==================== 我的页面 ==================== function renderProfilePage() { + const quota = getRemainingQuota(); + return `
@@ -1121,15 +1298,46 @@ function renderProfilePage() {
-
👤
-
用户
+
${currentUser ? '👤' : '👤'}
+
${currentUser ? currentUser.username : '游客'}
+ ${currentUser + ? `
已登录
+ ` + : `
未登录
+ ` + }
-
-
- - 设置 + ${!currentUser && quota ? ` +
+
今日使用配额（游客）
+
+
+ 对话会话 + ${quota.chatSessionRemain}/${GUEST_LIMITS.maxChatSessionsPerDay} +
+
+ 对话消息 + ${quota.chatMsgRemain}/${GUEST_LIMITS.maxChatMessagesPerDay} +
+
+ 智能体消息 + ${quota.agentMsgRemain}/${GUEST_LIMITS.maxAgentMessagesPerDay} +
+
+ 可用智能体 + 仅通用助手 🤖 +
+
登录后解锁全部功能
+
+ ` : ''} + +
关于 @@ -1141,7 +1349,7 @@ function renderProfilePage() {
-

AI助手 v3.2.1

+

AI助手 v3.3.0

基于智谱 GLM-4.5-Air

@@ -1150,12 +1358,53 @@ function renderProfilePage() { } function bindProfilePageEvents() { + // 登录按钮 + const loginBtn = document.getElementById('loginBtn'); + if (loginBtn) { + loginBtn.addEventListener('click', () => { + showLoginPage(); + }); + } + + // 注册按钮 + const registerBtn = document.getElementById('registerBtn'); + if (registerBtn) { + registerBtn.addEventListener('click', () => { + showRegisterPage(); + }); + } + + // 跳过按钮（游客模式） + const skipBtn = document.getElementById('skipBtn'); + if (skipBtn) { + skipBtn.addEventListener('click', () => { + showToast('以游客模式继续使用'); + switchPage('chats'); + }); + } + + // 退出登录按钮 + const logoutBtn = document.getElementById('logoutBtn'); + if (logoutBtn) { + logoutBtn.addEventListener('click', () => { + if (confirm('确定要退出登录吗？')) { + currentUser = null; + saveCurrentUser(); + showToast('已退出登录'); + switchPage('profile'); + } + }); + } + + // 清除数据按钮 const clearDataBtn = document.getElementById('clearDataBtn'); if (clearDataBtn) { clearDataBtn.addEventListener('click', () => { - if (confirm('确定要清除所有数据吗？这将删除所有对话记录。')) { + if (confirm('确定要清除所有数据吗？这将删除所有对话记录和账户信息。')) { localStorage.clear(); conversations = []; + currentUser = null; + dailyUsage = { date: null, chatSessions: 0, chatMessages: 0, agentUsed: null, agentMessages: 0 }; showToast('数据已清除'); showMainPage(); } @@ -1163,6 +1412,280 @@ function bindProfilePageEvents() { } } +// ==================== 登录页面 ==================== + +function showLoginPage() { + const loginHtml = ` +
+
+ +

登录

+
+ +
+
+
+ + +
+
+ + +
+ +
+ +
+

还没有账号？立即注册

+
+
+
+ `; + + appContainer.innerHTML = loginHtml; + + // 绑定事件 + const backBtn = document.getElementById('loginBackBtn'); + if (backBtn) { + backBtn.addEventListener('click', () => { + showMainPage(); + }); + } + + const submitBtn = document.getElementById('loginSubmitBtn'); + if (submitBtn) { + submitBtn.addEventListener('click', handleLogin); + } + + const goToRegister = document.getElementById('goToRegister'); + if (goToRegister) { + goToRegister.addEventListener('click', () => { + showRegisterPage(); + }); + } + + // 回车登录 + document.getElementById('loginPassword')?.addEventListener('keydown', (e) => { + if (e.key === 'Enter') handleLogin(); + }); +} + +function handleLogin() { + const username = document.getElementById('loginUsername')?.value.trim(); + const password = document.getElementById('loginPassword')?.value; + + if (!username) { + showToast('请输入用户名'); + return; + } + + if (!password) { + showToast('请输入密码'); + return; + } + + // 检查本地存储的用户 + const users = JSON.parse(localStorage.getItem('registeredUsers') || '[]'); + const user = users.find(u => u.username === username && u.password === password); + + if (user) { + currentUser = { username: user.username, registeredAt: user.registeredAt }; + saveCurrentUser(); + showToast('登录成功'); + showMainPage(); + } else { + showToast('用户名或密码错误'); + } +} + +// ==================== 注册页面 ==================== + +function showRegisterPage() { + const registerHtml = ` +
+
+ +

注册

+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+ +
+ +
+

已有账号？立即登录

+
+
+
+ `; + + appContainer.innerHTML = registerHtml; + + // 绑定事件 + const backBtn = document.getElementById('registerBackBtn'); + if (backBtn) { + backBtn.addEventListener('click', () => { + showMainPage(); + }); + } + + const submitBtn = document.getElementById('registerSubmitBtn'); + if (submitBtn) { + submitBtn.addEventListener('click', handleRegister); + } + + const goToLogin = document.getElementById('goToLogin'); + if (goToLogin) { + goToLogin.addEventListener('click', () => { + showLoginPage(); + }); + } + + // 回车注册 + document.getElementById('registerPasswordConfirm')?.addEventListener('keydown', (e) => { + if (e.key === 'Enter') handleRegister(); + }); +} + +function handleRegister() { + const username = document.getElementById('registerUsername')?.value.trim(); + const password = document.getElementById('registerPassword')?.value; + const passwordConfirm = document.getElementById('registerPasswordConfirm')?.value; + + if (!username || username.length < 3 || username.length > 20) { + showToast('用户名需要3-20个字符'); + return; + } + + if (!password || password.length < 6 || password.length > 20) { + showToast('密码需要6-20个字符'); + return; + } + + if (password !== passwordConfirm) { + showToast('两次密码不一致'); + return; + } + + // 检查用户名是否已存在 + const users = JSON.parse(localStorage.getItem('registeredUsers') || '[]'); + if (users.find(u => u.username === username)) { + showToast('用户名已存在'); + return; + } + + // 注册新用户 + const newUser = { + username, + password, + registeredAt: Date.now() + }; + + users.push(newUser); + localStorage.setItem('registeredUsers', JSON.stringify(users)); + + // 自动登录 + currentUser = { username: newUser.username, registeredAt: newUser.registeredAt }; + saveCurrentUser(); + + showToast('注册成功'); + showMainPage(); +} + +// ==================== 限制提示 ==================== + +function showLimitDialog(type) { + let title = ''; + let message = ''; + let showLoginBtn = true; + + switch (type) { + case 'chat_session': + title = '对话会话已达上限'; + message = `游客每天只能创建 ${GUEST_LIMITS.maxChatSessionsPerDay} 个对话会话。\n登录后即可无限使用。`; + break; + case 'chat_message': + title = '对话消息已达上限'; + message = `游客每天最多发送 ${GUEST_LIMITS.maxChatMessagesPerDay} 条对话消息。\n登录后即可无限使用。`; + break; + case 'agent_type': + title = '智能体限制'; + message = `游客只能使用「通用助手」智能体。\n登录后即可使用全部智能体。`; + break; + case 'agent_change': + title = '智能体切换限制'; + message = `游客每天只能使用一个智能体。\n您今天已使用过智能体，明天才能更换。\n登录后即可自由切换智能体。`; + break; + case 'agent_message': + title = '智能体消息已达上限'; + message = `游客每天最多发送 ${GUEST_LIMITS.maxAgentMessagesPerDay} 条智能体消息。\n登录后即可无限使用。`; + break; + default: + title = '使用限制'; + message = '登录后解锁全部功能。'; + } + + const dialogHtml = ` +
+
+
⚠️
+
${title}
+
${message}
+
+ ${showLoginBtn ? '' : ''} + +
+
+
+ `; + + // 添加到页面 + const existingDialog = document.getElementById('limitDialog'); + if (existingDialog) existingDialog.remove(); + + document.body.insertAdjacentHTML('beforeend', dialogHtml); + + // 绑定事件 + const loginBtn = document.getElementById('limitLoginBtn'); + if (loginBtn) { + loginBtn.addEventListener('click', () => { + document.getElementById('limitDialog')?.remove(); + showLoginPage(); + }); + } + + const cancelBtn = document.getElementById('limitCancelBtn'); + if (cancelBtn) { + cancelBtn.addEventListener('click', () => { + document.getElementById('limitDialog')?.remove(); + }); + } + + // 点击背景关闭 + document.getElementById('limitDialog')?.addEventListener('click', (e) => { + if (e.target.id === 'limitDialog') { + document.getElementById('limitDialog')?.remove(); + } + }); +} + // 查看全部历史使用 function showAgentHistoryPage() { const allAgentConvos = getAgentConversationHistory(100); // 获取所有 @@ -1222,11 +1745,36 @@ function openAgent(agentId) { currentAgent = systemAgents.find(a => a.id === agentId); if (!currentAgent) return; + // 检查未登录用户的智能体限制 + if (!currentUser) { + const check = canUseAgent(agentId); + if (!check.allowed) { + if (check.reason === 'guest_agent_only') { + showLimitDialog('agent_type'); + return; + } else if (check.reason === 'guest_one_agent_only') { + showLimitDialog('agent_change'); + return; + } + } + + // 记录使用的智能体 + setAgentUsed(agentId); + } + // 创建新对话并设置智能体 - createNewConversation(); - currentConversation.agentId = agentId; - currentConversation.title = currentAgent.name; + const newConv = { + id: Date.now().toString(), + title: currentAgent.name, + messages: [], + agentId: agentId, + createdAt: Date.now(), + updatedAt: Date.now() + }; + + conversations.unshift(newConv); saveConversations(); + currentConversation = newConv; // 显示对话界面 showAgentChatPage(); @@ -1895,6 +2443,12 @@ function togglePinConversation(convId) { // 创建新对话 function createNewConversation() { + // 检查未登录用户的对话限制 + if (!currentUser && !canCreateNewChat()) { + showLimitDialog('chat_session'); + return; + } + const newConv = { id: Date.now().toString(), title: '新对话', @@ -1905,6 +2459,10 @@ function createNewConversation() { conversations.unshift(newConv); saveConversations(); + + // 增加对话会话计数（未登录用户） + incrementChatSession(); + openConversation(newConv.id); } @@ -2161,6 +2719,23 @@ async function sendMessage() { const text = userInput.value.trim(); if (!text || isLoading) return; + + // 检查未登录用户的消息限制 + if (!currentUser) { + if (currentConversation.agentId) { + // 智能体对话 + if (!canSendAgentMessage()) { + showLimitDialog('agent_message'); + return; + } + } else { + // 普通对话 + if (!canSendChatMessage()) { + showLimitDialog('chat_message'); + return; + } + } + } // 隐藏欢迎界面 welcome.style.display = 'none'; @@ -2181,6 +2756,15 @@ async function sendMessage() { currentConversation.updatedAt = Date.now(); saveConversations(); + // 增加消息计数（未登录用户） + if (!currentUser) { + if (currentConversation.agentId) { + incrementAgentMessage(); + } else { + incrementChatMessage(); + } + } + // 发送新消息时启用自动滚动 autoScrollEnabled = true; diff --git a/www/index.html b/www/index.html index 3a36bac..7d5b759 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 cf41cc7..2404598 100644 --- a/www/style.css +++ b/www/style.css @@ -689,6 +689,321 @@ body { opacity: 1; } +/* ==================== 登录注册页面 ==================== */ + +.auth-page { + display: flex; + flex-direction: column; + height: 100vh; + height: 100dvh; + background: #f5f5f5; +} + +.auth-header { + display: flex; + align-items: center; + padding: 12px 16px; + background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%); + color: white; +} + +.auth-header h1 { + font-size: 18px; + font-weight: 600; + margin-left: 12px; +} + +.auth-content { + flex: 1; + padding: 24px 16px; + display: flex; + flex-direction: column; +} + +.auth-form { + background: white; + padding: 24px; + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); +} + +.auth-input-group { + margin-bottom: 20px; +} + +.auth-input-group label { + display: block; + font-size: 14px; + font-weight: 500; + color: var(--text-color); + margin-bottom: 8px; +} + +.auth-input-group input { + width: 100%; + padding: 12px 16px; + border: 2px solid var(--border-color); + border-radius: 10px; + font-size: 16px; + outline: none; + transition: border-color 0.2s; +} + +.auth-input-group input:focus { + border-color: var(--primary); +} + +.auth-submit-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: 600; + cursor: pointer; + transition: transform 0.2s; +} + +.auth-submit-btn:hover { + transform: scale(1.02); +} + +.auth-submit-btn:active { + transform: scale(0.98); +} + +.auth-footer { + text-align: center; + padding: 24px; + color: var(--text-light); +} + +.auth-link { + color: var(--primary); + font-weight: 500; + cursor: pointer; +} + +.auth-link:hover { + color: #5a67d8; +} + +/* ==================== 我的页面 ==================== */ + +.profile-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 24px; + background: white; + border-radius: 12px; + margin-bottom: 16px; +} + +.profile-avatar { + font-size: 48px; + margin-bottom: 8px; +} + +.profile-name { + font-size: 18px; + font-weight: 600; + color: var(--text-color); + margin-bottom: 8px; +} + +.profile-status { + font-size: 14px; + color: #22c55e; + margin-bottom: 16px; +} + +.profile-status.guest { + color: var(--text-light); +} + +.profile-login-buttons { + display: flex; + flex-direction: column; + gap: 12px; + width: 100%; +} + +.login-btn, .register-btn, .logout-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; + cursor: pointer; + transition: transform 0.2s; +} + +.login-btn:hover, .register-btn:hover, .logout-btn:hover { + transform: scale(1.02); +} + +.register-btn { + background: white; + border: 2px solid var(--primary); + color: var(--primary); +} + +.logout-btn { + background: #fee2e2; + color: #e53e3e; +} + +.skip-btn { + width: 100%; + padding: 10px; + background: transparent; + border: 1px solid var(--border-color); + color: var(--text-light); + border-radius: 8px; + font-size: 14px; + cursor: pointer; +} + +.skip-btn:hover { + background: rgba(0,0,0,0.05); +} + +/* ==================== 配额显示 ==================== */ + +.quota-card { + background: white; + padding: 16px; + border-radius: 12px; + margin-bottom: 16px; + border: 1px solid var(--border-color); +} + +.quota-title { + font-size: 14px; + font-weight: 600; + color: var(--text-color); + margin-bottom: 12px; +} + +.quota-items { + display: flex; + flex-direction: column; + gap: 8px; +} + +.quota-item { + display: flex; + justify-content: space-between; + align-items: center; +} + +.quota-label { + font-size: 14px; + color: var(--text-light); +} + +.quota-value { + font-size: 14px; + font-weight: 500; + color: var(--primary); +} + +.quota-tip { + text-align: center; + font-size: 12px; + color: #f59e0b; + margin-top: 12px; + padding-top: 12px; + border-top: 1px solid var(--border-color); +} + +/* ==================== 限制提示对话框 ==================== */ + +.limit-dialog { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 2000; +} + +.limit-dialog-content { + background: white; + padding: 24px; + border-radius: 16px; + max-width: 300px; + text-align: center; + animation: dialogSlideUp 0.2s ease; +} + +@keyframes dialogSlideUp { + from { transform: translateY(20px); opacity: 0; } + to { transform: translateY(0); opacity: 1; } +} + +.limit-dialog-icon { + font-size: 48px; + margin-bottom: 16px; +} + +.limit-dialog-title { + font-size: 18px; + font-weight: 600; + color: var(--text-color); + margin-bottom: 12px; +} + +.limit-dialog-message { + font-size: 14px; + color: var(--text-light); + line-height: 1.6; + margin-bottom: 20px; + white-space: pre-line; +} + +.limit-dialog-actions { + display: flex; + gap: 12px; +} + +.limit-dialog-btn { + flex: 1; + padding: 12px; + border-radius: 8px; + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: all 0.2s; +} + +.limit-dialog-btn.login { + background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%); + color: white; + border: none; +} + +.limit-dialog-btn.login:hover { + transform: scale(1.02); +} + +.limit-dialog-btn.cancel { + background: white; + border: 1px solid var(--border-color); + color: var(--text-light); +} + +.limit-dialog-btn.cancel:hover { + background: var(--bg-color); +} + /* 最近使用的智能体列表 */ .recent-agents-list { display: flex;