@allbluecn/web-app 0.3.0

package/src/components/animated-icons/cursor-click.tsx

@@ -0,0 +1,163 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client";
+
+import type { Variants } from "motion/react";
+import { m, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface CursorClickIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface CursorClickIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CURSOR_VARIANTS: Variants = {
+  initial: { x: 0, y: 0 },
+  hover: {
+    x: [0, 0, -3, 0],
+    y: [0, -4, 0, 0],
+    transition: {
+      duration: 1,
+      bounce: 0.3,
+    },
+  },
+};
+
+const LINE_VARIANTS: Variants = {
+  initial: { opacity: 1, x: 0, y: 0 },
+  spread: (custom: { x: number; y: number }) => ({
+    opacity: [0, 1, 0, 0, 0, 0, 1],
+    x: [0, custom.x, 0, 0],
+    y: [0, custom.y, 0, 0],
+    transition: {
+      type: "spring",
+      stiffness: 70,
+      damping: 10,
+      mass: 0.4,
+    },
+  }),
+};
+
+const CursorClickIcon = forwardRef<CursorClickIconHandle, CursorClickIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const clickControls = useAnimation();
+    const cursorControls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => {
+          cursorControls.start("hover");
+          clickControls.start("spread", { delay: 1.3 });
+        },
+        stopAnimation: () => {
+          cursorControls.start("initial");
+          clickControls.start("initial");
+        },
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          cursorControls.start("hover");
+          clickControls.start("spread", { delay: 1.3 });
+        }
+      },
+      [clickControls, cursorControls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          cursorControls.start("initial");
+          clickControls.start("initial");
+        }
+      },
+      [cursorControls, clickControls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <m.path
+            animate={cursorControls}
+            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"
+            variants={CURSOR_VARIANTS}
+          />
+          <m.path
+            animate={clickControls}
+            custom={{ x: 1, y: -1 }}
+            d="M14 4.1 12 6"
+            variants={LINE_VARIANTS}
+          />
+          <m.path
+            animate={clickControls}
+            custom={{ x: -1, y: 0 }}
+            d="m5.1 8-2.9-.8"
+            variants={LINE_VARIANTS}
+          />
+          <m.path
+            animate={clickControls}
+            custom={{ x: -1, y: 1 }}
+            d="m6 12-1.9 2"
+            variants={LINE_VARIANTS}
+          />
+          <m.path
+            animate={clickControls}
+            custom={{ x: 0, y: -1 }}
+            d="M7.2 2.2 8 5.1"
+            variants={LINE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+CursorClickIcon.displayName = "CursorClickIcon";
+
+export { CursorClickIcon };

package/src/components/animated-icons/earth.tsx

@@ -0,0 +1,174 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client";
+
+import type { Transition, Variants } from "motion/react";
+import { m, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface EarthIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface EarthIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const CIRCLE_TRANSITION: Transition = {
+  duration: 0.3,
+  delay: 0.1,
+  opacity: { delay: 0.15 },
+};
+
+const CIRCLE_VARIANTS: Variants = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+  },
+};
+
+const EarthIcon = forwardRef<EarthIconHandle, EarthIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="none"
+          height={size}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <m.path
+            animate={controls}
+            d="M21.54 15H17a2 2 0 0 0-2 2v4.54"
+            transition={{ duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                opacity: 1,
+                pathOffset: 0,
+              },
+              animate: {
+                pathLength: [0, 1],
+                opacity: [0, 1],
+                pathOffset: [1, 0],
+              },
+            }}
+          />
+          <m.path
+            animate={controls}
+            d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17"
+            transition={{ duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                opacity: 1,
+                pathOffset: 0,
+              },
+              animate: {
+                pathLength: [0, 1],
+                opacity: [0, 1],
+                pathOffset: [1, 0],
+              },
+            }}
+          />
+          <m.path
+            animate={controls}
+            d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05"
+            transition={{ duration: 0.7, delay: 0.5, opacity: { delay: 0.5 } }}
+            variants={{
+              normal: {
+                pathLength: 1,
+                opacity: 1,
+                pathOffset: 0,
+              },
+              animate: {
+                pathLength: [0, 1],
+                opacity: [0, 1],
+                pathOffset: [1, 0],
+              },
+            }}
+          />
+          <m.circle
+            animate={controls}
+            cx="12"
+            cy="12"
+            r="10"
+            transition={CIRCLE_TRANSITION}
+            variants={CIRCLE_VARIANTS}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+EarthIcon.displayName = "EarthIcon";
+
+export { EarthIcon };

package/src/components/animated-icons/file-text.tsx

