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 = (
<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="text-slate-600 dark:text-slate-300 text-sm font-medium">
<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-gray-900 dark:text-gray-200 text-sm font-medium">
{t('admin.common.loading')}
</div>
</div>

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

@ -178,7 +178,7 @@ const AdminLayout: FC<AdminLayoutProps> = () => {
</header>
<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">
<Suspense fallback={<LoadingSpinner />}>
<Suspense fallback={<LoadingSpinner fullScreen />}>
<Outlet />
</Suspense>
</div>

28
frontend/src/router.tsx
View file

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