fix: 修复窗口控制按钮需要双击的问题

🔧 问题修复:
- 修复最小化/最大化/关闭按钮需要双击才能工作的问题
- 原因:整个标题栏的 onMouseDown 事件拦截了按钮的点击事件

🛠️ 技术改进:
- 将拖拽事件处理器从整个标题栏移动到左侧标题区域
- 为所有按钮添加 e.stopPropagation() 阻止事件冒泡
- 保持拖拽功能正常工作的同时确保按钮单击响应

 修复后功能:
-  拖拽:点击标题文字区域可拖拽窗口
-  双击最大化:双击标题文字区域切换最大化
-  最小化按钮:单击即可最小化窗口
-  最大化按钮:单击即可切换最大化状态
-  关闭按钮:单击即可关闭应用程序

现在所有窗口控制功能都应该正常工作了!
This commit is contained in:
root 2025-07-10 10:28:46 +08:00
parent 63484974d3
commit 289fb4f7e2
1 changed files with 18 additions and 9 deletions

View File

@ -94,11 +94,11 @@ const TitleBar: React.FC = () => {
}
return (
<div
className="h-8 bg-secondary-800 text-white flex items-center justify-between px-4 select-none"
onMouseDown={handleTitlebarMouseDown}
>
<div className="flex items-center space-x-2">
<div className="h-8 bg-secondary-800 text-white flex items-center justify-between px-4 select-none">
<div
className="flex items-center space-x-2 flex-1"
onMouseDown={handleTitlebarMouseDown}
>
<div className="w-4 h-4 bg-primary-500 rounded-full flex items-center justify-center">
<span className="text-xs font-bold">M</span>
</div>
@ -107,19 +107,28 @@ const TitleBar: React.FC = () => {
<div className="flex items-center space-x-1">
<button
onClick={handleMinimize}
onClick={(e) => {
e.stopPropagation()
handleMinimize()
}}
className="w-6 h-6 flex items-center justify-center hover:bg-secondary-700 rounded transition-colors"
>
<Minimize2 size={12} />
</button>
<button
onClick={handleMaximize}
onClick={(e) => {
e.stopPropagation()
handleMaximize()
}}
className="w-6 h-6 flex items-center justify-center hover:bg-secondary-700 rounded transition-colors"
>
{isMaximized ? <Square size={12} /> : <Maximize2 size={12} />}
</button>
<button
onClick={handleClose}
onClick={(e) => {
e.stopPropagation()
handleClose()
}}
className="w-6 h-6 flex items-center justify-center hover:bg-red-600 rounded transition-colors"
>
<X size={12} />