修复搜索页返回重置和顶部栏按钮问题

2026-04-17 15:24:21 +08:00
parent 496c0683c1
commit 3890cb138e
4 changed files with 169 additions and 28 deletions
@@ -71,6 +71,7 @@ export default function MangaDetailPage() {
  const searchParams = useSearchParams();
  const mangaId = searchParams.get('mangaId') || '';
  const sourceId = searchParams.get('sourceId') || '';
+  const returnTo = searchParams.get('returnTo') || '/manga';
  const [detail, setDetail] = useState<MangaDetail | null>(null);
  const [history, setHistory] = useState<Record<string, MangaReadRecord>>({});
  const [shelf, setShelf] = useState<Record<string, MangaShelfItem>>({});
@@ -140,7 +141,7 @@ export default function MangaDetailPage() {
  };

  const chapterHref = (chapter: MangaChapter) =>
-    `/manga/read?mangaId=${mangaId}&sourceId=${sourceId}&chapterId=${chapter.id}&title=${encodeURIComponent(detail?.title || '')}&cover=${encodeURIComponent(detail?.cover || '')}&sourceName=${encodeURIComponent(detail?.sourceName || '')}&chapterName=${encodeURIComponent(chapter.name)}`;
+    `/manga/read?mangaId=${mangaId}&sourceId=${sourceId}&chapterId=${chapter.id}&title=${encodeURIComponent(detail?.title || '')}&cover=${encodeURIComponent(detail?.cover || '')}&sourceName=${encodeURIComponent(detail?.sourceName || '')}&chapterName=${encodeURIComponent(chapter.name)}&returnTo=${encodeURIComponent(returnTo)}`;

  if (!detail) return <MangaDetailSkeleton />;

@@ -175,7 +176,7 @@ export default function MangaDetailPage() {
            )}
            {currentRecord && (
              <Link
-                href={`/manga/read?mangaId=${mangaId}&sourceId=${sourceId}&chapterId=${currentRecord.chapterId}&title=${encodeURIComponent(detail.title)}&cover=${encodeURIComponent(detail.cover)}&sourceName=${encodeURIComponent(detail.sourceName)}&chapterName=${encodeURIComponent(currentRecord.chapterName)}`}
+                href={`/manga/read?mangaId=${mangaId}&sourceId=${sourceId}&chapterId=${currentRecord.chapterId}&title=${encodeURIComponent(detail.title)}&cover=${encodeURIComponent(detail.cover)}&sourceName=${encodeURIComponent(detail.sourceName)}&chapterName=${encodeURIComponent(currentRecord.chapterName)}&returnTo=${encodeURIComponent(returnTo)}`}
                className='rounded-2xl border border-sky-300 px-5 py-3 text-sm font-medium text-sky-700 transition hover:bg-sky-50 dark:text-sky-300 dark:hover:bg-sky-950/30'
              >
                <Clock3 className='mr-2 inline h-4 w-4' />继续阅读 第 {currentRecord.pageIndex + 1}/{currentRecord.pageCount} 页
@@ -1,13 +1,16 @@
 'use client';

 import { Search } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';

 import { deleteMangaShelf, getAllMangaShelf, saveMangaShelf } from '@/lib/db.client';
 import { MangaSearchItem, MangaShelfItem, MangaSource } from '@/lib/manga.types';

 import MangaCard from '@/components/MangaCard';

+const MANGA_SEARCH_STATE_KEY = 'manga_search_state';
+
 function MangaCardSkeleton({ withButton = false }: { withButton?: boolean }) {
  return (
    <div className='space-y-2'>
@@ -24,6 +27,11 @@ function MangaCardSkeleton({ withButton = false }: { withButton?: boolean }) {
 }

 export default function MangaPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const urlQuery = searchParams.get('q')?.trim() || '';
+  const urlSourceId = searchParams.get('sourceId') || '';
+
  const [query, setQuery] = useState('');
  const [sources, setSources] = useState<MangaSource[]>([]);
  const [sourceId, setSourceId] = useState('');
@@ -31,6 +39,64 @@ export default function MangaPage() {
  const [shelf, setShelf] = useState<Record<string, MangaShelfItem>>({});
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
+  const [hasSearched, setHasSearched] = useState(false);
+  const [lastSearchedQuery, setLastSearchedQuery] = useState('');
+  const [lastSearchedSourceId, setLastSearchedSourceId] = useState('');
+  const restoredRef = useRef(false);
+
+  const getCacheKey = useCallback((keyword: string, selectedSourceId: string) => {
+    return `manga_search_cache_${selectedSourceId || 'all'}_${keyword.trim()}`;
+  }, []);
+
+  const getCachedResults = useCallback(
+    (keyword: string, selectedSourceId: string) => {
+      if (typeof window === 'undefined' || !keyword.trim()) return null;
+      try {
+        const cached = sessionStorage.getItem(getCacheKey(keyword, selectedSourceId));
+        return cached ? (JSON.parse(cached) as MangaSearchItem[]) : null;
+      } catch {
+        return null;
+      }
+    },
+    [getCacheKey]
+  );
+
+  const setCachedResults = useCallback(
+    (keyword: string, selectedSourceId: string, nextResults: MangaSearchItem[]) => {
+      if (typeof window === 'undefined' || !keyword.trim()) return;
+      try {
+        sessionStorage.setItem(getCacheKey(keyword, selectedSourceId), JSON.stringify(nextResults));
+      } catch {
+        // ignore session cache failures
+      }
+    },
+    [getCacheKey]
+  );
+
+  const saveSearchState = useCallback((nextState: { query: string; sourceId: string; results: MangaSearchItem[] }) => {
+    if (typeof window === 'undefined') return;
+    try {
+      sessionStorage.setItem(MANGA_SEARCH_STATE_KEY, JSON.stringify(nextState));
+    } catch {
+      // ignore session cache failures
+    }
+  }, []);
+
+  const restoreSearchState = useCallback(() => {
+    if (typeof window === 'undefined') return null;
+    try {
+      const cached = sessionStorage.getItem(MANGA_SEARCH_STATE_KEY);
+      return cached
+        ? (JSON.parse(cached) as {
+            query: string;
+            sourceId: string;
+            results: MangaSearchItem[];
+          })
+        : null;
+    } catch {
+      return null;
+    }
+  }, []);

  useEffect(() => {
    fetch('/api/manga/sources')
@@ -41,25 +107,97 @@ export default function MangaPage() {
    getAllMangaShelf().then(setShelf).catch(() => undefined);
  }, []);

+  const performSearch = useCallback(
+    async (keyword: string, selectedSourceId: string) => {
+      const trimmedQuery = keyword.trim();
+      if (!trimmedQuery) return;
+
+      setLoading(true);
+      setError('');
+      setHasSearched(true);
+      setLastSearchedQuery(trimmedQuery);
+      setLastSearchedSourceId(selectedSourceId);
+
+      const cached = getCachedResults(trimmedQuery, selectedSourceId);
+      if (cached) {
+        setResults(cached);
+        saveSearchState({ query: trimmedQuery, sourceId: selectedSourceId, results: cached });
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const params = new URLSearchParams({ q: trimmedQuery });
+        if (selectedSourceId) params.set('sourceId', selectedSourceId);
+        const res = await fetch(`/api/manga/search?${params.toString()}`);
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || '搜索失败');
+        const nextResults = data.results || [];
+        setResults(nextResults);
+        setCachedResults(trimmedQuery, selectedSourceId, nextResults);
+        saveSearchState({ query: trimmedQuery, sourceId: selectedSourceId, results: nextResults });
+      } catch (err) {
+        setError((err as Error).message);
+        setResults([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [getCachedResults, saveSearchState, setCachedResults]
+  );
+
+  useEffect(() => {
+    if (!restoredRef.current) {
+      restoredRef.current = true;
+
+      if (!urlQuery) {
+        const cachedState = restoreSearchState();
+        if (cachedState?.query?.trim()) {
+          setQuery(cachedState.query);
+          setSourceId(cachedState.sourceId || '');
+          setResults(cachedState.results || []);
+          setHasSearched(true);
+          setLastSearchedQuery(cachedState.query);
+          setLastSearchedSourceId(cachedState.sourceId || '');
+        }
+        return;
+      }
+    }
+
+    setQuery(urlQuery);
+    setSourceId(urlSourceId);
+
+    if (!urlQuery) {
+      setResults([]);
+      setHasSearched(false);
+      setLastSearchedQuery('');
+      setLastSearchedSourceId('');
+      setError('');
+      return;
+    }
+
+    void performSearch(urlQuery, urlSourceId);
+  }, [performSearch, restoreSearchState, urlQuery, urlSourceId]);
+
  const handleSearch = async (e: React.FormEvent) => {
    e.preventDefault();
-    if (!query.trim()) return;
-    setLoading(true);
-    setError('');
-    try {
-      const params = new URLSearchParams({ q: query.trim() });
-      if (sourceId) params.set('sourceId', sourceId);
-      const res = await fetch(`/api/manga/search?${params.toString()}`);
-      const data = await res.json();
-      if (!res.ok) throw new Error(data.error || '搜索失败');
-      setResults(data.results || []);
-    } catch (err) {
-      setError((err as Error).message);
-    } finally {
-      setLoading(false);
-    }
+    const trimmedQuery = query.trim();
+    if (!trimmedQuery) return;
+
+    const params = new URLSearchParams({ q: trimmedQuery });
+    if (sourceId) params.set('sourceId', sourceId);
+    router.replace(`/manga?${params.toString()}`);
+    await performSearch(trimmedQuery, sourceId);
  };

+  const returnTo = useMemo(() => {
+    const params = new URLSearchParams();
+    if (lastSearchedQuery) params.set('q', lastSearchedQuery);
+    if (lastSearchedSourceId) params.set('sourceId', lastSearchedSourceId);
+    const queryString = params.toString();
+    return queryString ? `/manga?${queryString}` : '/manga';
+  }, [lastSearchedQuery, lastSearchedSourceId]);
+
  const toggleShelf = async (item: MangaSearchItem) => {
    const key = `${item.sourceId}+${item.id}`;
    if (shelf[key]) {
@@ -133,7 +271,7 @@ export default function MangaPage() {
          </div>
        ) : results.length === 0 ? (
          <div className='rounded-2xl bg-gray-50 p-10 text-center text-sm text-gray-500 dark:bg-gray-900/50'>
-            请输入关键词开始搜索漫画
+            {hasSearched ? '没有找到相关漫画' : '请输入关键词开始搜索漫画'}
          </div>
        ) : (
          <div className='grid grid-cols-2 gap-4 md:grid-cols-4 xl:grid-cols-6'>
@@ -143,7 +281,7 @@ export default function MangaPage() {
                <div key={key} className='space-y-2'>
                  <MangaCard
                    item={item}
-                    href={`/manga/detail?mangaId=${item.id}&sourceId=${item.sourceId}&title=${encodeURIComponent(item.title)}&cover=${encodeURIComponent(item.cover)}&sourceName=${encodeURIComponent(item.sourceName)}&description=${encodeURIComponent(item.description || '')}&author=${encodeURIComponent(item.author || '')}&status=${encodeURIComponent(item.status || '')}`}
+                    href={`/manga/detail?mangaId=${item.id}&sourceId=${item.sourceId}&title=${encodeURIComponent(item.title)}&cover=${encodeURIComponent(item.cover)}&sourceName=${encodeURIComponent(item.sourceName)}&description=${encodeURIComponent(item.description || '')}&author=${encodeURIComponent(item.author || '')}&status=${encodeURIComponent(item.status || '')}&returnTo=${encodeURIComponent(returnTo)}`}
                    subtitle={item.author || item.status || item.description}
                  />
                  <button
@@ -1,9 +1,9 @@
 'use client';

+import { ArrowDownWideNarrow, ArrowUpWideNarrow } from 'lucide-react';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
 import { type MouseEvent, useEffect, useMemo, useRef, useState } from 'react';
-import { ArrowDownWideNarrow, ArrowUpWideNarrow } from 'lucide-react';

 import { getAllMangaReadRecords, saveMangaReadRecord } from '@/lib/db.client';
 import type { MangaChapter, MangaDetail, MangaReadRecord } from '@/lib/manga.types';
@@ -78,6 +78,7 @@ export default function MangaReadPage() {
  const cover = searchParams.get('cover') || '';
  const sourceName = searchParams.get('sourceName') || sourceId;
  const chapterName = searchParams.get('chapterName') || '章节';
+  const returnTo = searchParams.get('returnTo') || '/manga';

  const [pages, setPages] = useState<string[]>([]);
  const [activePage, setActivePage] = useState(0);
@@ -752,7 +753,7 @@ export default function MangaReadPage() {
                  return (
                    <Link
                      key={chapter.id}
-                      href={`/manga/read?mangaId=${mangaId}&sourceId=${sourceId}&chapterId=${chapter.id}&title=${encodeURIComponent(title)}&cover=${encodeURIComponent(cover)}&sourceName=${encodeURIComponent(sourceName)}&chapterName=${encodeURIComponent(chapter.name)}`}
+                      href={`/manga/read?mangaId=${mangaId}&sourceId=${sourceId}&chapterId=${chapter.id}&title=${encodeURIComponent(title)}&cover=${encodeURIComponent(cover)}&sourceName=${encodeURIComponent(sourceName)}&chapterName=${encodeURIComponent(chapter.name)}&returnTo=${encodeURIComponent(returnTo)}`}
                      className={`group relative block rounded-2xl px-4 py-3 text-sm transition ${
                        active
                          ? 'bg-sky-600 text-white'
@@ -790,7 +791,7 @@ export default function MangaReadPage() {
              <div className='mt-6 flex flex-col gap-3'>
                {nextChapter ? (
                  <Link
-                    href={`/manga/read?mangaId=${mangaId}&sourceId=${sourceId}&chapterId=${nextChapter.id}&title=${encodeURIComponent(title)}&cover=${encodeURIComponent(cover)}&sourceName=${encodeURIComponent(sourceName)}&chapterName=${encodeURIComponent(nextChapter.name)}`}
+                    href={`/manga/read?mangaId=${mangaId}&sourceId=${sourceId}&chapterId=${nextChapter.id}&title=${encodeURIComponent(title)}&cover=${encodeURIComponent(cover)}&sourceName=${encodeURIComponent(sourceName)}&chapterName=${encodeURIComponent(nextChapter.name)}&returnTo=${encodeURIComponent(returnTo)}`}
                    className='rounded-2xl bg-sky-600 px-4 py-3 text-sm font-medium text-white transition hover:bg-sky-700'
                  >
                    下一话：{nextChapter.name}
@@ -894,7 +895,7 @@ export default function MangaReadPage() {
      </div>

      <Link
-        href={`/manga/detail?mangaId=${mangaId}&sourceId=${sourceId}&title=${encodeURIComponent(title)}&cover=${encodeURIComponent(cover)}&sourceName=${encodeURIComponent(sourceName)}`}
+        href={`/manga/detail?mangaId=${mangaId}&sourceId=${sourceId}&title=${encodeURIComponent(title)}&cover=${encodeURIComponent(cover)}&sourceName=${encodeURIComponent(sourceName)}&returnTo=${encodeURIComponent(returnTo)}`}
        className='sr-only'
      >
        返回详情
@@ -32,7 +32,7 @@ function getMeta(pathname: string, searchParams: ReturnType<typeof useSearchPara
    return {
      title: searchParams.get('title') || '漫画详情',
      subtitle: searchParams.get('sourceName') || '漫画详情',
-      backHref: '/manga',
+      backHref: searchParams.get('returnTo') || '/manga',
    };
  }
  if (pathname === '/manga/read') {
@@ -41,10 +41,11 @@ function getMeta(pathname: string, searchParams: ReturnType<typeof useSearchPara
    const title = searchParams.get('title') || '漫画阅读';
    const cover = searchParams.get('cover') || '';
    const sourceName = searchParams.get('sourceName') || sourceId;
+    const returnTo = searchParams.get('returnTo') || '/manga';
    return {
      title,
      subtitle: searchParams.get('chapterName') || '章节',
-      backHref: `/manga/detail?mangaId=${encodeURIComponent(mangaId)}&sourceId=${encodeURIComponent(sourceId)}&title=${encodeURIComponent(title)}&cover=${encodeURIComponent(cover)}&sourceName=${encodeURIComponent(sourceName)}`,
+      backHref: `/manga/detail?mangaId=${encodeURIComponent(mangaId)}&sourceId=${encodeURIComponent(sourceId)}&title=${encodeURIComponent(title)}&cover=${encodeURIComponent(cover)}&sourceName=${encodeURIComponent(sourceName)}&returnTo=${encodeURIComponent(returnTo)}`,
    };
  }
  return { title: '漫画展馆', subtitle: '搜索漫画并加入书架' };
@@ -63,7 +64,7 @@ export default function MangaLayout({ children }: MangaLayoutProps) {
    <div className='min-h-screen bg-gray-50 text-gray-900 dark:bg-black dark:text-gray-100'>
      <header className='fixed inset-x-0 top-0 z-[999] border-b border-gray-200/70 bg-white/85 backdrop-blur-xl shadow-sm dark:border-gray-800/80 dark:bg-gray-950/85'>
        <div className='mx-auto flex h-14 max-w-7xl items-center gap-3 px-3 sm:h-16 sm:px-6'>
-          <div className='flex min-w-0 items-center gap-2'>
+          <div className='flex min-w-0 flex-1 items-center gap-2'>
            {meta.backHref ? (
              <Link
                href={meta.backHref}
@@ -115,7 +116,7 @@ export default function MangaLayout({ children }: MangaLayoutProps) {
            })}
          </nav>

-          <div className={`${isReadingPage ? 'flex' : 'hidden md:flex'} items-center gap-2`}>
+          <div className={`${isReadingPage ? 'ml-auto flex shrink-0' : 'ml-auto hidden md:flex'} items-center gap-2`}>
            {isReadingPage ? (
              <>
                <button