h3-console: 任务列表加搜索/筛选/排序，修复只能看到最近50条任务

/v1/videos 一直硬编码 limit=50，服务器上实际232条未删除任务，超出的根本没请求回来——不是滚动条的问题。改成滚到底部自动翻页加载；同时给 /v1/videos 加 q/status/kind/sort 参数（向后兼容），左侧栏加对应的搜索框/状态筛选/类型筛选/排序切换。已部署到服务器并用真实数据验证过。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JDWoVwpqrsyzv9LRszTw9d

h3-console: 任务列表加搜索/筛选/排序，修复只能看到最近50条任务
/v1/videos 一直硬编码 limit=50，服务器上实际232条未删除任务，超出的根本没请求回来——不是滚动条的问题。改成滚到底部自动翻页加载；同时给 /v1/videos 加 q/status/kind/sort 参数（向后兼容），左侧栏加对应的搜索框/状态筛选/类型筛选/排序切换。已部署到服务器并用真实数据验证过。 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JDWoVwpqrsyzv9LRszTw9d
yibo
1 parent ebcef114
Showing 2 changed files with 111 additions and 5 deletions
h3-console/server.py
h3-console/static/index.html
@@ -465,16 +465,36 @@ async def download_video(jid: str, request: Request):
  
  
 @router.get("/v1/videos")
-async def list_videos(limit: int = 50, trash: bool = False):
+async def list_videos(limit: int = 50, trash: bool = False, q: str = "", status: str = "",
+                       kind: str = "", sort: str = "desc"):
     # console 自己的 sqlite 是任务列表的唯一真相来源（本地排队中的任务，gateway 根本不知道它存在，
     # 没法从 gateway 反查出来）。实时进度由后台 reconciler_loop 持续刷新进 last_known_json，
     # 这里直接读，不在请求路径里再打一遍 gateway，避免列表接口被拖慢。
     # 软删除：deleted_at 非空的任务默认不出现在列表里，?trash=true 反过来只看这些——
     # 数据还在同一张表里，删除/恢复就是 UPDATE 一个时间戳，不用挪表、不用真删文件。
-    where = "deleted_at IS NOT NULL" if trash else "deleted_at IS NULL"
-    order = "deleted_at DESC" if trash else "created_at DESC"
+    where = ["deleted_at IS NOT NULL" if trash else "deleted_at IS NULL"]
+    params: list = []
+    if q:
+        # prompt 只存在 req_json 这坨 JSON 文本里，没有单独的列——json.dumps 是
+        # ensure_ascii=False 存的，中文原样落盘，直接 LIKE 子串匹配就够用，不用上 json_extract。
+        where.append("(id LIKE ? OR req_json LIKE ?)")
+        params += [f"%{q}%", f"%{q}%"]
+    if status:
+        where.append("status = ?")
+        params.append(status)
+    if kind:
+        # 前端叫它"类型"（文生/首尾帧/参考图），数据库列叫 partition——是同一个值
+        # （见 _partition_of），换个外部参数名单纯是避免跟 /v1/backends 里 GPU 分区的
+        # "partition" 混着看。
+        where.append("partition = ?")
+        params.append(kind)
+    order_col = "deleted_at" if trash else "created_at"
+    order = f"{order_col} {'ASC' if sort == 'asc' else 'DESC'}"
+    params.append(limit)
     with db() as con:
-        rows = con.execute(f"SELECT * FROM jobs WHERE {where} ORDER BY {order} LIMIT ?", (limit,)).fetchall()
+        rows = con.execute(
+            f"SELECT * FROM jobs WHERE {' AND '.join(where)} ORDER BY {order} LIMIT ?", params
+        ).fetchall()
     return {"jobs": [_row_view(r) for r in rows]}
  
  
