Files
Agent-System-Documents/docs/proposals/ui-redesign-demos/demo-b-activity-rail.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

241 lines
22 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>方案 B · 活动栏 — Agent-System 设计稿</title>
<style>
: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-rail:#141519;--bg-surface:#1f2026;--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;--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;--shadow-pop:0 12px 32px rgba(0,0,0,.45);--shadow-card:0 1px 2px rgba(0,0,0,.25)}
[data-theme="light"]{--bg:#f6f7f8;--bg-panel:#fff;--bg-rail:#f0f1f4;--bg-surface:#fff;--bg-hover:#f0f1f4;--bg-selected:#e8eaf0;--bg-input:#fff;--border:#e5e6ea;--border-strong:#d4d6dd;--border-faint:#ececf0;--text:#1d1e23;--text-subtle:#5c5f68;--text-faint:#989ba4;--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;--shadow-pop:0 12px 32px rgba(20,22,28,.14);--shadow-card:0 1px 2px rgba(20,22,28,.05)}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);font-size:14px;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{outline:2px solid var(--accent);outline-offset:1px}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--bg-selected);border-radius:6px;border:3px solid transparent;background-clip:content-box}
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}
/* ── 活动栏 ── */
.rail{width:52px;flex:none;background:var(--bg-rail);border-right:1px solid var(--border-faint);display:flex;flex-direction:column;align-items:center;padding:12px 0 10px;gap:4px}
.brandmark{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#8f6ce8);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex:none}
.ri{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:var(--text-faint);position:relative;cursor:pointer;transition:all var(--ease)}
.ri:hover{background:var(--bg-hover);color:var(--text-subtle)}
.ri.on{background:var(--accent-dim);color:var(--accent)}
.ri.on::before{content:"";position:absolute;left:-7px;top:8px;bottom:8px;width:2.5px;border-radius:2px;background:var(--accent)}
.ri .bdg{position:absolute;top:4px;right:4px;min-width:15px;height:15px;border-radius:8px;background:var(--amber);color:#fff;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0:3px;padding:0 3px}
.ri .lbl{position:absolute;left:46px;background:var(--bg-surface);border:1px solid var(--border-strong);color:var(--text);font-size:11.5px;padding:3px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--ease);z-index:30;box-shadow:var(--shadow-pop)}
.ri:hover .lbl{opacity:1}
.rail .sp{flex:1}
.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}
/* ── 二级列表 ── */
.ctx{width:250px;flex:none;background:var(--bg-panel);border-right:1px solid var(--border-faint);display:flex;flex-direction:column;min-width:0}
.ctx-head{padding:12px 12px 8px}
.ctx-proj{display:flex;align-items:center;gap:8px;height:32px;padding:0 9px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-input);cursor:pointer;font-weight:600;font-size:13px}
.ctx-proj:hover{border-color:var(--border-strong)}
.ctx-proj .oi{width:20px;height:20px;border-radius:5px;background:linear-gradient(135deg,#5b8def,#8f6ce8);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ctx-proj .cnt{margin-left:auto;font-size:11px;color:var(--text-faint);font-weight:400}
.ctx-new{display:flex;align-items:center;gap:8px;height:32px;margin-top:8px;border-radius:var(--r-md);background:var(--accent-dim);border:1px solid var(--accent-soft);color:var(--accent);font-weight:600;padding:0 10px;font-size:13px}
.ctx-new:hover{background:var(--accent-soft)}
.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)}
.ctx-scroll{flex:1;overflow-y:auto;padding:0 8px 8px;min-height:0}
.sec{font-size:11.5px;color:var(--text-faint);padding:10px 8px 4px;letter-spacing:.3px}
.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}
.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)}
.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)}
.ctx-foot{border-top:1px solid var(--border-faint);padding:8px 10px;display:flex;gap:6px}
.sbtn{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)}
.sbtn:hover{background:var(--bg-hover);color:var(--text)}
/* ── 中栏/右栏(与方案 A 同构,从简) ── */
.main{flex:1;min-width:0;display:flex;flex-direction:column;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}
.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)}
.btn:hover{border-color:var(--border-strong);color:var(--text)}
.btn.sm{height:24px;padding:0 9px;font-size:12px}
.btn.green{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.ch-sub{margin-top:5px;font-size:12px;color:var(--text-faint);display:flex;gap:10px;align-items:center}
.msgs{flex:1;overflow-y:auto;padding:20px 24px;min-height:0}
.msg{margin-bottom:18px;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%}
.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;font-size:11px;font-weight:700}
.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;line-height:1.7}
.toolblock{border:1px solid var(--border);border-radius:var(--r-md);margin:10px 0;background:var(--bg-panel)}
.tb-head{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;font-size:12.5px;color:var(--text-subtle)}
.tb-head .res{margin-left:auto;font-size:11.5px;color:var(--text-faint)}
.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}
.cc-actions{display:flex;gap:8px;align-items:center}
.cc-src{margin-left:auto;font-size:11px;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)}
.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;outline:none}
.composer textarea::placeholder{color:var(--text-faint)}
.cmp-row{display:flex;align-items:center;gap:6px;padding:6px 8px 8px}
.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}
.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)}
.inbox{flex:none;width:320px;background:var(--bg-panel);border-left:1px solid var(--border-faint);display:flex;flex-direction:column}
.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-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}
.ib-card .ttl{display:flex;gap:8px;font-size:13px;font-weight:600;line-height:1.45}
.ib-card .mta{font-size:11.5px;color:var(--text-faint);margin-top:3px}
.pbar{height:4px;border-radius:2px;background:var(--bg-hover);margin-top:8px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--accent);width:68%}
.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);pointer-events:none}
.demo-tag b{color:var(--text-subtle);font-weight:600}
/* 活动视图容器(演示切换) */
.ctx-views .v{display:none}.ctx-views .v.on{display:block}
</style>
</head>
<body>
<div class="app">
<!-- 活动栏 -->
<nav class="rail">
<div class="brandmark"><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"/></svg></div>
<button class="ri on" data-v="tasks" onclick="setView(this)"><svg class="ic" viewBox="0 0 24 24"><path d="M8 6h13M8 12h13M8 18h13"/><path d="m3 6 1 1 2-2M3 12l1 1 2-2M3 18l1 1 2-2"/></svg><span class="lbl">任务(项目与会话)</span></button>
<button class="ri" data-v="inbox" onclick="setView(this)"><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><span class="lbl">收件箱</span></button>
<button class="ri" data-v="agents" onclick="setView(this)"><svg class="ic" 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="lbl">代理运行</span></button>
<button class="ri" data-v="arts" onclick="setView(this)"><svg class="ic" 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="lbl">工件</span></button>
<button class="ri" onclick="toast('插件面板(设计稿示意)')"><svg class="ic" 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><span class="lbl">插件</span></button>
<span class="sp"></span>
<button class="ri" onclick="toast('设置(设计稿示意)')"><svg class="ic" 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><span class="lbl">设置</span></button>
<button class="ri" onclick="toast('账户菜单(见 demo-auth)')"><span class="avatar">W</span><span class="lbl">weichen · 研发体系团队</span></button>
</nav>
<!-- 二级上下文列表 -->
<div class="ctx">
<div class="ctx-views">
<div class="v on" data-v="tasks">
<div class="ctx-head">
<button class="ctx-proj"><span class="oi">研</span>研发体系文档<span class="cnt">4 会话</span><svg class="ic ic-s" viewBox="0 0 24 24" style="margin-left:auto"><path d="m6 9 6 6 6-6"/></svg></button>
<button class="ctx-new"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>新会话<span class="kbd" style="margin-left:auto">⌘N</span></button>
</div>
<div class="ctx-scroll">
<div class="sec">进行中</div>
<div class="task on"><span class="dot run"></span><span class="t">本周周报起草与素材汇总</span><span class="tm">3 分</span></div>
<div class="task"><span class="dot wait"></span><span class="t">接口设计文档评审</span><span class="tm">1 时</span></div>
<div class="sec">空闲</div>
<div class="task"><span class="dot idle"></span><span class="t">文档规范修订意见收集</span><span class="tm">昨</span></div>
<div class="task"><span class="dot done"></span><span class="t">8 月文档资产盘点</span><span class="tm">周二</span></div>
</div>
</div>
<div class="v" data-v="inbox">
<div class="ctx-head"><button class="ctx-proj"><svg class="ic ic-s" 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>收件箱 · 待办 2</button></div>
<div class="ctx-scroll">
<div class="task"><span class="dot wait"></span><span class="t">发布前确认:接口契约变更</span><span class="tm">10 分</span></div>
<div class="task"><span class="dot run"></span><span class="t">记忆库索引重建</span><span class="tm">4 分</span></div>
</div>
</div>
<div class="v" data-v="agents">
<div class="ctx-head"><button class="ctx-proj"><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>代理运行 · 2</button></div>
<div class="ctx-scroll">
<div class="task"><span class="dot run"></span><span class="t">#a3 索引重建 worker</span><span class="tm">68%</span></div>
<div class="task"><span class="dot run"></span><span class="t">#a4 语料去重</span><span class="tm">31%</span></div>
</div>
</div>
<div class="v" data-v="arts">
<div class="ctx-head"><button class="ctx-proj"><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-5"/></svg>工件 · 5</button></div>
<div class="ctx-scroll">
<div class="task"><span class="dot done"></span><span class="t">周报_第39周.docx</span></div>
<div class="task"><span class="dot done"></span><span class="t">接口契约变更清单.md</span></div>
<div class="task"><span class="dot done"></span><span class="t">知识条目冲突报告.pdf</span></div>
</div>
</div>
</div>
<div class="ctx-foot">
<button class="sbtn"><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="kbd">⌘K</span></button>
<button class="sbtn" style="flex:none;width:34px" title="切换主题" onclick="const h=document.documentElement;h.dataset.theme=h.dataset.theme==='dark'?'light':'dark'"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg></button>
</div>
</div>
<!-- 中栏 -->
<main class="main">
<div class="conv-head">
<div class="ch-row">
<span class="ch-title">本周周报起草与素材汇总</span>
<span class="sp"></span>
<button class="btn"><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="btn">⋯</button>
</div>
<div class="ch-sub"><span>研发体系文档</span><span>·</span><span>2 个代理运行中</span><span>·</span><span>更新于 3 分钟前</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">A</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">已检索记忆库本周新增的 23 条素材:「两树一网」v3 初稿完成待合并意见;接口契约变更涉及 3 个模块;外部语料导入触发 2 条条目冲突已合并。</div>
<div class="toolblock"><div class="tb-head"><svg class="ic ic-s" 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>检索知识库 · rag.search("记忆库建设 本周")<span class="res">23 段命中 · 0.8s</span></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 sm green">确认生成</button><button class="btn sm">调整大纲</button><span class="cc-src">来源:消息 #6</span></div>
</div>
</div>
</div>
<div class="composer-wrap">
<div class="composer">
<textarea rows="1" placeholder="给助手发消息;/ 唤起命令…"></textarea>
<div class="cmp-row">
<svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--text-faint);margin:0 8px"><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>
<span class="sp"></span>
<span class="model-chip">GLM-4.6</span>
<button class="send"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7"/></svg></button>
</div>
</div>
</div>
</main>
<!-- 右栏收件箱(保留,亦可经活动栏全屏化) -->
<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">2</span></div>
</div>
<div class="ib-scroll">
<div class="ib-card"><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>
<div class="ib-card"><div class="ttl"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--accent)"><circle cx="12" cy="12" r="3.5"/><path d="M12 3v4M12 17v4M3 12h4M17 12h4" opacity=".4"/></svg><span>记忆库索引重建进行中</span></div><div class="mta">代理 #a3 · 4 分钟</div><div class="pbar"><i></i></div></div>
<div class="ib-card"><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>
</div>
</aside>
</div>
<div class="demo-tag"><b>方案 B · 活动栏</b>设计稿 · 无后端 · 悬停图标看提示</div>
<script>
function setView(btn){
document.querySelectorAll('.ri').forEach(b=>b.classList.toggle('on',b===btn));
const v=btn.dataset.v;
document.querySelectorAll('.ctx-views .v').forEach(x=>x.classList.toggle('on',x.dataset.v===v));
}
function toast(msg){
let t=document.getElementById('__t');
if(!t){t=document.createElement('div');t.id='__t';t.style.cssText='position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:99;background:var(--bg-surface);border:1px solid var(--border-strong);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);
}
</script>
</body>
</html>