@@ -17,7 +17,7 @@ import { Button } from '@/components/ui/button'
1717import { Dialog , DialogContent , DialogDescription , DialogHeader , DialogTitle } from '@/components/ui/dialog'
1818import { Select , SelectContent , SelectItem , SelectTrigger , SelectValue } from '@/components/ui/select'
1919import { Switch } from '@/components/ui/switch'
20- import { Tabs , TabsList , TabsTrigger , TabsContent } from '@/components/ui/tabs'
20+ import { Tabs , TabsContent } from '@/components/ui/tabs'
2121import { Tooltip , TooltipTrigger , TooltipContent } from '@/components/ui/tooltip'
2222import { cn } from '@/lib/utils'
2323import {
@@ -411,11 +411,34 @@ ${skillList}
411411 return (
412412 < div className = "space-y-4" >
413413 < Tabs value = { activeTab } onValueChange = { setActiveTab } >
414- < TabsList className = "w-full" >
415- < TabsTrigger value = "skills" className = "flex-1" > Skills</ TabsTrigger >
416- < TabsTrigger value = "mcp" className = "flex-1" > MCP</ TabsTrigger >
417- < TabsTrigger value = "tools" className = "flex-1" > 内置工具</ TabsTrigger >
418- </ TabsList >
414+ < div className = "relative flex rounded-xl bg-muted p-1" >
415+ < div
416+ className = { cn (
417+ 'mode-slider absolute top-1 bottom-1 w-[calc(33.333%-3px)] rounded-lg bg-background shadow-sm transition-transform duration-300 ease-in-out' ,
418+ activeTab === 'skills' && 'translate-x-0' ,
419+ activeTab === 'mcp' && 'translate-x-[100%]' ,
420+ activeTab === 'tools' && 'translate-x-[200%]' ,
421+ ) }
422+ />
423+ { [
424+ { value : 'skills' , label : 'Skills' } ,
425+ { value : 'mcp' , label : 'MCP' } ,
426+ { value : 'tools' , label : '内置工具' } ,
427+ ] . map ( ( { value, label } ) => (
428+ < button
429+ key = { value }
430+ onClick = { ( ) => setActiveTab ( value ) }
431+ className = { cn (
432+ 'relative z-[1] flex-1 flex items-center justify-center rounded-lg px-3 py-1.5 text-sm font-medium transition-colors duration-200' ,
433+ activeTab === value
434+ ? 'mode-btn-selected text-foreground'
435+ : 'text-muted-foreground hover:text-foreground'
436+ ) }
437+ >
438+ { label }
439+ </ button >
440+ ) ) }
441+ </ div >
419442
420443 { /* ===== Skills Tab ===== */ }
421444 < TabsContent value = "skills" className = "mt-4 space-y-4" >
0 commit comments