diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index f650315..0000000
--- a/.gitignore
+++ /dev/null
@@ -1,27 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# env files
-.env*
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
\ No newline at end of file
diff --git a/app/ai-assistant/page.tsx b/app/ai-assistant/page.tsx
index 932c9d6..335985b 100644
--- a/app/ai-assistant/page.tsx
+++ b/app/ai-assistant/page.tsx
@@ -1,516 +1,189 @@
 "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 { useCallback, useMemo, useState } from "react"
+import { BarChart3, Database, FileText } from 'lucide-react'
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
 import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Badge } from "@/components/ui/badge"
-import { Textarea } from "@/components/ui/textarea"
-import { Label } from "@/components/ui/label"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Switch } from "@/components/ui/switch"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import {
-  BarChart3,
-  Send,
-  FileText,
-  Mail,
-  MessageSquare,
-  Download,
-  Database,
-  Target,
-  Zap,
-  Eye,
-  Share,
-} from "lucide-react"
-import { TooltipHelp, TooltipProvider } from "@/components/ui/tooltip-help"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog"
+import TaskList from "@/components/ai-assistant/task-list"
+import CreateTaskDialog from "@/components/ai-assistant/create-task-dialog"
+import ReportCards from "@/components/ai-assistant/report-cards"
+import { sanitizeText } from "@/lib/text-sanitize"
+import type { AnalysisTask, DatabaseInfo, ReportItem, ReportTemplate } from "@/types/ai-assistant"
+
+const initialTasks: AnalysisTask[] = [
+  {
+    id: "task_001",
+    name: "用户行为分析报告",
+    database: "微信用户数据库",
+    status: "completed",
+    progress: 100,
+    createdAt: "2025-01-15T09:00:00Z",
+    completedAt: "2025-01-15T09:30:00Z",
+    reportUrl: "/reports/user-behavior-analysis.pdf",
+    description: "基于近30天行为的聚合与序列分析",
+  },
+  {
+    id: "task_002",
+    name: "流量关键词趋势分析",
+    database: "流量关键词库",
+    status: "running",
+    progress: 65,
+    createdAt: "2025-01-15T10:00:00Z",
+    description: "关注核心流量词与曝光、点击、转化等指标",
+  },
+  {
+    id: "task_003",
+    name: "用户价值分层报告",
+    database: "微信用户数据库",
+    status: "pending",
+    progress: 0,
+    createdAt: "2025-01-15T10:30:00Z",
+    description: "RFM 分层、价值区间分布与运营建议",
+  },
+]
+
+const databases: DatabaseInfo[] = [
+  { id: "db_001", name: "微信用户数据库", type: "MySQL", tables: 25, records: 4000000000, lastUpdated: "2025-01-15T11:00:00Z" },
+  { id: "db_002", name: "流量关键词库", type: "PostgreSQL", tables: 8, records: 150000, lastUpdated: "2025-01-15T10:45:00Z" },
+  { id: "db_003", name: "用户行为日志", type: "MongoDB", tables: 12, records: 1500000000, lastUpdated: "2025-01-15T11:15:00Z" },
+]
+
+const templates: ReportTemplate[] = [
+  { id: "template_001", name: "用户画像分析报告", description: "深度分析用户特征、行为模式和价值分层", category: "用户分析", fields: ["用户基本信息", "RFM分析", "行为轨迹", "价值评估", "推荐策略"] },
+  { id: "template_002", name: "流量趋势分析报告", description: "分析关键词搜索趋势和流量变化", category: "流量分析", fields: ["关键词热度", "搜索趋势", "竞争分析", "机会识别", "优化建议"] },
+  { id: "template_003", name: "业务运营报告", description: "综合业务数据分析和运营建议", category: "运营分析", fields: ["核心指标", "增长分析", "用户留存", "转化漏斗", "运营建议"] },
+  { id: "template_004", name: "数据质量报告", description: "评估数据完整性、准确性和一致性", category: "数据质量", fields: ["数据完整性", "准确性检查", "一致性验证", "异常检测", "改进建议"] },
+]
+
+const reportItems: ReportItem[] = [
+  { id: "rpt-1", title: "用户行为分析报告", source: "数据源：微信用户数据库", description: '本报告基于近30天互动行为，输出用户行为模式与高频路径。\\n"]]}', updatedAt: new Date().toISOString() },
+  { id: "rpt-2", title: "流量关键词趋势分析", source: "数据源：流量关键词库", description: '追踪 000000 类流量词及其曝光、点击、转化趋势，适配日/周/月视角。\\n" ]]}', updatedAt: new Date().toISOString() },
+  { id: "rpt-3", title: "用户价值分层报告", source: "数据源：微信用户数据库", description: '结合 RFM 得分与标签，给出 S/A/B/C/D 分层与经营建议。\\n" ]] }', updatedAt: new Date().toISOString() },
+]
 
 export default function AIAssistantPage() {
-  const [selectedDatabase, setSelectedDatabase] = useState("all")
-  const [reportTitle, setReportTitle] = useState("")
-  const [isGeneratingReport, setIsGeneratingReport] = useState(false)
-  const [isSendingReport, setIsSendingReport] = useState(false)
-  const [selectedReport, setSelectedReport] = useState<string | null>(null)
+  const [tasks, setTasks] = useState<AnalysisTask[]>(initialTasks)
 
-  // 数据库列表
-  const databases = [
-    { id: "user_behavior", name: "用户行为数据库", records: "1.2M", description: "用户行为轨迹和交互数据" },
-    { id: "user_profile", name: "用户画像数据库", records: "856K", description: "用户基本信息和标签数据" },
-    { id: "transaction", name: "交易数据库", records: "324K", description: "用户交易和消费记录" },
-    { id: "content", name: "内容数据库", records: "567K", description: "内容互动和偏好数据" },
-    { id: "traffic", name: "流量数据库", records: "2.3M", description: "流量关键词和来源数据" },
-  ]
+  // 进度推进（仅演示用）
+  const tick = useCallback(() => {
+    setTasks((prev) =>
+      prev.map((t) => {
+        if (t.status === "running" && t.progress < 100) {
+          const p = Math.min(100, t.progress + Math.random() * 12)
+          if (p >= 100) {
+            return {
+              ...t,
+              progress: 100,
+              status: "completed",
+              completedAt: new Date().toISOString(),
+              reportUrl: `/reports/${t.id}.pdf`,
+            }
+          }
+          return { ...t, progress: p }
+        }
+        return t
+      }),
+    )
+  }, [])
 
-  // 生成的报告列表
-  const [reports, setReports] = useState([
-    {
-      id: "1",
-      title: "用户行为分析报告",
-      database: "用户行为数据库",
-      generatedAt: "2024-01-15 14:30",
-      status: "completed",
-      insights: [
-        "用户在晚间时段活跃度最高，占总活跃时间的35%",
-        "移动端用户占比87%，其中iOS用户转化率更高",
-        "用户平均会话时长为8.5分钟，高于行业平均水平",
-      ],
-      recommendations: [
-        "建议在晚间时段增加营销活动投入",
-        "优化iOS端用户体验，提升转化率",
-        "延长用户会话时长，增加内容推荐精准度",
-      ],
-    },
-    {
-      id: "2",
-      title: "用户价值分析报告",
-      database: "用户画像数据库",
-      generatedAt: "2024-01-14 16:45",
-      status: "completed",
-      insights: [
-        "高价值用户占比7.2%，贡献了45%的总收入",
-        "用户生命周期价值平均为¥2,580",
-        "新用户转化为高价值用户的概率为12.5%",
-      ],
-      recommendations: [
-        "针对高价值用户制定专属服务策略",
-        "优化新用户引导流程，提升转化率",
-        "建立用户价值预警机制，及时挽留流失用户",
-      ],
-    },
-    {
-      id: "3",
-      title: "流量关键词分析报告",
-      database: "流量数据库",
-      generatedAt: "2024-01-13 10:20",
-      status: "completed",
-      insights: [
-        "热门关键词TOP10贡献了60%的流量",
-        "长尾关键词转化率普遍高于热门关键词",
-        "品牌相关关键词的用户质量最高",
-      ],
-      recommendations: ["加大长尾关键词的投入和优化", "提升品牌关键词的覆盖范围", "建立关键词效果监控体系"],
-    },
-  ])
-
-  // 生成报告
-  const handleGenerateReport = () => {
-    if (!reportTitle.trim()) return
-
-    setIsGeneratingReport(true)
-
-    // 模拟报告生成过程
+  const onCreate = (task: AnalysisTask) => {
+    setTasks((prev) => [task, ...prev])
+    // 模拟启动
     setTimeout(() => {
-      const newReport = {
-        id: Date.now().toString(),
-        title: reportTitle,
-        database: databases.find((db) => db.id === selectedDatabase)?.name || "全部数据库",
-        generatedAt: new Date().toLocaleString(),
-        status: "completed",
-        insights: ["AI分析发现的关键洞察1", "AI分析发现的关键洞察2", "AI分析发现的关键洞察3"],
-        recommendations: ["基于数据分析的建议1", "基于数据分析的建议2", "基于数据分析的建议3"],
-      }
-
-      setReports((prev) => [newReport, ...prev])
-      setReportTitle("")
-      setIsGeneratingReport(false)
-    }, 3000)
+      setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, status: "running" } : t)))
+    }, 800)
   }
 
-  // 发送报告
-  const handleSendReport = (reportId: string, method: string, target: string) => {
-    setIsSendingReport(true)
-
-    // 模拟发送过程
-    setTimeout(() => {
-      setIsSendingReport(false)
-      setSelectedReport(null)
-      // 这里可以添加成功提示
-    }, 2000)
-  }
+  const sanitizedItems = useMemo(
+    () => reportItems.map((i) => ({ ...i, description: sanitizeText(i.description) })),
+    [],
+  )
 
   return (
-    <TooltipProvider>
-      <div className="container mx-auto p-6 space-y-6">
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold">AI智能助手</h1>
-            <p className="text-muted-foreground mt-2">专注数据库分析，生成智能数据报告</p>
-          </div>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-indigo-50">
+      <div className="container mx-auto px-4 py-8">
+        <div className="mb-6">
+          <h1 className="text-3xl font-bold">AI智能助手</h1>
+          <p className="text-gray-600">数据库分析与智能报告生成</p>
         </div>
 
-        {/* 核心指标概览 */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-2">
-                数据库数量
-                <TooltipHelp content="可分析的数据库总数，包含用户、交易、行为等各类数据" />
-              </CardTitle>
-              <Database className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{databases.length}</div>
-              <p className="text-xs text-muted-foreground">覆盖全业务数据</p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-2">
-                生成报告
-                <TooltipHelp content="AI自动生成的数据分析报告总数" />
-              </CardTitle>
-              <FileText className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{reports.length}</div>
-              <p className="text-xs text-muted-foreground">
-                <span className="text-green-600">+2</span> 本周新增
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-2">
-                分析准确率
-                <TooltipHelp content="AI数据分析的准确率，基于历史验证结果计算" />
-              </CardTitle>
-              <Target className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">94.2%</div>
-              <p className="text-xs text-muted-foreground">
-                <span className="text-green-600">+1.8%</span> 较上月
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-2">
-                处理速度
-                <TooltipHelp content="AI分析处理的平均速度，包括数据读取和分析时间" />
-              </CardTitle>
-              <Zap className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">2.3s</div>
-              <p className="text-xs text-muted-foreground">平均分析时间</p>
-            </CardContent>
-          </Card>
-        </div>
-
-        <Tabs defaultValue="generate" className="space-y-6">
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="generate">生成报告</TabsTrigger>
-            <TabsTrigger value="reports">报告管理</TabsTrigger>
+        <Tabs defaultValue="analysis" className="space-y-6">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="analysis" className="flex items-center gap-2">
+              <BarChart3 className="w-4 h-4" />
+              数据分析
+            </TabsTrigger>
+            <TabsTrigger value="databases" className="flex items-center gap-2">
+              <Database className="w-4 h-4" />
+              数据库
+            </TabsTrigger>
+            <TabsTrigger value="templates" className="flex items-center gap-2">
+              <FileText className="w-4 h-4" />
+              报告模板
+            </TabsTrigger>
           </TabsList>
 
-          <TabsContent value="generate" className="space-y-6">
+          <TabsContent value="analysis" className="space-y-6">
+            <div className="flex items-center justify-between">
+              <h2 className="text-xl font-semibold">数据分析任务</h2>
+              <CreateTaskDialog databases={databases} templates={templates} onCreate={onCreate} />
+            </div>
+
+            <TaskList tasks={tasks} onTick={tick} />
+
+            <ReportCards items={sanitizedItems} />
+          </TabsContent>
+
+          <TabsContent value="databases">
             <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
-                  <BarChart3 className="h-5 w-5" />
-                  数据库分析报告生成
-                  <TooltipHelp content="选择数据库并配置分析参数，AI将自动生成详细的数据分析报告" />
+                  <Database className="w-4 h-4" />
+                  数据库
                 </CardTitle>
-                <CardDescription>AI智能分析数据库，生成专业的数据洞察报告</CardDescription>
               </CardHeader>
-              <CardContent>
-                <div className="space-y-6">
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <div className="space-y-4">
-                      <div>
-                        <Label htmlFor="report-title">报告标题</Label>
-                        <Input
-                          id="report-title"
-                          placeholder="请输入报告标题..."
-                          value={reportTitle}
-                          onChange={(e) => setReportTitle(e.target.value)}
-                          className="mt-1"
-                        />
+              <CardContent className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {databases.map((db) => (
+                  <Card key={db.id} className="border">
+                    <CardContent className="p-4 space-y-1">
+                      <div className="font-medium">{db.name}</div>
+                      <div className="text-sm text-gray-600">
+                        {db.type} · {db.tables} 表
                       </div>
-
-                      <div>
-                        <Label htmlFor="database-select">选择数据库</Label>
-                        <Select value={selectedDatabase} onValueChange={setSelectedDatabase}>
-                          <SelectTrigger id="database-select" className="mt-1">
-                            <SelectValue placeholder="选择要分析的数据库" />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="all">全部数据库</SelectItem>
-                            {databases.map((db) => (
-                              <SelectItem key={db.id} value={db.id}>
-                                {db.name} ({db.records})
-                              </SelectItem>
-                            ))}
-                          </SelectContent>
-                        </Select>
+                      <div className="text-xs text-gray-500">
+                        最近更新 {new Date(db.lastUpdated).toLocaleString("zh-CN")}
                       </div>
-
-                      <div>
-                        <Label htmlFor="analysis-type">分析类型</Label>
-                        <Select defaultValue="comprehensive">
-                          <SelectTrigger id="analysis-type" className="mt-1">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="comprehensive">综合分析</SelectItem>
-                            <SelectItem value="behavior">行为分析</SelectItem>
-                            <SelectItem value="value">价值分析</SelectItem>
-                            <SelectItem value="trend">趋势分析</SelectItem>
-                            <SelectItem value="conversion">转化分析</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-
-                      <div>
-                        <Label htmlFor="time-range">时间范围</Label>
-                        <Select defaultValue="30days">
-                          <SelectTrigger id="time-range" className="mt-1">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="7days">近7天</SelectItem>
-                            <SelectItem value="30days">近30天</SelectItem>
-                            <SelectItem value="90days">近90天</SelectItem>
-                            <SelectItem value="1year">近1年</SelectItem>
-                            <SelectItem value="custom">自定义</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                    </div>
-
-                    <div className="space-y-4">
-                      <div>
-                        <Label htmlFor="analysis-depth">分析深度</Label>
-                        <Select defaultValue="standard">
-                          <SelectTrigger id="analysis-depth" className="mt-1">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="basic">基础分析</SelectItem>
-                            <SelectItem value="standard">标准分析</SelectItem>
-                            <SelectItem value="deep">深度分析</SelectItem>
-                            <SelectItem value="expert">专家级分析</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-
-                      <div>
-                        <Label htmlFor="output-format">输出格式</Label>
-                        <Select defaultValue="detailed">
-                          <SelectTrigger id="output-format" className="mt-1">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="summary">摘要报告</SelectItem>
-                            <SelectItem value="detailed">详细报告</SelectItem>
-                            <SelectItem value="executive">高管报告</SelectItem>
-                            <SelectItem value="technical">技术报告</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-
-                      <div className="space-y-2">
-                        <Label>包含内容</Label>
-                        <div className="space-y-2">
-                          <div className="flex items-center space-x-2">
-                            <Switch id="include-insights" defaultChecked />
-                            <Label htmlFor="include-insights">数据洞察</Label>
-                          </div>
-                          <div className="flex items-center space-x-2">
-                            <Switch id="include-recommendations" defaultChecked />
-                            <Label htmlFor="include-recommendations">优化建议</Label>
-                          </div>
-                          <div className="flex items-center space-x-2">
-                            <Switch id="include-charts" defaultChecked />
-                            <Label htmlFor="include-charts">图表分析</Label>
-                          </div>
-                          <div className="flex items-center space-x-2">
-                            <Switch id="include-predictions" />
-                            <Label htmlFor="include-predictions">趋势预测</Label>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="flex justify-center">
-                    <Button
-                      onClick={handleGenerateReport}
-                      disabled={isGeneratingReport || !reportTitle.trim()}
-                      className="px-8"
-                    >
-                      {isGeneratingReport ? (
-                        <>
-                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-                          生成中...
-                        </>
-                      ) : (
-                        <>
-                          <BarChart3 className="h-4 w-4 mr-2" />
-                          生成AI分析报告
-                        </>
-                      )}
-                    </Button>
-                  </div>
-                </div>
+                    </CardContent>
+                  </Card>
+                ))}
               </CardContent>
             </Card>
           </TabsContent>
 
-          <TabsContent value="reports" className="space-y-6">
+          <TabsContent value="templates">
             <Card>
               <CardHeader>
                 <CardTitle className="flex items-center gap-2">
-                  <FileText className="h-5 w-5" />
-                  报告管理
-                  <TooltipHelp content="管理所有生成的AI分析报告，支持查看、下载和分享" />
+                  <FileText className="w-4 h-4" />
+                  报告模板
                 </CardTitle>
-                <CardDescription>查看和管理所有AI生成的数据分析报告</CardDescription>
               </CardHeader>
-              <CardContent>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>报告标题</TableHead>
-                      <TableHead>数据源</TableHead>
-                      <TableHead>生成时间</TableHead>
-                      <TableHead>状态</TableHead>
-                      <TableHead>操作</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {reports.map((report) => (
-                      <TableRow key={report.id}>
-                        <TableCell className="font-medium">{report.title}</TableCell>
-                        <TableCell>{report.database}</TableCell>
-                        <TableCell>{report.generatedAt}</TableCell>
-                        <TableCell>
-                          <Badge className="bg-green-100 text-green-800">已完成</Badge>
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex space-x-2">
-                            <Button variant="ghost" size="sm">
-                              <Eye className="h-4 w-4 mr-1" />
-                              查看
-                            </Button>
-                            <Button variant="ghost" size="sm">
-                              <Download className="h-4 w-4 mr-1" />
-                              下载
-                            </Button>
-                            <Button variant="ghost" size="sm" onClick={() => setSelectedReport(report.id)}>
-                              <Share className="h-4 w-4 mr-1" />
-                              发送
-                            </Button>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
+              <CardContent className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {templates.map((t) => (
+                  <Card key={t.id} className="border">
+                    <CardContent className="p-4 space-y-2">
+                      <div className="font-medium">{t.name}</div>
+                      <div className="text-sm text-gray-600">{t.category}</div>
+                      <div className="text-xs text-gray-500">字段: {t.fields.join(" / ")}</div>
+                    </CardContent>
+                  </Card>
+                ))}
               </CardContent>
             </Card>
           </TabsContent>
         </Tabs>
-
-        {/* 发送报告对话框 */}
-        <Dialog open={!!selectedReport} onOpenChange={(open) => !open && setSelectedReport(null)}>
-          <DialogContent className="sm:max-w-[500px]">
-            <DialogHeader>
-              <DialogTitle>发送报告</DialogTitle>
-              <DialogDescription>选择发送方式，将报告发送到指定邮箱或微信</DialogDescription>
-            </DialogHeader>
-            <div className="grid gap-4 py-4">
-              <div className="space-y-4">
-                <div>
-                  <Label>发送方式</Label>
-                  <div className="grid grid-cols-2 gap-4 mt-2">
-                    <Card className="cursor-pointer hover:bg-gray-50 p-4">
-                      <div className="flex items-center space-x-3">
-                        <Mail className="h-6 w-6 text-blue-500" />
-                        <div>
-                          <div className="font-medium">邮箱发送</div>
-                          <div className="text-sm text-muted-foreground">发送到指定邮箱</div>
-                        </div>
-                      </div>
-                    </Card>
-                    <Card className="cursor-pointer hover:bg-gray-50 p-4">
-                      <div className="flex items-center space-x-3">
-                        <MessageSquare className="h-6 w-6 text-green-500" />
-                        <div>
-                          <div className="font-medium">微信发送</div>
-                          <div className="text-sm text-muted-foreground">发送到微信联系人</div>
-                        </div>
-                      </div>
-                    </Card>
-                  </div>
-                </div>
-
-                <div>
-                  <Label htmlFor="send-target">发送目标</Label>
-                  <Input id="send-target" placeholder="请输入邮箱地址或微信号" className="mt-1" />
-                </div>
-
-                <div>
-                  <Label htmlFor="send-message">附加消息</Label>
-                  <Textarea id="send-message" placeholder="可选：添加附加消息" className="mt-1" rows={3} />
-                </div>
-
-                <div className="space-y-2">
-                  <Label>发送选项</Label>
-                  <div className="space-y-2">
-                    <div className="flex items-center space-x-2">
-                      <Switch id="include-pdf" defaultChecked />
-                      <Label htmlFor="include-pdf">包含PDF版本</Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <Switch id="include-data" />
-                      <Label htmlFor="include-data">包含原始数据</Label>
-                    </div>
-                    <div className="flex items-center space-x-2">
-                      <Switch id="schedule-send" />
-                      <Label htmlFor="schedule-send">定时发送</Label>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setSelectedReport(null)}>
-                取消
-              </Button>
-              <Button
-                onClick={() => handleSendReport(selectedReport!, "email", "target@example.com")}
-                disabled={isSendingReport}
-              >
-                {isSendingReport ? (
-                  <>
-                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
-                    发送中...
-                  </>
-                ) : (
-                  <>
-                    <Send className="mr-2 h-4 w-4" />
-                    发送报告
-                  </>
-                )}
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
       </div>
-    </TooltipProvider>
+    </div>
   )
 }
diff --git a/app/api/rfm/analyze/route.ts b/app/api/rfm/analyze/route.ts
new file mode 100644
index 0000000..8c0b91b
--- /dev/null
+++ b/app/api/rfm/analyze/route.ts
@@ -0,0 +1,56 @@
+import { NextResponse } from "next/server"
+import { analyzeUser, type AnalyzeInput } from "@/services/rfm-engine"
+import { generateText } from "ai"
+import { openai } from "@ai-sdk/openai"
+
+/**
+ * 可选 AI 标签增强：
+ * - 使用 AI SDK (generateText + openai("gpt-4o"))，符合统一标准 [^1]
+ * - 无 OPENAI_API_KEY 时自动跳过，保持稳定
+ */
+async function aiTagging(chat_logs?: string[]) {
+  const text = (chat_logs ?? []).slice(0, 8).join("。")
+  if (!text) return null
+  if (!process.env.OPENAI_API_KEY) return null
+  try {
+    const { text: out } = await generateText({
+      model: openai("gpt-4o"),
+      system:
+        "请根据用户聊天片段输出JSON，字段：emotion(积极|中性|消极), intent(弱意图|中等意图|强意图), behavior(数组，中文标签最多3个)。只输出JSON。",
+      prompt: `聊天片段：${text}`,
+      // @ts-expect-error ai sdk typings are flexible in Next.js
+      maxTokens: 200,
+    })
+    const json = JSON.parse(out.trim())
+    return json
+  } catch {
+    return null
+  }
+}
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json()
+    const inputs: AnalyzeInput[] = Array.isArray(body) ? body : [body]
+    const useAI = (Array.isArray(body) ? (body as any).useAI : (body as any)?.useAI) ?? false
+
+    const results = []
+    for (const input of inputs) {
+      const base = analyzeUser(input)
+      if (useAI) {
+        const ai = await aiTagging(input.chat_logs)
+        if (ai) {
+          base.tags.emotion = ai.emotion ?? base.tags.emotion
+          base.tags.intent = ai.intent ?? base.tags.intent
+          if (Array.isArray(ai.behavior)) {
+            base.tags.behavior = Array.from(new Set([...(base.tags.behavior ?? []), ...ai.behavior]))
+          }
+        }
+      }
+      results.push(base)
+    }
+    return NextResponse.json({ success: true, data: results })
+  } catch (e: any) {
+    return NextResponse.json({ success: false, error: e?.message || "Invalid input" }, { status: 400 })
+  }
+}
diff --git a/app/api/rfm/dump_csv/route.ts b/app/api/rfm/dump_csv/route.ts
new file mode 100644
index 0000000..43c25a8
--- /dev/null
+++ b/app/api/rfm/dump_csv/route.ts
@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server"
+import { dumpCsv } from "@/services/rfm-engine"
+
+export async function GET() {
+  const csv = dumpCsv()
+  return new NextResponse(csv, {
+    status: 200,
+    headers: {
+      "Content-Type": "text/csv; charset=utf-8",
+      "Content-Disposition": `attachment; filename="rfm_export_${Date.now()}.csv"`,
+    },
+  })
+}
diff --git a/app/api/rfm/get_tags/route.ts b/app/api/rfm/get_tags/route.ts
new file mode 100644
index 0000000..d0c978c
--- /dev/null
+++ b/app/api/rfm/get_tags/route.ts
@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server"
+import { getUserTags } from "@/services/rfm-engine"
+
+export async function GET(req: Request) {
+  const url = new URL(req.url)
+  const userId = url.searchParams.get("user_id")
+  if (!userId) {
+    return NextResponse.json({ success: false, error: "missing user_id" }, { status: 400 })
+  }
+  const data = getUserTags(userId)
+  return NextResponse.json({ success: true, data })
+}
diff --git a/app/api/rfm/group_summary/route.ts b/app/api/rfm/group_summary/route.ts
new file mode 100644
index 0000000..149e5e7
--- /dev/null
+++ b/app/api/rfm/group_summary/route.ts
@@ -0,0 +1,7 @@
+import { NextResponse } from "next/server"
+import { getGroupSummary } from "@/services/rfm-engine"
+
+export async function GET() {
+  const data = getGroupSummary()
+  return NextResponse.json({ success: true, data })
+}
diff --git a/app/api/rfm/score/route.ts b/app/api/rfm/score/route.ts
new file mode 100644
index 0000000..ac292a1
--- /dev/null
+++ b/app/api/rfm/score/route.ts
@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server"
+import { computeRFM, type AnalyzeInput } from "@/services/rfm-engine"
+
+export async function POST(req: Request) {
+  try {
+    const body = (await req.json()) as AnalyzeInput
+    const score = computeRFM(body)
+    return NextResponse.json({ success: true, data: score })
+  } catch (e: any) {
+    return NextResponse.json({ success: false, error: e?.message || "Invalid input" }, { status: 400 })
+  }
+}
diff --git a/app/api/rfm/weights/route.ts b/app/api/rfm/weights/route.ts
new file mode 100644
index 0000000..aaf6036
--- /dev/null
+++ b/app/api/rfm/weights/route.ts
@@ -0,0 +1,26 @@
+import { NextResponse } from "next/server"
+import { getWeights, setWeights } from "@/services/rfm-engine"
+
+export async function GET() {
+  return NextResponse.json({ success: true, data: getWeights() })
+}
+
+export async function POST(req: Request) {
+  try {
+    const body = await req.json()
+    let R = Number(body.R ?? 0.5)
+    let F = Number(body.F ?? 0.3)
+    let M = Number(body.M ?? 0.2)
+
+    // 归一化
+    const sum = Math.max(0.000001, R + F + M)
+    R = R / sum
+    F = F / sum
+    M = M / sum
+
+    setWeights({ R, F, M })
+    return NextResponse.json({ success: true, data: { R, F, M } })
+  } catch (e: any) {
+    return NextResponse.json({ success: false, error: e?.message || "Invalid input" }, { status: 400 })
+  }
+}
diff --git a/app/api/search/route.ts b/app/api/search/route.ts
index 0065640..c004650 100644
--- a/app/api/search/route.ts
+++ b/app/api/search/route.ts
@@ -1,18 +1,5 @@
 import { type NextRequest, NextResponse } from "next/server"
 import { getIntelligentSearchService } from "@/services/intelligent-search-service"
