feat: 使用 Pencil 优化首页 UI

app/templates/index.html

@@ -2,14 +2,14 @@
 {% set has_running_tasks = tasks | selectattr("status", "equalto", "running") | list | length > 0 %}
 {% block title %}热榜评论雷达 - 热榜评论分析工具{% endblock %}
 {% block content %}
-<section class="hero-band mb-4">
+<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>从小红书和抖音热点出发，抓取真实评论，生成 AI 情绪、标签和可导出的分析报告。</p>
+      <h1>抓取热点评论，快速看清讨论情绪</h1>
+      <p>面向内部演示和联调的轻量工具：选择平台、控制抓取规模、查看任务状态，并进入报告和评论明细。</p>
     </div>
-    <div class="hero-metrics" aria-label="默认任务规模">
+    <div class="hero-metrics hero-data-grid" aria-label="默认任务规模">
       <div class="hero-metric">
         <strong>5</strong>
         <span>默认热点</span>
@@ -26,8 +26,9 @@
   </div>
 </section>
 
-<section class="tool-card mb-4" id="create-task">
-  <div class="section-heading">
+<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>
@@ -61,23 +62,23 @@
           <button class="btn btn-primary w-100" id="submit-btn" type="submit">开始抓取</button>
         </div>
       </div>
-      <div class="form-text text-muted mt-2" id="scale-hint">
+      <div class="scale-hint-panel" id="scale-hint">
         预计最多抓取：<strong id="scale-calc">1250</strong> 条评论（实际数量可能受平台返回数量、去重、失败、限流影响）
       </div>
     </form>
   </div>
 </section>
 
-<section class="tool-card" id="task-history">
-  <div class="section-heading">
+<section class="tool-card hard-panel" id="task-history">
+  <div class="section-heading panel-heading">
     <div>
       <p class="section-kicker">任务历史</p>
       <h2>最近任务</h2>
     </div>
-    {% if has_running_tasks %}<span class="badge text-bg-warning">自动更新中</span>{% endif %}
+    <span class="panel-note">{% if has_running_tasks %}自动更新中{% else %}运行中任务自动刷新{% endif %}</span>
   </div>
   <div class="table-responsive">
-    <table class="table app-table align-middle mb-0">
+    <table class="table app-table data-grid-table align-middle mb-0">
       <thead>
         <tr>
           <th>任务 ID</th>
@@ -95,6 +96,7 @@
     </table>
   </div>
 </section>
+</div>
 {% if has_running_tasks %}
 <script>document.addEventListener("DOMContentLoaded", () => pollTaskListStatus());</script>
 {% endif %}