xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

更新 模板选择底板扩展

Browse Source
This commit is contained in:
moux1024 2025-10-22 00:11:22 +08:00
parent 23c35f68f3
commit a4192ac71e
1 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/pages/create-video/CreateInput/VideoCreationForm.tsx
View File

@ -17,7 +17,7 @@ import { MobileConfigModal } from './MobileConfigModal';
import { AddItemModal } from './AddItemModal'; import { AddItemModal } from './AddItemModal';
import { defaultConfig } from './config-options'; import { defaultConfig } from './config-options';
import type { ConfigOptions } from './config-options'; import type { ConfigOptions } from './config-options';
import { Eye, Check, ArrowRight, X } from 'lucide-react'; import { CircleArrowRight, X } from 'lucide-react';
import TemplatePreviewModal from '@/components/common/TemplatePreviewModal'; import TemplatePreviewModal from '@/components/common/TemplatePreviewModal';
import { PcTemplateModal } from "@/components/ChatInputBox/PcTemplateModal" import { PcTemplateModal } from "@/components/ChatInputBox/PcTemplateModal"
import { useDeviceType } from '@/hooks/useDeviceType'; import { useDeviceType } from '@/hooks/useDeviceType';
@ -499,9 +499,25 @@ export default function VideoCreationForm() {
<div <div
key={tplKey} key={tplKey}
data-alt={`mention-template-item-${tplKey}`} data-alt={`mention-template-item-${tplKey}`}
className="group relative px-3 py-2 rounded-lg text-gray-200 hover:bg-white/10 transition-colors text-sm" className="group relative px-3 py-2 rounded-lg text-gray-200 hover:bg-white/10 transition-all duration-300 text-sm overflow-hidden hover:h-[106px]"
> >
<div className={`flex items-center gap-3 cursor-pointer ${tpl.pcode === configOptions.pcode ? 'text-custom-blue' : ''}`} {/* Background image on hover */}
{Array.isArray((tpl as any).image_url) && (tpl as any).image_url.length > 0 && (
<img
data-alt="mention-template-bg"
src={(tpl as any).image_url[0]}
alt=""
loading="lazy"
aria-hidden="true"
className="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300"
/>
)}
{/* Dark overlay for readability on hover */}
<div
data-alt="mention-template-overlay"
className="pointer-events-none absolute inset-0 bg-black/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
/>
<div className={`relative z-20 flex items-center gap-3 cursor-pointer h-full ${tpl.pcode === configOptions.pcode ? 'text-custom-blue' : ''}`}
onClick={() => { onClick={() => {
setIsMentionOpen(false); setIsMentionOpen(false);
const url = (tpl as any).show_url as string | undefined; const url = (tpl as any).show_url as string | undefined;
@ -513,9 +529,9 @@ export default function VideoCreationForm() {
} }
}} }}
> >
<span className="truncate">{tpl.name}</span> <span className="truncate group-hover:hidden">{tpl.name}</span>
{/* Floating actions on hover, right-aligned and overlaying the name */} {/* Floating actions on hover, right-aligned and overlaying the name */}
<div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity z-10"> <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity z-30">
<button <button
data-alt={`mention-template-use-${tplKey}`} data-alt={`mention-template-use-${tplKey}`}
className="px-0 py-1 text-xs rounded-full hover:text-custom-blue/80" className="px-0 py-1 text-xs rounded-full hover:text-custom-blue/80"
@ -527,9 +543,21 @@ export default function VideoCreationForm() {
applyTemplateSelection(selected); applyTemplateSelection(selected);
}} }}
> >
<ArrowRight className="w-3.5 h-3.5" /> <CircleArrowRight className="w-5 h-5" />
</button> </button>
</div> </div>
{/* Description at bottom on hover */}
<div
data-alt="mention-template-desc"
className="absolute top-0 left-0 right-0 bottom-0 text-xs text-white/90 opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all"
>
<div
data-alt="mention-template-desc-scroll"
className="overflow-hidden"
>
<div className="pr-5 line-clamp-5">{(tpl as any).generateText || tpl.name}</div>
</div>
</div>
</div> </div>
</div> </div>
); );