docs(design): 解压 Maestro Design System 到 design/（重构参照材料）
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>
This commit is contained in:
wangjia
@@ -0,0 +1,28 @@
|
||||
<!-- @dsCard group="Brand" viewport="700x280" subtitle="双色调图标集：基础笔画中性灰 + 语义元素信号色 · 24×24 · 2px 圆头描边 · assets/icons/" name="图标 · Icons" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:16px;display:grid;gap:10px}
|
||||
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
|
||||
.g{border:1px solid var(--line-soft);border-radius:6px;padding:12px 4px 8px;text-align:center;color:var(--muted)}
|
||||
.g svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.f{font-size:9.5px;color:var(--muted);letter-spacing:.04em;margin-top:6px}
|
||||
.note{font-size:10px;color:var(--faint);letter-spacing:.06em;line-height:1.6}</style></head><body>
|
||||
<div class="grid">
|
||||
<div class="g" style="--icon-accent:var(--violet)"><svg viewBox="0 0 24 24"><path d="M12 3 L22 21 L2 21 Z"/><line x1="12" y1="10" x2="12" y2="14" stroke="var(--icon-accent)"/><line x1="12" y1="17.5" x2="12" y2="17.51" stroke="var(--icon-accent)"/></svg><div class="f">gate 待审批</div></div>
|
||||
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><path d="M7 4 L19 12 L7 20 Z" stroke="var(--icon-accent)"/></svg><div class="f">ready 可执行</div></div>
|
||||
<div class="g" style="--icon-accent:var(--cyan)"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="3" fill="var(--icon-accent)" stroke="none"/></svg><div class="f">running 执行中</div></div>
|
||||
<div class="g" style="--icon-accent:var(--cyan)"><svg viewBox="0 0 24 24"><polyline points="2 12 7 12 10 5 14 19 17 12 22 12" stroke="var(--icon-accent)"/></svg><div class="f">event 事件</div></div>
|
||||
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2.5"/><polyline points="8 12 11 15 16 9" stroke="var(--icon-accent)"/></svg><div class="f">task 任务</div></div>
|
||||
<div class="g" style="--icon-accent:var(--amber)"><svg viewBox="0 0 24 24"><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)"/></svg><div class="f">deps 依赖</div></div>
|
||||
<div class="g" style="--icon-accent:var(--amber)"><svg viewBox="0 0 24 24"><polyline points="5 4 5 14 18 14"/><polyline points="13 9 18 14 13 19" stroke="var(--icon-accent)"/></svg><div class="f">reason 原因</div></div>
|
||||
<div class="g" style="--icon-accent:var(--cyan)"><svg viewBox="0 0 24 24"><line x1="4" y1="12" x2="19" y2="12"/><polyline points="13 6 19 12 13 18" stroke="var(--icon-accent)"/></svg><div class="f">flow 流转</div></div>
|
||||
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9" stroke="var(--icon-accent)"/></svg><div class="f">git 项目仓库</div></div>
|
||||
<div class="g"><svg viewBox="0 0 24 24"><path d="M3 7 a2 2 0 0 1 2-2 h4 l2 3 h8 a2 2 0 0 1 2 2 v8 a2 2 0 0 1-2 2 H5 a2 2 0 0 1-2-2 Z"/></svg><div class="f">project 项目</div></div>
|
||||
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><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)"/></svg><div class="f">sync 同步</div></div>
|
||||
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="12" y2="6"/><circle cx="15" cy="6" r="2.5" stroke="var(--icon-accent)"/><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)"/><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)"/><line x1="19.5" y1="18" x2="21" y2="18"/></svg><div class="f">config 配置</div></div>
|
||||
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><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)"/></svg><div class="f">search 搜索</div></div>
|
||||
<div class="g" style="--icon-accent:var(--green)"><svg viewBox="0 0 24 24"><line x1="12" y1="4" x2="12" y2="20" stroke="var(--icon-accent)"/><line x1="4" y1="12" x2="20" y2="12" stroke="var(--icon-accent)"/></svg><div class="f">add 新建</div></div>
|
||||
<div class="g"><svg viewBox="0 0 24 24"><line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/></svg><div class="f">close 关闭</div></div>
|
||||
</div>
|
||||
<div class="note">双色调规则：基础笔画 currentColor（默认 --muted）；语义元素 stroke=var(--icon-accent, 信号色回退)——内联使用时按语境覆盖，<img> 引用时用内置回退色。纯工具图标（project/close）保持单色。文件：assets/icons/<name>.svg · ▍/▮ 为品牌字符保留</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!-- @dsCard group="Brand" viewport="700x230" subtitle="像素章鱼图案：一脑多臂 · 横排锁定 + 独立方形徽标" name="Logo" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
body{margin:0;background:var(--bg-deep);font-family:var(--mono);height:230px;display:flex;align-items:center;justify-content:center;gap:56px}
|
||||
canvas{image-rendering:pixelated;filter:drop-shadow(0 0 7px rgba(95,221,125,.4))}
|
||||
.lockup{display:flex;align-items:center;gap:16px}
|
||||
.logo-word{font-size:24px;font-weight:700;letter-spacing:.28em;color:var(--green);text-shadow:0 0 12px rgba(95,221,125,.45)}
|
||||
.cursor{animation:maestro-blink 1.1s steps(1) infinite;margin-left:1px}
|
||||
.logo-sub{margin-top:3px;font-size:11px;color:var(--muted);letter-spacing:.35em}
|
||||
.badge{width:108px;height:108px;border:1px solid var(--green-dim);border-radius:10px;display:flex;align-items:center;justify-content:center}
|
||||
.lab{font-size:10px;color:var(--faint);letter-spacing:.1em;text-align:center;margin-top:10px;white-space:nowrap}
|
||||
.col{text-align:center}
|
||||
.divider{width:1px;height:120px;background:var(--line-soft)}
|
||||
</style></head><body>
|
||||
|
||||
<div class="col">
|
||||
<div class="lockup">
|
||||
<canvas id="markA" width="15" height="12"></canvas>
|
||||
<div>
|
||||
<div class="logo-word">MAESTRO<span class="cursor">▮</span></div>
|
||||
<div class="logo-sub">多项目任务调度台</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lab">横排锁定 · 侧栏 / 文档页眉</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<div class="col">
|
||||
<div class="badge"><canvas id="markB" width="15" height="12"></canvas></div>
|
||||
<div class="lab">方形徽标 · favicon / 头像</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 像素章鱼 15×12 — L 高光 / G 磷光绿 / D 暗位 / E 眼
|
||||
const MAP = [
|
||||
'.....LLLLL.....',
|
||||
'...LLLLLLLLL...',
|
||||
'..GGGGGGGGGGG..',
|
||||
'..GGEEGGGEEGG..',
|
||||
'..GGEEGGGEEGG..',
|
||||
'..GGGGGGGGGGG..',
|
||||
'...GGGGGGGGG...',
|
||||
'...G..G.G..G...',
|
||||
'...G..G.G..G...',
|
||||
'..G...G.G...G..',
|
||||
'..D...D.D...D..',
|
||||
'.D...D...D...D.',
|
||||
];
|
||||
const INK = { L: '#79ec94', G: '#5fdd7d', D: '#2e6b3d', E: '#070908' };
|
||||
function draw(id, scale) {
|
||||
const c = document.getElementById(id);
|
||||
const ctx = c.getContext('2d');
|
||||
MAP.forEach((row, y) => [...row].forEach((ch, x) => {
|
||||
if (INK[ch]) { ctx.fillStyle = INK[ch]; ctx.fillRect(x, y, 1, 1); }
|
||||
}));
|
||||
c.style.width = (15 * scale) + 'px';
|
||||
c.style.height = (12 * scale) + 'px';
|
||||
}
|
||||
draw('markA', 4.4);
|
||||
draw('markB', 5.6);
|
||||
</script>
|
||||
</body></html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!-- @dsCard group="Brand" viewport="700x150" subtitle="动效三件套：blink（光标）· pulse（等待/执行）· rise（入场）" name="动效 · Motion" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:20px;display:flex;align-items:center;gap:24px;font-size:10px}
|
||||
.c{flex:1;text-align:center;border:1px solid var(--line-soft);border-radius:8px;padding:16px 8px}
|
||||
.f{color:var(--muted);margin-top:10px}
|
||||
.blink{font-size:20px;color:var(--green);animation:maestro-blink 1.1s steps(1) infinite}
|
||||
.pulse{display:inline-block;font-size:11px;letter-spacing:.12em;color:var(--violet);border:1px solid var(--violet-dim);padding:4px 10px;border-radius:4px;animation:maestro-pulse 2.2s infinite}
|
||||
.rise{display:inline-block;font-size:11px;background:var(--panel);border:1px solid var(--line);padding:6px 12px;border-radius:6px;animation:maestro-rise .25s ease both infinite alternate;animation-duration:1.6s}</style></head><body>
|
||||
<div class="c"><span class="blink">▮</span><div class="f">blink · steps(1) 1.1s · 硬切</div></div>
|
||||
<div class="c"><span class="pulse">2 项待审批</span><div class="f">pulse · 透明度脉冲 .8–2.2s</div></div>
|
||||
<div class="c"><span class="rise">任务创建</span><div class="f">rise · 5px 上移淡入 .18–.25s</div></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<!-- @dsCard group="Brand" viewport="700x160" subtitle="氛围层：1px 扫描线 + 暗角；琥珀斜纹警示条" name="质感 · Texture" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:10px}
|
||||
.f{color:var(--muted);margin-top:6px}
|
||||
.scan{position:relative;height:96px;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}
|
||||
.scan::before{content:'';position:absolute;inset:0;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}
|
||||
.stripe{height:5px;background:repeating-linear-gradient(-45deg,var(--violet) 0 9px,transparent 9px 18px);opacity:.8}</style></head><body>
|
||||
<div><div class="scan">扫描线 + 暗角 · body::before</div><div class="f">全屏界面统一氛围层 · opacity .5</div></div>
|
||||
<div><div style="height:96px;border:1px solid var(--violet-dim);border-radius:6px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column"><div class="stripe"></div><div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--violet);font-size:11px;letter-spacing:.22em">审批闸 · 等待裁决</div></div><div class="f">磷光紫斜纹 · 审批区警示条</div></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!-- @dsCard group="Colors" viewport="700x130" subtitle="文字三档：ink / muted / faint" name="文字色 · Ink" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--mono);padding:18px 20px;display:grid;gap:12px;font-size:13px;line-height:1.55}
|
||||
.row{display:flex;align-items:baseline;gap:14px}
|
||||
.t{flex:1}.k{font-size:10px;letter-spacing:.12em;width:90px;flex:none}</style></head><body>
|
||||
<div class="row" style="color:var(--ink)"><span class="k">--ink</span><span class="t">正文与标题：建任务 → 审批闸 → ready → 执行 → 等你审。</span><span style="font-size:10px;opacity:.6">#d8e4d4</span></div>
|
||||
<div class="row" style="color:var(--muted)"><span class="k">--muted</span><span class="t">次要信息、区块头、表单 label、meta 行。</span><span style="font-size:10px;opacity:.8">#76876f</span></div>
|
||||
<div class="row" style="color:var(--faint)"><span class="k">--faint</span><span class="t">弱化：占位、路径、时间戳、disabled。</span><span style="font-size:10px">#4a5747</span></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,26 @@
|
||||
<!-- @dsCard group="Colors" viewport="700x180" subtitle="Light 主题：<html data-theme="light"> 激活，信号色加深保对比" name="Light 主题" -->
|
||||
<!doctype html><html lang="zh-CN" data-theme="light"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--mono);color:var(--ink);padding:16px;display:grid;gap:12px}
|
||||
.row{display:flex;gap:10px}
|
||||
.sw{flex:1;height:56px;border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end;padding:6px 9px}
|
||||
.n{font-size:10px;font-weight:600;letter-spacing:.06em}
|
||||
.demo{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
|
||||
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:1px 8px;border:1px solid;border-radius:3px}
|
||||
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}</style></head><body>
|
||||
<div class="row">
|
||||
<div class="sw" style="background:var(--bg-deep)"><span class="n">--bg-deep</span></div>
|
||||
<div class="sw" style="background:var(--bg)"><span class="n">--bg</span></div>
|
||||
<div class="sw" style="background:var(--panel)"><span class="n">--panel</span></div>
|
||||
<div class="sw" style="background:var(--panel-2)"><span class="n">--panel-2</span></div>
|
||||
<div class="sw" style="background:var(--line)"><span class="n">--line</span></div>
|
||||
</div>
|
||||
<div class="demo">
|
||||
<button style="font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;background:var(--green);color:var(--bg-deep);border:1px solid var(--green);border-radius:4px;padding:6px 14px">创建任务</button>
|
||||
<span class="chip" style="color:var(--violet);border-color:var(--violet-dim)">待审/合</span>
|
||||
<span class="chip" style="color:var(--cyan);border-color:var(--cyan)">执行中</span>
|
||||
<span class="chip" style="color:var(--red);border-color:var(--red-dim)">失败</span>
|
||||
<span style="font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--amber);border:1px solid var(--amber-dim);border-radius:3px;padding:1px 7px">MED</span>
|
||||
<span style="font-size:13px;font-weight:700;letter-spacing:.28em;color:var(--green);text-shadow:var(--glow-green)">MAESTRO▮</span>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!-- @dsCard group="Colors" viewport="700x300" subtitle="五个磷光信号色 + 状态机分组全展示（审批闸已由琥珀改为磷光紫）" name="信号色 · Signals" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--mono);color:var(--ink);padding:16px;display:grid;gap:14px}
|
||||
.cols{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
|
||||
.col{border:1px solid var(--line-soft);border-radius:6px;overflow:hidden}
|
||||
.main{height:64px;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 10px;color:var(--bg-deep)}
|
||||
.dim{height:34px;display:flex;align-items:center;padding:0 10px;font-size:10px;color:var(--ink)}
|
||||
.n{font-size:11px;font-weight:700;letter-spacing:.08em}.v{font-size:10px;opacity:.75}
|
||||
.u{font-size:10px;color:var(--muted);padding:5px 10px;border-top:1px solid var(--line-soft)}
|
||||
.head{font-size:10px;color:var(--muted);letter-spacing:.18em}
|
||||
.chips{display:flex;gap:8px;flex-wrap:wrap}
|
||||
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:1px 8px;border:1px solid var(--line);color:var(--muted);border-radius:3px;white-space:nowrap}
|
||||
.chip::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
|
||||
.c-gate{color:var(--violet);border-color:var(--violet-dim)}
|
||||
.c-go{color:var(--green);border-color:var(--green-dim)}
|
||||
.c-run{color:var(--cyan);border-color:var(--cyan)}
|
||||
.c-work{color:var(--cyan);border-color:var(--cyan-dim)}
|
||||
.c-hold{color:var(--faint)}
|
||||
.c-bad{color:var(--red);border-color:var(--red-dim)}
|
||||
.c-done{color:var(--bg-deep);background:var(--green);border-color:var(--green);font-weight:700}
|
||||
.c-dead{color:var(--faint);text-decoration:line-through}
|
||||
.c-container{color:#9bb4c8;border-color:#2c3c4a}</style></head><body>
|
||||
<div class="cols">
|
||||
<div class="col"><div class="main" style="background:var(--green)"><span class="n">--green</span><span class="v">#5fdd7d</span></div><div class="dim" style="background:var(--green-dim)">--green-dim</div><div class="u">可执行 · 完成 · 品牌</div></div>
|
||||
<div class="col"><div class="main" style="background:var(--violet)"><span class="n">--violet</span><span class="v">#b88ef5</span></div><div class="dim" style="background:var(--violet-dim)">--violet-dim</div><div class="u">审批闸 · 等待裁决</div></div>
|
||||
<div class="col"><div class="main" style="background:var(--cyan)"><span class="n">--cyan</span><span class="v">#59c8d8</span></div><div class="dim" style="background:var(--cyan-dim)">--cyan-dim</div><div class="u">执行中 · agent</div></div>
|
||||
<div class="col"><div class="main" style="background:var(--amber)"><span class="n">--amber</span><span class="v">#f0b429</span></div><div class="dim" style="background:var(--amber-dim)">--amber-dim</div><div class="u">警示 · MED · 待依赖</div></div>
|
||||
<div class="col"><div class="main" style="background:var(--red)"><span class="n">--red</span><span class="v">#ff5d5d</span></div><div class="dim" style="background:var(--red-dim)">--red-dim</div><div class="u">失败 · 驳回 · HARD</div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="head" style="margin-bottom:8px">16 个任务状态 · 按状态机分组上色</div>
|
||||
<div class="chips">
|
||||
<span class="chip">新建</span>
|
||||
<span class="chip c-work">分析拆解中</span>
|
||||
<span class="chip c-gate">待确认拆解</span>
|
||||
<span class="chip c-container">已拆解</span>
|
||||
<span class="chip c-work">写方案中</span>
|
||||
<span class="chip c-gate">待确认方案</span>
|
||||
<span class="chip c-go">可执行</span>
|
||||
<span class="chip c-hold">被依赖阻塞</span>
|
||||
<span class="chip c-go">排队中</span>
|
||||
<span class="chip c-run">执行中</span>
|
||||
<span class="chip c-gate">待审/合</span>
|
||||
<span class="chip c-bad">失败</span>
|
||||
<span class="chip c-bad">需人工</span>
|
||||
<span class="chip c-done">完成</span>
|
||||
<span class="chip c-hold">暂停</span>
|
||||
<span class="chip c-dead">取消</span>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!-- @dsCard group="Colors" viewport="700x150" subtitle="碳绿基底四层抬升 + 两档描边" name="基底 · Surfaces" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--mono);color:var(--ink);padding:16px;display:flex;gap:10px}
|
||||
.sw{flex:1;height:118px;border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 10px}
|
||||
.n{font-size:11px;font-weight:600;letter-spacing:.08em}.v{font-size:10px;color:var(--muted)}</style></head><body>
|
||||
<div class="sw" style="background:var(--bg-deep)"><span class="n">--bg-deep</span><span class="v">#070908 · 侧栏/输入</span></div>
|
||||
<div class="sw" style="background:var(--bg)"><span class="n">--bg</span><span class="v">#0a0d0b · 主背景</span></div>
|
||||
<div class="sw" style="background:var(--panel)"><span class="n">--panel</span><span class="v">#10140f · 卡片</span></div>
|
||||
<div class="sw" style="background:var(--panel-2)"><span class="n">--panel-2</span><span class="v">#151b14 · hover/抬升</span></div>
|
||||
<div class="sw" style="background:var(--line)"><span class="n">--line</span><span class="v">#232d23 · 描边</span></div>
|
||||
<div class="sw" style="background:var(--line-soft)"><span class="n">--line-soft</span><span class="v">#1a221a · 弱描边</span></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!-- @dsCard group="Colors" viewable="true" viewport="700x140" subtitle="信号色 7–8% 透明底 + dim 边框的 chip 配方" name="信号底 · Tints" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);font-family:var(--mono);padding:20px;display:flex;gap:10px;flex-wrap:wrap;align-content:center}
|
||||
.tile{flex:1;min-width:140px;height:96px;border:1px solid;border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}
|
||||
.lab{font-size:10px;font-weight:700;letter-spacing:.14em;padding:1px 7px;border:1px solid;border-radius:3px}
|
||||
.f{font-size:10px;color:var(--muted)}</style></head><body>
|
||||
<div class="tile" style="background:rgba(95,221,125,.07);border-color:var(--green-dim)"><span class="lab" style="color:var(--green);border-color:var(--green-dim)">EASY</span><span class="f">rgba(green,.07)</span></div>
|
||||
<div class="tile" style="background:rgba(240,180,41,.07);border-color:var(--amber-dim)"><span class="lab" style="color:var(--amber);border-color:var(--amber-dim)">MED</span><span class="f">rgba(amber,.07)</span></div>
|
||||
<div class="tile" style="background:rgba(255,93,93,.07);border-color:var(--red-dim)"><span class="lab" style="color:var(--red);border-color:var(--red-dim)">HARD</span><span class="f">rgba(red,.07)</span></div>
|
||||
<div class="tile" style="background:rgba(184,142,245,.08);border-color:var(--violet-dim)"><span class="lab" style="color:var(--violet);border-color:var(--violet-dim)">GATE</span><span class="f">rgba(violet,.08)</span></div>
|
||||
<div class="tile" style="background:rgba(89,200,216,.07);border-color:var(--cyan-dim)"><span class="lab" style="color:var(--cyan);border-color:var(--cyan-dim)">RUN</span><span class="f">rgba(cyan,.07)</span></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<!-- @dsCard group="Spacing" viewport="700x150" subtitle="边框语言：细线两档 · 虚线空态 · 2px 左侧强调边" name="边框 · Borders" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;font-size:11px}
|
||||
.b{height:110px;padding:10px;border-radius:6px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
|
||||
.f{color:var(--muted);font-size:10px}</style></head><body>
|
||||
<div class="b" style="background:var(--panel);border:1px solid var(--line)"><b>1px --line</b><span class="f">标准卡片边</span></div>
|
||||
<div class="b" style="background:var(--panel);border:1px solid var(--line-soft)"><b>1px --line-soft</b><span class="f">内部分隔</span></div>
|
||||
<div class="b" style="border:1px dashed var(--line)"><b>1px dashed</b><span class="f">空态 / 占位 / 弱分组</span></div>
|
||||
<div class="b" style="background:var(--panel);border-bottom:1px solid var(--line);border-left:2px solid var(--green-dim)"><b>2px 左侧强调</b><span class="f">激活项 / 详情 / doc 块</span></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!-- @dsCard group="Spacing" viewport="700x150" subtitle="辉光替代阴影；黑色外阴影只给浮层" name="辉光 · Glow" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:20px;display:flex;align-items:center;gap:26px;font-size:10px}
|
||||
.c{text-align:center}.f{color:var(--muted);margin-top:8px}</style></head><body>
|
||||
<div class="c"><span style="font-size:17px;font-weight:700;letter-spacing:.28em;color:var(--green);text-shadow:0 0 12px rgba(95,221,125,.45)">MAESTRO</span><div class="f">品牌字辉光</div></div>
|
||||
<div class="c"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)"></span><div class="f">状态点辉光</div></div>
|
||||
<div class="c"><button style="font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;background:var(--green);color:var(--bg-deep);border:1px solid var(--green);padding:6px 14px;border-radius:4px;box-shadow:0 0 14px rgba(95,221,125,.35)">hover 发光</button><div class="f">按钮 hover 辉光</div></div>
|
||||
<div class="c"><div style="background:var(--bg-deep);border:1px solid var(--line);border-radius:6px;padding:8px 14px;font-size:12px;box-shadow:0 8px 30px rgba(0,0,0,.55)">浮层</div><div class="f">黑阴影 · 仅弹层/Toast</div></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,11 @@
|
||||
<!-- @dsCard group="Spacing" viewport="700x150" subtitle="圆角体系：控件 3–4px · 面板 6px · 浮层 10px · 圆形只属于状态点" name="圆角 · Radius" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:20px;display:flex;align-items:center;gap:22px;font-size:11px}
|
||||
.f{color:var(--muted);font-size:10px;margin-top:6px}.c{text-align:center}</style></head><body>
|
||||
<div class="c"><span style="display:inline-block;font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--amber);border:1px solid var(--amber-dim);padding:1px 7px;border-radius:var(--radius-xs)">MED</span><div class="f">--radius-xs · 3px · 徽章/chip</div></div>
|
||||
<div class="c"><button style="font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;background:var(--green);color:var(--bg-deep);border:1px solid var(--green);padding:6px 14px;border-radius:var(--radius-sm)">按钮</button><div class="f">--radius-sm · 4px · 按钮/输入框</div></div>
|
||||
<div class="c"><div style="width:110px;height:56px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-md)"></div><div class="f">--radius-md · 6px · 面板/卡片</div></div>
|
||||
<div class="c"><div style="width:110px;height:56px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 8px 30px rgba(0,0,0,.55)"></div><div class="f">--radius-lg · 10px · 模态/浮层</div></div>
|
||||
<div class="c"><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)"></span><div class="f">状态点 · 唯一的正圆</div></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!-- @dsCard group="Spacing" viewport="700x160" subtitle="间距阶 4–22px 与控件内边距" name="间距 · Scale" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:18px 22px;display:grid;gap:8px;font-size:10px}
|
||||
.r{display:flex;align-items:center;gap:12px;color:var(--muted)}
|
||||
.bar{height:12px;background:var(--green-dim);flex:none}
|
||||
.k{width:110px;flex:none;letter-spacing:.08em}</style></head><body>
|
||||
<div class="r"><span class="k">--space-1 · 4px</span><span class="bar" style="width:4px"></span><span>chip 内 gap</span></div>
|
||||
<div class="r"><span class="k">--space-3 · 8px</span><span class="bar" style="width:8px"></span><span>行内元素 gap</span></div>
|
||||
<div class="r"><span class="k">--space-4 · 10px</span><span class="bar" style="width:10px"></span><span>按钮组 gap</span></div>
|
||||
<div class="r"><span class="k">--space-6 · 14px</span><span class="bar" style="width:14px"></span><span>卡片内边距 / 表单 gap</span></div>
|
||||
<div class="r"><span class="k">--space-7 · 16px</span><span class="bar" style="width:16px"></span><span>栏内边距</span></div>
|
||||
<div class="r"><span class="k">--space-9 · 22px</span><span class="bar" style="width:22px"></span><span>主栏左右留白</span></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,12 @@
|
||||
<!-- @dsCard group="Type" viewport="700x170" subtitle="单字族：IBM Plex Mono + Noto Sans SC 等宽中文混排" name="字族 · Mono" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:18px 22px;display:grid;gap:10px}
|
||||
.big{font-size:21px;font-weight:700;letter-spacing:.04em}
|
||||
.mix{font-size:13px;line-height:1.55}
|
||||
.meta{font-size:11px;color:var(--muted);letter-spacing:.08em}</style></head><body>
|
||||
<div class="big">多项目任务调度台 MAESTRO 0123456789</div>
|
||||
<div class="mix">按任务复杂度（Hard / Medium / Easy）分级驱动审批闸，<span style="color:var(--cyan)">agent</span> 在隔离 git worktree 自动执行——改动不自动合并、等你审。</div>
|
||||
<div class="mix" style="color:var(--muted)">if (canTransition(task.status, 'exec_review')) → 待审/合 · P1 · 中</div>
|
||||
<div class="meta">IBM PLEX MONO 400 / 500 / 600 / 700 · NOTO SANS SC 中文回退 · 全站无第二字族</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!-- @dsCard group="Type" viewport="700x200" subtitle="字号阶 10–40px，正文基准 13px" name="字号阶 · Scale" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:16px 22px;display:grid;gap:7px}
|
||||
.r{display:flex;align-items:baseline;gap:14px}
|
||||
.k{width:150px;flex:none;font-size:10px;color:var(--muted);letter-spacing:.1em}</style></head><body>
|
||||
<div class="r"><span class="k">--text-num · 40px 700</span><span style="font-size:40px;font-weight:700;color:var(--cyan);text-shadow:var(--glow-cyan);line-height:1">3</span><span style="font-size:9px;font-weight:600;letter-spacing:.3em;color:var(--muted)">RUNNING</span></div>
|
||||
<div class="r"><span class="k">--text-2xl · 20px 700</span><span style="font-size:20px;font-weight:700;letter-spacing:.04em">项目标题 maestro</span></div>
|
||||
<div class="r"><span class="k">--text-xl · 19px 700</span><span style="font-size:19px;font-weight:700;letter-spacing:.28em;color:var(--green)">MAESTRO</span></div>
|
||||
<div class="r"><span class="k">--text-md · 13px 400</span><span style="font-size:13px">正文基准 · 任务标题用 500</span></div>
|
||||
<div class="r"><span class="k">--text-sm · 12px 600</span><span style="font-size:12px;font-weight:600;letter-spacing:.08em">按钮文字</span></div>
|
||||
<div class="r"><span class="k">--text-xs · 11px 600</span><span style="font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--muted)">区块标题 UPPERCASE</span></div>
|
||||
<div class="r"><span class="k">--text-2xs · 10px 700</span><span style="font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--amber)">徽章 MED</span></div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!-- @dsCard group="Type" viewport="700x170" subtitle="层级靠字距：.04em 标题 → .35em logo 副标" name="字距 · Tracking" -->
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8">
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);padding:18px 22px;display:grid;gap:9px}
|
||||
.r{display:flex;align-items:baseline;gap:14px;font-size:12px}
|
||||
.k{width:120px;flex:none;font-size:10px;color:var(--faint);letter-spacing:.06em}</style></head><body>
|
||||
<div class="r"><span class="k">.04em tight</span><span style="letter-spacing:.04em;font-weight:700;font-size:15px">标题 · proj-title</span></div>
|
||||
<div class="r"><span class="k">.08em label</span><span style="letter-spacing:.08em;font-weight:600">按钮 · BTN LABEL · meta</span></div>
|
||||
<div class="r"><span class="k">.12em badge</span><span style="letter-spacing:.12em;color:var(--amber)">2 项待审批</span></div>
|
||||
<div class="r"><span class="k">.22em head</span><span style="letter-spacing:.22em;font-weight:600;font-size:11px;color:var(--muted)">▍任务树 SECTION HEAD</span></div>
|
||||
<div class="r"><span class="k">.28em logo</span><span style="letter-spacing:.28em;font-weight:700;font-size:15px;color:var(--green)">MAESTRO</span></div>
|
||||
<div class="r"><span class="k">.35em widest</span><span style="letter-spacing:.35em;font-size:11px;color:var(--muted)">多项目任务调度台</span></div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user