Compare commits

...

4 Commits

3 changed files with 280 additions and 3 deletions

View File

@@ -45,6 +45,21 @@ let agents = [
let currentAgent = null; // 当前选中的智能体
// 获取使用智能体的对话列表(按时间倒序)
function getAgentConversationHistory(limit = 5) {
return conversations
.filter(conv => conv.agentId) // 筛选有智能体的对话
.sort((a, b) => b.updatedAt - a.updatedAt) // 按更新时间倒序
.slice(0, limit)
.map(conv => {
const agent = agents.find(a => a.id === conv.agentId);
return {
...conv,
agent: agent
};
});
}
// 功能开关
let enableThinking = false; // 深度思考
let enableSearch = false; // 联网搜索
@@ -333,6 +348,10 @@ function renderAgentsPage() {
const studyAgents = agents.filter(a => a.category === 'study');
const lifeAgents = agents.filter(a => a.category === 'life');
// 获取使用智能体的对话历史最多5个
const recentAgentConvos = getAgentConversationHistory(5);
const totalAgentConvos = conversations.filter(c => c.agentId).length;
return `
<div class="agents-page">
<header class="page-header">
@@ -340,6 +359,32 @@ function renderAgentsPage() {
</header>
<div class="agents-content">
<!-- 最近使用 -->
${recentAgentConvos.length > 0 ? `
<div class="agents-section">
<div class="section-title-row">
<div class="section-title">🕐 最近使用</div>
${totalAgentConvos > 5 ? `
<div class="section-more" id="showAllRecentBtn">更多&gt;&gt;</div>
` : ''}
</div>
<div class="recent-agents-list">
${recentAgentConvos.map(conv => `
<div class="recent-agent-item" data-conv-id="${conv.id}">
<div class="recent-agent-left">
<span class="recent-agent-avatar">${conv.agent ? conv.agent.avatar : '🤖'}</span>
<span class="recent-agent-name">${conv.title}</span>
</div>
<div class="recent-agent-right">
<span class="recent-agent-agent-name">${conv.agent ? conv.agent.name : '未知智能体'}</span>
<span class="recent-agent-time">${formatTime(conv.updatedAt)}</span>
</div>
</div>
`).join('')}
</div>
</div>
` : ''}
<!-- 热门智能体 -->
<div class="agents-section">
<div class="section-title">🔥 热门智能体</div>
@@ -401,12 +446,31 @@ function renderAgentsPage() {
}
function bindAgentsPageEvents() {
// 智能体卡片点击(新建对话)
document.querySelectorAll('.agent-card').forEach(card => {
card.addEventListener('click', () => {
const id = card.getAttribute('data-id');
openAgent(id);
});
});
// 最近使用对话点击(打开已有对话)
document.querySelectorAll('.recent-agent-item').forEach(item => {
item.addEventListener('click', () => {
const convId = item.getAttribute('data-conv-id');
if (convId) {
openConversation(convId);
}
});
});
// 查看全部历史使用
const showAllRecentBtn = document.getElementById('showAllRecentBtn');
if (showAllRecentBtn) {
showAllRecentBtn.addEventListener('click', () => {
showAgentHistoryPage();
});
}
}
// ==================== 我的页面 ====================
@@ -462,6 +526,60 @@ function bindProfilePageEvents() {
}
}
// 查看全部历史使用
function showAgentHistoryPage() {
const allAgentConvos = getAgentConversationHistory(100); // 获取所有
const historyHtml = `
<div class="agent-history-page">
<header class="page-header">
<button class="back-btn-white" id="historyBackBtn">
<svg viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
</button>
<h1>历史使用</h1>
</header>
<div class="agent-history-content">
${allAgentConvos.length === 0
? '<div class="empty-list">暂无历史使用记录</div>'
: allAgentConvos.map(conv => `
<div class="agent-history-item" data-conv-id="${conv.id}">
<div class="agent-history-left">
<span class="agent-history-avatar">${conv.agent ? conv.agent.avatar : '🤖'}</span>
<span class="agent-history-name">${conv.title}</span>
</div>
<div class="agent-history-right">
<span class="agent-history-agent">${conv.agent ? conv.agent.name : '未知智能体'}</span>
<span class="agent-history-time">${formatTime(conv.updatedAt)}</span>
</div>
</div>
`).join('')
}
</div>
</div>
`;
appContainer.innerHTML = historyHtml;
// 绑定返回按钮
const backBtn = document.getElementById('historyBackBtn');
if (backBtn) {
backBtn.addEventListener('click', () => {
showMainPage();
});
}
// 绑定对话点击(打开已有对话)
document.querySelectorAll('.agent-history-item').forEach(item => {
item.addEventListener('click', () => {
const convId = item.getAttribute('data-conv-id');
if (convId) {
openConversation(convId);
}
});
});
}
// 打开智能体对话
function openAgent(agentId) {
currentAgent = agents.find(a => a.id === agentId);

View File

@@ -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.2">
<link rel="stylesheet" href="style.css?v=3.1.3">
<link rel="manifest" href="manifest.json">
</head>
<body>
<div id="app"></div>
<script src="marked.min.js?v=3.0.2"></script>
<script src="app.js?v=3.0.2"></script>
<script src="marked.min.js?v=3.1.3"></script>
<script src="app.js?v=3.1.3"></script>
</body>
</html>

View File

@@ -185,6 +185,28 @@ body {
margin-bottom: 12px;
}
.section-title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.section-title-row .section-title {
margin-bottom: 0;
}
.section-more {
font-size: 14px;
color: var(--primary);
cursor: pointer;
transition: color 0.2s;
}
.section-more:hover {
color: #5a67d8;
}
.agents-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
@@ -227,6 +249,143 @@ body {
text-align: center;
}
/* 最近使用的智能体列表 */
.recent-agents-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.recent-agent-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: white;
border: 1px solid var(--border-color);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.recent-agent-item:hover {
border-color: var(--primary);
background: rgba(102, 126, 234, 0.05);
}
.recent-agent-left {
display: flex;
align-items: center;
gap: 12px;
}
.recent-agent-avatar {
font-size: 20px;
}
.recent-agent-name {
font-size: 14px;
font-weight: 500;
color: var(--text-color);
}
.recent-agent-right {
display: flex;
align-items: center;
gap: 12px;
font-size: 12px;
color: var(--text-light);
}
.recent-agent-usage {
color: var(--primary);
}
.recent-agent-agent-name {
font-size: 12px;
color: var(--primary);
background: rgba(102, 126, 234, 0.1);
padding: 2px 8px;
border-radius: 4px;
}
/* 智能体历史页面 */
.agent-history-page {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
}
.back-btn-white {
background: transparent;
border: none;
color: white;
padding: 8px;
cursor: pointer;
}
.agent-history-content {
flex: 1;
padding: 16px;
overflow-y: auto;
background: #f5f5f5;
}
.agent-history-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
background: white;
border: 1px solid var(--border-color);
border-radius: 10px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s;
}
.agent-history-item:hover {
border-color: var(--primary);
background: rgba(102, 126, 234, 0.05);
}
.agent-history-left {
display: flex;
align-items: center;
gap: 12px;
}
.agent-history-avatar {
font-size: 24px;
}
.agent-history-name {
font-size: 15px;
font-weight: 500;
color: var(--text-color);
}
.agent-history-right {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: var(--text-light);
}
.agent-history-usage {
color: var(--primary);
}
.agent-history-agent {
font-size: 12px;
color: var(--primary);
background: rgba(102, 126, 234, 0.1);
padding: 2px 8px;
border-radius: 4px;
}
/* ==================== 我的页面 ==================== */
.profile-page {