final
Change-Id: Icf4ec3950a6bd1e066fa4a1976af36721af62a06
diff --git a/front/src/BegSeedPage.js b/front/src/BegSeedPage.js
index 0854535..0c1a0bb 100644
--- a/front/src/BegSeedPage.js
+++ b/front/src/BegSeedPage.js
@@ -1,7 +1,12 @@
import React, { useState, useEffect } from "react";
import HelpIcon from "@mui/icons-material/Help";
+import PeopleIcon from "@mui/icons-material/People";
+import MonetizationOnIcon from "@mui/icons-material/MonetizationOn";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import { useNavigate } from "react-router-dom";
import { API_BASE_URL } from "./config";
+import "./BegSeedPage.css";
export default function BegSeedPage() {
const navigate = useNavigate();
@@ -153,195 +158,142 @@
};
return (
- <div className="container">
- <h1 style={{ margin: "24px 0 32px 0", color: "#1976d2" }}>
- <HelpIcon style={{ verticalAlign: "middle", marginRight: 8 }} />
- 求种列表
- </h1>
-
- {/* 加载状态 */}
- {loading && (
- <div style={{ textAlign: "center", margin: "40px 0", color: "#666" }}>
- 正在加载求种列表...
+ <div className="begseed-container">
+ <div className="begseed-content">
+ <h1 className="begseed-title">
+ <HelpIcon className="begseed-title-icon" style={{ fontSize: 42 }} />
+ 求种列表
+ </h1>
+
+ {/* 加载状态 */}
+ {loading && (
+ <div className="begseed-loading">
+ 正在加载求种列表...
+ </div>
+ )}
+
+ {/* 错误状态 */}
+ {error && (
+ <div className="begseed-error">
+ 加载失败: {error} (已显示默认数据)
+ </div>
+ )}
+
+ <div className="begseed-publish-section">
+ <button
+ onClick={() => setShowForm(true)}
+ disabled={loading}
+ className="begseed-publish-btn"
+ >
+ 发布求种任务
+ </button>
</div>
- )}
-
- {/* 错误状态 */}
- {error && (
- <div style={{
- textAlign: "center",
- margin: "20px 0",
- padding: "10px",
- background: "#ffebee",
- color: "#c62828",
- borderRadius: "4px"
- }}>
- 加载失败: {error} (已显示默认数据)
- </div>
- )}
-
- <div style={{ margin: "0 0 32px 0", textAlign: "center" }}>
- <button
- onClick={() => setShowForm(true)}
- disabled={loading}
- style={{
- fontSize: 18,
- padding: "12px 36px",
- background: loading ? "#ccc" : "linear-gradient(90deg, #42a5f5 0%, #1976d2 100%)",
- color: "#fff",
- border: "none",
- borderRadius: 8,
- fontWeight: 600,
- boxShadow: "0 2px 8px #b2d8ea",
- cursor: loading ? "not-allowed" : "pointer",
- transition: "background 0.2s",
- }}
- >
- 发布求种任务
- </button>
- </div>
- {showForm && (
- <div
- style={{
- background: "#fff",
- border: "1.5px solid #b2d8ea",
- borderRadius: 12,
- padding: 24,
- maxWidth: 480,
- margin: "0 auto 32px auto",
- boxShadow: "0 2px 8px #e0e7ff",
- }}
- >
- <h3 style={{ color: "#1976d2", marginBottom: 18 }}>发布求种任务</h3>
- <form onSubmit={handleSubmit}>
- <div style={{ marginBottom: 16 }}>
- <label style={{ display: "inline-block", width: 80 }}>求种信息：</label>
- <input
- type="text"
- name="info"
- value={formData.info}
- onChange={handleFormChange}
- required
- style={{
- padding: "6px 12px",
- borderRadius: 6,
- border: "1px solid #b2d8ea",
- width: 260,
- }}
- />
- </div>
- <div style={{ marginBottom: 16 }}>
- <label style={{ display: "inline-block", width: 80 }}>悬赏魔力值：</label>
- <input
- type="number"
- name="reward_magic"
- value={formData.reward_magic}
- onChange={handleFormChange}
- required
- min={1}
- style={{
- padding: "6px 12px",
- borderRadius: 6,
- border: "1px solid #b2d8ea",
- width: 120,
- }}
- />
- </div>
- <div style={{ marginBottom: 16 }}>
- <label style={{ display: "inline-block", width: 80 }}>截止日期：</label>
- <input
- type="datetime-local"
- name="deadline"
- value={formData.deadline}
- onChange={handleFormChange}
- required
- style={{
- padding: "6px 12px",
- borderRadius: 6,
- border: "1px solid #b2d8ea",
- width: 200,
- }}
- />
- </div>
- <div style={{ marginTop: 18 }}>
- <button
- type="submit"
- style={{
- background: "#1976d2",
- color: "#fff",
- border: "none",
- borderRadius: 6,
- padding: "8px 28px",
- fontWeight: 500,
- fontSize: 16,
- marginRight: 18,
- cursor: "pointer",
- }}
+
+ {showForm && (
+ <div className="begseed-form-container">
+ <h3 className="begseed-form-title">发布求种任务</h3>
+ <form onSubmit={handleSubmit}>
+ <div className="begseed-form-group">
+ <label className="begseed-form-label">求种信息：</label>
+ <input
+ type="text"
+ name="info"
+ value={formData.info}
+ onChange={handleFormChange}
+ required
+ className="begseed-form-input"
+ placeholder="请输入您要求种的资源信息"
+ />
+ </div>
+ <div className="begseed-form-group">
+ <label className="begseed-form-label">悬赏魔力值：</label>
+ <input
+ type="number"
+ name="reward_magic"
+ value={formData.reward_magic}
+ onChange={handleFormChange}
+ required
+ min={1}
+ className="begseed-form-input"
+ placeholder="请输入悬赏的魔力值"
+ />
+ </div>
+ <div className="begseed-form-group">
+ <label className="begseed-form-label">截止日期：</label>
+ <input
+ type="datetime-local"
+ name="deadline"
+ value={formData.deadline}
+ onChange={handleFormChange}
+ required
+ className="begseed-form-input"
+ />
+ </div>
+ <div className="begseed-form-actions">
+ <button type="submit" className="begseed-form-btn begseed-form-btn-primary">
+ 提交
+ </button>
+ <button
+ type="button"
+ onClick={() => setShowForm(false)}
+ className="begseed-form-btn begseed-form-btn-secondary"
+ >
+ 取消
+ </button>
+ </div>
+ </form>
+ </div>
+ )}
+
+ <div key={refreshKey} className="begseed-list">
+ {begSeedList.map((beg) => {
+ const isExpired = new Date(beg.deadline) < now || beg.has_match === 1;
+ const isCompleted = beg.has_match === 1;
+ const isActive = !isExpired && !isCompleted;
+
+ return (
+ <div
+ key={beg.beg_id}
+ className={`begseed-card ${isExpired ? 'begseed-card-expired' : ''}`}
+ onClick={() => navigate(`/begseed/${beg.beg_id}`)}
>
- 提交
- </button>
- <button
- type="button"
- onClick={() => setShowForm(false)}
- style={{
- background: "#b0b0b0",
- color: "#fff",
- border: "none",
- borderRadius: 6,
- padding: "8px 28px",
- fontWeight: 500,
- fontSize: 16,
- cursor: "pointer",
- }}
- >
- 取消
- </button>
- </div>
- </form>
+ <div className="begseed-card-content">
+ <div className="begseed-card-title">
+ {beg.info}
+ </div>
+
+ <div className="begseed-card-info">
+ <PeopleIcon className="begseed-card-info-icon" />
+ 求种人数：{beg.beg_count}
+ </div>
+
+ <div className="begseed-card-info">
+ <MonetizationOnIcon className="begseed-card-info-icon" />
+ 悬赏魔力值：{beg.reward_magic}
+ </div>
+
+ <div className="begseed-card-info">
+ <AccessTimeIcon className="begseed-card-info-icon" />
+ 截止时间：{new Date(beg.deadline).toLocaleString()}
+ </div>
+
+ <div className="begseed-card-info">
+ <CheckCircleIcon className="begseed-card-info-icon" />
+ <span
+ className={`begseed-card-status ${
+ isCompleted ? 'begseed-status-completed' :
+ isExpired ? 'begseed-status-expired' :
+ 'begseed-status-active'
+ }`}
+ >
+ {isCompleted ? "已完成" : isExpired ? "已过期" : "进行中"}
+ </span>
+ </div>
+ </div>
+ </div>
+ );
+ })}
</div>
- )}
- <div key={refreshKey} style={{ display: "flex", flexWrap: "wrap", gap: 24 }}>
- {begSeedList.map((beg) => {
- const isExpired =
- new Date(beg.deadline) < now || beg.has_match === 1;
- return (
- <div
- key={beg.beg_id}
- style={{
- background: isExpired ? "#f0f0f0" : "#e3f7e7",
- color: isExpired ? "#b0b0b0" : "#222",
- border: "1.5px solid #b2d8ea",
- borderRadius: 12,
- padding: 18,
- minWidth: 320,
- maxWidth: 420,
- boxShadow: "0 2px 8px #e0e7ff",
- opacity: isExpired ? 0.6 : 1,
- cursor: "pointer",
- marginBottom: 12,
- transition: "box-shadow 0.2s",
- }}
- onClick={() => navigate(`/begseed/${beg.beg_id}`)}
- >
- <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 8 }}>
- {beg.info}
- </div>
- <div>求种人数：{beg.beg_count}</div>
- <div>悬赏魔力值：{beg.reward_magic}</div>
- <div>
- 截止时间：{new Date(beg.deadline).toLocaleString()}
- </div>
- <div>
- 状态：
- {beg.has_match === 1
- ? "已完成"
- : new Date(beg.deadline) < now
- ? "已过期"
- : "进行中"}
- </div>
- </div>
- );
- })}
</div>
</div>
);