feat(auth): refactor authentication flow and add login route

- Updated import path for QueryLoginBrowser in query.ts
- Enhanced AuthProvider to allow open links without requiring login
- Added clearMe function to reset user state and redirect to login
- Introduced BaseHeader component for consistent header layout
- Created LoginComponent to handle login success events
- Added App component to manage login state and navigation
- Defined new login route in routeTree and integrated with the application

src/pages/auth/index.tsx

@@ -2,6 +2,12 @@ import { useEffect } from "react"
 import { useLayoutStore } from "./store"
 import { useShallow } from "zustand/shallow"
 import { LogIn, LockKeyhole } from "lucide-react"
+export { BaseHeader } from './modules/BaseHeader'
+import { useMemo } from 'react';
+import { useLocation } from '@tanstack/react-router';
+const openLinkList = [
+  '/login'
+]
 
 type Props = {
   children?: React.ReactNode,
@@ -15,8 +21,14 @@ export const AuthProvider = ({ children, mustLogin }: Props) => {
   useEffect(() => {
     store.init()
   }, [])
+  const location = useLocation()
+  const isOpen = useMemo(() => {
+    console.log('location.pathname', location.pathname, openLinkList)
+    return openLinkList.some(item => location.pathname.startsWith(item))
+  }, [location.pathname])
+  console.log('AuthProvider', { location, isOpen, me: store.me })
   const loginUrl = '/root/login/?redirect=' + encodeURIComponent(window.location.href);
-  if (mustLogin && !store.me) {
+  if (mustLogin && !store.me && !isOpen) {
     return (
       <div className="w-full h-full min-h-screen flex items-center justify-center bg-background">
         <div className="flex flex-col items-center gap-6 p-10 rounded-2xl border border-border bg-card shadow-lg max-w-sm w-full mx-4">

src/pages/auth/modules/BaseHeader.tsx

@@ -0,0 +1,75 @@
+import { Home, User, LogIn, LogOut } from 'lucide-react';
+import { Link } from '@tanstack/react-router'
+import { useLayoutStore } from '../store';
+import { useShallow } from 'zustand/shallow';
+import { useMemo } from 'react';
+
+export const BaseHeader = (props: { main?: React.ComponentType | null }) => {
+  const store = useLayoutStore(useShallow(state => ({
+    me: state.me,
+    clearMe: state.clearMe,
+  })));
+
+  const meInfo = useMemo(() => {
+    if (!store.me) {
+      return (
+        <button
+          onClick={() => window.open('/root/login/?redirect=' + encodeURIComponent(window.location.href), '_self')}
+          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" />
+          <span>去登录</span>
+        </button>
+      )
+    }
+    return (
+      <div className="flex items-center gap-3">
+        {store.me.avatar && (
+          <img
+            src={store.me.avatar}
+            alt="Avatar"
+            className="w-8 h-8 rounded-full object-cover"
+          />
+        )}
+        {!store.me.avatar && (
+          <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+            <User className="w-4 h-4 text-gray-500" />
+          </div>
+        )}
+        <span className="font-medium text-gray-700">{store.me?.username}</span>
+        <button
+          onClick={() => store.clearMe?.()}
+          className="flex items-center gap-1 px-2 py-1 text-sm text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors cursor-pointer"
+          title="退出登录"
+        >
+          <LogOut className="w-4 h-4" />
+        </button>
+      </div>
+    )
+  }, [store.me, store.clearMe])
+  return (
+    <>
+      <div className="flex gap-2 text-lg w-full h-12 items-center justify-between">
+        <div className='px-2'>
+          <Link
+            to="/"
+            activeProps={{
+              className: 'font-bold',
+            }}
+            activeOptions={{ exact: true }}
+          >
+            <Home className='w-5 h-5' />
+          </Link>
+        </div>
+        <div className='mr-4'>
+          {meInfo}
+        </div>
+      </div>
+      <hr />
+    </>
+  )
+}
+
+export const LayoutMain = () => {
+  return <BaseHeader />
+}

src/pages/auth/page.tsx

@@ -0,0 +1,49 @@
+import { useContextKey } from '@kevisual/context';
+import '@kevisual/kv-login';
+import { checkPluginLogin } from '@kevisual/kv-login'
+import { useEffect } from 'react';
+import { useLayoutStore } from './store';
+import { useShallow } from 'zustand/shallow';
+import { useNavigate } from '@tanstack/react-router';
+
+export const LoginComponent = ({ onLoginSuccess }: { onLoginSuccess: () => void }) => {
+  useEffect(() => {
+    // 监听登录成功事件
+    const handleLoginSuccess = () => {
+      console.log('监听到登录成功事件，关闭弹窗');
+      onLoginSuccess();
+    };
+    const loginEmitter = useContextKey('login-emitter')
+    console.log('KvLogin Types:', loginEmitter);
+
+    loginEmitter.on('login-success', handleLoginSuccess);
+
+    // 清理监听器
+    return () => {
+      loginEmitter.off('login-success', handleLoginSuccess);
+    };
+  }, [onLoginSuccess]);
+
+  // @ts-ignore
+  return (<kv-login></kv-login>)
+}
+export const App = () => {
+  const store = useLayoutStore(useShallow((state) => ({
+    init: state.init
+  })));
+  useEffect(() => {
+    checkPluginLogin();
+  }, []);
+  const navigate = useNavigate();
+  const handleLoginSuccess = async () => {
+    await store.init()
+    navigate({ to: '/' })
+  };
+  return <div className='w-full h-full'>
+    <div className='w-md mx-auto flex mt-20'>
+      <LoginComponent onLoginSuccess={handleLoginSuccess} />
+    </div>
+  </div>
+}
+
+export default App;

src/pages/auth/store.ts

@@ -19,11 +19,14 @@ export type LayoutStore = {
   setOpenUser: (openUser: boolean) => void;
   me?: UserInfo;
   setMe: (me: UserInfo) => void;
+  clearMe: () => void;
   getMe: () => Promise<void>;
   switchOrg: (username?: string) => Promise<void>;
   isAdmin: boolean;
   setIsAdmin: (isAdmin: boolean) => void
   init: () => Promise<void>;
+  openLinkList: string[];
+  setOpenLinkList: (openLinkList: string[]) => void;
 };
 export const useLayoutStore = create<LayoutStore>((set, get) => ({
   open: false,
@@ -32,6 +35,10 @@ export const useLayoutStore = create<LayoutStore>((set, get) => ({
   setOpenUser: (openUser) => set({ openUser }),
   me: undefined,
   setMe: (me) => set({ me }),
+  clearMe: () => {
+    set({ me: undefined, isAdmin: false });
+    window.location.href = '/root/login/?redirect=' + encodeURIComponent(window.location.href);
+  },
   getMe: async () => {
     const res = await queryLogin.getMe();
     if (res.code === 200) {
@@ -61,5 +68,7 @@ export const useLayoutStore = create<LayoutStore>((set, get) => ({
         set({ isAdmin: user.orgs?.includes?.('admin') || false });
       }
     }
-  }
+  },
+  openLinkList: ['/login'],
+  setOpenLinkList: (openLinkList) => set({ openLinkList }),
 }));