Refactor TabsTrigger component to utilize variant props for improved styling and consistency in Home page

qwen3-tts-frontend/src/components/HistoryItem.tsx

@@ -124,9 +124,9 @@ const HistoryItem = memo(({ job, onDelete, onLoadParams }: HistoryItemProps) =>
         <AlertDialog>
           <AlertDialogTrigger asChild>
             <Button
-              variant="destructive"
+              variant="ghost"
               size="sm"
-              className="min-h-[44px] md:min-h-[36px]"
+              className="min-h-[44px] md:min-h-[36px] text-muted-foreground hover:[&_svg]:text-destructive"
             >
               <Trash2 className="w-4 h-4" />
             </Button>

qwen3-tts-frontend/src/components/ui/tabs.tsx

@@ -1,5 +1,6 @@
 import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
@@ -20,16 +21,36 @@ const TabsList = React.forwardRef<
 ))
 TabsList.displayName = TabsPrimitive.List.displayName
 
+const tabsTriggerVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 h-full text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "text-muted-foreground hover:bg-primary/10 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-sm",
+        secondary:
+          "text-muted-foreground hover:bg-secondary/50 data-[state=active]:bg-secondary data-[state=active]:text-secondary-foreground data-[state=active]:shadow-sm",
+        outline:
+          "text-muted-foreground hover:bg-accent/10 data-[state=active]:bg-accent data-[state=active]:text-accent-foreground data-[state=active]:shadow-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface TabsTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,
+    VariantProps<typeof tabsTriggerVariants> {}
+
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+  TabsTriggerProps
->(({ className, ...props }, ref) => (
+>(({ className, variant, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
-    className={cn(
+    className={cn(tabsTriggerVariants({ variant }), className)}
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
-    )}
     {...props}
   />
 ))

qwen3-tts-frontend/src/index.css

@@ -31,14 +31,14 @@
     --card-foreground: 222.2 84% 4.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 209 37% 21%;
-    --primary-foreground: 210 40% 98%;
+    --primary-foreground: 38 43% 86%;
-    --secondary: 210 40% 96.1%;
+    --secondary: 197 26% 67%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary-foreground: 209 37% 21%;
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
+    --accent: 38 43% 86%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent-foreground: 209 37% 21%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
@@ -59,14 +59,14 @@
     --card-foreground: 0 0% 98%;
     --popover: 0 0% 5%;
     --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
+    --primary: 206 27% 45%;
-    --primary-foreground: 0 0% 11%;
+    --primary-foreground: 38 43% 86%;
-    --secondary: 0 0% 17.5%;
+    --secondary: 197 26% 67%;
-    --secondary-foreground: 0 0% 98%;
+    --secondary-foreground: 209 37% 21%;
     --muted: 0 0% 17.5%;
     --muted-foreground: 0 0% 65%;
-    --accent: 0 0% 17.5%;
+    --accent: 209 37% 21%;
-    --accent-foreground: 0 0% 98%;
+    --accent-foreground: 197 26% 67%;
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
     --border: 0 0% 17.5%;

qwen3-tts-frontend/src/pages/Home.tsx

@@ -65,15 +65,15 @@ function Home() {
             <CardHeader>
               <Tabs value={currentTab} onValueChange={setCurrentTab}>
                 <TabsList className="grid w-full grid-cols-3 h-9">
-                  <TabsTrigger value="custom-voice">
+                  <TabsTrigger value="custom-voice" variant="default">
                     <User className="h-4 w-4 md:mr-2" />
                     <span className="hidden md:inline">自定义</span>
                   </TabsTrigger>
-                  <TabsTrigger value="voice-design">
+                  <TabsTrigger value="voice-design" variant="secondary">
                     <Palette className="h-4 w-4 md:mr-2" />
                     <span className="hidden md:inline">设计</span>
                   </TabsTrigger>
-                  <TabsTrigger value="voice-clone">
+                  <TabsTrigger value="voice-clone" variant="outline">
                     <Copy className="h-4 w-4 md:mr-2" />
                     <span className="hidden md:inline">克隆</span>
                   </TabsTrigger>