feat: 添加磨砂玻璃效果自定义配置及相关样式支持

src/components/ui/button.tsx

@@ -10,15 +10,15 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          "bg-primary/60 text-primary-foreground shadow-xs hover:bg-primary/80",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive/60 text-white shadow-xs hover:bg-destructive/80 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background/60 shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          "bg-secondary/60 text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent/80 hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {

src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card backdrop-blur-xs text-card-foreground shadow",
+      "rounded-xl purcarte-blur text-card-foreground shadow-sm box-border border border-border",
       className
     )}
     {...props}

src/components/ui/dropdown-menu.tsx

@@ -43,7 +43,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] purcarte-blur overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] purcarte-blur overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

src/components/ui/switch.tsx

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-(--accent-track) data-[state=unchecked]:bg-input",
       className
     )}
     {...props}

src/components/ui/tips.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import { Info } from "lucide-react";
+import { Popover, Dialog } from "@radix-ui/themes";
+import { useIsMobile } from "@/hooks/useMobile";
+
+interface TipsProps {
+  size?: string;
+  color?: string;
+  children?: React.ReactNode;
+  trigger?: React.ReactNode;
+  mode?: "popup" | "dialog" | "auto";
+  side?: "top" | "right" | "bottom" | "left";
+}
+
+const Tips: React.FC<TipsProps & React.HTMLAttributes<HTMLDivElement>> = ({
+  size = "16",
+  color = "gray",
+  trigger,
+  children,
+  side = "bottom",
+  mode = "popup",
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const isMobile = useIsMobile();
+
+  // determine whether to render a Dialog instead of a Popover
+  const isDialog = mode === "dialog" || (mode === "auto" && isMobile);
+
+  const handleInteraction = () => {
+    // toggle when using Dialog (click) or on mobile (click)
+    if (isDialog || isMobile) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  return (
+    <div className="relative inline-block" {...props}>
+      {isDialog ? (
+        <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
+          <Dialog.Trigger>
+            <div
+              className={`flex items-center justify-center rounded-full font-bold cursor-pointer `}
+              onClick={handleInteraction}>
+              {trigger ?? <Info color={color} size={size} />}
+            </div>
+          </Dialog.Trigger>
+          <Dialog.Content>
+            <div className="flex flex-col gap-2">
+              {/* <label className="text-xl font-bold">Tips</label> */}
+              <div>{children}</div>
+            </div>
+          </Dialog.Content>
+        </Dialog.Root>
+      ) : (
+        <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
+          <Popover.Trigger>
+            <div
+              className={`flex items-center justify-center rounded-full font-bold cursor-pointer `}
+              onClick={isMobile ? handleInteraction : undefined}
+              onMouseEnter={!isMobile ? () => setIsOpen(true) : undefined}
+              onMouseLeave={!isMobile ? () => setIsOpen(false) : undefined}>
+              {trigger ?? <Info color={color} size={size} />}
+            </div>
+          </Popover.Trigger>
+          <Popover.Content
+            side={side}
+            sideOffset={5}
+            onMouseEnter={!isMobile ? () => setIsOpen(true) : undefined}
+            onMouseLeave={!isMobile ? () => setIsOpen(false) : undefined}
+            className="purcarte-blur border border-border shadow-md rounded-md z-50 text-muted-foreground"
+            style={{
+              minWidth: isMobile ? "12rem" : "16rem",
+              maxWidth: isMobile ? "80vw" : "16rem",
+              backgroundColor: "var(--card)",
+            }}>
+            <div className="relative text-sm">{children}</div>
+          </Popover.Content>
+        </Popover.Root>
+      )}
+    </div>
+  );
+};
+
+export default Tips;

src/components/ui/tooltip.tsx

@@ -28,7 +28,7 @@ export const CustomTooltip = ({
 
   if (active && payload && payload.length) {
     return (
-      <div className="bg-background/80 p-3 border rounded-lg shadow-lg max-w-xs">
+      <div className="bg-background/80 p-3 border border-border rounded-lg shadow-lg max-w-xs">
         <p className="text-xs font-medium text-muted-foreground mb-2">
           {labelFormatter
             ? labelFormatter(label)