diff --git a/src/pages/InterestGroup/InterestGroup.jsx b/src/pages/InterestGroup/InterestGroup.jsx
index 0b5b002..b3ae332 100644
--- a/src/pages/InterestGroup/InterestGroup.jsx
+++ b/src/pages/InterestGroup/InterestGroup.jsx
@@ -1,137 +1,3 @@
-// // import React, { useEffect } from 'react';
-// // import Header from '../../components/Header';
-// // import { useGroupStore } from '../../context/useGroupStore';
-// // // import GroupFilters from './GroupFilters';
-// // import GroupList from './GroupList';
-// // import GroupPagination from './GroupPagination';
-// // import './InterestGroup.css';
-// // const InterestGroup = () => {
-// //   const { fetchGroupList, setPage, handleSearch } = useGroupStore();
-
-// //   // 初始化加载
-// //   useEffect(() => {
-// //     fetchGroupList();
-// //   }, [fetchGroupList]);
-
-// //   return (
-// //     <div className="interest-group-container">
-// //       <Header />
-// //       <div className="interest-group-card">
-// //         {/* <GroupFilters /> */}
-// //         <GroupList />
-// //         <GroupPagination />
-// //       </div>
-// //     </div>
-// //   );
-// // };
-
-// // export default InterestGroup;
-
-// import React, { useEffect, useState } from 'react';
-// import Header from '../../components/Header';
-// import { useGroupStore } from '../../context/useGroupStore';
-// import GroupList from './GroupList';
-// import GroupPagination from './GroupPagination';
-// import './InterestGroup.css';
-// import axios from 'axios';
-
-// const InterestGroup = () => {
-//   const { fetchGroupList } = useGroupStore();
-
-//   const [showModal, setShowModal] = useState(false);
-//   const [groupName, setGroupName] = useState('');
-//   const [groupDescription, setGroupDescription] = useState('');
-
-//   useEffect(() => {
-//     fetchGroupList();
-//   }, [fetchGroupList]);
-
-//   const handleCreateGroup = async () => {
-//   try {
-//     const res = await axios.post('http://localhost:3011/echo/groups/createGroup', {
-//       user_id: 1,
-//       group_name: groupName,               // ✅ 改为 snake_case
-//       description: groupDescription,
-//       time: new Date().toISOString(),
-//       category: '默认分类',
-//       cover_image: 'https://picsum.photos/300/200',
-//     });
-
-//     if (res.status === 200 && res.data.status === 'success') {
-//       alert('小组创建成功');
-//       setShowModal(false);
-//       setGroupName('');
-//       setGroupDescription('');
-//       fetchGroupList();
-//     } else {
-//       alert('创建失败: ' + res.data.message);
-//     }
-//   } catch (error) {
-//     alert('创建失败，请检查网络或输入');
-//     console.error(error);
-//   }
-// };
-
-
-//   // const handleCreateGroup = async () => {
-//   //   try {
-//   //     const res = await axios.post('/createGroup', {
-//   //       groupName,
-//   //       description: groupDescription,
-//   //     });
-//   //     if (res.status === 200) {
-//   //       alert('小组创建成功');
-//   //       setShowModal(false);
-//   //       setGroupName('');
-//   //       setGroupDescription('');
-//   //       fetchGroupList(); // 刷新列表
-//   //     }
-//   //   } catch (error) {
-//   //     alert('创建失败，请重试');
-//   //   }
-//   // };
-
-//   return (
-//     <div className="interest-group-container">
-//       <Header />
-//       <div className="interest-group-card">
-//         <button className="create-group-btn" onClick={() => setShowModal(true)}>
-//           创建小组
-//         </button>
-
-//         {showModal && (
-//           <div className="modal-overlay">
-//             <div className="modal-content">
-//               <h2>创建新小组</h2>
-//               <input
-//                 type="text"
-//                 placeholder="小组名称"
-//                 value={groupName}
-//                 onChange={(e) => setGroupName(e.target.value)}
-//               />
-//               <textarea
-//                 placeholder="小组简介"
-//                 value={groupDescription}
-//                 onChange={(e) => setGroupDescription(e.target.value)}
-//               />
-//               <div className="modal-buttons">
-//                 <button onClick={handleCreateGroup}>确定</button>
-//                 <button onClick={() => setShowModal(false)}>取消</button>
-//               </div>
-//             </div>
-//           </div>
-//         )}
-
-//         <GroupList />
-//         <GroupPagination />
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default InterestGroup;
-
-
 import React, { useEffect, useState } from 'react';
 import Header from '../../components/Header';
 import { useGroupStore } from '../../context/useGroupStore';
