feat(i18n): 添加多语言支持，包括中英文翻译和语言切换功能

package.json

@@ -42,12 +42,14 @@
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
     "date-fns": "^4.1.0",
+    "i18next": "^26.2.0",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.545.0",
     "react": "^19.2.0",
     "react-day-picker": "9.11.1",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.64.0",
+    "react-i18next": "^17.0.8",
     "react-top-loading-bar": "^3.0.2",
     "recharts": "^3.2.1",
     "sonner": "^2.0.7",

src/components/coming-soon.tsx

@@ -1,14 +1,16 @@
 import { Telescope } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 
 export function ComingSoon() {
+  const { t } = useTranslation()
   return (
     <div className='h-svh'>
       <div className='m-auto flex h-full w-full flex-col items-center justify-center gap-2'>
         <Telescope size={72} />
-        <h1 className='text-4xl leading-tight font-bold'>Coming Soon!</h1>
+        <h1 className='text-4xl leading-tight font-bold'>{t('comingSoon')}</h1>
         <p className='text-muted-foreground text-center'>
-          This page has not been created yet. <br />
-          Stay tuned though!
+          {t('comingSoonDesc')} <br />
+          {t('comingSoonStayTuned')}
         </p>
       </div>
     </div>

src/components/command-menu.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { useNavigate } from '@tanstack/react-router'
 import { ArrowRight, ChevronRight, Laptop, Moon, Sun } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
 import { useSearch } from '@/context/search-provider'
 import { useTheme } from '@/context/theme-provider'
 import {
@@ -12,13 +13,15 @@ import {
   CommandList,
   CommandSeparator,
 } from '@/components/ui/command'
-import { sidebarData } from './layout/data/sidebar-data'
+import { useSidebarData } from './layout/data/use-sidebar-data'
 import { ScrollArea } from './ui/scroll-area'
 
 export function CommandMenu() {
   const navigate = useNavigate()
   const { setTheme } = useTheme()
   const { open, setOpen } = useSearch()
+  const { t } = useTranslation()
+  const sidebarData = useSidebarData()
 
   const runCommand = React.useCallback(
     (command: () => unknown) => {
@@ -30,10 +33,10 @@ export function CommandMenu() {
 
   return (
     <CommandDialog modal open={open} onOpenChange={setOpen}>
-      <CommandInput placeholder='Type a command or search...' />
+      <CommandInput placeholder={t('searchPlaceholder')} />
       <CommandList>
         <ScrollArea type='hover' className='h-72 pe-1'>
-          <CommandEmpty>No results found.</CommandEmpty>
+          <CommandEmpty>{t('noResults')}</CommandEmpty>
           {sidebarData.navGroups.map((group) => (
             <CommandGroup key={group.title} heading={group.title}>
               {group.items.map((navItem, i) => {
@@ -71,17 +74,17 @@ export function CommandMenu() {
             </CommandGroup>
           ))}
           <CommandSeparator />
-          <CommandGroup heading='Theme'>
+          <CommandGroup heading={t('theme')}>
             <CommandItem onSelect={() => runCommand(() => setTheme('light'))}>
-              <Sun /> <span>Light</span>
+              <Sun /> <span>{t('light')}</span>
             </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme('dark'))}>
               <Moon className='scale-90' />
-              <span>Dark</span>
+              <span>{t('dark')}</span>
             </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme('system'))}>
               <Laptop />
-              <span>System</span>
+              <span>{t('system')}</span>
             </CommandItem>
           </CommandGroup>
         </ScrollArea>