新增种子收藏和种子促销,首页推荐显示

Change-Id: Ia8632b7909845230a0becf1616dc647e0c7e292b
diff --git a/front/src/TorrentDetailPage.js b/front/src/TorrentDetailPage.js
index cc2dd24..ab34d98 100644
--- a/front/src/TorrentDetailPage.js
+++ b/front/src/TorrentDetailPage.js
@@ -10,12 +10,13 @@
   const [error, setError] = React.useState(null);

   // 假设你从某个地方获取了 userId(例如登录状态、localStorage 等)

   const [userId] = React.useState('user1550e8400-e29b-41d4-a716-44665544000023'); // 替换为实际的用户 ID

+  const [isFavorite, setIsFavorite] = React.useState(false); // 收藏状态

 

   const handleClick = () => {

     // 构造下载 URL,包含 userId 和 torrentId 参数

     console.log(torrentId)

     const downloadUrl = `${API_BASE_URL}/api/get-torrent?userId=${encodeURIComponent(userId)}&torrentId=${encodeURIComponent(torrentId)}`;

-    

+

     // 发起 GET 请求下载文件

     fetch(downloadUrl)

       .then(response => {

@@ -41,6 +42,11 @@
       });

   };

 

+  // 收藏按钮示例逻辑(仅前端切换)

+  const handleFavorite = () => {

+    setIsFavorite(fav => !fav);

+  };

+

   React.useEffect(() => {

     setLoading(true);

     setError(null);

@@ -64,24 +70,65 @@
   if (!detail) return <div className="container"><h1>未找到详情</h1></div>;

 

   return (

-    <div className="container">

-      <h1>种子详情页</h1>

-      <h2 style={{ fontSize: 'inherit', fontWeight: 'normal', textAlign: 'left' }}>标题: {detail.title || `种子${torrentId}`}</h2>

-      <p style={{ fontSize: 'inherit', textAlign: 'left' }}>简介: {detail.description || `这是种子${torrentId}的详细信息。`}</p>

-      <div style={{ textAlign: 'center', marginTop: '20px' }}>

-        <button 

-          style={{ 

-            padding: '10px 20px', 

-            fontSize: '16px', 

-            cursor: 'pointer', 

-            backgroundColor: '#d3f0ff', 

-            border: 'none', 

-            borderRadius: '4px' 

-          }} 

-          onClick={handleClick}

-        >

-          下载

-        </button>

+    <div className="container" style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }}>

+      <div

+        style={{

+          background: "#fff",

+          borderRadius: 16,

+          boxShadow: "0 4px 24px #e0e7ff",

+          padding: "36px 48px",

+          maxWidth: 540,

+          width: "100%",

+          marginTop: 48,

+        }}

+      >

+        <h1 style={{ color: "#1976d2", fontWeight: 700, marginBottom: 24, fontSize: 28, letterSpacing: 1 }}>种子详情页</h1>

+        <div style={{ marginBottom: 18 }}>

+          <div style={{ fontSize: 20, fontWeight: 600, marginBottom: 8, color: "#222" }}>

+            标题:{detail.title || `种子${torrentId}`}

+          </div>

+          <div style={{ fontSize: 16, color: "#555", marginBottom: 8 }}>

+            简介:{detail.description || `这是种子${torrentId}的详细信息。`}

+          </div>

+        </div>

+        <div style={{ display: "flex", gap: 24, marginTop: 32, justifyContent: "center" }}>

+          <button

+            style={{

+              padding: "10px 32px",

+              fontSize: "16px",

+              cursor: "pointer",

+              background: "linear-gradient(90deg, #42a5f5 0%, #1976d2 100%)",

+              color: "#fff",

+              border: "none",

+              borderRadius: "8px",

+              fontWeight: 600,

+              boxShadow: "0 2px 8px #b2d8ea",

+              transition: "background 0.2s",

+            }}

+            onClick={handleClick}

+          >

+            下载

+          </button>

+          <button

+            style={{

+              padding: "10px 32px",

+              fontSize: "16px",

+              cursor: "pointer",

+              background: isFavorite

+                ? "linear-gradient(90deg, #ffb74d 0%, #ff9800 100%)"

+                : "linear-gradient(90deg, #f0f0f0 0%, #bdbdbd 100%)",

+              color: isFavorite ? "#fff" : "#333",

+              border: "none",

+              borderRadius: "8px",

+              fontWeight: 600,

+              boxShadow: isFavorite ? "0 2px 8px #ffe0b2" : "0 2px 8px #e0e7ff",

+              transition: "background 0.2s",

+            }}

+            onClick={handleFavorite}

+          >

+            {isFavorite ? "已收藏" : "收藏"}

+          </button>

+        </div>

       </div>

     </div>

   );