chore: sync

SproutWorkCollect-Frontend/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 import styled from 'styled-components';
 import Header from './components/Header';
@@ -10,7 +10,7 @@ import CategoryFilter from './components/CategoryFilter';
 import LoadingSpinner from './components/LoadingSpinner';
 import Footer from './components/Footer';
 import Pagination from './components/Pagination';
-import { getWorks, getSettings, getCategories, searchWorks } from './services/api';
+import { getWorks, getSettings, getCategories, searchWorks, getWorkDetail } from './services/api';
 import { BACKGROUND_CONFIG, pickBackgroundImage } from './config/background';
 
 const AppContainer = styled.div`
@@ -107,12 +107,13 @@ const NoResults = styled.div`
 // 首页组件
 const HomePage = ({ settings }) => {
   const [works, setWorks] = useState([]);
-  const [allWorks, setAllWorks] = useState([]); // 存储所有作品数据
+  const [totalWorks, setTotalWorks] = useState(0);
   const [categories, setCategories] = useState([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedCategory, setSelectedCategory] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
+  const pageSizeInitRef = useRef(false);
   
   // 从设置中获取每页作品数量，默认12（三行四列）
   const itemsPerPage = settings['每页作品数量'] || 12;
@@ -121,17 +122,44 @@ const HomePage = ({ settings }) => {
     loadInitialData();
   }, []);
 
+  useEffect(() => {
+    if (!pageSizeInitRef.current) {
+      pageSizeInitRef.current = true;
+      return;
+    }
+    setCurrentPage(1);
+    performSearch(searchQuery, selectedCategory, 1);
+  }, [itemsPerPage]);
+
+  const fetchWorksByIds = async (ids) => {
+    if (!Array.isArray(ids) || ids.length === 0) return [];
+    const results = await Promise.all(
+      ids.map(async (id) => {
+        try {
+          const detail = await getWorkDetail(id);
+          return detail?.data || null;
+        } catch (error) {
+          console.error('加载作品详情失败:', id, error);
+          return null;
+        }
+      })
+    );
+    return results.filter(Boolean);
+  };
+
   const loadInitialData = async () => {
     try {
       setLoading(true);
       const [worksData, categoriesData] = await Promise.all([
-        getWorks(),
+        getWorks(1, itemsPerPage),
         getCategories()
       ]);
-      
-      const allWorksData = worksData.data || [];
-      setAllWorks(allWorksData);
-      setWorks(allWorksData);
+      const rawData = worksData.data || [];
+      const resolvedWorks = Array.isArray(rawData) && typeof rawData[0] === 'string'
+        ? await fetchWorksByIds(rawData)
+        : rawData;
+      setWorks(resolvedWorks);
+      setTotalWorks(worksData.total || 0);
       setCategories(categoriesData.data || []);
       setCurrentPage(1); // 重置到第一页
     } catch (error) {
@@ -143,27 +171,36 @@ const HomePage = ({ settings }) => {
 
   const handleSearch = async (query) => {
     setSearchQuery(query);
-    await performSearch(query, selectedCategory);
+    setCurrentPage(1);
+    await performSearch(query, selectedCategory, 1);
   };
 
   const handleCategoryChange = async (category) => {
     setSelectedCategory(category);
-    await performSearch(searchQuery, category);
+    setCurrentPage(1);
+    await performSearch(searchQuery, category, 1);
   };
 
-  const performSearch = async (query, category) => {
+  const performSearch = async (query, category, page) => {
     try {
       setLoading(true);
       if (query || category) {
-        const searchData = await searchWorks(query, category);
-        setAllWorks(searchData.data || []);
-        setWorks(searchData.data || []);
+        const searchData = await searchWorks(query, category, page, itemsPerPage);
+        const rawData = searchData.data || [];
+        const resolvedWorks = Array.isArray(rawData) && typeof rawData[0] === 'string'
+          ? await fetchWorksByIds(rawData)
+          : rawData;
+        setWorks(resolvedWorks);
+        setTotalWorks(searchData.total || 0);
       } else {
-        const worksData = await getWorks();
-        setAllWorks(worksData.data || []);
-        setWorks(worksData.data || []);
+        const worksData = await getWorks(page, itemsPerPage);
+        const rawData = worksData.data || [];
+        const resolvedWorks = Array.isArray(rawData) && typeof rawData[0] === 'string'
+          ? await fetchWorksByIds(rawData)
+          : rawData;
+        setWorks(resolvedWorks);
+        setTotalWorks(worksData.total || 0);
       }
-      setCurrentPage(1); // 搜索后重置到第一页
     } catch (error) {
       console.error('搜索失败:', error);
     } finally {
@@ -172,14 +209,13 @@ const HomePage = ({ settings }) => {
   };
 
   // 分页相关的计算
-  const totalPages = Math.ceil(works.length / itemsPerPage);
-  const startIndex = (currentPage - 1) * itemsPerPage;
-  const endIndex = startIndex + itemsPerPage;
-  const currentWorks = works.slice(startIndex, endIndex);
+  const totalPages = Math.ceil(totalWorks / itemsPerPage);
+  const currentWorks = works;
 
   // 处理页面变化
   const handlePageChange = (page) => {
     setCurrentPage(page);
+    performSearch(searchQuery, selectedCategory, page);
     // 滚动到顶部
     window.scrollTo({ top: 0, behavior: 'smooth' });
   };
@@ -207,7 +243,7 @@ const HomePage = ({ settings }) => {
           <Pagination
             currentPage={currentPage}
             totalPages={totalPages}
-            totalItems={works.length}
+            totalItems={totalWorks}
             itemsPerPage={itemsPerPage}
             onPageChange={handlePageChange}
           />