feat: 增强RecordModal组件以支持图片预览和滚动聚焦功能

1. 添加图片预览功能，允许用户查看封面和头像的大图。 2. 实现滚动聚焦功能，确保在打开模态框时高亮显示特定记录。 3. 更新样式以改善用户体验，包括滚动时的背景变化和记录项的闪烁效果。 4. 引入新的动画效果，提升用户交互的视觉反馈。
2026-09-03 06:24:24 +08:00 · 2026-08-31 14:43:08 +08:00
parent 4554d02c6a
commit c657a95d43
6 changed files with 215 additions and 56 deletions
--- a/src/components/RecordModal/RecordItem.tsx
+++ b/src/components/RecordModal/RecordItem.tsx
@@ -20,6 +20,7 @@ interface Props {
  location?: string;
  createTime?: string | number | Date;
  user: Pick<User, 'avatar' | 'name'> | null;
+  highlighted?: boolean;
 }

 interface Particle {
@@ -29,20 +30,32 @@ interface Particle {
  rot: number;
 }

-export default function RecordItem({ id, content, images, likeCount, mood, location, createTime, user }: Props) {
+export default function RecordItem({
+  id,
+  content,
+  images,
+  likeCount,
+  mood,
+  location,
+  createTime,
+  user,
+  highlighted,
+}: Props) {
  const imageList: string[] = Array.isArray(images) ? images : JSON.parse((images as string) ?? '[]');
  const { count, like } = useDebouncedLike(Number(id), likeCount ?? 0, likeRecordAction);
  const [showComments, setShowComments] = useState(false);
  const [commentCount, setCommentCount] = useState(0);
  const [popping, setPopping] = useState(false);
  const [countBump, setCountBump] = useState(false);
+  const [burst, setBurst] = useState(false);
  const [particles, setParticles] = useState<Particle[]>([]);
  const particleIdRef = useRef(0);
+  const lastTapRef = useRef(0);

  useEffect(() => {
    getRecordCommentListAPI(Number(id), { pageNum: 1, pageSize: 1 })
      .then(({ data }) => setCommentCount(data.total ?? 0))
-      .catch(() => { });
+      .catch(() => {});
  }, [id]);

  const handleLike = () => {
@@ -69,29 +82,61 @@ export default function RecordItem({ id, content, images, likeCount, mood, locat
    }, 650);
  };

+  const handleContentTap = () => {
+    const now = Date.now();
+    if (now - lastTapRef.current < 320) {
+      handleLike();
+      setBurst(true);
+      window.setTimeout(() => setBurst(false), 560);
+      lastTapRef.current = 0;
+      return;
+    }
+    lastTapRef.current = now;
+  };
+
  return (
-    <article className="flex gap-3 border-b border-gray-50 bg-white px-4 py-3.5 dark:border-white/10 dark:bg-[#1e2430]">
-      <img
-        src={user?.avatar}
-        alt={user?.name ?? '作者'}
-        width={40}
-        height={40}
-        className="mt-0.5 h-10 w-10 shrink-0 rounded-md object-cover"
-      />
-      <div className="min-w-0 flex-1">
-        <p className="m-0 text-[15px] font-medium text-[#576b95] dark:text-[#7b93c4]">
+    <article
+      data-record-id={id}
+      className={`relative flex gap-2.5 border-b border-[#f0f0f0] bg-white px-4 py-3 dark:border-white/8 dark:bg-[#1e2430] ${
+        highlighted ? 'record-item-flash' : ''
+      }`}
+    >
+      {user?.avatar ? (
+        <img
+          src={user.avatar}
+          alt={user.name ?? '作者'}
+          width={40}
+          height={40}
+          className="mt-0.5 h-10 w-10 shrink-0 rounded-md object-cover"
+        />
+      ) : (
+        <div className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-[#eee] text-sm text-[#999] dark:bg-[#323e50] dark:text-slate-400">
+          {(user?.name ?? '我').slice(0, 1)}
+        </div>
+      )}
+      <div className="relative min-w-0 flex-1">
+        <p className="m-0 text-[15px] font-medium leading-snug text-[#576b95] dark:text-[#7b93c4]">
          {user?.name}
-          {mood ? <span className="ml-1.5 font-normal">{mood}</span> : null}
+          {mood ? <span className="ml-1 font-normal opacity-80">{mood}</span> : null}
        </p>
-        <p className="mt-1 whitespace-pre-wrap wrap-break-word text-[15px] leading-[1.55] text-[#191919] dark:text-slate-200">
+        <button
+          type="button"
+          onClick={handleContentTap}
+          className="mt-0.5 w-full cursor-pointer border-0 bg-transparent p-0 text-left whitespace-pre-wrap wrap-break-word text-[15px] leading-[1.5] text-[#191919] dark:text-slate-200"
+        >
          {content}
-        </p>
+        </button>
+        {burst && (
+          <span className="record-double-tap-heart pointer-events-none absolute left-1/2 top-1/3 z-10 -translate-x-1/2 text-[#fa5151]">
+            <RiHeartFill className="h-10 w-10 drop-shadow" />
+          </span>
+        )}
        {imageList.length > 0 && (
-          <div className="mt-2.5">
+          <div className="mt-2">
            <ImageList list={imageList} />
          </div>
        )}
-        <div className="mt-2 flex items-end justify-between gap-2">
+        <div className="mt-1.5 flex items-end justify-between gap-2">
          <div className="min-w-0 text-xs">
            {location ? (
              <p className="m-0 flex min-w-0 items-center gap-0.5 truncate text-[#576b95] dark:text-[#7b93c4]">
@@ -99,9 +144,11 @@ export default function RecordItem({ id, content, images, likeCount, mood, locat
                <span className="truncate">{location}</span>
              </p>
            ) : null}
-            <p className={`m-0 text-[#b2b2b2] dark:text-slate-500 ${location ? 'mt-1' : ''}`}>{getRelativeTimeLabel(createTime)}</p>
+            <p className={`m-0 text-[#b2b2b2] dark:text-slate-500 ${location ? 'mt-0.5' : ''}`}>
+              {getRelativeTimeLabel(createTime)}
+            </p>
          </div>
-          <div className="flex shrink-0 items-center gap-3">
+          <div className="flex shrink-0 items-center gap-3.5">
            <button
              type="button"
              onClick={handleLike}
@@ -123,7 +170,9 @@ export default function RecordItem({ id, content, images, likeCount, mood, locat
                  <RiHeartFill className="h-2.5 w-2.5" />
                </span>
              ))}
-              <RiHeartFill className={`record-like-heart h-3.5 w-3.5 ${count > 0 ? 'text-[#fa5151]' : ''} ${popping ? 'is-popping' : ''}`} />
+              <RiHeartFill
+                className={`record-like-heart h-3.5 w-3.5 ${count > 0 ? 'text-[#fa5151]' : ''} ${popping ? 'is-popping' : ''}`}
+              />
              {count > 0 && (
                <span className={`text-xs tabular-nums ${countBump ? 'record-like-count-bump' : ''}`}>{count}</span>
              )}
@@ -135,12 +184,12 @@ export default function RecordItem({ id, content, images, likeCount, mood, locat
              aria-label="评论"
            >
              <RiChat3Line className="h-3.5 w-3.5" />
-              <span className="text-xs tabular-nums">{commentCount}</span>
+              {commentCount > 0 && <span className="text-xs tabular-nums">{commentCount}</span>}
            </button>
          </div>
        </div>
        {showComments && (
-          <div className="mt-2 rounded-sm bg-[#f7f7f7] px-2.5 py-2 dark:bg-white/5">
+          <div className="mt-2 rounded-md bg-[#f7f7f7] px-2.5 py-2 dark:bg-white/5">
            <RecordCommentPanel recordId={Number(id)} onCountChange={setCommentCount} />
          </div>
        )}
--- a/src/components/RecordModal/RecordListSkeleton.tsx
+++ b/src/components/RecordModal/RecordListSkeleton.tsx
@@ -2,18 +2,18 @@ import Skeleton from '@/components/Skeleton';

 function RecordItemSkeleton() {
  return (
-    <div className="flex gap-3 border-b border-[#f0f0f0] bg-white px-4 py-3.5 dark:border-white/10 dark:bg-[#1e2430]">
+    <div className="flex gap-2.5 border-b border-[#f0f0f0] bg-white px-4 py-3 dark:border-white/8 dark:bg-[#1e2430]">
      <Skeleton className="mt-0.5 h-10 w-10 shrink-0 rounded-md" />
-      <div className="min-w-0 flex-1 space-y-2.5">
+      <div className="min-w-0 flex-1 space-y-2">
        <Skeleton className="h-4 w-20" />
        <Skeleton className="h-3.5 w-full" />
        <Skeleton className="h-3.5 w-4/5" />
        <Skeleton className="mt-1 h-28 w-full max-w-60 rounded" />
-        <div className="flex items-center justify-between pt-1">
-          <Skeleton className="h-3 w-24" />
+        <div className="flex items-center justify-between pt-0.5">
+          <Skeleton className="h-3 w-16" />
          <div className="flex gap-3">
-            <Skeleton className="h-3.5 w-8" />
-            <Skeleton className="h-3.5 w-8" />
+            <Skeleton className="h-3.5 w-6" />
+            <Skeleton className="h-3.5 w-6" />
          </div>
        </div>
      </div>
--- a/src/components/RecordModal/index.tsx
+++ b/src/components/RecordModal/index.tsx
@@ -1,8 +1,9 @@
 'use client';

 import { useCallback, useEffect, useRef, useState } from 'react';
-import { IoCameraOutline, IoCloseOutline } from 'react-icons/io5';
+import { IoCloseOutline } from 'react-icons/io5';
 import { Modal } from '@/ThriveUI';
+import PhotoPreview, { type PhotoItem } from '@/ThriveUI/PhotoPreview';
 import Empty from '@/components/Empty';
 import Show from '@/components/Show';
 import { useAppConfig } from '@/components/AppConfigProvider';
@@ -16,22 +17,24 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';

 export default function RecordModal() {
-  const { open, closeModal } = useRecordModalStore();
+  const { open, closeModal, focusId, clearFocus } = useRecordModalStore();
  const { author, theme } = useAppConfig();

  const [records, setRecords] = useState<Record[]>([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [totalPages, setTotalPages] = useState(1);
+  const [scrolled, setScrolled] = useState(false);
+  const [preview, setPreview] = useState<{ photos: PhotoItem[]; index: number } | null>(null);
  const currentPageRef = useRef(1);
  const listRef = useRef<HTMLDivElement>(null);
  const fetchedRef = useRef(false);
+  const focusedRef = useRef(false);

  const coverSrc = theme?.record_cover?.trim() || getStableImage(undefined, theme?.covers, 'record-cover');
  const covers = parseThemeCovers(theme?.covers);
  const bgCover = coverSrc || covers[0] || '';
  const recordName = theme?.record_name?.trim() || author?.name || '我';
-  // 如果 record_avatar 为空，则使用 author.avatar
  const recordAvatar = theme?.record_avatar?.trim() || author?.avatar || '';
  const recordUser = { name: recordName, avatar: recordAvatar };
  const showSkeleton = loading && records.length === 0;
@@ -59,6 +62,9 @@ export default function RecordModal() {
  useEffect(() => {
    if (!open) {
      fetchedRef.current = false;
+      focusedRef.current = false;
+      setScrolled(false);
+      setPreview(null);
      return;
    }
    if (fetchedRef.current) return;
@@ -82,6 +88,8 @@ export default function RecordModal() {
    if (!open || !el) return;

    const onScroll = () => {
+      setScrolled(el.scrollTop > 8);
+
      if (loading || !hasMore) return;
      if (el.scrollTop + el.clientHeight >= el.scrollHeight - 80) {
        const next = currentPageRef.current + 1;
@@ -92,15 +100,42 @@ export default function RecordModal() {
    let timer: ReturnType<typeof setTimeout>;
    const debounced = () => {
      clearTimeout(timer);
-      timer = setTimeout(onScroll, 150);
+      timer = setTimeout(onScroll, 120);
    };
-    el.addEventListener('scroll', debounced);
+    el.addEventListener('scroll', debounced, { passive: true });
    return () => {
      el.removeEventListener('scroll', debounced);
      clearTimeout(timer);
    };
  }, [open, loading, hasMore, totalPages, fetchRecords]);

+  useEffect(() => {
+    if (!open || !focusId || loading || focusedRef.current || !records.length) return;
+
+    const target = listRef.current?.querySelector<HTMLElement>(`[data-record-id="${focusId}"]`);
+    if (!target) return;
+
+    focusedRef.current = true;
+    requestAnimationFrame(() => {
+      target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      target.classList.add('record-item-flash');
+      window.setTimeout(() => {
+        target.classList.remove('record-item-flash');
+        clearFocus();
+      }, 1200);
+    });
+  }, [open, focusId, loading, records, clearFocus]);
+
+  const openCoverPreview = () => {
+    if (!bgCover) return;
+    setPreview({ photos: [{ id: 'cover', url: bgCover, alt: '封面' }], index: 0 });
+  };
+
+  const openAvatarPreview = () => {
+    if (!recordAvatar) return;
+    setPreview({ photos: [{ id: 'avatar', url: recordAvatar, alt: recordName }], index: 0 });
+  };
+
  return (
    <>
      <Modal
@@ -109,10 +144,14 @@ export default function RecordModal() {
        className="flex! h-[min(780px,92dvh)] max-h-[92dvh]! w-full max-w-97.5! flex-col overflow-hidden! rounded-2xl! border-0! bg-white! p-0! shadow-[0_20px_60px_rgba(0,0,0,0.28)] sm:mx-4"
      >
        <div className="flex h-full min-h-0 flex-col">
-          <div className="flex shrink-0 items-center justify-between bg-white px-3 py-2.5 dark:bg-[#1e2430]">
-            <span className="inline-flex p-1 text-[#191919] dark:text-slate-200" aria-hidden>
-              <IoCameraOutline className="h-6 w-6" />
-            </span>
+          <div
+            className={`flex shrink-0 items-center justify-between px-4 py-2.5 dark:bg-[#1e2430] ${
+              scrolled
+                ? 'border-b border-[#f0f0f0] bg-white/92 backdrop-blur-md dark:border-white/10 dark:bg-[#1e2430]/92'
+                : 'border-b border-transparent bg-white'
+            }`}
+          >
+            <span className="text-[15px] font-medium text-[#191919] dark:text-slate-100">闪念</span>
            <button
              type="button"
              onClick={closeModal}
@@ -123,17 +162,31 @@ export default function RecordModal() {
            </button>
          </div>

-          <div ref={listRef} className="min-h-0 flex-1 overflow-y-auto">
-            <div className="relative mb-10">
-              <div
-                className="relative h-50 w-full bg-[#c8c8c8] bg-cover bg-center dark:bg-[#2a3140]"
-                style={bgCover ? { backgroundImage: `url(${bgCover})` } : undefined}
+          <div ref={listRef} className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+            <div className="relative mb-8">
+              <button
+                type="button"
+                onClick={openCoverPreview}
+                disabled={!bgCover}
+                className="relative block h-44 w-full cursor-pointer overflow-hidden border-0 bg-[#c8c8c8] p-0 disabled:cursor-default dark:bg-[#2a3140]"
+                aria-label="查看封面大图"
              >
-                <span className="absolute right-22 bottom-1 z-10 text-[17px] font-medium text-white drop-shadow-[0_1px_3px_rgba(0,0,0,0.65)]">
+                {bgCover ? (
+                  <img src={bgCover} alt="" className="absolute inset-0 h-full w-full object-cover" />
+                ) : null}
+                <div className="pointer-events-none absolute inset-x-0 bottom-0 h-20 bg-[linear-gradient(transparent,rgba(0,0,0,0.45))]" />
+                <span className="absolute right-22 bottom-2 z-10 text-[16px] font-medium text-white drop-shadow-[0_1px_3px_rgba(0,0,0,0.65)]">
                  {recordName}
                </span>
-              </div>
-              <div className="absolute right-3 bottom-0 z-10 translate-y-1/2">
+              </button>
+
+              <button
+                type="button"
+                onClick={openAvatarPreview}
+                disabled={!recordAvatar}
+                className="absolute right-3 bottom-0 z-10 translate-y-1/2 cursor-pointer border-0 bg-transparent p-0 disabled:cursor-default"
+                aria-label="查看头像大图"
+              >
                {recordAvatar ? (
                  <img
                    src={recordAvatar}
@@ -143,12 +196,14 @@ export default function RecordModal() {
                    className="h-16 w-16 rounded-md border-2 border-white object-cover shadow-sm dark:border-[#1e2430]"
                  />
                ) : (
-                  <div className="h-16 w-16 rounded-md border-2 border-white bg-[#d9d9d9] dark:border-[#1e2430]" />
+                  <div className="flex h-16 w-16 items-center justify-center rounded-md border-2 border-white bg-[#e8e8e8] text-sm text-[#999] dark:border-[#1e2430] dark:bg-[#323e50] dark:text-slate-400">
+                    {recordName.slice(0, 1)}
+                  </div>
                )}
-              </div>
+              </button>
            </div>

-            <div className="mt-2">
+            <div>
              {showSkeleton ? (
                <RecordListSkeleton />
              ) : (
@@ -164,6 +219,7 @@ export default function RecordModal() {
                      location={item.location}
                      createTime={item.createTime as string | number | undefined}
                      user={recordUser}
+                      highlighted={focusId === item.id}
                    />
                  ))}
                  <Show is={!loading && records.length === 0}>
@@ -172,10 +228,14 @@ export default function RecordModal() {
                    </div>
                  </Show>
                  {loading && records.length > 0 && (
-                    <div className="bg-white py-4 text-center text-sm text-slate-400 dark:bg-[#1e2430]">正在加载...</div>
+                    <div className="bg-white py-3 text-center text-xs text-[#b2b2b2] dark:bg-[#1e2430] dark:text-slate-500">
+                      加载中…
+                    </div>
                  )}
                  {!hasMore && records.length > 0 && (
-                    <div className="bg-white py-4 text-center text-sm text-slate-400 dark:bg-[#1e2430]">没有更多了</div>
+                    <div className="bg-white py-3 text-center text-xs text-[#c8c8c8] dark:bg-[#1e2430] dark:text-slate-600">
+                      — 已经到底啦 —
+                    </div>
                  )}
                </>
              )}
@@ -184,6 +244,13 @@ export default function RecordModal() {
        </div>
      </Modal>

+      <PhotoPreview
+        open={!!preview}
+        photos={preview?.photos ?? []}
+        index={preview?.index ?? 0}
+        onClose={() => setPreview(null)}
+      />
+
      {open && <ToastContainer position="top-right" autoClose={5000} theme="colored" style={{ zIndex: 1200 }} />}
    </>
  );
--- a/src/components/RecordModal/like.scss
+++ b/src/components/RecordModal/like.scss
@@ -46,6 +46,38 @@
  }
 }

+@keyframes record-double-tap-heart {
+  0% {
+    opacity: 0;
+    transform: scale(0.4);
+  }
+
+  25% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+
+  55% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(1.2) translateY(-10px);
+  }
+}
+
+@keyframes record-item-flash {
+  0% {
+    background-color: rgba(83, 157, 253, 0.16);
+  }
+
+  100% {
+    background-color: transparent;
+  }
+}
+
 .record-like-heart.is-popping {
  animation: record-like-heart-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #fa5151;
@@ -58,4 +90,12 @@
 .record-like-count-bump {
  display: inline-block;
  animation: record-like-count-bump 0.32s ease-out;
-}
+}
+
+.record-double-tap-heart {
+  animation: record-double-tap-heart 0.56s ease-out forwards;
+}
+
+.record-item-flash {
+  animation: record-item-flash 1.1s ease-out;
+}
--- a/src/components/Sidebar/RecordCarousel/RecordCarouselClient.tsx
+++ b/src/components/Sidebar/RecordCarousel/RecordCarouselClient.tsx
@@ -1,7 +1,6 @@
 'use client';

 import { useEffect, useRef, useState, type MouseEvent } from 'react';
-import { FiChevronRight } from 'react-icons/fi';
 import CoverImage from '@/components/CoverImage';
 import { useRecordModalStore } from '@/stores';

@@ -76,7 +75,7 @@ export default function RecordCarouselClient({ list }: Props) {
      <div className="group relative h-[172px] overflow-hidden rounded-xl shadow-[0_8px_24px_-12px_rgba(15,23,42,0.35)] ring-1 ring-black/5 dark:ring-white/10">
        <button
          type="button"
-          onClick={openRecordModal}
+          onClick={() => openRecordModal(current.id)}
          className="absolute inset-0 z-0 cursor-pointer border-0 bg-transparent p-0"
          aria-label="打开闪念"
          title={current.text}
--- a/src/stores/modules/recordModal.ts
+++ b/src/stores/modules/recordModal.ts
@@ -2,12 +2,16 @@ import { create } from 'zustand';

 interface RecordModalState {
  open: boolean;
-  openModal: () => void;
+  focusId: number | null;
+  openModal: (focusId?: number) => void;
  closeModal: () => void;
+  clearFocus: () => void;
 }

 export default create<RecordModalState>((set) => ({
  open: false,
-  openModal: () => set({ open: true }),
-  closeModal: () => set({ open: false }),
+  focusId: null,
+  openModal: (focusId) => set({ open: true, focusId: focusId ?? null }),
+  closeModal: () => set({ open: false, focusId: null }),
+  clearFocus: () => set({ focusId: null }),
 }));