修改前端页面样式,工作进度:80%
Change-Id: I3c15ec6bc7eb033354f585a28cab12cb74aca79c
diff --git a/front/src/MusicPage.js b/front/src/MusicPage.js
index 097cf3c..13a6ba5 100644
--- a/front/src/MusicPage.js
+++ b/front/src/MusicPage.js
@@ -1,48 +1,49 @@
import React, { useState, useEffect } from "react";
import HomeIcon from "@mui/icons-material/Home";
import MovieIcon from "@mui/icons-material/Movie";
-import EmailIcon from "@mui/icons-material/Email";
+import TvIcon from "@mui/icons-material/Tv";
import MusicNoteIcon from "@mui/icons-material/MusicNote";
-import EmojiPeopleIcon from "@mui/icons-material/EmojiPeople";
+import AnimationIcon from "@mui/icons-material/Animation";
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 ForumIcon from "@mui/icons-material/Forum";
import HelpIcon from "@mui/icons-material/Help";
-import "./App.css";
+import "./SharedStyles.css";
import { useNavigate } from "react-router-dom";
import { API_BASE_URL } from "./config";
const navItems = [
- { label: "首页", icon: <HomeIcon />, path: "/home" },
- { 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" },
- { label: "论坛", icon: <ForumIcon />, path: "/forum" },
- { label: "发布", icon: <AccountCircleIcon />, path: "/publish" },
- { label: "求种", icon: <HelpIcon />, path: "/begseed" },
+ { label: "首页", icon: <HomeIcon className="emerald-nav-icon" />, path: "/home", type: "home" },
+ { label: "电影", icon: <MovieIcon className="emerald-nav-icon" />, path: "/movie", type: "movie" },
+ { label: "剧集", icon: <TvIcon className="emerald-nav-icon" />, path: "/tv", type: "tv" },
+ { label: "音乐", icon: <MusicNoteIcon className="emerald-nav-icon" />, path: "/music", type: "music" },
+ { label: "动漫", icon: <AnimationIcon className="emerald-nav-icon" />, path: "/anime", type: "anime" },
+ { label: "游戏", icon: <SportsEsportsIcon className="emerald-nav-icon" />, path: "/game", type: "game" },
+ { label: "体育", icon: <SportsMartialArtsIcon className="emerald-nav-icon" />, path: "/sport", type: "sport" },
+ { label: "资料", icon: <PersonIcon className="emerald-nav-icon" />, path: "/info", type: "info" },
+ { label: "论坛", icon: <ForumIcon className="emerald-nav-icon" />, path: "/forum", type: "forum" },
+ { label: "发布", icon: <AccountCircleIcon className="emerald-nav-icon" />, path: "/publish", type: "publish" },
+ { label: "求种", icon: <HelpIcon className="emerald-nav-icon" />, path: "/begseed", type: "help" },
];
+// 音乐地区标签
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" /> },
+ { label: "华语音乐", value: "chinese" },
+ { label: "港台音乐", value: "hk_tw" },
+ { label: "欧美音乐", value: "western" },
+ { label: "日韩音乐", value: "jp_kr" },
+ { label: "其他音乐", value: "others" }
];
export default function MusicPage() {
const navigate = useNavigate();
- const [searchText, setSearchText] = useState('');
+ const [searchText, setSearchText] = React.useState('');
const [userInfo, setUserInfo] = useState({ avatar_url: '', username: '' });
const [userPT, setUserPT] = useState({ magic: 0, ratio: 0, upload: 0, download: 0 });
- const [activeTab, setActiveTab] = useState(0);
- const [musicList, setMusicList] = useState([]);
+ const [activeTab, setActiveTab] = React.useState(0);
+ const [musicList, setMusicList] = React.useState([]);
useEffect(() => {
const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
@@ -62,17 +63,8 @@
.catch(err => console.error('Fetching user profile failed', err));
}, []);
- // 每个tab对应的音乐类型
- const musicTypesList = [
- ["华语音乐（大陆）", "欧美音乐", "日韩音乐", "港台音乐", "其他"], // 古典音乐
- ["港台流行", "港台摇滚", "港台其他"], // 流行音乐
- ["欧美流行", "欧美摇滚", "欧美其他"], // 摇滚
- ["日韩流行", "日韩其他"], // 电子音乐
- ["其他类型1", "其他类型2"] // 说唱
- ];
- const musicTypes = musicTypesList[activeTab] || [];
-
- useEffect(() => {
+ React.useEffect(() => {
+ // 根据选中的标签获取音乐列表
const area = areaTabs[activeTab].label;
fetch(`${API_BASE_URL}/api/get-seed-list-by-tag?tag=${encodeURIComponent(area)}`)
.then(res => res.json())
@@ -86,128 +78,221 @@
fetch(`${API_BASE_URL}/api/search-seeds?tag=${encodeURIComponent(area)}&keyword=${encodeURIComponent(searchText)}`)
.then(res => res.json())
.then(data => {
+ console.log('搜索返回数据:', data);
setMusicList(data);
})
.catch(() => setMusicList([]));
};
+ const musicTypesList = [
+ ["华语流行", "华语摇滚", "华语民谣", "华语其他"], // 华语音乐
+ ["港台流行", "港台摇滚", "港台怀旧", "港台其他"], // 港台音乐
+ ["欧美流行", "欧美摇滚", "欧美电子", "欧美其他"], // 欧美音乐
+ ["日韩流行", "日韩摇滚", "日韩其他"], // 日韩音乐
+ ["古典音乐", "世界音乐", "其他类型"] // 其他音乐
+ ];
+ const musicTypes = musicTypesList[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')}>
- {userInfo.avatar_url ? (
- <img src={userInfo.avatar_url} alt="用户头像" style={{ width: 38, height: 38, borderRadius: '50%', objectFit: 'cover' }} />
- ) : (
- <AccountCircleIcon style={{ fontSize: 38, color: '#1a237e', background: '#e0f3ff', borderRadius: '50%' }} />
- )}
- </div>
- <div style={{ color: '#222', fontWeight: 500, marginRight: 24 }}>{userInfo.username || '用户栏'}</div>
- <div style={{ display: 'flex', gap: 28, flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
- <span style={{ color: '#1976d2', fontWeight: 500 }}>魔力值: <b>{userPT.magic}</b></span>
- <span style={{ color: '#1976d2', fontWeight: 500 }}>分享率: <b>{userPT.ratio}</b></span>
- <span style={{ color: '#1976d2', fontWeight: 500 }}>上传量: <b>{userPT.upload}</b></span>
- <span style={{ color: '#1976d2', fontWeight: 500 }}>下载量: <b>{userPT.download}</b></span>
- </div>
+ <div className="emerald-home-container">
+ {/* 流星雨背景效果 */}
+ <div className="meteor-shower">
+ <div className="meteor">💫</div>
+ <div className="meteor">⭐</div>
+ <div className="meteor">✨</div>
+ <div className="meteor">🌟</div>
+ <div className="meteor">💫</div>
+ <div className="meteor">⭐</div>
+ <div className="meteor">✨</div>
+ <div className="meteor">🌟</div>
+ <div className="meteor">💫</div>
+ <div className="meteor">⭐</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="输入搜索关键词"
- value={searchText}
- onChange={e => setSearchText(e.target.value)}
- />
- <button className="search-btn" onClick={handleSearch}>
- <span role="img" aria-label="search">🔍</span>
- </button>
+
+ {/* 浮动园林装饰元素 */}
+ <div className="floating-garden-elements">
+ <div className="garden-element">🌿</div>
+ <div className="garden-element">🦋</div>
+ <div className="garden-element">🌺</div>
+ <div className="garden-element">🌸</div>
</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="music-table">
- <thead>
- <tr>
- <th>音乐类型</th>
- <th>标题</th>
- <th>发布者</th>
- <th>大小</th>
- <th>热度</th>
- <th>折扣倍率</th>
- </tr>
- </thead>
- <tbody>
- {musicList.length > 0 ? (
- musicList.map((item, index) => (
- <tr key={item.id || index}>
- <td>
- <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
- {item.seedtag}
- </a>
- </td>
- <td>
- <a href={`/torrent/${item.seedid}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
- {item.title}
- </a>
- </td>
- <td>{item.username}</td>
- <td>{item.seedsize}</td>
- <td>{item.downloadtimes}</td>
- <td>{item.discount == null ? 1 : item.discount}</td>
- </tr>
- ))
+
+ <div className="emerald-content">
+ {/* NeuraFlux用户栏 */}
+ <div className="emerald-user-bar">
+ <div className="emerald-user-avatar" onClick={() => navigate('/user')}>
+ {userInfo.avatar_url ? (
+ <img src={userInfo.avatar_url} alt="用户头像" style={{ width: 38, height: 38, borderRadius: '50%', objectFit: 'cover' }} />
) : (
- musicTypes.map((type, index) => (
- <tr key={type}>
- <td>
- <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
- {type}
- </a>
- </td>
- <td>
- <a href={`/torrent/${type}`} style={{ color: '#1a237e', textDecoration: 'none' }}>
- 种子{index + 1}
- </a>
- </td>
- <td>发布者{index + 1}</td>
- <td>--</td>
- <td>--</td>
- <td>1</td>
- </tr>
- ))
+ <AccountCircleIcon style={{ fontSize: 38, color: 'white' }} />
)}
- </tbody>
- </table>
+ </div>
+ <div className="emerald-brand-section">
+ <div className="emerald-brand-icon">⚡</div>
+ <div className="emerald-user-label">NeuraFlux</div>
+ </div>
+ <div className="emerald-user-stats">
+ <span className="emerald-stat-item">
+ 魔力值: <span className="emerald-stat-value">{userPT.magic}</span>
+ </span>
+ <span className="emerald-stat-item">
+ 分享率: <span className="emerald-stat-value">{userPT.ratio}</span>
+ </span>
+ <span className="emerald-stat-item">
+ 上传: <span className="emerald-stat-value">{userPT.upload}GB</span>
+ </span>
+ <span className="emerald-stat-item">
+ 下载: <span className="emerald-stat-value">{userPT.download}GB</span>
+ </span>
+ </div>
+ </div>
+
+ {/* NeuraFlux导航栏 */}
+ <nav className="emerald-nav-bar">
+ {navItems.map((item) => (
+ <div
+ key={item.label}
+ className={`emerald-nav-item ${item.label === "音乐" ? "active" : ""}`}
+ data-type={item.type}
+ onClick={() => navigate(item.path)}
+ >
+ {item.icon}
+ <span className="emerald-nav-label">{item.label}</span>
+ </div>
+ ))}
+ </nav>
+
+ {/* 音乐内容区域 */}
+ <div className="emerald-content-section">
+ <h1 className="emerald-page-title">🎵 音乐资源</h1>
+ <p style={{ textAlign: 'center', color: '#2d5016', fontSize: '18px', marginBottom: '30px' }}>
+ 欢迎来到NeuraFlux音乐频道，这里有最新最热门的音乐资源
+ </p>
+
+ {/* 搜索栏 */}
+ <div style={{
+ display: 'flex',
+ justifyContent: 'center',
+ marginBottom: '30px',
+ gap: '15px'
+ }}>
+ <input
+ type="text"
+ placeholder="搜索音乐资源..."
+ value={searchText}
+ onChange={(e) => setSearchText(e.target.value)}
+ style={{
+ padding: '12px 20px',
+ borderRadius: '20px',
+ border: '2px solid rgba(144, 238, 144, 0.3)',
+ background: 'rgba(240, 255, 240, 0.5)',
+ fontSize: '16px',
+ width: '300px',
+ fontFamily: 'Lora, serif'
+ }}
+ />
+ <button
+ onClick={handleSearch}
+ style={{
+ padding: '12px 24px',
+ borderRadius: '20px',
+ border: 'none',
+ background: 'linear-gradient(135deg, #2d5016 0%, #90ee90 100%)',
+ color: 'white',
+ fontSize: '16px',
+ cursor: 'pointer',
+ fontFamily: 'Lora, serif'
+ }}
+ >
+ 搜索
+ </button>
+ </div>
+
+ {/* 地区分类标签 */}
+ <div style={{
+ display: 'flex',
+ justifyContent: 'center',
+ marginBottom: '30px',
+ gap: '15px',
+ flexWrap: 'wrap'
+ }}>
+ {areaTabs.map((tab, index) => (
+ <button
+ key={tab.value}
+ onClick={() => setActiveTab(index)}
+ style={{
+ padding: '10px 20px',
+ borderRadius: '15px',
+ border: '2px solid rgba(144, 238, 144, 0.3)',
+ background: activeTab === index
+ ? 'linear-gradient(135deg, #90ee90 0%, #2d5016 100%)'
+ : 'rgba(240, 255, 240, 0.3)',
+ color: activeTab === index ? 'white' : '#2d5016',
+ fontSize: '14px',
+ cursor: 'pointer',
+ fontFamily: 'Lora, serif',
+ transition: 'all 0.3s ease'
+ }}
+ >
+ {tab.label}
+ </button>
+ ))}
+ </div>
+
+ {/* 音乐列表 */}
+ <div className="emerald-table-section">
+ <table className="emerald-table">
+ <thead>
+ <tr>
+ <th>音乐类型</th>
+ <th>标题</th>
+ <th>发布者</th>
+ <th>大小</th>
+ <th>热度</th>
+ <th>折扣倍率</th>
+ </tr>
+ </thead>
+ <tbody>
+ {musicList.length > 0 ? (
+ musicList.map((item, index) => (
+ <tr key={item.id || index}>
+ <td>{item.seedtag}</td>
+ <td>
+ <a href={`/torrent/${item.seedid}`}>
+ {item.title}
+ </a>
+ </td>
+ <td>{item.username}</td>
+ <td>{item.seedsize}</td>
+ <td>{item.downloadtimes}</td>
+ <td>{item.discount == null ? 1 : item.discount}</td>
+ </tr>
+ ))
+ ) : (
+ musicTypes.map((type, index) => (
+ <tr key={type}>
+ <td>{type}</td>
+ <td>
+ <a href={`/torrent/${type}`}>
+ 种子{index + 1}
+ </a>
+ </td>
+ <td>发布者{index + 1}</td>
+ <td>--</td>
+ <td>--</td>
+ <td>1</td>
+ </tr>
+ ))
+ )}
+ </tbody>
+ </table>
+ </div>
+ </div>
</div>
- <div style={{ height: 32 }} />
- <Pagination />
</div>
);
}
+// Pagination组件暂时不使用
function Pagination() {
const [page, setPage] = React.useState(3);
const total = 5;