feat: 按 Pencil 设计重做页面 UI
This commit is contained in:
meijiali
+662
-1
@@ -587,7 +587,633 @@ a {
|
||||
border-color: #fecaca;
|
||||
}
|
||||
|
||||
.control-hero,
|
||||
.task-detail-hero,
|
||||
.report-reading-hero {
|
||||
align-items: stretch;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
display: grid;
|
||||
gap: 28px;
|
||||
grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
|
||||
margin-bottom: 22px;
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.task-detail-hero,
|
||||
.report-reading-hero {
|
||||
grid-template-columns: minmax(0, 1fr) 360px;
|
||||
}
|
||||
|
||||
.control-hero-copy,
|
||||
.task-detail-copy,
|
||||
.report-title-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.control-hero h1,
|
||||
.task-detail-hero h1,
|
||||
.report-reading-hero h1 {
|
||||
color: var(--foreground);
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.15;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.control-hero p:not(.section-kicker),
|
||||
.task-detail-hero p:not(.section-kicker),
|
||||
.report-reading-hero p:not(.section-kicker) {
|
||||
color: #475569;
|
||||
font-size: 15px;
|
||||
line-height: 1.55;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.control-subtitle {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin: -4px 0 10px;
|
||||
}
|
||||
|
||||
.quick-launch-panel,
|
||||
.task-history-panel,
|
||||
.sidepanel-card,
|
||||
.task-state-card,
|
||||
.sentiment-summary-card,
|
||||
.insight-card,
|
||||
.content-performance-card,
|
||||
.sentiment-sidepanel,
|
||||
.keyword-sidepanel,
|
||||
.report-data-note {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||||
}
|
||||
|
||||
.quick-launch-panel {
|
||||
background: var(--background);
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.panel-title-row {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.panel-title-row h2,
|
||||
.sidepanel-card h2,
|
||||
.task-state-card strong,
|
||||
.sentiment-summary-card strong,
|
||||
.insight-card h2,
|
||||
.representative-comments h2,
|
||||
.content-performance-card h2,
|
||||
.sentiment-sidepanel h2,
|
||||
.keyword-sidepanel h2,
|
||||
.report-data-note h2 {
|
||||
color: var(--foreground);
|
||||
font-size: 19px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.25;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.soft-badge {
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
color: var(--foreground);
|
||||
display: inline-flex;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
padding: 7px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.soft-badge-success {
|
||||
background: #f0fdfa;
|
||||
border-color: #ccfbf1;
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
.default-scale-grid,
|
||||
.overview-grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.default-scale-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.scale-tile,
|
||||
.overview-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 9px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.scale-tile strong,
|
||||
.overview-card strong {
|
||||
color: var(--foreground);
|
||||
display: block;
|
||||
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.scale-tile span,
|
||||
.overview-card span,
|
||||
.overview-card small {
|
||||
color: var(--muted-foreground);
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.quick-form-grid {
|
||||
align-items: end;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: minmax(150px, 1.2fr) repeat(3, minmax(100px, 0.8fr)) minmax(150px, 0.9fr);
|
||||
}
|
||||
|
||||
.quick-start-btn {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
.scale-hint {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
.overview-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.dashboard-workspace,
|
||||
.detail-workspace,
|
||||
.report-reading-layout {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
|
||||
}
|
||||
|
||||
.task-history-panel {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.task-card-list,
|
||||
.hotspot-card-list,
|
||||
.report-main-column,
|
||||
.report-side-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.task-card,
|
||||
.hotspot-result-card,
|
||||
.quote-card {
|
||||
align-items: center;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.task-card-number {
|
||||
display: flex;
|
||||
flex: 0 0 90px;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.task-card-number strong,
|
||||
.hotspot-rank {
|
||||
color: var(--foreground);
|
||||
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.task-card-number span,
|
||||
.task-card-title-row p,
|
||||
.task-card-meta,
|
||||
.task-card-progress,
|
||||
.hotspot-chip-row,
|
||||
.stat-line span,
|
||||
.sidepanel-card p,
|
||||
.report-data-note p {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.task-card-body {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.task-card-title-row,
|
||||
.progress-label-row,
|
||||
.stat-line {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.task-card-title-row h3 {
|
||||
color: var(--foreground);
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
margin: 0 0 3px;
|
||||
}
|
||||
|
||||
.task-card-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.task-card-error {
|
||||
color: #991b1b;
|
||||
font-size: 13px;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.task-card-action {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.task-status-sidepanel,
|
||||
.detail-sidepanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.sidepanel-card,
|
||||
.task-state-card,
|
||||
.sentiment-summary-card,
|
||||
.insight-card,
|
||||
.content-performance-card,
|
||||
.sentiment-sidepanel,
|
||||
.keyword-sidepanel,
|
||||
.report-data-note {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.sidepanel-card-blue,
|
||||
.report-data-note {
|
||||
background: #eff6ff;
|
||||
border-color: #dbeafe;
|
||||
}
|
||||
|
||||
.sidepanel-card-danger {
|
||||
background: #fff1f2;
|
||||
border-color: #ffe4e6;
|
||||
}
|
||||
|
||||
.sidepanel-icon {
|
||||
align-items: center;
|
||||
background: #eff6ff;
|
||||
border-radius: 8px;
|
||||
color: #2563eb;
|
||||
display: inline-flex;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
height: 34px;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.stage-list {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.stage-list span {
|
||||
align-items: center;
|
||||
color: #475569;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stage-dot {
|
||||
background: var(--border);
|
||||
border-radius: 999px;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.stage-dot-success {
|
||||
background: #0f766e;
|
||||
}
|
||||
|
||||
.stage-dot-active {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.task-state-card,
|
||||
.sentiment-summary-card {
|
||||
background: #f0fdfa;
|
||||
border-color: #ccfbf1;
|
||||
}
|
||||
|
||||
.task-state-card span,
|
||||
.sentiment-summary-card span {
|
||||
color: #0f766e;
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.task-state-card strong,
|
||||
.sentiment-summary-card strong {
|
||||
display: block;
|
||||
font-size: 34px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.execution-timeline {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.execution-step {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
min-width: 0;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.execution-step-icon {
|
||||
align-items: center;
|
||||
background: var(--secondary);
|
||||
border-radius: 999px;
|
||||
color: var(--muted-foreground);
|
||||
display: inline-flex;
|
||||
font-weight: 800;
|
||||
height: 28px;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.execution-step-done .execution-step-icon {
|
||||
background: #0f766e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.execution-step-active .execution-step-icon {
|
||||
background: #2563eb;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.execution-step strong,
|
||||
.execution-step small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.execution-step strong {
|
||||
color: var(--foreground);
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.execution-step small {
|
||||
color: var(--muted-foreground);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.hotspot-result-card {
|
||||
min-height: 116px;
|
||||
}
|
||||
|
||||
.hotspot-rank {
|
||||
align-items: center;
|
||||
background: #eff6ff;
|
||||
border-radius: 10px;
|
||||
color: #2563eb;
|
||||
display: flex;
|
||||
flex: 0 0 56px;
|
||||
height: 56px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hotspot-result-body {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.hotspot-result-body h3 {
|
||||
color: var(--foreground);
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
line-height: 1.35;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.hotspot-chip-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.hotspot-chip-row span,
|
||||
.keyword-cloud span,
|
||||
.ghost-actions span {
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
color: #475569;
|
||||
display: inline-flex;
|
||||
font-size: 12px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.report-reading-layout {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.insight-list {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.insight-list p {
|
||||
color: #475569;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
gap: 10px;
|
||||
line-height: 1.55;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.insight-list p span {
|
||||
background: #2563eb;
|
||||
border-radius: 999px;
|
||||
flex: 0 0 8px;
|
||||
height: 8px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.representative-comments {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.representative-comments .panel-title-row {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.quote-card {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.quote-card p {
|
||||
color: var(--foreground);
|
||||
flex: 1 1 auto;
|
||||
font-size: 14px;
|
||||
line-height: 1.45;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.quote-card small {
|
||||
color: var(--muted-foreground);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.content-performance-card {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.performance-row {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.performance-row strong,
|
||||
.performance-row span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.performance-row strong {
|
||||
color: var(--foreground);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.performance-row span {
|
||||
color: var(--muted-foreground);
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.performance-row em {
|
||||
color: #2563eb;
|
||||
font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sentiment-sidepanel,
|
||||
.keyword-sidepanel,
|
||||
.report-data-note {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.sentiment-row {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.sentiment-positive {
|
||||
background-color: #0f766e !important;
|
||||
}
|
||||
|
||||
.sentiment-neutral {
|
||||
background-color: #2563eb !important;
|
||||
}
|
||||
|
||||
.sentiment-negative {
|
||||
background-color: #e11d48 !important;
|
||||
}
|
||||
|
||||
.keyword-cloud,
|
||||
.ghost-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.keyword-cloud span,
|
||||
.ghost-actions span {
|
||||
background: #eff6ff;
|
||||
border-color: #dbeafe;
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.control-hero,
|
||||
.task-detail-hero,
|
||||
.report-reading-hero,
|
||||
.dashboard-workspace,
|
||||
.detail-workspace,
|
||||
.report-reading-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quick-form-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.quick-start-btn {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.overview-grid,
|
||||
.execution-timeline {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.hero-shell {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
@@ -642,11 +1268,46 @@ a {
|
||||
|
||||
.section-heading,
|
||||
.page-heading,
|
||||
.content-item-row {
|
||||
.content-item-row,
|
||||
.panel-title-row,
|
||||
.task-card,
|
||||
.hotspot-result-card,
|
||||
.quote-card,
|
||||
.performance-row {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.control-hero,
|
||||
.task-detail-hero,
|
||||
.report-reading-hero {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.control-hero h1,
|
||||
.task-detail-hero h1,
|
||||
.report-reading-hero h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.default-scale-grid,
|
||||
.overview-grid,
|
||||
.execution-timeline,
|
||||
.quick-form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.task-card-number,
|
||||
.task-card-action,
|
||||
.hotspot-rank {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.task-card-action,
|
||||
.hotspot-result-card .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@@ -8,14 +8,22 @@
|
||||
</ol></nav>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<p class="section-kicker">热点报告</p>
|
||||
<h1>{{ hotspot.title }} 汇总报告</h1>
|
||||
</div>
|
||||
<span class="badge text-bg-light border">热点 #{{ hotspot.rank }}</span>
|
||||
</div>
|
||||
{% if report %}
|
||||
{% set metrics = report.metrics_json | from_json_object %}
|
||||
{% set sentiment = metrics.get("sentiment", {}) %}
|
||||
{% set positive_pct = sentiment.get("positive", {}).get("pct", 0) %}
|
||||
<section class="report-reading-hero">
|
||||
<div class="report-title-block">
|
||||
<p class="section-kicker">HOTSPOT REPORT</p>
|
||||
<h1>{{ hotspot.title }}</h1>
|
||||
<p>{{ report.summary or "报告总结生成失败，请查看下方结构化统计。" }}</p>
|
||||
</div>
|
||||
<aside class="sentiment-summary-card">
|
||||
<span>整体情绪</span>
|
||||
<strong>正向 {{ positive_pct }}%</strong>
|
||||
<p>基于 {{ metrics.get("sample_count", 0) }} 条评论样本生成，结论来自预生成报告数据。</p>
|
||||
</aside>
|
||||
</section>
|
||||
{% include "partials/report_panel.html" %}
|
||||
{% else %}
|
||||
<div class="empty-state text-muted py-5">
|
||||
|
||||
+79
-58
@@ -1,102 +1,123 @@
|
||||
{% extends "base.html" %}
|
||||
{% set has_running_tasks = tasks | selectattr("status", "equalto", "running") | list | length > 0 %}
|
||||
{% block title %}热榜评论雷达 - 热榜评论分析工具{% endblock %}
|
||||
{% block breadcrumbs %}{% endblock %}
|
||||
{% block content %}
|
||||
<section class="hero-band hero-band-inverse">
|
||||
<div class="hero-shell">
|
||||
<div class="hero-copy">
|
||||
<p class="eyebrow">Hot Comment Radar</p>
|
||||
<h1>抓取热点评论，快速看清讨论情绪</h1>
|
||||
<p>面向内部演示和联调的轻量工具：选择平台、控制抓取规模、查看任务状态，并进入报告和评论明细。</p>
|
||||
<section class="control-hero">
|
||||
<div class="control-hero-copy">
|
||||
<p class="section-kicker">COMMENT INTELLIGENCE</p>
|
||||
<p class="control-subtitle">内容平台评论分析控制台</p>
|
||||
<h1>用默认配置快速启动一次评论分析</h1>
|
||||
<p>选择平台后直接开始抓取，系统会按 5 个热点、25 条内容、最多 1,250 条评论完成采集、AI 分析和报告生成。</p>
|
||||
</div>
|
||||
<div class="hero-metrics hero-data-grid" aria-label="默认任务规模">
|
||||
<div class="hero-metric">
|
||||
<section class="quick-launch-panel" id="create-task" aria-label="快速创建抓取任务">
|
||||
<div class="panel-title-row">
|
||||
<div>
|
||||
<p class="section-kicker">采集配置</p>
|
||||
<h2>默认抓取方案</h2>
|
||||
</div>
|
||||
<span class="soft-badge soft-badge-success">推荐</span>
|
||||
</div>
|
||||
<div id="form-error" class="alert alert-danger d-none" role="alert"></div>
|
||||
<form id="task-form" onsubmit="submitTask(event)">
|
||||
<div class="default-scale-grid" aria-label="默认任务规模">
|
||||
<div class="scale-tile">
|
||||
<strong>5</strong>
|
||||
<span>默认热点</span>
|
||||
<span>热点</span>
|
||||
</div>
|
||||
<div class="hero-metric">
|
||||
<div class="scale-tile">
|
||||
<strong>25</strong>
|
||||
<span>默认内容</span>
|
||||
<span>内容</span>
|
||||
</div>
|
||||
<div class="hero-metric">
|
||||
<strong>1,250</strong>
|
||||
<div class="scale-tile">
|
||||
<strong id="scale-calc">1250</strong>
|
||||
<span>评论上限</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="task-workspace">
|
||||
<section class="tool-card hard-panel" id="create-task">
|
||||
<div class="section-heading panel-heading">
|
||||
<div class="quick-form-grid">
|
||||
<div>
|
||||
<p class="section-kicker">采集配置</p>
|
||||
<h2>创建抓取任务</h2>
|
||||
</div>
|
||||
<span class="badge text-bg-light border">默认规模 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)">
|
||||
<div class="row g-3 align-items-end">
|
||||
<div class="col-md-3">
|
||||
<label class="form-label" for="platform">平台</label>
|
||||
<select class="form-select" id="platform" name="platform">
|
||||
<option value="xiaohongshu">小红书</option>
|
||||
<option value="douyin">抖音</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div>
|
||||
<label class="form-label" for="hotspot_limit">热点数</label>
|
||||
<input class="form-control scale-input" id="hotspot_limit" name="hotspot_limit" type="number" min="1" max="10" value="5">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div>
|
||||
<label class="form-label" for="item_limit_per_hotspot">每热点内容</label>
|
||||
<input class="form-control scale-input" id="item_limit_per_hotspot" name="item_limit_per_hotspot" type="number" min="1" max="10" value="5">
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<div>
|
||||
<label class="form-label" for="comment_limit_per_item">每内容评论</label>
|
||||
<input class="form-control scale-input" id="comment_limit_per_item" name="comment_limit_per_item" type="number" min="10" max="100" value="50">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<button class="btn btn-primary w-100" id="submit-btn" type="submit">开始抓取</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scale-hint-panel" id="scale-hint">
|
||||
预计最多抓取：<strong id="scale-calc">1250</strong> 条评论（实际数量可能受平台返回数量、去重、失败、限流影响）
|
||||
<button class="btn btn-primary quick-start-btn" id="submit-btn" type="submit">开始抓取</button>
|
||||
</div>
|
||||
<p class="scale-hint" id="scale-hint">实际数量可能受平台返回数量、去重、失败、限流影响。</p>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="overview-grid" aria-label="任务指标概览">
|
||||
<div class="overview-card">
|
||||
<span>最近任务</span>
|
||||
<strong>{{ tasks | length }}</strong>
|
||||
<small>{% if has_running_tasks %}1 个任务运行中{% else %}暂无运行中任务{% endif %}</small>
|
||||
</div>
|
||||
<div class="overview-card">
|
||||
<span>默认规模</span>
|
||||
<strong>1,250</strong>
|
||||
<small>5 热点 / 25 内容 / 评论上限</small>
|
||||
</div>
|
||||
<div class="overview-card">
|
||||
<span>平台范围</span>
|
||||
<strong>2</strong>
|
||||
<small>小红书与抖音</small>
|
||||
</div>
|
||||
<div class="overview-card">
|
||||
<span>任务策略</span>
|
||||
<strong>1</strong>
|
||||
<small>同一时间只运行一个任务</small>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tool-card hard-panel" id="task-history">
|
||||
<div class="section-heading panel-heading">
|
||||
<div class="dashboard-workspace">
|
||||
<section class="task-history-panel" id="task-history">
|
||||
<div class="panel-title-row">
|
||||
<div>
|
||||
<p class="section-kicker">任务历史</p>
|
||||
<h2>最近任务</h2>
|
||||
</div>
|
||||
<span class="panel-note">{% if has_running_tasks %}自动更新中{% else %}运行中任务自动刷新{% endif %}</span>
|
||||
<span class="panel-note">{% if has_running_tasks %}自动更新中{% else %}卡片化展示，减少表格压迫感 · 运行中任务自动刷新{% endif %}</span>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<table class="table app-table data-grid-table align-middle mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>任务 ID</th>
|
||||
<th>平台</th>
|
||||
<th>创建时间</th>
|
||||
<th>配置规模</th>
|
||||
<th>进度</th>
|
||||
<th>状态</th>
|
||||
<th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="task-table-body" {% if has_running_tasks %}data-task-list-auto-poll="true"{% endif %}>
|
||||
{% include "partials/task_rows.html" %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="task-card-list" {% if has_running_tasks %}data-task-list-auto-poll="true"{% endif %}>
|
||||
{% include "partials/task_cards.html" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="task-status-sidepanel">
|
||||
<section class="sidepanel-card">
|
||||
<div class="sidepanel-icon">↻</div>
|
||||
<h2>运行中任务</h2>
|
||||
<p>当前最多只允许一个任务运行，避免外部 API 限流和结果混淆。</p>
|
||||
<div class="stage-list">
|
||||
<span><i class="stage-dot stage-dot-success"></i>热点抓取</span>
|
||||
<span><i class="stage-dot stage-dot-success"></i>内容采集</span>
|
||||
<span><i class="stage-dot stage-dot-active"></i>评论分页</span>
|
||||
<span><i class="stage-dot"></i>AI 分析</span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="sidepanel-card sidepanel-card-blue">
|
||||
<div class="sidepanel-icon">✦</div>
|
||||
<h2>看板重点回到动作</h2>
|
||||
<p>首页围绕“开始抓取、看状态、进详情”组织信息，弱化表格压迫感。</p>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{% if has_running_tasks %}
|
||||
<script>document.addEventListener("DOMContentLoaded", () => pollTaskListStatus());</script>
|
||||
{% endif %}
|
||||
|
||||
@@ -4,88 +4,114 @@
|
||||
{% set top_labels = metrics.get("top_labels", []) %}
|
||||
{% set sample_count = metrics.get("sample_count", 0) %}
|
||||
{% set item_count = metrics.get("item_count") %}
|
||||
{% set positive = sentiment.get("positive", {"count": 0, "pct": 0}) %}
|
||||
{% set neutral = sentiment.get("neutral", {"count": 0, "pct": 0}) %}
|
||||
{% set negative = sentiment.get("negative", {"count": 0, "pct": 0}) %}
|
||||
|
||||
<section class="card mb-4">
|
||||
<div class="card-body">
|
||||
{% if task.analysis_status == "insufficient" %}
|
||||
<div class="alert alert-warning">当前有效评论样本不足，AI 总结暂不可用。建议增加评论抓取数量后重新分析。</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="stat-card">
|
||||
<div class="text-muted small">评论样本</div>
|
||||
<div class="h4 mb-0">{{ sample_count }}</div>
|
||||
<div class="report-reading-layout">
|
||||
<section class="report-main-column">
|
||||
<section class="insight-card">
|
||||
<h2>核心结论</h2>
|
||||
<div class="insight-list">
|
||||
<p><span></span>{{ report.summary or "总结生成失败，请优先查看情绪分布、Top 标签和典型评论。" }}</p>
|
||||
<p><span></span>评论样本 {{ sample_count }} 条{% if item_count is not none %}，关联内容 {{ item_count }} 条{% endif %}，AI 成功率 {{ rate_percent(task.analysis_success_rate) }}%。</p>
|
||||
{% if top_labels %}
|
||||
<p><span></span>当前高频讨论方向集中在{% for label in top_labels[:3] %}{{ "、" if not loop.first }}{{ label.get("name") }}{% endfor %}。</p>
|
||||
{% else %}
|
||||
<p><span></span>暂无高频标签数据，建议结合评论明细人工复核。</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="representative-comments">
|
||||
<div class="panel-title-row">
|
||||
<div>
|
||||
<p class="section-kicker">COMMENTS</p>
|
||||
<h2>代表评论 · 典型评论</h2>
|
||||
</div>
|
||||
<span class="panel-note">按情绪和点赞综合筛选</span>
|
||||
</div>
|
||||
{% for key in ["positive", "neutral", "negative"] %}
|
||||
<article class="quote-card">
|
||||
<span class="soft-badge">{{ sentiment_label(key) }}</span>
|
||||
{% for comment in typical.get(key, []) %}
|
||||
<p>{{ comment.get("content") }}</p>
|
||||
<small>点赞 {{ comment.get("like_count", 0) }}</small>
|
||||
{% else %}
|
||||
<p>暂无{{ sentiment_label(key) }}代表评论</p>
|
||||
{% endfor %}
|
||||
</article>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
<section class="content-performance-card">
|
||||
<h2>内容表现</h2>
|
||||
<div class="performance-row">
|
||||
<div>
|
||||
<strong>评论样本</strong>
|
||||
<span>用于本次报告统计的有效评论</span>
|
||||
</div>
|
||||
<em>{{ sample_count }} 条</em>
|
||||
</div>
|
||||
{% if item_count is not none %}
|
||||
<div class="col-md-3">
|
||||
<div class="stat-card">
|
||||
<div class="text-muted small">关联内容</div>
|
||||
<div class="h4 mb-0">{{ item_count }}</div>
|
||||
<div class="performance-row">
|
||||
<div>
|
||||
<strong>关联内容</strong>
|
||||
<span>参与热点级聚合的内容条目</span>
|
||||
</div>
|
||||
<em>{{ item_count }} 条</em>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-md-3">
|
||||
<div class="stat-card">
|
||||
<div class="text-muted small">AI 成功率</div>
|
||||
<div class="h4 mb-0">{{ rate_percent(task.analysis_success_rate) }}%</div>
|
||||
</div>
|
||||
<div class="performance-row">
|
||||
<div>
|
||||
<strong>高频标签</strong>
|
||||
<span>用于定位主要讨论方向</span>
|
||||
</div>
|
||||
<em>{{ top_labels | length }} 个</em>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<div class="report-summary mb-4">
|
||||
<div class="fw-semibold mb-2">AI 总结</div>
|
||||
<p class="mb-0">{{ report.summary or "总结生成失败，请查看上方统计数据。" }}</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="h5">情绪分布</h2>
|
||||
{% for key, bar_class in [("positive", "bg-success"), ("neutral", "bg-secondary"), ("negative", "bg-danger"), ("unknown", "bg-warning")] %}
|
||||
{% set item = sentiment.get(key, {"count": 0, "pct": 0}) %}
|
||||
<div class="d-flex justify-content-between mb-1">
|
||||
<aside class="report-side-column">
|
||||
<section class="sentiment-sidepanel">
|
||||
<h2>情绪分布</h2>
|
||||
{% for key, item, class_name in [("positive", positive, "sentiment-positive"), ("neutral", neutral, "sentiment-neutral"), ("negative", negative, "sentiment-negative")] %}
|
||||
<div class="sentiment-row">
|
||||
<div class="progress-label-row">
|
||||
<span>{{ sentiment_label(key) }}</span>
|
||||
<span class="text-muted">{{ item.get("count", 0) }} 条（{{ item.get("pct", 0) }}%）</span>
|
||||
<span>{{ item.get("count", 0) }} 条（{{ item.get("pct", 0) }}%）</span>
|
||||
</div>
|
||||
<div class="progress report-progress" role="progressbar" aria-label="{{ sentiment_label(key) }}情绪占比" aria-valuenow="{{ item.get("pct", 0) }}" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar {{ class_name }}" style="width: {{ item.get("pct", 0) }}%"></div>
|
||||
</div>
|
||||
<div class="progress mb-3 report-progress" role="progressbar" aria-label="{{ sentiment_label(key) }}情绪占比" aria-valuenow="{{ item.get("pct", 0) }}" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar {{ bar_class }}" style="width: {{ item.get("pct", 0) }}%"></div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<h2 class="h5">Top 标签</h2>
|
||||
</section>
|
||||
|
||||
<section class="keyword-sidepanel">
|
||||
<h2>Top 标签 / 关键词</h2>
|
||||
{% if top_labels %}
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
<div class="keyword-cloud">
|
||||
{% for label in top_labels %}
|
||||
<span class="badge text-bg-light border">{{ label.get("name") }} ({{ label.get("count", 0) }})</span>
|
||||
<span>{{ label.get("name") }} ({{ label.get("count", 0) }})</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-muted mb-0">暂无标签数据</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card mb-4">
|
||||
<div class="card-header">典型评论</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
{% for key in ["positive", "neutral", "negative"] %}
|
||||
<div class="col-md-4">
|
||||
<h3 class="h6">{{ sentiment_label(key) }}</h3>
|
||||
{% for comment in typical.get(key, []) %}
|
||||
<div class="comment-card mb-2">
|
||||
<p class="mb-1">{{ comment.get("content") }}</p>
|
||||
<small class="text-muted">点赞 {{ comment.get("like_count", 0) }}</small>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="text-muted small mb-0">暂无{{ sentiment_label(key) }}代表评论</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<section class="report-data-note">
|
||||
<h2>同一份报告数据</h2>
|
||||
<p>页面展示、Markdown 和 CSV 导出都应读取预生成报告，避免页面和文件结果不一致。</p>
|
||||
<div class="ghost-actions" aria-label="报告数据说明">
|
||||
<span>预生成报告</span>
|
||||
<span>结构化统计</span>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
{% for task in tasks %}
|
||||
{% set status_label, status_class = status_badge_config(task.status) %}
|
||||
{% set percent = progress_percent(task.processed_items_count, task.total_items_count) %}
|
||||
{% set ai_percent = rate_percent(task.analysis_success_rate) %}
|
||||
<article class="task-card">
|
||||
<div class="task-card-number">
|
||||
<strong>{{ task.display_id or loop.index }}</strong>
|
||||
<span>{{ task.platform | platform_label }}</span>
|
||||
</div>
|
||||
<div class="task-card-body">
|
||||
<div class="task-card-title-row">
|
||||
<div>
|
||||
<h3>{{ status_label }}</h3>
|
||||
<p>{{ task.scale_label }} · {{ task.created_at_label }}</p>
|
||||
</div>
|
||||
<span class="badge {{ status_class }}">{{ status_label }}</span>
|
||||
</div>
|
||||
<div class="task-card-progress">
|
||||
<div class="progress-label-row">
|
||||
<span>已处理 {{ task.processed_items_count }} / 共 {{ task.total_items_count }} 条内容</span>
|
||||
<span>{{ percent }}%</span>
|
||||
</div>
|
||||
<div class="progress task-progress" role="progressbar" aria-label="任务进度" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar" style="width: {{ percent }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="task-card-meta">
|
||||
<span>成功 {{ task.successful_items_count }} / 失败 {{ task.failed_items_count }}</span>
|
||||
<span>评论 {{ task.comments_count or 0 }}</span>
|
||||
<span>报告 {{ task.reports_count or 0 }}</span>
|
||||
<span>AI 成功率 {{ ai_percent }}%</span>
|
||||
{% if task.analysis_status == "insufficient" %}
|
||||
<span class="text-warning">AI 样本不足</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if task.error_summary %}
|
||||
<p class="task-card-error">{{ task.error_summary }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<a class="btn btn-sm btn-outline-secondary task-card-action" href="/tasks/{{ task.id }}">查看</a>
|
||||
</article>
|
||||
{% else %}
|
||||
<div class="empty-state text-muted py-5">还没有任何任务，请在上方创建第一个任务</div>
|
||||
{% endfor %}
|
||||
@@ -7,117 +7,105 @@
|
||||
</ol></nav>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<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 align-items-start gap-3 mb-4">
|
||||
<div>
|
||||
<span class="badge text-bg-light border">{{ task.platform | platform_label }}</span>
|
||||
<span class="badge text-bg-light border ms-1">{{ task.current_stage_label or "等待启动" }}</span>
|
||||
|
||||
<section class="task-detail-hero" {% if task.status == "running" %}data-task-id="{{ task.id }}" data-auto-poll="true"{% endif %}>
|
||||
<div class="task-detail-copy">
|
||||
<p class="section-kicker">TASK DETAIL</p>
|
||||
<h1>{{ task.platform | platform_label }}热点评论采集任务 {{ task.display_id }}</h1>
|
||||
<p>创建时间 {{ task.created_at_label }}，当前阶段 {{ task.current_stage_label or "等待启动" }}。任务执行过程会隔离单条内容失败，并保留失败原因用于复查。</p>
|
||||
</div>
|
||||
<p class="mb-0 text-muted small">创建时间 {{ task.created_at_label }} · 阶段 {{ task.current_stage_label or "等待启动" }}</p>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="d-flex justify-content-between align-items-center gap-2">
|
||||
<span>已处理 {{ task.processed_items_count }} / 共 {{ task.total_items_count }} 条内容</span>
|
||||
<span class="text-muted">{{ percent }}%</span>
|
||||
</div>
|
||||
<div class="progress task-progress mt-2" role="progressbar" aria-label="任务进度" aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="progress-bar" style="width: {{ percent }}%"></div>
|
||||
</div>
|
||||
<div class="progress-summary mt-2">
|
||||
<span class="small text-muted">成功 {{ task.successful_items_count }} / 失败 {{ task.failed_items_count }}</span>
|
||||
<span class="small text-muted">AI 成功率 {{ ai_percent }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-4">
|
||||
<div class="metric-box">
|
||||
<div class="text-muted small">目标上限</div>
|
||||
<strong>{{ task.hotspot_limit }} 热点 × {{ task.item_limit_per_hotspot }} 内容 × {{ task.comment_limit_per_item }} 评论</strong>
|
||||
<div class="text-muted small">最多 {{ target_comments }} 条评论</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="metric-box">
|
||||
<div class="text-muted small">实际结果</div>
|
||||
<strong>实际评论 {{ task.comments_count or 0 }}</strong>
|
||||
<div class="text-muted small">已获取热点 {{ task.hotspots_count or 0 }} / 目标 {{ task.hotspot_limit }} · 报告 {{ task.reports_count or 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="metric-box">
|
||||
<div class="text-muted small">最近进度</div>
|
||||
<strong>{{ task.last_progress_ago_label or "暂无记录" }}</strong>
|
||||
<div class="text-muted small">运行时长 {{ task.running_duration_label or "刚刚" }} · 评论 {{ task.comments_count or 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if task.status == "running" %}
|
||||
<div class="alert alert-secondary">
|
||||
小规模通常较快，默认规模可能需要数分钟，取决于 TikHub 与 AI 响应速度。
|
||||
<aside class="task-state-card">
|
||||
<span>当前状态</span>
|
||||
<strong>{{ label }}</strong>
|
||||
<p>已处理 {{ task.processed_items_count }} / 共 {{ task.total_items_count }} 条内容 · AI 成功率 {{ ai_percent }}% · 报告 {{ task.reports_count or 0 }} 份 · 失败内容 {{ task.failed_items_count }}</p>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section class="execution-timeline" aria-label="执行阶段">
|
||||
{% for stage, desc, state in [
|
||||
("创建任务", "参数校验完成", "done"),
|
||||
("热点抓取", (task.hotspots_count or 0) ~ " 个热点入库", "done" if (task.hotspots_count or 0) > 0 or task.status == "success" else "pending"),
|
||||
("内容采集", task.processed_items_count ~ " / " ~ task.total_items_count ~ " 条内容", "done" if task.processed_items_count >= task.total_items_count and task.total_items_count > 0 else "active"),
|
||||
("评论分页", (task.comments_count or 0) ~ " 条评论", "done" if (task.comments_count or 0) > 0 else "pending"),
|
||||
("AI 分析", "成功率 " ~ ai_percent ~ "%", "done" if ai_percent >= 80 else "active"),
|
||||
("报告生成", (task.reports_count or 0) ~ " 份报告", "done" if (task.reports_count or 0) > 0 else "pending")
|
||||
] %}
|
||||
<div class="execution-step execution-step-{{ state }}">
|
||||
<span class="execution-step-icon">{% if state == "done" %}✓{% elif state == "active" %}•{% else %}○{% endif %}</span>
|
||||
<strong>{{ stage }}</strong>
|
||||
<small>{{ desc }}</small>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
{% if task.status == "running" and not hotspots %}
|
||||
<div class="empty-state text-muted py-5"><div class="spinner-border text-warning mb-3"></div><p class="mb-0">正在抓取热点数据，请稍候...</p></div>
|
||||
{% endif %}
|
||||
|
||||
<div class="detail-workspace">
|
||||
<section class="hotspot-card-list">
|
||||
<div class="panel-title-row">
|
||||
<div>
|
||||
<p class="section-kicker">执行阶段</p>
|
||||
<h2>热点结果</h2>
|
||||
</div>
|
||||
<span class="panel-note">按热度与评论完成度查看</span>
|
||||
</div>
|
||||
{% for hotspot in hotspots %}
|
||||
<article class="hotspot-result-card">
|
||||
<div class="hotspot-rank">{{ "%02d"|format(hotspot.rank or loop.index) }}</div>
|
||||
<div class="hotspot-result-body">
|
||||
<h3>热点 {{ hotspot.rank or loop.index }}：{{ hotspot.title }}</h3>
|
||||
<div class="hotspot-chip-row">
|
||||
<span>{{ hotspot.content_items | length }} 内容</span>
|
||||
<span>{{ hotspot.comments | length }} 评论</span>
|
||||
<span>{{ task.platform | platform_label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="btn btn-sm btn-primary" href="/hotspots/{{ hotspot.id }}/report">查看报告</a>
|
||||
</article>
|
||||
{% else %}
|
||||
<div class="empty-state text-muted py-5">暂无热点结果</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
<aside class="detail-sidepanel">
|
||||
<section class="sidepanel-card">
|
||||
<h2>采集规模</h2>
|
||||
<div class="stat-line"><span>目标上限</span><strong>{{ task.hotspot_limit }} 热点 × {{ task.item_limit_per_hotspot }} 内容 × {{ task.comment_limit_per_item }} 评论</strong></div>
|
||||
<div class="stat-line"><span>实际结果</span><strong>实际评论 {{ task.comments_count or 0 }}</strong></div>
|
||||
<div class="stat-line"><span>热点完成度</span><strong>已获取热点 {{ task.hotspots_count or 0 }} / 目标 {{ task.hotspot_limit }}</strong></div>
|
||||
<div class="stat-line"><span>热点数</span><strong>{{ task.hotspot_limit }}</strong></div>
|
||||
<div class="stat-line"><span>内容数</span><strong>{{ task.total_items_count }}</strong></div>
|
||||
<div class="stat-line"><span>评论数</span><strong>{{ task.comments_count or 0 }}</strong></div>
|
||||
<div class="stat-line"><span>报告数</span><strong>{{ task.reports_count or 0 }}</strong></div>
|
||||
<div class="stat-line"><span>运行时长</span><strong>{{ task.running_duration_label or "刚刚" }}</strong></div>
|
||||
<div class="stat-line"><span>最近进度</span><strong>{{ task.last_progress_ago_label or "暂无记录" }}</strong></div>
|
||||
</section>
|
||||
<section class="sidepanel-card sidepanel-card-danger">
|
||||
<h2>错误会被隔离</h2>
|
||||
<p>单条内容或评论失败不会让整个任务崩溃，失败原因会保留在对应结果和报告数据中。</p>
|
||||
{% if task.error_summary %}<p class="task-card-error">{{ task.error_summary }}</p>{% endif %}
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
{% if task.is_progress_stale %}
|
||||
<div class="alert alert-warning">
|
||||
<div class="alert alert-warning mt-3">
|
||||
超过 {{ task.stale_threshold_minutes }} 分钟没有进度更新，可能仍在等待外部接口或 AI 响应；如果长时间不恢复，请刷新状态或查看后端日志。
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if task.status == "success" and (task.comments_count or 0) < target_comments %}
|
||||
<div class="alert alert-info">少于理论上限通常是内容本身评论不足或平台返回不足，不直接代表任务失败。若失败内容数大于 0，请结合失败原因判断。</div>
|
||||
<div class="alert alert-info mt-3">少于理论上限通常是内容本身评论不足或平台返回不足，不直接代表任务失败。若失败内容数大于 0，请结合失败原因判断。</div>
|
||||
{% endif %}
|
||||
{% if task.analysis_status == "insufficient" %}
|
||||
<div class="alert alert-warning">AI 成功率 {{ ai_percent }}%，当前样本可能不足，报告结论请结合评论明细判断。</div>
|
||||
<div class="alert alert-warning mt-3">AI 成功率 {{ ai_percent }}%，当前样本可能不足，报告结论请结合评论明细判断。</div>
|
||||
{% endif %}
|
||||
{% if task.error_summary %}<div class="alert alert-danger">{{ task.error_summary }}</div>{% endif %}
|
||||
</div>
|
||||
</section>
|
||||
{% if task.status == "running" and not hotspots %}
|
||||
<div class="empty-state text-muted py-5"><div class="spinner-border text-warning mb-3"></div><p class="mb-0">正在抓取热点数据，请稍候...</p></div>
|
||||
{% endif %}
|
||||
<div class="accordion" id="hotspot-list">
|
||||
{% for hotspot in hotspots %}
|
||||
<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 }}">
|
||||
<span class="badge text-bg-light border">#{{ hotspot.rank }}</span>
|
||||
<span>热点 {{ hotspot.rank }}：{{ hotspot.title }}</span>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="hotspot-{{ hotspot.id }}" class="accordion-collapse collapse {% if loop.first %}show{% endif %}" data-bs-parent="#hotspot-list">
|
||||
<div class="accordion-body">
|
||||
<div class="d-flex justify-content-between align-items-center gap-3 mb-3">
|
||||
<span class="text-muted small">内容条目 {{ hotspot.content_items | length }}</span>
|
||||
<a class="btn btn-sm btn-outline-primary" href="/hotspots/{{ hotspot.id }}/report">查看汇总报告</a>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
{% for item in hotspot.content_items %}
|
||||
<li class="list-group-item px-0">
|
||||
<div class="content-item-row">
|
||||
<span>
|
||||
<span class="content-item-title">{{ item.title or item.summary or item.source_item_id }}</span>
|
||||
<span class="content-item-meta">状态 {{ item.status }} · ID {{ item.source_item_id }}</span>
|
||||
</span>
|
||||
<a class="btn btn-sm btn-outline-secondary" href="/items/{{ item.id }}">查看详情</a>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if task.status == "running" %}
|
||||
<script>document.addEventListener("DOMContentLoaded", () => pollTaskDetailStatus("{{ task.id }}"));</script>
|
||||
{% endif %}
|
||||
|
||||
@@ -25,22 +25,24 @@ def test_index_page_renders_task_form_empty_state_and_default_scale():
|
||||
assert "还没有任何任务" in response.text
|
||||
|
||||
|
||||
def test_index_page_uses_pencil_data_grid_layout_for_ui_polish():
|
||||
def test_index_page_uses_pencil_control_console_layout_for_ui_polish():
|
||||
with make_test_client() as (client, _engine):
|
||||
response = client.get("/")
|
||||
|
||||
assert response.status_code == 200
|
||||
soup = BeautifulSoup(response.text, "html.parser")
|
||||
visible_text = soup.get_text(" ")
|
||||
hero = soup.select_one(".hero-band.hero-band-inverse")
|
||||
hero = soup.select_one(".control-hero")
|
||||
assert hero is not None
|
||||
assert "抓取热点评论，快速看清讨论情绪" in visible_text
|
||||
assert soup.select_one(".hero-metrics.hero-data-grid") is not None
|
||||
assert soup.select_one(".task-workspace") is not None
|
||||
assert soup.select_one(".tool-card.hard-panel") is not None
|
||||
assert soup.select_one(".section-heading.panel-heading") is not None
|
||||
assert soup.select_one("table.app-table.data-grid-table") is not None
|
||||
assert soup.select_one(".scale-hint-panel") is not None
|
||||
assert "用默认配置快速启动一次评论分析" in visible_text
|
||||
assert "内容平台评论分析控制台" in visible_text
|
||||
assert soup.select_one(".quick-launch-panel") is not None
|
||||
assert soup.select_one(".default-scale-grid") is not None
|
||||
assert soup.select_one(".overview-grid") is not None
|
||||
assert soup.select_one(".task-card-list") is not None
|
||||
assert soup.select_one(".task-status-sidepanel") is not None
|
||||
assert soup.select_one("table.app-table.data-grid-table") is None
|
||||
assert "卡片化展示，减少表格压迫感" in visible_text
|
||||
assert "运行中任务自动刷新" in visible_text
|
||||
|
||||
|
||||
@@ -722,6 +724,46 @@ def test_task_detail_page_explains_target_and_actual_counts():
|
||||
assert "少于理论上限通常是内容本身评论不足或平台返回不足" in response.text
|
||||
|
||||
|
||||
def test_task_detail_page_uses_pencil_execution_view_layout():
|
||||
with make_test_client() as (client, engine):
|
||||
seed_result_data(engine)
|
||||
|
||||
response = client.get("/tasks/task-result")
|
||||
|
||||
assert response.status_code == 200
|
||||
soup = BeautifulSoup(response.text, "html.parser")
|
||||
visible_text = soup.get_text(" ")
|
||||
assert soup.select_one(".task-detail-hero") is not None
|
||||
assert soup.select_one(".execution-timeline") is not None
|
||||
assert soup.select_one(".hotspot-card-list") is not None
|
||||
assert soup.select_one(".detail-sidepanel") is not None
|
||||
assert "TASK DETAIL" in visible_text
|
||||
assert "执行阶段" in visible_text
|
||||
assert "热点结果" in visible_text
|
||||
assert "错误会被隔离" in visible_text
|
||||
assert "查看报告" in visible_text
|
||||
|
||||
|
||||
def test_hotspot_report_page_uses_pencil_analysis_reading_layout():
|
||||
with make_test_client() as (client, engine):
|
||||
seed_result_data(engine)
|
||||
|
||||
response = client.get("/hotspots/hot-result/report")
|
||||
|
||||
assert response.status_code == 200
|
||||
soup = BeautifulSoup(response.text, "html.parser")
|
||||
visible_text = soup.get_text(" ")
|
||||
assert soup.select_one(".report-reading-hero") is not None
|
||||
assert soup.select_one(".report-reading-layout") is not None
|
||||
assert soup.select_one(".insight-card") is not None
|
||||
assert soup.select_one(".sentiment-sidepanel") is not None
|
||||
assert "HOTSPOT REPORT" in visible_text
|
||||
assert "核心结论" in visible_text
|
||||
assert "代表评论" in visible_text
|
||||
assert "内容表现" in visible_text
|
||||
assert "同一份报告数据" in visible_text
|
||||
|
||||
|
||||
def test_task_api_includes_runtime_and_stale_progress_fields(monkeypatch):
|
||||
now = datetime(2026, 7, 3, 10, 30, tzinfo=UTC)
|
||||
monkeypatch.setattr("app.services.task_service.utc_now", lambda: now)
|
||||
|
||||
Reference in New Issue
Block a user