feat: 按 Pencil 设计重做页面 UI
This commit is contained in:
meijiali
+90
-69
@@ -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>
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<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">
|
||||
<div class="default-scale-grid" aria-label="默认任务规模">
|
||||
<div class="scale-tile">
|
||||
<strong>5</strong>
|
||||
<span>热点</span>
|
||||
</div>
|
||||
<div class="scale-tile">
|
||||
<strong>25</strong>
|
||||
<span>内容</span>
|
||||
</div>
|
||||
<div class="scale-tile">
|
||||
<strong id="scale-calc">1250</strong>
|
||||
<span>评论上限</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quick-form-grid">
|
||||
<div>
|
||||
<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>
|
||||
<p class="section-kicker">任务历史</p>
|
||||
<h2>最近任务</h2>
|
||||
<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>
|
||||
</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 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 %}
|
||||
|
||||
Reference in New Issue
Block a user