feat(dashboard): 会话模式设置改紧凑单选与独立示例侧栏 - #1584
Merged
Merged
Conversation
私聊会话模式、普通群会话模式、群聊 @ 策略、默认工作目录这四个设置 选项名抽象（chat-topic / new-topic / shared / oncall…），纯文本说明 要先解释「会话」「原生话题」「接管」才看得懂。改为： - DropdownMenu 支持选项第二行 hint（仅弹层内显示，选中态只显示标题） 与 preview 面板（钉在弹层底部），悬停/键盘聚焦选项即实时预览； ResizeObserver 保证图示切换高度后重新计算弹层位置 - 新增 mode-diagrams.tsx：用 DOM 画迷你飞书聊天示意图（气泡=消息、 色底板=独立 CLI 会话、话题框=原生话题、沉默标=机器人不回复）， 4 个设置共 14 种模式各一张，全部走 design token，深浅色主题自动 跟随，文案随中英文切换 - 四个目标下拉 + 后端类型/文档订阅下拉补齐一句话 hint；选项文案 口语化重写（如「关闭（新会话弹选仓库卡）」→「每次手动选仓库」）， zh/en 双语种同步 Co-Authored-By: Claude Code <noreply@anthropic.com>
下拉+悬停示意图不够直观：用户给的参考是飞书自家「群会话模式」 那种大单选卡片，卡片上直接嵌高保真聊天截图。按此推翻 v1： - 新增 ModeCardPicker：卡片式 radio group，点卡片/键盘方向键切换， 选中蓝框+浅蓝底+实心单选钮，响应式 auto-fit 210px 列宽 - mode-diagrams 重写：14 种模式各一张高保真迷你飞书截图（真人头像、 蓝气泡、「回复 XX：…」引用条、「回复话题」入口、浅蓝话题底板、 沉默虚线标）；工作目录 off 画飞书「选择工作仓库」互动卡， oncall 画群成员三头像；截图区固定飞书浅色（App 截图语义）， 卡片外壳跟随 dashboard 主题 - 回退 v1 加在共享 DropdownMenu 的 preview/onOptionPreview 机制 （卡片化后无消费者），保留后端/文档下拉的两行 hint - 卡片补图标+适用场景标签；zh/en 双语种、10 个新测试 Co-Authored-By: Claude Code <noreply@anthropic.com>
按设计反馈： - 飞书群里所有人的消息都贴左（头像+名字+气泡），群聊/群 @ 策略 共 8 张截图由右对齐改为左对齐；私聊 3 张保留飞书单聊真实布局 （自己消息靠右） - 普通群四模式重画，把四个关键语义直接画出来： 顶层连续（chat-topic 上半段无底色连续两轮问答）、 话题隔离（原生话题盒独立标签、与顶层不互通）、 话题内连续（盒内两轮追问）、 一句话开一个话题（new-topic 两条 @ 各开蓝/紫独立话题）； shared 两个话题同色虚线并同标「共享会话 S1」 - 新增独立/共享/连续标签胶囊与对应 i18n 词条（zh/en） Co-Authored-By: Claude Code <noreply@anthropic.com>
落实苹果设计师 codex 的 8 条意见： - 截图统一中性浅灰底 #f7f8fa（修复暗色主题 --m-tint 不向父继承导致 截图区透明的 bug），蓝/紫只标注上下文 A/B 归属，不再整屏染色 - 头像 SVG 渐变 ID 改 useId() 唯一化（修复多卡同页时首个定义被隐藏 导致头像底色丢失） - 聊天根容器显式 flex column gap，平铺消息与话题盒间距生效 - 上下文标注去掉胶囊外观，改为 11px 普通文字（群聊·上下文 A / 话题·上下文 B / 话题 1·上下文 A / 两个话题·共用上下文 A）； 话题盒去虚线（虚线像未完成），共享模式加跨两盒括线；场景标签每卡最多 2 个 - 普通群固定两列、<620px 一列；名称+单选钮移到卡片顶部固定位置， 预览顶对齐、同排等高 - 正文 12px、名字/引用 10px、气泡 padding 5/8、圆角 6-8；引用竖线 只盖摘要行；「回复话题」换固定 SVG；修 .bd-mock-bubble-g 左圆角被 通用规则覆盖 - 共享图第二话题改问「刚才失败的是哪两个」→「还是上个话题的 A、B」， 用内容证明跨话题记忆；追问去掉 dim 且统一带 @ - 私聊骨架：自己消息整行靠右、省略自己头像/名字，不再左右分裂 Co-Authored-By: Claude Code <noreply@anthropic.com>
落实设计评审第二轮 5 条： - 卡片网格改 align-items:stretch，预览区 flex:1 吸收余量， 同排外框等高、说明起点对齐（单列自然高度） - 列数断点从 @media 视口改为 @container 内容容器（外层新增 .bd-mode-cards-wrap 作 inline-size 查询容器），桌面带侧栏导致 内容区变窄时也能正确降为一列；普通群仍最多两列 - 私聊「建专属群」截图新增 @container 360px 断点：宽卡横向 DM→两群，窄卡纵向 DM→↓→两群，群卡间 8px gap，不再挤成每字一行 - 选仓库卡按钮 flex-wrap，英文长按钮窄卡可分行不再越界； ignored 说明允许换行（去 nowrap/胶囊，改圆角矩形） - 共享图第一话题先交代「A、B 两个用例失败」，第二话题引用 「还是上个话题的 A、B」的跨话题记忆证据才闭合（zh/en） Co-Authored-By: Claude Code <noreply@anthropic.com>
按交互定稿（苹果设计师）重构信息结构，解决一页放不下、反复上下滑、 标题被大图淹没的问题： - 主页每组只保留「单选钮+名称(15px/650)+一句机制说明(12px/常规)」， 去掉重复图标与场景胶囊；私聊 3 列、普通群 2×2、回复条件 4 列， 整块约 560px 一屏比完；保留独立的轻量「默认」标记 - 每组一个「查看示例」入口：桌面右侧 460px 浮层、窄屏(≤720px) 底部抽屉(90dvh，头部与切换区常驻、长图内容区滚动)；侧栏一次只渲染 一张图，顶部按钮只切 previewValue、绝不触发保存回调，真实配置标 「·当前」，Esc 关闭并把焦点还给入口 - 列数断点用外层 inline-size 查询容器（≤620px 切窄列：私聊/普通群 单列、回复条件两列），元素不再查询自身容器 - portal 浮层带页面 scope class，样式在 body 下仍生效； 14 张高保真截图与场景标签全部移入侧栏 - 工作目录模式同步改为紧凑单选+示例侧栏；zh/en 词条；11 个新测试 Co-Authored-By: Claude Code <noreply@anthropic.com>
- 区块/分组/选项标题恢复全站标准字号（区块沿用全局 15px section title、子分组 13px、选项名 13px/700），去掉 20/16/15 的额外放大， 与其他设置页一致，不再「傻大」 - 选项名硬编码深色 #16181f 改 var(--text)，修复暗色模式不可读 - 修复移动端「专属群」示例仍横排：@container 360px 纵排规则之前 挂在容器元素自身上（元素不能查询自身容器），改为外层 .bd-mock 作容器、内层 .bd-mock-dm-split 响应；390px 实测正确纵排 DM→↓→两群 - 区块标题改回 .bd-section 直接子级，保留全局圆点与间距 - 侧栏标题 17→16；新增对应回归断言 Co-Authored-By: Claude Code <noreply@anthropic.com>
收口设计评审 14/16/18/19： - 14 焦点陷阱：侧栏 aria-modal=true，Tab/Shift+Tab 在关闭钮与 模式 tabs 间循环，不再穿到背景主页；Esc 关闭焦点回入口 - 16 窄屏贴底：@media 里根节点选择器后代写法（layer 元素自身 同时带 bot-defaults-page，后代选择器永不命中）改为 .bd-example-layer.bot-defaults-page；390px 实测 top=84/底贴 844 - 18 关闭钮 padding:0、SVG 18px flex:none（实测之前被压成 4×18）； 选项行显式 justify-content:flex-start - 19 roving tabindex + 方向键：示例 tabs 仅查看项 tabIndex=0， 左右键移焦点并切预览、上下只移焦点；主页 radio 组同样 roving tabindex，四向方向键循环移动并选择 - 17 个组件测试（新增焦点陷阱、tab/radio roving、贴底选择器、 关闭盒模型等断言），531 项相关回归通过 Co-Authored-By: Claude Code <noreply@anthropic.com>
- 焦点穿透修复：Tab 候选从 CSS :not([tabindex="-1"]) 改为运行时 el.tabIndex>=0 过滤——roving 组里非查看 tab 是 -1，旧选择器 仍把它们算进可 Tab 序列，导致最后可 Tab 项判断错误、正向 Tab 穿出抽屉到背景；正向/反向在焦点不在面板内时都兜底循环 - 背景隔离：打开时 body overflow:hidden、dashboard main 标 inert +aria-hidden，从 DOM 层阻断 Tab 与交互（aria-modal 本身不隔离）， 关闭恢复 - 焦点不被父刷新抢走：onClose 走 ref、焦点管理 effect 只在挂载/ 卸载执行一次（依赖稳定 ref），切预览触发 rerender 不再重播 「回入口→聚焦 X」 - 补 tab/tabpanel 语义：稳定 useId，tab aria-controls 指向 panel， panel role=tabpanel + aria-labelledby - 新增真实浏览器 e2e（需 BD_MODE_HARNESS_URL）：多轮正/反 Tab 不泄漏、切预览焦点不跳、抽屉期间背景 radio 保存调用为 0、 滚动/inert 锁定与恢复；无 URL 自动跳过 - 组件测试 21 项 + 535 相关回归通过 Co-Authored-By: Claude Code <noreply@anthropic.com>
收口焦点陷阱最后一个边界（方向键把焦点移到 tabIndex=-1 的 tab 后按 Tab 会穿到顶栏）： - Tab 处理在首尾判断前先判「active 不在可 Tab 序列」（焦点在面板内 但落在 -1 项也命中），统一 preventDefault 并按方向回到 last/first - inert 范围从 main 扩到 body 的非 portal 直接子元素，覆盖顶栏/侧栏 等 main 外框架；记录并恢复原有 inert/aria-hidden 属性 - 浏览器 e2e 增至 3 项：main 外品牌导航在抽屉期 inert 且关闭恢复、 ↑ 到 -1 项后 Tab 及多轮正反 Tab 不泄漏、方向键切遍预览主页 radio 真实选中与点击保存均为 0；组件测试 21 项 Co-Authored-By: Claude Code <noreply@anthropic.com>
deepcoldy
requested review from
47seek,
LucasIcarus,
xiaoxueSunn and
xiongz-c
as code owners
September 26, 2026 01:57
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
改了什么
Bot 配置 → 会话模式（私聊 / 普通群 / 群聊 @ 策略）与默认工作目录模式，原本是「技术模式名 + 一句话说明」的下拉，理解成本高。改为紧凑单选项 + 独立示例侧栏：
可访问性（键盘/屏幕阅读器）
验证
tsc通过；21 个组件测试（紧凑单选、预览不触发保存、Esc、roving tabindex、inert、非可 Tab 项兜底、tab/tabpanel 关联等）test/e2e-browser/dashboard-mode-drawer-focus.e2e.ts（无BD_MODE_HARNESS_URL自动跳过）：main 外导航 inert 与恢复、方向键移到 -1 项后 Tab 及多轮正反 Tab 不泄漏、方向键切遍预览主页真实选中与保存回调恒为 0 —— 本地对构建页 3/3 通过影响面
src/dashboard/web/下 mode-diagrams/bot-defaults-page/i18n/style.css；纯前端展示与配置选择交互，不动后端。下拉组件DropdownMenu仅保留后端类型/文档订阅等其它设置继续使用，其两行 hint 能力保留。