fix: 修复窗口控制和内容滚动问题

- 修复 TitleBar 组件窗口控制功能
  - 实现真正的最小化、最大化/还原、关闭功能
  - 添加窗口状态监听和图标切换
  - 保持窗口拖动功能

- 修复内容滚动问题
  - Layout 组件移除 overflow-hidden，启用滚动
  - EditorPage 修复 flex 布局滚动问题
  - 确保所有内容区域可正常滚动

- 增强 HomePage 内容
  - 添加更多功能介绍和测试内容
  - 改善用户体验和界面展示

- 技术改进
  - 使用 @tauri-apps/api/window API
  - 优化 CSS 布局和滚动行为
  - 添加窗口事件监听器

src/components/Layout.tsx

@@ -14,9 +14,9 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <div className="h-screen flex flex-col bg-secondary-50">
       <TitleBar />
-      <div className="flex flex-1 overflow-hidden">
+      <div className="flex flex-1 min-h-0">
         {!isEditorPage && <Sidebar />}
-        <main className="flex-1 overflow-hidden">
+        <main className="flex-1 overflow-auto">
           {children}
         </main>
       </div>

src/components/TitleBar.tsx

@@ -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 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 (
@@ -40,7 +80,7 @@ const TitleBar: React.FC = () => {
           onClick={handleMaximize}
           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
           onClick={handleClose}

src/pages/EditorPage.tsx

@@ -61,7 +61,7 @@ const EditorPage: React.FC = () => {
         </div>
       </div>
 
-      <div className="flex flex-1 overflow-hidden">
+      <div className="flex flex-1 min-h-0">
         {/* Media Library Sidebar */}
         <MediaLibrary className="w-64" />
 

src/pages/HomePage.tsx

@@ -155,6 +155,64 @@ const HomePage: React.FC = () => {
           </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>
   )
 }