From dbd1853e6e9976f06845ae95733892ec95f5c1cf Mon Sep 17 00:00:00 2001 From: hubian <908234780@qq.com> Date: Mon, 27 Apr 2026 10:45:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=99=BA=E8=83=BD=E4=BD=93=E5=8F=91?= =?UTF-8?q?=E7=8E=B0=E5=92=8C=E6=94=B6=E8=97=8F=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 智能体界面顶部右侧添加搜索按钮（发现智能体） - 点击进入发现页面，显示所有系统智能体 - 每个智能体显示简介、热度、类别 - 支持添加和收藏按钮 - 添加的智能体自动归类到对应类别 - 智能体界面顶部右侧添加收藏按钮（☆） - 点击进入收藏夹页面，点击智能体进入对话 - 智能体长按弹出操作菜单（置顶、收藏、删除） - 置顶、收藏、用户智能体配置持久化存储 --- www/app.js | 730 +++++++++++++++++++++++++++++++++++++++++++++---- www/index.html | 6 +- www/style.css | 440 +++++++++++++++++++++++++++++ 3 files changed, 1125 insertions(+), 51 deletions(-) diff --git a/www/app.js b/www/app.js index 314e337..83cb9e9 100644 --- a/www/app.js +++ b/www/app.js @@ -19,30 +19,52 @@ let isLoading = false; // 当前页面状态 let currentPage = 'chats'; // chats | agents | profile -// 智能体数据 -let agents = [ +// 系统智能体数据（完整列表） +let systemAgents = [ // 热门智能体 - { id: 'assistant', name: '通用助手', avatar: '🤖', category: 'hot', desc: '能回答各类问题，帮助写作、分析、解答疑惑', systemPrompt: '你是一个智能助手，能够回答各类问题，帮助用户解决问题。' }, - { id: 'writer', name: '写作助手', avatar: '✍️', category: 'hot', desc: '专注于文章写作、文案创作、内容润色', systemPrompt: '你是一个专业的写作助手，擅长各类文章写作、文案创作和内容润色。' }, - { id: 'coder', name: '编程助手', avatar: '👨‍💻', category: 'hot', desc: '精通编程语言，解答技术问题，生成代码', systemPrompt: '你是一个专业的编程助手，精通各类编程语言，能够解答技术问题并生成高质量代码。' }, - { id: 'translator', name: '翻译助手', avatar: '🌐', category: 'hot', desc: '多语言翻译，精准表达，文化适配', systemPrompt: '你是一个专业的翻译助手，精通多语言翻译，能够精准表达并适配文化差异。' }, + { id: 'assistant', name: '通用助手', avatar: '🤖', category: 'hot', desc: '能回答各类问题，帮助写作、分析、解答疑惑', systemPrompt: '你是一个智能助手，能够回答各类问题，帮助用户解决问题。', heat: 9500 }, + { id: 'writer', name: '写作助手', avatar: '✍️', category: 'hot', desc: '专注于文章写作、文案创作、内容润色', systemPrompt: '你是一个专业的写作助手，擅长各类文章写作、文案创作和内容润色。', heat: 8800 }, + { id: 'coder', name: '编程助手', avatar: '👨‍💻', category: 'hot', desc: '精通编程语言，解答技术问题，生成代码', systemPrompt: '你是一个专业的编程助手，精通各类编程语言，能够解答技术问题并生成高质量代码。', heat: 8500 }, + { id: 'translator', name: '翻译助手', avatar: '🌐', category: 'hot', desc: '多语言翻译，精准表达，文化适配', systemPrompt: '你是一个专业的翻译助手，精通多语言翻译，能够精准表达并适配文化差异。', heat: 7200 }, // 工作助手 - { id: 'assistant-work', name: '工作助手', avatar: '💼', category: 'work', desc: '职场问题解答，工作效率提升', systemPrompt: '你是一个工作助手，帮助解决职场问题，提升工作效率。' }, - { id: 'ppt', name: 'PPT助手', avatar: '📊', category: 'work', desc: 'PPT内容生成，结构优化，设计建议', systemPrompt: '你是一个PPT助手，擅长PPT内容生成、结构优化和设计建议。' }, - { id: 'excel', name: 'Excel助手', avatar: '📈', category: 'work', desc: 'Excel公式、数据分析、表格优化', systemPrompt: '你是一个Excel助手，精通Excel公式、数据分析和表格优化。' }, + { id: 'assistant-work', name: '工作助手', avatar: '💼', category: 'work', desc: '职场问题解答，工作效率提升', systemPrompt: '你是一个工作助手，帮助解决职场问题，提升工作效率。', heat: 5000 }, + { id: 'ppt', name: 'PPT助手', avatar: '📊', category: 'work', desc: 'PPT内容生成，结构优化，设计建议', systemPrompt: '你是一个PPT助手，擅长PPT内容生成、结构优化和设计建议。', heat: 4500 }, + { id: 'excel', name: 'Excel助手', avatar: '📈', category: 'work', desc: 'Excel公式、数据分析、表格优化', systemPrompt: '你是一个Excel助手，精通Excel公式、数据分析和表格优化。', heat: 4000 }, // 学习助手 - { id: 'teacher', name: '学习助手', avatar: '📚', category: 'study', desc: '知识讲解，学习方法，考试辅导', systemPrompt: '你是一个学习助手，擅长知识讲解、学习方法指导和考试辅导。' }, - { id: 'english', name: '英语助手', avatar: '🔤', category: 'study', desc: '英语学习，语法纠正，口语练习', systemPrompt: '你是一个英语助手，帮助英语学习、语法纠正和口语练习。' }, - { id: 'math', name: '数学助手', avatar: '🔢', category: 'study', desc: '数学解题，公式推导，概念讲解', systemPrompt: '你是一个数学助手，擅长数学解题、公式推导和概念讲解。' }, + { id: 'teacher', name: '学习助手', avatar: '📚', category: 'study', desc: '知识讲解，学习方法，考试辅导', systemPrompt: '你是一个学习助手，擅长知识讲解、学习方法指导和考试辅导。', heat: 5500 }, + { id: 'english', name: '英语助手', avatar: '🔤', category: 'study', desc: '英语学习，语法纠正，口语练习', systemPrompt: '你是一个英语助手，帮助英语学习、语法纠正和口语练习。', heat: 5000 }, + { id: 'math', name: '数学助手', avatar: '🔢', category: 'study', desc: '数学解题，公式推导，概念讲解', systemPrompt: '你是一个数学助手，擅长数学解题、公式推导和概念讲解。', heat: 4500 }, // 生活助手 - { id: 'health', name: '健康助手', avatar: '🏥', category: 'life', desc: '健康咨询，养生建议，运动指导', systemPrompt: '你是一个健康助手，提供健康咨询、养生建议和运动指导。' }, - { id: 'travel', name: '旅行助手', avatar: '✈️', category: 'life', desc: '旅行规划，景点推荐，美食指南', systemPrompt: '你是一个旅行助手，擅长旅行规划、景点推荐和美食指南。' }, - { id: 'food', name: '美食助手', avatar: '🍳', category: 'life', desc: '菜谱推荐，烹饪技巧，营养搭配', systemPrompt: '你是一个美食助手，提供菜谱推荐、烹饪技巧和营养搭配建议。' }, + { id: 'health', name: '健康助手', avatar: '🏥', category: 'life', desc: '健康咨询，养生建议，运动指导', systemPrompt: '你是一个健康助手，提供健康咨询、养生建议和运动指导。', heat: 3500 }, + { id: 'travel', name: '旅行助手', avatar: '✈️', category: 'life', desc: '旅行规划，景点推荐，美食指南', systemPrompt: '你是一个旅行助手，擅长旅行规划、景点推荐和美食指南。', heat: 3200 }, + { id: 'food', name: '美食助手', avatar: '🍳', category: 'life', desc: '菜谱推荐，烹饪技巧，营养搭配', systemPrompt: '你是一个美食助手，提供菜谱推荐、烹饪技巧和营养搭配建议。', heat: 3000 }, ]; +// 用户智能体界面显示的智能体（默认显示热门智能体） +let agents = []; + +// 用户添加的智能体（按类别分组） +let myAgents = { + hot: ['assistant', 'writer', 'coder', 'translator'], + work: ['assistant-work', 'ppt', 'excel'], + study: ['teacher', 'english', 'math'], + life: ['health', 'travel', 'food'] +}; + +// 收藏的智能体列表 +let favoriteAgents = []; + +// 置顶的智能体列表（按类别） +let pinnedAgents = { + hot: [], + work: [], + study: [], + life: [] +}; + let currentAgent = null; // 当前选中的智能体 // 获取使用智能体的对话列表（按时间倒序） @@ -52,7 +74,7 @@ function getAgentConversationHistory(limit = 5) { .sort((a, b) => b.updatedAt - a.updatedAt) // 按更新时间倒序 .slice(0, limit) .map(conv => { - const agent = agents.find(a => a.id === conv.agentId); + const agent = systemAgents.find(a => a.id === conv.agentId); return { ...conv, agent: agent @@ -105,6 +127,27 @@ document.addEventListener('DOMContentLoaded', () => { } } + // 加载用户智能体数据 + const savedMyAgents = localStorage.getItem('myAgents'); + if (savedMyAgents) { + myAgents = JSON.parse(savedMyAgents); + } + + // 加载收藏的智能体 + const savedFavoriteAgents = localStorage.getItem('favoriteAgents'); + if (savedFavoriteAgents) { + favoriteAgents = JSON.parse(savedFavoriteAgents); + } + + // 加载置顶的智能体 + const savedPinnedAgents = localStorage.getItem('pinnedAgents'); + if (savedPinnedAgents) { + pinnedAgents = JSON.parse(savedPinnedAgents); + } + + // 根据用户配置更新显示的智能体 + updateAgentsDisplay(); + // 加载当前页面状态 const savedPage = localStorage.getItem('currentPage'); if (savedPage) { @@ -115,6 +158,39 @@ document.addEventListener('DOMContentLoaded', () => { showMainPage(); }); +// 根据用户配置更新显示的智能体 +function updateAgentsDisplay() { + agents = []; + Object.keys(myAgents).forEach(category => { + myAgents[category].forEach(agentId => { + const agent = systemAgents.find(a => a.id === agentId); + if (agent) { + agents.push({ + ...agent, + is_pinned: pinnedAgents[category]?.includes(agentId) || false, + is_favorite: favoriteAgents.includes(agentId) + }); + } + }); + }); +} + +// 保存用户智能体配置 +function saveMyAgents() { + localStorage.setItem('myAgents', JSON.stringify(myAgents)); + updateAgentsDisplay(); +} + +// 保存收藏的智能体 +function saveFavoriteAgents() { + localStorage.setItem('favoriteAgents', JSON.stringify(favoriteAgents)); +} + +// 保存置顶的智能体 +function savePinnedAgents() { + localStorage.setItem('pinnedAgents', JSON.stringify(pinnedAgents)); +} + // ==================== 主页（底部导航栏） ==================== function showMainPage() { @@ -343,6 +419,7 @@ function bindChatsPageEvents() { // ==================== 智能体页面 ==================== function renderAgentsPage() { + // 根据用户配置筛选智能体 const hotAgents = agents.filter(a => a.category === 'hot'); const workAgents = agents.filter(a => a.category === 'work'); const studyAgents = agents.filter(a => a.category === 'study'); @@ -352,10 +429,21 @@ function renderAgentsPage() { const recentAgentConvos = getAgentConversationHistory(5); const totalAgentConvos = conversations.filter(c => c.agentId).length; + // 是否有收藏的智能体 + const hasFavorites = favoriteAgents.length > 0; + return `
-
+

