v1.0.7: 任务列表按模式分组展示(批量/定时/自动各占一行, 空组隐藏)

static/app.js

@@ -79,10 +79,28 @@ function taskStatusBadge(t) {
   return '<span class="badge">未运行</span>';
 }
 
+const GROUPS = [
+  { key: "batch", label: "📄 批量爬取", desc: "一次性爬取指定网址列表" },
+  { key: "scheduled", label: "⏰ 定时爬取", desc: "按间隔或 cron 表达式定时执行" },
+  { key: "auto", label: "🤖 自动爬取", desc: "从起始网址自动发现链接并爬取" },
+];
+
 function renderTasks() {
   const box = $("taskList");
   $("emptyState").classList.toggle("hidden", state.tasks.length > 0);
-  box.innerHTML = state.tasks.map(taskCard).join("");
+  box.innerHTML = GROUPS.map((g) => {
+    const items = state.tasks.filter((t) => t.mode === g.key);
+    if (!items.length) return "";
+    return `
+      <div class="group">
+        <div class="group-head">
+          <span class="group-title">${g.label}</span>
+          <span class="group-desc">${g.desc}</span>
+          <span class="group-count">${items.length} 个任务</span>
+        </div>
+        <div class="task-grid">${items.map(taskCard).join("")}</div>
+      </div>`;
+  }).join("");
 }
 
 function taskCard(t) {

static/style.css

@@ -85,6 +85,16 @@ main { padding: 20px 24px; max-width: 1500px; margin: 0 auto; }
 .stat-num.num-run { color: var(--accent); }
 .stat-label { font-size: 12px; color: var(--muted); margin-top: 3px; }
 
+/* ---------- 分组展示 ---------- */
+.group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
+.group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+.group-title { font-size: 16px; font-weight: 700; }
+.group-desc { font-size: 12px; color: var(--muted); }
+.group-count {
+  font-size: 11px; padding: 2px 10px; border-radius: 10px;
+  background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
+}
+
 /* ---------- task grid ---------- */
 .task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
 .card {