前端页面提交
Change-Id: I096c8538ded26791a94a46d8f27b0307dbfb8300
diff --git a/front/src/InfoPage.js b/front/src/InfoPage.js
new file mode 100644
index 0000000..a919afd
--- /dev/null
+++ b/front/src/InfoPage.js
@@ -0,0 +1,200 @@
+import React from "react";
+import MovieIcon from "@mui/icons-material/Movie";
+import EmailIcon from "@mui/icons-material/Email";
+import MusicNoteIcon from "@mui/icons-material/MusicNote";
+import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+import SportsEsportsIcon from "@mui/icons-material/SportsEsports";
+import SportsMartialArtsIcon from "@mui/icons-material/SportsMartialArts";
+import PersonIcon from "@mui/icons-material/Person";
+import AccountCircleIcon from "@mui/icons-material/AccountCircle";
+import "./App.css";
+import { useNavigate } from "react-router-dom";
+
+const navItems = [
+ { label: "电影", icon: <MovieIcon />, path: "/movie" },
+ { label: "剧集", icon: <EmailIcon />, path: "/tv" },
+ { label: "音乐", icon: <MusicNoteIcon />, path: "/music" },
+ { label: "动漫", icon: <EmojiPeopleIcon />, path: "/anime" },
+ { label: "游戏", icon: <SportsEsportsIcon />, path: "/game" },
+ { label: "体育", icon: <SportsMartialArtsIcon />, path: "/sport" },
+ { label: "资料", icon: <PersonIcon />, path: "/info" },
+];
+
+const infoTypes = [""];
+
+const areaTabs = [
+ { label: "出版物", icon: <MovieIcon fontSize="small" /> },
+ { label: "学习教程", icon: <EmailIcon fontSize="small" /> },
+ { label: "素材模板", icon: <PersonIcon fontSize="small" /> },
+ { label: "演讲交流", icon: <EmojiPeopleIcon fontSize="small" /> },
+ { label: "日常娱乐", icon: <PersonIcon fontSize="small" />, active: true },
+];
+
+export default function InfoPage() {
+ const navigate = useNavigate();
+ const [activeTab, setActiveTab] = React.useState(0);
+
+ // 每个tab对应的资料类型
+ const infoTypesList = [
+ ["出版物A", "出版物B", "出版物C"], // 出版物
+ ["教程A", "教程B", "教程C"], // 学习教程
+ ["模板A", "模板B"], // 素材模板
+ ["演讲A", "演讲B"], // 演讲交流
+ ["娱乐A", "娱乐B"], // 日常娱乐
+ ];
+ const infoTypes = infoTypesList[activeTab] || [];
+
+ return (
+ <div className="container">
+ {/* 顶部空白与音乐界面一致，用户栏绝对定位在页面右上角 */}
+ <div style={{ height: 80 }} />
+ <div
+ className="user-bar"
+ style={{
+ position: "fixed",
+ top: 18,
+ right: 42,
+ zIndex: 100,
+ display: "flex",
+ alignItems: "center",
+ background: "#e0f3ff",
+ borderRadius: 12,
+ padding: "6px 18px",
+ boxShadow: "0 2px 8px #b2d8ea",
+ minWidth: 320,
+ minHeight: 48,
+ width: 420,
+ }}
+ >
+ <div
+ style={{ cursor: "pointer", marginRight: 16 }}
+ onClick={() => navigate("/user")}
+ >
+ <AccountCircleIcon
+ style={{
+ fontSize: 38,
+ color: "#1a237e",
+ background: "#e0f3ff",
+ borderRadius: "50%",
+ }}
+ />
+ </div>
+ <div style={{ color: "#222", fontWeight: 500, marginRight: 24 }}>
+ 用户栏
+ </div>
+ <div
+ style={{
+ display: "flex",
+ gap: 28,
+ flex: 1,
+ justifyContent: "flex-end",
+ alignItems: "center",
+ }}
+ >
+ <span style={{ color: "#1976d2", fontWeight: 500 }}>
+ 魔力值: <b>12345</b>
+ </span>
+ <span style={{ color: "#1976d2", fontWeight: 500 }}>
+ 分享率: <b>2.56</b>
+ </span>
+ <span style={{ color: "#1976d2", fontWeight: 500 }}>
+ 上传量: <b>100GB</b>
+ </span>
+ <span style={{ color: "#1976d2", fontWeight: 500 }}>
+ 下载量: <b>50GB</b>
+ </span>
+ </div>
+ </div>
+ {/* 下方内容整体下移，留出与音乐界面一致的间距 */}
+ <div style={{ height: 32 }} />
+ <nav className="nav-bar card">
+ {navItems.map((item) => (
+ <div
+ key={item.label}
+ className={item.label === "资料" ? "nav-item active" : "nav-item"}
+ onClick={() => navigate(item.path)}
+ >
+ {item.icon}
+ <span>{item.label}</span>
+ </div>
+ ))}
+ </nav>
+ <div className="search-section card">
+ <input className="search-input" placeholder="输入搜索关键词" />
+ <button className="search-btn">
+ <span role="img" aria-label="search">
+ 🔍
+ </span>
+ </button>
+ </div>
+ <div
+ className="area-tabs"
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ gap: 24,
+ margin: "18px 0",
+ }}
+ >
+ {areaTabs.map((tab, idx) => (
+ <div
+ key={tab.label}
+ className={activeTab === idx ? "area-tab active" : "area-tab"}
+ onClick={() => setActiveTab(idx)}
+ >
+ {tab.icon} <span>{tab.label}</span>
+ </div>
+ ))}
+ </div>
+ <div className="table-section">
+ <table className="movie-table">
+ <thead>
+ <tr>
+ <th>类型</th>
+ <th>标题</th>
+ <th>发布者</th>
+ </tr>
+ </thead>
+ <tbody>
+ {infoTypes.map((type) => (
+ <tr key={type}>
+ <td>{type}</td>
+ <td></td>
+ <td></td>
+ </tr>
+ ))}
+ </tbody>
+ </table>
+ </div>
+ <div style={{ height: 32 }} />
+ <Pagination />
+ </div>
+ );
+}
+
+function Pagination() {
+ const [page, setPage] = React.useState(3);
+ const total = 5;
+ return (
+ <div className="pagination">
+ <button
+ onClick={() => setPage((p) => Math.max(1, p - 1))}
+ disabled={page === 1}
+ >
+ 上一页
+ </button>
+ <span className="page-num">
+ {page}/{total}
+ </span>
+ <button
+ onClick={() => setPage((p) => Math.min(total, p + 1))}
+ disabled={page === total}
+ >
+ 下一页
+ </button>
+ <span className="page-info">
+ 第 <b>{page}</b> 页
+ </span>
+ </div>
+ );
+}