refactor: full product interaction system redesign

Refactor homepage, reading modal, matching feature, and user profile for improved UX

#VERCEL_SKIP

Co-authored-by: undefined <undefined+undefined@users.noreply.github.com>

components/bottom-nav.tsx

@@ -2,56 +2,60 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { Home, User, Handshake } from "lucide-react"
-import { useState } from "react"
-import { MatchModal } from "@/components/match-modal"
+import { Home, User } from "lucide-react"
 
 export function BottomNav() {
   const pathname = usePathname()
-  const [showMatch, setShowMatch] = useState(false)
 
-  // 在管理后台不显示底部导航
-  if (pathname.startsWith("/admin")) {
+  // 在文档页面和管理后台不显示底部导航
+  if (pathname.startsWith("/documentation") || pathname.startsWith("/admin")) {
     return null
   }
 
+  const navItems = [
+    { href: "/", icon: Home, label: "首页" },
+    { href: "/match", emoji: "🤝", label: "匹配合作" },
+    { href: "/my", icon: User, label: "我的" },
+  ]
+
   return (
     <>
-      {/* iOS风格底部导航 - 只有3个按钮，匹配在当前页面弹窗 */}
-      <nav className="fixed bottom-0 left-0 right-0 z-40 bg-black/80 backdrop-blur-xl border-t border-white/[0.06] safe-bottom">
+      {/* iOS风格底部导航 - 只有3个按钮 */}
+      <nav className="fixed bottom-0 left-0 right-0 z-40 glass-nav safe-bottom">
         <div className="flex items-center justify-around py-2 max-w-lg mx-auto">
-          {/* 首页 */}
-          <Link href="/" className="flex flex-col items-center py-2 px-6 transition-all">
-            <Home
-              className={`w-5 h-5 mb-0.5 ${pathname === "/" ? "text-[var(--app-brand)]" : "text-white/40"}`}
-              strokeWidth={pathname === "/" ? 2.5 : 1.5}
-            />
-            <span className={`text-[10px] ${pathname === "/" ? "text-[var(--app-brand)]" : "text-white/40"}`}>
-              首页
-            </span>
-          </Link>
+          {navItems.map((item, index) => {
+            const isActive = pathname === item.href || (item.href === '/match' && pathname.startsWith('/match'))
+            const Icon = item.icon
 
-          {/* 匹配合作 - 点击弹出弹窗而不是跳转 */}
-          <button onClick={() => setShowMatch(true)} className="flex flex-col items-center py-2 px-6 transition-all">
-            <Handshake className="w-5 h-5 mb-0.5 text-white/40" strokeWidth={1.5} />
-            <span className="text-[10px] text-white/40">匹配</span>
-          </button>
-
-          {/* 我的 */}
-          <Link href="/my" className="flex flex-col items-center py-2 px-6 transition-all">
-            <User
-              className={`w-5 h-5 mb-0.5 ${pathname.startsWith("/my") ? "text-[var(--app-brand)]" : "text-white/40"}`}
-              strokeWidth={pathname.startsWith("/my") ? 2.5 : 1.5}
-            />
-            <span className={`text-[10px] ${pathname.startsWith("/my") ? "text-[var(--app-brand)]" : "text-white/40"}`}>
-              我的
-            </span>
-          </Link>
+            return (
+              <Link
+                key={index}
+                href={item.href!}
+                className="flex flex-col items-center py-2 px-4 sm:px-6 touch-feedback transition-all duration-200"
+              >
+                <div className={`w-7 h-7 flex items-center justify-center mb-1 transition-colors ${
+                  isActive ? "text-[var(--app-brand)]" : "text-[var(--app-text-tertiary)]"
+                }`}>
+                  {item.emoji ? (
+                    <span className="text-2xl">{item.emoji}</span>
+                  ) : (
+                    <Icon className="w-6 h-6" strokeWidth={isActive ? 2.5 : 1.5} />
+                  )}
+                </div>
+                <span className={`text-[10px] font-medium transition-colors ${
+                  isActive ? "text-[var(--app-brand)]" : "text-[var(--app-text-tertiary)]"
+                }`}>
+                  {item.label}
+                </span>
+                {/* 激活指示器 */}
+                {isActive && (
+                  <div className="absolute -bottom-0.5 w-1 h-1 rounded-full bg-[var(--app-brand)]" />
+                )}
+              </Link>
+            )
+          })}
         </div>
       </nav>
-
-      {/* 匹配弹窗 */}
-      <MatchModal isOpen={showMatch} onClose={() => setShowMatch(false)} />
     </>
   )
 }