fix(ui): refine glassmorphism and page transition animations (#422 )

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.
fix(ui): refine glassmorphism and page transition animations
2026-09-28 07:36:38 +08:00 · 2026-04-06 12:28:25 +08:00 · 2026-04-06 12:26:29 +08:00 · 2026-04-06 11:04:16 +08:00 · 2026-04-06 11:02:32 +08:00 · 2026-04-06 10:23:16 +08:00
18 changed files with 62 additions and 67 deletions
@@ -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 }}
-    initial={{ opacity: 0, y: 16 }}
+    exit={{ y: -8 }}
+    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] },
  },
@@ -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,
@@ -373,16 +373,15 @@ export default function AdminLayout({
      {/* 左侧菜单栏 */}
      <aside
        className={`
-        ${isMobile ? "fixed h-screen top-0 left-0 rounded-r-3xl" : "relative h-full rounded-3xl"} 
+        ${isMobile ? "fixed h-screen top-0 left-0 rounded-r-3xl" : "relative h-full rounded-3xl"}
        ${isMobile && !mobileMenuVisible ? "-translate-x-full" : "translate-x-0"}
-        ${isMobile ? "w-64" : isCollapsed ? "w-20" : "w-[260px]"} 
-        bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl
-        shadow-[0_10px_30px_rgba(0,0,0,0.1)] 
+        ${isMobile ? "w-64" : isCollapsed ? "w-20" : "w-[260px]"}
+        bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl
+        shadow-[0_10px_30px_rgba(0,0,0,0.1)]
        border border-white/80 dark:border-white/10
-        z-50 
+        z-50
        transition-all duration-300 ease-in-out
-        flex flex-col flex-shrink-0
-      `}
+        flex flex-col flex-shrink-0      `}
      >
        {/* Logo 区域 */}
        <div className="px-6 py-8 flex items-center overflow-hidden whitespace-nowrap box-border">
@@ -434,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",
@@ -531,7 +530,7 @@ export default function AdminLayout({
        {isMobile && (
          <Button
            isIconOnly
-            className="absolute top-4 left-4 z-40 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-md shadow-sm border border-white/80 dark:border-white/10"
+            className="absolute top-4 left-4 z-40 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-md shadow-sm border border-white/80 dark:border-white/10"
            variant="flat"
            onPress={toggleMobileMenu}
          >
@@ -23,7 +23,7 @@ export default function H5SimpleLayout({
  return (
    <div className="flex flex-col min-h-screen bg-mesh-gradient">
      {/* 顶部导航栏 */}
-      <header className="bg-white/60 dark:bg-zinc-900/60 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
+      <header className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
        <div className="flex items-center gap-2">
          <Button isIconOnly size="sm" variant="light" onPress={handleBack}>
            <BackIcon className="w-5 h-5" />
@@ -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,
@@ -168,7 +168,7 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex flex-col min-h-screen bg-mesh-gradient">
      {/* 顶部导航栏 */}
-      <header className="bg-white/60 dark:bg-zinc-900/60 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
+      <header className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-xl shadow-sm border-b border-white/80 dark:border-white/10 h-14 safe-top flex-shrink-0 flex items-center justify-between px-4 relative z-10">
        <div className="flex items-center gap-2">
          <BrandLogo size={20} />
          <h1 className="text-sm font-bold text-foreground">
@@ -186,7 +186,7 @@ export default function H5Layout({ children }: { children: React.ReactNode }) {
      <div aria-hidden className="h-[calc(4rem+var(--safe-area-bottom))]" />

      {/* 底部Tabbar */}
-      <nav className="bg-white/70 dark:bg-zinc-900/70 backdrop-blur-2xl border-t border-white/80 dark:border-white/10 h-[calc(4rem+var(--safe-area-bottom))] flex-shrink-0 flex items-center justify-around px-2 fixed bottom-0 left-0 right-0 z-30">
+      <nav className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-2xl border-t border-white/80 dark:border-white/10 h-[calc(4rem+var(--safe-area-bottom))] flex-shrink-0 flex items-center justify-around px-2 fixed bottom-0 left-0 right-0 z-30">
        {filteredTabItems.map((item) => {
          const isActive = location.pathname === item.path;
          const isMonitor = item.path === "/monitor";
@@ -1067,7 +1067,7 @@ export default function DashboardPage() {
                    {group.forwards.map((forward) => (
                      <div
                        key={forward.id}
-                        className="bg-white dark:bg-default-100/50 border border-gray-200 dark:border-default-200 rounded-lg p-3 hover:shadow-md transition-shadow"
+                        className="bg-white/10 dark:bg-black/10 backdrop-blur-md border border-white/20 dark:border-white/10 rounded-lg p-3 shadow-sm hover:shadow-md transition-all duration-300"
                      >
                        <div className="space-y-3">
                          <div>
@@ -1076,7 +1076,7 @@ export default function DashboardPage() {
                            </h4>
                            <div className="space-y-1">
                              <button
-                                className={`block px-2 py-1 bg-default-50/50 dark:bg-default-100/20 backdrop-blur-md rounded-lg border border-default-200/50 dark:border-default-700/50 font-mono text-xs truncate text-foreground transition-colors duration-200 ${hasMultipleIps(forward.inIp) ? "cursor-pointer hover:bg-default-100 dark:hover:bg-default-200/50" : ""}`}
+                                className={`block px-2 py-1 bg-white/20 dark:bg-black/20 backdrop-blur-md rounded-lg border border-white/20 dark:border-white/10 font-mono text-xs truncate text-foreground transition-all duration-300 ${hasMultipleIps(forward.inIp) ? "cursor-pointer hover:bg-white/30 dark:hover:bg-white/10" : ""}`}
                                disabled={!hasMultipleIps(forward.inIp)}
                                title={formatInAddress(
                                  forward.inIp,
@@ -1097,7 +1097,7 @@ export default function DashboardPage() {
                                ↓
                              </div>
                              <button
-                                className={`block px-2 py-1 bg-default-50/50 dark:bg-default-100/20 backdrop-blur-md rounded-lg border border-default-200/50 dark:border-default-700/50 font-mono text-xs truncate text-foreground transition-colors duration-200 ${hasMultipleRemoteAddresses(forward.remoteAddr) ? "cursor-pointer hover:bg-default-100 dark:hover:bg-default-200/50" : ""}`}
+                                className={`block px-2 py-1 bg-white/20 dark:bg-black/20 backdrop-blur-md rounded-lg border border-white/20 dark:border-white/10 font-mono text-xs truncate text-foreground transition-all duration-300 ${hasMultipleRemoteAddresses(forward.remoteAddr) ? "cursor-pointer hover:bg-white/30 dark:hover:bg-white/10" : ""}`}
                                disabled={
                                  !hasMultipleRemoteAddresses(
                                    forward.remoteAddr,
@@ -95,7 +95,7 @@ export const FlowChartCard = ({
                        : 0;

                      return (
-                        <div className="bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl border border-white/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-4">
+                        <div className="bg-white/20 dark:bg-black/20 backdrop-blur-3xl border border-white/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-4">
                          <p className="font-medium text-foreground">{`时间: ${label ?? ""}`}</p>
                          <p className="text-primary font-semibold mt-1">{`流量: ${formatFlow(flowValue)}`}</p>
                        </div>
@@ -3689,7 +3689,7 @@ export default function ForwardPage() {
    return (
      <Card
        key={forward.id}
-        className="group h-full flex flex-col overflow-hidden"
+        className="group h-full flex flex-col overflow-hidden bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
      >
        <CardHeader className="pb-2 md:pb-2">
          <div className="flex justify-between items-start w-full">
@@ -3746,7 +3746,7 @@ export default function ForwardPage() {
            {/* 地址信息 */}
            <div className="space-y-1">
              <button
-                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
+                className={`cursor-pointer px-2 py-1 bg-white/20 dark:bg-black/20 backdrop-blur-md rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
                  hasMultipleAddresses(forward.inIp)
                    ? "hover:bg-default-100 dark:hover:bg-default-200/50"
                    : ""
@@ -3786,7 +3786,7 @@ export default function ForwardPage() {
              </button>

              <button
-                className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
+                className={`cursor-pointer px-2 py-1 bg-white/20 dark:bg-black/20 backdrop-blur-md rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
                  hasMultipleAddresses(forward.remoteAddr)
                    ? "hover:bg-default-100 dark:hover:bg-default-200/50"
                    : ""
@@ -4176,7 +4176,7 @@ export default function ForwardPage() {
                  {sortedForwards.length} 条规则
                </span>
              </div>
-              <Card className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/40 dark:bg-zinc-900/40 backdrop-blur-2xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
+              <Card className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
                <DndContext
                  collisionDetection={pointerWithin}
                  sensors={sensors}
@@ -4256,7 +4256,7 @@ export default function ForwardPage() {
              </Card>
            </>
          ) : (
-            <Card>
+            <Card className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
              <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
                <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
                  暂无规则配置
@@ -4302,7 +4302,7 @@ export default function ForwardPage() {
            </DndContext>
          </>
        ) : (
-          <Card>
+          <Card className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
            <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
              <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
                暂无规则配置
@@ -4329,7 +4329,7 @@ export default function ForwardPage() {
                  key={`grouped-table-${group.userId}-${group.userName}`}
                  className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
                >
-                  <div className="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-md px-5 py-4">
+                  <div className="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/20 dark:bg-black/20 backdrop-blur-3xl px-5 py-4">
                    <div className="flex items-center gap-2">
                      <span className="text-sm font-semibold text-foreground">
                        {group.userName}
@@ -4415,10 +4415,10 @@ export default function ForwardPage() {
                              collapsed={collapsed}
                              countClassName="text-xs text-default-600"
                              groupUserId={group.userId}
-                              headerClassName="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-md px-4 py-2.5"
+                              headerClassName="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/20 dark:bg-black/20 backdrop-blur-3xl px-4 py-2.5"
                              titleClassName="truncate text-sm font-semibold text-default-700"
                              tunnel={tunnel}
-                              wrapperClassName="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/40 dark:bg-zinc-900/40 backdrop-blur-2xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
+                              wrapperClassName="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
                              onToggleCollapsed={() =>
                                toggleTunnelGroupCollapsed(
                                  group.userId,
@@ -4562,7 +4562,7 @@ export default function ForwardPage() {
            })}
          </div>
        ) : (
-          <Card>
+          <Card className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
            <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
              <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
                暂无规则配置
@@ -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">
-      {loading && (
-        <div className="flex justify-center py-10">
-          <Spinner size="lg" />
-        </div>
-      )}
-
-      <Card>
+    <AnimatedPage className="px-3 lg:px-6 py-8 space-y-6">
+      {loading ? (
+        <PageLoadingState message="正在加载..." />
+      ) : (
+        <>
+          <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>
  );
 }
@@ -158,7 +158,7 @@ export default function IndexPage() {
          initial={{ opacity: 0, y: 24 }}
          transition={{ duration: 0.35, ease: [0.25, 0.46, 0.45, 0.94] }}
        >
-          <Card className="w-full bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_20px_40px_rgba(0,0,0,0.15)] border-white/80 dark:border-white/10 rounded-[32px] p-2 sm:p-4">
+          <Card className="w-full bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_20px_40px_rgba(0,0,0,0.15)] border-white/80 dark:border-white/10 rounded-[32px] p-2 sm:p-4">
            <CardHeader className="pb-0 pt-6 px-6 flex-col items-center">
              <div className="w-14 h-14 bg-primary rounded-2xl flex items-center justify-center mb-4 shadow-sm text-white">
                <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>
@@ -253,7 +253,7 @@ export default function MonitorPage() {
        </div>

        {/* Tab Switcher */}
-        <div className="flex items-center gap-1 p-1 rounded-2xl bg-white/40 dark:bg-black/40 backdrop-blur-lg border border-white/50 dark:border-white/10 w-fit shadow-sm">
+        <div className="flex items-center gap-1 p-1 rounded-2xl bg-white/20 dark:bg-black/20 backdrop-blur-3xl border border-white/50 dark:border-white/10 w-fit shadow-sm">
          <button
            className={`flex items-center gap-1.5 px-5 py-2 rounded-xl text-sm font-semibold transition-all duration-200 ${
              activeTab === "nodes"
@@ -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",
    "",
@@ -1446,7 +1446,7 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {

                      {/* Active monitor info bar */}
                      {resolvedActiveMonitor && (
-                        <div className="flex items-center justify-between gap-3 p-3 rounded-2xl bg-white/40 dark:bg-black/40 backdrop-blur-md border border-white/50 dark:border-white/10 shadow-[0_4px_12px_rgba(0,0,0,0.05)]">
+                        <div className="flex items-center justify-between gap-3 p-3 rounded-2xl bg-white/20 dark:bg-black/20 backdrop-blur-3xl border border-white/50 dark:border-white/10 shadow-[0_4px_12px_rgba(0,0,0,0.05)]">
                          <div className="flex items-center gap-3 min-w-0 flex-wrap">
                            <Chip size="sm" color="primary" variant="flat">{resolvedActiveMonitor.type.toUpperCase()}</Chip>
                            <span className="font-mono text-xs text-default-500">{resolvedActiveMonitor.target}</span>
@@ -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
@@ -1578,7 +1578,7 @@ export default function TunnelPage() {
      {/* 隧道卡片网格 */}
      {tunnels.length > 0 ? (
        viewMode === "list" ? (
-          <Card>
+          <Card className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
          <Table
            aria-label="隧道列表"
            className="overflow-x-auto min-w-full"
@@ -1721,7 +1721,7 @@ export default function TunnelPage() {
                    {(listeners) => (
                      <Card
                        key={tunnel.id}
-                        className="group overflow-hidden"
+                        className="group overflow-hidden bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
                      >
                        <CardHeader className="pb-2 md:pb-2">
                          <div className="flex justify-between items-start w-full">
@@ -1771,7 +1771,7 @@ export default function TunnelPage() {
                            <div className="pt-2 border-t border-divider">
                              <div className="flex items-center justify-center gap-2 text-xs">
                                {/* 入口节点 */}
-                                <div className="flex items-center gap-1 px-2 py-1 bg-primary-50 dark:bg-primary-100/20 rounded border border-primary-200 dark:border-primary-300/20">
+                                <div className="flex items-center gap-1 px-2 py-1 bg-primary-50/30 dark:bg-primary-100/20 backdrop-blur-md rounded border border-primary-200/50 dark:border-primary-300/20">
                                  <svg
                                    aria-hidden="true"
                                    className="w-3 h-3 text-primary-600"
@@ -1806,7 +1806,7 @@ export default function TunnelPage() {
                                </svg>

                                {/* 转发链 */}
-                                <div className="flex items-center gap-1 px-2 py-1 bg-secondary-50 dark:bg-secondary-100/20 rounded border border-secondary-200 dark:border-secondary-300/20">
+                                <div className="flex items-center gap-1 px-2 py-1 bg-secondary-50/30 dark:bg-secondary-100/20 backdrop-blur-md rounded border border-secondary-200/50 dark:border-secondary-300/20">
                                  <svg
                                    aria-hidden="true"
                                    className="w-3 h-3 text-secondary-600"
@@ -1844,7 +1844,7 @@ export default function TunnelPage() {
                                </svg>

                                {/* 出口节点 */}
-                                <div className="flex items-center gap-1 px-2 py-1 bg-success-50 dark:bg-success-100/20 rounded border border-success-200 dark:border-success-300/20">
+                                <div className="flex items-center gap-1 px-2 py-1 bg-success-50/30 dark:bg-success-100/20 backdrop-blur-md rounded border border-success-200/50 dark:border-success-300/20">
                                  <svg
                                    aria-hidden="true"
                                    className="w-3 h-3 text-success-600"
@@ -1871,7 +1871,7 @@ export default function TunnelPage() {
                            <div
                              className={`grid gap-2 ${tunnel.type === 2 && tunnel.ipPreference ? "grid-cols-3" : "grid-cols-2"}`}
                            >
-                              <div className="text-center p-1.5 bg-default-50 dark:bg-default-100/30 rounded">
+                              <div className="text-center p-1.5 bg-white/5 dark:bg-black/5 backdrop-blur-3xl rounded-lg border border-divider">
                                <div className="text-xs text-default-500">
                                  流量计算
                                </div>
@@ -1879,7 +1879,7 @@ export default function TunnelPage() {
                                  {getTunnelFlowDisplay(tunnel.flow)}
                                </div>
                              </div>
-                              <div className="text-center p-1.5 bg-default-50 dark:bg-default-100/30 rounded">
+                              <div className="text-center p-1.5 bg-white/5 dark:bg-black/5 backdrop-blur-3xl rounded-lg border border-divider">
                                <div className="text-xs text-default-500">
                                  流量倍率
                                </div>
@@ -1888,7 +1888,7 @@ export default function TunnelPage() {
                                </div>
                              </div>
                              {tunnel.type === 2 && tunnel.ipPreference && (
-                                <div className="text-center p-1.5 bg-default-50 dark:bg-default-100/30 rounded">
+                                <div className="text-center p-1.5 bg-white/5 dark:bg-black/5 backdrop-blur-3xl rounded-lg border border-divider">
                                  <div className="text-xs text-default-500">
                                    连接偏好
                                  </div>
@@ -1986,7 +1986,7 @@ export default function TunnelPage() {
        )
      ) : (
        /* 空状态 */
-        <Card>
+        <Card className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
          <CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
            <h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
              暂无隧道配置
@@ -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);
@@ -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;
 }
Author	SHA1	Message	Date
sagit	1987960fce	fix(ui): refine glassmorphism and page transition animations (#422 ) 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.	2026-04-06 12:28:25 +08:00
sagitchu	4c782eb815	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.	2026-04-06 12:26:29 +08:00
sagit	1e3b38f427	style: apply frosted glass backgrounds to inner cards and nested elements (#421 ) Replaced solid backgrounds (bg-white, bg-default-50) with high-blur translucent glass (backdrop-blur-3xl) inside tunnel topology nodes, dashboard forward rules, and flow charts. Matched the aesthetic of the inner components to inherit the adaptive light/dark mode root backgrounds.	2026-04-06 11:04:16 +08:00
sagitchu	2166936f57	style: apply frosted glass backgrounds to inner cards and nested elements - Replaced solid backgrounds (bg-white, bg-default-50) with high-blur translucent glass (backdrop-blur-3xl) inside tunnel topology nodes, dashboard forward rules, and flow charts. - Matched the aesthetic of the inner components to inherit the adaptive light/dark mode root backgrounds.	2026-04-06 11:02:32 +08:00
sagit	53e1efcdc1	style: improve glassmorphism UI for background adaptability (#420 ) Increase backdrop blur and lower white/black background opacity on inner elements (tables, charts, tabs). Apply higher blur to admin layout sidebar and H5 layout navigation bar. Remove solid backgrounds inside nested cards to inherit background themes.	2026-04-06 10:23:16 +08:00
sagitchu	71d5c36ec3	style: improve glassmorphism UI for background adaptability - Increase backdrop blur and lower white/black background opacity on inner elements (tables, charts, tabs) - Apply higher blur to admin layout sidebar and H5 layout navigation bar - Remove solid backgrounds inside nested cards to inherit background themes	2026-04-06 10:21:06 +08:00