src/pages/SeedList/Recommend/Recommend.jsx

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './Recommend.css';
import { useUser } from '../../../context/UserContext';

const Recommend = () => {
  const { user } = useUser();
  const [popularSeeds, setPopularSeeds] = useState([]);
  const [recommendedSeeds, setRecommendedSeeds] = useState([]);

  useEffect(() => {
    // 获取热门资源
    axios
      .get('/echo/recommendation/popular', { params: { limit: 16 } })
      .then((res) => setPopularSeeds(res.data))
      .catch((err) => console.error('获取热门资源失败', err));
  }, []);

  useEffect(() => {
    // 获取个性化推荐
    if (user && user.userId) {
      axios
        .get(`/echo/recommendation/seeds/${user.userId}`)
        .then((res) => setRecommendedSeeds(res.data))
        .catch((err) => console.error('获取个性化推荐失败', err));
    }
  }, [user]);

  const renderSeedCard = (seed) => (
    <div className="seed-card" key={seed.id}>
      <img src={seed.coverUrl || '/default-cover.jpg'} alt={seed.title} />
      <div className="title">{seed.title}</div>
    </div>
  );

  return (
    <div className="recommendation-page">
      <h2>🎬 正在热映</h2>
      <div className="seed-list">{popularSeeds.map(renderSeedCard)}</div>

      <h2>🎯 个性化推荐</h2>
      {user ? (
        <div className="seed-list">{recommendedSeeds.map(renderSeedCard)}</div>
      ) : (
        <div className="login-reminder">请登录以获取个性化推荐</div>
      )}
    </div>
  );
};

export default Recommend;