feat: 智能体历史改为显示每次对话记录而非合并统计

www/app.js

@@ -45,6 +45,21 @@ let agents = [
 
 let currentAgent = null;  // 当前选中的智能体
 
+// 获取使用智能体的对话列表（按时间倒序）
+function getAgentConversationHistory(limit = 5) {
+  return conversations
+    .filter(conv => conv.agentId)  // 筛选有智能体的对话
+    .sort((a, b) => b.updatedAt - a.updatedAt)  // 按更新时间倒序
+    .slice(0, limit)
+    .map(conv => {
+      const agent = agents.find(a => a.id === conv.agentId);
+      return {
+        ...conv,
+        agent: agent
+      };
+    });
+}
+
 // 功能开关
 let enableThinking = false;  // 深度思考
 let enableSearch = false;    // 联网搜索
@@ -333,6 +348,10 @@ function renderAgentsPage() {
   const studyAgents = agents.filter(a => a.category === 'study');
   const lifeAgents = agents.filter(a => a.category === 'life');
   
+  // 获取使用智能体的对话历史（最多5个）
+  const recentAgentConvos = getAgentConversationHistory(5);
+  const totalAgentConvos = conversations.filter(c => c.agentId).length;
+  
   return `
     <div class="agents-page">
       <header class="page-header">
@@ -340,6 +359,32 @@ function renderAgentsPage() {
       </header>
       
       <div class="agents-content">
+        <!-- 最近使用 -->
+        ${recentAgentConvos.length > 0 ? `
+        <div class="agents-section">
+          <div class="section-title-row">
+            <div class="section-title">🕐 最近使用</div>
+            ${totalAgentConvos > 5 ? `
+            <div class="section-more" id="showAllRecentBtn">更多&gt;&gt;</div>
+            ` : ''}
+          </div>
+          <div class="recent-agents-list">
+            ${recentAgentConvos.map(conv => `
+              <div class="recent-agent-item" data-conv-id="${conv.id}">
+                <div class="recent-agent-left">
+                  <span class="recent-agent-avatar">${conv.agent ? conv.agent.avatar : '🤖'}</span>
+                  <span class="recent-agent-name">${conv.title}</span>
+                </div>
+                <div class="recent-agent-right">
+                  <span class="recent-agent-agent-name">${conv.agent ? conv.agent.name : '未知智能体'}</span>
+                  <span class="recent-agent-time">${formatTime(conv.updatedAt)}</span>
+                </div>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+        ` : ''}
+        
         <!-- 热门智能体 -->
         <div class="agents-section">
           <div class="section-title">🔥 热门智能体</div>
@@ -401,12 +446,31 @@ 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 convId = item.getAttribute('data-conv-id');
+      if (convId) {
+        openConversation(convId);
+      }
+    });
+  });
+  
+  // 查看全部历史使用
+  const showAllRecentBtn = document.getElementById('showAllRecentBtn');
+  if (showAllRecentBtn) {
+    showAllRecentBtn.addEventListener('click', () => {
+      showAgentHistoryPage();
+    });
+  }
 }
 
 // ==================== 我的页面 ====================
@@ -462,6 +526,60 @@ function bindProfilePageEvents() {
   }
 }
 
+// 查看全部历史使用
+function showAgentHistoryPage() {
+  const allAgentConvos = getAgentConversationHistory(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">
+        ${allAgentConvos.length === 0 
+          ? '<div class="empty-list">暂无历史使用记录</div>'
+          : allAgentConvos.map(conv => `
+            <div class="agent-history-item" data-conv-id="${conv.id}">
+              <div class="agent-history-left">
+                <span class="agent-history-avatar">${conv.agent ? conv.agent.avatar : '🤖'}</span>
+                <span class="agent-history-name">${conv.title}</span>
+              </div>
+              <div class="agent-history-right">
+                <span class="agent-history-agent">${conv.agent ? conv.agent.name : '未知智能体'}</span>
+                <span class="agent-history-time">${formatTime(conv.updatedAt)}</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 convId = item.getAttribute('data-conv-id');
+      if (convId) {
+        openConversation(convId);
+      }
+    });
+  });
+}
+
 // 打开智能体对话
 function openAgent(agentId) {
   currentAgent = agents.find(a => a.id === 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.3">
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
   <div id="app"></div>
-  <script src="marked.min.js?v=3.0.1"></script>
+  <script src="marked.min.js?v=3.1.3"></script>
-  <script src="app.js?v=3.0.1"></script>
+  <script src="app.js?v=3.1.3"></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;
+  padding: 12px 16px;
-  background: white;
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
-  border-bottom: 1px solid var(--border-color);
+  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 {
@@ -185,6 +185,28 @@ body {
   margin-bottom: 12px;
 }
 
+.section-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.section-title-row .section-title {
+  margin-bottom: 0;
+}
+
+.section-more {
+  font-size: 14px;
+  color: var(--primary);
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.section-more:hover {
+  color: #5a67d8;
+}
+
 .agents-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -227,6 +249,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-agent-name {
+  font-size: 12px;
+  color: var(--primary);
+  background: rgba(102, 126, 234, 0.1);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+/* 智能体历史页面 */
+.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);
+}
+
+.agent-history-agent {
+  font-size: 12px;
+  color: var(--primary);
+  background: rgba(102, 126, 234, 0.1);
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
 /* ==================== 我的页面 ==================== */
 
 .profile-page {
@@ -238,6 +397,7 @@ body {
 .profile-content {
   flex: 1;
   padding: 16px;
+  background: #f5f5f5;
 }
 
 .profile-card {