init

2025-10-20 13:06:06 +08:00
commit 9b45c4e3e8
48 changed files with 5843 additions and 0 deletions
@@ -0,0 +1,46 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { ArrowLeft } from 'lucide-react';
+
+type BackButtonProps = {
+  className?: string;
+  ariaLabel?: string;
+  hrefFallback?: string; // default '/'
+  children?: React.ReactNode; // custom icon/content; defaults to ArrowLeft
+};
+
+/**
+ * BackButton
+ * - Primary: behaves like browser back (router.back()), preserving previous page state (e.g., scroll, filters)
+ * - Fallback: if no history entry exists (e.g., opened directly), navigates to '/'
+ * - Uses <Link> so that Ctrl/Cmd-click or middle-click opens the fallback URL in a new tab naturally
+ */
+export default function BackButton({ className, ariaLabel = '返回', hrefFallback = '/', children }: BackButtonProps) {
+  const router = useRouter();
+
+  const onClick = React.useCallback<React.MouseEventHandler<HTMLAnchorElement>>((e) => {
+    // Respect modifier clicks (new tab/window) and non-left clicks
+    if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+
+    // Prefer SPA back when we have some history to go back to
+    if (typeof window !== 'undefined' && window.history.length > 1) {
+      e.preventDefault();
+      router.back();
+    }
+    // else: allow default <Link href> to navigate to fallback
+  }, [router]);
+
+  return (
+    <Link
+      href={hrefFallback}
+      aria-label={ariaLabel}
+      onClick={onClick}
+      className={className}
+    >
+      {children ?? <ArrowLeft size={18} />}
+    </Link>
+  );
+}
@@ -0,0 +1,195 @@
+"use client";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Link from 'next/link';
+import HoverVideo from './HoverVideo';
+import { ThumbsUp } from 'lucide-react';
+import type { FeedItem, FeedResponse } from '@/app/types/feed';
+
+type Props = {
+  initialItems: FeedItem[];
+  initialCursor: string | null;
+};
+
+export default function FeedMasonry({ initialItems, initialCursor }: Props) {
+  // 哨兵与容器
+  const [cursor, setCursor] = useState<string | null>(initialCursor);
+  const [loading, setLoading] = useState(false);
+  const [ended, setEnded] = useState(!initialCursor);
+
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  // 响应式列数：<640:1, >=640:2, >=1024:3, >=1280:4
+  const getColumnCount = useCallback(() => {
+    if (typeof window === 'undefined') return 1;
+    const w = window.innerWidth;
+    if (w >= 1280) return 4; // xl
+    if (w >= 1024) return 3; // lg
+    if (w >= 640) return 2;  // sm
+    return 1;
+  }, []);
+  const [columnCount, setColumnCount] = useState<number>(getColumnCount());
+
+  useEffect(() => {
+    const onResize = () => setColumnCount(getColumnCount());
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, [getColumnCount]);
+
+  // 估算卡片高度（用于分配到“最短列”）
+  const estimateItemHeight = useCallback((item: FeedItem, colWidth: number) => {
+    // 媒体区域高度
+    let mediaH = 200; // fallback
+    if (item.width && item.height) {
+      mediaH = Math.max(80, (Number(item.height) / Number(item.width)) * colWidth);
+    } else if (item.type === 'video') {
+      mediaH = (9 / 16) * colWidth; // 常见视频比例
+    }
+    // 文本 + 作者栏的高度粗估
+    const textH = 48; // 标题+标签区域
+    const authorH = 48; // 作者行
+    const gap = 16; // 卡片内边距/间隙
+    return mediaH + textH + authorH + gap;
+  }, []);
+
+  // 维护列数据与列高
+  const [columns, setColumns] = useState<FeedItem[][]>(() => {
+    const cols: FeedItem[][] = Array.from({ length: columnCount }, () => []);
+    return cols;
+  });
+  const [colHeights, setColHeights] = useState<number[]>(() => Array.from({ length: columnCount }, () => 0));
+
+  // 初始化与当列数变化时重排
+  useEffect(() => {
+    const containerWidth = containerRef.current?.clientWidth ?? 0;
+    const colWidth = columnCount > 0 ? containerWidth / columnCount : containerWidth;
+    // 用 initialItems 重排
+    const newCols: FeedItem[][] = Array.from({ length: columnCount }, () => []);
+    const newHeights: number[] = Array.from({ length: columnCount }, () => 0);
+    for (const item of initialItems) {
+      // 找最短列
+      let minIdx = 0;
+      for (let i = 1; i < columnCount; i++) {
+        if (newHeights[i] < newHeights[minIdx]) minIdx = i;
+      }
+      newCols[minIdx].push(item);
+      newHeights[minIdx] += estimateItemHeight(item, colWidth || 300);
+    }
+    setColumns(newCols);
+    setColHeights(newHeights);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columnCount]);
+
+  const fetchMore = useCallback(async () => {
+    if (loading || ended) return;
+    setLoading(true);
+    try {
+      const params = new URLSearchParams();
+      if (cursor) params.set('before', cursor);
+      params.set('limit', '24');
+      const res = await fetch(`/api/feed?${params.toString()}`, { cache: 'no-store' });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data: FeedResponse = await res.json();
+      // 将新数据按最短列分配
+      setColumns((prevCols) => {
+        const containerWidth = containerRef.current?.clientWidth ?? 0;
+        const colWidth = columnCount > 0 ? containerWidth / columnCount : containerWidth;
+        const cols = prevCols.map((c) => [...c]);
+        const heights = [...colHeights];
+        for (const item of data.items) {
+          // 找当前最短列
+          let minIdx = 0;
+          for (let i = 1; i < columnCount; i++) {
+            if (heights[i] < heights[minIdx]) minIdx = i;
+          }
+          cols[minIdx].push(item);
+          heights[minIdx] += estimateItemHeight(item, colWidth || 300);
+        }
+        setColHeights(heights);
+        return cols;
+      });
+      setCursor(data.nextCursor);
+      if (!data.nextCursor || data.items.length === 0) setEnded(true);
+    } catch (e) {
+      console.error('fetch more feed failed', e);
+      // 失败也不要死循环
+      setEnded(true);
+    } finally {
+      setLoading(false);
+    }
+  }, [cursor, ended, loading, columnCount, colHeights, estimateItemHeight]);
+
+  useEffect(() => {
+    const el = sentinelRef.current;
+    if (!el) return;
+    const io = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry.isIntersecting) {
+        fetchMore();
+      }
+    }, { rootMargin: '800px 0px 800px 0px' });
+    io.observe(el);
+    return () => io.disconnect();
+  }, [fetchMore]);
+
+  const renderCard = useCallback((item: FeedItem) => (
+    <Link key={item.aweme_id} href={`/aweme/${item.aweme_id}`} className="mb-4 block group">
+      <article className="relative overflow-hidden rounded-2xl shadow-sm ring-1 ring-black/5 bg-white/80 dark:bg-zinc-900/60 backdrop-blur-sm transition-transform duration-300 group-hover:-translate-y-1">
+        <div
+          className="relative w-full"
+          style={{ aspectRatio: `${(item.width && item.height) ? `${item.width}/${item.height}` : ''}` as any }}
+        >
+          {item.type === 'video' ? (
+            <HoverVideo
+              videoUrl={(item as any).video_url}
+              coverUrl={item.cover_url}
+              className="absolute inset-0 w-full h-full"
+            />
+          ) : (
+            <img
+              loading="lazy"
+              src={item.cover_url || '/placeholder.svg'}
+              alt={item.desc?.slice(0, 20) || 'image'}
+              className="absolute inset-0 w-full h-full object-cover"
+            />
+          )}
+          <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 via-black/0 to-black/0 opacity-70" />
+          <div className="absolute left-3 bottom-3 right-3 flex items-end justify-between gap-3">
+            <p className="text-white/95 text-sm leading-tight line-clamp-2 drop-shadow">
+              {item.desc}
+            </p>
+            <span className="shrink-0 inline-flex items-center gap-2 rounded-full bg-white/85 px-2 py-1 text-xs text-zinc-800">
+              {item.type === 'video' ? '视频' : '图文'}
+            </span>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2 p-3">
+          <div className="size-6 rounded-full overflow-hidden bg-zinc-200">
+            {item.author.avatar_url ? (
+              <img src={item.author.avatar_url} alt="avatar" className="w-full h-full object-cover" />
+            ) : null}
+          </div>
+          <span className="text-sm text-zinc-700 dark:text-zinc-300 truncate">{item.author.nickname}</span>
+          <span className="ml-auto text-sm text-zinc-700 dark:text-zinc-300">{item.likes} </span><ThumbsUp size={16} style={{ color: 'var(--color-zinc-700)' }} />
+        </div>
+      </article>
+    </Link>
+  ), []);
+
+  return (
+    <>
+      {/* Masonry（按列渲染，动态分配到最短列） */}
+      <div ref={containerRef} className="grid gap-4" style={{ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }}>
+        {columns.map((col, idx) => (
+          <div key={idx} className="flex flex-col">
+            {col.map((item) => renderCard(item))}
+          </div>
+        ))}
+      </div>
+      <div ref={sentinelRef} className="h-10 flex items-center justify-center text-sm text-zinc-500">
+        {ended ? '没有更多了' : (loading ? '加载中…' : '下拉加载更多')}
+      </div>
+    </>
+  );
+}
@@ -0,0 +1,66 @@
+'use client';
+
+import React, { useCallback, useRef, useState } from 'react';
+
+type HoverVideoProps = {
+  videoUrl: string;
+  coverUrl?: string | null;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+/**
+ * 鼠标移入才加载视频并自动播放，移出暂停并释放资源；默认显示封面。
+ */
+export default function HoverVideo({ videoUrl, coverUrl, className, style }: HoverVideoProps) {
+  const [active, setActive] = useState(false);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+
+  const onEnter = useCallback(() => {
+    setActive(true);
+    // 播放在下一帧触发，避免 ref 尚未赋值
+    requestAnimationFrame(() => {
+      const v = videoRef.current;
+      if (!v) return;
+      v.play().catch(() => {});
+    });
+  }, [videoUrl]);
+
+  const onLeave = useCallback(() => {
+    const v = videoRef.current;
+    if (v) {
+      try {
+        v.pause();
+        v.load();
+      } catch {}
+    }
+    setActive(false);
+  }, []);
+
+  return (
+    <div className={className} style={style} onMouseEnter={onEnter} onMouseLeave={onLeave}>
+      {/* 封面始终渲染在底层 */}
+      <img
+        src={coverUrl || '/placeholder.svg'}
+        alt="cover"
+        className="absolute inset-0 w-full h-full object-cover"
+        draggable={false}
+        loading='lazy'
+      />
+
+      {/* 仅在激活后渲染视频；初始不设置 src，防止提前加载 */}
+      {active ? (
+        <video
+          ref={videoRef}
+          muted
+          playsInline
+          loop
+          autoPlay
+          src={videoUrl}
+          preload="none"
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+      ) : null}
+    </div>
+  );
+}