forked from 77media/video-flow
64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import { useState, useRef } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Sparkles, X, Plus, RefreshCw } from 'lucide-react';
|
|
import MainEditor from "./main-editor/MainEditor";
|
|
import { cn } from "@/public/lib/utils";
|
|
|
|
interface CharacterEditorProps {
|
|
className?: string;
|
|
}
|
|
|
|
const mockContent = [
|
|
{
|
|
type: 'paragraph',
|
|
content: [
|
|
{ type: 'highlightText', attrs: { text: 'Hello, world!', color: 'blue' } },
|
|
{ type: 'text', text: 'Hello, world!' },
|
|
{ type: 'highlightText', attrs: { text: 'Hello, world!', color: 'red' } },
|
|
{ type: 'text', text: 'Hello, world!' },
|
|
{ type: 'highlightText', attrs: { text: 'Hello, world!', color: 'green' } },
|
|
{ type: 'text', text: 'Hello, world!' },
|
|
{ type: 'highlightText', attrs: { text: 'Hello, world!', color: 'yellow' } },
|
|
{ type: 'text', text: 'Hello, world!' },
|
|
{ type: 'highlightText', attrs: { text: 'Hello, world!', color: 'purple' } },
|
|
{ type: 'text', text: 'Hello, world!' },
|
|
{ type: 'highlightText', attrs: { text: 'Hello, world!', color: 'orange' } },
|
|
{ type: 'text', text: 'Hello, world!' },
|
|
{ type: 'highlightText', attrs: { text: 'Hello, world!', color: 'pink' } },
|
|
{ type: 'text', text: 'Hello, world!' },
|
|
],
|
|
},
|
|
];
|
|
|
|
|
|
export default function CharacterEditor({
|
|
className,
|
|
}: CharacterEditorProps) {
|
|
const [isOptimizing, setIsOptimizing] = useState(false);
|
|
|
|
const handleSmartPolish = async () => {
|
|
|
|
};
|
|
|
|
return (
|
|
<div className={cn("space-y-2 border border-white/10 relative p-2 rounded-[0.5rem] pb-12", className)}>
|
|
{/* 自由输入区域 */}
|
|
<MainEditor content={mockContent} />
|
|
|
|
{/* 智能润色按钮 */}
|
|
<motion.button
|
|
onClick={handleSmartPolish}
|
|
disabled={isOptimizing}
|
|
className="absolute bottom-3 right-3 flex items-center gap-1.5 px-3 py-1.5
|
|
bg-purple-500/10 hover:bg-purple-500/20 text-purple-500 rounded-full
|
|
transition-colors text-xs disabled:opacity-50"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<Sparkles className="w-3.5 h-3.5" />
|
|
<span>{isOptimizing ? "优化中..." : "智能优化"}</span>
|
|
</motion.button>
|
|
</div>
|
|
);
|
|
}
|