From 093b8c5bc3952c9dc4f6fb45c8f885ab5a864ed7 Mon Sep 17 00:00:00 2001
From: cryptocommuniums-afk <cryptocommuniums@gmail.com>
Date: Mon, 16 Feb 2026 19:10:40 +0800
Subject: [PATCH] feat: show rating, level, next-level stats in profile panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Display Rating value with ⚡ icon
- Show current Level with progress
- Show XP needed for next level
- Separated UID/join date below divider

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 frontend/src/app/me/page.tsx | 52 +++++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/me/page.tsx b/frontend/src/app/me/page.tsx
index 07199a6..c62a19f 100644
--- a/frontend/src/app/me/page.tsx
+++ b/frontend/src/app/me/page.tsx
@@ -320,7 +320,7 @@ export default function MePage() {
                 {rank.icon} {rank.label} Rank
               </div>
 
-              <div className="w-full bg-black h-4 border border-white relative mb-1">
+              <div className="w-full bg-black h-4 border border-white relative mb-2">
                 <div
                   className="h-full bg-[color:var(--mc-green)]"
                   style={{ width: `${Math.min(100, (profile.rating % 100))}%` }}
@@ -329,19 +329,45 @@ export default function MePage() {
                   Level {Math.floor(profile.rating / 100)}
                 </span>
               </div>
-              <div className="flex justify-between text-sm items-center">
-                <span className="text-zinc-800 flex items-center gap-1">
-                  <IdCard size={14} className="text-zinc-500" />
-                  UID
-                </span>
-                <span className="text-zinc-600 font-mono">{profile.id}</span>
+
+              {/* Stats grid */}
+              <div className="w-full grid grid-cols-2 gap-x-3 gap-y-1 text-sm mt-1 mb-2">
+                <div className="flex items-center gap-1 text-zinc-800">
+                  <Zap size={13} className="text-[color:var(--mc-gold)]" />
+                  <span>Rating</span>
+                </div>
+                <span className="text-right font-bold text-[color:var(--mc-gold)]">{profile.rating}</span>
+
+                <div className="flex items-center gap-1 text-zinc-800">
+                  <TrendingUp size={13} className="text-[color:var(--mc-green)]" />
+                  <span>{tx("等级", "Level")}</span>
+                </div>
+                <span className="text-right font-bold text-[color:var(--mc-green)]">{Math.floor(profile.rating / 100)}</span>
+
+                <div className="flex items-center gap-1 text-zinc-800">
+                  <span className="text-xs">🎯</span>
+                  <span>{tx("下一等级", "Next Lv")}</span>
+                </div>
+                <span className="text-right text-zinc-600">{100 - (profile.rating % 100)} XP</span>
               </div>
-              <div className="flex justify-between text-sm items-center">
-                <span className="text-zinc-800 flex items-center gap-1">
-                  <Calendar size={14} className="text-zinc-500" />
-                  {tx("加入时间", "Joined")}
-                </span>
-                <span className="text-zinc-600 font-mono">{new Date(profile.created_at * 1000).toLocaleDateString()}</span>
+
+              <div className="w-full border-t border-zinc-300 my-1"></div>
+
+              <div className="w-full flex flex-col gap-1 text-sm">
+                <div className="flex justify-between items-center">
+                  <span className="text-zinc-800 flex items-center gap-1">
+                    <IdCard size={14} className="text-zinc-500" />
+                    UID
+                  </span>
+                  <span className="text-zinc-600 font-mono">{profile.id}</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-zinc-800 flex items-center gap-1">
+                    <Calendar size={14} className="text-zinc-500" />
+                    {tx("加入时间", "Joined")}
+                  </span>
+                  <span className="text-zinc-600 font-mono">{new Date(profile.created_at * 1000).toLocaleDateString()}</span>
+                </div>
               </div>
             </div>
           </section>