feat: 按 Pencil 设计重做页面 UI
This commit is contained in:
meijiali
+91
-103
@@ -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>
|
||||
{% set label, cls = 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) %}
|
||||
{% set target_comments = task.hotspot_limit * task.item_limit_per_hotspot * task.comment_limit_per_item %}
|
||||
|
||||
<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>
|
||||
{% 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>
|
||||
</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 响应速度。
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if task.is_progress_stale %}
|
||||
<div class="alert alert-warning">
|
||||
超过 {{ 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>
|
||||
{% endif %}
|
||||
{% if task.analysis_status == "insufficient" %}
|
||||
<div class="alert alert-warning">AI 成功率 {{ ai_percent }}%，当前样本可能不足，报告结论请结合评论明细判断。</div>
|
||||
{% endif %}
|
||||
{% if task.error_summary %}<div class="alert alert-danger">{{ task.error_summary }}</div>{% endif %}
|
||||
</div>
|
||||
<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="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 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>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% 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 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 mt-3">少于理论上限通常是内容本身评论不足或平台返回不足，不直接代表任务失败。若失败内容数大于 0，请结合失败原因判断。</div>
|
||||
{% endif %}
|
||||
{% if task.analysis_status == "insufficient" %}
|
||||
<div class="alert alert-warning mt-3">AI 成功率 {{ ai_percent }}%，当前样本可能不足，报告结论请结合评论明细判断。</div>
|
||||
{% endif %}
|
||||
|
||||
{% if task.status == "running" %}
|
||||
<script>document.addEventListener("DOMContentLoaded", () => pollTaskDetailStatus("{{ task.id }}"));</script>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user