fix: 修复窗口控制和内容滚动问题
- 修复 TitleBar 组件窗口控制功能 - 实现真正的最小化、最大化/还原、关闭功能 - 添加窗口状态监听和图标切换 - 保持窗口拖动功能 - 修复内容滚动问题 - Layout 组件移除 overflow-hidden,启用滚动 - EditorPage 修复 flex 布局滚动问题 - 确保所有内容区域可正常滚动 - 增强 HomePage 内容 - 添加更多功能介绍和测试内容 - 改善用户体验和界面展示 - 技术改进 - 使用 @tauri-apps/api/window API - 优化 CSS 布局和滚动行为 - 添加窗口事件监听器
This commit is contained in:
parent
4cdd6560fc
commit
de2dafe661
|
|
@ -14,9 +14,9 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||||
return (
|
return (
|
||||||
<div className="h-screen flex flex-col bg-secondary-50">
|
<div className="h-screen flex flex-col bg-secondary-50">
|
||||||
<TitleBar />
|
<TitleBar />
|
||||||
<div className="flex flex-1 overflow-hidden">
|
<div className="flex flex-1 min-h-0">
|
||||||
{!isEditorPage && <Sidebar />}
|
{!isEditorPage && <Sidebar />}
|
||||||
<main className="flex-1 overflow-hidden">
|
<main className="flex-1 overflow-auto">
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,60 @@
|
||||||
import React from 'react'
|
import React, { useState, useEffect } from 'react'
|
||||||
import { Minimize2, Maximize2, X } from 'lucide-react'
|
import { Minimize2, Maximize2, Square, X } from 'lucide-react'
|
||||||
|
import { getCurrentWindow } from '@tauri-apps/api/window'
|
||||||
|
|
||||||
const TitleBar: React.FC = () => {
|
const TitleBar: React.FC = () => {
|
||||||
const handleMinimize = () => {
|
const [isMaximized, setIsMaximized] = useState(false)
|
||||||
// TODO: Implement minimize functionality with Tauri
|
|
||||||
console.log('Minimize window')
|
useEffect(() => {
|
||||||
|
const checkMaximized = async () => {
|
||||||
|
const window = getCurrentWindow()
|
||||||
|
const maximized = await window.isMaximized()
|
||||||
|
setIsMaximized(maximized)
|
||||||
|
}
|
||||||
|
|
||||||
|
checkMaximized()
|
||||||
|
|
||||||
|
// Listen for window resize events
|
||||||
|
const unlisten = getCurrentWindow().listen('tauri://resize', () => {
|
||||||
|
checkMaximized()
|
||||||
|
})
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
unlisten.then(fn => fn())
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const handleMinimize = async () => {
|
||||||
|
try {
|
||||||
|
const window = getCurrentWindow()
|
||||||
|
await window.minimize()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to minimize window:', error)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleMaximize = () => {
|
const handleMaximize = async () => {
|
||||||
// TODO: Implement maximize functionality with Tauri
|
try {
|
||||||
console.log('Maximize window')
|
const window = getCurrentWindow()
|
||||||
|
if (isMaximized) {
|
||||||
|
await window.unmaximize()
|
||||||
|
setIsMaximized(false)
|
||||||
|
} else {
|
||||||
|
await window.maximize()
|
||||||
|
setIsMaximized(true)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to toggle maximize window:', error)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleClose = () => {
|
const handleClose = async () => {
|
||||||
// TODO: Implement close functionality with Tauri
|
try {
|
||||||
console.log('Close window')
|
const window = getCurrentWindow()
|
||||||
|
await window.close()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to close window:', error)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -40,7 +80,7 @@ const TitleBar: React.FC = () => {
|
||||||
onClick={handleMaximize}
|
onClick={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"
|
||||||
>
|
>
|
||||||
<Maximize2 size={12} />
|
{isMaximized ? <Square size={12} /> : <Maximize2 size={12} />}
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
|
|
|
||||||
|
|
@ -61,7 +61,7 @@ const EditorPage: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-1 overflow-hidden">
|
<div className="flex flex-1 min-h-0">
|
||||||
{/* Media Library Sidebar */}
|
{/* Media Library Sidebar */}
|
||||||
<MediaLibrary className="w-64" />
|
<MediaLibrary className="w-64" />
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -155,6 +155,64 @@ const HomePage: React.FC = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Additional Content for Testing Scroll */}
|
||||||
|
<div className="space-y-6">
|
||||||
|
<h2 className="text-2xl font-semibold text-secondary-900">更多功能</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="card p-6">
|
||||||
|
<h3 className="text-lg font-semibold mb-3">视频效果</h3>
|
||||||
|
<ul className="space-y-2 text-secondary-600">
|
||||||
|
<li>• 滤镜和颜色调整</li>
|
||||||
|
<li>• 转场效果</li>
|
||||||
|
<li>• 动画和运动图形</li>
|
||||||
|
<li>• 绿幕抠像</li>
|
||||||
|
<li>• 画中画效果</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card p-6">
|
||||||
|
<h3 className="text-lg font-semibold mb-3">音频功能</h3>
|
||||||
|
<ul className="space-y-2 text-secondary-600">
|
||||||
|
<li>• 降噪和音频修复</li>
|
||||||
|
<li>• 音频均衡器</li>
|
||||||
|
<li>• 音频同步</li>
|
||||||
|
<li>• 语音识别</li>
|
||||||
|
<li>• 音频可视化</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card p-6">
|
||||||
|
<h3 className="text-lg font-semibold mb-3">导出选项</h3>
|
||||||
|
<ul className="space-y-2 text-secondary-600">
|
||||||
|
<li>• 多种格式支持</li>
|
||||||
|
<li>• 自定义分辨率</li>
|
||||||
|
<li>• 批量导出</li>
|
||||||
|
<li>• 云端渲染</li>
|
||||||
|
<li>• 直播推流</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="card p-6">
|
||||||
|
<h3 className="text-lg font-semibold mb-3">协作功能</h3>
|
||||||
|
<ul className="space-y-2 text-secondary-600">
|
||||||
|
<li>• 团队协作</li>
|
||||||
|
<li>• 版本控制</li>
|
||||||
|
<li>• 评论和反馈</li>
|
||||||
|
<li>• 云端同步</li>
|
||||||
|
<li>• 权限管理</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<div className="text-center py-8 border-t border-secondary-200">
|
||||||
|
<p className="text-secondary-600">
|
||||||
|
© 2025 MixVideo V2. 专业视频编辑软件,让创作更简单。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue