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>
53 lines
3.9 KiB
HTML
53 lines
3.9 KiB
HTML
<!-- @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>
|