From a4192ac71e75e0db83b091147caaf2d0a2a037d1 Mon Sep 17 00:00:00 2001
From: moux1024 <403053463@qq.com>
Date: Wed, 22 Oct 2025 00:11:22 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20=E6=A8=A1=E6=9D=BF?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=BA=95=E6=9D=BF=E6=89=A9=E5=B1=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CreateInput/VideoCreationForm.tsx         | 40 ++++++++++++++++---
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/components/pages/create-video/CreateInput/VideoCreationForm.tsx b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
index a9fd171..6dc0a32 100644
--- a/components/pages/create-video/CreateInput/VideoCreationForm.tsx
+++ b/components/pages/create-video/CreateInput/VideoCreationForm.tsx
@@ -17,7 +17,7 @@ import { MobileConfigModal } from './MobileConfigModal';
 import { AddItemModal } from './AddItemModal';
 import { defaultConfig } 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 { PcTemplateModal } from "@/components/ChatInputBox/PcTemplateModal"
 import { useDeviceType } from '@/hooks/useDeviceType';
@@ -499,9 +499,25 @@ export default function VideoCreationForm() {
                                                     <div
                                                         key={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={() => {
                                                                 setIsMentionOpen(false);
                                                                 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 */}
-                                                            <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
                                                                     data-alt={`mention-template-use-${tplKey}`}
                                                                     className="px-0 py-1 text-xs rounded-full hover:text-custom-blue/80"
@@ -527,9 +543,21 @@ export default function VideoCreationForm() {
                                                                         applyTemplateSelection(selected);
                                                                     }}
                                                                 >
-                                                                    <ArrowRight className="w-3.5 h-3.5" />
+                                                                    <CircleArrowRight className="w-5 h-5" />
                                                                 </button>
                                                             </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>
                                                 );