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>

app/user-profile/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}

app/user-profile/page.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search, Filter, Download, Users, UserPlus, UserCheck, UserX } from "lucide-react"
+import { UserProfileOverview } from "@/components/user-profile/user-profile-overview"
+import { UserProfileSegments } from "@/components/user-profile/user-profile-segments"
+import { UserProfileTags } from "@/components/user-profile/user-profile-tags"
+import { UserProfileAnalytics } from "@/components/user-profile/user-profile-analytics"
+
+export default function UserProfilePage() {
+  const [activeTab, setActiveTab] = useState("overview")
+  const [searchQuery, setSearchQuery] = useState("")
+
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-3xl font-bold">用户画像分析</h1>
+        <div className="flex space-x-2">
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            导出报告
+          </Button>
+          <Button>
+            <UserPlus className="mr-2 h-4 w-4" />
+            创建画像模型
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">总用户数</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <Users className="h-5 w-5 text-muted-foreground mr-2" />
+              <div className="text-2xl font-bold">24,521</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">较上月增长 8%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">活跃用户</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <UserCheck className="h-5 w-5 text-green-500 mr-2" />
+              <div className="text-2xl font-bold">16,842</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">活跃率 68.7%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">新增用户</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <UserPlus className="h-5 w-5 text-blue-500 mr-2" />
+              <div className="text-2xl font-bold">1,254</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">较上月增长 12%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">流失用户</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <UserX className="h-5 w-5 text-red-500 mr-2" />
+              <div className="text-2xl font-bold">342</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">流失率 1.4%</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>用户画像分析中心</CardTitle>
+          <CardDescription>多维度分析用户特征，构建精准用户画像，支持营销决策</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+            <div className="flex justify-between items-center">
+              <TabsList>
+                <TabsTrigger value="overview">画像概览</TabsTrigger>
+                <TabsTrigger value="segments">用户分群</TabsTrigger>
+                <TabsTrigger value="tags">标签体系</TabsTrigger>
+                <TabsTrigger value="analytics">深度分析</TabsTrigger>
+              </TabsList>
+              <div className="flex space-x-2">
+                <div className="relative w-64">
+                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="搜索用户画像..."
+                    className="pl-8"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                  />
+                </div>
+                <Button variant="outline" size="icon">
+                  <Filter className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            <TabsContent value="overview" className="space-y-4">
+              <UserProfileOverview />
+            </TabsContent>
+
+            <TabsContent value="segments" className="space-y-4">
+              <UserProfileSegments />
+            </TabsContent>
+
+            <TabsContent value="tags" className="space-y-4">
+              <UserProfileTags />
+            </TabsContent>
+
+            <TabsContent value="analytics" className="space-y-4">
+              <UserProfileAnalytics />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}