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/data-analysis/rfm-analysis.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import type { RFMAnalysisResult, UserRFMData } from "@/types/data-analysis"
+
+interface RFMAnalysisProps {
+  data: UserRFMData[]
+  analysisResult: RFMAnalysisResult
+}
+
+export function RFMAnalysis({ data, analysisResult }: RFMAnalysisProps) {
+  // 获取用户分群的颜色
+  const getSegmentColor = (segment: string) => {
+    if (segment.includes("高价值")) return "rgb(16, 185, 129)"
+    if (segment.includes("中价值")) return "rgb(59, 130, 246)"
+    if (segment.includes("低价值")) return "rgb(156, 163, 175)"
+    return "rgb(139, 92, 246)" // 新用户
+  }
+
+  // 准备饼图数据
+  const pieChartData = {
+    labels: analysisResult.segmentDistribution.map(item => item.segment),
+    datasets: [
+      {
+        data: analysisResult.segmentDistribution.map(item => item.count),
+        backgroundColor: analysisResult.segmentDistribution.map(item => getSegmentColor(item.segment)),
+      },
+    ],
+  }
+
+  // 准备RFM分布柱状图数据
+  const rfmDistributionData = {
+    labels: ["R1", "R2", "R3", "R4", "R5", "F1", "F2", "F3", "F4", "F5", "M1", "M2", "M3", "M4", "M5"],
+    datasets: [
+      {
+        label: "用户数量",
+        data: [
+          // R分布
+          data.filter(user => user.rfmScore.recency === 1).length,
+          data.filter(user => user.rfmScore.recency === 2).length,
+          data.filter(user => user.rfmScore.recency === 3).length,
+          data.filter(user => user.rfmScore.recency === 4).length,
+          data.filter(user => user.rfmScore.recency === 5).length,
+          // F分布
+          data.filter(user => user.rfmScore.frequency === 1).length,
+          data.filter(user => user.rfmScore.frequency === 2).length,
+          data.filter(user => user.rfmScore.frequency === 3).length,
+          data.filter(user => user.rfmScore.frequency === 4).length,
+          data.filter(user => user.rfmScore.frequency === 5).length,
+          // M分布
+          data.filter(user => user.rfmScore.monetary === 1).length,
+          data.filter(user => user.rfmScore.monetary === 2).length,
+          data.filter(user => user.rfmScore.monetary === 3).length,
+          data.filter(user => user.rfmScore.monetary === 4).length,
+          data.filter(user => user.rfmScore.monetary === 5).length,
+        ],
+        backgroundColor: [
+          // R颜色
+          "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)",
+          // F颜色
+          "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)",
+          // M颜色
+          "rgba(59, 130, 246, 0.7)", "rgba(59, 130, 246, 0.7)", "rgba(59, 130\