feat(frontend): add a dedicated 403 forbidden page

Show /403 instead of toasting or staying on the denied screen when
the API returns 403 or a non-admin opens an admin route.

frontend/app/403/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { ForbiddenPage } from '@/components/layout/forbidden-page';
+
+export default function ForbiddenRoutePage() {
+  return <ForbiddenPage />;
+}

frontend/app/forbidden.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { ForbiddenPage } from '@/components/layout/forbidden-page';
+
+/** Next.js convention: rendered when forbidden() is called. */
+export default function Forbidden() {
+  return <ForbiddenPage />;
+}

frontend/components/auth/require-auth.tsx

@@ -1,11 +1,10 @@
 'use client';
 
-import type { ReactNode } from 'react';
+import { useEffect, type ReactNode } from 'react';
+import { useRouter } from 'next/navigation';
 import { Loader2 } from 'lucide-react';
 
-import { ErrorPage } from '@/components/layout/error';
 import { useUser } from '@/contexts/user-context';
-import { useTranslations } from 'next-intl';
 
 type RequireAuthProps = {
   children: ReactNode;
@@ -50,7 +49,13 @@ type RequireAdminAuthProps = {
 /** Guards admin routes after the shared shell has rendered. */
 export function RequireAdminAuth({ children }: RequireAdminAuthProps) {
   const { user, loading } = useUser();
-  const t = useTranslations('auth.requireAuth');
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && user && !user.is_admin) {
+      router.replace('/403');
+    }
+  }, [loading, user, router]);
 
   if (loading) {
     return (
@@ -61,7 +66,7 @@ export function RequireAdminAuth({ children }: RequireAdminAuthProps) {
   }
 
   if (!user?.is_admin) {
-    return <ErrorPage title={t('accessDenied')} message={t('noPermission')} />;
+    return null;
   }
 
   return <>{children}</>;

frontend/components/layout/forbidden-page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { motion } from 'motion/react';
+import { ArrowLeft, Home } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useTranslations } from 'next-intl';
+
+/** Full-page 403 UI, used by /403 and Next.js forbidden(). */
+export function ForbiddenPage() {
+  const router = useRouter();
+  const t = useTranslations('forbidden');
+
+  return (
+    <div className='relative min-h-screen w-full flex flex-col items-center justify-center bg-background overflow-hidden selection:bg-primary/20'>
+      <div className='absolute inset-0 -z-10 overflow-hidden'>
+        <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-[500px] bg-primary/20 rounded-full blur-[120px] opacity-20 animate-pulse' />
+      </div>
+
+      <div className='container px-6 flex flex-col items-center text-center z-10'>
+        <motion.div
+          initial={{ opacity: 0, scale: 0.95 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.8, ease: 'easeOut' }}
+          className='relative mb-6'
+        >
+          <h1 className='text-[12rem] md:text-[16rem] font-bold leading-none tracking-tighter text-transparent bg-clip-text bg-gradient-to-b from-foreground/10 to-foreground/5 select-none'>
+            403
+          </h1>
+          <div className='absolute inset-0 flex items-center justify-center'>
+            <p className='text-2xl font-medium tracking-[0.2em] text-foreground/80 uppercase'>
+              {t('label')}
+            </p>
+          </div>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.8 }}
+          className='flex flex-col gap-8'
+        >
+          <p className='text-muted-foreground max-w-[400px] mx-auto text-sm leading-relaxed'>
+            {t('description')}
+          </p>
+
+          <div className='flex justify-center gap-4'>
+            <Button
+              variant='secondary'
+              size='sm'
+              onClick={() => router.back()}
+              className='rounded-full w-24 text-xs border-foreground/10 hover:bg-foreground/10 transition-all duration-300'
+            >
+              <ArrowLeft className='size-3 opacity-70' />
+              {t('previousPage')}
+            </Button>
+
+            <Link href='/home'>
+              <Button
+                variant='default'
+                size='sm'
+                className='rounded-full w-24 text-xs hover:bg-primary/80 transition-all duration-300'
+              >
+                <Home className='size-3' />
+                {t('home')}
+              </Button>
+            </Link>
+          </div>
+        </motion.div>
+      </div>
+
+      <p className='absolute bottom-8 text-xs text-muted-foreground/30 font-mono'>
+        ERR_HTTP_FORBIDDEN
+      </p>
+    </div>
+  );
+}

frontend/components/providers/title-updater.tsx

@@ -27,6 +27,8 @@ export function SiteTitleUpdater() {
       suffix = ` - ${t('admin')}`;
     } else if (pathname === '/home') {
       suffix = ` - ${t('dashboard')}`;
+    } else if (pathname === '/403') {
+      suffix = ` - ${t('forbidden')}`;
     } else if (pathname === '/') {
       suffix = '';
     }

frontend/lib/services/core/api-client.ts

@@ -161,10 +161,15 @@ apiClient.interceptors.response.use(
       return Promise.reject(new UnauthorizedError(message));
     }
 
-    /* 403：已登录但权限不足，留在当前页。 */
+    /* 403：已登录但权限不足，进入独立 403 页，不清 cookie。 */
     if (error.response?.status === 403) {
       const message = error.response.data?.error_msg || '权限不足';
-      toast.error(message, { id: 'forbidden-error' });
+      if (
+        typeof window !== 'undefined' &&
+        window.location.pathname !== '/403'
+      ) {
+        window.location.replace('/403');
+      }
       return Promise.reject(
         new ForbiddenError(
           message,

frontend/messages/en.json

@@ -1919,12 +1919,19 @@
     "previousPage": "Previous page",
     "home": "Home"
   },
+  "forbidden": {
+    "label": "Forbidden",
+    "description": "You are signed in, but you do not have permission to access this resource. Ask an administrator if you need access.",
+    "previousPage": "Previous page",
+    "home": "Home"
+  },
   "providers": {
     "titleUpdater": {
       "login": "Login",
       "register": "Register",
       "admin": "Admin",
-      "dashboard": "Dashboard"
+      "dashboard": "Dashboard",
+      "forbidden": "Forbidden"
     }
   },
   "metadata": {

frontend/messages/zh-CN.json

@@ -1919,12 +1919,19 @@
     "previousPage": "上一页",
     "home": "首页"
   },
+  "forbidden": {
+    "label": "Forbidden",
+    "description": "您已登录，但没有访问该资源的权限。如需开通，请联系管理员。",
+    "previousPage": "上一页",
+    "home": "首页"
+  },
   "providers": {
     "titleUpdater": {
       "login": "登录",
       "register": "注册",
       "admin": "后台管理",
-      "dashboard": "控制台"
+      "dashboard": "控制台",
+      "forbidden": "权限不足"
     }
   },
   "metadata": {

frontend/proxy.ts

@@ -120,6 +120,7 @@ export function proxy(request: NextRequest) {
     '/privacy',
     '/terms',
     '/icon',
+    '/403',
   ];
   const publicPrefixes = ['/docs/', '/epay/'];