front/src/AdminPage.js - G10-PT-TRM - Gitiles

 import React, { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "./config";

 // 示例数据
 const initialConfig = {
     FarmNumber: 3,
     FakeTime: 3,
     BegVote: 3,
     CheatTime: 5,
 };

 export default function AdminPage() {
     const navigate = useNavigate();
     const [config, setConfig] = useState(initialConfig);
     // state for users fetched from backend
     const [cheatUsers, setCheatUsers] = useState([]);
     const [suspiciousUsers, setSuspiciousUsers] = useState([]);

     // helper to get admin userId from cookie
     const getUserIdFromCookie = () => {
         const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
         return match ? match[2] : null;
     };

     // fetch cheat users list from backend
     const fetchCheatUsers = async () => {
         const adminId = getUserIdFromCookie();
         if (!adminId) return;
         try {
             const res = await fetch(`${API_BASE_URL}/api/admin/cheat-users?userid=${adminId}`);
             if (!res.ok) throw new Error('获取作弊用户失败');
             const data = await res.json();
             setCheatUsers(data);
         } catch (err) {
             console.error(err);
         }
     };

     // fetch suspicious users list from backend
     const fetchSuspiciousUsers = async () => {
         const adminId = getUserIdFromCookie();
         if (!adminId) return;
         try {
             const res = await fetch(`${API_BASE_URL}/api/admin/suspicious-users?userid=${adminId}`);
             if (!res.ok) throw new Error('获取可疑用户失败');
             const data = await res.json();
             setSuspiciousUsers(data);
         } catch (err) {
             console.error(err);
         }
     };

     const handleConfigChange = (e) => {
         const { name, value } = e.target;
         setConfig({ ...config, [name]: value });
     };

     const handleBan = (user) => {
         const adminId = getUserIdFromCookie();
         if (!adminId) {
             alert('无法获取用户ID');
             return;
         }
         fetch(`${API_BASE_URL}/api/admin/ban-user`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ userid: user.userid }),
         })
             .then((res) => { if (!res.ok) throw new Error('Network response was not ok'); return res.json(); })
             .then(() => {
                 // 重新获取用户列表，触发页面重新渲染
                 fetchSuspiciousUsers();
                 fetchCheatUsers();
             })
             .catch((err) => console.error('封禁用户失败:', err));
     }

     // 解封作弊用户
     const handleUnban = (user) => {
         const adminId = getUserIdFromCookie();
         if (!adminId) {
             alert('无法获取用户ID');
             return;
         }
         fetch(`${API_BASE_URL}/api/admin/unban-user`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ userid: user.userid }),
         })
             .then((res) => { if (!res.ok) throw new Error('Network response was not ok'); return res.json(); })
             .then(() => {
                 // 重新获取用户列表，触发页面重新渲染
                 fetchCheatUsers();
                 fetchSuspiciousUsers();
             })
             .catch((err) => console.error('解封用户失败:', err));
     };

     // 保存系统参数到后端
     const handleSave = () => {
         const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
         const userId = match ? match[2] : null;
         if (!userId) {
             alert('无法获取用户ID');
             return;
         }
         fetch(`${API_BASE_URL}/api/save-config`, {
             method: 'POST',
             // credentials: 'include',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ userid: userId, ...config }),
         })
             .then((res) => {
                 if (!res.ok) throw new Error('Network response was not ok');
                 return res.json();
             })
             .then(() => alert('系统参数已保存'))
             .catch((err) => console.error('保存系统参数失败:', err));
     };

     // 初始化时向后端请求系统参数及用户列表
     useEffect(() => {
         const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
         const userId = match ? match[2] : null;
         // console.log("User ID from cookie:", userId);
         if (userId) {
             // fetch config
             fetch(`${API_BASE_URL}/api/admin/config?userid=${userId}`)
                 .then((res) => {
                     if (!res.ok) throw new Error('Network response was not ok');
                     return res.json();
                 })
                 .then((data) => {
                     // console.log("Fetched system config:", data);
                     setConfig(data);
                 })
                 .catch((err) => console.error('获取系统参数失败:', err));

             // 初始获取用户列表
             fetchCheatUsers();
             fetchSuspiciousUsers();
         }
     }, []);

     return (
         <div style={{ padding: 40, maxWidth: 900, margin: "0 auto" }}>
             <h1 style={{ textAlign: "center", marginBottom: 32 }}>管理员页面</h1>
             {/* 参数设置 */}
             <div style={{ marginBottom: 32, padding: 18, background: "#f7faff", borderRadius: 12, display: "flex", gap: 24, alignItems: "center", justifyContent: "space-between" }}>
                 <b>系统参数：</b>
                 <label>
                     FarmNumber:
                     <input type="number" name="FarmNumber" value={config.FarmNumber} onChange={handleConfigChange} disabled style={{ width: 60, margin: "0 12px" }} />
                 </label>
                 <label>
                     FakeTime:
                     <input type="number" name="FakeTime" value={config.FakeTime} onChange={handleConfigChange} disabled style={{ width: 60, margin: "0 12px" }} />
                 </label>
                 <label>
                     BegVote:
                     <input type="number" name="BegVote" value={config.BegVote} onChange={handleConfigChange} disabled style={{ width: 60, margin: "0 12px" }} />
                 </label>
                 <label>
                     CheatTime:
                     <input type="number" name="CheatTime" value={config.CheatTime} onChange={handleConfigChange} disabled style={{ width: 60, margin: "0 12px" }} />
                 </label>
                 {/* <button
                     onClick={handleSave}
                     style={{
                         background: '#1976d2',
                         color: '#fff',
                         border: 'none',
                         borderRadius: 6,
                         padding: '6px 18px',
                         cursor: 'pointer',
                         writingMode: 'horizontal-tb',
                         whiteSpace: 'nowrap'
                     }}
                 >
                     保存
                 </button> */}
             </div>
             {/* 作弊用户 */}
             <div style={{ marginBottom: 32 }}>
                 <h2 style={{ color: "#e53935" }}>作弊用户</h2>
                 <table style={{ width: "100%", background: "#fff", borderRadius: 10, boxShadow: "0 2px 8px #e0e7ff", marginBottom: 18 }}>
                     <thead>
                         <tr style={{ background: "#f5f5f5" }}>
                             {/* <th>user_id</th> */}
                             <th>email</th>
                             <th>username</th>
                             <th>account_status</th>
                             <th>操作</th>
                         </tr>
                     </thead>
                     <tbody>
                         {cheatUsers.map((u) => (
                             <tr key={u.userid}>
                                 {/* <td>{u.userid}</td> */}
                                 <td>{u.email}</td>
                                 <td>{u.username}</td>
                                 <td style={{ color: "#e53935" }}>
                                     {"封禁" }
                                 </td>
                                 <td>
                                     <button
                                         style={{ background: "#13F31E", color: "#fff", border: "none", borderRadius: 6, padding: "4px 14px", cursor: "pointer" }}
                                         onClick={() => handleUnban(u)}
                                     >
                                         解封
                                     </button>
                                 </td>
                             </tr>
                         ))}
                     </tbody>
                 </table>
             </div>
             {/* 可疑用户 */}
             <div style={{ marginBottom: 32 }}>
                 <h2 style={{ color: "#ff9800" }}>可疑用户</h2>
                 <table style={{ width: "100%", background: "#fff", borderRadius: 10, boxShadow: "0 2px 8px #e0e7ff" }}>
                     <thead>
                         <tr style={{ background: "#f5f5f5" }}>
                             {/* <th>user_id</th> */}
                             <th>email</th>
                             <th>username</th>
                             <th>account_status</th>
                             <th>操作</th>
                         </tr>
                     </thead>
                     <tbody>
                         {suspiciousUsers.map((u) => (
                             <tr key={u.user_id}>
                                 {/* <td>{u.user_id}</td> */}
                                 <td>{u.email}</td>
                                 <td>{u.username}</td>
                                 <td style={{ color: u.account_status === 1 ? "#e53935" : "#43a047" }}>
                                     {u.account_status === 1 ? "封禁" : "正常"}
                                 </td>
                                 <td>
                                     <button
                                         style={{ background: "#e53935", color: "#fff", border: "none", borderRadius: 6, padding: "4px 14px", cursor: "pointer" }}
                                         onClick={() => handleBan(u)}
                                     >
                                         封禁
                                     </button>
                                 </td>
                             </tr>
                         ))}
                     </tbody>
                 </table>
             </div>
             {/* 跳转按钮 */}
             <div style={{ display: "flex", gap: 24, justifyContent: "center" }}>
                 <button
                     style={{ background: "#1976d2", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
                     onClick={() => navigate("/appeal-review")}
                 >
                     用户申诉
                 </button>
                 <button
                     style={{ background: "#43a047", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
                     onClick={() => navigate("/migration-review")}
                 >
                     用户迁移
                 </button>
             </div>
         </div>
     );
 }
	import React, { useState, useEffect } from "react";
	import { useNavigate } from "react-router-dom";
	import { API_BASE_URL } from "./config";

	// 示例数据
	const initialConfig = {
	FarmNumber: 3,
	FakeTime: 3,
	BegVote: 3,
	CheatTime: 5,
	};

	export default function AdminPage() {
	const navigate = useNavigate();
	const [config, setConfig] = useState(initialConfig);
	// state for users fetched from backend
	const [cheatUsers, setCheatUsers] = useState([]);
	const [suspiciousUsers, setSuspiciousUsers] = useState([]);

	// helper to get admin userId from cookie
	const getUserIdFromCookie = () => {
	const match = document.cookie.match('(^\|;)\\s*userId=([^;]+)');
	return match ? match[2] : null;
	};

	// fetch cheat users list from backend
	const fetchCheatUsers = async () => {
	const adminId = getUserIdFromCookie();
	if (!adminId) return;
	try {
	const res = await fetch(`${API_BASE_URL}/api/admin/cheat-users?userid=${adminId}`);
	if (!res.ok) throw new Error('获取作弊用户失败');
	const data = await res.json();
	setCheatUsers(data);
	} catch (err) {
	console.error(err);
	}
	};

	// fetch suspicious users list from backend
	const fetchSuspiciousUsers = async () => {
	const adminId = getUserIdFromCookie();
	if (!adminId) return;
	try {
	const res = await fetch(`${API_BASE_URL}/api/admin/suspicious-users?userid=${adminId}`);
	if (!res.ok) throw new Error('获取可疑用户失败');
	const data = await res.json();
	setSuspiciousUsers(data);
	} catch (err) {
	console.error(err);
	}
	};

	const handleConfigChange = (e) => {
	const { name, value } = e.target;
	setConfig({ ...config, [name]: value });
	};

	const handleBan = (user) => {
	const adminId = getUserIdFromCookie();
	if (!adminId) {
	alert('无法获取用户ID');
	return;
	}
	fetch(`${API_BASE_URL}/api/admin/ban-user`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ userid: user.userid }),
	})
	.then((res) => { if (!res.ok) throw new Error('Network response was not ok'); return res.json(); })
	.then(() => {
	// 重新获取用户列表，触发页面重新渲染
	fetchSuspiciousUsers();
	fetchCheatUsers();
	})
	.catch((err) => console.error('封禁用户失败:', err));
	}

	// 解封作弊用户
	const handleUnban = (user) => {
	const adminId = getUserIdFromCookie();
	if (!adminId) {
	alert('无法获取用户ID');
	return;
	}
	fetch(`${API_BASE_URL}/api/admin/unban-user`, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ userid: user.userid }),
	})
	.then((res) => { if (!res.ok) throw new Error('Network response was not ok'); return res.json(); })
	.then(() => {
	// 重新获取用户列表，触发页面重新渲染
	fetchCheatUsers();
	fetchSuspiciousUsers();
	})
	.catch((err) => console.error('解封用户失败:', err));
	};

	// 保存系统参数到后端
	const handleSave = () => {
	const match = document.cookie.match('(^\|;)\\s*userId=([^;]+)');
	const userId = match ? match[2] : null;
	if (!userId) {
	alert('无法获取用户ID');
	return;
	}
	fetch(`${API_BASE_URL}/api/save-config`, {
	method: 'POST',
	// credentials: 'include',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ userid: userId, ...config }),
	})
	.then((res) => {
	if (!res.ok) throw new Error('Network response was not ok');
	return res.json();
	})
	.then(() => alert('系统参数已保存'))
	.catch((err) => console.error('保存系统参数失败:', err));
	};

	// 初始化时向后端请求系统参数及用户列表
	useEffect(() => {
	const match = document.cookie.match('(^\|;)\\s*userId=([^;]+)');
	const userId = match ? match[2] : null;
	// console.log("User ID from cookie:", userId);
	if (userId) {
	// fetch config
	fetch(`${API_BASE_URL}/api/admin/config?userid=${userId}`)
	.then((res) => {
	if (!res.ok) throw new Error('Network response was not ok');
	return res.json();
	})
	.then((data) => {
	// console.log("Fetched system config:", data);
	setConfig(data);
	})
	.catch((err) => console.error('获取系统参数失败:', err));

	// 初始获取用户列表
	fetchCheatUsers();
	fetchSuspiciousUsers();
	}
	}, []);

	return (
	<div style={{ padding: 40, maxWidth: 900, margin: "0 auto" }}>
	<h1 style={{ textAlign: "center", marginBottom: 32 }}>管理员页面</h1>
	{/* 参数设置 */}
	<div style={{ marginBottom: 32, padding: 18, background: "#f7faff", borderRadius: 12, display: "flex", gap: 24, alignItems: "center", justifyContent: "space-between" }}>
	<b>系统参数：</b>
	<label>
	FarmNumber:
	<input type="number" name="FarmNumber" value={config.FarmNumber} onChange={handleConfigChange} disabled style={{ width: 60, margin: "0 12px" }} />
	</label>
	<label>
	FakeTime:
	<input type="number" name="FakeTime" value={config.FakeTime} onChange={handleConfigChange} disabled style={{ width: 60, margin: "0 12px" }} />
	</label>
	<label>
	BegVote:
	<input type="number" name="BegVote" value={config.BegVote} onChange={handleConfigChange} disabled style={{ width: 60, margin: "0 12px" }} />
	</label>
	<label>
	CheatTime:
	<input type="number" name="CheatTime" value={config.CheatTime} onChange={handleConfigChange} disabled style={{ width: 60, margin: "0 12px" }} />
	</label>
	{/* <button
	onClick={handleSave}
	style={{
	background: '#1976d2',
	color: '#fff',
	border: 'none',
	borderRadius: 6,
	padding: '6px 18px',
	cursor: 'pointer',
	writingMode: 'horizontal-tb',
	whiteSpace: 'nowrap'
	}}
	>
	保存
	</button> */}
	</div>
	{/* 作弊用户 */}
	<div style={{ marginBottom: 32 }}>
	<h2 style={{ color: "#e53935" }}>作弊用户</h2>
	<table style={{ width: "100%", background: "#fff", borderRadius: 10, boxShadow: "0 2px 8px #e0e7ff", marginBottom: 18 }}>
	<thead>
	<tr style={{ background: "#f5f5f5" }}>
	{/* <th>user_id</th> */}
	<th>email</th>
	<th>username</th>
	<th>account_status</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody>
	{cheatUsers.map((u) => (
	<tr key={u.userid}>
	{/* <td>{u.userid}</td> */}
	<td>{u.email}</td>
	<td>{u.username}</td>
	<td style={{ color: "#e53935" }}>
	{"封禁" }
	</td>
	<td>
	<button
	style={{ background: "#13F31E", color: "#fff", border: "none", borderRadius: 6, padding: "4px 14px", cursor: "pointer" }}
	onClick={() => handleUnban(u)}
	>
	解封
	</button>
	</td>
	</tr>
	))}
	</tbody>
	</table>
	</div>
	{/* 可疑用户 */}
	<div style={{ marginBottom: 32 }}>
	<h2 style={{ color: "#ff9800" }}>可疑用户</h2>
	<table style={{ width: "100%", background: "#fff", borderRadius: 10, boxShadow: "0 2px 8px #e0e7ff" }}>
	<thead>
	<tr style={{ background: "#f5f5f5" }}>
	{/* <th>user_id</th> */}
	<th>email</th>
	<th>username</th>
	<th>account_status</th>
	<th>操作</th>
	</tr>
	</thead>
	<tbody>
	{suspiciousUsers.map((u) => (
	<tr key={u.user_id}>
	{/* <td>{u.user_id}</td> */}
	<td>{u.email}</td>
	<td>{u.username}</td>
	<td style={{ color: u.account_status === 1 ? "#e53935" : "#43a047" }}>
	{u.account_status === 1 ? "封禁" : "正常"}
	</td>
	<td>
	<button
	style={{ background: "#e53935", color: "#fff", border: "none", borderRadius: 6, padding: "4px 14px", cursor: "pointer" }}
	onClick={() => handleBan(u)}
	>
	封禁
	</button>
	</td>
	</tr>
	))}
	</tbody>
	</table>
	</div>
	{/* 跳转按钮 */}
	<div style={{ display: "flex", gap: 24, justifyContent: "center" }}>
	<button
	style={{ background: "#1976d2", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
	onClick={() => navigate("/appeal-review")}
	>
	用户申诉
	</button>
	<button
	style={{ background: "#43a047", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
	onClick={() => navigate("/migration-review")}
	>
	用户迁移
	</button>
	</div>
	</div>
	);
	}