wangjia
f18db021c3
调度： - model/scoring.ts: score = 自身分(P0=3/P1=2/P2=1) + 已完成依赖分(链条惯性) + 等待解锁的 blocked 任务分(解锁加权)，编排器与 nextExecutable 同一打分 - createTask 校验 deps 存在且同项目(依赖图天然无环) - daemon 重启中断自愈: executing 任务标 failed run 后重新入队(reconcileInterrupted) 执行管线： - executor/cc.ts: 公共 headless CC 执行器(转录/超时/模型回退重试) - executor/reviewer.ts: 执行后自动复审(只读 CC 审 diff)，固定模板 summary (做了什么/怎么做/测试/CodeReview/安全Review/结论) + VERDICT 解析 - executor/models.ts: 按复杂度选模型(easy→sonnet/medium→opus/hard→fable5)， env 可覆盖、project.model 最优先、不可用自动回退链 - runner: 测试/构建命令白名单(npm/go/shellcheck/make/pytest)，prompt 要求实跑测试 - TaskResult 加 summary/verdict; RunKind 加 reviewer - 容器收口: 已拆解 Hard 子任务全 done → 容器自动 done(afterDone 逐级向上) 看板： - 五徽章组(待审批/待执行/执行中/被阻塞/总量，hover 展开，均不含已完成) - 归档区: 深度1整树完成沉底，时间倒序分页(10/20/50/100 chip 选择) - 归档详情对话框: 全属性/执行历史与时长/审批记录/状态流转时间线(含相关人或事) - Agent 面板显示调度模式 + 各复杂度实际模型 - 结果闸展示复审 summary + 建议通过/拒绝徽章 - 筛选修复(组选与单选分离、已拆解移出进行中)、同步按钮收进配置面板、 保存配置自动收起、预览全宽、被依赖阻塞→被阻塞 - API: GET /api/tasks/:id/events(任务级事件时间线)、/api/agents 带 scheduling/models 测试: 49/49(新增 scoring/复审/模型/容器收口/deps 校验/中断恢复) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
757 lines
32 KiB
CSS
757 lines
32 KiB
CSS
/* ════════════════════════════════════════════════════════════════
|
|
MAESTRO 调度台 · phosphor console
|
|
碳绿底 + 磷光绿/琥珀/信号红，等宽中文混排，扫描线质感
|
|
════════════════════════════════════════════════════════════════ */
|
|
|
|
:root {
|
|
--bg: #0a0d0b;
|
|
--bg-deep: #070908;
|
|
--panel: #10140f;
|
|
--panel-2: #151b14;
|
|
--line: #232d23;
|
|
--line-soft: #1a221a;
|
|
--ink: #d8e4d4;
|
|
--muted: #76876f;
|
|
--faint: #4a5747;
|
|
|
|
--green: #5fdd7d;
|
|
--green-dim: #2e6b3d;
|
|
--amber: #f0b429;
|
|
--amber-dim: #6b5414;
|
|
--red: #ff5d5d;
|
|
--red-dim: #6b2424;
|
|
--cyan: #59c8d8;
|
|
--cyan-dim: #1e4e57;
|
|
|
|
--mono: 'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html, body { height: 100%; }
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: var(--mono);
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 扫描线 + 暗角 氛围层 */
|
|
body::before {
|
|
content: '';
|
|
position: fixed; inset: 0; z-index: 999; pointer-events: none;
|
|
background:
|
|
repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
|
|
radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0,0,0,.5));
|
|
opacity: .5;
|
|
}
|
|
|
|
::selection { background: var(--green-dim); color: #fff; }
|
|
|
|
/* 滚动条 */
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }
|
|
|
|
/* ── 三栏骨架 ─────────────────────────────────────────────── */
|
|
#app {
|
|
display: grid;
|
|
grid-template-columns: 232px minmax(0,1fr) 320px;
|
|
height: 100vh;
|
|
}
|
|
|
|
#sidebar {
|
|
background: var(--bg-deep);
|
|
border-right: 1px solid var(--line);
|
|
display: flex; flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#main { overflow-y: auto; padding: 0 22px 60px; }
|
|
|
|
#eventPanel {
|
|
background: var(--bg-deep);
|
|
border-left: 1px solid var(--line);
|
|
overflow-y: auto;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
body { overflow: auto; }
|
|
#app { grid-template-columns: 1fr; height: auto; }
|
|
#sidebar, #eventPanel { border: none; border-bottom: 1px solid var(--line); }
|
|
}
|
|
|
|
/* ── Logo ────────────────────────────────────────────────── */
|
|
.logo { padding: 20px 16px 14px; border-bottom: 1px solid var(--line-soft); }
|
|
.logo-word {
|
|
font-size: 19px; font-weight: 700; letter-spacing: .28em;
|
|
color: var(--green);
|
|
text-shadow: 0 0 12px rgba(95,221,125,.45);
|
|
}
|
|
.cursor { animation: blink 1.1s steps(1) infinite; margin-left: 1px; }
|
|
@keyframes blink { 50% { opacity: 0; } }
|
|
.logo-sub { margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .35em; }
|
|
|
|
/* ── 区块标题 ─────────────────────────────────────────────── */
|
|
.sec-head {
|
|
display: flex; align-items: center; gap: 6px;
|
|
font-size: 11px; font-weight: 600; letter-spacing: .22em;
|
|
color: var(--muted); text-transform: uppercase;
|
|
padding: 18px 0 10px;
|
|
position: sticky; top: 0; z-index: 5;
|
|
background: linear-gradient(var(--bg) 75%, transparent);
|
|
}
|
|
#sidebar .sec-head, .side-head {
|
|
display: flex; align-items: center; gap: 6px;
|
|
font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--muted);
|
|
padding: 16px 16px 8px; background: none; position: static;
|
|
}
|
|
#eventPanel .sec-head { padding: 18px 16px 10px; background: linear-gradient(var(--bg-deep) 75%, transparent); }
|
|
.head-mark { color: var(--green); }
|
|
.head-mark.amber { color: var(--amber); }
|
|
.head-mark.cyan { color: var(--cyan); }
|
|
.side-head .btn, .sec-head .btn { margin-left: auto; letter-spacing: .1em; }
|
|
|
|
/* ── 项目列表 ─────────────────────────────────────────────── */
|
|
.project-list { list-style: none; flex: 1; }
|
|
.project-list li {
|
|
padding: 9px 16px 9px 14px;
|
|
border-left: 2px solid transparent;
|
|
cursor: pointer;
|
|
display: flex; flex-direction: column; gap: 1px;
|
|
}
|
|
.project-list li:hover { background: var(--panel); }
|
|
.project-list li.active {
|
|
background: var(--panel-2);
|
|
border-left-color: var(--green);
|
|
}
|
|
.project-list li.active .p-name { color: var(--green); }
|
|
.p-name { font-weight: 600; font-size: 13px; }
|
|
.p-path { font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p-empty { padding: 14px 16px; color: var(--faint); font-size: 12px; }
|
|
|
|
.side-foot {
|
|
border-top: 1px solid var(--line-soft);
|
|
padding: 10px 16px; font-size: 11px; color: var(--muted);
|
|
display: flex; align-items: center; gap: 7px;
|
|
}
|
|
.ws-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
|
|
.ws-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
|
|
.ws-dot.off { background: var(--amber); animation: pulse 1s infinite; }
|
|
@keyframes pulse { 50% { opacity: .25; } }
|
|
|
|
/* ── 顶栏 ────────────────────────────────────────────────── */
|
|
#topbar {
|
|
display: flex; align-items: flex-end; gap: 14px;
|
|
padding: 22px 0 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.proj-title { font-size: 20px; font-weight: 700; letter-spacing: .04em; }
|
|
.proj-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
|
|
.spacer { flex: 1; }
|
|
.gate-count {
|
|
font-size: 11px; letter-spacing: .12em; color: var(--amber);
|
|
border: 1px solid var(--amber-dim); padding: 4px 10px;
|
|
animation: pulse 2.2s infinite;
|
|
}
|
|
|
|
/* 顶栏动作（同步 todo / 配置） */
|
|
.top-actions { display: flex; align-items: center; gap: 8px; }
|
|
.sync-meta { font-size: 10.5px; color: var(--faint); letter-spacing: .06em; }
|
|
|
|
/* ── 项目配置面板 ─────────────────────────────────────────── */
|
|
.config-panel { padding: 12px 14px; margin-top: 12px; animation: rise .18s ease both; }
|
|
.config-panel .form-row { align-items: flex-end; }
|
|
.cfg-current {
|
|
font-size: 11px; color: var(--muted); letter-spacing: .06em;
|
|
margin-left: auto; padding-bottom: 7px;
|
|
}
|
|
|
|
/* ── Agent 执行面板 ──────────────────────────────────────── */
|
|
.agent-total { color: var(--cyan); letter-spacing: .08em; }
|
|
.agent-empty {
|
|
padding: 12px 14px; color: var(--faint); font-size: 12px;
|
|
border: 1px dashed var(--line);
|
|
}
|
|
.agent-flex {
|
|
display: flex; gap: 20px; align-items: stretch;
|
|
background: var(--panel); border: 1px solid var(--cyan-dim);
|
|
padding: 12px 16px;
|
|
animation: rise .2s ease both;
|
|
}
|
|
.agent-big {
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
min-width: 64px; padding: 4px 8px;
|
|
font-size: 40px; font-weight: 700; line-height: 1;
|
|
color: var(--cyan); text-shadow: 0 0 18px rgba(89,200,216,.5);
|
|
border-right: 1px solid var(--line-soft);
|
|
}
|
|
.agent-big-sub {
|
|
font-size: 9px; font-weight: 600; letter-spacing: .3em;
|
|
color: var(--muted); margin-top: 6px;
|
|
}
|
|
.agent-groups { flex: 1; display: grid; gap: 10px; min-width: 0; }
|
|
.agent-proj-head {
|
|
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
|
|
font-size: 12px; margin-bottom: 3px;
|
|
}
|
|
.agent-proj-head b { color: var(--ink); letter-spacing: .04em; }
|
|
.agent-proj-meta { font-size: 10.5px; color: var(--faint); letter-spacing: .06em; }
|
|
.agent-run {
|
|
display: flex; gap: 8px; align-items: center;
|
|
font-size: 12px; padding: 3px 0;
|
|
border-bottom: 1px dashed var(--line-soft);
|
|
}
|
|
.agent-run:last-child { border-bottom: none; }
|
|
.agent-run-dot {
|
|
flex: none; width: 6px; height: 6px; border-radius: 50%;
|
|
background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
|
|
animation: pulse .9s infinite;
|
|
}
|
|
.agent-run-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.agent-run-kind {
|
|
flex: none; font-size: 10px; letter-spacing: .1em;
|
|
color: var(--cyan); border: 1px solid var(--cyan-dim); padding: 0 6px;
|
|
}
|
|
.agent-run-time { flex: none; margin-left: auto; font-size: 10.5px; color: var(--faint); }
|
|
|
|
/* ── 审批闸 ─────────────────────────────────────────────── */
|
|
.gate-section { margin-top: 18px; }
|
|
.gate-stripe {
|
|
height: 5px;
|
|
background: repeating-linear-gradient(-45deg,
|
|
var(--amber) 0 9px, transparent 9px 18px);
|
|
opacity: .8;
|
|
}
|
|
.gate-head { padding-top: 12px; position: static; background: none; color: var(--amber); }
|
|
|
|
.gate-card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--amber-dim);
|
|
margin-bottom: 12px;
|
|
animation: rise .25s ease both;
|
|
}
|
|
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }
|
|
|
|
.gate-card-head {
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
.gate-kind {
|
|
font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
|
|
color: var(--bg); background: var(--amber);
|
|
padding: 2px 8px;
|
|
}
|
|
.gate-title { font-weight: 600; }
|
|
.gate-body { padding: 12px 14px; }
|
|
.gate-doc-label { font-size: 10.5px; color: var(--muted); letter-spacing: .18em; margin: 8px 0 4px; }
|
|
.gate-doc-label:first-child { margin-top: 0; }
|
|
|
|
pre.doc {
|
|
background: var(--bg-deep);
|
|
border: 1px solid var(--line-soft);
|
|
border-left: 2px solid var(--green-dim);
|
|
padding: 10px 12px;
|
|
font-family: var(--mono); font-size: 12.5px;
|
|
white-space: pre-wrap; word-break: break-word;
|
|
max-height: 280px; overflow-y: auto;
|
|
color: var(--ink);
|
|
}
|
|
pre.doc.empty { color: var(--faint); border-left-color: var(--line); }
|
|
|
|
.gate-actions {
|
|
display: flex; gap: 10px; align-items: center;
|
|
padding: 10px 14px;
|
|
border-top: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.reject-form { padding: 0 14px 12px; display: flex; gap: 10px; align-items: flex-start; }
|
|
.reject-form textarea {
|
|
flex: 1; min-height: 56px;
|
|
border-color: var(--red-dim);
|
|
}
|
|
.reject-form textarea:focus { border-color: var(--red); }
|
|
|
|
/* ── 按钮 ────────────────────────────────────────────────── */
|
|
.btn {
|
|
font-family: var(--mono); font-size: 12px; font-weight: 600;
|
|
letter-spacing: .08em;
|
|
background: transparent; color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
padding: 6px 14px; cursor: pointer;
|
|
transition: all .12s;
|
|
}
|
|
.btn:hover { border-color: var(--muted); background: var(--panel-2); }
|
|
.btn-xs { padding: 2px 8px; font-size: 11px; }
|
|
.btn-ghost { border-color: transparent; color: var(--muted); }
|
|
.btn-ghost:hover { color: var(--green); border-color: var(--green-dim); background: transparent; }
|
|
|
|
.btn-solid {
|
|
background: var(--green); color: var(--bg-deep); border-color: var(--green);
|
|
}
|
|
.btn-solid:hover { background: #79ec94; border-color: #79ec94; box-shadow: 0 0 14px rgba(95,221,125,.35); }
|
|
|
|
.btn-accept { border-color: var(--green-dim); color: var(--green); }
|
|
.btn-accept:hover { background: var(--green); color: var(--bg-deep); border-color: var(--green); box-shadow: 0 0 14px rgba(95,221,125,.3); }
|
|
.btn-reject { border-color: var(--red-dim); color: var(--red); }
|
|
.btn-reject:hover { background: var(--red); color: var(--bg-deep); border-color: var(--red); box-shadow: 0 0 14px rgba(255,93,93,.3); }
|
|
|
|
.btn:disabled { opacity: .4; cursor: not-allowed; }
|
|
|
|
/* ── 表单 ────────────────────────────────────────────────── */
|
|
.panel { background: var(--panel); border: 1px solid var(--line); }
|
|
.form-panel { padding: 14px; margin-bottom: 14px; }
|
|
.form-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
|
|
.form-row + .form-row { margin-top: 12px; }
|
|
.form-actions { justify-content: flex-end; }
|
|
|
|
label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); letter-spacing: .08em; }
|
|
label.grow { flex: 1; }
|
|
label.narrow input { width: 76px; }
|
|
.req { color: var(--red); }
|
|
|
|
input[type=text], input[type=number], select, textarea {
|
|
font-family: var(--mono); font-size: 13px;
|
|
background: var(--bg-deep); color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
padding: 7px 10px;
|
|
outline: none;
|
|
transition: border-color .12s;
|
|
}
|
|
input:focus, select:focus, textarea:focus { border-color: var(--green-dim); box-shadow: 0 0 0 1px var(--green-dim); }
|
|
textarea { resize: vertical; min-height: 72px; width: 100%; }
|
|
|
|
/* 复杂度分段选择 */
|
|
.seg { display: inline-flex; border: 1px solid var(--line); }
|
|
.seg input { position: absolute; opacity: 0; pointer-events: none; }
|
|
.seg label {
|
|
padding: 7px 13px; cursor: pointer;
|
|
font-size: 11px; font-weight: 700; letter-spacing: .12em;
|
|
color: var(--faint); flex-direction: row;
|
|
}
|
|
.seg label + input + label, .seg input + label { border-left: 0; }
|
|
.seg label:not(:first-of-type) { border-left: 1px solid var(--line); }
|
|
.seg input:checked + label.seg-h { background: var(--red-dim); color: var(--red); }
|
|
.seg input:checked + label.seg-m { background: var(--amber-dim); color: var(--amber); }
|
|
.seg input:checked + label.seg-e { background: var(--green-dim); color: var(--green); }
|
|
|
|
/* ── 任务树筛选栏 ─────────────────────────────────────────── */
|
|
.filter-bar {
|
|
background: var(--panel); border: 1px solid var(--line);
|
|
padding: 8px 10px; margin-bottom: 12px;
|
|
display: flex; flex-direction: column; gap: 7px;
|
|
}
|
|
.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
|
#filterKw { width: 190px; padding: 4px 9px; font-size: 12px; }
|
|
.fchips { display: inline-flex; gap: 6px; }
|
|
.fchip {
|
|
font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
|
|
background: transparent; color: var(--faint);
|
|
border: 1px solid var(--line); padding: 2px 8px;
|
|
cursor: pointer; transition: all .1s;
|
|
}
|
|
.fchip:hover { color: var(--ink); border-color: var(--muted); }
|
|
.fchip.on { color: var(--green); border-color: var(--green-dim); background: rgba(95,221,125,.08); }
|
|
.fc-hard.on { color: var(--red); border-color: var(--red-dim); background: rgba(255,93,93,.08); }
|
|
.fc-medium.on { color: var(--amber); border-color: var(--amber-dim); background: rgba(240,180,41,.08); }
|
|
.fgroup {
|
|
display: inline-flex; align-items: center; gap: 4px;
|
|
padding: 2px 4px; border: 1px dashed var(--line-soft);
|
|
}
|
|
.fgroup-chip { color: var(--muted); }
|
|
.fgroup-chip.part { color: var(--amber); border-color: var(--amber-dim); }
|
|
.fst { font-weight: 400; letter-spacing: .04em; font-size: 10.5px; }
|
|
.filter-count { font-size: 11px; color: var(--amber); letter-spacing: .08em; }
|
|
.task-row.filter-ctx { opacity: .68; }
|
|
.task-row.filter-ctx .t-title { color: var(--muted); }
|
|
|
|
/* ── 任务树 ─────────────────────────────────────────────── */
|
|
.tree-empty {
|
|
padding: 46px 0; text-align: center; color: var(--faint);
|
|
border: 1px dashed var(--line);
|
|
}
|
|
.tree-empty b { display: block; font-size: 15px; color: var(--muted); margin-bottom: 6px; letter-spacing: .2em; }
|
|
|
|
.task-node { border-left: 1px solid var(--line-soft); }
|
|
.task-node.depth-1 { border-left: none; }
|
|
|
|
.task-row {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 8px 10px 8px 6px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
cursor: pointer;
|
|
transition: background .1s;
|
|
}
|
|
.task-row:hover { background: var(--panel); }
|
|
.task-row.is-gate { background: rgba(240,180,41,.045); }
|
|
.task-row.expanded { background: var(--panel-2); }
|
|
|
|
.caret {
|
|
width: 16px; flex: none; text-align: center;
|
|
color: var(--muted); font-size: 10px;
|
|
transition: transform .12s; user-select: none;
|
|
}
|
|
.caret.open { transform: rotate(90deg); color: var(--green); }
|
|
.caret.leaf { color: var(--faint); }
|
|
|
|
.t-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.t-title .t-id { color: var(--faint); font-size: 10.5px; margin-left: 6px; letter-spacing: 0; }
|
|
.task-row .spacer { flex: 1; min-width: 8px; }
|
|
|
|
.t-prio { font-size: 10.5px; color: var(--faint); flex: none; }
|
|
.t-prio.hot { color: var(--amber); }
|
|
|
|
/* 复杂度徽章 */
|
|
.cplx {
|
|
flex: none; font-size: 10px; font-weight: 700; letter-spacing: .14em;
|
|
padding: 1px 7px; border: 1px solid;
|
|
}
|
|
.cplx-hard { color: var(--red); border-color: var(--red-dim); background: rgba(255,93,93,.07); }
|
|
.cplx-medium { color: var(--amber); border-color: var(--amber-dim); background: rgba(240,180,41,.07); }
|
|
.cplx-easy { color: var(--green); border-color: var(--green-dim); background: rgba(95,221,125,.07); }
|
|
|
|
/* 复审结论徽章（exec_review 闸 / RESULT 区块） */
|
|
.verdict {
|
|
display: inline-block; vertical-align: 1px; flex: none;
|
|
font-size: 10px; font-weight: 700; letter-spacing: .14em;
|
|
padding: 1px 7px; margin-left: 6px; border: 1px solid;
|
|
}
|
|
.verdict-approve { color: var(--green); border-color: var(--green-dim); background: rgba(95,221,125,.1); }
|
|
.verdict-reject { color: var(--red); border-color: var(--red-dim); background: rgba(255,93,93,.1); }
|
|
.verdict-none { color: var(--muted); border-color: var(--line); background: rgba(140,150,140,.08); }
|
|
|
|
/* 复审 SUMMARY 区块：略加边框突出 */
|
|
.review-summary { border-left: 2px solid var(--line); padding-left: 10px; }
|
|
|
|
/* 复杂度徽章可点 + 下拉 */
|
|
.cplx-wrap { position: relative; display: inline-flex; flex: none; }
|
|
button.cplx { font-family: var(--mono); cursor: default; }
|
|
button.cplx-btn { cursor: pointer; transition: box-shadow .12s; }
|
|
button.cplx-btn:hover { box-shadow: 0 0 8px rgba(216,228,212,.18); }
|
|
.cplx-pop {
|
|
position: absolute; top: calc(100% + 5px); right: 0; z-index: 60;
|
|
display: flex; gap: 5px;
|
|
background: var(--bg-deep); border: 1px solid var(--line);
|
|
padding: 6px; box-shadow: 0 10px 30px rgba(0,0,0,.65);
|
|
animation: rise .12s ease both;
|
|
}
|
|
.cplx-pop .cplx { cursor: pointer; }
|
|
.cplx-pop .cplx:hover { filter: brightness(1.35); }
|
|
.cplx-pop .cplx.cur { outline: 1px solid currentColor; outline-offset: 1px; }
|
|
|
|
/* 状态 chip */
|
|
.chip {
|
|
flex: none; display: inline-flex; align-items: center; gap: 5px;
|
|
font-size: 11px; padding: 1px 8px;
|
|
border: 1px solid var(--line); color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
.chip-idle { color: var(--muted); }
|
|
.chip-work { color: var(--cyan); border-color: var(--cyan-dim); }
|
|
.chip-gate { color: var(--amber); border-color: var(--amber-dim); }
|
|
.chip-gate::before { animation: pulse 1.4s infinite; }
|
|
.chip-container { color: #9bb4c8; border-color: #2c3c4a; }
|
|
.chip-go { color: var(--green); border-color: var(--green-dim); }
|
|
.chip-run { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px rgba(89,200,216,.25); }
|
|
.chip-run::before { animation: pulse .8s infinite; }
|
|
.chip-hold { color: var(--faint); }
|
|
.chip-bad { color: var(--red); border-color: var(--red-dim); }
|
|
.chip-bad::before { animation: pulse 1s infinite; }
|
|
.chip-done { color: var(--bg-deep); background: var(--green); border-color: var(--green); font-weight: 700; }
|
|
.chip-dead { color: var(--faint); text-decoration: line-through; }
|
|
.chip-dead::before { background: var(--faint); }
|
|
|
|
/* 子节点缩进 */
|
|
.task-children { margin-left: 22px; }
|
|
|
|
/* ── 任务详情 ─────────────────────────────────────────────── */
|
|
.task-detail {
|
|
background: var(--panel);
|
|
border-bottom: 1px solid var(--line);
|
|
border-left: 2px solid var(--green-dim);
|
|
padding: 14px 16px;
|
|
animation: rise .2s ease both;
|
|
}
|
|
.detail-grid { display: grid; gap: 14px; }
|
|
.detail-label { font-size: 10.5px; color: var(--muted); letter-spacing: .18em; margin-bottom: 4px; }
|
|
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
|
|
.approval-item {
|
|
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
|
|
font-size: 12px; padding: 5px 0;
|
|
border-bottom: 1px dashed var(--line-soft);
|
|
}
|
|
.approval-item:last-child { border-bottom: none; }
|
|
.ap-act-accept { color: var(--green); font-weight: 700; }
|
|
.ap-act-reject { color: var(--red); font-weight: 700; }
|
|
.ap-gate { color: var(--muted); }
|
|
.ap-time { color: var(--faint); font-size: 11px; margin-left: auto; }
|
|
.ap-reason { width: 100%; color: var(--amber); font-size: 12px; padding-left: 14px; }
|
|
.ap-reason::before { content: '↳ '; color: var(--faint); }
|
|
|
|
.result-kv { font-size: 12px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
|
|
.result-kv dt { color: var(--muted); }
|
|
.result-kv dd { word-break: break-all; }
|
|
|
|
.write-box { margin-top: 4px; }
|
|
.write-box .form-actions { margin-top: 8px; }
|
|
.detail-actions { display: flex; gap: 10px; }
|
|
|
|
/* ── 事件流 ─────────────────────────────────────────────── */
|
|
.event-list { list-style: none; padding: 0 14px; }
|
|
.event-list li {
|
|
padding: 7px 0 7px 12px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
position: relative;
|
|
font-size: 11.5px;
|
|
animation: rise .25s ease both;
|
|
}
|
|
.event-list li::before {
|
|
content: ''; position: absolute; left: 0; top: 13px;
|
|
width: 5px; height: 5px; background: var(--ev, var(--muted));
|
|
}
|
|
.ev-head { display: flex; gap: 8px; align-items: baseline; }
|
|
.ev-type { font-weight: 600; color: var(--ev, var(--ink)); letter-spacing: .04em; }
|
|
.ev-time { color: var(--faint); font-size: 10.5px; margin-left: auto; flex: none; }
|
|
.ev-detail { color: var(--muted); margin-top: 1px; word-break: break-word; }
|
|
.ev-empty { padding: 30px 0; color: var(--faint); text-align: center; border: none !important; }
|
|
.ev-empty::before { display: none; }
|
|
|
|
li.ev-created { --ev: var(--green); }
|
|
li.ev-status { --ev: var(--cyan); }
|
|
li.ev-approve { --ev: var(--green); }
|
|
li.ev-rejected { --ev: var(--red); }
|
|
li.ev-gatewait { --ev: var(--amber); }
|
|
li.ev-run { --ev: var(--cyan); }
|
|
li.ev-updated { --ev: var(--muted); }
|
|
|
|
/* ── 模态 ────────────────────────────────────────────────── */
|
|
.modal-root { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
|
|
.modal-root[hidden] { display: none; }
|
|
.modal-mask { position: absolute; inset: 0; background: rgba(4,6,5,.78); backdrop-filter: blur(2px); }
|
|
.modal {
|
|
position: relative; width: min(460px, 92vw);
|
|
padding: 18px 20px 20px;
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
box-shadow: 0 0 0 1px var(--green-dim), 0 18px 60px rgba(0,0,0,.6);
|
|
animation: rise .18s ease both;
|
|
}
|
|
.modal .sec-head { padding: 0 0 4px; position: static; background: none; }
|
|
|
|
/* ── Toast ───────────────────────────────────────────────── */
|
|
.toast-root {
|
|
position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
|
|
z-index: 1200; display: flex; flex-direction: column; gap: 8px; align-items: center;
|
|
}
|
|
.toast {
|
|
font-family: var(--mono); font-size: 12.5px;
|
|
background: var(--bg-deep);
|
|
border: 1px solid var(--line);
|
|
padding: 9px 16px;
|
|
max-width: 70vw;
|
|
animation: toastIn .18s ease both;
|
|
box-shadow: 0 8px 30px rgba(0,0,0,.55);
|
|
}
|
|
.toast.err { border-color: var(--red); color: var(--red); }
|
|
.toast.ok { border-color: var(--green-dim); color: var(--green); }
|
|
.toast.warn { border-color: var(--amber-dim); color: var(--amber); }
|
|
.toast.out { opacity: 0; transition: opacity .3s; }
|
|
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
|
|
|
|
/* 待 CC 产出占位 */
|
|
.doc-pending { padding: 10px 12px; border: 1px dashed var(--line, #2a3a2a); color: var(--dim, #6a7a6a); font-style: italic; }
|
|
|
|
/* ── 全局预览模式（全屏读方案 + 就地裁决） ── */
|
|
.preview-root { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; }
|
|
.preview-root[hidden] { display: none; }
|
|
.preview-mask { position: absolute; inset: 0; background: rgba(4,6,5,.86); backdrop-filter: blur(3px); }
|
|
.preview-panel {
|
|
position: relative; display: flex; flex-direction: column;
|
|
width: min(1080px, 94vw); height: 94vh;
|
|
background: var(--panel); border: 1px solid var(--amber-dim);
|
|
box-shadow: 0 0 0 1px var(--line-soft), 0 24px 64px rgba(0,0,0,.6);
|
|
}
|
|
.preview-head {
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
padding: 12px 16px; border-bottom: 1px solid var(--line);
|
|
background: var(--panel-2);
|
|
}
|
|
.preview-title { font-weight: 700; font-size: 15px; color: var(--ink); }
|
|
.preview-body {
|
|
flex: 1; overflow-y: auto; padding: 16px 20px 28px;
|
|
}
|
|
.preview-body .doc {
|
|
font-size: 13.5px; line-height: 1.7;
|
|
white-space: pre-wrap; word-break: break-word;
|
|
max-height: none; overflow-y: visible; /* 解除闸卡片 pre.doc 的 280px 限高，由 .preview-body 统一滚动 */
|
|
}
|
|
.preview-body .gate-doc-label { margin-top: 14px; }
|
|
.preview-foot {
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
padding: 12px 16px; border-top: 1px solid var(--line);
|
|
background: var(--panel-2);
|
|
}
|
|
.preview-reject { flex-basis: 100%; }
|
|
.gate-preview-btn { margin-left: auto; }
|
|
|
|
/* ── Markdown 渲染产出（.doc.md：闸卡片 / 预览 / 任务详情统一） ── */
|
|
.doc.md {
|
|
background: var(--bg-deep);
|
|
border: 1px solid var(--line-soft);
|
|
border-left: 2px solid var(--green-dim);
|
|
padding: 12px 16px;
|
|
font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
|
|
color: var(--ink);
|
|
white-space: normal; word-break: break-word;
|
|
max-height: 280px; overflow-y: auto;
|
|
}
|
|
.gate-body .doc.md { max-height: 280px; }
|
|
.preview-body .doc.md { max-height: none; overflow-y: visible; font-size: 13.5px; }
|
|
.task-detail .doc.md { max-height: 360px; }
|
|
|
|
.doc.md .md-h { font-weight: 700; margin: 14px 0 6px; color: var(--green); }
|
|
.doc.md .md-h:first-child { margin-top: 0; }
|
|
.doc.md .md-h1 { font-size: 1.25em; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
|
|
.doc.md .md-h2 { font-size: 1.15em; color: var(--amber); }
|
|
.doc.md .md-h3 { font-size: 1.05em; }
|
|
.doc.md .md-h4, .doc.md .md-h5, .doc.md .md-h6 { font-size: 1em; color: var(--muted); }
|
|
.doc.md p { margin: 6px 0; }
|
|
.doc.md ul, .doc.md ol { margin: 6px 0; padding-left: 22px; }
|
|
.doc.md li { margin: 3px 0; }
|
|
.doc.md code {
|
|
background: var(--panel-2); border: 1px solid var(--line-soft);
|
|
padding: 0 4px; color: var(--cyan); font-size: .95em;
|
|
}
|
|
.doc.md pre.codeblock {
|
|
background: var(--panel-2); border: 1px solid var(--line-soft);
|
|
border-left: 2px solid var(--cyan-dim);
|
|
padding: 10px 12px; margin: 8px 0;
|
|
white-space: pre-wrap; word-break: break-word; overflow-x: auto;
|
|
}
|
|
.doc.md pre.codeblock code { background: none; border: none; padding: 0; }
|
|
.doc.md blockquote {
|
|
margin: 8px 0; padding: 6px 12px;
|
|
border-left: 2px solid var(--amber-dim); color: var(--muted);
|
|
background: var(--panel-2);
|
|
}
|
|
.doc.md hr { border: none; border-top: 1px dashed var(--line); margin: 12px 0; }
|
|
.doc.md table { border-collapse: collapse; margin: 8px 0; width: 100%; }
|
|
.doc.md th, .doc.md td { border: 1px solid var(--line); padding: 5px 10px; text-align: left; }
|
|
.doc.md th { background: var(--panel-2); color: var(--green); }
|
|
.doc.md a { color: var(--cyan); }
|
|
|
|
/* 顶栏：可执行数量徽章（与 gate-count 同形制，绿色系） */
|
|
.ready-count {
|
|
font-size: 11px; letter-spacing: .12em; color: var(--green);
|
|
border: 1px solid var(--green-dim); padding: 4px 10px;
|
|
}
|
|
|
|
/* ── 顶栏徽章组：默认 图标+数量，hover 展开文字 ── */
|
|
.badge-group { display: flex; align-items: center; gap: 8px; }
|
|
.bdg {
|
|
display: inline-flex; align-items: center;
|
|
font-size: 11.5px; line-height: 1; letter-spacing: .08em;
|
|
height: 28px; padding: 0 10px; /* 固定高度对齐旁边的 .btn，防字形差异撑高 */
|
|
cursor: default; white-space: nowrap;
|
|
}
|
|
.bdg .bdg-ico {
|
|
margin-right: 5px; font-size: 12px; line-height: 1;
|
|
font-family: var(--mono); /* 锁等宽字体，避免符号掉进 emoji 字体放大 */
|
|
}
|
|
.bdg .bdg-n { font-weight: 700; }
|
|
.bdg .bdg-label {
|
|
max-width: 0; opacity: 0; overflow: hidden;
|
|
transition: max-width .28s ease, opacity .22s ease, margin-left .28s ease;
|
|
}
|
|
.bdg:hover .bdg-label { max-width: 8em; opacity: 1; margin-left: 5px; }
|
|
|
|
.bdg-gate { color: var(--amber); border: 1px solid var(--amber-dim); }
|
|
.bdg-gate:not(.zero) { animation: pulse 2.2s infinite; }
|
|
.bdg-ready { color: var(--green); border: 1px solid var(--green-dim); }
|
|
.bdg-run { color: var(--cyan); border: 1px solid var(--cyan-dim); }
|
|
.bdg-run:not(.zero) .bdg-ico { animation: pulse .9s infinite; }
|
|
.bdg.zero { color: var(--faint); border-color: var(--line-soft); animation: none; }
|
|
|
|
/* ── 依赖可视化 ── */
|
|
.t-deps-wait {
|
|
flex: none; font-size: 10.5px; letter-spacing: .06em;
|
|
color: var(--amber); border: 1px dashed var(--amber-dim);
|
|
padding: 1px 7px; line-height: 1.5; white-space: nowrap;
|
|
}
|
|
.dep-list { display: grid; gap: 4px; }
|
|
.dep-item {
|
|
display: flex; align-items: center; gap: 8px;
|
|
font-size: 12px; padding: 4px 10px;
|
|
background: var(--bg-deep); border: 1px solid var(--line-soft);
|
|
border-left: 2px solid var(--amber-dim);
|
|
}
|
|
.dep-item.ok { border-left-color: var(--green-dim); }
|
|
.dep-item.ok .dep-mark { color: var(--green); }
|
|
.dep-item.wait .dep-mark { color: var(--amber); }
|
|
.dep-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
/* 依赖锚点跳转 */
|
|
.dep-item { cursor: pointer; transition: border-color .12s, background .12s; }
|
|
.dep-item:hover { background: var(--panel-2); border-color: var(--muted); }
|
|
.dep-go { margin-left: auto; color: var(--faint); font-size: 12px; }
|
|
.dep-item:hover .dep-go { color: var(--cyan); }
|
|
.task-row.flash { animation: locate-flash 1.8s ease-out; }
|
|
@keyframes locate-flash {
|
|
0%, 35% { background: var(--amber-dim); box-shadow: inset 2px 0 0 var(--amber); }
|
|
100% { background: transparent; box-shadow: none; }
|
|
}
|
|
|
|
/* 徽章组扩展：被阻塞 / 总量 */
|
|
.bdg-blocked { color: var(--amber); border: 1px dashed var(--amber-dim); }
|
|
.bdg-total { color: var(--ink); border: 1px solid var(--line); }
|
|
|
|
/* ── 归档区 ── */
|
|
#archiveSection { margin-top: 28px; opacity: .82; }
|
|
.archive-row {
|
|
display: flex; align-items: center; gap: 10px;
|
|
padding: 7px 12px; font-size: 12.5px;
|
|
border-bottom: 1px dashed var(--line-soft);
|
|
}
|
|
.archive-row:hover { background: var(--panel); }
|
|
.archive-row .t-title { color: var(--muted); }
|
|
.archive-subs { flex: none; font-size: 10.5px; color: var(--faint); }
|
|
.archive-time { flex: none; font-size: 11px; color: var(--faint); }
|
|
.archive-size { font-size: 11px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
|
|
.archive-size select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); padding: 2px 6px; font-family: var(--mono); }
|
|
.archive-pager { display: flex; align-items: center; gap: 12px; padding: 10px 0; justify-content: center; }
|
|
.archive-page { font-size: 11px; color: var(--muted); }
|
|
|
|
/* 归档详情：状态流转时间线 */
|
|
.tl { display: grid; gap: 0; margin-top: 4px; }
|
|
.tl-item {
|
|
display: flex; gap: 12px; align-items: baseline;
|
|
padding: 5px 0 5px 14px; font-size: 12px;
|
|
border-left: 2px solid var(--line);
|
|
position: relative;
|
|
}
|
|
.tl-item::before {
|
|
content: ''; position: absolute; left: -4px; top: 11px;
|
|
width: 6px; height: 6px; border-radius: 50%; background: var(--green-dim);
|
|
}
|
|
.tl-time { flex: none; color: var(--faint); font-size: 11px; min-width: 150px; }
|
|
.tl-text { color: var(--ink); }
|
|
.tl-who { color: var(--muted); font-size: 11px; }
|
|
.archive-row { cursor: pointer; }
|
|
|
|
/* 顶栏动作不换行（同步 todo / 配置 按钮文字曾被挤成两行） */
|
|
.top-actions { flex-wrap: nowrap; }
|
|
.top-actions .btn, .sync-meta { white-space: nowrap; }
|
|
|
|
/* 归档分页底栏：尺寸 chip 组替代原生下拉 */
|
|
.archive-size-chips { display: inline-flex; align-items: center; gap: 6px; margin-left: 18px; }
|
|
.archive-size-label { font-size: 11px; color: var(--faint); margin-right: 2px; }
|
|
|
|
/* 配置面板内的同步行 */
|
|
.cfg-sync-row { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-soft); align-items: center; gap: 10px; }
|