@@ -0,0 +1,176 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client";
+
+import { m, useAnimation } from "motion/react";
+import type React from "react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface FileTextIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FileTextIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const FILE_TEXT = forwardRef<FileTextIconHandle, FileTextIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <m.svg
+          animate={controls}
+          fill="none"
+          height={size}
+          initial="normal"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          variants={{
+            normal: { scale: 1 },
+            animate: {
+              scale: 1.05,
+              transition: {
+                duration: 0.3,
+                ease: "easeOut",
+              },
+            },
+          }}
+          viewBox="0 0 24 24"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
+          <path d="M14 2v4a2 2 0 0 0 2 2h4" />
+
+          <m.path
+            d="M10 9H8"
+            stroke="currentColor"
+            strokeWidth="2"
+            variants={{
+              normal: {
+                pathLength: 1,
+                x1: 8,
+                x2: 10,
+              },
+              animate: {
+                pathLength: [1, 0, 1],
+                x1: [8, 10, 8],
+                x2: [10, 10, 10],
+                transition: {
+                  duration: 0.7,
+                  delay: 0.3,
+                },
+              },
+            }}
+          />
+          <m.path
+            d="M16 13H8"
+            stroke="currentColor"
+            strokeWidth="2"
+            variants={{
+              normal: {
+                pathLength: 1,
+                x1: 8,
+                x2: 16,
+              },
+              animate: {
+                pathLength: [1, 0, 1],
+                x1: [8, 16, 8],
+                x2: [16, 16, 16],
+                transition: {
+                  duration: 0.7,
+                  delay: 0.5,
+                },
+              },
+            }}
+          />
+          <m.path
+            d="M16 17H8"
+            stroke="currentColor"
+            strokeWidth="2"
+            variants={{
+              normal: {
+                pathLength: 1,
+                x1: 8,
+                x2: 16,
+              },
+              animate: {
+                pathLength: [1, 0, 1],
+                x1: [8, 16, 8],
+                x2: [16, 16, 16],
+                transition: {
+                  duration: 0.7,
+                  delay: 0.7,
+                },
+              },
+            }}
+          />
+        </m.svg>
+      </div>
+    );
+  }
+);
+
+FILE_TEXT.displayName = "FileTextIcon";
+
+export { FILE_TEXT as FileTextIcon };

package/src/components/animated-icons/flask.tsx

@@ -0,0 +1,137 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+"use client";
+
+import { m, useAnimation } from "motion/react";
+import type { HTMLAttributes } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface FlaskIconHandle {
+  startAnimation: () => void;
+  stopAnimation: () => void;
+}
+
+interface FlaskIconProps extends HTMLAttributes<HTMLDivElement> {
+  size?: number;
+}
+
+const FlaskIcon = forwardRef<FlaskIconHandle, FlaskIconProps>(
+  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal"),
+      };
+    });
+
+    const handleMouseEnter = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+
+    const handleMouseLeave = useCallback(
+      (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+
+    return (
+      <div
+        className={cn(className)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...props}
+      >
+        <svg
+          fill="currentColor"
+          height={size}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="5.632"
+          viewBox="0 0 512 512"
+          width={size}
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <m.g
+            animate={controls}
+            variants={{
+              normal: { rotate: 0, translateY: 0 },
+              animate: {
+                translateY: -12,
+                rotate: [0, 5, -5, 3, -3, 0],
+                transition: {
+                  ease: "linear",
+                  rotate: { duration: 0.8 },
+                },
+              },
+            }}
+          >
+            <circle cx="151.273" cy="407.273" r="11.636" />
+            <circle cx="244.364" cy="372.364" r="11.636" />
+            <circle cx="290.909" cy="418.909" r="11.636" />
+            <circle cx="221.091" cy="453.818" r="11.636" />
+            <circle cx="372.364" cy="430.545" r="11.636" />
+          </m.g>
+          <m.path
+            animate={controls}
+            d="M456.145,436.364l-79.127-124.509c0-2.327-2.327-4.655-3.491-5.818l-34.909-55.855c-8.146-13.964-12.8-29.091-12.8-44.218 V67.491c13.964-4.655,23.273-17.455,23.273-32.582C349.091,15.127,333.964,0,314.182,0H197.818 c-19.782,0-34.909,15.127-34.909,34.909c0,19.782,15.127,34.909,34.909,34.909h69.818c6.982,0,11.636-4.655,11.636-11.636 s-4.655-11.636-11.636-11.636h-69.818c-6.982,0-11.636-4.655-11.636-11.636c0-6.982,4.655-11.636,11.636-11.636h116.364 c6.982,0,11.636,4.655,11.636,11.636c0,6.982-4.655,11.636-11.636,11.636s-11.636,4.655-11.636,11.636v147.782 c0,19.782,5.818,39.564,16.291,55.855l19.782,31.418c-30.255-5.818-64-2.327-88.436,10.473 c-23.273,11.636-60.509,13.964-87.273,4.655l30.255-46.545c10.473-16.291,16.291-36.073,16.291-55.855V104.727 c0-6.982-4.655-11.636-11.636-11.636s-11.636,4.655-11.636,11.636v101.236c0,15.127-4.655,30.255-12.8,43.055l-34.909,55.855 c-1.164,1.164-2.327,2.327-3.491,3.491c0,1.164,0,1.164-1.164,2.327L55.855,436.364c-5.818,9.309-9.309,19.782-9.309,31.418v9.309 c0,19.782,15.127,34.909,34.909,34.909h349.091c19.782,0,34.909-15.127,34.909-34.909v-9.309 C465.455,456.145,461.964,445.673,456.145,436.364z M443.345,477.091h-1.164c0,6.982-4.655,11.636-11.636,11.636H81.455 c-6.982,0-11.636-4.655-11.636-11.636v-9.309c0-6.982,2.327-12.8,5.818-18.618l75.636-119.855 c15.127,5.818,32.582,8.145,50.036,8.145c22.109,0,43.055-4.655,60.509-12.8c25.6-12.8,68.655-13.964,96.582-1.164l79.127,125.673 c3.491,5.818,5.818,11.636,5.818,18.618V477.091z"
+            variants={{
+              normal: { rotate: 0, scale: 1 },
+              animate: {
+                scale: 0.9,
+                rotate: [0, 6, -6, 3, -3, 0],
+                transition: {
+                  duration: 0.8,
+                  scale: {
+                    duration: 0.3,
+                    type: "spring",
+                    bounce: 0.4,
+                    stiffness: 150,
+                    damping: 10,
+                  },
+                },
+              },
+            }}
+          />
+        </svg>
+      </div>
+    );
+  }
+);
+
+FlaskIcon.displayName = "FlaskIcon";
+
+export { FlaskIcon };