first-update
This commit is contained in:
200
easy-dataset-main/app/dataset-square/page.js
Normal file
200
easy-dataset-main/app/dataset-square/page.js
Normal file
@@ -0,0 +1,200 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Box, Container, Typography, Paper, useTheme, alpha } from '@mui/material';
|
||||
import StorageIcon from '@mui/icons-material/Storage';
|
||||
import Navbar from '@/components/Navbar/index';
|
||||
import { DatasetSearchBar } from '@/components/dataset-square/DatasetSearchBar';
|
||||
import { DatasetSiteList } from '@/components/dataset-square/DatasetSiteList';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export default function DatasetSquarePage() {
|
||||
const [projects, setProjects] = useState([]);
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
// 获取项目列表和模型列表
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
// 获取用户创建的项目详情
|
||||
const response = await fetch('/api/projects');
|
||||
if (response.ok) {
|
||||
const projectsData = await response.json();
|
||||
setProjects(projectsData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取数据失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<main>
|
||||
{/* 导航栏 */}
|
||||
<Navbar projects={projects} />
|
||||
|
||||
{/* 头部区域 */}
|
||||
<Box
|
||||
sx={{
|
||||
pt: 10,
|
||||
pb: 8,
|
||||
background:
|
||||
theme.palette.mode === 'dark'
|
||||
? `linear-gradient(135deg, ${alpha(theme.palette.primary.dark, 0.6)} 0%, ${alpha(theme.palette.background.default, 0.9)} 100%)`
|
||||
: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.9)} 0%, ${alpha(theme.palette.primary.light, 0.7)} 100%)`,
|
||||
borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
|
||||
position: 'relative',
|
||||
boxShadow: '0 4px 20px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
>
|
||||
{/* 背景装饰 */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: -100,
|
||||
left: -100,
|
||||
width: 300,
|
||||
height: 300,
|
||||
borderRadius: '50%',
|
||||
background: `radial-gradient(circle, ${alpha(theme.palette.secondary.main, 0.2)} 0%, transparent 70%)`,
|
||||
filter: 'blur(40px)',
|
||||
zIndex: 0
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
bottom: -80,
|
||||
right: -80,
|
||||
width: 350,
|
||||
height: 350,
|
||||
borderRadius: '50%',
|
||||
background: `radial-gradient(circle, ${alpha(theme.palette.primary.light, 0.15)} 0%, transparent 70%)`,
|
||||
filter: 'blur(30px)',
|
||||
zIndex: 0
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
top: '40%',
|
||||
right: '10%',
|
||||
width: 100,
|
||||
height: 100,
|
||||
borderRadius: '50%',
|
||||
background: `radial-gradient(circle, ${alpha(theme.palette.secondary.light, 0.15)} 0%, transparent 70%)`,
|
||||
filter: 'blur(20px)',
|
||||
zIndex: 0
|
||||
}}
|
||||
/>
|
||||
|
||||
<Container maxWidth="lg" sx={{ position: 'relative', zIndex: 1 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mb: 3 }}>
|
||||
<StorageIcon
|
||||
sx={{
|
||||
fontSize: 48,
|
||||
mr: 2.5,
|
||||
color: theme.palette.mode === 'dark' ? theme.palette.secondary.light : 'white',
|
||||
filter: 'drop-shadow(0 2px 5px rgba(0,0,0,0.2))'
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="h2"
|
||||
component="h1"
|
||||
sx={{
|
||||
fontWeight: 800,
|
||||
color: 'white',
|
||||
textShadow: '0 2px 8px rgba(0,0,0,0.15)',
|
||||
mb: 0,
|
||||
letterSpacing: '-0.5px',
|
||||
background:
|
||||
theme.palette.mode === 'dark'
|
||||
? 'linear-gradient(90deg, #ffffff 0%, #e0e0e0 100%)'
|
||||
: 'linear-gradient(90deg, #ffffff 30%, #f5f5f5 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
backgroundClip: 'text',
|
||||
textFillColor: 'transparent'
|
||||
}}
|
||||
>
|
||||
{t('datasetSquare.title')}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography
|
||||
variant="h5"
|
||||
align="center"
|
||||
sx={{
|
||||
maxWidth: 800,
|
||||
mx: 'auto',
|
||||
mb: 6,
|
||||
color: theme.palette.mode === 'dark' ? alpha('#FFFFFF', 0.9) : '#FFFFFF',
|
||||
fontWeight: 400,
|
||||
lineHeight: 1.6,
|
||||
textShadow: '0 1px 3px rgba(0,0,0,0.1)'
|
||||
}}
|
||||
>
|
||||
{t('datasetSquare.subtitle')}
|
||||
</Typography>
|
||||
|
||||
{/* 搜索栏组件 */}
|
||||
<Box
|
||||
sx={{
|
||||
maxWidth: 800,
|
||||
mx: 'auto',
|
||||
position: 'relative',
|
||||
zIndex: 10
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
elevation={6}
|
||||
sx={{
|
||||
width: '100%',
|
||||
p: 2.5,
|
||||
borderRadius: 3,
|
||||
background: 'transparent',
|
||||
backdropFilter: 'blur(10px)',
|
||||
boxShadow:
|
||||
theme.palette.mode === 'dark' ? '0 10px 40px rgba(0,0,0,0.3)' : '0 10px 40px rgba(0,0,0,0.15)',
|
||||
border: `1px solid ${alpha(theme.palette.primary.main, 0.1)}`,
|
||||
transform: 'translateY(0)',
|
||||
transition: 'transform 0.3s ease, box-shadow 0.3s ease',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-5px)',
|
||||
boxShadow:
|
||||
theme.palette.mode === 'dark' ? '0 15px 50px rgba(0,0,0,0.4)' : '0 15px 50px rgba(0,0,0,0.2)'
|
||||
},
|
||||
overflow: 'visible' // 确保不裁剪子元素
|
||||
}}
|
||||
>
|
||||
<DatasetSearchBar />
|
||||
</Paper>
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* 内容区域 */}
|
||||
<Container maxWidth="lg" sx={{ py: 8 }}>
|
||||
{/* 数据集网站列表组件 */}
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
p: { xs: 2, sm: 4 },
|
||||
borderRadius: 3,
|
||||
bgcolor:
|
||||
theme.palette.mode === 'dark'
|
||||
? alpha(theme.palette.background.paper, 0.6)
|
||||
: theme.palette.background.paper,
|
||||
backdropFilter: 'blur(8px)',
|
||||
border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
|
||||
boxShadow: theme.palette.mode === 'dark' ? '0 4px 20px rgba(0,0,0,0.2)' : '0 4px 20px rgba(0,0,0,0.05)'
|
||||
}}
|
||||
>
|
||||
<DatasetSiteList />
|
||||
</Paper>
|
||||
</Container>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user