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

feat: 更新前端页面

Browse Source 
- Agents, Chat, Skill 页面
- useSkills composable
- package.json 更新

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-72TV0V4\caoxiaozhu
2026-03-11 16:26:10 +08:00
parent 715dc14b38
commit 243a190124
6 changed files with 541 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
web/src/views/Agents.vue
View File

@@ -1,6 +1,15 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
// Agents 数据
const agents = ref([
{ id: 1, name: 'Claude Agent', avatar: '🧠', description: 'General purpose AI assistant', accentColor: '#f97316', gradient: 'from-orange-500/20 to-amber-500/20', status: 'running' as const, framework: 'Google ADK', model: 'gemini-2.0-flash', mcpServers: 2, createdAt: '2025-04-10' },
{ id: 2, name: 'Code Assistant', avatar: '💻', description: 'Specialized in code generation', accentColor: '#3b82f6', gradient: 'from-blue-500/20 to-cyan-500/20', status: 'running' as const, framework: 'OpenAI', model: 'gpt-4o', mcpServers: 1, createdAt: '2025-04-08' },
{ id: 3, name: 'Data Analyst', avatar: '📊', description: 'Data analysis and visualization', accentColor: '#10b981', gradient: 'from-emerald-500/20 to-green-500/20', status: 'stopped' as const, framework: 'PydanticAI', model: 'gpt-4o-mini', mcpServers: 3, createdAt: '2025-04-05' },
{ id: 4, name: 'Research Bot', avatar: '🔬', description: 'Academic research assistant', accentColor: '#8b5cf6', gradient: 'from-violet-500/20 to-purple-500/20', status: 'running' as const, framework: 'LangChain', model: 'claude-3-5-sonnet', mcpServers: 2, createdAt: '2025-04-12' },
{ id: 5, name: '客服助手', avatar: '🎧', description: 'Customer support agent', accentColor: '#ec4899', gradient: 'from-pink-500/20 to-rose-500/20', status: 'running' as const, framework: 'Google ADK', model: 'gemini-1.5-pro', mcpServers: 4, createdAt: '2025-04-11' },
])
// 创建智能体弹窗状态
const showCreateModal = ref(false)
const isCreating = ref(false)
@@ -65,29 +74,6 @@ const createAgent = async () => {
}
}
interface Agent {
id: number
name: string
avatar: string
description: string
accentColor: string
gradient: string
status: 'running' | 'stopped'
framework: string
model: string
mcpServers: number
createdAt: string
}
// 管理页面的 agents
const agents = ref<Agent[]>([
{ id: 1, name: 'Claude Agent', avatar: '🧠', description: 'General purpose AI assistant', accentColor: '#f97316', gradient: 'from-orange-500/20 to-amber-500/20', status: 'running', framework: 'Google ADK', model: 'gemini-2.0-flash', mcpServers: 2, createdAt: '2025-04-10' },
{ id: 2, name: 'Code Assistant', avatar: '💻', description: 'Specialized in code generation', accentColor: '#3b82f6', gradient: 'from-blue-500/20 to-cyan-500/20', status: 'running', framework: 'OpenAI', model: 'gpt-4o', mcpServers: 1, createdAt: '2025-04-08' },
{ id: 3, name: 'Data Analyst', avatar: '📊', description: 'Data analysis and visualization', accentColor: '#10b981', gradient: 'from-emerald-500/20 to-green-500/20', status: 'stopped', framework: 'PydanticAI', model: 'gpt-4o-mini', mcpServers: 3, createdAt: '2025-04-05' },
{ id: 4, name: 'Research Bot', avatar: '🔬', description: 'Academic research assistant', accentColor: '#8b5cf6', gradient: 'from-violet-500/20 to-purple-500/20', status: 'running', framework: 'LangChain', model: 'claude-3-5-sonnet', mcpServers: 2, createdAt: '2025-04-12' },
{ id: 5, name: '客服助手', avatar: '🎧', description: 'Customer support agent', accentColor: '#ec4899', gradient: 'from-pink-500/20 to-rose-500/20', status: 'running', framework: 'Google ADK', model: 'gemini-1.5-pro', mcpServers: 4, createdAt: '2025-04-11' },
])
const searchQuery = ref('')
const filterStatus = ref('all')
@@ -118,7 +104,7 @@ const statusClass = (status: string) => {
}
// 切换状态
const toggleStatus = (agent: Agent) => {
const toggleStatus = (agent: any) => {
agent.status = agent.status === 'running' ? 'stopped' : 'running'
}
@@ -143,54 +129,6 @@ const deleteAgent = (id: number) => {
</button>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-4 gap-4 mb-6">
<div class="bg-dark-700 rounded-xl p-4 border border-dark-500">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-dark-600 flex items-center justify-center">
<i class="fa-solid fa-robot text-gray-400"></i>
</div>
<div>
<div class="text-2xl font-bold text-white">{{ stats.total }}</div>
<div class="text-xs text-gray-400">Total Agents</div>
</div>
</div>
</div>
<div class="bg-dark-700 rounded-xl p-4 border border-dark-500">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-primary-success/20 flex items-center justify-center">
<i class="fa-solid fa-circle-check text-primary-success"></i>
</div>
<div>
<div class="text-2xl font-bold text-primary-success">{{ stats.running }}</div>
<div class="text-xs text-gray-400">Running</div>
</div>
</div>
</div>
<div class="bg-dark-700 rounded-xl p-4 border border-dark-500">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-gray-500/20 flex items-center justify-center">
<i class="fa-solid fa-circle-stop text-gray-400"></i>
</div>
<div>
<div class="text-2xl font-bold text-gray-400">{{ stats.stopped }}</div>
<div class="text-xs text-gray-400">Stopped</div>
</div>
</div>
</div>
<div class="bg-dark-700 rounded-xl p-4 border border-dark-500">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-lg bg-primary-cyan/20 flex items-center justify-center">
<i class="fa-solid fa-plug text-primary-cyan"></i>
</div>
<div>
<div class="text-2xl font-bold text-primary-cyan">{{ agents.reduce((sum, a) => sum + a.mcpServers, 0) }}</div>
<div class="text-xs text-gray-400">MCP Servers</div>
</div>
</div>
</div>
</div>
<!-- 搜索和筛选 -->
<div class="flex gap-4 mb-6">
<div class="flex-1 relative">