forked from 77media/video-flow
优化样式
This commit is contained in:
北枳
parent
39c5e99c88
commit
7f0545f3cf
@ -7,6 +7,7 @@ import { useRouter } from "next/navigation";
|
||||
import { VideoScreenLayout } from '@/components/video-screen-layout';
|
||||
import { VideoGridLayout } from '@/components/video-grid-layout';
|
||||
import LiquidGlass from '@/plugins/liquid-glass';
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export function HomePage2() {
|
||||
const router = useRouter();
|
||||
@ -95,31 +96,33 @@ export function HomePage2() {
|
||||
</div>
|
||||
|
||||
{/* Create Project Button */}
|
||||
<div className="fixed bottom-[10rem] left-[50%]">
|
||||
<LiquidGlass
|
||||
displacementScale={58}
|
||||
blurAmount={0.5}
|
||||
saturation={130}
|
||||
aberrationIntensity={2}
|
||||
elasticity={0.35}
|
||||
cornerRadius={32}
|
||||
mouseContainer={containerRef}
|
||||
overLight={false}
|
||||
mode="standard"
|
||||
padding="unset"
|
||||
<div className="fixed bottom-[5rem] left-[50%] -translate-x-1/2 z-50">
|
||||
<motion.div
|
||||
className="relative group"
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={() => {
|
||||
console.log("Create Project")
|
||||
router.push("/create")
|
||||
}}
|
||||
style={{
|
||||
position: "absolute"
|
||||
}}
|
||||
>
|
||||
<div className="add-project-btn">
|
||||
<Plus className="w-6 h-6 icon" />
|
||||
<div className="btn-text">Create Project</div>
|
||||
</div>
|
||||
</LiquidGlass>
|
||||
|
||||
{/* 玻璃按钮 */}
|
||||
<motion.div
|
||||
className="add-project-btn relative flex items-center gap-3 px-6 py-4 rounded-2xl
|
||||
bg-white/20 backdrop-blur-md border border-white/25 cursor-pointer
|
||||
shadow-[0_8px_32px_rgba(0,0,0,0.2)] group-hover:shadow-[0_8px_32px_rgba(0,0,0,0.4)]
|
||||
transition-all duration-300"
|
||||
initial={false}
|
||||
whileHover={{
|
||||
backgroundColor: "rgba(255, 255, 255, 0.15)"
|
||||
}}
|
||||
>
|
||||
<Plus className="w-6 h-6 text-white" />
|
||||
<div className="btn-text text-lg font-medium bg-gradient-to-r text-white
|
||||
bg-clip-text text-transparent">新建项目</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -67,6 +67,7 @@ export function SettingsTabContent({ onSettingChange }: SettingsTabContentProps)
|
||||
const [sfxVolume, setSfxVolume] = useState(75);
|
||||
const [mediaVolume, setMediaVolume] = useState(75);
|
||||
const [musicVolume, setMusicVolume] = useState(80);
|
||||
const [voiceVolume, setVoiceVolume] = useState(80);
|
||||
const [openDropdown, setOpenDropdown] = useState<string | null>(null);
|
||||
|
||||
const handleDropdownToggle = (key: string) => {
|
||||
@ -170,126 +171,146 @@ export function SettingsTabContent({ onSettingChange }: SettingsTabContentProps)
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className="space-y-6"
|
||||
className="space-y-8 px-1"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{/* 工作模式 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">Mode</label>
|
||||
{renderDropdown('mode', 'Mode', modeOptions, selectedMode, setSelectedMode)}
|
||||
{/* 基础设置组 */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 pb-2 border-b border-white/10">
|
||||
<div className="h-4 w-1 rounded-full bg-blue-500" />
|
||||
<h3 className="text-sm font-medium text-white/90">基础设置</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* 工作模式 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">工作模式</label>
|
||||
{renderDropdown('mode', 'Mode', modeOptions, selectedMode, setSelectedMode)}
|
||||
</div>
|
||||
|
||||
{/* 分辨率 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">Resolution</label>
|
||||
{renderDropdown('resolution', 'Resolution', resolutionOptions, selectedResolution, setSelectedResolution)}
|
||||
</div>
|
||||
|
||||
{/* 叠加效果 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">Overlay Preset</label>
|
||||
{renderDropdown('overlay', 'Overlay Preset', overlayOptions, selectedOverlay, setSelectedOverlay)}
|
||||
</div>
|
||||
|
||||
{/* 转场设定 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">Transition Preset</label>
|
||||
{renderDropdown('transition', 'Transition Preset', transitionOptions, selectedTransition, setSelectedTransition)}
|
||||
</div>
|
||||
|
||||
{/* 字幕风格 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">Subtitle Preset</label>
|
||||
{renderDropdown('subtitle', 'Subtitle Preset', subtitleOptions, selectedSubtitle, setSelectedSubtitle)}
|
||||
</div>
|
||||
|
||||
{/* 贴纸预设 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">Sticker Preset</label>
|
||||
{renderDropdown('watermark', 'Sticker Preset', watermarkOptions, selectedWatermark, setSelectedWatermark)}
|
||||
</div>
|
||||
|
||||
{/* 文字效果 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">Text Preset</label>
|
||||
{renderDropdown('textEffect', 'Text Preset', textEffectOptions, selectedTextEffect, setSelectedTextEffect)}
|
||||
</div>
|
||||
|
||||
{/* 音效主音量 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">SFX Master Volume</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={sfxVolume}
|
||||
className="flex-1 h-1 rounded-full bg-white/10 cursor-pointer
|
||||
[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
|
||||
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-500
|
||||
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:cursor-pointer
|
||||
[&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-200
|
||||
[&::-webkit-slider-thumb]:hover:scale-110"
|
||||
onChange={(e) => {
|
||||
const newValue = parseInt(e.target.value);
|
||||
setSfxVolume(newValue);
|
||||
onSettingChange?.('SFX Master Volume', newValue);
|
||||
}}
|
||||
/>
|
||||
<span className="w-12 text-right text-sm">{sfxVolume}%</span>
|
||||
{/* 分辨率 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">分辨率</label>
|
||||
{renderDropdown('resolution', 'Resolution', resolutionOptions, selectedResolution, setSelectedResolution)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 媒体音频主音量 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">Media Audio Master Volume</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={mediaVolume}
|
||||
className="flex-1 h-1 rounded-full bg-white/10 cursor-pointer
|
||||
[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
|
||||
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-500
|
||||
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:cursor-pointer
|
||||
[&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-200
|
||||
[&::-webkit-slider-thumb]:hover:scale-110"
|
||||
onChange={(e) => {
|
||||
const newValue = parseInt(e.target.value);
|
||||
setMediaVolume(newValue);
|
||||
onSettingChange?.('Media Audio Master Volume', newValue);
|
||||
}}
|
||||
/>
|
||||
<span className="w-12 text-right text-sm">{mediaVolume}%</span>
|
||||
{/* 视觉效果组 */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 pb-2 border-b border-white/10">
|
||||
<div className="h-4 w-1 rounded-full bg-emerald-500" />
|
||||
<h3 className="text-sm font-medium text-white/90">视觉效果</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* 叠加效果 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">叠加效果</label>
|
||||
{renderDropdown('overlay', 'Overlay Preset', overlayOptions, selectedOverlay, setSelectedOverlay)}
|
||||
</div>
|
||||
|
||||
{/* 转场设定 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">转场效果</label>
|
||||
{renderDropdown('transition', 'Transition Preset', transitionOptions, selectedTransition, setSelectedTransition)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 音乐主音量 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">Music Master Volume</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
value={musicVolume}
|
||||
className="flex-1 h-1 rounded-full bg-white/10 cursor-pointer
|
||||
[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3
|
||||
[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-500
|
||||
[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:cursor-pointer
|
||||
[&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-200
|
||||
[&::-webkit-slider-thumb]:hover:scale-110"
|
||||
onChange={(e) => {
|
||||
const newValue = parseInt(e.target.value);
|
||||
setMusicVolume(newValue);
|
||||
onSettingChange?.('Music Master Volume', newValue);
|
||||
}}
|
||||
/>
|
||||
<span className="w-12 text-right text-sm">{musicVolume}%</span>
|
||||
{/* 文字样式组 */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 pb-2 border-b border-white/10">
|
||||
<div className="h-4 w-1 rounded-full bg-purple-500" />
|
||||
<h3 className="text-sm font-medium text-white/90">文字样式</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* 字幕风格 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">字幕风格</label>
|
||||
{renderDropdown('subtitle', 'Subtitle Preset', subtitleOptions, selectedSubtitle, setSelectedSubtitle)}
|
||||
</div>
|
||||
|
||||
{/* 文字效果 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">文字效果</label>
|
||||
{renderDropdown('textEffect', 'Text Preset', textEffectOptions, selectedTextEffect, setSelectedTextEffect)}
|
||||
</div>
|
||||
|
||||
{/* 贴纸预设 */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm text-white/70">贴纸预设</label>
|
||||
{renderDropdown('watermark', 'Sticker Preset', watermarkOptions, selectedWatermark, setSelectedWatermark)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 音频设置组 */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2 pb-2 border-b border-white/10">
|
||||
<div className="h-4 w-1 rounded-full bg-amber-500" />
|
||||
<h3 className="text-sm font-medium text-white/90">音频设置</h3>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{/* 音效主音量 */}
|
||||
<div className="p-4 rounded-xl bg-white/5 hover:bg-white/[0.07] transition-colors duration-200">
|
||||
{renderVolumeSlider(
|
||||
<Volume2 className="w-4 h-4 text-amber-500" />,
|
||||
"音效主音量",
|
||||
sfxVolume,
|
||||
setSfxVolume
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 配音主音量 */}
|
||||
<div className="p-4 rounded-xl bg-white/5 hover:bg-white/[0.07] transition-colors duration-200">
|
||||
{renderVolumeSlider(
|
||||
<Mic className="w-4 h-4 text-amber-500" />,
|
||||
"配音主音量",
|
||||
voiceVolume,
|
||||
setVoiceVolume
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
{/* 媒体音频主音量 */}
|
||||
<div className="p-4 rounded-xl bg-white/5 hover:bg-white/[0.07] transition-colors duration-200">
|
||||
{renderVolumeSlider(
|
||||
<Radio className="w-4 h-4 text-amber-500" />,
|
||||
"媒体音频主音量",
|
||||
mediaVolume,
|
||||
setMediaVolume
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 音乐主音量 */}
|
||||
<div className="p-4 rounded-xl bg-white/5 hover:bg-white/[0.07] transition-colors duration-200">
|
||||
{renderVolumeSlider(
|
||||
<Music className="w-4 h-4 text-amber-500" />,
|
||||
"音乐主音量",
|
||||
musicVolume,
|
||||
setMusicVolume
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 音量混合提示 */}
|
||||
<div className="flex items-center gap-3 px-4 py-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
|
||||
<div className="flex items-center justify-center w-8 h-8 rounded-full bg-amber-500/20">
|
||||
<Volume2 className="w-4 h-4 text-amber-500" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-amber-500">音量混合提示</p>
|
||||
<p className="text-xs text-amber-500/80 mt-0.5">
|
||||
建议保持音效、配音、媒体音频和音乐之间的适当平衡，以获得最佳听觉体验
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user