diff --git a/app/create/page.tsx b/app/create/page.tsx index dfb0e15..b392b28 100644 --- a/app/create/page.tsx +++ b/app/create/page.tsx @@ -1,7 +1,7 @@ // import { redirect } from 'next/navigation'; -import { CreateToVideo } from '@/components/pages/create-to-video'; +import { CreateToVideo2 } from '@/components/pages/create-to-video2'; export default function CreatePage() { // redirect('/create/video-to-video'); - return ; + return ; } \ No newline at end of file diff --git a/app/create/work-flow/page.tsx b/app/create/work-flow/page.tsx new file mode 100644 index 0000000..686015d --- /dev/null +++ b/app/create/work-flow/page.tsx @@ -0,0 +1,5 @@ +import WorkFlow from '@/components/pages/work-flow'; + +export default function ScriptWorkFlowPage() { + return ; +} \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index 9bf31fc..b052a78 100644 --- a/app/globals.css +++ b/app/globals.css @@ -6,6 +6,10 @@ --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; --background-end-rgb: 255, 255, 255; + --ui-hoverable: #a5b4c7; + --text-secondary: #a0aec0; + --text-primary: #fff; + --ui-level1-layerbase: #131416; } @media (prefers-color-scheme: dark) { @@ -18,35 +22,35 @@ @layer base { :root { - --background: 0 0% 100%; + --background: 0 0% 0%; --foreground: 0 0% 98%; - --card: 0 0% 100%; - --card-foreground: 0 0% 3.9%; - --popover: 0 0% 100%; - --popover-foreground: 0 0% 3.9%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; - --primary-foreground: 0 0% 98%; - --secondary: 0 0% 96.1%; - --secondary-foreground: 0 0% 9%; - --muted: 0 0% 96.1%; - --muted-foreground: 0 0% 45.1%; - --accent: 0 0% 96.1%; - --accent-foreground: 0 0% 9%; - --destructive: 0 84.2% 60.2%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; - --border: 0 0% 89.8%; - --input: 0 0% 89.8%; - --ring: 0 0% 3.9%; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; --radius: 0.5rem; } - .dark { - --background: 0 0% 3.9%; + .light { + --background: 0 0% 0%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; @@ -85,7 +89,11 @@ body { radial-gradient(circle at 93.3% 75%, rgba(0, 0, 255, 0.4), rgba(0, 0, 255, 0) 70.71%) beige !important; */ - background: #6370b0 !important; + background: #000000 !important; + /* background-image: url('https://picsum.photos/1200/1200'); + background-size: cover; + background-position: center; + background-repeat: no-repeat; */ } .hide-scrollbar::-webkit-scrollbar { @@ -100,4 +108,20 @@ body { body { @apply text-foreground; } +} + +.button-NxtqWZ { + color: var(--ui-hoverable) !important; + cursor: pointer; + background-color: #0000; + border: none; + border-radius: 8px; + padding: 8px; +} +.button-NxtqWZ:hover { + background-color: #2f3237 !important; +} + +.bg-muted { + width: 100%; } \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 7c41c63..0b97c6c 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -21,7 +21,7 @@ export default function RootLayout({ diff --git a/components/ai-suggestion-bar.tsx b/components/ai-suggestion-bar.tsx new file mode 100644 index 0000000..b09d31f --- /dev/null +++ b/components/ai-suggestion-bar.tsx @@ -0,0 +1,142 @@ +import { useState, useRef, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Sparkles, Send, X, Lightbulb } from 'lucide-react'; + +interface AISuggestionBarProps { + suggestions: string[]; + onSuggestionClick: (suggestion: string) => void; + onSubmit: (text: string) => void; + placeholder?: string; +} + +export function AISuggestionBar({ + suggestions, + onSuggestionClick, + onSubmit, + placeholder = "输入你的想法，或点击预设词条获取 AI 建议..." +}: AISuggestionBarProps) { + const [inputText, setInputText] = useState(''); + const [isFocused, setIsFocused] = useState(false); + const [showSuggestions, setShowSuggestions] = useState(false); + const inputRef = useRef(null); + + // 自动调整输入框高度 + useEffect(() => { + if (inputRef.current) { + inputRef.current.style.height = 'auto'; + inputRef.current.style.height = `${inputRef.current.scrollHeight}px`; + } + }, [inputText]); + + // 处理提交 + const handleSubmit = () => { + if (inputText.trim()) { + onSubmit(inputText.trim()); + setInputText(''); + if (inputRef.current) { + inputRef.current.style.height = 'auto'; + } + } + }; + + // 处理回车提交 + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + handleSubmit(); + } + }; + + return ( + +
+ {/* 智能预设词条 */} + + {showSuggestions && ( + +
+ + 智能预设词条 +
+
+ {suggestions.map((suggestion, index) => ( + onSuggestionClick(suggestion)} + > + + {suggestion} + + ))} +
+ + )} + + + {/* 输入区域 */} +
+