2026-05-25: 等级体系升级(20级)+论坛二级分类+会员空间

2026-05-24 23:05:38 +08:00
parent 6c78c32157
commit 9bf3e7574a
118 changed files with 11842 additions and 3262 deletions
@@ -0,0 +1,49 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { getLevelInfo } from "@/lib/level-config";
+import { UserLevel } from "@prisma/client";
+import MemberBadge from "@/components/common/MemberBadge";
+import { TrendingUp, BarChart3, Activity } from "lucide-react";
+
+interface LevelProgressProps {
+  level: UserLevel;
+  points: number;
+}
+
+export default function LevelProgress({ level, points }: LevelProgressProps) {
+  const info = getLevelInfo(points);
+
+  return (
+    <div className="rounded-xl border border-border/50 bg-white p-5 shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <div className={`flex h-8 w-8 items-center justify-center rounded-lg ${info.bgColor}`}>
+            <TrendingUp className={`w-4 h-4 ${info.color}`} />
+          </div>
+          <MemberBadge level={info.level} points={info.points} size="md" />
+        </div>
+        <span className={`text-lg font-bold ${info.color}`}>{info.points}分</span>
+      </div>
+
+      {info.nextLevel && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between text-xs">
+            <span className="text-muted-foreground">距离 {info.nextLevel.label} 还差</span>
+            <span className="font-medium text-foreground">{info.nextLevel.remaining}分</span>
+          </div>
+          <div className="h-2 rounded-full bg-muted/50 overflow-hidden">
+            <div
+              className={`h-full rounded-full transition-all duration-500 ${parseInt(info.nextLevel.level.replace("LV", "")) >= 15 ? "bg-amber-500" : parseInt(info.nextLevel.level.replace("LV", "")) >= 10 ? "bg-violet-500" : "bg-slate-400"}`}
+              style={{ width: `${info.progress}%` }}
+            />
+          </div>
+        </div>
+      )}
+
+      {!info.nextLevel && (
+        <p className="text-sm text-center text-muted-foreground">🎉 已达到最高等级！</p>
+      )}
+    </div>
+  );
+}