From 95ec751dcf8142725b5fa72a0808b3c52ddee8be Mon Sep 17 00:00:00 2001
From: moux1024 <403053463@qq.com>
Date: Fri, 17 Oct 2025 17:38:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0template=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FamousTemplate.tsx | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/components/FamousTemplate.tsx b/components/FamousTemplate.tsx
index 1b5c166..aec3ef1 100644
--- a/components/FamousTemplate.tsx
+++ b/components/FamousTemplate.tsx
@@ -2,7 +2,6 @@
 
 import type React from "react"
 import { useEffect, useState } from "react"
-import Link from "next/link"
 import { X } from "lucide-react"
 import { PcTemplateModal } from "@/components/ChatInputBox/PcTemplateModal"
 import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService"
@@ -22,19 +21,43 @@ const FamousTemplate: React.FC = () => {
   const [isItemGenerating, setIsItemGenerating] = useState<{ [key: string]: boolean }>({})
   const [activeTemplateId, setActiveTemplateId] = useState<string | null>(null)
   const [isPreviewReady, setIsPreviewReady] = useState(false)
+  const [activeTab, setActiveTab] = useState<"all" | "music" | "animation" | "thriller">("all")
 
   useEffect(() => {
     void getTemplateStoryList()
   }, [getTemplateStoryList])
 
-  const topTemplates = templateStoryList.slice(0, 10)
+  const filteredTemplates = templateStoryList.filter((t) => {
+    if (activeTab === "all") return true
+    const categories = (t.category || "").split(",").map((s) => s.trim().toLowerCase())
+    return categories.includes(activeTab)
+  })
+
+  const topTemplates = filteredTemplates
 
   return (
     <section data-alt="famous-template" className="w-full">
-      <div data-alt="famous-template-header" className="mb-4 flex items-center justify-between">
+      <div data-alt="famous-template-header" className="mb-4 flex items-center">
         <h2 data-alt="famous-template-title" className="text-xl py-4 font-semibold text-white">
-          Make Movie
+          Scene Sparks
         </h2>
+        <div data-alt="template-tabs" className="flex items-center gap-2 ml-4">
+          {(["all", "music", "animation", "thriller"] as const).map((tab) => (
+            <button
+              key={tab}
+              type="button"
+              data-alt={`template-tab-${tab}`}
+              onClick={() => setActiveTab(tab)}
+              className={`px-3 py-1 italic rounded-none text-sm transition-colors border ${
+                activeTab === tab
+                  ? "border-white/60 bg-white/80 text-slate-900"
+                  : "border-white/20 text-white/80 hover:border-white/40 hover:bg-white/10"
+              }`}
+            >
+              {tab.toUpperCase()}
+            </button>
+          ))}
+        </div>
       </div>
 
       {isLoading ? (