美化控制台 v1.2.0

🎨 美化控制台 v1.2.0

VS Code 一站式可视化美化面板。字体、布局、编辑器、动画、多区域背景图、圆角、主题，全部在一个图形面板里点选调节，无需手写 JSON。

本版重点

修复圆角滑块失效 —— --r 变量此前定义了但没有任何 CSS 规则引用它，拖滑块看不到任何变化。已安装的用户升级后会自动补齐圆角规则，你调过的圆角值不会被重置。

导入配置的安全加固 —— 这是 v1.2.0 最实质的变化。从别人那儿导入配置文件时，图片路径现在会被严格校验：

• 指向 /dev/zero 这类设备节点的路径会被拒绝（此前 readFileSync 会无限读取，直接拖垮扩展宿主）
• 图片内容必须真的像图片（魔数嗅探）。此前任意可读文件（如 ~/.ssh/id_rsa）都能被当背景图 base64 内嵌进样式
• SVG 判定锚定文件开头，含 <svg 字样的笔记、日志、源码不再能蒙混过关
• customCss 字段有 1MB 上限，webview 收窄可加载范围

状态与边界修正 —— 全窗口/仅代码区模式切换后状态不再分叉，这两种模式的背景图现在会被正确导出与恢复；面板选图不再覆盖区域里已有的同名图；圆角导入上限与滑块量程对齐；面板标题显示真实版本号而非内部序号。

安全说明

导入来源不明的配置文件等于让对方影响你的界面。扩展已做多项校验，但配置里的 customCss 字段仍会原样注入界面——导入陌生配置前建议先用编辑器看一眼里面的 customCss 内容。详见 SECURITY.md。

安装

1. 下载 beautify-console-1.2.0.vsix
2. VS Code Ctrl+Shift+P → Extensions: Install from VSIX...，选中该文件
3. 同意安装依赖（Custom UI Style 与两个 JetBrains 主题扩展，会自动安装）
4. 完全重启 VS Code（macOS 是 Command + Q，不是关窗口；Windows 结束所有 Code.exe）
5. Ctrl+Shift+P → 美化: 打开控制台

样式改动生效必须完全重启，Reload Window 不刷新样式缓存。

完整变更

完整清单见 CHANGELOG.md，参与方式见 CONTRIBUTING.md。

Full Changelog: v1.1.0...v1.2.0

美化控制台 v1.1.0 — 多区域背景 / 轮播 / 自定义 CSS / 配置导入导出

README 长期声称的四项功能终于真的存在了，并修掉了对这批实现做对抗性 review 后发现的 17 个缺陷。

✨ 新增

多区域背景 —— 编辑器 / 侧栏 / 面板各自独立的图片、不透明度、混合模式。选择器逐条对照 VS Code 1.131 实机的 workbench 样式表核对。

多图轮播 —— 某区域放 2 张以上图片即自动轮播，淡入淡出、每张停留时长可调。纯 CSS 实现，不依赖后台定时器：background-image 是离散属性，把换图放在 opacity: 0 那一帧，换图动作就看不见，单个伪元素即可交叉淡入淡出。真实浏览器实测 210 次采样、4 次换图，换图时刻不透明度最高 0.0246（上限 0.22 的 11%），无硬切。系统开启「减少动效」时停在第一张。

自定义 CSS —— 独立的 cus-custom.css，本插件只创建、永不覆盖，注入顺序排最后使用户规则在同优先级下胜出。配 Cmd/Ctrl+Alt+Shift+F12 一键关闭：CSS 只能破坏渲染、破坏不了 JS，键绑定不依赖界面可见，所以界面全黑时依然有效 —— 而命令面板本身可能已被一起藏掉。

配置导入导出 —— 整套配置存为单个 JSON（设置项 + 圆角变量 + 状态文件）。图片按路径引用而非内嵌，否则文件大到无法分享也无法手改。导入逐项校验。

🚀 图片不再内嵌 base64

workbench 文档自身就从 vscode-file://vscode-app 加载，所以 CSP 的 img-src 'self' 覆盖该 origin；而 Electron 的协议校验是「路径在白名单目录下或扩展名在白名单内」，后者让磁盘任意位置的图片都能直接引用 —— 面板选图过滤器提供的格式全部命中。

12 张 2MB 图：内嵌 33MB CSS → 引用约 1KB。 白名单外的格式仍走 base64，面板也留了强制内嵌开关。