diff --git a/src/pages/SeedList/Recommend/Recommend.css b/src/pages/SeedList/Recommend/Recommend.css
index 1eb3541..cf46b86 100644
--- a/src/pages/SeedList/Recommend/Recommend.css
+++ b/src/pages/SeedList/Recommend/Recommend.css
@@ -1,4 +1,4 @@
-.recommend-wrapper {
+/* .recommend-wrapper {
   padding: 20px;
   background-color: #fff;
 }
@@ -35,4 +35,56 @@
 .paid-title {
   font-size: 16px;
   padding: 10px;
+} */
+
+
+.recommendation-page {
+  padding: 20px;
+  background-color: #f8f9fa;
+}
+
+.recommendation-page h2 {
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  color: #333;
+}
+
+.seed-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 32px;
+}
+
+.seed-card {
+  width: 160px;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+  transition: transform 0.2s ease;
+  cursor: pointer;
+}
+
+.seed-card:hover {
+  transform: translateY(-4px);
+}
+
+.seed-card img {
+  width: 100%;
+  height: 220px;
+  object-fit: cover;
+}
+
+.seed-card .title {
+  padding: 8px;
+  font-size: 0.95rem;
+  text-align: center;
+  color: #333;
+}
+
+.login-reminder {
+  font-size: 1rem;
+  color: #888;
+  padding: 10px;
 }
diff --git a/src/pages/SeedList/Recommend/Recommend.jsx b/src/pages/SeedList/Recommend/Recommend.jsx
index dd38184..8270145 100644
--- a/src/pages/SeedList/Recommend/Recommend.jsx
+++ b/src/pages/SeedList/Recommend/Recommend.jsx
@@ -1,50 +1,48 @@
-// export default Recommend;
 import React, { useEffect, useState } from 'react';
+import axios from 'axios';
 import './Recommend.css';
