hot_comment_radar/app/templates/tasks/detail.html

{% extends "base.html" %}
{% block title %}任务 {{ task.display_id }} - 热榜评论分析工具{% endblock %}
{% block breadcrumbs %}
<nav aria-label="breadcrumb"><ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/">首页</a></li>
  <li class="breadcrumb-item active">任务 {{ task.display_id }}</li>
</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>
    </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>
</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 %}
{% endblock %}