caoxiaozhu/X-Agents
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增 Logs、Memory、Plan 页面

Browse Source 
- 添加 Logs.vue 日志页面
- 添加 Memory.vue 记忆页面
- 添加 Plan.vue 计划页面
- 更新路由和侧边栏导航

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-72TV0V4\caoxiaozhu
2026-03-10 17:38:23 +08:00
parent 577dceebfe
commit c590aa21d0
5 changed files with 848 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

292
web/src/views/Plan.vue Normal file
View File

@@ -0,0 +1,292 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
// Mock scheduled tasks data
const tasks = ref([
{
id: 1,
name: 'Human-like Heartbeat',
status: 'running',
triggerType: 'Interval 30 minutes',
nextRun: '2026/03/10 16:26',
lastRun: '2026/03/10 15:56',
notifyChannel: '-',
executionCount: 13,
description: 'Check if proactive messages need to be sent (greetings/reminders/follow-ups)',
tags: ['System Task', 'Agent Task', 'Interval']
},
{
id: 2,
name: 'Memory Organization',
status: 'running',
triggerType: 'Interval 3 hours',
nextRun: '2026/03/10 18:35',
lastRun: '2026/03/10 15:35',
notifyChannel: '-',
executionCount: 2,
description: 'Execute memory organization: organize chat history, extract key memories, refresh MEMORY.md',
tags: ['System Task', 'Agent Task', 'Interval']
},
{
id: 3,
name: 'System Self-Check',
status: 'running',
triggerType: 'Daily 04:00',
nextRun: '2026/03/11 04:00',
lastRun: 'Never',
notifyChannel: '-',
executionCount: 0,
description: 'Execute system self-check: analyze ERROR logs, try to fix tool issues, generate report',
tags: ['System Task', 'Agent Task', 'Daily']
},
])
const activeTab = ref('running') // running, completed, all
const searchQuery = ref('')
const filteredTasks = computed(() => {
let result = tasks.value
if (activeTab.value === 'running') {
result = result.filter(t => t.status === 'running')
} else if (activeTab.value === 'completed') {
result = result.filter(t => t.status === 'stopped')
}
if (searchQuery.value) {
const query = searchQuery.value.toLowerCase()
result = result.filter(t =>
t.name.toLowerCase().includes(query) ||
t.description.toLowerCase().includes(query)
)
}
return result
})
const getTaskCount = (status: string) => {
if (status === 'running') return tasks.value.filter(t => t.status === 'running').length
if (status === 'completed') return tasks.value.filter(t => t.status === 'stopped').length
return tasks.value.length
}
const getStatusClass = (status: string) => {
switch (status) {
case 'running': return 'bg-green-500'
case 'stopped': return 'bg-gray-500'
default: return 'bg-gray-500'
}
}
</script>
<template>
<div class="p-6 min-h-screen plan-page">
<!-- Header -->
<div class="flex justify-between items-center mb-6">
<div class="flex items-center gap-2">
<i class="fa-solid fa-clock text-orange-500"></i>
<span class="font-medium text-white">Scheduled Tasks</span>
</div>
<button class="btn-primary">
<i class="fa-solid fa-plus"></i>
New Task
</button>
</div>
<!-- Search -->
<div class="flex gap-4 mb-6">
<div class="flex-1 relative">
<i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
<input
v-model="searchQuery"
type="text"
placeholder="Search tasks..."
class="search-input w-full"
>
</div>
</div>
<!-- Tab Navigation -->
<div class="flex gap-6 mb-4">
<button
:class="['tab-item', { active: activeTab === 'running' }]"
@click="activeTab = 'running'"
>
Running {{ getTaskCount('running') }}
</button>
<button
:class="['tab-item', { active: activeTab === 'completed' }]"
@click="activeTab = 'completed'"
>
Completed {{ getTaskCount('completed') }}
</button>
<button
:class="['tab-item', { active: activeTab === 'all' }]"
@click="activeTab = 'all'"
>
All {{ getTaskCount('all') }}
</button>
</div>
<!-- Task List Table -->
<div class="bg-dark-700 rounded-xl overflow-hidden">
<div v-if="filteredTasks.length === 0" class="py-12 text-center text-gray-400">
<i class="fa-solid fa-clock text-2xl mb-2"></i>
<p>No tasks found</p>
</div>
<table v-else class="w-full">
<thead class="bg-dark-600">
<tr>
<th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Task Name</th>
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Trigger</th>
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Next Run</th>
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Executions</th>
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="task in filteredTasks" :key="task.id" class="table-row">
<td class="px-5 py-4">
<div class="flex items-center gap-2">
<span :class="['w-2 h-2 rounded-full', getStatusClass(task.status)]"></span>
<div>
<div class="font-medium text-white">{{ task.name }}</div>
<div class="text-sm text-gray-500">{{ task.description }}</div>
</div>
</div>
<div class="flex gap-2 mt-2">
<span v-for="tag in task.tags" :key="tag" class="task-tag">{{ tag }}</span>
</div>
</td>
<td class="px-5 py-4 text-center">
<span :class="['status-badge', getStatusClass(task.status)]">
{{ task.status === 'running' ? 'Running' : 'Stopped' }}
</span>
</td>
<td class="px-5 py-4 text-center text-gray-400 text-sm">
{{ task.triggerType }}
</td>
<td class="px-5 py-4 text-center text-gray-400 text-sm">
{{ task.nextRun }}
</td>
<td class="px-5 py-4 text-center">
<span class="text-primary-cyan">{{ task.executionCount }}</span>
</td>
<td class="px-5 py-4">
<div class="flex items-center justify-center gap-2">
<button class="btn-icon" title="Pause">
<i class="fa-solid fa-pause text-gray-400 hover:text-white"></i>
</button>
<button class="btn-icon" title="Edit">
<i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
</button>
<button class="btn-icon" title="Delete">
<i class="fa-solid fa-trash text-gray-400 hover:text-red-500"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<style scoped>
.plan-page {
background-color: #0f1419;
}
.btn-primary {
background: linear-gradient(135deg, #f97316, #ef4444);
color: white;
padding: 10px 20px;
border-radius: 8px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
border: none;
transition: all 0.2s;
}
.btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}
.search-input {
background-color: #1f2937;
border: 1px solid #374151;
border-radius: 8px;
padding: 10px 12px 10px 36px;
color: white;
font-size: 14px;
outline: none;
transition: border-color 0.2s;
}
.search-input:focus {
border-color: #f97316;
}
.search-input::placeholder {
color: #6b7280;
}
.tab-item {
background: none;
border: none;
color: #9ca3af;
font-size: 14px;
padding: 8px 4px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
}
.tab-item:hover {
color: white;
}
.tab-item.active {
color: #f97316;
border-bottom-color: #f97316;
}
.table-row {
border-top: 1px solid #2a2a3a;
transition: background-color 0.2s;
}
.table-row:hover {
background-color: rgba(255, 255, 255, 0.02);
}
.task-tag {
background-color: #374151;
color: #d1d5db;
font-size: 11px;
padding: 2px 6px;
border-radius: 4px;
}
.status-badge {
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
color: white;
}
.btn-icon {
background: none;
border: none;
cursor: pointer;
padding: 6px;
border-radius: 4px;
transition: background-color 0.2s;
}
.btn-icon:hover {
background-color: rgba(255, 255, 255, 0.1);
}
</style>