diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..f650315
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,27 @@
+# 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/api/devices.ts b/api/devices.ts
new file mode 100644
index 0000000..347269f
--- /dev/null
+++ b/api/devices.ts
@@ -0,0 +1,130 @@
+import type {
+  ApiResponse,
+  Device,
+  DeviceStats,
+  DeviceTaskRecord,
+  PaginatedResponse,
+  QueryDeviceParams,
+  CreateDeviceParams,
+  UpdateDeviceParams,
+  DeviceStatus, // Added DeviceStatus import
+} from "@/types/device"
+
+const API_BASE = "/api/devices"
+
+// 设备管理API
+export const deviceApi = {
+  // 创建设备
+  async create(params: CreateDeviceParams): Promise<ApiResponse<Device>> {
+    const response = await fetch(`${API_BASE}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(params),
+    })
+    return response.json()
+  },
+
+  // 更新设备
+  async update(params: UpdateDeviceParams): Promise<ApiResponse<Device>> {
+    const response = await fetch(`${API_BASE}/${params.id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(params),
+    })
+    return response.json()
+  },
+
+  // 获取设备详情
+  async getById(id: string): Promise<ApiResponse<Device>> {
+    const response = await fetch(`${API_BASE}/${id}`)
+    return response.json()
+  },
+
+  // 查询设备列表
+  async query(params: QueryDeviceParams): Promise<ApiResponse<PaginatedResponse<Device>>> {
+    const queryString = new URLSearchParams({
+      ...params,
+      tags: params.tags ? JSON.stringify(params.tags) : "",
+      dateRange: params.dateRange ? JSON.stringify(params.dateRange) : "",
+    }).toString()
+
+    const response = await fetch(`${API_BASE}?${queryString}`)
+    return response.json()
+  },
+
+  // 删除设备
+  async delete(id: string): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/${id}`, {
+      method: "DELETE",
+    })
+    return response.json()
+  },
+
+  // 重启设备
+  async restart(id: string): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/${id}/restart`, {
+      method: "POST",
+    })
+    return response.json()
+  },
+
+  // 解绑设备
+  async unbind(id: string): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/${id}/unbind`, {
+      method: "POST",
+    })
+    return response.json()
+  },
+
+  // 获取设备统计数据
+  async getStats(id: string): Promise<ApiResponse<DeviceStats>> {
+    const response = await fetch(`${API_BASE}/${id}/stats`)
+    return response.json()
+  },
+
+  // 获取设备任务记录
+  async getTaskRecords(id: string, page = 1, pageSize = 20): Promise<ApiResponse<PaginatedResponse<DeviceTaskRecord>>> {
+    const response = await fetch(`${API_BASE}/${id}/tasks?page=${page}&pageSize=${pageSize}`)
+    return response.json()
+  },
+
+  // 批量更新设备标签
+  async updateTags(ids: string[], tags: string[]): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/tags`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ deviceIds: ids, tags }),
+    })
+    return response.json()
+  },
+
+  // 批量导出设备数据
+  async exportDevices(ids: string[]): Promise<Blob> {
+    const response = await fetch(`${API_BASE}/export`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ deviceIds: ids }),
+    })
+    return response.blob()
+  },
+
+  // 检查设备在线状态
+  async checkStatus(ids: string[]): Promise<ApiResponse<Record<string, DeviceStatus>>> {
+    const response = await fetch(`${API_BASE}/status`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ deviceIds: ids }),
+    })
+    return response.json()
+  },
+}
diff --git a/api/route.ts b/api/route.ts
new file mode 100644
index 0000000..7b5e7c0
--- /dev/null
+++ b/api/route.ts
@@ -0,0 +1,73 @@
+import { NextResponse } from "next/server"
+import type { CreateScenarioParams, QueryScenarioParams, ScenarioBase, ApiResponse } from "@/types/scenario"
+
+// 获客场景路由处理
+export async function POST(request: Request) {
+  try {
+    const body: CreateScenarioParams = await request.json()
+
+    // TODO: 实现创建场景的具体逻辑
+    const scenario: ScenarioBase = {
+      id: "generated-id",
+      ...body,
+      status: "draft",
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+      creator: "current-user-id",
+    }
+
+    const response: ApiResponse<ScenarioBase> = {
+      code: 0,
+      message: "创建成功",
+      data: scenario,
+    }
+
+    return NextResponse.json(response)
+  } catch (error) {
+    return NextResponse.json(
+      {
+        code: 500,
+        message: "创建失败",
+        data: null,
+      },
+      { status: 500 },
+    )
+  }
+}
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const params: QueryScenarioParams = {
+      type: searchParams.get("type") as any,
+      status: searchParams.get("status") as any,
+      keyword: searchParams.get("keyword") || undefined,
+      dateRange: searchParams.get("dateRange") ? JSON.parse(searchParams.get("dateRange")!) : undefined,
+      page: Number(searchParams.get("page")) || 1,
+      pageSize: Number(searchParams.get("pageSize")) || 20,
+    }
+
+    // TODO: 实现查询场景列表的具体逻辑
+
+    return NextResponse.json({
+      code: 0,
+      message: "查询成功",
+      data: {
+        items: [],
+        total: 0,
+        page: params.page,
+        pageSize: params.pageSize,
+        totalPages: 0,
+      },
+    })
+  } catch (error) {
+    return NextResponse.json(
+      {
+        code: 500,
+        message: "查询失败",
+        data: null,
+      },
+      { status: 500 },
+    )
+  }
+}
diff --git a/api/scenarios.ts b/api/scenarios.ts
new file mode 100644
index 0000000..37786f6
--- /dev/null
+++ b/api/scenarios.ts
@@ -0,0 +1,111 @@
+import type {
+  ApiResponse,
+  CreateScenarioParams,
+  UpdateScenarioParams,
+  QueryScenarioParams,
+  ScenarioBase,
+  ScenarioStats,
+  AcquisitionRecord,
+  PaginatedResponse,
+} from "@/types/scenario"
+
+const API_BASE = "/api/scenarios"
+
+// 获客场景API
+export const scenarioApi = {
+  // 创建场景
+  async create(params: CreateScenarioParams): Promise<ApiResponse<ScenarioBase>> {
+    const response = await fetch(`${API_BASE}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(params),
+    })
+    return response.json()
+  },
+
+  // 更新场景
+  async update(params: UpdateScenarioParams): Promise<ApiResponse<ScenarioBase>> {
+    const response = await fetch(`${API_BASE}/${params.id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(params),
+    })
+    return response.json()
+  },
+
+  // 获取场景详情
+  async getById(id: string): Promise<ApiResponse<ScenarioBase>> {
+    const response = await fetch(`${API_BASE}/${id}`)
+    return response.json()
+  },
+
+  // 查询场景列表
+  async query(params: QueryScenarioParams): Promise<ApiResponse<PaginatedResponse<ScenarioBase>>> {
+    const queryString = new URLSearchParams({
+      ...params,
+      dateRange: params.dateRange ? JSON.stringify(params.dateRange) : "",
+    }).toString()
+
+    const response = await fetch(`${API_BASE}?${queryString}`)
+    return response.json()
+  },
+
+  // 删除场景
+  async delete(id: string): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/${id}`, {
+      method: "DELETE",
+    })
+    return response.json()
+  },
+
+  // 启动场景
+  async start(id: string): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/${id}/start`, {
+      method: "POST",
+    })
+    return response.json()
+  },
+
+  // 暂停场景
+  async pause(id: string): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/${id}/pause`, {
+      method: "POST",
+    })
+    return response.json()
+  },
+
+  // 获取场景统计数据
+  async getStats(id: string): Promise<ApiResponse<ScenarioStats>> {
+    const response = await fetch(`${API_BASE}/${id}/stats`)
+    return response.json()
+  },
+
+  // 获取获客记录
+  async getRecords(id: string, page = 1, pageSize = 20): Promise<ApiResponse<PaginatedResponse<AcquisitionRecord>>> {
+    const response = await fetch(`${API_BASE}/${id}/records?page=${page}&pageSize=${pageSize}`)
+    return response.json()
+  },
+
+  // 导出获客记录
+  async exportRecords(id: string, dateRange?: { start: string; end: string }): Promise<Blob> {
+    const queryString = dateRange ? `?start=${dateRange.start}&end=${dateRange.end}` : ""
+    const response = await fetch(`${API_BASE}/${id}/records/export${queryString}`)
+    return response.blob()
+  },
+
+  // 批量更新标签
+  async updateTags(id: string, customerIds: string[], tags: string[]): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/${id}/tags`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ customerIds, tags }),
+    })
+    return response.json()
+  },
+}
diff --git a/app/ClientLayout.tsx b/app/ClientLayout.tsx
new file mode 100644
index 0000000..c4011a8
--- /dev/null
+++ b/app/ClientLayout.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import type React from "react"
+import "./globals.css"
+import { Inter } from "next/font/google"
+import { useState, useEffect } from "react"
+import Sidebar from "./components/Sidebar"
+import MobileHeader from "./components/MobileHeader"
+import MobileSidebar from "./components/MobileSidebar"
+import BottomNav from "./components/BottomNav"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export default function ClientLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [isMobile, setIsMobile] = useState(false)
+  const [sidebarOpen, setSidebarOpen] = useState(false)
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768)
+    }
+
+    checkMobile()
+    window.addEventListener("resize", checkMobile)
+
+    return () => window.removeEventListener("resize", checkMobile)
+  }, [])
+
+  return (
+    <html lang="zh-CN">
+      <head>
+        <title>用户数据资产中台</title>
+        <meta name="description" content="基于苹果毛玻璃设计的用户数据资产中台" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+      </head>
+      <body className={inter.className}>
+        {/* 背景装饰 */}
+        <div className="fixed inset-0 -z-10">
+          <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-50" />
+          <div className="absolute top-0 left-0 w-72 h-72 md:w-96 md:h-96 bg-blue-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-pulse" />
+          <div className="absolute top-0 right-0 w-72 h-72 md:w-96 md:h-96 bg-purple-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-pulse animation-delay-2000" />
+          <div className="absolute bottom-0 left-1/2 w-72 h-72 md:w-96 md:h-96 bg-pink-200 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-pulse animation-delay-4000" />
+        </div>
+
+        <div className="flex min-h-screen">
+          {/* 桌面端侧边栏 */}
+          {!isMobile && <Sidebar />}
+
+          {/* 移动端侧边栏 */}
+          {isMobile && <MobileSidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />}
+
+          {/* 主内容区域 */}
+          <main className={`flex-1 ${isMobile ? "pb-20" : "p-6"}`}>
+            {/* 移动端头部 */}
+            {isMobile && <MobileHeader onMenuToggle={() => setSidebarOpen(true)} />}
+
+            {/* 内容区域 */}
+            <div className={`glass-card min-h-full ${isMobile ? "mx-2 mb-4" : ""}`}>{children}</div>
+          </main>
+        </div>
+
+        {/* 移动端底部导航 */}
+        {isMobile && <BottomNav />}
+      </body>
+    </html>
+  )
+}
diff --git a/app/ai-assistant/page.tsx b/app/ai-assistant/page.tsx
new file mode 100644
index 0000000..f1f6be6
--- /dev/null
+++ b/app/ai-assistant/page.tsx
@@ -0,0 +1,786 @@
+"use client"
+
+import { useState } from "react"
+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 { Textarea } from "@/components/ui/textarea"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Sparkles, BarChart, TrendingUp, Users, Mail, Clock, Download, ChevronRight } from "lucide-react"
+
+export default function AIAssistantPage() {
+  const [activeTab, setActiveTab] = useState("data-analysis")
+  const [selectedUserGroup, setSelectedUserGroup] = useState("")
+  const [isUserGroupDialogOpen, setIsUserGroupDialogOpen] = useState(false)
+  const [emailAddress, setEmailAddress] = useState("")
+  const [scheduleReport, setScheduleReport] = useState(false)
+
+  // 分析流程步骤
+  const [analysisStep, setAnalysisStep] = useState(1)
+  const [analysisType, setAnalysisType] = useState("")
+
+  // 营销策略步骤
+  const [strategyStep, setStrategyStep] = useState(1)
+  const [strategyType, setStrategyType] = useState("")
+
+  return (
+    <div className="container mx-auto py-6 space-y-8">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">AI 智能助手</h1>
+          <p className="text-muted-foreground">利用AI技术分析数据并提供营销策略</p>
+        </div>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+        <TabsList className="grid w-full max-w-md grid-cols-2">
+          <TabsTrigger value="data-analysis">数据分析</TabsTrigger>
+          <TabsTrigger value="marketing-strategy">营销策略</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="data-analysis" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>AI 数据分析</CardTitle>
+              <CardDescription>使用AI分析用户数据并生成洞察报告</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* 第1步：选择用户分群 */}
+              <div className={`space-y-4 ${analysisStep !== 1 ? "opacity-60" : ""}`}>
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-medium flex items-center">
+                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
+                      1
+                    </div>
+                    选择用户分群
+                  </h3>
+                  {analysisStep > 1 ? (
+                    <Button variant="outline" size="sm" onClick={() => setAnalysisStep(1)}>
+                      修改
+                    </Button>
+                  ) : (
+                    <Button variant="outline" onClick={() => setIsUserGroupDialogOpen(true)}>
+                      <Users className="mr-2 h-4 w-4" />
+                      选择用户分群
+                    </Button>
+                  )}
+                </div>
+
+                {selectedUserGroup && (
+                  <div className="p-4 border rounded-lg bg-muted/50">
+                    <div className="flex justify-between items-center">
+                      <div className="flex items-center gap-2">
+                        <Users className="h-5 w-5 text-muted-foreground" />
+                        <span className="font-medium">已选择用户分群：</span>
+                        <Badge className="bg-blue-100 text-blue-800">{selectedUserGroup}</Badge>
+                      </div>
+                      {analysisStep === 1 && (
+                        <Button
+                          onClick={() => {
+                            setAnalysisStep(2)
+                          }}
+                          disabled={!selectedUserGroup}
+                        >
+                          下一步 <ChevronRight className="ml-1 h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <Separator />
+
+              {/* 第2步：选择分析类型 */}
+              <div
+                className={`space-y-4 ${analysisStep !== 2 ? (analysisStep > 2 ? "opacity-60" : "opacity-40") : ""}`}
+              >
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-medium flex items-center">
+                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
+                      2
+                    </div>
+                    选择分析类型
+                  </h3>
+                  {analysisStep > 2 && (
+                    <Button variant="outline" size="sm" onClick={() => setAnalysisStep(2)}>
+                      修改
+                    </Button>
+                  )}
+                </div>
+
+                {analysisStep >= 2 && (
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <Card
+                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${analysisType === "behavior" ? "border-primary" : "border-transparent"}`}
+                      onClick={() => setAnalysisType("behavior")}
+                    >
+                      <CardHeader className="pb-2">
+                        <CardTitle className="text-base">用户行为分析</CardTitle>
+                      </CardHeader>
+                      <CardContent className="text-sm text-muted-foreground">
+                        分析用户的行为模式、偏好和习惯
+                      </CardContent>
+                      <CardFooter>
+                        {analysisType === "behavior" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
+                      </CardFooter>
+                    </Card>
+                    <Card
+                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${analysisType === "value" ? "border-primary" : "border-transparent"}`}
+                      onClick={() => setAnalysisType("value")}
+                    >
+                      <CardHeader className="pb-2">
+                        <CardTitle className="text-base">用户估值分析</CardTitle>
+                      </CardHeader>
+                      <CardContent className="text-sm text-muted-foreground">分析用户的价值分布和潜在价值</CardContent>
+                      <CardFooter>
+                        {analysisType === "value" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
+                      </CardFooter>
+                    </Card>
+                    <Card
+                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${analysisType === "churn" ? "border-primary" : "border-transparent"}`}
+                      onClick={() => setAnalysisType("churn")}
+                    >
+                      <CardHeader className="pb-2">
+                        <CardTitle className="text-base">用户流失预警</CardTitle>
+                      </CardHeader>
+                      <CardContent className="text-sm text-muted-foreground">
+                        预测可能流失的用户并提供挽留建议
+                      </CardContent>
+                      <CardFooter>
+                        {analysisType === "churn" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
+                      </CardFooter>
+                    </Card>
+                  </div>
+                )}
+
+                {analysisStep === 2 && analysisType && (
+                  <div className="flex justify-end">
+                    <Button onClick={() => setAnalysisStep(3)}>
+                      下一步 <ChevronRight className="ml-1 h-4 w-4" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              <Separator />
+
+              {/* 第3步：分析参数设置 */}
+              <div
+                className={`space-y-4 ${analysisStep !== 3 ? (analysisStep > 3 ? "opacity-60" : "opacity-40") : ""}`}
+              >
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-medium flex items-center">
+                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
+                      3
+                    </div>
+                    分析参数设置
+                  </h3>
+                  {analysisStep > 3 && (
+                    <Button variant="outline" size="sm" onClick={() => setAnalysisStep(3)}>
+                      修改
+                    </Button>
+                  )}
+                </div>
+
+                {analysisStep >= 3 && (
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="time-range">时间范围</Label>
+                      <Select defaultValue="30days">
+                        <SelectTrigger id="time-range">
+                          <SelectValue placeholder="选择时间范围" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="7days">最近7天</SelectItem>
+                          <SelectItem value="30days">最近30天</SelectItem>
+                          <SelectItem value="90days">最近90天</SelectItem>
+                          <SelectItem value="custom">自定义范围</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="analysis-depth">分析深度</Label>
+                      <Select defaultValue="medium">
+                        <SelectTrigger id="analysis-depth">
+                          <SelectValue placeholder="选择分析深度" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="basic">基础分析</SelectItem>
+                          <SelectItem value="medium">中等深度</SelectItem>
+                          <SelectItem value="deep">深度分析</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                )}
+
+                {analysisStep === 3 && (
+                  <div className="flex justify-end">
+                    <Button onClick={() => setAnalysisStep(4)}>
+                      下一步 <ChevronRight className="ml-1 h-4 w-4" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              <Separator />
+
+              {/* 第4步：报告设置 */}
+              <div className={`space-y-4 ${analysisStep !== 4 ? "opacity-40" : ""}`}>
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-medium flex items-center">
+                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
+                      4
+                    </div>
+                    报告设置
+                  </h3>
+                </div>
+
+                {analysisStep >= 4 && (
+                  <div className="space-y-4">
+                    <div className="flex flex-col space-y-2">
+                      <Label htmlFor="email">发送分析报告至</Label>
+                      <Input
+                        id="email"
+                        type="email"
+                        placeholder="输入邮箱地址"
+                        value={emailAddress}
+                        onChange={(e) => setEmailAddress(e.target.value)}
+                      />
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <Switch id="schedule-report" checked={scheduleReport} onCheckedChange={setScheduleReport} />
+                      <Label htmlFor="schedule-report">定期发送报告</Label>
+                    </div>
+                    {scheduleReport && (
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
+                        <div className="space-y-2">
+                          <Label htmlFor="schedule-frequency">发送频率</Label>
+                          <Select defaultValue="weekly">
+                            <SelectTrigger id="schedule-frequency">
+                              <SelectValue placeholder="选择发送频率" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="daily">每日</SelectItem>
+                              <SelectItem value="weekly">每周</SelectItem>
+                              <SelectItem value="monthly">每月</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                        <div className="space-y-2">
+                          <Label htmlFor="schedule-time">发送时间</Label>
+                          <Select defaultValue="morning">
+                            <SelectTrigger id="schedule-time">
+                              <SelectValue placeholder="选择发送时间" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="morning">上午 9:00</SelectItem>
+                              <SelectItem value="noon">中午 12:00</SelectItem>
+                              <SelectItem value="evening">下午 6:00</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            </CardContent>
+            <CardFooter className="flex justify-between">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setAnalysisStep(1)
+                  setAnalysisType("")
+                }}
+              >
+                重置
+              </Button>
+              <Button disabled={analysisStep < 4 || !emailAddress}>
+                <Sparkles className="mr-2 h-4 w-4" />
+                开始分析
+              </Button>
+            </CardFooter>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>分析结果预览</CardTitle>
+              <CardDescription>AI生成的数据分析结果</CardDescription>
+            </CardHeader>
+            <CardContent className="h-96 flex items-center justify-center">
+              {selectedUserGroup && analysisStep === 4 ? (
+                <div className="text-center space-y-4">
+                  <BarChart className="h-16 w-16 mx-auto text-primary" />
+                  <p className="text-lg font-medium">分析结果将在这里显示</p>
+                  <p className="text-muted-foreground">点击"开始分析"按钮生成分析报告</p>
+                  <div className="flex justify-center gap-2 pt-4">
+                    <Button variant="outline">
+                      <Download className="mr-2 h-4 w-4" />
+                      下载报告
+                    </Button>
+                    <Button>
+                      <Mail className="mr-2 h-4 w-4" />
+                      发送报告
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div className="text-center text-muted-foreground">
+                  <Users className="h-16 w-16 mx-auto mb-4" />
+                  <p className="text-lg">请完成所有分析步骤</p>
+                  <Button variant="outline" className="mt-4" onClick={() => setIsUserGroupDialogOpen(true)}>
+                    <Users className="mr-2 h-4 w-4" />
+                    开始设置
+                  </Button>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="marketing-strategy" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>AI 营销策略</CardTitle>
+              <CardDescription>使用AI生成针对性的营销策略和建议</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              {/* 第1步：选择目标用户分群 */}
+              <div className={`space-y-4 ${strategyStep !== 1 ? "opacity-60" : ""}`}>
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-medium flex items-center">
+                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
+                      1
+                    </div>
+                    选择目标用户分群
+                  </h3>
+                  {strategyStep > 1 ? (
+                    <Button variant="outline" size="sm" onClick={() => setStrategyStep(1)}>
+                      修改
+                    </Button>
+                  ) : (
+                    <Button variant="outline" onClick={() => setIsUserGroupDialogOpen(true)}>
+                      <Users className="mr-2 h-4 w-4" />
+                      选择用户分群
+                    </Button>
+                  )}
+                </div>
+
+                {selectedUserGroup && (
+                  <div className="p-4 border rounded-lg bg-muted/50">
+                    <div className="flex justify-between items-center">
+                      <div className="flex items-center gap-2">
+                        <Users className="h-5 w-5 text-muted-foreground" />
+                        <span className="font-medium">已选择用户分群：</span>
+                        <Badge className="bg-blue-100 text-blue-800">{selectedUserGroup}</Badge>
+                      </div>
+                      {strategyStep === 1 && (
+                        <Button
+                          onClick={() => {
+                            setStrategyStep(2)
+                          }}
+                          disabled={!selectedUserGroup}
+                        >
+                          下一步 <ChevronRight className="ml-1 h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <Separator />
+
+              {/* 第2步：选择策略类型 */}
+              <div
+                className={`space-y-4 ${strategyStep !== 2 ? (strategyStep > 2 ? "opacity-60" : "opacity-40") : ""}`}
+              >
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-medium flex items-center">
+                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
+                      2
+                    </div>
+                    选择策略类型
+                  </h3>
+                  {strategyStep > 2 && (
+                    <Button variant="outline" size="sm" onClick={() => setStrategyStep(2)}>
+                      修改
+                    </Button>
+                  )}
+                </div>
+
+                {strategyStep >= 2 && (
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <Card
+                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${strategyType === "sales" ? "border-primary" : "border-transparent"}`}
+                      onClick={() => setStrategyType("sales")}
+                    >
+                      <CardHeader className="pb-2">
+                        <CardTitle className="text-base">销售预测</CardTitle>
+                      </CardHeader>
+                      <CardContent className="text-sm text-muted-foreground">
+                        预测未来销售趋势并提供增长建议
+                      </CardContent>
+                      <CardFooter>
+                        {strategyType === "sales" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
+                      </CardFooter>
+                    </Card>
+                    <Card
+                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${strategyType === "reach" ? "border-primary" : "border-transparent"}`}
+                      onClick={() => setStrategyType("reach")}
+                    >
+                      <CardHeader className="pb-2">
+                        <CardTitle className="text-base">用户触达策略</CardTitle>
+                      </CardHeader>
+                      <CardContent className="text-sm text-muted-foreground">
+                        生成针对性的用户触达和转化策略
+                      </CardContent>
+                      <CardFooter>
+                        {strategyType === "reach" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
+                      </CardFooter>
+                    </Card>
+                    <Card
+                      className={`border-2 cursor-pointer hover:shadow-md transition-all ${strategyType === "content" ? "border-primary" : "border-transparent"}`}
+                      onClick={() => setStrategyType("content")}
+                    >
+                      <CardHeader className="pb-2">
+                        <CardTitle className="text-base">内容营销策略</CardTitle>
+                      </CardHeader>
+                      <CardContent className="text-sm text-muted-foreground">
+                        生成针对目标用户的内容营销策略
+                      </CardContent>
+                      <CardFooter>
+                        {strategyType === "content" && <Badge className="bg-primary/10 text-primary">已选择</Badge>}
+                      </CardFooter>
+                    </Card>
+                  </div>
+                )}
+
+                {strategyStep === 2 && strategyType && (
+                  <div className="flex justify-end">
+                    <Button onClick={() => setStrategyStep(3)}>
+                      下一步 <ChevronRight className="ml-1 h-4 w-4" />
+                    </Button>
+                  </div>
+                )}
+              </div>
+
+              <Separator />
+
+              {/* 第3步：策略参数设置 */}
+              <div className={`space-y-4 ${strategyStep !== 3 ? "opacity-40" : ""}`}>
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-medium flex items-center">
+                    <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-white text-sm mr-2">
+                      3
+                    </div>
+                    策略参数设置
+                  </h3>
+                </div>
+
+                {strategyStep >= 3 && (
+                  <>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div className="space-y-2">
+                        <Label htmlFor="strategy-goal">营销目标</Label>
+                        <Select defaultValue="conversion">
+                          <SelectTrigger id="strategy-goal">
+                            <SelectValue placeholder="选择营销目标" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="awareness">提升品牌认知</SelectItem>
+                            <SelectItem value="engagement">增加用户互动</SelectItem>
+                            <SelectItem value="conversion">提高转化率</SelectItem>
+                            <SelectItem value="retention">提升用户留存</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="strategy-budget">预算范围</Label>
+                        <Select defaultValue="medium">
+                          <SelectTrigger id="strategy-budget">
+                            <SelectValue placeholder="选择预算范围" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="low">低预算</SelectItem>
+                            <SelectItem value="medium">中等预算</SelectItem>
+                            <SelectItem value="high">高预算</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="strategy-notes">补充说明</Label>
+                      <Textarea
+                        id="strategy-notes"
+                        placeholder="请输入任何补充说明或特殊要求..."
+                        className="min-h-[100px]"
+                      />
+                    </div>
+                    <div className="space-y-4">
+                      <div className="flex flex-col space-y-2">
+                        <Label htmlFor="email-strategy">发送策略报告至</Label>
+                        <Input
+                          id="email-strategy"
+                          type="email"
+                          placeholder="输入邮箱地址"
+                          value={emailAddress}
+                          onChange={(e) => setEmailAddress(e.target.value)}
+                        />
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <Switch id="schedule-strategy" checked={scheduleReport} onCheckedChange={setScheduleReport} />
+                        <Label htmlFor="schedule-strategy">定期更新策略</Label>
+                      </div>
+                      {scheduleReport && (
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pl-6">
+                          <div className="space-y-2">
+                            <Label htmlFor="update-frequency">更新频率</Label>
+                            <Select defaultValue="monthly">
+                              <SelectTrigger id="update-frequency">
+                                <SelectValue placeholder="选择更新频率" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="weekly">每周</SelectItem>
+                                <SelectItem value="biweekly">每两周</SelectItem>
+                                <SelectItem value="monthly">每月</SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            </CardContent>
+            <CardFooter className="flex justify-between">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setStrategyStep(1)
+                  setStrategyType("")
+                }}
+              >
+                重置
+              </Button>
+              <Button disabled={strategyStep < 3 || !emailAddress}>
+                <Sparkles className="mr-2 h-4 w-4" />
+                生成策略
+              </Button>
+            </CardFooter>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>策略建议预览</CardTitle>
+              <CardDescription>AI生成的营销策略建议</CardDescription>
+            </CardHeader>
+            <CardContent className="h-96 flex items-center justify-center">
+              {selectedUserGroup && strategyStep === 3 ? (
+                <div className="text-center space-y-4">
+                  <TrendingUp className="h-16 w-16 mx-auto text-primary" />
+                  <p className="text-lg font-medium">策略建议将在这里显示</p>
+                  <p className="text-muted-foreground">点击"生成策略"按钮生成营销策略</p>
+                  <div className="flex justify-center gap-2 pt-4">
+                    <Button variant="outline">
+                      <Download className="mr-2 h-4 w-4" />
+                      下载策略
+                    </Button>
+                    <Button>
+                      <Mail className="mr-2 h-4 w-4" />
+                      发送策略
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div className="text-center text-muted-foreground">
+                  <Users className="h-16 w-16 mx-auto mb-4" />
+                  <p className="text-lg">请完成所有策略步骤</p>
+                  <Button variant="outline" className="mt-4" onClick={() => setIsUserGroupDialogOpen(true)}>
+                    <Users className="mr-2 h-4 w-4" />
+                    开始设置
+                  </Button>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      <UserGroupSelectionDialog
+        isOpen={isUserGroupDialogOpen}
+        setIsOpen={setIsUserGroupDialogOpen}
+        onSelect={setSelectedUserGroup}
+      />
+    </div>
+  )
+}
+
+// 用户分群选择对话框
+function UserGroupSelectionDialog({
+  isOpen,
+  setIsOpen,
+  onSelect,
+}: {
+  isOpen: boolean
+  setIsOpen: (open: boolean) => void
+  onSelect: (group: string) => void
+}) {
+  // 模拟用户分群数据
+  const userGroups = [
+    {
+      id: "1",
+      name: "高价值用户",
+      description: "消费能力强，购买频率高的用户",
+      count: 12456,
+      category: "用户资产",
+      lastUpdated: "2023-07-20",
+    },
+    {
+      id: "2",
+      name: "活跃用户",
+      description: "近30天内有活动的用户",
+      count: 45678,
+      category: "用户资产",
+      lastUpdated: "2023-07-20",
+    },
+    {
+      id: "3",
+      name: "地摊商户",
+      description: "从事地摊相关业务的用户",
+      count: 8765,
+      category: "地摊相关",
+      lastUpdated: "2023-07-19",
+    },
+    {
+      id: "4",
+      name: "樊登读书会员",
+      description: "樊登读书平台的会员用户",
+      count: 15678,
+      category: "樊登读书",
+      lastUpdated: "2023-07-18",
+    },
+    {
+      id: "5",
+      name: "魔兽玩家",
+      description: "魔兽世界游戏的活跃玩家",
+      count: 23456,
+      category: "魔兽世界",
+      lastUpdated: "2023-07-17",
+    },
+    {
+      id: "6",
+      name: "流失风险用户",
+      description: "有流失风险的高价值用户",
+      count: 5678,
+      category: "用户资产",
+      lastUpdated: "2023-07-16",
+    },
+  ]
+
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedCategory, setSelectedCategory] = useState("all")
+
+  // 过滤用户分群
+  const filteredGroups = userGroups.filter((group) => {
+    const matchesSearch =
+      group.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      group.description.toLowerCase().includes(searchQuery.toLowerCase())
+
+    const matchesCategory = selectedCategory === "all" || group.category === selectedCategory
+
+    return matchesSearch && matchesCategory
+  })
+
+  // 获取所有分类
+  const categories = ["all", ...new Set(userGroups.map((group) => group.category))]
+
+  const handleSelect = (group: string) => {
+    onSelect(group)
+    setIsOpen(false)
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>选择用户分群</DialogTitle>
+          <DialogDescription>从用户画像中选择要分析的用户分群</DialogDescription>
+        </DialogHeader>
+        <div className="py-4 space-y-4">
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="relative flex-1">
+              <Input
+                placeholder="搜索用户分群..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+              <SelectTrigger className="w-full md:w-[180px]">
+                <SelectValue placeholder="选择场景分类" />
+              </SelectTrigger>
+              <SelectContent>
+                {categories.map((category) => (
+                  <SelectItem key={category} value={category}>
+                    {category === "all" ? "所有场景" : category}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="max-h-[300px] overflow-y-auto space-y-2">
+            {filteredGroups.map((group) => (
+              <div
+                key={group.id}
+                className="p-3 border rounded-lg hover:bg-muted/50 cursor-pointer"
+                onClick={() => handleSelect(group.name)}
+              >
+                <div className="flex justify-between items-start">
+                  <div>
+                    <div className="font-medium">{group.name}</div>
+                    <div className="text-sm text-muted-foreground">{group.description}</div>
+                  </div>
+                  <Badge className="bg-blue-100 text-blue-800">{group.category}</Badge>
+                </div>
+                <div className="flex justify-between items-center mt-2 text-sm text-muted-foreground">
+                  <div className="flex items-center">
+                    <Users className="h-3 w-3 mr-1" />
+                    {group.count.toLocaleString()} 用户
+                  </div>
+                  <div className="flex items-center">
+                    <Clock className="h-3 w-3 mr-1" />
+                    更新于 {group.lastUpdated}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setIsOpen(false)}>
+            取消
+          </Button>
+          <Button onClick={() => setIsOpen(false)}>创建新分群</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/app/api-interface/loading.tsx b/app/api-interface/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/api-interface/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/api-interface/page.tsx b/app/api-interface/page.tsx
new file mode 100644
index 0000000..a3cf23c
--- /dev/null
+++ b/app/api-interface/page.tsx
@@ -0,0 +1,152 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { ArrowLeft } from "lucide-react"
+import { toast } from "@/components/ui/use-toast"
+import { useRouter } from "next/navigation"
+
+interface ApiInterface {
+  id: string
+  name: string
+  endpoint: string
+  method: string
+  status: "active" | "inactive" | "deprecated"
+  stats: {
+    totalCalls: number
+    successCalls: number
+    errorCalls: number
+    successRate: number
+    avgResponseTime: number
+  }
+  lastUpdated: string
+  trend: { date: string; calls: number; success: number; responseTime: number }[]
+  description: string
+  authentication: string
+}
+
+export default function ApiInterfacePage() {
+  const router = useRouter()
+  const [apis, setApis] = useState<ApiInterface[]>([
+    {
+      id: "1",
+      name: "用户数据查询接口",
+      endpoint: "/api/users/query",
+      method: "GET",
+      status: "active",
+      stats: {
+        totalCalls: 1245632,
+        successCalls: 1220578,
+        errorCalls: 25054,
+        successRate: 98,
+        avgResponseTime: 120,
+      },
+      lastUpdated: "2023-07-15 14:30",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
+        calls: Math.floor(Math.random() * 20000) + 150000,
+        success: Math.floor(Math.random() * 18000) + 145000,
+        responseTime: Math.floor(Math.random() * 50) + 100,
+      })),
+      description: "查询用户基本信息、标签和行为数据",
+      authentication: "API Key",
+    },
+    {
+      id: "2",
+      name: "用户标签更新接口",
+      endpoint: "/api/users/tags/update",
+      method: "POST",
+      status: "active",
+      stats: {
+        totalCalls: 856421,
+        successCalls: 845789,
+        errorCalls: 10632,
+        successRate: 99,
+        avgResponseTime: 150,
+      },
+      lastUpdated: "2023-07-15 13:45",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
+        calls: Math.floor(Math.random() * 15000) + 100000,
+        success: Math.floor(Math.random() * 14000) + 98000,
+        responseTime: Math.floor(Math.random() * 40) + 130,
+      })),
+      description: "更新用户标签信息",
+      authentication: "OAuth 2.0",
+    },
+    {
+      id: "3",
+      name: "用户行为分析接口",
+      endpoint: "/api/analytics/user-behavior",
+      method: "GET",
+      status: "active",
+      stats: {
+        totalCalls: 542367,
+        successCalls: 538945,
+        errorCalls: 3422,
+        successRate: 99.5,
+        avgResponseTime: 180,
+      },
+      lastUpdated: "2023-07-15 12:20",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `2023-07-${String(i + 9).padStart(2, "0")}`,
+        calls: Math.floor(Math.random() * 10000) + 70000,
+        success: Math.floor(Math.random() * 9800) + 69000,
+        responseTime: Math.floor(Math.random() * 30) + 170,
+      })),
+      description: "获取用户行为分析数据",
+      authentication: "API Key",
+    },
+  ])
+
+  const [isApiDocsOpen, setIsApiDocsOpen] = useState(false)
+  const [selectedApiId, setSelectedApiId] = useState<string | null>(null)
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const handleViewDocs = (apiId: string) => {
+    setSelectedApiId(apiId)
+    setIsApiDocsOpen(true)
+  }
+
+  const copyApi = (apiId: string) => {
+    const apiToCopy = apis.find((api) => api.id === apiId)
+    if (apiToCopy) {
+      const newApi = {
+        ...apiToCopy,
+        id: `${Date.now()}`,
+        name: `${apiToCopy.name} (副本)`,
+        status: "inactive" as const,
+        lastUpdated: new Date().toLocaleString(),
+      }
+      setApis([...apis, newApi])
+      toast({
+        title: "复制成功",
+        description: "已创建接口副本",
+      })
+    }
+  }
+
+  const selectedApi = apis.find((api) => api.id === selectedApiId)
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="icon" onClick={() => router.push("/data-platform")}>
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <h1 className="text-3xl font-bold">API接口已整合</h1>
+      </div>
+
+      <Card className="border shadow-md">
+        <CardHeader>
+          <CardTitle>API接口已整合到数据中台</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="mb-4">API接口功能已经整合到数据中台中，请前往数据中台页面查看和管理API接口。</p>
+          <Button onClick={() => router.push("/data-platform")}>前往数据中台</Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/api/acquisition/[planId]/orders/route.ts b/app/api/acquisition/[planId]/orders/route.ts
new file mode 100644
index 0000000..08bc6bc
--- /dev/null
+++ b/app/api/acquisition/[planId]/orders/route.ts
@@ -0,0 +1,19 @@
+import { NextResponse } from "next/server"
+import type { OrderFormData } from "@/types/acquisition"
+
+export async function POST(request: Request, { params }: { params: { planId: string } }) {
+  try {
+    const data: OrderFormData = await request.json()
+
+    // 这里应该添加实际的数据库存储逻辑
+    console.log("Received order:", data, "for plan:", params.planId)
+
+    // 模拟成功响应
+    return NextResponse.json({
+      success: true,
+      message: "订单已成功提交",
+    })
+  } catch (error) {
+    return NextResponse.json({ success: false, message: "订单提交失败" }, { status: 500 })
+  }
+}
diff --git a/app/api/auth.ts b/app/api/auth.ts
new file mode 100644
index 0000000..529d07d
--- /dev/null
+++ b/app/api/auth.ts
@@ -0,0 +1,68 @@
+// API请求工具函数
+import { toast } from "@/components/ui/use-toast"
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.example.com"
+
+// 带有认证的请求函数
+export async function authFetch(url: string, options: RequestInit = {}) {
+  const token = localStorage.getItem("token")
+
+  // 合并headers
+  let headers = { ...options.headers }
+
+  // 如果有token，添加到请求头
+  if (token) {
+    headers = {
+      ...headers,
+      Token: `${token}`,
+    }
+  }
+
+  try {
+    const response = await fetch(`${API_BASE_URL}${url}`, {
+      ...options,
+      headers,
+    })
+
+    const data = await response.json()
+
+    // 检查token是否过期（仅当有token时）
+    if (token && (data.code === 401 || data.code === 403)) {
+      // 清除token
+      localStorage.removeItem("token")
+
+      // 暂时不重定向到登录页
+      // if (typeof window !== "undefined") {
+      //   window.location.href = "/login"
+      // }
+
+      console.warn("登录已过期")
+    }
+
+    return data
+  } catch (error) {
+    console.error("API请求错误:", error)
+    toast({
+      variant: "destructive",
+      title: "请求失败",
+      description: error instanceof Error ? error.message : "网络错误，请稍后重试",
+    })
+    throw error
+  }
+}
+
+// 不需要认证的请求函数
+export async function publicFetch(url: string, options: RequestInit = {}) {
+  try {
+    const response = await fetch(`${API_BASE_URL}${url}`, options)
+    return await response.json()
+  } catch (error) {
+    console.error("API请求错误:", error)
+    toast({
+      variant: "destructive",
+      title: "请求失败",
+      description: error instanceof Error ? error.message : "网络错误，请稍后重试",
+    })
+    throw error
+  }
+}
diff --git a/app/api/database-structure/route.ts b/app/api/database-structure/route.ts
new file mode 100644
index 0000000..048a793
--- /dev/null
+++ b/app/api/database-structure/route.ts
@@ -0,0 +1,25 @@
+import { NextResponse } from "next/server"
+import { getDatabases, getDatabaseStructure } from "@/lib/db-connector"
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const database = searchParams.get("database")
+
+    if (database) {
+      // 获取指定数据库的结构
+      const structure = await getDatabaseStructure(database)
+      return NextResponse.json({ success: true, data: structure })
+    } else {
+      // 获取所有数据库列表
+      const databases = await getDatabases()
+      return NextResponse.json({ success: true, data: databases })
+    }
+  } catch (error) {
+    console.error("数据库结构查询失败:", error)
+    return NextResponse.json(
+      { success: false, message: "数据库结构查询失败", error: (error as Error).message },
+      { status: 500 },
+    )
+  }
+}
diff --git a/app/api/devices/route.ts b/app/api/devices/route.ts
new file mode 100644
index 0000000..1a1d2e5
--- /dev/null
+++ b/app/api/devices/route.ts
@@ -0,0 +1,81 @@
+import { NextResponse } from "next/server"
+import type {
+  CreateDeviceParams,
+  QueryDeviceParams,
+  Device,
+  ApiResponse,
+  DeviceStatus, // Ensure DeviceStatus is imported correctly
+  DeviceType,
+} from "@/types/device"
+
+// 设备管理路由处理
+export async function POST(request: Request) {
+  try {
+    const body: CreateDeviceParams = await request.json()
+
+    // TODO: 实现创建设备的具体逻辑
+    const device: Device = {
+      id: "generated-id",
+      ...body,
+      status: DeviceStatus.OFFLINE, // Using DeviceStatus from the import
+      lastOnlineTime: new Date().toISOString(),
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    }
+
+    const response: ApiResponse<Device> = {
+      code: 0,
+      message: "创建成功",
+      data: device,
+    }
+
+    return NextResponse.json(response)
+  } catch (error) {
+    return NextResponse.json(
+      {
+        code: 500,
+        message: "创建失败",
+        data: null,
+      },
+      { status: 500 },
+    )
+  }
+}
+
+export async function GET(request: Request) {
+  try {
+    const { searchParams } = new URL(request.url)
+    const params: QueryDeviceParams = {
+      keyword: searchParams.get("keyword") || undefined,
+      status: (searchParams.get("status") as DeviceStatus) || undefined, // Using DeviceStatus from the import
+      type: (searchParams.get("type") as DeviceType) || undefined,
+      tags: searchParams.get("tags") ? JSON.parse(searchParams.get("tags")!) : undefined,
+      dateRange: searchParams.get("dateRange") ? JSON.parse(searchParams.get("dateRange")!) : undefined,
+      page: Number(searchParams.get("page")) || 1,
+      pageSize: Number(searchParams.get("pageSize")) || 20,
+    }
+
+    // TODO: 实现查询设备列表的具体逻辑
+
+    return NextResponse.json({
+      code: 0,
+      message: "查询成功",
+      data: {
+        items: [],
+        total: 0,
+        page: params.page,
+        pageSize: params.pageSize,
+        totalPages: 0,
+      },
+    })
+  } catch (error) {
+    return NextResponse.json(
+      {
+        code: 500,
+        message: "查询失败",
+        data: null,
+      },
+      { status: 500 },
+    )
+  }
+}
diff --git a/app/api/users/route.ts b/app/api/users/route.ts
new file mode 100644
index 0000000..ace987c
--- /dev/null
+++ b/app/api/users/route.ts
@@ -0,0 +1,272 @@
+import { NextResponse } from "next/server"
+import type { TrafficUser } from "@/types/traffic"
+
+// 中文名字生成器数据
+const familyNames = [
+  "张",
+  "王",
+  "李",
+  "赵",
+  "陈",
+  "刘",
+  "杨",
+  "黄",
+  "周",
+  "吴",
+  "朱",
+  "孙",
+  "马",
+  "胡",
+  "郭",
+  "林",
+  "何",
+  "高",
+  "梁",
+  "郑",
+  "罗",
+  "宋",
+  "谢",
+  "唐",
+  "韩",
+  "曹",
+  "许",
+  "邓",
+  "萧",
+  "冯",
+]
+const givenNames1 = [
+  "志",
+  "建",
+  "文",
+  "明",
+  "永",
+  "春",
+  "秀",
+  "金",
+  "水",
+  "玉",
+  "国",
+  "立",
+  "德",
+  "海",
+  "和",
+  "荣",
+  "伟",
+  "新",
+  "英",
+  "佳",
+]
+const givenNames2 = [
+  "华",
+  "平",
+  "军",
+  "强",
+  "辉",
+  "敏",
+  "峰",
+  "磊",
+  "超",
+  "艳",
+  "娜",
+  "霞",
+  "燕",
+  "娟",
+  "静",
+  "丽",
+  "涛",
+  "洋",
+  "勇",
+  "龙",
+]
+
+// 生成固定的用户数据池
+const userPool: TrafficUser[] = Array.from({ length: 1610 }, (_, i) => {
+  const familyName = familyNames[Math.floor(Math.random() * familyNames.length)]
+  const givenName1 = givenNames1[Math.floor(Math.random() * givenNames1.length)]
+  const givenName2 = givenNames2[Math.floor(Math.random() * givenNames2.length)]
+  const fullName = Math.random() > 0.5 ? familyName + givenName1 + givenName2 : familyName + givenName1
+
+  // 生成随机时间（在过去7天内）
+  const date = new Date()
+  date.setDate(date.getDate() - Math.floor(Math.random() * 7))
+
+  return {
+    id: `${Date.now()}-${i}`,
+    avatar: `/placeholder.svg?height=40&width=40&text=${fullName[0]}`,
+    nickname: fullName,
+    wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+    phone: `1${["3", "5", "7", "8", "9"][Math.floor(Math.random() * 5)]}${Array.from({ length: 9 }, () => Math.floor(Math.random() * 10)).join("")}`,
+    region: [
+      "广东深圳",
+      "浙江杭州",
+      "江苏苏州",
+      "北京",
+      "上海",
+      "四川成都",
+      "湖北武汉",
+      "福建厦门",
+      "山东青岛",
+      "河南郑州",
+    ][Math.floor(Math.random() * 10)],
+    note: [
+      "咨询产品价格",
+      "对产品很感兴趣",
+      "准备购买",
+      "需要更多信息",
+      "想了解优惠活动",
+      "询问产品规格",
+      "要求产品demo",
+      "索要产品目录",
+      "询问售后服务",
+      "要求上门演示",
+    ][Math.floor(Math.random() * 10)],
+    status: ["pending", "added", "failed"][Math.floor(Math.random() * 3)] as TrafficUser["status"],
+    addTime: date.toISOString(),
+    source: ["抖音直播", "小红书", "微信朋友圈", "视频号", "公众号", "个人主页"][Math.floor(Math.random() * 6)],
+    assignedTo: "",
+    category: ["potential", "customer", "lost"][Math.floor(Math.random() * 3)] as TrafficUser["category"],
+    tags: [],
+  }
+})
+
+// 计算今日新增数量
+const todayStart = new Date()
+todayStart.setHours(0, 0, 0, 0)
+const todayUsers = userPool.filter((user) => new Date(user.addTime) >= todayStart)
+
+// 生成微信好友数据池
+const generateWechatFriends = (wechatId: string, count: number) => {
+  return Array.from({ length: count }, (_, i) => {
+    const familyName = familyNames[Math.floor(Math.random() * familyNames.length)]
+    const givenName1 = givenNames1[Math.floor(Math.random() * givenNames1.length)]
+    const givenName2 = givenNames2[Math.floor(Math.random() * givenNames2.length)]
+    const fullName = Math.random() > 0.5 ? familyName + givenName1 + givenName2 : familyName + givenName1
+
+    // 生成随机时间（在过去30天内）
+    const date = new Date()
+    date.setDate(date.getDate() - Math.floor(Math.random() * 30))
+
+    return {
+      id: `wechat-${wechatId}-${i}`,
+      avatar: `/placeholder.svg?height=40&width=40&text=${fullName[0]}`,
+      nickname: fullName,
+      wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+      phone: `1${["3", "5", "7", "8", "9"][Math.floor(Math.random() * 5)]}${Array.from({ length: 9 }, () => Math.floor(Math.random() * 10)).join("")}`,
+      region: [
+        "广东深圳",
+        "浙江杭州",
+        "江苏苏州",
+        "北京",
+        "上海",
+        "四川成都",
+        "湖北武汉",
+        "福建厦门",
+        "山东青岛",
+        "河南郑州",
+      ][Math.floor(Math.random() * 10)],
+      note: [
+        "咨询产品价格",
+        "对产品很感兴趣",
+        "准备购买",
+        "需要更多信息",
+        "想了解优惠活动",
+        "询问产品规格",
+        "要求产品demo",
+        "索要产品目录",
+        "询问售后服务",
+        "要求上门演示",
+      ][Math.floor(Math.random() * 10)],
+      status: ["pending", "added", "failed"][Math.floor(Math.random() * 3)] as TrafficUser["status"],
+      addTime: date.toISOString(),
+      source: ["抖音直播", "小红书", "微信朋友圈", "视频号", "公众号", "个人主页", "微信好友"][
+        Math.floor(Math.random() * 7)
+      ],
+      assignedTo: "",
+      category: ["potential", "customer", "lost"][Math.floor(Math.random() * 3)] as TrafficUser["category"],
+      tags: [],
+    }
+  })
+}
+
+// 微信好友数据缓存
+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,
+    },
+  })
+}
diff --git a/app/components/AIRewriteModal.tsx b/app/components/AIRewriteModal.tsx
new file mode 100644
index 0000000..68d3c5a
--- /dev/null
+++ b/app/components/AIRewriteModal.tsx
@@ -0,0 +1,86 @@
+"use client"
+
+import { useState } from "react"
+import { X } from "lucide-react"
+import { Button } from "./ui/button"
+import { Card } from "./ui/card"
+
+interface AIRewriteModalProps {
+  isOpen: boolean
+  onClose: () => void
+  originalContent: string
+}
+
+export function AIRewriteModal({ isOpen, onClose, originalContent }: AIRewriteModalProps) {
+  const [rewrittenContent, setRewrittenContent] = useState("")
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleRewrite = async () => {
+    try {
+      setIsLoading(true)
+      setError(null)
+      // 调用实际的AI改写API
+      const response = await fetch("/api/ai/rewrite", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ content: originalContent }),
+      })
+
+      if (!response.ok) {
+        throw new Error("AI改写请求失败")
+      }
+
+      const data = await response.json()
+      setRewrittenContent(data.rewrittenContent)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "改写过程中发生错误")
+      console.error("AI改写错误:", err)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <Card className="w-full max-w-lg p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-semibold">AI 内容改写</h2>
+          <Button variant="ghost" size="sm" onClick={onClose}>
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+        <div className="space-y-4">
+          <div>
+            <h3 className="font-medium mb-2">原始内容：</h3>
+            <p className="text-sm text-gray-600">{originalContent}</p>
+          </div>
+          <div>
+            <h3 className="font-medium mb-2">改写后内容：</h3>
+            <p className="text-sm text-gray-600">{rewrittenContent || '点击"开始改写"按钮生成内容'}</p>
+          </div>
+        </div>
+        <div className="mt-6 flex justify-end space-x-2">
+          {error && <p className="text-sm text-red-500 mr-auto">{error}</p>}
+          <Button variant="outline" onClick={onClose} disabled={isLoading}>
+            取消
+          </Button>
+          <Button onClick={handleRewrite} disabled={isLoading}>
+            {isLoading ? (
+              <>
+                <span className="mr-2">处理中</span>
+                <span className="animate-spin">⟳</span>
+              </>
+            ) : (
+              "开始改写"
+            )}
+          </Button>
+        </div>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/components/AuthProvider.tsx b/app/components/AuthProvider.tsx
new file mode 100644
index 0000000..4e74693
--- /dev/null
+++ b/app/components/AuthProvider.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react"
+import { useRouter } from "next/navigation"
+
+interface AuthContextType {
+  isAuthenticated: boolean
+  token: string | null
+  login: (token: string) => void
+  logout: () => void
+}
+
+const AuthContext = createContext<AuthContextType>({
+  isAuthenticated: false,
+  token: null,
+  login: () => {},
+  logout: () => {},
+})
+
+export const useAuth = () => useContext(AuthContext)
+
+interface AuthProviderProps {
+  children: ReactNode
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [token, setToken] = useState<string | null>(null)
+  const [isAuthenticated, setIsAuthenticated] = useState(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    // 客户端检查token
+    if (typeof window !== "undefined") {
+      const storedToken = localStorage.getItem("token")
+      if (storedToken) {
+        setToken(storedToken)
+        setIsAuthenticated(true)
+      } else {
+        setIsAuthenticated(false)
+        // 暂时禁用重定向逻辑，允许访问所有页面
+        // 将来需要恢复登录验证时，取消下面注释
+        /*
+        if (pathname !== "/login") {
+          router.push("/login")
+        }
+        */
+      }
+    }
+  }, [])
+
+  const login = (newToken: string) => {
+    localStorage.setItem("token", newToken)
+    setToken(newToken)
+    setIsAuthenticated(true)
+  }
+
+  const logout = () => {
+    localStorage.removeItem("token")
+    setToken(null)
+    setIsAuthenticated(false)
+    // 登出后不强制跳转到登录页
+    // router.push("/login")
+  }
+
+  return <AuthContext.Provider value={{ isAuthenticated, token, login, logout }}>{children}</AuthContext.Provider>
+}
diff --git a/app/components/BindDouyinQRCode.tsx b/app/components/BindDouyinQRCode.tsx
new file mode 100644
index 0000000..6cdcadb
--- /dev/null
+++ b/app/components/BindDouyinQRCode.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { QrCode } from "lucide-react"
+
+export function BindDouyinQRCode() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      <Button variant="ghost" size="icon" onClick={() => setIsOpen(true)}>
+        <QrCode className="h-4 w-4" />
+      </Button>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>绑定抖音号</DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-col items-center p-4">
+            <div className="w-64 h-64 bg-gray-100 rounded-lg flex items-center justify-center">
+              <img src="/placeholder.svg?height=256&width=256" alt="抖音二维码" className="w-full h-full" />
+            </div>
+            <p className="mt-4 text-sm text-gray-600">请使用抖音APP扫描二维码进行绑定</p>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/app/components/BottomNav.tsx b/app/components/BottomNav.tsx
new file mode 100644
index 0000000..c084a13
--- /dev/null
+++ b/app/components/BottomNav.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { Home, Users, BarChart3, Database, Settings } from "lucide-react"
+
+const navItems = [
+  { href: "/", icon: Home, label: "首页" },
+  { href: "/user-portrait", icon: Users, label: "用户画像" },
+  { href: "/user-value", icon: BarChart3, label: "用户估值" },
+  { href: "/data-platform", icon: Database, label: "数据中台" },
+  { href: "/settings", icon: Settings, label: "设置" },
+]
+
+export default function BottomNav() {
+  const pathname = usePathname()
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 glass-nav safe-area-bottom z-50 mx-2 mb-2">
+      <div className="flex justify-around items-center py-2">
+        {navItems.map((item) => {
+          const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href))
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`flex flex-col items-center justify-center px-3 py-2 rounded-xl transition-all duration-300 min-w-0 flex-1 ${
+                isActive ? "glass-heavy text-blue-600 scale-105" : "text-gray-600 hover:glass-light hover:text-blue-500"
+              }`}
+            >
+              <item.icon className={`h-5 w-5 mb-1 ${isActive ? "text-blue-600" : ""}`} />
+              <span className="text-xs font-medium truncate">{item.label}</span>
+            </Link>
+          )
+        })}
+      </div>
+    </nav>
+  )
+}
diff --git a/app/components/Charts.tsx b/app/components/Charts.tsx
new file mode 100644
index 0000000..2cbf159
--- /dev/null
+++ b/app/components/Charts.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts"
+import { BarChart as RechartsBarChart, Bar } from "recharts"
+
+const lineData = [
+  { name: "周一", 新增微信号: 12 },
+  { name: "周二", 新增微信号: 19 },
+  { name: "周三", 新增微信号: 3 },
+  { name: "周四", 新增微信号: 5 },
+  { name: "周五", 新增微信号: 2 },
+  { name: "周六", 新增微信号: 3 },
+  { name: "周日", 新增微信号: 10 },
+]
+
+const barData = [
+  { name: "周一", 新增好友: 120 },
+  { name: "周二", 新增好友: 190 },
+  { name: "周三", 新增好友: 30 },
+  { name: "周四", 新增好友: 50 },
+  { name: "周五", 新增好友: 20 },
+  { name: "周六", 新增好友: 30 },
+  { name: "周日", 新增好友: 100 },
+]
+
+export function LineChart() {
+  return (
+    <ResponsiveContainer width="100%" height={180}>
+      <RechartsLineChart data={lineData}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Line type="monotone" dataKey="新增微信号" stroke="#8884d8" />
+      </RechartsLineChart>
+    </ResponsiveContainer>
+  )
+}
+
+export function BarChart() {
+  return (
+    <ResponsiveContainer width="100%" height={180}>
+      <RechartsBarChart data={barData}>
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Bar dataKey="新增好友" fill="#82ca9d" />
+      </RechartsBarChart>
+    </ResponsiveContainer>
+  )
+}
diff --git a/app/components/CircleSync/ContentSelector.tsx b/app/components/CircleSync/ContentSelector.tsx
new file mode 100644
index 0000000..1d0f3e3
--- /dev/null
+++ b/app/components/CircleSync/ContentSelector.tsx
@@ -0,0 +1,105 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "../ui/card"
+import { Button } from "../ui/button"
+import { Input } from "../ui/input"
+import { ChevronLeft, Search, Plus } from "lucide-react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table"
+
+interface ContentLibrary {
+  id: string
+  name: string
+  type: string
+  count: number
+}
+
+const mockLibraries: ContentLibrary[] = [
+  {
+    id: "1",
+    name: "卡若朋友圈",
+    type: "朋友圈",
+    count: 307,
+  },
+  {
+    id: "2",
+    name: "业务推广内容",
+    type: "朋友圈",
+    count: 156,
+  },
+]
+
+export function ContentSelector({ onPrev, onFinish }) {
+  const [selectedLibraries, setSelectedLibraries] = useState<string[]>([])
+
+  return (
+    <Card className="p-6 max-w-4xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-semibold">选择内容库</h2>
+        <Button>
+          <Plus className="w-4 h-4 mr-2" />
+          新建内容库
+        </Button>
+      </div>
+
+      <div className="flex items-center space-x-4 mb-6">
+        <div className="flex-1">
+          <Input placeholder="搜索内容库" className="w-full" prefix={<Search className="w-4 h-4 text-gray-400" />} />
+        </div>
+      </div>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-12">选择</TableHead>
+            <TableHead>内容库名称</TableHead>
+            <TableHead>类型</TableHead>
+            <TableHead>内容数量</TableHead>
+            <TableHead>操作</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {mockLibraries.map((library) => (
+            <TableRow key={library.id}>
+              <TableCell>
+                <input
+                  type="checkbox"
+                  checked={selectedLibraries.includes(library.id)}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      setSelectedLibraries([...selectedLibraries, library.id])
+                    } else {
+                      setSelectedLibraries(selectedLibraries.filter((id) => id !== library.id))
+                    }
+                  }}
+                />
+              </TableCell>
+              <TableCell>{library.name}</TableCell>
+              <TableCell>{library.type}</TableCell>
+              <TableCell>{library.count}</TableCell>
+              <TableCell>
+                <Button variant="ghost" size="sm">
+                  预览内容
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      <div className="flex justify-between mt-8">
+        <Button variant="outline" onClick={onPrev}>
+          <ChevronLeft className="w-4 h-4 mr-2" />
+          上一步
+        </Button>
+        <Button
+          onClick={onFinish}
+          disabled={selectedLibraries.length === 0}
+          className="bg-green-500 hover:bg-green-600"
+        >
+          完成设置
+        </Button>
+      </div>
+    </Card>
+  )
+}
diff --git a/app/components/CircleSync/DeviceSelector.tsx b/app/components/CircleSync/DeviceSelector.tsx
new file mode 100644
index 0000000..1dbdc8d
--- /dev/null
+++ b/app/components/CircleSync/DeviceSelector.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "../ui/card"
+import { Button } from "../ui/button"
+import { Input } from "../ui/input"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table"
+import { ChevronLeft, ChevronRight, Search, Plus } from "lucide-react"
+
+interface Device {
+  id: string
+  imei: string
+  status: "online" | "offline"
+  friendStatus: string
+}
+
+const mockDevices: Device[] = [
+  {
+    id: "1",
+    imei: "123456789012345",
+    status: "online",
+    friendStatus: "正常",
+  },
+  {
+    id: "2",
+    imei: "987654321098765",
+    status: "offline",
+    friendStatus: "异常",
+  },
+]
+
+export function DeviceSelector({ onNext, onPrev }) {
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+
+  return (
+    <Card className="p-6 max-w-4xl mx-auto">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-xl font-semibold">选择推送设备</h2>
+        <Button>
+          <Plus className="w-4 h-4 mr-2" />
+          添加设备
+        </Button>
+      </div>
+
+      <div className="flex items-center space-x-4 mb-6">
+        <div className="flex-1">
+          <Input
+            placeholder="搜索设备IMEI/备注/手机号"
+            className="w-full"
+            prefix={<Search className="w-4 h-4 text-gray-400" />}
+          />
+        </div>
+      </div>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-12">选择</TableHead>
+            <TableHead>设备IMEI/备注/手机号</TableHead>
+            <TableHead>在线状态</TableHead>
+            <TableHead>加友状态</TableHead>
+            <TableHead>操作</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {mockDevices.map((device) => (
+            <TableRow key={device.id}>
+              <TableCell>
+                <input
+                  type="checkbox"
+                  checked={selectedDevices.includes(device.id)}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      setSelectedDevices([...selectedDevices, device.id])
+                    } else {
+                      setSelectedDevices(selectedDevices.filter((id) => id !== device.id))
+                    }
+                  }}
+                />
+              </TableCell>
+              <TableCell>{device.imei}</TableCell>
+              <TableCell>
+                <span
+                  className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
+                    device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                  }`}
+                >
+                  {device.status === "online" ? "在线" : "离线"}
+                </span>
+              </TableCell>
+              <TableCell>
+                <span
+                  className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
+                    device.friendStatus === "正常" ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"
+                  }`}
+                >
+                  {device.friendStatus}
+                </span>
+              </TableCell>
+              <TableCell>
+                <Button variant="ghost" size="sm">
+                  查看详情
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+
+      <div className="flex justify-between mt-8">
+        <Button variant="outline" onClick={onPrev}>
+          <ChevronLeft className="w-4 h-4 mr-2" />
+          上一步
+        </Button>
+        <Button onClick={onNext} disabled={selectedDevices.length === 0}>
+          下一步
+          <ChevronRight className="w-4 h-4 ml-2" />
+        </Button>
+      </div>
+    </Card>
+  )
+}
diff --git a/app/components/CircleSync/TaskSetup.tsx b/app/components/CircleSync/TaskSetup.tsx
new file mode 100644
index 0000000..f14bf4a
--- /dev/null
+++ b/app/components/CircleSync/TaskSetup.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "../ui/card"
+import { Button } from "../ui/button"
+import { Input } from "../ui/input"
+import { Switch } from "../ui/switch"
+import { Label } from "../ui/label"
+import { ChevronLeft, ChevronRight, Plus, Minus } from "lucide-react"
+
+interface TaskSetupProps {
+  onNext?: () => void
+  onPrev?: () => void
+  step: number
+}
+
+export function TaskSetup({ onNext, onPrev, step }: TaskSetupProps) {
+  const [syncCount, setSyncCount] = useState(5)
+  const [startTime, setStartTime] = useState("06:00")
+  const [endTime, setEndTime] = useState("23:59")
+  const [isEnabled, setIsEnabled] = useState(true)
+  const [accountType, setAccountType] = useState("business") // business or personal
+
+  return (
+    <Card className="p-6 max-w-2xl mx-auto">
+      <div className="flex items-center justify-between mb-8">
+        <h2 className="text-xl font-semibold">朋友圈同步任务</h2>
+        <div className="flex items-center space-x-2">
+          <Label htmlFor="task-enabled">是否启用</Label>
+          <Switch id="task-enabled" checked={isEnabled} onCheckedChange={setIsEnabled} />
+        </div>
+      </div>
+
+      <div className="space-y-6">
+        <div className="grid gap-4">
+          <Label>任务名称</Label>
+          <Input placeholder="请输入任务名称" />
+        </div>
+
+        <div className="grid gap-4">
+          <Label>允许发布的时间段</Label>
+          <div className="flex items-center space-x-2">
+            <Input type="time" value={startTime} onChange={(e) => setStartTime(e.target.value)} className="w-32" />
+            <span>至</span>
+            <Input type="time" value={endTime} onChange={(e) => setEndTime(e.target.value)} className="w-32" />
+          </div>
+        </div>
+
+        <div className="grid gap-4">
+          <Label>每日同步数量</Label>
+          <div className="flex items-center space-x-4">
+            <Button variant="outline" size="icon" onClick={() => setSyncCount(Math.max(1, syncCount - 1))}>
+              <Minus className="h-4 w-4" />
+            </Button>
+            <span className="w-12 text-center">{syncCount}</span>
+            <Button variant="outline" size="icon" onClick={() => setSyncCount(syncCount + 1)}>
+              <Plus className="h-4 w-4" />
+            </Button>
+            <span className="text-gray-500">条朋友圈</span>
+          </div>
+        </div>
+
+        <div className="grid gap-4">
+          <Label>账号类型</Label>
+          <div className="flex space-x-4">
+            <Button
+              variant={accountType === "business" ? "default" : "outline"}
+              onClick={() => setAccountType("business")}
+              className="w-24"
+            >
+              业务号
+            </Button>
+            <Button
+              variant={accountType === "personal" ? "default" : "outline"}
+              onClick={() => setAccountType("personal")}
+              className="w-24"
+            >
+              人设号
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-between mt-8">
+        {step > 1 ? (
+          <Button variant="outline" onClick={onPrev}>
+            <ChevronLeft className="w-4 h-4 mr-2" />
+            上一步
+          </Button>
+        ) : (
+          <div />
+        )}
+        <Button onClick={onNext}>
+          下一步
+          <ChevronRight className="w-4 h-4 ml-2" />
+        </Button>
+      </div>
+    </Card>
+  )
+}
diff --git a/app/components/DeviceSelector.tsx b/app/components/DeviceSelector.tsx
new file mode 100644
index 0000000..ea52641
--- /dev/null
+++ b/app/components/DeviceSelector.tsx
@@ -0,0 +1,297 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Filter, Search, RefreshCw, AlertCircle } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { toast } from "@/components/ui/use-toast"
+import { Progress } from "@/components/ui/progress"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+import { useDebounce } from "@/hooks/use-debounce"
+import { useVirtualizer } from "@tanstack/react-virtual"
+
+interface WechatAccount {
+  wechatId: string
+  nickname: string
+  remainingAdds: number
+  maxDailyAdds: number
+  todayAdded: number
+}
+
+interface Device {
+  id: string
+  imei: string
+  name: string
+  status: "online" | "offline"
+  wechatAccounts: WechatAccount[]
+  usedInPlans: number
+}
+
+interface DeviceSelectorProps {
+  onSelect: (selectedDevices: string[]) => void
+  initialSelectedDevices?: string[]
+  excludeUsedDevices?: boolean
+}
+
+export function DeviceSelector({
+  onSelect,
+  initialSelectedDevices = [],
+  excludeUsedDevices = true,
+}: DeviceSelectorProps) {
+  const [devices, setDevices] = useState<Device[]>([])
+  const [selectedDevices, setSelectedDevices] = useState<string[]>(initialSelectedDevices)
+  const [searchQuery, setSearchQuery] = useState("")
+  const debouncedSearchQuery = useDebounce(searchQuery, 300)
+  const [statusFilter, setStatusFilter] = useState("all")
+  const [currentPage, setCurrentPage] = useState(1)
+  const devicesPerPage = 10
+  const [filteredDevices, setFilteredDevices] = useState<Device[]>([])
+
+  const parentRef = useRef<HTMLDivElement>(null)
+
+  const rowVirtualizer = useVirtualizer({
+    count: filteredDevices.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 120, // 估计每个设备卡片的高度
+    overscan: 5,
+  })
+
+  useEffect(() => {
+    // 模拟获取设备数据
+    const fetchDevices = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 500))
+      const mockDevices = Array.from({ length: 42 }, (_, i) => ({
+        id: `device-${i + 1}`,
+        imei: `IMEI-${Math.random().toString(36).substr(2, 9)}`,
+        name: `设备 ${i + 1}`,
+        status: Math.random() > 0.3 ? "online" : "offline",
+        wechatAccounts: Array.from({ length: Math.floor(Math.random() * 2) + 1 }, (_, j) => ({
+          wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+          nickname: `微信号 ${j + 1}`,
+          remainingAdds: Math.floor(Math.random() * 10) + 5,
+          maxDailyAdds: 20,
+          todayAdded: Math.floor(Math.random() * 15),
+        })),
+        usedInPlans: Math.floor(Math.random() * 3),
+      }))
+      setDevices(mockDevices)
+    }
+
+    fetchDevices()
+  }, [])
+
+  useEffect(() => {
+    filterDevices()
+  }, [debouncedSearchQuery, statusFilter, excludeUsedDevices, devices])
+
+  const filterDevices = () => {
+    const filtered = devices.filter((device) => {
+      const matchesSearch =
+        device.name.toLowerCase().includes(debouncedSearchQuery.toLowerCase()) ||
+        device.imei.toLowerCase().includes(debouncedSearchQuery.toLowerCase()) ||
+        device.wechatAccounts.some((account) =>
+          account.wechatId.toLowerCase().includes(debouncedSearchQuery.toLowerCase()),
+        )
+      const matchesStatus = statusFilter === "all" || device.status === statusFilter
+      const matchesUsage = !excludeUsedDevices || device.usedInPlans === 0
+      return matchesSearch && matchesStatus && matchesUsage
+    })
+    setFilteredDevices(filtered)
+  }
+
+  const handleRefresh = () => {
+    toast({
+      title: "刷新成功",
+      description: "设备列表已更新",
+    })
+  }
+
+  const paginatedDevices = filteredDevices.slice((currentPage - 1) * devicesPerPage, currentPage * devicesPerPage)
+
+  const handleSelectAll = () => {
+    if (selectedDevices.length === paginatedDevices.length) {
+      setSelectedDevices([])
+    } else {
+      setSelectedDevices(paginatedDevices.map((device) => device.id))
+    }
+    onSelect(selectedDevices)
+  }
+
+  const handleDeviceSelect = (deviceId: string) => {
+    const updatedSelection = selectedDevices.includes(deviceId)
+      ? selectedDevices.filter((id) => id !== deviceId)
+      : [...selectedDevices, deviceId]
+    setSelectedDevices(updatedSelection)
+    onSelect(updatedSelection)
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+          <Input
+            placeholder="搜索设备IMEI/备注/微信号"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <Button variant="outline" size="icon">
+          <Filter className="h-4 w-4" />
+        </Button>
+        <Button variant="outline" size="icon" onClick={handleRefresh}>
+          <RefreshCw className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <Select value={statusFilter} onValueChange={setStatusFilter}>
+          <SelectTrigger className="w-[120px]">
+            <SelectValue placeholder="全部状态" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">全部状态</SelectItem>
+            <SelectItem value="online">在线</SelectItem>
+            <SelectItem value="offline">离线</SelectItem>
+          </SelectContent>
+        </Select>
+        <Button variant="outline" onClick={handleSelectAll}>
+          {selectedDevices.length === paginatedDevices.length ? "取消全选" : "全选"}
+        </Button>
+      </div>
+
+      <div ref={parentRef} className="h-[500px] overflow-auto">
+        <div
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: "100%",
+            position: "relative",
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+            const device = filteredDevices[virtualRow.index]
+            return (
+              <div
+                key={device.id}
+                style={{
+                  position: "absolute",
+                  top: 0,
+                  left: 0,
+                  width: "100%",
+                  height: `${virtualRow.size}px`,
+                  transform: `translateY(${virtualRow.start}px)`,
+                }}
+              >
+                <Card key={device.id} className="p-3 hover:shadow-md transition-shadow">
+                  <div className="flex items-center space-x-3">
+                    <Checkbox
+                      checked={selectedDevices.includes(device.id)}
+                      onCheckedChange={() => handleDeviceSelect(device.id)}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center justify-between mb-1">
+                        <div className="font-medium truncate">{device.name}</div>
+                        <div
+                          className={`px-2 py-1 rounded-full text-xs ${
+                            device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                          }`}
+                        >
+                          {device.status === "online" ? "在线" : "离线"}
+                        </div>
+                      </div>
+                      <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
+                      <div className="mt-2 space-y-2">
+                        {device.wechatAccounts.map((account) => (
+                          <div key={account.wechatId} className="bg-gray-50 rounded-lg p-2">
+                            <div className="flex items-center justify-between text-sm">
+                              <span className="font-medium">{account.nickname}</span>
+                              <span className="text-gray-500">{account.wechatId}</span>
+                            </div>
+                            <div className="mt-1 space-y-1">
+                              <div className="flex items-center justify-between text-sm">
+                                <div className="flex items-center space-x-1">
+                                  <span>今日可添加：</span>
+                                  <span className="font-medium">{account.remainingAdds}</span>
+                                  <TooltipProvider>
+                                    <Tooltip>
+                                      <TooltipTrigger>
+                                        <AlertCircle className="h-4 w-4 text-gray-400" />
+                                      </TooltipTrigger>
+                                      <TooltipContent>
+                                        <p>每日最多添加 {account.maxDailyAdds} 个好友</p>
+                                      </TooltipContent>
+                                    </Tooltip>
+                                  </TooltipProvider>
+                                </div>
+                                <span className="text-sm text-gray-500">
+                                  {account.todayAdded}/{account.maxDailyAdds}
+                                </span>
+                              </div>
+                              <Progress value={(account.todayAdded / account.maxDailyAdds) * 100} className="h-1.5" />
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                      {!excludeUsedDevices && device.usedInPlans > 0 && (
+                        <div className="text-sm text-orange-500 mt-2">已用于 {device.usedInPlans} 个计划</div>
+                      )}
+                    </div>
+                  </div>
+                </Card>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              href="#"
+              onClick={(e) => {
+                e.preventDefault()
+                setCurrentPage((prev) => Math.max(1, prev - 1))
+              }}
+            />
+          </PaginationItem>
+          {Array.from({ length: Math.ceil(filteredDevices.length / devicesPerPage) }, (_, i) => i + 1).map((page) => (
+            <PaginationItem key={page}>
+              <PaginationLink
+                href="#"
+                isActive={currentPage === page}
+                onClick={(e) => {
+                  e.preventDefault()
+                  setCurrentPage(page)
+                }}
+              >
+                {page}
+              </PaginationLink>
+            </PaginationItem>
+          ))}
+          <PaginationItem>
+            <PaginationNext
+              href="#"
+              onClick={(e) => {
+                e.preventDefault()
+                setCurrentPage((prev) => Math.min(Math.ceil(filteredDevices.length / devicesPerPage), prev + 1))
+              }}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  )
+}
diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx
new file mode 100644
index 0000000..d27f771
--- /dev/null
+++ b/app/components/ErrorBoundary.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Component, type ErrorInfo, type ReactNode } from "react"
+import { Button } from "@/components/ui/button"
+import { AlertTriangle } from "lucide-react"
+
+interface Props {
+  children: ReactNode
+  fallback?: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error: Error | null
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // 记录错误到日志服务
+    this.logError(error, errorInfo)
+  }
+
+  logError = async (error: Error, errorInfo: ErrorInfo) => {
+    try {
+      await fetch("/api/log-error", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          message: error.message,
+          stack: error.stack,
+          componentStack: errorInfo.componentStack,
+          url: window.location.href,
+          timestamp: new Date().toISOString(),
+        }),
+      })
+    } catch (e) {
+      console.error("Failed to log error:", e)
+    }
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null })
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback
+      }
+
+      return (
+        <div className="flex flex-col items-center justify-center min-h-[400px] p-6 text-center">
+          <AlertTriangle className="h-12 w-12 text-amber-500 mb-4" />
+          <h2 className="text-xl font-semibold mb-2">出现了一些问题</h2>
+          <p className="text-gray-600 mb-6 max-w-md">应用遇到了错误。我们已记录此问题并将尽快修复。</p>
+          <div className="space-x-4">
+            <Button onClick={this.handleRetry}>重试</Button>
+            <Button variant="outline" onClick={() => window.location.reload()}>
+              刷新页面
+            </Button>
+          </div>
+          {process.env.NODE_ENV === "development" && (
+            <div className="mt-6 p-4 bg-gray-100 rounded-md text-left overflow-auto max-w-full">
+              <p className="font-mono text-sm text-red-600 whitespace-pre-wrap">{this.state.error?.stack}</p>
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
new file mode 100644
index 0000000..357a8b4
--- /dev/null
+++ b/app/components/Header.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { useState } from "react"
+import { Bell, Search, Moon, Sun } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { useTheme } from "next-themes"
+
+export default function Header() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const { setTheme } = useTheme()
+
+  return (
+    <header className="border-b border-border bg-card px-6 py-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center w-full max-w-md">
+          <Search className="h-4 w-4 text-muted-foreground mr-2" />
+          <Input
+            type="text"
+            placeholder="搜索用户、标签、活动..."
+            className="border-none focus-visible:ring-0 focus-visible:ring-offset-0"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        <div className="flex items-center space-x-3">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="icon">
+                <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                <span className="sr-only">切换主题</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => setTheme("light")}>浅色</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setTheme("dark")}>深色</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => setTheme("system")}>系统</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Button variant="outline" size="icon">
+            <Bell className="h-5 w-5" />
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}
diff --git a/app/components/MobileHeader.tsx b/app/components/MobileHeader.tsx
new file mode 100644
index 0000000..4732ef3
--- /dev/null
+++ b/app/components/MobileHeader.tsx
@@ -0,0 +1,72 @@
+"use client"
+
+import { useState } from "react"
+import { Menu, Search, Bell, X } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+
+interface MobileHeaderProps {
+  onMenuToggle: () => void
+  title?: string
+}
+
+export default function MobileHeader({ onMenuToggle, title = "数据资产中台" }: MobileHeaderProps) {
+  const [showSearch, setShowSearch] = useState(false)
+  const [searchQuery, setSearchQuery] = useState("")
+
+  return (
+    <header className="glass-nav safe-area-top sticky top-0 z-50 mx-2 mt-2 mb-4">
+      <div className="flex items-center justify-between px-4 py-3">
+        {!showSearch ? (
+          <>
+            <div className="flex items-center space-x-3">
+              <Button variant="ghost" size="icon" onClick={onMenuToggle} className="glass-light rounded-xl">
+                <Menu className="h-5 w-5" />
+              </Button>
+              <h1 className="text-lg font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent truncate">
+                {title}
+              </h1>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setShowSearch(true)}
+                className="glass-light rounded-xl"
+              >
+                <Search className="h-5 w-5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="glass-light rounded-xl">
+                <Bell className="h-5 w-5" />
+              </Button>
+            </div>
+          </>
+        ) : (
+          <div className="flex items-center space-x-3 w-full">
+            <div className="flex-1">
+              <Input
+                type="text"
+                placeholder="搜索用户、标签、活动..."
+                className="glass-input border-none focus-visible:ring-0 focus-visible:ring-offset-0"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                autoFocus
+              />
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => {
+                setShowSearch(false)
+                setSearchQuery("")
+              }}
+              className="glass-light rounded-xl"
+            >
+              <X className="h-5 w-5" />
+            </Button>
+          </div>
+        )}
+      </div>
+    </header>
+  )
+}
diff --git a/app/components/MobileSidebar.tsx b/app/components/MobileSidebar.tsx
new file mode 100644
index 0000000..78f0986
--- /dev/null
+++ b/app/components/MobileSidebar.tsx
@@ -0,0 +1,233 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import {
+  Database,
+  LayoutDashboard,
+  Settings,
+  Users,
+  Target,
+  X,
+  ChevronDown,
+  ChevronRight,
+  Tag,
+  BarChart3,
+  TrendingUp,
+} from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+
+interface MobileSidebarProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export default function MobileSidebar({ isOpen, onClose }: MobileSidebarProps) {
+  const pathname = usePathname()
+  const [expandedSections, setExpandedSections] = useState({
+    "user-portrait": true,
+    "user-value": false,
+  })
+
+  const toggleSection = (section: string) => {
+    setExpandedSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }))
+  }
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden"
+    } else {
+      document.body.style.overflow = "unset"
+    }
+
+    return () => {
+      document.body.style.overflow = "unset"
+    }
+  }, [isOpen])
+
+  const navItems = [
+    {
+      title: "概览",
+      href: "/",
+      icon: <LayoutDashboard className="h-5 w-5" />,
+      primary: true,
+    },
+    {
+      title: "数据集成",
+      href: "/data-integration",
+      icon: <Database className="h-5 w-5" />,
+      primary: true,
+      tag: "核心",
+    },
+    {
+      title: "用户画像",
+      href: "/user-portrait",
+      icon: <Users className="h-5 w-5" />,
+      primary: true,
+      expandable: true,
+      section: "user-portrait",
+      children: [
+        {
+          title: "用户词",
+          href: "/user-portrait/user-keywords",
+          icon: <Tag className="h-4 w-4" />,
+        },
+        {
+          title: "标签管理",
+          href: "/user-portrait/tags",
+          icon: <Tag className="h-4 w-4" />,
+        },
+      ],
+    },
+    {
+      title: "用户估值",
+      href: "/user-value",
+      icon: <Target className="h-5 w-5" />,
+      primary: true,
+      expandable: true,
+      section: "user-value",
+      children: [
+        {
+          title: "估值模型",
+          href: "/user-value/model",
+          icon: <BarChart3 className="h-4 w-4" />,
+        },
+        {
+          title: "用户升级路径",
+          href: "/user-value/upgrade-paths",
+          icon: <TrendingUp className="h-4 w-4" />,
+        },
+      ],
+    },
+  ]
+
+  const getTagColor = (tag: string) => {
+    switch (tag) {
+      case "核心":
+        return "glass-light text-orange-700 border-orange-200"
+      default:
+        return "glass-light text-gray-700 border-gray-200"
+    }
+  }
+
+  return (
+    <>
+      {/* 背景遮罩 */}
+      <div
+        className={cn(
+          "fixed inset-0 bg-black/20 backdrop-blur-sm z-40 transition-opacity duration-300",
+          isOpen ? "opacity-100" : "opacity-0 pointer-events-none",
+        )}
+        onClick={onClose}
+      />
+
+      {/* 侧边栏 */}
+      <div
+        className={cn(
+          "fixed left-0 top-0 h-full w-80 glass-nav safe-area-top safe-area-left z-50 transition-transform duration-300 ease-out",
+          isOpen ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        {/* 头部 */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-white/20">
+          <div className="flex items-center space-x-3">
+            <div className="w-8 h-8 rounded-lg glass-light flex items-center justify-center">
+              <Database className="h-5 w-5 text-blue-600" />
+            </div>
+            <h1 className="text-lg font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              用户数字资产中台
+            </h1>
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose} className="glass-light rounded-xl">
+            <X className="h-5 w-5" />
+          </Button>
+        </div>
+
+        {/* 导航菜单 */}
+        <div className="flex-1 overflow-y-auto py-4">
+          <nav className="space-y-2 px-4">
+            {navItems.map((item) => (
+              <div key={item.href}>
+                <div
+                  className={cn(
+                    "flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-all duration-300 group",
+                    pathname === item.href
+                      ? "glass-heavy text-blue-700 shadow-glass"
+                      : "glass-light text-gray-700 hover:glass-heavy hover:text-blue-600",
+                  )}
+                >
+                  <Link href={item.href} onClick={onClose} className="flex items-center flex-1">
+                    <div className="transition-colors duration-300">{item.icon}</div>
+                    <div className="flex-1 flex items-center justify-between ml-3">
+                      <span className="font-medium">{item.title}</span>
+                      {item.tag && (
+                        <Badge className={cn("text-xs px-2 py-1 rounded-lg", getTagColor(item.tag))}>{item.tag}</Badge>
+                      )}
+                    </div>
+                  </Link>
+                  {item.expandable && (
+                    <button
+                      onClick={() => toggleSection(item.section!)}
+                      className="ml-2 p-1 hover:bg-white/20 rounded-lg transition-colors duration-200"
+                    >
+                      {expandedSections[item.section!] ? (
+                        <ChevronDown className="h-4 w-4" />
+                      ) : (
+                        <ChevronRight className="h-4 w-4" />
+                      )}
+                    </button>
+                  )}
+                </div>
+
+                {/* 子菜单 */}
+                {item.children && expandedSections[item.section!] && (
+                  <div className="ml-6 mt-2 space-y-1">
+                    {item.children.map((subItem) => (
+                      <Link
+                        key={subItem.href}
+                        href={subItem.href}
+                        onClick={onClose}
+                        className={cn(
+                          "flex items-center px-3 py-2 text-sm rounded-lg transition-all duration-300",
+                          pathname === subItem.href
+                            ? "glass-light text-blue-600 shadow-glass-sm"
+                            : "text-gray-600 hover:glass-light hover:text-blue-500",
+                        )}
+                      >
+                        <div className="mr-3 text-gray-400 transition-colors duration-300">{subItem.icon}</div>
+                        <span>{subItem.title}</span>
+                      </Link>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </nav>
+        </div>
+
+        {/* 底部设置 */}
+        <div className="border-t border-white/20 p-4">
+          <Link
+            href="/settings"
+            onClick={onClose}
+            className={cn(
+              "flex items-center px-4 py-2 text-xs font-medium rounded-lg transition-all duration-300 w-full",
+              pathname === "/settings"
+                ? "glass-heavy text-blue-700 shadow-glass"
+                : "glass-light text-gray-600 hover:glass-heavy hover:text-blue-500",
+            )}
+          >
+            <Settings className="h-4 w-4 transition-colors duration-300" />
+            <span className="ml-2">设置</span>
+          </Link>
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
new file mode 100644
index 0000000..46748b8
--- /dev/null
+++ b/app/components/Sidebar.tsx
@@ -0,0 +1,230 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import {
+  Database,
+  LayoutDashboard,
+  Settings,
+  Users,
+  Target,
+  ChevronLeft,
+  ChevronDown,
+  ChevronRight,
+  Tag,
+  BarChart3,
+  TrendingUp,
+} from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+
+export default function Sidebar() {
+  const pathname = usePathname()
+  const [expanded, setExpanded] = useState(true)
+  const [expandedSections, setExpandedSections] = useState({
+    "user-portrait": true,
+    "user-value": false,
+  })
+
+  const toggleSidebar = () => {
+    setExpanded(!expanded)
+  }
+
+  const toggleSection = (section: string) => {
+    setExpandedSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }))
+  }
+
+  // 重新设计的导航结构
+  const navItems = [
+    {
+      title: "概览",
+      href: "/",
+      icon: <LayoutDashboard className="h-5 w-5" />,
+      primary: true,
+    },
+    {
+      title: "数据集成",
+      href: "/data-integration",
+      icon: <Database className="h-5 w-5" />,
+      primary: true,
+      tag: "核心",
+    },
+    {
+      title: "用户画像",
+      href: "/user-portrait",
+      icon: <Users className="h-5 w-5" />,
+      primary: true,
+      expandable: true,
+      section: "user-portrait",
+      children: [
+        {
+          title: "用户词",
+          href: "/user-portrait/user-keywords",
+          icon: <Tag className="h-4 w-4" />,
+        },
+        {
+          title: "标签管理",
+          href: "/user-portrait/tags",
+          icon: <Tag className="h-4 w-4" />,
+        },
+      ],
+    },
+    {
+      title: "用户估值",
+      href: "/user-value",
+      icon: <Target className="h-5 w-5" />,
+      primary: true,
+      expandable: true,
+      section: "user-value",
+      children: [
+        {
+          title: "估值模型",
+          href: "/user-value/model",
+          icon: <BarChart3 className="h-4 w-4" />,
+        },
+        {
+          title: "用户升级路径",
+          href: "/user-value/upgrade-paths",
+          icon: <TrendingUp className="h-4 w-4" />,
+        },
+      ],
+    },
+  ]
+
+  const getTagColor = (tag: string) => {
+    switch (tag) {
+      case "核心":
+        return "glass-light text-orange-700 border-orange-200"
+      default:
+        return "glass-light text-gray-700 border-gray-200"
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col h-screen glass-nav m-4 transition-all duration-300 ease-in-out",
+        expanded ? "w-72" : "w-20",
+      )}
+    >
+      {/* 头部 */}
+      <div className="flex items-center h-16 px-6 border-b border-white/20">
+        {expanded ? (
+          <div className="flex items-center space-x-3">
+            <div className="w-8 h-8 rounded-lg glass-light flex items-center justify-center">
+              <Database className="h-5 w-5 text-blue-600" />
+            </div>
+            <h1 className="text-lg font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              用户数字资产中台
+            </h1>
+          </div>
+        ) : (
+          <div className="mx-auto">
+            <div className="w-8 h-8 rounded-lg glass-light flex items-center justify-center">
+              <Database className="h-5 w-5 text-blue-600" />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 导航菜单 */}
+      <div className="flex-1 overflow-y-auto py-4">
+        <nav className="space-y-2 px-4">
+          {navItems.map((item) => (
+            <div key={item.href}>
+              <div
+                className={cn(
+                  "flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-all duration-300 group",
+                  pathname === item.href
+                    ? "glass-heavy text-blue-700 shadow-glass"
+                    : "glass-light text-gray-700 hover:glass-heavy hover:text-blue-600 hover:scale-105",
+                )}
+              >
+                <Link href={item.href} className={cn("flex items-center flex-1", !expanded && "justify-center")}>
+                  <div className="transition-colors duration-300">{item.icon}</div>
+                  {expanded && (
+                    <div className="flex-1 flex items-center justify-between ml-3">
+                      <span className="font-medium">{item.title}</span>
+                      {item.tag && (
+                        <Badge className={cn("text-xs px-2 py-1 rounded-lg", getTagColor(item.tag))}>{item.tag}</Badge>
+                      )}
+                    </div>
+                  )}
+                </Link>
+                {expanded && item.expandable && (
+                  <button
+                    onClick={() => toggleSection(item.section!)}
+                    className="ml-2 p-1 hover:bg-white/20 rounded-lg transition-colors duration-200"
+                  >
+                    {expandedSections[item.section!] ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
+                  </button>
+                )}
+              </div>
+
+              {/* 子菜单 */}
+              {expanded && item.children && expandedSections[item.section!] && (
+                <div className="ml-6 mt-2 space-y-1">
+                  {item.children.map((subItem) => (
+                    <Link
+                      key={subItem.href}
+                      href={subItem.href}
+                      className={cn(
+                        "flex items-center px-3 py-2 text-sm rounded-lg transition-all duration-300",
+                        pathname === subItem.href
+                          ? "glass-light text-blue-600 shadow-glass-sm"
+                          : "text-gray-600 hover:glass-light hover:text-blue-500",
+                      )}
+                    >
+                      <div className="mr-3 text-gray-400 transition-colors duration-300">{subItem.icon}</div>
+                      <span>{subItem.title}</span>
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </nav>
+      </div>
+
+      {/* 底部设置和折叠按钮 */}
+      <div className="mt-auto border-t border-white/20">
+        <Link
+          href="/settings"
+          className={cn(
+            "flex items-center px-4 py-2 mx-4 my-2 text-xs font-medium rounded-lg transition-all duration-300",
+            pathname === "/settings"
+              ? "glass-heavy text-blue-700 shadow-glass"
+              : "glass-light text-gray-600 hover:glass-heavy hover:text-blue-500",
+          )}
+        >
+          <div className={cn("transition-colors duration-300", !expanded && "mx-auto")}>
+            <Settings className="h-4 w-4" />
+          </div>
+          {expanded && <span className="ml-2">设置</span>}
+        </Link>
+
+        <div className="p-4">
+          <button
+            onClick={toggleSidebar}
+            className="w-full flex items-center justify-center p-3 rounded-xl glass-button hover:scale-105 transition-all duration-300"
+          >
+            <ChevronLeft
+              className={cn(
+                "h-5 w-5 transform transition-transform duration-300",
+                expanded ? "rotate-0" : "rotate-180",
+              )}
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/components/SpeechToTextProcessor.tsx b/app/components/SpeechToTextProcessor.tsx
new file mode 100644
index 0000000..c4c2163
--- /dev/null
+++ b/app/components/SpeechToTextProcessor.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { toast } from "@/components/ui/use-toast"
+
+interface SpeechToTextProcessorProps {
+  audioUrl: string
+  onTranscriptReady: (transcript: string) => void
+  onQuestionExtracted: (question: string) => void
+  enabled: boolean
+}
+
+export function SpeechToTextProcessor({
+  audioUrl,
+  onTranscriptReady,
+  onQuestionExtracted,
+  enabled = true,
+}: SpeechToTextProcessorProps) {
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!enabled || !audioUrl) return
+
+    const processAudio = async () => {
+      try {
+        setIsProcessing(true)
+        setError(null)
+
+        // 模拟API调用延迟
+        await new Promise((resolve) => setTimeout(resolve, 2000))
+
+        // 模拟转录结果
+        const mockTranscript = `
+客服: 您好，这里是XX公司客服，请问有什么可以帮到您？
+客户: 请问贵公司的产品有什么特点？
+客服: 我们的产品主要有以下几个特点：首先，质量非常可靠；其次，价格比较有竞争力；第三，售后服务非常完善。
+客户: 那你们的价格是怎么样的？
+客服: 我们有多种套餐可以选择，基础版每月只需99元，高级版每月299元，具体可以根据您的需求来选择。
+客户: 好的，我了解了，谢谢。
+客服: 不客气，如果您有兴趣，我可以添加您的微信，给您发送更详细的产品资料。
+客户: 可以的，谢谢。
+客服: 好的，稍后我会添加您为好友，再次感谢您的咨询。
+`
+        onTranscriptReady(mockTranscript)
+
+        // 提取首句问题
+        const questionMatch = mockTranscript.match(/客户: (.*?)\n/)
+        if (questionMatch && questionMatch[1]) {
+          onQuestionExtracted(questionMatch[1])
+        } else {
+          onQuestionExtracted("未识别到有效问题")
+        }
+
+        setIsProcessing(false)
+      } catch (err) {
+        setError("处理音频时出错")
+        setIsProcessing(false)
+        toast({
+          title: "处理失败",
+          description: "语音转文字处理失败，请重试",
+          variant: "destructive",
+        })
+      }
+    }
+
+    processAudio()
+  }, [audioUrl, enabled, onTranscriptReady, onQuestionExtracted])
+
+  return null // 这是一个功能性组件，不渲染任何UI
+}
diff --git a/app/components/TrafficTeamSettings.tsx b/app/components/TrafficTeamSettings.tsx
new file mode 100644
index 0000000..196ef46
--- /dev/null
+++ b/app/components/TrafficTeamSettings.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Plus, Pencil, Trash2 } from "lucide-react"
+
+interface TrafficTeam {
+  id: string
+  name: string
+  commission: number
+}
+
+interface TrafficTeamSettingsProps {
+  formData: any
+  onChange: (data: any) => void
+}
+
+export function TrafficTeamSettings({ formData, onChange }: TrafficTeamSettingsProps) {
+  const [teams, setTeams] = useState<TrafficTeam[]>(formData.trafficTeams || [])
+  const [isAddTeamOpen, setIsAddTeamOpen] = useState(false)
+  const [editingTeam, setEditingTeam] = useState<TrafficTeam | null>(null)
+  const [newTeam, setNewTeam] = useState<Partial<TrafficTeam>>({
+    name: "",
+    commission: 0,
+  })
+
+  const handleAddTeam = () => {
+    if (!newTeam.name) return
+
+    if (editingTeam) {
+      setTeams(teams.map((team) => (team.id === editingTeam.id ? { ...team, ...newTeam } : team)))
+    } else {
+      setTeams([
+        ...teams,
+        {
+          id: Date.now().toString(),
+          name: newTeam.name,
+          commission: newTeam.commission || 0,
+        },
+      ])
+    }
+
+    setIsAddTeamOpen(false)
+    setNewTeam({ name: "", commission: 0 })
+    setEditingTeam(null)
+    onChange({ ...formData, trafficTeams: teams })
+  }
+
+  const handleEditTeam = (team: TrafficTeam) => {
+    setEditingTeam(team)
+    setNewTeam(team)
+    setIsAddTeamOpen(true)
+  }
+
+  const handleDeleteTeam = (teamId: string) => {
+    setTeams(teams.filter((team) => team.id !== teamId))
+    onChange({ ...formData, trafficTeams: teams.filter((team) => team.id !== teamId) })
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <h2 className="text-lg font-semibold">打粉团队设置</h2>
+          <Button onClick={() => setIsAddTeamOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            添加团队
+          </Button>
+        </div>
+
+        <div className="border rounded-lg">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>团队名称</TableHead>
+                <TableHead>佣金比例</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {teams.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={3} className="text-center py-8 text-gray-500">
+                    暂无数据
+                  </TableCell>
+                </TableRow>
+              ) : (
+                teams.map((team) => (
+                  <TableRow key={team.id}>
+                    <TableCell>{team.name}</TableCell>
+                    <TableCell>{team.commission}%</TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end space-x-2">
+                        <Button variant="ghost" size="sm" onClick={() => handleEditTeam(team)}>
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="sm" onClick={() => handleDeleteTeam(team.id)}>
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      <Dialog open={isAddTeamOpen} onOpenChange={setIsAddTeamOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{editingTeam ? "编辑团队" : "添加团队"}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label>团队名称</Label>
+              <Input
+                value={newTeam.name}
+                onChange={(e) => setNewTeam({ ...newTeam, name: e.target.value })}
+                placeholder="请输入团队名称"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>佣金比例 (%)</Label>
+              <Input
+                type="number"
+                value={newTeam.commission}
+                onChange={(e) => setNewTeam({ ...newTeam, commission: Number(e.target.value) })}
+                placeholder="请输入佣金比例"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsAddTeamOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={handleAddTeam}>{editingTeam ? "保存" : "添加"}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  )
+}
diff --git a/app/components/charts.tsx b/app/components/charts.tsx
new file mode 100644
index 0000000..490ee22
--- /dev/null
+++ b/app/components/charts.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  BarChart as RechartsBarChart,
+  Bar,
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+} from "recharts"
+
+interface ChartProps {
+  data: any
+  height?: number
+}
+
+export function LineChart({ data, height = 300 }: ChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <RechartsLineChart
+        data={data.labels.map((label, i) => {
+          const dataPoint = { name: label }
+          data.datasets.forEach((dataset, j) => {
+            dataPoint[dataset.label] = dataset.data[i]
+          })
+          return dataPoint
+        })}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        {data.datasets.map((dataset, i) => (
+          <Line
+            key={i}
+            type="monotone"
+            dataKey={dataset.label}
+            stroke={dataset.borderColor}
+            fill={dataset.backgroundColor}
+            activeDot={{ r: 8 }}
+          />
+        ))}
+      </RechartsLineChart>
+    </ResponsiveContainer>
+  )
+}
+
+export function BarChart({ data, height = 300 }: ChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <RechartsBarChart
+        data={data.labels.map((label, i) => {
+          const dataPoint = { name: label }
+          data.datasets.forEach((dataset, j) => {
+            dataPoint[dataset.label] = dataset.data[i]
+          })
+          return dataPoint
+        })}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        {data.datasets.map((dataset, i) => (
+          <Bar key={i} dataKey={dataset.label} fill={dataset.backgroundColor || "#8884d8"} />
+        ))}
+      </RechartsBarChart>
+    </ResponsiveContainer>
+  )
+}
+
+export function PieChart({ data, height = 300 }: ChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <RechartsPieChart>
+        <Pie
+          data={data.labels.map((label, i) => ({
+            name: label,
+            value: data.datasets[0].data[i],
+          }))}
+          cx="50%"
+          cy="50%"
+          labelLine={false}
+          outerRadius={80}
+          fill="#8884d8"
+          dataKey="value"
+          label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
+        >
+          {data.labels.map((entry, index) => (
+            <Cell
+              key={`cell-${index}`}
+              fill={data.datasets[0].backgroundColor[index] || `#${Math.floor(Math.random() * 16777215).toString(16)}`}
+            />
+          ))}
+        </Pie>
+        <Tooltip />
+        <Legend />
+      </RechartsPieChart>
+    </ResponsiveContainer>
+  )
+}
diff --git a/app/components/device-grid.tsx b/app/components/device-grid.tsx
new file mode 100644
index 0000000..cebc0d1
--- /dev/null
+++ b/app/components/device-grid.tsx
@@ -0,0 +1,206 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Battery, Smartphone, MessageCircle, Users, Clock } from "lucide-react"
+
+export interface Device {
+  id: string
+  imei: string
+  name: string
+  status: "online" | "offline"
+  battery: number
+  wechatId: string
+  friendCount: number
+  todayAdded: number
+  messageCount: number
+  lastActive: string
+  addFriendStatus: "normal" | "abnormal"
+}
+
+interface DeviceGridProps {
+  devices: Device[]
+  selectable?: boolean
+  selectedDevices?: string[]
+  onSelect?: (deviceIds: string[]) => void
+  itemsPerRow?: number
+}
+
+export function DeviceGrid({
+  devices,
+  selectable = false,
+  selectedDevices = [],
+  onSelect,
+  itemsPerRow = 2,
+}: DeviceGridProps) {
+  const [selectedDevice, setSelectedDevice] = useState<Device | null>(null)
+
+  const handleSelectAll = () => {
+    if (selectedDevices.length === devices.length) {
+      onSelect?.([])
+    } else {
+      onSelect?.(devices.map((d) => d.id))
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {selectable && (
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              checked={selectedDevices.length === devices.length && devices.length > 0}
+              onCheckedChange={handleSelectAll}
+            />
+            <span className="text-sm">全选</span>
+          </div>
+          <span className="text-sm text-gray-500">已选择 {selectedDevices.length} 个设备</span>
+        </div>
+      )}
+
+      <div className={`grid grid-cols-${itemsPerRow} gap-4`}>
+        {devices.map((device) => (
+          <Card
+            key={device.id}
+            className={`p-4 hover:shadow-md transition-all cursor-pointer ${
+              selectedDevices.includes(device.id) ? "ring-2 ring-primary" : ""
+            }`}
+            onClick={() => {
+              if (selectable) {
+                const newSelection = selectedDevices.includes(device.id)
+                  ? selectedDevices.filter((id) => id !== device.id)
+                  : [...selectedDevices, device.id]
+                onSelect?.(newSelection)
+              } else {
+                setSelectedDevice(device)
+              }
+            }}
+          >
+            <div className="flex items-start space-x-3">
+              {selectable && (
+                <Checkbox
+                  checked={selectedDevices.includes(device.id)}
+                  className="mt-1"
+                  onClick={(e) => e.stopPropagation()}
+                />
+              )}
+              <div className="flex-1 space-y-2">
+                <div className="flex items-center justify-between">
+                  <div className="font-medium">{device.name}</div>
+                  <Badge variant={device.status === "online" ? "success" : "secondary"}>
+                    {device.status === "online" ? "在线" : "离线"}
+                  </Badge>
+                </div>
+
+                <div className="grid grid-cols-2 gap-2 text-sm text-gray-500">
+                  <div className="flex items-center space-x-1">
+                    <Battery className={`w-4 h-4 ${device.battery < 20 ? "text-red-500" : "text-green-500"}`} />
+                    <span>{device.battery}%</span>
+                  </div>
+                  <div className="flex items-center space-x-1">
+                    <Users className="w-4 h-4" />
+                    <span>{device.friendCount}</span>
+                  </div>
+                  <div className="flex items-center space-x-1">
+                    <MessageCircle className="w-4 h-4" />
+                    <span>{device.messageCount}</span>
+                  </div>
+                  <div className="flex items-center space-x-1">
+                    <Clock className="w-4 h-4" />
+                    <span>+{device.todayAdded}</span>
+                  </div>
+                </div>
+
+                <div className="text-sm text-gray-500">
+                  <div>IMEI: {device.imei}</div>
+                  <div>微信号: {device.wechatId}</div>
+                </div>
+
+                <Badge variant={device.addFriendStatus === "normal" ? "outline" : "destructive"} className="mt-2">
+                  {device.addFriendStatus === "normal" ? "加友正常" : "加友异常"}
+                </Badge>
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      <Dialog open={!!selectedDevice} onOpenChange={() => setSelectedDevice(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>设备详情</DialogTitle>
+          </DialogHeader>
+          {selectedDevice && (
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-3">
+                  <div className="p-3 bg-gray-100 rounded-lg">
+                    <Smartphone className="w-6 h-6" />
+                  </div>
+                  <div>
+                    <h3 className="font-medium">{selectedDevice.name}</h3>
+                    <p className="text-sm text-gray-500">IMEI: {selectedDevice.imei}</p>
+                  </div>
+                </div>
+                <Badge variant={selectedDevice.status === "online" ? "success" : "secondary"}>
+                  {selectedDevice.status === "online" ? "在线" : "离线"}
+                </Badge>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <div className="text-sm text-gray-500">电池电量</div>
+                  <div className="flex items-center space-x-2">
+                    <Battery className={`w-5 h-5 ${selectedDevice.battery < 20 ? "text-red-500" : "text-green-500"}`} />
+                    <span className="font-medium">{selectedDevice.battery}%</span>
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="text-sm text-gray-500">好友数量</div>
+                  <div className="flex items-center space-x-2">
+                    <Users className="w-5 h-5 text-blue-500" />
+                    <span className="font-medium">{selectedDevice.friendCount}</span>
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="text-sm text-gray-500">今日新增</div>
+                  <div className="flex items-center space-x-2">
+                    <Users className="w-5 h-5 text-green-500" />
+                    <span className="font-medium">+{selectedDevice.todayAdded}</span>
+                  </div>
+                </div>
+                <div className="space-y-1">
+                  <div className="text-sm text-gray-500">消息数量</div>
+                  <div className="flex items-center space-x-2">
+                    <MessageCircle className="w-5 h-5 text-purple-500" />
+                    <span className="font-medium">{selectedDevice.messageCount}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm text-gray-500">微信账号</div>
+                <div className="font-medium">{selectedDevice.wechatId}</div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm text-gray-500">最后活跃</div>
+                <div className="font-medium">{selectedDevice.lastActive}</div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm text-gray-500">加友状态</div>
+                <Badge variant={selectedDevice.addFriendStatus === "normal" ? "outline" : "destructive"}>
+                  {selectedDevice.addFriendStatus === "normal" ? "加友正常" : "加友异常"}
+                </Badge>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/components/device-selection-dialog.tsx b/app/components/device-selection-dialog.tsx
new file mode 100644
index 0000000..cfe689e
--- /dev/null
+++ b/app/components/device-selection-dialog.tsx
@@ -0,0 +1,230 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search, Filter, RefreshCw } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Card } from "@/components/ui/card"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { toast } from "@/components/ui/use-toast"
+
+interface Device {
+  id: string
+  name: string
+  imei: string
+  status: "online" | "offline"
+  wechatId: string
+  friendCount: number
+  battery: number
+  avatar?: string
+}
+
+interface DeviceSelectionDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  selectedDevices: string[]
+  onSelect: (deviceIds: string[]) => void
+  excludeUsedDevices?: boolean
+  planId?: string
+}
+
+export function DeviceSelectionDialog({
+  open,
+  onOpenChange,
+  selectedDevices,
+  onSelect,
+  excludeUsedDevices = false,
+  planId,
+}: DeviceSelectionDialogProps) {
+  const [devices, setDevices] = useState<Device[]>([])
+  const [filteredDevices, setFilteredDevices] = useState<Device[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState("all")
+  const [selected, setSelected] = useState<string[]>(selectedDevices || [])
+  const [currentPage, setCurrentPage] = useState(1)
+  const devicesPerPage = 5
+
+  useEffect(() => {
+    const fetchDevices = async () => {
+      // 模拟API调用获取设备列表
+      const mockDevices: Device[] = Array.from({ length: 20 }, (_, i) => ({
+        id: `device-${i + 1}`,
+        name: `设备 ${i + 1}`,
+        imei: `sd${123123 + i}`,
+        status: Math.random() > 0.2 ? "online" : "offline",
+        wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+        friendCount: Math.floor(Math.random() * 1000),
+        battery: Math.floor(Math.random() * 100),
+        avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=" + (i + 1),
+      }))
+
+      if (excludeUsedDevices && planId) {
+        const availableDevices = mockDevices.filter((device) => !device.id.includes("-even"))
+        setDevices(availableDevices)
+        setFilteredDevices(availableDevices)
+      } else {
+        setDevices(mockDevices)
+        setFilteredDevices(mockDevices)
+      }
+    }
+
+    if (open) {
+      fetchDevices()
+      setSelected(selectedDevices || [])
+    }
+  }, [open, selectedDevices, excludeUsedDevices, planId])
+
+  useEffect(() => {
+    const filtered = devices.filter((device) => {
+      const matchesSearch =
+        device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        device.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
+      const matchesStatus = statusFilter === "all" || device.status === statusFilter
+      return matchesSearch && matchesStatus
+    })
+    setFilteredDevices(filtered)
+    setCurrentPage(1)
+  }, [searchQuery, statusFilter, devices])
+
+  const handleSelect = (deviceId: string) => {
+    let newSelected: string[]
+
+    if (selected.includes(deviceId)) {
+      // 如果已选中，则取消选择
+      newSelected = selected.filter((id) => id !== deviceId)
+    } else {
+      // 如果未选中，检查是否超过限制
+      if (selected.length >= 5) {
+        toast({
+          title: "选择超出限制",
+          description: "最多可选择5个设备",
+          variant: "destructive",
+        })
+        return
+      }
+      newSelected = [...selected, deviceId]
+    }
+
+    setSelected(newSelected)
+    onSelect(newSelected) // 直接触发选择回调
+  }
+
+  const handleRefresh = () => {
+    const refreshedDevices = devices.map((device) => ({
+      ...device,
+      status: Math.random() > 0.2 ? "online" : "offline",
+      battery: Math.floor(Math.random() * 100),
+    }))
+    setDevices(refreshedDevices)
+    setFilteredDevices(refreshedDevices)
+  }
+
+  // 分页逻辑
+  const totalPages = Math.ceil(filteredDevices.length / devicesPerPage)
+  const startIndex = (currentPage - 1) * devicesPerPage
+  const currentDevices = filteredDevices.slice(startIndex, startIndex + devicesPerPage)
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[700px] max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>选择设备</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="flex items-center space-x-2">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+              <Input
+                placeholder="搜索设备IMEI/备注/微信号"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+            <Button variant="outline" size="icon">
+              <Filter className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="icon" onClick={handleRefresh}>
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Select value={statusFilter} onValueChange={setStatusFilter}>
+              <SelectTrigger className="w-[120px]">
+                <SelectValue placeholder="全部状态" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">全部状态</SelectItem>
+                <SelectItem value="online">在线</SelectItem>
+                <SelectItem value="offline">离线</SelectItem>
+              </SelectContent>
+            </Select>
+            <div className="text-sm text-gray-500">已选择 {selected.length}/5 个设备</div>
+          </div>
+
+          <div className="space-y-2">
+            {currentDevices.length === 0 ? (
+              <div className="text-center py-8 text-gray-500">暂无符合条件的设备</div>
+            ) : (
+              currentDevices.map((device) => (
+                <Card
+                  key={device.id}
+                  className={`p-3 hover:shadow-md transition-shadow cursor-pointer ${
+                    selected.includes(device.id) ? "ring-2 ring-primary" : ""
+                  }`}
+                  onClick={() => handleSelect(device.id)}
+                >
+                  <div className="flex items-center space-x-3">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center justify-between mb-1">
+                        <div className="font-medium truncate">{device.name}</div>
+                        <Badge variant={device.status === "online" ? "success" : "secondary"}>
+                          {device.status === "online" ? "在线" : "离线"}
+                        </Badge>
+                      </div>
+                      <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
+                      <div className="text-sm text-gray-500">微信号: {device.wechatId}</div>
+                      <div className="flex items-center justify-between mt-1 text-sm">
+                        <span className="text-gray-500">好友数: {device.friendCount}</span>
+                        <span className="text-gray-500">电量: {device.battery}%</span>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              ))
+            )}
+          </div>
+
+          {totalPages > 1 && (
+            <div className="flex justify-center space-x-2 mt-4">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                disabled={currentPage === 1}
+              >
+                上一页
+              </Button>
+              <span className="flex items-center px-2">
+                {currentPage} / {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+                disabled={currentPage === totalPages}
+              >
+                下一页
+              </Button>
+            </div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/app/components/poster-selector.tsx b/app/components/poster-selector.tsx
new file mode 100644
index 0000000..24cf5f7
--- /dev/null
+++ b/app/components/poster-selector.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Check } from "lucide-react"
+
+interface PosterTemplate {
+  id: string
+  title: string
+  type: "领取" | "了解"
+  imageUrl: string
+}
+
+interface PosterSelectorProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSelect: (template: PosterTemplate) => void
+}
+
+const templates: PosterTemplate[] = [
+  {
+    id: "1",
+    title: "点击领取",
+    type: "领取",
+    imageUrl: "/placeholder.svg?height=400&width=300",
+  },
+  {
+    id: "2",
+    title: "点击了解",
+    type: "了解",
+    imageUrl: "/placeholder.svg?height=400&width=300",
+  },
+  // ... 其他模板
+]
+
+export function PosterSelector({ open, onOpenChange, onSelect }: PosterSelectorProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>选择海报</DialogTitle>
+        </DialogHeader>
+
+        <div>
+          <h3 className="text-sm text-gray-500 mb-4">点击下方海报使用该模板</h3>
+          <div className="grid grid-cols-3 gap-6">
+            {templates.map((template) => (
+              <div
+                key={template.id}
+                className="group relative cursor-pointer"
+                onClick={() => {
+                  onSelect(template)
+                  onOpenChange(false)
+                }}
+              >
+                <div className="aspect-[3/4] rounded-lg overflow-hidden bg-gray-100">
+                  <img
+                    src={template.imageUrl || "/placeholder.svg"}
+                    alt={template.title}
+                    className="w-full h-full object-cover transition-transform group-hover:scale-105"
+                  />
+                </div>
+                <div className="absolute inset-0 flex items-center justify-center opacity-0 bg-black/50 group-hover:opacity-100 transition-opacity">
+                  <Check className="w-8 h-8 text-white" />
+                </div>
+                <div className="mt-2 text-center">
+                  <div className="font-medium">{template.title}</div>
+                  <div className="text-sm text-gray-500">{template.type}类型</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex justify-end space-x-2 mt-4">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            关闭
+          </Button>
+          <Button>新建海报</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/app/components/ui/accordion.tsx b/app/components/ui/accordion.tsx
new file mode 100644
index 0000000..df4d5b4
--- /dev/null
+++ b/app/components/ui/accordion.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className,
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/app/components/ui/avatar.tsx b/app/components/ui/avatar.tsx
new file mode 100644
index 0000000..9946eec
--- /dev/null
+++ b/app/components/ui/avatar.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/app/components/ui/badge.tsx b/app/components/ui/badge.tsx
new file mode 100644
index 0000000..15241a3
--- /dev/null
+++ b/app/components/ui/badge.tsx
@@ -0,0 +1,29 @@
+import type * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
new file mode 100644
index 0000000..738aef7
--- /dev/null
+++ b/app/components/ui/button.tsx
@@ -0,0 +1,60 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-xl text-sm font-medium transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "glass-button bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 hover:scale-105 shadow-glass",
+        destructive:
+          "glass-button bg-gradient-to-r from-red-500 to-pink-500 text-white hover:from-red-600 hover:to-pink-600 hover:scale-105",
+        outline: "glass-light border-2 border-white/30 hover:glass-heavy hover:scale-105",
+        secondary: "glass-light text-gray-700 hover:glass-heavy hover:scale-105",
+        ghost: "hover:glass-light hover:scale-105 rounded-xl",
+        link: "text-blue-600 underline-offset-4 hover:underline hover:text-blue-700",
+      },
+      size: {
+        default: "h-11 px-6 py-2",
+        sm: "h-9 rounded-lg px-4",
+        lg: "h-12 rounded-xl px-8",
+        icon: "h-11 w-11",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
+    // If asChild is true and the first child is a valid element, clone it with the button props
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(children, {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props,
+        ...children.props,
+      })
+    }
+
+    return (
+      <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
+        {children}
+      </button>
+    )
+  },
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/app/components/ui/calendar.tsx b/app/components/ui/calendar.tsx
new file mode 100644
index 0000000..97b8e47
--- /dev/null
+++ b/app/components/ui/calendar.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import type * as React from "react"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "text-muted-foreground opacity-50",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
diff --git a/app/components/ui/card.tsx b/app/components/ui/card.tsx
new file mode 100644
index 0000000..13e9494
--- /dev/null
+++ b/app/components/ui/card.tsx
@@ -0,0 +1,47 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("glass-card transition-all duration-300 hover:shadow-glass-lg", className)} {...props} />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+)
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn(
+        "text-2xl font-semibold leading-none tracking-tight bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => <p ref={ref} className={cn("text-sm text-gray-600", className)} {...props} />,
+)
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+)
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/app/components/ui/checkbox.tsx b/app/components/ui/checkbox.tsx
new file mode 100644
index 0000000..5c40f15
--- /dev/null
+++ b/app/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/app/components/ui/collapsible.tsx b/app/components/ui/collapsible.tsx
new file mode 100644
index 0000000..9fa4894
--- /dev/null
+++ b/app/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/app/components/ui/dialog.tsx b/app/components/ui/dialog.tsx
new file mode 100644
index 0000000..bd214c6
--- /dev/null
+++ b/app/components/ui/dialog.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.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}
+    >
+      {children}
+      <DialogPrimitive.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-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..8ea2f49
--- /dev/null
+++ b/app/components/ui/dropdown-menu.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.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 data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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}
+  />
+))
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      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}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.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 transition-colors 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">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.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 transition-colors 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">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
new file mode 100644
index 0000000..7f84bde
--- /dev/null
+++ b/app/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Input.displayName = "Input"
+
+export { Input }
diff --git a/app/components/ui/label.tsx b/app/components/ui/label.tsx
new file mode 100644
index 0000000..14be101
--- /dev/null
+++ b/app/components/ui/label.tsx
@@ -0,0 +1,19 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/app/components/ui/pagination.tsx b/app/components/ui/pagination.tsx
new file mode 100644
index 0000000..f3acd16
--- /dev/null
+++ b/app/components/ui/pagination.tsx
@@ -0,0 +1,81 @@
+import * as React from "react"
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { type ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+  ),
+)
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 pl-2.5", className)} {...props}>
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pr-2.5", className)} {...props}>
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/app/components/ui/popover.tsx b/app/components/ui/popover.tsx
new file mode 100644
index 0000000..286503f
--- /dev/null
+++ b/app/components/ui/popover.tsx
@@ -0,0 +1,6 @@
+"use client"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger
diff --git a/app/components/ui/preview-dialog.tsx b/app/components/ui/preview-dialog.tsx
new file mode 100644
index 0000000..0038162
--- /dev/null
+++ b/app/components/ui/preview-dialog.tsx
@@ -0,0 +1,34 @@
+"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/app/components/ui/progress.tsx b/app/components/ui/progress.tsx
new file mode 100644
index 0000000..df83c10
--- /dev/null
+++ b/app/components/ui/progress.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/app/components/ui/radio-group.tsx b/app/components/ui/radio-group.tsx
new file mode 100644
index 0000000..d0ceca1
--- /dev/null
+++ b/app/components/ui/radio-group.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, children, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/app/components/ui/scroll-area.tsx b/app/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..209b83c
--- /dev/null
+++ b/app/components/ui/scroll-area.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/app/components/ui/select.tsx b/app/components/ui/select.tsx
new file mode 100644
index 0000000..c6a2bdf
--- /dev/null
+++ b/app/components/ui/select.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full 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">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator }
diff --git a/app/components/ui/switch.tsx b/app/components/ui/switch.tsx
new file mode 100644
index 0000000..6eb07a1
--- /dev/null
+++ b/app/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/app/components/ui/table.tsx b/app/components/ui/table.tsx
new file mode 100644
index 0000000..dfc95ff
--- /dev/null
+++ b/app/components/ui/table.tsx
@@ -0,0 +1,72 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  ),
+)
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
+)
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+  ),
+)
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn("bg-primary font-medium text-primary-foreground", className)} {...props} />
+  ),
+)
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
+      {...props}
+    />
+  ),
+)
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
+  ),
+)
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  ),
+)
+TableCaption.displayName = "TableCaption"
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
diff --git a/app/components/ui/tabs.tsx b/app/components/ui/tabs.tsx
new file mode 100644
index 0000000..0c38131
--- /dev/null
+++ b/app/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all 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=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/app/components/ui/textarea.tsx b/app/components/ui/textarea.tsx
new file mode 100644
index 0000000..f0c9320
--- /dev/null
+++ b/app/components/ui/textarea.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/app/components/ui/toast.tsx b/app/components/ui/toast.tsx
new file mode 100644
index 0000000..d94cc26
--- /dev/null
+++ b/app/components/ui/toast.tsx
@@ -0,0 +1,111 @@
+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 { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className,
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/app/components/ui/tooltip.tsx b/app/components/ui/tooltip.tsx
new file mode 100644
index 0000000..d9f714d
--- /dev/null
+++ b/app/components/ui/tooltip.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+interface TooltipProps {
+  children: React.ReactNode
+  content: React.ReactNode
+  className?: string
+  delayDuration?: number
+  side?: "top" | "right" | "bottom" | "left"
+}
+
+const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  ({ children, content, className, delayDuration = 200, side = "top" }, ref) => {
+    const [isVisible, setIsVisible] = React.useState(false)
+    const [position, setPosition] = React.useState({ top: 0, left: 0 })
+    const tooltipRef = React.useRef<HTMLDivElement>(null)
+    const timeoutRef = React.useRef<NodeJS.Timeout>()
+
+    const handleMouseEnter = (e: React.MouseEvent) => {
+      timeoutRef.current = setTimeout(() => {
+        const rect = (e.target as HTMLElement).getBoundingClientRect()
+        const tooltipRect = tooltipRef.current?.getBoundingClientRect()
+
+        if (tooltipRect) {
+          let top = 0
+          let left = 0
+
+          switch (side) {
+            case "top":
+              top = rect.top - tooltipRect.height - 8
+              left = rect.left + (rect.width - tooltipRect.width) / 2
+              break
+            case "bottom":
+              top = rect.bottom + 8
+              left = rect.left + (rect.width - tooltipRect.width) / 2
+              break
+            case "left":
+              top = rect.top + (rect.height - tooltipRect.height) / 2
+              left = rect.left - tooltipRect.width - 8
+              break
+            case "right":
+              top = rect.top + (rect.height - tooltipRect.height) / 2
+              left = rect.right + 8
+              break
+          }
+
+          setPosition({ top, left })
+          setIsVisible(true)
+        }
+      }, delayDuration)
+    }
+
+    const handleMouseLeave = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+      setIsVisible(false)
+    }
+
+    React.useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current)
+        }
+      }
+    }, [])
+
+    return (
+      <div className="relative inline-block" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} ref={ref}>
+        {children}
+        {isVisible && (
+          <div
+            ref={tooltipRef}
+            className={cn(
+              "fixed z-50 px-2 py-1 text-xs text-primary-foreground bg-primary rounded-md shadow-sm scale-90 animate-in fade-in-0 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,
+            )}
+            style={{
+              top: position.top,
+              left: position.left,
+              transition: "opacity 150ms ease-in-out, transform 150ms ease-in-out",
+            }}
+          >
+            {content}
+          </div>
+        )}
+      </div>
+    )
+  },
+)
+Tooltip.displayName = "Tooltip"
+
+// 为了保持 API 兼容性，我们导出相同的组件名称
+export const TooltipProvider = ({ children }: { children: React.ReactNode }) => children
+export const TooltipTrigger = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
+  <div ref={ref} {...props} />
+))
+TooltipTrigger.displayName = "TooltipTrigger"
+
+export const TooltipContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>((props, ref) => (
+  <div ref={ref} {...props} />
+))
+TooltipContent.displayName = "TooltipContent"
+
+export { Tooltip }
diff --git a/app/components/ui/use-toast.ts b/app/components/ui/use-toast.ts
new file mode 100644
index 0000000..8be701e
--- /dev/null
+++ b/app/components/ui/use-toast.ts
@@ -0,0 +1,186 @@
+"use client"
+
+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_VALUE
+  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
+
+      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)
+      }
+    }
+  }, [])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/app/content/[id]/materials/loading.tsx b/app/content/[id]/materials/loading.tsx
new file mode 100644
index 0000000..c0c52ca
--- /dev/null
+++ b/app/content/[id]/materials/loading.tsx
@@ -0,0 +1,42 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+
+export default function Loading() {
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <Skeleton className="h-10 w-64" />
+        <Skeleton className="h-10 w-32" />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {Array(6)
+          .fill(0)
+          .map((_, i) => (
+            <Card key={i} className="overflow-hidden">
+              <CardHeader className="pb-2">
+                <div className="flex justify-between items-start">
+                  <Skeleton className="h-6 w-40" />
+                  <Skeleton className="h-6 w-20" />
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <Skeleton className="h-40 w-full" />
+                <div className="flex justify-between items-center">
+                  <Skeleton className="h-5 w-24" />
+                  <div className="flex space-x-2">
+                    <Skeleton className="h-8 w-8 rounded-full" />
+                    <Skeleton className="h-8 w-8 rounded-full" />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+      </div>
+
+      <div className="flex justify-center mt-6">
+        <Skeleton className="h-10 w-64" />
+      </div>
+    </div>
+  )
+}
diff --git a/app/content/[id]/materials/new/page.tsx b/app/content/[id]/materials/new/page.tsx
new file mode 100644
index 0000000..55eeb53
--- /dev/null
+++ b/app/content/[id]/materials/new/page.tsx
@@ -0,0 +1,130 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft, Plus, X } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { toast } from "@/components/ui/use-toast"
+
+export default function NewMaterialPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [content, setContent] = useState("")
+  const [newTag, setNewTag] = useState("")
+  const [tags, setTags] = useState<string[]>([])
+
+  const handleAddTag = () => {
+    if (newTag && !tags.includes(newTag)) {
+      setTags([...tags, newTag])
+      setNewTag("")
+    }
+  }
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    setTags(tags.filter((tag) => tag !== tagToRemove))
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!content) {
+      toast({
+        title: "错误",
+        description: "请输入素材内容",
+        variant: "destructive",
+      })
+      return
+    }
+    try {
+      // 模拟保存新素材
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      toast({
+        title: "成功",
+        description: "新素材已创建",
+      })
+      router.push(`/content/${params.id}/materials`)
+    } catch (error) {
+      console.error("Failed to create new material:", error)
+      toast({
+        title: "错误",
+        description: "创建新素材失败",
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">新建素材</h1>
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4">
+        <Card className="p-4">
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <Label htmlFor="content">素材内容</Label>
+              <Textarea
+                id="content"
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                placeholder="请输入素材内容"
+                className="mt-1"
+                rows={5}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="tags">标签</Label>
+              <div className="flex items-center mt-1">
+                <Input
+                  id="tags"
+                  value={newTag}
+                  onChange={(e) => setNewTag(e.target.value)}
+                  placeholder="输入标签"
+                  className="flex-1"
+                />
+                <Button type="button" onClick={handleAddTag} className="ml-2">
+                  <Plus className="h-4 w-4" />
+                  添加
+                </Button>
+              </div>
+              <div className="flex flex-wrap gap-2 mt-2">
+                {tags.map((tag, index) => (
+                  <Badge key={index} variant="secondary" className="flex items-center">
+                    {tag}
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      className="h-4 w-4 ml-1 p-0"
+                      onClick={() => handleRemoveTag(tag)}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </Badge>
+                ))}
+              </div>
+            </div>
+
+            <Button type="submit" className="w-full">
+              保存素材
+            </Button>
+          </form>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/content/[id]/materials/page.tsx b/app/content/[id]/materials/page.tsx
new file mode 100644
index 0000000..0d9a0b0
--- /dev/null
+++ b/app/content/[id]/materials/page.tsx
@@ -0,0 +1,331 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { ChevronLeft, Download, Plus, Search, Tag, Trash2, BarChart } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { useRouter } from "next/navigation"
+import { toast } from "@/components/ui/use-toast"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { useInView } from "react-intersection-observer"
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu"
+
+interface Material {
+  id: string
+  content: string
+  tags: string[]
+  aiAnalysis?: string
+}
+
+export default function MaterialsPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [materials, setMaterials] = useState<Material[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [isLoading, setIsLoading] = useState(true)
+  const [selectedMaterial, setSelectedMaterial] = useState<Material | null>(null)
+  const [page, setPage] = useState(1)
+  const [hasMore, setHasMore] = useState(true)
+  const { ref, inView } = useInView()
+  const [selectedMaterials, setSelectedMaterials] = useState<string[]>([])
+  const [exportFormat, setExportFormat] = useState<"excel" | "csv" | "json">("excel")
+  const [isExporting, setIsExporting] = useState(false)
+
+  useEffect(() => {
+    if (inView && hasMore && !isLoading) {
+      loadMoreMaterials()
+    }
+  }, [inView, hasMore, isLoading])
+
+  useEffect(() => {
+    const fetchMaterials = async () => {
+      setIsLoading(true)
+      try {
+        // 模拟从API获取素材数据
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        const mockMaterials: Material[] = [
+          {
+            id: "1",
+            content: "今天的阳光真好，适合出去走走",
+            tags: ["日常", "心情"],
+          },
+          {
+            id: "2",
+            content: "新品上市，限时优惠，快来抢购！",
+            tags: ["营销", "促销"],
+          },
+          {
+            id: "3",
+            content: "学习新技能的第一天，感觉很充实",
+            tags: ["学习", "成长"],
+          },
+        ]
+        setMaterials(mockMaterials)
+      } catch (error) {
+        console.error("Failed to fetch materials:", error)
+        toast({
+          title: "错误",
+          description: "获取素材数据失败",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchMaterials()
+  }, [])
+
+  const loadMoreMaterials = async () => {
+    setIsLoading(true)
+    try {
+      // 模拟从API获取更多素材数据
+      await new Promise((resolve) => setTimeout(resolve, 500))
+      const newMaterials: Material[] = [
+        {
+          id: String(materials.length + 1),
+          content: `More content ${materials.length + 1}`,
+          tags: ["more", "content"],
+        },
+      ]
+
+      if (newMaterials.length === 0) {
+        setHasMore(false)
+      } else {
+        setMaterials([...materials, ...newMaterials])
+        setPage(page + 1)
+      }
+    } catch (error) {
+      console.error("Failed to fetch more materials:", error)
+      toast({
+        title: "错误",
+        description: "获取更多素材数据失败",
+        variant: "destructive",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleNewMaterial = () => {
+    // 实现新建素材功能
+    router.push(`/content/${params.id}/materials/new`)
+  }
+
+  const handleAIAnalysis = async (material: Material) => {
+    try {
+      // 模拟AI分析过程
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      const analysis = "这是一条" + material.tags.join("、") + "相关的内容，情感倾向积极。"
+      setMaterials(materials.map((m) => (m.id === material.id ? { ...m, aiAnalysis: analysis } : m)))
+      setSelectedMaterial({ ...material, aiAnalysis: analysis })
+    } catch (error) {
+      console.error("AI analysis failed:", error)
+      toast({
+        title: "错误",
+        description: "AI分析失败",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const filteredMaterials = materials.filter(
+    (material) =>
+      material.content.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      material.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase())),
+  )
+
+  const toggleSelectMaterial = (id: string) => {
+    if (selectedMaterials.includes(id)) {
+      setSelectedMaterials(selectedMaterials.filter((materialId) => materialId !== id))
+    } else {
+      setSelectedMaterials([...selectedMaterials, id])
+    }
+  }
+
+  const selectAllMaterials = () => {
+    if (selectedMaterials.length === filteredMaterials.length) {
+      setSelectedMaterials([])
+    } else {
+      setSelectedMaterials(filteredMaterials.map((material) => material.id))
+    }
+  }
+
+  const handleExport = async () => {
+    setIsExporting(true)
+    try {
+      // 模拟导出过程
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+
+      let fileName = `素材数据_${new Date().toISOString().split("T")[0]}`
+      let fileExtension = ""
+
+      switch (exportFormat) {
+        case "excel":
+          fileName += ".xlsx"
+          fileExtension = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+          break
+        case "csv":
+          fileName += ".csv"
+          fileExtension = "text/csv"
+          break
+        case "json":
+          fileName += ".json"
+          fileExtension = "application/json"
+          break
+      }
+
+      toast({
+        title: "导出成功",
+        description: `已成功导出为${fileName}`,
+      })
+    } catch (error) {
+      console.error("Export failed:", error)
+      toast({
+        title: "导出失败",
+        description: "导出素材数据失败",
+        variant: "destructive",
+      })
+    } finally {
+      setIsExporting(false)
+    }
+  }
+
+  if (isLoading) {
+    return <div className="flex justify-center items-center h-screen">加载中...</div>
+  }
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">已采集素材</h1>
+          </div>
+          {selectedMaterials.length > 0 && (
+            <div className="flex items-center space-x-2">
+              <span className="text-sm text-gray-500">已选择 {selectedMaterials.length} 项</span>
+              <Button variant="outline" size="sm" onClick={() => setSelectedMaterials([])}>
+                取消选择
+              </Button>
+              <Button variant="destructive" size="sm">
+                批量删除
+              </Button>
+              <Button variant="outline" size="sm">
+                批量添加标签
+              </Button>
+            </div>
+          )}
+          <div className="flex items-center space-x-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" disabled={isExporting}>
+                  {isExporting ? (
+                    <>
+                      <span className="mr-2">导出中</span>
+                      <span className="animate-spin">⟳</span>
+                    </>
+                  ) : (
+                    <>
+                      <Download className="h-4 w-4 mr-2" />
+                      导出
+                    </>
+                  )}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuRadioGroup value={exportFormat} onValueChange={(value) => setExportFormat(value as any)}>
+                  <DropdownMenuRadioItem value="excel">Excel格式</DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="csv">CSV格式</DropdownMenuRadioItem>
+                  <DropdownMenuRadioItem value="json">JSON格式</DropdownMenuRadioItem>
+                </DropdownMenuRadioGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={handleExport}>开始导出</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Button onClick={handleNewMaterial}>
+              <Plus className="h-4 w-4 mr-2" />
+              新建素材
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4">
+        <Card className="p-4">
+          <div className="space-y-4">
+            <div className="relative">
+              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+              <Input
+                placeholder="搜索素材或标签..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+
+            <div className="space-y-2">
+              {filteredMaterials.map((material) => (
+                <div key={material.id} className="flex items-center justify-between bg-white p-3 rounded-lg shadow">
+                  <div className="flex-1">
+                    <input
+                      type="checkbox"
+                      checked={selectedMaterials.includes(material.id)}
+                      onChange={() => toggleSelectMaterial(material.id)}
+                    />
+                    <p className="text-sm text-gray-600 mb-2">{material.content}</p>
+                    <div className="flex flex-wrap gap-2">
+                      {material.tags.map((tag, index) => (
+                        <Badge key={index} variant="secondary">
+                          <Tag className="h-3 w-3 mr-1" />
+                          {tag}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Dialog>
+                      <DialogTrigger asChild>
+                        <Button variant="outline" size="sm" onClick={() => handleAIAnalysis(material)}>
+                          <BarChart className="h-4 w-4 mr-1" />
+                          AI分析
+                        </Button>
+                      </DialogTrigger>
+                      <DialogContent>
+                        <DialogHeader>
+                          <DialogTitle>AI 分析结果</DialogTitle>
+                        </DialogHeader>
+                        <div className="mt-4">
+                          <p>{selectedMaterial?.aiAnalysis || "正在分析中..."}</p>
+                        </div>
+                      </DialogContent>
+                    </Dialog>
+                    <Button variant="destructive" size="sm">
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+              {filteredMaterials.length > 0 && hasMore && (
+                <div ref={ref} className="py-4 text-center">
+                  {isLoading ? "加载中..." : "向下滚动加载更多"}
+                </div>
+              )}
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/content/[id]/page.tsx b/app/content/[id]/page.tsx
new file mode 100644
index 0000000..c991806
--- /dev/null
+++ b/app/content/[id]/page.tsx
@@ -0,0 +1,289 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft, Save } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Textarea } from "@/components/ui/textarea"
+import { DateRangePicker } from "@/components/ui/date-range-picker"
+import { WechatFriendSelector } from "@/components/WechatFriendSelector"
+import { WechatGroupSelector } from "@/components/WechatGroupSelector"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { toast } from "@/components/ui/use-toast"
+
+interface ContentLibrary {
+  id: string
+  name: string
+  sourceType: "friends" | "groups"
+  keywordsInclude: string
+  keywordsExclude: string
+  startDate: string
+  endDate: string
+  selectedFriends: any[]
+  selectedGroups: any[]
+  useAI: boolean
+  aiPrompt: string
+  enabled: boolean
+}
+
+export default function ContentLibraryPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [library, setLibrary] = useState<ContentLibrary | null>(null)
+  const [isWechatFriendSelectorOpen, setIsWechatFriendSelectorOpen] = useState(false)
+  const [isWechatGroupSelectorOpen, setIsWechatGroupSelectorOpen] = useState(false)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchLibrary = async () => {
+      setIsLoading(true)
+      try {
+        // 模拟从API获取内容库数据
+        await new Promise((resolve) => setTimeout(resolve, 500))
+        const data = {
+          id: params.id,
+          name: "示例内容库",
+          sourceType: "friends",
+          keywordsInclude: "关键词1,关键词2",
+          keywordsExclude: "排除词1,排除词2",
+          startDate: "2024-01-01",
+          endDate: "2024-12-31",
+          selectedFriends: [
+            { id: "1", nickname: "张三", avatar: "/placeholder.svg?height=40&width=40" },
+            { id: "2", nickname: "李四", avatar: "/placeholder.svg?height=40&width=40" },
+          ],
+          selectedGroups: [],
+          useAI: true,
+          aiPrompt: "AI提示词示例",
+          enabled: true,
+        }
+        setLibrary(data)
+      } catch (error) {
+        console.error("Failed to fetch library data:", error)
+        toast({
+          title: "错误",
+          description: "获取内容库数据失败",
+          variant: "destructive",
+        })
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    fetchLibrary()
+  }, [params.id])
+
+  const handleSave = async () => {
+    if (!library) return
+    try {
+      // 模拟保存到API
+      await new Promise((resolve) => setTimeout(resolve, 500))
+      toast({
+        title: "成功",
+        description: "内容库已保存",
+      })
+      // 这里应该调用一个函数来更新外部展示的数据
+      // updateExternalDisplay(library)
+    } catch (error) {
+      console.error("Failed to save library:", error)
+      toast({
+        title: "错误",
+        description: "保存内容库失败",
+        variant: "destructive",
+      })
+    }
+  }
+
+  if (isLoading) {
+    return <div className="flex justify-center items-center h-screen">加载中...</div>
+  }
+
+  if (!library) {
+    return <div className="flex justify-center items-center h-screen">内容库不存在</div>
+  }
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen pb-16">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">内容库详情</h1>
+          </div>
+          <Button onClick={handleSave}>
+            <Save className="h-4 w-4 mr-2" />
+            保存
+          </Button>
+        </div>
+      </header>
+
+      <div className="p-4 space-y-4">
+        <Card className="p-4">
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="name" className="text-base required">
+                内容库名称
+              </Label>
+              <Input
+                id="name"
+                value={library.name}
+                onChange={(e) => setLibrary({ ...library, name: e.target.value })}
+                placeholder="请输入内容库名称"
+                required
+                className="mt-1.5"
+              />
+            </div>
+
+            <div>
+              <Label className="text-base">数据来源配置</Label>
+              <Tabs
+                value={library.sourceType}
+                onValueChange={(value: "friends" | "groups") => setLibrary({ ...library, sourceType: value })}
+                className="mt-1.5"
+              >
+                <TabsList className="grid w-full grid-cols-2">
+                  <TabsTrigger value="friends">选择微信好友</TabsTrigger>
+                  <TabsTrigger value="groups">选择聊天群</TabsTrigger>
+                </TabsList>
+                <TabsContent value="friends" className="mt-4">
+                  <Button variant="outline" className="w-full" onClick={() => setIsWechatFriendSelectorOpen(true)}>
+                    选择微信好友
+                  </Button>
+                  {library.selectedFriends.length > 0 && (
+                    <div className="mt-2 space-y-2">
+                      {library.selectedFriends.map((friend) => (
+                        <div key={friend.id} className="flex items-center justify-between bg-gray-100 p-2 rounded-md">
+                          <span>{friend.nickname}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </TabsContent>
+                <TabsContent value="groups" className="mt-4">
+                  <Button variant="outline" className="w-full" onClick={() => setIsWechatGroupSelectorOpen(true)}>
+                    选择聊天群
+                  </Button>
+                  {library.selectedGroups.length > 0 && (
+                    <div className="mt-2 space-y-2">
+                      {library.selectedGroups.map((group) => (
+                        <div key={group.id} className="flex items-center justify-between bg-gray-100 p-2 rounded-md">
+                          <span>{group.name}</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </TabsContent>
+              </Tabs>
+            </div>
+
+            <Accordion type="single" collapsible>
+              <AccordionItem value="keywords">
+                <AccordionTrigger>关键字设置</AccordionTrigger>
+                <AccordionContent>
+                  <div className="space-y-4">
+                    <div>
+                      <Label htmlFor="keywordsInclude" className="text-base">
+                        关键字匹配
+                      </Label>
+                      <Textarea
+                        id="keywordsInclude"
+                        value={library.keywordsInclude}
+                        onChange={(e) => setLibrary({ ...library, keywordsInclude: e.target.value })}
+                        placeholder="如果设置了关键字，系统只会采集含有关键字的内容。多个关键字，用半角的','隔开。"
+                        className="mt-1.5 min-h-[100px]"
+                      />
+                    </div>
+
+                    <div>
+                      <Label htmlFor="keywordsExclude" className="text-base">
+                        关键字排除
+                      </Label>
+                      <Textarea
+                        id="keywordsExclude"
+                        value={library.keywordsExclude}
+                        onChange={(e) => setLibrary({ ...library, keywordsExclude: e.target.value })}
+                        placeholder="如果设置了关键字，匹配到关键字的，系统将不会采集。多个关键字，用半角的','隔开。"
+                        className="mt-1.5 min-h-[100px]"
+                      />
+                    </div>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+
+            <div className="flex items-center justify-between">
+              <div>
+                <Label className="text-base">是否启用AI</Label>
+                <p className="text-sm text-gray-500 mt-1">
+                  当启用AI之后，该内容库下的所有内容，都会通过AI重新生成内容。
+                </p>
+              </div>
+              <Switch
+                checked={library.useAI}
+                onCheckedChange={(checked) => setLibrary({ ...library, useAI: checked })}
+              />
+            </div>
+
+            {library.useAI && (
+              <div>
+                <Label htmlFor="aiPrompt" className="text-base">
+                  AI 提示词
+                </Label>
+                <Textarea
+                  id="aiPrompt"
+                  value={library.aiPrompt}
+                  onChange={(e) => setLibrary({ ...library, aiPrompt: e.target.value })}
+                  placeholder="请输入 AI 提示词"
+                  className="mt-1.5 min-h-[100px]"
+                />
+              </div>
+            )}
+
+            <div>
+              <Label className="text-base">时间限制</Label>
+              <DateRangePicker
+                className="mt-1.5"
+                onChange={(range) => {
+                  if (range?.from) {
+                    setLibrary({
+                      ...library,
+                      startDate: range.from.toISOString(),
+                      endDate: range.to?.toISOString() || "",
+                    })
+                  }
+                }}
+              />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <Label className="text-base required">是否启用</Label>
+              <Switch
+                checked={library.enabled}
+                onCheckedChange={(checked) => setLibrary({ ...library, enabled: checked })}
+              />
+            </div>
+          </div>
+        </Card>
+      </div>
+
+      <WechatFriendSelector
+        open={isWechatFriendSelectorOpen}
+        onOpenChange={setIsWechatFriendSelectorOpen}
+        selectedFriends={library.selectedFriends}
+        onSelect={(friends) => setLibrary({ ...library, selectedFriends: friends })}
+      />
+
+      <WechatGroupSelector
+        open={isWechatGroupSelectorOpen}
+        onOpenChange={setIsWechatGroupSelectorOpen}
+        selectedGroups={library.selectedGroups}
+        onSelect={(groups) => setLibrary({ ...library, selectedGroups: groups })}
+      />
+    </div>
+  )
+}
diff --git a/app/content/loading.tsx b/app/content/loading.tsx
new file mode 100644
index 0000000..24149d8
--- /dev/null
+++ b/app/content/loading.tsx
@@ -0,0 +1,52 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+
+export default function ContentLoading() {
+  return (
+    <div className="container mx-auto p-4 space-y-6">
+      <div className="flex items-center justify-between mb-6">
+        <Skeleton className="h-10 w-64" />
+        <Skeleton className="h-10 w-32" />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+        {Array(3)
+          .fill(0)
+          .map((_, i) => (
+            <Card key={i} className="shadow-sm">
+              <CardHeader className="pb-2">
+                <Skeleton className="h-6 w-32 mb-2" />
+              </CardHeader>
+              <CardContent>
+                <Skeleton className="h-16 w-full" />
+              </CardContent>
+            </Card>
+          ))}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <Skeleton className="h-7 w-48" />
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {Array(5)
+              .fill(0)
+              .map((_, i) => (
+                <div key={i} className="flex items-center gap-4">
+                  <Skeleton className="h-12 w-12 rounded-full" />
+                  <div className="space-y-2 flex-1">
+                    <Skeleton className="h-4 w-full" />
+                    <Skeleton className="h-4 w-3/4" />
+                  </div>
+                  <Skeleton className="h-8 w-24" />
+                </div>
+              ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/content/new/device-selector.tsx b/app/content/new/device-selector.tsx
new file mode 100644
index 0000000..9e87a00
--- /dev/null
+++ b/app/content/new/device-selector.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Search, Plus } from "lucide-react"
+
+interface Device {
+  id: string
+  name: string
+  account: string
+  status: "online" | "offline"
+}
+
+const mockDevices: Device[] = [
+  {
+    id: "1",
+    name: "iPhone 13 Pro",
+    account: "wxid_abc123",
+    status: "online",
+  },
+  {
+    id: "2",
+    name: "Huawei P40",
+    account: "wxid_xyz789",
+    status: "offline",
+  },
+]
+
+interface DeviceSelectorProps {
+  selectedDevices: string[]
+  onChange: (devices: string[]) => void
+}
+
+export function DeviceSelector({ selectedDevices, onChange }: DeviceSelectorProps) {
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const toggleSelectAll = () => {
+    if (selectedDevices.length === mockDevices.length) {
+      onChange([])
+    } else {
+      onChange(mockDevices.map((device) => device.id))
+    }
+  }
+
+  const toggleDevice = (deviceId: string) => {
+    if (selectedDevices.includes(deviceId)) {
+      onChange(selectedDevices.filter((id) => id !== deviceId))
+    } else {
+      onChange([...selectedDevices, deviceId])
+    }
+  }
+
+  return (
+    <Card className="p-4">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder="搜索设备"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <Button className="ml-2" size="sm">
+            <Plus className="w-4 h-4 mr-2" />
+            添加设备
+          </Button>
+        </div>
+
+        <div className="rounded-md border overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-12">
+                  <Checkbox checked={selectedDevices.length === mockDevices.length} onCheckedChange={toggleSelectAll} />
+                </TableHead>
+                <TableHead>设备名称</TableHead>
+                <TableHead>微信账号</TableHead>
+                <TableHead>状态</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {mockDevices.map((device) => (
+                <TableRow key={device.id}>
+                  <TableCell>
+                    <Checkbox
+                      checked={selectedDevices.includes(device.id)}
+                      onCheckedChange={() => toggleDevice(device.id)}
+                    />
+                  </TableCell>
+                  <TableCell>{device.name}</TableCell>
+                  <TableCell>{device.account}</TableCell>
+                  <TableCell>
+                    <span
+                      className={`inline-flex items-center px-2 py-1 rounded-full text-xs ${
+                        device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                      }`}
+                    >
+                      {device.status === "online" ? "在线" : "离线"}
+                    </span>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+    </Card>
+  )
+}
diff --git a/app/content/new/page.tsx b/app/content/new/page.tsx
new file mode 100644
index 0000000..702cc7c
--- /dev/null
+++ b/app/content/new/page.tsx
@@ -0,0 +1,273 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, X } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Textarea } from "@/components/ui/textarea"
+import { useRouter } from "next/navigation"
+import { DateRangePicker } from "@/components/ui/date-range-picker"
+import { WechatFriendSelector } from "@/components/WechatFriendSelector"
+import { WechatGroupSelector } from "@/components/WechatGroupSelector"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+
+interface WechatFriend {
+  id: string
+  nickname: string
+  wechatId: string
+  avatar: string
+  gender: "male" | "female"
+  customer: string
+}
+
+interface WechatGroup {
+  id: string
+  name: string
+  memberCount: number
+  avatar: string
+  owner: string
+  customer: string
+}
+
+export default function NewContentLibraryPage() {
+  const router = useRouter()
+  const [formData, setFormData] = useState({
+    name: "",
+    sourceType: "friends" as "friends" | "groups",
+    keywordsInclude: "",
+    keywordsExclude: "",
+    startDate: "",
+    endDate: "",
+    selectedFriends: [] as WechatFriend[],
+    selectedGroups: [] as WechatGroup[],
+    useAI: false,
+    aiPrompt: "",
+    enabled: true,
+  })
+
+  const [isWechatFriendSelectorOpen, setIsWechatFriendSelectorOpen] = useState(false)
+  const [isWechatGroupSelectorOpen, setIsWechatGroupSelectorOpen] = useState(false)
+
+  const removeFriend = (friendId: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      selectedFriends: prev.selectedFriends.filter((friend) => friend.id !== friendId),
+    }))
+  }
+
+  const removeGroup = (groupId: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      selectedGroups: prev.selectedGroups.filter((group) => group.id !== groupId),
+    }))
+  }
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen pb-16">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center p-4">
+          <Button variant="ghost" size="icon" onClick={() => router.back()}>
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="ml-2 text-lg font-medium">新建内容库</h1>
+        </div>
+      </header>
+
+      <div className="p-4 space-y-4">
+        <Card className="p-4">
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="name" className="text-base required">
+                内容库名称
+              </Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                placeholder="请输入内容库名称"
+                required
+                className="mt-1.5"
+              />
+            </div>
+
+            <div>
+              <Label className="text-base">数据来源配置</Label>
+              <Tabs
+                value={formData.sourceType}
+                onValueChange={(value: "friends" | "groups") => setFormData({ ...formData, sourceType: value })}
+                className="mt-1.5"
+              >
+                <TabsList className="grid w-full grid-cols-2">
+                  <TabsTrigger value="friends">选择微信好友</TabsTrigger>
+                  <TabsTrigger value="groups">选择聊天群</TabsTrigger>
+                </TabsList>
+                <TabsContent value="friends" className="mt-4">
+                  <Button variant="outline" className="w-full" onClick={() => setIsWechatFriendSelectorOpen(true)}>
+                    选择微信好友
+                  </Button>
+                  {formData.selectedFriends.length > 0 && (
+                    <div className="mt-2 space-y-2">
+                      {formData.selectedFriends.map((friend) => (
+                        <div key={friend.id} className="flex items-center justify-between bg-gray-100 p-2 rounded-md">
+                          <div className="flex items-center space-x-2">
+                            <img
+                              src={friend.avatar || "/placeholder.svg"}
+                              alt={friend.nickname}
+                              className="w-8 h-8 rounded-full"
+                            />
+                            <span>{friend.nickname}</span>
+                          </div>
+                          <Button variant="ghost" size="sm" onClick={() => removeFriend(friend.id)}>
+                            <X className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </TabsContent>
+                <TabsContent value="groups" className="mt-4">
+                  <Button variant="outline" className="w-full" onClick={() => setIsWechatGroupSelectorOpen(true)}>
+                    选择聊天群
+                  </Button>
+                  {formData.selectedGroups.length > 0 && (
+                    <div className="mt-2 space-y-2">
+                      {formData.selectedGroups.map((group) => (
+                        <div key={group.id} className="flex items-center justify-between bg-gray-100 p-2 rounded-md">
+                          <div className="flex items-center space-x-2">
+                            <img
+                              src={group.avatar || "/placeholder.svg"}
+                              alt={group.name}
+                              className="w-8 h-8 rounded-full"
+                            />
+                            <span>{group.name}</span>
+                          </div>
+                          <Button variant="ghost" size="sm" onClick={() => removeGroup(group.id)}>
+                            <X className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </TabsContent>
+              </Tabs>
+            </div>
+
+            <Accordion type="single" collapsible>
+              <AccordionItem value="keywords">
+                <AccordionTrigger>关键字设置</AccordionTrigger>
+                <AccordionContent>
+                  <div className="space-y-4">
+                    <div>
+                      <Label htmlFor="keywordsInclude" className="text-base">
+                        关键字匹配
+                      </Label>
+                      <Textarea
+                        id="keywordsInclude"
+                        value={formData.keywordsInclude}
+                        onChange={(e) => setFormData({ ...formData, keywordsInclude: e.target.value })}
+                        placeholder="如果设置了关键字，系统只会采集含有关键字的内容。多个关键字，用半角的','隔开。"
+                        className="mt-1.5 min-h-[100px]"
+                      />
+                    </div>
+
+                    <div>
+                      <Label htmlFor="keywordsExclude" className="text-base">
+                        关键字排除
+                      </Label>
+                      <Textarea
+                        id="keywordsExclude"
+                        value={formData.keywordsExclude}
+                        onChange={(e) => setFormData({ ...formData, keywordsExclude: e.target.value })}
+                        placeholder="如果设置了关键字，匹配到关键字的，系统将不会采集。多个关键字，用半角的','隔开。"
+                        className="mt-1.5 min-h-[100px]"
+                      />
+                    </div>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+
+            <div className="flex items-center justify-between">
+              <div>
+                <Label className="text-base">是否启用AI</Label>
+                <p className="text-sm text-gray-500 mt-1">
+                  当启用AI之后，该内容库下的所有内容，都会通过AI重新生成内容。
+                </p>
+              </div>
+              <Switch
+                checked={formData.useAI}
+                onCheckedChange={(checked) => setFormData({ ...formData, useAI: checked })}
+              />
+            </div>
+
+            {formData.useAI && (
+              <div>
+                <Label htmlFor="aiPrompt" className="text-base">
+                  AI 提示词
+                </Label>
+                <Textarea
+                  id="aiPrompt"
+                  value={formData.aiPrompt}
+                  onChange={(e) => setFormData({ ...formData, aiPrompt: e.target.value })}
+                  placeholder="请输入 AI 提示词"
+                  className="mt-1.5 min-h-[100px]"
+                />
+              </div>
+            )}
+
+            <div>
+              <Label className="text-base">时间限制</Label>
+              <DateRangePicker
+                className="mt-1.5"
+                onChange={(range) => {
+                  if (range?.from) {
+                    setFormData({
+                      ...formData,
+                      startDate: range.from.toISOString(),
+                      endDate: range.to?.toISOString() || "",
+                    })
+                  }
+                }}
+              />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <Label className="text-base required">是否启用</Label>
+              <Switch
+                checked={formData.enabled}
+                onCheckedChange={(checked) => setFormData({ ...formData, enabled: checked })}
+              />
+            </div>
+          </div>
+        </Card>
+
+        <div className="flex gap-4">
+          <Button type="button" variant="outline" className="flex-1" onClick={() => router.back()}>
+            取消
+          </Button>
+          <Button type="submit" className="flex-1">
+            保存
+          </Button>
+        </div>
+      </div>
+
+      <WechatFriendSelector
+        open={isWechatFriendSelectorOpen}
+        onOpenChange={setIsWechatFriendSelectorOpen}
+        selectedFriends={formData.selectedFriends}
+        onSelect={(friends) => setFormData({ ...formData, selectedFriends: friends })}
+      />
+
+      <WechatGroupSelector
+        open={isWechatGroupSelectorOpen}
+        onOpenChange={setIsWechatGroupSelectorOpen}
+        selectedGroups={formData.selectedGroups}
+        onSelect={(groups) => setFormData({ ...formData, selectedGroups: groups })}
+      />
+    </div>
+  )
+}
diff --git a/app/content/page.tsx b/app/content/page.tsx
new file mode 100644
index 0000000..3c07cc0
--- /dev/null
+++ b/app/content/page.tsx
@@ -0,0 +1,213 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Filter, Search, RefreshCw, Plus, Edit, Trash2, Eye, MoreVertical } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Badge } from "@/components/ui/badge"
+import { useRouter } from "next/navigation"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import Image from "next/image"
+
+interface ContentLibrary {
+  id: string
+  name: string
+  source: "friends" | "groups"
+  targetAudience: {
+    id: string
+    nickname: string
+    avatar: string
+  }[]
+  creator: string
+  itemCount: number
+  lastUpdated: string
+  enabled: boolean
+}
+
+export default function ContentLibraryPage() {
+  const router = useRouter()
+  const [libraries, setLibraries] = useState<ContentLibrary[]>([
+    {
+      id: "129",
+      name: "微信好友广告",
+      source: "friends",
+      targetAudience: [
+        { id: "1", nickname: "张三", avatar: "/placeholder.svg?height=40&width=40" },
+        { id: "2", nickname: "李四", avatar: "/placeholder.svg?height=40&width=40" },
+        { id: "3", nickname: "王五", avatar: "/placeholder.svg?height=40&width=40" },
+      ],
+      creator: "海尼",
+      itemCount: 0,
+      lastUpdated: "2024-02-09 12:30",
+      enabled: false,
+    },
+    {
+      id: "127",
+      name: "开发群",
+      source: "groups",
+      targetAudience: [{ id: "4", nickname: "开发群1", avatar: "/placeholder.svg?height=40&width=40" }],
+      creator: "karuo",
+      itemCount: 0,
+      lastUpdated: "2024-02-09 12:30",
+      enabled: true,
+    },
+  ])
+
+  const [searchQuery, setSearchQuery] = useState("")
+  const [activeTab, setActiveTab] = useState("all")
+
+  const handleCreateNew = () => {
+    // 模拟创建新内容库
+    const newId = Date.now().toString()
+    const newLibrary = {
+      id: newId,
+      name: "新内容库",
+      source: "friends" as const,
+      targetAudience: [],
+      creator: "当前用户",
+      itemCount: 0,
+      lastUpdated: new Date().toISOString(),
+      enabled: true,
+    }
+    setLibraries([newLibrary, ...libraries])
+    router.push(`/content/${newId}`)
+  }
+
+  const handleEdit = (id: string) => {
+    router.push(`/content/${id}`)
+  }
+
+  const handleDelete = (id: string) => {
+    // 实现删除功能
+    setLibraries(libraries.filter((lib) => lib.id !== id))
+  }
+
+  const handleViewMaterials = (id: string) => {
+    router.push(`/content/${id}/materials`)
+  }
+
+  const filteredLibraries = libraries.filter(
+    (library) =>
+      (activeTab === "all" || library.source === activeTab) &&
+      (library.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        library.targetAudience.some((target) => target.nickname.toLowerCase().includes(searchQuery.toLowerCase()))),
+  )
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">内容库</h1>
+          </div>
+          <Button onClick={handleCreateNew}>
+            <Plus className="h-4 w-4 mr-2" />
+            新建
+          </Button>
+        </div>
+      </header>
+
+      <div className="p-4 space-y-4">
+        <Card className="p-4">
+          <div className="space-y-4">
+            <div className="flex items-center space-x-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                <Input
+                  placeholder="搜索内容库..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+              <Button variant="outline" size="icon">
+                <Filter className="h-4 w-4" />
+              </Button>
+              <Button variant="outline" size="icon">
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
+              <TabsList className="grid w-full grid-cols-3">
+                <TabsTrigger value="all">全部</TabsTrigger>
+                <TabsTrigger value="friends">微信好友</TabsTrigger>
+                <TabsTrigger value="groups">聊天群</TabsTrigger>
+              </TabsList>
+            </Tabs>
+
+            <div className="space-y-3">
+              {filteredLibraries.map((library) => (
+                <Card key={library.id} className="p-4">
+                  <div className="flex items-start justify-between">
+                    <div className="space-y-1">
+                      <div className="flex items-center space-x-2">
+                        <h3 className="font-medium">{library.name}</h3>
+                        <Badge variant={library.enabled ? "success" : "secondary"}>
+                          {library.enabled ? "已启用" : "已停用"}
+                        </Badge>
+                      </div>
+                      <div className="text-sm text-gray-500">
+                        <div className="flex items-center space-x-1">
+                          <span>来源：</span>
+                          <div className="flex -space-x-2 overflow-hidden">
+                            {library.targetAudience.slice(0, 3).map((target) => (
+                              <Image
+                                key={target.id}
+                                src={target.avatar || "/placeholder.svg"}
+                                alt={target.nickname}
+                                width={24}
+                                height={24}
+                                className="inline-block h-6 w-6 rounded-full ring-2 ring-white"
+                              />
+                            ))}
+                            {library.targetAudience.length > 3 && (
+                              <span className="flex items-center justify-center w-6 h-6 text-xs font-medium text-white bg-gray-400 rounded-full ring-2 ring-white">
+                                +{library.targetAudience.length - 3}
+                              </span>
+                            )}
+                          </div>
+                        </div>
+                        <div>创建人：{library.creator}</div>
+                        <div>内容数量：{library.itemCount}</div>
+                        <div>更新时间：{library.lastUpdated}</div>
+                      </div>
+                    </div>
+                    <div className="flex space-x-2">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="sm">
+                            <MoreVertical className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem onClick={() => handleEdit(library.id)}>
+                            <Edit className="h-4 w-4 mr-2" />
+                            编辑
+                          </DropdownMenuItem>
+                          <DropdownMenuItem onClick={() => handleDelete(library.id)}>
+                            <Trash2 className="h-4 w-4 mr-2" />
+                            删除
+                          </DropdownMenuItem>
+                          <DropdownMenuItem onClick={() => handleViewMaterials(library.id)}>
+                            <Eye className="h-4 w-4 mr-2" />
+                            查看素材
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/conversion/page.tsx b/app/conversion/page.tsx
new file mode 100644
index 0000000..0a0409f
--- /dev/null
+++ b/app/conversion/page.tsx
@@ -0,0 +1,508 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { BarChart, LineChart } from "@/components/charts"
+import {
+  Activity,
+  ArrowUpRight,
+  Download,
+  Filter,
+  RefreshCw,
+  ShoppingCart,
+  TrendingUp,
+  MessageSquare,
+} from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Progress } from "@/components/ui/progress"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+
+export default function ConversionPage() {
+  const [timeRange, setTimeRange] = useState("30days")
+
+  return (
+    <div className="container mx-auto p-4 space-y-6">
+      {/* 页面标题和工具栏 */}
+      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold">成交转化</h1>
+          <p className="text-muted-foreground mt-1">促进用户交易与转化的功能集合</p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Select value={timeRange} onValueChange={setTimeRange}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="选择时间范围" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="7days">最近7天</SelectItem>
+              <SelectItem value="30days">最近30天</SelectItem>
+              <SelectItem value="90days">最近90天</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon">
+            <Filter className="h-4 w-4" />
+          </Button>
+          <Button variant="outline" size="icon">
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            导出报告
+          </Button>
+        </div>
+      </div>
+
+      {/* 成交转化概览 */}
+      <Card className="border-none shadow-md overflow-hidden">
+        <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
+          <div className="flex justify-between items-center">
+            <div>
+              <CardTitle>成交转化概览</CardTitle>
+              <CardDescription>用户交易与转化整体情况</CardDescription>
+            </div>
+            <Button variant="outline">
+              <ShoppingCart className="h-4 w-4 mr-2" />
+              查看详情
+            </Button>
+          </div>
+        </CardHeader>
+        <CardContent className="p-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-none shadow-sm">
+              <CardContent className="p-4">
+                <div className="flex justify-between items-start">
+                  <div>
+                    <div className="text-sm font-medium text-blue-600">浏览转化率</div>
+                    <div className="text-2xl font-bold mt-2">45.2%</div>
+                    <div className="text-sm text-green-600 mt-1 flex items-center">
+                      <ArrowUpRight className="h-4 w-4 mr-1" />
+                      较上月提升 2.1%
+                    </div>
+                  </div>
+                  <div className="bg-blue-100 p-2 rounded-full">
+                    <Activity className="h-5 w-5 text-blue-600" />
+                  </div>
+                </div>
+                <div className="mt-3">
+                  <div className="flex justify-between text-xs mb-1">
+                    <span>目标</span>
+                    <span>50%</span>
+                  </div>
+                  <Progress value={90.4} className="h-1.5 bg-blue-100" />
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-none shadow-sm">
+              <CardContent className="p-4">
+                <div className="flex justify-between items-start">
+                  <div>
+                    <div className="text-sm font-medium text-green-600">购买转化率</div>
+                    <div className="text-2xl font-bold mt-2">12.5%</div>
+                    <div className="text-sm text-green-600 mt-1 flex items-center">
+                      <ArrowUpRight className="h-4 w-4 mr-1" />
+                      较上月提升 0.8%
+                    </div>
+                  </div>
+                  <div className="bg-green-100 p-2 rounded-full">
+                    <ShoppingCart className="h-5 w-5 text-green-600" />
+                  </div>
+                </div>
+                <div className="mt-3">
+                  <div className="flex justify-between text-xs mb-1">
+                    <span>目标</span>
+                    <span>15%</span>
+                  </div>
+                  <Progress value={83.3} className="h-1.5 bg-green-100" />
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-none shadow-sm">
+              <CardContent className="p-4">
+                <div className="flex justify-between items-start">
+                  <div>
+                    <div className="text-sm font-medium text-purple-600">场景转化率</div>
+                    <div className="text-2xl font-bold mt-2">18.3%</div>
+                    <div className="text-sm text-green-600 mt-1 flex items-center">
+                      <ArrowUpRight className="h-4 w-4 mr-1" />
+                      较上月提升 1.2%
+                    </div>
+                  </div>
+                  <div className="bg-purple-100 p-2 rounded-full">
+                    <MessageSquare className="h-5 w-5 text-purple-600" />
+                  </div>
+                </div>
+                <div className="mt-3">
+                  <div className="flex justify-between text-xs mb-1">
+                    <span>目标</span>
+                    <span>20%</span>
+                  </div>
+                  <Progress value={91.5} className="h-1.5 bg-purple-100" />
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-gradient-to-br from-amber-50 to-yellow-50 border-none shadow-sm">
+              <CardContent className="p-4">
+                <div className="flex justify-between items-start">
+                  <div>
+                    <div className="text-sm font-medium text-amber-600">客单价</div>
+                    <div className="text-2xl font-bold mt-2">¥245</div>
+                    <div className="text-sm text-green-600 mt-1 flex items-center">
+                      <ArrowUpRight className="h-4 w-4 mr-1" />
+                      较上月提升 5.2%
+                    </div>
+                  </div>
+                  <div className="bg-amber-100 p-2 rounded-full">
+                    <TrendingUp className="h-5 w-5 text-amber-600" />
+                  </div>
+                </div>
+                <div className="mt-3">
+                  <div className="flex justify-between text-xs mb-1">
+                    <span>目标</span>
+                    <span>¥250</span>
+                  </div>
+                  <Progress value={98} className="h-1.5 bg-amber-100" />
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 用户行为分析 */}
+      <Card className="border-none shadow-md overflow-hidden">
+        <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
+          <div className="flex justify-between items-center">
+            <div>
+              <CardTitle>用户行为分析</CardTitle>
+              <CardDescription>用户行为与交互数据分析</CardDescription>
+            </div>
+            <Badge className="bg-blue-100 text-blue-800">转化</Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="p-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="bg-white p-4 rounded-lg shadow-sm">
+              <h3 className="text-lg font-medium mb-3">用户行为分析</h3>
+              <BarChart
+                data={{
+                  labels: ["浏览", "搜索", "点击", "加购", "下单", "支付", "分享"],
+                  datasets: [
+                    {
+                      label: "行为占比(%)",
+                      data: [100, 65, 45, 25, 15, 12, 8],
+                      backgroundColor: "rgba(59, 130, 246, 0.8)",
+                    },
+                  ],
+                }}
+                height={220}
+              />
+            </div>
+            <div className="bg-white p-4 rounded-lg shadow-sm">
+              <h3 className="text-lg font-medium mb-3">用户活跃度分析</h3>
+              <LineChart
+                data={{
+                  labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+                  datasets: [
+                    {
+                      label: "活跃用户数",
+                      data: [65000, 59000, 80000, 81000, 56000, 85000, 90000],
+                      borderColor: "rgb(59, 130, 246)",
+                      backgroundColor: "rgba(59, 130, 246, 0.1)",
+                    },
+                    {
+                      label: "平均停留时间(分钟)",
+                      data: [12, 10, 14, 15, 11, 18, 20],
+                      borderColor: "rgb(16, 185, 129)",
+                      backgroundColor: "rgba(16, 185, 129, 0.1)",
+                    },
+                  ],
+                }}
+                height={220}
+              />
+            </div>
+          </div>
+
+          <div className="mt-4">
+            <Card className="bg-white shadow-sm">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-lg">用户行为指标</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div className="space-y-2">
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm">平均活跃度</span>
+                      <span className="text-sm font-medium">68.5%</span>
+                    </div>
+                    <Progress value={68.5} className="h-1.5" />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm">平均停留时间</span>
+                      <span className="text-sm font-medium">12.5分钟</span>
+                    </div>
+                    <Progress value={62.5} className="h-1.5" />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm">互动率</span>
+                      <span className="text-sm font-medium">45.2%</span>
+                    </div>
+                    <Progress value={45.2} className="h-1.5" />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 交易漏斗分析 */}
+      <Card className="border-none shadow-md overflow-hidden">
+        <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b">
+          <div className="flex justify-between items-center">
+            <div>
+              <CardTitle>交易漏斗分析</CardTitle>
+              <CardDescription>用户交易转化漏斗分析</CardDescription>
+            </div>
+            <Badge className="bg-blue-100 text-blue-800">转化</Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="p-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="bg-white p-4 rounded-lg shadow-sm">
+              <h3 className="text-lg font-medium mb-3">转化漏斗</h3>
+              <div className="flex flex-col items-center space-y-2 py-4">
+                <div className="w-full max-w-md">
+                  <div className="relative pt-1">
+                    <div className="flex mb-2 items-center justify-between">
+                      <div>
+                        <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200">
+                          浏览 (100%)
+                        </span>
+                      </div>
+                      <div className="text-right">
+                        <span className="text-xs font-semibold inline-block text-blue-600">125,689</span>
+                      </div>
+                    </div>
+                    <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
+                      <div
+                        style={{ width: "100%" }}
+                        className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full max-w-md">
+                  <div className="relative pt-1">
+                    <div className="flex mb-2 items-center justify-between">
+                      <div>
+                        <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200">
+                          加入购物车 (45%)
+                        </span>
+                      </div>
+                      <div className="text-right">
+                        <span className="text-xs font-semibold inline-block text-blue-600">56,560</span>
+                      </div>
+                    </div>
+                    <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
+                      <div
+                        style={{ width: "45%" }}
+                        className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500"
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full max-w-md">
+                  <div className="relative pt-1">
+                    <div className="flex mb-2 items-center justify-between">
+                      <div>
+                        <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-yellow-600 bg-yellow-200">
+                          下单 (18%)
+                        </span>
+                      </div>
+                      <div className="text-right">
+                        <span className="text-xs font-semibold inline-block text-yellow-600">22,624</span>
+                      </div>
+                    </div>
+                    <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-yellow-200">
+                      <div
+                        style={{ width: "18%" }}
+                        className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-yellow-500"
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="w-full max-w-md">
+                  <div className="relative pt-1">
+                    <div className="flex mb-2 items-center justify-between">
+                      <div>
+                        <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-green-600 bg-green-200">
+                          支付完成 (8%)
+                        </span>
+                      </div>
+                      <div className="text-right">
+                        <span className="text-xs font-semibold inline-block text-green-600">10,055</span>
+                      </div>
+                    </div>
+                    <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-green-200">
+                      <div
+                        style={{ width: "8%" }}
+                        className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500"
+                      ></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="bg-white p-4 rounded-lg shadow-sm">
+              <h3 className="text-lg font-medium mb-3">转化率趋势</h3>
+              <LineChart
+                data={{
+                  labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+                  datasets: [
+                    {
+                      label: "浏览转化率",
+                      data: [40, 42, 43, 44, 45, 46, 45],
+                      borderColor: "rgb(59, 130, 246)",
+                      backgroundColor: "rgba(59, 130, 246, 0.1)",
+                    },
+                    {
+                      label: "购买转化率",
+                      data: [15, 16, 16.5, 17, 17.5, 18, 18],
+                      borderColor: "rgb(16, 185, 129)",
+                      backgroundColor: "rgba(16, 185, 129, 0.1)",
+                    },
+                  ],
+                }}
+                height={220}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 场景管理 */}
+      <Card className="border-none shadow-md overflow-hidden">
+        <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b">
+          <div className="flex justify-between items-center">
+            <div>
+              <CardTitle>场景管理</CardTitle>
+              <CardDescription>用户交互场景管理与分析</CardDescription>
+            </div>
+            <Badge className="bg-blue-100 text-blue-800">转化</Badge>
+          </div>
+        </CardHeader>
+        <CardContent className="p-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <Card className="bg-white shadow-sm">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-lg">场景概览</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">活跃场景数</span>
+                    <span className="text-sm font-medium">48</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">场景转化率</span>
+                    <span className="text-sm font-medium">18.3%</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">场景覆盖率</span>
+                    <span className="text-sm font-medium">85.2%</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-white shadow-sm">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-lg">热门场景</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">社交场景</span>
+                    <span className="text-sm font-medium">35%</span>
+                  </div>
+                  <Progress value={35} className="h-1.5" />
+
+                  <div className="flex justify-between items-center mt-2">
+                    <span className="text-sm">购物场景</span>
+                    <span className="text-sm font-medium">30%</span>
+                  </div>
+                  <Progress value={30} className="h-1.5" />
+
+                  <div className="flex justify-between items-center mt-2">
+                    <span className="text-sm">内容消费</span>
+                    <span className="text-sm font-medium">20%</span>
+                  </div>
+                  <Progress value={20} className="h-1.5" />
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="bg-white shadow-sm">
+              <CardHeader className="pb-2">
+                <CardTitle className="text-lg">场景效果</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">平均停留时间</span>
+                    <span className="text-sm font-medium">8.5分钟</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">互动率</span>
+                    <span className="text-sm font-medium">42.3%</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-sm">转化率</span>
+                    <span className="text-sm font-medium">18.3%</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="mt-4">
+            <div className="bg-white p-4 rounded-lg shadow-sm">
+              <h3 className="text-lg font-medium mb-3">场景使用趋势</h3>
+              <LineChart
+                data={{
+                  labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+                  datasets: [
+                    {
+                      label: "社交场景",
+                      data: [25000, 27000, 28000, 30000, 32000, 35000, 38000],
+                      borderColor: "rgb(59, 130, 246)",
+                      backgroundColor: "rgba(59, 130, 246, 0.1)",
+                    },
+                    {
+                      label: "购物场景",
+                      data: [20000, 22000, 24000, 25000, 28000, 30000, 32000],
+                      borderColor: "rgb(16, 185, 129)",
+                      backgroundColor: "rgba(16, 185, 129, 0.1)",
+                    },
+                  ],
+                }}
+                height={220}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/data-dictionary/page.tsx b/app/data-dictionary/page.tsx
new file mode 100644
index 0000000..2bcad32
--- /dev/null
+++ b/app/data-dictionary/page.tsx
@@ -0,0 +1,142 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, 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 { PlusCircle } from "lucide-react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+
+interface DataDictionaryItem {
+  id: string
+  fieldName: string
+  description: string
+  dataType: string
+  source: string
+}
+
+export default function DataDictionaryPage() {
+  const [dataDictionary, setDataDictionary] = useState<DataDictionaryItem[]>([
+    {
+      id: "1",
+      fieldName: "username",
+      description: "用户名",
+      dataType: "string",
+      source: "caihong_shua_users",
+    },
+  ])
+  const [newFieldName, setNewFieldName] = useState("")
+  const [newFieldDescription, setNewFieldDescription] = useState("")
+  const [newFieldDataType, setNewFieldDataType] = useState("string")
+  const [newFieldSource, setNewFieldSource] = useState("")
+
+  const handleAddEntry = () => {
+    if (newFieldName.trim() === "") {
+      alert("字段名称不能为空")
+      return
+    }
+
+    const newEntry: DataDictionaryItem = {
+      id: Date.now().toString(),
+      fieldName: newFieldName,
+      description: newFieldDescription,
+      dataType: newFieldDataType,
+      source: newFieldSource,
+    }
+
+    setDataDictionary([...dataDictionary, newEntry])
+    setNewFieldName("")
+    setNewFieldDescription("")
+    setNewFieldDataType("string")
+    setNewFieldSource("")
+  }
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">数据字典管理</h1>
+          <p className="text-muted-foreground mt-1">管理和维护数据字典</p>
+        </div>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>添加数据字典条目</CardTitle>
+          <CardDescription>手动添加数据字典条目</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="field-name">字段名称</Label>
+            <Input
+              id="field-name"
+              placeholder="请输入字段名称"
+              value={newFieldName}
+              onChange={(e) => setNewFieldName(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="field-description">字段描述</Label>
+            <Input
+              id="field-description"
+              placeholder="请输入字段描述"
+              value={newFieldDescription}
+              onChange={(e) => setNewFieldDescription(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="field-data-type">数据类型</Label>
+            <Input
+              id="field-data-type"
+              placeholder="请输入数据类型"
+              value={newFieldDataType}
+              onChange={(e) => setNewFieldDataType(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="field-source">数据来源</Label>
+            <Input
+              id="field-source"
+              placeholder="请输入数据来源"
+              value={newFieldSource}
+              onChange={(e) => setNewFieldSource(e.target.value)}
+            />
+          </div>
+          <Button onClick={handleAddEntry}>
+            <PlusCircle className="h-4 w-4 mr-2" />
+            添加条目
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>数据字典列表</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>字段名称</TableHead>
+                <TableHead>描述</TableHead>
+                <TableHead>数据类型</TableHead>
+                <TableHead>数据来源</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {dataDictionary.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell>{item.fieldName}</TableCell>
+                  <TableCell>{item.description}</TableCell>
+                  <TableCell>{item.dataType}</TableCell>
+                  <TableCell>{item.source}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/data-integration/page.tsx b/app/data-integration/page.tsx
new file mode 100644
index 0000000..efe7105
--- /dev/null
+++ b/app/data-integration/page.tsx
@@ -0,0 +1,554 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} 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 { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { Database, Server, Link, Plus, FileText, RefreshCw } from "lucide-react"
+
+export default function DataIntegrationPage() {
+  const [activeTab, setActiveTab] = useState("data-sources")
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+
+  return (
+    <div className="container mx-auto py-6 space-y-8">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">数据中台</h1>
+          <p className="text-muted-foreground">管理数据源和API接口</p>
+        </div>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+        <TabsList className="grid w-full max-w-md grid-cols-2">
+          <TabsTrigger value="data-sources">数据集成</TabsTrigger>
+          <TabsTrigger value="api-management">API管理</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="data-sources" className="space-y-6">
+          <DataSourcesTab setIsDialogOpen={setIsDialogOpen} />
+          <div className="mt-4">
+            <Button variant="outline" asChild>
+              <a href="/database-structure">
+                <Database className="mr-2 h-4 w-4" />
+                查看数据库结构
+              </a>
+            </Button>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="api-management" className="space-y-6">
+          <ApiManagementTab />
+        </TabsContent>
+      </Tabs>
+
+      <AddDataSourceDialog isOpen={isDialogOpen} setIsOpen={setIsDialogOpen} />
+    </div>
+  )
+}
+
+// 数据源管理标签页
+function DataSourcesTab({ setIsDialogOpen }: { setIsDialogOpen: (open: boolean) => void }) {
+  // 模拟数据源列表
+  const dataSources = [
+    {
+      id: "1",
+      name: "用户数据库",
+      type: "MySQL",
+      host: "db.example.com",
+      status: "connected",
+      lastSync: "2023-07-20 15:30",
+      tables: 24,
+      records: 156789,
+    },
+    {
+      id: "2",
+      name: "订单系统",
+      type: "PostgreSQL",
+      host: "orders.example.com",
+      status: "connected",
+      lastSync: "2023-07-19 12:45",
+      tables: 18,
+      records: 89456,
+    },
+    {
+      id: "3",
+      name: "内容库",
+      type: "MongoDB",
+      host: "content.example.com",
+      status: "error",
+      lastSync: "2023-07-15 09:20",
+      tables: 12,
+      records: 45678,
+    },
+    {
+      id: "4",
+      name: "用户行为分析",
+      type: "ClickHouse",
+      host: "analytics.example.com",
+      status: "connected",
+      lastSync: "2023-07-20 10:15",
+      tables: 8,
+      records: 2345678,
+    },
+    {
+      id: "5",
+      name: "CRM系统",
+      type: "Oracle",
+      host: "crm.example.com",
+      status: "pending",
+      lastSync: "等待连接",
+      tables: 0,
+      records: 0,
+    },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-bold">数据源管理</h2>
+        <Button onClick={() => setIsDialogOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          添加数据源
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>已连接的数据源</CardTitle>
+          <CardDescription>管理和监控所有数据源连接</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>数据源名称</TableHead>
+                <TableHead>类型</TableHead>
+                <TableHead>主机地址</TableHead>
+                <TableHead>状态</TableHead>
+                <TableHead>最后同步</TableHead>
+                <TableHead>表数量</TableHead>
+                <TableHead>记录数</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {dataSources.map((source) => (
+                <TableRow key={source.id}>
+                  <TableCell>
+                    <div className="flex items-center">
+                      <Database className="h-4 w-4 mr-2 text-muted-foreground" />
+                      <span className="font-medium">{source.name}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>{source.type}</TableCell>
+                  <TableCell>{source.host}</TableCell>
+                  <TableCell>
+                    <Badge
+                      className={
+                        source.status === "connected"
+                          ? "bg-green-100 text-green-800"
+                          : source.status === "error"
+                            ? "bg-red-100 text-red-800"
+                            : "bg-yellow-100 text-yellow-800"
+                      }
+                    >
+                      {source.status === "connected" ? "已连接" : source.status === "error" ? "错误" : "等待中"}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>{source.lastSync}</TableCell>
+                  <TableCell>{source.tables}</TableCell>
+                  <TableCell>{source.records.toLocaleString()}</TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button variant="outline" size="sm">
+                        <Link className="h-4 w-4 mr-1" />
+                        查看
+                      </Button>
+                      <Button size="sm">
+                        <RefreshCw className="h-4 w-4 mr-1" />
+                        同步
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>数据源类型</CardTitle>
+          <CardDescription>支持的数据库和数据源类型</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="flex flex-col items-center p-4 border rounded-lg">
+              <Database className="h-8 w-8 mb-2 text-blue-500" />
+              <span className="font-medium">MySQL</span>
+              <span className="text-xs text-muted-foreground">关系型数据库</span>
+            </div>
+            <div className="flex flex-col items-center p-4 border rounded-lg">
+              <Database className="h-8 w-8 mb-2 text-blue-500" />
+              <span className="font-medium">PostgreSQL</span>
+              <span className="text-xs text-muted-foreground">关系型数据库</span>
+            </div>
+            <div className="flex flex-col items-center p-4 border rounded-lg">
+              <Database className="h-8 w-8 mb-2 text-green-500" />
+              <span className="font-medium">MongoDB</span>
+              <span className="text-xs text-muted-foreground">文档型数据库</span>
+            </div>
+            <div className="flex flex-col items-center p-4 border rounded-lg">
+              <Database className="h-8 w-8 mb-2 text-yellow-500" />
+              <span className="font-medium">ClickHouse</span>
+              <span className="text-xs text-muted-foreground">列式数据库</span>
+            </div>
+            <div className="flex flex-col items-center p-4 border rounded-lg">
+              <Database className="h-8 w-8 mb-2 text-red-500" />
+              <span className="font-medium">Oracle</span>
+              <span className="text-xs text-muted-foreground">关系型数据库</span>
+            </div>
+            <div className="flex flex-col items-center p-4 border rounded-lg">
+              <Database className="h-8 w-8 mb-2 text-purple-500" />
+              <span className="font-medium">SQL Server</span>
+              <span className="text-xs text-muted-foreground">关系型数据库</span>
+            </div>
+            <div className="flex flex-col items-center p-4 border rounded-lg">
+              <Server className="h-8 w-8 mb-2 text-gray-500" />
+              <span className="font-medium">Redis</span>
+              <span className="text-xs text-muted-foreground">键值存储</span>
+            </div>
+            <div className="flex flex-col items-center p-4 border rounded-lg">
+              <FileText className="h-8 w-8 mb-2 text-gray-500" />
+              <span className="font-medium">CSV/Excel</span>
+              <span className="text-xs text-muted-foreground">文件导入</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+// API管理标签页
+function ApiManagementTab() {
+  // 模拟API接口数据
+  const apiEndpoints = [
+    {
+      id: "1",
+      name: "用户数据API",
+      endpoint: "/api/users",
+      method: "GET",
+      category: "用户画像",
+      status: "active",
+      calls: 12567,
+      lastCalled: "2023-07-20 16:45",
+    },
+    {
+      id: "2",
+      name: "用户标签API",
+      endpoint: "/api/users/tags",
+      method: "GET",
+      category: "用户画像",
+      status: "active",
+      calls: 8945,
+      lastCalled: "2023-07-20 15:30",
+    },
+    {
+      id: "3",
+      name: "流量池数据API",
+      endpoint: "/api/traffic-pools",
+      method: "GET",
+      category: "流量池",
+      status: "active",
+      calls: 5678,
+      lastCalled: "2023-07-20 14:20",
+    },
+    {
+      id: "4",
+      name: "AI分析API",
+      endpoint: "/api/ai/analyze",
+      method: "POST",
+      category: "AI分析",
+      status: "active",
+      calls: 3456,
+      lastCalled: "2023-07-20 13:15",
+    },
+    {
+      id: "5",
+      name: "数据同步API",
+      endpoint: "/api/sync",
+      method: "POST",
+      category: "数据集成",
+      status: "maintenance",
+      calls: 2345,
+      lastCalled: "2023-07-19 10:30",
+    },
+  ]
+
+  // 模拟API密钥数据
+  const apiKeys = [
+    {
+      id: "1",
+      name: "Web应用",
+      key: "sk_web_*************",
+      created: "2023-05-15",
+      lastUsed: "2023-07-20",
+      status: "active",
+    },
+    {
+      id: "2",
+      name: "移动应用",
+      key: "sk_mobile_*************",
+      created: "2023-06-10",
+      lastUsed: "2023-07-19",
+      status: "active",
+    },
+    {
+      id: "3",
+      name: "第三方集成",
+      key: "sk_partner_*************",
+      created: "2023-04-20",
+      lastUsed: "2023-07-18",
+      status: "active",
+    },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-bold">API接口管理</h2>
+        <Button>
+          <Plus className="mr-2 h-4 w-4" />
+          创建新API
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>API接口列表</CardTitle>
+          <CardDescription>所有可用的API接口</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>API名称</TableHead>
+                <TableHead>接口地址</TableHead>
+                <TableHead>方法</TableHead>
+                <TableHead>分类</TableHead>
+                <TableHead>状态</TableHead>
+                <TableHead>调用次数</TableHead>
+                <TableHead>最后调用</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {apiEndpoints.map((api) => (
+                <TableRow key={api.id}>
+                  <TableCell className="font-medium">{api.name}</TableCell>
+                  <TableCell>
+                    <code className="bg-muted px-1 py-0.5 rounded text-sm">{api.endpoint}</code>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      className={
+                        api.method === "GET"
+                          ? "bg-blue-100 text-blue-800"
+                          : api.method === "POST"
+                            ? "bg-green-100 text-green-800"
+                            : api.method === "PUT"
+                              ? "bg-yellow-100 text-yellow-800"
+                              : "bg-red-100 text-red-800"
+                      }
+                    >
+                      {api.method}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>{api.category}</TableCell>
+                  <TableCell>
+                    <Badge
+                      className={
+                        api.status === "active" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"
+                      }
+                    >
+                      {api.status === "active" ? "正常" : "维护中"}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>{api.calls.toLocaleString()}</TableCell>
+                  <TableCell>{api.lastCalled}</TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button variant="outline" size="sm">
+                        文档
+                      </Button>
+                      <Button size="sm">测试</Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>API密钥管理</CardTitle>
+          <CardDescription>管理API访问密钥</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>应用名称</TableHead>
+                <TableHead>密钥</TableHead>
+                <TableHead>创建时间</TableHead>
+                <TableHead>最后使用</TableHead>
+                <TableHead>状态</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {apiKeys.map((key) => (
+                <TableRow key={key.id}>
+                  <TableCell className="font-medium">{key.name}</TableCell>
+                  <TableCell>
+                    <code className="bg-muted px-1 py-0.5 rounded text-sm">{key.key}</code>
+                  </TableCell>
+                  <TableCell>{key.created}</TableCell>
+                  <TableCell>{key.lastUsed}</TableCell>
+                  <TableCell>
+                    <Badge className="bg-green-100 text-green-800">{key.status === "active" ? "有效" : "已禁用"}</Badge>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button variant="outline" size="sm">
+                        重置
+                      </Button>
+                      <Button variant="outline" size="sm" className="text-red-500">
+                        撤销
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>API使用统计</CardTitle>
+          <CardDescription>API调用量和性能统计</CardDescription>
+        </CardHeader>
+        <CardContent className="h-80 flex items-center justify-center">
+          <div className="text-center text-muted-foreground">
+            <p>API调用统计图表</p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+// 添加数据源对话框
+function AddDataSourceDialog({ isOpen, setIsOpen }: { isOpen: boolean; setIsOpen: (open: boolean) => void }) {
+  const [dbType, setDbType] = useState("mysql")
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <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="db-type" className="text-right">
+              数据库类型
+            </Label>
+            <Select value={dbType} onValueChange={setDbType} className="col-span-3">
+              <SelectTrigger id="db-type">
+                <SelectValue placeholder="选择数据库类型" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="mysql">MySQL</SelectItem>
+                <SelectItem value="postgresql">PostgreSQL</SelectItem>
+                <SelectItem value="mongodb">MongoDB</SelectItem>
+                <SelectItem value="clickhouse">ClickHouse</SelectItem>
+                <SelectItem value="oracle">Oracle</SelectItem>
+                <SelectItem value="sqlserver">SQL Server</SelectItem>
+                <SelectItem value="redis">Redis</SelectItem>
+                <SelectItem value="file">CSV/Excel文件</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="name" className="text-right">
+              数据源名称
+            </Label>
+            <Input id="name" placeholder="给数据源起个名字" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="host" className="text-right">
+              主机地址
+            </Label>
+            <Input id="host" placeholder="例如: db.example.com" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="port" className="text-right">
+              端口
+            </Label>
+            <Input
+              id="port"
+              placeholder={dbType === "mysql" ? "3306" : dbType === "postgresql" ? "5432" : "27017"}
+              className="col-span-3"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="database" className="text-right">
+              数据库名
+            </Label>
+            <Input id="database" placeholder="数据库名称" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="username" className="text-right">
+              用户名
+            </Label>
+            <Input id="username" placeholder="数据库用户名" className="col-span-3" />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="password" className="text-right">
+              密码
+            </Label>
+            <Input id="password" type="password" placeholder="数据库密码" className="col-span-3" />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setIsOpen(false)}>
+            取消
+          </Button>
+          <Button type="submit">测试连接</Button>
+          <Button type="submit">保存</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/app/data-platform/loading.tsx b/app/data-platform/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/data-platform/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/data-platform/page.tsx b/app/data-platform/page.tsx
new file mode 100644
index 0000000..701385f
--- /dev/null
+++ b/app/data-platform/page.tsx
@@ -0,0 +1,433 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Database, Server, Link, RefreshCw, Download, Mail, FileText } from "lucide-react"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Badge } from "@/components/ui/badge"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import { DataSourceList } from "@/components/data-integration/data-source-list"
+import { DataFieldMapping } from "@/components/data-integration/data-field-mapping"
+import { DataCollectionSettings } from "@/components/data-integration/data-collection-settings"
+import { ApiDocumentation } from "@/components/data-integration/api-documentation"
+
+interface DataSource {
+  id: string
+  name: string
+  type: "mysql" | "postgresql" | "mongodb" | "oracle" | "sqlserver" | "api" | "file"
+  status: "connected" | "disconnected" | "error"
+  lastSync: string
+  tables: number
+  records: number
+}
+
+export default function DataPlatformPage() {
+  const [activeTab, setActiveTab] = useState("data-integration")
+  const [selectedUserSegment, setSelectedUserSegment] = useState("")
+  const [analysisPrompt, setAnalysisPrompt] = useState("")
+  const [selectedEmail, setSelectedEmail] = useState("")
+  const [isAddingDataSource, setIsAddingDataSource] = useState(false)
+
+  // 数据源列表
+  const dataSources: DataSource[] = [
+    {
+      id: "1",
+      name: "用户数据库",
+      type: "mysql",
+      status: "connected",
+      lastSync: "2023-07-21 15:30",
+      tables: 12,
+      records: 1250000,
+    },
+    {
+      id: "2",
+      name: "交易系统",
+      type: "postgresql",
+      status: "connected",
+      lastSync: "2023-07-21 14:45",
+      tables: 8,
+      records: 3450000,
+    },
+    {
+      id: "3",
+      name: "用户行为数据",
+      type: "mongodb",
+      status: "connected",
+      lastSync: "2023-07-21 13:20",
+      tables: 5,
+      records: 7800000,
+    },
+    {
+      id: "4",
+      name: "CRM系统",
+      type: "oracle",
+      status: "error",
+      lastSync: "2023-07-20 09:15",
+      tables: 15,
+      records: 2100000,
+    },
+  ]
+
+  // 用户画像分群列表
+  const userSegments = [
+    { id: "high-value", name: "高价值用户", count: 12500 },
+    { id: "new-users", name: "新注册用户", count: 45600 },
+    { id: "inactive", name: "非活跃用户", count: 28900 },
+    { id: "potential", name: "潜在高转化用户", count: 18700 },
+    { id: "loyal", name: "忠诚用户", count: 9800 },
+    { id: "risk", name: "流失风险用户", count: 15400 },
+  ]
+
+  // 邮箱列表
+  const emailList = [
+    { id: "1", email: "marketing@company.com", name: "营销团队" },
+    { id: "2", email: "sales@company.com", name: "销售团队" },
+    { id: "3", email: "product@company.com", name: "产品团队" },
+    { id: "4", email: "executive@company.com", name: "管理层" },
+  ]
+
+  const getDataSourceIcon = (type: DataSource["type"]) => {
+    switch (type) {
+      case "mysql":
+      case "postgresql":
+      case "oracle":
+      case "sqlserver":
+        return <Database className="h-8 w-8 text-blue-500" />
+      case "mongodb":
+        return <Server className="h-8 w-8 text-green-500" />
+      case "api":
+      case "file":
+        return <Link className="h-8 w-8 text-purple-500" />
+    }
+  }
+
+  const getDataSourceTypeName = (type: DataSource["type"]) => {
+    switch (type) {
+      case "mysql":
+        return "MySQL"
+      case "postgresql":
+        return "PostgreSQL"
+      case "mongodb":
+        return "MongoDB"
+      case "oracle":
+        return "Oracle"
+      case "sqlserver":
+        return "SQL Server"
+      case "api":
+        return "API"
+      case "file":
+        return "文件"
+    }
+  }
+
+  const getStatusBadge = (status: DataSource["status"]) => {
+    switch (status) {
+      case "connected":
+        return <Badge className="bg-green-100 text-green-800">已连接</Badge>
+      case "disconnected":
+        return <Badge className="bg-gray-100 text-gray-800">未连接</Badge>
+      case "error":
+        return <Badge className="bg-red-100 text-red-800">错误</Badge>
+    }
+  }
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold">数据中台</h1>
+          <p className="text-muted-foreground mt-1">数据集成、API管理与数据采集</p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" size="icon">
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            导出数据
+          </Button>
+        </div>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+        <TabsList className="grid grid-cols-4 w-full max-w-2xl">
+          <TabsTrigger value="data-integration">数据集成</TabsTrigger>
+          <TabsTrigger value="data-collection">数据采集</TabsTrigger>
+          <TabsTrigger value="data-mapping">数据映射</TabsTrigger>
+          <TabsTrigger value="api-management">API管理</TabsTrigger>
+        </TabsList>
+
+        {/* 数据集成标签页 */}
+        <TabsContent value="data-integration" className="space-y-4">
+          <Card className="border shadow-md">
+            <CardHeader>
+              <CardTitle>数据源管理</CardTitle>
+              <CardDescription>管理和查看已连接的数据源</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <DataSourceList />
+            </CardContent>
+          </Card>
+
+          <Card className="border shadow-md">
+            <CardHeader>
+              <CardTitle>数据整合概览</CardTitle>
+              <CardDescription>基于ID、手机号、身份证号和IMEI设备号的数据整合</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                  <Card className="border shadow-sm">
+                    <CardContent className="p-4 flex flex-col items-center justify-center">
+                      <div className="bg-blue-100 p-3 rounded-full mb-2">
+                        <Database className="h-6 w-6 text-blue-600" />
+                      </div>
+                      <h3 className="font-medium text-center">用户ID</h3>
+                      <p className="text-sm text-muted-foreground text-center">1,245,678 条记录</p>
+                    </CardContent>
+                  </Card>
+                  <Card className="border shadow-sm">
+                    <CardContent className="p-4 flex flex-col items-center justify-center">
+                      <div className="bg-green-100 p-3 rounded-full mb-2">
+                        <FileText className="h-6 w-6 text-green-600" />
+                      </div>
+                      <h3 className="font-medium text-center">手机号</h3>
+                      <p className="text-sm text-muted-foreground text-center">987,543 条记录</p>
+                    </CardContent>
+                  </Card>
+                  <Card className="border shadow-sm">
+                    <CardContent className="p-4 flex flex-col items-center justify-center">
+                      <div className="bg-purple-100 p-3 rounded-full mb-2">
+                        <FileText className="h-6 w-6 text-purple-600" />
+                      </div>
+                      <h3 className="font-medium text-center">身份证号</h3>
+                      <p className="text-sm text-muted-foreground text-center">654,321 条记录</p>
+                    </CardContent>
+                  </Card>
+                  <Card className="border shadow-sm">
+                    <CardContent className="p-4 flex flex-col items-center justify-center">
+                      <div className="bg-orange-100 p-3 rounded-full mb-2">
+                        <Server className="h-6 w-6 text-orange-600" />
+                      </div>
+                      <h3 className="font-medium text-center">IMEI设备号</h3>
+                      <p className="text-sm text-muted-foreground text-center">789,456 条记录</p>
+                    </CardContent>
+                  </Card>
+                </div>
+
+                <div className="flex justify-between items-center">
+                  <div>
+                    <h3 className="font-medium">数据整合状态</h3>
+                    <p className="text-sm text-muted-foreground">最后更新: 2023-07-21 16:30</p>
+                  </div>
+                  <Button>
+                    <RefreshCw className="mr-2 h-4 w-4" />
+                    刷新数据
+                  </Button>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">用户数据整合率</span>
+                    <span className="text-green-600 font-medium">87%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-green-600 h-2.5 rounded-full" style={{ width: "87%" }}></div>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">数据质量评分</span>
+                    <span className="text-blue-600 font-medium">92/100</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-blue-600 h-2.5 rounded-full" style={{ width: "92%" }}></div>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">数据重复率</span>
+                    <span className="text-yellow-600 font-medium">5.2%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-yellow-600 h-2.5 rounded-full" style={{ width: "5.2%" }}></div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        {/* 数据采集标签页 */}
+        <TabsContent value="data-collection" className="space-y-4">
+          <DataCollectionSettings />
+        </TabsContent>
+
+        {/* 数据映射标签页 */}
+        <TabsContent value="data-mapping" className="space-y-4">
+          <DataFieldMapping />
+        </TabsContent>
+
+        {/* API管理标签页 */}
+        <TabsContent value="api-management" className="space-y-4">
+          <ApiDocumentation />
+        </TabsContent>
+      </Tabs>
+
+      {/* 添加数据源对话框 */}
+      <Dialog open={isAddingDataSource} onOpenChange={setIsAddingDataSource}>
+        <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="datasource-type" className="text-right">
+                数据源类型
+              </Label>
+              <Select>
+                <SelectTrigger 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="oracle">Oracle</SelectItem>
+                  <SelectItem value="sqlserver">SQL Server</SelectItem>
+                  <SelectItem value="api">API</SelectItem>
+                  <SelectItem value="file">文件</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="name" className="text-right">
+                数据源名称
+              </Label>
+              <Input id="name" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="host" className="text-right">
+                主机地址
+              </Label>
+              <Input id="host" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="port" className="text-right">
+                端口
+              </Label>
+              <Input id="port" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="username" className="text-right">
+                用户名
+              </Label>
+              <Input id="username" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="password" className="text-right">
+                密码
+              </Label>
+              <Input id="password" type="password" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="database" className="text-right">
+                数据库名
+              </Label>
+              <Input id="database" className="col-span-3" />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsAddingDataSource(false)}>
+              取消
+            </Button>
+            <Button onClick={() => setIsAddingDataSource(false)}>测试连接</Button>
+            <Button onClick={() => setIsAddingDataSource(false)}>保存</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* AI数据分析对话框 */}
+      <Dialog>
+        <DialogTrigger asChild>
+          <Button className="hidden">打开AI数据分析</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>AI数据分析</DialogTitle>
+            <DialogDescription>选择用户分群并输入分析需求</DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="space-y-2">
+              <Label>选择用户分群</Label>
+              <Select value={selectedUserSegment} onValueChange={setSelectedUserSegment}>
+                <SelectTrigger>
+                  <SelectValue placeholder="选择用户分群" />
+                </SelectTrigger>
+                <SelectContent>
+                  {userSegments.map((segment) => (
+                    <SelectItem key={segment.id} value={segment.id}>
+                      {segment.name} ({segment.count.toLocaleString()}人)
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label>分析需求</Label>
+              <Textarea
+                placeholder="例如：分析该用户群体的消费习惯和偏好"
+                value={analysisPrompt}
+                onChange={(e) => setAnalysisPrompt(e.target.value)}
+                rows={3}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>发送分析报告至</Label>
+              <Select value={selectedEmail} onValueChange={setSelectedEmail}>
+                <SelectTrigger>
+                  <SelectValue placeholder="选择接收邮箱" />
+                </SelectTrigger>
+                <SelectContent>
+                  {emailList.map((item) => (
+                    <SelectItem key={item.id} value={item.id}>
+                      {item.name} ({item.email})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Checkbox id="schedule" />
+              <Label htmlFor="schedule">定期发送分析报告</Label>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline">取消</Button>
+            <Button>
+              <Mail className="mr-2 h-4 w-4" />
+              生成分析并发送
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/database-structure/page.tsx b/app/database-structure/page.tsx
new file mode 100644
index 0000000..c5fe58f
--- /dev/null
+++ b/app/database-structure/page.tsx
@@ -0,0 +1,10 @@
+import { DatabaseStructureViewer } from "@/components/data-integration/database-structure-viewer"
+
+export default function DatabaseStructurePage() {
+  return (
+    <div className="container mx-auto py-6">
+      <h1 className="text-2xl font-bold mb-6">数据库结构查看器</h1>
+      <DatabaseStructureViewer />
+    </div>
+  )
+}
diff --git a/app/devices/[id]/page.tsx b/app/devices/[id]/page.tsx
new file mode 100644
index 0000000..491618c
--- /dev/null
+++ b/app/devices/[id]/page.tsx
@@ -0,0 +1,282 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useParams, useRouter } from "next/navigation"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { ChevronLeft, Smartphone, Battery, Wifi, MessageCircle, Users, Settings, History } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+interface WechatAccount {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  gender: "male" | "female"
+  status: "normal" | "abnormal"
+  addFriendStatus: "enabled" | "disabled"
+  friendCount: number
+  lastActive: string
+}
+
+interface Device {
+  id: string
+  imei: string
+  name: string
+  status: "online" | "offline"
+  battery: number
+  lastActive: string
+  historicalIds: string[]
+  wechatAccounts: WechatAccount[]
+  features: {
+    autoAddFriend: boolean
+    autoReply: boolean
+    contentSync: boolean
+    aiChat: boolean
+  }
+  history: {
+    time: string
+    action: string
+    operator: string
+  }[]
+}
+
+export default function DeviceDetailPage() {
+  const params = useParams()
+  const router = useRouter()
+  const [device, setDevice] = useState<Device | null>(null)
+  const [activeTab, setActiveTab] = useState("info")
+
+  useEffect(() => {
+    // 模拟API调用
+    const mockDevice: Device = {
+      id: params.id as string,
+      imei: "sd123123",
+      name: "设备 1",
+      status: "online",
+      battery: 85,
+      lastActive: "2024-02-09 15:30:45",
+      historicalIds: ["vx412321", "vfbadasd"],
+      wechatAccounts: [
+        {
+          id: "1",
+          avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-q2rVrFbfDdAbSnT3ZTNE7gfn3QCbvr.png",
+          nickname: "老张",
+          wechatId: "wxid_abc123",
+          gender: "male",
+          status: "normal",
+          addFriendStatus: "enabled",
+          friendCount: 523,
+          lastActive: "2024-02-09 15:20:33",
+        },
+        {
+          id: "2",
+          avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-q2rVrFbfDdAbSnT3ZTNE7gfn3QCbvr.png",
+          nickname: "老李",
+          wechatId: "wxid_xyz789",
+          gender: "male",
+          status: "abnormal",
+          addFriendStatus: "disabled",
+          friendCount: 245,
+          lastActive: "2024-02-09 14:15:22",
+        },
+      ],
+      features: {
+        autoAddFriend: true,
+        autoReply: true,
+        contentSync: false,
+        aiChat: true,
+      },
+      history: [
+        {
+          time: "2024-02-09 15:30:45",
+          action: "开启自动加好友",
+          operator: "系统",
+        },
+        {
+          time: "2024-02-09 14:20:33",
+          action: "添加微信号",
+          operator: "管理员",
+        },
+      ],
+    }
+    setDevice(mockDevice)
+  }, [params.id])
+
+  if (!device) {
+    return <div>加载中...</div>
+  }
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen">
+      <div className="max-w-[390px] mx-auto bg-white">
+        <header className="sticky top-0 z-10 bg-white border-b">
+          <div className="flex items-center justify-between p-4">
+            <div className="flex items-center space-x-3">
+              <Button variant="ghost" size="icon" onClick={() => router.back()}>
+                <ChevronLeft className="h-5 w-5" />
+              </Button>
+              <h1 className="text-lg font-medium">设备详情</h1>
+            </div>
+            <Button variant="ghost" size="icon">
+              <Settings className="h-5 w-5" />
+            </Button>
+          </div>
+        </header>
+
+        <div className="p-4 space-y-4">
+          <Card className="p-4">
+            <div className="flex items-center space-x-4">
+              <div className="p-3 bg-blue-50 rounded-lg">
+                <Smartphone className="h-6 w-6 text-blue-600" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between">
+                  <h2 className="font-medium truncate">{device.name}</h2>
+                  <Badge variant={device.status === "online" ? "success" : "secondary"}>
+                    {device.status === "online" ? "在线" : "离线"}
+                  </Badge>
+                </div>
+                <div className="text-sm text-gray-500 mt-1">IMEI: {device.imei}</div>
+                <div className="text-sm text-gray-500">历史ID: {device.historicalIds.join(", ")}</div>
+              </div>
+            </div>
+            <div className="mt-4 grid grid-cols-2 gap-4">
+              <div className="flex items-center space-x-2">
+                <Battery className={`w-4 h-4 ${device.battery < 20 ? "text-red-500" : "text-green-500"}`} />
+                <span className="text-sm">{device.battery}%</span>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Wifi className="w-4 h-4 text-blue-500" />
+                <span className="text-sm">{device.status === "online" ? "已连接" : "未连接"}</span>
+              </div>
+            </div>
+            <div className="mt-2 text-sm text-gray-500">最后活跃：{device.lastActive}</div>
+          </Card>
+
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <TabsList className="grid w-full grid-cols-3">
+              <TabsTrigger value="info">基本信息</TabsTrigger>
+              <TabsTrigger value="accounts">关联账号</TabsTrigger>
+              <TabsTrigger value="history">操作记录</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="info">
+              <Card className="p-4 space-y-4">
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label>自动加好友</Label>
+                      <div className="text-sm text-gray-500">自动通过好友验证</div>
+                    </div>
+                    <Switch checked={device.features.autoAddFriend} />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label>自动回复</Label>
+                      <div className="text-sm text-gray-500">自动回复好友消息</div>
+                    </div>
+                    <Switch checked={device.features.autoReply} />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label>朋友圈同步</Label>
+                      <div className="text-sm text-gray-500">自动同步朋友圈内容</div>
+                    </div>
+                    <Switch checked={device.features.contentSync} />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label>AI会话</Label>
+                      <div className="text-sm text-gray-500">启用AI智能对话</div>
+                    </div>
+                    <Switch checked={device.features.aiChat} />
+                  </div>
+                </div>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="accounts">
+              <Card className="p-4">
+                <ScrollArea className="h-[calc(100vh-300px)]">
+                  <div className="space-y-4">
+                    {device.wechatAccounts.map((account) => (
+                      <div key={account.id} className="flex items-start space-x-3 p-3 bg-gray-50 rounded-lg">
+                        <img
+                          src={account.avatar || "/placeholder.svg"}
+                          alt={account.nickname}
+                          className="w-12 h-12 rounded-full"
+                        />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center justify-between">
+                            <div className="font-medium truncate">{account.nickname}</div>
+                            <Badge variant={account.status === "normal" ? "success" : "destructive"}>
+                              {account.status === "normal" ? "正常" : "异常"}
+                            </Badge>
+                          </div>
+                          <div className="text-sm text-gray-500 mt-1">微信号: {account.wechatId}</div>
+                          <div className="text-sm text-gray-500">性别: {account.gender === "male" ? "男" : "女"}</div>
+                          <div className="flex items-center justify-between mt-2">
+                            <span className="text-sm text-gray-500">好友数: {account.friendCount}</span>
+                            <Badge variant={account.addFriendStatus === "enabled" ? "outline" : "secondary"}>
+                              {account.addFriendStatus === "enabled" ? "可加友" : "已停用"}
+                            </Badge>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="history">
+              <Card className="p-4">
+                <ScrollArea className="h-[calc(100vh-300px)]">
+                  <div className="space-y-4">
+                    {device.history.map((record, index) => (
+                      <div key={index} className="flex items-start space-x-3">
+                        <div className="p-2 bg-blue-50 rounded-full">
+                          <History className="w-4 h-4 text-blue-600" />
+                        </div>
+                        <div className="flex-1">
+                          <div className="text-sm font-medium">{record.action}</div>
+                          <div className="text-xs text-gray-500 mt-1">
+                            操作人: {record.operator} · {record.time}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              </Card>
+            </TabsContent>
+          </Tabs>
+
+          <div className="grid grid-cols-2 gap-4">
+            <Card className="p-4">
+              <div className="flex items-center space-x-2 text-gray-500">
+                <Users className="w-4 h-4" />
+                <span className="text-sm">好友总数</span>
+              </div>
+              <div className="text-2xl font-bold text-blue-600 mt-2">
+                {device?.wechatAccounts?.reduce((sum, account) => sum + account.friendCount, 0)}
+              </div>
+            </Card>
+            <Card className="p-4">
+              <div className="flex items-center space-x-2 text-gray-500">
+                <MessageCircle className="w-4 h-4" />
+                <span className="text-sm">消息数量</span>
+              </div>
+              <div className="text-2xl font-bold text-blue-600 mt-2">5,678</div>
+            </Card>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/devices/loading.tsx b/app/devices/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/devices/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/devices/page.tsx b/app/devices/page.tsx
new file mode 100644
index 0000000..10615d1
--- /dev/null
+++ b/app/devices/page.tsx
@@ -0,0 +1,421 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { PieChart, BarChart, LineChart } from "@/components/charts"
+import { Badge } from "@/components/ui/badge"
+import { Activity, Filter, Plus, RefreshCw, Search, Smartphone, Laptop, Monitor, Wifi, WifiOff } from "lucide-react"
+
+export default function DevicesPage() {
+  const [deviceType, setDeviceType] = useState("all")
+  const [searchQuery, setSearchQuery] = useState("")
+
+  return (
+    <div className="container mx-auto p-4 space-y-6">
+      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold">设备管理</h1>
+          <p className="text-muted-foreground mt-1">管理和分析用户设备数据</p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            添加设备
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card className="bg-white shadow-sm">
+          <CardContent className="p-4 flex items-center">
+            <div className="bg-blue-100 p-2 rounded-full mr-3">
+              <Smartphone className="h-5 w-5 text-blue-600" />
+            </div>
+            <div>
+              <div className="text-sm font-medium text-gray-600">总设备数</div>
+              <div className="text-xl font-bold">156,789</div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-white shadow-sm">
+          <CardContent className="p-4 flex items-center">
+            <div className="bg-green-100 p-2 rounded-full mr-3">
+              <Wifi className="h-5 w-5 text-green-600" />
+            </div>
+            <div>
+              <div className="text-sm font-medium text-gray-600">在线设备</div>
+              <div className="text-xl font-bold">132,456</div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-white shadow-sm">
+          <CardContent className="p-4 flex items-center">
+            <div className="bg-red-100 p-2 rounded-full mr-3">
+              <WifiOff className="h-5 w-5 text-red-600" />
+            </div>
+            <div>
+              <div className="text-sm font-medium text-gray-600">离线设备</div>
+              <div className="text-xl font-bold">24,333</div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-white shadow-sm">
+          <CardContent className="p-4 flex items-center">
+            <div className="bg-purple-100 p-2 rounded-full mr-3">
+              <Activity className="h-5 w-5 text-purple-600" />
+            </div>
+            <div>
+              <div className="text-sm font-medium text-gray-600">活跃率</div>
+              <div className="text-xl font-bold">84.5%</div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card className="border-none shadow-md overflow-hidden">
+        <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
+          <div className="flex justify-between items-center">
+            <div>
+              <CardTitle>设备分析</CardTitle>
+              <CardDescription>设备类型、活跃度和使用情况分析</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="p-4">
+          <Tabs defaultValue="overview" className="space-y-4">
+            <TabsList className="grid grid-cols-3 w-full">
+              <TabsTrigger value="overview">设备概览</TabsTrigger>
+              <TabsTrigger value="activity">活跃分析</TabsTrigger>
+              <TabsTrigger value="distribution">分布分析</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="overview" className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">设备类型分布</h3>
+                  <PieChart
+                    data={{
+                      labels: ["iOS设备", "Android设备", "Windows设备", "Mac设备", "其他设备"],
+                      datasets: [
+                        {
+                          data: [45, 40, 8, 5, 2],
+                          backgroundColor: [
+                            "rgb(59, 130, 246)",
+                            "rgb(16, 185, 129)",
+                            "rgb(249, 115, 22)",
+                            "rgb(139, 92, 246)",
+                            "rgb(156, 163, 175)",
+                          ],
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">设备型号分布 Top 10</h3>
+                  <BarChart
+                    data={{
+                      labels: [
+                        "iPhone 13",
+                        "iPhone 12",
+                        "Samsung S21",
+                        "iPhone 14",
+                        "Xiaomi 12",
+                        "Huawei P40",
+                        "OPPO Find X",
+                        "Vivo X60",
+                        "OnePlus 9",
+                        "iPhone SE",
+                      ],
+                      datasets: [
+                        {
+                          label: "设备数量",
+                          data: [25000, 22000, 18000, 15000, 12000, 10000, 8000, 7000, 6000, 5000],
+                          backgroundColor: "rgba(59, 130, 246, 0.8)",
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="activity" className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">设备活跃度趋势</h3>
+                  <LineChart
+                    data={{
+                      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+                      datasets: [
+                        {
+                          label: "iOS设备",
+                          data: [75, 78, 80, 82, 85, 87, 90],
+                          borderColor: "rgb(59, 130, 246)",
+                          backgroundColor: "rgba(59, 130, 246, 0.1)",
+                        },
+                        {
+                          label: "Android设备",
+                          data: [70, 72, 75, 78, 80, 82, 85],
+                          borderColor: "rgb(16, 185, 129)",
+                          backgroundColor: "rgba(16, 185, 129, 0.1)",
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">设备使用时长分布</h3>
+                  <PieChart
+                    data={{
+                      labels: ["<30分钟/天", "30-60分钟/天", "1-2小时/天", "2-4小时/天", ">4小时/天"],
+                      datasets: [
+                        {
+                          data: [15, 25, 30, 20, 10],
+                          backgroundColor: [
+                            "rgb(156, 163, 175)",
+                            "rgb(249, 115, 22)",
+                            "rgb(16, 185, 129)",
+                            "rgb(59, 130, 246)",
+                            "rgb(139, 92, 246)",
+                          ],
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="distribution" className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">地区分布 Top 10</h3>
+                  <BarChart
+                    data={{
+                      labels: ["北京", "上海", "广州", "深圳", "杭州", "成都", "武汉", "南京", "重庆", "西安"],
+                      datasets: [
+                        {
+                          label: "设备数量",
+                          data: [18500, 17200, 15800, 14500, 12000, 10500, 9800, 8500, 7800, 7200],
+                          backgroundColor: "rgba(59, 130, 246, 0.8)",
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">系统版本分布</h3>
+                  <PieChart
+                    data={{
+                      labels: ["iOS 16", "iOS 15", "iOS 14", "Android 13", "Android 12", "Android 11", "其他"],
+                      datasets: [
+                        {
+                          data: [30, 25, 10, 15, 10, 5, 5],
+                          backgroundColor: [
+                            "rgb(59, 130, 246)",
+                            "rgb(96, 165, 250)",
+                            "rgb(147, 197, 253)",
+                            "rgb(16, 185, 129)",
+                            "rgb(52, 211, 153)",
+                            "rgb(110, 231, 183)",
+                            "rgb(156, 163, 175)",
+                          ],
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      <Card className="border-none shadow-md overflow-hidden">
+        <CardHeader className="bg-white border-b">
+          <div className="flex justify-between items-center">
+            <div>
+              <CardTitle>设备列表</CardTitle>
+              <CardDescription>查看和管理所有设备</CardDescription>
+            </div>
+            <div className="flex items-center space-x-2">
+              <div className="relative">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  type="search"
+                  placeholder="搜索设备..."
+                  className="pl-8 w-[200px] md:w-[300px]"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+              <Select value={deviceType} onValueChange={setDeviceType}>
+                <SelectTrigger className="w-[150px]">
+                  <SelectValue placeholder="设备类型" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部类型</SelectItem>
+                  <SelectItem value="ios">iOS设备</SelectItem>
+                  <SelectItem value="android">Android设备</SelectItem>
+                  <SelectItem value="windows">Windows设备</SelectItem>
+                  <SelectItem value="mac">Mac设备</SelectItem>
+                </SelectContent>
+              </Select>
+              <Button variant="outline" size="icon">
+                <Filter className="h-4 w-4" />
+              </Button>
+              <Button variant="outline" size="icon">
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-50">
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">设备ID</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">设备名称</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">设备类型</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">系统版本</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">状态</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">最后活跃时间</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">操作</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y">
+                {[
+                  {
+                    id: "DEV-001",
+                    name: "iPhone 13 Pro",
+                    type: "iOS",
+                    version: "iOS 16.2",
+                    status: "在线",
+                    lastActive: "2023-07-15 14:30",
+                  },
+                  {
+                    id: "DEV-002",
+                    name: "Samsung Galaxy S21",
+                    type: "Android",
+                    version: "Android 13",
+                    status: "在线",
+                    lastActive: "2023-07-15 13:45",
+                  },
+                  {
+                    id: "DEV-003",
+                    name: "MacBook Pro",
+                    type: "Mac",
+                    version: "macOS 13.1",
+                    status: "在线",
+                    lastActive: "2023-07-15 12:20",
+                  },
+                  {
+                    id: "DEV-004",
+                    name: "Xiaomi 12",
+                    type: "Android",
+                    version: "Android 12",
+                    status: "离线",
+                    lastActive: "2023-07-14 18:10",
+                  },
+                  {
+                    id: "DEV-005",
+                    name: "iPad Pro",
+                    type: "iOS",
+                    version: "iOS 16.1",
+                    status: "在线",
+                    lastActive: "2023-07-15 10:05",
+                  },
+                  {
+                    id: "DEV-006",
+                    name: "Huawei P40",
+                    type: "Android",
+                    version: "Android 11",
+                    status: "离线",
+                    lastActive: "2023-07-13 09:30",
+                  },
+                  {
+                    id: "DEV-007",
+                    name: "Windows Laptop",
+                    type: "Windows",
+                    version: "Windows 11",
+                    status: "在线",
+                    lastActive: "2023-07-15 11:45",
+                  },
+                  {
+                    id: "DEV-008",
+                    name: "OPPO Find X5",
+                    type: "Android",
+                    version: "Android 13",
+                    status: "在线",
+                    lastActive: "2023-07-15 09:20",
+                  },
+                  {
+                    id: "DEV-009",
+                    name: "iPhone 12",
+                    type: "iOS",
+                    version: "iOS 16.2",
+                    status: "离线",
+                    lastActive: "2023-07-14 22:15",
+                  },
+                  {
+                    id: "DEV-010",
+                    name: "Vivo X80",
+                    type: "Android",
+                    version: "Android 12",
+                    status: "在线",
+                    lastActive: "2023-07-15 08:50",
+                  },
+                ].map((device) => (
+                  <tr key={device.id} className="hover:bg-gray-50">
+                    <td className="px-4 py-3 text-sm">{device.id}</td>
+                    <td className="px-4 py-3 text-sm font-medium">{device.name}</td>
+                    <td className="px-4 py-3 text-sm">
+                      <div className="flex items-center">
+                        {device.type === "iOS" && <Smartphone className="h-4 w-4 mr-1 text-blue-500" />}
+                        {device.type === "Android" && <Smartphone className="h-4 w-4 mr-1 text-green-500" />}
+                        {device.type === "Mac" && <Laptop className="h-4 w-4 mr-1 text-gray-500" />}
+                        {device.type === "Windows" && <Monitor className="h-4 w-4 mr-1 text-blue-400" />}
+                        {device.type}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3 text-sm">{device.version}</td>
+                    <td className="px-4 py-3 text-sm">
+                      <Badge
+                        variant="outline"
+                        className={`${
+                          device.status === "在线"
+                            ? "bg-green-50 text-green-600 border-green-200"
+                            : "bg-red-50 text-red-600 border-red-200"
+                        }`}
+                      >
+                        {device.status}
+                      </Badge>
+                    </td>
+                    <td className="px-4 py-3 text-sm">{device.lastActive}</td>
+                    <td className="px-4 py-3 text-sm">
+                      <Button variant="ghost" size="sm">
+                        详情
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/documentation/layout.tsx b/app/documentation/layout.tsx
new file mode 100644
index 0000000..b63855e
--- /dev/null
+++ b/app/documentation/layout.tsx
@@ -0,0 +1,9 @@
+import type React from "react"
+
+export default function DocumentationLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <div className="min-h-screen bg-gray-50">{children}</div>
+}
diff --git a/app/documentation/page.tsx b/app/documentation/page.tsx
new file mode 100644
index 0000000..3ec0272
--- /dev/null
+++ b/app/documentation/page.tsx
@@ -0,0 +1,1051 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Progress } from "@/components/ui/progress"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { toast } from "@/components/ui/use-toast"
+import {
+  Camera,
+  Download,
+  FileText,
+  ImageIcon,
+  Settings,
+  Eye,
+  Trash2,
+  RefreshCw,
+  Monitor,
+  Smartphone,
+  Tablet,
+  Globe,
+  CheckCircle,
+  XCircle,
+  Clock,
+  Zap,
+} from "lucide-react"
+import { enhancedScreenshotService, type ScreenshotOptions } from "@/lib/documentation/enhanced-screenshot-service"
+import { generateDocx } from "@/lib/documentation/docx-generator"
+import { pageRegistry } from "@/lib/documentation/page-registry"
+
+interface Screenshot {
+  id: string
+  name: string
+  url: string
+  dataUrl?: string
+  timestamp: Date
+  status: "pending" | "success" | "failed" | "capturing"
+  error?: string
+  method?: string
+  size?: { width: number; height: number }
+}
+
+interface DocumentSettings {
+  title: string
+  author: string
+  description: string
+  includeTimestamp: boolean
+  includePageUrls: boolean
+  imageFormat: "png" | "jpeg" | "webp"
+  imageQuality: number
+  pageSize: "A4" | "A3" | "Letter"
+  orientation: "portrait" | "landscape"
+}
+
+export default function DocumentationPage() {
+  const [screenshots, setScreenshots] = useState<Screenshot[]>([])
+  const [selectedPages, setSelectedPages] = useState<string[]>([])
+  const [isCapturing, setIsCapturing] = useState(false)
+  const [captureProgress, setCaptureProgress] = useState(0)
+  const [isGeneratingDoc, setIsGeneratingDoc] = useState(false)
+  const [previewMode, setPreviewMode] = useState<"desktop" | "tablet" | "mobile">("desktop")
+  const [currentPreviewUrl, setCurrentPreviewUrl] = useState("")
+  const [documentSettings, setDocumentSettings] = useState<DocumentSettings>({
+    title: "用户数据资产中台文档",
+    author: "系统管理员",
+    description: "自动生成的系统文档",
+    includeTimestamp: true,
+    includePageUrls: true,
+    imageFormat: "png",
+    imageQuality: 0.9,
+    pageSize: "A4",
+    orientation: "portrait",
+  })
+
+  const previewRef = useRef<HTMLIFrameElement>(null)
+  const [screenshotOptions, setScreenshotOptions] = useState<ScreenshotOptions>({
+    format: "png",
+    quality: 0.9,
+    scale: 1,
+    backgroundColor: "#ffffff",
+    timeout: 30000,
+  })
+
+  const pages = pageRegistry.getAllPages()
+
+  useEffect(() => {
+    // 初始化选中所有页面
+    setSelectedPages(pages.map((p) => p.path))
+  }, [])
+
+  const handlePageSelection = (pagePath: string, checked: boolean) => {
+    if (checked) {
+      setSelectedPages((prev) => [...prev, pagePath])
+    } else {
+      setSelectedPages((prev) => prev.filter((p) => p !== pagePath))
+    }
+  }
+
+  const selectAllPages = () => {
+    setSelectedPages(pages.map((p) => p.path))
+  }
+
+  const deselectAllPages = () => {
+    setSelectedPages([])
+  }
+
+  const getViewportSize = () => {
+    switch (previewMode) {
+      case "mobile":
+        return { width: 375, height: 667 }
+      case "tablet":
+        return { width: 768, height: 1024 }
+      default:
+        return { width: 1920, height: 1080 }
+    }
+  }
+
+  const captureScreenshot = async (page: (typeof pages)[0]): Promise<Screenshot> => {
+    const screenshot: Screenshot = {
+      id: `${page.path}-${Date.now()}`,
+      name: page.name,
+      url: page.path,
+      timestamp: new Date(),
+      status: "capturing",
+    }
+
+    try {
+      // 方法1: 尝试直接截图当前页面（如果是当前页面）
+      if (window.location.pathname === page.path) {
+        const result = await enhancedScreenshotService.captureViewport({
+          ...screenshotOptions,
+          ...getViewportSize(),
+        })
+
+        if (result.success && result.dataUrl) {
+          return {
+            ...screenshot,
+            status: "success",
+            dataUrl: result.dataUrl,
+            method: result.method,
+            size: getViewportSize(),
+          }
+        }
+      }
+
+      // 方法2: 使用新窗口截图
+      const newWindow = window.open(
+        page.path,
+        "_blank",
+        `width=${getViewportSize().width},height=${getViewportSize().height}`,
+      )
+
+      if (!newWindow) {
+        throw new Error("无法打开新窗口，请检查浏览器弹窗设置")
+      }
+
+      // 等待页面加载
+      await new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          newWindow.close()
+          reject(new Error("页面加载超时"))
+        }, 15000)
+
+        const checkLoaded = () => {
+          try {
+            if (newWindow.document && newWindow.document.readyState === "complete") {
+              clearTimeout(timeout)
+              resolve(void 0)
+            } else {
+              setTimeout(checkLoaded, 100)
+            }
+          } catch (e) {
+            // 跨域问题，等待一段时间后继续
+            setTimeout(checkLoaded, 100)
+          }
+        }
+
+        newWindow.addEventListener("load", () => {
+          clearTimeout(timeout)
+          setTimeout(resolve, 2000) // 额外等待2秒确保渲染完成
+        })
+
+        checkLoaded()
+      })
+
+      // 尝试截图新窗口
+      let result
+      try {
+        if (newWindow.document && newWindow.document.body) {
+          result = await enhancedScreenshotService.captureElement(newWindow.document.body, {
+            ...screenshotOptions,
+            ...getViewportSize(),
+          })
+        }
+      } catch (e) {
+        console.warn("新窗口截图失败，尝试其他方法:", e)
+      }
+
+      newWindow.close()
+
+      if (result?.success && result.dataUrl) {
+        return {
+          ...screenshot,
+          status: "success",
+          dataUrl: result.dataUrl,
+          method: result.method,
+          size: getViewportSize(),
+        }
+      }
+
+      // 方法3: 使用iframe截图（最后的备选方案）
+      const iframe = document.createElement("iframe")
+      iframe.style.position = "absolute"
+      iframe.style.left = "-9999px"
+      iframe.style.width = `${getViewportSize().width}px`
+      iframe.style.height = `${getViewportSize().height}px`
+      iframe.src = page.path
+
+      document.body.appendChild(iframe)
+
+      try {
+        await new Promise((resolve, reject) => {
+          const timeout = setTimeout(() => {
+            reject(new Error("iframe加载超时"))
+          }, 15000)
+
+          iframe.onload = () => {
+            clearTimeout(timeout)
+            setTimeout(resolve, 2000) // 等待渲染完成
+          }
+        })
+
+        // 尝试截图iframe内容
+        if (iframe.contentDocument && iframe.contentDocument.body) {
+          result = await enhancedScreenshotService.captureElement(iframe.contentDocument.body, {
+            ...screenshotOptions,
+            ...getViewportSize(),
+          })
+        }
+      } finally {
+        document.body.removeChild(iframe)
+      }
+
+      if (result?.success && result.dataUrl) {
+        return {
+          ...screenshot,
+          status: "success",
+          dataUrl: result.dataUrl,
+          method: result.method,
+          size: getViewportSize(),
+        }
+      }
+
+      throw new Error("所有截图方法都失败了")
+    } catch (error) {
+      console.error(`截图失败 ${page.name}:`, error)
+      return {
+        ...screenshot,
+        status: "failed",
+        error: error instanceof Error ? error.message : "未知错误",
+      }
+    }
+  }
+
+  const startCapture = async () => {
+    if (selectedPages.length === 0) {
+      toast({
+        title: "请选择页面",
+        description: "请至少选择一个页面进行截图",
+        variant: "destructive",
+      })
+      return
+    }
+
+    setIsCapturing(true)
+    setCaptureProgress(0)
+    setScreenshots([])
+
+    const selectedPageObjects = pages.filter((p) => selectedPages.includes(p.path))
+    const newScreenshots: Screenshot[] = []
+
+    for (let i = 0; i < selectedPageObjects.length; i++) {
+      const page = selectedPageObjects[i]
+
+      // 更新进度
+      setCaptureProgress((i / selectedPageObjects.length) * 100)
+
+      // 添加待处理的截图
+      const pendingScreenshot: Screenshot = {
+        id: `${page.path}-${Date.now()}`,
+        name: page.name,
+        url: page.path,
+        timestamp: new Date(),
+        status: "capturing",
+      }
+
+      newScreenshots.push(pendingScreenshot)
+      setScreenshots([...newScreenshots])
+
+      try {
+        const screenshot = await captureScreenshot(page)
+
+        // 更新截图状态
+        const updatedScreenshots = [...newScreenshots]
+        updatedScreenshots[i] = screenshot
+        setScreenshots(updatedScreenshots)
+        newScreenshots[i] = screenshot
+
+        if (screenshot.status === "success") {
+          toast({
+            title: "截图成功",
+            description: `${page.name} 截图完成`,
+          })
+        } else {
+          toast({
+            title: "截图失败",
+            description: `${page.name}: ${screenshot.error}`,
+            variant: "destructive",
+          })
+        }
+      } catch (error) {
+        console.error(`截图过程出错:`, error)
+        const failedScreenshot: Screenshot = {
+          ...pendingScreenshot,
+          status: "failed",
+          error: error instanceof Error ? error.message : "未知错误",
+        }
+
+        const updatedScreenshots = [...newScreenshots]
+        updatedScreenshots[i] = failedScreenshot
+        setScreenshots(updatedScreenshots)
+        newScreenshots[i] = failedScreenshot
+      }
+
+      // 添加延迟避免过快请求
+      if (i < selectedPageObjects.length - 1) {
+        await new Promise((resolve) => setTimeout(resolve, 1000))
+      }
+    }
+
+    setCaptureProgress(100)
+    setIsCapturing(false)
+
+    const successCount = newScreenshots.filter((s) => s.status === "success").length
+    const failedCount = newScreenshots.filter((s) => s.status === "failed").length
+
+    toast({
+      title: "截图完成",
+      description: `成功: ${successCount}, 失败: ${failedCount}`,
+      variant: successCount > 0 ? "default" : "destructive",
+    })
+  }
+
+  const retryFailedScreenshots = async () => {
+    const failedScreenshots = screenshots.filter((s) => s.status === "failed")
+
+    if (failedScreenshots.length === 0) {
+      toast({
+        title: "没有失败的截图",
+        description: "所有截图都已成功",
+      })
+      return
+    }
+
+    setIsCapturing(true)
+    setCaptureProgress(0)
+
+    for (let i = 0; i < failedScreenshots.length; i++) {
+      const failedScreenshot = failedScreenshots[i]
+      const page = pages.find((p) => p.path === failedScreenshot.url)
+
+      if (!page) continue
+
+      setCaptureProgress((i / failedScreenshots.length) * 100)
+
+      // 更新状态为重新截图中
+      setScreenshots((prev) =>
+        prev.map((s) => (s.id === failedScreenshot.id ? { ...s, status: "capturing" as const } : s)),
+      )
+
+      try {
+        const newScreenshot = await captureScreenshot(page)
+
+        setScreenshots((prev) => prev.map((s) => (s.id === failedScreenshot.id ? newScreenshot : s)))
+
+        if (newScreenshot.status === "success") {
+          toast({
+            title: "重试成功",
+            description: `${page.name} 截图完成`,
+          })
+        }
+      } catch (error) {
+        console.error(`重试截图失败:`, error)
+        setScreenshots((prev) =>
+          prev.map((s) =>
+            s.id === failedScreenshot.id
+              ? { ...s, status: "failed" as const, error: error instanceof Error ? error.message : "未知错误" }
+              : s,
+          ),
+        )
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+    }
+
+    setCaptureProgress(100)
+    setIsCapturing(false)
+  }
+
+  const generateDocument = async () => {
+    const successfulScreenshots = screenshots.filter((s) => s.status === "success" && s.dataUrl)
+
+    if (successfulScreenshots.length === 0) {
+      toast({
+        title: "没有可用的截图",
+        description: "请先成功截图至少一个页面",
+        variant: "destructive",
+      })
+      return
+    }
+
+    setIsGeneratingDoc(true)
+
+    try {
+      const docBuffer = await generateDocx(successfulScreenshots, documentSettings)
+
+      // 下载文档
+      const blob = new Blob([docBuffer], {
+        type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      })
+
+      const url = URL.createObjectURL(blob)
+      const a = document.createElement("a")
+      a.href = url
+      a.download = `${documentSettings.title.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, "_")}_${new Date().toISOString().split("T")[0]}.docx`
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      URL.revokeObjectURL(url)
+
+      toast({
+        title: "文档生成成功",
+        description: `已生成包含 ${successfulScreenshots.length} 个截图的文档`,
+      })
+    } catch (error) {
+      console.error("文档生成失败:", error)
+      toast({
+        title: "文档生成失败",
+        description: error instanceof Error ? error.message : "未知错误",
+        variant: "destructive",
+      })
+    } finally {
+      setIsGeneratingDoc(false)
+    }
+  }
+
+  const deleteScreenshot = (id: string) => {
+    setScreenshots((prev) => prev.filter((s) => s.id !== id))
+    toast({
+      title: "截图已删除",
+      description: "截图已从列表中移除",
+    })
+  }
+
+  const clearAllScreenshots = () => {
+    setScreenshots([])
+    toast({
+      title: "已清空所有截图",
+      description: "所有截图已从列表中移除",
+    })
+  }
+
+  const previewPage = (url: string) => {
+    setCurrentPreviewUrl(url)
+  }
+
+  const getStatusIcon = (status: Screenshot["status"]) => {
+    switch (status) {
+      case "success":
+        return <CheckCircle className="h-4 w-4 text-green-500" />
+      case "failed":
+        return <XCircle className="h-4 w-4 text-red-500" />
+      case "capturing":
+        return <Clock className="h-4 w-4 text-blue-500 animate-spin" />
+      default:
+        return <Clock className="h-4 w-4 text-gray-400" />
+    }
+  }
+
+  const getPreviewIcon = () => {
+    switch (previewMode) {
+      case "mobile":
+        return <Smartphone className="h-4 w-4" />
+      case "tablet":
+        return <Tablet className="h-4 w-4" />
+      default:
+        return <Monitor className="h-4 w-4" />
+    }
+  }
+
+  return (
+    <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-1">自动截图并生成系统文档</p>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Badge variant="outline" className="flex items-center space-x-1">
+            <Zap className="h-3 w-3" />
+            <span>增强版截图</span>
+          </Badge>
+        </div>
+      </div>
+
+      <Tabs defaultValue="capture" className="space-y-6">
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="capture">页面截图</TabsTrigger>
+          <TabsTrigger value="preview">预览页面</TabsTrigger>
+          <TabsTrigger value="screenshots">截图管理</TabsTrigger>
+          <TabsTrigger value="settings">文档设置</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="capture" className="space-y-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <div className="lg:col-span-2">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center space-x-2">
+                    <Globe className="h-5 w-5" />
+                    <span>选择页面</span>
+                  </CardTitle>
+                  <CardDescription>选择需要截图的页面，支持多选</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-2">
+                      <Button variant="outline" size="sm" onClick={selectAllPages}>
+                        全选
+                      </Button>
+                      <Button variant="outline" size="sm" onClick={deselectAllPages}>
+                        取消全选
+                      </Button>
+                    </div>
+                    <Badge variant="secondary">
+                      已选择 {selectedPages.length} / {pages.length} 个页面
+                    </Badge>
+                  </div>
+
+                  <ScrollArea className="h-[400px]">
+                    <div className="space-y-2">
+                      {pages.map((page) => (
+                        <div
+                          key={page.path}
+                          className="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50"
+                        >
+                          <Checkbox
+                            checked={selectedPages.includes(page.path)}
+                            onCheckedChange={(checked) => handlePageSelection(page.path, checked as boolean)}
+                          />
+                          <div className="flex-1 min-w-0">
+                            <div className="font-medium">{page.name}</div>
+                            <div className="text-sm text-muted-foreground truncate">{page.path}</div>
+                            {page.description && (
+                              <div className="text-xs text-muted-foreground mt-1">{page.description}</div>
+                            )}
+                          </div>
+                          <Button variant="ghost" size="sm" onClick={() => previewPage(page.path)}>
+                            <Eye className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  </ScrollArea>
+                </CardContent>
+              </Card>
+            </div>
+
+            <div className="space-y-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center space-x-2">
+                    <Settings className="h-5 w-5" />
+                    <span>截图设置</span>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">预览模式</label>
+                    <Select
+                      value={previewMode}
+                      onValueChange={(value: "desktop" | "tablet" | "mobile") => setPreviewMode(value)}
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="desktop">
+                          <div className="flex items-center space-x-2">
+                            <Monitor className="h-4 w-4" />
+                            <span>桌面 (1920x1080)</span>
+                          </div>
+                        </SelectItem>
+                        <SelectItem value="tablet">
+                          <div className="flex items-center space-x-2">
+                            <Tablet className="h-4 w-4" />
+                            <span>平板 (768x1024)</span>
+                          </div>
+                        </SelectItem>
+                        <SelectItem value="mobile">
+                          <div className="flex items-center space-x-2">
+                            <Smartphone className="h-4 w-4" />
+                            <span>手机 (375x667)</span>
+                          </div>
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">图片格式</label>
+                    <Select
+                      value={screenshotOptions.format}
+                      onValueChange={(value: "png" | "jpeg" | "webp") =>
+                        setScreenshotOptions((prev) => ({ ...prev, format: value }))
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="png">PNG (高质量)</SelectItem>
+                        <SelectItem value="jpeg">JPEG (小文件)</SelectItem>
+                        <SelectItem value="webp">WebP (平衡)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">
+                      图片质量: {Math.round((screenshotOptions.quality || 0.9) * 100)}%
+                    </label>
+                    <input
+                      type="range"
+                      min="0.1"
+                      max="1"
+                      step="0.1"
+                      value={screenshotOptions.quality || 0.9}
+                      onChange={(e) =>
+                        setScreenshotOptions((prev) => ({
+                          ...prev,
+                          quality: Number.parseFloat(e.target.value),
+                        }))
+                      }
+                      className="w-full"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">缩放比例: {screenshotOptions.scale || 1}x</label>
+                    <input
+                      type="range"
+                      min="0.5"
+                      max="3"
+                      step="0.1"
+                      value={screenshotOptions.scale || 1}
+                      onChange={(e) =>
+                        setScreenshotOptions((prev) => ({
+                          ...prev,
+                          scale: Number.parseFloat(e.target.value),
+                        }))
+                      }
+                      className="w-full"
+                    />
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center space-x-2">
+                    <Camera className="h-5 w-5" />
+                    <span>开始截图</span>
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  {isCapturing && (
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between text-sm">
+                        <span>截图进度</span>
+                        <span>{Math.round(captureProgress)}%</span>
+                      </div>
+                      <Progress value={captureProgress} />
+                    </div>
+                  )}
+
+                  <div className="space-y-2">
+                    <Button
+                      onClick={startCapture}
+                      disabled={isCapturing || selectedPages.length === 0}
+                      className="w-full"
+                    >
+                      {isCapturing ? (
+                        <>
+                          <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+                          截图中...
+                        </>
+                      ) : (
+                        <>
+                          <Camera className="mr-2 h-4 w-4" />
+                          开始截图
+                        </>
+                      )}
+                    </Button>
+
+                    {screenshots.some((s) => s.status === "failed") && (
+                      <Button
+                        variant="outline"
+                        onClick={retryFailedScreenshots}
+                        disabled={isCapturing}
+                        className="w-full bg-transparent"
+                      >
+                        <RefreshCw className="mr-2 h-4 w-4" />
+                        重试失败的截图
+                      </Button>
+                    )}
+                  </div>
+
+                  <div className="text-sm text-muted-foreground">
+                    <div className="flex items-center justify-between">
+                      <span>总页面数:</span>
+                      <span>{pages.length}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span>已选择:</span>
+                      <span>{selectedPages.length}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span>已截图:</span>
+                      <span>{screenshots.length}</span>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="preview" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center justify-between">
+                <div className="flex items-center space-x-2">
+                  {getPreviewIcon()}
+                  <span>页面预览</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Select
+                    value={previewMode}
+                    onValueChange={(value: "desktop" | "tablet" | "mobile") => setPreviewMode(value)}
+                  >
+                    <SelectTrigger className="w-[150px]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="desktop">桌面</SelectItem>
+                      <SelectItem value="tablet">平板</SelectItem>
+                      <SelectItem value="mobile">手机</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </CardTitle>
+              <CardDescription>预览页面在不同设备上的显示效果</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="border rounded-lg overflow-hidden bg-gray-100 p-4">
+                <div
+                  className="mx-auto bg-white shadow-lg rounded-lg overflow-hidden"
+                  style={{
+                    width: `${getViewportSize().width}px`,
+                    height: `${getViewportSize().height}px`,
+                    maxWidth: "100%",
+                    transform: "scale(0.5)",
+                    transformOrigin: "top center",
+                  }}
+                >
+                  {currentPreviewUrl ? (
+                    <iframe
+                      ref={previewRef}
+                      src={currentPreviewUrl}
+                      className="w-full h-full border-0"
+                      title="页面预览"
+                    />
+                  ) : (
+                    <div className="flex items-center justify-center h-full text-muted-foreground">
+                      <div className="text-center">
+                        <Globe className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                        <p>请从左侧选择一个页面进行预览</p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="screenshots" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center justify-between">
+                <div className="flex items-center space-x-2">
+                  <ImageIcon className="h-5 w-5" />
+                  <span>截图管理</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Badge variant="outline">{screenshots.filter((s) => s.status === "success").length} 成功</Badge>
+                  <Badge variant="destructive">{screenshots.filter((s) => s.status === "failed").length} 失败</Badge>
+                  {screenshots.length > 0 && (
+                    <Button variant="outline" size="sm" onClick={clearAllScreenshots}>
+                      <Trash2 className="h-4 w-4 mr-1" />
+                      清空
+                    </Button>
+                  )}
+                </div>
+              </CardTitle>
+              <CardDescription>管理已截取的页面截图</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {screenshots.length === 0 ? (
+                <div className="text-center py-12 text-muted-foreground">
+                  <ImageIcon className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <p>暂无截图</p>
+                  <p className="text-sm">请先在"页面截图"标签页中截取页面</p>
+                </div>
+              ) : (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  {screenshots.map((screenshot) => (
+                    <Card key={screenshot.id} className="overflow-hidden">
+                      <div className="aspect-video bg-gray-100 relative">
+                        {screenshot.dataUrl ? (
+                          <img
+                            src={screenshot.dataUrl || "/placeholder.svg"}
+                            alt={screenshot.name}
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <div className="flex items-center justify-center h-full">
+                            {screenshot.status === "capturing" ? (
+                              <RefreshCw className="h-8 w-8 animate-spin text-blue-500" />
+                            ) : (
+                              <ImageIcon className="h-8 w-8 text-gray-400" />
+                            )}
+                          </div>
+                        )}
+                        <div className="absolute top-2 right-2">{getStatusIcon(screenshot.status)}</div>
+                      </div>
+                      <CardContent className="p-4">
+                        <div className="space-y-2">
+                          <div className="font-medium truncate">{screenshot.name}</div>
+                          <div className="text-sm text-muted-foreground truncate">{screenshot.url}</div>
+                          {screenshot.method && (
+                            <Badge variant="outline" className="text-xs">
+                              {screenshot.method}
+                            </Badge>
+                          )}
+                          {screenshot.error && <div className="text-xs text-red-500 truncate">{screenshot.error}</div>}
+                          <div className="text-xs text-muted-foreground">{screenshot.timestamp.toLocaleString()}</div>
+                          <div className="flex items-center justify-between">
+                            <div className="text-xs text-muted-foreground">
+                              {screenshot.size && `${screenshot.size.width}×${screenshot.size.height}`}
+                            </div>
+                            <Button variant="ghost" size="sm" onClick={() => deleteScreenshot(screenshot.id)}>
+                              <Trash2 className="h-4 w-4" />
+                            </Button>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {screenshots.some((s) => s.status === "success") && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center space-x-2">
+                  <FileText className="h-5 w-5" />
+                  <span>生成文档</span>
+                </CardTitle>
+                <CardDescription>将成功的截图生成为Word文档</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Button onClick={generateDocument} disabled={isGeneratingDoc} className="w-full">
+                  {isGeneratingDoc ? (
+                    <>
+                      <RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+                      生成中...
+                    </>
+                  ) : (
+                    <>
+                      <Download className="mr-2 h-4 w-4" />
+                      生成Word文档
+                    </>
+                  )}
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+
+        <TabsContent value="settings" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center space-x-2">
+                <Settings className="h-5 w-5" />
+                <span>文档设置</span>
+              </CardTitle>
+              <CardDescription>配置生成的Word文档格式和内容</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">文档标题</label>
+                    <Input
+                      value={documentSettings.title}
+                      onChange={(e) =>
+                        setDocumentSettings((prev) => ({
+                          ...prev,
+                          title: e.target.value,
+                        }))
+                      }
+                      placeholder="输入文档标题"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">作者</label>
+                    <Input
+                      value={documentSettings.author}
+                      onChange={(e) =>
+                        setDocumentSettings((prev) => ({
+                          ...prev,
+                          author: e.target.value,
+                        }))
+                      }
+                      placeholder="输入作者姓名"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">文档描述</label>
+                    <Textarea
+                      value={documentSettings.description}
+                      onChange={(e) =>
+                        setDocumentSettings((prev) => ({
+                          ...prev,
+                          description: e.target.value,
+                        }))
+                      }
+                      placeholder="输入文档描述"
+                      rows={3}
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">页面大小</label>
+                    <Select
+                      value={documentSettings.pageSize}
+                      onValueChange={(value: "A4" | "A3" | "Letter") =>
+                        setDocumentSettings((prev) => ({ ...prev, pageSize: value }))
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="A4">A4</SelectItem>
+                        <SelectItem value="A3">A3</SelectItem>
+                        <SelectItem value="Letter">Letter</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium">页面方向</label>
+                    <Select
+                      value={documentSettings.orientation}
+                      onValueChange={(value: "portrait" | "landscape") =>
+                        setDocumentSettings((prev) => ({ ...prev, orientation: value }))
+                      }
+                    >
+                      <SelectTrigger>
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="portrait">纵向</SelectItem>
+                        <SelectItem value="landscape">横向</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-3">
+                    <label className="text-sm font-medium">包含内容</label>
+                    <div className="space-y-2">
+                      <div className="flex items-center space-x-2">
+                        <Checkbox
+                          checked={documentSettings.includeTimestamp}
+                          onCheckedChange={(checked) =>
+                            setDocumentSettings((prev) => ({
+                              ...prev,
+                              includeTimestamp: checked as boolean,
+                            }))
+                          }
+                        />
+                        <label className="text-sm">包含时间戳</label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <Checkbox
+                          checked={documentSettings.includePageUrls}
+                          onCheckedChange={(checked) =>
+                            setDocumentSettings((prev) => ({
+                              ...prev,
+                              includePageUrls: checked as boolean,
+                            }))
+                          }
+                        />
+                        <label className="text-sm">包含页面URL</label>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..91bad4c
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,184 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* 更新为毛玻璃风格的颜色变量 */
+    --background: 240 10% 98%;
+    --foreground: 240 10% 3.9%;
+    --card: 240 10% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 240 10% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 240 5.9% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.75rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 240 5.9% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 240 5.9% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 240 5.9% 98%;
+    --primary: 240 5.9% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 240 5.9% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 240 5.9% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 240 5.9% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    @apply bg-gradient-to-br from-blue-50 via-white to-purple-50 text-foreground min-h-screen;
+    background-attachment: fixed;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .dark body {
+    @apply bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900;
+  }
+
+  /* 移动端优化 */
+  @media (max-width: 768px) {
+    body {
+      background-attachment: scroll;
+    }
+  }
+}
+
+@layer components {
+  /* 毛玻璃效果基础类 */
+  .glass {
+    @apply backdrop-blur-md bg-white/10 border border-white/20;
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+  }
+
+  .glass-light {
+    @apply backdrop-blur-sm bg-white/20 border border-white/30;
+    box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.2);
+  }
+
+  .glass-heavy {
+    @apply backdrop-blur-xl bg-white/30 border border-white/40;
+    box-shadow: 0 16px 64px 0 rgba(31, 38, 135, 0.5);
+  }
+
+  .glass-dark {
+    @apply backdrop-blur-md bg-black/10 border border-white/10;
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+  }
+
+  /* 移动端毛玻璃效果优化 */
+  @media (max-width: 768px) {
+    .glass {
+      @apply backdrop-blur-sm bg-white/15;
+    }
+
+    .glass-light {
+      @apply backdrop-blur-sm bg-white/25;
+    }
+
+    .glass-heavy {
+      @apply backdrop-blur-md bg-white/35;
+    }
+  }
+
+  /* 卡片毛玻璃效果 */
+  .glass-card {
+    @apply glass rounded-2xl p-6 transition-all duration-300 hover:bg-white/20 hover:shadow-glass-lg;
+  }
+
+  /* 移动端卡片优化 */
+  @media (max-width: 768px) {
+    .glass-card {
+      @apply p-4 rounded-xl;
+    }
+  }
+
+  /* 导航栏毛玻璃效果 */
+  .glass-nav {
+    @apply glass-light rounded-2xl transition-all duration-300;
+  }
+
+  /* 按钮毛玻璃效果 */
+  .glass-button {
+    @apply glass-light rounded-xl px-4 py-2 transition-all duration-300 hover:bg-white/30 hover:scale-105;
+  }
+
+  /* 移动端按钮优化 */
+  @media (max-width: 768px) {
+    .glass-button {
+      @apply px-6 py-3 text-base;
+      min-height: 44px; /* iOS推荐的最小触摸目标 */
+    }
+  }
+
+  /* 输入框毛玻璃效果 */
+  .glass-input {
+    @apply glass-light rounded-xl px-4 py-2 transition-all duration-300 focus:bg-white/30 focus:ring-2 focus:ring-white/50;
+  }
+
+  /* 移动端输入框优化 */
+  @media (max-width: 768px) {
+    .glass-input {
+      @apply px-4 py-3 text-base;
+      min-height: 44px;
+    }
+  }
+
+  /* 安全区域适配 */
+  .safe-area-top {
+    padding-top: env(safe-area-inset-top);
+  }
+
+  .safe-area-bottom {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .safe-area-left {
+    padding-left: env(safe-area-inset-left);
+  }
+
+  .safe-area-right {
+    padding-right: env(safe-area-inset-right);
+  }
+}
+
+/* 移动端滚动优化 */
+@media (max-width: 768px) {
+  .overflow-scroll {
+    -webkit-overflow-scrolling: touch;
+  }
+}
diff --git a/app/group-sync/page.tsx b/app/group-sync/page.tsx
new file mode 100644
index 0000000..adfa411
--- /dev/null
+++ b/app/group-sync/page.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import { useState } from "react"
+import { Plus, Trash2, RefreshCw, MoreVertical, Check } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { format } from "date-fns"
+import "regenerator-runtime/runtime"
+
+interface GroupSync {
+  id: string
+  name: string
+  targetGroup: string
+  contentLib: string
+  creator: string
+  sentCount: number
+  lastSyncTime: Date
+  createTime: Date
+  syncStatus: "pending" | "running" | "completed"
+  enabled: boolean
+}
+
+const mockData: GroupSync[] = [
+  {
+    id: "1",
+    name: "每日早安问候",
+    targetGroup: "业务交流群1",
+    contentLib: "早安问候语库",
+    creator: "张三",
+    sentCount: 156,
+    lastSyncTime: new Date(),
+    createTime: new Date(),
+    syncStatus: "running",
+    enabled: true,
+  },
+  {
+    id: "2",
+    name: "周末营销推广",
+    targetGroup: "产品推广群",
+    contentLib: "营销文案库",
+    creator: "李四",
+    sentCount: 89,
+    lastSyncTime: new Date(),
+    createTime: new Date(),
+    syncStatus: "completed",
+    enabled: true,
+  },
+]
+
+export default function GroupSyncPage() {
+  const [selectedItems, setSelectedItems] = useState<string[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const toggleSelectAll = () => {
+    if (selectedItems.length === mockData.length) {
+      setSelectedItems([])
+    } else {
+      setSelectedItems(mockData.map((item) => item.id))
+    }
+  }
+
+  const toggleSelectItem = (id: string) => {
+    if (selectedItems.includes(id)) {
+      setSelectedItems(selectedItems.filter((item) => item !== id))
+    } else {
+      setSelectedItems([...selectedItems, id])
+    }
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto pb-16">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <h1 className="text-xl font-semibold">社群同步</h1>
+          <div className="flex items-center space-x-2">
+            <Button variant="outline" size="icon">
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4">
+        <Card className="p-4">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center space-x-2">
+              <Button variant="outline" size="sm" disabled={selectedItems.length === 0}>
+                <Trash2 className="h-4 w-4 mr-2" />
+                删除
+              </Button>
+              <Button variant="outline" size="sm">
+                <RefreshCw className="h-4 w-4 mr-2" />
+                刷新
+              </Button>
+            </div>
+            <Button size="sm">
+              <Plus className="h-4 w-4 mr-2" />
+              新建
+            </Button>
+          </div>
+
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-12">
+                    <Checkbox checked={selectedItems.length === mockData.length} onCheckedChange={toggleSelectAll} />
+                  </TableHead>
+                  <TableHead>ID</TableHead>
+                  <TableHead>社群同步名称</TableHead>
+                  <TableHead>推送社群</TableHead>
+                  <TableHead>内容库</TableHead>
+                  <TableHead>新建人</TableHead>
+                  <TableHead>已推送条数</TableHead>
+                  <TableHead>上次推送时间</TableHead>
+                  <TableHead>创建时间</TableHead>
+                  <TableHead>循环推送</TableHead>
+                  <TableHead>启用</TableHead>
+                  <TableHead className="w-12">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {mockData.map((item) => (
+                  <TableRow key={item.id}>
+                    <TableCell>
+                      <Checkbox
+                        checked={selectedItems.includes(item.id)}
+                        onCheckedChange={() => toggleSelectItem(item.id)}
+                      />
+                    </TableCell>
+                    <TableCell>{item.id}</TableCell>
+                    <TableCell>{item.name}</TableCell>
+                    <TableCell>{item.targetGroup}</TableCell>
+                    <TableCell>{item.contentLib}</TableCell>
+                    <TableCell>{item.creator}</TableCell>
+                    <TableCell>{item.sentCount}</TableCell>
+                    <TableCell>{format(item.lastSyncTime, "yyyy-MM-dd HH:mm:ss")}</TableCell>
+                    <TableCell>{format(item.createTime, "yyyy-MM-dd HH:mm:ss")}</TableCell>
+                    <TableCell>
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs ${
+                          item.syncStatus === "running"
+                            ? "bg-green-100 text-green-800"
+                            : item.syncStatus === "pending"
+                              ? "bg-yellow-100 text-yellow-800"
+                              : "bg-gray-100 text-gray-800"
+                        }`}
+                      >
+                        {item.syncStatus === "running" ? "进行中" : item.syncStatus === "pending" ? "待执行" : "已完成"}
+                      </span>
+                    </TableCell>
+                    <TableCell>
+                      <Check className={`h-4 w-4 ${item.enabled ? "text-green-500" : "text-gray-300"}`} />
+                    </TableCell>
+                    <TableCell>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="icon">
+                            <MoreVertical className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem>编辑</DropdownMenuItem>
+                          <DropdownMenuItem>删除</DropdownMenuItem>
+                          <DropdownMenuItem>查看详情</DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/hooks/useDeviceStatusPolling.ts b/app/hooks/useDeviceStatusPolling.ts
new file mode 100644
index 0000000..b14382a
--- /dev/null
+++ b/app/hooks/useDeviceStatusPolling.ts
@@ -0,0 +1,46 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import type { Device } from "@/components/device-grid"
+
+interface DeviceStatus {
+  status: "online" | "offline"
+  battery: number
+}
+
+async function fetchDeviceStatuses(deviceIds: string[]): Promise<Record<string, DeviceStatus>> {
+  // 模拟API调用
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return deviceIds.reduce(
+    (acc, id) => {
+      acc[id] = {
+        status: Math.random() > 0.3 ? "online" : "offline",
+        battery: Math.floor(Math.random() * 100),
+      }
+      return acc
+    },
+    {} as Record<string, DeviceStatus>,
+  )
+}
+
+export function useDeviceStatusPolling(devices: Device[]) {
+  const [statuses, setStatuses] = useState<Record<string, DeviceStatus>>({})
+
+  useEffect(() => {
+    const pollStatus = async () => {
+      try {
+        const newStatuses = await fetchDeviceStatuses(devices.map((d) => d.id))
+        setStatuses((prevStatuses) => ({ ...prevStatuses, ...newStatuses }))
+      } catch (error) {
+        console.error("Failed to fetch device statuses:", error)
+      }
+    }
+
+    pollStatus() // 立即执行一次
+    const intervalId = setInterval(pollStatus, 30000) // 每30秒更新一次
+
+    return () => clearInterval(intervalId)
+  }, [devices])
+
+  return statuses
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..89a0831
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,23 @@
+import type React from "react"
+import type { Metadata } from "next"
+import { Inter } from "next/font/google"
+import ClientLayout from "./ClientLayout"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+    generator: 'v0.dev'
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return <ClientLayout>{children}</ClientLayout>
+}
+
+
+import './globals.css'
\ No newline at end of file
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
new file mode 100644
index 0000000..d084cca
--- /dev/null
+++ b/app/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/app/login/page.tsx b/app/login/page.tsx
new file mode 100644
index 0000000..76c0403
--- /dev/null
+++ b/app/login/page.tsx
@@ -0,0 +1,355 @@
+"use client"
+
+import type React from "react"
+import { useState, useEffect } from "react"
+import { Eye, EyeOff, Phone } from "lucide-react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Checkbox } from "@/components/ui/checkbox"
+import { useRouter } from "next/navigation"
+import { WeChatIcon } from "@/components/icons/wechat-icon"
+import { AppleIcon } from "@/components/icons/apple-icon"
+import { useToast } from "@/components/ui/use-toast"
+
+// 使用环境变量获取API域名
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "https://api.example.com"
+
+// 定义登录响应类型
+interface LoginResponse {
+  code: number
+  message: string
+  data?: {
+    token: string
+  }
+}
+
+interface LoginForm {
+  phone: string
+  password: string
+  verificationCode: string
+  agreeToTerms: boolean
+}
+
+export default function LoginPage() {
+  const [showPassword, setShowPassword] = useState(false)
+  const [activeTab, setActiveTab] = useState<"password" | "verification">("password")
+  const [isLoading, setIsLoading] = useState(false)
+  const [form, setForm] = useState<LoginForm>({
+    phone: "",
+    password: "",
+    verificationCode: "",
+    agreeToTerms: false,
+  })
+
+  const router = useRouter()
+  const { toast } = useToast()
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target
+    setForm((prev) => ({ ...prev, [name]: value }))
+  }
+
+  const handleCheckboxChange = (checked: boolean) => {
+    setForm((prev) => ({ ...prev, agreeToTerms: checked }))
+  }
+
+  const validateForm = () => {
+    if (!form.phone) {
+      toast({
+        variant: "destructive",
+        title: "请输入手机号",
+        description: "手机号不能为空",
+      })
+      return false
+    }
+
+    if (!form.agreeToTerms) {
+      toast({
+        variant: "destructive",
+        title: "请同意用户协议",
+        description: "需要同意用户协议和隐私政策才能继续",
+      })
+      return false
+    }
+
+    if (activeTab === "password" && !form.password) {
+      toast({
+        variant: "destructive",
+        title: "请输入密码",
+        description: "密码不能为空",
+      })
+      return false
+    }
+
+    if (activeTab === "verification" && !form.verificationCode) {
+      toast({
+        variant: "destructive",
+        title: "请输入验证码",
+        description: "验证码不能为空",
+      })
+      return false
+    }
+
+    return true
+  }
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!validateForm()) return
+
+    setIsLoading(true)
+    try {
+      // 创建FormData对象
+      const formData = new FormData()
+      formData.append("phone", form.phone)
+
+      if (activeTab === "password") {
+        formData.append("password", form.password)
+      } else {
+        formData.append("verificationCode", form.verificationCode)
+      }
+
+      // 发送登录请求
+      const response = await fetch(`${API_BASE_URL}/auth/login`, {
+        method: "POST",
+        body: formData,
+        // 不需要设置Content-Type，浏览器会自动设置为multipart/form-data并添加boundary
+      })
+
+      const result: LoginResponse = await response.json()
+
+      if (result.code === 10000 && result.data?.token) {
+        // 保存token到localStorage
+        localStorage.setItem("token", result.data.token)
+
+        // 成功后跳转
+        router.push("/profile")
+
+        toast({
+          title: "登录成功",
+          description: "欢迎回来！",
+        })
+      } else {
+        throw new Error(result.message || "登录失败")
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "登录失败",
+        description: error instanceof Error ? error.message : "请稍后重试",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleSendVerificationCode = async () => {
+    if (!form.phone) {
+      toast({
+        variant: "destructive",
+        title: "请输入手机号",
+        description: "发送验证码需要手机号",
+      })
+      return
+    }
+
+    setIsLoading(true)
+    try {
+      // 创建FormData对象
+      const formData = new FormData()
+      formData.append("phone", form.phone)
+
+      // 发送验证码请求
+      const response = await fetch(`${API_BASE_URL}/auth/send-code`, {
+        method: "POST",
+        body: formData,
+      })
+
+      const result = await response.json()
+
+      if (result.code === 10000) {
+        toast({
+          title: "验证码已发送",
+          description: "请查看手机短信",
+        })
+      } else {
+        throw new Error(result.message || "发送失败")
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "发送失败",
+        description: error instanceof Error ? error.message : "请稍后重试",
+      })
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    // 检查是否已登录
+    const token = localStorage.getItem("token")
+    if (token) {
+      router.push("/profile")
+    }
+  }, [router])
+
+  return (
+    <div className="min-h-screen bg-white text-gray-900 flex flex-col px-4 py-8">
+      <div className="max-w-md w-full mx-auto space-y-8">
+        <Tabs
+          defaultValue="password"
+          className="w-full"
+          onValueChange={(v) => setActiveTab(v as "password" | "verification")}
+        >
+          <TabsList className="w-full bg-transparent border-b border-gray-200">
+            <TabsTrigger
+              value="verification"
+              className="flex-1 data-[state=active]:border-blue-500 data-[state=active]:text-blue-500 border-b-2 border-transparent"
+            >
+              验证码登录
+            </TabsTrigger>
+            <TabsTrigger
+              value="password"
+              className="flex-1 data-[state=active]:border-blue-500 data-[state=active]:text-blue-500 border-b-2 border-transparent"
+            >
+              密码登录
+            </TabsTrigger>
+          </TabsList>
+
+          <div className="mt-8">
+            <p className="text-gray-600 mb-6">你所在地区仅支持 手机号 / 微信 / Apple 登录</p>
+
+            <form onSubmit={handleLogin} className="space-y-6">
+              <div className="relative">
+                <Input
+                  type="tel"
+                  name="phone"
+                  value={form.phone}
+                  onChange={handleInputChange}
+                  placeholder="手机号"
+                  className="pl-16 border-gray-300 text-gray-900 h-12"
+                  disabled={isLoading}
+                />
+                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500 flex items-center gap-1">
+                  <Phone className="h-4 w-4" />
+                  +86
+                </span>
+              </div>
+
+              <TabsContent value="password" className="m-0">
+                <div className="relative">
+                  <Input
+                    type={showPassword ? "text" : "password"}
+                    name="password"
+                    value={form.password}
+                    onChange={handleInputChange}
+                    placeholder="密码"
+                    className="pr-12 border-gray-300 text-gray-900 h-12"
+                    disabled={isLoading}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500"
+                  >
+                    {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+                  </button>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="verification" className="m-0">
+                <div className="flex gap-3">
+                  <Input
+                    type="text"
+                    name="verificationCode"
+                    value={form.verificationCode}
+                    onChange={handleInputChange}
+                    placeholder="验证码"
+                    className="border-gray-300 text-gray-900 h-12"
+                    disabled={isLoading}
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    className="w-32 h-12 border-gray-300 text-gray-600 hover:text-gray-900"
+                    onClick={handleSendVerificationCode}
+                    disabled={isLoading}
+                  >
+                    发送验证码
+                  </Button>
+                </div>
+              </TabsContent>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="terms"
+                  checked={form.agreeToTerms}
+                  onCheckedChange={handleCheckboxChange}
+                  className="border-gray-300 data-[state=checked]:bg-blue-500"
+                  disabled={isLoading}
+                />
+                <label htmlFor="terms" className="text-sm text-gray-600">
+                  已阅读并同意
+                  <a href="#" className="text-blue-500 mx-1">
+                    用户协议
+                  </a>
+                  与
+                  <a href="#" className="text-blue-500 ml-1">
+                    隐私政策
+                  </a>
+                </label>
+              </div>
+
+              <Button
+                type="submit"
+                className="w-full h-12 bg-blue-500 hover:bg-blue-600 text-white"
+                disabled={isLoading}
+              >
+                {isLoading ? "登录中..." : "登录"}
+              </Button>
+
+              <div className="relative">
+                <div className="absolute inset-0 flex items-center">
+                  <span className="w-full border-t border-gray-300"></span>
+                </div>
+                <div className="relative flex justify-center text-xs uppercase">
+                  <span className="bg-white px-2 text-gray-500">或</span>
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full h-12 border-gray-300 text-gray-700 hover:bg-gray-50"
+                  disabled={isLoading}
+                >
+                  <WeChatIcon className="w-6 h-6 mr-2 text-[#07C160]" />
+                  使用微信登录
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full h-12 border-gray-300 text-gray-700 hover:bg-gray-50"
+                  disabled={isLoading}
+                >
+                  <AppleIcon className="w-6 h-6 mr-2" />
+                  使用 Apple 登录
+                </Button>
+              </div>
+            </form>
+
+            <div className="mt-8 text-center">
+              <a href="#" className="text-sm text-gray-500">
+                联系我们
+              </a>
+            </div>
+          </div>
+        </Tabs>
+      </div>
+    </div>
+  )
+}
diff --git a/app/orders/submit/[planId]/page.tsx b/app/orders/submit/[planId]/page.tsx
new file mode 100644
index 0000000..18a1481
--- /dev/null
+++ b/app/orders/submit/[planId]/page.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { toast } from "@/components/ui/use-toast"
+import type { OrderFormData } from "@/types/acquisition"
+
+export default function OrderSubmitPage({ params }: { params: { planId: string } }) {
+  const [formData, setFormData] = useState<OrderFormData>({
+    customerName: "",
+    phone: "",
+    wechatId: "",
+    source: "",
+    amount: undefined,
+    orderDate: new Date().toISOString().split("T")[0],
+    remark: "",
+  })
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    try {
+      const response = await fetch(`/api/acquisition/${params.planId}/orders`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData),
+      })
+
+      const data = await response.json()
+
+      if (data.success) {
+        toast({
+          title: "提交成功",
+          description: "订单信息已成功提交",
+        })
+        // 重置表单
+        setFormData({
+          customerName: "",
+          phone: "",
+          wechatId: "",
+          source: "",
+          amount: undefined,
+          orderDate: new Date().toISOString().split("T")[0],
+          remark: "",
+        })
+      } else {
+        throw new Error(data.message)
+      }
+    } catch (error) {
+      toast({
+        title: "提交失败",
+        description: "订单提交失败，请稍后重试",
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-md mx-auto">
+        <Card className="p-6">
+          <h1 className="text-2xl font-semibold mb-6">订单信息录入</h1>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <Label htmlFor="customerName">客户姓名</Label>
+              <Input
+                id="customerName"
+                value={formData.customerName}
+                onChange={(e) => setFormData((prev) => ({ ...prev, customerName: e.target.value }))}
+                required
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="phone">手机号码</Label>
+              <Input
+                id="phone"
+                value={formData.phone}
+                onChange={(e) => setFormData((prev) => ({ ...prev, phone: e.target.value }))}
+                required
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="wechatId">微信号</Label>
+              <Input
+                id="wechatId"
+                value={formData.wechatId}
+                onChange={(e) => setFormData((prev) => ({ ...prev, wechatId: e.target.value }))}
+                required
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="source">来源</Label>
+              <Input
+                id="source"
+                value={formData.source}
+                onChange={(e) => setFormData((prev) => ({ ...prev, source: e.target.value }))}
+                required
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="amount">订单金额</Label>
+              <Input
+                id="amount"
+                type="number"
+                step="0.01"
+                value={formData.amount || ""}
+                onChange={(e) => setFormData((prev) => ({ ...prev, amount: Number(e.target.value) }))}
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="orderDate">下单日期</Label>
+              <Input
+                id="orderDate"
+                type="date"
+                value={formData.orderDate}
+                onChange={(e) => setFormData((prev) => ({ ...prev, orderDate: e.target.value }))}
+                required
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="remark">备注</Label>
+              <Textarea
+                id="remark"
+                value={formData.remark}
+                onChange={(e) => setFormData((prev) => ({ ...prev, remark: e.target.value }))}
+              />
+            </div>
+
+            <Button type="submit" className="w-full">
+              提交订单
+            </Button>
+          </form>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..7df4115
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,308 @@
+"use client"
+import { useRouter } from "next/navigation"
+import { cn } from "@/lib/utils"
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Progress } from "@/components/ui/progress"
+import { Database, Users, Target, TrendingUp, Activity, CheckCircle, ArrowRight, BarChart3, Zap } from "lucide-react"
+
+export default function Home() {
+  const router = useRouter()
+
+  // 真实的数据概览
+  const systemOverview = {
+    totalUsers: 156234,
+    activeUsers: 89167,
+    dataIntegrations: 12,
+    avgUserValue: 3248,
+    dataQuality: 94.6,
+    syncStatus: "正常",
+  }
+
+  // 数据集成状态
+  const dataIntegrations = [
+    { name: "用户行为数据", status: "connected", lastSync: "2分钟前", records: 245673 },
+    { name: "CRM系统", status: "connected", lastSync: "5分钟前", records: 156234 },
+    { name: "内容互动数据", status: "connected", lastSync: "1分钟前", records: 892456 },
+    { name: "营销活动数据", status: "syncing", lastSync: "正在同步", records: 0 },
+  ]
+
+  // 用户画像概览
+  const userPortraitStats = {
+    totalTags: 342,
+    activeTags: 287,
+    userCoverage: 95.8,
+    segmentCount: 24,
+  }
+
+  // 用户估值概览
+  const userValueStats = {
+    highValueUsers: 18234,
+    mediumValueUsers: 47891,
+    lowValueUsers: 32156,
+    upgradeRate: 12.3,
+  }
+
+  const quickActions = [
+    {
+      title: "数据集成",
+      description: "管理数据源和同步",
+      icon: <Database className="h-5 w-5" />,
+      href: "/data-integration",
+      color: "bg-blue-50 hover:bg-blue-100 border-blue-200",
+    },
+    {
+      title: "用户画像",
+      description: "查看用户标签和分群",
+      icon: <Users className="h-5 w-5" />,
+      href: "/user-portrait",
+      color: "bg-purple-50 hover:bg-purple-100 border-purple-200",
+    },
+    {
+      title: "用户估值",
+      description: "分析用户价值和升级路径",
+      icon: <Target className="h-5 w-5" />,
+      href: "/user-value",
+      color: "bg-green-50 hover:bg-green-100 border-green-200",
+    },
+  ]
+
+  return (
+    <div className="container mx-auto py-6 space-y-8">
+      {/* 页面标题 */}
+      <div className="text-center space-y-2">
+        <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          用户数字资产中台
+        </h1>
+        <p className="text-muted-foreground">统一的用户数据管理和分析平台</p>
+      </div>
+
+      {/* 系统概览 */}
+      <Card className="border-none shadow-lg">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <BarChart3 className="h-5 w-5" />
+            系统概览
+          </CardTitle>
+          <CardDescription>平台整体运行状况</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="bg-gradient-to-r from-blue-50 to-blue-100 rounded-lg p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-blue-600">总用户数</p>
+                  <p className="text-2xl font-bold text-blue-900">{systemOverview.totalUsers.toLocaleString()}</p>
+                </div>
+                <Users className="h-8 w-8 text-blue-600" />
+              </div>
+              <div className="mt-2">
+                <p className="text-xs text-blue-600">
+                  活跃用户: {systemOverview.activeUsers.toLocaleString()} (
+                  {((systemOverview.activeUsers / systemOverview.totalUsers) * 100).toFixed(1)}%)
+                </p>
+              </div>
+            </div>
+
+            <div className="bg-gradient-to-r from-purple-50 to-purple-100 rounded-lg p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-purple-600">平均用户价值</p>
+                  <p className="text-2xl font-bold text-purple-900">¥{systemOverview.avgUserValue.toLocaleString()}</p>
+                </div>
+                <Target className="h-8 w-8 text-purple-600" />
+              </div>
+              <div className="mt-2">
+                <p className="text-xs text-purple-600">较上月提升 8.2%</p>
+              </div>
+            </div>
+
+            <div className="bg-gradient-to-r from-green-50 to-green-100 rounded-lg p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium text-green-600">数据质量</p>
+                  <p className="text-2xl font-bold text-green-900">{systemOverview.dataQuality}%</p>
+                </div>
+                <CheckCircle className="h-8 w-8 text-green-600" />
+              </div>
+              <div className="mt-2">
+                <Progress value={systemOverview.dataQuality} className="h-2" />
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 快速操作 */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {quickActions.map((action, index) => (
+          <Card
+            key={index}
+            className={cn(
+              "border-2 cursor-pointer transition-all duration-300 hover:shadow-lg hover:scale-105",
+              action.color,
+            )}
+            onClick={() => router.push(action.href)}
+          >
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between mb-4">
+                <div className="p-2 rounded-lg bg-white/50">{action.icon}</div>
+                <ArrowRight className="h-5 w-5 text-gray-400" />
+              </div>
+              <h3 className="font-semibold text-lg mb-2">{action.title}</h3>
+              <p className="text-sm text-gray-600">{action.description}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {/* 详细状态 */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {/* 数据集成状态 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Database className="h-5 w-5" />
+              数据集成状态
+            </CardTitle>
+            <CardDescription>当前数据源连接状态</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {dataIntegrations.map((integration, index) => (
+                <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                  <div className="flex items-center gap-3">
+                    <div
+                      className={cn(
+                        "w-3 h-3 rounded-full",
+                        integration.status === "connected"
+                          ? "bg-green-500"
+                          : integration.status === "syncing"
+                            ? "bg-yellow-500"
+                            : "bg-red-500",
+                      )}
+                    />
+                    <div>
+                      <p className="font-medium text-sm">{integration.name}</p>
+                      <p className="text-xs text-gray-500">{integration.lastSync}</p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="text-sm font-medium">{integration.records.toLocaleString()}</p>
+                    <p className="text-xs text-gray-500">记录</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+            <Button
+              variant="outline"
+              className="w-full mt-4 bg-transparent"
+              onClick={() => router.push("/data-integration")}
+            >
+              查看详情
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* 用户画像概览 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Users className="h-5 w-5" />
+              用户画像概览
+            </CardTitle>
+            <CardDescription>用户标签和分群统计</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-2 gap-4 mb-4">
+              <div className="text-center p-3 bg-purple-50 rounded-lg">
+                <p className="text-2xl font-bold text-purple-600">{userPortraitStats.totalTags}</p>
+                <p className="text-sm text-gray-600">总标签数</p>
+              </div>
+              <div className="text-center p-3 bg-blue-50 rounded-lg">
+                <p className="text-2xl font-bold text-blue-600">{userPortraitStats.segmentCount}</p>
+                <p className="text-sm text-gray-600">用户分群</p>
+              </div>
+            </div>
+            <div className="space-y-3">
+              <div className="flex justify-between items-center">
+                <span className="text-sm">标签覆盖率</span>
+                <span className="text-sm font-medium">{userPortraitStats.userCoverage}%</span>
+              </div>
+              <Progress value={userPortraitStats.userCoverage} className="h-2" />
+              <div className="flex justify-between items-center">
+                <span className="text-sm">活跃标签</span>
+                <span className="text-sm font-medium">{userPortraitStats.activeTags}</span>
+              </div>
+              <Progress value={(userPortraitStats.activeTags / userPortraitStats.totalTags) * 100} className="h-2" />
+            </div>
+            <Button
+              variant="outline"
+              className="w-full mt-4 bg-transparent"
+              onClick={() => router.push("/user-portrait")}
+            >
+              查看详情
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* 用户估值概览 */}
+        <Card className="lg:col-span-2">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Target className="h-5 w-5" />
+              用户价值分布
+            </CardTitle>
+            <CardDescription>用户价值等级和升级情况</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+              <div className="bg-green-50 p-4 rounded-lg">
+                <div className="flex items-center justify-between mb-2">
+                  <p className="text-sm font-medium text-green-600">高价值用户</p>
+                  <TrendingUp className="h-4 w-4 text-green-600" />
+                </div>
+                <p className="text-xl font-bold text-green-900">{userValueStats.highValueUsers.toLocaleString()}</p>
+                <p className="text-xs text-green-600">
+                  占比 {((userValueStats.highValueUsers / systemOverview.totalUsers) * 100).toFixed(1)}%
+                </p>
+              </div>
+              <div className="bg-blue-50 p-4 rounded-lg">
+                <div className="flex items-center justify-between mb-2">
+                  <p className="text-sm font-medium text-blue-600">中价值用户</p>
+                  <Activity className="h-4 w-4 text-blue-600" />
+                </div>
+                <p className="text-xl font-bold text-blue-900">{userValueStats.mediumValueUsers.toLocaleString()}</p>
+                <p className="text-xs text-blue-600">
+                  占比 {((userValueStats.mediumValueUsers / systemOverview.totalUsers) * 100).toFixed(1)}%
+                </p>
+              </div>
+              <div className="bg-gray-50 p-4 rounded-lg">
+                <div className="flex items-center justify-between mb-2">
+                  <p className="text-sm font-medium text-gray-600">低价值用户</p>
+                  <Users className="h-4 w-4 text-gray-600" />
+                </div>
+                <p className="text-xl font-bold text-gray-900">{userValueStats.lowValueUsers.toLocaleString()}</p>
+                <p className="text-xs text-gray-600">
+                  占比 {((userValueStats.lowValueUsers / systemOverview.totalUsers) * 100).toFixed(1)}%
+                </p>
+              </div>
+              <div className="bg-orange-50 p-4 rounded-lg">
+                <div className="flex items-center justify-between mb-2">
+                  <p className="text-sm font-medium text-orange-600">升级率</p>
+                  <Zap className="h-4 w-4 text-orange-600" />
+                </div>
+                <p className="text-xl font-bold text-orange-900">{userValueStats.upgradeRate}%</p>
+                <p className="text-xs text-orange-600">较上月提升 2.1%</p>
+              </div>
+            </div>
+            <Button variant="outline" className="w-full mt-4 bg-transparent" onClick={() => router.push("/user-value")}>
+              查看详情
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/plans/new/loading.tsx b/app/plans/new/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/plans/new/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/plans/new/page.tsx b/app/plans/new/page.tsx
new file mode 100644
index 0000000..20cb6ca
--- /dev/null
+++ b/app/plans/new/page.tsx
@@ -0,0 +1,265 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { ChevronLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { BasicSettings } from "./steps/BasicSettings"
+import { FriendRequestSettings } from "./steps/FriendRequestSettings"
+import { MessageSettings } from "./steps/MessageSettings"
+import { TagSettings } from "./steps/TagSettings"
+import { useRouter, useSearchParams } from "next/navigation"
+import { toast } from "@/components/ui/use-toast"
+
+const steps = [
+  { id: 1, title: "步骤一", subtitle: "基础设置" },
+  { id: 2, title: "步骤二", subtitle: "好友申请设置" },
+  { id: 3, title: "步骤三", subtitle: "消息设置" },
+  { id: 4, title: "步骤四", subtitle: "流量标签设置" },
+]
+
+// 场景分类规则
+const scenarioRules = {
+  LIVE: ["直播", "直播间", "主播", "抖音"],
+  COMMENT: ["评论", "互动", "回复", "小红书"],
+  GROUP: ["群", "社群", "群聊", "微信群"],
+  ARTICLE: ["文章", "笔记", "内容", "公众号"],
+}
+
+// 根据计划名称和标签自动判断场景
+const determineScenario = (planName: string, tags: any[]) => {
+  // 优先使用标签进行分类
+  if (tags && tags.length > 0) {
+    const firstTag = tags[0]
+    if (firstTag.name?.includes("直播") || firstTag.name?.includes("抖音")) return "douyin"
+    if (firstTag.name?.includes("评论") || firstTag.name?.includes("小红书")) return "xiaohongshu"
+    if (firstTag.name?.includes("群") || firstTag.name?.includes("微信")) return "weixinqun"
+    if (firstTag.name?.includes("文章") || firstTag.name?.includes("公众号")) return "gongzhonghao"
+  }
+
+  // 如果没有标签，使用计划名称进行分类
+  const planNameLower = planName.toLowerCase()
+  if (planNameLower.includes("直播") || planNameLower.includes("抖音")) return "douyin"
+  if (planNameLower.includes("评论") || planNameLower.includes("小红书")) return "xiaohongshu"
+  if (planNameLower.includes("群") || planNameLower.includes("微信")) return "weixinqun"
+  if (planNameLower.includes("文章") || planNameLower.includes("公众号")) return "gongzhonghao"
+  return "other"
+}
+
+export default function NewAcquisitionPlan() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const type = searchParams.get("type")
+  const source = searchParams.get("source")
+
+  const [currentStep, setCurrentStep] = useState(1)
+  const [formData, setFormData] = useState({
+    planName: "",
+    scenario: type === "order" ? "order" : "",
+    accounts: [],
+    materials: [],
+    enabled: true,
+    remarkType: "phone",
+    remarkKeyword: "",
+    greeting: "",
+    addFriendTimeStart: "09:00",
+    addFriendTimeEnd: "18:00",
+    addFriendInterval: 1,
+    maxDailyFriends: 20,
+    messageInterval: 1,
+    messageContent: "",
+    tags: [],
+    selectedDevices: [],
+    messagePlans: [],
+    importedTags: [],
+    sourceWechatId: source || "",
+  })
+
+  // 如果是从微信号好友转移过来，自动设置计划名称
+  useEffect(() => {
+    if (type === "order" && source) {
+      const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "")
+      setFormData((prev) => ({
+        ...prev,
+        planName: `${source}好友转移${today}`,
+        scenario: "order",
+      }))
+
+      // 模拟加载好友数据
+      setTimeout(() => {
+        toast({
+          title: "好友数据加载成功",
+          description: `已从微信号 ${source} 导入好友数据`,
+        })
+      }, 1000)
+    }
+  }, [type, source])
+
+  const handleSave = () => {
+    // 根据标签和计划名称自动判断场景
+    const scenario = formData.scenario || determineScenario(formData.planName, formData.tags)
+
+    console.log("计划已创建:", { ...formData, scenario })
+    toast({
+      title: "创建成功",
+      description: "获客计划已创建完成",
+    })
+
+    // 跳转到首页
+    router.push("/")
+  }
+
+  const handlePrev = () => {
+    setCurrentStep((prevStep) => Math.max(prevStep - 1, 1))
+  }
+
+  const handleNext = () => {
+    if (isStepValid()) {
+      if (currentStep === steps.length) {
+        handleSave()
+      } else {
+        setCurrentStep((prevStep) => Math.min(prevStep + 1, steps.length))
+      }
+    }
+  }
+
+  const isStepValid = () => {
+    switch (currentStep) {
+      case 1:
+        if (!formData.planName.trim()) {
+          toast({
+            title: "请完善信息",
+            description: "请填写计划名称",
+            variant: "destructive",
+          })
+          return false
+        }
+        return true
+      case 2:
+        // 如果是订单导入场景，跳过好友申请设置验证
+        if (formData.scenario === "order") {
+          return true
+        }
+        if (!formData.greeting?.trim() || formData.selectedDevices?.length === 0) {
+          toast({
+            title: "请完善信息",
+            description: "请填写好友申请信息并选择设备",
+            variant: "destructive",
+          })
+          return false
+        }
+        return true
+      case 3:
+        // 如果是订单导入场景，跳过消息设置验证
+        if (formData.scenario === "order") {
+          return true
+        }
+        if (formData.messagePlans?.length === 0) {
+          toast({
+            title: "请完善信息",
+            description: "请设置至少一条消息",
+            variant: "destructive",
+          })
+          return false
+        }
+        return true
+      case 4:
+        return true
+      default:
+        return true
+    }
+  }
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 1:
+        return <BasicSettings formData={formData} onChange={setFormData} onNext={handleNext} />
+      case 2:
+        return (
+          <FriendRequestSettings formData={formData} onChange={setFormData} onNext={handleNext} onPrev={handlePrev} />
+        )
+      case 3:
+        return <MessageSettings formData={formData} onChange={setFormData} onNext={handleNext} onPrev={handlePrev} />
+      case 4:
+        return <TagSettings formData={formData} onComplete={handleSave} onPrev={handlePrev} onChange={setFormData} />
+      default:
+        return null
+    }
+  }
+
+  // 如果是订单导入场景，直接跳到标签设置步骤
+  useEffect(() => {
+    // 只有在订单场景下，才自动开启步骤1，而不是直接跳到步骤4
+    if (formData.scenario === "order" && currentStep === 1 && formData.planName) {
+      // 保持在步骤1，不再自动跳转到步骤4
+      // 之前的逻辑是直接跳到步骤4：setCurrentStep(4)
+    }
+  }, [formData.scenario, currentStep, formData.planName])
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col">
+        <header className="sticky top-0 z-10 bg-white border-b">
+          <div className="flex items-center h-14 px-4">
+            <Button variant="ghost" size="icon" onClick={() => router.push("/")}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="ml-2 text-lg font-medium">{formData.sourceWechatId ? "好友转移" : "新建获客计划"}</h1>
+          </div>
+        </header>
+
+        <div className="flex-1 flex flex-col">
+          <div className="px-4 py-6">
+            <div className="relative flex justify-between">
+              {steps.map((step, index) => (
+                <div
+                  key={step.id}
+                  className={cn(
+                    "flex flex-col items-center relative z-10",
+                    currentStep >= step.id ? "text-blue-600" : "text-gray-400",
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "w-8 h-8 rounded-full flex items-center justify-center border-2",
+                      currentStep >= step.id
+                        ? "border-blue-600 bg-blue-600 text-white"
+                        : "border-gray-300 bg-white text-gray-400",
+                    )}
+                  >
+                    {step.id}
+                  </div>
+                  <div className="text-xs mt-1">{step.title}</div>
+                  <div className="text-xs mt-0.5 font-medium">{step.subtitle}</div>
+                  {index < steps.length - 1 && (
+                    <div
+                      className={cn(
+                        "absolute top-4 left-[32px] w-[calc(100%-32px)] h-[2px]",
+                        currentStep > step.id ? "bg-blue-600" : "bg-gray-200",
+                      )}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex-1 px-4 pb-20">{renderStepContent()}</div>
+
+          <div className="sticky bottom-0 left-0 right-0 bg-white border-t p-4">
+            <div className="flex justify-between max-w-[390px] mx-auto">
+              {currentStep > 1 && (
+                <Button variant="outline" onClick={handlePrev}>
+                  上一步
+                </Button>
+              )}
+              <Button className={cn("min-w-[120px]", currentStep === 1 ? "w-full" : "ml-auto")} onClick={handleNext}>
+                {currentStep === steps.length ? "完成" : "下一步"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/plans/new/steps/BasicSettings.tsx b/app/plans/new/steps/BasicSettings.tsx
new file mode 100644
index 0000000..f80e975
--- /dev/null
+++ b/app/plans/new/steps/BasicSettings.tsx
@@ -0,0 +1,548 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { QrCode, X, ChevronDown, Plus, Maximize2, Upload, Download } from "lucide-react"
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+
+const scenarios = [
+  { id: "haibao", name: "海报", type: "material" },
+  { id: "order", name: "订单", type: "api" },
+  { id: "douyin", name: "抖音", type: "social" },
+  { id: "xiaohongshu", name: "小红书", type: "social" },
+  { id: "gongzhonghao", name: "公众号", type: "social" },
+  { id: "payment", name: "支付码", type: "material" },
+  { id: "weixinqun", name: "微信群", type: "social" },
+  { id: "api", name: "API", type: "api" },
+]
+
+interface Account {
+  id: string
+  nickname: string
+  avatar: string
+}
+
+interface Material {
+  id: string
+  name: string
+  type: "poster" | "payment"
+  preview: string
+}
+
+interface BasicSettingsProps {
+  formData: any
+  onChange: (data: any) => void
+  onNext?: () => void
+}
+
+const posterTemplates = [
+  {
+    id: "poster-1",
+    name: "点击领取",
+    preview:
+      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E9%A2%86%E5%8F%961-tipd1HI7da6qooY5NkhxQnXBnT5LGU.gif",
+  },
+  {
+    id: "poster-2",
+    name: "点击合作",
+    preview:
+      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E5%90%88%E4%BD%9C-LPlMdgxtvhqCSr4IM1bZFEFDBF3ztI.gif",
+  },
+  {
+    id: "poster-3",
+    name: "点击咨询",
+    preview:
+      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E5%92%A8%E8%AF%A2-FTiyAMAPop2g9LvjLOLDz0VwPg3KVu.gif",
+  },
+  {
+    id: "poster-4",
+    name: "点击签到",
+    preview:
+      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E7%AD%BE%E5%88%B0-94TZIkjLldb4P2jTVlI6MkSDg0NbXi.gif",
+  },
+  {
+    id: "poster-5",
+    name: "点击了解",
+    preview:
+      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E4%BA%86%E8%A7%A3-6GCl7mQVdO4WIiykJyweSubLsTwj71.gif",
+  },
+  {
+    id: "poster-6",
+    name: "点击报名",
+    preview:
+      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%82%B9%E5%87%BB%E6%8A%A5%E5%90%8D-Mj0nnva0BiASeDAIhNNaRRAbjPgjEj.gif",
+  },
+]
+
+const generateRandomAccounts = (count: number): Account[] => {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `account-${index + 1}`,
+    nickname: `账号-${Math.random().toString(36).substring(2, 7)}`,
+    avatar: `/placeholder.svg?height=40&width=40&text=${index + 1}`,
+  }))
+}
+
+const generatePosterMaterials = (): Material[] => {
+  return posterTemplates.map((template) => ({
+    id: template.id,
+    name: template.name,
+    type: "poster",
+    preview: template.preview,
+  }))
+}
+
+export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
+  const [isAccountDialogOpen, setIsAccountDialogOpen] = useState(false)
+  const [isMaterialDialogOpen, setIsMaterialDialogOpen] = useState(false)
+  const [isQRCodeOpen, setIsQRCodeOpen] = useState(false)
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false)
+  const [previewImage, setPreviewImage] = useState("")
+  const [accounts] = useState<Account[]>(generateRandomAccounts(50))
+  const [materials] = useState<Material[]>(generatePosterMaterials())
+  const [selectedAccounts, setSelectedAccounts] = useState<Account[]>(
+    formData.accounts?.length > 0 ? formData.accounts : [],
+  )
+  const [selectedMaterials, setSelectedMaterials] = useState<Material[]>(
+    formData.materials?.length > 0 ? formData.materials : [],
+  )
+  const [showAllScenarios, setShowAllScenarios] = useState(false)
+  const [isImportDialogOpen, setIsImportDialogOpen] = useState(false)
+  const [importedTags, setImportedTags] = useState<
+    Array<{
+      phone: string
+      wechat: string
+      source?: string
+      orderAmount?: number
+      orderDate?: string
+    }>
+  >(formData.importedTags || [])
+
+  useEffect(() => {
+    if (!formData.planName) {
+      if (formData.materials?.length > 0) {
+        const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "")
+        onChange({ ...formData, planName: `海报${today}` })
+      } else {
+        onChange({ ...formData, planName: "场景" })
+      }
+    }
+  }, [formData, onChange])
+
+  const handleScenarioSelect = (scenarioId: string) => {
+    onChange({ ...formData, scenario: scenarioId })
+  }
+
+  const handleAccountSelect = (account: Account) => {
+    const updatedAccounts = [...selectedAccounts, account]
+    setSelectedAccounts(updatedAccounts)
+    onChange({ ...formData, accounts: updatedAccounts })
+  }
+
+  const handleMaterialSelect = (material: Material) => {
+    const updatedMaterials = [material]
+    setSelectedMaterials(updatedMaterials)
+    onChange({ ...formData, materials: updatedMaterials })
+    setIsMaterialDialogOpen(false)
+
+    // 更新计划名称
+    const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "")
+    onChange({ ...formData, planName: `海报${today}`, materials: updatedMaterials })
+  }
+
+  const handleRemoveAccount = (accountId: string) => {
+    const updatedAccounts = selectedAccounts.filter((a) => a.id !== accountId)
+    setSelectedAccounts(updatedAccounts)
+    onChange({ ...formData, accounts: updatedAccounts })
+  }
+
+  const handleRemoveMaterial = (materialId: string) => {
+    const updatedMaterials = selectedMaterials.filter((m) => m.id !== materialId)
+    setSelectedMaterials(updatedMaterials)
+    onChange({ ...formData, materials: updatedMaterials })
+  }
+
+  const handlePreviewImage = (imageUrl: string) => {
+    setPreviewImage(imageUrl)
+    setIsPreviewOpen(true)
+  }
+
+  const displayedScenarios = showAllScenarios ? scenarios : scenarios.slice(0, 3)
+
+  const handleFileImport = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        try {
+          const content = e.target?.result as string
+          const rows = content.split("\n").filter((row) => row.trim())
+          const tags = rows.slice(1).map((row) => {
+            const [phone, wechat, source, orderAmount, orderDate] = row.split(",")
+            return {
+              phone: phone.trim(),
+              wechat: wechat.trim(),
+              source: source?.trim(),
+              orderAmount: orderAmount ? Number(orderAmount) : undefined,
+              orderDate: orderDate?.trim(),
+            }
+          })
+          setImportedTags(tags)
+          onChange({ ...formData, importedTags: tags })
+        } catch (error) {
+          console.error("导入失败:", error)
+        }
+      }
+      reader.readAsText(file)
+    }
+  }
+
+  const handleDownloadTemplate = () => {
+    const template = "电话号码,微信号,来源,订单金额,下单日期\n13800138000,wxid_123,抖音,99.00,2024-03-03"
+    const blob = new Blob([template], { type: "text/csv" })
+    const url = window.URL.createObjectURL(blob)
+    const a = document.createElement("a")
+    a.href = url
+    a.download = "订单导入模板.csv"
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    window.URL.revokeObjectURL(url)
+  }
+
+  return (
+    <TooltipProvider>
+      <Card className="p-6">
+        <div className="space-y-6">
+          <div>
+            <Label className="text-base mb-4 block">获客场景</Label>
+            <div className="grid grid-cols-3 gap-2">
+              {displayedScenarios.map((scenario) => (
+                <button
+                  key={scenario.id}
+                  className={`p-2 rounded-lg text-center transition-all ${
+                    formData.scenario === scenario.id
+                      ? "bg-blue-100 text-blue-600 font-medium"
+                      : "bg-gray-50 text-gray-600 hover:bg-gray-100"
+                  }`}
+                  onClick={() => handleScenarioSelect(scenario.id)}
+                >
+                  {scenario.name}
+                </button>
+              ))}
+            </div>
+            {!showAllScenarios && (
+              <Button variant="ghost" className="mt-2 w-full text-blue-600" onClick={() => setShowAllScenarios(true)}>
+                展开更多选项 <ChevronDown className="ml-2 h-4 w-4" />
+              </Button>
+            )}
+          </div>
+
+          <div>
+            <Label htmlFor="planName">计划名称</Label>
+            <Input
+              id="planName"
+              value={formData.planName}
+              onChange={(e) => onChange({ ...formData, planName: e.target.value })}
+              placeholder="请输入计划名称"
+              className="mt-2"
+            />
+          </div>
+
+          {formData.scenario && (
+            <>
+              {scenarios.find((s) => s.id === formData.scenario)?.type === "social" && (
+                <div>
+                  <Label>绑定账号</Label>
+                  <div className="flex gap-2 mt-2">
+                    <Button
+                      variant="outline"
+                      className="flex-1 justify-start"
+                      onClick={() => setIsAccountDialogOpen(true)}
+                    >
+                      {selectedAccounts.length > 0 ? `已选择 ${selectedAccounts.length} 个账号` : "选择账号"}
+                    </Button>
+                    <Button variant="outline" size="icon" onClick={() => setIsQRCodeOpen(true)}>
+                      <QrCode className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  {selectedAccounts.length > 0 && (
+                    <div className="mt-2 flex flex-wrap gap-2">
+                      {selectedAccounts.map((account) => (
+                        <div key={account.id} className="flex items-center bg-gray-100 rounded-full px-3 py-1">
+                          <img
+                            src={account.avatar || "/placeholder.svg"}
+                            alt={account.nickname}
+                            className="w-4 h-4 rounded-full mr-2"
+                          />
+                          <span className="text-sm">{account.nickname}</span>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="ml-2 p-0"
+                            onClick={() => handleRemoveAccount(account.id)}
+                          >
+                            <X className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {scenarios.find((s) => s.id === formData.scenario)?.type === "material" && (
+                <div>
+                  <div className="flex items-center justify-between mb-4">
+                    <Label>选择海报</Label>
+                    <Button variant="outline" onClick={() => setIsMaterialDialogOpen(true)}>
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  {/* 海报展示区域 */}
+                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+                    {materials.map((material) => (
+                      <div
+                        key={material.id}
+                        className={`relative cursor-pointer rounded-lg overflow-hidden group ${
+                          selectedMaterials.find((m) => m.id === material.id)
+                            ? "ring-2 ring-blue-600"
+                            : "hover:ring-2 hover:ring-blue-600"
+                        }`}
+                        onClick={() => handleMaterialSelect(material)}
+                      >
+                        <img
+                          src={material.preview || "/placeholder.svg"}
+                          alt={material.name}
+                          className="w-full aspect-[9/16] object-cover"
+                        />
+                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-all">
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity"
+                            onClick={(e) => {
+                              e.stopPropagation()
+                              handlePreviewImage(material.preview)
+                            }}
+                          >
+                            <Maximize2 className="h-4 w-4 text-white" />
+                          </Button>
+                        </div>
+                        <div className="absolute bottom-0 left-0 right-0 p-2 bg-black/50 text-white">
+                          <div className="text-sm truncate">{material.name}</div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+
+                  {selectedMaterials.length > 0 && (
+                    <div className="mt-4">
+                      <Label>已选择的海报</Label>
+                      <div className="mt-2">
+                        <div className="relative w-full max-w-[200px]">
+                          <img
+                            src={selectedMaterials[0].preview || "/placeholder.svg"}
+                            alt={selectedMaterials[0].name}
+                            className="w-full aspect-[9/16] object-cover rounded-lg cursor-pointer"
+                            onClick={() => handlePreviewImage(selectedMaterials[0].preview)}
+                          />
+                          <Button
+                            variant="secondary"
+                            size="sm"
+                            className="absolute top-2 right-2"
+                            onClick={() => handleRemoveMaterial(selectedMaterials[0].id)}
+                          >
+                            <X className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {scenarios.find((s) => s.id === formData.scenario)?.id === "order" && (
+                <div>
+                  <div className="flex items-center justify-between mb-4">
+                    <Label>订单导入</Label>
+                    <div className="flex gap-2">
+                      <Button variant="outline" onClick={handleDownloadTemplate}>
+                        <Download className="h-4 w-4 mr-2" />
+                        下载模板
+                      </Button>
+                      <Button onClick={() => setIsImportDialogOpen(true)}>
+                        <Upload className="h-4 w-4 mr-2" />
+                        导入订单
+                      </Button>
+                    </div>
+                  </div>
+
+                  {importedTags.length > 0 && (
+                    <div className="mt-4">
+                      <h4 className="text-sm font-medium mb-2">已导入 {importedTags.length} 条数据</h4>
+                      <div className="max-h-[300px] overflow-auto border rounded-md">
+                        <Table>
+                          <TableHeader>
+                            <TableRow>
+                              <TableHead>电话号码</TableHead>
+                              <TableHead>微信号</TableHead>
+                              <TableHead>来源</TableHead>
+                              <TableHead>订单金额</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {importedTags.slice(0, 5).map((tag, index) => (
+                              <TableRow key={index}>
+                                <TableCell>{tag.phone}</TableCell>
+                                <TableCell>{tag.wechat}</TableCell>
+                                <TableCell>{tag.source}</TableCell>
+                                <TableCell>{tag.orderAmount}</TableCell>
+                              </TableRow>
+                            ))}
+                            {importedTags.length > 5 && (
+                              <TableRow>
+                                <TableCell colSpan={4} className="text-center text-gray-500">
+                                  还有 {importedTags.length - 5} 条数据未显示
+                                </TableCell>
+                              </TableRow>
+                            )}
+                          </TableBody>
+                        </Table>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </>
+          )}
+
+          <div className="flex items-center justify-between">
+            <Label htmlFor="enabled">是否启用</Label>
+            <Switch
+              id="enabled"
+              checked={formData.enabled}
+              onCheckedChange={(checked) => onChange({ ...formData, enabled: checked })}
+            />
+          </div>
+
+          <Button className="w-full h-12 text-base" onClick={onNext}>
+            下一步
+          </Button>
+        </div>
+
+        {/* 账号选择对话框 */}
+        <Dialog open={isAccountDialogOpen} onOpenChange={setIsAccountDialogOpen}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>选择账号</DialogTitle>
+            </DialogHeader>
+            <div className="mt-4 max-h-[400px] overflow-y-auto">
+              <div className="space-y-2">
+                {accounts.map((account) => (
+                  <div
+                    key={account.id}
+                    className="flex items-center space-x-3 p-3 hover:bg-gray-100 rounded-lg cursor-pointer"
+                    onClick={() => handleAccountSelect(account)}
+                  >
+                    <img src={account.avatar || "/placeholder.svg"} alt="" className="w-10 h-10 rounded-full" />
+                    <span className="flex-1">{account.nickname}</span>
+                    {selectedAccounts.find((a) => a.id === account.id) && (
+                      <div className="w-4 h-4 rounded-full bg-blue-600" />
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        {/* 二维码对话框 */}
+        <Dialog open={isQRCodeOpen} onOpenChange={setIsQRCodeOpen}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>绑定账号</DialogTitle>
+            </DialogHeader>
+            <div className="flex flex-col items-center p-6">
+              <div className="w-64 h-64 bg-gray-100 rounded-lg flex items-center justify-center">
+                <img src="/placeholder.svg?height=256&width=256" alt="二维码" className="w-full h-full" />
+              </div>
+              <p className="mt-4 text-sm text-gray-600">请用相应的APP扫码</p>
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        {/* 图片预览对话框 */}
+        <Dialog open={isPreviewOpen} onOpenChange={setIsPreviewOpen}>
+          <DialogContent className="sm:max-w-3xl">
+            <DialogHeader>
+              <DialogTitle>海报预览</DialogTitle>
+            </DialogHeader>
+            <div className="flex justify-center items-center p-4">
+              <img src={previewImage || "/placeholder.svg"} alt="预览" className="max-h-[80vh] object-contain" />
+            </div>
+          </DialogContent>
+        </Dialog>
+
+        {/* 订单导入对话框 */}
+        <Dialog open={isImportDialogOpen} onOpenChange={setIsImportDialogOpen}>
+          <DialogContent className="max-w-3xl">
+            <DialogHeader>
+              <DialogTitle>导入订单标签</DialogTitle>
+            </DialogHeader>
+            <div className="space-y-4">
+              <div className="flex items-center gap-4">
+                <Input type="file" accept=".csv" onChange={handleFileImport} className="flex-1" />
+              </div>
+              <div className="max-h-[400px] overflow-auto">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>电话号码</TableHead>
+                      <TableHead>微信号</TableHead>
+                      <TableHead>来源</TableHead>
+                      <TableHead>订单金额</TableHead>
+                      <TableHead>下单日期</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {importedTags.map((tag, index) => (
+                      <TableRow key={index}>
+                        <TableCell>{tag.phone}</TableCell>
+                        <TableCell>{tag.wechat}</TableCell>
+                        <TableCell>{tag.source}</TableCell>
+                        <TableCell>{tag.orderAmount}</TableCell>
+                        <TableCell>{tag.orderDate}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setIsImportDialogOpen(false)}>
+                取消
+              </Button>
+              <Button
+                onClick={() => {
+                  onChange({ ...formData, importedTags })
+                  setIsImportDialogOpen(false)
+                }}
+              >
+                确认导入
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </Card>
+    </TooltipProvider>
+  )
+}
diff --git a/app/plans/new/steps/FriendRequestSettings.tsx b/app/plans/new/steps/FriendRequestSettings.tsx
new file mode 100644
index 0000000..249e673
--- /dev/null
+++ b/app/plans/new/steps/FriendRequestSettings.tsx
@@ -0,0 +1,227 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { DeviceSelectionDialog } from "@/app/components/device-selection-dialog"
+import { HelpCircle, ChevronDown, MessageSquare } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+
+interface FriendRequestSettingsProps {
+  formData: any
+  onChange: (data: any) => void
+  onNext: () => void
+  onPrev: () => void
+}
+
+// 招呼语模板
+const greetingTemplates = [
+  "你好，请通过",
+  "你好,了解XX,请通过",
+  "你好，我是XX产品的客服请通过",
+  "你好，感谢关注我们的产品",
+  "你好，很高兴为您服务",
+]
+
+// 备注类型选项
+const remarkTypes = [
+  { value: "phone", label: "手机号" },
+  { value: "nickname", label: "昵称" },
+  { value: "source", label: "来源" },
+]
+
+export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: FriendRequestSettingsProps) {
+  const [isDeviceDialogOpen, setIsDeviceDialogOpen] = useState(false)
+  const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false)
+
+  // 使用useEffect设置默认值
+  useEffect(() => {
+    if (!formData.greeting) {
+      onChange({
+        ...formData,
+        greeting: "你好，请通过",
+        remarkType: "phone", // 默认选择手机号
+        maxDailyFriends: 20,
+        addFriendInterval: 1,
+      })
+    }
+  }, [formData, formData.greeting, onChange])
+
+  const handleDeviceSelect = (deviceIds: string[]) => {
+    onChange({
+      ...formData,
+      selectedDevices: deviceIds,
+    })
+  }
+
+  const handleTemplateSelect = (template: string) => {
+    onChange({ ...formData, greeting: template })
+    setIsTemplateDialogOpen(false)
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-6">
+        <div>
+          <Label className="text-base">选择设备</Label>
+          <Button variant="outline" className="w-full mt-2 justify-between" onClick={() => setIsDeviceDialogOpen(true)}>
+            {formData.selectedDevices?.length ? `已选择 ${formData.selectedDevices.length} 个设备` : "选择设备"}
+            <ChevronDown className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div>
+          <div className="flex items-center space-x-2">
+            <Label className="text-base">好友备注</Label>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <HelpCircle className="h-4 w-4 text-gray-400" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>设置添加好友时的备注格式</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+          <Select
+            value={formData.remarkType || "phone"}
+            onValueChange={(value) => onChange({ ...formData, remarkType: value })}
+          >
+            <SelectTrigger className="w-full mt-2">
+              <SelectValue placeholder="选择备注类型" />
+            </SelectTrigger>
+            <SelectContent>
+              {remarkTypes.map((type) => (
+                <SelectItem key={type.value} value={type.value}>
+                  {type.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {formData.remarkType && (
+            <div className="mt-2 p-3 bg-gray-50 rounded-lg text-sm">
+              <div className="text-gray-500 mb-1">备注格式预览：</div>
+              {formData.remarkType === "phone" && "138****1234"}
+              {formData.remarkType === "nickname" && "小红书用户2851"}
+              {formData.remarkType === "source" && "抖音直播"}
+            </div>
+          )}
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between">
+            <Label className="text-base">招呼语</Label>
+            <Button variant="ghost" size="sm" onClick={() => setIsTemplateDialogOpen(true)} className="text-blue-500">
+              <MessageSquare className="h-4 w-4 mr-2" />
+              参考模板
+            </Button>
+          </div>
+          <Input
+            value={formData.greeting}
+            onChange={(e) => onChange({ ...formData, greeting: e.target.value })}
+            placeholder="请输入招呼语"
+            className="mt-2"
+          />
+        </div>
+
+        <div>
+          <div className="flex items-center space-x-2">
+            <Label className="text-base">每个设备每日最大添加数量</Label>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <HelpCircle className="h-4 w-4 text-gray-400" />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>为了账号安全，建议每个设备每日添加不超过20个好友</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+          <div className="mt-2">
+            <Input
+              type="number"
+              value={formData.maxDailyFriends || 20}
+              onChange={(e) => onChange({ ...formData, maxDailyFriends: Number(e.target.value) })}
+              max={20}
+              min={1}
+              className="w-32"
+            />
+          </div>
+        </div>
+
+        <div>
+          <Label className="text-base">添加间隔</Label>
+          <div className="flex items-center space-x-2 mt-2">
+            <Input
+              type="number"
+              value={formData.addFriendInterval || 1}
+              onChange={(e) => onChange({ ...formData, addFriendInterval: Number(e.target.value) })}
+              className="w-32"
+            />
+            <span>分钟</span>
+          </div>
+        </div>
+
+        <div>
+          <Label className="text-base">允许加人的时间段</Label>
+          <div className="flex items-center space-x-2 mt-2">
+            <Input
+              type="time"
+              value={formData.addFriendTimeStart || "09:00"}
+              onChange={(e) => onChange({ ...formData, addFriendTimeStart: e.target.value })}
+              className="w-32"
+            />
+            <span>至</span>
+            <Input
+              type="time"
+              value={formData.addFriendTimeEnd || "18:00"}
+              onChange={(e) => onChange({ ...formData, addFriendTimeEnd: e.target.value })}
+              className="w-32"
+            />
+          </div>
+        </div>
+
+        <div className="flex justify-between pt-4">
+          <Button variant="outline" onClick={onPrev}>
+            上一步
+          </Button>
+          <Button onClick={onNext}>下一步</Button>
+        </div>
+      </div>
+
+      <DeviceSelectionDialog
+        open={isDeviceDialogOpen}
+        onOpenChange={setIsDeviceDialogOpen}
+        selectedDevices={formData.selectedDevices || []}
+        onSelect={handleDeviceSelect}
+        excludeUsedDevices={true}
+      />
+
+      <Dialog open={isTemplateDialogOpen} onOpenChange={setIsTemplateDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>招呼语模板</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-2">
+            {greetingTemplates.map((template, index) => (
+              <Button
+                key={index}
+                variant="outline"
+                className="w-full justify-start h-auto py-3 px-4"
+                onClick={() => handleTemplateSelect(template)}
+              >
+                {template}
+              </Button>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  )
+}
diff --git a/app/plans/new/steps/MessageSettings.tsx b/app/plans/new/steps/MessageSettings.tsx
new file mode 100644
index 0000000..e54b202
--- /dev/null
+++ b/app/plans/new/steps/MessageSettings.tsx
@@ -0,0 +1,406 @@
+"use client"
+
+import { useState } from "react"
+import { Card } 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 {
+  MessageSquare,
+  ImageIcon,
+  Video,
+  FileText,
+  Link2,
+  Users,
+  AppWindowIcon as Window,
+  Plus,
+  X,
+  Upload,
+} from "lucide-react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { toast } from "@/components/ui/use-toast"
+
+interface MessageContent {
+  id: string
+  type: "text" | "image" | "video" | "file" | "miniprogram" | "link" | "group"
+  content: string
+  sendInterval?: number
+  intervalUnit?: "seconds" | "minutes"
+  title?: string
+  description?: string
+  address?: string
+  coverImage?: string
+  groupId?: string
+}
+
+interface DayPlan {
+  day: number
+  messages: MessageContent[]
+}
+
+interface MessageSettingsProps {
+  formData: any
+  onChange: (data: any) => void
+  onNext: () => void
+  onPrev: () => void
+}
+
+// 消息类型配置
+const messageTypes = [
+  { id: "text", icon: MessageSquare, label: "文本" },
+  { id: "image", icon: ImageIcon, label: "图片" },
+  { id: "video", icon: Video, label: "视频" },
+  { id: "file", icon: FileText, label: "文件" },
+  { id: "miniprogram", icon: Window, label: "小程序" },
+  { id: "link", icon: Link2, label: "链���" },
+  { id: "group", icon: Users, label: "邀请入群" },
+]
+
+// 模拟群组数据
+const mockGroups = [
+  { id: "1", name: "产品交流群1", memberCount: 156 },
+  { id: "2", name: "产品交流群2", memberCount: 234 },
+  { id: "3", name: "产品交流群3", memberCount: 89 },
+]
+
+export function MessageSettings({ formData, onChange, onNext, onPrev }: MessageSettingsProps) {
+  const [dayPlans, setDayPlans] = useState<DayPlan[]>([
+    {
+      day: 0,
+      messages: [
+        {
+          id: "1",
+          type: "text",
+          content: "",
+          sendInterval: 5,
+          intervalUnit: "minutes",
+        },
+      ],
+    },
+  ])
+  const [isAddDayPlanOpen, setIsAddDayPlanOpen] = useState(false)
+  const [isGroupSelectOpen, setIsGroupSelectOpen] = useState(false)
+  const [selectedGroupId, setSelectedGroupId] = useState("")
+
+  // 添加新消息
+  const handleAddMessage = (dayIndex: number, type = "text") => {
+    const updatedPlans = [...dayPlans]
+    updatedPlans[dayIndex].messages.push({
+      id: Date.now().toString(),
+      type: type as MessageContent["type"],
+      content: "",
+      sendInterval: 5,
+      intervalUnit: "minutes",
+    })
+    setDayPlans(updatedPlans)
+    onChange({ ...formData, messagePlans: updatedPlans })
+  }
+
+  // 更新消息内容
+  const handleUpdateMessage = (dayIndex: number, messageIndex: number, updates: Partial<MessageContent>) => {
+    const updatedPlans = [...dayPlans]
+    updatedPlans[dayIndex].messages[messageIndex] = {
+      ...updatedPlans[dayIndex].messages[messageIndex],
+      ...updates,
+    }
+    setDayPlans(updatedPlans)
+    onChange({ ...formData, messagePlans: updatedPlans })
+  }
+
+  // 删除消息
+  const handleRemoveMessage = (dayIndex: number, messageIndex: number) => {
+    const updatedPlans = [...dayPlans]
+    updatedPlans[dayIndex].messages.splice(messageIndex, 1)
+    setDayPlans(updatedPlans)
+    onChange({ ...formData, messagePlans: updatedPlans })
+  }
+
+  // 添加新的天数计划
+  const handleAddDayPlan = () => {
+    setDayPlans([
+      ...dayPlans,
+      {
+        day: dayPlans.length,
+        messages: [
+          {
+            id: Date.now().toString(),
+            type: "text",
+            content: "",
+            sendInterval: 5,
+            intervalUnit: "minutes",
+          },
+        ],
+      },
+    ])
+    setIsAddDayPlanOpen(false)
+    toast({
+      title: "添加成功",
+      description: `已添加第${dayPlans.length}天的消息计划`,
+    })
+  }
+
+  // 选择群组
+  const handleSelectGroup = (groupId: string) => {
+    setSelectedGroupId(groupId)
+    setIsGroupSelectOpen(false)
+    toast({
+      title: "选择成功",
+      description: `已选择群组：${mockGroups.find((g) => g.id === groupId)?.name}`,
+    })
+  }
+
+  // 处理文件上传
+  const handleFileUpload = (dayIndex: number, messageIndex: number, type: "image" | "video" | "file") => {
+    // 模拟文件上传
+    toast({
+      title: "上传成功",
+      description: `${type === "image" ? "图片" : type === "video" ? "视频" : "文件"}上传成功`,
+    })
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <h2 className="text-lg font-semibold">消息设置</h2>
+          <Button variant="outline" size="icon" onClick={() => setIsAddDayPlanOpen(true)}>
+            <Plus className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <Tabs defaultValue="0" className="w-full">
+          <TabsList className="w-full">
+            {dayPlans.map((plan) => (
+              <TabsTrigger key={plan.day} value={plan.day.toString()} className="flex-1">
+                {plan.day === 0 ? "即时消息" : `第${plan.day}天`}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          {dayPlans.map((plan, dayIndex) => (
+            <TabsContent key={plan.day} value={plan.day.toString()}>
+              <div className="space-y-4">
+                {plan.messages.map((message, messageIndex) => (
+                  <div key={message.id} className="space-y-4 p-4 bg-gray-50 rounded-lg">
+                    <div className="flex items-center justify-between">
+                      <div className="flex items-center space-x-2">
+                        <Label>发送间隔</Label>
+                        <Input
+                          type="number"
+                          value={message.sendInterval}
+                          onChange={(e) =>
+                            handleUpdateMessage(dayIndex, messageIndex, { sendInterval: Number(e.target.value) })
+                          }
+                          className="w-20"
+                        />
+                        <Select
+                          value={message.intervalUnit}
+                          onValueChange={(value) =>
+                            handleUpdateMessage(dayIndex, messageIndex, {
+                              intervalUnit: value as "seconds" | "minutes",
+                            })
+                          }
+                        >
+                          <SelectTrigger className="w-[100px]">
+                            <SelectValue placeholder="选择单位" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="seconds">秒</SelectItem>
+                            <SelectItem value="minutes">分钟</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <Button variant="ghost" size="sm" onClick={() => handleRemoveMessage(dayIndex, messageIndex)}>
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+
+                    <div className="flex items-center space-x-2 bg-white p-2 rounded-lg">
+                      {messageTypes.map((type) => (
+                        <Button
+                          key={type.id}
+                          variant={message.type === type.id ? "default" : "outline"}
+                          size="sm"
+                          onClick={() => handleUpdateMessage(dayIndex, messageIndex, { type: type.id as any })}
+                          className="flex flex-col items-center p-2 h-auto"
+                        >
+                          <type.icon className="h-4 w-4" />
+                        </Button>
+                      ))}
+                    </div>
+
+                    {message.type === "text" && (
+                      <Textarea
+                        value={message.content}
+                        onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { content: e.target.value })}
+                        placeholder="请输入消息内容"
+                        className="min-h-[100px]"
+                      />
+                    )}
+
+                    {message.type === "miniprogram" && (
+                      <div className="space-y-4">
+                        <div className="space-y-2">
+                          <Label>
+                            标题<span className="text-red-500">*</span>
+                          </Label>
+                          <Input
+                            value={message.title}
+                            onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { title: e.target.value })}
+                            placeholder="请输入小程序标题"
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label>描述</Label>
+                          <Input
+                            value={message.description}
+                            onChange={(e) =>
+                              handleUpdateMessage(dayIndex, messageIndex, { description: e.target.value })
+                            }
+                            placeholder="请输入小程序描述"
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label>
+                            地址<span className="text-red-500">*</span>
+                          </Label>
+                          <Input
+                            value={message.address}
+                            onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { address: e.target.value })}
+                            placeholder="请输入小程序路径"
+                          />
+                        </div>
+                        <div className="space-y-2">
+                          <Label>
+                            封面<span className="text-red-500">*</span>
+                          </Label>
+                          <div className="border-2 border-dashed rounded-lg p-4 text-center">
+                            {message.coverImage ? (
+                              <div className="relative">
+                                <img
+                                  src={message.coverImage || "/placeholder.svg"}
+                                  alt="封面"
+                                  className="max-w-[200px] mx-auto rounded-lg"
+                                />
+                                <Button
+                                  variant="secondary"
+                                  size="sm"
+                                  className="absolute top-2 right-2"
+                                  onClick={() => handleUpdateMessage(dayIndex, messageIndex, { coverImage: undefined })}
+                                >
+                                  <X className="h-4 w-4" />
+                                </Button>
+                              </div>
+                            ) : (
+                              <Button
+                                variant="outline"
+                                className="w-full h-[120px]"
+                                onClick={() => handleFileUpload(dayIndex, messageIndex, "image")}
+                              >
+                                <Upload className="h-4 w-4 mr-2" />
+                                上传封面
+                              </Button>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    )}
+
+                    {message.type === "group" && (
+                      <div className="space-y-2">
+                        <Label>
+                          选择群聊<span className="text-red-500">*</span>
+                        </Label>
+                        <Button
+                          variant="outline"
+                          className="w-full justify-start"
+                          onClick={() => setIsGroupSelectOpen(true)}
+                        >
+                          {selectedGroupId ? mockGroups.find((g) => g.id === selectedGroupId)?.name : "选择邀请入的群"}
+                        </Button>
+                      </div>
+                    )}
+
+                    {(message.type === "image" || message.type === "video" || message.type === "file") && (
+                      <div className="border-2 border-dashed rounded-lg p-4 text-center">
+                        <Button
+                          variant="outline"
+                          className="w-full h-[120px]"
+                          onClick={() => handleFileUpload(dayIndex, messageIndex, message.type as any)}
+                        >
+                          <Upload className="h-4 w-4 mr-2" />
+                          上传{message.type === "image" ? "图片" : message.type === "video" ? "视频" : "文件"}
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                ))}
+
+                <Button variant="outline" onClick={() => handleAddMessage(dayIndex)} className="w-full">
+                  <Plus className="w-4 h-4 mr-2" />
+                  添加消息
+                </Button>
+              </div>
+            </TabsContent>
+          ))}
+        </Tabs>
+
+        <div className="flex justify-between pt-4">
+          <Button variant="outline" onClick={onPrev}>
+            上一步
+          </Button>
+          <Button onClick={onNext}>下一步</Button>
+        </div>
+      </div>
+
+      {/* 添加天数计划弹窗 */}
+      <Dialog open={isAddDayPlanOpen} onOpenChange={setIsAddDayPlanOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>添加消息计划</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <p className="text-sm text-gray-500 mb-4">选择要添加的消息计划类型</p>
+            <Button onClick={handleAddDayPlan} className="w-full">
+              添加第 {dayPlans.length} 天计划
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 选择群聊弹窗 */}
+      <Dialog open={isGroupSelectOpen} onOpenChange={setIsGroupSelectOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>选择群聊</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <div className="space-y-2">
+              {mockGroups.map((group) => (
+                <div
+                  key={group.id}
+                  className={`p-4 rounded-lg cursor-pointer hover:bg-gray-100 ${
+                    selectedGroupId === group.id ? "bg-blue-50 border border-blue-200" : ""
+                  }`}
+                  onClick={() => handleSelectGroup(group.id)}
+                >
+                  <div className="font-medium">{group.name}</div>
+                  <div className="text-sm text-gray-500">成员数：{group.memberCount}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsGroupSelectOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={() => setIsGroupSelectOpen(false)}>确定</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  )
+}
diff --git a/app/plans/new/steps/TagSettings.tsx b/app/plans/new/steps/TagSettings.tsx
new file mode 100644
index 0000000..d68fb4e
--- /dev/null
+++ b/app/plans/new/steps/TagSettings.tsx
@@ -0,0 +1,284 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Badge } from "@/components/ui/badge"
+import { Users, UserPlus, X } from "lucide-react"
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+interface TeamMember {
+  id: string
+  name: string
+  role: string
+  status: "active" | "inactive"
+}
+
+interface OrderTag {
+  phone: string
+  wechat: string
+  source?: string
+  orderAmount?: number
+  orderDate?: string
+}
+
+interface WechatFriend {
+  id: string
+  nickname: string
+  wechatId: string
+  remark: string
+  addedDate: string
+}
+
+interface TagSettingsProps {
+  formData: any
+  onChange: (data: any) => void
+  onComplete: () => void
+  onPrev?: () => void
+}
+
+export function TagSettings({ formData, onChange, onComplete, onPrev }: TagSettingsProps) {
+  const router = useRouter()
+  const [teamMembers, setTeamMembers] = useState<TeamMember[]>(formData.teamMembers || [])
+  const [selectedRole, setSelectedRole] = useState("member")
+  const [newMemberName, setNewMemberName] = useState("")
+  const [importedTags, setImportedTags] = useState<OrderTag[]>([])
+  const [wechatFriends, setWechatFriends] = useState<WechatFriend[]>([])
+  const [activeTab, setActiveTab] = useState(formData.sourceWechatId ? "friends" : "team")
+
+  // 如果是从微信号好友转移过来，加载好友数据
+  useEffect(() => {
+    if (formData.sourceWechatId) {
+      // 模拟加载微信好友数据
+      const mockFriends = Array.from({ length: 50 }, (_, i) => ({
+        id: `friend-${i + 1}`,
+        nickname: `好友${i + 1}`,
+        wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+        remark: Math.random() > 0.5 ? `备注${i + 1}` : "",
+        addedDate: new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toLocaleDateString(),
+      }))
+      setWechatFriends(mockFriends)
+      setActiveTab("friends")
+    }
+  }, [formData.sourceWechatId])
+
+  const handleAddMember = () => {
+    if (newMemberName.trim()) {
+      const newMember: TeamMember = {
+        id: Date.now().toString(),
+        name: newMemberName,
+        role: selectedRole,
+        status: "active",
+      }
+      const updatedMembers = [...teamMembers, newMember]
+      setTeamMembers(updatedMembers)
+      onChange({ ...formData, teamMembers: updatedMembers })
+      setNewMemberName("")
+    }
+  }
+
+  const handleRemoveMember = (id: string) => {
+    const updatedMembers = teamMembers.filter((member) => member.id !== id)
+    setTeamMembers(updatedMembers)
+    onChange({ ...formData, teamMembers: updatedMembers })
+  }
+
+  const handleToggleStatus = (id: string) => {
+    const updatedMembers = teamMembers.map((member) => {
+      if (member.id === id) {
+        return {
+          ...member,
+          status: member.status === "active" ? "inactive" : "active",
+        }
+      }
+      return member
+    })
+    setTeamMembers(updatedMembers)
+    onChange({ ...formData, teamMembers: updatedMembers })
+  }
+
+  const handleComplete = () => {
+    // 根据当前标签页确定要保存的数据
+    if (activeTab === "friends" && wechatFriends.length > 0) {
+      // 将微信好友转换为标签
+      const friendTags = wechatFriends.map((friend) => ({
+        phone: "",
+        wechat: friend.wechatId,
+        source: formData.sourceWechatId,
+        orderAmount: undefined,
+        orderDate: friend.addedDate,
+      }))
+      onChange({ ...formData, importedTags: friendTags })
+    } else if (activeTab === "import" && importedTags.length > 0) {
+      onChange({ ...formData, importedTags })
+    }
+
+    onComplete()
+  }
+
+  return (
+    <div className="space-y-6">
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+        <TabsList className="grid w-full grid-cols-3">
+          <TabsTrigger value="team">打粉团队</TabsTrigger>
+          <TabsTrigger value="import">标签导入</TabsTrigger>
+          {formData.sourceWechatId && <TabsTrigger value="friends">微信好友</TabsTrigger>}
+        </TabsList>
+
+        <TabsContent value="team" className="mt-4">
+          <Card className="p-4">
+            <div className="space-y-4">
+              <div className="flex items-center gap-4">
+                <div className="flex-1">
+                  <Input
+                    value={newMemberName}
+                    onChange={(e) => setNewMemberName(e.target.value)}
+                    placeholder="输入成员名称"
+                  />
+                </div>
+                <Select value={selectedRole} onValueChange={setSelectedRole}>
+                  <SelectTrigger className="w-[120px]">
+                    <SelectValue placeholder="选择角色" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="leader">组长</SelectItem>
+                    <SelectItem value="member">组员</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Button onClick={handleAddMember}>
+                  <UserPlus className="h-4 w-4 mr-2" />
+                  添加成员
+                </Button>
+              </div>
+
+              <div className="space-y-2">
+                {teamMembers.map((member) => (
+                  <div key={member.id} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+                    <div className="flex items-center gap-2">
+                      <span className="font-medium">{member.name}</span>
+                      <Badge variant="outline">{member.role === "leader" ? "组长" : "组员"}</Badge>
+                      <Badge
+                        variant={member.status === "active" ? "default" : "secondary"}
+                        className="cursor-pointer"
+                        onClick={() => handleToggleStatus(member.id)}
+                      >
+                        {member.status === "active" ? "已启用" : "已停用"}
+                      </Badge>
+                    </div>
+                    <Button variant="ghost" size="sm" onClick={() => handleRemoveMember(member.id)}>
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="import" className="mt-4">
+          <Card className="p-4">
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h3 className="text-lg font-medium">标签导入</h3>
+              </div>
+
+              {importedTags.length > 0 && (
+                <div className="mt-4">
+                  <h4 className="text-sm font-medium mb-2">已导入 {importedTags.length} 条数据</h4>
+                  <div className="max-h-[300px] overflow-auto border rounded-md">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>电话号码</TableHead>
+                          <TableHead>微信号</TableHead>
+                          <TableHead>来源</TableHead>
+                          <TableHead>订单金额</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {importedTags.slice(0, 5).map((tag, index) => (
+                          <TableRow key={index}>
+                            <TableCell>{tag.phone}</TableCell>
+                            <TableCell>{tag.wechat}</TableCell>
+                            <TableCell>{tag.source}</TableCell>
+                            <TableCell>{tag.orderAmount}</TableCell>
+                          </TableRow>
+                        ))}
+                        {importedTags.length > 5 && (
+                          <TableRow>
+                            <TableCell colSpan={4} className="text-center text-gray-500">
+                              还有 {importedTags.length - 5} 条数据未显示
+                            </TableCell>
+                          </TableRow>
+                        )}
+                      </TableBody>
+                    </Table>
+                  </div>
+                </div>
+              )}
+            </div>
+          </Card>
+        </TabsContent>
+
+        {formData.sourceWechatId && (
+          <TabsContent value="friends" className="mt-4">
+            <Card className="p-4">
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Users className="h-5 w-5 text-blue-500" />
+                    <h3 className="text-lg font-medium">微信好友列表</h3>
+                  </div>
+                  <Badge variant="outline">共 {wechatFriends.length} 位好友</Badge>
+                </div>
+
+                <div className="max-h-[400px] overflow-auto border rounded-md">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>昵称</TableHead>
+                        <TableHead>微信号</TableHead>
+                        <TableHead>备注</TableHead>
+                        <TableHead>添加时间</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {wechatFriends.map((friend) => (
+                        <TableRow key={friend.id}>
+                          <TableCell>{friend.nickname}</TableCell>
+                          <TableCell>{friend.wechatId}</TableCell>
+                          <TableCell>{friend.remark || "-"}</TableCell>
+                          <TableCell>{friend.addedDate}</TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </div>
+
+                <div className="text-sm text-gray-500">
+                  <p>• 这些好友将被导入为订单标签</p>
+                  <p>• 导入后可用于创建获客计划</p>
+                </div>
+              </div>
+            </Card>
+          </TabsContent>
+        )}
+      </Tabs>
+
+      <div className="flex justify-between">
+        {onPrev && (
+          <Button variant="outline" onClick={onPrev}>
+            上一步
+          </Button>
+        )}
+        <Button onClick={handleComplete} className={onPrev ? "ml-auto" : "w-full"}>
+          完成
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/app/scenarios/[channel]/acquired/page.tsx b/app/scenarios/[channel]/acquired/page.tsx
new file mode 100644
index 0000000..0dca345
--- /dev/null
+++ b/app/scenarios/[channel]/acquired/page.tsx
@@ -0,0 +1,115 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { useRouter } from "next/navigation"
+
+// 获取渠道中文名称
+const getChannelName = (channel: string) => {
+  const channelMap: Record<string, string> = {
+    douyin: "抖音",
+    kuaishou: "快手",
+    xiaohongshu: "小红书",
+    weibo: "微博",
+  }
+  return channelMap[channel] || channel
+}
+
+interface Customer {
+  id: string
+  nickname: string
+  avatar: string
+  tags: string[]
+  acquiredTime: string
+  source: string
+}
+
+export default function AcquiredCustomersPage({ params }: { params: { channel: string } }) {
+  const router = useRouter()
+  const channelName = getChannelName(params.channel)
+
+  const [customers] = useState<Customer[]>(
+    Array.from({ length: 31 }, (_, i) => ({
+      id: `customer-${i + 1}`,
+      nickname: `用户${i + 1}`,
+      avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=" + (i + 1),
+      tags: ["直播间", "高互动", Math.random() > 0.5 ? "潜在客户" : "意向客户"],
+      acquiredTime: new Date(Date.now() - Math.random() * 86400000 * 7).toLocaleString(),
+      source: Math.random() > 0.5 ? "直播间" : "评论区",
+    })),
+  )
+
+  const [currentPage, setCurrentPage] = useState(1)
+  const itemsPerPage = 10
+  const totalPages = Math.ceil(customers.length / itemsPerPage)
+  const currentCustomers = customers.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">{channelName}已获客用户</h1>
+          </div>
+          <div className="text-sm text-gray-500">共 {customers.length} 位用户</div>
+        </div>
+      </header>
+
+      <div className="p-4 space-y-4">
+        {currentCustomers.map((customer) => (
+          <Card key={customer.id} className="p-4">
+            <div className="flex items-start space-x-4">
+              <img
+                src={customer.avatar || "/placeholder.svg"}
+                alt={customer.nickname}
+                className="w-12 h-12 rounded-full"
+              />
+              <div className="flex-1">
+                <div className="flex items-center justify-between">
+                  <h3 className="font-medium">{customer.nickname}</h3>
+                  <span className="text-sm text-gray-500">{customer.acquiredTime}</span>
+                </div>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {customer.tags.map((tag, index) => (
+                    <Badge key={index} variant="secondary">
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+                <div className="mt-2 text-sm text-gray-500">来源：{customer.source}</div>
+              </div>
+            </div>
+          </Card>
+        ))}
+
+        {totalPages > 1 && (
+          <div className="flex justify-between items-center pt-4">
+            <Button
+              variant="outline"
+              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+              disabled={currentPage === 1}
+            >
+              上一页
+            </Button>
+            <span className="text-sm text-gray-500">
+              第 {currentPage} / {totalPages} 页
+            </span>
+            <Button
+              variant="outline"
+              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+              disabled={currentPage === totalPages}
+            >
+              下一页
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/app/scenarios/[channel]/added/page.tsx b/app/scenarios/[channel]/added/page.tsx
new file mode 100644
index 0000000..4538b31
--- /dev/null
+++ b/app/scenarios/[channel]/added/page.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { useRouter } from "next/navigation"
+
+// 获取渠道中文名称
+const getChannelName = (channel: string) => {
+  const channelMap: Record<string, string> = {
+    douyin: "抖音",
+    kuaishou: "快手",
+    xiaohongshu: "小红书",
+    weibo: "微博",
+  }
+  return channelMap[channel] || channel
+}
+
+interface AddedCustomer {
+  id: string
+  nickname: string
+  avatar: string
+  tags: string[]
+  addedTime: string
+  source: string
+  wechatId: string
+}
+
+export default function AddedCustomersPage({ params }: { params: { channel: string } }) {
+  const router = useRouter()
+  const channelName = getChannelName(params.channel)
+
+  const [customers] = useState<AddedCustomer[]>(
+    Array.from({ length: 25 }, (_, i) => ({
+      id: `customer-${i + 1}`,
+      nickname: `用户${i + 1}`,
+      avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=" + (i + 1),
+      tags: ["已添加", Math.random() > 0.5 ? "高意向" : "待跟进", "直播间"],
+      addedTime: new Date(Date.now() - Math.random() * 86400000 * 7).toLocaleString(),
+      source: Math.random() > 0.5 ? "直播间" : "评论区",
+      wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+    })),
+  )
+
+  const [currentPage, setCurrentPage] = useState(1)
+  const itemsPerPage = 10
+  const totalPages = Math.ceil(customers.length / itemsPerPage)
+  const currentCustomers = customers.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">{channelName}已添加好友</h1>
+          </div>
+          <div className="text-sm text-gray-500">共 {customers.length} 位好友</div>
+        </div>
+      </header>
+
+      <div className="p-4 space-y-4">
+        {currentCustomers.map((customer) => (
+          <Card key={customer.id} className="p-4">
+            <div className="flex items-start space-x-4">
+              <img
+                src={customer.avatar || "/placeholder.svg"}
+                alt={customer.nickname}
+                className="w-12 h-12 rounded-full"
+              />
+              <div className="flex-1">
+                <div className="flex items-center justify-between">
+                  <h3 className="font-medium">{customer.nickname}</h3>
+                  <span className="text-sm text-gray-500">{customer.addedTime}</span>
+                </div>
+                <div className="mt-1 text-sm text-gray-500">微信号：{customer.wechatId}</div>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {customer.tags.map((tag, index) => (
+                    <Badge key={index} variant="secondary">
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+                <div className="mt-2 text-sm text-gray-500">来源：{customer.source}</div>
+              </div>
+            </div>
+          </Card>
+        ))}
+
+        {totalPages > 1 && (
+          <div className="flex justify-between items-center pt-4">
+            <Button
+              variant="outline"
+              onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+              disabled={currentPage === 1}
+            >
+              上一页
+            </Button>
+            <span className="text-sm text-gray-500">
+              第 {currentPage} / {totalPages} 页
+            </span>
+            <Button
+              variant="outline"
+              onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
+              disabled={currentPage === totalPages}
+            >
+              下一页
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/app/scenarios/[channel]/devices/page.tsx b/app/scenarios/[channel]/devices/page.tsx
new file mode 100644
index 0000000..a52e0dc
--- /dev/null
+++ b/app/scenarios/[channel]/devices/page.tsx
@@ -0,0 +1,257 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ChevronLeft, Filter, Search, RefreshCw } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Badge } from "@/components/ui/badge"
+import { Checkbox } from "@/components/ui/checkbox"
+import { toast } from "@/components/ui/use-toast"
+import type { Device } from "@/types/device"
+
+export default function ScenarioDevicesPage({ params }: { params: { channel: string } }) {
+  const router = useRouter()
+  const [devices, setDevices] = useState<Device[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState("all")
+  const [currentPage, setCurrentPage] = useState(1)
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+  const devicesPerPage = 10
+  const maxDevices = 5
+
+  // 获取渠道中文名称
+  const getChannelName = (channel: string) => {
+    const channelMap: Record<string, string> = {
+      douyin: "抖音",
+      kuaishou: "快手",
+      xiaohongshu: "小红书",
+      weibo: "微博",
+    }
+    return channelMap[channel] || channel
+  }
+
+  const channelName = getChannelName(params.channel)
+
+  useEffect(() => {
+    // 模拟API调用
+    const fetchDevices = async () => {
+      const mockDevices = Array.from({ length: 15 }, (_, i) => ({
+        id: `device-${i + 1}`,
+        imei: `sd${123123 + i}`,
+        name: `设备 ${i + 1}`,
+        remark: `${channelName}获客设备 ${i + 1}`,
+        status: Math.random() > 0.2 ? "online" : "offline",
+        battery: Math.floor(Math.random() * 100),
+        wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+        friendCount: Math.floor(Math.random() * 1000),
+        todayAdded: Math.floor(Math.random() * 50),
+        messageCount: Math.floor(Math.random() * 200),
+        lastActive: new Date(Date.now() - Math.random() * 86400000).toLocaleString(),
+        addFriendStatus: Math.random() > 0.2 ? "normal" : "abnormal",
+      }))
+      setDevices(mockDevices)
+    }
+
+    fetchDevices()
+  }, [channelName])
+
+  const handleRefresh = () => {
+    toast({
+      title: "刷新成功",
+      description: "设备列表已更新",
+    })
+  }
+
+  const handleSelectAll = () => {
+    if (selectedDevices.length === devices.length || selectedDevices.length === maxDevices) {
+      setSelectedDevices([])
+    } else {
+      const newSelection = devices.slice(0, maxDevices).map((d) => d.id)
+      setSelectedDevices(newSelection)
+    }
+  }
+
+  const handleDeviceSelect = (deviceId: string) => {
+    if (selectedDevices.includes(deviceId)) {
+      setSelectedDevices(selectedDevices.filter((id) => id !== deviceId))
+    } else {
+      if (selectedDevices.length >= maxDevices) {
+        toast({
+          title: "选择超出限制",
+          description: `最多可选择${maxDevices}个设备`,
+          variant: "destructive",
+        })
+        return
+      }
+      setSelectedDevices([...selectedDevices, deviceId])
+    }
+  }
+
+  const handleSave = async () => {
+    try {
+      // 这里应该是实际的API调用来保存选中的设备
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      toast({
+        title: "保存成功",
+        description: "已更新计划设备",
+      })
+      router.back()
+    } catch (error) {
+      toast({
+        title: "保存失败",
+        description: "更新设备失败，请重试",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const filteredDevices = devices.filter((device) => {
+    const matchesSearch =
+      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
+    const matchesStatus = statusFilter === "all" || device.status === statusFilter
+    return matchesSearch && matchesStatus
+  })
+
+  const paginatedDevices = filteredDevices.slice((currentPage - 1) * devicesPerPage, currentPage * devicesPerPage)
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">{channelName}获客计划设备</h1>
+          </div>
+          <Button onClick={handleSave}>保存</Button>
+        </div>
+      </header>
+
+      <div className="p-4 space-y-4">
+        <Card className="p-4">
+          <div className="space-y-3">
+            <div className="flex items-center space-x-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                <Input
+                  placeholder="搜索设备IMEI/备注"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+              <Button variant="outline" size="icon">
+                <Filter className="h-4 w-4" />
+              </Button>
+              <Button variant="outline" size="icon" onClick={handleRefresh}>
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-4">
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                  <SelectTrigger className="w-[120px]">
+                    <SelectValue placeholder="全部状态" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部状态</SelectItem>
+                    <SelectItem value="online">在线</SelectItem>
+                    <SelectItem value="offline">离线</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="text-sm text-gray-500">
+                已选择 {selectedDevices.length}/{maxDevices} 个设备
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-2">
+              <Checkbox
+                checked={
+                  selectedDevices.length > 0 &&
+                  (selectedDevices.length === devices.length || selectedDevices.length === maxDevices)
+                }
+                onCheckedChange={handleSelectAll}
+              />
+              <span className="text-sm">全选</span>
+            </div>
+
+            <div className="space-y-2">
+              {paginatedDevices.length === 0 ? (
+                <div className="text-center py-8 text-gray-500">暂无设备</div>
+              ) : (
+                paginatedDevices.map((device) => (
+                  <Card
+                    key={device.id}
+                    className={`p-3 hover:shadow-md transition-shadow cursor-pointer ${
+                      selectedDevices.includes(device.id) ? "ring-2 ring-primary" : ""
+                    }`}
+                    onClick={() => handleDeviceSelect(device.id)}
+                  >
+                    <div className="flex items-center space-x-3">
+                      <Checkbox
+                        checked={selectedDevices.includes(device.id)}
+                        className="mt-1"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleDeviceSelect(device.id)
+                        }}
+                      />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center justify-between mb-1">
+                          <div className="font-medium truncate">{device.name}</div>
+                          <Badge variant={device.status === "online" ? "success" : "secondary"}>
+                            {device.status === "online" ? "在线" : "离线"}
+                          </Badge>
+                        </div>
+                        <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
+                        <div className="text-sm text-gray-500">微信号: {device.wechatId}</div>
+                        <div className="flex items-center justify-between mt-1 text-sm">
+                          <span className="text-gray-500">好友数: {device.friendCount}</span>
+                          <span className="text-gray-500">今日新增: +{device.todayAdded}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                ))
+              )}
+            </div>
+
+            {filteredDevices.length > devicesPerPage && (
+              <div className="flex justify-between items-center pt-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+                  disabled={currentPage === 1}
+                >
+                  上一页
+                </Button>
+                <span className="text-sm text-gray-500">
+                  第 {currentPage} / {Math.ceil(filteredDevices.length / devicesPerPage)} 页
+                </span>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    setCurrentPage((prev) => Math.min(Math.ceil(filteredDevices.length / devicesPerPage), prev + 1))
+                  }
+                  disabled={currentPage === Math.ceil(filteredDevices.length / devicesPerPage)}
+                >
+                  下一页
+                </Button>
+              </div>
+            )}
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/scenarios/[channel]/edit/[id]/page.tsx b/app/scenarios/[channel]/edit/[id]/page.tsx
new file mode 100644
index 0000000..400b441
--- /dev/null
+++ b/app/scenarios/[channel]/edit/[id]/page.tsx
@@ -0,0 +1,240 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { ChevronLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/lib/utils"
+import { BasicSettings } from "../../../new/steps/BasicSettings"
+import { FriendRequestSettings } from "../../../new/steps/FriendRequestSettings"
+import { MessageSettings } from "../../../new/steps/MessageSettings"
+import { TagSettings } from "../../../new/steps/TagSettings"
+import { useRouter } from "next/navigation"
+import { toast } from "@/components/ui/use-toast"
+
+const steps = [
+  { id: 1, title: "步骤一", subtitle: "基础设置" },
+  { id: 2, title: "步骤二", subtitle: "好友申请设置" },
+  { id: 3, title: "步骤三", subtitle: "消息设置" },
+  { id: 4, title: "步骤四", subtitle: "流量标签设置" },
+]
+
+export default function EditAcquisitionPlan({ params }: { params: { channel: string; id: string } }) {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [loading, setLoading] = useState(true)
+  const [formData, setFormData] = useState({
+    planName: "",
+    accounts: [],
+    dailyLimit: 10,
+    enabled: true,
+    remarkType: "phone",
+    remarkKeyword: "",
+    greeting: "",
+    addFriendTimeStart: "09:00",
+    addFriendTimeEnd: "18:00",
+    addFriendInterval: 1,
+    maxDailyFriends: 20,
+    messageInterval: 1,
+    messageContent: "",
+  })
+
+  useEffect(() => {
+    // 模拟从API获取计划数据
+    const fetchPlanData = async () => {
+      try {
+        // 这里应该是实际的API调用
+        const mockData = {
+          planName: "测试计划",
+          accounts: ["account1"],
+          dailyLimit: 15,
+          enabled: true,
+          remarkType: "phone",
+          remarkKeyword: "测试",
+          greeting: "你好",
+          addFriendTimeStart: "09:00",
+          addFriendTimeEnd: "18:00",
+          addFriendInterval: 2,
+          maxDailyFriends: 25,
+          messageInterval: 2,
+          messageContent: "欢迎",
+        }
+        setFormData(mockData)
+        setLoading(false)
+      } catch (error) {
+        toast({
+          title: "加载失败",
+          description: "获取计划数据失败，请重试",
+          variant: "destructive",
+        })
+        setLoading(false)
+      }
+    }
+
+    fetchPlanData()
+  }, [])
+
+  const handleSave = async () => {
+    try {
+      // 这里应该是实际的API调用
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      toast({
+        title: "保存成功",
+        description: "获客计划已更新",
+      })
+      router.push(`/scenarios/${params.channel}`)
+    } catch (error) {
+      toast({
+        title: "保存失败",
+        description: "更新计划失败，请重试",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const handlePrev = () => {
+    setCurrentStep((prevStep) => Math.max(prevStep - 1, 1))
+  }
+
+  const handleNext = () => {
+    if (isStepValid()) {
+      if (currentStep === steps.length) {
+        handleSave()
+      } else {
+        setCurrentStep((prevStep) => Math.min(prevStep + 1, steps.length))
+      }
+    }
+  }
+
+  const isStepValid = () => {
+    switch (currentStep) {
+      case 1:
+        if (!formData.planName.trim() || formData.accounts.length === 0) {
+          toast({
+            title: "请完善信息",
+            description: "请填写计划名称并选择至少一个账号",
+            variant: "destructive",
+          })
+          return false
+        }
+        return true
+      case 2:
+        if (!formData.greeting.trim()) {
+          toast({
+            title: "请完善信息",
+            description: "请填写好友申请信息",
+            variant: "destructive",
+          })
+          return false
+        }
+        return true
+      case 3:
+        if (!formData.messageContent.trim()) {
+          toast({
+            title: "请完善信息",
+            description: "请填写消息内容",
+            variant: "destructive",
+          })
+          return false
+        }
+        return true
+      case 4:
+        return true
+      default:
+        return true
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-2 text-gray-600">加载中...</p>
+        </div>
+      </div>
+    )
+  }
+
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case 1:
+        return <BasicSettings formData={formData} onChange={setFormData} onNext={handleNext} isEdit />
+      case 2:
+        return (
+          <FriendRequestSettings formData={formData} onChange={setFormData} onNext={handleNext} onPrev={handlePrev} />
+        )
+      case 3:
+        return <MessageSettings formData={formData} onChange={setFormData} onNext={handleNext} onPrev={handlePrev} />
+      case 4:
+        return <TagSettings formData={formData} onChange={setFormData} onNext={handleSave} onPrev={handlePrev} />
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col">
+        <header className="sticky top-0 z-10 bg-white border-b">
+          <div className="flex items-center h-14 px-4">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="ml-2 text-lg font-medium">编辑获客计划</h1>
+          </div>
+        </header>
+
+        <div className="flex-1 flex flex-col">
+          <div className="px-4 py-6">
+            <div className="relative flex justify-between">
+              {steps.map((step) => (
+                <div
+                  key={step.id}
+                  className={cn(
+                    "flex flex-col items-center relative z-10",
+                    currentStep >= step.id ? "text-blue-600" : "text-gray-400",
+                  )}
+                >
+                  <div
+                    className={cn(
+                      "w-8 h-8 rounded-full flex items-center justify-center border-2 transition-colors",
+                      currentStep >= step.id
+                        ? "border-blue-600 bg-blue-600 text-white"
+                        : "border-gray-300 bg-white text-gray-400",
+                    )}
+                  >
+                    {step.id}
+                  </div>
+                  <div className="text-xs mt-1">{step.title}</div>
+                  <div className="text-xs mt-0.5 font-medium">{step.subtitle}</div>
+                </div>
+              ))}
+              <div className="absolute top-4 left-0 right-0 h-0.5 bg-gray-200 -z-10">
+                <div
+                  className="absolute top-0 left-0 h-full bg-blue-600 transition-all duration-300"
+                  style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="flex-1 px-4 pb-20">{renderStepContent()}</div>
+
+          <div className="sticky bottom-0 left-0 right-0 bg-white border-t p-4">
+            <div className="flex justify-between max-w-[390px] mx-auto">
+              {currentStep > 1 && (
+                <Button variant="outline" onClick={handlePrev}>
+                  上一步
+                </Button>
+              )}
+              <Button className={cn("min-w-[120px]", currentStep === 1 ? "w-full" : "ml-auto")} onClick={handleNext}>
+                {currentStep === steps.length ? "保存" : "下一步"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/scenarios/[channel]/page.tsx b/app/scenarios/[channel]/page.tsx
new file mode 100644
index 0000000..74fd10d
--- /dev/null
+++ b/app/scenarios/[channel]/page.tsx
@@ -0,0 +1,293 @@
+"use client"
+
+import { useState } from "react"
+import { Clock, ChevronLeft, MoreVertical, Copy, Pencil, Trash2 } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
+import { useRouter } from "next/navigation"
+import { Badge } from "@/components/ui/badge"
+import { toast } from "@/components/ui/use-toast"
+import { BindDouyinQRCode } from "@/components/BindDouyinQRCode"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import Link from "next/link"
+import { PlanSettingsDialog } from "@/components/acquisition/PlanSettingsDialog"
+
+// 获取渠道中文名称
+const getChannelName = (channel: string) => {
+  const channelMap: Record<string, string> = {
+    douyin: "抖音",
+    kuaishou: "快手",
+    xiaohongshu: "小红书",
+    weibo: "微博",
+  }
+  return channelMap[channel] || channel
+}
+
+interface Task {
+  id: string
+  name: string
+  status: "running" | "paused" | "completed"
+  stats: {
+    devices: number
+    acquired: number
+    added: number
+  }
+  lastUpdated: string
+  executionTime: string
+  nextExecutionTime: string
+  trend: { date: string; customers: number }[]
+}
+
+interface DeviceStats {
+  active: number
+}
+
+export default function ChannelPage({ params }: { params: { channel: string } }) {
+  const router = useRouter()
+  const channel = params.channel
+  const channelName = getChannelName(params.channel)
+
+  const [tasks, setTasks] = useState<Task[]>([
+    {
+      id: "1",
+      name: `${channelName}直播获客计划`,
+      status: "running",
+      stats: {
+        devices: 5,
+        acquired: 31,
+        added: 25,
+      },
+      lastUpdated: "2024-02-09 15:30",
+      executionTime: "2024-02-09 17:24:10",
+      nextExecutionTime: "2024-02-09 17:25:36",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `2月${String(i + 1)}日`,
+        customers: Math.floor(Math.random() * 30) + 30,
+      })),
+    },
+    {
+      id: "2",
+      name: `${channelName}评论区获客计划`,
+      status: "paused",
+      stats: {
+        devices: 3,
+        acquired: 15,
+        added: 12,
+      },
+      lastUpdated: "2024-02-09 14:00",
+      executionTime: "2024-02-09 16:30:00",
+      nextExecutionTime: "2024-02-09 16:45:00",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `2月${String(i + 1)}日`,
+        customers: Math.floor(Math.random() * 20) + 20,
+      })),
+    },
+  ])
+
+  const [deviceStats, setDeviceStats] = useState<DeviceStats>({
+    active: 5,
+  })
+
+  const [isPlanSettingsOpen, setIsPlanSettingsOpen] = useState(false)
+  const [selectedPlanId, setSelectedPlanId] = useState<string>("")
+
+  const toggleTaskStatus = (taskId: string) => {
+    setTasks(
+      tasks.map((task) => {
+        if (task.id === taskId) {
+          const newStatus = task.status === "running" ? "paused" : "running"
+          return { ...task, status: newStatus }
+        }
+        return task
+      }),
+    )
+  }
+
+  const handleEditPlan = (taskId: string) => {
+    console.log(`编辑计划: ${taskId}`)
+    console.log(`跳转到: /scenarios/${channel}/edit/${taskId}`)
+    router.push(`/scenarios/${channel}/edit/${taskId}`)
+  }
+
+  const handleCopyPlan = (taskId: string) => {
+    const taskToCopy = tasks.find((task) => task.id === taskId)
+    if (taskToCopy) {
+      const newTask = {
+        ...taskToCopy,
+        id: `${Date.now()}`,
+        name: `${taskToCopy.name} (副本)`,
+        status: "paused" as const,
+      }
+      setTasks([...tasks, newTask])
+      toast({
+        title: "计划已复制",
+        description: `已成功复制"${taskToCopy.name}"`,
+      })
+    }
+  }
+
+  const handleDeletePlan = (taskId: string) => {
+    const taskToDelete = tasks.find((t) => t.id === taskId)
+    if (taskToDelete) {
+      setTasks(tasks.filter((t) => t.id !== taskId))
+      toast({
+        title: "计划已删除",
+        description: `已成功删除"${taskToDelete.name}"`,
+      })
+    }
+  }
+
+  // 计算通过率
+  const calculatePassRate = (acquired: number, added: number) => {
+    if (acquired === 0) return 0
+    return Math.round((added / acquired) * 100)
+  }
+
+  return (
+    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
+      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
+        <div className="flex items-center p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-xl font-semibold text-blue-600">{channelName}获客</h1>
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-7xl mx-auto">
+        {tasks.map((task) => {
+          const { devices: deviceCount, acquired: acquiredCount, added: addedCount } = task.stats
+          const passRate = calculatePassRate(acquiredCount, addedCount)
+
+          return (
+            <Card key={task.id} className="p-6 hover:shadow-lg transition-all mb-4 bg-white/80 backdrop-blur-sm">
+              <div className="flex items-center justify-between mb-6">
+                <div className="flex items-center space-x-3">
+                  <h3 className="font-medium text-lg">{task.name}</h3>
+                  <Badge
+                    variant={task.status === "running" ? "success" : "secondary"}
+                    className="cursor-pointer hover:opacity-80"
+                    onClick={() => {
+                      setSelectedPlanId(task.id)
+                      setIsPlanSettingsOpen(true)
+                    }}
+                  >
+                    {task.status === "running" ? "进行中" : "已暂停"}
+                  </Badge>
+                  {params.channel === "douyin" && <BindDouyinQRCode />}
+                </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-gray-100 rounded-full z-10">
+                      <MoreVertical className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-48 z-50">
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleEditPlan(task.id)
+                      }}
+                      className="cursor-pointer hover:bg-blue-50"
+                    >
+                      <Pencil className="w-4 h-4 mr-2" />
+                      编辑计划
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleCopyPlan(task.id)
+                      }}
+                      className="cursor-pointer hover:bg-blue-50"
+                    >
+                      <Copy className="w-4 h-4 mr-2" />
+                      复制计划
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleDeletePlan(task.id)
+                      }}
+                      className="text-red-600 cursor-pointer hover:bg-red-50"
+                    >
+                      <Trash2 className="w-4 h-4 mr-2" />
+                      删除计划
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+
+              <div className="grid grid-cols-4 gap-2 mb-4">
+                <Link href={`/scenarios/${channel}/devices`}>
+                  <Card className="p-2 hover:bg-gray-50 transition-colors cursor-pointer">
+                    <div className="text-sm text-gray-500 mb-1">设备数</div>
+                    <div className="text-2xl font-semibold">{deviceCount}</div>
+                  </Card>
+                </Link>
+
+                <Link href={`/scenarios/${channel}/acquired`}>
+                  <Card className="p-2 hover:bg-gray-50 transition-colors cursor-pointer">
+                    <div className="text-sm text-gray-500 mb-1">已获客</div>
+                    <div className="text-2xl font-semibold">{acquiredCount}</div>
+                  </Card>
+                </Link>
+
+                <Link href={`/scenarios/${channel}/added`}>
+                  <Card className="p-2 hover:bg-gray-50 transition-colors cursor-pointer">
+                    <div className="text-sm text-gray-500 mb-1">已添加</div>
+                    <div className="text-2xl font-semibold">{addedCount}</div>
+                  </Card>
+                </Link>
+
+                <Card className="p-2">
+                  <div className="text-sm text-gray-500 mb-1">通过率</div>
+                  <div className="text-2xl font-semibold">{passRate}%</div>
+                </Card>
+              </div>
+
+              <div className="h-48 bg-white rounded-lg p-4 mb-4">
+                <ResponsiveContainer width="100%" height="100%">
+                  <LineChart data={task.trend}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                    <XAxis dataKey="date" stroke="#666" />
+                    <YAxis stroke="#666" />
+                    <Tooltip
+                      contentStyle={{
+                        backgroundColor: "white",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "6px",
+                      }}
+                    />
+                    <Line
+                      type="monotone"
+                      dataKey="customers"
+                      name="获客数"
+                      stroke="#3b82f6"
+                      strokeWidth={2}
+                      dot={{ fill: "#3b82f6" }}
+                    />
+                  </LineChart>
+                </ResponsiveContainer>
+              </div>
+
+              <div className="flex items-center justify-between text-sm border-t pt-4 text-gray-500">
+                <div className="flex items-center space-x-2">
+                  <Clock className="w-4 h-4" />
+                  <span>上次执行：{task.executionTime}</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Clock className="w-4 h-4" />
+                  <span>下次执行：{task.nextExecutionTime}</span>
+                </div>
+              </div>
+            </Card>
+          )
+        })}
+      </div>
+      <PlanSettingsDialog open={isPlanSettingsOpen} onOpenChange={setIsPlanSettingsOpen} planId={selectedPlanId} />
+    </div>
+  )
+}
diff --git a/app/scenarios/[channel]/traffic/page.tsx b/app/scenarios/[channel]/traffic/page.tsx
new file mode 100644
index 0000000..b7f1952
--- /dev/null
+++ b/app/scenarios/[channel]/traffic/page.tsx
@@ -0,0 +1,230 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ChevronLeft, Search, Filter, RefreshCw } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+
+interface TrafficUser {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  phone: string
+  region: string
+  note: string
+  status: "pending" | "added" | "failed"
+  addTime: string
+  source: string
+  tags: string[]
+}
+
+export default function ChannelTrafficPage({
+  params,
+  searchParams,
+}: {
+  params: { channel: string }
+  searchParams: { type?: string }
+}) {
+  const router = useRouter()
+  const [users, setUsers] = useState<TrafficUser[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState(searchParams.type || "all")
+  const [currentPage, setCurrentPage] = useState(1)
+  const itemsPerPage = 10
+
+  const getChannelName = (channel: string) => {
+    const channelMap: Record<string, string> = {
+      douyin: "抖音",
+      kuaishou: "快手",
+      xiaohongshu: "小红书",
+      weibo: "微博",
+    }
+    return channelMap[channel] || channel
+  }
+
+  const channelName = getChannelName(params.channel)
+
+  useEffect(() => {
+    const fetchUsers = async () => {
+      // 模拟API调用
+      const mockUsers = Array.from({ length: 50 }, (_, i) => ({
+        id: `user-${i + 1}`,
+        avatar: "/placeholder.svg?height=40&width=40",
+        nickname: `用户${i + 1}`,
+        wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+        phone: `1${["3", "5", "7", "8", "9"][Math.floor(Math.random() * 5)]}${Array.from({ length: 9 }, () =>
+          Math.floor(Math.random() * 10),
+        ).join("")}`,
+        region: ["广东", "浙江", "江苏", "北京", "上海"][Math.floor(Math.random() * 5)],
+        note: ["感兴趣", "需要了解", "想购买", "咨询价格"][Math.floor(Math.random() * 4)],
+        status: searchParams.type === "added" ? "added" : ["pending", "added", "failed"][Math.floor(Math.random() * 3)],
+        addTime: new Date(Date.now() - Math.random() * 86400000 * 7).toLocaleString(),
+        source: params.channel,
+        tags: ["意向客户", "高活跃度", "新用户"][Math.floor(Math.random() * 3)].split(" "),
+      }))
+      setUsers(mockUsers)
+    }
+
+    fetchUsers()
+  }, [params.channel, searchParams.type])
+
+  const filteredUsers = users.filter((user) => {
+    const matchesSearch =
+      user.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.phone.includes(searchQuery)
+    const matchesStatus = statusFilter === "all" || user.status === statusFilter
+    return matchesSearch && matchesStatus
+  })
+
+  const paginatedUsers = filteredUsers.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+
+  const totalPages = Math.ceil(filteredUsers.length / itemsPerPage)
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">
+              {channelName}
+              {searchParams.type === "added" ? "已添加用户" : "获客用户"}
+            </h1>
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4 space-y-4">
+        <Card className="p-4">
+          <div className="space-y-4">
+            <div className="flex items-center space-x-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                <Input
+                  placeholder="搜索用户"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+              <Button variant="outline" size="icon">
+                <Filter className="h-4 w-4" />
+              </Button>
+              <Button variant="outline" size="icon">
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <Select value={statusFilter} onValueChange={setStatusFilter}>
+                <SelectTrigger className="w-[120px]">
+                  <SelectValue placeholder="全部状态" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部状态</SelectItem>
+                  <SelectItem value="pending">待处理</SelectItem>
+                  <SelectItem value="added">已添加</SelectItem>
+                  <SelectItem value="failed">已失败</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-4">
+              {paginatedUsers.map((user) => (
+                <Card key={user.id} className="p-4">
+                  <div className="flex items-start space-x-4">
+                    <img
+                      src={user.avatar || "/placeholder.svg"}
+                      alt={user.nickname}
+                      className="w-12 h-12 rounded-full"
+                    />
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center justify-between">
+                        <div className="font-medium truncate">{user.nickname}</div>
+                        <Badge
+                          variant={
+                            user.status === "added" ? "success" : user.status === "failed" ? "destructive" : "secondary"
+                          }
+                        >
+                          {user.status === "added" ? "已添加" : user.status === "failed" ? "已失败" : "待处理"}
+                        </Badge>
+                      </div>
+                      <div className="mt-1 text-sm text-gray-500">
+                        <div>微信号: {user.wechatId}</div>
+                        <div>手机号: {user.phone}</div>
+                        <div>地区: {user.region}</div>
+                        <div>添加时间: {user.addTime}</div>
+                      </div>
+                      <div className="mt-2 flex flex-wrap gap-2">
+                        {user.tags.map((tag, index) => (
+                          <Badge key={index} variant="outline">
+                            {tag}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              ))}
+            </div>
+
+            {totalPages > 1 && (
+              <Pagination>
+                <PaginationContent>
+                  <PaginationItem>
+                    <PaginationPrevious
+                      href="#"
+                      onClick={(e) => {
+                        e.preventDefault()
+                        setCurrentPage((prev) => Math.max(1, prev - 1))
+                      }}
+                    />
+                  </PaginationItem>
+                  {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                    <PaginationItem key={page}>
+                      <PaginationLink
+                        href="#"
+                        isActive={currentPage === page}
+                        onClick={(e) => {
+                          e.preventDefault()
+                          setCurrentPage(page)
+                        }}
+                      >
+                        {page}
+                      </PaginationLink>
+                    </PaginationItem>
+                  ))}
+                  <PaginationItem>
+                    <PaginationNext
+                      href="#"
+                      onClick={(e) => {
+                        e.preventDefault()
+                        setCurrentPage((prev) => Math.min(totalPages, prev + 1))
+                      }}
+                    />
+                  </PaginationItem>
+                </PaginationContent>
+              </Pagination>
+            )}
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/scenarios/api/loading.tsx b/app/scenarios/api/loading.tsx
new file mode 100644
index 0000000..8e6cac1
--- /dev/null
+++ b/app/scenarios/api/loading.tsx
@@ -0,0 +1,37 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+
+export default function Loading() {
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-2xl font-bold">API 接口管理</h1>
+        <Skeleton className="h-10 w-32" />
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {Array(6)
+          .fill(0)
+          .map((_, i) => (
+            <Card key={i}>
+              <CardHeader className="pb-2">
+                <Skeleton className="h-5 w-3/4 mb-2" />
+                <Skeleton className="h-4 w-1/2" />
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-5/6" />
+                  <Skeleton className="h-4 w-4/6" />
+                </div>
+                <div className="flex justify-between mt-4">
+                  <Skeleton className="h-8 w-20" />
+                  <Skeleton className="h-8 w-20" />
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+      </div>
+    </div>
+  )
+}
diff --git a/app/scenarios/api/page.tsx b/app/scenarios/api/page.tsx
new file mode 100644
index 0000000..dc42150
--- /dev/null
+++ b/app/scenarios/api/page.tsx
@@ -0,0 +1,373 @@
+"use client"
+
+import { useState } from "react"
+import { Plus, Filter, Search, RefreshCw, MoreVertical, Clock, Copy, Code } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import Link from "next/link"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { toast } from "@/components/ui/use-toast"
+import { useRouter } from "next/navigation"
+import type { Device } from "@/components/device-grid"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Badge } from "@/components/ui/badge" // Import Badge component
+
+interface Task {
+  id: string
+  name: string
+  status: "running" | "paused" | "completed"
+  stats: {
+    devices: number
+    customersPerDevice: number
+    totalCalls: number
+    successCalls: number
+    errorCalls: number
+    successRate: number
+  }
+  lastUpdated: string
+  executionTime: string
+  nextExecutionTime: string
+  trend: { date: string; calls: number; success: number }[]
+  deviceList: Device[]
+  apiInfo: {
+    endpoint: string
+    method: string
+    token: string
+  }
+}
+
+// 生成随机数据的辅助函数
+function generateRandomStats() {
+  const devices = Math.floor(Math.random() * 16) + 5
+  const customersPerDevice = Math.floor(Math.random() * 11) + 10
+  const totalCalls = Math.floor(Math.random() * 1000) + 500
+  const successCalls = Math.floor(totalCalls * (Math.random() * 0.3 + 0.6))
+  const errorCalls = totalCalls - successCalls
+
+  return {
+    devices,
+    customersPerDevice,
+    totalCalls,
+    successCalls,
+    errorCalls,
+    successRate: Math.round((successCalls / totalCalls) * 100),
+  }
+}
+
+export default function ApiPage() {
+  const [tasks, setTasks] = useState<Task[]>([
+    {
+      id: "1",
+      name: "APP加友接口",
+      status: "running",
+      stats: generateRandomStats(),
+      lastUpdated: "2024-02-09 15:30",
+      executionTime: "2024-02-09 17:24:10",
+      nextExecutionTime: "2024-02-09 17:25:36",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `2024-02-${String(i + 1).padStart(2, "0")}`,
+        calls: Math.floor(Math.random() * 100) + 50,
+        success: Math.floor(Math.random() * 80) + 40,
+      })),
+      deviceList: [],
+      apiInfo: {
+        endpoint: "https://api.ckb.quwanzhi.com/api/open/task/addFriend",
+        method: "POST",
+        token: "ckb_token_xxxxx",
+      },
+    },
+  ])
+
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null)
+  const [isApiDocsOpen, setIsApiDocsOpen] = useState(false)
+  const router = useRouter()
+
+  const toggleTaskStatus = (taskId: string) => {
+    setTasks(
+      tasks.map((task) => {
+        if (task.id === taskId) {
+          return {
+            ...task,
+            status: task.status === "running" ? "paused" : "running",
+          }
+        }
+        return task
+      }),
+    )
+  }
+
+  const copyTask = (taskId: string) => {
+    const taskToCopy = tasks.find((task) => task.id === taskId)
+    if (taskToCopy) {
+      const newTask = {
+        ...taskToCopy,
+        id: `${Date.now()}`,
+        name: `${taskToCopy.name} (副本)`,
+        stats: generateRandomStats(),
+        status: "paused" as const,
+        lastUpdated: new Date().toLocaleString(),
+      }
+      setTasks([...tasks, newTask])
+      toast({
+        title: "复制成功",
+        description: "已创建计划副本",
+      })
+    }
+  }
+
+  const handleTaskClick = (taskId: string) => {
+    router.push(`/scenarios/api/${taskId}/edit`)
+  }
+
+  const selectedTask = tasks.find((task) => task.id === selectedTaskId)
+
+  return (
+    <div className="flex-1 bg-gradient-to-b from-violet-50 to-white">
+      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
+        <div className="flex items-center justify-between p-4">
+          <h1 className="text-xl font-semibold text-violet-600">API获客</h1>
+          <div className="flex items-center space-x-2">
+            <Link href="/scenarios/api/new">
+              <Button className="bg-violet-600 hover:bg-violet-700">
+                <Plus className="h-4 w-4 mr-2" />
+                新建计划
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4">
+        <div className="mb-6">
+          <div className="flex items-center space-x-4 mb-4">
+            <div className="flex-1 relative">
+              <Search className="w-4 h-4 absolute left-3 top-3 text-gray-400" />
+              <Input className="pl-9" placeholder="搜索计划名称" />
+            </div>
+            <Button variant="outline" size="icon">
+              <Filter className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="icon">
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          {tasks.map((task) => (
+            <Card
+              key={task.id}
+              className="p-6 hover:shadow-lg transition-all cursor-pointer"
+              onClick={() => handleTaskClick(task.id)}
+            >
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center space-x-3">
+                  <h3 className="font-medium text-lg">{task.name}</h3>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className={`px-2 py-1 text-xs rounded-full ${
+                      task.status === "running"
+                        ? "bg-green-50 text-green-600"
+                        : task.status === "paused"
+                          ? "bg-yellow-50 text-yellow-600"
+                          : "bg-gray-50 text-gray-600"
+                    }`}
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      toggleTaskStatus(task.id)
+                    }}
+                  >
+                    {task.status === "running" ? "进行中" : task.status === "paused" ? "已暂停" : "已完成"}
+                  </Button>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      setIsApiDocsOpen(true)
+                    }}
+                  >
+                    <Code className="w-4 h-4 mr-2" />
+                    查看文档
+                  </Button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" onClick={(e) => e.stopPropagation()}>
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={() => router.push(`/scenarios/api/${task.id}/edit`)}>
+                        编辑计划
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => copyTask(task.id)}>
+                        <Copy className="w-4 h-4 mr-2" />
+                        复制计划
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>查看详情</DropdownMenuItem>
+                      <DropdownMenuItem className="text-red-600">删除计划</DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-4 gap-4 mb-4">
+                <div className="text-center p-3 bg-violet-50 rounded-lg">
+                  <div className="text-sm text-gray-500">总调用次数</div>
+                  <div className="text-lg font-semibold text-violet-600">{task.stats.totalCalls}</div>
+                </div>
+                <div className="text-center p-3 bg-violet-50 rounded-lg">
+                  <div className="text-sm text-gray-500">成功调用</div>
+                  <div className="text-lg font-semibold text-violet-600">{task.stats.successCalls}</div>
+                </div>
+                <div className="text-center p-3 bg-violet-50 rounded-lg">
+                  <div className="text-sm text-gray-500">失败调用</div>
+                  <div className="text-lg font-semibold text-violet-600">{task.stats.errorCalls}</div>
+                </div>
+                <div className="text-center p-3 bg-violet-50 rounded-lg">
+                  <div className="text-sm text-gray-500">成功率</div>
+                  <div className="text-lg font-semibold text-violet-600">{task.stats.successRate}%</div>
+                </div>
+              </div>
+
+              <div className="space-y-4">
+                <div className="h-40">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <LineChart data={task.trend}>
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="date" />
+                      <YAxis />
+                      <Tooltip />
+                      <Line type="monotone" dataKey="calls" name="调用次数" stroke="#8b5cf6" strokeWidth={2} />
+                      <Line type="monotone" dataKey="success" name="成功次数" stroke="#22c55e" strokeWidth={2} />
+                    </LineChart>
+                  </ResponsiveContainer>
+                </div>
+
+                <div className="flex items-center justify-between text-sm border-t pt-4">
+                  <div className="flex items-center space-x-2 text-gray-500">
+                    <Clock className="w-4 h-4" />
+                    <span>上次执行: {task.executionTime}</span>
+                  </div>
+                  <div className="flex items-center space-x-2 text-gray-500">
+                    <Clock className="w-4 h-4" />
+                    <span>下次执行: {task.nextExecutionTime}</span>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+
+      <Dialog open={isApiDocsOpen} onOpenChange={setIsApiDocsOpen}>
+        <DialogContent className="max-w-4xl">
+          <DialogHeader>
+            <DialogTitle>API 文档</DialogTitle>
+          </DialogHeader>
+          <Tabs defaultValue="overview" className="mt-4">
+            <TabsList className="grid w-full grid-cols-3">
+              <TabsTrigger value="overview">概述</TabsTrigger>
+              <TabsTrigger value="endpoints">接口列表</TabsTrigger>
+              <TabsTrigger value="examples">示例代码</TabsTrigger>
+            </TabsList>
+            <TabsContent value="overview" className="p-4">
+              <div className="space-y-4">
+                <h3 className="text-lg font-medium">概述</h3>
+                <p className="text-sm text-gray-600">本接口文档依照REST标准，请求头需要添加token作为鉴权。</p>
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <p className="text-sm font-medium">基础域名</p>
+                  <code className="text-sm text-violet-600">https://api.ckb.quwanzhi.com</code>
+                </div>
+              </div>
+            </TabsContent>
+            <TabsContent value="endpoints" className="p-4">
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-lg font-medium mb-4">手机微信号加友接口</h3>
+                  <div className="space-y-2">
+                    <div className="flex items-center space-x-2">
+                      <Badge variant="outline">POST</Badge> {/* Badge component used here */}
+                      <code className="text-sm">/api/open/task/addFriend</code>
+                    </div>
+                    <div className="bg-gray-50 p-4 rounded-lg">
+                      <p className="text-sm font-medium mb-2">请求参数</p>
+                      <table className="w-full text-sm">
+                        <thead>
+                          <tr className="text-left">
+                            <th>名称</th>
+                            <th>类型</th>
+                            <th>是否必填</th>
+                            <th>说明</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr>
+                            <td>phone</td>
+                            <td>string</td>
+                            <td>是</td>
+                            <td>手机或微信号</td>
+                          </tr>
+                          <tr>
+                            <td>tags</td>
+                            <td>string</td>
+                            <td>否</td>
+                            <td>标签</td>
+                          </tr>
+                          <tr>
+                            <td>taskId</td>
+                            <td>int</td>
+                            <td>是</td>
+                            <td>计划任务ID</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+            <TabsContent value="examples" className="p-4">
+              <div className="space-y-4">
+                <h3 className="text-lg font-medium">请求示例</h3>
+                <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
+                  <pre className="text-sm">
+                    {JSON.stringify(
+                      {
+                        phone: "18956545898",
+                        taskId: 593,
+                        tags: "90后,女生,美女",
+                      },
+                      null,
+                      2,
+                    )}
+                  </pre>
+                </div>
+                <h3 className="text-lg font-medium">返回示例</h3>
+                <div className="bg-gray-900 text-gray-100 p-4 rounded-lg">
+                  <pre className="text-sm">
+                    {JSON.stringify(
+                      {
+                        code: 10000,
+                        data: null,
+                        message: "操作成功",
+                      },
+                      null,
+                      2,
+                    )}
+                  </pre>
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/scenarios/loading.tsx b/app/scenarios/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/scenarios/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/scenarios/new/steps/BasicSettings.tsx b/app/scenarios/new/steps/BasicSettings.tsx
new file mode 100644
index 0000000..781a239
--- /dev/null
+++ b/app/scenarios/new/steps/BasicSettings.tsx
@@ -0,0 +1,79 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+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"
+
+export function BasicSettings({ onNext }: { onNext: () => void }) {
+  const [name, setName] = useState("")
+  const [description, setDescription] = useState("")
+  const [category, setCategory] = useState("")
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // 保存基本设置数据的逻辑
+    onNext()
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>基本设置</CardTitle>
+        <CardDescription>配置场景的基本信息</CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit}>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="name">场景名称</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="请输入场景名称"
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="category">场景类别</Label>
+            <Select value={category} onValueChange={setCategory} required>
+              <SelectTrigger id="category">
+                <SelectValue placeholder="选择场景类别" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="marketing">营销场景</SelectItem>
+                <SelectItem value="service">服务场景</SelectItem>
+                <SelectItem value="operation">运营场景</SelectItem>
+                <SelectItem value="sales">销售场景</SelectItem>
+                <SelectItem value="other">其他</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="description">场景描述</Label>
+            <Textarea
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="请输入场景描述"
+              rows={4}
+            />
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          <Button variant="outline" type="button">
+            取消
+          </Button>
+          <Button type="submit">下一步</Button>
+        </CardFooter>
+      </form>
+    </Card>
+  )
+}
diff --git a/app/scenarios/new/steps/FriendRequestSettings.tsx b/app/scenarios/new/steps/FriendRequestSettings.tsx
new file mode 100644
index 0000000..547c1df
--- /dev/null
+++ b/app/scenarios/new/steps/FriendRequestSettings.tsx
@@ -0,0 +1,98 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+
+export function FriendRequestSettings({ onBack, onNext }: { onBack: () => void; onNext: () => void }) {
+  const [enableFriendRequests, setEnableFriendRequests] = useState(false)
+  const [requestMessage, setRequestMessage] = useState("")
+  const [requestLimit, setRequestLimit] = useState("10")
+  const [requestInterval, setRequestInterval] = useState("daily")
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // 保存好友请求设置数据的逻辑
+    onNext()
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>好友请求设置</CardTitle>
+        <CardDescription>配置场景中的好友请求功能</CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit}>
+        <CardContent className="space-y-6">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="enable-friend-requests" className="flex flex-col space-y-1">
+              <span>启用好友请求</span>
+              <span className="font-normal text-sm text-muted-foreground">启用后将允许系统自动发送好友请求</span>
+            </Label>
+            <Switch
+              id="enable-friend-requests"
+              checked={enableFriendRequests}
+              onCheckedChange={setEnableFriendRequests}
+            />
+          </div>
+
+          {enableFriendRequests && (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="request-message">请求消息</Label>
+                <Textarea
+                  id="request-message"
+                  value={requestMessage}
+                  onChange={(e) => setRequestMessage(e.target.value)}
+                  placeholder="请输入好友请求附带的消息"
+                  rows={3}
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="request-limit">请求限制</Label>
+                  <Input
+                    id="request-limit"
+                    type="number"
+                    min="1"
+                    value={requestLimit}
+                    onChange={(e) => setRequestLimit(e.target.value)}
+                    placeholder="请求数量上限"
+                  />
+                </div>
+
+                <div className="space-y-2">
+                  <Label htmlFor="request-interval">请求频率</Label>
+                  <Select value={requestInterval} onValueChange={setRequestInterval}>
+                    <SelectTrigger id="request-interval">
+                      <SelectValue placeholder="选择请求频率" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="hourly">每小时</SelectItem>
+                      <SelectItem value="daily">每天</SelectItem>
+                      <SelectItem value="weekly">每周</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </>
+          )}
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          <Button variant="outline" type="button" onClick={onBack}>
+            上一步
+          </Button>
+          <Button type="submit">下一步</Button>
+        </CardFooter>
+      </form>
+    </Card>
+  )
+}
diff --git a/app/scenarios/new/steps/MessageSettings.tsx b/app/scenarios/new/steps/MessageSettings.tsx
new file mode 100644
index 0000000..fdb69fe
--- /dev/null
+++ b/app/scenarios/new/steps/MessageSettings.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+export function MessageSettings({ onBack, onNext }: { onBack: () => void; onNext: () => void }) {
+  const [enableMessages, setEnableMessages] = useState(false)
+  const [messageType, setMessageType] = useState("text")
+  const [messageContent, setMessageContent] = useState("")
+  const [messageSchedule, setMessageSchedule] = useState("immediate")
+  const [customTime, setCustomTime] = useState("")
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // 保存消息设置数据的逻辑
+    onNext()
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>消息设置</CardTitle>
+        <CardDescription>配置场景中的消息发送功能</CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit}>
+        <CardContent className="space-y-6">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="enable-messages" className="flex flex-col space-y-1">
+              <span>启用消息发送</span>
+              <span className="font-normal text-sm text-muted-foreground">启用后将允许系统自动发送消息</span>
+            </Label>
+            <Switch id="enable-messages" checked={enableMessages} onCheckedChange={setEnableMessages} />
+          </div>
+
+          {enableMessages && (
+            <>
+              <div className="space-y-2">
+                <Label>消息类型</Label>
+                <Tabs value={messageType} onValueChange={setMessageType}>
+                  <TabsList className="grid grid-cols-3">
+                    <TabsTrigger value="text">文本消息</TabsTrigger>
+                    <TabsTrigger value="image">图片消息</TabsTrigger>
+                    <TabsTrigger value="link">链接消息</TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="text" className="mt-4">
+                    <Textarea
+                      value={messageContent}
+                      onChange={(e) => setMessageContent(e.target.value)}
+                      placeholder="请输入文本消息内容"
+                      rows={4}
+                    />
+                  </TabsContent>
+                  <TabsContent value="image" className="mt-4">
+                    <div className="space-y-4">
+                      <Input type="file" accept="image/*" />
+                      <Textarea
+                        value={messageContent}
+                        onChange={(e) => setMessageContent(e.target.value)}
+                        placeholder="请输入图片描述（可选）"
+                        rows={2}
+                      />
+                    </div>
+                  </TabsContent>
+                  <TabsContent value="link" className="mt-4 space-y-4">
+                    <Input
+                      value={messageContent}
+                      onChange={(e) => setMessageContent(e.target.value)}
+                      placeholder="请输入链接地址"
+                    />
+                    <Textarea placeholder="请输入链接描述（可选）" rows={2} />
+                  </TabsContent>
+                </Tabs>
+              </div>
+
+              <div className="space-y-4">
+                <Label>发送时间</Label>
+                <Select value={messageSchedule} onValueChange={setMessageSchedule}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="选择发送时间" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="immediate">立即发送</SelectItem>
+                    <SelectItem value="scheduled">定时发送</SelectItem>
+                    <SelectItem value="triggered">触发发送</SelectItem>
+                  </SelectContent>
+                </Select>
+
+                {messageSchedule === "scheduled" && (
+                  <div className="pt-2">
+                    <Label htmlFor="custom-time">选择发送时间</Label>
+                    <Input
+                      id="custom-time"
+                      type="datetime-local"
+                      value={customTime}
+                      onChange={(e) => setCustomTime(e.target.value)}
+                      className="mt-2"
+                    />
+                  </div>
+                )}
+
+                {messageSchedule === "triggered" && (
+                  <div className="border rounded-md p-4 mt-2">
+                    <p className="text-sm text-muted-foreground">触发条件将在下一步配置</p>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          <Button variant="outline" type="button" onClick={onBack}>
+            上一步
+          </Button>
+          <Button type="submit">下一步</Button>
+        </CardFooter>
+      </form>
+    </Card>
+  )
+}
diff --git a/app/scenarios/new/steps/PosterEditor.tsx b/app/scenarios/new/steps/PosterEditor.tsx
new file mode 100644
index 0000000..e05867a
--- /dev/null
+++ b/app/scenarios/new/steps/PosterEditor.tsx
@@ -0,0 +1,478 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { Card, CardFooter } from "@/components/ui/card"
+import {
+  Upload,
+  PenTool,
+  Type,
+  QrCode,
+  ChevronRight,
+  ArrowRight,
+  Smartphone,
+  Monitor,
+  Tablet,
+  Save,
+  Share2,
+  Eye,
+} from "lucide-react"
+import { Switch } from "@/components/ui/switch"
+import { cn } from "@/lib/utils"
+
+const DEFAULT_TEMPLATES = [
+  {
+    id: "register",
+    name: "点击报名",
+    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E9%8E%B6%E3%83%A5%E6%82%95-vJDCYhJ9ENr8jN3YGP9jVeQ5Ub3czl.gif",
+    color: "#d32121",
+    textColor: "#ffffff",
+  },
+  {
+    id: "claim",
+    name: "点击领取",
+    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E6%A3%B0%E5%97%97%E5%BD%871-cskUmYR6oO0n4uHdZVeB4naKUSUilb.gif",
+    color: "#d32121",
+    textColor: "#ffffff",
+  },
+  {
+    id: "consult",
+    name: "点击咨询",
+    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E9%8D%9C%E3%84%A8%EE%87%97-OUtJxwRbr4ydYRjt8FLOCMELC16Vw6.gif",
+    color: "#d32121",
+    textColor: "#ffffff",
+  },
+  {
+    id: "checkin",
+    name: "点击签到",
+    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E7%BB%9B%E6%83%A7%E5%9F%8C-bYcTocSdNrcykfBXmt51q6D4Yzh26h.gif",
+    color: "#d32121",
+    textColor: "#ffffff",
+  },
+  {
+    id: "cooperation",
+    name: "点击合作",
+    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E9%8D%9A%E5%A0%9C%E7%B6%94-kisPT3kV9A0aB7YpxO6AHUZ8aHvFLT.gif",
+    color: "#d32121",
+    textColor: "#ffffff",
+  },
+  {
+    id: "learn",
+    name: "点击了解",
+    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E6%B5%9C%E5%97%9A%D0%92-iE654sFFuO1PuvwmccV67yVLQZoLcx.gif",
+    color: "#d32121",
+    textColor: "#ffffff",
+  },
+  {
+    id: "claim_static",
+    name: "点击领取(静态)",
+    src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/%E7%80%9B%E6%A8%BA%EE%85%B9%E7%80%B9%E6%BF%87%E6%8D%A3%E9%8E%B6_%E9%90%90%E7%91%B0%E5%9A%AE%E6%A3%B0%E5%97%97%E5%BD%87-jO6FPRCCzz6Irkm5suKeNkUDd98Y0f.png",
+    color: "#d32121",
+    textColor: "#ffffff",
+  },
+]
+
+export function PosterEditor({
+  onChange,
+  initialValue = null,
+}: {
+  onChange: (value: any) => void
+  initialValue?: any
+}) {
+  const [selectedTemplate, setSelectedTemplate] = useState(initialValue?.template || DEFAULT_TEMPLATES[0])
+  const [customText, setCustomText] = useState(initialValue?.customText || selectedTemplate.name)
+  const [mainColor, setMainColor] = useState(initialValue?.mainColor || selectedTemplate.color)
+  const [textColor, setTextColor] = useState(initialValue?.textColor || selectedTemplate.textColor)
+  const [hasQrCode, setHasQrCode] = useState(initialValue?.hasQrCode || false)
+  const [qrCodeUrl, setQrCodeUrl] = useState(initialValue?.qrCodeUrl || "")
+  const [offerText, setOfferText] = useState(initialValue?.offerText || "")
+  const [previewDevice, setPreviewDevice] = useState("mobile")
+  const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false)
+
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  // 当任何相关状态变化时更新父组件
+  useEffect(() => {
+    onChange({
+      template: selectedTemplate,
+      customText,
+      mainColor,
+      textColor,
+      hasQrCode,
+      qrCodeUrl,
+      offerText,
+    })
+  }, [selectedTemplate, customText, mainColor, textColor, hasQrCode, qrCodeUrl, offerText, onChange])
+
+  // 预览海报的渲染
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+
+    // 清空画布
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+    // 获取原始海报图像
+    const img = new Image()
+    img.crossOrigin = "anonymous"
+    img.src = selectedTemplate.src
+
+    img.onload = () => {
+      // 绘制原始海报
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+
+      // 自定义文本
+      if (customText !== selectedTemplate.name) {
+        // 首先绘制一个半透明背景，盖住原文字
+        ctx.fillStyle = "rgba(255, 255, 255, 0.85)"
+        ctx.fillRect(20, 30, canvas.width - 40, 150)
+
+        // 绘制自定义文字
+        ctx.fillStyle = mainColor
+        ctx.font = "bold 42px sans-serif"
+        ctx.textAlign = "center"
+        ctx.textBaseline = "middle"
+        ctx.fillText(customText, canvas.width / 2, 100)
+      }
+
+      // 如果添加了二维码
+      if (hasQrCode) {
+        // 添加一个二维码占位背景
+        ctx.fillStyle = "#ffffff"
+        ctx.fillRect(canvas.width - 120, canvas.height - 120, 100, 100)
+        ctx.strokeStyle = "#dddddd"
+        ctx.lineWidth = 1
+        ctx.strokeRect(canvas.width - 120, canvas.height - 120, 100, 100)
+
+        // 添加二维码图标占位
+        ctx.fillStyle = "#888888"
+        ctx.fillRect(canvas.width - 100, canvas.height - 100, 60, 60)
+
+        // 添加"扫码获取"文本
+        ctx.fillStyle = "#333333"
+        ctx.font = "14px sans-serif"
+        ctx.textAlign = "center"
+        ctx.fillText("扫码获取", canvas.width - 70, canvas.height - 20)
+      }
+
+      // 如果添加了优惠文本
+      if (offerText) {
+        // 添加一个醒目的优惠信息标签
+        ctx.fillStyle = "#ffeb3b"
+        ctx.beginPath()
+        ctx.moveTo(0, canvas.height - 200)
+        ctx.lineTo(200, canvas.height - 200)
+        ctx.lineTo(170, canvas.height - 150)
+        ctx.lineTo(0, canvas.height - 150)
+        ctx.closePath()
+        ctx.fill()
+
+        // 添加优惠文本
+        ctx.fillStyle = "#d32121"
+        ctx.font = "bold 18px sans-serif"
+        ctx.textAlign = "left"
+        ctx.fillText(offerText, 15, canvas.height - 175)
+      }
+    }
+  }, [selectedTemplate, customText, mainColor, hasQrCode, offerText])
+
+  return (
+    <div className="flex flex-col gap-6">
+      <h2 className="text-lg font-medium">海报编辑器</h2>
+
+      <Tabs defaultValue="design" className="w-full">
+        <TabsList className="w-full grid grid-cols-4">
+          <TabsTrigger value="design" className="flex items-center gap-1">
+            <PenTool className="h-4 w-4" />
+            设计
+          </TabsTrigger>
+          <TabsTrigger value="content" className="flex items-center gap-1">
+            <Type className="h-4 w-4" />
+            内容
+          </TabsTrigger>
+          <TabsTrigger value="interactive" className="flex items-center gap-1">
+            <QrCode className="h-4 w-4" />
+            互动
+          </TabsTrigger>
+          <TabsTrigger value="preview" className="flex items-center gap-1">
+            <Eye className="h-4 w-4" />
+            预览
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="design" className="space-y-4 pt-4">
+          <div>
+            <Label>选择模板</Label>
+            <div className="mt-2 flex justify-between">
+              <div className="w-24 h-40 bg-gray-100 rounded relative overflow-hidden">
+                {selectedTemplate && (
+                  <img
+                    src={selectedTemplate.src || "/placeholder.svg"}
+                    alt={selectedTemplate.name}
+                    className="object-cover w-full h-full"
+                  />
+                )}
+              </div>
+
+              <div className="ml-4 flex-1 flex flex-col justify-between">
+                <div>
+                  <h4 className="font-medium">{selectedTemplate?.name || "请选择模板"}</h4>
+                  <p className="text-sm text-gray-500 mt-1">点击右侧按钮选择其他模板</p>
+                </div>
+
+                <Dialog open={isTemplateDialogOpen} onOpenChange={setIsTemplateDialogOpen}>
+                  <DialogTrigger asChild>
+                    <Button variant="outline" className="mt-2">
+                      更换模板
+                      <ChevronRight className="ml-1 h-4 w-4" />
+                    </Button>
+                  </DialogTrigger>
+                  <DialogContent className="max-w-3xl">
+                    <DialogHeader>
+                      <DialogTitle>选择海报模板</DialogTitle>
+                    </DialogHeader>
+
+                    <div className="grid grid-cols-3 gap-4 max-h-[60vh] overflow-y-auto p-2">
+                      {DEFAULT_TEMPLATES.map((template) => (
+                        <Card
+                          key={template.id}
+                          className={cn(
+                            "overflow-hidden cursor-pointer transition-all transform hover:scale-105",
+                            selectedTemplate.id === template.id && "ring-2 ring-blue-500",
+                          )}
+                          onClick={() => {
+                            setSelectedTemplate(template)
+                            setCustomText(template.name)
+                            setMainColor(template.color)
+                            setTextColor(template.textColor)
+                            setIsTemplateDialogOpen(false)
+                          }}
+                        >
+                          <div className="aspect-[9/16] bg-gray-100 relative">
+                            <img
+                              src={template.src || "/placeholder.svg"}
+                              alt={template.name}
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                          <CardFooter className="p-2">
+                            <p className="text-sm text-center w-full">{template.name}</p>
+                          </CardFooter>
+                        </Card>
+                      ))}
+
+                      <Card className="overflow-hidden cursor-pointer transition-all transform hover:scale-105">
+                        <div className="aspect-[9/16] bg-gray-100 flex flex-col items-center justify-center text-gray-500">
+                          <Upload className="h-8 w-8 mb-2" />
+                          <p className="text-sm">上传自定义模板</p>
+                        </div>
+                        <CardFooter className="p-2">
+                          <p className="text-sm text-center w-full">自定义上传</p>
+                        </CardFooter>
+                      </Card>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <Label htmlFor="mainColor">主色调</Label>
+              <div className="flex mt-2">
+                <div className="w-10 h-8 rounded-l border" style={{ backgroundColor: mainColor }}></div>
+                <Input
+                  id="mainColor"
+                  type="text"
+                  value={mainColor}
+                  onChange={(e) => setMainColor(e.target.value)}
+                  className="rounded-l-none"
+                />
+              </div>
+            </div>
+
+            <div>
+              <Label htmlFor="textColor">文字颜色</Label>
+              <div className="flex mt-2">
+                <div className="w-10 h-8 rounded-l border" style={{ backgroundColor: textColor }}></div>
+                <Input
+                  id="textColor"
+                  type="text"
+                  value={textColor}
+                  onChange={(e) => setTextColor(e.target.value)}
+                  className="rounded-l-none"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Button variant="outline" size="sm">
+              重置样式
+            </Button>
+            <Button variant="outline" size="sm">
+              保存为模板
+            </Button>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="content" className="space-y-4 pt-4">
+          <div>
+            <Label htmlFor="customText">海报文字</Label>
+            <Input
+              id="customText"
+              value={customText}
+              onChange={(e) => setCustomText(e.target.value)}
+              className="mt-2"
+            />
+          </div>
+
+          <div>
+            <Label htmlFor="offerText">优惠信息(选填)</Label>
+            <Input
+              id="offerText"
+              value={offerText}
+              onChange={(e) => setOfferText(e.target.value)}
+              className="mt-2"
+              placeholder="例如: 限时8.5折 | 新人专享"
+            />
+            <p className="text-xs text-gray-500 mt-1">添加醒目的优惠信息，提升用户点击欲望</p>
+          </div>
+
+          <div>
+            <Label>推荐措辞</Label>
+            <div className="flex flex-wrap gap-2 mt-2">
+              {["限时特惠", "新人专享", "首单立减", "买一送一", "折扣优惠", "免费领取"].map((tag) => (
+                <Button key={tag} variant="outline" size="sm" onClick={() => setOfferText(tag)}>
+                  {tag}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="interactive" className="space-y-4 pt-4">
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <Label htmlFor="qrcode-switch" className="cursor-pointer">
+                添加二维码
+              </Label>
+              <p className="text-xs text-gray-500 mt-1">添加二维码提高用户转化率</p>
+            </div>
+            <Switch id="qrcode-switch" checked={hasQrCode} onCheckedChange={setHasQrCode} />
+          </div>
+
+          {hasQrCode && (
+            <div>
+              <Label htmlFor="qrcode-url">二维码链接(选填)</Label>
+              <Input
+                id="qrcode-url"
+                value={qrCodeUrl}
+                onChange={(e) => setQrCodeUrl(e.target.value)}
+                className="mt-2"
+                placeholder="输入链接或小程序路径"
+              />
+              <div className="mt-3 flex justify-between items-center">
+                <p className="text-sm">上传自定义二维码</p>
+                <Button variant="outline" size="sm" className="flex items-center">
+                  <Upload className="h-3 w-3 mr-1" />
+                  上传
+                </Button>
+              </div>
+            </div>
+          )}
+
+          <div className="border-t pt-4 mt-4">
+            <h4 className="font-medium mb-2">点击行为</h4>
+            <Select defaultValue="form">
+              <SelectTrigger>
+                <SelectValue placeholder="选择点击行为" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="form">填写表单</SelectItem>
+                <SelectItem value="qrcode">扫码添加</SelectItem>
+                <SelectItem value="call">拨打电话</SelectItem>
+                <SelectItem value="link">访问链接</SelectItem>
+              </SelectContent>
+            </Select>
+            <p className="text-xs text-gray-500 mt-2">设置用户点击海报后的行为</p>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="preview" className="space-y-4 pt-4">
+          <div className="flex justify-center space-x-2">
+            <Button
+              variant={previewDevice === "mobile" ? "default" : "outline"}
+              size="sm"
+              onClick={() => setPreviewDevice("mobile")}
+              className="flex items-center"
+            >
+              <Smartphone className="h-4 w-4 mr-1" />
+              手机
+            </Button>
+            <Button
+              variant={previewDevice === "tablet" ? "default" : "outline"}
+              size="sm"
+              onClick={() => setPreviewDevice("tablet")}
+              className="flex items-center"
+            >
+              <Tablet className="h-4 w-4 mr-1" />
+              平板
+            </Button>
+            <Button
+              variant={previewDevice === "desktop" ? "default" : "outline"}
+              size="sm"
+              onClick={() => setPreviewDevice("desktop")}
+              className="flex items-center"
+            >
+              <Monitor className="h-4 w-4 mr-1" />
+              电脑
+            </Button>
+          </div>
+
+          <div className="flex justify-center">
+            <div
+              className={cn(
+                "bg-gray-100 border flex items-center justify-center p-2",
+                previewDevice === "mobile" && "w-[320px] h-[568px]",
+                previewDevice === "tablet" && "w-[480px] h-[640px]",
+                previewDevice === "desktop" && "w-[640px] h-[480px] max-w-full",
+              )}
+            >
+              <canvas
+                ref={canvasRef}
+                width={300}
+                height={534}
+                className={cn("w-full h-full object-contain", previewDevice === "desktop" && "max-h-[90%]")}
+              />
+            </div>
+          </div>
+
+          <div className="flex justify-center gap-2 mt-4">
+            <Button variant="outline" size="sm" className="flex items-center">
+              <Save className="h-4 w-4 mr-1" />
+              保存
+            </Button>
+            <Button variant="outline" size="sm" className="flex items-center">
+              <Share2 className="h-4 w-4 mr-1" />
+              分享
+            </Button>
+            <Button className="flex items-center">
+              确认使用
+              <ArrowRight className="h-4 w-4 ml-1" />
+            </Button>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/app/scenarios/new/steps/TagSettings.tsx b/app/scenarios/new/steps/TagSettings.tsx
new file mode 100644
index 0000000..2081366
--- /dev/null
+++ b/app/scenarios/new/steps/TagSettings.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { X } from "lucide-react"
+
+export function TagSettings({ onBack, onComplete }: { onBack: () => void; onComplete: () => void }) {
+  const [enableTags, setEnableTags] = useState(false)
+  const [tagInput, setTagInput] = useState("")
+  const [tags, setTags] = useState<string[]>([])
+
+  const handleAddTag = () => {
+    if (tagInput.trim() && !tags.includes(tagInput.trim())) {
+      setTags([...tags, tagInput.trim()])
+      setTagInput("")
+    }
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      handleAddTag()
+    }
+  }
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    setTags(tags.filter((tag) => tag !== tagToRemove))
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    // 保存标签设置数据的逻辑
+    onComplete()
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>标签设置</CardTitle>
+        <CardDescription>配置场景的用户标签</CardDescription>
+      </CardHeader>
+      <form onSubmit={handleSubmit}>
+        <CardContent className="space-y-6">
+          <div className="flex items-center justify-between">
+            <Label htmlFor="enable-tags" className="flex flex-col space-y-1">
+              <span>启用用户标签</span>
+              <span className="font-normal text-sm text-muted-foreground">启用后将为场景中的用户添加标签</span>
+            </Label>
+            <Switch id="enable-tags" checked={enableTags} onCheckedChange={setEnableTags} />
+          </div>
+
+          {enableTags && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="tag-input">添加标签</Label>
+                <div className="flex space-x-2">
+                  <Input
+                    id="tag-input"
+                    value={tagInput}
+                    onChange={(e) => setTagInput(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder="输入标签名称并按回车"
+                  />
+                  <Button type="button" onClick={handleAddTag}>
+                    添加
+                  </Button>
+                </div>
+              </div>
+
+              <div>
+                <Label>已添加标签</Label>
+                <div className="flex flex-wrap gap-2 mt-2">
+                  {tags.length > 0 ? (
+                    tags.map((tag) => (
+                      <Badge key={tag} className="px-3 py-1 flex items-center gap-1">
+                        {tag}
+                        <X className="h-3 w-3 cursor-pointer" onClick={() => handleRemoveTag(tag)} />
+                      </Badge>
+                    ))
+                  ) : (
+                    <p className="text-sm text-muted-foreground">暂无标签</p>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          <Button variant="outline" type="button" onClick={onBack}>
+            上一步
+          </Button>
+          <Button type="submit">完成</Button>
+        </CardFooter>
+      </form>
+    </Card>
+  )
+}
diff --git a/app/scenarios/new/steps/TrafficChannelSettings b/app/scenarios/new/steps/TrafficChannelSettings
new file mode 100644
index 0000000..0dd41b5
--- /dev/null
+++ b/app/scenarios/new/steps/TrafficChannelSettings
@@ -0,0 +1,209 @@
+"use client"
+
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Plus, Pencil, Trash2, Link2 } from "lucide-react"
+import { toast } from "@/components/ui/use-toast"
+
+interface Channel {
+  id: string
+  name: string
+  type: "team" | "other"
+  link?: string
+}
+
+interface TrafficChannelSettingsProps {
+  formData: any
+  onChange: (data: any) => void
+  onNext: () => void
+  onPrev: () => void
+}
+
+function isValidUrl(string: string) {
+  try {
+    new URL(string)
+    return true
+  } catch (_) {
+    return false
+  }
+}
+
+export function TrafficChannelSettings({ formData, onChange, onNext, onPrev }: TrafficChannelSettingsProps) {
+  const [channels, setChannels] = useState<Channel[]>(formData.channels || [])
+  const [isAddChannelOpen, setIsAddChannelOpen] = useState(false)
+  const [editingChannel, setEditingChannel] = useState<Channel | null>(null)
+  const [newChannel, setNewChannel] = useState<Partial<Channel>>({
+    name: "",
+    type: "team",
+    link: "",
+  })
+
+  const handleAddChannel = () => {
+    if (!newChannel.name) return
+    if (newChannel.link && !isValidUrl(newChannel.link)) {
+      toast({
+        title: "错误",
+        description: "请输入有效的URL",
+        variant: "destructive",
+      })
+      return
+    }
+
+    if (editingChannel) {
+      setChannels(
+        channels.map((channel) => (channel.id === editingChannel.id ? { ...channel, ...newChannel } : channel)),
+      )
+    } else {
+      setChannels([
+        ...channels,
+        {
+          id: Date.now().toString(),
+          name: newChannel.name,
+          type: newChannel.type || "team",
+          link: newChannel.link,
+        } as Channel,
+      ])
+    }
+
+    setIsAddChannelOpen(false)
+    setNewChannel({ name: "", type: "team", link: "" })
+    setEditingChannel(null)
+    onChange({ ...formData, channels })
+  }
+
+  const handleEditChannel = (channel: Channel) => {
+    setEditingChannel(channel)
+    setNewChannel(channel)
+    setIsAddChannelOpen(true)
+  }
+
+  const handleDeleteChannel = (channelId: string) => {
+    setChannels(channels.filter((channel) => channel.id !== channelId))
+    onChange({ ...formData, channels: channels.filter((channel) => channel.id !== channelId) })
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <h2 className="text-lg font-semibold">流量通道设置</h2>
+          <Button onClick={() => setIsAddChannelOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            添加通道
+          </Button>
+        </div>
+
+        <div className="border rounded-lg">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>通道名称</TableHead>
+                <TableHead>类型</TableHead>
+                <TableHead>链接</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {channels.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={4} className="text-center py-8 text-gray-500">
+                    暂无数据
+                  </TableCell>
+                </TableRow>
+              ) : (
+                channels.map((channel) => (
+                  <TableRow key={channel.id}>
+                    <TableCell>{channel.name}</TableCell>
+                    <TableCell>{channel.type === "team" ? "打粉团队" : "其他"}</TableCell>
+                    <TableCell>
+                      {channel.link && (
+                        <div className="flex items-center space-x-2">
+                          <Link2 className="h-4 w-4" />
+                          <span className="text-blue-600">{channel.link}</span>
+                        </div>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end space-x-2">
+                        <Button variant="ghost" size="sm" onClick={() => handleEditChannel(channel)}>
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="sm" onClick={() => handleDeleteChannel(channel.id)}>
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        <div className="flex justify-between">
+          <Button variant="outline" onClick={onPrev}>
+            上一步
+          </Button>
+          <Button onClick={onNext}>完成</Button>
+        </div>
+      </div>
+
+      <Dialog open={isAddChannelOpen} onOpenChange={setIsAddChannelOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{editingChannel ? "编辑通道" : "添加通道"}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label>通道名称</Label>
+              <Input
+                value={newChannel.name}
+                onChange={(e) => setNewChannel({ ...newChannel, name: e.target.value })}
+                placeholder="请输入通道名称"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>通道类型</Label>
+              <Select
+                value={newChannel.type}
+                onValueChange={(value) => setNewChannel({ ...newChannel, type: value as "team" | "other" })}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="选择通道类型" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="team">打粉团队</SelectItem>
+                  <SelectItem value="other">其他</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <Label>通道链接（选填）</Label>
+              <Input
+                value={newChannel.link}
+                onChange={(e) => setNewChannel({ ...newChannel, link: e.target.value })}
+                placeholder="请输入通道链接"
+              />
+              {newChannel.link && !isValidUrl(newChannel.link) && (
+                <p className="text-sm text-red-500">请输入有效的URL</p>
+              )}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsAddChannelOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={handleAddChannel}>{editingChannel ? "保存" : "添加"}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  )
+}
diff --git a/app/scenarios/page.tsx b/app/scenarios/page.tsx
new file mode 100644
index 0000000..2044f14
--- /dev/null
+++ b/app/scenarios/page.tsx
@@ -0,0 +1,405 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { PieChart, BarChart, LineChart } from "@/components/charts"
+import {
+  Activity,
+  Filter,
+  Plus,
+  RefreshCw,
+  Search,
+  MessageSquare,
+  ShoppingCart,
+  FileText,
+  CreditCard,
+  Users,
+} from "lucide-react"
+
+export default function ScenariosPage() {
+  const [scenarioType, setScenarioType] = useState("all")
+  const [searchQuery, setSearchQuery] = useState("")
+
+  return (
+    <div className="container mx-auto p-4 space-y-6">
+      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold">场景管理</h1>
+          <p className="text-muted-foreground mt-1">管理和分析用户交互场景</p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            创建场景
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card className="bg-white shadow-sm">
+          <CardContent className="p-4 flex items-center">
+            <div className="bg-blue-100 p-2 rounded-full mr-3">
+              <MessageSquare className="h-5 w-5 text-blue-600" />
+            </div>
+            <div>
+              <div className="text-sm font-medium text-gray-600">场景总数</div>
+              <div className="text-xl font-bold">48</div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-white shadow-sm">
+          <CardContent className="p-4 flex items-center">
+            <div className="bg-green-100 p-2 rounded-full mr-3">
+              <Users className="h-5 w-5 text-green-600" />
+            </div>
+            <div>
+              <div className="text-sm font-medium text-gray-600">覆盖用户</div>
+              <div className="text-xl font-bold">98,765</div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-white shadow-sm">
+          <CardContent className="p-4 flex items-center">
+            <div className="bg-purple-100 p-2 rounded-full mr-3">
+              <Activity className="h-5 w-5 text-purple-600" />
+            </div>
+            <div>
+              <div className="text-sm font-medium text-gray-600">平均转化率</div>
+              <div className="text-xl font-bold">12.2%</div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="bg-white shadow-sm">
+          <CardContent className="p-4 flex items-center">
+            <div className="bg-amber-100 p-2 rounded-full mr-3">
+              <CreditCard className="h-5 w-5 text-amber-600" />
+            </div>
+            <div>
+              <div className="text-sm font-medium text-gray-600">平均客单价</div>
+              <div className="text-xl font-bold">¥1,850</div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card className="border-none shadow-md overflow-hidden">
+        <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b">
+          <div className="flex justify-between items-center">
+            <div>
+              <CardTitle>场景分析</CardTitle>
+              <CardDescription>场景类型、转化率和用户行为分析</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="p-4">
+          <Tabs defaultValue="overview" className="space-y-4">
+            <TabsList className="grid grid-cols-3 w-full">
+              <TabsTrigger value="overview">场景概览</TabsTrigger>
+              <TabsTrigger value="conversion">转化分析</TabsTrigger>
+              <TabsTrigger value="behavior">行为分析</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="overview" className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">场景类型分布</h3>
+                  <PieChart
+                    data={{
+                      labels: ["社交场景", "购物场景", "内容消费", "服务咨询", "金融场景"],
+                      datasets: [
+                        {
+                          data: [35, 30, 20, 10, 5],
+                          backgroundColor: [
+                            "rgb(59, 130, 246)",
+                            "rgb(16, 185, 129)",
+                            "rgb(249, 115, 22)",
+                            "rgb(139, 92, 246)",
+                            "rgb(156, 163, 175)",
+                          ],
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">场景使用趋势</h3>
+                  <LineChart
+                    data={{
+                      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+                      datasets: [
+                        {
+                          label: "社交场景",
+                          data: [25000, 27000, 28000, 30000, 32000, 35000, 38000],
+                          borderColor: "rgb(59, 130, 246)",
+                          backgroundColor: "rgba(59, 130, 246, 0.1)",
+                        },
+                        {
+                          label: "购物场景",
+                          data: [20000, 22000, 24000, 25000, 28000, 30000, 32000],
+                          borderColor: "rgb(16, 185, 129)",
+                          backgroundColor: "rgba(16, 185, 129, 0.1)",
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="conversion" className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">场景转化率</h3>
+                  <BarChart
+                    data={{
+                      labels: ["社交场景", "购物场景", "内容消费", "服务咨询", "金融场景"],
+                      datasets: [
+                        {
+                          label: "转化率(%)",
+                          data: [12.5, 18.7, 8.3, 6.2, 15.4],
+                          backgroundColor: "rgba(59, 130, 246, 0.8)",
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">转化率趋势</h3>
+                  <LineChart
+                    data={{
+                      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+                      datasets: [
+                        {
+                          label: "平均转化率",
+                          data: [8.5, 9.2, 10.1, 10.8, 11.5, 12.0, 12.2],
+                          borderColor: "rgb(59, 130, 246)",
+                          backgroundColor: "rgba(59, 130, 246, 0.1)",
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="behavior" className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">用户行为分布</h3>
+                  <PieChart
+                    data={{
+                      labels: ["浏览", "互动", "分享", "评论", "购买"],
+                      datasets: [
+                        {
+                          data: [45, 25, 15, 10, 5],
+                          backgroundColor: [
+                            "rgb(59, 130, 246)",
+                            "rgb(16, 185, 129)",
+                            "rgb(249, 115, 22)",
+                            "rgb(139, 92, 246)",
+                            "rgb(156, 163, 175)",
+                          ],
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+                <div className="bg-white p-4 rounded-lg shadow-sm">
+                  <h3 className="text-lg font-medium mb-3">用户停留时间</h3>
+                  <BarChart
+                    data={{
+                      labels: ["社交场景", "购物场景", "内容消费", "服务咨询", "金融场景"],
+                      datasets: [
+                        {
+                          label: "平均停留时间(分钟)",
+                          data: [12.5, 8.7, 15.3, 6.2, 4.4],
+                          backgroundColor: "rgba(59, 130, 246, 0.8)",
+                        },
+                      ],
+                    }}
+                    height={220}
+                  />
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      <Card className="border-none shadow-md overflow-hidden">
+        <CardHeader className="bg-white border-b">
+          <div className="flex justify-between items-center">
+            <div>
+              <CardTitle>场景列表</CardTitle>
+              <CardDescription>查看和管理所有场景</CardDescription>
+            </div>
+            <div className="flex items-center space-x-2">
+              <div className="relative">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  type="search"
+                  placeholder="搜索场景..."
+                  className="pl-8 w-[200px] md:w-[300px]"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+              <Select value={scenarioType} onValueChange={setScenarioType}>
+                <SelectTrigger className="w-[150px]">
+                  <SelectValue placeholder="场景类型" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部类型</SelectItem>
+                  <SelectItem value="social">社交场景</SelectItem>
+                  <SelectItem value="shopping">购物场景</SelectItem>
+                  <SelectItem value="content">内容消费</SelectItem>
+                  <SelectItem value="service">服务咨询</SelectItem>
+                  <SelectItem value="finance">金融场景</SelectItem>
+                </SelectContent>
+              </Select>
+              <Button variant="outline" size="icon">
+                <Filter className="h-4 w-4" />
+              </Button>
+              <Button variant="outline" size="icon">
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="bg-gray-50">
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">场景ID</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">场景名称</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">场景类型</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">覆盖用户</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">转化率</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">创建时间</th>
+                  <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">操作</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y">
+                {[
+                  {
+                    id: "SCN-001",
+                    name: "社交互动推荐",
+                    type: "社交场景",
+                    users: 25678,
+                    conversion: 12.5,
+                    created: "2023-05-15",
+                  },
+                  {
+                    id: "SCN-002",
+                    name: "商品购买流程",
+                    type: "购物场景",
+                    users: 18765,
+                    conversion: 18.7,
+                    created: "2023-05-20",
+                  },
+                  {
+                    id: "SCN-003",
+                    name: "视频内容推荐",
+                    type: "内容消费",
+                    users: 32456,
+                    conversion: 8.3,
+                    created: "2023-06-01",
+                  },
+                  {
+                    id: "SCN-004",
+                    name: "客服咨询入口",
+                    type: "服务咨询",
+                    users: 12345,
+                    conversion: 6.2,
+                    created: "2023-06-10",
+                  },
+                  {
+                    id: "SCN-005",
+                    name: "支付流程优化",
+                    type: "金融场景",
+                    users: 8765,
+                    conversion: 15.4,
+                    created: "2023-06-15",
+                  },
+                  {
+                    id: "SCN-006",
+                    name: "社区讨论互动",
+                    type: "社交场景",
+                    users: 15432,
+                    conversion: 10.8,
+                    created: "2023-06-20",
+                  },
+                  {
+                    id: "SCN-007",
+                    name: "促销活动推荐",
+                    type: "购物场景",
+                    users: 21345,
+                    conversion: 16.2,
+                    created: "2023-06-25",
+                  },
+                  {
+                    id: "SCN-008",
+                    name: "文章阅读推荐",
+                    type: "内容消费",
+                    users: 18765,
+                    conversion: 7.5,
+                    created: "2023-07-01",
+                  },
+                  {
+                    id: "SCN-009",
+                    name: "问题反馈流程",
+                    type: "服务咨询",
+                    users: 9876,
+                    conversion: 5.8,
+                    created: "2023-07-05",
+                  },
+                  {
+                    id: "SCN-010",
+                    name: "会员充值流程",
+                    type: "金融场景",
+                    users: 6543,
+                    conversion: 14.2,
+                    created: "2023-07-10",
+                  },
+                ].map((scenario) => (
+                  <tr key={scenario.id} className="hover:bg-gray-50">
+                    <td className="px-4 py-3 text-sm">{scenario.id}</td>
+                    <td className="px-4 py-3 text-sm font-medium">{scenario.name}</td>
+                    <td className="px-4 py-3 text-sm">
+                      <div className="flex items-center">
+                        {scenario.type === "社交场景" && <MessageSquare className="h-4 w-4 mr-1 text-blue-500" />}
+                        {scenario.type === "购物场景" && <ShoppingCart className="h-4 w-4 mr-1 text-green-500" />}
+                        {scenario.type === "内容消费" && <FileText className="h-4 w-4 mr-1 text-orange-500" />}
+                        {scenario.type === "服务咨询" && <Users className="h-4 w-4 mr-1 text-purple-500" />}
+                        {scenario.type === "金融场景" && <CreditCard className="h-4 w-4 mr-1 text-amber-500" />}
+                        {scenario.type}
+                      </div>
+                    </td>
+                    <td className="px-4 py-3 text-sm">{scenario.users.toLocaleString()}</td>
+                    <td className="px-4 py-3 text-sm">{scenario.conversion}%</td>
+                    <td className="px-4 py-3 text-sm">{scenario.created}</td>
+                    <td className="px-4 py-3 text-sm">
+                      <Button variant="ghost" size="sm">
+                        详情
+                      </Button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/scenarios/phone/edit/[id]/page.tsx b/app/scenarios/phone/edit/[id]/page.tsx
new file mode 100644
index 0000000..64817b4
--- /dev/null
+++ b/app/scenarios/phone/edit/[id]/page.tsx
@@ -0,0 +1,401 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { ChevronLeft, Phone, MessageSquare, Settings, Users } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Textarea } from "@/components/ui/textarea"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { useRouter } from "next/navigation"
+import { toast } from "@/components/ui/use-toast"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+export default function EditPhoneAcquisitionPlan({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [loading, setLoading] = useState(true)
+  const [formData, setFormData] = useState({
+    planName: "",
+    phoneNumbers: ["400-123-4567"],
+    autoAddEnabled: true,
+    speechToTextEnabled: true,
+    questionExtractionEnabled: true,
+    greetingMessage: "",
+    followUpMessages: [],
+    addToGroups: [],
+    tags: [],
+  })
+
+  useEffect(() => {
+    // 模拟从API获取计划数据
+    const fetchPlanData = async () => {
+      try {
+        // 这里应该是实际的API调用
+        const mockData = {
+          planName: "招商电话获客",
+          phoneNumbers: ["400-123-4567"],
+          autoAddEnabled: true,
+          speechToTextEnabled: true,
+          questionExtractionEnabled: true,
+          greetingMessage: "您好，感谢您的来电咨询，我稍后会添加您为好友，为您提供更详细的资料。",
+          followUpMessages: [
+            "您好，我是XX公司的客服，刚才接到您的电话，现在方便聊一下吗？",
+            "关于您刚才咨询的问题，我这边整理了一些资料，希望对您有所帮助。",
+          ],
+          addToGroups: ["产品咨询群", "招商合作群"],
+          tags: ["电话咨询", "招商意向"],
+        }
+        setFormData(mockData)
+        setLoading(false)
+      } catch (error) {
+        toast({
+          title: "加载失败",
+          description: "获取计划数据失败，请重试",
+          variant: "destructive",
+        })
+        setLoading(false)
+      }
+    }
+
+    fetchPlanData()
+  }, [])
+
+  const handleSave = async () => {
+    try {
+      // 这里应该是实际的API调用
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      toast({
+        title: "保存成功",
+        description: "电话获客计划已更新",
+      })
+      router.push(`/scenarios/phone`)
+    } catch (error) {
+      toast({
+        title: "保存失败",
+        description: "更新计划失败，请重试",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const handleAddPhoneNumber = () => {
+    setFormData({
+      ...formData,
+      phoneNumbers: [...formData.phoneNumbers, ""],
+    })
+  }
+
+  const handlePhoneNumberChange = (index: number, value: string) => {
+    const updatedPhoneNumbers = [...formData.phoneNumbers]
+    updatedPhoneNumbers[index] = value
+    setFormData({
+      ...formData,
+      phoneNumbers: updatedPhoneNumbers,
+    })
+  }
+
+  const handleRemovePhoneNumber = (index: number) => {
+    const updatedPhoneNumbers = [...formData.phoneNumbers]
+    updatedPhoneNumbers.splice(index, 1)
+    setFormData({
+      ...formData,
+      phoneNumbers: updatedPhoneNumbers,
+    })
+  }
+
+  const handleAddFollowUpMessage = () => {
+    setFormData({
+      ...formData,
+      followUpMessages: [...formData.followUpMessages, ""],
+    })
+  }
+
+  const handleFollowUpMessageChange = (index: number, value: string) => {
+    const updatedMessages = [...formData.followUpMessages]
+    updatedMessages[index] = value
+    setFormData({
+      ...formData,
+      followUpMessages: updatedMessages,
+    })
+  }
+
+  const handleRemoveFollowUpMessage = (index: number) => {
+    const updatedMessages = [...formData.followUpMessages]
+    updatedMessages.splice(index, 1)
+    setFormData({
+      ...formData,
+      followUpMessages: updatedMessages,
+    })
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
+          <p className="mt-2 text-gray-600">加载中...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <div className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col">
+        <header className="sticky top-0 z-10 bg-white border-b">
+          <div className="flex items-center h-14 px-4">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="ml-2 text-lg font-medium">编辑电话获客计划</h1>
+          </div>
+        </header>
+
+        <div className="flex-1 p-4">
+          <Tabs defaultValue="basic" className="w-full">
+            <TabsList className="grid w-full grid-cols-3 mb-4">
+              <TabsTrigger value="basic">
+                <Phone className="h-4 w-4 mr-2" />
+                基础设置
+              </TabsTrigger>
+              <TabsTrigger value="message">
+                <MessageSquare className="h-4 w-4 mr-2" />
+                消息设置
+              </TabsTrigger>
+              <TabsTrigger value="advanced">
+                <Settings className="h-4 w-4 mr-2" />
+                高级设置
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="basic" className="space-y-4">
+              <Card className="p-4">
+                <div className="space-y-4">
+                  <div>
+                    <Label htmlFor="planName">计划名称</Label>
+                    <Input
+                      id="planName"
+                      value={formData.planName}
+                      onChange={(e) => setFormData({ ...formData, planName: e.target.value })}
+                      className="mt-1"
+                    />
+                  </div>
+
+                  <div>
+                    <Label>接听电话</Label>
+                    <div className="space-y-2 mt-1">
+                      {formData.phoneNumbers.map((phone, index) => (
+                        <div key={index} className="flex items-center space-x-2">
+                          <Input
+                            value={phone}
+                            onChange={(e) => handlePhoneNumberChange(index, e.target.value)}
+                            placeholder="输入电话号码"
+                          />
+                          {formData.phoneNumbers.length > 1 && (
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleRemovePhoneNumber(index)}
+                              className="text-red-500 hover:text-red-700"
+                            >
+                              删除
+                            </Button>
+                          )}
+                        </div>
+                      ))}
+                      <Button variant="outline" size="sm" onClick={handleAddPhoneNumber}>
+                        添加电话号码
+                      </Button>
+                    </div>
+                  </div>
+
+                  <div className="space-y-4">
+                    <div className="flex items-center justify-between">
+                      <div className="space-y-0.5">
+                        <Label htmlFor="auto-add">自动添加客户</Label>
+                        <p className="text-xs text-gray-500">来电后自动将客户添加为微信好友</p>
+                      </div>
+                      <Switch
+                        id="auto-add"
+                        checked={formData.autoAddEnabled}
+                        onCheckedChange={(checked) => setFormData({ ...formData, autoAddEnabled: checked })}
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div className="space-y-0.5">
+                        <Label htmlFor="speech-to-text">语音转文字</Label>
+                        <p className="text-xs text-gray-500">自动将通话内容转换为文字记录</p>
+                      </div>
+                      <Switch
+                        id="speech-to-text"
+                        checked={formData.speechToTextEnabled}
+                        onCheckedChange={(checked) => setFormData({ ...formData, speechToTextEnabled: checked })}
+                      />
+                    </div>
+
+                    <div className="flex items-center justify-between">
+                      <div className="space-y-0.5">
+                        <Label htmlFor="question-extraction">问题提取</Label>
+                        <p className="text-xs text-gray-500">自动从通话中提取客户的首句问题</p>
+                      </div>
+                      <Switch
+                        id="question-extraction"
+                        checked={formData.questionExtractionEnabled}
+                        onCheckedChange={(checked) => setFormData({ ...formData, questionExtractionEnabled: checked })}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="message" className="space-y-4">
+              <Card className="p-4">
+                <div className="space-y-4">
+                  <div>
+                    <Label htmlFor="greeting">添加好友后的问候语</Label>
+                    <Textarea
+                      id="greeting"
+                      value={formData.greetingMessage}
+                      onChange={(e) => setFormData({ ...formData, greetingMessage: e.target.value })}
+                      placeholder="输入添加好友后的问候语"
+                      className="mt-1 min-h-[100px]"
+                    />
+                  </div>
+
+                  <div>
+                    <Label>后续跟进消息</Label>
+                    <div className="space-y-2 mt-1">
+                      {formData.followUpMessages.map((message, index) => (
+                        <div key={index} className="space-y-1">
+                          <div className="flex items-center justify-between">
+                            <Label className="text-sm">消息 {index + 1}</Label>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleRemoveFollowUpMessage(index)}
+                              className="text-red-500 hover:text-red-700"
+                            >
+                              删除
+                            </Button>
+                          </div>
+                          <Textarea
+                            value={message}
+                            onChange={(e) => handleFollowUpMessageChange(index, e.target.value)}
+                            placeholder="输入跟进消息内容"
+                            className="min-h-[80px]"
+                          />
+                        </div>
+                      ))}
+                      <Button variant="outline" size="sm" onClick={handleAddFollowUpMessage}>
+                        添加跟进消息
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="advanced" className="space-y-4">
+              <Card className="p-4">
+                <div className="space-y-4">
+                  <div>
+                    <Label>添加到群组</Label>
+                    <Select
+                      value={formData.addToGroups.length > 0 ? "selected" : "none"}
+                      onValueChange={(value) => {
+                        if (value === "none") {
+                          setFormData({ ...formData, addToGroups: [] })
+                        }
+                      }}
+                    >
+                      <SelectTrigger className="mt-1">
+                        <SelectValue placeholder="选择群组" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">不添加到群组</SelectItem>
+                        <SelectItem value="selected">已选择 {formData.addToGroups.length} 个群组</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    {formData.addToGroups.length > 0 && (
+                      <div className="mt-2 flex flex-wrap gap-2">
+                        {formData.addToGroups.map((group, index) => (
+                          <div
+                            key={index}
+                            className="flex items-center bg-blue-50 text-blue-700 rounded-full px-3 py-1"
+                          >
+                            <Users className="h-3 w-3 mr-1" />
+                            <span className="text-sm">{group}</span>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="ml-1 p-0 h-4 w-4 rounded-full"
+                              onClick={() => {
+                                const updatedGroups = [...formData.addToGroups]
+                                updatedGroups.splice(index, 1)
+                                setFormData({ ...formData, addToGroups: updatedGroups })
+                              }}
+                            >
+                              ×
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+
+                  <div>
+                    <Label>标签设置</Label>
+                    <div className="mt-2 flex flex-wrap gap-2">
+                      {formData.tags.map((tag, index) => (
+                        <div key={index} className="flex items-center bg-gray-100 rounded-full px-3 py-1">
+                          <span className="text-sm">{tag}</span>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="ml-1 p-0 h-4 w-4 rounded-full"
+                            onClick={() => {
+                              const updatedTags = [...formData.tags]
+                              updatedTags.splice(index, 1)
+                              setFormData({ ...formData, tags: updatedTags })
+                            }}
+                          >
+                            ×
+                          </Button>
+                        </div>
+                      ))}
+                      <Input
+                        placeholder="添加标签"
+                        className="w-32"
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" && e.currentTarget.value) {
+                            e.preventDefault()
+                            setFormData({
+                              ...formData,
+                              tags: [...formData.tags, e.currentTarget.value],
+                            })
+                            e.currentTarget.value = ""
+                          }
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </div>
+
+        <div className="sticky bottom-0 left-0 right-0 bg-white border-t p-4">
+          <Button className="w-full" onClick={handleSave}>
+            保存
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/scenarios/phone/page.tsx b/app/scenarios/phone/page.tsx
new file mode 100644
index 0000000..e3afa7d
--- /dev/null
+++ b/app/scenarios/phone/page.tsx
@@ -0,0 +1,571 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, MoreVertical, Copy, Pencil, Trash2, Phone, Mic, Clock, Settings } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts"
+import { useRouter } from "next/navigation"
+import { Badge } from "@/components/ui/badge"
+import { toast } from "@/components/ui/use-toast"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
+
+interface Task {
+  id: string
+  name: string
+  status: "running" | "paused" | "completed"
+  stats: {
+    calls: number
+    acquired: number
+    added: number
+  }
+  lastUpdated: string
+  trend: { date: string; calls: number }[]
+}
+
+interface CallRecord {
+  id: string
+  phoneNumber: string
+  duration: string
+  time: string
+  status: "已添加" | "未添加" | "处理中"
+  question: string
+}
+
+export default function PhoneAcquisitionPage() {
+  const router = useRouter()
+
+  const [tasks, setTasks] = useState<Task[]>([
+    {
+      id: "1",
+      name: "招商电话获客",
+      status: "running",
+      stats: {
+        calls: 42,
+        acquired: 38,
+        added: 31,
+      },
+      lastUpdated: "2024-03-18 15:30",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `3月${String(i + 12)}日`,
+        calls: Math.floor(Math.random() * 10) + 5,
+      })),
+    },
+  ])
+
+  const [callRecords, setCallRecords] = useState<CallRecord[]>([
+    {
+      id: "call-1",
+      phoneNumber: "138****1234",
+      duration: "3分42秒",
+      time: "2024-03-18 15:30",
+      status: "已添加",
+      question: "请问贵公司的产品有什么特点？",
+    },
+    {
+      id: "call-2",
+      phoneNumber: "139****5678",
+      duration: "5分18秒",
+      time: "2024-03-18 14:15",
+      status: "已添加",
+      question: "你们的合作方式是怎样的？",
+    },
+    {
+      id: "call-3",
+      phoneNumber: "137****9012",
+      duration: "2分55秒",
+      time: "2024-03-18 11:22",
+      status: "已添加",
+      question: "能详细介绍一下你们的服务吗？",
+    },
+    {
+      id: "call-4",
+      phoneNumber: "135****3456",
+      duration: "4分10秒",
+      time: "2024-03-17 16:45",
+      status: "已添加",
+      question: "你们有什么优惠政策？",
+    },
+    {
+      id: "call-5",
+      phoneNumber: "136****7890",
+      duration: "1分30秒",
+      time: "2024-03-17 10:20",
+      status: "未添加",
+      question: "未识别到有效问题",
+    },
+  ])
+
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
+  const [autoAddEnabled, setAutoAddEnabled] = useState(true)
+  const [speechToTextEnabled, setSpeechToTextEnabled] = useState(true)
+  const [questionExtractionEnabled, setQuestionExtractionEnabled] = useState(true)
+  const [isCallDetailOpen, setIsCallDetailOpen] = useState(false)
+  const [selectedCall, setSelectedCall] = useState<CallRecord | null>(null)
+
+  const toggleTaskStatus = (taskId: string) => {
+    setTasks(
+      tasks.map((task) => {
+        if (task.id === taskId) {
+          const newStatus = task.status === "running" ? "paused" : "running"
+          return { ...task, status: newStatus }
+        }
+        return task
+      }),
+    )
+  }
+
+  const handleEditPlan = (taskId: string) => {
+    router.push(`/scenarios/phone/edit/${taskId}`)
+  }
+
+  const handleCopyPlan = (taskId: string) => {
+    const taskToCopy = tasks.find((task) => task.id === taskId)
+    if (taskToCopy) {
+      const newTask = {
+        ...taskToCopy,
+        id: `${Date.now()}`,
+        name: `${taskToCopy.name} (副本)`,
+        status: "paused" as const,
+      }
+      setTasks([...tasks, newTask])
+      toast({
+        title: "计划已复制",
+        description: `已成功复制"${taskToCopy.name}"`,
+      })
+    }
+  }
+
+  const handleDeletePlan = (taskId: string) => {
+    const taskToDelete = tasks.find((t) => t.id === taskId)
+    if (taskToDelete) {
+      setTasks(tasks.filter((t) => t.id !== taskId))
+      toast({
+        title: "计划已删除",
+        description: `已成功删除"${taskToDelete.name}"`,
+      })
+    }
+  }
+
+  const handleViewCallDetail = (call: CallRecord) => {
+    setSelectedCall(call)
+    setIsCallDetailOpen(true)
+  }
+
+  // 计算通过率
+  const calculatePassRate = (acquired: number, added: number) => {
+    if (acquired === 0) return 0
+    return Math.round((added / acquired) * 100)
+  }
+
+  return (
+    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
+      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
+        <div className="flex items-center p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-xl font-semibold text-blue-600">电话获客</h1>
+          </div>
+          <Button variant="ghost" size="icon" className="ml-auto" onClick={() => setIsSettingsOpen(true)}>
+            <Settings className="h-5 w-5" />
+          </Button>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-7xl mx-auto">
+        {tasks.map((task) => {
+          const { calls: callCount, acquired: acquiredCount, added: addedCount } = task.stats
+          const passRate = calculatePassRate(acquiredCount, addedCount)
+
+          return (
+            <Card key={task.id} className="p-6 hover:shadow-lg transition-all mb-4 bg-white/80 backdrop-blur-sm">
+              <div className="flex items-center justify-between mb-6">
+                <div className="flex items-center space-x-3">
+                  <h3 className="font-medium text-lg">{task.name}</h3>
+                  <Badge
+                    variant={task.status === "running" ? "success" : "secondary"}
+                    className="cursor-pointer hover:opacity-80"
+                    onClick={() => toggleTaskStatus(task.id)}
+                  >
+                    {task.status === "running" ? "进行中" : "已暂停"}
+                  </Badge>
+                </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-gray-100 rounded-full z-10">
+                      <MoreVertical className="h-4 w-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-48 z-50">
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleEditPlan(task.id)
+                      }}
+                      className="cursor-pointer hover:bg-blue-50"
+                    >
+                      <Pencil className="w-4 h-4 mr-2" />
+                      编辑计划
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleCopyPlan(task.id)
+                      }}
+                      className="cursor-pointer hover:bg-blue-50"
+                    >
+                      <Copy className="w-4 h-4 mr-2" />
+                      复制计划
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleDeletePlan(task.id)
+                      }}
+                      className="text-red-600 cursor-pointer hover:bg-red-50"
+                    >
+                      <Trash2 className="w-4 h-4 mr-2" />
+                      删除计划
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+
+              <div className="grid grid-cols-4 gap-2 mb-4">
+                <Card className="p-2">
+                  <div className="text-sm text-gray-500 mb-1">来电数</div>
+                  <div className="text-2xl font-semibold">{callCount}</div>
+                </Card>
+
+                <Card className="p-2">
+                  <div className="text-sm text-gray-500 mb-1">已获客</div>
+                  <div className="text-2xl font-semibold">{acquiredCount}</div>
+                </Card>
+
+                <Card className="p-2">
+                  <div className="text-sm text-gray-500 mb-1">已添加</div>
+                  <div className="text-2xl font-semibold">{addedCount}</div>
+                </Card>
+
+                <Card className="p-2">
+                  <div className="text-sm text-gray-500 mb-1">通过率</div>
+                  <div className="text-2xl font-semibold">{passRate}%</div>
+                </Card>
+              </div>
+
+              <div className="h-48 bg-white rounded-lg p-4 mb-4">
+                <ResponsiveContainer width="100%" height="100%">
+                  <LineChart data={task.trend}>
+                    <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+                    <XAxis dataKey="date" stroke="#666" />
+                    <YAxis stroke="#666" />
+                    <Tooltip
+                      contentStyle={{
+                        backgroundColor: "white",
+                        border: "1px solid #e5e7eb",
+                        borderRadius: "6px",
+                      }}
+                    />
+                    <Line
+                      type="monotone"
+                      dataKey="calls"
+                      name="来电数"
+                      stroke="#3b82f6"
+                      strokeWidth={2}
+                      dot={{ fill: "#3b82f6" }}
+                    />
+                  </LineChart>
+                </ResponsiveContainer>
+              </div>
+
+              <div className="mt-6">
+                <Tabs defaultValue="all" className="w-full">
+                  <TabsList className="w-full mb-4">
+                    <TabsTrigger value="all" className="flex-1">
+                      全部来电
+                    </TabsTrigger>
+                    <TabsTrigger value="added" className="flex-1">
+                      已添加
+                    </TabsTrigger>
+                    <TabsTrigger value="pending" className="flex-1">
+                      未添加
+                    </TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent value="all">
+                    <div className="rounded-lg border overflow-hidden">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>电话号码</TableHead>
+                            <TableHead>通话时长</TableHead>
+                            <TableHead>来电时间</TableHead>
+                            <TableHead>状态</TableHead>
+                            <TableHead>首句问题</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {callRecords.map((record) => (
+                            <TableRow
+                              key={record.id}
+                              className="cursor-pointer hover:bg-gray-50"
+                              onClick={() => handleViewCallDetail(record)}
+                            >
+                              <TableCell className="font-medium">{record.phoneNumber}</TableCell>
+                              <TableCell>{record.duration}</TableCell>
+                              <TableCell>{record.time}</TableCell>
+                              <TableCell>
+                                <Badge
+                                  variant={
+                                    record.status === "已添加"
+                                      ? "success"
+                                      : record.status === "处理中"
+                                        ? "outline"
+                                        : "secondary"
+                                  }
+                                >
+                                  {record.status}
+                                </Badge>
+                              </TableCell>
+                              <TableCell className="max-w-[200px] truncate">
+                                {record.question || "未识别到问题"}
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="added">
+                    <div className="rounded-lg border overflow-hidden">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>电话号码</TableHead>
+                            <TableHead>通话时长</TableHead>
+                            <TableHead>来电时间</TableHead>
+                            <TableHead>状态</TableHead>
+                            <TableHead>首句问题</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {callRecords
+                            .filter((record) => record.status === "已添加")
+                            .map((record) => (
+                              <TableRow
+                                key={record.id}
+                                className="cursor-pointer hover:bg-gray-50"
+                                onClick={() => handleViewCallDetail(record)}
+                              >
+                                <TableCell className="font-medium">{record.phoneNumber}</TableCell>
+                                <TableCell>{record.duration}</TableCell>
+                                <TableCell>{record.time}</TableCell>
+                                <TableCell>
+                                  <Badge variant="success">{record.status}</Badge>
+                                </TableCell>
+                                <TableCell className="max-w-[200px] truncate">
+                                  {record.question || "未识别到问题"}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </TabsContent>
+
+                  <TabsContent value="pending">
+                    <div className="rounded-lg border overflow-hidden">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>电话号码</TableHead>
+                            <TableHead>通话时长</TableHead>
+                            <TableHead>来电时间</TableHead>
+                            <TableHead>状态</TableHead>
+                            <TableHead>首句问题</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {callRecords
+                            .filter((record) => record.status !== "已添加")
+                            .map((record) => (
+                              <TableRow
+                                key={record.id}
+                                className="cursor-pointer hover:bg-gray-50"
+                                onClick={() => handleViewCallDetail(record)}
+                              >
+                                <TableCell className="font-medium">{record.phoneNumber}</TableCell>
+                                <TableCell>{record.duration}</TableCell>
+                                <TableCell>{record.time}</TableCell>
+                                <TableCell>
+                                  <Badge variant={record.status === "处理中" ? "outline" : "secondary"}>
+                                    {record.status}
+                                  </Badge>
+                                </TableCell>
+                                <TableCell className="max-w-[200px] truncate">
+                                  {record.question || "未识别到问题"}
+                                </TableCell>
+                              </TableRow>
+                            ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  </TabsContent>
+                </Tabs>
+              </div>
+            </Card>
+          )
+        })}
+      </div>
+
+      {/* 设置对话框 */}
+      <Dialog open={isSettingsOpen} onOpenChange={setIsSettingsOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>电话获客设置</DialogTitle>
+          </DialogHeader>
+          <div className="py-4 space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="auto-add">自动添加客户</Label>
+                <p className="text-sm text-gray-500">来电后自动将客户添加为微信好友</p>
+              </div>
+              <Switch id="auto-add" checked={autoAddEnabled} onCheckedChange={setAutoAddEnabled} />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="speech-to-text">语音转文字</Label>
+                <p className="text-sm text-gray-500">自动将通话内容转换为文字记录</p>
+              </div>
+              <Switch id="speech-to-text" checked={speechToTextEnabled} onCheckedChange={setSpeechToTextEnabled} />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="question-extraction">问题提取</Label>
+                <p className="text-sm text-gray-500">自动从通话中提取客户的首句问题</p>
+              </div>
+              <Switch
+                id="question-extraction"
+                checked={questionExtractionEnabled}
+                onCheckedChange={setQuestionExtractionEnabled}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setIsSettingsOpen(false)}>保存设置</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 通话详情对话框 */}
+      <Dialog open={isCallDetailOpen} onOpenChange={setIsCallDetailOpen}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>通话详情</DialogTitle>
+          </DialogHeader>
+          {selectedCall && (
+            <div className="py-4 space-y-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center space-x-2">
+                  <Phone className="h-5 w-5 text-blue-500" />
+                  <span className="font-medium">{selectedCall.phoneNumber}</span>
+                </div>
+                <Badge
+                  variant={
+                    selectedCall.status === "已添加"
+                      ? "success"
+                      : selectedCall.status === "处理中"
+                        ? "outline"
+                        : "secondary"
+                  }
+                >
+                  {selectedCall.status}
+                </Badge>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-1">
+                  <p className="text-sm text-gray-500">通话时长</p>
+                  <p className="font-medium flex items-center">
+                    <Clock className="h-4 w-4 mr-1 text-gray-400" />
+                    {selectedCall.duration}
+                  </p>
+                </div>
+                <div className="space-y-1">
+                  <p className="text-sm text-gray-500">来电时间</p>
+                  <p className="font-medium">{selectedCall.time}</p>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <p className="text-sm text-gray-500">首句问题</p>
+                <div className="p-3 bg-gray-50 rounded-lg">
+                  <p className="font-medium">{selectedCall.question || "未识别到问题"}</p>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <p className="text-sm text-gray-500">通话记录</p>
+                  <Badge variant="outline" className="flex items-center">
+                    <Mic className="h-3 w-3 mr-1" />
+                    AI转写
+                  </Badge>
+                </div>
+                <div className="p-3 bg-gray-50 rounded-lg max-h-[200px] overflow-y-auto">
+                  <p className="text-sm">
+                    <span className="font-medium text-blue-600">客服：</span>{" "}
+                    您好，这里是XX公司客服，请问有什么可以帮到您？
+                  </p>
+                  <p className="text-sm mt-2">
+                    <span className="font-medium text-green-600">客户：</span> {selectedCall.question || "..."}
+                  </p>
+                  <p className="text-sm mt-2">
+                    <span className="font-medium text-blue-600">客服：</span>{" "}
+                    好的，关于这个问题，我们的产品确实有这方面的优势...
+                  </p>
+                  <p className="text-sm mt-2">
+                    <span className="font-medium text-green-600">客户：</span> 那你们的价格是怎么样的？
+                  </p>
+                  <p className="text-sm mt-2">
+                    <span className="font-medium text-blue-600">客服：</span> 我们有多种套餐可以选择，基础版每月只需...
+                  </p>
+                </div>
+              </div>
+
+              {selectedCall.status !== "已添加" && (
+                <Button
+                  className="w-full"
+                  onClick={() => {
+                    setCallRecords(
+                      callRecords.map((record) =>
+                        record.id === selectedCall.id ? { ...record, status: "已添加" } : record,
+                      ),
+                    )
+                    toast({
+                      title: "添加成功",
+                      description: `已成功将 ${selectedCall.phoneNumber} 添加为好友`,
+                    })
+                    setIsCallDetailOpen(false)
+                  }}
+                >
+                  手动添加为好友
+                </Button>
+              )}
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/settings/page.tsx b/app/settings/page.tsx
new file mode 100644
index 0000000..1a1e499
--- /dev/null
+++ b/app/settings/page.tsx
@@ -0,0 +1,118 @@
+"use client"
+
+import { useState } from "react"
+import { Settings, Database, Shield, Bell, HelpCircle } from "lucide-react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { Label } from "@/components/ui/label"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+
+export default function SettingsPage() {
+  const [notifications, setNotifications] = useState(true)
+  const [dataSync, setDataSync] = useState(true)
+  const [autoAnalysis, setAutoAnalysis] = useState(false)
+
+  return (
+    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white pb-16">
+      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
+        <div className="flex justify-between items-center p-4">
+          <h1 className="text-xl font-semibold text-blue-600">系统设置</h1>
+        </div>
+      </header>
+
+      <div className="p-4 space-y-6">
+        {/* 用户信息卡片 */}
+        <Card className="p-6">
+          <div className="flex items-center space-x-4">
+            <Avatar className="w-20 h-20">
+              <AvatarImage src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?w=400&h=400&auto=format&fit=crop" />
+              <AvatarFallback>管理员</AvatarFallback>
+            </Avatar>
+            <div className="flex-1">
+              <h2 className="text-xl font-semibold text-blue-600">系统管理员</h2>
+              <p className="text-gray-500">用户数字资产中台</p>
+            </div>
+          </div>
+        </Card>
+
+        {/* 系统设置 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <Settings className="w-5 h-5 mr-2" />
+              系统设置
+            </CardTitle>
+            <CardDescription>配置系统运行参数</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="notifications">消息通知</Label>
+                <p className="text-sm text-gray-500">接收系统通知和提醒</p>
+              </div>
+              <Switch id="notifications" checked={notifications} onCheckedChange={setNotifications} />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="dataSync">数据同步</Label>
+                <p className="text-sm text-gray-500">自动同步用户数据</p>
+              </div>
+              <Switch id="dataSync" checked={dataSync} onCheckedChange={setDataSync} />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <Label htmlFor="autoAnalysis">自动分析</Label>
+                <p className="text-sm text-gray-500">启用AI自动分析功能</p>
+              </div>
+              <Switch id="autoAnalysis" checked={autoAnalysis} onCheckedChange={setAutoAnalysis} />
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* 数据管理 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <Database className="w-5 h-5 mr-2" />
+              数据管理
+            </CardTitle>
+            <CardDescription>管理系统数据和存储</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Button variant="outline" className="w-full justify-start bg-transparent">
+              <Database className="w-4 h-4 mr-2" />
+              数据备份
+            </Button>
+            <Button variant="outline" className="w-full justify-start bg-transparent">
+              <Shield className="w-4 h-4 mr-2" />
+              数据清理
+            </Button>
+          </CardContent>
+        </Card>
+
+        {/* 帮助与支持 */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center">
+              <HelpCircle className="w-5 h-5 mr-2" />
+              帮助与支持
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Button variant="outline" className="w-full justify-start bg-transparent">
+              <HelpCircle className="w-4 h-4 mr-2" />
+              使用帮助
+            </Button>
+            <Button variant="outline" className="w-full justify-start bg-transparent">
+              <Bell className="w-4 h-4 mr-2" />
+              系统状态
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/tag-management/loading.tsx b/app/tag-management/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/tag-management/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/tag-management/page.tsx b/app/tag-management/page.tsx
new file mode 100644
index 0000000..af65ff7
--- /dev/null
+++ b/app/tag-management/page.tsx
@@ -0,0 +1,414 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search, Plus, Filter, Download, Tag, Edit, Trash2, MoreHorizontal } from "lucide-react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { TagCategoryChart } from "@/components/tag-management/tag-category-chart"
+import { TagUsageStats } from "@/components/tag-management/tag-usage-stats"
+import { TagRelationshipGraph } from "@/components/tag-management/tag-relationship-graph"
+
+interface TagItem {
+  id: string
+  name: string
+  category: string
+  type: "system" | "custom" | "derived"
+  source: string
+  coverage: number
+  createdAt: string
+  updatedAt: string
+}
+
+const mockTags: TagItem[] = [
+  {
+    id: "1",
+    name: "高价值用户",
+    category: "用户价值",
+    type: "derived",
+    source: "RFM模型",
+    coverage: 15.3,
+    createdAt: "2023-05-12",
+    updatedAt: "2023-07-15",
+  },
+  {
+    id: "2",
+    name: "90后",
+    category: "人口属性",
+    type: "system",
+    source: "注册信息",
+    coverage: 42.7,
+    createdAt: "2023-01-05",
+    updatedAt: "2023-01-05",
+  },
+  {
+    id: "3",
+    name: "游戏爱好者",
+    category: "兴趣爱好",
+    type: "custom",
+    source: "行为分析",
+    coverage: 28.4,
+    createdAt: "2023-04-18",
+    updatedAt: "2023-06-22",
+  },
+  {
+    id: "4",
+    name: "流失风险高",
+    category: "流失风险",
+    type: "derived",
+    source: "预测模型",
+    coverage: 8.9,
+    createdAt: "2023-06-30",
+    updatedAt: "2023-07-20",
+  },
+  {
+    id: "5",
+    name: "北京地区",
+    category: "地理位置",
+    type: "system",
+    source: "IP分析",
+    coverage: 12.5,
+    createdAt: "2023-02-15",
+    updatedAt: "2023-02-15",
+  },
+  {
+    id: "6",
+    name: "周末活跃",
+    category: "活跃时间",
+    type: "custom",
+    source: "行为分析",
+    coverage: 35.2,
+    createdAt: "2023-05-28",
+    updatedAt: "2023-07-10",
+  },
+]
+
+const tagCategories = ["用户价值", "人口属性", "兴趣爱好", "流失风险", "地理位置", "活跃时间", "消费能力", "渠道来源"]
+
+export default function TagManagementPage() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
+  const [newTag, setNewTag] = useState({
+    name: "",
+    category: "",
+    type: "custom",
+    source: "",
+  })
+
+  const handleSelectAllTags = (checked: boolean) => {
+    if (checked) {
+      setSelectedTags(mockTags.map((tag) => tag.id))
+    } else {
+      setSelectedTags([])
+    }
+  }
+
+  const handleSelectTag = (tagId: string, checked: boolean) => {
+    if (checked) {
+      setSelectedTags([...selectedTags, tagId])
+    } else {
+      setSelectedTags(selectedTags.filter((id) => id !== tagId))
+    }
+  }
+
+  const handleCreateTag = () => {
+    // 这里应该是创建标签的逻辑
+    console.log("创建标签:", newTag)
+    setIsCreateDialogOpen(false)
+    setNewTag({
+      name: "",
+      category: "",
+      type: "custom",
+      source: "",
+    })
+  }
+
+  const filteredTags = mockTags.filter(
+    (tag) =>
+      tag.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      tag.category.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">标签管理</h1>
+          <p className="text-muted-foreground mt-1">管理和组织用户标签体系</p>
+        </div>
+        <div className="flex space-x-2">
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            导出标签
+          </Button>
+          <Button onClick={() => setIsCreateDialogOpen(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            创建标签
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">标签总数</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <Tag className="h-5 w-5 text-blue-500 mr-2" />
+              <div className="text-2xl font-bold">128</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">较上月增加 12 个</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">标签覆盖率</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">87.5%</div>
+            <p className="text-xs text-muted-foreground mt-1">较上月提升 2.3%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">标签使用率</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">76.2%</div>
+            <p className="text-xs text-muted-foreground mt-1">较上月提升 5.1%</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="list" className="space-y-4">
+        <div className="flex justify-between items-center">
+          <TabsList>
+            <TabsTrigger value="list">标签列表</TabsTrigger>
+            <TabsTrigger value="analytics">标签分析</TabsTrigger>
+            <TabsTrigger value="relationships">标签关系</TabsTrigger>
+          </TabsList>
+          <div className="flex space-x-2">
+            <div className="relative w-64">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder="搜索标签..."
+                className="pl-8"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <Button variant="outline" size="icon">
+              <Filter className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <TabsContent value="list" className="space-y-4">
+          <Card>
+            <CardContent className="p-0">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-12">
+                      <Checkbox
+                        checked={selectedTags.length === mockTags.length}
+                        onCheckedChange={handleSelectAllTags}
+                      />
+                    </TableHead>
+                    <TableHead>标签名称</TableHead>
+                    <TableHead>分类</TableHead>
+                    <TableHead>类型</TableHead>
+                    <TableHead>数据来源</TableHead>
+                    <TableHead>覆盖率</TableHead>
+                    <TableHead>创建时间</TableHead>
+                    <TableHead>更新时间</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredTags.map((tag) => (
+                    <TableRow key={tag.id}>
+                      <TableCell>
+                        <Checkbox
+                          checked={selectedTags.includes(tag.id)}
+                          onCheckedChange={(checked) => handleSelectTag(tag.id, !!checked)}
+                        />
+                      </TableCell>
+                      <TableCell className="font-medium">{tag.name}</TableCell>
+                      <TableCell>{tag.category}</TableCell>
+                      <TableCell>
+                        <Badge
+                          variant="outline"
+                          className={
+                            tag.type === "system"
+                              ? "bg-blue-50 text-blue-700 border-blue-200"
+                              : tag.type === "derived"
+                                ? "bg-purple-50 text-purple-700 border-purple-200"
+                                : "bg-green-50 text-green-700 border-green-200"
+                          }
+                        >
+                          {tag.type === "system" ? "系统" : tag.type === "derived" ? "衍生" : "自定义"}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>{tag.source}</TableCell>
+                      <TableCell>{tag.coverage}%</TableCell>
+                      <TableCell>{tag.createdAt}</TableCell>
+                      <TableCell>{tag.updatedAt}</TableCell>
+                      <TableCell className="text-right">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                              <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem>
+                              <Edit className="mr-2 h-4 w-4" />
+                              编辑
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                              <Trash2 className="mr-2 h-4 w-4" />
+                              删除
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="analytics" className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>标签分类分布</CardTitle>
+                <CardDescription>按分类统计标签数量</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <TagCategoryChart />
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>标签使用统计</CardTitle>
+                <CardDescription>标签在各系统中的使用情况</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <TagUsageStats />
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="relationships" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>标签关系图谱</CardTitle>
+              <CardDescription>展示标签之间的关联关系</CardDescription>
+            </CardHeader>
+            <CardContent className="h-[500px]">
+              <TagRelationshipGraph />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      {/* 创建标签对话框 */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <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-name" className="text-right">
+                标签名称
+              </Label>
+              <Input
+                id="tag-name"
+                value={newTag.name}
+                onChange={(e) => setNewTag({ ...newTag, name: e.target.value })}
+                className="col-span-3"
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="tag-category" className="text-right">
+                标签分类
+              </Label>
+              <Select value={newTag.category} onValueChange={(value) => setNewTag({ ...newTag, category: value })}>
+                <SelectTrigger className="col-span-3">
+                  <SelectValue placeholder="选择标签分类" />
+                </SelectTrigger>
+                <SelectContent>
+                  {tagCategories.map((category) => (
+                    <SelectItem key={category} value={category}>
+                      {category}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="tag-type" className="text-right">
+                标签类型
+              </Label>
+              <Select
+                value={newTag.type}
+                onValueChange={(value: "system" | "custom" | "derived") => setNewTag({ ...newTag, type: value })}
+              >
+                <SelectTrigger className="col-span-3">
+                  <SelectValue placeholder="选择标签类型" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="system">系统标签</SelectItem>
+                  <SelectItem value="custom">自定义标签</SelectItem>
+                  <SelectItem value="derived">衍生标签</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="tag-source" className="text-right">
+                数据来源
+              </Label>
+              <Input
+                id="tag-source"
+                value={newTag.source}
+                onChange={(e) => setNewTag({ ...newTag, source: e.target.value })}
+                className="col-span-3"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={handleCreateTag}>创建</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/tag-rules/loading.tsx b/app/tag-rules/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/tag-rules/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/tag-rules/page.tsx b/app/tag-rules/page.tsx
new file mode 100644
index 0000000..42c3a23
--- /dev/null
+++ b/app/tag-rules/page.tsx
@@ -0,0 +1,398 @@
+"use client"
+
+import { 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 { Search, Plus, Filter, Play, Pause, Edit, Trash2, MoreHorizontal, FileText, Clock } from "lucide-react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Textarea } from "@/components/ui/textarea"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Switch } from "@/components/ui/switch"
+import { RuleEditor } from "@/components/tag-rules/rule-editor"
+import { RuleExecutionHistory } from "@/components/tag-rules/rule-execution-history"
+
+interface TagRule {
+  id: string
+  name: string
+  description: string
+  targetTag: string
+  condition: string
+  status: "active" | "inactive" | "draft"
+  priority: number
+  createdAt: string
+  lastRun: string
+  affectedUsers: number
+}
+
+const mockRules: TagRule[] = [
+  {
+    id: "1",
+    name: "高价值用户识别",
+    description: "根据用户消费金额和频次识别高价值用户",
+    targetTag: "高价值用户",
+    condition: "消费金额 > 5000 AND 消费频次 > 10",
+    status: "active",
+    priority: 1,
+    createdAt: "2023-05-12",
+    lastRun: "2023-07-21 15:30",
+    affectedUsers: 1250,
+  },
+  {
+    id: "2",
+    name: "游戏爱好者标记",
+    description: "根据用户浏览和购买行为识别游戏爱好者",
+    targetTag: "游戏爱好者",
+    condition: "游戏类目浏览时长 > 30min OR 游戏类目购买次数 > 2",
+    status: "active",
+    priority: 2,
+    createdAt: "2023-04-18",
+    lastRun: "2023-07-21 14:45",
+    affectedUsers: 2840,
+  },
+  {
+    id: "3",
+    name: "流失风险预警",
+    description: "识别30天内可能流失的用户",
+    targetTag: "流失风险高",
+    condition: "最近登录时间 > 15天 AND 最近30天活跃度下降率 > 50%",
+    status: "active",
+    priority: 1,
+    createdAt: "2023-06-30",
+    lastRun: "2023-07-21 13:20",
+    affectedUsers: 890,
+  },
+  {
+    id: "4",
+    name: "周末活跃用户",
+    description: "识别周末活跃度高的用户",
+    targetTag: "周末活跃",
+    condition: "周末活跃时长 > 工作日活跃时长 * 1.5",
+    status: "inactive",
+    priority: 3,
+    createdAt: "2023-05-28",
+    lastRun: "2023-07-10 09:15",
+    affectedUsers: 3520,
+  },
+  {
+    id: "5",
+    name: "潜在高转化用户",
+    description: "识别浏览量高但未转化的潜在用户",
+    targetTag: "潜在高转化",
+    condition: "浏览商品数 > 20 AND 加购次数 > 5 AND 购买次数 = 0",
+    status: "draft",
+    priority: 2,
+    createdAt: "2023-07-15",
+    lastRun: "-",
+    affectedUsers: 0,
+  },
+]
+
+export default function TagRulesPage() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
+  const [newRule, setNewRule] = useState({
+    name: "",
+    description: "",
+    targetTag: "",
+    condition: "",
+    priority: 2,
+    status: "draft",
+  })
+  const [selectedRuleId, setSelectedRuleId] = useState<string | null>(null)
+
+  const handleCreateRule = () => {
+    // 这里应该是创建规则的逻辑
+    console.log("创建规则:", newRule)
+    setIsCreateDialogOpen(false)
+    setNewRule({
+      name: "",
+      description: "",
+      targetTag: "",
+      condition: "",
+      priority: 2,
+      status: "draft",
+    })
+  }
+
+  const filteredRules = mockRules.filter(
+    (rule) =>
+      rule.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      rule.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      rule.targetTag.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const getStatusBadge = (status: TagRule["status"]) => {
+    switch (status) {
+      case "active":
+        return <Badge className="bg-green-100 text-green-800">运行中</Badge>
+      case "inactive":
+        return <Badge className="bg-yellow-100 text-yellow-800">已暂停</Badge>
+      case "draft":
+        return <Badge className="bg-gray-100 text-gray-800">草稿</Badge>
+    }
+  }
+
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">标签规则引擎</h1>
+          <p className="text-muted-foreground mt-1">管理和执行用户标签生成规则</p>
+        </div>
+        <div className="flex space-x-2">
+          <Button variant="outline">
+            <Clock className="mr-2 h-4 w-4" />
+            执行历史
+          </Button>
+          <Button onClick={() => setIsCreateDialogOpen(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            创建规则
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">规则总数</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">24</div>
+            <p className="text-xs text-muted-foreground mt-1">较上月增加 3 个</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">活跃规则</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">18</div>
+            <p className="text-xs text-muted-foreground mt-1">占总规则的 75%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">今日执行次数</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">36</div>
+            <p className="text-xs text-muted-foreground mt-1">影响用户 12,580 人</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="rules" className="space-y-4">
+        <div className="flex justify-between items-center">
+          <TabsList>
+            <TabsTrigger value="rules">规则列表</TabsTrigger>
+            <TabsTrigger value="editor">规则编辑器</TabsTrigger>
+            <TabsTrigger value="history">执行历史</TabsTrigger>
+          </TabsList>
+          <div className="flex space-x-2">
+            <div className="relative w-64">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder="搜索规则..."
+                className="pl-8"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <Button variant="outline" size="icon">
+              <Filter className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <TabsContent value="rules" className="space-y-4">
+          <Card>
+            <CardContent className="p-0">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>规则名称</TableHead>
+                    <TableHead>目标标签</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead>优先级</TableHead>
+                    <TableHead>创建时间</TableHead>
+                    <TableHead>最后执行</TableHead>
+                    <TableHead>影响用户数</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredRules.map((rule) => (
+                    <TableRow key={rule.id}>
+                      <TableCell className="font-medium">
+                        <div>{rule.name}</div>
+                        <div className="text-xs text-muted-foreground">{rule.description}</div>
+                      </TableCell>
+                      <TableCell>{rule.targetTag}</TableCell>
+                      <TableCell>{getStatusBadge(rule.status)}</TableCell>
+                      <TableCell>{rule.priority}</TableCell>
+                      <TableCell>{rule.createdAt}</TableCell>
+                      <TableCell>{rule.lastRun}</TableCell>
+                      <TableCell>{rule.affectedUsers.toLocaleString()}</TableCell>
+                      <TableCell className="text-right">
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                              <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuItem onClick={() => setSelectedRuleId(rule.id)}>
+                              <Edit className="mr-2 h-4 w-4" />
+                              编辑
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                              {rule.status === "active" ? (
+                                <>
+                                  <Pause className="mr-2 h-4 w-4" />
+                                  暂停
+                                </>
+                              ) : (
+                                <>
+                                  <Play className="mr-2 h-4 w-4" />
+                                  启动
+                                </>
+                              )}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                              <FileText className="mr-2 h-4 w-4" />
+                              查看详情
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                              <Trash2 className="mr-2 h-4 w-4" />
+                              删除
+                            </DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="editor" className="space-y-4">
+          <RuleEditor ruleId={selectedRuleId} />
+        </TabsContent>
+
+        <TabsContent value="history" className="space-y-4">
+          <RuleExecutionHistory />
+        </TabsContent>
+      </Tabs>
+
+      {/* 创建规则对话框 */}
+      <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
+        <DialogContent className="sm:max-w-[600px]">
+          <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="rule-name" className="text-right">
+                规则名称
+              </Label>
+              <Input
+                id="rule-name"
+                value={newRule.name}
+                onChange={(e) => setNewRule({ ...newRule, name: e.target.value })}
+                className="col-span-3"
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="rule-description" className="text-right">
+                规则描述
+              </Label>
+              <Textarea
+                id="rule-description"
+                value={newRule.description}
+                onChange={(e) => setNewRule({ ...newRule, description: e.target.value })}
+                className="col-span-3"
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="target-tag" className="text-right">
+                目标标签
+              </Label>
+              <Input
+                id="target-tag"
+                value={newRule.targetTag}
+                onChange={(e) => setNewRule({ ...newRule, targetTag: e.target.value })}
+                className="col-span-3"
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="rule-condition" className="text-right">
+                规则条件
+              </Label>
+              <Textarea
+                id="rule-condition"
+                value={newRule.condition}
+                onChange={(e) => setNewRule({ ...newRule, condition: e.target.value })}
+                className="col-span-3"
+                placeholder="例如: 消费金额 > 5000 AND 消费频次 > 10"
+              />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="rule-priority" className="text-right">
+                优先级
+              </Label>
+              <Select
+                value={newRule.priority.toString()}
+                onValueChange={(value) => setNewRule({ ...newRule, priority: Number.parseInt(value) })}
+              >
+                <SelectTrigger className="col-span-3">
+                  <SelectValue placeholder="选择优先级" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1">1 - 高</SelectItem>
+                  <SelectItem value="2">2 - 中</SelectItem>
+                  <SelectItem value="3">3 - 低</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="rule-status" className="text-right">
+                规则状态
+              </Label>
+              <div className="flex items-center space-x-2 col-span-3">
+                <Switch
+                  id="rule-status"
+                  checked={newRule.status === "active"}
+                  onCheckedChange={(checked) => setNewRule({ ...newRule, status: checked ? "active" : "draft" })}
+                />
+                <Label htmlFor="rule-status">{newRule.status === "active" ? "立即启用" : "保存为草稿"}</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={handleCreateRule}>创建</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/tag-tasks/loading.tsx b/app/tag-tasks/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/tag-tasks/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/tag-tasks/page.tsx b/app/tag-tasks/page.tsx
new file mode 100644
index 0000000..da8ba56
--- /dev/null
+++ b/app/tag-tasks/page.tsx
@@ -0,0 +1,134 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search, Plus, Filter, Calendar, CheckCircle2, XCircle, PlayCircle } from "lucide-react"
+import { TaskList } from "@/components/tag-tasks/task-list"
+
+export default function TagTasksPage() {
+  const [activeTab, setActiveTab] = useState("all")
+  const [searchQuery, setSearchQuery] = useState("")
+
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-3xl font-bold">用户标签任务</h1>
+        <div className="flex space-x-2">
+          <Button variant="outline">
+            <Calendar className="mr-2 h-4 w-4" />
+            任务日历
+          </Button>
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            创建任务
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">总任务数</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">128</div>
+            <p className="text-xs text-muted-foreground mt-1">本月新增 24 个任务</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">运行中任务</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <PlayCircle className="h-5 w-5 text-blue-500 mr-2" />
+              <div className="text-2xl font-bold">12</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">预计完成时间 2小时后</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">已完成任务</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <CheckCircle2 className="h-5 w-5 text-green-500 mr-2" />
+              <div className="text-2xl font-bold">98</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">成功率 96.2%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">失败任务</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <XCircle className="h-5 w-5 text-red-500 mr-2" />
+              <div className="text-2xl font-bold">18</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">失败率 3.8%</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>标签任务管理</CardTitle>
+          <CardDescription>创建和管理基于用户标签的自定义任务，自动化用户标签生成</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+            <div className="flex justify-between items-center">
+              <TabsList>
+                <TabsTrigger value="all">全部任务</TabsTrigger>
+                <TabsTrigger value="running">运行中</TabsTrigger>
+                <TabsTrigger value="completed">已完成</TabsTrigger>
+                <TabsTrigger value="failed">失败</TabsTrigger>
+                <TabsTrigger value="scheduled">已计划</TabsTrigger>
+              </TabsList>
+              <div className="flex space-x-2">
+                <div className="relative w-64">
+                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="搜索任务..."
+                    className="pl-8"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                  />
+                </div>
+                <Button variant="outline" size="icon">
+                  <Filter className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            <TabsContent value="all" className="space-y-4">
+              <TaskList status="all" searchQuery={searchQuery} />
+            </TabsContent>
+
+            <TabsContent value="running" className="space-y-4">
+              <TaskList status="running" searchQuery={searchQuery} />
+            </TabsContent>
+
+            <TabsContent value="completed" className="space-y-4">
+              <TaskList status="completed" searchQuery={searchQuery} />
+            </TabsContent>
+
+            <TabsContent value="failed" className="space-y-4">
+              <TaskList status="failed" searchQuery={searchQuery} />
+            </TabsContent>
+
+            <TabsContent value="scheduled" className="space-y-4">
+              <TaskList status="scheduled" searchQuery={searchQuery} />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/traffic-keywords/loading.tsx b/app/traffic-keywords/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/traffic-keywords/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/traffic-pool/components/date-range-picker.tsx b/app/traffic-pool/components/date-range-picker.tsx
new file mode 100644
index 0000000..df3605d
--- /dev/null
+++ b/app/traffic-pool/components/date-range-picker.tsx
@@ -0,0 +1,53 @@
+"use client"
+import { CalendarIcon } from "lucide-react"
+import type { DateRange } from "react-day-picker"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { format } from "date-fns"
+
+interface DateRangePickerProps {
+  className?: string
+  value?: DateRange
+  onChange?: (date: DateRange | undefined) => void
+}
+
+export function DateRangePicker({ className, value, onChange }: DateRangePickerProps) {
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn("w-[300px] justify-start text-left font-normal", !value && "text-muted-foreground")}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {value?.from ? (
+              value.to ? (
+                <>
+                  {format(value.from, "LLL dd, y")} - {format(value.to, "LLL dd, y")}
+                </>
+              ) : (
+                format(value.from, "LLL dd, y")
+              )
+            ) : (
+              <span>选择日期范围</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={value?.from}
+            selected={value}
+            onSelect={onChange}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/app/traffic-pool/components/pool-usage-chart.tsx b/app/traffic-pool/components/pool-usage-chart.tsx
new file mode 100644
index 0000000..e600dc8
--- /dev/null
+++ b/app/traffic-pool/components/pool-usage-chart.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import { Card } from "@/components/ui/card"
+import { Progress } from "@/components/ui/progress"
+
+interface PoolUsageChartProps {
+  deviceStats: {
+    [key: string]: number
+  }
+  poolLimit: number
+}
+
+export function PoolUsageChart({ deviceStats, poolLimit }: PoolUsageChartProps) {
+  return (
+    <Card className="p-3">
+      <h3 className="text-sm font-medium mb-2">设备流量池使用情况</h3>
+      <div className="space-y-3">
+        {Object.entries(deviceStats).map(([device, count]) => (
+          <div key={device} className="space-y-1">
+            <div className="flex justify-between text-xs">
+              <span>设备{device}</span>
+              <span className="text-gray-500">
+                {count}/{poolLimit}
+              </span>
+            </div>
+            <Progress value={(count / poolLimit) * 100} />
+          </div>
+        ))}
+      </div>
+    </Card>
+  )
+}
diff --git a/app/traffic-pool/loading.tsx b/app/traffic-pool/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/traffic-pool/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/traffic-pool/page.tsx b/app/traffic-pool/page.tsx
new file mode 100644
index 0000000..ba45bf1
--- /dev/null
+++ b/app/traffic-pool/page.tsx
@@ -0,0 +1,364 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Search, Filter, Plus, Users, ArrowRight, BarChart } from "lucide-react"
+
+export default function TrafficPoolPage() {
+  const [selectedCategory, setSelectedCategory] = useState("all")
+  const [searchQuery, setSearchQuery] = useState("")
+
+  // 模拟场景分类数据
+  const categories = [
+    { id: "all", name: "所有场景" },
+    { id: "user-assets", name: "用户资产" },
+    { id: "street-vendor", name: "地摊相关" },
+    { id: "fandeng", name: "樊登读书" },
+    { id: "wow", name: "魔兽世界" },
+    { id: "other", name: "其他场景" },
+  ]
+
+  // 模拟流量池数据
+  const pools = [
+    {
+      id: "1",
+      name: "私域池",
+      description: "已转化为私域用户的高价值流量池",
+      userCount: 12500,
+      categories: ["用户资产", "樊登读书"],
+      conversionRate: 32,
+      status: "active",
+      growth: "+15%",
+    },
+    {
+      id: "2",
+      name: "公域池",
+      description: "尚未转化的公域流量用户池",
+      userCount: 45600,
+      categories: ["地摊相关"],
+      conversionRate: 8,
+      status: "active",
+      growth: "+23%",
+    },
+    {
+      id: "3",
+      name: "游戏池",
+      description: "游戏相关用户的流量池",
+      userCount: 28900,
+      categories: ["魔兽世界"],
+      conversionRate: 15,
+      status: "active",
+      growth: "+8%",
+    },
+    {
+      id: "4",
+      name: "休眠池",
+      description: "长期未活跃的休眠用户池",
+      userCount: 9800,
+      categories: ["用户资产", "地摊相关", "樊登读书", "魔兽世界"],
+      conversionRate: 3,
+      status: "inactive",
+      growth: "-5%",
+    },
+  ]
+
+  // 过滤流量池
+  const filteredPools = pools.filter((pool) => {
+    const matchesSearch =
+      pool.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      pool.description.toLowerCase().includes(searchQuery.toLowerCase())
+
+    const matchesCategory =
+      selectedCategory === "all" ||
+      pool.categories.some((cat) => {
+        const categoryObj = categories.find((c) => c.name === cat)
+        return categoryObj && categoryObj.id === selectedCategory
+      })
+
+    return matchesSearch && matchesCategory
+  })
+
+  // 模拟用户数据
+  const poolUsers = [
+    { id: "1", name: "张三", source: "微信", joinDate: "2023-05-15", category: "用户资产", value: "高" },
+    { id: "2", name: "李四", source: "抖音", joinDate: "2023-04-10", category: "地摊相关", value: "中" },
+    { id: "3", name: "王五", source: "小红书", joinDate: "2023-03-05", category: "樊登读书", value: "低" },
+    { id: "4", name: "赵六", source: "官网", joinDate: "2023-02-20", category: "魔兽世界", value: "高" },
+    { id: "5", name: "钱七", source: "微信", joinDate: "2023-01-15", category: "用户资产", value: "中" },
+  ]
+
+  return (
+    <div className="container mx-auto py-6 space-y-8">
+      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">流量池管理</h1>
+          <p className="text-muted-foreground">按场景分类管理您的流量池和用户资源</p>
+        </div>
+        <div className="flex gap-2">
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            创建新流量池
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex flex-col md:flex-row gap-4 items-center">
+        <div className="relative w-full md:max-w-sm">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="搜索流量池..."
+            className="pl-8"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+
+        <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+          <SelectTrigger className="w-full md:w-[180px]">
+            <SelectValue placeholder="选择场景分类" />
+          </SelectTrigger>
+          <SelectContent>
+            {categories.map((category) => (
+              <SelectItem key={category.id} value={category.id}>
+                {category.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Button variant="outline" size="icon" className="ml-auto">
+          <Filter className="h-4 w-4" />
+        </Button>
+      </div>
+
+      <Tabs defaultValue="grid" className="w-full">
+        <TabsList className="grid w-full max-w-md grid-cols-3">
+          <TabsTrigger value="grid">卡片视图</TabsTrigger>
+          <TabsTrigger value="list">列表视图</TabsTrigger>
+          <TabsTrigger value="analytics">数据分析</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="grid" className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {filteredPools.map((pool) => (
+              <Card key={pool.id} className={`${pool.status === "inactive" ? "border-dashed opacity-70" : ""}`}>
+                <CardHeader className="pb-2">
+                  <div className="flex justify-between items-start">
+                    <div>
+                      <CardTitle>{pool.name}</CardTitle>
+                      <CardDescription>{pool.description}</CardDescription>
+                    </div>
+                    <Badge
+                      className={pool.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}
+                    >
+                      {pool.status === "active" ? "活跃" : "休眠"}
+                    </Badge>
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-4">
+                    <div className="flex justify-between items-center">
+                      <div className="flex items-center">
+                        <Users className="h-4 w-4 mr-2 text-muted-foreground" />
+                        <span className="text-sm font-medium">用户数量</span>
+                      </div>
+                      <div className="flex items-center">
+                        <span className="font-bold">{pool.userCount.toLocaleString()}</span>
+                        <span
+                          className={`text-xs ml-2 ${pool.growth.startsWith("+") ? "text-green-600" : "text-red-600"}`}
+                        >
+                          {pool.growth}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <div className="flex items-center">
+                        <ArrowRight className="h-4 w-4 mr-2 text-muted-foreground" />
+                        <span className="text-sm font-medium">转化率</span>
+                      </div>
+                      <span className="font-bold">{pool.conversionRate}%</span>
+                    </div>
+                    <div>
+                      <span className="text-sm font-medium">包含场景</span>
+                      <div className="flex flex-wrap gap-2 mt-2">
+                        {pool.categories.map((category, index) => (
+                          <Badge key={index} variant="outline" className="bg-blue-50">
+                            {category}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="pt-4 flex justify-end gap-2">
+                      <Button variant="outline" size="sm">
+                        查看详情
+                      </Button>
+                      <Button size="sm">管理用户</Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="list" className="space-y-6">
+          <Card>
+            <CardContent className="p-0">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>流量池名称</TableHead>
+                    <TableHead>用户数量</TableHead>
+                    <TableHead>转化率</TableHead>
+                    <TableHead>场景分类</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredPools.map((pool) => (
+                    <TableRow key={pool.id}>
+                      <TableCell>
+                        <div>
+                          <p className="font-medium">{pool.name}</p>
+                          <p className="text-sm text-muted-foreground">{pool.description}</p>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center">
+                          <span>{pool.userCount.toLocaleString()}</span>
+                          <span
+                            className={`text-xs ml-2 ${pool.growth.startsWith("+") ? "text-green-600" : "text-red-600"}`}
+                          >
+                            {pool.growth}
+                          </span>
+                        </div>
+                      </TableCell>
+                      <TableCell>{pool.conversionRate}%</TableCell>
+                      <TableCell>
+                        <div className="flex flex-wrap gap-1">
+                          {pool.categories.map((category, index) => (
+                            <Badge key={index} variant="outline" className="bg-blue-50">
+                              {category}
+                            </Badge>
+                          ))}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge
+                          className={
+                            pool.status === "active" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                          }
+                        >
+                          {pool.status === "active" ? "活跃" : "休眠"}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex justify-end gap-2">
+                          <Button variant="outline" size="sm">
+                            查看
+                          </Button>
+                          <Button size="sm">管理</Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="analytics" className="space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>流量池用户分布</CardTitle>
+                <CardDescription>按场景分类的用户分布情况</CardDescription>
+              </CardHeader>
+              <CardContent className="h-80 flex items-center justify-center">
+                <div className="text-center text-muted-foreground flex flex-col items-center">
+                  <BarChart className="h-10 w-10 mb-2" />
+                  <p>流量池用户分布图表</p>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>转化率分析</CardTitle>
+                <CardDescription>各流量池的转化率对比</CardDescription>
+              </CardHeader>
+              <CardContent className="h-80 flex items-center justify-center">
+                <div className="text-center text-muted-foreground flex flex-col items-center">
+                  <BarChart className="h-10 w-10 mb-2" />
+                  <p>转化率对比图表</p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>流量池用户列表</CardTitle>
+          <CardDescription>所有流量池中的用户</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>用户名</TableHead>
+                <TableHead>来源</TableHead>
+                <TableHead>加入日期</TableHead>
+                <TableHead>场景分类</TableHead>
+                <TableHead>用户价值</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {poolUsers.map((user) => (
+                <TableRow key={user.id}>
+                  <TableCell className="font-medium">{user.name}</TableCell>
+                  <TableCell>{user.source}</TableCell>
+                  <TableCell>{user.joinDate}</TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className="bg-blue-50">
+                      {user.category}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      className={
+                        user.value === "高"
+                          ? "bg-green-100 text-green-800"
+                          : user.value === "中"
+                            ? "bg-yellow-100 text-yellow-800"
+                            : "bg-red-100 text-red-800"
+                      }
+                    >
+                      {user.value}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <Button variant="outline" size="sm">
+                      查看详情
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/user-pool/page.tsx b/app/user-pool/page.tsx
new file mode 100644
index 0000000..83f62c3
--- /dev/null
+++ b/app/user-pool/page.tsx
@@ -0,0 +1,15 @@
+import { UserPoolHeader } from "@/components/user-pool/user-pool-header"
+import { UserPoolTable } from "@/components/user-pool/user-pool-table"
+import { UserPoolFilters } from "@/components/user-pool/user-pool-filters"
+import { UserPoolStats } from "@/components/user-pool/user-pool-stats"
+
+export default function UserPoolPage() {
+  return (
+    <div className="container mx-auto p-6 space-y-6">
+      <UserPoolHeader />
+      <UserPoolStats />
+      <UserPoolFilters />
+      <UserPoolTable />
+    </div>
+  )
+}
diff --git a/app/user-portrait/[id]/page.tsx b/app/user-portrait/[id]/page.tsx
new file mode 100644
index 0000000..9ef075e
--- /dev/null
+++ b/app/user-portrait/[id]/page.tsx
@@ -0,0 +1,858 @@
+"use client"
+
+import type React from "react"
+
+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]
+}
+
+// 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")
+
+  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" })
+  }
+
+  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>
+        </TabsContent>
+
+        <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>
+
+              <div className="mt-6 space-y-4">
+                <h3 className="text-lg font-medium">RFM分析解读</h3>
+
+                <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>
+
+                  <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>
+    </div>
+  )
+}
diff --git a/app/user-portrait/loading.tsx b/app/user-portrait/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/user-portrait/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/user-portrait/page.tsx b/app/user-portrait/page.tsx
new file mode 100644
index 0000000..735ad64
--- /dev/null
+++ b/app/user-portrait/page.tsx
@@ -0,0 +1,578 @@
+"use client"
+
+import { Badge } from "@/components/ui/badge"
+import { Avatar } from "@/components/ui/avatar"
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import {
+  Search,
+  UserPlus,
+  Download,
+  MessageCircle,
+  ChevronDown,
+  ChevronRight,
+  Tag,
+  Users,
+  Eye,
+  Settings,
+} from "lucide-react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+
+export default function UserPortrait() {
+  const router = useRouter()
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedCategory, setSelectedCategory] = useState("all")
+  const [selectedPool, setSelectedPool] = useState("all")
+  const [selectedWechatDialog, setSelectedWechatDialog] = useState<{ isOpen: boolean; accounts: any[] }>({
+    isOpen: false,
+    accounts: [],
+  })
+  const [expandedSections, setExpandedSections] = useState({
+    userKeywords: true,
+    tagManagement: false,
+    userList: true,
+  })
+
+  // 使用真实的用户数据
+  const mockUsers = [
+    {
+      id: "1",
+      name: "李明华",
+      company: "阿里巴巴集团",
+      avatar: "/placeholder.svg?height=40&width=40",
+      tags: ["高价值", "技术决策者", "活跃用户", "iOS用户", "企业级客户"],
+      category: "企业服务",
+      pool: "私域池",
+      lastActive: "2024-01-18",
+      value: 28500,
+      rfmScore: 95,
+      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: "张雨婷",
+      company: "腾讯科技",
+      avatar: "/placeholder.svg?height=40&width=40",
+      tags: ["中高价值", "产品经理", "内容创作者", "Android用户"],
+      category: "内容营销",
+      pool: "公域池",
+      lastActive: "2024-01-17",
+      value: 15800,
+      rfmScore: 78,
+      wechatAccounts: [
+        { id: "wx3", name: "张雨婷", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号"] },
+      ],
+    },
+    {
+      id: "3",
+      name: "王建国",
+      company: "字节跳动",
+      avatar: "/placeholder.svg?height=40&width=40",
+      tags: ["高价值", "技术专家", "开源贡献者", "MacOS用户"],
+      category: "技术社区",
+      pool: "私域池",
+      lastActive: "2024-01-16",
+      value: 32400,
+      rfmScore: 89,
+      wechatAccounts: [
+        { id: "wx4", name: "王建国", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号", "技术交流"] },
+      ],
+    },
+    {
+      id: "4",
+      name: "刘思琪",
+      company: "美团点评",
+      avatar: "/placeholder.svg?height=40&width=40",
+      tags: ["中价值", "运营专家", "数据分析师", "Windows用户"],
+      category: "数据分析",
+      pool: "私域池",
+      lastActive: "2024-01-15",
+      value: 18900,
+      rfmScore: 72,
+      wechatAccounts: [
+        { id: "wx5", name: "刘思琪", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号"] },
+      ],
+    },
+    {
+      id: "5",
+      name: "陈浩然",
+      company: "京东集团",
+      avatar: "/placeholder.svg?height=40&width=40",
+      tags: ["高价值", "架构师", "技术领导", "Linux用户"],
+      category: "技术架构",
+      pool: "私域池",
+      lastActive: "2024-01-14",
+      value: 45600,
+      rfmScore: 93,
+      wechatAccounts: [
+        { id: "wx6", name: "陈浩然", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号", "技术分享"] },
+        { id: "wx7", name: "陈浩然个人号", avatar: "/placeholder.svg?height=40&width=40", tags: ["个人账号"] },
+      ],
+    },
+    {
+      id: "6",
+      name: "周欣妍",
+      company: "滴滴出行",
+      avatar: "/placeholder.svg?height=40&width=40",
+      tags: ["中价值", "UI设计师", "用户体验", "iOS用户"],
+      category: "设计创意",
+      pool: "公域池",
+      lastActive: "2024-01-13",
+      value: 12300,
+      rfmScore: 65,
+      wechatAccounts: [
+        { id: "wx8", name: "周欣妍", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号"] },
+      ],
+    },
+    {
+      id: "7",
+      name: "马志强",
+      company: "华为技术",
+      avatar: "/placeholder.svg?height=40&width=40",
+      tags: ["高价值", "解决方案专家", "B2B销售", "Android用户"],
+      category: "企业解决方案",
+      pool: "私域池",
+      lastActive: "2024-01-12",
+      value: 38700,
+      rfmScore: 87,
+      wechatAccounts: [
+        { id: "wx9", name: "马志强", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号", "商务"] },
+      ],
+    },
+    {
+      id: "8",
+      name: "赵丽娟",
+      company: "小米科技",
+      avatar: "/placeholder.svg?height=40&width=40",
+      tags: ["中高价值", "市场营销", "品牌推广", "iOS用户"],
+      category: "品牌营销",
+      pool: "公域池",
+      lastActive: "2024-01-11",
+      value: 21500,
+      rfmScore: 76,
+      wechatAccounts: [
+        { id: "wx10", name: "赵丽娟", avatar: "/placeholder.svg?height=40&width=40", tags: ["主要账号"] },
+        { id: "wx11", name: "赵丽娟工作号", avatar: "/placeholder.svg?height=40&width=40", tags: ["工作账号"] },
+      ],
+    },
+  ]
+
+  const [users, setUsers] = useState(mockUsers)
+
+  // 用户词统计
+  const userKeywordStats = {
+    totalKeywords: 156,
+    activeKeywords: 124,
+    coverage: 89.4,
+    topKeywords: [
+      { keyword: "技术", count: 45, trend: "+12%" },
+      { keyword: "产品", count: 38, trend: "+8%" },
+      { keyword: "运营", count: 32, trend: "+15%" },
+      { keyword: "设计", count: 28, trend: "+6%" },
+      { keyword: "市场", count: 25, trend: "+10%" },
+    ],
+  }
+
+  // 标签管理统计
+  const tagStats = {
+    totalTags: 342,
+    activeTags: 287,
+    categories: 12,
+    coverage: 95.8,
+    topTags: [
+      { tag: "高价值", count: 156, color: "bg-green-100 text-green-800" },
+      { tag: "活跃用户", count: 134, color: "bg-blue-100 text-blue-800" },
+      { tag: "技术专家", count: 98, color: "bg-purple-100 text-purple-800" },
+      { tag: "决策者", count: 87, color: "bg-orange-100 text-orange-800" },
+      { tag: "企业客户", count: 76, color: "bg-pink-100 text-pink-800" },
+    ],
+  }
+
+  // 获取所有类别和池子
+  const categories = ["all", ...new Set(users.map((user) => user.category))]
+  const pools = ["all", ...new Set(users.map((user) => user.pool))]
+
+  // 过滤用户的函数
+  const filteredUsers = users.filter((user) => {
+    const matchesSearch =
+      user.name.includes(searchQuery) ||
+      user.company.includes(searchQuery) ||
+      user.tags.some((tag) => tag.includes(searchQuery)) ||
+      user.category.includes(searchQuery)
+
+    const matchesCategory = selectedCategory === "all" || user.category === selectedCategory
+    const matchesPool = selectedPool === "all" || user.pool === selectedPool
+
+    return matchesSearch && matchesCategory && matchesPool
+  })
+
+  // 处理用户点击
+  const handleUserClick = (userId: string) => {
+    router.push(`/user-portrait/${userId}`)
+  }
+
+  // 处理微信账号点击
+  const handleWechatClick = (userId: string) => {
+    const user = users.find((u) => u.id === userId)
+    if (user) {
+      setSelectedWechatDialog({
+        isOpen: true,
+        accounts: user.wechatAccounts,
+      })
+    }
+  }
+
+  const toggleSection = (section: string) => {
+    setExpandedSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }))
+  }
+
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">用户画像</h1>
+          <p className="text-muted-foreground">全面的用户数据分析和管理</p>
+        </div>
+        <div className="flex gap-2">
+          <Button>
+            <UserPlus className="mr-2 h-4 w-4" />
+            导入用户
+          </Button>
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            导出数据
+          </Button>
+        </div>
+      </div>
+
+      {/* 用户词管理 */}
+      <Collapsible
+        open={expandedSections.userKeywords}
+        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, userKeywords: open }))}
+      >
+        <Card className="border shadow-sm">
+          <CollapsibleTrigger className="w-full">
+            <CardHeader className="hover:bg-gray-50 transition-colors cursor-pointer">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Tag className="h-5 w-5 text-blue-600" />
+                  <div className="text-left">
+                    <CardTitle>用户词管理</CardTitle>
+                    <CardDescription>用户关键词分析和管理</CardDescription>
+                  </div>
+                </div>
+                {expandedSections.userKeywords ? (
+                  <ChevronDown className="h-5 w-5" />
+                ) : (
+                  <ChevronRight className="h-5 w-5" />
+                )}
+              </div>
+            </CardHeader>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <CardContent className="pt-0">
+              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
+                <div className="bg-blue-50 p-3 rounded-lg">
+                  <p className="text-sm font-medium text-blue-600">总关键词</p>
+                  <p className="text-2xl font-bold text-blue-900">{userKeywordStats.totalKeywords}</p>
+                </div>
+                <div className="bg-green-50 p-3 rounded-lg">
+                  <p className="text-sm font-medium text-green-600">活跃关键词</p>
+                  <p className="text-2xl font-bold text-green-900">{userKeywordStats.activeKeywords}</p>
+                </div>
+                <div className="bg-purple-50 p-3 rounded-lg">
+                  <p className="text-sm font-medium text-purple-600">覆盖率</p>
+                  <p className="text-2xl font-bold text-purple-900">{userKeywordStats.coverage}%</p>
+                </div>
+                <div className="bg-orange-50 p-3 rounded-lg">
+                  <Button
+                    variant="outline"
+                    className="w-full h-full bg-transparent"
+                    onClick={() => router.push("/user-portrait/user-keywords")}
+                  >
+                    <Settings className="mr-2 h-4 w-4" />
+                    管理关键词
+                  </Button>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-5 gap-2">
+                {userKeywordStats.topKeywords.map((item, index) => (
+                  <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
+                    <span className="text-sm font-medium">{item.keyword}</span>
+                    <div className="text-right">
+                      <p className="text-sm font-bold">{item.count}</p>
+                      <p className="text-xs text-green-600">{item.trend}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </CollapsibleContent>
+        </Card>
+      </Collapsible>
+
+      {/* 标签管理 */}
+      <Collapsible
+        open={expandedSections.tagManagement}
+        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, tagManagement: open }))}
+      >
+        <Card className="border shadow-sm">
+          <CollapsibleTrigger className="w-full">
+            <CardHeader className="hover:bg-gray-50 transition-colors cursor-pointer">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Tag className="h-5 w-5 text-purple-600" />
+                  <div className="text-left">
+                    <CardTitle>标签管理</CardTitle>
+                    <CardDescription>用户标签分类和管理</CardDescription>
+                  </div>
+                </div>
+                {expandedSections.tagManagement ? (
+                  <ChevronDown className="h-5 w-5" />
+                ) : (
+                  <ChevronRight className="h-5 w-5" />
+                )}
+              </div>
+            </CardHeader>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <CardContent className="pt-0">
+              <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
+                <div className="bg-purple-50 p-3 rounded-lg">
+                  <p className="text-sm font-medium text-purple-600">总标签数</p>
+                  <p className="text-2xl font-bold text-purple-900">{tagStats.totalTags}</p>
+                </div>
+                <div className="bg-blue-50 p-3 rounded-lg">
+                  <p className="text-sm font-medium text-blue-600">活跃标签</p>
+                  <p className="text-2xl font-bold text-blue-900">{tagStats.activeTags}</p>
+                </div>
+                <div className="bg-green-50 p-3 rounded-lg">
+                  <p className="text-sm font-medium text-green-600">覆盖率</p>
+                  <p className="text-2xl font-bold text-green-900">{tagStats.coverage}%</p>
+                </div>
+                <div className="bg-orange-50 p-3 rounded-lg">
+                  <Button
+                    variant="outline"
+                    className="w-full h-full bg-transparent"
+                    onClick={() => router.push("/user-portrait/tags")}
+                  >
+                    <Settings className="mr-2 h-4 w-4" />
+                    管理标签
+                  </Button>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-5 gap-2">
+                {tagStats.topTags.map((item, index) => (
+                  <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
+                    <Badge className={item.color}>{item.tag}</Badge>
+                    <span className="text-sm font-bold">{item.count}</span>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </CollapsibleContent>
+        </Card>
+      </Collapsible>
+
+      {/* 用户列表 */}
+      <Collapsible
+        open={expandedSections.userList}
+        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, userList: open }))}
+      >
+        <Card className="border shadow-sm">
+          <CollapsibleTrigger className="w-full">
+            <CardHeader className="hover:bg-gray-50 transition-colors cursor-pointer">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Users className="h-5 w-5 text-green-600" />
+                  <div className="text-left">
+                    <CardTitle>用户列表</CardTitle>
+                    <CardDescription>查看和管理所有用户 ({filteredUsers.length})</CardDescription>
+                  </div>
+                </div>
+                {expandedSections.userList ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+              </div>
+            </CardHeader>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <CardContent className="pt-0">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div className="relative">
+                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    type="search"
+                    placeholder="搜索用户、公司或标签..."
+                    className="pl-8"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                  />
+                </div>
+
+                <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="选择场景分类" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {categories.map((category) => (
+                      <SelectItem key={category} value={category}>
+                        {category === "all" ? "所有场景" : category}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+
+                <Select value={selectedPool} onValueChange={setSelectedPool}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="选择流量池" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {pools.map((pool) => (
+                      <SelectItem key={pool} value={pool}>
+                        {pool === "all" ? "所有流量池" : pool}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="bg-gray-50">
+                      <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">用户</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">公司</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">价值</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">评分</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">微信账号</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">标签</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium text-gray-500">操作</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y">
+                    {filteredUsers.map((user) => (
+                      <tr key={user.id} className="hover:bg-gray-50">
+                        <td className="px-4 py-3 whitespace-nowrap">
+                          <div className="flex items-center gap-3">
+                            <Avatar>
+                              <img src={user.avatar || "/placeholder.svg"} alt={user.name} />
+                            </Avatar>
+                            <div>
+                              <p className="font-medium">{user.name}</p>
+                              <p className="text-sm text-gray-500">{user.lastActive}</p>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-4 py-3 whitespace-nowrap">
+                          <p className="font-medium">{user.company}</p>
+                          <p className="text-sm text-gray-500">{user.category}</p>
+                        </td>
+                        <td className="px-4 py-3 whitespace-nowrap">
+                          <p className="font-medium">¥{user.value.toLocaleString()}</p>
+                          <p className="text-sm text-gray-500">{user.pool}</p>
+                        </td>
+                        <td className="px-4 py-3 whitespace-nowrap">
+                          <Badge
+                            className={
+                              user.rfmScore >= 90
+                                ? "bg-green-100 text-green-800"
+                                : user.rfmScore >= 80
+                                  ? "bg-blue-100 text-blue-800"
+                                  : user.rfmScore >= 70
+                                    ? "bg-yellow-100 text-yellow-800"
+                                    : "bg-gray-100 text-gray-800"
+                            }
+                          >
+                            {user.rfmScore}
+                          </Badge>
+                        </td>
+                        <td className="px-4 py-3 whitespace-nowrap">
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleWechatClick(user.id)}
+                            className="flex items-center"
+                          >
+                            <MessageCircle className="h-4 w-4 mr-1" />
+                            {user.wechatAccounts.length}个
+                          </Button>
+                        </td>
+                        <td className="px-4 py-3 whitespace-nowrap">
+                          <div className="flex flex-wrap gap-1 max-w-xs">
+                            {user.tags.slice(0, 3).map((tag, index) => (
+                              <Badge key={index} variant="outline" className="text-xs">
+                                {tag}
+                              </Badge>
+                            ))}
+                            {user.tags.length > 3 && (
+                              <Badge variant="outline" className="text-xs">
+                                +{user.tags.length - 3}
+                              </Badge>
+                            )}
+                          </div>
+                        </td>
+                        <td className="px-4 py-3 whitespace-nowrap">
+                          <Button variant="ghost" size="sm" onClick={() => handleUserClick(user.id)}>
+                            <Eye className="h-4 w-4 mr-1" />
+                            查看
+                          </Button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </CollapsibleContent>
+        </Card>
+      </Collapsible>
+
+      {/* 微信账号对话框 */}
+      <Dialog
+        open={selectedWechatDialog.isOpen}
+        onOpenChange={(open) => setSelectedWechatDialog({ ...selectedWechatDialog, isOpen: open })}
+      >
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>关联微信账号</DialogTitle>
+            <DialogDescription>该用户关联的微信账号列表</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            {selectedWechatDialog.accounts.map((account) => (
+              <div key={account.id} className="flex items-center justify-between p-2 border rounded-md">
+                <div className="flex items-center gap-3">
+                  <Avatar className="h-10 w-10">
+                    <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, index) => (
+                        <Badge key={index} variant="secondary" className="text-xs">
+                          {tag}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+                <Button variant="outline" size="sm">
+                  查看详情
+                </Button>
+              </div>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/user-portrait/tags/page.tsx b/app/user-portrait/tags/page.tsx
new file mode 100644
index 0000000..4eb5c91
--- /dev/null
+++ b/app/user-portrait/tags/page.tsx
@@ -0,0 +1,12 @@
+import { TagManagement } from "@/components/user-portrait/tag-management"
+
+export default function TagManagementPage() {
+  return (
+    <div className="container mx-auto p-4 space-y-6">
+      <h1 className="text-3xl font-bold">标签管理</h1>
+      <p className="text-muted-foreground">管理用户标签体系，包括行为标签、场景标签和用户分群</p>
+
+      <TagManagement />
+    </div>
+  )
+}
diff --git a/app/user-profile/loading.tsx b/app/user-profile/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/user-profile/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/user-profile/page.tsx b/app/user-profile/page.tsx
new file mode 100644
index 0000000..0c60582
--- /dev/null
+++ b/app/user-profile/page.tsx
@@ -0,0 +1,135 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search, Filter, Download, Users, UserPlus, UserCheck, UserX } from "lucide-react"
+import { UserProfileOverview } from "@/components/user-profile/user-profile-overview"
+import { UserProfileSegments } from "@/components/user-profile/user-profile-segments"
+import { UserProfileTags } from "@/components/user-profile/user-profile-tags"
+import { UserProfileAnalytics } from "@/components/user-profile/user-profile-analytics"
+
+export default function UserProfilePage() {
+  const [activeTab, setActiveTab] = useState("overview")
+  const [searchQuery, setSearchQuery] = useState("")
+
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-3xl font-bold">用户画像分析</h1>
+        <div className="flex space-x-2">
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            导出报告
+          </Button>
+          <Button>
+            <UserPlus className="mr-2 h-4 w-4" />
+            创建画像模型
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">总用户数</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <Users className="h-5 w-5 text-muted-foreground mr-2" />
+              <div className="text-2xl font-bold">24,521</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">较上月增长 8%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">活跃用户</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <UserCheck className="h-5 w-5 text-green-500 mr-2" />
+              <div className="text-2xl font-bold">16,842</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">活跃率 68.7%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">新增用户</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <UserPlus className="h-5 w-5 text-blue-500 mr-2" />
+              <div className="text-2xl font-bold">1,254</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">较上月增长 12%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">流失用户</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center">
+              <UserX className="h-5 w-5 text-red-500 mr-2" />
+              <div className="text-2xl font-bold">342</div>
+            </div>
+            <p className="text-xs text-muted-foreground mt-1">流失率 1.4%</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>用户画像分析中心</CardTitle>
+          <CardDescription>多维度分析用户特征，构建精准用户画像，支持营销决策</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+            <div className="flex justify-between items-center">
+              <TabsList>
+                <TabsTrigger value="overview">画像概览</TabsTrigger>
+                <TabsTrigger value="segments">用户分群</TabsTrigger>
+                <TabsTrigger value="tags">标签体系</TabsTrigger>
+                <TabsTrigger value="analytics">深度分析</TabsTrigger>
+              </TabsList>
+              <div className="flex space-x-2">
+                <div className="relative w-64">
+                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    placeholder="搜索用户画像..."
+                    className="pl-8"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                  />
+                </div>
+                <Button variant="outline" size="icon">
+                  <Filter className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            <TabsContent value="overview" className="space-y-4">
+              <UserProfileOverview />
+            </TabsContent>
+
+            <TabsContent value="segments" className="space-y-4">
+              <UserProfileSegments />
+            </TabsContent>
+
+            <TabsContent value="tags" className="space-y-4">
+              <UserProfileTags />
+            </TabsContent>
+
+            <TabsContent value="analytics" className="space-y-4">
+              <UserProfileAnalytics />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/app/user-value/loading.tsx b/app/user-value/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/user-value/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/user-value/page.tsx b/app/user-value/page.tsx
new file mode 100644
index 0000000..c9ac019
--- /dev/null
+++ b/app/user-value/page.tsx
@@ -0,0 +1,790 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Progress } from "@/components/ui/progress"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Input } from "@/components/ui/input"
+import {
+  ArrowUpRight,
+  Download,
+  Filter,
+  RefreshCw,
+  Target,
+  TrendingUp,
+  Users,
+  Layers,
+  Tag,
+  BarChart3,
+  Search,
+  HelpCircle,
+  ChevronRight,
+  ChevronDown,
+} from "lucide-react"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
+
+// 真实用户数据
+const mockUsers = [
+  {
+    id: "1",
+    name: "李明华",
+    company: "阿里巴巴集团",
+    recency: 1,
+    frequency: 28,
+    monetary: 45600,
+    rfmScore: 95,
+    level: "高价值",
+    growth: "+8.5%",
+    upgradeFromDays: 45,
+    nextUpgrade: "VIP客户",
+    upgradeProbability: 85,
+  },
+  {
+    id: "2",
+    name: "张雨婷",
+    company: "腾讯科技",
+    recency: 3,
+    frequency: 22,
+    monetary: 32800,
+    rfmScore: 88,
+    level: "高价值",
+    growth: "+6.2%",
+    upgradeFromDays: 28,
+    nextUpgrade: "白金会员",
+    upgradeProbability: 78,
+  },
+  {
+    id: "3",
+    name: "王建国",
+    company: "字节跳动",
+    recency: 2,
+    frequency: 25,
+    monetary: 38900,
+    rfmScore: 91,
+    level: "高价值",
+    growth: "+7.8%",
+    upgradeFromDays: 38,
+    nextUpgrade: "企业VIP",
+    upgradeProbability: 82,
+  },
+  {
+    id: "4",
+    name: "刘思琪",
+    company: "美团点评",
+    recency: 7,
+    frequency: 18,
+    monetary: 25400,
+    rfmScore: 76,
+    level: "中高价值",
+    growth: "+4.1%",
+    upgradeFromDays: 12,
+    nextUpgrade: "高价值用户",
+    upgradeProbability: 68,
+  },
+  {
+    id: "5",
+    name: "陈浩然",
+    company: "京东集团",
+    recency: 4,
+    frequency: 20,
+    monetary: 28700,
+    rfmScore: 82,
+    level: "中高价值",
+    growth: "+5.3%",
+    upgradeFromDays: 22,
+    nextUpgrade: "高价值用户",
+    upgradeProbability: 72,
+  },
+  {
+    id: "6",
+    name: "周欣妍",
+    company: "滴滴出行",
+    recency: 12,
+    frequency: 15,
+    monetary: 18600,
+    rfmScore: 65,
+    level: "中等价值",
+    growth: "+3.2%",
+    upgradeFromDays: 8,
+    nextUpgrade: "中高价值用户",
+    upgradeProbability: 55,
+  },
+  {
+    id: "7",
+    name: "马志强",
+    company: "华为技术",
+    recency: 6,
+    frequency: 16,
+    monetary: 22100,
+    rfmScore: 71,
+    level: "中等价值",
+    growth: "+4.8%",
+    upgradeFromDays: 15,
+    nextUpgrade: "中高价值用户",
+    upgradeProbability: 61,
+  },
+  {
+    id: "8",
+    name: "赵丽娟",
+    company: "小米科技",
+    recency: 15,
+    frequency: 12,
+    monetary: 15800,
+    rfmScore: 58,
+    level: "中等价值",
+    growth: "+2.1%",
+    upgradeFromDays: 5,
+    nextUpgrade: "中高价值用户",
+    upgradeProbability: 45,
+  },
+]
+
+export default function UserValuePage() {
+  const [timeRange, setTimeRange] = useState("30days")
+  const [searchQuery, setSearchQuery] = useState("")
+  const [showModelDialog, setShowModelDialog] = useState(false)
+  const [showUpgradeDialog, setShowUpgradeDialog] = useState(false)
+  const [expandedSections, setExpandedSections] = useState({
+    overview: true,
+    model: false,
+    analysis: true,
+    upgradePaths: false,
+  })
+
+  const filteredUsers = mockUsers.filter(
+    (user) =>
+      user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.company.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const getRFMLevelColor = (level: string) => {
+    switch (level) {
+      case "高价值":
+        return "bg-green-100 text-green-800"
+      case "中高价值":
+        return "bg-blue-100 text-blue-800"
+      case "中等价值":
+        return "bg-yellow-100 text-yellow-800"
+      case "低价值":
+        return "bg-gray-100 text-gray-800"
+      case "流失风险":
+        return "bg-red-100 text-red-800"
+      default:
+        return "bg-gray-100 text-gray-800"
+    }
+  }
+
+  const toggleSection = (section: string) => {
+    setExpandedSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }))
+  }
+
+  return (
+    <div className="container mx-auto p-4 space-y-6">
+      {/* 页面标题和工具栏 */}
+      <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
+        <div>
+          <h1 className="text-3xl font-bold">用户估值</h1>
+          <p className="text-muted-foreground mt-1">用户价值评估与升级路径分析</p>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Select value={timeRange} onValueChange={setTimeRange}>
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="选择时间范围" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="7days">最近7天</SelectItem>
+              <SelectItem value="30days">最近30天</SelectItem>
+              <SelectItem value="90days">最近90天</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon">
+            <Filter className="h-4 w-4" />
+          </Button>
+          <Button variant="outline" size="icon">
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            导出报告
+          </Button>
+        </div>
+      </div>
+
+      {/* 用户估值概览 */}
+      <Collapsible
+        open={expandedSections.overview}
+        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, overview: open }))}
+      >
+        <Card className="border-none shadow-md">
+          <CollapsibleTrigger className="w-full">
+            <CardHeader className="bg-gradient-to-r from-green-50 to-emerald-50 border-b hover:from-green-100 hover:to-emerald-100 transition-colors cursor-pointer">
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-3">
+                  <Target className="h-5 w-5 text-green-600" />
+                  <div className="text-left">
+                    <CardTitle>用户估值概览</CardTitle>
+                    <CardDescription>用户价值评估整体情况</CardDescription>
+                  </div>
+                </div>
+                {expandedSections.overview ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+              </div>
+            </CardHeader>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <CardContent className="p-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <Card className="bg-gradient-to-br from-green-50 to-emerald-50 border-none shadow-sm">
+                  <CardContent className="p-4">
+                    <div className="flex justify-between items-start">
+                      <div>
+                        <div className="text-sm font-medium text-green-600">平均用户估值</div>
+                        <div className="text-2xl font-bold mt-2">¥3,248</div>
+                        <div className="text-sm text-green-600 mt-1 flex items-center">
+                          <ArrowUpRight className="h-4 w-4 mr-1" />
+                          较上月增长 8.2%
+                        </div>
+                      </div>
+                      <div className="bg-green-100 p-2 rounded-full">
+                        <Target className="h-5 w-5 text-green-600" />
+                      </div>
+                    </div>
+                    <div className="mt-3">
+                      <div className="flex justify-between text-xs mb-1">
+                        <span>预期目标</span>
+                        <span>94%</span>
+                      </div>
+                      <Progress value={94} className="h-1.5 bg-green-100" />
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card className="bg-gradient-to-br from-purple-50 to-pink-50 border-none shadow-sm">
+                  <CardContent className="p-4">
+                    <div className="flex justify-between items-start">
+                      <div>
+                        <div className="text-sm font-medium text-purple-600">高价值用户</div>
+                        <div className="text-2xl font-bold mt-2">45,678</div>
+                        <div className="text-sm text-green-600 mt-1 flex items-center">
+                          <ArrowUpRight className="h-4 w-4 mr-1" />
+                          较上月增长 12.3%
+                        </div>
+                      </div>
+                      <div className="bg-purple-100 p-2 rounded-full">
+                        <TrendingUp className="h-5 w-5 text-purple-600" />
+                      </div>
+                    </div>
+                    <div className="mt-3">
+                      <div className="flex justify-between text-xs mb-1">
+                        <span>占总用户比例</span>
+                        <span>28.6%</span>
+                      </div>
+                      <Progress value={28.6} className="h-1.5 bg-purple-100" />
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 border-none shadow-sm">
+                  <CardContent className="p-4">
+                    <div className="flex justify-between items-start">
+                      <div>
+                        <div className="text-sm font-medium text-blue-600">用户价值增长率</div>
+                        <div className="text-2xl font-bold mt-2">15.8%</div>
+                        <div className="text-sm text-green-600 mt-1 flex items-center">
+                          <ArrowUpRight className="h-4 w-4 mr-1" />
+                          较上月提升 2.1%
+                        </div>
+                      </div>
+                      <div className="bg-blue-100 p-2 rounded-full">
+                        <BarChart3 className="h-5 w-5 text-blue-600" />
+                      </div>
+                    </div>
+                    <div className="mt-3">
+                      <div className="flex justify-between text-xs mb-1">
+                        <span>行业平均</span>
+                        <span>11.2%</span>
+                      </div>
+                      <Progress value={141} className="h-1.5 bg-blue-100" />
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card className="bg-gradient-to-br from-amber-50 to-yellow-50 border-none shadow-sm">
+                  <CardContent className="p-4">
+                    <div className="flex justify-between items-start">
+                      <div>
+                        <div className="text-sm font-medium text-amber-600">用户升级率</div>
+                        <div className="text-2xl font-bold mt-2">12.5%</div>
+                        <div className="text-sm text-green-600 mt-1 flex items-center">
+                          <ArrowUpRight className="h-4 w-4 mr-1" />
+                          较上月提升 1.8%
+                        </div>
+                      </div>
+                      <div className="bg-amber-100 p-2 rounded-full">
+                        <Users className="h-5 w-5 text-amber-600" />
+                      </div>
+                    </div>
+                    <div className="mt-3">
+                      <div className="flex justify-between text-xs mb-1">
+                        <span>目标</span>
+                        <span>15%</span>
+                      </div>
+                      <Progress value={83} className="h-1.5 bg-amber-100" />
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </CardContent>
+          </CollapsibleContent>
+        </Card>
+      </Collapsible>
+
+      {/* RFM估值模型 */}
+      <Collapsible
+        open={expandedSections.model}
+        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, model: open }))}
+      >
+        <Card className="border-none shadow-md">
+          <CollapsibleTrigger className="w-full">
+            <CardHeader className="bg-gradient-to-r from-blue-50 to-indigo-50 border-b hover:from-blue-100 hover:to-indigo-100 transition-colors cursor-pointer">
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-3">
+                  <BarChart3 className="h-5 w-5 text-blue-600" />
+                  <div className="text-left">
+                    <CardTitle className="flex items-center gap-2">
+                      RFM用户价值模型
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          setShowModelDialog(true)
+                        }}
+                        className="h-6 w-6 p-0"
+                      >
+                        <HelpCircle className="h-4 w-4" />
+                      </Button>
+                    </CardTitle>
+                    <CardDescription>基于用户行为的价值评估模型</CardDescription>
+                  </div>
+                </div>
+                {expandedSections.model ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+              </div>
+            </CardHeader>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <CardContent className="p-4">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div className="space-y-2">
+                  <h3 className="font-semibold flex items-center">
+                    <span className="bg-red-100 text-red-800 w-6 h-6 rounded-full flex items-center justify-center mr-2">
+                      R
+                    </span>
+                    Recency (最近消费时间)
+                  </h3>
+                  <p className="text-sm text-muted-foreground">用户最近一次交易的时间间隔，时间越短价值越高。</p>
+                  <div className="bg-gray-50 p-3 rounded-md">
+                    <div className="text-sm">
+                      <div className="flex justify-between mb-1">
+                        <span>1-3天</span>
+                        <span className="font-medium">5分</span>
+                      </div>
+                      <div className="flex justify-between mb-1">
+                        <span>4-7天</span>
+                        <span className="font-medium">4分</span>
+                      </div>
+                      <div className="flex justify-between mb-1">
+                        <span>8-14天</span>
+                        <span className="font-medium">3分</span>
+                      </div>
+                      <div className="flex justify-between mb-1">
+                        <span>15-30天</span>
+                        <span className="font-medium">2分</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span>30天以上</span>
+                        <span className="font-medium">1分</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <h3 className="font-semibold flex items-center">
+                    <span className="bg-green-100 text-green-800 w-6 h-6 rounded-full flex items-center justify-center mr-2">
+                      F
+                    </span>
+                    Frequency (消费频率)
+                  </h3>
+                  <p className="text-sm text-muted-foreground">用户在一段时间内的交易次数，频率越高价值越高。</p>
+                  <div className="bg-gray-50 p-3 rounded-md">
+                    <div className="text-sm">
+                      <div className="flex justify-between mb-1">
+                        <span>25次以上/月</span>
+                        <span className="font-medium">5分</span>
+                      </div>
+                      <div className="flex justify-between mb-1">
+                        <span>20-24次/月</span>
+                        <span className="font-medium">4分</span>
+                      </div>
+                      <div className="flex justify-between mb-1">
+                        <span>15-19次/月</span>
+                        <span className="font-medium">3分</span>
+                      </div>
+                      <div className="flex justify-between mb-1">
+                        <span>10-14次/月</span>
+                        <span className="font-medium">2分</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span>1-9次/月</span>
+                        <span className="font-medium">1分</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <h3 className="font-semibold flex items-center">
+                    <span className="bg-blue-100 text-blue-800 w-6 h-6 rounded-full flex items-center justify-center mr-2">
+                      M
+                    </span>
+                    Monetary (消费金额)
+                  </h3>
+                  <p className="text-sm text-muted-foreground">用户在一段时间内的消费金额，金额越高价值越高。</p>
+                  <div className="bg-gray-50 p-3 rounded-md">
+                    <div className="text-sm">
+                      <div className="flex justify-between mb-1">
+                        <span>30000元以上</span>
+                        <span className="font-medium">5分</span>
+                      </div>
+                      <div className="flex justify-between mb-1">
+                        <span>20000-29999元</span>
+                        <span className="font-medium">4分</span>
+                      </div>
+                      <div className="flex justify-between mb-1">
+                        <span>10000-19999元</span>
+                        <span className="font-medium">3分</span>
+                      </div>
+                      <div className="flex justify-between mb-1">
+                        <span>5000-9999元</span>
+                        <span className="font-medium">2分</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span>5000元以下</span>
+                        <span className="font-medium">1分</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-6">
+                <h3 className="font-semibold mb-3">RFM评分等级</h3>
+                <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
+                  <div className="bg-green-100 p-3 rounded-md text-center">
+                    <p className="font-medium text-green-800">高价值用户</p>
+                    <p className="text-sm text-green-700">85-100分</p>
+                  </div>
+                  <div className="bg-blue-100 p-3 rounded-md text-center">
+                    <p className="font-medium text-blue-800">中高价值用户</p>
+                    <p className="text-sm text-blue-700">70-84分</p>
+                  </div>
+                  <div className="bg-yellow-100 p-3 rounded-md text-center">
+                    <p className="font-medium text-yellow-800">中等价值用户</p>
+                    <p className="text-sm text-yellow-700">55-69分</p>
+                  </div>
+                  <div className="bg-gray-100 p-3 rounded-md text-center">
+                    <p className="font-medium text-gray-800">低价值用户</p>
+                    <p className="text-sm text-gray-700">40-54分</p>
+                  </div>
+                  <div className="bg-red-100 p-3 rounded-md text-center">
+                    <p className="font-medium text-red-800">流失风险用户</p>
+                    <p className="text-sm text-red-700">0-39分</p>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </CollapsibleContent>
+        </Card>
+      </Collapsible>
+
+      {/* 用户价值分析 */}
+      <Collapsible
+        open={expandedSections.analysis}
+        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, analysis: open }))}
+      >
+        <Card className="border-none shadow-md">
+          <CollapsibleTrigger className="w-full">
+            <CardHeader className="bg-gradient-to-r from-purple-50 to-pink-50 border-b hover:from-purple-100 hover:to-pink-100 transition-colors cursor-pointer">
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-3">
+                  <Users className="h-5 w-5 text-purple-600" />
+                  <div className="text-left">
+                    <CardTitle>用户价值分析</CardTitle>
+                    <CardDescription>用户价值分布与详细数据 ({filteredUsers.length})</CardDescription>
+                  </div>
+                </div>
+                {expandedSections.analysis ? <ChevronDown className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
+              </div>
+            </CardHeader>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <CardContent className="p-4">
+              <div className="mb-4">
+                <div className="relative w-64">
+                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    type="search"
+                    placeholder="搜索用户或公司..."
+                    className="pl-8"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                  />
+                </div>
+              </div>
+
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>用户</TableHead>
+                      <TableHead>公司</TableHead>
+                      <TableHead className="text-center">RFM评分</TableHead>
+                      <TableHead className="text-center">R值</TableHead>
+                      <TableHead className="text-center">F值</TableHead>
+                      <TableHead className="text-center">M值</TableHead>
+                      <TableHead className="text-right">增长率</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredUsers.map((user) => (
+                      <TableRow key={user.id} className="hover:bg-gray-50">
+                        <TableCell className="font-medium">{user.name}</TableCell>
+                        <TableCell>{user.company}</TableCell>
+                        <TableCell className="text-center">
+                          <Badge className={`${getRFMLevelColor(user.level)}`}>
+                            {user.rfmScore} ({user.level})
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="text-center">{user.recency}天</TableCell>
+                        <TableCell className="text-center">{user.frequency}次/月</TableCell>
+                        <TableCell className="text-center">¥{user.monetary.toLocaleString()}</TableCell>
+                        <TableCell className="text-right text-green-600">{user.growth}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </CollapsibleContent>
+        </Card>
+      </Collapsible>
+
+      {/* 用户升级路径分析 */}
+      <Collapsible
+        open={expandedSections.upgradePaths}
+        onOpenChange={(open) => setExpandedSections((prev) => ({ ...prev, upgradePaths: open }))}
+      >
+        <Card className="border-none shadow-md">
+          <CollapsibleTrigger className="w-full">
+            <CardHeader className="bg-gradient-to-r from-orange-50 to-red-50 border-b hover:from-orange-100 hover:to-red-100 transition-colors cursor-pointer">
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-3">
+                  <TrendingUp className="h-5 w-5 text-orange-600" />
+                  <div className="text-left">
+                    <CardTitle className="flex items-center gap-2">
+                      用户升级路径分析
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          setShowUpgradeDialog(true)
+                        }}
+                        className="h-6 w-6 p-0"
+                      >
+                        <HelpCircle className="h-4 w-4" />
+                      </Button>
+                    </CardTitle>
+                    <CardDescription>用户价值提升路径与策略</CardDescription>
+                  </div>
+                </div>
+                {expandedSections.upgradePaths ? (
+                  <ChevronDown className="h-5 w-5" />
+                ) : (
+                  <ChevronRight className="h-5 w-5" />
+                )}
+              </div>
+            </CardHeader>
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <CardContent className="p-4">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <Card className="bg-white shadow-sm">
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-lg flex items-center">
+                      <Target className="h-5 w-5 mr-2 text-green-600" />
+                      升级潜力分析
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">高潜力用户</span>
+                        <span className="text-sm font-medium">2,345</span>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">中潜力用户</span>
+                        <span className="text-sm font-medium">5,678</span>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">低潜力用户</span>
+                        <span className="text-sm font-medium">1,234</span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card className="bg-white shadow-sm">
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-lg flex items-center">
+                      <Layers className="h-5 w-5 mr-2 text-blue-600" />
+                      升级成功率
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">本月升级率</span>
+                        <span className="text-sm font-medium">12.5%</span>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">平均升级周期</span>
+                        <span className="text-sm font-medium">28天</span>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">预期升级用户</span>
+                        <span className="text-sm font-medium">1,856</span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card className="bg-white shadow-sm">
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-lg flex items-center">
+                      <Tag className="h-5 w-5 mr-2 text-purple-600" />
+                      升级价值贡献
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">升级价值增长</span>
+                        <span className="text-sm font-medium">¥2.3M</span>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">平均用户价值提升</span>
+                        <span className="text-sm font-medium">¥1,245</span>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">ROI提升</span>
+                        <span className="text-sm font-medium">35.8%</span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="text-lg font-medium">个人升级路径推荐</h3>
+                <div className="space-y-3">
+                  {filteredUsers.slice(0, 5).map((user) => (
+                    <div
+                      key={user.id}
+                      className="flex items-center justify-between p-4 border rounded-lg hover:bg-gray-50"
+                    >
+                      <div className="flex items-center gap-4">
+                        <div>
+                          <p className="font-medium">{user.name}</p>
+                          <p className="text-sm text-gray-500">{user.company}</p>
+                        </div>
+                        <Badge className={getRFMLevelColor(user.level)}>{user.level}</Badge>
+                      </div>
+                      <div className="flex items-center gap-4">
+                        <div className="text-right">
+                          <p className="text-sm font-medium">下一级别: {user.nextUpgrade}</p>
+                          <p className="text-sm text-gray-500">升级概率: {user.upgradeProbability}%</p>
+                        </div>
+                        <div className="w-24">
+                          <Progress value={user.upgradeProbability} className="h-2" />
+                        </div>
+                        <Button variant="outline" size="sm">
+                          查看策略
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </CardContent>
+          </CollapsibleContent>
+        </Card>
+      </Collapsible>
+
+      {/* RFM模型说明对话框 */}
+      <Dialog open={showModelDialog} onOpenChange={setShowModelDialog}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>RFM模型说明</DialogTitle>
+            <DialogDescription>RFM模型是一种用于客户价值评估的经典方法</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="p-4 bg-blue-50 rounded-lg">
+              <h4 className="font-medium mb-2">什么是RFM模型？</h4>
+              <p className="text-sm text-gray-600">
+                RFM模型是一种用于分析客户价值和客户创利能力的重要工具，通过分析客户的Recency（最近一次购买时间）、Frequency（购买频率）和Monetary（购买金额）三个维度来评估客户价值。
+              </p>
+            </div>
+            <div className="p-4 bg-green-50 rounded-lg">
+              <h4 className="font-medium mb-2">如何使用RFM评分？</h4>
+              <p className="text-sm text-gray-600">
+                每个维度按1-5分评分，总分15分。我们将总分转换为0-100的百分制，便于理解和比较。高分用户是我们的核心客户，需要重点维护和深度挖掘。
+              </p>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 升级路径说明对话框 */}
+      <Dialog open={showUpgradeDialog} onOpenChange={setShowUpgradeDialog}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>用户升级路径分析</DialogTitle>
+            <DialogDescription>基于用户行为数据预测用户价值提升路径</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="p-4 bg-purple-50 rounded-lg">
+              <h4 className="font-medium mb-2">升级路径是什么？</h4>
+              <p className="text-sm text-gray-600">
+                升级路径是基于用户当前的RFM评分、行为模式和历史数据，预测用户可能的价值提升方向和概率。帮助制定个性化的用户运营策略。
+              </p>
+            </div>
+            <div className="p-4 bg-orange-50 rounded-lg">
+              <h4 className="font-medium mb-2">如何制定升级策略？</h4>
+              <p className="text-sm text-gray-600">
+                系统会根据用户的弱势维度（R、F、M中得分较低的）推荐相应的运营策略，如优惠券刺激消费频率、个性化推荐提升客单价等。
+              </p>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/wechat-accounts/[id]/page.tsx b/app/wechat-accounts/[id]/page.tsx
new file mode 100644
index 0000000..64a43f4
--- /dev/null
+++ b/app/wechat-accounts/[id]/page.tsx
@@ -0,0 +1,766 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import {
+  ChevronLeft,
+  Smartphone,
+  Users,
+  Star,
+  Clock,
+  MessageSquare,
+  Shield,
+  Info,
+  UserPlus,
+  Search,
+  Filter,
+  Tag,
+  ChevronRight,
+} from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Progress } from "@/components/ui/progress"
+import { Input } from "@/components/ui/input"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Tooltip as UITooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+
+interface RestrictionRecord {
+  id: string
+  date: string
+  reason: string
+  recoveryTime: string
+  type: "friend_limit" | "marketing" | "spam" | "other"
+}
+
+interface FriendTag {
+  id: string
+  name: string
+  color: string
+}
+
+interface WechatFriend {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  remark: string
+  addTime: string
+  lastInteraction: string
+  tags: FriendTag[]
+  region: string
+  source: string
+  notes: string
+}
+
+interface WechatAccountDetail {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  deviceId: string
+  deviceName: string
+  friendCount: number
+  todayAdded: number
+  status: "normal" | "abnormal"
+  lastActive: string
+  messageCount: number
+  activeRate: number
+  // 新增和修改的字段
+  accountAge: {
+    years: number
+    months: number
+  }
+  totalChats: number
+  chatFrequency: number // 每日平均聊天次数
+  restrictionRecords: RestrictionRecord[]
+  isVerified: boolean
+  firstMomentDate: string
+  accountWeight: number
+  weightFactors: {
+    restrictionFactor: number
+    verificationFactor: number
+    ageFactor: number
+    activityFactor: number
+  }
+  weeklyStats: {
+    date: string
+    friends: number
+    messages: number
+  }[]
+  friends: WechatFriend[]
+}
+
+export default function WechatAccountDetailPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [account, setAccount] = useState<WechatAccountDetail | null>(null)
+  const [showRestrictions, setShowRestrictions] = useState(false)
+  const [showTransferConfirm, setShowTransferConfirm] = useState(false)
+  const [showFriendDetail, setShowFriendDetail] = useState(false)
+  const [selectedFriend, setSelectedFriend] = useState<WechatFriend | null>(null)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [currentPage, setCurrentPage] = useState(1)
+  const [activeTab, setActiveTab] = useState("overview")
+  const friendsPerPage = 10
+
+  useEffect(() => {
+    // 模拟API调用获取账号详情
+    const fetchAccount = async () => {
+      // 生成随机标签
+      const generateRandomTags = (count: number) => {
+        const tagPool = [
+          { name: "潜在客户", color: "bg-blue-100 text-blue-800" },
+          { name: "高意向", color: "bg-green-100 text-green-800" },
+          { name: "已成交", color: "bg-purple-100 text-purple-800" },
+          { name: "需跟进", color: "bg-yellow-100 text-yellow-800" },
+          { name: "活跃用户", color: "bg-indigo-100 text-indigo-800" },
+          { name: "沉默用户", color: "bg-gray-100 text-gray-800" },
+          { name: "企业客户", color: "bg-red-100 text-red-800" },
+          { name: "个人用户", color: "bg-pink-100 text-pink-800" },
+          { name: "新增好友", color: "bg-emerald-100 text-emerald-800" },
+          { name: "老客户", color: "bg-amber-100 text-amber-800" },
+        ]
+
+        return Array.from({ length: Math.floor(Math.random() * count) + 1 }, () => {
+          const randomTag = tagPool[Math.floor(Math.random() * tagPool.length)]
+          return {
+            id: `tag-${Math.random().toString(36).substring(2, 9)}`,
+            name: randomTag.name,
+            color: randomTag.color,
+          }
+        })
+      }
+
+      // 生成随机好友
+      const friendCount = Math.floor(Math.random() * (300 - 150)) + 150
+      const generateFriends = (count: number) => {
+        return Array.from({ length: count }, (_, i) => {
+          const firstName = ["张", "王", "李", "赵", "陈", "刘", "杨", "黄", "周", "吴"][Math.floor(Math.random() * 10)]
+          const secondName = ["小", "大", "明", "华", "强", "伟", "芳", "娜", "秀", "英"][
+            Math.floor(Math.random() * 10)
+          ]
+          const lastName = ["明", "华", "强", "伟", "芳", "娜", "秀", "英", "军", "杰"][Math.floor(Math.random() * 10)]
+          const nickname = firstName + secondName + lastName
+
+          // 生成随机的添加时间（过去1年内）
+          const addDate = new Date()
+          addDate.setDate(addDate.getDate() - Math.floor(Math.random() * 365))
+
+          // 生成随机的最后互动时间（过去30天内）
+          const lastDate = new Date()
+          lastDate.setDate(lastDate.getDate() - Math.floor(Math.random() * 30))
+
+          return {
+            id: `friend-${i}`,
+            avatar: `/placeholder.svg?height=40&width=40&text=${nickname[0]}`,
+            nickname,
+            wechatId: `wxid_${Math.random().toString(36).substring(2, 9)}`,
+            remark:
+              Math.random() > 0.5
+                ? `${nickname}（${["同事", "客户", "朋友", "同学"][Math.floor(Math.random() * 4)]}）`
+                : "",
+            addTime: addDate.toISOString().split("T")[0],
+            lastInteraction: lastDate.toISOString().split("T")[0],
+            tags: generateRandomTags(3),
+            region: ["广东", "北京", "上海", "浙江", "江苏", "四川", "湖北", "福建", "山东", "河南"][
+              Math.floor(Math.random() * 10)
+            ],
+            source: ["抖音", "小红书", "朋友介绍", "搜索添加", "群聊", "附近的人", "名片分享"][
+              Math.floor(Math.random() * 7)
+            ],
+            notes:
+              Math.random() > 0.7
+                ? ["对产品很感兴趣", "需要进一步跟进", "已购买过产品", "价格敏感", "需要更多信息"][
+                    Math.floor(Math.random() * 5)
+                  ]
+                : "",
+          }
+        })
+      }
+
+      const friends = generateFriends(friendCount)
+
+      const mockAccount: WechatAccountDetail = {
+        id: params.id,
+        avatar:
+          "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jn_e7fcc2a4-3560-478d-911a-4ccd69c6392g.jpg-a8zVtwxMuSrPWN9dfWH93EBY0yM3Dh.jpeg",
+        nickname: "卡若-25vig",
+        wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+        deviceId: "device-1",
+        deviceName: "设备1",
+        friendCount: friends.length,
+        todayAdded: 12,
+        status: "normal",
+        lastActive: new Date().toLocaleString(),
+        messageCount: 1234,
+        activeRate: 87,
+        accountAge: {
+          years: 2,
+          months: 8,
+        },
+        totalChats: 15234,
+        chatFrequency: 42,
+        restrictionRecords: [
+          {
+            id: "1",
+            date: "2024-02-25",
+            reason: "添加好友过于频繁",
+            recoveryTime: "2024-02-26",
+            type: "friend_limit",
+          },
+          {
+            id: "2",
+            date: "2024-01-15",
+            reason: "营销内容违规",
+            recoveryTime: "2024-01-16",
+            type: "marketing",
+          },
+        ],
+        isVerified: true,
+        firstMomentDate: "2021-06-15",
+        accountWeight: 85,
+        weightFactors: {
+          restrictionFactor: 0.8,
+          verificationFactor: 1.0,
+          ageFactor: 0.9,
+          activityFactor: 0.85,
+        },
+        weeklyStats: Array.from({ length: 7 }, (_, i) => ({
+          date: `Day ${i + 1}`,
+          friends: Math.floor(Math.random() * 50) + 50,
+          messages: Math.floor(Math.random() * 100) + 100,
+        })),
+        friends: friends,
+      }
+      setAccount(mockAccount)
+    }
+
+    fetchAccount()
+  }, [params.id])
+
+  if (!account) {
+    return <div>加载中...</div>
+  }
+
+  const getWeightColor = (weight: number) => {
+    if (weight >= 80) return "text-green-600"
+    if (weight >= 60) return "text-yellow-600"
+    return "text-red-600"
+  }
+
+  const getWeightDescription = (weight: number) => {
+    if (weight >= 80) return "账号状态良好"
+    if (weight >= 60) return "账号状态一般"
+    return "账号状态较差"
+  }
+
+  const calculateMaxDailyAdds = (weight: number) => {
+    const baseLimit = 20
+    return Math.floor(baseLimit * (weight / 100))
+  }
+
+  const getRestrictionTypeColor = (type: string) => {
+    switch (type) {
+      case "friend_limit":
+        return "text-yellow-600"
+      case "marketing":
+        return "text-red-600"
+      case "spam":
+        return "text-orange-600"
+      default:
+        return "text-gray-600"
+    }
+  }
+
+  const formatAccountAge = (age: { years: number; months: number }) => {
+    if (age.years === 0) {
+      return `${age.months}个月`
+    }
+    if (age.months === 0) {
+      return `${age.years}年`
+    }
+    return `${age.years}年${age.months}个月`
+  }
+
+  const handleTransferFriends = () => {
+    setShowTransferConfirm(true)
+  }
+
+  const confirmTransferFriends = () => {
+    setShowTransferConfirm(false)
+    // 跳转到新建计划的订单导入场景
+    router.push(`/scenarios/new?type=order&source=${account.wechatId}`)
+  }
+
+  const handleFriendClick = (friend: WechatFriend) => {
+    setSelectedFriend(friend)
+    setShowFriendDetail(true)
+  }
+
+  // 过滤好友
+  const filteredFriends = account.friends.filter(
+    (friend) =>
+      friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      friend.remark.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      friend.tags.some((tag) => tag.name.toLowerCase().includes(searchQuery.toLowerCase())),
+  )
+
+  // 分页
+  const totalPages = Math.ceil(filteredFriends.length / friendsPerPage)
+  const paginatedFriends = filteredFriends.slice((currentPage - 1) * friendsPerPage, currentPage * friendsPerPage)
+
+  return (
+    <TooltipProvider>
+      <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen pb-16">
+        <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
+          <div className="flex items-center p-4">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="ml-2 text-lg font-medium">账号详情</h1>
+          </div>
+        </header>
+
+        <div className="p-4 space-y-4">
+          <Card className="p-6">
+            <div className="flex items-center space-x-4">
+              <div className="relative">
+                <Avatar className="h-16 w-16 ring-4 ring-offset-2 ring-blue-500/20">
+                  <AvatarImage src={account.avatar} />
+                  <AvatarFallback>{account.nickname[0]}</AvatarFallback>
+                </Avatar>
+                {account.isVerified && (
+                  <Badge variant="success" className="absolute -top-2 -right-2 px-2 py-0.5 text-xs">
+                    已认证
+                  </Badge>
+                )}
+              </div>
+              <div className="flex-1">
+                <div className="flex items-center space-x-2">
+                  <h2 className="text-xl font-semibold">{account.nickname}</h2>
+                  <Badge variant={account.status === "normal" ? "success" : "destructive"}>
+                    {account.status === "normal" ? "正常" : "异常"}
+                  </Badge>
+                </div>
+                <p className="text-sm text-gray-500 mt-1">微信号：{account.wechatId}</p>
+                <div className="flex gap-2 mt-2">
+                  <Button variant="outline" onClick={() => router.push(`/devices/${account.deviceId}`)}>
+                    <Smartphone className="w-4 h-4 mr-2" />
+                    {account.deviceName}
+                  </Button>
+                  <Button variant="outline" onClick={handleTransferFriends}>
+                    <UserPlus className="w-4 h-4 mr-2" />
+                    好友转移
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="overview">账号概览</TabsTrigger>
+              <TabsTrigger value="friends">好友列表 ({account.friendCount})</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="overview" className="space-y-4 mt-4">
+              {/* 账号基础信息 */}
+              <div className="grid grid-cols-2 gap-4">
+                <Card className="p-4">
+                  <div className="flex items-center space-x-2 text-gray-500 mb-2">
+                    <Clock className="w-4 h-4" />
+                    <span className="text-sm">账号年龄</span>
+                  </div>
+                  <div className="text-2xl font-bold text-blue-600">{formatAccountAge(account.accountAge)}</div>
+                  <div className="text-sm text-gray-500 mt-1">注册时间：{account.firstMomentDate}</div>
+                </Card>
+
+                <Card className="p-4">
+                  <div className="flex items-center space-x-2 text-gray-500 mb-2">
+                    <MessageSquare className="w-4 h-4" />
+                    <span className="text-sm">活跃程度</span>
+                  </div>
+                  <div className="text-2xl font-bold text-blue-600">{account.chatFrequency}次/天</div>
+                  <div className="text-sm text-gray-500 mt-1">总聊天数：{account.totalChats.toLocaleString()}</div>
+                </Card>
+              </div>
+
+              {/* 账号权重评估 */}
+              <Card className="p-4">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center space-x-2">
+                    <Star className="w-4 h-4 text-yellow-500" />
+                    <span className="font-medium">账号权重评估</span>
+                  </div>
+                  <div className={`flex items-center space-x-2 ${getWeightColor(account.accountWeight)}`}>
+                    <span className="text-2xl font-bold">{account.accountWeight}</span>
+                    <span className="text-sm">分</span>
+                  </div>
+                </div>
+                <p className="text-sm text-gray-500 mb-4">{getWeightDescription(account.accountWeight)}</p>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between text-sm">
+                    <span>账号年龄</span>
+                    <Progress value={account.weightFactors.ageFactor * 100} className="w-32" />
+                    <span>{(account.weightFactors.ageFactor * 100).toFixed(0)}%</span>
+                  </div>
+                  <div className="flex items-center justify-between text-sm">
+                    <span>活跃度</span>
+                    <Progress value={account.weightFactors.activityFactor * 100} className="w-32" />
+                    <span>{(account.weightFactors.activityFactor * 100).toFixed(0)}%</span>
+                  </div>
+                  <div className="flex items-center justify-between text-sm">
+                    <span>限制影响</span>
+                    <Progress value={account.weightFactors.restrictionFactor * 100} className="w-32" />
+                    <span>{(account.weightFactors.restrictionFactor * 100).toFixed(0)}%</span>
+                  </div>
+                  <div className="flex items-center justify-between text-sm">
+                    <span>实名认证</span>
+                    <Progress value={account.weightFactors.verificationFactor * 100} className="w-32" />
+                    <span>{(account.weightFactors.verificationFactor * 100).toFixed(0)}%</span>
+                  </div>
+                </div>
+              </Card>
+
+              {/* 添加好友统计 */}
+              <Card className="p-4">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center space-x-2">
+                    <Users className="w-4 h-4 text-blue-500" />
+                    <span className="font-medium">添加好友统计</span>
+                  </div>
+                  <UITooltip>
+                    <TooltipTrigger>
+                      <Info className="w-4 h-4 text-gray-400" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>根据账号权重计算每日可添加好友数量</p>
+                    </TooltipContent>
+                  </UITooltip>
+                </div>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm text-gray-500">今日已添加</span>
+                    <span className="text-xl font-bold text-blue-600">{account.todayAdded}</span>
+                  </div>
+                  <div>
+                    <div className="flex justify-between text-sm mb-2">
+                      <span className="text-gray-500">添加进度</span>
+                      <span>
+                        {account.todayAdded}/{calculateMaxDailyAdds(account.accountWeight)}
+                      </span>
+                    </div>
+                    <Progress
+                      value={(account.todayAdded / calculateMaxDailyAdds(account.accountWeight)) * 100}
+                      className="h-2"
+                    />
+                  </div>
+                  <div className="text-sm text-gray-500">
+                    根据当前账号权重({account.accountWeight}分)，每日最多可添加{" "}
+                    <span className="font-medium text-blue-600">{calculateMaxDailyAdds(account.accountWeight)}</span>{" "}
+                    个好友
+                  </div>
+                </div>
+              </Card>
+
+              {/* 限制记录 */}
+              <Card className="p-4">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center space-x-2">
+                    <Shield className="w-4 h-4 text-red-500" />
+                    <span className="font-medium">限制记录</span>
+                  </div>
+                  <Badge variant="outline" className="cursor-pointer" onClick={() => setShowRestrictions(true)}>
+                    共 {account.restrictionRecords.length} 次
+                  </Badge>
+                </div>
+                <div className="space-y-2">
+                  {account.restrictionRecords.slice(0, 2).map((record) => (
+                    <div key={record.id} className="text-sm">
+                      <div className="flex items-center justify-between">
+                        <span className={getRestrictionTypeColor(record.type)}>{record.reason}</span>
+                        <span className="text-gray-500">{record.date}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="friends" className="space-y-4 mt-4">
+              <Card className="p-4">
+                <div className="space-y-4">
+                  {/* 搜索栏 */}
+                  <div className="flex items-center space-x-2">
+                    <div className="relative flex-1">
+                      <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                      <Input
+                        placeholder="搜索好友昵称/微信号/备注/标签"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        className="pl-9"
+                      />
+                    </div>
+                    <Button variant="outline" size="icon">
+                      <Filter className="h-4 w-4" />
+                    </Button>
+                  </div>
+
+                  {/* 好友列表 */}
+                  <div className="space-y-2">
+                    {paginatedFriends.length === 0 ? (
+                      <div className="text-center py-8 text-gray-500">未找到匹配的好友</div>
+                    ) : (
+                      paginatedFriends.map((friend) => (
+                        <div
+                          key={friend.id}
+                          className="flex items-center p-3 border rounded-lg hover:bg-gray-50 cursor-pointer"
+                          onClick={() => handleFriendClick(friend)}
+                        >
+                          <Avatar className="h-10 w-10 mr-3">
+                            <AvatarImage src={friend.avatar} />
+                            <AvatarFallback>{friend.nickname[0]}</AvatarFallback>
+                          </Avatar>
+                          <div className="flex-1 min-w-0">
+                            <div className="flex items-center justify-between">
+                              <div className="font-medium truncate">
+                                {friend.nickname}
+                                {friend.remark && <span className="text-gray-500 ml-1">({friend.remark})</span>}
+                              </div>
+                              <ChevronRight className="h-4 w-4 text-gray-400" />
+                            </div>
+                            <div className="text-sm text-gray-500 truncate">{friend.wechatId}</div>
+                            <div className="flex flex-wrap gap-1 mt-1">
+                              {friend.tags.slice(0, 3).map((tag) => (
+                                <span key={tag.id} className={`text-xs px-2 py-0.5 rounded-full ${tag.color}`}>
+                                  {tag.name}
+                                </span>
+                              ))}
+                              {friend.tags.length > 3 && (
+                                <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">
+                                  +{friend.tags.length - 3}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      ))
+                    )}
+                  </div>
+
+                  {/* 分页 */}
+                  {totalPages > 1 && (
+                    <Pagination>
+                      <PaginationContent>
+                        <PaginationItem>
+                          <PaginationPrevious
+                            href="#"
+                            onClick={(e) => {
+                              e.preventDefault()
+                              setCurrentPage((prev) => Math.max(1, prev - 1))
+                            }}
+                          />
+                        </PaginationItem>
+                        {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                          let pageNumber
+                          if (totalPages <= 5) {
+                            pageNumber = i + 1
+                          } else if (currentPage <= 3) {
+                            pageNumber = i + 1
+                          } else if (currentPage >= totalPages - 2) {
+                            pageNumber = totalPages - 4 + i
+                          } else {
+                            pageNumber = currentPage - 2 + i
+                          }
+                          return (
+                            <PaginationItem key={pageNumber}>
+                              <PaginationLink
+                                href="#"
+                                isActive={currentPage === pageNumber}
+                                onClick={(e) => {
+                                  e.preventDefault()
+                                  setCurrentPage(pageNumber)
+                                }}
+                              >
+                                {pageNumber}
+                              </PaginationLink>
+                            </PaginationItem>
+                          )
+                        })}
+                        <PaginationItem>
+                          <PaginationNext
+                            href="#"
+                            onClick={(e) => {
+                              e.preventDefault()
+                              setCurrentPage((prev) => Math.min(totalPages, prev + 1))
+                            }}
+                          />
+                        </PaginationItem>
+                      </PaginationContent>
+                    </Pagination>
+                  )}
+                </div>
+              </Card>
+            </TabsContent>
+          </Tabs>
+
+          {/* 限制记录详情弹窗 */}
+          <Dialog open={showRestrictions} onOpenChange={setShowRestrictions}>
+            <DialogContent className="max-w-md">
+              <DialogHeader>
+                <DialogTitle>限制记录详情</DialogTitle>
+                <DialogDescription>每次限制恢复时间为24小时</DialogDescription>
+              </DialogHeader>
+              <ScrollArea className="max-h-[400px]">
+                <div className="space-y-4">
+                  {account.restrictionRecords.map((record) => (
+                    <div key={record.id} className="border-b pb-4 last:border-0">
+                      <div className="flex justify-between items-start">
+                        <div className={`text-sm ${getRestrictionTypeColor(record.type)}`}>{record.reason}</div>
+                        <Badge variant="outline">{record.date}</Badge>
+                      </div>
+                      <div className="text-sm text-gray-500 mt-1">恢复时间：{record.recoveryTime}</div>
+                    </div>
+                  ))}
+                </div>
+              </ScrollArea>
+            </DialogContent>
+          </Dialog>
+
+          {/* 好友转移确认弹窗 */}
+          <Dialog open={showTransferConfirm} onOpenChange={setShowTransferConfirm}>
+            <DialogContent className="max-w-md">
+              <DialogHeader>
+                <DialogTitle>好友转移确认</DialogTitle>
+                <DialogDescription>即将导出该微信号的好友列表，用于创建新的获客计划</DialogDescription>
+              </DialogHeader>
+              <div className="py-4">
+                <div className="flex items-center space-x-3 p-3 bg-blue-50 rounded-lg">
+                  <Avatar className="h-10 w-10">
+                    <AvatarImage src={account.avatar} />
+                    <AvatarFallback>{account.nickname[0]}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <div className="font-medium">{account.nickname}</div>
+                    <div className="text-sm text-gray-500">{account.wechatId}</div>
+                  </div>
+                </div>
+                <div className="mt-4 text-sm text-gray-500">
+                  <p>• 将导出该账号下的所有好友信息</p>
+                  <p>• 好友信息将用于创建新的订单获客计划</p>
+                  <p>• 导出过程中请勿关闭页面</p>
+                </div>
+              </div>
+              <DialogFooter>
+                <Button variant="outline" onClick={() => setShowTransferConfirm(false)}>
+                  取消
+                </Button>
+                <Button onClick={confirmTransferFriends}>确认转移</Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+
+          {/* 好友详情弹窗 */}
+          <Dialog open={showFriendDetail} onOpenChange={setShowFriendDetail}>
+            <DialogContent className="max-w-md">
+              <DialogHeader>
+                <DialogTitle>好友详情</DialogTitle>
+              </DialogHeader>
+              {selectedFriend && (
+                <div className="space-y-4">
+                  <div className="flex items-center space-x-3">
+                    <Avatar className="h-16 w-16">
+                      <AvatarImage src={selectedFriend.avatar} />
+                      <AvatarFallback>{selectedFriend.nickname[0]}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <div className="text-xl font-medium">{selectedFriend.nickname}</div>
+                      <div className="text-sm text-gray-500">{selectedFriend.wechatId}</div>
+                      {selectedFriend.remark && (
+                        <div className="text-sm text-gray-500">备注: {selectedFriend.remark}</div>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-1">
+                      <div className="text-sm text-gray-500">添加时间</div>
+                      <div className="font-medium">{selectedFriend.addTime}</div>
+                    </div>
+                    <div className="space-y-1">
+                      <div className="text-sm text-gray-500">最近互动</div>
+                      <div className="font-medium">{selectedFriend.lastInteraction}</div>
+                    </div>
+                    <div className="space-y-1">
+                      <div className="text-sm text-gray-500">地区</div>
+                      <div className="font-medium">{selectedFriend.region}</div>
+                    </div>
+                    <div className="space-y-1">
+                      <div className="text-sm text-gray-500">来源</div>
+                      <div className="font-medium">{selectedFriend.source}</div>
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="text-sm text-gray-500 flex items-center">
+                      <Tag className="h-4 w-4 mr-1" />
+                      标签
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                      {selectedFriend.tags.map((tag) => (
+                        <span key={tag.id} className={`text-sm px-2 py-1 rounded-full ${tag.color}`}>
+                          {tag.name}
+                        </span>
+                      ))}
+                      {selectedFriend.tags.length === 0 && <span className="text-sm text-gray-500">暂无标签</span>}
+                    </div>
+                  </div>
+
+                  {selectedFriend.notes && (
+                    <div className="space-y-2">
+                      <div className="text-sm text-gray-500">备注信息</div>
+                      <div className="p-3 bg-gray-50 rounded-lg text-sm">{selectedFriend.notes}</div>
+                    </div>
+                  )}
+
+                  <div className="flex justify-end space-x-2">
+                    <Button variant="outline" onClick={() => setShowFriendDetail(false)}>
+                      关闭
+                    </Button>
+                    <Button
+                      onClick={() => {
+                        setShowFriendDetail(false)
+                        router.push(`/traffic-pool?source=${selectedFriend.wechatId}`)
+                      }}
+                    >
+                      添加到流量池
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </DialogContent>
+          </Dialog>
+        </div>
+      </div>
+    </TooltipProvider>
+  )
+}
diff --git a/app/wechat-accounts/loading.tsx b/app/wechat-accounts/loading.tsx
new file mode 100644
index 0000000..5a4bf13
--- /dev/null
+++ b/app/wechat-accounts/loading.tsx
@@ -0,0 +1,59 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export default function WechatAccountsLoading() {
+  return (
+    <div className="container mx-auto p-4 space-y-6">
+      <div className="flex justify-between items-center mb-6">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-10 w-32" />
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {Array(6)
+          .fill(0)
+          .map((_, i) => (
+            <div key={i} className="border rounded-lg p-4 shadow-sm">
+              <div className="flex items-center space-x-4 mb-4">
+                <Skeleton className="h-12 w-12 rounded-full" />
+                <div className="space-y-2">
+                  <Skeleton className="h-5 w-32" />
+                  <Skeleton className="h-4 w-24" />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4 mb-4">
+                <div className="space-y-1">
+                  <Skeleton className="h-4 w-20" />
+                  <Skeleton className="h-6 w-16" />
+                </div>
+                <div className="space-y-1">
+                  <Skeleton className="h-4 w-20" />
+                  <Skeleton className="h-6 w-16" />
+                </div>
+                <div className="space-y-1">
+                  <Skeleton className="h-4 w-20" />
+                  <Skeleton className="h-6 w-16" />
+                </div>
+                <div className="space-y-1">
+                  <Skeleton className="h-4 w-20" />
+                  <Skeleton className="h-6 w-16" />
+                </div>
+              </div>
+
+              <div className="flex justify-between mt-4">
+                <Skeleton className="h-4 w-24" />
+                <div className="flex space-x-2">
+                  <Skeleton className="h-8 w-8 rounded-full" />
+                  <Skeleton className="h-8 w-8 rounded-full" />
+                </div>
+              </div>
+            </div>
+          ))}
+      </div>
+
+      <div className="flex justify-center mt-6">
+        <Skeleton className="h-10 w-64" />
+      </div>
+    </div>
+  )
+}
diff --git a/app/wechat-accounts/page.tsx b/app/wechat-accounts/page.tsx
new file mode 100644
index 0000000..527edfe
--- /dev/null
+++ b/app/wechat-accounts/page.tsx
@@ -0,0 +1,256 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Filter, Search, RefreshCw, ArrowRightLeft, AlertCircle } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { useRouter } from "next/navigation"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { toast } from "@/components/ui/use-toast"
+import { Progress } from "@/components/ui/progress"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+
+interface WechatAccount {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  deviceId: string
+  deviceName: string
+  friendCount: number
+  todayAdded: number
+  remainingAdds: number
+  maxDailyAdds: number
+  status: "normal" | "abnormal"
+  lastActive: string
+}
+
+const generateRandomWechatAccounts = (count: number): WechatAccount[] => {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `account-${index + 1}`,
+    avatar:
+      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jn_e7fcc2a4-3560-478d-911a-4ccd69c6392g.jpg-a8zVtwxMuSrPWN9dfWH93EBY0yM3Dh.jpeg",
+    nickname: `卡若-${["25vig", "zok7e", "ip9ob", "2kna3"][index % 4]}`,
+    wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+    deviceId: `device-${Math.floor(index / 3) + 1}`,
+    deviceName: `设备${Math.floor(index / 3) + 1}`,
+    friendCount: Math.floor(Math.random() * (6300 - 520)) + 520,
+    todayAdded: Math.floor(Math.random() * 15),
+    remainingAdds: Math.floor(Math.random() * 10) + 5,
+    maxDailyAdds: 20,
+    status: Math.random() > 0.2 ? "normal" : "abnormal",
+    lastActive: new Date(Date.now() - Math.random() * 86400000).toLocaleString(),
+  }))
+}
+
+export default function WechatAccountsPage() {
+  const router = useRouter()
+  const [accounts] = useState<WechatAccount[]>(generateRandomWechatAccounts(42))
+  const [searchQuery, setSearchQuery] = useState("")
+  const [currentPage, setCurrentPage] = useState(1)
+  const [isTransferDialogOpen, setIsTransferDialogOpen] = useState(false)
+  const [selectedAccount, setSelectedAccount] = useState<WechatAccount | null>(null)
+  const accountsPerPage = 10
+
+  const filteredAccounts = accounts.filter(
+    (account) =>
+      account.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      account.wechatId.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const paginatedAccounts = filteredAccounts.slice((currentPage - 1) * accountsPerPage, currentPage * accountsPerPage)
+
+  const totalPages = Math.ceil(filteredAccounts.length / accountsPerPage)
+
+  const handleTransferFriends = (account: WechatAccount) => {
+    setSelectedAccount(account)
+    setIsTransferDialogOpen(true)
+  }
+
+  const handleConfirmTransfer = () => {
+    if (!selectedAccount) return
+
+    toast({
+      title: "好友转移计划已创建",
+      description: "请在场景获客中查看详情",
+    })
+    setIsTransferDialogOpen(false)
+    router.push("/scenarios")
+  }
+
+  return (
+    <div className="flex-1 bg-gradient-to-b from-blue-50 to-white min-h-screen">
+      <header className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b">
+        <div className="flex items-center p-4">
+          <Button variant="ghost" size="icon" onClick={() => router.back()}>
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="ml-2 text-lg font-medium">微信号</h1>
+        </div>
+      </header>
+
+      <div className="p-4">
+        <Card className="p-4 mb-4">
+          <div className="flex items-center space-x-4">
+            <div className="relative flex-1">
+              <Search className="w-4 h-4 absolute left-3 top-3 text-gray-400" />
+              <Input
+                className="pl-9"
+                placeholder="搜索微信号/昵称"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <Button variant="outline" size="icon">
+              <Filter className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="icon">
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          </div>
+        </Card>
+
+        <div className="grid gap-3">
+          {paginatedAccounts.map((account) => (
+            <Card
+              key={account.id}
+              className="p-4 hover:shadow-lg transition-all cursor-pointer"
+              onClick={() => router.push(`/wechat-accounts/${account.id}`)}
+            >
+              <div className="flex items-start space-x-4">
+                <Avatar className="h-12 w-12 ring-2 ring-offset-2 ring-blue-500/20">
+                  <AvatarImage src={account.avatar} />
+                  <AvatarFallback>{account.nickname[0]}</AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-2">
+                      <h3 className="font-medium truncate">{account.nickname}</h3>
+                      <Badge variant={account.status === "normal" ? "success" : "destructive"}>
+                        {account.status === "normal" ? "正常" : "异常"}
+                      </Badge>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleTransferFriends(account)
+                      }}
+                    >
+                      <ArrowRightLeft className="h-4 w-4 mr-2" />
+                      好友转移
+                    </Button>
+                  </div>
+                  <div className="mt-1 text-sm text-gray-500 space-y-1">
+                    <div>微信号：{account.wechatId}</div>
+                    <div className="flex items-center justify-between">
+                      <div>好友数量：{account.friendCount}</div>
+                      <div className="text-green-600">今日新增：+{account.todayAdded}</div>
+                    </div>
+                    <div className="space-y-1">
+                      <div className="flex items-center justify-between text-sm">
+                        <div className="flex items-center space-x-1">
+                          <span>今日可添加：</span>
+                          <span className="font-medium">{account.remainingAdds}</span>
+                          <TooltipProvider>
+                            <Tooltip>
+                              <TooltipTrigger>
+                                <AlertCircle className="h-4 w-4 text-gray-400" />
+                              </TooltipTrigger>
+                              <TooltipContent>
+                                <p>每日最多添加 {account.maxDailyAdds} 个好友</p>
+                              </TooltipContent>
+                            </Tooltip>
+                          </TooltipProvider>
+                        </div>
+                        <span className="text-sm text-gray-500">
+                          {account.todayAdded}/{account.maxDailyAdds}
+                        </span>
+                      </div>
+                      <Progress value={(account.todayAdded / account.maxDailyAdds) * 100} className="h-2" />
+                    </div>
+                    <div className="flex items-center justify-between text-xs text-gray-500 pt-2">
+                      <div>所属设备：{account.deviceName}</div>
+                      <div>最后活跃：{account.lastActive}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        <div className="mt-4 flex justify-center">
+          <Pagination>
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setCurrentPage((prev) => Math.max(1, prev - 1))
+                  }}
+                />
+              </PaginationItem>
+              {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+                <PaginationItem key={page}>
+                  <PaginationLink
+                    href="#"
+                    isActive={currentPage === page}
+                    onClick={(e) => {
+                      e.preventDefault()
+                      setCurrentPage(page)
+                    }}
+                  >
+                    {page}
+                  </PaginationLink>
+                </PaginationItem>
+              ))}
+              <PaginationItem>
+                <PaginationNext
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setCurrentPage((prev) => Math.min(totalPages, prev + 1))
+                  }}
+                />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+      </div>
+
+      <Dialog open={isTransferDialogOpen} onOpenChange={setIsTransferDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>好友转移确认</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <p className="text-sm text-gray-500">
+              确认要将 {selectedAccount?.nickname} 的 {selectedAccount?.friendCount}{" "}
+              个好友转移到场景获客吗？系统将自动创建一个获客计划。
+            </p>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsTransferDialogOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={handleConfirmTransfer}>确认转移</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/workspace/auto-group/components/StepByStepPlanForm.tsx b/app/workspace/auto-group/components/StepByStepPlanForm.tsx
new file mode 100644
index 0000000..e98f518
--- /dev/null
+++ b/app/workspace/auto-group/components/StepByStepPlanForm.tsx
@@ -0,0 +1,186 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Plus, Minus, X } from "lucide-react"
+import { DeviceSelector } from "./device-selector"
+import { WechatAccountSelector } from "./wechat-account-selector"
+
+interface StepByStepPlanFormProps {
+  onClose: () => void
+}
+
+export function StepByStepPlanForm({ onClose }: StepByStepPlanFormProps) {
+  const [step, setStep] = useState(1)
+  const [formData, setFormData] = useState({
+    name: "",
+    customerType: "",
+    startDate: "",
+    endDate: "",
+    groupSize: 38,
+    welcomeMessage: "欢迎进群",
+    devices: [] as string[],
+    wechatAccounts: [] as string[],
+  })
+
+  const handleNext = () => {
+    setStep(step + 1)
+  }
+
+  const handlePrevious = () => {
+    setStep(step - 1)
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    // TODO: 提交表单数据
+    onClose()
+  }
+
+  return (
+    <DialogContent className="max-w-2xl">
+      <DialogHeader>
+        <div className="flex items-center justify-between">
+          <DialogTitle>新建计划 - 步骤 {step}/4</DialogTitle>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </DialogHeader>
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {step === 1 && (
+          <>
+            <div>
+              <Label htmlFor="name" className="text-base">
+                计划名称<span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                placeholder="请输入任务名称"
+                className="mt-1.5"
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="customerType" className="text-base">
+                建群客户类型
+              </Label>
+              <Input
+                id="customerType"
+                value={formData.customerType}
+                onChange={(e) => setFormData({ ...formData, customerType: e.target.value })}
+                placeholder="选择客户标签"
+                className="mt-1.5"
+              />
+            </div>
+          </>
+        )}
+
+        {step === 2 && (
+          <>
+            <div>
+              <Label className="text-base">执行期限</Label>
+              <div className="flex items-center space-x-4 mt-1.5">
+                <Input
+                  type="date"
+                  value={formData.startDate}
+                  onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
+                />
+                <span>至</span>
+                <Input
+                  type="date"
+                  value={formData.endDate}
+                  onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <div>
+              <Label className="text-base">建群人数设置</Label>
+              <div className="flex items-center space-x-4 mt-1.5">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={() => setFormData({ ...formData, groupSize: Math.max(1, formData.groupSize - 1) })}
+                >
+                  <Minus className="h-4 w-4" />
+                </Button>
+                <span className="w-12 text-center">{formData.groupSize}</span>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={() => setFormData({ ...formData, groupSize: formData.groupSize + 1 })}
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+                <span>人</span>
+              </div>
+            </div>
+          </>
+        )}
+
+        {step === 3 && (
+          <>
+            <div>
+              <Label htmlFor="welcomeMessage" className="text-base">
+                招呼语
+              </Label>
+              <Input
+                id="welcomeMessage"
+                value={formData.welcomeMessage}
+                onChange={(e) => setFormData({ ...formData, welcomeMessage: e.target.value })}
+                placeholder="欢迎进群"
+                className="mt-1.5"
+              />
+            </div>
+
+            <div>
+              <Label className="text-base">建群设备</Label>
+              <DeviceSelector
+                selectedDevices={formData.devices}
+                onChange={(devices) => setFormData({ ...formData, devices })}
+              />
+            </div>
+          </>
+        )}
+
+        {step === 4 && (
+          <div>
+            <Label className="text-base">关联微信</Label>
+            <WechatAccountSelector
+              selectedAccounts={formData.wechatAccounts}
+              onChange={(accounts) => setFormData({ ...formData, wechatAccounts: accounts })}
+            />
+          </div>
+        )}
+
+        <div className="flex justify-between space-x-4 pt-4">
+          {step > 1 && (
+            <Button type="button" variant="outline" onClick={handlePrevious}>
+              上一步
+            </Button>
+          )}
+          {step < 4 ? (
+            <Button type="button" onClick={handleNext} className="bg-blue-600 hover:bg-blue-700">
+              下一步
+            </Button>
+          ) : (
+            <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
+              完成
+            </Button>
+          )}
+        </div>
+      </form>
+    </DialogContent>
+  )
+}
diff --git a/app/workspace/auto-group/components/auto-group-service.ts b/app/workspace/auto-group/components/auto-group-service.ts
new file mode 100644
index 0000000..fadc17a
--- /dev/null
+++ b/app/workspace/auto-group/components/auto-group-service.ts
@@ -0,0 +1,84 @@
+export interface Friend {
+  id: string
+  nickname: string
+  wechatId: string
+  tags: string[]
+}
+
+export interface GroupConfig {
+  size: number
+  specificWechatIds: string[]
+  keywords: string[]
+  tags: string[]
+}
+
+export class AutoGroupService {
+  static async createGroups(friends: Friend[], config: GroupConfig) {
+    // 1. 过滤好友
+    const filteredFriends = this.filterFriends(friends, config)
+
+    // 2. 分组
+    const groups = this.groupFriends(filteredFriends, config)
+
+    return groups
+  }
+
+  private static filterFriends(friends: Friend[], config: GroupConfig) {
+    return friends.filter((friend) => {
+      // 关键词匹配
+      const matchesKeywords =
+        config.keywords.length === 0 ||
+        config.keywords.some((keyword) => friend.nickname.includes(keyword) || friend.wechatId.includes(keyword))
+
+      // 标签匹配
+      const matchesTags = config.tags.length === 0 || config.tags.some((tag) => friend.tags.includes(tag))
+
+      return matchesKeywords && matchesTags
+    })
+  }
+
+  private static groupFriends(friends: Friend[], config: GroupConfig) {
+    const groups: Friend[][] = []
+    let currentGroup: Friend[] = []
+
+    // 添加指定的微信号到每个组
+    const specificFriends = friends.filter((f) => config.specificWechatIds.includes(f.wechatId))
+
+    // 剩余好友
+    const remainingFriends = friends.filter((f) => !config.specificWechatIds.includes(f.wechatId))
+
+    // 分组
+    for (const friend of remainingFriends) {
+      if (currentGroup.length >= config.size - specificFriends.length) {
+        groups.push([...specificFriends, ...currentGroup])
+        currentGroup = []
+      }
+      currentGroup.push(friend)
+    }
+
+    // 处理最后一组
+    if (currentGroup.length > 0) {
+      groups.push([...specificFriends, ...currentGroup])
+    }
+
+    return groups
+  }
+
+  static async checkGroupSize(groupId: string): Promise<number> {
+    // 模拟检查群大小的API调用
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(Math.floor(Math.random() * 10) + 30)
+      }, 1000)
+    })
+  }
+
+  static async addMembersToGroup(groupId: string, members: Friend[]): Promise<boolean> {
+    // 模拟添加成员的API调用
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true)
+      }, 2000)
+    })
+  }
+}
diff --git a/app/workspace/auto-group/components/columns.tsx b/app/workspace/auto-group/components/columns.tsx
new file mode 100644
index 0000000..1f93549
--- /dev/null
+++ b/app/workspace/auto-group/components/columns.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import type { ColumnDef } from "@tanstack/react-table"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Switch } from "@/components/ui/switch"
+import { Eye, Edit, Trash } from "lucide-react"
+
+export type Plan = {
+  id: string
+  name: string
+  groupCount: number
+  groupSize: number
+  totalFriends: number
+  tags: string[]
+  deviceId: string
+  operator: string
+  timeRange: string
+  contacts: string[]
+  status: "running" | "paused" | "completed"
+}
+
+export const columns: ColumnDef<Plan>[] = [
+  {
+    accessorKey: "id",
+    header: "序号",
+    cell: ({ row }) => row.index + 1,
+  },
+  {
+    accessorKey: "name",
+    header: "计划名称",
+  },
+  {
+    accessorKey: "groupCount",
+    header: "已建群数量",
+  },
+  {
+    accessorKey: "groupSize",
+    header: "建群人数标准",
+    cell: ({ row }) => `${row.original.groupSize}/群`,
+  },
+  {
+    accessorKey: "totalFriends",
+    header: "微信客户数量",
+  },
+  {
+    accessorKey: "tags",
+    header: "群标签",
+    cell: ({ row }) => (
+      <div className="flex gap-1">
+        {row.original.tags.map((tag) => (
+          <Badge key={tag} variant="secondary">
+            {tag}
+          </Badge>
+        ))}
+      </div>
+    ),
+  },
+  {
+    accessorKey: "deviceId",
+    header: "执行设备ID",
+  },
+  {
+    accessorKey: "operator",
+    header: "执行客服号",
+  },
+  {
+    accessorKey: "timeRange",
+    header: "执行时间",
+  },
+  {
+    accessorKey: "contacts",
+    header: "关联微信",
+    cell: ({ row }) => (
+      <div className="flex gap-1">
+        {row.original.contacts.map((contact) => (
+          <Badge key={contact} variant="outline">
+            {contact}
+          </Badge>
+        ))}
+      </div>
+    ),
+  },
+  {
+    accessorKey: "status",
+    header: "状态",
+    cell: ({ row }) => {
+      const status = row.original.status
+      const statusMap = {
+        running: { label: "执行中", color: "bg-green-500" },
+        paused: { label: "已暂停", color: "bg-yellow-500" },
+        completed: { label: "已完成", color: "bg-gray-500" },
+      }
+      return (
+        <div className="flex items-center">
+          <div className={`w-2 h-2 rounded-full mr-2 ${statusMap[status].color}`} />
+          {statusMap[status].label}
+        </div>
+      )
+    },
+  },
+  {
+    id: "actions",
+    header: "操作",
+    cell: ({ row }) => {
+      const plan = row.original
+      return (
+        <div className="flex items-center space-x-2">
+          <Button variant="ghost" size="icon">
+            <Eye className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon">
+            <Edit className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon" className="text-red-500 hover:text-red-600">
+            <Trash className="h-4 w-4" />
+          </Button>
+          <Switch
+            checked={plan.status === "running"}
+            onCheckedChange={() => {
+              // TODO: 更新计划状态
+            }}
+          />
+        </div>
+      )
+    },
+  },
+]
diff --git a/app/workspace/auto-group/components/data-table.tsx b/app/workspace/auto-group/components/data-table.tsx
new file mode 100644
index 0000000..b122f11
--- /dev/null
+++ b/app/workspace/auto-group/components/data-table.tsx
@@ -0,0 +1,95 @@
+"use client"
+
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  getPaginationRowModel,
+  getFilteredRowModel,
+  type ColumnFiltersState,
+} from "@tanstack/react-table"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { useState } from "react"
+import { Search } from "lucide-react"
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+}
+
+export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    state: {
+      columnFilters,
+    },
+  })
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+          <Input
+            placeholder="搜索计划名称..."
+            value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
+            onChange={(event) => table.getColumn("name")?.setFilterValue(event.target.value)}
+            className="pl-9"
+          />
+        </div>
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && "selected"}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  暂无数据
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex items-center justify-end space-x-2">
+        <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+          上一页
+        </Button>
+        <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+          下一页
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/app/workspace/auto-group/components/device-selector.tsx b/app/workspace/auto-group/components/device-selector.tsx
new file mode 100644
index 0000000..edf822a
--- /dev/null
+++ b/app/workspace/auto-group/components/device-selector.tsx
@@ -0,0 +1,67 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Search, Plus } from "lucide-react"
+import { Table } from "@/components/ui/table"
+
+interface DeviceSelectorProps {
+  selectedDevices: string[]
+  onChange: (devices: string[]) => void
+}
+
+export function DeviceSelector({ selectedDevices, onChange }: DeviceSelectorProps) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="mt-1.5">
+      <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
+        <Plus className="h-4 w-4 mr-2" />
+        选择设备
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-4xl">
+          <DialogHeader>
+            <DialogTitle>选择设备</DialogTitle>
+          </DialogHeader>
+
+          <div className="relative">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+            <Input placeholder="搜索设备" className="pl-9" />
+          </div>
+
+          <Table>
+            <thead>
+              <tr>
+                <th>序号</th>
+                <th>设备id</th>
+                <th>当前客服</th>
+                <th>在线状态</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td colSpan={5} className="text-center py-4 text-gray-500">
+                  暂无数据
+                </td>
+              </tr>
+            </tbody>
+          </Table>
+
+          <div className="flex justify-end space-x-4">
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={() => setOpen(false)} className="bg-blue-600 hover:bg-blue-700">
+              确定
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/workspace/auto-group/components/group-assistant.tsx b/app/workspace/auto-group/components/group-assistant.tsx
new file mode 100644
index 0000000..e4582f3
--- /dev/null
+++ b/app/workspace/auto-group/components/group-assistant.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Search, RefreshCw, Users } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Avatar } from "@/components/ui/avatar"
+import { Checkbox } from "@/components/ui/checkbox"
+
+interface Friend {
+  id: string
+  name: string
+  wxid: string
+  avatar: string
+  selected?: boolean
+}
+
+interface GroupAssistantProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onCreateGroup: (friends: Friend[]) => void
+}
+
+export function GroupAssistant({ open, onOpenChange, onCreateGroup }: GroupAssistantProps) {
+  const [searchTerm, setSearchTerm] = useState("")
+  const [selectedTag, setSelectedTag] = useState("")
+  const [friends, setFriends] = useState<Friend[]>([])
+  const [loading, setLoading] = useState(false)
+
+  const handleRefresh = async () => {
+    setLoading(true)
+    // TODO: 刷新好友列表
+    setLoading(false)
+  }
+
+  const handleCreateGroup = () => {
+    const selectedFriends = friends.filter((f) => f.selected)
+    onCreateGroup(selectedFriends)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>建群助手</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex space-x-4 mb-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder="请输入好友信息筛选"
+              className="pl-9"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+          <Select value={selectedTag} onValueChange={setSelectedTag}>
+            <SelectTrigger className="w-32">
+              <SelectValue placeholder="好友分组" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部好友</SelectItem>
+              <SelectItem value="new">新好友</SelectItem>
+              <SelectItem value="business">商务合作</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" onClick={handleRefresh} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />
+            刷新
+          </Button>
+        </div>
+
+        <div className="flex-1 overflow-auto border rounded-md">
+          {friends.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-gray-500">
+              <Users className="h-12 w-12 mb-2" />
+              <p>暂无好友数据</p>
+              <Button variant="link" onClick={handleRefresh} disabled={loading}>
+                点击刷新
+              </Button>
+            </div>
+          ) : (
+            <div className="divide-y">
+              {friends.map((friend) => (
+                <div key={friend.id} className="flex items-center space-x-4 p-4 hover:bg-gray-50">
+                  <Checkbox
+                    checked={friend.selected}
+                    onCheckedChange={(checked) => {
+                      setFriends(friends.map((f) => (f.id === friend.id ? { ...f, selected: !!checked } : f)))
+                    }}
+                  />
+                  <Avatar className="h-10 w-10">
+                    <img src={friend.avatar || "/placeholder.svg"} alt={friend.name} />
+                  </Avatar>
+                  <div className="flex-1">
+                    <div className="font-medium">{friend.name}</div>
+                    <div className="text-sm text-gray-500">{friend.wxid}</div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center justify-between pt-4">
+          <div className="text-sm text-gray-500">已选择 {friends.filter((f) => f.selected).length} 个好友</div>
+          <div className="space-x-4">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              取消
+            </Button>
+            <Button
+              onClick={handleCreateGroup}
+              disabled={friends.filter((f) => f.selected).length === 0}
+              className="bg-blue-600 hover:bg-blue-700"
+            >
+              创建群聊
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/app/workspace/auto-group/components/group-creation-progress.tsx b/app/workspace/auto-group/components/group-creation-progress.tsx
new file mode 100644
index 0000000..5faf18c
--- /dev/null
+++ b/app/workspace/auto-group/components/group-creation-progress.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Progress } from "@/components/ui/progress"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { GroupPreview } from "./group-preview"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { AlertCircle, CheckCircle2 } from "lucide-react"
+
+interface GroupCreationProgressProps {
+  planId: string
+  onComplete: () => void
+}
+
+export function GroupCreationProgress({ planId, onComplete }: GroupCreationProgressProps) {
+  const [groups, setGroups] = useState<any[]>([])
+  const [currentGroupIndex, setCurrentGroupIndex] = useState(0)
+  const [status, setStatus] = useState<"preparing" | "creating" | "completed">("preparing")
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    // 模拟获取分组数据
+    const mockGroups = Array.from({ length: 5 }).map((_, index) => ({
+      id: `group-${index}`,
+      members: Array.from({ length: Math.floor(Math.random() * 10) + 30 }).map((_, mIndex) => ({
+        id: `member-${index}-${mIndex}`,
+        nickname: `用户${mIndex + 1}`,
+        wechatId: `wx_${mIndex}`,
+        tags: [`标签${(mIndex % 3) + 1}`],
+      })),
+    }))
+    setGroups(mockGroups)
+    setStatus("creating")
+  }, [])
+
+  useEffect(() => {
+    if (status === "creating" && currentGroupIndex < groups.length) {
+      const timer = setTimeout(() => {
+        if (currentGroupIndex === groups.length - 1) {
+          setStatus("completed")
+          onComplete()
+        } else {
+          setCurrentGroupIndex((prev) => prev + 1)
+        }
+      }, 3000)
+      return () => clearTimeout(timer)
+    }
+  }, [status, currentGroupIndex, groups.length, onComplete])
+
+  const handleRetryGroup = (groupIndex: number) => {
+    // 模拟重试逻辑
+    setGroups((prev) =>
+      prev.map((group, index) => {
+        if (index === groupIndex) {
+          return {
+            ...group,
+            members: [
+              ...group.members,
+              {
+                id: `retry-member-${Date.now()}`,
+                nickname: `补充用户${group.members.length + 1}`,
+                wechatId: `wx_retry_${Date.now()}`,
+                tags: ["新加入"],
+              },
+            ],
+          }
+        }
+        return group
+      }),
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader className="pb-2">
+          <div className="flex items-center justify-between">
+            <CardTitle className="text-lg font-medium">
+              建群进度
+              <Badge className="ml-2">
+                {status === "preparing" ? "准备中" : status === "creating" ? "创建中" : "已完成"}
+              </Badge>
+            </CardTitle>
+            <div className="text-sm text-gray-500">
+              {currentGroupIndex + 1}/{groups.length}组
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <Progress value={Math.round(((currentGroupIndex + 1) / groups.length) * 100)} className="h-2" />
+        </CardContent>
+      </Card>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      <ScrollArea className="h-[calc(100vh-300px)]">
+        <div className="space-y-4">
+          {groups.map((group, index) => (
+            <GroupPreview
+              key={group.id}
+              groupIndex={index}
+              members={group.members}
+              isCreating={status === "creating" && index === currentGroupIndex}
+              isCompleted={status === "completed" || index < currentGroupIndex}
+              onRetry={() => handleRetryGroup(index)}
+            />
+          ))}
+        </div>
+      </ScrollArea>
+
+      {status === "completed" && (
+        <Alert>
+          <CheckCircle2 className="h-4 w-4" />
+          <AlertDescription>所有群组已创建完成</AlertDescription>
+        </Alert>
+      )}
+    </div>
+  )
+}
diff --git a/app/workspace/auto-group/components/group-preview.tsx b/app/workspace/auto-group/components/group-preview.tsx
new file mode 100644
index 0000000..ef0f0c4
--- /dev/null
+++ b/app/workspace/auto-group/components/group-preview.tsx
@@ -0,0 +1,96 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Progress } from "@/components/ui/progress"
+import { Users, AlertCircle, CheckCircle2 } from "lucide-react"
+
+interface Friend {
+  id: string
+  nickname: string
+  wechatId: string
+  tags: string[]
+}
+
+interface GroupPreviewProps {
+  groupIndex: number
+  members: Friend[]
+  isCreating: boolean
+  isCompleted: boolean
+  onRetry?: () => void
+}
+
+export function GroupPreview({ groupIndex, members, isCreating, isCompleted, onRetry }: GroupPreviewProps) {
+  const [expanded, setExpanded] = useState(false)
+
+  return (
+    <Card className="w-full">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-lg font-medium">
+            群 {groupIndex + 1}
+            <Badge variant={isCompleted ? "success" : isCreating ? "default" : "secondary"} className="ml-2">
+              {isCompleted ? "已完成" : isCreating ? "创建中" : "等待中"}
+            </Badge>
+          </CardTitle>
+          <div className="flex items-center space-x-2">
+            <Users className="w-4 h-4 text-gray-500" />
+            <span className="text-sm text-gray-500">{members.length}/38</span>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isCreating && !isCompleted && (
+          <div className="mb-4">
+            <Progress value={Math.round((members.length / 38) * 100)} />
+          </div>
+        )}
+
+        {expanded ? (
+          <div className="space-y-2">
+            <div className="grid grid-cols-2 gap-2">
+              {members.map((member) => (
+                <div key={member.id} className="text-sm flex items-center space-x-2 bg-gray-50 p-2 rounded">
+                  <span className="truncate">{member.nickname}</span>
+                  {member.tags.length > 0 && (
+                    <Badge variant="outline" className="text-xs">
+                      {member.tags[0]}
+                    </Badge>
+                  )}
+                </div>
+              ))}
+            </div>
+            <Button variant="ghost" size="sm" className="w-full mt-2" onClick={() => setExpanded(false)}>
+              收起
+            </Button>
+          </div>
+        ) : (
+          <Button variant="ghost" size="sm" className="w-full" onClick={() => setExpanded(true)}>
+            查看成员 ({members.length})
+          </Button>
+        )}
+
+        {!isCompleted && members.length < 38 && (
+          <div className="mt-4 flex items-center text-amber-500 text-sm">
+            <AlertCircle className="w-4 h-4 mr-2" />
+            群人数不足38人
+            {onRetry && (
+              <Button variant="ghost" size="sm" className="ml-2 text-blue-500" onClick={onRetry}>
+                继续拉人
+              </Button>
+            )}
+          </div>
+        )}
+
+        {isCompleted && (
+          <div className="mt-4 flex items-center text-green-500 text-sm">
+            <CheckCircle2 className="w-4 h-4 mr-2" />
+            群创建完成
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/app/workspace/auto-group/components/new-plan-form.tsx b/app/workspace/auto-group/components/new-plan-form.tsx
new file mode 100644
index 0000000..b836902
--- /dev/null
+++ b/app/workspace/auto-group/components/new-plan-form.tsx
@@ -0,0 +1,284 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { DialogContent, DialogHeader, DialogTitle } 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 { Badge } from "@/components/ui/badge"
+import { Plus, X } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+interface NewPlanFormProps {
+  onClose: () => void
+}
+
+export function NewPlanForm({ onClose }: NewPlanFormProps) {
+  const [step, setStep] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const [formData, setFormData] = useState({
+    name: "",
+    customerType: "",
+    startDate: "",
+    endDate: "",
+    groupSize: 38,
+    welcomeMessage: "欢迎进群",
+    specificWechatIds: [] as string[],
+    keywords: [] as string[],
+    tags: [] as string[],
+    deviceId: "",
+    operatorId: "",
+  })
+
+  const [tempInput, setTempInput] = useState({
+    wechatId: "",
+    keyword: "",
+    tag: "",
+  })
+
+  const handleAddWechatId = () => {
+    if (tempInput.wechatId && !formData.specificWechatIds.includes(tempInput.wechatId)) {
+      setFormData({
+        ...formData,
+        specificWechatIds: [...formData.specificWechatIds, tempInput.wechatId],
+      })
+      setTempInput({ ...tempInput, wechatId: "" })
+    }
+  }
+
+  const handleAddKeyword = () => {
+    if (tempInput.keyword && !formData.keywords.includes(tempInput.keyword)) {
+      setFormData({
+        ...formData,
+        keywords: [...formData.keywords, tempInput.keyword],
+      })
+      setTempInput({ ...tempInput, keyword: "" })
+    }
+  }
+
+  const handleAddTag = () => {
+    if (tempInput.tag && !formData.tags.includes(tempInput.tag)) {
+      setFormData({
+        ...formData,
+        tags: [...formData.tags, tempInput.tag],
+      })
+      setTempInput({ ...tempInput, tag: "" })
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      // TODO: 实现提交逻辑
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      onClose()
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <DialogContent className="sm:max-w-[600px]">
+      <DialogHeader>
+        <DialogTitle>新建自动拉群计划</DialogTitle>
+      </DialogHeader>
+
+      <form onSubmit={handleSubmit} className="space-y-6">
+        {step === 1 && (
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="name" className="text-base">
+                计划名称<span className="text-red-500">*</span>
+              </Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                placeholder="请输入计划名称"
+                className="w-full"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="customerType" className="text-base">
+                建群客户类型
+              </Label>
+              <Select
+                value={formData.customerType}
+                onValueChange={(value) => setFormData({ ...formData, customerType: value })}
+              >
+                <SelectTrigger>
+                  <SelectValue placeholder="选择客户类型" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="high_value">高价值客户</SelectItem>
+                  <SelectItem value="regular">普通客户</SelectItem>
+                  <SelectItem value="potential">潜在客户</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="startDate" className="text-base">
+                  开始日期
+                </Label>
+                <Input
+                  id="startDate"
+                  type="date"
+                  value={formData.startDate}
+                  onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="endDate" className="text-base">
+                  结束日期
+                </Label>
+                <Input
+                  id="endDate"
+                  type="date"
+                  value={formData.endDate}
+                  onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label className="text-base">群人数设置</Label>
+              <div className="flex items-center space-x-4">
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={() => setFormData({ ...formData, groupSize: Math.max(1, formData.groupSize - 1) })}
+                >
+                  -
+                </Button>
+                <span className="w-12 text-center">{formData.groupSize}</span>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={() => setFormData({ ...formData, groupSize: formData.groupSize + 1 })}
+                >
+                  +
+                </Button>
+                <span>人/群</span>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {step === 2 && (
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="welcomeMessage" className="text-base">
+                入群欢迎语
+              </Label>
+              <Textarea
+                id="welcomeMessage"
+                value={formData.welcomeMessage}
+                onChange={(e) => setFormData({ ...formData, welcomeMessage: e.target.value })}
+                placeholder="请输入欢迎语"
+                className="min-h-[100px]"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label className="text-base">指定微信号</Label>
+              <div className="flex items-center space-x-2">
+                <Input
+                  value={tempInput.wechatId}
+                  onChange={(e) => setTempInput({ ...tempInput, wechatId: e.target.value })}
+                  placeholder="输入微信号"
+                />
+                <Button type="button" variant="outline" size="icon" onClick={handleAddWechatId}>
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </div>
+              <div className="flex flex-wrap gap-2 mt-2">
+                {formData.specificWechatIds.map((id) => (
+                  <Badge key={id} variant="secondary" className="flex items-center gap-1">
+                    {id}
+                    <X
+                      className="h-3 w-3 cursor-pointer"
+                      onClick={() =>
+                        setFormData({
+                          ...formData,
+                          specificWechatIds: formData.specificWechatIds.filter((i) => i !== id),
+                        })
+                      }
+                    />
+                  </Badge>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label className="text-base">关键词筛选</Label>
+              <div className="flex items-center space-x-2">
+                <Input
+                  value={tempInput.keyword}
+                  onChange={(e) => setTempInput({ ...tempInput, keyword: e.target.value })}
+                  placeholder="输入关键词"
+                />
+                <Button type="button" variant="outline" size="icon" onClick={handleAddKeyword}>
+                  <Plus className="h-4 w-4" />
+                </Button>
+              </div>
+              <div className="flex flex-wrap gap-2 mt-2">
+                {formData.keywords.map((keyword) => (
+                  <Badge key={keyword} variant="secondary" className="flex items-center gap-1">
+                    {keyword}
+                    <X
+                      className="h-3 w-3 cursor-pointer"
+                      onClick={() =>
+                        setFormData({
+                          ...formData,
+                          keywords: formData.keywords.filter((k) => k !== keyword),
+                        })
+                      }
+                    />
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="flex justify-between pt-4">
+          {step > 1 && (
+            <Button type="button" variant="outline" onClick={() => setStep(step - 1)}>
+              上一步
+            </Button>
+          )}
+          <div className="flex justify-end space-x-2">
+            <Button type="button" variant="outline" onClick={onClose}>
+              取消
+            </Button>
+            {step < 2 ? (
+              <Button type="button" onClick={() => setStep(step + 1)} className="bg-blue-500 hover:bg-blue-600">
+                下一步
+              </Button>
+            ) : (
+              <Button
+                type="submit"
+                disabled={loading}
+                className={cn("bg-blue-500 hover:bg-blue-600", loading && "opacity-50 cursor-not-allowed")}
+              >
+                {loading ? "创建中..." : "确定"}
+              </Button>
+            )}
+          </div>
+        </div>
+      </form>
+    </DialogContent>
+  )
+}
diff --git a/app/workspace/auto-group/components/wechat-account-selector.tsx b/app/workspace/auto-group/components/wechat-account-selector.tsx
new file mode 100644
index 0000000..8ccfe58
--- /dev/null
+++ b/app/workspace/auto-group/components/wechat-account-selector.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Search, Plus } from "lucide-react"
+import { Table } from "@/components/ui/table"
+
+interface WechatAccountSelectorProps {
+  selectedAccounts: string[]
+  onChange: (accounts: string[]) => void
+}
+
+export function WechatAccountSelector({ selectedAccounts, onChange }: WechatAccountSelectorProps) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="mt-1.5 space-x-2">
+      <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
+        <Plus className="h-4 w-4 mr-2" />
+        选择客户
+      </Button>
+
+      <Button type="button" variant="outline" size="sm" onClick={() => setOpen(true)} className="h-9">
+        <Plus className="h-4 w-4 mr-2" />
+        外部账号
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-4xl">
+          <DialogHeader>
+            <DialogTitle>选择微信账号</DialogTitle>
+          </DialogHeader>
+
+          <div className="relative">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+            <Input placeholder="请输入关键字筛选" className="pl-9" />
+          </div>
+
+          <Table>
+            <thead>
+              <tr>
+                <th>序号</th>
+                <th>微信号</th>
+                <th>在线状态</th>
+                <th>操作</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td colSpan={4} className="text-center py-4 text-gray-500">
+                  暂无数据
+                </td>
+              </tr>
+            </tbody>
+          </Table>
+
+          <div className="flex justify-end space-x-4">
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={() => setOpen(false)} className="bg-blue-600 hover:bg-blue-700">
+              确定
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/workspace/auto-group/page.tsx b/app/workspace/auto-group/page.tsx
new file mode 100644
index 0000000..2cf3f98
--- /dev/null
+++ b/app/workspace/auto-group/page.tsx
@@ -0,0 +1,152 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { PlusCircle, Settings, Users, RefreshCcw } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Dialog } from "@/components/ui/dialog"
+import { NewPlanForm } from "./components/new-plan-form"
+
+interface Plan {
+  id: string
+  name: string
+  groupCount: number
+  groupSize: number
+  totalFriends: number
+  tags: string[]
+  status: "running" | "stopped" | "completed"
+  lastUpdated: string
+}
+
+const mockPlans: Plan[] = [
+  {
+    id: "1",
+    name: "品牌推广群",
+    groupCount: 6,
+    groupSize: 38,
+    totalFriends: 228,
+    tags: ["品牌", "推广"],
+    status: "running",
+    lastUpdated: "2024-02-24 10:30",
+  },
+  {
+    id: "2",
+    name: "客户服务群",
+    groupCount: 4,
+    groupSize: 50,
+    totalFriends: 200,
+    tags: ["客服", "售后"],
+    status: "stopped",
+    lastUpdated: "2024-02-23 15:45",
+  },
+]
+
+export default function AutoGroupPage() {
+  const [newPlanOpen, setNewPlanOpen] = useState(false)
+
+  const getStatusColor = (status: Plan["status"]) => {
+    switch (status) {
+      case "running":
+        return "bg-green-500/10 text-green-500"
+      case "stopped":
+        return "bg-red-500/10 text-red-500"
+      case "completed":
+        return "bg-blue-500/10 text-blue-500"
+      default:
+        return "bg-gray-500/10 text-gray-500"
+    }
+  }
+
+  const getStatusText = (status: Plan["status"]) => {
+    switch (status) {
+      case "running":
+        return "运行中"
+      case "stopped":
+        return "已停止"
+      case "completed":
+        return "已完成"
+      default:
+        return status
+    }
+  }
+
+  return (
+    <div className="container p-4 mx-auto max-w-md">
+      <div className="flex flex-col space-y-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-xl font-semibold">微信自动拉群</h1>
+          <Button onClick={() => setNewPlanOpen(true)} className="bg-blue-500 hover:bg-blue-600">
+            <PlusCircle className="w-4 h-4 mr-2" />
+            新建计划
+          </Button>
+        </div>
+
+        <Tabs defaultValue="active" className="w-full">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="active">进行中</TabsTrigger>
+            <TabsTrigger value="completed">已完成</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="active" className="mt-4">
+            <ScrollArea className="h-[calc(100vh-200px)]">
+              <div className="space-y-4">
+                {mockPlans.map((plan) => (
+                  <Card key={plan.id} className="border border-gray-100">
+                    <CardHeader className="pb-2">
+                      <div className="flex items-center justify-between">
+                        <CardTitle className="text-lg font-medium">{plan.name}</CardTitle>
+                        <Badge className={getStatusColor(plan.status)}>{getStatusText(plan.status)}</Badge>
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="grid grid-cols-2 gap-2 text-sm text-gray-500">
+                        <div className="flex items-center">
+                          <Users className="w-4 h-4 mr-2" />
+                          已建群数：{plan.groupCount}
+                        </div>
+                        <div className="flex items-center">
+                          <Settings className="w-4 h-4 mr-2" />
+                          群规模：{plan.groupSize}
+                        </div>
+                        <div className="flex items-center">
+                          <RefreshCcw className="w-4 h-4 mr-2" />
+                          更新时间：{plan.lastUpdated}
+                        </div>
+                      </div>
+                      <div className="mt-3 flex flex-wrap gap-2">
+                        {plan.tags.map((tag) => (
+                          <Badge key={tag} variant="secondary" className="text-xs">
+                            {tag}
+                          </Badge>
+                        ))}
+                      </div>
+                      <div className="mt-4 flex justify-end space-x-2">
+                        <Button variant="outline" size="sm">
+                          编辑
+                        </Button>
+                        <Button variant="destructive" size="sm" className="bg-red-500 hover:bg-red-600">
+                          停止
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </ScrollArea>
+          </TabsContent>
+
+          <TabsContent value="completed">
+            <div className="h-[calc(100vh-200px)] flex items-center justify-center text-gray-500">暂无已完成的计划</div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      <Dialog open={newPlanOpen} onOpenChange={setNewPlanOpen}>
+        <NewPlanForm onClose={() => setNewPlanOpen(false)} />
+      </Dialog>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/[id]/edit/page.tsx b/app/workspace/moments-sync/[id]/edit/page.tsx
new file mode 100644
index 0000000..c3d66db
--- /dev/null
+++ b/app/workspace/moments-sync/[id]/edit/page.tsx
@@ -0,0 +1,142 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft, Search } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { StepIndicator } from "../../components/step-indicator"
+import { BasicSettings } from "../../components/basic-settings"
+import { DeviceSelectionDialog } from "../../components/device-selection-dialog"
+import { Input } from "@/components/ui/input"
+
+export default function EditMomentsSyncPage() {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
+  const [formData, setFormData] = useState({
+    taskName: "同步卡若主号",
+    startTime: "06:00",
+    endTime: "23:59",
+    syncCount: 5,
+    accountType: "business" as const,
+    enabled: true,
+    selectedDevices: [] as string[],
+    selectedLibraries: [] as string[],
+  })
+
+  const handleUpdateFormData = (data: Partial<typeof formData>) => {
+    setFormData((prev) => ({ ...prev, ...data }))
+  }
+
+  const handleNext = () => {
+    setCurrentStep((prev) => Math.min(prev + 1, 3))
+  }
+
+  const handlePrev = () => {
+    setCurrentStep((prev) => Math.max(prev - 1, 1))
+  }
+
+  const handleComplete = () => {
+    console.log("Form submitted:", formData)
+    router.push("/workspace/moments-sync")
+  }
+
+  return (
+    <div className="min-h-screen bg-[#F8F9FA] pb-20">
+      <header className="sticky top-0 z-10 bg-white">
+        <div className="flex items-center h-14 px-4">
+          <Button variant="ghost" size="icon" onClick={() => router.back()} className="hover:bg-gray-50">
+            <ChevronLeft className="h-6 w-6" />
+          </Button>
+          <h1 className="ml-2 text-lg font-medium">编辑朋友圈同步</h1>
+        </div>
+      </header>
+
+      <div className="mt-8">
+        <StepIndicator currentStep={currentStep} />
+
+        <div className="mt-8">
+          {currentStep === 1 && (
+            <BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
+          )}
+
+          {currentStep === 2 && (
+            <div className="space-y-6 px-6">
+              <div className="relative">
+                <Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
+                <Input
+                  placeholder="选择设备"
+                  className="h-12 pl-11 rounded-xl border-gray-200 text-base"
+                  onClick={() => setDeviceDialogOpen(true)}
+                  readOnly
+                />
+              </div>
+
+              {formData.selectedDevices.length > 0 && (
+                <div className="text-base text-gray-500">已选设备：{formData.selectedDevices.length} 个</div>
+              )}
+
+              <div className="flex space-x-4 pt-4">
+                <Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
+                  上一步
+                </Button>
+                <Button
+                  onClick={handleNext}
+                  className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
+                >
+                  下一步
+                </Button>
+              </div>
+
+              <DeviceSelectionDialog
+                open={deviceDialogOpen}
+                onOpenChange={setDeviceDialogOpen}
+                selectedDevices={formData.selectedDevices}
+                onSelect={(devices) => {
+                  handleUpdateFormData({ selectedDevices: devices })
+                  setDeviceDialogOpen(false)
+                }}
+              />
+            </div>
+          )}
+
+          {currentStep === 3 && (
+            <div className="space-y-6 px-6">
+              <div className="relative">
+                <Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
+                <Input placeholder="选择内容库" className="h-12 pl-11 rounded-xl border-gray-200 text-base" />
+              </div>
+
+              <div className="flex space-x-4 pt-4">
+                <Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
+                  上一步
+                </Button>
+                <Button
+                  onClick={handleComplete}
+                  className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
+                >
+                  完成
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <nav className="fixed bottom-0 left-0 right-0 h-16 bg-white border-t flex items-center justify-around px-6">
+        <button className="flex flex-col items-center text-blue-600">
+          <span className="text-sm mt-1">首页</span>
+        </button>
+        <button className="flex flex-col items-center text-gray-400">
+          <span className="text-sm mt-1">场景获客</span>
+        </button>
+        <button className="flex flex-col items-center text-gray-400">
+          <span className="text-sm mt-1">工作台</span>
+        </button>
+        <button className="flex flex-col items-center text-gray-400">
+          <span className="text-sm mt-1">我的</span>
+        </button>
+      </nav>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/[id]/edit/step-indicator.tsx b/app/workspace/moments-sync/[id]/edit/step-indicator.tsx
new file mode 100644
index 0000000..53dbcee
--- /dev/null
+++ b/app/workspace/moments-sync/[id]/edit/step-indicator.tsx
@@ -0,0 +1,38 @@
+interface StepIndicatorProps {
+  currentStep: number
+}
+
+export function StepIndicator({ currentStep }: StepIndicatorProps) {
+  const steps = [
+    { number: 1, title: "步骤 1", subtitle: "基础设置" },
+    { number: 2, title: "步骤 2", subtitle: "设备选择" },
+    { number: 3, title: "步骤 3", subtitle: "选择内容库" },
+  ]
+
+  return (
+    <div className="flex justify-between relative">
+      {steps.map((step, index) => (
+        <div key={step.number} className="flex flex-col items-center relative z-10">
+          <div
+            className={`w-8 h-8 rounded-full flex items-center justify-center text-sm
+              ${currentStep >= step.number ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-400"}`}
+          >
+            {step.number}
+          </div>
+          <div className={`text-xs mt-2 ${currentStep >= step.number ? "text-blue-600" : "text-gray-400"}`}>
+            {step.title}
+          </div>
+          <div className={`text-xs ${currentStep >= step.number ? "text-gray-600" : "text-gray-400"}`}>
+            {step.subtitle}
+          </div>
+        </div>
+      ))}
+      <div className="absolute top-4 left-0 right-0 h-[1px] bg-gray-200 -z-10">
+        <div
+          className="h-full bg-blue-600 transition-all duration-300"
+          style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/[id]/edit/steps/basic-settings.tsx b/app/workspace/moments-sync/[id]/edit/steps/basic-settings.tsx
new file mode 100644
index 0000000..e1583c5
--- /dev/null
+++ b/app/workspace/moments-sync/[id]/edit/steps/basic-settings.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { Plus, Minus } from "lucide-react"
+
+interface BasicSettingsProps {
+  formData: {
+    taskName: string
+    startTime: string
+    endTime: string
+    syncCount: number
+    accountType: string
+    enabled: boolean
+  }
+  onChange: (data: Partial<BasicSettingsProps["formData"]>) => void
+  onNext: () => void
+}
+
+export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <div className="text-sm mb-2">任务名称</div>
+        <Input
+          value={formData.taskName}
+          onChange={(e) => onChange({ taskName: e.target.value })}
+          placeholder="请输入任务名称"
+        />
+      </div>
+
+      <div>
+        <div className="text-sm mb-2">允许发布时间段</div>
+        <div className="flex items-center space-x-3">
+          <Input
+            type="time"
+            value={formData.startTime}
+            onChange={(e) => onChange({ startTime: e.target.value })}
+            className="w-32"
+          />
+          <span className="text-gray-500">至</span>
+          <Input
+            type="time"
+            value={formData.endTime}
+            onChange={(e) => onChange({ endTime: e.target.value })}
+            className="w-32"
+          />
+        </div>
+      </div>
+
+      <div>
+        <div className="text-sm mb-2">每日同步数量</div>
+        <div className="flex items-center space-x-4">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
+          >
+            <Minus className="h-4 w-4" />
+          </Button>
+          <span className="w-8 text-center">{formData.syncCount}</span>
+          <Button variant="outline" size="icon" onClick={() => onChange({ syncCount: formData.syncCount + 1 })}>
+            <Plus className="h-4 w-4" />
+          </Button>
+          <span className="text-gray-500">条朋友圈</span>
+        </div>
+      </div>
+
+      <div>
+        <div className="text-sm mb-2">账号类型</div>
+        <div className="flex space-x-4">
+          <Button
+            variant={formData.accountType === "business" ? "default" : "outline"}
+            onClick={() => onChange({ accountType: "business" })}
+            className="flex-1"
+          >
+            业务号
+          </Button>
+          <Button
+            variant={formData.accountType === "personal" ? "default" : "outline"}
+            onClick={() => onChange({ accountType: "personal" })}
+            className="flex-1"
+          >
+            人设号
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between">
+        <span className="text-sm">是否启用</span>
+        <Switch checked={formData.enabled} onCheckedChange={(checked) => onChange({ enabled: checked })} />
+      </div>
+
+      <Button onClick={onNext} className="w-full mt-8">
+        下一步
+      </Button>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/[id]/edit/steps/content-library-selection.tsx b/app/workspace/moments-sync/[id]/edit/steps/content-library-selection.tsx
new file mode 100644
index 0000000..ef44d26
--- /dev/null
+++ b/app/workspace/moments-sync/[id]/edit/steps/content-library-selection.tsx
@@ -0,0 +1,39 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search } from "lucide-react"
+
+interface ContentLibrarySelectionProps {
+  selectedLibraries: string[]
+  onChange: (libraries: string[]) => void
+  onComplete: () => void
+  onPrev: () => void
+}
+
+export function ContentLibrarySelection({
+  selectedLibraries,
+  onChange,
+  onComplete,
+  onPrev,
+}: ContentLibrarySelectionProps) {
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+        <Input placeholder="选择内容库" className="pl-9" />
+      </div>
+
+      <div className="min-h-[300px] flex items-center justify-center text-gray-400">选择内容库组件将在这里实现</div>
+
+      <div className="flex space-x-3 mt-8">
+        <Button variant="outline" onClick={onPrev} className="flex-1">
+          上一步
+        </Button>
+        <Button onClick={onComplete} className="flex-1">
+          完成
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/[id]/edit/steps/device-selection.tsx b/app/workspace/moments-sync/[id]/edit/steps/device-selection.tsx
new file mode 100644
index 0000000..8a91c5d
--- /dev/null
+++ b/app/workspace/moments-sync/[id]/edit/steps/device-selection.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search } from "lucide-react"
+
+interface DeviceSelectionProps {
+  selectedDevices: string[]
+  onChange: (devices: string[]) => void
+  onNext: () => void
+  onPrev: () => void
+}
+
+export function DeviceSelection({ selectedDevices, onChange, onNext, onPrev }: DeviceSelectionProps) {
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+        <Input placeholder="选择设备" className="pl-9" />
+      </div>
+
+      <div className="min-h-[300px] flex items-center justify-center text-gray-400">选择设备组件将在这里实现</div>
+
+      <div className="flex space-x-3 mt-8">
+        <Button variant="outline" onClick={onPrev} className="flex-1">
+          上一步
+        </Button>
+        <Button onClick={onNext} className="flex-1">
+          下一步
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/[id]/page.tsx b/app/workspace/moments-sync/[id]/page.tsx
new file mode 100644
index 0000000..ff6e841
--- /dev/null
+++ b/app/workspace/moments-sync/[id]/page.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Switch } from "@/components/ui/switch"
+
+interface SyncTask {
+  id: string
+  name: string
+  status: "running" | "paused"
+  deviceCount: number
+  contentLib: string
+  syncCount: number
+  lastSyncTime: string
+  createTime: string
+  creator: string
+}
+
+export default function ViewMomentsSyncTask({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [task, setTask] = useState<SyncTask | null>(null)
+
+  useEffect(() => {
+    // Fetch task data from API
+    // For now, we'll use mock data
+    setTask({
+      id: params.id,
+      name: "同步卡若主号",
+      deviceCount: 2,
+      contentLib: "卡若朋友圈",
+      syncCount: 307,
+      lastSyncTime: "2025-02-06 13:12:35",
+      createTime: "2024-11-20 19:04:14",
+      creator: "karuo",
+      status: "running",
+    })
+  }, [params.id])
+
+  const toggleTaskStatus = () => {
+    if (task) {
+      setTask({ ...task, status: task.status === "running" ? "paused" : "running" })
+    }
+  }
+
+  if (!task) {
+    return <div>Loading...</div>
+  }
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">查看朋友圈同步任务</h1>
+          </div>
+          <Button onClick={() => router.push(`/workspace/moments-sync/${task.id}/edit`)}>编辑任务</Button>
+        </div>
+      </header>
+
+      <div className="p-4">
+        <Card className="p-6">
+          <div className="flex items-center justify-between mb-6">
+            <div className="flex items-center space-x-2">
+              <h2 className="text-2xl font-bold">{task.name}</h2>
+              <Badge variant={task.status === "running" ? "success" : "secondary"}>
+                {task.status === "running" ? "进行中" : "已暂停"}
+              </Badge>
+            </div>
+            <Switch checked={task.status === "running"} onCheckedChange={toggleTaskStatus} />
+          </div>
+
+          <div className="grid grid-cols-2 gap-6 mb-6">
+            <div>
+              <h3 className="text-lg font-semibold mb-2">任务详情</h3>
+              <div className="space-y-2">
+                <p>推送设备：{task.deviceCount} 个</p>
+                <p>内容库：{task.contentLib}</p>
+                <p>已同步：{task.syncCount} 条</p>
+                <p>创建人：{task.creator}</p>
+              </div>
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold mb-2">时间信息</h3>
+              <div className="space-y-2">
+                <p>创建时间：{task.createTime}</p>
+                <p>上次同步：{task.lastSyncTime}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="border-t pt-4">
+            <h3 className="text-lg font-semibold mb-2">同步内容预览</h3>
+            {/* Add content preview here */}
+            <p className="text-gray-500">暂无内容预览</p>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/[id]/view/page.tsx b/app/workspace/moments-sync/[id]/view/page.tsx
new file mode 100644
index 0000000..d83c6d8
--- /dev/null
+++ b/app/workspace/moments-sync/[id]/view/page.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Edit2, RefreshCw } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+
+interface MomentContent {
+  id: string
+  type: string
+  content: string
+  images: string[]
+  publishTime: string
+  pushTime: string
+  status: "已发送" | "待发送" | "已终止"
+}
+
+const mockData: MomentContent[] = [
+  {
+    id: "399401",
+    type: "图文",
+    content: "一定要把安全意识这件事情，刻在DNA里......",
+    images: [
+      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Z8LxL98X5Bwm5Jr5ke3755Qd97PSYC.png",
+      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Z8LxL98X5Bwm5Jr5ke3755Qd97PSYC.png",
+      "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Z8LxL98X5Bwm5Jr5ke3755Qd97PSYC.png",
+    ],
+    publishTime: "2025-02-15 23:37:49",
+    pushTime: "2025-02-16 08:50:36",
+    status: "已发送",
+  },
+]
+
+export default function MomentsSyncViewPage() {
+  const [syncName] = useState("同步卡若主号")
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between h-14 px-4">
+          <div className="flex items-center">
+            <Button variant="ghost" size="icon" onClick={() => window.history.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="ml-2 text-lg font-medium">{syncName}</h1>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Button variant="outline" size="sm">
+              <Edit2 className="h-4 w-4 mr-2" />
+              编辑
+            </Button>
+            <Button variant="outline" size="sm">
+              <RefreshCw className="h-4 w-4 mr-2" />
+              刷新
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-7xl mx-auto space-y-6">
+        <Card className="p-6">
+          <h2 className="text-lg font-medium mb-4">基本信息</h2>
+          <div className="space-y-4">
+            <div className="flex items-center">
+              <span className="text-gray-500 w-32">朋友圈同步名称：</span>
+              <span>{syncName}</span>
+            </div>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <h2 className="text-lg font-medium mb-4">推送日志</h2>
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[100px]">ID</TableHead>
+                  <TableHead>内容类型</TableHead>
+                  <TableHead>内容</TableHead>
+                  <TableHead>图片</TableHead>
+                  <TableHead>推送时间</TableHead>
+                  <TableHead>内容发布时间</TableHead>
+                  <TableHead>状态</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {mockData.map((item) => (
+                  <TableRow key={item.id}>
+                    <TableCell>{item.id}</TableCell>
+                    <TableCell>{item.type}</TableCell>
+                    <TableCell className="max-w-[300px] truncate">{item.content}</TableCell>
+                    <TableCell>
+                      <div className="flex space-x-2">
+                        {item.images.map((img, index) => (
+                          <img
+                            key={index}
+                            src={img || "/placeholder.svg"}
+                            alt={`Content ${index + 1}`}
+                            className="w-16 h-16 object-cover rounded"
+                          />
+                        ))}
+                      </div>
+                    </TableCell>
+                    <TableCell>{item.pushTime}</TableCell>
+                    <TableCell>{item.publishTime}</TableCell>
+                    <TableCell>
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs ${
+                          item.status === "已发送"
+                            ? "bg-green-100 text-green-800"
+                            : item.status === "待发送"
+                              ? "bg-blue-100 text-blue-800"
+                              : "bg-red-100 text-red-800"
+                        }`}
+                      >
+                        {item.status}
+                      </span>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/components/basic-settings.tsx b/app/workspace/moments-sync/components/basic-settings.tsx
new file mode 100644
index 0000000..1bb61c6
--- /dev/null
+++ b/app/workspace/moments-sync/components/basic-settings.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { Plus, Minus, Clock, HelpCircle } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+
+interface BasicSettingsProps {
+  formData: {
+    taskName: string
+    startTime: string
+    endTime: string
+    syncCount: number
+    accountType: "business" | "personal"
+    enabled: boolean
+  }
+  onChange: (data: Partial<BasicSettingsProps["formData"]>) => void
+  onNext: () => void
+}
+
+export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
+  return (
+    <div className="space-y-8 px-6">
+      <div>
+        <div className="text-base font-medium mb-2">任务名称</div>
+        <Input
+          value={formData.taskName}
+          onChange={(e) => onChange({ taskName: e.target.value })}
+          placeholder="请输入任务名称"
+          className="h-12 border-0 border-b border-gray-200 rounded-none focus-visible:ring-0 focus-visible:border-blue-600 px-0 text-base"
+        />
+      </div>
+
+      <div>
+        <div className="text-base font-medium mb-2">允许发布时间段</div>
+        <div className="flex items-center space-x-4">
+          <div className="relative flex-1">
+            <Input
+              type="time"
+              value={formData.startTime}
+              onChange={(e) => onChange({ startTime: e.target.value })}
+              className="h-12 pl-10 rounded-xl border-gray-200 text-base"
+            />
+            <Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
+          </div>
+          <span className="text-gray-500">至</span>
+          <div className="relative flex-1">
+            <Input
+              type="time"
+              value={formData.endTime}
+              onChange={(e) => onChange({ endTime: e.target.value })}
+              className="h-12 pl-10 rounded-xl border-gray-200 text-base"
+            />
+            <Clock className="absolute left-3 top-4 h-4 w-4 text-gray-400" />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div className="text-base font-medium mb-2">每日同步数量</div>
+        <div className="flex items-center space-x-5">
+          <Button
+            variant="outline"
+            size="lg"
+            onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
+            className="h-12 w-12 rounded-xl"
+          >
+            <Minus className="h-5 w-5" />
+          </Button>
+          <span className="w-8 text-center text-lg font-medium">{formData.syncCount}</span>
+          <Button
+            variant="outline"
+            size="lg"
+            onClick={() => onChange({ syncCount: formData.syncCount + 1 })}
+            className="h-12 w-12 rounded-xl"
+          >
+            <Plus className="h-5 w-5" />
+          </Button>
+          <span className="text-gray-500">条朋友圈</span>
+        </div>
+      </div>
+
+      <div>
+        <div className="text-base font-medium mb-2">账号类型</div>
+        <div className="flex space-x-4">
+          <div className="flex-1 relative">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    onClick={() => onChange({ accountType: "business" })}
+                    className={`w-full h-12 justify-between rounded-lg ${
+                      formData.accountType === "business"
+                        ? "bg-blue-600 hover:bg-blue-600 text-white"
+                        : "bg-white hover:bg-gray-50"
+                    }`}
+                  >
+                    业务号
+                    <HelpCircle
+                      className={`h-4 w-4 ${formData.accountType === "business" ? "text-white/70" : "text-gray-400"}`}
+                    />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="max-w-[300px]">
+                  <p>
+                    业务号能够循环推送内容库中的内容。当内容库所有内容循环推送完毕后，若有新内容则优先推送新内容，若无新内容则继续循环推送。
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+          <div className="flex-1 relative">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    onClick={() => onChange({ accountType: "personal" })}
+                    className={`w-full h-12 justify-between rounded-lg ${
+                      formData.accountType === "personal"
+                        ? "bg-blue-600 hover:bg-blue-600 text-white"
+                        : "bg-white hover:bg-gray-50"
+                    }`}
+                  >
+                    人设号
+                    <HelpCircle
+                      className={`h-4 w-4 ${formData.accountType === "personal" ? "text-white/70" : "text-gray-400"}`}
+                    />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>用于实时更新同步，有新动态时进行同步，无动态则不同步。</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between py-2">
+        <span className="text-base font-medium">是否启用</span>
+        <Switch
+          checked={formData.enabled}
+          onCheckedChange={(checked) => onChange({ enabled: checked })}
+          className="data-[state=checked]:bg-blue-600 h-7 w-12"
+        />
+      </div>
+
+      <Button
+        onClick={onNext}
+        className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base font-medium shadow-sm"
+      >
+        下一步
+      </Button>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/components/content-viewer.tsx b/app/workspace/moments-sync/components/content-viewer.tsx
new file mode 100644
index 0000000..49a231a
--- /dev/null
+++ b/app/workspace/moments-sync/components/content-viewer.tsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { useState } from "react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search, Filter, RefreshCw } from "lucide-react"
+import type { ContentItem } from "@/types/content"
+
+interface ContentViewerProps {
+  tagId: string
+}
+
+export function ContentViewer({ tagId }: ContentViewerProps) {
+  const [contents, setContents] = useState<ContentItem[]>([
+    {
+      id: "399401",
+      title: "一���理想安全驾这件事情，刻在DNA里...",
+      type: "text",
+      content: "一在理想安全驾这件事情，刻在DNA里...",
+      images: [
+        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jo_5c61b35b-a919-4520-b653-a5910dea594g.jpg-83VfgjQ3qC7mwDhby6rsZeRwVM6maz.jpeg",
+        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jo_5c61b35b-a919-4520-b653-a5910dea594g.jpg-83VfgjQ3qC7mwDhby6rsZeRwVM6maz.jpeg",
+        "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/img_v3_02jo_5c61b35b-a919-4520-b653-a5910dea594g.jpg-83VfgjQ3qC7mwDhby6rsZeRwVM6maz.jpeg",
+      ],
+      createTime: "2025-02-16 08:50:36",
+      publishTime: "2025-02-15 23:37:49",
+      status: "published",
+    },
+  ])
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center space-x-2">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+          <Input placeholder="搜索内容..." className="pl-9" />
+        </div>
+        <Button variant="outline" size="icon">
+          <Filter className="h-4 w-4" />
+        </Button>
+        <Button variant="outline" size="icon">
+          <RefreshCw className="h-4 w-4" />
+        </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>
+          {contents.map((content) => (
+            <TableRow key={content.id}>
+              <TableCell>{content.id}</TableCell>
+              <TableCell>{content.type === "text" ? "图文" : content.type}</TableCell>
+              <TableCell className="max-w-[200px] truncate">{content.content}</TableCell>
+              <TableCell>
+                {content.images && (
+                  <div className="flex space-x-1">
+                    {content.images.map((img, index) => (
+                      <img
+                        key={index}
+                        src={img || "/placeholder.svg"}
+                        alt={`图片 ${index + 1}`}
+                        className="w-10 h-10 object-cover rounded"
+                      />
+                    ))}
+                  </div>
+                )}
+              </TableCell>
+              <TableCell>{content.video ? "有" : "-"}</TableCell>
+              <TableCell>{content.createTime}</TableCell>
+              <TableCell>{content.publishTime}</TableCell>
+              <TableCell>
+                <span
+                  className={`px-2 py-1 rounded-full text-xs ${
+                    content.status === "published"
+                      ? "bg-green-100 text-green-800"
+                      : content.status === "failed"
+                        ? "bg-red-100 text-red-800"
+                        : "bg-yellow-100 text-yellow-800"
+                  }`}
+                >
+                  {content.status === "published" ? "已发布" : content.status === "failed" ? "失败" : "待发布"}
+                </span>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/components/device-selection-dialog.tsx b/app/workspace/moments-sync/components/device-selection-dialog.tsx
new file mode 100644
index 0000000..eb88fe2
--- /dev/null
+++ b/app/workspace/moments-sync/components/device-selection-dialog.tsx
@@ -0,0 +1,145 @@
+"use client"
+
+import { useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Search, RefreshCw } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+
+interface Device {
+  id: string
+  name: string
+  imei: string
+  wxid: string
+  status: "online" | "offline"
+  usedInPlans: number
+}
+
+interface DeviceSelectionDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  selectedDevices: string[]
+  onSelect: (devices: string[]) => void
+}
+
+export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onSelect }: DeviceSelectionDialogProps) {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState("all")
+
+  // 模拟设备数据
+  const devices: Device[] = [
+    {
+      id: "1",
+      name: "设备 1",
+      imei: "IMEI-radz6ewal",
+      wxid: "wxid_98179ujy",
+      status: "offline",
+      usedInPlans: 0,
+    },
+    {
+      id: "2",
+      name: "设备 2",
+      imei: "IMEI-i6iszi6d",
+      wxid: "wxid_viqnaic8",
+      status: "online",
+      usedInPlans: 2,
+    },
+    {
+      id: "3",
+      name: "设备 3",
+      imei: "IMEI-01z2izj97",
+      wxid: "wxid_9sb23gxr",
+      status: "online",
+      usedInPlans: 2,
+    },
+    {
+      id: "4",
+      name: "设备 4",
+      imei: "IMEI-x6o9rpcr0",
+      wxid: "wxid_k0gxzbit",
+      status: "online",
+      usedInPlans: 1,
+    },
+  ]
+
+  const filteredDevices = devices.filter((device) => {
+    const matchesSearch =
+      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.wxid.toLowerCase().includes(searchQuery.toLowerCase())
+
+    const matchesStatus =
+      statusFilter === "all" ||
+      (statusFilter === "online" && device.status === "online") ||
+      (statusFilter === "offline" && device.status === "offline")
+
+    return matchesSearch && matchesStatus
+  })
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>选择设备</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex items-center space-x-4 my-4">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder="搜索设备IMEI/备注/微信号"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-32">
+              <SelectValue placeholder="全部状态" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部状态</SelectItem>
+              <SelectItem value="online">在线</SelectItem>
+              <SelectItem value="offline">离线</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon">
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <ScrollArea className="flex-1 -mx-6 px-6">
+          <RadioGroup value={selectedDevices[0]} onValueChange={(value) => onSelect([value])}>
+            {filteredDevices.map((device) => (
+              <label
+                key={device.id}
+                className="flex items-start space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer"
+              >
+                <RadioGroupItem value={device.id} id={device.id} className="mt-1" />
+                <div className="flex-1">
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">{device.name}</span>
+                    <Badge variant={device.status === "online" ? "success" : "secondary"}>
+                      {device.status === "online" ? "在线" : "离线"}
+                    </Badge>
+                  </div>
+                  <div className="text-sm text-gray-500 mt-1">
+                    <div>IMEI: {device.imei}</div>
+                    <div>微信号: {device.wxid}</div>
+                  </div>
+                  {device.usedInPlans > 0 && (
+                    <div className="text-sm text-orange-500 mt-1">已用于 {device.usedInPlans} 个计划</div>
+                  )}
+                </div>
+              </label>
+            ))}
+          </RadioGroup>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/app/workspace/moments-sync/components/step-indicator.tsx b/app/workspace/moments-sync/components/step-indicator.tsx
new file mode 100644
index 0000000..cac6e73
--- /dev/null
+++ b/app/workspace/moments-sync/components/step-indicator.tsx
@@ -0,0 +1,51 @@
+"use client"
+
+interface Step {
+  id: number
+  title: string
+  subtitle: string
+}
+
+interface StepIndicatorProps {
+  currentStep: number
+  steps?: Step[]
+}
+
+export function StepIndicator({
+  currentStep,
+  steps = [
+    { id: 1, title: "步骤 1", subtitle: "基础设置" },
+    { id: 2, title: "步骤 2", subtitle: "设备选择" },
+    { id: 3, title: "步骤 3", subtitle: "选择内容库" },
+  ],
+}: StepIndicatorProps) {
+  return (
+    <div className="relative flex justify-between px-6">
+      {steps.map((step) => (
+        <div
+          key={step.id}
+          className={`flex flex-col items-center relative z-10 transition-colors ${
+            currentStep >= step.id ? "text-blue-600" : "text-gray-400"
+          }`}
+        >
+          <div
+            className={`w-8 h-8 rounded-full flex items-center justify-center transition-all ${
+              currentStep >= step.id
+                ? "bg-blue-600 text-white shadow-sm"
+                : "bg-white border border-gray-200 text-gray-400"
+            }`}
+          >
+            {step.id}
+          </div>
+          <div className="text-xs mt-2 font-medium">{step.subtitle}</div>
+        </div>
+      ))}
+      <div className="absolute top-4 left-0 right-0 h-[1px] bg-gray-100 -z-10">
+        <div
+          className="absolute top-0 left-0 h-full bg-blue-600 transition-all duration-300"
+          style={{ width: `${((currentStep - 1) / (steps.length - 1)) * 100}%` }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/components/tag-editor.tsx b/app/workspace/moments-sync/components/tag-editor.tsx
new file mode 100644
index 0000000..fce53e2
--- /dev/null
+++ b/app/workspace/moments-sync/components/tag-editor.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { toast } from "@/components/ui/use-toast"
+import type { Tag } from "@/types/content"
+
+interface TagEditorProps {
+  tagId?: string
+  initialData?: Tag
+}
+
+export function TagEditor({ tagId, initialData }: TagEditorProps) {
+  const router = useRouter()
+  const [formData, setFormData] = useState<Partial<Tag["settings"]>>({
+    syncInterval: 1,
+    timeRange: {
+      start: "06:00",
+      end: "23:59",
+    },
+    dailyLimit: 5,
+    accountType: "business",
+    enabled: true,
+  })
+
+  useEffect(() => {
+    if (initialData) {
+      setFormData(initialData.settings)
+    }
+  }, [initialData])
+
+  const handleSave = async () => {
+    try {
+      // Here you would typically save the changes to your backend
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      toast({
+        title: tagId ? "标签已更新" : "标签已创建",
+        description: "设置已成功保存",
+      })
+      router.back()
+    } catch (error) {
+      toast({
+        title: "保存失败",
+        description: "无法保存标签设置",
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-6">
+        <div>
+          <Label htmlFor="taskName">任务名称</Label>
+          <Input
+            id="taskName"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            placeholder="请输入任务名称"
+            className="mt-2"
+          />
+        </div>
+
+        <div>
+          <Label>允许发布时间段</Label>
+          <div className="flex items-center space-x-2 mt-2">
+            <Input
+              type="time"
+              value={formData.timeRange?.start}
+              onChange={(e) =>
+                setFormData({
+                  ...formData,
+                  timeRange: { ...formData.timeRange, start: e.target.value },
+                })
+              }
+              className="w-32"
+            />
+            <span>至</span>
+            <Input
+              type="time"
+              value={formData.timeRange?.end}
+              onChange={(e) =>
+                setFormData({
+                  ...formData,
+                  timeRange: { ...formData.timeRange, end: e.target.value },
+                })
+              }
+              className="w-32"
+            />
+          </div>
+        </div>
+
+        <div>
+          <Label>每日同步数量</Label>
+          <div className="flex items-center space-x-4 mt-2">
+            <Button
+              variant="outline"
+              onClick={() => setFormData({ ...formData, dailyLimit: Math.max(1, (formData.dailyLimit || 1) - 1) })}
+            >
+              -
+            </Button>
+            <span className="w-12 text-center">{formData.dailyLimit}</span>
+            <Button
+              variant="outline"
+              onClick={() => setFormData({ ...formData, dailyLimit: (formData.dailyLimit || 0) + 1 })}
+            >
+              +
+            </Button>
+            <span className="text-gray-500">条朋友圈</span>
+          </div>
+        </div>
+
+        <div>
+          <Label>账号类型</Label>
+          <div className="flex space-x-4 mt-2">
+            <Button
+              variant={formData.accountType === "business" ? "default" : "outline"}
+              onClick={() => setFormData({ ...formData, accountType: "business" })}
+              className="w-24"
+            >
+              业务号
+            </Button>
+            <Button
+              variant={formData.accountType === "personal" ? "default" : "outline"}
+              onClick={() => setFormData({ ...formData, accountType: "personal" })}
+              className="w-24"
+            >
+              人设号
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label>是否启用</Label>
+          <Switch
+            checked={formData.enabled}
+            onCheckedChange={(checked) => setFormData({ ...formData, enabled: checked })}
+          />
+        </div>
+
+        <div className="flex justify-end space-x-2">
+          <Button variant="outline" onClick={() => router.back()}>
+            取消
+          </Button>
+          <Button onClick={handleSave}>保存</Button>
+        </div>
+      </div>
+    </Card>
+  )
+}
diff --git a/app/workspace/moments-sync/loading.tsx b/app/workspace/moments-sync/loading.tsx
new file mode 100644
index 0000000..b764337
--- /dev/null
+++ b/app/workspace/moments-sync/loading.tsx
@@ -0,0 +1,37 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+
+export default function MomentsSyncLoading() {
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-10 w-[250px]" />
+        <Skeleton className="h-10 w-[120px]" />
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        {Array(6)
+          .fill(0)
+          .map((_, i) => (
+            <Card key={i} className="overflow-hidden">
+              <CardHeader className="p-0">
+                <Skeleton className="h-48 w-full" />
+              </CardHeader>
+              <CardContent className="p-4 space-y-3">
+                <Skeleton className="h-5 w-4/5" />
+                <Skeleton className="h-4 w-3/5" />
+                <div className="flex justify-between items-center pt-2">
+                  <Skeleton className="h-4 w-[100px]" />
+                  <Skeleton className="h-8 w-[80px]" />
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+      </div>
+
+      <div className="flex justify-center">
+        <Skeleton className="h-10 w-[200px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/new/page.tsx b/app/workspace/moments-sync/new/page.tsx
new file mode 100644
index 0000000..ab87e9c
--- /dev/null
+++ b/app/workspace/moments-sync/new/page.tsx
@@ -0,0 +1,148 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft, Search } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { StepIndicator } from "../components/step-indicator"
+import { BasicSettings } from "../components/basic-settings"
+import { DeviceSelectionDialog } from "../components/device-selection-dialog"
+import { Input } from "@/components/ui/input"
+import { toast } from "@/components/ui/use-toast"
+
+export default function NewMomentsSyncPage() {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
+  const [formData, setFormData] = useState({
+    taskName: "",
+    startTime: "06:00",
+    endTime: "23:59",
+    syncCount: 5,
+    accountType: "business" as const,
+    enabled: true,
+    selectedDevices: [] as string[],
+    selectedLibraries: [] as string[],
+  })
+
+  const handleUpdateFormData = (data: Partial<typeof formData>) => {
+    setFormData((prev) => ({ ...prev, ...data }))
+  }
+
+  const handleNext = () => {
+    setCurrentStep((prev) => Math.min(prev + 1, 3))
+  }
+
+  const handlePrev = () => {
+    setCurrentStep((prev) => Math.max(prev - 1, 1))
+  }
+
+  const handleComplete = async () => {
+    console.log("Form submitted:", formData)
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    toast({
+      title: "创建成���",
+      description: "朋友圈同步任务已创建并开始执行",
+    })
+    router.push("/workspace/moments-sync")
+  }
+
+  return (
+    <div className="min-h-screen bg-[#F8F9FA] pb-20">
+      <header className="sticky top-0 z-10 bg-white">
+        <div className="flex items-center h-14 px-4">
+          <Button variant="ghost" size="icon" onClick={() => router.back()} className="hover:bg-gray-50">
+            <ChevronLeft className="h-6 w-6" />
+          </Button>
+          <h1 className="ml-2 text-lg font-medium">新建朋友圈同步</h1>
+        </div>
+      </header>
+
+      <div className="mt-8">
+        <StepIndicator currentStep={currentStep} />
+
+        <div className="mt-8">
+          {currentStep === 1 && (
+            <BasicSettings formData={formData} onChange={handleUpdateFormData} onNext={handleNext} />
+          )}
+
+          {currentStep === 2 && (
+            <div className="space-y-6 px-6">
+              <div className="relative">
+                <Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
+                <Input
+                  placeholder="选择设备"
+                  className="h-12 pl-11 rounded-xl border-gray-200 text-base"
+                  onClick={() => setDeviceDialogOpen(true)}
+                  readOnly
+                />
+              </div>
+
+              {formData.selectedDevices.length > 0 && (
+                <div className="text-base text-gray-500">已选设备：{formData.selectedDevices.length} 个</div>
+              )}
+
+              <div className="flex space-x-4 pt-4">
+                <Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
+                  上一步
+                </Button>
+                <Button
+                  onClick={handleNext}
+                  className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
+                >
+                  下一步
+                </Button>
+              </div>
+
+              <DeviceSelectionDialog
+                open={deviceDialogOpen}
+                onOpenChange={setDeviceDialogOpen}
+                selectedDevices={formData.selectedDevices}
+                onSelect={(devices) => {
+                  handleUpdateFormData({ selectedDevices: devices })
+                  setDeviceDialogOpen(false)
+                }}
+              />
+            </div>
+          )}
+
+          {currentStep === 3 && (
+            <div className="space-y-6 px-6">
+              <div className="relative">
+                <Search className="absolute left-3 top-4 h-5 w-5 text-gray-400" />
+                <Input placeholder="选择内容库" className="h-12 pl-11 rounded-xl border-gray-200 text-base" />
+              </div>
+
+              <div className="flex space-x-4 pt-4">
+                <Button variant="outline" onClick={handlePrev} className="flex-1 h-12 rounded-xl text-base">
+                  上一步
+                </Button>
+                <Button
+                  onClick={handleComplete}
+                  className="flex-1 h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
+                >
+                  完成
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <nav className="fixed bottom-0 left-0 right-0 h-16 bg-white border-t flex items-center justify-around px-6">
+        <button className="flex flex-col items-center text-blue-600">
+          <span className="text-sm mt-1">首页</span>
+        </button>
+        <button className="flex flex-col items-center text-gray-400">
+          <span className="text-sm mt-1">场景获客</span>
+        </button>
+        <button className="flex flex-col items-center text-gray-400">
+          <span className="text-sm mt-1">工作台</span>
+        </button>
+        <button className="flex flex-col items-center text-gray-400">
+          <span className="text-sm mt-1">我的</span>
+        </button>
+      </nav>
+    </div>
+  )
+}
diff --git a/app/workspace/moments-sync/new/steps/BasicSettings.tsx b/app/workspace/moments-sync/new/steps/BasicSettings.tsx
new file mode 100644
index 0000000..7458848
--- /dev/null
+++ b/app/workspace/moments-sync/new/steps/BasicSettings.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Minus, Plus, HelpCircle } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+
+interface BasicSettingsProps {
+  formData: any
+  onChange: (data: any) => void
+  onNext: () => void
+}
+
+export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
+  return (
+    <Card className="p-6">
+      <div className="space-y-6">
+        <div>
+          <Label htmlFor="taskName" className="required">
+            任务名称
+          </Label>
+          <Input
+            id="taskName"
+            value={formData.taskName}
+            onChange={(e) => onChange({ ...formData, taskName: e.target.value })}
+            placeholder="请输入任务名称"
+            className="mt-2"
+          />
+        </div>
+
+        <div>
+          <Label>允许发布的时间段</Label>
+          <div className="flex items-center space-x-2 mt-2">
+            <Input
+              type="time"
+              value={formData.startTime}
+              onChange={(e) => onChange({ ...formData, startTime: e.target.value })}
+              className="w-32"
+            />
+            <span>至</span>
+            <Input
+              type="time"
+              value={formData.endTime}
+              onChange={(e) => onChange({ ...formData, endTime: e.target.value })}
+              className="w-32"
+            />
+          </div>
+        </div>
+
+        <div>
+          <Label>每日同步数量</Label>
+          <div className="flex items-center space-x-4 mt-2">
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => onChange({ ...formData, syncCount: Math.max(1, formData.syncCount - 1) })}
+              aria-label="减少同步数量"
+            >
+              <Minus className="h-4 w-4" />
+            </Button>
+            <span className="w-12 text-center">{formData.syncCount}</span>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={() => onChange({ ...formData, syncCount: formData.syncCount + 1 })}
+              aria-label="增加同步数量"
+            >
+              <Plus className="h-4 w-4" />
+            </Button>
+            <span className="text-gray-500">条朋友圈</span>
+          </div>
+        </div>
+
+        <div>
+          <Label>账号类型</Label>
+          <div className="flex space-x-4 mt-2">
+            <div className="flex items-center">
+              <Button
+                variant={formData.accountType === "business" ? "default" : "outline"}
+                onClick={() => onChange({ ...formData, accountType: "business" })}
+                className="w-24"
+              >
+                业务号
+              </Button>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <HelpCircle className="h-4 w-4 ml-2 text-gray-400" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>
+                      业务号能够循环推送内容库中的内容。当内容库所有内容循环推送完毕后，若有新内容则优先推送新内容，若无新内容则继续循环推送。
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+            <div className="flex items-center">
+              <Button
+                variant={formData.accountType === "personal" ? "default" : "outline"}
+                onClick={() => onChange({ ...formData, accountType: "personal" })}
+                className="w-24"
+              >
+                人设号
+              </Button>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <HelpCircle className="h-4 w-4 ml-2 text-gray-400" />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>人设号用于实时更新同步，有新动态时进行同步，无新动态则不同步。</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label>是否启用</Label>
+          <Switch
+            checked={formData.enabled}
+            onCheckedChange={(checked) => onChange({ ...formData, enabled: checked })}
+          />
+        </div>
+
+        <Button className="w-full" onClick={onNext}>
+          下一步
+        </Button>
+      </div>
+    </Card>
+  )
+}
diff --git a/app/workspace/moments-sync/new/steps/ContentSelector.tsx b/app/workspace/moments-sync/new/steps/ContentSelector.tsx
new file mode 100644
index 0000000..03b633a
--- /dev/null
+++ b/app/workspace/moments-sync/new/steps/ContentSelector.tsx
@@ -0,0 +1,279 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search, RefreshCw } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { toast } from "@/components/ui/use-toast"
+
+// 定义类型，避免导入错误
+interface ContentLibrary {
+  id: string
+  name: string
+  source: string
+  creator: string
+  contentCount: number
+  lastUpdated: string
+  type: string
+  status: string
+}
+
+interface ContentLibraryResponse {
+  code: number
+  message: string
+  data: {
+    libraries: ContentLibrary[]
+    total: number
+  }
+}
+
+interface ContentLibrarySelectResponse {
+  code: number
+  message: string
+  data: {
+    success: boolean
+    libraryId: string
+    name: string
+  }
+}
+
+interface ContentSelectorProps {
+  formData: any
+  onChange: (data: any) => void
+  onNext: () => void
+  onPrev: () => void
+}
+
+export function ContentSelector({ formData, onChange, onNext, onPrev }: ContentSelectorProps) {
+  const [libraries, setLibraries] = useState<ContentLibrary[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [activeTab, setActiveTab] = useState("all")
+
+  useEffect(() => {
+    fetchContentLibraries()
+  }, [])
+
+  const fetchContentLibraries = async () => {
+    setLoading(true)
+    try {
+      // 实际项目中这里应该调用API获取所有内容库
+      const response: ContentLibraryResponse = {
+        code: 0,
+        message: "success",
+        data: {
+          libraries: [
+            {
+              id: "1",
+              name: "微信好友广告",
+              source: "微信",
+              creator: "海尼",
+              contentCount: 12,
+              lastUpdated: "2024-02-09 12:30",
+              type: "moments",
+              status: "active",
+            },
+            {
+              id: "2",
+              name: "开发群",
+              source: "微信",
+              creator: "karuo",
+              contentCount: 8,
+              lastUpdated: "2024-02-09 12:30",
+              type: "group",
+              status: "inactive",
+            },
+            {
+              id: "3",
+              name: "产品更新",
+              source: "微信",
+              creator: "张三",
+              contentCount: 15,
+              lastUpdated: "2024-02-10 09:45",
+              type: "moments",
+              status: "active",
+            },
+            {
+              id: "4",
+              name: "市场活动",
+              source: "微信",
+              creator: "李四",
+              contentCount: 20,
+              lastUpdated: "2024-02-11 14:20",
+              type: "moments",
+              status: "active",
+            },
+            {
+              id: "5",
+              name: "技术交流",
+              source: "微信",
+              creator: "王五",
+              contentCount: 10,
+              lastUpdated: "2024-02-12 16:35",
+              type: "group",
+              status: "active",
+            },
+          ],
+          total: 5,
+        },
+      }
+
+      if (response.code === 0) {
+        setLibraries(response.data.libraries)
+      } else {
+        throw new Error(response.message)
+      }
+    } catch (error) {
+      toast({
+        title: "获取失败",
+        description: "无法获取内容库列表",
+        variant: "destructive",
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleRefresh = () => {
+    fetchContentLibraries()
+    toast({
+      title: "刷新成功",
+      description: "内容库列表已更新",
+    })
+  }
+
+  const filteredLibraries = libraries.filter((library) => {
+    const matchesTab =
+      activeTab === "all" ||
+      (activeTab === "friends" && library.type === "moments") ||
+      (activeTab === "groups" && library.type === "group")
+    const matchesSearch = library.name.toLowerCase().includes(searchQuery.toLowerCase())
+    return matchesTab && matchesSearch
+  })
+
+  const handleSelectLibrary = async (library: ContentLibrary) => {
+    try {
+      // 实际项目中这里应该调用API
+      const response: ContentLibrarySelectResponse = {
+        code: 0,
+        message: "success",
+        data: {
+          success: true,
+          libraryId: library.id,
+          name: library.name,
+        },
+      }
+
+      if (response.code === 0 && response.data.success) {
+        onChange({
+          ...formData,
+          selectedLibrary: library.id,
+          contentFormat: library.type,
+        })
+        toast({
+          title: "选择成功",
+          description: `已选择内容库：${library.name}`,
+        })
+      } else {
+        throw new Error(response.message)
+      }
+    } catch (error) {
+      toast({
+        title: "选择失败",
+        description: "无法选择内容库",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const handleFinish = async () => {
+    try {
+      // 实际项目中这里应该调用API创建计划
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+      toast({
+        title: "创建成功",
+        description: "新计划已创建",
+      })
+      onNext()
+    } catch (error) {
+      toast({
+        title: "创建失败",
+        description: "无法创建新计划",
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-6">
+        <div className="flex items-center space-x-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder="搜索内容库名称..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+          </Button>
+        </div>
+
+        <Tabs defaultValue="all" onValueChange={setActiveTab}>
+          <TabsList>
+            <TabsTrigger value="all">全部</TabsTrigger>
+            <TabsTrigger value="friends">微信好友</TabsTrigger>
+            <TabsTrigger value="groups">聊天群</TabsTrigger>
+          </TabsList>
+        </Tabs>
+
+        <div className="space-y-2">
+          {filteredLibraries.map((library) => (
+            <div
+              key={library.id}
+              className={`flex items-center space-x-3 p-3 rounded-lg cursor-pointer border transition-colors ${
+                formData.selectedLibrary === library.id
+                  ? "border-blue-500 bg-blue-50"
+                  : "border-gray-200 hover:border-blue-500"
+              }`}
+              onClick={() => handleSelectLibrary(library)}
+            >
+              <div className="flex-1">
+                <div className="font-medium">{library.name}</div>
+                <div className="text-sm text-gray-500 mt-1">
+                  <div className="flex items-center space-x-2">
+                    <span>来源：{library.source}</span>
+                    <span>•</span>
+                    <span>创建人：{library.creator}</span>
+                  </div>
+                  <div className="flex items-center space-x-2 mt-1">
+                    <Badge variant="outline">内容数量：{library.contentCount}</Badge>
+                    <Badge variant="outline">更新时间：{new Date(library.lastUpdated).toLocaleString()}</Badge>
+                  </div>
+                </div>
+              </div>
+              <Badge variant="secondary" className={library.status === "inactive" ? "bg-gray-100" : ""}>
+                {library.status === "active" ? "启用" : "已停用"}
+              </Badge>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex justify-between">
+          <Button variant="outline" onClick={onPrev}>
+            上一步
+          </Button>
+          <Button onClick={handleFinish} disabled={!formData.selectedLibrary}>
+            完成
+          </Button>
+        </div>
+      </div>
+    </Card>
+  )
+}
diff --git a/app/workspace/moments-sync/new/steps/DeviceSelector.tsx b/app/workspace/moments-sync/new/steps/DeviceSelector.tsx
new file mode 100644
index 0000000..bd213d8
--- /dev/null
+++ b/app/workspace/moments-sync/new/steps/DeviceSelector.tsx
@@ -0,0 +1,274 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search, RefreshCw, X } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { toast } from "@/components/ui/use-toast"
+import { Badge } from "@/components/ui/badge"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+
+// 定义类型，避免导入错误
+interface Device {
+  id: string
+  imei: string
+  name: string
+  status: string
+  wechatId: string
+  usedInPlans: number
+}
+
+interface DeviceResponse {
+  code: number
+  message: string
+  data: {
+    devices: Device[]
+    total: number
+  }
+}
+
+interface DeviceSelectResponse {
+  code: number
+  message: string
+  data: {
+    success: boolean
+    deviceIds: string[]
+  }
+}
+
+interface DeviceSelectorProps {
+  formData: any
+  onChange: (data: any) => void
+  onNext: () => void
+  onPrev: () => void
+}
+
+export function DeviceSelector({ formData, onChange, onNext, onPrev }: DeviceSelectorProps) {
+  const [devices, setDevices] = useState<Device[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState("all")
+  const [currentPage, setCurrentPage] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const itemsPerPage = 5
+
+  useEffect(() => {
+    fetchDevices()
+  }, [])
+
+  const fetchDevices = async () => {
+    setLoading(true)
+    try {
+      // 实际项目中这里应该调用API获取所有设备
+      const response: DeviceResponse = {
+        code: 0,
+        message: "success",
+        data: {
+          devices: Array.from({ length: 42 }, (_, i) => ({
+            id: `device-${i + 1}`,
+            imei: `IMEI-${Math.random().toString(36).substr(2, 9)}`,
+            name: `设备 ${i + 1}`,
+            status: Math.random() > 0.3 ? "online" : "offline",
+            wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+            usedInPlans: Math.floor(Math.random() * 3),
+          })),
+          total: 42,
+        },
+      }
+
+      if (response.code === 0) {
+        setDevices(response.data.devices)
+      } else {
+        throw new Error(response.message)
+      }
+    } catch (error) {
+      toast({
+        title: "获取失败",
+        description: "无法获取设备列表",
+        variant: "destructive",
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleRefresh = () => {
+    fetchDevices()
+    toast({
+      title: "刷新成功",
+      description: "设备列表已更新",
+    })
+  }
+
+  const filteredDevices = devices.filter((device) => {
+    const matchesSearch =
+      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.imei.toLowerCase().includes(searchQuery.toLowerCase())
+    const matchesStatus = statusFilter === "all" || device.status === statusFilter
+    return matchesSearch && matchesStatus
+  })
+
+  const paginatedDevices = filteredDevices.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+
+  const handleDeviceSelect = async (deviceId: string) => {
+    try {
+      // 实际项目中这里应该调用API
+      const response: DeviceSelectResponse = {
+        code: 0,
+        message: "success",
+        data: {
+          success: true,
+          deviceIds: [deviceId],
+        },
+      }
+
+      if (response.code === 0 && response.data.success) {
+        const updatedSelection = formData.selectedDevices.includes(deviceId)
+          ? formData.selectedDevices.filter((id: string) => id !== deviceId)
+          : [...formData.selectedDevices, deviceId]
+        onChange({ ...formData, selectedDevices: updatedSelection })
+      } else {
+        throw new Error(response.message)
+      }
+    } catch (error) {
+      toast({
+        title: "选择失败",
+        description: "无法选择设备",
+        variant: "destructive",
+      })
+    }
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+            <Input
+              placeholder="搜索设备备注或IMEI"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-[120px]">
+              <SelectValue placeholder="全部状态" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部状态</SelectItem>
+              <SelectItem value="online">在线</SelectItem>
+              <SelectItem value="offline">离线</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
+            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+          </Button>
+        </div>
+
+        <div className="space-y-2">
+          {paginatedDevices.map((device) => (
+            <Card
+              key={device.id}
+              className={`p-3 hover:shadow-md transition-shadow cursor-pointer ${
+                formData.selectedDevices.includes(device.id) ? "border-blue-500 border-2" : ""
+              }`}
+              onClick={() => handleDeviceSelect(device.id)}
+            >
+              <div className="flex items-center space-x-3">
+                <Checkbox
+                  checked={formData.selectedDevices.includes(device.id)}
+                  onCheckedChange={() => handleDeviceSelect(device.id)}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between mb-1">
+                    <div className="font-medium truncate">{device.name}</div>
+                    <div
+                      className={`px-2 py-1 rounded-full text-xs ${
+                        device.status === "online" ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
+                      }`}
+                    >
+                      {device.status === "online" ? "在线" : "离线"}
+                    </div>
+                  </div>
+                  <div className="text-sm text-gray-500">IMEI: {device.imei}</div>
+                  <div className="text-sm text-gray-500">微信号: {device.wechatId}</div>
+                  {device.usedInPlans > 0 && (
+                    <div className="text-sm text-orange-500">已用于 {device.usedInPlans} 个计划</div>
+                  )}
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+        <Pagination>
+          <PaginationContent>
+            <PaginationPrevious
+              onClick={() => setCurrentPage((prev) => Math.max(1, prev - 1))}
+              disabled={currentPage === 1}
+            />
+            {Array.from({ length: Math.ceil(filteredDevices.length / itemsPerPage) }, (_, i) => i + 1).map((page) => (
+              <PaginationItem key={page}>
+                <PaginationLink onClick={() => setCurrentPage(page)} isActive={currentPage === page}>
+                  {page}
+                </PaginationLink>
+              </PaginationItem>
+            ))}
+            <PaginationNext
+              onClick={() =>
+                setCurrentPage((prev) => Math.min(Math.ceil(filteredDevices.length / itemsPerPage), prev + 1))
+              }
+              disabled={currentPage === Math.ceil(filteredDevices.length / itemsPerPage)}
+            />
+          </PaginationContent>
+        </Pagination>
+
+        <div className="mt-4">
+          <h3 className="font-medium mb-2">已选设备：</h3>
+          <div className="flex flex-wrap gap-2">
+            {formData.selectedDevices.map((deviceId: string) => {
+              const device = devices.find((d) => d.id === deviceId)
+              return (
+                device && (
+                  <Badge key={deviceId} variant="secondary" className="px-2 py-1 flex items-center space-x-1">
+                    <span>{device.name}</span>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-4 w-4 p-0 hover:bg-transparent"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleDeviceSelect(deviceId)
+                      }}
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </Badge>
+                )
+              )
+            })}
+          </div>
+        </div>
+
+        <div className="flex justify-between mt-4">
+          <Button variant="outline" onClick={onPrev}>
+            上一步
+          </Button>
+          <Button onClick={onNext} disabled={formData.selectedDevices.length === 0}>
+            下一步
+          </Button>
+        </div>
+      </div>
+    </Card>
+  )
+}
diff --git a/app/workspace/moments-sync/page.tsx b/app/workspace/moments-sync/page.tsx
new file mode 100644
index 0000000..ad40a3c
--- /dev/null
+++ b/app/workspace/moments-sync/page.tsx
@@ -0,0 +1,168 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Plus, Filter, Search, RefreshCw, MoreVertical, Clock, Edit, Trash2, Eye } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import Link from "next/link"
+import { Badge } from "@/components/ui/badge"
+import { useRouter } from "next/navigation"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Switch } from "@/components/ui/switch"
+
+interface SyncTask {
+  id: string
+  name: string
+  status: "running" | "paused"
+  deviceCount: number
+  contentLib: string
+  syncCount: number
+  lastSyncTime: string
+  createTime: string
+  creator: string
+}
+
+export default function MomentsSyncPage() {
+  const router = useRouter()
+  const [tasks, setTasks] = useState<SyncTask[]>([
+    {
+      id: "1",
+      name: "同步卡若主号",
+      deviceCount: 2,
+      contentLib: "卡若朋友圈",
+      syncCount: 307,
+      lastSyncTime: "2025-02-06 13:12:35",
+      createTime: "2024-11-20 19:04:14",
+      creator: "karuo",
+      status: "running",
+    },
+    {
+      id: "2",
+      name: "暗黑4业务",
+      deviceCount: 1,
+      contentLib: "暗黑4代练",
+      syncCount: 622,
+      lastSyncTime: "2024-03-04 14:09:35",
+      createTime: "2024-03-04 14:29:04",
+      creator: "lkdie",
+      status: "paused",
+    },
+  ])
+
+  const handleDelete = (taskId: string) => {
+    setTasks(tasks.filter((task) => task.id !== taskId))
+  }
+
+  const handleEdit = (taskId: string) => {
+    router.push(`/workspace/moments-sync/${taskId}/edit`)
+  }
+
+  const handleView = (taskId: string) => {
+    router.push(`/workspace/moments-sync/${taskId}`)
+  }
+
+  const toggleTaskStatus = (taskId: string) => {
+    setTasks(
+      tasks.map((task) =>
+        task.id === taskId ? { ...task, status: task.status === "running" ? "paused" : "running" } : task,
+      ),
+    )
+  }
+
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex items-center justify-between p-4">
+          <div className="flex items-center space-x-3">
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">朋友圈同步</h1>
+          </div>
+          <Link href="/workspace/moments-sync/new">
+            <Button>
+              <Plus className="h-4 w-4 mr-2" />
+              新建任务
+            </Button>
+          </Link>
+        </div>
+      </header>
+
+      <div className="p-4">
+        <Card className="p-4 mb-4">
+          <div className="flex items-center space-x-2">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+              <Input placeholder="搜索任务名称" className="pl-9" />
+            </div>
+            <Button variant="outline" size="icon">
+              <Filter className="h-4 w-4" />
+            </Button>
+            <Button variant="outline" size="icon">
+              <RefreshCw className="h-4 w-4" />
+            </Button>
+          </div>
+        </Card>
+
+        <div className="space-y-4">
+          {tasks.map((task) => (
+            <Card key={task.id} className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center space-x-2">
+                  <h3 className="font-medium">{task.name}</h3>
+                  <Badge variant={task.status === "running" ? "success" : "secondary"}>
+                    {task.status === "running" ? "进行中" : "已暂停"}
+                  </Badge>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Switch checked={task.status === "running"} onCheckedChange={() => toggleTaskStatus(task.id)} />
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="sm">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                      <DropdownMenuItem onClick={() => handleView(task.id)}>
+                        <Eye className="h-4 w-4 mr-2" />
+                        查看
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => handleEdit(task.id)}>
+                        <Edit className="h-4 w-4 mr-2" />
+                        编辑
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => handleDelete(task.id)}>
+                        <Trash2 className="h-4 w-4 mr-2" />
+                        删除
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4 mb-4">
+                <div className="text-sm text-gray-500">
+                  <div>推送设备：{task.deviceCount} 个</div>
+                  <div>内容库：{task.contentLib}</div>
+                </div>
+                <div className="text-sm text-gray-500">
+                  <div>已同步：{task.syncCount} 条</div>
+                  <div>创建人：{task.creator}</div>
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between text-xs text-gray-500 border-t pt-4">
+                <div className="flex items-center">
+                  <Clock className="w-4 h-4 mr-1" />
+                  上次同步：{task.lastSyncTime}
+                </div>
+                <div>创建时间：{task.createTime}</div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/workspace/pricing/edit/[id]/page.tsx b/app/workspace/pricing/edit/[id]/page.tsx
new file mode 100644
index 0000000..e651e61
--- /dev/null
+++ b/app/workspace/pricing/edit/[id]/page.tsx
@@ -0,0 +1,572 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { ChevronLeft } from "lucide-react"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { cn } from "@/app/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Switch } from "@/components/ui/switch"
+import { Card } from "@/components/ui/card"
+
+// 模拟标签数据
+const tagOptions = [
+  { value: "new_user", label: "新用户" },
+  { value: "low_activity", label: "低活跃度" },
+  { value: "high_spending", label: "高消费" },
+  { value: "high_activity", label: "高活跃度" },
+  { value: "potential", label: "潜在客户" },
+  { value: "purchase_intent", label: "有购买意向" },
+  { value: "holiday_consumer", label: "节日消费" },
+  { value: "promotion_sensitive", label: "促销敏感" },
+  { value: "tech_savvy", label: "科技爱好者" },
+  { value: "luxury_buyer", label: "奢侈品买家" },
+  { value: "price_sensitive", label: "价格敏感" },
+  { value: "brand_loyal", label: "品牌忠诚" },
+]
+
+// 模拟区域数据
+const regionOptions = [
+  { value: "nationwide", label: "全国" },
+  { value: "beijing", label: "北京" },
+  { value: "shanghai", label: "上海" },
+  { value: "guangzhou", label: "广州" },
+  { value: "shenzhen", label: "深圳" },
+  { value: "hangzhou", label: "杭州" },
+  { value: "chengdu", label: "成都" },
+  { value: "wuhan", label: "武汉" },
+  { value: "east_china", label: "华东地区" },
+  { value: "south_china", label: "华南地区" },
+  { value: "north_china", label: "华北地区" },
+  { value: "central_china", label: "华中地区" },
+  { value: "tier_1", label: "一线城市" },
+  { value: "tier_2", label: "二线城市" },
+  { value: "tier_3", label: "三线城市" },
+]
+
+// 模拟设备数据
+const deviceOptions = [
+  { id: "1", name: "设备 A-001", status: "online" },
+  { id: "2", name: "设备 B-002", status: "online" },
+  { id: "3", name: "设备 C-003", status: "offline" },
+  { id: "4", name: "设备 D-004", status: "online" },
+  { id: "5", name: "设备 E-005", status: "online" },
+]
+
+// 模拟分发规则数据
+const mockDistributionData = [
+  {
+    id: "1",
+    ruleType: "trafficPackage",
+    name: "普通流量包",
+    price: 0.5,
+    tags: ["new_user", "low_activity"],
+    regions: ["nationwide"],
+    deviceAddQuantity: 10,
+    selectAllDevices: true,
+    selectedDevices: [],
+    autoAdd: false,
+  },
+  {
+    id: "2",
+    ruleType: "distributionRule",
+    name: "高质量流量分发",
+    price: 2.5,
+    tags: ["high_spending", "high_activity"],
+    regions: ["tier_1"],
+    deviceAddQuantity: 5,
+    selectAllDevices: false,
+    selectedDevices: ["1", "4", "5"],
+    autoAdd: true,
+  },
+]
+
+type RuleType = "trafficPackage" | "distributionRule"
+
+export default function EditDistributionPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const { id } = params
+
+  const [currentStep, setCurrentStep] = useState(1)
+  const [ruleType, setRuleType] = useState<RuleType>("trafficPackage")
+  const [name, setName] = useState("")
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [selectedRegions, setSelectedRegions] = useState<string[]>([])
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+  const [selectAllDevices, setSelectAllDevices] = useState(false)
+  const [deviceAddQuantity, setDeviceAddQuantity] = useState("10")
+  const [price, setPrice] = useState("")
+  const [tagsOpen, setTagsOpen] = useState(false)
+  const [regionsOpen, setRegionsOpen] = useState(false)
+  const [devicesOpen, setDevicesOpen] = useState(false)
+  const [autoAdd, setAutoAdd] = useState(false)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // 在实际应用中，这里会从API获取数据
+    // 这里使用模拟数据
+    const distributionItem = mockDistributionData.find((item) => item.id === id)
+
+    if (distributionItem) {
+      setRuleType(distributionItem.ruleType as RuleType)
+      setName(distributionItem.name)
+      setSelectedTags(distributionItem.tags)
+      setSelectedRegions(distributionItem.regions)
+      setSelectAllDevices(distributionItem.selectAllDevices)
+      setSelectedDevices(distributionItem.selectedDevices)
+      setDeviceAddQuantity(distributionItem.deviceAddQuantity.toString())
+      setPrice(distributionItem.price.toString())
+      setAutoAdd(distributionItem.autoAdd)
+    } else {
+      // 如果找不到数据，返回列表页
+      router.push("/workspace/pricing")
+    }
+
+    setLoading(false)
+  }, [id, router])
+
+  // 当选择"全部设备"时，自动选中所有设备
+  const handleSelectAllDevices = (value: boolean) => {
+    setSelectAllDevices(value)
+    if (value) {
+      setSelectedDevices(deviceOptions.map((device) => device.id))
+    } else {
+      setSelectedDevices([])
+    }
+  }
+
+  const handleNext = () => {
+    if (name.trim()) {
+      setCurrentStep(2)
+    } else {
+      alert("请填写名称")
+    }
+  }
+
+  const handlePrevious = () => {
+    setCurrentStep(1)
+  }
+
+  const handleSubmit = () => {
+    // 在实际应用中，这里会发送API请求更新数据
+    console.log({
+      id,
+      ruleType,
+      name,
+      tags: selectedTags,
+      regions: selectedRegions,
+      devices: selectAllDevices ? "all" : selectedDevices,
+      deviceAddQuantity: Number.parseInt(deviceAddQuantity),
+      price: Number.parseFloat(price),
+      autoAdd,
+    })
+
+    // 返回到列表页
+    router.push("/workspace/pricing")
+  }
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-screen">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      {/* 顶部栏 */}
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+          <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/pricing")} className="mr-2">
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-lg font-medium">编辑分发</h1>
+          <div className="w-10"></div> {/* 占位，保持标题居中 */}
+        </div>
+      </header>
+
+      {/* 进度条 */}
+      <div className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center">
+            <div className="flex-1">
+              <div className="flex items-center">
+                <div
+                  className={`rounded-full h-8 w-8 flex items-center justify-center ${
+                    currentStep >= 1 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  1
+                </div>
+                <div className={`h-1 flex-1 mx-2 ${currentStep >= 2 ? "bg-blue-600" : "bg-gray-200"}`}></div>
+                <div
+                  className={`rounded-full h-8 w-8 flex items-center justify-center ${
+                    currentStep >= 2 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  2
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex mt-2">
+            <div className="flex-1 text-center text-sm font-medium">选择规则类型</div>
+            <div className="flex-1 text-center text-sm font-medium">设置规则</div>
+          </div>
+        </div>
+      </div>
+
+      {/* 主内容区 */}
+      <main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        {currentStep === 1 ? (
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <h2 className="text-lg font-medium">选择规则类型</h2>
+
+              <RadioGroup
+                value={ruleType}
+                onValueChange={(value) => setRuleType(value as RuleType)}
+                className="grid grid-cols-1 md:grid-cols-2 gap-4"
+              >
+                <Card
+                  className={`p-4 cursor-pointer border-2 ${ruleType === "trafficPackage" ? "border-blue-500" : "border-transparent"}`}
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="trafficPackage" id="trafficPackage" />
+                    <Label htmlFor="trafficPackage" className="cursor-pointer flex-1">
+                      创建流量包
+                    </Label>
+                  </div>
+                  <p className="mt-2 text-sm text-gray-500 pl-6">按照用户标签和地区创建流量包</p>
+                </Card>
+                <Card
+                  className={`p-4 cursor-pointer border-2 ${ruleType === "distributionRule" ? "border-blue-500" : "border-transparent"}`}
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="distributionRule" id="distributionRule" />
+                    <Label htmlFor="distributionRule" className="cursor-pointer flex-1">
+                      创建分发规则
+                    </Label>
+                  </div>
+                  <p className="mt-2 text-sm text-gray-500 pl-6">创建流量自动分发规则</p>
+                </Card>
+              </RadioGroup>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="name">{ruleType === "trafficPackage" ? "流量包名称" : "分发规则名称"}</Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder={ruleType === "trafficPackage" ? "请输入流量包名称" : "请输入分发规则名称"}
+                required
+              />
+            </div>
+
+            <div className="flex justify-end pt-4">
+              <Button type="button" onClick={handleNext}>
+                下一步
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-lg font-medium mb-4">设置规则</h2>
+
+              {/* 用户标签选择 */}
+              <div className="space-y-2 mb-6">
+                <Label>用户标签</Label>
+                <Popover open={tagsOpen} onOpenChange={setTagsOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={tagsOpen}
+                      className="w-full justify-between h-auto min-h-10"
+                    >
+                      {selectedTags.length > 0 ? (
+                        <div className="flex flex-wrap gap-1 py-1">
+                          {selectedTags.map((tag) => (
+                            <Badge key={tag} variant="secondary" className="mr-1">
+                              {tagOptions.find((t) => t.value === tag)?.label}
+                              <button
+                                className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                                onMouseDown={(e) => {
+                                  e.preventDefault()
+                                  e.stopPropagation()
+                                  setSelectedTags(selectedTags.filter((t) => t !== tag))
+                                }}
+                              >
+                                ✕
+                              </button>
+                            </Badge>
+                          ))}
+                        </div>
+                      ) : (
+                        <span className="text-muted-foreground">选择用户标签</span>
+                      )}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-full p-0">
+                    <Command>
+                      <CommandInput placeholder="搜索标签..." />
+                      <CommandList>
+                        <CommandEmpty>未找到相关标签</CommandEmpty>
+                        <CommandGroup>
+                          <ScrollArea className="h-60">
+                            {tagOptions.map((tag) => (
+                              <CommandItem
+                                key={tag.value}
+                                value={tag.value}
+                                onSelect={() => {
+                                  setSelectedTags(
+                                    selectedTags.includes(tag.value)
+                                      ? selectedTags.filter((t) => t !== tag.value)
+                                      : [...selectedTags, tag.value],
+                                  )
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    selectedTags.includes(tag.value) ? "opacity-100" : "opacity-0",
+                                  )}
+                                />
+                                {tag.label}
+                              </CommandItem>
+                            ))}
+                          </ScrollArea>
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              {/* 用户区域选择 */}
+              <div className="space-y-2 mb-6">
+                <Label>用户区域</Label>
+                <Popover open={regionsOpen} onOpenChange={setRegionsOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={regionsOpen}
+                      className="w-full justify-between h-auto min-h-10"
+                    >
+                      {selectedRegions.length > 0 ? (
+                        <div className="flex flex-wrap gap-1 py-1">
+                          {selectedRegions.map((region) => (
+                            <Badge key={region} variant="outline" className="mr-1 bg-amber-50">
+                              {regionOptions.find((r) => r.value === region)?.label}
+                              <button
+                                className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                                onMouseDown={(e) => {
+                                  e.preventDefault()
+                                  e.stopPropagation()
+                                  setSelectedRegions(selectedRegions.filter((r) => r !== region))
+                                }}
+                              >
+                                ✕
+                              </button>
+                            </Badge>
+                          ))}
+                        </div>
+                      ) : (
+                        <span className="text-muted-foreground">选择用户区域</span>
+                      )}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-full p-0">
+                    <Command>
+                      <CommandInput placeholder="搜索区域..." />
+                      <CommandList>
+                        <CommandEmpty>未找到相关区域</CommandEmpty>
+                        <CommandGroup>
+                          <ScrollArea className="h-60">
+                            {regionOptions.map((region) => (
+                              <CommandItem
+                                key={region.value}
+                                value={region.value}
+                                onSelect={() => {
+                                  setSelectedRegions(
+                                    selectedRegions.includes(region.value)
+                                      ? selectedRegions.filter((r) => r !== region.value)
+                                      : [...selectedRegions, region.value],
+                                  )
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    selectedRegions.includes(region.value) ? "opacity-100" : "opacity-0",
+                                  )}
+                                />
+                                {region.label}
+                              </CommandItem>
+                            ))}
+                          </ScrollArea>
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              {/* 设备设置 */}
+              <div className="space-y-4 mb-6">
+                <h3 className="font-medium">设备范围设置</h3>
+
+                <div className="flex items-center space-x-2">
+                  <Switch id="selectAll" checked={selectAllDevices} onCheckedChange={handleSelectAllDevices} />
+                  <Label htmlFor="selectAll">选择所有设备</Label>
+                </div>
+
+                {!selectAllDevices && (
+                  <div className="space-y-2">
+                    <Label>选择指定设备</Label>
+                    <Popover open={devicesOpen} onOpenChange={setDevicesOpen}>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          aria-expanded={devicesOpen}
+                          className="w-full justify-between h-auto min-h-10"
+                        >
+                          {selectedDevices.length > 0 ? (
+                            <div className="flex flex-wrap gap-1 py-1">
+                              {selectedDevices.map((deviceId) => (
+                                <Badge key={deviceId} variant="outline" className="mr-1">
+                                  {deviceOptions.find((d) => d.id === deviceId)?.name}
+                                  <button
+                                    className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                                    onMouseDown={(e) => {
+                                      e.preventDefault()
+                                      e.stopPropagation()
+                                      setSelectedDevices(selectedDevices.filter((d) => d !== deviceId))
+                                    }}
+                                  >
+                                    ✕
+                                  </button>
+                                </Badge>
+                              ))}
+                            </div>
+                          ) : (
+                            <span className="text-muted-foreground">选择设备</span>
+                          )}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-full p-0">
+                        <Command>
+                          <CommandInput placeholder="搜索设备..." />
+                          <CommandList>
+                            <CommandEmpty>未找到相关设备</CommandEmpty>
+                            <CommandGroup>
+                              <ScrollArea className="h-60">
+                                {deviceOptions.map((device) => (
+                                  <CommandItem
+                                    key={device.id}
+                                    value={device.id}
+                                    onSelect={() => {
+                                      setSelectedDevices(
+                                        selectedDevices.includes(device.id)
+                                          ? selectedDevices.filter((d) => d !== device.id)
+                                          : [...selectedDevices, device.id],
+                                      )
+                                    }}
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-4 w-4",
+                                        selectedDevices.includes(device.id) ? "opacity-100" : "opacity-0",
+                                      )}
+                                    />
+                                    {device.name}
+                                    <span
+                                      className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
+                                        device.status === "online"
+                                          ? "bg-green-100 text-green-800"
+                                          : "bg-gray-100 text-gray-800"
+                                      }`}
+                                    >
+                                      {device.status === "online" ? "在线" : "离线"}
+                                    </span>
+                                  </CommandItem>
+                                ))}
+                              </ScrollArea>
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                )}
+              </div>
+
+              {/* 单设备添加数量 */}
+              <div className="space-y-2 mb-6">
+                <Label htmlFor="deviceAddQuantity">单设备添加数量</Label>
+                <Input
+                  id="deviceAddQuantity"
+                  type="number"
+                  min="1"
+                  value={deviceAddQuantity}
+                  onChange={(e) => setDeviceAddQuantity(e.target.value)}
+                  required
+                />
+              </div>
+
+              {/* 价格设置 */}
+              <div className="space-y-2 mb-6">
+                <Label htmlFor="price">价格（元/人次）</Label>
+                <div className="relative">
+                  <span className="absolute left-3 top-1/2 transform -translate-y-1/2">¥</span>
+                  <Input
+                    id="price"
+                    type="number"
+                    step="0.01"
+                    min="0"
+                    value={price}
+                    onChange={(e) => setPrice(e.target.value)}
+                    placeholder="0.00"
+                    className="pl-8"
+                    required
+                  />
+                </div>
+              </div>
+
+              {/* 自动添加设置 */}
+              <div className="flex items-center space-x-2 mb-6">
+                <Switch id="autoAdd" checked={autoAdd} onCheckedChange={setAutoAdd} />
+                <Label htmlFor="autoAdd">自动添加</Label>
+              </div>
+            </div>
+
+            {/* 按钮组 */}
+            <div className="flex justify-between pt-4">
+              <Button type="button" variant="outline" onClick={handlePrevious}>
+                上一步
+              </Button>
+              <Button type="button" onClick={handleSubmit}>
+                确认
+              </Button>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}
diff --git a/app/workspace/pricing/new/page.tsx b/app/workspace/pricing/new/page.tsx
new file mode 100644
index 0000000..164b9af
--- /dev/null
+++ b/app/workspace/pricing/new/page.tsx
@@ -0,0 +1,509 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { ChevronLeft } from "lucide-react"
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { cn } from "@/app/lib/utils"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Switch } from "@/components/ui/switch"
+import { Card } from "@/components/ui/card"
+
+// 模拟标签数据
+const tagOptions = [
+  { value: "new_user", label: "新用户" },
+  { value: "low_activity", label: "低活跃度" },
+  { value: "high_spending", label: "高消费" },
+  { value: "high_activity", label: "高活跃度" },
+  { value: "potential", label: "潜在客户" },
+  { value: "purchase_intent", label: "有购买意向" },
+  { value: "holiday_consumer", label: "节日消费" },
+  { value: "promotion_sensitive", label: "促销敏感" },
+  { value: "tech_savvy", label: "科技爱好者" },
+  { value: "luxury_buyer", label: "奢侈品买家" },
+  { value: "price_sensitive", label: "价格敏感" },
+  { value: "brand_loyal", label: "品牌忠诚" },
+]
+
+// 模拟区域数据
+const regionOptions = [
+  { value: "nationwide", label: "全国" },
+  { value: "beijing", label: "北京" },
+  { value: "shanghai", label: "上海" },
+  { value: "guangzhou", label: "广州" },
+  { value: "shenzhen", label: "深圳" },
+  { value: "hangzhou", label: "杭州" },
+  { value: "chengdu", label: "成都" },
+  { value: "wuhan", label: "武汉" },
+  { value: "east_china", label: "华东地区" },
+  { value: "south_china", label: "华南地区" },
+  { value: "north_china", label: "华北地区" },
+  { value: "central_china", label: "华中地区" },
+  { value: "tier_1", label: "一线城市" },
+  { value: "tier_2", label: "二线城市" },
+  { value: "tier_3", label: "三线城市" },
+]
+
+// 模拟设备数据
+const deviceOptions = [
+  { id: "1", name: "设备 A-001", status: "online" },
+  { id: "2", name: "设备 B-002", status: "online" },
+  { id: "3", name: "设备 C-003", status: "offline" },
+  { id: "4", name: "设备 D-004", status: "online" },
+  { id: "5", name: "设备 E-005", status: "online" },
+]
+
+type RuleType = "trafficPackage" | "distributionRule"
+
+export default function NewDistributionPage() {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [ruleType, setRuleType] = useState<RuleType>("trafficPackage")
+  const [name, setName] = useState("")
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [selectedRegions, setSelectedRegions] = useState<string[]>([])
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+  const [selectAllDevices, setSelectAllDevices] = useState(false)
+  const [deviceAddQuantity, setDeviceAddQuantity] = useState("10")
+  const [price, setPrice] = useState("")
+  const [tagsOpen, setTagsOpen] = useState(false)
+  const [regionsOpen, setRegionsOpen] = useState(false)
+  const [devicesOpen, setDevicesOpen] = useState(false)
+  const [autoAdd, setAutoAdd] = useState(false)
+
+  // 当选择"全部设备"时，自动选中所有设备
+  const handleSelectAllDevices = (value: boolean) => {
+    setSelectAllDevices(value)
+    if (value) {
+      setSelectedDevices(deviceOptions.map((device) => device.id))
+    } else {
+      setSelectedDevices([])
+    }
+  }
+
+  const handleNext = () => {
+    if (name.trim()) {
+      setCurrentStep(2)
+    } else {
+      alert("请填写名称")
+    }
+  }
+
+  const handlePrevious = () => {
+    setCurrentStep(1)
+  }
+
+  const handleSubmit = () => {
+    // 在实际应用中，这里会发送API请求保存数据
+    console.log({
+      ruleType,
+      name,
+      tags: selectedTags,
+      regions: selectedRegions,
+      devices: selectAllDevices ? "all" : selectedDevices,
+      deviceAddQuantity: Number.parseInt(deviceAddQuantity),
+      price: Number.parseFloat(price),
+      autoAdd,
+    })
+
+    // 返回到列表页
+    router.push("/workspace/pricing")
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      {/* 顶部栏 */}
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+          <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/pricing")} className="mr-2">
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-lg font-medium">新建分发</h1>
+          <div className="w-10"></div> {/* 占位，保持标题居中 */}
+        </div>
+      </header>
+
+      {/* 进度条 */}
+      <div className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex items-center">
+            <div className="flex-1">
+              <div className="flex items-center">
+                <div
+                  className={`rounded-full h-8 w-8 flex items-center justify-center ${
+                    currentStep >= 1 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  1
+                </div>
+                <div className={`h-1 flex-1 mx-2 ${currentStep >= 2 ? "bg-blue-600" : "bg-gray-200"}`}></div>
+                <div
+                  className={`rounded-full h-8 w-8 flex items-center justify-center ${
+                    currentStep >= 2 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  2
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="flex mt-2">
+            <div className="flex-1 text-center text-sm font-medium">选择规则类型</div>
+            <div className="flex-1 text-center text-sm font-medium">设置规则</div>
+          </div>
+        </div>
+      </div>
+
+      {/* 主内容区 */}
+      <main className="flex-1 max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        {currentStep === 1 ? (
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <h2 className="text-lg font-medium">选择规则类型</h2>
+
+              <RadioGroup
+                value={ruleType}
+                onValueChange={(value) => setRuleType(value as RuleType)}
+                className="grid grid-cols-1 md:grid-cols-2 gap-4"
+              >
+                <Card
+                  className={`p-4 cursor-pointer border-2 ${ruleType === "trafficPackage" ? "border-blue-500" : "border-transparent"}`}
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="trafficPackage" id="trafficPackage" />
+                    <Label htmlFor="trafficPackage" className="cursor-pointer flex-1">
+                      创建流量包
+                    </Label>
+                  </div>
+                  <p className="mt-2 text-sm text-gray-500 pl-6">按照用户标签和地区创建流量包</p>
+                </Card>
+                <Card
+                  className={`p-4 cursor-pointer border-2 ${ruleType === "distributionRule" ? "border-blue-500" : "border-transparent"}`}
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="distributionRule" id="distributionRule" />
+                    <Label htmlFor="distributionRule" className="cursor-pointer flex-1">
+                      创建分发规则
+                    </Label>
+                  </div>
+                  <p className="mt-2 text-sm text-gray-500 pl-6">创建流量自动分发规则</p>
+                </Card>
+              </RadioGroup>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="name">{ruleType === "trafficPackage" ? "流量包名称" : "分发规则名称"}</Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder={ruleType === "trafficPackage" ? "请输入流量包名称" : "请输入分发规则名称"}
+                required
+              />
+            </div>
+
+            <div className="flex justify-end pt-4">
+              <Button type="button" onClick={handleNext}>
+                下一步
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-lg font-medium mb-4">设置规则</h2>
+
+              {/* 用户标签选择 */}
+              <div className="space-y-2 mb-6">
+                <Label>用户标签</Label>
+                <Popover open={tagsOpen} onOpenChange={setTagsOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={tagsOpen}
+                      className="w-full justify-between h-auto min-h-10"
+                    >
+                      {selectedTags.length > 0 ? (
+                        <div className="flex flex-wrap gap-1 py-1">
+                          {selectedTags.map((tag) => (
+                            <Badge key={tag} variant="secondary" className="mr-1">
+                              {tagOptions.find((t) => t.value === tag)?.label}
+                              <button
+                                className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                                onMouseDown={(e) => {
+                                  e.preventDefault()
+                                  e.stopPropagation()
+                                  setSelectedTags(selectedTags.filter((t) => t !== tag))
+                                }}
+                              >
+                                ✕
+                              </button>
+                            </Badge>
+                          ))}
+                        </div>
+                      ) : (
+                        <span className="text-muted-foreground">选择用户标签</span>
+                      )}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-full p-0">
+                    <Command>
+                      <CommandInput placeholder="搜索标签..." />
+                      <CommandList>
+                        <CommandEmpty>未找到相关标签</CommandEmpty>
+                        <CommandGroup>
+                          <ScrollArea className="h-60">
+                            {tagOptions.map((tag) => (
+                              <CommandItem
+                                key={tag.value}
+                                value={tag.value}
+                                onSelect={() => {
+                                  setSelectedTags(
+                                    selectedTags.includes(tag.value)
+                                      ? selectedTags.filter((t) => t !== tag.value)
+                                      : [...selectedTags, tag.value],
+                                  )
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    selectedTags.includes(tag.value) ? "opacity-100" : "opacity-0",
+                                  )}
+                                />
+                                {tag.label}
+                              </CommandItem>
+                            ))}
+                          </ScrollArea>
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              {/* 用户区域选择 */}
+              <div className="space-y-2 mb-6">
+                <Label>用户区域</Label>
+                <Popover open={regionsOpen} onOpenChange={setRegionsOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      aria-expanded={regionsOpen}
+                      className="w-full justify-between h-auto min-h-10"
+                    >
+                      {selectedRegions.length > 0 ? (
+                        <div className="flex flex-wrap gap-1 py-1">
+                          {selectedRegions.map((region) => (
+                            <Badge key={region} variant="outline" className="mr-1 bg-amber-50">
+                              {regionOptions.find((r) => r.value === region)?.label}
+                              <button
+                                className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                                onMouseDown={(e) => {
+                                  e.preventDefault()
+                                  e.stopPropagation()
+                                  setSelectedRegions(selectedRegions.filter((r) => r !== region))
+                                }}
+                              >
+                                ✕
+                              </button>
+                            </Badge>
+                          ))}
+                        </div>
+                      ) : (
+                        <span className="text-muted-foreground">选择用户区域</span>
+                      )}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-full p-0">
+                    <Command>
+                      <CommandInput placeholder="搜索区域..." />
+                      <CommandList>
+                        <CommandEmpty>未找到相关区域</CommandEmpty>
+                        <CommandGroup>
+                          <ScrollArea className="h-60">
+                            {regionOptions.map((region) => (
+                              <CommandItem
+                                key={region.value}
+                                value={region.value}
+                                onSelect={() => {
+                                  setSelectedRegions(
+                                    selectedRegions.includes(region.value)
+                                      ? selectedRegions.filter((r) => r !== region.value)
+                                      : [...selectedRegions, region.value],
+                                  )
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    selectedRegions.includes(region.value) ? "opacity-100" : "opacity-0",
+                                  )}
+                                />
+                                {region.label}
+                              </CommandItem>
+                            ))}
+                          </ScrollArea>
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              {/* 设备设置 */}
+              <div className="space-y-4 mb-6">
+                <h3 className="font-medium">设备范围设置</h3>
+
+                <div className="flex items-center space-x-2">
+                  <Switch id="selectAll" checked={selectAllDevices} onCheckedChange={handleSelectAllDevices} />
+                  <Label htmlFor="selectAll">选择所有设备</Label>
+                </div>
+
+                {!selectAllDevices && (
+                  <div className="space-y-2">
+                    <Label>选择指定设备</Label>
+                    <Popover open={devicesOpen} onOpenChange={setDevicesOpen}>
+                      <PopoverTrigger asChild>
+                        <Button
+                          variant="outline"
+                          role="combobox"
+                          aria-expanded={devicesOpen}
+                          className="w-full justify-between h-auto min-h-10"
+                        >
+                          {selectedDevices.length > 0 ? (
+                            <div className="flex flex-wrap gap-1 py-1">
+                              {selectedDevices.map((deviceId) => (
+                                <Badge key={deviceId} variant="outline" className="mr-1">
+                                  {deviceOptions.find((d) => d.id === deviceId)?.name}
+                                  <button
+                                    className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                                    onMouseDown={(e) => {
+                                      e.preventDefault()
+                                      e.stopPropagation()
+                                      setSelectedDevices(selectedDevices.filter((d) => d !== deviceId))
+                                    }}
+                                  >
+                                    ✕
+                                  </button>
+                                </Badge>
+                              ))}
+                            </div>
+                          ) : (
+                            <span className="text-muted-foreground">选择设备</span>
+                          )}
+                          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-full p-0">
+                        <Command>
+                          <CommandInput placeholder="搜索设备..." />
+                          <CommandList>
+                            <CommandEmpty>未找到相关设备</CommandEmpty>
+                            <CommandGroup>
+                              <ScrollArea className="h-60">
+                                {deviceOptions.map((device) => (
+                                  <CommandItem
+                                    key={device.id}
+                                    value={device.id}
+                                    onSelect={() => {
+                                      setSelectedDevices(
+                                        selectedDevices.includes(device.id)
+                                          ? selectedDevices.filter((d) => d !== device.id)
+                                          : [...selectedDevices, device.id],
+                                      )
+                                    }}
+                                  >
+                                    <Check
+                                      className={cn(
+                                        "mr-2 h-4 w-4",
+                                        selectedDevices.includes(device.id) ? "opacity-100" : "opacity-0",
+                                      )}
+                                    />
+                                    {device.name}
+                                    <span
+                                      className={`ml-2 px-1.5 py-0.5 rounded text-xs ${
+                                        device.status === "online"
+                                          ? "bg-green-100 text-green-800"
+                                          : "bg-gray-100 text-gray-800"
+                                      }`}
+                                    >
+                                      {device.status === "online" ? "在线" : "离线"}
+                                    </span>
+                                  </CommandItem>
+                                ))}
+                              </ScrollArea>
+                            </CommandGroup>
+                          </CommandList>
+                        </Command>
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+                )}
+              </div>
+
+              {/* 单设备添加数量 */}
+              <div className="space-y-2 mb-6">
+                <Label htmlFor="deviceAddQuantity">单设备添加数量</Label>
+                <Input
+                  id="deviceAddQuantity"
+                  type="number"
+                  min="1"
+                  value={deviceAddQuantity}
+                  onChange={(e) => setDeviceAddQuantity(e.target.value)}
+                  required
+                />
+              </div>
+
+              {/* 价格设置 */}
+              <div className="space-y-2 mb-6">
+                <Label htmlFor="price">价格（元/人次）</Label>
+                <div className="relative">
+                  <span className="absolute left-3 top-1/2 transform -translate-y-1/2">¥</span>
+                  <Input
+                    id="price"
+                    type="number"
+                    step="0.01"
+                    min="0"
+                    value={price}
+                    onChange={(e) => setPrice(e.target.value)}
+                    placeholder="0.00"
+                    className="pl-8"
+                    required
+                  />
+                </div>
+              </div>
+
+              {/* 自动添加设置 */}
+              <div className="flex items-center space-x-2 mb-6">
+                <Switch id="autoAdd" checked={autoAdd} onCheckedChange={setAutoAdd} />
+                <Label htmlFor="autoAdd">自动添加</Label>
+              </div>
+            </div>
+
+            {/* 按钮组 */}
+            <div className="flex justify-between pt-4">
+              <Button type="button" variant="outline" onClick={handlePrevious}>
+                上一步
+              </Button>
+              <Button type="button" onClick={handleSubmit}>
+                确认
+              </Button>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}
diff --git a/app/workspace/pricing/page.tsx b/app/workspace/pricing/page.tsx
new file mode 100644
index 0000000..91b083e
--- /dev/null
+++ b/app/workspace/pricing/page.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { ChevronLeft, Edit, Trash2, Plus } from "lucide-react"
+import { useRouter } from "next/navigation"
+
+// 模拟定价数据
+const mockPricingData = [
+  {
+    id: "1",
+    name: "普通流量包",
+    price: 0.5,
+    tags: ["新用户", "低活跃度"],
+    region: "全国",
+  },
+  {
+    id: "2",
+    name: "高质量流量",
+    price: 2.5,
+    tags: ["高消费", "高活跃度"],
+    region: "一线城市",
+  },
+  {
+    id: "3",
+    name: "精准营销流量",
+    price: 3.8,
+    tags: ["潜在客户", "有购买意向"],
+    region: "华东地区",
+  },
+  {
+    id: "4",
+    name: "节日促销流量",
+    price: 1.5,
+    tags: ["节日消费", "促销敏感"],
+    region: "全国",
+  },
+]
+
+export default function PricingPage() {
+  const router = useRouter()
+  const [pricingItems, setPricingItems] = useState(mockPricingData)
+
+  const handleDelete = (id: string) => {
+    setPricingItems(pricingItems.filter((item) => item.id !== id))
+  }
+
+  return (
+    <div className="flex flex-col min-h-screen bg-gray-50">
+      {/* 顶部栏 */}
+      <header className="bg-white border-b border-gray-200 sticky top-0 z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+          <Button variant="ghost" size="icon" onClick={() => router.push("/workspace")} className="mr-2">
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+
+          <h1 className="text-lg font-medium">流量分发</h1>
+
+          <Button className="flex items-center gap-1" onClick={() => router.push("/workspace/pricing/new")}>
+            <Plus className="h-4 w-4" />
+            <span>新建分发</span>
+          </Button>
+        </div>
+      </header>
+
+      {/* 主内容区 */}
+      <main className="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+        <div className="grid grid-cols-1 gap-4">
+          {pricingItems.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-gray-500">暂无分发规则，请点击右上角新建分发</p>
+            </div>
+          ) : (
+            pricingItems.map((item) => (
+              <Card key={item.id} className="p-4 hover:shadow-md transition-shadow">
+                <div className="flex justify-between items-start">
+                  <div className="space-y-2">
+                    <h3 className="font-medium text-lg">{item.name}</h3>
+                    <div className="flex items-baseline gap-1">
+                      <span className="text-2xl font-bold text-emerald-600">¥{item.price.toFixed(2)}</span>
+                      <span className="text-gray-500 text-sm">/ 人次</span>
+                    </div>
+                    <div className="flex flex-wrap gap-2 items-center mt-2">
+                      {item.tags.map((tag, index) => (
+                        <Badge key={index} variant="outline" className="bg-blue-50">
+                          {tag}
+                        </Badge>
+                      ))}
+                      <Badge variant="outline" className="bg-amber-50">
+                        {item.region}
+                      </Badge>
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => router.push(`/workspace/pricing/edit/${item.id}`)}
+                    >
+                      <Edit className="h-4 w-4 text-gray-500" />
+                    </Button>
+                    <Button variant="ghost" size="icon" onClick={() => handleDelete(item.id)}>
+                      <Trash2 className="h-4 w-4 text-gray-500" />
+                    </Button>
+                  </div>
+                </div>
+              </Card>
+            ))
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}
diff --git a/components.json b/components.json
new file mode 100644
index 0000000..d9ef0ae
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/components/AIAssistant.tsx b/components/AIAssistant.tsx
new file mode 100644
index 0000000..f5931b7
--- /dev/null
+++ b/components/AIAssistant.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { usePathname } from "next/navigation"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Video, Play } from "lucide-react"
+import { getPageTutorials } from "@/lib/tutorials"
+import type { TutorialVideo } from "@/types/tutorial"
+
+export function AIAssistant() {
+  const pathname = usePathname()
+  const [isOpen, setIsOpen] = useState(false)
+  const [tutorials, setTutorials] = useState<TutorialVideo[]>([])
+  const [selectedVideo, setSelectedVideo] = useState<TutorialVideo | null>(null)
+
+  useEffect(() => {
+    // 获取当前页面的教程视频
+    const pageTutorials = getPageTutorials(pathname)
+    setTutorials(pageTutorials)
+    setSelectedVideo(pageTutorials[0] || null)
+  }, [pathname])
+
+  const handleOpenDialog = () => {
+    setIsOpen(true)
+  }
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <Button
+          size="icon"
+          className="fixed bottom-20 right-4 h-12 w-12 rounded-full shadow-lg bg-white hover:bg-gray-50 border z-50"
+          onClick={handleOpenDialog}
+        >
+          <Video className="h-5 w-5 text-gray-600" />
+        </Button>
+        <DialogContent className="sm:max-w-[640px] p-0">
+          <ScrollArea className="h-[480px]">
+            <div className="space-y-4">
+              {selectedVideo ? (
+                <div>
+                  <div className="aspect-video bg-gray-900 relative">
+                    <img
+                      src={selectedVideo.thumbnailUrl || "/placeholder.svg"}
+                      alt={selectedVideo.title}
+                      className="absolute inset-0 w-full h-full object-cover"
+                    />
+                    <div className="absolute inset-0 flex items-center justify-center">
+                      <Button
+                        size="icon"
+                        variant="ghost"
+                        className="w-16 h-16 rounded-full bg-white/10 hover:bg-white/20"
+                      >
+                        <Play className="h-8 w-8 text-white" />
+                      </Button>
+                    </div>
+                  </div>
+                  <div className="p-4">
+                    <h3 className="text-lg font-semibold">{selectedVideo.title}</h3>
+                    <p className="text-sm text-gray-500 mt-1">{selectedVideo.description}</p>
+                  </div>
+                </div>
+              ) : (
+                <div className="text-center py-8 text-gray-500">暂无该页面的教程视频</div>
+              )}
+
+              {tutorials.length > 1 && (
+                <div className="p-4 border-t">
+                  <h4 className="font-medium mb-4">更多教程视频</h4>
+                  <div className="grid grid-cols-2 gap-4">
+                    {tutorials
+                      .filter((video) => video.id !== selectedVideo?.id)
+                      .map((video) => (
+                        <div
+                          key={video.id}
+                          className="cursor-pointer hover:opacity-80"
+                          onClick={() => setSelectedVideo(video)}
+                        >
+                          <div className="aspect-video bg-gray-100 rounded-lg relative overflow-hidden">
+                            <img
+                              src={video.thumbnailUrl || "/placeholder.svg"}
+                              alt={video.title}
+                              className="absolute inset-0 w-full h-full object-cover"
+                            />
+                            <div className="absolute inset-0 flex items-center justify-center">
+                              <Play className="h-6 w-6 text-white" />
+                            </div>
+                          </div>
+                          <h5 className="text-sm font-medium mt-2">{video.title}</h5>
+                        </div>
+                      ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </ScrollArea>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/components/BindDouyinQRCode.tsx b/components/BindDouyinQRCode.tsx
new file mode 100644
index 0000000..6cdcadb
--- /dev/null
+++ b/components/BindDouyinQRCode.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { QrCode } from "lucide-react"
+
+export function BindDouyinQRCode() {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <>
+      <Button variant="ghost" size="icon" onClick={() => setIsOpen(true)}>
+        <QrCode className="h-4 w-4" />
+      </Button>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>绑定抖音号</DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-col items-center p-4">
+            <div className="w-64 h-64 bg-gray-100 rounded-lg flex items-center justify-center">
+              <img src="/placeholder.svg?height=256&width=256" alt="抖音二维码" className="w-full h-full" />
+            </div>
+            <p className="mt-4 text-sm text-gray-600">请使用抖音APP扫描二维码进行绑定</p>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/components/Charts.tsx b/components/Charts.tsx
new file mode 100644
index 0000000..6536225
--- /dev/null
+++ b/components/Charts.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import { Line } from "@ant-design/plots"
+
+interface LineChartProps {
+  data: { date: string; value: number }[]
+  xField: string
+  yField: string
+}
+
+export function LineChart({ data, xField, yField }: LineChartProps) {
+  const config = {
+    data,
+    xField,
+    yField,
+    smooth: true,
+    color: "#1677ff",
+    point: {
+      size: 4,
+      shape: "circle",
+      style: {
+        fill: "#1677ff",
+        stroke: "#fff",
+        lineWidth: 2,
+      },
+    },
+    tooltip: {
+      showMarkers: false,
+    },
+    state: {
+      active: {
+        style: {
+          shadowBlur: 4,
+          stroke: "#000",
+          fill: "red",
+        },
+      },
+    },
+    interactions: [
+      {
+        type: "marker-active",
+      },
+    ],
+  }
+
+  return <Line {...config} />
+}
diff --git a/components/TrafficTeamSettings.tsx b/components/TrafficTeamSettings.tsx
new file mode 100644
index 0000000..f90e3b1
--- /dev/null
+++ b/components/TrafficTeamSettings.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import { useState } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Plus, Pencil, Trash2 } from "lucide-react"
+
+interface TrafficTeam {
+  id: string
+  name: string
+  commission: number
+}
+
+interface TrafficTeamSettingsProps {
+  formData: any
+  onChange: (data: any) => void
+}
+
+export function TrafficTeamSettings({ formData, onChange }: TrafficTeamSettingsProps) {
+  const [teams, setTeams] = useState<TrafficTeam[]>(formData.trafficTeams || [])
+  const [isAddTeamOpen, setIsAddTeamOpen] = useState(false)
+  const [editingTeam, setEditingTeam] = useState<TrafficTeam | null>(null)
+  const [newTeam, setNewTeam] = useState<Partial<TrafficTeam>>({
+    name: "",
+    commission: 0,
+  })
+
+  const handleAddTeam = () => {
+    if (!newTeam.name) return
+
+    if (editingTeam) {
+      setTeams(teams.map((team) => (team.id === editingTeam.id ? { ...team, ...newTeam } : team)))
+    } else {
+      setTeams([
+        ...teams,
+        {
+          id: Date.now().toString(),
+          name: newTeam.name,
+          commission: newTeam.commission || 0,
+        } as TrafficTeam,
+      ])
+    }
+
+    setIsAddTeamOpen(false)
+    setNewTeam({ name: "", commission: 0 })
+    setEditingTeam(null)
+    onChange({ ...formData, trafficTeams: teams })
+  }
+
+  const handleEditTeam = (team: TrafficTeam) => {
+    setEditingTeam(team)
+    setNewTeam(team)
+    setIsAddTeamOpen(true)
+  }
+
+  const handleDeleteTeam = (teamId: string) => {
+    setTeams(teams.filter((team) => team.id !== teamId))
+    onChange({ ...formData, trafficTeams: teams.filter((team) => team.id !== teamId) })
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-6">
+        <div className="flex justify-between items-center">
+          <h2 className="text-lg font-semibold">打粉团队设置</h2>
+          <Button onClick={() => setIsAddTeamOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            添加团队
+          </Button>
+        </div>
+
+        <div className="border rounded-lg">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>团队名称</TableHead>
+                <TableHead>佣金比例</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {teams.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={3} className="text-center py-8 text-gray-500">
+                    暂无数据
+                  </TableCell>
+                </TableRow>
+              ) : (
+                teams.map((team) => (
+                  <TableRow key={team.id}>
+                    <TableCell>{team.name}</TableCell>
+                    <TableCell>{team.commission}%</TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end space-x-2">
+                        <Button variant="ghost" size="sm" onClick={() => handleEditTeam(team)}>
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="sm" onClick={() => handleDeleteTeam(team.id)}>
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      <Dialog open={isAddTeamOpen} onOpenChange={setIsAddTeamOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{editingTeam ? "编辑团队" : "添加团队"}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label>团队名称</Label>
+              <Input
+                value={newTeam.name}
+                onChange={(e) => setNewTeam({ ...newTeam, name: e.target.value })}
+                placeholder="请输入团队名称"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label>佣金比例 (%)</Label>
+              <Input
+                type="number"
+                value={newTeam.commission}
+                onChange={(e) => setNewTeam({ ...newTeam, commission: Number(e.target.value) })}
+                placeholder="请输入佣金比例"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsAddTeamOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={handleAddTeam}>{editingTeam ? "保存" : "添加"}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  )
+}
diff --git a/components/VideoTutorialButton.tsx b/components/VideoTutorialButton.tsx
new file mode 100644
index 0000000..44f51bd
--- /dev/null
+++ b/components/VideoTutorialButton.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Play, Video } from "lucide-react"
+import { usePathname } from "next/navigation"
+import { getPageTutorials } from "@/lib/tutorials"
+
+export function VideoTutorialButton() {
+  const [isOpen, setIsOpen] = useState(false)
+  const pathname = usePathname()
+  const tutorials = getPageTutorials(pathname)
+
+  const handleOpenDialog = () => {
+    setIsOpen(true)
+  }
+
+  return (
+    <>
+      <Button
+        size="icon"
+        className="fixed bottom-20 right-4 h-12 w-12 rounded-full shadow-lg bg-white hover:bg-gray-50 border z-50"
+        onClick={handleOpenDialog}
+      >
+        <Video className="h-5 w-5 text-gray-600" />
+      </Button>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogContent className="sm:max-w-[640px] p-0">
+          <DialogHeader>
+            <DialogTitle className="p-4 border-b">视频教程</DialogTitle>
+          </DialogHeader>
+          <div className="p-4">
+            {tutorials.length > 0 ? (
+              <div className="space-y-4">
+                {tutorials.map((tutorial) => (
+                  <div key={tutorial.id} className="flex items-center space-x-4">
+                    <div className="w-24 h-16 bg-gray-200 rounded-lg relative overflow-hidden">
+                      <img
+                        src={tutorial.thumbnailUrl || "/placeholder.svg"}
+                        alt={tutorial.title}
+                        className="absolute inset-0 w-full h-full object-cover"
+                      />
+                      <div className="absolute inset-0 flex items-center justify-center">
+                        <Play className="w-8 h-8 text-white" />
+                      </div>
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-medium">{tutorial.title}</h3>
+                      <p className="text-sm text-gray-500">{tutorial.description}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-gray-500">暂无该页面的教程视频</div>
+            )}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/components/WechatFriendSelector.tsx b/components/WechatFriendSelector.tsx
new file mode 100644
index 0000000..5639c9c
--- /dev/null
+++ b/components/WechatFriendSelector.tsx
@@ -0,0 +1,117 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Search } from "lucide-react"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+
+interface WechatFriend {
+  id: string
+  nickname: string
+  wechatId: string
+  avatar: string
+  gender: "male" | "female"
+  customer: string
+}
+
+interface WechatFriendSelectorProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  selectedFriends: WechatFriend[]
+  onSelect: (friends: WechatFriend[]) => void
+}
+
+export function WechatFriendSelector({ open, onOpenChange, selectedFriends, onSelect }: WechatFriendSelectorProps) {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [friends, setFriends] = useState<WechatFriend[]>([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      fetchFriends()
+    }
+  }, [open])
+
+  const fetchFriends = async () => {
+    setLoading(true)
+    // 模拟从API获取好友列表
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    const mockFriends = Array.from({ length: 20 }, (_, i) => ({
+      id: `friend-${i}`,
+      nickname: `好友${i + 1}`,
+      wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+      avatar: `/placeholder.svg?height=40&width=40&text=${i + 1}`,
+      gender: Math.random() > 0.5 ? "male" : "female",
+      customer: `客户${i + 1}`,
+    }))
+    setFriends(mockFriends)
+    setLoading(false)
+  }
+
+  const filteredFriends = friends.filter(
+    (friend) =>
+      friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>选择微信好友</DialogTitle>
+        </DialogHeader>
+        <div className="relative">
+          <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+          <Input
+            placeholder="搜索好友"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="mt-4 space-y-2 max-h-[400px] overflow-y-auto">
+          {loading ? (
+            <div className="text-center py-4">加载中...</div>
+          ) : filteredFriends.length === 0 ? (
+            <div className="text-center py-4">未找到匹配的好友</div>
+          ) : (
+            filteredFriends.map((friend) => (
+              <div key={friend.id} className="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg">
+                <Checkbox
+                  checked={selectedFriends.some((f) => f.id === friend.id)}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      onSelect([...selectedFriends, friend])
+                    } else {
+                      onSelect(selectedFriends.filter((f) => f.id !== friend.id))
+                    }
+                  }}
+                />
+                <Avatar>
+                  <AvatarImage src={friend.avatar} />
+                  <AvatarFallback>{friend.nickname[0]}</AvatarFallback>
+                </Avatar>
+                <div className="flex-1">
+                  <div className="font-medium">{friend.nickname}</div>
+                  <div className="text-sm text-gray-500">
+                    <div>{friend.wechatId}</div>
+                    <div>归属客户：{friend.customer}</div>
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+        <div className="flex justify-end space-x-2 mt-4">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button onClick={() => onOpenChange(false)}>确定</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/components/WechatGroupSelector.tsx b/components/WechatGroupSelector.tsx
new file mode 100644
index 0000000..82f7e86
--- /dev/null
+++ b/components/WechatGroupSelector.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Search } from "lucide-react"
+import { Checkbox } from "@/components/ui/checkbox"
+
+interface WechatGroup {
+  id: string
+  name: string
+  memberCount: number
+  avatar: string
+  owner: string
+  customer: string
+}
+
+interface WechatGroupSelectorProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  selectedGroups: WechatGroup[]
+  onSelect: (groups: WechatGroup[]) => void
+}
+
+export function WechatGroupSelector({ open, onOpenChange, selectedGroups, onSelect }: WechatGroupSelectorProps) {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [groups, setGroups] = useState<WechatGroup[]>([])
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      fetchGroups()
+    }
+  }, [open])
+
+  const fetchGroups = async () => {
+    setLoading(true)
+    // 模拟从API获取群聊列表
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    const mockGroups = Array.from({ length: 10 }, (_, i) => ({
+      id: `group-${i}`,
+      name: `群聊${i + 1}`,
+      memberCount: Math.floor(Math.random() * 400) + 100,
+      avatar: `/placeholder.svg?height=40&width=40&text=群${i + 1}`,
+      owner: `群主${i + 1}`,
+      customer: `客户${i + 1}`,
+    }))
+    setGroups(mockGroups)
+    setLoading(false)
+  }
+
+  const filteredGroups = groups.filter((group) => group.name.toLowerCase().includes(searchQuery.toLowerCase()))
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>选择聊天群</DialogTitle>
+        </DialogHeader>
+        <div className="relative">
+          <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+          <Input
+            placeholder="搜索群聊"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-9"
+          />
+        </div>
+        <div className="mt-4 space-y-2 max-h-[400px] overflow-y-auto">
+          {loading ? (
+            <div className="text-center py-4">加载中...</div>
+          ) : filteredGroups.length === 0 ? (
+            <div className="text-center py-4">未找到匹配的群聊</div>
+          ) : (
+            filteredGroups.map((group) => (
+              <div key={group.id} className="flex items-center space-x-3 p-2 hover:bg-gray-100 rounded-lg">
+                <Checkbox
+                  checked={selectedGroups.some((g) => g.id === group.id)}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      onSelect([...selectedGroups, group])
+                    } else {
+                      onSelect(selectedGroups.filter((g) => g.id !== group.id))
+                    }
+                  }}
+                />
+                <img src={group.avatar || "/placeholder.svg"} alt={group.name} className="w-10 h-10 rounded-lg" />
+                <div className="flex-1">
+                  <div className="font-medium">{group.name}</div>
+                  <div className="text-sm text-gray-500">
+                    <div>群主：{group.owner}</div>
+                    <div>归属客户：{group.customer}</div>
+                    <div>{group.memberCount}人</div>
+                  </div>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+        <div className="flex justify-end space-x-2 mt-4">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button onClick={() => onOpenChange(false)}>确定</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/components/acquisition/PlanSettingsDialog.tsx b/components/acquisition/PlanSettingsDialog.tsx
new file mode 100644
index 0000000..bf009be
--- /dev/null
+++ b/components/acquisition/PlanSettingsDialog.tsx
@@ -0,0 +1,152 @@
+"use client"
+
+import { useState } from "react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { toast } from "@/components/ui/use-toast"
+import { Copy, QrCode } from "lucide-react"
+
+interface PlanSettingsDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  planId: string
+}
+
+export function PlanSettingsDialog({ open, onOpenChange, planId }: PlanSettingsDialogProps) {
+  const [rewardType, setRewardType] = useState<"disabled" | "onSubmit" | "onApprove">("onSubmit")
+  const [rewardAmount, setRewardAmount] = useState("5.00")
+  const [selectedWorker, setSelectedWorker] = useState("")
+
+  // 生成订单填写链接
+  const orderFormUrl =
+    typeof window !== "undefined" ? `${window.location.origin}/orders/submit/${planId}` : `/orders/submit/${planId}`
+
+  const handleCopyLink = (url: string) => {
+    if (typeof navigator !== "undefined") {
+      navigator.clipboard.writeText(url)
+      toast({
+        title: "链接已复制",
+        description: "已将链接复制到剪贴板",
+      })
+    }
+  }
+
+  const handleSave = () => {
+    // 这里添加保存设置的逻辑
+    toast({
+      title: "设置已保存",
+      description: "获客计划设置已更新",
+    })
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>获客计划设置</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          <div className="space-y-4">
+            <Label>何时收益</Label>
+            <RadioGroup value={rewardType} onValueChange={(value: any) => setRewardType(value)}>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="disabled" id="disabled" />
+                <Label htmlFor="disabled">禁用</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="onSubmit" id="onSubmit" />
+                <Label htmlFor="onSubmit">表单录入时</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="onApprove" id="onApprove" />
+                <Label htmlFor="onApprove">好友通过时</Label>
+              </div>
+            </RadioGroup>
+          </div>
+
+          <div className="space-y-2">
+            <Label>每条收益</Label>
+            <div className="flex items-center space-x-2">
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setRewardAmount((prev) => (Number(prev) - 1).toFixed(2))}
+              >
+                -
+              </Button>
+              <Input
+                type="number"
+                value={rewardAmount}
+                onChange={(e) => setRewardAmount(e.target.value)}
+                className="w-24 text-center"
+                step="0.01"
+              />
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={() => setRewardAmount((prev) => (Number(prev) + 1).toFixed(2))}
+              >
+                +
+              </Button>
+              <span className="text-gray-500">元</span>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label>兼职者</Label>
+            <div className="flex space-x-2">
+              <Select value={selectedWorker} onValueChange={setSelectedWorker}>
+                <SelectTrigger className="flex-1">
+                  <SelectValue placeholder="请选择" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="worker1">小清</SelectItem>
+                  <SelectItem value="worker2">梁玉娟</SelectItem>
+                  <SelectItem value="worker3">谢金板</SelectItem>
+                  <SelectItem value="worker4">李翔瑶</SelectItem>
+                  <SelectItem value="worker5">陈泊峰</SelectItem>
+                </SelectContent>
+              </Select>
+              <Button variant="outline">添加</Button>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label>Web入口</Label>
+            <div className="flex items-center space-x-2">
+              <Input value={orderFormUrl} readOnly />
+              <Button variant="outline" size="icon" onClick={() => handleCopyLink(orderFormUrl)}>
+                <Copy className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label>小程序入口</Label>
+            <div className="flex flex-col items-center p-4 border rounded-md">
+              <QrCode className="w-32 h-32 text-gray-400 mb-2" />
+              <p className="text-sm text-gray-500 text-center">扫描二维码或复制链接访问订单填写页面</p>
+              <Button variant="outline" size="sm" className="mt-2" onClick={() => handleCopyLink(orderFormUrl)}>
+                <Copy className="h-4 w-4 mr-2" />
+                复制链接
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button onClick={handleSave}>保存</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/components/charts.tsx b/components/charts.tsx
new file mode 100644
index 0000000..304c624
--- /dev/null
+++ b/components/charts.tsx
@@ -0,0 +1,121 @@
+"use client"
+
+import type React from "react"
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  BarChart as RechartsBarChart,
+  Bar,
+  PieChart as RechartsPieChart,
+  Pie,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Cell,
+} from "recharts"
+
+interface ChartProps {
+  data: any
+  height?: number
+}
+
+export const LineChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <RechartsLineChart
+        data={data.labels.map((label: string, index: number) => {
+          const dataPoint: any = { name: label }
+          data.datasets.forEach((dataset: any, datasetIndex: number) => {
+            dataPoint[dataset.label] = dataset.data[index]
+          })
+          return dataPoint
+        })}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        {data.datasets.map((dataset: any, index: number) => (
+          <Line
+            key={index}
+            type="monotone"
+            dataKey={dataset.label}
+            stroke={dataset.borderColor}
+            fill={dataset.backgroundColor}
+            activeDot={{ r: 8 }}
+          />
+        ))}
+      </RechartsLineChart>
+    </ResponsiveContainer>
+  )
+}
+
+export const BarChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <RechartsBarChart
+        data={data.labels.map((label: string, index: number) => {
+          const dataPoint: any = { name: label }
+          data.datasets.forEach((dataset: any, datasetIndex: number) => {
+            dataPoint[dataset.label] = dataset.data[index]
+          })
+          return dataPoint
+        })}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        {data.datasets.map((dataset: any, index: number) => (
+          <Bar
+            key={index}
+            dataKey={dataset.label}
+            fill={dataset.backgroundColor || `rgba(59, 130, 246, ${0.8 - index * 0.2})`}
+          />
+        ))}
+      </RechartsBarChart>
+    </ResponsiveContainer>
+  )
+}
+
+export const PieChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <RechartsPieChart>
+        <Tooltip />
+        <Legend />
+        {data.datasets.map((dataset: any, datasetIndex: number) => (
+          <Pie
+            key={datasetIndex}
+            data={data.labels.map((label: string, index: number) => ({
+              name: label,
+              value: dataset.data[index],
+            }))}
+            cx="50%"
+            cy="50%"
+            outerRadius={80}
+            fill="#8884d8"
+            dataKey="value"
+            label
+          >
+            {data.labels.map((entry: any, index: number) => (
+              <Cell
+                key={`cell-${index}`}
+                fill={
+                  dataset.backgroundColor instanceof Array
+                    ? dataset.backgroundColor[index]
+                    : `rgba(59, 130, 246, ${0.8 - index * 0.1})`
+                }
+              />
+            ))}
+          </Pie>
+        ))}
+      </RechartsPieChart>
+    </ResponsiveContainer>
+  )
+}
diff --git a/components/dashboard/dashboard-header.tsx b/components/dashboard/dashboard-header.tsx
new file mode 100644
index 0000000..31e4646
--- /dev/null
+++ b/components/dashboard/dashboard-header.tsx
@@ -0,0 +1,27 @@
+import { Button } from "@/components/ui/button"
+import { Calendar, Download, Filter } from "lucide-react"
+
+export function DashboardHeader() {
+  return (
+    <div className="flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">用户数字资产中台</h1>
+        <p className="text-muted-foreground">欢迎回来，查看最新的用户资产数据和分析报告</p>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Button variant="outline" size="sm">
+          <Calendar className="mr-2 h-4 w-4" />
+          今日
+        </Button>
+        <Button variant="outline" size="sm">
+          <Filter className="mr-2 h-4 w-4" />
+          筛选
+        </Button>
+        <Button variant="outline" size="sm">
+          <Download className="mr-2 h-4 w-4" />
+          导出
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/dashboard/dashboard-overview.tsx b/components/dashboard/dashboard-overview.tsx
new file mode 100644
index 0000000..187d9b3
--- /dev/null
+++ b/components/dashboard/dashboard-overview.tsx
@@ -0,0 +1,179 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { formatNumber, getGrowthClass } from "@/lib/utils"
+import { ArrowDown, ArrowUp } from "lucide-react"
+
+export function DashboardOverview() {
+  // 这里应该从API获取实际数据
+  const overviewData = {
+    userAcquisition: {
+      total: 12458,
+      growth: 12.5,
+      sources: [
+        { name: "微信", value: 4523, growth: 15.2 },
+        { name: "抖音", value: 3254, growth: 24.3 },
+        { name: "小红书", value: 2145, growth: 8.7 },
+        { name: "公众号", value: 1536, growth: -3.2 },
+        { name: "官网", value: 1000, growth: 5.6 },
+      ],
+    },
+    userRetention: {
+      rate: 68.5,
+      growth: 2.3,
+      periods: [
+        { name: "7天", value: 85.2, growth: 1.2 },
+        { name: "30天", value: 68.5, growth: 2.3 },
+        { name: "90天", value: 42.3, growth: 3.5 },
+        { name: "180天", value: 28.7, growth: -1.2 },
+        { name: "365天", value: 15.4, growth: -2.5 },
+      ],
+    },
+    userConversion: {
+      rate: 12.5,
+      growth: 3.2,
+      stages: [
+        { name: "浏览", value: 100, growth: 0 },
+        { name: "注册", value: 35.2, growth: 2.1 },
+        { name: "首次购买", value: 12.5, growth: 3.2 },
+        { name: "复购", value: 8.3, growth: 5.4 },
+        { name: "会员", value: 4.2, growth: 1.8 },
+      ],
+    },
+  }
+
+  return (
+    <Tabs defaultValue="acquisition" className="w-full">
+      <TabsList className="grid w-full grid-cols-3">
+        <TabsTrigger value="acquisition">用户获取</TabsTrigger>
+        <TabsTrigger value="retention">用户留存</TabsTrigger>
+        <TabsTrigger value="conversion">用户转化</TabsTrigger>
+      </TabsList>
+      <TabsContent value="acquisition">
+        <Card className="border shadow-sm">
+          <CardHeader>
+            <CardTitle>用户获取分析</CardTitle>
+            <CardDescription>各渠道用户获取情况及增长趋势</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium">总获取用户</p>
+                  <p className="text-2xl font-bold">{formatNumber(overviewData.userAcquisition.total)}</p>
+                </div>
+                <div className={`flex items-center ${getGrowthClass(overviewData.userAcquisition.growth)}`}>
+                  {overviewData.userAcquisition.growth > 0 ? (
+                    <ArrowUp className="h-4 w-4 mr-1" />
+                  ) : (
+                    <ArrowDown className="h-4 w-4 mr-1" />
+                  )}
+                  <span>{Math.abs(overviewData.userAcquisition.growth)}%</span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                {overviewData.userAcquisition.sources.map((source) => (
+                  <div key={source.name} className="flex items-center justify-between">
+                    <div className="flex items-center">
+                      <span className="text-sm">{source.name}</span>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <span className="text-sm">{formatNumber(source.value)}</span>
+                      <span className={`text-xs ${getGrowthClass(source.growth)}`}>
+                        {source.growth > 0 ? "+" : ""}
+                        {source.growth}%
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+      <TabsContent value="retention">
+        <Card className="border shadow-sm">
+          <CardHeader>
+            <CardTitle>用户留存分析</CardTitle>
+            <CardDescription>不同时间段的用户留存率及变化趋势</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium">30天留存率</p>
+                  <p className="text-2xl font-bold">{overviewData.userRetention.rate}%</p>
+                </div>
+                <div className={`flex items-center ${getGrowthClass(overviewData.userRetention.growth)}`}>
+                  {overviewData.userRetention.growth > 0 ? (
+                    <ArrowUp className="h-4 w-4 mr-1" />
+                  ) : (
+                    <ArrowDown className="h-4 w-4 mr-1" />
+                  )}
+                  <span>{Math.abs(overviewData.userRetention.growth)}%</span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                {overviewData.userRetention.periods.map((period) => (
+                  <div key={period.name} className="flex items-center justify-between">
+                    <div className="flex items-center">
+                      <span className="text-sm">{period.name}</span>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <span className="text-sm">{period.value}%</span>
+                      <span className={`text-xs ${getGrowthClass(period.growth)}`}>
+                        {period.growth > 0 ? "+" : ""}
+                        {period.growth}%
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+      <TabsContent value="conversion">
+        <Card className="border shadow-sm">
+          <CardHeader>
+            <CardTitle>用户转化分析</CardTitle>
+            <CardDescription>用户转化漏斗各阶段转化率及变化趋势</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium">首次购买转化率</p>
+                  <p className="text-2xl font-bold">{overviewData.userConversion.rate}%</p>
+                </div>
+                <div className={`flex items-center ${getGrowthClass(overviewData.userConversion.growth)}`}>
+                  {overviewData.userConversion.growth > 0 ? (
+                    <ArrowUp className="h-4 w-4 mr-1" />
+                  ) : (
+                    <ArrowDown className="h-4 w-4 mr-1" />
+                  )}
+                  <span>{Math.abs(overviewData.userConversion.growth)}%</span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                {overviewData.userConversion.stages.map((stage) => (
+                  <div key={stage.name} className="flex items-center justify-between">
+                    <div className="flex items-center">
+                      <span className="text-sm">{stage.name}</span>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <span className="text-sm">{stage.value}%</span>
+                      <span className={`text-xs ${getGrowthClass(stage.growth)}`}>
+                        {stage.growth > 0 ? "+" : ""}
+                        {stage.growth}%
+                      </span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  )
+}
diff --git a/components/dashboard/recent-activities.tsx b/components/dashboard/recent-activities.tsx
new file mode 100644
index 0000000..f528e56
--- /dev/null
+++ b/components/dashboard/recent-activities.tsx
@@ -0,0 +1,74 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { formatDate } from "@/lib/utils"
+import { Activity, User, ShoppingCart, MessageSquare } from "lucide-react"
+
+export function RecentActivities() {
+  // 这里应该从API获取实际数据
+  const activities = [
+    {
+      id: 1,
+      type: "user",
+      title: "新用户注册",
+      description: "张三通过微信小程序注册成为新用户",
+      time: new Date(2023, 6, 15, 14, 30),
+    },
+    {
+      id: 2,
+      type: "purchase",
+      title: "完成购买",
+      description: "李四购买了高级会员服务",
+      time: new Date(2023, 6, 15, 13, 45),
+    },
+    {
+      id: 3,
+      type: "message",
+      title: "客户咨询",
+      description: "王五咨询了产品使用问题",
+      time: new Date(2023, 6, 15, 11, 20),
+    },
+    {
+      id: 4,
+      type: "activity",
+      title: "活动参与",
+      description: "赵六参与了新品推广活动",
+      time: new Date(2023, 6, 15, 10, 15),
+    },
+  ]
+
+  const getIcon = (type: string) => {
+    switch (type) {
+      case "user":
+        return <User className="h-4 w-4" />
+      case "purchase":
+        return <ShoppingCart className="h-4 w-4" />
+      case "message":
+        return <MessageSquare className="h-4 w-4" />
+      case "activity":
+        return <Activity className="h-4 w-4" />
+      default:
+        return <Activity className="h-4 w-4" />
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base font-medium">最近活动</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-4">
+          {activities.map((activity) => (
+            <div key={activity.id} className="flex items-start space-x-3">
+              <div className="bg-primary/10 rounded-full p-2 text-primary">{getIcon(activity.type)}</div>
+              <div className="space-y-1">
+                <p className="text-sm font-medium">{activity.title}</p>
+                <p className="text-xs text-muted-foreground">{activity.description}</p>
+                <p className="text-xs text-muted-foreground">{formatDate(activity.time)}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/components/dashboard/traffic-source-analysis.tsx b/components/dashboard/traffic-source-analysis.tsx
new file mode 100644
index 0000000..67bb996
--- /dev/null
+++ b/components/dashboard/traffic-source-analysis.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"
+
+export function TrafficSourceAnalysis() {
+  // 这里应该从API获取实际数据
+  const data = [
+    { source: "微信", value: 4000 },
+    { source: "抖音", value: 3000 },
+    { source: "小红书", value: 2000 },
+    { source: "公众号", value: 2780 },
+    { source: "官网", value: 1890 },
+    { source: "其他", value: 2390 },
+  ]
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base font-medium">流量来源分析</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="h-[200px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart data={data}>
+              <XAxis dataKey="source" />
+              <YAxis />
+              <Tooltip />
+              <Bar dataKey="value" fill="hsl(var(--primary))" />
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/components/dashboard/user-assets-summary.tsx b/components/dashboard/user-assets-summary.tsx
new file mode 100644
index 0000000..8da7a1c
--- /dev/null
+++ b/components/dashboard/user-assets-summary.tsx
@@ -0,0 +1,40 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { formatNumber } from "@/lib/utils"
+
+export function UserAssetsSummary() {
+  // 这里应该从API获取实际数据
+  const stats = {
+    totalUsers: 125689,
+    activeUsers: 78452,
+    highValueUsers: 12458,
+    conversionRate: 12.5,
+  }
+
+  return (
+    <Card className="border shadow-sm">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base font-medium">用户资产概览</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-1">
+            <p className="text-xs text-muted-foreground">总用户数</p>
+            <p className="text-2xl font-bold">{formatNumber(stats.totalUsers)}</p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-xs text-muted-foreground">活跃用户</p>
+            <p className="text-2xl font-bold">{formatNumber(stats.activeUsers)}</p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-xs text-muted-foreground">高价值用户</p>
+            <p className="text-2xl font-bold">{formatNumber(stats.highValueUsers)}</p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-xs text-muted-foreground">转化率</p>
+            <p className="text-2xl font-bold">{stats.conversionRate}%</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/components/dashboard/user-behavior-analysis.tsx b/components/dashboard/user-behavior-analysis.tsx
new file mode 100644
index 0000000..0914d74
--- /dev/null
+++ b/components/dashboard/user-behavior-analysis.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { LineChart, BarChart } from "@/components/charts"
+
+interface UserBehaviorAnalysisProps {
+  timeRange: string
+}
+
+export function UserBehaviorAnalysis({ timeRange }: UserBehaviorAnalysisProps) {
+  // 这里应该根据timeRange从API获取实际数据
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-primary/10 rounded-lg p-4">
+          <div className="text-sm text-muted-foreground">平均活跃天数/月</div>
+          <div className="text-2xl font-bold">12.5</div>
+          <div className="text-xs text-green-600">较上月增长 1.2</div>
+        </div>
+        <div className="bg-primary/10 rounded-lg p-4">
+          <div className="text-sm text-muted-foreground">平均使用时长/日</div>
+          <div className="text-2xl font-bold">42分钟</div>
+          <div className="text-xs text-green-600">较上月增长 5分钟</div>
+        </div>
+        <div className="bg-primary/10 rounded-lg p-4">
+          <div className="text-sm text-muted-foreground">平均交互次数/日</div>
+          <div className="text-2xl font-bold">8.3</div>
+          <div className="text-xs text-green-600">较上月增长 0.5</div>
+        </div>
+      </div>
+
+      <Card>
+        <CardContent className="p-4">
+          <h3 className="text-sm font-medium mb-2">用户活跃度趋势</h3>
+          <LineChart
+            data={{
+              labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+              datasets: [
+                {
+                  label: "日活跃用户",
+                  data: [45000, 48000, 52000, 55000, 58000, 62000, 65000],
+                  borderColor: "rgb(59, 130, 246)",
+                  backgroundColor: "rgba(59, 130, 246, 0.1)",
+                },
+                {
+                  label: "周活跃用户",
+                  data: [75000, 78000, 82000, 85000, 88000, 92000, 95000],
+                  borderColor: "rgb(16, 185, 129)",
+                  backgroundColor: "rgba(16, 185, 129, 0.1)",
+                },
+                {
+                  label: "月活跃用户",
+                  data: [95000, 98000, 102000, 105000, 108000, 112000, 115000],
+                  borderColor: "rgb(249, 115, 22)",
+                  backgroundColor: "rgba(249, 115, 22, 0.1)",
+                },
+              ],
+            }}
+            height={250}
+          />
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-medium mb-2">活跃时段分布</h3>
+            <BarChart
+              data={{
+                labels: ["0-3点", "3-6点", "6-9点", "9-12点", "12-15点", "15-18点", "18-21点", "21-24点"],
+                datasets: [
+                  {
+                    label: "活跃用户数",
+                    data: [8000, 4000, 25000, 58000, 42000, 38000, 75000, 62000],
+                    backgroundColor: "rgba(59, 130, 246, 0.8)",
+                  },
+                ],
+              }}
+              height={250}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-medium mb-2">使用设备分布</h3>
+            <BarChart
+              data={{
+                labels: ["iOS", "Android", "Windows", "MacOS", "其他"],
+                datasets: [
+                  {
+                    label: "用户数量",
+                    data: [52000, 55000, 10000, 5000, 1000],
+                    backgroundColor: "rgba(59, 130, 246, 0.8)",
+                  },
+                ],
+              }}
+              height={250}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardContent className="p-4">
+          <h3 className="text-sm font-medium mb-2">用户行为轨迹分析</h3>
+          <LineChart
+            data={{
+              labels: ["浏览", "搜索", "加入购物车", "下单", "支付", "评价", "复购"],
+              datasets: [
+                {
+                  label: "高价值用户",
+                  data: [100, 95, 85, 80, 78, 65, 60],
+                  borderColor: "rgb(16, 185, 129)",
+                  backgroundColor: "rgba(16, 185, 129, 0.1)",
+                },
+                {
+                  label: "中价值用户",
+                  data: [100, 85, 65, 55, 50, 35, 25],
+                  borderColor: "rgb(59, 130, 246)",
+                  backgroundColor: "rgba(59, 130, 246, 0.1)",
+                },
+                {
+                  label: "低价值用户",
+                  data: [100, 70, 40, 25, 20, 10, 5],
+                  borderColor: "rgb(156, 163, 175)",
+                  backgroundColor: "rgba(156, 163, 175, 0.1)",
+                },
+              ],
+            }}
+            height={250}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/components/dashboard/user-growth-chart.tsx b/components/dashboard/user-growth-chart.tsx
new file mode 100644
index 0000000..2e99651
--- /dev/null
+++ b/components/dashboard/user-growth-chart.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts"
+
+export function UserGrowthChart() {
+  // 这里应该从API获取实际数据
+  const data = [
+    { date: "1月", users: 4000 },
+    { date: "2月", users: 5000 },
+    { date: "3月", users: 6000 },
+    { date: "4月", users: 7000 },
+    { date: "5月", users: 9000 },
+    { date: "6月", users: 12000 },
+    { date: "7月", users: 15000 },
+  ]
+
+  return (
+    <Card className="col-span-2">
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base font-medium">用户增长趋势</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="h-[200px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart data={data}>
+              <XAxis dataKey="date" />
+              <YAxis />
+              <Tooltip />
+              <Line type="monotone" dataKey="users" stroke="hsl(var(--primary))" strokeWidth={2} />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/components/dashboard/user-lifecycle-analysis.tsx b/components/dashboard/user-lifecycle-analysis.tsx
new file mode 100644
index 0000000..68fcf14
--- /dev/null
+++ b/components/dashboard/user-lifecycle-analysis.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { LineChart, BarChart } from "@/components/charts"
+
+interface UserLifecycleAnalysisProps {
+  timeRange: string
+}
+
+export function UserLifecycleAnalysis({ timeRange }: UserLifecycleAnalysisProps) {
+  // 这里应该根据timeRange从API获取实际数据
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-primary/10 rounded-lg p-4">
+          <div className="text-sm text-muted-foreground">新增用户数</div>
+          <div className="text-2xl font-bold">12,458</div>
+          <div className="text-xs text-green-600">较上月增长 8.2%</div>
+        </div>
+        <div className="bg-primary/10 rounded-lg p-4">
+          <div className="text-sm text-muted-foreground">用户留存率(30天)</div>
+          <div className="text-2xl font-bold">68.5%</div>
+          <div className="text-xs text-green-600">较上月提升 2.3%</div>
+        </div>
+        <div className="bg-primary/10 rounded-lg p-4">
+          <div className="text-sm text-muted-foreground">用户流失率</div>
+          <div className="text-2xl font-bold">5.2%</div>
+          <div className="text-xs text-green-600">较上月降低 0.8%</div>
+        </div>
+      </div>
+
+      <Card>
+        <CardContent className="p-4">
+          <h3 className="text-sm font-medium mb-2">用户生命周期分布</h3>
+          <BarChart
+            data={{
+              labels: ["获取阶段", "激活阶段", "留存阶段", "转化阶段", "忠诚阶段"],
+              datasets: [
+                {
+                  label: "用户数量",
+                  data: [25000, 18000, 12000, 8000, 5000],
+                  backgroundColor: "rgba(59, 130, 246, 0.8)",
+                },
+              ],
+            }}
+            height={250}
+          />
+        </CardContent>
+      </Card>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-medium mb-2">用户留存率趋势</h3>
+            <LineChart
+              data={{
+                labels: ["1天", "7天", "14天", "30天", "60天", "90天", "180天", "365天"],
+                datasets: [
+                  {
+                    label: "留存率",
+                    data: [95, 85, 75, 68, 55, 42, 28, 15],
+                    borderColor: "rgb(59, 130, 246)",
+                    backgroundColor: "rgba(59, 130, 246, 0.1)",
+                  },
+                ],
+              }}
+              height={250}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-medium mb-2">用户流失原因分析</h3>
+            <BarChart
+              data={{
+                labels: ["产品体验差", "需求不匹配", "竞品转移", "价格因素", "服务问题", "其他原因"],
+                datasets: [
+                  {
+                    label: "流失用户比例",
+                    data: [35, 25, 20, 10, 8, 2],
+                    backgroundColor: "rgba(59, 130, 246, 0.8)",
+                  },
+                ],
+              }}
+              height={250}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardContent className="p-4">
+          <h3 className="text-sm font-medium mb-2">用户价值变化趋势</h3>
+          <LineChart
+            data={{
+              labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+              datasets: [
+                {
+                  label: "高价值用户比例",
+                  data: [18, 19, 20, 22, 23, 24, 25],
+                  borderColor: "rgb(16, 185, 129)",
+                  backgroundColor: "rgba(16, 185, 129, 0.1)",
+                },
+                {
+                  label: "中价值用户比例",
+                  data: [42, 43, 44, 45, 45, 46, 45],
+                  borderColor: "rgb(59, 130, 246)",
+                  backgroundColor: "rgba(59, 130, 246, 0.1)",
+                },
+                {
+                  label: "低价值用户比例",
+                  data: [40, 38, 36, 33, 32, 30, 30],
+                  borderColor: "rgb(156, 163, 175)",
+                  backgroundColor: "rgba(156, 163, 175, 0.1)",
+                },
+              ],
+            }}
+            height={250}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/components/dashboard/user-portrait-overview.tsx b/components/dashboard/user-portrait-overview.tsx
new file mode 100644
index 0000000..f4252fd
--- /dev/null
+++ b/components/dashboard/user-portrait-overview.tsx
@@ -0,0 +1,138 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { PieChart, BarChart } from "@/components/charts"
+
+interface UserPortraitOverviewProps {
+  timeRange: string
+}
+
+export function UserPortraitOverview({ timeRange }: UserPortraitOverviewProps) {
+  // 这里应该根据timeRange从API获取实际数据
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-medium mb-2">用户性别分布</h3>
+            <PieChart
+              data={{
+                labels: ["男性", "女性", "未知"],
+                datasets: [
+                  {
+                    data: [45, 52, 3],
+                    backgroundColor: ["rgb(59, 130, 246)", "rgb(236, 72, 153)", "rgb(156, 163, 175)"],
+                  },
+                ],
+              }}
+              height={180}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-medium mb-2">用户年龄分布</h3>
+            <PieChart
+              data={{
+                labels: ["18岁以下", "18-24岁", "25-34岁", "35-44岁", "45-54岁", "55岁以上"],
+                datasets: [
+                  {
+                    data: [5, 25, 40, 20, 7, 3],
+                    backgroundColor: [
+                      "rgb(59, 130, 246)",
+                      "rgb(16, 185, 129)",
+                      "rgb(249, 115, 22)",
+                      "rgb(139, 92, 246)",
+                      "rgb(236, 72, 153)",
+                      "rgb(156, 163, 175)",
+                    ],
+                  },
+                ],
+              }}
+              height={180}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-medium mb-2">用户价值分布</h3>
+            <PieChart
+              data={{
+                labels: ["高价值", "中价值", "低价值"],
+                datasets: [
+                  {
+                    data: [25, 45, 30],
+                    backgroundColor: ["rgb(16, 185, 129)", "rgb(59, 130, 246)", "rgb(156, 163, 175)"],
+                  },
+                ],
+              }}
+              height={180}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-medium mb-2">地域分布 Top 10</h3>
+            <BarChart
+              data={{
+                labels: ["北京", "上海", "广东", "浙江", "江苏", "四川", "湖北", "福建", "山东", "河南"],
+                datasets: [
+                  {
+                    label: "用户数量",
+                    data: [3200, 2800, 4500, 2100, 1900, 1600, 1400, 1200, 1100, 900],
+                    backgroundColor: "rgba(59, 130, 246, 0.8)",
+                  },
+                ],
+              }}
+              height={250}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-medium mb-2">职业分布</h3>
+            <BarChart
+              data={{
+                labels: ["学生", "企业员工", "自由职业", "企业管理者", "公务员", "其他"],
+                datasets: [
+                  {
+                    label: "用户数量",
+                    data: [15000, 35000, 20000, 18000, 7000, 5000],
+                    backgroundColor: "rgba(59, 130, 246, 0.8)",
+                  },
+                ],
+              }}
+              height={250}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardContent className="p-4">
+          <h3 className="text-sm font-medium mb-2">兴趣标签分布</h3>
+          <BarChart
+            data={{
+              labels: ["科技", "金融", "教育", "旅游", "健康", "美食", "时尚", "体育", "娱乐", "汽车"],
+              datasets: [
+                {
+                  label: "用户数量",
+                  data: [6500, 4800, 3900, 5200, 4100, 6800, 3500, 2900, 5500, 3200],
+                  backgroundColor: "rgba(59, 130, 246, 0.8)",
+                },
+              ],
+            }}
+            height={250}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/components/dashboard/user-tags-distribution.tsx b/components/dashboard/user-tags-distribution.tsx
new file mode 100644
index 0000000..539e55d
--- /dev/null
+++ b/components/dashboard/user-tags-distribution.tsx
@@ -0,0 +1,153 @@
+"use client"
+
+import { Card, CardContent } from "@/components/ui/card"
+import { PieChart, BarChart } from "@/components/charts"
+import { Badge } from "@/components/ui/badge"
+
+interface UserTagsDistributionProps {
+  timeRange: string
+}
+
+export function UserTagsDistribution({ timeRange }: UserTagsDistributionProps) {
+  // 这里应该根据timeRange从API获取实际数据
+
+  // 模拟标签分类数据
+  const tagCategories = [
+    { name: "行为特征", count: 45, color: "bg-blue-100 text-blue-800" },
+    { name: "偏好特征", count: 38, color: "bg-green-100 text-green-800" },
+    { name: "价值特征", count: 22, color: "bg-purple-100 text-purple-800" },
+    { name: "生命周期", count: 15, color: "bg-yellow-100 text-yellow-800" },
+    { name: "渠道来源", count: 12, color: "bg-indigo-100 text-indigo-800" },
+    { name: "社交属性", count: 8, color: "bg-pink-100 text-pink-800" },
+  ]
+
+  // 模拟热门标签数据
+  const hotTags = [
+    { name: "高价值用户", count: 12458, category: "价值特征" },
+    { name: "活跃用户", count: 45678, category: "行为特征" },
+    { name: "数据分析师", count: 8765, category: "职业角色" },
+    { name: "营销决策者", count: 6543, category: "职业角色" },
+    { name: "技术爱好者", count: 15432, category: "偏好特征" },
+    { name: "潜在客户", count: 23456, category: "价值特征" },
+    { name: "流失风险", count: 5678, category: "生命周期" },
+    { name: "企业客户", count: 3456, category: "客户类型" },
+    { name: "新注册用户", count: 7890, category: "生命周期" },
+    { name: "社交活跃", count: 12345, category: "社交属性" },
+  ]
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-medium mb-4">标签分类分布</h3>
+            <PieChart
+              data={{
+                labels: tagCategories.map((cat) => cat.name),
+                datasets: [
+                  {
+                    data: tagCategories.map((cat) => cat.count),
+                    backgroundColor: [
+                      "rgb(59, 130, 246)",
+                      "rgb(16, 185, 129)",
+                      "rgb(139, 92, 246)",
+                      "rgb(249, 115, 22)",
+                      "rgb(99, 102, 241)",
+                      "rgb(236, 72, 153)",
+                    ],
+                  },
+                ],
+              }}
+              height={250}
+            />
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-sm font-medium mb-4">热门标签 Top 10</h3>
+            <BarChart
+              data={{
+                labels: hotTags.map((tag) => tag.name),
+                datasets: [
+                  {
+                    label: "用户数量",
+                    data: hotTags.map((tag) => tag.count),
+                    backgroundColor: "rgba(59, 130, 246, 0.8)",
+                  },
+                ],
+              }}
+              height={250}
+            />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardContent className="p-4">
+          <h3 className="text-sm font-medium mb-4">标签分类详情</h3>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {tagCategories.map((category) => (
+              <div key={category.name} className="space-y-2">
+                <div className="flex justify-between items-center">
+                  <Badge className={category.color}>{category.name}</Badge>
+                  <span className="text-sm text-muted-foreground">{category.count}个标签</span>
+                </div>
+                <div className="space-y-1">
+                  {hotTags
+                    .filter((tag) => tag.category === category.name)
+                    .slice(0, 3)
+                    .map((tag) => (
+                      <div key={tag.name} className="flex justify-between items-center text-sm">
+                        <span>{tag.name}</span>
+                        <span className="text-muted-foreground">{(tag.count / 1000).toFixed(1)}k用户</span>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardContent className="p-4">
+          <h3 className="text-sm font-medium mb-4">标签覆盖率分析</h3>
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="bg-primary/10 rounded-lg p-4">
+                <div className="text-sm text-muted-foreground">平均标签数/用户</div>
+                <div className="text-2xl font-bold">5.8</div>
+                <div className="text-xs text-green-600">较上月增长 0.3</div>
+              </div>
+              <div className="bg-primary/10 rounded-lg p-4">
+                <div className="text-sm text-muted-foreground">标签覆盖率</div>
+                <div className="text-2xl font-bold">92.5%</div>
+                <div className="text-xs text-green-600">较上月提升 1.2%</div>
+              </div>
+              <div className="bg-primary/10 rounded-lg p-4">
+                <div className="text-sm text-muted-foreground">标签准确率</div>
+                <div className="text-2xl font-bold">87.3%</div>
+                <div className="text-xs text-green-600">较上月提升 2.1%</div>
+              </div>
+            </div>
+
+            <BarChart
+              data={{
+                labels: ["0个标签", "1-3个标签", "4-6个标签", "7-9个标签", "10个以上标签"],
+                datasets: [
+                  {
+                    label: "用户数量",
+                    data: [7500, 25000, 45000, 35000, 12500],
+                    backgroundColor: "rgba(59, 130, 246, 0.8)",
+                  },
+                ],
+              }}
+              height={250}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/components/dashboard/user-value-distribution.tsx b/components/dashboard/user-value-distribution.tsx
new file mode 100644
index 0000000..9a91a76
--- /dev/null
+++ b/components/dashboard/user-value-distribution.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts"
+
+export function UserValueDistribution() {
+  // 这里应该从API获取实际数据
+  const data = [
+    { name: "高价值", value: 25, color: "hsl(var(--primary))" },
+    { name: "中价值", value: 45, color: "hsl(var(--secondary))" },
+    { name: "低价值", value: 30, color: "hsl(var(--muted))" },
+  ]
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-base font-medium">用户价值分布</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="h-[200px]">
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie data={data} cx="50%" cy="50%" innerRadius={40} outerRadius={80} paddingAngle={2} dataKey="value">
+                {data.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={entry.color} />
+                ))}
+              </Pie>
+              <Tooltip />
+              <Legend />
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/components/data-analysis/rfm-analysis.tsx b/components/data-analysis/rfm-analysis.tsx
new file mode 100644
index 0000000..e44d3db
--- /dev/null
+++ b/components/data-analysis/rfm-analysis.tsx
@@ -0,0 +1,62 @@
+"use client"
+
+import type { RFMAnalysisResult, UserRFMData } from "@/types/data-analysis"
+
+interface RFMAnalysisProps {
+  data: UserRFMData[]
+  analysisResult: RFMAnalysisResult
+}
+
+export function RFMAnalysis({ data, analysisResult }: RFMAnalysisProps) {
+  // 获取用户分群的颜色
+  const getSegmentColor = (segment: string) => {
+    if (segment.includes("高价值")) return "rgb(16, 185, 129)"
+    if (segment.includes("中价值")) return "rgb(59, 130, 246)"
+    if (segment.includes("低价值")) return "rgb(156, 163, 175)"
+    return "rgb(139, 92, 246)" // 新用户
+  }
+
+  // 准备饼图数据
+  const pieChartData = {
+    labels: analysisResult.segmentDistribution.map(item => item.segment),
+    datasets: [
+      {
+        data: analysisResult.segmentDistribution.map(item => item.count),
+        backgroundColor: analysisResult.segmentDistribution.map(item => getSegmentColor(item.segment)),
+      },
+    ],
+  }
+
+  // 准备RFM分布柱状图数据
+  const rfmDistributionData = {
+    labels: ["R1", "R2", "R3", "R4", "R5", "F1", "F2", "F3", "F4", "F5", "M1", "M2", "M3", "M4", "M5"],
+    datasets: [
+      {
+        label: "用户数量",
+        data: [
+          // R分布
+          data.filter(user => user.rfmScore.recency === 1).length,
+          data.filter(user => user.rfmScore.recency === 2).length,
+          data.filter(user => user.rfmScore.recency === 3).length,
+          data.filter(user => user.rfmScore.recency === 4).length,
+          data.filter(user => user.rfmScore.recency === 5).length,
+          // F分布
+          data.filter(user => user.rfmScore.frequency === 1).length,
+          data.filter(user => user.rfmScore.frequency === 2).length,
+          data.filter(user => user.rfmScore.frequency === 3).length,
+          data.filter(user => user.rfmScore.frequency === 4).length,
+          data.filter(user => user.rfmScore.frequency === 5).length,
+          // M分布
+          data.filter(user => user.rfmScore.monetary === 1).length,
+          data.filter(user => user.rfmScore.monetary === 2).length,
+          data.filter(user => user.rfmScore.monetary === 3).length,
+          data.filter(user => user.rfmScore.monetary === 4).length,
+          data.filter(user => user.rfmScore.monetary === 5).length,
+        ],
+        backgroundColor: [
+          // R颜色
+          "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)", "rgba(239, 68, 68, 0.7)",
+          // F颜色
+          "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)", "rgba(16, 185, 129, 0.7)",
+          // M颜色
+          "rgba(59, 130, 246, 0.7)", "rgba(59, 130, 246, 0.7)", "rgba(59, 130\
diff --git a/components/data-analysis/user-selector.tsx b/components/data-analysis/user-selector.tsx
new file mode 100644
index 0000000..f601ef0
--- /dev/null
+++ b/components/data-analysis/user-selector.tsx
@@ -0,0 +1,326 @@
+"use client"
+
+import { useState } from "react"
+import type { UserRFMData, UserSegment, UserFilterOptions } from "@/types/data-analysis"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Search, Filter, RefreshCw, UserPlus, Download } from "lucide-react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+
+interface UserSelectorProps {
+  users: UserRFMData[]
+  selectedUsers: string[]
+  onSelectUser: (userId: string) => void
+  onSelectAll: (selected: boolean) => void
+  onFilterChange: (options: UserFilterOptions) => void
+  filterOptions: UserFilterOptions
+}
+
+export function UserSelector({
+  users,
+  selectedUsers,
+  onSelectUser,
+  onSelectAll,
+  onFilterChange,
+  filterOptions,
+}: UserSelectorProps) {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [showFilters, setShowFilters] = useState(false)
+
+  // 本地过滤用户（搜索功能）
+  const filteredUsers = users.filter(
+    (user) =>
+      user.userName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.phone.includes(searchQuery) ||
+      user.segment.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  // 处理分群选择
+  const handleSegmentChange = (segment: UserSegment, checked: boolean) => {
+    let newSegments = [...filterOptions.segments]
+    if (checked) {
+      newSegments.push(segment)
+    } else {
+      newSegments = newSegments.filter((s) => s !== segment)
+    }
+    onFilterChange({ ...filterOptions, segments: newSegments })
+  }
+
+  // 处理日期范围变更
+  const handleDateRangeChange = (field: "start" | "end", value: string) => {
+    onFilterChange({
+      ...filterOptions,
+      dateRange: {
+        ...filterOptions.dateRange,
+        [field]: value,
+      },
+    })
+  }
+
+  // 处理价值范围变更
+  const handleValueRangeChange = (field: "min" | "max", value: string) => {
+    onFilterChange({
+      ...filterOptions,
+      valueRange: {
+        ...filterOptions.valueRange,
+        [field]: Number.parseInt(value) || 0,
+      },
+    })
+  }
+
+  // 获取用户分群的颜色
+  const getSegmentColor = (segment: string) => {
+    if (segment.includes("高价值")) return "bg-green-100 text-green-800"
+    if (segment.includes("中价值")) return "bg-blue-100 text-blue-800"
+    if (segment.includes("低价值")) return "bg-gray-100 text-gray-800"
+    return "bg-purple-100 text-purple-800" // 新用户
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex justify-between items-center">
+          <CardTitle>用户选择</CardTitle>
+          <div className="flex space-x-2">
+            <Button variant="outline" size="sm" onClick={() => setShowFilters(!showFilters)}>
+              <Filter className="h-4 w-4 mr-2" />
+              筛选
+            </Button>
+            <Button variant="outline" size="sm">
+              <RefreshCw className="h-4 w-4 mr-2" />
+              刷新
+            </Button>
+            <Button variant="outline" size="sm">
+              <Download className="h-4 w-4 mr-2" />
+              导出
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {/* 搜索栏 */}
+        <div className="mb-4 relative">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="text"
+            placeholder="搜索用户名、手机号、分群..."
+            className="pl-8"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+
+        {/* 筛选面板 */}
+        {showFilters && (
+          <div className="mb-6 p-4 border rounded-md bg-gray-50">
+            <h3 className="text-sm font-medium mb-3">高级筛选</h3>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {/* 分群筛选 */}
+              <div>
+                <h4 className="text-xs font-medium mb-2">用户分群</h4>
+                <div className="space-y-2">
+                  {[
+                    "高价值活跃用户",
+                    "高价值流失风险用户",
+                    "高价值沉睡用户",
+                    "中价值活跃用户",
+                    "中价值流失风险用户",
+                    "中价值沉睡用户",
+                    "低价值活跃用户",
+                    "低价值流失风险用户",
+                    "低价值沉睡用户",
+                    "新用户",
+                  ].map((segment) => (
+                    <div key={segment} className="flex items-center space-x-2">
+                      <Checkbox
+                        id={`segment-${segment}`}
+                        checked={filterOptions.segments.includes(segment as UserSegment)}
+                        onCheckedChange={(checked) => handleSegmentChange(segment as UserSegment, checked as boolean)}
+                      />
+                      <Label htmlFor={`segment-${segment}`} className="text-xs">
+                        {segment}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* 日期范围筛选 */}
+              <div>
+                <h4 className="text-xs font-medium mb-2">最后购买日期</h4>
+                <div className="space-y-2">
+                  <div className="grid grid-cols-2 gap-2">
+                    <div>
+                      <Label htmlFor="date-start" className="text-xs">
+                        开始日期
+                      </Label>
+                      <Input
+                        id="date-start"
+                        type="date"
+                        value={filterOptions.dateRange.start}
+                        onChange={(e) => handleDateRangeChange("start", e.target.value)}
+                        className="text-xs"
+                      />
+                    </div>
+                    <div>
+                      <Label htmlFor="date-end" className="text-xs">
+                        结束日期
+                      </Label>
+                      <Input
+                        id="date-end"
+                        type="date"
+                        value={filterOptions.dateRange.end}
+                        onChange={(e) => handleDateRangeChange("end", e.target.value)}
+                        className="text-xs"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* 价值范围筛选 */}
+              <div>
+                <h4 className="text-xs font-medium mb-2">用户估值范围</h4>
+                <div className="space-y-2">
+                  <div className="grid grid-cols-2 gap-2">
+                    <div>
+                      <Label htmlFor="value-min" className="text-xs">
+                        最小值
+                      </Label>
+                      <Input
+                        id="value-min"
+                        type="number"
+                        value={filterOptions.valueRange.min}
+                        onChange={(e) => handleValueRangeChange("min", e.target.value)}
+                        className="text-xs"
+                      />
+                    </div>
+                    <div>
+                      <Label htmlFor="value-max" className="text-xs">
+                        最大值
+                      </Label>
+                      <Input
+                        id="value-max"
+                        type="number"
+                        value={filterOptions.valueRange.max}
+                        onChange={(e) => handleValueRangeChange("max", e.target.value)}
+                        className="text-xs"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex justify-end mt-4">
+              <Button
+                variant="outline"
+                size="sm"
+                className="mr-2"
+                onClick={() =>
+                  onFilterChange({
+                    segments: [],
+                    dateRange: { start: "", end: "" },
+                    valueRange: { min: 0, max: 0 },
+                    sources: [],
+                  })
+                }
+              >
+                重置
+              </Button>
+              <Button size="sm">应用筛选</Button>
+            </div>
+          </div>
+        )}
+
+        {/* 用户表格 */}
+        <div className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-12">
+                  <Checkbox
+                    checked={selectedUsers.length === filteredUsers.length && filteredUsers.length > 0}
+                    onCheckedChange={(checked) => onSelectAll(!!checked)}
+                  />
+                </TableHead>
+                <TableHead>用户名</TableHead>
+                <TableHead>手机号</TableHead>
+                <TableHead>最后购买</TableHead>
+                <TableHead>购买频率</TableHead>
+                <TableHead>消费总额</TableHead>
+                <TableHead>RFM得分</TableHead>
+                <TableHead>用户分群</TableHead>
+                <TableHead>估值</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredUsers.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={9} className="text-center py-4">
+                    没有找到匹配的用户
+                  </TableCell>
+                </TableRow>
+              ) : (
+                filteredUsers.map((user) => (
+                  <TableRow key={user.userId} className="cursor-pointer hover:bg-gray-50">
+                    <TableCell>
+                      <Checkbox
+                        checked={selectedUsers.includes(user.userId)}
+                        onCheckedChange={() => onSelectUser(user.userId)}
+                      />
+                    </TableCell>
+                    <TableCell className="font-medium">{user.userName}</TableCell>
+                    <TableCell>{user.phone}</TableCell>
+                    <TableCell>{user.lastPurchaseDate}</TableCell>
+                    <TableCell>{user.purchaseFrequency}次</TableCell>
+                    <TableCell>¥{user.totalSpent.toLocaleString()}</TableCell>
+                    <TableCell>
+                      <div className="flex items-center space-x-1">
+                        <Badge variant="outline" className="bg-red-50 text-red-700">
+                          R{user.rfmScore.recency}
+                        </Badge>
+                        <Badge variant="outline" className="bg-green-50 text-green-700">
+                          F{user.rfmScore.frequency}
+                        </Badge>
+                        <Badge variant="outline" className="bg-blue-50 text-blue-700">
+                          M{user.rfmScore.monetary}
+                        </Badge>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge className={getSegmentColor(user.segment)}>{user.segment}</Badge>
+                    </TableCell>
+                    <TableCell className="font-medium">¥{user.valueEstimation.toLocaleString()}</TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        {/* 选择统计 */}
+        <div className="mt-4 flex justify-between items-center">
+          <div className="text-sm text-gray-500">
+            已选择 <span className="font-medium">{selectedUsers.length}</span> 个用户， 总估值{" "}
+            <span className="font-medium">
+              ¥
+              {users
+                .filter((user) => selectedUsers.includes(user.userId))
+                .reduce((sum, user) => sum + user.valueEstimation, 0)
+                .toLocaleString()}
+            </span>
+          </div>
+          <Button size="sm">
+            <UserPlus className="h-4 w-4 mr-2" />
+            添加到分析
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/components/data-integration/ai-analysis-tools.tsx b/components/data-integration/ai-analysis-tools.tsx
new file mode 100644
index 0000000..dcc26cf
--- /dev/null
+++ b/components/data-integration/ai-analysis-tools.tsx
@@ -0,0 +1,923 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import {
+  Brain,
+  Lightbulb,
+  BarChart,
+  PieChart,
+  Users,
+  Tag,
+  Play,
+  Settings,
+  Search,
+  Filter,
+  Copy,
+  Check,
+  Zap,
+} from "lucide-react"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { useToast } from "@/components/ui/use-toast"
+
+interface AIAnalysisTask {
+  id: string
+  name: string
+  type: string
+  status: "pending" | "running" | "completed" | "failed"
+  progress: number
+  createdAt: string
+  completedAt: string | null
+  dataSource: string
+  parameters: Record<string, any>
+  result: any | null
+}
+
+interface AIModel {
+  id: string
+  name: string
+  provider: string
+  type: string
+  capabilities: string[]
+  apiEndpoint: string
+  apiKey: string
+  status: "active" | "inactive"
+}
+
+export function AIAnalysisTools() {
+  const { toast } = useToast()
+  const [activeTab, setActiveTab] = useState("analysis-tasks")
+  const [isCreatingTask, setIsCreatingTask] = useState(false)
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null)
+  const [isAddingModel, setIsAddingModel] = useState(false)
+  const [copiedText, setCopiedText] = useState<string | null>(null)
+
+  // 模拟AI分析任务
+  const [aiTasks, setAiTasks] = useState<AIAnalysisTask[]>([
+    {
+      id: "task-1",
+      name: "用户行为分析",
+      type: "behavior-analysis",
+      status: "completed",
+      progress: 100,
+      createdAt: "2023-07-20 10:15",
+      completedAt: "2023-07-20 10:25",
+      dataSource: "行为分析平台",
+      parameters: {
+        userSegment: "高价值用户",
+        timeRange: "近30天",
+        analysisDepth: "深度",
+      },
+      result: {
+        summary: "高价值用户在过去30天内主要活跃在晚间时段，偏好浏览科技和旅游类内容，平均会话时长较长。",
+        insights: [
+          "用户主要在晚上9点至11点活跃",
+          "科技类内容点击率高于平均水平58%",
+          "平均会话时长为8.5分钟，高于普通用户3.2分钟",
+          "移动端访问占比87%，其中iOS设备占65%",
+        ],
+        recommendations: [
+          "在晚间时段推送个性化内容",
+          "增加科技和旅游类内容的推荐权重",
+          "针对长会话时长优化页面加载速度",
+          "优化iOS端用户体验",
+        ],
+      },
+    },
+    {
+      id: "task-2",
+      name: "用户分群自动发现",
+      type: "segment-discovery",
+      status: "completed",
+      progress: 100,
+      createdAt: "2023-07-19 14:30",
+      completedAt: "2023-07-19 15:10",
+      dataSource: "用户数据库",
+      parameters: {
+        clusteringMethod: "K-Means",
+        features: ["消费行为", "活跃度", "内容偏好"],
+        maxClusters: 8,
+      },
+      result: {
+        summary: "系统自动发现了5个明显的用户分群，其中包括高消费低活跃、高活跃低消费等特征明显的群体。",
+        clusters: [
+          {
+            name: "高消费科技爱好者",
+            size: 12500,
+            characteristics: ["高消费", "科技内容偏好", "中等活跃度"],
+          },
+          {
+            name: "活跃社交用户",
+            size: 28900,
+            characteristics: ["高活跃度", "社交内容偏好", "中等消费"],
+          },
+          {
+            name: "奢侈品偶尔购买者",
+            size: 8700,
+            characteristics: ["低活跃度", "高单次消费", "奢侈品偏好"],
+          },
+          {
+            name: "日常必需品购买者",
+            size: 45600,
+            characteristics: ["高频次低金额消费", "中等活跃度", "生活类内容偏好"],
+          },
+          {
+            name: "休眠用户",
+            size: 15400,
+            characteristics: ["极低活跃度", "低消费", "无明显内容偏好"],
+          },
+        ],
+      },
+    },
+    {
+      id: "task-3",
+      name: "用户流失预测",
+      type: "churn-prediction",
+      status: "running",
+      progress: 65,
+      createdAt: "2023-07-21 09:45",
+      completedAt: null,
+      dataSource: "用户数据库 & 行为分析平台",
+      parameters: {
+        predictionHorizon: "30天",
+        modelType: "随机森林",
+        features: ["活跃度", "消费频率", "客服交互", "产品使用情况"],
+      },
+      result: null,
+    },
+    {
+      id: "task-4",
+      name: "营销策略生成",
+      type: "strategy-generation",
+      status: "pending",
+      progress: 0,
+      createdAt: "2023-07-21 10:30",
+      completedAt: null,
+      dataSource: "用户画像 & 行为分析",
+      parameters: {
+        targetSegment: "流失风险用户",
+        campaignGoal: "提高留存率",
+        budgetConstraint: "中等",
+        channelPreference: ["短信", "应用内推送", "邮件"],
+      },
+      result: null,
+    },
+    {
+      id: "task-5",
+      name: "自动标签生成",
+      type: "tag-generation",
+      status: "completed",
+      progress: 100,
+      createdAt: "2023-07-18 11:20",
+      completedAt: "2023-07-18 12:05",
+      dataSource: "用户数据库 & 行为分析平台",
+      parameters: {
+        tagCategories: ["兴趣", "消费习惯", "活跃模式"],
+        minConfidence: 0.7,
+        maxTagsPerUser: 10,
+      },
+      result: {
+        summary: "系统为85%的用户生成了新标签，平均每用户5.3个标签。",
+        tagCategories: [
+          {
+            name: "兴趣标签",
+            count: 28,
+            coverage: "92%",
+            examples: ["科技爱好者", "旅游达人", "美食家", "运动健身"],
+          },
+          {
+            name: "消费习惯",
+            count: 15,
+            coverage: "88%",
+            examples: ["奢侈品偏好", "理性消费", "冲动购物", "价格敏感"],
+          },
+          {
+            name: "活跃模式",
+            count: 12,
+            coverage: "95%",
+            examples: ["工作时间活跃", "夜间活跃", "周末活跃", "低频高质"],
+          },
+        ],
+      },
+    },
+  ])
+
+  // 模拟AI模型
+  const [aiModels, setAiModels] = useState<AIModel[]>([
+    {
+      id: "model-1",
+      name: "GPT-4",
+      provider: "OpenAI",
+      type: "大语言模型",
+      capabilities: ["文本生成", "内容分析", "情感分析", "摘要生成"],
+      apiEndpoint: "https://api.openai.com/v1/chat/completions",
+      apiKey: "sk-***********",
+      status: "active",
+    },
+    {
+      id: "model-2",
+      name: "Claude 2",
+      provider: "Anthropic",
+      type: "大语言模型",
+      capabilities: ["文本生成", "内容分析", "代码生成", "问答"],
+      apiEndpoint: "https://api.anthropic.com/v1/complete",
+      apiKey: "sk-ant-***********",
+      status: "active",
+    },
+    {
+      id: "model-3",
+      name: "MCP SERVER AI",
+      provider: "内部服务",
+      type: "专用分析模型",
+      capabilities: ["用户行为分析", "分群发现", "标签生成", "预测模型"],
+      apiEndpoint: "https://mcp.example.com/api/analyze",
+      apiKey: "mcp-***********",
+      status: "active",
+    },
+    {
+      id: "model-4",
+      name: "DALL-E 3",
+      provider: "OpenAI",
+      type: "图像生成模型",
+      capabilities: ["图像生成", "图像编辑", "风格迁移"],
+      apiEndpoint: "https://api.openai.com/v1/images/generations",
+      apiKey: "sk-***********",
+      status: "inactive",
+    },
+  ])
+
+  // 模拟分析模板
+  const analysisTemplates = [
+    {
+      id: "template-1",
+      name: "用户行为分析",
+      description: "分析用户的行为模式、偏好和习惯",
+      type: "behavior-analysis",
+      parameters: {
+        userSegment: "所有用户",
+        timeRange: "近30天",
+        analysisDepth: "标准",
+      },
+    },
+    {
+      id: "template-2",
+      name: "用户分群发现",
+      description: "自动发现数据中的用户分群",
+      type: "segment-discovery",
+      parameters: {
+        clusteringMethod: "K-Means",
+        features: ["消费行为", "活跃度", "内容偏好"],
+        maxClusters: 8,
+      },
+    },
+    {
+      id: "template-3",
+      name: "用户流失预测",
+      description: "预测未来可能流失的用户",
+      type: "churn-prediction",
+      parameters: {
+        predictionHorizon: "30天",
+        modelType: "随机森林",
+        features: ["活跃度", "消费频率", "客服交互", "产品使用情况"],
+      },
+    },
+    {
+      id: "template-4",
+      name: "营销策略生成",
+      description: "为特定用户分群生成营销策略",
+      type: "strategy-generation",
+      parameters: {
+        targetSegment: "所有用户",
+        campaignGoal: "提高转化率",
+        budgetConstraint: "中等",
+        channelPreference: ["短信", "应用内推送", "邮件"],
+      },
+    },
+    {
+      id: "template-5",
+      name: "自动标签生成",
+      description: "基于用户数据自动生成用户标签",
+      type: "tag-generation",
+      parameters: {
+        tagCategories: ["兴趣", "消费习惯", "活跃模式"],
+        minConfidence: 0.7,
+        maxTagsPerUser: 10,
+      },
+    },
+  ]
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "pending":
+        return <Badge className="bg-gray-100 text-gray-800">等待中</Badge>
+      case "running":
+        return <Badge className="bg-blue-100 text-blue-800">运行中</Badge>
+      case "completed":
+        return <Badge className="bg-green-100 text-green-800">已完成</Badge>
+      case "failed":
+        return <Badge className="bg-red-100 text-red-800">失败</Badge>
+      case "active":
+        return <Badge className="bg-green-100 text-green-800">已启用</Badge>
+      case "inactive":
+        return <Badge className="bg-gray-100 text-gray-800">已禁用</Badge>
+      default:
+        return <Badge>未知</Badge>
+    }
+  }
+
+  const getTaskTypeIcon = (type: string) => {
+    switch (type) {
+      case "behavior-analysis":
+        return <Users className="h-5 w-5 text-blue-500" />
+      case "segment-discovery":
+        return <PieChart className="h-5 w-5 text-purple-500" />
+      case "churn-prediction":
+        return <BarChart className="h-5 w-5 text-orange-500" />
+      case "strategy-generation":
+        return <Lightbulb className="h-5 w-5 text-yellow-500" />
+      case "tag-generation":
+        return <Tag className="h-5 w-5 text-green-500" />
+      default:
+        return <Brain className="h-5 w-5" />
+    }
+  }
+
+  const selectedTask = selectedTaskId ? aiTasks.find((task) => task.id === selectedTaskId) : null
+
+  const handleCopyText = (text: string) => {
+    navigator.clipboard.writeText(text)
+    setCopiedText(text)
+    toast({
+      title: "已复制到剪贴板",
+      description: "文本已成功复制到剪贴板",
+    })
+    setTimeout(() => setCopiedText(null), 2000)
+  }
+
+  const toggleModelStatus = (id: string) => {
+    setAiModels(
+      aiModels.map((model) => {
+        if (model.id === id) {
+          return {
+            ...model,
+            status: model.status === "active" ? "inactive" : "active",
+          }
+        }
+        return model
+      }),
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-bold">AI分析工具</h2>
+        <div className="flex items-center gap-2">
+          <Button variant="outline">
+            <Settings className="mr-2 h-4 w-4" />
+            AI设置
+          </Button>
+          <Button onClick={() => setIsCreatingTask(true)}>
+            <Brain className="mr-2 h-4 w-4" />
+            创建分析任务
+          </Button>
+        </div>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="analysis-tasks">分析任务</TabsTrigger>
+          <TabsTrigger value="ai-models">AI模型</TabsTrigger>
+          <TabsTrigger value="templates">分析模板</TabsTrigger>
+          <TabsTrigger value="settings">AI设置</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="analysis-tasks" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <div className="flex justify-between items-center">
+                <CardTitle>AI分析任务</CardTitle>
+                <div className="flex items-center gap-2">
+                  <div className="relative">
+                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                    <Input type="text" placeholder="搜索任务..." className="pl-8 w-[200px]" />
+                  </div>
+                  <Select defaultValue="all">
+                    <SelectTrigger className="w-[150px]">
+                      <Filter className="mr-2 h-4 w-4" />
+                      <SelectValue placeholder="任务状态" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">所有状态</SelectItem>
+                      <SelectItem value="pending">等待中</SelectItem>
+                      <SelectItem value="running">运行中</SelectItem>
+                      <SelectItem value="completed">已完成</SelectItem>
+                      <SelectItem value="failed">失败</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-[50px]">类型</TableHead>
+                      <TableHead>任务名称</TableHead>
+                      <TableHead>数据源</TableHead>
+                      <TableHead>创建时间</TableHead>
+                      <TableHead>状态</TableHead>
+                      <TableHead>进度</TableHead>
+                      <TableHead className="text-right">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {aiTasks.map((task) => (
+                      <TableRow key={task.id}>
+                        <TableCell>{getTaskTypeIcon(task.type)}</TableCell>
+                        <TableCell className="font-medium">{task.name}</TableCell>
+                        <TableCell>{task.dataSource}</TableCell>
+                        <TableCell>{task.createdAt}</TableCell>
+                        <TableCell>{getStatusBadge(task.status)}</TableCell>
+                        <TableCell>
+                          <div className="w-full bg-gray-200 rounded-full h-2.5">
+                            <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>
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <Button variant="ghost" size="sm" onClick={() => setSelectedTaskId(task.id)}>
+                            查看详情
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="ai-models" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <div className="flex justify-between items-center">
+                <CardTitle>AI模型管理</CardTitle>
+                <Button onClick={() => setIsAddingModel(true)}>添加模型</Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>模型名称</TableHead>
+                      <TableHead>提供商</TableHead>
+                      <TableHead>类型</TableHead>
+                      <TableHead>能力</TableHead>
+                      <TableHead>API端点</TableHead>
+                      <TableHead>状态</TableHead>
+                      <TableHead className="text-right">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {aiModels.map((model) => (
+                      <TableRow key={model.id}>
+                        <TableCell className="font-medium">{model.name}</TableCell>
+                        <TableCell>{model.provider}</TableCell>
+                        <TableCell>{model.type}</TableCell>
+                        <TableCell>
+                          <div className="flex flex-wrap gap-1">
+                            {model.capabilities.slice(0, 2).map((capability, index) => (
+                              <Badge key={index} variant="outline">
+                                {capability}
+                              </Badge>
+                            ))}
+                            {model.capabilities.length > 2 && (
+                              <Badge variant="outline">+{model.capabilities.length - 2}</Badge>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell className="max-w-[200px] truncate">{model.apiEndpoint}</TableCell>
+                        <TableCell>
+                          <div className="flex items-center space-x-2">
+                            <Switch
+                              checked={model.status === "active"}
+                              onCheckedChange={() => toggleModelStatus(model.id)}
+                              aria-label="Toggle model"
+                            />
+                            <span>{getStatusBadge(model.status)}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex justify-end space-x-2">
+                            <Button variant="ghost" size="sm">
+                              编辑
+                            </Button>
+                            <Button variant="ghost" size="sm">
+                              测试
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>MCP SERVER配置</CardTitle>
+              <CardDescription>配置MCP SERVER AI工具的分析参数</CardDescription>
+            </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="mcp-server-url">服务器地址</Label>
+                  <Input id="mcp-server-url" defaultValue="https://mcp.example.com/api" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="mcp-api-key">API密钥</Label>
+                  <Input id="mcp-api-key" type="password" defaultValue="••••••••••••••••" />
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="mcp-model">AI模型选择</Label>
+                <Select defaultValue="gpt-4">
+                  <SelectTrigger id="mcp-model">
+                    <SelectValue placeholder="选择AI模型" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="gpt-4">GPT-4</SelectItem>
+                    <SelectItem value="gpt-3.5-turbo">GPT-3.5 Turbo</SelectItem>
+                    <SelectItem value="claude-2">Claude 2</SelectItem>
+                    <SelectItem value="llama-2">Llama 2</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label>分析能力配置</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="flex items-center space-x-2">
+                    <Switch id="behavior-analysis" defaultChecked />
+                    <Label htmlFor="behavior-analysis">行为分析</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Switch id="segment-discovery" defaultChecked />
+                    <Label htmlFor="segment-discovery">分群发现</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Switch id="churn-prediction" defaultChecked />
+                    <Label htmlFor="churn-prediction">流失预测</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Switch id="tag-generation" defaultChecked />
+                    <Label htmlFor="tag-generation">标签生成</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Switch id="strategy-generation" defaultChecked />
+                    <Label htmlFor="strategy-generation">策略生成</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Switch id="content-generation" defaultChecked />
+                    <Label htmlFor="content-generation">内容生成</Label>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex justify-end">
+                <Button>保存MCP配置</Button>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="templates" className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {analysisTemplates.map((template) => (
+              <Card key={template.id} className="border shadow-sm">
+                <CardHeader>
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      {getTaskTypeIcon(template.type)}
+                      <CardTitle className="text-lg">{template.name}</CardTitle>
+                    </div>
+                    <Button variant="ghost" size="icon">
+                      <Settings className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <CardDescription>{template.description}</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    <h4 className="text-sm font-medium">默认参数</h4>
+                    <div className="text-sm">
+                      {Object.entries(template.parameters).map(([key, value]) => (
+                        <div key={key} className="flex justify-between py-1 border-b border-dashed border-gray-200">
+                          <span className="text-muted-foreground">{key}:</span>
+                          <span className="font-medium">
+                            {Array.isArray(value) ? value.join(", ") : value.toString()}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="mt-4 flex justify-end">
+                    <Button onClick={() => setIsCreatingTask(true)}>
+                      <Play className="mr-2 h-4 w-4" />
+                      使用模板
+                    </Button>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+
+            <Card className="border shadow-sm border-dashed">
+              <CardContent className="p-6 flex flex-col items-center justify-center h-full">
+                <div className="rounded-full bg-muted p-3 mb-4">
+                  <Plus className="h-6 w-6 text-muted-foreground" />
+                </div>
+                <h3 className="text-lg font-medium mb-2">创建新模板</h3>
+                <p className="text-sm text-muted-foreground text-center mb-4">
+                  创建自定义分析模板，保存常用的分析配置
+                </p>
+                <Button variant="outline">创建模板</Button>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="settings" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>AI分析设置</CardTitle>
+              <CardDescription>配置AI分析的全局设置</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="enable-ai">启用AI分析</Label>
+                  <Switch id="enable-ai" defaultChecked />
+                </div>
+                <p className="text-sm text-muted-foreground">关闭后，所有AI分析功能将暂停</p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="default-model">默认AI模型</Label>
+                <Select defaultValue="model-3">
+                  <SelectTrigger id="default-model">
+                    <SelectValue placeholder="选择默认模型" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {aiModels
+                      .filter((model) => model.status === "active")
+                      .map((model) => (
+                        <SelectItem key={model.id} value={model.id}>
+                          {model.name} ({model.provider})
+                        </SelectItem>
+                      ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="analysis-concurrency">并发分析任务数</Label>
+                <Select defaultValue="3">
+                  <SelectTrigger id="analysis-concurrency">
+                    <SelectValue placeholder="选择并发任务数" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="1">1</SelectItem>
+                    <SelectItem value="3">3</SelectItem>
+                    <SelectItem value="5">5</SelectItem>
+                    <SelectItem value="10">10</SelectItem>
+                  </SelectContent>
+                </Select>
+                <p className="text-sm text-muted-foreground">
+                  设置同时执行的AI分析任务数量，数值越大系统负载越高
+                </p>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-2">
+                <Label>数据访问权限</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="access-user-db" defaultChecked />
+                    <Label htmlFor="access-user-db">用户数据库</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="access-transaction" defaultChecked />
+                    <Label htmlFor="access-transaction">交易系统</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="access-behavior" defaultChecked />
+                    <Label htmlFor="access-behavior">行为分析平台</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="access-user-value" defaultChecked />
+                    <Label htmlFor="access-user-value">用户价值模型</Label>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label>数据处理设置</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="anonymize-data" defaultChecked />
+                    <Label htmlFor="anonymize-data">数据匿名化</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="cache-results" defaultChecked />
+                    <Label htmlFor="cache-results">缓存分析结果</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="auto-update" defaultChecked />
+                    <Label htmlFor="auto-update">自动更新分析</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="save-history" defaultChecked />
+                    <Label htmlFor="save-history">保存分析历史</Label>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label>通知设置</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="notify-completion" defaultChecked />
+                    <Label htmlFor="notify-completion">分析完成通知</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="notify-error" defaultChecked />
+                    <Label htmlFor="notify-error">错误通知</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="notify-insight" defaultChecked />
+                    <Label htmlFor="notify-insight">重要洞察通知</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox id="notify-email" defaultChecked />
+                    <Label htmlFor="notify-email">邮件通知</Label>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex justify-end">
+                <Button>保存设置</Button>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      {/* 任务详情对话框 */}
+      <Dialog open={!!selectedTaskId} onOpenChange={(open) => !open && setSelectedTaskId(null)}>
+        <DialogContent className="sm:max-w-[700px]">
+          <DialogHeader>
+            <DialogTitle>分析任务详情</DialogTitle>
+            <DialogDescription>查看AI分析任务的详细信息和结果</DialogDescription>
+          </DialogHeader>
+          {selectedTask && (
+            <div className="space-y-4 py-4">
+              <div className="flex items-center gap-4">
+                {getTaskTypeIcon(selectedTask.type)}
+                <div>
+                  <h3 className="font-medium text-lg">{selectedTask.name}</h3>
+                  <p className="text-sm text-muted-foreground">
+                    {selectedTask.dataSource} | 创建于 {selectedTask.createdAt}
+                  </p>
+                </div>
+                <div className="ml-auto">{getStatusBadge(selectedTask.status)}</div>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-2">
+                <h4 className="text-sm font-medium">分析参数</h4>
+                <div className="grid grid-cols-2 gap-2">
+                  {Object.entries(selectedTask.parameters).map(([key, value]) => (
+                    <div key={key} className="flex justify-between py-1 border-b border-dashed border-gray-200">
+                      <span className="text-sm text-muted-foreground">{key}:</span>
+                      <span className="text-sm font-medium">
+                        {Array.isArray(value) ? value.join(", ") : value.toString()}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {selectedTask.status === "running" && (
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <h4 className="text-sm font-medium">分析进度</h4>
+                    <span className="text-sm font-medium">{selectedTask.progress}%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div
+                      className="bg-blue-600 h-2.5 rounded-full"
+                      style={{ width: `${selectedTask.progress}%` }}
+                    ></div>
+                  </div>
+                  <p className="text-xs text-muted-foreground">
+                    正在处理数据...预计剩余时间: {Math.round((100 - selectedTask.progress) / 10)} 分钟
+                  </p>
+                </div>
+              )}
+
+              {selectedTask.result && (
+                <div className="space-y-4">
+                  <Separator />
+
+                  <div className="space-y-2">
+                    <div className="flex justify-between items-center">
+                      <h4 className="text-sm font-medium">分析摘要</h4>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleCopyText(selectedTask.result.summary)}
+                        className="h-7"
+                      >
+                        {copiedText === selectedTask.result.summary ? (
+                          <Check className="h-3 w-3 mr-1" />
+                        ) : (
+                          <Copy className="h-3 w-3 mr-1" />
+                        )}
+                        复制
+                      </Button>
+                    </div>
+                    <div className="p-3 bg-muted rounded-md text-sm">{selectedTask.result.summary}</div>
+                  </div>
+
+                  {selectedTask.result.insights && (
+                    <div className="space-y-2">
+                      <h4 className="text-sm font-medium">关键洞察</h4>
+                      <div className="space-y-1">
+                        {selectedTask.result.insights.map((insight: string, index: number) => (
+                          <div key={index} className="flex items-start gap-2">
+                            <Lightbulb className="h-4 w-4 text-yellow-500 mt-0.5" />
+                            <p className="text-sm">{insight}</p>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {selectedTask.result.recommendations && (
+                    <div className="space-y-2">
+                      <h4 className="text-sm font-medium">建议</h4>
+                      <div className="space-y-1">
+                        {selectedTask.result.recommendations.map((recommendation: string, index: number) => (
+                          <div key={index} className="flex items-start gap-2">
+                            <Zap className="h-4 w-4 text-blue-500 mt-0.5" />
+                            <p className="text-sm">{recommendation}</p>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {selectedTask.result.clusters && (
+                    <div className="space-y-2">
+                      <h4 className="text-sm font-medium">发现的用户分群</h4>
+                      <div className="rounded-md border">
+                        <Table>
+                          <TableHeader>
+                            <TableRow>
+                              <TableHead>分群名称</TableHead>
+                              <TableHead>用户数</TableHead>
+                              <TableHead>特征</TableHead>
+                            </TableRow>
+                          </TableHeader>
+                          <TableBody>
+                            {selectedTask.result.clusters.map((cluster: any, index: number) => (
+                              <TableRow key={
diff --git a/components/data-integration/api-documentation.tsx b/components/data-integration/api-documentation.tsx
new file mode 100644
index 0000000..acb51d4
--- /dev/null
+++ b/components/data-integration/api-documentation.tsx
@@ -0,0 +1,664 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { Copy, Check, Code, FileJson, Play } from "lucide-react"
+import { useToast } from "@/components/ui/use-toast"
+
+interface ApiEndpoint {
+  id: string
+  name: string
+  method: "GET" | "POST" | "PUT" | "DELETE"
+  path: string
+  description: string
+  parameters: {
+    name: string
+    type: string
+    required: boolean
+    description: string
+  }[]
+  requestBody?: {
+    type: string
+    example: string
+  }
+  responses: {
+    code: string
+    description: string
+    example: string
+  }[]
+  authentication: "API Key" | "OAuth 2.0" | "None"
+}
+
+export function ApiDocumentation() {
+  const { toast } = useToast()
+  const [activeTab, setActiveTab] = useState("user-data")
+  const [copiedEndpoint, setCopiedEndpoint] = useState<string | null>(null)
+
+  // 模拟API端点数据
+  const apiEndpoints: Record<string, ApiEndpoint[]> = {
+    "user-data": [
+      {
+        id: "get-users",
+        name: "获取用户列表",
+        method: "GET",
+        path: "/api/users",
+        description: "获取系统中的用户列表，支持分页、筛选和排序",
+        parameters: [
+          {
+            name: "page",
+            type: "number",
+            required: false,
+            description: "页码，默认为1",
+          },
+          {
+            name: "limit",
+            type: "number",
+            required: false,
+            description: "每页数量，默认为20，最大为100",
+          },
+          {
+            name: "sort",
+            type: "string",
+            required: false,
+            description: "排序字段，例如：name,-createdAt（-表示降序）",
+          },
+          {
+            name: "filter",
+            type: "string",
+            required: false,
+            description: "筛选条件，例如：status=active",
+          },
+        ],
+        responses: [
+          {
+            code: "200",
+            description: "成功",
+            example: `{
+  "data": [
+    {
+      "id": "user_123",
+      "name": "张三",
+      "phoneNumber": "138****1234",
+      "registrationDate": "2023-01-15T08:30:00Z",
+      "lastActiveTime": "2023-07-20T14:25:30Z",
+      "tags": ["高价值", "活跃用户"]
+    },
+    // 更多用户...
+  ],
+  "pagination": {
+    "page": 1,
+    "limit": 20,
+    "total": 156,
+    "pages": 8
+  }
+}`,
+          },
+          {
+            code: "400",
+            description: "请求参数错误",
+            example: `{
+  "error": "Bad Request",
+  "message": "Invalid filter format",
+  "code": "INVALID_FILTER"
+}`,
+          },
+          {
+            code: "401",
+            description: "未授权",
+            example: `{
+  "error": "Unauthorized",
+  "message": "API key is invalid or expired",
+  "code": "INVALID_API_KEY"
+}`,
+          },
+        ],
+        authentication: "API Key",
+      },
+      {
+        id: "get-user",
+        name: "获取用户详情",
+        method: "GET",
+        path: "/api/users/{id}",
+        description: "根据用户ID获取用户详细信息",
+        parameters: [
+          {
+            name: "id",
+            type: "string",
+            required: true,
+            description: "用户ID",
+          },
+        ],
+        responses: [
+          {
+            code: "200",
+            description: "成功",
+            example: `{
+  "id": "user_123",
+  "name": "张三",
+  "phoneNumber": "138****1234",
+  "identityNumber": "310******1234",
+  "email": "zhangsan@example.com",
+  "registrationDate": "2023-01-15T08:30:00Z",
+  "lastActiveTime": "2023-07-20T14:25:30Z",
+  "tags": ["高价值", "活跃用户"],
+  "devices": [
+    {
+      "id": "device_456",
+      "type": "mobile",
+      "model": "iPhone 13",
+      "imei": "123456789012345",
+      "lastActiveTime": "2023-07-20T14:25:30Z"
+    }
+  ],
+  "userValue": {
+    "rfm": {
+      "recency": 5,
+      "frequency": 4,
+      "monetary": 5,
+      "score": 4.7
+    },
+    "lifetimeValue": 12500
+  }
+}`,
+          },
+          {
+            code: "404",
+            description: "用户不存在",
+            example: `{
+  "error": "Not Found",
+  "message": "User with ID user_999 not found",
+  "code": "USER_NOT_FOUND"
+}`,
+          },
+        ],
+        authentication: "API Key",
+      },
+    ],
+    "user-portrait": [
+      {
+        id: "get-user-portrait",
+        name: "获取用户画像",
+        method: "GET",
+        path: "/api/user-portrait/{id}",
+        description: "根据用户ID获取用户画像数据",
+        parameters: [
+          {
+            name: "id",
+            type: "string",
+            required: true,
+            description: "用户ID",
+          },
+        ],
+        responses: [
+          {
+            code: "200",
+            description: "成功",
+            example: `{
+  "userId": "user_123",
+  "basicInfo": {
+    "name": "张三",
+    "age": 28,
+    "gender": "male",
+    "location": "上海市"
+  },
+  "behaviorTags": ["夜间活跃", "周末购物", "高频App使用"],
+  "interestTags": ["科技", "旅游", "美食"],
+  "consumptionPattern": {
+    "averageOrderValue": 320,
+    "purchaseFrequency": "每周2-3次",
+    "preferredCategories": ["电子产品", "服装"]
+  },
+  "rfmAnalysis": {
+    "recency": 5,
+    "frequency": 4,
+    "monetary": 5,
+    "score": 4.7,
+    "segment": "高价值用户"
+  },
+  "deviceInfo": [
+    {
+      "type": "mobile",
+      "model": "iPhone 13",
+      "osVersion": "iOS 16.5",
+      "usageFrequency": "高"
+    }
+  ],
+  "channelPreference": ["App", "微信小程序"],
+  "riskScore": 0.2
+}`,
+          },
+        ],
+        authentication: "API Key",
+      },
+    ],
+    "ai-analysis": [
+      {
+        id: "analyze-user-behavior",
+        name: "用户行为分析",
+        method: "POST",
+        path: "/api/ai/analyze-behavior",
+        description: "使用AI分析用户行为数据，生成洞察报告",
+        parameters: [],
+        requestBody: {
+          type: "application/json",
+          example: `{
+  "userId": "user_123",
+  "timeRange": {
+    "start": "2023-01-01T00:00:00Z",
+    "end": "2023-07-20T23:59:59Z"
+  },
+  "analysisDepth": "deep",
+  "includeTags": true,
+  "includeRecommendations": true
+}`,
+        },
+        responses: [
+          {
+            code: "200",
+            description: "成功",
+            example: `{
+  "userId": "user_123",
+  "analysisTime": "2023-07-21T10:15:30Z",
+  "timeRange": {
+    "start": "2023-01-01T00:00:00Z",
+    "end": "2023-07-20T23:59:59Z"
+  },
+  "behaviorPatterns": [
+    {
+      "pattern": "夜间活跃",
+      "confidence": 0.92,
+      "description": "用户主要在晚上9点至凌晨1点活跃",
+      "supportingData": {
+        "activeTimeDistribution": {
+          "morning": 0.15,
+          "afternoon": 0.25,
+          "evening": 0.60
+        }
+      }
+    },
+    // 更多行为模式...
+  ],
+  "insights": [
+    {
+      "type": "preference",
+      "description": "用户对科技类产品有强烈兴趣，尤其是智能家居设备",
+      "confidence": 0.85
+    },
+    // 更多洞察...
+  ],
+  "recommendations": [
+    {
+      "type": "marketing",
+      "description": "建议在晚间时段推送智能家居相关促销信息",
+      "expectedImpact": "高"
+    },
+    // 更多建议...
+  ]
+}`,
+          },
+        ],
+        authentication: "API Key",
+      },
+    ],
+  }
+
+  const handleCopyCode = (code: string, endpointId: string) => {
+    navigator.clipboard.writeText(code)
+    setCopiedEndpoint(endpointId)
+    toast({
+      title: "已复制到剪贴板",
+      description: "代码已成功复制到剪贴板",
+    })
+    setTimeout(() => setCopiedEndpoint(null), 2000)
+  }
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>API文档</CardTitle>
+          <CardDescription>用户数据资产中台API接口文档和使用说明</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+            <TabsList className="grid grid-cols-3 w-full max-w-md">
+              <TabsTrigger value="user-data">用户数据</TabsTrigger>
+              <TabsTrigger value="user-portrait">用户画像</TabsTrigger>
+              <TabsTrigger value="ai-analysis">AI分析</TabsTrigger>
+            </TabsList>
+
+            {Object.entries(apiEndpoints).map(([category, endpoints]) => (
+              <TabsContent key={category} value={category} className="space-y-4">
+                {endpoints.map((endpoint) => (
+                  <Card key={endpoint.id} className="border shadow-sm">
+                    <CardHeader className="pb-2">
+                      <div className="flex justify-between items-start">
+                        <div>
+                          <CardTitle className="text-lg">{endpoint.name}</CardTitle>
+                          <CardDescription>{endpoint.description}</CardDescription>
+                        </div>
+                        <Badge
+                          className={
+                            endpoint.method === "GET"
+                              ? "bg-blue-100 text-blue-800"
+                              : endpoint.method === "POST"
+                                ? "bg-green-100 text-green-800"
+                                : endpoint.method === "PUT"
+                                  ? "bg-yellow-100 text-yellow-800"
+                                  : "bg-red-100 text-red-800"
+                          }
+                        >
+                          {endpoint.method}
+                        </Badge>
+                      </div>
+                    </CardHeader>
+                    <CardContent className="pb-2">
+                      <div className="flex items-center gap-2 mb-4">
+                        <code className="bg-muted px-2 py-1 rounded text-sm font-mono">{endpoint.path}</code>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => handleCopyCode(endpoint.path, `path-${endpoint.id}`)}
+                        >
+                          {copiedEndpoint === `path-${endpoint.id}` ? (
+                            <Check className="h-4 w-4" />
+                          ) : (
+                            <Copy className="h-4 w-4" />
+                          )}
+                        </Button>
+                      </div>
+
+                      <Accordion type="single" collapsible className="w-full">
+                        {endpoint.parameters.length > 0 && (
+                          <AccordionItem value="parameters">
+                            <AccordionTrigger>请求参数</AccordionTrigger>
+                            <AccordionContent>
+                              <div className="rounded-md border">
+                                <table className="min-w-full divide-y divide-border">
+                                  <thead>
+                                    <tr className="bg-muted/50">
+                                      <th className="px-4 py-2 text-left text-sm font-medium">参数名</th>
+                                      <th className="px-4 py-2 text-left text-sm font-medium">类型</th>
+                                      <th className="px-4 py-2 text-left text-sm font-medium">必填</th>
+                                      <th className="px-4 py-2 text-left text-sm font-medium">描述</th>
+                                    </tr>
+                                  </thead>
+                                  <tbody className="divide-y divide-border">
+                                    {endpoint.parameters.map((param, index) => (
+                                      <tr key={index}>
+                                        <td className="px-4 py-2 text-sm font-mono">{param.name}</td>
+                                        <td className="px-4 py-2 text-sm">{param.type}</td>
+                                        <td className="px-4 py-2 text-sm">
+                                          {param.required ? (
+                                            <Badge className="bg-red-100 text-red-800">必填</Badge>
+                                          ) : (
+                                            <Badge className="bg-gray-100 text-gray-800">可选</Badge>
+                                          )}
+                                        </td>
+                                        <td className="px-4 py-2 text-sm">{param.description}</td>
+                                      </tr>
+                                    ))}
+                                  </tbody>
+                                </table>
+                              </div>
+                            </AccordionContent>
+                          </AccordionItem>
+                        )}
+
+                        {endpoint.requestBody && (
+                          <AccordionItem value="request-body">
+                            <AccordionTrigger>请求体</AccordionTrigger>
+                            <AccordionContent>
+                              <div className="space-y-2">
+                                <div className="flex items-center gap-2">
+                                  <Badge className="bg-purple-100 text-purple-800">{endpoint.requestBody.type}</Badge>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7"
+                                    onClick={() => handleCopyCode(endpoint.requestBody!.example, `req-${endpoint.id}`)}
+                                  >
+                                    {copiedEndpoint === `req-${endpoint.id}` ? (
+                                      <Check className="h-3 w-3 mr-1" />
+                                    ) : (
+                                      <Copy className="h-3 w-3 mr-1" />
+                                    )}
+                                    复制
+                                  </Button>
+                                </div>
+                                <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
+                                  {endpoint.requestBody.example}
+                                </pre>
+                              </div>
+                            </AccordionContent>
+                          </AccordionItem>
+                        )}
+
+                        <AccordionItem value="responses">
+                          <AccordionTrigger>响应</AccordionTrigger>
+                          <AccordionContent>
+                            <div className="space-y-4">
+                              {endpoint.responses.map((response, index) => (
+                                <div key={index} className="space-y-2">
+                                  <div className="flex items-center gap-2">
+                                    <Badge
+                                      className={
+                                        response.code.startsWith("2")
+                                          ? "bg-green-100 text-green-800"
+                                          : response.code.startsWith("4")
+                                            ? "bg-red-100 text-red-800"
+                                            : "bg-yellow-100 text-yellow-800"
+                                      }
+                                    >
+                                      {response.code}
+                                    </Badge>
+                                    <span className="text-sm font-medium">{response.description}</span>
+                                    <Button
+                                      variant="ghost"
+                                      size="sm"
+                                      className="h-7"
+                                      onClick={() => handleCopyCode(response.example, `res-${endpoint.id}-${index}`)}
+                                    >
+                                      {copiedEndpoint === `res-${endpoint.id}-${index}` ? (
+                                        <Check className="h-3 w-3 mr-1" />
+                                      ) : (
+                                        <Copy className="h-3 w-3 mr-1" />
+                                      )}
+                                      复制
+                                    </Button>
+                                  </div>
+                                  <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
+                                    {response.example}
+                                  </pre>
+                                </div>
+                              ))}
+                            </div>
+                          </AccordionContent>
+                        </AccordionItem>
+
+                        <AccordionItem value="authentication">
+                          <AccordionTrigger>认证方式</AccordionTrigger>
+                          <AccordionContent>
+                            <div className="p-2">
+                              <Badge className="bg-blue-100 text-blue-800">{endpoint.authentication}</Badge>
+                              {endpoint.authentication === "API Key" && (
+                                <div className="mt-2 text-sm">
+                                  <p>在请求头中添加以下字段：</p>
+                                  <code className="bg-muted px-2 py-1 rounded text-sm font-mono mt-1 block">
+                                    X-API-Key: your_api_key_here
+                                  </code>
+                                </div>
+                              )}
+                              {endpoint.authentication === "OAuth 2.0" && (
+                                <div className="mt-2 text-sm">
+                                  <p>在请求头中添加以下字段：</p>
+                                  <code className="bg-muted px-2 py-1 rounded text-sm font-mono mt-1 block">
+                                    Authorization: Bearer your_access_token_here
+                                  </code>
+                                </div>
+                              )}
+                            </div>
+                          </AccordionContent>
+                        </AccordionItem>
+
+                        <AccordionItem value="code-examples">
+                          <AccordionTrigger>代码示例</AccordionTrigger>
+                          <AccordionContent>
+                            <div className="space-y-4">
+                              <div>
+                                <div className="flex items-center gap-2 mb-2">
+                                  <Badge className="bg-blue-100 text-blue-800">JavaScript</Badge>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7"
+                                    onClick={() => handleCopyCode(jsExample, `js-${endpoint.id}`)}
+                                  >
+                                    {copiedEndpoint === `js-${endpoint.id}` ? (
+                                      <Check className="h-3 w-3 mr-1" />
+                                    ) : (
+                                      <Copy className="h-3 w-3 mr-1" />
+                                    )}
+                                    复制
+                                  </Button>
+                                </div>
+                                <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
+                                  {jsExample}
+                                </pre>
+                              </div>
+
+                              <div>
+                                <div className="flex items-center gap-2 mb-2">
+                                  <Badge className="bg-green-100 text-green-800">Python</Badge>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="h-7"
+                                    onClick={() => handleCopyCode(pythonExample, `py-${endpoint.id}`)}
+                                  >
+                                    {copiedEndpoint === `py-${endpoint.id}` ? (
+                                      <Check className="h-3 w-3 mr-1" />
+                                    ) : (
+                                      <Copy className="h-3 w-3 mr-1" />
+                                    )}
+                                    复制
+                                  </Button>
+                                </div>
+                                <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
+                                  {pythonExample}
+                                </pre>
+                              </div>
+                            </div>
+                          </AccordionContent>
+                        </AccordionItem>
+                      </Accordion>
+                    </CardContent>
+                  </Card>
+                ))}
+              </TabsContent>
+            ))}
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>API使用指南</CardTitle>
+          <CardDescription>如何开始使用用户数据资产中台API</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <h3 className="text-lg font-medium">1. 获取API密钥</h3>
+            <p className="text-sm text-muted-foreground">
+              在开始使用API之前，您需要获取API密钥。请联系系统管理员申请API密钥。
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <h3 className="text-lg font-medium">2. 认证</h3>
+            <p className="text-sm text-muted-foreground">所有API请求都需要进行认证。请在请求头中添加您的API密钥：</p>
+            <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
+              X-API-Key: your_api_key_here
+            </pre>
+          </div>
+
+          <div className="space-y-2">
+            <h3 className="text-lg font-medium">3. 请求格式</h3>
+            <p className="text-sm text-muted-foreground">API支持JSON格式的请求和响应。请在请求头中设置：</p>
+            <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
+              Content-Type: application/json Accept: application/json
+            </pre>
+          </div>
+
+          <div className="space-y-2">
+            <h3 className="text-lg font-medium">4. 错误处理</h3>
+            <p className="text-sm text-muted-foreground">
+              API使用标准的HTTP状态码表示请求的结果。错误响应会包含错误详情：
+            </p>
+            <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm font-mono">
+              {`{
+  "error": "错误类型",
+  "message": "错误详细信息",
+  "code": "错误代码"
+}`}
+            </pre>
+          </div>
+
+          <div className="space-y-2">
+            <h3 className="text-lg font-medium">5. 速率限制</h3>
+            <p className="text-sm text-muted-foreground">
+              API有速率限制，默认为每分钟100个请求。超过限制会返回429状态码。
+            </p>
+          </div>
+
+          <div className="flex justify-between items-center mt-4">
+            <Button variant="outline" className="gap-2">
+              <FileJson className="h-4 w-4" />
+              下载OpenAPI规范
+            </Button>
+            <Button variant="outline" className="gap-2">
+              <Code className="h-4 w-4" />
+              下载SDK
+            </Button>
+            <Button className="gap-2">
+              <Play className="h-4 w-4" />
+              API测试工具
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+// 示例代码
+const jsExample = `// 使用fetch API调用
+const apiKey = 'your_api_key_here';
+
+fetch('https://api.example.com/api/users', {
+  method: 'GET',
+  headers: {
+    'Content-Type': 'application/json',
+    'X-API-Key': apiKey
+  }
+})
+.then(response => response.json())
+.then(data => console.log(data))
+.catch(error => console.error('Error:', error));`
+
+const pythonExample = `# 使用requests库调用
+import requests
+
+api_key = 'your_api_key_here'
+headers = {
+    'Content-Type': 'application/json',
+    'X-API-Key': api_key
+}
+
+response = requests.get('https://api.example.com/api/users', headers=headers)
+data = response.json()
+print(data)`
diff --git a/components/data-integration/data-collection-settings.tsx b/components/data-integration/data-collection-settings.tsx
new file mode 100644
index 0000000..62c8e41
--- /dev/null
+++ b/components/data-integration/data-collection-settings.tsx
@@ -0,0 +1,698 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Plus, Trash2, Clock, RefreshCw, Database, Server, FileText, Settings, HelpCircle } from "lucide-react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+
+interface CollectionTask {
+  id: string
+  name: string
+  source: string
+  type: string
+  schedule: string
+  lastRun: string | null
+  nextRun: string | null
+  status: "active" | "paused" | "error" | "completed"
+  recordsCollected: number
+}
+
+export function DataCollectionSettings() {
+  const [activeTab, setActiveTab] = useState("tasks")
+  const [isAddingTask, setIsAddingTask] = useState(false)
+  const [selectedTaskId, setSelectedTaskId] = useState<string | null>(null)
+
+  // 模拟数据采集任务
+  const [collectionTasks, setCollectionTasks] = useState<CollectionTask[]>([
+    {
+      id: "1",
+      name: "用户基本信息采集",
+      source: "CRM系统",
+      type: "数据库",
+      schedule: "每日 00:00",
+      lastRun: "2023-07-20 00:00",
+      nextRun: "2023-07-21 00:00",
+      status: "active",
+      recordsCollected: 125678,
+    },
+    {
+      id: "2",
+      name: "用户行为数据采集",
+      source: "行为分析平台",
+      type: "API",
+      schedule: "每小时",
+      lastRun: "2023-07-20 15:00",
+      nextRun: "2023-07-20 16:00",
+      status: "active",
+      recordsCollected: 458921,
+    },
+    {
+      id: "3",
+      name: "社交媒体数据采集",
+      source: "MCP SERVER",
+      type: "AI工具",
+      schedule: "每日 02:00",
+      lastRun: "2023-07-20 02:00",
+      nextRun: "2023-07-21 02:00",
+      status: "active",
+      recordsCollected: 87452,
+    },
+    {
+      id: "4",
+      name: "历史交易数据导入",
+      source: "交易系统",
+      type: "文件",
+      schedule: "手动",
+      lastRun: "2023-07-15 10:30",
+      nextRun: null,
+      status: "completed",
+      recordsCollected: 254789,
+    },
+    {
+      id: "5",
+      name: "设备信息采集",
+      source: "设备管理系统",
+      type: "API",
+      schedule: "每日 03:00",
+      lastRun: "2023-07-20 03:00",
+      nextRun: "2023-07-21 03:00",
+      status: "error",
+      recordsCollected: 12547,
+    },
+  ])
+
+  // 模拟数据源
+  const dataSources = [
+    { id: "crm", name: "CRM系统", type: "数据库" },
+    { id: "behavior", name: "行为分析平台", type: "API" },
+    { id: "mcp", name: "MCP SERVER", type: "AI工具" },
+    { id: "transaction", name: "交易系统", type: "文件" },
+    { id: "device", name: "设备管理系统", type: "API" },
+    { id: "social", name: "社交媒体平台", type: "API" },
+    { id: "ecommerce", name: "电商平台", type: "API" },
+  ]
+
+  // 模拟采集类型
+  const collectionTypes = [
+    { id: "full", name: "全量采集", description: "采集所有数据" },
+    { id: "incremental", name: "增量采集", description: "仅采集新增或变更的数据" },
+    { id: "scheduled", name: "定时采集", description: "按照设定的时间计划采集数据" },
+    { id: "event", name: "事件触发采集", description: "在特定事件发生时采集数据" },
+    { id: "manual", name: "手动采集", description: "手动触发数据采集" },
+  ]
+
+  const getStatusBadge = (status: CollectionTask["status"]) => {
+    switch (status) {
+      case "active":
+        return <Badge className="bg-green-100 text-green-800">运行中</Badge>
+      case "paused":
+        return <Badge className="bg-yellow-100 text-yellow-800">已暂停</Badge>
+      case "error":
+        return <Badge className="bg-red-100 text-red-800">错误</Badge>
+      case "completed":
+        return <Badge className="bg-blue-100 text-blue-800">已完成</Badge>
+    }
+  }
+
+  const getSourceIcon = (type: string) => {
+    switch (type) {
+      case "数据库":
+        return <Database className="h-4 w-4 text-blue-500" />
+      case "API":
+        return <Server className="h-4 w-4 text-purple-500" />
+      case "文件":
+        return <FileText className="h-4 w-4 text-green-500" />
+      case "AI工具":
+        return <Settings className="h-4 w-4 text-orange-500" />
+      default:
+        return <Database className="h-4 w-4" />
+    }
+  }
+
+  const addTask = (task: Omit<CollectionTask, "id" | "lastRun" | "recordsCollected">) => {
+    const newTask: CollectionTask = {
+      id: `task-${Date.now()}`,
+      ...task,
+      lastRun: null,
+      recordsCollected: 0,
+    }
+    setCollectionTasks([...collectionTasks, newTask])
+    setIsAddingTask(false)
+  }
+
+  const deleteTask = (id: string) => {
+    setCollectionTasks(collectionTasks.filter((task) => task.id !== id))
+  }
+
+  const toggleTaskStatus = (id: string) => {
+    setCollectionTasks(
+      collectionTasks.map((task) => {
+        if (task.id === id) {
+          return {
+            ...task,
+            status: task.status === "active" ? "paused" : "active",
+          }
+        }
+        return task
+      }),
+    )
+  }
+
+  const selectedTask = selectedTaskId ? collectionTasks.find((task) => task.id === selectedTaskId) : null
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>数据采集设置</CardTitle>
+          <CardDescription>配置和管理数据采集任务</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+            <TabsList>
+              <TabsTrigger value="tasks">采集任务</TabsTrigger>
+              <TabsTrigger value="sources">数据源</TabsTrigger>
+              <TabsTrigger value="settings">采集设置</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="tasks" className="space-y-4">
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-2">
+                  <Badge className="bg-blue-100 text-blue-800">共 {collectionTasks.length} 个任务</Badge>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <HelpCircle className="h-4 w-4" />
+                        </Button>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p className="max-w-xs">
+                          数据采集任务用于从各个数据源采集数据，并将其整合到用户数据资产中台。
+                          您可以设置采集频率、采集方式和数据处理规则。
+                        </p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </div>
+                <Button onClick={() => setIsAddingTask(true)}>
+                  <Plus className="mr-2 h-4 w-4" />
+                  添加采集任务
+                </Button>
+              </div>
+
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>任务名称</TableHead>
+                      <TableHead>数据源</TableHead>
+                      <TableHead>采集频率</TableHead>
+                      <TableHead>上次运行</TableHead>
+                      <TableHead>下次运行</TableHead>
+                      <TableHead>状态</TableHead>
+                      <TableHead>已采集记录</TableHead>
+                      <TableHead className="text-right">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {collectionTasks.map((task) => (
+                      <TableRow key={task.id}>
+                        <TableCell className="font-medium">{task.name}</TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-1">
+                            {getSourceIcon(task.type)}
+                            <span>{task.source}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell>{task.schedule}</TableCell>
+                        <TableCell>{task.lastRun || "从未运行"}</TableCell>
+                        <TableCell>{task.nextRun || "无计划"}</TableCell>
+                        <TableCell>{getStatusBadge(task.status)}</TableCell>
+                        <TableCell>{task.recordsCollected.toLocaleString()}</TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex justify-end space-x-2">
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => toggleTaskStatus(task.id)}
+                              disabled={task.status === "completed"}
+                            >
+                              {task.status === "active" ? (
+                                <Clock className="h-4 w-4 text-yellow-500" />
+                              ) : (
+                                <RefreshCw className="h-4 w-4 text-green-500" />
+                              )}
+                            </Button>
+                            <Button variant="ghost" size="icon" onClick={() => setSelectedTaskId(task.id)}>
+                              <Settings className="h-4 w-4" />
+                            </Button>
+                            <Button variant="ghost" size="icon" onClick={() => deleteTask(task.id)}>
+                              <Trash2 className="h-4 w-4 text-red-500" />
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="sources" className="space-y-4">
+              <div className="flex justify-between items-center">
+                <h3 className="text-lg font-medium">可用数据源</h3>
+                <Button variant="outline">添加数据源</Button>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {dataSources.map((source) => (
+                  <Card key={source.id} className="border shadow-sm">
+                    <CardContent className="p-4">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          {getSourceIcon(source.type)}
+                          <div>
+                            <h4 className="font-medium">{source.name}</h4>
+                            <p className="text-sm text-muted-foreground">{source.type}</p>
+                          </div>
+                        </div>
+                        <Button variant="ghost" size="icon">
+                          <Settings className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+
+              <Card className="mt-4">
+                <CardHeader>
+                  <CardTitle>MCP SERVER 配置</CardTitle>
+                  <CardDescription>配置MCP SERVER AI工具的采集参数</CardDescription>
+                </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="mcp-server-url">服务器地址</Label>
+                      <Input id="mcp-server-url" defaultValue="https://mcp.example.com/api" />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="mcp-api-key">API密钥</Label>
+                      <Input id="mcp-api-key" type="password" defaultValue="••••••••••••••••" />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="mcp-model">AI模型选择</Label>
+                    <Select defaultValue="gpt-4">
+                      <SelectTrigger id="mcp-model">
+                        <SelectValue placeholder="选择AI模型" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="gpt-4">GPT-4</SelectItem>
+                        <SelectItem value="gpt-3.5-turbo">GPT-3.5 Turbo</SelectItem>
+                        <SelectItem value="claude-2">Claude 2</SelectItem>
+                        <SelectItem value="llama-2">Llama 2</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="mcp-auto-process">自动处理采集数据</Label>
+                      <Switch id="mcp-auto-process" defaultChecked />
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      启用后，系统将自动使用AI处理采集的数据，提取关键信息并生成标签
+                    </p>
+                  </div>
+
+                  <Separator />
+
+                  <div className="space-y-2">
+                    <Label>采集数据类型</Label>
+                    <div className="grid grid-cols-2 gap-2">
+                      <div className="flex items-center space-x-2">
+                        <Switch id="collect-profile" defaultChecked />
+                        <Label htmlFor="collect-profile">用户资料</Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <Switch id="collect-posts" defaultChecked />
+                        <Label htmlFor="collect-posts">发布内容</Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <Switch id="collect-interactions" defaultChecked />
+                        <Label htmlFor="collect-interactions">互动数据</Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <Switch id="collect-followers" defaultChecked />
+                        <Label htmlFor="collect-followers">关注者数据</Label>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button>保存MCP配置</Button>
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+
+            <TabsContent value="settings" className="space-y-4">
+              <Card>
+                <CardHeader>
+                  <CardTitle>全局采集设置</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="enable-collection">启用数据采集</Label>
+                      <Switch id="enable-collection" defaultChecked />
+                    </div>
+                    <p className="text-sm text-muted-foreground">关闭后，所有数据采集任务将暂停执行</p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="collection-threads">并发采集线程数</Label>
+                    <Select defaultValue="5">
+                      <SelectTrigger id="collection-threads">
+                        <SelectValue placeholder="选择并发线程数" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="1">1</SelectItem>
+                        <SelectItem value="3">3</SelectItem>
+                        <SelectItem value="5">5</SelectItem>
+                        <SelectItem value="10">10</SelectItem>
+                        <SelectItem value="20">20</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <p className="text-sm text-muted-foreground">
+                      设置同时执行的数据采集任务数量，数值越大系统负载越高
+                    </p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="retry-attempts">失败重试次数</Label>
+                    <Select defaultValue="3">
+                      <SelectTrigger id="retry-attempts">
+                        <SelectValue placeholder="选择重试次数" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="0">不重试</SelectItem>
+                        <SelectItem value="1">1次</SelectItem>
+                        <SelectItem value="3">3次</SelectItem>
+                        <SelectItem value="5">5次</SelectItem>
+                        <SelectItem value="10">10次</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="retry-delay">重试间隔（秒）</Label>
+                    <Input id="retry-delay" type="number" defaultValue="60" />
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="data-deduplication">数据去重</Label>
+                      <Switch id="data-deduplication" defaultChecked />
+                    </div>
+                    <p className="text-sm text-muted-foreground">启用后，系统将自动检测并去除重复数据</p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="data-validation">数据验证</Label>
+                      <Switch id="data-validation" defaultChecked />
+                    </div>
+                    <p className="text-sm text-muted-foreground">启用后，系统将验证采集数据的完整性和有效性</p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="notification">采集任务通知</Label>
+                      <Switch id="notification" defaultChecked />
+                    </div>
+                    <p className="text-sm text-muted-foreground">启用后，系统将在采集任务完成或出错时发送通知</p>
+                  </div>
+
+                  <div className="flex justify-end">
+                    <Button>保存设置</Button>
+                  </div>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {/* 添加采集任务对话框 */}
+      <Dialog open={isAddingTask} onOpenChange={setIsAddingTask}>
+        <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="task-name" className="text-right">
+                任务名称
+              </Label>
+              <Input id="task-name" className="col-span-3" placeholder="例如：用户基本信息采集" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="data-source" className="text-right">
+                数据源
+              </Label>
+              <Select>
+                <SelectTrigger id="data-source" className="col-span-3">
+                  <SelectValue placeholder="选择数据源" />
+                </SelectTrigger>
+                <SelectContent>
+                  {dataSources.map((source) => (
+                    <SelectItem key={source.id} value={source.id}>
+                      {source.name} ({source.type})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="collection-type" className="text-right">
+                采集类型
+              </Label>
+              <Select>
+                <SelectTrigger id="collection-type" className="col-span-3">
+                  <SelectValue placeholder="选择采集类型" />
+                </SelectTrigger>
+                <SelectContent>
+                  {collectionTypes.map((type) => (
+                    <SelectItem key={type.id} value={type.id}>
+                      {type.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="schedule" className="text-right">
+                采集频率
+              </Label>
+              <Select>
+                <SelectTrigger id="schedule" className="col-span-3">
+                  <SelectValue placeholder="选择采集频率" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="hourly">每小时</SelectItem>
+                  <SelectItem value="daily">每日</SelectItem>
+                  <SelectItem value="weekly">每周</SelectItem>
+                  <SelectItem value="monthly">每月</SelectItem>
+                  <SelectItem value="manual">手动</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="time" className="text-right">
+                执行时间
+              </Label>
+              <Input id="time" type="time" className="col-span-3" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <div className="text-right">
+                <Label htmlFor="auto-process">自动处理</Label>
+              </div>
+              <div className="flex items-center space-x-2 col-span-3">
+                <Switch id="auto-process" />
+                <Label htmlFor="auto-process">采集后自动处理数据</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsAddingTask(false)}>
+              取消
+            </Button>
+            <Button
+              onClick={() =>
+                addTask({
+                  name: "新建采集任务",
+                  source: "CRM系统",
+                  type: "数据库",
+                  schedule: "每日 00:00",
+                  nextRun: "2023-07-21 00:00",
+                  status: "active",
+                })
+              }
+            >
+              创建任务
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 任务详情对话框 */}
+      <Dialog open={!!selectedTaskId} onOpenChange={(open) => !open && setSelectedTaskId(null)}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>任务详情</DialogTitle>
+            <DialogDescription>查看和编辑采集任务详情</DialogDescription>
+          </DialogHeader>
+          {selectedTask && (
+            <div className="space-y-4 py-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label className="text-sm text-muted-foreground">任务名称</Label>
+                  <p className="font-medium">{selectedTask.name}</p>
+                </div>
+                <div>
+                  <Label className="text-sm text-muted-foreground">数据源</Label>
+                  <p className="font-medium">{selectedTask.source}</p>
+                </div>
+                <div>
+                  <Label className="text-sm text-muted-foreground">采集频率</Label>
+                  <p className="font-medium">{selectedTask.schedule}</p>
+                </div>
+                <div>
+                  <Label className="text-sm text-muted-foreground">状态</Label>
+                  <div>{getStatusBadge(selectedTask.status)}</div>
+                </div>
+                <div>
+                  <Label className="text-sm text-muted-foreground">上次运行</Label>
+                  <p className="font-medium">{selectedTask.lastRun || "从未运行"}</p>
+                </div>
+                <div>
+                  <Label className="text-sm text-muted-foreground">下次运行</Label>
+                  <p className="font-medium">{selectedTask.nextRun || "无计划"}</p>
+                </div>
+                <div>
+                  <Label className="text-sm text-muted-foreground">已采集记录</Label>
+                  <p className="font-medium">{selectedTask.recordsCollected.toLocaleString()}</p>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-2">
+                <Label>采集字段</Label>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>字段名</TableHead>
+                      <TableHead>数据类型</TableHead>
+                      <TableHead>是否采集</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell>用户ID</TableCell>
+                      <TableCell>字符串</TableCell>
+                      <TableCell>
+                        <Switch defaultChecked />
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>手机号</TableCell>
+                      <TableCell>字符串</TableCell>
+                      <TableCell>
+                        <Switch defaultChecked />
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>身份证号</TableCell>
+                      <TableCell>字符串</TableCell>
+                      <TableCell>
+                        <Switch defaultChecked />
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>设备IMEI</TableCell>
+                      <TableCell>字符串</TableCell>
+                      <TableCell>
+                        <Switch defaultChecked />
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell>注册时间</TableCell>
+                      <TableCell>日期时间</TableCell>
+                      <TableCell>
+                        <Switch defaultChecked />
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </div>
+
+              <div className="space-y-2">
+                <Label>数据处理规则</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  <div className="flex items-center space-x-2">
+                    <Switch defaultChecked />
+                    <Label>数据去重</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Switch defaultChecked />
+                    <Label>数据验证</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Switch defaultChecked />
+                    <Label>数据脱敏</Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Switch defaultChecked />
+                    <Label>数据转换</Label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setSelectedTaskId(null)}>
+              关闭
+            </Button>
+            <Button variant="outline" onClick={() => {}}>
+              立即执行
+            </Button>
+            <Button onClick={() => setSelectedTaskId(null)}>保存更改</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/components/data-integration/data-correlation-analysis.tsx b/components/data-integration/data-correlation-analysis.tsx
new file mode 100644
index 0000000..6fb1bb3
--- /dev/null
+++ b/components/data-integration/data-correlation-analysis.tsx
@@ -0,0 +1,950 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Search, Filter, Download, RefreshCw, Play, ArrowRight, Settings } from "lucide-react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+// 模拟图表组件
+const NetworkGraph = ({ data, title }: { data: any; title: string }) => (
+  <div className="w-full h-96 bg-muted/30 rounded-md flex items-center justify-center">
+    <div className="text-center">
+      <p className="text-muted-foreground">{title}</p>
+      <p className="text-sm text-muted-foreground">关联网络图将在这里显示</p>
+    </div>
+  </div>
+)
+
+const ScatterPlot = ({ data, title }: { data: any; title: string }) => (
+  <div className="w-full h-64 bg-muted/30 rounded-md flex items-center justify-center">
+    <div className="text-center">
+      <p className="text-muted-foreground">{title}</p>
+      <p className="text-sm text-muted-foreground">散点图将在这里显示</p>
+    </div>
+  </div>
+)
+
+const HeatMap = ({ data, title }: { data: any; title: string }) => (
+  <div className="w-full h-64 bg-muted/30 rounded-md flex items-center justify-center">
+    <div className="text-center">
+      <p className="text-muted-foreground">{title}</p>
+      <p className="text-sm text-muted-foreground">热力图将在这里显示</p>
+    </div>
+  </div>
+)
+
+interface CorrelationResult {
+  id: string
+  field1: string
+  field2: string
+  correlationCoefficient: number
+  significance: number
+  sampleSize: number
+  createdAt: string
+  dataSource: string
+}
+
+interface UserSegmentCorrelation {
+  id: string
+  segment1: string
+  segment2: string
+  overlapPercentage: number
+  uniqueUsers1: number
+  uniqueUsers2: number
+  commonUsers: number
+}
+
+export function DataCorrelationAnalysis() {
+  const [activeTab, setActiveTab] = useState("field-correlation")
+  const [isCreatingAnalysis, setIsCreatingAnalysis] = useState(false)
+  const [selectedFields, setSelectedFields] = useState<string[]>([])
+  const [selectedDataSources, setSelectedDataSources] = useState<string[]>([])
+
+  // 模拟字段列表
+  const fields = [
+    { id: "userId", name: "用户ID", type: "string", dataSource: "所有数据源" },
+    { id: "phoneNumber", name: "手机号", type: "string", dataSource: "所有数据源" },
+    { id: "identityNumber", name: "身份证号", type: "string", dataSource: "所有数据源" },
+    { id: "deviceImei", name: "IMEI设备号", type: "string", dataSource: "所有数据源" },
+    { id: "registrationDate", name: "注册时间", type: "datetime", dataSource: "用户数据库" },
+    { id: "lastActiveTime", name: "最后活跃时间", type: "datetime", dataSource: "行为分析平台" },
+    { id: "age", name: "年龄", type: "number", dataSource: "用户数据库" },
+    { id: "gender", name: "性别", type: "string", dataSource: "用户数据库" },
+    { id: "location", name: "地区", type: "string", dataSource: "用户数据库" },
+    { id: "totalSpent", name: "消费总额", type: "number", dataSource: "交易系统" },
+    { id: "purchaseFrequency", name: "购买频率", type: "number", dataSource: "交易系统" },
+    { id: "averageOrderValue", name: "平均订单金额", type: "number", dataSource: "交易系统" },
+    { id: "preferredCategory", name: "偏好类别", type: "string", dataSource: "交易系统" },
+    { id: "loginFrequency", name: "登录频率", type: "number", dataSource: "行为分析平台" },
+    { id: "timeSpentPerSession", name: "单次会话时长", type: "number", dataSource: "行为分析平台" },
+    { id: "clickThroughRate", name: "点击率", type: "number", dataSource: "行为分析平台" },
+    { id: "conversionRate", name: "转化率", type: "number", dataSource: "行为分析平台" },
+    { id: "rfmScore", name: "RFM评分", type: "number", dataSource: "用户价值模型" },
+    { id: "lifetimeValue", name: "生命周期价值", type: "number", dataSource: "用户价值模型" },
+    { id: "churnRisk", name: "流失风险", type: "number", dataSource: "用户价值模型" },
+  ]
+
+  // 模拟数据源
+  const dataSources = [
+    { id: "all", name: "所有数据源" },
+    { id: "user-db", name: "用户数据库" },
+    { id: "transaction", name: "交易系统" },
+    { id: "behavior", name: "行为分析平台" },
+    { id: "user-value", name: "用户价值模型" },
+  ]
+
+  // 模拟用户分群
+  const userSegments = [
+    { id: "high-value", name: "高价值用户", count: 12500 },
+    { id: "new-users", name: "新注册用户", count: 45600 },
+    { id: "inactive", name: "非活跃用户", count: 28900 },
+    { id: "potential", name: "潜在高转化用户", count: 18700 },
+    { id: "loyal", name: "忠诚用户", count: 9800 },
+    { id: "risk", name: "流失风险用户", count: 15400 },
+  ]
+
+  // 模拟相关性分析结果
+  const correlationResults: CorrelationResult[] = [
+    {
+      id: "corr-1",
+      field1: "年龄",
+      field2: "消费总额",
+      correlationCoefficient: 0.72,
+      significance: 0.001,
+      sampleSize: 45678,
+      createdAt: "2023-07-20 15:30",
+      dataSource: "用户数据库 & 交易系统",
+    },
+    {
+      id: "corr-2",
+      field1: "登录频率",
+      field2: "购买频率",
+      correlationCoefficient: 0.85,
+      significance: 0.001,
+      sampleSize: 38945,
+      createdAt: "2023-07-20 15:30",
+      dataSource: "行为分析平台 & 交易系统",
+    },
+    {
+      id: "corr-3",
+      field1: "单次会话时长",
+      field2: "转化率",
+      correlationCoefficient: 0.65,
+      significance: 0.01,
+      sampleSize: 42156,
+      createdAt: "2023-07-20 15:30",
+      dataSource: "行为分析平台",
+    },
+    {
+      id: "corr-4",
+      field1: "地区",
+      field2: "偏好类别",
+      correlationCoefficient: 0.58,
+      significance: 0.05,
+      sampleSize: 45678,
+      createdAt: "2023-07-20 15:30",
+      dataSource: "用户数据库 & 交易系统",
+    },
+    {
+      id: "corr-5",
+      field1: "RFM评分",
+      field2: "生命周期价值",
+      correlationCoefficient: 0.92,
+      significance: 0.001,
+      sampleSize: 45678,
+      createdAt: "2023-07-20 15:30",
+      dataSource: "用户价值模型",
+    },
+  ]
+
+  // 模拟用户分群相关性
+  const segmentCorrelations: UserSegmentCorrelation[] = [
+    {
+      id: "seg-corr-1",
+      segment1: "高价值用户",
+      segment2: "忠诚用户",
+      overlapPercentage: 68.5,
+      uniqueUsers1: 12500,
+      uniqueUsers2: 9800,
+      commonUsers: 6713,
+    },
+    {
+      id: "seg-corr-2",
+      segment1: "新注册用户",
+      segment2: "潜在高转化用户",
+      overlapPercentage: 12.3,
+      uniqueUsers1: 45600,
+      uniqueUsers2: 18700,
+      commonUsers: 5609,
+    },
+    {
+      id: "seg-corr-3",
+      segment1: "非活跃用户",
+      segment2: "流失风险用户",
+      overlapPercentage: 75.2,
+      uniqueUsers1: 28900,
+      uniqueUsers2: 15400,
+      commonUsers: 11581,
+    },
+    {
+      id: "seg-corr-4",
+      segment1: "高价值用户",
+      segment2: "潜在高转化用户",
+      overlapPercentage: 8.7,
+      uniqueUsers1: 12500,
+      uniqueUsers2: 18700,
+      commonUsers: 1088,
+    },
+    {
+      id: "seg-corr-5",
+      segment1: "忠诚用户",
+      segment2: "流失风险用户",
+      overlapPercentage: 2.1,
+      uniqueUsers1: 9800,
+      uniqueUsers2: 15400,
+      commonUsers: 206,
+    },
+  ]
+
+  const getCorrelationStrength = (coefficient: number) => {
+    const absCoefficient = Math.abs(coefficient)
+    if (absCoefficient >= 0.8) return "强"
+    if (absCoefficient >= 0.5) return "中"
+    return "弱"
+  }
+
+  const getCorrelationBadge = (coefficient: number) => {
+    const absCoefficient = Math.abs(coefficient)
+    if (absCoefficient >= 0.8) {
+      return <Badge className="bg-green-100 text-green-800">强相关</Badge>
+    }
+    if (absCoefficient >= 0.5) {
+      return <Badge className="bg-yellow-100 text-yellow-800">中等相关</Badge>
+    }
+    return <Badge className="bg-gray-100 text-gray-800">弱相关</Badge>
+  }
+
+  const getSignificanceBadge = (significance: number) => {
+    if (significance <= 0.001) {
+      return <Badge className="bg-green-100 text-green-800">高度显著 (p≤0.001)</Badge>
+    }
+    if (significance <= 0.01) {
+      return <Badge className="bg-green-100 text-green-800">显著 (p≤0.01)</Badge>
+    }
+    if (significance <= 0.05) {
+      return <Badge className="bg-yellow-100 text-yellow-800">边际显著 (p≤0.05)</Badge>
+    }
+    return <Badge className="bg-red-100 text-red-800">不显著 (p>0.05)</Badge>
+  }
+
+  const toggleFieldSelection = (fieldId: string) => {
+    if (selectedFields.includes(fieldId)) {
+      setSelectedFields(selectedFields.filter((id) => id !== fieldId))
+    } else {
+      setSelectedFields([...selectedFields, fieldId])
+    }
+  }
+
+  const toggleDataSourceSelection = (sourceId: string) => {
+    if (selectedDataSources.includes(sourceId)) {
+      setSelectedDataSources(selectedDataSources.filter((id) => id !== sourceId))
+    } else {
+      setSelectedDataSources([...selectedDataSources, sourceId])
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-bold">数据关联分析</h2>
+        <div className="flex items-center gap-2">
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" &gt;
+            导出分析结果
+          </Button>
+          <Button onClick={() => setIsCreatingAnalysis(true)}>
+            <Play className="mr-2 h-4 w-4" &gt;
+            创建新分析
+          </Button>
+        </div>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="field-correlation">字段相关性</TabsTrigger>
+          <TabsTrigger value="segment-correlation">分群相关性</TabsTrigger>
+          <TabsTrigger value="user-network">用户关联网络</TabsTrigger>
+          <TabsTrigger value="path-analysis">用户路径分析</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="field-correlation" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <div className="flex justify-between items-center">
+                <CardTitle>字段相关性分析</CardTitle>
+                <div className="flex items-center gap-2">
+                  <div className="relative">
+                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                    <Input type="text" placeholder="搜索字段..." className="pl-8 w-[200px]" />
+                  </div>
+                  <Select defaultValue="all">
+                    <SelectTrigger className="w-[150px]">
+                      <Filter className="mr-2 h-4 w-4" />
+                      <SelectValue placeholder="相关性强度" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">所有强度</SelectItem>
+                      <SelectItem value="strong">强相关</SelectItem>
+                      <SelectItem value="medium">中等相关</SelectItem>
+                      <SelectItem value="weak">弱相关</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>字段1</TableHead>
+                      <TableHead>字段2</TableHead>
+                      <TableHead>相关系数</TableHead>
+                      <TableHead>相关强度</TableHead>
+                      <TableHead>显著性</TableHead>
+                      <TableHead>样本量</TableHead>
+                      <TableHead>数据源</TableHead>
+                      <TableHead className="text-right">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {correlationResults.map((result) => (
+                      <TableRow key={result.id}>
+                        <TableCell className="font-medium">{result.field1}</TableCell>
+                        <TableCell className="font-medium">{result.field2}</TableCell>
+                        <TableCell>{result.correlationCoefficient.toFixed(2)}</TableCell>
+                        <TableCell>{getCorrelationBadge(result.correlationCoefficient)}</TableCell>
+                        <TableCell>{getSignificanceBadge(result.significance)}</TableCell>
+                        <TableCell>{result.sampleSize.toLocaleString()}</TableCell>
+                        <TableCell>{result.dataSource}</TableCell>
+                        <TableCell className="text-right">
+                          <Button variant="ghost" size="sm">
+                            查看详情
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>相关性热力图</CardTitle>
+                <CardDescription>字段间相关性强度可视化</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <HeatMap data={{}} title="字段相关性热力图" />
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>散点图分析</CardTitle>
+                <CardDescription>选择两个字段查看其相关性散点图</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex gap-4">
+                    <div className="flex-1">
+                      <Label>X轴字段</Label>
+                      <Select defaultValue="age">
+                        <SelectTrigger>
+                          <SelectValue placeholder="选择字段" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {fields
+                            .filter((field) => field.type === "number")
+                            .map((field) => (
+                              <SelectItem key={field.id} value={field.id}>
+                                {field.name}
+                              </SelectItem>
+                            ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="flex-1">
+                      <Label>Y轴字段</Label>
+                      <Select defaultValue="totalSpent">
+                        <SelectTrigger>
+                          <SelectValue placeholder="选择字段" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {fields
+                            .filter((field) => field.type === "number")
+                            .map((field) => (
+                              <SelectItem key={field.id} value={field.id}>
+                                {field.name}
+                              </SelectItem>
+                            ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <ScatterPlot data={{}} title="年龄 vs 消费总额" />
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="segment-correlation" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <div className="flex justify-between items-center">
+                <CardTitle>用户分群相关性分析</CardTitle>
+                <Button>创建新分析</Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>分群1</TableHead>
+                      <TableHead>分群2</TableHead>
+                      <TableHead>重叠率</TableHead>
+                      <TableHead>分群1用户数</TableHead>
+                      <TableHead>分群2用户数</TableHead>
+                      <TableHead>共同用户数</TableHead>
+                      <TableHead className="text-right">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {segmentCorrelations.map((correlation) => (
+                      <TableRow key={correlation.id}>
+                        <TableCell className="font-medium">{correlation.segment1}</TableCell>
+                        <TableCell className="font-medium">{correlation.segment2}</TableCell>
+                        <TableCell>
+                          <div className="flex items-center gap-2">
+                            <span>{correlation.overlapPercentage.toFixed(1)}%</span>
+                            {correlation.overlapPercentage > 50 ? (
+                              <Badge className="bg-green-100 text-green-800">高重叠</Badge>
+                            ) : correlation.overlapPercentage > 20 ? (
+                              <Badge className="bg-yellow-100 text-yellow-800">中等重叠</Badge>
+                            ) : (
+                              <Badge className="bg-gray-100 text-gray-800">低重叠</Badge>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell>{correlation.uniqueUsers1.toLocaleString()}</TableCell>
+                        <TableCell>{correlation.uniqueUsers2.toLocaleString()}</TableCell>
+                        <TableCell>{correlation.commonUsers.toLocaleString()}</TableCell>
+                        <TableCell className="text-right">
+                          <Button variant="ghost" size="sm">
+                            查看详情
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>分群重叠分析</CardTitle>
+              <CardDescription>选择两个用户分群查看其重叠情况</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="flex gap-4">
+                  <div className="flex-1">
+                    <Label>分群1</Label>
+                    <Select defaultValue="high-value">
+                      <SelectTrigger>
+                        <SelectValue placeholder="选择分群" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {userSegments.map((segment) => (
+                          <SelectItem key={segment.id} value={segment.id}>
+                            {segment.name} ({segment.count.toLocaleString()})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="flex-1">
+                    <Label>分群2</Label>
+                    <Select defaultValue="loyal">
+                      <SelectTrigger>
+                        <SelectValue placeholder="选择分群" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {userSegments.map((segment) => (
+                          <SelectItem key={segment.id} value={segment.id}>
+                            {segment.name} ({segment.count.toLocaleString()})
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+
+                <div className="p-6 border rounded-md">
+                  <div className="flex justify-center items-center">
+                    <div className="w-32 h-32 rounded-full bg-blue-100 flex items-center justify-center text-blue-800 font-bold text-lg">
+                      高价值用户
+                    </div>
+                    <div className="w-24 h-24 bg-blue-200 mx-4 flex items-center justify-center text-blue-800 font-bold">
+                      重叠
+                      <br />
+                      68.5%
+                    </div>
+                    <div className="w-32 h-32 rounded-full bg-green-100 flex items-center justify-center text-green-800 font-bold text-lg">
+                      忠诚用户
+                    </div>
+                  </div>
+                  <div className="mt-4 text-center">
+                    <p className="text-sm text-muted-foreground">
+                      共同用户: 6,713人 | 高价值用户: 12,500人 | 忠诚用户: 9,800人
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="user-network" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>用户关联网络分析</CardTitle>
+              <CardDescription>基于多维度标识符的用户关联网络</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="flex justify-between items-center">
+                  <div className="flex gap-2">
+                    <Select defaultValue="all">
+                      <SelectTrigger className="w-[150px]">
+                        <SelectValue placeholder="关联维度" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">所有维度</SelectItem>
+                        <SelectItem value="id">用户ID</SelectItem>
+                        <SelectItem value="phone">手机号</SelectItem>
+                        <SelectItem value="identity">身份证号</SelectItem>
+                        <SelectItem value="imei">IMEI设备号</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Select defaultValue="high-value">
+                      <SelectTrigger className="w-[150px]">
+                        <SelectValue placeholder="用户分群" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">所有用户</SelectItem>
+                        {userSegments.map((segment) => (
+                          <SelectItem key={segment.id} value={segment.id}>
+                            {segment.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="flex gap-2">
+                    <Button variant="outline" size="sm">
+                      <Settings className="mr-2 h-4 w-4" />
+                      网络设置
+                    </Button>
+                    <Button variant="outline" size="sm">
+                      <RefreshCw className="mr-2 h-4 w-4" />
+                      刷新
+                    </Button>
+                  </div>
+                </div>
+
+                <NetworkGraph data={{}} title="用户关联网络图" />
+
+                <div className="flex justify-between items-center">
+                  <div>
+                    <h3 className="text-sm font-medium">网络统计</h3>
+                    <p className="text-xs text-muted-foreground">节点: 1,245 | 连接: 3,567 | 平均连接度: 2.87</p>
+                  </div>
+                  <div className="flex gap-2">
+                    <Badge className="bg-blue-100 text-blue-800">用户ID</Badge>
+                    <Badge className="bg-green-100 text-green-800">手机号</Badge>
+                    <Badge className="bg-purple-100 text-purple-800">身份证号</Badge>
+                    <Badge className="bg-orange-100 text-orange-800">IMEI设备号</Badge>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>关联群组分析</CardTitle>
+              <CardDescription>自动检测的用户关联群组</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="rounded-md border">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>群组ID</TableHead>
+                        <TableHead>用户数</TableHead>
+                        <TableHead>关联强度</TableHead>
+                        <TableHead>主要关联维度</TableHead>
+                        <TableHead>检测时间</TableHead>
+                        <TableHead className="text-right">操作</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      <TableRow>
+                        <TableCell className="font-medium">群组-001</TableCell>
+                        <TableCell>125</TableCell>
+                        <TableCell>
+                          <Badge className="bg-green-100 text-green-800">强</Badge>
+                        </TableCell>
+                        <TableCell>手机号, IMEI设备号</TableCell>
+                        <TableCell>2023-07-20 15:30</TableCell>
+                        <TableCell className="text-right">
+                          <Button variant="ghost" size="sm">
+                            查看详情
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell className="font-medium">群组-002</TableCell>
+                        <TableCell>87</TableCell>
+                        <TableCell>
+                          <Badge className="bg-green-100 text-green-800">强</Badge>
+                        </TableCell>
+                        <TableCell>身份证号, 用户ID</TableCell>
+                        <TableCell>2023-07-20 15:30</TableCell>
+                        <TableCell className="text-right">
+                          <Button variant="ghost" size="sm">
+                            查看详情
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell className="font-medium">群组-003</TableCell>
+                        <TableCell>215</TableCell>
+                        <TableCell>
+                          <Badge className="bg-yellow-100 text-yellow-800">中</Badge>
+                        </TableCell>
+                        <TableCell>手机号, 用户ID</TableCell>
+                        <TableCell>2023-07-20 15:30</TableCell>
+                        <TableCell className="text-right">
+                          <Button variant="ghost" size="sm">
+                            查看详情
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell className="font-medium">群组-004</TableCell>
+                        <TableCell>56</TableCell>
+                        <TableCell>
+                          <Badge className="bg-gray-100 text-gray-800">弱</Badge>
+                        </TableCell>
+                        <TableCell>IMEI设备号</TableCell>
+                        <TableCell>2023-07-20 15:30</TableCell>
+                        <TableCell className="text-right">
+                          <Button variant="ghost" size="sm">
+                            查看详情
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    </TableBody>
+                  </Table>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="path-analysis" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>用户路径分析</CardTitle>
+              <CardDescription>分析用户在不同系统和渠道间的行为路径</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="flex justify-between items-center">
+                  <div className="flex gap-2">
+                    <Select defaultValue="registration-to-purchase">
+                      <SelectTrigger className="w-[200px]">
+                        <SelectValue placeholder="选择路径类型" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="registration-to-purchase">注册到首次购买</SelectItem>
+                        <SelectItem value="browse-to-purchase">浏览到购买</SelectItem>
+                        <SelectItem value="multi-purchase">多次购买路径</SelectItem>
+                        <SelectItem value="churn-path">用户流失路径</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Select defaultValue="all">
+                      <SelectTrigger className="w-[150px]">
+                        <SelectValue placeholder="用户分群" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="all">所有用户</SelectItem>
+                        {userSegments.map((segment) => (
+                          <SelectItem key={segment.id} value={segment.id}>
+                            {segment.name}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <Button variant="outline">
+                    <RefreshCw className="mr-2 h-4 w-4" />
+                    刷新分析
+                  </Button>
+                </div>
+
+                <div className="p-4 border rounded-md">
+                  <div className="flex justify-center items-center">
+                    <div className="flex flex-col items-center">
+                      <div className="w-32 h-12 bg-blue-100 rounded-md flex items-center justify-center text-blue-800 font-medium">
+                        注册
+                      </div>
+                      <div className="text-xs text-muted-foreground mt-1">100%</div>
+                    </div>
+                    <div className="flex flex-col items-center mx-2">
+                      <ArrowRight className="h-6 w-6 text-muted-foreground" />
+                      <div className="text-xs text-muted-foreground">85%</div>
+                    </div>
+                    <div className="flex flex-col items-center">
+                      <div className="w-32 h-12 bg-blue-100 rounded-md flex items-center justify-center text-blue-800 font-medium">
+                        浏览产品
+                      </div>
+                      <div className="text-xs text-muted-foreground mt-1">85%</div>
+                    </div>
+                    <div className="flex flex-col items-center mx-2">
+                      <ArrowRight className="h-6 w-6 text-muted-foreground" />
+                      <div className="text-xs text-muted-foreground">65%</div>
+                    </div>
+                    <div className="flex flex-col items-center">
+                      <div className="w-32 h-12 bg-blue-100 rounded-md flex items-center justify-center text-blue-800 font-medium">
+                        加入购物车
+                      </div>
+                      <div className="text-xs text-muted-foreground mt-1">55%</div>
+                    </div>
+                    <div className="flex flex-col items-center mx-2">
+                      <ArrowRight className="h-6 w-6 text-muted-foreground" />
+                      <div className="text-xs text-muted-foreground">40%</div>
+                    </div>
+                    <div className="flex flex-col items-center">
+                      <div className="w-32 h-12 bg-green-100 rounded-md flex items-center justify-center text-green-800 font-medium">
+                        完成购买
+                      </div>
+                      <div className="text-xs text-muted-foreground mt-1">22%</div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <h3 className="text-sm font-medium mb-2">路径转化率</h3>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">注册到浏览</span>
+                        <span className="text-sm">85%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "85%" }}></div>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">浏览到加购</span>
+                        <span className="text-sm">65%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "65%" }}></div>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">加购到购买</span>
+                        <span className="text-sm">40%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "40%" }}></div>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">总体转化率</span>
+                        <span className="text-sm">22%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "22%" }}></div>
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <h3 className="text-sm font-medium mb-2">路径流失点</h3>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">注册后未浏览</span>
+                        <span className="text-sm">15%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-red-600 h-1.5 rounded-full" style={{ width: "15%" }}></div>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">浏览后未加购</span>
+                        <span className="text-sm">35%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-red-600 h-1.5 rounded-full" style={{ width: "35%" }}></div>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">加购后未购买</span>
+                        <span className="text-sm">60%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-red-600 h-1.5 rounded-full" style={{ width: "60%" }}></div>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">总体流失率</span>
+                        <span className="text-sm">78%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-red-600 h-1.5 rounded-full" style={{ width: "78%" }}></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      {/* 创建分析对话框 */}
+      <Dialog open={isCreatingAnalysis} onOpenChange={setIsCreatingAnalysis}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>创建新的相关性分析</DialogTitle>
+            <DialogDescription>选择要分析的数据字段和数据源</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label>选择数据源</Label>
+              <div className="grid grid-cols-2 gap-2">
+                {dataSources.map((source) => (
+                  <div key={source.id} className="flex items-center space-x-2">
+                    <Checkbox
+                      id={`source-${source.id}`}
+                      checked={selectedDataSources.includes(source.id)}
+                      onCheckedChange={() => toggleDataSourceSelection(source.id)}
+                    />
+                    <Label htmlFor={`source-${source.id}`}>{source.name}</Label>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <Separator />
+
+            <div className="space-y-2">
+              <Label>选择要分析的字段</Label>
+              <div className="relative">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input type="text" placeholder="搜索字段..." className="pl-8" />
+              </div>
+
+              <div className="h-60 overflow-y-auto border rounded-md p-2">
+                {fields.map((field) => (
+                  <div key={field.id} className="flex items-center space-x-2 py-1">
+                    <Checkbox
+                      id={`field-${field.id}`}
+                      checked={selectedFields.includes(field.id)}
+                      onCheckedChange={() => toggleFieldSelection(field.id)}
+                    />
+                    <Label htmlFor={`field-${field.id}`} className="flex-1">
+                      {field.name}
+                    </Label>
+                    <span className="text-xs text-muted-foreground">{field.type}</span>
+                    <Badge variant="outline">{field.dataSource}</Badge>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label>分析设置</Label>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="correlation-method">相关性方法</Label>
+                  <Select defaultValue="pearson">
+                    <SelectTrigger id="correlation-method">
+                      <SelectValue placeholder="选择方法" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="pearson">Pearson相关系数</SelectItem>
+                      <SelectItem value="spearman">Spearman等级相关</SelectItem>
+                      <SelectItem value="kendall">Kendall's Tau</SelectItem>
+                      <SelectItem value="chi-square">卡方检验</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="sample-size">样本大小</Label>
+                  <Select defaultValue="all">
+                    <SelectTrigger id="sample-size">
+                      <SelectValue placeholder="选择样本大小" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">全部数据</SelectItem>
+                      <SelectItem value="10000">10,000</SelectItem>
+                      <SelectItem value="50000">50,000</SelectItem>
+                      <SelectItem value="100000">100,000</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center space-x-2">
+                <Checkbox id="save-result" defaultChecked />
+                <Label htmlFor="save-result">保存分析结果</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsCreatingAnalysis(false)}>
+              取消
+            </Button>
+            <Button onClick={() => setIsCreatingAnalysis(false)}>
+              <Play className="mr-2 h-4 w-4" />
+              开始分析
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/components/data-integration/data-dashboard.tsx b/components/data-integration/data-dashboard.tsx
new file mode 100644
index 0000000..9a86061
--- /dev/null
+++ b/components/data-integration/data-dashboard.tsx
@@ -0,0 +1,449 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Badge } from "@/components/ui/badge"
+import { ArrowUp, ArrowDown, Download, RefreshCw, Calendar } from "lucide-react"
+import { getGrowthClass } from "@/lib/utils"
+
+// 模拟图表组件
+const LineChart = ({ data, title }: { data: any; title: string }) => (
+  <div className="w-full h-64 bg-muted/30 rounded-md flex items-center justify-center">
+    <div className="text-center">
+      <p className="text-muted-foreground">{title}</p>
+      <p className="text-sm text-muted-foreground">图表组件将在这里显示</p>
+    </div>
+  </div>
+)
+
+const BarChart = ({ data, title }: { data: any; title: string }) => (
+  <div className="w-full h-64 bg-muted/30 rounded-md flex items-center justify-center">
+    <div className="text-center">
+      <p className="text-muted-foreground">{title}</p>
+      <p className="text-sm text-muted-foreground">图表组件将在这里显示</p>
+    </div>
+  </div>
+)
+
+const PieChart = ({ data, title }: { data: any; title: string }) => (
+  <div className="w-full h-64 bg-muted/30 rounded-md flex items-center justify-center">
+    <div className="text-center">
+      <p className="text-muted-foreground">{title}</p>
+      <p className="text-sm text-muted-foreground">图表组件将在这里显示</p>
+    </div>
+  </div>
+)
+
+export function DataDashboard() {
+  const [timeRange, setTimeRange] = useState("7d")
+  const [activeTab, setActiveTab] = useState("overview")
+
+  // 模拟数据
+  const overviewData = {
+    totalUsers: 1245678,
+    userGrowth: 12.5,
+    totalDataSources: 8,
+    dataSourceGrowth: 33.3,
+    totalRecords: 45678921,
+    recordsGrowth: 8.7,
+    dataQuality: 92,
+    dataQualityGrowth: 3.2,
+  }
+
+  const dataSourceStats = [
+    { name: "CRM系统", records: 12500000, growth: 5.2, quality: 95 },
+    { name: "交易系统", records: 8750000, growth: 12.3, quality: 90 },
+    { name: "行为分析平台", records: 15800000, growth: 8.7, quality: 88 },
+    { name: "社交媒体", records: 4500000, growth: 15.2, quality: 85 },
+    { name: "设备管理系统", records: 3200000, growth: -2.1, quality: 93 },
+  ]
+
+  const dataQualityIssues = [
+    { type: "缺失值", count: 12500, percentage: 0.027, severity: "medium" },
+    { type: "格式错误", count: 8750, percentage: 0.019, severity: "high" },
+    { type: "重复数据", count: 23800, percentage: 0.052, severity: "low" },
+    { type: "异常值", count: 4500, percentage: 0.01, severity: "high" },
+    { type: "不一致数据", count: 9200, percentage: 0.02, severity: "medium" },
+  ]
+
+  const formatNumber = (num: number) => {
+    if (num >= 1000000) {
+      return (num / 1000000).toFixed(1) + "M"
+    } else if (num >= 1000) {
+      return (num / 1000).toFixed(1) + "K"
+    }
+    return num.toString()
+  }
+
+  const getSeverityBadge = (severity: string) => {
+    switch (severity) {
+      case "high":
+        return <Badge className="bg-red-100 text-red-800">高</Badge>
+      case "medium":
+        return <Badge className="bg-yellow-100 text-yellow-800">中</Badge>
+      case "low":
+        return <Badge className="bg-green-100 text-green-800">低</Badge>
+      default:
+        return <Badge>未知</Badge>
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-bold">数据仪表盘</h2>
+        <div className="flex items-center gap-2">
+          <Select value={timeRange} onValueChange={setTimeRange}>
+            <SelectTrigger className="w-[180px]">
+              <Calendar className="mr-2 h-4 w-4" />
+              <SelectValue placeholder="选择时间范围" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="1d">今日</SelectItem>
+              <SelectItem value="7d">近7天</SelectItem>
+              <SelectItem value="30d">近30天</SelectItem>
+              <SelectItem value="90d">近90天</SelectItem>
+              <SelectItem value="1y">近1年</SelectItem>
+              <SelectItem value="custom">自定义</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline" size="icon">
+            <RefreshCw className="h-4 w-4" />
+          </Button>
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            导出报告
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex flex-col space-y-2">
+              <p className="text-sm text-muted-foreground">总用户数</p>
+              <div className="flex items-end justify-between">
+                <h3 className="text-2xl font-bold">{formatNumber(overviewData.totalUsers)}</h3>
+                <div className={`flex items-center ${getGrowthClass(overviewData.userGrowth)}`}>
+                  {overviewData.userGrowth > 0 ? (
+                    <ArrowUp className="h-4 w-4 mr-1" />
+                  ) : (
+                    <ArrowDown className="h-4 w-4 mr-1" />
+                  )}
+                  <span>{Math.abs(overviewData.userGrowth)}%</span>
+                </div>
+              </div>
+              <p className="text-xs text-muted-foreground">相比上一时段</p>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex flex-col space-y-2">
+              <p className="text-sm text-muted-foreground">数据源数量</p>
+              <div className="flex items-end justify-between">
+                <h3 className="text-2xl font-bold">{overviewData.totalDataSources}</h3>
+                <div className={`flex items-center ${getGrowthClass(overviewData.dataSourceGrowth)}`}>
+                  {overviewData.dataSourceGrowth > 0 ? (
+                    <ArrowUp className="h-4 w-4 mr-1" />
+                  ) : (
+                    <ArrowDown className="h-4 w-4 mr-1" />
+                  )}
+                  <span>{Math.abs(overviewData.dataSourceGrowth)}%</span>
+                </div>
+              </div>
+              <p className="text-xs text-muted-foreground">相比上一时段</p>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex flex-col space-y-2">
+              <p className="text-sm text-muted-foreground">总记录数</p>
+              <div className="flex items-end justify-between">
+                <h3 className="text-2xl font-bold">{formatNumber(overviewData.totalRecords)}</h3>
+                <div className={`flex items-center ${getGrowthClass(overviewData.recordsGrowth)}`}>
+                  {overviewData.recordsGrowth > 0 ? (
+                    <ArrowUp className="h-4 w-4 mr-1" />
+                  ) : (
+                    <ArrowDown className="h-4 w-4 mr-1" />
+                  )}
+                  <span>{Math.abs(overviewData.recordsGrowth)}%</span>
+                </div>
+              </div>
+              <p className="text-xs text-muted-foreground">相比上一时段</p>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex flex-col space-y-2">
+              <p className="text-sm text-muted-foreground">数据质量评分</p>
+              <div className="flex items-end justify-between">
+                <h3 className="text-2xl font-bold">{overviewData.dataQuality}/100</h3>
+                <div className={`flex items-center ${getGrowthClass(overviewData.dataQualityGrowth)}`}>
+                  {overviewData.dataQualityGrowth > 0 ? (
+                    <ArrowUp className="h-4 w-4 mr-1" />
+                  ) : (
+                    <ArrowDown className="h-4 w-4 mr-1" />
+                  )}
+                  <span>{Math.abs(overviewData.dataQualityGrowth)}%</span>
+                </div>
+              </div>
+              <p className="text-xs text-muted-foreground">相比上一时段</p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="overview">数据概览</TabsTrigger>
+          <TabsTrigger value="sources">数据源分析</TabsTrigger>
+          <TabsTrigger value="quality">数据质量</TabsTrigger>
+          <TabsTrigger value="integration">数据整合</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>用户数据增长趋势</CardTitle>
+                <CardDescription>近期用户数据增长情况</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <LineChart data={{}} title="用户数据增长趋势图" />
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>数据源分布</CardTitle>
+                <CardDescription>各数据源数据量占比</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <PieChart data={{}} title="数据源分布图" />
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>数据质量趋势</CardTitle>
+                <CardDescription>数据质量评分变化趋势</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <LineChart data={{}} title="数据质量趋势图" />
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>数据整合进度</CardTitle>
+                <CardDescription>各标识符数据整合进度</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <BarChart data={{}} title="数据整合进度图" />
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="sources" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>数据源统计</CardTitle>
+              <CardDescription>各数据源数据量和质量统计</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <table className="min-w-full divide-y divide-border">
+                  <thead>
+                    <tr className="bg-muted/50">
+                      <th className="px-4 py-3 text-left text-sm font-medium">数据源</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium">记录数</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium">增长率</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium">质量评分</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-border">
+                    {dataSourceStats.map((source, index) => (
+                      <tr key={index}>
+                        <td className="px-4 py-3 text-sm font-medium">{source.name}</td>
+                        <td className="px-4 py-3 text-sm">{formatNumber(source.records)}</td>
+                        <td className="px-4 py-3 text-sm">
+                          <div className={`flex items-center ${getGrowthClass(source.growth)}`}>
+                            {source.growth > 0 ? (
+                              <ArrowUp className="h-4 w-4 mr-1" />
+                            ) : (
+                              <ArrowDown className="h-4 w-4 mr-1" />
+                            )}
+                            <span>{Math.abs(source.growth)}%</span>
+                          </div>
+                        </td>
+                        <td className="px-4 py-3 text-sm">{source.quality}/100</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>数据源记录数对比</CardTitle>
+                <CardDescription>各数据源记录数量对比</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <BarChart data={{}} title="数据源记录数对比图" />
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>数据源质量对比</CardTitle>
+                <CardDescription>各数据源质量评分对比</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <BarChart data={{}} title="数据源质量对比图" />
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="quality" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>数据质量问题</CardTitle>
+              <CardDescription>主要数据质量问题统计</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <table className="min-w-full divide-y divide-border">
+                  <thead>
+                    <tr className="bg-muted/50">
+                      <th className="px-4 py-3 text-left text-sm font-medium">问题类型</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium">问题数量</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium">占比</th>
+                      <th className="px-4 py-3 text-left text-sm font-medium">严重程度</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-border">
+                    {dataQualityIssues.map((issue, index) => (
+                      <tr key={index}>
+                        <td className="px-4 py-3 text-sm font-medium">{issue.type}</td>
+                        <td className="px-4 py-3 text-sm">{formatNumber(issue.count)}</td>
+                        <td className="px-4 py-3 text-sm">{(issue.percentage * 100).toFixed(2)}%</td>
+                        <td className="px-4 py-3 text-sm">{getSeverityBadge(issue.severity)}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>数据质量问题分布</CardTitle>
+                <CardDescription>各类数据质量问题分布</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <PieChart data={{}} title="数据质量问题分布图" />
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>数据质量趋势</CardTitle>
+                <CardDescription>数据质量随时间变化趋势</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <LineChart data={{}} title="数据质量趋势图" />
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="integration" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <CardTitle>数据整合状态</CardTitle>
+              <CardDescription>基于不同标识符的数据整合状态</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">用户ID整合率</span>
+                    <span className="text-green-600 font-medium">95%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-green-600 h-2.5 rounded-full" style={{ width: "95%" }}></div>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">手机号整合率</span>
+                    <span className="text-green-600 font-medium">87%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-green-600 h-2.5 rounded-full" style={{ width: "87%" }}></div>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">身份证号整合率</span>
+                    <span className="text-yellow-600 font-medium">72%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-yellow-600 h-2.5 rounded-full" style={{ width: "72%" }}></div>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">IMEI设备号整合率</span>
+                    <span className="text-yellow-600 font-medium">68%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-yellow-600 h-2.5 rounded-full" style={{ width: "68%" }}></div>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">整体数据整合率</span>
+                    <span className="text-green-600 font-medium">82%</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div className="bg-green-600 h-2.5 rounded-full" style={{ width: "82%" }}></div>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>数据整合趋势</CardTitle>
+                <CardDescription>数据整合率随时间变化趋势</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <LineChart data={{}} title="数据整合趋势图" />
+              </CardContent>
+            </Card>
+            <Card>
+              <CardHeader>
+                <CardTitle>标识符覆盖率</CardTitle>
+                <CardDescription>各标识符在用户数据中的覆盖率</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <BarChart data={{}} title="标识符覆盖率图" />
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/components/data-integration/data-field-mapping.tsx b/components/data-integration/data-field-mapping.tsx
new file mode 100644
index 0000000..34f3fae
--- /dev/null
+++ b/components/data-integration/data-field-mapping.tsx
@@ -0,0 +1,321 @@
+"use client"
+
+import { useState } from "react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { ArrowRight, Plus, Save, Trash2, HelpCircle } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+
+interface FieldMapping {
+  id: string
+  sourceField: string
+  targetField: string
+  dataType: string
+  required: boolean
+  transformation: string
+  primaryKey: boolean
+}
+
+export function DataFieldMapping() {
+  // 模拟数据
+  const [mappings, setMappings] = useState<FieldMapping[]>([
+    {
+      id: "1",
+      sourceField: "user_id",
+      targetField: "userId",
+      dataType: "string",
+      required: true,
+      transformation: "none",
+      primaryKey: true,
+    },
+    {
+      id: "2",
+      sourceField: "phone",
+      targetField: "phoneNumber",
+      dataType: "string",
+      required: true,
+      transformation: "formatPhoneNumber",
+      primaryKey: false,
+    },
+    {
+      id: "3",
+      sourceField: "id_card",
+      targetField: "identityNumber",
+      dataType: "string",
+      required: true,
+      transformation: "mask",
+      primaryKey: false,
+    },
+    {
+      id: "4",
+      sourceField: "imei",
+      targetField: "deviceImei",
+      dataType: "string",
+      required: false,
+      transformation: "none",
+      primaryKey: false,
+    },
+    {
+      id: "5",
+      sourceField: "name",
+      targetField: "fullName",
+      dataType: "string",
+      required: true,
+      transformation: "none",
+      primaryKey: false,
+    },
+    {
+      id: "6",
+      sourceField: "register_time",
+      targetField: "registrationDate",
+      dataType: "datetime",
+      required: true,
+      transformation: "parseDateTime",
+      primaryKey: false,
+    },
+    {
+      id: "7",
+      sourceField: "last_login",
+      targetField: "lastActiveTime",
+      dataType: "datetime",
+      required: false,
+      transformation: "parseDateTime",
+      primaryKey: false,
+    },
+  ])
+
+  const addNewMapping = () => {
+    const newMapping: FieldMapping = {
+      id: `new-${Date.now()}`,
+      sourceField: "",
+      targetField: "",
+      dataType: "string",
+      required: false,
+      transformation: "none",
+      primaryKey: false,
+    }
+    setMappings([...mappings, newMapping])
+  }
+
+  const updateMapping = (id: string, field: keyof FieldMapping, value: any) => {
+    setMappings(mappings.map((mapping) => (mapping.id === id ? { ...mapping, [field]: value } : mapping)))
+  }
+
+  const deleteMapping = (id: string) => {
+    setMappings(mappings.filter((mapping) => mapping.id !== id))
+  }
+
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>数据字段映射</CardTitle>
+          <CardDescription>
+            配置源数据字段与目标数据字段的映射关系，以ID、手机号、身份证号和IMEI设备号为标准整合客户数据
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center gap-2">
+              <Badge className="bg-blue-100 text-blue-800">标准字段映射</Badge>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                      <HelpCircle className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p className="max-w-xs">
+                      标准字段映射用于将不同数据源的字段映射到统一的标准字段，以便于数据整合和分析。
+                      主键字段用于唯一标识用户，通常为用户ID、手机号、身份证号或IMEI设备号。
+                    </p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
+            <Button onClick={addNewMapping}>
+              <Plus className="mr-2 h-4 w-4" />
+              添加映射
+            </Button>
+          </div>
+
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>源字段</TableHead>
+                  <TableHead></TableHead>
+                  <TableHead>目标字段</TableHead>
+                  <TableHead>数据类型</TableHead>
+                  <TableHead>必填</TableHead>
+                  <TableHead>主键</TableHead>
+                  <TableHead>转换方式</TableHead>
+                  <TableHead className="text-right">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {mappings.map((mapping) => (
+                  <TableRow key={mapping.id}>
+                    <TableCell>
+                      <Input
+                        value={mapping.sourceField}
+                        onChange={(e) => updateMapping(mapping.id, "sourceField", e.target.value)}
+                        placeholder="源字段名"
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                    </TableCell>
+                    <TableCell>
+                      <Input
+                        value={mapping.targetField}
+                        onChange={(e) => updateMapping(mapping.id, "targetField", e.target.value)}
+                        placeholder="目标字段名"
+                      />
+                    </TableCell>
+                    <TableCell>
+                      <Select
+                        value={mapping.dataType}
+                        onValueChange={(value) => updateMapping(mapping.id, "dataType", value)}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="选择数据类型" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="string">字符串</SelectItem>
+                          <SelectItem value="number">数字</SelectItem>
+                          <SelectItem value="boolean">布尔值</SelectItem>
+                          <SelectItem value="datetime">日期时间</SelectItem>
+                          <SelectItem value="array">数组</SelectItem>
+                          <SelectItem value="object">对象</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center justify-center">
+                        <Switch
+                          checked={mapping.required}
+                          onCheckedChange={(checked) => updateMapping(mapping.id, "required", checked)}
+                        />
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex items-center justify-center">
+                        <Switch
+                          checked={mapping.primaryKey}
+                          onCheckedChange={(checked) => updateMapping(mapping.id, "primaryKey", checked)}
+                        />
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Select
+                        value={mapping.transformation}
+                        onValueChange={(value) => updateMapping(mapping.id, "transformation", value)}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="选择转换方式" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="none">无转换</SelectItem>
+                          <SelectItem value="formatPhoneNumber">格式化手机号</SelectItem>
+                          <SelectItem value="mask">数据脱敏</SelectItem>
+                          <SelectItem value="parseDateTime">解析日期时间</SelectItem>
+                          <SelectItem value="uppercase">转大写</SelectItem>
+                          <SelectItem value="lowercase">转小写</SelectItem>
+                          <SelectItem value="trim">去除空格</SelectItem>
+                          <SelectItem value="custom">自定义转换</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button variant="ghost" size="icon" onClick={() => deleteMapping(mapping.id)}>
+                        <Trash2 className="h-4 w-4 text-red-500" />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+
+          <div className="flex justify-end space-x-2">
+            <Button variant="outline">取消</Button>
+            <Button>
+              <Save className="mr-2 h-4 w-4" />
+              保存配置
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>标准字段说明</CardTitle>
+          <CardDescription>用户数据标准字段的说明和用途</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>字段名</TableHead>
+                <TableHead>数据类型</TableHead>
+                <TableHead>说明</TableHead>
+                <TableHead>用途</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell className="font-medium">userId</TableCell>
+                <TableCell>字符串</TableCell>
+                <TableCell>用户唯一标识符</TableCell>
+                <TableCell>用于唯一标识用户，主键字段</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-medium">phoneNumber</TableCell>
+                <TableCell>字符串</TableCell>
+                <TableCell>用户手机号码</TableCell>
+                <TableCell>用于用户联系和身份验证，可作为主键</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-medium">identityNumber</TableCell>
+                <TableCell>字符串</TableCell>
+                <TableCell>用户身份证号码</TableCell>
+                <TableCell>用于用户实名认证，可作为主键</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-medium">deviceImei</TableCell>
+                <TableCell>字符串</TableCell>
+                <TableCell>设备IMEI号码</TableCell>
+                <TableCell>用于设备识别，可作为主键</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-medium">fullName</TableCell>
+                <TableCell>字符串</TableCell>
+                <TableCell>用户姓名</TableCell>
+                <TableCell>用于用户基本信息</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-medium">registrationDate</TableCell>
+                <TableCell>日期时间</TableCell>
+                <TableCell>用户注册时间</TableCell>
+                <TableCell>用于用户生命周期分析</TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className="font-medium">lastActiveTime</TableCell>
+                <TableCell>日期时间</TableCell>
+                <TableCell>用户最后活跃时间</TableCell>
+                <TableCell>用于用户活跃度分析</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/components/data-integration/data-mapping-config.tsx b/components/data-integration/data-mapping-config.tsx
new file mode 100644
index 0000000..ce5595c
--- /dev/null
+++ b/components/data-integration/data-mapping-config.tsx
@@ -0,0 +1,210 @@
+"use client"
+
+import { useState } from "react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { ArrowRight, Plus, Save, Trash2 } from "lucide-react"
+
+interface FieldMapping {
+  id: string
+  sourceField: string
+  targetField: string
+  dataType: string
+  required: boolean
+  transformation: string
+}
+
+export function DataMappingConfig() {
+  // 模拟数据
+  const [mappings, setMappings] = useState<FieldMapping[]>([
+    {
+      id: "1",
+      sourceField: "phone",
+      targetField: "phoneNumber",
+      dataType: "string",
+      required: true,
+      transformation: "formatPhoneNumber",
+    },
+    {
+      id: "2",
+      sourceField: "id_card",
+      targetField: "identityNumber",
+      dataType: "string",
+      required: true,
+      transformation: "mask",
+    },
+    {
+      id: "3",
+      sourceField: "imei",
+      targetField: "deviceImei",
+      dataType: "string",
+      required: false,
+      transformation: "none",
+    },
+    {
+      id: "4",
+      sourceField: "address",
+      targetField: "userAddress",
+      dataType: "string",
+      required: false,
+      transformation: "none",
+    },
+    {
+      id: "5",
+      sourceField: "name",
+      targetField: "fullName",
+      dataType: "string",
+      required: true,
+      transformation: "none",
+    },
+    {
+      id: "6",
+      sourceField: "register_time",
+      targetField: "registrationDate",
+      dataType: "datetime",
+      required: true,
+      transformation: "parseDateTime",
+    },
+    {
+      id: "7",
+      sourceField: "last_login",
+      targetField: "lastActiveTime",
+      dataType: "datetime",
+      required: false,
+      transformation: "parseDateTime",
+    },
+  ])
+
+  const addNewMapping = () => {
+    const newMapping: FieldMapping = {
+      id: `new-${Date.now()}`,
+      sourceField: "",
+      targetField: "",
+      dataType: "string",
+      required: false,
+      transformation: "none",
+    }
+    setMappings([...mappings, newMapping])
+  }
+
+  const updateMapping = (id: string, field: keyof FieldMapping, value: any) => {
+    setMappings(mappings.map((mapping) => (mapping.id === id ? { ...mapping, [field]: value } : mapping)))
+  }
+
+  const deleteMapping = (id: string) => {
+    setMappings(mappings.filter((mapping) => mapping.id !== id))
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h3 className="text-lg font-medium">字段映射配置</h3>
+        <Button onClick={addNewMapping}>
+          <Plus className="mr-2 h-4 w-4" />
+          添加映射
+        </Button>
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>源字段</TableHead>
+              <TableHead></TableHead>
+              <TableHead>目标字段</TableHead>
+              <TableHead>数据类型</TableHead>
+              <TableHead>必填</TableHead>
+              <TableHead>转换方式</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {mappings.map((mapping) => (
+              <TableRow key={mapping.id}>
+                <TableCell>
+                  <Input
+                    value={mapping.sourceField}
+                    onChange={(e) => updateMapping(mapping.id, "sourceField", e.target.value)}
+                    placeholder="源字段名"
+                  />
+                </TableCell>
+                <TableCell>
+                  <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                </TableCell>
+                <TableCell>
+                  <Input
+                    value={mapping.targetField}
+                    onChange={(e) => updateMapping(mapping.id, "targetField", e.target.value)}
+                    placeholder="目标字段名"
+                  />
+                </TableCell>
+                <TableCell>
+                  <Select
+                    value={mapping.dataType}
+                    onValueChange={(value) => updateMapping(mapping.id, "dataType", value)}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="选择数据类型" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="string">字符串</SelectItem>
+                      <SelectItem value="number">数字</SelectItem>
+                      <SelectItem value="boolean">布尔值</SelectItem>
+                      <SelectItem value="datetime">日期时间</SelectItem>
+                      <SelectItem value="array">数组</SelectItem>
+                      <SelectItem value="object">对象</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center justify-center">
+                    <Switch
+                      checked={mapping.required}
+                      onCheckedChange={(checked) => updateMapping(mapping.id, "required", checked)}
+                    />
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <Select
+                    value={mapping.transformation}
+                    onValueChange={(value) => updateMapping(mapping.id, "transformation", value)}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="选择转换方式" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">无转换</SelectItem>
+                      <SelectItem value="formatPhoneNumber">格式化手机号</SelectItem>
+                      <SelectItem value="mask">数据脱敏</SelectItem>
+                      <SelectItem value="parseDateTime">解析日期时间</SelectItem>
+                      <SelectItem value="uppercase">转大写</SelectItem>
+                      <SelectItem value="lowercase">转小写</SelectItem>
+                      <SelectItem value="trim">去除空格</SelectItem>
+                      <SelectItem value="custom">自定义转换</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </TableCell>
+                <TableCell className="text-right">
+                  <Button variant="ghost" size="icon" onClick={() => deleteMapping(mapping.id)}>
+                    <Trash2 className="h-4 w-4 text-red-500" />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex justify-end space-x-2">
+        <Button variant="outline">取消</Button>
+        <Button>
+          <Save className="mr-2 h-4 w-4" />
+          保存配置
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/data-integration/data-preview.tsx b/components/data-integration/data-preview.tsx
new file mode 100644
index 0000000..cc1574c
--- /dev/null
+++ b/components/data-integration/data-preview.tsx
@@ -0,0 +1,235 @@
+"use client"
+
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+export function DataPreview() {
+  // 模拟数据
+  const previewData = [
+    {
+      id: "1",
+      name: "张三",
+      phone: "13812345678",
+      idCard: "3101********1234",
+      imei: "86723*****5432",
+      address: "上海市浦东新区张江高科技园区",
+      registerDate: "2023-01-15",
+      lastActive: "2023-07-12",
+      source: "CRM系统",
+      status: "matched",
+    },
+    {
+      id: "2",
+      name: "李四",
+      phone: "13987654321",
+      idCard: "4401********5678",
+      imei: "35871*****7890",
+      address: "广州市天河区珠江新城",
+      registerDate: "2022-11-20",
+      lastActive: "2023-07-10",
+      source: "电商平台",
+      status: "matched",
+    },
+    {
+      id: "3",
+      name: "王五",
+      phone: "13765432198",
+      idCard: "1101********7890",
+      imei: "",
+      address: "北京市海淀区中关村",
+      registerDate: "2023-03-05",
+      lastActive: "2023-07-15",
+      source: "营销活动",
+      status: "partial",
+    },
+    {
+      id: "4",
+      name: "赵六",
+      phone: "13698765432",
+      idCard: "",
+      imei: "86723*****1234",
+      address: "深圳市南山区科技园",
+      registerDate: "2023-05-18",
+      lastActive: "2023-07-14",
+      source: "APP注册",
+      status: "partial",
+    },
+    {
+      id: "5",
+      name: "钱七",
+      phone: "",
+      idCard: "",
+      imei: "",
+      address: "杭州市西湖区",
+      registerDate: "2023-06-30",
+      lastActive: "2023-07-01",
+      source: "社交媒体",
+      status: "unmatched",
+    },
+  ]
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "matched":
+        return <Badge className="bg-green-100 text-green-800">已匹配</Badge>
+      case "partial":
+        return <Badge className="bg-yellow-100 text-yellow-800">部分匹配</Badge>
+      case "unmatched":
+        return <Badge className="bg-red-100 text-red-800">未匹配</Badge>
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <Tabs defaultValue="preview">
+        <TabsList>
+          <TabsTrigger value="preview">数据预览</TabsTrigger>
+          <TabsTrigger value="matched">已匹配</TabsTrigger>
+          <TabsTrigger value="partial">部分匹配</TabsTrigger>
+          <TabsTrigger value="unmatched">未匹配</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="preview" className="pt-4">
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>姓名</TableHead>
+                  <TableHead>手机号</TableHead>
+                  <TableHead>身份证</TableHead>
+                  <TableHead>IMEI</TableHead>
+                  <TableHead>地址</TableHead>
+                  <TableHead>注册日期</TableHead>
+                  <TableHead>最后活跃</TableHead>
+                  <TableHead>来源</TableHead>
+                  <TableHead>匹配状态</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {previewData.map((item) => (
+                  <TableRow key={item.id}>
+                    <TableCell className="font-medium">{item.name}</TableCell>
+                    <TableCell>{item.phone || "-"}</TableCell>
+                    <TableCell>{item.idCard || "-"}</TableCell>
+                    <TableCell>{item.imei || "-"}</TableCell>
+                    <TableCell>{item.address}</TableCell>
+                    <TableCell>{item.registerDate}</TableCell>
+                    <TableCell>{item.lastActive}</TableCell>
+                    <TableCell>{item.source}</TableCell>
+                    <TableCell>{getStatusBadge(item.status)}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="matched" className="pt-4">
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>姓名</TableHead>
+                  <TableHead>手机号</TableHead>
+                  <TableHead>身份证</TableHead>
+                  <TableHead>IMEI</TableHead>
+                  <TableHead>地址</TableHead>
+                  <TableHead>注册日期</TableHead>
+                  <TableHead>最后活跃</TableHead>
+                  <TableHead>来源</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {previewData
+                  .filter((item) => item.status === "matched")
+                  .map((item) => (
+                    <TableRow key={item.id}>
+                      <TableCell className="font-medium">{item.name}</TableCell>
+                      <TableCell>{item.phone || "-"}</TableCell>
+                      <TableCell>{item.idCard || "-"}</TableCell>
+                      <TableCell>{item.imei || "-"}</TableCell>
+                      <TableCell>{item.address}</TableCell>
+                      <TableCell>{item.registerDate}</TableCell>
+                      <TableCell>{item.lastActive}</TableCell>
+                      <TableCell>{item.source}</TableCell>
+                    </TableRow>
+                  ))}
+              </TableBody>
+            </Table>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="partial" className="pt-4">
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>姓名</TableHead>
+                  <TableHead>手机号</TableHead>
+                  <TableHead>身份证</TableHead>
+                  <TableHead>IMEI</TableHead>
+                  <TableHead>地址</TableHead>
+                  <TableHead>注册日期</TableHead>
+                  <TableHead>最后活跃</TableHead>
+                  <TableHead>来源</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {previewData
+                  .filter((item) => item.status === "partial")
+                  .map((item) => (
+                    <TableRow key={item.id}>
+                      <TableCell className="font-medium">{item.name}</TableCell>
+                      <TableCell>{item.phone || "-"}</TableCell>
+                      <TableCell>{item.idCard || "-"}</TableCell>
+                      <TableCell>{item.imei || "-"}</TableCell>
+                      <TableCell>{item.address}</TableCell>
+                      <TableCell>{item.registerDate}</TableCell>
+                      <TableCell>{item.lastActive}</TableCell>
+                      <TableCell>{item.source}</TableCell>
+                    </TableRow>
+                  ))}
+              </TableBody>
+            </Table>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="unmatched" className="pt-4">
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>姓名</TableHead>
+                  <TableHead>手机号</TableHead>
+                  <TableHead>身份证</TableHead>
+                  <TableHead>IMEI</TableHead>
+                  <TableHead>地址</TableHead>
+                  <TableHead>注册日期</TableHead>
+                  <TableHead>最后活跃</TableHead>
+                  <TableHead>来源</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {previewData
+                  .filter((item) => item.status === "unmatched")
+                  .map((item) => (
+                    <TableRow key={item.id}>
+                      <TableCell className="font-medium">{item.name}</TableCell>
+                      <TableCell>{item.phone || "-"}</TableCell>
+                      <TableCell>{item.idCard || "-"}</TableCell>
+                      <TableCell>{item.imei || "-"}</TableCell>
+                      <TableCell>{item.address}</TableCell>
+                      <TableCell>{item.registerDate}</TableCell>
+                      <TableCell>{item.lastActive}</TableCell>
+                      <TableCell>{item.source}</TableCell>
+                    </TableRow>
+                  ))}
+              </TableBody>
+            </Table>
+          </div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/components/data-integration/data-quality-monitor.tsx b/components/data-integration/data-quality-monitor.tsx
new file mode 100644
index 0000000..2f99fcd
--- /dev/null
+++ b/components/data-integration/data-quality-monitor.tsx
@@ -0,0 +1,987 @@
+"use client"
+
+import { Textarea } from "@/components/ui/textarea"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Separator } from "@/components/ui/separator"
+import { AlertTriangle, CheckCircle, Bell, RefreshCw, Filter, Download, Search, Clock } from "lucide-react"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+interface DataQualityIssue {
+  id: string
+  type: string
+  description: string
+  affectedRecords: number
+  affectedFields: string[]
+  severity: "high" | "medium" | "low"
+  status: "open" | "in_progress" | "resolved"
+  createdAt: string
+  dataSource: string
+}
+
+interface DataQualityRule {
+  id: string
+  name: string
+  description: string
+  type: string
+  enabled: boolean
+  severity: "high" | "medium" | "low"
+  dataSource: string
+  lastRun: string
+  issuesDetected: number
+}
+
+export function DataQualityMonitor() {
+  const [activeTab, setActiveTab] = useState("issues")
+  const [selectedIssueId, setSelectedIssueId] = useState<string | null>(null)
+  const [isAddingRule, setIsAddingRule] = useState(false)
+  const [filterSeverity, setFilterSeverity] = useState<string>("all")
+  const [filterStatus, setFilterStatus] = useState<string>("all")
+
+  // 模拟数据质量问题
+  const [dataQualityIssues, setDataQualityIssues] = useState<DataQualityIssue[]>([
+    {
+      id: "issue-1",
+      type: "缺失值",
+      description: "用户表中存在大量手机号字段为空的记录",
+      affectedRecords: 1250,
+      affectedFields: ["phoneNumber"],
+      severity: "high",
+      status: "open",
+      createdAt: "2023-07-20 10:15",
+      dataSource: "CRM系统",
+    },
+    {
+      id: "issue-2",
+      type: "格式错误",
+      description: "部分用户的身份证号格式不正确",
+      affectedRecords: 458,
+      affectedFields: ["identityNumber"],
+      severity: "medium",
+      status: "in_progress",
+      createdAt: "2023-07-19 15:30",
+      dataSource: "用户数据库",
+    },
+    {
+      id: "issue-3",
+      type: "重复数据",
+      description: "存在多条使用相同手机号的用户记录",
+      affectedRecords: 789,
+      affectedFields: ["userId", "phoneNumber"],
+      severity: "medium",
+      status: "open",
+      createdAt: "2023-07-18 09:45",
+      dataSource: "交易系统",
+    },
+    {
+      id: "issue-4",
+      type: "异常值",
+      description: "部分用户的年龄字段值异常（超过150岁）",
+      affectedRecords: 23,
+      affectedFields: ["age"],
+      severity: "low",
+      status: "resolved",
+      createdAt: "2023-07-17 14:20",
+      dataSource: "用户数据库",
+    },
+    {
+      id: "issue-5",
+      type: "不一致数据",
+      description: "用户在不同系统中的姓名不一致",
+      affectedRecords: 567,
+      affectedFields: ["fullName"],
+      severity: "high",
+      status: "open",
+      createdAt: "2023-07-16 11:05",
+      dataSource: "多系统",
+    },
+  ])
+
+  // 模拟数据质量规则
+  const [dataQualityRules, setDataQualityRules] = useState<DataQualityRule[]>([
+    {
+      id: "rule-1",
+      name: "手机号格式检查",
+      description: "检查手机号是否符合中国大陆手机号格式",
+      type: "格式验证",
+      enabled: true,
+      severity: "high",
+      dataSource: "所有数据源",
+      lastRun: "2023-07-20 00:00",
+      issuesDetected: 458,
+    },
+    {
+      id: "rule-2",
+      name: "身份证号验证",
+      description: "验证身份证号的格式和校验码",
+      type: "格式验证",
+      enabled: true,
+      severity: "high",
+      dataSource: "所有数据源",
+      lastRun: "2023-07-20 00:00",
+      issuesDetected: 789,
+    },
+    {
+      id: "rule-3",
+      name: "必填字段检查",
+      description: "检查关键字段是否有值",
+      type: "完整性检查",
+      enabled: true,
+      severity: "medium",
+      dataSource: "所有数据源",
+      lastRun: "2023-07-20 00:00",
+      issuesDetected: 1250,
+    },
+    {
+      id: "rule-4",
+      name: "重复数据检测",
+      description: "检测并标记重复的用户记录",
+      type: "唯一性检查",
+      enabled: true,
+      severity: "medium",
+      dataSource: "所有数据源",
+      lastRun: "2023-07-20 00:00",
+      issuesDetected: 567,
+    },
+    {
+      id: "rule-5",
+      name: "数据一致性检查",
+      description: "检查用户在不同系统中的数据是否一致",
+      type: "一致性检查",
+      enabled: true,
+      severity: "high",
+      dataSource: "所有数据源",
+      lastRun: "2023-07-20 00:00",
+      issuesDetected: 567,
+    },
+  ])
+
+  // 模拟数据质量统计
+  const qualityStats = {
+    totalIssues: 3087,
+    openIssues: 2606,
+    resolvedIssues: 481,
+    highSeverity: 1245,
+    mediumSeverity: 1356,
+    lowSeverity: 486,
+    dataQualityScore: 87,
+    completenessScore: 92,
+    accuracyScore: 85,
+    consistencyScore: 88,
+    validityScore: 84,
+  }
+
+  const getSeverityBadge = (severity: string) => {
+    switch (severity) {
+      case "high":
+        return <Badge className="bg-red-100 text-red-800">高</Badge>
+      case "medium":
+        return <Badge className="bg-yellow-100 text-yellow-800">中</Badge>
+      case "low":
+        return <Badge className="bg-green-100 text-green-800">低</Badge>
+      default:
+        return <Badge>未知</Badge>
+    }
+  }
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case "open":
+        return <Badge className="bg-red-100 text-red-800">未解决</Badge>
+      case "in_progress":
+        return <Badge className="bg-yellow-100 text-yellow-800">处理中</Badge>
+      case "resolved":
+        return <Badge className="bg-green-100 text-green-800">已解决</Badge>
+      default:
+        return <Badge>未知</Badge>
+    }
+  }
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "open":
+        return <AlertTriangle className="h-5 w-5 text-red-500" />
+      case "in_progress":
+        return <RefreshCw className="h-5 w-5 text-yellow-500" />
+      case "resolved":
+        return <CheckCircle className="h-5 w-5 text-green-500" />
+      default:
+        return <AlertTriangle className="h-5 w-5" />
+    }
+  }
+
+  const filteredIssues = dataQualityIssues.filter((issue) => {
+    if (filterSeverity !== "all" && issue.severity !== filterSeverity) return false
+    if (filterStatus !== "all" && issue.status !== filterStatus) return false
+    return true
+  })
+
+  const selectedIssue = selectedIssueId ? dataQualityIssues.find((issue) => issue.id === selectedIssueId) : null
+
+  const updateIssueStatus = (id: string, status: "open" | "in_progress" | "resolved") => {
+    setDataQualityIssues(
+      dataQualityIssues.map((issue) => {
+        if (issue.id === id) {
+          return { ...issue, status }
+        }
+        return issue
+      }),
+    )
+  }
+
+  const toggleRuleStatus = (id: string) => {
+    setDataQualityRules(
+      dataQualityRules.map((rule) => {
+        if (rule.id === id) {
+          return { ...rule, enabled: !rule.enabled }
+        }
+        return rule
+      }),
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-bold">数据质量监控</h2>
+        <div className="flex items-center gap-2">
+          <Button variant="outline">
+            <Bell className="mr-2 h-4 w-4" />
+            通知设置
+          </Button>
+          <Button>
+            <RefreshCw className="mr-2 h-4 w-4" />
+            运行检查
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex flex-col space-y-2">
+              <p className="text-sm text-muted-foreground">数据质量评分</p>
+              <div className="flex items-end justify-between">
+                <h3 className="text-2xl font-bold">{qualityStats.dataQualityScore}/100</h3>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-2.5">
+                <div
+                  className="bg-green-600 h-2.5 rounded-full"
+                  style={{ width: `${qualityStats.dataQualityScore}%` }}
+                ></div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex flex-col space-y-2">
+              <p className="text-sm text-muted-foreground">未解决问题</p>
+              <div className="flex items-center justify-between">
+                <h3 className="text-2xl font-bold">{qualityStats.openIssues}</h3>
+                <AlertTriangle className="h-5 w-5 text-red-500" />
+              </div>
+              <p className="text-xs text-muted-foreground">其中高严重性: {qualityStats.highSeverity} 个问题</p>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex flex-col space-y-2">
+              <p className="text-sm text-muted-foreground">处理中问题</p>
+              <div className="flex items-center justify-between">
+                <h3 className="text-2xl font-bold">
+                  {dataQualityIssues.filter((issue) => issue.status === "in_progress").length}
+                </h3>
+                <RefreshCw className="h-5 w-5 text-yellow-500" />
+              </div>
+              <p className="text-xs text-muted-foreground">正在处理中的数据质量问题</p>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-6">
+            <div className="flex flex-col space-y-2">
+              <p className="text-sm text-muted-foreground">已解决问题</p>
+              <div className="flex items-center justify-between">
+                <h3 className="text-2xl font-bold">{qualityStats.resolvedIssues}</h3>
+                <CheckCircle className="h-5 w-5 text-green-500" />
+              </div>
+              <p className="text-xs text-muted-foreground">
+                解决率: {((qualityStats.resolvedIssues / qualityStats.totalIssues) * 100).toFixed(1)}%
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="issues">数据问题</TabsTrigger>
+          <TabsTrigger value="rules">质量规则</TabsTrigger>
+          <TabsTrigger value="metrics">质量指标</TabsTrigger>
+          <TabsTrigger value="reports">质量报告</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="issues" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <div className="flex justify-between items-center">
+                <CardTitle>数据质量问题</CardTitle>
+                <div className="flex items-center gap-2">
+                  <div className="relative">
+                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                    <Input type="text" placeholder="搜索问题..." className="pl-8 w-[200px]" />
+                  </div>
+                  <Select value={filterSeverity} onValueChange={setFilterSeverity}>
+                    <SelectTrigger className="w-[130px]">
+                      <Filter className="mr-2 h-4 w-4" />
+                      <SelectValue placeholder="严重性" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">所有严重性</SelectItem>
+                      <SelectItem value="high">高</SelectItem>
+                      <SelectItem value="medium">中</SelectItem>
+                      <SelectItem value="low">低</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Select value={filterStatus} onValueChange={setFilterStatus}>
+                    <SelectTrigger className="w-[130px]">
+                      <Filter className="mr-2 h-4 w-4" />
+                      <SelectValue placeholder="状态" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">所有状态</SelectItem>
+                      <SelectItem value="open">未解决</SelectItem>
+                      <SelectItem value="in_progress">处理中</SelectItem>
+                      <SelectItem value="resolved">已解决</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-[50px]">状态</TableHead>
+                      <TableHead>问题类型</TableHead>
+                      <TableHead>描述</TableHead>
+                      <TableHead>影响记录数</TableHead>
+                      <TableHead>严重性</TableHead>
+                      <TableHead>数据源</TableHead>
+                      <TableHead>发现时间</TableHead>
+                      <TableHead className="text-right">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredIssues.map((issue) => (
+                      <TableRow key={issue.id}>
+                        <TableCell>{getStatusIcon(issue.status)}</TableCell>
+                        <TableCell className="font-medium">{issue.type}</TableCell>
+                        <TableCell>{issue.description}</TableCell>
+                        <TableCell>{issue.affectedRecords.toLocaleString()}</TableCell>
+                        <TableCell>{getSeverityBadge(issue.severity)}</TableCell>
+                        <TableCell>{issue.dataSource}</TableCell>
+                        <TableCell>{issue.createdAt}</TableCell>
+                        <TableCell className="text-right">
+                          <Button variant="ghost" size="sm" onClick={() => setSelectedIssueId(issue.id)}>
+                            查看详情
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="rules" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <div className="flex justify-between items-center">
+                <CardTitle>数据质量规则</CardTitle>
+                <Button onClick={() => setIsAddingRule(true)}>添加规则</Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>规则名称</TableHead>
+                      <TableHead>类型</TableHead>
+                      <TableHead>严重性</TableHead>
+                      <TableHead>数据源</TableHead>
+                      <TableHead>上次运行</TableHead>
+                      <TableHead>检测到的问题</TableHead>
+                      <TableHead>状态</TableHead>
+                      <TableHead className="text-right">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {dataQualityRules.map((rule) => (
+                      <TableRow key={rule.id}>
+                        <TableCell className="font-medium">{rule.name}</TableCell>
+                        <TableCell>{rule.type}</TableCell>
+                        <TableCell>{getSeverityBadge(rule.severity)}</TableCell>
+                        <TableCell>{rule.dataSource}</TableCell>
+                        <TableCell>{rule.lastRun}</TableCell>
+                        <TableCell>{rule.issuesDetected.toLocaleString()}</TableCell>
+                        <TableCell>
+                          <div className="flex items-center space-x-2">
+                            <Switch
+                              checked={rule.enabled}
+                              onCheckedChange={() => toggleRuleStatus(rule.id)}
+                              aria-label="Toggle rule"
+                            />
+                            <span>{rule.enabled ? "启用" : "禁用"}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <div className="flex justify-end space-x-2">
+                            <Button variant="ghost" size="sm">
+                              编辑
+                            </Button>
+                            <Button variant="ghost" size="sm">
+                              运行
+                            </Button>
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="metrics" className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>数据完整性</CardTitle>
+                <CardDescription>数据字段的完整性评分</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">总体完整性评分</span>
+                    <span className="text-green-600 font-medium">{qualityStats.completenessScore}/100</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div
+                      className="bg-green-600 h-2.5 rounded-full"
+                      style={{ width: `${qualityStats.completenessScore}%` }}
+                    ></div>
+                  </div>
+
+                  <div className="space-y-2 mt-4">
+                    <h4 className="text-sm font-medium">关键字段完整性</h4>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">用户ID</span>
+                        <span className="text-sm">100%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "100%" }}></div>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">手机号</span>
+                        <span className="text-sm">87%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "87%" }}></div>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">身份证号</span>
+                        <span className="text-sm">72%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "72%" }}></div>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">IMEI设备号</span>
+                        <span className="text-sm">68%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "68%" }}></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>数据准确性</CardTitle>
+                <CardDescription>数据值的准确性评分</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">总体准确性评分</span>
+                    <span className="text-green-600 font-medium">{qualityStats.accuracyScore}/100</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div
+                      className="bg-green-600 h-2.5 rounded-full"
+                      style={{ width: `${qualityStats.accuracyScore}%` }}
+                    ></div>
+                  </div>
+
+                  <div className="space-y-2 mt-4">
+                    <h4 className="text-sm font-medium">字段准确性</h4>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">手机号格式</span>
+                        <span className="text-sm">92%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "92%" }}></div>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">身份证号格式</span>
+                        <span className="text-sm">85%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "85%" }}></div>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">年龄范围</span>
+                        <span className="text-sm">95%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "95%" }}></div>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">邮箱格式</span>
+                        <span className="text-sm">78%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "78%" }}></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>数据一致性</CardTitle>
+                <CardDescription>跨系统数据一致性评分</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">总体一致性评分</span>
+                    <span className="text-green-600 font-medium">{qualityStats.consistencyScore}/100</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div
+                      className="bg-green-600 h-2.5 rounded-full"
+                      style={{ width: `${qualityStats.consistencyScore}%` }}
+                    ></div>
+                  </div>
+
+                  <div className="space-y-2 mt-4">
+                    <h4 className="text-sm font-medium">系统间一致性</h4>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">CRM与交易系统</span>
+                        <span className="text-sm">90%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "90%" }}></div>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">用户数据库与行为分析</span>
+                        <span className="text-sm">85%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "85%" }}></div>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">交易系统与设备管理</span>
+                        <span className="text-sm">78%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "78%" }}></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>数据有效性</CardTitle>
+                <CardDescription>数据业务规则有效性评分</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex justify-between items-center">
+                    <span className="font-medium">总体有效性评分</span>
+                    <span className="text-green-600 font-medium">{qualityStats.validityScore}/100</span>
+                  </div>
+                  <div className="w-full bg-gray-200 rounded-full h-2.5">
+                    <div
+                      className="bg-green-600 h-2.5 rounded-full"
+                      style={{ width: `${qualityStats.validityScore}%` }}
+                    ></div>
+                  </div>
+
+                  <div className="space-y-2 mt-4">
+                    <h4 className="text-sm font-medium">业务规则有效性</h4>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">用户注册规则</span>
+                        <span className="text-sm">92%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "92%" }}></div>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">交易记录规则</span>
+                        <span className="text-sm">88%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-green-600 h-1.5 rounded-full" style={{ width: "88%" }}></div>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <div className="flex justify-between items-center">
+                        <span className="text-sm">用户行为规则</span>
+                        <span className="text-sm">75%</span>
+                      </div>
+                      <div className="w-full bg-gray-200 rounded-full h-1.5">
+                        <div className="bg-yellow-600 h-1.5 rounded-full" style={{ width: "75%" }}></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="reports" className="space-y-4">
+          <Card>
+            <CardHeader>
+              <div className="flex justify-between items-center">
+                <CardTitle>数据质量报告</CardTitle>
+                <div className="flex items-center gap-2">
+                  <Select defaultValue="weekly">
+                    <SelectTrigger className="w-[150px]">
+                      <Clock className="mr-2 h-4 w-4" />
+                      <SelectValue placeholder="报告频率" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="daily">每日报告</SelectItem>
+                      <SelectItem value="weekly">每周报告</SelectItem>
+                      <SelectItem value="monthly">每月报告</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Button variant="outline">
+                    <Download className="mr-2 h-4 w-4" />
+                    导出报告
+                  </Button>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="rounded-md border">
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>报告名称</TableHead>
+                      <TableHead>生成时间</TableHead>
+                      <TableHead>质量评分</TableHead>
+                      <TableHead>问题数量</TableHead>
+                      <TableHead>严重问题</TableHead>
+                      <TableHead className="text-right">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell className="font-medium">每周数据质量报告</TableCell>
+                      <TableCell>2023-07-21</TableCell>
+                      <TableCell>87/100</TableCell>
+                      <TableCell>156</TableCell>
+                      <TableCell>23</TableCell>
+                      <TableCell className="text-right">
+                        <Button variant="ghost" size="sm">
+                          查看
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell className="font-medium">每周数据质量报告</TableCell>
+                      <TableCell>2023-07-14</TableCell>
+                      <TableCell>85/100</TableCell>
+                      <TableCell>178</TableCell>
+                      <TableCell>31</TableCell>
+                      <TableCell className="text-right">
+                        <Button variant="ghost" size="sm">
+                          查看
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell className="font-medium">每周数据质量报告</TableCell>
+                      <TableCell>2023-07-07</TableCell>
+                      <TableCell>82/100</TableCell>
+                      <TableCell>203</TableCell>
+                      <TableCell>45</TableCell>
+                      <TableCell className="text-right">
+                        <Button variant="ghost" size="sm">
+                          查看
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell className="font-medium">每月数据质量报告</TableCell>
+                      <TableCell>2023-06-30</TableCell>
+                      <TableCell>80/100</TableCell>
+                      <TableCell>245</TableCell>
+                      <TableCell>52</TableCell>
+                      <TableCell className="text-right">
+                        <Button variant="ghost" size="sm">
+                          查看
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      {/* 问题详情对话框 */}
+      <Dialog open={!!selectedIssueId} onOpenChange={(open) => !open && setSelectedIssueId(null)}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>问题详情</DialogTitle>
+            <DialogDescription>查看和处理数据质量问题</DialogDescription>
+          </DialogHeader>
+          {selectedIssue && (
+            <div className="space-y-4 py-4">
+              <div className="flex items-center gap-4">
+                {getStatusIcon(selectedIssue.status)}
+                <div>
+                  <h3 className="font-medium text-lg">{selectedIssue.type}</h3>
+                  <p className="text-sm text-muted-foreground">{selectedIssue.description}</p>
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label className="text-sm text-muted-foreground">严重性</Label>
+                  <p className="font-medium">{getSeverityBadge(selectedIssue.severity)}</p>
+                </div>
+                <div>
+                  <Label className="text-sm text-muted-foreground">状态</Label>
+                  <p className="font-medium">{getStatusBadge(selectedIssue.status)}</p>
+                </div>
+                <div>
+                  <Label className="text-sm text-muted-foreground">数据源</Label>
+                  <p className="font-medium">{selectedIssue.dataSource}</p>
+                </div>
+                <div>
+                  <Label className="text-sm text-muted-foreground">发现时间</Label>
+                  <p className="font-medium">{selectedIssue.createdAt}</p>
+                </div>
+                <div>
+                  <Label className="text-sm text-muted-foreground">影响记录数</Label>
+                  <p className="font-medium">{selectedIssue.affectedRecords.toLocaleString()}</p>
+                </div>
+              </div>
+
+              <div>
+                <Label className="text-sm text-muted-foreground">影响字段</Label>
+                <div className="flex flex-wrap gap-2 mt-1">
+                  {selectedIssue.affectedFields.map((field, index) => (
+                    <Badge key={index} variant="outline">
+                      {field}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+
+              <Separator />
+
+              <div className="space-y-2">
+                <Label>处理状态</Label>
+                <Select
+                  value={selectedIssue.status}
+                  onValueChange={(value) =>
+                    updateIssueStatus(selectedIssue.id, value as "open" | "in_progress" | "resolved")
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="选择状态" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="open">未解决</SelectItem>
+                    <SelectItem value="in_progress">处理中</SelectItem>
+                    <SelectItem value="resolved">已解决</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label>处理备注</Label>
+                <Textarea placeholder="输入处理备注..." rows={3} />
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setSelectedIssueId(null)}>
+              关闭
+            </Button>
+            <Button onClick={() => setSelectedIssueId(null)}>保存更改</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 添加规则对话框 */}
+      <Dialog open={isAddingRule} onOpenChange={setIsAddingRule}>
+        <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="rule-name" className="text-right">
+                规则名称
+              </Label>
+              <Input id="rule-name" className="col-span-3" placeholder="例如：手机号格式检查" />
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="rule-type" className="text-right">
+                规则类型
+              </Label>
+              <Select>
+                <SelectTrigger id="rule-type" className="col-span-3">
+                  <SelectValue placeholder="选择规则类型" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="format">格式验证</SelectItem>
+                  <SelectItem value="completeness">完整性检查</SelectItem>
+                  <SelectItem value="uniqueness">唯一性检查</SelectItem>
+                  <SelectItem value="consistency">一致性检查</SelectItem>
+                  <SelectItem value="range">范围检查</SelectItem>
+                  <SelectItem value="custom">自定义规则</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="rule-severity" className="text-right">
+                严重性
+              </Label>
+              <Select>
+                <SelectTrigger id="rule-severity" className="col-span-3">
+                  <SelectValue placeholder="选择严重性" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="high">高</SelectItem>
+                  <SelectItem value="medium">中</SelectItem>
+                  <SelectItem value="low">低</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="rule-datasource" className="text-right">
+                数据源
+              </Label>
+              <Select>
+                <SelectTrigger id="rule-datasource" className="col-span-3">
+                  <SelectValue placeholder="选择数据源" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">所有数据源</SelectItem>
+                  <SelectItem value="crm">CRM系统</SelectItem>
+                  <SelectItem value="transaction">交易系统</SelectItem>
+                  <SelectItem value="user-db">用户数据库</SelectItem>
+                  <SelectItem value="behavior">行为分析平台</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="grid grid-cols-4 items-start gap-4">
+              <Label htmlFor="rule-description" className="text-right pt-2">
+                规则描述
+              </Label>
+              <Textarea
+                id="rule-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="rule-enabled">启用规则</Label>
+              </div>
+              <div className="flex items-center space-x-2 col-span-3">
+                <Switch id="rule-enabled" defaultChecked />
+                <Label htmlFor="rule-enabled">立即启用此规则</Label>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsAddingRule(false)}>
+              取消
+            </Button>
+            <Button onClick={() => setIsAddingRule(false)}>创建规则</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
diff --git a/components/data-integration/data-source-list.tsx b/components/data-integration/data-source-list.tsx
new file mode 100644
index 0000000..c5f23a3
--- /dev/null
+++ b/components/data-integration/data-source-list.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import { useState } from "react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Edit, ExternalLink, MoreHorizontal, Search, RefreshCw } from "lucide-react"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+
+interface DataSource {
+  id: string
+  name: string
+  type: "api" | "file" | "database" | "third-party"
+  status: "active" | "inactive" | "error" | "pending"
+  lastSync: Date | null
+  recordCount: number
+  createdAt: Date
+}
+
+export function DataSourceList() {
+  const [searchQuery, setSearchQuery] = useState("")
+
+  // 模拟数据
+  const dataSources: DataSource[] = [
+    {
+      id: "1",
+      name: "CRM系统用户数据",
+      type: "api",
+      status: "active",
+      lastSync: new Date(2023, 6, 15, 14, 30),
+      recordCount: 45892,
+      createdAt: new Date(2023, 3, 10),
+    },
+    {
+      id: "2",
+      name: "电商平台订单数据",
+      type: "api",
+      status: "active",
+      lastSync: new Date(2023, 6, 15, 10, 15),
+      recordCount: 128456,
+      createdAt: new Date(2023, 2, 5),
+    },
+    {
+      id: "3",
+      name: "营销活动参与用户",
+      type: "file",
+      status: "active",
+      lastSync: new Date(2023, 6, 14, 9, 45),
+      recordCount: 8754,
+      createdAt: new Date(2023, 5, 20),
+    },
+    {
+      id: "4",
+      name: "APP用户行为数据",
+      type: "api",
+      status: "error",
+      lastSync: new Date(2023, 6, 10, 16, 20),
+      recordCount: 65432,
+      createdAt: new Date(2023, 1, 15),
+    },
+    {
+      id: "5",
+      name: "社交媒体用户数据",
+      type: "third-party",
+      status: "active",
+      lastSync: new Date(2023, 6, 15, 8, 0),
+      recordCount: 32145,
+      createdAt: new Date(2023, 4, 25),
+    },
+  ]
+
+  // 过滤数据源
+  const filteredDataSources = dataSources.filter(
+    (source) =>
+      source.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      source.type.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const formatDate = (date: Date | null) => {
+    if (!date) return "从未同步"
+    return date.toLocaleString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    })
+  }
+
+  const getStatusBadge = (status: DataSource["status"]) => {
+    switch (status) {
+      case "active":
+        return <Badge className="bg-green-100 text-green-800">正常</Badge>
+      case "inactive":
+        return <Badge className="bg-gray-100 text-gray-800">未启用</Badge>
+      case "error":
+        return <Badge className="bg-red-100 text-red-800">错误</Badge>
+      case "pending":
+        return <Badge className="bg-yellow-100 text-yellow-800">待配置</Badge>
+    }
+  }
+
+  const getTypeIcon = (type: DataSource["type"]) => {
+    switch (type) {
+      case "api":
+        return <Badge className="bg-blue-100 text-blue-800">API接口</Badge>
+      case "file":
+        return <Badge className="bg-purple-100 text-purple-800">文件导入</Badge>
+      case "database":
+        return <Badge className="bg-green-100 text-green-800">数据库</Badge>
+      case "third-party":
+        return <Badge className="bg-orange-100 text-orange-800">第三方平台</Badge>
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <div className="relative w-64">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="搜索数据源..."
+            className="pl-8"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        <Button variant="outline" size="sm">
+          <RefreshCw className="h-4 w-4 mr-2" />
+          刷新状态
+        </Button>
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>数据源名称</TableHead>
+              <TableHead>类型</TableHead>
+              <TableHead>状态</TableHead>
+              <TableHead>最后同步时间</TableHead>
+              <TableHead>记录数量</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredDataSources.map((source) => (
+              <TableRow key={source.id}>
+                <TableCell className="font-medium">{source.name}</TableCell>
+                <TableCell>{getTypeIcon(source.type)}</TableCell>
+                <TableCell>{getStatusBadge(source.status)}</TableCell>
+                <TableCell>{formatDate(source.lastSync)}</TableCell>
+                <TableCell>{source.recordCount.toLocaleString()}</TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end space-x-2">
+                    <Button variant="ghost" size="icon">
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    <Button variant="ghost" size="icon">
+                      <ExternalLink className="h-4 w-4" />
+                    </Button>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreHorizontal className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem>立即同步</DropdownMenuItem>
+                        <DropdownMenuItem>查看日志</DropdownMenuItem>
+                        <DropdownMenuItem>复制配置</DropdownMenuItem>
+                        <DropdownMenuItem className="text-red-600">删除</DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}
diff --git a/components/data-integration/database-structure-viewer.tsx b/components/data-integration/database-structure-viewer.tsx
new file mode 100644
index 0000000..08d8995
--- /dev/null
+++ b/components/data-integration/database-structure-viewer.tsx
@@ -0,0 +1,293 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { Database, TableIcon, Key, Download, RefreshCw } from "lucide-react"
+import { Skeleton } from "@/components/ui/skeleton"
+
+interface TableField {
+  Field: string
+  Type: string
+  Null: string
+  Key: string
+  Default: string | null
+  Extra: string
+}
+
+interface DatabaseStructure {
+  [tableName: string]: TableField[]
+}
+
+export function DatabaseStructureViewer() {
+  const [databases, setDatabases] = useState<string[]>([])
+  const [selectedDatabase, setSelectedDatabase] = useState<string>("")
+  const [structure, setStructure] = useState<DatabaseStructure | null>(null)
+  const [loading, setLoading] = useState<boolean>(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // 获取数据库列表
+  useEffect(() => {
+    const fetchDatabases = async () => {
+      try {
+        setLoading(true)
+        const response = await fetch("/api/database-structure")
+        const result = await response.json()
+
+        if (result.success) {
+          const dbList = result.data.map((item: any) => Object.values(item)[0] as string)
+          setDatabases(dbList)
+
+          // 默认选择第一个非系统数据库
+          const nonSystemDbs = dbList.filter(
+            (db: string) => !["information_schema", "mysql", "performance_schema", "sys"].includes(db),
+          )
+          if (nonSystemDbs.length > 0) {
+            setSelectedDatabase(nonSystemDbs[0])
+          }
+        } else {
+          setError(result.message || "获取数据库列表失败")
+        }
+      } catch (err) {
+        setError("获取数据库列表失败")
+        console.error(err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchDatabases()
+  }, [])
+
+  // 获取数据库结构
+  useEffect(() => {
+    if (!selectedDatabase) return
+
+    const fetchDatabaseStructure = async () => {
+      try {
+        setLoading(true)
+        setStructure(null)
+
+        const response = await fetch(`/api/database-structure?database=${selectedDatabase}`)
+        const result = await response.json()
+
+        if (result.success) {
+          setStructure(result.data)
+          setError(null)
+        } else {
+          setError(result.message || "获取数据库结构失败")
+        }
+      } catch (err) {
+        setError("获取数据库结构失败")
+        console.error(err)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchDatabaseStructure()
+  }, [selectedDatabase])
+
+  // 获取字段类型的简化描述
+  const getSimplifiedType = (type: string) => {
+    if (type.includes("int")) return "Integer"
+    if (type.includes("varchar") || type.includes("text") || type.includes("char")) return "String"
+    if (type.includes("datetime") || type.includes("timestamp")) return "DateTime"
+    if (type.includes("date")) return "Date"
+    if (type.includes("decimal") || type.includes("float") || type.includes("double")) return "Decimal"
+    if (type.includes("bool")) return "Boolean"
+    if (type.includes("json")) return "JSON"
+    if (type.includes("blob")) return "Binary"
+    return type
+  }
+
+  // 获取字段类型的标签颜色
+  const getTypeColor = (type: string) => {
+    if (type.includes("int")) return "bg-blue-100 text-blue-800"
+    if (type.includes("varchar") || type.includes("text") || type.includes("char")) return "bg-green-100 text-green-800"
+    if (type.includes("datetime") || type.includes("timestamp") || type.includes("date"))
+      return "bg-purple-100 text-purple-800"
+    if (type.includes("decimal") || type.includes("float") || type.includes("double"))
+      return "bg-yellow-100 text-yellow-800"
+    if (type.includes("bool")) return "bg-orange-100 text-orange-800"
+    if (type.includes("json")) return "bg-indigo-100 text-indigo-800"
+    if (type.includes("blob")) return "bg-red-100 text-red-800"
+    return "bg-gray-100 text-gray-800"
+  }
+
+  // 导出数据库结构为JSON
+  const exportDatabaseStructure = () => {
+    if (!structure) return
+
+    const dataStr = JSON.stringify(structure, null, 2)
+    const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`
+
+    const exportFileDefaultName = `${selectedDatabase}-structure.json`
+
+    const linkElement = document.createElement("a")
+    linkElement.setAttribute("href", dataUri)
+    linkElement.setAttribute("download", exportFileDefaultName)
+    linkElement.click()
+  }
+
+  // 刷新数据库结构
+  const refreshDatabaseStructure = async () => {
+    if (!selectedDatabase) return
+
+    try {
+      setLoading(true)
+      setStructure(null)
+
+      const response = await fetch(`/api/database-structure?database=${selectedDatabase}`)
+      const result = await response.json()
+
+      if (result.success) {
+        setStructure(result.data)
+        setError(null)
+      } else {
+        setError(result.message || "刷新数据库结构失败")
+      }
+    } catch (err) {
+      setError("刷新数据库结构失败")
+      console.error(err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <div className="flex justify-between items-center">
+          <div>
+            <CardTitle>数据库结构查看器</CardTitle>
+            <CardDescription>查看和分析数据库表结构</CardDescription>
+          </div>
+          <div className="flex space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={refreshDatabaseStructure}
+              disabled={loading || !selectedDatabase}
+            >
+              <RefreshCw className="h-4 w-4 mr-2" />
+              刷新
+            </Button>
+            <Button variant="outline" size="sm" onClick={exportDatabaseStructure} disabled={!structure}>
+              <Download className="h-4 w-4 mr-2" />
+              导出JSON
+            </Button>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {loading && (
+          <div className="space-y-4">
+            <Skeleton className="h-8 w-full" />
+            <Skeleton className="h-64 w-full" />
+          </div>
+        )}
+
+        {error && (
+          <div className="p-4 bg-red-50 text-red-800 rounded-md">
+            <p>{error}</p>
+          </div>
+        )}
+
+        {!loading && !error && (
+          <div className="space-y-4">
+            <div className="flex space-x-2 overflow-x-auto pb-2">
+              {databases.map((db) => (
+                <Button
+                  key={db}
+                  variant={selectedDatabase === db ? "default" : "outline"}
+                  size="sm"
+                  onClick={() => setSelectedDatabase(db)}
+                >
+                  <Database className="h-4 w-4 mr-2" />
+                  {db}
+                </Button>
+              ))}
+            </div>
+
+            {structure && (
+              <div>
+                <h3 className="text-lg font-medium mb-2">数据库: {selectedDatabase}</h3>
+                <p className="text-sm text-muted-foreground mb-4">共 {Object.keys(structure).length} 张表</p>
+
+                <Accordion type="multiple" className="w-full">
+                  {Object.entries(structure).map(([tableName, fields]) => (
+                    <AccordionItem key={tableName} value={tableName}>
+                      <AccordionTrigger className="hover:bg-muted/50 px-4">
+                        <div className="flex items-center">
+                          <TableIcon className="h-4 w-4 mr-2" />
+                          <span>{tableName}</span>
+                          <Badge className="ml-2 bg-gray-100 text-gray-800">{fields.length} 字段</Badge>
+                        </div>
+                      </AccordionTrigger>
+                      <AccordionContent>
+                        <div className="rounded-md border overflow-hidden">
+                          <Table>
+                            <TableHeader>
+                              <TableRow>
+                                <TableHead className="w-[200px]">字段名</TableHead>
+                                <TableHead>类型</TableHead>
+                                <TableHead>允许空值</TableHead>
+                                <TableHead>键</TableHead>
+                                <TableHead>默认值</TableHead>
+                                <TableHead>额外</TableHead>
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {fields.map((field, index) => (
+                                <TableRow key={index}>
+                                  <TableCell className="font-medium">
+                                    {field.Field}
+                                    {field.Key === "PRI" && <Key className="h-3 w-3 ml-1 inline text-amber-500" />}
+                                  </TableCell>
+                                  <TableCell>
+                                    <Badge className={getTypeColor(field.Type)}>{getSimplifiedType(field.Type)}</Badge>
+                                    <span className="text-xs text-muted-foreground ml-2">{field.Type}</span>
+                                  </TableCell>
+                                  <TableCell>
+                                    {field.Null === "YES" ? (
+                                      <Badge variant="outline">可空</Badge>
+                                    ) : (
+                                      <Badge className="bg-red-100 text-red-800">非空</Badge>
+                                    )}
+                                  </TableCell>
+                                  <TableCell>
+                                    {field.Key === "PRI" && <Badge>主键</Badge>}
+                                    {field.Key === "UNI" && <Badge className="bg-blue-100 text-blue-800">唯一</Badge>}
+                                    {field.Key === "MUL" && (
+                                      <Badge className="bg-purple-100 text-purple-800">索引</Badge>
+                                    )}
+                                  </TableCell>
+                                  <TableCell>
+                                    {field.Default !== null ? (
+                                      field.Default
+                                    ) : (
+                                      <span className="text-muted-foreground">NULL</span>
+                                    )}
+                                  </TableCell>
+                                  <TableCell>{field.Extra}</TableCell>
+                                </TableRow>
+                              ))}
+                            </TableBody>
+                          </Table>
+                        </div>
+                      </AccordionContent>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/components/data-integration/integration-history.tsx b/components/data-integration/integration-history.tsx
new file mode 100644
index 0000000..ea37970
--- /dev/null
+++ b/components/data-integration/integration-history.tsx
@@ -0,0 +1,240 @@
+"use client"
+
+import { useState } from "react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Search, FileDown, Eye, RefreshCw } from "lucide-react"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+
+interface IntegrationRecord {
+  id: string
+  sourceId: string
+  sourceName: string
+  startTime: Date
+  endTime: Date
+  status: "success" | "failed" | "partial" | "running"
+  totalRecords: number
+  successRecords: number
+  failedRecords: number
+  notes: string
+}
+
+export function IntegrationHistory() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState("all")
+
+  // 模拟数据
+  const integrationRecords: IntegrationRecord[] = [
+    {
+      id: "1",
+      sourceId: "1",
+      sourceName: "CRM系统用户数据",
+      startTime: new Date(2023, 6, 15, 14, 30),
+      endTime: new Date(2023, 6, 15, 14, 45),
+      status: "success",
+      totalRecords: 5280,
+      successRecords: 5280,
+      failedRecords: 0,
+      notes: "完全同步成功",
+    },
+    {
+      id: "2",
+      sourceId: "2",
+      sourceName: "电商平台订单数据",
+      startTime: new Date(2023, 6, 15, 10, 15),
+      endTime: new Date(2023, 6, 15, 10, 40),
+      status: "partial",
+      totalRecords: 12500,
+      successRecords: 12350,
+      failedRecords: 150,
+      notes: "部分记录格式错误",
+    },
+    {
+      id: "3",
+      sourceId: "3",
+      sourceName: "营销活动参与用户",
+      startTime: new Date(2023, 6, 14, 9, 45),
+      endTime: new Date(2023, 6, 14, 9, 50),
+      status: "success",
+      totalRecords: 875,
+      successRecords: 875,
+      failedRecords: 0,
+      notes: "同步成功",
+    },
+    {
+      id: "4",
+      sourceId: "4",
+      sourceName: "APP用户行为数据",
+      startTime: new Date(2023, 6, 10, 16, 20),
+      endTime: new Date(2023, 6, 10, 16, 35),
+      status: "failed",
+      totalRecords: 8500,
+      successRecords: 0,
+      failedRecords: 8500,
+      notes: "API连接超时",
+    },
+    {
+      id: "5",
+      sourceId: "5",
+      sourceName: "社交媒体用户数据",
+      startTime: new Date(2023, 6, 15, 8, 0),
+      endTime: new Date(2023, 6, 15, 8, 15),
+      status: "success",
+      totalRecords: 3200,
+      successRecords: 3200,
+      failedRecords: 0,
+      notes: "同步成功",
+    },
+    {
+      id: "6",
+      sourceId: "7",
+      sourceName: "新用户注册数据",
+      startTime: new Date(2023, 6, 15, 16, 0),
+      endTime: null,
+      status: "running",
+      totalRecords: 0,
+      successRecords: 0,
+      failedRecords: 0,
+      notes: "首次同步进行中",
+    },
+  ]
+
+  // 过滤记录
+  const filteredRecords = integrationRecords.filter((record) => {
+    const matchesSearch = record.sourceName.toLowerCase().includes(searchQuery.toLowerCase())
+    const matchesStatus = statusFilter === "all" || record.status === statusFilter
+    return matchesSearch && matchesStatus
+  })
+
+  const formatDate = (date: Date | null) => {
+    if (!date) return "进行中"
+    return date.toLocaleString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+    })
+  }
+
+  const getStatusBadge = (status: IntegrationRecord["status"]) => {
+    switch (status) {
+      case "success":
+        return <Badge className="bg-green-100 text-green-800">成功</Badge>
+      case "failed":
+        return <Badge className="bg-red-100 text-red-800">失败</Badge>
+      case "partial":
+        return <Badge className="bg-yellow-100 text-yellow-800">部分成功</Badge>
+      case "running":
+        return <Badge className="bg-blue-100 text-blue-800">进行中</Badge>
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <div className="flex space-x-2">
+          <div className="relative w-64">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="搜索数据源..."
+              className="pl-8"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger className="w-[150px]">
+              <SelectValue placeholder="状态筛选" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部状态</SelectItem>
+              <SelectItem value="success">成功</SelectItem>
+              <SelectItem value="failed">失败</SelectItem>
+              <SelectItem value="partial">部分成功</SelectItem>
+              <SelectItem value="running">进行中</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <Button variant="outline">
+          <RefreshCw className="mr-2 h-4 w-4" />
+          刷新
+        </Button>
+      </div>
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>数据源</TableHead>
+              <TableHead>开始时间</TableHead>
+              <TableHead>结束时间</TableHead>
+              <TableHead>状态</TableHead>
+              <TableHead>总记录数</TableHead>
+              <TableHead>成功数</TableHead>
+              <TableHead>失败数</TableHead>
+              <TableHead>备注</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredRecords.map((record) => (
+              <TableRow key={record.id}>
+                <TableCell className="font-medium">{record.sourceName}</TableCell>
+                <TableCell>{formatDate(record.startTime)}</TableCell>
+                <TableCell>{formatDate(record.endTime)}</TableCell>
+                <TableCell>{getStatusBadge(record.status)}</TableCell>
+                <TableCell>{record.totalRecords.toLocaleString()}</TableCell>
+                <TableCell>{record.successRecords.toLocaleString()}</TableCell>
+                <TableCell>{record.failedRecords.toLocaleString()}</TableCell>
+                <TableCell>{record.notes}</TableCell>
+                <TableCell className="text-right">
+                  <div className="flex justify-end space-x-2">
+                    <Button variant="ghost" size="icon">
+                      <Eye className="h-4 w-4" />
+                    </Button>
+                    <Button variant="ghost" size="icon">
+                      <FileDown className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">1</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#" isActive>
+              2
+            </PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">3</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  )
+}
diff --git a/components/device-grid.tsx b/components/device-grid.tsx
new file mode 100644
index 0000000..aa48631
--- /dev/null
+++ b/components/device-grid.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Smartphone, Battery, Users, MessageCircle } from "lucide-react"
+import { Checkbox } from "@/components/ui/checkbox"
+
+export interface Device {
+  id: string
+  imei: string
+  name: string
+  remark: string
+  status: "online" | "offline"
+  battery: number
+  wechatId: string
+  friendCount: number
+  todayAdded: number
+  messageCount: number
+  lastActive: string
+  addFriendStatus: "normal" | "abnormal"
+}
+
+interface DeviceGridProps {
+  devices: Device[]
+  selectable?: boolean
+  selectedDevices?: string[]
+  onSelect?: (deviceIds: string[]) => void
+  deviceStatuses?: Record<string, { status: "online" | "offline"; battery: number }>
+}
+
+export function DeviceGrid({ devices, selectable, selectedDevices, onSelect, deviceStatuses }: DeviceGridProps) {
+  return (
+    <div className="grid grid-cols-2 gap-4">
+      {devices.map((device) => {
+        const currentStatus = deviceStatuses?.[device.id] || device
+        return (
+          <Card
+            key={device.id}
+            className={`p-4 relative ${selectable && selectedDevices?.includes(device.id) ? "ring-2 ring-blue-500" : ""}`}
+          >
+            {selectable && (
+              <div className="absolute top-2 left-2">
+                <Checkbox
+                  checked={selectedDevices?.includes(device.id)}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      onSelect?.([...(selectedDevices ?? []), device.id])
+                    } else {
+                      onSelect?.(selectedDevices?.filter((id) => id !== device.id) ?? [])
+                    }
+                  }}
+                />
+              </div>
+            )}
+            <div className="flex flex-col space-y-4">
+              <div className="flex items-center justify-between">
+                <Badge variant={currentStatus.status === "online" ? "success" : "secondary"}>
+                  {currentStatus.status === "online" ? "在线" : "离线"}
+                </Badge>
+                <div className="flex items-center space-x-2">
+                  <Battery className={`w-4 h-4 ${currentStatus.battery < 20 ? "text-red-500" : "text-green-500"}`} />
+                  <span className="text-sm">{currentStatus.battery}%</span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2">
+                  <Smartphone className="w-4 h-4 text-gray-400" />
+                  <div>
+                    <div className="text-sm font-medium">{device.name}</div>
+                    <div className="text-xs text-gray-500">IMEI-{device.imei}</div>
+                  </div>
+                </div>
+                {device.remark && <div className="text-xs text-gray-500">备注: {device.remark}</div>}
+              </div>
+
+              <div className="grid grid-cols-2 gap-2">
+                <div className="flex items-center space-x-1">
+                  <Users className="w-4 h-4 text-gray-400" />
+                  <span className="text-sm">{device.friendCount}</span>
+                </div>
+                <div className="flex items-center space-x-1">
+                  <MessageCircle className="w-4 h-4 text-gray-400" />
+                  <span className="text-sm">{device.messageCount}</span>
+                </div>
+              </div>
+
+              <div className="text-xs text-gray-500">
+                <div>微信号：{device.wechatId}</div>
+                <div>今日添加：{device.todayAdded}</div>
+                <div>
+                  加友状态：
+                  <Badge variant={device.addFriendStatus === "normal" ? "success" : "destructive"}>
+                    {device.addFriendStatus === "normal" ? "正常" : "异常"}
+                  </Badge>
+                </div>
+              </div>
+            </div>
+          </Card>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/components/documentation/document-generator.tsx b/components/documentation/document-generator.tsx
new file mode 100644
index 0000000..97c67e9
--- /dev/null
+++ b/components/documentation/document-generator.tsx
@@ -0,0 +1,176 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Textarea } from "@/components/ui/textarea"
+import { Label } from "@/components/ui/label"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { Loader2, FileText, AlertTriangle } from "lucide-react"
+import { generateDocx } from "@/lib/documentation/docx-generator"
+
+interface DocumentSection {
+  title: string
+  path: string
+  description: string
+  screenshot: string
+}
+
+interface DocumentGeneratorProps {
+  pages: Array<{ path: string; title: string; description: string }>
+  screenshots: Record<string, string>
+  onDocumentGenerated: (url: string) => void
+}
+
+export default function DocumentGenerator({ pages, screenshots, onDocumentGenerated }: DocumentGeneratorProps) {
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [sections, setSections] = useState<DocumentSection[]>([])
+  const [descriptions, setDescriptions] = useState<Record<string, string>>({})
+
+  // 初始化页面描述
+  useEffect(() => {
+    const initialDescriptions: Record<string, string> = {}
+    pages.forEach((page) => {
+      initialDescriptions[page.path] = page.description || ""
+    })
+    setDescriptions(initialDescriptions)
+  }, [pages])
+
+  // 更新页面描述
+  const updateDescription = (path: string, description: string) => {
+    setDescriptions((prev) => ({
+      ...prev,
+      [path]: description,
+    }))
+  }
+
+  // 准备文档部分
+  useEffect(() => {
+    const newSections = pages
+      .filter((page) => screenshots[page.path])
+      .map((page) => ({
+        title: page.title,
+        path: page.path,
+        description: descriptions[page.path] || page.description || "",
+        screenshot: screenshots[page.path],
+      }))
+
+    setSections(newSections)
+  }, [pages, screenshots, descriptions])
+
+  // 生成文档
+  const generateDocument = async () => {
+    if (sections.length === 0) {
+      setError("没有可用的截图，请先捕获页面截图")
+      return
+    }
+
+    setIsGenerating(true)
+    setError(null)
+
+    try {
+      console.log("开始生成文档...")
+      console.log("文档部分数量:", sections.length)
+
+      // 准备文档数据
+      const documentData = {
+        title: "用户数据资产中台使用手册",
+        author: "系统管理员",
+        date: new Date().toLocaleDateString("zh-CN"),
+        sections: sections,
+      }
+
+      console.log("文档数据准备完成")
+
+      // 生成Word文档
+      const docxUrl = await generateDocx(documentData)
+      console.log("文档生成成功:", docxUrl)
+
+      // 调用回调函数
+      onDocumentGenerated(docxUrl)
+    } catch (error) {
+      console.error("生成文档时出错:", error)
+      setError(`生成文档时出错: ${error instanceof Error ? error.message : String(error)}`)
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">文档内容编辑</h2>
+        <Button
+          onClick={generateDocument}
+          disabled={isGenerating || sections.length === 0}
+          className="flex items-center gap-2"
+        >
+          {isGenerating ? (
+            <>
+              <Loader2 className="h-4 w-4 animate-spin" />
+              生成中...
+            </>
+          ) : (
+            <>
+              <FileText className="h-4 w-4" />
+              生成文档
+            </>
+          )}
+        </Button>
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {sections.length === 0 ? (
+        <div className="text-center py-8">
+          <p className="text-gray-500">没有可用的截图</p>
+          <p className="text-sm text-gray-400 mt-1">请先捕获页面截图</p>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <p className="text-sm text-gray-500">
+            已捕获 {sections.length} 个页面的截图。您可以编辑每个页面的描述，然后生成文档。
+          </p>
+
+          {sections.map((section) => (
+            <Card key={section.path} className="overflow-hidden">
+              <CardContent className="p-4">
+                <div className="flex flex-col md:flex-row gap-4">
+                  <div className="md:w-1/3">
+                    <div className="border rounded-md overflow-hidden">
+                      <img
+                        src={section.screenshot || "/placeholder.svg"}
+                        alt={section.title}
+                        className="w-full h-auto object-contain"
+                      />
+                    </div>
+                    <p className="text-sm font-medium mt-2">{section.title}</p>
+                    <p className="text-xs text-gray-500">{section.path}</p>
+                  </div>
+                  <div className="md:w-2/3">
+                    <div className="space-y-2">
+                      <Label htmlFor={`desc-${section.path}`}>页面描述</Label>
+                      <Textarea
+                        id={`desc-${section.path}`}
+                        value={descriptions[section.path] || ""}
+                        onChange={(e) => updateDescription(section.path, e.target.value)}
+                        placeholder="输入此页面的详细描述"
+                        rows={6}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/documentation/export-controls.tsx b/components/documentation/export-controls.tsx
new file mode 100644
index 0000000..f1836b5
--- /dev/null
+++ b/components/documentation/export-controls.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { FileDown, FileText, Copy } from "lucide-react"
+
+interface ExportControlsProps {
+  documentUrl: string | null
+  onError: (error: string) => void
+}
+
+export default function ExportControls({ documentUrl, onError }: ExportControlsProps) {
+  const handleDownload = () => {
+    if (!documentUrl) {
+      onError("没有可下载的文档")
+      return
+    }
+
+    try {
+      // 创建一个临时链接并触发下载
+      const link = document.createElement("a")
+      link.href = documentUrl
+      link.download = "用户数据资产中台使用手册.docx"
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    } catch (err) {
+      onError(`下载文档时出错: ${err instanceof Error ? err.message : String(err)}`)
+    }
+  }
+
+  const handlePreview = () => {
+    if (!documentUrl) {
+      onError("没有可预览的文档")
+      return
+    }
+
+    try {
+      // 在新窗口中打开文档
+      window.open(documentUrl, "_blank")
+    } catch (err) {
+      onError(`预览文档时出错: ${err instanceof Error ? err.message : String(err)}`)
+    }
+  }
+
+  const handleCopyLink = () => {
+    if (!documentUrl) {
+      onError("没有可复制的文档链接")
+      return
+    }
+
+    try {
+      // 复制链接到剪贴板
+      navigator.clipboard
+        .writeText(documentUrl)
+        .then(() => {
+          alert("文档链接已复制到剪贴板")
+        })
+        .catch((err) => {
+          onError(`复制链接时出错: ${err instanceof Error ? err.message : String(err)}`)
+        })
+    } catch (err) {
+      onError(`复制链接时出错: ${err instanceof Error ? err.message : String(err)}`)
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      {documentUrl ? (
+        <div className="space-y-4">
+          <div className="flex flex-col sm:flex-row gap-3">
+            <Button onClick={handleDownload} className="flex items-center gap-2">
+              <FileDown className="h-4 w-4" />
+              <span>下载Word文档</span>
+            </Button>
+
+            <Button onClick={handlePreview} variant="outline" className="flex items-center gap-2">
+              <FileText className="h-4 w-4" />
+              <span>预览文档</span>
+            </Button>
+
+            <Button onClick={handleCopyLink} variant="outline" className="flex items-center gap-2">
+              <Copy className="h-4 w-4" />
+              <span>复制链接</span>
+            </Button>
+          </div>
+
+          <div className="p-4 bg-gray-50 rounded-md border text-sm">
+            <p className="font-medium mb-2">文档已生成</p>
+            <p className="text-gray-500 break-all">{documentUrl}</p>
+          </div>
+        </div>
+      ) : (
+        <div className="text-center py-8 text-gray-500">
+          <p>尚未生成文档</p>
+          <p className="text-sm mt-2">请先完成文档生成步骤</p>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/documentation/screenshot-capture.tsx b/components/documentation/screenshot-capture.tsx
new file mode 100644
index 0000000..2af6c6e
--- /dev/null
+++ b/components/documentation/screenshot-capture.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { Card } from "@/components/ui/card"
+import { captureScreenshot } from "@/lib/documentation/screenshot-service"
+
+interface ScreenshotCaptureProps {
+  pages: Array<{ path: string; title: string; description: string }>
+  isCapturing: boolean
+  onScreenshotCaptured: (path: string, dataUrl: string) => void
+  onCaptureComplete: () => void
+  onError: (error: string) => void
+}
+
+export default function ScreenshotCapture({
+  pages,
+  isCapturing,
+  onScreenshotCaptured,
+  onCaptureComplete,
+  onError,
+}: ScreenshotCaptureProps) {
+  const [currentPageIndex, setCurrentPageIndex] = useState(-1)
+  const [currentStatus, setCurrentStatus] = useState("")
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+  const baseUrl = typeof window !== "undefined" ? window.location.origin : ""
+
+  useEffect(() => {
+    if (isCapturing && pages.length > 0) {
+      // 开始捕获过程
+      setCurrentPageIndex(0)
+    } else if (!isCapturing) {
+      setCurrentPageIndex(-1)
+      setCurrentStatus("")
+    }
+  }, [isCapturing, pages])
+
+  useEffect(() => {
+    if (currentPageIndex >= 0 && currentPageIndex < pages.length) {
+      const capturePage = async () => {
+        const page = pages[currentPageIndex]
+        const fullPath = `${baseUrl}${page.path}`
+
+        try {
+          setCurrentStatus(`正在加载页面: ${page.title}`)
+
+          // 等待iframe加载完成
+          if (iframeRef.current) {
+            iframeRef.current.src = fullPath
+
+            // 监听iframe加载完成事件
+            const handleLoad = async () => {
+              try {
+                setCurrentStatus(`正在捕获页面: ${page.title}`)
+
+                // 给页面一些时间完全渲染
+                await new Promise((resolve) => setTimeout(resolve, 2000))
+
+                // 捕获截图
+                const screenshot = await captureScreenshot(iframeRef.current!)
+                onScreenshotCaptured(page.path, screenshot)
+
+                // 移动到下一页
+                if (currentPageIndex < pages.length - 1) {
+                  setCurrentPageIndex(currentPageIndex + 1)
+                } else {
+                  // 所有页面都已捕获
+                  onCaptureComplete()
+                }
+              } catch (err) {
+                onError(`捕获页面 ${page.title} 截图时出错: ${err instanceof Error ? err.message : String(err)}`)
+              }
+            }
+
+            iframeRef.current.onload = handleLoad
+          }
+        } catch (err) {
+          onError(`加载页面 ${page.title} 时出错: ${err instanceof Error ? err.message : String(err)}`)
+
+          // 尝试继续下一页
+          if (currentPageIndex < pages.length - 1) {
+            setCurrentPageIndex(currentPageIndex + 1)
+          } else {
+            onCaptureComplete()
+          }
+        }
+      }
+
+      capturePage()
+    }
+  }, [currentPageIndex, pages, onScreenshotCaptured, onCaptureComplete, onError, baseUrl])
+
+  return (
+    <div className="space-y-4">
+      {isCapturing && currentPageIndex >= 0 && currentPageIndex < pages.length && (
+        <div className="space-y-2">
+          <p className="text-sm text-gray-500">{currentStatus}</p>
+          <p className="text-sm font-medium">
+            正在处理: {currentPageIndex + 1} / {pages.length} - {pages[currentPageIndex].title}
+          </p>
+
+          <Card className="overflow-hidden border-2 border-blue-200 bg-blue-50">
+            <div className="relative pt-[56.25%]">
+              {" "}
+              {/* 16:9 宽高比 */}
+              <iframe ref={iframeRef} className="absolute top-0 left-0 w-full h-full" title="页面预览" />
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {!isCapturing && (
+        <div className="text-center py-8 text-gray-500">
+          <p>点击"开始捕获"按钮开始截图过程</p>
+          <p className="text-sm mt-2">将依次捕获 {pages.length} 个页面的截图</p>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/icons/apple-icon.tsx b/components/icons/apple-icon.tsx
new file mode 100644
index 0000000..9b95cda
--- /dev/null
+++ b/components/icons/apple-icon.tsx
@@ -0,0 +1,11 @@
+import type React from "react"
+
+export function AppleIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" height="24" width="24" {...props}>
+      <path d="M14.94 5.19A4.38 4.38 0 0016 2a4.44 4.44 0 00-3 1.52 4.17 4.17 0 00-1 3.09 3.69 3.69 0 002.94-1.42zm2.52 7.44a4.51 4.51 0 012.16-3.81 4.66 4.66 0 00-3.66-2c-1.56-.16-3 .91-3.83.91s-2-.89-3.3-.87a4.92 4.92 0 00-4.14 2.53C2.93 12.45 4.24 17 6 19.47c.8 1.21 1.8 2.58 3.12 2.53s1.75-.82 3.28-.82 2 .82 3.3.79 2.22-1.24 3.06-2.45a11 11 0 001.38-2.85 4.41 4.41 0 01-2.68-4.04z" />
+    </svg>
+  )
+}
+
+export default AppleIcon
diff --git a/components/icons/wechat-icon.tsx b/components/icons/wechat-icon.tsx
new file mode 100644
index 0000000..33675a3
--- /dev/null
+++ b/components/icons/wechat-icon.tsx
@@ -0,0 +1,12 @@
+import type React from "react"
+
+export function WeChatIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" height="24" width="24" {...props}>
+      <path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 0 0 .167-.054l1.903-1.114a.864.864 0 0 1 .717-.098 10.16 10.16 0 0 0 2.837.403c.276 0 .543-.027.81-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.595-6.348zM5.959 5.48c.609 0 1.104.498 1.104 1.112 0 .612-.495 1.11-1.104 1.11-.612 0-1.108-.498-1.108-1.11 0-.614.496-1.112 1.108-1.112zm5.315 0c.61 0 1.107.498 1.107 1.112 0 .612-.497 1.11-1.107 1.11-.611 0-1.105-.498-1.105-1.11 0-.614.494-1.112 1.105-1.112z" />
+      <path d="M23.002 15.816c0-3.309-3.136-6-7-6-3.863 0-7 2.691-7 6 0 3.31 3.137 6 7 6 .814 0 1.601-.099 2.338-.285a.7.7 0 0 1 .579.08l1.5.87a.267.267 0 0 0 .135.044c.13 0 .236-.108.236-.241 0-.06-.023-.118-.038-.17l-.309-1.167a.476.476 0 0 1 .172-.534c1.645-1.17 2.387-2.835 2.387-4.597zm-9.498-1.19c-.497 0-.9-.407-.9-.908a.905.905 0 0 1 .9-.91c.498 0 .9.408.9.91 0 .5-.402.908-.9.908zm4.998 0c-.497 0-.9-.407-.9-.908a.905.905 0 0 1 .9-.91c.498 0 .9.408.9.91 0 .5-.402.908-.9.908z" />
+    </svg>
+  )
+}
+
+export default WeChatIcon
diff --git a/components/poster-selector.tsx b/components/poster-selector.tsx
new file mode 100644
index 0000000..24cf5f7
--- /dev/null
+++ b/components/poster-selector.tsx
@@ -0,0 +1,84 @@
+"use client"
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Check } from "lucide-react"
+
+interface PosterTemplate {
+  id: string
+  title: string
+  type: "领取" | "了解"
+  imageUrl: string
+}
+
+interface PosterSelectorProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSelect: (template: PosterTemplate) => void
+}
+
+const templates: PosterTemplate[] = [
+  {
+    id: "1",
+    title: "点击领取",
+    type: "领取",
+    imageUrl: "/placeholder.svg?height=400&width=300",
+  },
+  {
+    id: "2",
+    title: "点击了解",
+    type: "了解",
+    imageUrl: "/placeholder.svg?height=400&width=300",
+  },
+  // ... 其他模板
+]
+
+export function PosterSelector({ open, onOpenChange, onSelect }: PosterSelectorProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>选择海报</DialogTitle>
+        </DialogHeader>
+
+        <div>
+          <h3 className="text-sm text-gray-500 mb-4">点击下方海报使用该模板</h3>
+          <div className="grid grid-cols-3 gap-6">
+            {templates.map((template) => (
+              <div
+                key={template.id}
+                className="group relative cursor-pointer"
+                onClick={() => {
+                  onSelect(template)
+                  onOpenChange(false)
+                }}
+              >
+                <div className="aspect-[3/4] rounded-lg overflow-hidden bg-gray-100">
+                  <img
+                    src={template.imageUrl || "/placeholder.svg"}
+                    alt={template.title}
+                    className="w-full h-full object-cover transition-transform group-hover:scale-105"
+                  />
+                </div>
+                <div className="absolute inset-0 flex items-center justify-center opacity-0 bg-black/50 group-hover:opacity-100 transition-opacity">
+                  <Check className="w-8 h-8 text-white" />
+                </div>
+                <div className="mt-2 text-center">
+                  <div className="font-medium">{template.title}</div>
+                  <div className="text-sm text-gray-500">{template.type}类型</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex justify-end space-x-2 mt-4">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            关闭
+          </Button>
+          <Button>新建海报</Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/components/tag-management/tag-category-chart.tsx b/components/tag-management/tag-category-chart.tsx
new file mode 100644
index 0000000..4fa8eb3
--- /dev/null
+++ b/components/tag-management/tag-category-chart.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from "recharts"
+
+const data = [
+  { name: "用户价值", value: 25 },
+  { name: "人口属性", value: 18 },
+  { name: "兴趣爱好", value: 22 },
+  { name: "流失风险", value: 12 },
+  { name: "地理位置", value: 15 },
+  { name: "活跃时间", value: 10 },
+  { name: "消费能力", value: 14 },
+  { name: "渠道来源", value: 12 },
+]
+
+const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884d8", "#82ca9d", "#ffc658", "#8dd1e1"]
+
+export function TagCategoryChart() {
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <PieChart>
+        <Pie
+          data={data}
+          cx="50%"
+          cy="50%"
+          labelLine={false}
+          outerRadius={80}
+          fill="#8884d8"
+          dataKey="value"
+          label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
+        >
+          {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+          ))}
+        </Pie>
+        <Tooltip />
+        <Legend />
+      </PieChart>
+    </ResponsiveContainer>
+  )
+}
diff --git a/components/tag-management/tag-relationship-graph.tsx b/components/tag-management/tag-relationship-graph.tsx
new file mode 100644
index 0000000..b2c3543
--- /dev/null
+++ b/components/tag-management/tag-relationship-graph.tsx
@@ -0,0 +1,149 @@
+"use client"
+
+import { useEffect, useRef } from "react"
+import * as d3 from "d3"
+
+interface Node {
+  id: string
+  name: string
+  category: string
+  value: number
+}
+
+interface Link {
+  source: string
+  target: string
+  value: number
+}
+
+const mockData = {
+  nodes: [
+    { id: "1", name: "高价值用户", category: "用户价值", value: 20 },
+    { id: "2", name: "90后", category: "人口属性", value: 15 },
+    { id: "3", name: "游戏爱好者", category: "兴趣爱好", value: 18 },
+    { id: "4", name: "流失风险高", category: "流失风险", value: 12 },
+    { id: "5", name: "北京地区", category: "地理位置", value: 10 },
+    { id: "6", name: "周末活跃", category: "活跃时间", value: 14 },
+    { id: "7", name: "高消费", category: "消费能力", value: 16 },
+    { id: "8", name: "App渠道", category: "渠道来源", value: 8 },
+  ],
+  links: [
+    { source: "1", target: "7", value: 5 },
+    { source: "2", target: "3", value: 8 },
+    { source: "2", target: "6", value: 3 },
+    { source: "3", target: "7", value: 6 },
+    { source: "4", target: "6", value: 4 },
+    { source: "5", target: "8", value: 2 },
+    { source: "6", target: "3", value: 7 },
+    { source: "7", target: "8", value: 3 },
+    { source: "1", target: "3", value: 5 },
+    { source: "2", target: "5", value: 4 },
+    { source: "4", target: "1", value: 6 },
+  ],
+}
+
+const categoryColors = {
+  用户价值: "#0088FE",
+  人口属性: "#00C49F",
+  兴趣爱好: "#FFBB28",
+  流失风险: "#FF8042",
+  地理位置: "#8884d8",
+  活跃时间: "#82ca9d",
+  消费能力: "#ffc658",
+  渠道来源: "#8dd1e1",
+}
+
+export function TagRelationshipGraph() {
+  const svgRef = useRef<SVGSVGElement>(null)
+
+  useEffect(() => {
+    if (!svgRef.current) return
+
+    const svg = d3.select(svgRef.current)
+    svg.selectAll("*").remove()
+
+    const width = svgRef.current.clientWidth
+    const height = svgRef.current.clientHeight
+
+    // 创建力导向图
+    const simulation = d3
+      .forceSimulation(mockData.nodes as d3.SimulationNodeDatum[])
+      .force(
+        "link",
+        d3
+          .forceLink(mockData.links)
+          .id((d: any) => d.id)
+          .distance(100),
+      )
+      .force("charge", d3.forceManyBody().strength(-200))
+      .force("center", d3.forceCenter(width / 2, height / 2))
+
+    // 绘制连线
+    const link = svg
+      .append("g")
+      .attr("stroke", "#999")
+      .attr("stroke-opacity", 0.6)
+      .selectAll("line")
+      .data(mockData.links)
+      .join("line")
+      .attr("stroke-width", (d) => Math.sqrt(d.value))
+
+    // 绘制节点
+    const node = svg
+      .append("g")
+      .selectAll("circle")
+      .data(mockData.nodes)
+      .join("circle")
+      .attr("r", (d) => d.value * 0.8)
+      .attr("fill", (d) => categoryColors[d.category as keyof typeof categoryColors])
+      .call(d3.drag<SVGCircleElement, Node>().on("start", dragstarted).on("drag", dragged).on("end", dragended) as any)
+
+    // 添加标签
+    const text = svg
+      .append("g")
+      .selectAll("text")
+      .data(mockData.nodes)
+      .join("text")
+      .text((d) => d.name)
+      .attr("font-size", 10)
+      .attr("dx", 15)
+      .attr("dy", 4)
+
+    // 更新位置
+    simulation.on("tick", () => {
+      link
+        .attr("x1", (d: any) => d.source.x)
+        .attr("y1", (d: any) => d.source.y)
+        .attr("x2", (d: any) => d.target.x)
+        .attr("y2", (d: any) => d.target.y)
+
+      node.attr("cx", (d: any) => d.x).attr("cy", (d: any) => d.y)
+
+      text.attr("x", (d: any) => d.x).attr("y", (d: any) => d.y)
+    })
+
+    // 拖拽函数
+    function dragstarted(event: any, d: any) {
+      if (!event.active) simulation.alphaTarget(0.3).restart()
+      d.fx = d.x
+      d.fy = d.y
+    }
+
+    function dragged(event: any, d: any) {
+      d.fx = event.x
+      d.fy = event.y
+    }
+
+    function dragended(event: any, d: any) {
+      if (!event.active) simulation.alphaTarget(0)
+      d.fx = null
+      d.fy = null
+    }
+
+    return () => {
+      simulation.stop()
+    }
+  }, [])
+
+  return <svg ref={svgRef} width="100%" height="100%" />
+}
diff --git a/components/tag-management/tag-usage-stats.tsx b/components/tag-management/tag-usage-stats.tsx
new file mode 100644
index 0000000..4759fb2
--- /dev/null
+++ b/components/tag-management/tag-usage-stats.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"
+
+const data = [
+  {
+    name: "营销系统",
+    使用标签数: 85,
+  },
+  {
+    name: "推荐系统",
+    使用标签数: 72,
+  },
+  {
+    name: "客服系统",
+    使用标签数: 45,
+  },
+  {
+    name: "风控系统",
+    使用标签数: 38,
+  },
+  {
+    name: "内容系统",
+    使用标签数: 65,
+  },
+]
+
+export function TagUsageStats() {
+  return (
+    <ResponsiveContainer width="100%" height={300}>
+      <BarChart
+        data={data}
+        margin={{
+          top: 5,
+          right: 30,
+          left: 20,
+          bottom: 5,
+        }}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        <Bar dataKey="使用标签数" fill="#8884d8" />
+      </BarChart>
+    </ResponsiveContainer>
+  )
+}
diff --git a/components/tag-rules/rule-editor.tsx b/components/tag-rules/rule-editor.tsx
new file mode 100644
index 0000000..f7e31a4
--- /dev/null
+++ b/components/tag-rules/rule-editor.tsx
@@ -0,0 +1,277 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { AlertTriangle, Check } from "lucide-react"
+
+interface RuleEditorProps {
+  ruleId: string | null
+}
+
+export function RuleEditor({ ruleId }: RuleEditorProps) {
+  const [rule, setRule] = useState({
+    name: "",
+    description: "",
+    targetTag: "",
+    condition: "",
+    priority: "2",
+    status: "draft",
+    sql: "",
+  })
+  const [activeTab, setActiveTab] = useState("visual")
+  const [validationResult, setValidationResult] = useState<{
+    isValid: boolean
+    message: string
+  } | null>(null)
+
+  useEffect(() => {
+    if (ruleId) {
+      // 这里应该是获取规则详情的逻辑
+      // 模拟从服务器获取数据
+      setTimeout(() => {
+        setRule({
+          name: "高价值用户识别",
+          description: "根据用户消费金额和频次识别高价值用户",
+          targetTag: "高价值用户",
+          condition: "消费金额 > 5000 AND 消费频次 > 10",
+          priority: "1",
+          status: "active",
+          sql: "SELECT user_id FROM user_behavior WHERE total_amount > 5000 AND purchase_count > 10",
+        })
+      }, 300)
+    }
+  }, [ruleId])
+
+  const handleValidate = () => {
+    // 模拟验证逻辑
+    if (rule.condition.trim() === "") {
+      setValidationResult({
+        isValid: false,
+        message: "规则条件不能为空",
+      })
+      return
+    }
+
+    if (activeTab === "sql" && rule.sql.trim() === "") {
+      setValidationResult({
+        isValid: false,
+        message: "SQL 语句不能为空",
+      })
+      return
+    }
+
+    // 模拟验证成功
+    setValidationResult({
+      isValid: true,
+      message: "规则验证通过，可以保存或执行",
+    })
+  }
+
+  const handleSave = () => {
+    // 这里应该是保存规则的逻辑
+    console.log("保存规则:", rule)
+    // 模拟保存成功
+    alert("规则保存成功")
+  }
+
+  const handleExecute = () => {
+    // 这里应该是执行规则的逻辑
+    console.log("执行规则:", rule)
+    // 模拟执行成功
+    alert("规则执行成功，影响用户 1250 人")
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{ruleId ? "编辑规则" : "创建新规则"}</CardTitle>
+        <CardDescription>
+          {ruleId ? "修改现有标签规则" : "创建新的标签生成规则"}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid grid-cols-2 gap-6">
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="rule-name">规则名称</Label>
+              <Input
+                id="rule-name"
+                value={rule.name}
+                onChange={(e) => setRule({ ...rule, name: e.target.value })}
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <Label htmlFor="rule-description">规则描述</Label>
+              <Textarea
+                id="rule-description"
+                value={rule.description}
+                onChange={(e) => setRule({ ...rule, description: e.target.value })}
+                className="mt-1"
+              />
+            </div>
+            <div>
+              <Label htmlFor="target-tag">目标标签</Label>
+              <Input
+                id="target-tag"
+                value={rule.targetTag}
+                onChange={(e) => setRule({ ...rule, targetTag: e.target.value })}
+                className="mt-1"
+              />
+            </div>
+          </div>
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="rule-priority">优先级</Label>
+              <Select
+                value={rule.priority}
+                onValueChange={(value) => setRule({ ...rule, priority: value })}
+              >
+                <SelectTrigger className="mt-1">
+                  <SelectValue placeholder="选择优先级" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="1">1 - 高</SelectItem>
+                  <SelectItem value="2">2 - 中</SelectItem>
+                  <SelectItem value="3">3 - 低</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div>
+              <Label htmlFor="rule-status">规则状态</Label>
+              <div className="flex items-center space-x-2 mt-1">
+                <Switch
+                  id="rule-status"
+                  checked={rule.status === "active"}
+                  onCheckedChange={(checked) => setRule({ ...rule, status: checked ? "active" : "draft" })}
+                />
+                <Label htmlFor="rule-status">
+                  {rule.status === "active" ? "启用" : "草稿"}
+                </Label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <Label>规则定义</Label>
+          <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="visual">可视化编辑</TabsTrigger>
+              <TabsTrigger value="sql">SQL 编辑</TabsTrigger>
+            </TabsList>
+            <TabsContent value="visual" className="space-y-4 mt-4">
+              <Textarea
+                value={rule.condition}
+                onChange={(e) => setRule({ ...rule, condition: e.target.value })}
+                placeholder="例如: 消费金额 > 5000 AND 消费频次 > 10"
+                className="min-h-[200px]"
+              />
+              <div className="bg-gray-50 p-4 rounded-md">
+                <h4 className="text-sm font-medium mb-2">可用字段</h4>
+                <div className="grid grid-cols-3 gap-2">
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 消费金额" })}>
+                    消费金额
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 消费频次" })}>
+                    消费频次
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 最近登录时间" })}>
+                    最近登录时间
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 活跃度" })}>
+                    活跃度
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 注册时间" })}>
+                    注册时间
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " 年龄" })}>
+                    年龄
+                  </Button>
+                </div>
+                <h4 className="text-sm font-medium mt-4 mb-2">操作符</h4>
+                <div className="grid grid-cols-4 gap-2">
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " >" })}>
+                    大于 (>)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " <" })}>
+                    小于 (<)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " =" })}>
+                    等于 (=)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " !=" })}>
+                    不等于 (!=)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " AND" })}>
+                    与 (AND)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " OR" })}>
+                    或 (OR)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " NOT" })}>
+                    非 (NOT)
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setRule({ ...rule, condition: rule.condition + " IN" })}>
+                    包含 (IN)
+                  </Button>
+                </div>
+              </div>
+            </TabsContent>
+            <TabsContent value="sql" className="space-y-4 mt-4">
+              <Textarea
+                value={rule.sql}
+                onChange={(e) => setRule({ ...rule, sql: e.target.value })}
+                placeholder="输入 SQL 查询语句"
+                className="min-h-[200px] font-mono"
+              />
+              <div className="bg-gray-50 p-4 rounded-md">
+                <h4 className="text-sm font-medium mb-2">SQL 模板</h4>
+                <div className="text-xs font-mono bg-gray-100 p-2 rounded">
+                  SELECT user_id FROM user_behavior WHERE total_amount > 5000 AND purchase_count > 10
+                </div>
+                <p className="text-xs text-gray-500 mt-2">
+                  SQL 查询必须返回 user_id 字段，用于标识需要打标签的用户。
+                </p>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+
+        {validationResult && (
+          <Alert variant={validationResult.isValid ? "default" : "destructive"}>
+            {validationResult.isValid ? (
+              <Check className="h-4 w-4" />
+            ) : (
+              <AlertTriangle className="h-4 w-4" />
+            )}
+            <AlertTitle>{validationResult.isValid ? "验证通过" : "验证失败"}</AlertTitle>
+            <AlertDescription>{validationResult.message}</AlertDescription>
+          </Alert>
+        )}
+      </CardContent>
+      <CardFooter className="flex justify-between">
+        <div className="flex space-x-2">
+          <Button variant="outline" onClick={handleValidate}>
+            验证规则
+          </Button>
+        </div>
+        <div className="flex space-x-2">
+          <Button variant="outline">取消</Button>
+          <Button onClick={handleSave}>保存规则</Button>
+          <Button variant="default" className="bg-green-600 hover:bg-green-700" onClick={handleExecute}>
+            执行规则
+          </Button>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/components/tag-rules/rule-execution-history.tsx b/components/tag-rules/rule-execution-history.tsx
new file mode 100644
index 0000000..772daaa
--- /dev/null
+++ b/components/tag-rules/rule-execution-history.tsx
@@ -0,0 +1,258 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent } from "@/components/ui/card"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Search, Filter, Calendar, FileText } from "lucide-react"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+
+interface ExecutionRecord {
+  id: string
+  ruleName: string
+  executionTime: string
+  duration: string
+  status: "success" | "failed" | "running"
+  affectedUsers: number
+  executedBy: string
+}
+
+const mockExecutionHistory: ExecutionRecord[] = [
+  {
+    id: "exec-001",
+    ruleName: "高价值用户识别",
+    executionTime: "2023-07-21 15:30:45",
+    duration: "45秒",
+    status: "success",
+    affectedUsers: 1250,
+    executedBy: "系统自动",
+  },
+  {
+    id: "exec-002",
+    ruleName: "游戏爱好者标记",
+    executionTime: "2023-07-21 14:45:12",
+    duration: "38秒",
+    status: "success",
+    affectedUsers: 2840,
+    executedBy: "系统自动",
+  },
+  {
+    id: "exec-003",
+    ruleName: "流失风险预警",
+    executionTime: "2023-07-21 13:20:33",
+    duration: "52秒",
+    status: "success",
+    affectedUsers: 890,
+    executedBy: "系统自动",
+  },
+  {
+    id: "exec-004",
+    ruleName: "高价值用户识别",
+    executionTime: "2023-07-20 15:30:18",
+    duration: "47秒",
+    status: "success",
+    affectedUsers: 1235,
+    executedBy: "系统自动",
+  },
+  {
+    id: "exec-005",
+    ruleName: "周末活跃用户",
+    executionTime: "2023-07-20 12:15:42",
+    duration: "1分15秒",
+    status: "success",
+    affectedUsers: 3520,
+    executedBy: "admin",
+  },
+  {
+    id: "exec-006",
+    ruleName: "潜在高转化用户",
+    executionTime: "2023-07-19 16:45:30",
+    duration: "2分08秒",
+    status: "failed",
+    affectedUsers: 0,
+    executedBy: "admin",
+  },
+  {
+    id: "exec-007",
+    ruleName: "高价值用户识别",
+    executionTime: "2023-07-19 15:30:22",
+    duration: "46秒",
+    status: "success",
+    affectedUsers: 1228,
+    executedBy: "系统自动",
+  },
+]
+
+export function RuleExecutionHistory() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedRecord, setSelectedRecord] = useState<ExecutionRecord | null>(null)
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false)
+
+  const filteredHistory = mockExecutionHistory.filter(
+    (record) =>
+      record.ruleName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      record.executedBy.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const getStatusBadge = (status: ExecutionRecord["status"]) => {
+    switch (status) {
+      case "success":
+        return <Badge className="bg-green-100 text-green-800">成功</Badge>
+      case "failed":
+        return <Badge className="bg-red-100 text-red-800">失败</Badge>
+      case "running":
+        return <Badge className="bg-blue-100 text-blue-800">执行中</Badge>
+    }
+  }
+
+  const handleViewDetails = (record: ExecutionRecord) => {
+    setSelectedRecord(record)
+    setIsDetailsOpen(true)
+  }
+
+  return (
+    <>
+      <Card>
+        <CardContent className="p-6">
+          <div className="flex justify-between items-center mb-6">
+            <h3 className="text-lg font-medium">规则执行历史</h3>
+            <div className="flex space-x-2">
+              <div className="relative w-64">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  type="text"
+                  placeholder="搜索规则名称或执行人..."
+                  className="pl-8"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+              <Button variant="outline" size="icon">
+                <Filter className="h-4 w-4" />
+              </Button>
+              <Button variant="outline" size="icon">
+                <Calendar className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>执行ID</TableHead>
+                <TableHead>规则名称</TableHead>
+                <TableHead>执行时间</TableHead>
+                <TableHead>耗时</TableHead>
+                <TableHead>状态</TableHead>
+                <TableHead>影响用户数</TableHead>
+                <TableHead>执行人</TableHead>
+                <TableHead className="text-right">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredHistory.map((record) => (
+                <TableRow key={record.id}>
+                  <TableCell className="font-mono text-xs">{record.id}</TableCell>
+                  <TableCell>{record.ruleName}</TableCell>
+                  <TableCell>{record.executionTime}</TableCell>
+                  <TableCell>{record.duration}</TableCell>
+                  <TableCell>{getStatusBadge(record.status)}</TableCell>
+                  <TableCell>{record.affectedUsers.toLocaleString()}</TableCell>
+                  <TableCell>{record.executedBy}</TableCell>
+                  <TableCell className="text-right">
+                    <Button variant="ghost" size="sm" onClick={() => handleViewDetails(record)}>
+                      <FileText className="h-4 w-4 mr-2" />
+                      详情
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* 执行详情对话框 */}
+      <Dialog open={isDetailsOpen} onOpenChange={setIsDetailsOpen}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>执行详情</DialogTitle>
+            <DialogDescription>规则执行的详细信息</DialogDescription>
+          </DialogHeader>
+          {selectedRecord && (
+            <div className="space-y-4 py-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <p className="text-sm font-medium text-gray-500">执行ID</p>
+                  <p className="font-mono">{selectedRecord.id}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">规则名称</p>
+                  <p>{selectedRecord.ruleName}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">执行时间</p>
+                  <p>{selectedRecord.executionTime}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">耗时</p>
+                  <p>{selectedRecord.duration}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">状态</p>
+                  <p>{getStatusBadge(selectedRecord.status)}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">影响用户数</p>
+                  <p>{selectedRecord.affectedUsers.toLocaleString()}</p>
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-500">执行人</p>
+                  <p>{selectedRecord.executedBy}</p>
+                </div>
+              </div>
+
+              <div>
+                <p className="text-sm font-medium text-gray-500 mb-2">执行日志</p>
+                <div className="bg-gray-50 p-4 rounded-md font-mono text-xs h-40 overflow-y-auto">
+                  {selectedRecord.status === "success" ? (
+                    <>
+                      <p>
+                        [INFO] {selectedRecord.executionTime} - 开始执行规则 "{selectedRecord.ruleName}"
+                      </p>
+                      <p>[INFO] {selectedRecord.executionTime} - 规则条件解析完成</p>
+                      <p>[INFO] {selectedRecord.executionTime} - 开始查询符合条件的用户</p>
+                      <p>
+                        [INFO] {selectedRecord.executionTime} - 查询完成，找到 {selectedRecord.affectedUsers}{" "}
+                        个符合条件的用户
+                      </p>
+                      <p>[INFO] {selectedRecord.executionTime} - 开始为用户打标签</p>
+                      <p>[INFO] {selectedRecord.executionTime} - 标签应用完成</p>
+                      <p>
+                        [INFO] {selectedRecord.executionTime} - 规则执行成功，耗时 {selectedRecord.duration}
+                      </p>
+                    </>
+                  ) : (
+                    <>
+                      <p>
+                        [INFO] {selectedRecord.executionTime} - 开始执行规则 "{selectedRecord.ruleName}"
+                      </p>
+                      <p>[INFO] {selectedRecord.executionTime} - 规则条件解析完成</p>
+                      <p>[INFO] {selectedRecord.executionTime} - 开始查询符合条件的用户</p>
+                      <p>[ERROR] {selectedRecord.executionTime} - 查询执行失败: 数据库连接超时</p>
+                      <p>
+                        [ERROR] {selectedRecord.executionTime} - 规则执行失败，耗时 {selectedRecord.duration}
+                      </p>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}
diff --git a/components/tag-tasks/task-creation.tsx b/components/tag-tasks/task-creation.tsx
new file mode 100644
index 0000000..1188c5a
--- /dev/null
+++ b/components/tag-tasks/task-creation.tsx
@@ -0,0 +1,307 @@
+"use client"
+
+import { 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Calendar } from "@/components/ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { CalendarIcon, Plus, Tag, X } from "lucide-react"
+import { format } from "date-fns"
+import { cn } from "@/lib/utils"
+
+export function TaskCreation() {
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [newTag, setNewTag] = useState("")
+  const [date, setDate] = useState<Date>()
+
+  const addTag = () => {
+    if (newTag && !selectedTags.includes(newTag)) {
+      setSelectedTags([...selectedTags, newTag])
+      setNewTag("")
+    }
+  }
+
+  const removeTag = (tag: string) => {
+    setSelectedTags(selectedTags.filter((t) => t !== tag))
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>创建标签任务</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Tabs defaultValue="basic" className="space-y-4">
+          <TabsList>
+            <TabsTrigger value="basic">基本信息</TabsTrigger>
+            <TabsTrigger value="target">目标设置</TabsTrigger>
+            <TabsTrigger value="action">动作配置</TabsTrigger>
+            <TabsTrigger value="schedule">计划设置</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="basic" className="space-y-4">
+            <div className="grid grid-cols-1 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="task-name">任务名称</Label>
+                <Input id="task-name" placeholder="输入任务名称" />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="task-description">任务描述</Label>
+                <Textarea id="task-description" placeholder="输入任务描述" />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="platform">目标平台</Label>
+                <Select>
+                  <SelectTrigger id="platform">
+                    <SelectValue placeholder="选择目标平台" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="jd">京东</SelectItem>
+                    <SelectItem value="taobao">淘宝</SelectItem>
+                    <SelectItem value="dangdang">当当网</SelectItem>
+                    <SelectItem value="xiaohongshu">小红书</SelectItem>
+                    <SelectItem value="zhihu">知乎</SelectItem>
+                    <SelectItem value="bilibili">哔哩哔哩</SelectItem>
+                    <SelectItem value="douyin">抖音</SelectItem>
+                    <SelectItem value="other">其他平台</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="priority">任务优先级</Label>
+                <Select defaultValue="medium">
+                  <SelectTrigger id="priority">
+                    <SelectValue placeholder="选择优先级" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="high">高</SelectItem>
+                    <SelectItem value="medium">中</SelectItem>
+                    <SelectItem value="low">低</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="target" className="space-y-4">
+            <div className="grid grid-cols-1 gap-4">
+              <div className="space-y-2">
+                <Label>目标用户标签</Label>
+                <div className="flex flex-wrap gap-2 mb-2">
+                  {selectedTags.map((tag) => (
+                    <Badge key={tag} variant="outline" className="flex items-center gap-1">
+                      <Tag className="h-3 w-3" />
+                      {tag}
+                      <button onClick={() => removeTag(tag)} className="ml-1">
+                        <X className="h-3 w-3" />
+                      </button>
+                    </Badge>
+                  ))}
+                </div>
+                <div className="flex space-x-2">
+                  <Input
+                    placeholder="输入标签名称"
+                    value={newTag}
+                    onChange={(e) => setNewTag(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && addTag()}
+                  />
+                  <Button type="button" size="sm" onClick={addTag}>
+                    <Plus className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="user-segment">用户分群</Label>
+                <Select>
+                  <SelectTrigger id="user-segment">
+                    <SelectValue placeholder="选择用户分群" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部用户</SelectItem>
+                    <SelectItem value="active">活跃用户</SelectItem>
+                    <SelectItem value="new">新注册用户</SelectItem>
+                    <SelectItem value="high-value">高价值用户</SelectItem>
+                    <SelectItem value="inactive">不活跃用户</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="user-count">目标用户数量</Label>
+                <Input id="user-count" type="number" placeholder="输入目标用户数量" />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="sampling-method">抽样方式</Label>
+                <Select defaultValue="random">
+                  <SelectTrigger id="sampling-method">
+                    <SelectValue placeholder="选择抽样方式" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="random">随机抽样</SelectItem>
+                    <SelectItem value="stratified">分层抽样</SelectItem>
+                    <SelectItem value="systematic">系统抽样</SelectItem>
+                    <SelectItem value="all">全量用户</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="action" className="space-y-4">
+            <div className="grid grid-cols-1 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="action-type">动作类型</Label>
+                <Select>
+                  <SelectTrigger id="action-type">
+                    <SelectValue placeholder="选择动作类型" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="login">登录检测</SelectItem>
+                    <SelectItem value="purchase">购买记录检测</SelectItem>
+                    <SelectItem value="browse">浏览行为检测</SelectItem>
+                    <SelectItem value="search">搜索行为检测</SelectItem>
+                    <SelectItem value="content">内容偏好检测</SelectItem>
+                    <SelectItem value="custom">自定义动作</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="action-params">动作参数</Label>
+                <Textarea id="action-params" placeholder="输入动作参数（JSON格式）" />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="success-criteria">成功标准</Label>
+                <Select>
+                  <SelectTrigger id="success-criteria">
+                    <SelectValue placeholder="选择成功标准" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="login-success">登录成功</SelectItem>
+                    <SelectItem value="purchase-complete">完成购买</SelectItem>
+                    <SelectItem value="browse-time">浏览时间超过阈值</SelectItem>
+                    <SelectItem value="search-count">搜索次数超过阈值</SelectItem>
+                    <SelectItem value="content-interaction">内容互动</SelectItem>
+                    <SelectItem value="custom">自定义标准</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label>新增标签设置</Label>
+                <div className="space-y-2">
+                  <div className="flex items-center space-x-2">
+                    <Input placeholder="输入新标签名称" />
+                    <Select>
+                      <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="标签分类" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="behavior">行为特征</SelectItem>
+                        <SelectItem value="preference">偏好特征</SelectItem>
+                        <SelectItem value="value">价值特征</SelectItem>
+                        <SelectItem value="lifecycle">生命周期</SelectItem>
+                        <SelectItem value="custom">自定义分类</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Button type="button" size="sm">
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2">
+                  <Switch id="auto-apply" />
+                  <Label htmlFor="auto-apply">自动应用标签</Label>
+                </div>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="schedule" className="space-y-4">
+            <div className="grid grid-cols-1 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="execution-mode">执行模式</Label>
+                <Select defaultValue="immediate">
+                  <SelectTrigger id="execution-mode">
+                    <SelectValue placeholder="选择执行模式" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="immediate">立即执行</SelectItem>
+                    <SelectItem value="scheduled">定时执行</SelectItem>
+                    <SelectItem value="recurring">周期执行</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <Label>计划执行时间</Label>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant={"outline"}
+                      className={cn("w-full justify-start text-left font-normal", !date && "text-muted-foreground")}
+                    >
+                      <CalendarIcon className="mr-2 h-4 w-4" />
+                      {date ? format(date, "PPP") : "选择日期"}
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0">
+                    <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
+                  </PopoverContent>
+                </Popover>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="execution-time">执行时间</Label>
+                <Input id="execution-time" type="time" />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="recurrence-pattern">重复模式</Label>
+                <Select disabled={true}>
+                  <SelectTrigger id="recurrence-pattern">
+                    <SelectValue placeholder="选择重复模式" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="daily">每天</SelectItem>
+                    <SelectItem value="weekly">每周</SelectItem>
+                    <SelectItem value="monthly">每月</SelectItem>
+                    <SelectItem value="custom">自定义</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center space-x-2">
+                  <Switch id="notify-completion" />
+                  <Label htmlFor="notify-completion">任务完成通知</Label>
+                </div>
+              </div>
+            </div>
+          </TabsContent>
+        </Tabs>
+
+        <div className="flex justify-end space-x-2 mt-6">
+          <Button variant="outline">取消</Button>
+          <Button>创建任务</Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/components/tag-tasks/task-execution.tsx b/components/tag-tasks/task-execution.tsx
new file mode 100644
index 0000000..aa0c7cc
--- /dev/null
+++ b/components/tag-tasks/task-execution.tsx
@@ -0,0 +1,273 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Progress } from "@/components/ui/progress"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Pause, AlertCircle, CheckCircle, RefreshCw, Tag, User } from "lucide-react"
+
+export function TaskExecution() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>任务执行状态</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="flex justify-between items-center">
+          <div>
+            <h3 className="text-lg font-medium">京东活跃用户标记</h3>
+            <p className="text-sm text-muted-foreground">识别在京东平台活跃的用户并打上相应标签</p>
+          </div>
+          <div className="flex space-x-2">
+            <Button variant="outline" size="sm">
+              <Pause className="mr-2 h-4 w-4" />
+              暂停
+            </Button>
+            <Button size="sm">
+              <RefreshCw className="mr-2 h-4 w-4" />
+              刷新状态
+            </Button>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center">
+              <Badge className="bg-blue-100 text-blue-800 mr-2">运行中</Badge>
+              <span className="text-sm text-muted-foreground">预计剩余时间: 45分钟</span>
+            </div>
+            <span className="text-sm font-medium">65%</span>
+          </div>
+          <Progress value={65} className="h-2" />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <div className="flex items-center space-x-2">
+              <User className="h-5 w-5 text-blue-500" />
+              <span className="text-sm font-medium">目标用户</span>
+            </div>
+            <div className="mt-2">
+              <span className="text-2xl font-bold">12,500</span>
+            </div>
+          </div>
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <div className="flex items-center space-x-2">
+              <CheckCircle className="h-5 w-5 text-green-500" />
+              <span className="text-sm font-medium">已处理</span>
+            </div>
+            <div className="mt-2">
+              <span className="text-2xl font-bold">8,125</span>
+            </div>
+          </div>
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <div className="flex items-center space-x-2">
+              <Tag className="h-5 w-5 text-purple-500" />
+              <span className="text-sm font-medium">已打标签</span>
+            </div>
+            <div className="mt-2">
+              <span className="text-2xl font-bold">5,840</span>
+            </div>
+          </div>
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <div className="flex items-center space-x-2">
+              <AlertCircle className="h-5 w-5 text-red-500" />
+              <span className="text-sm font-medium">失败数</span>
+            </div>
+            <div className="mt-2">
+              <span className="text-2xl font-bold">120</span>
+            </div>
+          </div>
+        </div>
+
+        <Tabs defaultValue="logs" className="space-y-4">
+          <TabsList>
+            <TabsTrigger value="logs">执行日志</TabsTrigger>
+            <TabsTrigger value="users">用户处理</TabsTrigger>
+            <TabsTrigger value="errors">错误记录</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="logs" className="space-y-4">
+            <div className="bg-black text-green-400 p-4 rounded-md font-mono text-sm h-60 overflow-y-auto">
+              <div>[2023-07-15 14:30:15] 任务开始执行</div>
+              <div>[2023-07-15 14:30:16] 正在加载目标用户列表...</div>
+              <div>[2023-07-15 14:30:20] 已加载 12,500 个目标用户</div>
+              <div>[2023-07-15 14:30:25] 开始处理用户批次 #1 (1000 users)</div>
+              <div>[2023-07-15 14:35:10] 批次 #1 处理完成: 成功 950, 失败 50</div>
+              <div>[2023-07-15 14:35:15] 开始处理用户批次 #2 (1000 users)</div>
+              <div>[2023-07-15 14:40:05] 批次 #2 处理完成: 成功 980, 失败 20</div>
+              <div>[2023-07-15 14:40:10] 开始处理用户批次 #3 (1000 users)</div>
+              <div>[2023-07-15 14:45:00] 批次 #3 处理完成: 成功 990, 失败 10</div>
+              <div>[2023-07-15 14:45:05] 开始处理用户批次 #4 (1000 users)</div>
+              <div>[2023-07-15 14:50:00] 批次 #4 处理完成: 成功 995, 失败 5</div>
+              <div>[2023-07-15 14:50:05] 开始处理用户批次 #5 (1000 users)</div>
+              <div>[2023-07-15 14:55:00] 批次 #5 处理完成: 成功 985, 失败 15</div>
+              <div>[2023-07-15 14:55:05] 开始处理用户批次 #6 (1000 users)</div>
+              <div>[2023-07-15 15:00:00] 批次 #6 处理完成: 成功 975, 失败 25</div>
+              <div>[2023-07-15 15:00:05] 开始处理用户批次 #7 (1000 users)</div>
+              <div>[2023-07-15 15:05:00] 批次 #7 处理完成: 成功 990, 失败 10</div>
+              <div>[2023-07-15 15:05:05] 开始处理用户批次 #8 (1000 users)</div>
+              <div>[2023-07-15 15:10:00] 批次 #8 处理完成: 成功 975, 失败 25</div>
+              <div>[2023-07-15 15:10:05] 已处理 8000 个用户, 剩余 4500 个用户</div>
+              <div>[2023-07-15 15:10:10] 开始处理用户批次 #9 (1000 users)</div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="users" className="space-y-4">
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>用户ID</TableHead>
+                    <TableHead>处理时间</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead>添加标签</TableHead>
+                    <TableHead>详情</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell>user_12345</TableCell>
+                    <TableCell>2023-07-15 14:32:15</TableCell>
+                    <TableCell>
+                      <Badge className="bg-green-100 text-green-800">成功</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          京东活跃用户
+                        </Badge>
+                      </div>
+                    </TableCell>
+                    <TableCell>登录成功, 近30天活跃度高</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>user_12346</TableCell>
+                    <TableCell>2023-07-15 14:32:18</TableCell>
+                    <TableCell>
+                      <Badge className="bg-green-100 text-green-800">成功</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          京东活跃用户
+                        </Badge>
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          电商偏好
+                        </Badge>
+                      </div>
+                    </TableCell>
+                    <TableCell>登录成功, 购买频率高</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>user_12347</TableCell>
+                    <TableCell>2023-07-15 14:32:20</TableCell>
+                    <TableCell>
+                      <Badge className="bg-red-100 text-red-800">失败</Badge>
+                    </TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>登录失败, 账号异常</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>user_12348</TableCell>
+                    <TableCell>2023-07-15 14:32:25</TableCell>
+                    <TableCell>
+                      <Badge className="bg-green-100 text-green-800">成功</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          京东活跃用户
+                        </Badge>
+                      </div>
+                    </TableCell>
+                    <TableCell>登录成功, 浏览时间长</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>user_12349</TableCell>
+                    <TableCell>2023-07-15 14:32:30</TableCell>
+                    <TableCell>
+                      <Badge className="bg-green-100 text-green-800">成功</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          京东活跃用户
+                        </Badge>
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          高消费用户
+                        </Badge>
+                      </div>
+                    </TableCell>
+                    <TableCell>登录成功, 消费金额高</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="errors" className="space-y-4">
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>错误ID</TableHead>
+                    <TableHead>时间</TableHead>
+                    <TableHead>用户ID</TableHead>
+                    <TableHead>错误类型</TableHead>
+                    <TableHead>错误详情</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell>err_001</TableCell>
+                    <TableCell>2023-07-15 14:32:20</TableCell>
+                    <TableCell>user_12347</TableCell>
+                    <TableCell>登录失败</TableCell>
+                    <TableCell>账号异常, 可能被锁定</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>err_002</TableCell>
+                    <TableCell>2023-07-15 14:33:15</TableCell>
+                    <TableCell>user_12356</TableCell>
+                    <TableCell>网络错误</TableCell>
+                    <TableCell>连接超时, 请求失败</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>err_003</TableCell>
+                    <TableCell>2023-07-15 14:35:05</TableCell>
+                    <TableCell>user_12378</TableCell>
+                    <TableCell>数据错误</TableCell>
+                    <TableCell>用户数据格式不正确</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>err_004</TableCell>
+                    <TableCell>2023-07-15 14:38:30</TableCell>
+                    <TableCell>user_12390</TableCell>
+                    <TableCell>权限错误</TableCell>
+                    <TableCell>无权访问用户数据</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>err_005</TableCell>
+                    <TableCell>2023-07-15 14:42:10</TableCell>
+                    <TableCell>user_12405</TableCell>
+                    <TableCell>API限流</TableCell>
+                    <TableCell>请求频率超过限制</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/components/tag-tasks/task-list.tsx b/components/tag-tasks/task-list.tsx
new file mode 100644
index 0000000..c59f17d
--- /dev/null
+++ b/components/tag-tasks/task-list.tsx
@@ -0,0 +1,197 @@
+"use client"
+
+import { useState } from "react"
+
+export function TaskList() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [openSections, setOpenSections] = useState({
+    taskList: true,
+  })
+
+  const toggleSection = (section) => {
+    setOpenSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }))
+  }
+
+  // 模拟数据
+  const tasks = [
+    {
+      id: "1",
+      name: "高价值用户标签更新",
+      type: "用户价值评估",
+      status: "running",
+      progress: 65,
+      createdAt: "2023-07-15",
+      lastRun: "2023-07-20",
+      frequency: "每日",
+      affectedTags: ["高价值用户", "中价值用户", "低价值用户"],
+    },
+    {
+      id: "2",
+      name: "行为标签生成",
+      type: "行为分析",
+      status: "completed",
+      progress: 100,
+      createdAt: "2023-07-10",
+      lastRun: "2023-07-20",
+      frequency: "每日",
+      affectedTags: ["消费地点", "消费时间", "消费菜品"],
+    },
+    {
+      id: "3",
+      name: "流失风险评估",
+      type: "风险预警",
+      status: "paused",
+      progress: 0,
+      createdAt: "2023-06-25",
+      lastRun: "2023-07-15",
+      frequency: "每周",
+      affectedTags: ["流失风险高", "流失风险中", "流失风险低"],
+    },
+    {
+      id: "4",
+      name: "兴趣标签更新",
+      type: "兴趣分析",
+      status: "scheduled",
+      progress: 0,
+      createdAt: "2023-07-01",
+      lastRun: "2023-07-18",
+      frequency: "每周",
+      affectedTags: ["美食", "旅游", "电影", "音乐"],
+    },
+    {
+      id: "5",
+      name: "消费能力评估",
+      type: "用户价值评估",
+      status: "completed",
+      progress: 100,
+      createdAt: "2023-06-20",
+      lastRun: "2023-07-19",
+      frequency: "每周",
+      affectedTags: ["高消费", "中消费", "低消费"],
+    },
+  ]
+
+  return (
+    <div className="space-y-4">
+      {/* 任务列表内容 */}
+      <div className="bg-white rounded-lg shadow">
+        <div className="p-4">
+          <h3 className="text-lg font-medium">标签任务列表</h3>
+          <p className="text-sm text-gray-500">管理和监控标签计算任务</p>
+        </div>
+        <div className="border-t">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
+                  任务名称
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
+                  类型
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
+                  状态
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
+                  进度
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                >
+                  最后运行
+                </th>
+                <th
+                  scope="col"
+                  className="px-6 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">
+              {tasks.map((task) => (
+                <tr key={task.id}>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="text-sm font-medium text-gray-900">{task.name}</div>
+                    <div className="text-sm text-gray-500">创建于 {task.createdAt}</div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="text-sm text-gray-900">{task.type}</div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <span
+                      className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
+                      ${
+                        task.status === "running"
+                          ? "bg-green-100 text-green-800"
+                          : task.status === "completed"
+                            ? "bg-blue-100 text-blue-800"
+                            : task.status === "paused"
+                              ? "bg-yellow-100 text-yellow-800"
+                              : "bg-gray-100 text-gray-800"
+                      }`}
+                    >
+                      {task.status === "running"
+                        ? "运行中"
+                        : task.status === "completed"
+                          ? "已完成"
+                          : task.status === "paused"
+                            ? "已暂停"
+                            : "已计划"}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <div className="w-full bg-gray-200 rounded-full h-2.5">
+                      <div
+                        className={`h-2.5 rounded-full ${
+                          task.status === "completed"
+                            ? "bg-blue-600"
+                            : task.status === "running"
+                              ? "bg-green-600"
+                              : "bg-gray-400"
+                        }`}
+                        style={{ width: `${task.progress}%` }}
+                      ></div>
+                    </div>
+                    <div className="text-xs text-gray-500 mt-1">{task.progress}%</div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{task.lastRun}</td>
+                  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <a href="#" className="text-indigo-600 hover:text-indigo-900 mr-3">
+                      查看
+                    </a>
+                    {task.status === "running" ? (
+                      <a href="#" className="text-yellow-600 hover:text-yellow-900">
+                        暂停
+                      </a>
+                    ) : task.status === "paused" || task.status === "scheduled" ? (
+                      <a href="#" className="text-green-600 hover:text-green-900">
+                        启动
+                      </a>
+                    ) : null}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/tag-tasks/task-results.tsx b/components/tag-tasks/task-results.tsx
new file mode 100644
index 0000000..21f68bf
--- /dev/null
+++ b/components/tag-tasks/task-results.tsx
@@ -0,0 +1,420 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+} from "recharts"
+import { Download, FileDown, Tag, User, CheckCircle, Clock } from "lucide-react"
+
+export function TaskResults() {
+  // 模拟数据
+  const tagDistributionData = [
+    { name: "京东活跃用户", value: 5840 },
+    { name: "电商偏好", value: 4250 },
+    { name: "高消费用户", value: 1850 },
+    { name: "品质生活", value: 2100 },
+    { name: "数码爱好者", value: 1450 },
+  ]
+
+  const userActionData = [
+    { name: "登录成功", value: 8125 },
+    { name: "浏览商品", value: 6540 },
+    { name: "加入购物车", value: 3250 },
+    { name: "完成购买", value: 1850 },
+    { name: "评价商品", value: 980 },
+  ]
+
+  const timeDistributionData = [
+    { name: "0-5分钟", count: 2450 },
+    { name: "5-10分钟", count: 3650 },
+    { name: "10-20分钟", count: 2850 },
+    { name: "20-30分钟", count: 1950 },
+    { name: "30+分钟", count: 1600 },
+  ]
+
+  const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#8884D8"]
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>任务结果分析</CardTitle>
+        <Button variant="outline" size="sm">
+          <FileDown className="mr-2 h-4 w-4" />
+          导出报告
+        </Button>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div>
+          <h3 className="text-lg font-medium">京东活跃用户标记</h3>
+          <div className="flex items-center space-x-2 mt-1">
+            <Badge className="bg-green-100 text-green-800">已完成</Badge>
+            <span className="text-sm text-muted-foreground">完成时间: 2023-07-15 16:15:30</span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <div className="flex items-center space-x-2">
+              <User className="h-5 w-5 text-blue-500" />
+              <span className="text-sm font-medium">目标用户</span>
+            </div>
+            <div className="mt-2">
+              <span className="text-2xl font-bold">12,500</span>
+            </div>
+          </div>
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <div className="flex items-center space-x-2">
+              <CheckCircle className="h-5 w-5 text-green-500" />
+              <span className="text-sm font-medium">成功处理</span>
+            </div>
+            <div className="mt-2">
+              <span className="text-2xl font-bold">12,380</span>
+              <span className="text-sm text-muted-foreground ml-2">99.0%</span>
+            </div>
+          </div>
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <div className="flex items-center space-x-2">
+              <Tag className="h-5 w-5 text-purple-500" />
+              <span className="text-sm font-medium">打标签用户</span>
+            </div>
+            <div className="mt-2">
+              <span className="text-2xl font-bold">8,450</span>
+              <span className="text-sm text-muted-foreground ml-2">67.6%</span>
+            </div>
+          </div>
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <div className="flex items-center space-x-2">
+              <Clock className="h-5 w-5 text-orange-500" />
+              <span className="text-sm font-medium">执行时间</span>
+            </div>
+            <div className="mt-2">
+              <span className="text-2xl font-bold">1h 45m</span>
+            </div>
+          </div>
+        </div>
+
+        <Tabs defaultValue="overview" className="space-y-4">
+          <TabsList>
+            <TabsTrigger value="overview">结果概览</TabsTrigger>
+            <TabsTrigger value="tags">标签分析</TabsTrigger>
+            <TabsTrigger value="users">用户分析</TabsTrigger>
+            <TabsTrigger value="details">详细数据</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="overview" className="space-y-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <h4 className="text-sm font-medium mb-4">标签分布</h4>
+                <div className="h-80">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                      <Pie
+                        data={tagDistributionData}
+                        cx="50%"
+                        cy="50%"
+                        labelLine={false}
+                        outerRadius={80}
+                        fill="#8884d8"
+                        dataKey="value"
+                        label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+                      >
+                        {tagDistributionData.map((entry, index) => (
+                          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                        ))}
+                      </Pie>
+                      <Tooltip />
+                      <Legend />
+                    </PieChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+              <div>
+                <h4 className="text-sm font-medium mb-4">用户行为分布</h4>
+                <div className="h-80">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart
+                      data={userActionData}
+                      margin={{
+                        top: 5,
+                        right: 30,
+                        left: 20,
+                        bottom: 5,
+                      }}
+                    >
+                      <CartesianGrid strokeDasharray="3 3" />
+                      <XAxis dataKey="name" />
+                      <YAxis />
+                      <Tooltip />
+                      <Legend />
+                      <Bar dataKey="value" fill="#8884d8" />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </div>
+              </div>
+            </div>
+            <div>
+              <h4 className="text-sm font-medium mb-4">用户停留时间分布</h4>
+              <div className="h-80">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart
+                    data={timeDistributionData}
+                    margin={{
+                      top: 5,
+                      right: 30,
+                      left: 20,
+                      bottom: 5,
+                    }}
+                  >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="name" />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="count" fill="#82ca9d" />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="tags" className="space-y-4">
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>标签名称</TableHead>
+                    <TableHead>用户数量</TableHead>
+                    <TableHead>占比</TableHead>
+                    <TableHead>标签分类</TableHead>
+                    <TableHead>创建时间</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell className="font-medium">京东活跃用户</TableCell>
+                    <TableCell>5,840</TableCell>
+                    <TableCell>46.7%</TableCell>
+                    <TableCell>行为特征</TableCell>
+                    <TableCell>2023-07-15 15:30:25</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-medium">电商偏好</TableCell>
+                    <TableCell>4,250</TableCell>
+                    <TableCell>34.0%</TableCell>
+                    <TableCell>偏好特征</TableCell>
+                    <TableCell>2023-07-15 15:35:10</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-medium">高消费用户</TableCell>
+                    <TableCell>1,850</TableCell>
+                    <TableCell>14.8%</TableCell>
+                    <TableCell>价值特征</TableCell>
+                    <TableCell>2023-07-15 15:40:30</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-medium">品质生活</TableCell>
+                    <TableCell>2,100</TableCell>
+                    <TableCell>16.8%</TableCell>
+                    <TableCell>偏好特征</TableCell>
+                    <TableCell>2023-07-15 15:45:15</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-medium">数码爱好者</TableCell>
+                    <TableCell>1,450</TableCell>
+                    <TableCell>11.6%</TableCell>
+                    <TableCell>偏好特征</TableCell>
+                    <TableCell>2023-07-15 15:50:05</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="users" className="space-y-4">
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>用户分类</TableHead>
+                    <TableHead>数量</TableHead>
+                    <TableHead>占比</TableHead>
+                    <TableHead>平均停留时间</TableHead>
+                    <TableHead>平均交互次数</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell className="font-medium">活跃购买用户</TableCell>
+                    <TableCell>3,250</TableCell>
+                    <TableCell>26.0%</TableCell>
+                    <TableCell>25分钟</TableCell>
+                    <TableCell>12.5</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-medium">浏览未购买用户</TableCell>
+                    <TableCell>4,850</TableCell>
+                    <TableCell>38.8%</TableCell>
+                    <TableCell>15分钟</TableCell>
+                    <TableCell>8.2</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-medium">短时访问用户</TableCell>
+                    <TableCell>2,450</TableCell>
+                    <TableCell>19.6%</TableCell>
+                    <TableCell>3分钟</TableCell>
+                    <TableCell>2.1</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-medium">登录未浏览用户</TableCell>
+                    <TableCell>1,830</TableCell>
+                    <TableCell>14.6%</TableCell>
+                    <TableCell>1分钟</TableCell>
+                    <TableCell>0.5</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell className="font-medium">登录失败用户</TableCell>
+                    <TableCell>120</TableCell>
+                    <TableCell>1.0%</TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>-</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="details" className="space-y-4">
+            <div className="flex justify-end mb-4">
+              <Button variant="outline" size="sm">
+                <Download className="mr-2 h-4 w-4" />
+                导出详细数据
+              </Button>
+            </div>
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>用户ID</TableHead>
+                    <TableHead>处理时间</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead>添加标签</TableHead>
+                    <TableHead>停留时间</TableHead>
+                    <TableHead>交互次数</TableHead>
+                    <TableHead>详情</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  <TableRow>
+                    <TableCell>user_12345</TableCell>
+                    <TableCell>2023-07-15 14:32:15</TableCell>
+                    <TableCell>
+                      <Badge className="bg-green-100 text-green-800">成功</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          京东活跃用户
+                        </Badge>
+                      </div>
+                    </TableCell>
+                    <TableCell>18分钟</TableCell>
+                    <TableCell>9</TableCell>
+                    <TableCell>登录成功, 近30天活跃度高</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>user_12346</TableCell>
+                    <TableCell>2023-07-15 14:32:18</TableCell>
+                    <TableCell>
+                      <Badge className="bg-green-100 text-green-800">成功</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          京东活跃用户
+                        </Badge>
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          电商偏好
+                        </Badge>
+                      </div>
+                    </TableCell>
+                    <TableCell>25分钟</TableCell>
+                    <TableCell>15</TableCell>
+                    <TableCell>登录成功, 购买频率高</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>user_12347</TableCell>
+                    <TableCell>2023-07-15 14:32:20</TableCell>
+                    <TableCell>
+                      <Badge className="bg-red-100 text-red-800">失败</Badge>
+                    </TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>-</TableCell>
+                    <TableCell>登录失败, 账号异常</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>user_12348</TableCell>
+                    <TableCell>2023-07-15 14:32:25</TableCell>
+                    <TableCell>
+                      <Badge className="bg-green-100 text-green-800">成功</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          京东活跃用户
+                        </Badge>
+                      </div>
+                    </TableCell>
+                    <TableCell>32分钟</TableCell>
+                    <TableCell>12</TableCell>
+                    <TableCell>登录成功, 浏览时间长</TableCell>
+                  </TableRow>
+                  <TableRow>
+                    <TableCell>user_12349</TableCell>
+                    <TableCell>2023-07-15 14:32:30</TableCell>
+                    <TableCell>
+                      <Badge className="bg-green-100 text-green-800">成功</Badge>
+                    </TableCell>
+                    <TableCell>
+                      <div className="flex flex-wrap gap-1">
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          京东活跃用户
+                        </Badge>
+                        <Badge variant="outline" className="flex items-center gap-1">
+                          <Tag className="h-3 w-3" />
+                          高消费用户
+                        </Badge>
+                      </div>
+                    </TableCell>
+                    <TableCell>28分钟</TableCell>
+                    <TableCell>18</TableCell>
+                    <TableCell>登录成功, 消费金额高</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100644
index 0000000..1cd216d
--- /dev/null
+++ b/components/theme-provider.tsx
@@ -0,0 +1,7 @@
+"use client"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/components/traffic-pool/pool-analytics.tsx b/components/traffic-pool/pool-analytics.tsx
new file mode 100644
index 0000000..1f98857
--- /dev/null
+++ b/components/traffic-pool/pool-analytics.tsx
@@ -0,0 +1,212 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+
+export function PoolAnalytics() {
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">流量池分析</h2>
+        <div className="flex space-x-2">
+          <Select defaultValue="7days">
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="选择时间范围" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="7days">最近7天</SelectItem>
+              <SelectItem value="30days">最近30天</SelectItem>
+              <SelectItem value="90days">最近90天</SelectItem>
+              <SelectItem value="custom">自定义范围</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">总流量池数量</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">12</div>
+            <p className="text-xs text-muted-foreground">较上月增长 2个</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">活跃流量池</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">8</div>
+            <p className="text-xs text-muted-foreground">较上月增长 1个</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">流量池转化率</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">24.8%</div>
+            <p className="text-xs text-muted-foreground">较上月提升 2.3%</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="overview">
+        <TabsList>
+          <TabsTrigger value="overview">概览</TabsTrigger>
+          <TabsTrigger value="performance">性能分析</TabsTrigger>
+          <TabsTrigger value="conversion">转化分析</TabsTrigger>
+        </TabsList>
+        <TabsContent value="overview" className="space-y-4">
+          <Card className="p-4">
+            <CardHeader>
+              <CardTitle>流量池增长趋势</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="h-[300px] flex items-center justify-center">
+                <p className="text-muted-foreground">图表功能已移除</p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="performance" className="space-y-4">
+          <Card className="p-4">
+            <CardHeader>
+              <CardTitle>流量池性能指标</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="h-[300px] flex items-center justify-center">
+                <p className="text-muted-foreground">图表功能已移除</p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="conversion" className="space-y-4">
+          <Card className="p-4">
+            <CardHeader>
+              <CardTitle>流量池转化路径</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="h-[300px] flex items-center justify-center">
+                <p className="text-muted-foreground">图表功能已移除</p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+// 保持已有的 KeywordAnalytics 函数
+export function KeywordAnalytics() {
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">流量词分析</h2>
+        <div className="flex space-x-2">
+          <Select defaultValue="7days">
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="选择时间范围" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="7days">最近7天</SelectItem>
+              <SelectItem value="30days">最近30天</SelectItem>
+              <SelectItem value="90days">最近90天</SelectItem>
+              <SelectItem value="custom">自定义范围</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">总流量词数量</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">125</div>
+            <p className="text-xs text-muted-foreground">较上月增长 12%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">匹配用户总数</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">24,521</div>
+            <p className="text-xs text-muted-foreground">较上月增长 8%</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">平均匹配率</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">68.3%</div>
+            <p className="text-xs text-muted-foreground">较上月提升 2.1%</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="trends">
+        <TabsList>
+          <TabsTrigger value="trends">趋势分析</TabsTrigger>
+          <TabsTrigger value="distribution">分布分析</TabsTrigger>
+          <TabsTrigger value="performance">性能分析</TabsTrigger>
+        </TabsList>
+        <TabsContent value="trends" className="space-y-4">
+          <Card className="p-4">
+            <CardHeader>
+              <CardTitle>流量词匹配趋势</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="h-[300px] flex items-center justify-center">
+                <p className="text-muted-foreground">图表功能已移除</p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+        <TabsContent value="distribution" className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Card className="p-4">
+              <CardHeader>
+                <CardTitle>流量词来源分布</CardTitle>
+              </CardHeader>
+              <CardContent className="pt-0">
+                <div className="h-[250px] flex items-center justify-center">
+                  <p className="text-muted-foreground">图表功能已移除</p>
+                </div>
+              </CardContent>
+            </Card>
+            <Card className="p-4">
+              <CardHeader>
+                <CardTitle>流量词分类分布</CardTitle>
+              </CardHeader>
+              <CardContent className="pt-0">
+                <div className="h-[250px] flex items-center justify-center">
+                  <p className="text-muted-foreground">图表功能已移除</p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+        <TabsContent value="performance" className="space-y-4">
+          <Card className="p-4">
+            <CardHeader>
+              <CardTitle>流量词匹配性能</CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <div className="h-[300px] flex items-center justify-center">
+                <p className="text-muted-foreground">图表功能已移除</p>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/components/traffic-pool/traffic-pool-list.tsx b/components/traffic-pool/traffic-pool-list.tsx
new file mode 100644
index 0000000..453de74
--- /dev/null
+++ b/components/traffic-pool/traffic-pool-list.tsx
@@ -0,0 +1,246 @@
+"use client"
+
+import { useState } from "react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Checkbox } from "@/components/ui/checkbox"
+import { MoreHorizontal, Edit, Trash2, BarChart2, Tag } from "lucide-react"
+
+interface TrafficPool {
+  id: string
+  keyword: string
+  source: string
+  category: string
+  volume: "high" | "medium" | "low"
+  matchedUsers: number
+  createdAt: Date
+  updatedAt: Date
+  tags: string[]
+}
+
+interface TrafficPoolListProps {
+  searchQuery: string
+}
+
+export function TrafficPoolList({ searchQuery }: TrafficPoolListProps) {
+  const [selectedKeywords, setSelectedKeywords] = useState<string[]>([])
+
+  // 模拟数据
+  const keywords: TrafficPool[] = [
+    {
+      id: "1",
+      keyword: "数字营销",
+      source: "搜索引擎",
+      category: "营销",
+      volume: "high",
+      matchedUsers: 1250,
+      createdAt: new Date(2023, 5, 15),
+      updatedAt: new Date(2023, 6, 20),
+      tags: ["高意向", "B端客户"],
+    },
+    {
+      id: "2",
+      keyword: "用户画像",
+      source: "社交媒体",
+      category: "数据分析",
+      volume: "high",
+      matchedUsers: 980,
+      createdAt: new Date(2023, 4, 10),
+      updatedAt: new Date(2023, 6, 18),
+      tags: ["数据分析", "企业客户"],
+    },
+    {
+      id: "3",
+      keyword: "流量获取",
+      source: "广告投放",
+      category: "营销",
+      volume: "medium",
+      matchedUsers: 645,
+      createdAt: new Date(2023, 3, 5),
+      updatedAt: new Date(2023, 5, 25),
+      tags: ["获客", "营销人员"],
+    },
+    {
+      id: "4",
+      keyword: "数据可视化",
+      source: "内容营销",
+      category: "数据分析",
+      volume: "medium",
+      matchedUsers: 520,
+      createdAt: new Date(2023, 2, 20),
+      updatedAt: new Date(2023, 6, 19),
+      tags: ["技术", "数据分析师"],
+    },
+    {
+      id: "5",
+      keyword: "精准营销",
+      source: "搜索引擎",
+      category: "营销",
+      volume: "high",
+      matchedUsers: 1100,
+      createdAt: new Date(2023, 1, 15),
+      updatedAt: new Date(2023, 4, 10),
+      tags: ["高转化", "营销经理"],
+    },
+  ]
+
+  // 过滤关键词
+  const filteredKeywords = keywords.filter(
+    (keyword) =>
+      keyword.keyword.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      keyword.source.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      keyword.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      keyword.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase())),
+  )
+
+  const toggleSelectAll = () => {
+    if (selectedKeywords.length === filteredKeywords.length) {
+      setSelectedKeywords([])
+    } else {
+      setSelectedKeywords(filteredKeywords.map((k) => k.id))
+    }
+  }
+
+  const toggleSelectKeyword = (id: string) => {
+    if (selectedKeywords.includes(id)) {
+      setSelectedKeywords(selectedKeywords.filter((k) => k !== id))
+    } else {
+      setSelectedKeywords([...selectedKeywords, id])
+    }
+  }
+
+  const getVolumeBadge = (volume: string) => {
+    switch (volume) {
+      case "high":
+        return <Badge className="bg-green-500">高</Badge>
+      case "medium":
+        return <Badge className="bg-blue-500">中</Badge>
+      case "low":
+        return <Badge className="bg-gray-500">低</Badge>
+      default:
+        return <Badge>未知</Badge>
+    }
+  }
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    })
+  }
+
+  return (
+    <div className="space-y-4">
+      {selectedKeywords.length > 0 && (
+        <div className="bg-muted p-2 rounded-md flex items-center justify-between">
+          <span className="text-sm">已选择 {selectedKeywords.length} 项</span>
+          <div className="space-x-2">
+            <Button variant="outline" size="sm">
+              <Tag className="mr-2 h-4 w-4" />
+              批量标记
+            </Button>
+            <Button variant="outline" size="sm" className="text-red-500">
+              <Trash2 className="mr-2 h-4 w-4" />
+              批量删除
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-12">
+                <Checkbox
+                  checked={selectedKeywords.length === filteredKeywords.length && filteredKeywords.length > 0}
+                  onCheckedChange={toggleSelectAll}
+                  aria-label="Select all"
+                />
+              </TableHead>
+              <TableHead>关键词</TableHead>
+              <TableHead>来源</TableHead>
+              <TableHead>分类</TableHead>
+              <TableHead>流量</TableHead>
+              <TableHead>匹配用户数</TableHead>
+              <TableHead>创建时间</TableHead>
+              <TableHead>更新时间</TableHead>
+              <TableHead>标签</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filteredKeywords.map((keyword) => (
+              <TableRow key={keyword.id}>
+                <TableCell>
+                  <Checkbox
+                    checked={selectedKeywords.includes(keyword.id)}
+                    onCheckedChange={() => toggleSelectKeyword(keyword.id)}
+                    aria-label={`Select ${keyword.keyword}`}
+                  />
+                </TableCell>
+                <TableCell className="font-medium">{keyword.keyword}</TableCell>
+                <TableCell>{keyword.source}</TableCell>
+                <TableCell>{keyword.category}</TableCell>
+                <TableCell>{getVolumeBadge(keyword.volume)}</TableCell>
+                <TableCell>{keyword.matchedUsers.toLocaleString()}</TableCell>
+                <TableCell>{formatDate(keyword.createdAt)}</TableCell>
+                <TableCell>{formatDate(keyword.updatedAt)}</TableCell>
+                <TableCell>
+                  <div className="flex flex-wrap gap-1">
+                    {keyword.tags.map((tag) => (
+                      <Badge key={tag} variant="outline" className="text-xs">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon">
+                        <MoreHorizontal className="h-4 w-4" />
+                        <span className="sr-only">打开菜单</span>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuLabel>操作</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>
+                        <Edit className="mr-2 h-4 w-4" />
+                        编辑
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <BarChart2 className="mr-2 h-4 w-4" />
+                        查看分析
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <Tag className="mr-2 h-4 w-4" />
+                        管理标签
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem className="text-red-500">
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        删除
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  )
+}
diff --git a/components/traffic-pool/user-tag-mapping.tsx b/components/traffic-pool/user-tag-mapping.tsx
new file mode 100644
index 0000000..677d16a
--- /dev/null
+++ b/components/traffic-pool/user-tag-mapping.tsx
@@ -0,0 +1,263 @@
+"use client"
+
+import { 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 { 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 { Checkbox } from "@/components/ui/checkbox"
+import { PlusCircle, Search, Tag, ArrowRight } from "lucide-react"
+
+interface TagMapping {
+  id: string
+  keywordId: string
+  keyword: string
+  tagId: string
+  tagName: string
+  tagCategory: string
+  matchRule: string
+  priority: number
+  createdAt: Date
+  status: "active" | "inactive"
+}
+
+export function UserTagMapping() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedMappings, setSelectedMappings] = useState<string[]>([])
+
+  // 模拟数据
+  const mappings: TagMapping[] = [
+    {
+      id: "1",
+      keywordId: "1",
+      keyword: "数字营销",
+      tagId: "101",
+      tagName: "营销决策者",
+      tagCategory: "职业角色",
+      matchRule: "精确匹配",
+      priority: 1,
+      createdAt: new Date(2023, 5, 15),
+      status: "active",
+    },
+    {
+      id: "2",
+      keywordId: "2",
+      keyword: "用户画像",
+      tagId: "102",
+      tagName: "数据分析师",
+      tagCategory: "职业角色",
+      matchRule: "包含匹配",
+      priority: 2,
+      createdAt: new Date(2023, 4, 10),
+      status: "active",
+    },
+    {
+      id: "3",
+      keywordId: "3",
+      keyword: "流量获取",
+      tagId: "103",
+      tagName: "营销专员",
+      tagCategory: "职业角色",
+      matchRule: "精确匹配",
+      priority: 3,
+      createdAt: new Date(2023, 3, 5),
+      status: "active",
+    },
+    {
+      id: "4",
+      keywordId: "4",
+      keyword: "数据可视化",
+      tagId: "104",
+      tagName: "技术人员",
+      tagCategory: "职业角色",
+      matchRule: "包含匹配",
+      priority: 2,
+      createdAt: new Date(2023, 2, 20),
+      status: "inactive",
+    },
+    {
+      id: "5",
+      keywordId: "5",
+      keyword: "精准营销",
+      tagId: "105",
+      tagName: "营销经理",
+      tagCategory: "职业角色",
+      matchRule: "精确匹配",
+      priority: 1,
+      createdAt: new Date(2023, 1, 15),
+      status: "active",
+    },
+  ]
+
+  // 过滤映射
+  const filteredMappings = mappings.filter(
+    (mapping) =>
+      mapping.keyword.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      mapping.tagName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      mapping.tagCategory.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const toggleSelectAll = () => {
+    if (selectedMappings.length === filteredMappings.length) {
+      setSelectedMappings([])
+    } else {
+      setSelectedMappings(filteredMappings.map((m) => m.id))
+    }
+  }
+
+  const toggleSelectMapping = (id: string) => {
+    if (selectedMappings.includes(id)) {
+      setSelectedMappings(selectedMappings.filter((m) => m !== id))
+    } else {
+      setSelectedMappings([...selectedMappings, id])
+    }
+  }
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">用户标签映射</h2>
+        <Button>
+          <PlusCircle className="mr-2 h-4 w-4" />
+          创建新映射
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>流量词与用户标签映射规则</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div className="flex justify-between items-center">
+              <div className="flex space-x-2">
+                <Select defaultValue="all">
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="状态" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部状态</SelectItem>
+                    <SelectItem value="active">已启用</SelectItem>
+                    <SelectItem value="inactive">已禁用</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Select defaultValue="all">
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="标签分类" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部分类</SelectItem>
+                    <SelectItem value="role">职业角色</SelectItem>
+                    <SelectItem value="interest">兴趣爱好</SelectItem>
+                    <SelectItem value="behavior">行为特征</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="relative w-64">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="搜索关键词或标签..."
+                  className="pl-8"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+            </div>
+
+            {selectedMappings.length > 0 && (
+              <div className="bg-muted p-2 rounded-md flex items-center justify-between">
+                <span className="text-sm">已选择 {selectedMappings.length} 项</span>
+                <div className="space-x-2">
+                  <Button variant="outline" size="sm">
+                    启用
+                  </Button>
+                  <Button variant="outline" size="sm">
+                    禁用
+                  </Button>
+                  <Button variant="outline" size="sm" className="text-red-500">
+                    删除
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-12">
+                      <Checkbox
+                        checked={selectedMappings.length === filteredMappings.length && filteredMappings.length > 0}
+                        onCheckedChange={toggleSelectAll}
+                        aria-label="Select all"
+                      />
+                    </TableHead>
+                    <TableHead>流量词</TableHead>
+                    <TableHead className="w-12 text-center">映射</TableHead>
+                    <TableHead>用户标签</TableHead>
+                    <TableHead>标签分类</TableHead>
+                    <TableHead>匹配规则</TableHead>
+                    <TableHead>优先级</TableHead>
+                    <TableHead>创建时间</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredMappings.map((mapping) => (
+                    <TableRow key={mapping.id}>
+                      <TableCell>
+                        <Checkbox
+                          checked={selectedMappings.includes(mapping.id)}
+                          onCheckedChange={() => toggleSelectMapping(mapping.id)}
+                          aria-label={`Select ${mapping.keyword} to ${mapping.tagName} mapping`}
+                        />
+                      </TableCell>
+                      <TableCell className="font-medium">{mapping.keyword}</TableCell>
+                      <TableCell className="text-center">
+                        <ArrowRight className="h-4 w-4 mx-auto" />
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline" className="font-normal">
+                          <Tag className="mr-1 h-3 w-3" />
+                          {mapping.tagName}
+                        </Badge>
+                      </TableCell>
+                      <TableCell>{mapping.tagCategory}</TableCell>
+                      <TableCell>{mapping.matchRule}</TableCell>
+                      <TableCell>{mapping.priority}</TableCell>
+                      <TableCell>{formatDate(mapping.createdAt)}</TableCell>
+                      <TableCell>
+                        <Badge
+                          variant={mapping.status === "active" ? "default" : "secondary"}
+                          className={mapping.status === "active" ? "bg-green-500" : ""}
+                        >
+                          {mapping.status === "active" ? "已启用" : "已禁用"}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button variant="ghost" size="sm">
+                          编辑
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..4c0d266
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,51 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..25e7b47
--- /dev/null
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,141 @@
+"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
new file mode 100644
index 0000000..41fa7e0
--- /dev/null
+++ b/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+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
new file mode 100644
index 0000000..d6a5226
--- /dev/null
+++ b/components/ui/aspect-ratio.tsx
@@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx
new file mode 100644
index 0000000..1c1fb15
--- /dev/null
+++ b/components/ui/avatar.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
new file mode 100644
index 0000000..15241a3
--- /dev/null
+++ b/components/ui/badge.tsx
@@ -0,0 +1,29 @@
+import type * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }
diff --git a/components/ui/breadcrumb.tsx b/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..60e6c96
--- /dev/null
+++ b/components/ui/breadcrumb.tsx
@@ -0,0 +1,115 @@
+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/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..d5fbaac
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,47 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium 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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  },
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
diff --git a/components/ui/calendar.tsx b/components/ui/calendar.tsx
new file mode 100644
index 0000000..ddfae6e
--- /dev/null
+++ b/components/ui/calendar.tsx
@@ -0,0 +1,59 @@
+import type * as React from "react"
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md",
+        ),
+        day: cn(buttonVariants({ variant: "ghost" }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100"),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside: "text-muted-foreground opacity-50",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
new file mode 100644
index 0000000..ac5e036
--- /dev/null
+++ b/components/ui/card.tsx
@@ -0,0 +1,43 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+)
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+)
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+)
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+)
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+)
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/components/ui/carousel.tsx b/components/ui/carousel.tsx
new file mode 100644
index 0000000..ec505d0
--- /dev/null
+++ b/components/ui/carousel.tsx
@@ -0,0 +1,262 @@
+"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
new file mode 100644
index 0000000..8620baa
--- /dev/null
+++ b/components/ui/chart.tsx
@@ -0,0 +1,365 @@
+"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/checkbox.tsx b/components/ui/checkbox.tsx
new file mode 100644
index 0000000..c6546d5
--- /dev/null
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
new file mode 100644
index 0000000..5d71ade
--- /dev/null
+++ b/components/ui/collapsible.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+import { cn } from "@/lib/utils"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
+>(({ className, children, ...props }, ref) => (
+  <CollapsiblePrimitive.CollapsibleContent
+    ref={ref}
+    className={cn(
+      "data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden transition-all",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </CollapsiblePrimitive.CollapsibleContent>
+))
+CollapsibleContent.displayName = "CollapsibleContent"
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
new file mode 100644
index 0000000..59a2645
--- /dev/null
+++ b/components/ui/command.tsx
@@ -0,0 +1,153 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/components/ui/context-menu.tsx b/components/ui/context-menu.tsx
new file mode 100644
index 0000000..93ef37b
--- /dev/null
+++ b/components/ui/context-menu.tsx
@@ -0,0 +1,200 @@
+"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/date-range-picker.tsx b/components/ui/date-range-picker.tsx
new file mode 100644
index 0000000..8542cd0
--- /dev/null
+++ b/components/ui/date-range-picker.tsx
@@ -0,0 +1,57 @@
+"use client"
+
+import { CalendarIcon } from "lucide-react"
+import type { DateRange } from "react-day-picker"
+import { cn } from "@/lib/utils"
+import { Button } from "./button"
+import { Calendar } from "./calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "./popover"
+import { format } from "date-fns"
+import { zhCN } from "date-fns/locale"
+
+interface DateRangePickerProps {
+  className?: string
+  value?: DateRange
+  onChange?: (date: DateRange | undefined) => void
+}
+
+export function DateRangePicker({ className, value, onChange }: DateRangePickerProps) {
+  return (
+    <div className={cn("grid gap-2", className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id="date"
+            variant={"outline"}
+            className={cn("w-[300px] justify-start text-left font-normal", !value && "text-muted-foreground")}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {value?.from ? (
+              value.to ? (
+                <>
+                  {format(value.from, "yyyy年MM月dd日", { locale: zhCN })} -{" "}
+                  {format(value.to, "yyyy年MM月dd日", { locale: zhCN })}
+                </>
+              ) : (
+                format(value.from, "yyyy年MM月dd日", { locale: zhCN })
+              )
+            ) : (
+              <span>选择日期范围</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <Calendar
+            initialFocus
+            mode="range"
+            defaultMonth={value?.from}
+            selected={value}
+            onSelect={onChange}
+            numberOfMonths={2}
+            locale={zhCN}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..6c60ee6
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,95 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    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}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.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}
+    >
+      {children}
+      <DialogPrimitive.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-accent data-[state=open]:text-muted-foreground">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/components/ui/drawer.tsx b/components/ui/drawer.tsx
new file mode 100644
index 0000000..6a0ef53
--- /dev/null
+++ b/components/ui/drawer.tsx
@@ -0,0 +1,118 @@
+"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/dropdown-menu.tsx b/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..8ea2f49
--- /dev/null
+++ b/components/ui/dropdown-menu.tsx
@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.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 data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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}
+  />
+))
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      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}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.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 transition-colors 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">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.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 transition-colors 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">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/components/ui/form.tsx b/components/ui/form.tsx
new file mode 100644
index 0000000..ce264ae
--- /dev/null
+++ b/components/ui/form.tsx
@@ -0,0 +1,178 @@
+"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
new file mode 100644
index 0000000..e54d91c
--- /dev/null
+++ b/components/ui/hover-card.tsx
@@ -0,0 +1,29 @@
+"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
new file mode 100644
index 0000000..f66fcfa
--- /dev/null
+++ b/components/ui/input-otp.tsx
@@ -0,0 +1,71 @@
+"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/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..7f84bde
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Input.displayName = "Input"
+
+export { Input }
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
new file mode 100644
index 0000000..9b5ca34
--- /dev/null
+++ b/components/ui/label.tsx
@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70")
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/components/ui/menubar.tsx b/components/ui/menubar.tsx
new file mode 100644
index 0000000..5586fa9
--- /dev/null
+++ b/components/ui/menubar.tsx
@@ -0,0 +1,236 @@
+"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
new file mode 100644
index 0000000..1419f56
--- /dev/null
+++ b/components/ui/navigation-menu.tsx
@@ -0,0 +1,128 @@
+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/pagination.tsx b/components/ui/pagination.tsx
new file mode 100644
index 0000000..f2d2751
--- /dev/null
+++ b/components/ui/pagination.tsx
@@ -0,0 +1,81 @@
+import * as React from "react"
+import { ChevronLeftIcon, ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+import { type ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+  ),
+)
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 pl-2.5", className)} {...props}>
+    <ChevronLeftIcon className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pr-2.5", className)} {...props}>
+    <span>Next</span>
+    <ChevronRightIcon className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+}
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
new file mode 100644
index 0000000..3255f2c
--- /dev/null
+++ b/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 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}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/components/ui/preview-dialog.tsx b/components/ui/preview-dialog.tsx
new file mode 100644
index 0000000..0038162
--- /dev/null
+++ b/components/ui/preview-dialog.tsx
@@ -0,0 +1,34 @@
+"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/progress.tsx b/components/ui/progress.tsx
new file mode 100644
index 0000000..b671718
--- /dev/null
+++ b/components/ui/progress.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/components/ui/radio-group.tsx b/components/ui/radio-group.tsx
new file mode 100644
index 0000000..866eb62
--- /dev/null
+++ b/components/ui/radio-group.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+import { CircleIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <CircleIcon className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
new file mode 100644
index 0000000..f4bc558
--- /dev/null
+++ b/components/ui/resizable.tsx
@@ -0,0 +1,45 @@
+"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/scroll-area.tsx b/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..610a5b3
--- /dev/null
+++ b/components/ui/scroll-area.tsx
@@ -0,0 +1,38 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/components/ui/select.tsx b/components/ui/select.tsx
new file mode 100644
index 0000000..6138eb4
--- /dev/null
+++ b/components/ui/select.tsx
@@ -0,0 +1,145 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover 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",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full 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">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx
new file mode 100644
index 0000000..12d81c4
--- /dev/null
+++ b/components/ui/separator.tsx
@@ -0,0 +1,31 @@
+"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
new file mode 100644
index 0000000..a37f17b
--- /dev/null
+++ b/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"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
new file mode 100644
index 0000000..eeb2d7a
--- /dev/null
+++ b/components/ui/sidebar.tsx
@@ -0,0 +1,763 @@
+"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/skeleton.tsx b/components/ui/skeleton.tsx
new file mode 100644
index 0000000..01b8b6d
--- /dev/null
+++ b/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
new file mode 100644
index 0000000..2fd8fde
--- /dev/null
+++ b/components/ui/slider.tsx
@@ -0,0 +1,25 @@
+"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
new file mode 100644
index 0000000..452f4d9
--- /dev/null
+++ b/components/ui/sonner.tsx
@@ -0,0 +1,31 @@
+"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/switch.tsx b/components/ui/switch.tsx
new file mode 100644
index 0000000..e41d022
--- /dev/null
+++ b/components/ui/switch.tsx
@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
new file mode 100644
index 0000000..dfc95ff
--- /dev/null
+++ b/components/ui/table.tsx
@@ -0,0 +1,72 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  ),
+)
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
+)
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+  ),
+)
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn("bg-primary font-medium text-primary-foreground", className)} {...props} />
+  ),
+)
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
+      {...props}
+    />
+  ),
+)
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
+  ),
+)
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  ),
+)
+TableCaption.displayName = "TableCaption"
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption }
diff --git a/components/ui/tabs.tsx b/components/ui/tabs.tsx
new file mode 100644
index 0000000..0c38131
--- /dev/null
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all 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=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
new file mode 100644
index 0000000..3a75a09
--- /dev/null
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/components/ui/toast.ts b/components/ui/toast.ts
new file mode 100644
index 0000000..1d8ad36
--- /dev/null
+++ b/components/ui/toast.ts
@@ -0,0 +1,113 @@
+"use client"
+
+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 { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className,
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
new file mode 100644
index 0000000..171beb4
--- /dev/null
+++ b/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useToast } from "@/hooks/use-toast"
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/components/ui/toggle-group.tsx b/components/ui/toggle-group.tsx
new file mode 100644
index 0000000..1c876bb
--- /dev/null
+++ b/components/ui/toggle-group.tsx
@@ -0,0 +1,61 @@
+"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
new file mode 100644
index 0000000..c19bea3
--- /dev/null
+++ b/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
+"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/tooltip.tsx b/components/ui/tooltip.tsx
new file mode 100644
index 0000000..bf4de38
--- /dev/null
+++ b/components/ui/tooltip.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, align = "center", side = "top", ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      align={align}
+      side={side}
+      className={cn(
+        "z-50 overflow-hidden rounded-md border bg-popover 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}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, Tooltip as TooltipRoot }
diff --git a/components/ui/use-mobile.tsx b/components/ui/use-mobile.tsx
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/components/ui/use-mobile.tsx
@@ -0,0 +1,19 @@
+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/ui/use-toast.ts b/components/ui/use-toast.ts
new file mode 100644
index 0000000..c2d149c
--- /dev/null
+++ b/components/ui/use-toast.ts
@@ -0,0 +1,188 @@
+"use client"
+
+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_VALUE
+  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)
+      }
+    }
+  }, [])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/components/user-pool/user-pool-filters.tsx b/components/user-pool/user-pool-filters.tsx
new file mode 100644
index 0000000..d8fa8ca
--- /dev/null
+++ b/components/user-pool/user-pool-filters.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Search, Filter, X } from "lucide-react"
+
+export function UserPoolFilters() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [userType, setUserType] = useState("all")
+  const [userSource, setUserSource] = useState("all")
+  const [userValue, setUserValue] = useState("all")
+  const [showFilters, setShowFilters] = useState(false)
+
+  const clearFilters = () => {
+    setSearchQuery("")
+    setUserType("all")
+    setUserSource("all")
+    setUserValue("all")
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col md:flex-row gap-4">
+        <div className="flex-1 relative">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="text"
+            placeholder="搜索用户名、手机号、标签..."
+            className="pl-8"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        <Button variant="outline" onClick={() => setShowFilters(!showFilters)}>
+          <Filter className="mr-2 h-4 w-4" />
+          筛选
+        </Button>
+        {(userType !== "all" || userSource !== "all" || userValue !== "all") && (
+          <Button variant="ghost" onClick={clearFilters}>
+            <X className="mr-2 h-4 w-4" />
+            清除筛选
+          </Button>
+        )}
+      </div>
+      {showFilters && (
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Select value={userType} onValueChange={setUserType}>
+            <SelectTrigger>
+              <SelectValue placeholder="用户类型" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部类型</SelectItem>
+              <SelectItem value="new">新用户</SelectItem>
+              <SelectItem value="active">活跃用户</SelectItem>
+              <SelectItem value="inactive">非活跃用户</SelectItem>
+              <SelectItem value="lost">流失用户</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={userSource} onValueChange={setUserSource}>
+            <SelectTrigger>
+              <SelectValue placeholder="用户来源" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部来源</SelectItem>
+              <SelectItem value="wechat">微信</SelectItem>
+              <SelectItem value="douyin">抖音</SelectItem>
+              <SelectItem value="xiaohongshu">小红书</SelectItem>
+              <SelectItem value="website">官网</SelectItem>
+              <SelectItem value="other">其他</SelectItem>
+            </SelectContent>
+          </Select>
+          <Select value={userValue} onValueChange={setUserValue}>
+            <SelectTrigger>
+              <SelectValue placeholder="用户价值" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部价值</SelectItem>
+              <SelectItem value="high">高价值</SelectItem>
+              <SelectItem value="medium">中价值</SelectItem>
+              <SelectItem value="low">低价值</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/user-pool/user-pool-header.tsx b/components/user-pool/user-pool-header.tsx
new file mode 100644
index 0000000..703427d
--- /dev/null
+++ b/components/user-pool/user-pool-header.tsx
@@ -0,0 +1,27 @@
+import { Button } from "@/components/ui/button"
+import { PlusCircle, Download, Upload } from "lucide-react"
+
+export function UserPoolHeader() {
+  return (
+    <div className="flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">用户池管理</h1>
+        <p className="text-muted-foreground">管理和分析您的用户资产，发掘用户价值</p>
+      </div>
+      <div className="flex items-center space-x-2">
+        <Button variant="outline" size="sm">
+          <Upload className="mr-2 h-4 w-4" />
+          导入
+        </Button>
+        <Button variant="outline" size="sm">
+          <Download className="mr-2 h-4 w-4" />
+          导出
+        </Button>
+        <Button size="sm">
+          <PlusCircle className="mr-2 h-4 w-4" />
+          添加用户
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/user-pool/user-pool-stats.tsx b/components/user-pool/user-pool-stats.tsx
new file mode 100644
index 0000000..bccef97
--- /dev/null
+++ b/components/user-pool/user-pool-stats.tsx
@@ -0,0 +1,56 @@
+import { Card, CardContent } from "@/components/ui/card"
+import { formatNumber, getGrowthClass } from "@/lib/utils"
+import { ArrowDown, ArrowUp, Users, UserCheck, Star, TrendingUp } from "lucide-react"
+
+export function UserPoolStats() {
+  // 这里应该从API获取实际数据
+  const stats = [
+    {
+      title: "总用户数",
+      value: 125689,
+      change: 12.5,
+      icon: <Users className="h-4 w-4" />,
+    },
+    {
+      title: "活跃用户",
+      value: 78452,
+      change: 8.3,
+      icon: <UserCheck className="h-4 w-4" />,
+    },
+    {
+      title: "高价值用户",
+      value: 12458,
+      change: 15.2,
+      icon: <Star className="h-4 w-4" />,
+    },
+    {
+      title: "转化率",
+      value: 12.5,
+      change: -2.3,
+      icon: <TrendingUp className="h-4 w-4" />,
+      isPercentage: true,
+    },
+  ]
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      {stats.map((stat) => (
+        <Card key={stat.title}>
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div className="bg-primary/10 rounded-full p-2 text-primary">{stat.icon}</div>
+              <div className={`flex items-center ${getGrowthClass(stat.change)}`}>
+                {stat.change > 0 ? <ArrowUp className="h-4 w-4 mr-1" /> : <ArrowDown className="h-4 w-4 mr-1" />}
+                <span>{Math.abs(stat.change)}%</span>
+              </div>
+            </div>
+            <div className="mt-3">
+              <p className="text-sm text-muted-foreground">{stat.title}</p>
+              <p className="text-2xl font-bold">{stat.isPercentage ? `${stat.value}%` : formatNumber(stat.value)}</p>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
diff --git a/components/user-pool/user-pool-table.tsx b/components/user-pool/user-pool-table.tsx
new file mode 100644
index 0000000..1e4df64
--- /dev/null
+++ b/components/user-pool/user-pool-table.tsx
@@ -0,0 +1,198 @@
+"use client"
+
+import { useState } from "react"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { formatDate } from "@/lib/utils"
+import { MoreHorizontal, ChevronLeft, ChevronRight } from "lucide-react"
+
+export function UserPoolTable() {
+  const [currentPage, setCurrentPage] = useState(1)
+  const [itemsPerPage] = useState(10)
+
+  // 这里应该从API获取实际数据
+  const users = [
+    {
+      id: "1",
+      name: "张三",
+      phone: "13812345678",
+      source: "微信",
+      registerDate: new Date(2023, 5, 15),
+      lastActive: new Date(2023, 6, 20),
+      value: "high",
+      tags: ["潜在客户", "对产品感兴趣"],
+      status: "active",
+    },
+    {
+      id: "2",
+      name: "李四",
+      phone: "13987654321",
+      source: "抖音",
+      registerDate: new Date(2023, 4, 10),
+      lastActive: new Date(2023, 6, 18),
+      value: "medium",
+      tags: ["新用户", "已咨询"],
+      status: "active",
+    },
+    {
+      id: "3",
+      name: "王五",
+      phone: "13765432198",
+      source: "小红书",
+      registerDate: new Date(2023, 3, 5),
+      lastActive: new Date(2023, 5, 25),
+      value: "low",
+      tags: ["已购买", "需要跟进"],
+      status: "inactive",
+    },
+    {
+      id: "4",
+      name: "赵六",
+      phone: "13654321987",
+      source: "官网",
+      registerDate: new Date(2023, 2, 20),
+      lastActive: new Date(2023, 6, 19),
+      value: "high",
+      tags: ["VIP客户", "高频购买"],
+      status: "active",
+    },
+    {
+      id: "5",
+      name: "钱七",
+      phone: "13543219876",
+      source: "微信",
+      registerDate: new Date(2023, 1, 15),
+      lastActive: new Date(2023, 4, 10),
+      value: "medium",
+      tags: ["已流失", "需要挽回"],
+      status: "lost",
+    },
+  ]
+
+  const totalPages = Math.ceil(users.length / itemsPerPage)
+  const startIndex = (currentPage - 1) * itemsPerPage
+  const endIndex = startIndex + itemsPerPage
+  const currentUsers = users.slice(startIndex, endIndex)
+
+  const getUserValueBadge = (value: string) => {
+    switch (value) {
+      case "high":
+        return <Badge className="bg-green-500">高价值</Badge>
+      case "medium":
+        return <Badge className="bg-blue-500">中价值</Badge>
+      case "low":
+        return <Badge className="bg-gray-500">低价值</Badge>
+      default:
+        return <Badge>未知</Badge>
+    }
+  }
+
+  const getUserStatusBadge = (status: string) => {
+    switch (status) {
+      case "active":
+        return <Badge className="bg-green-500">活跃</Badge>
+      case "inactive":
+        return <Badge className="bg-yellow-500">非活跃</Badge>
+      case "lost":
+        return <Badge className="bg-red-500">流失</Badge>
+      default:
+        return <Badge>未知</Badge>
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>用户名</TableHead>
+              <TableHead>手机号</TableHead>
+              <TableHead>来源</TableHead>
+              <TableHead>注册时间</TableHead>
+              <TableHead>最后活跃</TableHead>
+              <TableHead>用户价值</TableHead>
+              <TableHead>状态</TableHead>
+              <TableHead>标签</TableHead>
+              <TableHead className="text-right">操作</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {currentUsers.map((user) => (
+              <TableRow key={user.id}>
+                <TableCell className="font-medium">{user.name}</TableCell>
+                <TableCell>{user.phone}</TableCell>
+                <TableCell>{user.source}</TableCell>
+                <TableCell>{formatDate(user.registerDate)}</TableCell>
+                <TableCell>{formatDate(user.lastActive)}</TableCell>
+                <TableCell>{getUserValueBadge(user.value)}</TableCell>
+                <TableCell>{getUserStatusBadge(user.status)}</TableCell>
+                <TableCell>
+                  <div className="flex flex-wrap gap-1">
+                    {user.tags.map((tag) => (
+                      <Badge key={tag} variant="outline" className="text-xs">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon">
+                        <MoreHorizontal className="h-4 w-4" />
+                        <span className="sr-only">打开菜单</span>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuLabel>操作</DropdownMenuLabel>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>查看详情</DropdownMenuItem>
+                      <DropdownMenuItem>编辑信息</DropdownMenuItem>
+                      <DropdownMenuItem>添加标签</DropdownMenuItem>
+                      <DropdownMenuItem>发送消息</DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem className="text-red-500">删除用户</DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          显示第 {startIndex + 1} 到 {Math.min(endIndex, users.length)} 条，共 {users.length} 条
+        </p>
+        <div className="flex items-center space-x-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setCurrentPage(currentPage - 1)}
+            disabled={currentPage === 1}
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => setCurrentPage(currentPage + 1)}
+            disabled={currentPage === totalPages}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/user-portrait/tag-management.tsx b/components/user-portrait/tag-management.tsx
new file mode 100644
index 0000000..75c2cdf
--- /dev/null
+++ b/components/user-portrait/tag-management.tsx
@@ -0,0 +1,276 @@
+"use client"
+
+import { useState } from "react"
+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 { PlusCircle, Search, Tag, Edit, Trash2, Users } from "lucide-react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+
+interface UserTag {
+  id: string
+  name: string
+  category: string
+  description: string
+  userCount: number
+  source: string
+  createdAt: Date
+  updatedAt: Date
+}
+
+export function TagManagement() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedCategory, setSelectedCategory] = useState("all")
+  const [selectedSource, setSelectedSource] = useState("all")
+
+  // 模拟数据
+  const tags: UserTag[] = [
+    {
+      id: "1",
+      name: "高价值客户",
+      category: "价值分类",
+      description: "消费金额高且频次高的用户",
+      userCount: 2450,
+      source: "系统生成",
+      createdAt: new Date(2023, 5, 15),
+      updatedAt: new Date(2023, 6, 20),
+    },
+    {
+      id: "2",
+      name: "数据分析师",
+      category: "职业角色",
+      description: "从事数据分析工作的用户",
+      userCount: 980,
+      source: "流量词映射",
+      createdAt: new Date(2023, 4, 10),
+      updatedAt: new Date(2023, 6, 18),
+    },
+    {
+      id: "3",
+      name: "营销决策者",
+      category: "职业角色",
+      description: "负责营销决策的管理人员",
+      userCount: 645,
+      source: "流量词映射",
+      createdAt: new Date(2023, 3, 5),
+      updatedAt: new Date(2023, 5, 25),
+    },
+    {
+      id: "4",
+      name: "技术爱好者",
+      category: "兴趣爱好",
+      description: "对技术有浓厚兴趣的用户",
+      userCount: 1520,
+      source: "行为分析",
+      createdAt: new Date(2023, 2, 20),
+      updatedAt: new Date(2023, 6, 19),
+    },
+    {
+      id: "5",
+      name: "活跃用户",
+      category: "活跃度",
+      description: "每周登录3次以上的用户",
+      userCount: 8600,
+      source: "系统生成",
+      createdAt: new Date(2023, 1, 15),
+      updatedAt: new Date(2023, 4, 10),
+    },
+    {
+      id: "6",
+      name: "上海市",
+      category: "位置信息",
+      description: "位于上海市的用户",
+      userCount: 5200,
+      source: "消费行为",
+      createdAt: new Date(2023, 3, 10),
+      updatedAt: new Date(2023, 6, 15),
+    },
+    {
+      id: "7",
+      name: "牛排",
+      category: "菜品偏好",
+      description: "喜欢牛排的用户",
+      userCount: 3800,
+      source: "消费行为",
+      createdAt: new Date(2023, 4, 5),
+      updatedAt: new Date(2023, 6, 12),
+    },
+    {
+      id: "8",
+      name: "晚餐",
+      category: "消费时段",
+      description: "晚餐时段消费的用户",
+      userCount: 7500,
+      source: "消费行为",
+      createdAt: new Date(2023, 2, 15),
+      updatedAt: new Date(2023, 5, 20),
+    },
+    {
+      id: "9",
+      name: "周末消费",
+      category: "消费习惯",
+      description: "周末消费的用户",
+      userCount: 6200,
+      source: "消费行为",
+      createdAt: new Date(2023, 3, 20),
+      updatedAt: new Date(2023, 6, 10),
+    },
+    {
+      id: "10",
+      name: "高端餐厅",
+      category: "消费场所",
+      description: "在高端餐厅消费的用户",
+      userCount: 2900,
+      source: "消费行为",
+      createdAt: new Date(2023, 4, 25),
+      updatedAt: new Date(2023, 6, 5),
+    },
+  ]
+
+  // 过滤标签
+  const filteredTags = tags.filter((tag) => {
+    // 搜索过滤
+    const searchMatch =
+      tag.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      tag.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      tag.description.toLowerCase().includes(searchQuery.toLowerCase())
+
+    // 分类过滤
+    const categoryMatch = selectedCategory === "all" || tag.category === selectedCategory
+
+    // 来源过滤
+    const sourceMatch = selectedSource === "all" || tag.source === selectedSource
+
+    return searchMatch && categoryMatch && sourceMatch
+  })
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    })
+  }
+
+  return (
+    <Card className="border-none shadow-md overflow-hidden">
+      <CardHeader className="bg-gradient-to-r from-green-50 to-teal-50 border-b">
+        <div className="flex justify-between items-center">
+          <div>
+            <CardTitle>用户标签管理</CardTitle>
+            <CardDescription>管理系统中的用户标签</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="p-4">
+        <div className="space-y-6">
+          <div className="flex justify-between items-center">
+            <h2 className="text-xl font-semibold">用户标签体系</h2>
+            <Button>
+              <PlusCircle className="mr-2 h-4 w-4" />
+              创建新标签
+            </Button>
+          </div>
+
+          <div className="flex justify-between items-center">
+            <div className="flex space-x-2">
+              <Select value={selectedCategory} onValueChange={setSelectedCategory}>
+                <SelectTrigger className="w-[150px]">
+                  <SelectValue placeholder="标签分类" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部分类</SelectItem>
+                  <SelectItem value="价值分类">价值分类</SelectItem>
+                  <SelectItem value="职业角色">职业角色</SelectItem>
+                  <SelectItem value="兴趣爱好">兴趣爱好</SelectItem>
+                  <SelectItem value="活跃度">活跃度</SelectItem>
+                  <SelectItem value="位置信息">位置信息</SelectItem>
+                  <SelectItem value="菜品偏好">菜品偏好</SelectItem>
+                  <SelectItem value="消费时段">消费时段</SelectItem>
+                  <SelectItem value="消费习惯">消费习惯</SelectItem>
+                  <SelectItem value="消费场所">消费场所</SelectItem>
+                </SelectContent>
+              </Select>
+              <Select value={selectedSource} onValueChange={setSelectedSource}>
+                <SelectTrigger className="w-[150px]">
+                  <SelectValue placeholder="标签来源" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部来源</SelectItem>
+                  <SelectItem value="系统生成">系统生成</SelectItem>
+                  <SelectItem value="流量词映射">流量词映射</SelectItem>
+                  <SelectItem value="行为分析">行为分析</SelectItem>
+                  <SelectItem value="消费行为">消费行为</SelectItem>
+                  <SelectItem value="手动创建">手动创建</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="relative w-64">
+              <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="搜索标签..."
+                className="pl-8"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <div className="rounded-md border">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>标签名称</TableHead>
+                  <TableHead>分类</TableHead>
+                  <TableHead>描述</TableHead>
+                  <TableHead>用户数量</TableHead>
+                  <TableHead>来源</TableHead>
+                  <TableHead>创建时间</TableHead>
+                  <TableHead>更新时间</TableHead>
+                  <TableHead className="text-right">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredTags.map((tag) => (
+                  <TableRow key={tag.id}>
+                    <TableCell>
+                      <div className="flex items-center">
+                        <Tag className="h-4 w-4 mr-2 text-muted-foreground" />
+                        <span className="font-medium">{tag.name}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline">{tag.category}</Badge>
+                    </TableCell>
+                    <TableCell>{tag.description}</TableCell>
+                    <TableCell>
+                      <div className="flex items-center">
+                        <Users className="h-4 w-4 mr-1 text-muted-foreground" />
+                        {tag.userCount.toLocaleString()}
+                      </div>
+                    </TableCell>
+                    <TableCell>{tag.source}</TableCell>
+                    <TableCell>{formatDate(tag.createdAt)}</TableCell>
+                    <TableCell>{formatDate(tag.updatedAt)}</TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end space-x-2">
+                        <Button variant="ghost" size="icon">
+                          <Edit className="h-4 w-4" />
+                        </Button>
+                        <Button variant="ghost" size="icon" className="text-red-500">
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/components/user-profile/user-profile-analytics.tsx b/components/user-profile/user-profile-analytics.tsx
new file mode 100644
index 0000000..488ff51
--- /dev/null
+++ b/components/user-profile/user-profile-analytics.tsx
@@ -0,0 +1,219 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Button } from "@/components/ui/button"
+import { LineChart, BarChart } from "@/components/charts"
+import { Download, ChevronDown, ChevronRight } from "lucide-react"
+import { useState } from "react"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+
+export function UserProfileAnalytics() {
+  const [openSections, setOpenSections] = useState({
+    valueAnalysis: true,
+    behaviorAnalysis: false,
+    lifecycleAnalysis: false,
+    conversionAnalysis: false,
+  })
+
+  const toggleSection = (section) => {
+    setOpenSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }))
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">用户画像深度分析</h2>
+        <div className="flex space-x-2">
+          <Select defaultValue="30days">
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="选择时间范围" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="7days">最近7天</SelectItem>
+              <SelectItem value="30days">最近30天</SelectItem>
+              <SelectItem value="90days">最近90天</SelectItem>
+              <SelectItem value="custom">自定义范围</SelectItem>
+            </SelectContent>
+          </Select>
+          <Button variant="outline">
+            <Download className="mr-2 h-4 w-4" />
+            导出数据
+          </Button>
+        </div>
+      </div>
+
+      <Tabs defaultValue="value">
+        <TabsList>
+          <TabsTrigger value="value">价值分析</TabsTrigger>
+          <TabsTrigger value="behavior">行为分析</TabsTrigger>
+          <TabsTrigger value="lifecycle">生命周期</TabsTrigger>
+          <TabsTrigger value="conversion">转化路径</TabsTrigger>
+        </TabsList>
+        <TabsContent value="value" className="space-y-4 pt-4">
+          <Collapsible open={openSections.valueAnalysis} onOpenChange={() => toggleSection("valueAnalysis")}>
+            <Card className="border shadow-sm">
+              <CardHeader className="pb-2">
+                <CollapsibleTrigger className="flex justify-between items-center w-full">
+                  <CardTitle className="text-base font-medium">用户价值分布趋势</CardTitle>
+                  {openSections.valueAnalysis ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )}
+                </CollapsibleTrigger>
+              </CardHeader>
+              <CollapsibleContent>
+                <CardContent>
+                  <LineChart
+                    data={{
+                      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+                      datasets: [
+                        {
+                          label: "高价值用户",
+                          data: [1200, 1350, 1500, 1680, 1850, 2100, 2450],
+                          borderColor: "rgba(16, 185, 129, 0.7)",
+                          backgroundColor: "rgba(16, 185, 129, 0.1)",
+                        },
+                        {
+                          label: "中价值用户",
+                          data: [5600, 6200, 6800, 7500, 8200, 9000, 9800],
+                          borderColor: "rgba(59, 130, 246, 0.7)",
+                          backgroundColor: "rgba(59, 130, 246, 0.1)",
+                        },
+                        {
+                          label: "低价值用户",
+                          data: [8200, 8500, 8900, 9300, 9800, 10500, 11200],
+                          borderColor: "rgba(156, 163, 175, 0.7)",
+                          backgroundColor: "rgba(156, 163, 175, 0.1)",
+                        },
+                      ],
+                    }}
+                    height={300}
+                  />
+                </CardContent>
+              </CollapsibleContent>
+            </Card>
+          </Collapsible>
+        </TabsContent>
+        <TabsContent value="behavior" className="space-y-4 pt-4">
+          <Collapsible open={openSections.behaviorAnalysis} onOpenChange={() => toggleSection("behaviorAnalysis")}>
+            <Card className="border shadow-sm">
+              <CardHeader className="pb-2">
+                <CollapsibleTrigger className="flex justify-between items-center w-full">
+                  <CardTitle className="text-base font-medium">用户行为轨迹分析</CardTitle>
+                  {openSections.behaviorAnalysis ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )}
+                </CollapsibleTrigger>
+              </CardHeader>
+              <CollapsibleContent>
+                <CardContent>
+                  <LineChart
+                    data={{
+                      labels: ["浏览", "搜索", "加入购物车", "下单", "支付", "评价", "复购"],
+                      datasets: [
+                        {
+                          label: "高价值用户",
+                          data: [100, 95, 85, 80, 78, 65, 60],
+                          borderColor: "rgba(16, 185, 129, 0.7)",
+                          backgroundColor: "rgba(16, 185, 129, 0.1)",
+                        },
+                        {
+                          label: "中价值用户",
+                          data: [100, 85, 65, 55, 50, 35, 25],
+                          borderColor: "rgba(59, 130, 246, 0.7)",
+                          backgroundColor: "rgba(59, 130, 246, 0.1)",
+                        },
+                        {
+                          label: "低价值用户",
+                          data: [100, 70, 40, 25, 20, 10, 5],
+                          borderColor: "rgba(156, 163, 175, 0.7)",
+                          backgroundColor: "rgba(156, 163, 175, 0.1)",
+                        },
+                      ],
+                    }}
+                    height={300}
+                  />
+                </CardContent>
+              </CollapsibleContent>
+            </Card>
+          </Collapsible>
+        </TabsContent>
+        <TabsContent value="lifecycle" className="space-y-4 pt-4">
+          <Collapsible open={openSections.lifecycleAnalysis} onOpenChange={() => toggleSection("lifecycleAnalysis")}>
+            <Card className="border shadow-sm">
+              <CardHeader className="pb-2">
+                <CollapsibleTrigger className="flex justify-between items-center w-full">
+                  <CardTitle className="text-base font-medium">用户生命周期分布</CardTitle>
+                  {openSections.lifecycleAnalysis ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )}
+                </CollapsibleTrigger>
+              </CardHeader>
+              <CollapsibleContent>
+                <CardContent>
+                  <BarChart
+                    data={{
+                      labels: ["获取阶段", "激活阶段", "留存阶段", "转化阶段", "忠诚阶段"],
+                      datasets: [
+                        {
+                          label: "用户数量",
+                          data: [12500, 8600, 6200, 4800, 2450],
+                          backgroundColor: "rgba(59, 130, 246, 0.7)",
+                        },
+                      ],
+                    }}
+                    height={300}
+                  />
+                </CardContent>
+              </CollapsibleContent>
+            </Card>
+          </Collapsible>
+        </TabsContent>
+        <TabsContent value="conversion" className="space-y-4 pt-4">
+          <Collapsible open={openSections.conversionAnalysis} onOpenChange={() => toggleSection("conversionAnalysis")}>
+            <Card className="border shadow-sm">
+              <CardHeader className="pb-2">
+                <CollapsibleTrigger className="flex justify-between items-center w-full">
+                  <CardTitle className="text-base font-medium">用户转化路径分析</CardTitle>
+                  {openSections.conversionAnalysis ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronRight className="h-4 w-4" />
+                  )}
+                </CollapsibleTrigger>
+              </CardHeader>
+              <CollapsibleContent>
+                <CardContent>
+                  <LineChart
+                    data={{
+                      labels: ["访问", "注册", "浏览产品", "加入购物车", "下单", "支付", "复购"],
+                      datasets: [
+                        {
+                          label: "转化率",
+                          data: [100, 45, 38, 25, 18, 15, 8],
+                          borderColor: "rgba(59, 130, 246, 0.7)",
+                          backgroundColor: "rgba(59, 130, 246, 0.1)",
+                        },
+                      ],
+                    }}
+                    height={300}
+                  />
+                </CardContent>
+              </CollapsibleContent>
+            </Card>
+          </Collapsible>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/components/user-profile/user-profile-overview.tsx b/components/user-profile/user-profile-overview.tsx
new file mode 100644
index 0000000..7706f7b
--- /dev/null
+++ b/components/user-profile/user-profile-overview.tsx
@@ -0,0 +1,319 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { PieChart, BarChart } from "@/components/charts"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { ChevronDown, ChevronRight } from "lucide-react"
+import { useState } from "react"
+
+export function UserProfileOverview() {
+  const [openSections, setOpenSections] = useState({
+    gender: true,
+    age: true,
+    occupation: false,
+    income: false,
+    region: false,
+    device: false,
+    activity: false,
+    interest: false,
+  })
+
+  const toggleSection = (section) => {
+    setOpenSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }))
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">用户画像概览</h2>
+        <div className="flex space-x-2">
+          <Select defaultValue="7days">
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="选择时间范围" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="7days">最近7天</SelectItem>
+              <SelectItem value="30days">最近30天</SelectItem>
+              <SelectItem value="90days">最近90天</SelectItem>
+              <SelectItem value="custom">自定义范围</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <Collapsible open={openSections.gender} onOpenChange={() => toggleSection("gender")}>
+          <Card className="border shadow-sm">
+            <CardHeader className="pb-2">
+              <CollapsibleTrigger className="flex justify-between items-center w-full">
+                <CardTitle className="text-base font-medium">用户性别分布</CardTitle>
+                {openSections.gender ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+              </CollapsibleTrigger>
+            </CardHeader>
+            <CollapsibleContent>
+              <CardContent>
+                <PieChart
+                  data={{
+                    labels: ["男性", "女性", "未知"],
+                    datasets: [
+                      {
+                        data: [45, 52, 3],
+                        backgroundColor: [
+                          "rgba(59, 130, 246, 0.7)",
+                          "rgba(236, 72, 153, 0.7)",
+                          "rgba(156, 163, 175, 0.7)",
+                        ],
+                      },
+                    ],
+                  }}
+                  height={250}
+                />
+              </CardContent>
+            </CollapsibleContent>
+          </Card>
+        </Collapsible>
+
+        <Collapsible open={openSections.age} onOpenChange={() => toggleSection("age")}>
+          <Card className="border shadow-sm">
+            <CardHeader className="pb-2">
+              <CollapsibleTrigger className="flex justify-between items-center w-full">
+                <CardTitle className="text-base font-medium">用户年龄分布</CardTitle>
+                {openSections.age ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+              </CollapsibleTrigger>
+            </CardHeader>
+            <CollapsibleContent>
+              <CardContent>
+                <BarChart
+                  data={{
+                    labels: ["18岁以下", "18-24岁", "25-34岁", "35-44岁", "45-54岁", "55岁以上"],
+                    datasets: [
+                      {
+                        label: "用户数量",
+                        data: [1200, 5400, 8900, 5600, 2800, 620],
+                        backgroundColor: "rgba(59, 130, 246, 0.7)",
+                      },
+                    ],
+                  }}
+                  height={250}
+                />
+              </CardContent>
+            </CollapsibleContent>
+          </Card>
+        </Collapsible>
+      </div>
+
+      <Tabs defaultValue="demographic">
+        <TabsList>
+          <TabsTrigger value="demographic">人口统计</TabsTrigger>
+          <TabsTrigger value="geographic">地理分布</TabsTrigger>
+          <TabsTrigger value="behavior">行为特征</TabsTrigger>
+          <TabsTrigger value="interest">兴趣爱好</TabsTrigger>
+        </TabsList>
+        <TabsContent value="demographic" className="space-y-4 pt-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Collapsible open={openSections.occupation} onOpenChange={() => toggleSection("occupation")}>
+              <Card className="border shadow-sm">
+                <CardHeader className="pb-2">
+                  <CollapsibleTrigger className="flex justify-between items-center w-full">
+                    <CardTitle className="text-base font-medium">职业分布</CardTitle>
+                    {openSections.occupation ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
+                  </CollapsibleTrigger>
+                </CardHeader>
+                <CollapsibleContent>
+                  <CardContent>
+                    <PieChart
+                      data={{
+                        labels: ["学生", "企业员工", "自由职业", "企业管理者", "公务员", "其他"],
+                        datasets: [
+                          {
+                            data: [15, 35, 20, 18, 7, 5],
+                            backgroundColor: [
+                              "rgba(59, 130, 246, 0.7)",
+                              "rgba(16, 185, 129, 0.7)",
+                              "rgba(249, 115, 22, 0.7)",
+                              "rgba(139, 92, 246, 0.7)",
+                              "rgba(236, 72, 153, 0.7)",
+                              "rgba(156, 163, 175, 0.7)",
+                            ],
+                          },
+                        ],
+                      }}
+                      height={250}
+                    />
+                  </CardContent>
+                </CollapsibleContent>
+              </Card>
+            </Collapsible>
+
+            <Collapsible open={openSections.income} onOpenChange={() => toggleSection("income")}>
+              <Card className="border shadow-sm">
+                <CardHeader className="pb-2">
+                  <CollapsibleTrigger className="flex justify-between items-center w-full">
+                    <CardTitle className="text-base font-medium">收入水平</CardTitle>
+                    {openSections.income ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                  </CollapsibleTrigger>
+                </CardHeader>
+                <CollapsibleContent>
+                  <CardContent>
+                    <PieChart
+                      data={{
+                        labels: ["5千以下", "5千-1万", "1万-2万", "2万-3万", "3万以上"],
+                        datasets: [
+                          {
+                            data: [10, 25, 35, 20, 10],
+                            backgroundColor: [
+                              "rgba(59, 130, 246, 0.7)",
+                              "rgba(16, 185, 129, 0.7)",
+                              "rgba(249, 115, 22, 0.7)",
+                              "rgba(139, 92, 246, 0.7)",
+                              "rgba(236, 72, 153, 0.7)",
+                            ],
+                          },
+                        ],
+                      }}
+                      height={250}
+                    />
+                  </CardContent>
+                </CollapsibleContent>
+              </Card>
+            </Collapsible>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="geographic" className="space-y-4 pt-4">
+          <Collapsible open={openSections.region} onOpenChange={() => toggleSection("region")}>
+            <Card className="border shadow-sm">
+              <CardHeader className="pb-2">
+                <CollapsibleTrigger className="flex justify-between items-center w-full">
+                  <CardTitle className="text-base font-medium">地区分布</CardTitle>
+                  {openSections.region ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                </CollapsibleTrigger>
+              </CardHeader>
+              <CollapsibleContent>
+                <CardContent>
+                  <BarChart
+                    data={{
+                      labels: ["北京", "上海", "广东", "浙江", "江苏", "四川", "湖北", "福建", "山东", "河南"],
+                      datasets: [
+                        {
+                          label: "用户数量",
+                          data: [3200, 2800, 4500, 2100, 1900, 1600, 1400, 1200, 1100, 900],
+                          backgroundColor: "rgba(59, 130, 246, 0.7)",
+                        },
+                      ],
+                    }}
+                    height={300}
+                  />
+                </CardContent>
+              </CollapsibleContent>
+            </Card>
+          </Collapsible>
+        </TabsContent>
+
+        <TabsContent value="behavior" className="space-y-4 pt-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Collapsible open={openSections.activity} onOpenChange={() => toggleSection("activity")}>
+              <Card className="border shadow-sm">
+                <CardHeader className="pb-2">
+                  <CollapsibleTrigger className="flex justify-between items-center w-full">
+                    <CardTitle className="text-base font-medium">活跃时段</CardTitle>
+                    {openSections.activity ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                  </CollapsibleTrigger>
+                </CardHeader>
+                <CollapsibleContent>
+                  <CardContent>
+                    <BarChart
+                      data={{
+                        labels: ["0-3点", "3-6点", "6-9点", "9-12点", "12-15点", "15-18点", "18-21点", "21-24点"],
+                        datasets: [
+                          {
+                            label: "活跃用户数",
+                            data: [800, 400, 2500, 5800, 4200, 3800, 7500, 6200],
+                            backgroundColor: "rgba(59, 130, 246, 0.7)",
+                          },
+                        ],
+                      }}
+                      height={250}
+                    />
+                  </CardContent>
+                </CollapsibleContent>
+              </Card>
+            </Collapsible>
+
+            <Collapsible open={openSections.device} onOpenChange={() => toggleSection("device")}>
+              <Card className="border shadow-sm">
+                <CardHeader className="pb-2">
+                  <CollapsibleTrigger className="flex justify-between items-center w-full">
+                    <CardTitle className="text-base font-medium">使用设备</CardTitle>
+                    {openSections.device ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                  </CollapsibleTrigger>
+                </CardHeader>
+                <CollapsibleContent>
+                  <CardContent>
+                    <PieChart
+                      data={{
+                        labels: ["iOS", "Android", "Windows", "MacOS", "其他"],
+                        datasets: [
+                          {
+                            data: [42, 45, 8, 4, 1],
+                            backgroundColor: [
+                              "rgba(59, 130, 246, 0.7)",
+                              "rgba(16, 185, 129, 0.7)",
+                              "rgba(249, 115, 22, 0.7)",
+                              "rgba(139, 92, 246, 0.7)",
+                              "rgba(156, 163, 175, 0.7)",
+                            ],
+                          },
+                        ],
+                      }}
+                      height={250}
+                    />
+                  </CardContent>
+                </CollapsibleContent>
+              </Card>
+            </Collapsible>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="interest" className="space-y-4 pt-4">
+          <Collapsible open={openSections.interest} onOpenChange={() => toggleSection("interest")}>
+            <Card className="border shadow-sm">
+              <CardHeader className="pb-2">
+                <CollapsibleTrigger className="flex justify-between items-center w-full">
+                  <CardTitle className="text-base font-medium">兴趣标签分布</CardTitle>
+                  {openSections.interest ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                </CollapsibleTrigger>
+              </CardHeader>
+              <CollapsibleContent>
+                <CardContent>
+                  <BarChart
+                    data={{
+                      labels: ["科技", "金融", "教育", "旅游", "健康", "美食", "时尚", "体育", "娱乐", "汽车"],
+                      datasets: [
+                        {
+                          label: "用户数量",
+                          data: [6500, 4800, 3900, 5200, 4100, 6800, 3500, 2900, 5500, 3200],
+                          backgroundColor: "rgba(59, 130, 246, 0.7)",
+                        },
+                      ],
+                    }}
+                    height={300}
+                  />
+                </CardContent>
+              </CollapsibleContent>
+            </Card>
+          </Collapsible>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/components/user-profile/user-profile-segments.tsx b/components/user-profile/user-profile-segments.tsx
new file mode 100644
index 0000000..ee937a7
--- /dev/null
+++ b/components/user-profile/user-profile-segments.tsx
@@ -0,0 +1,210 @@
+"use client"
+
+import { useState } from "react"
+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 { PlusCircle, Search, Users, BarChart2, Edit, Trash2, ChevronDown, ChevronRight } from "lucide-react"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+
+interface UserSegment {
+  id: string
+  name: string
+  description: string
+  userCount: number
+  criteria: string[]
+  createdAt: Date
+  updatedAt: Date
+  status: "active" | "draft"
+}
+
+export function UserProfileSegments() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [openSections, setOpenSections] = useState({
+    segmentList: true,
+  })
+
+  const toggleSection = (section) => {
+    setOpenSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }))
+  }
+
+  // 模拟数据
+  const segments: UserSegment[] = [
+    {
+      id: "1",
+      name: "高价值用户",
+      description: "消费金额高且频次高的用户群体",
+      userCount: 2450,
+      criteria: ["消费金额>5000", "消费频次>10次/月", "活跃度>80%"],
+      createdAt: new Date(2023, 5, 15),
+      updatedAt: new Date(2023, 6, 20),
+      status: "active",
+    },
+    {
+      id: "2",
+      name: "新注册用户",
+      description: "最近30天内注册的新用户",
+      userCount: 1254,
+      criteria: ["注册时间<30天"],
+      createdAt: new Date(2023, 4, 10),
+      updatedAt: new Date(2023, 6, 18),
+      status: "active",
+    },
+    {
+      id: "3",
+      name: "流失风险用户",
+      description: "最近活跃度下降的用户",
+      userCount: 876,
+      criteria: ["最近登录>15天", "活跃度下降>50%"],
+      createdAt: new Date(2023, 3, 5),
+      updatedAt: new Date(2023, 5, 25),
+      status: "active",
+    },
+    {
+      id: "4",
+      name: "企业客户",
+      description: "企业类型的客户群体",
+      userCount: 542,
+      criteria: ["用户类型=企业", "员工数>50人"],
+      createdAt: new Date(2023, 2, 20),
+      updatedAt: new Date(2023, 6, 19),
+      status: "active",
+    },
+    {
+      id: "5",
+      name: "潜在高转化用户",
+      description: "浏览行为活跃但未转化的用户",
+      userCount: 1320,
+      criteria: ["浏览次数>20次/周", "未购买"],
+      createdAt: new Date(2023, 1, 15),
+      updatedAt: new Date(2023, 4, 10),
+      status: "draft",
+    },
+  ]
+
+  // 过滤分群
+  const filteredSegments = segments.filter(
+    (segment) =>
+      segment.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      segment.description.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">用户分群管理</h2>
+        <Button>
+          <PlusCircle className="mr-2 h-4 w-4" />
+          创建新分群
+        </Button>
+      </div>
+
+      <Collapsible open={openSections.segmentList} onOpenChange={() => toggleSection("segmentList")}>
+        <div className="border rounded-md p-4">
+          <CollapsibleTrigger className="flex justify-between items-center w-full mb-4">
+            <h3 className="text-lg font-medium">分群列表</h3>
+            {openSections.segmentList ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="flex justify-between items-center mb-4">
+              <div className="flex space-x-2">
+                <Select defaultValue="all">
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="状态" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部状态</SelectItem>
+                    <SelectItem value="active">已激活</SelectItem>
+                    <SelectItem value="draft">草稿</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="relative w-64">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="搜索分群..."
+                  className="pl-8"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>分群名称</TableHead>
+                    <TableHead>描述</TableHead>
+                    <TableHead>用户数量</TableHead>
+                    <TableHead>筛选条件</TableHead>
+                    <TableHead>创建时间</TableHead>
+                    <TableHead>更新时间</TableHead>
+                    <TableHead>状态</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredSegments.map((segment) => (
+                    <TableRow key={segment.id}>
+                      <TableCell className="font-medium">{segment.name}</TableCell>
+                      <TableCell>{segment.description}</TableCell>
+                      <TableCell>
+                        <div className="flex items-center">
+                          <Users className="h-4 w-4 mr-1 text-muted-foreground" />
+                          {segment.userCount.toLocaleString()}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex flex-wrap gap-1">
+                          {segment.criteria.map((criterion) => (
+                            <Badge key={criterion} variant="outline" className="text-xs">
+                              {criterion}
+                            </Badge>
+                          ))}
+                        </div>
+                      </TableCell>
+                      <TableCell>{formatDate(segment.createdAt)}</TableCell>
+                      <TableCell>{formatDate(segment.updatedAt)}</TableCell>
+                      <TableCell>
+                        <Badge variant={segment.status === "active" ? "default" : "secondary"}>
+                          {segment.status === "active" ? "已激活" : "草稿"}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex justify-end space-x-2">
+                          <Button variant="ghost" size="icon">
+                            <Edit className="h-4 w-4" />
+                          </Button>
+                          <Button variant="ghost" size="icon">
+                            <BarChart2 className="h-4 w-4" />
+                          </Button>
+                          <Button variant="ghost" size="icon" className="text-red-500">
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CollapsibleContent>
+        </div>
+      </Collapsible>
+    </div>
+  )
+}
diff --git a/components/user-profile/user-profile-tags.tsx b/components/user-profile/user-profile-tags.tsx
new file mode 100644
index 0000000..121d1db
--- /dev/null
+++ b/components/user-profile/user-profile-tags.tsx
@@ -0,0 +1,217 @@
+"use client"
+
+import { useState } from "react"
+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 { PlusCircle, Search, Tag, Edit, Trash2, Users, ChevronDown, ChevronRight } from "lucide-react"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+
+interface UserTag {
+  id: string
+  name: string
+  category: string
+  description: string
+  userCount: number
+  source: string
+  createdAt: Date
+  updatedAt: Date
+}
+
+export function UserProfileTags() {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [openSections, setOpenSections] = useState({
+    tagList: true,
+  })
+
+  const toggleSection = (section) => {
+    setOpenSections((prev) => ({
+      ...prev,
+      [section]: !prev[section],
+    }))
+  }
+
+  // 模拟数据
+  const tags: UserTag[] = [
+    {
+      id: "1",
+      name: "高价值客户",
+      category: "价值分类",
+      description: "消费金额高且频次高的用户",
+      userCount: 2450,
+      source: "系统生成",
+      createdAt: new Date(2023, 5, 15),
+      updatedAt: new Date(2023, 6, 20),
+    },
+    {
+      id: "2",
+      name: "数据分析师",
+      category: "职业角色",
+      description: "从事数据分析工作的用户",
+      userCount: 980,
+      source: "流量词映射",
+      createdAt: new Date(2023, 4, 10),
+      updatedAt: new Date(2023, 6, 18),
+    },
+    {
+      id: "3",
+      name: "营销决策者",
+      category: "职业角色",
+      description: "负责营销决策的管理人员",
+      userCount: 645,
+      source: "流量词映射",
+      createdAt: new Date(2023, 3, 5),
+      updatedAt: new Date(2023, 5, 25),
+    },
+    {
+      id: "4",
+      name: "技术爱好者",
+      category: "兴趣爱好",
+      description: "对技术有浓厚兴趣的用户",
+      userCount: 1520,
+      source: "行为分析",
+      createdAt: new Date(2023, 2, 20),
+      updatedAt: new Date(2023, 6, 19),
+    },
+    {
+      id: "5",
+      name: "活跃用户",
+      category: "活跃度",
+      description: "每周登录3次以上的用户",
+      userCount: 8600,
+      source: "系统生成",
+      createdAt: new Date(2023, 1, 15),
+      updatedAt: new Date(2023, 4, 10),
+    },
+  ]
+
+  // 过滤标签
+  const filteredTags = tags.filter(
+    (tag) =>
+      tag.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      tag.category.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      tag.description.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const formatDate = (date: Date) => {
+    return date.toLocaleDateString("zh-CN", {
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex justify-between items-center">
+        <h2 className="text-xl font-semibold">用户标签体系</h2>
+        <Button>
+          <PlusCircle className="mr-2 h-4 w-4" />
+          创建新标签
+        </Button>
+      </div>
+
+      <Collapsible open={openSections.tagList} onOpenChange={() => toggleSection("tagList")}>
+        <div className="border rounded-md p-4">
+          <CollapsibleTrigger className="flex justify-between items-center w-full mb-4">
+            <h3 className="text-lg font-medium">标签列表</h3>
+            {openSections.tagList ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            <div className="flex justify-between items-center mb-4">
+              <div className="flex space-x-2">
+                <Select defaultValue="all">
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="标签分类" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部���类</SelectItem>
+                    <SelectItem value="value">价值分类</SelectItem>
+                    <SelectItem value="role">职业角色</SelectItem>
+                    <SelectItem value="interest">兴趣爱好</SelectItem>
+                    <SelectItem value="activity">活跃度</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Select defaultValue="all">
+                  <SelectTrigger className="w-[150px]">
+                    <SelectValue placeholder="标签来源" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部来源</SelectItem>
+                    <SelectItem value="system">系统生成</SelectItem>
+                    <SelectItem value="keyword">流量词映射</SelectItem>
+                    <SelectItem value="behavior">行为分析</SelectItem>
+                    <SelectItem value="manual">手动创建</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="relative w-64">
+                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="搜索标签..."
+                  className="pl-8"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>标签名称</TableHead>
+                    <TableHead>分类</TableHead>
+                    <TableHead>描述</TableHead>
+                    <TableHead>用户数量</TableHead>
+                    <TableHead>来源</TableHead>
+                    <TableHead>创建时间</TableHead>
+                    <TableHead>更新时间</TableHead>
+                    <TableHead className="text-right">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredTags.map((tag) => (
+                    <TableRow key={tag.id}>
+                      <TableCell>
+                        <div className="flex items-center">
+                          <Tag className="h-4 w-4 mr-2 text-muted-foreground" />
+                          <span className="font-medium">{tag.name}</span>
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">{tag.category}</Badge>
+                      </TableCell>
+                      <TableCell>{tag.description}</TableCell>
+                      <TableCell>
+                        <div className="flex items-center">
+                          <Users className="h-4 w-4 mr-1 text-muted-foreground" />
+                          {tag.userCount.toLocaleString()}
+                        </div>
+                      </TableCell>
+                      <TableCell>{tag.source}</TableCell>
+                      <TableCell>{formatDate(tag.createdAt)}</TableCell>
+                      <TableCell>{formatDate(tag.updatedAt)}</TableCell>
+                      <TableCell className="text-right">
+                        <div className="flex justify-end space-x-2">
+                          <Button variant="ghost" size="icon">
+                            <Edit className="h-4 w-4" />
+                          </Button>
+                          <Button variant="ghost" size="icon" className="text-red-500">
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </CollapsibleContent>
+        </div>
+      </Collapsible>
+    </div>
+  )
+}
diff --git a/data-ingestion/data-schema.ts b/data-ingestion/data-schema.ts
new file mode 100644
index 0000000..53b5ed2
--- /dev/null
+++ b/data-ingestion/data-schema.ts
@@ -0,0 +1,8 @@
+// 定义数据结构接口
+export interface DataSchema {
+  fields: {
+    name: string
+    type: string
+    description?: string
+  }[]
+}
diff --git a/data-ingestion/data-source.ts b/data-ingestion/data-source.ts
new file mode 100644
index 0000000..5d7a232
--- /dev/null
+++ b/data-ingestion/data-source.ts
@@ -0,0 +1,10 @@
+// 定义数据源类型
+export type DataSourceType = "mysql" | "postgresql" | "mongodb" | "api" | "file"
+
+// 定义数据源接口
+export interface DataSource {
+  id: string
+  name: string
+  type: DataSourceType
+  config: any // 数据源配置信息，例如连接字符串、API 地址等
+}
diff --git a/data-ingestion/data-storage.ts b/data-ingestion/data-storage.ts
new file mode 100644
index 0000000..9ec9492
--- /dev/null
+++ b/data-ingestion/data-storage.ts
@@ -0,0 +1,4 @@
+// 定义数据存储接口
+export interface DataStorage {
+  storeData(data: any[], schema: any): Promise<void> // 存储数据，需要指定数据结构
+}
diff --git a/data-ingestion/ingestion-service.ts b/data-ingestion/ingestion-service.ts
new file mode 100644
index 0000000..8fb3f85
--- /dev/null
+++ b/data-ingestion/ingestion-service.ts
@@ -0,0 +1,6 @@
+import type { DataSource } from "./data-source"
+
+// 定义数据接入服务接口
+export interface IngestionService {
+  ingestData(dataSource: DataSource): Promise<any[]> // 接入数据，返回数据列表
+}
diff --git a/hooks/use-debounce.ts b/hooks/use-debounce.ts
new file mode 100644
index 0000000..f4419b1
--- /dev/null
+++ b/hooks/use-debounce.ts
@@ -0,0 +1,17 @@
+"use client"
+
+import { useState, useEffect } from "react"
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}
diff --git a/hooks/use-mobile.tsx b/hooks/use-mobile.tsx
new file mode 100644
index 0000000..2b0fe1d
--- /dev/null
+++ b/hooks/use-mobile.tsx
@@ -0,0 +1,19 @@
+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
new file mode 100644
index 0000000..02e111d
--- /dev/null
+++ b/hooks/use-toast.ts
@@ -0,0 +1,194 @@
+"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/hooks/useDeviceStatusPolling.ts b/hooks/useDeviceStatusPolling.ts
new file mode 100644
index 0000000..b14382a
--- /dev/null
+++ b/hooks/useDeviceStatusPolling.ts
@@ -0,0 +1,46 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import type { Device } from "@/components/device-grid"
+
+interface DeviceStatus {
+  status: "online" | "offline"
+  battery: number
+}
+
+async function fetchDeviceStatuses(deviceIds: string[]): Promise<Record<string, DeviceStatus>> {
+  // 模拟API调用
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+  return deviceIds.reduce(
+    (acc, id) => {
+      acc[id] = {
+        status: Math.random() > 0.3 ? "online" : "offline",
+        battery: Math.floor(Math.random() * 100),
+      }
+      return acc
+    },
+    {} as Record<string, DeviceStatus>,
+  )
+}
+
+export function useDeviceStatusPolling(devices: Device[]) {
+  const [statuses, setStatuses] = useState<Record<string, DeviceStatus>>({})
+
+  useEffect(() => {
+    const pollStatus = async () => {
+      try {
+        const newStatuses = await fetchDeviceStatuses(devices.map((d) => d.id))
+        setStatuses((prevStatuses) => ({ ...prevStatuses, ...newStatuses }))
+      } catch (error) {
+        console.error("Failed to fetch device statuses:", error)
+      }
+    }
+
+    pollStatus() // 立即执行一次
+    const intervalId = setInterval(pollStatus, 30000) // 每30秒更新一次
+
+    return () => clearInterval(intervalId)
+  }, [devices])
+
+  return statuses
+}
diff --git a/lib/api-utils.ts b/lib/api-utils.ts
new file mode 100644
index 0000000..755d85a
--- /dev/null
+++ b/lib/api-utils.ts
@@ -0,0 +1,47 @@
+/**
+ * 带有重试机制的API请求函数
+ * @param url 请求URL
+ * @param options 请求选项
+ * @param retries 重试次数
+ * @param retryDelay 重试延迟(ms)
+ * @returns Promise<Response>
+ */
+export async function fetchWithRetry(
+  url: string,
+  options: RequestInit = {},
+  retries = 3,
+  retryDelay = 1000,
+): Promise<Response> {
+  try {
+    const response = await fetch(url, options)
+
+    if (!response.ok && retries > 0) {
+      console.log(`请求失败，${retryDelay}ms后重试，剩余重试次数: ${retries - 1}`)
+      await new Promise((resolve) => setTimeout(resolve, retryDelay))
+      return fetchWithRetry(url, options, retries - 1, retryDelay * 2)
+    }
+
+    return response
+  } catch (error) {
+    if (retries > 0) {
+      console.log(`请求出错，${retryDelay}ms后重试，剩余重试次数: ${retries - 1}`)
+      await new Promise((resolve) => setTimeout(resolve, retryDelay))
+      return fetchWithRetry(url, options, retries - 1, retryDelay * 2)
+    }
+    throw error
+  }
+}
+
+/**
+ * 处理API响应的通用函数
+ * @param response 响应对象
+ * @returns Promise<T>
+ */
+export async function handleApiResponse<T>(response: Response): Promise<T> {
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({}))
+    throw new Error(errorData.message || `请求失败: ${response.status}`)
+  }
+
+  return response.json()
+}
diff --git a/lib/cache-utils.ts b/lib/cache-utils.ts
new file mode 100644
index 0000000..9210936
--- /dev/null
+++ b/lib/cache-utils.ts
@@ -0,0 +1,84 @@
+/**
+ * 简单的内存缓存实现
+ */
+interface CacheItem<T> {
+  value: T
+  expiry: number
+}
+
+class MemoryCache {
+  private cache: Map<string, CacheItem<any>> = new Map()
+
+  /**
+   * 获取缓存项
+   * @param key 缓存键
+   * @returns 缓存值或undefined
+   */
+  get<T>(key: string): T | undefined {
+    const item = this.cache.get(key)
+
+    if (!item) {
+      return undefined
+    }
+
+    if (Date.now() > item.expiry) {
+      this.cache.delete(key)
+      return undefined
+    }
+
+    return item.value
+  }
+
+  /**
+   * 设置缓存项
+   * @param key 缓存键
+   * @param value 缓存值
+   * @param ttlMs 过期时间(毫秒)
+   */
+  set<T>(key: string, value: T, ttlMs: number): void {
+    this.cache.set(key, {
+      value,
+      expiry: Date.now() + ttlMs,
+    })
+  }
+
+  /**
+   * 删除缓存项
+   * @param key 缓存键
+   */
+  delete(key: string): void {
+    this.cache.delete(key)
+  }
+
+  /**
+   * 清空所有缓存
+   */
+  clear(): void {
+    this.cache.clear()
+  }
+}
+
+export const memoryCache = new MemoryCache()
+
+/**
+ * 带缓存的数据获取函数
+ * @param key 缓存键
+ * @param fetchFn 获取数据的函数
+ * @param ttlMs 缓存过期时间(毫秒)
+ * @returns Promise<T>
+ */
+export async function fetchWithCache<T>(
+  key: string,
+  fetchFn: () => Promise<T>,
+  ttlMs = 60000, // 默认1分钟
+): Promise<T> {
+  const cachedData = memoryCache.get<T>(key)
+
+  if (cachedData !== undefined) {
+    return cachedData
+  }
+
+  const data = await fetchFn()
+  memoryCache.set(key, data, ttlMs)
+  return data
+}
diff --git a/lib/db-connector.ts b/lib/db-connector.ts
new file mode 100644
index 0000000..01caab6
--- /dev/null
+++ b/lib/db-connector.ts
@@ -0,0 +1,305 @@
+// 模拟数据库结构数据
+// 由于v0不支持mysql2，我们使用模拟数据来展示功能
+
+// 模拟数据库列表
+const mockDatabases = [
+  { Database: "user_data_platform" },
+  { Database: "traffic_analysis" },
+  { Database: "content_library" },
+  { Database: "wechat_accounts" },
+  { Database: "device_management" },
+]
+
+// 模拟表结构数据
+const mockDatabaseStructure: Record<string, Record<string, any[]>> = {
+  user_data_platform: {
+    users: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "username", Type: "varchar(50)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
+      { Field: "email", Type: "varchar(100)", Null: "YES", Key: "UNI", Default: null, Extra: "" },
+      { Field: "phone", Type: "varchar(20)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+      {
+        Field: "updated_at",
+        Type: "datetime",
+        Null: "YES",
+        Key: "",
+        Default: null,
+        Extra: "on update CURRENT_TIMESTAMP",
+      },
+      { Field: "last_login", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "status", Type: "tinyint(1)", Null: "NO", Key: "", Default: "1", Extra: "" },
+    ],
+    user_tags: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "user_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "tag_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+    ],
+    tags: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "name", Type: "varchar(50)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
+      { Field: "category", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "description", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+    ],
+    user_profiles: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "user_id", Type: "int(11)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
+      { Field: "full_name", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "gender", Type: "enum('male','female','other')", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "birth_date", Type: "date", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "address", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "city", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "province", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "country", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "avatar_url", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "bio", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
+    ],
+    user_activities: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "user_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "activity_type", Type: "varchar(50)", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "activity_data", Type: "json", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+      { Field: "ip_address", Type: "varchar(45)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "user_agent", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
+    ],
+  },
+  traffic_analysis: {
+    traffic_sources: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "name", Type: "varchar(100)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
+      { Field: "source_type", Type: "varchar(50)", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "description", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+    ],
+    traffic_records: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "source_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "user_id", Type: "int(11)", Null: "YES", Key: "MUL", Default: null, Extra: "" },
+      { Field: "visit_time", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+      { Field: "referrer", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "landing_page", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "exit_page", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "duration_seconds", Type: "int(11)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "device_type", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "os", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "browser", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
+    ],
+    traffic_campaigns: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "name", Type: "varchar(100)", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "source_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "start_date", Type: "date", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "end_date", Type: "date", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "budget", Type: "decimal(10,2)", Null: "YES", Key: "", Default: null, Extra: "" },
+      {
+        Field: "status",
+        Type: "enum('active','paused','completed')",
+        Null: "NO",
+        Key: "",
+        Default: "'active'",
+        Extra: "",
+      },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+      {
+        Field: "updated_at",
+        Type: "datetime",
+        Null: "YES",
+        Key: "",
+        Default: null,
+        Extra: "on update CURRENT_TIMESTAMP",
+      },
+    ],
+  },
+  content_library: {
+    content_items: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "title", Type: "varchar(255)", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "content_type", Type: "varchar(50)", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "content_data", Type: "json", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "created_by", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+      {
+        Field: "updated_at",
+        Type: "datetime",
+        Null: "YES",
+        Key: "",
+        Default: null,
+        Extra: "on update CURRENT_TIMESTAMP",
+      },
+      {
+        Field: "status",
+        Type: "enum('draft','published','archived')",
+        Null: "NO",
+        Key: "",
+        Default: "'draft'",
+        Extra: "",
+      },
+    ],
+    content_categories: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "name", Type: "varchar(100)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
+      { Field: "parent_id", Type: "int(11)", Null: "YES", Key: "MUL", Default: null, Extra: "" },
+      { Field: "description", Type: "text", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+    ],
+    content_item_categories: [
+      { Field: "content_id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "" },
+      { Field: "category_id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "" },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+    ],
+    content_tags: [
+      { Field: "content_id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "" },
+      { Field: "tag_id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "" },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+    ],
+  },
+  wechat_accounts: {
+    accounts: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "wechat_id", Type: "varchar(100)", Null: "NO", Key: "UNI", Default: null, Extra: "" },
+      { Field: "nickname", Type: "varchar(100)", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "avatar_url", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "qr_code_url", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
+      {
+        Field: "status",
+        Type: "enum('active','inactive','blocked')",
+        Null: "NO",
+        Key: "",
+        Default: "'active'",
+        Extra: "",
+      },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+      { Field: "last_sync", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
+    ],
+    friends: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "account_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "friend_wechat_id", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "nickname", Type: "varchar(100)", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "remark", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "avatar_url", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
+      {
+        Field: "gender",
+        Type: "enum('male','female','unknown')",
+        Null: "YES",
+        Key: "",
+        Default: "'unknown'",
+        Extra: "",
+      },
+      { Field: "region", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "added_at", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "last_interaction", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
+    ],
+    groups: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "account_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "group_name", Type: "varchar(100)", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "group_avatar_url", Type: "varchar(255)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "member_count", Type: "int(11)", Null: "YES", Key: "", Default: "0", Extra: "" },
+      { Field: "created_at", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "last_active", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
+    ],
+    group_members: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "group_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "friend_id", Type: "int(11)", Null: "YES", Key: "MUL", Default: null, Extra: "" },
+      { Field: "wechat_id", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "nickname", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "joined_at", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "is_admin", Type: "tinyint(1)", Null: "NO", Key: "", Default: "0", Extra: "" },
+    ],
+  },
+  device_management: {
+    devices: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "device_name", Type: "varchar(100)", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "device_type", Type: "varchar(50)", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "model", Type: "varchar(100)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "os_version", Type: "varchar(50)", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "imei", Type: "varchar(50)", Null: "YES", Key: "UNI", Default: null, Extra: "" },
+      { Field: "serial_number", Type: "varchar(100)", Null: "YES", Key: "UNI", Default: null, Extra: "" },
+      {
+        Field: "status",
+        Type: "enum('online','offline','maintenance')",
+        Null: "NO",
+        Key: "",
+        Default: "'offline'",
+        Extra: "",
+      },
+      { Field: "last_online", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
+      { Field: "registered_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+    ],
+    device_accounts: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "device_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "account_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "binding_time", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+      { Field: "status", Type: "enum('active','inactive')", Null: "NO", Key: "", Default: "'active'", Extra: "" },
+      { Field: "last_sync", Type: "datetime", Null: "YES", Key: "", Default: null, Extra: "" },
+    ],
+    device_logs: [
+      { Field: "id", Type: "int(11)", Null: "NO", Key: "PRI", Default: null, Extra: "auto_increment" },
+      { Field: "device_id", Type: "int(11)", Null: "NO", Key: "MUL", Default: null, Extra: "" },
+      { Field: "log_type", Type: "varchar(50)", Null: "NO", Key: "", Default: null, Extra: "" },
+      { Field: "log_message", Type: "text", Null: "NO", Key: "", Default: null, Extra: "" },
+      {
+        Field: "log_level",
+        Type: "enum('info','warning','error','critical')",
+        Null: "NO",
+        Key: "",
+        Default: "'info'",
+        Extra: "",
+      },
+      { Field: "created_at", Type: "datetime", Null: "NO", Key: "", Default: "CURRENT_TIMESTAMP", Extra: "" },
+      { Field: "additional_data", Type: "json", Null: "YES", Key: "", Default: null, Extra: "" },
+    ],
+  },
+}
+
+// 获取所有数据库
+export async function getDatabases() {
+  return mockDatabases
+}
+
+// 获取指定数据库中的所有表
+export async function getTables(database: string) {
+  if (!mockDatabaseStructure[database]) {
+    return []
+  }
+
+  return Object.keys(mockDatabaseStructure[database]).map((tableName) => {
+    return { Tables_in_database: tableName }
+  })
+}
+
+// 获取表结构
+export async function getTableStructure(database: string, table: string) {
+  if (!mockDatabaseStructure[database] || !mockDatabaseStructure[database][table]) {
+    return []
+  }
+
+  return mockDatabaseStructure[database][table]
+}
+
+// 获取表的创建语句
+export async function getTableCreateStatement(database: string, table: string) {
+  // 这里只返回一个模拟的创建语句
+  return [
+    {
+      Table: table,
+      "Create Table": `CREATE TABLE ${table} (...)`,
+    },
+  ]
+}
+
+// 获取数据库完整结构信息
+export async function getDatabaseStructure(database: string) {
+  if (!mockDatabaseStructure[database]) {
+    return {}
+  }
+
+  return mockDatabaseStructure[database]
+}
diff --git a/lib/documentation/docx-generator.ts b/lib/documentation/docx-generator.ts
new file mode 100644
index 0000000..30ba4a8
--- /dev/null
+++ b/lib/documentation/docx-generator.ts
@@ -0,0 +1,468 @@
+/**
+ * Word文档生成器
+ * 使用docx库生成专业的Word文档
+ */
+
+import {
+  Document,
+  Paragraph,
+  TextRun,
+  HeadingLevel,
+  ImageRun,
+  TableOfContents,
+  PageBreak,
+  AlignmentType,
+  Table,
+  TableRow,
+  TableCell,
+  WidthType,
+  BorderStyle,
+} from "docx"
+
+interface DocumentSection {
+  title: string
+  path: string
+  description: string
+  screenshot: string
+}
+
+interface DocumentData {
+  title: string
+  author: string
+  date: string
+  sections: DocumentSection[]
+}
+
+/**
+ * 生成Word文档
+ * @param data 文档数据
+ * @returns 文档的blob URL
+ */
+export async function generateDocx(data: DocumentData): Promise<string> {
+  console.log("开始生成Word文档...")
+
+  try {
+    // 验证输入数据
+    if (!data) {
+      throw new Error("文档数据不能为空")
+    }
+
+    if (!Array.isArray(data.sections)) {
+      console.warn("sections不是数组，使用空数组代替")
+      data.sections = []
+    }
+
+    console.log(`文档标题: ${data.title}`)
+    console.log(`作者: ${data.author}`)
+    console.log(`日期: ${data.date}`)
+    console.log(`部分数量: ${data.sections.length}`)
+
+    // 创建文档
+    const doc = new Document({
+      title: data.title,
+      description: "由文档生成工具自动生成",
+      creator: data.author,
+      styles: {
+        paragraphStyles: [
+          {
+            id: "Normal",
+            name: "Normal",
+            run: {
+              size: 24, // 12pt
+              font: "Microsoft YaHei",
+            },
+            paragraph: {
+              spacing: {
+                line: 360, // 1.5倍行距
+                before: 240, // 12pt
+                after: 240, // 12pt
+              },
+            },
+          },
+          {
+            id: "Heading1",
+            name: "Heading 1",
+            run: {
+              size: 36, // 18pt
+              bold: true,
+              font: "Microsoft YaHei",
+            },
+            paragraph: {
+              spacing: {
+                before: 480, // 24pt
+                after: 240, // 12pt
+              },
+            },
+          },
+          {
+            id: "Heading2",
+            name: "Heading 2",
+            run: {
+              size: 32, // 16pt
+              bold: true,
+              font: "Microsoft YaHei",
+            },
+            paragraph: {
+              spacing: {
+                before: 360, // 18pt
+                after: 240, // 12pt
+              },
+            },
+          },
+          {
+            id: "Caption",
+            name: "Caption",
+            run: {
+              size: 20, // 10pt
+              italic: true,
+              font: "Microsoft YaHei",
+            },
+            paragraph: {
+              alignment: AlignmentType.CENTER,
+              spacing: {
+                before: 120, // 6pt
+                after: 240, // 12pt
+              },
+            },
+          },
+        ],
+      },
+    })
+
+    // 文档部分
+    const sections = []
+
+    // 封面
+    sections.push({
+      properties: {},
+      children: [
+        new Paragraph({
+          text: "",
+          spacing: {
+            before: 3000, // 大约页面1/3处
+          },
+        }),
+        new Paragraph({
+          text: data.title,
+          heading: HeadingLevel.TITLE,
+          alignment: AlignmentType.CENTER,
+          spacing: {
+            after: 400,
+          },
+        }),
+        new Paragraph({
+          text: "",
+          spacing: {
+            before: 800,
+          },
+        }),
+        new Paragraph({
+          alignment: AlignmentType.CENTER,
+          children: [
+            new TextRun({
+              text: `作者: ${data.author}`,
+              size: 24,
+            }),
+          ],
+        }),
+        new Paragraph({
+          alignment: AlignmentType.CENTER,
+          children: [
+            new TextRun({
+              text: `生成日期: ${data.date}`,
+              size: 24,
+            }),
+          ],
+        }),
+        new Paragraph({
+          text: "",
+          break: PageBreak.AFTER,
+        }),
+      ],
+    })
+
+    // 目录
+    sections.push({
+      properties: {},
+      children: [
+        new Paragraph({
+          text: "目录",
+          heading: HeadingLevel.HEADING_1,
+          alignment: AlignmentType.CENTER,
+        }),
+        new TableOfContents("目录", {
+          hyperlink: true,
+          headingStyleRange: "1-3",
+        }),
+        new Paragraph({
+          text: "",
+          break: PageBreak.AFTER,
+        }),
+      ],
+    })
+
+    // 正文
+    const contentSection = {
+      properties: {},
+      children: [] as any[],
+    }
+
+    // 添加简介
+    contentSection.children.push(
+      new Paragraph({
+        text: "1. 简介",
+        heading: HeadingLevel.HEADING_1,
+      }),
+      new Paragraph({
+        text: "本文档由文档生成工具自动生成，包含应用程序的所有主要页面截图和功能说明。",
+      }),
+      new Paragraph({
+        text: "文档目的是帮助用户了解系统功能和使用方法，为系统管理员和最终用户提供参考。",
+      }),
+      new Paragraph({
+        text: "",
+      }),
+    )
+
+    // 添加页面内容
+    contentSection.children.push(
+      new Paragraph({
+        text: "2. 系统功能",
+        heading: HeadingLevel.HEADING_1,
+      }),
+    )
+
+    // 处理每个部分
+    console.log("开始处理文档部分...")
+
+    // 使用for循环而不是forEach，以便更好地处理错误
+    for (let i = 0; i < data.sections.length; i++) {
+      try {
+        const section = data.sections[i]
+        console.log(`处理部分 ${i + 1}/${data.sections.length}: ${section.title}`)
+
+        // 验证部分数据
+        if (!section.title) {
+          console.warn(`部分 ${i + 1} 缺少标题，使用默认标题`)
+          section.title = `页面 ${i + 1}`
+        }
+
+        if (!section.description) {
+          console.warn(`部分 ${i + 1} 缺少描述，使用默认描述`)
+          section.description = `这是 ${section.title} 页面的描述。`
+        }
+
+        // 添加标题
+        contentSection.children.push(
+          new Paragraph({
+            text: `2.${i + 1} ${section.title}`,
+            heading: HeadingLevel.HEADING_2,
+          }),
+        )
+
+        // 添加描述
+        const descriptionParagraphs = section.description.split("\n")
+        for (const paragraph of descriptionParagraphs) {
+          contentSection.children.push(
+            new Paragraph({
+              text: paragraph,
+            }),
+          )
+        }
+
+        // 添加截图
+        try {
+          if (section.screenshot && section.screenshot.startsWith("data:image/")) {
+            console.log(`处理截图: ${section.title}`)
+
+            // 从base64数据URL中提取图像数据
+            const base64Data = section.screenshot.split(",")[1]
+            if (!base64Data) {
+              throw new Error("无效的base64数据")
+            }
+
+            // 将base64转换为二进制数据
+            const imageBuffer = Buffer.from(base64Data, "base64")
+
+            // 添加图像
+            contentSection.children.push(
+              new Paragraph({
+                children: [
+                  new ImageRun({
+                    data: imageBuffer,
+                    transformation: {
+                      width: 600,
+                      height: 400,
+                    },
+                  }),
+                ],
+                alignment: AlignmentType.CENTER,
+              }),
+              new Paragraph({
+                text: `图 ${i + 1}: ${section.title} 页面截图`,
+                style: "Caption",
+              }),
+              new Paragraph({
+                text: "",
+              }),
+            )
+          } else {
+            console.warn(`部分 ${i + 1} 缺少有效的截图`)
+            contentSection.children.push(
+              new Paragraph({
+                text: "[截图不可用]",
+                alignment: AlignmentType.CENTER,
+              }),
+              new Paragraph({
+                text: "",
+              }),
+            )
+          }
+        } catch (imageError) {
+          console.error(`处理部分 ${i + 1} 的截图时出错:`, imageError)
+          contentSection.children.push(
+            new Paragraph({
+              text: "[处理截图时出错]",
+              alignment: AlignmentType.CENTER,
+            }),
+            new Paragraph({
+              text: "",
+            }),
+          )
+        }
+      } catch (sectionError) {
+        console.error(`处理部分 ${i + 1} 时出错:`, sectionError)
+        contentSection.children.push(
+          new Paragraph({
+            text: `[处理部分 ${i + 1} 时出错: ${sectionError instanceof Error ? sectionError.message : String(sectionError)}]`,
+            alignment: AlignmentType.CENTER,
+          }),
+          new Paragraph({
+            text: "",
+          }),
+        )
+      }
+    }
+
+    // 添加附录
+    contentSection.children.push(
+      new Paragraph({
+        text: "3. 附录",
+        heading: HeadingLevel.HEADING_1,
+      }),
+      new Paragraph({
+        text: "3.1 文档信息",
+        heading: HeadingLevel.HEADING_2,
+      }),
+    )
+
+    // 创建文档信息表格
+    const infoTable = new Table({
+      width: {
+        size: 100,
+        type: WidthType.PERCENTAGE,
+      },
+      borders: {
+        top: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
+        bottom: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
+        left: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
+        right: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
+        insideHorizontal: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
+        insideVertical: { style: BorderStyle.SINGLE, size: 1, color: "auto" },
+      },
+      rows: [
+        new TableRow({
+          children: [
+            new TableCell({
+              width: {
+                size: 30,
+                type: WidthType.PERCENTAGE,
+              },
+              children: [new Paragraph("文档标题")],
+            }),
+            new TableCell({
+              width: {
+                size: 70,
+                type: WidthType.PERCENTAGE,
+              },
+              children: [new Paragraph(data.title)],
+            }),
+          ],
+        }),
+        new TableRow({
+          children: [
+            new TableCell({
+              children: [new Paragraph("作者")],
+            }),
+            new TableCell({
+              children: [new Paragraph(data.author)],
+            }),
+          ],
+        }),
+        new TableRow({
+          children: [
+            new TableCell({
+              children: [new Paragraph("生成日期")],
+            }),
+            new TableCell({
+              children: [new Paragraph(data.date)],
+            }),
+          ],
+        }),
+        new TableRow({
+          children: [
+            new TableCell({
+              children: [new Paragraph("页面数量")],
+            }),
+            new TableCell({
+              children: [new Paragraph(String(data.sections.length))],
+            }),
+          ],
+        }),
+      ],
+    })
+
+    contentSection.children.push(infoTable)
+
+    // 添加内容部分到文档
+    sections.push(contentSection)
+
+    // 设置文档部分
+    doc.addSection({
+      children: [...sections[0].children, ...sections[1].children, ...contentSection.children],
+    })
+
+    console.log("文档生成完成，准备导出...")
+
+    // 生成blob
+    const buffer = await doc.save()
+    const blob = new Blob([buffer], { type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" })
+
+    // 创建URL
+    const url = URL.createObjectURL(blob)
+    console.log("文档URL已创建:", url)
+
+    return url
+  } catch (error) {
+    console.error("生成Word文档时出错:", error)
+    throw error
+  }
+}
+
+/**
+ * 将base64字符串转换为Buffer
+ * @param base64 base64字符串
+ * @returns Buffer
+ */
+function base64ToBuffer(base64: string): Buffer {
+  try {
+    // 移除data URL前缀
+    const base64Data = base64.includes("base64,") ? base64.split("base64,")[1] : base64
+
+    // 转换为Buffer
+    return Buffer.from(base64Data, "base64")
+  } catch (error) {
+    console.error("base64转换为Buffer时出错:", error)
+    throw error
+  }
+}
diff --git a/lib/documentation/enhanced-screenshot-service.ts b/lib/documentation/enhanced-screenshot-service.ts
new file mode 100644
index 0000000..20a62f0
--- /dev/null
+++ b/lib/documentation/enhanced-screenshot-service.ts
@@ -0,0 +1,390 @@
+import html2canvas from "html2canvas"
+import { toPng, toJpeg, toBlob, toSvg } from "html-to-image"
+
+export interface ScreenshotOptions {
+  format?: "png" | "jpeg" | "webp" | "svg"
+  quality?: number
+  width?: number
+  height?: number
+  scale?: number
+  backgroundColor?: string
+  skipFonts?: boolean
+  preferredFontFormat?: string
+  timeout?: number
+}
+
+export interface ScreenshotResult {
+  success: boolean
+  dataUrl?: string
+  blob?: Blob
+  error?: string
+  method?: string
+}
+
+class EnhancedScreenshotService {
+  private retryCount = 3
+  private retryDelay = 1000
+
+  async captureElement(element: HTMLElement, options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
+    const methods = [
+      () => this.captureWithHtmlToImage(element, options),
+      () => this.captureWithHtml2Canvas(element, options),
+      () => this.captureWithCanvas(element, options),
+      () => this.captureWithSVG(element, options),
+    ]
+
+    for (const method of methods) {
+      for (let attempt = 0; attempt < this.retryCount; attempt++) {
+        try {
+          const result = await method()
+          if (result.success) {
+            return result
+          }
+        } catch (error) {
+          console.warn(`截图方法失败 (尝试 ${attempt + 1}):`, error)
+          if (attempt < this.retryCount - 1) {
+            await this.delay(this.retryDelay)
+          }
+        }
+      }
+    }
+
+    return {
+      success: false,
+      error: "所有截图方法都失败了",
+    }
+  }
+
+  private async captureWithHtmlToImage(element: HTMLElement, options: ScreenshotOptions): Promise<ScreenshotResult> {
+    try {
+      // 等待字体和图片加载
+      await this.waitForAssets(element)
+
+      const config = {
+        quality: options.quality || 0.95,
+        width: options.width,
+        height: options.height,
+        backgroundColor: options.backgroundColor || "#ffffff",
+        skipFonts: options.skipFonts || false,
+        preferredFontFormat: options.preferredFontFormat || "woff2",
+        pixelRatio: options.scale || window.devicePixelRatio || 1,
+        cacheBust: true,
+        useCORS: true,
+        allowTaint: true,
+        style: {
+          transform: "scale(1)",
+          transformOrigin: "top left",
+        },
+      }
+
+      let dataUrl: string
+      let blob: Blob | undefined
+
+      switch (options.format) {
+        case "jpeg":
+          dataUrl = await toJpeg(element, config)
+          blob = await toBlob(element, config)
+          break
+        case "svg":
+          dataUrl = await toSvg(element, config)
+          break
+        default:
+          dataUrl = await toPng(element, config)
+          blob = await toBlob(element, config)
+      }
+
+      return {
+        success: true,
+        dataUrl,
+        blob,
+        method: "html-to-image",
+      }
+    } catch (error) {
+      throw new Error(`html-to-image 截图失败: ${error}`)
+    }
+  }
+
+  private async captureWithHtml2Canvas(element: HTMLElement, options: ScreenshotOptions): Promise<ScreenshotResult> {
+    try {
+      await this.waitForAssets(element)
+
+      const canvas = await html2canvas(element, {
+        allowTaint: true,
+        useCORS: true,
+        scale: options.scale || window.devicePixelRatio || 1,
+        width: options.width,
+        height: options.height,
+        backgroundColor: options.backgroundColor || "#ffffff",
+        logging: false,
+        removeContainer: true,
+        imageTimeout: options.timeout || 15000,
+        onclone: (clonedDoc) => {
+          // 确保克隆的文档样式正确
+          const clonedElement = clonedDoc.querySelector(`[data-screenshot-target]`)
+          if (clonedElement) {
+            clonedElement.style.transform = "none"
+            clonedElement.style.position = "static"
+          }
+        },
+      })
+
+      const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.95)
+
+      return new Promise((resolve) => {
+        canvas.toBlob(
+          (blob) => {
+            resolve({
+              success: true,
+              dataUrl,
+              blob: blob || undefined,
+              method: "html2canvas",
+            })
+          },
+          `image/${options.format || "png"}`,
+          options.quality || 0.95,
+        )
+      })
+    } catch (error) {
+      throw new Error(`html2canvas 截图失败: ${error}`)
+    }
+  }
+
+  private async captureWithCanvas(element: HTMLElement, options: ScreenshotOptions): Promise<ScreenshotResult> {
+    try {
+      const rect = element.getBoundingClientRect()
+      const canvas = document.createElement("canvas")
+      const ctx = canvas.getContext("2d")
+
+      if (!ctx) {
+        throw new Error("无法获取Canvas上下文")
+      }
+
+      const scale = options.scale || window.devicePixelRatio || 1
+      canvas.width = (options.width || rect.width) * scale
+      canvas.height = (options.height || rect.height) * scale
+
+      ctx.scale(scale, scale)
+      ctx.fillStyle = options.backgroundColor || "#ffffff"
+      ctx.fillRect(0, 0, canvas.width / scale, canvas.height / scale)
+
+      // 使用SVG foreignObject来渲染HTML
+      const svgData = await this.elementToSVG(element)
+      const img = new Image()
+
+      return new Promise((resolve, reject) => {
+        img.onload = () => {
+          ctx.drawImage(img, 0, 0)
+          const dataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.95)
+
+          canvas.toBlob(
+            (blob) => {
+              resolve({
+                success: true,
+                dataUrl,
+                blob: blob || undefined,
+                method: "canvas",
+              })
+            },
+            `image/${options.format || "png"}`,
+            options.quality || 0.95,
+          )
+        }
+
+        img.onerror = () => reject(new Error("图片加载失败"))
+        img.src = `data:image/svg+xml;base64,${btoa(svgData)}`
+      })
+    } catch (error) {
+      throw new Error(`Canvas 截图失败: ${error}`)
+    }
+  }
+
+  private async captureWithSVG(element: HTMLElement, options: ScreenshotOptions): Promise<ScreenshotResult> {
+    try {
+      const svgData = await this.elementToSVG(element)
+      const dataUrl = `data:image/svg+xml;base64,${btoa(svgData)}`
+
+      if (options.format === "svg") {
+        return {
+          success: true,
+          dataUrl,
+          method: "svg",
+        }
+      }
+
+      // 转换SVG为其他格式
+      const canvas = document.createElement("canvas")
+      const ctx = canvas.getContext("2d")
+
+      if (!ctx) {
+        throw new Error("无法获取Canvas上下文")
+      }
+
+      const img = new Image()
+
+      return new Promise((resolve, reject) => {
+        img.onload = () => {
+          const scale = options.scale || 1
+          canvas.width = (options.width || img.width) * scale
+          canvas.height = (options.height || img.height) * scale
+
+          ctx.scale(scale, scale)
+          ctx.fillStyle = options.backgroundColor || "#ffffff"
+          ctx.fillRect(0, 0, canvas.width / scale, canvas.height / scale)
+          ctx.drawImage(img, 0, 0)
+
+          const finalDataUrl = canvas.toDataURL(`image/${options.format || "png"}`, options.quality || 0.95)
+
+          canvas.toBlob(
+            (blob) => {
+              resolve({
+                success: true,
+                dataUrl: finalDataUrl,
+                blob: blob || undefined,
+                method: "svg-to-canvas",
+              })
+            },
+            `image/${options.format || "png"}`,
+            options.quality || 0.95,
+          )
+        }
+
+        img.onerror = () => reject(new Error("SVG转换失败"))
+        img.src = dataUrl
+      })
+    } catch (error) {
+      throw new Error(`SVG 截图失败: ${error}`)
+    }
+  }
+
+  private async elementToSVG(element: HTMLElement): Promise<string> {
+    const rect = element.getBoundingClientRect()
+    const computedStyle = window.getComputedStyle(element)
+
+    // 获取所有样式
+    const styles = this.getAllStyles()
+
+    const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" 
+           width="${rect.width}" 
+           height="${rect.height}">
+        <defs>
+          <style type="text/css">
+            <![CDATA[
+              ${styles}
+            ]]>
+          </style>
+        </defs>
+        <foreignObject width="100%" height="100%">
+          <div xmlns="http://www.w3.org/1999/xhtml">
+            ${element.outerHTML}
+          </div>
+        </foreignObject>
+      </svg>
+    `
+
+    return svg
+  }
+
+  private getAllStyles(): string {
+    let styles = ""
+
+    // 获取所有样式表
+    for (let i = 0; i < document.styleSheets.length; i++) {
+      try {
+        const styleSheet = document.styleSheets[i]
+        if (styleSheet.cssRules) {
+          for (let j = 0; j < styleSheet.cssRules.length; j++) {
+            styles += styleSheet.cssRules[j].cssText + "\n"
+          }
+        }
+      } catch (e) {
+        // 跨域样式表可能无法访问
+        console.warn("无法访问样式表:", e)
+      }
+    }
+
+    return styles
+  }
+
+  private async waitForAssets(element: HTMLElement): Promise<void> {
+    const images = element.querySelectorAll("img")
+    const promises: Promise<void>[] = []
+
+    images.forEach((img) => {
+      if (!img.complete) {
+        promises.push(
+          new Promise((resolve) => {
+            img.onload = () => resolve()
+            img.onerror = () => resolve() // 即使加载失败也继续
+            setTimeout(() => resolve(), 5000) // 5秒超时
+          }),
+        )
+      }
+    })
+
+    // 等待字体加载
+    if (document.fonts) {
+      promises.push(document.fonts.ready.catch(() => {}))
+    }
+
+    await Promise.all(promises)
+
+    // 额外等待确保渲染完成
+    await this.delay(500)
+  }
+
+  private delay(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms))
+  }
+
+  async captureFullPage(options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
+    try {
+      // 标记body元素用于截图
+      document.body.setAttribute("data-screenshot-target", "true")
+
+      const result = await this.captureElement(document.body, {
+        ...options,
+        width: window.innerWidth,
+        height: document.body.scrollHeight,
+      })
+
+      document.body.removeAttribute("data-screenshot-target")
+      return result
+    } catch (error) {
+      document.body.removeAttribute("data-screenshot-target")
+      throw error
+    }
+  }
+
+  async captureViewport(options: ScreenshotOptions = {}): Promise<ScreenshotResult> {
+    try {
+      // 创建一个包含当前视口的容器
+      const viewport = document.createElement("div")
+      viewport.style.position = "fixed"
+      viewport.style.top = "0"
+      viewport.style.left = "0"
+      viewport.style.width = "100vw"
+      viewport.style.height = "100vh"
+      viewport.style.pointerEvents = "none"
+      viewport.style.zIndex = "9999"
+
+      // 克隆当前视口内容
+      const bodyClone = document.body.cloneNode(true) as HTMLElement
+      viewport.appendChild(bodyClone)
+      document.body.appendChild(viewport)
+
+      const result = await this.captureElement(viewport, {
+        ...options,
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+
+      document.body.removeChild(viewport)
+      return result
+    } catch (error) {
+      throw new Error(`视口截图失败: ${error}`)
+    }
+  }
+}
+
+export const enhancedScreenshotService = new EnhancedScreenshotService()
diff --git a/lib/documentation/page-registry.ts b/lib/documentation/page-registry.ts
new file mode 100644
index 0000000..2142b42
--- /dev/null
+++ b/lib/documentation/page-registry.ts
@@ -0,0 +1,182 @@
+/**
+ * 页面注册表
+ * 包含应用程序中所有需要文档化的页面
+ */
+
+interface AppPage {
+  path: string
+  title: string
+  description: string
+}
+
+/**
+ * 获取所有需要文档化的页面
+ */
+export function getAllPages(): AppPage[] {
+  return [
+    // 主要页面
+    {
+      path: "/",
+      title: "系统概览",
+      description:
+        "用户数据资产中台的主页面，展示系统整体运行状况、关键指标和快速入口。提供数据概览、用户增长趋势、价值分布等核心信息的可视化展示。",
+    },
+
+    // 用户管理
+    {
+      path: "/user-portrait",
+      title: "用户画像",
+      description:
+        "全面展示用户的基本信息、行为特征、兴趣偏好和价值评估。通过多维度数据分析，帮助深入了解用户特征，支持精准营销和个性化服务。",
+    },
+    {
+      path: "/user-pool",
+      title: "用户池",
+      description:
+        "集中管理所有用户数据，提供高级筛选、分组和批量操作功能。支持基于多种条件的用户查询和导出，便于进行用户分析和营销活动。",
+    },
+    {
+      path: "/user-value",
+      title: "用户价值评估",
+      description:
+        "基于RFM模型和AI算法评估用户价值，识别高价值用户群体。提供用户生命周期价值预测和流失风险评估，支持制定差异化运营策略。",
+    },
+
+    // 数据管理
+    {
+      path: "/data-platform",
+      title: "数据中台",
+      description:
+        "数据管理和分析的核心平台，提供数据集成、质量监控、关联分析等功能。支持多数据源接入，实现数据的统一管理和价值挖掘。",
+    },
+    {
+      path: "/data-integration",
+      title: "数据集成",
+      description:
+        "配置和管理外部数据源的接入，支持API、数据库、文件等多种数据源类型。提供数据映射、转换和同步功能，确保数据的准确性和实时性。",
+    },
+    {
+      path: "/database-structure",
+      title: "数据库结构",
+      description:
+        "可视化展示系统数据库的表结构、字段关系和索引信息。帮助开发人员和数据分析师理解数据模型，优化查询性能。",
+    },
+    {
+      path: "/data-dictionary",
+      title: "数据字典",
+      description:
+        "提供系统中所有数据字段的详细定义、类型、取值范围和业务含义说明。作为数据标准化的参考文档，确保数据使用的一致性。",
+    },
+
+    // 标签系统
+    {
+      path: "/tag-management",
+      title: "标签管理",
+      description:
+        "创建和管理用户标签体系，支持手动标签和自动标签。提供标签分类、层级管理和标签组合功能，构建完整的用户标签画像。",
+    },
+    {
+      path: "/tag-rules",
+      title: "标签规则",
+      description:
+        "设置自动标签生成规则，基于用户行为和属性自动打标。支持复杂的条件组合和定时执行，提高标签覆盖率和准确性。",
+    },
+    {
+      path: "/tag-tasks",
+      title: "标签任务",
+      description: "管理批量标签处理任务，监控任务执行状态和结果。支持定时任务和手动触发，提供任务日志和错误处理机制。",
+    },
+
+    // 营销工具
+    {
+      path: "/scenarios",
+      title: "营销场景",
+      description: "管理各类营销场景和活动，包括拉新、促活、留存等。提供场景模板和效果分析，支持快速复制成功经验。",
+    },
+    {
+      path: "/traffic-pool",
+      title: "流量池",
+      description:
+        "管理和分配营销流量资源，监控流量使用情况和转化效果。支持流量预算管理和ROI分析，优化营销投入产出比。",
+    },
+    {
+      path: "/conversion",
+      title: "转化分析",
+      description: "分析用户转化漏斗，识别转化瓶颈和优化机会。提供多维度转化率对比和归因分析，指导营销策略优化。",
+    },
+
+    // 设备管理
+    {
+      path: "/devices",
+      title: "设备管理",
+      description:
+        "管理接入系统的所有设备，监控设备状态和性能。支持设备分组、远程控制和批量操作，确保营销活动的正常执行。",
+    },
+    {
+      path: "/wechat-accounts",
+      title: "微信账号",
+      description: "管理微信营销账号，包括个人号和公众号。提供账号状态监控、好友管理和消息发送功能，支持微信私域运营。",
+    },
+
+    // 内容管理
+    {
+      path: "/content",
+      title: "内容库",
+      description: "集中管理营销内容素材，包括文案、图片、视频等。支持内容分类、标签和版本管理，提高内容复用效率。",
+    },
+
+    // 工作空间
+    {
+      path: "/workspace",
+      title: "工作空间",
+      description: "个人工作台，集成常用功能和快捷操作。提供任务管理、数据看板和协作工具，提升工作效率。",
+    },
+
+    // AI功能
+    {
+      path: "/ai-assistant",
+      title: "AI智能助手",
+      description:
+        "基于人工智能的智能分析和决策支持系统。提供数据洞察、趋势预测和策略建议，辅助制定数据驱动的业务决策。",
+    },
+
+    // API接口
+    {
+      path: "/api-interface",
+      title: "API接口",
+      description: "系统对外API接口文档和测试工具。提供接口说明、参数定义和调用示例，支持第三方系统集成。",
+    },
+  ]
+}
+
+/**
+ * 根据路径获取页面信息
+ */
+export function getPageByPath(path: string): AppPage | null {
+  const pages = getAllPages()
+  return pages.find((page) => page.path === path) || null
+}
+
+/**
+ * 获取页面分类
+ */
+export function getPageCategories(): Record<string, AppPage[]> {
+  const pages = getAllPages()
+  const categories: Record<string, AppPage[]> = {
+    系统概览: pages.filter((p) => p.path === "/"),
+    用户管理: pages.filter((p) => p.path.includes("user") || p.path.includes("portrait")),
+    数据管理: pages.filter((p) => p.path.includes("data") || p.path.includes("database")),
+    标签系统: pages.filter((p) => p.path.includes("tag")),
+    营销工具: pages.filter(
+      (p) =>
+        p.path.includes("scenario") ||
+        p.path.includes("traffic") ||
+        p.path.includes("conversion") ||
+        p.path.includes("content"),
+    ),
+    设备管理: pages.filter((p) => p.path.includes("device") || p.path.includes("wechat")),
+    其他功能: pages.filter((p) => p.path.includes("workspace") || p.path.includes("ai") || p.path.includes("api")),
+  }
+
+  return categories
+}
diff --git a/lib/documentation/screenshot-service.ts b/lib/documentation/screenshot-service.ts
new file mode 100644
index 0000000..7191c36
--- /dev/null
+++ b/lib/documentation/screenshot-service.ts
@@ -0,0 +1,531 @@
+/**
+ * 增强版截图服务
+ * 结合多种技术方案确保能够成功捕获页面截图
+ */
+
+// 动态导入所需库
+let htmlToImageModule: any = null
+let domToImageModule: any = null
+
+// 加载所需库
+async function loadScreenshotLibraries() {
+  if (!htmlToImageModule) {
+    try {
+      htmlToImageModule = await import("html-to-image")
+      console.log("html-to-image库加载成功")
+    } catch (error) {
+      console.warn("html-to-image库加载失败:", error)
+    }
+  }
+
+  if (!domToImageModule) {
+    try {
+      domToImageModule = await import("dom-to-image")
+      console.log("dom-to-image库加载成功")
+    } catch (error) {
+      console.warn("dom-to-image库加载失败:", error)
+    }
+  }
+
+  return {
+    htmlToImage: htmlToImageModule,
+    domToImage: domToImageModule,
+  }
+}
+
+/**
+ * 使用多种方法尝试捕获页面截图
+ * @param targetElement 目标元素（iframe或窗口）
+ * @param url 页面URL
+ * @param options 配置选项
+ * @returns 截图的base64数据URL
+ */
+export async function captureScreenshot(
+  targetElement: HTMLIFrameElement | Window,
+  url: string,
+  options: {
+    maxRetries?: number
+    retryDelay?: number
+    useDirectCapture?: boolean
+    useWindowOpen?: boolean
+  } = {},
+): Promise<string> {
+  const { maxRetries = 3, retryDelay = 1000, useDirectCapture = true, useWindowOpen = false } = options
+
+  let lastError: any = null
+
+  // 尝试多种方法捕获截图
+  for (let retry = 0; retry < maxRetries; retry++) {
+    try {
+      // 如果重试，等待一段时间
+      if (retry > 0) {
+        await new Promise((resolve) => setTimeout(resolve, retryDelay))
+        console.log(`尝试第 ${retry + 1} 次捕获截图...`)
+      }
+
+      // 方法1: 使用html-to-image或dom-to-image库
+      if (useDirectCapture) {
+        const libraries = await loadScreenshotLibraries()
+
+        // 确定目标元素
+        let element: HTMLElement | null = null
+
+        if (targetElement instanceof HTMLIFrameElement) {
+          try {
+            // 尝试访问iframe内容
+            const iframeDocument = targetElement.contentDocument || targetElement.contentWindow?.document
+            if (iframeDocument) {
+              element = iframeDocument.documentElement
+            }
+          } catch (error) {
+            console.warn("无法访问iframe内容，可能是跨域限制:", error)
+          }
+        } else if (targetElement instanceof Window) {
+          element = targetElement.document.documentElement
+        }
+
+        if (element) {
+          // 尝试使用html-to-image
+          if (libraries.htmlToImage) {
+            try {
+              console.log("使用html-to-image捕获截图...")
+              const dataUrl = await libraries.htmlToImage.toPng(element, {
+                quality: 0.95,
+                cacheBust: true,
+                pixelRatio: 2,
+                skipAutoScale: true,
+                style: {
+                  "background-color": "#ffffff",
+                },
+              })
+              if (dataUrl && dataUrl.startsWith("data:image/png;base64,")) {
+                console.log("html-to-image捕获成功!")
+                return dataUrl
+              }
+            } catch (error) {
+              console.warn("html-to-image捕获失败:", error)
+            }
+          }
+
+          // 尝试使用dom-to-image
+          if (libraries.domToImage) {
+            try {
+              console.log("使用dom-to-image捕获截图...")
+              const dataUrl = await libraries.domToImage.toPng(element, {
+                quality: 0.95,
+                bgcolor: "#ffffff",
+                scale: 2,
+              })
+              if (dataUrl && dataUrl.startsWith("data:image/png;base64,")) {
+                console.log("dom-to-image捕获成功!")
+                return dataUrl
+              }
+            } catch (error) {
+              console.warn("dom-to-image捕获失败:", error)
+            }
+          }
+        }
+      }
+
+      // 方法2: 使用Canvas API
+      try {
+        console.log("使用Canvas API捕获截图...")
+        const screenshot = await captureWithCanvas(targetElement)
+        if (screenshot) {
+          console.log("Canvas API捕获成功!")
+          return screenshot
+        }
+      } catch (error) {
+        console.warn("Canvas API捕获失败:", error)
+        lastError = error
+      }
+
+      // 方法3: 使用postMessage通信
+      if (targetElement instanceof HTMLIFrameElement) {
+        try {
+          console.log("使用postMessage尝试捕获截图...")
+          const screenshot = await captureWithPostMessage(targetElement)
+          if (screenshot) {
+            console.log("postMessage捕获成功!")
+            return screenshot
+          }
+        } catch (error) {
+          console.warn("postMessage捕获失败:", error)
+          lastError = error
+        }
+      }
+
+      // 方法4: 使用window.open打开页面
+      if (useWindowOpen) {
+        try {
+          console.log("使用window.open尝试捕获截图...")
+          const screenshot = await captureWithWindowOpen(url)
+          if (screenshot) {
+            console.log("window.open捕获成功!")
+            return screenshot
+          }
+        } catch (error) {
+          console.warn("window.open捕获失败:", error)
+          lastError = error
+        }
+      }
+    } catch (error) {
+      console.error(`第 ${retry + 1} 次捕获截图失败:`, error)
+      lastError = error
+    }
+  }
+
+  // 所有方法都失败，使用备用方案
+  console.warn("所有截图方法都失败，使用备用方案")
+  return createFallbackScreenshot(url, lastError)
+}
+
+/**
+ * 使用Canvas API捕获截图
+ */
+async function captureWithCanvas(target: HTMLIFrameElement | Window): Promise<string | null> {
+  try {
+    let document: Document | null = null
+    let width = 1200
+    let height = 800
+
+    if (target instanceof HTMLIFrameElement) {
+      if (!target.contentDocument && !target.contentWindow?.document) {
+        throw new Error("无法访问iframe内容")
+      }
+      document = target.contentDocument || target.contentWindow?.document || null
+      width = target.offsetWidth || width
+      height = target.offsetHeight || height
+    } else {
+      document = target.document
+      width = target.innerWidth
+      height = target.innerHeight
+    }
+
+    if (!document) {
+      throw new Error("无法获取文档对象")
+    }
+
+    // 创建canvas
+    const canvas = document.createElement("canvas")
+    canvas.width = width
+    canvas.height = height
+
+    const ctx = canvas.getContext("2d")
+    if (!ctx) {
+      throw new Error("无法创建canvas上下文")
+    }
+
+    // 绘制白色背景
+    ctx.fillStyle = "#ffffff"
+    ctx.fillRect(0, 0, width, height)
+
+    // 创建一个图像对象
+    const img = new Image()
+    img.crossOrigin = "anonymous"
+
+    // 将文档转换为SVG数据URL
+    const data = new XMLSerializer().serializeToString(document.documentElement)
+    const svg = new Blob([data], { type: "image/svg+xml" })
+    const url = URL.createObjectURL(svg)
+
+    // 等待图像加载
+    await new Promise((resolve, reject) => {
+      img.onload = resolve
+      img.onerror = reject
+      img.src = url
+    })
+
+    // 绘制图像
+    ctx.drawImage(img, 0, 0, width, height)
+    URL.revokeObjectURL(url)
+
+    // 返回数据URL
+    return canvas.toDataURL("image/png")
+  } catch (error) {
+    console.error("Canvas捕获失败:", error)
+    return null
+  }
+}
+
+/**
+ * 使用postMessage与iframe通信捕获截图
+ */
+async function captureWithPostMessage(iframe: HTMLIFrameElement): Promise<string | null> {
+  return new Promise((resolve, reject) => {
+    // 设置超时
+    const timeout = setTimeout(() => {
+      window.removeEventListener("message", messageHandler)
+      reject(new Error("postMessage截图超时"))
+    }, 5000)
+
+    // 消息处理函数
+    function messageHandler(event: MessageEvent) {
+      if (event.data && event.data.type === "screenshot" && event.data.dataUrl) {
+        clearTimeout(timeout)
+        window.removeEventListener("message", messageHandler)
+        resolve(event.data.dataUrl)
+      }
+    }
+
+    // 监听消息
+    window.addEventListener("message", messageHandler)
+
+    // 向iframe发送消息
+    try {
+      iframe.contentWindow?.postMessage({ type: "requestScreenshot" }, "*")
+    } catch (error) {
+      clearTimeout(timeout)
+      window.removeEventListener("message", messageHandler)
+      reject(error)
+    }
+  })
+}
+
+/**
+ * 使用window.open打开页面并捕获截图
+ */
+async function captureWithWindowOpen(url: string): Promise<string | null> {
+  return new Promise((resolve, reject) => {
+    try {
+      // 打开新窗口
+      const newWindow = window.open(url, "_blank", "width=1200,height=800")
+
+      if (!newWindow) {
+        reject(new Error("无法打开新窗口，可能被浏览器阻止"))
+        return
+      }
+
+      // 设置超时
+      const timeout = setTimeout(() => {
+        if (newWindow) newWindow.close()
+        reject(new Error("window.open截图超时"))
+      }, 10000)
+
+      // 等待页面加载完成
+      newWindow.onload = async () => {
+        try {
+          // 等待一段时间，确保页面完全渲染
+          await new Promise((resolve) => setTimeout(resolve, 2000))
+
+          // 尝试捕获截图
+          const libraries = await loadScreenshotLibraries()
+          let screenshot = null
+
+          if (libraries.htmlToImage) {
+            try {
+              screenshot = await libraries.htmlToImage.toPng(newWindow.document.documentElement)
+            } catch (error) {
+              console.warn("html-to-image捕获失败:", error)
+            }
+          }
+
+          if (!screenshot && libraries.domToImage) {
+            try {
+              screenshot = await libraries.domToImage.toPng(newWindow.document.documentElement)
+            } catch (error) {
+              console.warn("dom-to-image捕获失败:", error)
+            }
+          }
+
+          // 关闭窗口
+          newWindow.close()
+          clearTimeout(timeout)
+
+          if (screenshot) {
+            resolve(screenshot)
+          } else {
+            reject(new Error("无法捕获新窗口的截图"))
+          }
+        } catch (error) {
+          newWindow.close()
+          clearTimeout(timeout)
+          reject(error)
+        }
+      }
+
+      // 处理加载错误
+      newWindow.onerror = (event) => {
+        newWindow.close()
+        clearTimeout(timeout)
+        reject(new Error("新窗口加载出错"))
+      }
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+/**
+ * 创建备用截图
+ * 当所有方法都失败时，生成一个包含页面信息的模拟截图
+ */
+function createFallbackScreenshot(url: string, error: any): string {
+  // 提取页面标题
+  const pathParts = url.split("/")
+  const pageName = pathParts[pathParts.length - 1] || "页面"
+
+  // 创建canvas
+  const canvas = document.createElement("canvas")
+  const ctx = canvas.getContext("2d")
+
+  if (!ctx) {
+    throw new Error("无法创建canvas上下文")
+  }
+
+  // 设置canvas尺寸
+  const width = 1200
+  const height = 800
+  canvas.width = width
+  canvas.height = height
+
+  // 绘制背景
+  ctx.fillStyle = "#ffffff"
+  ctx.fillRect(0, 0, width, height)
+
+  // 绘制边框
+  ctx.strokeStyle = "#e5e7eb"
+  ctx.lineWidth = 2
+  ctx.strokeRect(1, 1, width - 2, height - 2)
+
+  // 绘制页面信息
+  ctx.fillStyle = "#f9fafb"
+  ctx.fillRect(0, 0, width, 80)
+
+  ctx.fillStyle = "#111827"
+  ctx.font = "bold 24px system-ui"
+  ctx.fillText(pageName, 20, 40)
+
+  ctx.fillStyle = "#6b7280"
+  ctx.font = "14px system-ui"
+  ctx.fillText(url, 20, 65)
+
+  // 绘制内容区域
+  ctx.fillStyle = "#f3f4f6"
+  ctx.fillRect(20, 100, width - 40, height - 120)
+
+  // 添加错误信息
+  ctx.fillStyle = "#ef4444"
+  ctx.font = "16px system-ui"
+  ctx.fillText("截图捕获失败", 40, 140)
+
+  ctx.fillStyle = "#6b7280"
+  ctx.font = "14px system-ui"
+  ctx.fillText(`错误信息: ${error ? error.message || "未知错误" : "未知错误"}`, 40, 170)
+  ctx.fillText(`URL: ${url}`, 40, 200)
+  ctx.fillText("请尝试手动截图或刷新页面后重试", 40, 230)
+
+  // 添加水印
+  ctx.save()
+  ctx.globalAlpha = 0.1
+  ctx.fillStyle = "#000000"
+  ctx.font = "bold 48px system-ui"
+  ctx.translate(width / 2, height / 2)
+  ctx.rotate(-Math.PI / 6)
+  ctx.textAlign = "center"
+  ctx.fillText("备用截图", 0, 0)
+  ctx.restore()
+
+  // 返回base64数据
+  return canvas.toDataURL("image/png")
+}
+
+/**
+ * 注入截图脚本到页面
+ * 这个函数会向页面注入一个脚本，使页面能够响应截图请求
+ */
+export function injectScreenshotScript(window: Window): void {
+  try {
+    const script = window.document.createElement("script")
+    script.textContent = `
+      // 监听截图请求
+      window.addEventListener('message', async function(event) {
+        if (event.data && event.data.type === 'requestScreenshot') {
+          try {
+            // 动态加载html2canvas
+            const script = document.createElement('script');
+            script.src = 'https://html2canvas.hertzen.com/dist/html2canvas.min.js';
+            script.onload = async function() {
+              try {
+                // 使用html2canvas捕获页面
+                const canvas = await html2canvas(document.documentElement, {
+                  allowTaint: true,
+                  useCORS: true,
+                  scale: 2,
+                  backgroundColor: '#ffffff'
+                });
+                
+                // 发送截图数据
+                const dataUrl = canvas.toDataURL('image/png');
+                window.parent.postMessage({
+                  type: 'screenshot',
+                  dataUrl: dataUrl
+                }, '*');
+              } catch (error) {
+                console.error('html2canvas捕获失败:', error);
+                window.parent.postMessage({
+                  type: 'screenshotError',
+                  error: error.toString()
+                }, '*');
+              }
+            };
+            script.onerror = function(error) {
+              console.error('加载html2canvas失败:', error);
+              window.parent.postMessage({
+                type: 'screenshotError',
+                error: 'Failed to load html2canvas'
+              }, '*');
+            };
+            document.head.appendChild(script);
+          } catch (error) {
+            console.error('处理截图请求时出错:', error);
+            window.parent.postMessage({
+              type: 'screenshotError',
+              error: error.toString()
+            }, '*');
+          }
+        }
+      });
+      
+      console.log('截图脚本已注入');
+    `
+    window.document.head.appendChild(script)
+  } catch (error) {
+    console.error("注入截图脚本失败:", error)
+  }
+}
+
+/**
+ * 使用服务器端API捕获截图
+ * 注意：这需要后端支持
+ */
+export async function captureWithServerAPI(url: string): Promise<string | null> {
+  try {
+    // 这里应该调用后端API
+    // 由于我们没有实际的后端API，这里只是一个示例
+    console.log("尝试使用服务器端API捕获截图:", url)
+
+    // 模拟API调用
+    const response = await fetch("/api/screenshot", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ url }),
+    })
+
+    if (!response.ok) {
+      throw new Error(`API请求失败: ${response.status} ${response.statusText}`)
+    }
+
+    const data = await response.json()
+    if (data.success && data.screenshot) {
+      return data.screenshot
+    } else {
+      throw new Error(data.error || "未知错误")
+    }
+  } catch (error) {
+    console.error("服务器端API捕获失败:", error)
+    return null
+  }
+}
diff --git a/lib/tutorials.ts b/lib/tutorials.ts
new file mode 100644
index 0000000..9d28e42
--- /dev/null
+++ b/lib/tutorials.ts
@@ -0,0 +1,59 @@
+import type { PageTutorial, TutorialVideo } from "@/types/tutorial"
+
+// 模拟后台配置的教程视频数据
+export const tutorialConfig: PageTutorial[] = [
+  {
+    pageId: "home",
+    videos: [
+      {
+        id: "home-intro",
+        title: "存客宝使用介绍",
+        description: "了解存客宝的主要功能和基本操作流程",
+        url: "/videos/home-intro.mp4",
+        thumbnailUrl: "/placeholder.svg?height=360&width=640",
+      },
+    ],
+  },
+  {
+    pageId: "scenarios/xiaohongshu",
+    videos: [
+      {
+        id: "xiaohongshu-intro",
+        title: "小红书获客功能介绍",
+        description: "学习如何使用小红书场景获取精准客户",
+        url: "/videos/xiaohongshu-intro.mp4",
+        thumbnailUrl: "/placeholder.svg?height=360&width=640",
+      },
+      {
+        id: "xiaohongshu-setup",
+        title: "小红书获客配置教程",
+        description: "详细了解小红书获客的各项配置选项",
+        url: "/videos/xiaohongshu-setup.mp4",
+        thumbnailUrl: "/placeholder.svg?height=360&width=640",
+      },
+    ],
+  },
+  {
+    pageId: "scenarios/douyin",
+    videos: [
+      {
+        id: "douyin-intro",
+        title: "抖音获客功能介绍",
+        description: "学习如何使用抖音场景获取精准客户",
+        url: "/videos/douyin-intro.mp4",
+        thumbnailUrl: "/placeholder.svg?height=360&width=640",
+      },
+    ],
+  },
+  // ... 其他页面的视频配置
+]
+
+export function getPageTutorials(path: string): TutorialVideo[] {
+  // 移除开头的斜杠并标准化路径
+  const normalizedPath = path.replace(/^\/+/, "")
+
+  // 查找匹配的页面教程
+  const pageTutorial = tutorialConfig.find((config) => normalizedPath.startsWith(config.pageId))
+
+  return pageTutorial?.videos || []
+}
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 0000000..4ad2323
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,37 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function formatNumber(num: number): string {
+  return new Intl.NumberFormat("zh-CN").format(num)
+}
+
+export function formatPercent(num: number): string {
+  return new Intl.NumberFormat("zh-CN", {
+    style: "percent",
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  }).format(num / 100)
+}
+
+export function formatDate(date: Date | string): string {
+  if (typeof date === "string") {
+    date = new Date(date)
+  }
+  return new Intl.DateTimeFormat("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(date)
+}
+
+export function getGrowthClass(value: number): string {
+  if (value > 0) return "text-green-500"
+  if (value < 0) return "text-red-500"
+  return "text-gray-500"
+}
diff --git a/next.config.mjs b/next.config.mjs
new file mode 100644
index 0000000..2033beb
--- /dev/null
+++ b/next.config.mjs
@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+}
+
+export default nextConfig
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..393f5f6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "kr-users-front",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "lint": "next lint",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@ant-design/plots": "latest",
+    "@radix-ui/react-accordion": "latest",
+    "@radix-ui/react-avatar": "latest",
+    "@radix-ui/react-checkbox": "latest",
+    "@radix-ui/react-collapsible": "latest",
+    "@radix-ui/react-dialog": "latest",
+    "@radix-ui/react-dropdown-menu": "latest",
+    "@radix-ui/react-icons": "latest",
+    "@radix-ui/react-label": "latest",
+    "@radix-ui/react-popover": "latest",
+    "@radix-ui/react-progress": "latest",
+    "@radix-ui/react-radio-group": "latest",
+    "@radix-ui/react-scroll-area": "latest",
+    "@radix-ui/react-select": "latest",
+    "@radix-ui/react-slider": "latest",
+    "@radix-ui/react-slot": "latest",
+    "@radix-ui/react-switch": "latest",
+    "@radix-ui/react-tabs": "latest",
+    "@radix-ui/react-toast": "latest",
+    "@radix-ui/react-tooltip": "latest",
+    "@tanstack/react-table": "latest",
+    "@tanstack/react-virtual": "latest",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "d3": "latest",
+    "date-fns": "latest",
+    "docx": "latest",
+    "dom-to-image": "latest",
+    "html-to-image": "latest",
+    "html2canvas": "latest",
+    "lucide-react": "^0.454.0",
+    "next": "14.2.16",
+    "next-themes": "latest",
+    "react": "^18",
+    "react-day-picker": "latest",
+    "react-dom": "^18",
+    "react-intersection-observer": "latest",
+    "recharts": "latest",
+    "regenerator-runtime": "latest",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8.5",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  }
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..e71931a
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,6326 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@ant-design/plots':
+        specifier: latest
+        version: 2.6.0(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)
+      '@radix-ui/react-avatar':
+        specifier: latest
+        version: 1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-checkbox':
+        specifier: latest
+        version: 1.3.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-collapsible':
+        specifier: latest
+        version: 1.1.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)
+      '@radix-ui/react-dialog':
+        specifier: latest
+        version: 1.1.14(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-dropdown-menu':
+        specifier: latest
+        version: 2.1.15(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-icons':
+        specifier: latest
+        version: 1.3.2(react@18.0.0)
+      '@radix-ui/react-label':
+        specifier: latest
+        version: 2.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-popover':
+        specifier: latest
+        version: 1.1.14(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-progress':
+        specifier: latest
+        version: 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-radio-group':
+        specifier: latest
+        version: 1.3.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-scroll-area':
+        specifier: latest
+        version: 1.2.9(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-select':
+        specifier: latest
+        version: 2.2.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slider':
+        specifier: latest
+        version: 1.3.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot':
+        specifier: latest
+        version: 1.2.3(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-switch':
+        specifier: latest
+        version: 1.2.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-tabs':
+        specifier: latest
+        version: 1.1.12(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-toast':
+        specifier: latest
+        version: 1.2.14(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-tooltip':
+        specifier: latest
+        version: 1.2.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@tanstack/react-table':
+        specifier: latest
+        version: 8.21.3(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@tanstack/react-virtual':
+        specifier: latest
+        version: 3.13.12(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      d3:
+        specifier: latest
+        version: 7.9.0
+      date-fns:
+        specifier: latest
+        version: 4.1.0
+      docx:
+        specifier: latest
+        version: 9.5.1
+      dom-to-image:
+        specifier: latest
+        version: 2.6.0
+      html-to-image:
+        specifier: latest
+        version: 1.11.13
+      html2canvas:
+        specifier: latest
+        version: 1.4.1
+      lucide-react:
+        specifier: ^0.454.0
+        version: 0.454.0(react@18.0.0)
+      next:
+        specifier: 14.2.16
+        version: 14.2.16(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)
+      react:
+        specifier: ^18
+        version: 18.0.0
+      react-day-picker:
+        specifier: latest
+        version: 9.8.0(react@18.0.0)
+      react-dom:
+        specifier: ^18
+        version: 18.0.0(react@18.0.0)
+      react-intersection-observer:
+        specifier: latest
+        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)
+      regenerator-runtime:
+        specifier: latest
+        version: 0.14.1
+      tailwind-merge:
+        specifier: ^2.5.5
+        version: 2.5.5
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.3.0(postcss@8.5.0))
+    devDependencies:
+      '@types/node':
+        specifier: ^22
+        version: 22.0.0
+      '@types/react':
+        specifier: ^18
+        version: 18.0.0
+      '@types/react-dom':
+        specifier: ^18
+        version: 18.0.0
+      autoprefixer:
+        specifier: ^10.0.1
+        version: 10.0.1(postcss@8.5.0)
+      eslint:
+        specifier: ^8
+        version: 8.0.0
+      eslint-config-next:
+        specifier: 14.1.0
+        version: 14.1.0(eslint@8.0.0)(typescript@5.0.2)
+      postcss:
+        specifier: ^8.5
+        version: 8.5.0
+      tailwindcss:
+        specifier: ^3.3.0
+        version: 3.3.0(postcss@8.5.0)
+      typescript:
+        specifier: ^5
+        version: 5.0.2
+
+packages:
+
+  '@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.0':
+    resolution: {integrity: sha512-l6sZLPoKPKWG6kdvHe+H7vUqNQk2i1xjsiBQe/8ABZ9KDRDnig+LzHBjHnVl0fvqmzDPI3O3RFEccl1tfA1i4A==}
+    peerDependencies:
+      react: '>=16.8.4'
+      react-dom: '>=16.8.4'
+
+  '@antv/component@2.1.4':
+    resolution: {integrity: sha512-B6xhxYCk57VkyPViWSR5nry8d3Qog51rcFhfuNHJp5S1kKkGqojkzt6aP/45llF/jHNnBLdxnPNQFlCIxZERDQ==}
+
+  '@antv/coord@0.4.7':
+    resolution: {integrity: sha512-UTbrMLhwJUkKzqJx5KFnSRpU3BqrdLORJbwUbHK2zHSCT3q3bjcFA//ZYLVfIlwqFDXp/hzfMyRtp0c77A9ZVA==}
+
+  '@antv/event-emitter@0.1.3':
+    resolution: {integrity: sha512-4ddpsiHN9Pd4UIlWuKVK1C4IiZIdbwQvy9i7DUSI3xNJ89FPUFt8lxDYj8GzzfdllV0NkJTRxnG+FvLk0llidg==}
+
+  '@antv/expr@1.0.2':
+    resolution: {integrity: sha512-vrfdmPHkTuiS5voVutKl2l06w1ihBh9A8SFdQPEE+2KMVpkymzGOF1eWpfkbGZ7tiFE15GodVdhhHomD/hdIwg==}
+
+  '@antv/g-camera-api@2.0.40':
+    resolution: {integrity: sha512-Pq3XLDgRk+TT2u7pcyBavPP9MCLzfsCwknrUqiGcBo9lXCUI9ZcWWquehv8dVXX8df4q9u4dFFJYQ1wQFx+mKA==}
+
+  '@antv/g-canvas@2.0.47':
+    resolution: {integrity: sha512-IB7GvL9QXEQoVvQwOrcvxt0wD+9MQ7uSLS0mXyUeyURj3YUiOSO9aDgc7CdmkjwDvjd3eLmnqOROTFO+NWAtnA==}
+
+  '@antv/g-dom-mutation-observer-api@2.0.37':
+    resolution: {integrity: sha512-s2pmAtyoq8WAkkcgc0f/Tq27RlRckjcGDspqWadxNNwTQrkOVuCFshb7an0Vd/NpU3y0e8aZi+t6TUeew7qzlA==}
+
+  '@antv/g-lite@2.3.1':
+    resolution: {integrity: sha512-9Dwc/IItd5oIB+70rfkaVwHs6yT42M88KT1F4/g5mJnL4lpBprCj+yWXBkoS1gKIvc4ua2KOd2wEGv4ziTMvJA==}
+
+  '@antv/g-math@3.0.1':
+    resolution: {integrity: sha512-FvkDBNRpj+HsLINunrL2PW0OlG368MlpHuihbxleuajGim5kra8tgISwCLmAf8Yz2b1CgZ9PvpohqiLzHS7HLg==}
+
+  '@antv/g-plugin-canvas-path-generator@2.1.21':
+    resolution: {integrity: sha512-vA53t7H/K/yXGs7hzEcYL27bxDq6eNcPRjfqSNB41hn5UjKZkwm5zslow8reWW+xvFmFfOmLBHxLFzACVgbz5w==}
+
+  '@antv/g-plugin-canvas-picker@2.1.26':
+    resolution: {integrity: sha512-gH0Ji6c0BQ0wKf/1QHstjsM1UflPWAPQqZwrbwxa4qBqhqZ1uLjcabUa6xpjcXIcV4E+B2QX46+Rud0If7CdIw==}
+
+  '@antv/g-plugin-canvas-renderer@2.3.2':
+    resolution: {integrity: sha512-32oh/ZXyihPdisIcpna9q+CwM7TinQw65hLGItY+z1zESswQZb1oYV6G9EdeqeGeoXYK+U/hfu8gM+haMMoNvw==}
+
+  '@antv/g-plugin-dom-interaction@2.1.26':
+    resolution: {integrity: sha512-3DVsP1wHiLVXkGcjTyCfdlddP+du54s8XkjpBz4mW6Ynufz6C9OXR8A6Fgm62I+VJ+UVu9Cir4kyffpXt/sRkw==}
+
+  '@antv/g-plugin-dragndrop@2.0.37':
+    resolution: {integrity: sha512-cStWWmXe6cNQpSlr22vrA8Moub8l4TXO0A8wvm7cTZg0DIkbBA1KaL18a7tNE1W3xUSkO8ttLmHcwv2xDLEADA==}
+
+  '@antv/g-plugin-html-renderer@2.1.26':
+    resolution: {integrity: sha512-G74ZAicXLYS93my4ciKr0HiW7VDcBnVLSL0mLO2mfrACDKme6+Xo03Cu0Bkdlt7iraKYR3soO6TFCc9hatIx5A==}
+
+  '@antv/g-plugin-image-loader@2.1.25':
+    resolution: {integrity: sha512-J5eCow6zZa5krXDMfIemt5Y10nWmUQmeBig+o/STRoo4MTpWrUrBuG/LgNaOw/tbXar7/Anf2yuahit4pKwc4A==}
+
+  '@antv/g-web-animations-api@2.1.27':
+    resolution: {integrity: sha512-oqyVXBipFZ3l+LpTy6kbxUo0r0MrjLcxe186KpUxp7eA64vWSBVjNocUrPM7UKdGPJpudhUJYPFHRHzPnKlssQ==}
+
+  '@antv/g2-extension-plot@0.2.2':
+    resolution: {integrity: sha512-KJXCXO7as+h0hDqirGXf1omrNuYzQmY3VmBmp7lIvkepbQ7sz3pPwy895r1FWETGF3vTk5UeFcAF5yzzBHWgbw==}
+
+  '@antv/g2@5.3.4':
+    resolution: {integrity: sha512-IztyYa2EVp4ukrqQWU9ZntAQLY0IKK3stmNOLY/FPda3ZyiQ/jlfjRWQ/Hadejfq/nrtVlrHxWeZqNfz5HHJ2g==}
+
+  '@antv/g@6.1.27':
+    resolution: {integrity: sha512-s9rrGgxc3CFS2EY8Ap7/pwRBgBsGINbFFfndRsCh2BWU6u9GkpVuFWf8oQM31uaHM62wplJ6sdZZqyoIor1/RA==}
+
+  '@antv/scale@0.4.16':
+    resolution: {integrity: sha512-5wg/zB5kXHxpTV5OYwJD3ja6R8yTiqIOkjOhmpEJiowkzRlbEC/BOyMvNUq5fqFIHnMCE9woO7+c3zxEQCKPjw==}
+
+  '@antv/util@2.0.17':
+    resolution: {integrity: sha512-o6I9hi5CIUvLGDhth0RxNSFDRwXeywmt6ExR4+RmVAzIi48ps6HUy+svxOCayvrPBN37uE6TAc2KDofRo0nK9Q==}
+
+  '@antv/util@3.3.11':
+    resolution: {integrity: sha512-FII08DFM4ABh2q5rPYdr0hMtKXRgeZazvXaFYCs7J7uTcWDHUhczab2qOCJLNDugoj8jFag1djb7wS9ehaRYBg==}
+
+  '@antv/vendor@1.0.11':
+    resolution: {integrity: sha512-LmhPEQ+aapk3barntaiIxJ5VHno/Tyab2JnfdcPzp5xONh/8VSfed4bo/9xKo5HcUAEydko38vYLfj6lJliLiw==}
+
+  '@babel/runtime@7.27.6':
+    resolution: {integrity: sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@date-fns/tz@1.2.0':
+    resolution: {integrity: sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==}
+
+  '@emnapi/core@1.4.5':
+    resolution: {integrity: sha512-XsLw1dEOpkSX/WucdqUhPWP7hDxSvZiY+fsUC14h+FtQ2Ifni4znbBt8punRX+Uj2JG/uDb8nEHVKvrVlvdZ5Q==}
+
+  '@emnapi/runtime@1.4.5':
+    resolution: {integrity: sha512-++LApOtY0pEEz1zrd9vy1/zXVaVJJ/EbAF3u0fXIzPJEDtnITsBGbbK0EkM72amhl/R5b+5xx0Y/QhcVOpuulg==}
+
+  '@emnapi/wasi-threads@1.0.4':
+    resolution: {integrity: sha512-PJR+bOmMOPH8AtcTGAyYNiuJ3/Fcoj2XN/gBEWzDIKh254XO+mM9XoXHk5GNEhodxeMznbg7BlRojVbKN+gC6g==}
+
+  '@eslint/eslintrc@1.4.1':
+    resolution: {integrity: sha512-XXrH9Uarn0stsyldqDYq8r++mROmWRI1xKMXa640Bb//SY1+ECYX6VzT6Lcx5frD0V30XieqJ0oX9I2Xj5aoMA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  '@floating-ui/core@1.7.2':
+    resolution: {integrity: sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==}
+
+  '@floating-ui/dom@1.7.2':
+    resolution: {integrity: sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==}
+
+  '@floating-ui/react-dom@2.1.4':
+    resolution: {integrity: sha512-JbbpPhp38UmXDDAu60RJmbeme37Jbgsm7NrHGgzYYFKmblzRUh6Pa641dII6LsjwF4XlScDrde2UAzDo/b9KPw==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@humanwhocodes/config-array@0.6.0':
+    resolution: {integrity: sha512-JQlEKbcgEUjBFhLIF4iqM7u/9lwgHRBcpHrmUNCALK0Q3amXN6lxdoXLnF0sm11E9VqTmBALR87IlUg1bZ8A9A==}
+    engines: {node: '>=10.10.0'}
+    deprecated: Use @eslint/config-array instead
+
+  '@humanwhocodes/object-schema@1.2.1':
+    resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
+    deprecated: Use @eslint/object-schema instead
+
+  '@isaacs/cliui@8.0.2':
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    engines: {node: '>=12'}
+
+  '@jridgewell/gen-mapping@0.3.12':
+    resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.4':
+    resolution: {integrity: sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==}
+
+  '@jridgewell/trace-mapping@0.3.29':
+    resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+
+  '@next/env@14.2.16':
+    resolution: {integrity: sha512-fLrX5TfJzHCbnZ9YUSnGW63tMV3L4nSfhgOQ0iCcX21Pt+VSTDuaLsSuL8J/2XAiVA5AnzvXDpf6pMs60QxOag==}
+
+  '@next/eslint-plugin-next@14.1.0':
+    resolution: {integrity: sha512-x4FavbNEeXx/baD/zC/SdrvkjSby8nBn8KcCREqk6UuwvwoAPZmaV8TFCAuo/cpovBRTIY67mHhe86MQQm/68Q==}
+
+  '@next/swc-darwin-arm64@14.2.16':
+    resolution: {integrity: sha512-uFT34QojYkf0+nn6MEZ4gIWQ5aqGF11uIZ1HSxG+cSbj+Mg3+tYm8qXYd3dKN5jqKUm5rBVvf1PBRO/MeQ6rxw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@next/swc-darwin-x64@14.2.16':
+    resolution: {integrity: sha512-mCecsFkYezem0QiZlg2bau3Xul77VxUD38b/auAjohMA22G9KTJneUYMv78vWoCCFkleFAhY1NIvbyjj1ncG9g==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@next/swc-linux-arm64-gnu@14.2.16':
+    resolution: {integrity: sha512-yhkNA36+ECTC91KSyZcgWgKrYIyDnXZj8PqtJ+c2pMvj45xf7y/HrgI17hLdrcYamLfVt7pBaJUMxADtPaczHA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-arm64-musl@14.2.16':
+    resolution: {integrity: sha512-X2YSyu5RMys8R2lA0yLMCOCtqFOoLxrq2YbazFvcPOE4i/isubYjkh+JCpRmqYfEuCVltvlo+oGfj/b5T2pKUA==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@next/swc-linux-x64-gnu@14.2.16':
+    resolution: {integrity: sha512-9AGcX7VAkGbc5zTSa+bjQ757tkjr6C/pKS7OK8cX7QEiK6MHIIezBLcQ7gQqbDW2k5yaqba2aDtaBeyyZh1i6Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-linux-x64-musl@14.2.16':
+    resolution: {integrity: sha512-Klgeagrdun4WWDaOizdbtIIm8khUDQJ/5cRzdpXHfkbY91LxBXeejL4kbZBrpR/nmgRrQvmz4l3OtttNVkz2Sg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@next/swc-win32-arm64-msvc@14.2.16':
+    resolution: {integrity: sha512-PwW8A1UC1Y0xIm83G3yFGPiOBftJK4zukTmk7DI1CebyMOoaVpd8aSy7K6GhobzhkjYvqS/QmzcfsWG2Dwizdg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@next/swc-win32-ia32-msvc@14.2.16':
+    resolution: {integrity: sha512-jhPl3nN0oKEshJBNDAo0etGMzv0j3q3VYorTSFqH1o3rwv1MQRdor27u1zhkgsHPNeY1jxcgyx1ZsCkDD1IHgg==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@next/swc-win32-x64-msvc@14.2.16':
+    resolution: {integrity: sha512-OA7NtfxgirCjfqt+02BqxC3MIgM/JaGjw9tOe4fyZgPsqfseNiMPnCRP44Pfs+Gpo9zPN+SXaFsgP6vk8d571A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@nolyfill/is-core-module@1.0.39':
+    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
+    engines: {node: '>=12.4.0'}
+
+  '@pkgjs/parseargs@0.11.0':
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    engines: {node: '>=14'}
+
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
+  '@radix-ui/primitive@1.1.2':
+    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+
+  '@radix-ui/react-accordion@1.2.11':
+    resolution: {integrity: sha512-l3W5D54emV2ues7jjeG1xcyN7S3jnK3zE2zHqgn0CmMsy9lNJwmgcrmaxS+7ipw15FAivzKNzH3d5EcGoFKw0A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.1.10':
+    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.2':
+    resolution: {integrity: sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.11':
+    resolution: {integrity: sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.14':
+    resolution: {integrity: sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.10':
+    resolution: {integrity: sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.15':
+    resolution: {integrity: sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.2':
+    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-icons@1.3.2':
+    resolution: {integrity: sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==}
+    peerDependencies:
+      react: ^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.7':
+    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.15':
+    resolution: {integrity: sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.14':
+    resolution: {integrity: sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.7':
+    resolution: {integrity: sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.4':
+    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-progress@1.1.7':
+    resolution: {integrity: sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.3.7':
+    resolution: {integrity: sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.10':
+    resolution: {integrity: sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.9':
+    resolution: {integrity: sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.2.5':
+    resolution: {integrity: sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slider@1.3.5':
+    resolution: {integrity: sha512-rkfe2pU2NBAYfGaxa3Mqosi7VZEWX5CxKaanRv0vZd4Zhl9fvQrg0VM93dv3xGLGfrHuoTRF3JXH8nb9g+B3fw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.2.5':
+    resolution: {integrity: sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.12':
+    resolution: {integrity: sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.14':
+    resolution: {integrity: sha512-nAP5FBxBJGQ/YfUB+r+O6USFVkWq3gAInkxyEnmvEV5jtSbfDhfa4hwX8CraCnbjMLsE7XSf/K75l9xXY7joWg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.7':
+    resolution: {integrity: sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
+  '@reduxjs/toolkit@2.8.2':
+    resolution: {integrity: sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==}
+    peerDependencies:
+      react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+      react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-redux:
+        optional: true
+
+  '@rtsao/scc@1.1.0':
+    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
+
+  '@rushstack/eslint-patch@1.12.0':
+    resolution: {integrity: sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==}
+
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
+  '@swc/helpers@0.5.5':
+    resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
+
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  '@tanstack/react-virtual@3.13.12':
+    resolution: {integrity: sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
+  '@tanstack/virtual-core@3.13.12':
+    resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
+
+  '@tybys/wasm-util@0.10.0':
+    resolution: {integrity: sha512-VyyPYFlOMNylG45GoAe0xDoLwWuowvf92F9kySqzYh8vmYm7D2u4iUJKa1tOUpS70Ku13ASrOkS4ScXFsTaCNQ==}
+
+  '@types/d3-array@3.2.1':
+    resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
+
+  '@types/d3-color@3.1.3':
+    resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
+
+  '@types/d3-dispatch@3.0.6':
+    resolution: {integrity: sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==}
+
+  '@types/d3-dsv@3.0.7':
+    resolution: {integrity: sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==}
+
+  '@types/d3-ease@3.0.2':
+    resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
+
+  '@types/d3-fetch@3.0.7':
+    resolution: {integrity: sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==}
+
+  '@types/d3-force@3.0.10':
+    resolution: {integrity: sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==}
+
+  '@types/d3-format@3.0.4':
+    resolution: {integrity: sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==}
+
+  '@types/d3-geo@3.1.0':
+    resolution: {integrity: sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==}
+
+  '@types/d3-hierarchy@3.1.7':
+    resolution: {integrity: sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==}
+
+  '@types/d3-interpolate@3.0.4':
+    resolution: {integrity: sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==}
+
+  '@types/d3-path@3.1.1':
+    resolution: {integrity: sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==}
+
+  '@types/d3-quadtree@3.0.6':
+    resolution: {integrity: sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==}
+
+  '@types/d3-random@3.0.3':
+    resolution: {integrity: sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==}
+
+  '@types/d3-scale-chromatic@3.1.0':
+    resolution: {integrity: sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==}
+
+  '@types/d3-scale@4.0.9':
+    resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
+
+  '@types/d3-shape@3.1.7':
+    resolution: {integrity: sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==}
+
+  '@types/d3-time@3.0.4':
+    resolution: {integrity: sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==}
+
+  '@types/d3-timer@3.0.2':
+    resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
+
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
+  '@types/json5@0.0.29':
+    resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
+
+  '@types/node@22.0.0':
+    resolution: {integrity: sha512-VT7KSYudcPOzP5Q0wfbowyNLaVR8QWUdw+088uFWwfvpY6uCWaXpqV6ieLAu9WBcnTa7H4Z5RLK8I5t2FuOcqw==}
+
+  '@types/node@24.0.14':
+    resolution: {integrity: sha512-4zXMWD91vBLGRtHK3YbIoFMia+1nqEz72coM42C5ETjnNCa/heoj7NT1G67iAfOqMmcfhuCZ4uNpyz8EjlAejw==}
+
+  '@types/prop-types@15.7.15':
+    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
+
+  '@types/react-dom@18.0.0':
+    resolution: {integrity: sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==}
+
+  '@types/react@18.0.0':
+    resolution: {integrity: sha512-7+K7zEQYu7NzOwQGLR91KwWXXDzmTFODRVizJyIALf6RfLv2GDpqpknX64pvRVILXCpXi7O/pua8NGk44dLvJw==}
+
+  '@types/scheduler@0.26.0':
+    resolution: {integrity: sha512-WFHp9YUJQ6CKshqoC37iOlHnQSmxNc795UhB26CyBBttrN9svdIrUjl/NjnNmfcwtncN0h/0PPAFWv9ovP8mLA==}
+
+  '@types/use-sync-external-store@0.0.6':
+    resolution: {integrity: sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==}
+
+  '@typescript-eslint/parser@6.21.0':
+    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/scope-manager@6.21.0':
+    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+
+  '@typescript-eslint/types@6.21.0':
+    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+
+  '@typescript-eslint/typescript-estree@6.21.0':
+    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@typescript-eslint/visitor-keys@6.21.0':
+    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
+    engines: {node: ^16.0.0 || >=18.0.0}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
+    cpu: [arm]
+    os: [android]
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
+    cpu: [arm64]
+    os: [android]
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+    cpu: [x64]
+    os: [win32]
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  ajv@6.12.6:
+    resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==}
+
+  ansi-colors@4.1.3:
+    resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
+    engines: {node: '>=6'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.1.0:
+    resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansi-styles@6.2.1:
+    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
+    engines: {node: '>=12'}
+
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  array-buffer-byte-length@1.0.2:
+    resolution: {integrity: sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==}
+    engines: {node: '>= 0.4'}
+
+  array-includes@3.1.9:
+    resolution: {integrity: sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==}
+    engines: {node: '>= 0.4'}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  array.prototype.findlast@1.2.5:
+    resolution: {integrity: sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.findlastindex@1.2.6:
+    resolution: {integrity: sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flat@1.3.3:
+    resolution: {integrity: sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.flatmap@1.3.3:
+    resolution: {integrity: sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==}
+    engines: {node: '>= 0.4'}
+
+  array.prototype.tosorted@1.1.4:
+    resolution: {integrity: sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==}
+    engines: {node: '>= 0.4'}
+
+  arraybuffer.prototype.slice@1.0.4:
+    resolution: {integrity: sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==}
+    engines: {node: '>= 0.4'}
+
+  ast-types-flow@0.0.8:
+    resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
+
+  async-function@1.0.0:
+    resolution: {integrity: sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==}
+    engines: {node: '>= 0.4'}
+
+  autoprefixer@10.0.1:
+    resolution: {integrity: sha512-aQo2BDIsoOdemXUAOBpFv4ZQa2DrOtEufarYhtFsK1088Ca0TUwu/aQWf0M3mrILXZ3mTIVn1lR3hPW8acacsw==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+
+  available-typed-arrays@1.0.7:
+    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
+    engines: {node: '>= 0.4'}
+
+  axe-core@4.10.3:
+    resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
+    engines: {node: '>=4'}
+
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@2.0.2:
+    resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.25.1:
+    resolution: {integrity: sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  busboy@1.6.0:
+    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
+    engines: {node: '>=10.16.0'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bind@1.0.8:
+    resolution: {integrity: sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
+  caniuse-lite@1.0.30001727:
+    resolution: {integrity: sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
+  colorette@1.4.0:
+    resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
+  commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  core-util-is@1.0.3:
+    resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  css-line-break@2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.1.3:
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+
+  d3-array@3.2.4:
+    resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
+    engines: {node: '>=12'}
+
+  d3-axis@3.0.0:
+    resolution: {integrity: sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==}
+    engines: {node: '>=12'}
+
+  d3-binarytree@1.0.2:
+    resolution: {integrity: sha512-cElUNH+sHu95L04m92pG73t2MEJXKu+GeKUN1TJkFsu93E5W8E9Sc3kHEGJKgenGvj19m6upSn2EunvMgMD2Yw==}
+
+  d3-brush@3.0.0:
+    resolution: {integrity: sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==}
+    engines: {node: '>=12'}
+
+  d3-chord@3.0.1:
+    resolution: {integrity: sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==}
+    engines: {node: '>=12'}
+
+  d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+
+  d3-contour@4.0.2:
+    resolution: {integrity: sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==}
+    engines: {node: '>=12'}
+
+  d3-delaunay@6.0.4:
+    resolution: {integrity: sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==}
+    engines: {node: '>=12'}
+
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
+  d3-dsv@3.0.1:
+    resolution: {integrity: sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+
+  d3-fetch@3.0.1:
+    resolution: {integrity: sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==}
+    engines: {node: '>=12'}
+
+  d3-force-3d@3.0.6:
+    resolution: {integrity: sha512-4tsKHUPLOVkyfEffZo1v6sFHvGFwAIIjt/W8IThbp08DYAsXZck+2pSHEG5W1+gQgEvFLdZkYvmJAbRM2EzMnA==}
+    engines: {node: '>=12'}
+
+  d3-force@3.0.0:
+    resolution: {integrity: sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==}
+    engines: {node: '>=12'}
+
+  d3-format@3.1.0:
+    resolution: {integrity: sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==}
+    engines: {node: '>=12'}
+
+  d3-geo-projection@4.0.0:
+    resolution: {integrity: sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==}
+    engines: {node: '>=12'}
+    hasBin: true
+
+  d3-geo@3.1.1:
+    resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==}
+    engines: {node: '>=12'}
+
+  d3-hierarchy@3.1.2:
+    resolution: {integrity: sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==}
+    engines: {node: '>=12'}
+
+  d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+
+  d3-octree@1.1.0:
+    resolution: {integrity: sha512-F8gPlqpP+HwRPMO/8uOu5wjH110+6q4cgJvgJT6vlpy3BEaDIKlTZrgHKZSp/i1InRpVfh4puY/kvL6MxK930A==}
+
+  d3-path@3.1.0:
+    resolution: {integrity: sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==}
+    engines: {node: '>=12'}
+
+  d3-polygon@3.0.1:
+    resolution: {integrity: sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==}
+    engines: {node: '>=12'}
+
+  d3-quadtree@3.0.1:
+    resolution: {integrity: sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==}
+    engines: {node: '>=12'}
+
+  d3-random@3.0.1:
+    resolution: {integrity: sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==}
+    engines: {node: '>=12'}
+
+  d3-regression@1.3.10:
+    resolution: {integrity: sha512-PF8GWEL70cHHWpx2jUQXc68r1pyPHIA+St16muk/XRokETzlegj5LriNKg7o4LR0TySug4nHYPJNNRz/W+/Niw==}
+
+  d3-scale-chromatic@3.1.0:
+    resolution: {integrity: sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==}
+    engines: {node: '>=12'}
+
+  d3-scale@4.0.2:
+    resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
+    engines: {node: '>=12'}
+
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
+  d3-shape@3.2.0:
+    resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
+    engines: {node: '>=12'}
+
+  d3-time-format@4.1.0:
+    resolution: {integrity: sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==}
+    engines: {node: '>=12'}
+
+  d3-time@3.1.0:
+    resolution: {integrity: sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==}
+    engines: {node: '>=12'}
+
+  d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
+  d3@7.9.0:
+    resolution: {integrity: sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==}
+    engines: {node: '>=12'}
+
+  damerau-levenshtein@1.0.8:
+    resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
+
+  data-view-buffer@1.0.2:
+    resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-length@1.0.2:
+    resolution: {integrity: sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==}
+    engines: {node: '>= 0.4'}
+
+  data-view-byte-offset@1.0.1:
+    resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
+    engines: {node: '>= 0.4'}
+
+  date-fns-jalali@4.1.0-0:
+    resolution: {integrity: sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==}
+
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
+  debug@3.2.7:
+    resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.4.1:
+    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js-light@2.5.1:
+    resolution: {integrity: sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==}
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  define-data-property@1.1.4:
+    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
+    engines: {node: '>= 0.4'}
+
+  define-properties@1.2.1:
+    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
+    engines: {node: '>= 0.4'}
+
+  delaunator@5.0.1:
+    resolution: {integrity: sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==}
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
+  doctrine@2.1.0:
+    resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
+    engines: {node: '>=0.10.0'}
+
+  doctrine@3.0.0:
+    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
+    engines: {node: '>=6.0.0'}
+
+  docx@9.5.1:
+    resolution: {integrity: sha512-ABDI7JEirFD2+bHhOBlsGZxaG1UgZb2M/QMKhLSDGgVNhxDesTCDcP+qoDnDGjZ4EOXTRfUjUgwHVuZ6VSTfWQ==}
+    engines: {node: '>=10'}
+
+  dom-to-image@2.6.0:
+    resolution: {integrity: sha512-Dt0QdaHmLpjURjU7Tnu3AgYSF2LuOmksSGsUcE6ItvJoCWTBEmiMXcqBdNSAm9+QbbwD7JMoVsuuKX6ZVQv1qA==}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  eastasianwidth@0.2.0:
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+
+  electron-to-chromium@1.5.187:
+    resolution: {integrity: sha512-cl5Jc9I0KGUoOoSbxvTywTa40uspGJt/BDBoDLoxJRSBpWh4FFXBsjNRHfQrONsV/OoEjDfHUmZQa2d6Ze4YgA==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  emoji-regex@9.2.2:
+    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
+
+  enquirer@2.4.1:
+    resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
+    engines: {node: '>=8.6'}
+
+  es-abstract@1.24.0:
+    resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
+    engines: {node: '>= 0.4'}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-iterator-helpers@1.2.1:
+    resolution: {integrity: sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==}
+    engines: {node: '>= 0.4'}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  es-set-tostringtag@2.1.0:
+    resolution: {integrity: sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==}
+    engines: {node: '>= 0.4'}
+
+  es-shim-unscopables@1.1.0:
+    resolution: {integrity: sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==}
+    engines: {node: '>= 0.4'}
+
+  es-to-primitive@1.3.0:
+    resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
+    engines: {node: '>= 0.4'}
+
+  es-toolkit@1.39.7:
+    resolution: {integrity: sha512-ek/wWryKouBrZIjkwW2BFf91CWOIMvoy2AE5YYgUrfWsJQM2Su1LoLtrw8uusEpN9RfqLlV/0FVNjT0WMv8Bxw==}
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  eslint-config-next@14.1.0:
+    resolution: {integrity: sha512-SBX2ed7DoRFXC6CQSLc/SbLY9Ut6HxNB2wPTcoIWjUMd7aF7O/SIE7111L8FdZ9TXsNV4pulUDnfthpyPtbFUg==}
+    peerDependencies:
+      eslint: ^7.23.0 || ^8.0.0
+      typescript: '>=3.3.1'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  eslint-import-resolver-node@0.3.9:
+    resolution: {integrity: sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==}
+
+  eslint-import-resolver-typescript@3.10.1:
+    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '*'
+      eslint-plugin-import: '*'
+      eslint-plugin-import-x: '*'
+    peerDependenciesMeta:
+      eslint-plugin-import:
+        optional: true
+      eslint-plugin-import-x:
+        optional: true
+
+  eslint-module-utils@2.12.1:
+    resolution: {integrity: sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint:
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
+
+  eslint-plugin-import@2.32.0:
+    resolution: {integrity: sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+
+  eslint-plugin-jsx-a11y@6.10.2:
+    resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
+    engines: {node: '>=4.0'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
+
+  eslint-plugin-react-hooks@5.0.0-canary-7118f5dd7-20230705:
+    resolution: {integrity: sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+
+  eslint-plugin-react@7.37.5:
+    resolution: {integrity: sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==}
+    engines: {node: '>=4'}
+    peerDependencies:
+      eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
+
+  eslint-scope@6.0.0:
+    resolution: {integrity: sha512-uRDL9MWmQCkaFus8RF5K9/L/2fn+80yoW3jkD53l4shjCh26fCtvJGasxjUqP5OT87SYTxCVA3BwTUzuELx9kA==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-utils@3.0.0:
+    resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
+    engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
+    peerDependencies:
+      eslint: '>=5'
+
+  eslint-visitor-keys@2.1.0:
+    resolution: {integrity: sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==}
+    engines: {node: '>=10'}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint@8.0.0:
+    resolution: {integrity: sha512-03spzPzMAO4pElm44m60Nj08nYonPGQXmw6Ceai/S4QK82IgwWO1EXx1s9namKzVlbVu3Jf81hb+N+8+v21/HQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+    hasBin: true
+
+  espree@9.6.1:
+    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  esquery@1.6.0:
+    resolution: {integrity: sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fastq@1.19.1:
+    resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
+
+  fdir@6.4.6:
+    resolution: {integrity: sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fecha@4.2.3:
+    resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
+
+  file-entry-cache@6.0.1:
+    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  flat-cache@3.2.0:
+    resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
+    engines: {node: ^10.12.0 || >=12.0.0}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  flru@1.0.2:
+    resolution: {integrity: sha512-kWyh8ADvHBFz6ua5xYOPnUroZTT/bwWfrCeL0Wj1dzG4/YOmOcfJ99W8dOVyyynJN35rZ9aCOtHChqQovV7yog==}
+    engines: {node: '>=6'}
+
+  for-each@0.3.5:
+    resolution: {integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==}
+    engines: {node: '>= 0.4'}
+
+  foreground-child@3.3.1:
+    resolution: {integrity: sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==}
+    engines: {node: '>=14'}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  function.prototype.name@1.1.8:
+    resolution: {integrity: sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==}
+    engines: {node: '>= 0.4'}
+
+  functional-red-black-tree@1.0.1:
+    resolution: {integrity: sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==}
+
+  functions-have-names@1.2.3:
+    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-symbol-description@1.1.0:
+    resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
+    engines: {node: '>= 0.4'}
+
+  get-tsconfig@4.10.1:
+    resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
+
+  gl-matrix@3.4.3:
+    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@10.3.10:
+    resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  glob@10.4.5:
+    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
+    hasBin: true
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
+
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+
+  globalthis@1.0.4:
+    resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
+    engines: {node: '>= 0.4'}
+
+  globby@11.1.0:
+    resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
+    engines: {node: '>=10'}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  has-bigints@1.1.0:
+    resolution: {integrity: sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==}
+    engines: {node: '>= 0.4'}
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-property-descriptors@1.0.2:
+    resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==}
+
+  has-proto@1.2.0:
+    resolution: {integrity: sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==}
+    engines: {node: '>= 0.4'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  has-tostringtag@1.0.2:
+    resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==}
+    engines: {node: '>= 0.4'}
+
+  hash.js@1.1.7:
+    resolution: {integrity: sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  html-to-image@1.11.13:
+    resolution: {integrity: sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==}
+
+  html2canvas@1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  ignore@4.0.6:
+    resolution: {integrity: sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==}
+    engines: {node: '>= 4'}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  immediate@3.0.6:
+    resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==}
+
+  immer@10.1.1:
+    resolution: {integrity: sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  internal-slot@1.1.0:
+    resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
+    engines: {node: '>= 0.4'}
+
+  internmap@2.0.3:
+    resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==}
+    engines: {node: '>=12'}
+
+  is-array-buffer@3.0.5:
+    resolution: {integrity: sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==}
+    engines: {node: '>= 0.4'}
+
+  is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+
+  is-async-function@2.1.1:
+    resolution: {integrity: sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==}
+    engines: {node: '>= 0.4'}
+
+  is-bigint@1.1.0:
+    resolution: {integrity: sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==}
+    engines: {node: '>= 0.4'}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-boolean-object@1.2.2:
+    resolution: {integrity: sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==}
+    engines: {node: '>= 0.4'}
+
+  is-bun-module@2.0.0:
+    resolution: {integrity: sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==}
+
+  is-callable@1.2.7:
+    resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
+    engines: {node: '>= 0.4'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-data-view@1.0.2:
+    resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
+    engines: {node: '>= 0.4'}
+
+  is-date-object@1.1.0:
+    resolution: {integrity: sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==}
+    engines: {node: '>= 0.4'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-finalizationregistry@1.1.1:
+    resolution: {integrity: sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==}
+    engines: {node: '>= 0.4'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-generator-function@1.1.0:
+    resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
+    engines: {node: '>= 0.4'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-map@2.0.3:
+    resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
+    engines: {node: '>= 0.4'}
+
+  is-negative-zero@2.0.3:
+    resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
+    engines: {node: '>= 0.4'}
+
+  is-number-object@1.1.1:
+    resolution: {integrity: sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==}
+    engines: {node: '>= 0.4'}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-regex@1.2.1:
+    resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
+    engines: {node: '>= 0.4'}
+
+  is-set@2.0.3:
+    resolution: {integrity: sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==}
+    engines: {node: '>= 0.4'}
+
+  is-shared-array-buffer@1.0.4:
+    resolution: {integrity: sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==}
+    engines: {node: '>= 0.4'}
+
+  is-string@1.1.1:
+    resolution: {integrity: sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==}
+    engines: {node: '>= 0.4'}
+
+  is-symbol@1.1.1:
+    resolution: {integrity: sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==}
+    engines: {node: '>= 0.4'}
+
+  is-typed-array@1.1.15:
+    resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
+    engines: {node: '>= 0.4'}
+
+  is-weakmap@2.0.2:
+    resolution: {integrity: sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==}
+    engines: {node: '>= 0.4'}
+
+  is-weakref@1.1.1:
+    resolution: {integrity: sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==}
+    engines: {node: '>= 0.4'}
+
+  is-weakset@2.0.4:
+    resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
+    engines: {node: '>= 0.4'}
+
+  isarray@1.0.0:
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
+
+  isarray@2.0.5:
+    resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  iterator.prototype@1.1.5:
+    resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
+    engines: {node: '>= 0.4'}
+
+  jackspeak@2.3.6:
+    resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
+    engines: {node: '>=14'}
+
+  jackspeak@3.4.3:
+    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+
+  jiti@1.21.7:
+    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+
+  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-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json5@1.0.2:
+    resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
+    hasBin: true
+
+  jsx-ast-utils@3.3.5:
+    resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
+    engines: {node: '>=4.0'}
+
+  jszip@3.10.1:
+    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  language-subtag-registry@0.3.23:
+    resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
+
+  language-tags@1.0.9:
+    resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
+    engines: {node: '>=0.10'}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lie@3.3.0:
+    resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
+
+  lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lucide-react@0.454.0:
+    resolution: {integrity: sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  minimalistic-assert@1.0.1:
+    resolution: {integrity: sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==}
+
+  minimatch@3.1.2:
+    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
+
+  minimatch@9.0.3:
+    resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimatch@9.0.5:
+    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  minipass@7.1.2:
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nanoid@5.1.5:
+    resolution: {integrity: sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
+  napi-postinstall@0.3.0:
+    resolution: {integrity: sha512-M7NqKyhODKV1gRLdkwE7pDsZP2/SC2a2vHkOYh9MCpKMbWVfyVfUw5MaH83Fv6XMjxr5jryUp3IDDL9rlxsTeA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
+  next@14.2.16:
+    resolution: {integrity: sha512-LcO7WnFu6lYSvCzZoo1dB+IO0xXz5uEv52HF1IUN0IqVTUIZGHuuR10I5efiLadGt+4oZqTcNZyVVEem/TM5nA==}
+    engines: {node: '>=18.17.0'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.1.0
+      '@playwright/test': ^1.41.2
+      react: ^18.2.0
+      react-dom: ^18.2.0
+      sass: ^1.3.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+      '@playwright/test':
+        optional: true
+      sass:
+        optional: true
+
+  node-releases@2.0.19:
+    resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  normalize-range@0.1.2:
+    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+    engines: {node: '>=0.10.0'}
+
+  num2fraction@1.2.2:
+    resolution: {integrity: sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-keys@1.1.1:
+    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
+    engines: {node: '>= 0.4'}
+
+  object.assign@4.1.7:
+    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
+    engines: {node: '>= 0.4'}
+
+  object.entries@1.1.9:
+    resolution: {integrity: sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==}
+    engines: {node: '>= 0.4'}
+
+  object.fromentries@2.0.8:
+    resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==}
+    engines: {node: '>= 0.4'}
+
+  object.groupby@1.0.3:
+    resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==}
+    engines: {node: '>= 0.4'}
+
+  object.values@1.2.1:
+    resolution: {integrity: sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==}
+    engines: {node: '>= 0.4'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  own-keys@1.0.1:
+    resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
+    engines: {node: '>= 0.4'}
+
+  package-json-from-dist@1.0.1:
+    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
+
+  pako@1.0.11:
+    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  pdfast@0.2.0:
+    resolution: {integrity: sha512-cq6TTu6qKSFUHwEahi68k/kqN2mfepjkGrG9Un70cgdRRKLKY6Rf8P8uvP2NvZktaQZNF3YE7agEkLj0vGK9bA==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+
+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
+  possible-typed-array-names@1.1.0:
+    resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
+    engines: {node: '>= 0.4'}
+
+  postcss-import@14.1.0:
+    resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-js@4.0.1:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@3.1.4:
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
+  postcss-nested@6.0.0:
+    resolution: {integrity: sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+    engines: {node: '>=4'}
+
+  postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+
+  postcss@8.4.31:
+    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  postcss@8.5.0:
+    resolution: {integrity: sha512-27VKOqrYfPncKA2NrFOVhP5MGAfHKLYn/Q0mz9cNQyRAKYi3VNHwYU2qKKqPCqgBmeeJ0uAFB56NumXZ5ZReXg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  process-nextick-args@2.0.1:
+    resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
+
+  progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  quick-lru@5.1.1:
+    resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
+    engines: {node: '>=10'}
+
+  quickselect@2.0.0:
+    resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
+
+  rbush@3.0.1:
+    resolution: {integrity: sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==}
+
+  react-day-picker@9.8.0:
+    resolution: {integrity: sha512-E0yhhg7R+pdgbl/2toTb0xBhsEAtmAx1l7qjIWYfcxOy8w4rTSVfbtBoSzVVhPwKP/5E9iL38LivzoE3AQDhCQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  react-dom@18.0.0:
+    resolution: {integrity: sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==}
+    peerDependencies:
+      react: ^18.0.0
+
+  react-intersection-observer@9.16.0:
+    resolution: {integrity: sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
+  react-redux@9.2.0:
+    resolution: {integrity: sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==}
+    peerDependencies:
+      '@types/react': ^18.2.25 || ^19
+      react: ^18.0 || ^19
+      redux: ^5.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      redux:
+        optional: true
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.1:
+    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react@18.0.0:
+    resolution: {integrity: sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==}
+    engines: {node: '>=0.10.0'}
+
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+
+  readable-stream@2.3.8:
+    resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  recharts@3.1.0:
+    resolution: {integrity: sha512-NqAqQcGBmLrfDs2mHX/bz8jJCQtG2FeXfE0GqpZmIuXIjkpIwj8sd9ad0WyvKiBKPd8ZgNG0hL85c8sFDwascw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  redux-thunk@3.1.0:
+    resolution: {integrity: sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==}
+    peerDependencies:
+      redux: ^5.0.0
+
+  redux@5.0.1:
+    resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
+
+  reflect.getprototypeof@1.0.10:
+    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
+    engines: {node: '>= 0.4'}
+
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
+  regexp.prototype.flags@1.5.4:
+    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
+    engines: {node: '>= 0.4'}
+
+  regexpp@3.2.0:
+    resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
+    engines: {node: '>=8'}
+
+  reselect@5.1.1:
+    resolution: {integrity: sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve@1.22.10:
+    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  resolve@2.0.0-next.5:
+    resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
+    hasBin: true
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  robust-predicates@3.0.2:
+    resolution: {integrity: sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
+  safe-array-concat@1.1.3:
+    resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
+    engines: {node: '>=0.4'}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  safe-push-apply@1.0.0:
+    resolution: {integrity: sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==}
+    engines: {node: '>= 0.4'}
+
+  safe-regex-test@1.1.0:
+    resolution: {integrity: sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==}
+    engines: {node: '>= 0.4'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  sax@1.4.1:
+    resolution: {integrity: sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==}
+
+  scheduler@0.21.0:
+    resolution: {integrity: sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.2:
+    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  set-function-length@1.2.2:
+    resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
+    engines: {node: '>= 0.4'}
+
+  set-function-name@2.0.2:
+    resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
+    engines: {node: '>= 0.4'}
+
+  set-proto@1.0.0:
+    resolution: {integrity: sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==}
+    engines: {node: '>= 0.4'}
+
+  setimmediate@1.0.5:
+    resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  stable-hash@0.0.5:
+    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+
+  stop-iteration-iterator@1.1.0:
+    resolution: {integrity: sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==}
+    engines: {node: '>= 0.4'}
+
+  streamsearch@1.1.0:
+    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
+    engines: {node: '>=10.0.0'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@5.1.2:
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    engines: {node: '>=12'}
+
+  string.prototype.includes@2.0.1:
+    resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.matchall@4.0.12:
+    resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.repeat@1.0.0:
+    resolution: {integrity: sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==}
+
+  string.prototype.trim@1.2.10:
+    resolution: {integrity: sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimend@1.0.9:
+    resolution: {integrity: sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==}
+    engines: {node: '>= 0.4'}
+
+  string.prototype.trimstart@1.0.8:
+    resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
+    engines: {node: '>= 0.4'}
+
+  string_decoder@1.1.1:
+    resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.0:
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  styled-jsx@5.1.1:
+    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
+    engines: {node: '>= 12.0.0'}
+    peerDependencies:
+      '@babel/core': '*'
+      babel-plugin-macros: '*'
+      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      babel-plugin-macros:
+        optional: true
+
+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  svg-path-parser@1.1.0:
+    resolution: {integrity: sha512-jGCUqcQyXpfe38R7RFfhrMyfXcBmpMNJI/B+4CE9/Unkh98UporAc461GTthv+TVDuZXsBx7/WiwJb1Oh4tt4A==}
+
+  tailwind-merge@2.5.5:
+    resolution: {integrity: sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
+  tailwindcss@3.3.0:
+    resolution: {integrity: sha512-hOXlFx+YcklJ8kXiCAfk/FMyr4Pm9ck477G0m/us2344Vuj355IpoEDB5UmGAsSpTBmr+4ZhjzW04JuFXkb/fw==}
+    engines: {node: '>=12.13.0'}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
+
+  text-segmentation@1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+
+  text-table@0.2.0:
+    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
+
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tinyglobby@0.2.14:
+    resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
+    engines: {node: '>=12.0.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  ts-api-utils@1.4.3:
+    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
+    engines: {node: '>=16'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
+  tsconfig-paths@3.15.0:
+    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+
+  typed-array-buffer@1.0.3:
+    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-length@1.0.3:
+    resolution: {integrity: sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-byte-offset@1.0.4:
+    resolution: {integrity: sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==}
+    engines: {node: '>= 0.4'}
+
+  typed-array-length@1.0.7:
+    resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
+    engines: {node: '>= 0.4'}
+
+  typescript@5.0.2:
+    resolution: {integrity: sha512-wVORMBGO/FAs/++blGNeAVdbNKtIh1rbBL2EyQ1+J9lClJ93KiiKe8PmFIVdXhHcyv44SL9oglmfeSsndo0jRw==}
+    engines: {node: '>=12.20'}
+    hasBin: true
+
+  unbox-primitive@1.1.0:
+    resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
+    engines: {node: '>= 0.4'}
+
+  undici-types@6.11.1:
+    resolution: {integrity: sha512-mIDEX2ek50x0OlRgxryxsenE5XaQD4on5U2inY7RApK3SOJpofyw7uW2AyfMKkhAxXIceo2DeWGVGwyvng1GNQ==}
+
+  undici-types@7.8.0:
+    resolution: {integrity: sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==}
+
+  unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+
+  update-browserslist-db@1.1.3:
+    resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.5.0:
+    resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  utrie@1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+
+  v8-compile-cache@2.4.0:
+    resolution: {integrity: sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==}
+
+  victory-vendor@37.3.6:
+    resolution: {integrity: sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==}
+
+  which-boxed-primitive@1.1.1:
+    resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==}
+    engines: {node: '>= 0.4'}
+
+  which-builtin-type@1.2.1:
+    resolution: {integrity: sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==}
+    engines: {node: '>= 0.4'}
+
+  which-collection@1.0.2:
+    resolution: {integrity: sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==}
+    engines: {node: '>= 0.4'}
+
+  which-typed-array@1.1.19:
+    resolution: {integrity: sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==}
+    engines: {node: '>= 0.4'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrap-ansi@8.1.0:
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    engines: {node: '>=12'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  xml-js@1.6.11:
+    resolution: {integrity: sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==}
+    hasBin: true
+
+  xml@1.0.1:
+    resolution: {integrity: sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==}
+
+  yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+
+snapshots:
+
+  '@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.0(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
+      '@antv/g': 6.1.27
+      '@antv/g2': 5.3.4
+      '@antv/g2-extension-plot': 0.2.2
+      lodash: 4.17.21
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+
+  '@antv/component@2.1.4':
+    dependencies:
+      '@antv/g': 6.1.27
+      '@antv/scale': 0.4.16
+      '@antv/util': 3.3.11
+      svg-path-parser: 1.1.0
+
+  '@antv/coord@0.4.7':
+    dependencies:
+      '@antv/scale': 0.4.16
+      '@antv/util': 2.0.17
+      gl-matrix: 3.4.3
+
+  '@antv/event-emitter@0.1.3': {}
+
+  '@antv/expr@1.0.2': {}
+
+  '@antv/g-camera-api@2.0.40':
+    dependencies:
+      '@antv/g-lite': 2.3.1
+      '@antv/util': 3.3.11
+      '@babel/runtime': 7.27.6
+      gl-matrix: 3.4.3
+      tslib: 2.8.1
+
+  '@antv/g-canvas@2.0.47':
+    dependencies:
+      '@antv/g-lite': 2.3.1
+      '@antv/g-plugin-canvas-path-generator': 2.1.21
+      '@antv/g-plugin-canvas-picker': 2.1.26
+      '@antv/g-plugin-canvas-renderer': 2.3.2
+      '@antv/g-plugin-dom-interaction': 2.1.26
+      '@antv/g-plugin-html-renderer': 2.1.26
+      '@antv/g-plugin-image-loader': 2.1.25
+      '@antv/util': 3.3.11
+      '@babel/runtime': 7.27.6
+      tslib: 2.8.1
+
+  '@antv/g-dom-mutation-observer-api@2.0.37':
+    dependencies:
+      '@antv/g-lite': 2.3.1
+      '@babel/runtime': 7.27.6
+
+  '@antv/g-lite@2.3.1':
+    dependencies:
+      '@antv/g-math': 3.0.1
+      '@antv/util': 3.3.11
+      '@antv/vendor': 1.0.11
+      '@babel/runtime': 7.27.6
+      eventemitter3: 5.0.1
+      gl-matrix: 3.4.3
+      rbush: 3.0.1
+      tslib: 2.8.1
+
+  '@antv/g-math@3.0.1':
+    dependencies:
+      '@antv/util': 3.3.11
+      '@babel/runtime': 7.27.6
+      gl-matrix: 3.4.3
+      tslib: 2.8.1
+
+  '@antv/g-plugin-canvas-path-generator@2.1.21':
+    dependencies:
+      '@antv/g-lite': 2.3.1
+      '@antv/g-math': 3.0.1
+      '@antv/util': 3.3.11
+      '@babel/runtime': 7.27.6
+      tslib: 2.8.1
+
+  '@antv/g-plugin-canvas-picker@2.1.26':
+    dependencies:
+      '@antv/g-lite': 2.3.1
+      '@antv/g-math': 3.0.1
+      '@antv/g-plugin-canvas-path-generator': 2.1.21
+      '@antv/g-plugin-canvas-renderer': 2.3.2
+      '@antv/util': 3.3.11
+      '@babel/runtime': 7.27.6
+      gl-matrix: 3.4.3
+      tslib: 2.8.1
+
+  '@antv/g-plugin-canvas-renderer@2.3.2':
+    dependencies:
+      '@antv/g-lite': 2.3.1
+      '@antv/g-math': 3.0.1
+      '@antv/g-plugin-canvas-path-generator': 2.1.21
+      '@antv/g-plugin-image-loader': 2.1.25
+      '@antv/util': 3.3.11
+      '@babel/runtime': 7.27.6
+      gl-matrix: 3.4.3
+      tslib: 2.8.1
+
+  '@antv/g-plugin-dom-interaction@2.1.26':
+    dependencies:
+      '@antv/g-lite': 2.3.1
+      '@babel/runtime': 7.27.6
+      tslib: 2.8.1
+
+  '@antv/g-plugin-dragndrop@2.0.37':
+    dependencies:
+      '@antv/g-lite': 2.3.1
+      '@antv/util': 3.3.11
+      '@babel/runtime': 7.27.6
+      tslib: 2.8.1
+
+  '@antv/g-plugin-html-renderer@2.1.26':
+    dependencies:
+      '@antv/g-lite': 2.3.1
+      '@antv/util': 3.3.11
+      '@babel/runtime': 7.27.6
+      gl-matrix: 3.4.3
+      tslib: 2.8.1
+
+  '@antv/g-plugin-image-loader@2.1.25':
+    dependencies:
+      '@antv/g-lite': 2.3.1
+      '@antv/util': 3.3.11
+      '@babel/runtime': 7.27.6
+      gl-matrix: 3.4.3
+      tslib: 2.8.1
+
+  '@antv/g-web-animations-api@2.1.27':
+    dependencies:
+      '@antv/g-lite': 2.3.1
+      '@antv/util': 3.3.11
+      '@babel/runtime': 7.27.6
+      tslib: 2.8.1
+
+  '@antv/g2-extension-plot@0.2.2':
+    dependencies:
+      '@antv/g2': 5.3.4
+      '@antv/util': 3.3.11
+      '@antv/vendor': 1.0.11
+
+  '@antv/g2@5.3.4':
+    dependencies:
+      '@antv/component': 2.1.4
+      '@antv/coord': 0.4.7
+      '@antv/event-emitter': 0.1.3
+      '@antv/expr': 1.0.2
+      '@antv/g': 6.1.27
+      '@antv/g-canvas': 2.0.47
+      '@antv/g-plugin-dragndrop': 2.0.37
+      '@antv/scale': 0.4.16
+      '@antv/util': 3.3.11
+      '@antv/vendor': 1.0.11
+      flru: 1.0.2
+      pdfast: 0.2.0
+
+  '@antv/g@6.1.27':
+    dependencies:
+      '@antv/g-camera-api': 2.0.40
+      '@antv/g-dom-mutation-observer-api': 2.0.37
+      '@antv/g-lite': 2.3.1
+      '@antv/g-web-animations-api': 2.1.27
+      '@babel/runtime': 7.27.6
+
+  '@antv/scale@0.4.16':
+    dependencies:
+      '@antv/util': 3.3.11
+      color-string: 1.9.1
+      fecha: 4.2.3
+
+  '@antv/util@2.0.17':
+    dependencies:
+      csstype: 3.1.3
+      tslib: 2.8.1
+
+  '@antv/util@3.3.11':
+    dependencies:
+      fast-deep-equal: 3.1.3
+      gl-matrix: 3.4.3
+      tslib: 2.8.1
+
+  '@antv/vendor@1.0.11':
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-color': 3.1.3
+      '@types/d3-dispatch': 3.0.6
+      '@types/d3-dsv': 3.0.7
+      '@types/d3-ease': 3.0.2
+      '@types/d3-fetch': 3.0.7
+      '@types/d3-force': 3.0.10
+      '@types/d3-format': 3.0.4
+      '@types/d3-geo': 3.1.0
+      '@types/d3-hierarchy': 3.1.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-path': 3.1.1
+      '@types/d3-quadtree': 3.0.6
+      '@types/d3-random': 3.0.3
+      '@types/d3-scale': 4.0.9
+      '@types/d3-scale-chromatic': 3.1.0
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-force-3d: 3.0.6
+      d3-format: 3.1.0
+      d3-geo: 3.1.1
+      d3-geo-projection: 4.0.0
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-regression: 1.3.10
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  '@babel/runtime@7.27.6': {}
+
+  '@date-fns/tz@1.2.0': {}
+
+  '@emnapi/core@1.4.5':
+    dependencies:
+      '@emnapi/wasi-threads': 1.0.4
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.4.5':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.0.4':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@eslint/eslintrc@1.4.1':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.4.1
+      espree: 9.6.1
+      globals: 13.24.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@floating-ui/core@1.7.2':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.2':
+    dependencies:
+      '@floating-ui/core': 1.7.2
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.4(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.2
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@humanwhocodes/config-array@0.6.0':
+    dependencies:
+      '@humanwhocodes/object-schema': 1.2.1
+      debug: 4.4.1
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@humanwhocodes/object-schema@1.2.1': {}
+
+  '@isaacs/cliui@8.0.2':
+    dependencies:
+      string-width: 5.1.2
+      string-width-cjs: string-width@4.2.3
+      strip-ansi: 7.1.0
+      strip-ansi-cjs: strip-ansi@6.0.1
+      wrap-ansi: 8.1.0
+      wrap-ansi-cjs: wrap-ansi@7.0.0
+
+  '@jridgewell/gen-mapping@0.3.12':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.4
+      '@jridgewell/trace-mapping': 0.3.29
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.4': {}
+
+  '@jridgewell/trace-mapping@0.3.29':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.4
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    dependencies:
+      '@emnapi/core': 1.4.5
+      '@emnapi/runtime': 1.4.5
+      '@tybys/wasm-util': 0.10.0
+    optional: true
+
+  '@next/env@14.2.16': {}
+
+  '@next/eslint-plugin-next@14.1.0':
+    dependencies:
+      glob: 10.3.10
+
+  '@next/swc-darwin-arm64@14.2.16':
+    optional: true
+
+  '@next/swc-darwin-x64@14.2.16':
+    optional: true
+
+  '@next/swc-linux-arm64-gnu@14.2.16':
+    optional: true
+
+  '@next/swc-linux-arm64-musl@14.2.16':
+    optional: true
+
+  '@next/swc-linux-x64-gnu@14.2.16':
+    optional: true
+
+  '@next/swc-linux-x64-musl@14.2.16':
+    optional: true
+
+  '@next/swc-win32-arm64-msvc@14.2.16':
+    optional: true
+
+  '@next/swc-win32-ia32-msvc@14.2.16':
+    optional: true
+
+  '@next/swc-win32-x64-msvc@14.2.16':
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.19.1
+
+  '@nolyfill/is-core-module@1.0.39': {}
+
+  '@pkgjs/parseargs@0.11.0':
+    optional: true
+
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.2': {}
+
+  '@radix-ui/react-accordion@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)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collapsible': 1.1.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)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-checkbox@1.3.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-collapsible@1.1.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)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-context@1.1.2(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-dialog@1.1.14(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      aria-hidden: 1.2.6
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+      react-remove-scroll: 2.7.1(@types/react@18.0.0)(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-direction@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-dismissable-layer@1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-dropdown-menu@2.1.15(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-focus-guards@1.1.2(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-icons@1.3.2(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+
+  '@radix-ui/react-id@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-label@2.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-menu@2.1.15(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      aria-hidden: 1.2.6
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+      react-remove-scroll: 2.7.1(@types/react@18.0.0)(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-popover@1.1.14(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      aria-hidden: 1.2.6
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+      react-remove-scroll: 2.7.1(@types/react@18.0.0)(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-popper@1.2.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.4(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/rect': 1.1.1
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-presence@1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-progress@1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-radio-group@1.3.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-scroll-area@1.2.9(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-select@2.2.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      aria-hidden: 1.2.6
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+      react-remove-scroll: 2.7.1(@types/react@18.0.0)(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-slider@1.3.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-slot@1.2.3(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-switch@1.2.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-tabs@1.1.12(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-toast@1.2.14(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-tooltip@1.2.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@18.0.0)(react@18.0.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+      use-sync-external-store: 1.5.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@18.0.0)(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@18.0.0)(react@18.0.0)
+      react: 18.0.0
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      '@types/react-dom': 18.0.0
+
+  '@radix-ui/rect@1.1.1': {}
+
+  '@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)':
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      '@standard-schema/utils': 0.3.0
+      immer: 10.1.1
+      redux: 5.0.1
+      redux-thunk: 3.1.0(redux@5.0.1)
+      reselect: 5.1.1
+    optionalDependencies:
+      react: 18.0.0
+      react-redux: 9.2.0(@types/react@18.0.0)(react@18.0.0)(redux@5.0.1)
+
+  '@rtsao/scc@1.1.0': {}
+
+  '@rushstack/eslint-patch@1.12.0': {}
+
+  '@standard-schema/spec@1.0.0': {}
+
+  '@standard-schema/utils@0.3.0': {}
+
+  '@swc/counter@0.1.3': {}
+
+  '@swc/helpers@0.5.5':
+    dependencies:
+      '@swc/counter': 0.1.3
+      tslib: 2.8.1
+
+  '@tanstack/react-table@8.21.3(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+
+  '@tanstack/react-virtual@3.13.12(react-dom@18.0.0(react@18.0.0))(react@18.0.0)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+
+  '@tanstack/table-core@8.21.3': {}
+
+  '@tanstack/virtual-core@3.13.12': {}
+
+  '@tybys/wasm-util@0.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/d3-array@3.2.1': {}
+
+  '@types/d3-color@3.1.3': {}
+
+  '@types/d3-dispatch@3.0.6': {}
+
+  '@types/d3-dsv@3.0.7': {}
+
+  '@types/d3-ease@3.0.2': {}
+
+  '@types/d3-fetch@3.0.7':
+    dependencies:
+      '@types/d3-dsv': 3.0.7
+
+  '@types/d3-force@3.0.10': {}
+
+  '@types/d3-format@3.0.4': {}
+
+  '@types/d3-geo@3.1.0':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
+  '@types/d3-hierarchy@3.1.7': {}
+
+  '@types/d3-interpolate@3.0.4':
+    dependencies:
+      '@types/d3-color': 3.1.3
+
+  '@types/d3-path@3.1.1': {}
+
+  '@types/d3-quadtree@3.0.6': {}
+
+  '@types/d3-random@3.0.3': {}
+
+  '@types/d3-scale-chromatic@3.1.0': {}
+
+  '@types/d3-scale@4.0.9':
+    dependencies:
+      '@types/d3-time': 3.0.4
+
+  '@types/d3-shape@3.1.7':
+    dependencies:
+      '@types/d3-path': 3.1.1
+
+  '@types/d3-time@3.0.4': {}
+
+  '@types/d3-timer@3.0.2': {}
+
+  '@types/geojson@7946.0.16': {}
+
+  '@types/json5@0.0.29': {}
+
+  '@types/node@22.0.0':
+    dependencies:
+      undici-types: 6.11.1
+
+  '@types/node@24.0.14':
+    dependencies:
+      undici-types: 7.8.0
+
+  '@types/prop-types@15.7.15': {}
+
+  '@types/react-dom@18.0.0':
+    dependencies:
+      '@types/react': 18.0.0
+
+  '@types/react@18.0.0':
+    dependencies:
+      '@types/prop-types': 15.7.15
+      '@types/scheduler': 0.26.0
+      csstype: 3.1.3
+
+  '@types/scheduler@0.26.0': {}
+
+  '@types/use-sync-external-store@0.0.6': {}
+
+  '@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.0.2)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 6.21.0
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.0.2)
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.1
+      eslint: 8.0.0
+    optionalDependencies:
+      typescript: 5.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@6.21.0':
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+
+  '@typescript-eslint/types@6.21.0': {}
+
+  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.0.2)':
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      '@typescript-eslint/visitor-keys': 6.21.0
+      debug: 4.4.1
+      globby: 11.1.0
+      is-glob: 4.0.3
+      minimatch: 9.0.3
+      semver: 7.7.2
+      ts-api-utils: 1.4.3(typescript@5.0.2)
+    optionalDependencies:
+      typescript: 5.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@6.21.0':
+    dependencies:
+      '@typescript-eslint/types': 6.21.0
+      eslint-visitor-keys: 3.4.3
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    optional: true
+
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
+
+  acorn@8.15.0: {}
+
+  ajv@6.12.6:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ansi-colors@4.1.3: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.1.0: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansi-styles@6.2.1: {}
+
+  any-promise@1.3.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  arg@5.0.2: {}
+
+  argparse@2.0.1: {}
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  aria-query@5.3.2: {}
+
+  array-buffer-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      is-array-buffer: 3.0.5
+
+  array-includes@3.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      is-string: 1.1.1
+      math-intrinsics: 1.1.0
+
+  array-union@2.1.0: {}
+
+  array.prototype.findlast@1.2.5:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.findlastindex@1.2.6:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flat@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.flatmap@1.3.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-shim-unscopables: 1.1.0
+
+  array.prototype.tosorted@1.1.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-shim-unscopables: 1.1.0
+
+  arraybuffer.prototype.slice@1.0.4:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      is-array-buffer: 3.0.5
+
+  ast-types-flow@0.0.8: {}
+
+  async-function@1.0.0: {}
+
+  autoprefixer@10.0.1(postcss@8.5.0):
+    dependencies:
+      browserslist: 4.25.1
+      caniuse-lite: 1.0.30001727
+      colorette: 1.4.0
+      normalize-range: 0.1.2
+      num2fraction: 1.2.2
+      postcss: 8.5.0
+      postcss-value-parser: 4.2.0
+
+  available-typed-arrays@1.0.7:
+    dependencies:
+      possible-typed-array-names: 1.1.0
+
+  axe-core@4.10.3: {}
+
+  axobject-query@4.1.0: {}
+
+  balanced-match@1.0.2: {}
+
+  base64-arraybuffer@1.0.2: {}
+
+  binary-extensions@2.3.0: {}
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@2.0.2:
+    dependencies:
+      balanced-match: 1.0.2
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.25.1:
+    dependencies:
+      caniuse-lite: 1.0.30001727
+      electron-to-chromium: 1.5.187
+      node-releases: 2.0.19
+      update-browserslist-db: 1.1.3(browserslist@4.25.1)
+
+  busboy@1.6.0:
+    dependencies:
+      streamsearch: 1.1.0
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bind@1.0.8:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      get-intrinsic: 1.3.0
+      set-function-length: 1.2.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  camelcase-css@2.0.1: {}
+
+  caniuse-lite@1.0.30001727: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  client-only@0.0.1: {}
+
+  clsx@2.1.1: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+
+  colorette@1.4.0: {}
+
+  commander@4.1.1: {}
+
+  commander@7.2.0: {}
+
+  concat-map@0.0.1: {}
+
+  core-util-is@1.0.3: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  css-line-break@2.1.0:
+    dependencies:
+      utrie: 1.0.2
+
+  cssesc@3.0.0: {}
+
+  csstype@3.1.3: {}
+
+  d3-array@3.2.4:
+    dependencies:
+      internmap: 2.0.3
+
+  d3-axis@3.0.0: {}
+
+  d3-binarytree@1.0.2: {}
+
+  d3-brush@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3-chord@3.0.1:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-color@3.1.0: {}
+
+  d3-contour@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-delaunay@6.0.4:
+    dependencies:
+      delaunator: 5.0.1
+
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
+  d3-dsv@3.0.1:
+    dependencies:
+      commander: 7.2.0
+      iconv-lite: 0.6.3
+      rw: 1.3.3
+
+  d3-ease@3.0.1: {}
+
+  d3-fetch@3.0.1:
+    dependencies:
+      d3-dsv: 3.0.1
+
+  d3-force-3d@3.0.6:
+    dependencies:
+      d3-binarytree: 1.0.2
+      d3-dispatch: 3.0.1
+      d3-octree: 1.1.0
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-force@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-timer: 3.0.1
+
+  d3-format@3.1.0: {}
+
+  d3-geo-projection@4.0.0:
+    dependencies:
+      commander: 7.2.0
+      d3-array: 3.2.4
+      d3-geo: 3.1.1
+
+  d3-geo@3.1.1:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-hierarchy@3.1.2: {}
+
+  d3-interpolate@3.0.1:
+    dependencies:
+      d3-color: 3.1.0
+
+  d3-octree@1.1.0: {}
+
+  d3-path@3.1.0: {}
+
+  d3-polygon@3.0.1: {}
+
+  d3-quadtree@3.0.1: {}
+
+  d3-random@3.0.1: {}
+
+  d3-regression@1.3.10: {}
+
+  d3-scale-chromatic@3.1.0:
+    dependencies:
+      d3-color: 3.1.0
+      d3-interpolate: 3.0.1
+
+  d3-scale@4.0.2:
+    dependencies:
+      d3-array: 3.2.4
+      d3-format: 3.1.0
+      d3-interpolate: 3.0.1
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@3.2.0:
+    dependencies:
+      d3-path: 3.1.0
+
+  d3-time-format@4.1.0:
+    dependencies:
+      d3-time: 3.1.0
+
+  d3-time@3.1.0:
+    dependencies:
+      d3-array: 3.2.4
+
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
+  d3@7.9.0:
+    dependencies:
+      d3-array: 3.2.4
+      d3-axis: 3.0.0
+      d3-brush: 3.0.0
+      d3-chord: 3.0.1
+      d3-color: 3.1.0
+      d3-contour: 4.0.2
+      d3-delaunay: 6.0.4
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-dsv: 3.0.1
+      d3-ease: 3.0.1
+      d3-fetch: 3.0.1
+      d3-force: 3.0.0
+      d3-format: 3.1.0
+      d3-geo: 3.1.1
+      d3-hierarchy: 3.1.2
+      d3-interpolate: 3.0.1
+      d3-path: 3.1.0
+      d3-polygon: 3.0.1
+      d3-quadtree: 3.0.1
+      d3-random: 3.0.1
+      d3-scale: 4.0.2
+      d3-scale-chromatic: 3.1.0
+      d3-selection: 3.0.0
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-time-format: 4.1.0
+      d3-timer: 3.0.1
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+      d3-zoom: 3.0.0
+
+  damerau-levenshtein@1.0.8: {}
+
+  data-view-buffer@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-length@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  data-view-byte-offset@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-data-view: 1.0.2
+
+  date-fns-jalali@4.1.0-0: {}
+
+  date-fns@4.1.0: {}
+
+  debug@3.2.7:
+    dependencies:
+      ms: 2.1.3
+
+  debug@4.4.1:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js-light@2.5.1: {}
+
+  deep-is@0.1.4: {}
+
+  define-data-property@1.1.4:
+    dependencies:
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  define-properties@1.2.1:
+    dependencies:
+      define-data-property: 1.1.4
+      has-property-descriptors: 1.0.2
+      object-keys: 1.1.1
+
+  delaunator@5.0.1:
+    dependencies:
+      robust-predicates: 3.0.2
+
+  detect-node-es@1.1.0: {}
+
+  didyoumean@1.2.2: {}
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  dlv@1.1.3: {}
+
+  doctrine@2.1.0:
+    dependencies:
+      esutils: 2.0.3
+
+  doctrine@3.0.0:
+    dependencies:
+      esutils: 2.0.3
+
+  docx@9.5.1:
+    dependencies:
+      '@types/node': 24.0.14
+      hash.js: 1.1.7
+      jszip: 3.10.1
+      nanoid: 5.1.5
+      xml: 1.0.1
+      xml-js: 1.6.11
+
+  dom-to-image@2.6.0: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  eastasianwidth@0.2.0: {}
+
+  electron-to-chromium@1.5.187: {}
+
+  emoji-regex@8.0.0: {}
+
+  emoji-regex@9.2.2: {}
+
+  enquirer@2.4.1:
+    dependencies:
+      ansi-colors: 4.1.3
+      strip-ansi: 6.0.1
+
+  es-abstract@1.24.0:
+    dependencies:
+      array-buffer-byte-length: 1.0.2
+      arraybuffer.prototype.slice: 1.0.4
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      data-view-buffer: 1.0.2
+      data-view-byte-length: 1.0.2
+      data-view-byte-offset: 1.0.1
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      es-set-tostringtag: 2.1.0
+      es-to-primitive: 1.3.0
+      function.prototype.name: 1.1.8
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      get-symbol-description: 1.1.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      internal-slot: 1.1.0
+      is-array-buffer: 3.0.5
+      is-callable: 1.2.7
+      is-data-view: 1.0.2
+      is-negative-zero: 2.0.3
+      is-regex: 1.2.1
+      is-set: 2.0.3
+      is-shared-array-buffer: 1.0.4
+      is-string: 1.1.1
+      is-typed-array: 1.1.15
+      is-weakref: 1.1.1
+      math-intrinsics: 1.1.0
+      object-inspect: 1.13.4
+      object-keys: 1.1.1
+      object.assign: 4.1.7
+      own-keys: 1.0.1
+      regexp.prototype.flags: 1.5.4
+      safe-array-concat: 1.1.3
+      safe-push-apply: 1.0.0
+      safe-regex-test: 1.1.0
+      set-proto: 1.0.0
+      stop-iteration-iterator: 1.1.0
+      string.prototype.trim: 1.2.10
+      string.prototype.trimend: 1.0.9
+      string.prototype.trimstart: 1.0.8
+      typed-array-buffer: 1.0.3
+      typed-array-byte-length: 1.0.3
+      typed-array-byte-offset: 1.0.4
+      typed-array-length: 1.0.7
+      unbox-primitive: 1.1.0
+      which-typed-array: 1.1.19
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-iterator-helpers@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-set-tostringtag: 2.1.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      globalthis: 1.0.4
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+      has-proto: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      iterator.prototype: 1.1.5
+      safe-array-concat: 1.1.3
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  es-shim-unscopables@1.1.0:
+    dependencies:
+      hasown: 2.0.2
+
+  es-to-primitive@1.3.0:
+    dependencies:
+      is-callable: 1.2.7
+      is-date-object: 1.1.0
+      is-symbol: 1.1.1
+
+  es-toolkit@1.39.7: {}
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  eslint-config-next@14.1.0(eslint@8.0.0)(typescript@5.0.2):
+    dependencies:
+      '@next/eslint-plugin-next': 14.1.0
+      '@rushstack/eslint-patch': 1.12.0
+      '@typescript-eslint/parser': 6.21.0(eslint@8.0.0)(typescript@5.0.2)
+      eslint: 8.0.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(eslint@8.0.0))(eslint@8.0.0)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0)
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@8.0.0)
+      eslint-plugin-react: 7.37.5(eslint@8.0.0)
+      eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.0.0)
+    optionalDependencies:
+      typescript: 5.0.2
+    transitivePeerDependencies:
+      - eslint-import-resolver-webpack
+      - eslint-plugin-import-x
+      - supports-color
+
+  eslint-import-resolver-node@0.3.9:
+    dependencies:
+      debug: 3.2.7
+      is-core-module: 2.16.1
+      resolve: 1.22.10
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.0.0))(eslint@8.0.0):
+    dependencies:
+      '@nolyfill/is-core-module': 1.0.39
+      debug: 4.4.1
+      eslint: 8.0.0
+      get-tsconfig: 4.10.1
+      is-bun-module: 2.0.0
+      stable-hash: 0.0.5
+      tinyglobby: 0.2.14
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 6.21.0(eslint@8.0.0)(typescript@5.0.2)
+      eslint: 8.0.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(eslint@8.0.0))(eslint@8.0.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0):
+    dependencies:
+      '@rtsao/scc': 1.1.0
+      array-includes: 3.1.9
+      array.prototype.findlastindex: 1.2.6
+      array.prototype.flat: 1.3.3
+      array.prototype.flatmap: 1.3.3
+      debug: 3.2.7
+      doctrine: 2.1.0
+      eslint: 8.0.0
+      eslint-import-resolver-node: 0.3.9
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@6.21.0(eslint@8.0.0)(typescript@5.0.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(eslint@8.0.0))(eslint@8.0.0))(eslint@8.0.0)
+      hasown: 2.0.2
+      is-core-module: 2.16.1
+      is-glob: 4.0.3
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      object.groupby: 1.0.3
+      object.values: 1.2.1
+      semver: 6.3.1
+      string.prototype.trimend: 1.0.9
+      tsconfig-paths: 3.15.0
+    optionalDependencies:
+      '@typescript-eslint/parser': 6.21.0(eslint@8.0.0)(typescript@5.0.2)
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
+
+  eslint-plugin-jsx-a11y@6.10.2(eslint@8.0.0):
+    dependencies:
+      aria-query: 5.3.2
+      array-includes: 3.1.9
+      array.prototype.flatmap: 1.3.3
+      ast-types-flow: 0.0.8
+      axe-core: 4.10.3
+      axobject-query: 4.1.0
+      damerau-levenshtein: 1.0.8
+      emoji-regex: 9.2.2
+      eslint: 8.0.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      language-tags: 1.0.9
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      safe-regex-test: 1.1.0
+      string.prototype.includes: 2.0.1
+
+  eslint-plugin-react-hooks@5.0.0-canary-7118f5dd7-20230705(eslint@8.0.0):
+    dependencies:
+      eslint: 8.0.0
+
+  eslint-plugin-react@7.37.5(eslint@8.0.0):
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.3
+      array.prototype.tosorted: 1.1.4
+      doctrine: 2.1.0
+      es-iterator-helpers: 1.2.1
+      eslint: 8.0.0
+      estraverse: 5.3.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      minimatch: 3.1.2
+      object.entries: 1.1.9
+      object.fromentries: 2.0.8
+      object.values: 1.2.1
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.5
+      semver: 6.3.1
+      string.prototype.matchall: 4.0.12
+      string.prototype.repeat: 1.0.0
+
+  eslint-scope@6.0.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-utils@3.0.0(eslint@8.0.0):
+    dependencies:
+      eslint: 8.0.0
+      eslint-visitor-keys: 2.1.0
+
+  eslint-visitor-keys@2.1.0: {}
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint@8.0.0:
+    dependencies:
+      '@eslint/eslintrc': 1.4.1
+      '@humanwhocodes/config-array': 0.6.0
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.1
+      doctrine: 3.0.0
+      enquirer: 2.4.1
+      escape-string-regexp: 4.0.0
+      eslint-scope: 6.0.0
+      eslint-utils: 3.0.0(eslint@8.0.0)
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.6.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 6.0.1
+      functional-red-black-tree: 1.0.1
+      glob-parent: 6.0.2
+      globals: 13.24.0
+      ignore: 4.0.6
+      import-fresh: 3.3.1
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      js-yaml: 4.1.0
+      json-stable-stringify-without-jsonify: 1.0.1
+      levn: 0.4.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+      progress: 2.0.3
+      regexpp: 3.2.0
+      semver: 7.7.2
+      strip-ansi: 6.0.1
+      strip-json-comments: 3.1.1
+      text-table: 0.2.0
+      v8-compile-cache: 2.4.0
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@9.6.1:
+    dependencies:
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      eslint-visitor-keys: 3.4.3
+
+  esquery@1.6.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  esutils@2.0.3: {}
+
+  eventemitter3@5.0.1: {}
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fastq@1.19.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.4.6(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  fecha@4.2.3: {}
+
+  file-entry-cache@6.0.1:
+    dependencies:
+      flat-cache: 3.2.0
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  flat-cache@3.2.0:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+      rimraf: 3.0.2
+
+  flatted@3.3.3: {}
+
+  flru@1.0.2: {}
+
+  for-each@0.3.5:
+    dependencies:
+      is-callable: 1.2.7
+
+  foreground-child@3.3.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      signal-exit: 4.1.0
+
+  fs.realpath@1.0.0: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  function.prototype.name@1.1.8:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      functions-have-names: 1.2.3
+      hasown: 2.0.2
+      is-callable: 1.2.7
+
+  functional-red-black-tree@1.0.1: {}
+
+  functions-have-names@1.2.3: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-nonce@1.0.1: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-symbol-description@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+
+  get-tsconfig@4.10.1:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  gl-matrix@3.4.3: {}
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@10.3.10:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 2.3.6
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      path-scurry: 1.11.1
+
+  glob@10.4.5:
+    dependencies:
+      foreground-child: 3.3.1
+      jackspeak: 3.4.3
+      minimatch: 9.0.5
+      minipass: 7.1.2
+      package-json-from-dist: 1.0.1
+      path-scurry: 1.11.1
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  globals@13.24.0:
+    dependencies:
+      type-fest: 0.20.2
+
+  globalthis@1.0.4:
+    dependencies:
+      define-properties: 1.2.1
+      gopd: 1.2.0
+
+  globby@11.1.0:
+    dependencies:
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  has-bigints@1.1.0: {}
+
+  has-flag@4.0.0: {}
+
+  has-property-descriptors@1.0.2:
+    dependencies:
+      es-define-property: 1.0.1
+
+  has-proto@1.2.0:
+    dependencies:
+      dunder-proto: 1.0.1
+
+  has-symbols@1.1.0: {}
+
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
+
+  hash.js@1.1.7:
+    dependencies:
+      inherits: 2.0.4
+      minimalistic-assert: 1.0.1
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  html-to-image@1.11.13: {}
+
+  html2canvas@1.4.1:
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ignore@4.0.6: {}
+
+  ignore@5.3.2: {}
+
+  immediate@3.0.6: {}
+
+  immer@10.1.1: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.4: {}
+
+  internal-slot@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      hasown: 2.0.2
+      side-channel: 1.1.0
+
+  internmap@2.0.3: {}
+
+  is-array-buffer@3.0.5:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  is-arrayish@0.3.2: {}
+
+  is-async-function@2.1.1:
+    dependencies:
+      async-function: 1.0.0
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-bigint@1.1.0:
+    dependencies:
+      has-bigints: 1.1.0
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-boolean-object@1.2.2:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-bun-module@2.0.0:
+    dependencies:
+      semver: 7.7.2
+
+  is-callable@1.2.7: {}
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-data-view@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      is-typed-array: 1.1.15
+
+  is-date-object@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-extglob@2.1.1: {}
+
+  is-finalizationregistry@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-generator-function@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      get-proto: 1.0.1
+      has-tostringtag: 1.0.2
+      safe-regex-test: 1.1.0
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-map@2.0.3: {}
+
+  is-negative-zero@2.0.3: {}
+
+  is-number-object@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-number@7.0.0: {}
+
+  is-regex@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
+
+  is-set@2.0.3: {}
+
+  is-shared-array-buffer@1.0.4:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-string@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-tostringtag: 1.0.2
+
+  is-symbol@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+      has-symbols: 1.1.0
+      safe-regex-test: 1.1.0
+
+  is-typed-array@1.1.15:
+    dependencies:
+      which-typed-array: 1.1.19
+
+  is-weakmap@2.0.2: {}
+
+  is-weakref@1.1.1:
+    dependencies:
+      call-bound: 1.0.4
+
+  is-weakset@2.0.4:
+    dependencies:
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+
+  isarray@1.0.0: {}
+
+  isarray@2.0.5: {}
+
+  isexe@2.0.0: {}
+
+  iterator.prototype@1.1.5:
+    dependencies:
+      define-data-property: 1.1.4
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      has-symbols: 1.1.0
+      set-function-name: 2.0.2
+
+  jackspeak@2.3.6:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jackspeak@3.4.3:
+    dependencies:
+      '@isaacs/cliui': 8.0.2
+    optionalDependencies:
+      '@pkgjs/parseargs': 0.11.0
+
+  jiti@1.21.7: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.0:
+    dependencies:
+      argparse: 2.0.1
+
+  json-buffer@3.0.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json5@1.0.2:
+    dependencies:
+      minimist: 1.2.8
+
+  jsx-ast-utils@3.3.5:
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.flat: 1.3.3
+      object.assign: 4.1.7
+      object.values: 1.2.1
+
+  jszip@3.10.1:
+    dependencies:
+      lie: 3.3.0
+      pako: 1.0.11
+      readable-stream: 2.3.8
+      setimmediate: 1.0.5
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  language-subtag-registry@0.3.23: {}
+
+  language-tags@1.0.9:
+    dependencies:
+      language-subtag-registry: 0.3.23
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lie@3.3.0:
+    dependencies:
+      immediate: 3.0.6
+
+  lilconfig@2.1.0: {}
+
+  lines-and-columns@1.2.4: {}
+
+  lodash.merge@4.6.2: {}
+
+  lodash@4.17.21: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
+  lru-cache@10.4.3: {}
+
+  lucide-react@0.454.0(react@18.0.0):
+    dependencies:
+      react: 18.0.0
+
+  math-intrinsics@1.1.0: {}
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  minimalistic-assert@1.0.1: {}
+
+  minimatch@3.1.2:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimatch@9.0.3:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimatch@9.0.5:
+    dependencies:
+      brace-expansion: 2.0.2
+
+  minimist@1.2.8: {}
+
+  minipass@7.1.2: {}
+
+  ms@2.1.3: {}
+
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
+  nanoid@3.3.11: {}
+
+  nanoid@5.1.5: {}
+
+  napi-postinstall@0.3.0: {}
+
+  natural-compare@1.4.0: {}
+
+  next-themes@0.4.6(react-dom@18.0.0(react@18.0.0))(react@18.0.0):
+    dependencies:
+      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):
+    dependencies:
+      '@next/env': 14.2.16
+      '@swc/helpers': 0.5.5
+      busboy: 1.6.0
+      caniuse-lite: 1.0.30001727
+      graceful-fs: 4.2.11
+      postcss: 8.4.31
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+      styled-jsx: 5.1.1(react@18.0.0)
+    optionalDependencies:
+      '@next/swc-darwin-arm64': 14.2.16
+      '@next/swc-darwin-x64': 14.2.16
+      '@next/swc-linux-arm64-gnu': 14.2.16
+      '@next/swc-linux-arm64-musl': 14.2.16
+      '@next/swc-linux-x64-gnu': 14.2.16
+      '@next/swc-linux-x64-musl': 14.2.16
+      '@next/swc-win32-arm64-msvc': 14.2.16
+      '@next/swc-win32-ia32-msvc': 14.2.16
+      '@next/swc-win32-x64-msvc': 14.2.16
+    transitivePeerDependencies:
+      - '@babel/core'
+      - babel-plugin-macros
+
+  node-releases@2.0.19: {}
+
+  normalize-path@3.0.0: {}
+
+  normalize-range@0.1.2: {}
+
+  num2fraction@1.2.2: {}
+
+  object-assign@4.1.1: {}
+
+  object-hash@3.0.0: {}
+
+  object-inspect@1.13.4: {}
+
+  object-keys@1.1.1: {}
+
+  object.assign@4.1.7:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+      has-symbols: 1.1.0
+      object-keys: 1.1.1
+
+  object.entries@1.1.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  object.fromentries@2.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+
+  object.groupby@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  object.values@1.2.1:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  own-keys@1.0.1:
+    dependencies:
+      get-intrinsic: 1.3.0
+      object-keys: 1.1.1
+      safe-push-apply: 1.0.0
+
+  package-json-from-dist@1.0.1: {}
+
+  pako@1.0.11: {}
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-parse@1.0.7: {}
+
+  path-scurry@1.11.1:
+    dependencies:
+      lru-cache: 10.4.3
+      minipass: 7.1.2
+
+  path-type@4.0.0: {}
+
+  pdfast@0.2.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  picomatch@4.0.3: {}
+
+  pify@2.3.0: {}
+
+  pirates@4.0.7: {}
+
+  possible-typed-array-names@1.1.0: {}
+
+  postcss-import@14.1.0(postcss@8.5.0):
+    dependencies:
+      postcss: 8.5.0
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.10
+
+  postcss-js@4.0.1(postcss@8.5.0):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.5.0
+
+  postcss-load-config@3.1.4(postcss@8.5.0):
+    dependencies:
+      lilconfig: 2.1.0
+      yaml: 1.10.2
+    optionalDependencies:
+      postcss: 8.5.0
+
+  postcss-nested@6.0.0(postcss@8.5.0):
+    dependencies:
+      postcss: 8.5.0
+      postcss-selector-parser: 6.1.2
+
+  postcss-selector-parser@6.1.2:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss-value-parser@4.2.0: {}
+
+  postcss@8.4.31:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  postcss@8.5.0:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  process-nextick-args@2.0.1: {}
+
+  progress@2.0.3: {}
+
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
+  punycode@2.3.1: {}
+
+  queue-microtask@1.2.3: {}
+
+  quick-lru@5.1.1: {}
+
+  quickselect@2.0.0: {}
+
+  rbush@3.0.1:
+    dependencies:
+      quickselect: 2.0.0
+
+  react-day-picker@9.8.0(react@18.0.0):
+    dependencies:
+      '@date-fns/tz': 1.2.0
+      date-fns: 4.1.0
+      date-fns-jalali: 4.1.0-0
+      react: 18.0.0
+
+  react-dom@18.0.0(react@18.0.0):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.0.0
+      scheduler: 0.21.0
+
+  react-intersection-observer@9.16.0(react-dom@18.0.0(react@18.0.0))(react@18.0.0):
+    dependencies:
+      react: 18.0.0
+    optionalDependencies:
+      react-dom: 18.0.0(react@18.0.0)
+
+  react-is@16.13.1: {}
+
+  react-redux@9.2.0(@types/react@18.0.0)(react@18.0.0)(redux@5.0.1):
+    dependencies:
+      '@types/use-sync-external-store': 0.0.6
+      react: 18.0.0
+      use-sync-external-store: 1.5.0(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+      redux: 5.0.1
+
+  react-remove-scroll-bar@2.3.8(@types/react@18.0.0)(react@18.0.0):
+    dependencies:
+      react: 18.0.0
+      react-style-singleton: 2.2.3(@types/react@18.0.0)(react@18.0.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  react-remove-scroll@2.7.1(@types/react@18.0.0)(react@18.0.0):
+    dependencies:
+      react: 18.0.0
+      react-remove-scroll-bar: 2.3.8(@types/react@18.0.0)(react@18.0.0)
+      react-style-singleton: 2.2.3(@types/react@18.0.0)(react@18.0.0)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@18.0.0)(react@18.0.0)
+      use-sidecar: 1.1.3(@types/react@18.0.0)(react@18.0.0)
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  react-style-singleton@2.2.3(@types/react@18.0.0)(react@18.0.0):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.0.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  react@18.0.0:
+    dependencies:
+      loose-envify: 1.4.0
+
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
+  readable-stream@2.3.8:
+    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
+
+  readdirp@3.6.0:
+    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):
+    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
+      decimal.js-light: 2.5.1
+      es-toolkit: 1.39.7
+      eventemitter3: 5.0.1
+      immer: 10.1.1
+      react: 18.0.0
+      react-dom: 18.0.0(react@18.0.0)
+      react-is: 16.13.1
+      react-redux: 9.2.0(@types/react@18.0.0)(react@18.0.0)(redux@5.0.1)
+      reselect: 5.1.1
+      tiny-invariant: 1.3.3
+      use-sync-external-store: 1.5.0(react@18.0.0)
+      victory-vendor: 37.3.6
+    transitivePeerDependencies:
+      - '@types/react'
+      - redux
+
+  redux-thunk@3.1.0(redux@5.0.1):
+    dependencies:
+      redux: 5.0.1
+
+  redux@5.0.1: {}
+
+  reflect.getprototypeof@1.0.10:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      get-proto: 1.0.1
+      which-builtin-type: 1.2.1
+
+  regenerator-runtime@0.14.1: {}
+
+  regexp.prototype.flags@1.5.4:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-errors: 1.3.0
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      set-function-name: 2.0.2
+
+  regexpp@3.2.0: {}
+
+  reselect@5.1.1: {}
+
+  resolve-from@4.0.0: {}
+
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve@1.22.10:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  resolve@2.0.0-next.5:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  reusify@1.1.0: {}
+
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+
+  robust-predicates@3.0.2: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  rw@1.3.3: {}
+
+  safe-array-concat@1.1.3:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      get-intrinsic: 1.3.0
+      has-symbols: 1.1.0
+      isarray: 2.0.5
+
+  safe-buffer@5.1.2: {}
+
+  safe-push-apply@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      isarray: 2.0.5
+
+  safe-regex-test@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-regex: 1.2.1
+
+  safer-buffer@2.1.2: {}
+
+  sax@1.4.1: {}
+
+  scheduler@0.21.0:
+    dependencies:
+      loose-envify: 1.4.0
+
+  semver@6.3.1: {}
+
+  semver@7.7.2: {}
+
+  set-function-length@1.2.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-property-descriptors: 1.0.2
+
+  set-function-name@2.0.2:
+    dependencies:
+      define-data-property: 1.1.4
+      es-errors: 1.3.0
+      functions-have-names: 1.2.3
+      has-property-descriptors: 1.0.2
+
+  set-proto@1.0.0:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+
+  setimmediate@1.0.5: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  signal-exit@4.1.0: {}
+
+  simple-swizzle@0.2.2:
+    dependencies:
+      is-arrayish: 0.3.2
+
+  slash@3.0.0: {}
+
+  source-map-js@1.2.1: {}
+
+  stable-hash@0.0.5: {}
+
+  stop-iteration-iterator@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      internal-slot: 1.1.0
+
+  streamsearch@1.1.0: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@5.1.2:
+    dependencies:
+      eastasianwidth: 0.2.0
+      emoji-regex: 9.2.2
+      strip-ansi: 7.1.0
+
+  string.prototype.includes@2.0.1:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  string.prototype.matchall@4.0.12:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      get-intrinsic: 1.3.0
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      internal-slot: 1.1.0
+      regexp.prototype.flags: 1.5.4
+      set-function-name: 2.0.2
+      side-channel: 1.1.0
+
+  string.prototype.repeat@1.0.0:
+    dependencies:
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+
+  string.prototype.trim@1.2.10:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-data-property: 1.1.4
+      define-properties: 1.2.1
+      es-abstract: 1.24.0
+      es-object-atoms: 1.1.1
+      has-property-descriptors: 1.0.2
+
+  string.prototype.trimend@1.0.9:
+    dependencies:
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string.prototype.trimstart@1.0.8:
+    dependencies:
+      call-bind: 1.0.8
+      define-properties: 1.2.1
+      es-object-atoms: 1.1.1
+
+  string_decoder@1.1.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.0:
+    dependencies:
+      ansi-regex: 6.1.0
+
+  strip-bom@3.0.0: {}
+
+  strip-json-comments@3.1.1: {}
+
+  styled-jsx@5.1.1(react@18.0.0):
+    dependencies:
+      client-only: 0.0.1
+      react: 18.0.0
+
+  sucrase@3.35.0:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.12
+      commander: 4.1.1
+      glob: 10.4.5
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.7
+      ts-interface-checker: 0.1.13
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  svg-path-parser@1.1.0: {}
+
+  tailwind-merge@2.5.5: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@3.3.0(postcss@8.5.0)):
+    dependencies:
+      tailwindcss: 3.3.0(postcss@8.5.0)
+
+  tailwindcss@3.3.0(postcss@8.5.0):
+    dependencies:
+      arg: 5.0.2
+      chokidar: 3.6.0
+      color-name: 1.1.4
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.3
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.7
+      lilconfig: 2.1.0
+      micromatch: 4.0.8
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.1.1
+      postcss: 8.5.0
+      postcss-import: 14.1.0(postcss@8.5.0)
+      postcss-js: 4.0.1(postcss@8.5.0)
+      postcss-load-config: 3.1.4(postcss@8.5.0)
+      postcss-nested: 6.0.0(postcss@8.5.0)
+      postcss-selector-parser: 6.1.2
+      postcss-value-parser: 4.2.0
+      quick-lru: 5.1.1
+      resolve: 1.22.10
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
+  text-segmentation@1.0.3:
+    dependencies:
+      utrie: 1.0.2
+
+  text-table@0.2.0: {}
+
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
+  tiny-invariant@1.3.3: {}
+
+  tinyglobby@0.2.14:
+    dependencies:
+      fdir: 6.4.6(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  ts-api-utils@1.4.3(typescript@5.0.2):
+    dependencies:
+      typescript: 5.0.2
+
+  ts-interface-checker@0.1.13: {}
+
+  tsconfig-paths@3.15.0:
+    dependencies:
+      '@types/json5': 0.0.29
+      json5: 1.0.2
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
+  tslib@2.8.1: {}
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@0.20.2: {}
+
+  typed-array-buffer@1.0.3:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-length@1.0.3:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+
+  typed-array-byte-offset@1.0.4:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      has-proto: 1.2.0
+      is-typed-array: 1.1.15
+      reflect.getprototypeof: 1.0.10
+
+  typed-array-length@1.0.7:
+    dependencies:
+      call-bind: 1.0.8
+      for-each: 0.3.5
+      gopd: 1.2.0
+      is-typed-array: 1.1.15
+      possible-typed-array-names: 1.1.0
+      reflect.getprototypeof: 1.0.10
+
+  typescript@5.0.2: {}
+
+  unbox-primitive@1.1.0:
+    dependencies:
+      call-bound: 1.0.4
+      has-bigints: 1.1.0
+      has-symbols: 1.1.0
+      which-boxed-primitive: 1.1.1
+
+  undici-types@6.11.1: {}
+
+  undici-types@7.8.0: {}
+
+  unrs-resolver@1.11.1:
+    dependencies:
+      napi-postinstall: 0.3.0
+    optionalDependencies:
+      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
+      '@unrs/resolver-binding-android-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-x64': 1.11.1
+      '@unrs/resolver-binding-freebsd-x64': 1.11.1
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
+      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+
+  update-browserslist-db@1.1.3(browserslist@4.25.1):
+    dependencies:
+      browserslist: 4.25.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  use-callback-ref@1.3.3(@types/react@18.0.0)(react@18.0.0):
+    dependencies:
+      react: 18.0.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  use-sidecar@1.1.3(@types/react@18.0.0)(react@18.0.0):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.0.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.0.0
+
+  use-sync-external-store@1.5.0(react@18.0.0):
+    dependencies:
+      react: 18.0.0
+
+  util-deprecate@1.0.2: {}
+
+  utrie@1.0.2:
+    dependencies:
+      base64-arraybuffer: 1.0.2
+
+  v8-compile-cache@2.4.0: {}
+
+  victory-vendor@37.3.6:
+    dependencies:
+      '@types/d3-array': 3.2.1
+      '@types/d3-ease': 3.0.2
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-scale': 4.0.9
+      '@types/d3-shape': 3.1.7
+      '@types/d3-time': 3.0.4
+      '@types/d3-timer': 3.0.2
+      d3-array: 3.2.4
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.2.0
+      d3-time: 3.1.0
+      d3-timer: 3.0.1
+
+  which-boxed-primitive@1.1.1:
+    dependencies:
+      is-bigint: 1.1.0
+      is-boolean-object: 1.2.2
+      is-number-object: 1.1.1
+      is-string: 1.1.1
+      is-symbol: 1.1.1
+
+  which-builtin-type@1.2.1:
+    dependencies:
+      call-bound: 1.0.4
+      function.prototype.name: 1.1.8
+      has-tostringtag: 1.0.2
+      is-async-function: 2.1.1
+      is-date-object: 1.1.0
+      is-finalizationregistry: 1.1.1
+      is-generator-function: 1.1.0
+      is-regex: 1.2.1
+      is-weakref: 1.1.1
+      isarray: 2.0.5
+      which-boxed-primitive: 1.1.1
+      which-collection: 1.0.2
+      which-typed-array: 1.1.19
+
+  which-collection@1.0.2:
+    dependencies:
+      is-map: 2.0.3
+      is-set: 2.0.3
+      is-weakmap: 2.0.2
+      is-weakset: 2.0.4
+
+  which-typed-array@1.1.19:
+    dependencies:
+      available-typed-arrays: 1.0.7
+      call-bind: 1.0.8
+      call-bound: 1.0.4
+      for-each: 0.3.5
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-tostringtag: 1.0.2
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  word-wrap@1.2.5: {}
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@8.1.0:
+    dependencies:
+      ansi-styles: 6.2.1
+      string-width: 5.1.2
+      strip-ansi: 7.1.0
+
+  wrappy@1.0.2: {}
+
+  xml-js@1.6.11:
+    dependencies:
+      sax: 1.4.1
+
+  xml@1.0.1: {}
+
+  yaml@1.10.2: {}
diff --git a/postcss.config.mjs b/postcss.config.mjs
new file mode 100644
index 0000000..1a69fd2
--- /dev/null
+++ b/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/public/placeholder-logo.png b/public/placeholder-logo.png
new file mode 100644
index 0000000..8a792ac
Binary files /dev/null and b/public/placeholder-logo.png differ
diff --git a/public/placeholder-logo.svg b/public/placeholder-logo.svg
new file mode 100644
index 0000000..b1695aa
--- /dev/null
+++ b/public/placeholder-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="215" height="48" fill="none"><path fill="#000" d="M57.588 9.6h6L73.828 38h-5.2l-2.36-6.88h-11.36L52.548 38h-5.2l10.24-28.4Zm7.16 17.16-4.16-12.16-4.16 12.16h8.32Zm23.694-2.24c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.486-7.72.12 3.4c.534-1.227 1.307-2.173 2.32-2.84 1.04-.693 2.267-1.04 3.68-1.04 1.494 0 2.76.387 3.8 1.16 1.067.747 1.827 1.813 2.28 3.2.507-1.44 1.294-2.52 2.36-3.24 1.094-.747 2.414-1.12 3.96-1.12 1.414 0 2.64.307 3.68.92s1.84 1.52 2.4 2.72c.56 1.2.84 2.667.84 4.4V38h-4.96V25.92c0-1.813-.293-3.187-.88-4.12-.56-.96-1.413-1.44-2.56-1.44-.906 0-1.68.213-2.32.64-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.84-.48 3.04V38h-4.56V25.92c0-1.2-.133-2.213-.4-3.04-.24-.827-.626-1.453-1.16-1.88-.506-.427-1.133-.64-1.88-.64-.906 0-1.68.227-2.32.68-.64.427-1.133 1.053-1.48 1.88-.32.827-.48 1.827-.48 3V38h-4.96V16.8h4.48Zm26.723 10.6c0-2.24.427-4.187 1.28-5.84.854-1.68 2.067-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.84 0 3.494.413 4.96 1.24 1.467.827 2.64 2.08 3.52 3.76.88 1.653 1.347 3.693 1.4 6.12v1.32h-15.08c.107 1.813.614 3.227 1.52 4.24.907.987 2.134 1.48 3.68 1.48.987 0 1.88-.253 2.68-.76a4.803 4.803 0 0 0 1.84-2.2l5.08.36c-.64 2.027-1.84 3.64-3.6 4.84-1.733 1.173-3.733 1.76-6 1.76-2.08 0-3.906-.453-5.48-1.36-1.573-.907-2.786-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84Zm15.16-2.04c-.213-1.733-.76-3.013-1.64-3.84-.853-.827-1.893-1.24-3.12-1.24-1.44 0-2.6.453-3.48 1.36-.88.88-1.44 2.12-1.68 3.72h9.92ZM163.139 9.6V38h-5.04V9.6h5.04Zm8.322 7.2.24 5.88-.64-.36c.32-2.053 1.094-3.56 2.32-4.52 1.254-.987 2.787-1.48 4.6-1.48 2.32 0 4.107.733 5.36 2.2 1.254 1.44 1.88 3.387 1.88 5.84V38h-4.96V25.92c0-1.253-.12-2.28-.36-3.08-.24-.8-.64-1.413-1.2-1.84-.533-.427-1.253-.64-2.16-.64-1.44 0-2.573.48-3.4 1.44-.8.933-1.2 2.307-1.2 4.12V38h-4.96V16.8h4.48Zm30.003 7.72c-.186-1.307-.706-2.32-1.56-3.04-.853-.72-1.866-1.08-3.04-1.08-1.68 0-2.986.613-3.92 1.84-.906 1.227-1.36 2.947-1.36 5.16s.454 3.933 1.36 5.16c.934 1.227 2.24 1.84 3.92 1.84 1.254 0 2.307-.373 3.16-1.12.854-.773 1.387-1.867 1.6-3.28l5.12.24c-.186 1.68-.733 3.147-1.64 4.4-.906 1.227-2.08 2.173-3.52 2.84-1.413.667-2.986 1-4.72 1-2.08 0-3.906-.453-5.48-1.36-1.546-.907-2.76-2.2-3.64-3.88-.853-1.68-1.28-3.627-1.28-5.84 0-2.24.427-4.187 1.28-5.84.88-1.68 2.094-2.973 3.64-3.88 1.574-.907 3.4-1.36 5.48-1.36 1.68 0 3.227.32 4.64.96 1.414.64 2.56 1.56 3.44 2.76.907 1.2 1.454 2.6 1.64 4.2l-5.12.28Zm11.443 8.16V38h-5.6v-5.32h5.6Z"/><path fill="#171717" fill-rule="evenodd" d="m7.839 40.783 16.03-28.054L20 6 0 40.783h7.839Zm8.214 0H40L27.99 19.894l-4.02 7.032 3.976 6.914H20.02l-3.967 6.943Z" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/public/placeholder-user.jpg b/public/placeholder-user.jpg
new file mode 100644
index 0000000..6fa7543
Binary files /dev/null and b/public/placeholder-user.jpg differ
diff --git a/public/placeholder.jpg b/public/placeholder.jpg
new file mode 100644
index 0000000..6bfe963
Binary files /dev/null and b/public/placeholder.jpg differ
diff --git a/public/placeholder.svg b/public/placeholder.svg
new file mode 100644
index 0000000..e763910
--- /dev/null
+++ b/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/services/data-analysis-service.ts b/services/data-analysis-service.ts
new file mode 100644
index 0000000..9d21cec
--- /dev/null
+++ b/services/data-analysis-service.ts
@@ -0,0 +1,292 @@
+import type {
+  UserRFMData,
+  RFMAnalysisResult,
+  UserFilterOptions,
+  DataComparisonResult,
+  UserSegment,
+} from "@/types/data-analysis"
+
+// 模拟用户RFM数据
+export const getUserRFMData = (): UserRFMData[] => {
+  return [
+    {
+      userId: "1",
+      userName: "张三",
+      phone: "13812345678",
+      lastPurchaseDate: "2023-07-15",
+      purchaseFrequency: 12,
+      totalSpent: 15800,
+      rfmScore: {
+        recency: 5,
+        frequency: 5,
+        monetary: 5,
+        totalScore: 15,
+      },
+      segment: "高价值活跃用户",
+      valueEstimation: 3200,
+    },
+    {
+      userId: "2",
+      userName: "李四",
+      phone: "13987654321",
+      lastPurchaseDate: "2023-06-20",
+      purchaseFrequency: 8,
+      totalSpent: 9500,
+      rfmScore: {
+        recency: 4,
+        frequency: 4,
+        monetary: 4,
+        totalScore: 12,
+      },
+      segment: "中价值活跃用户",
+      valueEstimation: 1800,
+    },
+    {
+      userId: "3",
+      userName: "王五",
+      phone: "13765432198",
+      lastPurchaseDate: "2023-04-10",
+      purchaseFrequency: 3,
+      totalSpent: 3200,
+      rfmScore: {
+        recency: 2,
+        frequency: 2,
+        monetary: 3,
+        totalScore: 7,
+      },
+      segment: "低价值流失风险用户",
+      valueEstimation: 650,
+    },
+    {
+      userId: "4",
+      userName: "赵六",
+      phone: "13654321987",
+      lastPurchaseDate: "2023-07-18",
+      purchaseFrequency: 15,
+      totalSpent: 25000,
+      rfmScore: {
+        recency: 5,
+        frequency: 5,
+        monetary: 5,
+        totalScore: 15,
+      },
+      segment: "高价值活跃用户",
+      valueEstimation: 4500,
+    },
+    {
+      userId: "5",
+      userName: "钱七",
+      phone: "13543219876",
+      lastPurchaseDate: "2023-03-15",
+      purchaseFrequency: 6,
+      totalSpent: 12000,
+      rfmScore: {
+        recency: 1,
+        frequency: 3,
+        monetary: 4,
+        totalScore: 8,
+      },
+      segment: "中价值沉睡用户",
+      valueEstimation: 1200,
+    },
+    {
+      userId: "6",
+      userName: "孙八",
+      phone: "13432198765",
+      lastPurchaseDate: "2023-07-10",
+      purchaseFrequency: 4,
+      totalSpent: 5800,
+      rfmScore: {
+        recency: 4,
+        frequency: 3,
+        monetary: 3,
+        totalScore: 10,
+      },
+      segment: "中价值活跃用户",
+      valueEstimation: 950,
+    },
+    {
+      userId: "7",
+      userName: "周九",
+      phone: "13321987654",
+      lastPurchaseDate: "2023-05-25",
+      purchaseFrequency: 2,
+      totalSpent: 2500,
+      rfmScore: {
+        recency: 3,
+        frequency: 2,
+        monetary: 2,
+        totalScore: 7,
+      },
+      segment: "低价值流失风险用户",
+      valueEstimation: 480,
+    },
+    {
+      userId: "8",
+      userName: "吴十",
+      phone: "13219876543",
+      lastPurchaseDate: "2023-07-20",
+      purchaseFrequency: 10,
+      totalSpent: 18000,
+      rfmScore: {
+        recency: 5,
+        frequency: 4,
+        monetary: 5,
+        totalScore: 14,
+      },
+      segment: "高价值活跃用户",
+      valueEstimation: 3600,
+    },
+    {
+      userId: "9",
+      userName: "郑十一",
+      phone: "13198765432",
+      lastPurchaseDate: "2023-02-10",
+      purchaseFrequency: 5,
+      totalSpent: 8000,
+      rfmScore: {
+        recency: 1,
+        frequency: 3,
+        monetary: 3,
+        totalScore: 7,
+      },
+      segment: "中价值沉睡用户",
+      valueEstimation: 850,
+    },
+    {
+      userId: "10",
+      userName: "王十二",
+      phone: "13098765432",
+      lastPurchaseDate: "2023-07-05",
+      purchaseFrequency: 7,
+      totalSpent: 13500,
+      rfmScore: {
+        recency: 4,
+        frequency: 4,
+        monetary: 4,
+        totalScore: 12,
+      },
+      segment: "中价值活跃用户",
+      valueEstimation: 2200,
+    },
+  ]
+}
+
+// 定义分群分布的类型
+interface SegmentDistribution {
+  segment: UserSegment
+  count: number
+  percentage: number
+}
+
+// 分析RFM数据
+export const analyzeRFMData = (data: UserRFMData[]): RFMAnalysisResult => {
+  const userCount = data.length
+
+  // 计算平均值
+  const averageRecency = data.reduce((sum, user) => sum + user.rfmScore.recency, 0) / userCount
+  const averageFrequency = data.reduce((sum, user) => sum + user.rfmScore.frequency, 0) / userCount
+  const averageMonetary = data.reduce((sum, user) => sum + user.rfmScore.monetary, 0) / userCount
+
+  // 计算总估值和平均估值
+  const totalValueEstimation = data.reduce((sum, user) => sum + user.valueEstimation, 0)
+  const averageValueEstimation = totalValueEstimation / userCount
+
+  // 计算分群分布
+  const segmentCounts: Record<UserSegment, number> = {} as Record<UserSegment, number>
+  data.forEach((user) => {
+    segmentCounts[user.segment] = (segmentCounts[user.segment] || 0) + 1
+  })
+
+  const segmentDistribution: SegmentDistribution[] = Object.entries(segmentCounts)
+    .map(([segment, count]) => ({
+      segment: segment as UserSegment,
+      count,
+      percentage: (count / userCount) * 100,
+    }))
+    .sort((a, b) => b.count - a.count)
+
+  return {
+    userCount,
+    averageRecency,
+    averageFrequency,
+    averageMonetary,
+    segmentDistribution,
+    totalValueEstimation,
+    averageValueEstimation,
+  }
+}
+
+// 过滤用户数据
+export const filterUserData = (data: UserRFMData[], options: UserFilterOptions): UserRFMData[] => {
+  return data.filter((user) => {
+    // 分群过滤
+    if (options.segments.length > 0 && !options.segments.includes(user.segment)) {
+      return false
+    }
+
+    // 日期范围过滤
+    if (options.dateRange.start && options.dateRange.end) {
+      const userDate = new Date(user.lastPurchaseDate)
+      const startDate = new Date(options.dateRange.start)
+      const endDate = new Date(options.dateRange.end)
+      if (userDate < startDate || userDate > endDate) {
+        return false
+      }
+    }
+
+    // 价值范围过滤
+    if (options.valueRange.min !== undefined && options.valueRange.max !== undefined) {
+      if (user.valueEstimation < options.valueRange.min || user.valueEstimation > options.valueRange.max) {
+        return false
+      }
+    }
+
+    return true
+  })
+}
+
+// 比较两个时间段的数据
+export const compareDataPeriods = (beforeData: UserRFMData[], afterData: UserRFMData[]): DataComparisonResult[] => {
+  const segments: UserSegment[] = [
+    "高价值活跃用户",
+    "高价值流失风险用户",
+    "高价值沉睡用户",
+    "中价值活跃用户",
+    "中价值流失风险用户",
+    "中价值沉睡用户",
+    "低价值活跃用户",
+    "低价值流失风险用户",
+    "低价值沉睡用户",
+    "新用户",
+  ]
+
+  return segments
+    .map((segment) => {
+      const beforeSegment = beforeData.filter((user) => user.segment === segment)
+      const afterSegment = afterData.filter((user) => user.segment === segment)
+
+      const beforeCount = beforeSegment.length
+      const afterCount = afterSegment.length
+
+      const beforeValue = beforeSegment.reduce((sum, user) => sum + user.valueEstimation, 0)
+      const afterValue = afterSegment.reduce((sum, user) => sum + user.valueEstimation, 0)
+
+      const changePercentage =
+        beforeCount === 0 ? (afterCount === 0 ? 0 : 100) : ((afterCount - beforeCount) / beforeCount) * 100
+
+      const valueChangePercentage =
+        beforeValue === 0 ? (afterValue === 0 ? 0 : 100) : ((afterValue - beforeValue) / beforeValue) * 100
+
+      return {
+        segment,
+        beforeCount,
+        afterCount,
+        changePercentage,
+        beforeValue,
+        afterValue,
+        valueChangePercentage,
+      }
+    })
+    .filter((result) => result.beforeCount > 0 || result.afterCount > 0)
+}
diff --git a/services/user-portrait-service.ts b/services/user-portrait-service.ts
new file mode 100644
index 0000000..1fac4c8
--- /dev/null
+++ b/services/user-portrait-service.ts
@@ -0,0 +1,240 @@
+import type { UserPortrait, UserCategory, UserTag, UserSegment } from "@/types/user-portrait"
+
+// 模拟用户数据
+export const getUsers = (): UserPortrait[] => {
+  return [
+    {
+      id: "1",
+      name: "张三",
+      nickname: "小张",
+      phone: "13812345678",
+      imei: "123456789012345",
+      idNumber: "310************123",
+      source: "微信",
+      sourceDetail: "朋友圈广告",
+      registerDate: "2023-05-15",
+      lastActive: "2023-07-20",
+      value: "high",
+      spendingCapacity: "高",
+      spendingLevel: "A",
+      spendingAmount: "¥15,000",
+      address: "上海市浦东新区张江高科技园区",
+      tags: ["潜在客户", "对产品感兴趣", "高消费", "科技爱好者"],
+      status: "active",
+      entryPoint: "首页Banner",
+      behavior: ["浏览产品", "加入购物车", "咨询客服", "分享商品"],
+    },
+    {
+      id: "2",
+      name: "李四",
+      nickname: "阿四",
+      phone: "13987654321",
+      imei: "987654321098765",
+      idNumber: "440************456",
+      source: "抖音",
+      sourceDetail: "短视频推广",
+      registerDate: "2023-04-10",
+      lastActive: "2023-07-18",
+      value: "medium",
+      spendingCapacity: "中",
+      spendingLevel: "B",
+      spendingAmount: "¥8,500",
+      address: "广州市天河区珠江新城",
+      tags: ["新用户", "已咨询", "中等消费", "时尚爱好者"],
+      status: "active",
+      entryPoint: "推荐页",
+      behavior: ["浏览产品", "收藏商品", "比较价格"],
+    },
+    {
+      id: "3",
+      name: "王五",
+      nickname: "老王",
+      phone: "13765432198",
+      imei: "456789012345678",
+      idNumber: "110************789",
+      source: "小红书",
+      sourceDetail: "博主推荐",
+      registerDate: "2023-03-05",
+      lastActive: "2023-05-25",
+      value: "low",
+      spendingCapacity: "低",
+      spendingLevel: "C",
+      spendingAmount: "¥3,200",
+      address: "北京市朝阳区三里屯",
+      tags: ["已购买", "需要跟进", "低消费", "美妆爱好者"],
+      status: "inactive",
+      entryPoint: "搜索结果",
+      behavior: ["浏览产品", "查看评价", "放弃购买"],
+    },
+    {
+      id: "4",
+      name: "赵六",
+      nickname: "六子",
+      phone: "13654321987",
+      imei: "789012345678901",
+      idNumber: "510************012",
+      source: "官网",
+      sourceDetail: "搜索引擎",
+      registerDate: "2023-02-20",
+      lastActive: "2023-07-19",
+      value: "high",
+      spendingCapacity: "高",
+      spendingLevel: "A+",
+      spendingAmount: "¥25,000",
+      address: "成都市高新区天府大道",
+      tags: ["VIP客户", "高频购买", "高消费", "数码爱好者"],
+      status: "active",
+      entryPoint: "直接访问",
+      behavior: ["浏览产品", "购买商品", "评价商品", "推荐给朋友"],
+    },
+    {
+      id: "5",
+      name: "钱七",
+      nickname: "钱多多",
+      phone: "13543219876",
+      imei: "890123456789012",
+      idNumber: "330************345",
+      source: "微信",
+      sourceDetail: "公众号推文",
+      registerDate: "2023-01-15",
+      lastActive: "2023-04-10",
+      value: "medium",
+      spendingCapacity: "中",
+      spendingLevel: "B+",
+      spendingAmount: "¥12,000",
+      address: "杭州市西湖区文三路",
+      tags: ["已流失", "需要挽回", "中等消费", "旅游爱好者"],
+      status: "lost",
+      entryPoint: "活动页面",
+      behavior: ["浏览产品", "加入购物车", "放弃购买"],
+    },
+  ]
+}
+
+// 获取用户分类
+export const getUserCategories = (): UserCategory[] => {
+  return [
+    {
+      id: "1",
+      name: "高价值用户",
+      description: "消费能力强，购买频率高的用户",
+      count: 32456,
+      criteria: [{ field: "value", operator: "equals", value: "high" }],
+    },
+    {
+      id: "2",
+      name: "活跃用户",
+      description: "近30天内有活动的用户",
+      count: 78452,
+      criteria: [{ field: "status", operator: "equals", value: "active" }],
+    },
+    {
+      id: "3",
+      name: "流失风险用户",
+      description: "30-90天未活动的用户",
+      count: 15689,
+      criteria: [{ field: "status", operator: "equals", value: "inactive" }],
+    },
+    {
+      id: "4",
+      name: "已流失用户",
+      description: "90天以上未活动的用户",
+      count: 8765,
+      criteria: [{ field: "status", operator: "equals", value: "lost" }],
+    },
+  ]
+}
+
+// 获取用户标签
+export const getUserTags = (): UserTag[] => {
+  return [
+    {
+      id: "1",
+      name: "高消费",
+      category: "消费能力",
+      count: 32456,
+      description: "月均消费金额超过10000元的用户",
+    },
+    {
+      id: "2",
+      name: "科技爱好者",
+      category: "兴趣爱好",
+      count: 45678,
+      description: "对科技产品有浓厚兴趣的用户",
+    },
+    {
+      id: "3",
+      name: "时尚爱好者",
+      category: "兴趣爱好",
+      count: 38765,
+      description: "对时尚产品有浓厚兴趣的用户",
+    },
+    {
+      id: "4",
+      name: "美妆爱好者",
+      category: "兴趣爱好",
+      count: 42345,
+      description: "对美妆产品有浓厚兴趣的用户",
+    },
+    {
+      id: "5",
+      name: "数码爱好者",
+      category: "兴趣爱好",
+      count: 36789,
+      description: "对数码产品有浓厚兴趣的用户",
+    },
+    {
+      id: "6",
+      name: "旅游爱好者",
+      category: "兴趣爱好",
+      count: 28976,
+      description: "对旅游产品有浓厚兴趣的用户",
+    },
+  ]
+}
+
+// 获取用户分群
+export const getUserSegments = (): UserSegment[] => {
+  return [
+    {
+      id: "1",
+      name: "高价值潜在客户",
+      description: "高消费能力但尚未购买的用户",
+      count: 12456,
+      criteria: [
+        { field: "value", operator: "equals", value: "high" },
+        { field: "tags", operator: "contains", value: "潜在客户" },
+      ],
+    },
+    {
+      id: "2",
+      name: "高频购买VIP",
+      description: "高频次购买的VIP用户",
+      count: 8765,
+      criteria: [
+        { field: "value", operator: "equals", value: "high" },
+        { field: "tags", operator: "contains", value: "VIP客户" },
+      ],
+    },
+    {
+      id: "3",
+      name: "流失风险高价值",
+      description: "有流失风险的高价值用户",
+      count: 3456,
+      criteria: [
+        { field: "value", operator: "equals", value: "high" },
+        { field: "status", operator: "equals", value: "inactive" },
+      ],
+    },
+    {
+      id: "4",
+      name: "待挽回用户",
+      description: "已流失但有挽回价值的用户",
+      count: 5678,
+      criteria: [
+        { field: "status", operator: "equals", value: "lost" },
+        { field: "tags", operator: "contains", value: "需要挽回" },
+      ],
+    },
+  ]
+}
diff --git a/styles/globals.css b/styles/globals.css
new file mode 100644
index 0000000..ac68442
--- /dev/null
+++ b/styles/globals.css
@@ -0,0 +1,94 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..cbd753a
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,121 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+    "*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "1rem",
+      screens: {
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1280px",
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        glass: {
+          light: "rgba(255, 255, 255, 0.1)",
+          medium: "rgba(255, 255, 255, 0.2)",
+          heavy: "rgba(255, 255, 255, 0.3)",
+          dark: "rgba(0, 0, 0, 0.1)",
+        },
+      },
+      backdropBlur: {
+        xs: "2px",
+        sm: "4px",
+        md: "8px",
+        lg: "12px",
+        xl: "16px",
+        "2xl": "24px",
+        "3xl": "40px",
+      },
+      backgroundImage: {
+        "gradient-glass": "linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))",
+        "gradient-glass-dark": "linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02))",
+      },
+      boxShadow: {
+        glass: "0 8px 32px 0 rgba(31, 38, 135, 0.37)",
+        "glass-sm": "0 2px 16px 0 rgba(31, 38, 135, 0.2)",
+        "glass-lg": "0 16px 64px 0 rgba(31, 38, 135, 0.5)",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+        "slide-in": {
+          from: { transform: "translateX(-100%)" },
+          to: { transform: "translateX(0)" },
+        },
+        "slide-out": {
+          from: { transform: "translateX(0)" },
+          to: { transform: "translateX(-100%)" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "slide-in": "slide-in 0.3s ease-out",
+        "slide-out": "slide-out 0.3s ease-out",
+      },
+      spacing: {
+        "safe-top": "env(safe-area-inset-top)",
+        "safe-bottom": "env(safe-area-inset-bottom)",
+        "safe-left": "env(safe-area-inset-left)",
+        "safe-right": "env(safe-area-inset-right)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..c714696
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
diff --git a/开发文档/开发文档.md b/开发文档/开发文档.md
new file mode 100644
index 0000000..b8dddcf
--- /dev/null
+++ b/开发文档/开发文档.md
@@ -0,0 +1,41 @@
+# 开发文档
+
+## 项目概述
+
+*   项目名称: "神射手" 用户资产数字中台
+*   目标: 构建一个统一、灵活、高性能的用户数据中心，汇聚来自多个异构源系统的数据，形成可信的 360 度用户视图。
+*   核心价值: 打破数据孤岛，沉淀统一、全面的用户资产，提升数据驱动能力。
+
+## 迭代记录
+
+### V1.4 (2025-04-21)
+
+*   **需求分析与任务分解**
+  *   数据接入 (Ingestion)
+  *   数据存储与结构 (Storage & Schema)
+  *   数据查询 (Querying)
+  *   数据服务 (API Distribution)
+  *   身份识别与合并 (Identity Resolution)
+  *   分析支持
+*   **易用性改进**
+  *   将“设备管理”从二级菜单提升为一级菜单。
+
+## 开发架构
+
+### 数据库
+
+*   MongoDB
+
+### 服务
+
+*   IngestionService
+*   QueryService
+*   IdentityService
+
+### API
+
+*   /api/users
+*   /api/users/{userId}
+*   /api/ingest
+*   /api/users/{userId}/tags
+*   /api/users/{userId}/activity
diff --git a/开发文档/标签管理系统开发文档.md b/开发文档/标签管理系统开发文档.md
new file mode 100644
index 0000000..b8300b1
--- /dev/null
+++ b/开发文档/标签管理系统开发文档.md
@@ -0,0 +1,143 @@
+# 标签管理系统开发文档
+
+## 1. 系统概述
+
+标签管理系统是用户数据资产中台的核心组件之一，用于管理和组织用户标签体系，支持用户画像的构建和应用。系统包括标签管理、标签规则引擎等功能模块，为企业提供完整的用户标签生命周期管理能力。
+
+## 2. 系统架构
+
+### 2.1 总体架构
+
+标签管理系统采用前后端分离架构，前端使用 React + Next.js 开发，后端使用 Node.js + MySQL 开发。系统主要包括以下几个部分：
+
+- 标签管理：负责标签的创建、编辑、删除等基础管理功能
+- 标签规则引擎：负责标签生成规则的定义和执行
+- 标签分析：提供标签使用情况的统计和分析功能
+- 标签关系图谱：展示标签之间的关联关系
+
+### 2.2 数据模型
+
+#### 标签表 (tags)
+
+| 字段名 | 类型 | 说明 |
+| --- | --- | --- |
+| id | varchar(36) | 主键，标签ID |
+| name | varchar(100) | 标签名称 |
+| category | varchar(50) | 标签分类 |
+| type | enum | 标签类型：系统、自定义、衍生 |
+| source | varchar(100) | 数据来源 |
+| coverage | decimal(5,2) | 覆盖率 |
+| created_at | datetime | 创建时间 |
+| updated_at | datetime | 更新时间 |
+
+#### 标签规则表 (tag_rules)
+
+| 字段名 | 类型 | 说明 |
+| --- | --- | --- |
+| id | varchar(36) | 主键，规则ID |
+| name | varchar(100) | 规则名称 |
+| description | text | 规则描述 |
+| target_tag_id | varchar(36) | 目标标签ID |
+| condition | text | 规则条件 |
+| sql | text | SQL语句 |
+| status | enum | 状态：活跃、非活跃、草稿 |
+| priority | int | 优先级 |
+| created_at | datetime | 创建时间 |
+| updated_at | datetime | 更新时间 |
+
+#### 规则执行历史表 (rule_executions)
+
+| 字段名 | 类型 | 说明 |
+| --- | --- | --- |
+| id | varchar(36) | 主键，执行ID |
+| rule_id | varchar(36) | 规则ID |
+| execution_time | datetime | 执行时间 |
+| duration | int | 执行耗时（秒） |
+| status | enum | 状态：成功、失败、执行中 |
+| affected_users | int | 影响用户数 |
+| executed_by | varchar(50) | 执行人 |
+| log | text | 执行日志 |
+
+#### 用户标签关联表 (user_tags)
+
+| 字段名 | 类型 | 说明 |
+| --- | --- | --- |
+| user_id | varchar(36) | 用户ID |
+| tag_id | varchar(36) | 标签ID |
+| created_at | datetime | 创建时间 |
+| rule_execution_id | varchar(36) | 规则执行ID |
+
+## 3. 功能模块
+
+### 3.1 标签管理
+
+标签管理模块提供标签的基础管理功能，包括：
+
+- 标签列表：展示所有标签，支持搜索、筛选和排序
+- 标签创建：创建新标签，设置标签名称、分类、类型等信息
+- 标签编辑：修改标签信息
+- 标签删除：删除不需要的标签
+- 标签分析：展示标签的使用情况和分布情况
+- 标签关系图谱：展示标签之间的关联关系
+
+### 3.2 标签规则引擎
+
+标签规则引擎负责标签生成规则的定义和执行，包括：
+
+- 规则列表：展示所有规则，支持搜索、筛选和排序
+- 规则创建：创建新规则，设置规则名称、描述、目标标签、条件等信息
+- 规则编辑：修改规则信息
+- 规则执行：手动执行规则，为符合条件的用户打标签
+- 规则调度：设置规则的自动执行计划
+- 执行历史：查看规则的执行历史和结果
+
+## 4. 开发流程
+
+### 4.1 标签管理模块开发
+
+1. 创建标签管理页面 (app/tag-management/page.tsx)
+2. 实现标签列表展示功能
+3. 实现标签创建、编辑、删除功能
+4. 实现标签分类分布图表 (components/tag-management/tag-category-chart.tsx)
+5. 实现标签使用统计图表 (components/tag-management/tag-usage-stats.tsx)
+6. 实现标签关系图谱 (components/tag-management/tag-relationship-graph.tsx)
+
+### 4.2 标签规则引擎开发
+
+1. 创建标签规则引擎页面 (app/tag-rules/page.tsx)
+2. 实现规则列表展示功能
+3. 实现规则创建、编辑、删除功能
+4. 实现规则编辑器 (components/tag-rules/rule-editor.tsx)
+5. 实现规则执行历史查看功能 (components/tag-rules/rule-execution-history.tsx)
+
+## 5. 接口设计
+
+### 5.1 标签管理接口
+
+- GET /api/tags - 获取标签列表
+- POST /api/tags - 创建标签
+- GET /api/tags/:id - 获取标签详情
+- PUT /api/tags/:id - 更新标签
+- DELETE /api/tags/:id - 删除标签
+- GET /api/tags/stats - 获取标签统计信息
+- GET /api/tags/relationships - 获取标签关系图谱数据
+
+### 5.2 标签规则引擎接口
+
+- GET /api/tag-rules - 获取规则列表
+- POST /api/tag-rules - 创建规则
+- GET /api/tag-rules/:id - 获取规则详情
+- PUT /api/tag-rules/:id - 更新规则
+- DELETE /api/tag-rules/:id - 删除规则
+- POST /api/tag-rules/:id/execute - 执行规则
+- GET /api/tag-rules/executions - 获取规则执行历史
+- GET /api/tag-rules/executions/:id - 获取规则执行详情
+
+## 6. 后续计划
+
+1. 实现标签规则的自动调度功能
+2. 增加标签导入导出功能
+3. 增加标签权限管理功能
+4. 增加标签版本管理功能
+5. 增加标签质量评估功能
+6. 增加标签推荐功能
diff --git a/开发文档/需求文档.md b/开发文档/需求文档.md
new file mode 100644
index 0000000..d60cc23
--- /dev/null
+++ b/开发文档/需求文档.md
@@ -0,0 +1,141 @@
+产品需求文档 (PRD): "神射手" 用户资产数字中台 V1.3
+
+1. 项目概述
+
+- 项目名称: "神射手" 用户资产数字中台 (对应 @神射手 项目)
+- 目标: 构建一个统一、灵活、高性能的用户数据中心，汇聚来自**多个异构源系统**（如截图所示 众多数据库，以及未来可能接入的其他内外部系统）的用户相关信息，形成 360 度用户视图。该平台通过 API 服务 (api/ 目录) 赋能其他业务系统（如“存客宝”），并可能包含内置管理界面 (app/ 等目录)。
+- 核心挑战: 处理源系统**数据结构差异巨大**、**字段繁多且命名不一**的问题（如 所有数据库所有字段.csv 所反映），将这些**多样化的数据**有效整合为统一的“用户资产”。
+- 核心价值: 打破数据孤岛，沉淀用户资产，提升数据驱动能力。通过标准化的服务层 (services/ 目录) 和 API 接口，支持精细化运营和个性化用户分析。
+
+2. 项目目标
+
+- 数据汇聚: 实现对各源数据库（覆盖截图中的 MySQL 库等）及其他渠道用户数据的统一接入和存储。
+- Schema 灵活性: 支持存储结构各异的数据，能动态适应不同来源、包含大量**非标准化字段**的数据。
+- 高性能查询: 实现对单个用户信息的毫秒级查询响应，**即使在数据模型复杂、数据量巨大的情况下**。
+- 统一用户资产视图: 将来自不同源系统、**各种不同字段**的数据，通过映射和关联，**统一成可理解、可使用的“用户资产”格式**，存储在中台数据库中。
+- 快速迭代: 采用模块化架构，支持业务需求的快速变化。
+- 统一服务: 提供稳定、标准的 API 接口 (api/ 路由驱动)，供内部系统调用。
+- 赋能应用: 使“存客宝”等应用能利用中台数据自定义用户分群、构建流量池规则。
+- 支持分析: 提供基础的用户画像分析能力，支持基于全量用户数据的查询和探索。
+
+3. 功能需求
+
+- 3.1 数据接入 (Ingestion)
+  - 数据源适配: 需要开发或配置数据同步/ETL 工具，能够连接不同的源数据库（如 MySQL）和 API，定期或实时抽取数据。
+  - API 端点: 提供 /api/ingest (或类似) 接口，用于接收实时推送的数据。
+  - 服务层处理 (**services/IngestionService**):
+    - 接收原始数据（包含来源 source 和 源ID source_user_id）。
+    - 核心步骤：数据映射与转换 - 根据预定义的 **数据字典和映射规则**（见 3.2.1），对原始数据进行初步处理：
+      - 识别关键字段（如姓名、手机、邮箱等）。
+      - 标准化某些字段值（如日期格式、地址格式）。
+      - 生成或关联全局唯一 userId（涉及身份识别逻辑）。
+      - 准备写入数据库的文档结构。
+  - 历史数据迁移: 需要制定计划，将源系统中的存量数据批量导入中台。
+
+- 3.2 数据存储与结构 (Storage & Schema)
+  - 数据库选型: **强烈推荐文档数据库 (如 MongoDB)**。理由：其灵活的 Schema 是处理源系统字段多样性（Caihong 中众多 shua_ 表，SG_ 库中各异的结构）的最佳方式，可以直接存储源系统的原始字段结构，避免了在关系型数据库中创建超宽表或大量关联表的复杂性。
+  - 数据模型 (示例):
+{
+  "userId": "global-unique-id-xyz", // 中台统一用户ID
+  "core_profile": { // 提取的核心/标准化字段
+    "name": "...",
+    "mobile": "...", // 脱敏存储
+    "email": "...",
+    // ... 其他核心字段
+  },
+  "unified_tags": ["高价值客户", "医疗行业", "辽宁负责人"], // 统一标签
+  "unified_attributes": { // 统一计算属性
+    "lifetime_value": 15000,
+    "last_active_days": 15
+  },
+  "source_profiles": [ // 存储各来源的详细档案
+    {
+      "source": "caihong_shua_users", // 来源标识 (更具体)
+      "source_user_id": "user_id_in_shua_users_table",
+      "original_data": { // 保留原始字段，无需所有字段都映射
+        "username": "...",
+        "level": 3,
+        "register_time": "...",
+        // ... shua_users 表中的所有字段
+      },
+      "ingestion_timestamp": "..."
+    },
+    {
+      "source": "sg_enterprise_directory",
+      "source_record_id": "record_id_in_sg_enterprise", // 源记录ID
+      // 可能基于 企业名称+负责人 关联到 userId
+      "original_data": {
+        "企业名称": "沈阳东北制药总厂",
+        "负责人": "张三", // 假设这个负责人也是中台的一个用户
+        "联系人": "李四",
+        "职位": "厂长",
+        "行政区划": "210106",
+        "地址": "沈阳市铁西区重工南街37号",
+        "区号": "024",
+        // ... SG_企业名录 中的所有字段
+      },
+       "ingestion_timestamp": "..."
+    },
+    // ... 其他来源 (SG_人才库, SG_投资, 抖音, 微信等)
+  ],
+  "createdAt": "...", // 中台记录创建时间
+  "updatedAt": "..."  // 中台记录更新时间
+}
+  - 3.2.1 数据字典与映射规则:
+    - 核心产出: 需要基于对 所有数据库所有字段.csv 及各源系统的分析，创建一份详细的**数据字典**。
+    - 内容:
+      - 定义中台的核心字段 (core_profile) 及其含义。
+      - 定义统一标签 (unified_tags) 和统一属性 (unified_attributes) 的生成规则。
+      - 建立**源系统字段**到**中台字段（核心字段或保留在 ****original_data**** 中）的映射关系**。
+      - 标识出 PII（个人身份信息）字段，明确其处理方式（存储、加密、脱敏、访问控制）。
+      - 标识出可用于**身份识别 (Identity Resolution)** 的关键字段（如手机号、邮箱、身份证号、微信 unionid 等）。
+    - 实现: 映射规则可以在 services/IngestionService 中通过代码实现，或配置在外部规则引擎中。
+
+- 3.3 数据查询 (Querying)
+  - API 端点 (**api/****):** 提供丰富的查询 API。
+  - 服务层逻辑 (**services/QueryService****):** 封装数据库查询逻辑。
+  - 查询能力:
+    - 基础查询: 按 userId, core_profile.email, core_profile.mobile 等快速获取用户。
+    - 关联查询: 按 source_profiles.source + source_profiles.source_user_id 查询。
+    - 复杂分析查询: 支持基于 core_profile, unified_tags, unified_attributes 以及 source_profiles.original_data **内部任意字段**的组合查询。例如：
+      - 查询 source_profiles.source 为 'sg_enterprise_directory' 且 original_data.负责人 为 '张三' 的所有用户。
+      - 查询 unified_tags 包含 '高价值客户' 且 source_profiles 中存在 source='caihong_shua_orders' 记录的用户。
+  - 性能: 必须为 userId, 核心字段, 以及 source_profiles 中经常用于查询的字段（如 source, source_user_id, original_data 内的关键业务字段）**建立数据库索引**。
+
+- 3.4 数据服务 (API Distribution)
+  - (与 V1.2 类似) 提供标准 API，重点强化查询 API 的过滤能力，满足存客宝等应用需求。
+
+- 3.5 (可能) 管理界面 (Management UI)
+  - (与 V1.2 类似) 提供界面用于查看统一后的用户视图、搜索用户、可能包含基础的数据质量监控。
+
+- 3.6 与存客宝 (**cunkebao 0420**) 集成场景
+  - 存客宝调用中台 API，获取 **经过整合和关联的全维度用户数据**，包括核心信息、统一标签、以及来自 Caihong, SG_* 等所有源系统的详细档案信息，用于构建复杂的流量池规则和执行精准营销。
+
+- 3.7 (重点) 身份识别与合并 (Identity Resolution)
+  - 必要性: 由于数据来自不同系统，必须有机制识别哪些记录属于同一个自然人。
+  - 策略: 需要在 services/ 中实现，基于数据字典中标识的关键字段（手机、邮箱、身份证等），采用确定性匹配（完全一致）和模糊匹配（相似度算法）相结合的方式，将不同 source_profiles 关联到同一个 userId。这是一个持续优化的过程。
+
+- 3.8 分析支持
+  - 中台 API 应能支持 BI 工具或数据分析平台进行数据查询和提取。
+  - (可选) 提供数据导出功能，将处理整合后的用户数据导出为宽表或其他格式，供离线分析使用。
+
+4. 非功能性需求
+
+- (与 V1.2 类似：性能、可扩展性、灵活性、可用性)
+- 4.5 安全性:
+  - 严禁存储明文密码或高度敏感凭证。 对于截图中可能存在的密码或敏感数据，在接入中台时必须**丢弃**或进行**不可逆的哈希处理**（如果中台需要校验密码，但这通常应由源系统或统一认证中心负责）。
+  - 严格遵守数据字典中定义的 PII 处理规则（加密、脱敏、访问控制）。
+  - API 访问控制要做到字段级别。
+
+5. 数据库选型推荐
+
+- 首选: **MongoDB**。其灵活的文档模型、强大的查询能力（支持嵌套文档查询和索引）、成熟的生态和良好的水平扩展性，非常适合应对当前描述的复杂数据源整合需求。
+
+6. 开放问题与后续步骤
+
+- 启动核心任务： **立即开始分析 ****所有数据库所有字段.csv**** 和各源数据库结构，着手制定 V1.0 的数据字典和映射规则。** 这是项目成功的关键。
+- 详细设计身份识别 (Identity Resolution) 的具体算法和流程。
+- 确定数据库部署方案（云服务 Atlas? 自建?）。
+- 与存客宝团队详细对接 API 需求，特别是复杂查询场景。
+- 确定管理界面的范围和优先级。
+- 制定历史数据迁移方案和数据质量校验计划。