wangjia
00e6bc72e7
- app/src/api.js: 新增 attachmentUrl（inline/下载 URL 构造）与 deleteAttachment 封装 - app/src/app.jsx: taskOps 增 delAttachment（删除→toast→局部刷新） - design/ui_kits/console/TaskTree.jsx: TaskDetail 附件区从纯文本升级为画廊 （图片缩略图点击新标签预览 + 下载按钮 + 确认删除），URL 内联零依赖、删除走 taskOps - design/ui_kits/console/i18n.js: 新增 attSection/attDownload/attDeleteConfirm/ attDeleted/attDeleteFailed（zh/en/es/ja/fr 五语齐全） tsk_dbtI_ffTJll9 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Maestro Design System
Maestro（多项目任务调度平台） 是一个本地优先的任务编排 daemon：管理多个本地 git 项目的任务树，按复杂度（Hard / Medium / Easy）分级驱动审批闸，用后台 agent（Claude Code，经 MCP + Agent SDK）在隔离 git worktree 自动执行任务——改动不自动合并，等人审。
唯一的产品界面是 Web 调度台（看板）：三栏布局（项目侧栏 · 闸+任务树 · 事件流），实时 WebSocket 刷新，页面内 accept/reject。
设计概念：phosphor console（磷光调度台）
整个品牌是一台老式磷光终端的隐喻：碳绿近黑底、磷光绿/琥珀/信号红/青四色信号系统、全站等宽字体中英混排、扫描线+暗角氛围层、零圆角、辉光代替阴影。它看起来像机房里的调度终端，而不是 SaaS 仪表盘。
来源
- 代码库：本地挂载
maestro/（Node/TypeScript daemon + 无框架 vanilla JS 看板）- 视觉唯一事实来源：
maestro/web/style.css（自称 "MAESTRO 调度台 · phosphor console"） - 结构：
maestro/web/index.html；文案与状态模型：maestro/web/app.js、maestro/DESIGN.md、maestro/README.md
- 视觉唯一事实来源：
- 无 Figma、无图片资产 —— logo = 像素章鱼图案（一脑多臂，喻多项目并行调度）+ 纯文字
MAESTRO▮字标（见 ICONOGRAPHY 与guidelines/brand-logo.card.html，15×12 像素图，磷光绿三档 + 暗眼，canvas 或 CSS 均可复现）。 - 字体经 Google Fonts CDN 加载（IBM Plex Mono + Noto Sans SC），仓库内无字体二进制。
CONTENT FUNDAMENTALS（文案基本面）
- 语言：中文为主，术语保留英文。 界面文案是简体中文，但状态机/复杂度/角色词保留英文原样：
HARD / MED / EASY、plan / spec / operations、agent、worktree、accept/reject。中英文混排是常态：「待 Claude Code 产出（经 MCP 写入并提交评审）」。 - 电报式短语，不写完整句。 标签和状态是 2–4 字的压缩词：「可执行」「待审/合」「需人工」「被依赖阻塞」「分析拆解中」。按钮同样短：「+ 新建」「保存配置」「⟳ 同步 todo」。
- 间隔号
·是标点主角。 用于并置短语：「多项目任务调度台」「审批闸 · 等待裁决」「manual · 手动」「P1 · 中」。其次是箭头→（流转）和↳（引用/原因）。 - 称谓：直接称「你」，系统无自称。 「等待你裁决的审批闸」「改动不自动合并、等你审」。语气是工程师对工程师：克制、精确、略带机房黑话（「闸」「裁决」「返工」「兜底」）。
- 无 emoji。 表意一律用 Unicode 几何字符与符号（▍ ▮ ⚠ ▸ ◉ ⟳ ⚙ ⌕ ✕ ↳ ·），见 ICONOGRAPHY。
- 大写字母标签 + 宽字距 用于结构性小标题：
DIFF 摘要、DEPS · 依赖、区块头全大写 +.22em字距。 - 必填用红色
*；占位文案给真实示例：/path/to/repo、npm test（可空）、「要做什么」。 - 空态文案直白且短：「暂无产出与历史」「连接中…」。
VISUAL FOUNDATIONS（视觉基本面）
- 主题：默认深色（磷光终端）；
<html data-theme="light">激活浅色主题——纸白绿灰底，信号色加深保对比，-dim变淡色底，辉光减弱。全部组件走 CSS 变量，自动适配两套主题。 - 多语言：界面 chrome 文案双语（zh / en，见
ui_kits/console/i18n.js）；状态/闸/事件标签经组件的label/kindLabelprop 注入；任务标题等用户内容不翻译。 - 颜色：碳绿近黑的底（
--bg #0a0d0b，带极轻微绿味），三层抬升（bg-deep → panel → panel-2），全部偏绿灰。五个磷光信号色各司其职：绿=可执行/成功/品牌，紫=审批闸/等待裁决（v1.1 起由琥珀改紫，与 MED 复杂度区分），琥珀=警示/MED/待依赖，红=失败/驳回/Hard，青=执行中/agent/链接。每个信号色配一个-dim暗位，专门做边框和半透明底（rgba(信号色, .05–.08)做 chip 底）。文字三档：ink / muted / faint。 - 字体：全站只有一个字族
--mono（IBM Plex Mono + Noto Sans SC 回退）。没有「标题字体」——层级靠字号（10–20px，正文 13px）、字重（400/500/600/700）和字距（.04em–.35em）。全大写 + 宽字距是最强的层级信号。 - 圆角：小而克制（v1.1 起由零圆角调整）：徽章/chip 3px、按钮/输入框 4px、面板/卡片 6px、模态/浮层 10px（
--radius-xs/sm/md/lg）；正圆仍只允许出现在状态点（6–7px 圆点）。 - 边框：1px 细线是主要分界手段（
--line/--line-soft两档）；虚线（dashed）表示空态、占位、弱分组；左侧 2px 实色边表示「当前/激活/文档块」。 - 阴影与辉光：环境光是**辉光（glow）**而非阴影——品牌字、状态点、执行中 chip 都带
0 0 8–18px的同色辉光；hover 按钮发光。黑色外阴影只用于浮层（弹层/模态/Toast）。无内阴影。 - 背景质感：全屏界面盖一层
body::before氛围层——1px 重复扫描线 + 椭圆暗角，opacity .5。无图片、无渐变背景（唯一的「渐变」是 sticky 区块头下缘的淡出，和审批区的磷光紫斜纹警示条repeating-linear-gradient(-45deg)）。 - 动效：快而硬。过渡 .1–.12s；入场统一
rise（5px 上移淡入，.18–.25s）；关键注意力靠 blink（光标方块，steps(1)）和 pulse（透明度脉冲，.8–2.2s，用于等待审批/执行中）。无弹跳、无缓动炫技。 - hover：背景抬一层（panel → panel-2）或边框提亮（line → muted）；强按钮 hover 提亮自身色 + 辉光。press 无单独状态。disabled 是 opacity .4。
- focus：输入框边框变
--green-dim+ 1px 同色 ring（box-shadow），不用浏览器默认 outline。 - 卡片：
--panel底 + 1px--line边，6px 圆角，无阴影；语义卡片用信号色 dim 边（闸卡片紫边、agent 面板青边）。卡片内部用--line-soft分隔头/体/脚。 - 布局：固定三栏 grid（232px / 1fr / 320px），整页 100vh、栏内各自滚动；1100px 以下退化为单栏纵排。区块头 sticky。
- 透明与模糊：模态遮罩
rgba(4,6,5,.78) + blur(2px)；信号色 chip 底用 7–8% 透明信号色。除此之外不用玻璃拟态。 - 选区：
::selection绿底白字。
ICONOGRAPHY（图标系统）
- 统一 SVG 图标集（
assets/icons/，15 个，v1.1 起取代原纯 Unicode 方案）：24×24 网格、2px 圆头描边、双色调——基础笔画currentColor（默认 --muted），语义元素stroke="var(--icon-accent, 信号色回退)"：- gate 紫 · ready/task/add/sync/config/search/git 绿 · running/event/flow 青 · deps/reason 琥珀 · project/close 保持单色
- 内联使用时可按语境覆盖
--icon-accent；<img>引用时用内置回退色（暗色主题值） - 不要引入 lucide/heroicons 等第三方图标库；新图标按同一网格/描边/双色规则绘制
- 品牌字符保留（非图标，锁
--mono等宽字体渲染）：▍区块标题前的色块标记（绿/紫/琥珀/青上色） ·▮logo 末尾的闪烁光标（blink 动画）→状态流转 ·↳驳回原因/引用 ··间隔号 ·—空值 ·«/»面板折叠- 状态点/agent 点：纯 CSS 圆点（非字符）
- emoji 禁用。
字体替代说明
仓库不含字体文件；原产品本身就从 Google Fonts CDN 加载 IBM Plex Mono 与 Noto Sans SC（tokens/fonts.css 沿用同一来源，非替代品，无失真）。如需离线分发，请提供 woff2 文件。
INDEX（目录清单）
styles.css— 全局入口，仅 @importtokens/—colors.css（基底+信号色+语义别名）·typography.css（字族/字号/字距）·effects.css（间距/边框/阴影/动效）·fonts.css（Google Fonts）guidelines/— 设计系统标签页的基础规范卡片（颜色/类型/间距/品牌等）components/core/— Button · StatusChip · ComplexityBadge · CountBadge · QuotaMeter · SectionHeadcomponents/forms/— Input · Select · Textarea · ComplexitySegcomponents/surfaces/— Panel · GateCard · Toast · EventItem · Timelineui_kits/console/— Web 调度台整屏交互复刻（index.html 可点击，侧栏/事件流可折叠；含已归档区分页与归档详情模态）ui_kits/console_mobile/— 移动版调度台（390px 单栏 + 底部 Tab：任务/审批/事件/项目）assets/icons/— 双色调 SVG 图标集（24×24 · 2px 圆头描边 · currentColor + --icon-accent）SKILL.md— Agent Skill 入口