feat(auth): enhance header links with dynamic navigation and add setLinks method to store

src/main.tsx

@@ -3,7 +3,7 @@ import { RouterProvider, createRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 import './index.css'
 import { getDynamicBasename } from './modules/basename'
-
+import './agents/index.ts';
 // Set up a Router instance
 const router = createRouter({
   routeTree,

src/pages/auth/modules/BaseHeader.tsx

@@ -51,18 +51,27 @@ export const BaseHeader = (props: { main?: React.ComponentType | null }) => {
   return (
     <>
       <div className="flex gap-2 text-lg w-full h-12 items-center justify-between bg-gray-200">
-        <div className='px-2'>
+        <div className='px-2 flex items-center gap-1'>
           {
             store.links.map(link => (
-              <Link
+              <div key={link.key || link.title}
-                key={link.key || link.title}
+                className="flex items-center justify-center gap-1 p-2 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
-                to={link.href}
+                onClick={() => {
-                className="px-3 py-1.5 text-sm text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                  if (!link.href) return;
+                  if (link.href.startsWith('http') || link.isRoot) {
+                    window.open(link.href, '_blank');
+                    return;
+                  }
+                  navigate({
+                    to: link.href
+                  })
+                }}
               >
-                {link.key === 'home' && <Home className="w-4 h-4 mr-1" />}
+                {link.key === 'home' && <Home className="w-4 h-4" />}
-                {link.icon && <span className="mr-1">{link.icon}</span>}
+                {link.icon && <>{link.icon}</>}
-                {link.title}
+                {!link.icon && link.title}
-              </Link>
+              </div>
+
             ))
           }
         </div>

src/pages/auth/store.ts

@@ -34,6 +34,7 @@ export type LayoutStore = {
   };
   setLoginPageConfig: (config: Partial<LayoutStore['loginPageConfig']>) => void;
   links: HeaderLink[];
+  setLinks: (links: HeaderLink[]) => void;
 };
 type HeaderLink = {
   title?: string;
@@ -41,6 +42,7 @@ type HeaderLink = {
   description?: string;
   icon?: React.ReactNode;
   key?: string;
+  isRoot?: boolean;
 };
 
 export const useLayoutStore = create<LayoutStore>((set, get) => ({
@@ -100,4 +102,5 @@ export const useLayoutStore = create<LayoutStore>((set, get) => ({
     loginPageConfig: { ...state.loginPageConfig, ...config },
   })),
   links: [{ title: '', href: '/', key: 'home' }],
+  setLinks: (links) => set({ links }),
 }));