refactor: router

src/app.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { RouterProvider } from 'react-router-dom'
-import { createRouter } from './router'
+import { router } from './router'
 import { RainbowKitProvider, getDefaultConfig } from '@rainbow-me/rainbowkit'
 import { WagmiProvider } from 'wagmi'
 import '@rainbow-me/rainbowkit/styles.css'
@@ -30,7 +30,7 @@ export default function App() {
       <WagmiProvider config={config}>
         <QueryClientProvider client={queryClient}>
           <RainbowKitProvider>
-            <RouterProvider router={createRouter()} />
+            <RouterProvider router={router} />
             <ReactQueryDevtools />
           </RainbowKitProvider>
         </QueryClientProvider>

src/components/layout/LandingLayout.tsx

@@ -4,7 +4,6 @@ import { Github, Heart, Twitter } from 'lucide-react'
 import { motion } from 'framer-motion'
 import { Link } from 'react-router-dom'
 import { InteractiveHoverButton } from '../ui/interactive-hover-button'
-import { getNavItems } from '@/constants/data'
 
 const socialLinks = [
   {
@@ -88,7 +87,7 @@ const LandingLayout = ({ children }: PropsWithChildren) => {
           ))}
         </nav>
 
-        <Link className="flex items-center" to={getNavItems().find((item) => item.title === 'Login')!.href}>
+        <Link className="flex items-center" to="/login">
           <InteractiveHoverButton>Go to app</InteractiveHoverButton>
         </Link>
       </header>

src/components/layout/shared/BaseLayout.tsx

@@ -4,45 +4,54 @@ import Header from './Header'
 import Sidebar from './Sidebar'
 import Title from './Title'
 import { useInitState } from '../hooks/useInitState'
+import { Helmet } from 'react-helmet'
+import { BRAND_NAME } from '@/lib/config'
 
 interface IBaseLayout {
   children: React.ReactNode
   mode?: 'default'
+  title?: string
+  description?: string
 }
 
-export default function BaseLayout({ children, mode = 'default' }: IBaseLayout) {
+export default function BaseLayout({ children, mode = 'default', title, description }: IBaseLayout) {
   useInitState()
-
   return (
-    <div className="grid h-screen w-full overflow-hidden md:grid-cols-[180px_1fr] lg:grid-cols-[240px_1fr]">
-      <div className="hidden border-r md:block">
-        <div className="flex h-full max-h-screen flex-col gap-2">
-          <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
-            <Title />
-          </div>
-          <div className="mt-6 flex-1">
-            <Sidebar />
+    <>
+      <Helmet>
+        <title>{title ? `${title} - ${BRAND_NAME}` : BRAND_NAME}</title>
+        {description && <meta name="description" content={description} />}
+      </Helmet>
+      <div className="grid h-screen w-full overflow-hidden md:grid-cols-[180px_1fr] lg:grid-cols-[240px_1fr]">
+        <div className="hidden border-r md:block">
+          <div className="flex h-full max-h-screen flex-col gap-2">
+            <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+              <Title />
+            </div>
+            <div className="mt-6 flex-1">
+              <Sidebar />
+            </div>
           </div>
         </div>
-      </div>
-      <div className="flex flex-1 flex-col overflow-hidden">
-        <Header />
-        <main
-          className="relative flex flex-1 flex-col gap-4 overflow-auto scroll-smooth p-2 lg:gap-6 lg:p-5"
-          id="scrollRef"
-        >
-          <div className="pointer-events-none fixed bottom-0 left-[220px] right-0 top-14 z-[-1] overflow-hidden md:left-[220px] lg:left-[280px] lg:top-[60px]">
-            <Meteors number={20} />
-            <div className="absolute bottom-0 right-0">
-              <img src="/main-background.svg" alt="background" className="h-auto w-[456px] opacity-30" />
+        <div className="flex flex-1 flex-col overflow-hidden">
+          <Header />
+          <main
+            className="relative flex flex-1 flex-col gap-4 overflow-auto scroll-smooth p-2 lg:gap-6 lg:p-5"
+            id="scrollRef"
+          >
+            <div className="pointer-events-none fixed bottom-0 left-[220px] right-0 top-14 z-[-1] overflow-hidden md:left-[220px] lg:left-[280px] lg:top-[60px]">
+              <Meteors number={20} />
+              <div className="absolute bottom-0 right-0">
+                <img src="/main-background.svg" alt="background" className="h-auto w-[456px] opacity-30" />
+              </div>
             </div>
-          </div>
-          <div className="relative z-10">
-            <div className="mx-auto max-w-7xl px-4 py-4 lg:px-12">{children}</div>
-          </div>
-        </main>
-        <Toaster />
+            <div className="relative z-10">
+              <div className="mx-auto max-w-7xl px-4 py-4 lg:px-12">{children}</div>
+            </div>
+          </main>
+          <Toaster />
+        </div>
       </div>
-    </div>
+    </>
   )
 }

src/components/layout/shared/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { Link, useLocation } from 'react-router-dom'
-import { getNavItems } from '@/constants/data'
+import { getNavItems } from '@/constants/navigation'
 import { Icons } from '@/components/icons'
 import { cn } from '@/lib/utils'
 import { ChevronDown, ChevronRight, Menu } from 'lucide-react'

src/constants/data.ts

@@ -1,5 +1,3 @@
-import { getAppearances } from '@/lib/appearances'
-import { NavItem } from '@/types'
 import { SdkCtorOptions, SDK } from 'youbet-sdk'
 import {
   polygon,
@@ -10,139 +8,6 @@ import {
   mantleSepoliaTestnet,
   baseSepolia,
 } from 'viem/chains'
-import { UserPermission } from '@/store'
-
-export const getNavItems = (userPermission?: UserPermission): NavItem[] => {
-  const appearances = getAppearances()
-
-  const navItems: NavItem[] = [
-    {
-      title: 'Landing',
-      href: '/',
-      icon: 'home',
-      component: 'landing',
-      layout: 'landing',
-      hideInMenu: true,
-    },
-    {
-      title: 'Dashboard',
-      href: '/dashboard',
-      icon: 'home',
-      component: 'dashboard',
-      layout: 'dashboard',
-    },
-    {
-      title: 'Projects',
-      href: '/projects',
-      icon: 'package',
-      component: 'project',
-      layout: 'dashboard',
-      children: [
-        {
-          title: 'Project Detail',
-          href: '/projects/:project',
-          component: 'projectDetail',
-          layout: 'dashboard',
-          hideInMenu: true,
-        },
-      ],
-    },
-    {
-      title: 'MyTasks',
-      href: '/mytasks',
-      icon: 'listChecks',
-      component: 'mytask',
-      layout: 'dashboard',
-    },
-    {
-      title: 'Tasks',
-      href: '/tasks',
-      icon: 'layoutListIcon',
-      component: 'tasks',
-      layout: 'dashboard',
-    },
-    {
-      title: 'MyRewards',
-      href: '/myrewards',
-      icon: 'circleDollarSignIcon',
-      component: 'myrewards',
-      layout: 'dashboard',
-    },
-    {
-      title: 'Login',
-      href: '/login',
-      component: 'login',
-      description: 'Authentication forms built using the components.',
-      hideInMenu: true,
-    },
-    {
-      title: 'callback',
-      href: '/auth/github/callback',
-      component: 'callback',
-      description: 'Redirect route.',
-      hideInMenu: true,
-    },
-    {
-      title: 'Profile',
-      href: '/profile',
-      icon: 'profile',
-      component: 'profile',
-      description: 'My Profile.',
-      layout: 'dashboard',
-    },
-    {
-      title: 'TaskDetail',
-      href: '/task/:githubId',
-      component: 'taskDetail',
-      description: 'task detail.',
-      layout: 'dashboard',
-      hideInMenu: true,
-    },
-    {
-      title: 'Admin',
-      href: '#',
-      icon: 'settings',
-      component: 'error',
-      layout: 'dashboard',
-      hideInMenu: !userPermission,
-      children: [
-        {
-          title: 'Period',
-          href: '/admin/period',
-          icon: 'period',
-          component: 'periodAdmin',
-          layout: 'dashboard',
-          hideInMenu: userPermission !== UserPermission.PullRequest && userPermission !== UserPermission.All,
-        },
-        {
-          title: 'Task Apply',
-          href: '/admin/task-apply',
-          icon: 'clipboardList',
-          component: 'taskApplyAdmin',
-          layout: 'dashboard',
-          hideInMenu: userPermission !== UserPermission.TaskApplies && userPermission !== UserPermission.All,
-        },
-        {
-          title: 'Completed Task',
-          href: '/admin/completed-task',
-          icon: 'listChecks',
-          component: 'completedTaskAdmin',
-          layout: 'dashboard',
-          hideInMenu: userPermission !== UserPermission.TaskApplies && userPermission !== UserPermission.All,
-        },
-      ],
-    },
-  ]
-
-  const filteredNavItems = navItems.filter((item) => !item.disabled)
-
-  return filteredNavItems
-}
-
-export const getSafeHrefByTitle = (title: string): string => {
-  const item = getNavItems().find((item) => item.title === title)
-  return item?.href as string
-}
 
 export const DEFAULT_PAGINATION_LIMIT = 4
 

src/constants/navigation.ts

@@ -0,0 +1,102 @@
+import { UserPermission } from '@/store'
+import { NavItem } from '@/types'
+
+export const getNavItems = (userPermission?: UserPermission): NavItem[] => {
+  const navItems: NavItem[] = [
+    {
+      title: 'Dashboard',
+      href: '/dashboard',
+      icon: 'home',
+      component: 'dashboard', // 保留兼容性
+      layout: 'dashboard', // 保留兼容性
+    },
+    {
+      title: 'Projects',
+      href: '/projects',
+      icon: 'package',
+      component: 'project',
+      layout: 'dashboard',
+      children: [
+        {
+          title: 'Project Detail',
+          href: '/projects/:project',
+          component: 'projectDetail',
+          layout: 'dashboard',
+          hideInMenu: true,
+        },
+      ],
+    },
+    {
+      title: 'MyTasks',
+      href: '/mytasks',
+      icon: 'listChecks',
+      component: 'mytask',
+      layout: 'dashboard',
+    },
+    {
+      title: 'Tasks',
+      href: '/tasks',
+      icon: 'layoutListIcon',
+      component: 'tasks',
+      layout: 'dashboard',
+    },
+    {
+      title: 'MyRewards',
+      href: '/myrewards',
+      icon: 'circleDollarSignIcon',
+      component: 'myrewards',
+      layout: 'dashboard',
+    },
+    {
+      title: 'Profile',
+      href: '/profile',
+      icon: 'profile',
+      component: 'profile',
+      description: 'My Profile.',
+      layout: 'dashboard',
+    },
+    {
+      title: 'Admin',
+      href: '#',
+      icon: 'settings',
+      component: 'error',
+      layout: 'dashboard',
+      hideInMenu: !userPermission,
+      children: [
+        {
+          title: 'Period',
+          href: '/admin/period',
+          icon: 'period',
+          component: 'periodAdmin',
+          layout: 'dashboard',
+          hideInMenu: userPermission !== UserPermission.PullRequest && userPermission !== UserPermission.All,
+        },
+        {
+          title: 'Task Apply',
+          href: '/admin/task-apply',
+          icon: 'clipboardList',
+          component: 'taskApplyAdmin',
+          layout: 'dashboard',
+          hideInMenu: userPermission !== UserPermission.TaskApplies && userPermission !== UserPermission.All,
+        },
+        {
+          title: 'Completed Task',
+          href: '/admin/completed-task',
+          icon: 'listChecks',
+          component: 'completedTaskAdmin',
+          layout: 'dashboard',
+          hideInMenu: userPermission !== UserPermission.TaskApplies && userPermission !== UserPermission.All,
+        },
+      ],
+    },
+  ]
+
+  const filteredNavItems = navItems.filter((item) => !item.disabled)
+
+  return filteredNavItems
+}
+
+export const getSafeHrefByTitle = (title: string): string => {
+  const item = getNavItems().find((item) => item.title === title)
+  return item?.href as string
+}

src/pages/login/index.tsx

@@ -4,7 +4,7 @@ import { buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 import { useEffect } from 'react'
 import { BRAND_LOGO, BRAND_NAME } from '@/lib/config'
-import { getSafeHrefByTitle } from '@/constants/data'
+import { getSafeHrefByTitle } from '@/constants/navigation'
 import { useToken } from '@/store'
 
 export default function Login() {