wangjia/maestro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b1d881a4b4e45fe1ed54500d6fd4455fa2edcd54
maestro/web/index.html
T
wangjia 10f881130b style(web): 小圆角 + 审批闸琥珀→紫 + 组件样式对齐 design [tsk_KhcaF4zoESVe] 
看板重构 B2：对照 design/components 与 design/tokens 精修 web 组件样式。

圆角（采用 --radius-* 令牌，状态点保持正圆）：
- xs(3) chip/徽章：StatusChip(.chip)、ComplexityBadge(.cplx)、CountBadge 顶栏 count、
  .verdict/.fchip/.fgroup/.gate-kind/.run-st/.t-badge/.t-deps-wait/.agent-run-kind/
  .gate-stripe/.metric-model-bar/.gate-count/.ready-count/.doc.md code
- sm(4) 按钮/输入/doc 块：.btn、input/select/textarea、.seg、.bdg、pre.doc、.doc.md、
  codeblock、.t-pre、.dep-item/.dep-pick、.detail-action-confirm、archive-size select、
  .doc-pending
- md(6) 面板/卡片/toast：.panel、.gate-card、.toast、.filter-bar、.agent-flex/.agent-empty、
  .tree-empty、.metric-card/.metric-models、.run-item、.cplx-pop
- lg(10) 模态/预览浮层：.modal、.preview-panel

审批闸 琥珀→紫（--violet/--violet-dim），与 MED(--amber) 区分：
- gate-stripe 斜纹条、gate-head/gate-section 区块头、gate-card 边框、gate-kind 徽章、
  bdg-gate 待审批徽章、chip-gate 待审/合状态 chip、gate-count、ev-gatewait 事件、
  is-gate 行底色、preview-panel 边框；index.html 审批闸 head-mark 改 violet
- MED 保持琥珀：cplx-medium / seg-m / fc-medium / bdg-blocked / t-deps-wait / dep-item

组件对齐 design 卡片：GateCard 加 overflow:hidden + body 字号 12.5px、gate-title 13px；
浮层阴影统一走 --shadow-pop/modal/toast 令牌；EventItem 圆点 1.5px 微圆角。

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-13 14:45:03 +08:00

