企业官网建设流程全解析

最近在折腾 Cursor 的界面时，一个很常见的诉求被反复提起来：把工具活动栏改成垂直形式。Cursor 是目前很多前端和全栈开发者日常依赖的 AI 编程编辑器，界面基本继承了 VSCode 的布局体系，但默认情况下活动栏会以竖排图标的形式贴在窗口左侧，一旦你在设置里，或者被某个 UI 类扩展调整过位置，它就可能跑到顶部变成横排，用起来总觉得哪里不对。这篇文章我按照自己的实际操作，把活动栏切回垂直形态的方法、背后的布局逻辑，以及连带着的界面优化方案一并整理出来，适合正在用 Cursor、VSCode 类编辑器，又希望把工具区整理得干净利落的人。说白了两件事：一是让活动栏恢复或保持竖排；二是顺手把和活动栏相关的其他界面配置一起讲透。

1. 先搞清楚 Cursor 的工具活动栏到底是什么

1.1 活动栏的角色与位置

Cursor 里的“工具活动栏”（Activity Bar），就是编辑器窗口左右两侧的那一条竖向图标区。它和文件资源管理器、搜索、源代码管理、扩展、AI 对话这些功能入口直接挂钩。在 Cursor 里，你还会看到 Ask AI、Composer 之类的 AI 相关图标，这是 Cursor 区别于普通 VSCode 的地方。活动栏的意义在于，你不需要记大量快捷键，点一下图标就能切到对应面板。

默认情况下，活动栏是垂直排列的，也就是图标从上往下竖着放，位置在窗口左侧。这种形态是经典 IDE 布局，从早年 Eclipse、Visual Studio 一路传承下来。但 Cursor 版本迭代比较快，界面选项经常微调，很多人在更新后突然发现活动栏跑到了顶部横排，或者因为误操作、主题扩展改了配置，一开机界面就“大变样”。

1.2 垂直 vs 水平，到底哪种更顺手

先别急着照抄网上设置，理解一下垂直和水平两种形态的差异，你才知道自己要什么。

垂直活动栏的优点很明确：它把图标放在侧边，不占纵向空间。现在的显示器基本都是宽屏，横向空间宽裕，纵向却相对紧张。代码编辑器需要的是尽可能多显示代码行，如果活动栏横着占用顶部一条高度，等于每屏少显示几行代码。垂直形态把图标塞进侧边，代码区高度几乎没有损失。

水平活动栏则适合那些更习惯“菜单栏式”操作的人。图标横排在顶部，鼠标移动路径更短，视觉上更像浏览器工具栏。但代价是顶部空间被占用，而且当你打开多个面板时，状态栏和编辑区之间会显得拥挤。

我自己长期使用下来，垂直活动栏在 Cursor 里是更合理的选择，因为 Cursor 的 AI 对话面板、文件搜索、源码管理都需要频繁点击，竖排图标方便鼠标从左侧边缘快速滑动定位，也不会干扰阅读代码的视线。

2. 把活动栏改成垂直形式的实操步骤

2.1 方法一：用命令面板最快搞定

这是我最推荐的方式，适用于绝大多数情况。不管你的活动栏现在是水平横排、跑到了顶部，还是整体布局乱了，命令面板都能直接帮你拉回来。

在 Cursor 里按Ctrl+Shift+P（Mac 上是Cmd+Shift+P）打开命令面板，输入Activity Bar，你会看到几个相关命令：

• View: Move Activity Bar to Left：把活动栏移到左侧
• View: Move Activity Bar to Right：把活动栏移到右侧
• View: Toggle Activity Bar Visibility：切换活动栏显示/隐藏

这里有个关键点：只要把活动栏 Move 到 Left 或 Right，它就会恢复成垂直形式。因为“垂直”的本质就是图标沿着窗口侧边竖排。如果你当前活动栏在顶部横排，执行Move Activity Bar to Left后，它会立刻跳到左侧变成竖排。

这个操作是即时生效的，不需要重启 Cursor。你可能要问了：“我想改的是垂直形式，为什么不是直接有Move Activity Bar to Vertical这种命令？”因为 Cursor 和 VSCode 的布局逻辑里，活动栏的形状是由位置决定的：在左右侧边就是垂直，在顶部或底部就是水平。所以设置垂直形式，就等于设置它停靠在左右侧边。

2.2 方法二：通过设置项固定，防止下次又变

命令面板改完虽然方便，但如果你是因为某个插件、主题或同步配置导致活动栏反复横跳，建议直接写进设置里，彻底固定。

按Ctrl+,打开 Cursor 设置，点击右上角的“打开设置(JSON)”图标（一个花括号样式的按钮），然后在配置文件中加入或修改以下键：

{ "workbench.activityBar.visible": true, "workbench.sideBar.location": "left" }

• workbench.activityBar.visible控制活动栏是否显示，改为false会直接隐藏活动栏。
• workbench.sideBar.location控制侧边栏（包含活动栏）的位置，设为left就是左侧，设为right就是右侧。

有些 Cursor 版本还支持workbench.activityBar.location字段，可选值包括left、right、top、bottom。如果你用的是较新的 Cursor，可以在设置 JSON 里加：

