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:
parent
4ffb8a278e
commit
63484974d3
|
|
@ -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"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue