Why: current UI scatters creation entries (project + at sidebar top-left, new session at bottom-left), has no user/tenant surfaces, and the project tree forces per-project navigation; the system targets multi-user multi-tenant operation. Evidence: - Studied zai-org/ZCode desktop layout (WorkspaceShellLayout, WorkspaceSidebar, DESIGN.md) and mapped transferable patterns (single New-Task entry, organize-by views, sidebar account footer) with repo file citations. - Three layout proposals (task-centric / activity rail / project portal) with comparison table and recommendation A; auth stage-2 design (orgs, memberships, server sessions) with SSE cookie upgrade removing ?key=. - Five static demos (index + A/B/C + auth) verified headless: DOM layout assertions (column widths, view switching, screen switching), clipping and contrast QA clean, zero console errors, light/dark themes render. Impact: documents only; no code change. Demos double as the R4 design-token target palette. Implementation proceeds only after direction is approved. Refs: docs/proposals/2026-09-30-ui-inbox-command-workspace.md (D25-D33), docs/proposals/2026-09-30-dual-tier-storage-and-multitenancy.md (D17-D24)
632 lines
48 KiB
HTML
632 lines
48 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN" data-theme="dark">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>方案 A · 任务中心 — Agent-System 设计稿</title>
|
||
<style>
|
||
/* ============ 设计令牌(R4 目标值来源) ============ */
|
||
:root{
|
||
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
|
||
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||
--r-xl:12px; --r-lg:10px; --r-md:8px; --r-sm:6px;
|
||
--ease:.13s ease;
|
||
}
|
||
[data-theme="dark"]{
|
||
--bg:#121316; --bg-panel:#191a1e; --bg-surface:#1f2026; --bg-raised:#24252c;
|
||
--bg-hover:#26272f; --bg-selected:#2c2d36; --bg-input:#1c1d22;
|
||
--border:#282a31; --border-strong:#373943; --border-faint:#202127;
|
||
--text:#e8e9ec; --text-subtle:#a4a6ae; --text-faint:#71747e; --text-on-accent:#fff;
|
||
--accent:#5b8def; --accent-dim:rgba(91,141,239,.13); --accent-soft:rgba(91,141,239,.22);
|
||
--green:#41b26e; --green-dim:rgba(65,178,110,.13); --green-border:rgba(65,178,110,.32);
|
||
--amber:#d99b3f; --amber-dim:rgba(217,155,63,.13);
|
||
--red:#e0566b; --red-dim:rgba(224,86,107,.12);
|
||
--shadow-pop:0 12px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
|
||
--shadow-card:0 1px 2px rgba(0,0,0,.25);
|
||
--scroll-thumb:#33353d;
|
||
}
|
||
[data-theme="light"]{
|
||
--bg:#f6f7f8; --bg-panel:#ffffff; --bg-surface:#ffffff; --bg-raised:#ffffff;
|
||
--bg-hover:#f0f1f4; --bg-selected:#e8eaf0; --bg-input:#ffffff;
|
||
--border:#e5e6ea; --border-strong:#d4d6dd; --border-faint:#ececf0;
|
||
--text:#1d1e23; --text-subtle:#5c5f68; --text-faint:#989ba4; --text-on-accent:#fff;
|
||
--accent:#3a76e0; --accent-dim:rgba(58,118,224,.09); --accent-soft:rgba(58,118,224,.16);
|
||
--green:#269a59; --green-dim:rgba(38,154,89,.09); --green-border:rgba(38,154,89,.35);
|
||
--amber:#a8731d; --amber-dim:rgba(168,115,29,.1);
|
||
--red:#c84559; --red-dim:rgba(200,69,89,.08);
|
||
--shadow-pop:0 12px 32px rgba(20,22,28,.14), 0 2px 8px rgba(20,22,28,.08);
|
||
--shadow-card:0 1px 2px rgba(20,22,28,.05);
|
||
--scroll-thumb:#d6d8de;
|
||
}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
html,body{height:100%}
|
||
body{font-family:var(--font);font-size:14px;line-height:1.55;color:var(--text);background:var(--bg);overflow:hidden}
|
||
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
|
||
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
|
||
::-webkit-scrollbar{width:10px;height:10px}
|
||
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:6px;border:3px solid transparent;background-clip:content-box}
|
||
::-webkit-scrollbar-track{background:transparent}
|
||
svg.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
|
||
svg.ic-s{width:14px;height:14px}
|
||
|
||
/* ============ 应用骨架 ============ */
|
||
.app{display:flex;height:100vh}
|
||
.side{width:var(--side-w,272px);flex:none;transition:width var(--ease)}
|
||
.divider{width:1px;flex:none;background:var(--border-faint);cursor:col-resize;position:relative;z-index:5}
|
||
.divider:hover{background:var(--border-strong)}
|
||
.main{flex:1;min-width:0}
|
||
.inbox{flex:none;width:324px}
|
||
|
||
/* ============ 左栏 ============ */
|
||
.side{background:var(--bg-panel);display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--border-faint);overflow:hidden}
|
||
.brand{display:flex;align-items:center;gap:8px;padding:12px 12px 8px}
|
||
.brand-mark{width:22px;height:22px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#8f6ce8);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
|
||
.brand-name{font-weight:600;font-size:13.5px;letter-spacing:.1px}
|
||
.brand .sp{flex:1}
|
||
.iconbtn{width:26px;height:26px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
|
||
.iconbtn:hover{background:var(--bg-hover);color:var(--text-subtle)}
|
||
|
||
.primary-actions{padding:4px 10px 8px;display:flex;flex-direction:column;gap:6px}
|
||
.newtask{display:flex;align-items:center;height:36px;border-radius:var(--r-md);background:var(--accent-dim);border:1px solid var(--accent-soft);color:var(--accent);font-weight:600;padding:0 4px 0 10px;gap:8px;transition:background var(--ease)}
|
||
.newtask:hover{background:var(--accent-soft)}
|
||
.newtask .lab{flex:1;text-align:left}
|
||
.kbd{font-size:11px;font-family:var(--mono);background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:1px 5px;color:var(--text-faint);line-height:1.5}
|
||
.newtask .caret{width:24px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--accent)}
|
||
.newtask .caret:hover{background:var(--accent-soft)}
|
||
.searchbtn{display:flex;align-items:center;height:32px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-input);padding:0 8px 0 10px;gap:8px;color:var(--text-faint);font-size:13px}
|
||
.searchbtn:hover{border-color:var(--border-strong);color:var(--text-subtle)}
|
||
.searchbtn .sp{flex:1;text-align:left}
|
||
|
||
.org-row{display:flex;align-items:center;gap:6px;padding:2px 10px 8px}
|
||
.pills{display:flex;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:2px;gap:2px;flex:1}
|
||
.pill{flex:1;height:24px;border-radius:6px;font-size:12.5px;color:var(--text-faint);display:flex;align-items:center;justify-content:center;gap:5px;transition:all var(--ease)}
|
||
.pill:hover{color:var(--text-subtle)}
|
||
.pill.on{background:var(--bg-raised);color:var(--text);box-shadow:var(--shadow-card);font-weight:500}
|
||
|
||
.task-scroll{flex:1;overflow-y:auto;padding:0 8px 8px;min-height:0}
|
||
.sec-label{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-faint);padding:10px 8px 4px;letter-spacing:.3px}
|
||
.sec-label .ln{flex:1;height:1px;background:var(--border-faint)}
|
||
.group{margin-bottom:2px}
|
||
.group-head{display:flex;align-items:center;gap:6px;height:30px;padding:0 8px;border-radius:var(--r-sm);color:var(--text-subtle);font-weight:500;font-size:13px;cursor:pointer;user-select:none}
|
||
.group-head:hover{background:var(--bg-hover)}
|
||
.group-head .chev{transition:transform var(--ease);color:var(--text-faint)}
|
||
.group.closed .chev{transform:rotate(-90deg)}
|
||
.group-head .cnt{font-size:11.5px;color:var(--text-faint);font-weight:400}
|
||
.group-head .sp{flex:1}
|
||
.group-add{opacity:0;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
|
||
.group-head:hover .group-add{opacity:1}
|
||
.group-add:hover{background:var(--bg-selected);color:var(--text)}
|
||
.group.closed .tasks{display:none}
|
||
.tasks{padding-left:6px}
|
||
.task{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;margin:1px 0;border-radius:var(--r-sm);color:var(--text-subtle);cursor:pointer;position:relative}
|
||
.task:hover{background:var(--bg-hover)}
|
||
.task.on{background:var(--bg-selected);color:var(--text)}
|
||
.task .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
|
||
.task .tm{font-size:11px;color:var(--text-faint);font-variant-numeric:tabular-nums}
|
||
.dot{width:7px;height:7px;border-radius:50%;flex:none}
|
||
.dot.run{background:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
|
||
.dot.wait{background:var(--amber);box-shadow:0 0 0 3px var(--amber-dim)}
|
||
.dot.idle{background:var(--border-strong)}
|
||
.dot.done{background:var(--green)}
|
||
.task .pbadge{font-size:10.5px;color:var(--text-faint);background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:0 5px;line-height:1.6;white-space:nowrap}
|
||
|
||
.side-footer{border-top:1px solid var(--border-faint);padding:8px 10px;display:flex;align-items:center;gap:6px}
|
||
.userchip{display:flex;align-items:center;gap:9px;flex:1;min-width:0;height:38px;padding:0 7px;border-radius:var(--r-md);cursor:pointer;text-align:left}
|
||
.userchip:hover{background:var(--bg-hover)}
|
||
.avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#5b8def,#8f6ce8);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
|
||
.uc-name{font-size:13px;font-weight:600;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.uc-sub{font-size:11px;color:var(--text-faint);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.uc-sub .role{color:var(--text-faint)}
|
||
|
||
/* 收起轨道 */
|
||
.rail-col{width:52px;flex:none;background:var(--bg-panel);border-right:1px solid var(--border-faint);display:none;flex-direction:column;align-items:center;padding:10px 0;gap:4px}
|
||
.app.rail .side{display:none}
|
||
.app.rail .rail-col{display:flex}
|
||
.rail-col .rb{width:34px;height:34px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--text-faint);position:relative}
|
||
.rail-col .rb:hover{background:var(--bg-hover);color:var(--text)}
|
||
.rail-col .rb .bdg{position:absolute;top:3px;right:3px;min-width:14px;height:14px;border-radius:7px;background:var(--amber);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 3px}
|
||
.rail-col .sp{flex:1}
|
||
|
||
/* ============ 中栏 ============ */
|
||
.main{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
|
||
.conv-head{padding:12px 20px 10px;border-bottom:1px solid var(--border-faint)}
|
||
.ch-row{display:flex;align-items:center;gap:8px}
|
||
.proj-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;background:var(--accent-dim);border:1px solid var(--accent-soft);color:var(--accent);font-size:12px;font-weight:500;cursor:pointer}
|
||
.ch-sep{color:var(--text-faint);font-size:12px}
|
||
.ch-title{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.ch-row .sp{flex:1}
|
||
.btn{height:28px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-surface);display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-subtle);transition:all var(--ease)}
|
||
.btn:hover{border-color:var(--border-strong);color:var(--text);background:var(--bg-raised)}
|
||
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent);font-weight:600}
|
||
.btn.primary:hover{filter:brightness(1.08)}
|
||
.btn.green{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
|
||
.btn.green:hover{filter:brightness(1.08)}
|
||
.btn.sm{height:24px;padding:0 9px;font-size:12px}
|
||
.ch-sub{margin-top:5px;font-size:12px;color:var(--text-faint);display:flex;align-items:center;gap:10px}
|
||
.ch-sub .st{display:inline-flex;align-items:center;gap:5px;color:var(--text-subtle)}
|
||
.ch-sub .st .dot{width:6px;height:6px}
|
||
|
||
.msgs{flex:1;overflow-y:auto;padding:20px 24px 12px;min-height:0}
|
||
.msg{margin-bottom:20px;max-width:820px}
|
||
.m-user{display:flex;justify-content:flex-end}
|
||
.m-user .bubble{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:10px 14px;max-width:74%;box-shadow:var(--shadow-card)}
|
||
.m-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px}
|
||
.m-mark{width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,var(--accent),#8f6ce8);color:#fff;display:flex;align-items:center;justify-content:center}
|
||
.m-name{font-size:12.5px;font-weight:600}
|
||
.m-model{font-size:10.5px;color:var(--text-faint);border:1px solid var(--border);border-radius:4px;padding:0 5px;line-height:1.6}
|
||
.m-time{font-size:11px;color:var(--text-faint)}
|
||
.m-body{font-size:14px;color:var(--text);line-height:1.7}
|
||
.m-body p+p{margin-top:8px}
|
||
.m-body code{font-family:var(--mono);font-size:12.5px;background:var(--bg-input);border:1px solid var(--border-faint);border-radius:4px;padding:1px 5px}
|
||
.toolblock{border:1px solid var(--border);border-radius:var(--r-md);margin:10px 0;background:var(--bg-panel);overflow:hidden}
|
||
.tb-head{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;font-size:12.5px;color:var(--text-subtle);cursor:pointer}
|
||
.tb-head:hover{background:var(--bg-hover)}
|
||
.tb-head .wrench{color:var(--text-faint)}
|
||
.tb-head .res{margin-left:auto;font-size:11.5px;color:var(--text-faint)}
|
||
.tb-body{display:none;border-top:1px solid var(--border-faint);padding:10px 12px;font-family:var(--mono);font-size:12px;color:var(--text-subtle);line-height:1.7}
|
||
.toolblock.open .tb-body{display:block}
|
||
|
||
.confirm-card{border:1px solid var(--green-border);background:var(--green-dim);border-radius:var(--r-lg);padding:12px 14px;margin:12px 0;max-width:640px}
|
||
.cc-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px}
|
||
.cc-head .ic{color:var(--green)}
|
||
.cc-body{font-size:13px;color:var(--text-subtle);margin:6px 0 10px;line-height:1.6}
|
||
.cc-actions{display:flex;gap:8px;align-items:center}
|
||
.cc-src{margin-left:auto;font-size:11px;color:var(--text-faint)}
|
||
|
||
.artifact-card{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;margin:10px 0;max-width:520px;background:var(--bg-panel);cursor:pointer}
|
||
.artifact-card:hover{border-color:var(--border-strong);background:var(--bg-hover)}
|
||
.aft-ic{width:32px;height:32px;border-radius:var(--r-sm);background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center}
|
||
.aft-name{font-size:13px;font-weight:600}
|
||
.aft-meta{font-size:11.5px;color:var(--text-faint)}
|
||
|
||
.composer-wrap{padding:8px 24px 16px}
|
||
.composer{border:1px solid var(--border);border-radius:var(--r-xl);background:var(--bg-input);box-shadow:var(--shadow-card);transition:border-color var(--ease)}
|
||
.composer:focus-within{border-color:var(--accent)}
|
||
.composer textarea{width:100%;border:none;background:transparent;resize:none;font:inherit;color:var(--text);padding:11px 14px 4px;min-height:24px;outline:none}
|
||
.composer textarea::placeholder{color:var(--text-faint)}
|
||
.cmp-row{display:flex;align-items:center;gap:6px;padding:6px 8px 8px}
|
||
.cmp-ic{width:28px;height:28px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
|
||
.cmp-ic:hover{background:var(--bg-hover);color:var(--text-subtle)}
|
||
.slash-hint{font-size:11.5px;color:var(--text-faint);border:1px dashed var(--border-strong);border-radius:4px;padding:1px 7px;cursor:pointer}
|
||
.slash-hint:hover{color:var(--text-subtle)}
|
||
.model-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:6px;border:1px solid var(--border);font-size:11.5px;color:var(--text-subtle);cursor:pointer}
|
||
.model-chip:hover{border-color:var(--border-strong)}
|
||
.cmp-row .sp{flex:1}
|
||
.send{width:30px;height:30px;border-radius:var(--r-sm);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center}
|
||
.send:hover{filter:brightness(1.1)}
|
||
|
||
/* ============ 右栏:收件箱 ============ */
|
||
.inbox{background:var(--bg-panel);border-left:1px solid var(--border-faint);display:flex;flex-direction:column;min-width:0}
|
||
.ib-head{padding:12px 14px 8px}
|
||
.ib-title{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
|
||
.ib-badge{min-width:18px;height:18px;border-radius:9px;background:var(--amber);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
|
||
.ib-pills{display:flex;gap:6px;margin-top:8px}
|
||
.ib-pill{height:24px;padding:0 10px;border-radius:12px;font-size:12px;color:var(--text-faint);border:1px solid var(--border);display:flex;align-items:center;gap:5px}
|
||
.ib-pill:hover{color:var(--text-subtle)}
|
||
.ib-pill.on{background:var(--bg-selected);border-color:var(--border-strong);color:var(--text);font-weight:500}
|
||
.ib-scroll{flex:1;overflow-y:auto;padding:2px 10px 10px;min-height:0}
|
||
.ib-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-surface);padding:10px 12px;margin-bottom:8px;box-shadow:var(--shadow-card)}
|
||
.ib-card .ttl{display:flex;align-items:flex-start;gap:8px;font-size:13px;font-weight:600;line-height:1.45}
|
||
.ib-card .ttl .ic{margin-top:2px}
|
||
.ib-card .mta{font-size:11.5px;color:var(--text-faint);margin-top:3px}
|
||
.ib-card .acts{display:flex;gap:6px;margin-top:8px}
|
||
.ib-card.dim{opacity:.62}
|
||
.ib-card.dim:hover{opacity:1}
|
||
.pbar{height:4px;border-radius:2px;background:var(--bg-hover);margin-top:8px;overflow:hidden}
|
||
.pbar i{display:block;height:100%;border-radius:2px;background:var(--accent);width:68%}
|
||
.prog-num{font-size:11px;color:var(--text-subtle);font-variant-numeric:tabular-nums;margin-top:4px;display:flex;justify-content:space-between}
|
||
.ib-foot{border-top:1px solid var(--border-faint);padding:8px 12px;display:flex;gap:6px}
|
||
.ib-link{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border);font-size:12px;color:var(--text-subtle)}
|
||
.ib-link:hover{background:var(--bg-hover);color:var(--text)}
|
||
.ib-link .n{font-size:10.5px;background:var(--bg-selected);border-radius:8px;padding:0 6px;line-height:1.7}
|
||
|
||
/* ============ 弹层 ============ */
|
||
.pop{position:fixed;z-index:50;min-width:230px;background:var(--bg-raised);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:5px;display:none}
|
||
.pop.show{display:block}
|
||
.pi{display:flex;align-items:center;gap:9px;height:32px;padding:0 9px;border-radius:var(--r-sm);font-size:13px;color:var(--text-subtle);cursor:pointer;width:100%;text-align:left}
|
||
.pi:hover{background:var(--bg-hover);color:var(--text)}
|
||
.pi .kbd{margin-left:auto}
|
||
.pi.danger{color:var(--red)}
|
||
.pi.danger:hover{background:var(--red-dim)}
|
||
.pdiv{height:1px;background:var(--border-faint);margin:5px 4px}
|
||
.pop .ph{padding:8px 9px 6px;font-size:11px;color:var(--text-faint);letter-spacing:.3px}
|
||
.acc-head{display:flex;gap:10px;padding:8px 9px;align-items:center}
|
||
.acc-head .avatar{width:32px;height:32px;font-size:13px}
|
||
.acc-name{font-size:13.5px;font-weight:600}
|
||
.acc-mail{font-size:11.5px;color:var(--text-faint)}
|
||
.org-rowline{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:var(--r-sm);cursor:pointer}
|
||
.org-rowline:hover{background:var(--bg-hover)}
|
||
.org-rowline .oi{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex:none}
|
||
.org-rowline .on{flex:1;min-width:0}
|
||
.org-rowline .on .n{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
||
.org-rowline .on .r{font-size:11px;color:var(--text-faint)}
|
||
.role-chip{font-size:10px;border-radius:4px;padding:1px 6px;font-weight:600;letter-spacing:.3px}
|
||
.role-chip.owner{background:var(--accent-dim);color:var(--accent)}
|
||
.role-chip.admin{background:var(--green-dim);color:var(--green)}
|
||
.role-chip.member{background:var(--bg-hover);color:var(--text-faint)}
|
||
|
||
/* 演示角标 */
|
||
.demo-tag{position:fixed;left:14px;bottom:12px;z-index:60;font-size:11px;color:var(--text-faint);background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:4px 10px;box-shadow:var(--shadow-card);display:flex;gap:8px;align-items:center;pointer-events:none}
|
||
.demo-tag b{color:var(--text-subtle);font-weight:600}
|
||
@media (max-width:1100px){.side{width:232px}.inbox{width:280px}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app" id="app">
|
||
|
||
<!-- ═══════════ 左栏:任务列表 ═══════════ -->
|
||
<aside class="side">
|
||
<div class="brand">
|
||
<div class="brand-mark"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/><circle cx="12" cy="3.6" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="19.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="12" cy="20.4" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="16" r="1.7" fill="#fff" stroke="none" opacity=".85"/><circle cx="4.5" cy="8" r="1.7" fill="#fff" stroke="none" opacity=".85"/><path d="M12 9V5.3M14.6 10.5l3.3-1.9M14.6 13.5l3.3 1.9M12 15v3.7M9.4 13.5l-3.3 1.9M9.4 10.5 6.1 8.6" stroke="#fff" stroke-width="1.3"/></svg></div>
|
||
<span class="brand-name">Agent-System</span>
|
||
<span class="sp"></span>
|
||
<button class="iconbtn" title="收起侧栏(⌘B)" onclick="toggleRail()"><svg class="ic ic-s" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M9.5 4v16"/></svg></button>
|
||
</div>
|
||
|
||
<div class="primary-actions">
|
||
<button class="newtask" id="nt-btn" onclick="pop(event,'nt-pop')">
|
||
<svg class="ic" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>
|
||
<span class="lab">新建任务</span>
|
||
<span class="kbd">⌘N</span>
|
||
<span class="caret" onclick="pop(event,'nt-pop');event.stopPropagation()" title="更多创建选项"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg></span>
|
||
</button>
|
||
<button class="searchbtn">
|
||
<svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
|
||
<span class="sp">搜索任务、命令与工件</span>
|
||
<span class="kbd">⌘K</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="org-row">
|
||
<div class="pills" id="org-pills">
|
||
<button class="pill on" data-org="proj" onclick="setOrg('proj')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>按项目</button>
|
||
<button class="pill" data-org="time" onclick="setOrg('time')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></svg>时间线</button>
|
||
</div>
|
||
<button class="iconbtn" style="width:28px;height:28px;border:1px solid var(--border)" title="排序与过滤" onclick="pop(event,'fl-pop')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M4 6h16M7 12h10M10 18h4"/></svg></button>
|
||
</div>
|
||
|
||
<div class="task-scroll">
|
||
<!-- 置顶区(全局置顶,归档态也保持可见) -->
|
||
<div class="sec-label" id="pin-label"><svg class="ic ic-s" viewBox="0 0 24 24" style="width:12px;height:12px"><path d="M9 4h6l-1 7 3 3H7l3-3Z"/><path d="M12 14v6"/></svg>置顶<span class="ln"></span></div>
|
||
<div class="tasks" id="pin-tasks">
|
||
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">两树一网模型 v3 设计</span><span class="tm">09:41</span></div>
|
||
</div>
|
||
|
||
<!-- 按项目视图 -->
|
||
<div id="org-proj">
|
||
<div class="sec-label">项目<span class="ln"></span></div>
|
||
<div class="group">
|
||
<div class="group-head" onclick="tglGrp(this,event)">
|
||
<svg class="ic ic-s chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg>
|
||
<span>研发体系文档</span><span class="cnt">4</span><span class="sp"></span>
|
||
<button class="group-add" title="在此项目新建任务" onclick="event.stopPropagation()"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></button>
|
||
</div>
|
||
<div class="tasks">
|
||
<div class="task on" onclick="pick(this)"><span class="dot run"></span><span class="t">本周周报起草与素材汇总</span><span class="tm">3 分钟</span></div>
|
||
<div class="task" onclick="pick(this)"><span class="dot wait"></span><span class="t">接口设计文档评审</span><span class="tm">1 小时</span></div>
|
||
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">文档规范修订意见收集</span><span class="tm">昨天</span></div>
|
||
<div class="task" onclick="pick(this)"><span class="dot done"></span><span class="t">8 月文档资产盘点</span><span class="tm">周二</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="group">
|
||
<div class="group-head" onclick="tglGrp(this,event)">
|
||
<svg class="ic ic-s chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg>
|
||
<span>记忆库建设</span><span class="cnt">3</span><span class="sp"></span>
|
||
<button class="group-add" title="在此项目新建任务" onclick="event.stopPropagation()"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></button>
|
||
</div>
|
||
<div class="tasks">
|
||
<div class="task" onclick="pick(this)"><span class="dot run"></span><span class="t">记忆库索引重建</span><span class="tm">4 分钟</span></div>
|
||
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">知识条目去重策略</span><span class="tm">周一</span></div>
|
||
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">外部语料导入试点</span><span class="tm">9/26</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="group closed">
|
||
<div class="group-head" onclick="tglGrp(this,event)">
|
||
<svg class="ic ic-s chev" viewBox="0 0 24 24"><path d="m9 6 6 6-6 6"/></svg>
|
||
<span>真实模型测试</span><span class="cnt">2</span><span class="sp"></span>
|
||
<button class="group-add" title="在此项目新建任务" onclick="event.stopPropagation()"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></button>
|
||
</div>
|
||
<div class="tasks">
|
||
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">GLM-4.6 长文抽取对比</span><span class="tm">9/25</span></div>
|
||
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">多代理协作压测</span><span class="tm">9/24</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 时间线视图 -->
|
||
<div id="org-time" style="display:none">
|
||
<div class="sec-label">今天<span class="ln"></span></div>
|
||
<div class="tasks">
|
||
<div class="task" onclick="pick(this)"><span class="dot run"></span><span class="t">本周周报起草与素材汇总</span><span class="pbadge">研发体系文档</span></div>
|
||
<div class="task" onclick="pick(this)"><span class="dot run"></span><span class="t">记忆库索引重建</span><span class="pbadge">记忆库建设</span></div>
|
||
<div class="task" onclick="pick(this)"><span class="dot wait"></span><span class="t">接口设计文档评审</span><span class="pbadge">研发体系文档</span></div>
|
||
</div>
|
||
<div class="sec-label">昨天<span class="ln"></span></div>
|
||
<div class="tasks">
|
||
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">文档规范修订意见收集</span><span class="pbadge">研发体系文档</span></div>
|
||
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">两树一网模型 v3 设计</span><span class="pbadge">置顶</span></div>
|
||
</div>
|
||
<div class="sec-label">本周更早<span class="ln"></span></div>
|
||
<div class="tasks">
|
||
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">知识条目去重策略</span><span class="pbadge">记忆库建设</span></div>
|
||
<div class="task" onclick="pick(this)"><span class="dot done"></span><span class="t">8 月文档资产盘点</span><span class="pbadge">研发体系文档</span></div>
|
||
<div class="task" onclick="pick(this)"><span class="dot idle"></span><span class="t">GLM-4.6 长文抽取对比</span><span class="pbadge">真实模型测试</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 账户区:身份常驻(P7) -->
|
||
<div class="side-footer">
|
||
<button class="userchip" onclick="pop(event,'acc-pop')">
|
||
<span class="avatar">W</span>
|
||
<span style="min-width:0;flex:1">
|
||
<div class="uc-name">weichen</div>
|
||
<div class="uc-sub">研发体系团队 · <span class="role-chip owner" style="font-size:9.5px">OWNER</span></div>
|
||
</span>
|
||
<svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--text-faint)"><path d="m8 9-4 3 4 3M16 9l4 3-4 3M13 5l-2 14"/></svg>
|
||
</button>
|
||
<button class="iconbtn" title="设置" onclick="toast('设置(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 21h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.06-.4.1-.8.1-1.2Z"/></svg></button>
|
||
<button class="iconbtn" title="切换主题" onclick="setTheme()"><svg class="ic ic-s" viewBox="0 0 24 24" id="theme-ic"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg></button>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 收起轨道 -->
|
||
<div class="rail-col">
|
||
<button class="rb" title="展开侧栏(⌘B)" onclick="toggleRail()"><svg class="ic" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2.5"/><path d="M15 4v16"/></svg></button>
|
||
<button class="rb" title="新建任务 ⌘N"><svg class="ic" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg></button>
|
||
<button class="rb" title="搜索 ⌘K"><svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></button>
|
||
<span class="sp"></span>
|
||
<button class="rb" title="收件箱"><svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.4 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.8 1.1Z"/></svg><span class="bdg">2</span></button>
|
||
<button class="rb" title="weichen" onclick="toggleRail()"><span class="avatar" style="width:24px;height:24px;font-size:11px">W</span></button>
|
||
</div>
|
||
|
||
<div class="divider" title="拖动调整宽度"></div>
|
||
|
||
<!-- ═══════════ 中栏:会话 ═══════════ -->
|
||
<main class="main">
|
||
<div class="conv-head">
|
||
<div class="ch-row">
|
||
<button class="proj-chip" title="切换项目"><svg class="ic ic-s" viewBox="0 0 24 24" style="width:13px;height:13px"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>研发体系文档</button>
|
||
<span class="ch-sep">/</span>
|
||
<span class="ch-title" title="点击重命名">本周周报起草与素材汇总</span>
|
||
<span class="sp"></span>
|
||
<button class="btn" onclick="toast('分享链接已复制(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 3v12M8 7l4-4 4 4"/><path d="M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6"/></svg>分享</button>
|
||
<button class="iconbtn" style="border:1px solid var(--border)" onclick="pop(event,'more-pop')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.4" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.4" fill="currentColor" stroke="none"/></svg></button>
|
||
</div>
|
||
<div class="ch-sub">
|
||
<span class="st"><span class="dot run"></span>2 个代理运行中</span>
|
||
<span>更新于 3 分钟前</span>
|
||
<span>·</span>
|
||
<span>消息 18 条</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="msgs">
|
||
<div class="msg m-user">
|
||
<div class="bubble">把记忆库建设项目的本周素材汇总一下,并起草周报——重点写「两树一网」模型 v3 的进展和接口设计文档的评审安排。</div>
|
||
</div>
|
||
|
||
<div class="msg">
|
||
<div class="m-meta">
|
||
<span class="m-mark"><svg class="ic ic-s" viewBox="0 0 24 24" style="width:12px;height:12px"><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/><circle cx="12" cy="4" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="18.5" cy="8.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="18.5" cy="15.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="5.5" cy="15.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="5.5" cy="8.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/></svg></span>
|
||
<span class="m-name">助手</span><span class="m-model">GLM-4.6</span><span class="m-time">10:21</span>
|
||
</div>
|
||
<div class="m-body">
|
||
<p>已检索记忆库「记忆库建设」项目本周新增的 23 条素材。要点如下:</p>
|
||
<p>· <b>两树一网 v3</b>:文档树与追溯网的合并方案已完成初稿,等你之前留的「阶段门禁」意见合并(见下方确认卡);<br>· <b>接口设计文档</b>:评审材料齐备,建议安排在周四 14:00,涉及 3 个模块的契约变更;<br>· <b>风险</b>:外部语料导入试点在 9/26 触发了 2 条知识条目冲突,已按去重策略合并。</p>
|
||
</div>
|
||
<div class="toolblock" onclick="this.classList.toggle('open')">
|
||
<div class="tb-head">
|
||
<svg class="ic ic-s wrench" viewBox="0 0 24 24"><path d="M14.7 6.3a4.5 4.5 0 0 0-6 5.6L3 17.6V21h3.4l5.7-5.7a4.5 4.5 0 0 0 5.6-6L14.5 12l-2.5-2.5Z"/></svg>
|
||
检索知识库 · <code style="font-size:11.5px">rag.search("记忆库建设 本周")</code>
|
||
<span class="res">23 段命中 · 0.8s</span>
|
||
<svg class="ic ic-s" viewBox="0 0 24 24" style="margin-left:6px;color:var(--text-faint)"><path d="m6 9 6 6 6-6"/></svg>
|
||
</div>
|
||
<div class="tb-body">query="记忆库建设 本周" → 向量 18 + 全文 RRF 融合 → rerank top-23<br>片段 #4【两树一网 v3 合并方案初稿 · 09-30】置信 0.91<br>片段 #9【接口契约变更清单 · 09-29】置信 0.87<br>…</div>
|
||
</div>
|
||
<div class="confirm-card">
|
||
<div class="cc-head"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="m8.5 12.2 2.4 2.4 4.6-5"/></svg>等待确认:生成《本周周报》草稿</div>
|
||
<div class="cc-body">按「进展 / 评审安排 / 风险」三节起草,约 1200 字,图表以表格呈现。确认后写入工件并回写本会话时间线。</div>
|
||
<div class="cc-actions">
|
||
<button class="btn green sm" onclick="toast('已确认 · 回写时间线(设计稿示意)')">确认生成</button>
|
||
<button class="btn sm" onclick="toast('已转入对话调整(设计稿示意)')">调整大纲</button>
|
||
<span class="cc-src">来源:消息 #6 · 10:22</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="msg m-user">
|
||
<div class="bubble">可以,按这个大纲生成。评审时间改成周五上午。</div>
|
||
</div>
|
||
|
||
<div class="msg">
|
||
<div class="m-meta">
|
||
<span class="m-mark"><svg class="ic ic-s" viewBox="0 0 24 24" style="width:12px;height:12px"><circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/><circle cx="12" cy="4" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="18.5" cy="8.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="18.5" cy="15.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="5.5" cy="15.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/><circle cx="5.5" cy="8.5" r="1.5" fill="#fff" stroke="none" opacity=".85"/></svg></span>
|
||
<span class="m-name">助手</span><span class="m-model">GLM-4.6</span><span class="m-time">10:24</span>
|
||
</div>
|
||
<div class="m-body"><p>周报草稿已生成,评审时间已调整为周五 10:00。工件存于项目工件区,可直接导出 PDF。</p></div>
|
||
<div class="artifact-card" onclick="toast('打开工件预览(设计稿示意)')">
|
||
<span class="aft-ic"><svg class="ic" viewBox="0 0 24 24"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h4"/></svg></span>
|
||
<span style="flex:1;min-width:0">
|
||
<div class="aft-name">周报_第39周_研发体系文档.docx</div>
|
||
<div class="aft-meta">文档 · 1,214 字 · 刚刚生成</div>
|
||
</span>
|
||
<svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--text-faint)"><path d="M9 18l6-6-6-6"/></svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="composer-wrap">
|
||
<div class="composer">
|
||
<textarea rows="1" placeholder="给助手发消息;/ 唤起命令,@ 引用工件…"></textarea>
|
||
<div class="cmp-row">
|
||
<button class="cmp-ic" title="上传附件"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="m21.4 11.1-8.8 8.8a5.5 5.5 0 0 1-7.8-7.8l8.5-8.5a3.7 3.7 0 0 1 5.2 5.2l-8.5 8.5a1.8 1.8 0 0 1-2.6-2.6l7.8-7.7"/></svg></button>
|
||
<button class="slash-hint">/ 命令</button>
|
||
<span class="sp"></span>
|
||
<button class="model-chip"><svg class="ic ic-s" viewBox="0 0 24 24" style="width:12px;height:12px"><rect x="5" y="5" width="14" height="14" rx="3"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></svg>GLM-4.6</button>
|
||
<button class="send" title="发送(⏎)"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<div class="divider" title="拖动调整宽度"></div>
|
||
|
||
<!-- ═══════════ 右栏:收件箱(D25 纯收件箱) ═══════════ -->
|
||
<aside class="inbox">
|
||
<div class="ib-head">
|
||
<div class="ib-title">
|
||
<svg class="ic" viewBox="0 0 24 24"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.4 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.8 1.1Z"/></svg>
|
||
收件箱<span class="ib-badge" id="ib-badge">2</span>
|
||
</div>
|
||
<div class="ib-pills">
|
||
<button class="ib-pill on" data-f="todo" onclick="setIb('todo')">待办 2</button>
|
||
<button class="ib-pill" data-f="all" onclick="setIb('all')">全部 4</button>
|
||
</div>
|
||
</div>
|
||
<div class="ib-scroll" id="ib-scroll">
|
||
<div class="ib-card" data-k="todo">
|
||
<div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--amber)"><path d="M12 3 2.5 20h19Z"/><path d="M12 10v4M12 17.5v.1"/></svg><span>发布前确认:《接口设计文档》3 处契约变更</span></div>
|
||
<div class="mta">接口设计文档评审 · 10 分钟前</div>
|
||
<div class="acts"><button class="btn sm primary" onclick="toast('打开确认卡(设计稿示意)')">查看</button><button class="btn sm" onclick="toast('已确认(设计稿示意)')">确认</button></div>
|
||
</div>
|
||
<div class="ib-card" data-k="todo">
|
||
<div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--accent)"><path d="M12 3v4M12 17v4M3 12h4M17 12h4" opacity=".4"/><circle cx="12" cy="12" r="3.5"/></svg><span>记忆库索引重建进行中</span></div>
|
||
<div class="mta">代理 #a3 · 已运行 4 分钟 · 本会话</div>
|
||
<div class="pbar"><i></i></div>
|
||
<div class="prog-num"><span>3,412 / 5,020 段</span><span>68%</span></div>
|
||
</div>
|
||
<div class="ib-card" data-k="done">
|
||
<div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--green)"><circle cx="12" cy="12" r="9"/><path d="m8.5 12.2 2.4 2.4 4.6-5"/></svg><span>周报(第 39 周)已生成</span></div>
|
||
<div class="mta">10:24 · 本会话</div>
|
||
<div class="acts"><button class="btn sm" onclick="toast('打开工件(设计稿示意)')">打开工件</button></div>
|
||
</div>
|
||
<div class="ib-card dim" data-k="done">
|
||
<div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--text-faint)"><path d="M20 6 9 17l-5-5"/></svg><span>插件 knowledge-graph 升级 2.3.1</span></div>
|
||
<div class="mta">已确认 · 09:12 · 由 youchen 执行</div>
|
||
</div>
|
||
</div>
|
||
<div class="ib-foot">
|
||
<button class="ib-link" onclick="toast('代理面板 ⌘2(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="7" rx="2"/><rect x="4" y="13" width="16" height="7" rx="2"/><path d="M8 7.5h.1M8 16.5h.1"/></svg>代理<span class="n">2</span></button>
|
||
<button class="ib-link" onclick="toast('工件面板 ⌘1(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M21 8 12 3 3 8v8l9 5 9-5Z"/><path d="m3 8 9 5 9-5M12 13v8"/></svg>工件<span class="n">5</span></button>
|
||
<button class="ib-link" onclick="toast('插件面板(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M9 3v4M15 3v4M9 17v4M15 17v4M3 9h4M3 15h4M17 9h4M17 15h4"/><rect x="7" y="7" width="10" height="10" rx="2"/></svg>插件</button>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<!-- ═══════════ 弹层 ═══════════ -->
|
||
<div class="pop" id="nt-pop" style="width:280px">
|
||
<button class="pi" onclick="toast('在当前项目新建任务(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>新建任务 · 当前项目<span class="kbd">⌘N</span></button>
|
||
<div class="pdiv"></div>
|
||
<button class="pi" onclick="toast('新建项目(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>新建项目…</button>
|
||
<button class="pi" onclick="toast('选择目标项目(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/><path d="M4 4h4M4 20h4" opacity=".5"/></svg>新建任务于指定项目…</button>
|
||
<button class="pi" onclick="toast('导入(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 3v12M8 7l4-4 4 4"/><path d="M5 13v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6"/></svg>导入对话或数据</button>
|
||
</div>
|
||
|
||
<div class="pop" id="fl-pop">
|
||
<div class="ph">排序</div>
|
||
<button class="pi"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--accent)"><path d="m5 13 4 4L19 7"/></svg>最近更新</button>
|
||
<button class="pi" style="padding-left:32px">创建时间</button>
|
||
<div class="pdiv"></div>
|
||
<div class="ph">显示</div>
|
||
<button class="pi"><svg class="ic ic-s" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3.5"/><path d="m8.5 12.2 2.3 2.3 4.7-5" style="display:none"/></svg>只看我发起的任务</button>
|
||
<button class="pi" onclick="toast('归档视图(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="5" rx="1.5"/><path d="M5 9v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9M10 13h4"/></svg>查看归档</button>
|
||
</div>
|
||
|
||
<div class="pop" id="more-pop">
|
||
<button class="pi" onclick="toast('重命名(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>重命名</button>
|
||
<button class="pi" onclick="toast('置顶(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M9 4h6l-1 7 3 3H7l3-3Z"/><path d="M12 14v6"/></svg>置顶</button>
|
||
<button class="pi" onclick="toast('导出(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 15V3M8 11l4 4 4-4"/><path d="M5 15v4a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4"/></svg>导出会话</button>
|
||
<div class="pdiv"></div>
|
||
<button class="pi danger" onclick="toast('归档(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="5" rx="1.5"/><path d="M5 9v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9M10 13h4"/></svg>归档会话</button>
|
||
</div>
|
||
|
||
<div class="pop" id="acc-pop" style="width:270px">
|
||
<div class="acc-head">
|
||
<span class="avatar">W</span>
|
||
<span style="min-width:0"><div class="acc-name">weichen</div><div class="acc-mail">weichen@rd-team.cn</div></span>
|
||
</div>
|
||
<div class="pdiv"></div>
|
||
<div class="ph">当前租户</div>
|
||
<div class="org-rowline">
|
||
<span class="oi" style="background:linear-gradient(135deg,#5b8def,#8f6ce8)">研</span>
|
||
<span class="on"><div class="n">研发体系团队</div><div class="r">6 名成员 · 标准档</div></span>
|
||
<span class="role-chip owner">OWNER</span>
|
||
</div>
|
||
<div class="ph">切换租户</div>
|
||
<div class="org-rowline" onclick="toast('已切换到个人租户(设计稿示意)')">
|
||
<span class="oi" style="background:#4a5568">W</span>
|
||
<span class="on"><div class="n">个人租户</div><div class="r">仅自己</div></span>
|
||
<span class="role-chip owner">OWNER</span>
|
||
</div>
|
||
<div class="org-rowline" onclick="toast('已切换到测试租户(设计稿示意)')">
|
||
<span class="oi" style="background:#2f855a">测</span>
|
||
<span class="on"><div class="n">测试联调租户</div><div class="r">3 名成员</div></span>
|
||
<span class="role-chip member">MEMBER</span>
|
||
</div>
|
||
<div class="pdiv"></div>
|
||
<button class="pi" onclick="toast('成员管理(设计稿示意,见 demo-auth)')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="9" cy="8" r="3.5"/><path d="M2.5 20a6.5 6.5 0 0 1 13 0"/><path d="M16 4.6a3.5 3.5 0 0 1 0 6.8M17.5 14.4a6.5 6.5 0 0 1 4 5.6"/></svg>成员与角色</button>
|
||
<button class="pi" onclick="toast('API 密钥管理(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="8" cy="14" r="4.5"/><path d="m11 11 8.5-8.5M15 7l3 3M18 4l3 3" transform=""/></svg>API 密钥</button>
|
||
<button class="pi" onclick="toast('偏好设置(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6A7 7 0 0 0 5 12c0 .4 0 .8.1 1.2l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 21h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.06-.4.1-.8.1-1.2Z"/></svg>偏好设置</button>
|
||
<div class="pdiv"></div>
|
||
<button class="pi danger" onclick="toast('已退出登录(设计稿示意)')"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M9 21H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3"/><path d="m16 17 5-5-5-5M21 12H9"/></svg>退出登录</button>
|
||
</div>
|
||
|
||
<div class="demo-tag"><b>方案 A · 任务中心</b>设计稿 · 无后端 · ⌘B 收起侧栏</div>
|
||
|
||
<script>
|
||
function $(s){return document.querySelector(s)}
|
||
function $$(s){return document.querySelectorAll(s)}
|
||
let openPop=null;
|
||
function pop(e,id){
|
||
e.stopPropagation();
|
||
const el=$('#'+id);
|
||
if(openPop===el){el.classList.remove('show');openPop=null;return}
|
||
$$('.pop').forEach(p=>p.classList.remove('show'));
|
||
const r=e.currentTarget.getBoundingClientRect();
|
||
el.classList.add('show');
|
||
const w=el.offsetWidth,h=el.offsetHeight;
|
||
let x=r.left, y=r.bottom+6;
|
||
if(id==='acc-pop'||id==='more-pop') x=Math.min(r.right-w,innerWidth-w-10);
|
||
if(id==='fl-pop') x=Math.min(r.right-w,innerWidth-w-10);
|
||
if(y+h>innerHeight-8) y=r.top-h-6;
|
||
el.style.left=Math.max(8,x)+'px'; el.style.top=y+'px';
|
||
openPop=el;
|
||
}
|
||
document.addEventListener('click',()=>{if(openPop){openPop.classList.remove('show');openPop=null}});
|
||
$$('.pop').forEach(p=>p.addEventListener('click',e=>e.stopPropagation()));
|
||
|
||
function setOrg(k){
|
||
$$('#org-pills .pill').forEach(p=>p.classList.toggle('on',p.dataset.org===k));
|
||
$('#org-proj').style.display=k==='proj'?'':'none';
|
||
$('#org-time').style.display=k==='time'?'':'none';
|
||
}
|
||
function tglGrp(head,e){if(e.target.closest('.group-add'))return;head.parentElement.classList.toggle('closed')}
|
||
function pick(el){$$('.task').forEach(t=>t.classList.remove('on'));el.classList.add('on')}
|
||
function setIb(k){
|
||
$$('.ib-pill').forEach(p=>p.classList.toggle('on',p.dataset.f===k));
|
||
$$('.ib-card').forEach(c=>c.style.display=(k==='all'||c.dataset.k==='todo')?'':'none');
|
||
$('#ib-badge').style.display=k==='todo'?'':'none';
|
||
}
|
||
function toggleRail(){$('#app').classList.toggle('rail')}
|
||
function setTheme(){
|
||
const h=document.documentElement;
|
||
h.dataset.theme=h.dataset.theme==='dark'?'light':'dark';
|
||
}
|
||
function toast(msg){
|
||
let t=$('#__toast');
|
||
if(!t){t=document.createElement('div');t.id='__toast';
|
||
t.style.cssText='position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:99;background:var(--bg-raised);border:1px solid var(--border-strong);color:var(--text);border-radius:8px;padding:8px 16px;font-size:12.5px;box-shadow:var(--shadow-pop);transition:opacity .2s';
|
||
document.body.appendChild(t)}
|
||
t.textContent=msg;t.style.opacity=1;
|
||
clearTimeout(t._h);t._h=setTimeout(()=>t.style.opacity=0,1400);
|
||
}
|
||
document.addEventListener('keydown',e=>{
|
||
if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='b'){e.preventDefault();toggleRail()}
|
||
if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='n'){e.preventDefault();toast('新建任务(设计稿示意)')}
|
||
if((e.metaKey||e.ctrlKey)&&e.key.toLowerCase()==='k'){e.preventDefault();toast('搜索面板(设计稿示意)')}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|