feat: 移动端UI精致化优化

- 添加页面过渡动画（淡入+滑动）
- 优化统计卡片视觉，添加渐变色和微动效
- 实现列表项左滑删除手势（编辑+删除按钮）
- 优化底部导航，缩小高度并添加点击波纹效果
- 改进空状态，添加插画和引导按钮

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/components/PageTransition.js

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+
+export default function PageTransition({ children }) {
+  const router = useRouter();
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [displayChildren, setDisplayChildren] = useState(children);
+
+  useEffect(() => {
+    const handleRouteChangeStart = () => {
+      setIsAnimating(true);
+    };
+
+    const handleRouteChangeComplete = () => {
+      setDisplayChildren(children);
+      setTimeout(() => {
+        setIsAnimating(false);
+      }, 50);
+    };
+
+    router.events.on('routeChangeStart', handleRouteChangeStart);
+    router.events.on('routeChangeComplete', handleRouteChangeComplete);
+
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChangeStart);
+      router.events.off('routeChangeComplete', handleRouteChangeComplete);
+    };
+  }, [router, children]);
+
+  useEffect(() => {
+    if (!isAnimating) {
+      setDisplayChildren(children);
+    }
+  }, [children, isAnimating]);
+
+  return (
+    <div className={`page-transition ${isAnimating ? 'page-transition--entering' : 'page-transition--active'}`}>
+      {displayChildren}
+    </div>
+  );
+}