优化

src/app/api/prediction/route.js

@@ -96,6 +96,9 @@ export async function GET(request) {
           userInfo: 0,
         },
       },
+      {
+        $sort: { _id: -1 }, // -1 表示降序，最新的排在最前面
+      },
     ];
 
     if (matchInfo) {

src/app/api/user/route.js

@@ -13,6 +13,20 @@ export async function GET(request) {
     const current = parseInt(searchParams.get("current")) || 1;
     const pageSize = parseInt(searchParams.get("pageSize")) || 10;
 
+    const id = searchParams.get("id");
+
+    if (id) {
+      const user = await User.findById(id).select("-password");
+      if (!user) {
+        return NextResponse.json(
+          { success: false, message: "User not found" },
+          { status: 404 }
+        );
+      }
+      const response = NextResponse.json({ success: true, data: user });
+      return setCORSHeaders(response);
+    }
+
     const searchQuery = {};
 
     for (const [key, value] of searchParams.entries()) {

src/app/models/Match.js

@@ -1,46 +1,49 @@
 import mongoose from "mongoose";
 
-const MatchSchema = new mongoose.Schema({
-  homeTeam: {
-    name: String,
-    logo: String,
-  },
-  awayTeam: {
-    name: String,
-    logo: String,
-  },
-  time: { type: String },
-  date: Date,
-  league: String,
-  odds: {
-    home: Number,
-    draw: Number,
-    away: Number,
-  },
-  status: {
-    type: String,
-    enum: ["未开始", "进行中", "已结束"],
-    default: "未开始",
-  },
-  matchDay: Number,
-  pickedBy: Number,
-  homeTeamScore: { type: Number, default: null }, // 主队得分
-  awayTeamScore: { type: Number, default: null }, // 客队得分
-  result: {
-    whoWillWin: {
-      type: String,
-      enum: ["home", "away", "draw"],
+const MatchSchema = new mongoose.Schema(
+  {
+    homeTeam: {
+      name: String,
+      logo: String,
     },
-    firstTeamToScore: {
+    awayTeam: {
+      name: String,
+      logo: String,
+    },
+    time: { type: String },
+    date: Date,
+    league: String,
+    odds: {
+      home: Number,
+      draw: Number,
+      away: Number,
+    },
+    status: {
       type: String,
-      enum: ["home", "away", "no_goal"],
+      enum: ["未开始", "进行中", "已结束"],
+      default: "未开始",
+    },
+    matchDay: Number,
+    pickedBy: Number,
+    homeTeamScore: { type: Number, default: null }, // 主队得分
+    awayTeamScore: { type: Number, default: null }, // 客队得分
+    result: {
+      whoWillWin: {
+        type: String,
+        enum: ["home", "away", "draw"],
+      },
+      firstTeamToScore: {
+        type: String,
+        enum: ["home", "away", "no_goal"],
+      },
+    },
+    pointRewards: {
+      whoWillWin: { type: Number, default: null },
+      firstTeamToScore: { type: Number, default: null },
+      totalGoals: { type: Number, default: null },
     },
   },
-  pointRewards: {
-    whoWillWin: { type: Number, default: null },
-    firstTeamToScore: { type: Number, default: null },
-    totalGoals: { type: Number, default: null },
-  },
-});
+  { timestamps: true }
+);
 
 export default mongoose.models.Match || mongoose.model("Match", MatchSchema);

src/app/models/PointHistory.js

@@ -1,12 +1,14 @@
 import mongoose from "mongoose";
 
-const PointHistorySchema = new mongoose.Schema({
-  user: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true },
-  points: { type: Number, required: true },
-  reason: { type: String, required: true },
-  match: { type: mongoose.Schema.Types.ObjectId, ref: "Match" },
-  createdAt: { type: Date, default: Date.now },
-});
+const PointHistorySchema = new mongoose.Schema(
+  {
+    user: { type: mongoose.Schema.Types.ObjectId, ref: "User", required: true },
+    points: { type: Number, required: true },
+    reason: { type: String, required: true },
+    match: { type: mongoose.Schema.Types.ObjectId, ref: "Match" },
+  },
+  { timestamps: true }
+);
 
 export default mongoose.models.PointHistory ||
   mongoose.model("PointHistory", PointHistorySchema);

src/app/models/Prediction.js

@@ -1,43 +1,46 @@
 import mongoose from "mongoose";
 
-const PredictionSchema = new mongoose.Schema({
-  user: { type: mongoose.Schema.Types.ObjectId, ref: "User" }, // 用户ID
-  match: { type: mongoose.Schema.Types.ObjectId, ref: "Match" }, // 比赛ID
+const PredictionSchema = new mongoose.Schema(
+  {
+    user: { type: mongoose.Schema.Types.ObjectId, ref: "User" }, // 用户ID
+    match: { type: mongoose.Schema.Types.ObjectId, ref: "Match" }, // 比赛ID
 
-  // 胜负预测
-  whoWillWin: {
-    type: String,
-    enum: ["home", "away", "draw"], // 主队、客队或平局
-  },
-  whoWillWinResult: {
-    type: String,
-    enum: ["correct", "incorrect", "pending"],
-    default: "pending",
-  },
+    // 胜负预测
+    whoWillWin: {
+      type: String,
+      enum: ["home", "away", "draw"], // 主队、客队或平局
+    },
+    whoWillWinResult: {
+      type: String,
+      enum: ["correct", "incorrect", "pending"],
+      default: "pending",
+    },
 
-  // 首先得分预测
-  firstTeamToScore: {
-    type: String,
-    enum: ["home", "away", "no_goal"], // 主队、客队或无进球
-  },
-  firstTeamToScoreResult: {
-    type: String,
-    enum: ["correct", "incorrect", "pending"],
-    default: "pending",
-  },
-  firstTeamToScoreLogo: String, // 首次得分球队的logo
+    // 首先得分预测
+    firstTeamToScore: {
+      type: String,
+      enum: ["home", "away", "no_goal"], // 主队、客队或无进球
+    },
+    firstTeamToScoreResult: {
+      type: String,
+      enum: ["correct", "incorrect", "pending"],
+      default: "pending",
+    },
+    firstTeamToScoreLogo: String, // 首次得分球队的logo
 
-  // 总进球数预测
-  totalGoals: Number, // 总进球数
-  totalGoalsResult: {
-    type: String,
-    enum: ["correct", "incorrect", "pending"],
-    default: "pending",
-  },
+    // 总进球数预测
+    totalGoals: Number, // 总进球数
+    totalGoalsResult: {
+      type: String,
+      enum: ["correct", "incorrect", "pending"],
+      default: "pending",
+    },
 
-  pointsEarned: { type: Number, default: null }, // 用户预测获得的积分
-  isCorrect: { type: Boolean, default: null },
-});
+    pointsEarned: { type: Number, default: null }, // 用户预测获得的积分
+    isCorrect: { type: Boolean, default: null },
+  },
+  { timestamps: true }
+);
 
 export default mongoose.models.Prediction ||
   mongoose.model("Prediction", PredictionSchema);

src/app/page.js

@@ -1,16 +1,96 @@
 "use client";
+import { useState, useEffect } from "react";
 import MatchDays from "./ui/MatchDays";
 import MatchPrediction from "./ui/MatchPrediction";
-
-import { useState } from "react";
+import Image from "next/image";
+import { User } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 export default function Home() {
   const [selectedDayMatches, setSelectedDayMatches] = useState([]);
+  const [currentUser, setCurrentUser] = useState(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const user = JSON.parse(localStorage.getItem("currentUser") || "null");
+    setCurrentUser(user);
+  }, []);
+
+  const handlePersonalCenterClick = () => {
+    // 实现个人中心点击逻辑
+    console.log("Personal center clicked");
+    router.push("/personal-center");
+  };
 
   return (
-    <>
-      <MatchDays onSelectMatch={setSelectedDayMatches} />
-      <MatchPrediction selectedDayMatches={selectedDayMatches} />
-    </>
+    <div className="bg-blue-600 text-white min-h-screen">
+      {/* Floating Header */}
+      <header className="h-16 fixed top-0 left-0 right-0 bg-[#ea1c24] shadow-md z-10 transition-all duration-300">
+        <div className="max-w-md mx-auto p-4">
+          <div className="flex justify-between items-center">
+            {/* Logo */}
+            <div className="flex items-center">
+              <Image
+                src="/images/header_logo.png" // 请替换为实际的 logo 路径
+                alt="Logo"
+                width={75}
+                height={75}
+                // className="mr-2"
+              />
+              <span className="text-lg font-bold">智博体育</span>
+            </div>
+
+            {/* User Info or Login Button */}
+            {currentUser ? (
+              <div
+                className="flex items-center cursor-pointer"
+                onClick={handlePersonalCenterClick}
+              >
+                {currentUser.avatar ? (
+                  <Image
+                    src={currentUser.avatar}
+                    alt="User Avatar"
+                    width={28}
+                    height={28}
+                    className="rounded-full mr-2"
+                  />
+                ) : (
+                  // <div className="w-7 h-7 bg-gray-300 rounded-full flex items-center justify-center mr-2">
+                  <div className="w-7 h-7  mr-2">
+                    {/* <User className="w-4 h-4 text-blue-600" /> */}
+                    <Image
+                      src="/images/cluo.webp"
+                      alt="User Avatar"
+                      width={28}
+                      height={28}
+                      className="rounded-full mr-2"
+                    />
+                  </div>
+                )}
+                <span className="text-sm font-bold">
+                  {currentUser.username}
+                </span>
+              </div>
+            ) : (
+              <button
+                className="bg-white text-blue-600 px-3 py-1 rounded-full text-sm font-bold"
+                onClick={() => router.push("/login")}
+              >
+                登录
+              </button>
+            )}
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="max-w-md mx-auto  pt-16">
+        <MatchDays onSelectMatch={setSelectedDayMatches} />
+        <MatchPrediction
+          selectedDayMatches={selectedDayMatches}
+          currentUser={currentUser}
+        />
+      </main>
+    </div>
   );
 }

src/app/personal-center/page.jsx

@@ -2,7 +2,14 @@
 
 import React, { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
-import { User, ChevronLeft, MessageSquare } from "lucide-react";
+import {
+  User,
+  ChevronLeft,
+  MessageSquare,
+  ArrowUpCircle,
+  ArrowDownCircle,
+} from "lucide-react";
+import Image from "next/image";
 import InfiniteScroll from "react-infinite-scroll-component";
 
 const PAGE_SIZE = 10;
@@ -18,7 +25,7 @@ const PersonalCenter = () => {
   const [hasMorePredictions, setHasMorePredictions] = useState(true);
   const [hasMorePoints, setHasMorePoints] = useState(true);
 
-  const fetchData = useCallback(async () => {
+  const fetchInitialData = useCallback(async () => {
     try {
       setIsLoading(true);
       const storedUser = JSON.parse(
@@ -26,52 +33,102 @@ const PersonalCenter = () => {
       );
       setUser(storedUser);
 
-      if (storedUser && storedUser.username) {
-        const predictionResponse = await fetch(
-          `/api/prediction?username=${encodeURIComponent(
-            storedUser.username
-          )}&current=${predictionPage}&pageSize=${PAGE_SIZE}`
-        );
-        const predictionData = await predictionResponse.json();
+      if (storedUser && storedUser.id) {
+        const [predictionResponse, pointResponse, userResponse] =
+          await Promise.all([
+            fetch(
+              `/api/prediction?username=${encodeURIComponent(
+                storedUser.username
+              )}&current=1&pageSize=${PAGE_SIZE}`
+            ),
+            fetch(
+              `/api/point-history?userId=${encodeURIComponent(
+                storedUser.id
+              )}&current=1&pageSize=${PAGE_SIZE}`
+            ),
+            fetch(`/api/user?id=${encodeURIComponent(storedUser.id)}`),
+          ]);
+
+        const [predictionData, pointData, userData] = await Promise.all([
+          predictionResponse.json(),
+          pointResponse.json(),
+          userResponse.json(),
+        ]);
 
         if (predictionData.success) {
-          setPredictions((prev) => [...prev, ...predictionData.data]);
+          setPredictions(predictionData.data);
           setHasMorePredictions(predictionData.data.length === PAGE_SIZE);
         } else {
           console.error("Failed to fetch predictions:", predictionData.error);
         }
 
-        const pointResponse = await fetch(
-          `/api/point-history?userId=${encodeURIComponent(
-            storedUser.id
-          )}&current=${pointPage}&pageSize=${PAGE_SIZE}`
-        );
-        const pointData = await pointResponse.json();
-
         if (pointData.success) {
-          setPoints((prev) => [...prev, ...pointData.data]);
+          setPoints(pointData.data);
           setHasMorePoints(pointData.data.length === PAGE_SIZE);
         } else {
           console.error("Failed to fetch point history:", pointData.error);
         }
+
+        if (userData.success && userData.data) {
+          // 更新用户信息，特别是积分
+          const updatedUser = { ...storedUser, points: userData.data.points };
+          setUser(updatedUser);
+          localStorage.setItem("currentUser", JSON.stringify(updatedUser));
+        } else {
+          console.error("Failed to fetch user data:", userData.error);
+        }
       }
     } catch (error) {
       console.error("Error fetching data:", error);
     } finally {
       setIsLoading(false);
     }
-  }, [predictionPage, pointPage]);
+  }, []);
 
   useEffect(() => {
-    fetchData();
-  }, [fetchData]);
+    fetchInitialData();
+  }, [fetchInitialData]);
 
-  const loadMorePredictions = () => {
-    setPredictionPage((prevPage) => prevPage + 1);
+  const loadMorePredictions = async () => {
+    if (!hasMorePredictions || !user) return;
+    try {
+      const response = await fetch(
+        `/api/prediction?username=${encodeURIComponent(
+          user.username
+        )}&current=${predictionPage + 1}&pageSize=${PAGE_SIZE}`
+      );
+      const data = await response.json();
+      if (data.success) {
+        setPredictions((prev) => [...prev, ...data.data]);
+        setPredictionPage((prev) => prev + 1);
+        setHasMorePredictions(data.data.length === PAGE_SIZE);
+      } else {
+        console.error("Failed to fetch more predictions:", data.error);
+      }
+    } catch (error) {
+      console.error("Error fetching more predictions:", error);
+    }
   };
 
-  const loadMorePoints = () => {
-    setPointPage((prevPage) => prevPage + 1);
+  const loadMorePoints = async () => {
+    if (!hasMorePoints || !user) return;
+    try {
+      const response = await fetch(
+        `/api/point-history?userId=${encodeURIComponent(user.id)}&current=${
+          pointPage + 1
+        }&pageSize=${PAGE_SIZE}`
+      );
+      const data = await response.json();
+      if (data.success) {
+        setPoints((prev) => [...prev, ...data.data]);
+        setPointPage((prev) => prev + 1);
+        setHasMorePoints(data.data.length === PAGE_SIZE);
+      } else {
+        console.error("Failed to fetch more point history:", data.error);
+      }
+    } catch (error) {
+      console.error("Error fetching more point history:", error);
+    }
   };
 
   if (isLoading) {
@@ -91,13 +148,24 @@ const PersonalCenter = () => {
   return (
     <div className="bg-blue-600 text-white min-h-screen p-6">
       <div className="flex items-center mb-6">
-        <ChevronLeft className="cursor-pointer" onClick={() => router.back()} />
+        <ChevronLeft
+          className="cursor-pointer"
+          onClick={() => router.back()}
+          size={32}
+        />
         <h1 className="text-2xl font-bold ml-4">个人中心</h1>
       </div>
 
       <div className="bg-white text-black rounded-lg p-4 mb-6">
         <div className="flex items-center">
-          <User className="w-12 h-12 text-blue-600 mr-4" />
+          {/* <User className="w-12 h-12 text-blue-600 mr-4" /> */}
+          <Image
+            src="/images/cluo.webp"
+            alt="User Avatar"
+            width={50}
+            height={50}
+            className="rounded-full mr-2"
+          />
           <div>
             <h2 className="text-xl font-bold">{user.username}</h2>
             <p className="text-gray-600">积分: {user.points}</p>
@@ -106,42 +174,90 @@ const PersonalCenter = () => {
       </div>
 
       <div className="bg-white text-black rounded-lg p-4 mb-6">
-        <h3 className="text-lg font-bold mb-2">预测记录</h3>
-        <div
-          id="predictionScroll"
-          style={{ height: "300px", overflow: "auto" }}
-        >
+        <h3 className="text-xl font-bold mb-2 text-blue-600">预测记录</h3>
+        <div id="predictionScroll" className="h-[300px] overflow-auto">
           <InfiniteScroll
             dataLength={predictions.length}
             next={loadMorePredictions}
             hasMore={hasMorePredictions}
-            loader={<h4>Loading...</h4>}
-            endMessage={<p className="text-center">没有更多记录了</p>}
+            loader={<h4 className="text-center text-gray-500">加载中...</h4>}
+            endMessage={
+              <p className="text-center text-gray-500">没有更多记录了</p>
+            }
             scrollableTarget="predictionScroll"
           >
             {predictions.map((prediction) => (
-              <div key={prediction.id} className="mb-2 p-2 border-b">
-                <p className="font-bold">{prediction.matchInfo}</p>
-                <p>比赛时间: {prediction.matchTime}</p>
-                <p>
-                  胜负预测:{" "}
-                  {prediction.whoWillWin === "home"
-                    ? "主胜"
-                    : prediction.whoWillWin === "away"
-                    ? "客胜"
-                    : "平局"}
+              <div
+                key={prediction.id}
+                className="mb-2 border-b border-gray-200 hover:bg-gray-50 transition duration-150 ease-in-out"
+              >
+                <p className="font-bold text-lg text-blue-700 mb-2">
+                  {prediction.matchInfo}
+                </p>
+                <p className=" text-gray-600 mb-2">
+                  比赛时间:{" "}
+                  <span className="font-medium text-black">
+                    {prediction.matchTime}
+                  </span>
+                </p>
+                <p className="mb-1">
+                  胜负预测:
+                  <span
+                    className={`font-medium ${
+                      prediction.whoWillWin === "home"
+                        ? "text-red-600"
+                        : prediction.whoWillWin === "away"
+                        ? "text-green-600"
+                        : "text-yellow-600"
+                    }`}
+                  >
+                    {prediction.whoWillWin === "home"
+                      ? "主胜"
+                      : prediction.whoWillWin === "away"
+                      ? "客胜"
+                      : "平局"}
+                  </span>
+                </p>
+                <p className="mb-1">
+                  首先得分:
+                  <span
+                    className={`font-medium ${
+                      prediction.firstTeamToScore === "home"
+                        ? "text-red-600"
+                        : prediction.firstTeamToScore === "away"
+                        ? "text-green-600"
+                        : "text-gray-600"
+                    }`}
+                  >
+                    {prediction.firstTeamToScore === "home"
+                      ? "主队"
+                      : prediction.firstTeamToScore === "away"
+                      ? "客队"
+                      : "无进球"}
+                  </span>
+                </p>
+                <p className="mb-1">
+                  总进球数预测:{" "}
+                  <span className="font-medium text-purple-600">
+                    {prediction.totalGoals}
+                  </span>
+                </p>
+                <p className="mb-1">
+                  获得积分:{" "}
+                  <span className="font-medium text-orange-600">
+                    {prediction.pointsEarned}
+                  </span>
                 </p>
                 <p>
-                  首先得分:{" "}
-                  {prediction.firstTeamToScore === "home"
-                    ? "主队"
-                    : prediction.firstTeamToScore === "away"
-                    ? "客队"
-                    : "无进球"}
+                  预测结果:
+                  <span
+                    className={`font-medium ${
+                      prediction.isCorrect ? "text-green-600" : "text-red-600"
+                    }`}
+                  >
+                    {prediction.isCorrect ? "正确" : "错误"}
+                  </span>
                 </p>
-                <p>总进球数预测: {prediction.totalGoals}</p>
-                <p>获得积分: {prediction.pointsEarned}</p>
-                <p>预测结果: {prediction.isCorrect ? "正确" : "错误"}</p>
               </div>
             ))}
           </InfiniteScroll>
@@ -149,7 +265,7 @@ const PersonalCenter = () => {
       </div>
 
       <div className="bg-white text-black rounded-lg p-4 mb-6">
-        <h3 className="text-lg font-bold mb-2">积分记录</h3>
+        <h3 className="text-lg font-bold mb-2 text-blue-700">积分记录</h3>
         <div id="pointScroll" style={{ height: "300px", overflow: "auto" }}>
           <InfiniteScroll
             dataLength={points.length}
@@ -160,11 +276,28 @@ const PersonalCenter = () => {
             scrollableTarget="pointScroll"
           >
             {points.map((point) => (
-              <div key={point.id} className="mb-2">
-                <p>
-                  {new Date(point.createdAt).toLocaleDateString()}:{" "}
-                  {point.reason} - {point.points}分
-                </p>
+              <div key={point.id} className="mb-3 flex items-start">
+                <div className="mr-3 mt-1 flex-shrink-0">
+                  {point.points > 0 ? (
+                    <ArrowUpCircle className="text-green-500 w-5 h-5" />
+                  ) : (
+                    <ArrowDownCircle className="text-red-500 w-5 h-5" />
+                  )}
+                </div>
+                <div className="flex-grow mr-4">
+                  <p className="text-sm text-gray-600">
+                    {new Date(point.createdAt).toLocaleDateString()}
+                  </p>
+                  <p className="font-medium">{point.reason}</p>
+                </div>
+                <div
+                  className={`flex-shrink-0 font-bold ${
+                    point.points > 0 ? "text-green-600" : "text-red-600"
+                  }`}
+                >
+                  {point.points > 0 ? "+" : ""}
+                  {point.points}
+                </div>
               </div>
             ))}
           </InfiniteScroll>

src/app/ui/MatchPrediction.jsx

@@ -33,11 +33,9 @@ const getValidImageUrl = (logo) => {
   return defaultLogo;
 };
 
-const MatchPrediction = ({ selectedDayMatches }) => {
+const MatchPrediction = ({ selectedDayMatches, currentUser }) => {
   const router = useRouter();
 
-  const [currentUser, setCurrentUser] = useState(null);
-
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [alert, setAlert] = useState(null);
 
@@ -81,15 +79,6 @@ const MatchPrediction = ({ selectedDayMatches }) => {
   console.log("predictionMap", predictionMap);
 
   useEffect(() => {
-    const user = JSON.parse(localStorage.getItem("currentUser") || "null");
-    setCurrentUser(user);
-  }, []);
-
-  const handlePersonalCenterClick = () => {
-    router.push("/personal-center");
-  };
-
-  useEffect(() => {
     console.log("currentUser", currentUser);
     const fetchPredictions = async () => {
       try {
@@ -279,27 +268,8 @@ const MatchPrediction = ({ selectedDayMatches }) => {
   };
 
   return (
-    <div className="bg-blue-600 text-white p-6 max-w-md mx-auto  min-h-screen">
-      {/* Personal Center Entry */}
-      <div className="flex justify-end items-center mb-4">
-        {currentUser ? (
-          <div
-            className="flex items-center cursor-pointer"
-            onClick={handlePersonalCenterClick}
-          >
-            <User className="w-5 h-5 mr-2" />
-            <span className="text-sm font-bold">{currentUser.username}</span>
-          </div>
-        ) : (
-          <button
-            className="bg-white text-blue-600 px-3 py-1 rounded-full text-sm"
-            onClick={() => router.push("/login")}
-          >
-            登录
-          </button>
-        )}
-      </div>
-      <>
+    <div className="bg-blue-600 text-white p-4 max-w-md mx-auto  min-h-screen">
+      <div>
         {selectedDayMatches.map((match) => {
           const formattedDate = format(new Date(match.date), "MM月dd日EEEE", {
             locale: zhCN,
@@ -327,6 +297,9 @@ const MatchPrediction = ({ selectedDayMatches }) => {
 
               <h2 className="text-center text-2xl font-bold my-4">
                 谁将获胜？
+                <span className="text-sm font-normal ml-2 text-yellow-300">
+                  (猜对可得 {match.pointRewards.whoWillWin} 积分)
+                </span>
               </h2>
 
               <div className="flex justify-between mb-6 gap-2 px-4">
@@ -354,7 +327,6 @@ const MatchPrediction = ({ selectedDayMatches }) => {
                       width={40}
                       height={40}
                       alt="平局"
-                      // className="mb-2"
                     />
                   </div>
 
@@ -399,7 +371,12 @@ const MatchPrediction = ({ selectedDayMatches }) => {
 
               <div className="px-3 bg-blue-800">
                 <div className="flex justify-between items-center  h-12 bg-blue-800 border-b border-[#f2f2f2]">
-                  <span className="text-sm">首先进球的球队</span>
+                  <span className="text-sm">
+                    首先进球的球队
+                    <span className="text-xs text-yellow-300 ml-2">
+                      (猜对可得 {match.pointRewards.firstTeamToScore} 积分)
+                    </span>
+                  </span>
                   {selectedFirstTeamToScoreOfMatch[match._id] ||
                   firstTeamToScore ? (
                     <Image
@@ -435,7 +412,12 @@ const MatchPrediction = ({ selectedDayMatches }) => {
                 </div>
 
                 <div className="flex justify-between items-center mb-4 bg-blue-800  h-12">
-                  <span className="text-sm">比赛总进球数</span>
+                  <span className="text-sm">
+                    比赛总进球数
+                    <span className="text-xs text-yellow-300 ml-2">
+                      (猜对可得 {match.pointRewards.totalGoals} 积分)
+                    </span>
+                  </span>
                   <div
                     className={`flex items-center ${
                       totalGoalCountOfMatch[match._id] != null
@@ -480,7 +462,7 @@ const MatchPrediction = ({ selectedDayMatches }) => {
             </div>
           );
         })}
-      </>
+      </div>
 
       {isModalOpen && (
         <FirstTeamToScoreModal
@@ -581,7 +563,7 @@ const TeamCard = ({ flag, name, lastMatches, pickedBy, selected, onClick }) => {
           src={getValidImageUrl(flag)}
           width={40}
           height={40}
-          alt={`${name} 旗帜`}
+          alt={`${name}`}
           className="mb-2"
         />
       </div>
@@ -612,7 +594,7 @@ const TeamOption = ({ flag, name, isSelected, onSelect }) => (
         width={30}
         height={30}
         className="mr-3"
-        alt={`${name} 旗帜`}
+        alt={`${name}`}
         onClick={onSelect}
       />
       <span>{name}</span>