266 lines
12 KiB
Vue
266 lines
12 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, computed } from 'vue'
|
||
|
|
import '@/views/database/database.css'
|
||
|
|
|
||
|
|
interface Tool {
|
||
|
|
id: number
|
||
|
|
name: string
|
||
|
|
type: 'built-in' | 'custom' | 'mcp'
|
||
|
|
description: string
|
||
|
|
status: 'active' | 'inactive'
|
||
|
|
icon?: string
|
||
|
|
provider?: string
|
||
|
|
config?: object
|
||
|
|
createdAt: string
|
||
|
|
}
|
||
|
|
|
||
|
|
// Mock data for tools
|
||
|
|
const builtInTools = ref<Tool[]>([
|
||
|
|
{ id: 1, name: 'File Reader', type: 'built-in', description: 'Read files from the filesystem', status: 'active', icon: 'fa-file-lines', createdAt: '2025-01-15' },
|
||
|
|
{ id: 2, name: 'Web Search', type: 'built-in', description: 'Search the web for information', status: 'active', icon: 'fa-globe', createdAt: '2025-01-15' },
|
||
|
|
{ id: 3, name: 'Calculator', type: 'built-in', description: 'Perform mathematical calculations', status: 'active', icon: 'fa-calculator', createdAt: '2025-01-15' },
|
||
|
|
{ id: 4, name: 'Code Executor', type: 'built-in', description: 'Execute code in a sandbox', status: 'active', icon: 'fa-code', createdAt: '2025-01-15' },
|
||
|
|
{ id: 5, name: 'JSON Parser', type: 'built-in', description: 'Parse and validate JSON data', status: 'active', icon: 'fa-brackets-curly', createdAt: '2025-01-15' },
|
||
|
|
])
|
||
|
|
|
||
|
|
const customTools = ref<Tool[]>([
|
||
|
|
{ id: 101, name: 'GitHub API', type: 'custom', description: 'Interact with GitHub REST API', status: 'active', icon: 'fa-github', provider: 'Custom', createdAt: '2025-03-01' },
|
||
|
|
{ id: 102, name: 'Slack Notifier', type: 'custom', description: 'Send notifications to Slack', status: 'inactive', icon: 'fa-slack', provider: 'Custom', createdAt: '2025-03-05' },
|
||
|
|
{ id: 103, name: 'Email Sender', type: 'custom', description: 'Send emails via SMTP', status: 'active', icon: 'fa-envelope', provider: 'Custom', createdAt: '2025-03-08' },
|
||
|
|
])
|
||
|
|
|
||
|
|
const mcpTools = ref<Tool[]>([
|
||
|
|
{ id: 201, name: 'Puppeteer', type: 'mcp', description: 'Browser automation via Puppeteer', status: 'active', icon: 'fa-browser', provider: 'MCP Server', createdAt: '2025-02-10' },
|
||
|
|
{ id: 202, name: 'SQL Database', type: 'mcp', description: 'Execute SQL queries on databases', status: 'active', icon: 'fa-database', provider: 'MCP Server', createdAt: '2025-02-12' },
|
||
|
|
{ id: 203, name: 'Filesystem', type: 'mcp', description: 'File operations via MCP', status: 'active', icon: 'fa-folder', provider: 'MCP Server', createdAt: '2025-02-15' },
|
||
|
|
{ id: 204, name: 'Git Operations', type: 'mcp', description: 'Git repository operations', status: 'inactive', icon: 'fa-git-alt', provider: 'MCP Server', createdAt: '2025-02-18' },
|
||
|
|
])
|
||
|
|
|
||
|
|
const activeTab = ref<'built-in' | 'custom' | 'mcp'>('built-in')
|
||
|
|
const searchQuery = ref('')
|
||
|
|
const filterStatus = ref('all')
|
||
|
|
const editingTool = ref<Tool | null>(null)
|
||
|
|
const isEditing = ref(false)
|
||
|
|
|
||
|
|
const editForm = ref({
|
||
|
|
name: '',
|
||
|
|
description: '',
|
||
|
|
provider: '',
|
||
|
|
})
|
||
|
|
|
||
|
|
// Statistics
|
||
|
|
const stats = computed(() => ({
|
||
|
|
total: builtInTools.value.length + customTools.value.length + mcpTools.value.length,
|
||
|
|
active: [...builtInTools.value, ...customTools.value, ...mcpTools.value].filter(t => t.status === 'active').length,
|
||
|
|
builtIn: builtInTools.value.length,
|
||
|
|
custom: customTools.value.length,
|
||
|
|
mcp: mcpTools.value.length
|
||
|
|
}))
|
||
|
|
|
||
|
|
const currentTools = computed(() => {
|
||
|
|
let tools: Tool[] = []
|
||
|
|
switch (activeTab.value) {
|
||
|
|
case 'built-in': tools = builtInTools.value; break
|
||
|
|
case 'custom': tools = customTools.value; break
|
||
|
|
case 'mcp': tools = mcpTools.value; break
|
||
|
|
}
|
||
|
|
return tools.filter(tool => {
|
||
|
|
const matchSearch = tool.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
|
||
|
|
tool.description.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||
|
|
const matchStatus = filterStatus.value === 'all' || tool.status === filterStatus.value
|
||
|
|
return matchSearch && matchStatus
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
const tabCounts = computed(() => ({
|
||
|
|
'built-in': builtInTools.value.length,
|
||
|
|
'custom': customTools.value.length,
|
||
|
|
'mcp': mcpTools.value.length,
|
||
|
|
}))
|
||
|
|
|
||
|
|
const openEdit = (tool: Tool) => {
|
||
|
|
editingTool.value = tool
|
||
|
|
editForm.value = { name: tool.name, description: tool.description, provider: tool.provider || '' }
|
||
|
|
isEditing.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
const saveEdit = () => {
|
||
|
|
if (editingTool.value) {
|
||
|
|
const targetArray = editingTool.value.type === 'built-in' ? builtInTools.value :
|
||
|
|
editingTool.value.type === 'custom' ? customTools.value : mcpTools.value
|
||
|
|
const index = targetArray.findIndex(t => t.id === editingTool.value!.id)
|
||
|
|
if (index !== -1) targetArray[index] = { ...targetArray[index], ...editForm.value }
|
||
|
|
}
|
||
|
|
isEditing.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
const cancelEdit = () => { isEditing.value = false; editingTool.value = null }
|
||
|
|
|
||
|
|
const toggleStatus = (tool: Tool) => {
|
||
|
|
const targetArray = tool.type === 'built-in' ? builtInTools.value :
|
||
|
|
tool.type === 'custom' ? customTools.value : mcpTools.value
|
||
|
|
const found = targetArray.find(t => t.id === tool.id)
|
||
|
|
if (found) found.status = found.status === 'active' ? 'inactive' : 'active'
|
||
|
|
}
|
||
|
|
|
||
|
|
const deleteTool = (id: number) => {
|
||
|
|
switch (activeTab.value) {
|
||
|
|
case 'built-in': builtInTools.value = builtInTools.value.filter(t => t.id !== id); break
|
||
|
|
case 'custom': customTools.value = customTools.value.filter(t => t.id !== id); break
|
||
|
|
case 'mcp': mcpTools.value = mcpTools.value.filter(t => t.id !== id); break
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="p-6 min-h-screen">
|
||
|
|
<!-- 顶部导航 -->
|
||
|
|
<div class="flex justify-between items-center mb-6">
|
||
|
|
<div class="flex items-center gap-2">
|
||
|
|
<i class="fa-solid fa-tools text-orange-500"></i>
|
||
|
|
<span class="font-medium">Tools</span>
|
||
|
|
</div>
|
||
|
|
<button class="btn-primary">
|
||
|
|
<i class="fa-solid fa-plus"></i>
|
||
|
|
New Tool
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Tab 导航 -->
|
||
|
|
<div class="flex items-center gap-2 mb-6">
|
||
|
|
<button
|
||
|
|
v-for="(label, tab) in { 'built-in': 'Built-in', 'custom': 'Custom', 'mcp': 'MCP Servers' }"
|
||
|
|
:key="tab"
|
||
|
|
@click="activeTab = tab as 'built-in' | 'custom' | 'mcp'"
|
||
|
|
class="px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all"
|
||
|
|
:class="activeTab === tab
|
||
|
|
? 'bg-orange-500 text-white'
|
||
|
|
: 'bg-dark-700 text-gray-400 hover:bg-dark-600 hover:text-white'"
|
||
|
|
>
|
||
|
|
<span>{{ label }}</span>
|
||
|
|
<span class="px-2 py-0.5 rounded-full text-xs" :class="activeTab === tab ? 'bg-white/20' : 'bg-dark-600'">
|
||
|
|
{{ tabCounts[tab as keyof typeof tabCounts] }}
|
||
|
|
</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 搜索和筛选 -->
|
||
|
|
<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 tools by name or description..."
|
||
|
|
class="search-input w-full"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
|
||
|
|
<el-option label="All Status" value="all" />
|
||
|
|
<el-option label="Active" value="active" />
|
||
|
|
<el-option label="Inactive" value="inactive" />
|
||
|
|
</el-select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Tools 列表 -->
|
||
|
|
<div class="bg-dark-700 rounded-xl overflow-hidden">
|
||
|
|
<table v-if="currentTools.length > 0" class="w-full">
|
||
|
|
<thead class="bg-dark-600">
|
||
|
|
<tr>
|
||
|
|
<th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Tool Name</th>
|
||
|
|
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Provider</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">Created</th>
|
||
|
|
<th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr v-for="tool in currentTools" :key="tool.id" class="table-row">
|
||
|
|
<td class="px-5 py-4">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="w-10 h-10 rounded-lg flex items-center justify-center" :class="tool.type === 'built-in' ? 'bg-orange-500/20' : tool.type === 'custom' ? 'bg-blue-500/20' : 'bg-emerald-500/20'">
|
||
|
|
<i :class="['fa-solid', tool.icon || 'fa-cube', 'text-lg', tool.type === 'built-in' ? 'text-orange-400' : tool.type === 'custom' ? 'text-blue-400' : 'text-emerald-400']"></i>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="font-medium">{{ tool.name }}</div>
|
||
|
|
<div class="text-sm text-gray-500">{{ tool.description }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="px-5 py-4 text-center">
|
||
|
|
<span class="text-gray-400 text-sm">{{ tool.provider || (tool.type === 'built-in' ? 'System' : 'Custom') }}</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-5 py-4 text-center">
|
||
|
|
<span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs" :class="tool.status === 'active' ? '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="tool.status === 'active' ? 'bg-green-500' : 'bg-gray-400'"></span>
|
||
|
|
<span class="capitalize">{{ tool.status }}</span>
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td class="px-5 py-4 text-center text-gray-400 text-sm">{{ tool.createdAt }}</td>
|
||
|
|
<td class="px-5 py-4">
|
||
|
|
<div class="flex items-center justify-center gap-2">
|
||
|
|
<button @click="toggleStatus(tool)" class="btn-icon" :title="tool.status === 'active' ? 'Deactivate' : 'Activate'">
|
||
|
|
<i :class="['fa-solid', tool.status === 'active' ? 'fa-pause' : 'fa-play', 'text-gray-400 hover:text-white']"></i>
|
||
|
|
</button>
|
||
|
|
<button @click="openEdit(tool)" class="btn-icon" title="Edit">
|
||
|
|
<i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
|
||
|
|
</button>
|
||
|
|
<button @click="deleteTool(tool.id)" class="btn-icon" title="Delete">
|
||
|
|
<i class="fa-solid fa-trash text-gray-400 hover:text-red-400"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<!-- 空状态 -->
|
||
|
|
<div v-else class="empty-box">
|
||
|
|
<div class="empty-icon">
|
||
|
|
<i class="fa-solid fa-tools"></i>
|
||
|
|
</div>
|
||
|
|
<p class="empty-text">No tools found</p>
|
||
|
|
<p class="empty-tip">Click "New Tool" to add a tool</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 编辑弹窗 -->
|
||
|
|
<Teleport to="body">
|
||
|
|
<div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 modal-overlay">
|
||
|
|
<div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl modal-content">
|
||
|
|
<div class="flex items-center justify-between p-5 border-b border-dark-500">
|
||
|
|
<h3 class="text-lg font-semibold">Edit Tool</h3>
|
||
|
|
<button @click="cancelEdit" class="btn-icon">
|
||
|
|
<i class="fa-solid fa-xmark text-xl"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-5 space-y-4">
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Tool Name</label>
|
||
|
|
<input v-model="editForm.name" type="text" class="input-field">
|
||
|
|
</div>
|
||
|
|
<div v-if="activeTab !== 'built-in'">
|
||
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Provider</label>
|
||
|
|
<input v-model="editForm.provider" type="text" class="input-field">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
|
||
|
|
<textarea v-model="editForm.description" rows="3" class="input-field resize-none"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
|
||
|
|
<button @click="cancelEdit" class="btn-secondary">Cancel</button>
|
||
|
|
<button @click="saveEdit" class="btn-primary">Save Changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Teleport>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* 使用全局样式 */
|
||
|
|
</style>
|