@@ -12,7 +12,15 @@
   #sidebar { width: 300px; flex-shrink: 0; border-right: 1px solid #ddd; display: flex; flex-direction: column; height: 100vh; }
   #sidebar-header { padding: 16px; border-bottom: 1px solid #ddd; }
   #sidebar-header h1 { font-size: 16px; margin: 0; }
+  #sidebar-filters { padding: 8px 16px; border-bottom: 1px solid #ddd; display: flex; flex-direction: column; gap: 6px; }
+  #sidebar-filters input, #sidebar-filters select { font-size: 12px; padding: 4px 6px; width: auto; }
+  #sidebar-filters .sf-row { display: flex; gap: 6px; }
+  #sidebar-filters .sf-row select { flex: 1; min-width: 0; }
+  #job-sort-btn { font-size: 12px; padding: 4px 8px; border: 1px solid #888; background: transparent;
+    border-radius: 4px; cursor: pointer; white-space: nowrap; }
+  #job-sort-btn:hover { background: rgba(128,128,128,.15); }
   #job-list { flex: 1; overflow-y: auto; }
+  #job-list-footer { padding: 10px 16px; text-align: center; font-size: 11px; opacity: .55; }
   .job-row { position: relative; padding: 10px 16px; border-bottom: 1px solid #eee; cursor: pointer; }
   .job-row:hover { background: rgba(128,128,128,.08); }
   .job-row.selected { background: rgba(74,170,119,.15); border-left: 3px solid #4a7; }
@@ -84,6 +92,26 @@
   <div id="sidebar-header">
     <h1>H3 Console</h1>
   </div>
+  <div id="sidebar-filters">
+    <input id="job-search" type="text" placeholder="搜索 prompt / id…">
+    <div class="sf-row">
+      <select id="job-status-filter">
+        <option value="">全部状态</option>
+        <option value="queued">排队中</option>
+        <option value="running">运行中</option>
+        <option value="done">已完成</option>
+        <option value="failed">失败</option>
+        <option value="cancelled">已取消</option>
+      </select>
+      <select id="job-kind-filter">
+        <option value="">全部类型</option>
+        <option value="text">文生</option>
+        <option value="fl2va">首尾帧</option>
+        <option value="ref2va">参考图</option>
+      </select>
+      <button id="job-sort-btn" title="切换排序">↓最新</button>
+    </div>
+  </div>
   <div id="job-list"></div>
   <div id="backends"></div>
   <div id="sidebar-footer">
@@ -232,6 +260,21 @@ let trashCache = [];
 let viewingTrash = false;
 let openMenuFor = null;
  
+// 任务列表原来固定 limit=50，服务器上实测已经攒了 232 条未删除任务——超出的 182 条根本
+//没请求回来，#job-list 的 overflow-y:auto 只能滚动已加载的这 50 条，看起来像"下拉到底
+// 就没了"。改成滚到底部自动把 loadedLimit 加 50 再重新拉，直到某次返回条数小于请求的
+// limit（说明已经拉到头，noMoreJobs=true，不用再滚）。search/status/kind/sort 每次改动
+// 都把 loadedLimit 重置回 50 重新拉——过滤条件变了，"已经拉到第几页"这个状态就该归零。
+let loadedLimit = 50;
+let noMoreJobs = false;
+let loadingMore = false;
+let filterQ = '';
+let filterStatus = '';
+let filterKind = '';
+let sortOrder = 'desc';
+
+function resetPaging() { loadedLimit = 50; noMoreJobs = false; refreshJobs(); }
+
 // URL 是 /task.html/<id> 或 /newtask.html（或裸 /，等同 newtask）——不是两个页面文件，
 // server.py 里 /task.html/{tid} 和 /newtask.html 两条路由都返回这同一份 index.html，
 // 这里只是从地址栏读出当前该显示哪个视图，方便复制链接分享、刷新页面不丢状态。
@@ -249,6 +292,31 @@ document.querySelectorAll(&#39;.tabs button&#39;).forEach(btn =&gt; btn.onclick = () =&gt; {
   ['text','fl2va','ref2va'].forEach(t => document.getElementById('tab-'+t).style.display = (t===btn.dataset.tab ? 'block' : 'none'));
 });
  
+let searchDebounce = null;
+document.getElementById('job-search').addEventListener('input', e => {
+  filterQ = e.target.value.trim();
+  clearTimeout(searchDebounce);
+  searchDebounce = setTimeout(resetPaging, 300);  // 防抖，不用每敲一个字就打一次请求
+});
+document.getElementById('job-status-filter').addEventListener('change', e => { filterStatus = e.target.value; resetPaging(); });
+document.getElementById('job-kind-filter').addEventListener('change', e => { filterKind = e.target.value; resetPaging(); });
+document.getElementById('job-sort-btn').addEventListener('click', e => {
+  sortOrder = sortOrder === 'desc' ? 'asc' : 'desc';
+  e.target.textContent = sortOrder === 'desc' ? '↓最新' : '↑最早';
+  resetPaging();
+});
+
+// 滚到列表底部附近就自动加载下一页，不用额外放个"加载更多"按钮——viewingTrash/已经拉到头/
+// 上一页还没回来这三种情况都不重复触发。
+document.getElementById('job-list').addEventListener('scroll', e => {
+  if (viewingTrash || noMoreJobs || loadingMore) return;
+  const el = e.target;
+  if (el.scrollTop + el.clientHeight < el.scrollHeight - 80) return;
+  loadingMore = true;
+  loadedLimit += 50;
+  refreshJobs().finally(() => { loadingMore = false; });
+});
+
 function showCreate(pushUrl = true) {
   selectedId = null;
   if (pushUrl) history.pushState(null, '', H3_BASE + '/newtask.html');
@@ -682,6 +750,7 @@ function fmtTime(ts) {
  
 function renderSidebar() {
   const box = document.getElementById('job-list'); box.innerHTML = '';
+  document.getElementById('sidebar-filters').style.display = viewingTrash ? 'none' : 'flex';
  
   if (viewingTrash) {
     const backRow = document.createElement('div');
@@ -736,6 +805,18 @@ function renderSidebar() {
       </div>` : ''}`;
     box.appendChild(row);
   });
+
+  if (jobsCache.length) {
+    const footer = document.createElement('div');
+    footer.id = 'job-list-footer';
+    footer.textContent = noMoreJobs ? '— 没有更多了 —' : '下拉加载更多…';
+    box.appendChild(footer);
+  } else if (filterQ || filterStatus || filterKind) {
+    const empty = document.createElement('div');
+    empty.style.cssText = 'padding:16px;font-size:13px;opacity:.6';
+    empty.textContent = '没有匹配的任务';
+    box.appendChild(empty);
+  }
 }
  
 // 任意点击落在某条任务的「⋯」菜单外面，就把菜单收起来——不然点开一个菜单后点别处它会一直挂着
@@ -873,8 +954,13 @@ async function refreshDetail() {
 async function refreshJobs() {
   if (viewingTrash) { await loadTrash(); renderSidebar(); return; }
   try {
-    const r = await fetch(H3_BASE + '/v1/videos?limit=50'); const d = await r.json();
+    const params = new URLSearchParams({ limit: String(loadedLimit), sort: sortOrder });
+    if (filterQ) params.set('q', filterQ);
+    if (filterStatus) params.set('status', filterStatus);
+    if (filterKind) params.set('kind', filterKind);
+    const r = await fetch(`${H3_BASE}/v1/videos?${params}`); const d = await r.json();
     jobsCache = d.jobs || [];
+    noMoreJobs = jobsCache.length < loadedLimit;
     renderSidebar();
     // 只有还在变化的任务（排队/运行中）才需要重新拉详情。`refreshDetail()` 是整段
     // innerHTML 重建，`done` 之后再重建会把正在播放的 <video> 元素连根拔掉——