兼容H5热门模板标题样式

This commit is contained in:
北枳 2025-10-21 23:13:54 +08:00
parent 9bea0715f3
commit 23c35f68f3

View File

@ -8,6 +8,7 @@ import { PcTemplateModal } from "@/components/ChatInputBox/PcTemplateModal"
import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService" import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService"
import { useAppDispatch } from "@/lib/store/hooks" import { useAppDispatch } from "@/lib/store/hooks"
import { selectTemplateById } from "@/lib/store/creationTemplateSlice" import { selectTemplateById } from "@/lib/store/creationTemplateSlice"
import { useDeviceType } from "@/hooks/useDeviceType"
/** /**
* A compact template showcase with a header and link to all templates. * A compact template showcase with a header and link to all templates.
@ -17,6 +18,7 @@ import { selectTemplateById } from "@/lib/store/creationTemplateSlice"
const FamousTemplate: React.FC = () => { const FamousTemplate: React.FC = () => {
const { templateStoryList, getTemplateStoryList, isLoading } = useTemplateStoryServiceHook() const { templateStoryList, getTemplateStoryList, isLoading } = useTemplateStoryServiceHook()
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const { isDesktop } = useDeviceType()
const [isModalOpen, setIsModalOpen] = useState(false) const [isModalOpen, setIsModalOpen] = useState(false)
const [initialTemplateId, setInitialTemplateId] = useState<string | undefined>(undefined) const [initialTemplateId, setInitialTemplateId] = useState<string | undefined>(undefined)
@ -41,11 +43,11 @@ const FamousTemplate: React.FC = () => {
return ( return (
<section data-alt="famous-template" className="w-full"> <section data-alt="famous-template" className="w-full">
<div data-alt="famous-template-header" className="mb-4 flex items-center"> <div data-alt="famous-template-header" className={`mb-4 items-center ${isDesktop ? 'flex' : 'block'}`}>
<h2 data-alt="famous-template-title" className="text-xl py-4 font-semibold text-white"> <h2 data-alt="famous-template-title" className="text-xl py-4 font-semibold text-white">
Hot Templates Hot Templates
</h2> </h2>
<div data-alt="template-tabs" className="flex flex-wrap items-center gap-2 ml-4"> <div data-alt="template-tabs" className={`flex flex-wrap items-center gap-2 ${isDesktop ? 'ml-4' : 'ml-0'}`}>
{(["all", "music", "animation", "fantasy"] as const).map((tab) => ( {(["all", "music", "animation", "fantasy"] as const).map((tab) => (
<button <button
key={tab} key={tab}