feat: 优化现有页面为 shadcn 风格

app/templates/index.html

@@ -3,10 +3,26 @@
 {% block title %}热榜评论雷达 - 热榜评论分析工具{% endblock %}
 {% block content %}
 <section class="hero-band mb-4">
-  <div class="hero-copy">
-    <p class="eyebrow">Hot Comment Radar</p>
-    <h1>热榜评论雷达</h1>
-    <p>从小红书和抖音热点出发，抓取真实评论，生成 AI 情绪、标签和可导出的分析报告。</p>
+  <div class="hero-shell">
+    <div class="hero-copy">
+      <p class="eyebrow">Hot Comment Radar</p>
+      <h1>热榜评论雷达</h1>
+      <p>从小红书和抖音热点出发，抓取真实评论，生成 AI 情绪、标签和可导出的分析报告。</p>
+    </div>
+    <div class="hero-metrics" 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>
 
@@ -16,7 +32,7 @@
       <p class="section-kicker">采集配置</p>
       <h2>创建抓取任务</h2>
     </div>
-    <span class="text-muted small">默认规模 5 × 5 × 50</span>
+    <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>