Merge terry-staging into main

2026-05-28 17:56:40 +08:00
parent 459c051fc8 b6ba4d53e7
commit c480eea7b7
3 changed files with 52 additions and 33 deletions
--- a/src/components/RecommendedCard.tsx
+++ b/src/components/RecommendedCard.tsx
@@ -16,8 +16,13 @@ function isPlaceholderAsset(path: string | undefined | null) {
  return !path || path.includes("placeholder-cover");
 }

-const CARD_CLASS =
-  "group flex w-[208px] shrink-0 flex-col overflow-hidden rounded-xl border bg-[#1D1E23] transition hover:border-ark-gold/55 md:w-[240px] lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
+const CARD_BASE_CLASS =
+  "group flex shrink-0 flex-col overflow-hidden rounded-xl border bg-[#1D1E23] transition hover:border-ark-gold/55";
+
+const CARD_CAROUSEL_SIZE_CLASS =
+  "w-[208px] md:w-[240px] lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
+
+const CARD_GRID_SIZE_CLASS = "w-full max-w-[360px] md:max-w-none";

 type RecommendedResource = Resource & {
  downloadPostId?: string;
@@ -28,10 +33,12 @@ export function RecommendedCard({
  r,
  visualIndex = 0,
  useFigmaDesign = false,
+  layout = "carousel",
 }: {
  r: RecommendedResource;
  visualIndex?: number;
  useFigmaDesign?: boolean;
+  layout?: "carousel" | "grid";
 }) {
  const { t } = useI18n();
  const [isDownloading, setIsDownloading] = useState(false);
@@ -78,7 +85,9 @@ export function RecommendedCard({

  return (
    <article
-      className={`${CARD_CLASS} ${
+      className={`${CARD_BASE_CLASS} ${
+        layout === "grid" ? CARD_GRID_SIZE_CLASS : CARD_CAROUSEL_SIZE_CLASS
+      } ${
        useFigmaDesign
          ? "border-[#27292E]"
          : "border-transparent md:border-ark-line md:bg-ark-panel"
@@ -86,7 +95,7 @@ export function RecommendedCard({
    >
      <Link
        to={`/resource/${r.id}`}
-        className="relative block h-[108px] overflow-hidden bg-[#111116] md:aspect-[246.4/138.6] md:h-auto"
+        className="relative block aspect-[208/108] overflow-hidden bg-[#111116]"
      >
        {cover ? (
          <img
@@ -202,7 +211,7 @@ export function ComingSoonRecommendedCard({

  return (
    <article
-      className={`${CARD_CLASS} cursor-default border-transparent opacity-95 md:border-ark-line md:bg-ark-panel`}
+      className={`${CARD_BASE_CLASS} ${CARD_CAROUSEL_SIZE_CLASS} cursor-default border-transparent opacity-95 md:border-ark-line md:bg-ark-panel`}
      aria-label="即将到来"
    >
      <div className="relative block h-[108px] overflow-hidden bg-black md:aspect-[246.4/138.6] md:h-auto">
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -69,7 +69,7 @@ export function Home() {
      getJSON<{ items: Post[] }>(`/api/posts/recommended${postQ}&limit=12`),
      getJSON<{ items: Post[] }>(`/api/posts${postQ}&sort=latest&limit=5`),
      getJSON<{ items: Post[] }>(
-        `/api/posts${postQ}&sort=popular&limit=5`,
+        `/api/posts${postQ}&tag=popular&limit=5`,
      ).catch((): { items: Post[] } => ({ items: [] })),
    ])
      .then(([c, r, l, p]) => {
@@ -179,6 +179,7 @@ export function Home() {
  }, [hash, cats.length, rec.length, latest.length, popular.length]);

  const latestPlaceholderCount = Math.max(0, 5 - latest.length);
+  const hasPopular = popular.length > 0 || popularPosts.length > 0;
  const popularPlaceholderCount = Math.max(0, 5 - popular.length);
  const recommendedDotCount = rec.length;
  const activeRecommendedDot =
@@ -375,7 +376,7 @@ export function Home() {
            <MessageBubble key={post.id} post={post} />
          ))}
        </div>
-        <div className="mt-7 hidden gap-3 min-[576px]:grid-cols-2 md:grid md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
+        <div className="mt-7 hidden grid-cols-1 gap-3 min-[576px]:grid-cols-2 md:grid md:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
          {latest.map((r) => (
            <LatestUpdateRow key={r.id} r={r} iconKey={iconKeyForResource(r)} />
          ))}
@@ -388,31 +389,37 @@ export function Home() {
        </div>
      </section>

-      <section id="popular" className="scroll-mt-16 md:scroll-mt-24">
-        <div className="px-4 md:px-0">
-          <SectionHeader
-            title={t("popularSection")}
-            viewAllTo="/browse?sort=popular"
-            viewAllLabel={t("viewAll")}
-          />
-        </div>
-        <div className="flex flex-col gap-3 md:hidden">
-          {popularPosts.slice(0, 5).map((post) => (
-            <MessageBubble key={post.id} post={post} />
-          ))}
-        </div>
-        <div className="mt-7 hidden gap-3 min-[576px]:grid-cols-2 md:grid md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
-          {popular.map((r) => (
-            <LatestUpdateRow key={r.id} r={r} iconKey={iconKeyForResource(r)} />
-          ))}
-          {Array.from({ length: popularPlaceholderCount }).map((_, index) => (
-            <ComingSoonLatestUpdateRow
-              key={`popular-coming-soon-${index}`}
-              index={popular.length + index}
+      {hasPopular ? (
+        <section id="popular" className="scroll-mt-16 md:scroll-mt-24">
+          <div className="px-4 md:px-0">
+            <SectionHeader
+              title={t("popularSection")}
+              viewAllTo="/browse?sort=popular"
+              viewAllLabel={t("viewAll")}
            />
-          ))}
-        </div>
-      </section>
+          </div>
+          <div className="flex flex-col gap-3 md:hidden">
+            {popularPosts.slice(0, 5).map((post) => (
+              <MessageBubble key={post.id} post={post} />
+            ))}
+          </div>
+          <div className="mt-7 hidden grid-cols-1 gap-3 min-[576px]:grid-cols-2 md:grid md:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
+            {popular.map((r) => (
+              <LatestUpdateRow
+                key={r.id}
+                r={r}
+                iconKey={iconKeyForResource(r)}
+              />
+            ))}
+            {Array.from({ length: popularPlaceholderCount }).map((_, index) => (
+              <ComingSoonLatestUpdateRow
+                key={`popular-coming-soon-${index}`}
+                index={popular.length + index}
+              />
+            ))}
+          </div>
+        </section>
+      ) : null}

      {categoryUnavailableOpen ? (
        <div
--- a/src/pages/OfficialRecommendations/index.tsx
+++ b/src/pages/OfficialRecommendations/index.tsx
@@ -45,14 +45,17 @@ export function OfficialRecommendationsPage() {

  return (
    <section>
-      <SectionHeader title={t("officialSection")} />
-      <div className="mt-7 grid grid-cols-[repeat(auto-fill,208px)] justify-center gap-3 md:grid-cols-[repeat(auto-fill,240px)] md:justify-start md:gap-4 lg:grid-cols-[repeat(auto-fill,246.4px)]">
+      <div className="mx-auto max-w-full px-4 md:max-w-[820px] md:px-0 lg:max-w-[1080px] xl:max-w-[1180px]">
+        <SectionHeader title={t("officialSection")} />
+      </div>
+      <div className="mx-auto mt-7 grid max-w-full grid-cols-1 justify-items-center gap-3 px-4 min-[560px]:grid-cols-2 md:max-w-[820px] md:grid-cols-3 md:px-0 lg:max-w-[1080px] lg:grid-cols-4 xl:max-w-[1180px]">
        {items.map((item, index) => (
          <RecommendedCard
            key={item.id}
            r={item}
            visualIndex={index}
            useFigmaDesign
+            layout="grid"
          />
        ))}
      </div>