第二版

2025-06-24 20:12:30 +08:00 · 2025-06-24 20:12:30 +08:00 · bb65acfe5e
commit bb65acfe5e
parent 0c338a540f
12 changed files with 1246 additions and 93 deletions
--- a/app/create/page.tsx
+++ b/app/create/page.tsx
@ -1,5 +1,7 @@
-import { redirect } from 'next/navigation';
+// import { redirect } from 'next/navigation';
+import { CreateToVideo } from '@/components/pages/create-to-video';

 export default function CreatePage() {
-  redirect('/create/video-to-video');
+  // redirect('/create/video-to-video');
+  return <CreateToVideo />;
 }
--- a/app/globals.css
+++ b/app/globals.css
@ -76,15 +76,16 @@
 body {
  height: 100vh;
  overflow: hidden;
-  background: radial-gradient(circle at 50% 0,
-      rgba(255, 0, 0, 0.3),
+  /* background: radial-gradient(circle at 50% 0,
+      rgba(255, 0, 0, 0.4),
      rgba(255, 0, 0, 0) 70.71%),
    radial-gradient(circle at 6.7% 75%,
-      rgba(0, 0, 255, 0.3),
+      rgba(0, 0, 255, 0.4),
      rgba(0, 0, 255, 0) 70.71%),
    radial-gradient(circle at 93.3% 75%,
-      rgba(0, 0, 255, 0.3),
-      rgba(0, 0, 255, 0) 70.71%) beige !important;
+      rgba(0, 0, 255, 0.4),
+      rgba(0, 0, 255, 0) 70.71%) beige !important; */
+  background: #6370b0 !important;
 }

 .hide-scrollbar::-webkit-scrollbar {
--- a/components/layout/dashboard-layout.tsx
+++ b/components/layout/dashboard-layout.tsx
@ -13,13 +13,18 @@ export function DashboardLayout({ children }: DashboardLayoutProps) {

  return (
    <div className="min-h-screen">
-      <Sidebar collapsed={sidebarCollapsed} onToggle={setSidebarCollapsed} />
-      <div className={`transition-all duration-300 ${sidebarCollapsed ? 'ml-16' : 'ml-64'}`}>
+      {/* <Sidebar collapsed={sidebarCollapsed} onToggle={setSidebarCollapsed} /> */}
+      {/* <div className={`transition-all duration-300 ${sidebarCollapsed ? 'ml-16' : 'ml-64'}`}> */}
+      {/* <div className={`transition-all duration-300`}>
        <TopBar collapsed={sidebarCollapsed} />
        <main className="p-6 mt-16">
          {children}
        </main>
-      </div>
+      </div> */}
+      <TopBar collapsed={sidebarCollapsed} />
+      <main className="mt-16 h-[calc(100vh-4rem)] overflow-hidden">
+        {children}
+      </main>
    </div>
  );
 }
--- a/components/layout/top-bar.tsx
+++ b/components/layout/top-bar.tsx
@ -17,14 +17,17 @@ import {
  LogOut,
  Bell,
 } from 'lucide-react';
+import { useRouter } from 'next/navigation';

 export function TopBar({ collapsed }: { collapsed: boolean }) {
  const { theme, setTheme } = useTheme();
+  const router = useRouter();

  return (
-    <div className={`fixed right-0 top-0 transition-all duration-300 h-16 border-border backdrop-blur ${collapsed ? 'left-16' : 'left-64'}`}>
+    // <div className={`fixed right-0 top-0 transition-all duration-300 h-16 border-border backdrop-blur ${collapsed ? 'left-16' : 'left-64'}`}>
+    <div className={`fixed right-0 top-0 transition-all duration-300 h-16 border-border backdrop-blur left-0`}>
      <div className="h-full flex items-center justify-between px-6">
-        <div className={`flex items-center space-x-4`}>
+        <div className={`flex items-center space-x-4 cursor-pointer`} onClick={() => router.push('/')}>
          <h1 className={`text-2xl font-bold bg-gradient-to-r from-primary to-blue-600 bg-clip-text text-transparent ${collapsed ? '' : 'hidden'}`}>Movie Flow</h1>
        </div>

@ -35,14 +38,14 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
          </Button>

          {/* Theme Toggle */}
-          <Button
+          {/* <Button
            variant="ghost"
            size="sm"
            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
          >
            <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
            <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          </Button>
+          </Button> */}

          {/* User Menu */}
          <DropdownMenu>
--- a/components/pages/create-to-video.tsx
+++ b/components/pages/create-to-video.tsx
--- a/components/pages/home-page2.tsx
+++ b/components/pages/home-page2.tsx
@ -1,45 +1,41 @@
 "use client";

 import { useState, useRef } from "react";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Plus, StretchHorizontal, Table } from "lucide-react";
 import "./style/home-page2.css";
 import { useRouter } from "next/navigation";

 export function HomePage2() {
  const router = useRouter();
+  const [activeTool, setActiveTool] = useState("stretch");
  return (
-    <div className="min-h-[100%]">
-      <div className="px-[16px] pb-[16px] min-w-[1100px] select-none overflow-hidden relative flex flex-col gap-8">
-        <div className="flex flex-row gap-[16px]">
-          <div className="tab-item" onClick={() => {
-            router.push("/create/video-to-video");
-          }}>
-            <div className="content-wrapper">
-              <div className="tab-title">Video To Video</div>
-              <div className="tab-description">Transform your video into a new style</div>
-              <div className="flex flex-row mt-[30px]">
-                <div className="tab-btn hover-btn cursor-pointer">
-                  {/* 图标 右箭头 */}
-                  <ArrowRight className="w-5 h-5 font-bold icon" />
-                  <div className="btn-text">Create</div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="tab-item">
-            <div className="content-wrapper">
-              <div className="tab-title">Script To Video</div>
-              <div className="tab-description">Transform your script into a video</div>
-              <div className="flex flex-row mt-[30px]">
-                <div className="tab-btn hover-btn cursor-pointer">
-                  {/* 图标 右箭头 */}
-                  <ArrowRight className="w-4 h-4 icon" />
-                  <div className="btn-text">Create</div>
-                </div>
-              </div>
-            </div>
+    <div className="min-h-[100%] flex relative">
+      {/* 工具栏-列表形式切换 */}
+      <div className="absolute top-0 right-6 w-[8rem] flex z-index-2 justify-end">
+        <div role="group" className="flex p-1 bg-white/20 backdrop-blur-[15px] w-full rounded-[3rem]">
+          <button 
+            className={`flex items-center justify-center h-10 transition-all duration-300 w-1/2 rounded-[3rem]
+              ${activeTool === "stretch" ? "bg-white/20 text-white" : "hover:bg-white/10 text-white/30"}`} 
+            onClick={() => setActiveTool("stretch")}
+          >
+            <StretchHorizontal className="w-5 h-5" />
+          </button>
+          <button 
+            className={`flex items-center justify-center h-10 transition-all duration-300 w-1/2 rounded-[3rem]
+              ${activeTool === "table" ? "bg-white/20 text-white" : "hover:bg-white/10 text-white/30"}`} 
+            onClick={() => setActiveTool("table")}
+          >
+            <Table className="w-5 h-5" />
+          </button>
        </div>
      </div>
+
+      <div className="fixed bottom-[3.5rem] left-[50%] translate-x-[-50%] bg-white/10 backdrop-blur-lg rounded-[32px]">
+        <button className="add-project-btn" onClick={() => router.push("/create")}>
+          {/* 添加图标 */}
+          <Plus className="w-6 h-6 icon" />
+          <div className="btn-text">Create Project</div>
+        </button>
      </div>
    </div>
  );
--- a/components/pages/style/create-to-video.css
+++ b/components/pages/style/create-to-video.css
@ -0,0 +1,61 @@
+.video-tool-component {
+  position: fixed;
+  left: 50%;
+  bottom: 1rem;
+  z-index: 99;
+  --tw-translate-x: calc(-50% + 34.5px);
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.video-storyboard-tools .tool-submit-button {
+  display: flex;
+  height: 36px;
+  width: 120px;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  border-radius: 10px;
+  font-size: .875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(29 33 41 / var(--tw-text-opacity));
+  background-color: #fff;
+}
+
+.video-storyboard-tools .tool-submit-button.disabled {
+  background-color: #fff;
+  opacity: .3;
+  cursor: not-allowed;
+}
+
+.storyboard-tools-tab {
+  border-radius: 16px 16px 0 0;
+  background: #ffffff0d;
+}
+
+.storyboard-tools-tab .tab-item {
+  position: relative;
+  cursor: pointer;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  line-height: 32px;
+}
+
+.storyboard-tools-tab .tab-item.active,
+.storyboard-tools-tab .tab-item.active span {
+  opacity: 1;
+}
+
+.storyboard-tools-tab .tab-item.active:after {
+  content: "";
+  position: absolute;
+  bottom: -8px;
+  left: 50%;
+  width: 30px;
+  height: 2px;
+  border-radius: 2px;
+  background-color: #fff;
+  transform: translate(-50%);
+}
--- a/components/pages/style/home-page2.css
+++ b/components/pages/style/home-page2.css
@ -1,49 +1,12 @@
-.tab-item:first-child {
-  position: relative;
-}
-.tab-item {
-  position: relative;
-  cursor: pointer;
-  --tw-bg-opacity: .2;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-backdrop-blur: blur(15px);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  flex: 1 1 0%;
-  border-radius: 16px;
-}
-
-.tab-item .content-wrapper {
-  position: relative;
-  height: 220px;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  overflow: hidden;
-  border-radius: 16px;
-  padding: 2rem;
-  background-position: left center, right center;
-}
-.tab-item .tab-title {
-  font-size: 36px;
-  font-weight: 600;
-  line-height: 64px;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-.tab-item .tab-description {
-  font-size: 16px;
-  font-weight: 300;
-  line-height: 22px;
-  color: rgba(255, 255, 255, 0.8);
-}
-.tab-item .tab-btn {
+.add-project-btn {
  display: flex;
  height: 40px;
  min-width: 168px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
-  --tw-bg-opacity: -0.5;
-  background-color: rgb(89 0 255 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 16px;
  padding-right: 16px;
  --tw-text-opacity: 1;
@ -54,22 +17,27 @@
  overflow: hidden;
  border-radius: 10px;
 }
-.tab-item .tab-btn .icon {
+.add-project-btn .icon {
  /* --tw-text-opacity: 1;
  color: rgb(29 33 41 / var(--tw-text-opacity)); */
  transform: translate(-100px);
  transition-property: transform;
  transition-duration: 0.3s;
 }
-.tab-item .tab-btn .btn-text {
+.add-project-btn .btn-text {
  transform: translate(-14px);
  transition-property: transform;
  transition-duration: 0.3s;
  font-weight: 600;
 }
-.tab-item:hover .hover-btn {
-  --tw-bg-opacity: 0.5;
+.add-project-btn:hover {
+  --tw-bg-opacity: 0.2;
 }
-.tab-item:hover .hover-btn .btn-text, .tab-item:hover .hover-btn .icon {
+.add-project-btn:hover .icon,
+.add-project-btn:hover .btn-text {
  transform: translate(0px);
 }
+.add-project-btn {
+  height: 8rem;
+  border-radius: 32px;
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -58,7 +58,9 @@
        "react": "18.2.0",
        "react-day-picker": "^8.10.1",
        "react-dom": "18.2.0",
+        "react-grid-layout": "^1.5.1",
        "react-hook-form": "^7.53.0",
+        "react-resizable": "^3.0.5",
        "react-resizable-panels": "^2.1.3",
        "recharts": "^2.12.7",
        "sonner": "^1.5.0",
@ -68,6 +70,9 @@
        "typescript": "5.2.2",
        "vaul": "^0.9.9",
        "zod": "^3.23.8"
+      },
+      "devDependencies": {
+        "@types/react-grid-layout": "^1.3.5"
      }
    },
    "node_modules/@alloc/quick-lru": {
@ -1942,6 +1947,16 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-grid-layout": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmmirror.com/@types/react-grid-layout/-/react-grid-layout-1.3.5.tgz",
+      "integrity": "sha512-WH/po1gcEcoR6y857yAnPGug+ZhkF4PaTUxgAbwfeSH/QOgVSakKHBXoPGad/sEznmkiaK3pqHk+etdWisoeBQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/scheduler": {
      "version": "0.23.0",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.23.0.tgz",
@ -5824,6 +5839,53 @@
        "react": "^18.2.0"
      }
    },
+    "node_modules/react-draggable": {
+      "version": "4.4.6",
+      "resolved": "https://registry.npmmirror.com/react-draggable/-/react-draggable-4.4.6.tgz",
+      "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
+    "node_modules/react-draggable/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react-grid-layout": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/react-grid-layout/-/react-grid-layout-1.5.1.tgz",
+      "integrity": "sha512-4Fr+kKMk0+m1HL/BWfHxi/lRuaOmDNNKQDcu7m12+NEYcen20wIuZFo789u3qWCyvUsNUxCiyf0eKq4WiJSNYw==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "fast-equals": "^4.0.3",
+        "prop-types": "^15.8.1",
+        "react-draggable": "^4.4.5",
+        "react-resizable": "^3.0.5",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3.0",
+        "react-dom": ">= 16.3.0"
+      }
+    },
+    "node_modules/react-grid-layout/node_modules/fast-equals": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmmirror.com/fast-equals/-/fast-equals-4.0.3.tgz",
+      "integrity": "sha512-G3BSX9cfKttjr+2o1O22tYMLq0DPluZnYtq1rXumE1SpL/F/SLIfHx08WYQoWSIpeMYf8sRbJ8++71+v6Pnxfg==",
+      "license": "MIT"
+    },
    "node_modules/react-hook-form": {
      "version": "7.53.0",
      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",
@ -5889,6 +5951,19 @@
        }
      }
    },
+    "node_modules/react-resizable": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmmirror.com/react-resizable/-/react-resizable-3.0.5.tgz",
+      "integrity": "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "15.x",
+        "react-draggable": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">= 16.3"
+      }
+    },
    "node_modules/react-resizable-panels": {
      "version": "2.1.4",
      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.4.tgz",
@ -6040,6 +6115,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmmirror.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
    "node_modules/resolve": {
      "version": "1.22.8",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
--- a/package.json
+++ b/package.json
@ -59,7 +59,9 @@
    "react": "18.2.0",
    "react-day-picker": "^8.10.1",
    "react-dom": "18.2.0",
+    "react-grid-layout": "^1.5.1",
    "react-hook-form": "^7.53.0",
+    "react-resizable": "^3.0.5",
    "react-resizable-panels": "^2.1.3",
    "recharts": "^2.12.7",
    "sonner": "^1.5.0",
@ -69,5 +71,8 @@
    "typescript": "5.2.2",
    "vaul": "^0.9.9",
    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/react-grid-layout": "^1.3.5"
  }
 }
--- a/public/assets/loading.gif
+++ b/public/assets/loading.gif