重构: 迁移后端代码到 app 目录，前端移动到 WebUI，添加完整测试套件
主要变更: - 后端代码从根目录迁移到 app/ 目录 - 前端代码从 frontend/ 重命名为 WebUI/ - 更新所有导入路径以适配新结构 - 提取公共 API 响应函数到 app/api/common.py - 精简验证器服务代码 - 更新启动脚本和文档 测试: - 新增完整测试套件 (tests/) - 单元测试: 模型、仓库层 - 集成测试: 覆盖所有 22+ API 端点 - E2E 测试: 4个完整工作流场景 - 添加 pytest 配置和测试运行脚本
This commit is contained in:
祀梦
548
WebUI/src/views/Plugins.vue
Normal file
548
WebUI/src/views/Plugins.vue
Normal file
@@ -0,0 +1,548 @@
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<PageHeader title="插件管理" :icon="Connection" />
|
||||
|
||||
<el-card class="plugins-card" shadow="hover" v-loading="pluginsStore.loading">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="header-left">
|
||||
<span class="card-title">
|
||||
<el-icon class="header-icon"><Box /></el-icon>
|
||||
插件列表
|
||||
</span>
|
||||
<el-tag v-if="pluginsStore.totalCount > 0" size="small" type="info" class="count-tag">
|
||||
共 {{ pluginsStore.totalCount }} 个
|
||||
</el-tag>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button type="success" @click="handleCrawlAll" size="large" :loading="crawlingAll">
|
||||
<el-icon class="btn-icon"><Promotion /></el-icon>
|
||||
全部爬取
|
||||
</el-button>
|
||||
<el-button type="primary" @click="handleRefresh" size="large">
|
||||
<el-icon class="btn-icon"><Refresh /></el-icon>
|
||||
刷新列表
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-table :data="pluginsStore.plugins">
|
||||
<el-table-column prop="name" label="插件名称" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="plugin-name">
|
||||
<el-icon class="plugin-icon"><Connection /></el-icon>
|
||||
<span class="plugin-name-text">{{ row.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="description" label="描述" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<span class="plugin-description">{{ row.description || '暂无描述' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="状态" width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-switch
|
||||
v-model="row.enabled"
|
||||
@change="(val) => handleToggle(row.id, val)"
|
||||
class="theme-switch"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="统计" width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="plugin-stats">
|
||||
<div class="stat-item">
|
||||
<el-icon class="stat-icon success"><CircleCheck /></el-icon>
|
||||
<span class="stat-value success">{{ row.success_count || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<el-icon class="stat-icon failed"><CircleClose /></el-icon>
|
||||
<span class="stat-value failed">{{ row.failure_count || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="last_run" label="最后运行" width="180">
|
||||
<template #default="{ row }">
|
||||
<span class="last-run">{{ formatTime(row.last_run) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" width="220" fixed="right" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="plugin-actions">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleOpenConfig(row)"
|
||||
>
|
||||
<el-icon class="btn-icon"><Setting /></el-icon>
|
||||
配置
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
size="small"
|
||||
@click="handleCrawl(row.id)"
|
||||
:loading="crawlingPlugins.has(row.id)"
|
||||
:disabled="!row.enabled"
|
||||
>
|
||||
<el-icon class="btn-icon"><Promotion /></el-icon>
|
||||
爬取
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="crawlResults[row.id]" class="plugin-crawl-result">
|
||||
<div class="result-mini" :class="crawlResults[row.id].type">
|
||||
<el-icon v-if="crawlResults[row.id].type === 'success'" class="result-icon success"><CircleCheck /></el-icon>
|
||||
<el-icon v-else class="result-icon failed"><CircleClose /></el-icon>
|
||||
<span class="result-text">{{ crawlResults[row.id].message }}</span>
|
||||
<span v-if="crawlResults[row.id].data?.valid_count !== undefined" class="result-count valid">
|
||||
有效 {{ crawlResults[row.id].data.valid_count }}
|
||||
</span>
|
||||
<span v-if="crawlResults[row.id].data?.invalid_count !== undefined" class="result-count invalid">
|
||||
无效 {{ crawlResults[row.id].data.invalid_count }}
|
||||
</span>
|
||||
<el-icon class="result-close" @click="clearCrawlResult(row.id)"><Close /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-empty
|
||||
v-if="pluginsStore.isEmpty"
|
||||
description="暂无插件"
|
||||
:image-size="120"
|
||||
/>
|
||||
|
||||
<!-- 批量爬取结果提示 -->
|
||||
<el-alert
|
||||
v-if="allCrawlResult"
|
||||
:title="allCrawlResult.message"
|
||||
:type="allCrawlResult.type"
|
||||
closable
|
||||
class="crawl-result"
|
||||
@close="allCrawlResult = null"
|
||||
>
|
||||
<template v-if="allCrawlResult.data">
|
||||
<div class="crawl-stats">
|
||||
<span v-if="allCrawlResult.data.total_crawled !== undefined">
|
||||
爬取: {{ allCrawlResult.data.total_crawled }}
|
||||
</span>
|
||||
<span v-if="allCrawlResult.data.proxy_count !== undefined">
|
||||
爬取: {{ allCrawlResult.data.proxy_count }}
|
||||
</span>
|
||||
<span v-if="allCrawlResult.data.valid_count !== undefined" class="valid-count">
|
||||
有效: {{ allCrawlResult.data.valid_count }}
|
||||
</span>
|
||||
<span v-if="allCrawlResult.data.invalid_count !== undefined" class="invalid-count">
|
||||
无效: {{ allCrawlResult.data.invalid_count }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-alert>
|
||||
</el-card>
|
||||
|
||||
<!-- 配置编辑对话框 -->
|
||||
<el-dialog
|
||||
v-model="configDialogVisible"
|
||||
title="插件配置"
|
||||
width="400px"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div v-if="currentPlugin">
|
||||
<div class="config-plugin-name">{{ currentPlugin.name }}</div>
|
||||
<el-form label-width="120px">
|
||||
<el-form-item
|
||||
v-for="(value, key) in configForm"
|
||||
:key="key"
|
||||
:label="String(key)"
|
||||
>
|
||||
<el-input-number
|
||||
v-if="typeof value === 'number'"
|
||||
v-model="configForm[key]"
|
||||
:min="0"
|
||||
style="width: 180px"
|
||||
/>
|
||||
<el-switch
|
||||
v-else-if="typeof value === 'boolean'"
|
||||
v-model="configForm[key]"
|
||||
/>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="configForm[key]"
|
||||
style="width: 180px"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="configDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSaveConfig" :loading="savingConfig">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import {
|
||||
Connection,
|
||||
Refresh,
|
||||
Promotion,
|
||||
CircleCheck,
|
||||
CircleClose,
|
||||
Box,
|
||||
Setting,
|
||||
Close
|
||||
} from '@element-plus/icons-vue'
|
||||
import { usePluginsStore } from '../stores/plugins'
|
||||
import { pluginService } from '../services/pluginService'
|
||||
import { formatTime } from '../utils/format'
|
||||
import PageHeader from '../components/PageHeader.vue'
|
||||
|
||||
const pluginsStore = usePluginsStore()
|
||||
const crawlingPlugins = ref(new Set())
|
||||
const crawlingAll = ref(false)
|
||||
const crawlResults = ref({})
|
||||
const allCrawlResult = ref(null)
|
||||
|
||||
// 配置对话框
|
||||
const configDialogVisible = ref(false)
|
||||
const currentPlugin = ref(null)
|
||||
const configForm = reactive({})
|
||||
const savingConfig = ref(false)
|
||||
|
||||
// ==================== 事件处理 ====================
|
||||
async function handleRefresh() {
|
||||
await pluginsStore.fetchPlugins()
|
||||
ElMessage.success('插件列表已刷新')
|
||||
}
|
||||
|
||||
async function handleToggle(pluginId, enabled) {
|
||||
const success = await pluginsStore.togglePlugin(pluginId, enabled)
|
||||
if (success) {
|
||||
ElMessage.success(enabled ? '插件已启用' : '插件已禁用')
|
||||
} else {
|
||||
await pluginsStore.fetchPlugins()
|
||||
}
|
||||
}
|
||||
|
||||
async function handleOpenConfig(row) {
|
||||
currentPlugin.value = row
|
||||
const response = await pluginService.getPluginConfig(row.id)
|
||||
if (response.code === 200) {
|
||||
Object.keys(configForm).forEach(key => delete configForm[key])
|
||||
Object.assign(configForm, response.data.config || {})
|
||||
configDialogVisible.value = true
|
||||
} else {
|
||||
ElMessage.error('获取插件配置失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSaveConfig() {
|
||||
if (!currentPlugin.value) return
|
||||
savingConfig.value = true
|
||||
try {
|
||||
const response = await pluginService.updatePluginConfig(currentPlugin.value.id, { ...configForm })
|
||||
if (response.code === 200) {
|
||||
ElMessage.success('配置保存成功')
|
||||
configDialogVisible.value = false
|
||||
} else {
|
||||
ElMessage.error(response.message || '保存失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('保存配置出错')
|
||||
} finally {
|
||||
savingConfig.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleCrawl(pluginId) {
|
||||
try {
|
||||
crawlingPlugins.value.add(pluginId)
|
||||
|
||||
const response = await pluginService.crawlPlugin(pluginId)
|
||||
|
||||
if (response.code === 200) {
|
||||
crawlResults.value[pluginId] = {
|
||||
type: 'success',
|
||||
message: response.message,
|
||||
data: response.data
|
||||
}
|
||||
} else {
|
||||
crawlResults.value[pluginId] = {
|
||||
type: 'error',
|
||||
message: response.message || '爬取失败'
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
crawlResults.value[pluginId] = {
|
||||
type: 'error',
|
||||
message: '爬取过程出错'
|
||||
}
|
||||
} finally {
|
||||
crawlingPlugins.value.delete(pluginId)
|
||||
}
|
||||
}
|
||||
|
||||
function clearCrawlResult(pluginId) {
|
||||
delete crawlResults.value[pluginId]
|
||||
}
|
||||
|
||||
async function handleCrawlAll() {
|
||||
try {
|
||||
const enabledPlugins = pluginsStore.plugins.filter(p => p.enabled)
|
||||
if (enabledPlugins.length === 0) {
|
||||
ElMessage.warning('没有启用的插件')
|
||||
return
|
||||
}
|
||||
|
||||
await ElMessageBox.confirm(
|
||||
`确定要运行所有 ${enabledPlugins.length} 个启用的插件吗？这将爬取并验证所有代理。`,
|
||||
'批量爬取确认',
|
||||
{
|
||||
confirmButtonText: '开始爬取',
|
||||
cancelButtonText: '取消',
|
||||
type: 'info'
|
||||
}
|
||||
)
|
||||
|
||||
crawlingAll.value = true
|
||||
allCrawlResult.value = null
|
||||
|
||||
const response = await pluginService.crawlAll()
|
||||
|
||||
if (response.code === 200) {
|
||||
allCrawlResult.value = {
|
||||
type: 'success',
|
||||
message: response.message,
|
||||
data: response.data
|
||||
}
|
||||
ElMessage.success('批量爬取完成')
|
||||
} else {
|
||||
allCrawlResult.value = {
|
||||
type: 'error',
|
||||
message: response.message || '批量爬取失败'
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
console.error('批量爬取失败:', error)
|
||||
allCrawlResult.value = {
|
||||
type: 'error',
|
||||
message: '批量爬取过程出错'
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
crawlingAll.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 生命周期 ====================
|
||||
onMounted(async () => {
|
||||
await pluginsStore.fetchPlugins()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.plugins-card {
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.plugins-card:hover {
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
margin-right: 8px;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.count-tag {
|
||||
background: var(--surface-2) !important;
|
||||
border-color: var(--border) !important;
|
||||
color: var(--text-muted) !important;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.plugin-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.plugin-icon {
|
||||
color: var(--primary);
|
||||
filter: drop-shadow(0 0 6px rgba(146, 124, 255, 0.3));
|
||||
}
|
||||
|
||||
.plugin-name-text {
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.plugin-description {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plugin-stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.stat-icon.success {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.stat-icon.failed {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-value.success {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.stat-value.failed {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.last-run {
|
||||
color: var(--text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.crawl-result {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.crawl-stats {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.valid-count {
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.invalid-count {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.config-plugin-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.plugin-actions {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.plugin-crawl-result {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.result-mini {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.result-mini.success {
|
||||
background: rgba(103, 194, 58, 0.15);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.result-mini.error {
|
||||
background: rgba(245, 108, 108, 0.15);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.result-count {
|
||||
font-weight: 600;
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.result-count.valid {
|
||||
background: rgba(103, 194, 58, 0.2);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.result-count.invalid {
|
||||
background: rgba(245, 108, 108, 0.2);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.result-close {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.result-close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user