chore(v0.6): checkpoint foundation — Amber theme, P1 types, P3 config, design docs
Prior-session prep for the v0.6 Project Manager, checkpointed on the v0.6-projects branch as a clean base for the parallel builders: - P1 (src/types.ts): ProjectInfo + ProjectSessionRef contracts; Config gains projectRoots/projectScanDepth/projectScanTtlMs/projectDirtyCheck. - P3 (src/config.ts): parseBool + parseProjectRoots helpers; parse the 4 PROJECT_* env vars with defaults ([homeDir]/4/10000/true). - UI: public/style.css indigo -> Amber (#e3a64a) accent theme. - Docs: FEATURE_PROJECT_MANAGER.md (1:N session design), THEME.md, docs/mockups/ (final-amber.png is the locked visual). Typecheck (backend + web) green. No behavior change to runtime code yet; P2/P4/P5/P6 implement the feature on top of this.
This commit is contained in:
Yaojia Wang
95
docs/mockups/palette-compare-2.html
Normal file
95
docs/mockups/palette-compare-2.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!doctype html>
|
||||
<html lang="zh"><head><meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Palette compare 2</title>
|
||||
<style>
|
||||
:root{
|
||||
--bg:#100f0d; --card:#1b1916; --border:rgba(255,255,255,.07);
|
||||
--border-strong:rgba(255,255,255,.14);
|
||||
--text:#ece9e3; --text-dim:#a8a299; --text-faint:#6f6a61;
|
||||
--idle:#8b8a86;
|
||||
--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
|
||||
--ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);padding:26px}
|
||||
h2{font-weight:680;font-size:18px;margin:0 0 4px}
|
||||
.lead{color:var(--text-faint);font-size:13px;margin:0 0 22px}
|
||||
.row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
|
||||
|
||||
.col[data-p="ruby"] {--accent:#d6455d;--soft:rgba(214,69,93,.16);--line:rgba(214,69,93,.40);--ink:#fff;--working:#d6455d;--waiting:#e6b84e}
|
||||
.col[data-p="sand"] {--accent:#cdb486;--soft:rgba(205,180,134,.14);--line:rgba(205,180,134,.36);--ink:#1a1408;--working:#cdb486;--waiting:#e0975a}
|
||||
.col[data-p="brass"] {--accent:#d9b441;--soft:rgba(217,180,65,.15);--line:rgba(217,180,65,.38);--ink:#1a1404;--working:#d9b441;--waiting:#e08a3c}
|
||||
.col[data-p="apricot"]{--accent:#f0a878;--soft:rgba(240,168,120,.15);--line:rgba(240,168,120,.38);--ink:#1c1109;--working:#f0a878;--waiting:#e6c24e}
|
||||
.col[data-p="slate"] {--accent:#9aa3ab;--soft:rgba(154,163,171,.13);--line:rgba(154,163,171,.32);--ink:#12140f;--working:#aab2b9;--waiting:#e3a64a}
|
||||
.col[data-p="clay"] {--accent:#cf6b4f;--soft:rgba(207,107,79,.15);--line:rgba(207,107,79,.38);--ink:#fff;--working:#cf6b4f;--waiting:#e0aa4e}
|
||||
|
||||
.swatch{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;
|
||||
border:1px solid var(--border);background:var(--card)}
|
||||
.swatch .chipc{width:22px;height:22px;border-radius:7px;background:var(--accent)}
|
||||
.swatch .nm{font-weight:680;font-size:14px}
|
||||
.swatch .hex{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-faint)}
|
||||
.col{display:flex;flex-direction:column;gap:12px}
|
||||
|
||||
.card{background:linear-gradient(180deg,var(--card),#161410);border:1px solid var(--line);
|
||||
border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
|
||||
box-shadow:0 12px 40px rgba(0,0,0,.5)}
|
||||
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
|
||||
background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.85}
|
||||
.crow{display:flex;align-items:center;gap:8px}
|
||||
.name{font-weight:680;font-size:14px}
|
||||
.star{color:var(--waiting);font-size:12px}
|
||||
.countbadge{margin-left:auto;font-size:10.5px;padding:3px 9px;border-radius:999px;
|
||||
background:var(--soft);color:var(--accent);display:flex;align-items:center;gap:5px;font-weight:650}
|
||||
.countbadge .d{width:6px;height:6px;border-radius:50%;background:var(--accent)}
|
||||
.meta{display:flex;gap:6px;flex-wrap:wrap}
|
||||
.chip{font-size:10.5px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);
|
||||
color:var(--text-dim);font-family:var(--mono)}
|
||||
.chip.dirty{color:var(--waiting);border-color:var(--line)}
|
||||
.path{font-family:var(--mono);font-size:10.5px;color:var(--text-faint)}
|
||||
.srow{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;
|
||||
background:rgba(255,255,255,.025);border:1px solid var(--border);position:relative}
|
||||
.srow::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--rail)}
|
||||
.srow.w{--rail:var(--working)} .srow.q{--rail:var(--waiting)} .srow.i{--rail:var(--idle)}
|
||||
.st{width:8px;height:8px;border-radius:50%;margin-left:3px}
|
||||
.st.w{background:var(--working);box-shadow:0 0 8px var(--working)}
|
||||
.st.q{background:var(--waiting);box-shadow:0 0 8px var(--waiting)}
|
||||
.st.i{background:var(--idle)}
|
||||
.stitle{font-size:12.5px;font-weight:600}
|
||||
.smeta{font-size:10.5px;color:var(--text-faint);font-family:var(--mono)}
|
||||
.x{margin-left:auto;color:var(--text-faint);font-size:12px}
|
||||
.actions{display:flex;gap:7px}
|
||||
.btn{flex:1;text-align:center;font-size:11.5px;font-weight:680;padding:9px;border-radius:9px;
|
||||
background:var(--accent);color:var(--ink)}
|
||||
.btn.new{background:var(--soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--line)}
|
||||
.ghost{padding:9px 12px;border-radius:9px;border:1px solid var(--border);color:var(--text-dim);font-size:11.5px}
|
||||
</style></head>
|
||||
<body>
|
||||
<h2>再来 6 套强调色（暖灰底不变，无蓝/紫/绿）</h2>
|
||||
<p class="lead">working=强调色 · waiting=琥珀(闪) · idle=中性灰 · dirty=暖琥珀</p>
|
||||
<div class="row" id="root"></div>
|
||||
<script>
|
||||
const PALS = [
|
||||
['ruby','宝石红 Ruby','#d6455d'],
|
||||
['sand','沙褐 Sand','#cdb486'],
|
||||
['brass','黄铜 Brass','#d9b441'],
|
||||
['apricot','杏桃 Apricot','#f0a878'],
|
||||
['slate','冷石灰 Slate','#9aa3ab'],
|
||||
['clay','陶土 Clay','#cf6b4f'],
|
||||
];
|
||||
document.getElementById('root').innerHTML = PALS.map(([p,nm,hex])=>`
|
||||
<div class="col" data-p="${p}">
|
||||
<div class="swatch"><span class="chipc"></span><span class="nm">${nm}</span><span class="hex">${hex}</span></div>
|
||||
<div class="card">
|
||||
<div class="crow"><span class="star">★</span><span class="name">web-terminal</span><span class="countbadge"><span class="d"></span>3</span></div>
|
||||
<div class="meta"><span class="chip">⎇ main</span><span class="chip dirty">dirty</span></div>
|
||||
<div class="path">~/Documents/git/web-terminal</div>
|
||||
<div class="srow w"><span class="st w"></span><span class="stitle">claude</span><span class="smeta">⚙ working</span><span class="x">✕</span></div>
|
||||
<div class="srow q"><span class="st q"></span><span class="stitle">claude #2</span><span class="smeta">⏳ waiting</span><span class="x">✕</span></div>
|
||||
<div class="srow i"><span class="st i"></span><span class="stitle">shell</span><span class="smeta">✓ idle</span><span class="x">✕</span></div>
|
||||
<div class="actions"><span class="btn new">＋ New claude</span><span class="ghost">▾</span></div>
|
||||
<div class="actions"><span class="btn">Open ▸ claude</span></div>
|
||||
</div>
|
||||
</div>`).join('');
|
||||
</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user