存客宝 React

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