WebUI 前端 & 后端超级大重构

dashboard/src/components/layout/Header.tsx

@@ -1,5 +1,4 @@
-import { Link } from '@tanstack/react-router'
-import { BookOpen, ChevronLeft, Globe, LogOut, Menu, Moon, PieChart, Search, Server, Sun } from 'lucide-react'
+import { BookOpen, ChevronLeft, Globe, LogOut, Menu, Moon, Search, Server, Sun } from 'lucide-react'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
@@ -13,7 +12,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import { Kbd } from '@/components/ui/kbd'
+import { ShortcutKbd } from '@/components/ui/kbd'
 import { toggleThemeWithTransition } from '@/components/use-theme'
 import { useBackground } from '@/hooks/use-background'
 import { logout } from '@/lib/fetch-with-auth'
@@ -99,7 +98,7 @@ export function Header({
               title={t('header.toggleConnection')}
             >
               <Server className="h-4 w-4" />
-              <span className="hidden sm:inline text-xs text-muted-foreground truncate max-w-[100px]">
+              <span className="hidden sm:inline text-xs text-muted-foreground truncate max-w-25">
                 {activeBackendName}
               </span>
             </Button>
@@ -107,19 +106,6 @@ export function Header({
             <div className="h-6 w-px bg-border" />
           </>
         )}
-        {/* 年度总结入口 */}
-        <Link to="/annual-report">
-          <Button
-            variant="ghost"
-            size="sm"
-            className="gap-2 bg-gradient-to-r from-pink-500/10 to-purple-500/10 hover:from-pink-500/20 hover:to-purple-500/20 border border-pink-500/20"
-            title={t('header.viewAnnualSummary')}
-          >
-            <PieChart className="h-4 w-4 text-pink-500" />
-            <span className="hidden sm:inline bg-gradient-to-r from-pink-500 to-purple-500 bg-clip-text text-transparent font-medium">{t('header.annualSummary')}</span>
-          </Button>
-        </Link>
-
         {/* 搜索框 */}
         <button
           onClick={() => onSearchOpenChange(true)}
@@ -128,9 +114,7 @@ export function Header({
         >
           <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" aria-hidden="true" />
           <span className="text-sm text-muted-foreground">{t('header.searchPlaceholder')}</span>
-          <Kbd size="sm" className="absolute right-2 top-1/2 -translate-y-1/2">
-            <span className="text-xs">⌘</span>K
-          </Kbd>
+          <ShortcutKbd size="sm" className="absolute right-2 top-1/2 -translate-y-1/2" keys={['mod', 'k']} />
         </button>
 
         {/* 搜索对话框 */}

dashboard/src/components/layout/Layout.tsx

@@ -13,6 +13,7 @@ import { useAuthGuard } from '@/hooks/use-auth'
 import { useBackground } from '@/hooks/use-background'
 
 import { TitleBar } from '@/components/electron/TitleBar'
+import { matchesShortcut } from '@/lib/keyboard'
 import { isElectron } from '@/lib/runtime'
 import { cn } from '@/lib/utils'
 import { menuSections } from './constants'
@@ -49,7 +50,7 @@ export function Layout({ children }: LayoutProps) {
   // 搜索快捷键监听（Cmd/Ctrl + K）
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      if (matchesShortcut(e, ['mod', 'k'])) {
         e.preventDefault()
         setSearchOpen(true)
       }
@@ -68,9 +69,8 @@ export function Layout({ children }: LayoutProps) {
       }
     }
 
-    const unsubscribe = router.subscribe('onResolved', () => {
-      const pathname = router.state.location.pathname
-      const pageTitle = pathToLabel[pathname] ?? 'MaiBot Dashboard'
+    return router.subscribe('onResolved', () => {
+      const pageTitle = pathToLabel[router.state.location.pathname] ?? 'MaiBot Dashboard'
       const fullTitle = pageTitle === 'MaiBot Dashboard'
         ? 'MaiBot Dashboard'
         : `${pageTitle} — MaiBot Dashboard`
@@ -90,8 +90,6 @@ export function Layout({ children }: LayoutProps) {
         })
       }
     })
-
-    return unsubscribe
   }, [router, announce, t])
 
   // 获取实际应用的主题（处理 system 情况）

dashboard/src/components/layout/constants.ts

@@ -6,25 +6,25 @@ export const menuSections: MenuSection[] = [
   {
     title: 'sidebar.groups.overview',
     items: [
-      { icon: Home, label: 'sidebar.menu.home', path: '/' },
+      { icon: Home, label: 'sidebar.menu.home', path: '/', searchDescription: 'search.items.homeDesc' },
     ],
   },
   {
     title: 'sidebar.groups.botConfig',
     items: [
-      { icon: FileText, label: 'sidebar.menu.botMainConfig', path: '/config/bot' },
-      { icon: Server, label: 'sidebar.menu.aiModelProvider', path: '/config/modelProvider', tourId: 'sidebar-model-provider' },
-      { icon: Boxes, label: 'sidebar.menu.modelManagement', path: '/config/model', tourId: 'sidebar-model-management' },
+      { icon: FileText, label: 'sidebar.menu.botMainConfig', path: '/config/bot', searchDescription: 'search.items.botConfigDesc' },
+      { icon: Server, label: 'sidebar.menu.aiModelProvider', path: '/config/modelProvider', searchDescription: 'search.items.modelProviderDesc', tourId: 'sidebar-model-provider' },
+      { icon: Boxes, label: 'sidebar.menu.modelManagement', path: '/config/model', searchDescription: 'search.items.modelDesc', tourId: 'sidebar-model-management' },
       { icon: Sliders, label: 'sidebar.menu.adapterConfig', path: '/config/adapter' },
     ],
   },
   {
     title: 'sidebar.groups.botResources',
     items: [
-      { icon: Smile, label: 'sidebar.menu.emojiManagement', path: '/resource/emoji' },
-      { icon: MessageSquare, label: 'sidebar.menu.expressionManagement', path: '/resource/expression' },
-      { icon: Hash, label: 'sidebar.menu.slangManagement', path: '/resource/jargon' },
-      { icon: UserCircle, label: 'sidebar.menu.personInfo', path: '/resource/person' },
+      { icon: Smile, label: 'sidebar.menu.emojiManagement', path: '/resource/emoji', searchDescription: 'search.items.emojiDesc' },
+      { icon: MessageSquare, label: 'sidebar.menu.expressionManagement', path: '/resource/expression', searchDescription: 'search.items.expressionDesc' },
+      { icon: Hash, label: 'sidebar.menu.slangManagement', path: '/resource/jargon', searchDescription: 'search.items.jargonDesc' },
+      { icon: UserCircle, label: 'sidebar.menu.personInfo', path: '/resource/person', searchDescription: 'search.items.personDesc' },
       { icon: Network, label: 'sidebar.menu.knowledgeGraph', path: '/resource/knowledge-graph' },
       { icon: Database, label: 'sidebar.menu.knowledgeBase', path: '/resource/knowledge-base' },
     ],
@@ -32,10 +32,10 @@ export const menuSections: MenuSection[] = [
   {
     title: 'sidebar.groups.extensionsMonitor',
     items: [
-      { icon: Package, label: 'sidebar.menu.pluginMarket', path: '/plugins' },
+      { icon: Package, label: 'sidebar.menu.pluginMarket', path: '/plugins', searchDescription: 'search.items.pluginsDesc' },
       { icon: LayoutGrid, label: 'sidebar.menu.configTemplate', path: '/config/pack-market' },
       { icon: Sliders, label: 'sidebar.menu.pluginConfig', path: '/plugin-config' },
-      { icon: FileSearch, label: 'sidebar.menu.logViewer', path: '/logs' },
+      { icon: FileSearch, label: 'sidebar.menu.logViewer', path: '/logs', searchDescription: 'search.items.logsDesc' },
       { icon: Activity, label: 'sidebar.menu.plannerMonitor', path: '/planner-monitor' },
       { icon: MessageSquare, label: 'sidebar.menu.localChat', path: '/chat' },
     ],
@@ -43,7 +43,7 @@ export const menuSections: MenuSection[] = [
   {
     title: 'sidebar.groups.system',
     items: [
-      { icon: Settings, label: 'sidebar.menu.settings', path: '/settings' },
+      { icon: Settings, label: 'sidebar.menu.settings', path: '/settings', searchDescription: 'search.items.settingsDesc' },
     ],
   },
 ]

dashboard/src/components/layout/types.ts

@@ -9,6 +9,7 @@ export interface MenuItem {
   icon: ComponentType<LucideProps>
   label: string
   path: string
+  searchDescription?: string
   tourId?: string
 }