129 lines
4.0 KiB
TypeScript
129 lines
4.0 KiB
TypeScript
import React from 'react'
|
|
import { Download, Save, Scissors } from 'lucide-react'
|
|
import VideoPreview from '../components/VideoPreview'
|
|
import MediaLibrary from '../components/MediaLibrary'
|
|
import { useProjectStore } from '../stores/useProjectStore'
|
|
|
|
const EditorPage: React.FC = () => {
|
|
const { currentProject, saveProject, isSaving } = useProjectStore()
|
|
|
|
const handleSave = async () => {
|
|
if (currentProject) {
|
|
await saveProject()
|
|
}
|
|
}
|
|
|
|
const handleExport = () => {
|
|
// TODO: Implement export functionality
|
|
console.log('Export project')
|
|
}
|
|
|
|
return (
|
|
<div className="h-full flex flex-col bg-secondary-900">
|
|
{/* Top Toolbar */}
|
|
<div className="bg-secondary-800 border-b border-secondary-700 p-4 flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<h1 className="text-white font-semibold">
|
|
{currentProject ? currentProject.name : '视频编辑器'}
|
|
</h1>
|
|
<div className="flex items-center space-x-2">
|
|
<button className="btn-ghost text-white px-3 py-1 text-sm">
|
|
文件
|
|
</button>
|
|
<button className="btn-ghost text-white px-3 py-1 text-sm">
|
|
编辑
|
|
</button>
|
|
<button className="btn-ghost text-white px-3 py-1 text-sm">
|
|
效果
|
|
</button>
|
|
<button className="btn-ghost text-white px-3 py-1 text-sm">
|
|
导出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={isSaving || !currentProject}
|
|
className="btn-secondary px-4 py-2 disabled:opacity-50"
|
|
>
|
|
<Save size={16} className="mr-2" />
|
|
{isSaving ? '保存中...' : '保存'}
|
|
</button>
|
|
<button
|
|
onClick={handleExport}
|
|
className="btn-primary px-4 py-2"
|
|
>
|
|
<Download size={16} className="mr-2" />
|
|
导出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-1 min-h-0">
|
|
{/* Media Library Sidebar */}
|
|
<MediaLibrary className="w-48" />
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-1 flex flex-col">
|
|
{/* Video Preview */}
|
|
<div className="flex-1 bg-black p-4">
|
|
<VideoPreview className="w-full h-full" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Properties Panel */}
|
|
<div className="w-64 bg-secondary-800 border-l border-secondary-700 flex flex-col">
|
|
<div className="p-4 border-b border-secondary-700">
|
|
<h2 className="text-white font-medium">属性面板</h2>
|
|
</div>
|
|
<div className="flex-1 p-4 space-y-4">
|
|
<div>
|
|
<label className="block text-white text-sm font-medium mb-2">
|
|
亮度
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="200"
|
|
defaultValue="100"
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-white text-sm font-medium mb-2">
|
|
对比度
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="200"
|
|
defaultValue="100"
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-white text-sm font-medium mb-2">
|
|
饱和度
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="200"
|
|
defaultValue="100"
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
<button className="btn-primary w-full">
|
|
<Scissors size={16} className="mr-2" />
|
|
应用效果
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default EditorPage
|