fix(ui): refine glassmorphism and page transition animations

- Added custom light/dark background images to replace unsplash URLs.
- Enhanced active sidebar item shadow and backdrop blur for better visibility.
- Fixed double loading flickers on user, node, group, and panel-sharing pages.
- Removed opacity transitions from AnimatedPage to prevent backdrop-filter rendering issues during page navigation.

vite-frontend/src/components/animated-page.tsx

@@ -13,10 +13,10 @@ export const AnimatedPage = ({
   className?: string;
 }) => (
   <motion.div
-    animate={{ opacity: 1, y: 0 }}
+    animate={{ y: 0 }}
     className={className}
-    exit={{ opacity: 0, y: -8 }}
+    exit={{ y: -8 }}
-    initial={{ opacity: 0, y: 16 }}
+    initial={{ y: 16 }}
     transition={{ duration: 0.28, ease: [0.25, 0.46, 0.45, 0.94] }}
   >
     {children}
@@ -28,9 +28,8 @@ export const AnimatedPage = ({
  * Children should use `staggerItem` as their `variants` prop.
  */
 export const staggerContainer = {
-  hidden: { opacity: 0 },
+  hidden: {},
   show: {
-    opacity: 1,
     transition: {
       staggerChildren: 0.05,
       delayChildren: 0.05,
@@ -42,9 +41,8 @@ export const staggerContainer = {
  * Individual stagger item variant — fade-in + slide-up.
  */
 export const staggerItem = {
-  hidden: { opacity: 0, y: 12 },
+  hidden: { y: 12 },
   show: {
-    opacity: 1,
     y: 0,
     transition: { duration: 0.25, ease: [0.25, 0.46, 0.45, 0.94] },
   },

vite-frontend/src/layouts/admin.tsx

@@ -47,7 +47,7 @@ export default function AdminLayout({
   const [isCollapsed, setIsCollapsed] = useState(
     () => localStorage.getItem("sidebar_collapsed") === "true",
   );
-  const [isAdmin, setIsAdmin] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(() => getAdminFlag());
   const [monitorAllowed, setMonitorAllowed] = useState<boolean | null>(null);
   const [monitorAccessReason, setMonitorAccessReason] = useState<string | null>(
     null,
@@ -433,7 +433,7 @@ export default function AdminLayout({
                   >
                     {isActive && (
                       <motion.div
-                        className="absolute inset-0 rounded-2xl bg-white/80 dark:bg-white/10 shadow-[0_2px_8px_rgba(0,0,0,0.04)] border border-white/50 dark:border-white/5"
+                        className="absolute inset-0 rounded-2xl bg-white/60 dark:bg-white/10 backdrop-blur-xl shadow-[0_12px_36px_rgba(0,0,0,0.18)] border border-white dark:border-white/20"
                         layoutId="sidebar-active"
                         transition={{
                           type: "spring",

vite-frontend/src/layouts/h5.tsx

@@ -18,7 +18,7 @@ interface TabItem {
 export default function H5Layout({ children }: { children: React.ReactNode }) {
   const navigate = useNavigate();
   const location = useLocation();
-  const [isAdmin, setIsAdmin] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(() => getAdminFlag());
   const [monitorAllowed, setMonitorAllowed] = useState<boolean | null>(null);
   const [monitorAccessReason, setMonitorAccessReason] = useState<string | null>(
     null,

vite-frontend/src/pages/group.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import toast from "react-hot-toast";
 
+import { AnimatedPage } from "@/components/animated-page";
+import { PageLoadingState } from "@/components/page-state";
 import { Card, CardBody, CardHeader } from "@/shadcn-bridge/heroui/card";
 import { Button } from "@/shadcn-bridge/heroui/button";
 import { Input } from "@/shadcn-bridge/heroui/input";
@@ -22,7 +24,7 @@ import {
   TableRow,
 } from "@/shadcn-bridge/heroui/table";
 import { Chip } from "@/shadcn-bridge/heroui/chip";
-import { Spinner } from "@/shadcn-bridge/heroui/spinner";
+
 import {
   assignGroupPermission,
   assignTunnelsToGroup,
@@ -469,14 +471,12 @@ export default function GroupPage() {
   }
 
   return (
-    <div className="px-3 lg:px-6 py-8 space-y-6">
+    <AnimatedPage className="px-3 lg:px-6 py-8 space-y-6">
-      {loading && (
+      {loading ? (
-        <div className="flex justify-center py-10">
+        <PageLoadingState message="正在加载..." />
-          <Spinner size="lg" />
+      ) : (
-        </div>
+        <>
-      )}
+          <Card>
-
-      <Card>
         <CardHeader className="flex flex-row items-center gap-3 pb-2">
           <h3 className="text-lg font-semibold">隧道分组</h3>
           <Button
@@ -922,6 +922,8 @@ export default function GroupPage() {
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </div>
+        </>
+      )}
+    </AnimatedPage>
   );
 }

vite-frontend/src/pages/node.tsx

@@ -288,7 +288,7 @@ const SortableItem = ({
 export default function NodePage() {
   const [nodeList, setNodeList] = useState<Node[]>([]);
   const [nodeOrder, setNodeOrder] = useState<number[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [localSearchKeyword, setLocalSearchKeyword] = useLocalStorageState(
     "node-search-keyword-local",
     "",

vite-frontend/src/pages/panel-sharing.tsx

@@ -89,7 +89,7 @@ export default function PanelSharingPage() {
     [],
   );
   const [nodes, setNodes] = useState<Node[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [remoteUsageLoading, setRemoteUsageLoading] = useState(false);
 
   // Modals

vite-frontend/src/pages/user.tsx

@@ -185,7 +185,7 @@ const normalizeUserTunnelItem = (item: Partial<UserTunnel>): UserTunnel => {
 export default function UserPage() {
   // 状态管理
   const [users, setUsers] = useState<User[]>([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [searchKeyword, setSearchKeyword] = useLocalStorageState(
     "user-search-keyword",
     "",
@@ -466,10 +466,6 @@ export default function UserPage() {
     void loadMonitorPermissions();
   }, [loadMonitorPermissions, loadSpeedLimits, loadTunnels, loadUserGroups]);
 
-  useEffect(() => {
-    void loadUsers();
-  }, [loadUsers]);
-
   useEffect(() => {
     if (searchDebounceRef.current) {
       clearTimeout(searchDebounceRef.current);

vite-frontend/src/styles/globals.css

@@ -241,16 +241,16 @@ body {
   bottom: 0;
   z-index: -1;
   pointer-events: none;
-  background: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop') no-repeat center center;
+  background: url('/images/bg-light.jpg') no-repeat center center;
   background-size: cover;
 }
 
-:root.dark .bg-mesh-gradient {
+.dark .bg-mesh-gradient {
   background-color: #0b1020;
 }
 
 .dark .bg-mesh-gradient::before {
-  background: url('https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2564&auto=format&fit=crop') no-repeat center center;
+  background: url('/images/bg-dark.jpg') no-repeat center center;
   background-size: cover;
 }