优化种子评分、热门资源推荐
Change-Id: I9007f3d1d77df8a1d3eeb33c35897ea04c8e3c16
diff --git a/src/pages/SeedList/SeedDetail/SeedRating.jsx b/src/pages/SeedList/SeedDetail/SeedRating.jsx
new file mode 100644
index 0000000..1841443
--- /dev/null
+++ b/src/pages/SeedList/SeedDetail/SeedRating.jsx
@@ -0,0 +1,125 @@
+// import React, { useState, useEffect } from 'react';
+// import axios from 'axios';
+// import './SeedRating.css';
+// import { useUser } from '../../../context/UserContext';
+
+// const SeedRating = ({ seedId }) => {
+// const { user } = useUser();
+// const [score, setScore] = useState(0);
+// const [submitted, setSubmitted] = useState(false);
+
+// const handleRating = async (newScore) => {
+// if (!user || !user.userId) {
+// alert('请先登录再评分');
+// return;
+// }
+
+// try {
+// const res = await axios.post('/echo/ratings', null, {
+// params: {
+// userId: user.userId,
+// seedId,
+// score: newScore,
+// },
+// });
+
+// if (res.data && res.data.status === 'success') {
+// setScore(newScore);
+// setSubmitted(true);
+// alert('评分成功');
+// } else {
+// alert('评分失败，请稍后再试');
+// }
+// } catch (error) {
+// console.error('评分出错:', error);
+// alert('评分请求失败');
+// }
+// };
+
+
+
+// return (
+// <div className="seed-rating">
+// <span>评分：</span>
+// {[1, 2, 3, 4, 5].map((star) => (
+// <span
+// key={star}
+// className={`star ${star <= score ? 'active' : ''}`}
+// // onClick={() => !submitted && handleRating(star)}
+// onClick={() => handleRating(star)}
+
+// >
+// ★
+// </span>
+// ))}
+// {submitted && <span className="thank-you">感谢您的评分！</span>}
+// </div>
+// );
+// };
+
+// export default SeedRating;
+
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import './SeedRating.css';
+import { useUser } from '../../../context/UserContext';
+
+const SeedRating = ({ seedId }) => {
+ const { user } = useUser();
+ const [score, setScore] = useState(0); // 最终提交的分数
+ const [hoverScore, setHoverScore] = useState(0); // 鼠标悬停显示
+ const [submitted, setSubmitted] = useState(false);
+ const [loading, setLoading] = useState(false); // 防止重复点击
+
+ const handleRating = async (newScore) => {
+ if (!user || !user.userId) {
+ alert('请先登录再评分');
+ return;
+ }
+ if (submitted || loading) return;
+
+ setLoading(true);
+ try {
+ const res = await axios.post('/echo/ratings', null, {
+ params: {
+ userId: user.userId,
+ seedId,
+ score: newScore,
+ },
+ });
+
+ if (res.data?.status === 'success') {
+ setScore(newScore);
+ setSubmitted(true);
+ alert('评分成功');
+ } else {
+ alert('评分失败，请稍后再试');
+ }
+ } catch (error) {
+ console.error('评分出错:', error);
+ alert('评分请求失败');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+ <div className="seed-rating">
+ <span>评分：</span>
+ {[1, 2, 3, 4, 5].map((star) => (
+ <span
+ key={star}
+ className={`star ${star <= (hoverScore || score) ? 'active' : ''}`}
+ onMouseEnter={() => !submitted && setHoverScore(star)}
+ onMouseLeave={() => !submitted && setHoverScore(0)}
+ onClick={() => handleRating(star)}
+ >
+ ★
+ </span>
+ ))}
+ {submitted && <span className="thank-you">感谢您的评分！</span>}
+ </div>
+ );
+};
+
+export default SeedRating;