118 lines
3.2 KiB
JavaScript
118 lines
3.2 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
|
import { createTheme, ThemeProvider, CssBaseline, useMediaQuery } from '@mui/material';
|
|
import MainLayout from './layouts/MainLayout';
|
|
import HomePage from './pages/HomePage';
|
|
import AboutPage from './pages/AboutPage';
|
|
import SettingsPage from './pages/SettingsPage';
|
|
import SplashScreen from './components/SplashScreen';
|
|
import './App.css';
|
|
|
|
function App() {
|
|
const [loading, setLoading] = useState(true);
|
|
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
|
const isMobile = useMediaQuery('(max-width:600px)');
|
|
|
|
// 创建自定义主题
|
|
const theme = createTheme({
|
|
palette: {
|
|
mode: prefersDarkMode ? 'dark' : 'light',
|
|
primary: {
|
|
main: '#24c8db',
|
|
},
|
|
secondary: {
|
|
main: '#646cff',
|
|
},
|
|
background: {
|
|
default: prefersDarkMode ? '#1e1e1e' : '#f5f5f5',
|
|
paper: prefersDarkMode ? '#2d2d2d' : '#ffffff',
|
|
},
|
|
},
|
|
typography: {
|
|
fontFamily: 'Inter, Avenir, Helvetica, Arial, sans-serif',
|
|
// 移动端字体大小调整
|
|
h4: {
|
|
fontSize: isMobile ? '1.75rem' : '2.125rem',
|
|
},
|
|
h6: {
|
|
fontSize: isMobile ? '1.1rem' : '1.25rem',
|
|
},
|
|
body1: {
|
|
fontSize: isMobile ? '0.95rem' : '1rem',
|
|
},
|
|
body2: {
|
|
fontSize: isMobile ? '0.85rem' : '0.875rem',
|
|
},
|
|
},
|
|
components: {
|
|
MuiButton: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 8,
|
|
textTransform: 'none',
|
|
fontWeight: 500,
|
|
},
|
|
},
|
|
},
|
|
MuiPaper: {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: 12,
|
|
},
|
|
},
|
|
},
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
body: {
|
|
WebkitTapHighlightColor: 'transparent', // 禁用移动端点击高亮
|
|
WebkitOverflowScrolling: 'touch', // 使滚动更流畅
|
|
overscrollBehavior: 'none', // 防止滚动穿透
|
|
},
|
|
'*::-webkit-scrollbar': {
|
|
width: '8px',
|
|
height: '8px',
|
|
},
|
|
'*::-webkit-scrollbar-thumb': {
|
|
backgroundColor: prefersDarkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)',
|
|
borderRadius: '4px',
|
|
},
|
|
'*::-webkit-scrollbar-track': {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
}
|
|
},
|
|
},
|
|
});
|
|
|
|
// 模拟应用启动加载
|
|
useEffect(() => {
|
|
// 模拟启动过程，实际项目中可根据资源加载情况决定
|
|
const timer = setTimeout(() => {
|
|
setLoading(false);
|
|
}, 2000);
|
|
|
|
return () => clearTimeout(timer);
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return <SplashScreen onFinish={() => setLoading(false)} />;
|
|
}
|
|
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<CssBaseline />
|
|
<Router>
|
|
<MainLayout>
|
|
<Routes>
|
|
<Route path="/" element={<HomePage />} />
|
|
<Route path="/about" element={<AboutPage />} />
|
|
<Route path="/settings" element={<SettingsPage />} />
|
|
</Routes>
|
|
</MainLayout>
|
|
</Router>
|
|
</ThemeProvider>
|
|
);
|
|
}
|
|
|
|
export default App;
|