feat: polish figma mobile home and nav

2026-05-28 15:31:45 +08:00
parent e65c473369
commit 0e98428f64
17 changed files with 246 additions and 266 deletions
--- a/src/components/FigmaBanner.tsx
+++ b/src/components/FigmaBanner.tsx
@@ -172,8 +172,39 @@ export function FigmaBanner() {
    }
  };

+  const pagination = hasMultiple ? (
+    <div
+      className="flex items-center justify-center gap-1.5 md:gap-2"
+      role="tablist"
+      aria-label="Banner pagination"
+    >
+      {slides.map((slide, index) => {
+        const active = index === activeIndex;
+        return (
+          <button
+            key={slide.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            aria-label={`Go to slide ${index + 1}`}
+            onClick={() => {
+              pauseAutoplay();
+              setActiveIndex(index);
+              goTo(index, "smooth");
+            }}
+            className={`h-1.5 rounded-full transition-all ${
+              active
+                ? "w-6 bg-ark-gold"
+                : "w-1.5 bg-[#7C7C7C] hover:bg-white/50"
+            }`}
+          />
+        );
+      })}
+    </div>
+  ) : null;
+
  return (
-    <div>
+    <div className="relative">
      <div
        ref={scrollerRef}
        onPointerDown={handlePointerDown}
@@ -194,12 +225,12 @@ export function FigmaBanner() {
            aria-roledescription="slide"
            aria-label={`${index + 1} / ${slides.length}`}
          >
-            <picture className="block w-full overflow-hidden rounded-xl bg-black">
+            <picture className="block w-full overflow-hidden bg-black md:rounded-xl">
              <source media="(max-width: 767px)" srcSet={slide.mobile} />
              <img
                src={slide.desktop}
                alt={slide.alt}
-                className="pointer-events-none h-[200px] w-full object-cover md:h-auto"
+                className="pointer-events-none h-[219px] w-full object-cover md:h-auto"
                width={1280}
                height={290}
                loading={index === 0 ? "eager" : "lazy"}
@@ -212,34 +243,12 @@ export function FigmaBanner() {
      </div>

      {hasMultiple ? (
-        <div
-          className="mt-3 flex items-center justify-center gap-2"
-          role="tablist"
-          aria-label="Banner pagination"
-        >
-          {slides.map((slide, index) => {
-            const active = index === activeIndex;
-            return (
-              <button
-                key={slide.id}
-                type="button"
-                role="tab"
-                aria-selected={active}
-                aria-label={`Go to slide ${index + 1}`}
-                onClick={() => {
-                  pauseAutoplay();
-                  setActiveIndex(index);
-                  goTo(index, "smooth");
-                }}
-                className={`h-1.5 rounded-full transition-all ${
-                  active
-                    ? "w-6 bg-ark-gold"
-                    : "w-1.5 bg-white/30 hover:bg-white/50"
-                }`}
-              />
-            );
-          })}
-        </div>
+        <>
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 flex h-[30px] items-center justify-center bg-gradient-to-b from-[#14131900] to-[#141319] md:hidden">
+            <div className="pointer-events-auto">{pagination}</div>
+          </div>
+          <div className="mt-3 hidden md:block">{pagination}</div>
+        </>
      ) : null}
    </div>
  );
--- a/src/components/RecommendedCard.tsx
+++ b/src/components/RecommendedCard.tsx
@@ -16,7 +16,7 @@ function isPlaceholderAsset(path: string | undefined | null) {
 }

 const CARD_CLASS =
-  "group flex w-[232px] shrink-0 flex-col overflow-hidden rounded-xl border border-ark-line bg-ark-panel transition hover:border-ark-gold/55 max-[439px]:w-[232px] min-[440px]:w-[230px] sm:w-[240px] lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
+  "group flex w-[208px] shrink-0 flex-col overflow-hidden rounded-xl border border-transparent bg-[#1D1E23] transition hover:border-ark-gold/55 md:w-[240px] md:border-ark-line md:bg-ark-panel lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";

 type RecommendedResource = Resource & {
  downloadPostId?: string;
@@ -52,7 +52,7 @@ export function RecommendedCard({
    <article className={CARD_CLASS}>
      <Link
        to={`/resource/${r.id}`}
-        className="relative block aspect-[246.4/138.6] overflow-hidden bg-black"
+        className="relative block h-[108px] overflow-hidden bg-black md:aspect-[246.4/138.6] md:h-auto"
      >
        {cover ? (
          <img
@@ -70,14 +70,14 @@ export function RecommendedCard({
          </span>
        ) : null}
      </Link>
-      <div className="flex min-h-[121px] flex-1 flex-col p-4 pt-3">
+      <div className="flex min-h-[131px] flex-1 flex-col p-4 pt-3 md:min-h-[121px]">
        <Link
          to={`/resource/${r.id}`}
-          className="text-base font-bold leading-snug text-white line-clamp-2 hover:text-ark-gold2"
+          className="text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 hover:text-ark-gold2 md:text-base md:font-bold md:leading-snug"
        >
          {r.title}
        </Link>
-        <div className="mt-auto flex items-center justify-between gap-2 pt-4 text-xs text-ark-muted">
+        <div className="mt-auto flex items-center justify-between gap-2 pt-4 text-[12px] leading-[17.38px] text-ark-muted">
          <div className="min-w-0 truncate">
            <span className="text-neutral-400">{r.categoryName}</span>
            <span className="mx-1.5 text-ark-line">·</span>
@@ -144,7 +144,7 @@ export function ComingSoonRecommendedCard({
      className={`${CARD_CLASS} cursor-default opacity-95`}
      aria-label="即将到来"
    >
-      <div className="relative block aspect-[246.4/138.6] overflow-hidden bg-black">
+      <div className="relative block h-[108px] overflow-hidden bg-black md:aspect-[246.4/138.6] md:h-auto">
        <img
          src={cover}
          alt=""
@@ -155,8 +155,8 @@ export function ComingSoonRecommendedCard({
          即将到来
        </span>
      </div>
-      <div className="flex min-h-[121px] flex-1 flex-col p-4 pt-3">
-        <div className="text-base font-bold leading-snug text-white line-clamp-2">
+      <div className="flex min-h-[131px] flex-1 flex-col p-4 pt-3 md:min-h-[121px]">
+        <div className="text-[15px] font-semibold leading-[21.72px] text-white line-clamp-2 md:text-base md:font-bold md:leading-snug">
          即将到来
        </div>
        <div className="mt-auto pt-4 text-xs text-ark-muted">
--- a/src/components/SectionHeader.tsx
+++ b/src/components/SectionHeader.tsx
@@ -7,8 +7,8 @@ export function SectionHeader({
  viewAllLabel,
 }: {
  title: string;
-  viewAllTo: string;
-  viewAllLabel: string;
+  viewAllTo?: string;
+  viewAllLabel?: string;
 }) {
  return (
    <div className="flex h-[49px] items-center justify-between gap-4 md:h-6">
@@ -21,13 +21,15 @@ export function SectionHeader({
          {title}
        </h2>
      </div>
-      <Link
-        to={viewAllTo}
-        className="inline-flex shrink-0 items-center gap-1 text-[13px] font-normal leading-none text-ark-gold hover:text-ark-gold2 md:text-[15px] md:font-medium"
-      >
-        {viewAllLabel}
-        <ChevronRight className="h-4 w-4" strokeWidth={2.7} />
-      </Link>
+      {viewAllTo && viewAllLabel ? (
+        <Link
+          to={viewAllTo}
+          className="inline-flex shrink-0 items-center gap-1 text-[13px] font-normal leading-none text-ark-gold hover:text-ark-gold2 md:text-[15px] md:font-medium"
+        >
+          {viewAllLabel}
+          <ChevronRight className="h-4 w-4" strokeWidth={2.7} />
+        </Link>
+      ) : null}
    </div>
  );
 }
--- a/src/components/messageStream/FilterChips.tsx
+++ b/src/components/messageStream/FilterChips.tsx
@@ -33,7 +33,7 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
  return (
    <div className="sticky top-0 z-10 bg-ark-bg/95 backdrop-blur md:rounded-t-xl md:border-b md:border-ark-line">
      <div
-        className="relative flex items-end gap-2 overflow-x-auto overflow-y-hidden px-4 pr-8 [-ms-overflow-style:none] [scrollbar-width:none] md:gap-5 md:px-1 md:pr-1 [&::-webkit-scrollbar]:hidden"
+        className="flex items-end gap-2 overflow-x-auto overflow-y-hidden px-4 pr-10 [-ms-overflow-style:none] [scrollbar-width:none] md:gap-5 md:px-1 md:pr-1 [&::-webkit-scrollbar]:hidden"
        role="tablist"
      >
        {TYPE_FILTERS.map((tp) => {
@@ -51,11 +51,11 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
            </button>
          );
        })}
-        <div
-          className="pointer-events-none absolute right-0 top-0 hidden h-[52px] w-[114px] bg-gradient-to-l from-ark-bg via-ark-bg/85 to-transparent max-md:block"
-          aria-hidden
-        />
      </div>
+      <div
+        className="pointer-events-none absolute right-0 top-0 hidden h-[52px] w-10 bg-gradient-to-l from-ark-bg via-ark-bg/80 to-transparent max-md:block"
+        aria-hidden
+      />
    </div>
  );
 }