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.
This commit is contained in:
sagitchu
2026-04-06 12:26:29 +08:00
parent 74ed74ba00
commit b42516cea1
10 changed files with 26 additions and 30 deletions
+2 -2
View File
@@ -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",
+1 -1
View File
@@ -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,