Cadau 界面与布局
与 产品规格.md 一致，产品文案以用户表达为准。
来源 docs/界面与布局.md
文档版本：1.0（合并原 WEBUI_DESIGN、responsive-breakpoints、LAYOUT_BASELINE_RULES、HOMEPAGE_LAYOUT_INTERACTION） 表述：与 产品规格.md 一致，产品文案以用户表达为准。 实现对照：client/web/src/App.tsx、client/web/src/style.css
1. 视觉与组件规范
1.1. 视觉主题与气质
- 产品定位：企业内智能对话工具，强调可靠、友好、可读性。
- 整体风格：简洁、温和偏暖、低装饰，不做炫技动画。
- 情绪关键词：专业、亲和、清晰、可持续迭代。
- 信息优先级：高频任务（登录、发消息）始终主视觉；低频任务（注册、验证码登录、主题切换）弱化展示但可达。
- 主题：支持 浅色、深色、系统（跟随 OS） 三种模式；控件置于 顶栏右上角，以 图标 + 单击循环切换 实现（见 §5.5）。
- 可选 Win12 皮肤：独立文件
client/web/src/themes/win12.css，通过?skin=win12或VITE_SKIN=win12启用，详见 Win12风格主题规范.md §7；默认仍为本文 §1.3 暖色 Sky 主题。
1.2. 设计总原则（主次功能）
- 登录双主路径（默认密码）：密码登录 与 验证码登录 均为正式主路径；默认展示「手机号/邮箱 + 密码」 表单。验证码路径通过 Tab、分段控件或同级切换 到达，与密码路径 同层可见，不得做成唯一隐藏的深层菜单。
- 默认态：首屏落在 密码登录；切换到验证码登录后，展示发码与验证码输入，交互权重与密码路径一致。
- 次入口低强调：注册入口为文本链，不与主按钮同级竞争。
- 单屏只突出一个主要 CTA：避免多个高饱和按钮同时抢注意力。
- 关键路径不隐藏：低频功能可弱化，但不能藏到多层菜单。
1.3. 色彩系统与语义角色
3.1 主色与中性色
- 主色（Primary）：
#0284c7（Sky 600） - 主色悬停：
#0369a1（Sky 700） - 辅色（渐变辅助）：
#06b6d4（Cyan 500） - 高强调渐变（主按钮）：
from #0284c7 to #06b6d4 - 成功：
#16a34a - 警告：
#d97706 - 危险：
#dc2626
3.2 明暗主题语义
- 明亮背景：
#f7f4ef/ 卡片#fffdf9 - 暗色背景：
#030712/ 卡片#111827 - 主文本（浅色）：
#111827 - 主文本（深色）：
#f3f4f6 - 次文本（浅色）：
#6b7280 - 次文本（深色）：
#9ca3af - 边框（浅色）：
#e5e7eb - 边框（深色）：
#374151
1.4. 字体与排版
- 字体栈：
Inter, "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif - 标题层级：
- H1：30/36，600 - H2：24/32，600 - H3：20/28，600
- 正文：14/22，400
- 说明文字：12/18，400
- 强调数字/状态：14/20，500
1.5. 组件规范
5.1 按钮
- 主按钮：高对比渐变底（
from #0284c7 to #06b6d4），白字，圆角 12。 - 次按钮：中性背景，文本色强调。
- 文本按钮：仅用于次级动作（如「去注册」「使用验证码登录」）。
- 禁止：同一视图内出现两个以上主按钮并列竞争。
- 统一要求：全站主按钮保持同一渐变方向与同级阴影强度，不混用纯色主按钮。
5.2 输入框
- 高度：44（桌面），触控最小可点击区 44x44。
- 统一状态：默认 / hover / focus / error / disabled。
- 错误提示就近显示，且文案可执行（告诉用户要补什么）。
5.3 卡片与容器
- 圆角：12（卡片），10（输入），8（小控件）。
- 阴影：轻量单层，优先用边框分层，不叠重阴影。
- 面板内垂直间距：16 起，按 4/8 栅格递进。
5.4 组合框（下拉选型）
- 全站统一：用户可见的下拉选型（表单字段、筛选器、工具栏枚举等）不得使用浏览器原生
<select>。 - 何时用组合框：选项 超过 3 项 才考虑组合框。1～3 项用单选或状态按钮。4 项必须同一行状态按钮（不截断、不折行，如「草稿 / 招聘中 / 已满员 / 已关闭」）；格子太窄就让该字段占满整行，占满后仍排不下再用组合框。5 项及以上用组合框。部门不论数量都用树形组合框（名称＋编码、子级缩进），见人力资源规格 §6。人员、岗位等可搜索名单不论数量都用可搜索组合框。
- 组件：静态选项列表用
OptionListCombobox；帮助会话等特殊首项语义用HelpSessionCombobox（均位于client/web/src/）；人力资源短枚举用ChoiceButtons。 - 外观与交互：复用
.help-session-combobox-*样式（描边触发钮、展开动画下拉层、键盘与无障碍、选中后收起）；实现细节与维护对照见doc/skills/combobox-pattern.md。 - 字段排版：标题用普通容器 + 文案 span，勿用
<label>包裹整段组合框；与操作助手会话行、我的智能体状态筛选等现有用法对齐。 - 紧凑档字号：工作区 A 档表单（
.capability-pack-field、数据连接表单等）内组合框触发钮 12px，与同表单输入框一致。
5.5 抽屉与对话框
侧栏 抽屉（从一侧滑出、窄幅占满高度）只适合 一屏能看完、不必滚屏 的内容。内容多到要在抽屉里纵向滚动时，改用 居中对话框：更宽、相关区块可并排，阅读不必在窄条里来回滚。
- 可用抽屉：两三项只读摘要、三四个字段、几颗按钮。
- 须用对话框：多段说明（如岗位职责 + 任职资格 + 在岗人员）、长表单、对照表。
- 对话框尽量一屏看完：优先加宽、把短字段排成 两栏或三栏（两栏不够就三栏），长文本并排，而不是把窗口收窄再让整层滚动。仅名单、大段正文等本身很长的区域单独细轨滚动。
- 名单很长时，只给 名单自己 细轨滚动，不要把整层窄抽屉当成阅读区。
- 能并排的区块（定义 vs 名单）用两列，避免先滚完一边才发现另一边还有内容。
实现对照：人力资源岗位/职级详情用居中宽对话框（.job-detail-dialog）；编码约定见 .cursor/rules/mindlink-drawer-vs-dialog.mdc、.cursor/rules/mindlink-form-layout.mdc。
5.6 主题切换控件
- 三种模式：浅色、深色、系统（跟随操作系统浅色/深色外观）。
- 位置：置于 应用主框架顶栏右上角（登录后主界面与未登录壳层若共用顶栏，则同位置；仅单页登录时也可放在该页顶栏右对齐），不占用主内容区中心，不与主 CTA 竞争。
- 形态与交互：
- 以 图标按钮 呈现（单一控件即可，不必占三格宽）。 - 单击按顺序 循环切换：浅色 → 深色 → 系统 → 浅色 → … - 图标 反映当前生效模式（建议：浅色用太阳/亮屏类、深色用月亮类、系统用「显示器+系统」或半亮半暗类符号；具体图形可统一一套线性 outline 风格）。
- 辅助：悬停或长按可展示 Tooltip，文案标明当前模式（如「浅色主题」「深色主题」「跟随系统」）；可选在设置页重复展示当前值，与顶栏控件状态一致。
- 持久化：用户选择须 持久化（如
localStorage或与账号偏好同步，以后端策略为准）；系统 模式下应监听prefers-color-scheme（或等价 API）变化并即时更新界面。 - 视觉：图标风格统一为 线性描边（outline），尺寸与顶栏其他图标按钮对齐；主题切换 永不作为主操作，仅作环境偏好。
5.7 界面语言
- 默认中文。 英语是第二语言，不是替换。
- 账号跟着走。 登录后保存在账号偏好（「我的账号 → 偏好设置 → 界面语言」）；管理端在关于页与侧栏；手机在「我的」。未登录时先跟浏览器（或本机）语言。都认不出则中文。
- 产品 SPA 不走
/en/...路径。 设置项即时切换即可。宣传站仍可用 URL 前缀给搜索引擎。 - 只翻产品文案。 用户自己写的名字、对话、知识库原文、工作区标题不翻译。
- 英文也要用户表达。 按钮、空态、帮助正文用英语用户能懂的说法（workspace / help agent / knowledge base）。
- 插件跟随宿主。 打开应用时带上当前语言；切换语言时应用内菜单与提示同步变化。
- 组合框。 语言选项用运营台组合框，禁止原生
<select>。
5.8 从别处整页跳来：左上角返回
不是从主菜单打开的全页（名单行、档案里的关联、助手代为打开某页、开局「去这一步」），页头标题左侧放一颗返回图标按钮。
- 返回去哪：回到来的那一页，并尽量保住当时在看的人、单据、筛选。读屏名称写清去处，如「返回人员与组织」，不要只写「返回」。
- 不要出现：用户自己点主菜单进来的落地页；对话框 / 抽屉（继续用关闭）；宿主已有「返回应用桌面」时，应用页里不要再叠一颗同义按钮。
- 同一页两种进法：例如「我的发展画像」既可从主菜单进、也可从人员花名册钻入——只有后一种显示返回。
- 实现对照：人力资源
PageHeadLead/tabReturn；编码约定见.cursor/rules/mindlink-page-back.mdc。
1.7. 交互与状态
- 反馈时机：
- 点击后 100ms 内给出视觉反馈。 - 提交中禁重复点击，并显示处理中状态（文案 + 内联 spinner，见下）。
- 按钮 loading（处理中）：
- 组件：BtnBusyLabel、btnBusyInlineClass（client/web/src/BtnBusyLabel.tsx）。 - 用法：按钮加 btnBusyInlineClass(busy)、aria-busy={busy}、disabled={busy}；内容为 <BtnBusyLabel busy={busy} label="保存" busyLabel="保存中…" />。 - 样式：.btn--busy-inline、.data-sources-inline-spinner（主色按钮上 spinner 为白色描边）。 - 纯图标按钮 busy 时用 spinner 替换图标；维护细则见 .cursor/rules/web-ui-component-scale.mdc §9。
- 错误处理：
- 表单错误优先字段级提示。 - 请求失败补充全局提示。
- 空态：
- 必须包含下一步建议动作。
- 次级操作入口位置：
- 表单内的次级切换入口（如「改用邮箱」「使用验证码登录」）优先放在对应字段的 label 右侧或输入框右上角。 - 避免把次级入口单独占据一整行主视区高度。
1.8. 登录注册专项规则（与当前实现一致）
- 默认模式：手机号登录。
- 默认登录方式：密码登录。
- 切换「使用验证码登录」后：
- 展示验证码输入与发送验证码按钮。 - 隐藏密码输入框。
- 切回密码登录后：
- 隐藏验证码区域。 - 清空验证码字段，避免状态残留。
- 注册流程：
- 保持手机号/邮箱注册可用。 - 注册时密码与验证码按接口规则必填/选填。
1.9. Do / Don’t
Do
- 用层级和默认值体现主次，而不是靠「常用/少用」文案。
- 用一致的语义色表达状态（成功/警告/错误）。
- 在深浅色下都保证可读对比。
- 给低频功能留可见入口，但降低视觉竞争。
Don’t
- 不把登录与注册做成同等主按钮。
- 不把密码登录与验证码登录同时作为主表单并列展示。
- 不在页面写「少量用户使用」这类频次标签。
- 不让主题切换抢主流程注意力。
1.10. Agent 使用指引（给编码代理）
- 优先保证高频路径：
登录 -> 进入聊天 -> 发送消息。 - 修改 UI 时，先检查是否破坏主次关系，再看视觉一致性。
- 新增功能默认落在次级入口，除非有明确产品决策升级为主流程。
- 涉及登录页改动时，必须校验：
- 手机号密码登录可直达 - 验证码登录可切换且可回退 - 注册入口可达但不抢主按钮
1.11. 与 awesome-design-md 的整合说明
- 借鉴的是其结构化写法（主题、色彩、排版、组件、布局、深度、Do/Don’t、响应式、Agent 提示）。
- 不直接复制第三方品牌视觉资产（品牌色、字体、组件风格）。
- 后续可按实际产品演进，逐步补充：
- 组件状态表 - 页面级模板 - 可访问性检查清单（对比度、焦点、键盘导航）
2. 响应式断点
命名对照
| 简称 | 含义 |
|---|---|
| 大屏 | 原 PC、桌面端 |
| 中屏 | 平板整段视口区间 |
| 中小屏 | 中屏内偏窄一档（原「小平板」） |
| 中大屏 | 中屏内偏宽一档（原「大平板」） |
| 小屏 | 原手机端 |
沟通时可直接说「大屏」「中屏」「小屏」；仅在需要细分中屏时，使用「中小屏」「中大屏」。
小屏
- 宽度：
< 600px - CSS 媒体查询：
@media (max-width: 599px)
中屏
中屏再分两档，只按视口宽度（CSS 像素）切，不依赖设备型号。 中屏＝整个平板区间；内部用 中小屏 / 中大屏 细分。
如何区分中小屏 vs 中大屏
| 维度 | 中小屏 | 中大屏 |
|---|---|---|
| 典型场景 | 小屏以上、但仍偏窄：中小屏竖屏、部分折叠屏展开偏窄 | 接近小型笔记本宽度：常见中屏竖屏（如 ~768～834px）、或横屏后宽度落在本段 |
| 布局意图 | 仍偏紧凑：可双栏但不宜过宽、Tab 可折行 | 更接近大屏：双栏更舒展、可与大屏共用部分版式但仍弱于 >960 |
| 与横竖屏 | 同一台设备横屏后宽度变大，可能从中小屏进入中大屏区间；规范以当前视口宽度为准，不必单独写 orientation（除非产品明确要求「横屏专用样式」） |
中小屏
- 宽度：
600px - 780px - CSS 媒体查询：
@media (min-width: 600px) and (max-width: 780px)
中大屏（偏宽 / 常含常见中屏竖屏与部分横屏）
- 宽度：
781px - 960px - CSS 媒体查询：
@media (min-width: 781px) and (max-width: 960px)
大屏
- 宽度：
> 960px - CSS 媒体查询：
@media (min-width: 961px)
控制台 · 消息区（Cadau 实现对照）
client/web/src/App.tsx 中 会话列表与主会话区（产品称 C1-history） 仍为 三档 UI（窄 / 中 / 宽），分界 嵌套在本文件区间内：
| 消息区实现 | 视口宽度（CSS px） | 本文件对应 |
|---|---|---|
窄（narrow） | < 600 | 小屏 |
中（medium） | 600～780 | 中小屏（中轨 + 抽屉，偏紧凑） |
宽（wide） | ≥ 781 | 中大屏 ∪ 大屏（左侧会话列常驻，与中大屏「更可双栏舒展」一致） |
说明：781px 为本文 中小屏 \| 中大屏 分界，消息区以此为界从「中轨」切到「常驻会话列」，无需等到 961px。 常量：MESSAGES_SMALL_MIN_PX = 600、MESSAGES_DOCK_MIN_PX = 781。样式占位：style.css 中 --bp-small-min、--bp-medium-large-split（781）、--bp-large-min（961，供全站与大屏语义使用）。详见 本文 §4 §「C1-history」。
控制台 · B 区（智能体侧栏 console-nav）
| B 区布局 | 视口宽度（CSS px） | 媒体查询示意 |
|---|---|---|
| 浮动层（顶栏下叠层，不占 C 区版心宽度） | 小屏 ∪ 中小屏：< 781 | @media (max-width: 780px) |
左侧固定列（left: 0、宽 240px，C 区为侧栏让位） | 中大屏 ∪ 大屏：≥ 781 | 默认样式 |
与 C1-history 共用 781px 分界，「中小屏及以下」与消息区中轨策略一致。
3. 布局基线（A / B / C）
本文件用于沉淀当前已确认的布局规则，供后续页面复用，避免样式回退或口径不一致。 子编号（A1、A2…）便于评审与沟通时精确定位，不替代用户可见文案。 视口宽窄（小屏 / 中屏 / 大屏及中屏内分档） 以 docs/responsive-breakpoints.md 为准；消息区 C1 三档实现与之对齐。
3.1 区域定义
顶层（宏布局）
| 代号 | 名称 | 说明 |
|---|---|---|
| A | 顶部头部区（Header） | 固定在页面最上方，不随主内容滚动 |
| B | 左侧固定列（Sidebar） | 仅「消息」工作台挂载；桌面端贴左固定，不随 C 区滚动；移动端可叠层展开/收起 |
| C | 右侧主内容区（Content） | 主滚动区域；与 A、B 解耦 |
A 区子结构（topbar-slot 内 console-topbar，登录后主控制台）
| 代号 | 名称 | 职责摘要 |
|---|---|---|
| A1 | 顶栏同行·左侧 | 有 B 区时：智能体列表开关；另有当前工作区切换（及下拉） |
| A3-pre | 顶栏同行·消息 | 「消息」独立入口，位于 A3、A2 同一右组 最右侧；可带未读角标（占位）；最常用一级模块 |
| A3-cs | 顶栏同行·客服 | 本区客服席位或客服小组成员显示：位于 功能菜单（A3） 与 应用 之间；有待接单时带角标；进入 客服工作台（/customer-service）。非席位、也非小组成员的管理员从 A3 下拉 进入，见 人工客服.md §5 |
| A3 | 顶栏同行·中部（功能入口） | 与 「应用」 同高的胶囊按钮，文案 「功能」（图标 + 短字 + 小箭头），点按区域大于纯图标；小屏（<600）与打开应用时的中小屏（≤780）只留图标。点击或悬停展开 下拉菜单。已选工作区时菜单顶部为 「常用」（最多 5 项：知识库、数据连接等深层页面，按本工作区打开次数与远近排列，可钉住）；其下一级模块顺序不变（不含消息）：智能体、技能中心、工作流、智能体团队、工作区协作、定时任务、我的。非席位且非小组成员的管理员可在菜单内见 客服工作台（须已选工作区）。未选工作区时不出现「常用」。记录在本机。 |
| A2 | 顶栏同行·右侧 | 当前账号入口（「我的」、退出登录等） |
说明：布局顺序为 A1 →（右对齐组）A3、A2、A3-cs（可选）、应用、A3-pre。其中 A3-pre 为「消息」，与 A3（功能菜单）、A2（账号）、A3-cs（本区席位或客服小组成员）、应用 同属 console-topbar-trailing，消息贴该组最右。Shell 在 slot 外 侧还常含品牌链、主题切换等，讨论时可称 顶栏外侧区，不占用本节 A 区子编号。
打开应用时（平台插件、工作区应用、程序集）：不另起第二条与顶栏等高的应用头。大屏：当前应用名跟在 A1 工作区之后（开发 › 人力资源）。平台插件在 中大屏及以下（≤960）：隐藏工作区名，左侧改为 ‹ + 栏目菜单 + 当前栏目名（如「用人需求」）；点菜单打开应用内栏目抽屉。嵌入 Cadau 时插件不再自画手机条，小屏也不再重复页内大标题。再点已高亮的 应用 回到应用桌面。平台插件的 刷新 为顶栏图标（「应用」右侧）。中小屏（≤780）打开应用后「功能 / 应用 / 消息 / 客服」只留图标；小屏（<600）消息工作台不压缩工作区与智能体名称，「功能」「应用」「客服」「消息」只留图标；刷新收入「应用」回桌面即可。顶栏始终单行，高度仍为 --header-h。
B 区子结构（已选工作区、且当前为 消息 模块时挂载 console-nav）
| 代号 | 名称 | 职责摘要 |
|---|---|---|
| B1 | 侧栏顶区 | 品牌/产品标题条（如 console-brand） |
| B2 | 消息与联络列表 | 智能体、同事与好友、工作区群 三个可展开/收起的分组；折叠状态写入浏览器 localStorage（键 mindlink_chat_rail_sections_v1），刷新后保持。自己创建的智能体放在 我创建的 小组（与 系统 同宽）；「智能体」标题旁可 调整分组（按名称归堆，或把智能体拖到已有分组）。帮助智能体、应用助手、服务通知固定在 系统 小组，可展开/收起、不进用户分组 |
顶栏 A1 内 智能体侧栏开关（sidebar-toggle）仅在此类界面出现，用于展开/收起 B 区（宽屏下折叠后 B 不占位；窄屏仍为叠层）。
C 区
- 通常不再拆编号；若需指聊天内双栏，见本文 §4 的 C1-L / C1-R。
3.2. 固定定位规则
A 区（含同一行内的 A1、A3-pre、A3、A2）
- 必须固定在顶部（不随页面滚动）
- 参考实现：
- position: fixed - top: 0; left: 0; right: 0 - 总高度由变量 --header-h 反映（单行顶栏时与全局基线一致；见 style.css :root）
B 区（含 B1、B2）
- 必须固定在左侧（不随 C 区滚动）
- 左边贴边（
left = 0），不留空 - 圆角取消（与顶栏衔接侧为直角）
- 参考实现：
- position: fixed - left: 0 - top: var(--header-h)（与 A 区底部贴齐） - height: calc(100vh - var(--header-h))
C 区（Content）
- 主滚动区域（内容滚动不影响 A/B 固定）
- 需给 B 区预留宽度（
margin-left或等效布局）
3.3. 间距规则（核心）
- 统一间距变量：
--panel-gap - 当前确认值：
12px
强制约束
C-A间距 =--panel-gapC-B间距 =--panel-gap- C 区内部子组件之间间距 =
--panel-gap - 禁止“容器 gap + 子项 margin-bottom”叠加造成双倍间距
当前实现对应
main顶部内边距：calc(var(--header-h) + var(--panel-gap))console-content左偏移：calc(240px + var(--panel-gap))（侧栏宽度变更时需同步）app-shell/app-sidebar：gap: var(--panel-gap).card：margin-bottom: 0（避免与gap叠加）
3.4. 主题一致性规则
- 布局变量必须定义在全局
:root，不能只放在浅色主题内 - 至少保证这些变量全主题可用：
- --header-h - --panel-gap
3.5. 后续页面复用建议
新页面接入 A/B/C 布局时，优先复用同一套变量与结构：
- 头部高度统一读取
--header-h - 所有主布局间距统一读取
--panel-gap - 卡片间距优先由父容器
gap控制，不在卡片组件内额外加底部外边距 - 沟通时优先使用 本文件的子编号（A1、A3-pre、A3、A2、B1、B2）对齐位置，避免只说「顶上」「左边」产生歧义
3.6. 变更流程建议
如需调整间距（例如 12 -> 8 或 16）：
- 只改
--panel-gap - 观察 A–B–C 三组关系是否仍满足：
- C-A = C-B = 子组件间距
- 验证亮色/暗色主题一致
如需调整 --header-h（例如顶栏行高或 Shell 内含多行控件），需同步校验 B 区 top / height 是否与 A 区底边对齐。
4. 登录后首页区域与交互
本文用于统一讨论登录后首页的布局与交互，便于产品、设计、前后端在同一语境下沟通。
基线规则请同时参考：本文 §3（A/B/C 固定定位与统一间距规则）。
4.1. 页面总览
当前登录后首页由三层组成（并带固定布局约束）：
- 顶部头部区（Header，固定在顶部，不随页面滚动）
- 左侧控制台侧栏 B（仅「消息」工作台出现：智能体列表；桌面端固定在左侧，移动端可叠层展开）
- 右侧内容区 C（主滚动区域）
对应代码位置：
client/web/src/App.tsx的AppHome()client/web/src/style.css的console-*、messages-*、app-*等样式段
4.2. 区域划分与职责
A. 顶栏槽位（Header 内 topbar-slot，console-topbar）
位置：顶栏中部随 Shell 的 topbar-slot 注入，与品牌区、主题按钮同一行。
主要职责：当前工作区与入口控件；「消息」 为顶栏 右侧组最末 的独立按钮（A3-pre，可含未读角标占位）；客服席位 可见 A3-cs；九宫格功能菜单（A3） 与 账号（A2） 在其左侧。细分子区 A1 / A3-pre / A3-cs / A3 / A2 以 本文 §3 为准。
- 讨论标签：
Header-Workspace、独立 消息入口、功能下拉称Header-FeatureNav（与基线 A3-pre / A3 对齐）
B. 左侧固定列（控制台侧栏，console-nav，Fixed Left）
出现条件：已选工作区 且 当前一级模块为 消息；其它模块（技能、工作区协作、我的…）不挂载 B 区，顶栏 不出现 智能体侧栏折叠按钮。
位置：桌面端左侧固定列（left=0），窄屏在本条件满足时可通过 A1 内按钮叠层展开/收起。
主要职责：展示 与本账号相关的智能体列表（选中项影响 消息 的发送对象）。切换到其它模块 靠 顶栏 · 独立消息按钮（A3-pre） 与 功能菜单（A3）；细分结构见 本文 §3（B1 · B2）。
讨论标签：Sidebar-Agents-Rail
C. 右侧内容区（Content）
位置：页面右侧主区域；仅在出现 B 区时 左侧为 B 让出宽度（见 .console-layout--has-agent-rail）。
#### C1. 消息模块（activeModule=chat，产品对外称「消息」）
已进入工作区后的 C 区在「消息」下由两部分组成：会话与历史（C1-history）、当前会话主界面（C1-thread）；若用户选择「右侧查看」且本轮对话已有文件等结果，再出现 工作结果区（C1-results）。实现类名上以 messages-workspace 为根容器。
C1-history 仅用于智能体对话（帮助智能体、自建智能体）：同一智能体下可有多条历史会话。选中 同事与好友 / 工作区群 / 群聊 等联络对象时 不出现 C1-history，主区为与该对象的一条连续 IM 时间线（在 B 区切换联络对象，而非在 C 区选「历史会话」）。
##### C1-history（智能体会话列表，自适应三档）
视口宽度由前端监听；全局 宽窄仍按 本文 §2（小屏 / 中屏内 中小屏 \| 中大屏 / 大屏）。消息区 C1-history 在 781px 借用规范中的 中小屏 \| 中大屏 分界：600–780 为「中轨 + 抽屉」，≥781 起为「左侧会话列常驻」（含中大屏与大屏，不必等到 961px）。
| 消息区档位 | 视口宽度（CSS px） | 与规范参照 |
|---|---|---|
| 窄 | < 600 | 小屏 |
| 中 | 600～780 | 中小屏 |
| 宽 | ≥ 781 | 中大屏 ∪ 大屏 |
| 档位 | 用户可见形态 |
|---|---|
| 宽 | 左侧常驻会话列（仅当前选中智能体的历史对话）：「开启新对话」、会话按「今天 / 昨天 / 更早」分组、单条对话可删或在 ⋯ 里 导出 / 导入对话包、列表可分页加载更多。分界上可 钉住，钉住后工作结果不再自动开合该列。选中同事/群聊时 整列隐藏，主区占满宽度。 |
| 中 | 左侧窄幅图标栏（打开会话抽屉、新建对话）；会话列表收于抽屉。选中同事/群聊时不显示 该栏与抽屉。 |
| 窄 | 主区顶部轻条（打开会话抽屉、标题、新建对话）；选中同事/群聊时 仅保留标题，菜单改为打开 B 区联络列表，无「新对话」。 |
同一套会话数据结构在三档共用，仅为布局与出入口不同。
##### C1-thread（当前会话主区）
- 工作智能体：智能体名旁或下方显示当前主题（用户的主要目的，Markdown；默认一行摘要，左侧主题图标点开改原文，点摘要或右侧按钮只展开/收起）。默认不催复盘；智能体设置打开「提示复盘」后，助手判断已做成或停聊邀请时，输入区或会话菜单出现 复盘（阅读模式可藏）。确认后改为「查看复盘」。列表与收起态摘要跳过「主要目的」这类小标题，显示下面第一句真正要做成的事。
- 无消息时可 居中空状态提示；有消息后为 气泡时间线，可向上加载更早消息（分页存在时）。
- 底部：大圆角 输入卡片，支持文本、附件、
Enter发送（Shift+Enter换行）、发送中与错误提示。 - 小屏浏览器输入法：对话工作台贴当前可见区域；输入法弹出时气泡区变矮、输入栏贴在键盘上方；收起后底部不留空白，把高度还给对话。
- 流式回复以助手气泡预览呈现（与实现对齐）。
- 回复批注改进：助手气泡「批改」→ 按段展示原文，段下写批注 →「按批注改进」作为新用户消息发送，由智能体输出改写全文。
- 阅读模式（Web，html[data-reader-mode=on]）： - 入口：会话「更多」菜单、中轨/窄屏工具栏、智能体上下文条；「我的 → 偏好设置」可设默认开启（本机记住）。 - 版式：气泡改为全宽连续正文，「你 / 智能体名」作小标题；跟随浅色/深色主题的高对比配色；关闭动画。 - 减干扰：隐藏智能体侧栏、会话历史列、输入区、气泡次要操作、评分、下一步建议、工具轨迹；阅读工具条默认收起，左右边缘把手点开。 - 翻页：点左右半区、滚轮或方向键按屏翻页（非上下滚动）。 - 导航：工具条展开时可用右侧提问目录；跳转用瞬时滚动。 - 阅读条：退出、字号五档、导出为电子书（EPUB）、导出为 PDF（后端全量组装；PDF 需中文字体，可通过 MINDLINK_CHAT_EXPORT_FONT 指定 .ttf）、导出对话包（可再导入到另一只智能体）。
##### C1-results（工作结果区，可选）
- 入口：我的 → 偏好设置 →「对话内文件预览」选 右侧查看；本轮对话已有文件时，输入区才出现 预览位置 图标，点一下即可在气泡与右侧之间切换，与偏好同步。气泡内仍保留文件名、下载与全屏；完整预览改到对话右侧。气泡按钮在 右侧展示 与 收起 之间切换。
- 出现时机：当前智能体对话里已有文件等结果（含进行中的回复）。无结果时不占位，功能菜单与会话记录保持原样。
- 自动让位：结果区打开时自动收起 功能菜单（A3） 与 会话记录（C1-history），把宽度留给对话与结果。用户仍可打开会话记录或功能菜单（悬停或点击）；也可收起结果区，需要时再打开。会话记录可 钉住：钉住后出现或收起工作结果都不再自动收起或展开该列表，只保留你自己点的开合。
- 多个结果：结果区列出本会话文件；可用 上一个 / 下一个 连续翻看（到头后循环），也可点文件名跳到指定项；默认显示最新一条。新结果出现时切到最新。
- 改宽：对话气泡区与工作结果区之间可拖动调整宽度，本机记住。
- 窄屏：结果区从右侧叠在对话上，不把输入区挤没；仍可拖动改宽。
讨论标签：Content-Chat、Content-Chat-History、Content-Chat-Thread、Content-Chat-Results
未选择工作区时（localStorage 无 workspace_id）：
- B 区（智能体侧栏）不显示，C 区横向占满（见
本文 §3与.console-layout.no-workspace）。 - 当
activeModule=chat时，C 区不展示上述 消息工作台（C1-history + C1-thread），改为 帮助智能体：居中布局，含输入区与快捷话题；空态提供 创建工作区（默认「我的工作区」）、加入工作区（申请加入对话框），以及工作区协作 / 我的入口。发送时由前端将仓库根目录help/ 系统知识目录（后端 helpdocs 检索）作为上下文拼入，调用既有对话接口生成回答（无 Key 时仍为占位策略）。 - 选择或创建工作区后（通常整页重载或本地状态恢复），恢复 B 区与 C1 消息工作台；首次进入且尚无自己的工作智能体时，自动出现 开始 并打开与它的对话。
- 若从帮助页顶栏跳转到其他模块（如「工作区协作」），C 区顶部会显示返回帮助智能体入口；侧栏 B 在仍未选工作区时保持隐藏。
讨论标签：Content-Chat-NoWorkspace-Help
#### C2. 智能体市场模块（activeModule=agents）
- 当前为结构化入口页（模块卡片）
- 用于后续接入模板市场、我的智能体等功能
讨论标签：Content-Agents
#### C3. 技能中心模块（activeModule=skills）
- 展示当前技能列表
- 用于后续扩展技能安装/启停/执行入口
讨论标签：Content-Skills
#### C4. 工作区协作模块（activeModule=workspace）
- 工作区列表
- 创建工作区
- 改名/删除工作区
- 切换工作区
讨论标签：Content-Workspace
#### C4b. 智能体团队模块（activeModule=teams，/agent-teams）
- 选班子模板或全新创建岗位
- 为各岗指定智能体、发布任务开会、登记编程施工队
- 须已选工作区；旧
/workspace?section=teams转到本页
讨论标签：Content-AgentTeams
#### C5. 我的模块（activeModule=me）
- 当前登录身份说明
- 账号相关能力占位
讨论标签：Content-Me
4.3. 推荐交互讨论模板
后续评审建议用下面格式提需求，减少歧义：
- 区域：
Header-Workspace/Sidebar-Agents-Rail/Content-Chat/Content-Chat-History… - 变更类型：新增 / 调整 / 删除
- 目标：希望用户在什么场景下完成什么动作
- 验收：用户可见结果（文案、按钮、流程、空态）
示例：
- 区域：
Content-Chat - 变更类型：调整
- 目标：在发送区增加“常用提示词”快捷入口
- 验收：用户点击后自动填入输入框，不自动发送
4.4. 当前实现与需求的对齐说明（简版）
- 已对齐：
- 顶部包含工作区与账号入口等，且固定在页面顶部；消息单列顶栏按钮；本区席位或客服小组成员另列 客服 按钮（A3-cs）；其余一级模块（含非席位、非小组成员管理员的 客服工作台）为 功能菜单（A3） - 打开应用时应用名并入顶栏 A1（不另占一条等高头）；再点 应用 回桌面；插件刷新为顶栏图标；中小屏收字；平台插件 ≤960 用 ‹ + 栏目菜单 + 栏目名，嵌入时不再自画手机条 - B 区（智能体列表） 仅在 已选工作区且当前为「消息」模块时出现；顶栏智能体折叠按钮与此一致。其它模块下 C 区占满横向可用宽度（不出现 B） - 消息模块（C1）在已选工作区下为 会话区（三档自适应）+ 主线程，见上文 C1-history / C1-thread - 未选工作区时，“消息”入口进入 帮助智能体（文档源：help/ 系统知识目录（后端 helpdocs 检索）），不进入 C1 工作台 - 功能菜单「常用」：已选工作区时列在菜单顶部（知识库、数据连接等深层页，按打开次数；可钉住）；一级模块顺序不变
- 待完善：
- 智能体市场模块与后端接口联动 - “我的”模块细化为资料/安全/偏好页 - 会话区三档：<600 / 600–780 / ≥781（781 为规范内 中小屏\|中大屏 分界），与 本文 §2 控制台小节一致
4.5. 布局行为约束（用于验收）
- 头部
Header固定在顶部，不因页面滚动离开视口。 - 在满足 B 区出现条件 时，左侧
console-nav（B 区） 固定在左侧；智能体列表可独立滚动。 - 右侧
Content发生滚动时，在常见桌面布局下不影响Header；若存在 B，亦不影响 B 固定状态。 - 窄屏且在 消息 工作台：若有 B，通过顶栏按钮叠层展开/收起（与 C1-history 会话抽屉不是同一层级）。
- 小屏浏览器打开智能体对话：工作台高度跟可见视口走（含输入法弹出/收起），输入栏下方不得出现大块空白。