host
08484302ac
左侧栏 ProjectNav：项目完整列表（名 + 短 id + 我的角色， 选中高亮，点击切换）+ 创建项目（名/GitHub 仓库/repo_url） + 选中项目成员（邀请/改角色/新增移除）；工作台删除 sec-projects 一节与任务列表里的项目下拉框，侧栏为唯一 项目选择器，自动选第一个项目逻辑不变。 薄模块补齐（均为已核实后端路由）：成员移除 DELETE、 自动化详情（GET 单条 + 产出）与编辑 PATCH、分诊条目点进 任务/自动化详情、Workers 搜索与在线筛选、管理区设置配额 POST。主线新功能（Todos、Browser、taskMeta 等）原样保留， 未做任何回退。console 标记单测本地 53 项通过。
84 lines
4.9 KiB
TypeScript
84 lines
4.9 KiB
TypeScript
import { useConsole } from "../context";
|
||
import { shortId } from "../api/client";
|
||
import { firstChar, durationOf, tokenOf } from "../api/taskMeta";
|
||
|
||
// 任务列表行 meta：首字 / 总耗时 / token，计算见 api/taskMeta.ts，
|
||
// 与任务详情共用同一口径。
|
||
|
||
// GitHub issues-style task list: search on top, a 主要聊天 header with
|
||
// a + button, then hairline rows with a Primer status dot at the
|
||
// left. There is deliberately NO project selector here any more:
|
||
// the left sidebar (ProjectNav) is the one project selector, and the
|
||
// auto-select-first-project fix in the store keeps the list from
|
||
// ever starting empty.
|
||
// a 14px title and a 12px muted meta line. The search input IS the
|
||
// existing task search (id/prompt); status and executor filters stay
|
||
// as a compact row below it. The selected row gets the light
|
||
// blue-grey background (#ddf4ff), not a bubble.
|
||
export default function TaskListSection({ onNew }: { onNew: () => void }) {
|
||
const ctx = useConsole();
|
||
return (
|
||
<div>
|
||
<div className="search-box">
|
||
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
|
||
<circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" />
|
||
</svg>
|
||
<input type="text" placeholder="搜索" aria-label="搜索任务" value={ctx.searchText} onChange={(e) => ctx.setSearchText(e.target.value)} />
|
||
</div>
|
||
<div className="list-section-head">
|
||
<span>主要聊天</span>
|
||
<button type="button" aria-label="派发新任务" title="派发新任务" onClick={onNew}>＋</button>
|
||
</div>
|
||
<div className="bar">
|
||
<select aria-label="状态筛选" value={ctx.statusFilter} onChange={(e) => ctx.setStatusFilter(e.target.value)}>
|
||
<option value="">状态：全部</option>
|
||
{["queued", "running", "completed", "failed", "interrupted", "merged", "merge-failed"].map((s) => <option key={s} value={s}>{s}</option>)}
|
||
</select>
|
||
<select aria-label="执行器筛选" value={ctx.executorFilter} onChange={(e) => ctx.setExecutorFilter(e.target.value)}>
|
||
<option value="">执行器：全部</option><option value="local">local</option><option value="docker">docker</option><option value="cloud">cloud</option>
|
||
</select>
|
||
</div>
|
||
<div className="bar">
|
||
<button onClick={ctx.refreshTasks}>刷新</button>
|
||
<span className="muted">{ctx.taskCountText}</span>
|
||
</div>
|
||
<div className="bar">
|
||
<button disabled={ctx.taskPage <= 0} onClick={() => ctx.goToTaskPage(ctx.taskPage - 1)}>上一页</button>
|
||
<span className="muted">第 {ctx.taskPage + 1} / {ctx.taskTotalPages} 页（每页 20 条，最新在前）</span>
|
||
<button disabled={ctx.taskPage + 1 >= ctx.taskTotalPages} onClick={() => ctx.goToTaskPage(ctx.taskPage + 1)}>下一页</button>
|
||
</div>
|
||
{ctx.taskError ? <div className="err">{ctx.taskError}</div>
|
||
: !ctx.projectId ? <div className="muted">先选项目</div>
|
||
: ctx.filteredTasks.length === 0 ? <div className="muted">{ctx.taskTotal ? "没有符合筛选条件的任务" : "该项目暂无任务"}</div>
|
||
: (
|
||
<ul className="issue-list">
|
||
{ctx.filteredTasks.map((t) => {
|
||
const [dur, durTitle] = durationOf(t);
|
||
const [tok, tokTitle] = tokenOf(t);
|
||
const fc = firstChar(t);
|
||
return (
|
||
<li key={t.id} className={"issue-item" + (ctx.currentTask?.id === t.id ? " selected" : "")} onClick={() => ctx.showDetail(t.id)}>
|
||
<span className={"issue-state st-" + t.status} aria-hidden="true" />
|
||
<span className="issue-first" title={"任务首字：" + fc} aria-hidden="true">{fc}</span>
|
||
<span style={{ flex: 1, minWidth: 0 }}>
|
||
<div className="issue-title">
|
||
{t.plan ? "[计划] " : ""}{t.forked_from ? "[分支] " : ""}{t.coordinator_parts ? "[协调] " : ""}{t.parent_task_id ? "[协调子任务] " : ""}{String(t.prompt || shortId(t.id)).slice(0, 60)}
|
||
</div>
|
||
<div className="issue-meta">
|
||
{shortId(t.id)} · <span className={"st-" + t.status}>{t.status}</span> · {t.executor || ""}{t.updated_at ? " · " + new Date(t.updated_at * 1000).toLocaleString() : ""}
|
||
{" · "}<span title={durTitle}>耗时 {dur}</span>
|
||
{" · "}<span title={tokTitle}>{tok}</span>
|
||
</div>
|
||
{(t.status === "failed" || t.status === "interrupted" || t.status === "merge-failed") && t.error_text ? (
|
||
<div className="issue-meta" title={t.error_text}>{/503|Service Unavailable/.test(t.error_text) ? "上游 503：模型服务暂时不可用" : t.error_text.replace(/\s+/g, " ").slice(0, 60)}</div>
|
||
) : null}
|
||
</span>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|