这一结论来自阅读 Electron 与 Custom UI Style 源码，未在运行中的 VS Code 里实测看到图片渲染。若背景不显示，把「图片引用方式」切到「内嵌 base64」即可，那条路径是先前验证过的。

🔒 安全

图片扩展名可注入 CSS。 扩展名被拼进 data:image/<ext>，而清洗只处理了文件名主干。名为 a.x");}body{display:none} 的图片产出：

background-image: url("data:image/a");}body{display:none};base64,...")

双引号闭合字符串、) 闭合 url()、;} 结束规则，随后 body{display:none} 是一条全新规则，整个界面消失。两位独立 reviewer 各自发现。现在扩展名只认白名单，mime 改为查表 —— 后者独立于前者，因为导入的配置可以指向从未经过清洗的既有文件。

区域名 __proto__ 曾能污染 Object.prototype，现走白名单校验。

🐛 修复

编辑器区透明化规则波及整个界面。 那条 .monaco-editor 选择器没有作用域限定，而出货样式表里有 160 条规则给它的后代设背景、全都不带 !important —— 只开编辑器背景就会抹平 peek view、notebook 单元格、输出面板、源代码管理提交框。notebook diff 丢掉的是红绿语义色，那是信息不是装饰。这些规则本就不必要：覆盖层已经画在文字之上，本仓库原有的 codeOnlyCss 用同一容器、零透明化规则，且注释注明「经真实 DOM 验证有效」。

改动画档位会抹掉多区域背景。 非 codeOnly 一律被折成 off。实测 CSS 从 3347 字节掉到 1461，而状态文件仍记着 regions。

数据丢失四处： 连续导入把用户手写 CSS 彻底冲掉（固定 .bak 被下一次覆盖，现改带时间戳并在同毫秒补序号）；状态文件损坏被当作不存在、静默替换为默认值且下次操作写回磁盘（现移开保留为 .corrupt 并告知）；首次安装标记写在 reload 之后，而 reload 三平台都是退出重开，标记写不成就每次启动重跑默认值、持续覆盖用户改动；同名不同图在 backgrounds/ 里互相覆盖，破坏了「复制一份所以原图丢了也不怕」这个承诺本身。

静默失败两处： writeDynamicCss 返回 false 而 11 个调用点全不检查 —— 文件只读时状态写成了、CSS 没写成、面板照常报成功，重启后图还在且此后永久如此；Windows 导出的配置在 POSIX 上被判「不合法」而非「本机不存在」（path.isAbsolute 绑在宿主平台）。

内嵌模式无体积上限： 4 张 2MB 图产出 37MB CSS，三区域各 4 张达 112MB，而该文件每次开窗都要被解析。超 2MB 改为退回直接引用并告知跳过了哪几张。

其余： 多区域下不透明度滑块写的是全窗口键（无效）且量程仍是 0.7–1.0（一拖就把区域推到 0.7 以上糊住代码）；恢复默认没清状态文件；applyBg 跨 await 持有过期的动画档位；activate 不等 bootstrap 导致首次安装时用户改动被默认值覆盖；混合模式此前只能手改 JSON 才能关而 README 写着「可关」；install.ps1 写死 1.0.0 且三个依赖只装一个；重启提示只警告了 macOS。

🧪 测试

43 例，基于 node --test + 一个 vscode 桩，无第三方依赖。

植入生成器与校验器的十项变异，九项被现有断言捕获。三条「通过但理由是错的」测试已纠正：一条用不存在的路径，从未真正见到 data: URI（把 imageToDataUri 改成 return '' 也照样绿）；一条把挡住注入的功劳记给了绝对路径校验，实际是 encodeURI 在起作用；一条断言字节相等，而真实 VS Code 在 Windows 上会小写盘符 —— 该用例在 Windows 上必然失败，而套件名叫「跨平台」却从没在 Windows 上跑过。

⚠️ 已知限制

• vscode-file:// 引用未经实机确认（见上），一键可切回 base64
• 各区域的透明化清单基于样式表核对，未逐个实机确认。侧栏 / 面板可能还有别的不透明子元素挡着图 —— 参考实现的 issue 记录显示这类问题会陆续冒出
• 样式注入需要 /Applications/Visual Studio Code.app 可写，只读安装（Snap / AppImage）会失败
• 改动生效需完全退出并重开 VS Code（三个平台都是），Reload Window 不刷新 external.css 缓存

