feat: 优化任务页面 UI 展示
This commit is contained in:
meijiali
+116
-14
@@ -1,16 +1,63 @@
|
||||
body {
|
||||
background: #f5f7fb;
|
||||
color: #172033;
|
||||
background:
|
||||
linear-gradient(180deg, #f4f7fb 0%, #eef3f8 42%, #f8fafc 100%);
|
||||
color: #182235;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app-navbar {
|
||||
background: rgba(255, 255, 255, 0.94) !important;
|
||||
border-bottom: 1px solid #dfe7f1;
|
||||
box-shadow: 0 10px 30px rgba(19, 34, 56, 0.04);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: #102033;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #526173;
|
||||
}
|
||||
|
||||
.tool-card,
|
||||
.card {
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dfe5ef;
|
||||
box-shadow: 0 10px 28px rgba(31, 42, 68, 0.06);
|
||||
border: 1px solid #dbe4ef;
|
||||
box-shadow: 0 16px 42px rgba(31, 42, 68, 0.07);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: #fff !important;
|
||||
.card-header,
|
||||
.section-heading {
|
||||
background: linear-gradient(180deg, #ffffff, #f8fafc);
|
||||
border-bottom: 1px solid #e4ebf3;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.section-heading h2,
|
||||
.page-heading h1 {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-kicker,
|
||||
.eyebrow {
|
||||
color: #0e766e;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
margin: 0 0 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hero-band {
|
||||
@@ -20,7 +67,9 @@ body {
|
||||
url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1600&q=80");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
border: 1px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 24px 60px rgba(15, 36, 62, 0.18);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -52,20 +101,67 @@ body {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: #71d4c7;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
text-transform: uppercase;
|
||||
.page-heading {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.metric-box {
|
||||
background: #f8fafc;
|
||||
background: linear-gradient(180deg, #f9fbfd, #f3f7fb);
|
||||
border: 1px solid #e3e9f2;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
padding: 14px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.metric-box strong {
|
||||
color: #132033;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.app-table thead th {
|
||||
background: #f8fafc;
|
||||
color: #536174;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-table tbody tr {
|
||||
border-color: #e8eef5;
|
||||
}
|
||||
|
||||
.app-table tbody tr:hover {
|
||||
background: #f7fbff;
|
||||
}
|
||||
|
||||
.task-number {
|
||||
align-items: center;
|
||||
background: #e7f0ff;
|
||||
border: 1px solid #cfe0ff;
|
||||
border-radius: 999px;
|
||||
color: #0b5ed7;
|
||||
display: inline-flex;
|
||||
font-weight: 700;
|
||||
height: 32px;
|
||||
justify-content: center;
|
||||
min-width: 32px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.task-overview {
|
||||
border-top: 3px solid #0d6efd;
|
||||
}
|
||||
|
||||
.hotspot-item {
|
||||
border-color: #e3eaf2;
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.status-panel {
|
||||
@@ -98,4 +194,10 @@ body {
|
||||
.hero-copy h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.section-heading,
|
||||
.page-heading {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,9 +10,9 @@
|
||||
<script src="/static/app.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
|
||||
<nav class="navbar navbar-expand-lg app-navbar">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/">热榜评论分析工具</a>
|
||||
<a class="navbar-brand fw-semibold" href="/">热榜评论雷达</a>
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link" href="/">任务列表</a>
|
||||
</div>
|
||||
|
||||
@@ -10,12 +10,18 @@
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-light" href="#create-task">创建新任务</a>
|
||||
<a class="btn btn-outline-light" href="#task-history">查看 Demo 数据</a>
|
||||
<a class="btn btn-outline-light" href="#task-history">查看任务</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card mb-4" id="create-task">
|
||||
<div class="card-header">创建抓取任务</div>
|
||||
<section class="tool-card mb-4" id="create-task">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="section-kicker">采集配置</p>
|
||||
<h2>创建抓取任务</h2>
|
||||
</div>
|
||||
<span class="text-muted small">默认规模 5 × 5 × 50</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="form-error" class="alert alert-danger d-none" role="alert"></div>
|
||||
<form id="task-form" onsubmit="submitTask(event)">
|
||||
@@ -50,13 +56,16 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card" id="task-history">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<span>最近任务与 Demo 数据</span>
|
||||
<button class="btn btn-outline-secondary btn-sm" onclick="window.location.href='/'">手动刷新</button>
|
||||
<section class="tool-card" id="task-history">
|
||||
<div class="section-heading">
|
||||
<div>
|
||||
<p class="section-kicker">任务历史</p>
|
||||
<h2>最近任务与 Demo 数据</h2>
|
||||
</div>
|
||||
{% if has_running_tasks %}<span class="badge text-bg-warning">自动更新中</span>{% endif %}
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
<table class="table app-table align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>任务 ID</th>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
{% set ai_percent = rate_percent(task.analysis_success_rate) %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ task.display_id or loop.index }}</strong>
|
||||
<span class="task-number">{{ task.display_id or loop.index }}</span>
|
||||
{% if task.is_demo %}
|
||||
<br><span class="badge text-bg-info">Demo 数据</span>
|
||||
{% endif %}
|
||||
@@ -36,7 +36,7 @@
|
||||
<br><small class="text-danger">{{ task.error_summary }}</small>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td><a class="btn btn-sm btn-outline-primary" href="/tasks/{{ task.id }}">查看</a></td>
|
||||
<td><a class="btn btn-sm btn-primary" href="/tasks/{{ task.id }}">查看</a></td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
|
||||
@@ -7,20 +7,22 @@
|
||||
</ol></nav>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h1 class="h3 mb-0">任务 {{ task.display_id }}</h1>
|
||||
<button class="btn btn-outline-secondary btn-sm" onclick="window.location.reload()">手动刷新</button>
|
||||
</div>
|
||||
<section class="card mb-4" {% if task.status == "running" %}data-task-id="{{ task.id }}" data-auto-poll="true"{% endif %}><div class="card-body">
|
||||
<div class="page-heading mb-3">
|
||||
<div>
|
||||
<p class="section-kicker">任务详情</p>
|
||||
<h1>任务 {{ task.display_id }}</h1>
|
||||
</div>
|
||||
{% set label, cls = status_badge_config(task.status) %}
|
||||
<span class="badge {{ cls }}">{{ label }}</span>
|
||||
</div>
|
||||
<section class="tool-card task-overview mb-4" {% if task.status == "running" %}data-task-id="{{ task.id }}" data-auto-poll="true"{% endif %}><div class="card-body">
|
||||
{% set percent = progress_percent(task.processed_items_count, task.total_items_count) %}
|
||||
{% set ai_percent = rate_percent(task.analysis_success_rate) %}
|
||||
{% set target_comments = task.hotspot_limit * task.item_limit_per_hotspot * task.comment_limit_per_item %}
|
||||
<div class="d-flex flex-wrap justify-content-between gap-3 mb-3">
|
||||
<p class="mb-0">平台：{{ task.platform | platform_label }} <span class="badge {{ cls }}">{{ label }}</span>{% if task.is_demo %}<span class="badge text-bg-info ms-1">Demo 数据</span>{% endif %}</p>
|
||||
<p class="mb-0 text-muted">阶段：{{ task.current_stage_label or "等待启动" }}</p>
|
||||
<p class="mb-0">平台：{{ task.platform | platform_label }}{% if task.is_demo %}<span class="badge text-bg-info ms-2">Demo 数据</span>{% endif %}</p>
|
||||
<p class="mb-0 text-muted">创建时间 {{ task.created_at_label }} · 阶段 {{ task.current_stage_label or "等待启动" }}</p>
|
||||
</div>
|
||||
<div class="small text-muted mb-3">创建时间 {{ task.created_at_label }} · 完整 ID {{ task.id }}</div>
|
||||
<div class="mb-3">
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<span>已处理 {{ task.processed_items_count }} / 共 {{ task.total_items_count }} 条内容</span>
|
||||
@@ -80,7 +82,7 @@
|
||||
{% endif %}
|
||||
<div class="accordion" id="hotspot-list">
|
||||
{% for hotspot in hotspots %}
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-item hotspot-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button {% if not loop.first %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#hotspot-{{ hotspot.id }}">
|
||||
热点 {{ hotspot.rank }}：{{ hotspot.title }}
|
||||
|
||||
Reference in New Issue
Block a user