+import { useUser } from '../../../context/UserContext';
 
 const Recommend = () => {
-  const [paidLists, setPaidLists] = useState([]);
-  const [loading, setLoading] = useState(true);
+  const { user } = useUser();
+  const [popularSeeds, setPopularSeeds] = useState([]);
+  const [recommendedSeeds, setRecommendedSeeds] = useState([]);
 
   useEffect(() => {
-    const fetchPaidLists = async () => {
-      try {
-        
-        const response = await fetch(`/echo/recommendations/paid?user_id=1`);
-        console.log('请求地址:', `${process.env.REACT_APP_API_BASE}/echo/recommendations/paid?user_id=1`);
-
-
-        // const response = await fetch('/echo/recommendations/paid?user_id=1');
-        const data = await response.json();
-        if (data.status === 'success') {
-          setPaidLists(data.paid_recommendations);
-        } else {
-          console.warn('获取付费片单失败');
-        }
-      } catch (error) {
-        console.error('请求出错:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchPaidLists();
+    // 获取热门资源
+    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="recommend-wrapper">
-      <h2 className="recommend-section-title">付费片单</h2>
-      {loading ? (
-        <p>加载中...</p>
+    <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="recommend-paid-row">
-          {paidLists.map((item) => (
-            <div className="paid-card" key={item.group_id}>
-              <img src={item.image_url} alt={item.group_name} className="paid-cover" />
-              <div className="paid-title">{item.group_name}</div>
-            </div>
-          ))}
-        </div>
+        <div className="login-reminder">请登录以获取个性化推荐</div>
       )}
     </div>
   );
diff --git a/src/pages/SeedList/SeedDetail/SeedDetail.jsx b/src/pages/SeedList/SeedDetail/SeedDetail.jsx
index 0cb738c..4ab9274 100644
--- a/src/pages/SeedList/SeedDetail/SeedDetail.jsx
+++ b/src/pages/SeedList/SeedDetail/SeedDetail.jsx
@@ -4,6 +4,7 @@
 import Header from '../../../components/Header';
 import './SeedDetail.css';
 import { useUser } from '../../../context/UserContext';
+import SeedRating from './SeedRating';
 
 const SeedDetail = () => {
   const params = useParams();
@@ -214,6 +215,8 @@
         <div className="action-buttons">
           <button className="btn" onClick={() => handleDownload(seed.id)}>下载</button>
           <button className="btn-outline" onClick={handleCollect}>收藏</button>
+          {/* <button className="btn" onClick={handleCollect}>收藏</button> */}
+          <SeedRating seedId={seed.id} />
         </div>
 
         <hr className="divider" />
diff --git a/src/pages/SeedList/SeedDetail/SeedRating.css b/src/pages/SeedList/SeedDetail/SeedRating.css
new file mode 100644
index 0000000..e40c055
--- /dev/null
+++ b/src/pages/SeedList/SeedDetail/SeedRating.css
@@ -0,0 +1,23 @@
+.seed-rating {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 18px;
+}
+
+.star {
+  cursor: pointer;
+  color: #ccc;
+  font-size: 24px;
+  transition: color 0.3s;
+}
+
+.star.active {
+  color: rgba(240, 184, 62, 0.916);
+}
+
+.thank-you {
+  margin-left: 10px;
+  font-size: 14px;
+  color: rgba(222, 91, 111, 0.982);
+}
diff --git a/src/pages/SeedList/SeedDetail/SeedRating.jsx b/src/pages/SeedList/SeedDetail/SeedRating.jsx
new file mode 100644
index 0000000..1841443
--- /dev/null
+++ b/src/pages/SeedList/SeedDetail/SeedRating.jsx
@@ -0,0 +1,125 @@
+// import React, { useState, useEffect } from 'react';
+// import axios from 'axios';
+// import './SeedRating.css';
+// import { useUser } from '../../../context/UserContext';
+
+// const SeedRating = ({ seedId }) => {
+//   const { user } = useUser();
+//   const [score, setScore] = useState(0);
+//   const [submitted, setSubmitted] = useState(false);
+
+// const handleRating = async (newScore) => {
+//   if (!user || !user.userId) {
+//     alert('请先登录再评分');
+//     return;
+//   }
+
+//   try {
+//     const res = await axios.post('/echo/ratings', null, {
+//       params: {
+//         userId: user.userId,
+//         seedId,
+//         score: newScore,
+//       },
+//     });
+
+//     if (res.data && res.data.status === 'success') {
+//       setScore(newScore);
+//       setSubmitted(true);
+//       alert('评分成功');
+//     } else {
+//       alert('评分失败，请稍后再试');
+//     }
+//   } catch (error) {
+//     console.error('评分出错:', error);
+//     alert('评分请求失败');
+//   }
+// };
+
+
+
+//   return (
+//     <div className="seed-rating">
+//       <span>评分：</span>
+//       {[1, 2, 3, 4, 5].map((star) => (
+//         <span
+//           key={star}
+//           className={`star ${star <= score ? 'active' : ''}`}
+//         //   onClick={() => !submitted && handleRating(star)}
+//           onClick={() => handleRating(star)}
+
+//         >
+//           ★
+//         </span>
+//       ))}
+//       {submitted && <span className="thank-you">感谢您的评分！</span>}
+//     </div>
+//   );
+// };
+
+// export default SeedRating;
+
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import './SeedRating.css';
+import { useUser } from '../../../context/UserContext';
+
+const SeedRating = ({ seedId }) => {
+  const { user } = useUser();
+  const [score, setScore] = useState(0);           // 最终提交的分数
+  const [hoverScore, setHoverScore] = useState(0); // 鼠标悬停显示
+  const [submitted, setSubmitted] = useState(false);
+  const [loading, setLoading] = useState(false);   // 防止重复点击
+
+  const handleRating = async (newScore) => {
+    if (!user || !user.userId) {
+      alert('请先登录再评分');
+      return;
+    }
+    if (submitted || loading) return;
+
+    setLoading(true);
+    try {
+      const res = await axios.post('/echo/ratings', null, {
+        params: {
+          userId: user.userId,
+          seedId,
+          score: newScore,
+        },
+      });
+
+      if (res.data?.status === 'success') {
+        setScore(newScore);
+        setSubmitted(true);
+        alert('评分成功');
+      } else {
+        alert('评分失败，请稍后再试');
+      }
+    } catch (error) {
+      console.error('评分出错:', error);
+      alert('评分请求失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="seed-rating">
+      <span>评分：</span>
+      {[1, 2, 3, 4, 5].map((star) => (
+        <span
+          key={star}
+          className={`star ${star <= (hoverScore || score) ? 'active' : ''}`}
+          onMouseEnter={() => !submitted && setHoverScore(star)}
+          onMouseLeave={() => !submitted && setHoverScore(0)}
+          onClick={() => handleRating(star)}
+        >
+          ★
+        </span>
+      ))}
+      {submitted && <span className="thank-you">感谢您的评分！</span>}
+    </div>
+  );
+};
+
+export default SeedRating;