P5: 后台独立应用（MUI）- 13 模块/布局/守卫/复用前台基建

2026-08-06 23:10:09 +08:00
parent f7dd4163b2
commit c71f4f0ed6
21 changed files with 2936 additions and 5 deletions
@@ -1,8 +1,97 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { getToken } from '../api/client.js';
+import { me } from '../api/auth.js';
+import { getSettings } from '../api/settings.js';
+import AdminLayout from './AdminLayout.jsx';
+import Dashboard from './pages/Dashboard.jsx';
+import Settings from './pages/Settings.jsx';
+import CaptchaSettings from './pages/CaptchaSettings.jsx';
+import ThemeSettings from './pages/ThemeSettings.jsx';
+import Homepage from './pages/Homepage.jsx';
+import EmailSettings from './pages/EmailSettings.jsx';
+import BlogManage from './pages/BlogManage.jsx';
+import ForumManage from './pages/ForumManage.jsx';
+import Users from './pages/Users.jsx';
+import Announcements from './pages/Announcements.jsx';
+import Links from './pages/Links.jsx';
+import Uploads from './pages/Uploads.jsx';
+import ImportDb from './pages/ImportDb.jsx';

-function AdminPlaceholder() {
-  return <div style={{ padding: '48px', textAlign: 'center', fontFamily: 'system-ui, sans-serif' }}>后台建设中</div>;
+// 生产：/admin/* 由后端 fallback 到 dist/admin.html（Phase 6 需求），basename=/admin；
+// 开发：vite 多入口直接访问 /admin.html，basename 自适应为空。
+const pathname = window.location.pathname;
+const basename = (pathname === '/admin' || pathname.startsWith('/admin/')) ? '/admin' : '';
+
+function AdminApp() {
+  const [status, setStatus] = useState('checking'); // checking | ok
+  const [primary, setPrimary] = useState('#6750a4');
+
+  useEffect(() => {
+    const token = getToken();
+    if (!token) { window.location.href = '/login.html'; return; }
+    me()
+      .then((u) => {
+        if (u.role !== 'admin') {
+          window.alert('需要管理员权限');
+          window.location.href = '/';
+          return;
+        }
+        setStatus('ok');
+      })
+      .catch(() => { window.location.href = '/login.html'; });
+    getSettings()
+      .then((s) => { if (s.primary_color) setPrimary(s.primary_color); })
+      .catch(() => {});
+  }, []);
+
+  if (status !== 'ok') {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  const dark = document.documentElement.getAttribute('data-theme') === 'dark';
+  const theme = createTheme({
+    palette: {
+      mode: dark ? 'dark' : 'light',
+      primary: { main: primary },
+    },
+  });
+
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <BrowserRouter basename={basename}>
+        <Routes>
+          <Route element={<AdminLayout />}>
+            <Route index element={<Navigate to="/dashboard" replace />} />
+            <Route path="/dashboard" element={<Dashboard />} />
+            <Route path="/settings" element={<Settings />} />
+            <Route path="/captcha" element={<CaptchaSettings />} />
+            <Route path="/theme" element={<ThemeSettings />} />
+            <Route path="/homepage" element={<Homepage />} />
+            <Route path="/email" element={<EmailSettings />} />
+            <Route path="/blog" element={<BlogManage />} />
+            <Route path="/forum" element={<ForumManage />} />
+            <Route path="/users" element={<Users />} />
+            <Route path="/announcements" element={<Announcements />} />
+            <Route path="/links" element={<Links />} />
+            <Route path="/uploads" element={<Uploads />} />
+            <Route path="/import" element={<ImportDb />} />
+            <Route path="*" element={<Navigate to="/dashboard" replace />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </ThemeProvider>
+  );
 }

-createRoot(document.getElementById('root')).render(<AdminPlaceholder />);
+createRoot(document.getElementById('root')).render(<AdminApp />);