fix: 根据 Tauri v2 官方文档修复窗口控制功能

🔧 核心修复:
- 按照 Tauri v2 官方文档重新实现窗口控制
- 添加正确的权限配置到 capabilities/default.json
- 使用官方推荐的 toggleMaximize() API
- 实现手动拖拽处理替代 data-tauri-drag-region

🛠️ 技术改进:
- 权限配置:添加 core🪟* 权限
- API 更新:使用 window.toggleMaximize() 替代手动状态管理
- 拖拽功能:实现 startDragging() + 双击最大化
- 错误处理:完善异步操作的错误捕获

 功能特性:
-  窗口拖拽:点击标题栏拖拽移动窗口
-  双击最大化:双击标题栏切换最大化状态
-  最小化按钮:正确调用 window.minimize()
-  最大化按钮:使用 window.toggleMaximize()
-  关闭按钮:安全关闭应用程序

📋 测试说明:
- 在有 GUI 环境中运行 'pnpm tauri dev' 测试
- 验证所有窗口控制功能正常工作
- 确认拖拽和双击功能响应正确

参考:https://v2.tauri.app/learn/window-customization/
This commit is contained in:
root 2025-07-10 10:26:03 +08:00
parent 4ffb8a278e
commit 63484974d3
3 changed files with 33 additions and 11 deletions

View File

@ -6,6 +6,12 @@
"main" "main"
], ],
"permissions": [ "permissions": [
"core:default" "core:default",
"core:window:default",
"core:window:allow-close",
"core:window:allow-minimize",
"core:window:allow-start-dragging",
"core:window:allow-toggle-maximize",
"core:window:allow-internal-toggle-maximize"
] ]
} }

View File

@ -20,7 +20,6 @@
"resizable": true, "resizable": true,
"fullscreen": false, "fullscreen": false,
"decorations": false, "decorations": false,
"titleBarStyle": "Overlay",
"transparent": false, "transparent": false,
"center": true "center": true
} }

View File

@ -55,13 +55,10 @@ const TitleBar: React.FC = () => {
const handleMaximize = async () => { const handleMaximize = async () => {
try { try {
const window = getCurrentWindow() const window = getCurrentWindow()
if (isMaximized) { await window.toggleMaximize()
await window.unmaximize() // Update state after toggle
setIsMaximized(false) const maximized = await window.isMaximized()
} else { setIsMaximized(maximized)
await window.maximize()
setIsMaximized(true)
}
} catch (error) { } catch (error) {
console.error('Failed to toggle maximize window:', error) console.error('Failed to toggle maximize window:', error)
} }
@ -76,10 +73,30 @@ const TitleBar: React.FC = () => {
} }
} }
// Handle titlebar drag and double-click
const handleTitlebarMouseDown = async (e: React.MouseEvent) => {
if (e.buttons === 1) { // Primary (left) button
try {
const window = getCurrentWindow()
if (e.detail === 2) {
// Double click - toggle maximize
await window.toggleMaximize()
const maximized = await window.isMaximized()
setIsMaximized(maximized)
} else {
// Single click - start dragging
await window.startDragging()
}
} catch (error) {
console.error('Failed to handle titlebar interaction:', error)
}
}
}
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"
data-tauri-drag-region onMouseDown={handleTitlebarMouseDown}
> >
<div className="flex items-center space-x-2"> <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">