213 lines
9.5 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MAESTRO · 任务调度台</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<!-- ════════ 左栏：项目 ════════ -->
<aside id="sidebar">
<div class="logo">
<div class="logo-word">MAESTRO<span class="cursor">▮</span></div>
<div class="logo-sub">多项目任务调度台</div>
</div>
<div class="side-head">
<span class="head-mark">▍</span>项目
<button class="btn btn-ghost btn-xs" data-action="open-new-project">+ 新建</button>
</div>
<ul id="projectList" class="project-list"></ul>
<div class="side-foot">
<span id="wsDot" class="ws-dot off"></span>
<span id="wsText">连接中…</span>
</div>
</aside>
<!-- ════════ 中栏：闸 + 任务树 ════════ -->
<main id="main">
<header id="topbar">
<div>
<div id="projTitle" class="proj-title">—</div>
<div id="projMeta" class="proj-meta"></div>
</div>
<div class="spacer"></div>
<div id="badgeGroup" class="badge-group" hidden>
<span id="bdgGate" class="bdg bdg-gate" title="等待你裁决的审批闸">
<span class="bdg-ico">⚠</span><span class="bdg-n">0</span><span class="bdg-label">待审批</span>
</span>
<span id="bdgReady" class="bdg bdg-ready" title="可执行（依赖已满足）+ 排队中">
<span class="bdg-ico">▸</span><span class="bdg-n">0</span><span class="bdg-label">待执行</span>
</span>
<span id="bdgRun" class="bdg bdg-run" title="agent 正在执行">
<span class="bdg-ico">◉</span><span class="bdg-n">0</span><span class="bdg-label">执行中</span>
</span>
<span id="bdgBlocked" class="bdg bdg-blocked" title="被依赖阻塞（依赖完成后自动放行）">
<span class="bdg-ico">⛓</span><span class="bdg-n">0</span><span class="bdg-label">被阻塞</span>
</span>
<span id="bdgTotal" class="bdg bdg-total" title="未完成任务总量（不含 done / 已拆解容器 / 取消）">
<span class="bdg-ico">Σ</span><span class="bdg-n">0</span><span class="bdg-label">总量</span>
</span>
</div>
<div id="topActions" class="top-actions" hidden>
<button class="btn btn-xs" data-action="toggle-config" title="项目配置（并发 / 工作模式 / todo 同步）">⚙ 配置</button>
</div>
</header>
<section id="configPanel" class="panel config-panel" hidden>
<div class="form-row">
<label class="narrow">最大并发
<input id="cfgConcurrency" type="number" min="1" step="1" value="1">
</label>
<label>工作模式
<select id="cfgAutonomy">
<option value="manual">manual · 手动</option>
<option value="auto-easy">auto-easy · 自动执行 Easy</option>
<option value="auto-approved">auto-approved · 自动执行已批准</option>
</select>
</label>
<span id="cfgCurrent" class="cfg-current"></span>
<button class="btn btn-solid" data-action="save-config">保存配置</button>
<button class="btn" data-action="toggle-config">收起</button>
</div>
<div class="form-row">
<label class="grow">Logo
<input id="cfgLogo" type="text" placeholder="图片 URL 或仓库内相对路径；留空=自动（仓库 logo→git 头像→首字母）">
</label>
</div>
<div class="form-row">
<label class="grow">校验命令
<input id="cfgVerifyCmd" type="text" placeholder="npm test · go test ./... （可空）" autocomplete="off">
</label>
<label class="grow">项目 Model
<input id="cfgModel" type="text" placeholder="claude-opus-4-5（可空，留空用全局默认）" autocomplete="off">
</label>
</div>
<div class="form-row cfg-sync-row">
<span id="syncMeta" class="sync-meta"></span>
<button id="btnSync" class="btn btn-xs" data-action="sync-todo">⟳ 同步 todo</button>
</div>
</section>
<section id="agentSection" class="agent-section">
<div class="sec-head"><span class="head-mark cyan">▍</span>Agent 执行<span id="agentTotal" class="agent-total"></span></div>
<div id="agentBody"></div>
</section>
<section id="gateSection" class="gate-section" hidden>
<div class="gate-stripe"></div>
<div class="sec-head gate-head"><span class="head-mark violet">▍</span>审批闸 · 等待裁决</div>
<div id="gateList"></div>
</section>
<section id="taskSection">
<div class="sec-head">
<span class="head-mark">▍</span>任务树
<button class="btn btn-ghost btn-xs" data-action="toggle-new-task">+ 新建任务</button>
</div>
<form id="newTaskPanel" class="panel form-panel" hidden>
<div class="form-row">
<label class="grow">标题 <span class="req">*</span>
<input name="title" type="text" placeholder="要做什么" autocomplete="off">
</label>
</div>
<div class="form-row">
<label>复杂度 <span class="req">*</span>
<span class="seg" id="cplxSeg">
<input type="radio" name="complexity" value="auto" id="cx-a" checked><label for="cx-a" class="seg-a" title="由模型判断复杂度">AUTO</label>
<input type="radio" name="complexity" value="hard" id="cx-h"><label for="cx-h" class="seg-h">HARD</label>
<input type="radio" name="complexity" value="medium" id="cx-m"><label for="cx-m" class="seg-m">MEDIUM</label>
<input type="radio" name="complexity" value="easy" id="cx-e"><label for="cx-e" class="seg-e">EASY</label>
</span>
</label>
<label>父任务
<select name="parentId"><option value="">（顶层）</option></select>
</label>
<label class="narrow">优先级
<select name="priority">
<option value="0">P0 · 高</option>
<option value="1" selected>P1 · 中</option>
<option value="2">P2 · 低</option>
</select>
</label>
</div>
<div class="form-row form-actions">
<button type="submit" class="btn btn-solid">创建任务</button>
<button type="button" class="btn" data-action="toggle-new-task">取消</button>
</div>
</form>
<div id="filterBar" class="filter-bar" hidden>
<div class="filter-row">
<input id="filterKw" type="text" placeholder="⌕ 搜索标题…" autocomplete="off">
<span id="filterCplx" class="fchips"></span>
<span class="spacer"></span>
<span id="filterCount" class="filter-count"></span>
<button class="btn btn-ghost btn-xs" id="filterClear" data-action="filter-clear" hidden>✕ 清除筛选</button>
</div>
<div id="filterStatus" class="filter-row"></div>
</div>
<div id="taskTree"></div>
</section>
<!-- ════════ 指标面板（执行时长 / 成功率 / 复审 / 重试 / 额度估算） ════════ -->
<section id="metricsSection" class="metrics-section" hidden>
<div class="sec-head"><span class="head-mark cyan">▍</span>指标 · 健康度与成本<span id="metricsScope" class="metrics-scope"></span></div>
<div id="metricsBody"></div>
</section>
<!-- ════════ 已归档（done / 取消，时间倒序分页） ════════ -->
<section id="archiveSection" hidden>
<div class="sec-head"><span class="head-mark">▣</span>已归档 · <span id="archiveCount">0</span></div>
<div id="archiveList"></div>
<div id="archivePager" class="archive-pager"></div>
</section>
</main>
<!-- ════════ 右栏：事件流 ════════ -->
<aside id="eventPanel">
<div class="sec-head"><span class="head-mark">▍</span>事件流</div>
<ul id="eventList" class="event-list"></ul>
</aside>
</div>
<!-- 新建项目 模态 -->
<div id="modalRoot" class="modal-root" hidden>
<div class="modal-mask" data-action="close-modal"></div>
<form id="newProjectForm" class="modal panel">
<div class="sec-head"><span class="head-mark">▍</span>新建项目</div>
<label>名称 <span class="req">*</span>
<input name="name" type="text" placeholder="my-project" autocomplete="off">
</label>
<label>仓库路径 <span class="req">*</span>
<input name="repoPath" type="text" placeholder="/path/to/repo" autocomplete="off">
</label>
<label>默认分支
<input name="defaultBranch" type="text" placeholder="main">
</label>
<label>校验命令
<input name="verifyCmd" type="text" placeholder="npm test（可空）">
</label>
<div class="form-row form-actions">
<button type="submit" class="btn btn-solid">创建</button>
<button type="button" class="btn" data-action="close-modal">取消</button>
</div>
</form>
</div>
<div id="previewRoot" class="preview-root" hidden></div>
<div id="archiveModalRoot" class="preview-root" hidden></div>
<div id="toastRoot" class="toast-root"></div>
<script src="app.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink