blob: ed88a553470c9edb8d926d47871fc687dc053c24 [file] [log] [blame]
whtb1e79592025-06-07 16:03:09 +08001import React, { useState } from "react";
2
3// 示例迁移数据
4const migrations = [
5 {
6 migration_id: "m001",
7 user_id: "u001",
8 application_url: "http://sse.bjtu.edu.cn/media/attachments/2024/10/20241012160658.pdf",
9 approved: 0,
10 pending_magic: 10,
11 granted_magic: 0,
12 pending_uploaded: 1000,
13 granted_uploaded: 0,
14 },
15 {
16 migration_id: "m002",
17 user_id: "u002",
18 application_url: "http://sse.bjtu.edu.cn/media/attachments/2024/10/20241012160658.pdf",
19 approved: 1,
20 pending_magic: 20,
21 granted_magic: 20,
22 pending_uploaded: 2000,
23 granted_uploaded: 2000,
24 },
25];
26
27// 简单PDF预览组件
28function FileViewer({ url }) {
29 if (!url) return <div>无附件</div>;
30 if (url.endsWith(".pdf")) {
31 return (
32 <iframe
33 src={url}
34 title="PDF预览"
35 width="100%"
36 height="400px"
37 style={{ border: "1px solid #ccc", borderRadius: 8 }}
38 />
39 );
40 }
41 // 这里只做PDF示例,实际可扩展为DOC等
42 return <a href={url} target="_blank" rel="noopener noreferrer">下载附件</a>;
43}
44
45export default function MigrationPage() {
46 const [selectedId, setSelectedId] = useState(migrations[0].migration_id);
47 const selectedMigration = migrations.find(m => m.migration_id === selectedId);
48
49 const handleApprove = () => {
50 alert("已通过迁移(示例,无实际状态变更)");
51 };
52 const handleReject = () => {
53 alert("已拒绝迁移(示例,无实际状态变更)");
54 };
55
56 return (
57 <div style={{ display: "flex", minHeight: "100vh", background: "#f7faff" }}>
58 {/* 侧栏 */}
59 <div style={{ width: 180, background: "#fff", borderRight: "1px solid #e0e7ff", padding: 0 }}>
60 <h3 style={{ textAlign: "center", padding: "18px 0 0 0", color: "#1976d2" }}>迁移列表</h3>
61 <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 18 }}>
62 {migrations.map(m => (
63 <div
64 key={m.migration_id}
65 onClick={() => setSelectedId(m.migration_id)}
66 style={{
67 margin: "0 12px",
68 padding: "16px 10px",
69 borderRadius: 8,
70 background: selectedId === m.migration_id ? "#e3f2fd" : "#fff",
71 border: `2px solid ${m.approved === 1 ? "#43a047" : "#e53935"}`,
72 color: m.approved === 1 ? "#43a047" : "#e53935",
73 fontWeight: 600,
74 cursor: "pointer",
75 boxShadow: selectedId === m.migration_id ? "0 2px 8px #b2d8ea" : "none",
76 transition: "all 0.2s"
77 }}
78 >
79 {m.migration_id}
80 <span style={{
81 float: "right",
82 fontSize: 12,
83 color: m.approved === 1 ? "#43a047" : "#e53935"
84 }}>
85 {m.approved === 1 ? "已审核" : "未审核"}
86 </span>
87 </div>
88 ))}
89 </div>
90 </div>
91 {/* 迁移详情 */}
92 <div style={{ flex: 1, padding: "40px 48px" }}>
93 <h2 style={{ marginBottom: 24, color: "#1976d2" }}>迁移详情</h2>
94 <div style={{ background: "#fff", borderRadius: 12, padding: 32, boxShadow: "0 2px 8px #e0e7ff", marginBottom: 32 }}>
95 <div style={{ marginBottom: 18 }}>
96 <b>迁移ID:</b>{selectedMigration.migration_id}
97 </div>
98 <div style={{ marginBottom: 18 }}>
99 <b>用户ID:</b>{selectedMigration.user_id}
100 </div>
101 <div style={{ marginBottom: 18 }}>
102 <b>申请文件:</b>
103 <FileViewer url={selectedMigration.application_url} />
104 </div>
105 <div style={{ marginBottom: 18 }}>
106 <b>待迁移魔法值:</b>{selectedMigration.pending_magic},
107 <b>已迁移魔法值:</b>{selectedMigration.granted_magic}
108 </div>
109 <div style={{ marginBottom: 18 }}>
110 <b>待迁移上传量:</b>{selectedMigration.pending_uploaded},
111 <b>已迁移上传量:</b>{selectedMigration.granted_uploaded}
112 </div>
113 </div>
114 {/* 审核按钮 */}
115 <div style={{ display: "flex", gap: 32, justifyContent: "center" }}>
116 <button
117 style={{
118 background: selectedMigration.approved === 1 ? "#bdbdbd" : "#43a047",
119 color: "#fff",
120 border: "none",
121 borderRadius: 8,
122 padding: "10px 38px",
123 fontWeight: 600,
124 fontSize: 18,
125 cursor: selectedMigration.approved === 1 ? "not-allowed" : "pointer"
126 }}
127 disabled={selectedMigration.approved === 1}
128 onClick={handleApprove}
129 >
130 通过
131 </button>
132 <button
133 style={{
134 background: selectedMigration.approved === 1 ? "#bdbdbd" : "#e53935",
135 color: "#fff",
136 border: "none",
137 borderRadius: 8,
138 padding: "10px 38px",
139 fontWeight: 600,
140 fontSize: 18,
141 cursor: selectedMigration.approved === 1 ? "not-allowed" : "pointer"
142 }}
143 disabled={selectedMigration.approved === 1}
144 onClick={handleReject}
145 >
146 不通过
147 </button>
148 </div>
149 </div>
150 </div>
151 );
152}