From 7b9b59644e0120de47a11d7b573bbcecb6d5034c Mon Sep 17 00:00:00 2001
From: sagit <36596628+Sagit-chu@users.noreply.github.com>
Date: Fri, 3 Apr 2026 20:55:43 +0800
Subject: [PATCH] fix(ui): restore missing UI transition animations (#408)
- Wrap `Routes` with `AnimatePresence` to enable framer-motion page transition exit animations and fix harsh route changes.
- Replace `tw-animate-css` with `tailwindcss-animate` to properly bundle transition classes (like `animate-in`, `animate-accordion-down`) under Tailwind v4.
- This restores animation to modals, accordions, and all page navigations.
- Fix accessibility warning on table cell span element.
Fixes #283
---
vite-frontend/package.json | 2 +-
vite-frontend/src/App.tsx | 207 ++++++++++++++-------------
vite-frontend/src/pages/forward.tsx | 18 +--
vite-frontend/src/styles/globals.css | 2 +-
4 files changed, 118 insertions(+), 111 deletions(-)
diff --git a/vite-frontend/package.json b/vite-frontend/package.json
index cc7fa3d..ed494af 100644
--- a/vite-frontend/package.json
+++ b/vite-frontend/package.json
@@ -52,7 +52,7 @@
"tailwind-merge": "^2.5.5",
"tailwind-variants": "1.0.0",
"tailwindcss": "4.1.11",
- "tw-animate-css": "^1.3.0"
+ "tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@eslint/compat": "1.2.8",
diff --git a/vite-frontend/src/App.tsx b/vite-frontend/src/App.tsx
index d2bd347..b7f1818 100644
--- a/vite-frontend/src/App.tsx
+++ b/vite-frontend/src/App.tsx
@@ -1,5 +1,6 @@
-import { Route, Routes, useNavigate } from "react-router-dom";
+import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
import { useEffect } from "react";
+import { AnimatePresence } from "framer-motion";
import IndexPage from "@/pages/index";
import ChangePasswordPage from "@/pages/change-password";
@@ -87,6 +88,8 @@ const LoginRoute = () => {
};
function App() {
+ const location = useLocation();
+
// 立即设置页面标题（使用已从缓存读取的配置）
useEffect(() => {
document.title = siteConfig.name;
@@ -105,106 +108,108 @@ function App() {
}, []);
return (
-
- } path="/" />
-
-
-
- }
- path="/change-password"
- />
-
-
-
- }
- path="/dashboard"
- />
-
-
-
- }
- path="/monitor"
- />
-
-
-
- }
- path="/forward"
- />
-
-
-
- }
- path="/tunnel"
- />
-
-
-
- }
- path="/node"
- />
-
-
-
- }
- path="/user"
- />
-
-
-
- }
- path="/group"
- />
-
-
-
- }
- path="/profile"
- />
-
-
-
- }
- path="/limit"
- />
-
-
-
- }
- path="/config"
- />
-
-
-
- }
- path="/panel-sharing"
- />
- } path="/settings" />
-
+
+
+ } path="/" />
+
+
+
+ }
+ path="/change-password"
+ />
+
+
+
+ }
+ path="/dashboard"
+ />
+
+
+
+ }
+ path="/monitor"
+ />
+
+
+
+ }
+ path="/forward"
+ />
+
+
+
+ }
+ path="/tunnel"
+ />
+
+
+
+ }
+ path="/node"
+ />
+
+
+
+ }
+ path="/user"
+ />
+
+
+
+ }
+ path="/group"
+ />
+
+
+
+ }
+ path="/profile"
+ />
+
+
+
+ }
+ path="/limit"
+ />
+
+
+
+ }
+ path="/config"
+ />
+
+
+
+ }
+ path="/panel-sharing"
+ />
+ } path="/settings" />
+
+
);
}
diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index 33f5dea..bd85489 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -973,12 +973,13 @@ const SortableCompactTableRow = ({
- copyToClipboard(forward.name, "规则名")}
>
{forward.name}
-
+
{forward.tunnelName}
- {forward.tunnelTrafficRatio !== undefined && normalizeTunnelTrafficRatio(forward.tunnelTrafficRatio) !== 1 && (
-
- {formatTunnelTrafficRatio(forward.tunnelTrafficRatio)}
-
- )}
+ {forward.tunnelTrafficRatio !== undefined &&
+ normalizeTunnelTrafficRatio(forward.tunnelTrafficRatio) !== 1 && (
+
+ {formatTunnelTrafficRatio(forward.tunnelTrafficRatio)}
+
+ )}