wangjia
c6e66baa19
- web/: phosphor 调度台风格纯静态看板，审批闸内联 accept/reject(拒绝必填意见)，WS 实时 - src/api/static.ts: 手写静态服务(路径穿越防护)，daemon 接入 - src/mcp/: stdio MCP server，@modelcontextprotocol/sdk 1.29.0，12 工具薄封装 REST - src/cli/: 零依赖 CLI(project/task/next/approvals/import-todo)，旧 todo.json 导入器 - 实测: pangolin 18 条旧任务导入 45 条；端到端验证通过 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
444 lines
18 KiB
CSS
444 lines
18 KiB
CSS
/* ════════════════════════════════════════════════════════════════
|
|
MAESTRO 调度台 · phosphor console
|
|
碳绿底 + 磷光绿/琥珀/信号红，等宽中文混排，扫描线质感
|
|
════════════════════════════════════════════════════════════════ */
|
|
|
|
:root {
|
|
--bg: #0a0d0b;
|
|
--bg-deep: #070908;
|
|
--panel: #10140f;
|
|
--panel-2: #151b14;
|
|
--line: #232d23;
|
|
--line-soft: #1a221a;
|
|
--ink: #d8e4d4;
|
|
--muted: #76876f;
|
|
--faint: #4a5747;
|
|
|
|
--green: #5fdd7d;
|
|
--green-dim: #2e6b3d;
|
|
--amber: #f0b429;
|
|
--amber-dim: #6b5414;
|
|
--red: #ff5d5d;
|
|
--red-dim: #6b2424;
|
|
--cyan: #59c8d8;
|
|
--cyan-dim: #1e4e57;
|
|
|
|
--mono: 'IBM Plex Mono', 'Noto Sans SC', ui-monospace, monospace;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html, body { height: 100%; }
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
font-family: var(--mono);
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 扫描线 + 暗角 氛围层 */
|
|
body::before {
|
|
content: '';
|
|
position: fixed; inset: 0; z-index: 999; 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;
|
|
}
|
|
|
|
::selection { background: var(--green-dim); color: #fff; }
|
|
|
|
/* 滚动条 */
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 0; }
|
|
::-webkit-scrollbar-thumb:hover { background: var(--green-dim); }
|
|
|
|
/* ── 三栏骨架 ─────────────────────────────────────────────── */
|
|
#app {
|
|
display: grid;
|
|
grid-template-columns: 232px minmax(0,1fr) 320px;
|
|
height: 100vh;
|
|
}
|
|
|
|
#sidebar {
|
|
background: var(--bg-deep);
|
|
border-right: 1px solid var(--line);
|
|
display: flex; flex-direction: column;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
#main { overflow-y: auto; padding: 0 22px 60px; }
|
|
|
|
#eventPanel {
|
|
background: var(--bg-deep);
|
|
border-left: 1px solid var(--line);
|
|
overflow-y: auto;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
body { overflow: auto; }
|
|
#app { grid-template-columns: 1fr; height: auto; }
|
|
#sidebar, #eventPanel { border: none; border-bottom: 1px solid var(--line); }
|
|
}
|
|
|
|
/* ── Logo ────────────────────────────────────────────────── */
|
|
.logo { padding: 20px 16px 14px; border-bottom: 1px solid var(--line-soft); }
|
|
.logo-word {
|
|
font-size: 19px; font-weight: 700; letter-spacing: .28em;
|
|
color: var(--green);
|
|
text-shadow: 0 0 12px rgba(95,221,125,.45);
|
|
}
|
|
.cursor { animation: blink 1.1s steps(1) infinite; margin-left: 1px; }
|
|
@keyframes blink { 50% { opacity: 0; } }
|
|
.logo-sub { margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .35em; }
|
|
|
|
/* ── 区块标题 ─────────────────────────────────────────────── */
|
|
.sec-head {
|
|
display: flex; align-items: center; gap: 6px;
|
|
font-size: 11px; font-weight: 600; letter-spacing: .22em;
|
|
color: var(--muted); text-transform: uppercase;
|
|
padding: 18px 0 10px;
|
|
position: sticky; top: 0; z-index: 5;
|
|
background: linear-gradient(var(--bg) 75%, transparent);
|
|
}
|
|
#sidebar .sec-head, .side-head {
|
|
display: flex; align-items: center; gap: 6px;
|
|
font-size: 11px; font-weight: 600; letter-spacing: .22em; color: var(--muted);
|
|
padding: 16px 16px 8px; background: none; position: static;
|
|
}
|
|
#eventPanel .sec-head { padding: 18px 16px 10px; background: linear-gradient(var(--bg-deep) 75%, transparent); }
|
|
.head-mark { color: var(--green); }
|
|
.head-mark.amber { color: var(--amber); }
|
|
.side-head .btn, .sec-head .btn { margin-left: auto; letter-spacing: .1em; }
|
|
|
|
/* ── 项目列表 ─────────────────────────────────────────────── */
|
|
.project-list { list-style: none; flex: 1; }
|
|
.project-list li {
|
|
padding: 9px 16px 9px 14px;
|
|
border-left: 2px solid transparent;
|
|
cursor: pointer;
|
|
display: flex; flex-direction: column; gap: 1px;
|
|
}
|
|
.project-list li:hover { background: var(--panel); }
|
|
.project-list li.active {
|
|
background: var(--panel-2);
|
|
border-left-color: var(--green);
|
|
}
|
|
.project-list li.active .p-name { color: var(--green); }
|
|
.p-name { font-weight: 600; font-size: 13px; }
|
|
.p-path { font-size: 10.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.p-empty { padding: 14px 16px; color: var(--faint); font-size: 12px; }
|
|
|
|
.side-foot {
|
|
border-top: 1px solid var(--line-soft);
|
|
padding: 10px 16px; font-size: 11px; color: var(--muted);
|
|
display: flex; align-items: center; gap: 7px;
|
|
}
|
|
.ws-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
|
|
.ws-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
|
|
.ws-dot.off { background: var(--amber); animation: pulse 1s infinite; }
|
|
@keyframes pulse { 50% { opacity: .25; } }
|
|
|
|
/* ── 顶栏 ────────────────────────────────────────────────── */
|
|
#topbar {
|
|
display: flex; align-items: flex-end; gap: 14px;
|
|
padding: 22px 0 14px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.proj-title { font-size: 20px; font-weight: 700; letter-spacing: .04em; }
|
|
.proj-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
|
|
.spacer { flex: 1; }
|
|
.gate-count {
|
|
font-size: 11px; letter-spacing: .12em; color: var(--amber);
|
|
border: 1px solid var(--amber-dim); padding: 4px 10px;
|
|
animation: pulse 2.2s infinite;
|
|
}
|
|
|
|
/* ── 审批闸 ─────────────────────────────────────────────── */
|
|
.gate-section { margin-top: 18px; }
|
|
.gate-stripe {
|
|
height: 5px;
|
|
background: repeating-linear-gradient(-45deg,
|
|
var(--amber) 0 9px, transparent 9px 18px);
|
|
opacity: .8;
|
|
}
|
|
.gate-head { padding-top: 12px; position: static; background: none; color: var(--amber); }
|
|
|
|
.gate-card {
|
|
background: var(--panel);
|
|
border: 1px solid var(--amber-dim);
|
|
margin-bottom: 12px;
|
|
animation: rise .25s ease both;
|
|
}
|
|
@keyframes rise { from { opacity: 0; transform: translateY(5px); } }
|
|
|
|
.gate-card-head {
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
.gate-kind {
|
|
font-size: 10.5px; font-weight: 700; letter-spacing: .18em;
|
|
color: var(--bg); background: var(--amber);
|
|
padding: 2px 8px;
|
|
}
|
|
.gate-title { font-weight: 600; }
|
|
.gate-body { padding: 12px 14px; }
|
|
.gate-doc-label { font-size: 10.5px; color: var(--muted); letter-spacing: .18em; margin: 8px 0 4px; }
|
|
.gate-doc-label:first-child { margin-top: 0; }
|
|
|
|
pre.doc {
|
|
background: var(--bg-deep);
|
|
border: 1px solid var(--line-soft);
|
|
border-left: 2px solid var(--green-dim);
|
|
padding: 10px 12px;
|
|
font-family: var(--mono); font-size: 12.5px;
|
|
white-space: pre-wrap; word-break: break-word;
|
|
max-height: 280px; overflow-y: auto;
|
|
color: var(--ink);
|
|
}
|
|
pre.doc.empty { color: var(--faint); border-left-color: var(--line); }
|
|
|
|
.gate-actions {
|
|
display: flex; gap: 10px; align-items: center;
|
|
padding: 10px 14px;
|
|
border-top: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.reject-form { padding: 0 14px 12px; display: flex; gap: 10px; align-items: flex-start; }
|
|
.reject-form textarea {
|
|
flex: 1; min-height: 56px;
|
|
border-color: var(--red-dim);
|
|
}
|
|
.reject-form textarea:focus { border-color: var(--red); }
|
|
|
|
/* ── 按钮 ────────────────────────────────────────────────── */
|
|
.btn {
|
|
font-family: var(--mono); font-size: 12px; font-weight: 600;
|
|
letter-spacing: .08em;
|
|
background: transparent; color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
padding: 6px 14px; cursor: pointer;
|
|
transition: all .12s;
|
|
}
|
|
.btn:hover { border-color: var(--muted); background: var(--panel-2); }
|
|
.btn-xs { padding: 2px 8px; font-size: 11px; }
|
|
.btn-ghost { border-color: transparent; color: var(--muted); }
|
|
.btn-ghost:hover { color: var(--green); border-color: var(--green-dim); background: transparent; }
|
|
|
|
.btn-solid {
|
|
background: var(--green); color: var(--bg-deep); border-color: var(--green);
|
|
}
|
|
.btn-solid:hover { background: #79ec94; border-color: #79ec94; box-shadow: 0 0 14px rgba(95,221,125,.35); }
|
|
|
|
.btn-accept { border-color: var(--green-dim); color: var(--green); }
|
|
.btn-accept:hover { background: var(--green); color: var(--bg-deep); border-color: var(--green); box-shadow: 0 0 14px rgba(95,221,125,.3); }
|
|
.btn-reject { border-color: var(--red-dim); color: var(--red); }
|
|
.btn-reject:hover { background: var(--red); color: var(--bg-deep); border-color: var(--red); box-shadow: 0 0 14px rgba(255,93,93,.3); }
|
|
|
|
.btn:disabled { opacity: .4; cursor: not-allowed; }
|
|
|
|
/* ── 表单 ────────────────────────────────────────────────── */
|
|
.panel { background: var(--panel); border: 1px solid var(--line); }
|
|
.form-panel { padding: 14px; margin-bottom: 14px; }
|
|
.form-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
|
|
.form-row + .form-row { margin-top: 12px; }
|
|
.form-actions { justify-content: flex-end; }
|
|
|
|
label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); letter-spacing: .08em; }
|
|
label.grow { flex: 1; }
|
|
label.narrow input { width: 76px; }
|
|
.req { color: var(--red); }
|
|
|
|
input[type=text], input[type=number], select, textarea {
|
|
font-family: var(--mono); font-size: 13px;
|
|
background: var(--bg-deep); color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
padding: 7px 10px;
|
|
outline: none;
|
|
transition: border-color .12s;
|
|
}
|
|
input:focus, select:focus, textarea:focus { border-color: var(--green-dim); box-shadow: 0 0 0 1px var(--green-dim); }
|
|
textarea { resize: vertical; min-height: 72px; width: 100%; }
|
|
|
|
/* 复杂度分段选择 */
|
|
.seg { display: inline-flex; border: 1px solid var(--line); }
|
|
.seg input { position: absolute; opacity: 0; pointer-events: none; }
|
|
.seg label {
|
|
padding: 7px 13px; cursor: pointer;
|
|
font-size: 11px; font-weight: 700; letter-spacing: .12em;
|
|
color: var(--faint); flex-direction: row;
|
|
}
|
|
.seg label + input + label, .seg input + label { border-left: 0; }
|
|
.seg label:not(:first-of-type) { border-left: 1px solid var(--line); }
|
|
.seg input:checked + label.seg-h { background: var(--red-dim); color: var(--red); }
|
|
.seg input:checked + label.seg-m { background: var(--amber-dim); color: var(--amber); }
|
|
.seg input:checked + label.seg-e { background: var(--green-dim); color: var(--green); }
|
|
|
|
/* ── 任务树 ─────────────────────────────────────────────── */
|
|
.tree-empty {
|
|
padding: 46px 0; text-align: center; color: var(--faint);
|
|
border: 1px dashed var(--line);
|
|
}
|
|
.tree-empty b { display: block; font-size: 15px; color: var(--muted); margin-bottom: 6px; letter-spacing: .2em; }
|
|
|
|
.task-node { border-left: 1px solid var(--line-soft); }
|
|
.task-node.depth-1 { border-left: none; }
|
|
|
|
.task-row {
|
|
display: flex; align-items: center; gap: 8px;
|
|
padding: 8px 10px 8px 6px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
cursor: pointer;
|
|
transition: background .1s;
|
|
}
|
|
.task-row:hover { background: var(--panel); }
|
|
.task-row.is-gate { background: rgba(240,180,41,.045); }
|
|
.task-row.expanded { background: var(--panel-2); }
|
|
|
|
.caret {
|
|
width: 16px; flex: none; text-align: center;
|
|
color: var(--muted); font-size: 10px;
|
|
transition: transform .12s; user-select: none;
|
|
}
|
|
.caret.open { transform: rotate(90deg); color: var(--green); }
|
|
.caret.leaf { color: var(--faint); }
|
|
|
|
.t-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.t-title .t-id { color: var(--faint); font-size: 10.5px; margin-left: 6px; letter-spacing: 0; }
|
|
.task-row .spacer { flex: 1; min-width: 8px; }
|
|
|
|
.t-prio { font-size: 10.5px; color: var(--faint); flex: none; }
|
|
.t-prio.hot { color: var(--amber); }
|
|
|
|
/* 复杂度徽章 */
|
|
.cplx {
|
|
flex: none; font-size: 10px; font-weight: 700; letter-spacing: .14em;
|
|
padding: 1px 7px; border: 1px solid;
|
|
}
|
|
.cplx-hard { color: var(--red); border-color: var(--red-dim); background: rgba(255,93,93,.07); }
|
|
.cplx-medium { color: var(--amber); border-color: var(--amber-dim); background: rgba(240,180,41,.07); }
|
|
.cplx-easy { color: var(--green); border-color: var(--green-dim); background: rgba(95,221,125,.07); }
|
|
|
|
/* 状态 chip */
|
|
.chip {
|
|
flex: none; display: inline-flex; align-items: center; gap: 5px;
|
|
font-size: 11px; padding: 1px 8px;
|
|
border: 1px solid var(--line); color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
|
|
.chip-idle { color: var(--muted); }
|
|
.chip-work { color: var(--cyan); border-color: var(--cyan-dim); }
|
|
.chip-gate { color: var(--amber); border-color: var(--amber-dim); }
|
|
.chip-gate::before { animation: pulse 1.4s infinite; }
|
|
.chip-container { color: #9bb4c8; border-color: #2c3c4a; }
|
|
.chip-go { color: var(--green); border-color: var(--green-dim); }
|
|
.chip-run { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px rgba(89,200,216,.25); }
|
|
.chip-run::before { animation: pulse .8s infinite; }
|
|
.chip-hold { color: var(--faint); }
|
|
.chip-bad { color: var(--red); border-color: var(--red-dim); }
|
|
.chip-bad::before { animation: pulse 1s infinite; }
|
|
.chip-done { color: var(--bg-deep); background: var(--green); border-color: var(--green); font-weight: 700; }
|
|
.chip-dead { color: var(--faint); text-decoration: line-through; }
|
|
.chip-dead::before { background: var(--faint); }
|
|
|
|
/* 子节点缩进 */
|
|
.task-children { margin-left: 22px; }
|
|
|
|
/* ── 任务详情 ─────────────────────────────────────────────── */
|
|
.task-detail {
|
|
background: var(--panel);
|
|
border-bottom: 1px solid var(--line);
|
|
border-left: 2px solid var(--green-dim);
|
|
padding: 14px 16px;
|
|
animation: rise .2s ease both;
|
|
}
|
|
.detail-grid { display: grid; gap: 14px; }
|
|
.detail-label { font-size: 10.5px; color: var(--muted); letter-spacing: .18em; margin-bottom: 4px; }
|
|
|
|
.approval-item {
|
|
display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
|
|
font-size: 12px; padding: 5px 0;
|
|
border-bottom: 1px dashed var(--line-soft);
|
|
}
|
|
.approval-item:last-child { border-bottom: none; }
|
|
.ap-act-accept { color: var(--green); font-weight: 700; }
|
|
.ap-act-reject { color: var(--red); font-weight: 700; }
|
|
.ap-gate { color: var(--muted); }
|
|
.ap-time { color: var(--faint); font-size: 11px; margin-left: auto; }
|
|
.ap-reason { width: 100%; color: var(--amber); font-size: 12px; padding-left: 14px; }
|
|
.ap-reason::before { content: '↳ '; color: var(--faint); }
|
|
|
|
.result-kv { font-size: 12px; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; }
|
|
.result-kv dt { color: var(--muted); }
|
|
.result-kv dd { word-break: break-all; }
|
|
|
|
.write-box { margin-top: 4px; }
|
|
.write-box .form-actions { margin-top: 8px; }
|
|
.detail-actions { display: flex; gap: 10px; }
|
|
|
|
/* ── 事件流 ─────────────────────────────────────────────── */
|
|
.event-list { list-style: none; padding: 0 14px; }
|
|
.event-list li {
|
|
padding: 7px 0 7px 12px;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
position: relative;
|
|
font-size: 11.5px;
|
|
animation: rise .25s ease both;
|
|
}
|
|
.event-list li::before {
|
|
content: ''; position: absolute; left: 0; top: 13px;
|
|
width: 5px; height: 5px; background: var(--ev, var(--muted));
|
|
}
|
|
.ev-head { display: flex; gap: 8px; align-items: baseline; }
|
|
.ev-type { font-weight: 600; color: var(--ev, var(--ink)); letter-spacing: .04em; }
|
|
.ev-time { color: var(--faint); font-size: 10.5px; margin-left: auto; flex: none; }
|
|
.ev-detail { color: var(--muted); margin-top: 1px; word-break: break-word; }
|
|
.ev-empty { padding: 30px 0; color: var(--faint); text-align: center; border: none !important; }
|
|
.ev-empty::before { display: none; }
|
|
|
|
li.ev-created { --ev: var(--green); }
|
|
li.ev-status { --ev: var(--cyan); }
|
|
li.ev-approve { --ev: var(--green); }
|
|
li.ev-rejected { --ev: var(--red); }
|
|
li.ev-gatewait { --ev: var(--amber); }
|
|
li.ev-run { --ev: var(--cyan); }
|
|
li.ev-updated { --ev: var(--muted); }
|
|
|
|
/* ── 模态 ────────────────────────────────────────────────── */
|
|
.modal-root { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
|
|
.modal-root[hidden] { display: none; }
|
|
.modal-mask { position: absolute; inset: 0; background: rgba(4,6,5,.78); backdrop-filter: blur(2px); }
|
|
.modal {
|
|
position: relative; width: min(460px, 92vw);
|
|
padding: 18px 20px 20px;
|
|
display: flex; flex-direction: column; gap: 12px;
|
|
box-shadow: 0 0 0 1px var(--green-dim), 0 18px 60px rgba(0,0,0,.6);
|
|
animation: rise .18s ease both;
|
|
}
|
|
.modal .sec-head { padding: 0 0 4px; position: static; background: none; }
|
|
|
|
/* ── Toast ───────────────────────────────────────────────── */
|
|
.toast-root {
|
|
position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
|
|
z-index: 1200; display: flex; flex-direction: column; gap: 8px; align-items: center;
|
|
}
|
|
.toast {
|
|
font-family: var(--mono); font-size: 12.5px;
|
|
background: var(--bg-deep);
|
|
border: 1px solid var(--line);
|
|
padding: 9px 16px;
|
|
max-width: 70vw;
|
|
animation: toastIn .18s ease both;
|
|
box-shadow: 0 8px 30px rgba(0,0,0,.55);
|
|
}
|
|
.toast.err { border-color: var(--red); color: var(--red); }
|
|
.toast.ok { border-color: var(--green-dim); color: var(--green); }
|
|
.toast.out { opacity: 0; transition: opacity .3s; }
|
|
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
|