first commit

frontend/src/views/Plugins.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="plugins">
+    <PageHeader title="插件管理" icon="🔌" />
+
+    <el-card class="plugins-card" shadow="hover" v-loading="pluginsStore.loading">
+      <template #header>
+        <div class="card-header">
+          <span class="card-title">📦 插件列表</span>
+          <el-button type="primary" @click="handleRefresh" size="large">
+            <span class="btn-icon">🔄</span>
+            刷新列表
+          </el-button>
+        </div>
+      </template>
+
+      <el-table :data="pluginsStore.plugins" stripe>
+        <el-table-column prop="name" label="插件名称" width="200">
+          <template #default="{ row }">
+            <div class="plugin-name">
+              <span class="plugin-icon">🔌</span>
+              <span>{{ row.name }}</span>
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="description" label="描述" min-width="200">
+          <template #default="{ row }">
+            <span class="plugin-description">{{ row.description }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="状态" width="120">
+          <template #default="{ row }">
+            <el-switch
+              v-model="row.enabled"
+              @change="(val) => handleToggle(row.id, val)"
+              active-color="#FF6B9D"
+              inactive-color="#dcdfe6"
+            />
+          </template>
+        </el-table-column>
+
+        <el-table-column label="统计" width="200">
+          <template #default="{ row }">
+            <div class="plugin-stats">
+              <div class="stat-item">
+                <span class="stat-label">成功</span>
+                <span class="stat-value success">{{ row.success_count }}</span>
+              </div>
+              <div class="stat-item">
+                <span class="stat-label">失败</span>
+                <span class="stat-value failed">{{ row.failure_count }}</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="150" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              type="primary"
+              size="small"
+              @click="handleCrawl(row.id)"
+              :loading="crawlingPlugin === row.id"
+            >
+              <span class="btn-icon">🚀</span>
+              立即爬取
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { usePluginsStore } from '../stores/plugins'
+import PageHeader from '../components/PageHeader.vue'
+
+const pluginsStore = usePluginsStore()
+const crawlingPlugin = ref(null)
+
+function formatTime(timeStr) {
+  if (!timeStr) return '从未运行'
+  const date = new Date(timeStr)
+  return date.toLocaleString('zh-CN')
+}
+
+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 handleCrawl(pluginId) {
+  try {
+    crawlingPlugin.value = pluginId
+    const success = await pluginsStore.crawlPlugin(pluginId)
+    if (success) {
+      ElMessage.success('插件开始爬取啦~')
+    }
+  } finally {
+    crawlingPlugin.value = null
+  }
+}
+
+onMounted(async () => {
+  await pluginsStore.fetchPlugins()
+})
+</script>
+
+<style scoped>
+.plugins {
+  padding: 20px;
+  background: var(--theme-bg);
+  min-height: 100vh;
+}
+
+.plugins-card {
+  border-radius: 16px;
+  background: var(--theme-bg-card);
+  border: 1px solid var(--theme-border);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--theme-primary);
+}
+
+.plugin-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.plugin-icon {
+  font-size: 20px;
+}
+
+.plugin-description {
+  color: var(--theme-text-secondary);
+  font-size: 14px;
+}
+
+.plugin-stats {
+  display: flex;
+  gap: 20px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.stat-label {
+  font-size: 12px;
+  color: var(--theme-text-secondary);
+}
+
+.stat-value {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.stat-value.success {
+  color: #34D399;
+}
+
+.stat-value.failed {
+  color: #F56C6C;
+}
+
+.last-run {
+  color: var(--theme-text-secondary);
+  font-size: 14px;
+}
+
+.btn-icon {
+  margin-right: 4px;
+}
+
+:deep(.el-switch__label) {
+  font-weight: 600;
+}
+</style>