Files
Agent-System-Documents/docs/proposals/ui-redesign-demos/demo-a-task-centric.html
T
weichen e601b253bc Add UI redesign and auth design proposal with HTML demos
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)
2026-09-30 09:59:40 +00:00

632 lines
48 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>