congsh/rssKeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 深色主题UI、错误分类、批量抓取、健康度筛选

Browse Source 
- 修复 datetime 时区不一致导致所有API 500错误的问题
- Feeds/Dashboard 页面改为深色表格主题，高对比度文字
- 添加错误类型自动分类（URL失效/被拒绝/超时/DNS失败/SSL错误等12种）
- 新增"下次抓取时间"列，从APScheduler获取
- 新增健康度筛选下拉，修复分页后过滤失效的bug
- "全部抓取"改为同步并发执行，基于当前筛选条件获取所有匹配源
- 新增数据库自动迁移机制，处理增量列变更

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
congsh
2026-06-11 17:44:54 +08:00
parent c59dd304f7
commit 68bba3d9e0
12 changed files with 846 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/api/index.js
+1
View File
@@ -32,6 +32,7 @@ export const feedsApi = {
update: (id, data) => api.put(`/api/feeds/${id}`, data),
remove: (id) => api.delete(`/api/feeds/${id}`),
fetch: (id) => api.post(`/api/feeds/${id}/fetch`),
batchFetch: (ids) => api.post('/api/feeds/batch-fetch', { feed_ids: ids }, { timeout: 300000 }),
discover: (url) => api.post('/api/feeds/discover', null, { params: { url } }),
importOpml: (content) => api.post('/api/feeds/import-opml', { opml_content: content }),
exportOpml: () => api.get('/api/feeds/export-opml'),
frontend/src/views/Dashboard.vue
+331 -71
View File
@@ -1,5 +1,5 @@
<template>
<div>
<div class="dashboard-page">
<h1 class="page-title">📊 仪表盘</h1>
<!-- 统计卡片 -->
@@ -15,88 +15,88 @@
<!-- 健康度概览 + 最近活动 -->
<el-row :gutter="20" style="margin-top: 20px;">
<el-col :span="14">
<el-card shadow="hover">
<template #header>
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>🩺 RSS 源健康度</span>
<el-button text size="small" @click="$router.push('/feeds')">查看全部</el-button>
</div>
</template>
<el-table :data="healthData" size="small" v-loading="loadingHealth">
<el-table-column prop="title" label="源名称" min-width="200" show-overflow-tooltip>
<template #default="scope">
<el-link :href="scope.row.url" target="_blank" type="primary">{{ scope.row.title }}</el-link>
</template>
</el-table-column>
<el-table-column prop="health_label" label="状态" width="80">
<template #default="scope">
<el-tag :type="healthTagType(scope.row.health_status)" size="small">
{{ scope.row.health_label }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="success_rate" label="成功率" width="90">
<template #default="scope">
{{ scope.row.success_rate }}%
</template>
</el-table-column>
<el-table-column prop="article_count" label="文章数" width="80" />
<el-table-column prop="days_since_fetch" label="未更新(天)" width="100">
<template #default="scope">
{{ scope.row.days_since_fetch !== null ? scope.row.days_since_fetch : '-' }}
</template>
</el-table-column>
</el-table>
</el-card>
<div class="dark-card">
<div class="dark-card-header">
<span>🩺 RSS 源健康度</span>
<router-link to="/feeds" class="view-all-link">查看全部</router-link>
</div>
<div class="dark-table-wrap" v-loading="loadingHealth">
<table class="dark-table">
<thead>
<tr>
<th>源名称</th>
<th>状态</th>
<th>错误</th>
<th>成功率</th>
<th>文章</th>
<th>未更新</th>
</tr>
</thead>
<tbody>
<tr v-for="feed in healthData" :key="feed.id">
<td>
<a :href="feed.url" target="_blank" class="feed-link">{{ feed.title }}</a>
</td>
<td>
<span :class="['health-dot', `health-${feed.health_status}`]"></span>
{{ feed.health_label }}
</td>
<td>
<span v-if="feed.last_error" class="err-tag" :class="'err-' + classifyError(feed.last_error)">{{ errorLabel(classifyError(feed.last_error)) }}</span>
<span v-else class="muted">-</span>
</td>
<td class="td-center">{{ feed.success_rate }}%</td>
<td class="td-center">{{ feed.article_count }}</td>
<td class="td-center">{{ feed.days_since_fetch !== null ? feed.days_since_fetch + '天' : '-' }}</td>
</tr>
<tr v-if="!healthData.length && !loadingHealth">
<td colspan="6" class="empty-row">暂无数据</td>
</tr>
</tbody>
</table>
</div>
</div>
</el-col>
<el-col :span="10">
<el-card shadow="hover">
<template #header>
<div class="dark-card">
<div class="dark-card-header">
<span>📋 最近抓取活动</span>
</template>
<el-timeline v-loading="loadingActivity">
<el-timeline-item
v-for="log in recentActivity"
:key="log.id"
:type="log.status === 'success' ? 'success' : 'danger'"
:icon="log.status === 'success' ? 'CircleCheck' : 'CircleClose'"
>
<div style="font-size: 13px;">
<strong>{{ log.feed_title }}</strong>
<el-tag :type="log.status === 'success' ? 'success' : 'danger'" size="small" style="margin-left: 8px;">
</div>
<div class="activity-list" v-loading="loadingActivity">
<div v-for="log in recentActivity" :key="log.id" class="activity-item">
<div class="activity-row">
<strong class="activity-title">{{ log.feed_title }}</strong>
<span :class="['status-badge', log.status === 'success' ? 'status-success' : 'status-fail']">
{{ log.status === 'success' ? '成功' : '失败' }}
</el-tag>
</span>
</div>
<div style="font-size: 12px; color: #a0aec0; margin-top: 4px;">
<div class="activity-detail">
{{ log.status === 'success' ? `获取 ${log.articles_fetched} 篇文章` : log.error_message }}
· {{ formatTime(log.created_at) }}
</div>
</el-timeline-item>
</el-timeline>
</el-card>
</div>
<div v-if="!recentActivity.length && !loadingActivity" class="empty-row">暂无数据</div>
</div>
</div>
</el-col>
</el-row>
<!-- 分类分布 -->
<el-row style="margin-top: 20px;">
<el-col :span="24">
<el-card shadow="hover">
<template #header>
<div class="dark-card">
<div class="dark-card-header">
<span>📂 分类分布</span>
</template>
<div v-if="categoryStats.length === 0" style="text-align: center; padding: 40px; color: #a0aec0;">
暂无数据
</div>
<el-row :gutter="20" v-else>
<el-col :span="4" v-for="cat in categoryStats" :key="cat.name">
<div style="text-align: center; padding: 16px;">
<div style="font-size: 24px; font-weight: bold; color: #63b3ed;">{{ cat.count }}</div>
<div style="font-size: 14px; color: #a0aec0; margin-top: 4px;">{{ cat.name || '未分类' }}</div>
</div>
</el-col>
</el-row>
</el-card>
<div class="category-grid" v-if="categoryStats.length">
<div v-for="cat in categoryStats" :key="cat.name" class="category-item">
<div class="category-count">{{ cat.count }}</div>
<div class="category-name">{{ cat.name || '未分类' }}</div>
</div>
</div>
<div v-else class="empty-row">暂无数据</div>
</div>
</el-col>
</el-row>
</div>
@@ -120,17 +120,39 @@ const statsCards = computed(() => [
{ key: 'today', label: '今日抓取', value: stats.value.today_fetches || 0, color: '#f6ad55' },
])
const healthTagType = (status) => {
const map = { healthy: 'success', warning: 'warning', unhealthy: 'danger', unknown: 'info' }
return map[status] || 'info'
}
const formatTime = (iso) => {
if (!iso) return '-'
const d = new Date(iso)
return d.toLocaleString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
}
const classifyError = (error) => {
if (!error) return ''
const e = error.toLowerCase()
if (e.includes('404') || e.includes('not found')) return 'url_invalid'
if (e.includes('403') || e.includes('forbidden')) return 'forbidden'
if (e.includes('429') || e.includes('too many')) return 'rate_limited'
if (e.includes('timeout') || e.includes('timed out')) return 'timeout'
if (e.includes('connecttimeout')) return 'timeout'
if (e.includes('could not resolve') || e.includes('name or service')) return 'dns_failure'
if (e.includes('connection refused')) return 'connection_refused'
if (e.includes('connection aborted') || e.includes('remotedisconnected')) return 'connection_reset'
if (e.includes('ssl') || e.includes('certificate')) return 'ssl_error'
if (e.includes('max retries') || e.includes('newconnectionerror')) return 'unreachable'
if (e.includes('invalid url') || e.includes('missing scheme')) return 'url_malformed'
return 'unknown'
}
const errorLabel = (type) => {
const map = {
url_invalid: 'URL失效', forbidden: '被拒绝', rate_limited: '频率限制',
timeout: '超时', dns_failure: 'DNS失败', connection_refused: '连接拒绝',
connection_reset: '连接中断', ssl_error: 'SSL错误', unreachable: '不可达',
url_malformed: 'URL错误', unknown: '其他',
}
return map[type] || type
}
const loadStats = async () => {
try {
stats.value = await dashboardApi.stats()
@@ -186,7 +208,245 @@ onMounted(() => {
</script>
<style scoped>
.dashboard-page {
--dark-bg: #1a1f2e;
--dark-bg-alt: #161b28;
--dark-bg-header: #12162a;
--dark-hover: #222840;
--text-primary: #e8ecf4;
--text-secondary: #8b95a8;
--accent: #4f8ff7;
--border-color: #2a3048;
--health-healthy: #34d399;
--health-warning: #fbbf24;
--health-unhealthy: #f87171;
--health-unknown: #6b7280;
}
.stats-row {
margin-bottom: 10px;
}
.stat-card {
text-align: center;
}
.stat-value {
font-size: 28px;
font-weight: 700;
}
.stat-label {
font-size: 13px;
color: #a0aec0;
margin-top: 4px;
}
/* 深色卡片 */
.dark-card {
background: var(--dark-bg);
border-radius: 12px;
border: 1px solid var(--border-color);
overflow: hidden;
}
.dark-card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
background: var(--dark-bg-header);
border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
font-size: 14px;
font-weight: 600;
}
.view-all-link {
color: var(--accent);
font-size: 12px;
text-decoration: none;
font-weight: 400;
}
.view-all-link:hover {
text-decoration: underline;
}
/* 深色表格 */
.dark-table {
width: 100%;
border-collapse: collapse;
}
.dark-table thead tr {
background: var(--dark-bg-header);
}
.dark-table th {
padding: 10px 14px;
text-align: left;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border-color);
}
.dark-table td {
padding: 9px 14px;
font-size: 13px;
color: var(--text-primary);
border-bottom: 1px solid rgba(42, 48, 72, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dark-table tbody tr {
background: var(--dark-bg);
transition: background 0.15s;
}
.dark-table tbody tr:nth-child(even) {
background: var(--dark-bg-alt);
}
.dark-table tbody tr:hover {
background: var(--dark-hover) !important;
}
.td-center {
text-align: center;
}
.feed-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
}
.feed-link:hover {
color: #6fa1ff;
text-decoration: underline;
}
/* 健康度指示点 */
.health-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
.health-dot.health-healthy { background: var(--health-healthy); box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
.health-dot.health-warning { background: var(--health-warning); box-shadow: 0 0 6px rgba(251, 191, 36, 0.4); }
.health-dot.health-unhealthy { background: var(--health-unhealthy); box-shadow: 0 0 6px rgba(248, 113, 113, 0.4); }
.health-dot.health-unknown { background: var(--health-unknown); }
/* 活动列表 */
.activity-list {
padding: 8px 0;
max-height: 380px;
overflow-y: auto;
}
.activity-item {
padding: 10px 18px;
border-bottom: 1px solid rgba(42, 48, 72, 0.4);
}
.activity-item:last-child {
border-bottom: none;
}
.activity-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.activity-title {
color: var(--text-primary);
font-size: 13px;
}
.status-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 4px;
}
.status-success {
color: var(--health-healthy);
background: rgba(52, 211, 153, 0.12);
}
.status-fail {
color: var(--health-unhealthy);
background: rgba(248, 113, 113, 0.12);
}
.activity-detail {
font-size: 12px;
color: var(--text-secondary);
margin-top: 4px;
}
/* 分类分布 */
.category-grid {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 16px;
}
.category-item {
text-align: center;
padding: 16px 20px;
min-width: 100px;
flex: 1;
}
.category-count {
font-size: 24px;
font-weight: 700;
color: #63b3ed;
}
.category-name {
font-size: 13px;
color: var(--text-secondary);
margin-top: 4px;
}
.empty-row {
text-align: center;
color: var(--text-secondary);
padding: 40px;
font-size: 14px;
}
/* 错误标签 */
.err-tag {
display: inline-block;
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
white-space: nowrap;
}
.err-url_invalid { color: #f87171; background: rgba(248,113,113,0.12); }
.err-forbidden { color: #fb923c; background: rgba(251,146,60,0.12); }
.err-rate_limited { color: #fbbf24; background: rgba(251,191,36,0.12); }
.err-timeout { color: #a78bfa; background: rgba(167,139,250,0.12); }
.err-dns_failure { color: #f87171; background: rgba(248,113,113,0.12); }
.err-connection_refused { color: #fb923c; background: rgba(251,146,60,0.12); }
.err-connection_reset { color: #fb923c; background: rgba(251,146,60,0.12); }
.err-ssl_error { color: #f87171; background: rgba(248,113,113,0.12); }
.err-unreachable { color: #a78bfa; background: rgba(167,139,250,0.12); }
.err-url_malformed { color: #f87171; background: rgba(248,113,113,0.12); }
.err-unknown { color: #6b7280; background: rgba(107,114,128,0.12); }
</style>
frontend/src/views/Feeds.vue
+367 -77
View File
@@ -1,8 +1,8 @@
<template>
<div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
<div class="feeds-page">
<div class="feeds-header">
<h1 class="page-title">📡 RSS 源管理</h1>
<div>
<div class="header-actions">
<el-button type="primary" @click="showAddDialog = true" :icon="Plus">添加源</el-button>
<el-button @click="showImportDialog = true" :icon="Upload">导入 OPML</el-button>
<el-button @click="handleExport" :icon="Download">导出 OPML</el-button>
@@ -10,74 +10,87 @@
</div>
<!-- 筛选栏 -->
<el-row :gutter="10" style="margin-bottom: 16px;">
<el-col :span="6">
<el-input v-model="searchQuery" placeholder="搜索源名称或 URL" clearable @change="loadFeeds" :prefix-icon="Search" />
</el-col>
<el-col :span="4">
<el-select v-model="filterCategory" placeholder="分类筛选" clearable @change="loadFeeds">
<el-option v-for="cat in categories" :key="cat" :label="cat || '未分类'" :value="cat" />
</el-select>
</el-col>
<el-col :span="4">
<el-select v-model="filterStatus" placeholder="状态筛选" clearable @change="loadFeeds">
<el-option label="启用" value="active" />
<el-option label="禁用" value="inactive" />
</el-select>
</el-col>
<el-col :span="6" style="display: flex; gap: 8px;">
<el-tag v-if="stats.total" type="info">共 {{ stats.total }} 个源</el-tag>
</el-col>
</el-row>
<div class="filter-bar">
<el-input v-model="searchQuery" placeholder="搜索源名称或 URL" clearable @change="loadFeeds" :prefix-icon="Search" class="filter-input" />
<el-select v-model="filterCategory" placeholder="分类" clearable @change="loadFeeds" class="filter-select">
<el-option v-for="cat in categories" :key="cat" :label="cat || '未分类'" :value="cat" />
</el-select>
<el-select v-model="filterStatus" placeholder="状态" clearable @change="loadFeeds" class="filter-select">
<el-option label="启用" value="active" />
<el-option label="禁用" value="inactive" />
</el-select>
<el-select v-model="filterHealth" placeholder="健康度" clearable @change="loadFeeds" class="filter-select">
<el-option label="健康" value="healthy" />
<el-option label="警告" value="warning" />
<el-option label="异常" value="unhealthy" />
<el-option label="未知" value="unknown" />
</el-select>
<span class="total-badge" v-if="stats.total">{{ stats.total }} 个源</span>
<el-button type="warning" @click="handleBatchFetch" :loading="batchFetching" :icon="Refresh">全部抓取</el-button>
</div>
<!-- 源列表 -->
<el-card shadow="hover">
<el-table :data="feeds" v-loading="loading" size="small">
<el-table-column type="index" width="50" />
<el-table-column prop="title" label="源名称" min-width="200" show-overflow-tooltip>
<template #default="scope">
<el-link :href="scope.row.url" target="_blank" type="primary">{{ scope.row.title || scope.row.url }}</el-link>
</template>
</el-table-column>
<el-table-column prop="category" label="分类" width="120">
<template #default="scope">
<el-tag v-if="scope.row.category" size="small" type="info">{{ scope.row.category }}</el-tag>
<span v-else style="color: #718096;">-</span>
</template>
</el-table-column>
<el-table-column prop="health_status" label="健康度" width="100">
<template #default="scope">
<el-tag :type="healthTagType(scope.row.health_status)" size="small">
{{ healthLabel(scope.row.health_status) }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="article_count" label="文章数" width="80" />
<el-table-column prop="last_fetch_at" label="最后抓取" width="160">
<template #default="scope">
{{ formatTime(scope.row.last_fetch_at) }}
</template>
</el-table-column>
<el-table-column prop="fetch_interval_minutes" label="间隔(分)" width="90" />
<el-table-column label="操作" width="200" fixed="right">
<template #default="scope">
<el-button link type="primary" size="small" @click="triggerFetch(scope.row.id)" :icon="Refresh">抓取</el-button>
<el-button link type="primary" size="small" @click="editFeed(scope.row)" :icon="Edit">编辑</el-button>
<el-button link type="danger" size="small" @click="deleteFeed(scope.row.id)" :icon="Delete">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="feeds-table-wrap">
<table class="feeds-table" v-loading="loading">
<thead>
<tr>
<th class="col-idx">#</th>
<th class="col-title">源名称</th>
<th class="col-cat">分类</th>
<th class="col-health">健康度</th>
<th class="col-err">错误类型</th>
<th class="col-num">文章</th>
<th class="col-time">最后抓取</th>
<th class="col-time">下次抓取</th>
<th class="col-num">间隔</th>
<th class="col-actions">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(feed, idx) in feeds" :key="feed.id" class="feed-row">
<td class="col-idx">{{ (page - 1) * pageSize + idx + 1 }}</td>
<td class="col-title">
<a :href="feed.url" target="_blank" class="feed-link">{{ feed.title || feed.url }}</a>
</td>
<td class="col-cat">
<span class="cat-tag" v-if="feed.category">{{ feed.category }}</span>
<span v-else class="muted">-</span>
</td>
<td class="col-health">
<span :class="['health-dot', `health-${feed.health_status}`]"></span>
{{ healthLabel(feed.health_status) }}
</td>
<td class="col-err">
<span v-if="feed.error_type" class="err-tag" :class="'err-' + feed.error_type">{{ errorLabel(feed.error_type) }}</span>
<span v-else class="muted">-</span>
</td>
<td class="col-num">{{ feed.article_count }}</td>
<td class="col-time">{{ formatTime(feed.last_fetch_at) }}</td>
<td class="col-time">{{ formatTime(feed.next_fetch_time) }}</td>
<td class="col-num">{{ feed.fetch_interval_minutes }}分</td>
<td class="col-actions">
<button class="action-btn action-fetch" @click="triggerFetch(feed.id)" title="抓取">抓取</button>
<button class="action-btn action-edit" @click="editFeed(feed)" title="编辑">编辑</button>
<button class="action-btn action-delete" @click="deleteFeed(feed.id)" title="删除">删除</button>
</td>
</tr>
<tr v-if="!feeds.length && !loading">
<td colspan="10" class="empty-row">暂无数据</td>
</tr>
</tbody>
</table>
<el-pagination
v-model:current-page="page"
v-model:page-size="pageSize"
:total="stats.total"
:page-sizes="[20, 50, 100]"
layout="total, sizes, prev, pager, next"
@change="loadFeeds"
style="margin-top: 16px; justify-content: flex-end;"
/>
</el-card>
<div class="pagination-wrap">
<el-pagination
v-model:current-page="page"
v-model:page-size="pageSize"
:total="stats.total"
:page-sizes="[20, 50, 100]"
layout="total, sizes, prev, pager, next"
@change="loadFeeds"
/>
</div>
</div>
<!-- 添加源对话框 -->
<el-dialog v-model="showAddDialog" title="添加 RSS 源" width="600px">
@@ -169,39 +182,50 @@ const pageSize = ref(20)
const searchQuery = ref('')
const filterCategory = ref('')
const filterStatus = ref('')
const filterHealth = ref('')
const categories = ref([])
// 添加对话框
const showAddDialog = ref(false)
const addTab = ref('direct')
const adding = ref(false)
const newFeed = ref({ url: '', title: '', category: '', fetch_interval_minutes: 60 })
// 自动发现
const discoverUrl = ref('')
const discovering = ref(false)
const discoveredFeeds = ref([])
// 编辑
const showEditDialog = ref(false)
const editing = ref(false)
const editForm = ref({ id: null, title: '', category: '', fetch_interval_minutes: 60, is_active: true })
// 导入
const showImportDialog = ref(false)
const importing = ref(false)
const opmlContent = ref('')
const healthTagType = (status) => {
const map = { healthy: 'success', warning: 'warning', unhealthy: 'danger', unknown: 'info' }
return map[status] || 'info'
}
const batchFetching = ref(false)
const healthLabel = (status) => {
const map = { healthy: '健康', warning: '警告', unhealthy: '异常', unknown: '未知' }
return map[status] || '未知'
}
const errorLabel = (type) => {
const map = {
url_invalid: 'URL失效',
forbidden: '被拒绝',
rate_limited: '频率限制',
timeout: '超时',
dns_failure: 'DNS失败',
connection_refused: '连接拒绝',
connection_reset: '连接中断',
ssl_error: 'SSL错误',
unreachable: '不可达',
url_malformed: 'URL错误',
server_error: '服务器错误',
unknown: '其他错误',
}
return map[type] || type
}
const formatTime = (iso) => {
if (!iso) return '-'
const d = new Date(iso)
@@ -216,6 +240,7 @@ const loadFeeds = async () => {
limit: pageSize.value,
search: searchQuery.value || undefined,
category: filterCategory.value || undefined,
health_status: filterHealth.value || undefined,
}
if (filterStatus.value === 'active') params.is_active = true
if (filterStatus.value === 'inactive') params.is_active = false
@@ -330,6 +355,38 @@ const triggerFetch = async (id) => {
}
}
const handleBatchFetch = async () => {
try {
// 用当前筛选条件获取全部匹配源的 ID
const filterParams = {
skip: 0,
limit: 10000,
search: searchQuery.value || undefined,
category: filterCategory.value || undefined,
health_status: filterHealth.value || undefined,
}
if (filterStatus.value === 'active') filterParams.is_active = true
if (filterStatus.value === 'inactive') filterParams.is_active = false
const allRes = await feedsApi.list(filterParams)
const ids = (allRes.items || []).map(f => f.id)
if (!ids.length) {
ElMessage.warning('当前筛选条件下无源可抓取')
return
}
await ElMessageBox.confirm(`将对筛选出的 ${ids.length} 个源发起抓取，抓取过程中请耐心等待。`, '批量抓取', { type: 'info' })
batchFetching.value = true
const res = await feedsApi.batchFetch(ids)
ElMessage.success(res.message)
loadFeeds()
} catch (e) {
if (e !== 'cancel') ElMessage.error(e.message)
} finally {
batchFetching.value = false
}
}
const handleImport = async () => {
if (!opmlContent.value.trim()) return
importing.value = true
@@ -367,3 +424,236 @@ onMounted(() => {
loadCategories()
})
</script>
<style scoped>
.feeds-page {
--row-bg: #1a1f2e;
--row-bg-alt: #161b28;
--row-hover: #222840;
--text-primary: #e8ecf4;
--text-secondary: #8b95a8;
--accent: #4f8ff7;
--accent-hover: #6fa1ff;
--border-color: #2a3048;
--health-healthy: #34d399;
--health-warning: #fbbf24;
--health-unhealthy: #f87171;
--health-unknown: #6b7280;
}
.feeds-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.header-actions {
display: flex;
gap: 8px;
}
/* 筛选栏 */
.filter-bar {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
}
.filter-input {
width: 240px;
}
.filter-select {
width: 120px;
}
.total-badge {
color: var(--text-secondary);
font-size: 13px;
background: rgba(79, 143, 247, 0.12);
padding: 4px 12px;
border-radius: 12px;
white-space: nowrap;
}
/* 表格容器 */
.feeds-table-wrap {
background: var(--row-bg);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border-color);
}
/* 表格 */
.feeds-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.feeds-table thead tr {
background: #12162a;
}
.feeds-table th {
padding: 12px 14px;
text-align: left;
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border-color);
}
.feeds-table td {
padding: 10px 14px;
font-size: 13px;
color: var(--text-primary);
border-bottom: 1px solid rgba(42, 48, 72, 0.5);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.feed-row {
background: var(--row-bg);
transition: background 0.15s ease;
}
.feed-row:nth-child(even) {
background: var(--row-bg-alt);
}
.feed-row:hover {
background: var(--row-hover) !important;
}
/* 列宽 */
.col-idx { width: 44px; text-align: center; }
.col-title { width: auto; }
.col-cat { width: 100px; }
.col-health { width: 90px; }
.col-err { width: 90px; }
.col-num { width: 65px; text-align: center; }
.col-time { width: 150px; }
.col-actions { width: 160px; text-align: center; }
/* 源名称链接 */
.feed-link {
color: var(--accent);
text-decoration: none;
font-weight: 500;
transition: color 0.15s;
}
.feed-link:hover {
color: var(--accent-hover);
text-decoration: underline;
}
/* 分类标签 */
.cat-tag {
display: inline-block;
background: rgba(79, 143, 247, 0.15);
color: #93b5f5;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
}
.muted {
color: var(--text-secondary);
}
/* 健康度指示 */
.health-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
}
.health-dot.health-healthy { background: var(--health-healthy); box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
.health-dot.health-warning { background: var(--health-warning); box-shadow: 0 0 6px rgba(251, 191, 36, 0.4); }
.health-dot.health-unhealthy { background: var(--health-unhealthy); box-shadow: 0 0 6px rgba(248, 113, 113, 0.4); }
.health-dot.health-unknown { background: var(--health-unknown); }
/* 错误类型标签 */
.err-tag {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
white-space: nowrap;
}
.err-url_invalid { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.err-forbidden { color: #fb923c; background: rgba(251, 146, 60, 0.12); }
.err-rate_limited { color: #fbbf24; background: rgba(251, 191, 36, 0.12); }
.err-timeout { color: #a78bfa; background: rgba(167, 139, 250, 0.12); }
.err-dns_failure { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.err-connection_refused { color: #fb923c; background: rgba(251, 146, 60, 0.12); }
.err-connection_reset { color: #fb923c; background: rgba(251, 146, 60, 0.12); }
.err-ssl_error { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.err-unreachable { color: #a78bfa; background: rgba(167, 139, 250, 0.12); }
.err-url_malformed { color: #f87171; background: rgba(248, 113, 113, 0.12); }
.err-server_error { color: #fb923c; background: rgba(251, 146, 60, 0.12); }
.err-unknown { color: #6b7280; background: rgba(107, 114, 128, 0.12); }
/* 操作按钮 */
.action-btn {
background: none;
border: 1px solid transparent;
color: var(--text-secondary);
padding: 3px 10px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: all 0.15s;
}
.action-btn:hover {
border-color: var(--border-color);
}
.action-fetch:hover {
color: var(--accent);
background: rgba(79, 143, 247, 0.1);
border-color: rgba(79, 143, 247, 0.3);
}
.action-edit:hover {
color: #a78bfa;
background: rgba(167, 139, 250, 0.1);
border-color: rgba(167, 139, 250, 0.3);
}
.action-delete:hover {
color: var(--health-unhealthy);
background: rgba(248, 113, 113, 0.1);
border-color: rgba(248, 113, 113, 0.3);
}
/* 空数据 */
.empty-row {
text-align: center;
color: var(--text-secondary);
padding: 40px !important;
font-size: 14px;
}
/* 分页 */
.pagination-wrap {
padding: 14px 16px;
display: flex;
justify-content: flex-end;
border-top: 1px solid var(--border-color);
background: #12162a;
}
</style>