diff --git a/www/app.js b/www/app.js index 39216eb..1d196f6 100644 --- a/www/app.js +++ b/www/app.js @@ -45,6 +45,71 @@ let agents = [ let currentAgent = null; // 当前选中的智能体 +// 智能体使用历史记录 +let agentUsageHistory = []; + +// 加载智能体使用历史 +function loadAgentUsageHistory() { + const saved = localStorage.getItem('agentUsageHistory'); + if (saved) { + agentUsageHistory = JSON.parse(saved); + } +} + +// 保存智能体使用历史 +function saveAgentUsageHistory() { + localStorage.setItem('agentUsageHistory', JSON.stringify(agentUsageHistory)); +} + +// 记录智能体使用 +function recordAgentUsage(agentId) { + const record = agentUsageHistory.find(r => r.agentId === agentId); + if (record) { + record.usageCount++; + record.lastUsedAt = Date.now(); + } else { + agentUsageHistory.push({ + agentId: agentId, + usageCount: 1, + lastUsedAt: Date.now() + }); + } + saveAgentUsageHistory(); +} + +// 格式化使用时间 +function formatUsageTime(timestamp) { + const now = Date.now(); + const diff = now - timestamp; + + const minute = 60 * 1000; + const hour = 60 * minute; + const day = 24 * hour; + const week = 7 * day; + const month = 30 * day; + const year = 365 * day; + + if (diff < minute) return '刚刚'; + if (diff < hour) return Math.floor(diff / minute) + '分钟前'; + if (diff < day) return Math.floor(diff / hour) + '小时前'; + if (diff < week) return Math.floor(diff / day) + '天前'; + if (diff < month) return Math.floor(diff / week) + '周前'; + if (diff < year) return Math.floor(diff / month) + '月前'; + return Math.floor(diff / year) + '年前'; +} + +// 获取最近使用的智能体（最多5个） +function getRecentUsedAgents(limit = 5) { + return agentUsageHistory + .sort((a, b) => b.lastUsedAt - a.lastUsedAt) + .slice(0, limit) + .map(record => { + const agent = agents.find(a => a.id === record.agentId); + return { ...agent, ...record }; + }) + .filter(a => a.id); // 过滤掉可能被删除的智能体 +} + // 功能开关 let enableThinking = false; // 深度思考 let enableSearch = false; // 联网搜索 @@ -71,6 +136,9 @@ document.addEventListener('DOMContentLoaded', () => { conversations = JSON.parse(saved); } + // 加载智能体使用历史 + loadAgentUsageHistory(); + // 兼容旧数据格式（chat_history） const oldHistory = localStorage.getItem('chat_history'); if (oldHistory && conversations.length === 0) { @@ -333,6 +401,10 @@ function renderAgentsPage() { const studyAgents = agents.filter(a => a.category === 'study'); const lifeAgents = agents.filter(a => a.category === 'life'); + // 获取最近使用的智能体（最多5个） + const recentAgents = getRecentUsedAgents(5); + const totalRecentCount = agentUsageHistory.length; + return `
@@ -340,6 +412,32 @@ function renderAgentsPage() {
+ + ${recentAgents.length > 0 ? ` +
+
🕐 最近使用
+
+ ${recentAgents.map(agent => ` +
+
+ ${agent.avatar} + ${agent.name} +
+
+ ${agent.usageCount}次 + ${formatUsageTime(agent.lastUsedAt)} +
+
+ `).join('')} + ${totalRecentCount > 5 ? ` +
+ 查看全部 ${totalRecentCount} 个历史使用... +
+ ` : ''} +
+
+ ` : ''} +
🔥 热门智能体
@@ -401,12 +499,29 @@ function renderAgentsPage() { } function bindAgentsPageEvents() { + // 智能体卡片点击 document.querySelectorAll('.agent-card').forEach(card => { card.addEventListener('click', () => { const id = card.getAttribute('data-id'); openAgent(id); }); }); + + // 最近使用智能体点击 + document.querySelectorAll('.recent-agent-item').forEach(item => { + item.addEventListener('click', () => { + const id = item.getAttribute('data-id'); + openAgent(id); + }); + }); + + // 查看全部历史使用 + const showAllRecentBtn = document.getElementById('showAllRecentBtn'); + if (showAllRecentBtn) { + showAllRecentBtn.addEventListener('click', () => { + showAgentHistoryPage(); + }); + } } // ==================== 我的页面 ==================== @@ -462,11 +577,66 @@ function bindProfilePageEvents() { } } +// 查看全部历史使用 +function showAgentHistoryPage() { + const allRecentAgents = getRecentUsedAgents(100); // 获取所有 + + const historyHtml = ` +
+
+ +

历史使用

+
+ +
+ ${allRecentAgents.length === 0 + ? '
暂无历史使用记录
' + : allRecentAgents.map(agent => ` +
+
+ ${agent.avatar} + ${agent.name} +
+
+ ${agent.usageCount}次 + ${formatUsageTime(agent.lastUsedAt)} +
+
+ `).join('') + } +
+
+ `; + + appContainer.innerHTML = historyHtml; + + // 绑定返回按钮 + const backBtn = document.getElementById('historyBackBtn'); + if (backBtn) { + backBtn.addEventListener('click', () => { + showMainPage(); + }); + } + + // 绑定智能体点击 + document.querySelectorAll('.agent-history-item').forEach(item => { + item.addEventListener('click', () => { + const id = item.getAttribute('data-id'); + openAgent(id); + }); + }); +} + // 打开智能体对话 function openAgent(agentId) { currentAgent = agents.find(a => a.id === agentId); if (!currentAgent) return; + // 记录智能体使用历史 + recordAgentUsage(agentId); + // 创建新对话并设置智能体 createNewConversation(); currentConversation.agentId = agentId; diff --git a/www/index.html b/www/index.html index 759634f..2f4b087 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 e4fcd7e..5dcb76f 100644 --- a/www/style.css +++ b/www/style.css @@ -227,6 +227,143 @@ body { text-align: center; } +/* 最近使用的智能体列表 */ +.recent-agents-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +.recent-agent-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px; + background: white; + border: 1px solid var(--border-color); + border-radius: 10px; + cursor: pointer; + transition: all 0.2s; +} + +.recent-agent-item:hover { + border-color: var(--primary); + background: rgba(102, 126, 234, 0.05); +} + +.recent-agent-left { + display: flex; + align-items: center; + gap: 12px; +} + +.recent-agent-avatar { + font-size: 20px; +} + +.recent-agent-name { + font-size: 14px; + font-weight: 500; + color: var(--text-color); +} + +.recent-agent-right { + display: flex; + align-items: center; + gap: 12px; + font-size: 12px; + color: var(--text-light); +} + +.recent-agent-usage { + color: var(--primary); +} + +.recent-agent-more { + padding: 12px 16px; + background: white; + border: 1px solid var(--border-color); + border-radius: 10px; + cursor: pointer; + text-align: center; + font-size: 14px; + color: var(--primary); + transition: all 0.2s; +} + +.recent-agent-more:hover { + background: rgba(102, 126, 234, 0.05); +} + +/* 智能体历史页面 */ +.agent-history-page { + display: flex; + flex-direction: column; + height: 100vh; + height: 100dvh; +} + +.back-btn-white { + background: transparent; + border: none; + color: white; + padding: 8px; + cursor: pointer; +} + +.agent-history-content { + flex: 1; + padding: 16px; + overflow-y: auto; + background: #f5f5f5; +} + +.agent-history-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 14px 16px; + background: white; + border: 1px solid var(--border-color); + border-radius: 10px; + margin-bottom: 8px; + cursor: pointer; + transition: all 0.2s; +} + +.agent-history-item:hover { + border-color: var(--primary); + background: rgba(102, 126, 234, 0.05); +} + +.agent-history-left { + display: flex; + align-items: center; + gap: 12px; +} + +.agent-history-avatar { + font-size: 24px; +} + +.agent-history-name { + font-size: 15px; + font-weight: 500; + color: var(--text-color); +} + +.agent-history-right { + display: flex; + align-items: center; + gap: 12px; + font-size: 13px; + color: var(--text-light); +} + +.agent-history-usage { + color: var(--primary); +} + /* ==================== 我的页面 ==================== */ .profile-page {