fix: 智能体使用记录改为发送第一条消息时才记录

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) {
@@ -198,11 +266,16 @@ function bindPageEvents() {
 function renderChatsPage() {
   return `
     <div class="chats-page">
-      <header class="page-header">
+      <header class="chats-header">
         <h1>对话</h1>
-        <button class="header-btn new-chat-btn" id="newChatBtn" title="新建对话">
-          <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
-        </button>
+        <div class="chats-header-actions">
+          <button class="chats-header-btn" id="searchToggleBtn" title="搜索">
+            <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
+          </button>
+          <button class="chats-header-btn" id="newChatBtn" title="新建对话">
+            <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+          </button>
+        </div>
       </header>
       
       <div class="chats-content">
@@ -219,6 +292,18 @@ function renderChatsPage() {
           }
         </div>
       </div>
+      
+      <!-- 搜索栏 -->
+      <div class="search-bar" id="searchBar">
+        <div class="search-input-wrapper">
+          <svg viewBox="0 0 24 24" width="20" height="20"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 7 9.5 7 14 9.01 14 9.5 11.99 14 9.5 14z"/></svg>
+          <input type="text" id="searchInput" placeholder="搜索对话标题或内容...">
+          <button class="search-close-btn" id="searchCloseBtn">
+            <svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
+          </button>
+        </div>
+        <div class="search-results" id="searchResults"></div>
+      </div>
     </div>
   `;
 }
@@ -229,6 +314,70 @@ function bindChatsPageEvents() {
     newChatBtn.addEventListener('click', createNewConversation);
   }
   
+  // 搜索功能
+  const searchToggleBtn = document.getElementById('searchToggleBtn');
+  const searchBar = document.getElementById('searchBar');
+  const searchInput = document.getElementById('searchInput');
+  const searchCloseBtn = document.getElementById('searchCloseBtn');
+  const searchResults = document.getElementById('searchResults');
+  
+  if (searchToggleBtn) {
+    searchToggleBtn.addEventListener('click', () => {
+      if (searchBar) {
+        searchBar.classList.add('show');
+        if (searchInput) {
+          searchInput.focus();
+        }
+      }
+    });
+  }
+  
+  if (searchCloseBtn) {
+    searchCloseBtn.addEventListener('click', () => {
+      hideSearchBarInChats();
+    });
+  }
+  
+  if (searchInput) {
+    searchInput.addEventListener('input', (e) => {
+      const keyword = e.target.value.trim();
+      if (keyword) {
+        searchConversations(keyword);
+      } else {
+        if (searchResults) searchResults.innerHTML = '';
+      }
+    });
+    
+    searchInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        hideSearchBarInChats();
+      }
+    });
+  }
+  
+  if (searchResults) {
+    searchResults.addEventListener('click', (e) => {
+      const item = e.target.closest('.search-result-item');
+      if (item) {
+        const id = item.getAttribute('data-id');
+        hideSearchBarInChats();
+        openConversation(id);
+      }
+    });
+  }
+  
+  function hideSearchBarInChats() {
+    if (searchBar) {
+      searchBar.classList.remove('show');
+    }
+    if (searchInput) {
+      searchInput.value = '';
+    }
+    if (searchResults) {
+      searchResults.innerHTML = '';
+    }
+  }
+  
   const conversationList = document.getElementById('conversationList');
   if (conversationList) {
     conversationList.addEventListener('click', (e) => {
@@ -252,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">
@@ -259,6 +412,32 @@ function renderAgentsPage() {
       </header>
       
       <div class="agents-content">
+        <!-- 最近使用 -->
+        ${recentAgents.length > 0 ? `
+        <div class="agents-section">
+          <div class="section-title-row">
+            <div class="section-title">🕐 最近使用</div>
+            ${totalRecentCount > 5 ? `
+            <div class="section-more" id="showAllRecentBtn">更多&gt;&gt;</div>
+            ` : ''}
+          </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('')}
+          </div>
+        </div>
+        ` : ''}
+        
         <!-- 热门智能体 -->
         <div class="agents-section">
           <div class="section-title">🔥 热门智能体</div>
@@ -320,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();
+    });
+  }
 }
 
 // ==================== 我的页面 ====================
@@ -381,6 +577,58 @@ 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);
@@ -1314,6 +1562,11 @@ async function sendMessage() {
 
   // 隐藏欢迎界面
   welcome.style.display = 'none';
+  
+  // 如果是智能体对话的第一条消息，记录智能体使用
+  if (currentConversation.agentId && currentConversation.messages.length === 0) {
+    recordAgentUsage(currentConversation.agentId);
+  }
 
   // 添加用户消息
   currentConversation.messages.push({ role: 'user', content: text });

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.0">
+  <link rel="stylesheet" href="style.css?v=3.1.2">
   <link rel="manifest" href="manifest.json">
 </head>
 <body>
   <div id="app"></div>
-  <script src="marked.min.js?v=3.0.0"></script>
-  <script src="app.js?v=3.0.0"></script>
+  <script src="marked.min.js?v=3.1.2"></script>
+  <script src="app.js?v=3.1.2"></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);
 }
 
 /* ==================== 对话页面 ==================== */
@@ -108,29 +107,56 @@ body {
   height: 100%;
 }
 
+.chats-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%);
+  color: white;
+}
+
+.chats-header h1 {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.chats-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.chats-header-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  background: rgba(255,255,255,0.95);
+  border: none;
+  border-radius: 50%;
+  color: var(--primary);
+  cursor: pointer;
+  transition: all 0.25s ease;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+}
+
+.chats-header-btn:hover {
+  transform: scale(1.08);
+  box-shadow: 0 4px 16px rgba(102,126,234,0.4);
+  color: #5a67d8;
+}
+
+.chats-header-btn:active {
+  transform: scale(0.95);
+}
+
 .chats-content {
   flex: 1;
   padding: 16px;
   overflow-y: auto;
-}
-
-.new-chat-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  background: var(--primary);
-  border: none;
-  border-radius: 10px;
-  color: white;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.new-chat-btn:hover {
-  background: #5a67d8;
-  transform: scale(1.05);
+  background: #f5f5f5;
 }
 
 /* ==================== 智能体页面 ==================== */
@@ -145,6 +171,7 @@ body {
   flex: 1;
   padding: 16px;
   overflow-y: auto;
+  background: #f5f5f5;
 }
 
 .agents-section {
@@ -158,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);
@@ -200,6 +249,127 @@ 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);
+}
+
+/* 智能体历史页面 */
+.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 {
@@ -211,6 +381,7 @@ body {
 .profile-content {
   flex: 1;
   padding: 16px;
+  background: #f5f5f5;
 }
 
 .profile-card {