Files
hot_comment_radar/app/templates/index.html
T

104 lines
4.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends "base.html" %}
{% set has_running_tasks = tasks | selectattr("status", "equalto", "running") | list | length > 0 %}
{% block title %}热榜评论雷达 - 热榜评论分析工具{% 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>
</div>
<div class="hero-metrics hero-data-grid" aria-label="默认任务规模">
<div class="hero-metric">
<strong>5</strong>
<span>默认热点</span>
</div>
<div class="hero-metric">
<strong>25</strong>
<span>默认内容</span>
</div>
<div class="hero-metric">
<strong>1,250</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>
<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">
<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">
<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">
<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> 条评论(实际数量可能受平台返回数量、去重、失败、限流影响)
</div>
</form>
</div>
</section>
<section class="tool-card hard-panel" id="task-history">
<div class="section-heading panel-heading">
<div>
<p class="section-kicker">任务历史</p>
<h2>最近任务</h2>
</div>
<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>
</section>
</div>
{% if has_running_tasks %}
<script>document.addEventListener("DOMContentLoaded", () => pollTaskListStatus());</script>
{% endif %}
{% endblock %}