update

src/components/IOSCompatibility.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface IOSCompatibilityProps {
+  children: React.ReactNode;
+}
+
+export function IOSCompatibility({ children }: IOSCompatibilityProps) {
+  const [isIOS, setIsIOS] = useState(false);
+  const [isSafari, setIsSafari] = useState(false);
+
+  useEffect(() => {
+    // 检测iOS设备
+    const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+    setIsIOS(iOS);
+
+    // 检测Safari浏览器
+    const safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    setIsSafari(safari);
+
+    // 如果是iOS Safari，添加特定的CSS类
+    if (iOS && safari) {
+      document.documentElement.classList.add('ios-safari');
+      document.body.classList.add('ios-safari');
+    }
+
+    // 清理函数
+    return () => {
+      document.documentElement.classList.remove('ios-safari');
+      document.body.classList.remove('ios-safari');
+    };
+  }, []);
+
+  // 如果是iOS Safari，应用特定的样式优化
+  useEffect(() => {
+    if (isIOS && isSafari) {
+      // 禁用一些可能导致性能问题的CSS属性
+      const style = document.createElement('style');
+      style.textContent = `
+        .ios-safari * {
+          -webkit-transform: translateZ(0);
+          transform: translateZ(0);
+          -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+        }
+        
+        .ios-safari .animate-pulse {
+          animation: none !important;
+        }
+        
+        .ios-safari .particle {
+          animation: none !important;
+          opacity: 0.4 !important;
+        }
+        
+        .ios-safari .shape {
+          animation: none !important;
+          opacity: 0.2 !important;
+        }
+        
+        .ios-safari .logo-background-glow {
+          animation: none !important;
+        }
+        
+        .ios-safari .main-katelya-logo {
+          animation: none !important;
+        }
+        
+        .ios-safari .katelya-logo {
+          animation: none !important;
+        }
+        
+        .ios-safari .bottom-logo {
+          animation: none !important;
+        }
+        
+        .ios-safari .backdrop-blur-xl {
+          backdrop-filter: none !important;
+          -webkit-backdrop-filter: none !important;
+        }
+        
+        .ios-safari .bg-white\\/90 {
+          background-color: rgba(255, 255, 255, 0.95) !important;
+        }
+        
+        .ios-safari .dark .bg-zinc-900\\/90 {
+          background-color: rgba(24, 24, 27, 0.95) !important;
+        }
+      `;
+      document.head.appendChild(style);
+
+      return () => {
+        document.head.removeChild(style);
+      };
+    }
+  }, [isIOS, isSafari]);
+
+  return <>{children}</>;
+}
+
+export default IOSCompatibility;

src/components/MobileBottomNav.tsx

@@ -61,8 +61,8 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
       }}
     >
       {/* 顶部装饰线 */}
-      <div className="absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-purple-500/50 to-transparent"></div>
-      
+      <div className='absolute top-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-purple-500/50 to-transparent'></div>
+
       <ul className='flex items-center'>
         {navItems.map((item) => {
           const active = isActive(item.href);
@@ -71,16 +71,16 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
               <Link
                 href={item.href}
                 className={`flex flex-col items-center justify-center w-full h-14 gap-1 text-xs transition-all duration-200 relative ${
-                  active 
-                    ? 'transform -translate-y-1' 
+                  active
+                    ? 'transform -translate-y-1'
                     : 'hover:transform hover:-translate-y-0.5'
                 }`}
               >
                 {/* 激活状态的背景光晕 */}
                 {active && (
-                  <div className="absolute inset-0 bg-purple-500/10 rounded-lg mx-2 my-1 border border-purple-300/20"></div>
+                  <div className='absolute inset-0 bg-purple-500/10 rounded-lg mx-2 my-1 border border-purple-300/20'></div>
                 )}
-                
+
                 <item.icon
                   className={`h-6 w-6 transition-all duration-200 ${
                     active
@@ -106,4 +106,4 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
   );
 };
 
-export default MobileBottomNav;
+export default MobileBottomNav;

src/components/MobileHeader.tsx

@@ -41,4 +41,4 @@ const MobileHeader = ({ showBackButton = false }: MobileHeaderProps) => {
   );
 };
 
-export default MobileHeader;
+export default MobileHeader;

src/components/PageLayout.tsx

@@ -188,11 +188,17 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
             {/* 使用flex布局实现三等分 */}
             <div className='flex w-full min-h-screen md:min-h-[calc(100vh-10rem)]'>
               {/* 左侧留白区域 - 占1/6 */}
-              <div className='hidden md:block flex-shrink-0' style={{ width: '16.67%' }}></div>
-              
+              <div
+                className='hidden md:block flex-shrink-0'
+                style={{ width: '16.67%' }}
+              ></div>
+
               {/* 主内容区 - 占2/3 */}
-              <div className='flex-1 md:flex-none rounded-container w-full' style={{ width: '66.67%' }}>
-                <div 
+              <div
+                className='flex-1 md:flex-none rounded-container w-full'
+                style={{ width: '66.67%' }}
+              >
+                <div
                   className='p-4 md:p-8 lg:p-10'
                   style={{
                     paddingBottom: 'calc(3.5rem + env(safe-area-inset-bottom))',
@@ -201,9 +207,12 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
                   {children}
                 </div>
               </div>
-              
+
               {/* 右侧留白区域 - 占1/6 */}
-              <div className='hidden md:block flex-shrink-0' style={{ width: '16.67%' }}></div>
+              <div
+                className='hidden md:block flex-shrink-0'
+                style={{ width: '16.67%' }}
+              ></div>
             </div>
           </main>
         </div>
@@ -217,4 +226,4 @@ const PageLayout = ({ children, activePath = '/' }: PageLayoutProps) => {
   );
 };
 
-export default PageLayout;
+export default PageLayout;

src/components/Sidebar.tsx

@@ -272,4 +272,4 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
   );
 };
 
-export default Sidebar;
+export default Sidebar;