feat: add framer-motion animations (page transitions, modals, dropdowns, buttons, search bar)

2026-10-14 04:56:38 +08:00 · 2026-02-21 21:16:42 +08:00
parent 572d1c16a6
commit a15be253f5
15 changed files with 583 additions and 510 deletions
@@ -0,0 +1,121 @@
+import { motion } from "framer-motion";
+import React from "react";
+
+/**
+ * Wraps page content with a smooth fade-in + slide-up entrance animation.
+ * Use this as the outermost wrapper inside each page component.
+ */
+export const AnimatedPage = ({
+    children,
+    className,
+}: {
+    children: React.ReactNode;
+    className?: string;
+}) => (
+    <motion.div
+        animate={{ opacity: 1, y: 0 }}
+        className={className}
+        exit={{ opacity: 0, y: -8 }}
+        initial={{ opacity: 0, y: 16 }}
+        transition={{ duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] }}
+    >
+        {children}
+    </motion.div>
+);
+
+/**
+ * Stagger container — apply to the parent of a list/grid of animated items.
+ * Children should use `staggerItem` as their `variants` prop.
+ */
+export const staggerContainer = {
+    hidden: { opacity: 0 },
+    show: {
+        opacity: 1,
+        transition: {
+            staggerChildren: 0.05,
+            delayChildren: 0.05,
+        },
+    },
+};
+
+/**
+ * Individual stagger item variant — fade-in + slide-up.
+ */
+export const staggerItem = {
+    hidden: { opacity: 0, y: 12 },
+    show: {
+        opacity: 1,
+        y: 0,
+        transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
+    },
+};
+
+/**
+ * Convenience wrapper for a stagger list.
+ * Renders a `motion.div` (or `motion.ul/motion.tbody`) with stagger behaviour.
+ */
+export const StaggerList = ({
+    children,
+    className,
+    as = "div",
+}: {
+    children: React.ReactNode;
+    className?: string;
+    as?: "div" | "ul" | "tbody";
+}) => {
+    const Component = motion[as] as React.ElementType;
+
+    return (
+        <Component
+            animate="show"
+            className={className}
+            initial="hidden"
+            variants={staggerContainer}
+        >
+            {children}
+        </Component>
+    );
+};
+
+/**
+ * Individual animated item for use inside StaggerList.
+ */
+export const StaggerItem = ({
+    children,
+    className,
+    as = "div",
+}: {
+    children: React.ReactNode;
+    className?: string;
+    as?: "div" | "li" | "tr";
+}) => {
+    const Component = motion[as] as React.ElementType;
+
+    return (
+        <Component className={className} variants={staggerItem}>
+            {children}
+        </Component>
+    );
+};
+
+/**
+ * Simple fade-in animation for standalone elements (chips, badges, counters, etc.)
+ */
+export const FadeIn = ({
+    children,
+    delay = 0,
+    className,
+}: {
+    children: React.ReactNode;
+    delay?: number;
+    className?: string;
+}) => (
+    <motion.div
+        animate={{ opacity: 1, scale: 1 }}
+        className={className}
+        initial={{ opacity: 0, scale: 0.95 }}
+        transition={{ duration: 0.2, delay, ease: "easeOut" }}
+    >
+        {children}
+    </motion.div>
+);
@@ -0,0 +1,101 @@
+import { motion, AnimatePresence } from "framer-motion";
+
+import { Button } from "@/shadcn-bridge/heroui/button";
+import { Input } from "@/shadcn-bridge/heroui/input";
+import { SearchIcon } from "@/components/icons";
+
+interface SearchBarProps {
+    isVisible: boolean;
+    value: string;
+    placeholder?: string;
+    onOpen: () => void;
+    onClose: () => void;
+    onChange: (value: string) => void;
+}
+
+export function SearchBar({
+    isVisible,
+    value,
+    placeholder = "搜索",
+    onOpen,
+    onClose,
+    onChange,
+}: SearchBarProps) {
+    return (
+        // Fixed h-8 so the container never changes height — eliminates the vertical jitter
+        <div className="flex items-center gap-2 h-8 overflow-hidden">
+            <AnimatePresence mode="wait" initial={false}>
+                {!isVisible ? (
+                    <motion.div
+                        key="search-btn"
+                        animate={{ opacity: 1, scale: 1 }}
+                        exit={{ opacity: 0, scale: 0.8 }}
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        transition={{ duration: 0.12 }}
+                    >
+                        <Button
+                            isIconOnly
+                            aria-label="搜索"
+                            className="text-default-600"
+                            color="default"
+                            size="sm"
+                            variant="flat"
+                            onPress={onOpen}
+                        >
+                            <SearchIcon className="w-4 h-4" />
+                        </Button>
+                    </motion.div>
+                ) : (
+                    <motion.div
+                        key="search-input"
+                        animate={{ opacity: 1, x: 0 }}
+                        className="flex w-full items-center gap-2"
+                        exit={{ opacity: 0, x: -8 }}
+                        initial={{ opacity: 0, x: -16 }}
+                        transition={{ duration: 0.18, ease: [0.25, 0.46, 0.45, 0.94] }}
+                    >
+                        <Input
+                            autoFocus
+                            classNames={{
+                                base: "bg-default-100",
+                                input: "bg-transparent text-sm focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:outline-none",
+                                inputWrapper:
+                                    "bg-default-100 border-0 shadow-none h-8 min-h-8",
+                            }}
+                            placeholder={placeholder}
+                            value={value}
+                            onChange={(e) => onChange(e.target.value)}
+                        />
+                        <Button
+                            isIconOnly
+                            aria-label="关闭搜索"
+                            className="text-default-600 shrink-0"
+                            color="default"
+                            size="sm"
+                            variant="light"
+                            onPress={() => {
+                                onClose();
+                                onChange("");
+                            }}
+                        >
+                            <svg
+                                aria-hidden="true"
+                                className="w-4 h-4"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    d="M6 18L18 6M6 6l12 12"
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                />
+                            </svg>
+                        </Button>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </div>
+    );
+}
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";

 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors transition-transform duration-100 active:scale-95 disabled:active:scale-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
@@ -11,14 +11,14 @@ function Checkbox({
  return (
    <CheckboxPrimitive.Root
      className={cn(
-        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow transition-transform duration-100 active:scale-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
        className,
      )}
      data-slot="checkbox"
      {...props}
    >
      <CheckboxPrimitive.Indicator
-        className="flex items-center justify-center text-current"
+        className="flex items-center justify-center text-current data-[state=checked]:animate-in data-[state=checked]:zoom-in-75 data-[state=checked]:duration-150"
        data-slot="checkbox-indicator"
      >
        <CheckIcon className="h-3.5 w-3.5" />
@@ -57,7 +57,7 @@ function DialogContent({
      <DialogOverlay />
      <DialogPrimitive.Content
        className={cn(
-          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-default-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 sm:rounded-lg dark:bg-default-50",
+          "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-default-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-bottom-4 data-[state=closed]:slide-out-to-bottom-2 sm:rounded-lg dark:bg-default-50",
          className,
        )}
        data-slot="dialog-content"
@@ -85,7 +85,7 @@ function DropdownMenuSubContent({
  return (
    <DropdownMenuPrimitive.SubContent
      className={cn(
-        "z-50 min-w-32 overflow-hidden rounded-md border border-default-200 bg-white p-1 text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out dark:bg-default-50",
+        "z-50 min-w-32 overflow-hidden rounded-md border border-default-200 bg-white p-1 text-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2 dark:bg-default-50",
        className,
      )}
      data-slot="dropdown-menu-sub-content"
@@ -103,7 +103,7 @@ function DropdownMenuContent({
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content
        className={cn(
-          "z-50 min-w-32 overflow-hidden rounded-md border border-default-200 bg-white p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out dark:bg-default-50",
+          "z-50 min-w-32 overflow-hidden rounded-md border border-default-200 bg-white p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2 dark:bg-default-50",
          className,
        )}
        data-slot="dropdown-menu-content"
@@ -90,7 +90,7 @@ function SelectContent({
    <SelectPrimitive.Portal>
      <SelectPrimitive.Content
        className={cn(
-          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default-200 bg-white text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out dark:bg-default-50",
+          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-default-200 bg-white text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=top]:slide-in-from-bottom-2 data-[side=bottom]:slide-in-from-top-2 dark:bg-default-50",
          position === "popper" &&
          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
          className,
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { toast } from "react-hot-toast";
+import { AnimatePresence, motion } from "framer-motion";

 import { Button } from "@/shadcn-bridge/heroui/button";
 import {
@@ -335,21 +336,36 @@ export default function AdminLayout({

              return (
                <li key={item.path}>
-                  <button
+                  <motion.button
                    className={`
                       w-full flex items-center gap-3 px-4 py-3 rounded-lg text-left
-                       transition-colors duration-200 min-h-[44px]
-                       ${
-                         isActive
-                           ? "bg-primary-100 dark:bg-primary-600/20 text-primary-600 dark:text-primary-300"
-                           : "text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-900"
+                       relative min-h-[44px]
+                       ${isActive
+                        ? "text-primary-600 dark:text-primary-300"
+                        : "text-gray-700 dark:text-gray-200"
                      }
                     `}
+                    transition={{ duration: 0.15 }}
+                    whileTap={{ scale: 0.97 }}
                    onClick={() => handleMenuClick(item.path)}
                  >
-                    <div className="flex-shrink-0">{item.icon}</div>
-                    <span className="font-medium text-sm">{item.label}</span>
-                  </button>
+                    {isActive && (
+                      <motion.div
+                        className="absolute inset-0 rounded-lg bg-primary-100 dark:bg-primary-600/20"
+                        layoutId="sidebar-active"
+                        transition={{ type: "spring", stiffness: 380, damping: 30 }}
+                      />
+                    )}
+                    {!isActive && (
+                      <motion.div
+                        className="absolute inset-0 rounded-lg bg-gray-100 dark:bg-gray-900 opacity-0"
+                        transition={{ duration: 0.15 }}
+                        whileHover={{ opacity: 1 }}
+                      />
+                    )}
+                    <div className="flex-shrink-0 relative z-10">{item.icon}</div>
+                    <span className="font-medium text-sm relative z-10">{item.label}</span>
+                  </motion.button>
                </li>
              );
            })}
@@ -476,9 +492,20 @@ export default function AdminLayout({

        {/* 主内容 */}
        <main
-          className={`flex-1 bg-gray-100 dark:bg-black ${isMobile ? "" : "overflow-y-auto"}`}
+          className={`flex-1 bg-gray-100 dark:bg-black overflow-hidden ${isMobile ? "" : "overflow-y-scroll"}`}
+        >
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={location.pathname}
+              animate={{ opacity: 1, y: 0 }}
+              className="h-full"
+              exit={{ opacity: 0, y: -6 }}
+              initial={{ opacity: 0, y: 10 }}
+              transition={{ duration: 0.22, ease: [0.25, 0.46, 0.45, 0.94] }}
            >
              {children}
+            </motion.div>
+          </AnimatePresence>
        </main>
      </div>

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import toast from "react-hot-toast";
+import { AnimatedPage } from "@/components/animated-page";

 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Button } from "@/shadcn-bridge/heroui/button";
@@ -524,7 +525,7 @@ export default function DashboardPage() {
  }

  return (
-    <div className="px-3 lg:px-6 py-2 lg:py-4">
+    <AnimatedPage className="px-3 lg:px-6 py-2 lg:py-4">
      {announcement && <AnnouncementBanner announcement={announcement} />}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-4 mb-6 lg:mb-8">
        <MetricCard
@@ -978,6 +979,6 @@ export default function DashboardPage() {
          </ModalBody>
        </ModalContent>
      </Modal>
-    </div>
+    </AnimatedPage>
  );
 }
@@ -1,5 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
 import toast from "react-hot-toast";
+import { AnimatedPage } from "@/components/animated-page";
+import { SearchBar } from "@/components/search-bar";
 import {
  DndContext,
  closestCenter,
@@ -76,7 +78,6 @@ import {
  executeForwardBatchToggleService,
 } from "@/pages/forward/batch-actions";
 import { buildForwardOrder, FORWARD_ORDER_KEY } from "@/pages/forward/order";
-import { SearchIcon } from "@/components/icons";
 import { PageLoadingState } from "@/components/page-state";
 import { useMobileBreakpoint } from "@/hooks/useMobileBreakpoint";
 import { saveOrder } from "@/utils/order-storage";
@@ -1619,65 +1620,18 @@ export default function ForwardPage() {
  }

  return (
-    <div className="px-3 lg:px-6 py-8">
+    <AnimatedPage className="px-3 lg:px-6 py-8">
      {/* 页面头部 */}
      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mb-6 gap-3">
        <div className="flex-1 max-w-sm flex items-center gap-2">
-          {!isSearchVisible ? (
-            <Button
-              isIconOnly
-              aria-label="搜索"
-              className="text-default-600"
-              color="default"
-              size="sm"
-              variant="flat"
-              onPress={() => setIsSearchVisible(true)}
-            >
-              <SearchIcon className="w-4 h-4" />
-            </Button>
-          ) : (
-            <div className="flex w-full items-center gap-2 animate-appearance-in">
-              <Input
-                autoFocus
-                classNames={{
-                  base: "bg-default-100",
-                  input: "bg-transparent",
-                  inputWrapper:
-                    "bg-default-100 border-2 border-default-200 hover:border-default-300 data-[hover=true]:border-default-300",
-                }}
+          <SearchBar
+            isVisible={isSearchVisible}
            placeholder="搜索转发名称、地址或用户名"
            value={searchKeyword}
-                onChange={(e) => setSearchKeyword(e.target.value)}
+            onChange={setSearchKeyword}
+            onClose={() => setIsSearchVisible(false)}
+            onOpen={() => setIsSearchVisible(true)}
          />
-              <Button
-                isIconOnly
-                aria-label="关闭搜索"
-                className="text-default-600 shrink-0"
-                color="default"
-                size="sm"
-                variant="light"
-                onPress={() => {
-                  setIsSearchVisible(false);
-                  setSearchKeyword("");
-                }}
-              >
-                <svg
-                  aria-hidden="true"
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M6 18L18 6M6 6l12 12"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                  />
-                </svg>
-              </Button>
-            </div>
-          )}
        </div>
        <div className="flex flex-wrap items-center justify-end gap-2 sm:gap-3">
          {/* 筛选按钮 */}
@@ -3160,6 +3114,6 @@ export default function ForwardPage() {
          )}
        </ModalContent>
      </Modal>
-    </div>
+    </AnimatedPage>
  );
 }
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 import { Turnstile } from "@marsidev/react-turnstile";
+import { motion } from "framer-motion";

 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Input } from "@/shadcn-bridge/heroui/input";
@@ -152,7 +153,12 @@ export default function IndexPage() {
  return (
    <DefaultLayout>
      <section className="flex flex-col items-center justify-center gap-4 py-4 sm:py-8 md:py-10 pb-20 min-h-[calc(100dvh-120px)] sm:min-h-[calc(100dvh-200px)]">
-        <div className="w-full max-w-md px-4 sm:px-0">
+        <motion.div
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          className="w-full max-w-md px-4 sm:px-0"
+          initial={{ opacity: 0, y: 24, scale: 0.97 }}
+          transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
+        >
          <Card className="w-full">
            <CardHeader className="pb-0 pt-6 px-6 flex-col items-center">
              <h1 className={title({ size: "sm" })}>登陆</h1>
@@ -203,7 +209,7 @@ export default function IndexPage() {
              </div>
            </CardBody>
          </Card>
-        </div>
+        </motion.div>

        {/* 版权信息 - 固定在底部，不占据布局空间 */}

@@ -1,5 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
 import toast from "react-hot-toast";
+import { AnimatedPage, StaggerList, StaggerItem } from "@/components/animated-page";
+import { SearchBar } from "@/components/search-bar";

 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Button } from "@/shadcn-bridge/heroui/button";
@@ -20,7 +22,6 @@ import {
  deleteSpeedLimit,
  getTunnelList,
 } from "@/api";
-import { SearchIcon } from "@/components/icons";
 import { PageLoadingState } from "@/components/page-state";

 interface SpeedLimitRule {
@@ -232,64 +233,17 @@ export default function LimitPage() {
  }

  return (
-    <div className="px-3 lg:px-6 py-8">
+    <AnimatedPage className="px-3 lg:px-6 py-8">
      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mb-6 gap-3">
        <div className="flex-1 max-w-sm flex items-center gap-2">
-          {!isSearchVisible ? (
-            <Button
-              isIconOnly
-              aria-label="搜索"
-              className="text-default-600"
-              color="default"
-              size="sm"
-              variant="flat"
-              onPress={() => setIsSearchVisible(true)}
-            >
-              <SearchIcon className="w-4 h-4" />
-            </Button>
-          ) : (
-            <div className="flex w-full items-center gap-2 animate-appearance-in">
-              <Input
-                autoFocus
-                classNames={{
-                  base: "bg-default-100",
-                  input: "bg-transparent",
-                  inputWrapper:
-                    "bg-default-100 border-2 border-default-200 hover:border-default-300 data-[hover=true]:border-default-300",
-                }}
+          <SearchBar
+            isVisible={isSearchVisible}
            placeholder="搜索规则名称或绑定隧道"
            value={searchKeyword}
-                onChange={(e) => setSearchKeyword(e.target.value)}
+            onChange={setSearchKeyword}
+            onClose={() => setIsSearchVisible(false)}
+            onOpen={() => setIsSearchVisible(true)}
          />
-              <Button
-                isIconOnly
-                aria-label="关闭搜索"
-                className="text-default-600 shrink-0"
-                color="default"
-                size="sm"
-                variant="light"
-                onPress={() => {
-                  setIsSearchVisible(false);
-                  setSearchKeyword("");
-                }}
-              >
-                <svg
-                  aria-hidden="true"
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M6 18L18 6M6 6l12 12"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                  />
-                </svg>
-              </Button>
-            </div>
-          )}
        </div>

        <Button color="primary" size="sm" variant="flat" onPress={handleAdd}>
@@ -299,12 +253,10 @@ export default function LimitPage() {

      {/* 统一卡片网格 */}
      {filteredRules.length > 0 ? (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+        <StaggerList className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
          {filteredRules.map((rule) => (
-            <Card
-              key={rule.id}
-              className="shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
-            >
+            <StaggerItem key={rule.id}>
+              <Card className="shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden h-full">
                <CardHeader className="pb-2 md:pb-2">
                  <div className="flex justify-between items-start w-full">
                    <div>
@@ -398,8 +350,9 @@ export default function LimitPage() {
                  </div>
                </CardBody>
              </Card>
+            </StaggerItem>
          ))}
-        </div>
+        </StaggerList>
      ) : (
        /* 空状态 */
        <Card className="shadow-sm border border-gray-200 dark:border-gray-700 bg-default-50/50">
@@ -572,6 +525,6 @@ export default function LimitPage() {
          )}
        </ModalContent>
      </Modal>
-    </div>
+    </AnimatedPage>
  );
 }
@@ -1,5 +1,7 @@
 import { useState, useEffect, useMemo, useCallback } from "react";
 import toast from "react-hot-toast";
+import { AnimatedPage } from "@/components/animated-page";
+import { SearchBar } from "@/components/search-bar";
 import {
  DndContext,
  KeyboardSensor,
@@ -57,7 +59,6 @@ import {
  getRemoteSyncErrorMessage,
 } from "@/pages/node/display";
 import { tryCopyInstallCommand } from "@/pages/node/install-command";
-import { SearchIcon } from "@/components/icons";
 import { buildNodeSystemInfo } from "@/pages/node/system-info";
 import { useNodeOfflineTimers } from "@/pages/node/use-node-offline-timers";
 import { useNodeRealtime } from "@/pages/node/use-node-realtime";
@@ -1049,64 +1050,17 @@ export default function NodePage() {
  );

  return (
-    <div className="px-3 lg:px-6 py-8">
+    <AnimatedPage className="px-3 lg:px-6 py-8">
      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mb-6 gap-3">
        <div className="flex-1 max-w-sm flex items-center gap-2">
-          {!isSearchVisible ? (
-            <Button
-              isIconOnly
-              aria-label="搜索"
-              className="text-default-600"
-              color="default"
-              size="sm"
-              variant="flat"
-              onPress={() => setIsSearchVisible(true)}
-            >
-              <SearchIcon className="w-4 h-4" />
-            </Button>
-          ) : (
-            <div className="flex w-full items-center gap-2 animate-appearance-in">
-              <Input
-                autoFocus
-                classNames={{
-                  base: "bg-default-100",
-                  input: "bg-transparent",
-                  inputWrapper:
-                    "bg-default-100 border-2 border-default-200 hover:border-default-300 data-[hover=true]:border-default-300",
-                }}
+          <SearchBar
+            isVisible={isSearchVisible}
            placeholder="搜索节点名称或IP"
            value={searchKeyword}
-                onChange={(e) => setSearchKeyword(e.target.value)}
+            onChange={setSearchKeyword}
+            onClose={() => setIsSearchVisible(false)}
+            onOpen={() => setIsSearchVisible(true)}
          />
-              <Button
-                isIconOnly
-                aria-label="关闭搜索"
-                className="text-default-600 shrink-0"
-                color="default"
-                size="sm"
-                variant="light"
-                onPress={() => {
-                  setIsSearchVisible(false);
-                  setSearchKeyword("");
-                }}
-              >
-                <svg
-                  aria-hidden="true"
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M6 18L18 6M6 6l12 12"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                  />
-                </svg>
-              </Button>
-            </div>
-          )}
        </div>

        <div className="flex gap-2 items-center">
@@ -2168,6 +2122,6 @@ export default function NodePage() {
          )}
        </ModalContent>
      </Modal>
-    </div>
+    </AnimatedPage>
  );
 }
@@ -1,5 +1,7 @@
 import { useState, useEffect, useMemo } from "react";
 import toast from "react-hot-toast";
+import { AnimatedPage } from "@/components/animated-page";
+import { SearchBar } from "@/components/search-bar";
 import {
  DndContext,
  KeyboardSensor,
@@ -45,7 +47,6 @@ import {
  batchDeleteTunnels,
  batchRedeployTunnels,
 } from "@/api";
-import { SearchIcon } from "@/components/icons";
 import { PageLoadingState } from "@/components/page-state";
 import {
  buildDiagnosisFallbackResult,
@@ -684,64 +685,17 @@ export default function TunnelPage() {
  }

  return (
-    <div className="px-3 lg:px-6 py-8">
+    <AnimatedPage className="px-3 lg:px-6 py-8">
      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mb-6 gap-3">
        <div className="flex-1 max-w-sm flex items-center gap-2">
-          {!isSearchVisible ? (
-            <Button
-              isIconOnly
-              aria-label="搜索"
-              className="text-default-600"
-              color="default"
-              size="sm"
-              variant="flat"
-              onPress={() => setIsSearchVisible(true)}
-            >
-              <SearchIcon className="w-4 h-4" />
-            </Button>
-          ) : (
-            <div className="flex w-full items-center gap-2 animate-appearance-in">
-              <Input
-                autoFocus
-                classNames={{
-                  base: "bg-default-100",
-                  input: "bg-transparent",
-                  inputWrapper:
-                    "bg-default-100 border-2 border-default-200 hover:border-default-300 data-[hover=true]:border-default-300",
-                }}
+          <SearchBar
+            isVisible={isSearchVisible}
            placeholder="搜索隧道名称或IP"
            value={searchKeyword}
-                onChange={(e) => setSearchKeyword(e.target.value)}
+            onChange={setSearchKeyword}
+            onClose={() => setIsSearchVisible(false)}
+            onOpen={() => setIsSearchVisible(true)}
          />
-              <Button
-                isIconOnly
-                aria-label="关闭搜索"
-                className="text-default-600 shrink-0"
-                color="default"
-                size="sm"
-                variant="light"
-                onPress={() => {
-                  setIsSearchVisible(false);
-                  setSearchKeyword("");
-                }}
-              >
-                <svg
-                  aria-hidden="true"
-                  className="w-4 h-4"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M6 18L18 6M6 6l12 12"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                  />
-                </svg>
-              </Button>
-            </div>
-          )}
        </div>

        <div className="flex items-center gap-2">
@@ -2483,6 +2437,6 @@ export default function TunnelPage() {
          )}
        </ModalContent>
      </Modal>
-    </div>
+    </AnimatedPage>
  );
 }
@@ -1,5 +1,6 @@
 import { useState, useEffect } from "react";
 import toast from "react-hot-toast";
+import { AnimatedPage, StaggerList, StaggerItem } from "@/components/animated-page";
 import { parseDate } from "@internationalized/date";

 import { Button } from "@/shadcn-bridge/heroui/button";
@@ -610,7 +611,7 @@ export default function UserPage() {
  };

  return (
-    <div className="px-3 lg:px-6 py-8">
+    <AnimatedPage className="px-3 lg:px-6 py-8">
      {/* 页面头部 */}
      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mb-6 gap-3">
        <div className="flex-1 max-w-sm flex items-center gap-2">
@@ -692,7 +693,7 @@ export default function UserPage() {
          </CardBody>
        </Card>
      ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+        <StaggerList className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
          {users.map((user) => {
            const userStatus = getUserStatus(user);
            const expStatus = user.expTime
@@ -708,9 +709,9 @@ export default function UserPage() {
                : 0;

            return (
+              <StaggerItem key={user.id}>
                <Card
-                key={user.id}
-                className="shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden"
+                  className="shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden h-full"
                >
                  <CardHeader className="pb-2 md:pb-2">
                    <div className="flex justify-between items-start w-full">
@@ -868,13 +869,14 @@ export default function UserPage() {
                    </div>
                  </CardBody>
                </Card>
+              </StaggerItem>
            );
          })}
-        </div>
+        </StaggerList>
      )}

      {/* 用户表单模态框 */}
-      <Modal
+      < Modal
        backdrop="blur"
        isOpen={isUserModalOpen}
        placement="center"
@@ -1788,6 +1790,6 @@ export default function UserPage() {
          </ModalFooter>
        </ModalContent>
      </Modal>
-    </div>
+    </AnimatedPage>
  );
 }