智能体

+
+ + +
@@ -386,58 +474,60 @@ function renderAgentsPage() { ` : ''} + ${hotAgents.length > 0 ? `
🔥 热门智能体
- ${hotAgents.map(agent => ` -
-
${agent.avatar}
-
${agent.name}
-
${agent.desc}
-
- `).join('')} + ${hotAgents.map(agent => renderAgentCard(agent)).join('')}
+ ` : ''} + ${workAgents.length > 0 ? `
💼 工作助手
- ${workAgents.map(agent => ` -
-
${agent.avatar}
-
${agent.name}
-
${agent.desc}
-
- `).join('')} + ${workAgents.map(agent => renderAgentCard(agent)).join('')}
+ ` : ''} + ${studyAgents.length > 0 ? `
📚 学习助手
- ${studyAgents.map(agent => ` -
-
${agent.avatar}
-
${agent.name}
-
${agent.desc}
-
- `).join('')} + ${studyAgents.map(agent => renderAgentCard(agent)).join('')}
+ ` : ''} + ${lifeAgents.length > 0 ? `
🏠 生活助手
- ${lifeAgents.map(agent => ` -
-
${agent.avatar}
-
${agent.name}
-
${agent.desc}
-
- `).join('')} + ${lifeAgents.map(agent => renderAgentCard(agent)).join('')} +
+
+ ` : ''} +
+ + +
+
+
+ + 置顶 +
+
+ + 收藏 +
+
+ + 移除
@@ -445,13 +535,52 @@ function renderAgentsPage() { `; } +// 渲染智能体卡片 +function renderAgentCard(agent) { + const pinnedClass = agent.is_pinned ? 'pinned' : ''; + const favoriteClass = agent.is_favorite ? 'favorite' : ''; + return ` +
+ ${agent.is_pinned ? '📌' : ''} + ${agent.is_favorite ? '⭐' : ''} +
${agent.avatar}
+
${agent.name}
+
${agent.desc}
+
+ `; +} + function bindAgentsPageEvents() { + // 发现智能体按钮 + const agentDiscoverBtn = document.getElementById('agentDiscoverBtn'); + if (agentDiscoverBtn) { + agentDiscoverBtn.addEventListener('click', () => { + showAgentDiscoverPage(); + }); + } + + // 收藏夹按钮 + const agentFavoriteBtn = document.getElementById('agentFavoriteBtn'); + if (agentFavoriteBtn) { + agentFavoriteBtn.addEventListener('click', () => { + showAgentFavoritePage(); + }); + } + // 智能体卡片点击（新建对话） document.querySelectorAll('.agent-card').forEach(card => { - card.addEventListener('click', () => { + card.addEventListener('click', (e) => { + // 如果是长按后的点击，不触发 + if (card.classList.contains('long-pressed')) { + card.classList.remove('long-pressed'); + return; + } const id = card.getAttribute('data-id'); openAgent(id); }); + + // 长按事件 + setupAgentLongPress(card); }); // 最近使用对话点击（打开已有对话） @@ -471,6 +600,511 @@ function bindAgentsPageEvents() { showAgentHistoryPage(); }); } + + // 智能体操作菜单事件 + const agentActionMenu = document.getElementById('agentActionMenu'); + if (agentActionMenu) { + agentActionMenu.addEventListener('click', (e) => { + const item = e.target.closest('.agent-action-item'); + if (item && currentActionAgentId) { + const action = item.getAttribute('data-action'); + handleAgentAction(action, currentActionAgentId); + hideAgentActionMenu(); + } + }); + + // 点击其他地方关闭菜单 + document.addEventListener('click', (e) => { + if (agentActionMenu.classList.contains('show') && !agentActionMenu.contains(e.target)) { + hideAgentActionMenu(); + } + }); + } +} + +// 当前操作的智能体ID +let currentActionAgentId = null; + +// 智能体长按事件 +function setupAgentLongPress(card) { + let longPressTimer = null; + + card.addEventListener('touchstart', (e) => { + longPressTimer = setTimeout(() => { + currentActionAgentId = card.getAttribute('data-id'); + card.classList.add('long-pressed'); + showAgentActionMenu(currentActionAgentId); + }, 500); + }); + + card.addEventListener('touchend', () => { + if (longPressTimer) { + clearTimeout(longPressTimer); + longPressTimer = null; + } + }); + + card.addEventListener('touchmove', () => { + if (longPressTimer) { + clearTimeout(longPressTimer); + longPressTimer = null; + } + }); + + // 鼠标长按（PC端） + card.addEventListener('mousedown', (e) => { + longPressTimer = setTimeout(() => { + currentActionAgentId = card.getAttribute('data-id'); + card.classList.add('long-pressed'); + showAgentActionMenu(currentActionAgentId); + }, 500); + }); + + card.addEventListener('mouseup', () => { + if (longPressTimer) { + clearTimeout(longPressTimer); + longPressTimer = null; + } + }); + + card.addEventListener('mouseleave', () => { + if (longPressTimer) { + clearTimeout(longPressTimer); + longPressTimer = null; + } + }); +} + +// 显示智能体操作菜单 +function showAgentActionMenu(agentId) { + const agentActionMenu = document.getElementById('agentActionMenu'); + const agent = systemAgents.find(a => a.id === agentId); + const displayAgent = agents.find(a => a.id === agentId); + if (!agentActionMenu || !displayAgent) return; + + // 更新按钮文字 + const pinText = document.getElementById('agentPinText'); + const favoriteText = document.getElementById('agentFavoriteText'); + if (pinText) { + pinText.textContent = displayAgent.is_pinned ? '取消置顶' : '置顶'; + } + if (favoriteText) { + favoriteText.textContent = displayAgent.is_favorite ? '取消收藏' : '收藏'; + } + + agentActionMenu.classList.add('show'); +} + +// 隐藏智能体操作菜单 +function hideAgentActionMenu() { + const agentActionMenu = document.getElementById('agentActionMenu'); + if (agentActionMenu) { + agentActionMenu.classList.remove('show'); + } + currentActionAgentId = null; +} + +// 处理智能体操作 +function handleAgentAction(action, agentId) { + const agent = systemAgents.find(a => a.id === agentId); + if (!agent) return; + + switch (action) { + case 'pin': + toggleAgentPin(agentId); + break; + case 'favorite': + toggleAgentFavorite(agentId); + break; + case 'remove': + removeAgentFromMyAgents(agentId); + break; + } + + // 刷新页面 + switchPage('agents'); +} + +// 置顶/取消置顶智能体 +function toggleAgentPin(agentId) { + const agent = agents.find(a => a.id === agentId); + if (!agent) return; + + const category = agent.category; + + if (pinnedAgents[category]?.includes(agentId)) { + // 取消置顶 + pinnedAgents[category] = pinnedAgents[category].filter(id => id !== agentId); + agent.is_pinned = false; + showToast('已取消置顶'); + } else { + // 置顶 + if (!pinnedAgents[category]) { + pinnedAgents[category] = []; + } + pinnedAgents[category].push(agentId); + agent.is_pinned = true; + showToast('已置顶'); + } + + savePinnedAgents(); + saveMyAgents(); // 更新显示 +} + +// 收藏/取消收藏智能体 +function toggleAgentFavorite(agentId) { + const agent = agents.find(a => a.id === agentId); + if (!agent) return; + + if (favoriteAgents.includes(agentId)) { + // 取消收藏 + favoriteAgents = favoriteAgents.filter(id => id !== agentId); + agent.is_favorite = false; + showToast('已取消收藏'); + } else { + // 收藏 + favoriteAgents.push(agentId); + agent.is_favorite = true; + showToast('已收藏'); + } + + saveFavoriteAgents(); + saveMyAgents(); // 更新显示 +} + +// 从用户智能体列表移除 +function removeAgentFromMyAgents(agentId) { + const agent = systemAgents.find(a => a.id === agentId); + if (!agent) return; + + const category = agent.category; + + // 从对应类别移除 + if (myAgents[category]) { + myAgents[category] = myAgents[category].filter(id => id !== agentId); + } + + // 同时取消置顶 + if (pinnedAgents[category]) { + pinnedAgents[category] = pinnedAgents[category].filter(id => id !== agentId); + } + + // 同时取消收藏 + if (favoriteAgents.includes(agentId)) { + favoriteAgents = favoriteAgents.filter(id => id !== agentId); + } + + saveMyAgents(); + savePinnedAgents(); + saveFavoriteAgents(); + showToast('已移除'); +} + +// ==================== 智能体发现页面 ==================== + +function showAgentDiscoverPage() { + // 按热度排序所有系统智能体 + const sortedAgents = [...systemAgents].sort((a, b) => b.heat - a.heat); + + // 分类显示 + const hotAgents = systemAgents.filter(a => a.category === 'hot'); + const workAgents = systemAgents.filter(a => a.category === 'work'); + const studyAgents = systemAgents.filter(a => a.category === 'study'); + const lifeAgents = systemAgents.filter(a => a.category === 'life'); + + const discoverHtml = ` +
+
+ +

