final
Change-Id: Icf4ec3950a6bd1e066fa4a1976af36721af62a06
diff --git a/front/src/AdminPage.js b/front/src/AdminPage.js
index f063c09..218bc9a 100644
--- a/front/src/AdminPage.js
+++ b/front/src/AdminPage.js
@@ -1,6 +1,7 @@
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { API_BASE_URL } from "./config";
+import "./AdminPage.css";
// 示例数据
const initialConfig = {
@@ -117,106 +118,108 @@
}, []);
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>
- <span>FarmNumber: {config.FarmNumber}</span>
- <span>FakeTime: {config.FakeTime}</span>
- <span>BegVote: {config.BegVote}</span>
- <span>CheatTime: {config.CheatTime}</span>
- </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>
- <button
- style={{ background: "#ff9800", color: "#fff", border: "none", borderRadius: 8, padding: "10px 28px", fontWeight: 600, fontSize: 16, cursor: "pointer" }}
- onClick={() => navigate("/seed-promotion")}
- >
- 促销管理
- </button>
+ <div className="admin-page-container">
+ <div className="admin-main-content">
+ <h1 className="admin-title">管理员页面</h1>
+ {/* 参数设置 */}
+ <div className="admin-config-card">
+ <span className="admin-config-label">系统参数：</span>
+ <span className="admin-config-item">FarmNumber: {config.FarmNumber}</span>
+ <span className="admin-config-item">FakeTime: {config.FakeTime}</span>
+ <span className="admin-config-item">BegVote: {config.BegVote}</span>
+ <span className="admin-config-item">CheatTime: {config.CheatTime}</span>
+ </div>
+ {/* 作弊用户 */}
+ <div className="admin-section">
+ <h2 className="admin-section-title cheat">作弊用户</h2>
+ <div className="admin-table-container">
+ <table className="admin-table">
+ <thead>
+ <tr>
+ <th>邮箱</th>
+ <th>用户名</th>
+ <th>账户状态</th>
+ <th>操作</th>
+ </tr>
+ </thead>
+ <tbody>
+ {cheatUsers.map((u) => (
+ <tr key={u.userid}>
+ <td>{u.email}</td>
+ <td>{u.username}</td>
+ <td className="status-banned">
+ 封禁
+ </td>
+ <td>
+ <button
+ className="admin-btn admin-btn-unban"
+ onClick={() => handleUnban(u)}
+ >
+ 解封
+ </button>
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ {/* 可疑用户 */}
+ <div className="admin-section">
+ <h2 className="admin-section-title suspicious">可疑用户</h2>
+ <div className="admin-table-container">
+ <table className="admin-table">
+ <thead>
+ <tr>
+ <th>邮箱</th>
+ <th>用户名</th>
+ <th>账户状态</th>
+ <th>操作</th>
+ </tr>
+ </thead>
+ <tbody>
+ {suspiciousUsers.map((u) => (
+ <tr key={u.user_id}>
+ <td>{u.email}</td>
+ <td>{u.username}</td>
+ <td className={u.account_status === 1 ? "status-banned" : "status-normal"}>
+ {u.account_status === 1 ? "封禁" : "正常"}
+ </td>
+ <td>
+ <button
+ className="admin-btn admin-btn-ban"
+ onClick={() => handleBan(u)}
+ >
+ 封禁
+ </button>
+ </td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ </div>
+ {/* 跳转按钮 */}
+ <div className="admin-nav-buttons">
+ <button
+ className="admin-nav-btn appeal"
+ onClick={() => navigate("/appeal-review")}
+ >
+ 用户申诉
+ </button>
+ <button
+ className="admin-nav-btn migration"
+ onClick={() => navigate("/migration-review")}
+ >
+ 用户迁移
+ </button>
+ <button
+ className="admin-nav-btn promotion"
+ onClick={() => navigate("/seed-promotion")}
+ >
+ 促销管理
+ </button>
+ </div>
</div>
</div>
);