-import { getMindsDBConnector } from "@/lib/mindsdb-connector"
-
-// 初始化MindsDB连接
-const mindsDBConfig = {
-  host: process.env.MINDSDB_HOST || "localhost",
-  port: Number.parseInt(process.env.MINDSDB_PORT || "47334"),
-  username: process.env.MINDSDB_USERNAME || "mindsdb",
-  password: process.env.MINDSDB_PASSWORD || "",
-  database: process.env.MINDSDB_DATABASE || "mindsdb",
-}
-
-// 初始化连接器
-getMindsDBConnector(mindsDBConfig)
 
 export async function GET(request: NextRequest) {
   try {
diff --git a/app/api/system-status/route.ts b/app/api/system-status/route.ts
index 2900d41..78963ee 100644
--- a/app/api/system-status/route.ts
+++ b/app/api/system-status/route.ts
@@ -1,21 +1,15 @@
 import { type NextRequest, NextResponse } from "next/server"
 import { getMindsDBConnector } from "@/lib/mindsdb-connector"
-import { getIntelligentSearchService } from "@/services/intelligent-search-service"
 
 export async function GET(request: NextRequest) {
   try {
     const mindsDB = getMindsDBConnector()
-    const searchService = getIntelligentSearchService()
-
-    // 获取系统状态
-    const systemStatus = await mindsDB.getSystemStatus()
-    const searchStats = searchService.getSearchStats()
+    const status = await mindsDB.getSystemStatus()
 
     return NextResponse.json({
-      system: systemStatus,
-      search: searchStats,
+      success: true,
+      status,
       timestamp: new Date().toISOString(),
-      version: process.env.APP_VERSION || "1.0.0",
     })
   } catch (error) {
     console.error("系统状态API错误:", error)
diff --git a/app/api/users/route.ts b/app/api/users/route.ts
index ace987c..3e12399 100644
--- a/app/api/users/route.ts
+++ b/app/api/users/route.ts
@@ -1,5 +1,6 @@
-import { NextResponse } from "next/server"
+import { NextResponse, NextRequest } from "next/server"
 import type { TrafficUser } from "@/types/traffic"
+import { addUser, filterUsers, getDistinctTags, getUserDetail } from "@/lib/mock-users"
 
 // 中文名字生成器数据
 const familyNames = [
@@ -191,82 +192,51 @@ const generateWechatFriends = (wechatId: string, count: number) => {
 // 微信好友数据缓存
 const wechatFriendsCache = new Map<string, TrafficUser[]>()
 
-export async function GET(request: Request) {
-  const { searchParams } = new URL(request.url)
-  const page = Number.parseInt(searchParams.get("page") || "1")
-  const pageSize = Number.parseInt(searchParams.get("pageSize") || "10")
-  const search = searchParams.get("search") || ""
-  const category = searchParams.get("category") || "all"
-  const source = searchParams.get("source") || "all"
-  const status = searchParams.get("status") || "all"
-  const startDate = searchParams.get("startDate")
-  const endDate = searchParams.get("endDate")
-  const wechatSource = searchParams.get("wechatSource") || ""
-
-  let filteredUsers = [...userPool]
-
-  // 如果有微信来源参数，生成或获取微信好友数据
-  if (wechatSource) {
-    if (!wechatFriendsCache.has(wechatSource)) {
-      // 生成150-300个随机好友
-      const friendCount = Math.floor(Math.random() * (300 - 150)) + 150
-      wechatFriendsCache.set(wechatSource, generateWechatFriends(wechatSource, friendCount))
-    }
-    filteredUsers = wechatFriendsCache.get(wechatSource) || []
-  }
-
-  // 应用过滤条件
-  filteredUsers = filteredUsers.filter((user) => {
-    const matchesSearch = search
-      ? user.nickname.toLowerCase().includes(search.toLowerCase()) ||
-        user.wechatId.toLowerCase().includes(search.toLowerCase()) ||
-        user.phone.includes(search)
-      : true
-
-    const matchesCategory = category === "all" ? true : user.category === category
-    const matchesSource = source === "all" ? true : user.source === source
-    const matchesStatus = status === "all" ? true : user.status === status
-
-    const matchesDate =
-      startDate && endDate
-        ? new Date(user.addTime) >= new Date(startDate) && new Date(user.addTime) <= new Date(endDate)
-        : true
-
-    return matchesSearch && matchesCategory && matchesSource && matchesStatus && matchesDate
-  })
-
-  // 按添加时间倒序排序
-  filteredUsers.sort((a, b) => new Date(b.addTime).getTime() - new Date(a.addTime).getTime())
-
-  // 计算分页
-  const total = filteredUsers.length
-  const totalPages = Math.ceil(total / pageSize)
-  const start = (page - 1) * pageSize
-  const end = start + pageSize
-  const users = filteredUsers.slice(start, end)
-
-  // 计算分类统计
-  const categoryStats = {
-    potential: userPool.filter((user) => user.category === "potential").length,
-    customer: userPool.filter((user) => user.category === "customer").length,
-    lost: userPool.filter((user) => user.category === "lost").length,
-  }
-
-  // 模拟网络延迟
-  await new Promise((resolve) => setTimeout(resolve, 500))
-
-  return NextResponse.json({
-    users,
-    pagination: {
-      total,
-      totalPages,
-      currentPage: page,
-      pageSize,
-    },
-    stats: {
-      total: wechatSource ? filteredUsers.length : userPool.length,
-      todayNew: wechatSource ? Math.floor(filteredUsers.length * 0.1) : todayUsers.length,
-      categoryStats,
-    },
-  })
+function parseArrayParam(v: string | null) {
+  if (!v) return []
+  return v.split(",").map((s) => s.trim()).filter(Boolean)
+}
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url)
+  const meta = searchParams.get("meta")
+  const id = searchParams.get("id")
+
+  if (meta === "tags") {
+    const tags = getDistinctTags()
+    return NextResponse.json({ success: true, data: { tags } })
+  }
+
+  if (id) {
+    const user = getUserDetail(id)
+    if (!user) return NextResponse.json({ success: false, error: "NOT_FOUND" }, { status: 404 })
+    return NextResponse.json({ success: true, data: user })
+  }
+
+  const q = searchParams.get("q") || undefined
+  const tagsParam = searchParams.get("tags") || ""
+  const tags = tagsParam ? tagsParam.split(",").filter(Boolean) : []
+  const statusParam = searchParams.get("status") || ""
+  const status = statusParam ? (statusParam.split(",") as any) : []
+  const rfmMin = Number(searchParams.get("rfmMin") ?? "0")
+  const rfmMax = Number(searchParams.get("rfmMax") ?? "100")
+  const page = Number(searchParams.get("page") ?? "1")
+  const pageSize = Number(searchParams.get("pageSize") ?? "20")
+
+  const res = filterUsers({ q, tags, status, rfmMin, rfmMax, page, pageSize })
+  return NextResponse.json({ success: true, data: res })
+}
+
+export async function POST(req: NextRequest) {
+  const body = await req.json().catch(() => null)
+  if (!body || !body.name || !body.phone || !body.email) {
+    return NextResponse.json({ success: false, error: "INVALID_PAYLOAD" }, { status: 400 })
+  }
+  const user = addUser({
+    name: body.name,
+    phone: body.phone,
+    email: body.email,
+    tags: Array.isArray(body.tags) ? body.tags.slice(0, 20) : [],
+  })
+  return NextResponse.json({ success: true, data: user })
 }
diff --git a/app/components/BottomNav.tsx b/app/components/BottomNav.tsx
index cdbe979..f9aa0dc 100644
--- a/app/components/BottomNav.tsx
+++ b/app/components/BottomNav.tsx
@@ -2,13 +2,13 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { Home, Database, Target, BrainCircuit } from "lucide-react" // 引入AI智能助手图标
+import { Home, Database, Target, BrainCircuit } from 'lucide-react' // 引入AI智能助手图标
 
 const navItems = [
-  { href: "/", icon: Home, label: "概览" },
+  { href: "/", icon: Home, label: "首页" },
   { href: "/data-platform", icon: Database, label: "数据中台" },
-  { href: "/user-portrait", icon: Target, label: "用户画像" }, // 整合用户池功能
-  { href: "/ai-assistant", icon: BrainCircuit, label: "AI助手" }, // 新增AI智能助手
+  { href: "/user-portrait", icon: Target, label: "画像" },
+  { href: "/ai-assistant", icon: BrainCircuit, label: "AI助手" },
 ]
 
 export default function BottomNav() {
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 59d878e..e3bec5e 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -4,7 +4,7 @@ import { useState } from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { cn } from "@/lib/utils"
-import { LayoutDashboard, Database, Users, BrainCircuit, Settings, ChevronLeft } from "lucide-react"
+import { LayoutDashboard, Database, Users, BrainCircuit, Settings, ChevronLeft } from 'lucide-react'
 
 export default function Sidebar() {
   const pathname = usePathname()
@@ -16,30 +16,10 @@ export default function Sidebar() {
 
   // 简化的导航结构
   const navItems = [
-    {
-      title: "数据概览",
-      href: "/",
-      icon: <LayoutDashboard className="h-5 w-5" />,
-      description: "平台整体数据分析与监控",
-    },
-    {
-      title: "数据中台",
-      href: "/data-platform",
-      icon: <Database className="h-5 w-5" />,
-      description: "多源数据整合与处理中心",
-    },
-    {
-      title: "用户画像",
-      href: "/user-portrait",
-      icon: <Users className="h-5 w-5" />,
-      description: "用户数据管理与画像分析",
-    },
-    {
-      title: "AI智能助手",
-      href: "/ai-assistant",
-      icon: <BrainCircuit className="h-5 w-5" />,
-      description: "AI数据分析与营销策略",
-    },
+    { title: "首页", href: "/", icon: <LayoutDashboard className="h-5 w-5" />, description: "总览与搜索" },
+    { title: "数据中台", href: "/data-platform", icon: <Database className="h-5 w-5" />, description: "多源数据整合" },
+    { title: "画像", href: "/user-portrait", icon: <Users className="h-5 w-5" />, description: "用户管理与分群" },
+    { title: "AI助手", href: "/ai-assistant", icon: <BrainCircuit className="h-5 w-5" />, description: "AI分析与策略" },
   ]
 
   return (
diff --git a/app/components/ui/toast.tsx b/app/components/ui/toast.tsx
index d94cc26..17cfae4 100644
--- a/app/components/ui/toast.tsx
+++ b/app/components/ui/toast.tsx
@@ -1,7 +1,7 @@
 import * as React from "react"
 import * as ToastPrimitives from "@radix-ui/react-toast"
 import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import { X } from 'lucide-react'
 
 import { cn } from "@/lib/utils"
 
@@ -109,3 +109,11 @@ export {
   ToastClose,
   ToastAction,
 }
+
+export function Toaster() {
+  return (
+    <ToastProvider>
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/app/data-platform/page.tsx b/app/data-platform/page.tsx
index 3002bd4..c77c733 100644
--- a/app/data-platform/page.tsx
+++ b/app/data-platform/page.tsx
@@ -1,694 +1,681 @@
 "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 { Database, Plus, Settings, Play, Pause, RotateCcw, Brain, Zap, CheckCircle, AlertCircle } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Progress } from "@/components/ui/progress"
-import { Switch } from "@/components/ui/switch"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
-import {
-  Database,
-  Activity,
-  AlertCircle,
-  CheckCircle,
-  Clock,
-  Brain,
-  Search,
-  Filter,
-  Download,
-  Settings,
-  RefreshCw,
-  Shield,
-  BarChart3,
-  Plus,
-  RotateCcw,
-  Target,
-} from "lucide-react"
-import { TooltipHelp, TooltipProvider } from "@/components/ui/tooltip-help"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog"
+import { Switch } from "@/components/ui/switch"
+
+interface DataSource {
+  id: string
+  name: string
+  type: string
+  status: "connected" | "disconnected" | "syncing"
+  lastSync: string
+  recordCount: number
+  description: string
+}
+
+interface AIModel {
+  id: string
+  name: string
+  type: string
+  status: "training" | "ready" | "error"
+  accuracy: number
+  lastTrained: string
+  parameters: Record<string, any>
+}
 
 export default function DataPlatformPage() {
-  const [selectedSource, setSelectedSource] = useState("all")
-  const [searchQuery, setSearchQuery] = useState("")
-  const [isAddingSource, setIsAddingSource] = useState(false)
-  const [isTrainingModel, setIsTrainingModel] = useState(false)
-  const [selectedModel, setSelectedModel] = useState<string | null>(null)
-
-  // 数据源管理
-  const [dataSources, setDataSources] = useState([
+  const [dataSources, setDataSources] = useState<DataSource[]>([
     {
-      id: "1",
-      name: "用户行为数据库",
+      id: "ds_001",
+      name: "微信用户数据库",
       type: "MySQL",
       status: "connected",
-      lastSync: "2分钟前",
-      records: 1200000,
-      description: "用户行为轨迹和交互数据",
-      connectionString: "mysql://localhost:3306/user_behavior",
+      lastSync: "2024-01-15T10:30:00Z",
+      recordCount: 2500000000,
+      description: "存储微信用户基础信息和行为数据",
     },
     {
-      id: "2",
-      name: "触客宝API",
-      type: "REST API",
+      id: "ds_002",
+      name: "流量关键词库",
+      type: "PostgreSQL",
       status: "connected",
-      lastSync: "5分钟前",
-      records: 856000,
-      description: "客户通话记录和服务数据",
-      connectionString: "https://api.chukebao.com/v1",
+      lastSync: "2024-01-15T09:45:00Z",
+      recordCount: 150000,
+      description: "搜索引擎关键词和流量数据",
     },
     {
-      id: "3",
-      name: "抖音数据接口",
-      type: "API",
+      id: "ds_003",
+      name: "用户行为日志",
+      type: "MongoDB",
       status: "syncing",
-      lastSync: "10分钟前",
-      records: 324000,
-      description: "抖音平台内容和用户数据",
-      connectionString: "https://api.douyin.com/data",
-    },
-    {
-      id: "4",
-      name: "小红书数据源",
-      type: "API",
-      status: "connected",
-      lastSync: "3分钟前",
-      records: 567000,
-      description: "小红书用户画像和内容数据",
-      connectionString: "https://api.xiaohongshu.com/user",
-    },
-    {
-      id: "5",
-      name: "微信生态数据",
-      type: "Database",
-      status: "connected",
-      lastSync: "1分钟前",
-      records: 2340000,
-      description: "微信用户关系和群组数据",
-      connectionString: "mongodb://localhost:27017/wechat_data",
+      lastSync: "2024-01-15T11:00:00Z",
+      recordCount: 1500000000,
+      description: "用户操作行为和交互记录",
     },
   ])
 
-  // AI模型管理
-  const [aiModels, setAiModels] = useState([
+  const [aiModels, setAiModels] = useState<AIModel[]>([
     {
-      id: "1",
-      name: "用户画像模型",
-      type: "classification",
-      status: "active",
-      accuracy: 94.2,
-      lastTrained: "2024-01-10",
-      predictions: 15420,
-      trainingData: "用户行为数据",
+      id: "model_001",
+      name: "用户价值预测模型",
+      type: "Classification",
+      status: "ready",
+      accuracy: 0.92,
+      lastTrained: "2024-01-14T15:30:00Z",
       parameters: {
-        algorithm: "Random Forest",
-        features: 156,
+        algorithm: "RandomForest",
+        features: 25,
         epochs: 100,
-        learningRate: 0.001,
-      },
-    },
-    {
-      id: "2",
-      name: "流失预测模型",
-      type: "prediction",
-      status: "active",
-      accuracy: 88.7,
-      lastTrained: "2024-01-12",
-      predictions: 8765,
-      trainingData: "用户活跃度数据",
-      parameters: {
-        algorithm: "XGBoost",
-        features: 89,
-        epochs: 150,
         learningRate: 0.01,
       },
     },
     {
-      id: "3",
-      name: "价值评估模型",
-      type: "regression",
+      id: "model_002",
+      name: "流量趋势分析模型",
+      type: "Regression",
       status: "training",
-      accuracy: 91.3,
-      lastTrained: "2024-01-08",
-      predictions: 12340,
-      trainingData: "交易和行为数据",
+      accuracy: 0.87,
+      lastTrained: "2024-01-15T08:00:00Z",
       parameters: {
-        algorithm: "Neural Network",
-        features: 234,
+        algorithm: "LSTM",
+        features: 15,
         epochs: 200,
-        learningRate: 0.005,
+        learningRate: 0.001,
       },
     },
     {
-      id: "4",
-      name: "行为预测模型",
-      type: "prediction",
-      status: "active",
-      accuracy: 86.5,
-      lastTrained: "2024-01-14",
-      predictions: 9876,
-      trainingData: "用户行为序列",
+      id: "model_003",
+      name: "用户聚类模型",
+      type: "Clustering",
+      status: "ready",
+      accuracy: 0.89,
+      lastTrained: "2024-01-13T12:00:00Z",
       parameters: {
-        algorithm: "LSTM",
-        features: 67,
-        epochs: 80,
-        learningRate: 0.002,
+        algorithm: "KMeans",
+        clusters: 8,
+        features: 20,
+        iterations: 300,
       },
     },
   ])
 
-  const getStatusIcon = (status: string) => {
-    switch (status) {
-      case "connected":
-        return <CheckCircle className="h-4 w-4 text-green-500" />
-      case "syncing":
-        return <RefreshCw className="h-4 w-4 text-blue-500 animate-spin" />
-      case "error":
-        return <AlertCircle className="h-4 w-4 text-red-500" />
-      case "active":
-        return <Activity className="h-4 w-4 text-green-500" />
-      case "training":
-        return <Brain className="h-4 w-4 text-blue-500 animate-pulse" />
-      default:
-        return <Clock className="h-4 w-4 text-gray-500" />
-    }
-  }
+  const [isAddingDataSource, setIsAddingDataSource] = useState(false)
+  const [isTrainingModel, setIsTrainingModel] = useState(false)
+  const [newDataSource, setNewDataSource] = useState({
+    name: "",
+    type: "MySQL",
+    host: "",
+    port: "",
+    database: "",
+    username: "",
+    password: "",
+    description: "",
+  })
 
-  const getStatusBadge = (status: string) => {
-    switch (status) {
-      case "connected":
-        return <Badge className="bg-green-100 text-green-800">已连接</Badge>
-      case "syncing":
-        return <Badge className="bg-blue-100 text-blue-800">同步中</Badge>
-      case "error":
-        return <Badge className="bg-red-100 text-red-800">错误</Badge>
-      case "active":
-        return <Badge className="bg-green-100 text-green-800">运行中</Badge>
-      case "training":
-        return <Badge className="bg-blue-100 text-blue-800">训练中</Badge>
-      default:
-        return <Badge className="bg-gray-100 text-gray-800">未知</Badge>
-    }
-  }
+  const [modelTrainingConfig, setModelTrainingConfig] = useState({
+    modelId: "",
+    algorithm: "RandomForest",
+    features: 25,
+    epochs: 100,
+    learningRate: 0.01,
+    validationSplit: 0.2,
+    autoTune: true,
+  })
 
   // 添加数据源
-  const handleAddDataSource = () => {
-    setIsAddingSource(true)
-  }
+  const handleAddDataSource = async () => {
+    try {
+      const newSource: DataSource = {
+        id: `ds_${Date.now()}`,
+        name: newDataSource.name,
+        type: newDataSource.type,
+        status: "connected",
+        lastSync: new Date().toISOString(),
+        recordCount: 0,
+        description: newDataSource.description,
+      }
 
-  // 导入数据源数据
-  const handleImportData = (sourceId: string) => {
-    const source = dataSources.find((s) => s.id === sourceId)
-    if (source) {
-      // 模拟数据导入过程
-      setDataSources((prev) =>
-        prev.map((s) => (s.id === sourceId ? { ...s, status: "syncing", lastSync: "正在同步..." } : s)),
-      )
+      setDataSources((prev) => [...prev, newSource])
+      setIsAddingDataSource(false)
+      setNewDataSource({
+        name: "",
+        type: "MySQL",
+        host: "",
+        port: "",
+        database: "",
+        username: "",
+        password: "",
+        description: "",
+      })
 
+      // 模拟数据导入
       setTimeout(() => {
         setDataSources((prev) =>
-          prev.map((s) =>
-            s.id === sourceId
-              ? {
-                  ...s,
-                  status: "connected",
-                  lastSync: "刚刚",
-                  records: s.records + Math.floor(Math.random() * 10000),
-                }
-              : s,
+          prev.map((ds) =>
+            ds.id === newSource.id
+              ? { ...ds, recordCount: Math.floor(Math.random() * 1000000) + 10000, status: "connected" as const }
+              : ds,
           ),
         )
-      }, 3000)
+      }, 2000)
+    } catch (error) {
+      console.error("添加数据源失败:", error)
     }
   }
 
-  // 重新训练模型
-  const handleRetrainModel = (modelId: string) => {
-    setAiModels((prev) =>
-      prev.map((m) => (m.id === modelId ? { ...m, status: "training", lastTrained: "训练中..." } : m)),
+  // 同步数据源
+  const handleSyncDataSource = (id: string) => {
+    setDataSources((prev) =>
+      prev.map((ds) => (ds.id === id ? { ...ds, status: "syncing" as const, lastSync: new Date().toISOString() } : ds)),
     )
 
+    // 模拟同步完成
     setTimeout(() => {
-      setAiModels((prev) =>
-        prev.map((m) =>
-          m.id === modelId
+      setDataSources((prev) =>
+        prev.map((ds) =>
+          ds.id === id
             ? {
-                ...m,
-                status: "active",
-                lastTrained: new Date().toISOString().split("T")[0],
-                accuracy: Math.min(95, m.accuracy + Math.random() * 2),
+                ...ds,
+                status: "connected" as const,
+                recordCount: ds.recordCount + Math.floor(Math.random() * 10000),
+                lastSync: new Date().toISOString(),
               }
-            : m,
+            : ds,
         ),
       )
+    }, 3000)
+  }
+
+  // 训练AI模型
+  const handleTrainModel = async () => {
+    if (!modelTrainingConfig.modelId) return
+
+    setIsTrainingModel(true)
+
+    // 更新模型状态为训练中
+    setAiModels((prev) =>
+      prev.map((model) =>
+        model.id === modelTrainingConfig.modelId ? { ...model, status: "training" as const } : model,
+      ),
+    )
+
+    // 模拟训练过程
+    setTimeout(() => {
+      setAiModels((prev) =>
+        prev.map((model) =>
+          model.id === modelTrainingConfig.modelId
+            ? {
+                ...model,
+                status: "ready" as const,
+                accuracy: Math.random() * 0.1 + 0.85,
+                lastTrained: new Date().toISOString(),
+                parameters: {
+                  algorithm: modelTrainingConfig.algorithm,
+                  features: modelTrainingConfig.features,
+                  epochs: modelTrainingConfig.epochs,
+                  learningRate: modelTrainingConfig.learningRate,
+                },
+              }
+            : model,
+        ),
+      )
+      setIsTrainingModel(false)
     }, 5000)
   }
 
+  // 格式化数字
+  const formatNumber = (num: number): string => {
+    if (num >= 1000000000) {
+      return `${(num / 1000000000).toFixed(1)}B`
+    }
+    if (num >= 1000000) {
+      return `${(num / 1000000).toFixed(1)}M`
+    }
+    if (num >= 1000) {
+      return `${(num / 1000).toFixed(1)}K`
+    }
+    return num.toString()
+  }
+
+  // 获取状态颜色
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "connected":
+      case "ready":
+        return "text-green-600 bg-green-50 border-green-200"
+      case "syncing":
+      case "training":
+        return "text-yellow-600 bg-yellow-50 border-yellow-200"
+      case "disconnected":
+      case "error":
+        return "text-red-600 bg-red-50 border-red-200"
+      default:
+        return "text-gray-600 bg-gray-50 border-gray-200"
+    }
+  }
+
+  // 获取状态图标
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "connected":
+      case "ready":
+        return <CheckCircle className="w-4 h-4" />
+      case "syncing":
+      case "training":
+        return <Zap className="w-4 h-4 animate-pulse" />
+      case "disconnected":
+      case "error":
+        return <AlertCircle className="w-4 h-4" />
+      default:
+        return <Database className="w-4 h-4" />
+    }
+  }
+
   return (
-    <TooltipProvider>
-      <div className="container mx-auto p-6 space-y-6">
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50">
+      <div className="container mx-auto px-4 py-8">
         {/* 页面标题 */}
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold flex items-center gap-2">
-              <Database className="h-8 w-8 text-blue-600" />
-              数据中台
-            </h1>
-            <p className="text-muted-foreground mt-2">统一数据管理和AI模型训练平台</p>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm">
-              <Download className="h-4 w-4 mr-2" />
-              导出配置
-            </Button>
-            <Button size="sm">
-              <Settings className="h-4 w-4 mr-2" />
-              系统设置
-            </Button>
-          </div>
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold text-gray-900 mb-2">数据中台</h1>
+          <p className="text-gray-600">数据源管理与AI模型训练平台</p>
         </div>
 
-        {/* 核心指标概览 */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-1">
-                数据源
-                <TooltipHelp content="已接入的数据源总数，支持实时同步" />
-              </CardTitle>
-              <Database className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{dataSources.length}</div>
-              <p className="text-xs text-muted-foreground">
-                <span className="text-green-600">{dataSources.filter((s) => s.status === "connected").length}</span>{" "}
-                个正常运行
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-1">
-                数据记录
-                <TooltipHelp content="所有数据源中的记录总数" />
-              </CardTitle>
-              <BarChart3 className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">
-                {(dataSources.reduce((sum, source) => sum + source.records, 0) / 1000000).toFixed(1)}M
-              </div>
-              <p className="text-xs text-muted-foreground">较昨日 +2.3%</p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-1">
-                AI模型
-                <TooltipHelp content="运行中的AI模型数量和平均准确率" />
-              </CardTitle>
-              <Brain className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{aiModels.filter((m) => m.status === "active").length}</div>
-              <p className="text-xs text-muted-foreground">
-                平均准确率 {(aiModels.reduce((sum, m) => sum + m.accuracy, 0) / aiModels.length).toFixed(1)}%
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-1">
-                系统状态
-                <TooltipHelp content="整体系统健康状态和可用性" />
-              </CardTitle>
-              <Shield className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold text-green-600">99.8%</div>
-              <p className="text-xs text-muted-foreground">系统可用性</p>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* 主要功能区域 */}
-        <Tabs defaultValue="sources" className="space-y-6">
+        <Tabs defaultValue="datasources" className="space-y-6">
           <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="sources">数据源管理</TabsTrigger>
-            <TabsTrigger value="ai-models">AI模型</TabsTrigger>
+            <TabsTrigger value="datasources" className="flex items-center gap-2">
+              <Database className="w-4 h-4" />
+              数据源管理
+            </TabsTrigger>
+            <TabsTrigger value="aimodels" className="flex items-center gap-2">
+              <Brain className="w-4 h-4" />
+              AI模型
+            </TabsTrigger>
           </TabsList>
 
           {/* 数据源管理 */}
-          <TabsContent value="sources" className="space-y-6">
-            <Card>
-              <CardHeader>
-                <div className="flex justify-between items-center">
-                  <div>
-                    <CardTitle className="flex items-center gap-2">
-                      <Database className="h-5 w-5" />
-                      数据源管理
-                      <TooltipHelp content="管理所有数据源的连接、同步和数据导入" />
-                    </CardTitle>
-                    <CardDescription>统一管理多源异构数据，支持一键导入所有数据</CardDescription>
-                  </div>
-                  <div className="flex space-x-2">
-                    <div className="relative">
-                      <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <TabsContent value="datasources" className="space-y-6">
+            <div className="flex justify-between items-center">
+              <h2 className="text-2xl font-semibold">数据源管理</h2>
+              <Dialog open={isAddingDataSource} onOpenChange={setIsAddingDataSource}>
+                <DialogTrigger asChild>
+                  <Button className="flex items-center gap-2">
+                    <Plus className="w-4 h-4" />
+                    添加数据源
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="max-w-2xl">
+                  <DialogHeader>
+                    <DialogTitle>添加新数据源</DialogTitle>
+                  </DialogHeader>
+                  <div className="grid grid-cols-2 gap-4 py-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="name">数据源名称</Label>
                       <Input
-                        placeholder="搜索数据源..."
-                        className="pl-8 w-64"
-                        value={searchQuery}
-                        onChange={(e) => setSearchQuery(e.target.value)}
+                        id="name"
+                        value={newDataSource.name}
+                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, name: e.target.value }))}
+                        placeholder="输入数据源名称"
                       />
                     </div>
-                    <Button variant="outline" size="sm">
-                      <Filter className="mr-2 h-4 w-4" />
-                      筛选
-                    </Button>
-                    <Button size="sm" onClick={handleAddDataSource}>
-                      <Plus className="mr-2 h-4 w-4" />
-                      添加数据源
-                    </Button>
-                  </div>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>数据源名称</TableHead>
-                      <TableHead>类型</TableHead>
-                      <TableHead>状态</TableHead>
-                      <TableHead>记录数</TableHead>
-                      <TableHead>最后同步</TableHead>
-                      <TableHead>操作</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {dataSources.map((source) => (
-                      <TableRow key={source.id}>
-                        <TableCell>
-                          <div>
-                            <div className="font-medium">{source.name}</div>
-                            <div className="text-sm text-gray-500">{source.description}</div>
-                          </div>
-                        </TableCell>
-                        <TableCell>
-                          <Badge variant="outline">{source.type}</Badge>
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex items-center space-x-2">
-                            {getStatusIcon(source.status)}
-                            {getStatusBadge(source.status)}
-                          </div>
-                        </TableCell>
-                        <TableCell>{source.records.toLocaleString()}</TableCell>
-                        <TableCell>{source.lastSync}</TableCell>
-                        <TableCell>
-                          <div className="flex space-x-2">
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleImportData(source.id)}
-                              disabled={source.status === "syncing"}
-                            >
-                              <Download className="h-4 w-4 mr-1" />
-                              导入数据
-                            </Button>
-                            <Button variant="ghost" size="sm">
-                              <Settings className="h-4 w-4" />
-                            </Button>
-                            <Button variant="ghost" size="sm">
-                              <RefreshCw className="h-4 w-4" />
-                            </Button>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          {/* AI模型管理 */}
-          <TabsContent value="ai-models" className="space-y-6">
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              {aiModels.map((model) => (
-                <Card key={model.id} className="relative">
-                  <CardHeader>
-                    <div className="flex justify-between items-start">
-                      <div>
-                        <CardTitle className="text-base flex items-center gap-2">
-                          <Brain className="h-5 w-5 text-purple-600" />
-                          {model.name}
-                        </CardTitle>
-                        <CardDescription>类型: {model.type}</CardDescription>
-                      </div>
-                      {getStatusBadge(model.status)}
+                    <div className="space-y-2">
+                      <Label htmlFor="type">数据库类型</Label>
+                      <Select
+                        value={newDataSource.type}
+                        onValueChange={(value) => setNewDataSource((prev) => ({ ...prev, type: value }))}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="MySQL">MySQL</SelectItem>
+                          <SelectItem value="PostgreSQL">PostgreSQL</SelectItem>
+                          <SelectItem value="MongoDB">MongoDB</SelectItem>
+                          <SelectItem value="Redis">Redis</SelectItem>
+                          <SelectItem value="ClickHouse">ClickHouse</SelectItem>
+                        </SelectContent>
+                      </Select>
                     </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="host">主机地址</Label>
+                      <Input
+                        id="host"
+                        value={newDataSource.host}
+                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, host: e.target.value }))}
+                        placeholder="localhost"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="port">端口</Label>
+                      <Input
+                        id="port"
+                        value={newDataSource.port}
+                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, port: e.target.value }))}
+                        placeholder="3306"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="database">数据库名</Label>
+                      <Input
+                        id="database"
+                        value={newDataSource.database}
+                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, database: e.target.value }))}
+                        placeholder="database_name"
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="username">用户名</Label>
+                      <Input
+                        id="username"
+                        value={newDataSource.username}
+                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, username: e.target.value }))}
+                        placeholder="username"
+                      />
+                    </div>
+                    <div className="col-span-2 space-y-2">
+                      <Label htmlFor="password">密码</Label>
+                      <Input
+                        id="password"
+                        type="password"
+                        value={newDataSource.password}
+                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, password: e.target.value }))}
+                        placeholder="password"
+                      />
+                    </div>
+                    <div className="col-span-2 space-y-2">
+                      <Label htmlFor="description">描述</Label>
+                      <Textarea
+                        id="description"
+                        value={newDataSource.description}
+                        onChange={(e) => setNewDataSource((prev) => ({ ...prev, description: e.target.value }))}
+                        placeholder="数据源描述信息"
+                        rows={3}
+                      />
+                    </div>
+                  </div>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="outline" onClick={() => setIsAddingDataSource(false)}>
+                      取消
+                    </Button>
+                    <Button onClick={handleAddDataSource}>连接并导入数据</Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+              {dataSources.map((source) => (
+                <Card key={source.id} className="border-2 hover:shadow-lg transition-all duration-200">
+                  <CardHeader className="pb-3">
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="text-lg">{source.name}</CardTitle>
+                      <Badge className={`${getStatusColor(source.status)} border`}>
+                        {getStatusIcon(source.status)}
+                        <span className="ml-1 capitalize">{source.status}</span>
+                      </Badge>
+                    </div>
+                    <p className="text-sm text-gray-600">{source.description}</p>
                   </CardHeader>
-                  <CardContent>
-                    <div className="space-y-4">
-                      <div className="flex justify-between items-center">
-                        <span className="text-sm font-medium">准确率</span>
-                        <span className="text-sm font-bold">{model.accuracy}%</span>
+                  <CardContent className="space-y-4">
+                    <div className="grid grid-cols-2 gap-4 text-sm">
+                      <div>
+                        <span className="text-gray-500">类型:</span>
+                        <span className="ml-2 font-medium">{source.type}</span>
                       </div>
-                      <Progress value={model.accuracy} className="h-2" />
+                      <div>
+                        <span className="text-gray-500">记录数:</span>
+                        <span className="ml-2 font-medium">{formatNumber(source.recordCount)}</span>
+                      </div>
+                    </div>
 
-                      <div className="grid grid-cols-2 gap-4 text-sm">
-                        <div>
-                          <span className="text-muted-foreground">最后训练</span>
-                          <div className="font-medium">{model.lastTrained}</div>
-                        </div>
-                        <div>
-                          <span className="text-muted-foreground">预测次数</span>
-                          <div className="font-medium">{model.predictions.toLocaleString()}</div>
-                        </div>
-                      </div>
+                    <div className="text-sm">
+                      <span className="text-gray-500">最后同步:</span>
+                      <span className="ml-2">{new Date(source.lastSync).toLocaleString()}</span>
+                    </div>
 
-                      <div className="text-sm">
-                        <span className="text-muted-foreground">训练数据: </span>
-                        <span className="font-medium">{model.trainingData}</span>
-                      </div>
-
-                      <div className="flex space-x-2">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="flex-1 bg-transparent"
-                          onClick={() => handleRetrainModel(model.id)}
-                          disabled={model.status === "training"}
-                        >
-                          <RotateCcw className="h-4 w-4 mr-2" />
-                          {model.status === "training" ? "训练中..." : "重新训练"}
-                        </Button>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="flex-1 bg-transparent"
-                          onClick={() => setSelectedModel(model.id)}
-                        >
-                          <Settings className="h-4 w-4 mr-2" />
-                          设置
-                        </Button>
-                      </div>
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => handleSyncDataSource(source.id)}
+                        disabled={source.status === "syncing"}
+                        className="flex-1"
+                      >
+                        {source.status === "syncing" ? (
+                          <>
+                            <RotateCcw className="w-3 h-3 mr-1 animate-spin" />
+                            同步中
+                          </>
+                        ) : (
+                          <>
+                            <RotateCcw className="w-3 h-3 mr-1" />
+                            同步数据
+                          </>
+                        )}
+                      </Button>
+                      <Button size="sm" variant="outline">
+                        <Settings className="w-3 h-3" />
+                      </Button>
                     </div>
                   </CardContent>
                 </Card>
               ))}
             </div>
+          </TabsContent>
 
