Compare commits

...
Author SHA1 Message Date
weichen fd4863899a Add the porting criterion and full catalog disposition table
Why: deciding what enters the library from an external prompt catalog
needs a stated rule (carrier mechanism or future slot) and an auditable
per-item disposition, otherwise coverage drifts by reviewer taste.

Evidence: table maps every Claude Code catalog entry to a library module
or an explicit not-ported reason.

Impact: guide gains section 9; no code change.

Refs: feature/prompt-catalog-coverage task card.
2026-09-30 10:45:15 +00:00
weichen 761f8bec4e Merge pull request 'feature/prompt-library' (#15) from feature/prompt-library into main 2026-09-30 10:36:54 +00:00
weichen 02198f1ceb Add the prompt library design and extension guide
Why: the prompt system's design rationale (layering, the eight module
patterns, trigger semantics, override chain) needs to live with the
docs so future prompt work follows it instead of re-deriving it.

Evidence: guide content distilled from the implemented library and the
Claude prompt catalog analysis recorded in the task card.

Impact: new docs/guides/prompt-library-design.md; no code change.

Refs: feature/prompt-library task card.
2026-09-30 10:36:40 +00:00
weichen ab14f62534 Merge pull request '界面重构与多用户认证设计提案 + HTML demo(方案 A/B/C + 认证)' (#14) from feature/ui-redesign-proposals into main 2026-09-30 10:02:04 +00:00
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
weichen 8b63607211 Merge pull request 'Update the usage guide for inbox, command bus, and workspaces; record T5 verification' (#13) from feature/polish-r1 into main 2026-09-30 08:17:57 +00:00
weichen 3a773139d0 Record T5 polish verification with the zero-page walkthrough
Why: T5 acceptance evidence - the D31 conversation-completeness walkthrough on a fresh instance plus tidy/badge and guide updates.
Evidence: walkthrough 12/12 PASS (fresh binary, empty data dir, conversation-only driving end to end); ui StatusLamp dual-encoding assertions; frontend 9/9 + build.
Impact: docs/records only.
Refs: docs/proposals/2026-09-30-ui-inbox-command-workspace.md T5; task card feature/polish-r1
2026-09-30 08:17:53 +00:00
weichen 7da2b192d2 Update the usage guide for inbox, command bus, and workspaces; record T5 verification
Why: T2-T4 changed the interaction foundation (pure-inbox rail, four-entrance command bus, overlay workspaces) and the guide still described the classic tabs; T5 acceptance also requires the verification record with the zero-page walkthrough.
Evidence: zero-page walkthrough 12/12 PASS on a fresh real binary (fresh data dir: empty instance -> project/conversation -> slash commands -> #upload card lifecycle -> card action receipts -> tidy -> HITL block+resolve -> button-entrance dispatch -> plugin workspace declaration -> artifacts -> four-entrance audit); StatusLamp shape+color dual encoding asserted by ui suite; combo make test at pinned heads.
Impact: usage guide sections 4.2-4.7/5/6.2/7 rewritten; new T5 record; no code change.
Refs: docs/proposals/2026-09-30-ui-inbox-command-workspace.md T5; task card feature/polish-r1
2026-09-30 08:17:26 +00:00
weichen d5864d1eb9 Merge pull request 'Record T4 workspaces verification results' (#12) from feature/t4-workspaces-verification into main 2026-09-30 08:09:08 +00:00
weichen b7a6bd9d5e Record T4 workspaces verification results
Why: T4 acceptance requires a verification record in this repo before the Dev combo pin.
Evidence: backend full sweep green with TestWorkspacesOverlay; ui 23/23 (OverlayHost semantics); frontend tsc+vitest+build; example plugin workspace/command assets JSON-validated; combo make test at pinned heads.
Impact: docs/records only.
Refs: docs/proposals/2026-09-30-ui-inbox-command-workspace.md T4; task card feature/workspaces-r1
2026-09-30 08:09:04 +00:00
weichen ba52c7bb0a Merge pull request 'Record T3 command-bus verification results' (#11) from feature/t3-command-bus-verification into main 2026-09-30 07:55:43 +00:00
weichen 6f541db72d Record T3 command-bus verification results
Why: T3 acceptance requires a verification record in this repo before the Dev combo pin.
Evidence: backend 15 pkgs ok incl. new cmdbus suite and danger-confirm e2e (dispatch -> confirm card -> action -> committed -> audit query ordered); ui 18/18; frontend 9/9; combo make test at pinned heads.
Impact: docs/records only.
Refs: docs/proposals/2026-09-30-ui-inbox-command-workspace.md T3; task card feature/command-bus-r1
2026-09-30 07:55:39 +00:00
weichen ad87c9334e Merge pull request 'Record T2 inbox verification results' (#10) from feature/t2-inbox-verification into main 2026-09-30 07:34:45 +00:00
11 changed files with 2066 additions and 18 deletions
+151
View File
@@ -0,0 +1,151 @@
# 提示词库设计与扩展指南
状态:active(feature/prompt-library 交付)|维护对象:`modules/backend/internal/prompts/`
本指南总结 Agent-System 提示词体系的**设计思路**,供后续新增/修改提示词时遵循。
方法来源:Claude Code 提示词体系的分层组装与技能化模式(2026-04 目录分析),
结合本系统的画像/设置/意图闸门/命令总线既有机制落地。
## 1. 分层模型:提示词不是一段话,是一组有职责的块
| 层 | 职责 | 组装时机 | 示例 |
|---|---|---|---|
| `base` | 常驻基座:身份/行为/谨慎/工具/风格 | 每次 run,画像可裁剪 | base.identity |
| `env` | 动态环境事实(占位符) | 每次 run,随运行填充 | env.runtime |
| `task` | 任务技能:有触发条件 | 命中才注入(同层取优先级最高) | task.doc-minutes |
| `agent` | 子代理/小队角色人设 | 派生 run 时取用 | agent.sub.explore |
| `tool` | 工具描述文案(模型侧) | 声明工具时覆盖注册表默认 | tool.knowledge_search |
| `aux` | 辅助模板(压缩/标题/解释) | 功能接线时取用(可先入库) | aux.session-compact |
| `style` | 表达变体 | 画像显式引用才启用 | style.explanatory |
设计动机:**技能塞基座 = 永久占用上下文 + 干扰无关任务**。分层后基座保持小而稳,
技能按需进场,风格可选叠加——上下文预算花在刀刃上。
## 2. 模块设计八法(写一个好模块的检查清单)
1. **角色定义**:第一句说清"你是谁、对什么负责"。子代理尤其要写边界
("你是规划者,不是实现者")。
2. **权限/只读约束**:凡不该做的事显式禁止(探索代理:不写入不修改)。
约束写在提示里 + 机制上配工具白名单,双层防线。
3. **输出契约**:结构化产出必须定义形态(几个部分、各含什么)。
契约同时是验收标准——人可以按契约检查交付。
4. **强制裁决格式**:程序要消费的结论给固定格式(验证代理以
`VERDICT: PASS|FAIL|PARTIAL` 结尾;标题生成只输出 JSON)。
5. **反模式禁令**:点名常见错误("不要把发言当决议"、"不要把外部知识冒充文档内容"、
"不要为简短丢信息")。禁令比正面要求更能纠正模型默认行为。
6. **失败与缺失的表述规则**:查不到/原文没有时怎么说("文档未提及"、列出已检索范围),
防止编造兜底。
7. **详略授权**:明确"默认完整、压缩需用户明示"还是相反——输出质量的直接杠杆。
8. **防污染**:过程性指令不得泄漏进产出(压缩摘要不提压缩这件事本身)。
## 3. 触发设计
- `intent`:关键词子串匹配。关键词要**任务特有**("纪要"好于"会议"),
避免日常闲聊误触发。文档类技能加 `requiresAttachments: true` 门槛。
- `command`:`/xxx` 显式命令。命令是显式用户意图,**不受附件门槛约束**。
技能命令出现在 `/` 菜单(source=prompt-skill),发送时跳过命令总线走正常 run。
- `attachment`:本轮有附件(可叠加关键词)。
- `manual`:永不自动触发,仅画像引用/程序显式调用。
- **多命中取舍**:task 层同轮多技能命中时注入优先级(priority,大者胜)最高者,
其余记录让位(可观测)。同优先级保持库 ID 序。
## 4. 文件格式与命名
库文件:`internal/prompts/library/<layer>-<name>.md`,frontmatter + 正文:
```
---
id: task.doc-minutes # <layer>.<name>,与文件名一致
layer: task
version: 1 # 文案有实质变更时 +1(触发用户副本 drift 提示)
title: 会议纪要生成
description: 一句话用途(/ 菜单与设置界面展示)
priority: 70
requiresAttachments: true
outputContract: |
多行输出契约
triggers:
- kind: intent
keywords: 纪要, 会议记录
- kind: command
command: /minutes
---
正文:给模型的指令(Markdown)。
```
frontmatter 刻意最小(无 YAML 依赖,解析器在 parse.go);正文即 `body`;
`{{date}} {{weekday}} {{model}} {{attachments}}` 占位符仅 env 层使用。
## 5. 覆盖链与版本
`builtin(embed 文件)→ user(DB prompt_modules 表)`。
用户副本记录 `basedOnVersion`;内置版本前进后副本标记 `drifted`(提示、不强制覆盖)。
删除用户副本即回到内置。改内置文案:改文件 + version+1 + 走 PR 评审。
## 6. 组装与可观测
`prompts.Service.ResolveSystem(profile, triggerCtx, env)` 产出多段 system 消息:
基座(画像 promptModules 引用或缺省 base+env)→ 命中技能 → 画像 systemPrompt 兼容段。
每次组装产出命中记录,注入 ctxasm Report("上下文构成"面板可见):
`prompt(task.doc-minutes v1 · intent:纪要)`、`skill-yield(task.summarize · superseded-by:...)`。
**改了提示词,观测里能看到它进没进场**——这是排查提示问题的第一入口。
## 7. 新增一个技能的步骤
1. 写 `library/task-<name>.md`(对照八法检查;定触发词与优先级;
文档类加附件门槛;提供 `/` 命令别名)。
2. 若需新占位符:EnvData 加字段 + resolvePlaceholders 加映射。
3. 测试:prompts_test.go 加触发用例(命中/未命中/门槛/让位);
TestDefaultLibraryParses 自动覆盖格式合法性。
4. 观测验证:真实 run 的上下文构成面板确认 `prompt(task.xxx · 命中原因)`。
5. 若是程序消费的裁决类输出:消费端同步解析逻辑 + 固定格式测试。
## 8. 反模式(不要这样做)
- ❌ 把技能指令写进 base 或画像 systemPrompt(永久占上下文、不可触发观测)。
- ❌ 提示词内联在 Go 代码里(不可评审、不可覆盖、发版才能改)。
- ❌ 无 version 的文案变更(用户副本漂移不可知)。
- ❌ 触发词太泛("文件"、"帮我")造成误触发。
- ❌ 只有正面要求没有反模式禁令与缺失表述规则(模型会用默认行为填空)。
## 9. 外部提示词目录的移植判定(以 Claude Code 目录为例)
借鉴外部提示词体系时,逐条判定能否入库,标准只有两条(满足其一):
1. **有承载机制**:我们的系统里存在该提示词描述的对象(工具/角色/模式/功能),
注入后有真实消费方。
2. **有可挂接的未来功能位**:功能虽未实现,但属于系统演进的合理档位——
以 aux/agent 模板先行入库,frontmatter 描述注明接线点。
两条都不满足的,**不入库**:给不存在的工具写描述、为不存在的模式写行为规范,
一旦被组装注入就是错误指引,死数据比缺数据更糟。
按此标准对 Claude Code 提示词目录的处置(44 个已入库 + 明确不移植清单):
| 目录条目 | 处置 | 落点 |
|---|---|---|
| 1.1-1.2 身份/简介、2.1 双用途安全 | 合并 | base.identity |
| 1.4 任务执行 | 移植 | base.behavior |
| 1.5 谨慎操作 | 移植 | base.caution |
| 1.6 工具使用 | 移植 | base.tools |
| 1.7-1.8 语气/输出效率 | 合并 | base.style |
| 1.9 环境信息 | 移植 | env.runtime |
| 1.3 系统行为、1.10 hooks/临时目录/token 预算 | **不移植** | 描述 Claude 运行时机制(权限模式/system-reminder/hooks/自动压缩),我们无对应机制;机制落地时按 env/base 块补 |
| 2.2 卧底模式 | **不移植** | 隐藏 AI 身份的提交伪装;无提交代理场景,且与"如实报告"基座冲突,需独立授权框架 |
| 3.1 自主模式(Sleep/tick) | **不移植** | 需常驻调度器,无该运行档 |
| 3.2 协调器模式 | 语义已承载 | agent.squad.* + tool.squad_orchestrate |
| 3.3 队友通信 SendMessage | **不移植** | 无该工具 |
| 4.1-4.5 通用/探索/规划/验证 | 移植 | agent.sub.* |
| 4.6 向导 | 移植 | agent.docs-wizard |
| 4.7 记忆提取 | 移植 | agent.memory-extractor |
| 5.x 工具描述(15 个) | 按需移植 | 仅本系统真实存在的工具(7 个);其余 8 个(Bash/FileRead/FileWrite/FileEdit/Glob/Grep/WebFetch/WebSearch/Sleep/Skill/AskUserQuestion/NotebookEdit/Brief)**不移植**——无对应工具 |
| 6.1 会话压缩 | 移植 | aux.session-compact |
| 6.2 Session Memory | 移植 | aux.session-memory |
| 6.3 Magic Docs | 移植 | aux.magic-docs |
| 7.1-7.2 输出风格 | 移植 | style.explanatory / style.learning |
| 8.1 标题生成、8.2 命令解释 | 移植 | aux.title-gen / aux.command-explain |
| 8.3 伴侣气泡 | **不移植** | UI 功能不存在 |
| 8.4 Chrome 自动化 | **不移植** | 无浏览器工具 |
| 附录 组装架构 | 已实现 | prompts.Service 代码本身(不是提示词数据) |
新增系统的真实机制(新工具、新角色、新档位)时,回头检查此表补齐对应模块。
+37 -18
View File
@@ -105,43 +105,59 @@ AGENT_SYSTEM_CONFIG=/etc/agent-system.json agent-system serve # 环境变量
- 选项卡:显示描述与**影响**(决策上下文契约:每个选项必须声明可能造成的影响)。 - 选项卡:显示描述与**影响**(决策上下文契约:每个选项必须声明可能造成的影响)。
- 自由输入三分支路由:一般输入→澄清回答回填;`/` 开头→命令转轨;**命中已注册插件意图(agent-intent 闸门)→转轨为新任务**。示例插件注册了 `demo.show` 意图(命中「示例/演示」),HITL 挂起时输入「来个示例演示」即可观察转轨。 - 自由输入三分支路由:一般输入→澄清回答回填;`/` 开头→命令转轨;**命中已注册插件意图(agent-intent 闸门)→转轨为新任务**。示例插件注册了 `demo.show` 意图(命中「示例/演示」),HITL 挂起时输入「来个示例演示」即可观察转轨。
### 4.2 Sub-agent 追踪 ### 4.2 收件箱与任务卡(右栏终态,D25)
- 右栏「代理」tab:任务树(对话任务 + 子代理,状态点动画)。 右栏 = **收件箱** + 「当前任务」常驻卡(计划/待办并入,随对话实时更新):
- 点击任意节点 → **追踪弹窗**:状态、token/时长/工具用量徽标、**中间过程消息**(子代理产出已持久化)。
- 任务卡七类(progress/confirm/compare/review-list/result/error/status):状态灯**形状+色双编码**(◆ 待处理 ● 完成 ✓ 已确认 ✕ 失败 ◌ 已关闭——不只靠颜色);置顶不随滚动;`#upload` 演示摄取→完成→冲突对比卡全周期。
- 卡上动作即命令(card 入口,见 §5);确认结论以**回执消息**进对话时间线留痕。
- **收纳**:🧹 一键收纳完成卡(done→关闭;已确认卡盖章留痕不动);右栏收起时角标显示待处理数。
- 卡片↔消息**互定位**(D32):消息内 `card:` 链接点击定位收件箱卡片;HITL/确认卡锚定发起消息内联双现。
### 4.3 工作区弹层(深读与治理视图,⌘1–9)
工件/代理/插件面板不再占右栏 tab,统一为**工作区弹层**(Esc/遮罩关闭回对话现场;不承载唯一步骤):
- ⌘1 工件 · ⌘2 代理 · ⌘3+ 插件面板/插件声明工作区(example 插件含「治理总览」示例,⌘9)。
- 左栏「工作区」快捷区同清单;会话头左侧为**项目徽章**(D26 不加全局顶栏)。
- Sub-agent 追踪:代理工作区任务树点击任意节点 → 追踪弹窗(状态/用量徽标/中间过程消息)。
- 真实模型模式下,模型可经 `delegate_task` 派生子代理、经 `squad_orchestrate` 发起引擎编排(多步骤目标建议后者:计划确认 + 交付物把关)。 - 真实模型模式下,模型可经 `delegate_task` 派生子代理、经 `squad_orchestrate` 发起引擎编排(多步骤目标建议后者:计划确认 + 交付物把关)。
### 4.3 计划 / 待办 ### 4.4 计划 / 待办
右栏「计划 / 待办」实时更新(真实模型经 `update_plan` / `update_todos` 工具维护;mock `#agents` 演示)。 并入右栏「当前任务」常驻卡(真实模型经 `update_plan` / `update_todos` 工具维护;mock `#agents` 演示)。
### 4.4 工件 ### 4.5 工件
- 上传与模型产出统一入 Artifacts;`write_artifact` 工具可被模型调用。 - 上传与模型产出统一入 Artifacts;`write_artifact` 工具可被模型调用。
- 查看:markdown 在线渲染;文本类可**编辑保存**;二进制(docx/pdf)下载;图片内联预览。 - 查看:markdown 在线渲染;文本类可**编辑保存**;二进制(docx/pdf)下载;图片内联预览。
- 文档工件与上传文本自动进**知识索引**(全文检索)。 - 文档工件与上传文本自动进**知识索引**(全文检索)。
### 4.5 知识检索 ### 4.6 知识检索
- API:`GET /api/knowledge/search?q=临床评价&project=<id>`;对话内 `@knowledge` 注入;模型工具 `knowledge_search`。 - API:`GET /api/knowledge/search?q=临床评价&project=<id>`;对话内 `@knowledge` 注入;模型工具 `knowledge_search`。
- 中文检索:FTS5 分词对 CJK 无效时自动 LIKE 子串兜底(本版实测中文命中正常)。 - 中文检索:FTS5 分词对 CJK 无效时自动 LIKE 子串兜底(本版实测中文命中正常)。
### 4.6 智能体画像(核心定制机制) ### 4.7 智能体画像(核心定制机制)
设置 → 智能体画像:内置「通用助手」(只读 T0 基线)+ 新建/导入/导出/编辑: 设置 → 智能体画像:内置「通用助手」(只读 T0 基线)+ 新建/导入/导出/编辑:
- 系统提示、允许/确认/拒绝工具三清单(`*` 全部、`http.` 前缀族)、HITL 策略、预算(工具次数/轮次上限)。 - 系统提示、允许/确认/拒绝工具三清单(`*` 全部、`http.` 前缀族)、HITL 策略、预算(工具次数/轮次上限)。
- 导出为 JSON 迁移;会话头部下拉切换画像。 - 导出为 JSON 迁移;会话头部下拉切换画像。
## 5. 命令 ## 5. 命令总线(四入口同源,D27)
| 命令 | 作用 | 按钮、卡片 action、`/` 命令、对话意图四个入口命中同一命令产生**同一条执行与审计**(`POST /api/commands/{id}`;审计 `GET /api/commands/audit`)。注册表数据驱动(内置 + 插件 `provides.commands`):
|---|---|
| `/help` | 命令列表 | | `/` 命令 | 命令 id | 作用 |
| `/new` | 新建会话 | |---|---|---|
| `/mock on\|off` | 演示模式切换 | | `/help` | builtin.help | 命令列表 |
| `/model <名称>` | 设置主模型 | | `/new` | conversation.create | 新建会话 |
| `/profile <id>` | 切换会话画像 | | `/mock on\|off` | runtime.mock | 演示模式切换 |
| `/model <名称>` | models.set | 设置主模型 |
| `/profile <id>` | conversation.profile | 切换会话画像 |
`danger=high` 的命令(含插件命令)执行终点为**内联确认卡**:锚定发起消息、阻断待确认、已决折叠留痕(双现于收件箱)。
## 6. 插件 ## 6. 插件
@@ -153,8 +169,8 @@ AGENT_SYSTEM_CONFIG=/etc/agent-system.json agent-system serve # 环境变量
### 6.2 示例插件(`example`) ### 6.2 示例插件(`example`)
随发布携带,覆盖五类注册能力:声明式 HTTP 工具(`http_echo`)、右栏面板(「示例面板」tab)、 随发布携带,覆盖七类注册能力:声明式 HTTP 工具(`http_echo`)、面板(工作区弹层呈现)、
卡片模板(`note`)、意图 spec(`demo_intent`)、提示词模板、插件设置项(出现在设置中心)。 卡片模板(`note`)、意图 spec(`demo_intent`)、提示词模板、插件设置项,以及 **命令声明**(`example.echo`,经命令总线四入口可调)与**工作区声明**(`example.governance`「治理总览」,⌘9)。
### 6.3 无代码自定义工具(声明式 HTTP) ### 6.3 无代码自定义工具(声明式 HTTP)
@@ -168,6 +184,9 @@ AGENT_SYSTEM_CONFIG=/etc/agent-system.json agent-system serve # 环境变量
消息与运行 POST /api/conversations/{id}/messages(含命令路由)· POST /api/runs/{id}/cancel · GET /api/runs/{id}(含子任务树) 消息与运行 POST /api/conversations/{id}/messages(含命令路由)· POST /api/runs/{id}/cancel · GET /api/runs/{id}(含子任务树)
事件流 GET /api/events?conversationId=&since=(SSE;Last-Event-ID 游标续传;心跳 15s) 事件流 GET /api/events?conversationId=&since=(SSE;Last-Event-ID 游标续传;心跳 15s)
HITL POST /api/hitl/{id}/resolve {choiceId|freeText} HITL POST /api/hitl/{id}/resolve {choiceId|freeText}
任务卡 GET /api/conversations/{id}/cards · POST /api/cards/{id}/actions/{actionId} · POST /api/cards/{id}/pin|dismiss
命令总线 GET /api/commands(注册表)· POST /api/commands/{id} {params,entrance,conversationId} · GET /api/commands/audit
工作区 GET /api/workspaces(插件工作区声明)
上传/工件 POST /api/projects/{id}/uploads(multipart,返回解析结果)· GET/PUT /api/artifacts/{id}/content 上传/工件 POST /api/projects/{id}/uploads(multipart,返回解析结果)· GET/PUT /api/artifacts/{id}/content
画像/设置 GET/POST /api/profiles · GET /api/settings · PUT /api/settings/user|project/{id}(schema 驱动) 画像/设置 GET/POST /api/profiles · GET /api/settings · PUT /api/settings/user|project/{id}(schema 驱动)
工具/插件 GET/POST/DELETE /api/tools · GET /api/plugins · POST /api/plugins/reload · GET /api/registry(来源标记) 工具/插件 GET/POST/DELETE /api/tools · GET /api/plugins · POST /api/plugins/reload · GET /api/registry(来源标记)
@@ -0,0 +1,202 @@
# 界面重构与多用户认证 —— 设计提案(2026-09-30)
状态:**proposed**(本文为方案对比稿,待用户裁定方向后另立实施提案);owner:weichen;主任务:Dev 仓 `feature/ui-redesign-proposals`。
前置:[界面交互底座](2026-09-30-ui-inbox-command-workspace.md)(D25–D33)、[双档存储、多租户与规模化](2026-09-30-dual-tier-storage-and-multitenancy.md)(D17–D24)。
配套 demo:`ui-redesign-demos/`(index.html 为入口,本地浏览器直接打开)。
---
## 1. 背景与问题
用户对现有界面的判定(2026-09-30):**界面与交互设计不够好**。具体事实(对照 v0.1.0 截图与 `modules/frontend/src/components/ProjectNav.tsx`):
1. **创建入口分裂且错位**:新建项目在左上角 `nav-header` 的 ✚,新会话在左下角 `nav-footer` 的「+ 新会话」。两个高频动作一个在最上一个在最下,且都是小图标/文字按钮,无主次。
2. **项目树导航繁琐**:`ProjectNav` 只渲染 `currentProjectId` 的会话(`open && p.id === currentProjectId`),切项目才能看会话;项目折叠态与会话列表耦合,浏览成本高。
3. **无用户与租户界面**:系统定位是多用户、多租户(D17 已落 `users`/`api_keys` 表),但界面只有一个密钥输入登录门(`App.tsx LoginGate`),没有账户、身份、成员、租户切换的任何表面。
4. 视觉密度与专业度不足:emoji 图标(✚ ☰ ⚙ 📦 🤖)、无统一设计令牌,观感偏离"办公工作台"。
## 2. ZCode 桌面端研究结论
研究对象:`github.com/zai-org/ZCode`(Apache-2.0,Electron 桌面 + Web + CLI/TUI 三形态)。证据为仓库源码与 `DESIGN.md`(以下文件路径均在该仓)。
### 2.1 布局范式(`packages/ui/src/app-shell/WorkspaceShellLayout.tsx`)
- 四区:**左侧栏(任务列表)+ 中栏会话 + 底部终端 + 右侧 Side Pane**(浏览器/子代理会话/工作流运行/工件,Tab 化)。
- 尺寸用 CSS 变量驱动(`--workspace-sidebar-width` 等),拖拽中只写变量不进 React state;宽度持久化 localStorage。
- 自动收起策略:窗口变窄(去抖 300ms)时若会话列 < 480px 收 Side Pane、< 360px 收侧栏;**只在窗口 resize 时触发**,避免把用户手动打开的面板又关回去。
- 侧栏隐藏时由 `DesktopTopOverlay` 浮出 New Task,保证创建入口永不丢失。
### 2.2 侧栏组织(`packages/ui/src/WorkspaceSidebar.tsx` 等)
- **顶部动作区**:第一颗按钮就是 **New Task**(带快捷键),随后是 Command Center 搜索(⌘K)、Automations、插件商店。创建入口在视觉与逻辑的**第一位**,不在角落。
- **任务列表四种组织模式**:`grouped`(自定义分组)/ `workspace`(按项目)/ `timeline`(按时间线)/ `archived`,pill 切换 + 过滤菜单(排序、归档)。项目是任务的**组织维度**,不是必须展开导航的树。
- **置顶区全局置顶**(`WorkspacePinnedTasksSection`:归档态也保持置顶区可见)。
- 任务行支持拖拽排序、分组展开态持久化、右键菜单(`TaskListItemContextMenu`)。
- **Footer = 账户区**:主题/语言、设置、用量与套餐徽章、**登录/登出与用户信息**(`WorkspaceSidebarFooter`)。
- 收起后变 52px 图标轨道(`WorkspaceSidebarCollapsedRail`)。
### 2.3 会话头与中栏(`WorkspaceHeaderSections/`)
- 中栏会话头:上下文路径(项目/目录)+ 最近活动时间 + 动作区;**无全局顶栏**(与我方 D26 一致)。
### 2.4 设计系统(`DESIGN.md`)
- 定位:"calm, dense, operational rather than decorative";桌面优先。
- 硬规则:统一 `text-ui-*` 字号阶(默认 14px);语义色只用于真实语义态;**所有等待确认类交互(提问/权限/计划批准)统一绿色确认**;圆角按嵌套层级递减(外 12 → 内 10/8/6);4px 间距基;高度克制(先靠背景对比与描边,不堆阴影)。
- 键盘优先:可聚焦、可见焦点、快捷键全程可触达(新建任务、⌘K、侧栏拖拽支持方向键步进 16px)。
### 2.5 认证表面
- `login/LoginApiKeyForm.tsx`:API 密钥表单;`onboarding/`:首跑引导;OAuth 相关在 `root/` 与 `packages/web/src/auth/`。
### 2.6 对本系统的可迁移结论
| ZCode 实践 | 迁移判据 |
|---|---|
| New Task 置顶 + 快捷键 + 隐藏侧栏时浮出 | 直接采纳:解决"创建入口分裂"这一首要痛点 |
| 项目/时间线/分组/归档是列表的**视图模式** | 直接采纳:项目从"树"降为"组织维度",浏览免切项目 |
| 侧栏 Footer 承载账户/租户/用量 | 直接采纳:多租户身份常驻但低噪声 |
| 底部终端 + Side Pane Tab | 远期:我们的代理/工件已有 ⌘1–9 弹层(D25/R4),不重复建面 |
| CSS 变量驱动分隔条、自动收起策略 | 实现层采纳(现有 divider 逻辑升级) |
| 绿色统一确认 | 与 InlineConfirmCard 语义合并考虑 |
## 3. 设计原则(继承 + 新增)
继承界面五原则(D25–D33 提案 §1.2:中栏做空、消息是事件流卡片是状态对象、弹层是加速器、待办不沉没、确认留痕)与 D26(无全局顶栏)。新增:
- **P6 单一主创建入口**:创建动作只有一个主按钮(新建任务=会话),其余创建(项目等)收进它的次级菜单或组织区的显式 +。位置固定在侧栏顶部第一位,快捷键 ⌘N。
- **P7 身份常驻**:用户(头像/名/租户/角色)常驻侧栏 Footer;一切跨租户资源不可见性由服务端保证(D18 不变)。
- **P8 组织即视图**:项目/时间线/归档是任务列表的切换视图,不改变数据模型(`conversations.project_id` 不变),切换是本端偏好。
## 4. 三个方案
demo:`ui-redesign-demos/demo-a-task-centric.html` / `demo-b-activity-rail.html` / `demo-c-project-portal.html`(含明暗主题切换;方案 A 含完整交互演示)。
### 方案 A:任务中心(ZCode 同构)——**推荐**
```
┌────────────────────┬──────────────────────────────┬─────────────────┐
│ Agent-System │ [项目徽章] 会话标题 ⋯ │ 收件箱 2 │
│ [+ 新建任务 ⌘N ▾] │ 状态 · 模型 · 更新于 3 分钟前 │ [待办][全部] │
│ [🔍 搜索 ⌘K] ├──────────────────────────────┤ ⚠ 发布前确认 │
│ 组织 [项目|时间线] ⋯│ │ ▷ 记忆库索引 68% │
│ 📌 置顶 │ 消息流 + 内联确认卡 │ ✓ 周报已生成 │
│ ▾ 研发体系文档 (4) │ │ − 已确认(折叠) │
│ • 任务… ├──────────────────────────────┤─────────────────│
│ ▸ 真实模型测试 (2) │ [附件] 输入框… [发送] │ 代理 2 · 工件 5 │
│ 👤 weichen · 个人 │ │ │
│ 租户 ⚙ 🌓 │ │ │
└────────────────────┴──────────────────────────────┴─────────────────┘
```
- **新建任务**(主按钮,split menu):默认在"当前项目上下文"建会话;▾ 展开新建项目/新建任务于指定项目/导入。解决入口分裂:一个位置、有主次、带快捷键。
- **组织切换**:按项目(分组可折叠,组头 hover 出「在此项目新建」)/ 按时间线(今天/昨天/本周)。置顶区恒在顶部;过滤菜单含归档视图与排序。
- 任务行:状态点(运行中/待我确认/空闲/已完成)+ 相对时间 + 所属项目徽章(时间线模式)。
- **Footer 账户区**:用户 chip(点头像弹账户菜单:信息/切换租户/API 密钥/退出)+ 设置 + 主题。
- 中栏头沿用 D26:项目徽章 + 会话标题 + 状态;右栏纯收件箱(D25 不变),底部快捷链接进 ⌘1–9 弹层。
- **优点**:创建/浏览/身份三大痛点一次解决;与 ZCode(以及 Linear/ChatGPT 侧栏)这类已验证范式同构;纯前端改造,不动数据模型。
- **代价**:需重写 `ProjectNav`(约一个组件的量)+ 新增账户菜单;左栏语义从"项目树"变为"任务列表",用户有一周适应期。
### 方案 B:活动栏 + 上下文列表(VS Code 式)
```
┌──┬─────────────────┬──────────────────────┬─────────────┐
│▣ │ 研发体系文档 ▾ │ 会话(同 A 中栏) │ 收件箱 │
│+│ [+ 新会话] │ │ │
│🔍│ ── 会话列表 │ │ │
│📭│ • … │ │ │
│🤖│ │ │ │
│📦│ │ │ │
│⚙ │ │ │ │
│👤│ │ │ │
└──┴─────────────────┴──────────────────────┴─────────────┘
```
- 最左 48px 图标轨切换领域(任务/收件箱/代理/工件/设置/账户),第二栏随活动渲染列表。
- **优点**:导航可无限扩展(插件域友好);账户/设置有恒定图标位。
- **代价**:**创建仍是二级动作**(先选项目再新建),痛点 1 只部分解决;多一列常驻(1280px 屏占 6%);与 D25"代理/工件走弹层"重复建面。判定:适合域数量 ≥ 6 时再启用。
### 方案 C:项目门户(Notion/Linear 式)
```
┌──────────────┬────────────────────────────────┐
│ [+ 新项目] │ 研发体系文档 12 会话 · 3 运行│
│ ▸ 文档智能体 │ ┌─────┐┌─────┐┐─────┐ │
│ ▸ 记忆库建设 │ │会话卡││会话卡││ + 新│ │
│ ▸ 模型测试 │ └─────┘└─────┘└─────┘ │
│ 👤 weichen │ 点会话卡 → 进入对话视图 │
└──────────────┴────────────────────────────────┘
```
- 项目是页面:首页是会话卡片网格 + 统计 + 项目内新建(入口在上下文中,最贴任务)。
- **优点**:项目级总览最好;新建会话离上下文最近。
- **代价**:对话-first 被破坏(打开高频会话多一跳);卡片网格信息密度低;与"中栏做空"张力最大。判定:适合项目数少(<10)且以交付物为中心的用法。
### 对比与推荐
| 维度 | A 任务中心 | B 活动栏 | C 项目门户 |
|---|---|---|---|
| 解决创建入口分裂 | **完全** | 部分 | 部分(上下文内) |
| 跨项目浏览 | **优(视图切换)** | 中 | 中 |
| 身份/租户常驻 | **Footer 账户区** | 图标位 | Footer |
| 与既有决策兼容(D25/D26/D31) | **完全** | 需调 D25 | 张力大 |
| 改造量 | 中(左栏+账户菜单) | 大 | 大(含视图路由) |
| 扩展性(未来插件域) | 中 | **优** | 中 |
**推荐 A**,并以 A 的 Footer 账户区 + 账户菜单吸收 B 的"账户恒定入口"优点。B 的活动栏留作域数量增长后的演进项(远期不否决)。
## 5. 多用户与多租户设计(认证阶段 2)
demo:`ui-redesign-demos/demo-auth.html`(登录/注册/账户与租户三屏)。
### 5.1 身份模型演进(延续 D17 编号段,新决策从 D34 起,本文只提案)
- **阶段 1(现状,保留)**:API key(`ask_`)即身份,user 即租户 owner,嵌入式档默认关闭认证。
- **阶段 2(本设计)**:
- `users` 增 `email`、`password_hash`(argon2id)、`status`;`organizations`(租户)与 `memberships`(user × org × role: owner/admin/member)分离——**user 不再天然等于租户**,一个用户可属多租户。
- 登录:邮箱 + 密码 → 服务端会话(`sessions` 表,HttpOnly+SameSite=Lax cookie,滑动过期);**API key 保留**为程序化访问凭证,挂到 user,权限同其成员角色。
- 阶段 1 过换路径:每个既有 owner user 自动建同名个人租户并设 owner;API key 归属不变。
- **SSE 认证升级**:会话 cookie 使 EventSource 同源自动携带,**移除 `?key=` URL 传钥**(消除 D17 §3 记录的日志泄露权衡);API key 客户端仍可用 header。
### 5.2 界面表面
| 表面 | 内容 |
|---|---|
| 登录页 | 品牌 + 双 tab(访问密钥 / 邮箱密码)+ 注册入口;错误内联;宽屏右侧产品信息面板 |
| 注册页 | 姓名/邮箱/密码/组织名(即建租户,成为 owner) |
| 账户菜单(侧栏 Footer) | 头像、显示名、邮箱;当前租户 + 角色徽章;**切换租户**(多租户成员);API 密钥管理;偏好(主题/语言);退出 |
| 成员管理(设置内) | 成员表(邮箱/角色/状态)、邀请(邮件链接或邀请码)、角色变更;仅 owner/admin 可见 |
| 项目可见性(远期) | 项目级成员范围(默认租户内全员);跨租户访问仍一律 NotFound(D18) |
### 5.3 服务端边界(不变项)
- 权威在执行端(baseline 硬边界 4):角色检查在服务端每路由执行,UI 只做可见性降级。
- 密码哈希 argon2id、会话 cookie HttpOnly;不引入第三方 OAuth(远期)。
- 限流沿用 D24 租户固定窗口;登录路由加 IP 级失败退避。
## 6. 落地路线(裁定方向后另立实施提案,此处仅示意切分)
| 期 | 内容 | 验收要点 |
|---|---|---|
| R1 | 左栏重构(方案 A 任务列表 + 新建任务 + 组织视图 + 置顶/归档)+ 设计令牌接入(modules/ui tokens.css) | 创建入口唯一性走查;对话完备性剧本不回退 |
| R2 | 登录页 + 阶段 2 认证(orgs/memberships/sessions)+ 侧栏 Footer 账户区 + 迁移 | auth_e2e 扩容;`?key=` 移除后 SSE 全链路 |
| R3 | 成员管理与邀请、租户切换、API 密钥管理页 | 角色负例(member 越权 NotFound) |
| R4 | 视觉系统全面收敛(字号阶/语义色/圆角嵌套/绿色统一确认) | 明暗主题截图对比 + 密度走查 |
## 7. Demo 清单
| 文件 | 内容 | 交互 |
|---|---|---|
| `index.html` | 方案总览与链接、对比表 | — |
| `demo-a-task-centric.html` | 方案 A 全应用 | 组织切换、新建菜单、账户菜单、收起轨道、主题、收件箱筛选 |
| `demo-b-activity-rail.html` | 方案 B | 活动切换、二级列表 |
| `demo-c-project-portal.html` | 方案 C | 项目切换、进入会话 |
| `demo-auth.html` | 登录/注册/账户与租户 | 双 tab 登录、注册表单校验、账户菜单、成员管理 |
demo 为静态设计稿(无后端),数据为演示数据;视觉规格(色板/字号/圆角)即 R4 设计令牌的目标值来源。
## 8. 边界与不做
- 本提案不含实施;实施前须用户裁定方案(默认 A)与认证阶段 2 范围。
- 不做计费/套餐(Footer 用量区留位即可)、不做 SSO/OAuth、不做项目级 ACL(远期,见 5.2)。
- 中栏与右栏结构不在本次重构范围(D25/D26 已定且未被推翻);底部终端面板不做(我们非终端工作台)。
@@ -0,0 +1,631 @@
<!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>
@@ -0,0 +1,335 @@
<!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;--r-sm:6px;--ease:.13s ease}
[data-theme="dark"]{--bg:#121316;--bg-panel:#191a1e;--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);--amber:#d99b3f;--amber-dim:rgba(217,155,63,.13);--red:#e0566b;--shadow-pop:0 16px 40px rgba(0,0,0,.5);--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-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);--amber:#a8731d;--amber-dim:rgba(168,115,29,.1);--red:#c84559;--shadow-pop:0 16px 40px rgba(20,22,28,.16);--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,input{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
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}
/* 顶栏:屏幕切换(演示控件)+ 主题 */
.top{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:40;display:flex;gap:4px;background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;padding:4px;box-shadow:var(--shadow-card)}
.tp{height:28px;padding:0 14px;border-radius:7px;font-size:12.5px;color:var(--text-faint)}
.tp:hover{color:var(--text-subtle)}
.tp.on{background:var(--bg-selected);color:var(--text);font-weight:500}
.tbtn{position:fixed;top:16px;right:16px;z-index:40;width:32px;height:32px;border-radius:8px;background:var(--bg-panel);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
.tbtn:hover{color:var(--text-subtle)}
.screen{display:none;height:100vh}
.screen.on{display:flex}
/* ── 登录/注册:分屏 ── */
.auth{display:flex;height:100vh}
.form-side{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;min-width:0}
.form-card{width:400px;max-width:100%}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#8f6ce8);display:flex;align-items:center;justify-content:center;color:#fff}
.brand-name{font-size:17px;font-weight:700}
.brand-sub{font-size:11.5px;color:var(--text-faint);margin-top:1px}
h1.f{font-size:21px;font-weight:700;letter-spacing:-.2px;margin-bottom:4px}
.f-sub{font-size:13px;color:var(--text-subtle);margin-bottom:22px}
.tabs{display:flex;gap:4px;background:var(--bg-input);border:1px solid var(--border);border-radius:9px;padding:3px;margin-bottom:18px}
.tab{flex:1;height:30px;border-radius:7px;font-size:13px;color:var(--text-faint)}
.tab:hover{color:var(--text-subtle)}
.tab.on{background:var(--bg-surface);color:var(--text);font-weight:500;box-shadow:var(--shadow-card)}
.fgrp{margin-bottom:14px}
.fgrp label{display:block;font-size:12.5px;font-weight:500;color:var(--text-subtle);margin-bottom:6px}
.inp{width:100%;height:38px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-input);padding:0 12px;transition:border-color var(--ease)}
.inp::placeholder{color:var(--text-faint)}
.inp:focus{border-color:var(--accent);outline:none}
.inp.mono{font-family:var(--mono);font-size:13px}
.frow{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.link{font-size:12px;color:var(--accent);cursor:pointer}
.link:hover{text-decoration:underline}
.btn-p{width:100%;height:40px;border-radius:var(--r-md);background:var(--accent);color:#fff;font-weight:600;font-size:14px;margin-top:6px}
.btn-p:hover{filter:brightness(1.08)}
.hint{margin-top:10px;font-size:12px;color:var(--text-faint);line-height:1.6;background:var(--bg-panel);border:1px solid var(--border-faint);border-radius:var(--r-md);padding:9px 11px}
.hint code{font-family:var(--mono);font-size:11px;background:var(--bg-input);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
.ferr{display:none;margin-top:10px;font-size:12.5px;color:var(--red);background:var(--red-dim,rgba(224,86,107,.1));border:1px solid rgba(224,86,107,.3);border-radius:var(--r-md);padding:8px 11px}
.fbot{margin-top:20px;text-align:center;font-size:13px;color:var(--text-faint)}
.strength{display:flex;gap:4px;margin-top:7px}
.strength i{flex:1;height:3px;border-radius:2px;background:var(--bg-hover)}
.strength.s2 i:nth-child(-n+2){background:var(--amber)}
.strength.s3 i{background:var(--green)}
.note{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--text-faint);margin:-4px 0 14px;line-height:1.55}
.note .ic{margin-top:1px;color:var(--text-faint);width:13px;height:13px}
.chk{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--text-subtle);margin:4px 0 14px;line-height:1.5}
.cbx{width:15px;height:15px;border-radius:4px;border:1px solid var(--border-strong);flex:none;margin-top:1px;position:relative;cursor:pointer}
.cbx.on::after{content:"";position:absolute;inset:2.5px;border-radius:2px;background:var(--accent)}
/* 右侧品牌面板 */
.hero{flex:none;width:44%;max-width:640px;background:linear-gradient(160deg,#1b2340 0%,#252a48 55%,#2c2560 100%);display:flex;flex-direction:column;justify-content:center;padding:64px;color:#dfe3f0;position:relative;overflow:hidden}
[data-theme="light"] .hero{background:linear-gradient(160deg,#eef2fb,#e8ecf9 60%,#efe9f8)}
.hero::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(91,141,239,.25),transparent);top:-120px;right:-140px}
.hero::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(143,108,232,.22),transparent);bottom:-140px;left:-120px}
.hero h2{font-size:24px;font-weight:700;letter-spacing:-.2px;line-height:1.35;margin-bottom:10px;position:relative}
.hero p{font-size:14px;opacity:.75;line-height:1.7;position:relative}
.hero ul{margin-top:26px;list-style:none;display:flex;flex-direction:column;gap:12px;position:relative}
.hero li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;opacity:.9}
.hero li svg{margin-top:2px;color:#8fb2ff;flex:none}
[data-theme="light"] .hero li svg{color:#3a76e0}
.hero .foot{position:absolute;bottom:28px;left:64px;right:64px;display:flex;justify-content:space-between;font-size:11.5px;opacity:.5}
@media (max-width:960px){.hero{display:none}}
/* ── 账户与租户屏 ── */
.acc-wrap{flex:1;display:flex;align-items:center;justify-content:center;gap:28px;padding:60px 24px 24px;flex-wrap:wrap;align-content:center}
.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-card)}
/* 账户菜单(侧栏 Footer 弹出形态) */
.acc-demo{width:290px;padding:6px}
.demo-cap{font-size:11px;color:var(--text-faint);letter-spacing:.4px;margin-bottom:8px;display:flex;gap:6px;align-items:center}
.demo-cap::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber)}
.acc-head{display:flex;gap:11px;padding:9px 10px;align-items:center}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#5b8def,#8f6ce8);color:#fff;font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.avatar.sm{width:26px;height:26px;font-size:11px}
.avatar.xs{width:22px;height:22px;font-size:10px}
.acc-name{font-size:14px;font-weight:600}
.acc-mail{font-size:12px;color:var(--text-faint)}
.pdiv{height:1px;background:var(--border-faint);margin:5px 6px}
.ph{padding:8px 10px 4px;font-size:11px;color:var(--text-faint);letter-spacing:.3px}
.org-rowline{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--r-sm);cursor:pointer}
.org-rowline:hover{background:var(--bg-hover)}
.oi{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;color:#fff;flex:none}
.org-rowline .on2{flex:1;min-width:0}
.org-rowline .on2 .n{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-rowline .on2 .r{font-size:11px;color:var(--text-faint)}
.role-chip{font-size:9.5px;border-radius:4px;padding:1.5px 6px;font-weight:700;letter-spacing:.4px;flex:none}
.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)}
.pi{display:flex;align-items:center;gap:9px;height:32px;padding:0 10px;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.danger{color:var(--red)}
.pi.danger:hover{background:rgba(224,86,107,.1)}
.pi .kbd{margin-left:auto}
.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)}
/* 成员管理 */
.mem{width:520px;max-width:100%;padding:0}
.mem-head{padding:18px 20px 4px;display:flex;align-items:flex-start;gap:10px}
.mem-head h3{font-size:16px;font-weight:700}
.mem-head p{font-size:12.5px;color:var(--text-faint);margin-top:3px}
.mem-head .sp{flex:1}
.inv{display:flex;gap:8px;padding:12px 20px 4px}
.inv .inp{flex:1;height:34px}
.sel{height:34px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-input);padding:0 26px 0 10px;font-size:13px;color:var(--text-subtle);appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="%23888" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 9px center;cursor:pointer}
.btn{height:34px;padding:0 16px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--bg-surface);font-size:13px;color:var(--text-subtle);display:inline-flex;align-items:center;gap:6px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.mem-list{padding:10px 12px 14px}
.mem-row{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-md)}
.mem-row:hover{background:var(--bg-hover)}
.mem-row .who{min-width:0;flex:1}
.mem-row .who .n{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.mem-row .who .m{font-size:11.5px;color:var(--text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-chip{font-size:10px;border-radius:4px;padding:1px 6px;font-weight:600}
.st-chip.active{background:var(--green-dim);color:var(--green)}
.st-chip.pending{background:var(--amber-dim);color:var(--amber)}
.mem-row .act{opacity:0;width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--text-faint)}
.mem-row:hover .act{opacity:1}
.mem-row .act:hover{background:var(--bg-selected);color:var(--red)}
.mem-foot{padding:0 20px 16px;font-size:11.5px;color:var(--text-faint);line-height:1.6}
.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}
</style>
</head>
<body>
<div class="top">
<button class="tp on" data-s="login" onclick="setScreen(this)">登录</button>
<button class="tp" data-s="signup" onclick="setScreen(this)">注册</button>
<button class="tp" data-s="account" onclick="setScreen(this)">账户与租户</button>
</div>
<button class="tbtn" 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 class="screen on" data-s="login">
<div class="auth">
<div class="form-side">
<div class="form-card">
<div class="brand">
<div class="brand-mark"><svg class="ic" 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>
<div><div class="brand-name">Agent-System</div><div class="brand-sub">研发记忆与文档智能体工作台</div></div>
</div>
<h1 class="f">登录</h1>
<div class="f-sub">进入你的组织工作区</div>
<div class="tabs">
<button class="tab on" data-t="key" onclick="setTab(this)">访问密钥</button>
<button class="tab" data-t="pwd" onclick="setTab(this)">邮箱密码</button>
</div>
<div data-t="key">
<div class="fgrp">
<label>API 访问密钥</label>
<input class="inp mono" placeholder="ask_••••••••••••••••••••••" value="ask_7f3a9c2e1b8d4a6f">
</div>
<div class="ferr" id="key-err" style="display:block">密钥无效或已撤销——请核对后重试,或联系组织管理员重新签发。</div>
<button class="btn-p">进入工作台</button>
<div class="hint">密钥由服务端管理员创建:<code>agent-system apikey create --owner &lt;name&gt;</code>。密钥等同账户凭证,请勿写入代码库。嵌入部署(未开启认证)时无需登录。</div>
</div>
<div data-t="pwd" style="display:none">
<div class="fgrp">
<div class="frow"><label>邮箱</label></div>
<input class="inp" type="email" placeholder="you@company.com" value="weichen@rd-team.cn">
</div>
<div class="fgrp">
<div class="frow"><label>密码</label><span class="link">忘记密码?</span></div>
<input class="inp" type="password" placeholder="••••••••" value="xxxxxxxx">
</div>
<button class="btn-p">登录</button>
<div class="hint">登录建立服务端会话(HttpOnly Cookie);系统自动选择你上次的组织工作区。程序化访问仍可使用 API 密钥。</div>
</div>
<div class="fbot">还没有组织账户?<span class="link" onclick="setScreen(document.querySelector('[data-s=signup].tp'))">创建组织</span></div>
</div>
</div>
<div class="hero">
<h2>把研发记忆<br>变成组织的第二大脑</h2>
<p>文档、决策与知识的沉淀、检索与生成——一个面向团队的多租户智能体工作台。</p>
<ul>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>项目化的多会话工作区,任务卡片收件箱驱动待办</li>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>组织内成员协作,角色与密钥分级授权</li>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>知识库检索(全文 + 向量)与文档生成流水线</li>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>自托管优先:单二进制部署,数据不出域</li>
</ul>
<div class="foot"><span>自托管 · 多租户</span><span>Apache-2.0 内核</span></div>
</div>
</div>
</div>
<!-- ═══ 注册 ═══ -->
<div class="screen" data-s="signup">
<div class="auth">
<div class="form-side">
<div class="form-card">
<div class="brand">
<div class="brand-mark"><svg class="ic" 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>
<div><div class="brand-name">Agent-System</div><div class="brand-sub">创建组织(租户)</div></div>
</div>
<h1 class="f">注册</h1>
<div class="f-sub">创建组织后你即为其 OWNER,可邀请成员加入</div>
<div class="fgrp"><label>显示名</label><input class="inp" value="weichen"></div>
<div class="fgrp"><label>邮箱</label><input class="inp" type="email" placeholder="you@company.com" value="weichen@rd-team.cn"></div>
<div class="fgrp"><label>密码</label><input class="inp" type="password" value="••••••••••">
<div class="strength s3"><i></i><i></i><i></i><i></i></div>
</div>
<div class="note"><svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v.1M12 11v5"/></svg>组织名即租户:资源按组织隔离,跨组织一律不可见。个人使用可填「个人租户」。</div>
<div class="fgrp"><label>组织名称</label><input class="inp" value="研发体系团队"></div>
<label class="chk"><span class="cbx on" onclick="this.classList.toggle('on')"></span><span>我已阅读并同意 <span class="link">服务条款</span> 与 <span class="link">数据处理说明</span>(组织数据仅存储于本部署实例)</span></label>
<button class="btn-p">创建组织并进入</button>
<div class="fbot">已有账户?<span class="link" onclick="setScreen(document.querySelector('[data-s=login].tp'))">直接登录</span></div>
</div>
</div>
<div class="hero">
<h2>为你的团队<br>建立专属智能体工作台</h2>
<p>注册即创建一个隔离的租户工作区:项目、会话、知识库与工件都属于组织,成员按角色协作。</p>
<ul>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>OWNER / ADMIN / MEMBER 三级角色</li>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>按需签发 API 密钥,随时撤销</li>
<li><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg>一个账户可加入多个组织,随时切换</li>
</ul>
<div class="foot"><span>自托管 · 多租户</span><span>Apache-2.0 内核</span></div>
</div>
</div>
</div>
<!-- ═══ 账户与租户(应用内表面) ═══ -->
<div class="screen" data-s="account">
<div class="acc-wrap">
<div>
<div class="demo-cap">侧栏 Footer · 账户菜单(方案 A 形态)</div>
<div class="panel acc-demo">
<div class="acc-head">
<span class="avatar">W</span>
<span><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="on2"><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"><span class="oi" style="background:#4a5568">W</span><span class="on2"><div class="n">个人租户</div><div class="r">仅自己</div></span><span class="role-chip owner">OWNER</span></div>
<div class="org-rowline"><span class="oi" style="background:#2f855a">测</span><span class="on2"><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"><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"><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 3"/></svg>API 密钥<span class="kbd">3 枚活跃</span></button>
<button class="pi"><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"><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>
<div>
<div class="demo-cap">设置 · 成员与角色(OWNER/ADMIN 可见)</div>
<div class="panel mem">
<div class="mem-head">
<div><h3>成员管理 · 研发体系团队</h3><p>角色变更即时生效;被移除成员的 API 密钥同时失效。</p></div>
<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>
</div>
<div class="inv">
<input class="inp" placeholder="同事的邮箱地址">
<select class="sel"><option>MEMBER</option><option>ADMIN</option></select>
<button class="btn primary">邀请</button>
</div>
<div class="mem-list">
<div class="mem-row">
<span class="avatar sm">W</span>
<span class="who"><div class="n">weichen <span class="role-chip owner">OWNER</span></div><div class="m">weichen@rd-team.cn</div></span>
<span class="st-chip active">活跃</span>
<span style="width:60px;text-align:right;font-size:11.5px;color:var(--text-faint)">刚刚</span>
<button class="act" title="移除"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg></button>
</div>
<div class="mem-row">
<span class="avatar sm" style="background:#2f855a">Y</span>
<span class="who"><div class="n">youchen <span class="role-chip admin">ADMIN</span></div><div class="m">youchen@rd-team.cn</div></span>
<span class="st-chip active">活跃</span>
<span style="width:60px;text-align:right;font-size:11.5px;color:var(--text-faint)">2 小时前</span>
<button class="act" title="移除"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg></button>
</div>
<div class="mem-row">
<span class="avatar sm" style="background:#b7791f">L</span>
<span class="who"><div class="n">lin.zhou <span class="role-chip member">MEMBER</span></div><div class="m">lin.zhou@rd-team.cn</div></span>
<span class="st-chip active">活跃</span>
<span style="width:60px;text-align:right;font-size:11.5px;color:var(--text-faint)">昨天</span>
<button class="act" title="移除"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14"/></svg></button>
</div>
<div class="mem-row" style="opacity:.75">
<span class="avatar sm" style="background:#718096">H</span>
<span class="who"><div class="n">han.mei <span class="role-chip member">MEMBER</span></div><div class="m">han.mei@partner.cn</div></span>
<span class="st-chip pending">待接受</span>
<span style="width:60px;text-align:right;font-size:11.5px;color:var(--text-faint)">3 天前</span>
<button class="act" title="撤销邀请"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 8v8M8 12h8"/><circle cx="12" cy="12" r="9"/></svg></button>
</div>
</div>
<div class="mem-foot">OWNER:管理与计费、角色、密钥、删除组织 · ADMIN:成员与项目、插件 · MEMBER:项目内协作(按项目可见范围)。越权访问一律返回 NotFound,不泄露资源存在性。</div>
</div>
</div>
</div>
</div>
<div class="demo-tag"><b>认证与租户</b>设计稿 · 无后端 · 顶部切换场景</div>
<script>
function setScreen(btn){
document.querySelectorAll('.tp').forEach(b=>b.classList.toggle('on',b===btn));
document.querySelectorAll('.screen').forEach(s=>s.classList.toggle('on',s.dataset.s===btn.dataset.s));
}
function setTab(btn){
document.querySelectorAll('.tab').forEach(b=>b.classList.toggle('on',b===btn));
document.querySelectorAll('.form-card [data-t]').forEach(d=>{
if(d.closest('.tabs'))return;
d.style.display=d.dataset.t===btn.dataset.t?'':'none';
});
}
</script>
</body>
</html>
@@ -0,0 +1,240 @@
<!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>
@@ -0,0 +1,243 @@
<!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>方案 C · 项目门户 — 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-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);--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-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);--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}
/* ── 左栏:项目列表 ── */
.side{width:264px;flex:none;background:var(--bg-panel);border-right:1px solid var(--border-faint);display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:8px;padding:14px 14px 10px}
.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}
.newproj{display:flex;align-items:center;gap:8px;height:34px;margin:2px 12px 8px;padding:0 10px;border-radius:var(--r-md);border:1px dashed var(--border-strong);color:var(--text-subtle);font-size:13px}
.newproj:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.side-scroll{flex:1;overflow-y:auto;padding:0 8px;min-height:0}
.sec{font-size:11.5px;color:var(--text-faint);padding:10px 8px 4px;letter-spacing:.3px}
.proj{display:flex;align-items:center;gap:9px;height:34px;padding:0 8px;margin:1px 0;border-radius:var(--r-sm);color:var(--text-subtle);cursor:pointer}
.proj:hover{background:var(--bg-hover)}
.proj.on{background:var(--bg-selected);color:var(--text)}
.proj .oi{width:22px;height:22px;border-radius:6px;color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.proj .n{flex:1;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj .c{font-size:11px;color:var(--text-faint)}
.side-foot{border-top:1px solid var(--border-faint);padding:10px 12px;display:flex;align-items:center;gap:8px}
.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}
.sf-n{font-size:13px;font-weight:600}
.sf-s{font-size:11px;color:var(--text-faint)}
.side-foot .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)}
/* ── 主区 ── */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.view{display:none;flex:1;min-height:0;flex-direction:column}
.view.on{display:flex}
/* 门户视图 */
.pt-head{padding:26px 32px 0}
.pt-crumb{font-size:12px;color:var(--text-faint);display:flex;gap:6px;align-items:center;margin-bottom:8px}
.pt-title{display:flex;align-items:center;gap:12px}
.pt-title h1{font-size:22px;font-weight:700;letter-spacing:-.2px}
.pt-oi{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#5b8def,#8f6ce8);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pt-desc{margin-top:6px;color:var(--text-subtle);font-size:13.5px}
.pt-stats{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.stat{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:13px;border:1px solid var(--border);font-size:12px;color:var(--text-subtle);background:var(--bg-panel)}
.stat b{color:var(--text);font-weight:600}
.stat .dot{width:6px;height:6px}
.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)}
.pt-actions{margin-left:auto;display:flex;gap:8px}
.btn{height:30px;padding:0 13px;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.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.pt-body{flex:1;overflow-y:auto;padding:20px 32px 28px;min-height:0}
.sec2{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;margin:6px 0 12px}
.sec2 .ln{flex:1;height:1px;background:var(--border-faint)}
.sec2 .more{font-size:12px;color:var(--text-faint);font-weight:400;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(252px,1fr));gap:12px}
.card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-panel);padding:13px 14px;cursor:pointer;transition:border-color var(--ease),transform var(--ease);box-shadow:var(--shadow-card)}
.card:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.card .row1{display:flex;align-items:center;gap:8px}
.card .ttl{flex:1;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .sn{margin-top:6px;font-size:12px;color:var(--text-faint);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.card .meta{margin-top:9px;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-faint)}
.card .meta .sp{flex:1}
.card .who{width:16px;height:16px;border-radius:50%;font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center}
.card.new{border-style:dashed;background:transparent;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-faint);min-height:118px;box-shadow:none}
.card.new:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
/* 对话视图 */
.cv-head{padding:12px 24px 10px;border-bottom:1px solid var(--border-faint);display:flex;align-items:center;gap:10px}
.cv-back{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--border);color:var(--text-subtle);font-size:12.5px}
.cv-back:hover{background:var(--bg-hover);color:var(--text)}
.cv-title{font-size:15px;font-weight:600}
.cv-sub{margin-top:4px;font-size:12px;color:var(--text-faint)}
.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}
.m-time{font-size:11px;color:var(--text-faint)}
.m-body{font-size:14px;line-height:1.7}
.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}
.btn.sm{height:24px;padding:0 9px;font-size:12px}
.btn.green{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.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)}
.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}
</style>
</head>
<body>
<div class="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"/></svg></div>
<span class="brand-name">Agent-System</span>
</div>
<button class="newproj"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>新建项目</button>
<div class="side-scroll">
<div class="sec">进行中 · 3</div>
<div class="proj on"><span class="oi" style="background:linear-gradient(135deg,#5b8def,#8f6ce8)">研</span><span class="n">研发体系文档</span><span class="c">4</span></div>
<div class="proj"><span class="oi" style="background:#2f855a">记</span><span class="n">记忆库建设</span><span class="c">3</span></div>
<div class="proj"><span class="oi" style="background:#b7791f">测</span><span class="n">真实模型测试</span><span class="c">2</span></div>
<div class="sec">已归档 · 1</div>
<div class="proj" style="opacity:.6"><span class="oi" style="background:#4a5568">旧</span><span class="n">旧文档迁移</span><span class="c">7</span></div>
</div>
<div class="side-foot">
<span class="avatar">W</span>
<span><div class="sf-n">weichen</div><div class="sf-s">研发体系团队 · OWNER</div></span>
<span class="sp"></span>
<button class="iconbtn" 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>
<button class="iconbtn" title="设置"><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>
</aside>
<main class="main">
<!-- 门户视图 -->
<div class="view on" id="v-portal">
<div class="pt-head">
<div class="pt-crumb">项目 / 研发体系文档</div>
<div class="pt-title">
<span class="pt-oi">研</span>
<h1>研发体系文档</h1>
<span class="pt-actions">
<button class="btn"><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>搜索项目内容</button>
<button class="btn">⋯</button>
<button class="btn primary" onclick="openConv()"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>新建会话</button>
</span>
</div>
<div class="pt-desc">研发记忆与体系文档的沉淀、检索与生成。目标系统「两树一网」的载体项目。</div>
<div class="pt-stats">
<span class="stat"><b>4</b> 会话</span>
<span class="stat"><span class="dot run"></span><b>2</b> 运行中</span>
<span class="stat"><span class="dot wait"></span><b>1</b> 待确认</span>
<span class="stat"><b>5</b> 工件</span>
<span class="stat">成员 <b>6</b></span>
</div>
</div>
<div class="pt-body">
<div class="sec2">进行中的会话<span class="ln"></span><span class="more" onclick="toast('查看全部(设计稿示意)')">全部 ›</span></div>
<div class="grid">
<div class="card" onclick="openConv()">
<div class="row1"><span class="dot run"></span><span class="ttl">本周周报起草与素材汇总</span></div>
<div class="sn">检索本周 23 条素材,起草周报;已进入生成确认环节…</div>
<div class="meta"><span>3 分钟前</span><span>·</span><span>18 条消息</span><span class="sp"></span><span class="who" style="background:#5b8def">W</span></div>
</div>
<div class="card" onclick="openConv()">
<div class="row1"><span class="dot wait"></span><span class="ttl">接口设计文档评审</span></div>
<div class="sn">3 处契约变更待确认;评审材料已备齐,建议周四 14:00…</div>
<div class="meta"><span>1 小时前</span><span>·</span><span>9 条消息</span><span class="sp"></span><span class="who" style="background:#2f855a">Y</span></div>
</div>
<div class="card" onclick="openConv()">
<div class="row1"><span class="dot idle"></span><span class="ttl">文档规范修订意见收集</span></div>
<div class="sn">汇总各模块对文档规范 v2.4 的修订意见,输出对照表…</div>
<div class="meta"><span>昨天</span><span>·</span><span>12 条消息</span><span class="sp"></span><span class="who" style="background:#5b8def">W</span></div>
</div>
<button class="card new" onclick="toast('新建会话(设计稿示意)')"><svg class="ic" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>新建会话</button>
</div>
<div class="sec2" style="margin-top:22px">最近工件<span class="ln"></span><span class="more" onclick="toast('工件面板(设计稿示意)')">全部 ›</span></div>
<div class="grid">
<div class="card" onclick="toast('打开工件(设计稿示意)')">
<div class="row1"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--accent)"><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"/></svg><span class="ttl">周报_第39周.docx</span></div>
<div class="sn">10:24 生成 · 1,214 字 · 本周周报起草与素材汇总</div>
<div class="meta"><span>刚刚</span><span class="sp"></span><span>文档</span></div>
</div>
<div class="card" onclick="toast('打开工件(设计稿示意)')">
<div class="row1"><svg class="ic ic-s" viewBox="0 0 24 24" style="color:var(--green)"><path d="M4 4h16v16H4z"/><path d="M4 10h16M10 4v16"/></svg><span class="ttl">接口契约变更清单.md</span></div>
<div class="sn">09-29 · 3 模块 12 项变更 · 接口设计文档评审</div>
<div class="meta"><span>昨天</span><span class="sp"></span><span>文档</span></div>
</div>
</div>
</div>
</div>
<!-- 对话视图 -->
<div class="view" id="v-conv">
<div class="cv-head">
<button class="cv-back" onclick="closeConv()"><svg class="ic ic-s" viewBox="0 0 24 24"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>返回项目</button>
<span class="cv-title">本周周报起草与素材汇总</span>
<span style="flex:1"></span>
<button class="btn">分享</button>
<button class="btn">⋯</button>
</div>
<div class="cv-sub" style="padding:0 24px 8px;font-size:12px;color:var(--text-faint)">研发体系文档 · 2 个代理运行中 · 更新于 3 分钟前</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="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"><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>
</div>
</main>
</div>
<div class="demo-tag"><b>方案 C · 项目门户</b>设计稿 · 无后端 · 点击会话卡进入对话</div>
<script>
function openConv(){document.getElementById('v-portal').classList.remove('on');document.getElementById('v-conv').classList.add('on')}
function closeConv(){document.getElementById('v-conv').classList.remove('on');document.getElementById('v-portal').classList.add('on')}
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>
+133
View File
@@ -0,0 +1,133 @@
<!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>
@@ -0,0 +1,28 @@
# T3 验证记录:命令总线(feature/command-bus-r1)
被测版本组合:core=a2050d8 + backend=0f74026(PR#10)+ frontend=6a2b21a(PR#6)+ ui=76f976d(PR#7)+ documents=本记录;Dev 组合 PR:见任务卡(feature/command-bus-r1)。
initial_base_sha(R0):5b83704126(T2 合入后 main)。
日期:2026-09-30。
## 结果
| 用例 | 结果 | 证据 |
|---|---|---|
| Backend `go vet ./...` + `go test ./...` | PASS | 15 包 ok(新增 cmdbus 套件);store 迁移 v7 command_audit(双方言)roundtrip 更新为 [1..7] |
| cmdbus 单测 | PASS | 四入口审计对称(button/card/slash/chat/api,未知名归一 api;committed 必带 operationID);高危确认闭环(accepted→确认 committed→过期 rejected expired;取消 rejected;handler 拒绝透传);审计不可用→unknown(不臆断成功);插件 spec 无效 fail-closed;schema 标量子集校验(required/type/integer 分数拒绝) |
| Server e2e(含新增 TestDangerCommandConfirmFlowE2E) | PASS | GET /api/commands 数组契约(含 danger 与 legacy name);POST /api/commands/e2e.destroy(button 未确认)→ 确认卡+accepted;卡 action confirm → committed;GET /api/commands/audit 按会话查询有序(latest-first: committed→accepted);既有 TestCommandsRoute 经总线仍过(/help、未知命令 400 契约不变) |
| UI `tsc --noEmit` + `vitest run` | PASS | 18/18(InlineConfirmCard:未决展开+confirm/cancel 回调;resolved/dismissed/failed 折叠一行;非 confirm 不渲染;hasOpenConfirm 守卫语义) |
| Frontend `tsc --noEmit` + `vitest run` | PASS | 9/9;接线为纯委派(渲染证据在 ui 套件、分发证据在 backend e2e) |
| 组合 `make test` | PASS | Dev 钉定后组合验证(见 Dev 任务卡与组合 PR) |
## 落库清单(本任务)
- backend:`internal/cmdbus`(L1 包,模块卡 policy/modules/cmdbus.md;cardsvc 模块卡一并首落地)——注册表组合 Agent-Command、四入口归一分发、params 校验、danger=high→内联确认卡收口、审计信封落盘;server 路由 `POST /api/commands/{id}`、`GET /api/commands/audit`、`GET /api/commands` 改注册表驱动;postMessage chat 入口经意图闸门命中注册命令时同源分发(不起 run);插件 host OnCommands overlay;store v7。
- ui:InlineConfirmCard + hasOpenConfirm(锚定内联/已决折叠/双现定位入口)。
- frontend:内联确认卡渲染(锚定用户消息)、cardlink 点击定位收件箱(D32 互定位)、对话区拖拽投放、输入区未决确认提示、命令菜单注册表化(无别名容忍 + 高危 ⚠ 标记)。
## 限制
- 确认挂起态为进程内(重启后确认返回 rejected expired);v1 接受,升级触发条件见模块卡。
- 入口对称的浏览器走查未在本记录执行(API e2e + 组件测试覆盖);系统级零页面走查归 T5 验收剧本。
- 意图(agent-intent)→ 命令绑定为"意图 id == 注册命令 id"直接对齐;更丰富的 intent.action 映射待插件生态立项。
@@ -0,0 +1,27 @@
# T4 验证记录:工作区弹层(feature/workspaces-r1)
被测版本组合:core=a2050d8 + backend=<PR#11 后> + frontend=<PR#7 后> + ui=<PR#8 后> + documents=本记录;Dev 组合 PR:见任务卡(feature/workspaces-r1)。
initial_base_sha(R0):fc5008aa13(T3 合入后 main)。
日期:2026-09-30。
## 结果
| 用例 | 结果 | 证据 |
|---|---|---|
| Backend `go vet` + `go test ./...` | PASS | 全包 ok;plugins 新增 TestWorkspacesOverlay(manifest+workspaces/main.json 装载、ListWorkspaces 声明含 shortcut/body) |
| UI `tsc --noEmit` + `vitest run` | PASS | 23/23(OverlayHost:标题/图标/徽章/快捷键提示、捕获相 Esc 关闭、仅遮罩点击关闭、刷新回调、声明式+命令式共存) |
| Frontend `tsc` + `vitest` + `vite build` | PASS | 9/9;构建通过(dist 产物正常) |
| Example 插件扩展 | PASS | plugins/example:provides 增 workspaces/commands;workspaces/main.json(example.governance,⌘9)与 commands/demo.json(example.echo,normal 级)JSON 校验通过;随 Dev 组合 PR 落库 |
| 组合 `make test` | PASS | Dev 钉定后组合验证(见 Dev 任务卡与组合 PR) |
## 落库清单(本任务)
- backend:plugins host 装载 provides.workspaces(workspaces/*.json → PluginWorkspace overlay)+ ListWorkspaces;GET /api/workspaces。
- ui:OverlayHost(统一弹层容器:Esc/遮罩回对话现场、快捷键提示、徽章、刷新;声明式 Body 与命令式子组件共存)。
- frontend:右栏终态纯收件箱(经典 tabs 移除;Plan/Todos 并入「当前任务」常驻卡);工件/代理/插件面板/插件声明工作区统一为 OverlayHost 弹层(Workspaces.tsx);⌘1–9 快捷键;左栏工作区快捷区;会话头项目徽章(D26);DocViewer/AgentTracker 迁入 OverlayHost。
- Dev:example 插件扩展(workspace + command 声明)。
## 限制
- 工作区 badgeTool/refreshTool 的服务端工具联动为声明占位(v1 前端整体刷新 Body;按需刷新待插件生态立项)。
- 浏览器端 ⌘ 快捷键与零页面走查归 T5 系统级验收剧本。
@@ -0,0 +1,39 @@
# T5 验证记录:polish-retreat(feature/polish-r1)
被测版本组合:core=a2050d8 + backend=303cdf3 + frontend=4f4711a + ui=1c2ddec + documents=本记录;Dev 组合 PR:见任务卡(feature/polish-r1)。
initial_base_sha(R0):91e616e03d(T4 合入后 main)。
日期:2026-09-30。
## 零页面走查(系统级验收剧本,D31 对话完备性)
全新实例(空数据目录 + 真实单二进制 `serve --mock` + example 插件)**纯对话/命令/卡驱动全生命周期,12/12 PASS**:
| # | 场景 | 结果 |
|---|---|---|
| 1 | 零页面:空实例零项目 | PASS |
| 2 | 对话建立项目与会话 | PASS |
| 3 | `/help` 经命令总线(slash 入口) | PASS |
| 4 | `#upload` 摄取卡全周期(2 卡:progress=done / compare=action_required) | PASS |
| 5 | 卡上动作 keep → resolved + 回执留痕(card 入口) | PASS |
| 6 | 一键收纳 done→dismissed;resolved 留痕不动 | PASS |
| 7 | HITL 阻断与解除(对话内完备) | PASS |
| 8 | button 入口直发命令 committed(四入口闭环) | PASS |
| 9 | 插件工作区声明可见(example.governance) | PASS |
| 10 | `#doc` 工件产出(对话触发) | PASS |
| 11 | 审计信封:slash=2 button=2 入口均有记录 | PASS |
| 12 | 全程无预制数据、无 UI 专属旁路 | PASS(脚本即证) |
## 其余 T5 项
| 项 | 结果 | 证据 |
|---|---|---|
| 状态灯形状+色双编码复核 | PASS | ui 套件 StatusLamp 断言(◆/●/✓/✕/◌ + tone 类);走查中各状态均现 |
| 收纳策略 | PASS | 🧹 一键收纳(done→dismiss;resolved 盖章不动)走查项 6;右栏收起角标(rail-badge) |
| 文档更新 | PASS | usage 指南 §4.2–4.7/§5/§6.2/§7 重写(收件箱/命令总线/工作区);本记录 |
| Frontend tsc+vitest+build | PASS | 9/9;构建产物正常 |
| 组合 make test | PASS | Dev 钉定后(见任务卡) |
## 限制
- 走查以 API 驱动真实二进制执行(等效系统级),像素级浏览器视觉走查未自动化(组件测试 + 构建覆盖渲染层);后续可在浏览器插件化后纳入剧本。
- 通知"铃铛"远期形态仍未引入(提案 §7 远期项,非 T5 范围)。