'grok建议功能'

app/[locale]/dating/page.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslation } from "@/i18n/navigation";
+import Footer from "@/app/components/Footer";
 
-type TabType = "friends" | "dating";
+type TabType = "friends" | "dating" | "partner" | "roommate" | "cofounder" | "explore";
 
 interface Profile {
   id: string;
@@ -44,7 +46,10 @@ const MOCK_MATCHES: MatchCard[] = [
   { id: "m5", name: "赵梦琪", location: "厦门", timeAgo: "1年前", initial: "赵", color: "bg-rose-400", photo: "https://i.pravatar.cc/150?img=41" },
 ];
 
+const TAB_ORDER: TabType[] = ["friends", "dating", "partner", "roommate", "cofounder", "explore"];
+
 export default function DatingPage() {
+  const { t } = useTranslation("match");
   const [activeTab, setActiveTab] = useState<TabType>("friends");
   const [currentIndex, setCurrentIndex] = useState(0);
 
@@ -59,36 +64,41 @@ export default function DatingPage() {
     setCurrentIndex((i) => (hasMoreProfiles ? i + 1 : 0));
   };
 
-  const badgeText = activeTab === "dating" ? "你们都在寻找 🌹 约会" : "你们都在寻找 🤝 交友";
+  const badgeMap: Record<TabType, string> = {
+    friends: t("badgeFriends"),
+    dating: t("badgeDating"),
+    partner: t("badgePartner"),
+    roommate: t("badgeRoommate"),
+    cofounder: t("badgeCofounder"),
+    explore: t("badgeExplore"),
+  };
+  const badgeText = badgeMap[activeTab];
 
   return (
     <div className="min-h-screen bg-[#fafafa] dark:bg-gray-950">
       <div className="flex justify-center pt-6 pb-4 px-4">
-        <div className="inline-flex rounded-full bg-white dark:bg-gray-900 p-1 shadow-sm border border-gray-100 dark:border-gray-800">
-          <button
-            onClick={() => setActiveTab("friends")}
-            className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-200 ${
-              activeTab === "friends" ? "bg-[#ff4d4f] text-white shadow-sm" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
-            }`}
-          >
-            交友
-          </button>
-          <button
-            onClick={() => setActiveTab("dating")}
-            className={`px-6 py-2.5 rounded-full text-sm font-medium transition-all duration-200 ${
-              activeTab === "dating" ? "bg-[#ff4d4f] text-white shadow-sm" : "text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
-            }`}
-          >
-            约会
-          </button>
+        <div className="flex flex-wrap justify-center gap-2 max-w-2xl">
+          {TAB_ORDER.map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={`px-4 py-2 rounded-full text-xs sm:text-sm font-medium transition-all duration-200 ${
+                activeTab === tab
+                  ? "bg-[#ff4d4f] text-white shadow-sm"
+                  : "bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border border-gray-100 dark:border-gray-800"
+              }`}
+            >
+              {t(tab)}
+            </button>
+          ))}
         </div>
       </div>
 
       <div className="flex flex-col md:flex-row gap-6 max-w-7xl mx-auto px-4 pb-12">
         <aside className="hidden md:block w-72 flex-shrink-0">
           <div className="sticky top-24">
-            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">约会匹配 💕</h2>
-            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">这些人喜欢了你</p>
+            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1">{t("title")} 💕</h2>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">{t("likedYou")}</p>
             <div className="space-y-3">
               {MOCK_MATCHES.map((match) => (
                 <div key={match.id} className="flex items-center gap-3 p-3 rounded-xl bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 shadow-sm hover:shadow-md transition-shadow cursor-pointer">
@@ -109,7 +119,7 @@ export default function DatingPage() {
             <div className={`relative rounded-2xl overflow-hidden bg-gradient-to-br ${currentProfile.gradient} p-8 pb-6 shadow-xl border border-white/20`}>
               <div className="absolute top-4 right-4 flex flex-col items-end gap-1">
                 <span className="px-3 py-1.5 rounded-full bg-white/90 text-gray-800 text-xs font-medium backdrop-blur-sm">{badgeText}</span>
-                <a href="#" className="text-[#ff4d4f] hover:text-red-600 text-sm font-medium">举报资料</a>
+                <a href="#" className="text-[#ff4d4f] hover:text-red-600 text-sm font-medium">{t("report")}</a>
               </div>
               <div className="flex justify-center mt-12 mb-6">
                 <img src={currentProfile.photo} alt={currentProfile.name} className="w-28 h-28 rounded-full shadow-lg border-4 border-white/50 object-cover" />
@@ -119,7 +129,7 @@ export default function DatingPage() {
                 <p className="text-white/90 text-sm mt-1">📍 {currentProfile.location}</p>
               </div>
               <div className="mb-4">
-                <p className="text-white/90 text-xs font-medium mb-2">匹配标签:</p>
+                <p className="text-white/90 text-xs font-medium mb-2">{t("matchTags")}:</p>
                 <div className="flex flex-wrap gap-2 justify-center">
                   {currentProfile.tags.map((tag) => (
                     <span key={tag} className="px-3 py-1 rounded-full bg-white/80 text-gray-800 text-xs font-medium">{tag}</span>
@@ -129,16 +139,16 @@ export default function DatingPage() {
               <p className="text-white/95 text-sm leading-relaxed text-center mb-8 px-2">{currentProfile.bio}</p>
               <div className="flex items-center justify-center gap-8">
                 <div className="flex flex-col items-center gap-2">
-                  <button onClick={handleDislike} className="w-16 h-16 rounded-full bg-white shadow-lg flex items-center justify-center text-[#ff4d4f] hover:bg-red-50 hover:scale-105 active:scale-95 transition-all" aria-label="不感兴趣">
+                  <button onClick={handleDislike} className="w-16 h-16 rounded-full bg-white shadow-lg flex items-center justify-center text-[#ff4d4f] hover:bg-red-50 hover:scale-105 active:scale-95 transition-all" aria-label={t("dislike")}>
                     <span className="text-2xl">✕</span>
                   </button>
-                  <span className="text-xs text-white/80 font-medium">不感兴趣</span>
+                  <span className="text-xs text-white/80 font-medium">{t("dislike")}</span>
                 </div>
                 <div className="flex flex-col items-center gap-2">
-                  <button onClick={handleLike} className="w-16 h-16 rounded-full bg-[#22c55e] shadow-lg flex items-center justify-center text-white hover:bg-[#16a34a] hover:scale-105 active:scale-95 transition-all" aria-label="喜欢">
+                  <button onClick={handleLike} className="w-16 h-16 rounded-full bg-[#22c55e] shadow-lg flex items-center justify-center text-white hover:bg-[#16a34a] hover:scale-105 active:scale-95 transition-all" aria-label={t("like")}>
                     <span className="text-2xl">💚</span>
                   </button>
-                  <span className="text-xs text-white/80 font-medium">喜欢</span>
+                  <span className="text-xs text-white/80 font-medium">{t("like")}</span>
                 </div>
               </div>
             </div>
@@ -147,6 +157,7 @@ export default function DatingPage() {
         </main>
         <div className="hidden lg:block w-72 flex-shrink-0" />
       </div>
+      <Footer />
     </div>
   );
 }