优化顶部导航栏和媒体查看器,添加完成状态标签,调整按钮样式

This commit is contained in:
北枳 2025-08-31 02:11:43 +08:00
parent 64bd73db29
commit 787529fa18
4 changed files with 28 additions and 21 deletions

View File

@ -207,7 +207,7 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
</div> </div>
{isLogin ? ( {isLogin ? (
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-2">
{/* Pricing Link */} {/* Pricing Link */}
{pathname === "/" ? ( {pathname === "/" ? (
<div <div
@ -263,6 +263,7 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
data-alt="user-menu-trigger" data-alt="user-menu-trigger"
style={{ style={{
background: "unset !important", background: "unset !important",
padding: "unset !important",
}} }}
> >
<div className="h-10 w-10 rounded-full bg-[#C73BFF] flex items-center justify-center text-white font-semibold"> <div className="h-10 w-10 rounded-full bg-[#C73BFF] flex items-center justify-center text-white font-semibold">
@ -320,7 +321,7 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
</div> </div>
{/* 操作按钮区域 */} {/* 操作按钮区域 */}
<div className="flex-1 flex flex-row justify-center items-end space-x-2 pb-2"> <div className="flex-1 flex flex-row justify-center items-end">
<button <button
className="flex-1 bg-transparent border border-white/30 text-white text-xs py-0.5 h-6 rounded hover:bg-white/10 transition-colors" className="flex-1 bg-transparent border border-white/30 text-white text-xs py-0.5 h-6 rounded hover:bg-white/10 transition-colors"
onClick={() => { onClick={() => {

View File

@ -349,6 +349,21 @@ export const MediaViewer = React.memo(function MediaViewer({
{memoizedFinalVideoElement} {memoizedFinalVideoElement}
</motion.div> </motion.div>
{/* 完成状态标签 */}
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.8, duration: 0.6 }}
className="absolute top-4 left-4 z-20"
>
<div className="px-3 py-1.5 rounded-lg bg-white/10 backdrop-blur-md border border-white/20 shadow-lg">
<div className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-emerald-500"></div>
<span className="text-sm font-medium text-white">completed</span>
</div>
</div>
</motion.div>
{/* 操作按钮组 */} {/* 操作按钮组 */}
{/* <AnimatePresence> {/* <AnimatePresence>
<motion.div <motion.div
@ -467,7 +482,7 @@ export const MediaViewer = React.memo(function MediaViewer({
}}> }}>
{/* 添加到chat去编辑 按钮 */} {/* 添加到chat去编辑 按钮 */}
<Tooltip placement="top" title="Edit video with chat"> <Tooltip placement="top" title="Edit video with chat">
<GlassIconButton icon={Video} size='sm' text="Edit with chat" onClick={() => { <GlassIconButton icon={Edit3} size='sm' onClick={() => {
const currentVideo = taskObject.videos.data[currentSketchIndex]; const currentVideo = taskObject.videos.data[currentSketchIndex];
if (currentVideo && currentVideo.urls && currentVideo.urls.length > 0 && setVideoPreview) { if (currentVideo && currentVideo.urls && currentVideo.urls.length > 0 && setVideoPreview) {
setVideoPreview(currentVideo.urls[0], currentVideo.video_id); setVideoPreview(currentVideo.urls[0], currentVideo.video_id);

View File

@ -249,17 +249,7 @@ export function TaskInfo({
/> />
{currentLoadingText === 'Task completed' ? ( {currentLoadingText === 'Task completed' ? (
<motion.div <></>
className="flex items-center gap-3 justify-center"
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<div className="flex items-center gap-2">
<CheckCircle className="w-5 h-5 text-emerald-500" />
<span className="text-emerald-500 font-medium">{currentLoadingText}</span>
</div>
</motion.div>
) : ( ) : (
<motion.div <motion.div
className="flex items-center gap-2 justify-center" className="flex items-center gap-2 justify-center"

View File

@ -114,15 +114,16 @@ export function useWorkflowData() {
}, [taskObject.currentStage]); }, [taskObject.currentStage]);
const generateEditPlan = useCallback(async () => { const generateEditPlan = useCallback(async () => {
// await getGenerateEditPlan({ project_id: episodeId }); window.open(`https://smartcut.huiying.video/ai-editor/${episodeId}?token=${token}&user_id=${useid}`, '_target');
window.open(`https://smartcut.huiying.video/ai-editor/${episodeId}?token=${token}&user_id=${useid}`, '_blank');
}, [episodeId]); }, [episodeId]);
// useEffect(() => { useEffect(() => {
// if (!from && canGoToCut) { if (!from && canGoToCut && taskObject.status !== 'COMPLETED') {
// generateEditPlan(); getGenerateEditPlan({ project_id: episodeId }).then(() => {
// } generateEditPlan();
// }, [canGoToCut]); });
}
}, [canGoToCut, taskObject.status]);
useUpdateEffect(() => { useUpdateEffect(() => {