不知道大家有没有这种体验:让Copilot Agent一次性改一堆文件,界面直接铺满一大堆Diff块。想重点看某一处改动,只能去点角落小小的折叠箭头,按钮又小又难命中,来回切换非常折磨。
现在这个新交互终于来了!
Agent会话里的多文件Diff面板迎来UI与交互大改版,不再局限于小箭头,直接点击Diff条目整个标题区域,就能展开/折叠这份文件的代码变更,
键盘操作也给你安排上了,enter回车表示打开、space空格表示折叠起来,对键盘流开发者、无障碍用户都更友好。
交互与视觉双重优化
之前只能点折叠小三角,点击区域极小,经常点错位置误触发其他操作。新版把整个标题栏变成可点击区域,同时做了智能判断:如果你点击标题上的按钮本身,不会误触发折叠,不用担心点“接受修改”的时候意外收起Diff。
视觉层面同步翻新:专门为Agent会话场景定制了样式,调整间距、hover悬浮效果、按钮显隐逻辑,Diff标题、状态标记、标签页的风格和Agent工作台整体UI融为一体,不再有组件割裂、风格不搭的违和感。同时补上ARIA语义标签,屏幕阅读器也能识别折叠状态。
简单一句话总结:一次性看AI批量修改多文件时,你可以快速收起暂时不用关心的Diff,界面瞬间清爽,专注阅读目标文件改动。
有网友表示:早就想要这个功能!一次改5个文件,之前要点5次小箭头,眼睛都快瞎了,点标题折叠太人性化了。
也有网友说:键盘党狂喜,空格直接收放Diff,手不用离开键盘摸鼠标。
这个优化深得人心,但是这次样式一开始只针对Agent会话单独写CSS。因此有开发者提了疑问:组件最好不要根据所在页面单独写样式,这样会增加后续维护成本,不利于组件复用。大家也在讨论,未来要不要把这套好用交互下沉到VS Code主编辑器,让普通Diff面板也用上点击标题折叠能力。
目前这个交互先落地Agent会话场景。毕竟Agent最常一次性输出大量文件变更,也是最需要快速折叠、筛选Diff的场景。