Skip to content

feat: 隐藏 Windows 原生菜单栏 + 优化窗口滚动条 (closes #252) - #257

Merged
AmintaCCCP merged 1 commit into
mainfrom
feat/windows-menu-hide-scrollbar-252
Jul 30, 2026
Merged

feat: 隐藏 Windows 原生菜单栏 + 优化窗口滚动条 (closes #252)#257
AmintaCCCP merged 1 commit into
mainfrom
feat/windows-menu-hide-scrollbar-252

Conversation

@AmintaCCCP

@AmintaCCCP AmintaCCCP commented Jul 30, 2026

Copy link
Copy Markdown
Owner

🎯 背景

Closes #252

Windows 构建的窗口顶部会显示原生菜单栏(Edit / View / Window 三个菜单),需要在不影响复制粘贴、DevTools 等快捷键的前提下将其隐藏;同时优化窗口右侧与底部的原生滚动条样式,并确保窗口横向滚动条不再出现。

🔧 改动

electron/main.js

  • 隐藏菜单栏(保留快捷键)autoHideMenuBar 从无条件 false 改为 process.platform === 'darwin' ? false : true。Windows/Linux 隐藏顶部菜单栏(按 Alt 可临时呼出);macOS 保持可见(系统级常驻)。
    • 关键点:应用菜单仍由 Menu.setApplicationMenu 安装,role 快捷键(copy/paste/cut/selectAll/undo/redotoggleDevToolsreload、缩放等)在菜单栏隐藏后照常生效。
  • 生产环境放开 DevToolswebPreferences.devToolsisDev 改为 true,使菜单 toggleDevTools role 成为隐藏菜单后可用的生产 DevTools 入口。
  • 菜单模板(Edit/View/Window)保留不删——它正是快捷键来源,删除会丢快捷键。
  • globalShortcut 的 Ctrl+Shift+I 维持 dev-only(避免生产环境全局热键冲突),生产入口由菜单 role 覆盖。

src/index.css(新增全局规则)

  • html, body { overflow-x: hidden } —— 消除窗口底部横向滚动条(App 根用 min-h-screen 且 body 未限横向的根因)。
  • 全局重绘窗口右侧竖向原生滚动条:thin、半透明灰、hover 变深,并适配 dark 模式(html.dark / html.dark::-webkit-scrollbar-thumb)。
  • 作用于窗口级 document 滚动容器,不影响各组件 opt-in 的 .scrollbar-auto / .category-scrollbar / .readme-scrollbar / textarea / .prose pre

✅ 验证

  • npm run build 通过,新规则已正确编译进 dist/assets/index-*.csshtml,body{overflow-x:hidden}html.dark::-webkit-scrollbar-thumb 均已产出)。
  • npm run lint 无新增问题(既有 2 个 error 位于未触及的无关文件)。
  • 待在 Windows 机器复测:① 顶部无菜单 ② Ctrl+C/V/X/A/Z 与 Ctrl+Shift+I 仍生效 ③ 缩窄窗口底部无横向滚动条 ④ 右侧滚动条为细瘦半透明灰(dark hover 变深)。

📝 附注

本仓库贡献者请知悉:隐藏菜单栏 ≠ 删除菜单,role 快捷键依赖已安装的应用菜单;dark 模式选择器须用 html.dark(同元素)而非 .dark html(后代),dark 类挂在 <html> 上。

🤖 Generated with Claude Code

Summary by CodeRabbit

  • New Features

    • Developer tools are now consistently available when needed.
    • Application menus automatically hide on non-macOS platforms while remaining visible on macOS.
    • Added slimmer, rounded scrollbars with hover states and dark-mode styling.
  • Style

    • Improved horizontal overflow handling for a cleaner page layout.

Hide the native top menu bar (Edit/View/Window) on Windows/Linux via
autoHideMenuBar while keeping the application menu installed so role
shortcuts (copy/paste/cut/selectAll/undo/redo, toggleDevTools, reload,
zoom) keep working. Enable DevTools in production so the toggleDevTools
role is an accessible entrypoint with the menu hidden.

Globally restyle the window's native scrollbar (thin, translucent,
dark-mode aware) and add overflow-x: hidden to html/body to eliminate
the bottom horizontal scrollbar, without affecting per-component
opt-in scrollbar classes.

Closes #252

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@gemini-code-assist

Copy link
Copy Markdown

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

@coderabbitai

coderabbitai Bot commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 61ef6050-064d-4aaa-80c0-3dd583276616

📥 Commits

Reviewing files that changed from the base of the PR and between 307ac17 and caf7d26.

📒 Files selected for processing (2)
  • electron/main.js
  • src/index.css

📝 Walkthrough

Walkthrough

The Electron window always enables DevTools and conditionally auto-hides its menu bar by platform. Global CSS now prevents horizontal overflow and styles document scrollbars for light and dark themes.

Changes

UI polish

Layer / File(s) Summary
Window controls and developer tools
electron/main.js
BrowserWindow always enables DevTools, while the menu bar remains visible on macOS and auto-hides on other platforms.
Global scrollbar presentation
src/index.css
Global overflow rules and light/dark native scrollbar styles are added to the document container.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main UI changes: hiding the native menu bar and improving scrollbar styling.
Linked Issues check ✅ Passed The PR addresses #252 by hiding the top native menu bar and improving the native scrollbar appearance.
Out of Scope Changes check ✅ Passed The changes stay within the requested UI polish scope and do not introduce unrelated functionality.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/windows-menu-hide-scrollbar-252

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@AmintaCCCP
AmintaCCCP merged commit 345429f into main Jul 30, 2026
5 checks passed
@AmintaCCCP
AmintaCCCP deleted the feat/windows-menu-hide-scrollbar-252 branch July 30, 2026 18:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature] 界面美观优化建议

1 participant