发现智能体

+
+ +
+ +
+ + +
+ + +
+
🔥 热门智能体
+
+ ${hotAgents.map(agent => renderDiscoverCard(agent)).join('')} +
+
+ + +
+
💼 工作助手
+
+ ${workAgents.map(agent => renderDiscoverCard(agent)).join('')} +
+
+ + +
+
📚 学习助手
+
+ ${studyAgents.map(agent => renderDiscoverCard(agent)).join('')} +
+
+ + +
+
🏠 生活助手
+
+ ${lifeAgents.map(agent => renderDiscoverCard(agent)).join('')} +
+
+
+
+ `; + + appContainer.innerHTML = discoverHtml; + + // 绑定返回按钮 + const backBtn = document.getElementById('discoverBackBtn'); + if (backBtn) { + backBtn.addEventListener('click', () => { + showMainPage(); + }); + } + + // 绑定搜索 + const searchInput = document.getElementById('discoverSearchInput'); + if (searchInput) { + searchInput.addEventListener('input', (e) => { + const keyword = e.target.value.trim().toLowerCase(); + filterDiscoverAgents(keyword); + }); + } + + // 绑定添加/收藏按钮 + bindDiscoverCardEvents(); +} + +// 渲染发现页面智能体卡片 +function renderDiscoverCard(agent) { + const isAdded = myAgents[agent.category]?.includes(agent.id); + const isFavorite = favoriteAgents.includes(agent.id); + + // 格式化热度显示 + let heatDisplay = ''; + if (agent.heat >= 9000) { + heatDisplay = '🔥🔥🔥'; + } else if (agent.heat >= 6000) { + heatDisplay = '🔥🔥'; + } else if (agent.heat >= 3000) { + heatDisplay = '🔥'; + } else { + heatDisplay = `${Math.floor(agent.heat / 1000)}k`; + } + + return ` +
+
+
${agent.avatar}
+
+
${agent.name}
+
+ ${getCategoryLabel(agent.category)} + ${heatDisplay} +
+
+
+
${agent.desc}
+
+ + +
+
+ `; +} + +// 获取类别标签 +function getCategoryLabel(category) { + const labels = { + hot: '热门', + work: '工作', + study: '学习', + life: '生活' + }; + return labels[category] || category; +} + +// 搜索过滤发现页面智能体 +function filterDiscoverAgents(keyword) { + if (!keyword) { + // 显示所有 + showDiscoverSection('hot', systemAgents.filter(a => a.category === 'hot')); + showDiscoverSection('work', systemAgents.filter(a => a.category === 'work')); + showDiscoverSection('study', systemAgents.filter(a => a.category === 'study')); + showDiscoverSection('life', systemAgents.filter(a => a.category === 'life')); + return; + } + + // 搜索所有智能体 + const filtered = systemAgents.filter(agent => + agent.name.toLowerCase().includes(keyword) || + agent.desc.toLowerCase().includes(keyword) + ); + + // 显示搜索结果 + showDiscoverSection('hot', filtered.filter(a => a.category === 'hot')); + showDiscoverSection('work', filtered.filter(a => a.category === 'work')); + showDiscoverSection('study', filtered.filter(a => a.category === 'study')); + showDiscoverSection('life', filtered.filter(a => a.category === 'life')); +} + +// 显示发现页面某个类别的智能体 +function showDiscoverSection(category, agents) { + const gridId = `discover${category.charAt(0).toUpperCase() + category.slice(1)}Grid`; + const grid = document.getElementById(gridId); + if (grid) { + grid.innerHTML = agents.map(agent => renderDiscoverCard(agent)).join(''); + bindDiscoverCardEvents(); + } +} + +// 绑定发现页面卡片按钮事件 +function bindDiscoverCardEvents() { + document.querySelectorAll('.discover-action-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + e.stopPropagation(); + const agentId = btn.getAttribute('data-id'); + const action = btn.getAttribute('data-action'); + + if (action === 'add') { + addAgentToMyAgents(agentId); + btn.classList.toggle('added'); + btn.textContent = btn.classList.contains('added') ? '已添加' : '+ 添加'; + } else if (action === 'favorite') { + toggleAgentFavoriteFromDiscover(agentId); + btn.classList.toggle('favorited'); + btn.textContent = btn.classList.contains('favorited') ? '★ 已收藏' : '☆ 收藏'; + } + }); + }); +} + +// 添加智能体到用户列表 +function addAgentToMyAgents(agentId) { + const agent = systemAgents.find(a => a.id === agentId); + if (!agent) return; + + // 检查是否已添加 + if (myAgents[agent.category]?.includes(agentId)) { + showToast('已添加过该智能体'); + return; + } + + // 添加到对应类别 + if (!myAgents[agent.category]) { + myAgents[agent.category] = []; + } + myAgents[agent.category].push(agentId); + + saveMyAgents(); + showToast(`已添加 ${agent.name}`); +} + +// 从发现页面收藏智能体 +function toggleAgentFavoriteFromDiscover(agentId) { + const agent = systemAgents.find(a => a.id === agentId); + if (!agent) return; + + if (favoriteAgents.includes(agentId)) { + favoriteAgents = favoriteAgents.filter(id => id !== agentId); + showToast('已取消收藏'); + } else { + favoriteAgents.push(agentId); + showToast('已收藏'); + + // 如果没有添加到用户列表，自动添加 + if (!myAgents[agent.category]?.includes(agentId)) { + addAgentToMyAgents(agentId); + } + } + + saveFavoriteAgents(); +} + +// ==================== 智能体收藏夹页面 ==================== + +function showAgentFavoritePage() { + // 获取收藏的智能体详情 + const favoriteAgentsList = favoriteAgents.map(id => { + const agent = systemAgents.find(a => a.id === id); + return agent ? { ...agent, is_favorite: true } : null; + }).filter(a => a); + + const favoriteHtml = ` +
+
+ +

