昨天对 Mcode —— 我正在做的一个开源的桌面端 AI 编程 IDE(基于 Claude Agent SDK 构建的 Claude Code 客户端)——中间区域做了一波小重构。
改动不大,但体感提升肉眼可见。这篇既是记录,也想借机聊聊一个容易被忽略的产品直觉:有些”只是挪了个位置”的变化,比加一堆新功能更打动人。
起因:聊天区一直有两种展示方式
Mcode 的中间聊天区,主打两种呈现方式:
- Tab 多会话模式 —— 同时开好几个会话,每个一个 tab,来回切;
- 单会话模式 —— 中间就一个会话,干干净净。
两种模式各有人爱:多会话适合那种「一边让 AI 修 bug、一边问另一个需求、一边回头盯着代码」的多线程工作流;单会话适合专注干一件事的时候。
问题,出在多 tab 模式下的编辑器。
痛点:会话 tab 和文件 tab 各占一条栏,谁都挤
旧的多 tab 布局里,中间区域是分栏的:
- 上面一条会话 tab 栏(会话 A / 会话 B / 会话 C);
- 下面编辑器的文件 tab 栏(file1.ts / file2.ts / …);
- 两条 tab 栏各自管辖一片区域,聊天和编辑器左右对半。
这个”井水不犯河水”的设计,其实很拧巴:
当你切到文件、想认真看代码时,编辑器只占了中间偏右的一部分宽度,左边整列都被聊天占着。长方法、diff,全被挤成一条缝。—— 看文件,区域太小了。
反过来,读 AI 输出的时候,编辑器那半边又空着,空间纯浪费。
两种内容永远在抢同一块屏幕,谁都不舒服。 这条设计长期存在,直到昨天我决定动它。
重构:一条栏,谁激活谁占满
思路说穿了很简单,但落到交互细节上有不少坑。
新设计把会话 tab、文件 tab、以及每个会话的计划(Plan)伪 tab,全部混排进同一条 tab 栏。视觉上不做分组线,靠图标天然区分:
- 💬 带提供商图标的是会话 tab;
- 📄 带文件类型图标的是文件 tab;
- 📋 是计划 tab。
真正的关键变化,是从”分栏”改成”焦点切换” :
- 点会话 tab → 聊天区全宽铺开;
- 点文件 / 计划 tab → 编辑器全宽铺开。
用了一个 centerTabFocus 状态("chat" | "editor")来追踪”现在谁在中间独占地盘”。无论哪个视图被激活,它都拿走整条中间宽度。
【此处配图(可选):点文件 tab 编辑器满屏,点会话 tab 聊天满屏,两张对照】
交互细节:别让切 tab 打断节奏
合并一条栏后,最怕的是”误操作把焦点抢走,打乱手头节奏”。我们重点处理了几类边界:
- 只在关闭的是”当前激活”的 tab 时才移动焦点 —— 你顺手关一个后台会话 tab,编辑器纹丝不动,不会被突然拉走;
- 关掉最后一个会话 tab 时,如果还有打开的文件,焦点自动落到编辑器,而不是空屏;
- 交互模型整体对齐 VS Code / 浏览器:拖动排序、溢出时滚轮 + 折叠菜单、中键关闭;
- 而且不砍能力:文件 tab 保留右键菜单和未保存的脏点;会话 tab 保留运行中的转圈和未读红点。
一句话:合并栏没有损失任何一类 tab 原有的能力,只是把它们从”上下分栏”收成了”一条栏 + 焦点独占”。
结果:两边都舒服了
代码量真不大 —— 核心就是一个 UnifiedTabsBar 组件加一个焦点状态。但体感是质的提升:
- ✅ 看文件舒服了 —— 编辑器终于能占满整块中间宽度,长代码和 diff 不再挤在右半边;
- ✅ 聊天展示也舒服了 —— 读 AI 输出时聊天区同样全宽,代码块、表格、图片都铺得开;
- ✅ 多会话 + 多文件不再打架 —— 一条栏就能在”和 AI 对话”和”看代码”之间无缝横跳。
单会话模式则保留原来的分栏布局,两类偏好互不打扰。
一点小感想
这类”看起来只是挪了个位置”的重构,往往比加新功能更难、也更值得。
它不改变你的功能清单,但每天都在影响你摸产品的手感。把”会话”和”文件”从两个独立的心智模型,重新收拢成”中间区域一堆 tab,我当前盯着哪个,哪个就满屏”——这个抽象其实更接近人的真实工作状态:
你同一时间只盯一个东西,但随时会在”和 AI 聊”和”看代码”之间跳。
好的交互,往往就是帮你省掉这些”想法 → 视线 → 手”之间的一次次折返。
关于 Mcode
Mcode 是一个免费、开源的桌面端 AI 编程 IDE。它不重新发明 agent,而是基于官方的 Claude Agent SDK / Pi Coding Agent SDK,把 coding agent 打磨成完整的桌面产品:多会话管理、逐 token 实时流式输出、可视化工具审批、计划模式,再加上文件树、Monaco 编辑器(30+ 语言)、git、终端、内嵌浏览器、LSP 语言服务器等全套 IDE 能力,还带一个手机端 companion 可以远程遥控。
如果你也喜欢这种”桌面端打磨 coding agent”的方向,欢迎:
- ⭐ 去 GitHub 点个 star,支持一下这个开源项目 —— 你的 star 是我持续打磨最大的动力;
- 🐛 遇到问题或有好点子,开个 issue 聊聊;
- 🛠 也欢迎提 PR,一起把它做得更好。
GitHub: github.com/huangbh2020…
如果觉得有用,顺手点个 star 就是对我最好的鼓励 🙏
