整体UI调整

src/components/topic/topic-page.tsx

@@ -1,18 +1,13 @@
-import Link from "next/link";
 
 import { AdBannersSlot, AdIconsSlot, FriendLinksSlot, H5FriendLinksSlot } from "@/components/common/ads/slots";
 import { ChannelHeader, H5ChannelHeader } from "@/components/common/channel-header";
-import { DecryptedImage } from "@/components/common/decrypted-image";
 import { FilterChipLink, FilterOptionLink } from "@/components/common/filter-link";
-import { MEDIA_CARD_TITLE_PC } from "@/components/common/media-card-hover";
 import { Pagination } from "@/components/common/pagination";
 import { buildPageHrefMap } from "@/components/common/pagination-map";
 import { FloatingActions } from "@/components/home/floating-actions";
-import { topicCoverSrc } from "@/components/home/home-module-style";
 import { DownloadBanner } from "@/components/home/page-sections";
 import { SeoBreadcrumb } from "@/components/seo/seo-breadcrumb";
 import type { HomeTopicData, PlayletData, VideoInfo } from "@/lib/api/types";
-import { IMG_PLACEHOLDER } from "@/lib/image/decrypt";
 
 import {
   isTopicVideo,
@@ -20,9 +15,9 @@ import {
   unwrapTopicListItem,
   type TopicPageData,
 } from "./data";
-import { topicDetailHref } from "./href";
 import { topicListHref, topicSortOptions } from "./route";
 import { TopicPlayletCard, TopicVideoCard } from "./topic-cards";
+import { TopicListCard } from "./topic-list-card";
 
 const layouts = {
   playlet: {
@@ -54,34 +49,9 @@ function MoreTopicGrid({
   return (
     <section className="flex flex-col gap-3 lg:gap-5">
       <h2 className={compact ? "text-base font-medium text-white" : "text-xl font-medium text-white"}>更多专题</h2>
-      <div className={compact ? "grid grid-cols-2 gap-[7px]" : gridClassName}>
+      <div className={compact ? "grid grid-cols-2 gap-x-2.5 gap-y-4" : gridClassName}>
         {topics.map((topic) => (
-          <Link
-            key={topic.id}
-            href={topicDetailHref(topic, dataType)}
-            className={`relative overflow-hidden rounded-lg bg-[#110F1F] ${
-              compact ? (dataType === 2 ? "aspect-[7/4]" : "aspect-[16/10]") : "h-[231px]"
-            }`}
-          >
-            <DecryptedImage
-              src={topicCoverSrc(topic)}
-              fallback={IMG_PLACEHOLDER}
-              alt={topic.name || ""}
-              className="absolute inset-0 h-full w-full object-cover object-center"
-            />
-            <div className="absolute inset-0 bg-[radial-gradient(ellipse_38.85%_58.45%_at_66.18%_60.1%,rgba(255,255,255,0)_0%,rgba(0,0,0,0.55)_100%)]" />
-            <div className={compact ? "absolute bottom-3 left-3 right-3" : "absolute bottom-6 left-8 right-8"}>
-              <h3
-                className={
-                  compact
-                    ? "truncate text-base font-medium text-[#F2F2FA]"
-                    : `text-[#F2F2FA] ${MEDIA_CARD_TITLE_PC}`
-                }
-              >
-                {topic.name}
-              </h3>
-            </div>
-          </Link>
+          <TopicListCard key={topic.id} topic={topic} dataType={dataType} compact={compact} />
         ))}
       </div>
     </section>