修改提示框样式、完成付费片单、推荐跳转
Change-Id: Ie84c53d4e306435144b1f26ceb39cc182e99d57a
diff --git a/src/pages/PublishSeed/PublishSeed.css b/src/pages/PublishSeed/PublishSeed.css
index 7525fb7..ff7fcad 100644
--- a/src/pages/PublishSeed/PublishSeed.css
+++ b/src/pages/PublishSeed/PublishSeed.css
@@ -1,12 +1,12 @@
-.publish-seed-container {
- background: #333;
+.ps-container {
+ background: #f8f3ef;
color: #333;
min-height: 100vh;
padding: 20px 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
-.pub-card {
+.ps-card {
background-color: #e9ded2;
border-radius: 16px;
max-width: 800px;
@@ -16,20 +16,20 @@
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
-form > div {
+.ps-form > div {
margin-bottom: 20px;
}
-label {
+.ps-label {
display: block;
font-weight: bold;
margin-bottom: 8px;
color: #5F4437;
}
-input[type="text"],
-textarea,
-select {
+.ps-input-text,
+.ps-textarea,
+.ps-select {
width: 100%;
padding: 10px 12px;
border-radius: 6px;
@@ -40,20 +40,20 @@
transition: border-color 0.3s;
}
-input[type="text"]:focus,
-textarea:focus,
-select:focus {
+.ps-input-text:focus,
+.ps-textarea:focus,
+.ps-select:focus {
outline: none;
border-color: #c49c6b;
}
-textarea {
+.ps-textarea {
resize: vertical;
min-height: 80px;
}
-.seed-file-label,
-.cover-upload button {
+.ps-seed-file-label,
+.ps-cover-upload-button {
display: inline-block;
padding: 8px 16px;
border: 1px solid #e0c4a1;
@@ -66,17 +66,17 @@
transition: all 0.2s ease;
}
-.seed-file-label:hover,
-.cover-upload button:hover {
+.ps-seed-file-label:hover,
+.ps-cover-upload-button:hover {
background-color: #f1e0d0;
}
-.seed-file input,
-.cover-upload input {
+.ps-seed-file-input,
+.ps-cover-upload-input {
display: none;
}
-.message {
+.ps-message {
background-color: #fff3cd;
color: #856404;
padding: 12px;
@@ -85,11 +85,11 @@
border: 1px solid #ffeeba;
}
-.upload-button {
+.ps-upload-button {
text-align: center;
}
-.upload-button button {
+.ps-upload-button button {
background-color: #5F4437;
color: #fff;
padding: 12px 32px;
@@ -100,16 +100,16 @@
transition: background-color 0.2s ease;
}
-.upload-button button:hover {
+.ps-upload-button button:hover {
background-color: #472f23;
}
-.upload-button button:disabled {
+.ps-upload-button button:disabled {
background-color: #9c8c84;
cursor: not-allowed;
}
-img {
+.ps-img-preview {
border-radius: 8px;
border: 1px solid #ccc;
max-width: 100%;
diff --git a/src/pages/PublishSeed/PublishSeed.jsx b/src/pages/PublishSeed/PublishSeed.jsx
index a3ac4ad..27717ca 100644
--- a/src/pages/PublishSeed/PublishSeed.jsx
+++ b/src/pages/PublishSeed/PublishSeed.jsx
@@ -4,6 +4,7 @@
import Header from '../../components/Header';
import './PublishSeed.css';
import { useUser } from '../../context/UserContext';
+import { uploadFile } from '../../api/file';
const PublishSeed = () => {
const [title, setTitle] = useState('');
@@ -86,7 +87,6 @@
formData.append('category', category);
formData.append('tags', tags.join(',')); // 逗号分隔字符串
formData.append('uploader', user.userId);
-
if (imageFile) {
formData.append('coverImage', imageFile);
}
@@ -113,20 +113,22 @@
};
return (
- <div className="publish-seed-container">
+ <div className="ps-container">
<Header />
- <div className="pub-card">
- {message && <div className="message">{message}</div>}
+ <div className="ps-card">
+ {message && <div className="ps-message">{message}</div>}
<form
+ className="ps-form"
onSubmit={(e) => {
console.log('[DEBUG] form onSubmit 触发');
handleSubmit(e);
}}
encType="multipart/form-data"
>
- <div className="title-tag">
- <label>标题</label>
+ <div>
+ <label className="ps-label">标题</label>
<input
+ className="ps-input-text"
type="text"
value={title}
onChange={(e) => {
@@ -137,9 +139,10 @@
/>
</div>
- <div className="discription">
- <label>描述</label>
+ <div>
+ <label className="ps-label">描述</label>
<textarea
+ className="ps-textarea"
value={description}
onChange={(e) => {
console.log('[DEBUG] 描述输入变化:', e.target.value);
@@ -149,9 +152,10 @@
/>
</div>
- <div className="title-tag">
- <label>标签 (逗号分隔)</label>
+ <div>
+ <label className="ps-label">标签 (逗号分隔)</label>
<input
+ className="ps-input-text"
type="text"
value={tags.join(', ')}
onChange={handleTagsChange}
@@ -160,9 +164,10 @@
/>
</div>
- <div className="pub-categoty">
- <label>分类</label>
+ <div>
+ <label className="ps-label">分类</label>
<select
+ className="ps-select"
value={category}
onChange={(e) => {
console.log('[DEBUG] 分类选择变化:', e.target.value);
@@ -184,10 +189,10 @@
</select>
</div>
- <div className="seed-file">
- <label>种子文件</label>
+ <div>
+ <label className="ps-label">种子文件</label>
<div
- className="seed-file-label"
+ className="ps-seed-file-label"
onClick={handleFileButtonClick}
style={{ cursor: 'pointer' }}
>
@@ -198,15 +203,19 @@
accept=".torrent"
ref={fileInputRef}
onChange={handleFileChange}
- style={{ display: 'none' }}
+ className="ps-seed-file-input"
/>
- {fileName && <div style={{ marginTop: '5px' }}>{fileName}</div>}
+ {fileName && <div style={{ marginTop: '5px', color: '#5F4437' }}>{fileName}</div>}
</div>
- <div className="form-group">
- <label>封面图</label>
- <div className="cover-upload">
- <button type="button" onClick={handleImageButtonClick}>
+ <div>
+ <label className="ps-label">封面图</label>
+ <div>
+ <button
+ type="button"
+ onClick={handleImageButtonClick}
+ className="ps-cover-upload-button"
+ >
上传图片
</button>
<input
@@ -214,7 +223,7 @@
accept="image/*"
ref={imageInputRef}
onChange={handleImageChange}
- style={{ display: 'none' }}
+ className="ps-cover-upload-input"
/>
</div>
{previewUrl && (
@@ -222,13 +231,13 @@
<img
src={previewUrl}
alt="封面预览"
- style={{ maxWidth: '100%', maxHeight: '200px' }}
+ className="ps-img-preview"
/>
</div>
)}
</div>
- <div className="upload-button">
+ <div className="ps-upload-button">
<button
type="submit"
disabled={isLoading}