wangjia
5a1e185b1a
phosphor console v1.1 设计系统（从现网 web/style.css 演化）：tokens(colors/effects/ typography/fonts) + components(core/forms/surfaces .jsx) + ui_kits(console + console_mobile) + assets/icons(15 双色 SVG) + guidelines + CLAUDE/SKILL/readme。供 B1–B6 重构任务对照实现。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
80 lines
8.7 KiB
Markdown
80 lines
8.7 KiB
Markdown
# 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`/`kindLabel` prop 注入；任务标题等用户内容不翻译。
|
||
- **颜色**：碳绿近黑的底（`--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` — 全局入口，仅 @import
|
||
- `tokens/` — `colors.css`（基底+信号色+语义别名）· `typography.css`（字族/字号/字距）· `effects.css`（间距/边框/阴影/动效）· `fonts.css`（Google Fonts）
|
||
- `guidelines/` — 设计系统标签页的基础规范卡片（颜色/类型/间距/品牌等）
|
||
- `components/core/` — Button · StatusChip · ComplexityBadge · CountBadge · QuotaMeter · SectionHead
|
||
- `components/forms/` — Input · Select · Textarea · ComplexitySeg
|
||
- `components/surfaces/` — Panel · GateCard · Toast · EventItem · Timeline
|
||
- `ui_kits/console/` — Web 调度台整屏交互复刻（index.html 可点击，侧栏/事件流可折叠；含已归档区分页与归档详情模态）
|
||
- `ui_kits/console_mobile/` — 移动版调度台（390px 单栏 + 底部 Tab：任务/审批/事件/项目）
|
||
- `assets/icons/` — 双色调 SVG 图标集（24×24 · 2px 圆头描边 · currentColor + --icon-accent）
|
||
- `SKILL.md` — Agent Skill 入口
|