{ "workbench.activityBar.location": "left" }

保存后 Cursor 会刷新界面。注意，如果你在设置界面里找不到这个键，优先用命令面板，因为不同 Cursor 版本对这个键的支持程度不一样，强行写入不支持的键虽然不会报错，但也不会生效。

2.3 方法三：菜单栏路径也能操作

不习惯快捷键的人，可以直接走菜单：

打开顶部菜单View > Appearance，里面会有几个和 Activity Bar 相关的选项：

• Move Activity Bar to Left
• Move Activity Bar to Right
• Toggle Activity Bar Visibility

点击对应选项就能切换。这个菜单在 Cursor 里和 VSCode 保持了一致，只是 Cursor 的菜单文字可能随版本有细微变化，如果你看到英文菜单，按我上面命令面板里的英文名称去找，也能对上。

2.4 不同 Cursor 版本的操作差异

Cursor 的版本更新相当频繁，界面文案和设置项位置一直在变。如果你是老版本用户，可能发现菜单路径不太一样；如果你是刚下载的新版本，又可能在设置里找不到某些选项。

我的经验是：不要死记菜单路径，记命令面板关键词最稳妥。无论哪个版本，Ctrl+Shift+P永远是通用的。你只需要输入Move Activity Bar，命令就出来了。这个方法同样适用于 VSCode，甚至其他基于 VSCode 的编辑器。

另一个版本差异体现在“活动栏跑到右边”的情况。有些主题或布局配置会把活动栏带到右侧，同时侧边栏还在左侧，看起来会有点精神分裂。这时候用Move Activity Bar to Left单独把活动栏拉回左侧即可，或者把workbench.sideBar.location设置成left让侧边栏和活动栏统一。

3. 垂直活动栏 + 布局优化，把 Cursor 调到最顺手

3.1 侧边栏也一起调整，布局才协调

活动栏变成垂直形式后，很多人会发现侧边栏（就是显示文件树、搜索结果的区域）的位置也需要一起改，否则整体不协调。比如活动栏在左侧、侧边栏却在右侧，操作起来就非常绕。

调整侧边栏位置同样可以用命令面板：

• View: Move Side Bar Right：把侧边栏移到右侧
• View: Move Side Bar Left：把侧边栏移到左侧

我个人的习惯是活动栏和侧边栏都放左侧，这样文件树和功能图标集中在一块，鼠标不用来回跑。如果你把侧边栏移到右侧，活动栏也会自动跟着移动到右侧，保持两者相对位置。

设置 JSON 里对应的键是：

{ "workbench.sideBar.location": "right" }

这里有个容易忽略的点：workbench.sideBar.location改的是“侧边栏区域”的位置，活动栏作为侧边栏的一部分会跟随移动，但它本身还可以通过Move Activity Bar to Left单独设置，两个命令偶尔会打架。遇到布局看起来不对的情况，先检查这两项是否一致。

3.2 活动栏图标太多？精简和显示标签

活动栏垂直化之后，图标如果太多，左侧会挤成一排。Cursor 默认活动栏里包含资源管理器、搜索、源代码管理、扩展、Ask AI、Composer 等图标，有些还有更多。这时候可以做两件事：

第一，隐藏不常用的图标。VSCode 和 Cursor 的活动栏图标多数来自插件，每个插件可以在 package.json 里声明"activityBar"相关配置，但普通用户不需要去改插件代码。更简单的办法是：右键活动栏空白区域，在弹出的菜单里取消勾选不需要的功能图标。有些插件自带的图标是“强制显示”的，这种情况只能在插件的设置里找到Show ... in Activity Bar之类的选项关闭。

第二，让垂直活动栏显示文字标签。很多人的垂直活动栏只有一排小图标，鼠标悬停才知道每个图标的意思。如果你刚上手 Cursor，不熟悉图标含义，可以在设置 JSON 里加：

{ "workbench.activityBar.iconSize": "small" }

不过这个只调整图标大小。真正显示文字标签的方式是右键活动栏，勾选 “Show Labels”。加了标签后，活动栏会变宽一些，但新手识别度会高很多。我建议用熟之后就关掉标签，换成纯图标，节省横向空间。

3.3 把 AI 对话面板和垂直活动栏结合起来

垂直活动栏在 Cursor 里最大的优势，是给 AI 功能提供了一个稳定入口。Cursor 的 Ask AI 和 Composer 图标默认就在活动栏上，点开后对话面板会出现在侧边或弹窗中。

如果你希望 AI 面板出现在右侧，而活动栏在左侧，可以在 Cursor 的设置里调整 Chat 面板的停靠位置。一般打开 Chat 面板后，标题栏附近会有一个布局切换按钮，可以选择“击出侧边面板”“临时打开”“作为选项卡打开”等模式。

我个人试过的组合是：活动栏和文件树在左侧，Ask AI 对话面板固定在右侧。这样左边是代码项目结构，右边是 AI 对话，中间是编辑器。垂直活动栏在左侧提供快捷切换，右侧 AI 面板则保持随时可用，整个工作流非常顺。相比之下，如果活动栏横在顶部，再叠加 AI 对话面板，顶部的空间就完全不够用了。

