整体UI调整

src/components/more/more-page.tsx

@@ -1,20 +1,16 @@
 import { AdBannersSlot, AdIconsSlot, FriendLinksSlot, H5FriendLinksSlot } from "@/components/common/ads/slots";
-import Link from "next/link";
 import type { ReactNode } from "react";
 
 import { ChannelHeader, H5ChannelHeader } from "@/components/common/channel-header";
 import { Pagination } from "@/components/common/pagination";
 import { buildPageHrefMap } from "@/components/common/pagination-map";
-import { DecryptedImage } from "@/components/common/decrypted-image";
 import { FloatingActions } from "@/components/home/floating-actions";
-import { topicCountLabel, topicCoverSrc } from "@/components/home/home-module-style";
 import { DownloadBanner } from "@/components/home/page-sections";
 import { SeoBreadcrumb } from "@/components/seo/seo-breadcrumb";
 import type { ShortDramaItem } from "@/components/short-drama/data";
 import { H5ShortDramaCard, ShortDramaCard } from "@/components/short-drama/short-drama-card";
-import { topicDetailHref } from "@/components/topic/href";
+import { TopicListCard } from "@/components/topic/topic-list-card";
 import { H5VideoCard, VideoCard } from "@/components/video/video-card";
-import { IMG_PLACEHOLDER } from "@/lib/image/decrypt";
 
 import type { MorePageData } from "./data";
 import { moreListHref } from "./route";
@@ -47,48 +43,10 @@ function TopicGrid({
 }) {
   if (!topics.length) return null;
   return (
-    <div className={compact ? "grid grid-cols-2 gap-[7px]" : "grid grid-cols-2 gap-5 lg:grid-cols-4"}>
-      {topics.map((topic) => {
-        const cover = topicCoverSrc(topic);
-        const countText = topicCountLabel(topic, dataType, "部");
-        return (
-          <Link
-            key={topic.id}
-            href={topicDetailHref(topic, dataType)}
-            className={`relative overflow-hidden rounded-lg bg-[#110F1F] ${compact ? "aspect-[16/10]" : "h-[231px]"}`}
-          >
-            <DecryptedImage
-              src={cover}
-              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]"
-                    : "truncate text-2xl leading-8 font-medium text-[#F2F2FA]"
-                }
-              >
-                {topic.name}
-              </h3>
-              {countText ? (
-                <span
-                  className={
-                    compact
-                      ? "mt-1 inline-flex rounded bg-black/50 px-1.5 py-0.5 text-[10px] text-[#F68804]"
-                      : "mt-3 inline-flex rounded bg-black/50 px-2.5 py-1 text-xs text-[#F68804]"
-                  }
-                >
-                  {countText}
-                </span>
-              ) : null}
-            </div>
-          </Link>
-        );
-      })}
+    <div className={compact ? "grid grid-cols-2 gap-x-2.5 gap-y-4" : "grid grid-cols-2 gap-x-5 gap-y-7 lg:grid-cols-4"}>
+      {topics.map((topic) => (
+        <TopicListCard key={topic.id} topic={topic} dataType={dataType} compact={compact} />
+      ))}
     </div>
   );
 }