存客宝 React

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

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

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

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

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

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

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

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

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: "一<><E4B880><EFBFBD>理想安全驾这件事情，刻在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>
+  )
+}
+

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

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

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

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: "创建成<E5BBBA><E68890><EFBFBD>",
+      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>
+  )
+}
+

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

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

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

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