另外，越来越多的用户在 Cursor 里配置自定义模型，比如通过 OpenAI 兼容接口接入 DeepSeek。这类配置一般都在Settings > Models里完成，填写 API Key 和 Base URL 即可，和活动栏本身没有直接关系。但 AI 功能的使用入口仍然依赖活动栏上的 Chat/Composer 图标，所以保持活动栏垂直、可见且位置顺手，对高频使用 AI 功能的人来说很关键。

3.4 中文界面：顺手把 Cursor 改成中文

聊到 Cursor 界面配置，中文设置是绕不开的话题。很多用户装了 Cursor 后发现界面是英文，看着吃力。垂直活动栏怎么调都无所谓，但界面文字如果是中文，图标和菜单的识别度会好很多。

Cursor 官方支持通过设置修改界面语言。按Ctrl+,打开设置，在搜索框输入locale，找到Locale选项，把它改成zh-cn，然后重启 Cursor。如果设置界面里找不到locale选项，可以在设置 JSON 里直接加：

{ "locale": "zh-cn" }

保存后重启即可。重启后你会发现菜单、右键菜单、部分内置面板都变成了中文，上面提到的View > Appearance > Move Activity Bar to Left这类路径，也跟着变成中文菜单，找起来更容易。

如果locale设置不生效，检查一下是不是安装了什么汉化插件和官方语言包冲突了。我遇到过安装“中文语言包”扩展后，反而把界面搞出半中半英的情况，最后卸载扩展，只用官方locale设置，反而干净了。

4. 活动栏相关常见问题排查与速查表

4.1 活动栏突然不见了

活动栏消失，大多数情况是误触了隐藏快捷键。在 Cursor 里，Ctrl+Shift+P搜Toggle Activity Bar Visibility可以恢复；菜单路径是View > Appearance > Toggle Activity Bar。

还有一种是插件导致的隐藏。如果你装了一些“极简界面”或“自动隐藏侧栏”的扩展，它们会把活动栏强制隐藏，等鼠标移到边缘才弹出。这种情况需要去插件的设置里关闭自动隐藏，或者直接禁用相关插件。

另外，检查一下设置 JSON 里有没有"workbench.activityBar.visible": false，有的话改成true，保存重启。

4.2 设置了半天没生效，怎么回事

先说结论：八成是设置写错层级了。Cursor 的设置分为用户设置和工作区设置，如果你的工作区里有一个.vscode/settings.json，它的优先级高于用户设置，里面如果写了"workbench.activityBar.visible": false，你改用户设置是没用的。

解决办法：按Ctrl+,打开设置后，切换到“工作区”选项卡看看，或者直接打开当前项目的.vscode/settings.json检查。我建议初学阶段只改用户设置，避免项目之间的配置互相干扰。

另一个常见坑是：设置 JSON 里写了不存在的键，被 Cursor 忽略了。比如你写"workbench.activityBar.location": "right"，但当前版本不支持，界面就不会按你想象的变化。这时候优先用命令面板验证，命令面板能搜到并执行成功，说明这个功能在版本里存在；搜不到，就说明版本不支持。

4.3 活动栏图标重叠、文字显示混乱

这种情况主要发生在大屏缩放比例较高，或者字体缩放设置不合理的时候。图标重叠通常不是布局问题，而是 UI 渲染问题。解决办法：

• 按Ctrl+Shift+P，执行Developer: Reload Window（开发者：重新加载窗口）。这个命令会重载界面，不丢失当前打开的文件和未保存内容，活动栏经常靠它治好各种显示异常。
• 在设置里检查window.zoomLevel，如果改得过大，活动栏图标会被拉伸或压缩，把缩放级别改回 0 附近再试试。
• 如果问题仍然存在，考虑是不是第三方主题不兼容。有的主题会自定义活动栏样式，导致图标间距异常，切换到 Cursor 默认主题后观察是否恢复正常。

4.4 活动栏相关配置速查表

5. 我的实际使用心得与建议

折腾完活动栏之后，我慢慢形成了一套比较固定的 Cursor 界面配置：活动栏固定在左侧，垂直显示，只保留资源管理器、搜索、源代码管理、Ask AI 这几个图标；侧边栏也在左侧，默认展开文件树；AI 对话面板固定在右侧；界面语言改成中文。

这套布局我用了挺长时间，最大的感受是：垂直活动栏确实省心。顶部留给编辑器标签页，底部留给状态栏，左右两侧承担导航和 AI 交互，中间是一大块代码区域。整个编辑视野非常开阔，代码行数展示得比横排活动栏时明显更多。

最后再分享一个小技巧：活动栏垂直化之后，你可以用快捷键Ctrl+B快速隐藏整个侧边栏，需要文件树或 AI 面板时再按一下呼出。这个操作配合垂直活动栏，能让你在“专注写代码”和“快速切换工具”之间无缝切换。对 Cursor 这种需要不断和 AI 对话调整代码的场景来说，这个组合是真的能提升效率的，建议你试试看。