106 lines
2.2 KiB
Vue
106 lines
2.2 KiB
Vue
<template>
|
||
<div class="tools">
|
||
<h1>工具管理</h1>
|
||
<p>系统内置工具列表，支持启用/禁用。</p>
|
||
<div v-if="loading">加载中...</div>
|
||
<div v-else>
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>名称</th>
|
||
<th>描述</th>
|
||
<th>状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="tool in tools" :key="tool.name">
|
||
<td>{{ tool.name }}</td>
|
||
<td>{{ tool.description }}</td>
|
||
<td>
|
||
<span :class="['badge', tool.enabled ? 'enabled' : 'disabled']">
|
||
{{ tool.enabled ? '已启用' : '已禁用' }}
|
||
</span>
|
||
</td>
|
||
<td>
|
||
<button @click="toggleTool(tool)" class="btn-toggle">
|
||
{{ tool.enabled ? '禁用' : '启用' }}
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
|
||
const loading = ref(true)
|
||
const tools = ref([])
|
||
|
||
// 模拟获取工具列表
|
||
const fetchTools = async () => {
|
||
loading.value = true
|
||
// TODO: 替换为真实 API 调用
|
||
await new Promise(resolve => setTimeout(resolve, 500))
|
||
tools.value = [
|
||
{ name: 'code', description: '代码执行工具', enabled: true },
|
||
{ name: 'crawler', description: '网页爬虫工具', enabled: true },
|
||
{ name: 'data', description: '数据分析工具', enabled: false },
|
||
]
|
||
loading.value = false
|
||
}
|
||
|
||
const toggleTool = (tool) => {
|
||
tool.enabled = !tool.enabled
|
||
// TODO: 调用 API 更新状态
|
||
}
|
||
|
||
onMounted(() => {
|
||
fetchTools()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tools {
|
||
padding: 2rem;
|
||
}
|
||
|
||
.table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.table th, .table td {
|
||
border: 1px solid #ddd;
|
||
padding: 0.75rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.badge {
|
||
padding: 0.25rem 0.5rem;
|
||
border-radius: 4px;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.badge.enabled {
|
||
background-color: #d4edda;
|
||
color: #155724;
|
||
}
|
||
|
||
.badge.disabled {
|
||
background-color: #f8d7da;
|
||
color: #721c24;
|
||
}
|
||
|
||
.btn-toggle {
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 4px;
|
||
border: 1px solid #ccc;
|
||
background-color: #f8f9fa;
|
||
cursor: pointer;
|
||
}
|
||
</style> |