菜单添加页面模板管理页面，增加一个纯图平铺模板，优化预览手机屏效果

audi-content-portal/src/components/content-library/templates/topic-page/TopicPagePreview.tsx

@@ -0,0 +1,79 @@
+import { ChevronLeft, MoreHorizontal, X } from "lucide-react"
+import type { PreviewProps } from "../../types"
+import { createTopicSectionsFromImages } from "./helpers"
+
+export function TopicPagePreview({ content }: PreviewProps) {
+  const topicSections = (content.topicSections && content.topicSections.length > 0)
+    ? content.topicSections
+    : createTopicSectionsFromImages(content.imageUrls)
+
+  return (
+    <div className="relative flex h-[780px] w-[360px] flex-col overflow-hidden rounded-[28px] border border-gray-200 bg-white text-[#1a1a1a] shadow-2xl">
+      <div className="flex h-11 items-end justify-between bg-white px-8 pb-2 text-[15px] font-semibold tracking-tight text-[#1a1a1a]">
+        <span>9:41</span>
+        <div className="flex items-center gap-1.5 pb-1">
+          <svg width="17" height="11" viewBox="0 0 17 11" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M0 8.35L2.83 8.35L2.83 10.5H0V8.35ZM4.25 6.2H7.08V10.5H4.25V6.2ZM8.5 4.05H11.33V10.5H8.5V4.05ZM12.75 1.9H15.58V10.5H12.75V1.9Z" fill="#1a1a1a" />
+          </svg>
+          <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path d="M8 12L16 3.10931C11.5768 -0.493103 4.42323 -0.493103 0 3.10931L8 12Z" fill="#1a1a1a" />
+          </svg>
+          <div className="relative h-[11.33px] w-[24.33px] rounded-[3px] border border-black/35 p-[1px]">
+            <div className="h-full w-[18px] rounded-[1px] bg-[#1a1a1a]" />
+            <div className="absolute -right-[3px] top-[3px] h-[5px] w-[2px] rounded-r-[1px] bg-black/35" />
+          </div>
+        </div>
+      </div>
+
+      <header className="flex h-14 items-center justify-between bg-white px-4">
+        <button className="p-2 text-[#1a1a1a]" type="button" aria-label="返回">
+          <ChevronLeft className="h-6 w-6" />
+        </button>
+        <h1 className="text-lg font-medium tracking-wide">{content.topicNavTitle || `${content.sourceCarName || "车型"}详情`}</h1>
+        <div className="flex h-8 items-center rounded-full border border-gray-200 bg-gray-50 px-1">
+          <button className="border-r border-gray-200 px-2 text-gray-500" type="button" aria-label="更多">
+            <MoreHorizontal className="h-4 w-4" />
+          </button>
+          <button className="px-2 text-gray-500" type="button" aria-label="关闭">
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      </header>
+
+      <main className="min-h-0 flex-1 overflow-y-auto pb-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <section className="pt-4 pb-3 text-center">
+          <h2 className="mb-1 text-[28px] font-bold tracking-tight">{content.topicHeroTitle || "先锋设计"}</h2>
+          <div className="w-12 h-[3px] bg-[#d51c2a] mx-auto" />
+        </section>
+
+        <div className="space-y-2 px-0">
+          {topicSections.map((section) => (
+            <section key={section.id} className="bg-[#f8f9fb] rounded-t-[32px] overflow-hidden">
+              <div className="aspect-[16/9] relative overflow-hidden">
+                {section.imageUrl ? (
+                  <img
+                    src={section.imageUrl}
+                    alt={section.title}
+                    className="w-full h-full object-cover mix-blend-multiply"
+                  />
+                ) : (
+                  <div className="w-full h-full flex items-center justify-center text-xs text-gray-500 bg-gray-100">请添加模块图片</div>
+                )}
+              </div>
+              <div className="px-5 py-1.5">
+                <h3 className="text-[19px] font-normal text-gray-700">{section.title}</h3>
+              </div>
+            </section>
+          ))}
+        </div>
+      </main>
+
+      <footer className="shrink-0 border-t border-gray-100 bg-white/80 px-4 pt-2 pb-4 backdrop-blur-md">
+        <button className="w-full rounded-md bg-[#1c1f23] py-3 text-[15px] font-medium text-white">
+          {content.ctaText || "预约体验"}
+        </button>
+        <div className="mx-auto mt-3 h-1 w-24 rounded-full bg-black/80" />
+      </footer>
+    </div>
+  )
+}