txai-dev/yu-zhi-ran
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化选题/任务/日志页面布局并打通任务系统

Browse Source 
- topics.html: 重构布局（page-header模式），创作改为走 /api/tasks/run-creator 任务系统
- tasks.html: 重试功能实现，调用 /api/tasks/run-creator 重新提交创作
- logs.html: 统一布局风格
- 三个页面添加 min-height / overflow-x / 统一间距
- backend/run.sh: 修复入口为 app.main:app
This commit is contained in:
lt
2026-05-09 19:58:49 +08:00
parent 25694db33b
commit bc6a302e59
4 changed files with 310 additions and 704 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform/frontend/tasks.html
+70 -67
View File
@@ -7,22 +7,26 @@
<link rel="stylesheet" href="element-plus.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f5f7fa; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f5f7fa; color: #303133; }
.navbar { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; padding: 16px 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.navbar-content { display: flex; justify-content: space-between; align-items: center; max-width: 1400px; margin: 0 auto; }
.navbar-title { font-size: 20px; font-weight: 600; }
.navbar-user { display: flex; align-items: center; gap: 16px; }
.user-info { display: flex; align-items: center; gap: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.main-content { display: flex; flex: 1; max-width: 1400px; margin: 0 auto; }
.sidebar { width: 180px; background: white; padding: 12px; box-shadow: 2px 0 8px rgba(0,0,0,0.05); }
.main-content { display: flex; flex: 1; max-width: 1400px; margin: 0 auto; min-height: calc(100vh - 60px); }
.content-area { flex: 1; padding: 24px; overflow-y: auto; }
.card { background: white; border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.card { background: white; border-radius: 12px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow-x: auto; }
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: white; box-shadow: 0 -2px 8px rgba(0,0,0,0.1); padding: 8px 0; z-index: 1000; }
.task-card { border: 1px solid #ebeef5; border-radius: 12px; padding: 16px; margin-bottom: 12px; transition: all 0.3s; }
.task-card:hover { border-color: #409eff; box-shadow: 0 2px 12px rgba(64,158,255,0.15); }
.task-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.task-id { font-size: 13px; color: #909399; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.page-title { font-size: 24px; font-weight: 700; color: #303133; display: flex; align-items: center; gap: 8px; }
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.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; }
@@ -31,17 +35,22 @@
.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; }
@media (max-width: 768px) {
.sidebar { display: none; }
.mobile-nav { display: flex; }
.content-area { padding: 16px; padding-bottom: 80px; }
}
.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; }
@media (max-width: 768px) {
.content-area { padding: 16px; padding-bottom: 80px; }
.card { padding: 16px; }
.task-table { display: none; }
.task-card-list-mobile { display: block; }
}
</style>
<script src="navigation-component.js"></script>
<script src="navbar-component.js"></script>
@@ -52,27 +61,30 @@
<navigation-component current-page="tasks" :is-admin="isAdmin" @navigate="redirectToPage"></navigation-component>
<div class="main-content">
<main class="content-area">
<h2 style="font-size: 24px; font-weight: 700; margin-bottom: 24px; color: #303133;">🚀 创作任务</h2>
<div class="card">
<div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;">
<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-button>
<div class="page-header">
<h2 class="page-title">🚀 创作任务</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-button>
</div>
</div>
<div v-if="loading" style="text-align: center; padding: 40px;">加载中...</div>
<div v-else-if="tasks.length === 0" style="text-align: center; padding: 40px; color: #909399;">
<div style="font-size: 48px; margin-bottom: 16px;">📋</div>
<div>暂无任务</div>
<div v-if="loading" style="text-align: center; padding: 40px; color: #909399;">加载中...</div>
<div v-else-if="tasks.length === 0" style="text-align: center; padding: 60px 20px; color: #909399;">
<div style="font-size: 56px; margin-bottom: 16px;">📋</div>
<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 tasks" :key="task.task_id" class="task-card">
<div class="task-header">
<div style="display: flex; align-items: center; gap: 12px;">
<div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
<span class="task-id">#{{ task.task_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>
@@ -80,7 +92,7 @@
<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" type="info" @click="viewTaskDetail(task)">详情</el-button>
<el-button size="small" @click="viewTaskDetail(task)">详情</el-button>
</div>
</div>
<div class="task-body">
@@ -96,9 +108,7 @@
<span v-if="task.duration">耗时: {{ task.duration }}秒</span>
<span>创建人: {{ task.created_by }}</span>
</div>
<div v-if="task.error_msg" style="margin-top: 8px; padding: 8px; background: #fef0f0; border-radius: 4px; font-size: 13px; color: #f56c6c;">
错误: {{ task.error_msg }}
</div>
<div v-if="task.error_msg" class="error-box">错误: {{ task.error_msg }}</div>
</div>
</div>
</div>
@@ -135,52 +145,42 @@
const TasksApp = {
data() {
return {
currentUser: { username: '' },
isAdmin: false,
isLoggedIn: false,
tasks: [],
loading: false,
filterStatus: '',
showDetailDialog: false,
detailTask: null
currentUser: { username: '' }, isAdmin: false, isLoggedIn: false,
tasks: [], loading: false, filterStatus: '',
showDetailDialog: false, detailTask: null
}
},
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 = localStorage.getItem('authToken');
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();
})
.then(data => { this.currentUser = data.user; this.isAdmin = data.user.role === 'admin'; this.isLoggedIn = true; this.loadTasks(); })
.catch(() => { localStorage.removeItem('authToken'); localStorage.removeItem('userRole'); localStorage.removeItem('currentUser'); window.location.href = '/login.html'; });
},
getStatusLabel(status) {
const map = { 'pending': '等待中', 'running': '进行中', 'completed': '已完成', 'failed': '失败', 'cancelled': '已取消' };
return map[status] || status;
},
getStageLabel(stage) {
const map = { 'creator': '创作', 'optimize': '优化', 'review': '审查', 'publish': '发布' };
return map[stage] || stage;
},
getStatusLabel(status) { return { 'pending': '等待中', 'running': '进行中', 'completed': '已完成', 'failed': '失败', 'cancelled': '已取消' }[status] || status; },
getStageLabel(stage) { return { 'creator': '创作', 'optimize': '优化', 'review': '审查', 'publish': '发布' }[stage] || stage; },
formatDate(dateStr) {
if (!dateStr) return '-';
return new Date(dateStr).toLocaleString('zh-CN');
try { return new Date(dateStr).toLocaleString('zh-CN'); } catch (e) { return dateStr; }
},
async loadTasks() {
this.loading = true;
try {
const token = localStorage.getItem('authToken');
let url = '/api/tasks?limit=50';
if (this.filterStatus) url += '&status=' + this.filterStatus;
const res = await fetch(url, { headers: { 'Authorization': 'Bearer ' + token } });
if (res.ok) this.tasks = await res.json();
this.tasks = await this.api(url) || [];
} catch (e) { console.error(e); }
finally { this.loading = false; }
},
@@ -188,18 +188,21 @@ const TasksApp = {
async cancelTask(taskId) {
try {
await this.$confirm('确定取消该任务？', '提示', { type: 'warning' });
const token = localStorage.getItem('authToken');
const res = await fetch('/api/tasks/' + taskId, { method: 'DELETE', headers: { 'Authorization': 'Bearer ' + token } });
if (res.ok) { this.$message.success('任务已取消'); this.loadTasks(); }
await this.api('/api/tasks/' + taskId, { method: 'DELETE' });
this.$message.success('任务已取消');
this.loadTasks();
} catch (e) { if (e !== 'cancel') this.$message.error(e.message || '操作失败'); }
},
retryTask(task) {
this.$message.info('重试功能开发中...');
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();
}
mounted() { this.checkAuth(); }
};
const app = Vue.createApp(TasksApp);
app.use(ElementPlus);