剪影

import React, { useState } from 'react';
import {
Play, Pause, SkipBack, SkipForward, Scissors, Trash2,
Undo, Redo, Download, Settings, ZoomIn, ZoomOut,
Image as ImageIcon, Type, Music, Smile, Sparkles,
Layout, SplitSquareHorizontal, Sliders, MousePointer2,
ChevronRight, ChevronDown, Plus
} from 'lucide-react';

// 模拟素材数据
const MEDIA_ASSETS = [
{ id: 1, type: 'video', name: 'Travel_Vlog_01.mp4', duration: '00:15', color: 'bg-blue-500' },
{ id: 2, type: 'video', name: 'Drone_Shot_City.mov', duration: '00:08', color: 'bg-teal-500' },
{ id: 3, type: 'image', name: 'Thumbnail.jpg', duration: '00:05', color: 'bg-purple-500' },
{ id: 4, type: 'audio', name: 'LoFi_Chill_Beat.mp3', duration: '02:30', color: 'bg-yellow-500' },
];

const SIDEBAR_TABS = [
{ id: 'media', icon: ImageIcon, label: '媒体' },
{ id: 'audio', icon: Music, label: '音频' },
{ id: 'text', icon: Type, label: '文字' },
{ id: 'stickers', icon: Smile, label: '贴纸' },
{ id: 'effects', icon: Sparkles, label: '特效' },
{ id: 'transitions', icon: SplitSquareHorizontal, label: '转场' },
{ id: 'filters', icon: Sliders, label: '滤镜' },
];

export default function CapCutClone() {
const [activeTab, setActiveTab] = useState('media');
const [isPlaying, setIsPlaying] = useState(false);
const [currentTime, setCurrentTime] = useState('00:00:04');
const [zoomLevel, setZoomLevel] = useState(50);

return (

{/* 1. 顶部标题栏 (Header) */}

C

Menu
/
Untitled Project *

1080p

Export

{/* 中间主要工作区 (Main Workspace) */}

{/* 2. 左侧资源区 (Sidebar & Assets) */}

{/* 一级导航图标栏 */}

{SIDEBAR_TABS.map((tab) => (

setActiveTab(tab.id)}
className={`flex flex-col items-center gap-1 cursor-pointer transition-colors ${activeTab === tab.id ? 'text-cyan-400' : 'text-gray-500 hover:text-gray-300'}`}
>

{tab.label}

))}

{/* 二级资源面板 */}

本地素材

导入

{MEDIA_ASSETS.map(item => (

{item.name}

{item.duration}

))}

{/* 3. 中间播放器 (Player) */}

{/* 播放器工具栏 */}

{currentTime}

100%

{/* 视频画面 */}

{/* 模拟视频内容 */}

{/* 变换控件覆盖层 */}

{/* 播放控制栏 */}

setIsPlaying(!isPlaying)}
>
{isPlaying ? : }

{/* 4. 右侧属性面板 (Properties) */}

画面

音频

变速

动画

{/* 基础属性组 */}

基础

缩放

100%

位置 X
0

位置 Y
0

旋转

0°

{/* 不透明度组 */}

不透明度

{/* 5. 底部时间轴 (Timeline) */}

{/* 时间轴工具栏 */}

setZoomLevel(Math.max(10, zoomLevel - 10))} />
setZoomLevel(e.target.value)}
className="w-24 h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer"
/>
setZoomLevel(Math.min(100, zoomLevel + 10))} />

{/* 时间轴内容区 */}

{/* 时间刻度尺 */}

{[...Array(20)].map((_, i) => (

00:0{i}

))}

{/* 轨道区域 */}

{/* 播放头 (Playhead) */}

{/* 主视频轨 */}

Main Track

{/* 片段 1 */}

{[...Array(10)].map((_,i) =>

)}

Travel_Vlog_01.mp4

{/* 片段 2 */}

Drone_Shot.mov

{/* 音频轨 */}

{/* 模拟波形 */}

{[...Array(60)].map((_, i) => (

))}

LoFi_Chill_Beat.mp3

{/* 文本轨 */}

Text: TRAVEL