create-seed-detail
Change-Id: I7dcce81a7510b6fa97781d3ce509a8dc2ac229d4
diff --git a/src/pages/SeedList/SeedDetail/SeedDetail.css b/src/pages/SeedList/SeedDetail/SeedDetail.css
new file mode 100644
index 0000000..ce4d70e
--- /dev/null
+++ b/src/pages/SeedList/SeedDetail/SeedDetail.css
@@ -0,0 +1,30 @@
+.seed-detail-container {
+ padding: 20px;
+ }
+
+ .seed-header {
+ display: flex;
+ }
+
+ .cover-image {
+ width: 200px;
+ height: auto;
+ margin-right: 20px;
+ border-radius: 8px;
+ }
+
+ .seed-basic-info p, .seed-media-info p {
+ margin: 6px 0;
+ }
+
+ .uploader-info {
+ margin-top: 30px;
+ border-top: 1px solid #ccc;
+ padding-top: 10px;
+ }
+
+ .uploader-info .avatar {
+ width: 60px;
+ border-radius: 50%;
+ }
+
\ No newline at end of file
diff --git a/src/pages/SeedList/SeedDetail/SeedDetail.jsx b/src/pages/SeedList/SeedDetail/SeedDetail.jsx
new file mode 100644
index 0000000..464da3d
--- /dev/null
+++ b/src/pages/SeedList/SeedDetail/SeedDetail.jsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { useParams } from 'react-router-dom';
+import Header from '../../../components/Header';
+import './SeedDetail.css';
+
+const API_BASE = process.env.REACT_APP_API_BASE;
+
+const SeedDetail = () => {
+ const { seed_id } = useParams();
+ const [seed, setSeed] = useState(null);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ axios
+ .get(`${API_BASE}/echo/seeds/${seed_id}`)
+ .then((res) => {
+ if (res.data.status === 'success') {
+ setSeed(res.data.seed);
+ } else {
+ setError('未能获取种子信息');
+ }
+ })
+ .catch(() => {
+ setError('获取种子详情失败');
+ });
+ }, [seed_id]);
+
+ if (error) {
+ return (
+ <div>
+ <Header />
+ <div className="seed-detail-container">
+ <p className="error">{error}</p>
+ </div>
+ </div>
+ );
+ }
+
+ if (!seed) {
+ return (
+ <div>
+ <Header />
+ <div className="seed-detail-container">
+ <p>加载中...</p>
+ </div>
+ </div>
+ );
+ }
+
+ return (
+ <div>
+ <Header />
+ <div className="seed-detail-container">
+ <div className="seed-header">
+ <img src={seed.cover_url} alt={seed.title} className="cover-image" />
+ <div className="seed-basic-info">
+ <h1>{seed.title}</h1>
+ <p><strong>分类：</strong>{seed.category}</p>
+ <p><strong>标签：</strong>{seed.tags.join(' / ')}</p>
+ <p><strong>简介：</strong>{seed.description}</p>
+ <p><strong>大小：</strong>{seed.size} GB</p>
+ <p><strong>分辨率：</strong>{seed.resolution}</p>
+ <p><strong>片长：</strong>{seed.duration}</p>
+ <p><strong>地区：</strong>{seed.region}</p>
+ <p><strong>发布时间：</strong>{new Date(seed.upload_time).toLocaleString()}</p>
+ <p><strong>下载次数：</strong>{seed.downloads}</p>
+ </div>
+ </div>
+
+ {(seed.category === '电影' || seed.category === '电视剧') && (
+ <div className="seed-media-info">
+ <p><strong>导演：</strong>{seed.director}</p>
+ <p><strong>编剧：</strong>{seed.writer}</p>
+ <p><strong>主演：</strong>{seed.actors.join(' / ')}</p>
+ </div>
+ )}
+
+ <div className="uploader-info">
+ <h3>发种人</h3>
+ <img src={seed.user.avatar_url} alt={seed.user.username} className="avatar" />
+ <p>{seed.user.username}</p>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default SeedDetail;