存客宝 React

Cunkebao/app/plans/new/loading.tsx

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

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>
+  )
+}
+

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>
+  )
+}
+

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>
+  )
+}
+

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>
+  )
+}
+

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>
+  )
+}
+