实现个人中心下拉菜单；更新部分 eslint 规则

src/components/ui/button.tsx

@@ -18,15 +18,62 @@ export const buttonVariants = cva(
         gradient: 'bg-gradient-to-r from-blue-400 to-cyan-300 text-white ring-offset-2',
         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 hover:bg-muted',
+        ghost: 'text-foreground bg-transparent',
         accent: 'bg-accent text-accent-foreground hover:bg-accent/90',
         fail: 'bg-fail text-white hover:bg-fail/90',
         warn: '',
         done: '',
       },
+      color: {
+        plain: '',
+        primary: '',
+        secondary: '',
+        accent: '',
+        done: '',
+        warn: '',
+        fail: '',
+      },
     },
+    compoundVariants: [
+      {
+        theme: 'ghost',
+        color: 'plain',
+        className: 'hover:bg-plain/10',
+      },
+      {
+        theme: 'ghost',
+        color: 'primary',
+        className: 'hover:bg-primary/10 text-primary',
+      },
+      {
+        theme: 'ghost',
+        color: 'secondary',
+        className: 'hover:bg-secondary/10 text-secondary',
+      },
+      {
+        theme: 'ghost',
+        color: 'accent',
+        className: 'hover:bg-accent/10 text-accent',
+      },
+      {
+        theme: 'ghost',
+        color: 'done',
+        className: 'hover:bg-done/10 text-done',
+      },
+      {
+        theme: 'ghost',
+        color: 'warn',
+        className: 'hover:bg-warn/10 text-warn',
+      },
+      {
+        theme: 'ghost',
+        color: 'fail',
+        className: 'hover:bg-fail/10 text-fail',
+      },
+    ],
     defaultVariants: {
       theme: 'default',
+      color: 'plain',
     },
   },
 )
@@ -34,11 +81,11 @@ export const buttonVariants = cva(
 type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants>
 
 export function Button(rawProps: ButtonProps) {
-  const {className, theme, ...props} = rawProps
+  const {className, theme, color, ...props} = rawProps
   return (
     <button
       {...props}
-      className={merge(buttonVariants({theme}), className)}
+      className={merge(buttonVariants({theme, color}), className)}
     />
   )
 }