From 719e0ecf531a3ceb47cedd1f2a90693e2a36ca16 Mon Sep 17 00:00:00 2001
From: abearxiong <xiongxiao@xiongxiao.me>
Date: Tue, 24 Feb 2026 19:03:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E9=85=8D=E7=BD=AE=E5=92=8C=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E8=A3=85=E9=A5=B0=EF=BC=8C=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/auth/modules/BaseHeader.tsx |  6 ++--
 src/pages/auth/page.tsx               | 42 +++++++++++++++++++++++----
 src/pages/auth/store.ts               | 18 ++++++++++--
 3 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/pages/auth/modules/BaseHeader.tsx b/src/pages/auth/modules/BaseHeader.tsx
index be65de6..9b562e3 100644
--- a/src/pages/auth/modules/BaseHeader.tsx
+++ b/src/pages/auth/modules/BaseHeader.tsx
@@ -1,5 +1,5 @@
 import { Home, User, LogIn, LogOut } from 'lucide-react';
-import { Link } from '@tanstack/react-router'
+import { Link, useNavigate } from '@tanstack/react-router'
 import { useLayoutStore } from '../store';
 import { useShallow } from 'zustand/shallow';
 import { useMemo } from 'react';
@@ -9,12 +9,12 @@ export const BaseHeader = (props: { main?: React.ComponentType | null }) => {
     me: state.me,
     clearMe: state.clearMe,
   })));
-
+  const navigate = useNavigate();
   const meInfo = useMemo(() => {
     if (!store.me) {
       return (
         <button
-          onClick={() => window.open('/root/login/?redirect=' + encodeURIComponent(window.location.href), '_self')}
+          onClick={() => navigate({ to: '/login' })}
           className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
         >
           <LogIn className="w-4 h-4" />
diff --git a/src/pages/auth/page.tsx b/src/pages/auth/page.tsx
index 114ec94..3accab7 100644
--- a/src/pages/auth/page.tsx
+++ b/src/pages/auth/page.tsx
@@ -29,7 +29,8 @@ export const LoginComponent = ({ onLoginSuccess }: { onLoginSuccess: () => void
 }
 export const App = () => {
   const store = useLayoutStore(useShallow((state) => ({
-    init: state.init
+    init: state.init,
+    loginPageConfig: state.loginPageConfig,
   })));
   useEffect(() => {
     checkPluginLogin();
@@ -39,11 +40,42 @@ export const App = () => {
     await store.init()
     navigate({ to: '/' })
   };
-  return <div className='w-full h-full'>
-    <div className='w-md mx-auto flex mt-20'>
-      <LoginComponent onLoginSuccess={handleLoginSuccess} />
+  const { title, subtitle, footer } = store.loginPageConfig;
+  return (
+    <div className='w-full h-full relative overflow-hidden bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900'>
+      {/* 背景装饰 - 圆形光晕 */}
+      <div className='absolute top-1/4 -left-32 w-96 h-96 bg-purple-500/30 rounded-full blur-3xl'></div>
+      <div className='absolute bottom-1/4 -right-32 w-96 h-96 bg-blue-500/30 rounded-full blur-3xl'></div>
+      <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-indigo-500/20 rounded-full blur-3xl'></div>
+
+      {/* 背景装饰 - 网格图案 */}
+      <div className='absolute inset-0 opacity-[0.03] bg-[linear-gradient(rgba(255,255,255,0.1)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.1)_1px,transparent_1px)] bg-[size:50px_50px]'></div>
+
+      {/* 顶部装饰文字 */}
+      <div className='absolute top-10 left-0 right-0 text-center'>
+        <h1 className='text-4xl font-bold text-white/90 tracking-wider'>{title}</h1>
+        <p className='mt-2 text-white/50 text-sm tracking-widest'>{subtitle}</p>
+      </div>
+
+      {/* 登录卡片容器 */}
+      <div className='w-full h-full flex items-center justify-center p-8'>
+        <div className='relative'>
+          {/* 卡片外圈光效 */}
+          <div className='absolute -inset-1 bg-gradient-to-r from-purple-500 via-blue-500 to-indigo-500 rounded-2xl blur opacity-30'></div>
+
+          {/* 登录组件容器 */}
+          <div className='relative bg-slate-900/80 backdrop-blur-xl rounded-2xl border border-white/10 shadow-2xl overflow-hidden'>
+            <LoginComponent onLoginSuccess={handleLoginSuccess} />
+          </div>
+        </div>
+      </div>
+
+      {/* 底部装饰 */}
+      <div className='absolute bottom-6 left-0 right-0 text-center'>
+        <p className='text-white/30 text-xs'>{footer}</p>
+      </div>
     </div>
-  </div>
+  )
 }
 
 export default App;
\ No newline at end of file
diff --git a/src/pages/auth/store.ts b/src/pages/auth/store.ts
index 6539148..834dce4 100644
--- a/src/pages/auth/store.ts
+++ b/src/pages/auth/store.ts
@@ -27,6 +27,12 @@ export type LayoutStore = {
   init: () => Promise<void>;
   openLinkList: string[];
   setOpenLinkList: (openLinkList: string[]) => void;
+  loginPageConfig: {
+    title: string;
+    subtitle: string;
+    footer: string;
+  };
+  setLoginPageConfig: (config: Partial<LayoutStore['loginPageConfig']>) => void;
 };
 export const useLayoutStore = create<LayoutStore>((set, get) => ({
   open: false,
@@ -60,7 +66,7 @@ export const useLayoutStore = create<LayoutStore>((set, get) => ({
   isAdmin: false,
   setIsAdmin: (isAdmin) => set({ isAdmin }),
   init: async () => {
-    const token = await queryLogin.getToken();  
+    const token = await queryLogin.getToken();
     if (token) {
       set({ me: {} })
       const me = await queryLogin.getMe();
@@ -76,4 +82,12 @@ export const useLayoutStore = create<LayoutStore>((set, get) => ({
   },
   openLinkList: ['/login'],
   setOpenLinkList: (openLinkList) => set({ openLinkList }),
-}));
\ No newline at end of file
+  loginPageConfig: {
+    title: '可视化管理平台',
+    subtitle: '让工具和智能化触手可及',
+    footer: '欢迎使用可视化管理平台 · 连接您的工具',
+  },
+  setLoginPageConfig: (config) => set((state) => ({
+    loginPageConfig: { ...state.loginPageConfig, ...config },
+  })),
+}));