美化控制台 v1.0.5 — 支持 macOS / Linux

修复

扩展此前在 macOS / Linux 上完全不生效，且无任何报错。

• 用户数据目录写死了 Windows 的 AppData/Roaming/Code/User，非 Windows 平台上 CSS、背景图、标记文件全部读写到不存在的目录，而自举失败被空 catch 吞掉。现从 context.globalStorageUri 反推，并按平台兜底（Insiders / 便携版 / 自定义 --user-data-dir 一并支持）
• imageToDataUri 把路径中的 / 全替换为 \，POSIX 路径损坏 → base64 失败 → 退回被 CSP 拦截的 file://，背景图不显示
• 选图 URL 用字符串拼接，POSIX 下产出四斜杠 file:////Users/... 且空格未转义。改用 pathToFileURL，旧格式仍可读
• 字体扫描只看 C:/Windows/Fonts，非 Windows 上扫出空集。现按平台扫描，Linux 支持子目录下钻
• 字体兜底链首位是 macOS 不存在的 Consolas。改为 macOS 用 Menlo, Monaco，Linux 用 DejaVu Sans Mono
• Settings Sync 会把 Windows 的 file://C:/... 同步到其它机器，Custom UI Style 逐条 try/catch 后静默产出空 CSS。现自动清理，用户自加的 import 保留
• 单个未注册设置键（如 macOS 上的 window.menuBarVisibility）会中断整批写入，导致后续设置全部漏写、初始化标记写不成、每次启动重复报错。现逐键处理
• 面板里改设置若写入失败，此前仍弹「已实时应用」。现明确提示

新增

• install.sh（macOS / Linux）：自动定位 app bundle 内置的 code CLI（macOS 默认不入 PATH），并补装依赖扩展
• npm test：17 个跨平台用例，基于 node --test，无第三方依赖

验证

macOS 26.5.2 (arm64) 实机：扩展与三个依赖装载成功，字体检测正确识别 SF Mono / Menlo / Monaco / Courier New（此前为空集）。

美化控制台 v1.0.3

新增

• 首次安装时自动应用 JetBrains 默认参数（字体 / 布局 / 编辑器 / 主题 / 圆角一次到位），无需手动点一遍面板

补录的历史版本 tag。

美化控制台 v1.0.2

修复:注册 beautify.codeOpacity 配置项,解决仅代码区调整不透明度时报错 'not a registered configuration'。

美化控制台 v1.0.1

修复:仅代码区背景透明度独立处理(滑块范围按模式切换,仅代码区 0.05~0.6 更淡不糊代码);切模式时滑块范围实时更新。

美化控制台 v1.0.0

Release v1.0.0

美化控制台首个发布版本 —— VS Code 一站式可视化美化面板。

亮点

• 🎨 图形面板一站式调节:字体 / 布局 / 编辑器 / 动画 / 背景 / 圆角 / 主题
• 🖼 多区域背景图,支持「全窗口」「仅代码区」两种模式,图片自动转 base64 内嵌(绕过 CSP)
• ✨ 5 档动画预设(默认 / 平滑 / 弹跳 / 华丽 / 关闭)
• 🔤 自动检测已安装的编程字体
• ❓ 每个参数带白话解释问号
• ♻️ 一键恢复默认 / 配置随扩展自举

安装

方式一:.vsix(推荐)

1. 下载 beautify-console-1.0.0.vsix
2. VS Code Ctrl+Shift+P → Extensions: Install from VSIX...
3. 同意安装依赖 Custom UI Style
4. 彻底重启 VS Code(结束所有 Code.exe 进程)
5. Ctrl+Shift+P → 美化: 打开控制台

方式二:源码

git clone https://github.com/dwgx/beautify-console
cd beautify-console
powershell -ExecutionPolicy Bypass -File install.ps1

⚠️ 重要说明

• 依赖 Custom UI Style(会自动安装)
• 样式改动生效必须【彻底重启】VS Code(任务管理器结束 Code.exe),Reload Window 不刷新 external.css 缓存
• 通过修改 VS Code 核心文件注入样式(非官方手段):
  • 启动时可能出现「安装似乎已损坏」黄条,点齿轮「不再显示」即可
  • VS Code 更新后样式可能失效,重新打开面板并彻底重启即可恢复

致谢

• 编辑器背景选择器方案参考 shalldie/vscode-background
• 样式注入依赖 subframe7536/vscode-custom-ui-style