From 7f0545f3cf6ee939c1cf16b223ea694992e91f90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Mon, 30 Jun 2025 10:47:55 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/pages/home-page2.tsx        |  43 ++---
 components/ui/settings-tab-content.tsx | 237 ++++++++++++++-----------
 2 files changed, 152 insertions(+), 128 deletions(-)

diff --git a/components/pages/home-page2.tsx b/components/pages/home-page2.tsx
index 388439a..461ba46 100644
--- a/components/pages/home-page2.tsx
+++ b/components/pages/home-page2.tsx
@@ -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>
diff --git a/components/ui/settings-tab-content.tsx b/components/ui/settings-tab-content.tsx
index d62e730..bb5695a 100644
--- a/components/ui/settings-tab-content.tsx
+++ b/components/ui/settings-tab-content.tsx
@@ -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>