实现响应式导航栏组件

src/components/ui/button.tsx

@@ -4,21 +4,22 @@ import {cva, VariantProps} from 'class-variance-authority'
 
 export const buttonVariants = cva(
   [
-    `transition-all duration-200 ease-in-out`,
-    `h-10 px-4 rounded-md cursor-pointer whitespace-nowrap`,
-    'inline-flex items-center justify-center gap-2',
+    `transition-all duration-200 ease-in-out`, // 过渡动画
+    `h-10 px-4 rounded-md cursor-pointer whitespace-nowrap`, // 样式
+    'outline-none focus-visible:ring-4 ring-blue-200', // 焦点样式
+    'disabled:pointer-events-none disabled:opacity-50 ', // 禁用样式
+    'aria-invalid:ring-fail/20 dark:aria-invalid:ring-fail/40 aria-invalid:border-fail', // 无效状态样式
+    'inline-flex items-center justify-center gap-2', // 布局
     '[&_svg]:pointer-events-none [&_svg:not([class*="size-"])]:size-4 shrink-0 [&_svg]:shrink-0 ',
-    'outline-none focus-visible:ring-4 ring-blue-200',
-    'disabled:pointer-events-none disabled:opacity-50 ',
-    'aria-invalid:ring-fail/20 dark:aria-invalid:ring-fail/40 aria-invalid:border-fail',
   ],
   {
     variants: {
       theme: {
-        gradient: 'bg-gradient-to-r from-blue-400 to-cyan-300 text-white ring-offset-2',
+        gradient: 'bg-gradient-to-r from-blue-400 to-cyan-300 text-white ring-offset-2 hover:from-blue-500 hover:to-cyan-400',
         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
         outline: 'border bg-background hover:bg-secondary hover:text-secondary-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         ghost: 'text-foreground bg-transparent',
+        text: '',
         accent: 'bg-accent text-accent-foreground hover:bg-accent/90',
         fail: 'bg-fail text-white hover:bg-fail/90',
         warn: '',
@@ -70,6 +71,11 @@ export const buttonVariants = cva(
         color: 'fail',
         className: 'hover:bg-fail/10 text-fail',
       },
+      {
+        theme: 'text',
+        color: 'primary',
+        className: 'hover:text-primary',
+      },
     ],
     defaultVariants: {
       theme: 'default',