修改等级、新手指南
Change-Id: If60f5e1164f16fdabc8a5648a78c40fdd93c83a8
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..e9f889d
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1,24 @@
+<svg width="81" height="81" viewBox="0 0 81 81" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.5 6.74951V74.2496" stroke="#FBF2E3" stroke-width="4" stroke-linecap="round"/>
+<path d="M57.375 20.2498V60.7498" stroke="#FBF2E3" stroke-width="4" stroke-linecap="round"/>
+<path d="M6.75 30.3748V50.6248" stroke="#FBF2E3" stroke-width="4" stroke-linecap="round"/>
+<path d="M74.25 30.3748V50.6248" stroke="#FBF2E3" stroke-width="4" stroke-linecap="round"/>
+<path d="M23.625 20.2498V60.7498" stroke="#FBF2E3" stroke-width="4" stroke-linecap="round"/>
+<g clip-path="url(#clip0_137_45)">
+<mask id="mask0_137_45" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="28" y="27" width="26" height="26">
+<path d="M54 27H28V53H54V27Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_137_45)">
+<path d="M30.1665 43.7918C30.1666 40.271 32.3334 38.937 33.9583 38.3852C35.5831 37.8335 36.6667 37.8335 38.2915 36.2085C39.9163 34.5835 39.9168 31.3335 43.1666 30.2501C46.4163 29.1668 50.2575 30.7918 51.2914 34.5835C52.3253 38.3751 49.3961 43.2501 48.0419 44.8751C46.6877 46.5001 43.9784 49.2085 39.3747 49.7501C34.7711 50.2918 30.1664 47.3126 30.1665 43.7918Z" fill="#4A3B34" stroke="#FBF2E3" stroke-width="2" stroke-linejoin="round"/>
+<path d="M34.5 38.3986C38.2917 43.25 43.7083 38.3986 39.9167 33.5L34.5 38.3986Z" fill="#4A3B34"/>
+<path d="M34.5 38.3986C38.2917 43.25 43.7083 38.3986 39.9167 33.5" stroke="#FBF2E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.9585 38.3851C35.5833 37.8333 36.667 37.8333 38.2918 36.2083C39.9166 34.5833 39.917 31.3333 43.1668 30.25" fill="#4A3B34"/>
+<path d="M33.9585 38.3851C35.5833 37.8333 36.667 37.8333 38.2918 36.2083C39.9166 34.5833 39.917 31.3333 43.1668 30.25" stroke="#FBF2E3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_137_45">
+<rect width="26" height="26" fill="white" transform="translate(28 27)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/AuthButton.jsx b/src/components/AuthButton.jsx
index 246555a..f4428e2 100644
--- a/src/components/AuthButton.jsx
+++ b/src/components/AuthButton.jsx
@@ -11,7 +11,7 @@
}else{
clickFunc = (e) => {
e.preventDefault();
- toast.error("权限不足");
+ toast.error("等级不足，无法执行此操作");
}
}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index fd2a381..93d75cc 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,6 +1,8 @@
import React, { useEffect } from 'react';
import './Header.css';
-import logo from '../assets/logo.png';
+// import logo from '../assets/logo.png';
+import { ReactComponent as LogoIcon } from '../assets/logo.svg';
+
import { useUser } from '../context/UserContext';
import { BookOpen } from '@icon-park/react';
import { useLocation } from 'wouter';
@@ -10,21 +12,20 @@
const [location, setLocation] = useLocation();
const navLinks = [
- { to: '/friend-moments', label: '好友动态' },
- { to: '/forum', label: '论坛' },
- { to: '/interest-groups', label: '兴趣小组' },
{ to: '/seed-list', label: '种子列表' },
{ to: '/publish-seed', label: '发布种子' },
+ { to: '/friend-moments', label: '好友动态' },
+ { to: '/forum', label: '论坛' },
+ { to: '/interest-groups', label: '兴趣小组' },
];
- // 头像变化时刷新组件（这段其实 React 会自动做，但你手动 history 管理就错过了）
useEffect(() => {}, [user?.avatarUrl]);
return (
<div className="main-page">
<header className="header">
<div className="logo-and-name">
- <img src={logo} alt="网站 logo" className="logo" />
+ <LogoIcon className="logo" />
<span className="site-name">Echo</span>
</div>
<div className="user-and-message" style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
diff --git a/src/pages/AuthPage/AuthPage.css b/src/pages/AuthPage/AuthPage.css
index 6e8b965..00fb5d7 100644
--- a/src/pages/AuthPage/AuthPage.css
+++ b/src/pages/AuthPage/AuthPage.css
@@ -1,245 +1,210 @@
- .auth-container {
+.auth-container {
display: flex;
align-items: center;
- /* justify-content: flex-end; */
- justify-content: space-between;
+ justify-content: space-between;
min-height: 100vh;
- font-family: Arial, sans-serif;
- background: #5F4437;
- /* background: linear-gradient(180deg, #5F4437, #823c3c) */
- padding: 0 2rem; /* 添加左右内边距 */
+ font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
+ /* background: linear-gradient(135deg, #be8e9d 0%, #c48d74 100%); */
+ background: url('a.jpg') no-repeat center center fixed;
+ background-size: cover;
+ padding: 0 5%;
+ position: relative;
+ overflow: hidden;
}
- .logo-container {
- flex: 1;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 2rem;
- }
+.auth-container::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ left: -50%;
+ width: 200%;
+ height: 200%;
+ background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
+ transform: rotate(30deg);
+}
- .site-logo {
- width: 300px; /* 设置固定宽度 */
- height: auto; /* 高度自适应，保持比例 */
+.logo-container {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 2rem;
+ z-index: 1;
+}
+
+.site-logo {
+ width: 350px;
+ margin-left: -15%;
+ height: auto;
+ filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
+}
+
+.glass-card {
+ width: 35%;
+ margin-right: 10%;
+ background: rgba(255, 255, 255, 0.15);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ border-radius: 16px;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+ border: 1px solid rgba(255, 255, 255, 0.18);
+ overflow: hidden;
+ z-index: 2;
+ transition: all 0.3s ease;
+}
+
+.glass-card:hover {
+ transform: translateY(-5px);
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
+}
+
+.auth-header {
+ display: flex;
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.auth-tab {
+ flex: 1;
+ padding: 20px;
+ text-align: center;
+ font-size: 18px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ color: rgba(255, 255, 255, 0.7);
+ position: relative;
+}
+
+.auth-tab.active {
+ color: white;
+ font-weight: 600;
+}
+
+.auth-tab.active::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60%;
+ height: 3px;
+ background: white;
+ border-radius: 3px;
+}
+
+.auth-tab:not(.active):hover {
+ background: rgba(255, 255, 255, 0.05);
+}
+
+.auth-content {
+ padding: 30px;
+}
+
+.auth-form {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.form-group label {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.9);
+ text-align: left;
+ align-self: flex-start;
+}
+
+.form-group input[type="text"],
+.form-group input[type="email"],
+.form-group input[type="password"] {
+ padding: 14px 16px;
+ background: rgba(255, 255, 255, 0.1);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+ border-radius: 8px;
+ font-size: 16px;
+ color: white;
+ transition: all 0.3s ease;
+}
+
+.form-group input::placeholder {
+ color: rgba(255, 255, 255, 0.5);
+}
+
+.form-group input:focus {
+ background: rgba(255, 255, 255, 0.2);
+ border-color: rgba(255, 255, 255, 0.4);
+ outline: none;
+ box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
+}
+
+.auth-button {
+ background: rgba(255, 255, 255, 0.2);
+ color: white;
+ border: none;
+ border-radius: 8px;
+ padding: 16px;
+ font-size: 16px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ margin-top: 10px;
+ backdrop-filter: blur(5px);
+ border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.auth-button:hover {
+ background: rgba(255, 255, 255, 0.3);
+ transform: translateY(-2px);
+}
+
+.forgot-password {
+ color: rgba(255, 255, 255, 0.7);
+ text-decoration: none;
+ font-size: 14px;
+ transition: all 0.3s ease;
+}
+
+.forgot-password:hover {
+ color: white;
+ text-decoration: underline;
+}
+
+.error-message {
+ color: #ff6b6b;
+ font-size: 14px;
+ margin-top: 4px;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+
+/* 响应式调整 */
+@media (max-width: 768px) {
+ .auth-container {
+ flex-direction: column;
+ padding: 40px 20px;
+ justify-content: flex-start;
}
- .auth-card {
- width: 100%;
- max-width: 480px;
- background-color: #E4D8C9;
- border-radius: 8px;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
- overflow: hidden;
+ .logo-container {
+ margin-bottom: 40px;
}
- .auth-header {
- display: flex;
- border-bottom: 1px solid #eee;
+ .glass-card {
+ max-width: 100%;
+ }
+}
+
+@media (max-width: 480px) {
+ .auth-content {
+ padding: 20px;
}
.auth-tab {
- flex: 1;
padding: 16px;
- text-align: center;
- font-size: 18px;
- font-weight: 500;
- cursor: pointer;
- transition: all 0.3s ease;
- }
-
- .auth-tab.active {
- color: #BA929A;
- border-bottom: 2px solid #BA929A;
- }
-
- .auth-tab:not(.active) {
- color: #888;
- }
-
- .auth-tab:hover:not(.active) {
- background-color: #f9f9f9;
- }
-
- .auth-content {
- padding: 30px;
- }
-
- .auth-form {
- display: flex;
- flex-direction: column;
- gap: 20px;
- }
-
- .form-group {
- display: flex;
- flex-direction: column;
- gap: 8px;
- }
-
- .form-group label {
- font-weight: 500;
- color: #333;
- text-align: left;
- align-self: flex-start;
- }
-
- .form-group input[type="text"],
- .form-group input[type="email"],
- .form-group input[type="password"] {
- padding: 12px 16px;
- border: 1px solid #ddd;
- border-radius: 4px;
font-size: 16px;
- transition: border-color 0.3s;
}
-
- .form-group input:focus {
- border-color: #BA929A;
- outline: none;
- }
-
- .form-group-inline {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
-
- .checkbox-container {
- display: flex;
- align-items: center;
- gap: 8px;
- }
-
- .checkbox-container input[type="checkbox"] {
- width: 18px;
- height: 18px;
- cursor: pointer;
- }
-
- .forgot-password {
- color: #BA929A;
- text-decoration: none;
- font-size: 14px;
- }
-
- .forgot-password:hover {
- text-decoration: underline;
- }
-
- .auth-button {
- background-color: #BA929A;
- color: white;
- border: none;
- border-radius: 4px;
- padding: 14px;
- font-size: 16px;
- font-weight: 500;
- cursor: pointer;
- transition: background-color 0.3s;
- }
-
- .auth-button:hover {
- background-color: #BA929A;
- }
-
- .social-login {
- margin-top: 20px;
- text-align: center;
- }
-
- .social-login p {
- color: #666;
- margin-bottom: 15px;
- position: relative;
- }
-
- .social-login p::before,
- .social-login p::after {
- content: "";
- position: absolute;
- top: 50%;
- width: 30%;
- height: 1px;
- background-color: #ddd;
- }
-
- .social-login p::before {
- left: 0;
- }
-
- .social-login p::after {
- right: 0;
- }
-
- .social-icons {
- display: flex;
- justify-content: center;
- gap: 20px;
- }
-
- .social-icon {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- color: white;
- font-size: 12px;
- cursor: pointer;
- }
-
- .social-icon.wechat {
- background-color: #07c160;
- }
-
- .social-icon.weibo {
- background-color: #e6162d;
- }
-
- .social-icon.qq {
- background-color: #12b7f5;
- }
-
- .terms-container {
- flex-direction: column;
- align-items: flex-start;
- }
-
- .terms-link {
- color: #BA929A;
- text-decoration: none;
- }
-
- .terms-link:hover {
- text-decoration: underline;
- }
-
- .error-message {
- color: #e53e3e;
- font-size: 14px;
- margin-top: 4px;
- }
-
- /* Responsive adjustments */
- @media (max-width: 576px) {
- .auth-card {
- box-shadow: none;
- border-radius: 0;
- }
-
- .auth-content {
- padding: 20px;
- }
-
- .form-group-inline {
- flex-direction: column;
- align-items: flex-start;
- gap: 10px;
- }
-
- .social-icons {
- flex-wrap: wrap;
- }
- }
-
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/pages/AuthPage/AuthPage.jsx b/src/pages/AuthPage/AuthPage.jsx
index fe1b42b..51f323e 100644
--- a/src/pages/AuthPage/AuthPage.jsx
+++ b/src/pages/AuthPage/AuthPage.jsx
@@ -1,7 +1,9 @@
import { useState } from "react";
import { Link } from "wouter";
import "./AuthPage.css";
-import logo from '../../assets/logo.png';
+// import logo from '../../assets/logo.png';
+import { ReactComponent as LogoIcon } from '../../assets/logo.svg';
+// import backgroundImage from '../../assets/b.png';
function AuthPage() {
const [activeTab, setActiveTab] = useState("login");
@@ -157,10 +159,11 @@
return (
<div className="auth-container">
<div className="logo-container">
- <img src={logo} alt="Logo" className="site-logo" />
+ <LogoIcon className="site-logo" />
</div>
- <div className="auth-card">
+ {/* <div className="auth-card"> */}
+ <div className="glass-card">
<div className="auth-header">
<div className={`auth-tab ${activeTab === "login" ? "active" : ""}`} onClick={() => setActiveTab("login")}>
登录
diff --git a/src/pages/AuthPage/a.jpg b/src/pages/AuthPage/a.jpg
new file mode 100644
index 0000000..5c55df3
--- /dev/null
+++ b/src/pages/AuthPage/a.jpg
Binary files differ
diff --git a/src/pages/AuthPage/b.png b/src/pages/AuthPage/b.png
new file mode 100644
index 0000000..f650e96
--- /dev/null
+++ b/src/pages/AuthPage/b.png
Binary files differ
diff --git a/src/pages/Forum/posts-detail/PostDetailPage.css b/src/pages/Forum/posts-detail/PostDetailPage.css
index 570b65f..9ca9298 100644
--- a/src/pages/Forum/posts-detail/PostDetailPage.css
+++ b/src/pages/Forum/posts-detail/PostDetailPage.css
@@ -115,12 +115,12 @@
.reply-btn {
background: none;
border: none;
- color: #000000;
+ color: #2196F3;
cursor: pointer;
}
.reply-btn:hover {
- color: #000000; /* 不变色 */
+ color: #2196F3; /* 不变色 */
background: none; /* 确保没有背景色 */
text-decoration: underline; /* 你可以保留这个，或也删除 */
}
diff --git a/src/pages/Forum/posts-main/components/PostList.css b/src/pages/Forum/posts-main/components/PostList.css
index f6d6c2a..81b1132 100644
--- a/src/pages/Forum/posts-main/components/PostList.css
+++ b/src/pages/Forum/posts-main/components/PostList.css
@@ -16,6 +16,7 @@
background-color: #e9ded2;
padding: 16px;
border-radius: 8px;
+ margin-left: 1%;
/* 移除固定高度 */
/* height: 230px; */
/* 添加阴影效果增强视觉层次感 */
diff --git a/src/pages/Forum/posts-main/components/PostList.jsx b/src/pages/Forum/posts-main/components/PostList.jsx
index cf0a424..a941f49 100644
--- a/src/pages/Forum/posts-main/components/PostList.jsx
+++ b/src/pages/Forum/posts-main/components/PostList.jsx
@@ -214,11 +214,11 @@
})
}
- <div className="pagination">
+ {/* <div className="pagination">
<button disabled={page === 1} onClick={() => setPage(page - 1)}>上一页</button>
<span>第 {page} 页 / 共 {totalPages} 页</span>
<button disabled={page === totalPages} onClick={() => setPage(page + 1)}>下一页</button>
- </div>
+ </div> */}
</div>
);
};
diff --git a/src/pages/Forum/promotion-part/a.jpg b/src/pages/Forum/promotion-part/a.jpg
new file mode 100644
index 0000000..f8bf405
--- /dev/null
+++ b/src/pages/Forum/promotion-part/a.jpg
Binary files differ
diff --git a/src/pages/InterestGroup/InterestGroup.jsx b/src/pages/InterestGroup/InterestGroup.jsx
index b3ae332..3842aad 100644
--- a/src/pages/InterestGroup/InterestGroup.jsx
+++ b/src/pages/InterestGroup/InterestGroup.jsx
@@ -79,7 +79,7 @@
)}
<GroupList />
- <GroupPagination />
+ {/* <GroupPagination /> */}
</div>
</div>
);
diff --git a/src/pages/NewUserGuide/NewUserGuide.jsx b/src/pages/NewUserGuide/NewUserGuide.jsx
index 7a3dad1..e677db7 100644
--- a/src/pages/NewUserGuide/NewUserGuide.jsx
+++ b/src/pages/NewUserGuide/NewUserGuide.jsx
@@ -69,7 +69,7 @@
className={activeTab === 'tasks' ? 'active' : ''}
onClick={() => setActiveTab('tasks')}
>
- 成长任务
+ 用户等级
</button>
</div>
<div className="guide-main">
diff --git a/src/pages/NewUserGuide/NewbieTasks.css b/src/pages/NewUserGuide/NewbieTasks.css
index 4d64389..cd6d4b6 100644
--- a/src/pages/NewUserGuide/NewbieTasks.css
+++ b/src/pages/NewUserGuide/NewbieTasks.css
@@ -1,4 +1,4 @@
-.newbie-tasks {
+/* .newbie-tasks {
font-size: 16px;
line-height: 1.6;
}
@@ -61,4 +61,29 @@
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
border: 1px solid #eee;
+} */
+
+.newbie-tasks-container {
+ padding: 20px;
+}
+
+.page-title {
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+.tasks-table {
+ width: 100%;
+ border-collapse: collapse;
+}
+
+.tasks-table th,
+.tasks-table td {
+ border: 1px solid #ccc;
+ padding: 10px;
+ text-align: left;
+}
+
+.tasks-table th {
+ background-color: #f4f4f4;
}
diff --git a/src/pages/NewUserGuide/NewbieTasks.jsx b/src/pages/NewUserGuide/NewbieTasks.jsx
index 5ff6a9c..5fbd5ea 100644
--- a/src/pages/NewUserGuide/NewbieTasks.jsx
+++ b/src/pages/NewUserGuide/NewbieTasks.jsx
@@ -1,154 +1,208 @@
+// // export default NewbieTasks;
+// import React, { useEffect, useState } from 'react';
+// import axios from 'axios';
+
+// const NewbieTasks = () => {
+// const [tasks, setTasks] = useState([]);
+// const [experience, setExperience] = useState({});
+// const [currentStep, setCurrentStep] = useState({});
+// const [loading, setLoading] = useState(true);
+
+// const baseURL = '/echo/task/tutorial';
+// const userId = 1;
+
+// const fetchTasks = async () => {
+// try {
+// const response = await axios.get(`${baseURL}/getAllTasks`, {
+// params: { user_id: userId },
+// });
+// setTasks(response.data.tasks || []);
+// } catch (error) {
+// console.error('获取任务失败:', error);
+// }
+// };
+
+// const fetchExperience = async () => {
+// try {
+// const response = await axios.get(`${baseURL}/getAllTasks`, {
+// params: { user_id: userId },
+// });
+// setExperience(response.data || {});
+// } catch (error) {
+// console.error('获取经验失败:', error);
+// }
+// };
+
+// const fetchCurrentStep = async () => {
+// try {
+// const response = await axios.get(`${baseURL}/getNewStep`, {
+// params: { user_id: userId },
+// });
+// setCurrentStep(response.data || {});
+// } catch (error) {
+// console.error('获取引导步骤失败:', error);
+// }
+// };
+
+// const updateStatus = async (taskId) => {
+// try {
+// await axios.post(`${baseURL}/updateStatus`, {
+// user_id: userId,
+// task_id: taskId,
+// });
+// await fetchTasks();
+// await fetchExperience();
+// } catch (error) {
+// console.error('更新状态失败:', error);
+// }
+// };
+
+// const updateProgress = async (taskId, progress) => {
+// try {
+// await axios.post(`${baseURL}/updateProgress`, {
+// user_id: userId,
+// task_id: taskId,
+// progress,
+// });
+// await fetchTasks();
+// } catch (error) {
+// console.error('更新进度失败:', error);
+// }
+// };
+
+// const claimReward = async (taskId) => {
+// try {
+// await axios.post(`${baseURL}/rewardClaim`, {
+// user_id: userId,
+// task_id: taskId,
+// });
+// await fetchTasks();
+// await fetchExperience();
+// } catch (error) {
+// console.error('领取奖励失败:', error);
+// }
+// };
+
+// const checkRewardStatus = async (taskId) => {
+// try {
+// const response = await axios.post(`${baseURL}/rewardReview`, {
+// user_id: userId,
+// task_id: taskId,
+// });
+// alert(response.data.message || '已完成');
+// } catch (error) {
+// console.error('查看失败:', error);
+// }
+// };
+
+// useEffect(() => {
+// const init = async () => {
+// await fetchTasks();
+// await fetchExperience();
+// await fetchCurrentStep();
+// setLoading(false);
+// };
+// init();
+// }, []);
+
+// if (loading) return <p className="loading">加载中...</p>;
+
+// return (
+// <div className="common-card right-content">
+// <div className="profile-header">
+// <h1>🎯 用户等级</h1>
+// </div>
+
+// <div className="profile-details">
+// <p><strong>当前经验：</strong>{experience.current_experience}</p>
+// <p><strong>等级：</strong>{experience.level}</p>
+// <p><strong>奖励经验：</strong>{experience.reward?.experience || 0}</p>
+// <p><strong>奖励积分：</strong>{experience.reward?.points || 0}</p>
+// </div>
+
+// <div className="profile-details">
+// <p><strong>🧭 当前引导步骤：</strong>{currentStep.current_step}</p>
+// <p>{currentStep.step_description}</p>
+// </div>
+
+// <div className="profile-details">
+// <h2>任务列表</h2>
+// <ul>
+// {tasks.map(task => (
+// <li key={task.task_id} style={{ marginBottom: '20px', borderBottom: '1px solid #eee', paddingBottom: '10px' }}>
+// <p><strong>任务：</strong>{task.title}</p>
+// <p><strong>描述：</strong>{task.description}</p>
+// <p><strong>进度：</strong>{task.progress}%</p>
+// <p><strong>状态：</strong>{task.status}</p>
+// <p><strong>奖励：</strong>经验 {task.reward.experience}，积分 {task.reward.points}</p>
+
+// <div className="task-btn-group">
+// <button className="task-btn" onClick={() => updateStatus(task.task_id)}>更新状态</button>
+// <button className="task-btn" onClick={() => updateProgress(task.task_id, 100)}>提交进度</button>
+// <button className="task-btn" onClick={() => claimReward(task.task_id)}>领取奖励</button>
+// <button className="task-btn" onClick={() => checkRewardStatus(task.task_id)}>查看奖励状态</button>
+// </div>
+// </li>
+// ))}
+// </ul>
+// </div>
+// </div>
+// );
+// };
+
// export default NewbieTasks;
-import React, { useEffect, useState } from 'react';
-import axios from 'axios';
+
+
+import React from'react';
+import './NewbieTasks.css';
const NewbieTasks = () => {
- const [tasks, setTasks] = useState([]);
- const [experience, setExperience] = useState({});
- const [currentStep, setCurrentStep] = useState({});
- const [loading, setLoading] = useState(true);
-
- const baseURL = '/echo/task/tutorial';
- const userId = 1;
-
- const fetchTasks = async () => {
- try {
- const response = await axios.get(`${baseURL}/getAllTasks`, {
- params: { user_id: userId },
- });
- setTasks(response.data.tasks || []);
- } catch (error) {
- console.error('获取任务失败:', error);
- }
- };
-
- const fetchExperience = async () => {
- try {
- const response = await axios.get(`${baseURL}/getAllTasks`, {
- params: { user_id: userId },
- });
- setExperience(response.data || {});
- } catch (error) {
- console.error('获取经验失败:', error);
- }
- };
-
- const fetchCurrentStep = async () => {
- try {
- const response = await axios.get(`${baseURL}/getNewStep`, {
- params: { user_id: userId },
- });
- setCurrentStep(response.data || {});
- } catch (error) {
- console.error('获取引导步骤失败:', error);
- }
- };
-
- const updateStatus = async (taskId) => {
- try {
- await axios.post(`${baseURL}/updateStatus`, {
- user_id: userId,
- task_id: taskId,
- });
- await fetchTasks();
- await fetchExperience();
- } catch (error) {
- console.error('更新状态失败:', error);
- }
- };
-
- const updateProgress = async (taskId, progress) => {
- try {
- await axios.post(`${baseURL}/updateProgress`, {
- user_id: userId,
- task_id: taskId,
- progress,
- });
- await fetchTasks();
- } catch (error) {
- console.error('更新进度失败:', error);
- }
- };
-
- const claimReward = async (taskId) => {
- try {
- await axios.post(`${baseURL}/rewardClaim`, {
- user_id: userId,
- task_id: taskId,
- });
- await fetchTasks();
- await fetchExperience();
- } catch (error) {
- console.error('领取奖励失败:', error);
- }
- };
-
- const checkRewardStatus = async (taskId) => {
- try {
- const response = await axios.post(`${baseURL}/rewardReview`, {
- user_id: userId,
- task_id: taskId,
- });
- alert(response.data.message || '已完成');
- } catch (error) {
- console.error('查看失败:', error);
- }
- };
-
- useEffect(() => {
- const init = async () => {
- await fetchTasks();
- await fetchExperience();
- await fetchCurrentStep();
- setLoading(false);
- };
- init();
- }, []);
-
- if (loading) return <p className="loading">加载中...</p>;
-
- return (
- <div className="common-card right-content">
- <div className="profile-header">
- <h1>🎯 成长任务</h1>
- </div>
-
- <div className="profile-details">
- <p><strong>当前经验：</strong>{experience.current_experience}</p>
- <p><strong>等级：</strong>{experience.level}</p>
- <p><strong>奖励经验：</strong>{experience.reward?.experience || 0}</p>
- <p><strong>奖励积分：</strong>{experience.reward?.points || 0}</p>
- </div>
-
- <div className="profile-details">
- <p><strong>🧭 当前引导步骤：</strong>{currentStep.current_step}</p>
- <p>{currentStep.step_description}</p>
- </div>
-
- <div className="profile-details">
- <h2>任务列表</h2>
- <ul>
- {tasks.map(task => (
- <li key={task.task_id} style={{ marginBottom: '20px', borderBottom: '1px solid #eee', paddingBottom: '10px' }}>
- <p><strong>任务：</strong>{task.title}</p>
- <p><strong>描述：</strong>{task.description}</p>
- <p><strong>进度：</strong>{task.progress}%</p>
- <p><strong>状态：</strong>{task.status}</p>
- <p><strong>奖励：</strong>经验 {task.reward.experience}，积分 {task.reward.points}</p>
-
- <div className="task-btn-group">
- <button className="task-btn" onClick={() => updateStatus(task.task_id)}>更新状态</button>
- <button className="task-btn" onClick={() => updateProgress(task.task_id, 100)}>提交进度</button>
- <button className="task-btn" onClick={() => claimReward(task.task_id)}>领取奖励</button>
- <button className="task-btn" onClick={() => checkRewardStatus(task.task_id)}>查看奖励状态</button>
- </div>
- </li>
- ))}
- </ul>
- </div>
- </div>
- );
+ const tableData = [
+ {
+ level: 'lv0【糖果】',
+ newPermissions: '查看种子分类和评论，查看其他用户主页',
+ upgradeConditions: '无'
+ },
+ {
+ level: 'lv1【曲奇】',
+ newPermissions: '上传免费种子，下载免费种子，发布评论，私信/关注其他用户，收藏种子',
+ upgradeConditions: '经验≥50，分享率≥0.5，上传量≥10G，做种时长≥72h'
+ },
+ {
+ level: 'lv2【巧克力】',
+ newPermissions: '下载付费种子，成立和加入兴趣小组',
+ upgradeConditions: '经验≥200，分享率≥0.75，上传量≥50G，做种时长≥240h'
+ },
+ {
+ level: 'lv3【冰激凌】',
+ newPermissions: '上传付费种子',
+ upgradeConditions: '经验≥500，分享率≥1，上传量≥100G，做种时长≥600h'
+ }
+ ];
+ return (
+ <div className="newbie-tasks-container">
+ <h2 className="page-title">🎯 用户等级</h2>
+ <p>各个等级的权限在下面啦~ 经验值可以通过上传种子获得哦！</p>
+ <table className="tasks-table">
+ <thead>
+ <tr>
+ <th>用户等级</th>
+ <th>新增权限</th>
+ <th>升级条件</th>
+ </tr>
+ </thead>
+ <tbody>
+ {tableData.map((item, index) => (
+ <tr key={index}>
+ <td>{item.level}</td>
+ <td>{item.newPermissions}</td>
+ <td>{item.upgradeConditions}</td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ );
};
export default NewbieTasks;
-
diff --git a/src/pages/UserCenter/UserLevelExperience.jsx b/src/pages/UserCenter/UserLevelExperience.jsx
index 81135c1..4269c44 100644
--- a/src/pages/UserCenter/UserLevelExperience.jsx
+++ b/src/pages/UserCenter/UserLevelExperience.jsx
@@ -1,213 +1,213 @@
-// import React, { useState, useEffect } from 'react';
-// import axios from 'axios';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
-// const UserLevelExperience = ({ userId }) => {
-// const [experienceInfo, setExperienceInfo] = useState(null);
-// const [error, setError] = useState(null);
-// const [isLoading, setIsLoading] = useState(false);
-// const [upgradeResult, setUpgradeResult] = useState(null);
-// const [hasCheckedIn, setHasCheckedIn] = useState(false);
-// const [isUpgrading, setIsUpgrading] = useState(false);
-// const [lastUpgradeTime, setLastUpgradeTime] = useState(null);
-// const [justUpgraded, setJustUpgraded] = useState(false); // 新增
+const UserLevelExperience = ({ userId }) => {
+ const [experienceInfo, setExperienceInfo] = useState(null);
+ const [error, setError] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+ const [upgradeResult, setUpgradeResult] = useState(null);
+ const [hasCheckedIn, setHasCheckedIn] = useState(false);
+ const [isUpgrading, setIsUpgrading] = useState(false);
+ const [lastUpgradeTime, setLastUpgradeTime] = useState(null);
+ const [justUpgraded, setJustUpgraded] = useState(false); // 新增
-// useEffect(() => {
-// if (!userId) return;
-// fetchAllLevelData();
-// }, [userId]);
+ useEffect(() => {
+ if (!userId) return;
+ fetchAllLevelData();
+ }, [userId]);
-// useEffect(() => {
-// if (
-// experienceInfo &&
-// experienceInfo.current_experience >= experienceInfo.next_level_experience &&
-// !isUpgrading &&
-// !justUpgraded &&
-// (!lastUpgradeTime || Date.now() - lastUpgradeTime > 2000)
-// ) {
-// checkUpgrade();
-// }
-// }, [experienceInfo, isUpgrading, lastUpgradeTime, justUpgraded]);
+ useEffect(() => {
+ if (
+ experienceInfo &&
+ experienceInfo.current_experience >= experienceInfo.next_level_experience &&
+ !isUpgrading &&
+ !justUpgraded &&
+ (!lastUpgradeTime || Date.now() - lastUpgradeTime > 2000)
+ ) {
+ }
+ }, [experienceInfo, isUpgrading, lastUpgradeTime, justUpgraded]);
-// const fetchAllLevelData = async () => {
-// try {
-// setIsLoading(true);
-// setError(null);
+ const fetchAllLevelData = async () => {
+ try {
+ setIsLoading(true);
+ setError(null);
-// const { data } = await axios.get('/echo/level/getExperience', {
-// params: { user_id: userId },
-// });
+ const { data } = await axios.get('/echo/level/getExperience', {
+ params: { user_id: userId },
+ });
-// const normalizedData = {
-// ...data,
-// current_level: data.current_level || data.level,
-// };
+ const normalizedData = {
+ ...data,
+ current_level: data.current_level || data.level,
+ };
-// setExperienceInfo(normalizedData);
+ setExperienceInfo(normalizedData);
-// const today = new Date().toDateString();
-// const lastCheckIn = localStorage.getItem('lastCheckIn');
-// setHasCheckedIn(lastCheckIn === today);
-// } catch (err) {
-// console.error('经验信息获取失败:', err);
-// setError('获取经验信息失败');
-// } finally {
-// setIsLoading(false);
-// }
-// };
+ const today = new Date().toDateString();
+ const lastCheckIn = localStorage.getItem('lastCheckIn');
+ setHasCheckedIn(lastCheckIn === today);
+ } catch (err) {
+ console.error('经验信息获取失败:', err);
+ setError('获取经验信息失败');
+ } finally {
+ setIsLoading(false);
+ }
+ };
-// const updateExperience = async (source, amount = 10) => {
-// try {
-// setIsLoading(true);
-// setError(null);
+ const updateExperience = async (source, amount = 10) => {
+ try {
+ setIsLoading(true);
+ setError(null);
-// const { data } = await axios.post('/echo/level/updateExperience', {
-// user_id: userId,
-// experience: amount,
-// source: source,
-// });
+ const { data } = await axios.post('/echo/level/updateExperience', {
+ user_id: userId,
+ experience: amount,
+ source: source,
+ });
-// setExperienceInfo((prev) => ({
-// ...prev,
-// current_experience: data.current_experience,
-// }));
+ setExperienceInfo((prev) => ({
+ ...prev,
+ current_experience: data.current_experience,
+ }));
-// alert(`获得${amount}点经验值！来源：${source}`);
+ alert(`获得${amount}点经验值！来源：${source}`);
-// if (source === 'check-in') {
-// localStorage.setItem('lastCheckIn', new Date().toDateString());
-// setHasCheckedIn(true);
-// }
-// } catch (err) {
-// console.error('更新经验失败:', err);
-// setError(err.response?.data?.message || '更新经验失败');
-// } finally {
-// setIsLoading(false);
-// }
-// };
+ if (source === 'check-in') {
+ localStorage.setItem('lastCheckIn', new Date().toDateString());
+ setHasCheckedIn(true);
+ }
+ } catch (err) {
+ console.error('更新经验失败:', err);
+ setError(err.response?.data?.message || '更新经验失败');
+ } finally {
+ setIsLoading(false);
+ }
+ };
-// const checkUpgrade = async () => {
-// if (isUpgrading) return;
+ const checkUpgrade = async () => {
+ if (isUpgrading) return;
-// try {
-// setIsLoading(true);
-// setIsUpgrading(true);
-// setError(null);
+ try {
+ setIsLoading(true);
+ setIsUpgrading(true);
+ setError(null);
-// const { data } = await axios.get('/echo/level/upgrade-check', {
-// params: { user_id: userId },
-// });
+ const { data } = await axios.get('/echo/level/upgrade-check', {
+ params: { user_id: userId },
+ });
-// if (data.can_upgrade) {
-// if (window.confirm('您已满足升级条件，是否要升级？')) {
-// await performUpgrade();
-// }
-// } else {
-// if (data.is_max_level) {
-// alert('您已达到最高等级！');
-// } else {
-// alert(`还不能升级，还需要${data.next_level_experience - data.current_experience}点经验值`);
-// }
-// }
-// } catch (err) {
-// console.error('检查升级失败:', err);
-// setError(err.response?.data?.message || '检查升级失败');
-// } finally {
-// setIsLoading(false);
-// setIsUpgrading(false);
-// }
-// };
+ if (data.can_upgrade) {
+ if (window.confirm('您已满足升级条件，是否要升级？')) {
+ await performUpgrade();
+ }
+ } else {
+ if (data.is_max_level) {
+ alert('您已达到最高等级！');
+ } else {
+ alert(`还不能升级，还需要${data.next_level_experience - data.current_experience}点经验值`);
+ }
+ }
+ } catch (err) {
+ console.error('检查升级失败:', err);
+ setError(err.response?.data?.message || '检查升级失败');
+ } finally {
+ setIsLoading(false);
+ setIsUpgrading(false);
+ }
+ };
-// const performUpgrade = async () => {
-// try {
-// setIsUpgrading(true);
-// setIsLoading(true);
-// setError(null);
+ const performUpgrade = async () => {
+ try {
+ setIsUpgrading(true);
+ setIsLoading(true);
+ setError(null);
-// const { data } = await axios.post('/echo/level/upgrades', {
-// user_id: userId,
-// can_upgrade: true,
-// });
+ const { data } = await axios.post('/echo/level/upgrades', {
+ user_id: userId,
+ can_upgrade: true,
+ });
-// console.log('升级响应数据:', data);
+ console.log('升级响应数据:', data);
-// if (data.status === 'success') {
-// setExperienceInfo((prev) => ({
-// ...prev,
-// current_level: data.new_level,
-// current_experience: data.current_experience || 0,
-// next_level_experience: data.next_level_experience || prev.next_level_experience * 2,
-// }));
+ if (data.status === 'success') {
+ setExperienceInfo((prev) => ({
+ // 更新就会进入useEffect,又执行了checkUpgrade,循环
+ ...prev,
+ current_level: data.new_level,
+ current_experience: data.current_experience || 0,
+ next_level_experience: data.next_level_experience || prev.next_level_experience * 2,
+ }));
-// setUpgradeResult(data);
-// setLastUpgradeTime(Date.now());
-// setJustUpgraded(true); // 标记为刚升级过
-// setTimeout(() => setJustUpgraded(false), 3000); // 3 秒冷却期
-// alert(`恭喜！您已升级到等级 ${data.new_level}！`);
+ setUpgradeResult(data);
+ setLastUpgradeTime(Date.now());
+ setJustUpgraded(true); // 标记为刚升级过
+ setTimeout(() => setJustUpgraded(false), 3000); // 3 秒冷却期
+ alert(`恭喜！您已升级到等级 ${data.new_level}！`);
-// // 再次拉取最新经验数据，避免经验值仍然满足升级条件
-// await fetchAllLevelData();
-// } else {
-// throw new Error(data.message || '升级失败');
-// }
-// } catch (err) {
-// console.error('升级失败:', err);
-// setError(err.message || '升级失败');
-// alert(err.message || '升级失败，请稍后再试');
-// } finally {
-// setIsLoading(false);
-// setIsUpgrading(false);
-// }
-// };
+ // 再次拉取最新经验数据，避免经验值仍然满足升级条件
+ await fetchAllLevelData();
+ } else {
+ throw new Error(data.message || '升级失败');
+ }
+ } catch (err) {
+ console.error('升级失败:', err);
+ setError(err.message || '升级失败');
+ alert(err.message || '升级失败，请稍后再试');
+ } finally {
+ setIsLoading(false);
+ setIsUpgrading(false);
+ }
+ };
-// if (error) return <p className="error">{error}</p>;
-// if (isLoading) return <p>加载中...</p>;
-// if (!experienceInfo) return <p>加载经验信息中...</p>;
+ if (error) return <p className="error">{error}</p>;
+ if (isLoading) return <p>加载中...</p>;
+ if (!experienceInfo) return <p>加载经验信息中...</p>;
-// const { current_experience, next_level_experience, current_level } = experienceInfo;
-// const progressPercent = Math.min(
-// 100,
-// (current_experience / (next_level_experience || 1)) * 100
-// ).toFixed(2);
+ const { current_experience, next_level_experience, current_level } = experienceInfo;
+ const progressPercent = Math.min(
+ 100,
+ (current_experience / (next_level_experience || 1)) * 100
+ ).toFixed(2);
-// const expToNextLevel = Math.max(0, next_level_experience - current_experience);
+ const expToNextLevel = Math.max(0, next_level_experience - current_experience);
-// return (
-// <div className="level-experience-section">
-// <h3>等级与经验</h3>
-// <p><strong>当前等级：</strong>{current_level || '未知'}</p>
-// <p><strong>当前经验：</strong>{current_experience}</p>
-// <p><strong>距离下一等级还需：</strong>{expToNextLevel} 经验值</p>
+ return (
+ <div style={{ padding: '20px', marginTop: '-80px', marginLeft: '70px' }}>
+ {/* <h3>等级与经验</h3> */}
+ <div style={{ fontSize: '20px', marginBottom: '10px' }}><strong>当前等级：</strong>lv{current_level || '未知'}</div>
+ <div style={{ fontSize: '20px', marginBottom: '10px' }}><strong>当前经验：</strong>{current_experience}</div>
+ {/* <p><strong>距离下一等级还需：</strong>{expToNextLevel} 经验值</p> */}
-// <div className="exp-bar-wrapper">
-// <div className="exp-bar" style={{ width: `${progressPercent}%` }} />
-// </div>
-// <p className="exp-progress-text">{progressPercent}%</p>
+ <div className="exp-bar-wrapper">
+ <div className="exp-bar" style={{ width: `${progressPercent}%` }} />
+ </div>
+ <p className="exp-progress-text">{progressPercent}%</p>
-// {upgradeResult && (
-// <div className="upgrade-success">
-// <p>恭喜！您已成功升级到等级 {upgradeResult.new_level}！</p>
-// </div>
-// )}
+ {upgradeResult && (
+ <div className="upgrade-success">
+ <p>恭喜！您已成功升级到等级 {upgradeResult.new_level}！</p>
+ </div>
+ )}
-// {error && (
-// <div className="upgrade-error">
-// <p>{error}</p>
-// </div>
-// )}
+ {error && (
+ <div className="upgrade-error">
+ <p>{error}</p>
+ </div>
+ )}
-// <div className="level-actions">
-// <button onClick={() => updateExperience('check-in', 15)} disabled={hasCheckedIn}>
-// {hasCheckedIn ? '今日已签到' : '每日签到 (+15经验)'}
-// </button>
-// <button onClick={() => updateExperience('task', 30)}>完成任务 (+30经验)</button>
-// <button onClick={() => updateExperience('upload', 50)}>上传种子 (+50经验)</button>
-// <button onClick={checkUpgrade} disabled={isUpgrading}>
-// {isUpgrading ? '升级中...' : '检查升级'}
-// </button>
-// </div>
-// </div>
-// );
-// };
+ <div className="level-actions">
+ {/* <button onClick={() => updateExperience('check-in', 15)} disabled={hasCheckedIn}>
+ {hasCheckedIn ? '今日已签到' : '每日签到 (+15经验)'}
+ </button> */}
+ {/* <button onClick={() => updateExperience('task', 30)}>完成任务 (+30经验)</button> */}
+ {/* <button onClick={() => updateExperience('upload', 50)}>上传种子 (+20经验)</button> */}
+ {/* <button onClick={checkUpgrade} disabled={isUpgrading}>
+ {isUpgrading ? '升级中...' : '检查升级'}
+ </button> */}
+ </div>
+ </div>
+ );
+};
-// export default UserLevelExperience;
+export default UserLevelExperience;
diff --git a/src/pages/UserCenter/UserProfile.jsx b/src/pages/UserCenter/UserProfile.jsx
index 79d8313..5c088c9 100644
--- a/src/pages/UserCenter/UserProfile.jsx
+++ b/src/pages/UserCenter/UserProfile.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import UserProfileBase from './UserProfileBase';
-// import UserLevelExperience from './UserLevelExperience';
+import UserLevelExperience from './UserLevelExperience';
import './UserProfile.css';
import UserStatusChecker from './UserStatusChecker';
@@ -14,7 +14,7 @@
return (
<div>
<UserProfileBase onLoadExperienceInfo={loadExperienceInfo} />
- {/* {userId && <UserLevelExperience userId={userId} />} */}
+ {userId && <UserLevelExperience userId={userId} />}
{/* <UserStatusChecker /> */}
</div>
);
diff --git a/src/pages/UserCenter/UserProfileBase.jsx b/src/pages/UserCenter/UserProfileBase.jsx
index c90cb63..dd28dc2 100644
--- a/src/pages/UserCenter/UserProfileBase.jsx
+++ b/src/pages/UserCenter/UserProfileBase.jsx
@@ -5,6 +5,8 @@
import toast from 'react-hot-toast';
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css';
+import UserLevelExperience from './UserLevelExperience';
+
const DEFAULT_AVATAR_URL = `${process.env.PUBLIC_URL}/default-avatar.png`;
@@ -203,6 +205,7 @@
<p><strong>分享率：</strong>{(shareRate * 100).toFixed(2)}%</p>
<p><strong>加入时间：</strong>{new Date(joinedDate).toLocaleDateString()}</p>
+
<div className="profile-actions">
<button onClick={() => setShowPwdModal(true)}>修改密码</button>
<button onClick={handleLogout}>退出登录</button>
