styles(icons): add animate draw svg

app/(protected)/dashboard/urls/globe/realtime-globe.tsx

@@ -6,6 +6,7 @@ import { scaleSequentialSqrt } from "d3-scale";
 import { interpolateTurbo } from "d3-scale-chromatic";
 import { GlobeInstance } from "globe.gl";
 import { debounce } from "lodash-es";
+import { useTheme } from "next-themes";
 
 import { Location } from "./index";
 
@@ -33,6 +34,7 @@ export default function RealtimeGlobe({
   locations,
   stats,
 }: GlobeProps) {
+  const { theme } = useTheme();
   const globeRef = useRef<HTMLDivElement>(null);
   const globeInstanceRef = useRef<any>(null);
   const mountedRef = useRef(true);
@@ -128,7 +130,7 @@ export default function RealtimeGlobe({
         .backgroundColor("rgba(0,0,0,0)")
         .globeMaterial(
           new MeshPhongMaterial({
-            color: "rgb(228, 228, 231)",
+            color: theme === "dark" ? "rgb(65, 65, 65)" : "rgb(228, 228, 231)",
             transparent: false,
             opacity: 1,
           }) as any,

app/(protected)/dashboard/urls/url-list.tsx

@@ -268,7 +268,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
 
   const rendeClicks = (short: ShortUrlFormData) => (
     <>
-      <Icons.mousePointerClick className="size-3" />
+      <Icons.mousePointerClick className="size-[14px]" />
       {isPending ? (
         <Skeleton className="h-4 w-6 rounded" />
       ) : (
@@ -388,7 +388,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                   {expirationTime(short.expiration, short.updatedAt)}
                 </TableCell>
                 <TableCell className="col-span-1 hidden truncate sm:flex">
-                  <div className="flex items-center gap-1 rounded-lg border bg-gray-50 px-3 py-1 dark:bg-gray-600/50">
+                  <div className="flex items-center gap-1 rounded-lg border bg-gray-50 px-2 py-1 dark:bg-gray-600/50">
                     {rendeClicks(short)}
                   </div>
                 </TableCell>
@@ -517,7 +517,7 @@ export default function UserUrlsList({ user, action }: UrlListProps) {
                     </div>
                   </div>
 
-                  <div className="ml-2 flex items-center gap-1 rounded-md border bg-gray-50 px-3 py-1 dark:bg-gray-600/50">
+                  <div className="ml-2 flex items-center gap-1 rounded-md border bg-gray-50 px-2 py-1 dark:bg-gray-600/50">
                     {rendeClicks(short)}
                   </div>
 

components/shared/icons.tsx

@@ -64,6 +64,8 @@ import {
   X,
 } from "lucide-react";
 
+import { cn } from "@/lib/utils";
+
 import LogoIcon from "./logo";
 
 export type Icon = LucideIcon;
@@ -146,7 +148,74 @@ export const Icons = {
   download: Download,
   ellipsis: MoreVertical,
   paintbrush: Paintbrush,
-  mousePointerClick: MousePointerClick,
+  mousePointerClick: ({ className, ...props }: LucideProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={`group cursor-pointer transition-transform duration-75 hover:scale-110 ${className || ""}`}
+      {...props}
+    >
+      {/* 点击波纹线条 - 默认显示 */}
+      <g className="group-hover:hidden">
+        <path d="M14 4.1 12 6" />
+        <path d="m5.1 8-2.9-.8" />
+        <path d="m6 12-1.9 2" />
+        <path d="M7.2 2.2 8 5.1" />
+      </g>
+
+      {/* 点击波纹线条 - 动画版本 */}
+      <g className="opacity-0 group-hover:opacity-100">
+        <path
+          d="M14 4.1 12 6"
+          className="transition-all duration-500 group-hover:animate-ping"
+          style={{
+            animationDelay: "0.1s",
+            transformOrigin: "13px 5px",
+          }}
+        />
+        <path
+          d="m5.1 8-2.9-.8"
+          className="transition-all duration-500 group-hover:animate-ping"
+          style={{
+            animationDelay: "0.2s",
+            transformOrigin: "4px 7.6px",
+          }}
+        />
+        <path
+          d="m6 12-1.9 2"
+          className="transition-all duration-500 group-hover:animate-ping"
+          style={{
+            animationDelay: "0.3s",
+            transformOrigin: "5px 13px",
+          }}
+        />
+        <path
+          d="M7.2 2.2 8 5.1"
+          className="transition-all duration-500 group-hover:animate-ping"
+          style={{
+            animationDelay: "0.4s",
+            transformOrigin: "7.6px 3.6px",
+          }}
+        />
+      </g>
+
+      {/* 鼠标指针 - 带点击缩放效果 */}
+      <path
+        d="M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z"
+        className="transition-transform duration-200 group-hover:scale-90 group-hover:animate-pulse"
+        style={{
+          transformOrigin: "15px 15px",
+        }}
+      />
+    </svg>
+  ),
   listChecks: ListChecks,
   github: ({ ...props }: LucideProps) => (
     <svg
@@ -187,7 +256,6 @@ export const Icons = {
   heading1: Heading1,
   qrcode: QrCode,
   laptop: Laptop,
-  // lineChart: LineChart,
   logo: LogoIcon,
   media: Image,
   messages: MessagesSquare,
@@ -224,16 +292,7 @@ export const Icons = {
   users: Users,
   warning: AlertTriangle,
   globeLock: GlobeLock,
-  globe: Globe,
-  link: Link,
-  mail: Mail,
-  mailPlus: MailPlus,
-  mailOpen: MailOpen,
-  bug: Bug,
-  CirclePlay: CirclePlay,
-  unplug: Unplug,
-  send: Send,
-  lineChart: ({ ...props }: LucideProps) => (
+  globe: ({ className, ...props }: LucideProps) => (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -244,10 +303,66 @@ export const Icons = {
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
+      className={cn(
+        "group inline-block cursor-pointer transition-transform duration-200 group-hover:scale-110",
+        className,
+      )}
+      style={{ animationDuration: "2s" }}
+      {...props}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path
+        className="group-hover:hidden"
+        d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
+      />
+      <path
+        d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"
+        className="transition-all duration-300 ease-in-out [stroke-dasharray:60] [stroke-dashoffset:-60] group-hover:[stroke-dashoffset:0]"
+      />
+      <path className="group-hover:hidden" d="M2 12h20" />
+      <path
+        d="M2 12h20"
+        className="duration-800 transition-all ease-in-out [stroke-dasharray:20] [stroke-dashoffset:-20] group-hover:[stroke-dashoffset:0]"
+        style={{ transitionDelay: "0.2s" }}
+      />
+    </svg>
+  ),
+  link: Link,
+  mail: Mail,
+  mailPlus: MailPlus,
+  mailOpen: MailOpen,
+  bug: Bug,
+  CirclePlay: CirclePlay,
+  unplug: Unplug,
+  send: Send,
+  lineChart: ({ className, ...props }: LucideProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={cn(
+        "group inline-block cursor-pointer transition-transform duration-75 group-hover:scale-110",
+        className,
+      )}
       {...props}
     >
       <path d="M3 3v16a2 2 0 0 0 2 2h16" />
-      <path d="m19 9-5 5-4-4-3 3" stroke="#0065ea" />
+      <path
+        className="group-hover:hidden"
+        d="m19 9-5 5-4-4-3 3"
+        stroke="#0065ea"
+      />
+      <path
+        d="m19 9-5 5-4-4-3 3"
+        stroke="#0065ea"
+        className="transition-all duration-1000 ease-in-out [stroke-dasharray:20] [stroke-dashoffset:-20] group-hover:[stroke-dashoffset:0]"
+      />
     </svg>
   ),
   outLink: ({ ...props }: LucideProps) => (