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

feat: 更新 Web 前端页面

Browse Source 
- 更新 Agents、Chat、Settings 等页面
- 新增 ModelAPIs 页面
- 更新各个模块的 composables
- 更新 vite 配置和依赖版本

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-72TV0V4\caoxiaozhu
2026-03-13 21:29:01 +08:00
parent 71e8cc59d5
commit ecb6be6463
24 changed files with 1031 additions and 757 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
web/src/views/Plan.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { Play, Pause, Edit, Trash2, Plus, Search, Clock } from 'lucide-vue-next'
// Mock scheduled tasks data
const tasks = ref([
@@ -64,14 +65,6 @@ const getTaskCount = (status: string) => {
if (status === 'stopped') 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>
@@ -79,11 +72,11 @@ const getStatusClass = (status: string) => {
<!-- 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>
<Clock class="w-5 h-5 text-orange-500" />
<span class="font-medium">Scheduled Tasks</span>
</div>
<button class="btn-primary">
<i class="fa-solid fa-plus"></i>
<button class="flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-orange-500 to-amber-500 text-white text-sm font-medium hover:from-orange-400 hover:to-amber-400 transition-all">
<Plus class="w-4 h-4" />
New Task
</button>
</div>
@@ -91,7 +84,7 @@ const getStatusClass = (status: string) => {
<!-- 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>
<Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
<input
v-model="searchQuery"
type="text"
@@ -107,15 +100,18 @@ const getStatusClass = (status: string) => {
</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 class="bg-dark-700 rounded-xl overflow-hidden shadow-lg">
<div v-if="filteredTasks.length === 0" class="empty-box">
<div class="empty-icon">
<Clock class="w-12 h-12" />
</div>
<p class="empty-text">No tasks found</p>
<p class="empty-tip">Click "New Task" to add a task</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-left px-5 py-3 text-sm font-medium text-gray-400 w-1/3">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>
@@ -126,20 +122,23 @@ const getStatusClass = (status: string) => {
<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 class="flex gap-3">
<div class="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center flex-shrink-0 self-center">
<Clock class="w-5 h-5 text-orange-400" />
</div>
<div class="min-w-0 self-center">
<div class="font-medium">{{ task.name }}</div>
<div class="text-sm text-gray-500 line-clamp-2 mt-0.5">{{ task.description }}</div>
</div>
</div>
<div class="flex gap-2 mt-2">
<div class="flex gap-2 mt-2 ml-13">
<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 class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs" :class="task.status === 'running' ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'">
<span class="w-1.5 h-1.5 rounded-full" :class="task.status === 'running' ? 'bg-green-500' : 'bg-gray-400'"></span>
<span class="capitalize">{{ task.status === 'running' ? 'Running' : 'Stopped' }}</span>
</span>
</td>
<td class="px-5 py-4 text-center text-gray-400 text-sm">
@@ -154,13 +153,14 @@ const getStatusClass = (status: string) => {
<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>
<Pause v-if="task.status === 'running'" class="w-4 h-4 text-gray-400 hover:text-yellow-400" />
<Play v-else class="w-4 h-4 text-gray-400 hover:text-green-400" />
</button>
<button class="btn-icon" title="Edit">
<i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
<Edit class="w-4 h-4 text-gray-400 hover:text-white" />
</button>
<button class="btn-icon" title="Delete">
<i class="fa-solid fa-trash text-gray-400 hover:text-red-500"></i>
<Trash2 class="w-4 h-4 text-gray-400 hover:text-red-400" />
</button>
</div>
</td>
@@ -176,25 +176,6 @@ const getStatusClass = (status: string) => {
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;
@@ -214,26 +195,6 @@ const getStatusClass = (status: string) => {
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;
@@ -251,11 +212,8 @@ const getStatusClass = (status: string) => {
border-radius: 4px;
}
.status-badge {
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
color: white;
.ml-13 {
margin-left: 3.25rem;
}
.btn-icon {
@@ -270,4 +228,41 @@ const getStatusClass = (status: string) => {
.btn-icon:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* 空状态样式 */
.empty-box {
min-height: 340px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.empty-icon {
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1f2937, #111827);
border-radius: 24px;
margin-bottom: 20px;
}
.empty-icon i {
font-size: 40px;
color: #6b7280;
}
.empty-text {
color: #d1d5db;
font-size: 1.25rem;
font-weight: 500;
margin-bottom: 8px;
}
.empty-tip {
color: #6b7280;
font-size: 0.875rem;
}
</style>