feat: 智能体历史使用列表 - 显示最近使用的智能体（最多5个）+ 使用次数和时间 + 查看全部历史页面

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 `
     <div class="agents-page">
       <header class="page-header">
@@ -340,6 +412,32 @@ function renderAgentsPage() {
       </header>
       
       <div class="agents-content">
+        <!-- 最近使用 -->
+        ${recentAgents.length > 0 ? `
+        <div class="agents-section">
+          <div class="section-title">🕐 最近使用</div>
+          <div class="recent-agents-list">
+            ${recentAgents.map(agent => `
+              <div class="recent-agent-item" data-id="${agent.id}">
+                <div class="recent-agent-left">
+                  <span class="recent-agent-avatar">${agent.avatar}</span>
+                  <span class="recent-agent-name">${agent.name}</span>
+                </div>
+                <div class="recent-agent-right">
+                  <span class="recent-agent-usage">${agent.usageCount}次</span>
+                  <span class="recent-agent-time">${formatUsageTime(agent.lastUsedAt)}</span>
+                </div>
+              </div>
+            `).join('')}
+            ${totalRecentCount > 5 ? `
+            <div class="recent-agent-more" id="showAllRecentBtn">
+              <span>查看全部 ${totalRecentCount} 个历史使用...</span>
+            </div>
+            ` : ''}
+          </div>
+        </div>
+        ` : ''}
+        
         <!-- 热门智能体 -->
         <div class="agents-section">
           <div class="section-title">🔥 热门智能体</div>
@@ -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 = `
+    <div class="agent-history-page">
+      <header class="page-header">
+        <button class="back-btn-white" id="historyBackBtn">
+          <svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+        </button>
+        <h1>历史使用</h1>
+      </header>
+      
+      <div class="agent-history-content">
+        ${allRecentAgents.length === 0 
+          ? '<div class="empty-list">暂无历史使用记录</div>'
+          : allRecentAgents.map(agent => `
+            <div class="agent-history-item" data-id="${agent.id}">
+              <div class="agent-history-left">
+                <span class="agent-history-avatar">${agent.avatar}</span>
+                <span class="agent-history-name">${agent.name}</span>
+              </div>
+              <div class="agent-history-right">
+                <span class="agent-history-usage">${agent.usageCount}次</span>
+                <span class="agent-history-time">${formatUsageTime(agent.lastUsedAt)}</span>
+              </div>
+            </div>
+          `).join('')
+        }
+      </div>
+    </div>
+  `;
+  
+  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;

www/index.html

@@ -8,12 +8,12 @@
   <meta http-equiv="Pragma" content="no-cache">
   <meta http-equiv="Expires" content="0">
   <title>AI助手</title>
-  <link rel="stylesheet" href="style.css?v=3.0.1">
+  <link rel="stylesheet" href="style.css?v=3.1.0">
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
   <div id="app"></div>
-  <script src="marked.min.js?v=3.0.1"></script>
-  <script src="app.js?v=3.0.1"></script>
+  <script src="marked.min.js?v=3.1.0"></script>
+  <script src="app.js?v=3.1.0"></script>
 </body>
 </html>

www/style.css

@@ -83,21 +83,20 @@ body {
   color: var(--primary);
 }
 
-/* ==================== 页面通用头部 ==================== */
+/* ==================== 页面通用头部（紫色渐变） ==================== */
 
 .page-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px;
-  background: white;
-  border-bottom: 1px solid var(--border-color);
+  padding: 12px 16px;
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+  color: white;
 }
 
 .page-header h1 {
-  font-size: 20px;
+  font-size: 18px;
   font-weight: 600;
-  color: var(--text-color);
 }
 
 /* ==================== 对话页面 ==================== */
@@ -172,6 +171,7 @@ body {
   flex: 1;
   padding: 16px;
   overflow-y: auto;
+  background: #f5f5f5;
 }
 
 .agents-section {
@@ -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 {
@@ -238,6 +375,7 @@ body {
 .profile-content {
   flex: 1;
   padding: 16px;
+  background: #f5f5f5;
 }
 
 .profile-card {