meijiali/hot_comment_radar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 按 Pencil 设计重做页面 UI

Browse Source
This commit is contained in:
meijiali
2026-07-07 18:43:48 +08:00
parent c22556430e
commit 00633a5510
7 changed files with 1051 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/partials/report_panel.html
+98 -72
View File
@@ -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 %}
{% 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>
</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>
</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>
</div>
<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">
<span>{{ sentiment_label(key) }}</span>
<span class="text-muted">{{ item.get("count", 0) }} 条（{{ item.get("pct", 0) }}%）</span>
</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>
<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 %}
<div class="d-flex flex-wrap gap-2">
{% for label in top_labels %}
<span class="badge text-bg-light border">{{ label.get("name") }} ({{ label.get("count", 0) }})</span>
{% endfor %}
</div>
<p><span></span>当前高频讨论方向集中在{% for label in top_labels[:3] %}{{ "、" if not loop.first }}{{ label.get("name") }}{% endfor %}。</p>
{% else %}
<p class="text-muted mb-0">暂无标签数据</p>
<p><span></span>暂无高频标签数据，建议结合评论明细人工复核。</p>
{% endif %}
</div>
</div>
</div>
</section>
</section>
<section class="card mb-4">
<div class="card-header">典型评论</div>
<div class="card-body">
<div class="row g-3">
<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"] %}
<div class="col-md-4">
<h3 class="h6">{{ sentiment_label(key) }}</h3>
<article class="quote-card">
<span class="soft-badge">{{ sentiment_label(key) }}</span>
{% 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>
<p>{{ comment.get("content") }}</p>
<small>点赞 {{ comment.get("like_count", 0) }}</small>
{% else %}
<p class="text-muted small mb-0">暂无{{ sentiment_label(key) }}代表评论</p>
<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="performance-row">
<div>
<strong>关联内容</strong>
<span>参与热点级聚合的内容条目</span>
</div>
<em>{{ item_count }} 条</em>
</div>
{% endif %}
<div class="performance-row">
<div>
<strong>高频标签</strong>
<span>用于定位主要讨论方向</span>
</div>
<em>{{ top_labels | length }} 个</em>
</div>
</section>
</section>
<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>{{ 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>
{% endfor %}
</div>
</div>
</section>
</section>
<section class="keyword-sidepanel">
<h2>Top 标签 / 关键词</h2>
{% if top_labels %}
<div class="keyword-cloud">
{% for label in top_labels %}
<span>{{ label.get("name") }} ({{ label.get("count", 0) }})</span>
{% endfor %}
</div>
{% else %}
<p class="text-muted mb-0">暂无标签数据</p>
{% endif %}
</section>
<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>
app/templates/partials/task_cards.html
+44
View File
@@ -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 %}