diff --git a/src/components/RecommendPreview.jsx b/src/components/RecommendPreview.jsx
new file mode 100644
index 0000000..5eb45d3
--- /dev/null
+++ b/src/components/RecommendPreview.jsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import '../RecommendPreview.css';
+
+const RecommendPreview = () => {
+  
+  const [recommendList, setRecommendList] = useState([]);
+  const navigate = useNavigate();
+
+  const storedUser = localStorage.getItem('user');
+    //let currentUserId = null; // 初始化为 null
+    let currentUserId = null; // 初始化为 null
+
+    if (storedUser) {
+        try {
+            const parsedUser = JSON.parse(storedUser);
+            currentUserId = parsedUser.userid; // 直接赋值
+        } catch (error) {
+            console.error('解析用户数据失败:', error);
+            // 可以在这里处理 JSON 解析错误（如数据损坏）
+        }
+    } else {
+        console.log('用户未登录');
+    }
+
+    // 现在 currentUserId 可以在后续逻辑中使用
+    console.log('当前用户ID:', currentUserId);
+
+  useEffect(() => {
+    const fetchRecommendList = async () => {
+      try {
+        const res = await fetch(`http://localhost:8080/recommend/list?userId=${currentUserId}`);
+        //const res = await fetch('http://localhost:8080/torrent/list');
+        const data = await res.json();
+        console.log('推荐列表数据:', data);
+        setRecommendList(data.slice(0, 8)); // 只展示前8个
+      } catch (err) {
+        console.error('推荐获取失败:', err);
+      }
+    };
+    fetchRecommendList();
+  }, []);
+
+  const formatFileSize = (bytes) => {
+    if (!bytes) return '0 Bytes';
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
+  };
+
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString();
+  };
+
+  return (
+    <div className="recommend-horizontal-container">
+      <div className="recommend-header">
+        <h2>为你推荐</h2>
+        <button className="more-btn" onClick={() => navigate('/recommend')}>
+          更多
+        </button>
+      </div>
+
+      <div className="recommend-horizontal-grid">
+        {recommendList.map((torrent) => (
+          <div key={torrent.torrentid} className="horizontal-card">
+            {torrent.coverImagePath ? (
+              <img src={torrent.coverImagePath} alt="封面" className="card-cover" />
+            ) : (
+              <div className="card-no-cover">无封面</div>
+            )}
+            <div className="card-info">
+              <div className="card-title" title={torrent.torrentTitle || torrent.filename}>
+                {torrent.torrentTitle || torrent.filename}
+              </div>
+              <div className="card-description">
+                {torrent.description || '暂无描述'}
+              </div>
+              <div className="card-meta">
+                <span>{formatDate(torrent.uploadTime)}</span>
+                <span>{formatFileSize(torrent.torrentSize)}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RecommendPreview;