Commit 24664be0d9ae586f79682f469cc0449bc16ea580
1 parent
2a548826
feat(usr): add MainPage and update App routing for tab shell
Showing
3 changed files
with
31 additions
and
4 deletions
frontend/src/App.tsx
| 1 | 1 | import { Navigate, Route, Routes } from 'react-router-dom' |
| 2 | 2 | import { useAppSelector } from './store/hooks' |
| 3 | +import AppShell from './components/AppShell' | |
| 3 | 4 | import LoginPage from './pages/usr/LoginPage' |
| 5 | +import MainPage from './pages/MainPage' | |
| 4 | 6 | import UserListPage from './pages/usr/UserListPage' |
| 7 | +import UserDetailPage from './pages/usr/UserDetailPage' | |
| 5 | 8 | |
| 6 | -function PrivateRoute({ children }: { children: React.ReactNode }) { | |
| 9 | +function AuthenticatedShell() { | |
| 7 | 10 | const accessToken = useAppSelector(s => s.auth.accessToken) |
| 8 | - return accessToken ? <>{children}</> : <Navigate to="/login" replace /> | |
| 11 | + if (!accessToken) return <Navigate to="/login" replace /> | |
| 12 | + return <AppShell /> | |
| 9 | 13 | } |
| 10 | 14 | |
| 11 | 15 | export default function App() { |
| 12 | 16 | return ( |
| 13 | 17 | <Routes> |
| 14 | 18 | <Route path="/login" element={<LoginPage />} /> |
| 15 | - <Route path="/" element={<PrivateRoute><div>主页(待实现)</div></PrivateRoute>} /> | |
| 16 | - <Route path="/usr/users" element={<PrivateRoute><UserListPage /></PrivateRoute>} /> | |
| 19 | + <Route element={<AuthenticatedShell />}> | |
| 20 | + <Route path="/" element={<MainPage />} /> | |
| 21 | + <Route path="/usr/users" element={<UserListPage />} /> | |
| 22 | + <Route path="/usr/users/new" element={<UserDetailPage />} /> | |
| 23 | + <Route path="/usr/users/:id" element={<UserDetailPage />} /> | |
| 24 | + </Route> | |
| 17 | 25 | <Route path="*" element={<Navigate to="/" replace />} /> |
| 18 | 26 | </Routes> |
| 19 | 27 | ) | ... | ... |
frontend/src/pages/MainPage.tsx
0 → 100644
| 1 | +import { useEffect } from 'react' | |
| 2 | +import { useAppDispatch } from '../store/hooks' | |
| 3 | +import { activateTab } from '../store/slices/tabsSlice' | |
| 4 | + | |
| 5 | +export default function MainPage() { | |
| 6 | + const dispatch = useAppDispatch() | |
| 7 | + useEffect(() => { | |
| 8 | + dispatch(activateTab('main')) | |
| 9 | + }, [dispatch]) | |
| 10 | + | |
| 11 | + return ( | |
| 12 | + <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', color: '#888', fontSize: 16 }}> | |
| 13 | + 主页(功能待实现) | |
| 14 | + </div> | |
| 15 | + ) | |
| 16 | +} | ... | ... |
frontend/src/pages/usr/UserDetailPage.tsx
0 → 100644