Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 439743c051 | |||
| dbd1853e6e | |||
| 213b11c707 | |||
| 0303ccabc0 | |||
| e6b3465aa7 | |||
| b6455e4720 | |||
| 05d1b60671 |
871
www/app.js
871
www/app.js
@@ -19,32 +19,69 @@ 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; // 当前选中的智能体
|
||||
|
||||
// 获取使用智能体的对话列表（按时间倒序）
|
||||
function getAgentConversationHistory(limit = 5) {
|
||||
return conversations
|
||||
.filter(conv => conv.agentId) // 筛选有智能体的对话
|
||||
.sort((a, b) => b.updatedAt - a.updatedAt) // 按更新时间倒序
|
||||
.slice(0, limit)
|
||||
.map(conv => {
|
||||
const agent = systemAgents.find(a => a.id === conv.agentId);
|
||||
return {
|
||||
...conv,
|
||||
agent: agent
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 功能开关
|
||||
let enableThinking = false; // 深度思考
|
||||
let enableSearch = false; // 联网搜索
|
||||
@@ -90,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) {
|
||||
@@ -100,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() {
|
||||
@@ -196,6 +287,9 @@ function bindPageEvents() {
|
||||
// ==================== 对话页面 ====================
|
||||
|
||||
function renderChatsPage() {
|
||||
// 只显示没有智能体的普通对话
|
||||
const normalConversations = conversations.filter(conv => !conv.agentId);
|
||||
|
||||
return `
|
||||
<div class="chats-page">
|
||||
<header class="chats-header">
|
||||
@@ -212,9 +306,9 @@ function renderChatsPage() {
|
||||
|
||||
<div class="chats-content">
|
||||
<div class="conversation-list" id="conversationList">
|
||||
${conversations.length === 0
|
||||
${normalConversations.length === 0
|
||||
? '<div class="empty-list">暂无对话记录<br><br>点击右上角 + 开始新对话</div>'
|
||||
: sortConversations().map(conv => `
|
||||
: sortNormalConversations(normalConversations).map(conv => `
|
||||
<div class="conversation-item ${conv.is_pinned ? 'pinned' : ''}" data-id="${conv.id}">
|
||||
${conv.is_pinned ? '<span class="pin-icon">📌</span>' : ''}
|
||||
<div class="conv-title">${escapeHtml(conv.title)}</div>
|
||||
@@ -328,71 +422,115 @@ 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');
|
||||
const lifeAgents = agents.filter(a => a.category === 'life');
|
||||
|
||||
// 获取使用智能体的对话历史（最多5个）
|
||||
const recentAgentConvos = getAgentConversationHistory(5);
|
||||
const totalAgentConvos = conversations.filter(c => c.agentId).length;
|
||||
|
||||
// 是否有收藏的智能体
|
||||
const hasFavorites = favoriteAgents.length > 0;
|
||||
|
||||
return `
|
||||
<div class="agents-page">
|
||||
<header class="page-header">
|
||||
<header class="agents-header">
|
||||
<h1>智能体</h1>
|
||||
<div class="agents-header-actions">
|
||||
<button class="agents-header-btn" id="agentDiscoverBtn" 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="agents-header-btn favorite-btn ${hasFavorites ? 'has-favorites' : ''}" id="agentFavoriteBtn" title="收藏夹">
|
||||
${hasFavorites ? '★' : '☆'}
|
||||
</button>
|
||||
</div>
|
||||
</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">更多>></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>
|
||||
` : ''}
|
||||
|
||||
<!-- 热门智能体 -->
|
||||
${hotAgents.length > 0 ? `
|
||||
<div class="agents-section">
|
||||
<div class="section-title">🔥 热门智能体</div>
|
||||
<div class="agents-grid">
|
||||
${hotAgents.map(agent => `
|
||||
<div class="agent-card" data-id="${agent.id}">
|
||||
<div class="agent-avatar">${agent.avatar}</div>
|
||||
<div class="agent-name">${agent.name}</div>
|
||||
<div class="agent-desc">${agent.desc}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
${hotAgents.map(agent => renderAgentCard(agent)).join('')}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- 工作助手 -->
|
||||
${workAgents.length > 0 ? `
|
||||
<div class="agents-section">
|
||||
<div class="section-title">💼 工作助手</div>
|
||||
<div class="agents-grid">
|
||||
${workAgents.map(agent => `
|
||||
<div class="agent-card" data-id="${agent.id}">
|
||||
<div class="agent-avatar">${agent.avatar}</div>
|
||||
<div class="agent-name">${agent.name}</div>
|
||||
<div class="agent-desc">${agent.desc}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
${workAgents.map(agent => renderAgentCard(agent)).join('')}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- 学习助手 -->
|
||||
${studyAgents.length > 0 ? `
|
||||
<div class="agents-section">
|
||||
<div class="section-title">📚 学习助手</div>
|
||||
<div class="agents-grid">
|
||||
${studyAgents.map(agent => `
|
||||
<div class="agent-card" data-id="${agent.id}">
|
||||
<div class="agent-avatar">${agent.avatar}</div>
|
||||
<div class="agent-name">${agent.name}</div>
|
||||
<div class="agent-desc">${agent.desc}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
${studyAgents.map(agent => renderAgentCard(agent)).join('')}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<!-- 生活助手 -->
|
||||
${lifeAgents.length > 0 ? `
|
||||
<div class="agents-section">
|
||||
<div class="section-title">🏠 生活助手</div>
|
||||
<div class="agents-grid">
|
||||
${lifeAgents.map(agent => `
|
||||
<div class="agent-card" data-id="${agent.id}">
|
||||
<div class="agent-avatar">${agent.avatar}</div>
|
||||
<div class="agent-name">${agent.name}</div>
|
||||
<div class="agent-desc">${agent.desc}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
${lifeAgents.map(agent => renderAgentCard(agent)).join('')}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<!-- 智能体操作菜单 -->
|
||||
<div class="agent-action-menu" id="agentActionMenu">
|
||||
<div class="agent-action-menu-content">
|
||||
<div class="agent-action-item" data-action="pin">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z"/></svg>
|
||||
<span id="agentPinText">置顶</span>
|
||||
</div>
|
||||
<div class="agent-action-item" data-action="favorite">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
|
||||
<span id="agentFavoriteText">收藏</span>
|
||||
</div>
|
||||
<div class="agent-action-item delete-action" data-action="remove">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
|
||||
<span>移除</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -400,12 +538,575 @@ function renderAgentsPage() {
|
||||
`;
|
||||
}
|
||||
|
||||
// 渲染智能体卡片
|
||||
function renderAgentCard(agent) {
|
||||
const pinnedClass = agent.is_pinned ? 'pinned' : '';
|
||||
const favoriteClass = agent.is_favorite ? 'favorite' : '';
|
||||
return `
|
||||
<div class="agent-card ${pinnedClass} ${favoriteClass}" data-id="${agent.id}">
|
||||
${agent.is_pinned ? '<span class="agent-pin-icon">📌</span>' : ''}
|
||||
${agent.is_favorite ? '<span class="agent-fav-icon">⭐</span>' : ''}
|
||||
<div class="agent-avatar">${agent.avatar}</div>
|
||||
<div class="agent-name">${agent.name}</div>
|
||||
<div class="agent-desc">${agent.desc}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
|
||||
// 最近使用对话点击（打开已有对话）
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
// 智能体操作菜单事件
|
||||
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 = `
|
||||
<div class="agent-discover-page">
|
||||
<header class="discover-header">
|
||||
<button class="back-btn-white" id="discoverBackBtn">
|
||||
<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="discover-content">
|
||||
<!-- 搜索栏 -->
|
||||
<div class="discover-search">
|
||||
<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="discoverSearchInput" placeholder="搜索智能体名称或描述...">
|
||||
</div>
|
||||
|
||||
<!-- 热门智能体 -->
|
||||
<div class="discover-section">
|
||||
<div class="discover-section-title">🔥 热门智能体</div>
|
||||
<div class="discover-grid" id="discoverHotGrid">
|
||||
${hotAgents.map(agent => renderDiscoverCard(agent)).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工作助手 -->
|
||||
<div class="discover-section">
|
||||
<div class="discover-section-title">💼 工作助手</div>
|
||||
<div class="discover-grid" id="discoverWorkGrid">
|
||||
${workAgents.map(agent => renderDiscoverCard(agent)).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 学习助手 -->
|
||||
<div class="discover-section">
|
||||
<div class="discover-section-title">📚 学习助手</div>
|
||||
<div class="discover-grid" id="discoverStudyGrid">
|
||||
${studyAgents.map(agent => renderDiscoverCard(agent)).join('')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生活助手 -->
|
||||
<div class="discover-section">
|
||||
<div class="discover-section-title">🏠 生活助手</div>
|
||||
<div class="discover-grid" id="discoverLifeGrid">
|
||||
${lifeAgents.map(agent => renderDiscoverCard(agent)).join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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 `
|
||||
<div class="discover-card" data-id="${agent.id}">
|
||||
<div class="discover-card-header">
|
||||
<div class="discover-avatar">${agent.avatar}</div>
|
||||
<div class="discover-card-info">
|
||||
<div class="discover-name">${agent.name}</div>
|
||||
<div class="discover-meta">
|
||||
<span class="discover-category">${getCategoryLabel(agent.category)}</span>
|
||||
<span class="discover-heat">${heatDisplay}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="discover-desc">${agent.desc}</div>
|
||||
<div class="discover-actions">
|
||||
<button class="discover-action-btn add-btn ${isAdded ? 'added' : ''}" data-id="${agent.id}" data-action="add">
|
||||
${isAdded ? '已添加' : '+ 添加'}
|
||||
</button>
|
||||
<button class="discover-action-btn favorite-btn ${isFavorite ? 'favorited' : ''}" data-id="${agent.id}" data-action="favorite">
|
||||
${isFavorite ? '★ 已收藏' : '☆ 收藏'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 获取类别标签
|
||||
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 = `
|
||||
<div class="agent-favorite-page">
|
||||
<header class="favorite-header">
|
||||
<button class="back-btn-white" id="favoriteBackBtn">
|
||||
<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="favorite-content">
|
||||
${favoriteAgentsList.length === 0
|
||||
? '<div class="empty-favorites"><div class="empty-icon">⭐</div><p>暂无收藏的智能体</p><p class="empty-tip">点击右上角搜索按钮发现更多智能体</p></div>'
|
||||
: `
|
||||
<div class="favorite-grid">
|
||||
${favoriteAgentsList.map(agent => `
|
||||
<div class="favorite-agent-card" data-id="${agent.id}">
|
||||
<div class="favorite-agent-avatar">${agent.avatar}</div>
|
||||
<div class="favorite-agent-name">${agent.name}</div>
|
||||
<div class="favorite-agent-desc">${agent.desc}</div>
|
||||
<button class="favorite-agent-unfav" data-id="${agent.id}" title="取消收藏">☆</button>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -440,7 +1141,7 @@ function renderProfilePage() {
|
||||
</div>
|
||||
|
||||
<div class="profile-footer">
|
||||
<p>AI助手 v2.8.0</p>
|
||||
<p>AI助手 v3.2.1</p>
|
||||
<p>基于智谱 GLM-4.5-Air</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -462,9 +1163,63 @@ 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);
|
||||
currentAgent = systemAgents.find(a => a.id === agentId);
|
||||
if (!currentAgent) return;
|
||||
|
||||
// 创建新对话并设置智能体
|
||||
@@ -978,15 +1733,29 @@ function sortConversations() {
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索对话
|
||||
// 排序普通对话（没有智能体的）
|
||||
function sortNormalConversations(convList) {
|
||||
return [...convList].sort((a, b) => {
|
||||
// 置顶优先
|
||||
if (a.is_pinned && !b.is_pinned) return -1;
|
||||
if (!a.is_pinned && b.is_pinned) return 1;
|
||||
// 然后按更新时间
|
||||
return b.updatedAt - a.updatedAt;
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索普通对话（不包含智能体对话）
|
||||
function searchConversations(keyword) {
|
||||
const searchResults = document.getElementById('searchResults');
|
||||
if (!searchResults) return;
|
||||
|
||||
keyword = keyword.toLowerCase();
|
||||
|
||||
// 只搜索没有智能体的普通对话
|
||||
const normalConversations = conversations.filter(conv => !conv.agentId);
|
||||
|
||||
// 搜索标题和消息内容
|
||||
const results = conversations.filter(conv => {
|
||||
const results = normalConversations.filter(conv => {
|
||||
// 搜索标题
|
||||
if (conv.title.toLowerCase().includes(keyword)) return true;
|
||||
|
||||
|
||||
@@ -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.0.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.0.0"></script>
|
||||
<script src="app.js?v=3.0.0"></script>
|
||||
</body>
|
||||
</html>
|
||||
612
www/style.css
612
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);
|
||||
}
|
||||
|
||||
/* ==================== 对话页面 ==================== */
|
||||
@@ -168,10 +167,62 @@ 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;
|
||||
overflow-y: auto;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.agents-section {
|
||||
@@ -185,6 +236,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);
|
||||
@@ -201,6 +274,7 @@ body {
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.agent-card:hover {
|
||||
@@ -209,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;
|
||||
@@ -227,6 +326,506 @@ 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;
|
||||
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 +837,7 @@ body {
|
||||
.profile-content {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
|
||||
Reference in New Issue
Block a user