Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 213b11c707 | |||
| 0303ccabc0 | |||
| e6b3465aa7 | |||
| b6455e4720 |
118
www/app.js
118
www/app.js
@@ -45,6 +45,21 @@ let agents = [
|
||||
|
||||
let currentAgent = null; // 当前选中的智能体
|
||||
|
||||
// 获取使用智能体的对话列表(按时间倒序)
|
||||
function getAgentConversationHistory(limit = 5) {
|
||||
return conversations
|
||||
.filter(conv => conv.agentId) // 筛选有智能体的对话
|
||||
.sort((a, b) => b.updatedAt - a.updatedAt) // 按更新时间倒序
|
||||
.slice(0, limit)
|
||||
.map(conv => {
|
||||
const agent = agents.find(a => a.id === conv.agentId);
|
||||
return {
|
||||
...conv,
|
||||
agent: agent
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 功能开关
|
||||
let enableThinking = false; // 深度思考
|
||||
let enableSearch = false; // 联网搜索
|
||||
@@ -333,6 +348,10 @@ function renderAgentsPage() {
|
||||
const studyAgents = agents.filter(a => a.category === 'study');
|
||||
const lifeAgents = agents.filter(a => a.category === 'life');
|
||||
|
||||
// 获取使用智能体的对话历史(最多5个)
|
||||
const recentAgentConvos = getAgentConversationHistory(5);
|
||||
const totalAgentConvos = conversations.filter(c => c.agentId).length;
|
||||
|
||||
return `
|
||||
<div class="agents-page">
|
||||
<header class="page-header">
|
||||
@@ -340,6 +359,32 @@ function renderAgentsPage() {
|
||||
</header>
|
||||
|
||||
<div class="agents-content">
|
||||
<!-- 最近使用 -->
|
||||
${recentAgentConvos.length > 0 ? `
|
||||
<div class="agents-section">
|
||||
<div class="section-title-row">
|
||||
<div class="section-title">🕐 最近使用</div>
|
||||
${totalAgentConvos > 5 ? `
|
||||
<div class="section-more" id="showAllRecentBtn">更多>></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);
|
||||
|
||||
@@ -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>
|
||||
159
www/style.css
159
www/style.css
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user