feat: 优化任务页面 UI 展示

app/templates/index.html

@@ -10,12 +10,18 @@
   </div>
   <div class="hero-actions">
     <a class="btn btn-light" href="#create-task">创建新任务</a>
-    <a class="btn btn-outline-light" href="#task-history">查看 Demo 数据</a>
+    <a class="btn btn-outline-light" href="#task-history">查看任务</a>
   </div>
 </section>
 
-<section class="card mb-4" id="create-task">
-  <div class="card-header">创建抓取任务</div>
+<section class="tool-card mb-4" id="create-task">
+  <div class="section-heading">
+    <div>
+      <p class="section-kicker">采集配置</p>
+      <h2>创建抓取任务</h2>
+    </div>
+    <span class="text-muted small">默认规模 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)">
@@ -50,13 +56,16 @@
   </div>
 </section>
 
-<section class="card" id="task-history">
-  <div class="card-header d-flex justify-content-between align-items-center">
-    <span>最近任务与 Demo 数据</span>
-    <button class="btn btn-outline-secondary btn-sm" onclick="window.location.href='/'">手动刷新</button>
+<section class="tool-card" id="task-history">
+  <div class="section-heading">
+    <div>
+      <p class="section-kicker">任务历史</p>
+      <h2>最近任务与 Demo 数据</h2>
+    </div>
+    {% if has_running_tasks %}<span class="badge text-bg-warning">自动更新中</span>{% endif %}
   </div>
   <div class="table-responsive">
-    <table class="table table-hover align-middle mb-0">
+    <table class="table app-table align-middle mb-0">
       <thead>
         <tr>
           <th>任务 ID</th>