weichen
e601b253bc
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)
134 lines
12 KiB
HTML
134 lines
12 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>界面重构方案总览 — 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:14px;--r-lg:10px;--r-md:8px;--ease:.13s ease}
|
||
[data-theme="dark"]{--bg:#121316;--bg-panel:#191a1e;--bg-surface:#1f2026;--bg-hover:#26272f;--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);--amber:#d99b3f;--shadow-card:0 1px 2px rgba(0,0,0,.25)}
|
||
[data-theme="light"]{--bg:#f6f7f8;--bg-panel:#fff;--bg-surface:#fff;--bg-hover:#f0f1f4;--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);--amber:#a8731d;--shadow-card:0 1px 2px rgba(20,22,28,.05)}
|
||
*{margin:0;padding:0;box-sizing:border-box}
|
||
body{font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg);min-height:100vh;padding:40px 48px 60px}
|
||
a{color:var(--accent);text-decoration:none}
|
||
a:hover{text-decoration:underline}
|
||
.wrap{max-width:1060px;margin:0 auto}
|
||
.top{display:flex;align-items:flex-start;gap:16px;margin-bottom:34px}
|
||
.mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#8f6ce8);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
|
||
h1{font-size:24px;font-weight:700;letter-spacing:-.3px}
|
||
.sub{margin-top:6px;color:var(--text-subtle);font-size:13.5px;line-height:1.6}
|
||
.sub code{font-family:var(--mono);font-size:12px;background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
|
||
.sp{flex:1}
|
||
.tbtn{width:34px;height:34px;border-radius:9px;background:var(--bg-panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-faint);cursor:pointer}
|
||
.tbtn:hover{color:var(--text-subtle)}
|
||
svg.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
|
||
|
||
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
|
||
.card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xl);padding:18px;display:flex;flex-direction:column;box-shadow:var(--shadow-card);position:relative;transition:border-color var(--ease)}
|
||
.card:hover{border-color:var(--border-strong)}
|
||
.card.rec{border-color:var(--accent-soft)}
|
||
.badge{position:absolute;top:-9px;left:16px;font-size:10.5px;font-weight:700;letter-spacing:.5px;color:var(--accent);background:var(--accent-dim);border:1px solid var(--accent-soft);border-radius:6px;padding:2px 8px}
|
||
.card h3{font-size:16px;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:4px}
|
||
.card h3 .en{font-size:11px;color:var(--text-faint);font-weight:500;letter-spacing:.4px}
|
||
.card p{font-size:12.5px;color:var(--text-subtle);line-height:1.65;margin:6px 0 12px}
|
||
.wire{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:4px;background:var(--bg)}
|
||
.wire .w{display:flex;height:120px}
|
||
.wire .c{border-right:1px solid var(--border-faint);display:flex;flex-direction:column;gap:3px;padding:7px}
|
||
.wire .c:last-child{border-right:none}
|
||
.wire .b{border-radius:3px;background:var(--bg-hover);height:7px}
|
||
.wire .b.a{background:var(--accent);height:14px;border-radius:4px}
|
||
.wire .b.g{background:var(--bg-input);border:1px solid var(--border)}
|
||
.wire .b.k{width:60%}
|
||
.wire .b.m{background:var(--green-dim);border:1px solid rgba(65,178,110,.4)}
|
||
.wire .b.y{background:var(--amber);opacity:.8;height:9px;width:34%}
|
||
.open{margin-top:auto;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:var(--r-md);background:var(--accent);color:#fff;font-weight:600;font-size:13px;cursor:pointer;border:none;width:fit-content}
|
||
.open:hover{filter:brightness(1.08)}
|
||
.ghost{background:var(--bg-surface);border:1px solid var(--border);color:var(--text-subtle)}
|
||
.ghost:hover{filter:none;border-color:var(--border-strong);color:var(--text)}
|
||
h2{font-size:17px;font-weight:700;margin:36px 0 12px;letter-spacing:-.2px}
|
||
table{width:100%;border-collapse:collapse;font-size:13px}
|
||
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--border-faint)}
|
||
th{color:var(--text-faint);font-weight:500;font-size:12px}
|
||
td.win{color:var(--text);font-weight:600;background:var(--green-dim)}
|
||
tr.rec-row td:first-child{font-weight:700}
|
||
tr.rec-row td.win{box-shadow:inset 2.5px 0 0 var(--green)}
|
||
.note{margin-top:26px;font-size:12.5px;color:var(--text-faint);line-height:1.7;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:13px 16px}
|
||
.note b{color:var(--text-subtle)}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="top">
|
||
<div class="mark"><svg class="ic" viewBox="0 0 24 24" style="width:22px;height:22px"><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>
|
||
<div>
|
||
<h1>界面重构与多用户认证 · 方案总览</h1>
|
||
<div class="sub">2026-09-30 · 设计提案配套 demo（静态、无后端，明暗主题可切换）· 完整提案见 Documents 仓 <code>docs/proposals/2026-09-30-ui-redesign-and-auth.md</code></div>
|
||
</div>
|
||
<span class="sp"></span>
|
||
<button class="tbtn" title="切换主题" onclick="const h=document.documentElement;h.dataset.theme=h.dataset.theme==='dark'?'light':'dark'"><svg class="ic" 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 class="grid">
|
||
<div class="card rec">
|
||
<span class="badge">推荐</span>
|
||
<h3>方案 A · 任务中心<span class="en">TASK-CENTRIC</span></h3>
|
||
<div class="wire"><div class="w">
|
||
<div class="c" style="flex:0 0 34%"><span class="b a" style="width:80%"></span><span class="b g k"></span><span class="b"></span><span class="b"></span><span class="b k"></span><span class="b"></span><span class="b k"></span></div>
|
||
<div class="c" style="flex:1"><span class="b m k"></span><span class="b"></span><span class="b k"></span><span class="b y"></span><span class="b m"></span></div>
|
||
<div class="c" style="flex:0 0 22%"><span class="b y"></span><span class="b m"></span><span class="b"></span><span class="b k"></span><span class="b m k"></span></div>
|
||
</div></div>
|
||
<p>创建入口唯一置顶（新建任务 ⌘N + 次级菜单）；项目/时间线是列表的<b>视图模式</b>而非树；置顶区 + 归档；侧栏 Footer 承载账户与租户身份。与 ZCode 桌面端范式同构，兼容既有 D25/D26/D31 决策。</p>
|
||
<button class="open" onclick="location.href='demo-a-task-centric.html'">打开方案 A demo</button>
|
||
</div>
|
||
<div class="card">
|
||
<h3>方案 B · 活动栏<span class="en">ACTIVITY RAIL</span></h3>
|
||
<div class="wire"><div class="w">
|
||
<div class="c" style="flex:0 0 9%;align-items:center"><span class="b a" style="width:70%"></span><span class="b" style="width:70%"></span><span class="b" style="width:70%"></span><span class="b" style="width:70%"></span><span class="b" style="width:70%"></span></div>
|
||
<div class="c" style="flex:0 0 26%"><span class="b g"></span><span class="b a k"></span><span class="b"></span><span class="b k"></span><span class="b"></span></div>
|
||
<div class="c" style="flex:1"><span class="b m k"></span><span class="b"></span><span class="b k"></span><span class="b y"></span><span class="b m"></span></div>
|
||
<div class="c" style="flex:0 0 20%"><span class="b y"></span><span class="b m"></span><span class="b k"></span></div>
|
||
</div></div>
|
||
<p>最左图标轨切换领域（任务/收件箱/代理/工件/设置/账户），第二栏随活动渲染列表。导航可无限扩展（插件域友好），但创建是二级动作、多占一列——适合域数量 ≥ 6 后启用。</p>
|
||
<button class="open ghost" onclick="location.href='demo-b-activity-rail.html'">打开方案 B demo</button>
|
||
</div>
|
||
<div class="card">
|
||
<h3>方案 C · 项目门户<span class="en">PROJECT PORTAL</span></h3>
|
||
<div class="wire"><div class="w">
|
||
<div class="c" style="flex:0 0 26%"><span class="b a k"></span><span class="b"></span><span class="b k"></span><span class="b"></span><span class="b k"></span></div>
|
||
<div class="c" style="flex:1;justify-content:center"><span class="b k"></span><span style="display:flex;gap:4px"><span class="b" style="flex:1;height:26px"></span><span class="b" style="flex:1;height:26px"></span><span class="b a" style="flex:1;height:26px"></span></span><span style="display:flex;gap:4px"><span class="b" style="flex:1;height:26px"></span><span class="b" style="flex:1;height:26px"></span></span></div>
|
||
</div></div>
|
||
<p>项目是页面：门户首页为会话卡片网格 + 统计 + 项目内新建，点卡片进入对话。项目总览最好，但高频会话多一跳、对话-first 被破坏——适合以交付物为中心的少量项目。</p>
|
||
<button class="open ghost" onclick="location.href='demo-c-project-portal.html'">打开方案 C demo</button>
|
||
</div>
|
||
<div class="card">
|
||
<h3>认证与租户<span class="en">AUTH & TENANCY</span></h3>
|
||
<div class="wire"><div class="w">
|
||
<div class="c" style="flex:1;justify-content:center"><span class="b a" style="width:36%"></span><span class="b g k"></span><span class="b g"></span><span class="b k"></span><span class="b" style="width:26%"></span></div>
|
||
<div class="c" style="flex:0 0 44%;background:linear-gradient(160deg,#1b2340,#2c2560)"><span class="b" style="width:60%;background:rgba(255,255,255,.25)"></span><span class="b" style="width:80%;background:rgba(255,255,255,.14)"></span><span class="b" style="width:50%;background:rgba(255,255,255,.14)"></span></div>
|
||
</div></div>
|
||
<p>登录（访问密钥 / 邮箱密码双 tab）、注册即建租户（OWNER）、应用内账户菜单（多租户切换、API 密钥）、成员与角色管理。配套认证阶段 2 的 orgs / memberships / 服务端会话设计。</p>
|
||
<button class="open" onclick="location.href='demo-auth.html'">打开认证 demo</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>方案对比</h2>
|
||
<table>
|
||
<thead><tr><th>维度</th><th>A 任务中心（推荐）</th><th>B 活动栏</th><th>C 项目门户</th></tr></thead>
|
||
<tbody>
|
||
<tr class="rec-row"><td>解决创建入口分裂</td><td class="win">完全</td><td>部分</td><td>部分（上下文内）</td></tr>
|
||
<tr><td>跨项目浏览</td><td class="win">优（视图切换）</td><td>中</td><td>中</td></tr>
|
||
<tr><td>身份/租户常驻</td><td class="win">Footer 账户区</td><td>图标位</td><td>Footer</td></tr>
|
||
<tr><td>与既有决策兼容（D25/D26/D31）</td><td class="win">完全</td><td>需调 D25</td><td>张力大</td></tr>
|
||
<tr><td>改造量</td><td class="win">中</td><td>大</td><td>大（含视图路由）</td></tr>
|
||
<tr><td>扩展性（未来插件域）</td><td>中</td><td class="win">优</td><td>中</td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="note">
|
||
<b>说明</b>：demo 为静态设计稿（无后端，交互为演示性），视觉规格（色板 / 字号阶 / 圆角嵌套 / 状态色语义）即 R4 设计令牌的目标值来源。方案 A 支持 ⌘B 收起侧栏、按项目 / 时间线组织切换、新建菜单、账户菜单、明暗主题切换。<br>
|
||
<b>决策待定</b>：方向裁定（默认 A）→ 另立实施提案（R1 左栏重构 → R2 认证阶段 2 → R3 成员与租户 → R4 视觉收敛）。
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|