任务页面全面改版: 模块输入/输出/历史详情抽屉
后端新增:
- GET /api/tasks/modules/{module_id}/detail
每个模块返回: inputs(自动填充的参数)、outputs(格式化产出结果)、
history(今日运行记录)、log_excerpt(日志原文)
前端重构 tasks.html:
- 上半: 定时任务模块卡片网格(与仪表盘风格统一)
- 点击卡片→右侧抽屉展示3个tab:
📥 输入参数: 搜索词/类别/待处理数量等(自动填充)
📤 产出结果: 表格/标签/评分/建议等(按类型格式化)
📋 运行记录: 日志原文+时间轴
- 底部保留创作任务列表(分页/筛选/详情)
- 抽屉底部立即运行按钮
This commit is contained in:
Yuzhiran Dev
+192
-37
@@ -51,6 +51,17 @@
|
||||
.schedule-row { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
|
||||
.schedule-next { width: 100%; margin-left: 46px; }
|
||||
}
|
||||
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
|
||||
.module-card { border: 1px solid #ebeef5; border-radius: 12px; padding: 16px; transition: all 0.3s; background: #fff; }
|
||||
.module-card:hover { border-color: #409eff; box-shadow: 0 2px 12px rgba(64,158,255,0.12); transform: translateY(-2px); }
|
||||
.module-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
|
||||
.module-title { font-weight: 600; font-size: 15px; color: #303133; }
|
||||
.module-status { font-size: 12px; padding: 2px 10px; border-radius: 12px; background: #f4f4f5; color: #909399; }
|
||||
.module-status.running { background: #f0f9eb; color: #67c23a; }
|
||||
.module-content > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
|
||||
.module-content > div > span:first-child { color: #909399; }
|
||||
.module-content > div > span:last-child { color: #303133; font-weight: 500; }
|
||||
.task-drawer .el-drawer__body { padding: 16px 24px; overflow: hidden; display: flex; flex-direction: column; }
|
||||
</style>
|
||||
<script src="uni-nav.js"></script>
|
||||
</head>
|
||||
@@ -64,27 +75,140 @@
|
||||
<div class="page-header">
|
||||
<h2 class="page-title"><el-icon style="vertical-align:-2px;"><IconMenu /></el-icon> 定时任务</h2>
|
||||
<div class="toolbar">
|
||||
<el-button @click="loadSchedulerStatus"><el-icon style="vertical-align:-2px;"><IconRefresh /></el-icon> 刷新</el-button>
|
||||
<el-tag v-if="schedulerRunning" type="success" size="small">调度器运行中</el-tag>
|
||||
<el-tag v-else type="danger" size="small">调度器未启动</el-tag>
|
||||
<el-button @click="loadModules"><el-icon style="vertical-align:-2px;"><IconRefresh /></el-icon> 刷新</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="schedulerLoading" style="text-align: center; padding: 20px; color: #909399;">加载中...</div>
|
||||
<div v-else>
|
||||
<div v-if="schedulerJobs.length === 0" style="text-align: center; padding: 30px 20px; color: #909399; font-size: 14px;">暂无定时任务</div>
|
||||
<div v-for="job in schedulerJobs" :key="job.id" class="schedule-row">
|
||||
<div class="schedule-icon"><el-icon><component :is="job.icon" /></el-icon></div>
|
||||
<div class="schedule-info">
|
||||
<div class="schedule-name">{{ job.name }}</div>
|
||||
<div class="schedule-time"><el-icon style="vertical-align:-2px;"><IconClock /></el-icon> 每日 {{ job.time }}</div>
|
||||
<div style="font-size:11px;color:#c0c4cc;margin-top:1px;">{{ job.id }}</div>
|
||||
<div v-if="moduleLoading" style="text-align: center; padding: 20px; color: #909399;">加载中...</div>
|
||||
<div v-else-if="modules.length === 0" style="text-align: center; padding: 30px 20px; color: #909399; font-size: 14px;">暂无定时任务</div>
|
||||
<div v-else class="module-grid">
|
||||
<div v-for="mod in modules" :key="mod.id" class="module-card" @click="openModuleDetail(mod)" style="cursor:pointer;">
|
||||
<div class="module-header">
|
||||
<span class="module-title">{{ mod.title }}</span>
|
||||
<span :class="['module-status', mod.status === 'running' ? 'running' : '']">{{ mod.status === 'running' ? '运行中' : '已停止' }}</span>
|
||||
</div>
|
||||
<div class="module-content">
|
||||
<div><span>最后运行</span><span>{{ mod.last_run }}</span></div>
|
||||
<div><span>下次运行</span><span>{{ mod.next_run }}</span></div>
|
||||
<div><span>今日任务</span><span>{{ mod.task_count }} 个</span></div>
|
||||
<div><span>成功率</span><span>{{ mod.success_rate > 0 ? mod.success_rate + '%' : '暂无' }}</span></div>
|
||||
<div style="margin-top:10px; border-bottom:none;">
|
||||
<el-button size="small" type="primary" @click.stop="triggerModule(mod.id)" :loading="runningModule === mod.id">立即运行</el-button>
|
||||
<el-button size="small" @click.stop="openModuleDetail(mod)">查看详情</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="schedule-next">
|
||||
<span class="schedule-badge" :class="job.active ? 'active' : 'inactive'"></span>
|
||||
<span>{{ job.active ? '运行中' : '等待中' }}</span>
|
||||
<span v-if="job.next_run" style="margin-left: 8px; color: #909399;">下次: {{ job.next_run }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 模块详情抽屉 -->
|
||||
<el-drawer v-model="showDrawer" :title="drawerTitle" size="50%" direction="rtl" class="task-drawer">
|
||||
<div v-if="drawerLoading" style="text-align:center;padding:40px;color:#909399;">加载中...</div>
|
||||
<div v-else-if="drawerError" style="text-align:center;padding:40px;color:#f56c6c;">{{ drawerError }}</div>
|
||||
<div v-else-if="drawerData" style="height:100%;display:flex;flex-direction:column;">
|
||||
<div style="padding-bottom:16px;border-bottom:1px solid #ebeef5;margin-bottom:16px;flex-shrink:0;">
|
||||
<el-tag v-if="drawerData.module_id" size="small" type="info" style="margin-bottom:8px;">{{ drawerData.module_id }}</el-tag>
|
||||
<p style="color:#606266;font-size:14px;margin:0;">{{ drawerData.description }}</p>
|
||||
</div>
|
||||
<el-tabs v-model="drawerTab" style="flex:1;display:flex;flex-direction:column;overflow:hidden;">
|
||||
<el-tab-pane label="📥 输入参数" name="inputs" style="overflow:auto;flex:1;">
|
||||
<div v-if="Object.keys(drawerData.inputs || {}).length === 0" style="color:#909399;padding:20px;text-align:center;">无需手动输入，数据自动获取</div>
|
||||
<div v-for="(val, key) in drawerData.inputs" :key="key" style="margin-bottom:16px;">
|
||||
<div style="font-size:13px;font-weight:600;color:#303133;margin-bottom:6px;">{{ key }}</div>
|
||||
<div v-if="Array.isArray(val)">
|
||||
<el-tag v-for="(item, i) in val" :key="i" style="margin:2px 4px 2px 0;" size="small">{{ item }}</el-tag>
|
||||
</div>
|
||||
<div v-else style="font-size:13px;color:#606266;">{{ val }}</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="📤 产出结果" name="outputs" style="overflow:auto;flex:1;">
|
||||
<div v-if="Object.keys(drawerData.outputs || {}).length === 0" style="color:#909399;padding:20px;text-align:center;">暂无产出数据，运行任务后将在此展示</div>
|
||||
<div v-for="(val, key) in drawerData.outputs" :key="key" style="margin-bottom:16px;border-bottom:1px solid #f0f2f5;padding-bottom:12px;">
|
||||
<div style="font-size:13px;font-weight:600;color:#303133;margin-bottom:6px;">{{ key }}</div>
|
||||
<div v-if="key === '热点列表' && Array.isArray(val)">
|
||||
<el-table :data="val" size="small" max-height="400" style="width:100%;">
|
||||
<el-table-column prop="topic" label="话题" min-width="180"></el-table-column>
|
||||
<el-table-column prop="domain" label="领域" width="100"></el-table-column>
|
||||
<el-table-column prop="source" label="来源" width="80"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-else-if="key === '最新选题' && Array.isArray(val)">
|
||||
<el-table :data="val" size="small" max-height="300" style="width:100%;">
|
||||
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||||
<el-table-column prop="title" label="标题" min-width="150"></el-table-column>
|
||||
<el-table-column prop="field" label="领域" width="80"></el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="70"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-else-if="(key === '最新文章' || key === '最新指标') && Array.isArray(val)">
|
||||
<el-table :data="val" size="small" max-height="300" style="width:100%;">
|
||||
<el-table-column v-for="col in Object.keys(val[0]||{})" :key="col" :prop="col" :label="col" min-width="80"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-else-if="key === '各分类结果' && Array.isArray(val)">
|
||||
<div v-for="item in val" :key="item.query" style="margin-bottom:8px;padding:8px;background:#f8faff;border-radius:6px;">
|
||||
<div style="font-size:13px;font-weight:500;">{{ item.query }} <el-tag size="mini">{{ item.count }}条</el-tag></div>
|
||||
<div style="font-size:12px;color:#909399;margin-top:4px;" v-for="s in item.samples" :key="s">● {{ s }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="key === '文章评分' && Array.isArray(val)">
|
||||
<div v-for="item in val" :key="item.title" style="margin-bottom:6px;display:flex;align-items:center;gap:8px;">
|
||||
<span style="font-size:13px;">{{ item.title }}</span>
|
||||
<el-rate :model-value="parseScore(item.score)" disabled show-score score-template="{value}分" size="small"></el-rate>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="key === 'AI建议摘要'" style="background:#f0f9eb;padding:10px 14px;border-radius:8px;font-size:13px;color:#303133;">{{ val }}</div>
|
||||
<div v-else-if="key === '建议新增类别' && Array.isArray(val)">
|
||||
<div v-for="item in val" :key="item.name" style="padding:8px;background:#f0f9eb;border-radius:6px;margin-bottom:6px;">
|
||||
<div style="font-weight:500;">{{ item.name }}</div>
|
||||
<div style="font-size:12px;color:#606266;">{{ item.reason }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="key === '类别评估' && Array.isArray(val)">
|
||||
<div v-for="item in val" :key="item.name" style="margin-bottom:4px;font-size:13px;">
|
||||
<el-tag :type="item.status==='保留'?'success':'warning'" size="mini" style="margin-right:6px;">{{ item.status }}</el-tag>
|
||||
{{ item.name }} — {{ item.reason }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="key === '来源分布' && typeof val === 'object'">
|
||||
<div v-for="(cnt, src) in val" :key="src" style="margin-bottom:4px;font-size:13px;">
|
||||
{{ src }}: <el-tag size="mini">{{ cnt }}条</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="key === '高互动领域' && Array.isArray(val)">
|
||||
<div v-for="item in val" :key="item[0]" style="margin-bottom:4px;font-size:13px;">
|
||||
{{ item[0] }}: <el-tag size="mini" type="success">{{ item[1] }}分</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="typeof val === 'object' && !Array.isArray(val) && val !== null">
|
||||
<div v-for="(v,k) in val" :key="k" style="margin-bottom:4px;font-size:13px;">
|
||||
<span style="color:#909399;">{{ k }}:</span> {{ v }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else style="font-size:13px;color:#606266;">{{ val }}</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="📋 运行记录" name="history" style="overflow:auto;flex:1;">
|
||||
<div v-if="drawerData.log_excerpt" style="margin-bottom:12px;">
|
||||
<div style="font-size:13px;font-weight:600;margin-bottom:6px;">今日日志（最近15行）</div>
|
||||
<pre style="background:#1a1a2e;color:#e0e0e0;padding:12px;border-radius:8px;font-size:12px;overflow:auto;max-height:300px;white-space:pre-wrap;word-break:break-all;">{{ drawerData.log_excerpt }}</pre>
|
||||
</div>
|
||||
<div v-if="drawerData.history && drawerData.history.length > 0">
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(h, i) in drawerData.history" :key="i" :timestamp="h.time" :color="h.status === 'success' ? '#67c23a' : '#f56c6c'">
|
||||
<span :style="{color: h.status === 'success' ? '#67c23a' : '#f56c6c', fontSize:'13px'}">{{ h.msg }}</span>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</div>
|
||||
<div v-if="!drawerData.log_excerpt && (!drawerData.history || drawerData.history.length === 0)" style="color:#909399;padding:20px;text-align:center;">暂无运行记录</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div style="padding-top:16px;border-top:1px solid #ebeef5;flex-shrink:0;text-align:center;">
|
||||
<el-button type="primary" @click="triggerModule(drawerData.module_id)" :loading="runningModule === drawerData.module_id" size="medium">立即运行此任务</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<div class="card page-fade">
|
||||
<div class="page-header">
|
||||
@@ -178,17 +302,29 @@ const TasksApp = {
|
||||
'scheduled_optimize': { icon: 'IconSearch', name: '合规审查', defaultTime: '04:30' },
|
||||
'scheduled_optimize_sources': { icon: 'IconSetting', name: '信息源优化', defaultTime: '05:00' },
|
||||
'scheduled_metrics_sync': { icon: 'IconDashboard', name: '指标同步', defaultTime: '06:00' },
|
||||
'scheduled_refresh_search_cache': { icon: 'IconRefresh', name: '搜索缓存', defaultTime: '01:00' },
|
||||
'scheduled_fetch_trends': { icon: 'IconRefresh', name: '热点趋势', defaultTime: '01:10' },
|
||||
};
|
||||
const MODULE_TRIGGER_ENDPOINTS = {
|
||||
scheduled_collect: '/api/system/collect/run',
|
||||
scheduled_refresh_search_cache: '/api/system/refresh-search-cache/run',
|
||||
scheduled_fetch_trends: '/api/system/trends/run',
|
||||
scheduled_generate: '/api/system/generate/run',
|
||||
scheduled_optimize: '/api/system/review/run',
|
||||
scheduled_optimize_sources: '/api/system/optimize-sources/run',
|
||||
scheduled_metrics_sync: '/api/system/metrics-sync/run',
|
||||
};
|
||||
const STAGE_NAMES = { 'creator': '创作', 'optimize': '审查', 'review': '审查', 'publish': '发布' };
|
||||
const STATUS_NAMES = { 'pending': '等待中', 'running': '进行中', 'completed': '已完成', 'failed': '失败', 'cancelled': '已取消' };
|
||||
return {
|
||||
currentUser: { username: '' }, isAdmin: false, isLoggedIn: false,
|
||||
allTasks: [], tasks: [], loading: false, filterStatus: '',
|
||||
allTasks: [], loading: false, filterStatus: '',
|
||||
showDetailDialog: false, detailTask: null,
|
||||
schedulerJobs: [], schedulerLoading: false,
|
||||
modules: [], moduleLoading: false, schedulerRunning: false, runningModule: null,
|
||||
currentPage: 1, pageSize: 10,
|
||||
showDrawer: false, drawerTitle: '', drawerData: null, drawerLoading: false, drawerError: '', drawerTab: 'inputs',
|
||||
pollTimer: null,
|
||||
SCHEDULER_JOBS,
|
||||
SCHEDULER_JOBS, MODULE_TRIGGER_ENDPOINTS,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -213,30 +349,49 @@ const TasksApp = {
|
||||
if (!token) { window.location.href = '/login.html'; return; }
|
||||
fetch('/api/auth/me', { headers: { 'Authorization': 'Bearer ' + token } })
|
||||
.then(r => r.ok ? r.json() : Promise.reject())
|
||||
.then(data => { this.currentUser = data.user; this.isAdmin = data.user.role === 'admin'; this.isLoggedIn = true; this.loadTasks(); this.loadSchedulerStatus(); })
|
||||
.then(data => { this.currentUser = data.user; this.isAdmin = data.user.role === 'admin'; this.isLoggedIn = true; this.loadModules(); this.loadTasks(); })
|
||||
.catch(() => { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; });
|
||||
},
|
||||
async loadSchedulerStatus() {
|
||||
this.schedulerLoading = true;
|
||||
async loadModules() {
|
||||
this.moduleLoading = true;
|
||||
try {
|
||||
const data = await this.api('/api/system/scheduler/status');
|
||||
const data = await this.api('/api/system/modules/status');
|
||||
if (!data) return;
|
||||
this.schedulerJobs = (data.jobs || []).map(job => {
|
||||
const info = this.SCHEDULER_JOBS[job.id] || { icon: 'IconClock', name: job.id, defaultTime: '' };
|
||||
// Parse cron trigger for time display
|
||||
let time = info.defaultTime;
|
||||
const m = job.trigger && job.trigger.match(/hour='?(\d+)'?,\s*minute='?(\d+)'?/);
|
||||
if (m) time = m[1].padStart(2,'0') + ':' + m[2].padStart(2,'0');
|
||||
// Format next_run_time
|
||||
let next_run = '';
|
||||
if (job.next_run_time) {
|
||||
try { next_run = new Date(job.next_run_time).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }); } catch(e) { next_run = job.next_run_time; }
|
||||
}
|
||||
return { id: job.id, icon: info.icon, name: info.name, time, active: data.running, next_run };
|
||||
});
|
||||
} catch (e) { console.error(e); this.$message.error('加载调度状态失败: ' + e.message); }
|
||||
finally { this.schedulerLoading = false; }
|
||||
this.modules = data.modules || [];
|
||||
this.schedulerRunning = data.scheduler && data.scheduler.running === true;
|
||||
} catch (e) { console.error(e); }
|
||||
finally { this.moduleLoading = false; }
|
||||
},
|
||||
async openModuleDetail(mod) {
|
||||
this.showDrawer = true;
|
||||
this.drawerTitle = mod.title + ' 详情';
|
||||
this.drawerData = null;
|
||||
this.drawerError = '';
|
||||
this.drawerLoading = true;
|
||||
this.drawerTab = 'inputs';
|
||||
try {
|
||||
const data = await this.api('/api/tasks/modules/' + mod.id + '/detail');
|
||||
if (data) {
|
||||
data.status = mod.status;
|
||||
this.drawerData = data;
|
||||
} else {
|
||||
this.drawerError = '加载失败';
|
||||
}
|
||||
} catch (e) { this.drawerError = e.message; }
|
||||
finally { this.drawerLoading = false; }
|
||||
},
|
||||
async triggerModule(modId) {
|
||||
const endpoint = this.MODULE_TRIGGER_ENDPOINTS[modId];
|
||||
if (!endpoint) { this.$message.error('未知模块'); return; }
|
||||
this.runningModule = modId;
|
||||
try {
|
||||
await this.api(endpoint, { method: 'POST' });
|
||||
this.$message.success('任务已启动');
|
||||
setTimeout(() => this.loadModules(), 2000);
|
||||
} catch (e) { this.$message.error('启动失败: ' + e.message); }
|
||||
finally { this.runningModule = null; }
|
||||
},
|
||||
parseScore(v) { const n = parseFloat(v); return isNaN(n) ? 0 : n; },
|
||||
getStatusLabel(status) { return { 'pending': '等待中', 'running': '进行中', 'completed': '已完成', 'failed': '失败', 'cancelled': '已取消' }[status] || status; },
|
||||
getStageLabel(stage) { return { 'creator': '创作', 'optimize': '审查', 'review': '审查', 'publish': '发布' }[stage] || stage; },
|
||||
formatDate(dateStr) {
|
||||
|
||||
Reference in New Issue
Block a user