fix: polish playground routing and bundle splits

frontend/src/App.tsx

@@ -1,36 +1,48 @@
+import { Suspense, lazy } from 'react'
+import { Spin } from 'antd'
 import { Routes, Route, Navigate } from 'react-router-dom'
 import { useAuthStore } from './stores/auth'
 import Login from './pages/Login/Login'
-import Dashboard from './pages/Dashboard/Dashboard'
-import Users from './pages/Users/Users'
-import DataSources from './pages/DataSources/DataSources'
-import DataList from './pages/DataList/DataList'
-import Earth from './pages/Earth/Earth'
-import Settings from './pages/Settings/Settings'
-import BGP from './pages/BGP/BGP'
-import Playground from './pages/Playground/Playground'
+
+const Dashboard = lazy(() => import('./pages/Dashboard/Dashboard'))
+const Users = lazy(() => import('./pages/Users/Users'))
+const DataSources = lazy(() => import('./pages/DataSources/DataSources'))
+const DataList = lazy(() => import('./pages/DataList/DataList'))
+const Earth = lazy(() => import('./pages/Earth/Earth'))
+const Settings = lazy(() => import('./pages/Settings/Settings'))
+const BGP = lazy(() => import('./pages/BGP/BGP'))
+const Playground = lazy(() => import('./pages/Playground/Playground'))
 
 function App() {
   const { token } = useAuthStore()
-  const isEarthPage = window.location.pathname === '/earth'
+  const publicPaths = new Set(['/', '/earth'])
+  const isPublicRoute = publicPaths.has(window.location.pathname)
 
-  if (!token && !isEarthPage) {
+  if (!token && !isPublicRoute) {
     return <Login />
   }
 
   return (
-    <Routes>
-      <Route path="/admin" element={<Dashboard />} />
-      <Route path="/" element={<Navigate to="/earth" replace />} />
-      <Route path="/earth" element={<Earth />} />
-      <Route path="/users" element={<Users />} />
-      <Route path="/datasources" element={<DataSources />} />
-      <Route path="/data" element={<DataList />} />
-      <Route path="/bgp" element={<BGP />} />
-      <Route path="/playground" element={<Playground />} />
-      <Route path="/settings" element={<Settings />} />
-      <Route path="*" element={<Navigate to="/admin" replace />} />
-    </Routes>
+    <Suspense
+      fallback={(
+        <div className="app-route-loading">
+          <Spin size="large" />
+        </div>
+      )}
+    >
+      <Routes>
+        <Route path="/admin" element={<Dashboard />} />
+        <Route path="/" element={<Navigate to="/earth" replace />} />
+        <Route path="/earth" element={<Earth />} />
+        <Route path="/users" element={<Users />} />
+        <Route path="/datasources" element={<DataSources />} />
+        <Route path="/data" element={<DataList />} />
+        <Route path="/bgp" element={<BGP />} />
+        <Route path="/playground" element={<Playground />} />
+        <Route path="/settings" element={<Settings />} />
+        <Route path="*" element={<Navigate to="/admin" replace />} />
+      </Routes>
+    </Suspense>
   )
 }
 

frontend/src/index.css

@@ -14,6 +14,13 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 }
 
+.app-route-loading {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .login-container {
   min-height: 100vh;
   display: flex;
@@ -472,7 +479,7 @@ body {
 }
 
 .playground-help--expanded {
-  flex: 1 0 auto;
+  flex: 0 0 auto;
 }
 
 .playground-help.ant-collapse {
@@ -493,38 +500,21 @@ body {
 }
 
 .playground-help .ant-collapse-content {
-  flex: 1 1 auto;
+  flex: 0 0 auto;
   min-height: 0;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .playground-help .ant-collapse-content-box {
-  height: 100%;
-  overflow: auto;
-  scrollbar-width: thin;
-  scrollbar-color: rgba(148, 163, 184, 0.88) transparent;
+  height: auto;
+  overflow: visible;
   padding: 12px 16px 16px !important;
 }
 
-.playground-help .ant-collapse-content-box::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.playground-help .ant-collapse-content-box::-webkit-scrollbar-thumb {
-  background: rgba(148, 163, 184, 0.82);
-  border-radius: 999px;
-  border: 2px solid transparent;
-  background-clip: padding-box;
-}
-
-.playground-help .ant-collapse-content-box::-webkit-scrollbar-thumb:hover {
-  background: rgba(100, 116, 139, 0.9);
-  background-clip: padding-box;
-}
-
-.playground-help .ant-collapse-content-box::-webkit-scrollbar-track {
-  background: transparent;
+.playground-help__content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 
 .playground-note.ant-alert {

frontend/src/pages/Playground/Playground.tsx

@@ -76,7 +76,6 @@ function Playground() {
       if (cached) {
         try {
           setProviderStatus(JSON.parse(cached) as AIProviderStatus)
-          return
         } catch {
           sessionStorage.removeItem(PLAYGROUND_PROVIDER_STATUS_STORAGE_KEY)
         }
@@ -207,22 +206,24 @@ function Playground() {
                     key: 'help',
                     label: '测试说明',
                     children: (
-                      <Alert
-                        type="info"
-                        showIcon
-                        className="playground-note"
-                        message="用于验证 AI Provider 是否可用，以及 backend -> aiprovider 链路是否通畅。"
-                        description={(
-                          <span>
-                            当前链路：
-                            <Text code>frontend /playground</Text>
-                            {' -> '}
-                            <Text code>backend /api/v1/ai/*</Text>
-                            {' -> '}
-                            <Text code>aiprovider /v1/*</Text>
-                          </span>
-                        )}
-                      />
+                      <div className="playground-help__content">
+                        <Alert
+                          type="info"
+                          showIcon
+                          className="playground-note"
+                          message="用于验证 AI Provider 是否可用，以及 backend -> aiprovider 链路是否通畅。"
+                          description={(
+                            <span>
+                              当前链路：
+                              <Text code>frontend /playground</Text>
+                              {' -> '}
+                              <Text code>backend /api/v1/ai/*</Text>
+                              {' -> '}
+                              <Text code>aiprovider /v1/*</Text>
+                            </span>
+                          )}
+                        />
+                      </div>
                     ),
                   },
                 ]}