fix: 修复窗口控制按钮需要双击的问题
🔧 问题修复: - 修复最小化/最大化/关闭按钮需要双击才能工作的问题 - 原因:整个标题栏的 onMouseDown 事件拦截了按钮的点击事件 🛠️ 技术改进: - 将拖拽事件处理器从整个标题栏移动到左侧标题区域 - 为所有按钮添加 e.stopPropagation() 阻止事件冒泡 - 保持拖拽功能正常工作的同时确保按钮单击响应 ✨ 修复后功能: - ✅ 拖拽:点击标题文字区域可拖拽窗口 - ✅ 双击最大化:双击标题文字区域切换最大化 - ✅ 最小化按钮:单击即可最小化窗口 - ✅ 最大化按钮:单击即可切换最大化状态 - ✅ 关闭按钮:单击即可关闭应用程序 现在所有窗口控制功能都应该正常工作了!
This commit is contained in:
parent
63484974d3
commit
289fb4f7e2
|
|
@ -94,11 +94,11 @@ const TitleBar: React.FC = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className="h-8 bg-secondary-800 text-white flex items-center justify-between px-4 select-none">
|
||||||
className="h-8 bg-secondary-800 text-white flex items-center justify-between px-4 select-none"
|
<div
|
||||||
onMouseDown={handleTitlebarMouseDown}
|
className="flex items-center space-x-2 flex-1"
|
||||||
>
|
onMouseDown={handleTitlebarMouseDown}
|
||||||
<div className="flex items-center space-x-2">
|
>
|
||||||
<div className="w-4 h-4 bg-primary-500 rounded-full flex items-center justify-center">
|
<div className="w-4 h-4 bg-primary-500 rounded-full flex items-center justify-center">
|
||||||
<span className="text-xs font-bold">M</span>
|
<span className="text-xs font-bold">M</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -107,19 +107,28 @@ const TitleBar: React.FC = () => {
|
||||||
|
|
||||||
<div className="flex items-center space-x-1">
|
<div className="flex items-center space-x-1">
|
||||||
<button
|
<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"
|
className="w-6 h-6 flex items-center justify-center hover:bg-secondary-700 rounded transition-colors"
|
||||||
>
|
>
|
||||||
<Minimize2 size={12} />
|
<Minimize2 size={12} />
|
||||||
</button>
|
</button>
|
||||||
<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"
|
className="w-6 h-6 flex items-center justify-center hover:bg-secondary-700 rounded transition-colors"
|
||||||
>
|
>
|
||||||
{isMaximized ? <Square size={12} /> : <Maximize2 size={12} />}
|
{isMaximized ? <Square size={12} /> : <Maximize2 size={12} />}
|
||||||
</button>
|
</button>
|
||||||
<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"
|
className="w-6 h-6 flex items-center justify-center hover:bg-red-600 rounded transition-colors"
|
||||||
>
|
>
|
||||||
<X size={12} />
|
<X size={12} />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue