Yuzhiran Dev
298 lines
21 KiB
HTML
298 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>宇之然内容创作平台 - 创作任务</title>
|
|
<link rel="stylesheet" href="element-plus.css">
|
|
<link rel="stylesheet" href="theme-modern.css">
|
|
<style>
|
|
.toolbar { gap: 12px; }
|
|
|
|
.task-card { border: 1px solid #ebeef5; border-radius: 12px; padding: 16px; margin-bottom: 12px; transition: all 0.3s; background: #fff; }
|
|
.task-card:hover { border-color: #409eff; box-shadow: 0 2px 12px rgba(64,158,255,0.12); transform: translateY(-1px); }
|
|
.task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
|
|
.task-id { font-size: 13px; color: #909399; font-family: monospace; }
|
|
.task-stage { display: inline-block; padding: 4px 12px; border-radius: 16px; font-size: 12px; font-weight: 500; }
|
|
.stage-creator { background: #f0f9eb; color: #67c23a; }
|
|
.stage-optimize { background: #fdf6ec; color: #e6a23c; }
|
|
.stage-review { background: #fef0f0; color: #f56c6c; }
|
|
.stage-publish { background: #ecf5ff; color: #409eff; }
|
|
.task-body { margin-bottom: 12px; }
|
|
.task-message { font-size: 14px; color: #606266; margin-bottom: 8px; }
|
|
.task-meta { display: flex; gap: 16px; font-size: 13px; color: #909399; flex-wrap: wrap; }
|
|
.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 16px; font-size: 13px; }
|
|
.status-pending { background: #f4f4f5; color: #909399; }
|
|
.status-running { background: #f0f9eb; color: #67c23a; }
|
|
.status-completed { background: #ecf5ff; color: #409eff; }
|
|
.status-failed { background: #fef0f0; color: #f56c6c; }
|
|
.status-cancelled { background: #f4f4f5; color: #c0c4cc; }
|
|
.error-box { margin-top: 8px; padding: 8px 12px; background: #fef0f0; border-radius: 6px; font-size: 13px; color: #f56c6c; border-left: 3px solid #f56c6c; }
|
|
|
|
.task-card-list-mobile { display: none; }
|
|
.schedule-row { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 10px; background: #f8faff; border: 1px solid #e8edf5; margin-bottom: 8px; transition: all 0.2s; }
|
|
.schedule-row:hover { background: #f0f4ff; }
|
|
.schedule-icon { font-size: 22px; width: 36px; text-align: center; flex-shrink: 0; }
|
|
.schedule-info { flex: 1; min-width: 0; }
|
|
.schedule-name { font-size: 14px; font-weight: 600; color: #303133; }
|
|
.schedule-time { font-size: 12px; color: #909399; margin-top: 2px; }
|
|
.schedule-next { font-size: 12px; color: #409eff; white-space: nowrap; }
|
|
.schedule-badge { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
|
|
.schedule-badge.active { background: #67c23a; }
|
|
.schedule-badge.inactive { background: #c0c4cc; }
|
|
.detail-row { display: flex; padding: 10px 0; border-bottom: 1px solid #f0f2f5; }
|
|
.detail-row:last-child { border-bottom: none; }
|
|
.detail-label { width: 80px; flex-shrink: 0; font-size: 13px; color: #909399; }
|
|
.detail-value { flex: 1; font-size: 13px; color: #303133; word-break: break-all; }
|
|
|
|
@media (max-width: 768px) {
|
|
.task-table { display: none; }
|
|
.task-card-list-mobile { display: block; }
|
|
.schedule-row { padding: 10px 12px; gap: 10px; flex-wrap: wrap; }
|
|
.schedule-next { width: 100%; margin-left: 46px; }
|
|
}
|
|
</style>
|
|
<script src="uni-nav.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<uni-nav title="创作任务" :username="currentUser.username" :is-admin="isAdmin" current-page="tasks" @navigate="redirectToPage" @logout="handleLogout">
|
|
</uni-nav>
|
|
<div class="main-content">
|
|
<main class="content-area">
|
|
<div class="card page-fade">
|
|
<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>
|
|
</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>
|
|
<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>
|
|
|
|
<div class="card page-fade">
|
|
<div class="page-header">
|
|
<h2 class="page-title"><el-icon style="vertical-align:-2px;"><IconMenu /></el-icon> 创作任务</h2>
|
|
<div class="toolbar">
|
|
<el-button-group>
|
|
<el-button :type="filterStatus === '' ? 'primary' : ''" @click="filterStatus = ''; loadTasks()">全部</el-button>
|
|
<el-button :type="filterStatus === 'running' ? 'primary' : ''" @click="filterStatus = 'running'; loadTasks()">进行中</el-button>
|
|
<el-button :type="filterStatus === 'pending' ? 'primary' : ''" @click="filterStatus = 'pending'; loadTasks()">等待中</el-button>
|
|
<el-button :type="filterStatus === 'completed' ? 'primary' : ''" @click="filterStatus = 'completed'; loadTasks()">已完成</el-button>
|
|
<el-button :type="filterStatus === 'failed' ? 'primary' : ''" @click="filterStatus = 'failed'; loadTasks()">失败</el-button>
|
|
</el-button-group>
|
|
<el-button @click="loadTasks"><el-icon style="vertical-align:-2px;"><IconRefresh /></el-icon> 刷新</el-button>
|
|
</div>
|
|
</div>
|
|
<div v-if="loading" style="text-align: center; padding: 40px; color: #909399;">加载中...</div>
|
|
<div v-else-if="allTasks.length === 0" style="text-align: center; padding: 60px 20px; color: #909399;">
|
|
<el-icon style="font-size:56px;margin-bottom:16px;color:#c0c4cc;"><IconTopic /></el-icon>
|
|
<div style="font-size: 16px;">暂无任务</div>
|
|
<div style="margin-top: 12px; font-size: 14px;">前往 <a href="/topics.html" style="color: #409eff;">选题管理</a> 创建新任务</div>
|
|
</div>
|
|
<div v-else>
|
|
<div v-for="task in paginatedTasks" :key="task.task_id" class="task-card">
|
|
<div class="task-header">
|
|
<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
|
|
<span class="task-id" title="任务ID">{{ task.task_id.slice(0,16) }}</span>
|
|
<span style="font-weight:600;color:#303133;font-size:14px;">{{ task.topic_title || task.topic_id || '通用任务' }}</span>
|
|
<span class="status-badge" :class="'status-' + task.status">{{ getStatusLabel(task.status) }}</span>
|
|
<span class="task-stage" :class="'stage-' + task.stage">{{ getStageLabel(task.stage) }}</span>
|
|
</div>
|
|
<div style="display: flex; gap: 8px;">
|
|
<el-button v-if="task.status === 'running'" size="small" type="danger" @click="cancelTask(task.task_id)">取消</el-button>
|
|
<el-button v-if="task.status === 'failed'" size="small" type="primary" @click="retryTask(task)">重试</el-button>
|
|
<el-button size="small" @click="viewTaskDetail(task)">详情</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="task-body">
|
|
<div class="task-message">{{ task.message || '无消息' }}</div>
|
|
<div v-if="task.status === 'running'" style="margin-top: 8px;">
|
|
<el-progress :percentage="task.progress || 0" :stroke-width="12" :show-text="true"></el-progress>
|
|
</div>
|
|
</div>
|
|
<div class="task-meta">
|
|
<span>ID: {{ task.task_id }}</span>
|
|
<span>创建: {{ formatDate(task.created_at) }}</span>
|
|
<span v-if="task.started_at">开始: {{ formatDate(task.started_at) }}</span>
|
|
<span v-if="task.finished_at">完成: {{ formatDate(task.finished_at) }}</span>
|
|
<span v-if="task.duration">耗时: {{ task.duration }}秒</span>
|
|
<span>创建人: {{ task.created_by }}</span>
|
|
</div>
|
|
<div v-if="task.error_msg" class="error-box">错误: {{ task.error_msg }}</div>
|
|
</div>
|
|
<div v-if="paginatedTasks.length > 0 && allTasks.length > pageSize" style="display:flex;justify-content:center;align-items:center;margin-top:16px;gap:16px;">
|
|
<span style="font-size:13px;color:#909399;">共 {{ allTasks.length }} 条</span>
|
|
<el-pagination background layout="prev, pager, next" :total="allTasks.length" :page-size="pageSize" :current-page="currentPage" @current-change="p => { currentPage = p; }"></el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<el-dialog v-model="showDetailDialog" title="任务详情" width="600px" class="task-detail-dialog">
|
|
<div v-if="detailTask">
|
|
<div class="detail-row"><span class="detail-label">任务ID</span><span class="detail-value">{{ detailTask.task_id }}</span></div>
|
|
<div class="detail-row"><span class="detail-label">状态</span><span class="detail-value"><span class="status-badge" :class="'status-' + detailTask.status">{{ getStatusLabel(detailTask.status) }}</span></span></div>
|
|
<div class="detail-row"><span class="detail-label">阶段</span><span class="detail-value"><span class="task-stage" :class="'stage-' + detailTask.stage">{{ getStageLabel(detailTask.stage) }}</span></span></div>
|
|
<div class="detail-row"><span class="detail-label">进度</span><span class="detail-value">{{ detailTask.progress }}%</span></div>
|
|
<div class="detail-row"><span class="detail-label">选题ID</span><span class="detail-value">{{ detailTask.topic_id || '-' }}</span></div>
|
|
<div class="detail-row"><span class="detail-label">创建时间</span><span class="detail-value">{{ formatDate(detailTask.created_at) }}</span></div>
|
|
<div class="detail-row"><span class="detail-label">开始时间</span><span class="detail-value">{{ formatDate(detailTask.started_at) }}</span></div>
|
|
<div class="detail-row"><span class="detail-label">完成时间</span><span class="detail-value">{{ formatDate(detailTask.finished_at) }}</span></div>
|
|
<div class="detail-row"><span class="detail-label">耗时</span><span class="detail-value">{{ detailTask.duration ? detailTask.duration + '秒' : '-' }}</span></div>
|
|
<div class="detail-row"><span class="detail-label">创建人</span><span class="detail-value">{{ detailTask.created_by }}</span></div>
|
|
<div class="detail-row"><span class="detail-label">消息</span><span class="detail-value">{{ detailTask.message || '-' }}</span></div>
|
|
<div v-if="detailTask.error_msg" class="detail-row"><span class="detail-label">错误信息</span><span class="detail-value" style="color: #f56c6c;">{{ detailTask.error_msg }}</span></div>
|
|
<div v-if="detailTask.result_data" style="margin-top: 16px;">
|
|
<div style="font-weight: 600; margin-bottom: 8px; font-size: 13px;">结果数据:</div>
|
|
<pre style="background: #f5f7fa; padding: 12px; border-radius: 8px; overflow: auto; max-height: 200px; font-size: 12px;">{{ JSON.stringify(detailTask.result_data, null, 2) }}</pre>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
<script src="vue.global.prod.js"></script>
|
|
<script src="icon-components.js"></script>
|
|
<script src="element-plus.full.js"></script>
|
|
<script>
|
|
const TasksApp = {
|
|
data() {
|
|
const SCHEDULER_JOBS = {
|
|
'scheduled_collect': { icon: 'IconRefresh', name: '内容采集', defaultTime: '01:30' },
|
|
'scheduled_sync': { icon: 'IconRefresh', name: '数据同步', defaultTime: '02:30' },
|
|
'scheduled_generate': { icon: 'IconDocument', name: '内容创作', defaultTime: '03:30' },
|
|
'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' },
|
|
};
|
|
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: '',
|
|
showDetailDialog: false, detailTask: null,
|
|
schedulerJobs: [], schedulerLoading: false,
|
|
currentPage: 1, pageSize: 10,
|
|
pollTimer: null,
|
|
SCHEDULER_JOBS,
|
|
}
|
|
},
|
|
computed: {
|
|
paginatedTasks() {
|
|
const start = (this.currentPage - 1) * this.pageSize;
|
|
return this.allTasks.slice(start, start + this.pageSize);
|
|
}
|
|
},
|
|
methods: {
|
|
getToken() { return localStorage.getItem('authToken'); },
|
|
async api(url, opts = {}) {
|
|
const token = this.getToken();
|
|
if (!token) { this.$message.error('请先登录'); return null; }
|
|
const res = await fetch(url, { headers: { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json', ...opts.headers }, ...opts });
|
|
if (!res.ok) { const data = await res.json().catch(() => ({})); throw new Error(data.detail || `请求失败: ${res.status}`); }
|
|
return res.json();
|
|
},
|
|
handleLogout() { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; },
|
|
redirectToPage(page) { window.location.href = page.startsWith('/') ? page : '/' + page; },
|
|
checkAuth() {
|
|
const token = this.getToken();
|
|
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(); })
|
|
.catch(() => { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; });
|
|
},
|
|
async loadSchedulerStatus() {
|
|
this.schedulerLoading = true;
|
|
try {
|
|
const data = await this.api('/api/system/scheduler/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; }
|
|
},
|
|
getStatusLabel(status) { return { 'pending': '等待中', 'running': '进行中', 'completed': '已完成', 'failed': '失败', 'cancelled': '已取消' }[status] || status; },
|
|
getStageLabel(stage) { return { 'creator': '创作', 'optimize': '审查', 'review': '审查', 'publish': '发布' }[stage] || stage; },
|
|
formatDate(dateStr) {
|
|
if (!dateStr) return '-';
|
|
try { return new Date(dateStr).toLocaleString('zh-CN'); } catch (e) { return dateStr; }
|
|
},
|
|
startPolling() {
|
|
this.stopPolling();
|
|
this.pollTimer = setInterval(() => this.loadTasks(false), 5000);
|
|
},
|
|
stopPolling() {
|
|
if (this.pollTimer) { clearInterval(this.pollTimer); this.pollTimer = null; }
|
|
},
|
|
async loadTasks(resetPage = true) {
|
|
this.loading = true;
|
|
try {
|
|
let url = '/api/tasks?limit=200';
|
|
if (this.filterStatus) url += '&status=' + this.filterStatus;
|
|
const data = await this.api(url) || [];
|
|
const oldId = this.allTasks.length > 0 && this.allTasks[0] ? this.allTasks[0].task_id : null;
|
|
this.allTasks = data;
|
|
if (resetPage) this.currentPage = 1;
|
|
const hasRunning = data.some(t => t.status === 'running');
|
|
if (hasRunning) { this.startPolling(); } else { this.stopPolling(); }
|
|
} catch (e) { console.error(e); this.$message.error('加载任务列表失败: ' + e.message); }
|
|
finally { this.loading = false; }
|
|
},
|
|
viewTaskDetail(task) { this.detailTask = task; this.showDetailDialog = true; },
|
|
async cancelTask(taskId) {
|
|
try {
|
|
await this.$confirm('确定取消该任务？', '提示', { type: 'warning' });
|
|
await this.api('/api/tasks/' + taskId, { method: 'DELETE' });
|
|
this.$message.success('任务已取消');
|
|
this.loadTasks();
|
|
} catch (e) { if (e !== 'cancel') this.$message.error(e.message || '操作失败'); }
|
|
},
|
|
async retryTask(task) {
|
|
if (!task.topic_id) { this.$message.warning('该任务无关联选题，无法重试'); return; }
|
|
try {
|
|
await this.api('/api/tasks/run-creator?topic_id=' + task.topic_id, { method: 'POST' });
|
|
this.$message.success('已重新提交创作任务');
|
|
this.loadTasks();
|
|
} catch (e) { this.$message.error('重试失败: ' + e.message); }
|
|
}
|
|
},
|
|
mounted() { this.checkAuth(); },
|
|
beforeUnmount() { this.stopPolling(); }
|
|
};
|
|
const app = Vue.createApp(TasksApp);
|
|
app.use(ElementPlus);
|
|
if (window.installIcons) { window.installIcons(app); }
|
|
if (window.installUniNav) { window.installUniNav(app); }
|
|
app.mount('#app');
|
|
</script>
|
|
<script src="ai-assistant.js"></script>
|
|
</body>
|
|
</html>
|