bdim/Canto
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
bdim404
2026-01-26 17:50:06 +08:00
parent bb51b4e6c5
commit 678aa004b8
4 changed files with 44 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
qwen3-tts-frontend/src/components/HistoryItem.tsx
View File

@@ -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>

33
qwen3-tts-frontend/src/components/ui/tabs.tsx
View File

@@ -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>
>(({ className, ...props }, ref) => (
TabsTriggerProps
>(({ className, variant, ...props }, ref) => (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"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
)}
className={cn(tabsTriggerVariants({ variant }), className)}
{...props}
/>
))

24
qwen3-tts-frontend/src/index.css
View File

@@ -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-foreground: 210 40% 98%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--primary: 209 37% 21%;
--primary-foreground: 38 43% 86%;
--secondary: 197 26% 67%;
--secondary-foreground: 209 37% 21%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--accent: 38 43% 86%;
--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-foreground: 0 0% 11%;
--secondary: 0 0% 17.5%;
--secondary-foreground: 0 0% 98%;
--primary: 206 27% 45%;
--primary-foreground: 38 43% 86%;
--secondary: 197 26% 67%;
--secondary-foreground: 209 37% 21%;
--muted: 0 0% 17.5%;
--muted-foreground: 0 0% 65%;
--accent: 0 0% 17.5%;
--accent-foreground: 0 0% 98%;
--accent: 209 37% 21%;
--accent-foreground: 197 26% 67%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 17.5%;

6
qwen3-tts-frontend/src/pages/Home.tsx
View File

@@ -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>