final
Change-Id: Icf4ec3950a6bd1e066fa4a1976af36721af62a06
diff --git a/front/src/AppealPage.js b/front/src/AppealPage.js
index dfbe307..0f168c3 100644
--- a/front/src/AppealPage.js
+++ b/front/src/AppealPage.js
@@ -1,5 +1,6 @@
import React, { useState, useEffect } from "react";
import { API_BASE_URL } from "./config";
+import "./AppealPage.css";
// State for appeals fetched from backend
export default function AppealPage() {
@@ -30,8 +31,8 @@
fetchAppeals();
}, []);
- if (loading) return <div>加载中...</div>;
- if (error) return <div>加载失败：{error}</div>;
+ if (loading) return <div className="appeal-loading">加载中...</div>;
+ if (error) return <div className="appeal-error">加载失败：{error}</div>;
const selectedAppeal = appeals.find(a => a.appealid === selectedId) || {};
// Approve selected appeal and refresh
@@ -66,34 +67,25 @@
};
return (
- <div style={{ display: "flex", minHeight: "100vh", background: "#f7faff" }}>
+ <div className="appeal-page-container">
{/* 侧栏 */}
- <div style={{ width: 180, background: "#fff", borderRight: "1px solid #e0e7ff", padding: 0 }}>
- <h3 style={{ textAlign: "center", padding: "18px 0 0 0", color: "#1976d2" }}>申诉列表</h3>
- <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 18 }}>
+ <div className="appeal-sidebar">
+ <h3 className="appeal-sidebar-title">申诉列表</h3>
+ <div className="appeal-list-container">
{appeals.map(a => (
<div
key={a.appealid}
onClick={() => setSelectedId(a.appealid)}
- style={{
- margin: "0 12px",
- padding: "16px 10px",
- borderRadius: 8,
- background: selectedId === a.appealid ? "#e3f2fd" : "#fff",
- border: `2px solid ${a.status === 1 || a.status === 2 ? "#43a047" : "#e53935"}`,
- color: a.status === 1 || a.status === 2 ? "#43a047" : "#e53935",
- fontWeight: 600,
- cursor: "pointer",
- boxShadow: selectedId === a.appealid ? "0 2px 8px #b2d8ea" : "none",
- transition: "all 0.2s"
- }}
+ className={`appeal-list-item ${
+ selectedId === a.appealid ? 'selected' : ''
+ } ${
+ a.status === 1 || a.status === 2 ? 'approved' : 'pending'
+ }`}
>
{a.user.username}
- <span style={{
- float: "right",
- fontSize: 12,
- color: a.status === 1 || a.status === 2 ? "#43a047" : "#e53935"
- }}>
+ <span className={`appeal-status-label ${
+ a.status === 1 || a.status === 2 ? 'approved' : 'pending'
+ }`}>
{a.status === 1 || a.status === 2 ? "已审核" : "未审核"}
</span>
</div>
@@ -101,52 +93,34 @@
</div>
</div>
{/* 申诉详情 */}
- <div style={{ flex: 1, padding: "40px 48px" }}>
- <h2 style={{ marginBottom: 24, color: "#1976d2" }}>申诉详情</h2>
- <div style={{ background: "#fff", borderRadius: 12, padding: 32, boxShadow: "0 2px 8px #e0e7ff", marginBottom: 32 }}>
- <div style={{ marginBottom: 18 }}>
+ <div className="appeal-main-content">
+ <h2 className="appeal-detail-title">申诉详情</h2>
+ <div className="appeal-detail-card">
+ <div className="appeal-detail-item">
<b>申诉ID：</b>{selectedAppeal.appealid}
</div>
- <div style={{ marginBottom: 18 }}>
+ <div className="appeal-detail-item">
<b>用户ID：</b>{selectedAppeal.user.userid}
</div>
- <div style={{ marginBottom: 18 }}>
+ <div className="appeal-detail-item">
<b>申诉内容：</b>{selectedAppeal.content}
</div>
- <div style={{ marginBottom: 18 }}>
+ <div className="appeal-detail-item">
<b>申诉文件：</b>
<FileViewer url={selectedAppeal.fileURL} />
</div>
</div>
{/* 审核按钮 */}
- <div style={{ display: "flex", gap: 32, justifyContent: "center" }}>
+ <div className="appeal-buttons-container">
<button
- style={{
- background: selectedAppeal.status === 1 ? "#bdbdbd" : "#43a047",
- color: "#fff",
- border: "none",
- borderRadius: 8,
- padding: "10px 38px",
- fontWeight: 600,
- fontSize: 18,
- cursor: selectedAppeal.status === 1 ? "not-allowed" : "pointer"
- }}
+ className={`appeal-btn appeal-btn-approve`}
disabled={selectedAppeal.status === 1}
onClick={handleApprove}
>
通过
</button>
<button
- style={{
- background: selectedAppeal.status === 1 ? "#bdbdbd" : "#e53935",
- color: "#fff",
- border: "none",
- borderRadius: 8,
- padding: "10px 38px",
- fontWeight: 600,
- fontSize: 18,
- cursor: selectedAppeal.status === 1 ? "not-allowed" : "pointer"
- }}
+ className={`appeal-btn appeal-btn-reject`}
disabled={selectedAppeal.status === 1}
onClick={handleReject}
>
@@ -163,15 +137,15 @@
if (!url) return <div>无附件</div>;
if (url.endsWith(".pdf")) {
return (
- <iframe
- src={url}
- title="PDF预览"
- width="100%"
- height="400px"
- style={{ border: "1px solid #ccc", borderRadius: 8 }}
- />
+ <div className="file-viewer-container">
+ <iframe
+ src={url}
+ title="PDF预览"
+ className="file-viewer-iframe"
+ />
+ </div>
);
}
// 这里只做PDF示例，实际可扩展为DOC等
- return <a href={url} target="_blank" rel="noopener noreferrer">下载附件</a>;
+ return <a href={url} target="_blank" rel="noopener noreferrer" className="file-download-link">下载附件</a>;
}
\ No newline at end of file