affiliate_dash/frontend/src/App.tsx

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
import { ConfigProvider, App as AntdApp } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import { AuthProvider, useAuth } from './store/auth'
import MainLayout from './layouts/MainLayout'
import Login from './pages/Login'
import Dashboard from './pages/Dashboard'
import OpenApiDocs from './pages/OpenApiDocs'
import ApiDebugger from './pages/ApiDebugger'
import Delivery from './pages/Delivery'
import MerchantCenter from './pages/MerchantCenter'
import PlatformMerchants from './pages/PlatformMerchants'
import type { ReactNode } from 'react'
function PrivateRoute({ children }: { children: ReactNode }) {
  const { token } = useAuth()
  if (!token) return <Navigate to="/login" replace />
  return <>{children}</>
}

function AdminRoute({ children }: { children: ReactNode }) {
  const { isAdmin } = useAuth()
  if (!isAdmin) return <Navigate to="/" replace />
  return <>{children}</>
}

function AppRoutes() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/delivery/:channel/:orderNo" element={<Delivery />} />
      <Route
        path="/"
        element={
          <PrivateRoute>
            <MainLayout />
          </PrivateRoute>
        }
      >
        <Route index element={<Dashboard />} />
        <Route path="merchant-center" element={<MerchantCenter />} />
        <Route path="merchant-products" element={<MerchantCenter fixedTab="products" title="商品" />} />
        <Route path="merchant-orders" element={<MerchantCenter fixedTab="orders" title="发货订单" />} />
        <Route path="merchant-wallet" element={<MerchantCenter fixedTab="wallet" title="积分明细" />} />
        <Route path="merchant-members" element={<MerchantCenter fixedTab="members" title="成员" />} />
        <Route path="merchant-callbacks" element={<MerchantCenter fixedTab="callbacks" title="回调" />} />
        <Route path="merchant-api-keys" element={<MerchantCenter fixedTab="api" title="API 密钥" />} />
        <Route
          path="platform-merchants"
          element={
            <AdminRoute>
              <PlatformMerchants />
            </AdminRoute>
          }
        />
        <Route
          path="open-api"
          element={
            <AdminRoute>
              <OpenApiDocs />
            </AdminRoute>
          }
        />
        <Route
          path="api-debug"
          element={
            <AdminRoute>
              <ApiDebugger />
            </AdminRoute>
          }
        />
      </Route>
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  )
}

export default function App() {
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#1677ff',
          borderRadius: 6,
        },
      }}
    >
      <AntdApp>
        <AuthProvider>
          <BrowserRouter>
            <AppRoutes />
          </BrowserRouter>
        </AuthProvider>
      </AntdApp>
    </ConfigProvider>
  )
}