diff --git a/.next/trace b/.next/trace
new file mode 100644
index 00000000..447f1a2c
--- /dev/null
+++ b/.next/trace
@@ -0,0 +1,5 @@
+[{"name":"next-dev","duration":1133882,"timestamp":77673052994,"id":1,"tags":{},"startTime":1743230471261,"traceId":"783da342eecd516c"}]
+[{"name":"next-dev","duration":1106982,"timestamp":78353056801,"id":1,"tags":{},"startTime":1743231151264,"traceId":"bdd508402794a0ab"}]
+[{"name":"next-dev","duration":1216133,"timestamp":79753595153,"id":1,"tags":{},"startTime":1743232551803,"traceId":"67862971c58777c2"}]
+[{"name":"next-dev","duration":1179753,"timestamp":80176478960,"id":1,"tags":{},"startTime":1743232974687,"traceId":"0e6fe535ed5bf51d"}]
+[{"name":"next-dev","duration":1173589,"timestamp":80452943657,"id":1,"tags":{},"startTime":1743233251152,"traceId":"1b3e7015fce31dcf"}]
diff --git a/Cunkebao/.babelrc b/Cunkebao/.babelrc
new file mode 100644
index 00000000..beaa8513
--- /dev/null
+++ b/Cunkebao/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"]
+}
+
diff --git a/Cunkebao/.gitignore b/Cunkebao/.gitignore
index 1dcef2d9..f650315f 100644
--- a/Cunkebao/.gitignore
+++ b/Cunkebao/.gitignore
@@ -1,2 +1,27 @@
-node_modules
-.env
\ No newline at end of file
+# 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/Cunkebao/api/devices.ts b/Cunkebao/api/devices.ts
new file mode 100644
index 00000000..c0b5642d
--- /dev/null
+++ b/Cunkebao/api/devices.ts
@@ -0,0 +1,131 @@
+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/Cunkebao/api/route.ts b/Cunkebao/api/route.ts
new file mode 100644
index 00000000..f82d21d8
--- /dev/null
+++ b/Cunkebao/api/route.ts
@@ -0,0 +1,74 @@
+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/Cunkebao/api/scenarios.ts b/Cunkebao/api/scenarios.ts
new file mode 100644
index 00000000..d09b797b
--- /dev/null
+++ b/Cunkebao/api/scenarios.ts
@@ -0,0 +1,112 @@
+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/Cunkebao/app/api/acquisition/[planId]/orders/route.ts b/Cunkebao/app/api/acquisition/[planId]/orders/route.ts
new file mode 100644
index 00000000..57754319
--- /dev/null
+++ b/Cunkebao/app/api/acquisition/[planId]/orders/route.ts
@@ -0,0 +1,20 @@
+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/Cunkebao/app/api/auth.ts b/Cunkebao/app/api/auth.ts
new file mode 100644
index 00000000..c17c48c5
--- /dev/null
+++ b/Cunkebao/app/api/auth.ts
@@ -0,0 +1,69 @@
+// 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/Cunkebao/app/api/devices/route.ts b/Cunkebao/app/api/devices/route.ts
new file mode 100644
index 00000000..6de78c12
--- /dev/null
+++ b/Cunkebao/app/api/devices/route.ts
@@ -0,0 +1,82 @@
+import { NextResponse } from "next/server"
+import type {
+  CreateDeviceParams,
+  QueryDeviceParams,
+  Device,
+  ApiResponse,
+  DeviceStatus,
+  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,
+      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,
+      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/Cunkebao/app/api/docs/scenarios/[channel]/[id]/page.tsx b/Cunkebao/app/api/docs/scenarios/[channel]/[id]/page.tsx
new file mode 100644
index 00000000..4d123b1d
--- /dev/null
+++ b/Cunkebao/app/api/docs/scenarios/[channel]/[id]/page.tsx
@@ -0,0 +1,231 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Copy, Check, Info } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+import { useToast } from "@/components/ui/use-toast"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { getApiGuideForScenario } from "@/docs/api-guide"
+import { Badge } from "@/components/ui/badge"
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+
+export default function ApiDocPage({ params }: { params: { channel: string; id: string } }) {
+  const router = useRouter()
+  const { toast } = useToast()
+  const [copiedExample, setCopiedExample] = useState<string | null>(null)
+
+  const apiGuide = getApiGuideForScenario(params.id, params.channel)
+
+  const copyToClipboard = (text: string, exampleId: string) => {
+    navigator.clipboard.writeText(text)
+    setCopiedExample(exampleId)
+
+    toast({
+      title: "已复制代码",
+      description: "代码示例已复制到剪贴板",
+    })
+
+    setTimeout(() => {
+      setCopiedExample(null)
+    }, 2000)
+  }
+
+  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={() => router.back()}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="ml-2 text-lg font-medium">{apiGuide.title}</h1>
+          </div>
+        </div>
+      </header>
+
+      <div className="container mx-auto py-6 px-4 max-w-4xl">
+        <Card className="mb-6">
+          <CardHeader>
+            <CardTitle>接口说明</CardTitle>
+            <CardDescription>{apiGuide.description}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="flex items-center gap-2">
+                <Info className="h-4 w-4 text-blue-500" />
+                <p className="text-sm text-gray-700">
+                  此接口用于将外部系统收集的客户信息直接导入到存客宝的获客计划中。您需要使用API密钥进行身份验证。
+                </p>
+              </div>
+
+              <div className="rounded-md bg-amber-50 p-4 border border-amber-200">
+                <p className="text-sm text-amber-800">
+                  <strong>安全提示：</strong>{" "}
+                  请妥善保管您的API密钥，不要在客户端代码中暴露它。建议在服务器端使用该接口。
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Accordion type="single" collapsible className="mb-6">
+          {apiGuide.endpoints.map((endpoint, index) => (
+            <AccordionItem key={index} value={`endpoint-${index}`}>
+              <AccordionTrigger className="px-4 hover:bg-gray-50">
+                <div className="flex items-center">
+                  <Badge className="mr-2">{endpoint.method}</Badge>
+                  <span className="font-mono text-sm">{endpoint.url}</span>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="px-4 pt-2">
+                <div className="space-y-4">
+                  <p className="text-sm text-gray-700">{endpoint.description}</p>
+
+                  <div>
+                    <h4 className="text-sm font-medium mb-2">请求头</h4>
+                    <div className="bg-gray-50 rounded-md p-3">
+                      {endpoint.headers.map((header, i) => (
+                        <div key={i} className="flex items-start mb-2 last:mb-0">
+                          <Badge variant="outline" className="mr-2 mt-0.5 font-mono">
+                            {header.required ? "*" : ""}
+                            {header.name}
+                          </Badge>
+                          <div>
+                            <p className="text-sm">{header.value}</p>
+                            <p className="text-xs text-gray-500">{header.description}</p>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div>
+                    <h4 className="text-sm font-medium mb-2">请求参数</h4>
+                    <div className="bg-gray-50 rounded-md p-3">
+                      {endpoint.parameters.map((param, i) => (
+                        <div key={i} className="flex items-start mb-3 last:mb-0">
+                          <Badge variant="outline" className="mr-2 mt-0.5 font-mono">
+                            {param.required ? "*" : ""}
+                            {param.name}
+                          </Badge>
+                          <div>
+                            <p className="text-sm">
+                              <span className="text-gray-500 font-mono">{param.type}</span>
+                            </p>
+                            <p className="text-xs text-gray-500">{param.description}</p>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div>
+                    <h4 className="text-sm font-medium mb-2">响应示例</h4>
+                    <pre className="bg-gray-50 rounded-md p-3 text-xs overflow-auto">
+                      {JSON.stringify(endpoint.response, null, 2)}
+                    </pre>
+                  </div>
+                </div>
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>代码示例</CardTitle>
+            <CardDescription>以下是不同编程语言的接口调用示例</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs defaultValue={apiGuide.examples[0].language}>
+              <TabsList className="mb-4">
+                {apiGuide.examples.map((example) => (
+                  <TabsTrigger key={example.language} value={example.language}>
+                    {example.title}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+
+              {apiGuide.examples.map((example) => (
+                <TabsContent key={example.language} value={example.language}>
+                  <div className="relative">
+                    <pre className="bg-gray-50 p-4 rounded-md overflow-auto text-xs">{example.code}</pre>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="absolute top-2 right-2"
+                      onClick={() => copyToClipboard(example.code, example.language)}
+                    >
+                      {copiedExample === example.language ? (
+                        <Check className="h-4 w-4" />
+                      ) : (
+                        <Copy className="h-4 w-4" />
+                      )}
+                    </Button>
+                  </div>
+                </TabsContent>
+              ))}
+            </Tabs>
+          </CardContent>
+        </Card>
+
+        <div className="mt-8">
+          <h3 className="text-lg font-medium mb-4">集成指南</h3>
+
+          <Card className="mb-4">
+            <CardHeader>
+              <CardTitle className="text-base">集简云平台集成</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <ol className="list-decimal list-inside space-y-2 text-sm">
+                <li>登录集简云平台</li>
+                <li>导航至"应用集成" > "外部接口"</li>
+                <li>选择"添加新接口"，输入存客宝接口信息</li>
+                <li>配置回调参数，将"X-API-KEY"设置为您的API密钥</li>
+                <li>
+                  设置接口URL为：
+                  <code className="bg-gray-100 px-1 py-0.5 rounded">
+                    &lt;code&gt;{apiGuide.endpoints[0].url}&lt;/code&gt;
+                  </code>
+                </li>
+                <li>映射必要字段（name, phone等）</li>
+                <li>保存并启用集成</li>
+              </ol>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">问题排查</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <h4 className="text-sm font-medium mb-1">接口认证失败</h4>
+                <p className="text-sm text-gray-700">
+                  请确保X-API-KEY正确无误，此密钥区分大小写。如需重置密钥，请联系管理员。
+                </p>
+              </div>
+
+              <div>
+                <h4 className="text-sm font-medium mb-1">数据格式错误</h4>
+                <p className="text-sm text-gray-700">
+                  确保所有必填字段已提供，并且字段类型正确。特别是电话号码格式需符合标准。
+                </p>
+              </div>
+
+              <div>
+                <h4 className="text-sm font-medium mb-1">请求频率限制</h4>
+                <p className="text-sm text-gray-700">
+                  单个API密钥每分钟最多可发送30个请求，超过限制将被暂时限制。对于大批量数据，请使用批量接口。
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/api/scenarios/route.ts b/Cunkebao/app/api/scenarios/route.ts
new file mode 100644
index 00000000..f82d21d8
--- /dev/null
+++ b/Cunkebao/app/api/scenarios/route.ts
@@ -0,0 +1,74 @@
+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/Cunkebao/app/api/users/route.ts b/Cunkebao/app/api/users/route.ts
new file mode 100644
index 00000000..31046e37
--- /dev/null
+++ b/Cunkebao/app/api/users/route.ts
@@ -0,0 +1,273 @@
+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/Cunkebao/app/clientLayout.tsx b/Cunkebao/app/clientLayout.tsx
new file mode 100644
index 00000000..512d186b
--- /dev/null
+++ b/Cunkebao/app/clientLayout.tsx
@@ -0,0 +1,46 @@
+"use client"
+
+import "./globals.css"
+import BottomNav from "./components/BottomNav"
+import "regenerator-runtime/runtime"
+import type React from "react"
+import ErrorBoundary from "./components/ErrorBoundary"
+import { VideoTutorialButton } from "@/components/VideoTutorialButton"
+import { AuthProvider } from "@/app/components/AuthProvider"
+import { usePathname } from "next/navigation"
+
+// 创建一个包装组件来使用 usePathname hook
+function LayoutContent({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+
+  // 只在主页路径显示底部导航栏
+  const showBottomNav =
+    pathname === "/" || pathname === "/devices" || pathname === "/content" || pathname === "/profile"
+
+  return (
+    <main className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col relative">
+      {children}
+      {showBottomNav && <BottomNav />}
+      {showBottomNav && <VideoTutorialButton />}
+    </main>
+  )
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="zh-CN">
+      <body className="bg-gray-100">
+        <AuthProvider>
+          <ErrorBoundary>
+            <LayoutContent>{children}</LayoutContent>
+          </ErrorBoundary>
+        </AuthProvider>
+      </body>
+    </html>
+  )
+}
+
diff --git a/Cunkebao/app/components/AIRewriteModal.tsx b/Cunkebao/app/components/AIRewriteModal.tsx
new file mode 100644
index 00000000..ffec94ba
--- /dev/null
+++ b/Cunkebao/app/components/AIRewriteModal.tsx
@@ -0,0 +1,54 @@
+"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 handleRewrite = async () => {
+    // 这里应该调用 AI 改写 API
+    // 为了演示，我们只是简单地反转字符串
+    setRewrittenContent(originalContent.split("").reverse().join(""))
+  }
+
+  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">
+          <Button variant="outline" onClick={onClose}>
+            取消
+          </Button>
+          <Button onClick={handleRewrite}>开始改写</Button>
+        </div>
+      </Card>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/components/AuthProvider.tsx b/Cunkebao/app/components/AuthProvider.tsx
new file mode 100644
index 00000000..f57f4beb
--- /dev/null
+++ b/Cunkebao/app/components/AuthProvider.tsx
@@ -0,0 +1,67 @@
+"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/Cunkebao/app/components/BindDouyinQRCode.tsx b/Cunkebao/app/components/BindDouyinQRCode.tsx
new file mode 100644
index 00000000..41b56809
--- /dev/null
+++ b/Cunkebao/app/components/BindDouyinQRCode.tsx
@@ -0,0 +1,32 @@
+"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/Cunkebao/app/components/BottomNav.tsx b/Cunkebao/app/components/BottomNav.tsx
new file mode 100644
index 00000000..cc223551
--- /dev/null
+++ b/Cunkebao/app/components/BottomNav.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { Home, Users, User, Briefcase } from "lucide-react"
+
+const navItems = [
+  { href: "/", icon: Home, label: "首页" },
+  { href: "/scenarios", icon: Users, label: "场景获客" },
+  { href: "/workspace", icon: Briefcase, label: "工作台" },
+  { href: "/profile", icon: User, label: "我的" },
+]
+
+export default function BottomNav() {
+  const pathname = usePathname()
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
+      <div className="max-w-md mx-auto flex justify-around">
+        {navItems.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={`flex flex-col items-center py-2 px-3 ${
+              pathname === item.href ? "text-blue-500" : "text-gray-500"
+            }`}
+          >
+            <item.icon className="w-6 h-6" />
+            <span className="text-xs mt-1">{item.label}</span>
+          </Link>
+        ))}
+      </div>
+    </nav>
+  )
+}
+
diff --git a/Cunkebao/app/components/Charts.tsx b/Cunkebao/app/components/Charts.tsx
new file mode 100644
index 00000000..9a2ff235
--- /dev/null
+++ b/Cunkebao/app/components/Charts.tsx
@@ -0,0 +1,85 @@
+"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>
+  )
+}
+
+export function TrendChart({ data, dataKey = "value", height = 300 }) {
+  return (
+    <div className="w-full" style={{ height: `${height}px` }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <RechartsLineChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip />
+          <Line
+            type="monotone"
+            dataKey={dataKey}
+            stroke="#3b82f6"
+            strokeWidth={2}
+            dot={{ r: 4, fill: "#3b82f6" }}
+            activeDot={{ r: 6, fill: "#3b82f6" }}
+            isAnimationActive={true}
+          />
+        </RechartsLineChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/components/ChatMessage.tsx b/Cunkebao/app/components/ChatMessage.tsx
new file mode 100644
index 00000000..45b239f6
--- /dev/null
+++ b/Cunkebao/app/components/ChatMessage.tsx
@@ -0,0 +1,40 @@
+import { Avatar } from "@/components/ui/avatar"
+import { cn } from "@/lib/utils"
+
+interface ChatMessageProps {
+  content: string
+  isUser: boolean
+  timestamp: Date
+  avatar?: string
+}
+
+export function ChatMessage({ content, isUser, timestamp, avatar }: ChatMessageProps) {
+  return (
+    <div className={cn("flex w-full gap-3 p-4", isUser ? "justify-end" : "justify-start")}>
+      {!isUser && (
+        <Avatar className="h-8 w-8">
+          <div className="bg-primary text-primary-foreground flex h-full w-full items-center justify-center rounded-full text-sm font-semibold">
+            AI
+          </div>
+        </Avatar>
+      )}
+
+      <div className={cn("rounded-lg p-3 max-w-[80%]", isUser ? "bg-primary text-primary-foreground" : "bg-muted")}>
+        <p className="whitespace-pre-wrap">{content}</p>
+        <div className={cn("text-xs mt-1", isUser ? "text-primary-foreground/70" : "text-muted-foreground")}>
+          {timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+          })}
+        </div>
+      </div>
+
+      {isUser && avatar && (
+        <Avatar className="h-8 w-8">
+          <img src={avatar || "/placeholder.svg"} alt="User" className="rounded-full" />
+        </Avatar>
+      )}
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/components/CircleSync/ContentSelector.tsx b/Cunkebao/app/components/CircleSync/ContentSelector.tsx
new file mode 100644
index 00000000..76218921
--- /dev/null
+++ b/Cunkebao/app/components/CircleSync/ContentSelector.tsx
@@ -0,0 +1,106 @@
+"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/Cunkebao/app/components/CircleSync/DeviceSelector.tsx b/Cunkebao/app/components/CircleSync/DeviceSelector.tsx
new file mode 100644
index 00000000..55fa79f2
--- /dev/null
+++ b/Cunkebao/app/components/CircleSync/DeviceSelector.tsx
@@ -0,0 +1,123 @@
+"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/Cunkebao/app/components/CircleSync/TaskSetup.tsx b/Cunkebao/app/components/CircleSync/TaskSetup.tsx
new file mode 100644
index 00000000..52b959bd
--- /dev/null
+++ b/Cunkebao/app/components/CircleSync/TaskSetup.tsx
@@ -0,0 +1,101 @@
+"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/Cunkebao/app/components/DeviceSelector.tsx b/Cunkebao/app/components/DeviceSelector.tsx
new file mode 100644
index 00000000..cc876b07
--- /dev/null
+++ b/Cunkebao/app/components/DeviceSelector.tsx
@@ -0,0 +1,253 @@
+"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 { 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"
+
+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 [statusFilter, setStatusFilter] = useState("all")
+  const [currentPage, setCurrentPage] = useState(1)
+  const devicesPerPage = 10
+
+  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()
+  }, [])
+
+  const handleRefresh = () => {
+    toast({
+      title: "刷新成功",
+      description: "设备列表已更新",
+    })
+  }
+
+  const filteredDevices = devices.filter((device) => {
+    const matchesSearch =
+      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.wechatAccounts.some((account) => account.wechatId.toLowerCase().includes(searchQuery.toLowerCase()))
+    const matchesStatus = statusFilter === "all" || device.status === statusFilter
+    const matchesUsage = !excludeUsedDevices || device.usedInPlans === 0
+    return matchesSearch && matchesStatus && matchesUsage
+  })
+
+  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 className="space-y-2">
+        {paginatedDevices.map((device) => (
+          <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>
+
+      <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/Cunkebao/app/components/ErrorBoundary.tsx b/Cunkebao/app/components/ErrorBoundary.tsx
new file mode 100644
index 00000000..fec4f469
--- /dev/null
+++ b/Cunkebao/app/components/ErrorBoundary.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import React, { type ErrorInfo } from "react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean
+  error?: Error
+}
+
+class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error("Uncaught error:", error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Card className="p-6 max-w-md mx-auto mt-8">
+          <h2 className="text-2xl font-bold mb-4 text-red-600">出错了</h2>
+          <p className="text-gray-600 mb-4">抱歉，应用程序遇到了一个错误。</p>
+          <p className="text-sm text-gray-500 mb-4">{this.state.error?.message}</p>
+          <Button onClick={() => this.setState({ hasError: false })}>重试</Button>
+        </Card>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+export default ErrorBoundary
+
diff --git a/Cunkebao/app/components/FileUploader.tsx b/Cunkebao/app/components/FileUploader.tsx
new file mode 100644
index 00000000..6ef40946
--- /dev/null
+++ b/Cunkebao/app/components/FileUploader.tsx
@@ -0,0 +1,150 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Upload, X } from "lucide-react"
+import { Progress } from "@/components/ui/progress"
+
+interface FileUploaderProps {
+  onFileUploaded: (file: File) => void
+  acceptedTypes?: string
+  maxSize?: number // in MB
+}
+
+export function FileUploader({
+  onFileUploaded,
+  acceptedTypes = ".pdf,.doc,.docx,.jpg,.jpeg,.png",
+  maxSize = 10, // 10MB default
+}: FileUploaderProps) {
+  const [dragActive, setDragActive] = useState(false)
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [uploadProgress, setUploadProgress] = useState(0)
+  const [error, setError] = useState<string | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (e.type === "dragenter" || e.type === "dragover") {
+      setDragActive(true)
+    } else if (e.type === "dragleave") {
+      setDragActive(false)
+    }
+  }
+
+  const validateFile = (file: File): boolean => {
+    // 检查文件类型
+    const fileType = file.name.split(".").pop()?.toLowerCase() || ""
+    const isValidType = acceptedTypes.includes(fileType)
+
+    // 检查文件大小
+    const isValidSize = file.size <= maxSize * 1024 * 1024
+
+    if (!isValidType) {
+      setError(`不支持的文件类型。请上传 ${acceptedTypes} 格式的文件。`)
+      return false
+    }
+
+    if (!isValidSize) {
+      setError(`文件过大。最大支持 ${maxSize}MB。`)
+      return false
+    }
+
+    return true
+  }
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setDragActive(false)
+
+    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+      const file = e.dataTransfer.files[0]
+      handleFile(file)
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault()
+    if (e.target.files && e.target.files[0]) {
+      const file = e.target.files[0]
+      handleFile(file)
+    }
+  }
+
+  const handleFile = (file: File) => {
+    setError(null)
+
+    if (validateFile(file)) {
+      setSelectedFile(file)
+      simulateUpload(file)
+    }
+  }
+
+  const simulateUpload = (file: File) => {
+    // 模拟上传进度
+    setUploadProgress(0)
+    const interval = setInterval(() => {
+      setUploadProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval)
+          onFileUploaded(file)
+          return 100
+        }
+        return prev + 10
+      })
+    }, 200)
+  }
+
+  const handleButtonClick = () => {
+    inputRef.current?.click()
+  }
+
+  const cancelUpload = () => {
+    setSelectedFile(null)
+    setUploadProgress(0)
+    setError(null)
+  }
+
+  return (
+    <div className="w-full">
+      {!selectedFile ? (
+        <div
+          className={`border-2 border-dashed rounded-lg p-6 text-center ${
+            dragActive ? "border-blue-500 bg-blue-50" : "border-gray-300"
+          }`}
+          onDragEnter={handleDrag}
+          onDragLeave={handleDrag}
+          onDragOver={handleDrag}
+          onDrop={handleDrop}
+        >
+          <input ref={inputRef} type="file" className="hidden" onChange={handleChange} accept={acceptedTypes} />
+          <Upload className="mx-auto h-12 w-12 text-gray-400" />
+          <p className="mt-2 text-sm font-medium text-gray-700">拖拽文件到此处，或</p>
+          <Button variant="outline" onClick={handleButtonClick} className="mt-2">
+            选择文件
+          </Button>
+          <p className="mt-1 text-xs text-gray-500">
+            支持 {acceptedTypes.replace(/\./g, "")} 格式，最大 {maxSize}MB
+          </p>
+        </div>
+      ) : (
+        <div className="border rounded-lg p-4">
+          <div className="flex justify-between items-center mb-2">
+            <div className="font-medium truncate">{selectedFile.name}</div>
+            <Button variant="ghost" size="icon" onClick={cancelUpload} className="h-6 w-6 min-w-6">
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+          <Progress value={uploadProgress} className="h-2" />
+          <div className="text-xs text-right mt-1 text-gray-500">{uploadProgress}%</div>
+        </div>
+      )}
+
+      {error && <div className="mt-2 text-sm text-red-500">{error}</div>}
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/components/LayoutWrapper.tsx b/Cunkebao/app/components/LayoutWrapper.tsx
new file mode 100644
index 00000000..30d84d72
--- /dev/null
+++ b/Cunkebao/app/components/LayoutWrapper.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import BottomNav from "./BottomNav"
+import { VideoTutorialButton } from "@/components/VideoTutorialButton"
+import type React from "react"
+
+export default function LayoutWrapper({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname()
+
+  // 只在四个主页显示底部导航栏：首页、场景获客、工作台和我的
+  const mainPages = ["/", "/scenarios", "/workspace", "/profile"]
+  const showBottomNav = mainPages.includes(pathname)
+
+  return (
+    <main className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col relative">
+      {children}
+      {showBottomNav && <BottomNav />}
+      {showBottomNav && <VideoTutorialButton />}
+    </main>
+  )
+}
+
diff --git a/Cunkebao/app/components/SpeechToTextProcessor.tsx b/Cunkebao/app/components/SpeechToTextProcessor.tsx
new file mode 100644
index 00000000..9f76b7c9
--- /dev/null
+++ b/Cunkebao/app/components/SpeechToTextProcessor.tsx
@@ -0,0 +1,72 @@
+"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/Cunkebao/app/components/TrafficTeamSettings.tsx b/Cunkebao/app/components/TrafficTeamSettings.tsx
new file mode 100644
index 00000000..a26c3261
--- /dev/null
+++ b/Cunkebao/app/components/TrafficTeamSettings.tsx
@@ -0,0 +1,177 @@
+"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 { 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) {
+  // Initialize teams with an empty array if formData.trafficTeams is undefined
+  const [teams, setTeams] = useState<TrafficTeam[]>([])
+  const [isAddTeamOpen, setIsAddTeamOpen] = useState(false)
+  const [editingTeam, setEditingTeam] = useState<TrafficTeam | null>(null)
+  const [newTeam, setNewTeam] = useState<Partial<TrafficTeam>>({
+    name: "",
+    commission: 0,
+  })
+
+  // Initialize teams state safely
+  useEffect(() => {
+    if (formData && Array.isArray(formData.trafficTeams)) {
+      setTeams(formData.trafficTeams)
+    } else {
+      // If formData.trafficTeams is undefined or not an array, initialize with empty array
+      // Also update the parent formData to include the empty trafficTeams array
+      setTeams([])
+      onChange({ ...formData, trafficTeams: [] })
+    }
+  }, [formData])
+
+  const handleAddTeam = () => {
+    if (!newTeam.name) return
+
+    const updatedTeams = [...teams]
+
+    if (editingTeam) {
+      const index = updatedTeams.findIndex((team) => team.id === editingTeam.id)
+      if (index !== -1) {
+        updatedTeams[index] = {
+          ...updatedTeams[index],
+          name: newTeam.name || updatedTeams[index].name,
+          commission: newTeam.commission !== undefined ? newTeam.commission : updatedTeams[index].commission,
+        }
+      }
+    } else {
+      updatedTeams.push({
+        id: Date.now().toString(),
+        name: newTeam.name,
+        commission: newTeam.commission || 0,
+      })
+    }
+
+    setTeams(updatedTeams)
+    setIsAddTeamOpen(false)
+    setNewTeam({ name: "", commission: 0 })
+    setEditingTeam(null)
+
+    // Ensure we're creating a new object for formData to trigger proper updates
+    const updatedFormData = { ...(formData || {}), trafficTeams: updatedTeams }
+    onChange(updatedFormData)
+  }
+
+  const handleEditTeam = (team: TrafficTeam) => {
+    setEditingTeam(team)
+    setNewTeam(team)
+    setIsAddTeamOpen(true)
+  }
+
+  const handleDeleteTeam = (teamId: string) => {
+    const updatedTeams = teams.filter((team) => team.id !== teamId)
+    setTeams(updatedTeams)
+
+    // Ensure we're creating a new object for formData to trigger proper updates
+    const updatedFormData = { ...(formData || {}), trafficTeams: updatedTeams }
+    onChange(updatedFormData)
+  }
+
+  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/Cunkebao/app/components/VoiceRecognition.tsx b/Cunkebao/app/components/VoiceRecognition.tsx
new file mode 100644
index 00000000..013a17ee
--- /dev/null
+++ b/Cunkebao/app/components/VoiceRecognition.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+interface VoiceRecognitionProps {
+  onResult: (text: string) => void
+  onStop: () => void
+}
+
+export function VoiceRecognition({ onResult, onStop }: VoiceRecognitionProps) {
+  const [isListening, setIsListening] = useState(true)
+
+  useEffect(() => {
+    // 模拟语音识别
+    const timer = setTimeout(() => {
+      const mockResults = [
+        "你好，我想了解一下私域运营的基本策略",
+        "请帮我分析一下最近的销售数据",
+        "我需要一份客户画像分析报告",
+        "如何提高朋友圈内容的互动率？",
+        "帮我生成一个营销方案",
+      ]
+
+      const randomResult = mockResults[Math.floor(Math.random() * mockResults.length)]
+      onResult(randomResult)
+      setIsListening(false)
+    }, 2000)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [onResult])
+
+  useEffect(() => {
+    if (!isListening) {
+      onStop()
+    }
+  }, [isListening, onStop])
+
+  return (
+    <div className="fixed inset-0 bg-black/20 flex items-center justify-center z-50">
+      <div className="bg-white rounded-lg p-6 shadow-xl max-w-sm w-full">
+        <div className="flex flex-col items-center">
+          <div className="relative w-20 h-20 mb-4">
+            <div className="absolute inset-0 bg-blue-100 rounded-full animate-ping opacity-25"></div>
+            <div className="relative bg-blue-500 rounded-full w-20 h-20 flex items-center justify-center">
+              <div className="w-4 h-16 bg-white rounded-full animate-pulse"></div>
+            </div>
+          </div>
+          <h3 className="text-lg font-medium mb-2">正在聆听...</h3>
+          <p className="text-gray-500 text-center">请说出您的问题或指令，语音识别将自动结束</p>
+          <button
+            className="mt-4 px-4 py-2 bg-gray-200 rounded-md hover:bg-gray-300 transition-colors"
+            onClick={onStop}
+          >
+            取消
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/components/acquisition/AcquisitionPlanChart.tsx b/Cunkebao/app/components/acquisition/AcquisitionPlanChart.tsx
new file mode 100644
index 00000000..b354b8fb
--- /dev/null
+++ b/Cunkebao/app/components/acquisition/AcquisitionPlanChart.tsx
@@ -0,0 +1,99 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, Area, AreaChart, Legend } from "recharts"
+
+interface AcquisitionPlanChartProps {
+  data: { date: string; customers: number }[]
+}
+
+export function AcquisitionPlanChart({ data }: AcquisitionPlanChartProps) {
+  const [chartData, setChartData] = useState<any[]>([])
+
+  // 生成更真实的数据
+  useEffect(() => {
+    if (!data || data.length === 0) return
+
+    // 使用获客计划中的获客数和添加数作为指标，模拟近7天数据
+    const enhancedData = data.map((item) => {
+      // 添加数通常是获客数的一定比例，这里使用70%-90%的随机比例
+      const addRate = 0.7 + Math.random() * 0.2
+      const addedCount = Math.round(item.customers * addRate)
+
+      return {
+        date: item.date,
+        获客数: item.customers,
+        添加数: addedCount,
+      }
+    })
+
+    setChartData(enhancedData)
+  }, [data])
+
+  // 如果没有数据，显示空状态
+  if (!data || data.length === 0 || chartData.length === 0) {
+    return <div className="h-[180px] flex items-center justify-center text-gray-400">暂无数据</div>
+  }
+
+  return (
+    <div className="h-[180px]">
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart data={chartData} margin={{ top: 5, right: 5, left: 0, bottom: 5 }}>
+          <defs>
+            <linearGradient id="colorCustomers" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.8} />
+              <stop offset="95%" stopColor="#3b82f6" stopOpacity={0.1} />
+            </linearGradient>
+            <linearGradient id="colorAdded" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.8} />
+              <stop offset="95%" stopColor="#8b5cf6" stopOpacity={0.1} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#f0f0f0" />
+          <XAxis dataKey="date" axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: "#6b7280" }} />
+          <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 12, fill: "#6b7280" }} width={30} />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: "rgba(255, 255, 255, 0.9)",
+              borderRadius: "6px",
+              boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+              border: "none",
+              padding: "8px",
+            }}
+            labelStyle={{ fontWeight: "bold", marginBottom: "4px" }}
+          />
+          <Legend
+            verticalAlign="top"
+            height={36}
+            iconType="circle"
+            iconSize={8}
+            formatter={(value) => <span style={{ color: "#6b7280", fontSize: "12px" }}>{value}</span>}
+          />
+          <Area
+            type="monotone"
+            dataKey="获客数"
+            name="获客数"
+            stroke="#3b82f6"
+            fillOpacity={1}
+            fill="url(#colorCustomers)"
+            strokeWidth={2}
+            dot={{ r: 3, strokeWidth: 2 }}
+            activeDot={{ r: 5, strokeWidth: 0 }}
+          />
+          <Area
+            type="monotone"
+            dataKey="添加数"
+            name="添加数"
+            stroke="#8b5cf6"
+            fillOpacity={0.5}
+            fill="url(#colorAdded)"
+            strokeWidth={2}
+            dot={{ r: 3, strokeWidth: 2 }}
+            activeDot={{ r: 5, strokeWidth: 0 }}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/components/acquisition/DailyAcquisitionChart.tsx b/Cunkebao/app/components/acquisition/DailyAcquisitionChart.tsx
new file mode 100644
index 00000000..f1e1d26f
--- /dev/null
+++ b/Cunkebao/app/components/acquisition/DailyAcquisitionChart.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts"
+
+interface DailyAcquisitionData {
+  date: string
+  acquired: number
+  added: number
+}
+
+interface DailyAcquisitionChartProps {
+  data: DailyAcquisitionData[]
+  height?: number
+}
+
+export function DailyAcquisitionChart({ data, height = 200 }: DailyAcquisitionChartProps) {
+  return (
+    <div className="w-full" style={{ height: `${height}px` }}>
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart data={data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
+          <XAxis dataKey="date" stroke="#666" />
+          <YAxis stroke="#666" />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: "white",
+              border: "1px solid #e5e7eb",
+              borderRadius: "6px",
+            }}
+          />
+          <Legend />
+          <Line
+            type="monotone"
+            dataKey="acquired"
+            name="获客数量"
+            stroke="#3b82f6"
+            strokeWidth={2}
+            dot={{ fill: "#3b82f6" }}
+            activeDot={{ r: 6 }}
+          />
+          <Line
+            type="monotone"
+            dataKey="added"
+            name="添加成功"
+            stroke="#10b981"
+            strokeWidth={2}
+            dot={{ fill: "#10b981" }}
+            activeDot={{ r: 6 }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/components/acquisition/DeviceTreeChart.tsx b/Cunkebao/app/components/acquisition/DeviceTreeChart.tsx
new file mode 100644
index 00000000..daf48e40
--- /dev/null
+++ b/Cunkebao/app/components/acquisition/DeviceTreeChart.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid } from "recharts"
+
+// 模拟数据
+const weeklyData = [
+  { day: "周一", 获客数: 12, 添加好友: 8 },
+  { day: "周二", 获客数: 18, 添加好友: 12 },
+  { day: "周三", 获客数: 15, 添加好友: 10 },
+  { day: "周四", 获客数: 25, 添加好友: 18 },
+  { day: "周五", 获客数: 30, 添加好友: 22 },
+  { day: "周六", 获客数: 18, 添加好友: 14 },
+  { day: "周日", 获客数: 15, 添加好友: 11 },
+]
+
+const monthlyData = [
+  { day: "1月", 获客数: 120, 添加好友: 85 },
+  { day: "2月", 获客数: 180, 添加好友: 130 },
+  { day: "3月", 获客数: 150, 添加好友: 110 },
+  { day: "4月", 获客数: 250, 添加好友: 180 },
+  { day: "5月", 获客数: 300, 添加好友: 220 },
+  { day: "6月", 获客数: 280, 添加好友: 210 },
+]
+
+export function DeviceTreeChart() {
+  const [period, setPeriod] = useState("week")
+
+  const data = period === "week" ? weeklyData : monthlyData
+
+  return (
+    <Card className="w-full mt-4">
+      <CardHeader className="pb-2">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base font-medium">获客趋势</CardTitle>
+          <Tabs defaultValue="week" value={period} onValueChange={setPeriod} className="h-9">
+            <TabsList className="grid w-[180px] grid-cols-2">
+              <TabsTrigger value="week">本周</TabsTrigger>
+              <TabsTrigger value="month">本月</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={250}>
+          <LineChart data={data} margin={{ top: 5, right: 10, left: 0, bottom: 5 }}>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis dataKey="day" axisLine={false} tickLine={false} tick={{ fontSize: 12 }} />
+            <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 12 }} />
+            <Tooltip />
+            <Line
+              type="monotone"
+              dataKey="获客数"
+              stroke="#4f46e5"
+              strokeWidth={2}
+              dot={{ r: 4 }}
+              activeDot={{ r: 6 }}
+            />
+            <Line
+              type="monotone"
+              dataKey="添加好友"
+              stroke="#10b981"
+              strokeWidth={2}
+              dot={{ r: 4 }}
+              activeDot={{ r: 6 }}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  )
+}
+
diff --git a/Cunkebao/app/components/acquisition/ExpandableAcquisitionCard.tsx b/Cunkebao/app/components/acquisition/ExpandableAcquisitionCard.tsx
new file mode 100644
index 00000000..9764ee9a
--- /dev/null
+++ b/Cunkebao/app/components/acquisition/ExpandableAcquisitionCard.tsx
@@ -0,0 +1,205 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronDown, ChevronUp, MoreVertical, Copy, Pencil, Trash2, Clock, Link } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid } from "recharts"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { DailyAcquisitionChart } from "./DailyAcquisitionChart"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+
+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 }[]
+  dailyData?: { date: string; acquired: number; added: number }[]
+}
+
+interface ExpandableAcquisitionCardProps {
+  task: Task
+  channel: string
+  onCopy: (taskId: string) => void
+  onDelete: (taskId: string) => void
+  onOpenSettings?: (taskId: string) => void
+  onStatusChange?: (taskId: string, newStatus: "running" | "paused") => void
+}
+
+export function ExpandableAcquisitionCard({
+  task,
+  channel,
+  onCopy,
+  onDelete,
+  onOpenSettings,
+  onStatusChange,
+}: ExpandableAcquisitionCardProps) {
+  const router = useRouter()
+  const [expanded, setExpanded] = useState(false)
+
+  const { devices: deviceCount, acquired: acquiredCount, added: addedCount } = task.stats
+  const passRate = calculatePassRate(acquiredCount, addedCount)
+
+  const handleEdit = (taskId: string) => {
+    router.push(`/scenarios/${channel}/edit/${taskId}`)
+  }
+
+  const toggleTaskStatus = () => {
+    if (onStatusChange) {
+      onStatusChange(task.id, task.status === "running" ? "paused" : "running")
+    }
+  }
+
+  return (
+    <div className="mb-6">
+      <Card className="p-6 hover:shadow-lg transition-all 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.status === "running" ? "进行中" : "已暂停"}
+            </Badge>
+          </div>
+          <div className="relative z-20">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-gray-100 rounded-full">
+                  <MoreVertical className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuItem onClick={() => handleEdit(task.id)}>
+                  <Pencil className="w-4 h-4 mr-2" />
+                  编辑计划
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => onCopy(task.id)}>
+                  <Copy className="w-4 h-4 mr-2" />
+                  复制计划
+                </DropdownMenuItem>
+                {onOpenSettings && (
+                  <DropdownMenuItem onClick={() => onOpenSettings(task.id)}>
+                    <Link className="w-4 h-4 mr-2" />
+                    计划接口
+                  </DropdownMenuItem>
+                )}
+                <DropdownMenuItem onClick={() => onDelete(task.id)} className="text-red-600">
+                  <Trash2 className="w-4 h-4 mr-2" />
+                  删除计划
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-4 gap-2 mb-4">
+          <a 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>
+          </a>
+
+          <a 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>
+          </a>
+
+          <a 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>
+          </a>
+
+          <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.lastUpdated}</span>
+          </div>
+          <div className="flex items-center space-x-2">
+            <Clock className="w-4 h-4" />
+            <span>下次执行：{task.nextExecutionTime}</span>
+          </div>
+        </div>
+      </Card>
+
+      {expanded && task.dailyData && (
+        <div className="mt-4 bg-white p-6 rounded-lg shadow-sm">
+          <h4 className="text-lg font-medium mb-4">每日获客数据</h4>
+          <div className="h-64">
+            <DailyAcquisitionChart data={task.dailyData} />
+          </div>
+        </div>
+      )}
+
+      <div className="flex justify-center mt-2">
+        <Button variant="ghost" size="sm" onClick={() => setExpanded(!expanded)} className="text-gray-500">
+          {expanded ? (
+            <>
+              <ChevronUp className="h-4 w-4 mr-1" />
+              收起
+            </>
+          ) : (
+            <>
+              <ChevronDown className="h-4 w-4 mr-1" />
+              展开
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// 计算通过率
+function calculatePassRate(acquired: number, added: number) {
+  if (acquired === 0) return 0
+  return Math.round((added / acquired) * 100)
+}
+
diff --git a/Cunkebao/app/components/acquisition/NewAcquisitionPlanForm.tsx b/Cunkebao/app/components/acquisition/NewAcquisitionPlanForm.tsx
new file mode 100644
index 00000000..cf91166d
--- /dev/null
+++ b/Cunkebao/app/components/acquisition/NewAcquisitionPlanForm.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import type React from "react"
+
+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 { TrafficTeamSettings } from "@/app/components/TrafficTeamSettings"
+
+interface NewAcquisitionPlanFormProps {
+  onSubmit: (data: any) => void
+  onCancel: () => void
+}
+
+export function NewAcquisitionPlanForm({ onSubmit, onCancel }: NewAcquisitionPlanFormProps) {
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    trafficTeams: [], // Initialize trafficTeams as an empty array
+  })
+
+  const [currentStep, setCurrentStep] = useState(1)
+
+  const handleChange = (data: any) => {
+    setFormData(data)
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onSubmit(formData)
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      <div className="steps-container">
+        {/* 步骤指示器 */}
+        <div className="step-indicators flex justify-between mb-8">
+          {[1, 2, 3, 4].map((step) => (
+            <div
+              key={step}
+              className={`flex flex-col items-center ${currentStep >= step ? "text-primary" : "text-gray-400"}`}
+            >
+              <div
+                className={`flex items-center justify-center w-8 h-8 rounded-full mb-2 ${
+                  currentStep >= step ? "bg-primary text-white" : "bg-gray-100 text-gray-400"
+                }`}
+              >
+                {step}
+              </div>
+              <div className="text-sm font-medium">
+                {step === 1 && "基础设置"}
+                {step === 2 && "好友设置"}
+                {step === 3 && "消息设置"}
+                {step === 4 && "流量标签"}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <Card className="p-6">
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold">基本信息</h2>
+          <div className="space-y-2">
+            <Label>计划名称</Label>
+            <Input
+              placeholder="输入计划名称"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              required
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>计划描述</Label>
+            <Input
+              placeholder="输入计划描述"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+            />
+          </div>
+        </div>
+      </Card>
+
+      <TrafficTeamSettings formData={formData} onChange={handleChange} />
+
+      <div className="flex justify-end space-x-4">
+        <Button type="button" variant="outline" onClick={onCancel}>
+          取消
+        </Button>
+        <Button type="submit">创建计划</Button>
+      </div>
+    </form>
+  )
+}
+
diff --git a/Cunkebao/app/components/acquisition/ScenarioAcquisitionCard.tsx b/Cunkebao/app/components/acquisition/ScenarioAcquisitionCard.tsx
new file mode 100644
index 00000000..df5138b1
--- /dev/null
+++ b/Cunkebao/app/components/acquisition/ScenarioAcquisitionCard.tsx
@@ -0,0 +1,202 @@
+"use client"
+import { Card } from "@/components/ui/card"
+import type React from "react"
+import { useState, useRef, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { MoreHorizontal, Copy, Pencil, Trash2, Clock, Link } from "lucide-react"
+
+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 ScenarioAcquisitionCardProps {
+  task: Task
+  channel: string
+  onEdit: (taskId: string) => void
+  onCopy: (taskId: string) => void
+  onDelete: (taskId: string) => void
+  onOpenSettings?: (taskId: string) => void
+  onStatusChange?: (taskId: string, newStatus: "running" | "paused") => void
+}
+
+export function ScenarioAcquisitionCard({
+  task,
+  channel,
+  onEdit,
+  onCopy,
+  onDelete,
+  onOpenSettings,
+  onStatusChange,
+}: ScenarioAcquisitionCardProps) {
+  const { devices: deviceCount, acquired: acquiredCount, added: addedCount } = task.stats
+  const passRate = calculatePassRate(acquiredCount, addedCount)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  const handleStatusChange = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    if (onStatusChange) {
+      onStatusChange(task.id, task.status === "running" ? "paused" : "running")
+    }
+  }
+
+  const handleEdit = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setMenuOpen(false)
+    onEdit(task.id)
+  }
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setMenuOpen(false)
+    onCopy(task.id)
+  }
+
+  const handleOpenSettings = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setMenuOpen(false)
+    if (onOpenSettings) {
+      onOpenSettings(task.id)
+    }
+  }
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setMenuOpen(false)
+    onDelete(task.id)
+  }
+
+  const toggleMenu = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setMenuOpen(!menuOpen)
+  }
+
+  // 点击外部关闭菜单
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setMenuOpen(false)
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [])
+
+  return (
+    <Card className="p-6 hover:shadow-lg transition-all mb-4 bg-white/80">
+      <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={handleStatusChange}
+          >
+            {task.status === "running" ? "进行中" : "已暂停"}
+          </Badge>
+        </div>
+        <div className="relative z-20" ref={menuRef}>
+          <Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-gray-100 rounded-full" onClick={toggleMenu}>
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+
+          {menuOpen && (
+            <div className="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-50 py-1 border">
+              <button
+                className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                onClick={handleEdit}
+              >
+                <Pencil className="w-4 h-4 mr-2" />
+                编辑计划
+              </button>
+              <button
+                className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                onClick={handleCopy}
+              >
+                <Copy className="w-4 h-4 mr-2" />
+                复制计划
+              </button>
+              {onOpenSettings && (
+                <button
+                  className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                  onClick={handleOpenSettings}
+                >
+                  <Link className="w-4 h-4 mr-2" />
+                  计划接口
+                </button>
+              )}
+              <button
+                className="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
+                onClick={handleDelete}
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                删除计划
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-4 gap-2 mb-4">
+        <a href={`/scenarios/${channel}/devices`} className="block">
+          <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>
+        </a>
+
+        <a href={`/scenarios/${channel}/acquired`} className="block">
+          <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>
+        </a>
+
+        <a href={`/scenarios/${channel}/added`} className="block">
+          <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>
+        </a>
+
+        <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="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.lastUpdated}</span>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Clock className="w-4 h-4" />
+          <span>下次执行：{task.nextExecutionTime}</span>
+        </div>
+      </div>
+    </Card>
+  )
+}
+
+// 计算通过率
+function calculatePassRate(acquired: number, added: number) {
+  if (acquired === 0) return 0
+  return Math.round((added / acquired) * 100)
+}
+
diff --git a/Cunkebao/app/components/device-grid.tsx b/Cunkebao/app/components/device-grid.tsx
new file mode 100644
index 00000000..9b5a5fe8
--- /dev/null
+++ b/Cunkebao/app/components/device-grid.tsx
@@ -0,0 +1,207 @@
+"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/Cunkebao/app/components/device-selection-dialog.tsx b/Cunkebao/app/components/device-selection-dialog.tsx
new file mode 100644
index 00000000..9e434c81
--- /dev/null
+++ b/Cunkebao/app/components/device-selection-dialog.tsx
@@ -0,0 +1,341 @@
+"use client"
+
+import { useState, useEffect } 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 { Search, Filter, RefreshCw } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+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
+  tags?: string[]
+}
+
+interface DeviceSelectionDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  selectedDevices: string[]
+  onSelect: (deviceIds: string[]) => void
+  excludeUsedDevices?: boolean
+}
+
+export function DeviceSelectionDialog({
+  open,
+  onOpenChange,
+  selectedDevices,
+  onSelect,
+  excludeUsedDevices = false,
+}: DeviceSelectionDialogProps) {
+  const [devices, setDevices] = useState<Device[]>([])
+  const [loading, setLoading] = useState(false)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState("all")
+  const [tagFilter, setTagFilter] = useState("all")
+  const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([])
+  const [activeTab, setActiveTab] = useState("all")
+
+  // 初始化已选设备
+  useEffect(() => {
+    if (open) {
+      setSelectedDeviceIds(selectedDevices)
+    }
+  }, [open, selectedDevices])
+
+  // 模拟获取设备数据
+  useEffect(() => {
+    if (!open) return
+
+    const fetchDevices = async () => {
+      setLoading(true)
+      try {
+        // 模拟API请求
+        await new Promise((resolve) => setTimeout(resolve, 800))
+
+        // 生成模拟数据
+        const deviceTags = ["高性能", "稳定", "新设备", "已配置", "测试中", "备用"]
+
+        const mockDevices: Device[] = Array.from({ length: 30 }, (_, i) => {
+          // 随机生成1-3个标签
+          const tags = Array.from(
+            { length: Math.floor(Math.random() * 3) + 1 },
+            () => deviceTags[Math.floor(Math.random() * deviceTags.length)],
+          )
+
+          // 确保标签唯一
+          const uniqueTags = Array.from(new Set(tags))
+
+          return {
+            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),
+            tags: uniqueTags,
+          }
+        })
+
+        setDevices(mockDevices)
+      } catch (error) {
+        console.error("Failed to fetch devices:", error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchDevices()
+  }, [open])
+
+  // 过滤设备
+  const filteredDevices = devices.filter((device) => {
+    const matchesSearch =
+      searchQuery === "" ||
+      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.wechatAccounts.some(
+        (account) =>
+          account.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          account.nickname.toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+
+    const matchesStatus = statusFilter === "all" || device.status === statusFilter
+
+    const matchesUsage = !excludeUsedDevices || device.usedInPlans === 0
+
+    const matchesTag = tagFilter === "all" || (device.tags && device.tags.includes(tagFilter))
+
+    const matchesTab =
+      activeTab === "all" ||
+      (activeTab === "online" && device.status === "online") ||
+      (activeTab === "offline" && device.status === "offline") ||
+      (activeTab === "unused" && device.usedInPlans === 0)
+
+    return matchesSearch && matchesStatus && matchesUsage && matchesTag && matchesTab
+  })
+
+  // 处理选择设备
+  const handleSelectDevice = (deviceId: string) => {
+    setSelectedDeviceIds((prev) =>
+      prev.includes(deviceId) ? prev.filter((id) => id !== deviceId) : [...prev, deviceId],
+    )
+  }
+
+  // 处理全选
+  const handleSelectAll = () => {
+    if (selectedDeviceIds.length === filteredDevices.length) {
+      setSelectedDeviceIds([])
+    } else {
+      setSelectedDeviceIds(filteredDevices.map((device) => device.id))
+    }
+  }
+
+  // 处理确认选择
+  const handleConfirm = () => {
+    onSelect(selectedDeviceIds)
+    onOpenChange(false)
+  }
+
+  // 获取所有标签选项
+  const allTags = Array.from(new Set(devices.flatMap((device) => device.tags || [])))
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>选择设备</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden flex flex-col">
+          {/* 搜索和筛选区域 */}
+          <div className="space-y-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="搜索设备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">
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+
+            {/* 分类标签页 */}
+            <Tabs defaultValue="all" value={activeTab} onValueChange={setActiveTab}>
+              <TabsList className="grid w-full grid-cols-4">
+                <TabsTrigger value="all">全部</TabsTrigger>
+                <TabsTrigger value="online">在线</TabsTrigger>
+                <TabsTrigger value="offline">离线</TabsTrigger>
+                <TabsTrigger value="unused">未使用</TabsTrigger>
+              </TabsList>
+            </Tabs>
+
+            {/* 筛选器 */}
+            <div className="flex space-x-2">
+              <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>
+
+              {allTags.length > 0 && (
+                <Select value={tagFilter} onValueChange={setTagFilter}>
+                  <SelectTrigger className="w-[120px]">
+                    <SelectValue placeholder="标签" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">全部标签</SelectItem>
+                    {allTags.map((tag) => (
+                      <SelectItem key={tag} value={tag}>
+                        {tag}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+
+              <Button variant="outline" className="ml-auto" onClick={handleSelectAll}>
+                {selectedDeviceIds.length === filteredDevices.length && filteredDevices.length > 0
+                  ? "取消全选"
+                  : "全选"}
+              </Button>
+            </div>
+          </div>
+
+          {/* 设备列表 */}
+          <ScrollArea className="flex-1">
+            {loading ? (
+              <div className="flex items-center justify-center h-40">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+              </div>
+            ) : filteredDevices.length === 0 ? (
+              <div className="text-center py-8 text-gray-500">
+                {searchQuery || statusFilter !== "all" || tagFilter !== "all" || activeTab !== "all"
+                  ? "没有符合条件的设备"
+                  : "暂无设备数据"}
+              </div>
+            ) : (
+              <div className="space-y-2 pr-4">
+                {filteredDevices.map((device) => (
+                  <Card
+                    key={device.id}
+                    className={`p-3 hover:shadow-md transition-shadow ${
+                      selectedDeviceIds.includes(device.id) ? "border-primary" : ""
+                    }`}
+                  >
+                    <div className="flex items-center space-x-3">
+                      <Checkbox
+                        checked={selectedDeviceIds.includes(device.id)}
+                        onCheckedChange={() => handleSelectDevice(device.id)}
+                        id={`device-${device.id}`}
+                      />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center justify-between mb-1">
+                          <label htmlFor={`device-${device.id}`} className="font-medium truncate cursor-pointer">
+                            {device.name}
+                          </label>
+                          <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">
+                                <div className="flex items-center justify-between text-sm">
+                                  <span>今日可添加：{account.remainingAdds}</span>
+                                  <span className="text-sm text-gray-500">
+                                    {account.todayAdded}/{account.maxDailyAdds}
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+
+                        {/* 标签展示 */}
+                        {device.tags && device.tags.length > 0 && (
+                          <div className="flex flex-wrap gap-1 mt-2">
+                            {device.tags.map((tag) => (
+                              <Badge key={tag} variant="outline" className="text-xs">
+                                {tag}
+                              </Badge>
+                            ))}
+                          </div>
+                        )}
+
+                        {device.usedInPlans > 0 && (
+                          <div className="text-sm text-orange-500 mt-2">已用于 {device.usedInPlans} 个计划</div>
+                        )}
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            )}
+          </ScrollArea>
+        </div>
+
+        <DialogFooter className="flex items-center justify-between pt-4 border-t">
+          <div className="text-sm">
+            已选择 <span className="font-medium text-primary">{selectedDeviceIds.length}</span> 个设备
+          </div>
+          <div className="space-x-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              取消
+            </Button>
+            <Button onClick={handleConfirm}>确认</Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
diff --git a/Cunkebao/app/components/poster-selector.tsx b/Cunkebao/app/components/poster-selector.tsx
new file mode 100644
index 00000000..a9584970
--- /dev/null
+++ b/Cunkebao/app/components/poster-selector.tsx
@@ -0,0 +1,85 @@
+"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/Cunkebao/app/components/traffic-pool-selector.tsx b/Cunkebao/app/components/traffic-pool-selector.tsx
new file mode 100644
index 00000000..5b63e7a6
--- /dev/null
+++ b/Cunkebao/app/components/traffic-pool-selector.tsx
@@ -0,0 +1,324 @@
+"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, Filter } from "lucide-react"
+import { Checkbox } from "@/components/ui/checkbox"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+interface UserTag {
+  id: string
+  name: string
+  color: string
+}
+
+interface TrafficUser {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  phone: string
+  region: string
+  note: string
+  status: "pending" | "added" | "failed"
+  addTime: string
+  source: string
+  assignedTo: string
+  category: "potential" | "customer" | "lost"
+  tags: UserTag[]
+}
+
+interface TrafficPoolSelectorProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  selectedUsers: TrafficUser[]
+  onSelect: (users: TrafficUser[]) => void
+}
+
+export function TrafficPoolSelector({ open, onOpenChange, selectedUsers, onSelect }: TrafficPoolSelectorProps) {
+  const [users, setUsers] = useState<TrafficUser[]>([])
+  const [loading, setLoading] = useState(false)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [activeCategory, setActiveCategory] = useState("all")
+  const [sourceFilter, setSourceFilter] = useState("all")
+  const [tagFilter, setTagFilter] = useState("all")
+  const [selectedUserIds, setSelectedUserIds] = useState<string[]>([])
+
+  // 初始化已选用户
+  useEffect(() => {
+    if (open) {
+      setSelectedUserIds(selectedUsers.map((user) => user.id))
+    }
+  }, [open, selectedUsers])
+
+  // 模拟获取用户数据
+  useEffect(() => {
+    if (!open) return
+
+    const fetchUsers = async () => {
+      setLoading(true)
+      try {
+        // 模拟API请求
+        await new Promise((resolve) => setTimeout(resolve, 800))
+
+        // 生成模拟数据
+        const mockUsers: TrafficUser[] = Array.from({ length: 30 }, (_, i) => {
+          // 随机标签
+          const tagPool = [
+            { id: "tag1", name: "潜在客户", color: "bg-blue-100 text-blue-800" },
+            { id: "tag2", name: "高意向", color: "bg-green-100 text-green-800" },
+            { id: "tag3", name: "已成交", color: "bg-purple-100 text-purple-800" },
+            { id: "tag4", name: "需跟进", color: "bg-yellow-100 text-yellow-800" },
+            { id: "tag5", name: "活跃用户", color: "bg-indigo-100 text-indigo-800" },
+            { id: "tag6", name: "沉默用户", color: "bg-gray-100 text-gray-800" },
+            { id: "tag7", name: "企业客户", color: "bg-red-100 text-red-800" },
+            { id: "tag8", name: "个人用户", color: "bg-pink-100 text-pink-800" },
+          ]
+
+          const randomTags = Array.from(
+            { length: Math.floor(Math.random() * 3) + 1 },
+            () => tagPool[Math.floor(Math.random() * tagPool.length)],
+          )
+
+          // 确保标签唯一
+          const uniqueTags = randomTags.filter((tag, index, self) => index === self.findIndex((t) => t.id === tag.id))
+
+          const sources = ["抖音直播", "小红书", "微信朋友圈", "视频号", "公众号"]
+          const statuses = ["pending", "added", "failed"] as const
+
+          return {
+            id: `user-${i + 1}`,
+            avatar: `/placeholder.svg?height=40&width=40`,
+            nickname: `用户${i + 1}`,
+            wechatId: `wxid_${Math.random().toString(36).substring(2, 10)}`,
+            phone: `1${Math.floor(Math.random() * 9 + 1)}${Array(9)
+              .fill(0)
+              .map(() => Math.floor(Math.random() * 10))
+              .join("")}`,
+            region: ["北京", "上海", "广州", "深圳", "杭州"][Math.floor(Math.random() * 5)],
+            note: Math.random() > 0.7 ? `这是用户${i + 1}的备注信息` : "",
+            status: statuses[Math.floor(Math.random() * 3)],
+            addTime: new Date(Date.now() - Math.floor(Math.random() * 30) * 24 * 60 * 60 * 1000).toISOString(),
+            source: sources[Math.floor(Math.random() * sources.length)],
+            assignedTo: Math.random() > 0.5 ? `销售${Math.floor(Math.random() * 5) + 1}` : "",
+            category: ["potential", "customer", "lost"][Math.floor(Math.random() * 3)] as
+              | "potential"
+              | "customer"
+              | "lost",
+            tags: uniqueTags,
+          }
+        })
+
+        setUsers(mockUsers)
+      } catch (error) {
+        console.error("Failed to fetch users:", error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchUsers()
+  }, [open])
+
+  // 过滤用户
+  const filteredUsers = users.filter((user) => {
+    const matchesSearch =
+      searchQuery === "" ||
+      user.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.phone.includes(searchQuery)
+
+    const matchesCategory = activeCategory === "all" || user.category === activeCategory
+
+    const matchesSource = sourceFilter === "all" || user.source === sourceFilter
+
+    const matchesTag = tagFilter === "all" || user.tags.some((tag) => tag.id === tagFilter)
+
+    return matchesSearch && matchesCategory && matchesSource && matchesTag
+  })
+
+  // 处理选择用户
+  const handleSelectUser = (userId: string) => {
+    setSelectedUserIds((prev) => (prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId]))
+  }
+
+  // 处理全选
+  const handleSelectAll = () => {
+    if (selectedUserIds.length === filteredUsers.length) {
+      setSelectedUserIds([])
+    } else {
+      setSelectedUserIds(filteredUsers.map((user) => user.id))
+    }
+  }
+
+  // 处理确认选择
+  const handleConfirm = () => {
+    const selectedUsersList = users.filter((user) => selectedUserIds.includes(user.id))
+    onSelect(selectedUsersList)
+    onOpenChange(false)
+  }
+
+  // 获取所有标签选项
+  const allTags = Array.from(new Set(users.flatMap((user) => user.tags).map((tag) => JSON.stringify(tag)))).map(
+    (tag) => JSON.parse(tag) as UserTag,
+  )
+
+  // 获取所有来源选项
+  const allSources = Array.from(new Set(users.map((user) => user.source)))
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>选择流量池用户</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-hidden flex flex-col">
+          {/* 搜索和筛选区域 */}
+          <div className="space-y-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="搜索用户名/微信号/手机号"
+                  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>
+
+            {/* 分类标签页 */}
+            <Tabs defaultValue="all" value={activeCategory} onValueChange={setActiveCategory}>
+              <TabsList className="grid w-full grid-cols-4">
+                <TabsTrigger value="all">全部</TabsTrigger>
+                <TabsTrigger value="potential">潜在客户</TabsTrigger>
+                <TabsTrigger value="customer">已转化</TabsTrigger>
+                <TabsTrigger value="lost">已流失</TabsTrigger>
+              </TabsList>
+            </Tabs>
+
+            {/* 筛选器 */}
+            <div className="flex space-x-2">
+              <Select value={sourceFilter} onValueChange={setSourceFilter}>
+                <SelectTrigger className="w-[140px]">
+                  <SelectValue placeholder="来源" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部来源</SelectItem>
+                  {allSources.map((source) => (
+                    <SelectItem key={source} value={source}>
+                      {source}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              <Select value={tagFilter} onValueChange={setTagFilter}>
+                <SelectTrigger className="w-[140px]">
+                  <SelectValue placeholder="标签" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部标签</SelectItem>
+                  {allTags.map((tag) => (
+                    <SelectItem key={tag.id} value={tag.id}>
+                      {tag.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+
+              <Button variant="outline" className="ml-auto" onClick={handleSelectAll}>
+                {selectedUserIds.length === filteredUsers.length && filteredUsers.length > 0 ? "取消全选" : "全选"}
+              </Button>
+            </div>
+          </div>
+
+          {/* 用户列表 */}
+          <ScrollArea className="flex-1">
+            {loading ? (
+              <div className="flex items-center justify-center h-40">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+              </div>
+            ) : filteredUsers.length === 0 ? (
+              <div className="text-center py-8 text-gray-500">
+                {searchQuery || activeCategory !== "all" || sourceFilter !== "all" || tagFilter !== "all"
+                  ? "没有符合条件的用户"
+                  : "暂无用户数据"}
+              </div>
+            ) : (
+              <div className="space-y-2 pr-4">
+                {filteredUsers.map((user) => (
+                  <Card
+                    key={user.id}
+                    className={`p-3 hover:shadow-md transition-shadow ${
+                      selectedUserIds.includes(user.id) ? "border-primary" : ""
+                    }`}
+                  >
+                    <div className="flex items-center space-x-3">
+                      <Checkbox
+                        checked={selectedUserIds.includes(user.id)}
+                        onCheckedChange={() => handleSelectUser(user.id)}
+                        id={`user-${user.id}`}
+                      />
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center justify-between mb-1">
+                          <label htmlFor={`user-${user.id}`} className="font-medium truncate cursor-pointer">
+                            {user.nickname}
+                          </label>
+                          <div
+                            className={`px-2 py-1 rounded-full text-xs ${
+                              user.status === "added"
+                                ? "bg-green-100 text-green-800"
+                                : user.status === "pending"
+                                  ? "bg-yellow-100 text-yellow-800"
+                                  : "bg-red-100 text-red-800"
+                            }`}
+                          >
+                            {user.status === "added" ? "已添加" : user.status === "pending" ? "待处理" : "已失败"}
+                          </div>
+                        </div>
+                        <div className="text-sm text-gray-500">微信号: {user.wechatId}</div>
+                        <div className="text-sm text-gray-500">来源: {user.source}</div>
+
+                        {/* 标签展示 */}
+                        <div className="flex flex-wrap gap-1 mt-2">
+                          {user.tags.map((tag) => (
+                            <span key={tag.id} className={`text-xs px-2 py-0.5 rounded-full ${tag.color}`}>
+                              {tag.name}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </Card>
+                ))}
+              </div>
+            )}
+          </ScrollArea>
+        </div>
+
+        <DialogFooter className="flex items-center justify-between pt-4 border-t">
+          <div className="text-sm">
+            已选择 <span className="font-medium text-primary">{selectedUserIds.length}</span> 个用户
+          </div>
+          <div className="space-x-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              取消
+            </Button>
+            <Button onClick={handleConfirm}>确认</Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
diff --git a/Cunkebao/app/components/ui/accordion.tsx b/Cunkebao/app/components/ui/accordion.tsx
new file mode 100644
index 00000000..9ab24898
--- /dev/null
+++ b/Cunkebao/app/components/ui/accordion.tsx
@@ -0,0 +1,57 @@
+"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/Cunkebao/app/components/ui/avatar.tsx b/Cunkebao/app/components/ui/avatar.tsx
new file mode 100644
index 00000000..78f22e31
--- /dev/null
+++ b/Cunkebao/app/components/ui/avatar.tsx
@@ -0,0 +1,41 @@
+"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/Cunkebao/app/components/ui/badge.tsx b/Cunkebao/app/components/ui/badge.tsx
new file mode 100644
index 00000000..1e46550d
--- /dev/null
+++ b/Cunkebao/app/components/ui/badge.tsx
@@ -0,0 +1,30 @@
+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/Cunkebao/app/components/ui/button.tsx b/Cunkebao/app/components/ui/button.tsx
new file mode 100644
index 00000000..43591d59
--- /dev/null
+++ b/Cunkebao/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-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, 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/Cunkebao/app/components/ui/calendar.tsx b/Cunkebao/app/components/ui/calendar.tsx
new file mode 100644
index 00000000..82c36f25
--- /dev/null
+++ b/Cunkebao/app/components/ui/calendar.tsx
@@ -0,0 +1,55 @@
+"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/Cunkebao/app/components/ui/card.tsx b/Cunkebao/app/components/ui/card.tsx
new file mode 100644
index 00000000..0906be54
--- /dev/null
+++ b/Cunkebao/app/components/ui/card.tsx
@@ -0,0 +1,44 @@
+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/Cunkebao/app/components/ui/checkbox.tsx b/Cunkebao/app/components/ui/checkbox.tsx
new file mode 100644
index 00000000..29b66aac
--- /dev/null
+++ b/Cunkebao/app/components/ui/checkbox.tsx
@@ -0,0 +1,29 @@
+"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/Cunkebao/app/components/ui/collapsible.tsx b/Cunkebao/app/components/ui/collapsible.tsx
new file mode 100644
index 00000000..ef6b9f9b
--- /dev/null
+++ b/Cunkebao/app/components/ui/collapsible.tsx
@@ -0,0 +1,12 @@
+"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/Cunkebao/app/components/ui/dialog.tsx b/Cunkebao/app/components/ui/dialog.tsx
new file mode 100644
index 00000000..f17698be
--- /dev/null
+++ b/Cunkebao/app/components/ui/dialog.tsx
@@ -0,0 +1,98 @@
+"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/Cunkebao/app/components/ui/dropdown-menu.tsx b/Cunkebao/app/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..12b3500f
--- /dev/null
+++ b/Cunkebao/app/components/ui/dropdown-menu.tsx
@@ -0,0 +1,182 @@
+"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/Cunkebao/app/components/ui/input.tsx b/Cunkebao/app/components/ui/input.tsx
new file mode 100644
index 00000000..79a855f9
--- /dev/null
+++ b/Cunkebao/app/components/ui/input.tsx
@@ -0,0 +1,23 @@
+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/Cunkebao/app/components/ui/label.tsx b/Cunkebao/app/components/ui/label.tsx
new file mode 100644
index 00000000..3d3ee5b1
--- /dev/null
+++ b/Cunkebao/app/components/ui/label.tsx
@@ -0,0 +1,20 @@
+"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/Cunkebao/app/components/ui/pagination.tsx b/Cunkebao/app/components/ui/pagination.tsx
new file mode 100644
index 00000000..26324aea
--- /dev/null
+++ b/Cunkebao/app/components/ui/pagination.tsx
@@ -0,0 +1,82 @@
+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/Cunkebao/app/components/ui/popover.tsx b/Cunkebao/app/components/ui/popover.tsx
new file mode 100644
index 00000000..520d852e
--- /dev/null
+++ b/Cunkebao/app/components/ui/popover.tsx
@@ -0,0 +1,7 @@
+"use client"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger
+
diff --git a/Cunkebao/app/components/ui/preview-dialog.tsx b/Cunkebao/app/components/ui/preview-dialog.tsx
new file mode 100644
index 00000000..01842c3f
--- /dev/null
+++ b/Cunkebao/app/components/ui/preview-dialog.tsx
@@ -0,0 +1,35 @@
+"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/Cunkebao/app/components/ui/progress.tsx b/Cunkebao/app/components/ui/progress.tsx
new file mode 100644
index 00000000..36aeedd4
--- /dev/null
+++ b/Cunkebao/app/components/ui/progress.tsx
@@ -0,0 +1,26 @@
+"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/Cunkebao/app/components/ui/radio-group.tsx b/Cunkebao/app/components/ui/radio-group.tsx
new file mode 100644
index 00000000..20a61bff
--- /dev/null
+++ b/Cunkebao/app/components/ui/radio-group.tsx
@@ -0,0 +1,39 @@
+"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/Cunkebao/app/components/ui/scroll-area.tsx b/Cunkebao/app/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..f33e797d
--- /dev/null
+++ b/Cunkebao/app/components/ui/scroll-area.tsx
@@ -0,0 +1,41 @@
+"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/Cunkebao/app/components/ui/select.tsx b/Cunkebao/app/components/ui/select.tsx
new file mode 100644
index 00000000..d8e60d27
--- /dev/null
+++ b/Cunkebao/app/components/ui/select.tsx
@@ -0,0 +1,104 @@
+"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/Cunkebao/app/components/ui/skeleton.tsx b/Cunkebao/app/components/ui/skeleton.tsx
new file mode 100644
index 00000000..2cce2998
--- /dev/null
+++ b/Cunkebao/app/components/ui/skeleton.tsx
@@ -0,0 +1,9 @@
+import type React from "react"
+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/Cunkebao/app/components/ui/steps.tsx b/Cunkebao/app/components/ui/steps.tsx
new file mode 100644
index 00000000..17dbeec6
--- /dev/null
+++ b/Cunkebao/app/components/ui/steps.tsx
@@ -0,0 +1,68 @@
+import React from "react"
+import { cn } from "@/app/lib/utils"
+
+interface StepsProps {
+  currentStep: number
+  className?: string
+  children: React.ReactNode
+}
+
+interface StepProps {
+  title: string
+  description?: string
+}
+
+export function Steps({ currentStep, className, children }: StepsProps) {
+  const steps = React.Children.toArray(children)
+
+  return (
+    <div className={cn("flex items-center", className)}>
+      {steps.map((step, index) => {
+        const isActive = index === currentStep
+        const isCompleted = index < currentStep
+
+        return (
+          <React.Fragment key={index}>
+            <div className="flex items-center">
+              <div
+                className={cn(
+                  "flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium",
+                  isActive && "bg-blue-500 text-white",
+                  isCompleted && "bg-green-500 text-white",
+                  !isActive && !isCompleted && "bg-gray-200 text-gray-500",
+                )}
+              >
+                {isCompleted ? (
+                  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                ) : (
+                  index + 1
+                )}
+              </div>
+              <div className="ml-3">{step}</div>
+            </div>
+
+            {index < steps.length - 1 && (
+              <div className={cn("flex-1 h-0.5 mx-4", index < currentStep ? "bg-green-500" : "bg-gray-200")} />
+            )}
+          </React.Fragment>
+        )
+      })}
+    </div>
+  )
+}
+
+export function Step({ title, description }: StepProps) {
+  return (
+    <div>
+      <div className="text-sm font-medium">{title}</div>
+      {description && <div className="text-xs text-gray-500">{description}</div>}
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/components/ui/switch.tsx b/Cunkebao/app/components/ui/switch.tsx
new file mode 100644
index 00000000..65958eac
--- /dev/null
+++ b/Cunkebao/app/components/ui/switch.tsx
@@ -0,0 +1,30 @@
+"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/Cunkebao/app/components/ui/table.tsx b/Cunkebao/app/components/ui/table.tsx
new file mode 100644
index 00000000..32355b3f
--- /dev/null
+++ b/Cunkebao/app/components/ui/table.tsx
@@ -0,0 +1,73 @@
+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/Cunkebao/app/components/ui/tabs.tsx b/Cunkebao/app/components/ui/tabs.tsx
new file mode 100644
index 00000000..aa3cc276
--- /dev/null
+++ b/Cunkebao/app/components/ui/tabs.tsx
@@ -0,0 +1,56 @@
+"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/Cunkebao/app/components/ui/textarea.tsx b/Cunkebao/app/components/ui/textarea.tsx
new file mode 100644
index 00000000..56aa44e6
--- /dev/null
+++ b/Cunkebao/app/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+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/Cunkebao/app/components/ui/toast.tsx b/Cunkebao/app/components/ui/toast.tsx
new file mode 100644
index 00000000..c7219b36
--- /dev/null
+++ b/Cunkebao/app/components/ui/toast.tsx
@@ -0,0 +1,112 @@
+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/Cunkebao/app/components/ui/tooltip.tsx b/Cunkebao/app/components/ui/tooltip.tsx
new file mode 100644
index 00000000..821f897f
--- /dev/null
+++ b/Cunkebao/app/components/ui/tooltip.tsx
@@ -0,0 +1,108 @@
+"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/Cunkebao/app/components/ui/use-toast.ts b/Cunkebao/app/components/ui/use-toast.ts
new file mode 100644
index 00000000..6cef1d25
--- /dev/null
+++ b/Cunkebao/app/components/ui/use-toast.ts
@@ -0,0 +1,187 @@
+"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/Cunkebao/app/content/[id]/materials/new/page.tsx b/Cunkebao/app/content/[id]/materials/new/page.tsx
new file mode 100644
index 00000000..fe1dfeb5
--- /dev/null
+++ b/Cunkebao/app/content/[id]/materials/new/page.tsx
@@ -0,0 +1,131 @@
+"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/Cunkebao/app/content/[id]/materials/page.tsx b/Cunkebao/app/content/[id]/materials/page.tsx
new file mode 100644
index 00000000..14a7c3f7
--- /dev/null
+++ b/Cunkebao/app/content/[id]/materials/page.tsx
@@ -0,0 +1,185 @@
+"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"
+
+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)
+
+  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 handleDownload = () => {
+    // 实现下载功能
+    toast({
+      title: "下载开始",
+      description: "正在将素材导出为Excel格式",
+    })
+  }
+
+  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())),
+  )
+
+  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>
+          <div className="flex items-center space-x-2">
+            <Button variant="outline" onClick={handleDownload}>
+              <Download className="h-4 w-4 mr-2" />
+              下载Excel
+            </Button>
+            <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">
+                    <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>
+              ))}
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/content/[id]/page.tsx b/Cunkebao/app/content/[id]/page.tsx
new file mode 100644
index 00000000..c1f89378
--- /dev/null
+++ b/Cunkebao/app/content/[id]/page.tsx
@@ -0,0 +1,290 @@
+"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/Cunkebao/app/content/new/device-selector.tsx b/Cunkebao/app/content/new/device-selector.tsx
new file mode 100644
index 00000000..0fd079a0
--- /dev/null
+++ b/Cunkebao/app/content/new/device-selector.tsx
@@ -0,0 +1,117 @@
+"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/Cunkebao/app/content/new/page.tsx b/Cunkebao/app/content/new/page.tsx
new file mode 100644
index 00000000..4ecf13c4
--- /dev/null
+++ b/Cunkebao/app/content/new/page.tsx
@@ -0,0 +1,274 @@
+"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/Cunkebao/app/content/page.tsx b/Cunkebao/app/content/page.tsx
new file mode 100644
index 00000000..84fb3d75
--- /dev/null
+++ b/Cunkebao/app/content/page.tsx
@@ -0,0 +1,214 @@
+"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/Cunkebao/app/devices/[id]/page.tsx b/Cunkebao/app/devices/[id]/page.tsx
new file mode 100644
index 00000000..e6249fb6
--- /dev/null
+++ b/Cunkebao/app/devices/[id]/page.tsx
@@ -0,0 +1,283 @@
+"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/Cunkebao/app/devices/page.tsx b/Cunkebao/app/devices/page.tsx
new file mode 100644
index 00000000..dae8cee3
--- /dev/null
+++ b/Cunkebao/app/devices/page.tsx
@@ -0,0 +1,284 @@
+"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, Plus, Filter, Search, RefreshCw, QrCode } 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 { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+
+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"
+  avatar?: string
+}
+
+export default function DevicesPage() {
+  const router = useRouter()
+  const [devices, setDevices] = useState<Device[]>([])
+  const [isAddDeviceOpen, setIsAddDeviceOpen] = useState(false)
+  const [stats, setStats] = useState({
+    totalDevices: 42,
+    onlineDevices: 35,
+  })
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState("all")
+  const [currentPage, setCurrentPage] = useState(1)
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+  const devicesPerPage = 10
+
+  useEffect(() => {
+    // 模拟API调用
+    const fetchDevices = async () => {
+      const mockDevices = Array.from({ length: 42 }, (_, i) => ({
+        id: `device-${i + 1}`,
+        imei: `sd${123123 + i}`,
+        name: `设备 ${i + 1}`,
+        remark: `备注 ${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",
+        avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-kYhfQsrrByfbzefv6MEV7W7ogz0IRt.png",
+      }))
+      setDevices(mockDevices)
+    }
+
+    fetchDevices()
+  }, [])
+
+  const handleRefresh = () => {
+    toast({
+      title: "刷新成功",
+      description: "设备列表已更新",
+    })
+  }
+
+  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)
+
+  const handleBatchDelete = () => {
+    if (selectedDevices.length === 0) {
+      toast({
+        title: "请选择设备",
+        description: "您需要选择至少一个设备来执行批量删除操作",
+        variant: "destructive",
+      })
+      return
+    }
+    toast({
+      title: "批量删除成功",
+      description: `已删除 ${selectedDevices.length} 个设备`,
+    })
+    setSelectedDevices([])
+  }
+
+  const handleDeviceClick = (deviceId: string) => {
+    router.push(`/devices/${deviceId}`)
+  }
+
+  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 className="bg-blue-600 hover:bg-blue-700" onClick={() => setIsAddDeviceOpen(true)}>
+            <Plus className="h-4 w-4 mr-2" />
+            添加设备
+          </Button>
+        </div>
+      </header>
+
+      <div className="p-4 space-y-4">
+        <div className="grid grid-cols-2 gap-3">
+          <Card className="p-3">
+            <div className="text-sm text-gray-500">总设备数</div>
+            <div className="text-xl font-bold text-blue-600">{stats.totalDevices}</div>
+          </Card>
+          <Card className="p-3">
+            <div className="text-sm text-gray-500">在线设备</div>
+            <div className="text-xl font-bold text-green-600">{stats.onlineDevices}</div>
+          </Card>
+        </div>
+
+        <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 className="flex items-center space-x-2">
+                  <Checkbox
+                    checked={selectedDevices.length === paginatedDevices.length}
+                    onCheckedChange={(checked) => {
+                      if (checked) {
+                        setSelectedDevices(paginatedDevices.map((d) => d.id))
+                      } else {
+                        setSelectedDevices([])
+                      }
+                    }}
+                  />
+                  <span className="text-sm text-gray-500">全选</span>
+                </div>
+              </div>
+              <Button
+                variant="destructive"
+                size="sm"
+                onClick={handleBatchDelete}
+                disabled={selectedDevices.length === 0}
+              >
+                删除
+              </Button>
+            </div>
+
+            <div className="space-y-2">
+              {paginatedDevices.map((device) => (
+                <Card
+                  key={device.id}
+                  className="p-3 hover:shadow-md transition-shadow cursor-pointer relative"
+                  onClick={() => handleDeviceClick(device.id)}
+                >
+                  <div className="flex items-center space-x-3">
+                    <Checkbox
+                      checked={selectedDevices.includes(device.id)}
+                      onCheckedChange={(checked) => {
+                        if (checked) {
+                          setSelectedDevices([...selectedDevices, device.id])
+                        } else {
+                          setSelectedDevices(selectedDevices.filter((id) => id !== device.id))
+                        }
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                    <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"} className="ml-2">
+                          {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>
+
+            <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>
+
+      <Dialog open={isAddDeviceOpen} onOpenChange={setIsAddDeviceOpen}>
+        <DialogContent className="sm:max-w-[390px]">
+          <DialogHeader>
+            <DialogTitle>添加设备</DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-col items-center justify-center p-6 space-y-6">
+            <div className="w-48 h-48 bg-gray-100 rounded-lg flex items-center justify-center">
+              <QrCode className="w-12 h-12 text-gray-400" />
+            </div>
+            <p className="text-sm text-gray-500 text-center">
+              请使用设备扫描二维码进行添加
+              <br />
+              或手动输入设备ID
+            </p>
+            <Input placeholder="请输入设备ID" className="max-w-[280px]" />
+            <div className="flex space-x-2">
+              <Button variant="outline" onClick={() => setIsAddDeviceOpen(false)}>
+                取消
+              </Button>
+              <Button>确认添加</Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/globals.css b/Cunkebao/app/globals.css
new file mode 100644
index 00000000..93c2e5e8
--- /dev/null
+++ b/Cunkebao/app/globals.css
@@ -0,0 +1,60 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 224 71.4% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 224 71.4% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 224 71.4% 4.1%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 220 14.3% 95.9%;
+    --secondary-foreground: 220.9 39.3% 11%;
+    --muted: 220 14.3% 95.9%;
+    --muted-foreground: 220 8.9% 46.1%;
+    --accent: 220 14.3% 95.9%;
+    --accent-foreground: 220.9 39.3% 11%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.75rem;
+  }
+
+  .dark {
+    --background: 224 71.4% 4.1%;
+    --foreground: 210 40% 98%;
+    --card: 224 71.4% 4.1%;
+    --card-foreground: 210 40% 98%;
+    --popover: 224 71.4% 4.1%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 215 27.9% 16.9%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 215 27.9% 16.9%;
+    --muted-foreground: 217.9 10.6% 64.9%;
+    --accent: 215 27.9% 16.9%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --ring: 224 71.4% 4.1%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
diff --git a/Cunkebao/app/hooks/useDeviceStatusPolling.ts b/Cunkebao/app/hooks/useDeviceStatusPolling.ts
new file mode 100644
index 00000000..8863e592
--- /dev/null
+++ b/Cunkebao/app/hooks/useDeviceStatusPolling.ts
@@ -0,0 +1,47 @@
+"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/Cunkebao/app/layout.tsx b/Cunkebao/app/layout.tsx
new file mode 100644
index 00000000..33c55a52
--- /dev/null
+++ b/Cunkebao/app/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next"
+import "./globals.css"
+import "regenerator-runtime/runtime"
+import type React from "react"
+import ErrorBoundary from "./components/ErrorBoundary"
+import { AuthProvider } from "@/app/components/AuthProvider"
+import LayoutWrapper from "./components/LayoutWrapper"
+
+export const metadata: Metadata = {
+  title: "存客宝",
+  description: "智能客户管理系统",
+    generator: 'v0.dev'
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="zh-CN">
+      <body className="bg-gray-100">
+        <AuthProvider>
+          <ErrorBoundary>
+            <LayoutWrapper>{children}</LayoutWrapper>
+          </ErrorBoundary>
+        </AuthProvider>
+      </body>
+    </html>
+  )
+}
+
+
+
+import './globals.css'
\ No newline at end of file
diff --git a/Cunkebao/app/lib/utils.ts b/Cunkebao/app/lib/utils.ts
new file mode 100644
index 00000000..bd0b3ae6
--- /dev/null
+++ b/Cunkebao/app/lib/utils.ts
@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
diff --git a/Cunkebao/app/login/page.tsx b/Cunkebao/app/login/page.tsx
new file mode 100644
index 00000000..f316c8f8
--- /dev/null
+++ b/Cunkebao/app/login/page.tsx
@@ -0,0 +1,356 @@
+"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/Cunkebao/app/orders/submit/[planId]/page.tsx b/Cunkebao/app/orders/submit/[planId]/page.tsx
new file mode 100644
index 00000000..34f64f28
--- /dev/null
+++ b/Cunkebao/app/orders/submit/[planId]/page.tsx
@@ -0,0 +1,152 @@
+"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/Cunkebao/app/page.tsx b/Cunkebao/app/page.tsx
new file mode 100644
index 00000000..a14c56be
--- /dev/null
+++ b/Cunkebao/app/page.tsx
@@ -0,0 +1,238 @@
+"use client"
+
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Bell, Smartphone, Users, Activity } from "lucide-react"
+import { Progress } from "@/components/ui/progress"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { useState, useEffect, useRef } from "react"
+
+// 导入Chart.js
+import { Chart, registerables } from "chart.js"
+Chart.register(...registerables)
+
+export default function Home() {
+  const router = useRouter()
+  const chartRef = useRef(null)
+  const chartInstance = useRef(null)
+
+  // 统一设备数据
+  const [stats, setStats] = useState({
+    totalDevices: 42,
+    onlineDevices: 35,
+    totalWechatAccounts: 42,
+    onlineWechatAccounts: 35,
+  })
+
+  useEffect(() => {
+    // 模拟API调用
+    const fetchStats = async () => {
+      // 这里应该是实际的API调用
+      const mockStats = {
+        totalDevices: 42,
+        onlineDevices: 35,
+        totalWechatAccounts: 42,
+        onlineWechatAccounts: 35,
+      }
+      setStats(mockStats)
+    }
+    fetchStats()
+  }, [])
+
+  // 使用Chart.js创建图表
+  useEffect(() => {
+    if (chartRef.current) {
+      // 如果已经有图表实例，先销毁它
+      if (chartInstance.current) {
+        chartInstance.current.destroy()
+      }
+
+      const ctx = chartRef.current.getContext("2d")
+
+      // 创建新的图表实例
+      chartInstance.current = new Chart(ctx, {
+        type: "line",
+        data: {
+          labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
+          datasets: [
+            {
+              label: "获客数量",
+              data: [120, 150, 180, 200, 230, 210, 190],
+              backgroundColor: "rgba(59, 130, 246, 0.2)",
+              borderColor: "rgba(59, 130, 246, 1)",
+              borderWidth: 2,
+              tension: 0.3,
+              pointRadius: 4,
+              pointBackgroundColor: "rgba(59, 130, 246, 1)",
+              pointHoverRadius: 6,
+            },
+          ],
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false,
+            },
+            tooltip: {
+              backgroundColor: "rgba(255, 255, 255, 0.9)",
+              titleColor: "#333",
+              bodyColor: "#666",
+              borderColor: "#ddd",
+              borderWidth: 1,
+              padding: 10,
+              displayColors: false,
+              callbacks: {
+                label: (context) => `获客数量: ${context.parsed.y}`,
+              },
+            },
+          },
+          scales: {
+            x: {
+              grid: {
+                display: false,
+              },
+            },
+            y: {
+              beginAtZero: true,
+              grid: {
+                color: "rgba(0, 0, 0, 0.05)",
+              },
+            },
+          },
+        },
+      })
+    }
+
+    // 组件卸载时清理图表实例
+    return () => {
+      if (chartInstance.current) {
+        chartInstance.current.destroy()
+      }
+    }
+  }, [])
+
+  const handleDevicesClick = () => {
+    router.push("/devices")
+  }
+
+  const handleWechatClick = () => {
+    router.push("/wechat-accounts")
+  }
+
+  const scenarioFeatures = [
+    {
+      id: "douyin",
+      name: "抖音获客",
+      icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QR8ManuDplYTySUJsY4mymiZkDYnQ9.png",
+      color: "bg-blue-100 text-blue-600",
+      value: 156,
+      growth: 12,
+    },
+    {
+      id: "xiaohongshu",
+      name: "小红书获客",
+      icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-yvnMxpoBUzcvEkr8DfvHgPHEo1kmQ3.png",
+      color: "bg-red-100 text-red-600",
+      value: 89,
+      growth: 8,
+    },
+    {
+      id: "gongzhonghao",
+      name: "公众号获客",
+      icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Gsg0CMf5tsZb41mioszdjqU1WmsRxW.png",
+      color: "bg-green-100 text-green-600",
+      value: 234,
+      growth: 15,
+    },
+    {
+      id: "haibao",
+      name: "海报获客",
+      icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x92XJgXy4MI7moNYlA1EAes2FqDxMH.png",
+      color: "bg-orange-100 text-orange-600",
+      value: 167,
+      growth: 10,
+    },
+  ]
+
+  return (
+    <div className="flex-1 overflow-y-auto pb-16 bg-gray-50">
+      <header className="sticky top-0 z-10 bg-white border-b">
+        <div className="flex justify-between items-center p-4">
+          <h1 className="text-xl font-semibold text-blue-600">存客宝</h1>
+          <Button variant="ghost" size="icon">
+            <Bell className="h-5 w-5" />
+          </Button>
+        </div>
+      </header>
+
+      <div className="p-4 space-y-6">
+        <div className="grid grid-cols-3 gap-4">
+          <Card className="p-4 bg-white hover:shadow-lg transition-all cursor-pointer" onClick={handleDevicesClick}>
+            <div className="flex flex-col">
+              <span className="text-sm text-gray-500 mb-2">设备数量</span>
+              <div className="flex items-center justify-between">
+                <span className="text-2xl font-bold text-blue-600">{stats.totalDevices}</span>
+                <Smartphone className="w-6 h-6 text-blue-600" />
+              </div>
+            </div>
+          </Card>
+          <Card className="p-4 bg-white hover:shadow-lg transition-all cursor-pointer" onClick={handleWechatClick}>
+            <div className="flex flex-col">
+              <span className="text-sm text-gray-500 mb-2">微信号数量</span>
+              <div className="flex items-center justify-between">
+                <span className="text-2xl font-bold text-blue-600">{stats.totalWechatAccounts}</span>
+                <Users className="w-6 h-6 text-blue-600" />
+              </div>
+            </div>
+          </Card>
+          <Card className="p-4 bg-white">
+            <div className="flex flex-col">
+              <span className="text-sm text-gray-500 mb-2">在线微信号</span>
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-2xl font-bold text-blue-600">{stats.onlineWechatAccounts}</span>
+                <Activity className="w-6 h-6 text-blue-600" />
+              </div>
+              <Progress value={(stats.onlineWechatAccounts / stats.totalWechatAccounts) * 100} className="h-1" />
+            </div>
+          </Card>
+        </div>
+
+        {/* 场景获客统计 */}
+        <Card className="p-4 bg-white">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-lg font-semibold">场景获客统计</h2>
+          </div>
+          <div className="flex justify-between">
+            {scenarioFeatures
+              .sort((a, b) => b.value - a.value)
+              .map((scenario) => (
+                <Link href={`/scenarios/${scenario.id}`} key={scenario.id} className="block flex-1">
+                  <div className="flex flex-col items-center text-center space-y-2">
+                    <div className={`w-12 h-12 rounded-full ${scenario.color} flex items-center justify-center`}>
+                      <img src={scenario.icon || "/placeholder.svg"} alt={scenario.name} className="w-6 h-6" />
+                    </div>
+                    <div className="text-sm font-medium">{scenario.value}</div>
+                    <div className="text-xs text-gray-500 whitespace-nowrap overflow-hidden text-ellipsis w-full">
+                      {scenario.name}
+                    </div>
+                  </div>
+                </Link>
+              ))}
+          </div>
+        </Card>
+
+        {/* 每日获客趋势 - 使用Canvas和Chart.js */}
+        <Card className="p-4 bg-white">
+          <h2 className="text-lg font-semibold mb-4">每日获客趋势</h2>
+          <div className="w-full h-64 relative">
+            <canvas ref={chartRef} />
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/plans/new/loading.tsx b/Cunkebao/app/plans/new/loading.tsx
new file mode 100644
index 00000000..cec067bd
--- /dev/null
+++ b/Cunkebao/app/plans/new/loading.tsx
@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+
diff --git a/Cunkebao/app/plans/new/page.tsx b/Cunkebao/app/plans/new/page.tsx
new file mode 100644
index 00000000..99f4cf8c
--- /dev/null
+++ b/Cunkebao/app/plans/new/page.tsx
@@ -0,0 +1,289 @@
+"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 || "",
+    teams: [], // 添加 teams 字段
+  })
+
+  // 如果是从微信号好友转移过来，自动设置计划名称
+  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])
+
+  // 根据URL参数设置场景类型
+  useEffect(() => {
+    if (type && type !== "order" && !formData.scenario) {
+      const validScenarios = [
+        "douyin",
+        "kuaishou",
+        "xiaohongshu",
+        "weibo",
+        "haibao",
+        "phone",
+        "weixinqun",
+        "gongzhonghao",
+      ]
+      if (validScenarios.includes(type)) {
+        const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "")
+        setFormData((prev) => ({
+          ...prev,
+          scenario: type,
+          planName: `${type === "phone" ? "电话获客" : type}${today}`,
+        }))
+      }
+    }
+  }, [type, formData.scenario])
+
+  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()) {
+          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="bg-white border-b border-gray-200">
+            <div className="px-4 py-4">
+              <div className="flex justify-between">
+                {steps.map((step) => (
+                  <div key={step.id} className="flex flex-col items-center">
+                    <div
+                      className={`rounded-full h-8 w-8 flex items-center justify-center ${
+                        currentStep >= step.id ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                      }`}
+                    >
+                      {step.id}
+                    </div>
+                    <div className="text-xs font-medium mt-2 text-center">{step.subtitle}</div>
+                  </div>
+                ))}
+              </div>
+              <div className="flex justify-between mt-1 px-4">
+                {steps.slice(0, steps.length - 1).map((step, index) => (
+                  <div
+                    key={`line-${step.id}`}
+                    className={`h-1 w-full ${currentStep > step.id ? "bg-blue-600" : "bg-gray-200"}`}
+                    style={{
+                      width: `${100 / (steps.length - 1)}%`,
+                      marginLeft: index === 0 ? "10px" : "0",
+                      marginRight: index === steps.length - 2 ? "10px" : "0",
+                    }}
+                  ></div>
+                ))}
+              </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/Cunkebao/app/plans/new/steps/BasicSettings.tsx b/Cunkebao/app/plans/new/steps/BasicSettings.tsx
new file mode 100644
index 00000000..7a3b25e7
--- /dev/null
+++ b/Cunkebao/app/plans/new/steps/BasicSettings.tsx
@@ -0,0 +1,713 @@
+"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, Settings } 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,
+  DialogDescription,
+} from "@/components/ui/dialog"
+
+// 调整场景顺序，确保API获客在最后，并且前三个是最常用的场景
+const scenarios = [
+  { id: "haibao", name: "海报获客", type: "material" },
+  { id: "order", name: "订单获客", type: "api" },
+  { id: "douyin", name: "抖音获客", type: "social" },
+  { id: "xiaohongshu", name: "小红书获客", type: "social" },
+  { id: "phone", name: "电话获客", type: "social" },
+  { id: "gongzhonghao", name: "公众号获客", type: "social" },
+  { id: "weixinqun", name: "微信群获客", type: "social" },
+  { id: "payment", name: "付款码获客", type: "material" },
+  { id: "api", name: "API获客", type: "api" }, // 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 [isPhoneSettingsOpen, setIsPhoneSettingsOpen] = 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 || [])
+
+  // 初始化电话获客设置
+  const [phoneSettings, setPhoneSettings] = useState({
+    autoAdd: formData.phoneSettings?.autoAdd ?? true,
+    speechToText: formData.phoneSettings?.speechToText ?? true,
+    questionExtraction: formData.phoneSettings?.questionExtraction ?? true,
+  })
+
+  // 初始化时，如果没有选择场景，默认选择海报获客
+  useEffect(() => {
+    if (!formData.scenario) {
+      onChange({ ...formData, scenario: "haibao" })
+    }
+
+    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 })
+
+    // 如果选择了电话获客，自动更新计划名称
+    if (scenarioId === "phone") {
+      const today = new Date().toLocaleDateString("zh-CN").replace(/\//g, "")
+      onChange({ ...formData, planName: `电话获客${today}` })
+    }
+  }
+
+  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)
+  }
+
+  // 处理电话获客设置更新
+  const handlePhoneSettingsUpdate = () => {
+    onChange({ ...formData, phoneSettings })
+    setIsPhoneSettingsOpen(false)
+  }
+
+  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.replace("获客", "")}
+                </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>
+              )}
+
+              {/* 电话获客特殊设置 */}
+              {formData.scenario === "phone" && (
+                <Card className="p-4 border-blue-100 bg-blue-50/50 mt-4">
+                  <div className="flex items-center justify-between mb-3">
+                    <Label className="text-base font-medium text-blue-700">电话获客设置</Label>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setIsPhoneSettingsOpen(true)}
+                      className="flex items-center gap-1 bg-white border-blue-200 text-blue-700 hover:bg-blue-100"
+                    >
+                      <Settings className="h-3.5 w-3.5" />
+                      修改设置
+                    </Button>
+                  </div>
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                    <div className="flex items-center justify-between bg-white p-3 rounded-lg border border-blue-100 shadow-sm">
+                      <div className="flex items-center">
+                        <div
+                          className={`w-3 h-3 rounded-full mr-2 ${phoneSettings.autoAdd ? "bg-green-500" : "bg-gray-300"}`}
+                        ></div>
+                        <span>自动添加客户</span>
+                      </div>
+                      <div
+                        className={`px-2 py-0.5 rounded-full text-xs ${phoneSettings.autoAdd ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700"}`}
+                      >
+                        {phoneSettings.autoAdd ? "已开启" : "已关闭"}
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between bg-white p-3 rounded-lg border border-blue-100 shadow-sm">
+                      <div className="flex items-center">
+                        <div
+                          className={`w-3 h-3 rounded-full mr-2 ${phoneSettings.speechToText ? "bg-green-500" : "bg-gray-300"}`}
+                        ></div>
+                        <span>语音转文字</span>
+                      </div>
+                      <div
+                        className={`px-2 py-0.5 rounded-full text-xs ${phoneSettings.speechToText ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700"}`}
+                      >
+                        {phoneSettings.speechToText ? "已开启" : "已关闭"}
+                      </div>
+                    </div>
+                    <div className="flex items-center justify-between bg-white p-3 rounded-lg border border-blue-100 shadow-sm">
+                      <div className="flex items-center">
+                        <div
+                          className={`w-3 h-3 rounded-full mr-2 ${phoneSettings.questionExtraction ? "bg-green-500" : "bg-gray-300"}`}
+                        ></div>
+                        <span>问题提取</span>
+                      </div>
+                      <div
+                        className={`px-2 py-0.5 rounded-full text-xs ${phoneSettings.questionExtraction ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-700"}`}
+                      >
+                        {phoneSettings.questionExtraction ? "已开启" : "已关闭"}
+                      </div>
+                    </div>
+                  </div>
+                  <p className="text-xs text-blue-600 mt-2">
+                    提示：电话获客功能将自动记录来电信息，并根据设置执行相应操作
+                  </p>
+                </Card>
+              )}
+
+              {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>
+      </Card>
+
+      {/* 账号选择对话框 */}
+      <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={isPhoneSettingsOpen} onOpenChange={setIsPhoneSettingsOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>电话获客设置</DialogTitle>
+            <DialogDescription>配置电话获客的自动化功能，提高获客效率</DialogDescription>
+          </DialogHeader>
+          <div className="py-4 space-y-6">
+            <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
+              <div className="space-y-1">
+                <Label htmlFor="auto-add" className="font-medium">
+                  自动添加客户
+                </Label>
+                <p className="text-sm text-gray-500">来电后自动将客户添加为微信好友</p>
+                <p className="text-xs text-blue-600">推荐：开启此功能可提高转化率约30%</p>
+              </div>
+              <Switch
+                id="auto-add"
+                checked={phoneSettings.autoAdd}
+                onCheckedChange={(checked) => setPhoneSettings({ ...phoneSettings, autoAdd: checked })}
+                className="data-[state=checked]:bg-blue-600"
+              />
+            </div>
+
+            <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
+              <div className="space-y-1">
+                <Label htmlFor="speech-to-text" className="font-medium">
+                  语音转文字
+                </Label>
+                <p className="text-sm text-gray-500">自动将通话内容转换为文字记录</p>
+                <p className="text-xs text-blue-600">支持普通话、粤语等多种方言识别</p>
+              </div>
+              <Switch
+                id="speech-to-text"
+                checked={phoneSettings.speechToText}
+                onCheckedChange={(checked) => setPhoneSettings({ ...phoneSettings, speechToText: checked })}
+                className="data-[state=checked]:bg-blue-600"
+              />
+            </div>
+
+            <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors">
+              <div className="space-y-1">
+                <Label htmlFor="question-extraction" className="font-medium">
+                  问题提取
+                </Label>
+                <p className="text-sm text-gray-500">自动从通话中提取客户的首句问题</p>
+                <p className="text-xs text-blue-600">AI智能识别客户意图，提高回复精准度</p>
+              </div>
+              <Switch
+                id="question-extraction"
+                checked={phoneSettings.questionExtraction}
+                onCheckedChange={(checked) => setPhoneSettings({ ...phoneSettings, questionExtraction: checked })}
+                className="data-[state=checked]:bg-blue-600"
+              />
+            </div>
+          </div>
+          <DialogFooter className="flex space-x-2 pt-2">
+            <Button variant="outline" onClick={() => setIsPhoneSettingsOpen(false)} className="flex-1">
+              取消
+            </Button>
+            <Button onClick={handlePhoneSettingsUpdate} className="flex-1 bg-blue-600 hover:bg-blue-700">
+              保存设置
+            </Button>
+          </DialogFooter>
+        </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>
+    </TooltipProvider>
+  )
+}
+
diff --git a/Cunkebao/app/plans/new/steps/FriendRequestSettings.tsx b/Cunkebao/app/plans/new/steps/FriendRequestSettings.tsx
new file mode 100644
index 00000000..763f725b
--- /dev/null
+++ b/Cunkebao/app/plans/new/steps/FriendRequestSettings.tsx
@@ -0,0 +1,278 @@
+"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 { HelpCircle, MessageSquare, AlertCircle } 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"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { ChevronsUpDown } from "lucide-react"
+import { Checkbox } from "@/components/ui/checkbox"
+
+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: "来源" },
+]
+
+// 模拟设备数据
+const mockDevices = [
+  { id: "1", name: "iPhone 13 Pro", status: "online" },
+  { id: "2", name: "Xiaomi 12", status: "online" },
+  { id: "3", name: "Huawei P40", status: "offline" },
+  { id: "4", name: "OPPO Find X3", status: "online" },
+  { id: "5", name: "Samsung S21", status: "online" },
+]
+
+export function FriendRequestSettings({ formData, onChange, onNext, onPrev }: FriendRequestSettingsProps) {
+  const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false)
+  const [hasWarnings, setHasWarnings] = useState(false)
+  const [isDeviceSelectorOpen, setIsDeviceSelectorOpen] = useState(false)
+  const [selectedDevices, setSelectedDevices] = useState<any[]>(formData.selectedDevices || [])
+
+  // 获取场景标题
+  const getScenarioTitle = () => {
+    switch (formData.scenario) {
+      case "douyin":
+        return "抖音直播"
+      case "xiaohongshu":
+        return "小红书"
+      case "weixinqun":
+        return "微信群"
+      case "gongzhonghao":
+        return "公众号"
+      default:
+        return formData.planName || "获客计划"
+    }
+  }
+
+  // 使用useEffect设置默认值
+  useEffect(() => {
+    if (!formData.greeting) {
+      onChange({
+        ...formData,
+        greeting: "你好，请通过",
+        remarkType: "phone", // 默认选择手机号
+        remarkFormat: `手机号+${getScenarioTitle()}`, // 默认备注格式
+        addFriendInterval: 1,
+      })
+    }
+  }, [formData, formData.greeting, onChange])
+
+  // 检查是否有未完成的必填项
+  useEffect(() => {
+    const hasIncompleteFields = !formData.greeting?.trim()
+    setHasWarnings(hasIncompleteFields)
+  }, [formData])
+
+  const handleTemplateSelect = (template: string) => {
+    onChange({ ...formData, greeting: template })
+    setIsTemplateDialogOpen(false)
+  }
+
+  const handleNext = () => {
+    // 即使有警告也允许进入下一步，但会显示提示
+    onNext()
+  }
+
+  const toggleDeviceSelection = (device: any) => {
+    const isSelected = selectedDevices.some((d) => d.id === device.id)
+    let newSelectedDevices
+
+    if (isSelected) {
+      newSelectedDevices = selectedDevices.filter((d) => d.id !== device.id)
+    } else {
+      newSelectedDevices = [...selectedDevices, device]
+    }
+
+    setSelectedDevices(newSelectedDevices)
+    onChange({ ...formData, selectedDevices: newSelectedDevices })
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-6">
+        <div>
+          <Label className="text-base">选择设备</Label>
+          <div className="relative mt-2">
+            <Button
+              variant="outline"
+              className="w-full justify-between"
+              onClick={() => setIsDeviceSelectorOpen(!isDeviceSelectorOpen)}
+            >
+              {selectedDevices.length ? `已选择 ${selectedDevices.length} 个设备` : "选择设备"}
+              <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            </Button>
+
+            {isDeviceSelectorOpen && (
+              <div className="absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg">
+                <div className="p-2">
+                  <Input placeholder="搜索设备..." className="mb-2" />
+                  <div className="max-h-60 overflow-auto">
+                    {mockDevices.map((device) => (
+                      <div
+                        key={device.id}
+                        className="flex items-center justify-between p-2 hover:bg-gray-100 cursor-pointer"
+                        onClick={() => toggleDeviceSelection(device)}
+                      >
+                        <div className="flex items-center space-x-2">
+                          <Checkbox
+                            checked={selectedDevices.some((d) => d.id === device.id)}
+                            onCheckedChange={() => toggleDeviceSelection(device)}
+                          />
+                          <span>{device.name}</span>
+                        </div>
+                        <span className={`text-xs ${device.status === "online" ? "text-green-500" : "text-gray-400"}`}>
+                          {device.status === "online" ? "在线" : "离线"}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </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>
+                  <p className="mt-1">备注格式预览：</p>
+                  <p>{formData.remarkType === "phone" && `138****1234+${getScenarioTitle()}`}</p>
+                  <p>{formData.remarkType === "nickname" && `小红书用户2851+${getScenarioTitle()}`}</p>
+                  <p>{formData.remarkType === "source" && `抖音直播+${getScenarioTitle()}`}</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>
+        </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>
+          <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>
+
+        {hasWarnings && (
+          <Alert variant="warning" className="bg-amber-50 border-amber-200">
+            <AlertCircle className="h-4 w-4 text-amber-500" />
+            <AlertDescription>您有未完成的设置项，建议完善后再进入下一步。</AlertDescription>
+          </Alert>
+        )}
+
+        <div className="flex justify-between pt-4">
+          <Button variant="outline" onClick={onPrev}>
+            上一步
+          </Button>
+          <Button onClick={handleNext}>下一步</Button>
+        </div>
+      </div>
+
+      <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/Cunkebao/app/plans/new/steps/MessageSettings.tsx b/Cunkebao/app/plans/new/steps/MessageSettings.tsx
new file mode 100644
index 00000000..5a5f50b8
--- /dev/null
+++ b/Cunkebao/app/plans/new/steps/MessageSettings.tsx
@@ -0,0 +1,555 @@
+"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,
+  Clock,
+} from "lucide-react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+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"
+  scheduledTime?: {
+    hour: number
+    minute: number
+    second: number
+  }
+  title?: string
+  description?: string
+  address?: string
+  coverImage?: string
+  groupId?: string
+  linkUrl?: 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]
+    const newMessage: MessageContent = {
+      id: Date.now().toString(),
+      type: type as MessageContent["type"],
+      content: "",
+    }
+
+    if (dayPlans[dayIndex].day === 0) {
+      // 即时消息使用间隔设置
+      newMessage.sendInterval = 5
+      newMessage.intervalUnit = "minutes"
+    } else {
+      // 非即时消息使用具体时间设置
+      newMessage.scheduledTime = {
+        hour: 9,
+        minute: 0,
+        second: 0,
+      }
+    }
+
+    updatedPlans[dayIndex].messages.push(newMessage)
+    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 toggleIntervalUnit = (dayIndex: number, messageIndex: number) => {
+    const message = dayPlans[dayIndex].messages[messageIndex]
+    const newUnit = message.intervalUnit === "minutes" ? "seconds" : "minutes"
+    handleUpdateMessage(dayIndex, messageIndex, { intervalUnit: newUnit })
+  }
+
+  // 添加新的天数计划
+  const handleAddDayPlan = () => {
+    const newDay = dayPlans.length
+    setDayPlans([
+      ...dayPlans,
+      {
+        day: newDay,
+        messages: [
+          {
+            id: Date.now().toString(),
+            type: "text",
+            content: "",
+            scheduledTime: {
+              hour: 9,
+              minute: 0,
+              second: 0,
+            },
+          },
+        ],
+      },
+    ])
+    setIsAddDayPlanOpen(false)
+    toast({
+      title: "添加成功",
+      description: `已添加第${newDay}天的消息计划`,
+    })
+  }
+
+  // 选择群组
+  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">
+                        {plan.day === 0 ? (
+                          <>
+                            <Label>间隔</Label>
+                            <Input
+                              type="number"
+                              value={message.sendInterval}
+                              onChange={(e) =>
+                                handleUpdateMessage(dayIndex, messageIndex, { sendInterval: Number(e.target.value) })
+                              }
+                              className="w-20"
+                            />
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => toggleIntervalUnit(dayIndex, messageIndex)}
+                              className="flex items-center space-x-1"
+                            >
+                              <Clock className="h-3 w-3" />
+                              <span>{message.intervalUnit === "minutes" ? "分钟" : "秒"}</span>
+                            </Button>
+                          </>
+                        ) : (
+                          <>
+                            <Label>发送时间</Label>
+                            <div className="flex items-center space-x-1">
+                              <Input
+                                type="number"
+                                min="0"
+                                max="23"
+                                value={message.scheduledTime?.hour || 0}
+                                onChange={(e) =>
+                                  handleUpdateMessage(dayIndex, messageIndex, {
+                                    scheduledTime: {
+                                      ...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
+                                      hour: Number(e.target.value),
+                                    },
+                                  })
+                                }
+                                className="w-16"
+                              />
+                              <span>:</span>
+                              <Input
+                                type="number"
+                                min="0"
+                                max="59"
+                                value={message.scheduledTime?.minute || 0}
+                                onChange={(e) =>
+                                  handleUpdateMessage(dayIndex, messageIndex, {
+                                    scheduledTime: {
+                                      ...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
+                                      minute: Number(e.target.value),
+                                    },
+                                  })
+                                }
+                                className="w-16"
+                              />
+                              <span>:</span>
+                              <Input
+                                type="number"
+                                min="0"
+                                max="59"
+                                value={message.scheduledTime?.second || 0}
+                                onChange={(e) =>
+                                  handleUpdateMessage(dayIndex, messageIndex, {
+                                    scheduledTime: {
+                                      ...(message.scheduledTime || { hour: 0, minute: 0, second: 0 }),
+                                      second: Number(e.target.value),
+                                    },
+                                  })
+                                }
+                                className="w-16"
+                              />
+                            </div>
+                          </>
+                        )}
+                      </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 === "link" && (
+                      <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.linkUrl}
+                            onChange={(e) => handleUpdateMessage(dayIndex, messageIndex, { linkUrl: 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/Cunkebao/app/plans/new/steps/TagSettings.tsx b/Cunkebao/app/plans/new/steps/TagSettings.tsx
new file mode 100644
index 00000000..e02294a9
--- /dev/null
+++ b/Cunkebao/app/plans/new/steps/TagSettings.tsx
@@ -0,0 +1,205 @@
+"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 { Textarea } from "@/components/ui/textarea"
+import { Badge } from "@/components/ui/badge"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Plus, X, Edit2, AlertCircle } from "lucide-react"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+
+interface TagSettingsProps {
+  formData: any
+  onChange: (data: any) => void
+  onNext?: () => void
+  onPrev?: () => void
+}
+
+interface Tag {
+  id: string
+  name: string
+  keywords: string[]
+}
+
+export function TagSettings({ formData, onChange, onNext, onPrev }: TagSettingsProps) {
+  const [tags, setTags] = useState<Tag[]>(formData.tags || [])
+  const [isAddTagDialogOpen, setIsAddTagDialogOpen] = useState(false)
+  const [editingTag, setEditingTag] = useState<Tag | null>(null)
+  const [newTagName, setNewTagName] = useState("")
+  const [newTagKeywords, setNewTagKeywords] = useState("")
+  const [hasWarnings, setHasWarnings] = useState(false)
+
+  // 当标签更新时，更新formData
+  useEffect(() => {
+    onChange({ ...formData, tags })
+  }, [tags, onChange, formData])
+
+  // 检查是否有标签
+  useEffect(() => {
+    setHasWarnings(tags.length === 0)
+  }, [tags])
+
+  const handleAddTag = () => {
+    if (!newTagName.trim()) return
+
+    const keywordsArray = newTagKeywords
+      .split("\n")
+      .map((k) => k.trim())
+      .filter((k) => k !== "")
+
+    if (editingTag) {
+      // 编辑现有标签
+      setTags(
+        tags.map((tag) => (tag.id === editingTag.id ? { ...tag, name: newTagName, keywords: keywordsArray } : tag)),
+      )
+    } else {
+      // 添加新标签
+      setTags([
+        ...tags,
+        {
+          id: Date.now().toString(),
+          name: newTagName,
+          keywords: keywordsArray,
+        },
+      ])
+    }
+
+    // 重置表单
+    setNewTagName("")
+    setNewTagKeywords("")
+    setEditingTag(null)
+    setIsAddTagDialogOpen(false)
+  }
+
+  const handleEditTag = (tag: Tag) => {
+    setEditingTag(tag)
+    setNewTagName(tag.name)
+    setNewTagKeywords(tag.keywords.join("\n"))
+    setIsAddTagDialogOpen(true)
+  }
+
+  const handleDeleteTag = (tagId: string) => {
+    setTags(tags.filter((tag) => tag.id !== tagId))
+  }
+
+  const handleNext = () => {
+    // 确保onNext是一个函数
+    if (typeof onNext === "function") {
+      onNext()
+    }
+  }
+
+  const handlePrev = () => {
+    // 确保onPrev是一个函数
+    if (typeof onPrev === "function") {
+      onPrev()
+    }
+  }
+
+  const handleCancel = () => {
+    setNewTagName("")
+    setNewTagKeywords("")
+    setEditingTag(null)
+    setIsAddTagDialogOpen(false)
+  }
+
+  return (
+    <Card className="p-6">
+      <div className="space-y-6">
+        <div>
+          <div className="flex items-center justify-between mb-4">
+            <Label className="text-base font-medium">标签列表</Label>
+            <Button onClick={() => setIsAddTagDialogOpen(true)} size="sm">
+              <Plus className="h-4 w-4 mr-1" /> 添加标签
+            </Button>
+          </div>
+
+          {tags.length === 0 ? (
+            <div className="border rounded-md p-8 text-center text-gray-500">
+              暂无标签，点击"添加标签"按钮来创建标签
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {tags.map((tag) => (
+                <div key={tag.id} className="border rounded-md p-3 flex justify-between items-center">
+                  <div>
+                    <Badge className="mb-2">{tag.name}</Badge>
+                    <div className="text-sm text-gray-500">
+                      {tag.keywords.length > 0 ? `关键词: ${tag.keywords.join(", ")}` : "无关键词"}
+                    </div>
+                  </div>
+                  <div className="flex space-x-2">
+                    <Button variant="ghost" size="sm" onClick={() => handleEditTag(tag)}>
+                      <Edit2 className="h-4 w-4" />
+                    </Button>
+                    <Button variant="ghost" size="sm" onClick={() => handleDeleteTag(tag.id)}>
+                      <X className="h-4 w-4" />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+
+          {hasWarnings && (
+            <Alert variant="warning" className="mt-4 bg-amber-50 border-amber-200">
+              <AlertCircle className="h-4 w-4 text-amber-500" />
+              <AlertDescription>建议添加至少一个标签，以便更好地管理客户。</AlertDescription>
+            </Alert>
+          )}
+        </div>
+
+        <div className="flex justify-between pt-4">
+          <Button variant="outline" onClick={handlePrev}>
+            上一步
+          </Button>
+          <Button onClick={handleNext}>下一步</Button>
+        </div>
+      </div>
+
+      <Dialog open={isAddTagDialogOpen} onOpenChange={setIsAddTagDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{editingTag ? "编辑标签" : "添加标签"}</DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-4 py-2">
+            <div className="bg-green-50 p-3 rounded-md text-sm text-green-700">
+              设置关键字后，当评论/私信有涉及到关键字时自动添加标签
+            </div>
+
+            <div className="space-y-2">
+              <Input
+                placeholder="请输入标签名称(最长6位字符)"
+                value={newTagName}
+                onChange={(e) => setNewTagName(e.target.value.slice(0, 6))}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Textarea
+                placeholder="(非必填项) 请输入关键词，一行代表一个关键词"
+                rows={5}
+                value={newTagKeywords}
+                onChange={(e) => setNewTagKeywords(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="sm:justify-end">
+            <Button type="button" variant="outline" onClick={handleCancel}>
+              取消
+            </Button>
+            <Button type="button" onClick={handleAddTag}>
+              确定
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  )
+}
+
diff --git a/Cunkebao/app/profile/page.tsx b/Cunkebao/app/profile/page.tsx
new file mode 100644
index 00000000..360210b1
--- /dev/null
+++ b/Cunkebao/app/profile/page.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronRight, Settings, Bell, LogOut } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { useRouter } from "next/navigation"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+
+const menuItems = [
+  { href: "/devices", label: "设备管理" },
+  { href: "/wechat-accounts", label: "微信号管理" },
+  { href: "/traffic-pool", label: "流量池" },
+  { href: "/content", label: "内容库" },
+]
+
+export default function ProfilePage() {
+  const router = useRouter()
+  const [isAuthenticated, setIsAuthenticated] = useState(true) // 模拟认证状态
+  const [showLogoutDialog, setShowLogoutDialog] = useState(false)
+  const [accountId] = useState(() => Math.floor(10000000 + Math.random() * 90000000).toString())
+
+  const handleLogout = () => {
+    setIsAuthenticated(false)
+    setShowLogoutDialog(false)
+    router.push("/login")
+  }
+
+  if (!isAuthenticated) {
+    router.push("/login")
+    return null
+  }
+
+  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 className="flex items-center space-x-2">
+            <Button variant="ghost" size="icon">
+              <Settings className="w-5 h-5" />
+            </Button>
+            <Button variant="ghost" size="icon">
+              <Bell className="w-5 h-5" />
+            </Button>
+          </div>
+        </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>KR</AvatarFallback>
+            </Avatar>
+            <div className="flex-1">
+              <h2 className="text-xl font-semibold text-blue-600">卡若</h2>
+              <p className="text-gray-500">账号: {accountId}</p>
+              <div className="mt-2">
+                <Button variant="outline" size="sm">
+                  编辑资料
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* 功能菜单 */}
+        <Card className="divide-y">
+          {menuItems.map((item) => (
+            <div
+              key={item.href || item.label}
+              className="p-4 flex items-center justify-between cursor-pointer hover:bg-gray-50"
+              onClick={() => (item.href ? router.push(item.href) : null)}
+            >
+              <div className="flex items-center">
+                {item.icon && <span className="mr-2">{item.icon}</span>}
+                <span>{item.label}</span>
+              </div>
+              <ChevronRight className="w-5 h-5 text-gray-400" />
+            </div>
+          ))}
+        </Card>
+
+        {/* 退出登录按钮 */}
+        <Button
+          variant="ghost"
+          className="w-full text-red-500 hover:text-red-600 hover:bg-red-50 mt-6"
+          onClick={() => setShowLogoutDialog(true)}
+        >
+          <LogOut className="w-5 h-5 mr-2" />
+          退出登录
+        </Button>
+      </div>
+
+      {/* 退出登录确认对话框 */}
+      <Dialog open={showLogoutDialog} onOpenChange={setShowLogoutDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>确认退出登录</DialogTitle>
+            <DialogDescription>您确定要退出登录吗？退出后需要重新登录才能使用完整功能。</DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-end space-x-2 mt-4">
+            <Button variant="outline" onClick={() => setShowLogoutDialog(false)}>
+              取消
+            </Button>
+            <Button variant="destructive" onClick={handleLogout}>
+              确认退出
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/scenarios/[channel]/acquired/page.tsx b/Cunkebao/app/scenarios/[channel]/acquired/page.tsx
new file mode 100644
index 00000000..1691109e
--- /dev/null
+++ b/Cunkebao/app/scenarios/[channel]/acquired/page.tsx
@@ -0,0 +1,119 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Plus } 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/80 backdrop-blur-sm 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-xl font-semibold text-blue-600">{channelName}已获客</h1>
+          </div>
+          <Button variant="default" onClick={() => router.push(`/scenarios/new`)} className="flex items-center gap-1">
+            <Plus className="h-4 w-4" />
+            新建计划
+          </Button>
+        </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/Cunkebao/app/scenarios/[channel]/added/page.tsx b/Cunkebao/app/scenarios/[channel]/added/page.tsx
new file mode 100644
index 00000000..4428ed4b
--- /dev/null
+++ b/Cunkebao/app/scenarios/[channel]/added/page.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Plus } 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 { channel } = params // Extract channel from params
+  const channelName = getChannelName(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/80 backdrop-blur-sm 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-xl font-semibold text-blue-600">{channelName}已添加</h1>
+          </div>
+          <Button variant="default" onClick={() => router.push(`/scenarios/new`)} className="flex items-center gap-1">
+            <Plus className="h-4 w-4" />
+            新建计划
+          </Button>
+        </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/Cunkebao/app/scenarios/[channel]/api/page.tsx b/Cunkebao/app/scenarios/[channel]/api/page.tsx
new file mode 100644
index 00000000..b5a1f2cc
--- /dev/null
+++ b/Cunkebao/app/scenarios/[channel]/api/page.tsx
@@ -0,0 +1,463 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Copy, Plus, Trash2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { useRouter } from "next/navigation"
+import { toast } from "@/components/ui/use-toast"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Switch } from "@/components/ui/switch"
+
+// 获取渠道中文名称
+const getChannelName = (channel: string) => {
+  const channelMap: Record<string, string> = {
+    douyin: "抖音",
+    kuaishou: "快手",
+    xiaohongshu: "小红书",
+    weibo: "微博",
+    haibao: "海报",
+    phone: "电话",
+  }
+  return channelMap[channel] || channel
+}
+
+interface ApiKey {
+  id: string
+  name: string
+  key: string
+  createdAt: string
+  lastUsed: string | null
+  status: "active" | "inactive"
+}
+
+interface Webhook {
+  id: string
+  name: string
+  url: string
+  events: string[]
+  createdAt: string
+  lastTriggered: string | null
+  status: "active" | "inactive"
+}
+
+export default function ApiManagementPage({ params }: { params: { channel: string } }) {
+  const router = useRouter()
+  const channel = params.channel
+  const channelName = getChannelName(channel)
+
+  // 模拟API密钥数据
+  const [apiKeys, setApiKeys] = useState<ApiKey[]>([
+    {
+      id: "1",
+      name: `${channelName}获客API密钥`,
+      key: `api_${channel}_${Math.random().toString(36).substring(2, 10)}`,
+      createdAt: "2024-03-20 14:30:00",
+      lastUsed: "2024-03-21 09:15:22",
+      status: "active",
+    },
+  ])
+
+  // 模拟Webhook数据
+  const [webhooks, setWebhooks] = useState<Webhook[]>([
+    {
+      id: "1",
+      name: `${channelName}获客回调`,
+      url: `https://api.example.com/webhooks/${channel}`,
+      events: ["customer.created", "customer.updated", "tag.added"],
+      createdAt: "2024-03-20 14:35:00",
+      lastTriggered: "2024-03-21 09:16:45",
+      status: "active",
+    },
+  ])
+
+  // 对话框状态
+  const [showNewApiKeyDialog, setShowNewApiKeyDialog] = useState(false)
+  const [showNewWebhookDialog, setShowNewWebhookDialog] = useState(false)
+  const [newApiKeyName, setNewApiKeyName] = useState("")
+  const [newWebhookData, setNewWebhookData] = useState({
+    name: "",
+    url: "",
+    events: ["customer.created", "customer.updated", "tag.added"],
+  })
+
+  // 创建新API密钥
+  const handleCreateApiKey = () => {
+    if (!newApiKeyName.trim()) {
+      toast({
+        title: "错误",
+        description: "请输入API密钥名称",
+        variant: "destructive",
+      })
+      return
+    }
+
+    const newKey: ApiKey = {
+      id: `${Date.now()}`,
+      name: newApiKeyName,
+      key: `api_${channel}_${Math.random().toString(36).substring(2, 15)}`,
+      createdAt: new Date().toLocaleString(),
+      lastUsed: null,
+      status: "active",
+    }
+
+    setApiKeys([...apiKeys, newKey])
+    setNewApiKeyName("")
+    setShowNewApiKeyDialog(false)
+
+    toast({
+      title: "创建成功",
+      description: "新的API密钥已创建",
+      variant: "success",
+    })
+  }
+
+  // 创建新Webhook
+  const handleCreateWebhook = () => {
+    if (!newWebhookData.name.trim() || !newWebhookData.url.trim()) {
+      toast({
+        title: "错误",
+        description: "请填写所有必填字段",
+        variant: "destructive",
+      })
+      return
+    }
+
+    const newWebhook: Webhook = {
+      id: `${Date.now()}`,
+      name: newWebhookData.name,
+      url: newWebhookData.url,
+      events: newWebhookData.events,
+      createdAt: new Date().toLocaleString(),
+      lastTriggered: null,
+      status: "active",
+    }
+
+    setWebhooks([...webhooks, newWebhook])
+    setNewWebhookData({
+      name: "",
+      url: "",
+      events: ["customer.created", "customer.updated", "tag.added"],
+    })
+    setShowNewWebhookDialog(false)
+
+    toast({
+      title: "创建成功",
+      description: "新的Webhook已创建",
+      variant: "success",
+    })
+  }
+
+  // 删除API密钥
+  const handleDeleteApiKey = (id: string) => {
+    setApiKeys(apiKeys.filter((key) => key.id !== id))
+    toast({
+      title: "删除成功",
+      description: "API密钥已删除",
+      variant: "success",
+    })
+  }
+
+  // 删除Webhook
+  const handleDeleteWebhook = (id: string) => {
+    setWebhooks(webhooks.filter((webhook) => webhook.id !== id))
+    toast({
+      title: "删除成功",
+      description: "Webhook已删除",
+      variant: "success",
+    })
+  }
+
+  // 切换API密钥状态
+  const toggleApiKeyStatus = (id: string) => {
+    setApiKeys(
+      apiKeys.map((key) => (key.id === id ? { ...key, status: key.status === "active" ? "inactive" : "active" } : key)),
+    )
+  }
+
+  // 切换Webhook状态
+  const toggleWebhookStatus = (id: string) => {
+    setWebhooks(
+      webhooks.map((webhook) =>
+        webhook.id === id ? { ...webhook, status: webhook.status === "active" ? "inactive" : "active" } : webhook,
+      ),
+    )
+  }
+
+  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="text-xl font-semibold text-blue-600 ml-2">{channelName}获客接口管理</h1>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-7xl mx-auto">
+        <Tabs defaultValue="api-keys" className="w-full">
+          <TabsList className="grid w-full grid-cols-2 mb-4">
+            <TabsTrigger value="api-keys">API密钥</TabsTrigger>
+            <TabsTrigger value="webhooks">Webhook</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="api-keys" className="space-y-4">
+            <div className="flex justify-between items-center">
+              <h2 className="text-lg font-medium">API密钥管理</h2>
+              <Button onClick={() => setShowNewApiKeyDialog(true)}>
+                <Plus className="w-4 h-4 mr-2" />
+                创建API密钥
+              </Button>
+            </div>
+
+            <div className="space-y-4">
+              {apiKeys.map((apiKey) => (
+                <Card key={apiKey.id}>
+                  <CardHeader className="pb-2">
+                    <div className="flex justify-between items-start">
+                      <div>
+                        <CardTitle>{apiKey.name}</CardTitle>
+                        <CardDescription>创建于 {apiKey.createdAt}</CardDescription>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <div className="flex items-center space-x-2">
+                          <Switch
+                            checked={apiKey.status === "active"}
+                            onCheckedChange={() => toggleApiKeyStatus(apiKey.id)}
+                          />
+                          <span className="text-sm text-gray-500">{apiKey.status === "active" ? "启用" : "禁用"}</span>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                          onClick={() => handleDeleteApiKey(apiKey.id)}
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      <div className="flex items-center space-x-2">
+                        <Input value={apiKey.key} readOnly className="font-mono text-sm" />
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          onClick={() => {
+                            navigator.clipboard.writeText(apiKey.key)
+                            toast({
+                              title: "已复制",
+                              description: "API密钥已复制到剪贴板",
+                              variant: "success",
+                            })
+                          }}
+                        >
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                      </div>
+                      {apiKey.lastUsed && <p className="text-sm text-gray-500">上次使用: {apiKey.lastUsed}</p>}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+
+              {apiKeys.length === 0 && (
+                <div className="text-center py-8 bg-white rounded-lg shadow-sm">
+                  <p className="text-gray-500">暂无API密钥</p>
+                </div>
+              )}
+            </div>
+          </TabsContent>
+
+          <TabsContent value="webhooks" className="space-y-4">
+            <div className="flex justify-between items-center">
+              <h2 className="text-lg font-medium">Webhook管理</h2>
+              <Button onClick={() => setShowNewWebhookDialog(true)}>
+                <Plus className="w-4 h-4 mr-2" />
+                创建Webhook
+              </Button>
+            </div>
+
+            <div className="space-y-4">
+              {webhooks.map((webhook) => (
+                <Card key={webhook.id}>
+                  <CardHeader className="pb-2">
+                    <div className="flex justify-between items-start">
+                      <div>
+                        <CardTitle>{webhook.name}</CardTitle>
+                        <CardDescription>创建于 {webhook.createdAt}</CardDescription>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <div className="flex items-center space-x-2">
+                          <Switch
+                            checked={webhook.status === "active"}
+                            onCheckedChange={() => toggleWebhookStatus(webhook.id)}
+                          />
+                          <span className="text-sm text-gray-500">{webhook.status === "active" ? "启用" : "禁用"}</span>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                          onClick={() => handleDeleteWebhook(webhook.id)}
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      <div className="flex items-center space-x-2">
+                        <Input value={webhook.url} readOnly className="font-mono text-sm" />
+                        <Button
+                          variant="outline"
+                          size="icon"
+                          onClick={() => {
+                            navigator.clipboard.writeText(webhook.url)
+                            toast({
+                              title: "已复制",
+                              description: "Webhook URL已复制到剪贴板",
+                              variant: "success",
+                            })
+                          }}
+                        >
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                      </div>
+                      <div className="flex flex-wrap gap-2 mt-2">
+                        {webhook.events.map((event) => (
+                          <span key={event} className="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">
+                            {event}
+                          </span>
+                        ))}
+                      </div>
+                      {webhook.lastTriggered && (
+                        <p className="text-sm text-gray-500">上次触发: {webhook.lastTriggered}</p>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))}
+
+              {webhooks.length === 0 && (
+                <div className="text-center py-8 bg-white rounded-lg shadow-sm">
+                  <p className="text-gray-500">暂无Webhook</p>
+                </div>
+              )}
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* 创建API密钥对话框 */}
+      <Dialog open={showNewApiKeyDialog} onOpenChange={setShowNewApiKeyDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>创建新API密钥</DialogTitle>
+            <DialogDescription>创建一个新的API密钥用于访问{channelName}获客接口</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="api-key-name">API密钥名称</Label>
+              <Input
+                id="api-key-name"
+                placeholder="例如：获客系统集成"
+                value={newApiKeyName}
+                onChange={(e) => setNewApiKeyName(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowNewApiKeyDialog(false)}>
+              取消
+            </Button>
+            <Button onClick={handleCreateApiKey}>创建</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* 创建Webhook对话框 */}
+      <Dialog open={showNewWebhookDialog} onOpenChange={setShowNewWebhookDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>创建新Webhook</DialogTitle>
+            <DialogDescription>创建一个新的Webhook用于接收{channelName}获客事件通知</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="webhook-name">Webhook名称</Label>
+              <Input
+                id="webhook-name"
+                placeholder="例如：CRM系统集成"
+                value={newWebhookData.name}
+                onChange={(e) => setNewWebhookData({ ...newWebhookData, name: e.target.value })}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="webhook-url">Webhook URL</Label>
+              <Input
+                id="webhook-url"
+                placeholder="https://example.com/webhook"
+                value={newWebhookData.url}
+                onChange={(e) => setNewWebhookData({ ...newWebhookData, url: e.target.value })}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label>事件类型</Label>
+              <div className="grid grid-cols-1 gap-2">
+                {["customer.created", "customer.updated", "tag.added", "tag.removed"].map((event) => (
+                  <div key={event} className="flex items-center space-x-2">
+                    <Switch
+                      checked={newWebhookData.events.includes(event)}
+                      onCheckedChange={(checked) => {
+                        if (checked) {
+                          setNewWebhookData({
+                            ...newWebhookData,
+                            events: [...newWebhookData.events, event],
+                          })
+                        } else {
+                          setNewWebhookData({
+                            ...newWebhookData,
+                            events: newWebhookData.events.filter((e) => e !== event),
+                          })
+                        }
+                      }}
+                    />
+                    <span>{event}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowNewWebhookDialog(false)}>
+              取消
+            </Button>
+            <Button onClick={handleCreateWebhook}>创建</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/scenarios/[channel]/devices/loading.tsx b/Cunkebao/app/scenarios/[channel]/devices/loading.tsx
new file mode 100644
index 00000000..cec067bd
--- /dev/null
+++ b/Cunkebao/app/scenarios/[channel]/devices/loading.tsx
@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+
diff --git a/Cunkebao/app/scenarios/[channel]/devices/page.tsx b/Cunkebao/app/scenarios/[channel]/devices/page.tsx
new file mode 100644
index 00000000..acdd3a15
--- /dev/null
+++ b/Cunkebao/app/scenarios/[channel]/devices/page.tsx
@@ -0,0 +1,266 @@
+"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/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 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 className="fixed bottom-0 left-0 right-0 bg-white p-4 border-t flex justify-end space-x-2">
+          <Button variant="outline" onClick={() => router.back()}>
+            取消
+          </Button>
+          <Button onClick={handleSave} disabled={selectedDevices.length === 0}>
+            保存 ({selectedDevices.length})
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/scenarios/[channel]/edit/[id]/page.tsx b/Cunkebao/app/scenarios/[channel]/edit/[id]/page.tsx
new file mode 100644
index 00000000..84505a9d
--- /dev/null
+++ b/Cunkebao/app/scenarios/[channel]/edit/[id]/page.tsx
@@ -0,0 +1,241 @@
+"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/Cunkebao/app/scenarios/[channel]/page.tsx b/Cunkebao/app/scenarios/[channel]/page.tsx
new file mode 100644
index 00000000..072e8266
--- /dev/null
+++ b/Cunkebao/app/scenarios/[channel]/page.tsx
@@ -0,0 +1,321 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Copy, Link, HelpCircle } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+import { toast } from "@/components/ui/use-toast"
+import { ScenarioAcquisitionCard } from "@/app/components/acquisition/ScenarioAcquisitionCard"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+
+// 获取渠道中文名称
+const getChannelName = (channel: string) => {
+  const channelMap: Record<string, string> = {
+    douyin: "抖音",
+    kuaishou: "快手",
+    xiaohongshu: "小红书",
+    weibo: "微博",
+    haibao: "海报",
+    phone: "电话",
+    gongzhonghao: "公众号",
+    weixinqun: "微信群",
+    payment: "付款码",
+    api: "API",
+  }
+  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
+}
+
+// API文档提示组件
+function ApiDocumentationTooltip() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <HelpCircle className="h-4 w-4 text-gray-400 cursor-help" />
+        </TooltipTrigger>
+        <TooltipContent className="max-w-xs">
+          <p className="text-xs">
+            计划接口允许您通过API将外部系统的客户数据直接导入到存客宝。支持多种编程语言和第三方平台集成。
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+export default function ChannelPage({ params }: { params: { channel: string } }) {
+  const router = useRouter()
+  const channel = params.channel
+  const channelName = getChannelName(params.channel)
+
+  const initialTasks = [
+    {
+      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 [tasks, setTasks] = useState<Task[]>(initialTasks)
+
+  const [deviceStats, setDeviceStats] = useState<DeviceStats>({
+    active: 5,
+  })
+
+  const [showApiDialog, setShowApiDialog] = useState(false)
+  const [currentApiSettings, setCurrentApiSettings] = useState({
+    apiKey: "",
+    webhookUrl: "",
+    taskId: "",
+  })
+
+  const handleEditPlan = (taskId: string) => {
+    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}"`,
+        variant: "success",
+      })
+    }
+  }
+
+  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}"`,
+        variant: "success",
+      })
+    }
+  }
+
+  const handleStatusChange = (taskId: string, newStatus: "running" | "paused") => {
+    setTasks(tasks.map((task) => (task.id === taskId ? { ...task, status: newStatus } : task)))
+
+    toast({
+      title: newStatus === "running" ? "计划已启动" : "计划已暂停",
+      description: `已${newStatus === "running" ? "启动" : "暂停"}获客计划`,
+      variant: "success",
+    })
+  }
+
+  const handleOpenApiSettings = (taskId: string) => {
+    const task = tasks.find((t) => t.id === taskId)
+    if (task) {
+      setCurrentApiSettings({
+        apiKey: `api_${taskId}_${Math.random().toString(36).substring(2, 10)}`,
+        webhookUrl: `${window.location.origin}/api/scenarios/${channel}/${taskId}/webhook`,
+        taskId,
+      })
+      setShowApiDialog(true)
+    }
+  }
+
+  const handleCopyApiUrl = (url: string, withParams = false) => {
+    let copyUrl = url
+    if (withParams) {
+      copyUrl = `${url}?name=张三&phone=13800138000&source=外部系统&remark=测试数据`
+    }
+    navigator.clipboard.writeText(copyUrl)
+    toast({
+      title: "已复制",
+      description: withParams ? "接口地址（含示例参数）已复制到剪贴板" : "接口地址已复制到剪贴板",
+      variant: "success",
+    })
+  }
+
+  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.length > 0 ? (
+          tasks.map((task) => (
+            <div key={task.id} className="mb-6">
+              <ScenarioAcquisitionCard
+                task={task}
+                channel={channel}
+                onEdit={() => handleEditPlan(task.id)}
+                onCopy={handleCopyPlan}
+                onDelete={handleDeletePlan}
+                onStatusChange={handleStatusChange}
+                onOpenSettings={handleOpenApiSettings}
+              />
+            </div>
+          ))
+        ) : (
+          <div className="text-center py-12 bg-white rounded-lg shadow-sm">
+            <div className="text-gray-400 mb-4">暂无获客计划</div>
+          </div>
+        )}
+      </div>
+      {/* API接口设置对话框 */}
+      <Dialog open={showApiDialog} onOpenChange={setShowApiDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <div className="flex items-center gap-2">
+              <DialogTitle>计划接口</DialogTitle>
+              <ApiDocumentationTooltip />
+            </div>
+            <DialogDescription>使用此接口直接导入客资到该获客计划，支持多种编程语言。</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="api-key">API密钥</Label>
+              <div className="flex items-center space-x-2">
+                <Input id="api-key" value={currentApiSettings.apiKey} readOnly className="flex-1" />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={() => {
+                    navigator.clipboard.writeText(currentApiSettings.apiKey)
+                    toast({
+                      title: "已复制",
+                      description: "API密钥已复制到剪贴板",
+                      variant: "success",
+                    })
+                  }}
+                >
+                  <Copy className="h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="webhook-url">接口地址</Label>
+                <button
+                  className="text-xs text-blue-600 hover:underline"
+                  onClick={() => handleCopyApiUrl(currentApiSettings.webhookUrl, true)}
+                >
+                  复制（含示例参数）
+                </button>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Input id="webhook-url" value={currentApiSettings.webhookUrl} readOnly className="flex-1" />
+                <Button variant="outline" size="icon" onClick={() => handleCopyApiUrl(currentApiSettings.webhookUrl)}>
+                  <Copy className="h-4 w-4" />
+                </Button>
+              </div>
+              <p className="text-xs text-gray-500">支持GET/POST请求，必要参数：name（姓名）、phone（电话）</p>
+            </div>
+
+            <div className="space-y-2">
+              <Label>接口文档</Label>
+              <div className="flex items-center justify-between">
+                <Button
+                  className="w-full flex items-center justify-center gap-2"
+                  onClick={() => {
+                    window.open(`/api/docs/scenarios/${channel}/${currentApiSettings.taskId}`, "_blank")
+                  }}
+                >
+                  <Link className="h-4 w-4" />
+                  查看详细接口文档与集成指南
+                </Button>
+              </div>
+              <p className="text-xs text-gray-500 text-center">
+                <a
+                  href={`/api/docs/scenarios/${channel}/${currentApiSettings.taskId}#examples`}
+                  target="_blank"
+                  className="text-blue-600 hover:underline"
+                  rel="noreferrer"
+                >
+                  查看Python、Java等多语言示例代码
+                </a>
+              </p>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setShowApiDialog(false)}>
+              关闭
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/scenarios/[channel]/traffic/loading.tsx b/Cunkebao/app/scenarios/[channel]/traffic/loading.tsx
new file mode 100644
index 00000000..cec067bd
--- /dev/null
+++ b/Cunkebao/app/scenarios/[channel]/traffic/loading.tsx
@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+
diff --git a/Cunkebao/app/scenarios/[channel]/traffic/page.tsx b/Cunkebao/app/scenarios/[channel]/traffic/page.tsx
new file mode 100644
index 00000000..0bd3e9ac
--- /dev/null
+++ b/Cunkebao/app/scenarios/[channel]/traffic/page.tsx
@@ -0,0 +1,236 @@
+"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, Plus } 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/80 backdrop-blur-sm 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-xl font-semibold text-blue-600">{channelName}流量池</h1>
+          </div>
+          <Button
+            variant="default"
+            onClick={() => router.push(`/scenarios/${params.channel}/new`)}
+            className="flex items-center gap-1"
+          >
+            <Plus className="h-4 w-4" />
+            新建计划
+          </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>
+
+            <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/Cunkebao/app/scenarios/api/page.tsx b/Cunkebao/app/scenarios/api/page.tsx
new file mode 100644
index 00000000..baac75a6
--- /dev/null
+++ b/Cunkebao/app/scenarios/api/page.tsx
@@ -0,0 +1,374 @@
+"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/Cunkebao/app/scenarios/douyin/page.tsx b/Cunkebao/app/scenarios/douyin/page.tsx
new file mode 100644
index 00000000..f78a3e69
--- /dev/null
+++ b/Cunkebao/app/scenarios/douyin/page.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Plus } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+import { toast } from "@/components/ui/use-toast"
+import { ExpandableAcquisitionCard } from "@/components/acquisition/ExpandableAcquisitionCard"
+import Link from "next/link"
+import { DeviceTreeChart } from "@/app/components/acquisition/DeviceTreeChart"
+
+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 }[]
+  dailyData: { date: string; acquired: number; added: number }[]
+}
+
+export default function DouyinAcquisitionPage() {
+  const router = useRouter()
+  const channel = "douyin"
+
+  const [tasks, setTasks] = useState<Task[]>([
+    {
+      id: "1",
+      name: "抖音直播获客计划",
+      status: "running",
+      stats: {
+        devices: 3,
+        acquired: 45,
+        added: 32,
+      },
+      lastUpdated: "2024-03-18 15:30",
+      executionTime: "2024-03-18 15:30",
+      nextExecutionTime: "预计30分钟后",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `3月${String(i + 12)}日`,
+        customers: Math.floor(Math.random() * 10) + 5,
+      })),
+      dailyData: [
+        { date: "3/12", acquired: 12, added: 8 },
+        { date: "3/13", acquired: 15, added: 10 },
+        { date: "3/14", acquired: 8, added: 6 },
+        { date: "3/15", acquired: 10, added: 7 },
+        { date: "3/16", acquired: 14, added: 11 },
+        { date: "3/17", acquired: 9, added: 7 },
+        { date: "3/18", acquired: 11, added: 9 },
+      ],
+    },
+  ])
+
+  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}"`,
+      })
+    }
+  }
+
+  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>
+          <Link href="/scenarios/douyin/new" className="ml-auto">
+            <Button className="flex items-center gap-1">
+              <Plus className="h-4 w-4" />
+              新建计划
+            </Button>
+          </Link>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-7xl mx-auto">
+        {tasks.map((task) => (
+          <ExpandableAcquisitionCard
+            key={task.id}
+            task={task}
+            channel={channel}
+            onCopy={handleCopyPlan}
+            onDelete={handleDeletePlan}
+          />
+        ))}
+        <DeviceTreeChart />
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/scenarios/new/steps/DeviceSelection b/Cunkebao/app/scenarios/new/steps/DeviceSelection
new file mode 100644
index 00000000..139597f9
--- /dev/null
+++ b/Cunkebao/app/scenarios/new/steps/DeviceSelection
@@ -0,0 +1,2 @@
+
+
diff --git a/Cunkebao/app/scenarios/new/steps/PosterEditor.tsx b/Cunkebao/app/scenarios/new/steps/PosterEditor.tsx
new file mode 100644
index 00000000..a6970a8a
--- /dev/null
+++ b/Cunkebao/app/scenarios/new/steps/PosterEditor.tsx
@@ -0,0 +1,479 @@
+"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/Cunkebao/app/scenarios/new/steps/TrafficChannelSettings b/Cunkebao/app/scenarios/new/steps/TrafficChannelSettings
new file mode 100644
index 00000000..b9a5b6e5
--- /dev/null
+++ b/Cunkebao/app/scenarios/new/steps/TrafficChannelSettings
@@ -0,0 +1,210 @@
+"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/Cunkebao/app/scenarios/page.tsx b/Cunkebao/app/scenarios/page.tsx
new file mode 100644
index 00000000..fb06beb6
--- /dev/null
+++ b/Cunkebao/app/scenarios/page.tsx
@@ -0,0 +1,403 @@
+"use client"
+
+import type React from "react"
+import { TrendingUp, Users, ChevronLeft, Bot, Sparkles, Plus, Phone } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+
+interface Channel {
+  id: string
+  name: string
+  icon: string
+  stats: {
+    daily: number
+    growth: number
+  }
+  link?: string
+  plans?: Plan[]
+}
+
+interface Plan {
+  id: string
+  name: string
+  isNew?: boolean
+  status: "active" | "paused" | "completed"
+  acquisitionCount: number
+}
+
+// 调整场景顺序，确保API获客在最后
+const channels: Channel[] = [
+  {
+    id: "haibao",
+    name: "海报获客",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-x92XJgXy4MI7moNYlA1EAes2FqDxMH.png",
+    stats: {
+      daily: 167,
+      growth: 10.2,
+    },
+    link: "/scenarios/haibao",
+    plans: [
+      {
+        id: "plan-5",
+        name: "产品海报获客",
+        isNew: true,
+        status: "active",
+        acquisitionCount: 45,
+      },
+    ],
+  },
+  {
+    id: "order",
+    name: "订单获客",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-203hwGO5hn7hTByGiJltmtACbQF4yl.png",
+    stats: {
+      daily: 112,
+      growth: 7.8,
+    },
+    link: "/scenarios/order",
+    plans: [
+      {
+        id: "plan-9",
+        name: "电商订单获客",
+        status: "active",
+        acquisitionCount: 42,
+      },
+    ],
+  },
+  {
+    id: "douyin",
+    name: "抖音获客",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-QR8ManuDplYTySUJsY4mymiZkDYnQ9.png",
+    stats: {
+      daily: 156,
+      growth: 12.5,
+    },
+    link: "/scenarios/douyin",
+    plans: [
+      {
+        id: "plan-1",
+        name: "抖音直播间获客",
+        isNew: true,
+        status: "active",
+        acquisitionCount: 56,
+      },
+      {
+        id: "plan-2",
+        name: "抖音评论区获客",
+        status: "completed",
+        acquisitionCount: 128,
+      },
+    ],
+  },
+  {
+    id: "xiaohongshu",
+    name: "小红书获客",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-JXQOWS9M8mxbAgvFSlA8cCl64p3OiF.png",
+    stats: {
+      daily: 89,
+      growth: 8.3,
+    },
+    link: "/scenarios/xiaohongshu",
+    plans: [
+      {
+        id: "plan-3",
+        name: "小红书笔记获客",
+        isNew: true,
+        status: "active",
+        acquisitionCount: 32,
+      },
+    ],
+  },
+  {
+    id: "phone",
+    name: "电话获客",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/phone-icon-Hs9Ck3Ij7aqCOoY5NkhxQnXBnT5LGU.png",
+    stats: {
+      daily: 42,
+      growth: 15.8,
+    },
+    link: "/scenarios/phone",
+    plans: [
+      {
+        id: "phone-1",
+        name: "招商电话获客",
+        isNew: true,
+        status: "active",
+        acquisitionCount: 28,
+      },
+    ],
+  },
+  {
+    id: "gongzhonghao",
+    name: "公众号获客",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Gsg0CMf5tsZb41mioszdjqU1WmsRxW.png",
+    stats: {
+      daily: 234,
+      growth: 15.7,
+    },
+    link: "/scenarios/gongzhonghao",
+    plans: [
+      {
+        id: "plan-4",
+        name: "公众号文章获客",
+        status: "active",
+        acquisitionCount: 87,
+      },
+    ],
+  },
+  {
+    id: "weixinqun",
+    name: "微信群获客",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-azCH8EgGfidWXOqiM2D1jLH0VFRUtW.png",
+    stats: {
+      daily: 145,
+      growth: 11.2,
+    },
+    link: "/scenarios/weixinqun",
+    plans: [
+      {
+        id: "plan-6",
+        name: "微信群活动获客",
+        status: "paused",
+        acquisitionCount: 23,
+      },
+    ],
+  },
+  {
+    id: "payment",
+    name: "付款码获客",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-FI5qJhBgV87ZS3P2WrUDsVyV91Y78i.png",
+    stats: {
+      daily: 78,
+      growth: 9.5,
+    },
+    link: "/scenarios/payment",
+    plans: [
+      {
+        id: "plan-7",
+        name: "支付宝码获客",
+        status: "active",
+        acquisitionCount: 19,
+      },
+    ],
+  },
+  {
+    id: "api",
+    name: "API获客",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-JKtHDY1Ula8ya0XKQDxle5qrcE0qC5.png",
+    stats: {
+      daily: 198,
+      growth: 14.3,
+    },
+    link: "/scenarios/api",
+    plans: [
+      {
+        id: "plan-8",
+        name: "网站表单获客",
+        isNew: true,
+        status: "active",
+        acquisitionCount: 67,
+      },
+    ],
+  },
+]
+
+const aiScenarios = [
+  {
+    id: "ai-friend",
+    name: "AI智能加友",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-azCH8EgGfidWXOqiM2D1jLH0VFRUtW.png",
+    description: "智能分析目标用户画像，自动筛选优质客户",
+    stats: {
+      daily: 245,
+      growth: 18.5,
+    },
+    plans: [
+      {
+        id: "ai-plan-1",
+        name: "AI智能筛选计划",
+        isNew: true,
+        status: "active",
+        acquisitionCount: 78,
+      },
+    ],
+  },
+  {
+    id: "ai-group",
+    name: "AI群引流",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-azCH8EgGfidWXOqiM2D1jLH0VFRUtW.png",
+    description: "智能群聊互动，提高群活跃度和转化率",
+    stats: {
+      daily: 178,
+      growth: 15.2,
+    },
+    plans: [
+      {
+        id: "ai-plan-2",
+        name: "AI群聊互动计划",
+        status: "active",
+        acquisitionCount: 56,
+      },
+    ],
+  },
+  {
+    id: "ai-conversion",
+    name: "AI场景转化",
+    icon: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-m4ENUaZon82EPFHod2dP1dajlrRdVG.png",
+    description: "多场景智能营销，提升获客转化效果",
+    stats: {
+      daily: 134,
+      growth: 12.8,
+    },
+    plans: [
+      {
+        id: "ai-plan-3",
+        name: "AI多场景营销",
+        isNew: true,
+        status: "active",
+        acquisitionCount: 43,
+      },
+    ],
+  },
+]
+
+export default function ScenariosPage() {
+  const router = useRouter()
+  const handleChannelClick = (channelId: string, event: React.MouseEvent) => {
+    router.push(`/scenarios/${channelId}`)
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "active":
+        return "bg-green-100 text-green-700"
+      case "paused":
+        return "bg-amber-100 text-amber-700"
+      case "completed":
+        return "bg-blue-100 text-blue-700"
+      default:
+        return "bg-gray-100 text-gray-700"
+    }
+  }
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case "active":
+        return "执行中"
+      case "paused":
+        return "已暂停"
+      case "completed":
+        return "已完成"
+      default:
+        return "未知状态"
+    }
+  }
+
+  return (
+    <div className="flex-1 bg-gray-50">
+      <div className="max-w-[390px] mx-auto bg-white min-h-screen">
+        <header className="sticky top-0 z-10 bg-white border-b">
+          <div className="flex justify-between items-center p-4">
+            <div className="flex items-center space-x-3">
+              <Button variant="ghost" size="icon" onClick={() => window.history.back()}>
+                <ChevronLeft className="h-5 w-5" />
+              </Button>
+              <h1 className="text-xl font-semibold text-blue-600">场景获客</h1>
+            </div>
+
+            <Button className="bg-blue-600 hover:bg-blue-700" onClick={() => router.push("/plans/new")}>
+              <Plus className="h-4 w-4 mr-2" />
+              新建计划
+            </Button>
+          </div>
+        </header>
+
+        <div className="p-4 space-y-6">
+          {/* Traditional channels */}
+          <div className="grid grid-cols-2 gap-4">
+            {channels.map((channel) => (
+              <div key={channel.id} className="flex flex-col">
+                <Card
+                  className={`p-4 hover:shadow-lg transition-all cursor-pointer`}
+                  onClick={() => router.push(channel.link || "")}
+                >
+                  <div className="flex flex-col items-center text-center space-y-3">
+                    <div className="w-12 h-12 rounded-xl bg-white flex items-center justify-center shadow-sm">
+                      {channel.id === "phone" ? (
+                        <Phone className="w-8 h-8 text-blue-500" />
+                      ) : (
+                        <img
+                          src={channel.icon || "/placeholder.svg"}
+                          alt={channel.name}
+                          className="w-8 h-8 object-contain"
+                        />
+                      )}
+                    </div>
+
+                    <h3 className="text-sm font-medium text-blue-600">{channel.name}</h3>
+
+                    <div className="flex items-center space-x-1">
+                      <Users className="w-3 h-3 text-gray-400" />
+                      <div className="flex items-baseline">
+                        <span className="text-xs text-gray-500">今日：</span>
+                        <span className="text-base font-medium ml-1">{channel.stats.daily}</span>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center text-green-500 text-xs">
+                      <TrendingUp className="w-3 h-3 mr-1" />
+                      <span>+{channel.stats.growth}%</span>
+                    </div>
+                  </div>
+                </Card>
+              </div>
+            ))}
+          </div>
+
+          {/* AI scenarios */}
+          <div>
+            <div className="flex items-center space-x-2 mb-3">
+              <Bot className="w-5 h-5 text-blue-600" />
+              <h2 className="text-lg font-medium">AI智能获客</h2>
+              <span className="px-2 py-0.5 bg-blue-50 text-blue-600 text-xs rounded-full">Beta</span>
+            </div>
+            <div className="grid grid-cols-2 gap-4">
+              {aiScenarios.map((scenario) => (
+                <div key={scenario.id} className="flex flex-col">
+                  <Card
+                    className={`p-4 hover:shadow-lg transition-all bg-gradient-to-br from-blue-50/50 to-white border-2 border-blue-100`}
+                    onClick={() => router.push(scenario.link || "")}
+                  >
+                    <div className="flex flex-col items-center text-center space-y-3">
+                      <div className="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center shadow-sm">
+                        <Sparkles className="w-6 h-6 text-blue-500" />
+                      </div>
+
+                      <h3 className="text-sm font-medium text-blue-600">{scenario.name}</h3>
+                      <p className="text-xs text-gray-500 text-center line-clamp-2">{scenario.description}</p>
+
+                      <div className="flex items-center space-x-1">
+                        <Users className="w-3 h-3 text-gray-400" />
+                        <div className="flex items-baseline">
+                          <span className="text-xs text-gray-500">今日：</span>
+                          <span className="text-base font-medium ml-1">{scenario.stats.daily}</span>
+                        </div>
+                      </div>
+
+                      <div className="flex items-center text-green-500 text-xs">
+                        <TrendingUp className="w-3 h-3 mr-1" />
+                        <span>+{scenario.stats.growth}%</span>
+                      </div>
+                    </div>
+                  </Card>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/scenarios/phone/acquired/loading.tsx b/Cunkebao/app/scenarios/phone/acquired/loading.tsx
new file mode 100644
index 00000000..cec067bd
--- /dev/null
+++ b/Cunkebao/app/scenarios/phone/acquired/loading.tsx
@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+
diff --git a/Cunkebao/app/scenarios/phone/acquired/page.tsx b/Cunkebao/app/scenarios/phone/acquired/page.tsx
new file mode 100644
index 00000000..eec32fc0
--- /dev/null
+++ b/Cunkebao/app/scenarios/phone/acquired/page.tsx
@@ -0,0 +1,179 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Search, Phone, MoreVertical, UserPlus, Plus } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+import { Badge } from "@/components/ui/badge"
+import { toast } from "@/components/ui/use-toast"
+import { Input } from "@/components/ui/input"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+
+interface Customer {
+  id: string
+  phoneNumber: string
+  time: string
+  status: "pending" | "added"
+  question: string
+}
+
+export default function PhoneAcquiredPage() {
+  const router = useRouter()
+
+  const [customers, setCustomers] = useState<Customer[]>([
+    {
+      id: "1",
+      phoneNumber: "138****1234",
+      time: "2024-03-18 15:30",
+      status: "pending",
+      question: "请问贵公司的产品有什么特点？",
+    },
+    {
+      id: "2",
+      phoneNumber: "139****5678",
+      time: "2024-03-18 14:15",
+      status: "added",
+      question: "你们的合作方式是怎样的？",
+    },
+    {
+      id: "3",
+      phoneNumber: "137****9012",
+      time: "2024-03-18 11:22",
+      status: "added",
+      question: "能详细介绍一下你们的服务吗？",
+    },
+    {
+      id: "4",
+      phoneNumber: "135****3456",
+      time: "2024-03-17 16:45",
+      status: "added",
+      question: "你们有什么优惠政策？",
+    },
+    {
+      id: "5",
+      phoneNumber: "136****7890",
+      time: "2024-03-17 10:20",
+      status: "pending",
+      question: "未识别到有效问题",
+    },
+  ])
+
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const filteredCustomers = customers.filter(
+    (customer) => customer.phoneNumber.includes(searchQuery) || customer.question.includes(searchQuery),
+  )
+
+  const handleAddFriend = (customerId: string) => {
+    setCustomers(
+      customers.map((customer) => (customer.id === customerId ? { ...customer, status: "added" } : customer)),
+    )
+
+    toast({
+      title: "添加成功",
+      description: "已成功添加为微信好友",
+    })
+  }
+
+  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 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-xl font-semibold text-blue-600">电话已获客</h1>
+          </div>
+          <Button
+            variant="default"
+            onClick={() => router.push(`/scenarios/phone/new`)}
+            className="flex items-center gap-1"
+          >
+            <Plus className="h-4 w-4" />
+            新建计划
+          </Button>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-7xl mx-auto">
+        <Card className="p-6 bg-white/80 backdrop-blur-sm">
+          <div className="mb-4 relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+            <Input
+              placeholder="搜索电话号码或问题"
+              className="pl-10"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+
+          <div className="rounded-lg border overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>电话号码</TableHead>
+                  <TableHead>获客时间</TableHead>
+                  <TableHead>状态</TableHead>
+                  <TableHead>首句问题</TableHead>
+                  <TableHead className="text-right">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredCustomers.map((customer) => (
+                  <TableRow key={customer.id}>
+                    <TableCell>
+                      <div className="flex items-center space-x-2">
+                        <Avatar className="h-8 w-8 bg-blue-100">
+                          <AvatarFallback className="bg-blue-100 text-blue-600">
+                            <Phone className="h-4 w-4" />
+                          </AvatarFallback>
+                        </Avatar>
+                        <span className="font-medium">{customer.phoneNumber}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>{customer.time}</TableCell>
+                    <TableCell>
+                      <Badge variant={customer.status === "added" ? "success" : "secondary"}>
+                        {customer.status === "added" ? "已添加" : "未添加"}
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="max-w-[200px] truncate">{customer.question || "未识别到问题"}</TableCell>
+                    <TableCell className="text-right">
+                      {customer.status === "pending" ? (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="text-blue-600"
+                          onClick={() => handleAddFriend(customer.id)}
+                        >
+                          <UserPlus className="h-4 w-4 mr-1" />
+                          添加好友
+                        </Button>
+                      ) : (
+                        <DropdownMenu>
+                          <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-gray-100 rounded-full">
+                              <MoreVertical className="h-4 w-4" />
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end" className="w-48">
+                            <DropdownMenuItem className="cursor-pointer">查看详情</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/scenarios/phone/added/loading.tsx b/Cunkebao/app/scenarios/phone/added/loading.tsx
new file mode 100644
index 00000000..cec067bd
--- /dev/null
+++ b/Cunkebao/app/scenarios/phone/added/loading.tsx
@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+
diff --git a/Cunkebao/app/scenarios/phone/added/page.tsx b/Cunkebao/app/scenarios/phone/added/page.tsx
new file mode 100644
index 00000000..47bbb34d
--- /dev/null
+++ b/Cunkebao/app/scenarios/phone/added/page.tsx
@@ -0,0 +1,133 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Search, User, MessageSquare, Plus } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+import { Input } from "@/components/ui/input"
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
+import { Avatar, AvatarFallback } from "@/components/ui/avatar"
+
+interface Friend {
+  id: string
+  phoneNumber: string
+  nickname: string
+  addedTime: string
+  question: string
+}
+
+export default function PhoneAddedPage() {
+  const router = useRouter()
+
+  const [friends, setFriends] = useState<Friend[]>([
+    {
+      id: "1",
+      phoneNumber: "139****5678",
+      nickname: "张先生",
+      addedTime: "2024-03-18 14:20",
+      question: "你们的合作方式是怎样的？",
+    },
+    {
+      id: "2",
+      phoneNumber: "137****9012",
+      nickname: "李女士",
+      addedTime: "2024-03-18 11:30",
+      question: "能详细介绍一下你们的服务吗？",
+    },
+    {
+      id: "3",
+      phoneNumber: "135****3456",
+      nickname: "王经理",
+      addedTime: "2024-03-17 16:50",
+      question: "你们有什么优惠政策？",
+    },
+  ])
+
+  const [searchQuery, setSearchQuery] = useState("")
+
+  const filteredFriends = friends.filter(
+    (friend) =>
+      friend.phoneNumber.includes(searchQuery) ||
+      friend.nickname.includes(searchQuery) ||
+      friend.question.includes(searchQuery),
+  )
+
+  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 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-xl font-semibold text-blue-600">电话已添加</h1>
+          </div>
+          <Button
+            variant="default"
+            onClick={() => router.push(`/scenarios/phone/new`)}
+            className="flex items-center gap-1"
+          >
+            <Plus className="h-4 w-4" />
+            新建计划
+          </Button>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-7xl mx-auto">
+        <Card className="p-6 bg-white/80 backdrop-blur-sm">
+          <div className="mb-4 relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
+            <Input
+              placeholder="搜索电话号码或昵称"
+              className="pl-10"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+
+          <div className="rounded-lg border overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>好友信息</TableHead>
+                  <TableHead>添加时间</TableHead>
+                  <TableHead>首句问题</TableHead>
+                  <TableHead className="text-right">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredFriends.map((friend) => (
+                  <TableRow key={friend.id}>
+                    <TableCell>
+                      <div className="flex items-center space-x-2">
+                        <Avatar className="h-8 w-8 bg-green-100">
+                          <AvatarFallback className="bg-green-100 text-green-600">
+                            <User className="h-4 w-4" />
+                          </AvatarFallback>
+                        </Avatar>
+                        <div>
+                          <div className="font-medium">{friend.nickname}</div>
+                          <div className="text-sm text-gray-500">{friend.phoneNumber}</div>
+                        </div>
+                      </div>
+                    </TableCell>
+                    <TableCell>{friend.addedTime}</TableCell>
+                    <TableCell className="max-w-[300px] truncate">{friend.question || "未识别到问题"}</TableCell>
+                    <TableCell className="text-right">
+                      <Button size="sm" variant="outline">
+                        <MessageSquare className="h-4 w-4 mr-1" />
+                        发送消息
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/scenarios/phone/devices/page.tsx b/Cunkebao/app/scenarios/phone/devices/page.tsx
new file mode 100644
index 00000000..830ef594
--- /dev/null
+++ b/Cunkebao/app/scenarios/phone/devices/page.tsx
@@ -0,0 +1,187 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Plus, MoreVertical, Trash2 } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+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 { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@/components/ui/table"
+
+interface Device {
+  id: string
+  name: string
+  status: "online" | "offline"
+  lastActive: string
+  acquired: number
+}
+
+export default function PhoneDevicesPage() {
+  const router = useRouter()
+
+  const [devices, setDevices] = useState<Device[]>([
+    {
+      id: "1",
+      name: "电话设备 1",
+      status: "online",
+      lastActive: "2024-03-18 15:30",
+      acquired: 12,
+    },
+    {
+      id: "2",
+      name: "电话设备 2",
+      status: "online",
+      lastActive: "2024-03-18 14:45",
+      acquired: 8,
+    },
+    {
+      id: "3",
+      name: "电话设备 3",
+      status: "offline",
+      lastActive: "2024-03-17 10:20",
+      acquired: 18,
+    },
+    {
+      id: "4",
+      name: "电话设备 4",
+      status: "online",
+      lastActive: "2024-03-18 16:10",
+      acquired: 0,
+    },
+    {
+      id: "5",
+      name: "电话设备 5",
+      status: "online",
+      lastActive: "2024-03-18 13:55",
+      acquired: 0,
+    },
+  ])
+
+  const [isAddDeviceOpen, setIsAddDeviceOpen] = useState(false)
+
+  const handleRemoveDevice = (deviceId: string) => {
+    const deviceToRemove = devices.find((d) => d.id === deviceId)
+    if (deviceToRemove) {
+      setDevices(devices.filter((d) => d.id !== deviceId))
+      toast({
+        title: "设备已移除",
+        description: `已成功移除"${deviceToRemove.name}"`,
+      })
+    }
+  }
+
+  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 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-xl font-semibold text-blue-600">电话获客设备</h1>
+          </div>
+          <Button
+            variant="default"
+            onClick={() => router.push(`/scenarios/phone/new`)}
+            className="flex items-center gap-1"
+          >
+            <Plus className="h-4 w-4" />
+            新建计划
+          </Button>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-7xl mx-auto">
+        <Card className="p-6 bg-white/80 backdrop-blur-sm">
+          <div className="rounded-lg border overflow-hidden">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>设备名称</TableHead>
+                  <TableHead>状态</TableHead>
+                  <TableHead>最后活跃</TableHead>
+                  <TableHead>已获客</TableHead>
+                  <TableHead className="text-right">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {devices.map((device) => (
+                  <TableRow key={device.id}>
+                    <TableCell className="font-medium">{device.name}</TableCell>
+                    <TableCell>
+                      <Badge variant={device.status === "online" ? "success" : "secondary"}>
+                        {device.status === "online" ? "在线" : "离线"}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>{device.lastActive}</TableCell>
+                    <TableCell>{device.acquired}</TableCell>
+                    <TableCell className="text-right">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" size="icon" className="h-8 w-8 hover:bg-gray-100 rounded-full">
+                            <MoreVertical className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end" className="w-48">
+                          <DropdownMenuItem
+                            onClick={() => handleRemoveDevice(device.id)}
+                            className="text-red-600 cursor-pointer hover:bg-red-50"
+                          >
+                            <Trash2 className="w-4 h-4 mr-2" />
+                            移除设备
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </Card>
+      </div>
+
+      {/* 添加设备对话框 */}
+      <Dialog open={isAddDeviceOpen} onOpenChange={setIsAddDeviceOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>添加电话获客设备</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <p className="text-center text-gray-500 mb-4">请选择要添加的电话设备</p>
+            <div className="space-y-2">
+              {[1, 2, 3].map((num) => (
+                <Card key={num} className="p-3 cursor-pointer hover:bg-gray-50">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="font-medium">电话设备 {num + 5}</p>
+                      <p className="text-sm text-gray-500">最后活跃: 2024-03-18</p>
+                    </div>
+                    <Badge variant="outline">可用</Badge>
+                  </div>
+                </Card>
+              ))}
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              onClick={() => {
+                setIsAddDeviceOpen(false)
+                toast({
+                  title: "设备已添加",
+                  description: "已成功添加电话获客设备",
+                })
+              }}
+            >
+              确认添加
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/scenarios/phone/edit/[id]/page.tsx b/Cunkebao/app/scenarios/phone/edit/[id]/page.tsx
new file mode 100644
index 00000000..f445ad5b
--- /dev/null
+++ b/Cunkebao/app/scenarios/phone/edit/[id]/page.tsx
@@ -0,0 +1,402 @@
+"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/Cunkebao/app/scenarios/phone/page.tsx b/Cunkebao/app/scenarios/phone/page.tsx
new file mode 100644
index 00000000..7cc55c49
--- /dev/null
+++ b/Cunkebao/app/scenarios/phone/page.tsx
@@ -0,0 +1,123 @@
+"use client"
+
+import { useState } from "react"
+import { ChevronLeft, Plus } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+import { toast } from "@/components/ui/use-toast"
+import { ExpandableAcquisitionCard } from "@/components/acquisition/ExpandableAcquisitionCard"
+import Link from "next/link"
+import { DeviceTreeChart } from "@/app/components/acquisition/DeviceTreeChart"
+
+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 }[]
+  dailyData: { date: string; acquired: number; added: number }[]
+}
+
+export default function PhoneAcquisitionPage() {
+  const router = useRouter()
+  const channel = "phone"
+
+  const [tasks, setTasks] = useState<Task[]>([
+    {
+      id: "1",
+      name: "电话招商获客计划",
+      status: "running",
+      stats: {
+        devices: 5,
+        acquired: 38,
+        added: 31,
+      },
+      lastUpdated: "2024-03-18 15:30",
+      executionTime: "2024-03-18 15:30",
+      nextExecutionTime: "预计30分钟后",
+      trend: Array.from({ length: 7 }, (_, i) => ({
+        date: `3月${String(i + 12)}日`,
+        customers: Math.floor(Math.random() * 10) + 5,
+      })),
+      dailyData: [
+        { date: "3/12", acquired: 12, added: 8 },
+        { date: "3/13", acquired: 15, added: 10 },
+        { date: "3/14", acquired: 8, added: 6 },
+        { date: "3/15", acquired: 10, added: 7 },
+        { date: "3/16", acquired: 14, added: 11 },
+        { date: "3/17", acquired: 9, added: 7 },
+        { date: "3/18", acquired: 11, added: 9 },
+      ],
+    },
+  ])
+
+  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}"`,
+      })
+    }
+  }
+
+  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>
+          <Link href="/scenarios/phone/new" className="ml-auto">
+            <Button className="flex items-center gap-1">
+              <Plus className="h-4 w-4" />
+              新建计划
+            </Button>
+          </Link>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-7xl mx-auto">
+        {tasks.map((task) => (
+          <ExpandableAcquisitionCard
+            key={task.id}
+            task={task}
+            channel={channel}
+            onCopy={handleCopyPlan}
+            onDelete={handleDeletePlan}
+          />
+        ))}
+        <DeviceTreeChart />
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/traffic-pool/components/date-range-picker.tsx b/Cunkebao/app/traffic-pool/components/date-range-picker.tsx
new file mode 100644
index 00000000..8b0cd31f
--- /dev/null
+++ b/Cunkebao/app/traffic-pool/components/date-range-picker.tsx
@@ -0,0 +1,54 @@
+"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/Cunkebao/app/traffic-pool/components/pool-usage-chart.tsx b/Cunkebao/app/traffic-pool/components/pool-usage-chart.tsx
new file mode 100644
index 00000000..6d46f976
--- /dev/null
+++ b/Cunkebao/app/traffic-pool/components/pool-usage-chart.tsx
@@ -0,0 +1,33 @@
+"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/Cunkebao/app/traffic-pool/loading.tsx b/Cunkebao/app/traffic-pool/loading.tsx
new file mode 100644
index 00000000..cec067bd
--- /dev/null
+++ b/Cunkebao/app/traffic-pool/loading.tsx
@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+
diff --git a/Cunkebao/app/traffic-pool/page.tsx b/Cunkebao/app/traffic-pool/page.tsx
new file mode 100644
index 00000000..4f0ab297
--- /dev/null
+++ b/Cunkebao/app/traffic-pool/page.tsx
@@ -0,0 +1,459 @@
+"use client"
+
+import { useState, useCallback, useRef, useEffect } from "react"
+import { useRouter, useSearchParams } 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, Tag } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+import { useToast } from "@/components/ui/use-toast"
+import { useDebounce } from "@/hooks/use-debounce"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+
+interface UserTag {
+  id: string
+  name: string
+  color: string
+}
+
+interface TrafficUser {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  phone: string
+  region: string
+  note: string
+  status: "pending" | "added" | "failed"
+  addTime: string
+  source: string
+  assignedTo: string
+  category: "potential" | "customer" | "lost"
+  tags: UserTag[]
+}
+
+export default function TrafficPoolPage() {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const [users, setUsers] = useState<TrafficUser[]>([])
+  const [loading, setLoading] = useState(true) // Start with loading state
+  const [activeCategory, setActiveCategory] = useState("potential") // Changed default from "all" to "potential"
+  const [sourceFilter, setSourceFilter] = useState("all")
+  const [statusFilter, setStatusFilter] = useState("all")
+  const [searchQuery, setSearchQuery] = useState("")
+  const [currentPage, setCurrentPage] = useState(1)
+  const [totalPages, setTotalPages] = useState(1)
+  const [stats, setStats] = useState({
+    total: 0,
+    todayNew: 0,
+  })
+  const [selectedUser, setSelectedUser] = useState<TrafficUser | null>(null)
+  const [showUserDetail, setShowUserDetail] = useState(false)
+
+  const { toast } = useToast()
+  const abortControllerRef = useRef<AbortController | null>(null)
+  const debouncedSearchQuery = useDebounce(searchQuery, 300)
+
+  const fetchUsers = useCallback(async () => {
+    try {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort()
+      }
+
+      abortControllerRef.current = new AbortController()
+
+      setLoading(true)
+      const params = new URLSearchParams({
+        page: currentPage.toString(),
+        pageSize: "10",
+        search: debouncedSearchQuery,
+        category: activeCategory,
+        source: sourceFilter,
+        status: statusFilter,
+      })
+
+      // 检查是否有来源参数
+      const sourceParam = searchParams.get("source")
+      if (sourceParam) {
+        params.append("wechatSource", sourceParam)
+      }
+
+      const response = await fetch(`/api/users?${params}`, {
+        signal: abortControllerRef.current.signal,
+      })
+
+      if (!response.ok) throw new Error("请求失败")
+
+      const data = await response.json()
+
+      // 为每个用户添加标签
+      const usersWithTags = data.users.map((user: TrafficUser) => {
+        // 生成随机标签
+        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" },
+        ]
+
+        const tags = Array.from({ length: Math.floor(Math.random() * 4) + 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,
+          }
+        })
+
+        return {
+          ...user,
+          tags,
+        }
+      })
+
+      setUsers(usersWithTags)
+      setTotalPages(data.pagination.totalPages)
+      setStats(data.stats)
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+        return
+      }
+
+      toast({
+        title: "错误",
+        description: "获取数据失败，请稍后重试",
+        variant: "destructive",
+      })
+    } finally {
+      setLoading(false)
+    }
+  }, [currentPage, debouncedSearchQuery, activeCategory, sourceFilter, statusFilter, toast, searchParams])
+
+  useEffect(() => {
+    fetchUsers()
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort()
+      }
+    }
+  }, [fetchUsers])
+
+  const handleUserClick = (user: TrafficUser) => {
+    setSelectedUser(user)
+    setShowUserDetail(true)
+  }
+
+  return (
+    <div className="flex-1 bg-white 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 variant="outline" size="icon" onClick={() => fetchUsers()}>
+            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+          </Button>
+        </div>
+      </header>
+
+      <div className="p-4 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)
+                setCurrentPage(1)
+              }}
+              className="pl-9"
+            />
+          </div>
+          <Button variant="outline" size="icon">
+            <Filter className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* 统计卡片 */}
+        <div className="grid grid-cols-2 gap-4">
+          <Card className="p-4">
+            <div className="text-sm text-gray-500">流量池总数</div>
+            <div className="text-2xl font-bold text-blue-600">{stats.total}</div>
+          </Card>
+          <Card className="p-4">
+            <div className="text-sm text-gray-500">今日新增</div>
+            <div className="text-2xl font-bold text-green-600">{stats.todayNew}</div>
+          </Card>
+        </div>
+
+        {/* 分类标签页 - 移除了"全部"选项 */}
+        <Tabs
+          defaultValue="potential"
+          value={activeCategory}
+          onValueChange={(value) => {
+            setActiveCategory(value)
+            setCurrentPage(1)
+          }}
+        >
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="potential">潜在客户</TabsTrigger>
+            <TabsTrigger value="customer">已转化</TabsTrigger>
+          </TabsList>
+        </Tabs>
+
+        {/* 筛选器 */}
+        <div className="flex space-x-2">
+          <Select
+            value={sourceFilter}
+            onValueChange={(value) => {
+              setSourceFilter(value)
+              setCurrentPage(1)
+            }}
+          >
+            <SelectTrigger className="w-[120px]">
+              <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>
+
+          <Select
+            value={statusFilter}
+            onValueChange={(value) => {
+              setStatusFilter(value)
+              setCurrentPage(1)
+            }}
+          >
+            <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-2">
+          {loading ? (
+            <div className="flex flex-col items-center justify-center py-12">
+              <RefreshCw className="h-8 w-8 text-blue-500 animate-spin mb-4" />
+              <div className="text-gray-500">加载中...</div>
+            </div>
+          ) : users.length === 0 ? (
+            <div className="text-center py-12 bg-gray-50 rounded-lg">
+              <div className="text-gray-500">暂无数据</div>
+              <Button variant="outline" className="mt-4" onClick={fetchUsers}>
+                刷新
+              </Button>
+            </div>
+          ) : (
+            users.map((user) => (
+              <Card
+                key={user.id}
+                className="p-3 cursor-pointer hover:shadow-md transition-shadow"
+                onClick={() => handleUserClick(user)}
+              >
+                <div className="flex items-center space-x-3">
+                  <img src={user.avatar || "/placeholder.svg"} alt="" className="w-10 h-10 rounded-full bg-gray-100" />
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between">
+                      <div className="font-medium truncate">{user.nickname}</div>
+                      <div
+                        className={`text-xs px-2 py-1 rounded-full ${
+                          user.status === "added"
+                            ? "bg-green-100 text-green-800"
+                            : user.status === "pending"
+                              ? "bg-yellow-100 text-yellow-800"
+                              : "bg-red-100 text-red-800"
+                        }`}
+                      >
+                        {user.status === "added" ? "已添加" : user.status === "pending" ? "待处理" : "已失败"}
+                      </div>
+                    </div>
+                    <div className="text-sm text-gray-500">微信号: {user.wechatId}</div>
+                    <div className="text-sm text-gray-500">来源: {user.source}</div>
+                    <div className="text-sm text-gray-500">添加时间: {new Date(user.addTime).toLocaleString()}</div>
+
+                    {/* 标签展示 */}
+                    <div className="flex flex-wrap gap-1 mt-2">
+                      {user.tags.slice(0, 2).map((tag) => (
+                        <span key={tag.id} className={`text-xs px-2 py-0.5 rounded-full ${tag.color}`}>
+                          {tag.name}
+                        </span>
+                      ))}
+                      {user.tags.length > 2 && (
+                        <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-800">
+                          +{user.tags.length - 2}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            ))
+          )}
+        </div>
+
+        {/* 分页 */}
+        {!loading && users.length > 0 && (
+          <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>
+
+      {/* 用户详情弹窗 */}
+      <Dialog open={showUserDetail} onOpenChange={setShowUserDetail}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>用户详情</DialogTitle>
+          </DialogHeader>
+          {selectedUser && (
+            <div className="space-y-4">
+              <div className="flex items-center space-x-3">
+                <Avatar className="h-16 w-16">
+                  <AvatarImage src={selectedUser.avatar} />
+                  <AvatarFallback>{selectedUser.nickname[0]}</AvatarFallback>
+                </Avatar>
+                <div>
+                  <div className="text-xl font-medium">{selectedUser.nickname}</div>
+                  <div className="text-sm text-gray-500">{selectedUser.wechatId}</div>
+                  <Badge
+                    className={`mt-1 ${
+                      selectedUser.status === "added"
+                        ? "bg-green-100 text-green-800"
+                        : selectedUser.status === "pending"
+                          ? "bg-yellow-100 text-yellow-800"
+                          : "bg-red-100 text-red-800"
+                    }`}
+                  >
+                    {selectedUser.status === "added"
+                      ? "已添加"
+                      : selectedUser.status === "pending"
+                        ? "待处理"
+                        : "已失败"}
+                  </Badge>
+                </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">{selectedUser.phone}</div>
+                </div>
+                <div className="space-y-1">
+                  <div className="text-sm text-gray-500">地区</div>
+                  <div className="font-medium">{selectedUser.region}</div>
+                </div>
+                <div className="space-y-1">
+                  <div className="text-sm text-gray-500">来源</div>
+                  <div className="font-medium">{selectedUser.source}</div>
+                </div>
+                <div className="space-y-1">
+                  <div className="text-sm text-gray-500">添加时间</div>
+                  <div className="font-medium">{new Date(selectedUser.addTime).toLocaleString()}</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">
+                  {selectedUser.tags.map((tag) => (
+                    <span key={tag.id} className={`text-sm px-2 py-1 rounded-full ${tag.color}`}>
+                      {tag.name}
+                    </span>
+                  ))}
+                  {selectedUser.tags.length === 0 && <span className="text-sm text-gray-500">暂无标签</span>}
+                </div>
+              </div>
+
+              {selectedUser.note && (
+                <div className="space-y-2">
+                  <div className="text-sm text-gray-500">备注信息</div>
+                  <div className="p-3 bg-gray-50 rounded-lg text-sm">{selectedUser.note}</div>
+                </div>
+              )}
+
+              <div className="flex justify-end space-x-2">
+                <Button variant="outline" onClick={() => setShowUserDetail(false)}>
+                  关闭
+                </Button>
+                <Button>编辑标签</Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/wechat-accounts/[id]/page.tsx b/Cunkebao/app/wechat-accounts/[id]/page.tsx
new file mode 100644
index 00000000..e238b2e0
--- /dev/null
+++ b/Cunkebao/app/wechat-accounts/[id]/page.tsx
@@ -0,0 +1,767 @@
+"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/Cunkebao/app/wechat-accounts/page.tsx b/Cunkebao/app/wechat-accounts/page.tsx
new file mode 100644
index 00000000..829f206c
--- /dev/null
+++ b/Cunkebao/app/wechat-accounts/page.tsx
@@ -0,0 +1,257 @@
+"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/Cunkebao/app/workspace/ai-analyzer/[id]/page.tsx b/Cunkebao/app/workspace/ai-analyzer/[id]/page.tsx
new file mode 100644
index 00000000..c3973a9a
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/[id]/page.tsx
@@ -0,0 +1,464 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { ArrowLeft, Download, Mail, Share2, Users, MessageCircle, BarChart2, PieChart } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+interface AnalysisReport {
+  id: string
+  name: string
+  wechatId: string
+  deviceName: string
+  createdAt: string
+  completedAt: string
+  keywords: string[]
+  promptWords: string[]
+  type: "friends" | "moments" | "both"
+  summary: string
+  friendsAnalysis: {
+    totalFriends: number
+    matchedFriends: number
+    categories: {
+      name: string
+      count: number
+      percentage: number
+    }[]
+    demographics: {
+      gender: { male: number; female: number; unknown: number }
+      ageGroups: { [key: string]: number }
+      regions: { [key: string]: number }
+    }
+  }
+  momentsAnalysis: {
+    totalPosts: number
+    analyzedPosts: number
+    topTopics: { topic: string; count: number }[]
+    sentiment: { positive: number; neutral: number; negative: number }
+    activityTrend: { month: string; count: number }[]
+  }
+}
+
+export default function AnalysisReportPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [report, setReport] = useState<AnalysisReport | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // 模拟加载报告数据
+    const fetchReport = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+
+      const mockReport: AnalysisReport = {
+        id: params.id,
+        name: "美妆用户分析",
+        wechatId: "wxid_abc123",
+        deviceName: "设备1",
+        createdAt: "2023-12-15T10:30:00Z",
+        completedAt: "2023-12-15T11:45:00Z",
+        keywords: ["美妆", "护肤", "彩妆"],
+        promptWords: ["人群属性", "喜好分析", "消费能力"],
+        type: "both",
+        summary:
+          "该微信账号的好友中有约32%与美妆相关，主要集中在25-34岁的女性用户，地域分布以一线城市为主。朋友圈内容分析显示，美妆相关话题互动率较高，用户对高端护肤品牌表现出较强的兴趣，消费能力中上。建议针对这部分用户推送高端护肤品和彩妆新品信息，重点关注节假日促销活动的反馈。",
+        friendsAnalysis: {
+          totalFriends: 287,
+          matchedFriends: 92,
+          categories: [
+            { name: "美妆爱好者", count: 48, percentage: 52 },
+            { name: "偶尔关注", count: 31, percentage: 34 },
+            { name: "专业人士", count: 13, percentage: 14 },
+          ],
+          demographics: {
+            gender: { male: 12, female: 76, unknown: 4 },
+            ageGroups: { "18-24": 15, "25-34": 53, "35-44": 19, "45+": 5 },
+            regions: { 北京: 21, 上海: 18, 广州: 14, 深圳: 12, 其他: 27 },
+          },
+        },
+        momentsAnalysis: {
+          totalPosts: 1240,
+          analyzedPosts: 850,
+          topTopics: [
+            { topic: "护肤品", count: 127 },
+            { topic: "彩妆", count: 98 },
+            { topic: "美容仪器", count: 76 },
+            { topic: "品牌活动", count: 65 },
+            { topic: "新品上市", count: 52 },
+          ],
+          sentiment: { positive: 68, neutral: 27, negative: 5 },
+          activityTrend: [
+            { month: "7月", count: 78 },
+            { month: "8月", count: 92 },
+            { month: "9月", count: 85 },
+            { month: "10月", count: 110 },
+            { month: "11月", count: 125 },
+            { month: "12月", count: 142 },
+          ],
+        },
+      }
+
+      setReport(mockReport)
+      setIsLoading(false)
+    }
+
+    fetchReport()
+  }, [params.id])
+
+  const getTypeLabel = (type: string) => {
+    switch (type) {
+      case "friends":
+        return "好友信息分析"
+      case "moments":
+        return "朋友圈内容分析"
+      case "both":
+        return "综合分析"
+      default:
+        return "未知类型"
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-screen max-h-screen bg-gray-50">
+      {/* 头部 */}
+      <div className="bg-white p-4 border-b flex items-center justify-between">
+        <div className="flex items-center">
+          <Button variant="ghost" size="icon" onClick={() => router.back()} className="mr-2">
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-xl font-semibold">分析报告</h1>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" className="flex items-center gap-1">
+            <Mail className="h-4 w-4" />
+            <span className="hidden sm:inline">发送报告</span>
+          </Button>
+          <Button variant="outline" size="sm" className="flex items-center gap-1">
+            <Download className="h-4 w-4" />
+            <span className="hidden sm:inline">下载报告</span>
+          </Button>
+          <Button variant="outline" size="sm" className="flex items-center gap-1">
+            <Share2 className="h-4 w-4" />
+            <span className="hidden sm:inline">分享</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* 主内容区域 */}
+      <div className="flex-1 p-4 overflow-auto">
+        {isLoading ? (
+          <div className="flex justify-center py-12">
+            <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+          </div>
+        ) : report ? (
+          <div className="max-w-5xl mx-auto space-y-6">
+            {/* 报告头部 */}
+            <Card>
+              <CardHeader className="pb-2">
+                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
+                  <div>
+                    <CardTitle className="text-xl">{report.name}</CardTitle>
+                    <p className="text-sm text-gray-500 mt-1">{new Date(report.completedAt).toLocaleString()} 完成</p>
+                  </div>
+                  <Badge className="self-start sm:self-auto bg-green-100 text-green-800 border-green-200">
+                    {getTypeLabel(report.type)}
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
+                      <Users className="h-5 w-5 text-blue-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-gray-500">分析好友</p>
+                      <p className="font-semibold">
+                        {report.friendsAnalysis.matchedFriends} / {report.friendsAnalysis.totalFriends}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
+                      <MessageCircle className="h-5 w-5 text-purple-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-gray-500">分析朋友圈</p>
+                      <p className="font-semibold">
+                        {report.momentsAnalysis.analyzedPosts} / {report.momentsAnalysis.totalPosts}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
+                      <BarChart2 className="h-5 w-5 text-green-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-gray-500">关键词</p>
+                      <div className="flex flex-wrap gap-1 mt-1">
+                        {report.keywords.map((keyword, index) => (
+                          <Badge key={index} variant="outline" className="text-xs">
+                            {keyword}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h3 className="font-medium mb-2">分析摘要</h3>
+                  <p className="text-sm text-gray-700">{report.summary}</p>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* 详细分析 */}
+            <Tabs defaultValue="friends" className="w-full">
+              <TabsList className="grid w-full grid-cols-2 mb-6">
+                <TabsTrigger value="friends">好友分析</TabsTrigger>
+                <TabsTrigger value="moments">朋友圈分析</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="friends" className="space-y-4">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-lg">好友分类分析</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                      <div>
+                        <h3 className="font-medium mb-3">好友分类</h3>
+                        <div className="space-y-3">
+                          {report.friendsAnalysis.categories.map((category, index) => (
+                            <div key={index}>
+                              <div className="flex justify-between text-sm mb-1">
+                                <span>{category.name}</span>
+                                <span className="font-medium">
+                                  {category.count} ({category.percentage}%)
+                                </span>
+                              </div>
+                              <div className="w-full bg-gray-200 rounded-full h-2">
+                                <div
+                                  className="bg-blue-500 h-2 rounded-full"
+                                  style={{ width: `${category.percentage}%` }}
+                                ></div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <h3 className="font-medium mb-3">性别分布</h3>
+                        <div className="flex items-center h-40 justify-center">
+                          <PieChart className="h-32 w-32 text-gray-400" />
+                        </div>
+                        <div className="grid grid-cols-3 text-center mt-2">
+                          <div>
+                            <div className="text-sm text-gray-500">女性</div>
+                            <div className="font-medium">
+                              {report.friendsAnalysis.demographics.gender.female} (
+                              {Math.round(
+                                (report.friendsAnalysis.demographics.gender.female /
+                                  report.friendsAnalysis.matchedFriends) *
+                                  100,
+                              )}
+                              %)
+                            </div>
+                          </div>
+                          <div>
+                            <div className="text-sm text-gray-500">男性</div>
+                            <div className="font-medium">
+                              {report.friendsAnalysis.demographics.gender.male} (
+                              {Math.round(
+                                (report.friendsAnalysis.demographics.gender.male /
+                                  report.friendsAnalysis.matchedFriends) *
+                                  100,
+                              )}
+                              %)
+                            </div>
+                          </div>
+                          <div>
+                            <div className="text-sm text-gray-500">未知</div>
+                            <div className="font-medium">
+                              {report.friendsAnalysis.demographics.gender.unknown} (
+                              {Math.round(
+                                (report.friendsAnalysis.demographics.gender.unknown /
+                                  report.friendsAnalysis.matchedFriends) *
+                                  100,
+                              )}
+                              %)
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+                      <div>
+                        <h3 className="font-medium mb-3">年龄分布</h3>
+                        <div className="space-y-3">
+                          {Object.entries(report.friendsAnalysis.demographics.ageGroups).map(([age, count], index) => (
+                            <div key={index}>
+                              <div className="flex justify-between text-sm mb-1">
+                                <span>{age}岁</span>
+                                <span className="font-medium">
+                                  {count} ({Math.round((count / report.friendsAnalysis.matchedFriends) * 100)}%)
+                                </span>
+                              </div>
+                              <div className="w-full bg-gray-200 rounded-full h-2">
+                                <div
+                                  className="bg-green-500 h-2 rounded-full"
+                                  style={{
+                                    width: `${Math.round((count / report.friendsAnalysis.matchedFriends) * 100)}%`,
+                                  }}
+                                ></div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <h3 className="font-medium mb-3">地域分布</h3>
+                        <div className="space-y-3">
+                          {Object.entries(report.friendsAnalysis.demographics.regions).map(([region, count], index) => (
+                            <div key={index}>
+                              <div className="flex justify-between text-sm mb-1">
+                                <span>{region}</span>
+                                <span className="font-medium">
+                                  {count} ({Math.round((count / report.friendsAnalysis.matchedFriends) * 100)}%)
+                                </span>
+                              </div>
+                              <div className="w-full bg-gray-200 rounded-full h-2">
+                                <div
+                                  className="bg-purple-500 h-2 rounded-full"
+                                  style={{
+                                    width: `${Math.round((count / report.friendsAnalysis.matchedFriends) * 100)}%`,
+                                  }}
+                                ></div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+
+              <TabsContent value="moments" className="space-y-4">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-lg">朋友圈内容分析</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                      <div>
+                        <h3 className="font-medium mb-3">热门话题</h3>
+                        <div className="space-y-3">
+                          {report.momentsAnalysis.topTopics.map((topic, index) => (
+                            <div key={index}>
+                              <div className="flex justify-between text-sm mb-1">
+                                <span>{topic.topic}</span>
+                                <span className="font-medium">{topic.count} 次提及</span>
+                              </div>
+                              <div className="w-full bg-gray-200 rounded-full h-2">
+                                <div
+                                  className="bg-blue-500 h-2 rounded-full"
+                                  style={{
+                                    width: `${Math.round((topic.count / report.momentsAnalysis.topTopics[0].count) * 100)}%`,
+                                  }}
+                                ></div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <h3 className="font-medium mb-3">情感分析</h3>
+                        <div className="flex items-center h-40 justify-center">
+                          <PieChart className="h-32 w-32 text-gray-400" />
+                        </div>
+                        <div className="grid grid-cols-3 text-center mt-2">
+                          <div>
+                            <div className="text-sm text-gray-500">积极</div>
+                            <div className="font-medium">{report.momentsAnalysis.sentiment.positive}%</div>
+                          </div>
+                          <div>
+                            <div className="text-sm text-gray-500">中性</div>
+                            <div className="font-medium">{report.momentsAnalysis.sentiment.neutral}%</div>
+                          </div>
+                          <div>
+                            <div className="text-sm text-gray-500">消极</div>
+                            <div className="font-medium">{report.momentsAnalysis.sentiment.negative}%</div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="mt-8">
+                      <h3 className="font-medium mb-3">活跃度趋势</h3>
+                      <div className="h-60 flex items-end justify-between">
+                        {report.momentsAnalysis.activityTrend.map((item, index) => (
+                          <div key={index} className="flex flex-col items-center">
+                            <div
+                              className="w-12 bg-blue-500 rounded-t-md"
+                              style={{
+                                height: `${Math.round((item.count / Math.max(...report.momentsAnalysis.activityTrend.map((i) => i.count))) * 180)}px`,
+                              }}
+                            ></div>
+                            <div className="text-xs mt-2">{item.month}</div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-lg">AI 洞察</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-4">
+                      <div className="p-4 bg-blue-50 rounded-lg border border-blue-100">
+                        <h4 className="font-medium text-blue-800 mb-2">用户兴趣洞察</h4>
+                        <p className="text-sm text-blue-700">
+                          根据朋友圈内容分析，该用户对高端护肤品牌表现出较强的兴趣，尤其关注新品上市和限时促销活动。用户经常分享美容心得和产品使用体验，互动率较高的内容多与护肤品和彩妆相关。
+                        </p>
+                      </div>
+
+                      <div className="p-4 bg-green-50 rounded-lg border border-green-100">
+                        <h4 className="font-medium text-green-800 mb-2">消费能力分析</h4>
+                        <p className="text-sm text-green-700">
+                          用户消费能力属于中上水平，对高端美妆品牌有明显偏好。朋友圈中提及的产品价格区间多在300-1000元，节假日期间有较高的购买意愿和分享欲望。
+                        </p>
+                      </div>
+
+                      <div className="p-4 bg-purple-50 rounded-lg border border-purple-100">
+                        <h4 className="font-medium text-purple-800 mb-2">社交特征分析</h4>
+                        <p className="text-sm text-purple-700">
+                          用户社交活跃度高，朋友圈更新频率平均为每周3-4次。内容多以分享生活、美妆心得为主，互动性强，对评论和点赞有较高的回应率。用户倾向于在晚间19:00-22:00发布内容，周末活跃度高于工作日。
+                        </p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+            </Tabs>
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="text-gray-500">未找到报告数据</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-analyzer/components/analysis-settings.tsx b/Cunkebao/app/workspace/ai-analyzer/components/analysis-settings.tsx
new file mode 100644
index 00000000..69185fd5
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/components/analysis-settings.tsx
@@ -0,0 +1,283 @@
+"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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Badge } from "@/components/ui/badge"
+import { X, Plus } from "lucide-react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+interface AnalysisSettingsProps {
+  formData: any
+  updateFormData: (data: any) => void
+  onNext: () => void
+  onBack: () => void
+}
+
+export function AnalysisSettings({ formData, updateFormData, onNext, onBack }: AnalysisSettingsProps) {
+  const [analysisType, setAnalysisType] = useState<string>(formData.analysisType || "both")
+  const [keyword, setKeyword] = useState("")
+  const [promptWord, setPromptWord] = useState("")
+  const [keywords, setKeywords] = useState<string[]>(formData.keywords || [])
+  const [promptWords, setPromptWords] = useState<string[]>(formData.promptWords || [])
+  const [activeTab, setActiveTab] = useState("friends")
+
+  const handleAddKeyword = () => {
+    if (keyword.trim() && !keywords.includes(keyword.trim())) {
+      const newKeywords = [...keywords, keyword.trim()]
+      setKeywords(newKeywords)
+      updateFormData({ keywords: newKeywords })
+      setKeyword("")
+    }
+  }
+
+  const handleRemoveKeyword = (index: number) => {
+    const newKeywords = keywords.filter((_, i) => i !== index)
+    setKeywords(newKeywords)
+    updateFormData({ keywords: newKeywords })
+  }
+
+  const handleAddPromptWord = () => {
+    if (promptWord.trim() && !promptWords.includes(promptWord.trim())) {
+      const newPromptWords = [...promptWords, promptWord.trim()]
+      setPromptWords(newPromptWords)
+      updateFormData({ promptWords: newPromptWords })
+      setPromptWord("")
+    }
+  }
+
+  const handleRemovePromptWord = (index: number) => {
+    const newPromptWords = promptWords.filter((_, i) => i !== index)
+    setPromptWords(newPromptWords)
+    updateFormData({ promptWords: newPromptWords })
+  }
+
+  const handleTypeChange = (value: string) => {
+    setAnalysisType(value)
+    updateFormData({ analysisType: value })
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent, type: "keyword" | "prompt") => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      if (type === "keyword") {
+        handleAddKeyword()
+      } else {
+        handleAddPromptWord()
+      }
+    }
+  }
+
+  const handleContinue = () => {
+    updateFormData({
+      analysisType,
+      keywords,
+      promptWords,
+    })
+    onNext()
+  }
+
+  const suggestedKeywords = ["美妆", "护肤", "彩妆", "健身", "教育", "培训", "金融", "投资", "旅游", "美食"]
+  const suggestedPrompts = ["人群属性", "喜好分析", "消费能力", "兴趣爱好", "活跃度", "社交特征"]
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold mb-1">设置分析内容</h2>
+        <p className="text-gray-500 text-sm">选择分析类型并设置关键词和提示词</p>
+      </div>
+
+      <div>
+        <Label className="text-base font-medium">分析类型</Label>
+        <RadioGroup value={analysisType} onValueChange={handleTypeChange} className="mt-2 space-y-3">
+          <div className="flex items-start space-x-2">
+            <RadioGroupItem value="friends" id="friends" />
+            <div className="grid gap-1.5">
+              <Label htmlFor="friends" className="font-medium">
+                好友信息分析
+              </Label>
+              <p className="text-sm text-gray-500">分析微信号下所有好友的昵称及微信信息，基于指定用户词进行筛选分析</p>
+            </div>
+          </div>
+
+          <div className="flex items-start space-x-2">
+            <RadioGroupItem value="moments" id="moments" />
+            <div className="grid gap-1.5">
+              <Label htmlFor="moments" className="font-medium">
+                朋友圈内容分析
+              </Label>
+              <p className="text-sm text-gray-500">
+                运用AI技术对所有用户朋友圈内容进行分析，通过提示词辅助深入剖析用户类型
+              </p>
+            </div>
+          </div>
+
+          <div className="flex items-start space-x-2">
+            <RadioGroupItem value="both" id="both" />
+            <div className="grid gap-1.5">
+              <Label htmlFor="both" className="font-medium">
+                综合分析（推荐）
+              </Label>
+              <p className="text-sm text-gray-500">同时分析好友信息和朋友圈内容，获得更全面的数据洞察</p>
+            </div>
+          </div>
+        </RadioGroup>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="friends">好友分析设置</TabsTrigger>
+          <TabsTrigger value="moments">朋友圈分析设置</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="friends" className="space-y-4 pt-4">
+          <div>
+            <Label htmlFor="keywords" className="text-base font-medium">
+              用户关键词
+            </Label>
+            <p className="text-sm text-gray-500 mt-1 mb-2">
+              设置用于筛选好友的关键词，例如"美妆"将筛选出昵称或微信信息中与美妆相关的好友
+            </p>
+
+            <div className="flex gap-2">
+              <Input
+                id="keywords"
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
+                onKeyDown={(e) => handleKeyDown(e, "keyword")}
+                placeholder="输入关键词并回车"
+                className="flex-1"
+              />
+              <Button type="button" onClick={handleAddKeyword} disabled={!keyword.trim()}>
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+
+            {keywords.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-3">
+                {keywords.map((kw, index) => (
+                  <Badge key={index} variant="secondary" className="pl-2 pr-1 py-1 flex items-center gap-1">
+                    {kw}
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveKeyword(index)}
+                      className="ml-1 rounded-full hover:bg-gray-200 p-0.5"
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </Badge>
+                ))}
+              </div>
+            )}
+
+            <div className="mt-3">
+              <p className="text-sm text-gray-500 mb-2">推荐关键词：</p>
+              <div className="flex flex-wrap gap-2">
+                {suggestedKeywords.map((kw) => (
+                  <Badge
+                    key={kw}
+                    variant="outline"
+                    className="cursor-pointer hover:bg-gray-100"
+                    onClick={() => {
+                      if (!keywords.includes(kw)) {
+                        const newKeywords = [...keywords, kw]
+                        setKeywords(newKeywords)
+                        updateFormData({ keywords: newKeywords })
+                      }
+                    }}
+                  >
+                    {kw}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="moments" className="space-y-4 pt-4">
+          <div>
+            <Label htmlFor="promptWords" className="text-base font-medium">
+              分析提示词
+            </Label>
+            <p className="text-sm text-gray-500 mt-1 mb-2">
+              设置辅助AI分析的提示词，如"人群属性"、"喜好分析"等，帮助深入剖析用户类型
+            </p>
+
+            <div className="flex gap-2">
+              <Input
+                id="promptWords"
+                value={promptWord}
+                onChange={(e) => setPromptWord(e.target.value)}
+                onKeyDown={(e) => handleKeyDown(e, "prompt")}
+                placeholder="输入提示词并回车"
+                className="flex-1"
+              />
+              <Button type="button" onClick={handleAddPromptWord} disabled={!promptWord.trim()}>
+                <Plus className="h-4 w-4" />
+              </Button>
+            </div>
+
+            {promptWords.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-3">
+                {promptWords.map((pw, index) => (
+                  <Badge key={index} variant="secondary" className="pl-2 pr-1 py-1 flex items-center gap-1">
+                    {pw}
+                    <button
+                      type="button"
+                      onClick={() => handleRemovePromptWord(index)}
+                      className="ml-1 rounded-full hover:bg-gray-200 p-0.5"
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </Badge>
+                ))}
+              </div>
+            )}
+
+            <div className="mt-3">
+              <p className="text-sm text-gray-500 mb-2">推荐提示词：</p>
+              <div className="flex flex-wrap gap-2">
+                {suggestedPrompts.map((pw) => (
+                  <Badge
+                    key={pw}
+                    variant="outline"
+                    className="cursor-pointer hover:bg-gray-100"
+                    onClick={() => {
+                      if (!promptWords.includes(pw)) {
+                        const newPromptWords = [...promptWords, pw]
+                        setPromptWords(newPromptWords)
+                        updateFormData({ promptWords: newPromptWords })
+                      }
+                    }}
+                  >
+                    {pw}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      <div className="flex justify-between pt-4">
+        <Button variant="outline" onClick={onBack}>
+          返回
+        </Button>
+        <Button
+          onClick={handleContinue}
+          disabled={
+            ((analysisType === "friends" || analysisType === "both") && keywords.length === 0) ||
+            ((analysisType === "moments" || analysisType === "both") && promptWords.length === 0)
+          }
+        >
+          继续
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-analyzer/components/confirm-analysis.tsx b/Cunkebao/app/workspace/ai-analyzer/components/confirm-analysis.tsx
new file mode 100644
index 00000000..e8880503
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/components/confirm-analysis.tsx
@@ -0,0 +1,180 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Smartphone, User, MessageCircle, Mail } from "lucide-react"
+
+interface ConfirmAnalysisProps {
+  formData: any
+  updateFormData: (data: any) => void
+  onSubmit: () => void
+  onBack: () => void
+}
+
+export function ConfirmAnalysis({ formData, updateFormData, onSubmit, onBack }: ConfirmAnalysisProps) {
+  const [planName, setPlanName] = useState(formData.name || "")
+  const [emailReport, setEmailReport] = useState(formData.emailReport || false)
+  const [email, setEmail] = useState(formData.email || "")
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const getAnalysisTypeLabel = (type: string) => {
+    switch (type) {
+      case "friends":
+        return "好友信息分析"
+      case "moments":
+        return "朋友圈内容分析"
+      case "both":
+        return "综合分析"
+      default:
+        return "未知类型"
+    }
+  }
+
+  const handleSubmit = async () => {
+    updateFormData({
+      name: planName,
+      emailReport,
+      email: emailReport ? email : "",
+    })
+
+    setIsSubmitting(true)
+    await onSubmit()
+    setIsSubmitting(false)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold mb-1">确认分析计划</h2>
+        <p className="text-gray-500 text-sm">确认分析计划信息并提交</p>
+      </div>
+
+      <div>
+        <Label htmlFor="planName" className="text-base font-medium">
+          计划名称
+        </Label>
+        <Input
+          id="planName"
+          value={planName}
+          onChange={(e) => setPlanName(e.target.value)}
+          placeholder="输入分析计划名称"
+          className="mt-1"
+        />
+      </div>
+
+      <div className="bg-gray-50 p-4 rounded-lg space-y-4">
+        <h3 className="font-medium">分析计划信息</h3>
+
+        <div className="flex items-start space-x-3">
+          <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+            <Smartphone className="h-4 w-4 text-blue-600" />
+          </div>
+          <div>
+            <p className="font-medium">设备信息</p>
+            <p className="text-sm text-gray-600">{formData.deviceName}</p>
+          </div>
+        </div>
+
+        <div className="flex items-start space-x-3">
+          <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <User className="h-4 w-4 text-green-600" />
+          </div>
+          <div>
+            <p className="font-medium">微信账号</p>
+            <p className="text-sm text-gray-600">
+              {formData.wechatName} ({formData.wechatId})
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-start space-x-3">
+          <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
+            <MessageCircle className="h-4 w-4 text-purple-600" />
+          </div>
+          <div>
+            <p className="font-medium">分析类型</p>
+            <p className="text-sm text-gray-600">{getAnalysisTypeLabel(formData.analysisType)}</p>
+
+            {(formData.analysisType === "friends" || formData.analysisType === "both") &&
+              formData.keywords.length > 0 && (
+                <div className="mt-2">
+                  <p className="text-sm font-medium">用户关键词：</p>
+                  <div className="flex flex-wrap gap-1 mt-1">
+                    {formData.keywords.map((keyword: string, index: number) => (
+                      <Badge key={index} variant="outline" className="text-xs">
+                        {keyword}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+            {(formData.analysisType === "moments" || formData.analysisType === "both") &&
+              formData.promptWords.length > 0 && (
+                <div className="mt-2">
+                  <p className="text-sm font-medium">分析提示词：</p>
+                  <div className="flex flex-wrap gap-1 mt-1">
+                    {formData.promptWords.map((promptWord: string, index: number) => (
+                      <Badge key={index} variant="outline" className="text-xs">
+                        {promptWord}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <div className="flex items-center space-x-2">
+          <Checkbox
+            id="emailReport"
+            checked={emailReport}
+            onCheckedChange={(checked) => {
+              setEmailReport(checked as boolean)
+              if (!checked) {
+                setEmail("")
+              }
+            }}
+          />
+          <Label htmlFor="emailReport" className="font-medium cursor-pointer">
+            分析完成后发送报告到邮箱
+          </Label>
+        </div>
+
+        {emailReport && (
+          <div className="pl-6">
+            <Label htmlFor="email" className="text-sm">
+              邮箱地址
+            </Label>
+            <div className="flex items-center mt-1">
+              <Mail className="h-4 w-4 text-gray-400 mr-2" />
+              <Input
+                id="email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="输入接收报告的邮箱地址"
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-between pt-4">
+        <Button variant="outline" onClick={onBack}>
+          返回
+        </Button>
+        <Button onClick={handleSubmit} disabled={!planName.trim() || (emailReport && !email.trim()) || isSubmitting}>
+          {isSubmitting ? "提交中..." : "开始分析"}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-analyzer/components/device-selection.tsx b/Cunkebao/app/workspace/ai-analyzer/components/device-selection.tsx
new file mode 100644
index 00000000..6e1f7926
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/components/device-selection.tsx
@@ -0,0 +1,215 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card } from "@/components/ui/card"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Search, Smartphone } from "lucide-react"
+
+interface Device {
+  id: string
+  name: string
+  status: "online" | "offline"
+  wechatAccounts: {
+    id: string
+    nickname: string
+    wechatId: string
+  }[]
+}
+
+interface DeviceSelectionProps {
+  formData: any
+  updateFormData: (data: any) => void
+  onNext: () => void
+}
+
+export function DeviceSelection({ formData, updateFormData, onNext }: DeviceSelectionProps) {
+  const [devices, setDevices] = useState<Device[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedDevice, setSelectedDevice] = useState<string>(formData.deviceId || "")
+  const [selectedWechatAccount, setSelectedWechatAccount] = useState<string>(formData.wechatId || "")
+
+  useEffect(() => {
+    // 模拟加载设备数据
+    const fetchDevices = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      const mockDevices: Device[] = [
+        {
+          id: "device-1",
+          name: "iPhone 13",
+          status: "online",
+          wechatAccounts: [
+            { id: "wx-1", nickname: "张小明", wechatId: "wxid_zhang123" },
+            { id: "wx-2", nickname: "李业务", wechatId: "wxid_libiz456" },
+          ],
+        },
+        {
+          id: "device-2",
+          name: "华为 P40",
+          status: "online",
+          wechatAccounts: [{ id: "wx-3", nickname: "王经理", wechatId: "wxid_wang789" }],
+        },
+        {
+          id: "device-3",
+          name: "小米 12",
+          status: "offline",
+          wechatAccounts: [
+            { id: "wx-4", nickname: "赵销售", wechatId: "wxid_zhao321" },
+            { id: "wx-5", nickname: "陈顾问", wechatId: "wxid_chen654" },
+          ],
+        },
+      ]
+
+      setDevices(mockDevices)
+      setIsLoading(false)
+    }
+
+    fetchDevices()
+  }, [])
+
+  const filteredDevices = devices.filter(
+    (device) =>
+      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.wechatAccounts.some(
+        (account) =>
+          account.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          account.wechatId.toLowerCase().includes(searchQuery.toLowerCase()),
+      ),
+  )
+
+  const handleDeviceSelect = (deviceId: string) => {
+    setSelectedDevice(deviceId)
+    setSelectedWechatAccount("") // 重置微信账号选择
+
+    const selectedDeviceData = devices.find((d) => d.id === deviceId)
+    if (selectedDeviceData) {
+      updateFormData({
+        deviceId,
+        deviceName: selectedDeviceData.name,
+        wechatId: "",
+        wechatName: "",
+      })
+    }
+  }
+
+  const handleWechatSelect = (wechatId: string) => {
+    setSelectedWechatAccount(wechatId)
+
+    const selectedDeviceData = devices.find((d) => d.id === selectedDevice)
+    if (selectedDeviceData) {
+      const selectedWechatData = selectedDeviceData.wechatAccounts.find((w) => w.id === wechatId)
+      if (selectedWechatData) {
+        updateFormData({
+          wechatId: wechatId,
+          wechatName: selectedWechatData.nickname,
+        })
+      }
+    }
+  }
+
+  const handleContinue = () => {
+    if (selectedDevice && selectedWechatAccount) {
+      onNext()
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold mb-1">选择设备与微信号</h2>
+        <p className="text-gray-500 text-sm">选择要进行AI数据分析的设备和微信账号</p>
+      </div>
+
+      <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>
+
+      {isLoading ? (
+        <div className="flex justify-center py-12">
+          <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <div>
+            <Label className="text-base font-medium">1. 选择设备</Label>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-2">
+              {filteredDevices.map((device) => (
+                <Card
+                  key={device.id}
+                  className={`p-3 cursor-pointer hover:shadow-md transition-shadow ${
+                    selectedDevice === device.id ? "ring-2 ring-blue-500" : ""
+                  } ${device.status === "offline" ? "opacity-60" : ""}`}
+                  onClick={() => device.status === "online" && handleDeviceSelect(device.id)}
+                >
+                  <div className="flex items-center">
+                    <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3">
+                      <Smartphone className="h-5 w-5 text-gray-600" />
+                    </div>
+                    <div className="flex-1">
+                      <div className="font-medium">{device.name}</div>
+                      <div className="text-sm text-gray-500">{device.wechatAccounts.length} 个微信账号</div>
+                    </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>
+                </Card>
+              ))}
+
+              {filteredDevices.length === 0 && (
+                <div className="col-span-2 text-center py-8 bg-gray-50 rounded-lg border">
+                  <p className="text-gray-500">未找到匹配的设备</p>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {selectedDevice && (
+            <div>
+              <Label className="text-base font-medium">2. 选择微信账号</Label>
+              <RadioGroup value={selectedWechatAccount} onValueChange={handleWechatSelect} className="mt-2 space-y-2">
+                {devices
+                  .find((d) => d.id === selectedDevice)
+                  ?.wechatAccounts.map((account) => (
+                    <div key={account.id} className="flex items-center space-x-2">
+                      <RadioGroupItem value={account.id} id={account.id} />
+                      <Label htmlFor={account.id} className="flex items-center cursor-pointer">
+                        <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-2">
+                          <span className="text-sm font-medium">{account.nickname[0]}</span>
+                        </div>
+                        <div>
+                          <div className="font-medium">{account.nickname}</div>
+                          <div className="text-xs text-gray-500">{account.wechatId}</div>
+                        </div>
+                      </Label>
+                    </div>
+                  ))}
+              </RadioGroup>
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="flex justify-end pt-4">
+        <Button onClick={handleContinue} disabled={!selectedDevice || !selectedWechatAccount}>
+          继续
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-analyzer/components/step-indicator.tsx b/Cunkebao/app/workspace/ai-analyzer/components/step-indicator.tsx
new file mode 100644
index 00000000..ec646d26
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/components/step-indicator.tsx
@@ -0,0 +1,43 @@
+import React from "react"
+
+interface Step {
+  number: number
+  title: string
+}
+
+interface StepIndicatorProps {
+  currentStep: number
+  steps: Step[]
+}
+
+export function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
+  return (
+    <div className="flex items-center justify-between">
+      {steps.map((step, index) => {
+        const isActive = currentStep >= step.number
+        const isLast = index === steps.length - 1
+
+        return (
+          <React.Fragment key={step.number}>
+            <div className="flex items-center">
+              <div
+                className={`flex items-center justify-center w-8 h-8 rounded-full ${
+                  isActive ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-500"
+                }`}
+              >
+                {step.number}
+              </div>
+              <span className={`ml-2 text-sm font-medium ${isActive ? "text-blue-600" : "text-gray-500"}`}>
+                {step.title}
+              </span>
+            </div>
+            {!isLast && (
+              <div className={`flex-1 h-0.5 mx-4 ${currentStep > step.number ? "bg-blue-600" : "bg-gray-200"}`} />
+            )}
+          </React.Fragment>
+        )
+      })}
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-analyzer/create/components/basic-settings.tsx b/Cunkebao/app/workspace/ai-analyzer/create/components/basic-settings.tsx
new file mode 100644
index 00000000..00c6bc25
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/create/components/basic-settings.tsx
@@ -0,0 +1,165 @@
+"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 { Checkbox } from "@/components/ui/checkbox"
+import { Card } from "@/components/ui/card"
+import { BarChart3, Users, Activity, Brain, Search } from "lucide-react"
+
+interface BasicSettingsProps {
+  formData: {
+    taskName: string
+    analysisTypes: string[]
+  }
+  updateFormData: (
+    data: Partial<{
+      taskName: string
+      analysisTypes: string[]
+    }>,
+  ) => void
+  onNext: () => void
+}
+
+interface AnalysisType {
+  id: string
+  name: string
+  description: string
+  icon: React.ReactNode
+}
+
+export function BasicSettings({ formData, updateFormData, onNext }: BasicSettingsProps) {
+  const [errors, setErrors] = useState<{ taskName?: string; analysisTypes?: string }>({})
+
+  const analysisTypes: AnalysisType[] = [
+    {
+      id: "comprehensive",
+      name: "综合分析",
+      description: "全面分析用户画像、行为习惯和互动模式",
+      icon: <Brain className="h-5 w-5 text-blue-500" />,
+    },
+    {
+      id: "friend-info",
+      name: "好友信息分析",
+      description: "分析好友基本信息、地域分布和标签特征",
+      icon: <Users className="h-5 w-5 text-green-500" />,
+    },
+    {
+      id: "user-behavior",
+      name: "用户行为分析",
+      description: "分析用户互动频率、活跃时间和内容偏好",
+      icon: <Activity className="h-5 w-5 text-purple-500" />,
+    },
+    {
+      id: "content-preference",
+      name: "内容偏好分析",
+      description: "分析用户对不同类型内容的反应和互动情况",
+      icon: <BarChart3 className="h-5 w-5 text-orange-500" />,
+    },
+    {
+      id: "keyword-analysis",
+      name: "关键词分析",
+      description: "分析用户聊天和互动中的高频关键词和话题",
+      icon: <Search className="h-5 w-5 text-red-500" />,
+    },
+  ]
+
+  const handleAnalysisTypeChange = (typeId: string, checked: boolean) => {
+    if (checked) {
+      updateFormData({
+        analysisTypes: [...formData.analysisTypes, typeId],
+      })
+    } else {
+      updateFormData({
+        analysisTypes: formData.analysisTypes.filter((id) => id !== typeId),
+      })
+    }
+  }
+
+  const validateForm = () => {
+    const newErrors: { taskName?: string; analysisTypes?: string } = {}
+
+    if (!formData.taskName.trim()) {
+      newErrors.taskName = "请输入任务名称"
+    }
+
+    if (formData.analysisTypes.length === 0) {
+      newErrors.analysisTypes = "请至少选择一种分析类型"
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleNext = () => {
+    if (validateForm()) {
+      onNext()
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold mb-4">创建分析计划</h2>
+        <p className="text-gray-500 mb-6">设置分析任务名称并选择需要的分析类型</p>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <Label htmlFor="taskName" className="text-base">
+            任务名称
+          </Label>
+          <Input
+            id="taskName"
+            placeholder="例如：11月用户行为分析"
+            value={formData.taskName}
+            onChange={(e) => updateFormData({ taskName: e.target.value })}
+            className="mt-1"
+          />
+          {errors.taskName && <p className="text-red-500 text-sm mt-1">{errors.taskName}</p>}
+        </div>
+
+        <div className="space-y-3">
+          <Label className="text-base">分析类型（可多选）</Label>
+
+          {errors.analysisTypes && <p className="text-red-500 text-sm">{errors.analysisTypes}</p>}
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {analysisTypes.map((type) => (
+              <Card
+                key={type.id}
+                className={`p-4 cursor-pointer hover:shadow-md transition-shadow ${
+                  formData.analysisTypes.includes(type.id) ? "border-2 border-blue-500" : ""
+                }`}
+              >
+                <div className="flex items-start space-x-3">
+                  <Checkbox
+                    id={`type-${type.id}`}
+                    checked={formData.analysisTypes.includes(type.id)}
+                    onCheckedChange={(checked) => handleAnalysisTypeChange(type.id, checked as boolean)}
+                    className="mt-1"
+                  />
+                  <div className="flex-1">
+                    <Label htmlFor={`type-${type.id}`} className="flex items-center cursor-pointer">
+                      <div className="mr-2">{type.icon}</div>
+                      <span className="font-medium">{type.name}</span>
+                    </Label>
+                    <p className="text-sm text-gray-500 mt-1">{type.description}</p>
+                  </div>
+                </div>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-end pt-4">
+        <Button onClick={handleNext}>下一步</Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-analyzer/create/components/target-selection.tsx b/Cunkebao/app/workspace/ai-analyzer/create/components/target-selection.tsx
new file mode 100644
index 00000000..28044e3e
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/create/components/target-selection.tsx
@@ -0,0 +1,397 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Search, Tag, MapPin } from "lucide-react"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { AlertCircle } from "lucide-react"
+import { DeviceSelector } from "@/app/components/DeviceSelector"
+
+interface TargetSelectionProps {
+  formData: {
+    targetType: string
+    selectedDevices: string[]
+    selectedTrafficPool: string
+    tags: string[]
+    regions: string[]
+    keywords: string[]
+  }
+  updateFormData: (
+    data: Partial<{
+      targetType: string
+      selectedDevices: string[]
+      selectedTrafficPool: string
+      tags: string[]
+      regions: string[]
+      keywords: string[]
+    }>,
+  ) => void
+  onSubmit: () => void
+  onBack: () => void
+}
+
+interface TrafficUser {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  phone: string
+  region: string
+  tags: string[]
+  addTime: string
+  source: string
+}
+
+export function TargetSelection({ formData, updateFormData, onSubmit, onBack }: TargetSelectionProps) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [trafficUsers, setTrafficUsers] = useState<TrafficUser[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [selectedRegions, setSelectedRegions] = useState<string[]>([])
+  const [errors, setErrors] = useState<{ selection?: string }>({})
+
+  // 模拟加载流量池用户数据
+  useEffect(() => {
+    const fetchTrafficUsers = async () => {
+      setIsLoading(true)
+      await new Promise((resolve) => setTimeout(resolve, 800))
+
+      const mockUsers: TrafficUser[] = [
+        {
+          id: "user-1",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "张小明",
+          wechatId: "zhangxm123",
+          phone: "138****1234",
+          region: "北京",
+          tags: ["新用户", "低活跃度"],
+          addTime: "2023-10-15",
+          source: "朋友圈",
+        },
+        {
+          id: "user-2",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "李华",
+          wechatId: "lihua456",
+          phone: "139****5678",
+          region: "上海",
+          tags: ["高消费", "高活跃度"],
+          addTime: "2023-09-20",
+          source: "群聊",
+        },
+        {
+          id: "user-3",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "王芳",
+          wechatId: "wangfang789",
+          phone: "137****9012",
+          region: "广州",
+          tags: ["潜在客户", "有购买意向"],
+          addTime: "2023-11-05",
+          source: "搜索",
+        },
+        {
+          id: "user-4",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "赵明",
+          wechatId: "zhaoming321",
+          phone: "136****3456",
+          region: "深圳",
+          tags: ["网购达人", "中高消费"],
+          addTime: "2023-10-28",
+          source: "附近的人",
+        },
+        {
+          id: "user-5",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "刘洋",
+          wechatId: "liuyang654",
+          phone: "135****7890",
+          region: "杭州",
+          tags: ["90后", "学生"],
+          addTime: "2023-11-10",
+          source: "名片",
+        },
+        {
+          id: "user-6",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "陈静",
+          wechatId: "chenjing987",
+          phone: "134****1234",
+          region: "成都",
+          tags: ["00后", "学生"],
+          addTime: "2023-11-15",
+          source: "朋友推荐",
+        },
+        {
+          id: "user-7",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "林小红",
+          wechatId: "linxh123",
+          phone: "133****5678",
+          region: "南京",
+          tags: ["潜在客户", "华东地区"],
+          addTime: "2023-10-05",
+          source: "扫码",
+        },
+        {
+          id: "user-8",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "黄强",
+          wechatId: "huangq456",
+          phone: "132****9012",
+          region: "武汉",
+          tags: ["高消费", "有购买意向"],
+          addTime: "2023-09-15",
+          source: "朋友圈",
+        },
+      ]
+
+      setTrafficUsers(mockUsers)
+      setIsLoading(false)
+    }
+
+    fetchTrafficUsers()
+  }, [])
+
+  const allTags = Array.from(new Set(trafficUsers.flatMap((user) => user.tags)))
+  const allRegions = Array.from(new Set(trafficUsers.map((user) => user.region)))
+
+  const filteredUsers = trafficUsers.filter((user) => {
+    const matchesSearch =
+      user.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.region.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))
+
+    const matchesTags = selectedTags.length === 0 || selectedTags.some((tag) => user.tags.includes(tag))
+
+    const matchesRegions = selectedRegions.length === 0 || selectedRegions.includes(user.region)
+
+    return matchesSearch && matchesTags && matchesRegions
+  })
+
+  const handleDeviceSelect = (deviceIds: string[]) => {
+    updateFormData({ selectedDevices: deviceIds })
+  }
+
+  const handleUserSelect = (userId: string) => {
+    updateFormData({
+      selectedTrafficPool: userId === formData.selectedTrafficPool ? "" : userId,
+    })
+  }
+
+  const handleTagSelect = (tag: string) => {
+    setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]))
+  }
+
+  const handleRegionSelect = (region: string) => {
+    setSelectedRegions((prev) => (prev.includes(region) ? prev.filter((r) => r !== region) : [...prev, region]))
+  }
+
+  const validateForm = () => {
+    const newErrors: { selection?: string } = {}
+
+    if (formData.targetType === "device" && formData.selectedDevices.length === 0) {
+      newErrors.selection = "请至少选择一个设备"
+    } else if (formData.targetType === "trafficPool" && !formData.selectedTrafficPool) {
+      newErrors.selection = "请选择一个流量池"
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = () => {
+    if (validateForm()) {
+      onSubmit()
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold mb-4">选择分析对象</h2>
+        <p className="text-gray-500 mb-6">选择要分析的设备或流量池</p>
+      </div>
+
+      <Tabs
+        defaultValue="device"
+        onValueChange={(value) => updateFormData({ targetType: value })}
+        value={formData.targetType}
+      >
+        <TabsList className="grid w-full grid-cols-2 mb-6">
+          <TabsTrigger value="device">设备列表</TabsTrigger>
+          <TabsTrigger value="trafficPool">流量池</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="device" className="space-y-4">
+          <DeviceSelector
+            onSelect={handleDeviceSelect}
+            initialSelectedDevices={formData.selectedDevices}
+            excludeUsedDevices={false}
+          />
+
+          {errors.selection && formData.targetType === "device" && (
+            <p className="text-red-500 text-sm">{errors.selection}</p>
+          )}
+        </TabsContent>
+
+        <TabsContent value="trafficPool" className="space-y-6">
+          <div className="flex flex-col 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>
+            </div>
+
+            <div className="flex flex-wrap gap-2 items-center">
+              <Label className="flex items-center">
+                <Tag className="h-4 w-4 mr-1" />
+                <span>标签筛选:</span>
+              </Label>
+              <div className="flex flex-wrap gap-1">
+                {allTags.map((tag) => (
+                  <Badge
+                    key={tag}
+                    variant={selectedTags.includes(tag) ? "default" : "outline"}
+                    className="cursor-pointer"
+                    onClick={() => handleTagSelect(tag)}
+                  >
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-2 items-center">
+              <Label className="flex items-center">
+                <MapPin className="h-4 w-4 mr-1" />
+                <span>地区筛选:</span>
+              </Label>
+              <div className="flex flex-wrap gap-1">
+                {allRegions.map((region) => (
+                  <Badge
+                    key={region}
+                    variant={selectedRegions.includes(region) ? "default" : "outline"}
+                    className="cursor-pointer"
+                    onClick={() => handleRegionSelect(region)}
+                  >
+                    {region}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {isLoading ? (
+            <div className="flex justify-center py-12">
+              <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+            </div>
+          ) : (
+            <div className="overflow-hidden rounded-md border">
+              <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>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredUsers.map((user) => (
+                    <tr
+                      key={user.id}
+                      className={`border-t hover:bg-gray-50 cursor-pointer ${
+                        formData.selectedTrafficPool === user.id ? "bg-blue-50" : ""
+                      }`}
+                      onClick={() => handleUserSelect(user.id)}
+                    >
+                      <td className="px-4 py-3 text-sm">
+                        <div className="flex items-center">
+                          <div className="h-8 w-8 flex-shrink-0 rounded-full overflow-hidden mr-3">
+                            <img
+                              src={user.avatar || "/placeholder.svg"}
+                              alt={user.nickname}
+                              className="h-full w-full object-cover"
+                            />
+                          </div>
+                          <div>
+                            <div className="font-medium">{user.nickname}</div>
+                            <div className="text-gray-500 text-xs">{user.phone}</div>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 text-sm">{user.wechatId}</td>
+                      <td className="px-4 py-3 text-sm">{user.region}</td>
+                      <td className="px-4 py-3 text-sm">
+                        <div className="flex flex-wrap gap-1">
+                          {user.tags.map((tag) => (
+                            <Badge key={tag} variant="secondary" className="text-xs">
+                              {tag}
+                            </Badge>
+                          ))}
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 text-sm">{user.source}</td>
+                      <td className="px-4 py-3 text-sm">{user.addTime}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {filteredUsers.length === 0 && !isLoading && (
+            <div className="text-center py-8 bg-gray-50 rounded-lg border">
+              <p className="text-gray-500">没有找到符合条件的微信用户</p>
+            </div>
+          )}
+
+          {errors.selection && formData.targetType === "trafficPool" && (
+            <p className="text-red-500 text-sm">{errors.selection}</p>
+          )}
+        </TabsContent>
+      </Tabs>
+
+      {formData.targetType === "device" && formData.selectedDevices.length > 0 && (
+        <Alert className="bg-blue-50 border-blue-200">
+          <AlertCircle className="h-4 w-4 text-blue-500" />
+          <AlertDescription className="text-blue-700">
+            已选择 {formData.selectedDevices.length} 个设备进行分析
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {formData.targetType === "trafficPool" && formData.selectedTrafficPool && (
+        <Alert className="bg-blue-50 border-blue-200">
+          <AlertCircle className="h-4 w-4 text-blue-500" />
+          <AlertDescription className="text-blue-700">
+            已选择用户: {trafficUsers.find((u) => u.id === formData.selectedTrafficPool)?.nickname}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <div className="flex justify-between pt-4">
+        <Button variant="outline" onClick={onBack}>
+          上一步
+        </Button>
+        <Button onClick={handleSubmit}>提交</Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-analyzer/create/page.tsx b/Cunkebao/app/workspace/ai-analyzer/create/page.tsx
new file mode 100644
index 00000000..59836824
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/create/page.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { BasicSettings } from "./components/basic-settings"
+import { TargetSelection } from "./components/target-selection"
+import { Card, CardContent } from "@/components/ui/card"
+import { Steps, Step } from "@/components/ui/steps"
+import { useToast } from "@/components/ui/use-toast"
+
+export default function CreateAnalyzerPage() {
+  const router = useRouter()
+  const { toast } = useToast()
+  const [currentStep, setCurrentStep] = useState(0)
+
+  const [formData, setFormData] = useState({
+    taskName: "",
+    analysisTypes: [] as string[],
+    targetType: "device",
+    selectedDevices: [] as string[],
+    selectedTrafficPool: "",
+    tags: [] as string[],
+    regions: [] as string[],
+    keywords: [] as string[],
+  })
+
+  const updateFormData = (data: Partial<typeof formData>) => {
+    setFormData((prev) => ({ ...prev, ...data }))
+  }
+
+  const handleNext = () => {
+    setCurrentStep(1)
+  }
+
+  const handleBack = () => {
+    setCurrentStep(0)
+  }
+
+  const handleSubmit = async () => {
+    // 模拟提交
+    try {
+      // 显示加载状态
+      toast({
+        title: "正在创建分析计划...",
+        description: "请稍候",
+      })
+
+      // 模拟API请求延迟
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+
+      // 成功提示
+      toast({
+        title: "分析计划创建成功",
+        description: "您可以在列表中查看分析进度",
+        variant: "success",
+      })
+
+      // 跳转回列表页
+      router.push("/workspace/ai-analyzer")
+    } catch (error) {
+      toast({
+        title: "创建失败",
+        description: "请稍后重试",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const steps = [
+    { id: "basic", title: "基础设置" },
+    { id: "target", title: "选择分析对象" },
+  ]
+
+  return (
+    <div className="container max-w-4xl py-6">
+      <div className="mb-8">
+        <Steps currentStep={currentStep} className="mb-8">
+          {steps.map((step, index) => (
+            <Step key={step.id} title={step.title} />
+          ))}
+        </Steps>
+      </div>
+
+      <Card>
+        <CardContent className="pt-6">
+          {currentStep === 0 && (
+            <BasicSettings formData={formData} updateFormData={updateFormData} onNext={handleNext} />
+          )}
+
+          {currentStep === 1 && (
+            <TargetSelection
+              formData={formData}
+              updateFormData={updateFormData}
+              onBack={handleBack}
+              onSubmit={handleSubmit}
+            />
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-analyzer/new/components/basic-settings.tsx b/Cunkebao/app/workspace/ai-analyzer/new/components/basic-settings.tsx
new file mode 100644
index 00000000..80e30cda
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/new/components/basic-settings.tsx
@@ -0,0 +1,124 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Checkbox } from "@/components/ui/checkbox"
+import { AlertCircle } from "lucide-react"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+
+interface BasicSettingsProps {
+  formData: {
+    taskName: string
+    analysisTypes: string[]
+  }
+  updateFormData: (
+    data: Partial<{
+      taskName: string
+      analysisTypes: string[]
+    }>,
+  ) => void
+  onNext: () => void
+}
+
+const analysisTypeOptions = [
+  { id: "comprehensive", label: "综合分析" },
+  { id: "friends", label: "好友信息分析" },
+  { id: "behavior", label: "用户行为分析" },
+  { id: "moments", label: "朋友圈内容分析" },
+  { id: "interaction", label: "互动频率分析" },
+]
+
+export function BasicSettings({ formData, updateFormData, onNext }: BasicSettingsProps) {
+  const [errors, setErrors] = useState<{ taskName?: string; analysisTypes?: string }>({})
+
+  const validateForm = () => {
+    const newErrors: { taskName?: string; analysisTypes?: string } = {}
+
+    if (!formData.taskName?.trim()) {
+      newErrors.taskName = "请输入任务名称"
+    }
+
+    if (formData.analysisTypes.length === 0) {
+      newErrors.analysisTypes = "请至少选择一种分析类型"
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleNext = () => {
+    if (validateForm()) {
+      onNext()
+    }
+  }
+
+  const handleTypeChange = (typeId: string, checked: boolean) => {
+    const newTypes = checked
+      ? [...formData.analysisTypes, typeId]
+      : formData.analysisTypes.filter((id) => id !== typeId)
+
+    updateFormData({ analysisTypes: newTypes })
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold mb-4">基础设置</h2>
+        <p className="text-gray-500 mb-6">设置分析计划的基本信息和分析类型</p>
+      </div>
+
+      <div className="space-y-4">
+        <div>
+          <Label htmlFor="task-name" className="text-base">
+            任务名称
+          </Label>
+          <Input
+            id="task-name"
+            placeholder="请输入任务名称"
+            value={formData.taskName || ""}
+            onChange={(e) => updateFormData({ taskName: e.target.value })}
+            className="mt-1"
+          />
+          {errors.taskName && <p className="text-red-500 text-sm mt-1">{errors.taskName}</p>}
+        </div>
+
+        <div className="space-y-3">
+          <Label className="text-base">分析类型</Label>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {analysisTypeOptions.map((option) => (
+              <div key={option.id} className="flex items-center space-x-2 bg-gray-50 p-3 rounded-md">
+                <Checkbox
+                  id={option.id}
+                  checked={formData.analysisTypes.includes(option.id)}
+                  onCheckedChange={(checked) => handleTypeChange(option.id, checked === true)}
+                />
+                <Label htmlFor={option.id} className="cursor-pointer">
+                  {option.label}
+                </Label>
+              </div>
+            ))}
+          </div>
+          {errors.analysisTypes && <p className="text-red-500 text-sm">{errors.analysisTypes}</p>}
+        </div>
+
+        {formData.analysisTypes.length > 0 && (
+          <Alert className="bg-blue-50 border-blue-200">
+            <AlertCircle className="h-4 w-4 text-blue-500" />
+            <AlertDescription className="text-blue-700">
+              已选择 {formData.analysisTypes.length} 种分析类型，分析结果将更加全面
+            </AlertDescription>
+          </Alert>
+        )}
+      </div>
+
+      <div className="flex justify-end pt-4">
+        <Button onClick={handleNext} className="w-32">
+          下一步
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-analyzer/new/components/target-selection.tsx b/Cunkebao/app/workspace/ai-analyzer/new/components/target-selection.tsx
new file mode 100644
index 00000000..28044e3e
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/new/components/target-selection.tsx
@@ -0,0 +1,397 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Search, Tag, MapPin } from "lucide-react"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { AlertCircle } from "lucide-react"
+import { DeviceSelector } from "@/app/components/DeviceSelector"
+
+interface TargetSelectionProps {
+  formData: {
+    targetType: string
+    selectedDevices: string[]
+    selectedTrafficPool: string
+    tags: string[]
+    regions: string[]
+    keywords: string[]
+  }
+  updateFormData: (
+    data: Partial<{
+      targetType: string
+      selectedDevices: string[]
+      selectedTrafficPool: string
+      tags: string[]
+      regions: string[]
+      keywords: string[]
+    }>,
+  ) => void
+  onSubmit: () => void
+  onBack: () => void
+}
+
+interface TrafficUser {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  phone: string
+  region: string
+  tags: string[]
+  addTime: string
+  source: string
+}
+
+export function TargetSelection({ formData, updateFormData, onSubmit, onBack }: TargetSelectionProps) {
+  const [isLoading, setIsLoading] = useState(false)
+  const [trafficUsers, setTrafficUsers] = useState<TrafficUser[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const [selectedRegions, setSelectedRegions] = useState<string[]>([])
+  const [errors, setErrors] = useState<{ selection?: string }>({})
+
+  // 模拟加载流量池用户数据
+  useEffect(() => {
+    const fetchTrafficUsers = async () => {
+      setIsLoading(true)
+      await new Promise((resolve) => setTimeout(resolve, 800))
+
+      const mockUsers: TrafficUser[] = [
+        {
+          id: "user-1",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "张小明",
+          wechatId: "zhangxm123",
+          phone: "138****1234",
+          region: "北京",
+          tags: ["新用户", "低活跃度"],
+          addTime: "2023-10-15",
+          source: "朋友圈",
+        },
+        {
+          id: "user-2",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "李华",
+          wechatId: "lihua456",
+          phone: "139****5678",
+          region: "上海",
+          tags: ["高消费", "高活跃度"],
+          addTime: "2023-09-20",
+          source: "群聊",
+        },
+        {
+          id: "user-3",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "王芳",
+          wechatId: "wangfang789",
+          phone: "137****9012",
+          region: "广州",
+          tags: ["潜在客户", "有购买意向"],
+          addTime: "2023-11-05",
+          source: "搜索",
+        },
+        {
+          id: "user-4",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "赵明",
+          wechatId: "zhaoming321",
+          phone: "136****3456",
+          region: "深圳",
+          tags: ["网购达人", "中高消费"],
+          addTime: "2023-10-28",
+          source: "附近的人",
+        },
+        {
+          id: "user-5",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "刘洋",
+          wechatId: "liuyang654",
+          phone: "135****7890",
+          region: "杭州",
+          tags: ["90后", "学生"],
+          addTime: "2023-11-10",
+          source: "名片",
+        },
+        {
+          id: "user-6",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "陈静",
+          wechatId: "chenjing987",
+          phone: "134****1234",
+          region: "成都",
+          tags: ["00后", "学生"],
+          addTime: "2023-11-15",
+          source: "朋友推荐",
+        },
+        {
+          id: "user-7",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "林小红",
+          wechatId: "linxh123",
+          phone: "133****5678",
+          region: "南京",
+          tags: ["潜在客户", "华东地区"],
+          addTime: "2023-10-05",
+          source: "扫码",
+        },
+        {
+          id: "user-8",
+          avatar: "/placeholder.svg?height=40&width=40",
+          nickname: "黄强",
+          wechatId: "huangq456",
+          phone: "132****9012",
+          region: "武汉",
+          tags: ["高消费", "有购买意向"],
+          addTime: "2023-09-15",
+          source: "朋友圈",
+        },
+      ]
+
+      setTrafficUsers(mockUsers)
+      setIsLoading(false)
+    }
+
+    fetchTrafficUsers()
+  }, [])
+
+  const allTags = Array.from(new Set(trafficUsers.flatMap((user) => user.tags)))
+  const allRegions = Array.from(new Set(trafficUsers.map((user) => user.region)))
+
+  const filteredUsers = trafficUsers.filter((user) => {
+    const matchesSearch =
+      user.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.wechatId.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.region.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      user.tags.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))
+
+    const matchesTags = selectedTags.length === 0 || selectedTags.some((tag) => user.tags.includes(tag))
+
+    const matchesRegions = selectedRegions.length === 0 || selectedRegions.includes(user.region)
+
+    return matchesSearch && matchesTags && matchesRegions
+  })
+
+  const handleDeviceSelect = (deviceIds: string[]) => {
+    updateFormData({ selectedDevices: deviceIds })
+  }
+
+  const handleUserSelect = (userId: string) => {
+    updateFormData({
+      selectedTrafficPool: userId === formData.selectedTrafficPool ? "" : userId,
+    })
+  }
+
+  const handleTagSelect = (tag: string) => {
+    setSelectedTags((prev) => (prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]))
+  }
+
+  const handleRegionSelect = (region: string) => {
+    setSelectedRegions((prev) => (prev.includes(region) ? prev.filter((r) => r !== region) : [...prev, region]))
+  }
+
+  const validateForm = () => {
+    const newErrors: { selection?: string } = {}
+
+    if (formData.targetType === "device" && formData.selectedDevices.length === 0) {
+      newErrors.selection = "请至少选择一个设备"
+    } else if (formData.targetType === "trafficPool" && !formData.selectedTrafficPool) {
+      newErrors.selection = "请选择一个流量池"
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = () => {
+    if (validateForm()) {
+      onSubmit()
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold mb-4">选择分析对象</h2>
+        <p className="text-gray-500 mb-6">选择要分析的设备或流量池</p>
+      </div>
+
+      <Tabs
+        defaultValue="device"
+        onValueChange={(value) => updateFormData({ targetType: value })}
+        value={formData.targetType}
+      >
+        <TabsList className="grid w-full grid-cols-2 mb-6">
+          <TabsTrigger value="device">设备列表</TabsTrigger>
+          <TabsTrigger value="trafficPool">流量池</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="device" className="space-y-4">
+          <DeviceSelector
+            onSelect={handleDeviceSelect}
+            initialSelectedDevices={formData.selectedDevices}
+            excludeUsedDevices={false}
+          />
+
+          {errors.selection && formData.targetType === "device" && (
+            <p className="text-red-500 text-sm">{errors.selection}</p>
+          )}
+        </TabsContent>
+
+        <TabsContent value="trafficPool" className="space-y-6">
+          <div className="flex flex-col 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>
+            </div>
+
+            <div className="flex flex-wrap gap-2 items-center">
+              <Label className="flex items-center">
+                <Tag className="h-4 w-4 mr-1" />
+                <span>标签筛选:</span>
+              </Label>
+              <div className="flex flex-wrap gap-1">
+                {allTags.map((tag) => (
+                  <Badge
+                    key={tag}
+                    variant={selectedTags.includes(tag) ? "default" : "outline"}
+                    className="cursor-pointer"
+                    onClick={() => handleTagSelect(tag)}
+                  >
+                    {tag}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-2 items-center">
+              <Label className="flex items-center">
+                <MapPin className="h-4 w-4 mr-1" />
+                <span>地区筛选:</span>
+              </Label>
+              <div className="flex flex-wrap gap-1">
+                {allRegions.map((region) => (
+                  <Badge
+                    key={region}
+                    variant={selectedRegions.includes(region) ? "default" : "outline"}
+                    className="cursor-pointer"
+                    onClick={() => handleRegionSelect(region)}
+                  >
+                    {region}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {isLoading ? (
+            <div className="flex justify-center py-12">
+              <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+            </div>
+          ) : (
+            <div className="overflow-hidden rounded-md border">
+              <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>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filteredUsers.map((user) => (
+                    <tr
+                      key={user.id}
+                      className={`border-t hover:bg-gray-50 cursor-pointer ${
+                        formData.selectedTrafficPool === user.id ? "bg-blue-50" : ""
+                      }`}
+                      onClick={() => handleUserSelect(user.id)}
+                    >
+                      <td className="px-4 py-3 text-sm">
+                        <div className="flex items-center">
+                          <div className="h-8 w-8 flex-shrink-0 rounded-full overflow-hidden mr-3">
+                            <img
+                              src={user.avatar || "/placeholder.svg"}
+                              alt={user.nickname}
+                              className="h-full w-full object-cover"
+                            />
+                          </div>
+                          <div>
+                            <div className="font-medium">{user.nickname}</div>
+                            <div className="text-gray-500 text-xs">{user.phone}</div>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 text-sm">{user.wechatId}</td>
+                      <td className="px-4 py-3 text-sm">{user.region}</td>
+                      <td className="px-4 py-3 text-sm">
+                        <div className="flex flex-wrap gap-1">
+                          {user.tags.map((tag) => (
+                            <Badge key={tag} variant="secondary" className="text-xs">
+                              {tag}
+                            </Badge>
+                          ))}
+                        </div>
+                      </td>
+                      <td className="px-4 py-3 text-sm">{user.source}</td>
+                      <td className="px-4 py-3 text-sm">{user.addTime}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {filteredUsers.length === 0 && !isLoading && (
+            <div className="text-center py-8 bg-gray-50 rounded-lg border">
+              <p className="text-gray-500">没有找到符合条件的微信用户</p>
+            </div>
+          )}
+
+          {errors.selection && formData.targetType === "trafficPool" && (
+            <p className="text-red-500 text-sm">{errors.selection}</p>
+          )}
+        </TabsContent>
+      </Tabs>
+
+      {formData.targetType === "device" && formData.selectedDevices.length > 0 && (
+        <Alert className="bg-blue-50 border-blue-200">
+          <AlertCircle className="h-4 w-4 text-blue-500" />
+          <AlertDescription className="text-blue-700">
+            已选择 {formData.selectedDevices.length} 个设备进行分析
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {formData.targetType === "trafficPool" && formData.selectedTrafficPool && (
+        <Alert className="bg-blue-50 border-blue-200">
+          <AlertCircle className="h-4 w-4 text-blue-500" />
+          <AlertDescription className="text-blue-700">
+            已选择用户: {trafficUsers.find((u) => u.id === formData.selectedTrafficPool)?.nickname}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <div className="flex justify-between pt-4">
+        <Button variant="outline" onClick={onBack}>
+          上一步
+        </Button>
+        <Button onClick={handleSubmit}>提交</Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-analyzer/new/page.tsx b/Cunkebao/app/workspace/ai-analyzer/new/page.tsx
new file mode 100644
index 00000000..38105aaf
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/new/page.tsx
@@ -0,0 +1,117 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { ArrowLeft } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { StepIndicator } from "../components/step-indicator"
+import { BasicSettings } from "./components/basic-settings"
+import { TargetSelection } from "./components/target-selection"
+import { useToast } from "@/components/ui/use-toast"
+
+export default function CreateAnalysisPlanPage() {
+  const router = useRouter()
+  const { toast } = useToast()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [formData, setFormData] = useState({
+    taskName: "",
+    analysisTypes: [] as string[],
+    targetType: "device", // "device" or "trafficPool"
+    selectedDevices: [] as string[],
+    selectedTrafficPool: "",
+    tags: [] as string[],
+    regions: [] as string[],
+    keywords: [] as string[],
+  })
+
+  const handleNext = () => {
+    setCurrentStep((prev) => prev + 1)
+  }
+
+  const handleBack = () => {
+    if (currentStep === 1) {
+      router.back()
+    } else {
+      setCurrentStep((prev) => prev - 1)
+    }
+  }
+
+  const handleSubmit = async () => {
+    try {
+      // 显示加载状态
+      toast({
+        title: "正在创建分析计划...",
+        description: "请稍候",
+      })
+
+      // 模拟API请求延迟
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+
+      // 成功提示
+      toast({
+        title: "分析计划创建成功",
+        description: "您可以在列表中查看分析进度",
+      })
+
+      // 跳转回列表页
+      router.push("/workspace/ai-analyzer")
+    } catch (error) {
+      toast({
+        title: "创建失败",
+        description: "请稍后重试",
+        variant: "destructive",
+      })
+    }
+  }
+
+  const updateFormData = (data: Partial<typeof formData>) => {
+    setFormData((prev) => ({ ...prev, ...data }))
+  }
+
+  return (
+    <div className="flex flex-col h-screen max-h-screen bg-gray-50">
+      {/* 头部 */}
+      <div className="bg-white p-4 border-b flex items-center">
+        <Button variant="ghost" size="icon" onClick={handleBack} className="mr-2">
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <h1 className="text-xl font-semibold">新建分析计划</h1>
+      </div>
+
+      {/* 步骤指示器 */}
+      <div className="bg-white border-b">
+        <div className="max-w-4xl mx-auto py-4 px-4">
+          <StepIndicator
+            currentStep={currentStep}
+            steps={[
+              { number: 1, title: "基础设置" },
+              { number: 2, title: "选择分析对象" },
+            ]}
+          />
+        </div>
+      </div>
+
+      {/* 主内容区域 */}
+      <div className="flex-1 p-4 overflow-auto">
+        <div className="max-w-4xl mx-auto">
+          <Card className="p-6">
+            {currentStep === 1 && (
+              <BasicSettings formData={formData} updateFormData={updateFormData} onNext={handleNext} />
+            )}
+
+            {currentStep === 2 && (
+              <TargetSelection
+                formData={formData}
+                updateFormData={updateFormData}
+                onSubmit={handleSubmit}
+                onBack={handleBack}
+              />
+            )}
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-analyzer/page.tsx b/Cunkebao/app/workspace/ai-analyzer/page.tsx
new file mode 100644
index 00000000..ff68a5cd
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-analyzer/page.tsx
@@ -0,0 +1,368 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { ArrowLeft, Plus, FileText, BarChart2, Mail } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import Link from "next/link"
+
+interface AnalysisPlan {
+  id: string
+  name: string
+  wechatId: string
+  deviceName: string
+  status: "running" | "completed" | "failed"
+  createdAt: string
+  completedAt?: string
+  keywords: string[]
+  type: "friends" | "moments" | "both" | "behavior"
+}
+
+export default function AIAnalyzerPage() {
+  const router = useRouter()
+  const [plans, setPlans] = useState<AnalysisPlan[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // 模拟加载数据
+    const fetchPlans = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      const mockPlans: AnalysisPlan[] = [
+        {
+          id: "plan-1",
+          name: "美妆用户分析",
+          wechatId: "wxid_abc123",
+          deviceName: "设备1",
+          status: "completed",
+          createdAt: "2023-12-15T10:30:00Z",
+          completedAt: "2023-12-15T11:45:00Z",
+          keywords: ["美妆", "护肤", "彩妆"],
+          type: "both",
+        },
+        {
+          id: "plan-2",
+          name: "健身爱好者分析",
+          wechatId: "wxid_fit456",
+          deviceName: "设备2",
+          status: "running",
+          createdAt: "2023-12-16T09:15:00Z",
+          keywords: ["健身", "运动", "健康"],
+          type: "friends",
+        },
+        {
+          id: "plan-3",
+          name: "教育行业分析",
+          wechatId: "wxid_edu789",
+          deviceName: "设备3",
+          status: "completed",
+          createdAt: "2023-12-14T14:20:00Z",
+          completedAt: "2023-12-14T16:10:00Z",
+          keywords: ["教育", "培训", "学习"],
+          type: "moments",
+        },
+        {
+          id: "plan-4",
+          name: "用户行为分析",
+          wechatId: "wxid_beh123",
+          deviceName: "设备4",
+          status: "completed",
+          createdAt: "2023-12-18T08:20:00Z",
+          completedAt: "2023-12-18T10:15:00Z",
+          keywords: ["活跃度", "互动", "转化"],
+          type: "behavior",
+        },
+      ]
+
+      setPlans(mockPlans)
+      setIsLoading(false)
+    }
+
+    fetchPlans()
+  }, [])
+
+  const getStatusBadge = (status: AnalysisPlan["status"]) => {
+    switch (status) {
+      case "running":
+        return (
+          <Badge variant="outline" className="bg-blue-50 text-blue-600 border-blue-200">
+            分析中
+          </Badge>
+        )
+      case "completed":
+        return (
+          <Badge variant="outline" className="bg-green-50 text-green-600 border-green-200">
+            已完成
+          </Badge>
+        )
+      case "failed":
+        return (
+          <Badge variant="outline" className="bg-red-50 text-red-600 border-red-200">
+            失败
+          </Badge>
+        )
+    }
+  }
+
+  const getTypeLabel = (type: AnalysisPlan["type"]) => {
+    switch (type) {
+      case "friends":
+        return "好友信息分析"
+      case "moments":
+        return "朋友圈内容分析"
+      case "both":
+        return "综合分析"
+      case "behavior":
+        return "用户行为分析"
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-screen max-h-screen bg-gray-50">
+      {/* 头部 */}
+      <div className="bg-white p-4 border-b flex items-center justify-between">
+        <div className="flex items-center">
+          <Button variant="ghost" size="icon" onClick={() => router.back()} className="mr-2">
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-xl font-semibold">AI数据分析</h1>
+        </div>
+        <Button onClick={() => router.push("/workspace/ai-analyzer/new")} className="flex items-center gap-2">
+          <Plus className="h-4 w-4" />
+          新建分析计划
+        </Button>
+      </div>
+
+      {/* 主内容区域 */}
+      <div className="flex-1 p-4 overflow-auto">
+        <div className="max-w-5xl mx-auto">
+          <Tabs defaultValue="all" className="w-full">
+            <TabsList className="grid w-full grid-cols-3 mb-6">
+              <TabsTrigger value="all">全部计划</TabsTrigger>
+              <TabsTrigger value="running">进行中</TabsTrigger>
+              <TabsTrigger value="completed">已完成</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="all" className="space-y-4">
+              {isLoading ? (
+                <div className="flex justify-center py-12">
+                  <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+                </div>
+              ) : plans.length > 0 ? (
+                plans.map((plan) => (
+                  <Card key={plan.id} className="hover:shadow-md transition-shadow">
+                    <CardHeader className="pb-2">
+                      <div className="flex justify-between items-start">
+                        <div>
+                          <CardTitle>{plan.name}</CardTitle>
+                          <CardDescription className="mt-1">
+                            设备: {plan.deviceName} | 微信号: {plan.wechatId}
+                          </CardDescription>
+                        </div>
+                        {getStatusBadge(plan.status)}
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="flex flex-col space-y-3">
+                        <div className="flex justify-between text-sm">
+                          <span className="text-gray-500">分析类型</span>
+                          <span className="font-medium">{getTypeLabel(plan.type)}</span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-gray-500">关键词</span>
+                          <div className="flex flex-wrap gap-1 justify-end">
+                            {plan.keywords.map((keyword, index) => (
+                              <Badge key={index} variant="secondary" className="text-xs">
+                                {keyword}
+                              </Badge>
+                            ))}
+                          </div>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-gray-500">创建时间</span>
+                          <span>{new Date(plan.createdAt).toLocaleString()}</span>
+                        </div>
+                        {plan.completedAt && (
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">完成时间</span>
+                            <span>{new Date(plan.completedAt).toLocaleString()}</span>
+                          </div>
+                        )}
+
+                        <div className="flex justify-end gap-2 pt-2">
+                          {plan.status === "completed" && (
+                            <>
+                              <Button variant="outline" size="sm" className="flex items-center gap-1">
+                                <Mail className="h-4 w-4" />
+                                <span>发送报告</span>
+                              </Button>
+                              <Link href={`/workspace/ai-analyzer/${plan.id}`}>
+                                <Button size="sm" className="flex items-center gap-1">
+                                  <BarChart2 className="h-4 w-4" />
+                                  <span>查看报告</span>
+                                </Button>
+                              </Link>
+                            </>
+                          )}
+                          {plan.status === "running" && (
+                            <Button variant="outline" size="sm" className="flex items-center gap-1">
+                              <FileText className="h-4 w-4" />
+                              <span>查看进度</span>
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))
+              ) : (
+                <div className="text-center py-12 bg-white rounded-lg border">
+                  <div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+                    <BarChart2 className="h-8 w-8 text-gray-400" />
+                  </div>
+                  <h3 className="text-lg font-medium text-gray-900 mb-1">暂无分析计划</h3>
+                  <p className="text-gray-500 mb-4">创建一个新的AI数据分析计划来开始</p>
+                  <Button onClick={() => router.push("/workspace/ai-analyzer/new")}>新建分析计划</Button>
+                </div>
+              )}
+            </TabsContent>
+
+            <TabsContent value="running" className="space-y-4">
+              {isLoading ? (
+                <div className="flex justify-center py-12">
+                  <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+                </div>
+              ) : plans.filter((p) => p.status === "running").length > 0 ? (
+                plans
+                  .filter((p) => p.status === "running")
+                  .map((plan) => (
+                    <Card key={plan.id} className="hover:shadow-md transition-shadow">
+                      <CardHeader className="pb-2">
+                        <div className="flex justify-between items-start">
+                          <div>
+                            <CardTitle>{plan.name}</CardTitle>
+                            <CardDescription className="mt-1">
+                              设备: {plan.deviceName} | 微信号: {plan.wechatId}
+                            </CardDescription>
+                          </div>
+                          {getStatusBadge(plan.status)}
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="flex flex-col space-y-3">
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">分析类型</span>
+                            <span className="font-medium">{getTypeLabel(plan.type)}</span>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">关键词</span>
+                            <div className="flex flex-wrap gap-1 justify-end">
+                              {plan.keywords.map((keyword, index) => (
+                                <Badge key={index} variant="secondary" className="text-xs">
+                                  {keyword}
+                                </Badge>
+                              ))}
+                            </div>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">创建时间</span>
+                            <span>{new Date(plan.createdAt).toLocaleString()}</span>
+                          </div>
+
+                          <div className="flex justify-end gap-2 pt-2">
+                            <Button variant="outline" size="sm" className="flex items-center gap-1">
+                              <FileText className="h-4 w-4" />
+                              <span>查看进度</span>
+                            </Button>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))
+              ) : (
+                <div className="text-center py-12 bg-white rounded-lg border">
+                  <p className="text-gray-500">暂无进行中的分析计划</p>
+                </div>
+              )}
+            </TabsContent>
+
+            <TabsContent value="completed" className="space-y-4">
+              {isLoading ? (
+                <div className="flex justify-center py-12">
+                  <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+                </div>
+              ) : plans.filter((p) => p.status === "completed").length > 0 ? (
+                plans
+                  .filter((p) => p.status === "completed")
+                  .map((plan) => (
+                    <Card key={plan.id} className="hover:shadow-md transition-shadow">
+                      <CardHeader className="pb-2">
+                        <div className="flex justify-between items-start">
+                          <div>
+                            <CardTitle>{plan.name}</CardTitle>
+                            <CardDescription className="mt-1">
+                              设备: {plan.deviceName} | 微信号: {plan.wechatId}
+                            </CardDescription>
+                          </div>
+                          {getStatusBadge(plan.status)}
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="flex flex-col space-y-3">
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">分析类型</span>
+                            <span className="font-medium">{getTypeLabel(plan.type)}</span>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">关键词</span>
+                            <div className="flex flex-wrap gap-1 justify-end">
+                              {plan.keywords.map((keyword, index) => (
+                                <Badge key={index} variant="secondary" className="text-xs">
+                                  {keyword}
+                                </Badge>
+                              ))}
+                            </div>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">创建时间</span>
+                            <span>{new Date(plan.createdAt).toLocaleString()}</span>
+                          </div>
+                          {plan.completedAt && (
+                            <div className="flex justify-between text-sm">
+                              <span className="text-gray-500">完成时间</span>
+                              <span>{new Date(plan.completedAt).toLocaleString()}</span>
+                            </div>
+                          )}
+
+                          <div className="flex justify-end gap-2 pt-2">
+                            <Button variant="outline" size="sm" className="flex items-center gap-1">
+                              <Mail className="h-4 w-4" />
+                              <span>发送报告</span>
+                            </Button>
+                            <Link href={`/workspace/ai-analyzer/${plan.id}`}>
+                              <Button size="sm" className="flex items-center gap-1">
+                                <BarChart2 className="h-4 w-4" />
+                                <span>查看报告</span>
+                              </Button>
+                            </Link>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))
+              ) : (
+                <div className="text-center py-12 bg-white rounded-lg border">
+                  <p className="text-gray-500">暂无已完成的分析计划</p>
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-assistant/knowledge-base/page.tsx b/Cunkebao/app/workspace/ai-assistant/knowledge-base/page.tsx
new file mode 100644
index 00000000..d59909e1
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-assistant/knowledge-base/page.tsx
@@ -0,0 +1,284 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { ArrowLeft, FileText, Trash2, Upload } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+
+interface KnowledgeFile {
+  id: string
+  name: string
+  type: string
+  size: string
+  uploadDate: string
+}
+
+export default function KnowledgeBasePage() {
+  const router = useRouter()
+  const [activeTab, setActiveTab] = useState("private")
+  const [privateFiles, setPrivateFiles] = useState<KnowledgeFile[]>([
+    {
+      id: "1",
+      name: "私域运营手册.pdf",
+      type: "PDF",
+      size: "2.4 MB",
+      uploadDate: "2023-12-10",
+    },
+    {
+      id: "2",
+      name: "客户画像分析.docx",
+      type: "Word",
+      size: "1.8 MB",
+      uploadDate: "2023-12-08",
+    },
+    {
+      id: "3",
+      name: "获客策略指南.pdf",
+      type: "PDF",
+      size: "3.2 MB",
+      uploadDate: "2023-12-05",
+    },
+  ])
+  const [storeFiles, setStoreFiles] = useState<KnowledgeFile[]>([
+    {
+      id: "1",
+      name: "门店管理规范.pdf",
+      type: "PDF",
+      size: "1.9 MB",
+      uploadDate: "2023-12-09",
+    },
+    {
+      id: "2",
+      name: "产品介绍手册.docx",
+      type: "Word",
+      size: "2.1 MB",
+      uploadDate: "2023-12-07",
+    },
+  ])
+  const [isUploading, setIsUploading] = useState(false)
+  const [showPreview, setShowPreview] = useState(false)
+  const [previewFile, setPreviewFile] = useState<KnowledgeFile | null>(null)
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files
+    if (!files || files.length === 0) return
+
+    setIsUploading(true)
+
+    // 模拟上传过程
+    setTimeout(() => {
+      const newFiles = Array.from(files).map((file) => ({
+        id: Date.now().toString(),
+        name: file.name,
+        type: file.name.split(".").pop()?.toUpperCase() || "未知",
+        size: `${(file.size / (1024 * 1024)).toFixed(1)} MB`,
+        uploadDate: new Date().toISOString().split("T")[0],
+      }))
+
+      if (activeTab === "private") {
+        setPrivateFiles((prev) => [...prev, ...newFiles])
+      } else {
+        setStoreFiles((prev) => [...prev, ...newFiles])
+      }
+
+      setIsUploading(false)
+      e.target.value = "" // 重置文件输入
+    }, 1500)
+  }
+
+  const handleDeleteFile = (id: string) => {
+    if (activeTab === "private") {
+      setPrivateFiles((prev) => prev.filter((file) => file.id !== id))
+    } else {
+      setStoreFiles((prev) => prev.filter((file) => file.id !== id))
+    }
+  }
+
+  const handlePreviewFile = (file: KnowledgeFile) => {
+    setPreviewFile(file)
+    setShowPreview(true)
+  }
+
+  return (
+    <div className="flex flex-col h-screen max-h-screen bg-gray-50">
+      {/* 头部 */}
+      <div className="bg-white p-4 border-b flex items-center">
+        <Button variant="ghost" size="icon" onClick={() => router.back()} className="mr-2">
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <h1 className="text-xl font-semibold">知识库管理</h1>
+      </div>
+
+      {/* 主内容区域 */}
+      <div className="flex-1 p-4 overflow-hidden">
+        <Card className="max-w-4xl mx-auto">
+          <CardHeader>
+            <CardTitle>知识库文件</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Tabs defaultValue="private" onValueChange={setActiveTab}>
+              <TabsList className="grid w-full grid-cols-2 mb-6">
+                <TabsTrigger value="private">私域操盘手知识库</TabsTrigger>
+                <TabsTrigger value="store">门店端知识库</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="private" className="space-y-4">
+                <div className="flex justify-between items-center">
+                  <p className="text-sm text-gray-500">已上传 {privateFiles.length} 个文件</p>
+                  <div className="relative">
+                    <input
+                      type="file"
+                      id="private-upload"
+                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                      accept=".pdf,.doc,.docx"
+                      multiple
+                      onChange={handleFileUpload}
+                    />
+                    <Button variant="outline" className="flex items-center gap-2">
+                      <Upload className="h-4 w-4" />
+                      上传文件
+                    </Button>
+                  </div>
+                </div>
+
+                <ScrollArea className="h-[calc(100vh-300px)]">
+                  <div className="space-y-2">
+                    {privateFiles.map((file) => (
+                      <div
+                        key={file.id}
+                        className="flex items-center justify-between p-3 bg-white border rounded-md hover:bg-gray-50"
+                      >
+                        <div className="flex items-center gap-3">
+                          <FileText className="h-5 w-5 text-blue-500" />
+                          <div>
+                            <p className="font-medium">{file.name}</p>
+                            <p className="text-xs text-gray-500">
+                              {file.type} • {file.size} • 上传于 {file.uploadDate}
+                            </p>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Button variant="ghost" size="sm" onClick={() => handlePreviewFile(file)}>
+                            查看
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => handleDeleteFile(file.id)}
+                            className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                    {privateFiles.length === 0 && (
+                      <div className="text-center py-8 text-gray-500">暂无文件，请上传文件到知识库</div>
+                    )}
+                  </div>
+                </ScrollArea>
+              </TabsContent>
+
+              <TabsContent value="store" className="space-y-4">
+                <div className="flex justify-between items-center">
+                  <p className="text-sm text-gray-500">已上传 {storeFiles.length} 个文件</p>
+                  <div className="relative">
+                    <input
+                      type="file"
+                      id="store-upload"
+                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                      accept=".pdf,.doc,.docx"
+                      multiple
+                      onChange={handleFileUpload}
+                    />
+                    <Button variant="outline" className="flex items-center gap-2">
+                      <Upload className="h-4 w-4" />
+                      上传文件
+                    </Button>
+                  </div>
+                </div>
+
+                <ScrollArea className="h-[calc(100vh-300px)]">
+                  <div className="space-y-2">
+                    {storeFiles.map((file) => (
+                      <div
+                        key={file.id}
+                        className="flex items-center justify-between p-3 bg-white border rounded-md hover:bg-gray-50"
+                      >
+                        <div className="flex items-center gap-3">
+                          <FileText className="h-5 w-5 text-green-500" />
+                          <div>
+                            <p className="font-medium">{file.name}</p>
+                            <p className="text-xs text-gray-500">
+                              {file.type} • {file.size} • 上传于 {file.uploadDate}
+                            </p>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Button variant="ghost" size="sm" onClick={() => handlePreviewFile(file)}>
+                            查看
+                          </Button>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => handleDeleteFile(file.id)}
+                            className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                    {storeFiles.length === 0 && (
+                      <div className="text-center py-8 text-gray-500">暂无文件，请上传文件到知识库</div>
+                    )}
+                  </div>
+                </ScrollArea>
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 文件预览对话框 */}
+      <Dialog open={showPreview} onOpenChange={setShowPreview}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>{previewFile?.name}</DialogTitle>
+          </DialogHeader>
+          <div className="p-4 bg-gray-50 rounded-md min-h-[300px] flex items-center justify-center">
+            <div className="text-center">
+              <FileText className="h-16 w-16 text-gray-400 mx-auto mb-4" />
+              <p className="text-gray-500">文件预览功能正在开发中</p>
+              <p className="text-sm text-gray-400 mt-2">
+                文件类型: {previewFile?.type} • 大小: {previewFile?.size}
+              </p>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 上传中提示 */}
+      {isUploading && (
+        <div className="fixed inset-0 bg-black/20 flex items-center justify-center z-50">
+          <Card className="w-80">
+            <CardContent className="p-6">
+              <div className="flex flex-col items-center">
+                <div className="w-12 h-12 rounded-full border-4 border-t-blue-500 border-blue-200 animate-spin mb-4"></div>
+                <p className="font-medium">正在上传文件...</p>
+                <p className="text-sm text-gray-500 mt-1">请稍候</p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-assistant/page.tsx b/Cunkebao/app/workspace/ai-assistant/page.tsx
new file mode 100644
index 00000000..0916a1a1
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-assistant/page.tsx
@@ -0,0 +1,273 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useRef, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { ArrowLeft, Image, Mic, Send, FileText, MicOff } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { VoiceRecognition } from "@/app/components/VoiceRecognition"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+interface Message {
+  id: string
+  content: string
+  sender: "user" | "ai"
+  timestamp: Date
+  attachments?: {
+    type: "image" | "document"
+    name: string
+    url: string
+  }[]
+}
+
+export default function AIAssistantPage() {
+  const router = useRouter()
+  const [messages, setMessages] = useState<Message[]>([
+    {
+      id: "1",
+      content: "你好！我是你的AI助手，有什么可以帮助你的吗？",
+      sender: "ai",
+      timestamp: new Date(),
+    },
+  ])
+  const [inputValue, setInputValue] = useState("")
+  const [isRecording, setIsRecording] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const documentInputRef = useRef<HTMLInputElement>(null)
+
+  // 自动滚动到最新消息
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+  }, [messages])
+
+  const handleSendMessage = async () => {
+    if (!inputValue.trim() && !isRecording) return
+
+    const newUserMessage: Message = {
+      id: Date.now().toString(),
+      content: inputValue,
+      sender: "user",
+      timestamp: new Date(),
+    }
+
+    setMessages((prev) => [...prev, newUserMessage])
+    setInputValue("")
+    setIsLoading(true)
+
+    // 模拟AI响应
+    setTimeout(() => {
+      const aiResponse: Message = {
+        id: (Date.now() + 1).toString(),
+        content: `我已收到你的消息："${newUserMessage.content}"。这是一个模拟的AI回复。`,
+        sender: "ai",
+        timestamp: new Date(),
+      }
+      setMessages((prev) => [...prev, aiResponse])
+      setIsLoading(false)
+    }, 1000)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault()
+      handleSendMessage()
+    }
+  }
+
+  const toggleRecording = () => {
+    setIsRecording(!isRecording)
+  }
+
+  const handleVoiceInput = (text: string) => {
+    setInputValue((prev) => prev + text)
+    setIsRecording(false)
+  }
+
+  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>, type: "image" | "document") => {
+    const files = e.target.files
+    if (!files || files.length === 0) return
+
+    const file = files[0]
+    const reader = new FileReader()
+
+    reader.onload = () => {
+      const newUserMessage: Message = {
+        id: Date.now().toString(),
+        content: type === "image" ? "我发送了一张图片" : `我上传了文档：${file.name}`,
+        sender: "user",
+        timestamp: new Date(),
+        attachments: [
+          {
+            type,
+            name: file.name,
+            url: reader.result as string,
+          },
+        ],
+      }
+
+      setMessages((prev) => [...prev, newUserMessage])
+      setIsLoading(true)
+
+      // 模拟AI响应
+      setTimeout(() => {
+        const aiResponse: Message = {
+          id: (Date.now() + 1).toString(),
+          content:
+            type === "image"
+              ? "我已收到你的图片，正在分析内容..."
+              : `我已收到你上传的文档：${file.name}，正在分析内容...`,
+          sender: "ai",
+          timestamp: new Date(),
+        }
+        setMessages((prev) => [...prev, aiResponse])
+        setIsLoading(false)
+      }, 1500)
+    }
+
+    reader.readAsDataURL(file)
+    e.target.value = "" // 重置文件输入
+  }
+
+  const triggerFileUpload = (type: "image" | "document") => {
+    if (type === "image") {
+      fileInputRef.current?.click()
+    } else {
+      documentInputRef.current?.click()
+    }
+  }
+
+  const navigateToKnowledgeBase = () => {
+    router.push("/workspace/ai-assistant/knowledge-base")
+  }
+
+  return (
+    <div className="flex flex-col h-screen max-h-screen bg-gray-50">
+      {/* 头部 */}
+      <div className="bg-white p-4 border-b flex items-center justify-between">
+        <div className="flex items-center">
+          <Button variant="ghost" size="icon" onClick={() => router.back()} className="mr-2">
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-xl font-semibold">AI对话助手</h1>
+        </div>
+        <Button variant="outline" size="sm" onClick={() => router.push("/workspace/ai-assistant/knowledge-base")}>
+          添加知识库
+        </Button>
+      </div>
+
+      {/* 聊天区域 */}
+      <ScrollArea className="flex-1 p-4 overflow-y-auto">
+        <div className="max-w-3xl mx-auto space-y-4">
+          {messages.map((message) => (
+            <div key={message.id} className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}>
+              <div
+                className={`max-w-[80%] rounded-lg p-3 ${
+                  message.sender === "user" ? "bg-blue-500 text-white" : "bg-white border shadow-sm"
+                }`}
+              >
+                {message.attachments?.map((attachment, index) => (
+                  <div key={index} className="mb-2">
+                    {attachment.type === "image" ? (
+                      <div className="rounded-md overflow-hidden">
+                        <img src={attachment.url || "/placeholder.svg"} alt="Uploaded" className="max-w-full h-auto" />
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2 p-2 bg-gray-100 rounded-md">
+                        <FileText className="h-5 w-5 text-gray-500" />
+                        <span className="text-sm truncate">{attachment.name}</span>
+                      </div>
+                    )}
+                  </div>
+                ))}
+                <div className="whitespace-pre-wrap">{message.content}</div>
+                <div className={`text-xs mt-1 ${message.sender === "user" ? "text-blue-200" : "text-gray-400"}`}>
+                  {message.timestamp.toLocaleTimeString([], {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                  })}
+                </div>
+              </div>
+            </div>
+          ))}
+          {isLoading && (
+            <div className="flex justify-start">
+              <div className="max-w-[80%] rounded-lg p-3 bg-white border shadow-sm">
+                <div className="flex space-x-2">
+                  <div
+                    className="w-2 h-2 rounded-full bg-gray-300 animate-bounce"
+                    style={{ animationDelay: "0ms" }}
+                  ></div>
+                  <div
+                    className="w-2 h-2 rounded-full bg-gray-300 animate-bounce"
+                    style={{ animationDelay: "150ms" }}
+                  ></div>
+                  <div
+                    className="w-2 h-2 rounded-full bg-gray-300 animate-bounce"
+                    style={{ animationDelay: "300ms" }}
+                  ></div>
+                </div>
+              </div>
+            </div>
+          )}
+          <div ref={messagesEndRef} />
+        </div>
+      </ScrollArea>
+
+      {/* 输入区域 */}
+      <div className="bg-white border-t p-4">
+        <div className="max-w-3xl mx-auto">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={toggleRecording}
+              className={isRecording ? "bg-red-100 text-red-500" : ""}
+            >
+              {isRecording ? <MicOff className="h-5 w-5" /> : <Mic className="h-5 w-5" />}
+            </Button>
+            <Button variant="outline" size="icon" onClick={() => triggerFileUpload("image")}>
+              <Image className="h-5 w-5" />
+            </Button>
+            <Button variant="outline" size="icon" onClick={() => triggerFileUpload("document")}>
+              <FileText className="h-5 w-5" />
+            </Button>
+            <Input
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="输入消息..."
+              className="flex-1"
+            />
+            <Button onClick={handleSendMessage} disabled={!inputValue.trim() && !isRecording}>
+              <Send className="h-5 w-5" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 隐藏的文件上传输入 */}
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={(e) => handleFileUpload(e, "image")}
+        accept="image/*"
+        className="hidden"
+      />
+      <input
+        type="file"
+        ref={documentInputRef}
+        onChange={(e) => handleFileUpload(e, "document")}
+        accept=".pdf,.doc,.docx"
+        className="hidden"
+      />
+
+      {/* 语音识别组件 */}
+      {isRecording && <VoiceRecognition onResult={handleVoiceInput} onStop={() => setIsRecording(false)} />}
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-strategy/[id]/page.tsx b/Cunkebao/app/workspace/ai-strategy/[id]/page.tsx
new file mode 100644
index 00000000..98287e33
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-strategy/[id]/page.tsx
@@ -0,0 +1,344 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { ArrowLeft, Download, Mail, Share2, Tag, Users, Database, BarChart2, PieChart } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+interface StrategyReport {
+  id: string
+  name: string
+  deviceNames: string[]
+  trafficPoolNames: string[]
+  createdAt: string
+  completedAt: string
+  strategyType: "jd" | "yisi" | "database" | "custom"
+  strategyName: string
+  trafficPoolSize: number
+  optimizedUsers: number
+  summary: string
+  userSegments: {
+    name: string
+    count: number
+    percentage: number
+  }[]
+  userAttributes: {
+    [key: string]: {
+      name: string
+      count: number
+      percentage: number
+    }[]
+  }
+  recommendations: string[]
+}
+
+export default function StrategyReportPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [report, setReport] = useState<StrategyReport | null>(null)
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // 模拟加载报告数据
+    const fetchReport = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1500))
+
+      const mockReport: StrategyReport = {
+        id: params.id,
+        name: "京东会员优化",
+        deviceNames: ["设备1", "设备2"],
+        trafficPoolNames: ["微信好友池-设备1", "设备流量池-设备1"],
+        createdAt: "2023-12-15T10:30:00Z",
+        completedAt: "2023-12-15T11:45:00Z",
+        strategyType: "jd",
+        strategyName: "京东会员识别",
+        trafficPoolSize: 287,
+        optimizedUsers: 142,
+        summary:
+          "通过京东会员识别策略，在287位用户中成功识别出142位京东会员用户，占比49.5%。其中PLUS会员38位，VIP会员56位，普通会员48位。这些用户主要集中在电子产品和美妆护肤品类，消费能力中上。建议针对PLUS会员和VIP会员进行高端产品推广，对普通会员提供会员升级优惠。",
+        userSegments: [
+          { name: "PLUS会员", count: 38, percentage: 27 },
+          { name: "VIP会员", count: 56, percentage: 39 },
+          { name: "普通会员", count: 48, percentage: 34 },
+        ],
+        userAttributes: {
+          购物偏好: [
+            { name: "电子产品", count: 52, percentage: 37 },
+            { name: "美妆护肤", count: 43, percentage: 30 },
+            { name: "家居生活", count: 28, percentage: 20 },
+            { name: "服装鞋包", count: 19, percentage: 13 },
+          ],
+          消费能力: [
+            { name: "高", count: 35, percentage: 25 },
+            { name: "中高", count: 48, percentage: 34 },
+            { name: "中", count: 39, percentage: 27 },
+            { name: "中低", count: 20, percentage: 14 },
+          ],
+          活跃度: [
+            { name: "高度活跃", count: 42, percentage: 30 },
+            { name: "中度活跃", count: 63, percentage: 44 },
+            { name: "低度活跃", count: 37, percentage: 26 },
+          ],
+        },
+        recommendations: [
+          "针对PLUS会员推送高端电子产品和限量版美妆产品",
+          "为VIP会员提供专属优惠券和新品预售资格",
+          "向普通会员推广PLUS会员权益，提供升级优惠",
+          "根据用户购物偏好进行精准内容推送",
+          "对高消费能力用户提供专属客服和VIP服务",
+        ],
+      }
+
+      setReport(mockReport)
+      setIsLoading(false)
+    }
+
+    fetchReport()
+  }, [params.id])
+
+  const getStrategyTypeLabel = (type: string) => {
+    switch (type) {
+      case "jd":
+        return "京东会员"
+      case "yisi":
+        return "易思接口"
+      case "database":
+        return "数据库匹配"
+      case "custom":
+        return "自定义策略"
+      default:
+        return "未知类型"
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-screen max-h-screen bg-gray-50">
+      {/* 头部 */}
+      <div className="bg-white p-4 border-b flex items-center justify-between">
+        <div className="flex items-center">
+          <Button variant="ghost" size="icon" onClick={() => router.back()} className="mr-2">
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-xl font-semibold">策略优化报告</h1>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" className="flex items-center gap-1">
+            <Tag className="h-4 w-4" />
+            <span className="hidden sm:inline">导入标签</span>
+          </Button>
+          <Button variant="outline" size="sm" className="flex items-center gap-1">
+            <Mail className="h-4 w-4" />
+            <span className="hidden sm:inline">发送报告</span>
+          </Button>
+          <Button variant="outline" size="sm" className="flex items-center gap-1">
+            <Download className="h-4 w-4" />
+            <span className="hidden sm:inline">下载报告</span>
+          </Button>
+          <Button variant="outline" size="sm" className="flex items-center gap-1">
+            <Share2 className="h-4 w-4" />
+            <span className="hidden sm:inline">分享</span>
+          </Button>
+        </div>
+      </div>
+
+      {/* 主内容区域 */}
+      <div className="flex-1 p-4 overflow-auto">
+        {isLoading ? (
+          <div className="flex justify-center py-12">
+            <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+          </div>
+        ) : report ? (
+          <div className="max-w-5xl mx-auto space-y-6">
+            {/* 报告头部 */}
+            <Card>
+              <CardHeader className="pb-2">
+                <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-2">
+                  <div>
+                    <CardTitle className="text-xl">{report.name}</CardTitle>
+                    <p className="text-sm text-gray-500 mt-1">{new Date(report.completedAt).toLocaleString()} 完成</p>
+                  </div>
+                  <Badge className="self-start sm:self-auto bg-green-100 text-green-800 border-green-200">
+                    {getStrategyTypeLabel(report.strategyType)}
+                  </Badge>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
+                      <Users className="h-5 w-5 text-blue-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-gray-500">流量池大小</p>
+                      <p className="font-semibold">{report.trafficPoolSize} 用户</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
+                      <Database className="h-5 w-5 text-green-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-gray-500">优化用户数</p>
+                      <p className="font-semibold">{report.optimizedUsers} 用户</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center">
+                      <BarChart2 className="h-5 w-5 text-purple-600" />
+                    </div>
+                    <div>
+                      <p className="text-sm text-gray-500">优化比例</p>
+                      <p className="font-semibold">
+                        {Math.round((report.optimizedUsers / report.trafficPoolSize) * 100)}%
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h3 className="font-medium mb-2">优化摘要</h3>
+                  <p className="text-sm text-gray-700">{report.summary}</p>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* 详细分析 */}
+            <Tabs defaultValue="segments" className="w-full">
+              <TabsList className="grid w-full grid-cols-2 mb-6">
+                <TabsTrigger value="segments">用户分类</TabsTrigger>
+                <TabsTrigger value="attributes">用户属性</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="segments" className="space-y-4">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-lg">用户分类分析</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                      <div>
+                        <h3 className="font-medium mb-3">用户分类</h3>
+                        <div className="space-y-3">
+                          {report.userSegments.map((segment, index) => (
+                            <div key={index}>
+                              <div className="flex justify-between text-sm mb-1">
+                                <span>{segment.name}</span>
+                                <span className="font-medium">
+                                  {segment.count} ({segment.percentage}%)
+                                </span>
+                              </div>
+                              <div className="w-full bg-gray-200 rounded-full h-2">
+                                <div
+                                  className="bg-blue-500 h-2 rounded-full"
+                                  style={{ width: `${segment.percentage}%` }}
+                                ></div>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div>
+                        <h3 className="font-medium mb-3">分类分布</h3>
+                        <div className="flex items-center h-40 justify-center">
+                          <PieChart className="h-32 w-32 text-gray-400" />
+                        </div>
+                        <div className="grid grid-cols-3 text-center mt-2">
+                          {report.userSegments.map((segment, index) => (
+                            <div key={index}>
+                              <div className="text-sm text-gray-500">{segment.name}</div>
+                              <div className="font-medium">
+                                {segment.count} ({segment.percentage}%)
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-lg">优化建议</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-3">
+                      {report.recommendations.map((recommendation, index) => (
+                        <div key={index} className="flex items-start gap-2">
+                          <div className="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 mt-0.5">
+                            <span className="text-sm font-medium text-blue-600">{index + 1}</span>
+                          </div>
+                          <p className="text-gray-700">{recommendation}</p>
+                        </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              </TabsContent>
+
+              <TabsContent value="attributes" className="space-y-4">
+                {Object.entries(report.userAttributes).map(([category, attributes], categoryIndex) => (
+                  <Card key={categoryIndex}>
+                    <CardHeader>
+                      <CardTitle className="text-lg">{category}分析</CardTitle>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div>
+                          <h3 className="font-medium mb-3">{category}分布</h3>
+                          <div className="space-y-3">
+                            {attributes.map((attribute, index) => (
+                              <div key={index}>
+                                <div className="flex justify-between text-sm mb-1">
+                                  <span>{attribute.name}</span>
+                                  <span className="font-medium">
+                                    {attribute.count} ({attribute.percentage}%)
+                                  </span>
+                                </div>
+                                <div className="w-full bg-gray-200 rounded-full h-2">
+                                  <div
+                                    className="bg-green-500 h-2 rounded-full"
+                                    style={{ width: `${attribute.percentage}%` }}
+                                  ></div>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+
+                        <div>
+                          <h3 className="font-medium mb-3">图表展示</h3>
+                          <div className="flex items-center h-40 justify-center">
+                            <PieChart className="h-32 w-32 text-gray-400" />
+                          </div>
+                          <div className="grid grid-cols-2 text-center mt-2 gap-2">
+                            {attributes.map((attribute, index) => (
+                              <div key={index}>
+                                <div className="text-sm text-gray-500">{attribute.name}</div>
+                                <div className="font-medium">
+                                  {attribute.count} ({attribute.percentage}%)
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </TabsContent>
+            </Tabs>
+          </div>
+        ) : (
+          <div className="text-center py-12">
+            <p className="text-gray-500">未找到报告数据</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-strategy/components/confirm-strategy.tsx b/Cunkebao/app/workspace/ai-strategy/components/confirm-strategy.tsx
new file mode 100644
index 00000000..fb2e1966
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-strategy/components/confirm-strategy.tsx
@@ -0,0 +1,235 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Badge } from "@/components/ui/badge"
+import { Smartphone, Database, Calendar, Settings, Tag, Mail } from "lucide-react"
+import { format } from "date-fns"
+
+interface ConfirmStrategyProps {
+  formData: any
+  updateFormData: (data: any) => void
+  onSubmit: () => void
+  onBack: () => void
+}
+
+export function ConfirmStrategy({ formData, updateFormData, onSubmit, onBack }: ConfirmStrategyProps) {
+  const [planName, setPlanName] = useState(formData.name || "")
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const getStrategyTypeIcon = (type: string) => {
+    switch (type) {
+      case "jd":
+        return (
+          <div className="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center flex-shrink-0">
+            <Database className="h-4 w-4 text-orange-600" />
+          </div>
+        )
+      case "yisi":
+        return (
+          <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+            <Database className="h-4 w-4 text-blue-600" />
+          </div>
+        )
+      case "database":
+        return (
+          <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <Database className="h-4 w-4 text-green-600" />
+          </div>
+        )
+      case "custom":
+        return (
+          <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
+            <Settings className="h-4 w-4 text-purple-600" />
+          </div>
+        )
+      default:
+        return (
+          <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
+            <Settings className="h-4 w-4 text-gray-600" />
+          </div>
+        )
+    }
+  }
+
+  const getStrategyTypeLabel = (type: string) => {
+    switch (type) {
+      case "jd":
+        return "京东会员"
+      case "yisi":
+        return "易思接口"
+      case "database":
+        return "数据库匹配"
+      case "custom":
+        return "自定义策略"
+      default:
+        return "未知类型"
+    }
+  }
+
+  const handleSubmit = async () => {
+    updateFormData({
+      name: planName,
+    })
+
+    setIsSubmitting(true)
+    await onSubmit()
+    setIsSubmitting(false)
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold mb-1">确认优化策略</h2>
+        <p className="text-gray-500 text-sm">确认策略信息并提交</p>
+      </div>
+
+      <div>
+        <Label htmlFor="planName" className="text-base font-medium">
+          策略名称
+        </Label>
+        <Input
+          id="planName"
+          value={planName}
+          onChange={(e) => setPlanName(e.target.value)}
+          placeholder="输入策略名称"
+          className="mt-1"
+        />
+      </div>
+
+      <div className="bg-gray-50 p-4 rounded-lg space-y-4">
+        <h3 className="font-medium">策略信息</h3>
+
+        <div className="flex items-start space-x-3">
+          <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+            <Smartphone className="h-4 w-4 text-blue-600" />
+          </div>
+          <div>
+            <p className="font-medium">设备信息</p>
+            <p className="text-sm text-gray-600">{formData.deviceNames.join(", ")}</p>
+          </div>
+        </div>
+
+        <div className="flex items-start space-x-3">
+          <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
+            <Database className="h-4 w-4 text-green-600" />
+          </div>
+          <div>
+            <p className="font-medium">流量池</p>
+            <div className="space-y-1">
+              {formData.trafficPoolNames.map((name: string, index: number) => (
+                <p key={index} className="text-sm text-gray-600">
+                  {name}
+                </p>
+              ))}
+              <p className="text-sm font-medium">共 {formData.trafficPoolSize} 位用户</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-start space-x-3">
+          {getStrategyTypeIcon(formData.strategyType)}
+          <div>
+            <p className="font-medium">优化策略</p>
+            <p className="text-sm text-gray-600">
+              {getStrategyTypeLabel(formData.strategyType)} - {formData.strategyName}
+            </p>
+
+            {formData.strategyType === "jd" && (
+              <div className="mt-1">
+                <Badge variant="outline" className="text-xs">
+                  会员等级:{" "}
+                  {formData.strategyConfig.memberLevel === "all"
+                    ? "所有会员"
+                    : formData.strategyConfig.memberLevel === "plus"
+                      ? "PLUS会员"
+                      : formData.strategyConfig.memberLevel === "vip"
+                        ? "VIP会员"
+                        : "普通会员"}
+                </Badge>
+              </div>
+            )}
+
+            {formData.strategyType === "yisi" && (
+              <div className="mt-1">
+                <Badge variant="outline" className="text-xs">
+                  分析深度:{" "}
+                  {formData.strategyConfig.analysisDepth === "basic"
+                    ? "基础分析"
+                    : formData.strategyConfig.analysisDepth === "standard"
+                      ? "标准分析"
+                      : "深度分析"}
+                </Badge>
+              </div>
+            )}
+
+            {formData.strategyType === "database" && (
+              <div className="mt-1">
+                <Badge variant="outline" className="text-xs">
+                  表名: {formData.strategyConfig.tableName}
+                </Badge>
+                <Badge variant="outline" className="text-xs ml-1">
+                  匹配字段: {formData.strategyConfig.matchFields}
+                </Badge>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-start space-x-3">
+          <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
+            <Calendar className="h-4 w-4 text-purple-600" />
+          </div>
+          <div>
+            <p className="font-medium">执行时间</p>
+            <p className="text-sm text-gray-600">
+              {formData.executionConfig.scheduleType === "immediate"
+                ? "提交后立即执行"
+                : `定时执行: ${format(new Date(formData.executionConfig.scheduledTime), "yyyy-MM-dd HH:mm")}`}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-start space-x-3">
+          <div className="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0">
+            <Settings className="h-4 w-4 text-amber-600" />
+          </div>
+          <div>
+            <p className="font-medium">结果处理</p>
+            <div className="flex flex-wrap gap-2 mt-1">
+              {formData.executionConfig.notifyOnComplete && (
+                <Badge variant="outline" className="text-xs">
+                  完成后通知
+                </Badge>
+              )}
+              {formData.executionConfig.importTags && (
+                <Badge variant="outline" className="text-xs flex items-center gap-1">
+                  <Tag className="h-3 w-3" />
+                  导入标签
+                </Badge>
+              )}
+              {formData.executionConfig.sendToWechat && (
+                <Badge variant="outline" className="text-xs flex items-center gap-1">
+                  <Mail className="h-3 w-3" />
+                  发送到微信: {formData.executionConfig.wechatId}
+                </Badge>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-between pt-4">
+        <Button variant="outline" onClick={onBack}>
+          返回
+        </Button>
+        <Button onClick={handleSubmit} disabled={!planName.trim() || isSubmitting}>
+          {isSubmitting ? "提交中..." : "开始优化"}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-strategy/components/execution-setup.tsx b/Cunkebao/app/workspace/ai-strategy/components/execution-setup.tsx
new file mode 100644
index 00000000..6175f494
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-strategy/components/execution-setup.tsx
@@ -0,0 +1,203 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Checkbox } from "@/components/ui/checkbox"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Calendar } from "@/components/ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { format } from "date-fns"
+import { CalendarIcon, Clock } from "lucide-react"
+
+interface ExecutionSetupProps {
+  formData: any
+  updateFormData: (data: any) => void
+  onNext: () => void
+  onBack: () => void
+}
+
+export function ExecutionSetup({ formData, updateFormData, onNext, onBack }: ExecutionSetupProps) {
+  const [scheduleType, setScheduleType] = useState<string>(formData.executionConfig?.scheduleType || "immediate")
+  const [scheduledDate, setScheduledDate] = useState<Date | undefined>(
+    formData.executionConfig?.scheduledTime ? new Date(formData.executionConfig.scheduledTime) : undefined,
+  )
+  const [scheduledTime, setScheduledTime] = useState<string>(
+    formData.executionConfig?.scheduledTime
+      ? format(new Date(formData.executionConfig.scheduledTime), "HH:mm")
+      : "09:00",
+  )
+  const [notifyOnComplete, setNotifyOnComplete] = useState<boolean>(
+    formData.executionConfig?.notifyOnComplete !== undefined ? formData.executionConfig.notifyOnComplete : true,
+  )
+  const [importTags, setImportTags] = useState<boolean>(
+    formData.executionConfig?.importTags !== undefined ? formData.executionConfig.importTags : true,
+  )
+  const [sendToWechat, setSendToWechat] = useState<boolean>(
+    formData.executionConfig?.sendToWechat !== undefined ? formData.executionConfig.sendToWechat : false,
+  )
+  const [wechatId, setWechatId] = useState<string>(formData.executionConfig?.wechatId || "")
+
+  const handleContinue = () => {
+    let scheduledTimeString = ""
+
+    if (scheduleType === "scheduled" && scheduledDate) {
+      const [hours, minutes] = scheduledTime.split(":").map(Number)
+      const dateObj = new Date(scheduledDate)
+      dateObj.setHours(hours, minutes)
+      scheduledTimeString = dateObj.toISOString()
+    }
+
+    updateFormData({
+      executionConfig: {
+        scheduleType,
+        scheduledTime: scheduledTimeString,
+        notifyOnComplete,
+        importTags,
+        sendToWechat,
+        wechatId: sendToWechat ? wechatId : "",
+      },
+    })
+
+    onNext()
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold mb-1">执行设置</h2>
+        <p className="text-gray-500 text-sm">设置策略执行时间和结果处理方式</p>
+      </div>
+
+      <div className="space-y-4">
+        <Label className="text-base font-medium">执行时间</Label>
+        <RadioGroup value={scheduleType} onValueChange={setScheduleType} className="space-y-3">
+          <div className="flex items-start space-x-2">
+            <RadioGroupItem value="immediate" id="immediate" />
+            <div className="grid gap-1.5">
+              <Label htmlFor="immediate" className="font-medium">
+                立即执行
+              </Label>
+              <p className="text-sm text-gray-500">提交后立即开始执行策略优化</p>
+            </div>
+          </div>
+
+          <div className="flex items-start space-x-2">
+            <RadioGroupItem value="scheduled" id="scheduled" />
+            <div className="grid gap-1.5">
+              <Label htmlFor="scheduled" className="font-medium">
+                定时执行
+              </Label>
+              <p className="text-sm text-gray-500">在指定的时间执行策略优化</p>
+
+              {scheduleType === "scheduled" && (
+                <div className="flex flex-col sm:flex-row gap-3 mt-2">
+                  <div>
+                    <Label htmlFor="date" className="text-sm">
+                      日期
+                    </Label>
+                    <Popover>
+                      <PopoverTrigger asChild>
+                        <Button variant="outline" className="w-full justify-start text-left font-normal mt-1" id="date">
+                          <CalendarIcon className="mr-2 h-4 w-4" />
+                          {scheduledDate ? format(scheduledDate, "yyyy-MM-dd") : "选择日期"}
+                        </Button>
+                      </PopoverTrigger>
+                      <PopoverContent className="w-auto p-0">
+                        <Calendar mode="single" selected={scheduledDate} onSelect={setScheduledDate} initialFocus />
+                      </PopoverContent>
+                    </Popover>
+                  </div>
+
+                  <div>
+                    <Label htmlFor="time" className="text-sm">
+                      时间
+                    </Label>
+                    <div className="flex items-center mt-1">
+                      <Clock className="mr-2 h-4 w-4 text-gray-400" />
+                      <Input
+                        id="time"
+                        type="time"
+                        value={scheduledTime}
+                        onChange={(e) => setScheduledTime(e.target.value)}
+                        className="w-full"
+                      />
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </RadioGroup>
+      </div>
+
+      <div className="space-y-4">
+        <Label className="text-base font-medium">结果处理</Label>
+
+        <div className="space-y-3">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="notify"
+              checked={notifyOnComplete}
+              onCheckedChange={(checked) => setNotifyOnComplete(checked as boolean)}
+            />
+            <Label htmlFor="notify" className="cursor-pointer">
+              完成后通知我
+            </Label>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="import"
+              checked={importTags}
+              onCheckedChange={(checked) => setImportTags(checked as boolean)}
+            />
+            <Label htmlFor="import" className="cursor-pointer">
+              将结果导入为流量池标签
+            </Label>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="wechat"
+              checked={sendToWechat}
+              onCheckedChange={(checked) => setSendToWechat(checked as boolean)}
+            />
+            <Label htmlFor="wechat" className="cursor-pointer">
+              发送报告到微信
+            </Label>
+          </div>
+
+          {sendToWechat && (
+            <div className="pl-6 pt-2">
+              <Label htmlFor="wechatId" className="text-sm">
+                微信号
+              </Label>
+              <Input
+                id="wechatId"
+                value={wechatId}
+                onChange={(e) => setWechatId(e.target.value)}
+                placeholder="输入接收报告的微信号"
+                className="mt-1"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="flex justify-between pt-4">
+        <Button variant="outline" onClick={onBack}>
+          返回
+        </Button>
+        <Button
+          onClick={handleContinue}
+          disabled={(scheduleType === "scheduled" && !scheduledDate) || (sendToWechat && !wechatId)}
+        >
+          继续
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-strategy/components/step-indicator.tsx b/Cunkebao/app/workspace/ai-strategy/components/step-indicator.tsx
new file mode 100644
index 00000000..b709a2c8
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-strategy/components/step-indicator.tsx
@@ -0,0 +1,58 @@
+import { CheckIcon } from "lucide-react"
+
+interface Step {
+  number: number
+  title: string
+}
+
+interface StepIndicatorProps {
+  steps: Step[]
+  currentStep: number
+}
+
+export function StepIndicator({ steps, currentStep }: StepIndicatorProps) {
+  return (
+    <div className="flex items-center justify-between">
+      {steps.map((step, index) => {
+        const isCompleted = currentStep > step.number
+        const isCurrent = currentStep === step.number
+
+        return (
+          <div key={step.number} className="flex items-center">
+            {/* 步骤连接线 */}
+            {index > 0 && <div className={`h-1 w-full ${isCompleted ? "bg-blue-500" : "bg-gray-200"}`} />}
+
+            {/* 步骤圆点 */}
+            <div className="relative flex items-center justify-center">
+              <div
+                className={`flex h-8 w-8 items-center justify-center rounded-full border-2 ${
+                  isCompleted
+                    ? "border-blue-500 bg-blue-500"
+                    : isCurrent
+                      ? "border-blue-500 bg-white"
+                      : "border-gray-300 bg-white"
+                }`}
+              >
+                {isCompleted ? (
+                  <CheckIcon className="h-5 w-5 text-white" />
+                ) : (
+                  <span className={`text-sm font-medium ${isCurrent ? "text-blue-500" : "text-gray-500"}`}>
+                    {step.number}
+                  </span>
+                )}
+              </div>
+
+              {/* 步骤标题 */}
+              <div className="absolute top-10 whitespace-nowrap">
+                <p className={`text-sm font-medium ${isCompleted || isCurrent ? "text-blue-500" : "text-gray-500"}`}>
+                  {step.title}
+                </p>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-strategy/components/strategy-selection.tsx b/Cunkebao/app/workspace/ai-strategy/components/strategy-selection.tsx
new file mode 100644
index 00000000..e5200e27
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-strategy/components/strategy-selection.tsx
@@ -0,0 +1,322 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Label } from "@/components/ui/label"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent } from "@/components/ui/card"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { ShoppingBag, Database, BarChart, Settings } from "lucide-react"
+
+interface StrategySelectionProps {
+  formData: any
+  updateFormData: (data: any) => void
+  onNext: () => void
+  onBack: () => void
+}
+
+export function StrategySelection({ formData, updateFormData, onNext, onBack }: StrategySelectionProps) {
+  const [strategyType, setStrategyType] = useState<string>(formData.strategyType || "")
+  const [jdConfig, setJdConfig] = useState({
+    username: formData.strategyConfig?.username || "",
+    password: formData.strategyConfig?.password || "",
+    memberLevel: formData.strategyConfig?.memberLevel || "all",
+  })
+  const [yisiConfig, setYisiConfig] = useState({
+    apiKey: formData.strategyConfig?.apiKey || "",
+    apiEndpoint: formData.strategyConfig?.apiEndpoint || "https://api.yisi.com/user-profile",
+    analysisDepth: formData.strategyConfig?.analysisDepth || "basic",
+  })
+  const [dbConfig, setDbConfig] = useState({
+    connectionString: formData.strategyConfig?.connectionString || "",
+    tableName: formData.strategyConfig?.tableName || "",
+    matchFields: formData.strategyConfig?.matchFields || "phone,wechatId",
+  })
+  const [customConfig, setCustomConfig] = useState({
+    name: formData.strategyConfig?.name || "",
+    description: formData.strategyConfig?.description || "",
+  })
+
+  const getStrategyName = () => {
+    switch (strategyType) {
+      case "jd":
+        return "京东会员识别"
+      case "yisi":
+        return "易思用户画像"
+      case "database":
+        return "数据库客户匹配"
+      case "custom":
+        return customConfig.name || "自定义策略"
+      default:
+        return ""
+    }
+  }
+
+  const getStrategyConfig = () => {
+    switch (strategyType) {
+      case "jd":
+        return jdConfig
+      case "yisi":
+        return yisiConfig
+      case "database":
+        return dbConfig
+      case "custom":
+        return customConfig
+      default:
+        return {}
+    }
+  }
+
+  const handleContinue = () => {
+    updateFormData({
+      strategyType,
+      strategyName: getStrategyName(),
+      strategyConfig: getStrategyConfig(),
+    })
+    onNext()
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold mb-1">选择优化策略</h2>
+        <p className="text-gray-500 text-sm">选择用于流量池优化的策略插件</p>
+      </div>
+
+      <RadioGroup
+        value={strategyType}
+        onValueChange={setStrategyType}
+        className="grid grid-cols-1 md:grid-cols-2 gap-4"
+      >
+        <div>
+          <RadioGroupItem value="jd" id="jd" className="peer sr-only" />
+          <Label
+            htmlFor="jd"
+            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-blue-500 [&:has([data-state=checked])]:border-blue-500 cursor-pointer"
+          >
+            <ShoppingBag className="mb-3 h-6 w-6 text-orange-500" />
+            <div className="text-center">
+              <p className="font-medium">京东会员识别</p>
+              <p className="text-sm text-gray-500">识别流量池中的京东会员用户</p>
+            </div>
+          </Label>
+        </div>
+
+        <div>
+          <RadioGroupItem value="yisi" id="yisi" className="peer sr-only" />
+          <Label
+            htmlFor="yisi"
+            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-blue-500 [&:has([data-state=checked])]:border-blue-500 cursor-pointer"
+          >
+            <BarChart className="mb-3 h-6 w-6 text-blue-500" />
+            <div className="text-center">
+              <p className="font-medium">易思接口</p>
+              <p className="text-sm text-gray-500">通过易思API分析用户画像</p>
+            </div>
+          </Label>
+        </div>
+
+        <div>
+          <RadioGroupItem value="database" id="database" className="peer sr-only" />
+          <Label
+            htmlFor="database"
+            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-blue-500 [&:has([data-state=checked])]:border-blue-500 cursor-pointer"
+          >
+            <Database className="mb-3 h-6 w-6 text-green-500" />
+            <div className="text-center">
+              <p className="font-medium">数据库匹配</p>
+              <p className="text-sm text-gray-500">与现有客户数据库进行匹配</p>
+            </div>
+          </Label>
+        </div>
+
+        <div>
+          <RadioGroupItem value="custom" id="custom" className="peer sr-only" />
+          <Label
+            htmlFor="custom"
+            className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-blue-500 [&:has([data-state=checked])]:border-blue-500 cursor-pointer"
+          >
+            <Settings className="mb-3 h-6 w-6 text-purple-500" />
+            <div className="text-center">
+              <p className="font-medium">自定义策略</p>
+              <p className="text-sm text-gray-500">创建自定义的优化策略</p>
+            </div>
+          </Label>
+        </div>
+      </RadioGroup>
+
+      {strategyType === "jd" && (
+        <Card>
+          <CardContent className="p-4 space-y-4">
+            <h3 className="font-medium">京东会员识别配置</h3>
+
+            <div className="space-y-2">
+              <Label htmlFor="jd-username">京东账号</Label>
+              <Input
+                id="jd-username"
+                value={jdConfig.username}
+                onChange={(e) => setJdConfig({ ...jdConfig, username: e.target.value })}
+                placeholder="输入京东账号"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="jd-password">京东密码</Label>
+              <Input
+                id="jd-password"
+                type="password"
+                value={jdConfig.password}
+                onChange={(e) => setJdConfig({ ...jdConfig, password: e.target.value })}
+                placeholder="输入京东密码"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="jd-level">会员等级筛选</Label>
+              <select
+                id="jd-level"
+                value={jdConfig.memberLevel}
+                onChange={(e) => setJdConfig({ ...jdConfig, memberLevel: e.target.value })}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background"
+              >
+                <option value="all">所有会员</option>
+                <option value="plus">PLUS会员</option>
+                <option value="vip">VIP会员</option>
+                <option value="regular">普通会员</option>
+              </select>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {strategyType === "yisi" && (
+        <Card>
+          <CardContent className="p-4 space-y-4">
+            <h3 className="font-medium">易思接口配置</h3>
+
+            <div className="space-y-2">
+              <Label htmlFor="yisi-apikey">API密钥</Label>
+              <Input
+                id="yisi-apikey"
+                value={yisiConfig.apiKey}
+                onChange={(e) => setYisiConfig({ ...yisiConfig, apiKey: e.target.value })}
+                placeholder="输入易思API密钥"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="yisi-endpoint">API端点</Label>
+              <Input
+                id="yisi-endpoint"
+                value={yisiConfig.apiEndpoint}
+                onChange={(e) => setYisiConfig({ ...yisiConfig, apiEndpoint: e.target.value })}
+                placeholder="输入API端点URL"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="yisi-depth">分析深度</Label>
+              <select
+                id="yisi-depth"
+                value={yisiConfig.analysisDepth}
+                onChange={(e) => setYisiConfig({ ...yisiConfig, analysisDepth: e.target.value })}
+                className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background"
+              >
+                <option value="basic">基础分析</option>
+                <option value="standard">标准分析</option>
+                <option value="deep">深度分析</option>
+              </select>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {strategyType === "database" && (
+        <Card>
+          <CardContent className="p-4 space-y-4">
+            <h3 className="font-medium">数据库匹配配置</h3>
+
+            <div className="space-y-2">
+              <Label htmlFor="db-connection">连接字符串</Label>
+              <Input
+                id="db-connection"
+                value={dbConfig.connectionString}
+                onChange={(e) => setDbConfig({ ...dbConfig, connectionString: e.target.value })}
+                placeholder="输入数据库连接字符串"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="db-table">表名</Label>
+              <Input
+                id="db-table"
+                value={dbConfig.tableName}
+                onChange={(e) => setDbConfig({ ...dbConfig, tableName: e.target.value })}
+                placeholder="输入表名"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="db-fields">匹配字段</Label>
+              <Input
+                id="db-fields"
+                value={dbConfig.matchFields}
+                onChange={(e) => setDbConfig({ ...dbConfig, matchFields: e.target.value })}
+                placeholder="输入匹配字段，用逗号分隔"
+              />
+              <p className="text-xs text-gray-500">多个字段用逗号分隔，如：phone,wechatId</p>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {strategyType === "custom" && (
+        <Card>
+          <CardContent className="p-4 space-y-4">
+            <h3 className="font-medium">自定义策略配置</h3>
+
+            <div className="space-y-2">
+              <Label htmlFor="custom-name">策略名称</Label>
+              <Input
+                id="custom-name"
+                value={customConfig.name}
+                onChange={(e) => setCustomConfig({ ...customConfig, name: e.target.value })}
+                placeholder="输入策略名称"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="custom-desc">策略描述</Label>
+              <textarea
+                id="custom-desc"
+                value={customConfig.description}
+                onChange={(e) => setCustomConfig({ ...customConfig, description: e.target.value })}
+                placeholder="输入策略描述"
+                className="w-full min-h-[100px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background"
+              />
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      <div className="flex justify-between pt-4">
+        <Button variant="outline" onClick={onBack}>
+          返回
+        </Button>
+        <Button
+          onClick={handleContinue}
+          disabled={
+            !strategyType ||
+            (strategyType === "jd" && (!jdConfig.username || !jdConfig.password)) ||
+            (strategyType === "yisi" && !yisiConfig.apiKey) ||
+            (strategyType === "database" && (!dbConfig.connectionString || !dbConfig.tableName)) ||
+            (strategyType === "custom" && !customConfig.name)
+          }
+        >
+          继续
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-strategy/components/traffic-pool-selection.tsx b/Cunkebao/app/workspace/ai-strategy/components/traffic-pool-selection.tsx
new file mode 100644
index 00000000..362473a9
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-strategy/components/traffic-pool-selection.tsx
@@ -0,0 +1,294 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Card, CardContent } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Search, Smartphone, Users } from "lucide-react"
+
+interface Device {
+  id: string
+  name: string
+  status: "online" | "offline"
+}
+
+interface TrafficPool {
+  id: string
+  name: string
+  deviceId: string
+  deviceName: string
+  type: "wechat" | "device"
+  userCount: number
+  lastUpdated: string
+}
+
+interface TrafficPoolSelectionProps {
+  formData: any
+  updateFormData: (data: any) => void
+  onNext: () => void
+}
+
+export function TrafficPoolSelection({ formData, updateFormData, onNext }: TrafficPoolSelectionProps) {
+  const [devices, setDevices] = useState<Device[]>([])
+  const [trafficPools, setTrafficPools] = useState<TrafficPool[]>([])
+  const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>(formData.deviceIds || [])
+  const [selectedPoolIds, setSelectedPoolIds] = useState<string[]>(formData.trafficPoolIds || [])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [isLoading, setIsLoading] = useState(true)
+  const [activeTab, setActiveTab] = useState("devices")
+
+  useEffect(() => {
+    // 模拟加载设备和流量池数据
+    const fetchData = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      const mockDevices: Device[] = [
+        { id: "device-1", name: "iPhone 13 Pro", status: "online" },
+        { id: "device-2", name: "Xiaomi 12", status: "online" },
+        { id: "device-3", name: "Huawei P40", status: "offline" },
+        { id: "device-4", name: "OPPO Find X3", status: "online" },
+        { id: "device-5", name: "Samsung S21", status: "offline" },
+      ]
+
+      const mockTrafficPools: TrafficPool[] = [
+        {
+          id: "pool-1",
+          name: "微信好友池-设备1",
+          deviceId: "device-1",
+          deviceName: "iPhone 13 Pro",
+          type: "wechat",
+          userCount: 156,
+          lastUpdated: "2023-12-15T10:30:00Z",
+        },
+        {
+          id: "pool-2",
+          name: "设备流量池-设备1",
+          deviceId: "device-1",
+          deviceName: "iPhone 13 Pro",
+          type: "device",
+          userCount: 287,
+          lastUpdated: "2023-12-14T15:45:00Z",
+        },
+        {
+          id: "pool-3",
+          name: "微信好友池-设备2",
+          deviceId: "device-2",
+          deviceName: "Xiaomi 12",
+          type: "wechat",
+          userCount: 203,
+          lastUpdated: "2023-12-16T09:15:00Z",
+        },
+        {
+          id: "pool-4",
+          name: "设备流量池-设备3",
+          deviceId: "device-3",
+          deviceName: "Huawei P40",
+          type: "device",
+          userCount: 156,
+          lastUpdated: "2023-12-13T14:20:00Z",
+        },
+        {
+          id: "pool-5",
+          name: "微信好友池-设备4",
+          deviceId: "device-4",
+          deviceName: "OPPO Find X3",
+          type: "wechat",
+          userCount: 178,
+          lastUpdated: "2023-12-12T11:30:00Z",
+        },
+      ]
+
+      setDevices(mockDevices)
+      setTrafficPools(mockTrafficPools)
+      setIsLoading(false)
+    }
+
+    fetchData()
+  }, [])
+
+  const handleDeviceToggle = (deviceId: string) => {
+    setSelectedDeviceIds((prev) => {
+      if (prev.includes(deviceId)) {
+        return prev.filter((id) => id !== deviceId)
+      } else {
+        return [...prev, deviceId]
+      }
+    })
+  }
+
+  const handlePoolToggle = (poolId: string) => {
+    setSelectedPoolIds((prev) => {
+      if (prev.includes(poolId)) {
+        return prev.filter((id) => id !== poolId)
+      } else {
+        return [...prev, poolId]
+      }
+    })
+  }
+
+  const filteredDevices = devices.filter((device) => device.name.toLowerCase().includes(searchQuery.toLowerCase()))
+
+  const filteredPools = trafficPools.filter(
+    (pool) =>
+      (selectedDeviceIds.length === 0 || selectedDeviceIds.includes(pool.deviceId)) &&
+      pool.name.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  const handleContinue = () => {
+    const selectedPools = trafficPools.filter((pool) => selectedPoolIds.includes(pool.id))
+
+    const totalUserCount = selectedPools.reduce((sum, pool) => sum + pool.userCount, 0)
+
+    updateFormData({
+      deviceIds: selectedDeviceIds,
+      deviceNames: devices.filter((device) => selectedDeviceIds.includes(device.id)).map((device) => device.name),
+      trafficPoolIds: selectedPoolIds,
+      trafficPoolNames: selectedPools.map((pool) => pool.name),
+      trafficPoolSize: totalUserCount,
+    })
+
+    onNext()
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl font-semibold mb-1">选择流量池</h2>
+        <p className="text-gray-500 text-sm">选择需要进行策略优化的设备和流量池</p>
+      </div>
+
+      <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>
+
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="devices">设备选择</TabsTrigger>
+          <TabsTrigger value="pools">流量池选择</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="devices" className="space-y-4 pt-4">
+          {isLoading ? (
+            <div className="flex justify-center py-8">
+              <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+            </div>
+          ) : filteredDevices.length > 0 ? (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {filteredDevices.map((device) => (
+                <Card
+                  key={device.id}
+                  className={`cursor-pointer transition-all ${
+                    selectedDeviceIds.includes(device.id) ? "border-blue-500 shadow-sm" : "hover:border-gray-300"
+                  }`}
+                  onClick={() => handleDeviceToggle(device.id)}
+                >
+                  <CardContent className="p-4 flex items-center justify-between">
+                    <div className="flex items-center space-x-3">
+                      <div
+                        className={`w-10 h-10 rounded-full flex items-center justify-center ${
+                          device.status === "online" ? "bg-green-100" : "bg-gray-100"
+                        }`}
+                      >
+                        <Smartphone
+                          className={`h-5 w-5 ${device.status === "online" ? "text-green-600" : "text-gray-400"}`}
+                        />
+                      </div>
+                      <div>
+                        <p className="font-medium">{device.name}</p>
+                        <Badge
+                          variant="outline"
+                          className={
+                            device.status === "online"
+                              ? "bg-green-50 text-green-700 border-green-200"
+                              : "bg-gray-50 text-gray-700 border-gray-200"
+                          }
+                        >
+                          {device.status === "online" ? "在线" : "离线"}
+                        </Badge>
+                      </div>
+                    </div>
+                    <Checkbox
+                      checked={selectedDeviceIds.includes(device.id)}
+                      onCheckedChange={() => handleDeviceToggle(device.id)}
+                      className="h-5 w-5"
+                    />
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">未找到匹配的设备</div>
+          )}
+        </TabsContent>
+
+        <TabsContent value="pools" className="space-y-4 pt-4">
+          {isLoading ? (
+            <div className="flex justify-center py-8">
+              <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+            </div>
+          ) : filteredPools.length > 0 ? (
+            <div className="space-y-4">
+              {filteredPools.map((pool) => (
+                <Card
+                  key={pool.id}
+                  className={`cursor-pointer transition-all ${
+                    selectedPoolIds.includes(pool.id) ? "border-blue-500 shadow-sm" : "hover:border-gray-300"
+                  }`}
+                  onClick={() => handlePoolToggle(pool.id)}
+                >
+                  <CardContent className="p-4 flex items-center justify-between">
+                    <div className="flex items-center space-x-3">
+                      <div
+                        className={`w-10 h-10 rounded-full flex items-center justify-center ${
+                          pool.type === "wechat" ? "bg-green-100" : "bg-blue-100"
+                        }`}
+                      >
+                        <Users className={`h-5 w-5 ${pool.type === "wechat" ? "text-green-600" : "text-blue-600"}`} />
+                      </div>
+                      <div>
+                        <p className="font-medium">{pool.name}</p>
+                        <div className="flex items-center space-x-2 text-sm text-gray-500">
+                          <span>设备: {pool.deviceName}</span>
+                          <span>•</span>
+                          <span>用户数: {pool.userCount}</span>
+                        </div>
+                      </div>
+                    </div>
+                    <Checkbox
+                      checked={selectedPoolIds.includes(pool.id)}
+                      onCheckedChange={() => handlePoolToggle(pool.id)}
+                      className="h-5 w-5"
+                    />
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          ) : (
+            <div className="text-center py-8 text-gray-500">
+              {selectedDeviceIds.length > 0 ? "所选设备没有可用的流量池" : "请先选择设备或搜索流量池"}
+            </div>
+          )}
+        </TabsContent>
+      </Tabs>
+
+      <div className="flex justify-between pt-4">
+        <div className="text-sm text-gray-500">
+          已选择 {selectedDeviceIds.length} 个设备, {selectedPoolIds.length} 个流量池
+        </div>
+        <Button onClick={handleContinue} disabled={selectedPoolIds.length === 0}>
+          继续
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-strategy/new/page.tsx b/Cunkebao/app/workspace/ai-strategy/new/page.tsx
new file mode 100644
index 00000000..39131e4e
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-strategy/new/page.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { ArrowLeft } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { StepIndicator } from "../components/step-indicator"
+import { TrafficPoolSelection } from "../components/traffic-pool-selection"
+import { StrategySelection } from "../components/strategy-selection"
+import { ExecutionSetup } from "../components/execution-setup"
+import { ConfirmStrategy } from "../components/confirm-strategy"
+
+export default function NewStrategyPage() {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [formData, setFormData] = useState({
+    name: "",
+    deviceIds: [] as string[],
+    deviceNames: [] as string[],
+    trafficPoolIds: [] as string[],
+    trafficPoolNames: [] as string[],
+    trafficPoolSize: 0,
+    strategyType: "",
+    strategyName: "",
+    strategyConfig: {} as Record<string, any>,
+    executionConfig: {
+      scheduleType: "immediate", // "immediate", "scheduled"
+      scheduledTime: "",
+      notifyOnComplete: true,
+      importTags: true,
+      sendToWechat: false,
+      wechatId: "",
+    },
+  })
+
+  const handleNext = () => {
+    setCurrentStep((prev) => prev + 1)
+  }
+
+  const handleBack = () => {
+    if (currentStep === 1) {
+      router.back()
+    } else {
+      setCurrentStep((prev) => prev - 1)
+    }
+  }
+
+  const handleSubmit = async () => {
+    // 模拟提交
+    console.log("提交策略优化:", formData)
+
+    // 模拟加载
+    await new Promise((resolve) => setTimeout(resolve, 1500))
+
+    // 跳转到列表页
+    router.push("/workspace/ai-strategy")
+  }
+
+  const updateFormData = (data: Partial<typeof formData>) => {
+    setFormData((prev) => ({ ...prev, ...data }))
+  }
+
+  return (
+    <div className="flex flex-col h-screen max-h-screen bg-gray-50">
+      {/* 头部 */}
+      <div className="bg-white p-4 border-b flex items-center">
+        <Button variant="ghost" size="icon" onClick={handleBack} className="mr-2">
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <h1 className="text-xl font-semibold">新建优化策略</h1>
+      </div>
+
+      {/* 步骤指示器 */}
+      <div className="bg-white border-b">
+        <div className="max-w-4xl mx-auto py-4 px-4">
+          <StepIndicator
+            currentStep={currentStep}
+            steps={[
+              { number: 1, title: "选择流量池" },
+              { number: 2, title: "选择优化策略" },
+              { number: 3, title: "执行设置" },
+              { number: 4, title: "确认策略" },
+            ]}
+          />
+        </div>
+      </div>
+
+      {/* 主内容区域 */}
+      <div className="flex-1 p-4 overflow-auto">
+        <div className="max-w-4xl mx-auto">
+          <Card className="p-6">
+            {currentStep === 1 && (
+              <TrafficPoolSelection formData={formData} updateFormData={updateFormData} onNext={handleNext} />
+            )}
+
+            {currentStep === 2 && (
+              <StrategySelection
+                formData={formData}
+                updateFormData={updateFormData}
+                onNext={handleNext}
+                onBack={handleBack}
+              />
+            )}
+
+            {currentStep === 3 && (
+              <ExecutionSetup
+                formData={formData}
+                updateFormData={updateFormData}
+                onNext={handleNext}
+                onBack={handleBack}
+              />
+            )}
+
+            {currentStep === 4 && (
+              <ConfirmStrategy
+                formData={formData}
+                updateFormData={updateFormData}
+                onSubmit={handleSubmit}
+                onBack={handleBack}
+              />
+            )}
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/ai-strategy/page.tsx b/Cunkebao/app/workspace/ai-strategy/page.tsx
new file mode 100644
index 00000000..c3814ce1
--- /dev/null
+++ b/Cunkebao/app/workspace/ai-strategy/page.tsx
@@ -0,0 +1,371 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { ArrowLeft, Plus, FileText, BarChart2, Mail, Tag } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import Link from "next/link"
+
+interface StrategyPlan {
+  id: string
+  name: string
+  deviceIds: string[]
+  deviceNames: string[]
+  status: "running" | "completed" | "failed"
+  createdAt: string
+  completedAt?: string
+  strategyType: "jd" | "yisi" | "database" | "custom"
+  strategyName: string
+  trafficPoolSize: number
+  optimizedUsers: number
+}
+
+export default function AIStrategyPage() {
+  const router = useRouter()
+  const [plans, setPlans] = useState<StrategyPlan[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // 模拟加载数据
+    const fetchPlans = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      const mockPlans: StrategyPlan[] = [
+        {
+          id: "plan-1",
+          name: "京东会员优化",
+          deviceIds: ["device-1", "device-2"],
+          deviceNames: ["设备1", "设备2"],
+          status: "completed",
+          createdAt: "2023-12-15T10:30:00Z",
+          completedAt: "2023-12-15T11:45:00Z",
+          strategyType: "jd",
+          strategyName: "京东会员识别",
+          trafficPoolSize: 287,
+          optimizedUsers: 142,
+        },
+        {
+          id: "plan-2",
+          name: "易思API用户分析",
+          deviceIds: ["device-3"],
+          deviceNames: ["设备3"],
+          status: "running",
+          createdAt: "2023-12-16T09:15:00Z",
+          strategyType: "yisi",
+          strategyName: "易思用户画像",
+          trafficPoolSize: 156,
+          optimizedUsers: 0,
+        },
+        {
+          id: "plan-3",
+          name: "数据库客户匹配",
+          deviceIds: ["device-1", "device-4"],
+          deviceNames: ["设备1", "设备4"],
+          status: "completed",
+          createdAt: "2023-12-14T14:20:00Z",
+          completedAt: "2023-12-14T16:10:00Z",
+          strategyType: "database",
+          strategyName: "CRM客户匹配",
+          trafficPoolSize: 423,
+          optimizedUsers: 215,
+        },
+      ]
+
+      setPlans(mockPlans)
+      setIsLoading(false)
+    }
+
+    fetchPlans()
+  }, [])
+
+  const getStatusBadge = (status: StrategyPlan["status"]) => {
+    switch (status) {
+      case "running":
+        return (
+          <Badge variant="outline" className="bg-blue-50 text-blue-600 border-blue-200">
+            执行中
+          </Badge>
+        )
+      case "completed":
+        return (
+          <Badge variant="outline" className="bg-green-50 text-green-600 border-green-200">
+            已完成
+          </Badge>
+        )
+      case "failed":
+        return (
+          <Badge variant="outline" className="bg-red-50 text-red-600 border-red-200">
+            失败
+          </Badge>
+        )
+    }
+  }
+
+  const getStrategyLabel = (type: StrategyPlan["strategyType"]) => {
+    switch (type) {
+      case "jd":
+        return "京东会员"
+      case "yisi":
+        return "易思接口"
+      case "database":
+        return "数据库匹配"
+      case "custom":
+        return "自定义策略"
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-screen max-h-screen bg-gray-50">
+      {/* 头部 */}
+      <div className="bg-white p-4 border-b flex items-center justify-between">
+        <div className="flex items-center">
+          <Button variant="ghost" size="icon" onClick={() => router.back()} className="mr-2">
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-xl font-semibold">AI策略优化</h1>
+        </div>
+        <Button onClick={() => router.push("/workspace/ai-strategy/new")} className="flex items-center gap-2">
+          <Plus className="h-4 w-4" />
+          新建优化策略
+        </Button>
+      </div>
+
+      {/* 主内容区域 */}
+      <div className="flex-1 p-4 overflow-auto">
+        <div className="max-w-5xl mx-auto">
+          <Tabs defaultValue="all" className="w-full">
+            <TabsList className="grid w-full grid-cols-3 mb-6">
+              <TabsTrigger value="all">全部策略</TabsTrigger>
+              <TabsTrigger value="running">执行中</TabsTrigger>
+              <TabsTrigger value="completed">已完成</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="all" className="space-y-4">
+              {isLoading ? (
+                <div className="flex justify-center py-12">
+                  <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+                </div>
+              ) : plans.length > 0 ? (
+                plans.map((plan) => (
+                  <Card key={plan.id} className="hover:shadow-md transition-shadow">
+                    <CardHeader className="pb-2">
+                      <div className="flex justify-between items-start">
+                        <div>
+                          <CardTitle>{plan.name}</CardTitle>
+                          <CardDescription className="mt-1">设备: {plan.deviceNames.join(", ")}</CardDescription>
+                        </div>
+                        {getStatusBadge(plan.status)}
+                      </div>
+                    </CardHeader>
+                    <CardContent>
+                      <div className="flex flex-col space-y-3">
+                        <div className="flex justify-between text-sm">
+                          <span className="text-gray-500">策略类型</span>
+                          <span className="font-medium">{getStrategyLabel(plan.strategyType)}</span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-gray-500">策略名称</span>
+                          <span className="font-medium">{plan.strategyName}</span>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                          <span className="text-gray-500">流量池大小</span>
+                          <span className="font-medium">{plan.trafficPoolSize} 用户</span>
+                        </div>
+                        {plan.status === "completed" && (
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">优化用户数</span>
+                            <span className="font-medium">{plan.optimizedUsers} 用户</span>
+                          </div>
+                        )}
+                        <div className="flex justify-between text-sm">
+                          <span className="text-gray-500">创建时间</span>
+                          <span>{new Date(plan.createdAt).toLocaleString()}</span>
+                        </div>
+                        {plan.completedAt && (
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">完成时间</span>
+                            <span>{new Date(plan.completedAt).toLocaleString()}</span>
+                          </div>
+                        )}
+
+                        <div className="flex justify-end gap-2 pt-2">
+                          {plan.status === "completed" && (
+                            <>
+                              <Button variant="outline" size="sm" className="flex items-center gap-1">
+                                <Tag className="h-4 w-4" />
+                                <span>导入标签</span>
+                              </Button>
+                              <Button variant="outline" size="sm" className="flex items-center gap-1">
+                                <Mail className="h-4 w-4" />
+                                <span>发送报告</span>
+                              </Button>
+                              <Link href={`/workspace/ai-strategy/${plan.id}`}>
+                                <Button size="sm" className="flex items-center gap-1">
+                                  <BarChart2 className="h-4 w-4" />
+                                  <span>查看报告</span>
+                                </Button>
+                              </Link>
+                            </>
+                          )}
+                          {plan.status === "running" && (
+                            <Button variant="outline" size="sm" className="flex items-center gap-1">
+                              <FileText className="h-4 w-4" />
+                              <span>查看进度</span>
+                            </Button>
+                          )}
+                        </div>
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))
+              ) : (
+                <div className="text-center py-12 bg-white rounded-lg border">
+                  <div className="mx-auto w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+                    <BarChart2 className="h-8 w-8 text-gray-400" />
+                  </div>
+                  <h3 className="text-lg font-medium text-gray-900 mb-1">暂无优化策略</h3>
+                  <p className="text-gray-500 mb-4">创建一个新的AI策略优化计划来开始</p>
+                  <Button onClick={() => router.push("/workspace/ai-strategy/new")}>新建优化策略</Button>
+                </div>
+              )}
+            </TabsContent>
+
+            <TabsContent value="running" className="space-y-4">
+              {isLoading ? (
+                <div className="flex justify-center py-12">
+                  <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+                </div>
+              ) : plans.filter((p) => p.status === "running").length > 0 ? (
+                plans
+                  .filter((p) => p.status === "running")
+                  .map((plan) => (
+                    <Card key={plan.id} className="hover:shadow-md transition-shadow">
+                      {/* 与上面相同的卡片内容 */}
+                      <CardHeader className="pb-2">
+                        <div className="flex justify-between items-start">
+                          <div>
+                            <CardTitle>{plan.name}</CardTitle>
+                            <CardDescription className="mt-1">设备: {plan.deviceNames.join(", ")}</CardDescription>
+                          </div>
+                          {getStatusBadge(plan.status)}
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="flex flex-col space-y-3">
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">策略类型</span>
+                            <span className="font-medium">{getStrategyLabel(plan.strategyType)}</span>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">策略名称</span>
+                            <span className="font-medium">{plan.strategyName}</span>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">流量池大小</span>
+                            <span className="font-medium">{plan.trafficPoolSize} 用户</span>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">创建时间</span>
+                            <span>{new Date(plan.createdAt).toLocaleString()}</span>
+                          </div>
+
+                          <div className="flex justify-end gap-2 pt-2">
+                            <Button variant="outline" size="sm" className="flex items-center gap-1">
+                              <FileText className="h-4 w-4" />
+                              <span>查看进度</span>
+                            </Button>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))
+              ) : (
+                <div className="text-center py-12 bg-white rounded-lg border">
+                  <p className="text-gray-500">暂无执行中的优化策略</p>
+                </div>
+              )}
+            </TabsContent>
+
+            <TabsContent value="completed" className="space-y-4">
+              {isLoading ? (
+                <div className="flex justify-center py-12">
+                  <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-200 rounded-full animate-spin"></div>
+                </div>
+              ) : plans.filter((p) => p.status === "completed").length > 0 ? (
+                plans
+                  .filter((p) => p.status === "completed")
+                  .map((plan) => (
+                    <Card key={plan.id} className="hover:shadow-md transition-shadow">
+                      {/* 与上面相同的卡片内容 */}
+                      <CardHeader className="pb-2">
+                        <div className="flex justify-between items-start">
+                          <div>
+                            <CardTitle>{plan.name}</CardTitle>
+                            <CardDescription className="mt-1">设备: {plan.deviceNames.join(", ")}</CardDescription>
+                          </div>
+                          {getStatusBadge(plan.status)}
+                        </div>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="flex flex-col space-y-3">
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">策略类型</span>
+                            <span className="font-medium">{getStrategyLabel(plan.strategyType)}</span>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">策略名称</span>
+                            <span className="font-medium">{plan.strategyName}</span>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">流量池大小</span>
+                            <span className="font-medium">{plan.trafficPoolSize} 用户</span>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">优化用户数</span>
+                            <span className="font-medium">{plan.optimizedUsers} 用户</span>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">创建时间</span>
+                            <span>{new Date(plan.createdAt).toLocaleString()}</span>
+                          </div>
+                          <div className="flex justify-between text-sm">
+                            <span className="text-gray-500">完成时间</span>
+                            <span>{new Date(plan.completedAt!).toLocaleString()}</span>
+                          </div>
+
+                          <div className="flex justify-end gap-2 pt-2">
+                            <Button variant="outline" size="sm" className="flex items-center gap-1">
+                              <Tag className="h-4 w-4" />
+                              <span>导入标签</span>
+                            </Button>
+                            <Button variant="outline" size="sm" className="flex items-center gap-1">
+                              <Mail className="h-4 w-4" />
+                              <span>发送报告</span>
+                            </Button>
+                            <Link href={`/workspace/ai-strategy/${plan.id}`}>
+                              <Button size="sm" className="flex items-center gap-1">
+                                <BarChart2 className="h-4 w-4" />
+                                <span>查看报告</span>
+                              </Button>
+                            </Link>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))
+              ) : (
+                <div className="text-center py-12 bg-white rounded-lg border">
+                  <p className="text-gray-500">暂无已完成的优化策略</p>
+                </div>
+              )}
+            </TabsContent>
+          </Tabs>
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-group/components/StepByStepPlanForm.tsx b/Cunkebao/app/workspace/auto-group/components/StepByStepPlanForm.tsx
new file mode 100644
index 00000000..6042e918
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/StepByStepPlanForm.tsx
@@ -0,0 +1,187 @@
+"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/Cunkebao/app/workspace/auto-group/components/auto-group-service.ts b/Cunkebao/app/workspace/auto-group/components/auto-group-service.ts
new file mode 100644
index 00000000..ac5f6400
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/auto-group-service.ts
@@ -0,0 +1,85 @@
+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/Cunkebao/app/workspace/auto-group/components/columns.tsx b/Cunkebao/app/workspace/auto-group/components/columns.tsx
new file mode 100644
index 00000000..582279dc
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/columns.tsx
@@ -0,0 +1,129 @@
+"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/Cunkebao/app/workspace/auto-group/components/data-table.tsx b/Cunkebao/app/workspace/auto-group/components/data-table.tsx
new file mode 100644
index 00000000..8a7cc178
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/data-table.tsx
@@ -0,0 +1,96 @@
+"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/Cunkebao/app/workspace/auto-group/components/device-selection.tsx b/Cunkebao/app/workspace/auto-group/components/device-selection.tsx
new file mode 100644
index 00000000..9e97606b
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/device-selection.tsx
@@ -0,0 +1,329 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Badge } from "@/components/ui/badge"
+import { Search, CheckCircle2, AlertCircle, Smartphone, Laptop } from "lucide-react"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+// 模拟设备数据
+const mockDevices = Array.from({ length: 20 }).map((_, i) => ({
+  id: `device-${i + 1}`,
+  name: `设备 ${i + 1}`,
+  model: i % 3 === 0 ? "iPhone 13" : i % 3 === 1 ? "Xiaomi 12" : "Huawei P40",
+  status: i % 5 === 0 ? "offline" : i % 7 === 0 ? "busy" : "online",
+  account: `wxid_${100 + i}`,
+  type: i % 2 === 0 ? "mobile" : "emulator",
+  group: i % 3 === 0 ? "常用设备" : i % 3 === 1 ? "备用设备" : "测试设备",
+  successRate: Math.floor(70 + Math.random() * 30),
+  restrictCount: Math.floor(Math.random() * 5),
+}))
+
+interface DeviceSelectionProps {
+  onNext: () => void
+  onPrevious: () => void
+  initialSelectedDevices?: string[]
+  onDevicesChange: (deviceIds: string[]) => void
+}
+
+export function DeviceSelection({
+  onNext,
+  onPrevious,
+  initialSelectedDevices = [],
+  onDevicesChange,
+}: DeviceSelectionProps) {
+  const [selectedDevices, setSelectedDevices] = useState<string[]>(initialSelectedDevices)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState<string>("all")
+  const [typeFilter, setTypeFilter] = useState<string>("all")
+  const [groupFilter, setGroupFilter] = useState<string>("all")
+
+  // 使用ref来跟踪是否已经通知了父组件初始选择
+  const initialNotificationRef = useRef(false)
+
+  const deviceGroups = Array.from(new Set(mockDevices.map((device) => device.group)))
+
+  const filteredDevices = mockDevices.filter((device) => {
+    const matchesSearch =
+      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.account.toLowerCase().includes(searchQuery.toLowerCase())
+    const matchesStatus = statusFilter === "all" || device.status === statusFilter
+    const matchesType = typeFilter === "all" || device.type === typeFilter
+    const matchesGroup = groupFilter === "all" || device.group === groupFilter
+
+    return matchesSearch && matchesStatus && matchesType && matchesGroup
+  })
+
+  // 只在选择变化时通知父组件，使用防抖
+  useEffect(() => {
+    if (!initialNotificationRef.current) {
+      initialNotificationRef.current = true
+      return
+    }
+
+    const timer = setTimeout(() => {
+      onDevicesChange(selectedDevices)
+    }, 300)
+
+    return () => clearTimeout(timer)
+  }, [selectedDevices, onDevicesChange])
+
+  const handleDeviceToggle = (deviceId: string) => {
+    setSelectedDevices((prev) => (prev.includes(deviceId) ? prev.filter((id) => id !== deviceId) : [...prev, deviceId]))
+  }
+
+  const handleSelectAll = () => {
+    setSelectedDevices(filteredDevices.map((device) => device.id))
+  }
+
+  const handleDeselectAll = () => {
+    setSelectedDevices([])
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "online":
+        return "bg-green-500"
+      case "offline":
+        return "bg-gray-500"
+      case "busy":
+        return "bg-yellow-500"
+      default:
+        return "bg-gray-500"
+    }
+  }
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case "online":
+        return "在线"
+      case "offline":
+        return "离线"
+      case "busy":
+        return "繁忙"
+      default:
+        return status
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="pt-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="搜索设备名称或账号"
+                  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>
+                  <SelectItem value="busy">繁忙</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Select value={typeFilter} onValueChange={setTypeFilter}>
+                <SelectTrigger className="w-[120px]">
+                  <SelectValue placeholder="设备类型" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">所有类型</SelectItem>
+                  <SelectItem value="mobile">手机设备</SelectItem>
+                  <SelectItem value="emulator">模拟器</SelectItem>
+                </SelectContent>
+              </Select>
+
+              <Select value={groupFilter} onValueChange={setGroupFilter}>
+                <SelectTrigger className="w-[120px]">
+                  <SelectValue placeholder="设备分组" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">所有分组</SelectItem>
+                  {deviceGroups.map((group) => (
+                    <SelectItem key={group} value={group}>
+                      {group}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="text-sm text-gray-500">
+                已选择 <span className="font-medium text-blue-600">{selectedDevices.length}</span> 台设备
+              </div>
+              <div className="space-x-2">
+                <Button variant="outline" size="sm" onClick={handleSelectAll}>
+                  全选
+                </Button>
+                <Button variant="outline" size="sm" onClick={handleDeselectAll}>
+                  取消全选
+                </Button>
+              </div>
+            </div>
+
+            <Tabs defaultValue="list" className="w-full">
+              <TabsList className="grid w-60 grid-cols-2">
+                <TabsTrigger value="list">列表视图</TabsTrigger>
+                <TabsTrigger value="grid">网格视图</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="list" className="mt-2">
+                <ScrollArea className="h-[400px] rounded-md border">
+                  <div className="divide-y">
+                    {filteredDevices.map((device) => (
+                      <div key={device.id} className="flex items-center justify-between p-3 hover:bg-gray-50">
+                        <div className="flex items-center space-x-3">
+                          <Checkbox
+                            id={device.id}
+                            checked={selectedDevices.includes(device.id)}
+                            onCheckedChange={() => handleDeviceToggle(device.id)}
+                            disabled={device.status === "offline"}
+                          />
+                          {device.type === "mobile" ? (
+                            <Smartphone className="h-5 w-5 text-gray-500" />
+                          ) : (
+                            <Laptop className="h-5 w-5 text-gray-500" />
+                          )}
+                          <div>
+                            <div className="font-medium">{device.name}</div>
+                            <div className="text-sm text-gray-500">
+                              {device.model} | {device.account}
+                            </div>
+                          </div>
+                        </div>
+
+                        <div className="flex items-center space-x-3">
+                          <div className="text-sm">
+                            成功率:{" "}
+                            <span className={device.successRate > 90 ? "text-green-600" : "text-yellow-600"}>
+                              {device.successRate}%
+                            </span>
+                          </div>
+                          <div className="text-sm">
+                            限制次数:{" "}
+                            <span className={device.restrictCount === 0 ? "text-green-600" : "text-red-600"}>
+                              {device.restrictCount}
+                            </span>
+                          </div>
+                          <Badge className={`${getStatusColor(device.status)} text-white`}>
+                            {getStatusText(device.status)}
+                          </Badge>
+                        </div>
+                      </div>
+                    ))}
+
+                    {filteredDevices.length === 0 && (
+                      <div className="p-4 text-center text-gray-500">没有找到符合条件的设备</div>
+                    )}
+                  </div>
+                </ScrollArea>
+              </TabsContent>
+
+              <TabsContent value="grid" className="mt-2">
+                <ScrollArea className="h-[400px] rounded-md border">
+                  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
+                    {filteredDevices.map((device) => (
+                      <div
+                        key={device.id}
+                        className={`border rounded-md p-3 ${
+                          selectedDevices.includes(device.id) ? "border-blue-500 bg-blue-50" : ""
+                        } ${device.status === "offline" ? "opacity-60" : ""}`}
+                      >
+                        <div className="flex justify-between items-start mb-2">
+                          <div className="flex items-center">
+                            {device.type === "mobile" ? (
+                              <Smartphone className="h-4 w-4 text-gray-500 mr-1" />
+                            ) : (
+                              <Laptop className="h-4 w-4 text-gray-500 mr-1" />
+                            )}
+                            <span className="font-medium truncate">{device.name}</span>
+                          </div>
+                          <Badge className={`${getStatusColor(device.status)} text-white text-xs`}>
+                            {getStatusText(device.status)}
+                          </Badge>
+                        </div>
+
+                        <div className="text-xs text-gray-500 mb-2">{device.model}</div>
+                        <div className="text-xs text-gray-500 mb-3">{device.account}</div>
+
+                        <div className="flex justify-between text-xs mb-3">
+                          <div>
+                            成功率:{" "}
+                            <span className={device.successRate > 90 ? "text-green-600" : "text-yellow-600"}>
+                              {device.successRate}%
+                            </span>
+                          </div>
+                          <div>
+                            限制:{" "}
+                            <span className={device.restrictCount === 0 ? "text-green-600" : "text-red-600"}>
+                              {device.restrictCount}
+                            </span>
+                          </div>
+                        </div>
+
+                        <Button
+                          variant={selectedDevices.includes(device.id) ? "default" : "outline"}
+                          size="sm"
+                          className="w-full"
+                          onClick={() => handleDeviceToggle(device.id)}
+                          disabled={device.status === "offline"}
+                        >
+                          {selectedDevices.includes(device.id) ? (
+                            <>
+                              <CheckCircle2 className="h-4 w-4 mr-1" /> 已选择
+                            </>
+                          ) : (
+                            "选择设备"
+                          )}
+                        </Button>
+                      </div>
+                    ))}
+
+                    {filteredDevices.length === 0 && (
+                      <div className="col-span-full p-4 text-center text-gray-500">没有找到符合条件的设备</div>
+                    )}
+                  </div>
+                </ScrollArea>
+              </TabsContent>
+            </Tabs>
+
+            {selectedDevices.length === 0 && (
+              <div className="flex items-center p-3 bg-yellow-50 rounded-md text-yellow-800">
+                <AlertCircle className="h-4 w-4 mr-2" />
+                请至少选择一台设备来执行建群任务
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-between">
+        <Button variant="outline" onClick={onPrevious}>
+          上一步
+        </Button>
+        <Button onClick={onNext} className="bg-blue-500 hover:bg-blue-600" disabled={selectedDevices.length === 0}>
+          下一步
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-group/components/device-selector.tsx b/Cunkebao/app/workspace/auto-group/components/device-selector.tsx
new file mode 100644
index 00000000..560bdecc
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/device-selector.tsx
@@ -0,0 +1,68 @@
+"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/Cunkebao/app/workspace/auto-group/components/group-assistant.tsx b/Cunkebao/app/workspace/auto-group/components/group-assistant.tsx
new file mode 100644
index 00000000..36b43d4a
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/group-assistant.tsx
@@ -0,0 +1,127 @@
+"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/Cunkebao/app/workspace/auto-group/components/group-creation-progress.tsx b/Cunkebao/app/workspace/auto-group/components/group-creation-progress.tsx
new file mode 100644
index 00000000..d77e373c
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/group-creation-progress.tsx
@@ -0,0 +1,127 @@
+"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/Cunkebao/app/workspace/auto-group/components/group-preview.tsx b/Cunkebao/app/workspace/auto-group/components/group-preview.tsx
new file mode 100644
index 00000000..91775c95
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/group-preview.tsx
@@ -0,0 +1,97 @@
+"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/Cunkebao/app/workspace/auto-group/components/group-settings.tsx b/Cunkebao/app/workspace/auto-group/components/group-settings.tsx
new file mode 100644
index 00000000..f0aea23e
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/group-settings.tsx
@@ -0,0 +1,474 @@
+"use client"
+
+import type React from "react"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Alert, AlertDescription } from "@/components/ui/alert"
+import { AlertCircle, Info, Plus, Minus, User, Users, X, Search } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Badge } from "@/components/ui/badge"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Checkbox } from "@/components/ui/checkbox"
+
+interface WechatFriend {
+  id: string
+  nickname: string
+  wechatId: string
+  avatar: string
+  tags: string[]
+}
+
+interface GroupSettingsProps {
+  onNext: () => void
+  initialValues?: {
+    name: string
+    fixedWechatIds: string[]
+    groupingOption: "all" | "fixed"
+    fixedGroupCount: number
+  }
+  onValuesChange: (values: {
+    name: string
+    fixedWechatIds: string[]
+    groupingOption: "all" | "fixed"
+    fixedGroupCount: number
+  }) => void
+}
+
+export function GroupSettings({ onNext, initialValues, onValuesChange }: GroupSettingsProps) {
+  const [name, setName] = useState(initialValues?.name || "新建群计划")
+  const [fixedWechatIds, setFixedWechatIds] = useState<string[]>(initialValues?.fixedWechatIds || [])
+  const [newWechatId, setNewWechatId] = useState("")
+  const [groupingOption, setGroupingOption] = useState<"all" | "fixed">(initialValues?.groupingOption || "all")
+  const [fixedGroupCount, setFixedGroupCount] = useState(initialValues?.fixedGroupCount || 5)
+  const [error, setError] = useState<string | null>(null)
+  const [warning, setWarning] = useState<string | null>(null)
+  const [friendSelectorOpen, setFriendSelectorOpen] = useState(false)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [friends, setFriends] = useState<WechatFriend[]>([])
+  const [loading, setLoading] = useState(false)
+  const [selectedFriends, setSelectedFriends] = useState<WechatFriend[]>([])
+
+  // 微信群人数固定为38人
+  const GROUP_SIZE = 38
+  // 系统建议的最大群组数
+  const RECOMMENDED_MAX_GROUPS = 20
+  // 最多可选择的微信号数量
+  const MAX_WECHAT_IDS = 5
+
+  // 只在组件挂载时执行一次初始验证
+  useEffect(() => {
+    validateSettings()
+    fetchFriends()
+  }, [])
+
+  // 当值变化时，通知父组件
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onValuesChange({
+        name,
+        fixedWechatIds,
+        groupingOption,
+        fixedGroupCount,
+      })
+    }, 300)
+
+    return () => clearTimeout(timer)
+  }, [name, fixedWechatIds, groupingOption, fixedGroupCount, onValuesChange])
+
+  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).substring(2, 8)}`,
+      avatar: `/placeholder.svg?height=40&width=40&text=${i + 1}`,
+      tags: i % 3 === 0 ? ["重要客户"] : i % 3 === 1 ? ["潜在客户", "已沟通"] : ["新客户"],
+    }))
+    setFriends(mockFriends)
+    setLoading(false)
+  }
+
+  const validateSettings = () => {
+    setError(null)
+    setWarning(null)
+
+    if (!name.trim()) {
+      setError("计划名称不能为空")
+      return false
+    }
+
+    if (fixedWechatIds.length === 0) {
+      setError("请至少添加一个固定微信号")
+      return false
+    }
+
+    if (groupingOption === "fixed") {
+      if (fixedGroupCount <= 0) {
+        setError("群组数必须大于0")
+        return false
+      }
+
+      if (fixedGroupCount > RECOMMENDED_MAX_GROUPS) {
+        setWarning(`创建${fixedGroupCount}个群可能会消耗较多资源，建议减少群组数量`)
+      }
+    }
+
+    return true
+  }
+
+  const handleNext = () => {
+    if (validateSettings()) {
+      onNext()
+    }
+  }
+
+  const adjustGroupCount = (delta: number) => {
+    setFixedGroupCount((prev) => {
+      const newValue = Math.max(1, prev + delta)
+      return newValue
+    })
+  }
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setName(e.target.value)
+  }
+
+  const handleNewWechatIdChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNewWechatId(e.target.value)
+  }
+
+  const handleGroupCountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = Number.parseInt(e.target.value) || 0
+    setFixedGroupCount(value)
+  }
+
+  const handleGroupingOptionChange = (value: string) => {
+    setGroupingOption(value as "all" | "fixed")
+  }
+
+  const addWechatId = () => {
+    if (!newWechatId.trim()) return
+
+    if (fixedWechatIds.includes(newWechatId.trim())) {
+      setError("该微信号已添加")
+      return
+    }
+
+    if (fixedWechatIds.length >= MAX_WECHAT_IDS) {
+      setError(`最多只能添加${MAX_WECHAT_IDS}个微信号`)
+      return
+    }
+
+    setFixedWechatIds((prev) => [...prev, newWechatId.trim()])
+    setNewWechatId("")
+    setError(null)
+  }
+
+  const removeWechatId = (id: string) => {
+    setFixedWechatIds((prev) => prev.filter((wid) => wid !== id))
+  }
+
+  const openFriendSelector = () => {
+    if (fixedWechatIds.length >= MAX_WECHAT_IDS) {
+      setError(`最多只能添加${MAX_WECHAT_IDS}个微信号`)
+      return
+    }
+    setFriendSelectorOpen(true)
+  }
+
+  const handleFriendSelection = () => {
+    const newIds = selectedFriends.map((f) => f.wechatId).filter((id) => !fixedWechatIds.includes(id))
+
+    const combinedIds = [...fixedWechatIds, ...newIds]
+
+    if (combinedIds.length > MAX_WECHAT_IDS) {
+      setError(`最多只能添加${MAX_WECHAT_IDS}个微信号，已自动截取前${MAX_WECHAT_IDS}个`)
+      setFixedWechatIds(combinedIds.slice(0, MAX_WECHAT_IDS))
+    } else {
+      setFixedWechatIds(combinedIds)
+    }
+
+    setFriendSelectorOpen(false)
+    setSelectedFriends([])
+  }
+
+  const toggleFriendSelection = (friend: WechatFriend) => {
+    setSelectedFriends((prev) => {
+      const isSelected = prev.some((f) => f.id === friend.id)
+      if (isSelected) {
+        return prev.filter((f) => f.id !== friend.id)
+      } else {
+        return [...prev, friend]
+      }
+    })
+  }
+
+  const filteredFriends = friends.filter(
+    (friend) =>
+      friend.nickname.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      friend.wechatId.toLowerCase().includes(searchQuery.toLowerCase()),
+  )
+
+  // 计算总人数
+  const totalMembers = groupingOption === "fixed" ? fixedGroupCount * GROUP_SIZE : "根据好友总数自动计算"
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="pt-6">
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="name" className="text-base font-medium">
+                  计划名称<span className="text-red-500">*</span>
+                </Label>
+                <Input id="name" value={name} onChange={handleNameChange} placeholder="请输入计划名称" />
+              </div>
+
+              <div className="space-y-2">
+                <Label className="text-base font-medium flex items-center">
+                  固定微信号<span className="text-red-500">*</span>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <Info className="h-4 w-4 ml-1 inline text-gray-400" />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>这些微信号将被添加到每个群中</p>
+                        <p>如不在好友列表中，系统将先添加为好友</p>
+                        <p>最多可添加5个微信号</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                </Label>
+
+                <div className="flex space-x-2">
+                  <div className="relative flex-1">
+                    <User className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                    <Input
+                      value={newWechatId}
+                      onChange={handleNewWechatIdChange}
+                      placeholder="请输入微信号"
+                      className="pl-9"
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault()
+                          addWechatId()
+                        }
+                      }}
+                    />
+                  </div>
+                  <Button
+                    variant="outline"
+                    type="button"
+                    onClick={addWechatId}
+                    disabled={!newWechatId.trim() || fixedWechatIds.length >= MAX_WECHAT_IDS}
+                  >
+                    添加
+                  </Button>
+                  <Button
+                    variant="outline"
+                    type="button"
+                    onClick={openFriendSelector}
+                    disabled={fixedWechatIds.length >= MAX_WECHAT_IDS}
+                  >
+                    选择好友
+                  </Button>
+                </div>
+
+                {fixedWechatIds.length > 0 && (
+                  <div className="flex flex-wrap gap-2 mt-3">
+                    {fixedWechatIds.map((id) => (
+                      <Badge key={id} variant="secondary" className="px-3 py-1">
+                        {id}
+                        <button
+                          type="button"
+                          className="ml-2 text-gray-500 hover:text-gray-700"
+                          onClick={() => removeWechatId(id)}
+                        >
+                          <X className="h-3 w-3" />
+                        </button>
+                      </Badge>
+                    ))}
+                  </div>
+                )}
+
+                <div className="text-xs text-gray-500 mt-1">
+                  已添加 {fixedWechatIds.length}/{MAX_WECHAT_IDS} 个微信号
+                </div>
+              </div>
+
+              <div className="space-y-2 pt-2">
+                <Label className="text-base font-medium">分组方式</Label>
+                <RadioGroup value={groupingOption} onValueChange={handleGroupingOptionChange}>
+                  <div className="flex flex-col space-y-3">
+                    <div className="flex items-start space-x-2">
+                      <RadioGroupItem value="all" id="all" className="mt-1" />
+                      <div>
+                        <Label htmlFor="all" className="font-medium">
+                          所有好友自动分组
+                        </Label>
+                        <p className="text-sm text-gray-500">系统将根据好友总数自动计算需要创建的群数量</p>
+                      </div>
+                    </div>
+                    <div className="flex items-start space-x-2">
+                      <RadioGroupItem value="fixed" id="fixed" className="mt-1" />
+                      <div className="flex-1">
+                        <Label htmlFor="fixed" className="font-medium">
+                          指定群数量
+                        </Label>
+                        <p className="text-sm text-gray-500 mb-2">手动指定需要创建的群数量</p>
+
+                        {groupingOption === "fixed" && (
+                          <div className="flex items-center space-x-2 mt-2">
+                            <Label htmlFor="groupCount" className="whitespace-nowrap">
+                              计划创建群组数:
+                            </Label>
+                            <div className="flex items-center space-x-2">
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                onClick={() => adjustGroupCount(-1)}
+                                disabled={fixedGroupCount <= 1}
+                              >
+                                <Minus className="h-4 w-4" />
+                              </Button>
+                              <Input
+                                id="groupCount"
+                                type="number"
+                                value={fixedGroupCount}
+                                onChange={handleGroupCountChange}
+                                className="w-20 text-center"
+                                min={1}
+                              />
+                              <Button type="button" variant="outline" size="icon" onClick={() => adjustGroupCount(1)}>
+                                <Plus className="h-4 w-4" />
+                              </Button>
+                              <span className="text-gray-500">组</span>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </RadioGroup>
+              </div>
+            </div>
+
+            <div className="p-4 bg-blue-50 rounded-md">
+              <div className="flex items-center mb-2">
+                <Users className="h-5 w-5 mr-2 text-blue-700" />
+                <span className="text-blue-700 font-medium">群配置信息</span>
+              </div>
+              <div className="flex items-center justify-between">
+                <span className="text-blue-700">每个群人数:</span>
+                <span className="text-blue-700 font-bold">{GROUP_SIZE} 人</span>
+              </div>
+              <div className="flex items-center justify-between mt-1">
+                <span className="text-blue-700">预计总人数:</span>
+                <span className="text-blue-700 font-bold">{totalMembers}</span>
+              </div>
+            </div>
+
+            {error && (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+
+            {warning && (
+              <Alert variant="warning" className="bg-yellow-50 border-yellow-200 text-yellow-800">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{warning}</AlertDescription>
+              </Alert>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button
+          onClick={handleNext}
+          className="bg-blue-500 hover:bg-blue-600"
+          disabled={fixedWechatIds.length === 0 || !!error}
+        >
+          下一步
+        </Button>
+      </div>
+
+      <Dialog open={friendSelectorOpen} onOpenChange={setFriendSelectorOpen}>
+        <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>
+          <ScrollArea className="mt-4 h-[400px]">
+            <div className="space-y-2">
+              {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 cursor-pointer"
+                    onClick={() => toggleFriendSelection(friend)}
+                  >
+                    <Checkbox
+                      checked={selectedFriends.some((f) => f.id === friend.id)}
+                      onCheckedChange={() => toggleFriendSelection(friend)}
+                    />
+                    <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">{friend.wechatId}</div>
+                    </div>
+                    <div className="flex flex-wrap gap-1">
+                      {friend.tags.map((tag) => (
+                        <Badge key={tag} variant="outline" className="text-xs">
+                          {tag}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </ScrollArea>
+          <div className="flex justify-end space-x-2 mt-4">
+            <Button variant="outline" onClick={() => setFriendSelectorOpen(false)}>
+              取消
+            </Button>
+            <Button onClick={handleFriendSelection} disabled={selectedFriends.length === 0}>
+              确定 ({selectedFriends.length})
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-group/components/new-plan-form.tsx b/Cunkebao/app/workspace/auto-group/components/new-plan-form.tsx
new file mode 100644
index 00000000..7e39f87d
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/new-plan-form.tsx
@@ -0,0 +1,285 @@
+"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/Cunkebao/app/workspace/auto-group/components/step-indicator.tsx b/Cunkebao/app/workspace/auto-group/components/step-indicator.tsx
new file mode 100644
index 00000000..7cfe2717
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/step-indicator.tsx
@@ -0,0 +1,52 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+
+interface StepIndicatorProps {
+  currentStep: number
+  steps: { title: string; description: string }[]
+  onStepClick?: (step: number) => void
+}
+
+export function StepIndicator({ currentStep, steps, onStepClick }: StepIndicatorProps) {
+  return (
+    <div className="w-full mb-8">
+      <div className="flex items-center justify-between">
+        {steps.map((step, index) => (
+          <div key={index} className="flex flex-col items-center relative w-full">
+            {/* 连接线 */}
+            {index > 0 && (
+              <div
+                className={cn(
+                  "absolute h-[2px] w-full top-4 -left-1/2 z-0",
+                  index <= currentStep ? "bg-blue-500" : "bg-gray-200",
+                )}
+              />
+            )}
+
+            {/* 步骤圆点 */}
+            <button
+              onClick={() => index < currentStep && onStepClick?.(index)}
+              disabled={index > currentStep}
+              className={cn(
+                "w-8 h-8 rounded-full flex items-center justify-center z-10 mb-2 transition-all",
+                index < currentStep
+                  ? "bg-blue-500 text-white cursor-pointer hover:bg-blue-600"
+                  : index === currentStep
+                    ? "bg-blue-500 text-white"
+                    : "bg-gray-200 text-gray-500 cursor-not-allowed",
+              )}
+            >
+              {index + 1}
+            </button>
+
+            {/* 步骤标题 */}
+            <div className="text-sm font-medium">{step.title}</div>
+            <div className="text-xs text-gray-500">{step.description}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-group/components/tag-selection.tsx b/Cunkebao/app/workspace/auto-group/components/tag-selection.tsx
new file mode 100644
index 00000000..4f37fc82
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/tag-selection.tsx
@@ -0,0 +1,409 @@
+"use client"
+
+import { AlertDescription } from "@/components/ui/alert"
+
+import { Alert } from "@/components/ui/alert"
+
+import { useState, useEffect, useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Search, TagIcon, Users, Filter, AlertCircle, UserMinus } from "lucide-react"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Switch } from "@/components/ui/switch"
+
+// 模拟人群标签数据
+const mockAudienceTags = [
+  { id: "tag-1", name: "高价值客户", description: "消费能力强的客户", count: 120 },
+  { id: "tag-2", name: "潜在客户", description: "有购买意向但未成交", count: 350 },
+  { id: "tag-3", name: "教师", description: "教育行业从业者", count: 85 },
+  { id: "tag-4", name: "医生", description: "医疗行业从业者", count: 64 },
+  { id: "tag-5", name: "企业白领", description: "企业中高层管理人员", count: 210 },
+  { id: "tag-6", name: "摄影爱好者", description: "对摄影有浓厚兴趣", count: 175 },
+  { id: "tag-7", name: "运动达人", description: "经常参与体育运动", count: 230 },
+  { id: "tag-8", name: "美食爱好者", description: "对美食有特别偏好", count: 320 },
+  { id: "tag-9", name: "20-30岁", description: "年龄在20-30岁之间", count: 450 },
+  { id: "tag-10", name: "30-40岁", description: "年龄在30-40岁之间", count: 380 },
+  { id: "tag-11", name: "高消费", description: "消费水平较高", count: 150 },
+  { id: "tag-12", name: "中等消费", description: "消费水平中等", count: 420 },
+]
+
+// 模拟流量词数据
+const mockTrafficTags = [
+  { id: "traffic-1", name: "健身器材", description: "对健身器材有兴趣", count: 95 },
+  { id: "traffic-2", name: "减肥产品", description: "对减肥产品有需求", count: 130 },
+  { id: "traffic-3", name: "护肤品", description: "对护肤品有兴趣", count: 210 },
+  { id: "traffic-4", name: "旅游度假", description: "有旅游度假需求", count: 180 },
+  { id: "traffic-5", name: "教育培训", description: "对教育培训有需求", count: 160 },
+  { id: "traffic-6", name: "投资理财", description: "对投资理财有兴趣", count: 110 },
+  { id: "traffic-7", name: "房产购买", description: "有购房需求", count: 75 },
+  { id: "traffic-8", name: "汽车购买", description: "有购车需求", count: 90 },
+]
+
+// 模拟排除标签数据
+const mockExcludeTags = [
+  { id: "exclude-1", name: "已拉群", description: "已被拉入群聊的用户", count: 320 },
+  { id: "exclude-2", name: "黑名单", description: "被标记为黑名单的用户", count: 45 },
+  { id: "exclude-3", name: "已转化", description: "已完成转化的用户", count: 180 },
+]
+
+interface TagSelectionProps {
+  onPrevious: () => void
+  onComplete: () => void
+  initialValues?: {
+    audienceTags: string[]
+    trafficTags: string[]
+    matchLogic: "and" | "or"
+    excludeTags: string[]
+  }
+  onValuesChange: (values: {
+    audienceTags: string[]
+    trafficTags: string[]
+    matchLogic: "and" | "or"
+    excludeTags: string[]
+  }) => void
+}
+
+export function TagSelection({ onPrevious, onComplete, initialValues, onValuesChange }: TagSelectionProps) {
+  const [audienceTags, setAudienceTags] = useState<string[]>(initialValues?.audienceTags || [])
+  const [trafficTags, setTrafficTags] = useState<string[]>(initialValues?.trafficTags || [])
+  const [matchLogic, setMatchLogic] = useState<"and" | "or">(initialValues?.matchLogic || "or")
+  const [excludeTags, setExcludeTags] = useState<string[]>(initialValues?.excludeTags || ["exclude-1"])
+  const [audienceSearchQuery, setAudienceSearchQuery] = useState("")
+  const [trafficSearchQuery, setTrafficSearchQuery] = useState("")
+  const [excludeSearchQuery, setExcludeSearchQuery] = useState("")
+  const [autoTagEnabled, setAutoTagEnabled] = useState(true)
+
+  // 使用ref来跟踪是否已经通知了父组件初始选择
+  const initialNotificationRef = useRef(false)
+  // 使用ref来存储上一次的值，避免不必要的更新
+  const prevValuesRef = useRef({ audienceTags, trafficTags, matchLogic, excludeTags })
+
+  // 只在值变化时通知父组件，使用防抖
+  useEffect(() => {
+    if (!initialNotificationRef.current) {
+      initialNotificationRef.current = true
+      return
+    }
+
+    // 检查值是否真的变化了
+    const prevValues = prevValuesRef.current
+    const valuesChanged =
+      prevValues.audienceTags.length !== audienceTags.length ||
+      prevValues.trafficTags.length !== trafficTags.length ||
+      prevValues.matchLogic !== matchLogic ||
+      prevValues.excludeTags.length !== excludeTags.length
+
+    if (!valuesChanged) return
+
+    // 更新ref中存储的上一次值
+    prevValuesRef.current = { audienceTags, trafficTags, matchLogic, excludeTags }
+
+    // 使用防抖延迟通知父组件
+    const timer = setTimeout(() => {
+      onValuesChange({ audienceTags, trafficTags, matchLogic, excludeTags })
+    }, 300)
+
+    return () => clearTimeout(timer)
+  }, [audienceTags, trafficTags, matchLogic, excludeTags, onValuesChange])
+
+  const filteredAudienceTags = mockAudienceTags.filter(
+    (tag) =>
+      tag.name.toLowerCase().includes(audienceSearchQuery.toLowerCase()) ||
+      tag.description.toLowerCase().includes(audienceSearchQuery.toLowerCase()),
+  )
+
+  const filteredTrafficTags = mockTrafficTags.filter(
+    (tag) =>
+      tag.name.toLowerCase().includes(trafficSearchQuery.toLowerCase()) ||
+      tag.description.toLowerCase().includes(trafficSearchQuery.toLowerCase()),
+  )
+
+  const filteredExcludeTags = mockExcludeTags.filter(
+    (tag) =>
+      tag.name.toLowerCase().includes(excludeSearchQuery.toLowerCase()) ||
+      tag.description.toLowerCase().includes(excludeSearchQuery.toLowerCase()),
+  )
+
+  const handleAudienceTagToggle = (tagId: string) => {
+    setAudienceTags((prev) => (prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId]))
+  }
+
+  const handleTrafficTagToggle = (tagId: string) => {
+    setTrafficTags((prev) => (prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId]))
+  }
+
+  const handleExcludeTagToggle = (tagId: string) => {
+    setExcludeTags((prev) => (prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId]))
+  }
+
+  // 计算匹配的预估人数
+  const calculateEstimatedMatches = () => {
+    if (audienceTags.length === 0 && trafficTags.length === 0) return 0
+
+    const selectedAudienceTags = mockAudienceTags.filter((tag) => audienceTags.includes(tag.id))
+    const selectedTrafficTags = mockTrafficTags.filter((tag) => trafficTags.includes(tag.id))
+    const selectedExcludeTags = mockExcludeTags.filter((tag) => excludeTags.includes(tag.id))
+
+    let estimatedTotal = 0
+
+    if (audienceTags.length === 0) {
+      estimatedTotal = selectedTrafficTags.reduce((sum, tag) => sum + tag.count, 0)
+    } else if (trafficTags.length === 0) {
+      estimatedTotal = selectedAudienceTags.reduce((sum, tag) => sum + tag.count, 0)
+    } else {
+      // 如果两种标签都有选择，根据匹配逻辑计算
+      if (matchLogic === "and") {
+        // 取交集，估算为较小集合的70%
+        const minCount = Math.min(
+          selectedAudienceTags.reduce((sum, tag) => sum + tag.count, 0),
+          selectedTrafficTags.reduce((sum, tag) => sum + tag.count, 0),
+        )
+        estimatedTotal = Math.floor(minCount * 0.7)
+      } else {
+        // 取并集，估算为两者之和的80%（考虑重叠）
+        const totalCount =
+          selectedAudienceTags.reduce((sum, tag) => sum + tag.count, 0) +
+          selectedTrafficTags.reduce((sum, tag) => sum + tag.count, 0)
+        estimatedTotal = Math.floor(totalCount * 0.8)
+      }
+    }
+
+    // 减去排除标签的人数
+    const excludeCount = selectedExcludeTags.reduce((sum, tag) => sum + tag.count, 0)
+    return Math.max(0, estimatedTotal - excludeCount)
+  }
+
+  const estimatedMatches = calculateEstimatedMatches()
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="pt-6">
+          <div className="space-y-6">
+            <Tabs defaultValue="include" className="w-full">
+              <TabsList className="grid w-full max-w-md grid-cols-2">
+                <TabsTrigger value="include">包含条件</TabsTrigger>
+                <TabsTrigger value="exclude">排除条件</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="include" className="space-y-6 mt-4">
+                <div className="space-y-4">
+                  <Label className="text-base font-medium flex items-center">
+                    <TagIcon className="h-4 w-4 mr-2" />
+                    人群标签选择
+                  </Label>
+
+                  <div className="relative">
+                    <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                    <Input
+                      placeholder="搜索人群标签"
+                      value={audienceSearchQuery}
+                      onChange={(e) => setAudienceSearchQuery(e.target.value)}
+                      className="pl-9"
+                    />
+                  </div>
+
+                  <ScrollArea className="h-[200px] rounded-md border">
+                    <div className="grid grid-cols-2 md:grid-cols-3 gap-2 p-3">
+                      {filteredAudienceTags.map((tag) => (
+                        <div
+                          key={tag.id}
+                          className={`border rounded-md p-2 cursor-pointer hover:bg-gray-50 ${
+                            audienceTags.includes(tag.id) ? "border-blue-500 bg-blue-50" : ""
+                          }`}
+                          onClick={() => handleAudienceTagToggle(tag.id)}
+                        >
+                          <div className="flex items-center justify-between mb-1">
+                            <div className="font-medium">{tag.name}</div>
+                            <Checkbox
+                              checked={audienceTags.includes(tag.id)}
+                              onCheckedChange={() => handleAudienceTagToggle(tag.id)}
+                              className="pointer-events-none"
+                            />
+                          </div>
+                          <div className="text-xs text-gray-500">{tag.description}</div>
+                          <div className="text-xs text-gray-500 mt-1">
+                            <Users className="h-3 w-3 inline mr-1" />
+                            {tag.count}人
+                          </div>
+                        </div>
+                      ))}
+
+                      {filteredAudienceTags.length === 0 && (
+                        <div className="col-span-full p-4 text-center text-gray-500">没有找到符合条件的人群标签</div>
+                      )}
+                    </div>
+                  </ScrollArea>
+                </div>
+
+                <div className="space-y-4">
+                  <Label className="text-base font-medium flex items-center">
+                    <Filter className="h-4 w-4 mr-2" />
+                    流量词选择
+                  </Label>
+
+                  <div className="relative">
+                    <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                    <Input
+                      placeholder="搜索流量词"
+                      value={trafficSearchQuery}
+                      onChange={(e) => setTrafficSearchQuery(e.target.value)}
+                      className="pl-9"
+                    />
+                  </div>
+
+                  <ScrollArea className="h-[200px] rounded-md border">
+                    <div className="grid grid-cols-2 md:grid-cols-3 gap-2 p-3">
+                      {filteredTrafficTags.map((tag) => (
+                        <div
+                          key={tag.id}
+                          className={`border rounded-md p-2 cursor-pointer hover:bg-gray-50 ${
+                            trafficTags.includes(tag.id) ? "border-blue-500 bg-blue-50" : ""
+                          }`}
+                          onClick={() => handleTrafficTagToggle(tag.id)}
+                        >
+                          <div className="flex items-center justify-between mb-1">
+                            <div className="font-medium">{tag.name}</div>
+                            <Checkbox
+                              checked={trafficTags.includes(tag.id)}
+                              onCheckedChange={() => handleTrafficTagToggle(tag.id)}
+                              className="pointer-events-none"
+                            />
+                          </div>
+                          <div className="text-xs text-gray-500">{tag.description}</div>
+                          <div className="text-xs text-gray-500 mt-1">
+                            <Users className="h-3 w-3 inline mr-1" />
+                            {tag.count}人
+                          </div>
+                        </div>
+                      ))}
+
+                      {filteredTrafficTags.length === 0 && (
+                        <div className="col-span-full p-4 text-center text-gray-500">没有找到符合条件的流量词</div>
+                      )}
+                    </div>
+                  </ScrollArea>
+                </div>
+
+                <div className="space-y-2">
+                  <Label className="text-base font-medium">标签匹配逻辑</Label>
+                  <RadioGroup value={matchLogic} onValueChange={(value) => setMatchLogic(value as "and" | "or")}>
+                    <div className="flex space-x-4">
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="and" id="and" />
+                        <Label htmlFor="and">同时满足所有标签（AND）</Label>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <RadioGroupItem value="or" id="or" />
+                        <Label htmlFor="or">满足任一标签即可（OR）</Label>
+                      </div>
+                    </div>
+                  </RadioGroup>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="exclude" className="space-y-6 mt-4">
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <Label className="text-base font-medium flex items-center">
+                      <UserMinus className="h-4 w-4 mr-2" />
+                      排除标签
+                    </Label>
+                    <div className="flex items-center space-x-2">
+                      <Switch id="auto-tag" checked={autoTagEnabled} onCheckedChange={setAutoTagEnabled} />
+                      <Label htmlFor="auto-tag" className="text-sm">
+                        自动为拉群成员添加标签
+                      </Label>
+                    </div>
+                  </div>
+
+                  <div className="relative">
+                    <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
+                    <Input
+                      placeholder="搜索排除标签"
+                      value={excludeSearchQuery}
+                      onChange={(e) => setExcludeSearchQuery(e.target.value)}
+                      className="pl-9"
+                    />
+                  </div>
+
+                  <ScrollArea className="h-[200px] rounded-md border">
+                    <div className="grid grid-cols-2 md:grid-cols-3 gap-2 p-3">
+                      {filteredExcludeTags.map((tag) => (
+                        <div
+                          key={tag.id}
+                          className={`border rounded-md p-2 cursor-pointer hover:bg-gray-50 ${
+                            excludeTags.includes(tag.id) ? "border-red-500 bg-red-50" : ""
+                          }`}
+                          onClick={() => handleExcludeTagToggle(tag.id)}
+                        >
+                          <div className="flex items-center justify-between mb-1">
+                            <div className="font-medium">{tag.name}</div>
+                            <Checkbox
+                              checked={excludeTags.includes(tag.id)}
+                              onCheckedChange={() => handleExcludeTagToggle(tag.id)}
+                              className="pointer-events-none"
+                            />
+                          </div>
+                          <div className="text-xs text-gray-500">{tag.description}</div>
+                          <div className="text-xs text-gray-500 mt-1">
+                            <Users className="h-3 w-3 inline mr-1" />
+                            {tag.count}人
+                          </div>
+                        </div>
+                      ))}
+
+                      {filteredExcludeTags.length === 0 && (
+                        <div className="col-span-full p-4 text-center text-gray-500">没有找到符合条件的排除标签</div>
+                      )}
+                    </div>
+                  </ScrollArea>
+                </div>
+
+                <Alert className="bg-yellow-50 border-yellow-200 text-yellow-800">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription>
+                    启用自动标记后，系统将为所有被拉入群的用户添加"已拉群"标签，避免重复拉人
+                  </AlertDescription>
+                </Alert>
+              </TabsContent>
+            </Tabs>
+
+            <div className="p-4 bg-blue-50 rounded-md">
+              <div className="flex items-center justify-between">
+                <span className="text-blue-700 font-medium">预估匹配人数:</span>
+                <span className="text-blue-700 font-bold">{estimatedMatches} 人</span>
+              </div>
+            </div>
+
+            {audienceTags.length === 0 && trafficTags.length === 0 && (
+              <div className="flex items-center p-3 bg-yellow-50 rounded-md text-yellow-800">
+                <AlertCircle className="h-4 w-4 mr-2" />
+                请至少选择一个人群标签或流量词
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-between">
+        <Button variant="outline" onClick={onPrevious}>
+          上一步
+        </Button>
+        <Button
+          onClick={onComplete}
+          className="bg-blue-500 hover:bg-blue-600"
+          disabled={audienceTags.length === 0 && trafficTags.length === 0}
+        >
+          完成
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-group/components/wechat-account-selector.tsx b/Cunkebao/app/workspace/auto-group/components/wechat-account-selector.tsx
new file mode 100644
index 00000000..01c3429d
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/components/wechat-account-selector.tsx
@@ -0,0 +1,72 @@
+"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/Cunkebao/app/workspace/auto-group/page.tsx b/Cunkebao/app/workspace/auto-group/page.tsx
new file mode 100644
index 00000000..9ea241ec
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-group/page.tsx
@@ -0,0 +1,295 @@
+"use client"
+
+import { useState, useCallback } from "react"
+import { Button } from "@/components/ui/button"
+import { PlusCircle, ArrowLeft } from "lucide-react"
+import { StepIndicator } from "./components/step-indicator"
+import { GroupSettings } from "./components/group-settings"
+import { DeviceSelection } from "./components/device-selection"
+import { TagSelection } from "./components/tag-selection"
+import { useToast } from "@/components/ui/use-toast"
+
+// 保留原有的卡片列表视图
+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 { Users, Settings, RefreshCcw } from "lucide-react"
+
+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: 38,
+    totalFriends: 152,
+    tags: ["客服", "售后"],
+    status: "stopped",
+    lastUpdated: "2024-02-23 15:45",
+  },
+]
+
+const steps = [
+  { title: "群配置", description: "设置群人数与组数" },
+  { title: "设备选择", description: "选择执行设备" },
+  { title: "人群标签", description: "选择目标人群" },
+]
+
+export default function AutoGroupPage() {
+  const [isCreating, setIsCreating] = useState(false)
+  const [currentStep, setCurrentStep] = useState(0)
+  const { toast } = useToast()
+
+  const [formData, setFormData] = useState({
+    name: "新建群计划",
+    fixedWechatIds: [] as string[],
+    groupingOption: "all" as "all" | "fixed",
+    fixedGroupCount: 5,
+    selectedDevices: [] as string[],
+    audienceTags: [] as string[],
+    trafficTags: [] as string[],
+    matchLogic: "or" as "and" | "or",
+    excludeTags: ["已拉群"] as string[],
+  })
+
+  const handleStepClick = useCallback((step: number) => {
+    setCurrentStep(step)
+  }, [])
+
+  const handleNext = useCallback(() => {
+    setCurrentStep((prev) => prev + 1)
+  }, [])
+
+  const handlePrevious = useCallback(() => {
+    setCurrentStep((prev) => prev - 1)
+  }, [])
+
+  const handleComplete = useCallback(() => {
+    // 这里可以添加表单提交逻辑
+    console.log("Form submitted:", formData)
+    toast({
+      title: "计划创建成功",
+      description: `已成功创建"${formData.name}"计划`,
+    })
+    setIsCreating(false)
+    setCurrentStep(0)
+    // 重置表单数据
+    setFormData({
+      name: "新建群计划",
+      fixedWechatIds: [],
+      groupingOption: "all",
+      fixedGroupCount: 5,
+      selectedDevices: [],
+      audienceTags: [],
+      trafficTags: [],
+      matchLogic: "or",
+      excludeTags: ["已拉群"],
+    })
+  }, [formData, toast])
+
+  const handleCancel = useCallback(() => {
+    setIsCreating(false)
+    setCurrentStep(0)
+  }, [])
+
+  // 使用useCallback包装回调函数，避免不必要的重新创建
+  const handleGroupSettingsChange = useCallback(
+    (values: {
+      name: string
+      fixedWechatIds: string[]
+      groupingOption: "all" | "fixed"
+      fixedGroupCount: number
+    }) => {
+      setFormData((prev) => ({ ...prev, ...values }))
+    },
+    [],
+  )
+
+  const handleDevicesChange = useCallback((devices: string[]) => {
+    setFormData((prev) => ({ ...prev, selectedDevices: devices }))
+  }, [])
+
+  const handleTagsChange = useCallback(
+    (values: {
+      audienceTags: string[]
+      trafficTags: string[]
+      matchLogic: "and" | "or"
+      excludeTags: string[]
+    }) => {
+      setFormData((prev) => ({ ...prev, ...values }))
+    },
+    [],
+  )
+
+  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
+    }
+  }
+
+  if (isCreating) {
+    return (
+      <div className="container p-4 mx-auto max-w-7xl">
+        <div className="flex items-center mb-6">
+          <Button variant="ghost" size="sm" onClick={handleCancel} className="mr-2">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            返回
+          </Button>
+          <h1 className="text-xl font-semibold">新建自动拉群计划</h1>
+        </div>
+
+        <div className="mb-8">
+          <StepIndicator currentStep={currentStep} steps={steps} onStepClick={handleStepClick} />
+        </div>
+
+        {currentStep === 0 && (
+          <GroupSettings
+            onNext={handleNext}
+            initialValues={{
+              name: formData.name,
+              fixedWechatIds: formData.fixedWechatIds,
+              groupingOption: formData.groupingOption,
+              fixedGroupCount: formData.fixedGroupCount,
+            }}
+            onValuesChange={handleGroupSettingsChange}
+          />
+        )}
+
+        {currentStep === 1 && (
+          <DeviceSelection
+            onNext={handleNext}
+            onPrevious={handlePrevious}
+            initialSelectedDevices={formData.selectedDevices}
+            onDevicesChange={handleDevicesChange}
+          />
+        )}
+
+        {currentStep === 2 && (
+          <TagSelection
+            onPrevious={handlePrevious}
+            onComplete={handleComplete}
+            initialValues={{
+              audienceTags: formData.audienceTags,
+              trafficTags: formData.trafficTags,
+              matchLogic: formData.matchLogic,
+              excludeTags: formData.excludeTags,
+            }}
+            onValuesChange={handleTagsChange}
+          />
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="container p-4 mx-auto max-w-7xl">
+      <div className="flex flex-col space-y-4">
+        <div className="flex items-center justify-between">
+          <h1 className="text-xl font-semibold">微信自动拉群</h1>
+          <Button onClick={() => setIsCreating(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 max-w-md grid-cols-2">
+            <TabsTrigger value="active">进行中</TabsTrigger>
+            <TabsTrigger value="completed">已完成</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="active" className="mt-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-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>
+          </TabsContent>
+
+          <TabsContent value="completed">
+            <div className="h-[calc(100vh-200px)] flex items-center justify-center text-gray-500">暂无已完成的计划</div>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-like/components/audience-tags.tsx b/Cunkebao/app/workspace/auto-like/components/audience-tags.tsx
new file mode 100644
index 00000000..ce3b134b
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-like/components/audience-tags.tsx
@@ -0,0 +1,509 @@
+"use client"
+
+import { useState, useEffect } 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 { Badge } from "@/components/ui/badge"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Search, Plus, Trash2, LucideTag, Users } from "lucide-react"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import { Textarea } from "@/components/ui/textarea"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+
+interface TagGroup {
+  id: string
+  name: string
+  description: string
+  type: "profession" | "interest" | "age" | "consumption" | "interaction" | "custom"
+  tags: Tag[]
+}
+
+interface Tag {
+  id: string
+  name: string
+  count: number
+}
+
+interface UserProfile {
+  id: string
+  name: string
+  avatar: string
+  tags: string[]
+  profession?: string
+  interest?: string
+  region?: string
+  lastActive?: string
+}
+
+export interface AudienceTagsData {
+  selectedTags: string[]
+  tagOperator: "and" | "or"
+}
+
+interface AudienceTagsProps {
+  initialData?: Partial<AudienceTagsData>
+  onSave: (data: AudienceTagsData) => void
+  onBack: () => void
+}
+
+export function AudienceTags({ initialData, onSave, onBack }: AudienceTagsProps) {
+  const [tagGroups, setTagGroups] = useState<TagGroup[]>([])
+  const [users, setUsers] = useState<UserProfile[]>([])
+  const [selectedTags, setSelectedTags] = useState<string[]>(initialData?.selectedTags || [])
+  const [tagOperator, setTagOperator] = useState<"and" | "or">(initialData?.tagOperator || "or")
+  const [searchQuery, setSearchQuery] = useState("")
+  const [activeTab, setActiveTab] = useState("all")
+  const [newTagName, setNewTagName] = useState("")
+  const [newTagDescription, setNewTagDescription] = useState("")
+  const [newTagType, setNewTagType] = useState<TagGroup["type"]>("custom")
+  const [isCreateTagDialogOpen, setIsCreateTagDialogOpen] = useState(false)
+
+  // 模拟获取标签组和用户数据
+  useEffect(() => {
+    const fetchData = async () => {
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
+      // 模拟标签组数据
+      const mockTagGroups: TagGroup[] = [
+        {
+          id: "profession",
+          name: "职业",
+          description: "按照好友的职业分类",
+          type: "profession",
+          tags: [
+            { id: "teacher", name: "教师", count: 15 },
+            { id: "doctor", name: "医生", count: 8 },
+            { id: "engineer", name: "工程师", count: 22 },
+            { id: "business", name: "企业白领", count: 30 },
+            { id: "freelancer", name: "自由职业", count: 12 },
+          ],
+        },
+        {
+          id: "interest",
+          name: "兴趣爱好",
+          description: "按照好友的兴趣爱好分类",
+          type: "interest",
+          tags: [
+            { id: "photography", name: "摄影爱好者", count: 18 },
+            { id: "sports", name: "运动达人", count: 25 },
+            { id: "food", name: "美食爱好者", count: 32 },
+            { id: "travel", name: "旅行达人", count: 20 },
+            { id: "tech", name: "科技发烧友", count: 15 },
+          ],
+        },
+        {
+          id: "age",
+          name: "年龄范围",
+          description: "按照好友的年龄范围分类",
+          type: "age",
+          tags: [
+            { id: "18-25", name: "18-25岁", count: 22 },
+            { id: "26-35", name: "26-35岁", count: 45 },
+            { id: "36-45", name: "36-45岁", count: 30 },
+            { id: "46-55", name: "46-55岁", count: 15 },
+            { id: "56+", name: "56岁以上", count: 8 },
+          ],
+        },
+        {
+          id: "consumption",
+          name: "消费能力",
+          description: "按照好友的消费能力分类",
+          type: "consumption",
+          tags: [
+            { id: "high", name: "高消费", count: 12 },
+            { id: "medium", name: "中等消费", count: 48 },
+            { id: "low", name: "低消费", count: 30 },
+          ],
+        },
+        {
+          id: "interaction",
+          name: "互动频率",
+          description: "按照与好友的互动频率分类",
+          type: "interaction",
+          tags: [
+            { id: "high-interaction", name: "高频互动", count: 15 },
+            { id: "medium-interaction", name: "中频互动", count: 35 },
+            { id: "low-interaction", name: "低频互动", count: 40 },
+            { id: "new-friend", name: "近期新添加", count: 10 },
+          ],
+        },
+        {
+          id: "custom",
+          name: "自定义标签",
+          description: "自定义创建的标签",
+          type: "custom",
+          tags: [
+            { id: "potential-customer", name: "潜在客户", count: 28 },
+            { id: "vip", name: "VIP客户", count: 10 },
+            { id: "partner", name: "合作伙伴", count: 5 },
+          ],
+        },
+      ]
+
+      setTagGroups(mockTagGroups)
+
+      // 模拟用户数据
+      const mockUsers: UserProfile[] = Array.from({ length: 50 }, (_, i) => {
+        const professionTag = mockTagGroups[0].tags[Math.floor(Math.random() * mockTagGroups[0].tags.length)]
+        const interestTag = mockTagGroups[1].tags[Math.floor(Math.random() * mockTagGroups[1].tags.length)]
+        const ageTag = mockTagGroups[2].tags[Math.floor(Math.random() * mockTagGroups[2].tags.length)]
+        const consumptionTag = mockTagGroups[3].tags[Math.floor(Math.random() * mockTagGroups[3].tags.length)]
+        const interactionTag = mockTagGroups[4].tags[Math.floor(Math.random() * mockTagGroups[4].tags.length)]
+
+        // 随机选择一些标签
+        const userTags = [
+          professionTag.id,
+          interestTag.id,
+          Math.random() > 0.5 ? ageTag.id : null,
+          Math.random() > 0.5 ? consumptionTag.id : null,
+          Math.random() > 0.5 ? interactionTag.id : null,
+        ].filter(Boolean) as string[]
+
+        // 随机添加一些自定义标签
+        if (Math.random() > 0.7) {
+          const customTag = mockTagGroups[5].tags[Math.floor(Math.random() * mockTagGroups[5].tags.length)]
+          userTags.push(customTag.id)
+        }
+
+        return {
+          id: `user-${i + 1}`,
+          name: `用户${i + 1}`,
+          avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${i}`,
+          tags: userTags,
+          profession: professionTag.name,
+          interest: interestTag.name,
+          region: ["北京", "上海", "广州", "深圳", "杭州"][Math.floor(Math.random() * 5)],
+          lastActive: `${Math.floor(Math.random() * 24)}小时前`,
+        }
+      })
+
+      setUsers(mockUsers)
+    }
+
+    fetchData()
+  }, [])
+
+  // 获取所有标签
+  const allTags = tagGroups.flatMap((group) => group.tags)
+
+  // 根据选中的标签过滤用户
+  const filteredUsers = users.filter((user) => {
+    if (selectedTags.length === 0) return true
+
+    if (tagOperator === "and") {
+      return selectedTags.every((tagId) => user.tags.includes(tagId))
+    } else {
+      return selectedTags.some((tagId) => user.tags.includes(tagId))
+    }
+  })
+
+  // 根据搜索查询过滤标签
+  const filteredTagGroups = tagGroups
+    .map((group) => ({
+      ...group,
+      tags: group.tags.filter((tag) => tag.name.toLowerCase().includes(searchQuery.toLowerCase())),
+    }))
+    .filter((group) => group.tags.length > 0)
+
+  // 根据标签类型过滤标签组
+  const tabFilteredTagGroups =
+    activeTab === "all" ? filteredTagGroups : filteredTagGroups.filter((group) => group.id === activeTab)
+
+  // 切换标签选择
+  const toggleTag = (tagId: string) => {
+    setSelectedTags(selectedTags.includes(tagId) ? selectedTags.filter((id) => id !== tagId) : [...selectedTags, tagId])
+  }
+
+  // 创建新标签
+  const handleCreateTag = () => {
+    if (newTagName.trim()) {
+      const newTag: Tag = {
+        id: `custom-${Date.now()}`,
+        name: newTagName.trim(),
+        count: 0,
+      }
+
+      setTagGroups(
+        tagGroups.map((group) => (group.id === "custom" ? { ...group, tags: [...group.tags, newTag] } : group)),
+      )
+
+      setNewTagName("")
+      setNewTagDescription("")
+      setIsCreateTagDialogOpen(false)
+    }
+  }
+
+  // 保存选择的标签
+  const handleSave = () => {
+    onSave({
+      selectedTags,
+      tagOperator,
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>指定点赞的人群标签</CardTitle>
+          <CardDescription>选择特定标签，只对带有这些标签的好友朋友圈进行点赞</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* 标签选择逻辑 */}
+          <div className="flex items-center space-x-4">
+            <Label className="font-medium">标签匹配逻辑：</Label>
+            <RadioGroup
+              value={tagOperator}
+              onValueChange={(value) => setTagOperator(value as "and" | "or")}
+              className="flex space-x-4"
+            >
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="and" id="and" />
+                <Label htmlFor="and">同时满足所有标签</Label>
+              </div>
+              <div className="flex items-center space-x-2">
+                <RadioGroupItem value="or" id="or" />
+                <Label htmlFor="or">满足任一标签</Label>
+              </div>
+            </RadioGroup>
+          </div>
+
+          {/* 已选标签展示 */}
+          <div className="space-y-2">
+            <Label className="font-medium">已选标签：</Label>
+            <div className="flex flex-wrap gap-2 min-h-10 p-2 border rounded-md">
+              {selectedTags.length === 0 ? (
+                <span className="text-sm text-muted-foreground">未选择任何标签，将对所有好友点赞</span>
+              ) : (
+                selectedTags.map((tagId) => {
+                  const tag = allTags.find((t) => t.id === tagId)
+                  return tag ? (
+                    <Badge key={tagId} className="flex items-center gap-1">
+                      {tag.name}
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-4 w-4 p-0 hover:bg-transparent"
+                        onClick={() => toggleTag(tagId)}
+                      >
+                        <Trash2 className="h-3 w-3" />
+                        <span className="sr-only">Remove</span>
+                      </Button>
+                    </Badge>
+                  ) : null
+                })
+              )}
+            </div>
+          </div>
+
+          {/* 标签搜索和分类 */}
+          <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-muted-foreground" />
+                <Input
+                  placeholder="搜索标签"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+              <Dialog open={isCreateTagDialogOpen} onOpenChange={setIsCreateTagDialogOpen}>
+                <DialogTrigger asChild>
+                  <Button variant="outline" className="ml-2">
+                    <Plus className="h-4 w-4 mr-1" />
+                    创建标签
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>创建新标签</DialogTitle>
+                    <DialogDescription>创建一个新的标签来分类您的好友</DialogDescription>
+                  </DialogHeader>
+                  <div className="space-y-4 py-4">
+                    <div className="space-y-2">
+                      <Label htmlFor="tagName">标签名称</Label>
+                      <Input
+                        id="tagName"
+                        placeholder="输入标签名称"
+                        value={newTagName}
+                        onChange={(e) => setNewTagName(e.target.value)}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="tagDescription">标签描述（可选）</Label>
+                      <Textarea
+                        id="tagDescription"
+                        placeholder="输入标签描述"
+                        value={newTagDescription}
+                        onChange={(e) => setNewTagDescription(e.target.value)}
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="tagType">标签类型</Label>
+                      <RadioGroup
+                        value={newTagType}
+                        onValueChange={(value) => setNewTagType(value as TagGroup["type"])}
+                        className="grid grid-cols-2 gap-2"
+                      >
+                        <div className="flex items-center space-x-2">
+                          <RadioGroupItem value="profession" id="profession" />
+                          <Label htmlFor="profession">职业</Label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <RadioGroupItem value="interest" id="interest" />
+                          <Label htmlFor="interest">兴趣爱好</Label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <RadioGroupItem value="age" id="age" />
+                          <Label htmlFor="age">年龄范围</Label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <RadioGroupItem value="consumption" id="consumption" />
+                          <Label htmlFor="consumption">消费能力</Label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <RadioGroupItem value="interaction" id="interaction" />
+                          <Label htmlFor="interaction">互动频率</Label>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <RadioGroupItem value="custom" id="custom" />
+                          <Label htmlFor="custom">自定义</Label>
+                        </div>
+                      </RadioGroup>
+                    </div>
+                  </div>
+                  <DialogFooter>
+                    <Button variant="outline" onClick={() => setIsCreateTagDialogOpen(false)}>
+                      取消
+                    </Button>
+                    <Button onClick={handleCreateTag} disabled={!newTagName.trim()}>
+                      创建
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </div>
+
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              <TabsList className="grid grid-cols-7">
+                <TabsTrigger value="all">全部</TabsTrigger>
+                <TabsTrigger value="profession">职业</TabsTrigger>
+                <TabsTrigger value="interest">兴趣</TabsTrigger>
+                <TabsTrigger value="age">年龄</TabsTrigger>
+                <TabsTrigger value="consumption">消费</TabsTrigger>
+                <TabsTrigger value="interaction">互动</TabsTrigger>
+                <TabsTrigger value="custom">自定义</TabsTrigger>
+              </TabsList>
+            </Tabs>
+
+            <div className="space-y-6">
+              {tabFilteredTagGroups.map((group) => (
+                <div key={group.id} className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-sm font-medium flex items-center">
+                      <LucideTag className="h-4 w-4 mr-1 text-muted-foreground" />
+                      {group.name}
+                    </h3>
+                    <span className="text-xs text-muted-foreground">{group.description}</span>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {group.tags.map((tag) => (
+                      <Badge
+                        key={tag.id}
+                        variant={selectedTags.includes(tag.id) ? "default" : "outline"}
+                        className="cursor-pointer flex items-center gap-1"
+                        onClick={() => toggleTag(tag.id)}
+                      >
+                        {tag.name}
+                        <span className="text-xs opacity-70">({tag.count})</span>
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              ))}
+
+              {tabFilteredTagGroups.length === 0 && (
+                <div className="text-center py-8 text-muted-foreground">未找到符合条件的标签</div>
+              )}
+            </div>
+          </div>
+
+          {/* 预览匹配的用户 */}
+          <div className="space-y-4 pt-4 border-t">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-medium flex items-center">
+                <Users className="h-4 w-4 mr-1 text-muted-foreground" />
+                匹配的好友预览
+              </h3>
+              <Badge variant="outline">共 {filteredUsers.length} 人</Badge>
+            </div>
+            <ScrollArea className="h-64 border rounded-md">
+              <div className="p-2 space-y-2">
+                {filteredUsers.slice(0, 20).map((user) => (
+                  <div key={user.id} className="flex items-center justify-between p-2 rounded-md hover:bg-muted/50">
+                    <div className="flex items-center space-x-3">
+                      <Avatar>
+                        <AvatarImage src={user.avatar} alt={user.name} />
+                        <AvatarFallback>{user.name.substring(0, 2)}</AvatarFallback>
+                      </Avatar>
+                      <div>
+                        <p className="font-medium">{user.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {user.profession} · {user.region} · 最近活跃: {user.lastActive}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex flex-wrap gap-1 max-w-[200px] justify-end">
+                      {user.tags.slice(0, 2).map((tagId) => {
+                        const tag = allTags.find((t) => t.id === tagId)
+                        return tag ? (
+                          <Badge key={tagId} variant="outline" className="text-xs">
+                            {tag.name}
+                          </Badge>
+                        ) : null
+                      })}
+                      {user.tags.length > 2 && (
+                        <Badge variant="outline" className="text-xs">
+                          +{user.tags.length - 2}
+                        </Badge>
+                      )}
+                    </div>
+                  </div>
+                ))}
+                {filteredUsers.length === 0 && (
+                  <div className="text-center py-4 text-muted-foreground">未找到匹配的好友</div>
+                )}
+                {filteredUsers.length > 20 && (
+                  <div className="text-center py-2 text-muted-foreground text-sm">
+                    显示前 20 位好友，共 {filteredUsers.length} 位匹配
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-between">
+        <Button variant="outline" onClick={onBack}>
+          返回上一步
+        </Button>
+        <Button onClick={handleSave}>完成设置</Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-like/components/device-selection.tsx b/Cunkebao/app/workspace/auto-like/components/device-selection.tsx
new file mode 100644
index 00000000..dbb80f70
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-like/components/device-selection.tsx
@@ -0,0 +1,294 @@
+"use client"
+
+import { useState, useEffect } 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 { Checkbox } from "@/components/ui/checkbox"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Search, RefreshCw, Smartphone, Database, Users } from "lucide-react"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+
+interface Device {
+  id: string
+  name: string
+  status: "online" | "offline"
+  wechatId: string
+}
+
+interface DatabaseItem {
+  id: string
+  name: string
+  description: string
+  count: number
+}
+
+interface AudienceGroup {
+  id: string
+  name: string
+  count: number
+  description: string
+}
+
+export interface DeviceSelectionData {
+  selectedDevices: string[]
+  selectedDatabase: string
+  selectedAudience: string
+}
+
+interface DeviceSelectionProps {
+  initialData?: Partial<DeviceSelectionData>
+  onSave: (data: DeviceSelectionData) => void
+  onBack: () => void
+}
+
+export function DeviceSelection({ initialData, onSave, onBack }: DeviceSelectionProps) {
+  const [devices, setDevices] = useState<Device[]>([])
+  const [databases, setDatabases] = useState<DatabaseItem[]>([])
+  const [audienceGroups, setAudienceGroups] = useState<AudienceGroup[]>([])
+  const [selectedDevices, setSelectedDevices] = useState<string[]>(initialData?.selectedDevices || [])
+  const [selectedDatabase, setSelectedDatabase] = useState<string>(initialData?.selectedDatabase || "")
+  const [selectedAudience, setSelectedAudience] = useState<string>(initialData?.selectedAudience || "")
+  const [searchQuery, setSearchQuery] = useState("")
+  const [activeTab, setActiveTab] = useState("all")
+
+  // 模拟获取设备数据
+  useEffect(() => {
+    // 模拟设备数据
+    const mockDevices: Device[] = Array.from({ length: 10 }, (_, i) => ({
+      id: `device-${i + 1}`,
+      name: `设备 ${i + 1}`,
+      status: Math.random() > 0.3 ? "online" : "offline",
+      wechatId: `wxid_${Math.random().toString(36).substr(2, 8)}`,
+    }))
+    setDevices(mockDevices)
+
+    // 模拟数据库数据
+    const mockDatabases: DatabaseItem[] = [
+      {
+        id: "db-1",
+        name: "默认数据库",
+        description: "系统默认的数据库",
+        count: 1250,
+      },
+      {
+        id: "db-2",
+        name: "高净值客户",
+        description: "高消费能力的客户群体",
+        count: 450,
+      },
+      {
+        id: "db-3",
+        name: "潜在客户",
+        description: "有购买意向的潜在客户",
+        count: 780,
+      },
+    ]
+    setDatabases(mockDatabases)
+
+    // 模拟目标人群数据
+    const mockAudienceGroups: AudienceGroup[] = [
+      {
+        id: "audience-1",
+        name: "全部好友",
+        count: 1250,
+        description: "所有微信好友",
+      },
+      {
+        id: "audience-2",
+        name: "高频互动好友",
+        count: 320,
+        description: "经常互动的好友",
+      },
+      {
+        id: "audience-3",
+        name: "潜在客户",
+        count: 450,
+        description: "有购买意向的好友",
+      },
+      {
+        id: "audience-4",
+        name: "VIP客户",
+        description: "已成交的VIP客户",
+      },
+    ]
+    setAudienceGroups(mockAudienceGroups)
+
+    // 设置默认选中的数据库和目标人群
+    if (!initialData?.selectedDatabase) {
+      setSelectedDatabase("db-1")
+    }
+    if (!initialData?.selectedAudience) {
+      setSelectedAudience("audience-1")
+    }
+  }, [initialData?.selectedDatabase, initialData?.selectedAudience])
+
+  // 过滤设备
+  const filteredDevices = devices.filter((device) => {
+    const matchesSearch =
+      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.wechatId.toLowerCase().includes(searchQuery.toLowerCase())
+
+    const matchesTab =
+      activeTab === "all" ||
+      (activeTab === "selected" && selectedDevices.includes(device.id)) ||
+      (activeTab === "online" && device.status === "online") ||
+      (activeTab === "offline" && device.status === "offline")
+
+    return matchesSearch && matchesTab
+  })
+
+  // 选择/取消选择单个设备
+  const handleDeviceSelect = (deviceId: string) => {
+    setSelectedDevices(
+      selectedDevices.includes(deviceId)
+        ? selectedDevices.filter((id) => id !== deviceId)
+        : [...selectedDevices, deviceId],
+    )
+  }
+
+  // 保存选择的设备
+  const handleSave = () => {
+    onSave({
+      selectedDevices,
+      selectedDatabase,
+      selectedAudience,
+    })
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>选择执行点赞任务的设备</CardTitle>
+          <CardDescription>选择要执行自动点赞任务的设备、数据库和目标人群</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* 设备筛选和搜索 */}
+          <div className="space-y-4">
+            <Label className="font-medium">选择设备</Label>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-2.5 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="搜索设备名称/微信号"
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+              <Button variant="outline" size="icon">
+                <RefreshCw className="h-4 w-4" />
+              </Button>
+            </div>
+
+            {/* 设备分类标签页 */}
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              <TabsList className="grid grid-cols-4">
+                <TabsTrigger value="all">全部设备</TabsTrigger>
+                <TabsTrigger value="selected">已选择 ({selectedDevices.length})</TabsTrigger>
+                <TabsTrigger value="online">在线设备</TabsTrigger>
+                <TabsTrigger value="offline">离线设备</TabsTrigger>
+              </TabsList>
+            </Tabs>
+
+            {/* 设备列表 */}
+            <div className="space-y-3">
+              {filteredDevices.map((device) => (
+                <Card
+                  key={device.id}
+                  className={`p-4 hover:shadow-md transition-shadow ${
+                    selectedDevices.includes(device.id) ? "ring-2 ring-primary" : ""
+                  }`}
+                >
+                  <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 flex items-center">
+                          <Smartphone className="h-4 w-4 mr-1 text-muted-foreground" />
+                          {device.name}
+                        </div>
+                        <Badge variant={device.status === "online" ? "success" : "secondary"} className="text-xs">
+                          {device.status === "online" ? "在线" : "离线"}
+                        </Badge>
+                      </div>
+                      <div className="text-sm text-muted-foreground">微信号: {device.wechatId}</div>
+                    </div>
+                  </div>
+                </Card>
+              ))}
+
+              {filteredDevices.length === 0 && (
+                <div className="text-center py-8 text-muted-foreground">未找到符合条件的设备</div>
+              )}
+            </div>
+          </div>
+
+          {/* 数据库选择 */}
+          <div className="space-y-4 pt-4 border-t">
+            <div className="flex items-center space-x-2">
+              <Database className="h-5 w-5 text-muted-foreground" />
+              <Label className="font-medium">选择数据库</Label>
+            </div>
+            <RadioGroup value={selectedDatabase} onValueChange={setSelectedDatabase} className="space-y-3">
+              {databases.map((db) => (
+                <div key={db.id} className="flex items-start space-x-3">
+                  <RadioGroupItem value={db.id} id={db.id} />
+                  <div className="flex-1">
+                    <Label htmlFor={db.id} className="font-medium">
+                      {db.name}
+                      <Badge variant="outline" className="ml-2">
+                        {db.count}条数据
+                      </Badge>
+                    </Label>
+                    <p className="text-sm text-muted-foreground">{db.description}</p>
+                  </div>
+                </div>
+              ))}
+            </RadioGroup>
+          </div>
+
+          {/* 目标人群选择 */}
+          <div className="space-y-4 pt-4 border-t">
+            <div className="flex items-center space-x-2">
+              <Users className="h-5 w-5 text-muted-foreground" />
+              <Label className="font-medium">选择目标人群</Label>
+            </div>
+            <RadioGroup value={selectedAudience} onValueChange={setSelectedAudience} className="space-y-3">
+              {audienceGroups.map((group) => (
+                <div key={group.id} className="flex items-start space-x-3">
+                  <RadioGroupItem value={group.id} id={group.id} />
+                  <div className="flex-1">
+                    <Label htmlFor={group.id} className="font-medium">
+                      {group.name}
+                      <Badge variant="outline" className="ml-2">
+                        {group.count}人
+                      </Badge>
+                    </Label>
+                    <p className="text-sm text-muted-foreground">{group.description}</p>
+                  </div>
+                </div>
+              ))}
+            </RadioGroup>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-between">
+        <Button variant="outline" onClick={onBack}>
+          返回上一步
+        </Button>
+        <Button onClick={handleSave} disabled={selectedDevices.length === 0}>
+          完成设置
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-like/components/like-config.tsx b/Cunkebao/app/workspace/auto-like/components/like-config.tsx
new file mode 100644
index 00000000..3f37f0d2
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-like/components/like-config.tsx
@@ -0,0 +1,263 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Slider } from "@/components/ui/slider"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Info, Trash2 } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+
+export interface LikeConfigData {
+  taskName: string
+  maxLikesPerDay: number
+  likeOldContent: boolean
+  contentTypes: string[]
+  keywordFilters: string[]
+  startImmediately: boolean
+  likeFirstPageOnly: boolean
+}
+
+interface LikeConfigProps {
+  initialData?: Partial<LikeConfigData>
+  onSave: (data: LikeConfigData) => void
+  onBack: () => void
+}
+
+export function LikeConfig({ initialData, onSave, onBack }: LikeConfigProps) {
+  const [formData, setFormData] = useState<LikeConfigData>({
+    taskName: initialData?.taskName ?? "朋友圈自动点赞任务",
+    maxLikesPerDay: initialData?.maxLikesPerDay ?? 50,
+    likeOldContent: initialData?.likeOldContent ?? false,
+    contentTypes: initialData?.contentTypes ?? ["text", "image", "video"],
+    keywordFilters: initialData?.keywordFilters ?? [],
+    startImmediately: initialData?.startImmediately ?? true,
+    likeFirstPageOnly: initialData?.likeFirstPageOnly ?? false,
+  })
+
+  const [newKeyword, setNewKeyword] = useState("")
+
+  // 内容类型选项
+  const contentTypeOptions = [
+    { id: "text", label: "纯文字动态" },
+    { id: "image", label: "图片动态" },
+    { id: "video", label: "视频动态" },
+    { id: "link", label: "链接分享" },
+    { id: "original", label: "仅原创内容" },
+  ]
+
+  // 添加关键词
+  const addKeyword = () => {
+    if (newKeyword.trim() && !formData.keywordFilters.includes(newKeyword.trim())) {
+      setFormData({
+        ...formData,
+        keywordFilters: [...formData.keywordFilters, newKeyword.trim()],
+      })
+      setNewKeyword("")
+    }
+  }
+
+  // 删除关键词
+  const removeKeyword = (keyword: string) => {
+    setFormData({
+      ...formData,
+      keywordFilters: formData.keywordFilters.filter((k) => k !== keyword),
+    })
+  }
+
+  // 切换内容类型
+  const toggleContentType = (typeId: string) => {
+    setFormData({
+      ...formData,
+      contentTypes: formData.contentTypes.includes(typeId)
+        ? formData.contentTypes.filter((id) => id !== typeId)
+        : [...formData.contentTypes, typeId],
+    })
+  }
+
+  // 处理表单提交
+  const handleSubmit = () => {
+    onSave(formData)
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>点赞配置设置</CardTitle>
+          <CardDescription>配置点赞任务的名称、内容和数量</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* 任务名称 */}
+          <div className="space-y-2">
+            <Label htmlFor="taskName" className="font-medium">
+              任务名称
+            </Label>
+            <Input
+              id="taskName"
+              value={formData.taskName}
+              onChange={(e) => setFormData({ ...formData, taskName: e.target.value })}
+              placeholder="输入任务名称"
+            />
+          </div>
+
+          {/* 每日点赞数量 */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label htmlFor="maxLikesPerDay" className="font-medium">
+                每日最大点赞数
+              </Label>
+              <span className="text-sm text-muted-foreground">{formData.maxLikesPerDay}个</span>
+            </div>
+            <Slider
+              id="maxLikesPerDay"
+              min={10}
+              max={200}
+              step={10}
+              value={[formData.maxLikesPerDay]}
+              onValueChange={(value) => setFormData({ ...formData, maxLikesPerDay: value[0] })}
+            />
+          </div>
+
+          {/* 内容类型设置 */}
+          <div className="space-y-3 pt-4 border-t">
+            <Label className="font-medium">点赞内容类型</Label>
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+              {contentTypeOptions.map((type) => (
+                <div key={type.id} className="flex items-center space-x-2">
+                  <Checkbox
+                    id={`content-${type.id}`}
+                    checked={formData.contentTypes.includes(type.id)}
+                    onCheckedChange={() => toggleContentType(type.id)}
+                  />
+                  <Label htmlFor={`content-${type.id}`} className="text-sm">
+                    {type.label}
+                  </Label>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 关键词过滤 */}
+          <div className="space-y-3 pt-4 border-t">
+            <Label className="font-medium">关键词过滤</Label>
+            <div className="flex space-x-2">
+              <Input
+                placeholder="输入关键词"
+                value={newKeyword}
+                onChange={(e) => setNewKeyword(e.target.value)}
+                className="flex-1"
+              />
+              <Button type="button" onClick={addKeyword} disabled={!newKeyword.trim()}>
+                添加
+              </Button>
+            </div>
+            {formData.keywordFilters.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-2">
+                {formData.keywordFilters.map((keyword) => (
+                  <Badge key={keyword} variant="secondary" className="flex items-center gap-1">
+                    {keyword}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-4 w-4 p-0 hover:bg-transparent"
+                      onClick={() => removeKeyword(keyword)}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                      <span className="sr-only">Remove</span>
+                    </Button>
+                  </Badge>
+                ))}
+              </div>
+            )}
+            <p className="text-xs text-muted-foreground">添加关键词后，系统将只对包含这些关键词的内容进行点赞</p>
+          </div>
+
+          {/* 其他选项 */}
+          <div className="space-y-4 pt-4 border-t">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Label htmlFor="likeOldContent" className="font-medium">
+                  点赞历史内容
+                </Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="h-4 w-4 text-muted-foreground" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>开启后系统将点赞好友的历史朋友圈内容</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+              <Switch
+                id="likeOldContent"
+                checked={formData.likeOldContent}
+                onCheckedChange={(checked) => setFormData({ ...formData, likeOldContent: checked })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Label htmlFor="startImmediately" className="font-medium">
+                  立即开始点赞
+                </Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="h-4 w-4 text-muted-foreground" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>开启后任务创建完成将立即开始执行</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+              <Switch
+                id="startImmediately"
+                checked={formData.startImmediately}
+                onCheckedChange={(checked) => setFormData({ ...formData, startImmediately: checked })}
+              />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Label htmlFor="likeFirstPageOnly" className="font-medium">
+                  仅点赞第一页
+                </Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="h-4 w-4 text-muted-foreground" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>开启后系统将只点赞朋友圈第一页的内容</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+              <Switch
+                id="likeFirstPageOnly"
+                checked={formData.likeFirstPageOnly}
+                onCheckedChange={(checked) => setFormData({ ...formData, likeFirstPageOnly: checked })}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-between">
+        <Button variant="outline" onClick={onBack}>
+          返回上一步
+        </Button>
+        <Button onClick={handleSubmit}>保存并继续</Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-like/components/like-rules.tsx b/Cunkebao/app/workspace/auto-like/components/like-rules.tsx
new file mode 100644
index 00000000..b5c84a47
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-like/components/like-rules.tsx
@@ -0,0 +1,488 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Slider } from "@/components/ui/slider"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Info, Plus, Trash2 } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+
+export interface TimeRange {
+  id: string
+  start: string
+  end: string
+}
+
+export interface LikeRulesData {
+  enableAutoLike: boolean
+  likeInterval: number
+  maxLikesPerDay: number
+  likeOldContent: boolean
+  contentTypes: string[]
+  keywordFilters: string[]
+  friendGroups: string[]
+  excludedGroups: string[]
+  timeRanges: TimeRange[]
+  randomizeInterval: boolean
+  minInterval?: number
+  maxInterval?: number
+}
+
+interface LikeRulesProps {
+  initialData?: Partial<LikeRulesData>
+  onSave: (data: LikeRulesData) => void
+}
+
+export function LikeRules({ initialData, onSave }: LikeRulesProps) {
+  const [formData, setFormData] = useState<LikeRulesData>({
+    enableAutoLike: initialData?.enableAutoLike ?? true,
+    likeInterval: initialData?.likeInterval ?? 15,
+    maxLikesPerDay: initialData?.maxLikesPerDay ?? 50,
+    likeOldContent: initialData?.likeOldContent ?? false,
+    contentTypes: initialData?.contentTypes ?? ["text", "image", "video"],
+    keywordFilters: initialData?.keywordFilters ?? [],
+    friendGroups: initialData?.friendGroups ?? ["all"],
+    excludedGroups: initialData?.excludedGroups ?? [],
+    timeRanges: initialData?.timeRanges ?? [{ id: "1", start: "09:00", end: "11:00" }],
+    randomizeInterval: initialData?.randomizeInterval ?? false,
+    minInterval: initialData?.minInterval ?? 5,
+    maxInterval: initialData?.maxInterval ?? 30,
+  })
+
+  const [newKeyword, setNewKeyword] = useState("")
+
+  // 内容类型选项
+  const contentTypeOptions = [
+    { id: "text", label: "纯文字动态" },
+    { id: "image", label: "图片动态" },
+    { id: "video", label: "视频动态" },
+    { id: "link", label: "链接分享" },
+    { id: "original", label: "仅原创内容" },
+  ]
+
+  // 好友分组选项（模拟数据）
+  const friendGroupOptions = [
+    { id: "all", label: "所有好友" },
+    { id: "work", label: "工作相关" },
+    { id: "family", label: "亲友" },
+    { id: "clients", label: "客户" },
+    { id: "potential", label: "潜在客户" },
+  ]
+
+  // 添加时间范围
+  const addTimeRange = () => {
+    const newId = String(formData.timeRanges.length + 1)
+    setFormData({
+      ...formData,
+      timeRanges: [...formData.timeRanges, { id: newId, start: "12:00", end: "14:00" }],
+    })
+  }
+
+  // 删除时间范围
+  const removeTimeRange = (id: string) => {
+    setFormData({
+      ...formData,
+      timeRanges: formData.timeRanges.filter((range) => range.id !== id),
+    })
+  }
+
+  // 更新时间范围
+  const updateTimeRange = (id: string, field: "start" | "end", value: string) => {
+    setFormData({
+      ...formData,
+      timeRanges: formData.timeRanges.map((range) => (range.id === id ? { ...range, [field]: value } : range)),
+    })
+  }
+
+  // 添加关键词
+  const addKeyword = () => {
+    if (newKeyword.trim() && !formData.keywordFilters.includes(newKeyword.trim())) {
+      setFormData({
+        ...formData,
+        keywordFilters: [...formData.keywordFilters, newKeyword.trim()],
+      })
+      setNewKeyword("")
+    }
+  }
+
+  // 删除关键词
+  const removeKeyword = (keyword: string) => {
+    setFormData({
+      ...formData,
+      keywordFilters: formData.keywordFilters.filter((k) => k !== keyword),
+    })
+  }
+
+  // 切换内容类型
+  const toggleContentType = (typeId: string) => {
+    setFormData({
+      ...formData,
+      contentTypes: formData.contentTypes.includes(typeId)
+        ? formData.contentTypes.filter((id) => id !== typeId)
+        : [...formData.contentTypes, typeId],
+    })
+  }
+
+  // 切换好友分组
+  const toggleFriendGroup = (groupId: string) => {
+    if (groupId === "all") {
+      setFormData({
+        ...formData,
+        friendGroups: ["all"],
+        excludedGroups: [],
+      })
+      return
+    }
+
+    // 如果当前包含"all"，则移除它
+    let newGroups = formData.friendGroups.filter((id) => id !== "all")
+
+    if (formData.friendGroups.includes(groupId)) {
+      newGroups = newGroups.filter((id) => id !== groupId)
+      // 如果没有选择任何组，默认回到"all"
+      if (newGroups.length === 0) {
+        newGroups = ["all"]
+      }
+    } else {
+      newGroups.push(groupId)
+    }
+
+    setFormData({
+      ...formData,
+      friendGroups: newGroups,
+    })
+  }
+
+  // 切换排除分组
+  const toggleExcludedGroup = (groupId: string) => {
+    setFormData({
+      ...formData,
+      excludedGroups: formData.excludedGroups.includes(groupId)
+        ? formData.excludedGroups.filter((id) => id !== groupId)
+        : [...formData.excludedGroups, groupId],
+    })
+  }
+
+  // 处理表单提交
+  const handleSubmit = () => {
+    onSave(formData)
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>点赞规则设置</CardTitle>
+          <CardDescription>设定自动点赞的规则和时间间隔</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* 基本设置 */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Label htmlFor="enableAutoLike" className="font-medium">
+                  启用自动点赞
+                </Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="h-4 w-4 text-muted-foreground" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>开启后系统将根据设置自动为朋友圈点赞</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+              <Switch
+                id="enableAutoLike"
+                checked={formData.enableAutoLike}
+                onCheckedChange={(checked) => setFormData({ ...formData, enableAutoLike: checked })}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="intervalType" className="font-medium">
+                  点赞间隔设置
+                </Label>
+                <Select
+                  value={formData.randomizeInterval ? "random" : "fixed"}
+                  onValueChange={(value) => setFormData({ ...formData, randomizeInterval: value === "random" })}
+                  disabled={!formData.enableAutoLike}
+                >
+                  <SelectTrigger className="w-[180px]">
+                    <SelectValue placeholder="选择间隔类型" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="fixed">固定间隔</SelectItem>
+                    <SelectItem value="random">随机间隔</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {formData.randomizeInterval ? (
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="minInterval" className="text-sm">
+                        最小间隔（分钟）
+                      </Label>
+                      <span className="text-sm text-muted-foreground">{formData.minInterval}分钟</span>
+                    </div>
+                    <Slider
+                      id="minInterval"
+                      min={1}
+                      max={30}
+                      step={1}
+                      value={[formData.minInterval || 5]}
+                      onValueChange={(value) => setFormData({ ...formData, minInterval: value[0] })}
+                      disabled={!formData.enableAutoLike}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="maxInterval" className="text-sm">
+                        最大间隔（分钟）
+                      </Label>
+                      <span className="text-sm text-muted-foreground">{formData.maxInterval}分钟</span>
+                    </div>
+                    <Slider
+                      id="maxInterval"
+                      min={formData.minInterval || 5}
+                      max={120}
+                      step={1}
+                      value={[formData.maxInterval || 30]}
+                      onValueChange={(value) => setFormData({ ...formData, maxInterval: value[0] })}
+                      disabled={!formData.enableAutoLike}
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="likeInterval" className="text-sm">
+                      点赞间隔（分钟）
+                    </Label>
+                    <span className="text-sm text-muted-foreground">{formData.likeInterval}分钟</span>
+                  </div>
+                  <Slider
+                    id="likeInterval"
+                    min={1}
+                    max={60}
+                    step={1}
+                    value={[formData.likeInterval]}
+                    onValueChange={(value) => setFormData({ ...formData, likeInterval: value[0] })}
+                    disabled={!formData.enableAutoLike}
+                  />
+                </div>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="maxLikesPerDay" className="font-medium">
+                  每日最大点赞数
+                </Label>
+                <span className="text-sm text-muted-foreground">{formData.maxLikesPerDay}个</span>
+              </div>
+              <Slider
+                id="maxLikesPerDay"
+                min={10}
+                max={200}
+                step={10}
+                value={[formData.maxLikesPerDay]}
+                onValueChange={(value) => setFormData({ ...formData, maxLikesPerDay: value[0] })}
+                disabled={!formData.enableAutoLike}
+              />
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Label htmlFor="likeOldContent" className="font-medium">
+                  点赞历史内容
+                </Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="h-4 w-4 text-muted-foreground" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>开启后系统将点赞好友的历史朋友圈内容</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+              <Switch
+                id="likeOldContent"
+                checked={formData.likeOldContent}
+                onCheckedChange={(checked) => setFormData({ ...formData, likeOldContent: checked })}
+                disabled={!formData.enableAutoLike}
+              />
+            </div>
+          </div>
+
+          {/* 内容类型设置 */}
+          <div className="space-y-3 pt-4 border-t">
+            <Label className="font-medium">点赞内容类型</Label>
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+              {contentTypeOptions.map((type) => (
+                <div key={type.id} className="flex items-center space-x-2">
+                  <Checkbox
+                    id={`content-${type.id}`}
+                    checked={formData.contentTypes.includes(type.id)}
+                    onCheckedChange={() => toggleContentType(type.id)}
+                    disabled={!formData.enableAutoLike}
+                  />
+                  <Label htmlFor={`content-${type.id}`} className="text-sm">
+                    {type.label}
+                  </Label>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* 关键词过滤 */}
+          <div className="space-y-3 pt-4 border-t">
+            <Label className="font-medium">关键词过滤</Label>
+            <div className="flex space-x-2">
+              <Input
+                placeholder="输入关键词"
+                value={newKeyword}
+                onChange={(e) => setNewKeyword(e.target.value)}
+                className="flex-1"
+                disabled={!formData.enableAutoLike}
+              />
+              <Button type="button" onClick={addKeyword} disabled={!formData.enableAutoLike || !newKeyword.trim()}>
+                添加
+              </Button>
+            </div>
+            {formData.keywordFilters.length > 0 && (
+              <div className="flex flex-wrap gap-2 mt-2">
+                {formData.keywordFilters.map((keyword) => (
+                  <Badge key={keyword} variant="secondary" className="flex items-center gap-1">
+                    {keyword}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-4 w-4 p-0 hover:bg-transparent"
+                      onClick={() => removeKeyword(keyword)}
+                      disabled={!formData.enableAutoLike}
+                    >
+                      <Trash2 className="h-3 w-3" />
+                      <span className="sr-only">Remove</span>
+                    </Button>
+                  </Badge>
+                ))}
+              </div>
+            )}
+            <p className="text-xs text-muted-foreground">添加关键词后，系统将只对包含这些关键词的内容进行点赞</p>
+          </div>
+
+          {/* 好友分组设置 */}
+          <div className="space-y-3 pt-4 border-t">
+            <Label className="font-medium">好友分组筛选</Label>
+            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
+              {friendGroupOptions.map((group) => (
+                <div key={group.id} className="flex items-center space-x-2">
+                  <Checkbox
+                    id={`group-${group.id}`}
+                    checked={formData.friendGroups.includes(group.id)}
+                    onCheckedChange={() => toggleFriendGroup(group.id)}
+                    disabled={!formData.enableAutoLike || (group.id !== "all" && formData.friendGroups.includes("all"))}
+                  />
+                  <Label htmlFor={`group-${group.id}`} className="text-sm">
+                    {group.label}
+                  </Label>
+                </div>
+              ))}
+            </div>
+
+            {!formData.friendGroups.includes("all") && (
+              <div className="mt-4">
+                <Label className="font-medium text-sm">排除分组</Label>
+                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mt-2">
+                  {friendGroupOptions
+                    .filter((group) => group.id !== "all" && !formData.friendGroups.includes(group.id))
+                    .map((group) => (
+                      <div key={`exclude-${group.id}`} className="flex items-center space-x-2">
+                        <Checkbox
+                          id={`exclude-${group.id}`}
+                          checked={formData.excludedGroups.includes(group.id)}
+                          onCheckedChange={() => toggleExcludedGroup(group.id)}
+                          disabled={!formData.enableAutoLike}
+                        />
+                        <Label htmlFor={`exclude-${group.id}`} className="text-sm">
+                          {group.label}
+                        </Label>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* 时间范围设置 */}
+          <div className="space-y-3 pt-4 border-t">
+            <div className="flex items-center justify-between">
+              <Label className="font-medium">点赞时间段</Label>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={addTimeRange}
+                disabled={!formData.enableAutoLike || formData.timeRanges.length >= 5}
+              >
+                <Plus className="h-4 w-4 mr-1" />
+                添加时间段
+              </Button>
+            </div>
+
+            <div className="space-y-3">
+              {formData.timeRanges.map((range) => (
+                <div key={range.id} className="flex items-center space-x-2">
+                  <Input
+                    type="time"
+                    value={range.start}
+                    onChange={(e) => updateTimeRange(range.id, "start", e.target.value)}
+                    className="w-32"
+                    disabled={!formData.enableAutoLike}
+                  />
+                  <span>至</span>
+                  <Input
+                    type="time"
+                    value={range.end}
+                    onChange={(e) => updateTimeRange(range.id, "end", e.target.value)}
+                    className="w-32"
+                    disabled={!formData.enableAutoLike}
+                  />
+                  {formData.timeRanges.length > 1 && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => removeTimeRange(range.id)}
+                      disabled={!formData.enableAutoLike}
+                    >
+                      <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                  )}
+                </div>
+              ))}
+            </div>
+            <p className="text-xs text-muted-foreground">设置点赞的时间段，系统将在这些时间段内执行点赞任务</p>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button onClick={handleSubmit}>保存并继续</Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-like/components/step-indicator.tsx b/Cunkebao/app/workspace/auto-like/components/step-indicator.tsx
new file mode 100644
index 00000000..b14baec1
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-like/components/step-indicator.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { CheckIcon } from "lucide-react"
+import { cn } from "@/app/lib/utils"
+
+interface Step {
+  id: string
+  name: string
+  description?: string
+}
+
+interface StepIndicatorProps {
+  steps: Step[]
+  currentStep: number
+  onStepClick?: (index: number) => void
+}
+
+export function StepIndicator({ steps, currentStep, onStepClick }: StepIndicatorProps) {
+  return (
+    <div className="w-full">
+      <ol className="flex items-center w-full">
+        {steps.map((step, index) => {
+          const isCompleted = index < currentStep
+          const isCurrent = index === currentStep
+          const isClickable = onStepClick && index <= currentStep
+
+          return (
+            <li
+              key={step.id}
+              className={cn("flex items-center space-x-2.5 flex-1", index !== steps.length - 1 ? "relative" : "")}
+            >
+              <span
+                className={cn(
+                  "flex items-center justify-center w-8 h-8 rounded-full shrink-0 text-sm font-medium",
+                  isCompleted
+                    ? "bg-primary text-primary-foreground"
+                    : isCurrent
+                      ? "bg-primary/20 text-primary border border-primary"
+                      : "bg-muted text-muted-foreground",
+                  isClickable ? "cursor-pointer" : "",
+                )}
+                onClick={() => isClickable && onStepClick(index)}
+              >
+                {isCompleted ? <CheckIcon className="w-5 h-5" /> : index + 1}
+              </span>
+              <span>
+                <h3
+                  className={cn(
+                    "font-medium leading-tight",
+                    isCompleted || isCurrent ? "text-primary" : "text-muted-foreground",
+                  )}
+                >
+                  {step.name}
+                </h3>
+                {step.description && (
+                  <p className="text-sm text-muted-foreground hidden md:block">{step.description}</p>
+                )}
+              </span>
+              {index !== steps.length - 1 && (
+                <div
+                  className={cn(
+                    "absolute top-4 left-8 -translate-y-1/2 w-full h-0.5",
+                    isCompleted ? "bg-primary" : "bg-muted",
+                  )}
+                  style={{ width: "calc(100% - 2rem)" }}
+                ></div>
+              )}
+            </li>
+          )
+        })}
+      </ol>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-like/components/time-settings.tsx b/Cunkebao/app/workspace/auto-like/components/time-settings.tsx
new file mode 100644
index 00000000..e029fdb6
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-like/components/time-settings.tsx
@@ -0,0 +1,243 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Slider } from "@/components/ui/slider"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Info, Plus, Trash2 } from "lucide-react"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+
+export interface TimeRange {
+  id: string
+  start: string
+  end: string
+}
+
+export interface TimeSettingsData {
+  enableAutoLike: boolean
+  timeRanges: TimeRange[]
+  likeInterval: number
+  randomizeInterval: boolean
+  minInterval?: number
+  maxInterval?: number
+}
+
+interface TimeSettingsProps {
+  initialData?: Partial<TimeSettingsData>
+  onSave: (data: TimeSettingsData) => void
+}
+
+export function TimeSettings({ initialData, onSave }: TimeSettingsProps) {
+  const [formData, setFormData] = useState<TimeSettingsData>({
+    enableAutoLike: initialData?.enableAutoLike ?? true,
+    timeRanges: initialData?.timeRanges ?? [{ id: "1", start: "06:00", end: "08:00" }],
+    likeInterval: initialData?.likeInterval ?? 15,
+    randomizeInterval: initialData?.randomizeInterval ?? false,
+    minInterval: initialData?.minInterval ?? 5,
+    maxInterval: initialData?.maxInterval ?? 30,
+  })
+
+  // 添加时间范围
+  const addTimeRange = () => {
+    const newId = String(formData.timeRanges.length + 1)
+    setFormData({
+      ...formData,
+      timeRanges: [...formData.timeRanges, { id: newId, start: "12:00", end: "14:00" }],
+    })
+  }
+
+  // 删除时间范围
+  const removeTimeRange = (id: string) => {
+    setFormData({
+      ...formData,
+      timeRanges: formData.timeRanges.filter((range) => range.id !== id),
+    })
+  }
+
+  // 更新时间范围
+  const updateTimeRange = (id: string, field: "start" | "end", value: string) => {
+    setFormData({
+      ...formData,
+      timeRanges: formData.timeRanges.map((range) => (range.id === id ? { ...range, [field]: value } : range)),
+    })
+  }
+
+  // 处理表单提交
+  const handleSubmit = () => {
+    onSave(formData)
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>点赞时间设置</CardTitle>
+          <CardDescription>设置自动点赞的时间段和间隔</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* 基本设置 */}
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-2">
+                <Label htmlFor="enableAutoLike" className="font-medium">
+                  启用自动点赞
+                </Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="h-4 w-4 text-muted-foreground" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>开启后系统将根据设置自动为朋友圈点赞</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+              <Switch
+                id="enableAutoLike"
+                checked={formData.enableAutoLike}
+                onCheckedChange={(checked) => setFormData({ ...formData, enableAutoLike: checked })}
+              />
+            </div>
+
+            {/* 时间范围设置 */}
+            <div className="space-y-3 pt-4">
+              <div className="flex items-center justify-between">
+                <Label className="font-medium">点赞时间段</Label>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={addTimeRange}
+                  disabled={!formData.enableAutoLike || formData.timeRanges.length >= 5}
+                >
+                  <Plus className="h-4 w-4 mr-1" />
+                  添加时间段
+                </Button>
+              </div>
+
+              <div className="space-y-3">
+                {formData.timeRanges.map((range) => (
+                  <div key={range.id} className="flex items-center space-x-2">
+                    <Input
+                      type="time"
+                      value={range.start}
+                      onChange={(e) => updateTimeRange(range.id, "start", e.target.value)}
+                      className="w-32"
+                      disabled={!formData.enableAutoLike}
+                    />
+                    <span>至</span>
+                    <Input
+                      type="time"
+                      value={range.end}
+                      onChange={(e) => updateTimeRange(range.id, "end", e.target.value)}
+                      className="w-32"
+                      disabled={!formData.enableAutoLike}
+                    />
+                    {formData.timeRanges.length > 1 && (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => removeTimeRange(range.id)}
+                        disabled={!formData.enableAutoLike}
+                      >
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                      </Button>
+                    )}
+                  </div>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground">设置点赞的时间段，系统将在这些时间段内执行点赞任务</p>
+            </div>
+
+            <div className="space-y-2 pt-4">
+              <div className="flex items-center justify-between">
+                <Label htmlFor="intervalType" className="font-medium">
+                  点赞间隔设置
+                </Label>
+                <Select
+                  value={formData.randomizeInterval ? "random" : "fixed"}
+                  onValueChange={(value) => setFormData({ ...formData, randomizeInterval: value === "random" })}
+                  disabled={!formData.enableAutoLike}
+                >
+                  <SelectTrigger className="w-[180px]">
+                    <SelectValue placeholder="选择间隔类型" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="fixed">固定间隔</SelectItem>
+                    <SelectItem value="random">随机间隔</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {formData.randomizeInterval ? (
+                <div className="space-y-4">
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="minInterval" className="text-sm">
+                        最小间隔（分钟）
+                      </Label>
+                      <span className="text-sm text-muted-foreground">{formData.minInterval}分钟</span>
+                    </div>
+                    <Slider
+                      id="minInterval"
+                      min={1}
+                      max={30}
+                      step={1}
+                      value={[formData.minInterval || 5]}
+                      onValueChange={(value) => setFormData({ ...formData, minInterval: value[0] })}
+                      disabled={!formData.enableAutoLike}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between">
+                      <Label htmlFor="maxInterval" className="text-sm">
+                        最大间隔（分钟）
+                      </Label>
+                      <span className="text-sm text-muted-foreground">{formData.maxInterval}分钟</span>
+                    </div>
+                    <Slider
+                      id="maxInterval"
+                      min={formData.minInterval || 5}
+                      max={120}
+                      step={1}
+                      value={[formData.maxInterval || 30]}
+                      onValueChange={(value) => setFormData({ ...formData, maxInterval: value[0] })}
+                      disabled={!formData.enableAutoLike}
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="likeInterval" className="text-sm">
+                      点赞间隔（分钟）
+                    </Label>
+                    <span className="text-sm text-muted-foreground">{formData.likeInterval}分钟</span>
+                  </div>
+                  <Slider
+                    id="likeInterval"
+                    min={1}
+                    max={60}
+                    step={1}
+                    value={[formData.likeInterval]}
+                    onValueChange={(value) => setFormData({ ...formData, likeInterval: value[0] })}
+                    disabled={!formData.enableAutoLike}
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-end">
+        <Button onClick={handleSubmit}>下一步</Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/auto-like/page.tsx b/Cunkebao/app/workspace/auto-like/page.tsx
new file mode 100644
index 00000000..fab125f6
--- /dev/null
+++ b/Cunkebao/app/workspace/auto-like/page.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { StepIndicator } from "./components/step-indicator"
+import { TimeSettings, type TimeSettingsData } from "./components/time-settings"
+import { DeviceSelection, type DeviceSelectionData } from "./components/device-selection"
+import type { LikeConfigData } from "./components/like-config"
+import { useRouter } from "next/navigation"
+
+const steps = [
+  {
+    id: "device-selection",
+    name: "设备选择",
+    description: "选择执行自动点赞的设备",
+  },
+  {
+    id: "audience-selection",
+    name: "人群选择",
+    description: "选择点赞目标人群",
+  },
+  {
+    id: "time-settings",
+    name: "时间设置",
+    description: "设置点赞时间和频率",
+  },
+]
+
+export default function AutoLikePage() {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(0)
+  const [formData, setFormData] = useState({
+    deviceSelection: {
+      selectedDevices: [],
+      selectedDatabase: "",
+      selectedAudience: "",
+    } as DeviceSelectionData,
+    timeSettings: {
+      enableAutoLike: true,
+      timeRanges: [{ id: "1", start: "06:00", end: "08:00" }],
+      likeInterval: 15,
+      randomizeInterval: false,
+    } as TimeSettingsData,
+    likeConfig: {
+      likeAll: false,
+      likeFirstPage: true,
+      maxLikesPerDay: 50,
+      likeImmediately: true,
+      excludeTags: [],
+      includeTags: [],
+    } as LikeConfigData,
+  })
+
+  const handleDeviceSelectionSave = (data: DeviceSelectionData) => {
+    setFormData({ ...formData, deviceSelection: data })
+    setCurrentStep(1)
+  }
+
+  const handleTimeSettingsSave = (data: TimeSettingsData) => {
+    setFormData({ ...formData, timeSettings: data })
+    setCurrentStep(2)
+  }
+
+  const handleLikeConfigSave = (data: LikeConfigData) => {
+    setFormData({ ...formData, likeConfig: data })
+    // 提交表单或导航到确认页面
+    router.push("/workspace")
+  }
+
+  const handleStepClick = (index: number) => {
+    if (index <= currentStep) {
+      setCurrentStep(index)
+    }
+  }
+
+  const handleBack = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1)
+    } else {
+      router.push("/workspace")
+    }
+  }
+
+  return (
+    <div className="container mx-auto py-6 max-w-4xl">
+      <div className="mb-6">
+        <Button variant="ghost" onClick={handleBack} className="mb-4">
+          ← 返回
+        </Button>
+        <h1 className="text-2xl font-bold">自动点赞</h1>
+        <p className="text-muted-foreground">设置自动点赞功能，提高互动率和活跃度</p>
+      </div>
+
+      <div className="mb-8">
+        <StepIndicator steps={steps} currentStep={currentStep} onStepClick={handleStepClick} />
+      </div>
+
+      {currentStep === 0 && (
+        <DeviceSelection
+          initialData={formData.deviceSelection}
+          onSave={handleDeviceSelectionSave}
+          onBack={handleBack}
+        />
+      )}
+
+      {currentStep === 1 && (
+        <Card>
+          <CardHeader>
+            <CardTitle>人群选择</CardTitle>
+            <CardDescription>选择需要自动点赞的目标人群</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            {/* 这里可以添加人群选择的具体内容 */}
+            <div className="flex justify-between">
+              <Button variant="outline" onClick={() => setCurrentStep(0)}>
+                上一步
+              </Button>
+              <Button onClick={() => setCurrentStep(2)}>下一步</Button>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {currentStep === 2 && <TimeSettings initialData={formData.timeSettings} onSave={handleTimeSettingsSave} />}
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-push/[id]/edit/page.tsx b/Cunkebao/app/workspace/group-push/[id]/edit/page.tsx
new file mode 100644
index 00000000..c9d26b22
--- /dev/null
+++ b/Cunkebao/app/workspace/group-push/[id]/edit/page.tsx
@@ -0,0 +1,193 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { StepIndicator } from "../../components/step-indicator"
+import { MessageEditor } from "../../components/message-editor"
+import { FriendSelector } from "../../components/friend-selector"
+import { ArrowLeft, ArrowRight, Check, Loader2 } from "lucide-react"
+import { useToast } from "@/components/ui/use-toast"
+
+const steps = ["推送信息", "选择好友"]
+
+// 模拟数据
+const mockPushTasks = {
+  "1": {
+    id: "1",
+    name: "618活动推广消息",
+    content: {
+      text: "618年中大促，全场商品5折起！限时抢购，先到先得！",
+      images: ["/placeholder.svg?height=200&width=200"],
+      video: null,
+      link: "https://example.com/618",
+    },
+    selectedFriends: ["1", "3", "5"],
+    pushTime: "2025-06-18 10:00:00",
+    progress: 100,
+    status: "已完成",
+  },
+  "2": {
+    id: "2",
+    name: "新品上市通知",
+    content: {
+      text: "我们的新产品已经上市，快来体验吧！",
+      images: [],
+      video: "/placeholder.svg?height=400&width=400",
+      link: null,
+    },
+    selectedFriends: ["2", "4", "6", "8"],
+    pushTime: "2025-03-25 09:30:00",
+    progress: 75,
+    status: "进行中",
+  },
+}
+
+export default function EditPushPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const { toast } = useToast()
+  const [loading, setLoading] = useState(true)
+  const [currentStep, setCurrentStep] = useState(0)
+  const [taskName, setTaskName] = useState("")
+  const [messageContent, setMessageContent] = useState({
+    text: "",
+    images: [],
+    video: null,
+    link: null,
+  })
+  const [selectedFriends, setSelectedFriends] = useState<string[]>([])
+
+  useEffect(() => {
+    // 模拟加载数据
+    setTimeout(() => {
+      const task = mockPushTasks[params.id as keyof typeof mockPushTasks]
+      if (task) {
+        setTaskName(task.name)
+        setMessageContent(task.content)
+        setSelectedFriends(task.selectedFriends)
+      }
+      setLoading(false)
+    }, 500)
+  }, [params.id])
+
+  const handleNext = () => {
+    if (currentStep === 0) {
+      // 验证第一步
+      if (!taskName.trim()) {
+        toast({
+          title: "请输入任务名称",
+          variant: "destructive",
+        })
+        return
+      }
+
+      if (!messageContent.text && messageContent.images.length === 0 && !messageContent.video && !messageContent.link) {
+        toast({
+          title: "请添加至少一种消息内容",
+          variant: "destructive",
+        })
+        return
+      }
+    }
+
+    setCurrentStep((prev) => prev + 1)
+  }
+
+  const handlePrevious = () => {
+    setCurrentStep((prev) => prev - 1)
+  }
+
+  const handleSubmit = () => {
+    if (selectedFriends.length === 0) {
+      toast({
+        title: "请选择至少一个好友",
+        variant: "destructive",
+      })
+      return
+    }
+
+    // 模拟提交
+    toast({
+      title: "推送任务更新成功",
+      description: `已更新推送任务 "${taskName}"`,
+    })
+
+    // 跳转回列表页
+    router.push("/workspace/group-push")
+  }
+
+  if (loading) {
+    return (
+      <div className="container mx-auto py-6 flex justify-center items-center min-h-[60vh]">
+        <div className="flex flex-col items-center">
+          <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
+          <p className="mt-2 text-gray-500">加载中...</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="container mx-auto py-6">
+      {/* 顶部导航栏 */}
+      <div className="flex items-center justify-between mb-6 relative">
+        <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/group-push")} className="mr-auto">
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <h1 className="text-2xl font-bold absolute left-1/2 transform -translate-x-1/2">编辑推送</h1>
+        <div className="w-10"></div> {/* 占位元素，保持标题居中 */}
+      </div>
+
+      <StepIndicator currentStep={currentStep} steps={steps} />
+
+      <Card>
+        <CardContent className="pt-6">
+          {currentStep === 0 ? (
+            <div className="space-y-6">
+              <div>
+                <Label htmlFor="task-name">任务名称</Label>
+                <Input
+                  id="task-name"
+                  placeholder="请输入任务名称"
+                  value={taskName}
+                  onChange={(e) => setTaskName(e.target.value)}
+                />
+              </div>
+
+              <div>
+                <Label>消息内容</Label>
+                <MessageEditor onMessageChange={setMessageContent} defaultValues={messageContent} />
+              </div>
+
+              <div className="flex justify-end">
+                <Button onClick={handleNext}>
+                  下一步
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-6">
+              <FriendSelector onSelectionChange={setSelectedFriends} defaultSelectedFriendIds={selectedFriends} />
+
+              <div className="flex justify-between">
+                <Button variant="outline" onClick={handlePrevious}>
+                  <ArrowLeft className="mr-2 h-4 w-4" />
+                  上一步
+                </Button>
+                <Button onClick={handleSubmit}>
+                  <Check className="mr-2 h-4 w-4" />
+                  确认
+                </Button>
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-push/components/basic-settings.tsx b/Cunkebao/app/workspace/group-push/components/basic-settings.tsx
new file mode 100644
index 00000000..d53475e8
--- /dev/null
+++ b/Cunkebao/app/workspace/group-push/components/basic-settings.tsx
@@ -0,0 +1,219 @@
+"use client"
+
+import { useState } from "react"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Minus, Plus } from "lucide-react"
+
+interface BasicSettingsProps {
+  defaultValues?: {
+    name: string
+    pushTimeStart: string
+    pushTimeEnd: string
+    dailyPushCount: number
+    pushOrder: "earliest" | "latest"
+    isLoopPush: boolean
+    isImmediatePush: boolean
+    isEnabled: boolean
+  }
+  onNext: (values: any) => void
+  onSave: (values: any) => void
+  onCancel: () => void
+}
+
+export function BasicSettings({
+  defaultValues = {
+    name: "",
+    pushTimeStart: "06:00",
+    pushTimeEnd: "23:59",
+    dailyPushCount: 20,
+    pushOrder: "latest",
+    isLoopPush: false,
+    isImmediatePush: false,
+    isEnabled: false,
+  },
+  onNext,
+  onSave,
+  onCancel,
+}: BasicSettingsProps) {
+  const [values, setValues] = useState(defaultValues)
+
+  const handleChange = (field: string, value: any) => {
+    setValues((prev) => ({ ...prev, [field]: value }))
+  }
+
+  const handleCountChange = (increment: boolean) => {
+    setValues((prev) => ({
+      ...prev,
+      dailyPushCount: increment ? prev.dailyPushCount + 1 : Math.max(1, prev.dailyPushCount - 1),
+    }))
+  }
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="p-4 sm:p-6">
+          <div className="space-y-4">
+            {/* 任务名称 */}
+            <div className="space-y-2">
+              <Label htmlFor="taskName" className="flex items-center text-sm font-medium">
+                <span className="text-red-500 mr-1">*</span>任务名称:
+              </Label>
+              <Input
+                id="taskName"
+                value={values.name}
+                onChange={(e) => handleChange("name", e.target.value)}
+                placeholder="请输入任务名称"
+              />
+            </div>
+
+            {/* 允许推送的时间段 */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">允许推送的时间段:</Label>
+              <div className="flex items-center space-x-2">
+                <Input
+                  type="time"
+                  value={values.pushTimeStart}
+                  onChange={(e) => handleChange("pushTimeStart", e.target.value)}
+                  className="w-full"
+                />
+                <span className="text-gray-500">至</span>
+                <Input
+                  type="time"
+                  value={values.pushTimeEnd}
+                  onChange={(e) => handleChange("pushTimeEnd", e.target.value)}
+                  className="w-full"
+                />
+              </div>
+            </div>
+
+            {/* 每日推送 */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">每日推送:</Label>
+              <div className="flex items-center space-x-2">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  type="button"
+                  onClick={() => handleCountChange(false)}
+                  className="h-9 w-9"
+                >
+                  <Minus className="h-4 w-4" />
+                </Button>
+                <Input
+                  type="number"
+                  value={values.dailyPushCount}
+                  onChange={(e) => handleChange("dailyPushCount", Number.parseInt(e.target.value) || 1)}
+                  className="w-20 text-center"
+                  min="1"
+                />
+                <Button
+                  variant="outline"
+                  size="icon"
+                  type="button"
+                  onClick={() => handleCountChange(true)}
+                  className="h-9 w-9"
+                >
+                  <Plus className="h-4 w-4" />
+                </Button>
+                <span className="text-gray-500">条内容</span>
+              </div>
+            </div>
+
+            {/* 推送顺序 */}
+            <div className="space-y-2">
+              <Label className="text-sm font-medium">推送顺序:</Label>
+              <div className="flex">
+                <Button
+                  type="button"
+                  variant={values.pushOrder === "earliest" ? "default" : "outline"}
+                  className={`rounded-r-none flex-1 ${values.pushOrder === "earliest" ? "" : "text-gray-500"}`}
+                  onClick={() => handleChange("pushOrder", "earliest")}
+                >
+                  按最早
+                </Button>
+                <Button
+                  type="button"
+                  variant={values.pushOrder === "latest" ? "default" : "outline"}
+                  className={`rounded-l-none flex-1 ${values.pushOrder === "latest" ? "" : "text-gray-500"}`}
+                  onClick={() => handleChange("pushOrder", "latest")}
+                >
+                  按最新
+                </Button>
+              </div>
+            </div>
+
+            {/* 是否循环推送 */}
+            <div className="flex items-center justify-between">
+              <Label htmlFor="isLoopPush" className="flex items-center text-sm font-medium">
+                <span className="text-red-500 mr-1">*</span>是否循环推送:
+              </Label>
+              <div className="flex items-center space-x-2">
+                <span className={values.isLoopPush ? "text-gray-400" : "text-gray-900"}>否</span>
+                <Switch
+                  id="isLoopPush"
+                  checked={values.isLoopPush}
+                  onCheckedChange={(checked) => handleChange("isLoopPush", checked)}
+                />
+                <span className={values.isLoopPush ? "text-gray-900" : "text-gray-400"}>是</span>
+              </div>
+            </div>
+
+            {/* 是否立即推送 */}
+            <div className="flex items-center justify-between">
+              <Label htmlFor="isImmediatePush" className="flex items-center text-sm font-medium">
+                <span className="text-red-500 mr-1">*</span>是否立即推送:
+              </Label>
+              <div className="flex items-center space-x-2">
+                <span className={values.isImmediatePush ? "text-gray-400" : "text-gray-900"}>否</span>
+                <Switch
+                  id="isImmediatePush"
+                  checked={values.isImmediatePush}
+                  onCheckedChange={(checked) => handleChange("isImmediatePush", checked)}
+                />
+                <span className={values.isImmediatePush ? "text-gray-900" : "text-gray-400"}>是</span>
+              </div>
+            </div>
+            {values.isImmediatePush && (
+              <div className="bg-yellow-50 border border-yellow-200 rounded-md p-3 text-sm text-yellow-700">
+                如果启用，系统会把内容库里所有的内容按顺序推送到指定的社群
+              </div>
+            )}
+
+            {/* 是否启用 */}
+            <div className="flex items-center justify-between">
+              <Label htmlFor="isEnabled" className="flex items-center text-sm font-medium">
+                <span className="text-red-500 mr-1">*</span>是否启用:
+              </Label>
+              <div className="flex items-center space-x-2">
+                <span className={values.isEnabled ? "text-gray-400" : "text-gray-900"}>否</span>
+                <Switch
+                  id="isEnabled"
+                  checked={values.isEnabled}
+                  onCheckedChange={(checked) => handleChange("isEnabled", checked)}
+                />
+                <span className={values.isEnabled ? "text-gray-900" : "text-gray-400"}>是</span>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex space-x-2 justify-center sm:justify-end">
+        <Button type="button" onClick={() => onNext(values)} className="flex-1 sm:flex-none">
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={() => onSave(values)} className="flex-1 sm:flex-none">
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel} className="flex-1 sm:flex-none">
+          取消
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-push/components/content-selector.tsx b/Cunkebao/app/workspace/group-push/components/content-selector.tsx
new file mode 100644
index 00000000..ee2fd1ad
--- /dev/null
+++ b/Cunkebao/app/workspace/group-push/components/content-selector.tsx
@@ -0,0 +1,224 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Input } from "@/components/ui/input"
+import { Search, Plus, Trash2 } from "lucide-react"
+import type { ContentLibrary } from "@/types/group-push"
+
+// 模拟数据
+const mockContentLibraries: ContentLibrary[] = [
+  {
+    id: "1",
+    name: "测试11",
+    targets: [{ id: "t1", avatar: "/placeholder.svg?height=40&width=40" }],
+  },
+  {
+    id: "2",
+    name: "测试166666",
+    targets: [
+      { id: "t2", avatar: "/placeholder.svg?height=40&width=40" },
+      { id: "t3", avatar: "/placeholder.svg?height=40&width=40" },
+      { id: "t4", avatar: "/placeholder.svg?height=40&width=40" },
+    ],
+  },
+  {
+    id: "3",
+    name: "产品介绍",
+    targets: [
+      { id: "t5", avatar: "/placeholder.svg?height=40&width=40" },
+      { id: "t6", avatar: "/placeholder.svg?height=40&width=40" },
+    ],
+  },
+]
+
+interface ContentSelectorProps {
+  selectedLibraries: ContentLibrary[]
+  onLibrariesChange: (libraries: ContentLibrary[]) => void
+  onPrevious: () => void
+  onNext: () => void
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function ContentSelector({
+  selectedLibraries = [],
+  onLibrariesChange,
+  onPrevious,
+  onNext,
+  onSave,
+  onCancel,
+}: ContentSelectorProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState("")
+
+  const handleAddLibrary = (library: ContentLibrary) => {
+    if (!selectedLibraries.some((l) => l.id === library.id)) {
+      onLibrariesChange([...selectedLibraries, library])
+    }
+    setIsDialogOpen(false)
+  }
+
+  const handleRemoveLibrary = (libraryId: string) => {
+    onLibrariesChange(selectedLibraries.filter((library) => library.id !== libraryId))
+  }
+
+  const filteredLibraries = mockContentLibraries.filter((library) =>
+    library.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  )
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="p-4 sm:p-6">
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <span className="text-red-500 mr-1">*</span>
+                <span className="font-medium text-sm">选择内容库:</span>
+              </div>
+              <Button variant="default" size="sm" onClick={() => setIsDialogOpen(true)} className="flex items-center">
+                <Plus className="h-4 w-4 mr-1" />
+                选择内容库
+              </Button>
+            </div>
+
+            <div className="overflow-x-auto">
+              {selectedLibraries.length > 0 ? (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-16">序号</TableHead>
+                      <TableHead>内容库名称</TableHead>
+                      <TableHead>采集对象</TableHead>
+                      <TableHead className="w-20">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {selectedLibraries.map((library, index) => (
+                      <TableRow key={library.id}>
+                        <TableCell>{index + 1}</TableCell>
+                        <TableCell>{library.name}</TableCell>
+                        <TableCell>
+                          <div className="flex -space-x-2 flex-wrap">
+                            {library.targets.map((target) => (
+                              <div
+                                key={target.id}
+                                className="w-10 h-10 rounded-md overflow-hidden border-2 border-white"
+                              >
+                                <img
+                                  src={target.avatar || "/placeholder.svg?height=40&width=40"}
+                                  alt="Target"
+                                  className="w-full h-full object-cover"
+                                />
+                              </div>
+                            ))}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => handleRemoveLibrary(library.id)}
+                            className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                          >
+                            <Trash2 className="h-5 w-5" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              ) : (
+                <div className="border rounded-md p-8 text-center text-gray-500">请点击"选择内容库"按钮添加内容库</div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex space-x-2 justify-center sm:justify-end">
+        <Button type="button" variant="outline" onClick={onPrevious} className="flex-1 sm:flex-none">
+          上一步
+        </Button>
+        <Button type="button" onClick={onNext} className="flex-1 sm:flex-none">
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={onSave} className="flex-1 sm:flex-none">
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel} className="flex-1 sm:flex-none">
+          取消
+        </Button>
+      </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>选择内容库</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
+              <Input
+                placeholder="搜索内容库名称"
+                className="pl-8"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-16">序号</TableHead>
+                    <TableHead>内容库名称</TableHead>
+                    <TableHead>采集对象</TableHead>
+                    <TableHead className="w-20">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredLibraries.map((library, index) => (
+                    <TableRow key={library.id}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>{library.name}</TableCell>
+                      <TableCell>
+                        <div className="flex -space-x-2 flex-wrap">
+                          {library.targets.map((target) => (
+                            <div key={target.id} className="w-10 h-10 rounded-md overflow-hidden border-2 border-white">
+                              <img
+                                src={target.avatar || "/placeholder.svg?height=40&width=40"}
+                                alt="Target"
+                                className="w-full h-full object-cover"
+                              />
+                            </div>
+                          ))}
+                        </div>
+                      </TableCell>
+                      <TableCell>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleAddLibrary(library)}
+                          disabled={selectedLibraries.some((l) => l.id === library.id)}
+                          className="whitespace-nowrap"
+                        >
+                          {selectedLibraries.some((l) => l.id === library.id) ? "已选择" : "选择"}
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-push/components/friend-selector.tsx b/Cunkebao/app/workspace/group-push/components/friend-selector.tsx
new file mode 100644
index 00000000..d5ee141d
--- /dev/null
+++ b/Cunkebao/app/workspace/group-push/components/friend-selector.tsx
@@ -0,0 +1,347 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Search, Check, Smartphone } from "lucide-react"
+
+// 模拟数据
+const mockDevices = [
+  { id: "1", name: "iPhone 13 Pro", online: true },
+  { id: "2", name: "Xiaomi 12", online: true },
+  { id: "3", name: "Samsung Galaxy S22", online: false },
+  { id: "4", name: "OPPO Find X5", online: true },
+]
+
+const mockFriends = [
+  {
+    id: "1-friend-1",
+    deviceId: "1",
+    name: "张三",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["同事", "重要"],
+    region: "北京",
+  },
+  {
+    id: "1-friend-2",
+    deviceId: "1",
+    name: "李四",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["朋友"],
+    region: "上海",
+  },
+  {
+    id: "1-friend-3",
+    deviceId: "1",
+    name: "王五",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["家人"],
+    region: "广州",
+  },
+  {
+    id: "1-friend-4",
+    deviceId: "1",
+    name: "赵六",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["客户", "重要"],
+    region: "深圳",
+  },
+  {
+    id: "2-friend-1",
+    deviceId: "2",
+    name: "陈一",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["同学"],
+    region: "北京",
+  },
+  {
+    id: "2-friend-2",
+    deviceId: "2",
+    name: "杨二",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["朋友", "重要"],
+    region: "上海",
+  },
+  {
+    id: "2-friend-3",
+    deviceId: "2",
+    name: "刘三",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["同事"],
+    region: "广州",
+  },
+  {
+    id: "3-friend-1",
+    deviceId: "3",
+    name: "周七",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["客户"],
+    region: "北京",
+  },
+  {
+    id: "3-friend-2",
+    deviceId: "3",
+    name: "吴八",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["朋友"],
+    region: "上海",
+  },
+  {
+    id: "3-friend-3",
+    deviceId: "3",
+    name: "郑九",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["家人", "重要"],
+    region: "广州",
+  },
+  {
+    id: "4-friend-1",
+    deviceId: "4",
+    name: "冯十",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["同事"],
+    region: "深圳",
+  },
+  {
+    id: "4-friend-2",
+    deviceId: "4",
+    name: "蒋十一",
+    avatar: "/placeholder.svg?height=40&width=40",
+    tags: ["朋友"],
+    region: "北京",
+  },
+]
+
+interface Friend {
+  id: string
+  deviceId: string
+  name: string
+  avatar: string
+  tags: string[]
+  region: string
+}
+
+interface FriendSelectorProps {
+  onSelectionChange: (friends: Friend[]) => void
+  defaultSelectedFriendIds?: string[]
+}
+
+export function FriendSelector({ onSelectionChange, defaultSelectedFriendIds = [] }: FriendSelectorProps) {
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+  const [selectedFriendIds, setSelectedFriendIds] = useState<string[]>(defaultSelectedFriendIds)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedTag, setSelectedTag] = useState<string>("all")
+  const [selectedRegion, setSelectedRegion] = useState<string>("all")
+
+  // 获取所有可用的标签和地区
+  const allTags = Array.from(new Set(mockFriends.flatMap((friend) => friend.tags)))
+  const allRegions = Array.from(new Set(mockFriends.map((friend) => friend.region)))
+
+  // 根据选择的设备过滤好友
+  const filteredFriends = mockFriends
+    .filter((friend) => {
+      // 如果没有选择设备，显示所有好友
+      if (selectedDevices.length === 0) return true
+
+      // 只显示选中设备的好友
+      return selectedDevices.includes(friend.deviceId)
+    })
+    .filter((friend) => {
+      // 搜索过滤
+      if (searchQuery) {
+        return friend.name.toLowerCase().includes(searchQuery.toLowerCase())
+      }
+      return true
+    })
+    .filter((friend) => {
+      // 标签过滤
+      if (selectedTag !== "all") {
+        return friend.tags.includes(selectedTag)
+      }
+      return true
+    })
+    .filter((friend) => {
+      // 地区过滤
+      if (selectedRegion !== "all") {
+        return friend.region === selectedRegion
+      }
+      return true
+    })
+
+  // 当选择的好友ID变化时，通知父组件
+  useEffect(() => {
+    const selectedFriends = mockFriends.filter((friend) => selectedFriendIds.includes(friend.id))
+    onSelectionChange(selectedFriends)
+  }, [selectedFriendIds, onSelectionChange])
+
+  const toggleDeviceSelection = (deviceId: string) => {
+    setSelectedDevices((prev) => {
+      if (prev.includes(deviceId)) {
+        return prev.filter((id) => id !== deviceId)
+      } else {
+        return [...prev, deviceId]
+      }
+    })
+  }
+
+  const toggleFriendSelection = (friendId: string) => {
+    setSelectedFriendIds((prev) => {
+      if (prev.includes(friendId)) {
+        return prev.filter((id) => id !== friendId)
+      } else {
+        return [...prev, friendId]
+      }
+    })
+  }
+
+  const selectAllFriends = () => {
+    setSelectedFriendIds(filteredFriends.map((friend) => friend.id))
+  }
+
+  const deselectAllFriends = () => {
+    setSelectedFriendIds([])
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* 设备选择 */}
+      <div>
+        <Label className="mb-2 block">选择设备</Label>
+        <div className="flex flex-wrap gap-2">
+          {mockDevices.map((device) => (
+            <Button
+              key={device.id}
+              variant={selectedDevices.includes(device.id) ? "default" : "outline"}
+              size="sm"
+              onClick={() => toggleDeviceSelection(device.id)}
+              className="flex items-center gap-1"
+              disabled={!device.online}
+            >
+              <Smartphone className="h-4 w-4" />
+              {device.name}
+              {selectedDevices.includes(device.id) && <Check className="h-3 w-3 ml-1" />}
+              {!device.online && <span className="text-xs ml-1 text-gray-500">(离线)</span>}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {/* 好友筛选 */}
+      <div className="flex flex-wrap gap-3">
+        <div className="flex-1 min-w-[200px]">
+          <Label htmlFor="search" className="mb-2 block">
+            搜索好友
+          </Label>
+          <div className="relative">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-gray-400" />
+            <Input
+              id="search"
+              placeholder="输入好友名称"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-8"
+            />
+          </div>
+        </div>
+
+        <div className="w-40">
+          <Label htmlFor="tag-filter" className="mb-2 block">
+            标签筛选
+          </Label>
+          <Select value={selectedTag} onValueChange={setSelectedTag}>
+            <SelectTrigger id="tag-filter">
+              <SelectValue placeholder="选择标签" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部标签</SelectItem>
+              {allTags.map((tag) => (
+                <SelectItem key={tag} value={tag}>
+                  {tag}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="w-40">
+          <Label htmlFor="region-filter" className="mb-2 block">
+            地区筛选
+          </Label>
+          <Select value={selectedRegion} onValueChange={setSelectedRegion}>
+            <SelectTrigger id="region-filter">
+              <SelectValue placeholder="选择地区" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">全部地区</SelectItem>
+              {allRegions.map((region) => (
+                <SelectItem key={region} value={region}>
+                  {region}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* 好友列表 */}
+      <div>
+        <div className="flex justify-between items-center mb-2">
+          <Label className="font-medium">好友列表 ({filteredFriends.length})</Label>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={selectAllFriends}>
+              全选
+            </Button>
+            <Button variant="outline" size="sm" onClick={deselectAllFriends}>
+              取消全选
+            </Button>
+          </div>
+        </div>
+
+        <div className="border rounded-md overflow-hidden">
+          <div className="max-h-[300px] overflow-y-auto p-1">
+            {filteredFriends.length > 0 ? (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+                {filteredFriends.map((friend) => (
+                  <div
+                    key={friend.id}
+                    className={`flex items-center gap-2 p-2 rounded-md border ${
+                      selectedFriendIds.includes(friend.id) ? "bg-blue-50 border-blue-200" : "border-gray-200"
+                    }`}
+                  >
+                    <Checkbox
+                      id={`friend-${friend.id}`}
+                      checked={selectedFriendIds.includes(friend.id)}
+                      onCheckedChange={() => toggleFriendSelection(friend.id)}
+                    />
+                    <img src={friend.avatar || "/placeholder.svg"} alt={friend.name} className="w-8 h-8 rounded-full" />
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{friend.name}</div>
+                      <div className="text-xs text-gray-500 truncate">{friend.region}</div>
+                    </div>
+                    {friend.tags.length > 0 && (
+                      <div className="flex flex-wrap gap-1">
+                        {friend.tags.map((tag) => (
+                          <span key={tag} className="px-1.5 py-0.5 bg-gray-100 text-gray-700 rounded text-xs">
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <div className="text-center py-8 text-gray-500">没有找到符合条件的好友</div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className="text-sm text-gray-500">已选择 {selectedFriendIds.length} 位好友</div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-push/components/group-selector.tsx b/Cunkebao/app/workspace/group-push/components/group-selector.tsx
new file mode 100644
index 00000000..8072d7f9
--- /dev/null
+++ b/Cunkebao/app/workspace/group-push/components/group-selector.tsx
@@ -0,0 +1,254 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent } from "@/components/ui/card"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Search, Plus, Trash2 } from "lucide-react"
+import type { WechatGroup } from "@/types/group-push"
+
+// 模拟数据
+const mockGroups: WechatGroup[] = [
+  {
+    id: "1",
+    name: "快捷语",
+    avatar: "/placeholder.svg?height=40&width=40",
+    serviceAccount: {
+      id: "sa1",
+      name: "贝蒂喜品牌wxid_rtlwsjytjk1991",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+  },
+  {
+    id: "2",
+    name: "产品交流群",
+    avatar: "/placeholder.svg?height=40&width=40",
+    serviceAccount: {
+      id: "sa1",
+      name: "贝蒂喜品牌wxid_rtlwsjytjk1991",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+  },
+  {
+    id: "3",
+    name: "客户服务群",
+    avatar: "/placeholder.svg?height=40&width=40",
+    serviceAccount: {
+      id: "sa2",
+      name: "客服小助手wxid_abc123",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+  },
+]
+
+interface GroupSelectorProps {
+  selectedGroups: WechatGroup[]
+  onGroupsChange: (groups: WechatGroup[]) => void
+  onPrevious: () => void
+  onNext: () => void
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function GroupSelector({
+  selectedGroups = [],
+  onGroupsChange,
+  onPrevious,
+  onNext,
+  onSave,
+  onCancel,
+}: GroupSelectorProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [serviceFilter, setServiceFilter] = useState("")
+
+  const handleAddGroup = (group: WechatGroup) => {
+    if (!selectedGroups.some((g) => g.id === group.id)) {
+      onGroupsChange([...selectedGroups, group])
+    }
+    setIsDialogOpen(false)
+  }
+
+  const handleRemoveGroup = (groupId: string) => {
+    onGroupsChange(selectedGroups.filter((group) => group.id !== groupId))
+  }
+
+  const filteredGroups = mockGroups.filter((group) => {
+    const matchesSearch = group.name.toLowerCase().includes(searchTerm.toLowerCase())
+    const matchesService = !serviceFilter || group.serviceAccount.name.includes(serviceFilter)
+    return matchesSearch && matchesService
+  })
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardContent className="p-4 sm:p-6">
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <span className="text-red-500 mr-1">*</span>
+                <span className="font-medium text-sm">推送社群:</span>
+              </div>
+              <Button variant="default" size="sm" onClick={() => setIsDialogOpen(true)} className="flex items-center">
+                <Plus className="h-4 w-4 mr-1" />
+                选择微信聊天群
+              </Button>
+            </div>
+
+            <div className="overflow-x-auto">
+              {selectedGroups.length > 0 ? (
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead className="w-16">序号</TableHead>
+                      <TableHead>群信息</TableHead>
+                      <TableHead>推送客服</TableHead>
+                      <TableHead className="w-20">操作</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {selectedGroups.map((group, index) => (
+                      <TableRow key={group.id}>
+                        <TableCell>{index + 1}</TableCell>
+                        <TableCell>
+                          <div className="flex items-center space-x-2">
+                            <div className="w-8 h-8 rounded overflow-hidden flex-shrink-0">
+                              <img
+                                src={group.avatar || "/placeholder.svg?height=32&width=32"}
+                                alt={group.name}
+                                className="w-full h-full object-cover"
+                              />
+                            </div>
+                            <span className="text-sm truncate">{group.name}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <div className="flex items-center space-x-2">
+                            <div className="flex -space-x-2 flex-shrink-0">
+                              <div className="w-8 h-8 rounded-full overflow-hidden border-2 border-white">
+                                <img
+                                  src={group.serviceAccount.avatar || "/placeholder.svg?height=32&width=32"}
+                                  alt={group.serviceAccount.name}
+                                  className="w-full h-full object-cover"
+                                />
+                              </div>
+                            </div>
+                            <span className="text-xs truncate">{group.serviceAccount.name}</span>
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => handleRemoveGroup(group.id)}
+                            className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                          >
+                            <Trash2 className="h-5 w-5" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              ) : (
+                <div className="border rounded-md p-8 text-center text-gray-500">
+                  请点击"选择微信聊天群"按钮添加群组
+                </div>
+              )}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="flex space-x-2 justify-center sm:justify-end">
+        <Button type="button" variant="outline" onClick={onPrevious} className="flex-1 sm:flex-none">
+          上一步
+        </Button>
+        <Button type="button" onClick={onNext} className="flex-1 sm:flex-none">
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={onSave} className="flex-1 sm:flex-none">
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel} className="flex-1 sm:flex-none">
+          取消
+        </Button>
+      </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>选择微信聊天群</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
+                <Input
+                  placeholder="搜索群聊名称"
+                  className="pl-8"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </div>
+              <div className="sm:w-64">
+                <Input
+                  placeholder="按归属客服筛选"
+                  value={serviceFilter}
+                  onChange={(e) => setServiceFilter(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="w-16">序号</TableHead>
+                    <TableHead>群信息</TableHead>
+                    <TableHead>归属客服</TableHead>
+                    <TableHead className="w-20">操作</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredGroups.map((group, index) => (
+                    <TableRow key={group.id}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>
+                        <div className="flex items-center space-x-2">
+                          <div className="w-8 h-8 rounded overflow-hidden flex-shrink-0">
+                            <img
+                              src={group.avatar || "/placeholder.svg?height=32&width=32"}
+                              alt={group.name}
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                          <span className="text-sm truncate">{group.name}</span>
+                        </div>
+                      </TableCell>
+                      <TableCell className="truncate">{group.serviceAccount.name}</TableCell>
+                      <TableCell>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => handleAddGroup(group)}
+                          disabled={selectedGroups.some((g) => g.id === group.id)}
+                          className="whitespace-nowrap"
+                        >
+                          {selectedGroups.some((g) => g.id === group.id) ? "已选择" : "选择"}
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-push/components/message-editor.tsx b/Cunkebao/app/workspace/group-push/components/message-editor.tsx
new file mode 100644
index 00000000..31806de3
--- /dev/null
+++ b/Cunkebao/app/workspace/group-push/components/message-editor.tsx
@@ -0,0 +1,230 @@
+"use client"
+
+import { useState, useRef, type ChangeEvent } from "react"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { Input } from "@/components/ui/input"
+import { Image, Video, Link, X } from "lucide-react"
+
+interface MessageEditorProps {
+  onMessageChange: (message: {
+    text: string
+    images: File[]
+    video: File | null
+    link: string
+  }) => void
+  defaultValues?: {
+    text: string
+    images: string[]
+    video: string
+    link: string
+  }
+}
+
+export function MessageEditor({ onMessageChange, defaultValues }: MessageEditorProps) {
+  const [text, setText] = useState(defaultValues?.text || "")
+  const [images, setImages] = useState<File[]>([])
+  const [imageUrls, setImageUrls] = useState<string[]>(defaultValues?.images || [])
+  const [video, setVideo] = useState<File | null>(null)
+  const [videoUrl, setVideoUrl] = useState<string>(defaultValues?.video || "")
+  const [link, setLink] = useState(defaultValues?.link || "")
+
+  const imageInputRef = useRef<HTMLInputElement>(null)
+  const videoInputRef = useRef<HTMLInputElement>(null)
+
+  const handleTextChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const newText = e.target.value
+    if (newText.length <= 800) {
+      setText(newText)
+      onMessageChange({
+        text: newText,
+        images,
+        video,
+        link,
+      })
+    }
+  }
+
+  const handleImageUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || [])
+    if (files.length > 0) {
+      // 检查文件大小和数量限制
+      const validFiles = files.filter((file) => file.size <= 20 * 1024 * 1024) // 20MB
+      const newImages = [...images, ...validFiles].slice(0, 9) // 最多9张图片
+
+      setImages(newImages)
+
+      // 创建临时URL用于预览
+      const newImageUrls = newImages.map((file) => URL.createObjectURL(file))
+      setImageUrls(newImageUrls)
+
+      onMessageChange({
+        text,
+        images: newImages,
+        video,
+        link,
+      })
+    }
+  }
+
+  const handleVideoUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file && file.size <= 100 * 1024 * 1024) {
+      // 100MB
+      setVideo(file)
+      setVideoUrl(URL.createObjectURL(file))
+
+      onMessageChange({
+        text,
+        images,
+        video: file,
+        link,
+      })
+    }
+  }
+
+  const handleLinkChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newLink = e.target.value
+    setLink(newLink)
+
+    onMessageChange({
+      text,
+      images,
+      video,
+      link: newLink,
+    })
+  }
+
+  const removeImage = (index: number) => {
+    const newImages = [...images]
+    newImages.splice(index, 1)
+    setImages(newImages)
+
+    const newImageUrls = [...imageUrls]
+    newImageUrls.splice(index, 1)
+    setImageUrls(newImageUrls)
+
+    onMessageChange({
+      text,
+      images: newImages,
+      video,
+      link,
+    })
+  }
+
+  const removeVideo = () => {
+    setVideo(null)
+    setVideoUrl("")
+
+    onMessageChange({
+      text,
+      images,
+      video: null,
+      link,
+    })
+  }
+
+  return (
+    <div className="space-y-4 border rounded-md p-4">
+      <div>
+        <Textarea
+          placeholder="请输入消息内容，最多800字"
+          value={text}
+          onChange={handleTextChange}
+          className="min-h-[120px]"
+        />
+        <div className="text-xs text-gray-500 mt-1 text-right">{text.length}/800</div>
+      </div>
+
+      {/* 图片预览区域 */}
+      {imageUrls.length > 0 && (
+        <div className="grid grid-cols-3 gap-2">
+          {imageUrls.map((url, index) => (
+            <div key={index} className="relative group">
+              <img
+                src={url || "/placeholder.svg"}
+                alt={`上传的图片 ${index + 1}`}
+                className="h-24 w-full object-cover rounded-md"
+              />
+              <button
+                type="button"
+                onClick={() => removeImage(index)}
+                className="absolute top-1 right-1 bg-black bg-opacity-50 rounded-full p-1 text-white opacity-0 group-hover:opacity-100 transition-opacity"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 视频预览区域 */}
+      {videoUrl && (
+        <div className="relative group">
+          <video src={videoUrl} controls className="w-full h-48 object-cover rounded-md" />
+          <button
+            type="button"
+            onClick={removeVideo}
+            className="absolute top-2 right-2 bg-black bg-opacity-50 rounded-full p-1 text-white opacity-0 group-hover:opacity-100 transition-opacity"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      )}
+
+      {/* 链接输入区域 */}
+      {link && (
+        <div className="flex items-center gap-2 p-2 bg-gray-50 rounded-md">
+          <Link className="h-4 w-4 text-blue-500" />
+          <a href={link} target="_blank" rel="noopener noreferrer" className="text-blue-500 text-sm flex-1 truncate">
+            {link}
+          </a>
+        </div>
+      )}
+
+      {/* 工具栏 */}
+      <div className="flex items-center gap-2 pt-2 border-t">
+        <input
+          type="file"
+          ref={imageInputRef}
+          onChange={handleImageUpload}
+          accept="image/*"
+          multiple
+          className="hidden"
+        />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => imageInputRef.current?.click()}
+          disabled={images.length >= 9}
+        >
+          <Image className="h-4 w-4 mr-1" />
+          图片
+        </Button>
+
+        <input type="file" ref={videoInputRef} onChange={handleVideoUpload} accept="video/*" className="hidden" />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => videoInputRef.current?.click()}
+          disabled={!!video}
+        >
+          <Video className="h-4 w-4 mr-1" />
+          视频
+        </Button>
+
+        <div className="flex-1">
+          <Input type="url" placeholder="输入链接地址" value={link} onChange={handleLinkChange} className="h-9" />
+        </div>
+      </div>
+
+      <div className="text-xs text-gray-500">
+        <p>图片：最多9张，每张不超过20MB</p>
+        <p>视频：最多1个，不超过100MB</p>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-push/components/step-indicator.tsx b/Cunkebao/app/workspace/group-push/components/step-indicator.tsx
new file mode 100644
index 00000000..36b8c445
--- /dev/null
+++ b/Cunkebao/app/workspace/group-push/components/step-indicator.tsx
@@ -0,0 +1,81 @@
+import { cn } from "@/lib/utils"
+
+interface StepIndicatorProps {
+  currentStep: number
+  steps: { id: number; title: string; subtitle: string }[]
+}
+
+export function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
+  return (
+    <div className="mb-6 overflow-x-auto pb-2">
+      <div className="flex min-w-max">
+        {steps.map((step, index) => (
+          <div key={step.id} className="flex items-center">
+            <div className="flex flex-col items-center relative">
+              {/* 步骤圆圈 */}
+              <div
+                className={cn(
+                  "flex h-8 w-8 sm:h-10 sm:w-10 items-center justify-center rounded-full border-2 text-sm font-semibold",
+                  currentStep > step.id
+                    ? "border-green-500 bg-green-500 text-white"
+                    : currentStep === step.id
+                      ? "border-blue-500 bg-white text-blue-500"
+                      : "border-gray-300 bg-white text-gray-300",
+                )}
+              >
+                {currentStep > step.id ? (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                ) : (
+                  step.id
+                )}
+              </div>
+
+              {/* 步骤标题和描述 */}
+              <div className="mt-2 text-center w-full">
+                <div
+                  className={cn(
+                    "text-xs sm:text-sm font-medium",
+                    currentStep >= step.id ? "text-blue-500" : "text-gray-400",
+                  )}
+                >
+                  步骤 {step.id}
+                </div>
+                <div
+                  className={cn(
+                    "text-xs whitespace-nowrap",
+                    currentStep >= step.id ? "text-blue-500" : "text-gray-400",
+                  )}
+                >
+                  {step.subtitle}
+                </div>
+              </div>
+            </div>
+
+            {/* 连接线 */}
+            {index < steps.length - 1 && (
+              <div
+                className={cn(
+                  "h-0.5 w-8 sm:w-16 md:w-24 lg:w-32",
+                  currentStep > step.id ? "bg-green-500" : "bg-gray-300",
+                )}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-push/loading.tsx b/Cunkebao/app/workspace/group-push/loading.tsx
new file mode 100644
index 00000000..be7a735e
--- /dev/null
+++ b/Cunkebao/app/workspace/group-push/loading.tsx
@@ -0,0 +1,64 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export default function Loading() {
+  return (
+    <div className="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">
+            <Skeleton className="h-9 w-9 rounded-md" />
+            <Skeleton className="h-6 w-32" />
+          </div>
+          <Skeleton className="h-9 w-28" />
+        </div>
+      </header>
+
+      <div className="p-4">
+        <Card className="p-4 mb-4">
+          <div className="flex items-center space-x-2">
+            <Skeleton className="h-10 flex-1" />
+            <Skeleton className="h-10 w-10" />
+            <Skeleton className="h-10 w-10" />
+          </div>
+        </Card>
+
+        <div className="space-y-4">
+          {[1, 2, 3].map((i) => (
+            <Card key={i} className="p-4">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center space-x-2">
+                  <Skeleton className="h-5 w-32" />
+                  <Skeleton className="h-5 w-16" />
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Skeleton className="h-6 w-12" />
+                  <Skeleton className="h-8 w-8 rounded-md" />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-2 gap-4 mb-4">
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-full" />
+                </div>
+                <div className="space-y-2">
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-full" />
+                  <Skeleton className="h-4 w-full" />
+                </div>
+              </div>
+
+              <div className="border-t pt-4 flex justify-between">
+                <Skeleton className="h-4 w-32" />
+                <Skeleton className="h-4 w-32" />
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-push/new/loading.tsx b/Cunkebao/app/workspace/group-push/new/loading.tsx
new file mode 100644
index 00000000..738f7270
--- /dev/null
+++ b/Cunkebao/app/workspace/group-push/new/loading.tsx
@@ -0,0 +1,85 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export default function Loading() {
+  return (
+    <div className="container mx-auto py-4 px-4 sm:px-6 md:py-6">
+      <div className="flex items-center mb-6">
+        <Skeleton className="h-9 w-9 rounded-md mr-2" />
+        <Skeleton className="h-7 w-48" />
+      </div>
+
+      <div className="flex justify-between mb-8">
+        {[1, 2, 3, 4].map((i) => (
+          <div key={i} className="flex items-center">
+            <div className="flex flex-col items-center relative">
+              <Skeleton className="h-10 w-10 rounded-full" />
+              <div className="mt-2 text-center">
+                <Skeleton className="h-4 w-16 mt-2" />
+                <Skeleton className="h-3 w-20 mt-1" />
+              </div>
+            </div>
+            {i < 4 && <Skeleton className="h-0.5 w-16 md:w-24 lg:w-32 mx-1" />}
+          </div>
+        ))}
+      </div>
+
+      <Card>
+        <div className="p-6 space-y-6">
+          <div className="space-y-4">
+            <Skeleton className="h-5 w-32" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+
+          <div className="space-y-4">
+            <Skeleton className="h-5 w-40" />
+            <div className="flex space-x-2">
+              <Skeleton className="h-10 flex-1" />
+              <Skeleton className="h-10 flex-1" />
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <Skeleton className="h-5 w-32" />
+            <div className="flex items-center space-x-2">
+              <Skeleton className="h-10 w-10" />
+              <Skeleton className="h-10 w-20" />
+              <Skeleton className="h-10 w-10" />
+              <Skeleton className="h-5 w-16" />
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <Skeleton className="h-5 w-32" />
+            <div className="flex">
+              <Skeleton className="h-10 flex-1" />
+              <Skeleton className="h-10 flex-1" />
+            </div>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-5 w-40" />
+            <Skeleton className="h-6 w-12" />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-5 w-40" />
+            <Skeleton className="h-6 w-12" />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-5 w-40" />
+            <Skeleton className="h-6 w-12" />
+          </div>
+        </div>
+      </Card>
+
+      <div className="flex space-x-2 justify-end mt-6">
+        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-24" />
+        <Skeleton className="h-10 w-24" />
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-push/new/page.tsx b/Cunkebao/app/workspace/group-push/new/page.tsx
new file mode 100644
index 00000000..e989b88e
--- /dev/null
+++ b/Cunkebao/app/workspace/group-push/new/page.tsx
@@ -0,0 +1,139 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ArrowLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { StepIndicator } from "../components/step-indicator"
+import { BasicSettings } from "../components/basic-settings"
+import { GroupSelector } from "../components/group-selector"
+import { ContentSelector } from "../components/content-selector"
+import type { WechatGroup, ContentLibrary } from "@/types/group-push"
+import { useToast } from "@/components/ui/use-toast"
+
+const steps = [
+  { id: 1, title: "步骤 1", subtitle: "基础设置" },
+  { id: 2, title: "步骤 2", subtitle: "选择社群" },
+  { id: 3, title: "步骤 3", subtitle: "选择内容库" },
+  { id: 4, title: "步骤 4", subtitle: "京东联盟" },
+]
+
+export default function NewGroupPushPage() {
+  const router = useRouter()
+  const { toast } = useToast()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [formData, setFormData] = useState({
+    name: "",
+    pushTimeStart: "06:00",
+    pushTimeEnd: "23:59",
+    dailyPushCount: 20,
+    pushOrder: "latest" as "earliest" | "latest",
+    isLoopPush: false,
+    isImmediatePush: false,
+    isEnabled: false,
+    groups: [] as WechatGroup[],
+    contentLibraries: [] as ContentLibrary[],
+  })
+
+  const handleBasicSettingsNext = (values: any) => {
+    setFormData((prev) => ({ ...prev, ...values }))
+    setCurrentStep(2)
+  }
+
+  const handleGroupsChange = (groups: WechatGroup[]) => {
+    setFormData((prev) => ({ ...prev, groups }))
+  }
+
+  const handleLibrariesChange = (contentLibraries: ContentLibrary[]) => {
+    setFormData((prev) => ({ ...prev, contentLibraries }))
+  }
+
+  const handleSave = () => {
+    // 这里可以添加保存逻辑，例如API调用
+    toast({
+      title: "保存成功",
+      description: `社群推送任务"${formData.name || "未命名任务"}"已保存`,
+    })
+    router.push("/workspace/group-push")
+  }
+
+  const handleCancel = () => {
+    router.push("/workspace/group-push")
+  }
+
+  return (
+    <div className="container mx-auto py-4 px-4 sm:px-6 md:py-6">
+      <div className="flex items-center mb-6">
+        <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/group-push")} className="mr-2">
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <h1 className="text-xl font-bold">新建社群推送任务</h1>
+      </div>
+
+      <StepIndicator currentStep={currentStep} steps={steps} />
+
+      <div className="mt-8">
+        {currentStep === 1 && (
+          <BasicSettings
+            defaultValues={{
+              name: formData.name,
+              pushTimeStart: formData.pushTimeStart,
+              pushTimeEnd: formData.pushTimeEnd,
+              dailyPushCount: formData.dailyPushCount,
+              pushOrder: formData.pushOrder,
+              isLoopPush: formData.isLoopPush,
+              isImmediatePush: formData.isImmediatePush,
+              isEnabled: formData.isEnabled,
+            }}
+            onNext={handleBasicSettingsNext}
+            onSave={handleSave}
+            onCancel={handleCancel}
+          />
+        )}
+
+        {currentStep === 2 && (
+          <GroupSelector
+            selectedGroups={formData.groups}
+            onGroupsChange={handleGroupsChange}
+            onPrevious={() => setCurrentStep(1)}
+            onNext={() => setCurrentStep(3)}
+            onSave={handleSave}
+            onCancel={handleCancel}
+          />
+        )}
+
+        {currentStep === 3 && (
+          <ContentSelector
+            selectedLibraries={formData.contentLibraries}
+            onLibrariesChange={handleLibrariesChange}
+            onPrevious={() => setCurrentStep(2)}
+            onNext={() => setCurrentStep(4)}
+            onSave={handleSave}
+            onCancel={handleCancel}
+          />
+        )}
+
+        {currentStep === 4 && (
+          <div className="space-y-6">
+            <div className="border rounded-md p-8 text-center text-gray-500">
+              京东联盟设置（此步骤为占位，实际功能待开发）
+            </div>
+
+            <div className="flex space-x-2 justify-center sm:justify-end">
+              <Button type="button" variant="outline" onClick={() => setCurrentStep(3)} className="flex-1 sm:flex-none">
+                上一步
+              </Button>
+              <Button type="button" onClick={handleSave} className="flex-1 sm:flex-none">
+                完成
+              </Button>
+              <Button type="button" variant="outline" onClick={handleCancel} className="flex-1 sm:flex-none">
+                取消
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-push/page.tsx b/Cunkebao/app/workspace/group-push/page.tsx
new file mode 100644
index 00000000..0580e5e2
--- /dev/null
+++ b/Cunkebao/app/workspace/group-push/page.tsx
@@ -0,0 +1,255 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Switch } from "@/components/ui/switch"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { PlusCircle, MoreVertical, Edit, Trash2, ArrowLeft, Clock, Search, Filter, RefreshCw } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+
+// 模拟数据
+const mockTasks = [
+  {
+    id: "1",
+    name: "社群推送测试",
+    pushTimeRange: "06:00 - 23:59",
+    dailyPushCount: 20,
+    pushOrder: "latest",
+    isLoopPush: false,
+    isEnabled: true,
+    groupCount: 3,
+    contentLibraryCount: 2,
+    createdAt: "2025-03-15 14:30",
+    lastPushTime: "2025-03-20 10:25",
+    totalPushCount: 245,
+  },
+  {
+    id: "2",
+    name: "产品更新推送",
+    pushTimeRange: "09:00 - 21:00",
+    dailyPushCount: 15,
+    pushOrder: "earliest",
+    isLoopPush: true,
+    isEnabled: false,
+    groupCount: 5,
+    contentLibraryCount: 1,
+    createdAt: "2025-03-10 10:15",
+    lastPushTime: "2025-03-19 16:45",
+    totalPushCount: 128,
+  },
+  {
+    id: "3",
+    name: "新客户欢迎",
+    pushTimeRange: "08:00 - 22:00",
+    dailyPushCount: 10,
+    pushOrder: "latest",
+    isLoopPush: true,
+    isEnabled: true,
+    groupCount: 2,
+    contentLibraryCount: 1,
+    createdAt: "2025-03-05 09:20",
+    lastPushTime: "2025-03-18 11:30",
+    totalPushCount: 87,
+  },
+]
+
+export default function GroupPushPage() {
+  const router = useRouter()
+  const [tasks, setTasks] = useState(mockTasks)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [taskToDelete, setTaskToDelete] = useState<string | null>(null)
+
+  const handleDelete = (id: string) => {
+    setTaskToDelete(id)
+    setDeleteDialogOpen(true)
+  }
+
+  const confirmDelete = () => {
+    if (taskToDelete) {
+      setTasks(tasks.filter((task) => task.id !== taskToDelete))
+      setTaskToDelete(null)
+    }
+    setDeleteDialogOpen(false)
+  }
+
+  const handleToggleStatus = (id: string, isEnabled: boolean) => {
+    setTasks(tasks.map((task) => (task.id === id ? { ...task, isEnabled } : task)))
+  }
+
+  const filteredTasks = tasks.filter((task) => task.name.toLowerCase().includes(searchTerm.toLowerCase()))
+
+  return (
+    <div className="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.push("/workspace")}>
+              <ArrowLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">社群推送</h1>
+          </div>
+          <Link href="/workspace/group-push/new">
+            <Button>
+              <PlusCircle 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"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(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="space-y-4">
+          {filteredTasks.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.isEnabled ? "success" : "secondary"}>
+                    {task.isEnabled ? "进行中" : "已暂停"}
+                  </Badge>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <Switch
+                    checked={task.isEnabled}
+                    onCheckedChange={(checked) => handleToggleStatus(task.id, checked)}
+                  />
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="sm">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <Link href={`/workspace/group-push/${task.id}`}>
+                        <DropdownMenuItem>
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="mr-2"
+                          >
+                            <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
+                            <circle cx="12" cy="12" r="3"></circle>
+                          </svg>
+                          查看
+                        </DropdownMenuItem>
+                      </Link>
+                      <Link href={`/workspace/group-push/${task.id}/edit`}>
+                        <DropdownMenuItem>
+                          <Edit className="h-4 w-4 mr-2" />
+                          编辑
+                        </DropdownMenuItem>
+                      </Link>
+                      <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.groupCount} 个</div>
+                  <div>内容库：{task.contentLibraryCount} 个</div>
+                  <div>推送时间：{task.pushTimeRange}</div>
+                </div>
+                <div className="text-sm text-gray-500">
+                  <div>每日推送：{task.dailyPushCount} 条</div>
+                  <div>已推送：{task.totalPushCount} 条</div>
+                  <div>推送顺序：{task.pushOrder === "latest" ? "按最新" : "按最早"}</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.lastPushTime}
+                </div>
+                <div>创建时间：{task.createdAt}</div>
+              </div>
+            </Card>
+          ))}
+        </div>
+
+        {/* 空状态 */}
+        {filteredTasks.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <div className="bg-gray-100 p-4 rounded-full mb-4">
+              <Clock className="h-10 w-10 text-gray-400" />
+            </div>
+            <h3 className="text-lg font-medium text-gray-900 mb-1">暂无社群推送任务</h3>
+            <p className="text-gray-500 mb-4">点击"新建任务"按钮创建您的第一个社群推送任务</p>
+            <Link href="/workspace/group-push/new">
+              <Button>
+                <PlusCircle className="h-4 w-4 mr-2" />
+                新建任务
+              </Button>
+            </Link>
+          </div>
+        )}
+      </div>
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>确认删除</DialogTitle>
+            <DialogDescription>您确定要删除这个社群推送任务吗？此操作无法撤销。</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
+              取消
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              删除
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-sync/auto-group/loading.tsx b/Cunkebao/app/workspace/group-sync/auto-group/loading.tsx
new file mode 100644
index 00000000..472f8029
--- /dev/null
+++ b/Cunkebao/app/workspace/group-sync/auto-group/loading.tsx
@@ -0,0 +1,52 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export default function Loading() {
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen p-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="h-8 mb-8">
+          <Skeleton className="h-full w-full" />
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-6">
+          <Card className="p-6">
+            <Skeleton className="h-6 w-1/3 mb-6" />
+
+            <div className="space-y-4">
+              <Skeleton className="h-5 w-1/4" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+
+            <div className="space-y-4 mt-4">
+              <Skeleton className="h-5 w-1/4" />
+              <Skeleton className="h-24 w-full" />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4 mt-4">
+              <div>
+                <Skeleton className="h-5 w-1/2 mb-2" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+              <div>
+                <Skeleton className="h-5 w-1/2 mb-2" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+            </div>
+
+            <Skeleton className="h-10 w-full mt-6" />
+          </Card>
+
+          <Card className="p-6">
+            <Skeleton className="h-6 w-1/3 mb-6" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full mt-2" />
+            <Skeleton className="h-4 w-full mt-2" />
+            <Skeleton className="h-4 w-3/4 mt-2" />
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-sync/auto-group/page.tsx b/Cunkebao/app/workspace/group-sync/auto-group/page.tsx
new file mode 100644
index 00000000..95ad0d0c
--- /dev/null
+++ b/Cunkebao/app/workspace/group-sync/auto-group/page.tsx
@@ -0,0 +1,69 @@
+"use client"
+import { ChevronLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useRouter } from "next/navigation"
+import { AutoGroupCreator } from "../components/auto-group-creator"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+export default function AutoGroupPage() {
+  const router = useRouter()
+
+  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 p-4">
+          <Button variant="ghost" size="icon" onClick={() => router.back()}>
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <h1 className="text-lg font-medium ml-3">自动建群</h1>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-4xl mx-auto">
+        <Tabs defaultValue="create">
+          <TabsList className="grid w-full max-w-md grid-cols-2 mb-6">
+            <TabsTrigger value="create">创建群聊</TabsTrigger>
+            <TabsTrigger value="history">历史记录</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="create">
+            <div className="grid md:grid-cols-2 gap-6">
+              <AutoGroupCreator />
+
+              <Card>
+                <CardHeader>
+                  <CardTitle>建群说明</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="text-sm space-y-2">
+                    <p>自动建群功能可以帮助您快速创建微信群聊，并自动邀请符合条件的好友加入。</p>
+                    <p>使用步骤：</p>
+                    <ol className="list-decimal pl-5 space-y-1">
+                      <li>设置群聊名称和欢迎语</li>
+                      <li>设置群人数上限和群类型</li>
+                      <li>添加群标签，用于筛选邀请的好友</li>
+                      <li>点击创建群聊按钮完成创建</li>
+                    </ol>
+                    <p className="mt-4 text-amber-600">
+                      注意：建群需要至少一个在线的微信设备，请确保您的设备已连接并正常运行。
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="history">
+            <Card>
+              <CardContent className="p-6">
+                <div className="text-center py-12 text-gray-500">暂无建群记录</div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-sync/components/auto-group-creator.tsx b/Cunkebao/app/workspace/group-sync/components/auto-group-creator.tsx
new file mode 100644
index 00000000..65903fd0
--- /dev/null
+++ b/Cunkebao/app/workspace/group-sync/components/auto-group-creator.tsx
@@ -0,0 +1,151 @@
+"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 { Badge } from "@/components/ui/badge"
+import { Plus, X, Users } from "lucide-react"
+import { useToast } from "@/components/ui/use-toast"
+
+export function AutoGroupCreator() {
+  const { toast } = useToast()
+  const [groupName, setGroupName] = useState("")
+  const [welcomeMessage, setWelcomeMessage] = useState("欢迎加入我们的群聊！")
+  const [groupSize, setGroupSize] = useState(50)
+  const [groupType, setGroupType] = useState("business")
+  const [tags, setTags] = useState<string[]>([])
+  const [tagInput, setTagInput] = useState("")
+
+  const handleAddTag = () => {
+    if (tagInput && !tags.includes(tagInput)) {
+      setTags([...tags, tagInput])
+      setTagInput("")
+    }
+  }
+
+  const handleRemoveTag = (tag: string) => {
+    setTags(tags.filter((t) => t !== tag))
+  }
+
+  const handleCreateGroup = () => {
+    if (!groupName) {
+      toast({
+        title: "请输入群名称",
+        variant: "destructive",
+      })
+      return
+    }
+
+    // 模拟创建群聊
+    toast({
+      title: "群聊创建成功",
+      description: `已成功创建"${groupName}"群聊`,
+    })
+
+    // 重置表单
+    setGroupName("")
+    setWelcomeMessage("欢迎加入我们的群聊！")
+    setGroupSize(50)
+    setGroupType("business")
+    setTags([])
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center">
+          <Users className="mr-2 h-5 w-5" />
+          自动建群
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="group-name">群聊名称</Label>
+          <Input
+            id="group-name"
+            placeholder="请输入群聊名称"
+            value={groupName}
+            onChange={(e) => setGroupName(e.target.value)}
+          />
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="welcome-message">欢迎语</Label>
+          <Textarea
+            id="welcome-message"
+            placeholder="请输入群欢迎语"
+            value={welcomeMessage}
+            onChange={(e) => setWelcomeMessage(e.target.value)}
+            rows={3}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <Label htmlFor="group-size">群人数上限</Label>
+            <Input
+              id="group-size"
+              type="number"
+              min={1}
+              max={500}
+              value={groupSize}
+              onChange={(e) => setGroupSize(Number.parseInt(e.target.value))}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="group-type">群类型</Label>
+            <Select value={groupType} onValueChange={setGroupType}>
+              <SelectTrigger id="group-type">
+                <SelectValue placeholder="选择群类型" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="business">业务群</SelectItem>
+                <SelectItem value="customer">客户群</SelectItem>
+                <SelectItem value="team">团队群</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label>群标签</Label>
+          <div className="flex space-x-2">
+            <Input
+              placeholder="添加标签"
+              value={tagInput}
+              onChange={(e) => setTagInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault()
+                  handleAddTag()
+                }
+              }}
+            />
+            <Button type="button" size="sm" onClick={handleAddTag}>
+              <Plus className="h-4 w-4" />
+            </Button>
+          </div>
+
+          <div className="flex flex-wrap gap-2 mt-2">
+            {tags.map((tag) => (
+              <Badge key={tag} variant="secondary" className="flex items-center gap-1">
+                {tag}
+                <X className="h-3 w-3 cursor-pointer" onClick={() => handleRemoveTag(tag)} />
+              </Badge>
+            ))}
+          </div>
+        </div>
+
+        <Button className="w-full mt-4" onClick={handleCreateGroup}>
+          创建群聊
+        </Button>
+      </CardContent>
+    </Card>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-sync/components/basic-settings.tsx b/Cunkebao/app/workspace/group-sync/components/basic-settings.tsx
new file mode 100644
index 00000000..61ae6cd4
--- /dev/null
+++ b/Cunkebao/app/workspace/group-sync/components/basic-settings.tsx
@@ -0,0 +1,196 @@
+"use client"
+
+import { useState } from "react"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Button } from "@/components/ui/button"
+import { Minus, Plus } from "lucide-react"
+
+interface BasicSettingsProps {
+  defaultValues?: {
+    name: string
+    pushTimeStart: string
+    pushTimeEnd: string
+    dailyPushCount: number
+    pushOrder: "earliest" | "latest"
+    isLoopPush: boolean
+    isImmediatePush: boolean
+    isEnabled: boolean
+  }
+  onNext: (values: any) => void
+  onSave: (values: any) => void
+  onCancel: () => void
+}
+
+export function BasicSettings({
+  defaultValues = {
+    name: "",
+    pushTimeStart: "06:00",
+    pushTimeEnd: "23:59",
+    dailyPushCount: 20,
+    pushOrder: "latest",
+    isLoopPush: false,
+    isImmediatePush: false,
+    isEnabled: false,
+  },
+  onNext,
+  onSave,
+  onCancel,
+}: BasicSettingsProps) {
+  const [values, setValues] = useState(defaultValues)
+
+  const handleChange = (field: string, value: any) => {
+    setValues((prev) => ({ ...prev, [field]: value }))
+  }
+
+  const handleCountChange = (increment: boolean) => {
+    setValues((prev) => ({
+      ...prev,
+      dailyPushCount: increment ? prev.dailyPushCount + 1 : Math.max(1, prev.dailyPushCount - 1),
+    }))
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <div className="grid gap-2">
+          <Label htmlFor="taskName" className="flex items-center">
+            <span className="text-red-500 mr-1">*</span>任务名称:
+          </Label>
+          <Input
+            id="taskName"
+            value={values.name}
+            onChange={(e) => handleChange("name", e.target.value)}
+            placeholder="请输入任务名称"
+            className="max-w-md"
+          />
+        </div>
+
+        <div className="grid gap-2">
+          <Label className="flex items-center">允许推送的时间段:</Label>
+          <div className="flex items-center space-x-2 max-w-md">
+            <Input
+              type="time"
+              value={values.pushTimeStart}
+              onChange={(e) => handleChange("pushTimeStart", e.target.value)}
+              className="w-32"
+            />
+            <span>至</span>
+            <Input
+              type="time"
+              value={values.pushTimeEnd}
+              onChange={(e) => handleChange("pushTimeEnd", e.target.value)}
+              className="w-32"
+            />
+          </div>
+        </div>
+
+        <div className="grid gap-2">
+          <Label className="flex items-center">每日推送:</Label>
+          <div className="flex items-center space-x-2 max-w-md">
+            <Button variant="outline" size="icon" type="button" onClick={() => handleCountChange(false)}>
+              <Minus className="h-4 w-4" />
+            </Button>
+            <Input
+              type="number"
+              value={values.dailyPushCount}
+              onChange={(e) => handleChange("dailyPushCount", Number.parseInt(e.target.value) || 1)}
+              className="w-20 text-center"
+              min="1"
+            />
+            <Button variant="outline" size="icon" type="button" onClick={() => handleCountChange(true)}>
+              <Plus className="h-4 w-4" />
+            </Button>
+            <span>条内容</span>
+          </div>
+        </div>
+
+        <div className="grid gap-2">
+          <Label className="flex items-center">推送顺序:</Label>
+          <div className="flex items-center space-x-2 max-w-md">
+            <div className="flex">
+              <Button
+                type="button"
+                variant={values.pushOrder === "earliest" ? "default" : "outline"}
+                className={`rounded-r-none ${values.pushOrder === "earliest" ? "" : "text-gray-500"}`}
+                onClick={() => handleChange("pushOrder", "earliest")}
+              >
+                按最早
+              </Button>
+              <Button
+                type="button"
+                variant={values.pushOrder === "latest" ? "default" : "outline"}
+                className={`rounded-l-none ${values.pushOrder === "latest" ? "" : "text-gray-500"}`}
+                onClick={() => handleChange("pushOrder", "latest")}
+              >
+                按最新
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid gap-2">
+          <Label htmlFor="isLoopPush" className="flex items-center">
+            <span className="text-red-500 mr-1">*</span>是否循环推送:
+          </Label>
+          <div className="flex items-center space-x-2">
+            <span className={values.isLoopPush ? "text-gray-400" : "text-gray-900"}>否</span>
+            <Switch
+              id="isLoopPush"
+              checked={values.isLoopPush}
+              onCheckedChange={(checked) => handleChange("isLoopPush", checked)}
+            />
+            <span className={values.isLoopPush ? "text-gray-900" : "text-gray-400"}>是</span>
+          </div>
+        </div>
+
+        <div className="grid gap-2">
+          <Label htmlFor="isImmediatePush" className="flex items-center">
+            <span className="text-red-500 mr-1">*</span>是否立即推送:
+          </Label>
+          <div className="flex items-center space-x-2">
+            <span className={values.isImmediatePush ? "text-gray-400" : "text-gray-900"}>否</span>
+            <Switch
+              id="isImmediatePush"
+              checked={values.isImmediatePush}
+              onCheckedChange={(checked) => handleChange("isImmediatePush", checked)}
+            />
+            <span className={values.isImmediatePush ? "text-gray-900" : "text-gray-400"}>是</span>
+          </div>
+          {values.isImmediatePush && (
+            <p className="text-sm text-gray-500">如果启用，系统会把内容库里所有的内容按顺序推送到指定的社群</p>
+          )}
+        </div>
+
+        <div className="grid gap-2">
+          <Label htmlFor="isEnabled" className="flex items-center">
+            <span className="text-red-500 mr-1">*</span>是否启用:
+          </Label>
+          <div className="flex items-center space-x-2">
+            <span className={values.isEnabled ? "text-gray-400" : "text-gray-900"}>否</span>
+            <Switch
+              id="isEnabled"
+              checked={values.isEnabled}
+              onCheckedChange={(checked) => handleChange("isEnabled", checked)}
+            />
+            <span className={values.isEnabled ? "text-gray-900" : "text-gray-400"}>是</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex space-x-2">
+        <Button type="button" onClick={() => onNext(values)}>
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={() => onSave(values)}>
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel}>
+          取消
+        </Button>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-sync/components/content-selector.tsx b/Cunkebao/app/workspace/group-sync/components/content-selector.tsx
new file mode 100644
index 00000000..f2297c70
--- /dev/null
+++ b/Cunkebao/app/workspace/group-sync/components/content-selector.tsx
@@ -0,0 +1,211 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Input } from "@/components/ui/input"
+import { Search, Plus, Trash2 } from "lucide-react"
+import type { ContentLibrary } from "@/types/group-sync"
+
+// 模拟数据
+const mockContentLibraries: ContentLibrary[] = [
+  {
+    id: "1",
+    name: "测试11",
+    targets: [{ id: "t1", avatar: "/placeholder.svg?height=40&width=40" }],
+  },
+  {
+    id: "2",
+    name: "测试166666",
+    targets: [
+      { id: "t2", avatar: "/placeholder.svg?height=40&width=40" },
+      { id: "t3", avatar: "/placeholder.svg?height=40&width=40" },
+      { id: "t4", avatar: "/placeholder.svg?height=40&width=40" },
+    ],
+  },
+  {
+    id: "3",
+    name: "产品介绍",
+    targets: [
+      { id: "t5", avatar: "/placeholder.svg?height=40&width=40" },
+      { id: "t6", avatar: "/placeholder.svg?height=40&width=40" },
+    ],
+  },
+]
+
+interface ContentSelectorProps {
+  selectedLibraries: ContentLibrary[]
+  onLibrariesChange: (libraries: ContentLibrary[]) => void
+  onPrevious: () => void
+  onNext: () => void
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function ContentSelector({
+  selectedLibraries = [],
+  onLibrariesChange,
+  onPrevious,
+  onNext,
+  onSave,
+  onCancel,
+}: ContentSelectorProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState("")
+
+  const handleAddLibrary = (library: ContentLibrary) => {
+    if (!selectedLibraries.some((l) => l.id === library.id)) {
+      onLibrariesChange([...selectedLibraries, library])
+    }
+    setIsDialogOpen(false)
+  }
+
+  const handleRemoveLibrary = (libraryId: string) => {
+    onLibrariesChange(selectedLibraries.filter((library) => library.id !== libraryId))
+  }
+
+  const filteredLibraries = mockContentLibraries.filter((library) =>
+    library.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  )
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <span className="text-red-500 mr-1">*</span>
+            <span className="font-medium">选择内容库:</span>
+          </div>
+          <Button variant="default" size="sm" onClick={() => setIsDialogOpen(true)} className="flex items-center">
+            <Plus className="h-4 w-4 mr-1" />
+            选择内容库
+          </Button>
+        </div>
+
+        {selectedLibraries.length > 0 ? (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-16">序号</TableHead>
+                <TableHead>内容库名称</TableHead>
+                <TableHead>采集对象</TableHead>
+                <TableHead className="w-20">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {selectedLibraries.map((library, index) => (
+                <TableRow key={library.id}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>{library.name}</TableCell>
+                  <TableCell>
+                    <div className="flex -space-x-2">
+                      {library.targets.map((target) => (
+                        <div key={target.id} className="w-10 h-10 rounded-md overflow-hidden border-2 border-white">
+                          <img
+                            src={target.avatar || "/placeholder.svg?height=40&width=40"}
+                            alt="Target"
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => handleRemoveLibrary(library.id)}
+                      className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                    >
+                      <Trash2 className="h-5 w-5" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : (
+          <div className="border rounded-md p-8 text-center text-gray-500">请点击"选择内容库"按钮添加内容库</div>
+        )}
+      </div>
+
+      <div className="flex space-x-2">
+        <Button type="button" variant="outline" onClick={onPrevious}>
+          上一步
+        </Button>
+        <Button type="button" onClick={onNext}>
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={onSave}>
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel}>
+          取消
+        </Button>
+      </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>选择内容库</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="relative">
+              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
+              <Input
+                placeholder="搜索内容库名称"
+                className="pl-8"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-16">序号</TableHead>
+                  <TableHead>内容库名称</TableHead>
+                  <TableHead>采集对象</TableHead>
+                  <TableHead className="w-20">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredLibraries.map((library, index) => (
+                  <TableRow key={library.id}>
+                    <TableCell>{index + 1}</TableCell>
+                    <TableCell>{library.name}</TableCell>
+                    <TableCell>
+                      <div className="flex -space-x-2">
+                        {library.targets.map((target) => (
+                          <div key={target.id} className="w-10 h-10 rounded-md overflow-hidden border-2 border-white">
+                            <img
+                              src={target.avatar || "/placeholder.svg?height=40&width=40"}
+                              alt="Target"
+                              className="w-full h-full object-cover"
+                            />
+                          </div>
+                        ))}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleAddLibrary(library)}
+                        disabled={selectedLibraries.some((l) => l.id === library.id)}
+                      >
+                        {selectedLibraries.some((l) => l.id === library.id) ? "已选择" : "选择"}
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-sync/components/group-selector.tsx b/Cunkebao/app/workspace/group-sync/components/group-selector.tsx
new file mode 100644
index 00000000..c09785ed
--- /dev/null
+++ b/Cunkebao/app/workspace/group-sync/components/group-selector.tsx
@@ -0,0 +1,242 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Search, Plus, Trash2 } from "lucide-react"
+import type { WechatGroup } from "@/types/group-sync"
+
+// 模拟数据
+const mockGroups: WechatGroup[] = [
+  {
+    id: "1",
+    name: "快捷语",
+    avatar: "/placeholder.svg?height=40&width=40",
+    serviceAccount: {
+      id: "sa1",
+      name: "贝蒂喜品牌wxid_rtlwsjytjk1991",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+  },
+  {
+    id: "2",
+    name: "产品交流群",
+    avatar: "/placeholder.svg?height=40&width=40",
+    serviceAccount: {
+      id: "sa1",
+      name: "贝蒂喜品牌wxid_rtlwsjytjk1991",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+  },
+  {
+    id: "3",
+    name: "客户服务群",
+    avatar: "/placeholder.svg?height=40&width=40",
+    serviceAccount: {
+      id: "sa2",
+      name: "客服小助手wxid_abc123",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+  },
+]
+
+interface GroupSelectorProps {
+  selectedGroups: WechatGroup[]
+  onGroupsChange: (groups: WechatGroup[]) => void
+  onPrevious: () => void
+  onNext: () => void
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function GroupSelector({
+  selectedGroups = [],
+  onGroupsChange,
+  onPrevious,
+  onNext,
+  onSave,
+  onCancel,
+}: GroupSelectorProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [serviceFilter, setServiceFilter] = useState("")
+
+  const handleAddGroup = (group: WechatGroup) => {
+    if (!selectedGroups.some((g) => g.id === group.id)) {
+      onGroupsChange([...selectedGroups, group])
+    }
+    setIsDialogOpen(false)
+  }
+
+  const handleRemoveGroup = (groupId: string) => {
+    onGroupsChange(selectedGroups.filter((group) => group.id !== groupId))
+  }
+
+  const filteredGroups = mockGroups.filter((group) => {
+    const matchesSearch = group.name.toLowerCase().includes(searchTerm.toLowerCase())
+    const matchesService = !serviceFilter || group.serviceAccount.name.includes(serviceFilter)
+    return matchesSearch && matchesService
+  })
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center">
+            <span className="text-red-500 mr-1">*</span>
+            <span className="font-medium">推送社群:</span>
+          </div>
+          <Button variant="default" size="sm" onClick={() => setIsDialogOpen(true)} className="flex items-center">
+            <Plus className="h-4 w-4 mr-1" />
+            选择微信聊天群
+          </Button>
+        </div>
+
+        {selectedGroups.length > 0 ? (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-16">序号</TableHead>
+                <TableHead>群信息</TableHead>
+                <TableHead>推送客服</TableHead>
+                <TableHead className="w-20">操作</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {selectedGroups.map((group, index) => (
+                <TableRow key={group.id}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell>
+                    <div className="flex items-center space-x-2">
+                      <div className="w-8 h-8 rounded overflow-hidden">
+                        <img
+                          src={group.avatar || "/placeholder.svg?height=32&width=32"}
+                          alt={group.name}
+                          className="w-full h-full object-cover"
+                        />
+                      </div>
+                      <span>{group.name}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center space-x-2">
+                      <div className="flex -space-x-2">
+                        <div className="w-8 h-8 rounded-full overflow-hidden border-2 border-white">
+                          <img
+                            src={group.serviceAccount.avatar || "/placeholder.svg?height=32&width=32"}
+                            alt={group.serviceAccount.name}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                      </div>
+                      <span className="text-sm">{group.serviceAccount.name}</span>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => handleRemoveGroup(group.id)}
+                      className="text-red-500 hover:text-red-700 hover:bg-red-50"
+                    >
+                      <Trash2 className="h-5 w-5" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        ) : (
+          <div className="border rounded-md p-8 text-center text-gray-500">请点击"选择微信聊天群"按钮添加群组</div>
+        )}
+      </div>
+
+      <div className="flex space-x-2">
+        <Button type="button" variant="outline" onClick={onPrevious}>
+          上一步
+        </Button>
+        <Button type="button" onClick={onNext}>
+          下一步
+        </Button>
+        <Button type="button" variant="outline" onClick={onSave}>
+          保存
+        </Button>
+        <Button type="button" variant="outline" onClick={onCancel}>
+          取消
+        </Button>
+      </div>
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-3xl">
+          <DialogHeader>
+            <DialogTitle>选择微信聊天群</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div className="flex space-x-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-500" />
+                <Input
+                  placeholder="搜索群聊名称"
+                  className="pl-8"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </div>
+              <div className="w-64">
+                <Input
+                  placeholder="按归属客服筛选"
+                  value={serviceFilter}
+                  onChange={(e) => setServiceFilter(e.target.value)}
+                />
+              </div>
+            </div>
+
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-16">序号</TableHead>
+                  <TableHead>群信息</TableHead>
+                  <TableHead>归属客服</TableHead>
+                  <TableHead className="w-20">操作</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {filteredGroups.map((group, index) => (
+                  <TableRow key={group.id}>
+                    <TableCell>{index + 1}</TableCell>
+                    <TableCell>
+                      <div className="flex items-center space-x-2">
+                        <div className="w-8 h-8 rounded overflow-hidden">
+                          <img
+                            src={group.avatar || "/placeholder.svg?height=32&width=32"}
+                            alt={group.name}
+                            className="w-full h-full object-cover"
+                          />
+                        </div>
+                        <span>{group.name}</span>
+                      </div>
+                    </TableCell>
+                    <TableCell>{group.serviceAccount.name}</TableCell>
+                    <TableCell>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleAddGroup(group)}
+                        disabled={selectedGroups.some((g) => g.id === group.id)}
+                      >
+                        {selectedGroups.some((g) => g.id === group.id) ? "已选择" : "选择"}
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-sync/components/step-indicator.tsx b/Cunkebao/app/workspace/group-sync/components/step-indicator.tsx
new file mode 100644
index 00000000..51d4edb1
--- /dev/null
+++ b/Cunkebao/app/workspace/group-sync/components/step-indicator.tsx
@@ -0,0 +1,63 @@
+import { cn } from "@/lib/utils"
+
+interface StepIndicatorProps {
+  currentStep: number
+  steps: { id: number; title: string; subtitle: string }[]
+}
+
+export function StepIndicator({ currentStep, steps }: StepIndicatorProps) {
+  return (
+    <div className="mb-8">
+      <div className="flex items-center justify-between">
+        {steps.map((step, index) => (
+          <div key={step.id} className="flex items-center">
+            <div className="relative">
+              <div
+                className={cn(
+                  "flex h-10 w-10 items-center justify-center rounded-full border-2 text-sm font-semibold",
+                  currentStep > step.id
+                    ? "border-green-500 bg-green-500 text-white"
+                    : currentStep === step.id
+                      ? "border-blue-500 bg-white text-blue-500"
+                      : "border-gray-300 bg-white text-gray-300",
+                )}
+              >
+                {currentStep > step.id ? (
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                  </svg>
+                ) : (
+                  step.id
+                )}
+              </div>
+              <div className="absolute -bottom-6 left-1/2 transform -translate-x-1/2 whitespace-nowrap">
+                <div className={cn("text-sm font-medium", currentStep >= step.id ? "text-blue-500" : "text-gray-400")}>
+                  步骤 {step.id}
+                </div>
+                <div className={cn("text-xs", currentStep >= step.id ? "text-blue-500" : "text-gray-400")}>
+                  {step.subtitle}
+                </div>
+              </div>
+            </div>
+            {index < steps.length - 1 && (
+              <div
+                className={cn("h-0.5 w-24 md:w-32 lg:w-40", currentStep > step.id ? "bg-green-500" : "bg-gray-300")}
+              />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-sync/loading.tsx b/Cunkebao/app/workspace/group-sync/loading.tsx
new file mode 100644
index 00000000..cec067bd
--- /dev/null
+++ b/Cunkebao/app/workspace/group-sync/loading.tsx
@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+
diff --git a/Cunkebao/app/workspace/group-sync/new/loading.tsx b/Cunkebao/app/workspace/group-sync/new/loading.tsx
new file mode 100644
index 00000000..e595196f
--- /dev/null
+++ b/Cunkebao/app/workspace/group-sync/new/loading.tsx
@@ -0,0 +1,47 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card } from "@/components/ui/card"
+
+export default function Loading() {
+  return (
+    <div className="flex-1 bg-gray-50 min-h-screen p-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="h-8 mb-8">
+          <Skeleton className="h-full w-full" />
+        </div>
+
+        <Card className="p-6">
+          <div className="space-y-6">
+            <Skeleton className="h-8 w-1/3" />
+
+            <div className="space-y-4">
+              <Skeleton className="h-5 w-1/4" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+
+            <div className="space-y-4">
+              <Skeleton className="h-5 w-1/4" />
+              <div className="flex space-x-4">
+                <Skeleton className="h-10 w-32" />
+                <Skeleton className="h-10 w-32" />
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <Skeleton className="h-5 w-1/4" />
+              <div className="flex items-center space-x-4">
+                <Skeleton className="h-10 w-10" />
+                <Skeleton className="h-6 w-16" />
+                <Skeleton className="h-10 w-10" />
+              </div>
+            </div>
+
+            <div className="flex justify-end mt-8">
+              <Skeleton className="h-10 w-24" />
+            </div>
+          </div>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-sync/new/page.tsx b/Cunkebao/app/workspace/group-sync/new/page.tsx
new file mode 100644
index 00000000..862e0858
--- /dev/null
+++ b/Cunkebao/app/workspace/group-sync/new/page.tsx
@@ -0,0 +1,134 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ArrowLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { StepIndicator } from "../components/step-indicator"
+import { BasicSettings } from "../components/basic-settings"
+import { GroupSelector } from "../components/group-selector"
+import { ContentSelector } from "../components/content-selector"
+import type { WechatGroup, ContentLibrary } from "@/types/group-sync"
+
+const steps = [
+  { id: 1, title: "步骤 1", subtitle: "基础设置" },
+  { id: 2, title: "步骤 2", subtitle: "选择社群" },
+  { id: 3, title: "步骤 3", subtitle: "选择内容库" },
+  { id: 4, title: "步骤 4", subtitle: "京东联盟" },
+]
+
+export default function NewGroupSyncPage() {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [formData, setFormData] = useState({
+    name: "",
+    pushTimeStart: "06:00",
+    pushTimeEnd: "23:59",
+    dailyPushCount: 20,
+    pushOrder: "latest" as "earliest" | "latest",
+    isLoopPush: false,
+    isImmediatePush: false,
+    isEnabled: false,
+    groups: [] as WechatGroup[],
+    contentLibraries: [] as ContentLibrary[],
+  })
+
+  const handleBasicSettingsNext = (values: any) => {
+    setFormData((prev) => ({ ...prev, ...values }))
+    setCurrentStep(2)
+  }
+
+  const handleGroupsChange = (groups: WechatGroup[]) => {
+    setFormData((prev) => ({ ...prev, groups }))
+  }
+
+  const handleLibrariesChange = (contentLibraries: ContentLibrary[]) => {
+    setFormData((prev) => ({ ...prev, contentLibraries }))
+  }
+
+  const handleSave = () => {
+    // 这里可以添加保存逻辑，例如API调用
+    console.log("保存表单数据:", formData)
+    router.push("/workspace/group-sync")
+  }
+
+  const handleCancel = () => {
+    router.push("/workspace/group-sync")
+  }
+
+  return (
+    <div className="container mx-auto py-6">
+      <div className="flex items-center mb-6">
+        <Button variant="ghost" size="icon" onClick={() => router.push("/workspace/group-sync")} className="mr-2">
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+        <h1 className="text-xl font-bold">编辑 社群推送任务</h1>
+      </div>
+
+      <StepIndicator currentStep={currentStep} steps={steps} />
+
+      <div className="mt-12">
+        {currentStep === 1 && (
+          <BasicSettings
+            defaultValues={{
+              name: formData.name,
+              pushTimeStart: formData.pushTimeStart,
+              pushTimeEnd: formData.pushTimeEnd,
+              dailyPushCount: formData.dailyPushCount,
+              pushOrder: formData.pushOrder,
+              isLoopPush: formData.isLoopPush,
+              isImmediatePush: formData.isImmediatePush,
+              isEnabled: formData.isEnabled,
+            }}
+            onNext={handleBasicSettingsNext}
+            onSave={handleSave}
+            onCancel={handleCancel}
+          />
+        )}
+
+        {currentStep === 2 && (
+          <GroupSelector
+            selectedGroups={formData.groups}
+            onGroupsChange={handleGroupsChange}
+            onPrevious={() => setCurrentStep(1)}
+            onNext={() => setCurrentStep(3)}
+            onSave={handleSave}
+            onCancel={handleCancel}
+          />
+        )}
+
+        {currentStep === 3 && (
+          <ContentSelector
+            selectedLibraries={formData.contentLibraries}
+            onLibrariesChange={handleLibrariesChange}
+            onPrevious={() => setCurrentStep(2)}
+            onNext={() => setCurrentStep(4)}
+            onSave={handleSave}
+            onCancel={handleCancel}
+          />
+        )}
+
+        {currentStep === 4 && (
+          <div className="space-y-6">
+            <div className="border rounded-md p-8 text-center text-gray-500">
+              京东联盟设置（此步骤为占位，实际功能待开发）
+            </div>
+
+            <div className="flex space-x-2">
+              <Button type="button" variant="outline" onClick={() => setCurrentStep(3)}>
+                上一步
+              </Button>
+              <Button type="button" onClick={handleSave}>
+                完成
+              </Button>
+              <Button type="button" variant="outline" onClick={handleCancel}>
+                取消
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/group-sync/page.tsx b/Cunkebao/app/workspace/group-sync/page.tsx
new file mode 100644
index 00000000..055aca62
--- /dev/null
+++ b/Cunkebao/app/workspace/group-sync/page.tsx
@@ -0,0 +1,203 @@
+"use client"
+
+import { useState } from "react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Switch } from "@/components/ui/switch"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { PlusCircle, MoreVertical, Edit, Trash2, ArrowLeft, Clock } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+
+// 模拟数据
+const mockTasks = [
+  {
+    id: "1",
+    name: "社群推送测试",
+    pushTimeRange: "06:00 - 23:59",
+    dailyPushCount: 20,
+    pushOrder: "latest",
+    isLoopPush: false,
+    isEnabled: true,
+    groupCount: 3,
+    contentLibraryCount: 2,
+    createdAt: "2025-03-15 14:30",
+  },
+  {
+    id: "2",
+    name: "产品更新推送",
+    pushTimeRange: "09:00 - 21:00",
+    dailyPushCount: 15,
+    pushOrder: "earliest",
+    isLoopPush: true,
+    isEnabled: false,
+    groupCount: 5,
+    contentLibraryCount: 1,
+    createdAt: "2025-03-10 10:15",
+  },
+]
+
+export default function GroupSyncPage() {
+  const router = useRouter()
+  const [tasks, setTasks] = useState(mockTasks)
+  const [searchTerm, setSearchTerm] = useState("")
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [taskToDelete, setTaskToDelete] = useState<string | null>(null)
+
+  const handleDelete = (id: string) => {
+    setTaskToDelete(id)
+    setDeleteDialogOpen(true)
+  }
+
+  const confirmDelete = () => {
+    if (taskToDelete) {
+      setTasks(tasks.filter((task) => task.id !== taskToDelete))
+      setTaskToDelete(null)
+    }
+    setDeleteDialogOpen(false)
+  }
+
+  const handleToggleStatus = (id: string, isEnabled: boolean) => {
+    setTasks(tasks.map((task) => (task.id === id ? { ...task, isEnabled } : task)))
+  }
+
+  const filteredTasks = tasks.filter((task) => task.name.toLowerCase().includes(searchTerm.toLowerCase()))
+
+  return (
+    <div className="container mx-auto py-6">
+      {/* 顶部导航栏 */}
+      <div className="flex items-center justify-between mb-6">
+        <Button variant="ghost" size="icon" onClick={() => router.push("/workspace")} className="mr-auto">
+          <ArrowLeft className="h-5 w-5" />
+        </Button>
+
+        <h1 className="text-2xl font-bold absolute left-1/2 transform -translate-x-1/2">社群同步</h1>
+
+        <Link href="/workspace/group-sync/new">
+          <Button className="flex items-center gap-1">
+            <PlusCircle className="h-4 w-4" />
+            新建任务
+          </Button>
+        </Link>
+      </div>
+
+      {/* 搜索栏 */}
+      <div className="mb-6">
+        <Input
+          placeholder="搜索任务名称..."
+          value={searchTerm}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          className="max-w-md"
+        />
+      </div>
+
+      {/* 任务列表 */}
+      <div className="space-y-4">
+        {filteredTasks.map((task) => (
+          <Card key={task.id} className="overflow-hidden hover:shadow-sm transition-shadow">
+            <div className="p-4">
+              <div className="flex justify-between items-start">
+                <div className="space-y-1">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-medium text-lg">{task.name}</h3>
+                    <Badge variant={task.isEnabled ? "default" : "secondary"}>
+                      {task.isEnabled ? "已启用" : "已停用"}
+                    </Badge>
+                  </div>
+                  <div className="text-sm text-gray-500 space-y-1">
+                    <div className="flex items-center gap-4">
+                      <span>推送时间: {task.pushTimeRange}</span>
+                      <span>每日推送: {task.dailyPushCount}条</span>
+                      <span>推送顺序: {task.pushOrder === "latest" ? "按最新" : "按最早"}</span>
+                      <span>循环推送: {task.isLoopPush ? "是" : "否"}</span>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <span>社群数量: {task.groupCount}</span>
+                      <span>内容库数量: {task.contentLibraryCount}</span>
+                      <span>创建时间: {task.createdAt}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2 mr-2">
+                    <span className="text-sm text-gray-500">启用</span>
+                    <Switch
+                      checked={task.isEnabled}
+                      onCheckedChange={(checked) => handleToggleStatus(task.id, checked)}
+                    />
+                  </div>
+
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" size="icon" className="h-8 w-8">
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <Link href={`/workspace/group-sync/${task.id}/edit`}>
+                        <DropdownMenuItem>
+                          <Edit className="mr-2 h-4 w-4" />
+                          编辑
+                        </DropdownMenuItem>
+                      </Link>
+                      <DropdownMenuItem onClick={() => handleDelete(task.id)}>
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        删除
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+              </div>
+            </div>
+          </Card>
+        ))}
+      </div>
+
+      {/* 空状态 */}
+      {filteredTasks.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-12 text-center">
+          <div className="bg-gray-100 p-4 rounded-full mb-4">
+            <Clock className="h-10 w-10 text-gray-400" />
+          </div>
+          <h3 className="text-lg font-medium text-gray-900 mb-1">暂无社群同步任务</h3>
+          <p className="text-gray-500 mb-4">点击"新建任务"按钮创建您的第一个社群同步任务</p>
+          <Link href="/workspace/group-sync/new">
+            <Button>
+              <PlusCircle className="h-4 w-4 mr-2" />
+              新建任务
+            </Button>
+          </Link>
+        </div>
+      )}
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>确认删除</DialogTitle>
+            <DialogDescription>您确定要删除这个社群同步任务吗？此操作无法撤销。</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)}>
+              取消
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              删除
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/moments-sync/[id]/edit/page.tsx b/Cunkebao/app/workspace/moments-sync/[id]/edit/page.tsx
new file mode 100644
index 00000000..5ce87098
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/[id]/edit/page.tsx
@@ -0,0 +1,143 @@
+"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/Cunkebao/app/workspace/moments-sync/[id]/edit/step-indicator.tsx b/Cunkebao/app/workspace/moments-sync/[id]/edit/step-indicator.tsx
new file mode 100644
index 00000000..8486d40f
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/[id]/edit/step-indicator.tsx
@@ -0,0 +1,39 @@
+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/Cunkebao/app/workspace/moments-sync/[id]/edit/steps/basic-settings.tsx b/Cunkebao/app/workspace/moments-sync/[id]/edit/steps/basic-settings.tsx
new file mode 100644
index 00000000..cf533528
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/[id]/edit/steps/basic-settings.tsx
@@ -0,0 +1,101 @@
+"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/Cunkebao/app/workspace/moments-sync/[id]/edit/steps/content-library-selection.tsx b/Cunkebao/app/workspace/moments-sync/[id]/edit/steps/content-library-selection.tsx
new file mode 100644
index 00000000..d45872ec
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/[id]/edit/steps/content-library-selection.tsx
@@ -0,0 +1,40 @@
+"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/Cunkebao/app/workspace/moments-sync/[id]/edit/steps/device-selection.tsx b/Cunkebao/app/workspace/moments-sync/[id]/edit/steps/device-selection.tsx
new file mode 100644
index 00000000..f3345b13
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/[id]/edit/steps/device-selection.tsx
@@ -0,0 +1,35 @@
+"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/Cunkebao/app/workspace/moments-sync/[id]/page.tsx b/Cunkebao/app/workspace/moments-sync/[id]/page.tsx
new file mode 100644
index 00000000..a3868672
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/[id]/page.tsx
@@ -0,0 +1,108 @@
+"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/Cunkebao/app/workspace/moments-sync/[id]/view/page.tsx b/Cunkebao/app/workspace/moments-sync/[id]/view/page.tsx
new file mode 100644
index 00000000..8d8aa408
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/[id]/view/page.tsx
@@ -0,0 +1,130 @@
+"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/Cunkebao/app/workspace/moments-sync/components/basic-settings.tsx b/Cunkebao/app/workspace/moments-sync/components/basic-settings.tsx
new file mode 100644
index 00000000..943807e4
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/components/basic-settings.tsx
@@ -0,0 +1,160 @@
+"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/Cunkebao/app/workspace/moments-sync/components/content-viewer.tsx b/Cunkebao/app/workspace/moments-sync/components/content-viewer.tsx
new file mode 100644
index 00000000..4f9afe0d
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/components/content-viewer.tsx
@@ -0,0 +1,103 @@
+"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/Cunkebao/app/workspace/moments-sync/components/device-selection-dialog.tsx b/Cunkebao/app/workspace/moments-sync/components/device-selection-dialog.tsx
new file mode 100644
index 00000000..d87bb3d5
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/components/device-selection-dialog.tsx
@@ -0,0 +1,146 @@
+"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/Cunkebao/app/workspace/moments-sync/components/step-indicator.tsx b/Cunkebao/app/workspace/moments-sync/components/step-indicator.tsx
new file mode 100644
index 00000000..51e18b70
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/components/step-indicator.tsx
@@ -0,0 +1,52 @@
+"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/Cunkebao/app/workspace/moments-sync/components/tag-editor.tsx b/Cunkebao/app/workspace/moments-sync/components/tag-editor.tsx
new file mode 100644
index 00000000..48dab4ce
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/components/tag-editor.tsx
@@ -0,0 +1,156 @@
+"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/Cunkebao/app/workspace/moments-sync/new/page.tsx b/Cunkebao/app/workspace/moments-sync/new/page.tsx
new file mode 100644
index 00000000..a1f71049
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/new/page.tsx
@@ -0,0 +1,149 @@
+"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/Cunkebao/app/workspace/moments-sync/new/steps/BasicSettings.tsx b/Cunkebao/app/workspace/moments-sync/new/steps/BasicSettings.tsx
new file mode 100644
index 00000000..26f65c26
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/new/steps/BasicSettings.tsx
@@ -0,0 +1,138 @@
+"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/Cunkebao/app/workspace/moments-sync/new/steps/ContentSelector.tsx b/Cunkebao/app/workspace/moments-sync/new/steps/ContentSelector.tsx
new file mode 100644
index 00000000..b0a58d8a
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/new/steps/ContentSelector.tsx
@@ -0,0 +1,280 @@
+"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/Cunkebao/app/workspace/moments-sync/new/steps/DeviceSelector.tsx b/Cunkebao/app/workspace/moments-sync/new/steps/DeviceSelector.tsx
new file mode 100644
index 00000000..2a0c9ce6
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/new/steps/DeviceSelector.tsx
@@ -0,0 +1,275 @@
+"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/Cunkebao/app/workspace/moments-sync/page.tsx b/Cunkebao/app/workspace/moments-sync/page.tsx
new file mode 100644
index 00000000..085756df
--- /dev/null
+++ b/Cunkebao/app/workspace/moments-sync/page.tsx
@@ -0,0 +1,169 @@
+"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/Cunkebao/app/workspace/page.tsx b/Cunkebao/app/workspace/page.tsx
new file mode 100644
index 00000000..86da7686
--- /dev/null
+++ b/Cunkebao/app/workspace/page.tsx
@@ -0,0 +1,198 @@
+"use client"
+import { Card, CardContent } from "@/components/ui/card"
+import { ThumbsUp, MessageSquare, Send, Users, Share2, Brain, BarChart2, LineChart, Clock } from "lucide-react"
+import Link from "next/link"
+import { Badge } from "@/components/ui/badge"
+import { Progress } from "@/components/ui/progress"
+
+export default function WorkspacePage() {
+  // 模拟任务数据
+  const taskStats = {
+    total: 42,
+    inProgress: 12,
+    completed: 30,
+    todayTasks: 12,
+    activityRate: 98,
+  }
+
+  // 常用功能 - 保持原有排列
+  const commonFeatures = [
+    {
+      id: "auto-like",
+      name: "自动点赞",
+      description: "智能自动点赞互动",
+      icon: <ThumbsUp className="h-5 w-5 text-red-500" />,
+      path: "/workspace/auto-like",
+      bgColor: "bg-red-100",
+      isNew: true,
+    },
+    {
+      id: "moments-sync",
+      name: "朋友圈同步",
+      description: "自动同步朋友圈内容",
+      icon: <Clock className="h-5 w-5 text-purple-500" />,
+      path: "/workspace/moments-sync",
+      bgColor: "bg-purple-100",
+    },
+    {
+      id: "group-push",
+      name: "群消息推送",
+      description: "智能群发助手",
+      icon: <Send className="h-5 w-5 text-orange-500" />,
+      path: "/workspace/group-push",
+      bgColor: "bg-orange-100",
+    },
+    {
+      id: "auto-group",
+      name: "自动建群",
+      description: "智能拉好友建群",
+      icon: <Users className="h-5 w-5 text-green-500" />,
+      path: "/workspace/auto-group",
+      bgColor: "bg-green-100",
+    },
+    {
+      id: "traffic-distribution",
+      name: "流量分发",
+      description: "管理流量分发和分配",
+      icon: <Share2 className="h-5 w-5 text-blue-500" />,
+      path: "/workspace/traffic-distribution",
+      bgColor: "bg-blue-100",
+    },
+    {
+      id: "ai-assistant",
+      name: "AI对话助手",
+      description: "智能回复，提高互动质量",
+      icon: <MessageSquare className="h-5 w-5 text-blue-500" />,
+      path: "/workspace/ai-assistant",
+      bgColor: "bg-blue-100",
+      isNew: true,
+    },
+  ]
+
+  // AI智能助手
+  const aiFeatures = [
+    {
+      id: "ai-analyzer",
+      name: "AI数据分析",
+      description: "智能分析客户行为特征",
+      icon: <BarChart2 className="h-5 w-5 text-indigo-500" />,
+      path: "/workspace/ai-analyzer",
+      bgColor: "bg-indigo-100",
+      isNew: true,
+    },
+    {
+      id: "ai-strategy",
+      name: "AI策略优化",
+      description: "智能优化获客策略",
+      icon: <Brain className="h-5 w-5 text-cyan-500" />,
+      path: "/workspace/ai-strategy",
+      bgColor: "bg-cyan-100",
+      isNew: true,
+    },
+    {
+      id: "ai-forecast",
+      name: "AI销售预测",
+      description: "智能预测销售趋势",
+      icon: <LineChart className="h-5 w-5 text-amber-500" />,
+      path: "/workspace/ai-forecast",
+      bgColor: "bg-amber-100",
+    },
+  ]
+
+  return (
+    <div className="flex-1 p-4 bg-gray-50 pb-16">
+      <div className="max-w-md mx-auto">
+        <h1 className="text-2xl font-bold mb-4">工作台</h1>
+
+        {/* 任务统计卡片 */}
+        <div className="grid grid-cols-2 gap-3 mb-6">
+          <Card className="overflow-hidden">
+            <CardContent className="p-4">
+              <div className="text-sm text-gray-500">总任务数</div>
+              <div className="text-3xl font-bold text-blue-500 mt-1">{taskStats.total}</div>
+              <Progress value={(taskStats.inProgress / taskStats.total) * 100} className="h-2 mt-2 bg-blue-100" />
+              <div className="text-xs text-gray-500 mt-1">
+                进行中: {taskStats.inProgress} / 已完成: {taskStats.completed}
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="overflow-hidden">
+            <CardContent className="p-4">
+              <div className="text-sm text-gray-500">今日任务</div>
+              <div className="text-3xl font-bold text-green-500 mt-1">{taskStats.todayTasks}</div>
+              <div className="flex items-center mt-2">
+                <svg
+                  className="w-4 h-4 text-green-500 mr-1"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M3 12H7L10 19L14 5L17 12H21"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+                <span className="text-sm">活跃度 {taskStats.activityRate}%</span>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* 常用功能 */}
+        <div className="mb-6">
+          <h2 className="text-lg font-medium mb-3">常用功能</h2>
+          <div className="grid grid-cols-2 gap-3">
+            {commonFeatures.map((feature) => (
+              <Link href={feature.path} key={feature.id}>
+                <Card className="overflow-hidden hover:shadow-md transition-shadow">
+                  <CardContent className="p-4">
+                    <div className={`w-10 h-10 rounded-lg ${feature.bgColor} flex items-center justify-center mb-3`}>
+                      {feature.icon}
+                    </div>
+                    <div className="flex items-center">
+                      <div className="font-medium">{feature.name}</div>
+                      {feature.isNew && (
+                        <Badge className="ml-2 bg-blue-100 text-blue-600 hover:bg-blue-100 border-0">New</Badge>
+                      )}
+                    </div>
+                    <div className="text-xs text-gray-500 mt-1">{feature.description}</div>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        {/* AI智能助手 */}
+        <div>
+          <h2 className="text-lg font-medium mb-3">AI 智能助手</h2>
+          <div className="grid grid-cols-2 gap-3">
+            {aiFeatures.map((feature) => (
+              <Link href={feature.path} key={feature.id}>
+                <Card className="overflow-hidden hover:shadow-md transition-shadow">
+                  <CardContent className="p-4">
+                    <div className={`w-10 h-10 rounded-lg ${feature.bgColor} flex items-center justify-center mb-3`}>
+                      {feature.icon}
+                    </div>
+                    <div className="flex items-center">
+                      <div className="font-medium">{feature.name}</div>
+                      {feature.isNew && (
+                        <Badge className="ml-2 bg-blue-100 text-blue-600 hover:bg-blue-100 border-0">New</Badge>
+                      )}
+                    </div>
+                    <div className="text-xs text-gray-500 mt-1">{feature.description}</div>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/pricing/edit/[id]/page.tsx b/Cunkebao/app/workspace/pricing/edit/[id]/page.tsx
new file mode 100644
index 00000000..cc53d908
--- /dev/null
+++ b/Cunkebao/app/workspace/pricing/edit/[id]/page.tsx
@@ -0,0 +1,534 @@
+"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, Users, Smartphone, Settings } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Card } from "@/components/ui/card"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Switch } from "@/components/ui/switch"
+import { DeviceSelectionDialog } from "@/app/components/device-selection-dialog"
+import { TrafficPoolSelector } from "@/app/components/traffic-pool-selector"
+
+interface UserTag {
+  id: string
+  name: string
+  color: string
+}
+
+interface TrafficUser {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  phone: string
+  region: string
+  note: string
+  status: "pending" | "added" | "failed"
+  addTime: string
+  source: string
+  assignedTo: string
+  category: "potential" | "customer" | "lost"
+  tags: UserTag[]
+}
+
+type DeviceSelectionType = "all" | "new" | "specific"
+
+// 模拟规则数据
+const mockRuleData = [
+  {
+    id: "1",
+    name: "新用户流量分发",
+    selectedUsers: [
+      {
+        id: "user-1",
+        avatar: "/placeholder.svg?height=40&width=40",
+        nickname: "用户1",
+        wechatId: "wxid_abc123",
+        phone: "13800138000",
+        region: "北京",
+        note: "",
+        status: "added" as const,
+        addTime: "2023-05-15T08:30:00.000Z",
+        source: "抖音直播",
+        assignedTo: "销售1",
+        category: "potential" as const,
+        tags: [
+          { id: "tag1", name: "潜在客户", color: "bg-blue-100 text-blue-800" },
+          { id: "tag4", name: "需跟进", color: "bg-yellow-100 text-yellow-800" },
+        ],
+      },
+      {
+        id: "user-2",
+        avatar: "/placeholder.svg?height=40&width=40",
+        nickname: "用户2",
+        wechatId: "wxid_def456",
+        phone: "13900139000",
+        region: "上海",
+        note: "这是用户2的备注",
+        status: "pending" as const,
+        addTime: "2023-05-16T10:15:00.000Z",
+        source: "小红书",
+        assignedTo: "销售2",
+        category: "potential" as const,
+        tags: [{ id: "tag1", name: "潜在客户", color: "bg-blue-100 text-blue-800" }],
+      },
+    ],
+    deviceSelectionType: "all",
+    selectedDevices: [],
+    priority: "high",
+    createAsPackage: false,
+    price: "",
+    autoDistribute: true,
+  },
+  {
+    id: "2",
+    name: "高端用户流量包",
+    selectedUsers: [
+      {
+        id: "user-3",
+        avatar: "/placeholder.svg?height=40&width=40",
+        nickname: "用户3",
+        wechatId: "wxid_ghi789",
+        phone: "13700137000",
+        region: "广州",
+        note: "",
+        status: "added" as const,
+        addTime: "2023-05-14T14:20:00.000Z",
+        source: "微信朋友圈",
+        assignedTo: "销售3",
+        category: "customer" as const,
+        tags: [
+          { id: "tag2", name: "高意向", color: "bg-green-100 text-green-800" },
+          { id: "tag7", name: "企业客户", color: "bg-red-100 text-red-800" },
+        ],
+      },
+    ],
+    deviceSelectionType: "specific",
+    selectedDevices: ["device-1", "device-4", "device-5"],
+    priority: "low",
+    createAsPackage: true,
+    price: "2.5",
+    autoDistribute: false,
+  },
+]
+
+export default function EditRulePage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const { id } = params
+
+  const [currentStep, setCurrentStep] = useState(1)
+  const [name, setName] = useState("")
+
+  // 流量池相关状态
+  const [selectedUsers, setSelectedUsers] = useState<TrafficUser[]>([])
+  const [trafficPoolDialogOpen, setTrafficPoolDialogOpen] = useState(false)
+
+  // 设备选择相关状态
+  const [deviceSelectionType, setDeviceSelectionType] = useState<DeviceSelectionType>("all")
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
+
+  // 规则设定相关状态
+  const [priority, setPriority] = useState("high")
+  const [createAsPackage, setCreateAsPackage] = useState(false)
+  const [price, setPrice] = useState("")
+  const [autoDistribute, setAutoDistribute] = useState(true)
+
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    // 在实际应用中，这里会从API获取数据
+    // 这里使用模拟数据
+    const ruleItem = mockRuleData.find((item) => item.id === id)
+
+    if (ruleItem) {
+      setName(ruleItem.name)
+      setSelectedUsers(ruleItem.selectedUsers)
+      setDeviceSelectionType(ruleItem.deviceSelectionType as DeviceSelectionType)
+      setSelectedDevices(ruleItem.selectedDevices)
+      setPriority(ruleItem.priority)
+      setCreateAsPackage(ruleItem.createAsPackage)
+      setPrice(ruleItem.price)
+      setAutoDistribute(ruleItem.autoDistribute)
+    } else {
+      // 如果找不到数据，返回列表页
+      router.push("/workspace/pricing")
+    }
+
+    setLoading(false)
+  }, [id, router])
+
+  const handleDeviceSelect = (deviceIds: string[]) => {
+    setSelectedDevices(deviceIds)
+  }
+
+  const handleUserSelect = (users: TrafficUser[]) => {
+    setSelectedUsers(users)
+  }
+
+  const handleNext = () => {
+    if (currentStep === 1) {
+      if (name.trim() && selectedUsers.length > 0) {
+        setCurrentStep(2)
+      } else {
+        alert("请填写任务名称并选择流量池")
+      }
+    } else if (currentStep === 2) {
+      if (deviceSelectionType === "specific" && selectedDevices.length === 0) {
+        alert("请选择至少一个设备")
+      } else {
+        setCurrentStep(3)
+      }
+    }
+  }
+
+  const handlePrevious = () => {
+    if (currentStep === 2) {
+      setCurrentStep(1)
+    } else if (currentStep === 3) {
+      setCurrentStep(2)
+    }
+  }
+
+  const handleSubmit = () => {
+    // 在实际应用中，这里会发送API请求更新数据
+    console.log({
+      id,
+      name,
+      selectedUsers: selectedUsers.map((user) => user.id),
+      deviceSelectionType,
+      selectedDevices: deviceSelectionType === "specific" ? selectedDevices : [],
+      priority,
+      createAsPackage,
+      price: createAsPackage ? price : "",
+      autoDistribute,
+    })
+
+    // 返回到列表页
+    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-10 w-10 flex items-center justify-center ${
+                    currentStep >= 1 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  <Users className="h-5 w-5" />
+                </div>
+                <div className={`h-1 flex-1 mx-2 ${currentStep >= 2 ? "bg-blue-600" : "bg-gray-200"}`}></div>
+                <div
+                  className={`rounded-full h-10 w-10 flex items-center justify-center ${
+                    currentStep >= 2 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  <Smartphone className="h-5 w-5" />
+                </div>
+                <div className={`h-1 flex-1 mx-2 ${currentStep >= 3 ? "bg-blue-600" : "bg-gray-200"}`}></div>
+                <div
+                  className={`rounded-full h-10 w-10 flex items-center justify-center ${
+                    currentStep >= 3 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  <Settings className="h-5 w-5" />
+                </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 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-2">
+              <Label htmlFor="name">任务名称</Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="请输入任务名称"
+                required
+              />
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-lg font-medium">选择流量池</h2>
+                <Button variant="outline" onClick={() => setTrafficPoolDialogOpen(true)}>
+                  {selectedUsers.length > 0 ? "修改选择" : "选择流量池"}
+                </Button>
+              </div>
+
+              {selectedUsers.length > 0 ? (
+                <Card className="p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <h3 className="font-medium">已选择的流量池</h3>
+                    <Badge>{selectedUsers.length} 个用户</Badge>
+                  </div>
+
+                  <div className="space-y-2">
+                    {/* 显示选中用户的标签统计 */}
+                    <div className="flex flex-wrap gap-2">
+                      {Array.from(
+                        new Set(selectedUsers.flatMap((user) => user.tags.map((tag) => JSON.stringify(tag)))),
+                      ).map((tagJson) => {
+                        const tag = JSON.parse(tagJson) as UserTag
+                        const count = selectedUsers.filter((user) => user.tags.some((t) => t.id === tag.id)).length
+
+                        return (
+                          <Badge key={tag.id} className={tag.color}>
+                            {tag.name} ({count})
+                          </Badge>
+                        )
+                      })}
+                    </div>
+
+                    {/* 显示选中用户的来源统计 */}
+                    <div className="mt-3">
+                      <div className="text-sm font-medium mb-1">来源分布</div>
+                      <div className="flex flex-wrap gap-2">
+                        {Array.from(new Set(selectedUsers.map((user) => user.source))).map((source) => {
+                          const count = selectedUsers.filter((user) => user.source === source).length
+
+                          return (
+                            <Badge key={source} variant="outline">
+                              {source} ({count})
+                            </Badge>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              ) : (
+                <Card className="p-8 flex flex-col items-center justify-center text-center text-gray-500">
+                  <Users className="h-12 w-12 mb-4 text-gray-400" />
+                  <p>请选择流量池用户</p>
+                  <p className="text-sm mt-1">您可以从流量池中选择特定标签的用户</p>
+                </Card>
+              )}
+
+              <TrafficPoolSelector
+                open={trafficPoolDialogOpen}
+                onOpenChange={setTrafficPoolDialogOpen}
+                selectedUsers={selectedUsers}
+                onSelect={handleUserSelect}
+              />
+            </div>
+
+            <div className="flex justify-end pt-4">
+              <Button type="button" onClick={handleNext} disabled={name.trim() === "" || selectedUsers.length === 0}>
+                下一步
+              </Button>
+            </div>
+          </div>
+        ) : currentStep === 2 ? (
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <h2 className="text-lg font-medium">设备选择</h2>
+
+              <RadioGroup
+                value={deviceSelectionType}
+                onValueChange={(value) => setDeviceSelectionType(value as DeviceSelectionType)}
+                className="space-y-4"
+              >
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="all" id="all-devices" />
+                  <Label htmlFor="all-devices" className="cursor-pointer">
+                    所有设备
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="new" id="new-devices" />
+                  <Label htmlFor="new-devices" className="cursor-pointer">
+                    新添加设备
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="specific" id="specific-devices" />
+                  <Label htmlFor="specific-devices" className="cursor-pointer">
+                    指定设备
+                  </Label>
+                </div>
+              </RadioGroup>
+
+              {deviceSelectionType === "specific" && (
+                <div className="mt-4">
+                  <Button variant="outline" onClick={() => setDeviceDialogOpen(true)} className="w-full">
+                    {selectedDevices.length > 0 ? `已选择 ${selectedDevices.length} 个设备` : "选择设备"}
+                  </Button>
+
+                  {selectedDevices.length > 0 && (
+                    <Card className="mt-4 p-4">
+                      <div className="flex items-center justify-between mb-2">
+                        <h3 className="font-medium">已选择的设备</h3>
+                        <Badge>{selectedDevices.length} 个设备</Badge>
+                      </div>
+                      <p className="text-sm text-gray-500">
+                        您已选择 {selectedDevices.length} 个设备用于流量分发。 点击上方按钮可以修改选择。
+                      </p>
+                    </Card>
+                  )}
+
+                  <DeviceSelectionDialog
+                    open={deviceDialogOpen}
+                    onOpenChange={setDeviceDialogOpen}
+                    selectedDevices={selectedDevices}
+                    onSelect={handleDeviceSelect}
+                  />
+                </div>
+              )}
+
+              {deviceSelectionType === "all" && (
+                <Card className="p-4 bg-blue-50 border-blue-200">
+                  <p className="text-sm text-blue-700">
+                    您选择了使用所有可用设备进行流量分发。系统将自动分配流量到所有在线设备。
+                  </p>
+                </Card>
+              )}
+
+              {deviceSelectionType === "new" && (
+                <Card className="p-4 bg-green-50 border-green-200">
+                  <p className="text-sm text-green-700">
+                    您选择了使用新添加的设备进行流量分发。系统将自动将流量分配到新接入的设备。
+                  </p>
+                </Card>
+              )}
+            </div>
+
+            {/* 按钮组 */}
+            <div className="flex justify-between pt-4">
+              <Button type="button" variant="outline" onClick={handlePrevious}>
+                上一步
+              </Button>
+              <Button
+                type="button"
+                onClick={handleNext}
+                disabled={deviceSelectionType === "specific" && selectedDevices.length === 0}
+              >
+                下一步
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-lg font-medium mb-4">规则设定</h2>
+
+              {/* 优先级选择 */}
+              <div className="space-y-4 mb-6">
+                <h3 className="font-medium">优先级</h3>
+                <RadioGroup value={priority} onValueChange={setPriority} className="space-y-2">
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="high" id="high-priority" />
+                    <Label htmlFor="high-priority" className="cursor-pointer">
+                      高优先
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="low" id="low-priority" />
+                    <Label htmlFor="low-priority" className="cursor-pointer">
+                      低优先
+                    </Label>
+                  </div>
+                </RadioGroup>
+
+                <Card className="p-3 bg-gray-50 border-gray-200">
+                  <p className="text-sm text-gray-600">
+                    高优先级规则将优先于低优先级规则执行。当多个规则匹配同一流量时，系统将按优先级顺序分配。
+                  </p>
+                </Card>
+              </div>
+
+              {/* 自动分发设置 */}
+              <div className="space-y-2 mb-6">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="auto-distribute">自动分发</Label>
+                  <Switch id="auto-distribute" checked={autoDistribute} onCheckedChange={setAutoDistribute} />
+                </div>
+                <p className="text-sm text-gray-500">开启后，系统将自动按照规则分发流量。关闭后，需要手动触发分发。</p>
+              </div>
+
+              {/* 创建为流量包 */}
+              <div className="space-y-4 mb-6">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="create-package">创建为流量包</Label>
+                  <Switch id="create-package" checked={createAsPackage} onCheckedChange={setCreateAsPackage} />
+                </div>
+                <p className="text-sm text-gray-500">开启后，将创建为可售卖的流量包，可设置价格。</p>
+
+                {createAsPackage && (
+                  <div className="space-y-2 mt-4">
+                    <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>
+            </div>
+
+            {/* 按钮组 */}
+            <div className="flex justify-between pt-4">
+              <Button type="button" variant="outline" onClick={handlePrevious}>
+                上一步
+              </Button>
+              <Button type="button" onClick={handleSubmit} disabled={createAsPackage && !price}>
+                确认
+              </Button>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/pricing/new/page.tsx b/Cunkebao/app/workspace/pricing/new/page.tsx
new file mode 100644
index 00000000..ca6a0e77
--- /dev/null
+++ b/Cunkebao/app/workspace/pricing/new/page.tsx
@@ -0,0 +1,420 @@
+"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, Users, Smartphone, Settings } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Card } from "@/components/ui/card"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Switch } from "@/components/ui/switch"
+import { DeviceSelectionDialog } from "@/app/components/device-selection-dialog"
+import { TrafficPoolSelector } from "@/app/components/traffic-pool-selector"
+
+interface UserTag {
+  id: string
+  name: string
+  color: string
+}
+
+interface TrafficUser {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  phone: string
+  region: string
+  note: string
+  status: "pending" | "added" | "failed"
+  addTime: string
+  source: string
+  assignedTo: string
+  category: "potential" | "customer" | "lost"
+  tags: UserTag[]
+}
+
+type DeviceSelectionType = "all" | "new" | "specific"
+
+export default function RuleSettingsPage() {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [name, setName] = useState("")
+
+  // 流量池相关状态
+  const [selectedUsers, setSelectedUsers] = useState<TrafficUser[]>([])
+  const [trafficPoolDialogOpen, setTrafficPoolDialogOpen] = useState(false)
+
+  // 设备选择相关状态
+  const [deviceSelectionType, setDeviceSelectionType] = useState<DeviceSelectionType>("all")
+  const [selectedDevices, setSelectedDevices] = useState<string[]>([])
+  const [deviceDialogOpen, setDeviceDialogOpen] = useState(false)
+
+  // 规则设定相关状态
+  const [priority, setPriority] = useState("high")
+  const [createAsPackage, setCreateAsPackage] = useState(false)
+  const [price, setPrice] = useState("")
+  const [autoDistribute, setAutoDistribute] = useState(true)
+
+  const handleDeviceSelect = (deviceIds: string[]) => {
+    setSelectedDevices(deviceIds)
+  }
+
+  const handleUserSelect = (users: TrafficUser[]) => {
+    setSelectedUsers(users)
+  }
+
+  const handleNext = () => {
+    if (currentStep === 1) {
+      if (name.trim() && selectedUsers.length > 0) {
+        setCurrentStep(2)
+      } else {
+        alert("请填写任务名称并选择流量池")
+      }
+    } else if (currentStep === 2) {
+      if (deviceSelectionType === "specific" && selectedDevices.length === 0) {
+        alert("请选择至少一个设备")
+      } else {
+        setCurrentStep(3)
+      }
+    }
+  }
+
+  const handlePrevious = () => {
+    if (currentStep === 2) {
+      setCurrentStep(1)
+    } else if (currentStep === 3) {
+      setCurrentStep(2)
+    }
+  }
+
+  const handleSubmit = () => {
+    // 在实际应用中，这里会发送API请求保存数据
+    console.log({
+      name,
+      selectedUsers: selectedUsers.map((user) => user.id),
+      deviceSelectionType,
+      selectedDevices: deviceSelectionType === "specific" ? selectedDevices : [],
+      priority,
+      createAsPackage,
+      price: createAsPackage ? Number.parseFloat(price) : undefined,
+      autoDistribute,
+    })
+
+    // 返回到列表页
+    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-10 w-10 flex items-center justify-center ${
+                    currentStep >= 1 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  <Users className="h-5 w-5" />
+                </div>
+                <div className={`h-1 flex-1 mx-2 ${currentStep >= 2 ? "bg-blue-600" : "bg-gray-200"}`}></div>
+                <div
+                  className={`rounded-full h-10 w-10 flex items-center justify-center ${
+                    currentStep >= 2 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  <Smartphone className="h-5 w-5" />
+                </div>
+                <div className={`h-1 flex-1 mx-2 ${currentStep >= 3 ? "bg-blue-600" : "bg-gray-200"}`}></div>
+                <div
+                  className={`rounded-full h-10 w-10 flex items-center justify-center ${
+                    currentStep >= 3 ? "bg-blue-600 text-white" : "bg-gray-200 text-gray-600"
+                  }`}
+                >
+                  <Settings className="h-5 w-5" />
+                </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 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-2">
+              <Label htmlFor="name">任务名称</Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder="请输入任务名称"
+                required
+              />
+            </div>
+
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-lg font-medium">选择流量池</h2>
+                <Button variant="outline" onClick={() => setTrafficPoolDialogOpen(true)}>
+                  {selectedUsers.length > 0 ? "修改选择" : "选择流量池"}
+                </Button>
+              </div>
+
+              {selectedUsers.length > 0 ? (
+                <Card className="p-4">
+                  <div className="flex items-center justify-between mb-2">
+                    <h3 className="font-medium">已选择的流量池</h3>
+                    <Badge>{selectedUsers.length} 个用户</Badge>
+                  </div>
+
+                  <div className="space-y-2">
+                    {/* 显示选中用户的标签统计 */}
+                    <div className="flex flex-wrap gap-2">
+                      {Array.from(
+                        new Set(selectedUsers.flatMap((user) => user.tags.map((tag) => JSON.stringify(tag)))),
+                      ).map((tagJson) => {
+                        const tag = JSON.parse(tagJson) as UserTag
+                        const count = selectedUsers.filter((user) => user.tags.some((t) => t.id === tag.id)).length
+
+                        return (
+                          <Badge key={tag.id} className={tag.color}>
+                            {tag.name} ({count})
+                          </Badge>
+                        )
+                      })}
+                    </div>
+
+                    {/* 显示选中用户的来源统计 */}
+                    <div className="mt-3">
+                      <div className="text-sm font-medium mb-1">来源分布</div>
+                      <div className="flex flex-wrap gap-2">
+                        {Array.from(new Set(selectedUsers.map((user) => user.source))).map((source) => {
+                          const count = selectedUsers.filter((user) => user.source === source).length
+
+                          return (
+                            <Badge key={source} variant="outline">
+                              {source} ({count})
+                            </Badge>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              ) : (
+                <Card className="p-8 flex flex-col items-center justify-center text-center text-gray-500">
+                  <Users className="h-12 w-12 mb-4 text-gray-400" />
+                  <p>请选择流量池用户</p>
+                  <p className="text-sm mt-1">您可以从流量池中选择特定标签的用户</p>
+                </Card>
+              )}
+
+              <TrafficPoolSelector
+                open={trafficPoolDialogOpen}
+                onOpenChange={setTrafficPoolDialogOpen}
+                selectedUsers={selectedUsers}
+                onSelect={handleUserSelect}
+              />
+            </div>
+
+            <div className="flex justify-end pt-4">
+              <Button type="button" onClick={handleNext} disabled={name.trim() === "" || selectedUsers.length === 0}>
+                下一步
+              </Button>
+            </div>
+          </div>
+        ) : currentStep === 2 ? (
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <h2 className="text-lg font-medium">设备选择</h2>
+
+              <RadioGroup
+                value={deviceSelectionType}
+                onValueChange={(value) => setDeviceSelectionType(value as DeviceSelectionType)}
+                className="space-y-4"
+              >
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="all" id="all-devices" />
+                  <Label htmlFor="all-devices" className="cursor-pointer">
+                    所有设备
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="new" id="new-devices" />
+                  <Label htmlFor="new-devices" className="cursor-pointer">
+                    新添加设备
+                  </Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="specific" id="specific-devices" />
+                  <Label htmlFor="specific-devices" className="cursor-pointer">
+                    指定设备
+                  </Label>
+                </div>
+              </RadioGroup>
+
+              {deviceSelectionType === "specific" && (
+                <div className="mt-4">
+                  <Button variant="outline" onClick={() => setDeviceDialogOpen(true)} className="w-full">
+                    {selectedDevices.length > 0 ? `已选择 ${selectedDevices.length} 个设备` : "选择设备"}
+                  </Button>
+
+                  {selectedDevices.length > 0 && (
+                    <Card className="mt-4 p-4">
+                      <div className="flex items-center justify-between mb-2">
+                        <h3 className="font-medium">已选择的设备</h3>
+                        <Badge>{selectedDevices.length} 个设备</Badge>
+                      </div>
+                      <p className="text-sm text-gray-500">
+                        您已选择 {selectedDevices.length} 个设备用于流量分发。 点击上方按钮可以修改选择。
+                      </p>
+                    </Card>
+                  )}
+
+                  <DeviceSelectionDialog
+                    open={deviceDialogOpen}
+                    onOpenChange={setDeviceDialogOpen}
+                    selectedDevices={selectedDevices}
+                    onSelect={handleDeviceSelect}
+                  />
+                </div>
+              )}
+
+              {deviceSelectionType === "all" && (
+                <Card className="p-4 bg-blue-50 border-blue-200">
+                  <p className="text-sm text-blue-700">
+                    您选择了使用所有可用设备进行流量分发。系统将自动分配流量到所有在线设备。
+                  </p>
+                </Card>
+              )}
+
+              {deviceSelectionType === "new" && (
+                <Card className="p-4 bg-green-50 border-green-200">
+                  <p className="text-sm text-green-700">
+                    您选择了使用新添加的设备进行流量分发。系统将自动将流量分配到新接入的设备。
+                  </p>
+                </Card>
+              )}
+            </div>
+
+            {/* 按钮组 */}
+            <div className="flex justify-between pt-4">
+              <Button type="button" variant="outline" onClick={handlePrevious}>
+                上一步
+              </Button>
+              <Button
+                type="button"
+                onClick={handleNext}
+                disabled={deviceSelectionType === "specific" && selectedDevices.length === 0}
+              >
+                下一步
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div>
+              <h2 className="text-lg font-medium mb-4">规则设定</h2>
+
+              {/* 优先级选择 */}
+              <div className="space-y-4 mb-6">
+                <h3 className="font-medium">优先级</h3>
+                <RadioGroup value={priority} onValueChange={setPriority} className="space-y-2">
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="high" id="high-priority" />
+                    <Label htmlFor="high-priority" className="cursor-pointer">
+                      高优先
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="low" id="low-priority" />
+                    <Label htmlFor="low-priority" className="cursor-pointer">
+                      低优先
+                    </Label>
+                  </div>
+                </RadioGroup>
+
+                <Card className="p-3 bg-gray-50 border-gray-200">
+                  <p className="text-sm text-gray-600">
+                    高优先级规则将优先于低优先级规则执行。当多个规则匹配同一流量时，系统将按优先级顺序分配。
+                  </p>
+                </Card>
+              </div>
+
+              {/* 自动分发设置 */}
+              <div className="space-y-2 mb-6">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="auto-distribute">自动分发</Label>
+                  <Switch id="auto-distribute" checked={autoDistribute} onCheckedChange={setAutoDistribute} />
+                </div>
+                <p className="text-sm text-gray-500">开启后，系统将自动按照规则分发流量。关闭后，需要手动触发分发。</p>
+              </div>
+
+              {/* 创建为流量包 */}
+              <div className="space-y-4 mb-6">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="create-package">创建为流量包</Label>
+                  <Switch id="create-package" checked={createAsPackage} onCheckedChange={setCreateAsPackage} />
+                </div>
+                <p className="text-sm text-gray-500">开启后，将创建为可售卖的流量包，可设置价格。</p>
+
+                {createAsPackage && (
+                  <div className="space-y-2 mt-4">
+                    <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>
+            </div>
+
+            {/* 按钮组 */}
+            <div className="flex justify-between pt-4">
+              <Button type="button" variant="outline" onClick={handlePrevious}>
+                上一步
+              </Button>
+              <Button type="button" onClick={handleSubmit} disabled={createAsPackage && !price}>
+                确认
+              </Button>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/pricing/page.tsx b/Cunkebao/app/workspace/pricing/page.tsx
new file mode 100644
index 00000000..0dfc4975
--- /dev/null
+++ b/Cunkebao/app/workspace/pricing/page.tsx
@@ -0,0 +1,122 @@
+"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: "全国",
+    deviceAddQuantity: 10,
+  },
+  {
+    id: "2",
+    name: "高质量流量",
+    price: 2.5,
+    tags: ["高消费", "高活跃度"],
+    region: "一线城市",
+    deviceAddQuantity: 25,
+  },
+  {
+    id: "3",
+    name: "精准营销流量",
+    price: 3.8,
+    tags: ["潜在客户", "有购买意向"],
+    region: "华东地区",
+    deviceAddQuantity: 50,
+  },
+  {
+    id: "4",
+    name: "节日促销流量",
+    price: 1.5,
+    tags: ["节日消费", "促销敏感"],
+    region: "全国",
+    deviceAddQuantity: 15,
+  },
+]
+
+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="text-sm text-gray-500 mt-1">总添加人数: {item.deviceAddQuantity} 人</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/Cunkebao/app/workspace/traffic-distribution/[id]/edit/page.tsx b/Cunkebao/app/workspace/traffic-distribution/[id]/edit/page.tsx
new file mode 100644
index 00000000..9f5afb6c
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-distribution/[id]/edit/page.tsx
@@ -0,0 +1,485 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft, Info, Users, Target, Settings, ArrowRight, ArrowLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Switch } from "@/components/ui/switch"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { Slider } from "@/components/ui/slider"
+import { Badge } from "@/components/ui/badge"
+import { TrafficPoolSelector } from "@/app/components/traffic-pool-selector"
+
+// 模拟数据
+const planDetails = {
+  id: "1",
+  name: "抖音直播引流计划",
+  description: "从抖音直播间获取的潜在客户流量分发",
+  status: "active",
+  source: "douyin",
+  sourceIcon: "🎬",
+  distributionMethod: "even",
+  targetGroups: ["新客户", "潜在客户"],
+  devices: ["iPhone 13", "华为 P40", "小米 11"],
+  totalUsers: 1250,
+  dailyAverage: 85,
+  weeklyData: [42, 56, 78, 64, 85, 92, 76],
+  createdAt: "2024-03-10T08:30:00Z",
+  lastUpdated: "2024-03-18T10:30:00Z",
+  rules: {
+    maxPerDay: 50,
+    timeRestriction: "custom",
+    customTimeStart: "09:00",
+    customTimeEnd: "21:00",
+    userFilters: [],
+    excludeTags: [],
+  },
+  selectedUsers: [],
+}
+
+export default function EditTrafficDistributionPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    source: "",
+    distributionMethod: "even", // even, priority, ratio
+    targetGroups: [] as string[],
+    targetDevices: [] as string[],
+    autoTag: true,
+    activeStatus: true,
+    priorityOrder: [] as string[],
+    ratioSettings: {} as Record<string, number>,
+    rules: {
+      maxPerDay: 50,
+      timeRestriction: "all", // all, custom
+      customTimeStart: "09:00",
+      customTimeEnd: "21:00",
+      userFilters: [] as string[],
+      excludeTags: [] as string[],
+    },
+    selectedUsers: [],
+    isPoolSelectorOpen: false,
+  })
+
+  // 加载计划详情
+  useEffect(() => {
+    // 模拟API请求
+    setFormData({
+      name: planDetails.name,
+      description: planDetails.description || "",
+      source: planDetails.source,
+      distributionMethod: planDetails.distributionMethod,
+      targetGroups: planDetails.targetGroups,
+      targetDevices: planDetails.devices,
+      autoTag: true,
+      activeStatus: planDetails.status === "active",
+      priorityOrder: planDetails.targetGroups,
+      ratioSettings: planDetails.targetGroups.reduce(
+        (acc, group, index, arr) => {
+          acc[group] = Math.floor(100 / arr.length)
+          return acc
+        },
+        {} as Record<string, number>,
+      ),
+      rules: planDetails.rules,
+      selectedUsers: planDetails.selectedUsers || [],
+      isPoolSelectorOpen: false,
+    })
+  }, [params.id])
+
+  const updateFormData = (field: string, value: any) => {
+    setFormData((prev) => {
+      if (field.includes(".")) {
+        const [parent, child] = field.split(".")
+        return {
+          ...prev,
+          [parent]: {
+            ...prev[parent as keyof typeof prev],
+            [child]: value,
+          },
+        }
+      }
+      return { ...prev, [field]: value }
+    })
+  }
+
+  const handleNext = () => {
+    setCurrentStep((prev) => prev + 1)
+  }
+
+  const handleBack = () => {
+    if (currentStep > 1) {
+      setCurrentStep((prev) => prev - 1)
+    } else {
+      router.back()
+    }
+  }
+
+  const handleSubmit = () => {
+    // 这里处理表单提交逻辑
+    console.log("提交表单数据:", formData)
+    router.push(`/workspace/traffic-distribution/${params.id}`)
+  }
+
+  const isStep1Valid = formData.name && formData.source
+  const isStep2Valid = formData.targetGroups.length > 0 || formData.targetDevices.length > 0
+  const isStep3Valid = true // 规则设置可以有默认值
+
+  return (
+    <div className="flex-1 bg-white 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={handleBack}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">编辑流量分发</h1>
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-3xl mx-auto">
+        {/* 步骤指示器 */}
+        <div className="mb-6">
+          <div className="flex items-center justify-between">
+            {[
+              { step: 1, title: "基本信息", icon: <Info className="h-4 w-4" /> },
+              { step: 2, title: "目标设置", icon: <Target className="h-4 w-4" /> },
+              { step: 3, title: "规则配置", icon: <Settings className="h-4 w-4" /> },
+            ].map(({ step, title, icon }) => (
+              <div key={step} className="flex flex-col items-center">
+                <div
+                  className={`w-10 h-10 rounded-full flex items-center justify-center ${
+                    step === currentStep
+                      ? "bg-blue-600 text-white"
+                      : step < currentStep
+                        ? "bg-green-500 text-white"
+                        : "bg-gray-200 text-gray-500"
+                  }`}
+                >
+                  {step < currentStep ? "✓" : icon}
+                </div>
+                <span className="text-xs mt-1">{title}</span>
+              </div>
+            ))}
+          </div>
+          <div className="relative mt-2">
+            <div className="absolute top-0 left-0 right-0 h-1 bg-gray-200"></div>
+            <div
+              className="absolute top-0 left-0 h-1 bg-blue-600 transition-all"
+              style={{ width: `${((currentStep - 1) / 2) * 100}%` }}
+            ></div>
+          </div>
+        </div>
+
+        {/* 步骤1：基本信息 */}
+        {currentStep === 1 && (
+          <Card>
+            <CardHeader>
+              <CardTitle>基本信息</CardTitle>
+              <CardDescription>设置流量分发计划的基本信息</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="name">
+                  计划名称 <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  id="name"
+                  placeholder="输入分发计划名称"
+                  value={formData.name}
+                  onChange={(e) => updateFormData("name", e.target.value)}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="description">计划描述</Label>
+                <Textarea
+                  id="description"
+                  placeholder="简要描述该分发计划的目标和用途"
+                  value={formData.description}
+                  onChange={(e) => updateFormData("description", e.target.value)}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="source">
+                  流量来源 <span className="text-red-500">*</span>
+                </Label>
+                <Select value={formData.source} onValueChange={(value) => updateFormData("source", value)}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="选择流量来源" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="douyin">抖音</SelectItem>
+                    <SelectItem value="xiaohongshu">小红书</SelectItem>
+                    <SelectItem value="wechat">微信</SelectItem>
+                    <SelectItem value="weibo">微博</SelectItem>
+                    <SelectItem value="other">其他来源</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="pt-4 flex justify-end">
+                <Button onClick={handleNext} disabled={!isStep1Valid}>
+                  下一步
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* 步骤2：目标设置 */}
+        {currentStep === 2 && (
+          <Card>
+            <CardHeader>
+              <CardTitle>目标设置</CardTitle>
+              <CardDescription>选择流量分发的目标人群或设备</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <Tabs defaultValue="groups">
+                <TabsList className="grid w-full grid-cols-2">
+                  <TabsTrigger value="groups">目标人群</TabsTrigger>
+                  <TabsTrigger value="devices">目标设备</TabsTrigger>
+                </TabsList>
+                <TabsContent value="groups" className="pt-4">
+                  <div className="space-y-4">
+                    <div className="grid grid-cols-2 gap-3">
+                      {["新客户", "潜在客户", "老客户", "会员", "高价值用户", "流失用户"].map((group) => (
+                        <Card
+                          key={group}
+                          className={`cursor-pointer hover:border-blue-400 transition-colors ${
+                            formData.targetGroups.includes(group) ? "border-blue-500 bg-blue-50" : ""
+                          }`}
+                          onClick={() => {
+                            const newGroups = formData.targetGroups.includes(group)
+                              ? formData.targetGroups.filter((g) => g !== group)
+                              : [...formData.targetGroups, group]
+                            updateFormData("targetGroups", newGroups)
+                          }}
+                        >
+                          <CardContent className="p-3 text-center">{group}</CardContent>
+                        </Card>
+                      ))}
+                    </div>
+                    <p className="text-xs text-gray-500">选择需要分发流量的目标人群，可多选</p>
+
+                    <div className="mt-4">
+                      <Button
+                        variant="outline"
+                        onClick={() => updateFormData("isPoolSelectorOpen", true)}
+                        className="w-full"
+                      >
+                        <Users className="mr-2 h-4 w-4" />
+                        从流量池选择特定用户
+                      </Button>
+
+                      {formData.selectedUsers.length > 0 && (
+                        <div className="mt-2">
+                          <p className="text-sm font-medium mb-1">已选择 {formData.selectedUsers.length} 个用户</p>
+                          <div className="flex flex-wrap gap-1">
+                            {formData.selectedUsers.slice(0, 3).map((user: any) => (
+                              <Badge key={user.id} variant="secondary">
+                                {user.nickname}
+                              </Badge>
+                            ))}
+                            {formData.selectedUsers.length > 3 && (
+                              <Badge variant="secondary">+{formData.selectedUsers.length - 3}</Badge>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </TabsContent>
+                <TabsContent value="devices" className="pt-4">
+                  <div className="space-y-4">
+                    <p className="text-sm">选择需要接收流量的设备</p>
+                    <Button variant="outline" className="w-full">
+                      选择设备
+                    </Button>
+                    <p className="text-xs text-gray-500">您可以选择特定设备接收分发的流量</p>
+                  </div>
+                </TabsContent>
+              </Tabs>
+
+              <div className="pt-4 flex justify-between">
+                <Button variant="outline" onClick={handleBack}>
+                  <ArrowLeft className="mr-2 h-4 w-4" />
+                  上一步
+                </Button>
+                <Button onClick={handleNext} disabled={!isStep2Valid}>
+                  下一步
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* 步骤3：规则配置 */}
+        {currentStep === 3 && (
+          <Card>
+            <CardHeader>
+              <CardTitle>规则配置</CardTitle>
+              <CardDescription>设置流量分发的规则和限制</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-4">
+                <h3 className="text-sm font-medium">分发方式</h3>
+                <RadioGroup
+                  value={formData.distributionMethod}
+                  onValueChange={(value) => updateFormData("distributionMethod", value)}
+                  className="space-y-3"
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="even" id="even" />
+                    <Label htmlFor="even" className="cursor-pointer">
+                      均匀分发
+                    </Label>
+                    <span className="text-xs text-gray-500 ml-2">(流量将均匀分配给所有目标)</span>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="priority" id="priority" />
+                    <Label htmlFor="priority" className="cursor-pointer">
+                      优先级分发
+                    </Label>
+                    <span className="text-xs text-gray-500 ml-2">(按目标优先级顺序分发)</span>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="ratio" id="ratio" />
+                    <Label htmlFor="ratio" className="cursor-pointer">
+                      比例分发
+                    </Label>
+                    <span className="text-xs text-gray-500 ml-2">(按设定比例分配流量)</span>
+                  </div>
+                </RadioGroup>
+              </div>
+
+              <div className="space-y-4 border-t pt-4">
+                <h3 className="text-sm font-medium">分发限制</h3>
+
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="maxPerDay">每日最大分发量</Label>
+                    <span className="text-sm font-medium">{formData.rules.maxPerDay} 人/天</span>
+                  </div>
+                  <Slider
+                    id="maxPerDay"
+                    min={10}
+                    max={200}
+                    step={10}
+                    value={[formData.rules.maxPerDay]}
+                    onValueChange={(value) => updateFormData("rules.maxPerDay", value[0])}
+                  />
+                  <p className="text-xs text-gray-500">限制每天最多分发的流量数量</p>
+                </div>
+
+                <div className="space-y-2">
+                  <Label>时间限制</Label>
+                  <RadioGroup
+                    value={formData.rules.timeRestriction}
+                    onValueChange={(value) => updateFormData("rules.timeRestriction", value)}
+                    className="space-y-3"
+                  >
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="all" id="all-time" />
+                      <Label htmlFor="all-time" className="cursor-pointer">
+                        全天分发
+                      </Label>
+                    </div>
+                    <div className="flex items-center space-x-2">
+                      <RadioGroupItem value="custom" id="custom-time" />
+                      <Label htmlFor="custom-time" className="cursor-pointer">
+                        自定义时间段
+                      </Label>
+                    </div>
+                  </RadioGroup>
+
+                  {formData.rules.timeRestriction === "custom" && (
+                    <div className="grid grid-cols-2 gap-2 mt-2">
+                      <div>
+                        <Label htmlFor="timeStart" className="text-xs">
+                          开始时间
+                        </Label>
+                        <Input
+                          id="timeStart"
+                          type="time"
+                          value={formData.rules.customTimeStart}
+                          onChange={(e) => updateFormData("rules.customTimeStart", e.target.value)}
+                        />
+                      </div>
+                      <div>
+                        <Label htmlFor="timeEnd" className="text-xs">
+                          结束时间
+                        </Label>
+                        <Input
+                          id="timeEnd"
+                          type="time"
+                          value={formData.rules.customTimeEnd}
+                          onChange={(e) => updateFormData("rules.customTimeEnd", e.target.value)}
+                        />
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className="space-y-2 border-t pt-4">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="autoTag">自动标记</Label>
+                  <Switch
+                    id="autoTag"
+                    checked={formData.autoTag}
+                    onCheckedChange={(checked) => updateFormData("autoTag", checked)}
+                  />
+                </div>
+                <p className="text-xs text-gray-500">启用后，系统将自动为分发的流量添加来源标签</p>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="activeStatus">立即激活</Label>
+                  <Switch
+                    id="activeStatus"
+                    checked={formData.activeStatus}
+                    onCheckedChange={(checked) => updateFormData("activeStatus", checked)}
+                  />
+                </div>
+                <p className="text-xs text-gray-500">启用后，创建完成后立即开始流量分发</p>
+              </div>
+
+              <div className="pt-4 flex justify-between">
+                <Button variant="outline" onClick={handleBack}>
+                  <ArrowLeft className="mr-2 h-4 w-4" />
+                  上一步
+                </Button>
+                <Button onClick={handleSubmit} disabled={!isStep3Valid}>
+                  保存修改
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* 流量池选择器 */}
+      <TrafficPoolSelector
+        open={formData.isPoolSelectorOpen}
+        onOpenChange={(open) => updateFormData("isPoolSelectorOpen", open)}
+        selectedUsers={formData.selectedUsers}
+        onSelect={(users) => updateFormData("selectedUsers", users)}
+      />
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/traffic-distribution/[id]/loading.tsx b/Cunkebao/app/workspace/traffic-distribution/[id]/loading.tsx
new file mode 100644
index 00000000..b87592e6
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-distribution/[id]/loading.tsx
@@ -0,0 +1,99 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { ChevronLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+export default function TrafficDistributionDetailLoading() {
+  return (
+    <div className="flex-1 bg-white 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" disabled>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <Skeleton className="h-6 w-40" />
+          </div>
+          <div className="flex items-center space-x-2">
+            <Skeleton className="h-8 w-32" />
+            <Skeleton className="h-9 w-20" />
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4">
+        {/* 标签页骨架 */}
+        <Skeleton className="h-10 w-full mb-6" />
+
+        {/* 内容骨架 */}
+        <div className="space-y-6">
+          {/* 数据卡片骨架 */}
+          <div className="grid grid-cols-2 gap-4">
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <Skeleton className="h-4 w-16 mb-2" />
+                    <Skeleton className="h-8 w-24" />
+                  </div>
+                  <Skeleton className="h-8 w-8 rounded-full" />
+                </div>
+              </CardContent>
+            </Card>
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <Skeleton className="h-4 w-16 mb-2" />
+                    <Skeleton className="h-8 w-24" />
+                  </div>
+                  <Skeleton className="h-8 w-8 rounded-full" />
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* 图表骨架 */}
+          <Card>
+            <CardHeader className="pb-2">
+              <div className="flex items-center justify-between">
+                <Skeleton className="h-6 w-24" />
+                <Skeleton className="h-9 w-32" />
+              </div>
+            </CardHeader>
+            <CardContent className="p-4">
+              <Skeleton className="h-64 w-full" />
+            </CardContent>
+          </Card>
+
+          {/* 基本信息骨架 */}
+          <Card>
+            <CardHeader>
+              <Skeleton className="h-6 w-24" />
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-2 gap-4">
+                {[1, 2, 3, 4].map((i) => (
+                  <div key={i}>
+                    <Skeleton className="h-4 w-16 mb-2" />
+                    <Skeleton className="h-6 w-32" />
+                  </div>
+                ))}
+              </div>
+
+              <div>
+                <Skeleton className="h-4 w-16 mb-2" />
+                <div className="flex flex-wrap gap-2">
+                  {[1, 2, 3].map((i) => (
+                    <Skeleton key={i} className="h-6 w-16 rounded-full" />
+                  ))}
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/traffic-distribution/[id]/page.tsx b/Cunkebao/app/workspace/traffic-distribution/[id]/page.tsx
new file mode 100644
index 00000000..aa8434b1
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-distribution/[id]/page.tsx
@@ -0,0 +1,324 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft, Settings, Users, BarChart3, Download, Clock } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
+import { Switch } from "@/components/ui/switch"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+
+// 模拟数据
+const planDetails = {
+  id: "1",
+  name: "抖音直播引流计划",
+  description: "从抖音直播间获取的潜在客户流量分发",
+  status: "active",
+  source: "douyin",
+  sourceIcon: "🎬",
+  distributionMethod: "even",
+  targetGroups: ["新客户", "潜在客户"],
+  devices: ["iPhone 13", "华为 P40", "小米 11"],
+  totalUsers: 1250,
+  dailyAverage: 85,
+  weeklyData: [42, 56, 78, 64, 85, 92, 76],
+  createdAt: "2024-03-10T08:30:00Z",
+  lastUpdated: "2024-03-18T10:30:00Z",
+  rules: {
+    maxPerDay: 50,
+    timeRestriction: "custom",
+    customTimeStart: "09:00",
+    customTimeEnd: "21:00",
+  },
+}
+
+// 模拟流量数据
+const trafficData = [
+  { id: "1", name: "张三", source: "抖音直播", time: "2024-03-20 09:45", target: "新客户", device: "iPhone 13" },
+  { id: "2", name: "李四", source: "抖音评论", time: "2024-03-20 10:12", target: "潜在客户", device: "华为 P40" },
+  { id: "3", name: "王五", source: "抖音私信", time: "2024-03-20 11:30", target: "新客户", device: "小米 11" },
+  { id: "4", name: "赵六", source: "抖音直播", time: "2024-03-20 13:15", target: "潜在客户", device: "iPhone 13" },
+  { id: "5", name: "孙七", source: "抖音评论", time: "2024-03-20 14:22", target: "新客户", device: "华为 P40" },
+]
+
+export default function TrafficDistributionDetailPage({ params }: { params: { id: string } }) {
+  const router = useRouter()
+  const [activeTab, setActiveTab] = useState("overview")
+  const [isActive, setIsActive] = useState(planDetails.status === "active")
+  const [timeRange, setTimeRange] = useState("7days")
+
+  return (
+    <div className="flex-1 bg-white 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">{planDetails.name}</h1>
+          </div>
+          <div className="flex items-center space-x-2">
+            <div className="flex items-center mr-4">
+              <span className="mr-2 text-sm">状态:</span>
+              <Switch checked={isActive} onCheckedChange={setIsActive} />
+              <span className="ml-2 text-sm">{isActive ? "进行中" : "已暂停"}</span>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => router.push(`/workspace/traffic-distribution/${params.id}/edit`)}
+            >
+              <Settings className="h-4 w-4 mr-2" />
+              编辑
+            </Button>
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4">
+        <Tabs defaultValue="overview" value={activeTab} onValueChange={setActiveTab}>
+          <TabsList className="grid w-full grid-cols-3 mb-6">
+            <TabsTrigger value="overview">概览</TabsTrigger>
+            <TabsTrigger value="traffic">流量记录</TabsTrigger>
+            <TabsTrigger value="rules">分发规则</TabsTrigger>
+          </TabsList>
+
+          {/* 概览标签页 */}
+          <TabsContent value="overview" className="space-y-6">
+            {/* 数据卡片 */}
+            <div className="grid grid-cols-2 gap-4">
+              <Card>
+                <CardContent className="p-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm text-gray-500">总流量</p>
+                      <p className="text-2xl font-bold text-blue-600">{planDetails.totalUsers.toLocaleString()}</p>
+                    </div>
+                    <Users className="h-8 w-8 text-blue-500" />
+                  </div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardContent className="p-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-sm text-gray-500">日均获取</p>
+                      <p className="text-2xl font-bold text-green-600">{planDetails.dailyAverage}</p>
+                    </div>
+                    <BarChart3 className="h-8 w-8 text-green-500" />
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* 图表 */}
+            <Card>
+              <CardHeader className="pb-2">
+                <div className="flex items-center justify-between">
+                  <CardTitle>流量趋势</CardTitle>
+                  <Select value={timeRange} onValueChange={setTimeRange}>
+                    <SelectTrigger className="w-[120px]">
+                      <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>
+              </CardHeader>
+              <CardContent className="p-4">
+                <div className="h-64 flex items-center justify-center bg-gray-50 rounded-lg">
+                  {/* 这里可以放置实际的图表组件 */}
+                  <div className="text-center">
+                    <BarChart3 className="h-12 w-12 text-gray-300 mx-auto mb-2" />
+                    <p className="text-gray-500">流量趋势图表</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* 基本信息 */}
+            <Card>
+              <CardHeader>
+                <CardTitle>基本信息</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm text-gray-500">流量来源</p>
+                    <p className="font-medium">{planDetails.sourceIcon} 抖音</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500">分发方式</p>
+                    <p className="font-medium">
+                      {planDetails.distributionMethod === "even"
+                        ? "均匀分发"
+                        : planDetails.distributionMethod === "priority"
+                          ? "优先级分发"
+                          : "比例分发"}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500">创建时间</p>
+                    <p className="font-medium">{new Date(planDetails.createdAt).toLocaleDateString()}</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500">最近更新</p>
+                    <p className="font-medium">{new Date(planDetails.lastUpdated).toLocaleDateString()}</p>
+                  </div>
+                </div>
+
+                <div>
+                  <p className="text-sm text-gray-500 mb-2">目标人群</p>
+                  <div className="flex flex-wrap gap-2">
+                    {planDetails.targetGroups.map((group) => (
+                      <Badge key={group} variant="outline">
+                        {group}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <p className="text-sm text-gray-500 mb-2">目标设备</p>
+                  <div className="flex flex-wrap gap-2">
+                    {planDetails.devices.map((device) => (
+                      <Badge key={device} variant="outline">
+                        {device}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* 流量记录标签页 */}
+          <TabsContent value="traffic" className="space-y-6">
+            <div className="flex justify-between items-center mb-4">
+              <h2 className="text-lg font-medium">流量记录</h2>
+              <Button variant="outline" size="sm">
+                <Download className="h-4 w-4 mr-2" />
+                导出数据
+              </Button>
+            </div>
+
+            <Card>
+              <CardContent className="p-0">
+                <div className="overflow-x-auto">
+                  <table className="w-full">
+                    <thead>
+                      <tr className="border-b">
+                        <th className="text-left p-3">用户</th>
+                        <th className="text-left p-3">来源</th>
+                        <th className="text-left p-3">时间</th>
+                        <th className="text-left p-3">目标</th>
+                        <th className="text-left p-3">设备</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {trafficData.map((item) => (
+                        <tr key={item.id} className="border-b hover:bg-gray-50">
+                          <td className="p-3">{item.name}</td>
+                          <td className="p-3">{item.source}</td>
+                          <td className="p-3">{item.time}</td>
+                          <td className="p-3">{item.target}</td>
+                          <td className="p-3">{item.device}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </CardContent>
+            </Card>
+
+            <div className="flex justify-center">
+              <Button variant="outline">加载更多</Button>
+            </div>
+          </TabsContent>
+
+          {/* 分发规则标签页 */}
+          <TabsContent value="rules" className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>分发规则</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm text-gray-500">分发方式</p>
+                    <p className="font-medium">
+                      {planDetails.distributionMethod === "even"
+                        ? "均匀分发"
+                        : planDetails.distributionMethod === "priority"
+                          ? "优先级分发"
+                          : "比例分发"}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-gray-500">每日最大分发量</p>
+                    <p className="font-medium">{planDetails.rules.maxPerDay} 人/天</p>
+                  </div>
+                </div>
+
+                <div>
+                  <p className="text-sm text-gray-500">时间限制</p>
+                  <div className="flex items-center mt-1">
+                    <Clock className="h-4 w-4 mr-2 text-gray-400" />
+                    {planDetails.rules.timeRestriction === "all" ? (
+                      <p className="font-medium">全天分发</p>
+                    ) : (
+                      <p className="font-medium">
+                        {planDetails.rules.customTimeStart} - {planDetails.rules.customTimeEnd}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                <div className="border-t pt-4">
+                  <p className="text-sm text-gray-500 mb-2">目标人群优先级</p>
+                  {planDetails.distributionMethod === "priority" ? (
+                    <div className="space-y-2">
+                      {planDetails.targetGroups.map((group, index) => (
+                        <div key={group} className="flex items-center">
+                          <Badge variant="outline" className="mr-2">
+                            {index + 1}
+                          </Badge>
+                          <span>{group}</span>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-gray-500">当前分发方式不使用优先级</p>
+                  )}
+                </div>
+
+                <div className="border-t pt-4">
+                  <p className="text-sm text-gray-500 mb-2">分发比例设置</p>
+                  {planDetails.distributionMethod === "ratio" ? (
+                    <div className="space-y-2">
+                      {planDetails.targetGroups.map((group) => (
+                        <div key={group} className="flex items-center justify-between">
+                          <span>{group}</span>
+                          <Badge>{Math.floor(100 / planDetails.targetGroups.length)}%</Badge>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p className="text-gray-500">当前分发方式不使用比例设置</p>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/traffic-distribution/components/keyword-selector.tsx b/Cunkebao/app/workspace/traffic-distribution/components/keyword-selector.tsx
new file mode 100644
index 00000000..ebe2105e
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-distribution/components/keyword-selector.tsx
@@ -0,0 +1,180 @@
+"use client"
+
+import { useState } from "react"
+import { Search, Plus, X } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+interface KeywordSelectorProps {
+  onSelect: (keywords: string[]) => void
+  initialSelected?: string[]
+}
+
+export default function KeywordSelector({ onSelect, initialSelected = [] }: KeywordSelectorProps) {
+  const [searchQuery, setSearchQuery] = useState("")
+  const [selectedKeywords, setSelectedKeywords] = useState<string[]>(initialSelected)
+  const [activeCategory, setActiveCategory] = useState("popular")
+
+  // 模拟关键词数据
+  const keywordCategories = {
+    popular: [
+      "电商运营",
+      "社交媒体",
+      "短视频",
+      "直播带货",
+      "私域流量",
+      "用户增长",
+      "品牌营销",
+      "内容创作",
+      "数据分析",
+      "SEO优化",
+      "付费推广",
+      "用户留存",
+      "转化率",
+      "客户服务",
+      "产品推荐",
+    ],
+    industry: [
+      "美妆护肤",
+      "服装穿搭",
+      "数码科技",
+      "家居生活",
+      "母婴育儿",
+      "食品饮料",
+      "健康养生",
+      "教育培训",
+      "金融理财",
+      "旅游出行",
+    ],
+    scenario: [
+      "节日促销",
+      "新品上市",
+      "会员活动",
+      "限时折扣",
+      "满减优惠",
+      "秒杀活动",
+      "拼团活动",
+      "签到奖励",
+      "复购激励",
+      "用户调研",
+    ],
+    custom: ["我的标签1", "我的标签2", "我的标签3", "自定义标签", "个性化标签"],
+  }
+
+  const filteredKeywords = searchQuery
+    ? Object.values(keywordCategories)
+        .flat()
+        .filter((kw) => kw.includes(searchQuery))
+    : keywordCategories[activeCategory as keyof typeof keywordCategories]
+
+  const handleKeywordToggle = (keyword: string) => {
+    let newSelected
+    if (selectedKeywords.includes(keyword)) {
+      newSelected = selectedKeywords.filter((k) => k !== keyword)
+    } else {
+      newSelected = [...selectedKeywords, keyword]
+    }
+    setSelectedKeywords(newSelected)
+    onSelect(newSelected)
+  }
+
+  const handleRemoveKeyword = (keyword: string) => {
+    const newSelected = selectedKeywords.filter((k) => k !== keyword)
+    setSelectedKeywords(newSelected)
+    onSelect(newSelected)
+  }
+
+  return (
+    <div className="space-y-4">
+      {/* 已选关键词展示 */}
+      {selectedKeywords.length > 0 && (
+        <div className="space-y-2">
+          <div className="text-sm font-medium">已选关键词</div>
+          <div className="flex flex-wrap gap-2">
+            {selectedKeywords.map((keyword) => (
+              <Badge key={keyword} variant="secondary" className="flex items-center gap-1 py-1">
+                {keyword}
+                <button
+                  onClick={() => handleRemoveKeyword(keyword)}
+                  className="ml-1 rounded-full hover:bg-gray-200 p-0.5"
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              </Badge>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 搜索框 */}
+      <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>
+
+      {/* 分类标签页 */}
+      <Tabs
+        defaultValue="popular"
+        value={activeCategory}
+        onValueChange={(value) => {
+          setActiveCategory(value)
+          setSearchQuery("")
+        }}
+      >
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="popular">热门</TabsTrigger>
+          <TabsTrigger value="industry">行业</TabsTrigger>
+          <TabsTrigger value="scenario">场景</TabsTrigger>
+          <TabsTrigger value="custom">自定义</TabsTrigger>
+        </TabsList>
+      </Tabs>
+
+      {/* 关键词列表 */}
+      <ScrollArea className="h-[300px]">
+        <div className="grid grid-cols-2 gap-2">
+          {filteredKeywords.map((keyword) => (
+            <Card
+              key={keyword}
+              className={`p-3 cursor-pointer hover:shadow-sm transition-shadow ${
+                selectedKeywords.includes(keyword) ? "bg-blue-50 border-blue-200" : ""
+              }`}
+              onClick={() => handleKeywordToggle(keyword)}
+            >
+              <div className="flex items-center justify-between">
+                <span className="text-sm">{keyword}</span>
+                {selectedKeywords.includes(keyword) && <div className="h-2 w-2 rounded-full bg-blue-500"></div>}
+              </div>
+            </Card>
+          ))}
+        </div>
+      </ScrollArea>
+
+      {/* 添加自定义关键词 */}
+      <Button
+        variant="outline"
+        className="w-full"
+        onClick={() => {
+          if (searchQuery && !selectedKeywords.includes(searchQuery)) {
+            const newSelected = [...selectedKeywords, searchQuery]
+            setSelectedKeywords(newSelected)
+            onSelect(newSelected)
+            setSearchQuery("")
+          }
+        }}
+      >
+        <Plus className="h-4 w-4 mr-2" />
+        添加自定义关键词
+      </Button>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/traffic-distribution/loading.tsx b/Cunkebao/app/workspace/traffic-distribution/loading.tsx
new file mode 100644
index 00000000..4a24822d
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-distribution/loading.tsx
@@ -0,0 +1,88 @@
+import { Card, CardContent } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { ChevronLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+export default function TrafficDistributionLoading() {
+  return (
+    <div className="flex-1 bg-white 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" disabled>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">流量分发</h1>
+          </div>
+          <Skeleton className="h-9 w-24" />
+        </div>
+      </header>
+
+      <div className="p-4 space-y-6">
+        {/* 数据概览骨架 */}
+        <div className="grid grid-cols-2 gap-4">
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <Skeleton className="h-4 w-20 mb-2" />
+                  <Skeleton className="h-8 w-16" />
+                </div>
+                <Skeleton className="h-8 w-8 rounded-full" />
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent className="p-4">
+              <div className="flex items-center justify-between">
+                <div>
+                  <Skeleton className="h-4 w-20 mb-2" />
+                  <Skeleton className="h-8 w-16" />
+                </div>
+                <Skeleton className="h-8 w-8 rounded-full" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* 分类标签页骨架 */}
+        <Skeleton className="h-10 w-full rounded-lg" />
+
+        {/* 计划列表骨架 */}
+        <div className="space-y-4">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <Card key={i} className="overflow-hidden">
+              <CardContent className="p-6">
+                <div className="flex items-center justify-between mb-4">
+                  <Skeleton className="h-6 w-40" />
+                  <Skeleton className="h-5 w-16 rounded-full" />
+                </div>
+                <Skeleton className="h-4 w-32 mb-4" />
+                <div className="flex gap-2 mb-4">
+                  <Skeleton className="h-6 w-16 rounded-full" />
+                  <Skeleton className="h-6 w-20 rounded-full" />
+                  <Skeleton className="h-6 w-14 rounded-full" />
+                </div>
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <Skeleton className="h-4 w-16 mb-2" />
+                    <Skeleton className="h-6 w-20" />
+                  </div>
+                  <div>
+                    <Skeleton className="h-4 w-16 mb-2" />
+                    <Skeleton className="h-6 w-20" />
+                  </div>
+                </div>
+              </CardContent>
+              <div className="bg-gray-50 p-4 flex justify-between">
+                <Skeleton className="h-8 w-20" />
+                <Skeleton className="h-8 w-24" />
+              </div>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/traffic-distribution/new/loading.tsx b/Cunkebao/app/workspace/traffic-distribution/new/loading.tsx
new file mode 100644
index 00000000..e057bceb
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-distribution/new/loading.tsx
@@ -0,0 +1,61 @@
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { ChevronLeft } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+export default function NewTrafficDistributionLoading() {
+  return (
+    <div className="flex-1 bg-white 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" disabled>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">新建流量分发</h1>
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-3xl mx-auto">
+        {/* 步骤指示器骨架 */}
+        <div className="mb-6">
+          <div className="flex items-center justify-between">
+            {[1, 2, 3].map((step) => (
+              <div key={step} className="flex flex-col items-center">
+                <Skeleton className="w-8 h-8 rounded-full" />
+                <Skeleton className="h-4 w-16 mt-1" />
+              </div>
+            ))}
+          </div>
+          <Skeleton className="h-1 w-full mt-2" />
+        </div>
+
+        {/* 表单骨架 */}
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-6 w-32" />
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-24 w-full" />
+            </div>
+            <div className="space-y-2">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-10 w-full" />
+            </div>
+            <div className="pt-4 flex justify-end">
+              <Skeleton className="h-10 w-24" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/traffic-distribution/new/page.tsx b/Cunkebao/app/workspace/traffic-distribution/new/page.tsx
new file mode 100644
index 00000000..6ef484dc
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-distribution/new/page.tsx
@@ -0,0 +1,425 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { ChevronLeft, Users, Target, Settings, ArrowRight, ArrowLeft, Smartphone } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+import { Switch } from "@/components/ui/switch"
+import { Badge } from "@/components/ui/badge"
+import { TrafficPoolSelector } from "@/app/components/traffic-pool-selector"
+import { Checkbox } from "@/components/ui/checkbox"
+
+export default function NewTrafficDistributionPage() {
+  const router = useRouter()
+  const [currentStep, setCurrentStep] = useState(1)
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    priority: "high",
+    autoDistribute: true,
+    createAsPackage: false,
+    packagePrice: 0,
+    allDevices: false,
+    newDevices: false,
+    targetDevices: [] as string[],
+    showDeviceSelector: false,
+    selectedPool: "",
+    isPoolSelectorOpen: false,
+    selectedUsers: [],
+  })
+
+  const updateFormData = (field: string, value: any) => {
+    setFormData((prev) => {
+      if (field.includes(".")) {
+        const [parent, child] = field.split(".")
+        return {
+          ...prev,
+          [parent]: {
+            ...prev[parent as keyof typeof prev],
+            [child]: value,
+          },
+        }
+      }
+      return { ...prev, [field]: value }
+    })
+  }
+
+  const handleNext = () => {
+    setCurrentStep((prev) => prev + 1)
+  }
+
+  const handleBack = () => {
+    if (currentStep > 1) {
+      setCurrentStep((prev) => prev - 1)
+    } else {
+      router.back()
+    }
+  }
+
+  const handleSubmit = () => {
+    // 这里处理表单提交逻辑
+    console.log("提交表单数据:", formData)
+    router.push("/workspace/traffic-distribution")
+  }
+
+  const isStep1Valid = formData.name && formData.source
+  const isStep2Valid = formData.targetGroups.length > 0 || formData.targetDevices.length > 0
+  const isStep3Valid = true // 规则设置可以有默认值
+
+  return (
+    <div className="flex-1 bg-white 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={handleBack}>
+              <ChevronLeft className="h-5 w-5" />
+            </Button>
+            <h1 className="text-lg font-medium">新建流量分发</h1>
+          </div>
+        </div>
+      </header>
+
+      <div className="p-4 max-w-3xl mx-auto">
+        {/* 步骤指示器 */}
+        <div className="mb-6">
+          <div className="flex items-center justify-between">
+            {[
+              { step: 1, title: "规则设定", icon: <Settings className="h-4 w-4" /> },
+              { step: 2, title: "选择设备", icon: <Smartphone className="h-4 w-4" /> },
+              { step: 3, title: "选择流量池", icon: <Users className="h-4 w-4" /> },
+            ].map(({ step, title, icon }) => (
+              <div key={step} className="flex flex-col items-center">
+                <div
+                  className={`w-10 h-10 rounded-full flex items-center justify-center ${
+                    step === currentStep
+                      ? "bg-blue-600 text-white"
+                      : step < currentStep
+                        ? "bg-green-500 text-white"
+                        : "bg-gray-200 text-gray-500"
+                  }`}
+                >
+                  {step < currentStep ? "✓" : icon}
+                </div>
+                <span className="text-xs mt-1">{title}</span>
+              </div>
+            ))}
+          </div>
+          <div className="relative mt-2">
+            <div className="absolute top-0 left-0 right-0 h-1 bg-gray-200"></div>
+            <div
+              className="absolute top-0 left-0 h-1 bg-blue-600 transition-all"
+              style={{ width: `${((currentStep - 1) / 2) * 100}%` }}
+            ></div>
+          </div>
+        </div>
+
+        {/* 步骤1：基本信息 */}
+        {currentStep === 1 && (
+          <Card>
+            <CardHeader>
+              <CardTitle>规则设定</CardTitle>
+              <CardDescription>设置流量分发的基本规则和优先级</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-2">
+                <Label htmlFor="name">
+                  规则名称 <span className="text-red-500">*</span>
+                </Label>
+                <Input
+                  id="name"
+                  placeholder="输入分发规则名称"
+                  value={formData.name}
+                  onChange={(e) => updateFormData("name", e.target.value)}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="description">规则描述</Label>
+                <Textarea
+                  id="description"
+                  placeholder="简要描述该分发规则的目标和用途"
+                  value={formData.description}
+                  onChange={(e) => updateFormData("description", e.target.value)}
+                />
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="text-sm font-medium">优先级</h3>
+                <RadioGroup
+                  value={formData.priority || "high"}
+                  onValueChange={(value) => updateFormData("priority", value)}
+                  className="space-y-3"
+                >
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="high" id="high-priority" />
+                    <Label htmlFor="high-priority" className="cursor-pointer">
+                      高优先
+                    </Label>
+                    <span className="text-xs text-gray-500 ml-2">(高优先级规则将优先执行)</span>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <RadioGroupItem value="low" id="low-priority" />
+                    <Label htmlFor="low-priority" className="cursor-pointer">
+                      低优先
+                    </Label>
+                    <span className="text-xs text-gray-500 ml-2">(当高优先级规则不匹配时执行)</span>
+                  </div>
+                </RadioGroup>
+              </div>
+
+              <div className="space-y-2 border-t pt-4">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="autoDistribute">自动分发</Label>
+                  <Switch
+                    id="autoDistribute"
+                    checked={formData.autoDistribute !== false}
+                    onCheckedChange={(checked) => updateFormData("autoDistribute", checked)}
+                  />
+                </div>
+                <p className="text-xs text-gray-500">启用后，系统将自动按规则分发流量；关闭则需手动触发分发</p>
+              </div>
+
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="createAsPackage">创建为流量包</Label>
+                  <Switch
+                    id="createAsPackage"
+                    checked={formData.createAsPackage || false}
+                    onCheckedChange={(checked) => updateFormData("createAsPackage", checked)}
+                  />
+                </div>
+                <p className="text-xs text-gray-500">启用后，可创建为可售卖流量包并设置价格</p>
+              </div>
+
+              {formData.createAsPackage && (
+                <div className="space-y-2 pl-4 border-l-2 border-blue-100">
+                  <Label htmlFor="packagePrice">流量包价格 (元/包)</Label>
+                  <Input
+                    id="packagePrice"
+                    type="number"
+                    placeholder="输入价格"
+                    value={formData.packagePrice || ""}
+                    onChange={(e) => updateFormData("packagePrice", Number.parseFloat(e.target.value))}
+                  />
+                </div>
+              )}
+
+              <div className="pt-4 flex justify-end">
+                <Button onClick={handleNext} disabled={!formData.name}>
+                  下一步
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* 步骤2：目标设置 */}
+        {currentStep === 2 && (
+          <Card>
+            <CardHeader>
+              <CardTitle>选择设备</CardTitle>
+              <CardDescription>选择需要接收流量的设备</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-4">
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="allDevices"
+                    checked={formData.allDevices || false}
+                    onCheckedChange={(checked) => {
+                      updateFormData("allDevices", checked === true)
+                      if (checked) updateFormData("targetDevices", [])
+                    }}
+                  />
+                  <Label htmlFor="allDevices" className="font-medium">
+                    所有设备
+                  </Label>
+                  <span className="text-xs text-gray-500">(系统自动分配流量到所有在线设备)</span>
+                </div>
+
+                <div className="flex items-center space-x-2">
+                  <Checkbox
+                    id="newDevices"
+                    checked={formData.newDevices || false}
+                    onCheckedChange={(checked) => updateFormData("newDevices", checked === true)}
+                    disabled={formData.allDevices}
+                  />
+                  <Label htmlFor="newDevices" className="font-medium">
+                    新添加设备
+                  </Label>
+                  <span className="text-xs text-gray-500">(仅针对新添加设备进行流量分发)</span>
+                </div>
+
+                <div className="space-y-2 pt-4">
+                  <Label className="font-medium">指定设备</Label>
+                  <p className="text-xs text-gray-500 mb-2">选择特定的设备进行流量分发</p>
+
+                  <Button
+                    variant="outline"
+                    className="w-full"
+                    disabled={formData.allDevices}
+                    onClick={() => updateFormData("showDeviceSelector", true)}
+                  >
+                    <Smartphone className="mr-2 h-4 w-4" />
+                    选择设备
+                    {formData.targetDevices?.length > 0 && (
+                      <Badge variant="secondary" className="ml-2">
+                        已选 {formData.targetDevices.length} 台
+                      </Badge>
+                    )}
+                  </Button>
+                </div>
+              </div>
+
+              <div className="pt-4 flex justify-between">
+                <Button variant="outline" onClick={handleBack}>
+                  <ArrowLeft className="mr-2 h-4 w-4" />
+                  上一步
+                </Button>
+                <Button
+                  onClick={handleNext}
+                  disabled={!formData.allDevices && (!formData.targetDevices || formData.targetDevices.length === 0)}
+                >
+                  下一步
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* 步骤3：规则配置 */}
+        {currentStep === 3 && (
+          <Card>
+            <CardHeader>
+              <CardTitle>选择流量池</CardTitle>
+              <CardDescription>选择需要分发的流量池</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {/* 普通流量包 */}
+                <Card
+                  className={`cursor-pointer hover:border-blue-400 transition-colors ${
+                    formData.selectedPool === "normal" ? "border-blue-500 bg-blue-50" : ""
+                  }`}
+                  onClick={() => updateFormData("selectedPool", "normal")}
+                >
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-base">普通流量包</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      <div className="flex justify-between">
+                        <span className="text-sm text-gray-500">价格:</span>
+                        <span className="font-medium">0.50元/流量包</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-sm text-gray-500">总添加人数:</span>
+                        <span className="font-medium">10人</span>
+                      </div>
+                      <div className="flex flex-wrap gap-1 mt-2">
+                        <Badge variant="outline">新用户</Badge>
+                        <Badge variant="outline">低活跃度</Badge>
+                        <Badge variant="outline">全国</Badge>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* 高质量流量 */}
+                <Card
+                  className={`cursor-pointer hover:border-blue-400 transition-colors ${
+                    formData.selectedPool === "high" ? "border-blue-500 bg-blue-50" : ""
+                  }`}
+                  onClick={() => updateFormData("selectedPool", "high")}
+                >
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-base">高质量流量</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      <div className="flex justify-between">
+                        <span className="text-sm text-gray-500">价格:</span>
+                        <span className="font-medium">2.50元/流量包</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-sm text-gray-500">总添加人数:</span>
+                        <span className="font-medium">25人</span>
+                      </div>
+                      <div className="flex flex-wrap gap-1 mt-2">
+                        <Badge variant="outline">高消费</Badge>
+                        <Badge variant="outline">高活跃度</Badge>
+                        <Badge variant="outline">一线城市</Badge>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+
+                {/* 精准营销流量 */}
+                <Card
+                  className={`cursor-pointer hover:border-blue-400 transition-colors ${
+                    formData.selectedPool === "precise" ? "border-blue-500 bg-blue-50" : ""
+                  }`}
+                  onClick={() => updateFormData("selectedPool", "precise")}
+                >
+                  <CardHeader className="pb-2">
+                    <CardTitle className="text-base">精准营销流量</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      <div className="flex justify-between">
+                        <span className="text-sm text-gray-500">价格:</span>
+                        <span className="font-medium">3.80元/流量包</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-sm text-gray-500">总添加人数:</span>
+                        <span className="font-medium">50人</span>
+                      </div>
+                      <div className="flex flex-wrap gap-1 mt-2">
+                        <Badge variant="outline">潜在客户</Badge>
+                        <Badge variant="outline">有购买意向</Badge>
+                        <Badge variant="outline">华东地区</Badge>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+
+              <div className="pt-4">
+                <Button variant="outline" className="w-full" onClick={() => updateFormData("isPoolSelectorOpen", true)}>
+                  <Target className="mr-2 h-4 w-4" />
+                  从流量池中挑选特定标签用户
+                </Button>
+              </div>
+
+              <div className="pt-4 flex justify-between">
+                <Button variant="outline" onClick={handleBack}>
+                  <ArrowLeft className="mr-2 h-4 w-4" />
+                  上一步
+                </Button>
+                <Button onClick={handleSubmit} disabled={!formData.selectedPool}>
+                  完成创建
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+
+      {/* 流量池选择器 */}
+      <TrafficPoolSelector
+        open={formData.isPoolSelectorOpen}
+        onOpenChange={(open) => updateFormData("isPoolSelectorOpen", open)}
+        selectedUsers={formData.selectedUsers}
+        onSelect={(users) => updateFormData("selectedUsers", users)}
+      />
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/traffic-distribution/page.tsx b/Cunkebao/app/workspace/traffic-distribution/page.tsx
new file mode 100644
index 00000000..dcd971f7
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-distribution/page.tsx
@@ -0,0 +1,266 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import {
+  ChevronLeft,
+  Plus,
+  Filter,
+  Search,
+  RefreshCw,
+  MoreVertical,
+  Clock,
+  TrendingUp,
+  Users,
+  Trash2,
+} 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 { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { Switch } from "@/components/ui/switch"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import Link from "next/link"
+
+interface DistributionPlan {
+  id: string
+  name: string
+  status: "active" | "paused"
+  source: string
+  sourceIcon: string
+  targetGroups: string[]
+  totalUsers: number
+  dailyAverage: number
+  lastUpdated: string
+  createTime: string
+  creator: string
+}
+
+export default function TrafficDistributionPage() {
+  const router = useRouter()
+  const [showFilterDialog, setShowFilterDialog] = useState(false)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [sourceFilter, setSourceFilter] = useState("all")
+  const [plans, setPlans] = useState<DistributionPlan[]>([
+    {
+      id: "1",
+      name: "抖音直播引流计划",
+      status: "active",
+      source: "douyin",
+      sourceIcon: "🎬",
+      targetGroups: ["新客户", "潜在客户"],
+      totalUsers: 1250,
+      dailyAverage: 85,
+      lastUpdated: "2024-03-18 10:30:00",
+      createTime: "2024-03-10 08:30:00",
+      creator: "admin",
+    },
+    {
+      id: "2",
+      name: "小红书种草计划",
+      status: "active",
+      source: "xiaohongshu",
+      sourceIcon: "📱",
+      targetGroups: ["女性用户", "美妆爱好者"],
+      totalUsers: 980,
+      dailyAverage: 65,
+      lastUpdated: "2024-03-17 14:20:00",
+      createTime: "2024-03-12 09:15:00",
+      creator: "marketing",
+    },
+    {
+      id: "3",
+      name: "微信社群活动",
+      status: "paused",
+      source: "wechat",
+      sourceIcon: "💬",
+      targetGroups: ["老客户", "会员"],
+      totalUsers: 2340,
+      dailyAverage: 0,
+      lastUpdated: "2024-03-15 09:45:00",
+      createTime: "2024-02-28 11:20:00",
+      creator: "social",
+    },
+  ])
+
+  // 根据筛选条件过滤计划
+  const filteredPlans = plans
+    .filter((plan) => searchQuery === "" || plan.name.toLowerCase().includes(searchQuery.toLowerCase()))
+    .filter((plan) => sourceFilter === "all" || plan.source === sourceFilter)
+
+  const handleDelete = (planId: string) => {
+    setPlans(plans.filter((plan) => plan.id !== planId))
+  }
+
+  const handleEdit = (planId: string) => {
+    router.push(`/workspace/traffic-distribution/${planId}/edit`)
+  }
+
+  const handleView = (planId: string) => {
+    router.push(`/workspace/traffic-distribution/${planId}`)
+  }
+
+  const togglePlanStatus = (planId: string) => {
+    setPlans(
+      plans.map((plan) =>
+        plan.id === planId ? { ...plan, status: plan.status === "active" ? "paused" : "active" } : plan,
+      ),
+    )
+  }
+
+  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/traffic-distribution/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"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+            <Button variant="outline" size="icon" onClick={() => setShowFilterDialog(true)}>
+              <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">
+          {filteredPlans.length === 0 ? (
+            <div className="text-center py-12 bg-white rounded-lg border">
+              <div className="text-gray-500">暂无数据</div>
+              <Button
+                variant="outline"
+                className="mt-4"
+                onClick={() => router.push("/workspace/traffic-distribution/new")}
+              >
+                创建分发计划
+              </Button>
+            </div>
+          ) : (
+            filteredPlans.map((plan) => (
+              <Card key={plan.id} className="p-4">
+                <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center space-x-2">
+                    <span className="text-xl mr-1">{plan.sourceIcon}</span>
+                    <h3 className="font-medium">{plan.name}</h3>
+                    <Badge variant={plan.status === "active" ? "success" : "secondary"}>
+                      {plan.status === "active" ? "进行中" : "已暂停"}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Switch checked={plan.status === "active"} onCheckedChange={() => togglePlanStatus(plan.id)} />
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="sm">
+                          <MoreVertical className="h-4 w-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent>
+                        <DropdownMenuItem onClick={() => handleView(plan.id)}>
+                          <Users className="h-4 w-4 mr-2" />
+                          查看
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleEdit(plan.id)}>
+                          <TrendingUp className="h-4 w-4 mr-2" />
+                          编辑
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => handleDelete(plan.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>目标人群：{plan.targetGroups.join(", ")}</div>
+                    <div>总流量：{plan.totalUsers} 人</div>
+                  </div>
+                  <div className="text-sm text-gray-500">
+                    <div>日均获取：{plan.dailyAverage} 人</div>
+                    <div>创建人：{plan.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" />
+                    上次更新：{plan.lastUpdated}
+                  </div>
+                  <div>创建时间：{plan.createTime}</div>
+                </div>
+              </Card>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* 筛选弹窗 */}
+      <Dialog open={showFilterDialog} onOpenChange={setShowFilterDialog}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>筛选分发计划</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4 py-2">
+            <div className="space-y-2">
+              <label className="text-sm font-medium">流量来源</label>
+              <Select value={sourceFilter} onValueChange={setSourceFilter}>
+                <SelectTrigger>
+                  <SelectValue placeholder="选择流量来源" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">全部来源</SelectItem>
+                  <SelectItem value="douyin">抖音</SelectItem>
+                  <SelectItem value="xiaohongshu">小红书</SelectItem>
+                  <SelectItem value="wechat">微信</SelectItem>
+                  <SelectItem value="weibo">微博</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="flex justify-end space-x-2 pt-2">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setSourceFilter("all")
+                }}
+              >
+                重置
+              </Button>
+              <Button onClick={() => setShowFilterDialog(false)}>应用筛选</Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/app/workspace/traffic-pricing/loading.tsx b/Cunkebao/app/workspace/traffic-pricing/loading.tsx
new file mode 100644
index 00000000..cec067bd
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-pricing/loading.tsx
@@ -0,0 +1,4 @@
+export default function Loading() {
+  return null
+}
+
diff --git a/Cunkebao/app/workspace/traffic-pricing/page.tsx b/Cunkebao/app/workspace/traffic-pricing/page.tsx
new file mode 100644
index 00000000..ad895263
--- /dev/null
+++ b/Cunkebao/app/workspace/traffic-pricing/page.tsx
@@ -0,0 +1,165 @@
+"use client"
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardFooter, 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 { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
+import { Share2 } from "lucide-react"
+import Link from "next/link"
+import { TrafficTeamSettings } from "@/app/components/TrafficTeamSettings"
+
+export default function TrafficPricingPage() {
+  const [activeTab, setActiveTab] = useState("pricing")
+
+  return (
+    <div className="flex-1 p-4 bg-gray-50">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-2xl font-bold">流量分发与定价</h1>
+          <Button asChild variant="outline">
+            <Link href="/workspace/traffic-distribution/new">
+              <Share2 className="mr-2 h-4 w-4" />
+              创建分发计划
+            </Link>
+          </Button>
+        </div>
+
+        <Tabs defaultValue="pricing" value={activeTab} onValueChange={setActiveTab} className="space-y-4">
+          <TabsList className="grid w-full grid-cols-2 md:w-auto md:grid-cols-3">
+            <TabsTrigger value="pricing">价格设置</TabsTrigger>
+            <TabsTrigger value="distribution">分发设置</TabsTrigger>
+            <TabsTrigger value="teams">团队设置</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="pricing" className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>基础价格设置</CardTitle>
+                <CardDescription>设置不同渠道的基础价格，这将影响所有分发计划</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="douyin-price">抖音获客价格 (元/位)</Label>
+                    <Input id="douyin-price" type="number" defaultValue="2" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="wechat-price">微信获客价格 (元/位)</Label>
+                    <Input id="wechat-price" type="number" defaultValue="3" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="xiaohongshu-price">小红书获客价格 (元/位)</Label>
+                    <Input id="xiaohongshu-price" type="number" defaultValue="4" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="phone-price">电话获客价格 (元/位)</Label>
+                    <Input id="phone-price" type="number" defaultValue="5" />
+                  </div>
+                </div>
+              </CardContent>
+              <CardFooter className="flex justify-end">
+                <Button>保存设置</Button>
+              </CardFooter>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>溢价规则设置</CardTitle>
+                <CardDescription>根据不同的客户特征设置溢价规则</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="age-pricing">年龄溢价</Label>
+                    <Select defaultValue="1.2">
+                      <SelectTrigger id="age-pricing">
+                        <SelectValue placeholder="选择溢价系数" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="1.0">无溢价 (1.0倍)</SelectItem>
+                        <SelectItem value="1.2">轻度溢价 (1.2倍)</SelectItem>
+                        <SelectItem value="1.5">中度溢价 (1.5倍)</SelectItem>
+                        <SelectItem value="2.0">高度溢价 (2.0倍)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="gender-pricing">性别溢价</Label>
+                    <Select defaultValue="1.0">
+                      <SelectTrigger id="gender-pricing">
+                        <SelectValue placeholder="选择溢价系数" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="1.0">无溢价 (1.0倍)</SelectItem>
+                        <SelectItem value="1.2">轻度溢价 (1.2倍)</SelectItem>
+                        <SelectItem value="1.5">中度溢价 (1.5倍)</SelectItem>
+                        <SelectItem value="2.0">高度溢价 (2.0倍)</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+              </CardContent>
+              <CardFooter className="flex justify-end">
+                <Button>保存设置</Button>
+              </CardFooter>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="distribution" className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>分发规则设置</CardTitle>
+                <CardDescription>设置默认的分发规则和优先级</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label className="text-base">优先分发高价值流量</Label>
+                      <p className="text-sm text-gray-500">优先分发价格更高的流量</p>
+                    </div>
+                    <Switch defaultChecked />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label className="text-base">智能匹配客户与团队</Label>
+                      <p className="text-sm text-gray-500">根据团队特性自动匹配合适的客户</p>
+                    </div>
+                    <Switch defaultChecked />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label className="text-base">均衡分发</Label>
+                      <p className="text-sm text-gray-500">尽量均衡地向各团队分发流量</p>
+                    </div>
+                    <Switch />
+                  </div>
+                </div>
+              </CardContent>
+              <CardFooter className="flex justify-end">
+                <Button>保存设置</Button>
+              </CardFooter>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="teams" className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle>团队设置</CardTitle>
+                <CardDescription>配置流量分发的团队设置</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <TrafficTeamSettings />
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Cunkebao/components.json b/Cunkebao/components.json
new file mode 100644
index 00000000..d9ef0ae5
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/AIAssistant.tsx b/Cunkebao/components/AIAssistant.tsx
new file mode 100644
index 00000000..c29d22af
--- /dev/null
+++ b/Cunkebao/components/AIAssistant.tsx
@@ -0,0 +1,104 @@
+"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/Cunkebao/components/BindDouyinQRCode.tsx b/Cunkebao/components/BindDouyinQRCode.tsx
new file mode 100644
index 00000000..41b56809
--- /dev/null
+++ b/Cunkebao/components/BindDouyinQRCode.tsx
@@ -0,0 +1,32 @@
+"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/Cunkebao/components/Charts.tsx b/Cunkebao/components/Charts.tsx
new file mode 100644
index 00000000..e6a67931
--- /dev/null
+++ b/Cunkebao/components/Charts.tsx
@@ -0,0 +1,48 @@
+"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/Cunkebao/components/TrafficTeamSettings.tsx b/Cunkebao/components/TrafficTeamSettings.tsx
new file mode 100644
index 00000000..e5b97101
--- /dev/null
+++ b/Cunkebao/components/TrafficTeamSettings.tsx
@@ -0,0 +1,150 @@
+"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/Cunkebao/components/VideoTutorialButton.tsx b/Cunkebao/components/VideoTutorialButton.tsx
new file mode 100644
index 00000000..635bcef8
--- /dev/null
+++ b/Cunkebao/components/VideoTutorialButton.tsx
@@ -0,0 +1,64 @@
+"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/Cunkebao/components/WechatFriendSelector.tsx b/Cunkebao/components/WechatFriendSelector.tsx
new file mode 100644
index 00000000..29785d2f
--- /dev/null
+++ b/Cunkebao/components/WechatFriendSelector.tsx
@@ -0,0 +1,118 @@
+"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/Cunkebao/components/WechatGroupSelector.tsx b/Cunkebao/components/WechatGroupSelector.tsx
new file mode 100644
index 00000000..e517b415
--- /dev/null
+++ b/Cunkebao/components/WechatGroupSelector.tsx
@@ -0,0 +1,111 @@
+"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/Cunkebao/components/acquisition/PlanSettingsDialog.tsx b/Cunkebao/components/acquisition/PlanSettingsDialog.tsx
new file mode 100644
index 00000000..2d4627a1
--- /dev/null
+++ b/Cunkebao/components/acquisition/PlanSettingsDialog.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { useState, useEffect } 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 { Switch } from "@/components/ui/switch"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { toast } from "@/components/ui/use-toast"
+
+interface PlanSettingsDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  planId: string
+}
+
+export function PlanSettingsDialog({ open, onOpenChange, planId }: PlanSettingsDialogProps) {
+  const [planName, setPlanName] = useState("")
+  const [isActive, setIsActive] = useState(true)
+  const [frequency, setFrequency] = useState("daily")
+  const [isLoading, setIsLoading] = useState(false)
+
+  // Simulate loading plan data
+  useEffect(() => {
+    if (open && planId) {
+      // In a real app, you would fetch the plan data here
+      setPlanName(`获客计划 ${planId}`)
+      setIsActive(true)
+      setFrequency("daily")
+    }
+  }, [open, planId])
+
+  const handleSave = () => {
+    setIsLoading(true)
+
+    // Simulate API call
+    setTimeout(() => {
+      setIsLoading(false)
+      onOpenChange(false)
+      toast({
+        title: "计划已更新",
+        description: "获客计划设置已成功保存",
+      })
+    }, 1000)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>编辑获客计划</DialogTitle>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="plan-name" className="text-right">
+              计划名称
+            </Label>
+            <Input
+              id="plan-name"
+              value={planName}
+              onChange={(e) => setPlanName(e.target.value)}
+              className="col-span-3"
+            />
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="plan-status" className="text-right">
+              计划状态
+            </Label>
+            <div className="flex items-center space-x-2 col-span-3">
+              <Switch id="plan-status" checked={isActive} onCheckedChange={setIsActive} />
+              <Label htmlFor="plan-status">{isActive ? "进行中" : "已暂停"}</Label>
+            </div>
+          </div>
+          <div className="grid grid-cols-4 items-center gap-4">
+            <Label htmlFor="plan-frequency" className="text-right">
+              执行频率
+            </Label>
+            <Select value={frequency} onValueChange={setFrequency}>
+              <SelectTrigger className="col-span-3">
+                <SelectValue placeholder="选择执行频率" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="hourly">每小时</SelectItem>
+                <SelectItem value="daily">每天</SelectItem>
+                <SelectItem value="weekly">每周</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            取消
+          </Button>
+          <Button onClick={handleSave} disabled={isLoading}>
+            {isLoading ? "保存中..." : "保存更改"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
diff --git a/Cunkebao/components/api-documentation-tooltip.tsx b/Cunkebao/components/api-documentation-tooltip.tsx
new file mode 100644
index 00000000..a3d6550f
--- /dev/null
+++ b/Cunkebao/components/api-documentation-tooltip.tsx
@@ -0,0 +1,20 @@
+import { HelpCircle } from "lucide-react"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+
+export function ApiDocumentationTooltip() {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <HelpCircle className="h-4 w-4 text-gray-400 cursor-help" />
+        </TooltipTrigger>
+        <TooltipContent className="max-w-xs">
+          <p className="text-xs">
+            计划接口允许您通过API将外部系统的客户数据直接导入到存客宝。支持多种编程语言和第三方平台集成。
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
diff --git a/Cunkebao/components/device-grid.tsx b/Cunkebao/components/device-grid.tsx
new file mode 100644
index 00000000..8688f88f
--- /dev/null
+++ b/Cunkebao/components/device-grid.tsx
@@ -0,0 +1,105 @@
+"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/Cunkebao/components/icons/apple-icon.tsx b/Cunkebao/components/icons/apple-icon.tsx
new file mode 100644
index 00000000..79e2e8e0
--- /dev/null
+++ b/Cunkebao/components/icons/apple-icon.tsx
@@ -0,0 +1,12 @@
+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/Cunkebao/components/icons/wechat-icon.tsx b/Cunkebao/components/icons/wechat-icon.tsx
new file mode 100644
index 00000000..3551b868
--- /dev/null
+++ b/Cunkebao/components/icons/wechat-icon.tsx
@@ -0,0 +1,13 @@
+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/Cunkebao/components/poster-selector.tsx b/Cunkebao/components/poster-selector.tsx
new file mode 100644
index 00000000..a9584970
--- /dev/null
+++ b/Cunkebao/components/poster-selector.tsx
@@ -0,0 +1,85 @@
+"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/Cunkebao/components/theme-provider.tsx b/Cunkebao/components/theme-provider.tsx
new file mode 100644
index 00000000..55c2f6eb
--- /dev/null
+++ b/Cunkebao/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+'use client'
+
+import * as React from 'react'
+import {
+  ThemeProvider as NextThemesProvider,
+  type ThemeProviderProps,
+} from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/Cunkebao/components/ui/accordion.tsx b/Cunkebao/components/ui/accordion.tsx
new file mode 100644
index 00000000..0fe6fad7
--- /dev/null
+++ b/Cunkebao/components/ui/accordion.tsx
@@ -0,0 +1,52 @@
+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/Cunkebao/components/ui/alert-dialog.tsx b/Cunkebao/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..25e7b474
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/alert.tsx b/Cunkebao/components/ui/alert.tsx
new file mode 100644
index 00000000..41fa7e05
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/aspect-ratio.tsx b/Cunkebao/components/ui/aspect-ratio.tsx
new file mode 100644
index 00000000..d6a5226f
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/avatar.tsx b/Cunkebao/components/ui/avatar.tsx
new file mode 100644
index 00000000..0edba21f
--- /dev/null
+++ b/Cunkebao/components/ui/avatar.tsx
@@ -0,0 +1,39 @@
+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/Cunkebao/components/ui/badge.tsx b/Cunkebao/components/ui/badge.tsx
new file mode 100644
index 00000000..087817b4
--- /dev/null
+++ b/Cunkebao/components/ui/badge.tsx
@@ -0,0 +1,30 @@
+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-md 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 shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow 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/Cunkebao/components/ui/breadcrumb.tsx b/Cunkebao/components/ui/breadcrumb.tsx
new file mode 100644
index 00000000..60e6c96f
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/button.tsx b/Cunkebao/components/ui/button.tsx
new file mode 100644
index 00000000..353c0669
--- /dev/null
+++ b/Cunkebao/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 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    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/Cunkebao/components/ui/calendar.tsx b/Cunkebao/components/ui/calendar.tsx
new file mode 100644
index 00000000..79870661
--- /dev/null
+++ b/Cunkebao/components/ui/calendar.tsx
@@ -0,0 +1,60 @@
+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/Cunkebao/components/ui/card.tsx b/Cunkebao/components/ui/card.tsx
new file mode 100644
index 00000000..98f60838
--- /dev/null
+++ b/Cunkebao/components/ui/card.tsx
@@ -0,0 +1,44 @@
+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-xl border bg-card text-card-foreground shadow", 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("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/Cunkebao/components/ui/carousel.tsx b/Cunkebao/components/ui/carousel.tsx
new file mode 100644
index 00000000..ec505d00
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/chart.tsx b/Cunkebao/components/ui/chart.tsx
new file mode 100644
index 00000000..8620baa3
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/checkbox.tsx b/Cunkebao/components/ui/checkbox.tsx
new file mode 100644
index 00000000..57ae455b
--- /dev/null
+++ b/Cunkebao/components/ui/checkbox.tsx
@@ -0,0 +1,27 @@
+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/Cunkebao/components/ui/collapsible.tsx b/Cunkebao/components/ui/collapsible.tsx
new file mode 100644
index 00000000..9fa48946
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/command.tsx b/Cunkebao/components/ui/command.tsx
new file mode 100644
index 00000000..59a26452
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/context-menu.tsx b/Cunkebao/components/ui/context-menu.tsx
new file mode 100644
index 00000000..93ef37ba
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/date-range-picker.tsx b/Cunkebao/components/ui/date-range-picker.tsx
new file mode 100644
index 00000000..ca97bb9e
--- /dev/null
+++ b/Cunkebao/components/ui/date-range-picker.tsx
@@ -0,0 +1,58 @@
+"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/Cunkebao/components/ui/dialog.tsx b/Cunkebao/components/ui/dialog.tsx
new file mode 100644
index 00000000..c574d995
--- /dev/null
+++ b/Cunkebao/components/ui/dialog.tsx
@@ -0,0 +1,96 @@
+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/Cunkebao/components/ui/drawer.tsx b/Cunkebao/components/ui/drawer.tsx
new file mode 100644
index 00000000..6a0ef53d
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/dropdown-menu.tsx b/Cunkebao/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000..1d17b2df
--- /dev/null
+++ b/Cunkebao/components/ui/dropdown-menu.tsx
@@ -0,0 +1,181 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons"
+
+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}
+    <ChevronRightIcon 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-pointer 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>
+        <CheckIcon 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>
+        <DotFilledIcon className="h-4 w-4 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/Cunkebao/components/ui/form.tsx b/Cunkebao/components/ui/form.tsx
new file mode 100644
index 00000000..ce264aef
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/hover-card.tsx b/Cunkebao/components/ui/hover-card.tsx
new file mode 100644
index 00000000..e54d91cf
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/input-otp.tsx b/Cunkebao/components/ui/input-otp.tsx
new file mode 100644
index 00000000..f66fcfa0
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/input.tsx b/Cunkebao/components/ui/input.tsx
new file mode 100644
index 00000000..8d40e2c8
--- /dev/null
+++ b/Cunkebao/components/ui/input.tsx
@@ -0,0 +1,23 @@
+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-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium 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}
+    />
+  )
+})
+Input.displayName = "Input"
+
+export { Input }
+
diff --git a/Cunkebao/components/ui/label.tsx b/Cunkebao/components/ui/label.tsx
new file mode 100644
index 00000000..86d13fe9
--- /dev/null
+++ b/Cunkebao/components/ui/label.tsx
@@ -0,0 +1,18 @@
+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/Cunkebao/components/ui/menubar.tsx b/Cunkebao/components/ui/menubar.tsx
new file mode 100644
index 00000000..5586fa9b
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/navigation-menu.tsx b/Cunkebao/components/ui/navigation-menu.tsx
new file mode 100644
index 00000000..1419f566
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/pagination.tsx b/Cunkebao/components/ui/pagination.tsx
new file mode 100644
index 00000000..8ee88c9b
--- /dev/null
+++ b/Cunkebao/components/ui/pagination.tsx
@@ -0,0 +1,82 @@
+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/Cunkebao/components/ui/popover.tsx b/Cunkebao/components/ui/popover.tsx
new file mode 100644
index 00000000..4a3f0762
--- /dev/null
+++ b/Cunkebao/components/ui/popover.tsx
@@ -0,0 +1,30 @@
+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/Cunkebao/components/ui/preview-dialog.tsx b/Cunkebao/components/ui/preview-dialog.tsx
new file mode 100644
index 00000000..01842c3f
--- /dev/null
+++ b/Cunkebao/components/ui/preview-dialog.tsx
@@ -0,0 +1,35 @@
+"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/Cunkebao/components/ui/progress.tsx b/Cunkebao/components/ui/progress.tsx
new file mode 100644
index 00000000..d9a062c3
--- /dev/null
+++ b/Cunkebao/components/ui/progress.tsx
@@ -0,0 +1,24 @@
+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/Cunkebao/components/ui/radio-group.tsx b/Cunkebao/components/ui/radio-group.tsx
new file mode 100644
index 00000000..242fa9bb
--- /dev/null
+++ b/Cunkebao/components/ui/radio-group.tsx
@@ -0,0 +1,37 @@
+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/Cunkebao/components/ui/resizable.tsx b/Cunkebao/components/ui/resizable.tsx
new file mode 100644
index 00000000..f4bc5586
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/scroll-area.tsx b/Cunkebao/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..5fcff6ca
--- /dev/null
+++ b/Cunkebao/components/ui/scroll-area.tsx
@@ -0,0 +1,39 @@
+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/Cunkebao/components/ui/select.tsx b/Cunkebao/components/ui/select.tsx
new file mode 100644
index 00000000..6191083c
--- /dev/null
+++ b/Cunkebao/components/ui/select.tsx
@@ -0,0 +1,102 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons"
+
+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-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDownIcon 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("px-2 py-1.5 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-2 pr-8 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 right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon 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/Cunkebao/components/ui/separator.tsx b/Cunkebao/components/ui/separator.tsx
new file mode 100644
index 00000000..12d81c4a
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/sheet.tsx b/Cunkebao/components/ui/sheet.tsx
new file mode 100644
index 00000000..a37f17ba
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/sidebar.tsx b/Cunkebao/components/ui/sidebar.tsx
new file mode 100644
index 00000000..eeb2d7ae
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/skeleton.tsx b/Cunkebao/components/ui/skeleton.tsx
new file mode 100644
index 00000000..01b8b6d4
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/slider.tsx b/Cunkebao/components/ui/slider.tsx
new file mode 100644
index 00000000..698565ee
--- /dev/null
+++ b/Cunkebao/components/ui/slider.tsx
@@ -0,0 +1,26 @@
+"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/Cunkebao/components/ui/sonner.tsx b/Cunkebao/components/ui/sonner.tsx
new file mode 100644
index 00000000..452f4d9f
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/switch.tsx b/Cunkebao/components/ui/switch.tsx
new file mode 100644
index 00000000..441d0315
--- /dev/null
+++ b/Cunkebao/components/ui/switch.tsx
@@ -0,0 +1,28 @@
+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/Cunkebao/components/ui/table.tsx b/Cunkebao/components/ui/table.tsx
new file mode 100644
index 00000000..2dc72503
--- /dev/null
+++ b/Cunkebao/components/ui/table.tsx
@@ -0,0 +1,70 @@
+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("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", 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-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td
+      ref={ref}
+      className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
+      {...props}
+    />
+  ),
+)
+TableCell.displayName = "TableCell"
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell }
+
diff --git a/Cunkebao/components/ui/tabs.tsx b/Cunkebao/components/ui/tabs.tsx
new file mode 100644
index 00000000..592041e8
--- /dev/null
+++ b/Cunkebao/components/ui/tabs.tsx
@@ -0,0 +1,54 @@
+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-9 items-center justify-center rounded-lg 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-md px-3 py-1 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",
+      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/Cunkebao/components/ui/textarea.tsx b/Cunkebao/components/ui/textarea.tsx
new file mode 100644
index 00000000..c97a74f5
--- /dev/null
+++ b/Cunkebao/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+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/Cunkebao/components/ui/toast.ts b/Cunkebao/components/ui/toast.ts
new file mode 100644
index 00000000..633caeca
--- /dev/null
+++ b/Cunkebao/components/ui/toast.ts
@@ -0,0 +1,114 @@
+"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/Cunkebao/components/ui/toaster.tsx b/Cunkebao/components/ui/toaster.tsx
new file mode 100644
index 00000000..171beb46
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/toggle-group.tsx b/Cunkebao/components/ui/toggle-group.tsx
new file mode 100644
index 00000000..1c876bbe
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/toggle.tsx b/Cunkebao/components/ui/toggle.tsx
new file mode 100644
index 00000000..c19bea37
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/tooltip.tsx b/Cunkebao/components/ui/tooltip.tsx
new file mode 100644
index 00000000..e04b4b0b
--- /dev/null
+++ b/Cunkebao/components/ui/tooltip.tsx
@@ -0,0 +1,35 @@
+"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/Cunkebao/components/ui/use-mobile.tsx b/Cunkebao/components/ui/use-mobile.tsx
new file mode 100644
index 00000000..2b0fe1df
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/components/ui/use-toast.ts b/Cunkebao/components/ui/use-toast.ts
new file mode 100644
index 00000000..fdcddba5
--- /dev/null
+++ b/Cunkebao/components/ui/use-toast.ts
@@ -0,0 +1,189 @@
+"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/Cunkebao/docs/api-guide.ts b/Cunkebao/docs/api-guide.ts
new file mode 100644
index 00000000..58f68392
--- /dev/null
+++ b/Cunkebao/docs/api-guide.ts
@@ -0,0 +1,295 @@
+interface ApiHeader {
+  name: string
+  value: string
+  description: string
+  required: boolean
+}
+
+interface ApiParameter {
+  name: string
+  type: string
+  description: string
+  required: boolean
+}
+
+interface ApiEndpoint {
+  method: string
+  url: string
+  description: string
+  headers: ApiHeader[]
+  parameters: ApiParameter[]
+  response: any
+}
+
+interface CodeExample {
+  language: string
+  title: string
+  code: string
+}
+
+interface ApiGuide {
+  title: string
+  description: string
+  endpoints: ApiEndpoint[]
+  examples: CodeExample[]
+}
+
+export function getApiGuideForScenario(scenarioId: string, channel: string): ApiGuide {
+  const baseUrl = typeof window !== "undefined" ? window.location.origin : ""
+  const webhookUrl = `${baseUrl}/api/scenarios/${channel}/${scenarioId}/webhook`
+
+  return {
+    title: `${getChannelName(channel)}获客计划接口文档`,
+    description: `通过此接口，您可以将外部系统收集的客户信息直接导入到存客宝的${getChannelName(channel)}获客计划中。`,
+    endpoints: [
+      {
+        method: "POST",
+        url: webhookUrl,
+        description: "添加新客户到获客计划",
+        headers: [
+          {
+            name: "X-API-KEY",
+            value: "您的API密钥",
+            description: "用于身份验证的API密钥",
+            required: true,
+          },
+          {
+            name: "Content-Type",
+            value: "application/json",
+            description: "请求体格式",
+            required: true,
+          },
+        ],
+        parameters: [
+          {
+            name: "name",
+            type: "string",
+            description: "客户姓名",
+            required: true,
+          },
+          {
+            name: "phone",
+            type: "string",
+            description: "客户手机号码",
+            required: true,
+          },
+          {
+            name: "source",
+            type: "string",
+            description: "客户来源",
+            required: false,
+          },
+          {
+            name: "remark",
+            type: "string",
+            description: "备注信息",
+            required: false,
+          },
+          {
+            name: "tags",
+            type: "array<string>",
+            description: "客户标签",
+            required: false,
+          },
+        ],
+        response: {
+          success: true,
+          data: {
+            id: "12345",
+            name: "张三",
+            phone: "13800138000",
+            createdAt: "2023-05-15T08:30:00Z",
+          },
+          message: "客户添加成功",
+        },
+      },
+      {
+        method: "GET",
+        url: `${webhookUrl}?name=张三&phone=13800138000`,
+        description: "通过GET请求添加新客户（适用于简单集成场景）",
+        headers: [
+          {
+            name: "X-API-KEY",
+            value: "您的API密钥",
+            description: "用于身份验证的API密钥",
+            required: true,
+          },
+        ],
+        parameters: [
+          {
+            name: "name",
+            type: "string",
+            description: "客户姓名",
+            required: true,
+          },
+          {
+            name: "phone",
+            type: "string",
+            description: "客户手机号码",
+            required: true,
+          },
+          {
+            name: "source",
+            type: "string",
+            description: "客户来源",
+            required: false,
+          },
+          {
+            name: "remark",
+            type: "string",
+            description: "备注信息",
+            required: false,
+          },
+        ],
+        response: {
+          success: true,
+          data: {
+            id: "12345",
+            name: "张三",
+            phone: "13800138000",
+            createdAt: "2023-05-15T08:30:00Z",
+          },
+          message: "客户添加成功",
+        },
+      },
+    ],
+    examples: [
+      {
+        language: "curl",
+        title: "CURL",
+        code: `curl -X POST "${webhookUrl}" \\
+  -H "X-API-KEY: your_api_key" \\
+  -H "Content-Type: application/json" \\
+  -d '{
+    "name": "张三",
+    "phone": "13800138000",
+    "source": "官网表单",
+    "remark": "对产品很感兴趣"
+  }'`,
+      },
+      {
+        language: "python",
+        title: "Python",
+        code: `import requests
+
+url = "${webhookUrl}"
+headers = {
+    "X-API-KEY": "your_api_key",
+    "Content-Type": "application/json"
+}
+data = {
+    "name": "张三",
+    "phone": "13800138000",
+    "source": "官网表单",
+    "remark": "对产品很感兴趣"
+}
+
+response = requests.post(url, headers=headers, json=data)
+print(response.json())`,
+      },
+      {
+        language: "javascript",
+        title: "JavaScript",
+        code: `// 使用fetch API
+fetch("${webhookUrl}", {
+  method: "POST",
+  headers: {
+    "X-API-KEY": "your_api_key",
+    "Content-Type": "application/json"
+  },
+  body: JSON.stringify({
+    name: "张三",
+    phone: "13800138000",
+    source: "官网表单",
+    remark: "对产品很感兴趣"
+  })
+})
+.then(response => response.json())
+.then(data => console.log(data))
+.catch(error => console.error("Error:", error));`,
+      },
+      {
+        language: "java",
+        title: "Java",
+        code: `import java.net.URI;
+import java.net.http.HttpClient;
+import java.net.http.HttpRequest;
+import java.net.http.HttpResponse;
+
+public class ApiExample {
+    public static void main(String[] args) {
+        try {
+            String url = "${webhookUrl}";
+            String requestBody = "{" +
+                "\\\"name\\\": \\\"张三\\\"," +
+                "\\\"phone\\\": \\\"13800138000\\\"," +
+                "\\\"source\\\": \\\"官网表单\\\"," +
+                "\\\"remark\\\": \\\"对产品很感兴趣\\\"" +
+                "}";
+            
+            HttpClient client = HttpClient.newHttpClient();
+            HttpRequest request = HttpRequest.newBuilder()
+                .uri(URI.create(url))
+                .header("X-API-KEY", "your_api_key")
+                .header("Content-Type", "application/json")
+                .POST(HttpRequest.BodyPublishers.ofString(requestBody))
+                .build();
+                
+            HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
+            System.out.println(response.body());
+        } catch (Exception e) {
+            e.printStackTrace();
+        }
+    }
+}`,
+      },
+      {
+        language: "php",
+        title: "PHP",
+        code: `<?php
+$url = "${webhookUrl}";
+$data = array(
+    'name' => '张三',
+    'phone' => '13800138000',
+    'source' => '官网表单',
+    'remark' => '对产品很感兴趣'
+);
+
+$options = array(
+    'http' => array(
+        'header'  => "X-API-KEY: your_api_key\\r\\nContent-type: application/json\\r\\n",
+        'method'  => 'POST',
+        'content' => json_encode($data)
+    )
+);
+
+$context  = stream_context_create($options);
+$result = file_get_contents($url, false, $context);
+
+if ($result === FALSE) {
+    echo "Error";
+} else {
+    var_dump(json_decode($result));
+}
+?>`,
+      },
+    ],
+  }
+}
+
+function getChannelName(channel: string): string {
+  const channelMap: Record<string, string> = {
+    douyin: "抖音",
+    kuaishou: "快手",
+    xiaohongshu: "小红书",
+    weibo: "微博",
+    haibao: "海报",
+    phone: "电话",
+    gongzhonghao: "公众号",
+    weixinqun: "微信群",
+    payment: "付款码",
+    api: "API",
+  }
+  return channelMap[channel] || channel
+}
+
diff --git a/Cunkebao/hooks/use-debounce.ts b/Cunkebao/hooks/use-debounce.ts
new file mode 100644
index 00000000..f426d239
--- /dev/null
+++ b/Cunkebao/hooks/use-debounce.ts
@@ -0,0 +1,18 @@
+"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/Cunkebao/hooks/use-mobile.tsx b/Cunkebao/hooks/use-mobile.tsx
new file mode 100644
index 00000000..2b0fe1df
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/hooks/use-toast.ts b/Cunkebao/hooks/use-toast.ts
new file mode 100644
index 00000000..02e111d8
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/hooks/useDeviceStatusPolling.ts b/Cunkebao/hooks/useDeviceStatusPolling.ts
new file mode 100644
index 00000000..8863e592
--- /dev/null
+++ b/Cunkebao/hooks/useDeviceStatusPolling.ts
@@ -0,0 +1,47 @@
+"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/Cunkebao/lib/api/auth.ts b/Cunkebao/lib/api/auth.ts
new file mode 100644
index 00000000..c17c48c5
--- /dev/null
+++ b/Cunkebao/lib/api/auth.ts
@@ -0,0 +1,69 @@
+// 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/Cunkebao/lib/api/content.ts b/Cunkebao/lib/api/content.ts
new file mode 100644
index 00000000..e5e52617
--- /dev/null
+++ b/Cunkebao/lib/api/content.ts
@@ -0,0 +1,125 @@
+import type { ApiResponse, PaginatedResponse } from "@/types/common"
+import type { ContentLibrary, ContentItem } from "@/types/content-library"
+
+const API_BASE = "/api/content"
+
+// 内容库API
+export const contentApi = {
+  // 创建内容库
+  async createLibrary(data: Partial<ContentLibrary>): Promise<ApiResponse<ContentLibrary>> {
+    const response = await fetch(`${API_BASE}/libraries`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    })
+    return response.json()
+  },
+
+  // 获取内容库列表
+  async getLibraries(params: {
+    page?: number
+    pageSize?: number
+    search?: string
+    type?: string
+  }): Promise<ApiResponse<PaginatedResponse<ContentLibrary>>> {
+    const queryString = new URLSearchParams()
+
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== "") {
+        queryString.append(key, String(value))
+      }
+    })
+
+    const response = await fetch(`${API_BASE}/libraries?${queryString.toString()}`)
+    return response.json()
+  },
+
+  // 获取内容库详情
+  async getLibraryById(id: string): Promise<ApiResponse<ContentLibrary>> {
+    const response = await fetch(`${API_BASE}/libraries/${id}`)
+    return response.json()
+  },
+
+  // 更新内容库
+  async updateLibrary(id: string, data: Partial<ContentLibrary>): Promise<ApiResponse<ContentLibrary>> {
+    const response = await fetch(`${API_BASE}/libraries/${id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    })
+    return response.json()
+  },
+
+  // 删除内容库
+  async deleteLibrary(id: string): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/libraries/${id}`, {
+      method: "DELETE",
+    })
+    return response.json()
+  },
+
+  // 创建内容项
+  async createItem(libraryId: string, data: Partial<ContentItem>): Promise<ApiResponse<ContentItem>> {
+    const response = await fetch(`${API_BASE}/libraries/${libraryId}/items`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    })
+    return response.json()
+  },
+
+  // 获取内容项列表
+  async getItems(
+    libraryId: string,
+    params: {
+      page?: number
+      pageSize?: number
+      search?: string
+      type?: string
+    },
+  ): Promise<ApiResponse<PaginatedResponse<ContentItem>>> {
+    const queryString = new URLSearchParams()
+
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== "") {
+        queryString.append(key, String(value))
+      }
+    })
+
+    const response = await fetch(`${API_BASE}/libraries/${libraryId}/items?${queryString.toString()}`)
+    return response.json()
+  },
+
+  // 获取内容项详情
+  async getItemById(libraryId: string, itemId: string): Promise<ApiResponse<ContentItem>> {
+    const response = await fetch(`${API_BASE}/libraries/${libraryId}/items/${itemId}`)
+    return response.json()
+  },
+
+  // 更新内容项
+  async updateItem(libraryId: string, itemId: string, data: Partial<ContentItem>): Promise<ApiResponse<ContentItem>> {
+    const response = await fetch(`${API_BASE}/libraries/${libraryId}/items/${itemId}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    })
+    return response.json()
+  },
+
+  // 删除内容项
+  async deleteItem(libraryId: string, itemId: string): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/libraries/${libraryId}/items/${itemId}`, {
+      method: "DELETE",
+    })
+    return response.json()
+  },
+}
+
diff --git a/Cunkebao/lib/api/devices.ts b/Cunkebao/lib/api/devices.ts
new file mode 100644
index 00000000..69fafe0d
--- /dev/null
+++ b/Cunkebao/lib/api/devices.ts
@@ -0,0 +1,131 @@
+import type {
+  ApiResponse,
+  Device,
+  DeviceStats,
+  DeviceTaskRecord,
+  PaginatedResponse,
+  QueryDeviceParams,
+  CreateDeviceParams,
+  UpdateDeviceParams,
+  DeviceStatus,
+} 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/Cunkebao/lib/api/index.ts b/Cunkebao/lib/api/index.ts
new file mode 100644
index 00000000..411906f4
--- /dev/null
+++ b/Cunkebao/lib/api/index.ts
@@ -0,0 +1,8 @@
+// 导出所有API客户端，方便统一导入
+export * from "./scenarios"
+export * from "./devices"
+export * from "./users"
+export * from "./content"
+export * from "./traffic"
+export * from "./workspace"
+
diff --git a/Cunkebao/lib/api/scenarios.ts b/Cunkebao/lib/api/scenarios.ts
new file mode 100644
index 00000000..d09b797b
--- /dev/null
+++ b/Cunkebao/lib/api/scenarios.ts
@@ -0,0 +1,112 @@
+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/Cunkebao/lib/api/traffic.ts b/Cunkebao/lib/api/traffic.ts
new file mode 100644
index 00000000..0d237ab4
--- /dev/null
+++ b/Cunkebao/lib/api/traffic.ts
@@ -0,0 +1,122 @@
+import type { ApiResponse, PaginatedResponse } from "@/types/common"
+import type { TrafficPool, TrafficDistribution } from "@/types/traffic"
+
+const API_BASE = "/api/traffic"
+
+// 流量池API
+export const trafficApi = {
+  // 创建流量池
+  async createPool(data: Partial<TrafficPool>): Promise<ApiResponse<TrafficPool>> {
+    const response = await fetch(`${API_BASE}/pools`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    })
+    return response.json()
+  },
+
+  // 获取流量池列表
+  async getPools(params: {
+    page?: number
+    pageSize?: number
+    search?: string
+    type?: string
+  }): Promise<ApiResponse<PaginatedResponse<TrafficPool>>> {
+    const queryString = new URLSearchParams()
+
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== "") {
+        queryString.append(key, String(value))
+      }
+    })
+
+    const response = await fetch(`${API_BASE}/pools?${queryString.toString()}`)
+    return response.json()
+  },
+
+  // 获取流量池详情
+  async getPoolById(id: string): Promise<ApiResponse<TrafficPool>> {
+    const response = await fetch(`${API_BASE}/pools/${id}`)
+    return response.json()
+  },
+
+  // 更新流量池
+  async updatePool(id: string, data: Partial<TrafficPool>): Promise<ApiResponse<TrafficPool>> {
+    const response = await fetch(`${API_BASE}/pools/${id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    })
+    return response.json()
+  },
+
+  // 删除流量池
+  async deletePool(id: string): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/pools/${id}`, {
+      method: "DELETE",
+    })
+    return response.json()
+  },
+
+  // 创建流量分配
+  async createDistribution(data: Partial<TrafficDistribution>): Promise<ApiResponse<TrafficDistribution>> {
+    const response = await fetch(`${API_BASE}/distributions`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    })
+    return response.json()
+  },
+
+  // 获取流量分配列表
+  async getDistributions(params: {
+    page?: number
+    pageSize?: number
+    search?: string
+    poolId?: string
+  }): Promise<ApiResponse<PaginatedResponse<TrafficDistribution>>> {
+    const queryString = new URLSearchParams()
+
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== "") {
+        queryString.append(key, String(value))
+      }
+    })
+
+    const response = await fetch(`${API_BASE}/distributions?${queryString.toString()}`)
+    return response.json()
+  },
+
+  // 获取流量分配详情
+  async getDistributionById(id: string): Promise<ApiResponse<TrafficDistribution>> {
+    const response = await fetch(`${API_BASE}/distributions/${id}`)
+    return response.json()
+  },
+
+  // 更新流量分配
+  async updateDistribution(id: string, data: Partial<TrafficDistribution>): Promise<ApiResponse<TrafficDistribution>> {
+    const response = await fetch(`${API_BASE}/distributions/${id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    })
+    return response.json()
+  },
+
+  // 删除流量分配
+  async deleteDistribution(id: string): Promise<ApiResponse<void>> {
+    const response = await fetch(`${API_BASE}/distributions/${id}`, {
+      method: "DELETE",
+    })
+    return response.json()
+  },
+}
+
diff --git a/Cunkebao/lib/api/users.ts b/Cunkebao/lib/api/users.ts
new file mode 100644
index 00000000..550bfdc5
--- /dev/null
+++ b/Cunkebao/lib/api/users.ts
@@ -0,0 +1,91 @@
+import type { TrafficUser } from "@/types/traffic"
+import type { ApiResponse } from "@/types/common"
+
+const API_BASE = "/api/users"
+
+// 用户管理API
+export const userApi = {
+  // 查询用户列表
+  async query(params: {
+    page?: number
+    pageSize?: number
+    search?: string
+    category?: string
+    source?: string
+    status?: string
+    startDate?: string
+    endDate?: string
+    wechatSource?: string
+  }): Promise<{
+    users: TrafficUser[]
+    pagination: {
+      total: number
+      totalPages: number
+      currentPage: number
+      pageSize: number
+    }
+    stats: {
+      total: number
+      todayNew: number
+      categoryStats: {
+        potential: number
+        customer: number
+        lost: number
+      }
+    }
+  }> {
+    const queryString = new URLSearchParams()
+
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null && value !== "") {
+        queryString.append(key, String(value))
+      }
+    })
+
+    const response = await fetch(`${API_BASE}?${queryString.toString()}`)
+    return response.json()
+  },
+
+  // 获取用户详情
+  async getById(id: string): Promise<ApiResponse<TrafficUser>> {
+    const response = await fetch(`${API_BASE}/${id}`)
+    return response.json()
+  },
+
+  // 更新用户信息
+  async update(id: string, data: Partial<TrafficUser>): Promise<ApiResponse<TrafficUser>> {
+    const response = await fetch(`${API_BASE}/${id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    })
+    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({ userIds: ids, tags }),
+    })
+    return response.json()
+  },
+
+  // 批量导出用户数据
+  async exportUsers(ids: string[]): Promise<Blob> {
+    const response = await fetch(`${API_BASE}/export`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ userIds: ids }),
+    })
+    return response.blob()
+  },
+}
+
diff --git a/Cunkebao/lib/api/workspace.ts b/Cunkebao/lib/api/workspace.ts
new file mode 100644
index 00000000..79bf8b70
--- /dev/null
+++ b/Cunkebao/lib/api/workspace.ts
@@ -0,0 +1,319 @@
+import type { ApiResponse, PaginatedResponse } from "@/types/common"
+import type { MomentsSync, GroupSync, GroupPush, AutoLike, AutoGroup } from "@/types/workspace"
+
+const API_BASE = "/api/workspace"
+
+// 工作区API
+export const workspaceApi = {
+  // 朋友圈同步API
+  moments: {
+    // 创建朋友圈同步任务
+    async create(data: Partial<MomentsSync>): Promise<ApiResponse<MomentsSync>> {
+      const response = await fetch(`${API_BASE}/moments-sync`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      })
+      return response.json()
+    },
+
+    // 获取朋友圈同步任务列表
+    async getList(params: {
+      page?: number
+      pageSize?: number
+      status?: string
+    }): Promise<ApiResponse<PaginatedResponse<MomentsSync>>> {
+      const queryString = new URLSearchParams()
+
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== "") {
+          queryString.append(key, String(value))
+        }
+      })
+
+      const response = await fetch(`${API_BASE}/moments-sync?${queryString.toString()}`)
+      return response.json()
+    },
+
+    // 获取朋友圈同步任务详情
+    async getById(id: string): Promise<ApiResponse<MomentsSync>> {
+      const response = await fetch(`${API_BASE}/moments-sync/${id}`)
+      return response.json()
+    },
+
+    // 更新朋友圈同步任务
+    async update(id: string, data: Partial<MomentsSync>): Promise<ApiResponse<MomentsSync>> {
+      const response = await fetch(`${API_BASE}/moments-sync/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      })
+      return response.json()
+    },
+
+    // 删除朋友圈同步任务
+    async delete(id: string): Promise<ApiResponse<void>> {
+      const response = await fetch(`${API_BASE}/moments-sync/${id}`, {
+        method: "DELETE",
+      })
+      return response.json()
+    },
+
+    // 启动朋友圈同步任务
+    async start(id: string): Promise<ApiResponse<void>> {
+      const response = await fetch(`${API_BASE}/moments-sync/${id}/start`, {
+        method: "POST",
+      })
+      return response.json()
+    },
+
+    // 暂停朋友圈同步任务
+    async pause(id: string): Promise<ApiResponse<void>> {
+      const response = await fetch(`${API_BASE}/moments-sync/${id}/pause`, {
+        method: "POST",
+      })
+      return response.json()
+    },
+  },
+
+  // 群同步API
+  groupSync: {
+    // 创建群同步任务
+    async create(data: Partial<GroupSync>): Promise<ApiResponse<GroupSync>> {
+      const response = await fetch(`${API_BASE}/group-sync`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      })
+      return response.json()
+    },
+
+    // 获取群同步任务列表
+    async getList(params: {
+      page?: number
+      pageSize?: number
+      status?: string
+    }): Promise<ApiResponse<PaginatedResponse<GroupSync>>> {
+      const queryString = new URLSearchParams()
+
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== "") {
+          queryString.append(key, String(value))
+        }
+      })
+
+      const response = await fetch(`${API_BASE}/group-sync?${queryString.toString()}`)
+      return response.json()
+    },
+
+    // 获取群同步任务详情
+    async getById(id: string): Promise<ApiResponse<GroupSync>> {
+      const response = await fetch(`${API_BASE}/group-sync/${id}`)
+      return response.json()
+    },
+
+    // 更新群同步任务
+    async update(id: string, data: Partial<GroupSync>): Promise<ApiResponse<GroupSync>> {
+      const response = await fetch(`${API_BASE}/group-sync/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      })
+      return response.json()
+    },
+
+    // 删除群同步任务
+    async delete(id: string): Promise<ApiResponse<void>> {
+      const response = await fetch(`${API_BASE}/group-sync/${id}`, {
+        method: "DELETE",
+      })
+      return response.json()
+    },
+  },
+
+  // 群发API
+  groupPush: {
+    // 创建群发任务
+    async create(data: Partial<GroupPush>): Promise<ApiResponse<GroupPush>> {
+      const response = await fetch(`${API_BASE}/group-push`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      })
+      return response.json()
+    },
+
+    // 获取群发任务列表
+    async getList(params: {
+      page?: number
+      pageSize?: number
+      status?: string
+    }): Promise<ApiResponse<PaginatedResponse<GroupPush>>> {
+      const queryString = new URLSearchParams()
+
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== "") {
+          queryString.append(key, String(value))
+        }
+      })
+
+      const response = await fetch(`${API_BASE}/group-push?${queryString.toString()}`)
+      return response.json()
+    },
+
+    // 获取群发任务详情
+    async getById(id: string): Promise<ApiResponse<GroupPush>> {
+      const response = await fetch(`${API_BASE}/group-push/${id}`)
+      return response.json()
+    },
+
+    // 更新群发任务
+    async update(id: string, data: Partial<GroupPush>): Promise<ApiResponse<GroupPush>> {
+      const response = await fetch(`${API_BASE}/group-push/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      })
+      return response.json()
+    },
+
+    // 删除群发任务
+    async delete(id: string): Promise<ApiResponse<void>> {
+      const response = await fetch(`${API_BASE}/group-push/${id}`, {
+        method: "DELETE",
+      })
+      return response.json()
+    },
+  },
+
+  // 自动点赞API
+  autoLike: {
+    // 创建自动点赞任务
+    async create(data: Partial<AutoLike>): Promise<ApiResponse<AutoLike>> {
+      const response = await fetch(`${API_BASE}/auto-like`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      })
+      return response.json()
+    },
+
+    // 获取自动点赞任务列表
+    async getList(params: {
+      page?: number
+      pageSize?: number
+      status?: string
+    }): Promise<ApiResponse<PaginatedResponse<AutoLike>>> {
+      const queryString = new URLSearchParams()
+
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== "") {
+          queryString.append(key, String(value))
+        }
+      })
+
+      const response = await fetch(`${API_BASE}/auto-like?${queryString.toString()}`)
+      return response.json()
+    },
+
+    // 获取自动点赞任务详情
+    async getById(id: string): Promise<ApiResponse<AutoLike>> {
+      const response = await fetch(`${API_BASE}/auto-like/${id}`)
+      return response.json()
+    },
+
+    // 更新自动点赞任务
+    async update(id: string, data: Partial<AutoLike>): Promise<ApiResponse<AutoLike>> {
+      const response = await fetch(`${API_BASE}/auto-like/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      })
+      return response.json()
+    },
+
+    // 删除自动点赞任务
+    async delete(id: string): Promise<ApiResponse<void>> {
+      const response = await fetch(`${API_BASE}/auto-like/${id}`, {
+        method: "DELETE",
+      })
+      return response.json()
+    },
+  },
+
+  // 自动建群API
+  autoGroup: {
+    // 创建自动建群任务
+    async create(data: Partial<AutoGroup>): Promise<ApiResponse<AutoGroup>> {
+      const response = await fetch(`${API_BASE}/auto-group`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      })
+      return response.json()
+    },
+
+    // 获取自动建群任务列表
+    async getList(params: {
+      page?: number
+      pageSize?: number
+      status?: string
+    }): Promise<ApiResponse<PaginatedResponse<AutoGroup>>> {
+      const queryString = new URLSearchParams()
+
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== "") {
+          queryString.append(key, String(value))
+        }
+      })
+
+      const response = await fetch(`${API_BASE}/auto-group?${queryString.toString()}`)
+      return response.json()
+    },
+
+    // 获取自动建群任务详情
+    async getById(id: string): Promise<ApiResponse<AutoGroup>> {
+      const response = await fetch(`${API_BASE}/auto-group/${id}`)
+      return response.json()
+    },
+
+    // 更新自动建群任务
+    async update(id: string, data: Partial<AutoGroup>): Promise<ApiResponse<AutoGroup>> {
+      const response = await fetch(`${API_BASE}/auto-group/${id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      })
+      return response.json()
+    },
+
+    // 删除自动建群任务
+    async delete(id: string): Promise<ApiResponse<void>> {
+      const response = await fetch(`${API_BASE}/auto-group/${id}`, {
+        method: "DELETE",
+      })
+      return response.json()
+    },
+  },
+}
+
diff --git a/Cunkebao/lib/tutorials.ts b/Cunkebao/lib/tutorials.ts
new file mode 100644
index 00000000..a5eb5ceb
--- /dev/null
+++ b/Cunkebao/lib/tutorials.ts
@@ -0,0 +1,60 @@
+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/Cunkebao/lib/utils.ts b/Cunkebao/lib/utils.ts
new file mode 100644
index 00000000..bd0b3ae6
--- /dev/null
+++ b/Cunkebao/lib/utils.ts
@@ -0,0 +1,7 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
diff --git a/Cunkebao/next.config.mjs b/Cunkebao/next.config.mjs
new file mode 100644
index 00000000..060b74aa
--- /dev/null
+++ b/Cunkebao/next.config.mjs
@@ -0,0 +1,48 @@
+let userConfig = undefined
+try {
+  userConfig = await import('./v0-user-next.config')
+} catch (e) {
+  // ignore error
+}
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  images: {
+    unoptimized: true,
+  },
+  experimental: {
+    webpackBuildWorker: true,
+    parallelServerBuildTraces: true,
+    parallelServerCompiles: true,
+  },
+}
+
+mergeConfig(nextConfig, userConfig)
+
+function mergeConfig(nextConfig, userConfig) {
+  if (!userConfig) {
+    return
+  }
+
+  for (const key in userConfig) {
+    if (
+      typeof nextConfig[key] === 'object' &&
+      !Array.isArray(nextConfig[key])
+    ) {
+      nextConfig[key] = {
+        ...nextConfig[key],
+        ...userConfig[key],
+      }
+    } else {
+      nextConfig[key] = userConfig[key]
+    }
+  }
+}
+
+export default nextConfig
diff --git a/Cunkebao/package-lock.json b/Cunkebao/package-lock.json
index a0c0f7f6..913a19d4 100644
--- a/Cunkebao/package-lock.json
+++ b/Cunkebao/package-lock.json
@@ -1,99 +1,907 @@
 {
-  "name": "cunkebao",
-  "version": "1.0.0",
+  "name": "my-v0-project",
+  "version": "0.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "cunkebao",
-      "version": "1.0.0",
-      "license": "MIT",
+      "name": "my-v0-project",
+      "version": "0.1.0",
       "dependencies": {
-        "uview-ui": "^2.0.38"
+        "@ant-design/plots": "latest",
+        "@hookform/resolvers": "^3.9.1",
+        "@radix-ui/react-accordion": "latest",
+        "@radix-ui/react-alert-dialog": "^1.1.4",
+        "@radix-ui/react-aspect-ratio": "^1.1.1",
+        "@radix-ui/react-avatar": "latest",
+        "@radix-ui/react-checkbox": "latest",
+        "@radix-ui/react-collapsible": "latest",
+        "@radix-ui/react-context-menu": "^2.2.4",
+        "@radix-ui/react-dialog": "latest",
+        "@radix-ui/react-dropdown-menu": "latest",
+        "@radix-ui/react-hover-card": "^1.1.4",
+        "@radix-ui/react-icons": "latest",
+        "@radix-ui/react-label": "latest",
+        "@radix-ui/react-menubar": "^1.1.4",
+        "@radix-ui/react-navigation-menu": "^1.2.3",
+        "@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-separator": "^1.1.1",
+        "@radix-ui/react-slider": "latest",
+        "@radix-ui/react-slot": "^1.1.1",
+        "@radix-ui/react-switch": "latest",
+        "@radix-ui/react-tabs": "latest",
+        "@radix-ui/react-toast": "latest",
+        "@radix-ui/react-toggle": "^1.1.1",
+        "@radix-ui/react-toggle-group": "^1.1.1",
+        "@radix-ui/react-tooltip": "latest",
+        "@tanstack/react-table": "latest",
+        "autoprefixer": "^10.4.20",
+        "chart.js": "latest",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "cmdk": "1.0.4",
+        "date-fns": "latest",
+        "embla-carousel-react": "8.5.1",
+        "input-otp": "1.4.1",
+        "lucide-react": "^0.454.0",
+        "next": "15.1.0",
+        "next-themes": "^0.4.4",
+        "react": "^19",
+        "react-day-picker": "latest",
+        "react-dom": "^19",
+        "react-hook-form": "^7.54.1",
+        "react-resizable-panels": "^2.1.7",
+        "recharts": "latest",
+        "regenerator-runtime": "latest",
+        "sonner": "^1.7.1",
+        "tailwind-merge": "^2.5.5",
+        "tailwindcss-animate": "^1.0.7",
+        "vaul": "^0.9.6",
+        "zod": "^3.24.1"
       },
       "devDependencies": {
-        "@dcloudio/uni-cli-i18n": "^2.0.2-4050620250311002",
-        "@dcloudio/uni-cli-shared": "^2.0.2-4050620250311002",
-        "@dcloudio/vue-cli-plugin-uni": "^2.0.2-4050620250311002",
-        "autoprefixer": "^9.8.8",
-        "postcss": "^7.0.39",
-        "postcss-comment": "^2.0.0",
-        "postcss-import": "^12.0.1",
-        "sass": "^1.86.0",
-        "sass-loader": "^10.5.2"
+        "@types/node": "^22",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "postcss": "^8",
+        "tailwindcss": "^3.4.17",
+        "typescript": "^5"
       }
     },
-    "node_modules/@dcloudio/uni-cli-i18n": {
-      "version": "2.0.2-4050620250311002",
-      "resolved": "https://registry.npmjs.org/@dcloudio/uni-cli-i18n/-/uni-cli-i18n-2.0.2-4050620250311002.tgz",
-      "integrity": "sha512-ytyr8/UApkYaa3Hq45KF9m7/gDcWDPmA8qn5wRyth3wvML2EdA8n83A0ZkJHXv6Kty/NdfTPhVY8HjMGGwEv+g==",
-      "dev": true,
-      "dependencies": {
-        "i18n": "^0.13.3",
-        "os-locale-s-fix": "^1.0.8-fix-1"
-      }
-    },
-    "node_modules/@dcloudio/uni-cli-shared": {
-      "version": "2.0.2-4050620250311002",
-      "resolved": "https://registry.npmjs.org/@dcloudio/uni-cli-shared/-/uni-cli-shared-2.0.2-4050620250311002.tgz",
-      "integrity": "sha512-aVlYXd4JFMiUJu5g3j9BJwlDDaXbkCRlktekmFPQdUN1o0inqeHl2zUiybEruGPluvjB/YNLrUo09gag+nCXCw==",
-      "dev": true,
-      "dependencies": {
-        "escape-string-regexp": "^4.0.0",
-        "fast-glob": "^3.2.11",
-        "fs-extra": "^10.0.0",
-        "glob-escape": "^0.0.2",
-        "hash-sum": "^1.0.2",
-        "postcss-urlrewrite": "^0.2.2",
-        "strip-json-comments": "^2.0.1"
-      }
-    },
-    "node_modules/@dcloudio/uni-stat": {
-      "version": "2.0.2-4050620250311002",
-      "resolved": "https://registry.npmjs.org/@dcloudio/uni-stat/-/uni-stat-2.0.2-4050620250311002.tgz",
-      "integrity": "sha512-c+uhL9ry9TVyxcOMZaTnlpgkX+kBw8GQuezDBoGQ900OE5YZbUOzVTveHxLXMCKyUKxinpsa9I/ySO5Qehx6Ug==",
-      "dev": true
-    },
-    "node_modules/@dcloudio/vue-cli-plugin-uni": {
-      "version": "2.0.2-4050620250311002",
-      "resolved": "https://registry.npmjs.org/@dcloudio/vue-cli-plugin-uni/-/vue-cli-plugin-uni-2.0.2-4050620250311002.tgz",
-      "integrity": "sha512-lB/rOVV3aPkuSF+5ZY4vidXdkHmw94jah7tOUv1tCTZa6UKKN+xYmaqwqv2G6/LeXSFmYDJLztum6FwpTjY7ZA==",
-      "dev": true,
-      "dependencies": {
-        "@dcloudio/uni-stat": "^2.0.2-4050620250311002",
-        "buffer-json": "^2.0.0",
-        "clone-deep": "^4.0.1",
-        "cross-env": "^5.2.0",
-        "envinfo": "^6.0.1",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "lru-cache": "^4.1.2",
-        "mkdirp": "^0.5.1",
-        "module-alias": "^2.1.0",
-        "neo-async": "^2.6.1",
-        "postcss-import": "^12.0.1",
-        "postcss-selector-parser": "^5.0.0",
-        "postcss-value-parser": "^3.3.1",
-        "strip-json-comments": "^2.0.1",
-        "update-check": "^1.5.3",
-        "webpack-merge": "^4.1.4",
-        "wrap-loader": "^0.2.0",
-        "xregexp": "4.0.0"
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "engines": {
+        "node": ">=10"
       },
-      "bin": {
-        "uniapp-cli": "bin/uniapp-cli.js"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@ant-design/charts-util": {
+      "version": "0.0.1-alpha.7",
+      "resolved": "https://registry.npmjs.org/@ant-design/charts-util/-/charts-util-0.0.1-alpha.7.tgz",
+      "integrity": "sha512-Yh0o6EdO6SvdSnStFZMbnUzjyymkVzV+TQ9ymVW9hlVgO/fUkUII3JYSdV+UVcFnYwUF0YiDKuSTLCZNAzg2bQ==",
+      "dependencies": {
+        "lodash": "^4.17.21"
       },
       "peerDependencies": {
-        "copy-webpack-plugin": ">=5",
-        "postcss": ">=7"
+        "react": ">=16.8.4",
+        "react-dom": ">=16.8.4"
+      }
+    },
+    "node_modules/@ant-design/plots": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@ant-design/plots/-/plots-2.3.3.tgz",
+      "integrity": "sha512-t+pMXuCNEnbrPsRsIMyPSVMYKnFuVYeqHwtjg3ImfTTBdUAfqnJfCBnyPVakPRoMRV2y9+uVL8YWrOQiEvc6rg==",
+      "dependencies": {
+        "@ant-design/charts-util": "0.0.1-alpha.7",
+        "@antv/event-emitter": "^0.1.3",
+        "@antv/g": "^6.1.7",
+        "@antv/g2": "^5.2.7",
+        "@antv/g2-extension-plot": "^0.2.1",
+        "lodash": "^4.17.21",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.4",
+        "react-dom": ">=16.8.4"
+      }
+    },
+    "node_modules/@ant-design/plots/node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@ant-design/plots/node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/@ant-design/plots/node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/@antv/component": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@antv/component/-/component-2.1.2.tgz",
+      "integrity": "sha512-5nC9i9lh5rBHE+pk4TNnerLe4mn5874YHHhvv6EdL618UkgpdKJL0hJu4l7uAYjZ3g46VBK+IYT7md0FYv8f4w==",
+      "dependencies": {
+        "@antv/g": "^6.1.11",
+        "@antv/scale": "^0.4.16",
+        "@antv/util": "^3.3.10",
+        "svg-path-parser": "^1.1.0"
+      }
+    },
+    "node_modules/@antv/coord": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@antv/coord/-/coord-0.4.7.tgz",
+      "integrity": "sha512-UTbrMLhwJUkKzqJx5KFnSRpU3BqrdLORJbwUbHK2zHSCT3q3bjcFA//ZYLVfIlwqFDXp/hzfMyRtp0c77A9ZVA==",
+      "dependencies": {
+        "@antv/scale": "^0.4.12",
+        "@antv/util": "^2.0.13",
+        "gl-matrix": "^3.4.3"
+      }
+    },
+    "node_modules/@antv/coord/node_modules/@antv/util": {
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@antv/util/-/util-2.0.17.tgz",
+      "integrity": "sha512-o6I9hi5CIUvLGDhth0RxNSFDRwXeywmt6ExR4+RmVAzIi48ps6HUy+svxOCayvrPBN37uE6TAc2KDofRo0nK9Q==",
+      "dependencies": {
+        "csstype": "^3.0.8",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/@antv/event-emitter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@antv/event-emitter/-/event-emitter-0.1.3.tgz",
+      "integrity": "sha512-4ddpsiHN9Pd4UIlWuKVK1C4IiZIdbwQvy9i7DUSI3xNJ89FPUFt8lxDYj8GzzfdllV0NkJTRxnG+FvLk0llidg=="
+    },
+    "node_modules/@antv/g": {
+      "version": "6.1.21",
+      "resolved": "https://registry.npmjs.org/@antv/g/-/g-6.1.21.tgz",
+      "integrity": "sha512-3cWmsY1bYwDmVzsFmBeqN1tWVt+3JaWL6Uu54C1oF7qn1VXXa3V3KuXGEYCxuei8E8BMriN3D7fZosY5d+MQqw==",
+      "dependencies": {
+        "@antv/g-camera-api": "2.0.35",
+        "@antv/g-dom-mutation-observer-api": "2.0.32",
+        "@antv/g-lite": "2.2.16",
+        "@antv/g-web-animations-api": "2.1.21",
+        "@babel/runtime": "^7.25.6"
+      }
+    },
+    "node_modules/@antv/g-camera-api": {
+      "version": "2.0.35",
+      "resolved": "https://registry.npmjs.org/@antv/g-camera-api/-/g-camera-api-2.0.35.tgz",
+      "integrity": "sha512-z4WKmB6yN2fFi9EnapjuHbFVF0ilhMrWo2eZCxYXcb0dV5MiflU/WZi/bjs4WqVMJPNtYKx+yZhTyROncEiglw==",
+      "dependencies": {
+        "@antv/g-lite": "2.2.16",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-canvas": {
+      "version": "2.0.40",
+      "resolved": "https://registry.npmjs.org/@antv/g-canvas/-/g-canvas-2.0.40.tgz",
+      "integrity": "sha512-Starh5g+ydOFKzfK/GpwnLwz+o6UZNHkyWBXdHx2ax/AJWHVXwjyCadt/6kkc2non0ts2ow/hpJaW7X3dgdDxQ==",
+      "dependencies": {
+        "@antv/g-lite": "2.2.16",
+        "@antv/g-plugin-canvas-path-generator": "2.1.16",
+        "@antv/g-plugin-canvas-picker": "2.1.19",
+        "@antv/g-plugin-canvas-renderer": "2.2.19",
+        "@antv/g-plugin-dom-interaction": "2.1.21",
+        "@antv/g-plugin-html-renderer": "2.1.21",
+        "@antv/g-plugin-image-loader": "2.1.19",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-dom-mutation-observer-api": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/@antv/g-dom-mutation-observer-api/-/g-dom-mutation-observer-api-2.0.32.tgz",
+      "integrity": "sha512-50r7en1+doUtR9uXmFJk8YtENQ/+DFcj2g3a4XKu9xp58kmF2qBgtdst9n1deqGcL5s0ufX/Ck9rUhtHwka+Ow==",
+      "dependencies": {
+        "@antv/g-lite": "2.2.16",
+        "@babel/runtime": "^7.25.6"
+      }
+    },
+    "node_modules/@antv/g-lite": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/@antv/g-lite/-/g-lite-2.2.16.tgz",
+      "integrity": "sha512-473r6S5srkxUiUxI3ZkrM74HMkgyO9+2HR1xtJ75yDOOuT8F6osdXDgy0Or5cWqOlsVjiN3L3DaPnQLHlUGO5A==",
+      "dependencies": {
+        "@antv/g-math": "3.0.0",
+        "@antv/util": "^3.3.5",
+        "@antv/vendor": "^1.0.3",
+        "@babel/runtime": "^7.25.6",
+        "eventemitter3": "^5.0.1",
+        "gl-matrix": "^3.4.3",
+        "rbush": "^3.0.1",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-math": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@antv/g-math/-/g-math-3.0.0.tgz",
+      "integrity": "sha512-AkmiNIEL1vgqTPeGY2wtsMdBBqKFwF7SKSgs+D1iOS/rqYMsXdhp/HvtuQ5tx/HdawE/ZzTiicIYopc520ADZw==",
+      "dependencies": {
+        "@antv/util": "^3.3.5",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-canvas-path-generator": {
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-canvas-path-generator/-/g-plugin-canvas-path-generator-2.1.16.tgz",
+      "integrity": "sha512-E3/HUzWRv1/5QyKHLcXIgFJff0JBxDHz4NfHwYp6IOy5P/A1mbISsUjwafSl8JIVqx0J81CzgqpwU7pWHeXlaQ==",
+      "dependencies": {
+        "@antv/g-lite": "2.2.16",
+        "@antv/g-math": "3.0.0",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-canvas-picker": {
+      "version": "2.1.19",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-canvas-picker/-/g-plugin-canvas-picker-2.1.19.tgz",
+      "integrity": "sha512-69G0m2v09FimmYSU+hO1wjft1FqM467Cf1jDpjBz6Y3caQ98Hrqpz/7Prko1hMOALCo92MDo65yTTnz/LhBiQA==",
+      "dependencies": {
+        "@antv/g-lite": "2.2.16",
+        "@antv/g-math": "3.0.0",
+        "@antv/g-plugin-canvas-path-generator": "2.1.16",
+        "@antv/g-plugin-canvas-renderer": "2.2.19",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-canvas-renderer": {
+      "version": "2.2.19",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-canvas-renderer/-/g-plugin-canvas-renderer-2.2.19.tgz",
+      "integrity": "sha512-3Ac0pjU0NAafu0rwTnthwWV/CV5kV9CpTf96v1CCXX0P3iPWtW72SatQNOt/v2aQ2NjYB34YuwYy9i0U1oS8rg==",
+      "dependencies": {
+        "@antv/g-lite": "2.2.16",
+        "@antv/g-math": "3.0.0",
+        "@antv/g-plugin-canvas-path-generator": "2.1.16",
+        "@antv/g-plugin-image-loader": "2.1.19",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-dom-interaction": {
+      "version": "2.1.21",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-dom-interaction/-/g-plugin-dom-interaction-2.1.21.tgz",
+      "integrity": "sha512-Vm8yeNjZ2aNgNH3LwDRExRChpuVv0Wv2zOblUGy5rgyRIh2Fkm8R89pKLmd3GlLo4AF1ZqAGWHiY2WOeMHEEIA==",
+      "dependencies": {
+        "@antv/g-lite": "2.2.16",
+        "@babel/runtime": "^7.25.6",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-dragndrop": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-dragndrop/-/g-plugin-dragndrop-2.0.32.tgz",
+      "integrity": "sha512-0Y9S/jx6Z7O3hEQhqrXGWNIcV1dBoRpokSP9gIMqTxOjCLzVUFYv8pFoI+Uyeow6PAWe+gdBQu+EJgVi223lJQ==",
+      "dependencies": {
+        "@antv/g-lite": "2.2.16",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-html-renderer": {
+      "version": "2.1.21",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-html-renderer/-/g-plugin-html-renderer-2.1.21.tgz",
+      "integrity": "sha512-1PR9rYt4BgSx8LFnVPF+cPlcBYKfI7iWK/xPipEa3jZ4j/xftELQ5EEyZpfPnrTqu2PtKeMurx7oaM/HPsgaiQ==",
+      "dependencies": {
+        "@antv/g-lite": "2.2.16",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-plugin-image-loader": {
+      "version": "2.1.19",
+      "resolved": "https://registry.npmjs.org/@antv/g-plugin-image-loader/-/g-plugin-image-loader-2.1.19.tgz",
+      "integrity": "sha512-ZjNs08RkzdDMLlEWGabJG1Lu1Q71afStSlhcIRhrDOLB4tH0UdYlq/f72tlzJ6KjtLnril/xQH3D7znPlfAoig==",
+      "dependencies": {
+        "@antv/g-lite": "2.2.16",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "gl-matrix": "^3.4.3",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g-web-animations-api": {
+      "version": "2.1.21",
+      "resolved": "https://registry.npmjs.org/@antv/g-web-animations-api/-/g-web-animations-api-2.1.21.tgz",
+      "integrity": "sha512-EkIjeEH3QzHkDJn3sz1Mk83PqVQXGe5440mJV42QmnxuFuFcxGVJMi9vS8Te7kCUJl4eSb/eqnNi5AWfDMWm+w==",
+      "dependencies": {
+        "@antv/g-lite": "2.2.16",
+        "@antv/util": "^3.3.5",
+        "@babel/runtime": "^7.25.6",
+        "tslib": "^2.5.3"
+      }
+    },
+    "node_modules/@antv/g2": {
+      "version": "5.2.12",
+      "resolved": "https://registry.npmjs.org/@antv/g2/-/g2-5.2.12.tgz",
+      "integrity": "sha512-VPtlYZG6h+Fs5MAHuajRrhnfjqy9DyunUIBKvwL4RU1YnyNccAYJtlVDSLnleGFByjIGNBIDNBewsXbFR+v/hg==",
+      "dependencies": {
+        "@antv/component": "^2.1.2",
+        "@antv/coord": "^0.4.7",
+        "@antv/event-emitter": "^0.1.3",
+        "@antv/g": "^6.1.11",
+        "@antv/g-canvas": "^2.0.29",
+        "@antv/g-plugin-dragndrop": "^2.0.22",
+        "@antv/scale": "^0.4.16",
+        "@antv/util": "^3.3.10",
+        "@antv/vendor": "^1.0.8",
+        "flru": "^1.0.2",
+        "fmin": "0.0.2",
+        "pdfast": "^0.2.0"
+      }
+    },
+    "node_modules/@antv/g2-extension-plot": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@antv/g2-extension-plot/-/g2-extension-plot-0.2.2.tgz",
+      "integrity": "sha512-KJXCXO7as+h0hDqirGXf1omrNuYzQmY3VmBmp7lIvkepbQ7sz3pPwy895r1FWETGF3vTk5UeFcAF5yzzBHWgbw==",
+      "dependencies": {
+        "@antv/g2": "^5.1.8",
+        "@antv/util": "^3.3.5",
+        "@antv/vendor": "^1.0.10"
+      }
+    },
+    "node_modules/@antv/scale": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@antv/scale/-/scale-0.4.16.tgz",
+      "integrity": "sha512-5wg/zB5kXHxpTV5OYwJD3ja6R8yTiqIOkjOhmpEJiowkzRlbEC/BOyMvNUq5fqFIHnMCE9woO7+c3zxEQCKPjw==",
+      "dependencies": {
+        "@antv/util": "^3.3.7",
+        "color-string": "^1.5.5",
+        "fecha": "^4.2.1"
+      }
+    },
+    "node_modules/@antv/util": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/@antv/util/-/util-3.3.10.tgz",
+      "integrity": "sha512-basGML3DFA3O87INnzvDStjzS+n0JLEhRnRsDzP9keiXz8gT1z/fTdmJAZFOzMMWxy+HKbi7NbSt0+8vz/OsBQ==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "gl-matrix": "^3.3.0",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@antv/vendor": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@antv/vendor/-/vendor-1.0.10.tgz",
+      "integrity": "sha512-/llNfo0gyUAi+ZY3TAtkNPS66eXTMbNdaKd8qllyJUuXnpRHYd/LGU69ix6olGJEFBi61hO4f9eTY0zzNOlFlw==",
+      "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-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.0",
+        "@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-fetch": "^3.0.1",
+        "d3-force": "^3.0.0",
+        "d3-force-3d": "^3.0.5",
+        "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"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@date-fns/tz": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz",
+      "integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg=="
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.0.tgz",
+      "integrity": "sha512-64WYIf4UYcdLnbKn/umDlNjQDSS8AgZrI/R9+x5ilkUVFxXcA1Ebl+gQLc/6mERA4407Xof0R7wEyEuj091CVw==",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
+    },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.10.0.tgz",
+      "integrity": "sha512-79Dv+3mDF7i+2ajj7SkypSKHhl1cbln1OGavqrsF7p6mbUv11xpqpacPsGDCTRvCSjEEIez2ef1NveSVL3b0Ag==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
+      "integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
+      "integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
+      "integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
+      "integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
+      "integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
+      "integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
+      "integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
+      "integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
+      "integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
+      "integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
+      "integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.0.5"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
+      "integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
+      "integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
+      "cpu": [
+        "s390x"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
+      "integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
+      "integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
+      "integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
+      "integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.2.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
+      "integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
+      "integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
       "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -107,8 +915,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -117,46 +923,180 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/source-map": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
-      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.5",
-        "@jridgewell/trace-mapping": "^0.3.25"
-      }
-    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true,
-      "peer": true
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
+    },
+    "node_modules/@ljharb/resumer": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@ljharb/resumer/-/resumer-0.0.1.tgz",
+      "integrity": "sha512-skQiAOrCfO7vRTq53cxznMpks7wS1va95UCidALlOVWqvBAzwPVErwizDwoMqNVMEn1mDq0utxZd02eIrvF1lw==",
+      "dependencies": {
+        "@ljharb/through": "^2.3.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/@ljharb/through": {
+      "version": "2.3.14",
+      "resolved": "https://registry.npmjs.org/@ljharb/through/-/through-2.3.14.tgz",
+      "integrity": "sha512-ajBvlKpWucBB17FuQYUShqpqy8GRgYEpJW0vWJbUu1CV9lWyrDCapy0lScU8T8Z6qn49sSwJB3+M+evYIdGg+A==",
+      "dependencies": {
+        "call-bind": "^1.0.8"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.1.0.tgz",
+      "integrity": "sha512-UcCO481cROsqJuszPPXJnb7GGuLq617ve4xuAyyNG4VSSocJNtMU5Fsx+Lp6mlN8c7W58aZLc5y6D/2xNmaK+w=="
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.1.0.tgz",
+      "integrity": "sha512-ZU8d7xxpX14uIaFC3nsr4L++5ZS/AkWDm1PzPO6gD9xWhFkOj2hzSbSIxoncsnlJXB1CbLOfGVN4Zk9tg83PUw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.0.tgz",
+      "integrity": "sha512-DQ3RiUoW2XC9FcSM4ffpfndq1EsLV0fj0/UY33i7eklW5akPUCo6OX2qkcLXZ3jyPdo4sf2flwAED3AAq3Om2Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.0.tgz",
+      "integrity": "sha512-M+vhTovRS2F//LMx9KtxbkWk627l5Q7AqXWWWrfIzNIaUFiz2/NkOFkxCFyNyGACi5YbA8aekzCLtbDyfF/v5Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.0.tgz",
+      "integrity": "sha512-Qn6vOuwaTCx3pNwygpSGtdIu0TfS1KiaYLYXLH5zq1scoTXdwYfdZtwvJTpB1WrLgiQE2Ne2kt8MZok3HlFqmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.0.tgz",
+      "integrity": "sha512-yeNh9ofMqzOZ5yTOk+2rwncBzucc6a1lyqtg8xZv0rH5znyjxHOWsoUtSq4cUTeeBIiXXX51QOOe+VoCjdXJRw==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.0.tgz",
+      "integrity": "sha512-t9IfNkHQs/uKgPoyEtU912MG6a1j7Had37cSUyLTKx9MnUpjj+ZDKw9OyqTI9OwIIv0wmkr1pkZy+3T5pxhJPg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.0.tgz",
+      "integrity": "sha512-WEAoHyG14t5sTavZa1c6BnOIEukll9iqFRTavqRVPfYmfegOAd5MaZfXgOGG6kGo1RduyGdTHD4+YZQSdsNZXg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.0.tgz",
+      "integrity": "sha512-J1YdKuJv9xcixzXR24Dv+4SaDKc2jj31IVUEMdO5xJivMTXuE6MAdIi4qPjSymHuFG8O5wbfWKnhJUcHHpj5CA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -169,7 +1109,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -178,7 +1117,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -187,643 +1125,1663 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@parcel/watcher": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
-      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
-      "dev": true,
-      "hasInstallScript": true,
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
       "optional": true,
-      "dependencies": {
-        "detect-libc": "^1.0.3",
-        "is-glob": "^4.0.3",
-        "micromatch": "^4.0.5",
-        "node-addon-api": "^7.0.0"
-      },
       "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher-android-arm64": "2.5.1",
-        "@parcel/watcher-darwin-arm64": "2.5.1",
-        "@parcel/watcher-darwin-x64": "2.5.1",
-        "@parcel/watcher-freebsd-x64": "2.5.1",
-        "@parcel/watcher-linux-arm-glibc": "2.5.1",
-        "@parcel/watcher-linux-arm-musl": "2.5.1",
-        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
-        "@parcel/watcher-linux-arm64-musl": "2.5.1",
-        "@parcel/watcher-linux-x64-glibc": "2.5.1",
-        "@parcel/watcher-linux-x64-musl": "2.5.1",
-        "@parcel/watcher-win32-arm64": "2.5.1",
-        "@parcel/watcher-win32-ia32": "2.5.1",
-        "@parcel/watcher-win32-x64": "2.5.1"
+        "node": ">=14"
       }
     },
-    "node_modules/@parcel/watcher-android-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
-      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="
     },
-    "node_modules/@parcel/watcher-darwin-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
-      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="
     },
-    "node_modules/@parcel/watcher-darwin-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
-      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-freebsd-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
-      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
-      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
-      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
-      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-arm64-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
-      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-glibc": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
-      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-linux-x64-musl": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
-      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-arm64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
-      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-ia32": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
-      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
-      "cpu": [
-        "ia32"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@parcel/watcher-win32-x64": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
-      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/@types/eslint": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
-      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
-      "dev": true,
-      "peer": true,
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.3.tgz",
+      "integrity": "sha512-RIQ15mrcvqIkDARJeERSuXSry2N8uYnxkdDetpfmalT/+0ntOXLkFOsh9iwlAsCv+qcmhZjbdJogIm6WBa6c4A==",
       "dependencies": {
-        "@types/estree": "*",
-        "@types/json-schema": "*"
-      }
-    },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
-    "node_modules/@types/estree": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
-      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.15",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
-      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "dev": true
-    },
-    "node_modules/@types/node": {
-      "version": "22.13.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.13.tgz",
-      "integrity": "sha512-ClsL5nMwKaBRwPcCvH8E7+nU4GxHVx1axNvMZTFHMEfNI7oahimt26P5zjVCRrjiIWj6YFXfE1v3dEp94wLcGQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "undici-types": "~6.20.0"
-      }
-    },
-    "node_modules/@webassemblyjs/ast": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
-      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@webassemblyjs/helper-numbers": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
-      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
-      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
-      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/@webassemblyjs/helper-numbers": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
-      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
-      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
-      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/wasm-gen": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/ieee754": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
-      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@xtuc/ieee754": "^1.2.0"
-      }
-    },
-    "node_modules/@webassemblyjs/leb128": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
-      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webassemblyjs/utf8": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
-      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
-      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/helper-wasm-section": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-opt": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1",
-        "@webassemblyjs/wast-printer": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
-      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
-      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-buffer": "1.14.1",
-        "@webassemblyjs/wasm-gen": "1.14.1",
-        "@webassemblyjs/wasm-parser": "1.14.1"
-      }
-    },
-    "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
-      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@webassemblyjs/helper-api-error": "1.13.2",
-        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
-        "@webassemblyjs/ieee754": "1.13.2",
-        "@webassemblyjs/leb128": "1.13.2",
-        "@webassemblyjs/utf8": "1.13.2"
-      }
-    },
-    "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
-      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@webassemblyjs/ast": "1.14.1",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/acorn": {
-      "version": "8.14.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
-      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
-      "dev": true,
-      "peer": true,
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
-    "node_modules/ajv": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
-      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3",
-        "fast-uri": "^3.0.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
-      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "ajv": "^8.0.0"
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collapsible": "1.1.3",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
       },
       "peerDependencies": {
-        "ajv": "^8.0.0"
+        "@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": {
-        "ajv": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
           "optional": true
         }
       }
     },
-    "node_modules/ajv-keywords": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-      "dev": true,
-      "peer": true,
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.6.tgz",
+      "integrity": "sha512-p4XnPqgej8sZAAReCAKgz1REYZEBLR8hU9Pg27wFnCWIMc8g1ccCs0FjBcy05V15VTu8pAePw/VDYeOm/uZ6yQ==",
       "dependencies": {
-        "fast-deep-equal": "^3.1.3"
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dialog": "1.1.6",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2"
       },
       "peerDependencies": {
-        "ajv": "^8.8.2"
+        "@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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.2.tgz",
+      "integrity": "sha512-G+KcpzXHq24iH0uGG/pF8LyzpFJYGD4RfLjCIBfGdSLXvjLHST31RUiRVrupIBMvIppMgSzQ6l66iAxl03tdlg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.2.tgz",
+      "integrity": "sha512-TaJxYoCpxJ7vfEkv2PTNox/6zzmpKXT6ewvCuf2tTOIVN45/Jahhlld29Yw4pciOXS2Xq91/rSGEdmEnUWZCqA==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.3.tgz",
+      "integrity": "sha512-Paen00T4P8L8gd9bNsRMw7Cbaz85oxiv+hzomsRZgFm2byltPFDtfcoqlWJ8GyZlIBWgLssJlzLCnKU0G0302g==",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-checkbox": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.4.tgz",
+      "integrity": "sha512-wP0CPAHq+P5I4INKe3hJrIa1WoNqqrejzW+zoU0rOvo1b9gDEJJFl2rYfO1PYJUQCc2H1WZxIJmyv9BS8i5fLw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.3.tgz",
+      "integrity": "sha512-jFSerheto1X03MUC0g6R7LedNW9EEGWdg9W1+MlpkMLwGkgkbUXLPBH/KIuWKXUoeYRVY11llqbTBDzuLg7qrw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-collection": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.2.tgz",
+      "integrity": "sha512-9z54IEKRxIa9VityapoEYMuByaG42iSy1ZXlY2KcuLSEtq8x4987/N6m15ppoMffgZX72gER2uHe1D9Y6Unlcw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.6.tgz",
+      "integrity": "sha512-aUP99QZ3VU84NPsHeaFt4cQUNgJqFsLLOt/RbbWXszZ6MP0DpDyjkFZORr4RpAEx3sUBk+Kc8h13yGtC5Qw8dg==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-menu": "2.1.6",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz",
+      "integrity": "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz",
+      "integrity": "sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.6.tgz",
+      "integrity": "sha512-no3X7V5fD487wab/ZYSHXq3H37u4NVeLDKI/Ks724X/eEFSSEFYZxWgsIlr1UBeEyDaM29HM5x9p1Nv8DuTYPA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.6",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz",
+      "integrity": "sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.6.tgz",
+      "integrity": "sha512-E4ozl35jq0VRlrdc4dhHrNSV0JqBb4Jy73WAhBEK7JoYnQ83ED5r0Rb/XdVKw89ReAJN38N492BAPBZQ57VmqQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.2.tgz",
+      "integrity": "sha512-fyQIhGDhzfc9pK2kH6Pl9c4BDJGfMkPqkyIgYDthyNYoNg3wVhoJMMh19WS4Up/1KMPFVpNsT2q3WmXn2N1m6g==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.2.tgz",
+      "integrity": "sha512-zo1uGMTaNlHehDyFQcDZXRJhUPDuukcnHz0/jnrup0JA6qL+AFpAnty+7VKa9esuU5xTblAZzTGYJKSKaBxBhw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.6.tgz",
+      "integrity": "sha512-tBBb5CXDJW3t2mo9WlO7r6GTmWV0F0uzHZVFmlRmYpiSK1CDU5IKojP1pm7oknpBOrFZx/YgBRW9oorPO2S/Lg==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.6.tgz",
+      "integrity": "sha512-FHq7+3DlXwh/7FOM4i0G4bC4vPjiq89VEEvNF4VMLchGnaUuUbE5uKXMUCjdKaOghEEMeiKa5XCa2Pk4kteWmg==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.6",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.5.tgz",
+      "integrity": "sha512-myMHHQUZ3ZLTi8W381/Vu43Ia0NqakkQZ2vzynMmTUtQQ9kNkjzhOwkZC9TAM5R07OZUVIQyHC06f/9JZJpvvA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.6.tgz",
+      "integrity": "sha512-NQouW0x4/GnkFJ/pRqsIS3rM/k97VzKnVb2jB7Gq7VEGPy5g7uNV1ykySFt7eWSp3i2uSGFwaJcvIRJBAHmmFg==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
+      "integrity": "sha512-Rvqc3nOpwseCyj/rgjlJDYAgyfw7OC1tTkKn2ivhaMGcYt8FSBlahHOZak2i3QwkRXUXgGgzeEe2RuqeEHuHgA==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz",
+      "integrity": "sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+      "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.2.tgz",
+      "integrity": "sha512-u1IgJFQ4zNAUTjGdDL5dcl/U8ntOR6jsnhxKb5RKp5Ozwl88xKR9EqRZOe/Mk8tnx0x5tNUe2F+MzsyjqMg0MA==",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.3.tgz",
+      "integrity": "sha512-xtCsqt8Rp09FK50ItqEqTJ7Sxanz8EM8dnkVIhJrc/wkMMomSmXHvYbhv3E7Zx4oXh98aaLt9W679SUYXg4IDA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.2.tgz",
+      "integrity": "sha512-zgMQWkNO169GtGqRvYrzb0Zf8NhMHS2DuEB/TiEmVnpr5OqPU3i8lfbxaAmC2J/KYuIQxyoQQ6DxepyXp61/xw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.3.tgz",
+      "integrity": "sha512-l7+NNBfBYYJa9tNqVcP2AGvxdE3lmE6kFTBXdvHgUaZuy+4wGCL1Cl2AfaR7RKyimj7lZURGLwFO59k4eBnDJQ==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.6.tgz",
+      "integrity": "sha512-T6ajELxRvTuAMWH0YmRJ1qez+x4/7Nq7QIx7zJ0VK3qaEWdnWpNbEDnmWldG1zBDwqrLy5aLMUWcoGirVj5kMg==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.2.tgz",
+      "integrity": "sha512-oZfHcaAp2Y6KFBX6I5P1u7CQoy4lheCGiYj+pGFrHy8E/VNRb5E39TkTr3JrV520csPBTZjkuKFdEsjS5EUNKQ==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.3.tgz",
+      "integrity": "sha512-nNrLAWLjGESnhqBqcCNW4w2nn7LxudyMzeB6VgdyAnFLC6kfQgnAjSL2v6UkQTnDctJBlxrmxfplWS4iYjdUTw==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.3.tgz",
+      "integrity": "sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.3.tgz",
+      "integrity": "sha512-9mFyI30cuRDImbmFF6O2KUJdgEOsGh9Vmx9x/Dh9tOhL7BngmQPQfwW4aejKm5OHpfWIdmeV6ySyuxoOGjtNng==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.6.tgz",
+      "integrity": "sha512-gN4dpuIVKEgpLn1z5FhzT9mYRUitbfZq9XqN/7kkBMUgFTzTG8x/KszWJugJXHcwxckY8xcKDZPz7kG3o6DsUA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.2.tgz",
+      "integrity": "sha512-lntKchNWx3aCHuWKiDY+8WudiegQvBpDRAYL8dKLRvKEH8VOpl0XX6SSU/bUBqIRJbcTy4+MW06Wv8vgp10rzQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.2.tgz",
+      "integrity": "sha512-JBm6s6aVG/nwuY5eadhU2zDi/IwYS0sDM5ZWb4nymv/hn3hZdkw+gENn0LP4iY1yCd7+bgJaCwueMYJIU3vk4A==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-roving-focus": "1.1.2",
+        "@radix-ui/react-toggle": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz",
+      "integrity": "sha512-YAA2cu48EkJZdAMHC0dqo9kialOcRStbtiY4nJPaht7Ptrhcvpo+eDChaM6BIs8kL6a8Z5l5poiqLnXcNduOkA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.2",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-previous": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.1.0.tgz",
+      "integrity": "sha512-Z/e78qg2YFnnXcW88A4JmTtm4ADckLno6F7OXotmkQfeuCVaKuYzqAATPhVzl3delXE7CxIV8shofPn3jPc5Og==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.2.tgz",
+      "integrity": "sha512-1SzA4ns2M1aRlvxErqhLHsBHoS5eI5UUcI2awAMgGUp4LoaoWOKYmvqDY2s/tltuPkh3Yk77YF/r3IRj+Amx4Q==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.2"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.2.tgz",
+      "integrity": "sha512-11tNlEDTdIhMJba2RBH+ecJ9l1zgS2kjmexDPAraulc8jeNA4xocSNeyzextT0XJyASil4XsCYlJmf5jEWAtYg==",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.2",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.2.tgz",
+      "integrity": "sha512-uvXk/U4cBiFMxt+p9/G7yUWI/UbHYbyghLCjlpWZ3mLeIZiUBSKcUnw9UnKkdRz7Z/N4UBuFLWQdJCjUe7HjvA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+    },
+    "node_modules/@types/d3-dispatch": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz",
+      "integrity": "sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ=="
+    },
+    "node_modules/@types/d3-dsv": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
+      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g=="
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
+    },
+    "node_modules/@types/d3-fetch": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
+      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
+      "dependencies": {
+        "@types/d3-dsv": "*"
+      }
+    },
+    "node_modules/@types/d3-force": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
+      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw=="
+    },
+    "node_modules/@types/d3-format": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
+      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g=="
+    },
+    "node_modules/@types/d3-geo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
+      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/d3-hierarchy": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
+      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg=="
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg=="
+    },
+    "node_modules/@types/d3-quadtree": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
+      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg=="
+    },
+    "node_modules/@types/d3-random": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
+      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ=="
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.7",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
+      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
+    },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="
+    },
+    "node_modules/@types/node": {
+      "version": "22.13.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.14.tgz",
+      "integrity": "sha512-Zs/Ollc1SJ8nKUAgc7ivOEdIBM8JAKgrqqUYi2J997JuKO7/tpQC+WCetQ1sypiKCQWHdvdg9wBNpUPEWZae7w==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.0.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.12.tgz",
+      "integrity": "sha512-V6Ar115dBDrjbtXSrS+/Oruobc+qVbbUxDFC1RSbRqLt5SYvxxyIDrSC85RWml54g+jfNeEMZhEj7wW07ONQhA==",
+      "devOptional": true,
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.0.4.tgz",
+      "integrity": "sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==",
+      "devOptional": true,
+      "peerDependencies": {
+        "@types/react": "^19.0.0"
+      }
+    },
+    "node_modules/align-text": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
+      "integrity": "sha512-GrTZLRpmp6wIC2ztrWW9MjjTgSKccffgFagbNDOX95/dcjEcYZibYTeaOntySQLcdw1ztBoFkviiUvTMbb9MYg==",
+      "dependencies": {
+        "kind-of": "^3.0.2",
+        "longest": "^1.0.1",
+        "repeat-string": "^1.5.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha512-S2Hw0TtNkMJhIabBwIojKL9YHO5T0n5eNqWJ7Lrlel/zDbftQpxpapi8tZs3X1HWa+u+QeydGmzzNU0m09+Rcg==",
+      "engines": {
+        "node": ">=0.4.2"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
     "node_modules/ansi-styles": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
-      "dev": true,
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
       "dependencies": {
-        "color-convert": "^1.9.0"
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/autoprefixer": {
-      "version": "9.8.8",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz",
-      "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==",
-      "dev": true,
+      "version": "10.4.21",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
+      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "dependencies": {
-        "browserslist": "^4.12.0",
-        "caniuse-lite": "^1.0.30001109",
+        "browserslist": "^4.24.4",
+        "caniuse-lite": "^1.0.30001702",
+        "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
-        "num2fraction": "^1.2.2",
-        "picocolors": "^0.2.1",
-        "postcss": "^7.0.32",
-        "postcss-value-parser": "^4.1.0"
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
       },
       "bin": {
         "autoprefixer": "bin/autoprefixer"
       },
-      "funding": {
-        "type": "tidelift",
-        "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
       }
     },
-    "node_modules/autoprefixer/node_modules/picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-      "dev": true
-    },
-    "node_modules/autoprefixer/node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
-    },
-    "node_modules/big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-      "dev": true,
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
       "engines": {
-        "node": "*"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
       }
     },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -835,7 +2793,6 @@
       "version": "4.24.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
       "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -863,24 +2820,81 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
-    "node_modules/buffer-from": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
-      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
-      "peer": true
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
     },
-    "node_modules/buffer-json": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/buffer-json/-/buffer-json-2.0.0.tgz",
-      "integrity": "sha512-+jjPFVqyfF1esi9fvfUs3NqM0pH1ziZ36VP4hmA/y/Ssfo/5w5xHKfTw9BwQjoJ1w/oVtpLomqwUHKdefGyuHw==",
-      "dev": true
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+      "integrity": "sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "engines": {
+        "node": ">= 6"
+      }
     },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001707",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz",
       "integrity": "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -896,172 +2910,200 @@
         }
       ]
     },
+    "node_modules/center-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+      "integrity": "sha512-Baz3aNe2gd2LP2qk5U+sDk/m4oSuwSDcBfayTCTBoWpfIGO5XFxPmjILQII4NGiZjD6DoDI6kf7gKaxkf7s3VQ==",
+      "dependencies": {
+        "align-text": "^0.1.3",
+        "lazy-cache": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
       "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/chalk/node_modules/escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
-    "node_modules/chalk/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/chalk/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
+    "node_modules/chart.js": {
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz",
+      "integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==",
       "dependencies": {
-        "has-flag": "^3.0.0"
+        "@kurkle/color": "^0.3.0"
       },
       "engines": {
-        "node": ">=4"
+        "pnpm": ">=8"
       }
     },
     "node_modules/chokidar": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
-      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
-      "dev": true,
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
       "dependencies": {
-        "readdirp": "^4.0.1"
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
       },
       "engines": {
-        "node": ">= 14.16.0"
+        "node": ">= 8.10.0"
       },
       "funding": {
         "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/chrome-trace-event": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
-      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=6.0"
-      }
-    },
-    "node_modules/clone-deep": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
-      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
-      "dev": true,
-      "dependencies": {
-        "is-plain-object": "^2.0.4",
-        "kind-of": "^6.0.2",
-        "shallow-clone": "^3.0.0"
       },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
+    },
+    "node_modules/cliui": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+      "integrity": "sha512-GIOYRizG+TGoc7Wgc1LiOTLare95R3mzKgoln+Q/lE4ceiYH19gUpl0l0Ffq4lJDEf3FxujMe6IBfOCs7pfqNA==",
+      "dependencies": {
+        "center-align": "^0.1.1",
+        "right-align": "^0.1.1",
+        "wordwrap": "0.0.2"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
       "engines": {
         "node": ">=6"
       }
     },
-    "node_modules/color-convert": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
-      "dev": true,
+    "node_modules/cmdk": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.4.tgz",
+      "integrity": "sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==",
       "dependencies": {
-        "color-name": "1.1.3"
+        "@radix-ui/react-dialog": "^1.1.2",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.0",
+        "use-sync-external-store": "^1.2.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
       }
     },
     "node_modules/color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
-      "dev": true
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
     },
     "node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/copy-webpack-plugin": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-13.0.0.tgz",
-      "integrity": "sha512-FgR/h5a6hzJqATDGd9YG41SeDViH+0bkHn6WNXCi5zKAZkeESeSxLySSsFLHqLEVCh0E+rITmCf0dusXWYukeQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "glob-parent": "^6.0.1",
-        "normalize-path": "^3.0.0",
-        "schema-utils": "^4.2.0",
-        "serialize-javascript": "^6.0.2",
-        "tinyglobby": "^0.2.12"
-      },
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
       "engines": {
-        "node": ">= 18.12.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.1.0"
+        "node": ">= 10"
       }
     },
-    "node_modules/cross-env": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.1.tgz",
-      "integrity": "sha512-1yHhtcfAd1r4nwQgknowuUNfIT9E8dOMMspC36g45dN+iD1blloi7xp8X/xAIDnjHWyt1uQ8PHk2fkNaym7soQ==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^6.0.5"
-      },
-      "bin": {
-        "cross-env": "dist/bin/cross-env.js",
-        "cross-env-shell": "dist/bin/cross-env-shell.js"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
+    },
+    "node_modules/contour_plot": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/contour_plot/-/contour_plot-0.0.1.tgz",
+      "integrity": "sha512-Nil2HI76Xux6sVGORvhSS8v66m+/h5CwFkBJDO+U5vWaMdNC0yXNCsGDPbzPhvqOEU5koebhdEvD372LI+IyLw=="
     },
     "node_modules/cross-spawn": {
-      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
-      "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
-      "dev": true,
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dependencies": {
-        "nice-try": "^1.0.4",
-        "path-key": "^2.0.1",
-        "semver": "^5.5.0",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
       },
       "engines": {
-        "node": ">=4.8"
+        "node": ">= 8"
       }
     },
     "node_modules/cssesc": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
-      "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -1069,182 +3111,712 @@
         "node": ">=4"
       }
     },
-    "node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
-      "dev": true,
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
       "dependencies": {
-        "ms": "^2.1.3"
+        "internmap": "1 - 2"
       },
       "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
+        "node": ">=12"
       }
     },
-    "node_modules/deep-extend": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-      "dev": true,
+    "node_modules/d3-binarytree": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/d3-binarytree/-/d3-binarytree-1.0.2.tgz",
+      "integrity": "sha512-cElUNH+sHu95L04m92pG73t2MEJXKu+GeKUN1TJkFsu93E5W8E9Sc3kHEGJKgenGvj19m6upSn2EunvMgMD2Yw=="
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
       "engines": {
-        "node": ">=4.0.0"
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json.js",
+        "csv2tsv": "bin/dsv2dsv.js",
+        "dsv2dsv": "bin/dsv2dsv.js",
+        "dsv2json": "bin/dsv2json.js",
+        "json2csv": "bin/json2dsv.js",
+        "json2dsv": "bin/json2dsv.js",
+        "json2tsv": "bin/json2dsv.js",
+        "tsv2csv": "bin/dsv2dsv.js",
+        "tsv2json": "bin/dsv2json.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dependencies": {
+        "d3-dsv": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-force-3d": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/d3-force-3d/-/d3-force-3d-3.0.5.tgz",
+      "integrity": "sha512-tdwhAhoTYZY/a6eo9nR7HP3xSW/C6XvJTbeRpR92nlPzH6OiE+4MliN9feuSFd0tPtEUo+191qOhCTWx3NYifg==",
+      "dependencies": {
+        "d3-binarytree": "1",
+        "d3-dispatch": "1 - 3",
+        "d3-octree": "1",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "dependencies": {
+        "d3-array": "2.5.0 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-geo-projection": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/d3-geo-projection/-/d3-geo-projection-4.0.0.tgz",
+      "integrity": "sha512-p0bK60CEzph1iqmnxut7d/1kyTmm3UWtPlwdkM31AU+LW+BXazd5zJdoCn7VFxNCHXRngPHRnsNn5uGjLRGndg==",
+      "dependencies": {
+        "commander": "7",
+        "d3-array": "1 - 3",
+        "d3-geo": "1.12.0 - 3"
+      },
+      "bin": {
+        "geo2svg": "bin/geo2svg.js",
+        "geograticule": "bin/geograticule.js",
+        "geoproject": "bin/geoproject.js",
+        "geoquantize": "bin/geoquantize.js",
+        "geostitch": "bin/geostitch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-octree": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-octree/-/d3-octree-1.1.0.tgz",
+      "integrity": "sha512-F8gPlqpP+HwRPMO/8uOu5wjH110+6q4cgJvgJT6vlpy3BEaDIKlTZrgHKZSp/i1InRpVfh4puY/kvL6MxK930A=="
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-regression": {
+      "version": "1.3.10",
+      "resolved": "https://registry.npmjs.org/d3-regression/-/d3-regression-1.3.10.tgz",
+      "integrity": "sha512-PF8GWEL70cHHWpx2jUQXc68r1pyPHIA+St16muk/XRokETzlegj5LriNKg7o4LR0TySug4nHYPJNNRz/W+/Niw=="
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale-chromatic": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/date-fns-jalali": {
+      "version": "4.1.0-0",
+      "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
+      "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg=="
+    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
+    "node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/defined": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
+      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/detect-libc": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
-      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-      "dev": true,
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
       "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/dotignore": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dotignore/-/dotignore-0.1.2.tgz",
+      "integrity": "sha512-UGGGWfSauusaVJC+8fgV+NVvBXkCTmVv7sk6nojDZZvuOUNGUy0Zk4UpHQD6EDjS0jpBwcACvH4eofvyzBcRDw==",
+      "dependencies": {
+        "minimatch": "^3.0.4"
+      },
       "bin": {
-        "detect-libc": "bin/detect-libc.js"
+        "ignored": "bin/ignored"
+      }
+    },
+    "node_modules/dotignore/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/dotignore/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
       },
       "engines": {
-        "node": ">=0.10"
+        "node": "*"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.123",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.123.tgz",
-      "integrity": "sha512-refir3NlutEZqlKaBLK0tzlVLe5P2wDKS7UQt/3SpibizgsRAPOsqQC3ffw1nlv3ze5gjRQZYHoPymgVZkplFA==",
-      "dev": true
+      "version": "1.5.128",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.128.tgz",
+      "integrity": "sha512-bo1A4HH/NS522Ws0QNFIzyPcyUUNV/yyy70Ho1xqfGYzPUme2F/xr4tlEOuM6/A538U1vDA7a4XfCd1CKRegKQ=="
     },
-    "node_modules/emojis-list": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
+    "node_modules/embla-carousel": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.5.1.tgz",
+      "integrity": "sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A=="
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.18.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
-      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
-      "dev": true,
-      "peer": true,
+    "node_modules/embla-carousel-react": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.5.1.tgz",
+      "integrity": "sha512-z9Y0K84BJvhChXgqn2CFYbfEi6AwEr+FFVVKm/MqbTQ2zIzO1VQri6w67LcfpVF0AjbhwVMywDZqY4alYkjW5w==",
       "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
+        "embla-carousel": "8.5.1",
+        "embla-carousel-reactive-utils": "8.5.1"
       },
-      "engines": {
-        "node": ">=10.13.0"
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
-    "node_modules/envinfo": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-6.0.1.tgz",
-      "integrity": "sha512-IbMWvMQulMm1hiky1Zt5YTcSDEdZs0r9bt77mcLa4RUAKRYTGZvrb3MtAt47FuldPxwL+u2LtQex1FajIW1/Cw==",
-      "dev": true,
-      "bin": {
-        "envinfo": "dist/cli.js"
-      },
-      "engines": {
-        "node": ">=4"
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.5.1.tgz",
+      "integrity": "sha512-n7VSoGIiiDIc4MfXF3ZRTO59KDp820QDuyBDGlt5/65+lumPHxX2JLz0EZ23hZ4eg4vZGUXwMkYv02fw2JVo/A==",
+      "peerDependencies": {
+        "embla-carousel": "8.5.1"
       }
     },
-    "node_modules/es-module-lexer": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
-      "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
-      "dev": true,
-      "peer": true
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/es-abstract": {
+      "version": "1.23.9",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz",
+      "integrity": "sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==",
+      "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.3",
+        "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.0.0",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.0",
+        "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-regex": "^1.2.1",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.0",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.3",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.3",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.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.18"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-abstract/node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-abstract/node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
       "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "node": ">=0.8.0"
       }
     },
-    "node_modules/eslint-scope": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
-      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
-    "node_modules/esrecurse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/esrecurse/node_modules/estraverse": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
-      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=4.0"
-      }
-    },
-    "node_modules/events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=0.8.x"
-      }
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA=="
     },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/fast-equals": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
+      "integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
     },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
       "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -1260,7 +3832,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -1268,43 +3839,23 @@
         "node": ">= 6"
       }
     },
-    "node_modules/fast-json-stable-stringify": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
-    },
-    "node_modules/fast-uri": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
-      "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fastify"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/fastify"
-        }
-      ],
-      "peer": true
-    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
       "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/fecha": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz",
+      "integrity": "sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw=="
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1312,44 +3863,207 @@
         "node": ">=8"
       }
     },
-    "node_modules/fs-extra": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
-      "dev": true,
+    "node_modules/flru": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/flru/-/flru-1.0.2.tgz",
+      "integrity": "sha512-kWyh8ADvHBFz6ua5xYOPnUroZTT/bwWfrCeL0Wj1dzG4/YOmOcfJ99W8dOVyyynJN35rZ9aCOtHChqQovV7yog==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fmin": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/fmin/-/fmin-0.0.2.tgz",
+      "integrity": "sha512-sSi6DzInhl9d8yqssDfGZejChO8d2bAGIpysPsvYsxFe898z89XhCZg6CPNV3nhUhFefeC/AXZK2bAJxlBjN6A==",
       "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
+        "contour_plot": "^0.0.1",
+        "json2module": "^0.0.3",
+        "rollup": "^0.25.8",
+        "tape": "^4.5.1",
+        "uglify-js": "^2.6.2"
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
+      "dependencies": {
+        "is-callable": "^1.2.7"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
+      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
+      "dependencies": {
+        "cross-spawn": "^7.0.6",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/glob-escape": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/glob-escape/-/glob-escape-0.0.2.tgz",
-      "integrity": "sha512-L/cXYz8x7qer1HAyUQ+mbjcUsJVdpRxpAf7CwqHoNBs9vTpABlGfNN4tzkDxt+u3Z7ZncVyKlCNPtzb0R/7WbA==",
-      "dev": true,
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
       "engines": {
-        "node": ">= 0.10"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gl-matrix": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.3.tgz",
+      "integrity": "sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA=="
+    },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
-      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -1357,40 +4071,116 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob-to-regexp": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true
-    },
-    "node_modules/has-flag": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
-      "peer": true,
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/hash-sum": {
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
+      "integrity": "sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-property-descriptors": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-      "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-      "dev": true
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -1398,61 +4188,176 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/i18n": {
-      "version": "0.13.4",
-      "resolved": "https://registry.npmjs.org/i18n/-/i18n-0.13.4.tgz",
-      "integrity": "sha512-GZnXWeA15jTi9gc1jfgrJcSrNYDg7qbJXSYMuibqPYb1ThORmGCeM+gL6LrDagYRHh87/q/D0jRSOhAfv6wAow==",
-      "dev": true,
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "dependencies": {
-        "debug": "^4.3.3",
-        "make-plural": "^7.0.0",
-        "math-interval-parser": "^2.0.1",
-        "messageformat": "^2.3.0",
-        "mustache": "^4.2.0",
-        "sprintf-js": "^1.1.2"
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
       "engines": {
         "node": ">=0.10.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mashpie"
       }
     },
-    "node_modules/immutable": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
-      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
-      "dev": true
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "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.",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
     },
-    "node_modules/indexes-of": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
-      "integrity": "sha512-bup+4tap3Hympa+JBJUG7XuOsdNQ6fxt0MHyXMKuLBKn0OqsTfvUxkUrroEX1+B2VsSHvCjiIcZVxRtYa4nllA==",
-      "dev": true
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
-    "node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
-      "dev": true
+    "node_modules/input-otp": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.1.tgz",
+      "integrity": "sha512-+yvpmKYKHi9jIGngxagY9oWiiblPB7+nEO75F2l2o4vs+6vpPZZmUl4tBNYuTCvQjhvEIbdNeJu70bhfYP2nbw==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
     },
-    "node_modules/invert-kv": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-3.0.1.tgz",
-      "integrity": "sha512-CYdFeFexxhv/Bcny+Q0BfOV+ltRlJcd4BBZBYFX/O0u4npJrgZtIcjokegtiSMAvlMTJ+Koq0GBCc//3bueQxw==",
-      "dev": true,
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/is-arguments": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
+      "integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sindresorhus/invert-kv?sponsor=1"
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-core-module": {
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.2"
       },
@@ -1463,20 +4368,88 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -1484,237 +4457,305 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
     },
-    "node_modules/is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
-      "dev": true,
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
       "dependencies": {
-        "isobject": "^3.0.1"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
-    "node_modules/isobject": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/jest-worker": {
-      "version": "27.5.1",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
-      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
-      "dev": true,
-      "peer": true,
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
       "dependencies": {
-        "@types/node": "*",
-        "merge-stream": "^2.0.0",
-        "supports-color": "^8.0.0"
+        "@isaacs/cliui": "^8.0.2"
       },
-      "engines": {
-        "node": ">= 10.13.0"
-      }
-    },
-    "node_modules/json-parse-even-better-errors": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
-      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/json5": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-      "dev": true,
-      "dependencies": {
-        "minimist": "^1.2.0"
-      },
-      "bin": {
-        "json5": "lib/cli.js"
-      }
-    },
-    "node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "dependencies": {
-        "universalify": "^2.0.0"
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       },
       "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/json2module": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/json2module/-/json2module-0.0.3.tgz",
+      "integrity": "sha512-qYGxqrRrt4GbB8IEOy1jJGypkNsjWoIMlZt4bAsmUScCA507Hbc2p1JOhBzqn45u3PWafUgH2OnzyNU7udO/GA==",
+      "dependencies": {
+        "rw": "^1.3.2"
+      },
+      "bin": {
+        "json2module": "bin/json2module"
       }
     },
     "node_modules/kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "dev": true,
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/klona": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
-      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
-      "dev": true,
+    "node_modules/lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha512-RE2g0b5VGZsOCFOCgP7omTRYFqydmZkBwl5oNnQ1lDYC57uyO9KqNnNVxT7COSHTxrRCWVcAVOcbjk+tvh/rgQ==",
       "engines": {
-        "node": ">= 8"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/lcid": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-3.1.1.tgz",
-      "integrity": "sha512-M6T051+5QCGLBQb8id3hdvIW8+zeFV2FyBGFS9IEK5H9Wt4MueD4bW1eWikpHgZp+5xR3l5c8pZUkQsIA0BFZg==",
-      "dev": true,
-      "dependencies": {
-        "invert-kv": "^3.0.0"
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "engines": {
+        "node": ">=14"
       },
-      "engines": {
-        "node": ">=8"
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
       }
     },
-    "node_modules/loader-runner": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
-      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=6.11.5"
-      }
-    },
-    "node_modules/loader-utils": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-      "dev": true,
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
-    "node_modules/lru-cache": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
-      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
-      "dev": true,
-      "dependencies": {
-        "pseudomap": "^1.0.2",
-        "yallist": "^2.1.2"
-      }
-    },
-    "node_modules/make-plural": {
-      "version": "7.4.0",
-      "resolved": "https://registry.npmjs.org/make-plural/-/make-plural-7.4.0.tgz",
-      "integrity": "sha512-4/gC9KVNTV6pvYg2gFeQYTW3mWaoJt7WZE5vrp1KnQDgW92JtYZnzmZT81oj/dUTqAIu0ufI2x3dkgu3bB1tYg==",
-      "dev": true
-    },
-    "node_modules/math-interval-parser": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/math-interval-parser/-/math-interval-parser-2.0.1.tgz",
-      "integrity": "sha512-VmlAmb0UJwlvMyx8iPhXUDnVW1F9IrGEd9CIOmv+XL8AErCUUuozoDMrgImvnYt2A+53qVX/tPW6YJurMKYsvA==",
-      "dev": true,
+    "node_modules/longest": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
+      "integrity": "sha512-k+yt5n3l48JU4k8ftnKG6V7u32wyH2NfKzeMto9F/QRE0amxy/LayxwlvjjkZEIzqR+19IrtFO8p5kB9QaYUFg==",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
-      "peer": true
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="
+    },
+    "node_modules/lucide-react": {
+      "version": "0.454.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz",
+      "integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "engines": {
+        "node": ">= 0.4"
+      }
     },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
     },
-    "node_modules/messageformat": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/messageformat/-/messageformat-2.3.0.tgz",
-      "integrity": "sha512-uTzvsv0lTeQxYI2y1NPa1lItL5VRI8Gb93Y2K2ue5gBPyrbJxfDi/EYWxh2PKv5yO42AJeeqblS9MJSh/IEk4w==",
-      "deprecated": "Package renamed as '@messageformat/core', see messageformat.github.io for more details. 'messageformat@4' will eventually provide a polyfill for Intl.MessageFormat, once it's been defined by Unicode & ECMA.",
-      "dev": true,
-      "dependencies": {
-        "make-plural": "^4.3.0",
-        "messageformat-formatters": "^2.0.1",
-        "messageformat-parser": "^4.1.2"
-      }
-    },
-    "node_modules/messageformat-formatters": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/messageformat-formatters/-/messageformat-formatters-2.0.1.tgz",
-      "integrity": "sha512-E/lQRXhtHwGuiQjI7qxkLp8AHbMD5r2217XNe/SREbBlSawe0lOqsFb7rflZJmlQFSULNLIqlcjjsCPlB3m3Mg==",
-      "dev": true
-    },
-    "node_modules/messageformat-parser": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/messageformat-parser/-/messageformat-parser-4.1.3.tgz",
-      "integrity": "sha512-2fU3XDCanRqeOCkn7R5zW5VQHWf+T3hH65SzuqRvjatBK7r4uyFa5mEX+k6F9Bd04LVM5G4/BHBTUJsOdW7uyg==",
-      "dev": true
-    },
-    "node_modules/messageformat/node_modules/make-plural": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/make-plural/-/make-plural-4.3.0.tgz",
-      "integrity": "sha512-xTYd4JVHpSCW+aqDof6w/MebaMVNTVYBZhbB/vi513xXdiPT92JMVCo0Jq8W2UZnzYRFeVbQiQ+I25l13JuKvA==",
-      "dev": true,
-      "bin": {
-        "make-plural": "bin/make-plural"
-      },
-      "optionalDependencies": {
-        "minimist": "^1.2.0"
-      }
-    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -1723,102 +4764,180 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/mime-db": {
-      "version": "1.52.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/mime-types": {
-      "version": "2.1.35",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
-      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "dev": true,
-      "peer": true,
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dependencies": {
-        "mime-db": "1.52.0"
+        "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/minimist": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/mkdirp": {
-      "version": "0.5.6",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
-      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
-      "dev": true,
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mock-property": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/mock-property/-/mock-property-1.0.3.tgz",
+      "integrity": "sha512-2emPTb1reeLLYwHxyVx993iYyCHEiRRO+y8NFXFPL5kl5q14sgTK76cXyEKkeKCHeRw35SfdkUJ10Q1KfHuiIQ==",
       "dependencies": {
-        "minimist": "^1.2.6"
+        "define-data-property": "^1.1.1",
+        "functions-have-names": "^1.2.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "hasown": "^2.0.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/next/-/next-15.1.0.tgz",
+      "integrity": "sha512-QKhzt6Y8rgLNlj30izdMbxAwjHMFANnLwDwZ+WQh5sMhyt4lEBqDK9QpvWHtIM4rINKPoJ8aiRZKg5ULSybVHw==",
+      "dependencies": {
+        "@next/env": "15.1.0",
+        "@swc/counter": "0.1.3",
+        "@swc/helpers": "0.5.15",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.6"
       },
       "bin": {
-        "mkdirp": "bin/cmd.js"
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "15.1.0",
+        "@next/swc-darwin-x64": "15.1.0",
+        "@next/swc-linux-arm64-gnu": "15.1.0",
+        "@next/swc-linux-arm64-musl": "15.1.0",
+        "@next/swc-linux-x64-gnu": "15.1.0",
+        "@next/swc-linux-x64-musl": "15.1.0",
+        "@next/swc-win32-arm64-msvc": "15.1.0",
+        "@next/swc-win32-x64-msvc": "15.1.0",
+        "sharp": "^0.33.5"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "babel-plugin-react-compiler": "*",
+        "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "babel-plugin-react-compiler": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
       }
     },
-    "node_modules/module-alias": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/module-alias/-/module-alias-2.2.3.tgz",
-      "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
-      "dev": true
-    },
-    "node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true
-    },
-    "node_modules/mustache": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
-      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
-      "dev": true,
-      "bin": {
-        "mustache": "bin/mustache"
+    "node_modules/next-themes": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
+      "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"
       }
     },
-    "node_modules/neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "dev": true
-    },
-    "node_modules/nice-try": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
-      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
-      "dev": true
-    },
-    "node_modules/node-addon-api": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
-      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
-      "dev": true,
-      "optional": true
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
     },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
-      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
-      "dev": true
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1827,56 +4946,155 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/num2fraction": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
-      "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==",
-      "dev": true
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "node_modules/os-locale-s-fix": {
-      "version": "1.0.8-fix-1",
-      "resolved": "https://registry.npmjs.org/os-locale-s-fix/-/os-locale-s-fix-1.0.8-fix-1.tgz",
-      "integrity": "sha512-Sv0OvhPiMutICiwORAUefv02DCPb62IelBmo8ZsSrRHyI3FStqIWZvjqDkvtjU+lcujo7UNir+dCwKSqlEQ/5w==",
-      "dev": true,
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.3.tgz",
+      "integrity": "sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
       "dependencies": {
-        "lcid": "^3.0.0"
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
       },
       "engines": {
-        "node": ">=10",
-        "yarn": "^1.22.4"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw=="
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
     "node_modules/path-key": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
-      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
-      "dev": true,
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "engines": {
-        "node": ">=4"
+        "node": ">=8"
       }
     },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/pdfast": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/pdfast/-/pdfast-0.2.0.tgz",
+      "integrity": "sha512-cq6TTu6qKSFUHwEahi68k/kqN2mfepjkGrG9Un70cgdRRKLKY6Rf8P8uvP2NvZktaQZNF3YE7agEkLj0vGK9bA=="
     },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
-      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -1888,157 +5106,181 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/postcss": {
-      "version": "7.0.39",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
-      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
-      "dev": true,
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "dependencies": {
-        "picocolors": "^0.2.1",
-        "source-map": "^0.6.1"
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
-        "node": ">=6.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      }
-    },
-    "node_modules/postcss-comment": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-comment/-/postcss-comment-2.0.0.tgz",
-      "integrity": "sha512-5zT5iKU7c0tK9KJFNrVf+g1MGTkzf/4V3e0Zzm2g1uoFQC5jeTHmB9O1iAqh97+jnKpc6al204e0pwFUiCwseg==",
-      "dev": true,
-      "dependencies": {
-        "postcss": "^6.0.0"
-      }
-    },
-    "node_modules/postcss-comment/node_modules/has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-comment/node_modules/postcss": {
-      "version": "6.0.23",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
-      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
-      "dev": true,
-      "dependencies": {
-        "chalk": "^2.4.1",
-        "source-map": "^0.6.1",
-        "supports-color": "^5.4.0"
-      },
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
-    "node_modules/postcss-comment/node_modules/supports-color": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
-      "dev": true,
-      "dependencies": {
-        "has-flag": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-helpers": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/postcss-helpers/-/postcss-helpers-0.3.3.tgz",
-      "integrity": "sha512-VumiUcrpbxGlTBNQj6fUOkb/HNRUk/xYz8bNlhgVOdvk3yWEy4B+0nlDUZZM9mTVZ5bJoxUy7WT6z/4E7oMTgw==",
-      "dev": true,
-      "dependencies": {
-        "urijs": "^1.18.12"
-      },
-      "engines": {
-        "node": ">=0.12.9"
+        "node": "^10 || ^12 || >=14"
       }
     },
     "node_modules/postcss-import": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
-      "integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
-      "dev": true,
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
       "dependencies": {
-        "postcss": "^7.0.1",
-        "postcss-value-parser": "^3.2.3",
+        "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
         "resolve": "^1.1.7"
       },
       "engines": {
-        "node": ">=6.0.0"
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
-      "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
-      "dev": true,
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "dependencies": {
-        "cssesc": "^2.0.0",
-        "indexes-of": "^1.0.1",
-        "uniq": "^1.0.1"
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
       },
       "engines": {
         "node": ">=4"
       }
     },
-    "node_modules/postcss-urlrewrite": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/postcss-urlrewrite/-/postcss-urlrewrite-0.2.2.tgz",
-      "integrity": "sha512-DxPSgykgHjoV4Z+ygvq2C5HkiuiKQQD74xpoNQSQuyi8zab9nODVtNKfnCN6BEv9VZrjpOGLGAf8BDvgG6EtHg==",
-      "dev": true,
-      "dependencies": {
-        "postcss-helpers": "^0.3.2"
-      },
-      "engines": {
-        "node": ">=0.12.9"
-      }
-    },
     "node_modules/postcss-value-parser": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-      "dev": true
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
-    "node_modules/postcss/node_modules/picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
-      "dev": true
-    },
-    "node_modules/pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
-      "dev": true
-    },
-    "node_modules/punycode": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
-      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2054,90 +5296,293 @@
         }
       ]
     },
-    "node_modules/randombytes": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
-      "dev": true,
-      "peer": true,
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+    },
+    "node_modules/rbush": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
+      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
       "dependencies": {
-        "safe-buffer": "^5.1.0"
+        "quickselect": "^2.0.0"
       }
     },
-    "node_modules/rc": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "dev": true,
+    "node_modules/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-day-picker": {
+      "version": "9.6.3",
+      "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.6.3.tgz",
+      "integrity": "sha512-rDqCSKAl5MLX0z1fLkYcBenQK4ANlYaAhUR0ruVSVAhAa7/ZmKQqgDpXPoS7bYEkgBRH06LO1qNFP1Ki8uiZpw==",
       "dependencies": {
-        "deep-extend": "^0.6.0",
-        "ini": "~1.3.0",
-        "minimist": "^1.2.0",
-        "strip-json-comments": "~2.0.1"
+        "@date-fns/tz": "^1.2.0",
+        "date-fns": "^4.1.0",
+        "date-fns-jalali": "^4.1.0-0"
       },
-      "bin": {
-        "rc": "cli.js"
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/gpbl"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
+      "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
+      "dependencies": {
+        "scheduler": "^0.26.0"
+      },
+      "peerDependencies": {
+        "react": "^19.1.0"
+      }
+    },
+    "node_modules/react-hook-form": {
+      "version": "7.55.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.55.0.tgz",
+      "integrity": "sha512-XRnjsH3GVMQz1moZTW53MxfoWN7aDpUg/GpVNc4A3eXRVNdGXfbzJ4vM4aLQ8g6XCUh1nIbx70aaNCl7kxnjog==",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
+      "integrity": "sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-resizable-panels": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-2.1.7.tgz",
+      "integrity": "sha512-JtT6gI+nURzhMYQYsx8DKkx6bSoOGFp7A3CwMrOb8y5jFHFyqwo9m68UhmXRw57fRVJksFn1TSlm3ywEQ9vMgA==",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/react-smooth": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
+      "integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "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"
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "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
+        }
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
       }
     },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
     },
     "node_modules/readdirp": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
-      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
-      "dev": true,
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
       "engines": {
-        "node": ">= 14.18.0"
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/recharts": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz",
+      "integrity": "sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.4",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/registry-auth-token": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
-      "integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==",
-      "dev": true,
-      "dependencies": {
-        "rc": "^1.1.6",
-        "safe-buffer": "^5.0.1"
-      }
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
-    "node_modules/registry-url": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
-      "integrity": "sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==",
-      "dev": true,
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
       "dependencies": {
-        "rc": "^1.0.1"
+        "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"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/require-from-string": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true,
-      "peer": true,
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=0.10"
       }
     },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
       "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.16.0",
         "path-parse": "^1.0.7",
@@ -2157,17 +5602,39 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
       "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
       }
     },
+    "node_modules/right-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+      "integrity": "sha512-yqINtL/G7vs2v+dFIZmFUDbnVyFUJFKd6gK22Kgo6R4jfJGFtisKyncWDDULgjfqf4ASQuIQyjJ7XZ+3aWpsAg==",
+      "dependencies": {
+        "align-text": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "0.25.8",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.25.8.tgz",
+      "integrity": "sha512-a2S4Bh3bgrdO4BhKr2E4nZkjTvrJ2m2bWjMTzVYtoqSCn0HnuxosXnaJUHrMEziOWr3CzL9GjilQQKcyCQpJoA==",
+      "dependencies": {
+        "chalk": "^1.1.1",
+        "minimist": "^1.2.0",
+        "source-map-support": "^0.3.2"
+      },
+      "bin": {
+        "rollup": "bin/rollup"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2186,307 +5653,37 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
     },
-    "node_modules/sass": {
-      "version": "1.86.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.86.0.tgz",
-      "integrity": "sha512-zV8vGUld/+mP4KbMLJMX7TyGCuUp7hnkOScgCMsWuHtns8CWBoz+vmEhoGMXsaJrbUP8gj+F1dLvVe79sK8UdA==",
-      "dev": true,
-      "dependencies": {
-        "chokidar": "^4.0.0",
-        "immutable": "^5.0.2",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "optionalDependencies": {
-        "@parcel/watcher": "^2.4.1"
-      }
-    },
-    "node_modules/sass-loader": {
-      "version": "10.5.2",
-      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.5.2.tgz",
-      "integrity": "sha512-vMUoSNOUKJILHpcNCCyD23X34gve1TS7Rjd9uXHeKqhvBG39x6XbswFDtpbTElj6XdMFezoWhkh5vtKudf2cgQ==",
-      "dev": true,
-      "dependencies": {
-        "klona": "^2.0.4",
-        "loader-utils": "^2.0.0",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^3.0.0",
-        "semver": "^7.3.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "fibers": ">= 3.1.0",
-        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
-        "sass": "^1.3.0",
-        "webpack": "^4.36.0 || ^5.0.0"
-      },
-      "peerDependenciesMeta": {
-        "fibers": {
-          "optional": true
-        },
-        "node-sass": {
-          "optional": true
-        },
-        "sass": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/sass-loader/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/sass-loader/node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true,
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
-    },
-    "node_modules/sass-loader/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
-    "node_modules/sass-loader/node_modules/json5": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
-      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
-      "bin": {
-        "json5": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/sass-loader/node_modules/loader-utils": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
-      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
-      "dev": true,
-      "dependencies": {
-        "big.js": "^5.2.2",
-        "emojis-list": "^3.0.0",
-        "json5": "^2.1.2"
-      },
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
-    "node_modules/sass-loader/node_modules/schema-utils": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
-      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.8",
-        "ajv": "^6.12.5",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/sass-loader/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/schema-utils": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
-      "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.9",
-        "ajv": "^8.9.0",
-        "ajv-formats": "^2.1.1",
-        "ajv-keywords": "^5.1.0"
-      },
-      "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/semver": {
-      "version": "5.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
-      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
-    "node_modules/serialize-javascript": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
-      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "randombytes": "^2.1.0"
-      }
-    },
-    "node_modules/shallow-clone": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
-      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
-      "dev": true,
-      "dependencies": {
-        "kind-of": "^6.0.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/source-map-support": {
-      "version": "0.5.21",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
-      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
-    "node_modules/sprintf-js": {
+    "node_modules/safe-array-concat": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
-      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
-      "dev": true
-    },
-    "node_modules/strip-json-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/supports-color": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
-      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "dev": true,
-      "peer": true,
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
       "dependencies": {
-        "has-flag": "^4.0.0"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=0.4"
       },
       "funding": {
-        "url": "https://github.com/chalk/supports-color?sponsor=1"
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
+    "node_modules/safe-push-apply": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -2494,120 +5691,725 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/tapable": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
-      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
-      "dev": true,
-      "peer": true,
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
       "engines": {
-        "node": ">=6"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/terser": {
-      "version": "5.39.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
-      "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
-      "dev": true,
-      "peer": true,
+    "node_modules/safe-regex-test/node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
       "dependencies": {
-        "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.8.2",
-        "commander": "^2.20.0",
-        "source-map-support": "~0.5.20"
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/scheduler": {
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz",
+      "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA=="
+    },
+    "node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "optional": true,
       "bin": {
-        "terser": "bin/terser"
+        "semver": "bin/semver.js"
       },
       "engines": {
         "node": ">=10"
       }
     },
-    "node_modules/terser-webpack-plugin": {
-      "version": "5.3.14",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.14.tgz",
-      "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==",
-      "dev": true,
-      "peer": true,
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
       "dependencies": {
-        "@jridgewell/trace-mapping": "^0.3.25",
-        "jest-worker": "^27.4.5",
-        "schema-utils": "^4.3.0",
-        "serialize-javascript": "^6.0.2",
-        "terser": "^5.31.1"
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
-        "node": ">= 10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^5.1.0"
-      },
-      "peerDependenciesMeta": {
-        "@swc/core": {
-          "optional": true
-        },
-        "esbuild": {
-          "optional": true
-        },
-        "uglify-js": {
-          "optional": true
-        }
+        "node": ">= 0.4"
       }
     },
-    "node_modules/tinyglobby": {
-      "version": "0.2.12",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
-      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
-      "dev": true,
-      "peer": true,
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
       "dependencies": {
-        "fdir": "^6.4.3",
-        "picomatch": "^4.0.2"
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/sharp": {
+      "version": "0.33.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
+      "integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.3",
+        "semver": "^7.6.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/SuperchupuDev"
-      }
-    },
-    "node_modules/tinyglobby/node_modules/fdir": {
-      "version": "6.4.3",
-      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
-      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
-      "dev": true,
-      "peer": true,
-      "peerDependencies": {
-        "picomatch": "^3 || ^4"
+        "url": "https://opencollective.com/libvips"
       },
-      "peerDependenciesMeta": {
-        "picomatch": {
-          "optional": true
-        }
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.33.5",
+        "@img/sharp-darwin-x64": "0.33.5",
+        "@img/sharp-libvips-darwin-arm64": "1.0.4",
+        "@img/sharp-libvips-darwin-x64": "1.0.4",
+        "@img/sharp-libvips-linux-arm": "1.0.5",
+        "@img/sharp-libvips-linux-arm64": "1.0.4",
+        "@img/sharp-libvips-linux-s390x": "1.0.4",
+        "@img/sharp-libvips-linux-x64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.0.4",
+        "@img/sharp-linux-arm": "0.33.5",
+        "@img/sharp-linux-arm64": "0.33.5",
+        "@img/sharp-linux-s390x": "0.33.5",
+        "@img/sharp-linux-x64": "0.33.5",
+        "@img/sharp-linuxmusl-arm64": "0.33.5",
+        "@img/sharp-linuxmusl-x64": "0.33.5",
+        "@img/sharp-wasm32": "0.33.5",
+        "@img/sharp-win32-ia32": "0.33.5",
+        "@img/sharp-win32-x64": "0.33.5"
       }
     },
-    "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
-      "peer": true,
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list/node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map/node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap/node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel/node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/sonner": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.7.4.tgz",
+      "integrity": "sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.1.32",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.1.32.tgz",
+      "integrity": "sha512-htQyLrrRLkQ87Zfrir4/yN+vAUd6DNjVayEjTSHXu29AYQJw57I4/xEL/M6p6E/woPNJwvZt6rVlzc7gFEJccQ==",
+      "dependencies": {
+        "amdefine": ">=0.0.4"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.3.3.tgz",
+      "integrity": "sha512-9O4+y9n64RewmFoKUZ/5Tx9IHIcXM6Q+RTSw6ehnqybUz4a7iwR3Eaw80uLtqqQ5D0C+5H03D4KKGo9PdP33Gg==",
+      "dependencies": {
+        "source-map": "0.1.32"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
       "engines": {
         "node": ">=12"
       },
       "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/string-width/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
+      "integrity": "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svg-path-parser": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/svg-path-parser/-/svg-path-parser-1.1.0.tgz",
+      "integrity": "sha512-jGCUqcQyXpfe38R7RFfhrMyfXcBmpMNJI/B+4CE9/Unkh98UporAc461GTthv+TVDuZXsBx7/WiwJb1Oh4tt4A=="
+    },
+    "node_modules/tailwind-merge": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
+      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
+    "node_modules/tape": {
+      "version": "4.17.0",
+      "resolved": "https://registry.npmjs.org/tape/-/tape-4.17.0.tgz",
+      "integrity": "sha512-KCuXjYxCZ3ru40dmND+oCLsXyuA8hoseu2SS404Px5ouyS0A99v8X/mdiLqsR5MTAyamMBN7PRwt2Dv3+xGIxw==",
+      "dependencies": {
+        "@ljharb/resumer": "~0.0.1",
+        "@ljharb/through": "~2.3.9",
+        "call-bind": "~1.0.2",
+        "deep-equal": "~1.1.1",
+        "defined": "~1.0.1",
+        "dotignore": "~0.1.2",
+        "for-each": "~0.3.3",
+        "glob": "~7.2.3",
+        "has": "~1.0.3",
+        "inherits": "~2.0.4",
+        "is-regex": "~1.1.4",
+        "minimist": "~1.2.8",
+        "mock-property": "~1.0.0",
+        "object-inspect": "~1.12.3",
+        "resolve": "~1.22.6",
+        "string.prototype.trim": "~1.2.8"
+      },
+      "bin": {
+        "tape": "bin/tape"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tape/node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/tape/node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/tape/node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -2615,33 +6417,158 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz",
+      "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/uglify-js": {
+      "version": "2.8.29",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+      "integrity": "sha512-qLq/4y2pjcU3vhlhseXGGJ7VbFO4pBANu0kwl8VCa9KEI0V8VfZIx2Fy3w01iSTA/pGwKZSmu/+I4etLNDdt5w==",
+      "dependencies": {
+        "source-map": "~0.5.1",
+        "yargs": "~3.10.0"
+      },
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      },
+      "optionalDependencies": {
+        "uglify-to-browserify": "~1.0.0"
+      }
+    },
+    "node_modules/uglify-js/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/uglify-to-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+      "integrity": "sha512-vb2s1lYx2xBtUgy+ta+b2J/GLVUR+wmpINwHePmPRhOsIVCG2wDzKJ0n14GslH1BifsqVzSOwQhRaCAsZ/nI4Q==",
+      "optional": true
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/undici-types": {
       "version": "6.20.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
       "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
-      "dev": true,
-      "peer": true
-    },
-    "node_modules/uniq": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
-      "integrity": "sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==",
       "dev": true
     },
-    "node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
       "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -2667,151 +6594,375 @@
         "browserslist": ">= 4.21.0"
       }
     },
-    "node_modules/update-check": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.4.tgz",
-      "integrity": "sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==",
-      "dev": true,
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
       "dependencies": {
-        "registry-auth-token": "3.3.2",
-        "registry-url": "3.1.0"
-      }
-    },
-    "node_modules/uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
-      "dependencies": {
-        "punycode": "^2.1.0"
-      }
-    },
-    "node_modules/urijs": {
-      "version": "1.19.11",
-      "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.11.tgz",
-      "integrity": "sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ==",
-      "dev": true
-    },
-    "node_modules/uview-ui": {
-      "version": "2.0.38",
-      "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.38.tgz",
-      "integrity": "sha512-6egHDf9lXHKpG3hEjRE0vMx4+VWwKk/ReTf5x18KrIKqdvdPRqO3+B8Unh7vYYwrIxzAWIlmhZ9RJpKI/4UqPQ==",
-      "engines": {
-        "HBuilderX": "^3.1.0"
-      }
-    },
-    "node_modules/watchpack": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
-      "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.1.2"
+        "tslib": "^2.0.0"
       },
       "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/webpack": {
-      "version": "5.98.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.98.0.tgz",
-      "integrity": "sha512-UFynvx+gM44Gv9qFgj0acCQK2VE1CtdfwFdimkapco3hlPCJ/zeq73n2yVKimVbtm+TnApIugGhLJnkU6gjYXA==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/eslint-scope": "^3.7.7",
-        "@types/estree": "^1.0.6",
-        "@webassemblyjs/ast": "^1.14.1",
-        "@webassemblyjs/wasm-edit": "^1.14.1",
-        "@webassemblyjs/wasm-parser": "^1.14.1",
-        "acorn": "^8.14.0",
-        "browserslist": "^4.24.0",
-        "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.17.1",
-        "es-module-lexer": "^1.2.1",
-        "eslint-scope": "5.1.1",
-        "events": "^3.2.0",
-        "glob-to-regexp": "^0.4.1",
-        "graceful-fs": "^4.2.11",
-        "json-parse-even-better-errors": "^2.3.1",
-        "loader-runner": "^4.2.0",
-        "mime-types": "^2.1.27",
-        "neo-async": "^2.6.2",
-        "schema-utils": "^4.3.0",
-        "tapable": "^2.1.1",
-        "terser-webpack-plugin": "^5.3.11",
-        "watchpack": "^2.4.1",
-        "webpack-sources": "^3.2.3"
+        "node": ">=10"
       },
-      "bin": {
-        "webpack": "bin/webpack.js"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
-        "webpack-cli": {
+        "@types/react": {
           "optional": true
         }
       }
     },
-    "node_modules/webpack-merge": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
-      "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
-      "dev": true,
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
       "dependencies": {
-        "lodash": "^4.17.15"
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "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
+        }
       }
     },
-    "node_modules/webpack-sources": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
-      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-      "dev": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10.13.0"
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/vaul": {
+      "version": "0.9.9",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-0.9.9.tgz",
+      "integrity": "sha512-7afKg48srluhZwIkaU+lgGtFCUsYBSGOl8vcc8N/M3YQlZFlynHD15AE+pwrYdc826o7nrIND4lL9Y6b9WWZZQ==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
       }
     },
     "node_modules/which": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
-      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
-      "dev": true,
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "dependencies": {
         "isexe": "^2.0.0"
       },
       "bin": {
-        "which": "bin/which"
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
       }
     },
-    "node_modules/wrap-loader": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/wrap-loader/-/wrap-loader-0.2.0.tgz",
-      "integrity": "sha512-Qdhdu7vr2H8dLE2sKySQznOBHXIHbKg7PZ5aqkeBOQHGqxLfcJw/ZlB40j67b1tks9OYqSBCHc+uHtGRCmQYlg==",
-      "dev": true,
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
       "dependencies": {
-        "loader-utils": "^1.1.0"
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/xregexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz",
-      "integrity": "sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg==",
-      "dev": true
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
     },
-    "node_modules/yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
-      "dev": true
+    "node_modules/which-builtin-type/node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
+      "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/window-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+      "integrity": "sha512-1pTPQDKTdd61ozlKGNCjhNRd+KPmgLSGa3mZTHoOliaGcESD8G1PXhh7c1fgiPjVbNVfgy2Faw4BI8/m0cC8Mg==",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/wordwrap": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+      "integrity": "sha512-xSBsCeh+g+dinoBv3GAOWM4LcVVO68wLXRanibtBSdUvkGWQRGeE9P7IwU9EmDDi4jA6L44lz15CGMwdw9N5+Q==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
+    },
+    "node_modules/yaml": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+      "integrity": "sha512-QFzUah88GAGy9lyDKGBqZdkYApt63rCXYBGYnEP4xDJPXNqXXnBDACnbrXnViV6jRSqAePwrATi2i8mfYm4L1A==",
+      "dependencies": {
+        "camelcase": "^1.0.2",
+        "cliui": "^2.1.0",
+        "decamelize": "^1.0.0",
+        "window-size": "0.1.0"
+      }
+    },
+    "node_modules/zod": {
+      "version": "3.24.2",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.2.tgz",
+      "integrity": "sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/Cunkebao/package.json b/Cunkebao/package.json
index 261f7869..c903c780 100644
--- a/Cunkebao/package.json
+++ b/Cunkebao/package.json
@@ -1,32 +1,75 @@
 {
-  "name": "cunkebao",
-  "version": "1.0.0",
-  "description": "存客宝 - 基于 uni-app 的跨平台应用",
-  "main": "main.js",
+  "name": "my-v0-project",
+  "version": "0.1.0",
+  "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
   },
-  "keywords": [
-    "uni-app",
-    "vue",
-    "小程序",
-    "APP",
-    "H5"
-  ],
-  "author": "CunkeBao Team",
-  "license": "MIT",
   "dependencies": {
-    "uview-ui": "^2.0.38"
+    "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-accordion": "latest",
+    "@radix-ui/react-alert-dialog": "^1.1.4",
+    "@radix-ui/react-aspect-ratio": "^1.1.1",
+    "@radix-ui/react-avatar": "latest",
+    "@radix-ui/react-checkbox": "latest",
+    "@radix-ui/react-collapsible": "latest",
+    "@radix-ui/react-context-menu": "^2.2.4",
+    "@radix-ui/react-dialog": "latest",
+    "@radix-ui/react-dropdown-menu": "latest",
+    "@radix-ui/react-hover-card": "^1.1.4",
+    "@radix-ui/react-label": "latest",
+    "@radix-ui/react-menubar": "^1.1.4",
+    "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@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-separator": "^1.1.1",
+    "@radix-ui/react-slider": "latest",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "latest",
+    "@radix-ui/react-tabs": "latest",
+    "@radix-ui/react-toast": "latest",
+    "@radix-ui/react-toggle": "^1.1.1",
+    "@radix-ui/react-toggle-group": "^1.1.1",
+    "@radix-ui/react-tooltip": "latest",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.4",
+    "date-fns": "latest",
+    "embla-carousel-react": "8.5.1",
+    "input-otp": "1.4.1",
+    "lucide-react": "^0.454.0",
+    "next": "15.1.0",
+    "next-themes": "^0.4.4",
+    "react": "^19",
+    "react-day-picker": "latest",
+    "react-dom": "^19",
+    "react-hook-form": "^7.54.1",
+    "react-resizable-panels": "^2.1.7",
+    "recharts": "latest",
+    "sonner": "^1.7.1",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.6",
+    "zod": "^3.24.1",
+    "@ant-design/plots": "latest",
+    "regenerator-runtime": "latest",
+    "chart.js": "latest",
+    "@tanstack/react-table": "latest",
+    "@radix-ui/react-icons": "latest"
   },
   "devDependencies": {
-    "@dcloudio/uni-cli-i18n": "^2.0.2-4050620250311002",
-    "@dcloudio/uni-cli-shared": "^2.0.2-4050620250311002",
-    "@dcloudio/vue-cli-plugin-uni": "^2.0.2-4050620250311002",
-    "autoprefixer": "^9.8.8",
-    "postcss": "^7.0.39",
-    "postcss-comment": "^2.0.0",
-    "postcss-import": "^12.0.1",
-    "sass": "^1.86.0",
-    "sass-loader": "^10.5.2"
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5"
   }
-}
+}
\ No newline at end of file
diff --git a/Cunkebao/pnpm-lock.yaml b/Cunkebao/pnpm-lock.yaml
new file mode 100644
index 00000000..ca98c481
--- /dev/null
+++ b/Cunkebao/pnpm-lock.yaml
@@ -0,0 +1,5 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
\ No newline at end of file
diff --git a/Cunkebao/postcss.config.mjs b/Cunkebao/postcss.config.mjs
new file mode 100644
index 00000000..1a69fd2a
--- /dev/null
+++ b/Cunkebao/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/Cunkebao/public/placeholder-logo.png b/Cunkebao/public/placeholder-logo.png
new file mode 100644
index 00000000..6528839b
Binary files /dev/null and b/Cunkebao/public/placeholder-logo.png differ
diff --git a/Cunkebao/public/placeholder-logo.svg b/Cunkebao/public/placeholder-logo.svg
new file mode 100644
index 00000000..b1695aaf
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/public/placeholder-user.jpg b/Cunkebao/public/placeholder-user.jpg
new file mode 100644
index 00000000..6faa819c
Binary files /dev/null and b/Cunkebao/public/placeholder-user.jpg differ
diff --git a/Cunkebao/public/placeholder.jpg b/Cunkebao/public/placeholder.jpg
new file mode 100644
index 00000000..a6bf2ee6
Binary files /dev/null and b/Cunkebao/public/placeholder.jpg differ
diff --git a/Cunkebao/public/placeholder.svg b/Cunkebao/public/placeholder.svg
new file mode 100644
index 00000000..e763910b
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/styles/globals.css b/Cunkebao/styles/globals.css
new file mode 100644
index 00000000..ac684423
--- /dev/null
+++ b/Cunkebao/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/Cunkebao/tailwind.config.js b/Cunkebao/tailwind.config.js
new file mode 100644
index 00000000..1d72cc0a
--- /dev/null
+++ b/Cunkebao/tailwind.config.js
@@ -0,0 +1,55 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    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))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+}
+
diff --git a/Cunkebao/tsconfig.json b/Cunkebao/tsconfig.json
new file mode 100644
index 00000000..364f8027
--- /dev/null
+++ b/Cunkebao/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "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/Cunkebao/types/acquisition.ts b/Cunkebao/types/acquisition.ts
new file mode 100644
index 00000000..a4e0d290
--- /dev/null
+++ b/Cunkebao/types/acquisition.ts
@@ -0,0 +1,29 @@
+export interface AcquisitionPlan {
+  id: string
+  name: string
+  type: string
+  reward: {
+    type: "disabled" | "onSubmit" | "onApprove"
+    amount: number
+  }
+  workers: Worker[]
+  webUrl?: string
+  miniappUrl?: string
+}
+
+export interface Worker {
+  id: string
+  name: string
+  avatar?: string
+}
+
+export interface OrderFormData {
+  customerName: string
+  phone: string
+  wechatId: string
+  source: string
+  amount?: number
+  orderDate: string
+  remark: string
+}
+
diff --git a/Cunkebao/types/auto-group.ts b/Cunkebao/types/auto-group.ts
new file mode 100644
index 00000000..1374bab6
--- /dev/null
+++ b/Cunkebao/types/auto-group.ts
@@ -0,0 +1,41 @@
+export interface AutoGroupPlan {
+  id: string
+  name: string
+  customerType: string
+  startDate: string
+  endDate: string
+  groupSize: number
+  welcomeMessage: string
+  deviceId: string
+  operatorId: string
+  status: "running" | "stopped" | "completed"
+  createdGroups: number
+  totalFriends: number
+  tags: string[]
+  specificWechatIds: string[]
+  keywords: string[]
+}
+
+export interface GroupMember {
+  id: string
+  wechatId: string
+  nickname: string
+  avatar: string
+  tags: string[]
+}
+
+export interface Device {
+  id: string
+  name: string
+  status: "online" | "offline"
+  currentOperator: string
+}
+
+export interface WechatAccount {
+  id: string
+  wechatId: string
+  nickname: string
+  avatar: string
+  status: "online" | "offline"
+}
+
diff --git a/Cunkebao/types/common.ts b/Cunkebao/types/common.ts
new file mode 100644
index 00000000..4f011515
--- /dev/null
+++ b/Cunkebao/types/common.ts
@@ -0,0 +1,44 @@
+// API响应格式
+export interface ApiResponse<T> {
+  code: number
+  message: string
+  data: T | null
+}
+
+// 分页响应格式
+export interface PaginatedResponse<T> {
+  items: T[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}
+
+// 通用查询参数
+export interface QueryParams {
+  page?: number
+  pageSize?: number
+  keyword?: string
+  dateRange?: {
+    start: string
+    end: string
+  }
+}
+
+// 通用状态枚举
+export enum Status {
+  ACTIVE = "active",
+  INACTIVE = "inactive",
+  PENDING = "pending",
+  COMPLETED = "completed",
+  FAILED = "failed",
+  DRAFT = "draft",
+}
+
+// 通用基础实体
+export interface BaseEntity {
+  id: string
+  createdAt: string
+  updatedAt: string
+}
+
diff --git a/Cunkebao/types/content-library.ts b/Cunkebao/types/content-library.ts
new file mode 100644
index 00000000..22ae5e9d
--- /dev/null
+++ b/Cunkebao/types/content-library.ts
@@ -0,0 +1,30 @@
+export interface ContentLibrary {
+  id: string
+  name: string
+  type: "moments" | "group"
+  source: string
+  creator: string
+  contentCount: number
+  lastUpdated: string
+  status: "active" | "inactive"
+}
+
+export interface ContentLibraryResponse {
+  code: number
+  message: string
+  data: {
+    libraries: ContentLibrary[]
+    total: number
+  }
+}
+
+export interface ContentLibrarySelectResponse {
+  code: number
+  message: string
+  data: {
+    success: boolean
+    libraryId: string
+    name: string
+  }
+}
+
diff --git a/Cunkebao/types/content.ts b/Cunkebao/types/content.ts
new file mode 100644
index 00000000..ec9f1489
--- /dev/null
+++ b/Cunkebao/types/content.ts
@@ -0,0 +1,42 @@
+export interface ContentLibrary {
+  id: string
+  name: string
+  source: string
+  creator: string
+  contentCount: number
+  lastUpdated: string
+  type: "moments" | "chat" | "group"
+  status: "active" | "inactive"
+  items: ContentItem[]
+}
+
+export interface ContentItem {
+  id: string
+  title: string
+  content: string
+  type: "text" | "image" | "video"
+  images?: string[]
+  video?: string
+  createTime: string
+  publishTime?: string
+  status: "pending" | "published" | "failed"
+}
+
+export interface Tag {
+  id: string
+  name: string
+  description?: string
+  contentCount: number
+  lastSync: string
+  settings: {
+    syncInterval: number
+    timeRange: {
+      start: string
+      end: string
+    }
+    dailyLimit: number
+    accountType: "business" | "personal"
+    enabled: boolean
+  }
+}
+
diff --git a/Cunkebao/types/device.ts b/Cunkebao/types/device.ts
new file mode 100644
index 00000000..b6c35444
--- /dev/null
+++ b/Cunkebao/types/device.ts
@@ -0,0 +1,118 @@
+// 设备状态枚举
+export enum DeviceStatus {
+  ONLINE = "online",
+  OFFLINE = "offline",
+  BUSY = "busy",
+  ERROR = "error",
+}
+
+// 设备类型枚举
+export enum DeviceType {
+  ANDROID = "android",
+  IOS = "ios",
+}
+
+// 设备基础信息
+export interface Device {
+  id: string
+  name: string
+  imei: string
+  type: DeviceType
+  status: DeviceStatus
+  wechatId: string
+  friendCount: number
+  battery: number
+  lastActive: string
+  addFriendStatus: "normal" | "abnormal"
+  remark?: string
+}
+
+// 设备统计信息
+export interface DeviceStats {
+  totalTasks: number
+  completedTasks: number
+  failedTasks: number
+  todayNewFriends: number
+  totalNewFriends: number
+  onlineTime: number // 在线时长(分钟)
+}
+
+// 设备任务记录
+export interface DeviceTaskRecord {
+  id: string
+  deviceId: string
+  taskType: string
+  status: "pending" | "running" | "completed" | "failed"
+  startTime: string
+  endTime?: string
+  result?: string
+  error?: string
+}
+
+// API响应格式
+export interface ApiResponse<T> {
+  code: number
+  message: string
+  data: T | null
+}
+
+// 分页响应格式
+export interface PaginatedResponse<T> {
+  items: T[]
+  total: number
+  page: number
+  pageSize: number
+  totalPages: number
+}
+
+// 设备查询参数
+export interface QueryDeviceParams {
+  keyword?: string
+  status?: DeviceStatus
+  type?: DeviceType
+  tags?: string[]
+  page?: number
+  pageSize?: number
+  dateRange?: {
+    start: string
+    end: string
+  }
+}
+
+// 创建设备参数
+export interface CreateDeviceParams {
+  name: string
+  imei: string
+  type: DeviceType
+  wechatId?: string
+  remark?: string
+  tags?: string[]
+}
+
+// 更新设备参数
+export interface UpdateDeviceParams {
+  id: string
+  name?: string
+  wechatId?: string
+  remark?: string
+  tags?: string[]
+}
+
+export interface DeviceResponse {
+  code: number
+  message: string
+  data: {
+    devices: Device[]
+    total: number
+  }
+}
+
+export interface DeviceSelectResponse {
+  code: number
+  message: string
+  data: {
+    success: boolean
+    deviceIds: string[]
+  }
+}
+
diff --git a/Cunkebao/types/group-push.ts b/Cunkebao/types/group-push.ts
new file mode 100644
index 00000000..cbe6476c
--- /dev/null
+++ b/Cunkebao/types/group-push.ts
@@ -0,0 +1,40 @@
+export interface ServiceAccount {
+  id: string
+  name: string
+  avatar: string
+}
+
+export interface WechatGroup {
+  id: string
+  name: string
+  avatar: string
+  serviceAccount: ServiceAccount
+}
+
+export interface ContentTarget {
+  id: string
+  avatar: string
+}
+
+export interface ContentLibrary {
+  id: string
+  name: string
+  targets: ContentTarget[]
+}
+
+export interface GroupPushTask {
+  id: string
+  name: string
+  pushTimeStart: string
+  pushTimeEnd: string
+  dailyPushCount: number
+  pushOrder: "earliest" | "latest"
+  isLoopPush: boolean
+  isImmediatePush: boolean
+  isEnabled: boolean
+  groups: WechatGroup[]
+  contentLibraries: ContentLibrary[]
+  createdAt: string
+  updatedAt: string
+}
+
diff --git a/Cunkebao/types/group-sync.ts b/Cunkebao/types/group-sync.ts
new file mode 100644
index 00000000..f30b645d
--- /dev/null
+++ b/Cunkebao/types/group-sync.ts
@@ -0,0 +1,36 @@
+export interface GroupSyncTask {
+  id: string
+  name: string
+  pushTimeStart: string
+  pushTimeEnd: string
+  dailyPushCount: number
+  pushOrder: "earliest" | "latest"
+  isLoopPush: boolean
+  isImmediatePush: boolean
+  isEnabled: boolean
+  groups: WechatGroup[]
+  contentLibraries: ContentLibrary[]
+  createdAt: string
+  updatedAt: string
+}
+
+export interface WechatGroup {
+  id: string
+  name: string
+  avatar?: string
+  serviceAccount: {
+    id: string
+    name: string
+    avatar?: string
+  }
+}
+
+export interface ContentLibrary {
+  id: string
+  name: string
+  targets: {
+    id: string
+    avatar?: string
+  }[]
+}
+
diff --git a/Cunkebao/types/scenario.ts b/Cunkebao/types/scenario.ts
new file mode 100644
index 00000000..d09b797b
--- /dev/null
+++ b/Cunkebao/types/scenario.ts
@@ -0,0 +1,112 @@
+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/Cunkebao/types/traffic.ts b/Cunkebao/types/traffic.ts
new file mode 100644
index 00000000..c0c048d2
--- /dev/null
+++ b/Cunkebao/types/traffic.ts
@@ -0,0 +1,15 @@
+export interface TrafficUser {
+  id: string
+  avatar: string
+  nickname: string
+  wechatId: string
+  phone: string
+  region: string
+  note: string
+  status: "pending" | "added" | "failed"
+  addTime: string
+  source: string
+  assignedTo: string
+  category: "potential" | "customer" | "lost"
+}
+
diff --git a/Cunkebao/types/tutorial.ts b/Cunkebao/types/tutorial.ts
new file mode 100644
index 00000000..4492c096
--- /dev/null
+++ b/Cunkebao/types/tutorial.ts
@@ -0,0 +1,13 @@
+export interface TutorialVideo {
+  id: string
+  title: string
+  description: string
+  url: string
+  thumbnailUrl: string
+}
+
+export interface PageTutorial {
+  pageId: string
+  videos: TutorialVideo[]
+}
+
diff --git a/Cunkebao/.env.production b/Cunkebao_Uniapp/.env.production
similarity index 100%
rename from Cunkebao/.env.production
rename to Cunkebao_Uniapp/.env.production
diff --git a/Cunkebao_Uniapp/.gitignore b/Cunkebao_Uniapp/.gitignore
new file mode 100644
index 00000000..1dcef2d9
--- /dev/null
+++ b/Cunkebao_Uniapp/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+.env
\ No newline at end of file
diff --git a/Cunkebao/App.vue b/Cunkebao_Uniapp/App.vue
similarity index 100%
rename from Cunkebao/App.vue
rename to Cunkebao_Uniapp/App.vue
diff --git a/Cunkebao/README.md b/Cunkebao_Uniapp/README.md
similarity index 100%
rename from Cunkebao/README.md
rename to Cunkebao_Uniapp/README.md
diff --git a/Cunkebao/api/device.js b/Cunkebao_Uniapp/api/device.js
similarity index 100%
rename from Cunkebao/api/device.js
rename to Cunkebao_Uniapp/api/device.js
diff --git a/Cunkebao/api/user.js b/Cunkebao_Uniapp/api/user.js
similarity index 100%
rename from Cunkebao/api/user.js
rename to Cunkebao_Uniapp/api/user.js
diff --git a/Cunkebao/components/CustomTabBar.vue b/Cunkebao_Uniapp/components/CustomTabBar.vue
similarity index 100%
rename from Cunkebao/components/CustomTabBar.vue
rename to Cunkebao_Uniapp/components/CustomTabBar.vue
diff --git a/Cunkebao/components/LineChart.vue b/Cunkebao_Uniapp/components/LineChart.vue
similarity index 100%
rename from Cunkebao/components/LineChart.vue
rename to Cunkebao_Uniapp/components/LineChart.vue
diff --git a/Cunkebao/components/TabBar.vue b/Cunkebao_Uniapp/components/TabBar.vue
similarity index 100%
rename from Cunkebao/components/TabBar.vue
rename to Cunkebao_Uniapp/components/TabBar.vue
diff --git a/Cunkebao/main.js b/Cunkebao_Uniapp/main.js
similarity index 100%
rename from Cunkebao/main.js
rename to Cunkebao_Uniapp/main.js
diff --git a/Cunkebao/manifest.json b/Cunkebao_Uniapp/manifest.json
similarity index 100%
rename from Cunkebao/manifest.json
rename to Cunkebao_Uniapp/manifest.json
diff --git a/Cunkebao_Uniapp/package-lock.json b/Cunkebao_Uniapp/package-lock.json
new file mode 100644
index 00000000..a0c0f7f6
--- /dev/null
+++ b/Cunkebao_Uniapp/package-lock.json
@@ -0,0 +1,2817 @@
+{
+  "name": "cunkebao",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "cunkebao",
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "uview-ui": "^2.0.38"
+      },
+      "devDependencies": {
+        "@dcloudio/uni-cli-i18n": "^2.0.2-4050620250311002",
+        "@dcloudio/uni-cli-shared": "^2.0.2-4050620250311002",
+        "@dcloudio/vue-cli-plugin-uni": "^2.0.2-4050620250311002",
+        "autoprefixer": "^9.8.8",
+        "postcss": "^7.0.39",
+        "postcss-comment": "^2.0.0",
+        "postcss-import": "^12.0.1",
+        "sass": "^1.86.0",
+        "sass-loader": "^10.5.2"
+      }
+    },
+    "node_modules/@dcloudio/uni-cli-i18n": {
+      "version": "2.0.2-4050620250311002",
+      "resolved": "https://registry.npmjs.org/@dcloudio/uni-cli-i18n/-/uni-cli-i18n-2.0.2-4050620250311002.tgz",
+      "integrity": "sha512-ytyr8/UApkYaa3Hq45KF9m7/gDcWDPmA8qn5wRyth3wvML2EdA8n83A0ZkJHXv6Kty/NdfTPhVY8HjMGGwEv+g==",
+      "dev": true,
+      "dependencies": {
+        "i18n": "^0.13.3",
+        "os-locale-s-fix": "^1.0.8-fix-1"
+      }
+    },
+    "node_modules/@dcloudio/uni-cli-shared": {
+      "version": "2.0.2-4050620250311002",
+      "resolved": "https://registry.npmjs.org/@dcloudio/uni-cli-shared/-/uni-cli-shared-2.0.2-4050620250311002.tgz",
+      "integrity": "sha512-aVlYXd4JFMiUJu5g3j9BJwlDDaXbkCRlktekmFPQdUN1o0inqeHl2zUiybEruGPluvjB/YNLrUo09gag+nCXCw==",
+      "dev": true,
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0",
+        "fast-glob": "^3.2.11",
+        "fs-extra": "^10.0.0",
+        "glob-escape": "^0.0.2",
+        "hash-sum": "^1.0.2",
+        "postcss-urlrewrite": "^0.2.2",
+        "strip-json-comments": "^2.0.1"
+      }
+    },
+    "node_modules/@dcloudio/uni-stat": {
+      "version": "2.0.2-4050620250311002",
+      "resolved": "https://registry.npmjs.org/@dcloudio/uni-stat/-/uni-stat-2.0.2-4050620250311002.tgz",
+      "integrity": "sha512-c+uhL9ry9TVyxcOMZaTnlpgkX+kBw8GQuezDBoGQ900OE5YZbUOzVTveHxLXMCKyUKxinpsa9I/ySO5Qehx6Ug==",
+      "dev": true
+    },
+    "node_modules/@dcloudio/vue-cli-plugin-uni": {
+      "version": "2.0.2-4050620250311002",
+      "resolved": "https://registry.npmjs.org/@dcloudio/vue-cli-plugin-uni/-/vue-cli-plugin-uni-2.0.2-4050620250311002.tgz",
+      "integrity": "sha512-lB/rOVV3aPkuSF+5ZY4vidXdkHmw94jah7tOUv1tCTZa6UKKN+xYmaqwqv2G6/LeXSFmYDJLztum6FwpTjY7ZA==",
+      "dev": true,
+      "dependencies": {
+        "@dcloudio/uni-stat": "^2.0.2-4050620250311002",
+        "buffer-json": "^2.0.0",
+        "clone-deep": "^4.0.1",
+        "cross-env": "^5.2.0",
+        "envinfo": "^6.0.1",
+        "hash-sum": "^1.0.2",
+        "loader-utils": "^1.1.0",
+        "lru-cache": "^4.1.2",
+        "mkdirp": "^0.5.1",
+        "module-alias": "^2.1.0",
+        "neo-async": "^2.6.1",
+        "postcss-import": "^12.0.1",
+        "postcss-selector-parser": "^5.0.0",
+        "postcss-value-parser": "^3.3.1",
+        "strip-json-comments": "^2.0.1",
+        "update-check": "^1.5.3",
+        "webpack-merge": "^4.1.4",
+        "wrap-loader": "^0.2.0",
+        "xregexp": "4.0.0"
+      },
+      "bin": {
+        "uniapp-cli": "bin/uniapp-cli.js"
+      },
+      "peerDependencies": {
+        "copy-webpack-plugin": ">=5",
+        "postcss": ">=7"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
+      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@types/eslint": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
+      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/estree": "*",
+        "@types/json-schema": "*"
+      }
+    },
+    "node_modules/@types/eslint-scope": {
+      "version": "3.7.7",
+      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
+      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/eslint": "*",
+        "@types/estree": "*"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true
+    },
+    "node_modules/@types/node": {
+      "version": "22.13.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.13.tgz",
+      "integrity": "sha512-ClsL5nMwKaBRwPcCvH8E7+nU4GxHVx1axNvMZTFHMEfNI7oahimt26P5zjVCRrjiIWj6YFXfE1v3dEp94wLcGQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
+      "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/helper-numbers": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
+      "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
+      "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
+      "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-numbers": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
+      "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/floating-point-hex-parser": "1.13.2",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
+      "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
+      "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/wasm-gen": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
+      "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
+      "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
+      "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
+      "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/helper-wasm-section": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-opt": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1",
+        "@webassemblyjs/wast-printer": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
+      "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
+      "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-buffer": "1.14.1",
+        "@webassemblyjs/wasm-gen": "1.14.1",
+        "@webassemblyjs/wasm-parser": "1.14.1"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
+      "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@webassemblyjs/helper-api-error": "1.13.2",
+        "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
+        "@webassemblyjs/ieee754": "1.13.2",
+        "@webassemblyjs/leb128": "1.13.2",
+        "@webassemblyjs/utf8": "1.13.2"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
+      "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@webassemblyjs/ast": "1.14.1",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/acorn": {
+      "version": "8.14.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
+      "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "9.8.8",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz",
+      "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001109",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "picocolors": "^0.2.1",
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+      }
+    },
+    "node_modules/autoprefixer/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/autoprefixer/node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
+      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001688",
+        "electron-to-chromium": "^1.5.73",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.1"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/buffer-json": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-json/-/buffer-json-2.0.0.tgz",
+      "integrity": "sha512-+jjPFVqyfF1esi9fvfUs3NqM0pH1ziZ36VP4hmA/y/Ssfo/5w5xHKfTw9BwQjoJ1w/oVtpLomqwUHKdefGyuHw==",
+      "dev": true
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001707",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001707.tgz",
+      "integrity": "sha512-3qtRjw/HQSMlDWf+X79N206fepf4SOOU6SQLMaq/0KkZLmSjPxAkBOQQ+FxbHKfHmYLZFfdWsO3KA90ceHPSnw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/chalk/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "dev": true,
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
+      "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/copy-webpack-plugin": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-13.0.0.tgz",
+      "integrity": "sha512-FgR/h5a6hzJqATDGd9YG41SeDViH+0bkHn6WNXCi5zKAZkeESeSxLySSsFLHqLEVCh0E+rITmCf0dusXWYukeQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "glob-parent": "^6.0.1",
+        "normalize-path": "^3.0.0",
+        "schema-utils": "^4.2.0",
+        "serialize-javascript": "^6.0.2",
+        "tinyglobby": "^0.2.12"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      }
+    },
+    "node_modules/cross-env": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.1.tgz",
+      "integrity": "sha512-1yHhtcfAd1r4nwQgknowuUNfIT9E8dOMMspC36g45dN+iD1blloi7xp8X/xAIDnjHWyt1uQ8PHk2fkNaym7soQ==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^6.0.5"
+      },
+      "bin": {
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "6.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.6.tgz",
+      "integrity": "sha512-VqCUuhcd1iB+dsv8gxPttb5iZh/D0iubSP21g36KXdEuf6I5JiioesUVjpCdHV9MZRUfVFlvwtIUyPfxo5trtw==",
+      "dev": true,
+      "dependencies": {
+        "nice-try": "^1.0.4",
+        "path-key": "^2.0.1",
+        "semver": "^5.5.0",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      },
+      "engines": {
+        "node": ">=4.8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+      "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.123",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.123.tgz",
+      "integrity": "sha512-refir3NlutEZqlKaBLK0tzlVLe5P2wDKS7UQt/3SpibizgsRAPOsqQC3ffw1nlv3ze5gjRQZYHoPymgVZkplFA==",
+      "dev": true
+    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
+      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/envinfo": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-6.0.1.tgz",
+      "integrity": "sha512-IbMWvMQulMm1hiky1Zt5YTcSDEdZs0r9bt77mcLa4RUAKRYTGZvrb3MtAt47FuldPxwL+u2LtQex1FajIW1/Cw==",
+      "dev": true,
+      "bin": {
+        "envinfo": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
+      "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+      "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
+    },
+    "node_modules/fast-uri": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
+      "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "peer": true
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob-escape": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/glob-escape/-/glob-escape-0.0.2.tgz",
+      "integrity": "sha512-L/cXYz8x7qer1HAyUQ+mbjcUsJVdpRxpAf7CwqHoNBs9vTpABlGfNN4tzkDxt+u3Z7ZncVyKlCNPtzb0R/7WbA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob-to-regexp": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hash-sum": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+      "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+      "dev": true
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/i18n": {
+      "version": "0.13.4",
+      "resolved": "https://registry.npmjs.org/i18n/-/i18n-0.13.4.tgz",
+      "integrity": "sha512-GZnXWeA15jTi9gc1jfgrJcSrNYDg7qbJXSYMuibqPYb1ThORmGCeM+gL6LrDagYRHh87/q/D0jRSOhAfv6wAow==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.3.3",
+        "make-plural": "^7.0.0",
+        "math-interval-parser": "^2.0.1",
+        "messageformat": "^2.3.0",
+        "mustache": "^4.2.0",
+        "sprintf-js": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mashpie"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.3.tgz",
+      "integrity": "sha512-P8IdPQHq3lA1xVeBRi5VPqUm5HDgKnx0Ru51wZz5mjxHr5n3RWhjIpOFU7ybkUxfB+5IToy+OLaHYDBIWsv+uw==",
+      "dev": true
+    },
+    "node_modules/indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha512-bup+4tap3Hympa+JBJUG7XuOsdNQ6fxt0MHyXMKuLBKn0OqsTfvUxkUrroEX1+B2VsSHvCjiIcZVxRtYa4nllA==",
+      "dev": true
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
+    "node_modules/invert-kv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-3.0.1.tgz",
+      "integrity": "sha512-CYdFeFexxhv/Bcny+Q0BfOV+ltRlJcd4BBZBYFX/O0u4npJrgZtIcjokegtiSMAvlMTJ+Koq0GBCc//3bueQxw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/invert-kv?sponsor=1"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/jest-worker": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
+      "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/node": "*",
+        "merge-stream": "^2.0.0",
+        "supports-color": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/json5": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/klona": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/klona/-/klona-2.0.6.tgz",
+      "integrity": "sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/lcid": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lcid/-/lcid-3.1.1.tgz",
+      "integrity": "sha512-M6T051+5QCGLBQb8id3hdvIW8+zeFV2FyBGFS9IEK5H9Wt4MueD4bW1eWikpHgZp+5xR3l5c8pZUkQsIA0BFZg==",
+      "dev": true,
+      "dependencies": {
+        "invert-kv": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/loader-runner": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
+      "integrity": "sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6.11.5"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+      "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
+    "node_modules/lru-cache": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
+      "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
+      "dev": true,
+      "dependencies": {
+        "pseudomap": "^1.0.2",
+        "yallist": "^2.1.2"
+      }
+    },
+    "node_modules/make-plural": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/make-plural/-/make-plural-7.4.0.tgz",
+      "integrity": "sha512-4/gC9KVNTV6pvYg2gFeQYTW3mWaoJt7WZE5vrp1KnQDgW92JtYZnzmZT81oj/dUTqAIu0ufI2x3dkgu3bB1tYg==",
+      "dev": true
+    },
+    "node_modules/math-interval-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/math-interval-parser/-/math-interval-parser-2.0.1.tgz",
+      "integrity": "sha512-VmlAmb0UJwlvMyx8iPhXUDnVW1F9IrGEd9CIOmv+XL8AErCUUuozoDMrgImvnYt2A+53qVX/tPW6YJurMKYsvA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/messageformat": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/messageformat/-/messageformat-2.3.0.tgz",
+      "integrity": "sha512-uTzvsv0lTeQxYI2y1NPa1lItL5VRI8Gb93Y2K2ue5gBPyrbJxfDi/EYWxh2PKv5yO42AJeeqblS9MJSh/IEk4w==",
+      "deprecated": "Package renamed as '@messageformat/core', see messageformat.github.io for more details. 'messageformat@4' will eventually provide a polyfill for Intl.MessageFormat, once it's been defined by Unicode & ECMA.",
+      "dev": true,
+      "dependencies": {
+        "make-plural": "^4.3.0",
+        "messageformat-formatters": "^2.0.1",
+        "messageformat-parser": "^4.1.2"
+      }
+    },
+    "node_modules/messageformat-formatters": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/messageformat-formatters/-/messageformat-formatters-2.0.1.tgz",
+      "integrity": "sha512-E/lQRXhtHwGuiQjI7qxkLp8AHbMD5r2217XNe/SREbBlSawe0lOqsFb7rflZJmlQFSULNLIqlcjjsCPlB3m3Mg==",
+      "dev": true
+    },
+    "node_modules/messageformat-parser": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/messageformat-parser/-/messageformat-parser-4.1.3.tgz",
+      "integrity": "sha512-2fU3XDCanRqeOCkn7R5zW5VQHWf+T3hH65SzuqRvjatBK7r4uyFa5mEX+k6F9Bd04LVM5G4/BHBTUJsOdW7uyg==",
+      "dev": true
+    },
+    "node_modules/messageformat/node_modules/make-plural": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/make-plural/-/make-plural-4.3.0.tgz",
+      "integrity": "sha512-xTYd4JVHpSCW+aqDof6w/MebaMVNTVYBZhbB/vi513xXdiPT92JMVCo0Jq8W2UZnzYRFeVbQiQ+I25l13JuKvA==",
+      "dev": true,
+      "bin": {
+        "make-plural": "bin/make-plural"
+      },
+      "optionalDependencies": {
+        "minimist": "^1.2.0"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/module-alias": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/module-alias/-/module-alias-2.2.3.tgz",
+      "integrity": "sha512-23g5BFj4zdQL/b6tor7Ji+QY4pEfNH784BMslY9Qb0UnJWRAt+lQGLYmRaM0KDBwIG23ffEBELhZDP2rhi9f/Q==",
+      "dev": true
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "node_modules/mustache": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
+      "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
+      "dev": true,
+      "bin": {
+        "mustache": "bin/mustache"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "dev": true
+    },
+    "node_modules/nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==",
+      "dev": true
+    },
+    "node_modules/os-locale-s-fix": {
+      "version": "1.0.8-fix-1",
+      "resolved": "https://registry.npmjs.org/os-locale-s-fix/-/os-locale-s-fix-1.0.8-fix-1.tgz",
+      "integrity": "sha512-Sv0OvhPiMutICiwORAUefv02DCPb62IelBmo8ZsSrRHyI3FStqIWZvjqDkvtjU+lcujo7UNir+dCwKSqlEQ/5w==",
+      "dev": true,
+      "dependencies": {
+        "lcid": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "yarn": "^1.22.4"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
+      "integrity": "sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/postcss-comment": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-comment/-/postcss-comment-2.0.0.tgz",
+      "integrity": "sha512-5zT5iKU7c0tK9KJFNrVf+g1MGTkzf/4V3e0Zzm2g1uoFQC5jeTHmB9O1iAqh97+jnKpc6al204e0pwFUiCwseg==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^6.0.0"
+      }
+    },
+    "node_modules/postcss-comment/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-comment/node_modules/postcss": {
+      "version": "6.0.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "source-map": "^0.6.1",
+        "supports-color": "^5.4.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/postcss-comment/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-helpers": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/postcss-helpers/-/postcss-helpers-0.3.3.tgz",
+      "integrity": "sha512-VumiUcrpbxGlTBNQj6fUOkb/HNRUk/xYz8bNlhgVOdvk3yWEy4B+0nlDUZZM9mTVZ5bJoxUy7WT6z/4E7oMTgw==",
+      "dev": true,
+      "dependencies": {
+        "urijs": "^1.18.12"
+      },
+      "engines": {
+        "node": ">=0.12.9"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
+      "integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.1",
+        "postcss-value-parser": "^3.2.3",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+      "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^2.0.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-urlrewrite": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-urlrewrite/-/postcss-urlrewrite-0.2.2.tgz",
+      "integrity": "sha512-DxPSgykgHjoV4Z+ygvq2C5HkiuiKQQD74xpoNQSQuyi8zab9nODVtNKfnCN6BEv9VZrjpOGLGAf8BDvgG6EtHg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-helpers": "^0.3.2"
+      },
+      "engines": {
+        "node": ">=0.12.9"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "dev": true
+    },
+    "node_modules/postcss/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==",
+      "dev": true
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dev": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/registry-auth-token": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
+      "integrity": "sha512-JL39c60XlzCVgNrO+qq68FoNb56w/m7JYvGR2jT5iR1xBrUA3Mfx5Twk5rqTThPmQKMWydGmq8oFtDlxfrmxnQ==",
+      "dev": true,
+      "dependencies": {
+        "rc": "^1.1.6",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/registry-url": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
+      "integrity": "sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==",
+      "dev": true,
+      "dependencies": {
+        "rc": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/sass": {
+      "version": "1.86.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.86.0.tgz",
+      "integrity": "sha512-zV8vGUld/+mP4KbMLJMX7TyGCuUp7hnkOScgCMsWuHtns8CWBoz+vmEhoGMXsaJrbUP8gj+F1dLvVe79sK8UdA==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/sass-loader": {
+      "version": "10.5.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.5.2.tgz",
+      "integrity": "sha512-vMUoSNOUKJILHpcNCCyD23X34gve1TS7Rjd9uXHeKqhvBG39x6XbswFDtpbTElj6XdMFezoWhkh5vtKudf2cgQ==",
+      "dev": true,
+      "dependencies": {
+        "klona": "^2.0.4",
+        "loader-utils": "^2.0.0",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^3.0.0",
+        "semver": "^7.3.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "webpack": "^4.36.0 || ^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sass-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/sass-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "dev": true,
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/sass-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
+    "node_modules/sass-loader/node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/sass-loader/node_modules/loader-utils": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+      "dev": true,
+      "dependencies": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^2.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/sass-loader/node_modules/schema-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
+      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/sass-loader/node_modules/semver": {
+      "version": "7.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
+      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/schema-utils": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
+      "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.9.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.1.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/serialize-javascript": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz",
+      "integrity": "sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/sprintf-js": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
+      "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
+      "dev": true
+    },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/terser": {
+      "version": "5.39.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
+      "integrity": "sha512-LBAhFyLho16harJoWMg/nZsQYgTrg5jXOn2nCYjRUcZZEdE3qa2zb8QEDRUGVZBW4rlazf2fxkg8tztybTaqWw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/source-map": "^0.3.3",
+        "acorn": "^8.8.2",
+        "commander": "^2.20.0",
+        "source-map-support": "~0.5.20"
+      },
+      "bin": {
+        "terser": "bin/terser"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/terser-webpack-plugin": {
+      "version": "5.3.14",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.14.tgz",
+      "integrity": "sha512-vkZjpUjb6OMS7dhV+tILUW6BhpDR7P2L/aQSAv+Uwk+m8KATX9EccViHTJR2qDtACKPIYndLGCyl3FMo+r2LMw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jest-worker": "^27.4.5",
+        "schema-utils": "^4.3.0",
+        "serialize-javascript": "^6.0.2",
+        "terser": "^5.31.1"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.1.0"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "uglify-js": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "fdir": "^6.4.3",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "dev": true,
+      "peer": true,
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==",
+      "dev": true
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz",
+      "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/update-check": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/update-check/-/update-check-1.5.4.tgz",
+      "integrity": "sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==",
+      "dev": true,
+      "dependencies": {
+        "registry-auth-token": "3.3.2",
+        "registry-url": "3.1.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/urijs": {
+      "version": "1.19.11",
+      "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.11.tgz",
+      "integrity": "sha512-HXgFDgDommxn5/bIv0cnQZsPhHDA90NPHD6+c/v21U5+Sx5hoP8+dP9IZXBU1gIfvdRfhG8cel9QNPeionfcCQ==",
+      "dev": true
+    },
+    "node_modules/uview-ui": {
+      "version": "2.0.38",
+      "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-2.0.38.tgz",
+      "integrity": "sha512-6egHDf9lXHKpG3hEjRE0vMx4+VWwKk/ReTf5x18KrIKqdvdPRqO3+B8Unh7vYYwrIxzAWIlmhZ9RJpKI/4UqPQ==",
+      "engines": {
+        "HBuilderX": "^3.1.0"
+      }
+    },
+    "node_modules/watchpack": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
+      "integrity": "sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack": {
+      "version": "5.98.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.98.0.tgz",
+      "integrity": "sha512-UFynvx+gM44Gv9qFgj0acCQK2VE1CtdfwFdimkapco3hlPCJ/zeq73n2yVKimVbtm+TnApIugGhLJnkU6gjYXA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@types/eslint-scope": "^3.7.7",
+        "@types/estree": "^1.0.6",
+        "@webassemblyjs/ast": "^1.14.1",
+        "@webassemblyjs/wasm-edit": "^1.14.1",
+        "@webassemblyjs/wasm-parser": "^1.14.1",
+        "acorn": "^8.14.0",
+        "browserslist": "^4.24.0",
+        "chrome-trace-event": "^1.0.2",
+        "enhanced-resolve": "^5.17.1",
+        "es-module-lexer": "^1.2.1",
+        "eslint-scope": "5.1.1",
+        "events": "^3.2.0",
+        "glob-to-regexp": "^0.4.1",
+        "graceful-fs": "^4.2.11",
+        "json-parse-even-better-errors": "^2.3.1",
+        "loader-runner": "^4.2.0",
+        "mime-types": "^2.1.27",
+        "neo-async": "^2.6.2",
+        "schema-utils": "^4.3.0",
+        "tapable": "^2.1.1",
+        "terser-webpack-plugin": "^5.3.11",
+        "watchpack": "^2.4.1",
+        "webpack-sources": "^3.2.3"
+      },
+      "bin": {
+        "webpack": "bin/webpack.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependenciesMeta": {
+        "webpack-cli": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-merge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
+      "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
+    "node_modules/wrap-loader": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-loader/-/wrap-loader-0.2.0.tgz",
+      "integrity": "sha512-Qdhdu7vr2H8dLE2sKySQznOBHXIHbKg7PZ5aqkeBOQHGqxLfcJw/ZlB40j67b1tks9OYqSBCHc+uHtGRCmQYlg==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^1.1.0"
+      }
+    },
+    "node_modules/xregexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.0.0.tgz",
+      "integrity": "sha512-PHyM+sQouu7xspQQwELlGwwd05mXUFqwFYfqPO0cC7x4fxyHnnuetmQr6CjJiafIDoH4MogHb9dOoJzR/Y4rFg==",
+      "dev": true
+    },
+    "node_modules/yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
+      "dev": true
+    }
+  }
+}
diff --git a/Cunkebao_Uniapp/package.json b/Cunkebao_Uniapp/package.json
new file mode 100644
index 00000000..261f7869
--- /dev/null
+++ b/Cunkebao_Uniapp/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "cunkebao",
+  "version": "1.0.0",
+  "description": "存客宝 - 基于 uni-app 的跨平台应用",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "uni-app",
+    "vue",
+    "小程序",
+    "APP",
+    "H5"
+  ],
+  "author": "CunkeBao Team",
+  "license": "MIT",
+  "dependencies": {
+    "uview-ui": "^2.0.38"
+  },
+  "devDependencies": {
+    "@dcloudio/uni-cli-i18n": "^2.0.2-4050620250311002",
+    "@dcloudio/uni-cli-shared": "^2.0.2-4050620250311002",
+    "@dcloudio/vue-cli-plugin-uni": "^2.0.2-4050620250311002",
+    "autoprefixer": "^9.8.8",
+    "postcss": "^7.0.39",
+    "postcss-comment": "^2.0.0",
+    "postcss-import": "^12.0.1",
+    "sass": "^1.86.0",
+    "sass-loader": "^10.5.2"
+  }
+}
diff --git a/Cunkebao/pages.json b/Cunkebao_Uniapp/pages.json
similarity index 100%
rename from Cunkebao/pages.json
rename to Cunkebao_Uniapp/pages.json
diff --git a/Cunkebao/pages/agreement/privacy.vue b/Cunkebao_Uniapp/pages/agreement/privacy.vue
similarity index 100%
rename from Cunkebao/pages/agreement/privacy.vue
rename to Cunkebao_Uniapp/pages/agreement/privacy.vue
diff --git a/Cunkebao/pages/agreement/user.vue b/Cunkebao_Uniapp/pages/agreement/user.vue
similarity index 100%
rename from Cunkebao/pages/agreement/user.vue
rename to Cunkebao_Uniapp/pages/agreement/user.vue
diff --git a/Cunkebao/pages/content/components/FriendSelector.vue b/Cunkebao_Uniapp/pages/content/components/FriendSelector.vue
similarity index 100%
rename from Cunkebao/pages/content/components/FriendSelector.vue
rename to Cunkebao_Uniapp/pages/content/components/FriendSelector.vue
diff --git a/Cunkebao/pages/content/components/GroupSelector.vue b/Cunkebao_Uniapp/pages/content/components/GroupSelector.vue
similarity index 100%
rename from Cunkebao/pages/content/components/GroupSelector.vue
rename to Cunkebao_Uniapp/pages/content/components/GroupSelector.vue
diff --git a/Cunkebao/pages/content/detail.vue b/Cunkebao_Uniapp/pages/content/detail.vue
similarity index 100%
rename from Cunkebao/pages/content/detail.vue
rename to Cunkebao_Uniapp/pages/content/detail.vue
diff --git a/Cunkebao/pages/content/index.vue b/Cunkebao_Uniapp/pages/content/index.vue
similarity index 100%
rename from Cunkebao/pages/content/index.vue
rename to Cunkebao_Uniapp/pages/content/index.vue
diff --git a/Cunkebao/pages/device/detail.vue b/Cunkebao_Uniapp/pages/device/detail.vue
similarity index 100%
rename from Cunkebao/pages/device/detail.vue
rename to Cunkebao_Uniapp/pages/device/detail.vue
diff --git a/Cunkebao/pages/device/index.vue b/Cunkebao_Uniapp/pages/device/index.vue
similarity index 97%
rename from Cunkebao/pages/device/index.vue
rename to Cunkebao_Uniapp/pages/device/index.vue
index 0d6ebcad..731edb06 100644
--- a/Cunkebao/pages/device/index.vue
+++ b/Cunkebao_Uniapp/pages/device/index.vue
@@ -59,12 +59,8 @@
           <text>{{ statusText }}</text>
           <u-icon name="arrow-down" size="28" color="#333"></u-icon>
         </view>
-        <!-- 添加搜索过滤标签 -->
-        <view class="filter-tag" v-if="searchKeyword">
-          <text>{{ searchKeyword }}</text>
-          <text class="close-icon" @click.stop="clearSearch">×</text>
-        </view>
-        <view class="select-all" v-if="deviceList.length > 0">
+
+        <view class="select-all" >
           <u-checkbox 
             v-model="selectAll" 
             size="40" 
@@ -817,34 +813,6 @@ export default {
     }
   }
   
-  .filter-tag {
-    display: inline-flex;
-    align-items: center;
-    font-size: 24rpx;
-    color: #4080ff;
-    padding: 6rpx 16rpx;
-    border-radius: 16rpx;
-    background-color: #f0f5ff;
-    border: 1rpx solid #d6e4ff;
-    margin-left: 16rpx;
-    margin-right: auto;
-    max-width: 250rpx;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    
-    .close-icon {
-      margin-left: 12rpx;
-      font-size: 28rpx;
-      line-height: 24rpx;
-      color: #999;
-      
-      &:active {
-        color: #666;
-      }
-    }
-  }
-  
   .select-all {
     display: flex;
     align-items: center;
diff --git a/Cunkebao/pages/index/index.vue b/Cunkebao_Uniapp/pages/index/index.vue
similarity index 100%
rename from Cunkebao/pages/index/index.vue
rename to Cunkebao_Uniapp/pages/index/index.vue
diff --git a/Cunkebao/pages/login/index.vue b/Cunkebao_Uniapp/pages/login/index.vue
similarity index 100%
rename from Cunkebao/pages/login/index.vue
rename to Cunkebao_Uniapp/pages/login/index.vue
diff --git a/Cunkebao/pages/profile/index.vue b/Cunkebao_Uniapp/pages/profile/index.vue
similarity index 100%
rename from Cunkebao/pages/profile/index.vue
rename to Cunkebao_Uniapp/pages/profile/index.vue
diff --git a/Cunkebao/pages/scenarios/create.vue b/Cunkebao_Uniapp/pages/scenarios/create.vue
similarity index 100%
rename from Cunkebao/pages/scenarios/create.vue
rename to Cunkebao_Uniapp/pages/scenarios/create.vue
diff --git a/Cunkebao/pages/scenarios/detail.vue b/Cunkebao_Uniapp/pages/scenarios/detail.vue
similarity index 100%
rename from Cunkebao/pages/scenarios/detail.vue
rename to Cunkebao_Uniapp/pages/scenarios/detail.vue
diff --git a/Cunkebao/pages/scenarios/index.vue b/Cunkebao_Uniapp/pages/scenarios/index.vue
similarity index 100%
rename from Cunkebao/pages/scenarios/index.vue
rename to Cunkebao_Uniapp/pages/scenarios/index.vue
diff --git a/Cunkebao/pages/traffic/create.vue b/Cunkebao_Uniapp/pages/traffic/create.vue
similarity index 100%
rename from Cunkebao/pages/traffic/create.vue
rename to Cunkebao_Uniapp/pages/traffic/create.vue
diff --git a/Cunkebao/pages/traffic/index.vue b/Cunkebao_Uniapp/pages/traffic/index.vue
similarity index 100%
rename from Cunkebao/pages/traffic/index.vue
rename to Cunkebao_Uniapp/pages/traffic/index.vue
diff --git a/Cunkebao/pages/wechat/detail.vue b/Cunkebao_Uniapp/pages/wechat/detail.vue
similarity index 100%
rename from Cunkebao/pages/wechat/detail.vue
rename to Cunkebao_Uniapp/pages/wechat/detail.vue
diff --git a/Cunkebao/pages/wechat/index.vue b/Cunkebao_Uniapp/pages/wechat/index.vue
similarity index 100%
rename from Cunkebao/pages/wechat/index.vue
rename to Cunkebao_Uniapp/pages/wechat/index.vue
diff --git a/Cunkebao/pages/work/index.vue b/Cunkebao_Uniapp/pages/work/index.vue
similarity index 100%
rename from Cunkebao/pages/work/index.vue
rename to Cunkebao_Uniapp/pages/work/index.vue
diff --git a/Cunkebao/postcss.config.js b/Cunkebao_Uniapp/postcss.config.js
similarity index 100%
rename from Cunkebao/postcss.config.js
rename to Cunkebao_Uniapp/postcss.config.js
diff --git a/Cunkebao/static/fonts/fonts.css b/Cunkebao_Uniapp/static/fonts/fonts.css
similarity index 100%
rename from Cunkebao/static/fonts/fonts.css
rename to Cunkebao_Uniapp/static/fonts/fonts.css
diff --git a/Cunkebao/static/images/apple.png b/Cunkebao_Uniapp/static/images/apple.png
similarity index 100%
rename from Cunkebao/static/images/apple.png
rename to Cunkebao_Uniapp/static/images/apple.png
diff --git a/Cunkebao/static/images/avatar.png b/Cunkebao_Uniapp/static/images/avatar.png
similarity index 100%
rename from Cunkebao/static/images/avatar.png
rename to Cunkebao_Uniapp/static/images/avatar.png
diff --git a/Cunkebao/static/images/empty.png b/Cunkebao_Uniapp/static/images/empty.png
similarity index 100%
rename from Cunkebao/static/images/empty.png
rename to Cunkebao_Uniapp/static/images/empty.png
diff --git a/Cunkebao/static/images/icons/ai-convert.svg b/Cunkebao_Uniapp/static/images/icons/ai-convert.svg
similarity index 100%
rename from Cunkebao/static/images/icons/ai-convert.svg
rename to Cunkebao_Uniapp/static/images/icons/ai-convert.svg
diff --git a/Cunkebao/static/images/icons/ai-friend.svg b/Cunkebao_Uniapp/static/images/icons/ai-friend.svg
similarity index 100%
rename from Cunkebao/static/images/icons/ai-friend.svg
rename to Cunkebao_Uniapp/static/images/icons/ai-friend.svg
diff --git a/Cunkebao/static/images/icons/ai-group.svg b/Cunkebao_Uniapp/static/images/icons/ai-group.svg
similarity index 100%
rename from Cunkebao/static/images/icons/ai-group.svg
rename to Cunkebao_Uniapp/static/images/icons/ai-group.svg
diff --git a/Cunkebao/static/images/icons/aipa.svg b/Cunkebao_Uniapp/static/images/icons/aipa.svg
similarity index 100%
rename from Cunkebao/static/images/icons/aipa.svg
rename to Cunkebao_Uniapp/static/images/icons/aipa.svg
diff --git a/Cunkebao/static/images/icons/data-label.svg b/Cunkebao_Uniapp/static/images/icons/data-label.svg
similarity index 100%
rename from Cunkebao/static/images/icons/data-label.svg
rename to Cunkebao_Uniapp/static/images/icons/data-label.svg
diff --git a/Cunkebao/static/images/icons/filter.svg b/Cunkebao_Uniapp/static/images/icons/filter.svg
similarity index 100%
rename from Cunkebao/static/images/icons/filter.svg
rename to Cunkebao_Uniapp/static/images/icons/filter.svg
diff --git a/Cunkebao/static/images/icons/heartbeat.svg b/Cunkebao_Uniapp/static/images/icons/heartbeat.svg
similarity index 100%
rename from Cunkebao/static/images/icons/heartbeat.svg
rename to Cunkebao_Uniapp/static/images/icons/heartbeat.svg
diff --git a/Cunkebao/static/images/icons/logout.svg b/Cunkebao_Uniapp/static/images/icons/logout.svg
similarity index 100%
rename from Cunkebao/static/images/icons/logout.svg
rename to Cunkebao_Uniapp/static/images/icons/logout.svg
diff --git a/Cunkebao/static/images/icons/robot.svg b/Cunkebao_Uniapp/static/images/icons/robot.svg
similarity index 100%
rename from Cunkebao/static/images/icons/robot.svg
rename to Cunkebao_Uniapp/static/images/icons/robot.svg
diff --git a/Cunkebao/static/images/icons/smartphone.svg b/Cunkebao_Uniapp/static/images/icons/smartphone.svg
similarity index 100%
rename from Cunkebao/static/images/icons/smartphone.svg
rename to Cunkebao_Uniapp/static/images/icons/smartphone.svg
diff --git a/Cunkebao/static/images/icons/team.svg b/Cunkebao_Uniapp/static/images/icons/team.svg
similarity index 100%
rename from Cunkebao/static/images/icons/team.svg
rename to Cunkebao_Uniapp/static/images/icons/team.svg
diff --git a/Cunkebao/static/images/icons/trend-up.svg b/Cunkebao_Uniapp/static/images/icons/trend-up.svg
similarity index 100%
rename from Cunkebao/static/images/icons/trend-up.svg
rename to Cunkebao_Uniapp/static/images/icons/trend-up.svg
diff --git a/Cunkebao/static/images/icons/user-label.svg b/Cunkebao_Uniapp/static/images/icons/user-label.svg
similarity index 100%
rename from Cunkebao/static/images/icons/user-label.svg
rename to Cunkebao_Uniapp/static/images/icons/user-label.svg
diff --git a/Cunkebao/static/images/icons/users.svg b/Cunkebao_Uniapp/static/images/icons/users.svg
similarity index 100%
rename from Cunkebao/static/images/icons/users.svg
rename to Cunkebao_Uniapp/static/images/icons/users.svg
diff --git a/Cunkebao/static/images/icons/wechat.svg b/Cunkebao_Uniapp/static/images/icons/wechat.svg
similarity index 100%
rename from Cunkebao/static/images/icons/wechat.svg
rename to Cunkebao_Uniapp/static/images/icons/wechat.svg
diff --git a/Cunkebao/static/images/qr-placeholder.png b/Cunkebao_Uniapp/static/images/qr-placeholder.png
similarity index 100%
rename from Cunkebao/static/images/qr-placeholder.png
rename to Cunkebao_Uniapp/static/images/qr-placeholder.png
diff --git a/Cunkebao/static/images/qr-placeholder.svg b/Cunkebao_Uniapp/static/images/qr-placeholder.svg
similarity index 100%
rename from Cunkebao/static/images/qr-placeholder.svg
rename to Cunkebao_Uniapp/static/images/qr-placeholder.svg
diff --git a/Cunkebao/static/images/tabbar/home-active.png b/Cunkebao_Uniapp/static/images/tabbar/home-active.png
similarity index 100%
rename from Cunkebao/static/images/tabbar/home-active.png
rename to Cunkebao_Uniapp/static/images/tabbar/home-active.png
diff --git a/Cunkebao/static/images/tabbar/home.png b/Cunkebao_Uniapp/static/images/tabbar/home.png
similarity index 100%
rename from Cunkebao/static/images/tabbar/home.png
rename to Cunkebao_Uniapp/static/images/tabbar/home.png
diff --git a/Cunkebao/static/images/tabbar/market-active.png b/Cunkebao_Uniapp/static/images/tabbar/market-active.png
similarity index 100%
rename from Cunkebao/static/images/tabbar/market-active.png
rename to Cunkebao_Uniapp/static/images/tabbar/market-active.png
diff --git a/Cunkebao/static/images/tabbar/market.png b/Cunkebao_Uniapp/static/images/tabbar/market.png
similarity index 100%
rename from Cunkebao/static/images/tabbar/market.png
rename to Cunkebao_Uniapp/static/images/tabbar/market.png
diff --git a/Cunkebao/static/images/tabbar/profile-active.png b/Cunkebao_Uniapp/static/images/tabbar/profile-active.png
similarity index 100%
rename from Cunkebao/static/images/tabbar/profile-active.png
rename to Cunkebao_Uniapp/static/images/tabbar/profile-active.png
diff --git a/Cunkebao/static/images/tabbar/profile.png b/Cunkebao_Uniapp/static/images/tabbar/profile.png
similarity index 100%
rename from Cunkebao/static/images/tabbar/profile.png
rename to Cunkebao_Uniapp/static/images/tabbar/profile.png
diff --git a/Cunkebao/static/images/tabbar/work-active.png b/Cunkebao_Uniapp/static/images/tabbar/work-active.png
similarity index 100%
rename from Cunkebao/static/images/tabbar/work-active.png
rename to Cunkebao_Uniapp/static/images/tabbar/work-active.png
diff --git a/Cunkebao/static/images/tabbar/work.png b/Cunkebao_Uniapp/static/images/tabbar/work.png
similarity index 100%
rename from Cunkebao/static/images/tabbar/work.png
rename to Cunkebao_Uniapp/static/images/tabbar/work.png
diff --git a/Cunkebao/static/images/wechat.png b/Cunkebao_Uniapp/static/images/wechat.png
similarity index 100%
rename from Cunkebao/static/images/wechat.png
rename to Cunkebao_Uniapp/static/images/wechat.png
diff --git a/Cunkebao/uni.scss b/Cunkebao_Uniapp/uni.scss
similarity index 100%
rename from Cunkebao/uni.scss
rename to Cunkebao_Uniapp/uni.scss
diff --git a/Cunkebao/utils/auth.js b/Cunkebao_Uniapp/utils/auth.js
similarity index 100%
rename from Cunkebao/utils/auth.js
rename to Cunkebao_Uniapp/utils/auth.js
diff --git a/Cunkebao/utils/common.js b/Cunkebao_Uniapp/utils/common.js
similarity index 100%
rename from Cunkebao/utils/common.js
rename to Cunkebao_Uniapp/utils/common.js
diff --git a/Cunkebao/utils/request.js b/Cunkebao_Uniapp/utils/request.js
similarity index 100%
rename from Cunkebao/utils/request.js
rename to Cunkebao_Uniapp/utils/request.js