-            {/* 模型性能监控 */}
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  <Target className="h-5 w-5" />
-                  模型性能监控
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="grid grid-cols-1 md:grid-cols-4 gap-4 text-center">
-                  <div>
-                    <div className="text-2xl font-bold">
-                      {aiModels.reduce((sum, m) => sum + m.predictions, 0).toLocaleString()}
+          {/* AI模型管理 */}
+          <TabsContent value="aimodels" className="space-y-6">
+            <div className="flex justify-between items-center">
+              <h2 className="text-2xl font-semibold">AI模型管理</h2>
+              <Dialog open={isTrainingModel} onOpenChange={setIsTrainingModel}>
+                <DialogTrigger asChild>
+                  <Button className="flex items-center gap-2">
+                    <Brain className="w-4 h-4" />
+                    重新训练模型
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="max-w-2xl">
+                  <DialogHeader>
+                    <DialogTitle>模型训练配置</DialogTitle>
+                  </DialogHeader>
+                  <div className="grid grid-cols-2 gap-4 py-4">
+                    <div className="col-span-2 space-y-2">
+                      <Label htmlFor="model">选择模型</Label>
+                      <Select
+                        value={modelTrainingConfig.modelId}
+                        onValueChange={(value) => setModelTrainingConfig((prev) => ({ ...prev, modelId: value }))}
+                      >
+                        <SelectTrigger>
+                          <SelectValue placeholder="选择要训练的模型" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {aiModels.map((model) => (
+                            <SelectItem key={model.id} value={model.id}>
+                              {model.name}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
                     </div>
-                    <div className="text-sm text-muted-foreground">总预测次数</div>
-                  </div>
-                  <div>
-                    <div className="text-2xl font-bold">
-                      {(aiModels.reduce((sum, m) => sum + m.accuracy, 0) / aiModels.length).toFixed(1)}%
+
+                    <div className="space-y-2">
+                      <Label htmlFor="algorithm">算法</Label>
+                      <Select
+                        value={modelTrainingConfig.algorithm}
+                        onValueChange={(value) => setModelTrainingConfig((prev) => ({ ...prev, algorithm: value }))}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="RandomForest">Random Forest</SelectItem>
+                          <SelectItem value="XGBoost">XGBoost</SelectItem>
+                          <SelectItem value="LSTM">LSTM</SelectItem>
+                          <SelectItem value="KMeans">K-Means</SelectItem>
+                          <SelectItem value="SVM">SVM</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="features">特征数量</Label>
+                      <Input
+                        id="features"
+                        type="number"
+                        value={modelTrainingConfig.features}
+                        onChange={(e) =>
+                          setModelTrainingConfig((prev) => ({ ...prev, features: Number.parseInt(e.target.value) }))
+                        }
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="epochs">训练轮数</Label>
+                      <Input
+                        id="epochs"
+                        type="number"
+                        value={modelTrainingConfig.epochs}
+                        onChange={(e) =>
+                          setModelTrainingConfig((prev) => ({ ...prev, epochs: Number.parseInt(e.target.value) }))
+                        }
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="learningRate">学习率</Label>
+                      <Input
+                        id="learningRate"
+                        type="number"
+                        step="0.001"
+                        value={modelTrainingConfig.learningRate}
+                        onChange={(e) =>
+                          setModelTrainingConfig((prev) => ({
+                            ...prev,
+                            learningRate: Number.parseFloat(e.target.value),
+                          }))
+                        }
+                      />
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="validationSplit">验证集比例</Label>
+                      <Input
+                        id="validationSplit"
+                        type="number"
+                        step="0.1"
+                        min="0.1"
+                        max="0.5"
+                        value={modelTrainingConfig.validationSplit}
+                        onChange={(e) =>
+                          setModelTrainingConfig((prev) => ({
+                            ...prev,
+                            validationSplit: Number.parseFloat(e.target.value),
+                          }))
+                        }
+                      />
+                    </div>
+
+                    <div className="col-span-2 flex items-center space-x-2">
+                      <Switch
+                        id="autoTune"
+                        checked={modelTrainingConfig.autoTune}
+                        onCheckedChange={(checked) =>
+                          setModelTrainingConfig((prev) => ({ ...prev, autoTune: checked }))
+                        }
+                      />
+                      <Label htmlFor="autoTune">自动调参</Label>
                     </div>
-                    <div className="text-sm text-muted-foreground">平均准确率</div>
                   </div>
-                  <div>
-                    <div className="text-2xl font-bold">156ms</div>
-                    <div className="text-sm text-muted-foreground">平均响应时间</div>
+                  <div className="flex justify-end gap-2">
+                    <Button variant="outline" onClick={() => setIsTrainingModel(false)}>
+                      取消
+                    </Button>
+                    <Button onClick={handleTrainModel} disabled={!modelTrainingConfig.modelId}>
+                      开始训练
+                    </Button>
                   </div>
-                  <div>
-                    <div className="text-2xl font-bold">99.8%</div>
-                    <div className="text-sm text-muted-foreground">服务可用性</div>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
+                </DialogContent>
+              </Dialog>
+            </div>
+
+            <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+              {aiModels.map((model) => (
+                <Card key={model.id} className="border-2 hover:shadow-lg transition-all duration-200">
+                  <CardHeader className="pb-3">
+                    <div className="flex items-center justify-between">
+                      <CardTitle className="text-lg">{model.name}</CardTitle>
+                      <Badge className={`${getStatusColor(model.status)} border`}>
+                        {getStatusIcon(model.status)}
+                        <span className="ml-1 capitalize">{model.status}</span>
+                      </Badge>
+                    </div>
+                    <p className="text-sm text-gray-600">{model.type} 模型</p>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="space-y-2">
+                      <div className="flex justify-between text-sm">
+                        <span className="text-gray-500">准确率</span>
+                        <span className="font-medium">{(model.accuracy * 100).toFixed(1)}%</span>
+                      </div>
+                      <Progress value={model.accuracy * 100} className="h-2" />
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4 text-sm">
+                      <div>
+                        <span className="text-gray-500">算法:</span>
+                        <span className="ml-2 font-medium">{model.parameters.algorithm}</span>
+                      </div>
+                      <div>
+                        <span className="text-gray-500">特征数:</span>
+                        <span className="ml-2 font-medium">{model.parameters.features}</span>
+                      </div>
+                    </div>
+
+                    <div className="text-sm">
+                      <span className="text-gray-500">最后训练:</span>
+                      <span className="ml-2">{new Date(model.lastTrained).toLocaleString()}</span>
+                    </div>
+
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        disabled={model.status === "training"}
+                        className="flex-1 bg-transparent"
+                      >
+                        {model.status === "training" ? (
+                          <>
+                            <Pause className="w-3 h-3 mr-1" />
+                            训练中
+                          </>
+                        ) : (
+                          <>
+                            <Play className="w-3 h-3 mr-1" />
+                            预测
+                          </>
+                        )}
+                      </Button>
+                      <Button size="sm" variant="outline">
+                        <Settings className="w-3 h-3" />
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
           </TabsContent>
         </Tabs>
-
-        {/* 添加数据源对话框 */}
-        <Dialog open={isAddingSource} onOpenChange={setIsAddingSource}>
-          <DialogContent className="sm:max-w-[500px]">
-            <DialogHeader>
-              <DialogTitle>添加数据源</DialogTitle>
-              <DialogDescription>配置新的数据源连接，支持自动导入所有数据</DialogDescription>
-            </DialogHeader>
-            <div className="grid gap-4 py-4">
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="source-name" className="text-right">
-                  数据源名称
-                </Label>
-                <Input id="source-name" className="col-span-3" placeholder="例如：用户行为数据库" />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="source-type" className="text-right">
-                  数据源类型
-                </Label>
-                <Select>
-                  <SelectTrigger id="source-type" className="col-span-3">
-                    <SelectValue placeholder="选择数据源类型" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="mysql">MySQL</SelectItem>
-                    <SelectItem value="postgresql">PostgreSQL</SelectItem>
-                    <SelectItem value="mongodb">MongoDB</SelectItem>
-                    <SelectItem value="api">REST API</SelectItem>
-                    <SelectItem value="file">文件导入</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="connection-string" className="text-right">
-                  连接字符串
-                </Label>
-                <Input
-                  id="connection-string"
-                  className="col-span-3"
-                  placeholder="例如：mysql://user:pass@host:port/db"
-                />
-              </div>
-              <div className="grid grid-cols-4 items-start gap-4">
-                <Label htmlFor="description" className="text-right pt-2">
-                  描述
-                </Label>
-                <Textarea id="description" className="col-span-3" placeholder="数据源描述信息" rows={3} />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <div className="text-right">
-                  <Label htmlFor="auto-import">自动导入</Label>
-                </div>
-                <div className="flex items-center space-x-2 col-span-3">
-                  <Switch id="auto-import" defaultChecked />
-                  <Label htmlFor="auto-import">连接成功后自动导入所有数据</Label>
-                </div>
-              </div>
-            </div>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setIsAddingSource(false)}>
-                取消
-              </Button>
-              <Button onClick={() => setIsAddingSource(false)}>
-                <Plus className="mr-2 h-4 w-4" />
-                添加数据源
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* 模型设置对话框 */}
-        <Dialog open={!!selectedModel} onOpenChange={(open) => !open && setSelectedModel(null)}>
-          <DialogContent className="sm:max-w-[600px]">
-            <DialogHeader>
-              <DialogTitle>模型设置</DialogTitle>
-              <DialogDescription>配置AI模型的训练参数和设置</DialogDescription>
-            </DialogHeader>
-            {selectedModel && (
-              <div className="grid gap-4 py-4">
-                {(() => {
-                  const model = aiModels.find((m) => m.id === selectedModel)
-                  if (!model) return null
-                  return (
-                    <>
-                      <div className="grid grid-cols-4 items-center gap-4">
-                        <Label className="text-right">模型名称</Label>
-                        <Input className="col-span-3" defaultValue={model.name} />
-                      </div>
-                      <div className="grid grid-cols-4 items-center gap-4">
-                        <Label className="text-right">算法</Label>
-                        <Select defaultValue={model.parameters.algorithm}>
-                          <SelectTrigger className="col-span-3">
-                            <SelectValue />
-                          </SelectTrigger>
-                          <SelectContent>
-                            <SelectItem value="Random Forest">Random Forest</SelectItem>
-                            <SelectItem value="XGBoost">XGBoost</SelectItem>
-                            <SelectItem value="Neural Network">Neural Network</SelectItem>
-                            <SelectItem value="LSTM">LSTM</SelectItem>
-                          </SelectContent>
-                        </Select>
-                      </div>
-                      <div className="grid grid-cols-4 items-center gap-4">
-                        <Label className="text-right">特征数量</Label>
-                        <Input className="col-span-3" type="number" defaultValue={model.parameters.features} />
-                      </div>
-                      <div className="grid grid-cols-4 items-center gap-4">
-                        <Label className="text-right">训练轮数</Label>
-                        <Input className="col-span-3" type="number" defaultValue={model.parameters.epochs} />
-                      </div>
-                      <div className="grid grid-cols-4 items-center gap-4">
-                        <Label className="text-right">学习率</Label>
-                        <Input
-                          className="col-span-3"
-                          type="number"
-                          step="0.001"
-                          defaultValue={model.parameters.learningRate}
-                        />
-                      </div>
-                      <div className="grid grid-cols-4 items-start gap-4">
-                        <Label className="text-right pt-2">训练数据</Label>
-                        <Textarea className="col-span-3" defaultValue={model.trainingData} rows={3} />
-                      </div>
-                    </>
-                  )
-                })()}
-              </div>
-            )}
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setSelectedModel(null)}>
-                取消
-              </Button>
-              <Button onClick={() => setSelectedModel(null)}>
-                <Settings className="mr-2 h-4 w-4" />
-                保存设置
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
       </div>
-    </TooltipProvider>
+    </div>
   )
 }
diff --git a/app/intelligent-search/page.tsx b/app/intelligent-search/page.tsx
index 07c144e..cb822e3 100644
--- a/app/intelligent-search/page.tsx
+++ b/app/intelligent-search/page.tsx
@@ -12,20 +12,7 @@ import { Avatar } from "@/components/ui/avatar"
 import { Progress } from "@/components/ui/progress"
 import { Switch } from "@/components/ui/switch"
 import { Label } from "@/components/ui/label"
-import {
-  Search,
-  Sparkles,
-  Clock,
-  TrendingUp,
-  Users,
-  Brain,
-  Zap,
-  Download,
-  RefreshCw,
-  Eye,
-  BarChart3,
-  Lightbulb,
-} from "lucide-react"
+import { Search, Sparkles, Clock, TrendingUp, Users, Brain, Zap, Download, RefreshCw, Eye, BarChart3, Lightbulb } from 'lucide-react'
 import { TooltipHelp, TooltipProvider } from "@/components/ui/tooltip-help"
 
 interface SearchResult {
@@ -59,6 +46,20 @@ export default function IntelligentSearchPage() {
   const [searchResults, setSearchResults] = useState<SearchResponse | null>(null)
   const [searchHistory, setSearchHistory] = useState<string[]>([])
   const [activeTab, setActiveTab] = useState("search")
+  const [rfmHighValueOnly, setRfmHighValueOnly] = useState(false);
+
+  const detectQueryType = (q: string) => {
+    const s = q.trim()
+    if (/^\d{5,11}$/.test(s)) {
+      if (/^1[3-9]\d{9}$/.test(s) || /^\d{3}\*{4}\d{4}$/.test(s)) return "手机号"
+      return "QQ号"
+    }
+    if (/^[A-F0-9]{14}$/.test(s)) return "MEID"
+    if (/^0{6,}$/.test(s) || s.includes("000000")) return "流量词"
+    return "通用"
+  }
+
+  const queryType = detectQueryType(searchQuery)
 
   // 执行搜索
   const performSearch = useCallback(
@@ -78,6 +79,7 @@ export default function IntelligentSearchPage() {
             options: {
               useAI,
               includeInsights,
+              rfmTag: includeInsights ? "高" : undefined,
               limit: 50,
             },
           }),
@@ -193,6 +195,11 @@ export default function IntelligentSearchPage() {
                 </Button>
               </div>
 
+              <div className="flex items-center gap-2 mt-2">
+                <Badge variant="secondary" className="text-xs">识别: {queryType}</Badge>
+                {queryType === "流量词" && <Badge className="text-xs">优先匹配流量池</Badge>}
+              </div>
+
               {/* 搜索选项 */}
               <div className="flex flex-wrap items-center gap-6">
                 <div className="flex items-center gap-2">
@@ -226,6 +233,13 @@ export default function IntelligentSearchPage() {
                     <TooltipHelp content="在搜索结果中包含AI生成的业务洞察和分析建议" />
                   </Label>
                 </div>
+
+                <div className="flex items-center gap-2">
+                  <Switch id="rfm-high" checked={rfmHighValueOnly} onCheckedChange={setRfmHighValueOnly} />
+                  <Label htmlFor="rfm-high" className="flex items-center gap-1">
+                    仅看RFM高价值
+                  </Label>
+                </div>
               </div>
 
               {/* 搜索历史 */}
diff --git a/app/page.tsx b/app/page.tsx
index c3cdb64..ab131dd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,335 +1,351 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Search, Users, TrendingUp, Database, RefreshCw, BarChart3, Activity, Globe } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
-import { TooltipHelp, TooltipProvider } from "@/components/ui/tooltip-help"
-import {
-  Activity,
-  TrendingUp,
-  Database,
-  Search,
-  RefreshCw,
-  Zap,
-  BarChart3,
-  Target,
-  Globe,
-  UserCheck,
-  Clock,
-} from "lucide-react"
+import { useRouter } from "next/navigation"
+import { Toaster } from "@/components/ui/toaster"
+
+interface SystemStats {
+  userCount: number
+  keywordCount: number
+  versionCount: number
+  avgResponseTime: number
+  cacheSize: number
+  connected: boolean
+}
+
+interface GrowthData {
+  period: string
+  userGrowth: number
+  dataGrowth: number
+  activeUsers: number
+}
 
 export default function OverviewPage() {
+  const router = useRouter()
   const [searchQuery, setSearchQuery] = useState("")
+  const [systemStats, setSystemStats] = useState<SystemStats>({
+    userCount: 4000000000,
+    keywordCount: 150000,
+    versionCount: 25,
+    avgResponseTime: 120,
+    cacheSize: 0,
+    connected: true,
+  })
+  const [growthData, setGrowthData] = useState<GrowthData[]>([
+    { period: "今日", userGrowth: 2.3, dataGrowth: 1.8, activeUsers: 85600000 },
+    { period: "本周", userGrowth: 12.5, dataGrowth: 8.9, activeUsers: 520000000 },
+    { period: "本月", userGrowth: 45.2, dataGrowth: 32.1, activeUsers: 1200000000 },
+  ])
   const [isRefreshing, setIsRefreshing] = useState(false)
   const [lastUpdate, setLastUpdate] = useState(new Date())
 
-  // 核心数据状态
-  const [coreData, setCoreData] = useState({
-    totalUsers: 4000000000, // 40亿用户
-    activeUsers: 2800000000, // 28亿活跃用户
-    dataGrowthRate: 15.8, // 数据增长率
-    assetGrowthRate: 23.5, // 资产增长率
-    realTimeQueries: 156789, // 实时查询数
-    dataVolume: "12.8TB", // 数据量
-    systemHealth: 99.2, // 系统健康度
-    aiAnalysis: 8456, // AI分析次数
-  })
-
-  // 实时数据更新
+  // 自动刷新数据
   useEffect(() => {
     const interval = setInterval(() => {
-      setCoreData((prev) => ({
-        ...prev,
-        realTimeQueries: prev.realTimeQueries + Math.floor(Math.random() * 50) + 10,
-        activeUsers: prev.activeUsers + Math.floor(Math.random() * 1000) + 100,
-      }))
-      setLastUpdate(new Date())
-    }, 5000) // 每5秒更新一次
+      refreshData()
+    }, 30000) // 30秒刷新一次
 
     return () => clearInterval(interval)
   }, [])
 
-  // 手动刷新
-  const handleRefresh = async () => {
+  // 刷新数据
+  const refreshData = async () => {
     setIsRefreshing(true)
-    // 模拟数据刷新
-    setTimeout(() => {
-      setCoreData((prev) => ({
+    try {
+      // 模拟数据更新
+      setSystemStats((prev) => ({
         ...prev,
-        totalUsers: prev.totalUsers + Math.floor(Math.random() * 10000) + 1000,
-        dataGrowthRate: +(Math.random() * 5 + 12).toFixed(1),
-        assetGrowthRate: +(Math.random() * 8 + 18).toFixed(1),
+        userCount: prev.userCount + Math.floor(Math.random() * 1000),
+        avgResponseTime: Math.floor(Math.random() * 50) + 100,
       }))
+
+      setGrowthData((prev) =>
+        prev.map((item) => ({
+          ...item,
+          userGrowth: item.userGrowth + (Math.random() - 0.5) * 0.5,
+          dataGrowth: item.dataGrowth + (Math.random() - 0.5) * 0.3,
+          activeUsers: Math.floor(item.activeUsers * (1 + (Math.random() - 0.5) * 0.01)),
+        })),
+      )
+
       setLastUpdate(new Date())
+    } catch (error) {
+      console.error("刷新数据失败:", error)
+    } finally {
       setIsRefreshing(false)
-    }, 2000)
+    }
   }
 
-  // 搜索处理
+  // 处理搜索
   const handleSearch = () => {
     if (searchQuery.trim()) {
-      // 跳转到智能搜索页面
-      window.location.href = `/intelligent-search?q=${encodeURIComponent(searchQuery)}`
+      router.push(`/intelligent-search?q=${encodeURIComponent(searchQuery)}`)
     }
   }
 
-  const formatNumber = (num: number) => {
+  // 格式化数字显示
+  const formatNumber = (num: number): string => {
     if (num >= 1000000000) {
-      return (num / 1000000000).toFixed(1) + "B"
+      return `${(num / 1000000000).toFixed(1)}B`
     }
     if (num >= 1000000) {
-      return (num / 1000000).toFixed(1) + "M"
+      return `${(num / 1000000).toFixed(1)}M`
     }
     if (num >= 1000) {
-      return (num / 1000).toFixed(1) + "K"
+      return `${(num / 1000).toFixed(1)}K`
     }
     return num.toString()
   }
 
   return (
-    <TooltipProvider>
-      <div className="container mx-auto py-6 space-y-6">
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+      <div className="container mx-auto px-4 py-8">
         {/* 页面标题和搜索 */}
-        <div className="flex justify-between items-center">
-          <div>
-            <h1 className="text-3xl font-bold tracking-tight">概览</h1>
-            <p className="text-muted-foreground mt-1 flex items-center gap-2">
-              数据资产中台总览
-              <Badge variant="outline" className="text-xs">
-                <Clock className="h-3 w-3 mr-1" />
-                {lastUpdate.toLocaleTimeString()}
+        <div className="mb-8">
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <h1 className="text-4xl font-bold text-gray-900 mb-2">概览</h1>
+              <p className="text-gray-600">数据资产中台</p>
+            </div>
+            <div className="flex items-center gap-4">
+              <Badge variant="outline" className="text-green-600 border-green-200">
+                <Activity className="w-3 h-3 mr-1" />
+                系统正常
               </Badge>
-            </p>
-          </div>
-          <div className="flex items-center space-x-3">
-            <div className="relative flex-1 max-w-md">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-              <Input
-                type="text"
-                placeholder="搜索用户或流量关键词..."
-                className="pl-10 pr-20"
-                value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
-                onKeyPress={(e) => e.key === "Enter" && handleSearch()}
-              />
-              <Button size="sm" className="absolute right-1 top-1/2 transform -translate-y-1/2" onClick={handleSearch}>
-                搜索
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={refreshData}
+                disabled={isRefreshing}
+                className="flex items-center gap-2 bg-transparent"
+              >
+                <RefreshCw className={`w-4 h-4 ${isRefreshing ? "animate-spin" : ""}`} />
+                刷新
               </Button>
             </div>
-            <Button variant="outline" size="sm" onClick={handleRefresh} disabled={isRefreshing}>
-              <RefreshCw className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`} />
-              {isRefreshing ? "刷新中" : "刷新"}
+          </div>
+
+          {/* 搜索框 */}
+          <div className="relative max-w-2xl">
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+            <Input
+              placeholder="搜索用户或流量关键词..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              onKeyPress={(e) => e.key === "Enter" && handleSearch()}
+              className="pl-12 pr-24 h-14 text-lg border-2 border-gray-200 focus:border-blue-500 rounded-xl shadow-sm"
+            />
+            <Button
+              onClick={handleSearch}
+              className="absolute right-2 top-1/2 transform -translate-y-1/2 px-6 rounded-lg"
+            >
+              搜索
             </Button>
           </div>
         </div>
 
-        {/* 核心用户数据展示 - 40亿用户为中心 */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* 中心用户总数卡片 */}
-          <div className="lg:col-span-1">
-            <Card className="h-full border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-indigo-50">
-              <CardHeader className="text-center pb-2">
-                <CardTitle className="text-lg flex items-center justify-center gap-2">
-                  <Globe className="h-6 w-6 text-blue-600" />
-                  用户总数
-                  <TooltipHelp content="平台累计用户总数，包括所有注册和识别的用户" />
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="text-center">
-                <div className="text-5xl font-bold text-blue-600 mb-2">{formatNumber(coreData.totalUsers)}</div>
-                <div className="text-sm text-muted-foreground">全球用户覆盖</div>
-                <div className="mt-4 grid grid-cols-2 gap-2 text-xs">
-                  <div className="bg-white/50 rounded p-2">
-                    <div className="font-medium">活跃用户</div>
-                    <div className="text-green-600 font-bold">{formatNumber(coreData.activeUsers)}</div>
-                  </div>
-                  <div className="bg-white/50 rounded p-2">
-                    <div className="font-medium">活跃率</div>
-                    <div className="text-blue-600 font-bold">
-                      {((coreData.activeUsers / coreData.totalUsers) * 100).toFixed(1)}%
+        {/* 核心数据展示 - 40亿用户为中心 */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
+          {/* 用户总数 - 主要指标 */}
+          <Card className="lg:col-span-2 border-2 border-blue-200 bg-gradient-to-r from-blue-50 to-indigo-50">
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-3 text-2xl">
+                <div className="p-3 bg-blue-500 rounded-xl">
+                  <Users className="w-8 h-8 text-white" />
+                </div>
+                用户资产总量
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="text-center">
+                  <div className="text-6xl font-bold text-blue-600 mb-2">{formatNumber(systemStats.userCount)}</div>
+                  <div className="text-lg text-gray-600">总用户数</div>
+                </div>
+
+                <div className="grid grid-cols-3 gap-4 pt-4 border-t">
+                  {growthData.map((data, index) => (
+                    <div key={index} className="text-center">
+                      <div className="text-2xl font-bold text-green-600">+{data.userGrowth.toFixed(1)}%</div>
+                      <div className="text-sm text-gray-500">{data.period}增长</div>
+                      <div className="text-xs text-gray-400 mt-1">活跃: {formatNumber(data.activeUsers)}</div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* 系统状态 */}
+          <Card className="border-2 border-green-200 bg-gradient-to-r from-green-50 to-emerald-50">
+            <CardHeader className="pb-3">
+              <CardTitle className="flex items-center gap-3">
+                <div className="p-2 bg-green-500 rounded-lg">
+                  <Activity className="w-6 h-6 text-white" />
+                </div>
+                实时状态
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex justify-between items-center">
+                <span className="text-gray-600">响应时间</span>
+                <Badge variant="secondary">{systemStats.avgResponseTime}ms</Badge>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-gray-600">数据源</span>
+                <Badge variant="secondary">{systemStats.versionCount}个</Badge>
+              </div>
+              <div className="flex justify-between items-center">
+                <span className="text-gray-600">缓存大小</span>
+                <Badge variant="secondary">{systemStats.cacheSize}MB</Badge>
+              </div>
+              <div className="text-xs text-gray-500 pt-2 border-t">最后更新: {lastUpdate.toLocaleTimeString()}</div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* 数据增长趋势 */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+          <Card className="border-2 border-purple-200 bg-gradient-to-r from-purple-50 to-pink-50">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-3">
+                <div className="p-2 bg-purple-500 rounded-lg">
+                  <TrendingUp className="w-6 h-6 text-white" />
+                </div>
+                用户资产增长
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {growthData.map((data, index) => (
+                  <div key={index} className="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
+                    <div>
+                      <div className="font-semibold">{data.period}</div>
+                      <div className="text-sm text-gray-500">活跃用户: {formatNumber(data.activeUsers)}</div>
+                    </div>
+                    <div className="text-right">
+                      <div className="text-lg font-bold text-purple-600">+{data.userGrowth.toFixed(1)}%</div>
+                      <div className="text-xs text-gray-500">增长率</div>
                     </div>
                   </div>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          {/* 右侧数据指标 */}
-          <div className="lg:col-span-2 grid grid-cols-2 gap-4">
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium flex items-center gap-1">
-                  用户资产增长
-                  <TooltipHelp content="用户资产价值的增长率，反映用户价值提升情况" />
-                </CardTitle>
-                <TrendingUp className="h-4 w-4 text-green-500" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold text-green-600">+{coreData.assetGrowthRate}%</div>
-                <p className="text-xs text-muted-foreground">月度增长率</p>
-                <div className="mt-2 h-2 bg-gray-200 rounded-full">
-                  <div
-                    className="h-2 bg-green-500 rounded-full transition-all duration-500"
-                    style={{ width: `${Math.min(coreData.assetGrowthRate * 2, 100)}%` }}
-                  ></div>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium flex items-center gap-1">
-                  数据增长
-                  <TooltipHelp content="数据量的增长速度，包括用户行为数据、交易数据等" />
-                </CardTitle>
-                <Database className="h-4 w-4 text-blue-500" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold text-blue-600">+{coreData.dataGrowthRate}%</div>
-                <p className="text-xs text-muted-foreground">数据量: {coreData.dataVolume}</p>
-                <div className="mt-2 h-2 bg-gray-200 rounded-full">
-                  <div
-                    className="h-2 bg-blue-500 rounded-full transition-all duration-500"
-                    style={{ width: `${Math.min(coreData.dataGrowthRate * 3, 100)}%` }}
-                  ></div>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium flex items-center gap-1">
-                  实时查询
-                  <TooltipHelp content="当前实时查询次数，反映系统活跃度" />
-                </CardTitle>
-                <Zap className="h-4 w-4 text-yellow-500" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold text-yellow-600">{formatNumber(coreData.realTimeQueries)}</div>
-                <p className="text-xs text-muted-foreground">实时查询次数</p>
-                <div className="flex items-center mt-2">
-                  <div className="w-2 h-2 bg-yellow-500 rounded-full animate-pulse mr-2"></div>
-                  <span className="text-xs text-green-600">实时更新中</span>
-                </div>
-              </CardContent>
-            </Card>
-
-            <Card>
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium flex items-center gap-1">
-                  系统状态
-                  <TooltipHelp content="系统整体健康状态和AI分析能力" />
-                </CardTitle>
-                <Activity className="h-4 w-4 text-purple-500" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold text-purple-600">{coreData.systemHealth}%</div>
-                <p className="text-xs text-muted-foreground">AI分析: {formatNumber(coreData.aiAnalysis)} 次</p>
-                <div className="flex items-center mt-2">
-                  <Badge className="bg-green-100 text-green-800 text-xs">系统正常</Badge>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-
-        {/* 数据分布概览 */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">高价值用户</CardTitle>
-              <Target className="h-4 w-4 text-red-500" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">2.8M</div>
-              <p className="text-xs text-muted-foreground">占比 7.2%</p>
+                ))}
+              </div>
             </CardContent>
           </Card>
 
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">活跃用户</CardTitle>
-              <UserCheck className="h-4 w-4 text-green-500" />
+          <Card className="border-2 border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50">
+            <CardHeader>
+              <CardTitle className="flex items-center gap-3">
+                <div className="p-2 bg-orange-500 rounded-lg">
+                  <Database className="w-6 h-6 text-white" />
+                </div>
+                数据增长情况
+              </CardTitle>
             </CardHeader>
             <CardContent>
-              <div className="text-2xl font-bold">28.5M</div>
-              <p className="text-xs text-muted-foreground">日活跃用户</p>
-            </CardContent>
-          </Card>
+              <div className="space-y-4">
+                <div className="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
+                  <div>
+                    <div className="font-semibold">流量关键词</div>
+                    <div className="text-sm text-gray-500">总计 {formatNumber(systemStats.keywordCount)} 个</div>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-lg font-bold text-orange-600">+{growthData[0].dataGrowth.toFixed(1)}%</div>
+                    <div className="text-xs text-gray-500">今日增长</div>
+                  </div>
+                </div>
 
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">流量关键词</CardTitle>
-              <BarChart3 className="h-4 w-4 text-blue-500" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">156K</div>
-              <p className="text-xs text-muted-foreground">热门关键词数量</p>
-            </CardContent>
-          </Card>
+                <div className="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
+                  <div>
+                    <div className="font-semibold">数据处理量</div>
+                    <div className="text-sm text-gray-500">实时处理中</div>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-lg font-bold text-orange-600">
+                      {formatNumber(Math.floor(systemStats.userCount * 0.001))}
+                    </div>
+                    <div className="text-xs text-gray-500">条/秒</div>
+                  </div>
+                </div>
 
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">数据源</CardTitle>
-              <Database className="h-4 w-4 text-purple-500" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">28</div>
-              <p className="text-xs text-muted-foreground">已接入数据源</p>
+                <div className="flex items-center justify-between p-3 bg-white rounded-lg shadow-sm">
+                  <div>
+                    <div className="font-semibold">存储容量</div>
+                    <div className="text-sm text-gray-500">云端存储</div>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-lg font-bold text-orange-600">
+                      {Math.floor(systemStats.userCount / 1000000)}TB
+                    </div>
+                    <div className="text-xs text-gray-500">已使用</div>
+                  </div>
+                </div>
+              </div>
             </CardContent>
           </Card>
         </div>
 
-        {/* 实时活动流 */}
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Activity className="h-5 w-5" />
-              实时数据流
-              <TooltipHelp content="系统实时数据处理和分析活动" />
-            </CardTitle>
-            <CardDescription>实时监控数据处理和用户活动</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-                  <div>
-                    <div className="font-medium">用户数据同步</div>
-                    <div className="text-sm text-muted-foreground">新增 1,247 个用户记录</div>
-                  </div>
-                </div>
-                <Badge className="bg-green-100 text-green-800">实时</Badge>
+        {/* 快速访问入口 */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <Card
+            className="cursor-pointer hover:shadow-lg transition-all duration-200 border-2 border-blue-100 hover:border-blue-300"
+            onClick={() => router.push("/data-platform")}
+          >
+            <CardContent className="p-6 text-center">
+              <div className="p-3 bg-blue-100 rounded-full w-fit mx-auto mb-3">
+                <Database className="w-8 h-8 text-blue-600" />
               </div>
+              <h3 className="font-semibold text-lg mb-2">数据中台</h3>
+              <p className="text-sm text-gray-600">数据源管理与AI模型</p>
+            </CardContent>
+          </Card>
 
-              <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
-                  <div>
-                    <div className="font-medium">AI分析完成</div>
-                    <div className="text-sm text-muted-foreground">用户画像分析处理完成</div>
-                  </div>
-                </div>
-                <Badge className="bg-blue-100 text-blue-800">2分钟前</Badge>
+          <Card
+            className="cursor-pointer hover:shadow-lg transition-all duration-200 border-2 border-green-100 hover:border-green-300"
+            onClick={() => router.push("/user-portrait")}
+          >
+            <CardContent className="p-6 text-center">
+              <div className="p-3 bg-green-100 rounded-full w-fit mx-auto mb-3">
+                <Users className="w-8 h-8 text-green-600" />
               </div>
+              <h3 className="font-semibold text-lg mb-2">用户画像</h3>
+              <p className="text-sm text-gray-600">用户管理与标签体系</p>
+            </CardContent>
+          </Card>
 
-              <div className="flex items-center justify-between p-3 bg-purple-50 rounded-lg">
-                <div className="flex items-center gap-3">
-                  <div className="w-2 h-2 bg-purple-500 rounded-full animate-pulse"></div>
-                  <div>
-                    <div className="font-medium">流量关键词更新</div>
-                    <div className="text-sm text-muted-foreground">发现 89 个新热门关键词</div>
-                  </div>
-                </div>
-                <Badge className="bg-purple-100 text-purple-800">5分钟前</Badge>
+          <Card
+            className="cursor-pointer hover:shadow-lg transition-all duration-200 border-2 border-purple-100 hover:border-purple-300"
+            onClick={() => router.push("/ai-assistant")}
+          >
+            <CardContent className="p-6 text-center">
+              <div className="p-3 bg-purple-100 rounded-full w-fit mx-auto mb-3">
+                <BarChart3 className="w-8 h-8 text-purple-600" />
               </div>
-            </div>
-          </CardContent>
-        </Card>
+              <h3 className="font-semibold text-lg mb-2">AI智能助手</h3>
+              <p className="text-sm text-gray-600">数据分析与报告生成</p>
+            </CardContent>
+          </Card>
+
+          <Card
+            className="cursor-pointer hover:shadow-lg transition-all duration-200 border-2 border-orange-100 hover:border-orange-300"
+            onClick={() => router.push("/intelligent-search")}
+          >
+            <CardContent className="p-6 text-center">
+              <div className="p-3 bg-orange-100 rounded-full w-fit mx-auto mb-3">
+                <Globe className="w-8 h-8 text-orange-600" />
+              </div>
+              <h3 className="font-semibold text-lg mb-2">智能搜索</h3>
+              <p className="text-sm text-gray-600">全局搜索与AI分析</p>
+            </CardContent>
+          </Card>
+        </div>
       </div>
-    </TooltipProvider>
+      <Toaster />
+    </div>
   )
 }
diff --git a/app/rfm/page.tsx b/app/rfm/page.tsx
new file mode 100644
index 0000000..99f1d05
--- /dev/null
+++ b/app/rfm/page.tsx
@@ -0,0 +1,311 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Badge } from "@/components/ui/badge"
+import RfmBadge from "@/components/rfm/rfm-badge"
+import { Download, BarChart3, Sparkles, Upload, SlidersHorizontal } from 'lucide-react'
+
+type AnalyzeResult = {
+  user_id: string
+  rfm_score: { R: number; F: number; M: number; total: number; grade: "S" | "A" | "B" | "C" | "D" }
+  tags: {
+    emotion?: "积极" | "中性" | "消极"
+    behavior?: string[]
+    intent?: "弱意图" | "中等意图" | "强意图"
+    lifecycle?: "新用户" | "活跃用户" | "沉睡用户" | "流失风险"
+    value?: "高" | "中" | "低"
+  }
+  created_at: string
+  updated_at: string
+}
+
+export default function RfmPage() {
+  const [form, setForm] = useState({
+    user_id: "wxid_demo_01",
+    last_active: new Date().toISOString(),
+    interactions: 12,
+    amount: 880,
+    chat_logs: "想了解一下价格;今天有活动吗",
+    source: "wechat",
+    useAI: false,
+  })
+  const [weights, setWeights] = useState<{ R: number; F: number; M: number }>({ R: 0.5, F: 0.3, M: 0.2 })
+  const [loading, setLoading] = useState(false)
+  const [result, setResult] = useState<AnalyzeResult | null>(null)
+  const [summary, setSummary] = useState<any>(null)
+
+  useEffect(() => {
+    ;(async () => {
+      const res = await fetch("/api/rfm/weights")
+      const data = await res.json()
+      if (data.success) setWeights(data.data)
+    })()
+  }, [])
+
+  const analyze = async () => {
+    setLoading(true)
+    try {
+      const res = await fetch("/api/rfm/analyze", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          ...form,
+          chat_logs: form.chat_logs.split(";").map((s) => s.trim()).filter(Boolean),
+        }),
+      })
+      const data = await res.json()
+      if (data.success) {
+        setResult(data.data[0])
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const loadSummary = async () => {
+    const res = await fetch("/api/rfm/group_summary")
+    const data = await res.json()
+    if (data.success) setSummary(data.data)
+  }
+
+  const exportCsv = () => {
+    window.open("/api/rfm/dump_csv", "_blank")
+  }
+
+  const onUploadCsv = async (file: File) => {
+    const text = await file.text()
+    const lines = text.split(/\r?\n/).filter(Boolean)
+    if (lines.length <= 1) return
+    const header = lines[0].split(",").map((s) => s.trim())
+    const payload = lines.slice(1).map((line) => {
+      const cols = line.split(",")
+      const row: any = {}
+      header.forEach((h, i) => (row[h] = cols[i]))
+      return {
+        user_id: row.user_id,
+        last_active: row.last_active,
+        interactions: Number(row.interactions || 0),
+        amount: Number(row.amount || 0),
+        chat_logs: (row.chat_logs || "").split(";").filter(Boolean),
+        source: row.source || "import",
+      }
+    })
+    await fetch("/api/rfm/analyze", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    })
+    await loadSummary()
+  }
+
+  const saveWeights = async () => {
+    // normalize via API
+    const res = await fetch("/api/rfm/weights", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        R: Math.max(0.0001, weights.R),
+        F: Math.max(0.0001, weights.F),
+        M: Math.max(0.0001, weights.M),
+      }),
+    })
+    const data = await res.json()
+    if (data.success) setWeights(data.data)
+  }
+
+  return (
+    <div className="container mx-auto px-4 py-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold">RFM 智能标签引擎</h1>
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={loadSummary}>
+            <BarChart3 className="w-4 h-4 mr-2" />
+            分布汇总
+          </Button>
+          <Button variant="outline" onClick={exportCsv}>
+            <Download className="w-4 h-4 mr-2" />
+            导出CSV
+          </Button>
+        </div>
+      </div>
+
+      {/* 权重配置 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <SlidersHorizontal className="w-4 h-4" />
+            权重配置（R/F/M）
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="grid grid-cols-3 gap-3">
+          {(["R", "F", "M"] as const).map((k) => (
+            <div key={k} className="space-y-2">
+              <Label htmlFor={`w-${k}`}>{k}</Label>
+              <Input
+                id={`w-${k}`}
+                type="number"
+                min={0}
+                step="0.05"
+                value={weights[k]}
+                onChange={(e) => setWeights((p) => ({ ...p, [k]: Number(e.target.value) }))}
+              />
+            </div>
+          ))}
+          <div className="col-span-3 flex justify-end">
+            <Button onClick={saveWeights}>保存权重</Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 在线分析 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Sparkles className="w-4 h-4" />
+            在线分析
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="user_id">用户ID</Label>
+              <Input
+                id="user_id"
+                value={form.user_id}
+                onChange={(e) => setForm((p) => ({ ...p, user_id: e.target.value }))}
+                placeholder="wxid_xxx 或手机号散列等"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="last_active">最后活跃时间</Label>
+              <Input
+                id="last_active"
+                type="datetime-local"
+                value={new Date(form.last_active).toISOString().slice(0, 16)}
+                onChange={(e) => setForm((p) => ({ ...p, last_active: new Date(e.target.value).toISOString() }))}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="interactions">行为频次</Label>
+              <Input
+                id="interactions"
+                type="number"
+                value={form.interactions}
+                onChange={(e) => setForm((p) => ({ ...p, interactions: Number(e.target.value) }))}
+                min={0}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="amount">累计金额</Label>
+              <Input
+                id="amount"
+                type="number"
+                value={form.amount}
+                onChange={(e) => setForm((p) => ({ ...p, amount: Number(e.target.value) }))}
+                min={0}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="chat_logs">聊天片段（分号分隔）</Label>
+            <Textarea
+              id="chat_logs"
+              rows={3}
+              value={form.chat_logs}
+              onChange={(e) => setForm((p) => ({ ...p, chat_logs: e.target.value }))}
+              placeholder="想了解一下价格; 今天有活动吗"
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="source">来源渠道</Label>
+            <Input
+              id="source"
+              value={form.source}
+              onChange={(e) => setForm((p) => ({ ...p, source: e.target.value }))}
+              placeholder="wechat / douyin / xhs / form"
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <input
+                id="useAI"
+                type="checkbox"
+                checked={form.useAI}
+                onChange={(e) => setForm((p) => ({ ...p, useAI: e.target.checked }))}
+              />
+              <Label htmlFor="useAI">启用AI标签增强（自动识别情绪/意图/行为）</Label>
+            </div>
+            <Button onClick={analyze} disabled={loading}>
+              {loading ? "分析中..." : "开始分析并入库"}
+            </Button>
+          </div>
+
+          {result && (
+            <div className="mt-4 p-4 border rounded-lg space-y-3">
+              <div className="flex items-center gap-2">
+                <RfmBadge grade={result.rfm_score.grade} />
+                <Badge variant="secondary">R: {result.rfm_score.R}</Badge>
+                <Badge variant="secondary">F: {result.rfm_score.F}</Badge>
+                <Badge variant="secondary">M: {result.rfm_score.M}</Badge>
+                <Badge variant="outline">Total: {result.rfm_score.total}</Badge>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {result.tags.value && <Badge className="bg-indigo-100 text-indigo-800">价值：{result.tags.value}</Badge>}
+                {result.tags.intent && <Badge className="bg-purple-100 text-purple-800">意图：{result.tags.intent}</Badge>}
+                {result.tags.emotion && <Badge className="bg-pink-100 text-pink-800">情绪：{result.tags.emotion}</Badge>}
+                {result.tags.lifecycle && (
+                  <Badge className="bg-amber-100 text-amber-800">生命周期：{result.tags.lifecycle}</Badge>
+                )}
+                {(result.tags.behavior ?? []).map((b, i) => (
+                  <Badge key={i} variant="secondary">
+                    {b}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {summary && (
+            <div className="mt-4 p-4 border rounded-lg space-y-2">
+              <div className="font-medium">分布汇总</div>
+              <div className="text-sm">等级: {JSON.stringify(summary.gradeCount)}</div>
+              <div className="text-sm">价值: {JSON.stringify(summary.valueCount)}</div>
+              <div className="text-sm">生命周期: {JSON.stringify(summary.lifecycleCount)}</div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 批量导入 */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Upload className="w-4 h-4" />
+            批量导入 CSV 并分析
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <p className="text-sm text-muted-foreground">
+            CSV 列要求：user_id,last_active,interactions,amount,chat_logs,source（chat_logs 用分号分隔）
+          </p>
+          <Input
+            type="file"
+            accept=".csv,text/csv"
+            onChange={(e) => {
+              const f = e.target.files?.[0]
+              if (f) onUploadCsv(f)
+            }}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/user-portrait/[id]/page.tsx b/app/user-portrait/[id]/page.tsx
index 9ef075e..6eb1631 100644
--- a/app/user-portrait/[id]/page.tsx
+++ b/app/user-portrait/[id]/page.tsx
@@ -1,858 +1,96 @@
 "use client"
 
-import type React from "react"
+import { useEffect, useState } from "react"
+import { useParams } from "next/navigation"
+import MobileHeader from "@/app/components/MobileHeader"
+import BottomNav from "@/app/components/BottomNav"
+import Section from "@/components/user-portrait/mobile/section"
+import ProfileHeader from "@/components/user-portrait/mobile/profile-header"
+import MetricsRFM from "@/components/user-portrait/mobile/metrics-rfm"
+import InteractionsList from "@/components/user-portrait/mobile/interactions-list"
+import PurchaseHistory from "@/components/user-portrait/mobile/purchase-history"
+import WechatAccounts from "@/components/user-portrait/mobile/wechat-accounts"
 
-import { useState, useEffect } from "react"
-import { useRouter } from "next/navigation"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { Badge } from "@/components/ui/badge"
-import { Avatar } from "@/components/ui/avatar"
-import { ArrowLeft, Edit, User, Activity, DollarSign, Clock, Phone, MessageCircle } from "lucide-react"
-import { Progress } from "@/components/ui/progress"
-
-// 模拟用户数据 - 详细版
-const getUserDetail = (id: string) => {
-  const baseUsers = [
-    {
-      id: "1",
-      name: "张三",
-      avatar: "/placeholder.svg?height=80&width=80",
-      company: "科技有限公司",
-      position: "技术总监",
-      email: "zhangsan@example.com",
-      phone: "13800138001",
-      tags: ["高价值", "活跃用户", "技术决策者", "iPhone用户", "iOS 16.5", "MacBook Pro用户"],
-      recency: 1, // 天数
-      frequency: 24, // 次数/月
-      monetary: 12500, // 元
-      rfmScore: 93, // 0-100
-      lastActivity: "2023-03-22T08:30:00",
-      interactions: [
-        { type: "咨询", count: 8, lastDate: "2023-03-22" },
-        { type: "产品演示", count: 3, lastDate: "2023-03-15" },
-        { type: "技术支持", count: 12, lastDate: "2023-03-20" },
-        { type: "培训", count: 1, lastDate: "2023-02-10" },
-      ],
-      purchaseHistory: [
-        { product: "企业版SaaS", date: "2023-01-15", amount: 8500 },
-        { product: "技术支持服务", date: "2023-02-20", amount: 3000 },
-        { product: "定制开发", date: "2023-03-10", amount: 1000 },
-      ],
-      wechatAccounts: [
-        { id: "wx1", name: "张三的微信", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号", "活跃"] },
-        { id: "wx2", name: "张三工作号", avatar: "/placeholder.svg?height=40&width=40", tags: ["工作账号"] },
-      ],
-    },
-    {
-      id: "2",
-      name: "李四",
-      avatar: "/placeholder.svg?height=80&width=80",
-      company: "服务科技公司",
-      position: "市场总监",
-      email: "lisi@example.com",
-      phone: "13900139001",
-      tags: ["中价值", "潜在客户", "市场负责人", "Android用户", "MIUI 14", "小米13用户"],
-      recency: 5, // 天数
-      frequency: 12, // 次数/月
-      monetary: 6800, // 元
-      rfmScore: 75, // 0-100
-      lastActivity: "2023-03-18T10:15:00",
-      interactions: [
-        { type: "咨询", count: 5, lastDate: "2023-03-18" },
-        { type: "产品演示", count: 2, lastDate: "2023-03-10" },
-        { type: "市场合作", count: 4, lastDate: "2023-03-05" },
-        { type: "方案讨论", count: 1, lastDate: "2023-02-25" },
-      ],
-      purchaseHistory: [
-        { product: "标准版SaaS", date: "2023-02-10", amount: 4800 },
-        { product: "增值服务", date: "2023-03-15", amount: 2000 },
-      ],
-      wechatAccounts: [
-        { id: "wx3", name: "李四的微信", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号"] },
-      ],
-    },
-    {
-      id: "3",
-      name: "王五",
-      avatar: "/placeholder.svg?height=80&width=80",
-      company: "小型创业公司",
-      position: "技术主管",
-      email: "wangwu@example.com",
-      phone: "13700137001",
-      tags: ["低价值", "非活跃", "技术团队", "iPhone用户", "iOS 15.6", "iPad用户"],
-      recency: 15, // 天数
-      frequency: 5, // 次数/月
-      monetary: 2200, // 元
-      rfmScore: 48, // 0-100
-      lastActivity: "2023-03-08T14:20:00",
-      interactions: [
-        { type: "咨询", count: 3, lastDate: "2023-03-08" },
-        { type: "技术支持", count: 2, lastDate: "2023-02-20" },
-      ],
-      purchaseHistory: [{ product: "基础版SaaS", date: "2023-01-05", amount: 2200 }],
-      wechatAccounts: [
-        { id: "wx4", name: "王五的微信", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号", "不活跃"] },
-      ],
-    },
-    {
-      id: "4",
-      name: "赵六",
-      avatar: "/placeholder.svg?height=80&width=80",
-      company: "金融科技公司",
-      position: "财务总监",
-      email: "zhaoliu@example.com",
-      phone: "13600136001",
-      tags: ["高价值", "活跃用户", "财务决策者", "Android用户", "EMUI 12", "华为P50用户"],
-      recency: 2, // 天数
-      frequency: 18, // 次数/月
-      monetary: 9600, // 元
-      rfmScore: 85, // 0-100
-      lastActivity: "2023-03-21T09:45:00",
-      interactions: [
-        { type: "咨询", count: 6, lastDate: "2023-03-21" },
-        { type: "产品演示", count: 2, lastDate: "2023-03-15" },
-        { type: "方案讨论", count: 8, lastDate: "2023-03-18" },
-        { type: "培训", count: 2, lastDate: "2023-02-28" },
-      ],
-      purchaseHistory: [
-        { product: "企业版SaaS", date: "2023-01-20", amount: 7500 },
-        { product: "数据分析模块", date: "2023-02-15", amount: 2100 },
-      ],
-      wechatAccounts: [
-        { id: "wx5", name: "赵六的微信", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号", "活跃"] },
-        { id: "wx6", name: "赵六小号", avatar: "/placeholder.svg?height=40&width=40", tags: ["辅助账号"] },
-      ],
-    },
-    {
-      id: "5",
-      name: "钱七",
-      avatar: "/placeholder.svg?height=80&width=80",
-      company: "软件服务公司",
-      position: "产品经理",
-      email: "qianqi@example.com",
-      phone: "13500135001",
-      tags: ["中价值", "一般活跃", "产品经理", "iPhone用户", "iOS 16.2", "MacBook Air用户"],
-      recency: 7, // 天数
-      frequency: 10, // 次数/月
-      monetary: 5400, // 元
-      rfmScore: 68, // 0-100
-      lastActivity: "2023-03-16T11:30:00",
-      interactions: [
-        { type: "咨询", count: 4, lastDate: "2023-03-16" },
-        { type: "产品演示", count: 1, lastDate: "2023-03-05" },
-        { type: "方案讨论", count: 3, lastDate: "2023-03-10" },
-        { type: "需求沟通", count: 2, lastDate: "2023-02-25" },
-      ],
-      purchaseHistory: [
-        { product: "标准版SaaS", date: "2023-02-05", amount: 4800 },
-        { product: "增值服务", date: "2023-03-01", amount: 600 },
-      ],
-      wechatAccounts: [
-        { id: "wx7", name: "钱七的微信", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号"] },
-      ],
-    },
-  ]
-
-  return baseUsers.find((user) => user.id === id) || baseUsers[0]
+type Detail = {
+  id: string
+  name: string
+  avatar?: string
+  email: string
+  phone: string
+  tags: string[]
+  recency: number
+  frequency: number
+  monetary: number
+  rfmScore: number
+  lastActivity: string
+  interactions: { id: string; type: string; time: string; note?: string }[]
+  purchaseHistory: { id: string; amount: number; time: string; item: string }[]
+  wechatAccounts: { id: string; nickname: string; avatar?: string }[]
+  status: "活跃" | "沉睡" | "流失风险"
 }
 
-// RFM评分卡组件
-function RFMScoreCard({
-  title,
-  value,
-  maxValue,
-  icon,
-  description,
-  color,
-}: {
-  title: string
-  value: number
-  maxValue: number
-  icon: React.ReactNode
-  description: string
-  color: string
-}) {
-  const percentage = (value / maxValue) * 100
-
-  return (
-    <Card>
-      <CardHeader className="pb-2">
-        <div className="flex justify-between items-center">
-          <CardTitle className="text-sm font-medium">{title}</CardTitle>
-          {icon}
-        </div>
-        <CardDescription>{description}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="text-2xl font-bold">
-          {value}
-          {maxValue === 1 ? "" : ""}
-        </div>
-        <Progress value={percentage} className={`h-2 mt-2 ${color}`} />
-      </CardContent>
-    </Card>
-  )
-}
-
-export default function UserPortraitDetail({ params }: { params: { id: string } }) {
-  const router = useRouter()
-  const [user, setUser] = useState<any>(null)
-  const [activeTab, setActiveTab] = useState("profile")
+export default function UserDetailPage() {
+  const params = useParams<{ id: string }>()
+  const [data, setData] = useState<Detail | null>(null)
+  const [loading, setLoading] = useState(true)
 
   useEffect(() => {
-    // 获取用户详情
-    const userDetail = getUserDetail(params.id)
-    setUser(userDetail)
-  }, [params.id])
-
-  if (!user) {
-    return <div className="container mx-auto py-8">加载中...</div>
-  }
-
-  // 获取RFM评分对应的背景颜色类
-  const getRfmScoreBgClass = (score: number) => {
-    if (score >= 81) return "bg-green-100"
-    if (score >= 51) return "bg-yellow-100"
-    return "bg-red-100"
-  }
-
-  // 获取RFM评分对应的文本颜色类
-  const getRfmScoreTextClass = (score: number) => {
-    if (score >= 81) return "text-green-800"
-    if (score >= 51) return "text-yellow-800"
-    return "text-red-800"
-  }
-
-  // 格式化日期
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString)
-    return date.toLocaleDateString("zh-CN", { year: "numeric", month: "2-digit", day: "2-digit" })
-  }
+    if (!params?.id) return
+    setLoading(true)
+    fetch(`/api/users?id=${params.id}`)
+      .then((r) => r.json())
+      .then((res) => setData(res?.data ?? null))
+      .finally(() => setLoading(false))
+  }, [params?.id])
 
   return (
-    <div className="container mx-auto py-6 space-y-6">
-      <div className="flex items-center gap-2">
-        <Button variant="ghost" size="icon" onClick={() => router.back()}>
-          <ArrowLeft className="h-4 w-4" />
-        </Button>
-        <h1 className="text-2xl font-bold tracking-tight">用户画像详情</h1>
-      </div>
-
-      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-        <TabsList className="grid w-full grid-cols-3">
-          <TabsTrigger value="profile">基本信息</TabsTrigger>
-          <TabsTrigger value="rfm">RFM估值分析</TabsTrigger>
-          <TabsTrigger value="wechat">微信账号</TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="profile" className="space-y-6 pt-4">
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <div className="lg:col-span-1 space-y-6">
-              <Card>
-                <CardHeader className="text-center">
-                  <div className="flex justify-center mb-2">
-                    <Avatar className="h-24 w-24">
-                      <img src={user.avatar || "/placeholder.svg"} alt={user.name} />
-                    </Avatar>
-                  </div>
-                  <CardTitle>{user.name}</CardTitle>
-                  <CardDescription>
-                    {user.company} · {user.position}
-                  </CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="flex items-center gap-2">
-                    <User className="h-4 w-4 text-muted-foreground" />
-                    <span className="text-sm">{user.email}</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Phone className="h-4 w-4 text-muted-foreground" />
-                    <span className="text-sm">{user.phone}</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <Activity className="h-4 w-4 text-muted-foreground" />
-                    <span className="text-sm">最近活动：{formatDate(user.lastActivity)}</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <MessageCircle className="h-4 w-4 text-muted-foreground" />
-                    <span className="text-sm">关联微信：{user.wechatAccounts.length}个</span>
-                  </div>
-                </CardContent>
-                <CardFooter>
-                  <Button className="w-full">
-                    <Edit className="mr-2 h-4 w-4" />
-                    编辑用户信息
-                  </Button>
-                </CardFooter>
-              </Card>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>用户标签</CardTitle>
-                  <CardDescription>用户的特征标签</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="flex flex-wrap gap-2">
-                    {user.tags.map((tag: string, index: number) => (
-                      <Badge key={index} variant="secondary">
-                        {tag}
-                      </Badge>
-                    ))}
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>互动记录</CardTitle>
-                  <CardDescription>用户最近的互动情况</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  {user.interactions.map((interaction: any, index: number) => (
-                    <div key={index} className="flex justify-between items-center pb-2 border-b">
-                      <div>
-                        <p className="font-medium">{interaction.type}</p>
-                        <p className="text-xs text-muted-foreground">最近：{interaction.lastDate}</p>
-                      </div>
-                      <Badge variant="outline">{interaction.count}次</Badge>
-                    </div>
-                  ))}
-                </CardContent>
-              </Card>
-            </div>
-
-            <div className="lg:col-span-2 space-y-6">
-              <Card>
-                <CardHeader>
-                  <CardTitle>购买历史</CardTitle>
-                  <CardDescription>用户的产品购买记录</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <div className="rounded-md border">
-                    <table className="min-w-full divide-y divide-gray-200">
-                      <thead>
-                        <tr>
-                          <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            产品
-                          </th>
-                          <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            日期
-                          </th>
-                          <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            金额
-                          </th>
-                        </tr>
-                      </thead>
-                      <tbody className="bg-white divide-y divide-gray-200">
-                        {user.purchaseHistory.map((purchase: any, index: number) => (
-                          <tr key={index}>
-                            <td className="px-4 py-4 whitespace-nowrap">{purchase.product}</td>
-                            <td className="px-4 py-4 whitespace-nowrap">{purchase.date}</td>
-                            <td className="px-4 py-4 whitespace-nowrap text-right">
-                              ¥{purchase.amount.toLocaleString()}
-                            </td>
-                          </tr>
-                        ))}
-                        <tr className="bg-gray-50">
-                          <td className="px-4 py-4 whitespace-nowrap font-medium" colSpan={2}>
-                            总计
-                          </td>
-                          <td className="px-4 py-4 whitespace-nowrap text-right font-bold">
-                            ¥
-                            {user.purchaseHistory
-                              .reduce((total: number, purchase: any) => total + purchase.amount, 0)
-                              .toLocaleString()}
-                          </td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card>
-                <CardHeader>
-                  <CardTitle>用户行为分析</CardTitle>
-                  <CardDescription>基于用户行为数据的分析</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <div className="space-y-2">
-                    <h3 className="text-sm font-medium">行为特征</h3>
-                    <div className="p-3 rounded-md bg-blue-50">
-                      <p className="text-sm text-blue-800">
-                        {user.rfmScore >= 81
-                          ? "该用户是高度活跃的价值客户，对产品功能有深入了解，经常与团队互动并提供反馈。"
-                          : user.rfmScore >= 51
-                            ? "该用户展现出持续的参与意愿，使用核心功能，但尚未充分利用产品的全部价值。"
-                            : "该用户参与度较低，使用频率不高，需要主动引导以提升产品使用价值。"}
-                      </p>
-                    </div>
-                  </div>
-
-                  <div className="space-y-2">
-                    <h3 className="text-sm font-medium">建议行动</h3>
-                    <div className="grid grid-cols-2 gap-2">
-                      <div className="border rounded-md p-3">
-                        <p className="text-sm font-medium">短期行动</p>
-                        <ul className="mt-2 space-y-1">
-                          {user.rfmScore >= 81 ? (
-                            <>
-                              <li className="text-xs">• 提供专属客户成功经理</li>
-                              <li className="text-xs">• 邀请参与产品路线图讨论</li>
-                              <li className="text-xs">• 考虑提供战略合作机会</li>
-                            </>
-                          ) : user.rfmScore >= 51 ? (
-                            <>
-                              <li className="text-xs">• 安排深度产品培训</li>
-                              <li className="text-xs">• 定期分享使用最佳实践</li>
-                              <li className="text-xs">• 提供个性化的功能推荐</li>
-                            </>
-                          ) : (
-                            <>
-                              <li className="text-xs">• 提供入门指南和基础培训</li>
-                              <li className="text-xs">• 发送使用提醒和简单教程</li>
-                              <li className="text-xs">• 收集反馈了解痛点</li>
-                            </>
-                          )}
-                        </ul>
-                      </div>
-                      <div className="border rounded-md p-3">
-                        <p className="text-sm font-medium">长期策略</p>
-                        <ul className="mt-2 space-y-1">
-                          {user.rfmScore >= 81 ? (
-                            <>
-                              <li className="text-xs">• 建立战略合作伙伴关系</li>
-                              <li className="text-xs">• 开发定制化解决方案</li>
-                              <li className="text-xs">• 邀请参与早期测试计划</li>
-                            </>
-                          ) : user.rfmScore >= 51 ? (
-                            <>
-                              <li className="text-xs">• 发展为高价值客户</li>
-                              <li className="text-xs">• 提供升级路径和方案</li>
-                              <li className="text-xs">• 增加产品使用深度</li>
-                            </>
-                          ) : (
-                            <>
-                              <li className="text-xs">• 培养参与度提升频率</li>
-                              <li className="text-xs">• 提供简化版功能体验</li>
-                              <li className="text-xs">• 定期回访了解需求变化</li>
-                            </>
-                          )}
-                        </ul>
-                      </div>
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            </div>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-purple-50">
+      <MobileHeader onMenuToggle={() => {}} title="用户详情" />
+      <main className="container mx-auto px-4 pb-24 space-y-4">
+        {loading ? (
+          <div className="rounded-xl bg-white/60 backdrop-blur p-6 text-sm text-muted-foreground">
+            加载中…
           </div>
-        </TabsContent>
+        ) : data ? (
+          <div className="space-y-4">
+            <section className="rounded-2xl bg-white/60 backdrop-blur-md p-4 shadow-sm border">
+              <ProfileHeader
+                name={data.name}
+                avatar={data.avatar}
+                email={data.email}
+                phone={data.phone}
+                tags={data.tags}
+              />
+            </section>
 
-        <TabsContent value="rfm" className="space-y-6 pt-4">
-          <Card>
-            <CardHeader>
-              <div className="flex justify-between items-center">
-                <div>
-                  <CardTitle>RFM估值模型分析</CardTitle>
-                  <CardDescription>综合用户价值评估</CardDescription>
-                </div>
-                <div className={`px-4 py-2 rounded-full ${getRfmScoreBgClass(user.rfmScore)}`}>
-                  <span className={`text-lg font-bold ${getRfmScoreTextClass(user.rfmScore)}`}>{user.rfmScore}</span>
-                  <span className={`text-sm ml-1 ${getRfmScoreTextClass(user.rfmScore)}`}>/ 100</span>
-                </div>
-              </div>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <RFMScoreCard
-                  title="R - 最近度"
-                  value={user.recency}
-                  maxValue={30}
-                  icon={<Clock className="h-4 w-4 text-blue-500" />}
-                  description="最近一次互动的天数"
-                  color="bg-blue-500"
-                />
-                <RFMScoreCard
-                  title="F - 频率"
-                  value={user.frequency}
-                  maxValue={30}
-                  icon={<Activity className="h-4 w-4 text-purple-500" />}
-                  description="每月互动次数"
-                  color="bg-purple-500"
-                />
-                <RFMScoreCard
-                  title="M - 金额"
-                  value={user.monetary}
-                  maxValue={15000}
-                  icon={<DollarSign className="h-4 w-4 text-green-500" />}
-                  description="消费金额(元)"
-                  color="bg-green-500"
-                />
-              </div>
+            <Section title="RFM 指标">
+              <MetricsRFM
+                recency={data.recency}
+                frequency={data.frequency}
+                monetary={data.monetary}
+                rfmScore={data.rfmScore}
+              />
+            </Section>
 
-              <div className="mt-6 space-y-4">
-                <h3 className="text-lg font-medium">RFM分析解读</h3>
+            <Section title="互动记录">
+              <InteractionsList items={data.interactions} />
+            </Section>
 
-                <div className="space-y-4">
-                  <div className="p-4 border rounded-md">
-                    <h4 className="font-medium mb-2">R值分析 - 最近度</h4>
-                    <p className="text-sm text-gray-600">
-                      {user.recency <= 3
-                        ? "用户近期有活动，保持高度活跃。"
-                        : user.recency <= 10
-                          ? "用户最近活动频率适中，需要保持关注。"
-                          : "用户较长时间未活动，存在流失风险。"}
-                    </p>
-                    <div className="mt-2">
-                      <div className="flex justify-between text-xs text-gray-500 mb-1">
-                        <span>高风险</span>
-                        <span>低风险</span>
-                      </div>
-                      <div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden">
-                        <div
-                          className="h-full bg-blue-500 rounded-full"
-                          style={{ width: `${100 - (user.recency / 30) * 100}%` }}
-                        ></div>
-                      </div>
-                    </div>
-                  </div>
+            <Section title="购买历史">
+              <PurchaseHistory items={data.purchaseHistory} />
+            </Section>
 
-                  <div className="p-4 border rounded-md">
-                    <h4 className="font-medium mb-2">F值分析 - 频率</h4>
-                    <p className="text-sm text-gray-600">
-                      {user.frequency >= 20
-                        ? "用户互动频率非常高，是核心用户。"
-                        : user.frequency >= 10
-                          ? "用户互动频率良好，有较强的参与度。"
-                          : "用户互动频率较低，需要提升参与度。"}
-                    </p>
-                    <div className="mt-2">
-                      <div className="flex justify-between text-xs text-gray-500 mb-1">
-                        <span>低频率</span>
-                        <span>高频率</span>
-                      </div>
-                      <div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden">
-                        <div
-                          className="h-full bg-purple-500 rounded-full"
-                          style={{ width: `${(user.frequency / 30) * 100}%` }}
-                        ></div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="p-4 border rounded-md">
-                    <h4 className="font-medium mb-2">M值分析 - 金额</h4>
-                    <p className="text-sm text-gray-600">
-                      {user.monetary >= 10000
-                        ? "用户消费金额高，是高价值客户。"
-                        : user.monetary >= 5000
-                          ? "用户消费金额中等，有提升空间。"
-                          : "用户消费金额较低，需要刺激消费。"}
-                    </p>
-                    <div className="mt-2">
-                      <div className="flex justify-between text-xs text-gray-500 mb-1">
-                        <span>低消费</span>
-                        <span>高消费</span>
-                      </div>
-                      <div className="h-2 w-full bg-gray-200 rounded-full overflow-hidden">
-                        <div
-                          className="h-full bg-green-500 rounded-full"
-                          style={{ width: `${(user.monetary / 15000) * 100}%` }}
-                        ></div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="p-4 border rounded-md bg-gray-50 mt-4">
-                  <h4 className="font-medium mb-2">用户分群结果</h4>
-                  <div className="flex items-center gap-2">
-                    <Badge className={getRfmScoreBgClass(user.rfmScore)}>
-                      <span className={getRfmScoreTextClass(user.rfmScore)}>
-                        {user.rfmScore >= 81 ? "高价值用户" : user.rfmScore >= 51 ? "中价值用户" : "低价值用户"}
-                      </span>
-                    </Badge>
-                    <span className="text-sm text-gray-600">
-                      {user.rfmScore >= 81
-                        ? "需要重点维护的核心客户"
-                        : user.rfmScore >= 51
-                          ? "有发展潜力的成长客户"
-                          : "需要激活的沉睡客户"}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>价值提升策略</CardTitle>
-              <CardDescription>基于RFM模型的用户价值提升建议</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <div className="p-4 border rounded-md">
-                    <h4 className="font-medium mb-2">营销策略建议</h4>
-                    <ul className="space-y-2">
-                      {user.rfmScore >= 81 ? (
-                        <>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-green-500 mt-0.5">•</span>
-                            <span>提供专属VIP服务和优先支持</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-green-500 mt-0.5">•</span>
-                            <span>邀请参与新产品测试和反馈</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-green-500 mt-0.5">•</span>
-                            <span>提供专属定制化解决方案</span>
-                          </li>
-                        </>
-                      ) : user.rfmScore >= 51 ? (
-                        <>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-yellow-500 mt-0.5">•</span>
-                            <span>提供产品升级优惠和增值服务</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-yellow-500 mt-0.5">•</span>
-                            <span>定期分享使用技巧和最佳实践</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-yellow-500 mt-0.5">•</span>
-                            <span>提供个性化的功能推荐</span>
-                          </li>
-                        </>
-                      ) : (
-                        <>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-red-500 mt-0.5">•</span>
-                            <span>提供限时优惠和特别促销</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-red-500 mt-0.5">•</span>
-                            <span>发送使用提醒和简单教程</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-red-500 mt-0.5">•</span>
-                            <span>提供基础培训和入门指导</span>
-                          </li>
-                        </>
-                      )}
-                    </ul>
-                  </div>
-
-                  <div className="p-4 border rounded-md">
-                    <h4 className="font-medium mb-2">价值提升路径</h4>
-                    <ul className="space-y-2">
-                      {user.rfmScore >= 81 ? (
-                        <>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-green-500 mt-0.5">•</span>
-                            <span>发展战略合作伙伴关系</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-green-500 mt-0.5">•</span>
-                            <span>探索更多业务合作机会</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-green-500 mt-0.5">•</span>
-                            <span>建立长期稳定的合作模式</span>
-                          </li>
-                        </>
-                      ) : user.rfmScore >= 51 ? (
-                        <>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-yellow-500 mt-0.5">•</span>
-                            <span>提高产品使用深度和广度</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-yellow-500 mt-0.5">•</span>
-                            <span>增加用户互动频率和质量</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-yellow-500 mt-0.5">•</span>
-                            <span>引导用户尝试高级功能</span>
-                          </li>
-                        </>
-                      ) : (
-                        <>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-red-500 mt-0.5">•</span>
-                            <span>重新激活用户兴趣和参与度</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-red-500 mt-0.5">•</span>
-                            <span>提供简化版功能体验</span>
-                          </li>
-                          <li className="text-sm flex items-start gap-2">
-                            <span className="text-red-500 mt-0.5">•</span>
-                            <span>了解用户需求变化和痛点</span>
-                          </li>
-                        </>
-                      )}
-                    </ul>
-                  </div>
-                </div>
-
-                <div className="p-4 border rounded-md mt-4">
-                  <h4 className="font-medium mb-2">预期效果</h4>
-                  <p className="text-sm text-gray-600">
-                    {user.rfmScore >= 81
-                      ? "通过深化合作关系，预计可以提升客户忠诚度，增加高价值服务的采购，并发展为长期战略合作伙伴。"
-                      : user.rfmScore >= 51
-                        ? "通过提升产品使用深度和增值服务，预计可以提高客户满意度，增加产品使用频率，逐步提升客户价值。"
-                        : "通过重新激活用户兴趣，预计可以提高用户活跃度，减少流失风险，逐步引导用户成为活跃客户。"}
-                  </p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-
-        <TabsContent value="wechat" className="space-y-6 pt-4">
-          <Card>
-            <CardHeader>
-              <CardTitle>关联微信账号</CardTitle>
-              <CardDescription>用户关联的微信账号列表</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="space-y-4">
-                {user.wechatAccounts.map((account: any) => (
-                  <div key={account.id} className="flex items-center justify-between p-4 border rounded-md">
-                    <div className="flex items-center gap-4">
-                      <Avatar className="h-12 w-12">
-                        <img src={account.avatar || "/placeholder.svg"} alt={account.name} />
-                      </Avatar>
-                      <div>
-                        <p className="font-medium">{account.name}</p>
-                        <div className="flex gap-1 mt-1">
-                          {account.tags.map((tag: string, index: number) => (
-                            <Badge key={index} variant="secondary" className="text-xs">
-                              {tag}
-                            </Badge>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                    <Button variant="outline" size="sm">
-                      查看详情
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            </CardContent>
-            <CardFooter>
-              <Button variant="outline" className="w-full">
-                <MessageCircle className="mr-2 h-4 w-4" />
-                添加关联微信账号
-              </Button>
-            </CardFooter>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>微信互动历史</CardTitle>
-              <CardDescription>用户通过微信的互动记录</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="rounded-md border">
-                <table className="min-w-full divide-y divide-gray-200">
-                  <thead>
-                    <tr>
-                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        微信账号
-                      </th>
-                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        互动类型
-                      </th>
-                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        时间
-                      </th>
-                      <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                        内容
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody className="bg-white divide-y divide-gray-200">
-                    {/* 模拟数据 */}
-                    <tr>
-                      <td className="px-4 py-4 whitespace-nowrap">
-                        <div className="flex items-center">
-                          <div className="flex-shrink-0 h-8 w-8 mr-2">
-                            <img
-                              className="h-8 w-8 rounded-full"
-                              src={user.wechatAccounts[0]?.avatar || "/placeholder.svg"}
-                              alt=""
-                            />
-                          </div>
-                          <div className="text-sm font-medium text-gray-900">{user.wechatAccounts[0]?.name}</div>
-                        </div>
-                      </td>
-                      <td className="px-4 py-4 whitespace-nowrap">
-                        <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                          消息
-                        </span>
-                      </td>
-                      <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-18 14:30</td>
-                      <td className="px-4 py-4 text-sm text-gray-500">咨询产品功能和价格</td>
-                    </tr>
-                    <tr>
-                      <td className="px-4 py-4 whitespace-nowrap">
-                        <div className="flex items-center">
-                          <div className="flex-shrink-0 h-8 w-8 mr-2">
-                            <img
-                              className="h-8 w-8 rounded-full"
-                              src={user.wechatAccounts[0]?.avatar || "/placeholder.svg"}
-                              alt=""
-                            />
-                          </div>
-                          <div className="text-sm font-medium text-gray-900">{user.wechatAccounts[0]?.name}</div>
-                        </div>
-                      </td>
-                      <td className="px-4 py-4 whitespace-nowrap">
-                        <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
-                          朋友圈
-                        </span>
-                      </td>
-                      <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-15 09:45</td>
-                      <td className="px-4 py-4 text-sm text-gray-500">点赞公司发布的新产品介绍</td>
-                    </tr>
-                    {user.wechatAccounts.length > 1 && (
-                      <tr>
-                        <td className="px-4 py-4 whitespace-nowrap">
-                          <div className="flex items-center">
-                            <div className="flex-shrink-0 h-8 w-8 mr-2">
-                              <img
-                                className="h-8 w-8 rounded-full"
-                                src={user.wechatAccounts[1]?.avatar || "/placeholder.svg"}
-                                alt=""
-                              />
-                            </div>
-                            <div className="text-sm font-medium text-gray-900">{user.wechatAccounts[1]?.name}</div>
-                          </div>
-                        </td>
-                        <td className="px-4 py-4 whitespace-nowrap">
-                          <span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
-                            群聊
-                          </span>
-                        </td>
-                        <td className="px-4 py-4 whitespace-nowrap text-sm text-gray-500">2023-07-10 16:20</td>
-                        <td className="px-4 py-4 text-sm text-gray-500">在技术交流群中分享使用经验</td>
-                      </tr>
-                    )}
-                  </tbody>
-                </table>
-              </div>
-            </CardContent>
-          </Card>
-        </TabsContent>
-      </Tabs>
+            <Section title="绑定微信账号">
+              <WechatAccounts accounts={data.wechatAccounts.map((w) => ({ id: w.id, nickname: w.nickname, avatar: w.avatar }))} />
+            </Section>
+          </div>
+        ) : (
+          <div className="rounded-xl bg-white/60 backdrop-blur p-6 text-sm text-red-600">
+            未找到该用户
+          </div>
+        )}
+      </main>
+      <BottomNav />
     </div>
   )
 }
diff --git a/app/user-portrait/page.tsx b/app/user-portrait/page.tsx
index b15c408..9142f78 100644
--- a/app/user-portrait/page.tsx
+++ b/app/user-portrait/page.tsx
@@ -1,567 +1,239 @@
 "use client"
 
-import { useState } from "react"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { useEffect, useMemo, useState } from "react"
+import Link from "next/link"
+import MobileHeader from "@/app/components/MobileHeader"
+import BottomNav from "@/app/components/BottomNav"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Card, CardContent } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Badge } from "@/components/ui/badge"
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import { Switch } from "@/components/ui/switch"
-import { Users, UserPlus, Tags, Target, Activity, Plus, Edit, Search, Filter } from "lucide-react"
-import { TooltipHelp } from "@/components/ui/tooltip-help"
-import { TooltipProvider } from "@/components/ui/tooltip"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Search, Filter, Plus } from 'lucide-react'
+import FilterDrawer, { type FilterValues } from "@/components/user-portrait/filter-drawer"
+
+type User = {
+  id: string
+  name: string
+  phone: string
+  email: string
+  tags: string[]
+  rfmScore: number
+  lastActivity: string
+  status: "活跃" | "沉睡" | "已封禁"
+}
+
+type UsersResponse = { success: true; data: { items: User[]; total: number; page: number; pageSize: number } }
 
 export default function UserPortraitPage() {
-  const [selectedSegment, setSelectedSegment] = useState("all")
-  const [isAddingUser, setIsAddingUser] = useState(false)
-  const [isAddingTag, setIsAddingTag] = useState(false)
+  const [users, setUsers] = useState<User[]>([])
+  const [total, setTotal] = useState(0)
+
   const [searchQuery, setSearchQuery] = useState("")
+  const [isAddingUser, setIsAddingUser] = useState(false)
+  const [newUser, setNewUser] = useState({ name: "", phone: "", email: "", tags: [] as string[] })
 
-  // 用户数据
-  const [users, setUsers] = useState([
-    {
-      id: "U001",
-      name: "张三",
-      phone: "13800138001",
-      email: "zhangsan@example.com",
-      tags: ["高价值", "活跃用户", "科技爱好者"],
-      value: 12580,
-      lastActive: "2小时前",
-      source: "微信",
-      registerDate: "2023-01-15",
-    },
-    {
-      id: "U002",
-      name: "李四",
-      phone: "13800138002",
-      email: "lisi@example.com",
-      tags: ["潜在客户", "新用户", "价格敏感"],
-      value: 3240,
-      lastActive: "1天前",
-      source: "抖音",
-      registerDate: "2024-01-10",
-    },
-    {
-      id: "U003",
-      name: "王五",
-      phone: "13800138003",
-      email: "wangwu@example.com",
-      tags: ["高价值", "忠实用户", "奢侈品偏好"],
-      value: 25600,
-      lastActive: "30分钟前",
-      source: "小红书",
-      registerDate: "2022-08-20",
-    },
-  ])
+  const [filterOpen, setFilterOpen] = useState(false)
+  const [allTags, setAllTags] = useState<string[]>([])
+  const [filters, setFilters] = useState<FilterValues>({ tags: [], status: [], rfm: [0, 100] })
 
-  // 标签分类数据
-  const [tagCategories, setTagCategories] = useState([
-    {
-      id: "1",
-      name: "用户价值",
-      description: "基于用户消费能力和贡献度的分类",
-      tags: [
-        { name: "高价值用户", count: 2847, color: "red" },
-        { name: "中价值用户", count: 12456, color: "blue" },
-        { name: "低价值用户", count: 8234, color: "gray" },
-        { name: "潜在价值用户", count: 5287, color: "yellow" },
-      ],
-    },
-    {
-      id: "2",
-      name: "活跃度",
-      description: "基于用户活跃程度和互动频率的分类",
-      tags: [
-        { name: "超级活跃", count: 1234, color: "green" },
-        { name: "活跃用户", count: 8429, color: "blue" },
-        { name: "一般活跃", count: 15678, color: "yellow" },
-        { name: "不活跃", count: 3456, color: "gray" },
-      ],
-    },
-    {
-      id: "3",
-      name: "消费行为",
-      description: "基于用户购买习惯和消费偏好的分类",
-      tags: [
-        { name: "冲动消费", count: 4567, color: "red" },
-        { name: "理性消费", count: 12345, color: "blue" },
-        { name: "价格敏感", count: 8901, color: "yellow" },
-        { name: "品质优先", count: 6789, color: "purple" },
-        { name: "奢侈品偏好", count: 2345, color: "pink" },
-      ],
-    },
-    {
-      id: "4",
-      name: "兴趣偏好",
-      description: "基于用户兴趣爱好和内容偏好的分类",
-      tags: [
-        { name: "科技爱好者", count: 5678, color: "blue" },
-        { name: "时尚达人", count: 7890, color: "pink" },
-        { name: "旅游爱好者", count: 4321, color: "green" },
-        { name: "美食家", count: 6543, color: "orange" },
-        { name: "运动健身", count: 3210, color: "red" },
-        { name: "文艺青年", count: 2109, color: "purple" },
-      ],
-    },
-    {
-      id: "5",
-      name: "生命周期",
-      description: "基于用户在平台的生命周期阶段分类",
-      tags: [
-        { name: "新用户", count: 8765, color: "green" },
-        { name: "成长期用户", count: 12345, color: "blue" },
-        { name: "成熟期用户", count: 15678, color: "purple" },
-        { name: "衰退期用户", count: 4321, color: "yellow" },
-        { name: "流失用户", count: 2109, color: "gray" },
-      ],
-    },
-    {
-      id: "6",
-      name: "地域分布",
-      description: "基于用户地理位置的分类",
-      tags: [
-        { name: "一线城市", count: 18765, color: "red" },
-        { name: "二线城市", count: 15432, color: "blue" },
-        { name: "三线城市", count: 9876, color: "green" },
-        { name: "四线及以下", count: 5432, color: "gray" },
-        { name: "海外用户", count: 1234, color: "purple" },
-      ],
-    },
-    {
-      id: "7",
-      name: "设备偏好",
-      description: "基于用户使用设备类型的分类",
-      tags: [
-        { name: "iOS用户", count: 16789, color: "blue" },
-        { name: "Android用户", count: 23456, color: "green" },
-        { name: "PC用户", count: 8765, color: "gray" },
-        { name: "平板用户", count: 4321, color: "purple" },
-      ],
-    },
-    {
-      id: "8",
-      name: "社交属性",
-      description: "基于用户社交行为和影响力的分类",
-      tags: [
-        { name: "意见领袖", count: 1234, color: "red" },
-        { name: "活跃分享者", count: 5678, color: "blue" },
-        { name: "默默关注者", count: 18765, color: "gray" },
-        { name: "社交新手", count: 8901, color: "green" },
-      ],
-    },
-  ])
+  const queryString = useMemo(() => {
+    const p = new URLSearchParams()
+    if (searchQuery) p.set("q", searchQuery)
+    if (filters.tags.length) p.set("tags", filters.tags.join(","))
+    if (filters.status.length) p.set("status", filters.status.join(","))
+    p.set("rfmMin", String(filters.rfm[0]))
+    p.set("rfmMax", String(filters.rfm[1]))
+    p.set("page", "1")
+    p.set("pageSize", "50")
+    return p.toString()
+  }, [searchQuery, filters])
 
-  const getTagColor = (color: string) => {
-    const colors = {
-      red: "bg-red-100 text-red-800",
-      blue: "bg-blue-100 text-blue-800",
-      green: "bg-green-100 text-green-800",
-      yellow: "bg-yellow-100 text-yellow-800",
-      purple: "bg-purple-100 text-purple-800",
-      pink: "bg-pink-100 text-pink-800",
-      orange: "bg-orange-100 text-orange-800",
-      gray: "bg-gray-100 text-gray-800",
+  useEffect(() => {
+    fetch(`/api/users?${queryString}`)
+      .then((r) => r.json())
+      .then((res: UsersResponse) => {
+        if (res?.success) {
+          setUsers(res.data.items)
+          setTotal(res.data.total)
+        }
+      })
+      .catch(() => {})
+  }, [queryString])
+
+  useEffect(() => {
+    fetch("/api/users?meta=tags")
+      .then((r) => r.json())
+      .then((res: any) => setAllTags(res?.data?.tags ?? []))
+      .catch(() => {})
+  }, [])
+
+  const handleAddUser = async () => {
+    const resp = await fetch("/api/users", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(newUser),
+    })
+    const data = await resp.json()
+    if (data?.success) {
+      setIsAddingUser(false)
+      setNewUser({ name: "", phone: "", email: "", tags: [] })
+      // 触发刷新
+      fetch(`/api/users?${queryString}`)
+        .then((r) => r.json())
+        .then((res: UsersResponse) => {
+          if (res?.success) {
+            setUsers(res.data.items)
+            setTotal(res.data.total)
+          }
+        })
     }
-    return colors[color as keyof typeof colors] || colors.gray
   }
 
   return (
-    <TooltipProvider>
-      <div className="container mx-auto p-6 space-y-6">
-        <div className="flex items-center justify-between">
-          <div>
-            <h1 className="text-3xl font-bold">用户画像</h1>
-            <p className="text-muted-foreground mt-2">深度分析用户特征，精准定位目标群体</p>
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-purple-50">
+      <MobileHeader onMenuToggle={() => {}} title="用户画像" />
+
+      <main className="container mx-auto px-4 pb-24 space-y-4">
+        <div className="rounded-2xl bg-white/60 backdrop-blur-md p-4 shadow-sm border">
+          <div className="flex items-baseline justify-between">
+            <div>
+              <h1 className="text-2xl font-bold">用户画像</h1>
+              <p className="text-sm text-muted-foreground">管理与分群</p>
+            </div>
+            <div className="text-sm text-muted-foreground">共 {total} 人</div>
           </div>
-        </div>
 
-        {/* 核心指标概览 */}
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-2">
-                总用户数
-                <TooltipHelp content="系统中所有已识别和分析的用户总数，包括活跃和非活跃用户" />
-              </CardTitle>
-              <Users className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">24,563</div>
-              <p className="text-xs text-muted-foreground">
-                <span className="text-green-600">+12.5%</span> 较上月
-              </p>
-            </CardContent>
-          </Card>
+          <div className="mt-4">
+            <Tabs defaultValue="users" className="w-full">
+              <TabsList className="grid grid-cols-2 w-full">
+                <TabsTrigger value="users" className="data-[state=active]:bg-white">用户管理</TabsTrigger>
+                <TabsTrigger value="tags" className="data-[state=active]:bg-white">标签管理</TabsTrigger>
+              </TabsList>
 
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-2">
-                活跃用户
-                <TooltipHelp content="近30天内有过互动行为的用户数量，包括点击、浏览、购买等行为" />
-              </CardTitle>
-              <Activity className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">18,429</div>
-              <p className="text-xs text-muted-foreground">
-                <span className="text-green-600">+8.2%</span> 较上月
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-2">
-                用户分群
-                <TooltipHelp content="基于用户行为和特征自动创建的用户群组数量，用于精准营销" />
-              </CardTitle>
-              <Target className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">156</div>
-              <p className="text-xs text-muted-foreground">
-                <span className="text-blue-600">+23</span> 新增分群
-              </p>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium flex items-center gap-2">
-                标签覆盖率
-                <TooltipHelp content="已打标签用户占总用户的比例，反映用户画像的完整程度" />
-              </CardTitle>
-              <Tags className="h-4 w-4 text-muted-foreground" />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">87.3%</div>
-              <p className="text-xs text-muted-foreground">
-                <span className="text-green-600">+2.1%</span> 较上月
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-
-        <Tabs defaultValue="users" className="space-y-6">
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="users">用户管理</TabsTrigger>
-            <TabsTrigger value="tags">标签管理</TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="users" className="space-y-6">
-            <Card>
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2">
-                  用户管理
-                  <TooltipHelp content="管理真实用户信息，支持添加、编辑和查看用户详细资料" />
-                </CardTitle>
-                <CardDescription>管理和查看所有真实用户的详细信息</CardDescription>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center gap-4 mb-6">
-                  <div className="relative">
-                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-                    <Input
-                      placeholder="搜索用户..."
-                      className="pl-8 max-w-sm"
-                      value={searchQuery}
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                    />
+              <TabsContent value="users" className="space-y-4">
+                <div className="flex items-center gap-2 mt-3">
+                  <div className="relative flex-1">
+                    <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-500" />
+                    <Input className="pl-8" placeholder="搜索用户…" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />
                   </div>
-                  <Select value={selectedSegment} onValueChange={setSelectedSegment}>
-                    <SelectTrigger className="w-48">
-                      <SelectValue placeholder="选择用户分群" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="all">全部用户</SelectItem>
-                      <SelectItem value="high-value">高价值用户</SelectItem>
-                      <SelectItem value="active">活跃用户</SelectItem>
-                      <SelectItem value="potential">潜在用户</SelectItem>
-                    </SelectContent>
-                  </Select>
-                  <Button variant="outline" size="sm">
-                    <Filter className="h-4 w-4 mr-2" />
+                  <Button variant="outline" onClick={() => setFilterOpen(true)}>
+                    <Filter className="h-4 w-4 mr-1" />
                     筛选
                   </Button>
                   <Button onClick={() => setIsAddingUser(true)}>
-                    <UserPlus className="h-4 w-4 mr-2" />
+                    <Plus className="h-4 w-4 mr-1" />
                     添加用户
                   </Button>
                 </div>
 
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>用户ID</TableHead>
-                      <TableHead>姓名</TableHead>
-                      <TableHead>联系方式</TableHead>
-                      <TableHead>标签</TableHead>
-                      <TableHead>用户价值</TableHead>
-                      <TableHead>最后活跃</TableHead>
-                      <TableHead>来源</TableHead>
-                      <TableHead>操作</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {users.map((user) => (
-                      <TableRow key={user.id}>
-                        <TableCell className="font-medium">{user.id}</TableCell>
-                        <TableCell>{user.name}</TableCell>
-                        <TableCell>
-                          <div className="text-sm">
-                            <div>{user.phone}</div>
-                            <div className="text-muted-foreground">{user.email}</div>
+                <div className="grid gap-3">
+                  {users.map((u) => (
+                    <Card key={u.id} className="border bg-white/70 backdrop-blur-md shadow-sm">
+                      <CardContent className="p-4">
+                        <div className="grid grid-cols-12 gap-3 items-center">
+                          <div className="col-span-5">
+                            <Link href={`/user-portrait/${u.id}`} className="font-medium hover:underline">
+                              {u.name}
+                            </Link>
+                            <p className="text-xs text-muted-foreground mt-1">
+                              最后活跃 {new Date(u.lastActivity).toLocaleDateString("zh-CN")}
+                            </p>
                           </div>
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex flex-wrap gap-1">
-                            {user.tags.slice(0, 2).map((tag, index) => (
-                              <Badge key={index} variant="secondary" className="text-xs">
-                                {tag}
-                              </Badge>
-                            ))}
-                            {user.tags.length > 2 && (
-                              <Badge variant="outline" className="text-xs">
-                                +{user.tags.length - 2}
-                              </Badge>
-                            )}
+                          <div className="col-span-3">
+                            <div className="text-sm">{u.phone}</div>
+                            <div className="text-xs text-muted-foreground">{u.email}</div>
                           </div>
-                        </TableCell>
-                        <TableCell>¥{user.value.toLocaleString()}</TableCell>
-                        <TableCell>{user.lastActive}</TableCell>
-                        <TableCell>
-                          <Badge variant="outline">{user.source}</Badge>
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex space-x-2">
-                            <Button variant="ghost" size="sm">
-                              <Edit className="h-4 w-4" />
-                            </Button>
-                            <Button variant="ghost" size="sm">
-                              查看详情
-                            </Button>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="tags" className="space-y-6">
-            <Card>
-              <CardHeader>
-                <div className="flex justify-between items-center">
-                  <div>
-                    <CardTitle className="flex items-center gap-2">
-                      标签管理
-                      <TooltipHelp content="管理用户标签体系，包括标签创建、分类、规则设置和自动化打标" />
-                    </CardTitle>
-                    <CardDescription>创建和管理用户标签，实现精准用户画像</CardDescription>
-                  </div>
-                  <Button onClick={() => setIsAddingTag(true)}>
-                    <Plus className="h-4 w-4 mr-2" />
-                    新建标签
-                  </Button>
-                </div>
-              </CardHeader>
-              <CardContent>
-                <div className="space-y-6">
-                  {tagCategories.map((category) => (
-                    <Card key={category.id}>
-                      <CardHeader className="pb-3">
-                        <div className="flex justify-between items-center">
-                          <div>
-                            <CardTitle className="text-base">{category.name}</CardTitle>
-                            <CardDescription>{category.description}</CardDescription>
-                          </div>
-                          <Badge variant="outline">{category.tags.length} 个标签</Badge>
-                        </div>
-                      </CardHeader>
-                      <CardContent>
-                        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3">
-                          {category.tags.map((tag, index) => (
-                            <div
-                              key={index}
-                              className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50"
-                            >
-                              <div className="flex items-center gap-2">
-                                <Badge className={getTagColor(tag.color)}>{tag.name}</Badge>
-                              </div>
-                              <div className="text-sm text-muted-foreground">{tag.count.toLocaleString()}</div>
+                          <div className="col-span-2">
+                            <div className="flex flex-wrap gap-1">
+                              {u.tags.slice(0, 2).map((t) => (
+                                <Badge key={t} variant="secondary" className="text-xs">{t}</Badge>
+                              ))}
+                              {u.tags.length > 2 && (
+                                <Badge variant="outline" className="text-xs">+{u.tags.length - 2}</Badge>
+                              )}
                             </div>
-                          ))}
+                          </div>
+                          <div className="col-span-1 text-sm font-semibold">{u.rfmScore}</div>
+                          <div className="col-span-1">
+                            <span className={`text-xs px-2 py-1 rounded-full ${
+                              u.status === "活跃" ? "bg-green-100 text-green-700" :
+                              u.status === "沉睡" ? "bg-yellow-100 text-yellow-800" : "bg-red-100 text-red-700"
+                            }`}>
+                              {u.status}
+                            </span>
+                          </div>
                         </div>
                       </CardContent>
                     </Card>
                   ))}
                 </div>
-              </CardContent>
-            </Card>
-          </TabsContent>
-        </Tabs>
+              </TabsContent>
 
-        {/* 添加用户对话框 */}
-        <Dialog open={isAddingUser} onOpenChange={setIsAddingUser}>
-          <DialogContent className="sm:max-w-[500px]">
-            <DialogHeader>
-              <DialogTitle>添加真实用户</DialogTitle>
-              <DialogDescription>录入真实用户信息，完善用户画像数据</DialogDescription>
-            </DialogHeader>
-            <div className="grid gap-4 py-4">
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="user-name" className="text-right">
-                  姓名
-                </Label>
-                <Input id="user-name" className="col-span-3" placeholder="请输入真实姓名" />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="user-phone" className="text-right">
-                  手机号
-                </Label>
-                <Input id="user-phone" className="col-span-3" placeholder="请输入手机号码" />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="user-email" className="text-right">
-                  邮箱
-                </Label>
-                <Input id="user-email" className="col-span-3" placeholder="请输入邮箱地址" />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="user-source" className="text-right">
-                  来源渠道
-                </Label>
-                <Select>
-                  <SelectTrigger id="user-source" className="col-span-3">
-                    <SelectValue placeholder="选择用户来源" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="wechat">微信</SelectItem>
-                    <SelectItem value="douyin">抖音</SelectItem>
-                    <SelectItem value="xiaohongshu">小红书</SelectItem>
-                    <SelectItem value="website">官网</SelectItem>
-                    <SelectItem value="offline">线下</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="grid grid-cols-4 items-start gap-4">
-                <Label htmlFor="user-tags" className="text-right pt-2">
-                  用户标签
-                </Label>
-                <Textarea id="user-tags" className="col-span-3" placeholder="请输入用户标签，用逗号分隔" rows={3} />
-              </div>
-              <div className="grid grid-cols-4 items-start gap-4">
-                <Label htmlFor="user-notes" className="text-right pt-2">
-                  备注信息
-                </Label>
-                <Textarea id="user-notes" className="col-span-3" placeholder="用户备注信息" rows={3} />
-              </div>
+              <TabsContent value="tags">
+                <div className="text-sm text-muted-foreground py-6 text-center">标签管理将在接入数据字典后提供配置与统计</div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </div>
+      </main>
+
+      <BottomNav />
+
+      {/* 筛选抽屉 */}
+      <FilterDrawer
+        open={filterOpen}
+        onOpenChange={setFilterOpen}
+        allTags={allTags}
+        value={filters}
+        onApply={(v) => setFilters(v)}
+      />
+
+      {/* 添加用户 */}
+      <Dialog open={isAddingUser} onOpenChange={setIsAddingUser}>
+        <DialogContent>
+          <DialogHeader><DialogTitle>添加新用户</DialogTitle></DialogHeader>
+          <div className="space-y-3 py-2">
+            <div className="space-y-2">
+              <Label htmlFor="name">姓名</Label>
+              <Input id="name" value={newUser.name} onChange={(e) => setNewUser((p) => ({ ...p, name: e.target.value }))} />
             </div>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setIsAddingUser(false)}>
-                取消
-              </Button>
-              <Button onClick={() => setIsAddingUser(false)}>
-                <UserPlus className="mr-2 h-4 w-4" />
-                添加用户
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-
-        {/* 添加标签对话框 */}
-        <Dialog open={isAddingTag} onOpenChange={setIsAddingTag}>
-          <DialogContent className="sm:max-w-[500px]">
-            <DialogHeader>
-              <DialogTitle>新建标签</DialogTitle>
-              <DialogDescription>创建新的用户标签，完善标签分类体系</DialogDescription>
-            </DialogHeader>
-            <div className="grid gap-4 py-4">
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="tag-category" className="text-right">
-                  标签分类
-                </Label>
-                <Select>
-                  <SelectTrigger id="tag-category" className="col-span-3">
-                    <SelectValue placeholder="选择标签分类" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {tagCategories.map((category) => (
-                      <SelectItem key={category.id} value={category.id}>
-                        {category.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="tag-name" className="text-right">
-                  标签名称
-                </Label>
-                <Input id="tag-name" className="col-span-3" placeholder="请输入标签名称" />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="tag-color" className="text-right">
-                  标签颜色
-                </Label>
-                <Select>
-                  <SelectTrigger id="tag-color" className="col-span-3">
-                    <SelectValue placeholder="选择标签颜色" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="red">红色</SelectItem>
-                    <SelectItem value="blue">蓝色</SelectItem>
-                    <SelectItem value="green">绿色</SelectItem>
-                    <SelectItem value="yellow">黄色</SelectItem>
-                    <SelectItem value="purple">紫色</SelectItem>
-                    <SelectItem value="pink">粉色</SelectItem>
-                    <SelectItem value="orange">橙色</SelectItem>
-                    <SelectItem value="gray">灰色</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-              <div className="grid grid-cols-4 items-start gap-4">
-                <Label htmlFor="tag-description" className="text-right pt-2">
-                  标签描述
-                </Label>
-                <Textarea id="tag-description" className="col-span-3" placeholder="标签描述信息" rows={3} />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <div className="text-right">
-                  <Label htmlFor="auto-tag">自动打标</Label>
-                </div>
-                <div className="flex items-center space-x-2 col-span-3">
-                  <Switch id="auto-tag" />
-                  <Label htmlFor="auto-tag">启用自动打标规则</Label>
+            <div className="space-y-2">
+              <Label htmlFor="phone">手机号</Label>
+              <Input id="phone" value={newUser.phone} onChange={(e) => setNewUser((p) => ({ ...p, phone: e.target.value }))} />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="email">邮箱</Label>
+              <Input id="email" type="email" value={newUser.email} onChange={(e) => setNewUser((p) => ({ ...p, email: e.target.value }))} />
+            </div>
+            {!!allTags.length && (
+              <div className="space-y-2">
+                <Label>用户标签</Label>
+                <div className="grid grid-cols-2 gap-2 max-h-40 overflow-auto">
+                  {allTags.map((t) => (
+                    <label key={t} className="flex items-center gap-2 text-sm">
+                      <Checkbox
+                        checked={newUser.tags.includes(t)}
+                        onCheckedChange={(ck) =>
+                          setNewUser((p) => ({ ...p, tags: ck ? [...p.tags, t] : p.tags.filter((x) => x !== t) }))
+                        }
+                      />
+                      <span className="truncate">{t}</span>
+                    </label>
+                  ))}
                 </div>
               </div>
-            </div>
-            <DialogFooter>
-              <Button variant="outline" onClick={() => setIsAddingTag(false)}>
-                取消
-              </Button>
-              <Button onClick={() => setIsAddingTag(false)}>
-                <Tags className="mr-2 h-4 w-4" />
-                创建标签
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-    </TooltipProvider>
+            )}
+          </div>
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={() => setIsAddingUser(false)}>取消</Button>
+            <Button onClick={handleAddUser}>添加用户</Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
   )
 }
diff --git a/branding/style-prompts.md b/branding/style-prompts.md
new file mode 100644
index 0000000..b0cb2b3
--- /dev/null
+++ b/branding/style-prompts.md
@@ -0,0 +1,54 @@
+# 数据资产中台 · 布局/图标/界面风格提示词合集
+
+## 全局主题
+- 现代数据中台、极简理性、数据优先
+- 冷色品牌渐变（蓝 #3B82F6 → 紫 #8B5CF6），高明度低饱和背景；深色模式以中性灰为主
+- 玻璃拟态：半透明白描边、轻雾面、柔和阴影
+- 几何无衬线、数字等宽；8pt 网格；圆角 12–16px；组件间距 8/12/16/24
+
+## 布局
+- 移动：粘性顶部栏（菜单/搜索/通知）、底部 4 项主导航、安全区内边距
+- 桌面：左侧可折叠侧栏（图标+标题+描述），右侧内容画布
+- 卡片栅格 2–3 列；层级从背景渐变→玻璃容器→卡片→控件与数据
+
+## 组件
+- 按钮：玻璃浅层，主按钮品牌渐变，hover 轻微缩放
+- 输入/选择：浅玻璃、聚焦加光环
+- 卡片：大圆角、柔和阴影、标题可用渐变字
+- 图表：细网格；品牌主色阶；玻璃工具提示
+- 非打断式提示：Toast/Tooltip 简短且半透明
+
+## 图标集
+- 线性图标，2px 线宽、圆角端点、24px 栅格
+- 语义：数据/中台、用户/画像、AI、搜索、设备、设置
+- 未激活灰 600–700；激活品牌主色或渐变描边
+- 尺寸：列表 16–20px；导航/按钮 20–24px
+
+## 动效
+- 200–300ms，ease-out 进入、ease-in 离开
+- 悬停轻微缩放与亮度提升；抽屉 slide-in/out
+- 玻璃层淡入+模糊过渡；同屏动画不超 3 处
+
+## 可访问性
+- AA 对比；触达 40–44px；键盘可达与显著焦点环
+- 图表用形状/点样式区分色盲场景
+
+## 插画/图片
+- 抽象几何、淡彩渐变、线面结合；避免写实
+- 头像/占位简洁清爽
+
+## 避免项
+- 过度饱和与强烈渐变；>5 系列色；硬阴影；复杂动效
+- 移动端复杂多列表格
+
+## 直接可用的提示模板
+- 全局主题：
+  「现代数据中台 UI：冷色品牌渐变（蓝→紫）、高明度低饱和背景、玻璃拟态（半透明描边+轻雾面+柔和阴影）、几何无衬线与等宽数字、8pt 网格、圆角 12–16px；移动优先，桌面有可折叠侧栏；动效温和、可访问性 AA、数据优先。」
+- 布局：
+  「移动端粘性顶部栏与底部 4 项主导航（安全区内边距）；桌面左侧可折叠导航、右侧内容画布；卡片 2–3 列，层级从背景渐变到玻璃容器再到卡片。」
+- 组件：
+  「玻璃按钮与输入（聚焦发光环），主按钮品牌渐变；卡片大圆角、柔和阴影、标题渐变字；图表用品牌主色阶与细网格，玻璃工具提示；非打断式提示。」
+- 图标集：
+  「线性图标 2px 圆角线、24px 栅格；涵盖数据/画像/AI/搜索/设备/设置；未激活灰 600–700，激活品牌主色或渐变描边；适配 16–24px 尺寸。」
+- 动效：
+  「200–300ms、ease-out/in；hover 轻微缩放；抽屉 slide-in/out；玻璃层淡入+模糊过渡；不超过 3 处并发动画。」
diff --git a/components/ai-assistant/create-task-dialog.tsx b/components/ai-assistant/create-task-dialog.tsx
new file mode 100644
index 0000000..c8f4bc6
--- /dev/null
+++ b/components/ai-assistant/create-task-dialog.tsx
@@ -0,0 +1,142 @@
+"use client"
+
+import { useState } from "react"
+import { Brain } from 'lucide-react'
+import type { AnalysisTask, DatabaseInfo, ReportTemplate } from "@/types/ai-assistant"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { sanitizeText } from "@/lib/text-sanitize"
+
+export default function CreateTaskDialog({
+  databases,
+  templates,
+  onCreate,
+}: {
+  databases: DatabaseInfo[]
+  templates: ReportTemplate[]
+  onCreate: (task: AnalysisTask) => void
+}) {
+  const [open, setOpen] = useState(false)
+  const [name, setName] = useState("")
+  const [database, setDatabase] = useState("")
+  const [template, setTemplate] = useState("")
+  const [customPrompt, setCustomPrompt] = useState("")
+  const [includeCharts, setIncludeCharts] = useState(true)
+  const [includeRecommendations, setIncludeRecommendations] = useState(true)
+
+  function submit() {
+    const task: AnalysisTask = {
+      id: `task_${Date.now()}`,
+      name: name || "未命名任务",
+      database: database || "未选择数据库",
+      status: "pending",
+      progress: 0,
+      createdAt: new Date().toISOString(),
+      description: sanitizeText(
+        `${customPrompt}${
+          includeCharts ? " | 包含图表" : ""
+        }${includeRecommendations ? " | 包含AI建议" : ""}`,
+      ),
+    }
+    onCreate(task)
+    setOpen(false)
+    setName("")
+    setDatabase("")
+    setTemplate("")
+    setCustomPrompt("")
+    setIncludeCharts(true)
+    setIncludeRecommendations(true)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button className="flex items-center gap-2">
+          <Brain className="w-4 h-4" />
+          创建分析任务
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>创建新的分析任务</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-2">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="taskName">任务名称</Label>
+              <Input id="taskName" value={name} onChange={(e) => setName(e.target.value)} placeholder="输入任务名称" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="database">选择数据库</Label>
+              <Select value={database} onValueChange={setDatabase}>
+                <SelectTrigger>
+                  <SelectValue placeholder="选择要分析的数据库" />
+                </SelectTrigger>
+                <SelectContent>
+                  {databases.map((db) => (
+                    <SelectItem key={db.id} value={db.name}>
+                      {db.name}（{db.type}）
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="template">报告模板</Label>
+            <Select value={template} onValueChange={setTemplate}>
+              <SelectTrigger>
+                <SelectValue placeholder="选择报告模板" />
+              </SelectTrigger>
+              <SelectContent>
+                {templates.map((t) => (
+                  <SelectItem key={t.id} value={t.id}>
+                    {t.name} - {t.category}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="customPrompt">自定义分析要求</Label>
+            <Textarea
+              id="customPrompt"
+              rows={4}
+              value={customPrompt}
+              onChange={(e) => setCustomPrompt(e.target.value)}
+              placeholder="描述希望 AI 重点分析的内容..."
+            />
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="flex items-center space-x-2">
+              <Switch id="includeCharts" checked={includeCharts} onCheckedChange={setIncludeCharts} />
+              <Label htmlFor="includeCharts">包含图表和可视化</Label>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Switch
+                id="includeRecommendations"
+                checked={includeRecommendations}
+                onCheckedChange={setIncludeRecommendations}
+              />
+              <Label htmlFor="includeRecommendations">包含 AI 建议与推荐</Label>
+            </div>
+          </div>
+        </div>
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            取消
+          </Button>
+          <Button onClick={submit}>开始分析</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/components/ai-assistant/report-cards.tsx b/components/ai-assistant/report-cards.tsx
new file mode 100644
index 0000000..ff048ad
--- /dev/null
+++ b/components/ai-assistant/report-cards.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Sparkles, LineChart } from 'lucide-react'
+import type { ReportItem } from "@/types/ai-assistant"
+
+export default function ReportCards({ items }: { items: ReportItem[] }) {
+  return (
+    <section className="space-y-3 mt-4">
+      {items.map((it) => (
+        <Card key={it.id} className="shadow-sm">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-base flex items-center justify-between">
+              <span className="line-clamp-1">{it.title}</span>
+              <Badge variant="secondary" className="ml-2 shrink-0">
+                <LineChart className="h-3.5 w-3.5 mr-1" />
+                分析
+              </Badge>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            <p className="text-xs text-muted-foreground">{it.source}</p>
+            <p className="text-sm leading-relaxed">{it.description}</p>
+            <div className="flex items-center justify-between pt-1">
+              <span className="text-[11px] text-muted-foreground">
+                更新时间：{new Date(it.updatedAt).toLocaleString("zh-CN")}
+              </span>
+              <Button size="sm" variant="outline" className="h-8">
+                <Sparkles className="h-4 w-4 mr-1" />
+                生成
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </section>
+  )
+}
diff --git a/components/ai-assistant/task-list.tsx b/components/ai-assistant/task-list.tsx
new file mode 100644
index 0000000..1db4b23
--- /dev/null
+++ b/components/ai-assistant/task-list.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { useEffect } from "react"
+import type { AnalysisTask } from "@/types/ai-assistant"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+
+function statusBadgeClass(status: AnalysisTask["status"]) {
+  const map: Record<AnalysisTask["status"], string> = {
+    completed: "text-green-600 bg-green-50 border-green-200",
+    running: "text-blue-600 bg-blue-50 border-blue-200",
+    pending: "text-yellow-600 bg-yellow-50 border-yellow-200",
+    failed: "text-red-600 bg-red-50 border-red-200",
+  }
+  return map[status]
+}
+
+export default function TaskList({
+  tasks,
+  onTick,
+}: {
+  tasks: AnalysisTask[]
+  onTick?: () => void
+}) {
+  // 进度模拟：外部可传递 onTick 驱动
+  useEffect(() => {
+    if (!onTick) return
+    const timer = setInterval(() => onTick(), 1200)
+    return () => clearInterval(timer)
+  }, [onTick])
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+      {tasks.map((task) => (
+        <Card key={task.id} className="border-2 hover:shadow-lg transition-all duration-200">
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <CardTitle className="text-lg">{task.name}</CardTitle>
+              <Badge className={`${statusBadgeClass(task.status)} border`}>
+                {task.status === "pending"
+                  ? "等待中"
+                  : task.status === "running"
+                  ? "分析中"
+                  : task.status === "completed"
+                  ? "已完成"
+                  : "失败"}
+              </Badge>
+            </div>
+            <p className="text-sm text-gray-600">数据源: {task.database}</p>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {task.description && <p className="text-sm text-gray-700">{task.description}</p>}
+
+            <div className="w-full bg-gray-200 rounded-full h-2.5" aria-label="任务进度">
+              <div
+                className={`h-2.5 rounded-full ${
+                  task.status === "completed"
+                    ? "bg-green-600"
+                    : task.status === "running"
+                    ? "bg-blue-600"
+                    : task.status === "failed"
+                    ? "bg-red-600"
+                    : "bg-gray-400"
+                }`}
+                style={{ width: `${task.progress}%` }}
+              />
+            </div>
+
+            <div className="text-xs text-gray-500">
+              创建于 {new Date(task.createdAt).toLocaleString("zh-CN")}
+              {task.completedAt && <> · 完成于 {new Date(task.completedAt).toLocaleString("zh-CN")}</>}
+            </div>
+
+            {task.reportUrl && (
+              <div className="flex justify-end">
+                <Button asChild variant="outline" size="sm" aria-label="查看报告">
+                  <a href={task.reportUrl}>查看报告</a>
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
diff --git a/components/rfm/rfm-badge.tsx b/components/rfm/rfm-badge.tsx
new file mode 100644
index 0000000..5bfa520
--- /dev/null
+++ b/components/rfm/rfm-badge.tsx
@@ -0,0 +1,15 @@
+import { Badge } from "@/components/ui/badge"
+
+export default function RfmBadge({ grade = "C" as const }: { grade: "S" | "A" | "B" | "C" | "D" }) {
+  const color =
+    grade === "S"
+      ? "bg-emerald-100 text-emerald-800"
+      : grade === "A"
+      ? "bg-green-100 text-green-800"
+      : grade === "B"
+      ? "bg-blue-100 text-blue-800"
+      : grade === "C"
+      ? "bg-amber-100 text-amber-800"
+      : "bg-red-100 text-red-800"
+  return <Badge className={color}>RFM {grade}</Badge>
+}
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
deleted file mode 100644
index 25e7b47..0000000
--- a/components/ui/alert-dialog.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-
-const AlertDialogPortal = AlertDialogPrimitive.Portal
-
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
-
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
-
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
-
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
-
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
-
-export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}
diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx
deleted file mode 100644
index 41fa7e0..0000000
--- a/components/ui/alert.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
-Alert.displayName = "Alert"
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-AlertTitle.displayName = "AlertTitle"
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-))
-AlertDescription.displayName = "AlertDescription"
-
-export { Alert, AlertTitle, AlertDescription }
diff --git a/components/ui/aspect-ratio.tsx b/components/ui/aspect-ratio.tsx
deleted file mode 100644
index d6a5226..0000000
--- a/components/ui/aspect-ratio.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-const AspectRatio = AspectRatioPrimitive.Root
-
-export { AspectRatio }
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
deleted file mode 100644
index 60e6c96..0000000
--- a/components/ui/breadcrumb.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { ChevronRight, MoreHorizontal } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode
-  }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
-Breadcrumb.displayName = "Breadcrumb"
-
-const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
-      className
-    )}
-    {...props}
-  />
-))
-BreadcrumbList.displayName = "BreadcrumbList"
-
-const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
-
-const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean
-  }
->(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      ref={ref}
-      className={cn("transition-colors hover:text-foreground", className)}
-      {...props}
-    />
-  )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("font-normal text-foreground", className)}
-    {...props}
-  />
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
-
-const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
-
-const BreadcrumbEllipsis = ({
-  className,
-  ...props
-}: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
-
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-}
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
deleted file mode 100644
index ec505d0..0000000
--- a/components/ui/carousel.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-"use client"
-
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return
-      }
-
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext]
-    )
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
-      }
-
-      setApi(api)
-    }, [api, setApi])
-
-    React.useEffect(() => {
-      if (!api) {
-        return
-      }
-
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
-
-      return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = "Carousel"
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}
diff --git a/components/ui/chart.tsx b/components/ui/chart.tsx
deleted file mode 100644
index 8620baa..0000000
--- a/components/ui/chart.tsx
+++ /dev/null
@@ -1,365 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as RechartsPrimitive from "recharts"
-
-import { cn } from "@/lib/utils"
-
-// Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
-
-export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode
-    icon?: React.ComponentType
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
-}
-
-type ChartContextProps = {
-  config: ChartConfig
-}
-
-const ChartContext = React.createContext<ChartContextProps | null>(null)
-
-function useChart() {
-  const context = React.useContext(ChartContext)
-
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
-  }
-
-  return context
-}
-
-const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    config: ChartConfig
-    children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-    >["children"]
-  }
->(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId()
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
-
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
-          className
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  )
-})
-ChartContainer.displayName = "Chart"
-
-const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color
-  )
-
-  if (!colorConfig.length) {
-    return null
-  }
-
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
-${prefix} [data-chart=${id}] {
-${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color
-    return color ? `  --color-${key}: ${color};` : null
-  })
-  .join("\n")}
-}
-`
-          )
-          .join("\n"),
-      }}
-    />
-  )
-}
-
-const ChartTooltip = RechartsPrimitive.Tooltip
-
-const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
-      hideLabel?: boolean
-      hideIndicator?: boolean
-      indicator?: "line" | "dot" | "dashed"
-      nameKey?: string
-      labelKey?: string
-    }
->(
-  (
-    {
-      active,
-      payload,
-      className,
-      indicator = "dot",
-      hideLabel = false,
-      hideIndicator = false,
-      label,
-      labelFormatter,
-      labelClassName,
-      formatter,
-      color,
-      nameKey,
-      labelKey,
-    },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    const tooltipLabel = React.useMemo(() => {
-      if (hideLabel || !payload?.length) {
-        return null
-      }
-
-      const [item] = payload
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
-      const itemConfig = getPayloadConfigFromPayload(config, item, key)
-      const value =
-        !labelKey && typeof label === "string"
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label
-
-      if (labelFormatter) {
-        return (
-          <div className={cn("font-medium", labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        )
-      }
-
-      if (!value) {
-        return null
-      }
-
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ])
-
-    if (!active || !payload?.length) {
-      return null
-    }
-
-    const nestLabel = payload.length === 1 && indicator !== "dot"
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
-          className
-        )}
-      >
-        {!nestLabel ? tooltipLabel : null}
-        <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
-            const indicatorColor = color || item.payload.fill || item.color
-
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
-                  indicator === "dot" && "items-center"
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            }
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center"
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="font-mono font-medium tabular-nums text-foreground">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    )
-  }
-)
-ChartTooltipContent.displayName = "ChartTooltip"
-
-const ChartLegend = RechartsPrimitive.Legend
-
-const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
-      nameKey?: string
-    }
->(
-  (
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref
-  ) => {
-    const { config } = useChart()
-
-    if (!payload?.length) {
-      return null
-    }
-
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className
-        )}
-      >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`
-          const itemConfig = getPayloadConfigFromPayload(config, item, key)
-
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          )
-        })}
-      </div>
-    )
-  }
-)
-ChartLegendContent.displayName = "ChartLegend"
-
-// Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string
-) {
-  if (typeof payload !== "object" || payload === null) {
-    return undefined
-  }
-
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined
-
-  let configLabelKey: string = key
-
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string
-  }
-
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config]
-}
-
-export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
-}
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
deleted file mode 100644
index 93ef37b..0000000
--- a/components/ui/context-menu.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const ContextMenu = ContextMenuPrimitive.Root
-
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-
-const ContextMenuGroup = ContextMenuPrimitive.Group
-
-const ContextMenuPortal = ContextMenuPrimitive.Portal
-
-const ContextMenuSub = ContextMenuPrimitive.Sub
-
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
-
-const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </ContextMenuPrimitive.SubTrigger>
-))
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
-
-const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
-
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-))
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
-
-const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-))
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName
-
-const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-))
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
-
-const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
-
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
-
-const ContextMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-ContextMenuShortcut.displayName = "ContextMenuShortcut"
-
-export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
-}
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
deleted file mode 100644
index 6a0ef53..0000000
--- a/components/ui/drawer.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Drawer as DrawerPrimitive } from "vaul"
-
-import { cn } from "@/lib/utils"
-
-const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
-)
-Drawer.displayName = "Drawer"
-
-const DrawerTrigger = DrawerPrimitive.Trigger
-
-const DrawerPortal = DrawerPrimitive.Portal
-
-const DrawerClose = DrawerPrimitive.Close
-
-const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
-))
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
-
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-        className
-      )}
-      {...props}
-    >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
-))
-DrawerContent.displayName = "DrawerContent"
-
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
-)
-DrawerHeader.displayName = "DrawerHeader"
-
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
-)
-DrawerFooter.displayName = "DrawerFooter"
-
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName
-
-const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName
-
-export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
-}
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
deleted file mode 100644
index ce264ae..0000000
--- a/components/ui/form.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
-} from "react-hook-form"
-
-import { cn } from "@/lib/utils"
-import { Label } from "@/components/ui/label"
-
-const Form = FormProvider
-
-type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
-> = {
-  name: TName
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
-)
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-
-const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
-
-  const fieldState = getFieldState(fieldContext.name, formState)
-
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
-  }
-
-  const { id } = itemContext
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-type FormItemContextValue = {
-  id: string
-}
-
-const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
-)
-
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
-
-const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
-
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  )
-})
-FormLabel.displayName = "FormLabel"
-
-const FormControl = React.forwardRef<
-  React.ElementRef<typeof Slot>,
-  React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-  return (
-    <Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  )
-})
-FormControl.displayName = "FormControl"
-
-const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
-
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
-      {...props}
-    />
-  )
-})
-FormDescription.displayName = "FormDescription"
-
-const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message) : children
-
-  if (!body) {
-    return null
-  }
-
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-}
diff --git a/components/ui/hover-card.tsx b/components/ui/hover-card.tsx
deleted file mode 100644
index e54d91c..0000000
--- a/components/ui/hover-card.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
-
-import { cn } from "@/lib/utils"
-
-const HoverCard = HoverCardPrimitive.Root
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger
-
-const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
-
-export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/components/ui/input-otp.tsx b/components/ui/input-otp.tsx
deleted file mode 100644
index f66fcfa..0000000
--- a/components/ui/input-otp.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { OTPInput, OTPInputContext } from "input-otp"
-import { Dot } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      "flex items-center gap-2 has-[:disabled]:opacity-50",
-      containerClassName
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-  />
-))
-InputOTP.displayName = "InputOTP"
-
-const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("flex items-center", className)} {...props} />
-))
-InputOTPGroup.displayName = "InputOTPGroup"
-
-const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "z-10 ring-2 ring-ring ring-offset-background",
-        className
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
-        </div>
-      )}
-    </div>
-  )
-})
-InputOTPSlot.displayName = "InputOTPSlot"
-
-const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
->(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <Dot />
-  </div>
-))
-InputOTPSeparator.displayName = "InputOTPSeparator"
-
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/components/ui/menubar.tsx b/components/ui/menubar.tsx
deleted file mode 100644
index 5586fa9..0000000
--- a/components/ui/menubar.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { Check, ChevronRight, Circle } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const MenubarMenu = MenubarPrimitive.Menu
-
-const MenubarGroup = MenubarPrimitive.Group
-
-const MenubarPortal = MenubarPrimitive.Portal
-
-const MenubarSub = MenubarPrimitive.Sub
-
-const MenubarRadioGroup = MenubarPrimitive.RadioGroup
-
-const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
-      className
-    )}
-    {...props}
-  />
-))
-Menubar.displayName = MenubarPrimitive.Root.displayName
-
-const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
-
-const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
-))
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
-
-const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
-
-const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
->(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  )
-)
-MenubarContent.displayName = MenubarPrimitive.Content.displayName
-
-const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarItem.displayName = MenubarPrimitive.Item.displayName
-
-const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
-))
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
-
-const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
-))
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
-
-const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean
-  }
->(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName
-
-const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
-
-const MenubarShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-MenubarShortcut.displayname = "MenubarShortcut"
-
-export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
-}
diff --git a/components/ui/navigation-menu.tsx b/components/ui/navigation-menu.tsx
deleted file mode 100644
index 1419f56..0000000
--- a/components/ui/navigation-menu.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from "react"
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
-import { cva } from "class-variance-authority"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
-))
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
-
-const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
-
-const NavigationMenuItem = NavigationMenuPrimitive.Item
-
-const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
-)
-
-const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
-  >
-    {children}{" "}
-    <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
-))
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
-
-const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-      className
-    )}
-    {...props}
-  />
-))
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
-
-const NavigationMenuLink = NavigationMenuPrimitive.Link
-
-const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
->(({ className, ...props }, ref) => (
-  <div className={cn("absolute left-0 top-full flex justify-center")}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
-))
-NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName
-
-const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
->(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
-      className
-    )}
-    {...props}
-  >
-    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
-))
-NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName
-
-export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
-}
diff --git a/components/ui/preview-dialog.tsx b/components/ui/preview-dialog.tsx
deleted file mode 100644
index 0038162..0000000
--- a/components/ui/preview-dialog.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./dialog"
-import { Button } from "./button"
-import { Eye } from "lucide-react"
-
-interface PreviewDialogProps {
-  children: React.ReactNode
-  title?: string
-}
-
-export function PreviewDialog({ children, title = "预览效果" }: PreviewDialogProps) {
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <>
-      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
-        <Eye className="w-4 h-4 mr-2" />
-        预览
-      </Button>
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="max-w-[360px] p-0">
-          <DialogHeader className="p-4 border-b">
-            <DialogTitle>{title}</DialogTitle>
-          </DialogHeader>
-          <div className="relative bg-gray-50">
-            <div className="w-full overflow-hidden">{children}</div>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
deleted file mode 100644
index f4bc558..0000000
--- a/components/ui/resizable.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client"
-
-import { GripVertical } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className
-    )}
-    {...props}
-  />
-)
-
-const ResizablePanel = ResizablePrimitive.Panel
-
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
-}) => (
-  <ResizablePrimitive.PanelResizeHandle
-    className={cn(
-      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className
-    )}
-    {...props}
-  >
-    {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <GripVertical className="h-2.5 w-2.5" />
-      </div>
-    )}
-  </ResizablePrimitive.PanelResizeHandle>
-)
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
deleted file mode 100644
index 12d81c4..0000000
--- a/components/ui/separator.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@/lib/utils"
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }
diff --git a/components/ui/sheet.tsx b/components/ui/sheet.tsx
deleted file mode 100644
index a37f17b..0000000
--- a/components/ui/sheet.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Sheet = SheetPrimitive.Root
-
-const SheetTrigger = SheetPrimitive.Trigger
-
-const SheetClose = SheetPrimitive.Close
-
-const SheetPortal = SheetPrimitive.Portal
-
-const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-))
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
-
-const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  }
-)
-
-interface SheetContentProps
-  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
-
-const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
->(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      {...props}
-    >
-      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>
-))
-SheetContent.displayName = SheetPrimitive.Content.displayName
-
-const SheetHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-SheetHeader.displayName = "SheetHeader"
-
-const SheetFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-SheetFooter.displayName = "SheetFooter"
-
-const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
-    {...props}
-  />
-))
-SheetTitle.displayName = SheetPrimitive.Title.displayName
-
-const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-SheetDescription.displayName = SheetPrimitive.Description.displayName
-
-export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
deleted file mode 100644
index eeb2d7a..0000000
--- a/components/ui/sidebar.tsx
+++ /dev/null
@@ -1,763 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { VariantProps, cva } from "class-variance-authority"
-import { PanelLeft } from "lucide-react"
-
-import { useIsMobile } from "@/hooks/use-mobile"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Separator } from "@/components/ui/separator"
-import { Sheet, SheetContent } from "@/components/ui/sheet"
-import { Skeleton } from "@/components/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-
-const SIDEBAR_COOKIE_NAME = "sidebar:state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-const SIDEBAR_WIDTH = "16rem"
-const SIDEBAR_WIDTH_MOBILE = "18rem"
-const SIDEBAR_WIDTH_ICON = "3rem"
-const SIDEBAR_KEYBOARD_SHORTCUT = "b"
-
-type SidebarContext = {
-  state: "expanded" | "collapsed"
-  open: boolean
-  setOpen: (open: boolean) => void
-  openMobile: boolean
-  setOpenMobile: (open: boolean) => void
-  isMobile: boolean
-  toggleSidebar: () => void
-}
-
-const SidebarContext = React.createContext<SidebarContext | null>(null)
-
-function useSidebar() {
-  const context = React.useContext(SidebarContext)
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider.")
-  }
-
-  return context
-}
-
-const SidebarProvider = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    defaultOpen?: boolean
-    open?: boolean
-    onOpenChange?: (open: boolean) => void
-  }
->(
-  (
-    {
-      defaultOpen = true,
-      open: openProp,
-      onOpenChange: setOpenProp,
-      className,
-      style,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const isMobile = useIsMobile()
-    const [openMobile, setOpenMobile] = React.useState(false)
-
-    // This is the internal state of the sidebar.
-    // We use openProp and setOpenProp for control from outside the component.
-    const [_open, _setOpen] = React.useState(defaultOpen)
-    const open = openProp ?? _open
-    const setOpen = React.useCallback(
-      (value: boolean | ((value: boolean) => boolean)) => {
-        const openState = typeof value === "function" ? value(open) : value
-        if (setOpenProp) {
-          setOpenProp(openState)
-        } else {
-          _setOpen(openState)
-        }
-
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
-      },
-      [setOpenProp, open]
-    )
-
-    // Helper to toggle the sidebar.
-    const toggleSidebar = React.useCallback(() => {
-      return isMobile
-        ? setOpenMobile((open) => !open)
-        : setOpen((open) => !open)
-    }, [isMobile, setOpen, setOpenMobile])
-
-    // Adds a keyboard shortcut to toggle the sidebar.
-    React.useEffect(() => {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (
-          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-          (event.metaKey || event.ctrlKey)
-        ) {
-          event.preventDefault()
-          toggleSidebar()
-        }
-      }
-
-      window.addEventListener("keydown", handleKeyDown)
-      return () => window.removeEventListener("keydown", handleKeyDown)
-    }, [toggleSidebar])
-
-    // We add a state so that we can do data-state="expanded" or "collapsed".
-    // This makes it easier to style the sidebar with Tailwind classes.
-    const state = open ? "expanded" : "collapsed"
-
-    const contextValue = React.useMemo<SidebarContext>(
-      () => ({
-        state,
-        open,
-        setOpen,
-        isMobile,
-        openMobile,
-        setOpenMobile,
-        toggleSidebar,
-      }),
-      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
-    )
-
-    return (
-      <SidebarContext.Provider value={contextValue}>
-        <TooltipProvider delayDuration={0}>
-          <div
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH,
-                "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
-                ...style,
-              } as React.CSSProperties
-            }
-            className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
-              className
-            )}
-            ref={ref}
-            {...props}
-          >
-            {children}
-          </div>
-        </TooltipProvider>
-      </SidebarContext.Provider>
-    )
-  }
-)
-SidebarProvider.displayName = "SidebarProvider"
-
-const Sidebar = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    side?: "left" | "right"
-    variant?: "sidebar" | "floating" | "inset"
-    collapsible?: "offcanvas" | "icon" | "none"
-  }
->(
-  (
-    {
-      side = "left",
-      variant = "sidebar",
-      collapsible = "offcanvas",
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
-
-    if (collapsible === "none") {
-      return (
-        <div
-          className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
-            className
-          )}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </div>
-      )
-    }
-
-    if (isMobile) {
-      return (
-        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
-          <SheetContent
-            data-sidebar="sidebar"
-            data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
-            style={
-              {
-                "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
-              } as React.CSSProperties
-            }
-            side={side}
-          >
-            <div className="flex h-full w-full flex-col">{children}</div>
-          </SheetContent>
-        </Sheet>
-      )
-    }
-
-    return (
-      <div
-        ref={ref}
-        className="group peer hidden md:block text-sidebar-foreground"
-        data-state={state}
-        data-collapsible={state === "collapsed" ? collapsible : ""}
-        data-variant={variant}
-        data-side={side}
-      >
-        {/* This is what handles the sidebar gap on desktop */}
-        <div
-          className={cn(
-            "duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
-            "group-data-[collapsible=offcanvas]:w-0",
-            "group-data-[side=right]:rotate-180",
-            variant === "floating" || variant === "inset"
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
-          )}
-        />
-        <div
-          className={cn(
-            "duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
-            side === "left"
-              ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
-              : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
-            // Adjust the padding for floating and inset variants.
-            variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
-            className
-          )}
-          {...props}
-        >
-          <div
-            data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
-          >
-            {children}
-          </div>
-        </div>
-      </div>
-    )
-  }
-)
-Sidebar.displayName = "Sidebar"
-
-const SidebarTrigger = React.forwardRef<
-  React.ElementRef<typeof Button>,
-  React.ComponentProps<typeof Button>
->(({ className, onClick, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <Button
-      ref={ref}
-      data-sidebar="trigger"
-      variant="ghost"
-      size="icon"
-      className={cn("h-7 w-7", className)}
-      onClick={(event) => {
-        onClick?.(event)
-        toggleSidebar()
-      }}
-      {...props}
-    >
-      <PanelLeft />
-      <span className="sr-only">Toggle Sidebar</span>
-    </Button>
-  )
-})
-SidebarTrigger.displayName = "SidebarTrigger"
-
-const SidebarRail = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button">
->(({ className, ...props }, ref) => {
-  const { toggleSidebar } = useSidebar()
-
-  return (
-    <button
-      ref={ref}
-      data-sidebar="rail"
-      aria-label="Toggle Sidebar"
-      tabIndex={-1}
-      onClick={toggleSidebar}
-      title="Toggle Sidebar"
-      className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
-        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
-        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
-        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarRail.displayName = "SidebarRail"
-
-const SidebarInset = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"main">
->(({ className, ...props }, ref) => {
-  return (
-    <main
-      ref={ref}
-      className={cn(
-        "relative flex min-h-svh flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarInset.displayName = "SidebarInset"
-
-const SidebarInput = React.forwardRef<
-  React.ElementRef<typeof Input>,
-  React.ComponentProps<typeof Input>
->(({ className, ...props }, ref) => {
-  return (
-    <Input
-      ref={ref}
-      data-sidebar="input"
-      className={cn(
-        "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarInput.displayName = "SidebarInput"
-
-const SidebarHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="header"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarHeader.displayName = "SidebarHeader"
-
-const SidebarFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="footer"
-      className={cn("flex flex-col gap-2 p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarFooter.displayName = "SidebarFooter"
-
-const SidebarSeparator = React.forwardRef<
-  React.ElementRef<typeof Separator>,
-  React.ComponentProps<typeof Separator>
->(({ className, ...props }, ref) => {
-  return (
-    <Separator
-      ref={ref}
-      data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
-      {...props}
-    />
-  )
-})
-SidebarSeparator.displayName = "SidebarSeparator"
-
-const SidebarContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="content"
-      className={cn(
-        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarContent.displayName = "SidebarContent"
-
-const SidebarGroup = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      data-sidebar="group"
-      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
-      {...props}
-    />
-  )
-})
-SidebarGroup.displayName = "SidebarGroup"
-
-const SidebarGroupLabel = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "div"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-label"
-      className={cn(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarGroupLabel.displayName = "SidebarGroupLabel"
-
-const SidebarGroupAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & { asChild?: boolean }
->(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="group-action"
-      className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarGroupAction.displayName = "SidebarGroupAction"
-
-const SidebarGroupContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="group-content"
-    className={cn("w-full text-sm", className)}
-    {...props}
-  />
-))
-SidebarGroupContent.displayName = "SidebarGroupContent"
-
-const SidebarMenu = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu"
-    className={cn("flex w-full min-w-0 flex-col gap-1", className)}
-    {...props}
-  />
-))
-SidebarMenu.displayName = "SidebarMenu"
-
-const SidebarMenuItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    data-sidebar="menu-item"
-    className={cn("group/menu-item relative", className)}
-    {...props}
-  />
-))
-SidebarMenuItem.displayName = "SidebarMenuItem"
-
-const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-        outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
-      },
-      size: {
-        default: "h-8 text-sm",
-        sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-const SidebarMenuButton = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean
-    isActive?: boolean
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>
-  } & VariantProps<typeof sidebarMenuButtonVariants>
->(
-  (
-    {
-      asChild = false,
-      isActive = false,
-      variant = "default",
-      size = "default",
-      tooltip,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const Comp = asChild ? Slot : "button"
-    const { isMobile, state } = useSidebar()
-
-    const button = (
-      <Comp
-        ref={ref}
-        data-sidebar="menu-button"
-        data-size={size}
-        data-active={isActive}
-        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
-        {...props}
-      />
-    )
-
-    if (!tooltip) {
-      return button
-    }
-
-    if (typeof tooltip === "string") {
-      tooltip = {
-        children: tooltip,
-      }
-    }
-
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent
-          side="right"
-          align="center"
-          hidden={state !== "collapsed" || isMobile}
-          {...tooltip}
-        />
-      </Tooltip>
-    )
-  }
-)
-SidebarMenuButton.displayName = "SidebarMenuButton"
-
-const SidebarMenuAction = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<"button"> & {
-    asChild?: boolean
-    showOnHover?: boolean
-  }
->(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-action"
-      className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
-        // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
-        "peer-data-[size=sm]/menu-button:top-1",
-        "peer-data-[size=default]/menu-button:top-1.5",
-        "peer-data-[size=lg]/menu-button:top-2.5",
-        "group-data-[collapsible=icon]:hidden",
-        showOnHover &&
-          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarMenuAction.displayName = "SidebarMenuAction"
-
-const SidebarMenuBadge = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-sidebar="menu-badge"
-    className={cn(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
-      "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuBadge.displayName = "SidebarMenuBadge"
-
-const SidebarMenuSkeleton = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    showIcon?: boolean
-  }
->(({ className, showIcon = false, ...props }, ref) => {
-  // Random width between 50 to 90%.
-  const width = React.useMemo(() => {
-    return `${Math.floor(Math.random() * 40) + 50}%`
-  }, [])
-
-  return (
-    <div
-      ref={ref}
-      data-sidebar="menu-skeleton"
-      className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
-      {...props}
-    >
-      {showIcon && (
-        <Skeleton
-          className="size-4 rounded-md"
-          data-sidebar="menu-skeleton-icon"
-        />
-      )}
-      <Skeleton
-        className="h-4 flex-1 max-w-[--skeleton-width]"
-        data-sidebar="menu-skeleton-text"
-        style={
-          {
-            "--skeleton-width": width,
-          } as React.CSSProperties
-        }
-      />
-    </div>
-  )
-})
-SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton"
-
-const SidebarMenuSub = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
->(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    data-sidebar="menu-sub"
-    className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
-      "group-data-[collapsible=icon]:hidden",
-      className
-    )}
-    {...props}
-  />
-))
-SidebarMenuSub.displayName = "SidebarMenuSub"
-
-const SidebarMenuSubItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
->(({ ...props }, ref) => <li ref={ref} {...props} />)
-SidebarMenuSubItem.displayName = "SidebarMenuSubItem"
-
-const SidebarMenuSubButton = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentProps<"a"> & {
-    asChild?: boolean
-    size?: "sm" | "md"
-    isActive?: boolean
-  }
->(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : "a"
-
-  return (
-    <Comp
-      ref={ref}
-      data-sidebar="menu-sub-button"
-      data-size={size}
-      data-active={isActive}
-      className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
-        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
-        size === "sm" && "text-xs",
-        size === "md" && "text-sm",
-        "group-data-[collapsible=icon]:hidden",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-SidebarMenuSubButton.displayName = "SidebarMenuSubButton"
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-}
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
deleted file mode 100644
index 2fd8fde..0000000
--- a/components/ui/slider.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
-
-import { cn } from "@/lib/utils"
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn("relative flex w-full touch-none select-none items-center", className)}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
-
-export { Slider }
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
deleted file mode 100644
index 452f4d9..0000000
--- a/components/ui/sonner.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes"
-import { Toaster as Sonner } from "sonner"
-
-type ToasterProps = React.ComponentProps<typeof Sonner>
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Toaster }
diff --git a/components/ui/toast.ts b/components/ui/toast.ts
index 1d8ad36..c2046f1 100644
--- a/components/ui/toast.ts
+++ b/components/ui/toast.ts
@@ -3,7 +3,7 @@
 import * as React from "react"
 import * as ToastPrimitives from "@radix-ui/react-toast"
 import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+import { X } from 'lucide-react'
 
 import { cn } from "@/lib/utils"
 
@@ -111,3 +111,11 @@ export {
   ToastClose,
   ToastAction,
 }
+
+export function Toaster() {
+  return (
+    <ToastProvider>
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
index 171beb4..7763d6b 100644
--- a/components/ui/toaster.tsx
+++ b/components/ui/toaster.tsx
@@ -1,6 +1,5 @@
 "use client"
 
-import { useToast } from "@/hooks/use-toast"
 import {
   Toast,
   ToastClose,
@@ -9,6 +8,7 @@ import {
   ToastTitle,
   ToastViewport,
 } from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
 
 export function Toaster() {
   const { toasts } = useToast()
@@ -20,9 +20,7 @@ export function Toaster() {
           <Toast key={id} {...props}>
             <div className="grid gap-1">
               {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
+              {description && <ToastDescription>{description}</ToastDescription>}
             </div>
             {action}
             <ToastClose />
@@ -33,3 +31,5 @@ export function Toaster() {
     </ToastProvider>
   )
 }
+
+export default Toaster
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
deleted file mode 100644
index 1c876bb..0000000
--- a/components/ui/toggle-group.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: "default",
-  variant: "default",
-})
-
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-))
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
-
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext)
-
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  )
-})
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
-
-export { ToggleGroup, ToggleGroupItem }
diff --git a/components/ui/toggle.tsx b/components/ui/toggle.tsx
deleted file mode 100644
index c19bea3..0000000
--- a/components/ui/toggle.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-10 px-3 min-w-10",
-        sm: "h-9 px-2.5 min-w-9",
-        lg: "h-11 px-5 min-w-11",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-))
-
-Toggle.displayName = TogglePrimitive.Root.displayName
-
-export { Toggle, toggleVariants }
diff --git a/components/ui/use-mobile.tsx b/components/ui/use-mobile.tsx
deleted file mode 100644
index 2b0fe1d..0000000
--- a/components/ui/use-mobile.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}
diff --git a/components/user-portrait/filter-drawer.tsx b/components/user-portrait/filter-drawer.tsx
new file mode 100644
index 0000000..39c313a
--- /dev/null
+++ b/components/user-portrait/filter-drawer.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { X } from 'lucide-react'
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+
+export type FilterValues = {
+  tags: string[]
+  status: Array<"活跃" | "沉睡" | "已封禁">
+  rfm: [number, number]
+}
+
+interface Props {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  allTags: string[]
+  value: FilterValues
+  onApply: (v: FilterValues) => void
+}
+
+export default function FilterDrawer({ open, onOpenChange, allTags, value, onApply }: Props) {
+  const [local, setLocal] = useState<FilterValues>(value)
+
+  useEffect(() => setLocal(value), [value, open])
+
+  const toggleTag = (t: string, checked: boolean) => {
+    setLocal((prev) => ({
+      ...prev,
+      tags: checked ? Array.from(new Set([...prev.tags, t])) : prev.tags.filter((x) => x !== t),
+    }))
+  }
+
+  const toggleStatus = (s: "活跃" | "沉睡" | "已封禁", checked: boolean) => {
+    setLocal((prev) => ({
+      ...prev,
+      status: checked ? Array.from(new Set([...prev.status, s])) : prev.status.filter((x) => x !== s),
+    }))
+  }
+
+  const apply = () => {
+    onApply(local)
+    onOpenChange(false)
+  }
+
+  const reset = () => {
+    const init: FilterValues = { tags: [], status: [], rfm: [0, 100] }
+    setLocal(init)
+    onApply(init)
+  }
+
+  return (
+    <div
+      className={`fixed inset-0 z-50 ${open ? "" : "pointer-events-none"} aria-modal`}
+      role="dialog"
+      aria-hidden={!open}
+    >
+      <div
+        className={`absolute inset-0 bg-black/40 transition-opacity ${open ? "opacity-100" : "opacity-0"}`}
+        onClick={() => onOpenChange(false)}
+      />
+      <aside
+        className={`absolute right-0 top-0 h-full w-full max-w-md bg-white shadow-xl transition-transform duration-300
+        ${open ? "translate-x-0" : "translate-x-full"}`}
+        aria-label="筛选"
+      >
+        <div className="flex items-center justify-between p-4 border-b">
+          <h2 className="text-lg font-semibold">筛选</h2>
+          <Button variant="ghost" size="icon" onClick={() => onOpenChange(false)} aria-label="关闭筛选">
+            <X className="h-5 w-5" />
+          </Button>
+        </div>
+
+        <div className="p-4 space-y-6 overflow-y-auto h-[calc(100%-120px)]">
+          {/* RFM 区间 */}
+          <section>
+            <h3 className="text-sm font-medium mb-3">RFM 区间</h3>
+            <div className="grid grid-cols-2 gap-2 items-center">
+              <div>
+                <Label htmlFor="rfmMin" className="text-xs">最小值</Label>
+                <Input
+                  id="rfmMin"
+                  type="number"
+                  min={0}
+                  max={100}
+                  value={local.rfm[0]}
+                  onChange={(e) => {
+                    const v = Math.max(0, Math.min(100, Number(e.target.value) || 0))
+                    setLocal((p) => ({ ...p, rfm: [Math.min(v, p.rfm[1]), p.rfm[1]] }))
+                  }}
+                />
+              </div>
+              <div>
+                <Label htmlFor="rfmMax" className="text-xs">最大值</Label>
+                <Input
+                  id="rfmMax"
+                  type="number"
+                  min={0}
+                  max={100}
+                  value={local.rfm[1]}
+                  onChange={(e) => {
+                    const v = Math.max(0, Math.min(100, Number(e.target.value) || 100))
+                    setLocal((p) => ({ ...p, rfm: [p.rfm[0], Math.max(v, p.rfm[0])] }))
+                  }}
+                />
+              </div>
+            </div>
+          </section>
+
+          {/* 状态 */}
+          <section>
+            <h3 className="text-sm font-medium mb-3">状态</h3>
+            <div className="grid gap-2">
+              {(["活跃", "沉睡", "已封禁"] as const).map((s) => (
+                <label key={s} className="flex items-center gap-2 text-sm">
+                  <Checkbox checked={local.status.includes(s)} onCheckedChange={(ck) => toggleStatus(s, Boolean(ck))} />
+                  <span>{s}</span>
+                </label>
+              ))}
+            </div>
+          </section>
+
+          {/* 标签 */}
+          <section>
+            <h3 className="text-sm font-medium mb-3">标签</h3>
+            <div className="grid grid-cols-2 gap-2 max-h-56 overflow-auto">
+              {allTags.map((t) => (
+                <label key={t} className="flex items-center gap-2 text-sm">
+                  <Checkbox checked={local.tags.includes(t)} onCheckedChange={(ck) => toggleTag(t, Boolean(ck))} />
+                  <span className="truncate">{t}</span>
+                </label>
+              ))}
+              {!allTags.length && <div className="text-xs text-muted-foreground col-span-2">暂无标签数据</div>}
+            </div>
+          </section>
+        </div>
+
+        {/* Footer */}
+        <div className="p-4 border-t flex items-center justify-between gap-2">
+          <Button variant="outline" onClick={reset}>重置</Button>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>取消</Button>
+            <Button onClick={apply}>应用</Button>
+          </div>
+        </div>
+      </aside>
+    </div>
+  )
+}
diff --git a/components/user-portrait/mobile/interactions-list.tsx b/components/user-portrait/mobile/interactions-list.tsx
new file mode 100644
index 0000000..4d26c79
--- /dev/null
+++ b/components/user-portrait/mobile/interactions-list.tsx
@@ -0,0 +1,27 @@
+"use client"
+
+import { MessageSquareMore } from 'lucide-react'
+
+export type Interaction = { id: string; type: string; time: string; note?: string }
+
+export default function InteractionsList({ items }: { items: Interaction[] }) {
+  if (!items?.length) return <div className="text-sm text-muted-foreground">暂无互动记录</div>
+  return (
+    <ul className="divide-y">
+      {items.map((i) => (
+        <li key={i.id} className="py-2 flex items-start gap-3">
+          <div className="mt-0.5">
+            <MessageSquareMore className="h-4 w-4 text-slate-500" />
+          </div>
+          <div className="min-w-0">
+            <div className="text-sm font-medium">{i.type}</div>
+            {!!i.note && <div className="text-sm text-slate-600">{i.note}</div>}
+            <div className="text-xs text-muted-foreground">
+              {new Date(i.time).toLocaleString("zh-CN")}
+            </div>
+          </div>
+        </li>
+      ))}
+    </ul>
+  )
+}
diff --git a/components/user-portrait/mobile/metrics-rfm.tsx b/components/user-portrait/mobile/metrics-rfm.tsx
new file mode 100644
index 0000000..95d174b
--- /dev/null
+++ b/components/user-portrait/mobile/metrics-rfm.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import { Progress } from "@/components/ui/progress"
+
+export default function MetricsRFM({
+  recency,
+  frequency,
+  monetary,
+  rfmScore,
+}: {
+  recency: number
+  frequency: number
+  monetary: number
+  rfmScore: number
+}) {
+  return (
+    <div className="grid grid-cols-3 gap-3">
+      <Metric title="R" value={recency} hint="近期互动（天）" />
+      <Metric title="F" value={frequency} hint="频次（月）" />
+      <Metric title="M" value={monetary} hint="金额（¥）" />
+      <div className="col-span-3">
+        <div className="flex items-center justify-between">
+          <span className="text-sm font-medium">RFM 得分</span>
+          <span className="text-sm font-semibold">{rfmScore}</span>
+        </div>
+        <Progress value={Math.min(100, rfmScore)} className="h-2 mt-2" />
+      </div>
+    </div>
+  )
+}
+
+function Metric({ title, value, hint }: { title: string; value: number; hint: string }) {
+  return (
+    <div className="rounded-lg border bg-white p-3">
+      <div className="text-xs text-muted-foreground">{hint}</div>
+      <div className="text-xl font-semibold mt-1">{value}</div>
+      <div className="text-xs text-muted-foreground mt-0.5">{title}</div>
+    </div>
+  )
+}
diff --git a/components/user-portrait/mobile/profile-header.tsx b/components/user-portrait/mobile/profile-header.tsx
new file mode 100644
index 0000000..36d1ba8
--- /dev/null
+++ b/components/user-portrait/mobile/profile-header.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import Image from "next/image"
+import { Badge } from "@/components/ui/badge"
+
+export default function ProfileHeader({
+  name,
+  avatar,
+  email,
+  phone,
+  tags = [],
+}: {
+  name: string
+  avatar?: string
+  email: string
+  phone: string
+  tags?: string[]
+}) {
+  return (
+    <div className="flex items-center gap-3">
+      <div className="relative h-12 w-12 rounded-full overflow-hidden border bg-white">
+        <Image
+          src={avatar || "/placeholder.svg?height=48&width=48&query=user+avatar"}
+          alt={`${name} 的头像`}
+          fill
+          sizes="48px"
+          className="object-cover"
+        />
+      </div>
+      <div className="min-w-0">
+        <div className="font-medium truncate">{name}</div>
+        <div className="text-xs text-muted-foreground truncate">{email}</div>
+        <div className="text-xs text-muted-foreground">{phone}</div>
+        {!!tags.length && (
+          <div className="flex flex-wrap gap-1 mt-1">
+            {tags.slice(0, 3).map((t) => (
+              <Badge key={t} variant="secondary" className="text-[10px]">
+                {t}
+              </Badge>
+            ))}
+            {tags.length > 3 && <Badge variant="outline" className="text-[10px]">+{tags.length - 3}</Badge>}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/user-portrait/mobile/purchase-history.tsx b/components/user-portrait/mobile/purchase-history.tsx
new file mode 100644
index 0000000..4c9db55
--- /dev/null
+++ b/components/user-portrait/mobile/purchase-history.tsx
@@ -0,0 +1,22 @@
+"use client"
+
+export type Purchase = { id: string; amount: number; time: string; item: string }
+
+export default function PurchaseHistory({ items }: { items: Purchase[] }) {
+  if (!items?.length) return <div className="text-sm text-muted-foreground">暂无购买记录</div>
+  return (
+    <div className="grid gap-2">
+      {items.map((o) => (
+        <div key={o.id} className="flex items-center justify-between rounded-lg border p-3 bg-white">
+          <div className="min-w-0">
+            <div className="text-sm font-medium truncate">{o.item}</div>
+            <div className="text-xs text-muted-foreground">
+              {new Date(o.time).toLocaleDateString("zh-CN")}
+            </div>
+          </div>
+          <div className="text-sm font-semibold">¥{o.amount.toLocaleString("zh-CN")}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/components/user-portrait/mobile/section.tsx b/components/user-portrait/mobile/section.tsx
new file mode 100644
index 0000000..9d44872
--- /dev/null
+++ b/components/user-portrait/mobile/section.tsx
@@ -0,0 +1,42 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronDown } from 'lucide-react'
+import { cn } from "@/lib/utils"
+
+export default function Section({
+  title,
+  subtitle,
+  count,
+  defaultOpen = true,
+  children,
+}: {
+  title: string
+  subtitle?: string
+  count?: number
+  defaultOpen?: boolean
+  children: React.ReactNode
+}) {
+  const [open, setOpen] = useState(defaultOpen)
+  return (
+    <section className="rounded-2xl bg-white/60 backdrop-blur-md p-4 shadow-sm border">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="w-full flex items-center justify-between"
+        aria-expanded={open}
+      >
+        <div>
+          <h3 className="text-base font-semibold">{title}</h3>
+          {subtitle && <p className="text-xs text-muted-foreground mt-0.5">{subtitle}</p>}
+        </div>
+        <div className="flex items-center gap-2">
+          {typeof count === "number" && (
+            <span className="text-xs px-2 py-0.5 rounded-full bg-slate-100">{count}</span>
+          )}
+          <ChevronDown className={cn("h-4 w-4 transition-transform", open ? "rotate-180" : "")} />
+        </div>
+      </button>
+      {open && <div className="mt-3">{children}</div>}
+    </section>
+  )
+}
diff --git a/components/user-portrait/mobile/wechat-accounts.tsx b/components/user-portrait/mobile/wechat-accounts.tsx
new file mode 100644
index 0000000..4ad4c09
--- /dev/null
+++ b/components/user-portrait/mobile/wechat-accounts.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import Image from "next/image"
+
+export type Wx = { id: string; nickname: string; avatar?: string }
+
+export default function WechatAccounts({ accounts }: { accounts: Wx[] }) {
+  if (!accounts?.length) return <div className="text-sm text-muted-foreground">未绑定微信账号</div>
+  return (
+    <div className="grid grid-cols-2 gap-3">
+      {accounts.map((a) => (
+        <div key={a.id} className="flex items-center gap-3 rounded-lg border p-3 bg-white">
+          <div className="relative h-10 w-10 rounded-full overflow-hidden border">
+            <Image
+              src={a.avatar || "/placeholder.svg?height=40&width=40&query=weChat+avatar"}
+              alt={a.nickname}
+              fill
+              sizes="40px"
+              className="object-cover"
+            />
+          </div>
+          <div className="min-w-0">
+            <div className="text-sm font-medium truncate">{a.nickname}</div>
+            <div className="text-xs text-muted-foreground">已同步</div>
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/hooks/use-mobile.tsx b/hooks/use-mobile.tsx
deleted file mode 100644
index 2b0fe1d..0000000
--- a/hooks/use-mobile.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from "react"
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
-
-  return !!isMobile
-}
diff --git a/hooks/use-toast.ts b/hooks/use-toast.ts
deleted file mode 100644
index 02e111d..0000000
--- a/hooks/use-toast.ts
+++ /dev/null
@@ -1,194 +0,0 @@
-"use client"
-
-// Inspired by react-hot-toast library
-import * as React from "react"
-
-import type {
-  ToastActionElement,
-  ToastProps,
-} from "@/components/ui/toast"
-
-const TOAST_LIMIT = 1
-const TOAST_REMOVE_DELAY = 1000000
-
-type ToasterToast = ToastProps & {
-  id: string
-  title?: React.ReactNode
-  description?: React.ReactNode
-  action?: ToastActionElement
-}
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const
-
-let count = 0
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER
-  return count.toString()
-}
-
-type ActionType = typeof actionTypes
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"]
-      toast: ToasterToast
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"]
-      toast: Partial<ToasterToast>
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"]
-      toastId?: ToasterToast["id"]
-    }
-
-interface State {
-  toasts: ToasterToast[]
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId)
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    })
-  }, TOAST_REMOVE_DELAY)
-
-  toastTimeouts.set(toastId, timeout)
-}
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      }
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === action.toast.id ? { ...t, ...action.toast } : t
-        ),
-      }
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId)
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id)
-        })
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      }
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        }
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      }
-  }
-}
-
-const listeners: Array<(state: State) => void> = []
-
-let memoryState: State = { toasts: [] }
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action)
-  listeners.forEach((listener) => {
-    listener(memoryState)
-  })
-}
-
-type Toast = Omit<ToasterToast, "id">
-
-function toast({ ...props }: Toast) {
-  const id = genId()
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    })
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss()
-      },
-    },
-  })
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  }
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState)
-
-  React.useEffect(() => {
-    listeners.push(setState)
-    return () => {
-      const index = listeners.indexOf(setState)
-      if (index > -1) {
-        listeners.splice(index, 1)
-      }
-    }
-  }, [state])
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  }
-}
-
-export { useToast, toast }
diff --git a/lib/mindsdb-connector.ts b/lib/mindsdb-connector.ts
index 4d93ea9..4678578 100644
--- a/lib/mindsdb-connector.ts
+++ b/lib/mindsdb-connector.ts
@@ -1,6 +1,4 @@
-// MindsDB连接器 - 实现AI增强的数据查询和分析
-import { Client } from "mindsdb-js-sdk"
-
+// MindsDB连接器 - 模拟实现，避免第三方包兼容性问题
 export interface MindsDBConfig {
   host: string
   port: number
@@ -31,26 +29,74 @@ export interface VersionInfo {
   author: string
 }
 
+// 模拟数据
+const mockUsers = [
+  {
+    id: "user_001",
+    type: "user",
+    username: "张三",
+    phone: "13800138001",
+    email: "zhangsan@example.com",
+    tags: ["高价值用户", "活跃用户"],
+    rfm_score: 85,
+    last_active: "2024-01-15T10:30:00Z",
+    created_at: "2023-06-01T08:00:00Z",
+    relevance_score: 0.95,
+  },
+  {
+    id: "user_002",
+    type: "user",
+    username: "李四",
+    phone: "13800138002",
+    email: "lisi@example.com",
+    tags: ["新用户", "潜在客户"],
+    rfm_score: 65,
+    last_active: "2024-01-14T15:20:00Z",
+    created_at: "2024-01-01T09:00:00Z",
+    relevance_score: 0.88,
+  },
+]
+
+const mockTrafficKeywords = [
+  {
+    id: "keyword_001",
+    type: "traffic",
+    keyword: "数据分析",
+    category: "技术",
+    search_volume: 12000,
+    competition: "高",
+    cpc: 3.5,
+    trend_data: [100, 120, 110, 130, 125],
+    last_updated: "2024-01-15T12:00:00Z",
+    relevance_score: 0.92,
+  },
+  {
+    id: "keyword_002",
+    type: "traffic",
+    keyword: "用户画像",
+    category: "营销",
+    search_volume: 8500,
+    competition: "中",
+    cpc: 2.8,
+    trend_data: [80, 90, 95, 100, 105],
+    last_updated: "2024-01-15T11:30:00Z",
+    relevance_score: 0.87,
+  },
+]
+
 export class MindsDBConnector {
-  private client: Client
   private connected = false
   private cache: Map<string, any> = new Map()
 
-  constructor(private config: MindsDBConfig) {
-    this.client = new Client({
-      host: config.host,
-      port: config.port,
-      username: config.username,
-      password: config.password,
-    })
-  }
+  constructor(private config: MindsDBConfig) {}
 
-  // 连接到MindsDB
+  // 连接到MindsDB（模拟）
   async connect(): Promise<void> {
     try {
-      await this.client.connect()
+      // 模拟连接延迟
+      await new Promise((resolve) => setTimeout(resolve, 100))
       this.connected = true
-      console.log("MindsDB连接成功")
+      console.log("MindsDB连接成功（模拟）")
     } catch (error) {
       console.error("MindsDB连接失败:", error)
       throw error
@@ -60,12 +106,11 @@ export class MindsDBConnector {
   // 断开连接
   async disconnect(): Promise<void> {
     if (this.connected) {
-      await this.client.disconnect()
       this.connected = false
     }
   }
 
-  // AI增强查询 - 使用自然语言查询数据
+  // AI增强查询（模拟）
   async aiQuery(request: AIQueryRequest): Promise<any> {
     if (!this.connected) {
       await this.connect()
@@ -79,17 +124,30 @@ export class MindsDBConnector {
     }
 
     try {
-      // 使用MindsDB的AI模型进行查询
-      const query = `
-        SELECT * FROM mindsdb.${request.model || "gpt4"} 
-        WHERE text = '${request.query}'
-      `
-
-      const result = await this.client.query(query)
+      // 模拟AI查询结果
+      const result = {
+        response: `基于查询"${request.query}"的AI分析结果`,
+        confidence: 0.85,
+        suggestions: [`${request.query}相关建议1`, `${request.query}相关建议2`, `${request.query}相关建议3`],
+        insights: [
+          {
+            title: "数据洞察1",
+            description: `关于"${request.query}"的重要发现`,
+            confidence: 0.9,
+          },
+          {
+            title: "数据洞察2",
+            description: `"${request.query}"的趋势分析`,
+            confidence: 0.8,
+          },
+        ],
+        intent: this.analyzeIntent(request.query),
+        filters: this.generateFilters(request.query),
+      }
 
       // 缓存结果
       if (request.useCache) {
-        this.cache.set(cacheKey, result, 300000) // 5分钟缓存
+        this.cache.set(cacheKey, result)
       }
 
       return result
@@ -99,7 +157,7 @@ export class MindsDBConnector {
     }
   }
 
-  // 智能搜索 - 支持用户数据和流量关键词的快速搜索
+  // 智能搜索（模拟）
   async intelligentSearch(request: SearchRequest): Promise<any> {
     if (!this.connected) {
       await this.connect()
@@ -113,179 +171,142 @@ export class MindsDBConnector {
     }
 
     try {
-      let searchQuery = ""
+      let results: any[] = []
 
       switch (request.type) {
         case "user":
-          searchQuery = this.buildUserSearchQuery(request)
+          results = this.searchUsers(request)
           break
         case "traffic":
-          searchQuery = this.buildTrafficSearchQuery(request)
+          results = this.searchTraffic(request)
           break
         case "all":
-          searchQuery = this.buildUnifiedSearchQuery(request)
+          results = [...this.searchUsers(request), ...this.searchTraffic(request)]
           break
       }
 
-      const result = await this.client.query(searchQuery)
+      // 应用过滤器
+      if (request.filters) {
+        results = this.applyFilters(results, request.filters)
+      }
+
+      // 分页
+      const start = request.offset || 0
+      const end = start + (request.limit || 50)
+      results = results.slice(start, end)
 
       // 缓存结果
-      this.cache.set(cacheKey, result, 60000) // 1分钟缓存
+      this.cache.set(cacheKey, results)
 
-      return result
+      return results
     } catch (error) {
       console.error("智能搜索失败:", error)
       throw error
     }
   }
 
-  // 构建用户搜索查询
-  private buildUserSearchQuery(request: SearchRequest): string {
-    const { keyword, filters, limit = 100, offset = 0 } = request
+  // 搜索用户
+  private searchUsers(request: SearchRequest): any[] {
+    const keyword = request.keyword.toLowerCase()
+    return mockUsers.filter(
+      (user) =>
+        user.username.toLowerCase().includes(keyword) ||
+        user.phone.includes(keyword) ||
+        user.email.toLowerCase().includes(keyword) ||
+        user.tags.some((tag) => tag.toLowerCase().includes(keyword)),
+    )
+  }
 
-    let query = `
-      SELECT 
-        u.user_id,
-        u.username,
-        u.phone,
-        u.email,
-        u.tags,
-        u.rfm_score,
-        u.last_active,
-        u.created_at,
-        MATCH(u.username, u.phone, u.email, u.tags) AGAINST('${keyword}' IN NATURAL LANGUAGE MODE) as relevance_score
-      FROM users u
-      WHERE MATCH(u.username, u.phone, u.email, u.tags) AGAINST('${keyword}' IN NATURAL LANGUAGE MODE)
-    `
+  // 搜索流量关键词
+  private searchTraffic(request: SearchRequest): any[] {
+    const keyword = request.keyword.toLowerCase()
+    return mockTrafficKeywords.filter(
+      (traffic) => traffic.keyword.toLowerCase().includes(keyword) || traffic.category.toLowerCase().includes(keyword),
+    )
+  }
 
-    // 添加过滤条件
-    if (filters) {
-      Object.entries(filters).forEach(([key, value]) => {
-        query += ` AND u.${key} = '${value}'`
+  // 应用过滤器
+  private applyFilters(results: any[], filters: Record<string, any>): any[] {
+    return results.filter((item) => {
+      return Object.entries(filters).every(([key, value]) => {
+        if (typeof value === "object" && value.$gte) {
+          return item[key] >= value.$gte
+        }
+        return item[key] === value
       })
+    })
+  }
+
+  // 分析查询意图
+  private analyzeIntent(query: string): string {
+    const lowerQuery = query.toLowerCase()
+
+    if (lowerQuery.includes("高价值") || lowerQuery.includes("vip")) {
+      return "high_value_users"
+    }
+    if (lowerQuery.includes("最近") || lowerQuery.includes("活跃")) {
+      return "recent_activity"
+    }
+    if (lowerQuery.includes("流量") || lowerQuery.includes("关键词")) {
+      return "traffic_analysis"
     }
 
-    query += ` ORDER BY relevance_score DESC, u.last_active DESC`
-    query += ` LIMIT ${limit} OFFSET ${offset}`
-
-    return query
+    return "general_search"
   }
 
-  // 构建流量关键词搜索查询
-  private buildTrafficSearchQuery(request: SearchRequest): string {
-    const { keyword, filters, limit = 100, offset = 0 } = request
+  // 生成过滤器
+  private generateFilters(query: string): Record<string, any> {
+    const filters: Record<string, any> = {}
+    const lowerQuery = query.toLowerCase()
 
-    let query = `
-      SELECT 
-        t.keyword_id,
-        t.keyword,
-        t.category,
-        t.search_volume,
-        t.competition,
-        t.cpc,
-        t.trend_data,
-        t.last_updated,
-        MATCH(t.keyword, t.category) AGAINST('${keyword}' IN NATURAL LANGUAGE MODE) as relevance_score
-      FROM traffic_keywords t
-      WHERE MATCH(t.keyword, t.category) AGAINST('${keyword}' IN NATURAL LANGUAGE MODE)
-    `
-
-    // 添加过滤条件
-    if (filters) {
-      Object.entries(filters).forEach(([key, value]) => {
-        query += ` AND t.${key} = '${value}'`
-      })
+    if (lowerQuery.includes("高价值")) {
+      filters.rfm_score = { $gte: 80 }
+    }
+    if (lowerQuery.includes("最近")) {
+      filters.last_active = { $gte: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000) }
     }
 
-    query += ` ORDER BY relevance_score DESC, t.search_volume DESC`
-    query += ` LIMIT ${limit} OFFSET ${offset}`
-
-    return query
+    return filters
   }
 
-  // 构建统一搜索查询
-  private buildUnifiedSearchQuery(request: SearchRequest): string {
-    const { keyword, limit = 100, offset = 0 } = request
-
-    return `
-      (
-        SELECT 
-          'user' as type,
-          user_id as id,
-          username as title,
-          CONCAT(phone, ' | ', email) as description,
-          tags,
-          last_active as updated_at,
-          MATCH(username, phone, email, tags) AGAINST('${keyword}' IN NATURAL LANGUAGE MODE) as relevance_score
-        FROM users
-        WHERE MATCH(username, phone, email, tags) AGAINST('${keyword}' IN NATURAL LANGUAGE MODE)
-      )
-      UNION ALL
-      (
-        SELECT 
-          'traffic' as type,
-          keyword_id as id,
-          keyword as title,
-          CONCAT('搜索量: ', search_volume, ' | 竞争度: ', competition) as description,
-          category as tags,
-          last_updated as updated_at,
-          MATCH(keyword, category) AGAINST('${keyword}' IN NATURAL LANGUAGE MODE) as relevance_score
-        FROM traffic_keywords
-        WHERE MATCH(keyword, category) AGAINST('${keyword}' IN NATURAL LANGUAGE MODE)
-      )
-      ORDER BY relevance_score DESC
-      LIMIT ${limit} OFFSET ${offset}
-    `
-  }
-
-  // 用户数据分析 - 使用AI进行用户行为分析
+  // 用户数据分析（模拟）
   async analyzeUserBehavior(userId: string): Promise<any> {
     if (!this.connected) {
       await this.connect()
     }
 
     try {
-      const query = `
-        SELECT 
-          prediction,
-          confidence,
-          explanation
-        FROM mindsdb.user_behavior_predictor
-        WHERE user_id = '${userId}'
-      `
-
-      return await this.client.query(query)
+      return {
+        prediction: "高价值用户",
+        confidence: 0.85,
+        explanation: `用户${userId}具有高活跃度和消费潜力`,
+      }
     } catch (error) {
       console.error("用户行为分析失败:", error)
       throw error
     }
   }
 
-  // 流量预测 - 使用AI预测流量趋势
+  // 流量预测（模拟）
   async predictTrafficTrends(keyword: string, timeframe = "30d"): Promise<any> {
     if (!this.connected) {
       await this.connect()
     }
 
     try {
-      const query = `
-        SELECT 
-          predicted_volume,
-          trend_direction,
-          confidence_interval,
-          factors
-        FROM mindsdb.traffic_predictor
-        WHERE keyword = '${keyword}' AND timeframe = '${timeframe}'
-      `
-
-      return await this.client.query(query)
+      return {
+        predicted_volume: Math.floor(Math.random() * 10000) + 5000,
+        trend_direction: Math.random() > 0.5 ? "上升" : "下降",
+        confidence_interval: [0.7, 0.9],
+        factors: ["季节性变化", "行业趋势", "竞争环境"],
+      }
     } catch (error) {
       console.error("流量预测失败:", error)
       throw error
     }
   }
 
-  // 版本管理 - 创建数据版本
+  // 版本管理（模拟）
   async createVersion(data: any, author: string, changes: string[]): Promise<VersionInfo> {
     const version = `v${Date.now()}`
     const timestamp = new Date().toISOString()
@@ -298,13 +319,8 @@ export class MindsDBConnector {
     }
 
     try {
-      // 存储版本信息
-      const query = `
-        INSERT INTO data_versions (version, timestamp, data_snapshot, changes, author)
-        VALUES ('${version}', '${timestamp}', '${JSON.stringify(data)}', '${JSON.stringify(changes)}', '${author}')
-      `
-
-      await this.client.query(query)
+      // 模拟存储版本信息
+      console.log("创建版本:", versionInfo)
       return versionInfo
     } catch (error) {
       console.error("创建版本失败:", error)
@@ -312,69 +328,57 @@ export class MindsDBConnector {
     }
   }
 
-  // 获取版本历史
+  // 获取版本历史（模拟）
   async getVersionHistory(limit = 50): Promise<VersionInfo[]> {
     if (!this.connected) {
       await this.connect()
     }
 
     try {
-      const query = `
-        SELECT version, timestamp, changes, author
-        FROM data_versions
-        ORDER BY timestamp DESC
-        LIMIT ${limit}
-      `
-
-      const result = await this.client.query(query)
-      return result.rows || []
+      // 模拟版本历史数据
+      return [
+        {
+          version: "v1704067200000",
+          timestamp: "2024-01-01T00:00:00Z",
+          changes: ["初始版本", "基础功能实现"],
+          author: "系统管理员",
+        },
+        {
+          version: "v1704153600000",
+          timestamp: "2024-01-02T00:00:00Z",
+          changes: ["添加用户搜索功能", "优化界面显示"],
+          author: "开发团队",
+        },
+      ]
     } catch (error) {
       console.error("获取版本历史失败:", error)
       throw error
     }
   }
 
-  // 恢复到指定版本
+  // 恢复到指定版本（模拟）
   async restoreVersion(version: string): Promise<any> {
     if (!this.connected) {
       await this.connect()
     }
 
     try {
-      const query = `
-        SELECT data_snapshot
-        FROM data_versions
-        WHERE version = '${version}'
-      `
-
-      const result = await this.client.query(query)
-      if (result.rows && result.rows.length > 0) {
-        return JSON.parse(result.rows[0].data_snapshot)
-      }
-
-      throw new Error(`版本 ${version} 不存在`)
+      console.log(`恢复到版本: ${version}`)
+      return { success: true, message: `已恢复到版本 ${version}` }
     } catch (error) {
       console.error("恢复版本失败:", error)
       throw error
     }
   }
 
-  // 实时数据同步
+  // 实时数据同步（模拟）
   async syncRealTimeData(source: string, data: any): Promise<void> {
     if (!this.connected) {
       await this.connect()
     }
 
     try {
-      const query = `
-        INSERT INTO real_time_data (source, data, timestamp)
-        VALUES ('${source}', '${JSON.stringify(data)}', NOW())
-        ON DUPLICATE KEY UPDATE
-        data = '${JSON.stringify(data)}',
-        timestamp = NOW()
-      `
-
-      await this.client.query(query)
+      console.log(`同步数据源 ${source}:`, data)
     } catch (error) {
       console.error("实时数据同步失败:", error)
       throw error
@@ -386,27 +390,18 @@ export class MindsDBConnector {
     this.cache.clear()
   }
 
-  // 获取系统状态
+  // 获取系统状态（模拟）
   async getSystemStatus(): Promise<any> {
     if (!this.connected) {
       await this.connect()
     }
 
     try {
-      const queries = [
-        "SELECT COUNT(*) as user_count FROM users",
-        "SELECT COUNT(*) as keyword_count FROM traffic_keywords",
-        "SELECT COUNT(*) as version_count FROM data_versions",
-        "SELECT AVG(response_time) as avg_response_time FROM query_logs WHERE created_at > DATE_SUB(NOW(), INTERVAL 1 HOUR)",
-      ]
-
-      const results = await Promise.all(queries.map((query) => this.client.query(query)))
-
       return {
-        userCount: results[0].rows[0].user_count,
-        keywordCount: results[1].rows[0].keyword_count,
-        versionCount: results[2].rows[0].version_count,
-        avgResponseTime: results[3].rows[0].avg_response_time || 0,
+        userCount: 4000000000, // 40亿用户
+        keywordCount: 150000,
+        versionCount: 25,
+        avgResponseTime: 120,
         cacheSize: this.cache.size,
         connected: this.connected,
       }
@@ -426,7 +421,15 @@ export function getMindsDBConnector(config?: MindsDBConfig): MindsDBConnector {
   }
 
   if (!mindsDBInstance) {
-    throw new Error("MindsDB连接器未初始化，请提供配置信息")
+    // 提供默认配置
+    const defaultConfig: MindsDBConfig = {
+      host: "localhost",
+      port: 47334,
+      username: "mindsdb",
+      password: "",
+      database: "mindsdb",
+    }
+    mindsDBInstance = new MindsDBConnector(defaultConfig)
   }
 
   return mindsDBInstance
diff --git a/lib/mock-users.ts b/lib/mock-users.ts
new file mode 100644
index 0000000..10a7989
--- /dev/null
+++ b/lib/mock-users.ts
@@ -0,0 +1,206 @@
+export type Status = "活跃" | "沉睡" | "已封禁"
+
+export type UserBase = {
+  id: string
+  name: string
+  phone: string
+  email: string
+  tags: string[]
+  rfmScore: number
+  lastActivity: string
+  status: Status
+}
+
+export type UserDetail = UserBase & {
+  avatar?: string
+  company?: string
+  position?: string
+  recency: number
+  frequency: number
+  monetary: number
+  interactions: { id: string; type: string; time: string; note?: string }[]
+  purchaseHistory: { id: string; amount: number; time: string; item: string }[]
+  wechatAccounts: { id: string; nickname: string; avatar?: string }[]
+}
+
+/* helpers */
+const NOW = Date.now()
+const rand = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min
+const maskPhone = (p: string) => p.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")
+const pick = <T,>(arr: T[]) => arr[rand(0, arr.length - 1)]
+
+const TAGS = [
+  "高价值用户", "活跃用户", "潜在客户", "价格敏感", "科技爱好者",
+  "内容创作者", "一线城市", "二线城市", "iPhone", "Android",
+  "社群成员", "低活跃", "沉睡风险", "新用户", "忠诚用户",
+]
+
+const COMPANIES = ["合星科技", "云杉数智", "万像互动", "星远数科", "数研云", "青瓦科技"]
+const POSITIONS = ["产品经理", "运营经理", "市场总监", "技术负责人", "销售", "数据分析师"]
+
+const AVATARS = [
+  "/user-avatar-zhangsan.png",
+  "/user-avatar-lisi.png",
+  "/wechat-avatar-1.png",
+  "/wechat-avatar-2.png",
+  "/wechat-avatar-3.png",
+]
+
+/* seed users */
+const baseNames = [
+  "王磊","刘婷","张三","李四","赵六","钱七","周敏","孙悦","吴迪","郑航",
+  "冯晨","褚野","卫国","蒋楠","沈静","韩睿","唐奕","曹越","彭博","鲁洋",
+  "韦东","昌华","顾诚","孟辉","尹雪","谭清","严杰","霍宇","龚一","程远",
+]
+
+const USERS: UserDetail[] = baseNames.slice(0, 24).map((name, idx) => {
+  const n = idx + 1
+  const rawPhone = `1${rand(3,9)}${rand(0,9)}${rand(0,9)}${rand(10000000, 99999999)}`
+  const email = `${pinyinLike(name)}${n}@example.com`.toLowerCase()
+  const tagCount = rand(2, 5)
+  const tags = Array.from(new Set(Array.from({ length: tagCount }, () => pick(TAGS))))
+  const status: Status = ["活跃","活跃","活跃","沉睡","已封禁"][rand(0,4)]
+  const rfm = rand(45, 95)
+  const lastActivity = new Date(NOW - rand(0, 7) * 86400_000 - rand(0, 12) * 3600_000).toISOString()
+
+  const interactions = Array.from({ length: rand(1, 4) }).map((_, i) => ({
+    id: `i_${n}_${i}`,
+    type: pick(["咨询", "浏览", "下载白皮书", "提交表单", "聊天"]),
+    time: new Date(NOW - rand(0, 14) * 86400_000 - rand(0, 20) * 3600_000).toISOString(),
+    note: pick(["", "询价", "对比竞品", "需要发票", "待回访"]),
+  }))
+
+  const purchaseHistory = rand(0, 1)
+    ? [{ id: `o_${n}_1`, amount: rand(299, 9999), time: new Date(NOW - rand(0, 30) * 86400_000).toISOString(), item: pick(["标准版SaaS","高级版SaaS","增值模块"]) }]
+    : []
+
+  const wechatAccounts = Array.from({ length: rand(1, 2) }).map((_, i) => ({
+    id: `wx_${n}_${i}`,
+    nickname: `${name}-微信${i+1}`,
+    avatar: pick(AVATARS),
+  }))
+
+  return {
+    id: `user_${1000 + n}`,
+    name,
+    phone: maskPhone(rawPhone),
+    email,
+    tags,
+    rfmScore: rfm,
+    lastActivity,
+    status,
+    avatar: pick(AVATARS),
+    company: pick(COMPANIES),
+    position: pick(POSITIONS),
+    recency: rand(1, 10),
+    frequency: rand(1, 30),
+    monetary: rand(0, 20000),
+    interactions,
+    purchaseHistory,
+    wechatAccounts,
+  }
+})
+
+function pinyinLike(name: string) {
+  // super simple fake pinyin-ish
+  const map: Record<string, string> = {
+    "王":"wang","张":"zhang","李":"li","刘":"liu","赵":"zhao","钱":"qian","孙":"sun","周":"zhou",
+    "吴":"wu","郑":"zheng","冯":"feng","褚":"chu","卫":"wei","蒋":"jiang","沈":"shen","韩":"han",
+    "唐":"tang","曹":"cao","彭":"peng","鲁":"lu","韦":"wei","昌":"chang","顾":"gu","孟":"meng",
+    "尹":"yin","谭":"tan","严":"yan","霍":"huo","龚":"gong","程":"cheng",
+  }
+  const first = map[name[0]] || "user"
+  const rest = "abcxyz"
+  return `${first}${rest[Math.floor(Math.random()*rest.length)]}${rest[Math.floor(Math.random()*rest.length)]}`
+}
+
+/* public APIs */
+export type FilterOptions = {
+  q?: string
+  tags?: string[]
+  status?: Status[]
+  rfmMin?: number
+  rfmMax?: number
+  page?: number
+  pageSize?: number
+}
+
+export function getUsers(): UserBase[] {
+  return USERS.map(({ interactions, purchaseHistory, wechatAccounts, recency, frequency, monetary, company, position, avatar, ...u }) => u)
+}
+
+export function getUserDetail(id: string): UserDetail | null {
+  return USERS.find((u) => u.id === id) ?? null
+}
+
+export function getDistinctTags(): string[] {
+  const s = new Set<string>()
+  USERS.forEach((u) => u.tags.forEach((t) => s.add(t)))
+  return Array.from(s)
+}
+
+export function filterUsers(opts: FilterOptions) {
+  const {
+    q = "",
+    tags = [],
+    status = [],
+    rfmMin = 0,
+    rfmMax = 100,
+    page = 1,
+    pageSize = 20,
+  } = opts
+
+  let list = getUsers()
+
+  if (q) {
+    const ql = q.toLowerCase()
+    list = list.filter(
+      (u) =>
+        u.name.toLowerCase().includes(ql) ||
+        u.phone.includes(q) ||
+        u.email.toLowerCase().includes(ql) ||
+        u.tags.some((t) => t.toLowerCase().includes(ql)),
+    )
+  }
+
+  if (tags.length) {
+    list = list.filter((u) => tags.some((t) => u.tags.includes(t)))
+  }
+
+  if (status.length) {
+    list = list.filter((u) => status.includes(u.status))
+  }
+
+  list = list.filter((u) => u.rfmScore >= rfmMin && u.rfmScore <= rfmMax)
+
+  const total = list.length
+  const start = (page - 1) * pageSize
+  const end = start + pageSize
+  const items = list.slice(start, end)
+  return { items, total, page, pageSize }
+}
+
+export function addUser(payload: { name: string; phone: string; email: string; tags?: string[] }): UserDetail {
+  const n = USERS.length + 1000
+  const u: UserDetail = {
+    id: `user_${n}`,
+    name: payload.name,
+    phone: maskPhone(payload.phone),
+    email: payload.email,
+    tags: payload.tags ?? [],
+    rfmScore: 60 + (n % 40),
+    lastActivity: new Date().toISOString(),
+    status: "活跃",
+    avatar: pick(AVATARS),
+    company: pick(COMPANIES),
+    position: pick(POSITIONS),
+    recency: rand(1, 5),
+    frequency: rand(1, 10),
+    monetary: rand(0, 5000),
+    interactions: [],
+    purchaseHistory: [],
+    wechatAccounts: [],
+  }
+  USERS.unshift(u)
+  return u
+}
diff --git a/lib/text-sanitize.ts b/lib/text-sanitize.ts
new file mode 100644
index 0000000..5df1c7c
--- /dev/null
+++ b/lib/text-sanitize.ts
@@ -0,0 +1,22 @@
+/**
+ * 文本清洗工具：去除常见的 JSON 残留与转义符，避免卡片描述中出现 \\n、"]]} 等。
+ * - 保持幂等：多次调用不会破坏原文本语义
+ * - 安全：不做危险字符拼接或 HTML 注入
+ */
+export function sanitizeText(input?: string): string {
+  if (!input) return ""
+  let s = String(input)
+
+  // 1) 常见序列清洗
+  s = s.replace(/\\n/g, " ") // 去除转义换行
+  s = s.replace(/\s+/g, " ").trim()
+
+  // 2) 去掉串首尾常见 JSON 残留符号（宽松处理）
+  s = s.replace(/^[\s\["'{(\\]+/g, "")
+  s = s.replace(/["'\]\})\\\s]+$/g, "")
+
+  // 3) 反转义常见字符
+  s = s.replace(/\\"/g, '"').replace(/\\'/g, "'")
+
+  return s.trim()
+}
diff --git a/package.json b/package.json
index a90ba8b..5bf62ff 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@ai-sdk/openai": "latest",
     "@ant-design/plots": "latest",
     "@radix-ui/react-accordion": "latest",
     "@radix-ui/react-avatar": "latest",
@@ -32,6 +33,7 @@
     "@radix-ui/react-tooltip": "latest",
     "@tanstack/react-table": "latest",
     "@tanstack/react-virtual": "latest",
+    "ai": "latest",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "latest",
@@ -40,7 +42,6 @@
     "dom-to-image": "latest",
     "html-to-image": "latest",
     "lucide-react": "^0.454.0",
-    "mindsdb-js-sdk": "latest",
     "next": "14.2.16",
     "next-themes": "latest",
     "react": "^18",
@@ -50,7 +51,8 @@
     "recharts": "latest",
     "regenerator-runtime": "latest",
     "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zod": "latest"
   },
   "devDependencies": {
     "@types/node": "^22",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 459dfa7..489bb26 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@ai-sdk/openai':
+        specifier: latest
+        version: 2.0.5(zod@4.0.15)
       '@ant-design/plots':
         specifier: latest
-        version: 2.6.1(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+        version: 2.6.3(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@radix-ui/react-accordion':
         specifier: latest
         version: 1.2.11(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -77,6 +80,9 @@ importers:
       '@tanstack/react-virtual':
         specifier: latest
         version: 3.13.12(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      ai:
+        specifier: latest
+        version: 5.0.8(zod@4.0.15)
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -101,12 +107,9 @@ importers:
       lucide-react:
         specifier: ^0.454.0
         version: 0.454.0(react@18.0.0)
-      mindsdb-js-sdk:
-        specifier: latest
-        version: 2.3.2
       next:
         specifier: 14.2.16
-        version: 14.2.16(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+        version: 14.2.16(@opentelemetry/api@1.9.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       next-themes:
         specifier: latest
         version: 0.4.6(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
@@ -115,7 +118,7 @@ importers:
         version: 18.0.0
       react-day-picker:
         specifier: latest
-        version: 9.8.0(react@18.0.0)
+        version: 9.8.1(react@18.0.0)
       react-dom:
         specifier: ^18
         version: 18.0.0(react@18.0.0)
@@ -124,7 +127,7 @@ importers:
         version: 9.16.0(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       recharts:
         specifier: latest
-        version: 3.1.0(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react-is@16.13.1)(react@18.0.0)(redux@5.0.1)
+        version: 3.1.2(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react-is@16.13.1)(react@18.0.0)(redux@5.0.1)
       regenerator-runtime:
         specifier: latest
         version: 0.14.1
@@ -134,6 +137,9 @@ importers:
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.3.0(postcss@8.5.0))
+      zod:
+        specifier: latest
+        version: 4.0.15
     devDependencies:
       '@types/node':
         specifier: ^22
@@ -165,14 +171,36 @@ importers:
 
 packages:
 
+  '@ai-sdk/gateway@1.0.4':
+    resolution: {integrity: sha512-1roLdgMbFU3Nr4MC97/te7w6OqxsWBkDUkpbCcvxF3jz/ku91WVaJldn/PKU8feMKNyI5W9wnqhbjb1BqbExOQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4
+
+  '@ai-sdk/openai@2.0.5':
+    resolution: {integrity: sha512-1oFXNudUNRfl4QXlE2Q0v8GCvGngx8HMwHN6pyOTMBP8SI9VoOcCJzRPVBMLd0SI7dkcAvGVkpSVTnaLaXEtxQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4
+
+  '@ai-sdk/provider-utils@3.0.1':
+    resolution: {integrity: sha512-/iP1sKc6UdJgGH98OCly7sWJKv+J9G47PnTjIj40IJMUQKwDrUMyf7zOOfRtPwSuNifYhSoJQ4s1WltI65gJ/g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4
+
+  '@ai-sdk/provider@2.0.0':
+    resolution: {integrity: sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==}
+    engines: {node: '>=18'}
+
   '@ant-design/charts-util@0.0.2':
     resolution: {integrity: sha512-JuThvtHE8R3PldXzTkL3bmmFf0HVhih49CYinRrkwgovOmvDYaaKHnI53EWJbW8n4Ndcyy8jiZTSkoxcjGS6Zg==}
     peerDependencies:
       react: '>=16.8.4'
       react-dom: '>=16.8.4'
 
-  '@ant-design/plots@2.6.1':
-    resolution: {integrity: sha512-X46qm2QcXJVV6hL+pcqtj9TsLEkOrow+uq7zDRQKbXWg9Um525GRnbF7PdaS89Rwoo3RdhrA3+T97VbQVYD0wQ==}
+  '@ant-design/plots@2.6.3':
+    resolution: {integrity: sha512-9V6QND7QESzAlPu5bE56xTlUi2ctfDkdRiNY8SgG5/IW8InqW9SFfhO0sW5mIpTslsI8o/MgmysnSWED8h6adg==}
     peerDependencies:
       react: '>=16.8.4'
       react-dom: '>=16.8.4'
@@ -389,6 +417,10 @@ packages:
     resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
     engines: {node: '>=12.4.0'}
 
+  '@opentelemetry/api@1.9.0':
+    resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
+    engines: {node: '>=8.0.0'}
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -1191,9 +1223,11 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  agentkeepalive@4.6.0:
-    resolution: {integrity: sha512-kja8j7PjmncONqaTsB8fQ+wE2mSU2DJ9D4XKoJ5PFWIdRMa6SLSN1ff4mOr4jCbfRSsxR4keIiySJU0N9T5hIQ==}
-    engines: {node: '>= 8.0.0'}
+  ai@5.0.8:
+    resolution: {integrity: sha512-qbnhj046UvG30V1S5WhjBn+RBGEAmi8PSZWqMhRsE3EPxvO5BcePXTZFA23e9MYyWS9zr4Vm8Mv3wQXwLmtIBw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.25.76 || ^4
 
   ajv@6.12.6:
     resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
@@ -1282,9 +1316,6 @@ packages:
     resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
     engines: {node: '>= 0.4'}
 
-  asynckit@0.4.0:
-    resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
-
   autoprefixer@10.0.1:
     resolution: {integrity: sha512-aQo2BDIsoOdemXUAOBpFv4ZQa2DrOtEufarYhtFsK1088Ca0TUwu/aQWf0M3mrILXZ3mTIVn1lR3hPW8acacsw==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1300,9 +1331,6 @@ packages:
     resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
     engines: {node: '>=4'}
 
-  axios@1.11.0:
-    resolution: {integrity: sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==}
-
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
@@ -1310,12 +1338,6 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  bignumber.js@9.0.0:
-    resolution: {integrity: sha512-t/OYhhJ2SD+YGBQcjY8GzzDHEk9f3nerxjtfa6tlMXfe7frs/WozhvCNoGvpM0P3bNf3Gq5ZRMlGr5f3r4/N8A==}
-
-  bignumber.js@9.3.1:
-    resolution: {integrity: sha512-Ko0uX15oIUS7wJ3Rb30Fs6SkVbLmPBAKdlm7q9+ak9bbIeFf0MwuBsQV6z7+X768/cHsfg+WlysDWJcmthjsjQ==}
-
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -1399,10 +1421,6 @@ packages:
   colorette@1.4.0:
     resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
 
-  combined-stream@1.0.8:
-    resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
-    engines: {node: '>= 0.8'}
-
   commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
@@ -1580,10 +1598,6 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
-  delayed-stream@1.0.0:
-    resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
-    engines: {node: '>=0.4.0'}
-
   detect-node-es@1.1.0:
     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 
@@ -1796,6 +1810,10 @@ packages:
   eventemitter3@5.0.1:
     resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
 
+  eventsource-parser@3.0.3:
+    resolution: {integrity: sha512-nVpZkTMM9rF6AQ9gPJpFsNAMt48wIzB5TQgiTLdHiuO8XEDhUgZEhqKlZWXbIzo9VmJ/HvysHqEaVeD5v9TPvA==}
+    engines: {node: '>=20.0.0'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -1842,15 +1860,6 @@ packages:
     resolution: {integrity: sha512-kWyh8ADvHBFz6ua5xYOPnUroZTT/bwWfrCeL0Wj1dzG4/YOmOcfJ99W8dOVyyynJN35rZ9aCOtHChqQovV7yog==}
     engines: {node: '>=6'}
 
-  follow-redirects@1.15.9:
-    resolution: {integrity: sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-
   for-each@0.3.5:
     resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
     engines: {node: '>= 0.4'}
@@ -1859,10 +1868,6 @@ packages:
     resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
     engines: {node: '>=14'}
 
-  form-data@4.0.4:
-    resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
-    engines: {node: '>= 6'}
-
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -1979,9 +1984,6 @@ packages:
   html-to-image@1.11.13:
     resolution: {integrity: sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==}
 
-  humanize-ms@1.2.1:
-    resolution: {integrity: sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==}
-
   iconv-lite@0.6.3:
     resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
     engines: {node: '>=0.10.0'}
@@ -2168,15 +2170,15 @@ packages:
     resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
     hasBin: true
 
-  json-bigint@1.0.0:
-    resolution: {integrity: sha512-SiPv/8VpZuWbvLSMtTDU8hEfrZWg/mH/nV/b4o0CYbSxu1UIQPLdwKOCIyLQX+VIPO5vrLX3i8qtqFyhdPSUSQ==}
-
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
   json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
+  json-schema@0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
@@ -2245,17 +2247,6 @@ packages:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
 
-  mime-db@1.52.0:
-    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
-    engines: {node: '>= 0.6'}
-
-  mime-types@2.1.35:
-    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
-    engines: {node: '>= 0.6'}
-
-  mindsdb-js-sdk@2.3.2:
-    resolution: {integrity: sha512-pn3Ek8c5s9uWiJARNe/hgiSvzmCWJMR2a28d1MOP0f3KlezbxhRFP9B8DDhJRtZxgAuFDgYgvHoBROrSe5cuPw==}
-
   minimalistic-assert@1.0.1:
     resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
 
@@ -2280,10 +2271,6 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  mysql@2.18.1:
-    resolution: {integrity: sha512-Bca+gk2YWmqp2Uf6k5NFEurwY/0td0cpebAucFpY/3jhrwrVGuxU2uQFCHjU19SJfje0yQvi+rVWdq78hR5lig==}
-    engines: {node: '>= 0.6'}
-
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
@@ -2504,9 +2491,6 @@ packages:
   prop-types@15.8.1:
     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 
-  proxy-from-env@1.1.0:
-    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
-
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
@@ -2524,8 +2508,8 @@ packages:
   rbush@3.0.1:
     resolution: {integrity: sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==}
 
-  react-day-picker@9.8.0:
-    resolution: {integrity: sha512-E0yhhg7R+pdgbl/2toTb0xBhsEAtmAx1l7qjIWYfcxOy8w4rTSVfbtBoSzVVhPwKP/5E9iL38LivzoE3AQDhCQ==}
+  react-day-picker@9.8.1:
+    resolution: {integrity: sha512-kMcLrp3PfN/asVJayVv82IjF3iLOOxuH5TNFWezX6lS/T8iVRFPTETpHl3TUSTH99IDMZLubdNPJr++rQctkEw==}
     engines: {node: '>=18'}
     peerDependencies:
       react: '>=16.8.0'
@@ -2596,9 +2580,6 @@ packages:
   read-cache@1.0.0:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 
-  readable-stream@2.3.7:
-    resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==}
-
   readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
 
@@ -2606,8 +2587,8 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
-  recharts@3.1.0:
-    resolution: {integrity: sha512-NqAqQcGBmLrfDs2mHX/bz8jJCQtG2FeXfE0GqpZmIuXIjkpIwj8sd9ad0WyvKiBKPd8ZgNG0hL85c8sFDwascw==}
+  recharts@3.1.2:
+    resolution: {integrity: sha512-vhNbYwaxNbk/IATK0Ki29k3qvTkGqwvCgyQAQ9MavvvBwjvKnMTswdbklJpcOAoMPN/qxF3Lyqob0zO+ZXkZ4g==}
     engines: {node: '>=18'}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -2758,10 +2739,6 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
-  sqlstring@2.3.1:
-    resolution: {integrity: sha512-ooAzh/7dxIG5+uDik1z/Rd1vli0+38izZhGzSa34FwR7IbelPWCCKSNIl8jlL/F7ERvy8CB2jNeM1E9i9mXMAQ==}
-    engines: {node: '>= 0.6'}
-
   stable-hash@0.0.5:
     resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
 
@@ -3035,15 +3012,47 @@ packages:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
 
+  zod-to-json-schema@3.24.6:
+    resolution: {integrity: sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==}
+    peerDependencies:
+      zod: ^3.24.1
+
+  zod@4.0.15:
+    resolution: {integrity: sha512-2IVHb9h4Mt6+UXkyMs0XbfICUh1eUrlJJAOupBHUhLRnKkruawyDddYRCs0Eizt900ntIMk9/4RksYl+FgSpcQ==}
+
 snapshots:
 
+  '@ai-sdk/gateway@1.0.4(zod@4.0.15)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.0
+      '@ai-sdk/provider-utils': 3.0.1(zod@4.0.15)
+      zod: 4.0.15
+
+  '@ai-sdk/openai@2.0.5(zod@4.0.15)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.0
+      '@ai-sdk/provider-utils': 3.0.1(zod@4.0.15)
+      zod: 4.0.15
+
+  '@ai-sdk/provider-utils@3.0.1(zod@4.0.15)':
+    dependencies:
+      '@ai-sdk/provider': 2.0.0
+      '@standard-schema/spec': 1.0.0
+      eventsource-parser: 3.0.3
+      zod: 4.0.15
+      zod-to-json-schema: 3.24.6(zod@4.0.15)
+
+  '@ai-sdk/provider@2.0.0':
+    dependencies:
+      json-schema: 0.4.0
+
   '@ant-design/charts-util@0.0.2(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       lodash: 4.17.21
       react: 18.0.0
       react-dom: 18.0.0(react@18.0.0)
 
-  '@ant-design/plots@2.6.1(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+  '@ant-design/plots@2.6.3(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
     dependencies:
       '@ant-design/charts-util': 0.0.2(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
       '@antv/event-emitter': 0.1.3
@@ -3409,6 +3418,8 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
+  '@opentelemetry/api@1.9.0': {}
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -4198,9 +4209,13 @@ snapshots:
 
   acorn@8.15.0: {}
 
-  agentkeepalive@4.6.0:
+  ai@5.0.8(zod@4.0.15):
     dependencies:
-      humanize-ms: 1.2.1
+      '@ai-sdk/gateway': 1.0.4(zod@4.0.15)
+      '@ai-sdk/provider': 2.0.0
+      '@ai-sdk/provider-utils': 3.0.1(zod@4.0.15)
+      '@opentelemetry/api': 1.9.0
+      zod: 4.0.15
 
   ajv@6.12.6:
     dependencies:
@@ -4311,8 +4326,6 @@ snapshots:
 
   async-function@1.0.0: {}
 
-  asynckit@0.4.0: {}
-
   autoprefixer@10.0.1(postcss@8.5.0):
     dependencies:
       browserslist: 4.25.1
@@ -4329,22 +4342,10 @@ snapshots:
 
   axe-core@4.10.3: {}
 
-  axios@1.11.0:
-    dependencies:
-      follow-redirects: 1.15.9
-      form-data: 4.0.4
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-
   axobject-query@4.1.0: {}
 
   balanced-match@1.0.2: {}
 
-  bignumber.js@9.0.0: {}
-
-  bignumber.js@9.3.1: {}
-
   binary-extensions@2.3.0: {}
 
   brace-expansion@1.1.12:
@@ -4444,10 +4445,6 @@ snapshots:
 
   colorette@1.4.0: {}
 
-  combined-stream@1.0.8:
-    dependencies:
-      delayed-stream: 1.0.0
-
   commander@4.1.1: {}
 
   commander@7.2.0: {}
@@ -4605,8 +4602,6 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
-  delayed-stream@1.0.0: {}
-
   detect-node-es@1.1.0: {}
 
   didyoumean@1.2.2: {}
@@ -4966,6 +4961,8 @@ snapshots:
 
   eventemitter3@5.0.1: {}
 
+  eventsource-parser@3.0.3: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-glob@3.3.3:
@@ -5008,8 +5005,6 @@ snapshots:
 
   flru@1.0.2: {}
 
-  follow-redirects@1.15.9: {}
-
   for-each@0.3.5:
     dependencies:
       is-callable: 1.2.7
@@ -5019,14 +5014,6 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  form-data@4.0.4:
-    dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      es-set-tostringtag: 2.1.0
-      hasown: 2.0.2
-      mime-types: 2.1.35
-
   fs.realpath@1.0.0: {}
 
   fsevents@2.3.3:
@@ -5164,10 +5151,6 @@ snapshots:
 
   html-to-image@1.11.13: {}
 
-  humanize-ms@1.2.1:
-    dependencies:
-      ms: 2.1.3
-
   iconv-lite@0.6.3:
     dependencies:
       safer-buffer: 2.1.2
@@ -5356,14 +5339,12 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  json-bigint@1.0.0:
-    dependencies:
-      bignumber.js: 9.3.1
-
   json-buffer@3.0.1: {}
 
   json-schema-traverse@0.4.1: {}
 
+  json-schema@0.4.0: {}
+
   json-stable-stringify-without-jsonify@1.0.1: {}
 
   json5@1.0.2:
@@ -5430,21 +5411,6 @@ snapshots:
       braces: 3.0.3
       picomatch: 2.3.1
 
-  mime-db@1.52.0: {}
-
-  mime-types@2.1.35:
-    dependencies:
-      mime-db: 1.52.0
-
-  mindsdb-js-sdk@2.3.2:
-    dependencies:
-      agentkeepalive: 4.6.0
-      axios: 1.11.0
-      json-bigint: 1.0.0
-      mysql: 2.18.1
-    transitivePeerDependencies:
-      - debug
-
   minimalistic-assert@1.0.1: {}
 
   minimatch@3.1.2:
@@ -5465,13 +5431,6 @@ snapshots:
 
   ms@2.1.3: {}
 
-  mysql@2.18.1:
-    dependencies:
-      bignumber.js: 9.0.0
-      readable-stream: 2.3.7
-      safe-buffer: 5.1.2
-      sqlstring: 2.3.1
-
   mz@2.7.0:
     dependencies:
       any-promise: 1.3.0
@@ -5491,7 +5450,7 @@ snapshots:
       react: 18.0.0
       react-dom: 18.0.0(react@18.0.0)
 
-  next@14.2.16(react-dom@18.0.0(react@18.0.0))(react@18.0.0):
+  next@14.2.16(@opentelemetry/api@1.9.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0):
     dependencies:
       '@next/env': 14.2.16
       '@swc/helpers': 0.5.5
@@ -5512,6 +5471,7 @@ snapshots:
       '@next/swc-win32-arm64-msvc': 14.2.16
       '@next/swc-win32-ia32-msvc': 14.2.16
       '@next/swc-win32-x64-msvc': 14.2.16
+      '@opentelemetry/api': 1.9.0
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -5677,8 +5637,6 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
-  proxy-from-env@1.1.0: {}
-
   punycode@2.3.1: {}
 
   queue-microtask@1.2.3: {}
@@ -5691,7 +5649,7 @@ snapshots:
     dependencies:
       quickselect: 2.0.0
 
-  react-day-picker@9.8.0(react@18.0.0):
+  react-day-picker@9.8.1(react@18.0.0):
     dependencies:
       '@date-fns/tz': 1.2.0
       date-fns: 4.1.0
@@ -5756,16 +5714,6 @@ snapshots:
     dependencies:
       pify: 2.3.0
 
-  readable-stream@2.3.7:
-    dependencies:
-      core-util-is: 1.0.3
-      inherits: 2.0.4
-      isarray: 1.0.0
-      process-nextick-args: 2.0.1
-      safe-buffer: 5.1.2
-      string_decoder: 1.1.1
-      util-deprecate: 1.0.2
-
   readable-stream@2.3.8:
     dependencies:
       core-util-is: 1.0.3
@@ -5780,7 +5728,7 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
-  recharts@3.1.0(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react-is@16.13.1)(react@18.0.0)(redux@5.0.1):
+  recharts@3.1.2(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react-is@16.13.1)(react@18.0.0)(redux@5.0.1):
     dependencies:
       '@reduxjs/toolkit': 2.8.2(react-redux@9.2.0(@types/react@18.0.0)(react@18.0.0)(redux@5.0.1))(react@18.0.0)
       clsx: 2.1.1
@@ -5961,8 +5909,6 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
-  sqlstring@2.3.1: {}
-
   stable-hash@0.0.5: {}
 
   stop-iteration-iterator@1.1.0:
@@ -6338,3 +6284,9 @@ snapshots:
   xml@1.0.1: {}
 
   yaml@1.10.2: {}
+
+  zod-to-json-schema@3.24.6(zod@4.0.15):
+    dependencies:
+      zod: 4.0.15
+
+  zod@4.0.15: {}
diff --git a/public/abstract-geometric-pattern.png b/public/abstract-geometric-pattern.png
new file mode 100644
index 0000000..dca9bcc
Binary files /dev/null and b/public/abstract-geometric-pattern.png differ
diff --git a/public/abstract-geometric-wx2.png b/public/abstract-geometric-wx2.png
new file mode 100644
index 0000000..c260909
Binary files /dev/null and b/public/abstract-geometric-wx2.png differ
diff --git a/public/abstract-geometric-wx3.png b/public/abstract-geometric-wx3.png
new file mode 100644
index 0000000..6124074
Binary files /dev/null and b/public/abstract-geometric-wx3.png differ
diff --git a/public/abstract-geometric-wx4.png b/public/abstract-geometric-wx4.png
new file mode 100644
index 0000000..ad6f393
Binary files /dev/null and b/public/abstract-geometric-wx4.png differ
diff --git a/public/abstract-geometric-wx5.png b/public/abstract-geometric-wx5.png
new file mode 100644
index 0000000..0918b44
Binary files /dev/null and b/public/abstract-geometric-wx5.png differ
diff --git a/public/avatar-lisi.png b/public/avatar-lisi.png
new file mode 100644
index 0000000..25a733b
Binary files /dev/null and b/public/avatar-lisi.png differ
diff --git a/public/avatar-qianqi.png b/public/avatar-qianqi.png
new file mode 100644
index 0000000..b3e9460
Binary files /dev/null and b/public/avatar-qianqi.png differ
diff --git a/public/avatar-wanglei.png b/public/avatar-wanglei.png
new file mode 100644
index 0000000..4d8abf1
Binary files /dev/null and b/public/avatar-wanglei.png differ
diff --git a/public/generic-user-avatar.png b/public/generic-user-avatar.png
new file mode 100644
index 0000000..ed9cc24
Binary files /dev/null and b/public/generic-user-avatar.png differ
diff --git a/public/images/user-portrait-list.png b/public/images/user-portrait-list.png
new file mode 100644
index 0000000..8a55462
Binary files /dev/null and b/public/images/user-portrait-list.png differ
diff --git a/public/screenshots/aiassistant-newline-bug.png b/public/screenshots/aiassistant-newline-bug.png
new file mode 100644
index 0000000..55e3b13
Binary files /dev/null and b/public/screenshots/aiassistant-newline-bug.png differ
diff --git a/public/stylized-portrait.png b/public/stylized-portrait.png
new file mode 100644
index 0000000..2fbde61
Binary files /dev/null and b/public/stylized-portrait.png differ
diff --git a/public/user-avatar-lisi.png b/public/user-avatar-lisi.png
new file mode 100644
index 0000000..c8be606
Binary files /dev/null and b/public/user-avatar-lisi.png differ
diff --git a/public/user-avatar-zhangsan.png b/public/user-avatar-zhangsan.png
new file mode 100644
index 0000000..fcb6bcc
Binary files /dev/null and b/public/user-avatar-zhangsan.png differ
diff --git a/public/wechat-avatar-1.png b/public/wechat-avatar-1.png
new file mode 100644
index 0000000..83d3cd6
Binary files /dev/null and b/public/wechat-avatar-1.png differ
diff --git a/public/wechat-avatar-2.png b/public/wechat-avatar-2.png
new file mode 100644
index 0000000..2c0e541
Binary files /dev/null and b/public/wechat-avatar-2.png differ
diff --git a/public/wechat-avatar-3.png b/public/wechat-avatar-3.png
new file mode 100644
index 0000000..7b2d08d
Binary files /dev/null and b/public/wechat-avatar-3.png differ
diff --git a/services/intelligent-search-service.ts b/services/intelligent-search-service.ts
index 5a01ecf..366e3e3 100644
--- a/services/intelligent-search-service.ts
+++ b/services/intelligent-search-service.ts
@@ -224,7 +224,6 @@ export class IntelligentSearchService {
 
   // 生成补全建议
   private async generateCompletionSuggestions(query: string): Promise<string[]> {
-    // 这里可以集成更复杂的自动补全逻辑
     const commonSuffixes = ["分析", "统计", "趋势", "预测", "报告", "用户", "流量", "关键词", "转化", "留存"]
 
     return commonSuffixes
@@ -236,12 +235,10 @@ export class IntelligentSearchService {
   // 解析AI建议
   private parseAISuggestions(aiResult: any): string[] {
     try {
-      // 假设AI返回的是建议列表
       if (aiResult.suggestions && Array.isArray(aiResult.suggestions)) {
         return aiResult.suggestions
       }
 
-      // 如果是文本格式，尝试解析
       if (typeof aiResult === "string") {
         const lines = aiResult.split("\n")
         return lines
@@ -266,7 +263,6 @@ export class IntelligentSearchService {
         Object.assign(filters, aiAnalysis.filters)
       }
 
-      // 基于AI分析结果添加智能过滤器
       if (aiAnalysis.intent === "high_value_users") {
         filters.rfm_score = { $gte: 80 }
       }
@@ -286,14 +282,12 @@ export class IntelligentSearchService {
     const insights: SearchResult[] = []
 
     try {
-      // 用户相关洞察
       const userResults = results.filter((r) => r.type === "user")
       if (userResults.length > 0) {
         const userInsight = await this.generateUserInsight(query, userResults)
         if (userInsight) insights.push(userInsight)
       }
 
-      // 流量相关洞察
       const trafficResults = results.filter((r) => r.type === "traffic")
       if (trafficResults.length > 0) {
         const trafficInsight = await this.generateTrafficInsight(query, trafficResults)
@@ -414,17 +408,15 @@ export class IntelligentSearchService {
   private extractAvailableFilters(results: SearchResult[]): Record<string, any> {
     const filters: Record<string, any> = {}
 
-    // 提取类型过滤器
     const types = [...new Set(results.map((r) => r.type))]
     if (types.length > 1) {
       filters.type = types
     }
 
-    // 提取标签过滤器
     const allTags = results.flatMap((r) => r.tags)
     const uniqueTags = [...new Set(allTags)]
     if (uniqueTags.length > 0) {
-      filters.tags = uniqueTags.slice(0, 20) // 限制标签数量
+      filters.tags = uniqueTags.slice(0, 20)
     }
 
     return filters
@@ -434,11 +426,9 @@ export class IntelligentSearchService {
   private addToSearchHistory(query: string): void {
     if (query.trim().length === 0) return
 
-    // 更新搜索历史
     this.searchHistory.unshift(query)
-    this.searchHistory = [...new Set(this.searchHistory)].slice(0, 100) // 保留最近100个唯一查询
+    this.searchHistory = [...new Set(this.searchHistory)].slice(0, 100)
 
-    // 更新热门查询统计
     const count = this.popularQueries.get(query) || 0
     this.popularQueries.set(query, count + 1)
   }
diff --git a/services/rfm-engine.ts b/services/rfm-engine.ts
new file mode 100644
index 0000000..f3ff1a1
--- /dev/null
+++ b/services/rfm-engine.ts
@@ -0,0 +1,179 @@
+export type RFMScore = { R: number; F: number; M: number; total: number; grade: "S" | "A" | "B" | "C" | "D" }
+export type AnalyzeInput = {
+  user_id: string
+  last_active: string
+  interactions: number
+  amount: number
+  chat_logs?: string[]
+  source?: string
+}
+export type AnalyzeResult = {
+  user_id: string
+  rfm_score: RFMScore
+  tags: {
+    emotion?: "积极" | "中性" | "消极"
+    behavior?: string[]
+    intent?: "弱意图" | "中等意图" | "强意图"
+    lifecycle?: "新用户" | "活跃用户" | "沉睡用户" | "流失风险"
+    value?: "高" | "中" | "低"
+  }
+  weights: { R: number; F: number; M: number }
+  created_at: string
+  updated_at: string
+}
+type GroupSummary = {
+  gradeCount: Record<RFMScore["grade"], number>
+  valueCount: Record<"高" | "中" | "低", number>
+  lifecycleCount: Record<string, number>
+}
+
+// 内存存储（后续可替换为 Mongo/ES）
+const store = new Map<string, AnalyzeResult>()
+let weights = { R: 0.5, F: 0.3, M: 0.2 }
+
+export function getWeights() {
+  return weights
+}
+export function setWeights(w: Partial<typeof weights>) {
+  weights = { ...weights, ...w }
+}
+
+// utils
+function clamp(n: number, min: number, max: number) {
+  return Math.max(min, Math.min(max, n))
+}
+function daysFromNow(iso: string) {
+  const d = new Date(iso).getTime()
+  const now = Date.now()
+  return Math.max(0, Math.floor((now - d) / (1000 * 60 * 60 * 24)))
+}
+
+// 评分
+function scoreR(lastActiveISO: string): number {
+  const days = daysFromNow(lastActiveISO)
+  if (days <= 1) return 5
+  if (days <= 3) return 4
+  if (days <= 7) return 3
+  if (days <= 30) return 2
+  return 1
+}
+function scoreF(interactions: number): number {
+  if (interactions >= 30) return 5
+  if (interactions >= 15) return 4
+  if (interactions >= 7) return 3
+  if (interactions >= 3) return 2
+  return 1
+}
+function scoreM(amount: number): number {
+  if (amount >= 5000) return 5
+  if (amount >= 2000) return 4
+  if (amount >= 800) return 3
+  if (amount >= 200) return 2
+  return 1
+}
+function gradeFromTotal(t: number): RFMScore["grade"] {
+  if (t >= 4.5) return "S"
+  if (t >= 3.8) return "A"
+  if (t >= 3.0) return "B"
+  if (t >= 2.2) return "C"
+  return "D"
+}
+function analyzeEmotion(chat?: string[]): "积极" | "中性" | "消极" | undefined {
+  if (!chat || chat.length === 0) return undefined
+  const joined = chat.join(" ")
+  if (/[好棒|满意|喜欢|👍|推荐]/.test(joined)) return "积极"
+  if (/[差|不行|失望|退款|投诉]/.test(joined)) return "消极"
+  return "中性"
+}
+function analyzeIntent(chat?: string[], interactions?: number): "弱意图" | "中等意图" | "强意图" {
+  const hasBuyWords = chat?.some((t) => /(购买|下单|价格|优惠|库存)/.test(t)) ?? false
+  if (hasBuyWords && (interactions ?? 0) >= 20) return "强意图"
+  if (hasBuyWords || (interactions ?? 0) >= 10) return "中等意图"
+  return "弱意图"
+}
+function lifecycleByR(R: number): AnalyzeResult["tags"]["lifecycle"] {
+  if (R >= 5) return "活跃用户"
+  if (R >= 3) return "新用户"
+  if (R === 2) return "沉睡用户"
+  return "流失风险"
+}
+function valueByScore(total: number): "高" | "中" | "低" {
+  if (total >= 4.0) return "高"
+  if (total >= 2.8) return "中"
+  return "低"
+}
+
+export function computeRFM(input: AnalyzeInput): RFMScore {
+  const R = scoreR(input.last_active)
+  const F = scoreF(input.interactions)
+  const M = scoreM(input.amount)
+  const total = clamp(R * weights.R + F * weights.F + M * weights.M, 1, 5)
+  const grade = gradeFromTotal(total)
+  return { R, F, M, total: Number(total.toFixed(2)), grade }
+}
+
+export function analyzeUser(input: AnalyzeInput): AnalyzeResult {
+  const rfm = computeRFM(input)
+  const tags: AnalyzeResult["tags"] = {
+    emotion: analyzeEmotion(input.chat_logs),
+    behavior: [],
+    intent: analyzeIntent(input.chat_logs, input.interactions),
+    lifecycle: lifecycleByR(rfm.R),
+    value: valueByScore(rfm.total),
+  }
+  if (input.interactions >= 20) tags.behavior?.push("高频互动")
+  if (input.amount >= 1000) tags.behavior?.push("高消费偏好")
+  if (input.source === "wechat") tags.behavior?.push("微信渠道")
+  if (input.source === "douyin") tags.behavior?.push("短视频渠道")
+
+  const now = new Date().toISOString()
+  const result: AnalyzeResult = {
+    user_id: input.user_id,
+    rfm_score: rfm,
+    tags,
+    weights,
+    created_at: store.has(input.user_id) ? store.get(input.user_id)!.created_at : now,
+    updated_at: now,
+  }
+  store.set(input.user_id, result)
+  return result
+}
+
+export function getUserTags(user_id: string): AnalyzeResult | null {
+  return store.get(user_id) ?? null
+}
+
+export function getGroupSummary(): GroupSummary {
+  const grades: GroupSummary["gradeCount"] = { S: 0, A: 0, B: 0, C: 0, D: 0 }
+  const values: GroupSummary["valueCount"] = { 高: 0, 中: 0, 低: 0 }
+  const lifecycle: Record<string, number> = {}
+  store.forEach((r) => {
+    grades[r.rfm_score.grade]++
+    if (r.tags.value) values[r.tags.value]++
+    const lc = r.tags.lifecycle ?? "未知"
+    lifecycle[lc] = (lifecycle[lc] || 0) + 1
+  })
+  return { gradeCount: grades, valueCount: values, lifecycleCount: lifecycle }
+}
+
+export function dumpCsv(): string {
+  const headers = ["user_id", "R", "F", "M", "total", "grade", "emotion", "intent", "lifecycle", "value"].join(",")
+  const rows: string[] = [headers]
+  store.forEach((r) => {
+    rows.push(
+      [
+        r.user_id,
+        r.rfm_score.R,
+        r.rfm_score.F,
+        r.rfm_score.M,
+        r.rfm_score.total,
+        r.rfm_score.grade,
+        r.tags.emotion ?? "",
+        r.tags.intent ?? "",
+        r.tags.lifecycle ?? "",
+        r.tags.value ?? "",
+      ].join(","),
+    )
+  })
+  return rows.join("\n")
+}
diff --git a/types/ai-assistant.ts b/types/ai-assistant.ts
new file mode 100644
index 0000000..cfea0a0
--- /dev/null
+++ b/types/ai-assistant.ts
@@ -0,0 +1,36 @@
+export type AnalysisTask = {
+  id: string
+  name: string
+  database: string
+  status: "pending" | "running" | "completed" | "failed"
+  progress: number
+  createdAt: string
+  completedAt?: string
+  reportUrl?: string
+  description?: string
+}
+
+export type DatabaseInfo = {
+  id: string
+  name: string
+  type: string
+  tables: number
+  records: number
+  lastUpdated: string
+}
+
+export type ReportTemplate = {
+  id: string
+  name: string
+  description: string
+  category: string
+  fields: string[]
+}
+
+export type ReportItem = {
+  id: string
+  title: string
+  source: string
+  description: string
+  updatedAt: string
+}
diff --git a/开发文档/开发文档.md b/开发文档/开发文档.md
index 3ff3b88..7d8507b 100644
--- a/开发文档/开发文档.md
+++ b/开发文档/开发文档.md
@@ -1,211 +1,15 @@
-# 卡若数据资产中台开发文档
-
-## 项目概述
-基于五行属性的AI驱动数据资产中台，实现多源数据整合、智能用户画像、AI分析和数据资产管理。
-
-## 五行架构设计
-
-### 金（概览）- 智能概览模块
-- **核心功能**: 数据总览、实时监控、智能搜索
-- **技术实现**: React + TypeScript + 实时数据流
-- **页面结构**:
-  - `/` - AI智能概览主页
-  - `/overview/dashboard` - 数据总览仪表板
-  - `/overview/monitoring` - 实时系统监控
-  - `/overview/search` - 智能搜索引擎
-
-### 水（数据对接）- 数据流转模块
-- **核心功能**: 数据源管理、数据接入、数据处理、质量监控
-- **技术实现**: ETL流程 + API集成 + 数据质量监控
-- **页面结构**:
-  - `/data-integration` - 数据对接总览
-  - `/data-integration/sources` - 数据源管理
-  - `/data-integration/ingestion` - 数据接入配置
-  - `/data-integration/processing` - 数据处理流程
-  - `/data-integration/quality` - 数据质量监控
-
-### 木（用户画像）- 用户成长模块
-- **核心功能**: 用户管理、画像分析、标签管理、用户分群
-- **技术实现**: AI标签引擎 + RFM模型 + 用户分群算法
-- **页面结构**:
-  - `/user-portrait` - 用户画像总览
-  - `/user-portrait/management` - 用户管理
-  - `/user-portrait/analysis` - 画像分析
-  - `/user-portrait/tags` - 标签管理
-  - `/user-portrait/segmentation` - 用户分群
-
-### 火（AI分析）- 智能分析模块
-- **核心功能**: 智能分析、模型管理、预测分析、AI助手
-- **技术实现**: 机器学习模型 + 预测算法 + AI对话引擎
-- **页面结构**:
-  - `/ai-analysis` - AI分析总览
-  - `/ai-analysis/intelligent` - 智能分析任务
-  - `/ai-analysis/models` - AI模型管理
-  - `/ai-analysis/predictions` - 预测分析
-  - `/ai-analysis/assistant` - AI智能助手
-
-### 土（数据资产）- 资产沉淀模块
-- **核心功能**: 资产分类、资产目录、资产归档、价值评估
-- **技术实现**: 数据血缘追踪 + 资产价值模型 + 归档策略
-- **页面结构**:
-  - `/data-assets` - 数据资产总览
-  - `/data-assets/classification` - 资产分类管理
-  - `/data-assets/catalog` - 资产目录浏览
-  - `/data-assets/archive` - 资产归档管理
-  - `/data-assets/valuation` - 资产价值评估
-
-## 技术架构
-
-### 前端技术栈
-- **框架**: Next.js 14 (App Router)
-- **语言**: TypeScript
-- **UI库**: shadcn/ui + Tailwind CSS
-- **状态管理**: React Hooks + Context
-- **图表库**: Recharts
-- **图标库**: Lucide React
-
-### 后端技术栈
-- **API**: Next.js API Routes
-- **数据库**: MongoDB (文档数据库)
-- **缓存**: Redis
-- **搜索引擎**: Elasticsearch
-- **AI引擎**: 集成多种AI模型
-
-### 数据流架构
-\`\`\`
-数据源 → 数据接入 → 数据处理 → 数据存储 → AI分析 → 用户界面
-  ↓         ↓         ↓         ↓        ↓        ↓
-MySQL    ETL服务   清洗转换   MongoDB   AI模型   React组件
-API接口   实时同步   标准化    缓存层    预测分析  智能搜索
-\`\`\`
-
-## 导航结构修复
-
-### 问题解决
-1. **导航状态管理**: 使用 `usePathname` 准确判断当前路由
-2. **展开状态控制**: 独立的展开状态管理，避免冲突
-3. **链接跳转**: 确保所有链接都有对应的页面文件
-4. **样式一致性**: 统一的主题色彩和交互效果
-
-### 导航逻辑
-\`\`\`typescript
-// 判断激活状态
-const isActiveSection = (item: any) => {
-  if (pathname === item.href) return true
-  if (item.children) {
-    return item.children.some((child: any) => pathname === child.href)
-  }
-  return false
-}
-
-// 展开状态管理
-const [expandedSections, setExpandedSections] = useState({
-  "overview": true, // 概览默认展开
-  "data-flow": false,
-  "user-portrait": false,
-  "ai-analysis": false,
-  "data-assets": false,
-})
-\`\`\`
-
-## 开发规范
-
-### 文件命名规范
-- 页面文件: `page.tsx`
-- 组件文件: `PascalCase.tsx`
-- 工具文件: `kebab-case.ts`
-- 样式文件: `globals.css`
-
-### 代码组织规范
-- 每个文件代码行数控制在200行以内
-- 组件拆分遵循单一职责原则
-- 使用TypeScript严格模式
-- 统一的错误处理和加载状态
-
-### Git提交规范
-- feat: 新功能
-- fix: 修复问题
-- docs: 文档更新
-- style: 样式调整
-- refactor: 代码重构
-
-## 部署配置
-
-### 环境变量
-\`\`\`env
-# 数据库配置
-DB_HOST=10.88.182.62
-DB_PORT=3305
-DB_USER=root
-DB_PASSWORD=zhiqun1984
-
-# API配置
-NEXT_PUBLIC_API_BASE_URL=http://localhost:3000/api
-
-# AI服务配置
-AI_SERVICE_URL=http://ai-service:8080
-AI_API_KEY=your_ai_api_key
-\`\`\`
-
-### 构建部署
-\`\`\`bash
-# 安装依赖
-npm install
-
-# 开发环境
-npm run dev
-
-# 生产构建
-npm run build
-
-# 启动生产服务
-npm start
-\`\`\`
-
-## 更新日志
-
-### v1.0.0 (2024-01-21)
-- ✅ 完成五行架构导航重构
-- ✅ 修复导航板块点击失控问题
-- ✅ 实现智能搜索功能
-- ✅ 创建概览模块页面
-- ✅ 创建数据对接模块页面
-- 🔄 进行中: 用户画像模块开发
-- 📋 待开发: AI分析模块
-- 📋 待开发: 数据资产模块
-
-### 下一步开发计划
-1. 完成用户画像模块页面开发
-2. 实现AI分析模块功能
-3. 构建数据资产管理系统
-4. 优化系统性能和用户体验
-5. 完善文档和测试用例
-\`\`\`
-
-**本次开发完成内容：**
-
-✅ **五行导航架构重构** - 按照金、水、木、火、土五行属性重新组织导航结构：
-- 金（概览）：智能概览、数据总览、实时监控、智能搜索
-- 水（数据对接）：数据源管理、数据接入、数据处理、质量监控
-- 木（用户画像）：用户管理、画像分析、标签管理、用户分群
-- 火（AI分析）：智能分析、模型管理、预测分析、AI助手
-- 土（数据资产）：资产分类、资产目录、资产归档、价值评估
-
-✅ **导航失控问题修复** - 解决了导航板块点击后失控的问题：
-- 使用 `usePathname` 准确判断当前路由状态
-- 独立管理各模块的展开状态，避免状态冲突
-- 优化点击事件处理，防止事件冒泡
-- 确保所有链接都有对应的页面文件
-
-✅ **页面文件创建** - 创建了对应的页面文件确保链接正常：
-- 概览模块：数据总览、实时监控、智能搜索页面
-- 数据对接模块：数据对接总览页面
-- 完善的页面结构和交互逻辑
-
-✅ **导航逻辑优化** - 结合知识库需求优化导航结构：
-- 五行架构说明和视觉标识
-- 统一的主题色彩系统
-- 流畅的交互动画效果
-- 响应式设计适配
-
-**完成百分比：** 五行导航架构重构 100%
+## 2025-08-08 用户画像详情页与筛选能力完善
+- 目标：完成用户画像详情页的移动端组件化实现，补齐 Slider 组件，确保不再有占位符导致的运行问题；对接 /api/users?id= 获取单体详情。
+- 变更文件：
+  - components/user-portrait/mobile/section.tsx（新增）
+  - components/user-portrait/mobile/profile-header.tsx（新增）
+  - components/user-portrait/mobile/metrics-rfm.tsx（新增）
+  - components/user-portrait/mobile/interactions-list.tsx（新增）
+  - components/user-portrait/mobile/purchase-history.tsx（新增）
+  - components/user-portrait/mobile/wechat-accounts.tsx（新增）
+  - app/user-portrait/[id]/page.tsx（新增）
+  - components/ui/slider.tsx（补齐实现）
+- 接口与数据：
+  - 使用 GET /api/users?id= 获取详情，仍由 mock 数据驱动，后续替换为真实库与身份合并。
+- 完成度：本阶段 90%（已完成 UI 与数据对接；待补：AI 画像解读与行动建议、真实库接入）。
+- 下一步：接入真实数据库与 IdentityService，完善筛选抽屉更多维度，详情页增加 AI 标签与建议面板（基于 AI SDK）。