starset-mirror/tss-rocks
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

[chore/frontend] load on the center of the screen

Browse source
This commit is contained in:
CDN 2025-02-22 00:58:00 +08:00
parent 7a33038af8
commit 2c3e238e9a
Signed by: CDN
GPG key ID: 0C656827F9F80080
3 changed files with 17 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/LoadingSpinner.tsx
View file

@ -9,8 +9,8 @@ export default function LoadingSpinner({ fullScreen = false }: LoadingSpinnerPro
const content = ( const content = (
<div className="flex flex-col items-center gap-3"> <div className="flex flex-col items-center gap-3">
<div className="w-10 h-10 border-4 border-indigo-200 dark:border-indigo-900 border-t-indigo-500 dark:border-t-indigo-400 rounded-full animate-spin" /> <div className="w-10 h-10 border-4 border-gray-200 dark:border-gray-700 border-t-gray-900 dark:border-t-gray-200 rounded-full animate-spin" />
<div className="text-slate-600 dark:text-slate-300 text-sm font-medium"> <div className="text-gray-900 dark:text-gray-200 text-sm font-medium">
{t('admin.common.loading')} {t('admin.common.loading')}
</div> </div>
</div> </div>

2
frontend/src/pages/admin/layout/AdminLayout.tsx
View file

@ -178,7 +178,7 @@ const AdminLayout: FC<AdminLayoutProps> = () => {
</header> </header>
<div className="flex-1 p-6"> <div className="flex-1 p-6">
<div className="h-full bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200/60 dark:border-slate-700/60"> <div className="h-full bg-white dark:bg-slate-800 rounded-lg shadow-sm border border-slate-200/60 dark:border-slate-700/60">
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<Outlet /> <Outlet />
</Suspense> </Suspense>
</div> </div>

28
frontend/src/router.tsx
View file

@ -56,7 +56,7 @@ const LoginRoute = () => {
} }
return ( return (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<Login /> <Login />
</Suspense> </Suspense>
); );
@ -65,7 +65,7 @@ const LoginRoute = () => {
// 页面布局组件 // 页面布局组件
const PageLayout = () => ( const PageLayout = () => (
<div className="flex flex-col min-h-screen bg-white dark:bg-neutral-900 text-gray-900 dark:text-gray-100"> <div className="flex flex-col min-h-screen bg-white dark:bg-neutral-900 text-gray-900 dark:text-gray-100">
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<Header /> <Header />
<div className="w-[95%] mx-auto"> <div className="w-[95%] mx-auto">
<div className="border-t-2 border-gray-900 dark:border-gray-100 w-full mb-2" /> <div className="border-t-2 border-gray-900 dark:border-gray-100 w-full mb-2" />
@ -82,7 +82,7 @@ const router = createBrowserRouter([
{ {
path: '/', path: '/',
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<PageLayout /> <PageLayout />
</Suspense> </Suspense>
), ),
@ -90,7 +90,7 @@ const router = createBrowserRouter([
{ {
index: true, index: true,
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<Home /> <Home />
</Suspense> </Suspense>
), ),
@ -98,7 +98,7 @@ const router = createBrowserRouter([
{ {
path: 'daily', path: 'daily',
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<Daily /> <Daily />
</Suspense> </Suspense>
), ),
@ -106,7 +106,7 @@ const router = createBrowserRouter([
{ {
path: 'posts/:articleId', path: 'posts/:articleId',
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<Article /> <Article />
</Suspense> </Suspense>
), ),
@ -133,7 +133,7 @@ const router = createBrowserRouter([
{ {
index: true, index: true,
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<Dashboard /> <Dashboard />
</Suspense> </Suspense>
), ),
@ -141,7 +141,7 @@ const router = createBrowserRouter([
{ {
path: 'posts', path: 'posts',
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<PostsManagement /> <PostsManagement />
</Suspense> </Suspense>
), ),
@ -149,7 +149,7 @@ const router = createBrowserRouter([
{ {
path: 'daily', path: 'daily',
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<DailyManagement /> <DailyManagement />
</Suspense> </Suspense>
), ),
@ -157,7 +157,7 @@ const router = createBrowserRouter([
{ {
path: 'medias', path: 'medias',
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<MediasManagement /> <MediasManagement />
</Suspense> </Suspense>
), ),
@ -165,7 +165,7 @@ const router = createBrowserRouter([
{ {
path: 'categories', path: 'categories',
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<CategoriesManagement /> <CategoriesManagement />
</Suspense> </Suspense>
), ),
@ -173,7 +173,7 @@ const router = createBrowserRouter([
{ {
path: 'users', path: 'users',
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<UsersManagement /> <UsersManagement />
</Suspense> </Suspense>
), ),
@ -181,7 +181,7 @@ const router = createBrowserRouter([
{ {
path: 'contributors', path: 'contributors',
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<ContributorsManagement /> <ContributorsManagement />
</Suspense> </Suspense>
), ),
@ -189,7 +189,7 @@ const router = createBrowserRouter([
{ {
path: 'settings', path: 'settings',
element: ( element: (
<Suspense fallback={<LoadingSpinner />}> <Suspense fallback={<LoadingSpinner fullScreen />}>
<Settings /> <Settings />
</Suspense> </Suspense>
), ),