收藏夹

+
+ +
+ ${favoriteAgentsList.length === 0 + ? '
⭐

暂无收藏的智能体

点击右上角搜索按钮发现更多智能体

' + : ` +
+ ${favoriteAgentsList.map(agent => ` +
+
${agent.avatar}
+
${agent.name}
+
${agent.desc}
+ +
+ `).join('')} +
+ `} +
+
+ `; + + appContainer.innerHTML = favoriteHtml; + + // 绑定返回按钮 + const backBtn = document.getElementById('favoriteBackBtn'); + if (backBtn) { + backBtn.addEventListener('click', () => { + showMainPage(); + }); + } + + // 绑定智能体卡片点击（进入对话） + document.querySelectorAll('.favorite-agent-card').forEach(card => { + card.addEventListener('click', (e) => { + // 如果点击的是取消收藏按钮，不进入对话 + if (e.target.classList.contains('favorite-agent-unfav')) { + return; + } + const agentId = card.getAttribute('data-id'); + openAgent(agentId); + }); + }); + + // 绑定取消收藏按钮 + document.querySelectorAll('.favorite-agent-unfav').forEach(btn => { + btn.addEventListener('click', (e) => { + e.stopPropagation(); + const agentId = btn.getAttribute('data-id'); + toggleAgentFavorite(agentId); + // 刷新收藏夹页面 + showAgentFavoritePage(); + }); + }); } // ==================== 我的页面 ==================== @@ -504,7 +1138,7 @@ function renderProfilePage() {
-

AI助手 v2.8.0

+

AI助手 v3.0.0

基于智谱 GLM-4.5-Air

@@ -582,7 +1216,7 @@ function showAgentHistoryPage() { // 打开智能体对话 function openAgent(agentId) { - currentAgent = agents.find(a => a.id === agentId); + currentAgent = systemAgents.find(a => a.id === agentId); if (!currentAgent) return; // 创建新对话并设置智能体 diff --git a/www/index.html b/www/index.html index 5aaf1cf..3a36bac 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 0b3c597..cf41cc7 100644 --- a/www/style.css +++ b/www/style.css @@ -167,6 +167,57 @@ body { height: 100%; } +.agents-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 16px; + background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%); + color: white; +} + +.agents-header h1 { + font-size: 18px; + font-weight: 600; +} + +.agents-header-actions { + display: flex; + align-items: center; + gap: 8px; +} + +.agents-header-btn { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + 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); + font-size: 18px; +} + +.agents-header-btn:hover { + transform: scale(1.08); + box-shadow: 0 4px 16px rgba(102,126,234,0.4); + color: #5a67d8; +} + +.agents-header-btn.favorite-btn { + font-size: 20px; + font-weight: bold; +} + +.agents-header-btn.favorite-btn.has-favorites { + color: #f59e0b; +} + .agents-content { flex: 1; padding: 16px; @@ -223,6 +274,7 @@ body { border-radius: 12px; cursor: pointer; transition: all 0.2s; + position: relative; } .agent-card:hover { @@ -231,6 +283,31 @@ body { transform: translateY(-2px); } +.agent-card.pinned { + border-color: var(--primary); + background: rgba(102, 126, 234, 0.08); + box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2); +} + +.agent-card.favorite { + border-color: #f59e0b; + box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2); +} + +.agent-pin-icon { + position: absolute; + top: 8px; + left: 8px; + font-size: 14px; +} + +.agent-fav-icon { + position: absolute; + top: 8px; + right: 8px; + font-size: 14px; +} + .agent-avatar { font-size: 32px; margin-bottom: 8px; @@ -249,6 +326,369 @@ body { text-align: center; } +/* 智能体操作菜单 */ +.agent-action-menu { + position: fixed; + bottom: 0; + left: 0; + right: 0; + background: transparent; + display: none; + z-index: 1000; +} + +.agent-action-menu.show { + display: block; +} + +.agent-action-menu-content { + background: white; + border-radius: 16px 16px 0 0; + padding: 16px; + box-shadow: 0 -4px 20px rgba(0,0,0,0.15); + animation: slideUp 0.2s ease; +} + +.agent-action-item { + display: flex; + align-items: center; + gap: 12px; + padding: 14px 16px; + border-radius: 10px; + cursor: pointer; + transition: all 0.2s; +} + +.agent-action-item:hover { + background: rgba(102, 126, 234, 0.1); +} + +.agent-action-item svg { + color: var(--primary); +} + +.agent-action-item span { + font-size: 16px; + color: var(--text-color); +} + +.agent-action-item.delete-action svg, +.agent-action-item.delete-action span { + color: #e53e3e; +} + +.agent-action-item.delete-action:hover { + background: rgba(229, 62, 62, 0.1); +} + +/* ==================== 智能体发现页面 ==================== */ + +.agent-discover-page { + display: flex; + flex-direction: column; + height: 100vh; + height: 100dvh; + background: #f5f5f5; +} + +.discover-header { + display: flex; + align-items: center; + padding: 12px 16px; + background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%); + color: white; +} + +.discover-header h1 { + font-size: 18px; + font-weight: 600; + margin-left: 12px; +} + +.back-btn-white { + background: transparent; + border: none; + color: white; + padding: 8px; + cursor: pointer; + display: flex; + align-items: center; +} + +.discover-content { + flex: 1; + padding: 16px; + overflow-y: auto; +} + +.discover-search { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + background: white; + border: 1px solid var(--border-color); + border-radius: 12px; + margin-bottom: 16px; +} + +.discover-search svg { + color: var(--text-light); +} + +.discover-search input { + flex: 1; + font-size: 16px; + border: none; + outline: none; + background: transparent; +} + +.discover-section { + margin-bottom: 24px; +} + +.discover-section-title { + font-size: 16px; + font-weight: 600; + color: var(--text-color); + margin-bottom: 12px; +} + +.discover-grid { + display: flex; + flex-direction: column; + gap: 12px; +} + +.discover-card { + display: flex; + flex-direction: column; + padding: 16px; + background: white; + border: 1px solid var(--border-color); + border-radius: 12px; + transition: all 0.2s; +} + +.discover-card:hover { + border-color: var(--primary); + background: rgba(102, 126, 234, 0.05); +} + +.discover-card-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 8px; +} + +.discover-avatar { + font-size: 32px; +} + +.discover-card-info { + flex: 1; +} + +.discover-name { + font-size: 16px; + font-weight: 600; + color: var(--text-color); +} + +.discover-meta { + display: flex; + align-items: center; + gap: 8px; + margin-top: 4px; +} + +.discover-category { + font-size: 12px; + color: var(--primary); + background: rgba(102, 126, 234, 0.1); + padding: 2px 8px; + border-radius: 4px; +} + +.discover-heat { + font-size: 12px; + color: #f59e0b; +} + +.discover-desc { + font-size: 14px; + color: var(--text-light); + margin-bottom: 12px; +} + +.discover-actions { + display: flex; + gap: 8px; +} + +.discover-action-btn { + flex: 1; + padding: 8px 12px; + border: 1px solid var(--border-color); + border-radius: 8px; + font-size: 14px; + color: var(--text-light); + background: white; + cursor: pointer; + transition: all 0.2s; +} + +.discover-action-btn:hover { + border-color: var(--primary); + color: var(--primary); +} + +.discover-action-btn.add-btn { + border-color: var(--primary); + color: var(--primary); +} + +.discover-action-btn.add-btn:hover { + background: var(--primary); + color: white; +} + +.discover-action-btn.add-btn.added { + background: rgba(102, 126, 234, 0.1); + color: var(--primary); + border-color: var(--primary); +} + +.discover-action-btn.favorite-btn { + border-color: #f59e0b; + color: #f59e0b; +} + +.discover-action-btn.favorite-btn:hover { + background: #f59e0b; + color: white; +} + +.discover-action-btn.favorite-btn.favorited { + background: #f59e0b; + color: white; +} + +/* ==================== 智能体收藏夹页面 ==================== */ + +.agent-favorite-page { + display: flex; + flex-direction: column; + height: 100vh; + height: 100dvh; + background: #f5f5f5; +} + +.favorite-header { + display: flex; + align-items: center; + padding: 12px 16px; + background: linear-gradient(135deg, var(--primary) 0%, #764ba2 100%); + color: white; +} + +.favorite-header h1 { + font-size: 18px; + font-weight: 600; + margin-left: 12px; +} + +.favorite-content { + flex: 1; + padding: 16px; + overflow-y: auto; +} + +.empty-favorites { + text-align: center; + padding: 60px 20px; +} + +.empty-icon { + font-size: 48px; + margin-bottom: 16px; + color: #f59e0b; +} + +.empty-favorites p { + color: var(--text-light); + margin: 8px 0; +} + +.empty-favorites .empty-tip { + font-size: 14px; + color: var(--primary); +} + +.favorite-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 12px; +} + +.favorite-agent-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 16px; + background: white; + border: 1px solid #f59e0b; + border-radius: 12px; + cursor: pointer; + transition: all 0.2s; + position: relative; + box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15); +} + +.favorite-agent-card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25); +} + +.favorite-agent-avatar { + font-size: 32px; + margin-bottom: 8px; +} + +.favorite-agent-name { + font-size: 14px; + font-weight: 600; + color: var(--text-color); + margin-bottom: 4px; +} + +.favorite-agent-desc { + font-size: 12px; + color: var(--text-light); + text-align: center; +} + +.favorite-agent-unfav { + position: absolute; + top: 8px; + right: 8px; + width: 24px; + height: 24px; + background: transparent; + border: none; + color: #f59e0b; + font-size: 16px; + cursor: pointer; + opacity: 0.6; + transition: opacity 0.2s; +} + +.favorite-agent-unfav:hover { + opacity: 1; +} + /* 最近使用的智能体列表 */ .recent-agents-list { display: flex;