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)
241 lines
22 KiB
HTML
241 lines
22 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>方案 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>
|