调整首页素材样式位置

components/pages/home-page2.tsx

@@ -107,7 +107,7 @@ export function HomePage2() {
 
   return (
     <div className="min-h-screen bg-[var(--background)]" ref={containerRef}>
-      <div className="min-h-[100%] flex relative">
+      <div className="flex relative" style={{height: 'calc(100vh - 4rem)'}}>
         {/* 工具栏-列表形式切换 */}
         <div className="absolute top-[1rem] right-6 w-[8rem] flex justify-end">
           <div role="group" className="flex p-1 bg-white/20 backdrop-blur-[15px] w-full rounded-[3rem]">
@@ -133,6 +133,11 @@ export function HomePage2() {
           className={`absolute top-[4rem] w-full transition-all duration-500
             ${activeTool === "stretch" ? "opacity-100 translate-x-0" : "opacity-0 translate-x-[-100%] pointer-events-none"}
           `}
+          style={{
+            height: 'calc(100% - 8rem)',
+            display: 'flex',
+            alignItems: 'center'
+          }}
         >
           <VideoScreenLayout videos={videos} />
         </div>
@@ -177,7 +182,7 @@ export function HomePage2() {
               )}
               <div className="btn-text text-lg font-medium bg-gradient-to-r text-white
                   bg-clip-text text-transparent">
-                {isCreating ? "Creating..." : "Create"}
+                {isCreating ? "Action..." : "Action"}
               </div>
             </motion.div>
           </motion.div>

components/video-screen-layout.tsx

@@ -22,6 +22,10 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
 
+  useEffect(() => {
+    setCurrentIndex(videos.length > 2 ? 1 : 0);
+  }, [videos.length]);
+
   // 确保视频refs数组长度与videos数组一致
   useEffect(() => {
     videoRefs.current = videoRefs.current.slice(0, videos.length);
@@ -139,7 +143,7 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
   };
 
   return (
-    <div className="relative w-full h-[360px] mt-[3rem] overflow-hidden bg-[var(--background)]">
+    <div className="relative w-full h-[360px] overflow-hidden bg-[var(--background)]">
       {/* 视频面板容器 */}
       <div 
         ref={containerRef}
@@ -166,6 +170,7 @@ function VideoScreenLayoutComponent({ videos }: VideoScreenLayoutProps) {
                 loop
                 muted={index === currentIndex ? isMuted : true} // 只有当前视频受状态控制
                 playsInline
+                preload="auto"
                 onLoadedData={() => {
                   if (index === currentIndex && videoRefs.current[index]) {
                     applyVolumeSettings(videoRefs.current[index]!);