create-seed-detail
Change-Id: I7dcce81a7510b6fa97781d3ce509a8dc2ac229d4
diff --git a/src/pages/PublishSeed/PublishSeed.css b/src/pages/PublishSeed/PublishSeed.css
index e69de29..61b1405 100644
--- a/src/pages/PublishSeed/PublishSeed.css
+++ b/src/pages/PublishSeed/PublishSeed.css
@@ -0,0 +1,145 @@
+.publish-seed-container {
+ background-color: #5c3f31;
+ color: white;
+ padding: 20px;
+ border-radius: 12px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ }
+
+ h2 {
+ text-align: center;
+ font-size: 1.8rem;
+ margin-bottom: 20px;
+ color: #fff;
+ }
+
+ .message {
+ text-align: center;
+ margin-bottom: 20px;
+ color: #ff6f61;
+ font-weight: bold;
+ }
+
+ .form-group {
+ margin-bottom: 20px;
+ }
+
+ label {
+ font-size: 1rem;
+ margin-bottom: 8px;
+ display: block;
+ }
+
+ input[type="text"],
+ textarea,
+ select,
+ input[type="url"],
+ input[type="file"] {
+ width: 100%;
+ padding: 8px 12px;
+ border-radius: 6px;
+ border: 1px solid #ddd;
+ background-color: #f9f9f9;
+ color: #333;
+ font-size: 1rem;
+ }
+
+ textarea {
+ height: 100px;
+ resize: none;
+ }
+
+ input[type="file"] {
+ padding: 6px;
+ }
+
+ input[type="url"] {
+ padding: 8px 12px;
+ }
+
+ input[type="text"]:focus,
+ textarea:focus,
+ select:focus,
+ input[type="url"]:focus,
+ input[type="file"]:focus {
+ outline: none;
+ border-color: #b38867;
+ }
+
+ button[type="submit"] {
+ padding: 12px 20px;
+ border: none;
+ background-color: #007bff;
+ color: white;
+ font-size: 1rem;
+ border-radius: 6px;
+ cursor: pointer;
+ width: 100%;
+ transition: background-color 0.2s ease;
+ }
+
+ button[type="submit"]:disabled {
+ background-color: #d6d6d6;
+ cursor: not-allowed;
+ }
+
+ button[type="submit"]:hover {
+ background-color: #0056b3;
+ }
+
+ input[type="text"],
+ input[type="url"],
+ select {
+ margin-bottom: 10px;
+ }
+
+ input[type="file"] {
+ margin-bottom: 10px;
+ }
+
+ .publish-seed-container .form-group:last-child {
+ margin-bottom: 0;
+ }
+
+ .publish-seed-container .form-group label {
+ color: #ddd;
+ font-size: 1rem;
+ }
+
+ .publish-seed-container .form-group input,
+ .publish-seed-container .form-group select,
+ .publish-seed-container .form-group textarea {
+ background-color: #4e3b30;
+ color: white;
+ }
+
+ .publish-seed-container .form-group input:focus,
+ .publish-seed-container .form-group select:focus,
+ .publish-seed-container .form-group textarea:focus {
+ border-color: #b38867;
+ outline: none;
+ }
+
+ input[type="file"] {
+ border: none;
+ background-color: #4e3b30;
+ }
+
+ input[type="file"]:focus {
+ outline: none;
+ }
+
+ .form-group button {
+ background-color: #5c3f31;
+ color: #fff;
+ padding: 12px;
+ font-size: 1rem;
+ border-radius: 8px;
+ cursor: pointer;
+ width: 100%;
+ }
+
+ .form-group button:hover {
+ background-color: #b38867;
+ }
+
\ No newline at end of file
diff --git a/src/pages/PublishSeed/PublishSeed.jsx b/src/pages/PublishSeed/PublishSeed.jsx
index e69de29..7ead11d 100644
--- a/src/pages/PublishSeed/PublishSeed.jsx
+++ b/src/pages/PublishSeed/PublishSeed.jsx
@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import Header from '../../components/Header'; // 导入 Header 组件
+
+const API_BASE = process.env.REACT_APP_API_BASE;
+
+const PublishSeed = () => {
+ const [title, setTitle] = useState('');
+ const [description, setDescription] = useState('');
+ const [tags, setTags] = useState([]);
+ const [category, setCategory] = useState('movie');
+ const [file, setFile] = useState(null);
+ const [imageUrl, setImageUrl] = useState('');
+ const [message, setMessage] = useState('');
+ const [isLoading, setIsLoading] = useState(false);
+
+ const handleTagsChange = (e) => {
+ setTags(e.target.value.split(',').map(tag => tag.trim()));
+ };
+
+ const handleFileChange = (e) => {
+ setFile(e.target.files[0]);
+ };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setIsLoading(true);
+ setMessage('');
+
+ const formData = new FormData();
+ formData.append('title', title);
+ formData.append('description', description);
+ formData.append('tags', JSON.stringify(tags)); // Tags as JSON array
+ formData.append('category', category);
+ formData.append('file', file);
+ formData.append('image_url', imageUrl);
+
+ try {
+ const response = await axios.post(`${API_BASE}/echo/seeds/upload`, formData, {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+ });
+
+ if (response.data.status === 'success') {
+ setMessage('种子上传成功');
+ } else {
+ setMessage('上传失败，请稍后再试');
+ }
+ } catch (error) {
+ console.error(error);
+ setMessage('上传失败，发生了错误');
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ return (
+ <div className="publish-seed-container">
+ <Header /> {/* 在这里插入导航栏 */}
+ {message && <div className="message">{message}</div>}
+ <form onSubmit={handleSubmit} encType="multipart/form-data">
+ <div className="form-group">
+ <label>标题</label>
+ <input
+ type="text"
+ value={title}
+ onChange={(e) => setTitle(e.target.value)}
+ required
+ />
+ </div>
+
+ <div className="form-group">
+ <label>描述</label>
+ <textarea
+ value={description}
+ onChange={(e) => setDescription(e.target.value)}
+ required
+ />
+ </div>
+
+ <div className="form-group">
+ <label>标签 (逗号分隔)</label>
+ <input
+ type="text"
+ value={tags.join(', ')}
+ onChange={handleTagsChange}
+ placeholder="例如：科幻, 动作"
+ required
+ />
+ </div>
+
+ <div className="form-group">
+ <label>分类</label>
+ <select
+ value={category}
+ onChange={(e) => setCategory(e.target.value)}
+ required
+ >
+ <option value="movie">电影</option>
+ <option value="tv">电视剧</option>
+ <option value="music">音乐</option>
+ </select>
+ </div>
+
+ <div className="form-group">
+ <label>种子文件</label>
+ <input
+ type="file"
+ onChange={handleFileChange}
+ required
+ />
+ </div>
+
+ <div className="form-group">
+ <label>封面图URL</label>
+ <input
+ type="url"
+ value={imageUrl}
+ onChange={(e) => setImageUrl(e.target.value)}
+ placeholder="例如：http://example.com/images/cover.jpg"
+ required
+ />
+ </div>
+
+ <div className="form-group">
+ <button type="submit" disabled={isLoading}>
+ {isLoading ? '正在上传...' : '上传种子'}
+ </button>
+ </div>
+ </form>
+ </div>
+ );
+};
+
+export default PublishSeed;