refactor: overhaul UI for streamlined user experience

Redesign navigation, home overview, user portrait, and valuation pages
with improved functionality and responsive design.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

components/user-pool/user-pool-stats.tsx

@@ -0,0 +1,56 @@
+import { Card, CardContent } from "@/components/ui/card"
+import { formatNumber, getGrowthClass } from "@/lib/utils"
+import { ArrowDown, ArrowUp, Users, UserCheck, Star, TrendingUp } from "lucide-react"
+
+export function UserPoolStats() {
+  // 这里应该从API获取实际数据
+  const stats = [
+    {
+      title: "总用户数",
+      value: 125689,
+      change: 12.5,
+      icon: <Users className="h-4 w-4" />,
+    },
+    {
+      title: "活跃用户",
+      value: 78452,
+      change: 8.3,
+      icon: <UserCheck className="h-4 w-4" />,
+    },
+    {
+      title: "高价值用户",
+      value: 12458,
+      change: 15.2,
+      icon: <Star className="h-4 w-4" />,
+    },
+    {
+      title: "转化率",
+      value: 12.5,
+      change: -2.3,
+      icon: <TrendingUp className="h-4 w-4" />,
+      isPercentage: true,
+    },
+  ]
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      {stats.map((stat) => (
+        <Card key={stat.title}>
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div className="bg-primary/10 rounded-full p-2 text-primary">{stat.icon}</div>
+              <div className={`flex items-center ${getGrowthClass(stat.change)}`}>
+                {stat.change > 0 ? <ArrowUp className="h-4 w-4 mr-1" /> : <ArrowDown className="h-4 w-4 mr-1" />}
+                <span>{Math.abs(stat.change)}%</span>
+              </div>
+            </div>
+            <div className="mt-3">
+              <p className="text-sm text-muted-foreground">{stat.title}</p>
+              <p className="text-2xl font-bold">{stat.isPercentage ? `${stat.value}%` : formatNumber(stat.value)}</p>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}