wangjia/maestro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): SVG 图标集替换 Unicode —— tsk_3uhHOGU0qzj0

Browse Source 
用 design/assets/icons/ 的 15 个双色 SVG 图标替换现网纯 Unicode 图标：

• 拷贝 design/assets/icons/*.svg → web/assets/icons/（15 个）
• app.js 顶部新增 ICONS 对象 + icon() 内联 helper
• index.html：徽章组（gate/ready/running/deps）、配置按钮（config）、
  同步按钮（sync）、搜索输入框（search + filter-search-wrap 包装）、
  清除筛选按钮（close）、「新建」/「新建任务」按钮（add）
  各区块头加语义图标：project/task/gate/running/flow
• app.js 模板字符串：⛓→deps、✕→close（任务行取消/预览关闭/归档关闭）、
  依赖等待标签、ap-reason→reason SVG、分支显示→git、事件项 ev-type→event
• style.css：新增 svg.icon 基础尺寸规则、filter-search-wrap 布局、
  各语义上下文 --icon-accent 注入（暗/浅主题均用 CSS 变量自动适配）、
  .ap-reason::before 移除 content:'↳' 改用 SVG
• 品牌字符保留不动：▍▮→·— 及状态 CSS 圆点

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-06-13 15:08:53 +08:00
parent f020e15137
commit 1c4a81b3f3
18 changed files with 100 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+18 -15
View File
@@ -20,8 +20,8 @@
</div>
<div class="side-head">
<span class="head-mark">▍</span>项目
<button class="btn btn-ghost btn-xs" data-action="open-new-project">+ 新建</button>
<span class="head-mark">▍</span><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 3h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg> 项目
<button class="btn btn-ghost btn-xs" data-action="open-new-project"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="4" x2="12" y2="20" stroke="var(--icon-accent,#5fdd7d)"/><line x1="4" y1="12" x2="20" y2="12" stroke="var(--icon-accent,#5fdd7d)"/></svg> 新建</button>
</div>
<ul id="projectList" class="project-list"></ul>
@@ -41,23 +41,23 @@
<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 class="bdg-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3L22 21L2 21Z"/><line x1="12" y1="10" x2="12" y2="14" stroke="var(--icon-accent,#b88ef5)"/><line x1="12" y1="17.5" x2="12" y2="17.51" stroke="var(--icon-accent,#b88ef5)"/></svg></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 class="bdg-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 4L19 12L7 20Z" stroke="var(--icon-accent,#5fdd7d)"/></svg></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 class="bdg-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3" fill="var(--icon-accent,#59c8d8)" stroke="none"/></svg></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 class="bdg-ico"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/><line x1="10" y1="10" x2="14" y2="14" stroke="var(--icon-accent,#f0b429)"/></svg></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>
<button class="btn btn-xs" data-action="toggle-config" title="项目配置（并发 / 工作模式 / todo 同步）"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="3" y1="6" x2="12" y2="6"/><circle cx="15" cy="6" r="2.5" stroke="var(--icon-accent,#5fdd7d)"/><line x1="18" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="5.5" y2="12"/><circle cx="9" cy="12" r="2.5" stroke="var(--icon-accent,#5fdd7d)"/><line x1="12.5" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="12.5" y2="18"/><circle cx="16" cy="18" r="2.5" stroke="var(--icon-accent,#5fdd7d)"/><line x1="19.5" y1="18" x2="21" y2="18"/></svg> 配置</button>
</div>
</header>
@@ -92,25 +92,25 @@
</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>
<button id="btnSync" class="btn btn-xs" data-action="sync-todo"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5" stroke="var(--icon-accent,#5fdd7d)"/></svg> 同步 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 class="sec-head"><span class="head-mark cyan">▍</span><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3" fill="var(--icon-accent,#59c8d8)" stroke="none"/></svg> 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 class="sec-head gate-head"><span class="head-mark violet">▍</span><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3L22 21L2 21Z"/><line x1="12" y1="10" x2="12" y2="14" stroke="var(--icon-accent,#b88ef5)"/><line x1="12" y1="17.5" x2="12" y2="17.51" stroke="var(--icon-accent,#b88ef5)"/></svg> 审批闸 · 等待裁决</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>
<span class="head-mark">▍</span><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2.5"/><polyline points="8 12 11 15 16 9" stroke="var(--icon-accent,#5fdd7d)"/></svg> 任务树
<button class="btn btn-ghost btn-xs" data-action="toggle-new-task"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="4" x2="12" y2="20" stroke="var(--icon-accent,#5fdd7d)"/><line x1="4" y1="12" x2="20" y2="12" stroke="var(--icon-accent,#5fdd7d)"/></svg> 新建任务</button>
</div>
<form id="newTaskPanel" class="panel form-panel" hidden>
@@ -147,11 +147,14 @@
<div id="filterBar" class="filter-bar" hidden>
<div class="filter-row">
<input id="filterKw" type="text" placeholder="⌕ 搜索标题…" autocomplete="off">
<span class="filter-search-wrap">
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="15.5" y1="15.5" x2="21" y2="21" stroke="var(--icon-accent,#5fdd7d)"/></svg>
<input id="filterKw" type="text" placeholder="搜索标题…" autocomplete="off">
</span>
<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>
<button class="btn btn-ghost btn-xs" id="filterClear" data-action="filter-clear" hidden><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg> 清除筛选</button>
</div>
<div id="filterStatus" class="filter-row"></div>
</div>
@@ -175,7 +178,7 @@
<!-- ════════ 右栏：事件流 ════════ -->
<aside id="eventPanel">
<div class="sec-head"><span class="head-mark">▍</span>事件流</div>
<div class="sec-head"><span class="head-mark">▍</span><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="4" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18" stroke="var(--icon-accent,#59c8d8)"/></svg> 事件流</div>
<ul id="eventList" class="event-list"></ul>
</aside>
</div>