feat: 本次提交更新内容如下

场景获客列表搞定

Cunkebao/app/workspace/moments-sync/components/basic-settings.tsx

@@ -6,7 +6,6 @@ import { Switch } from "@/components/ui/switch"
 import { Plus, Minus, Clock, HelpCircle } from "lucide-react"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 import { useViewMode } from "@/app/components/LayoutWrapper"
-import { Label } from "@/components/ui/label"
 
 interface BasicSettingsProps {
   formData: {
@@ -14,7 +13,6 @@ interface BasicSettingsProps {
     startTime: string
     endTime: string
     syncCount: number
-    syncInterval: number
     accountType: "business" | "personal"
     enabled: boolean
   }
@@ -25,142 +23,139 @@ interface BasicSettingsProps {
 export function BasicSettings({ formData, onChange, onNext }: BasicSettingsProps) {
   const { viewMode } = useViewMode()
 
-  const handleSyncCountChange = (delta: number) => {
-    const newValue = Math.max(1, formData.syncCount + delta)
-    onChange({ syncCount: newValue })
-  }
-
-  const handleSyncIntervalChange = (delta: number) => {
-    const newValue = Math.max(5, formData.syncInterval + delta)
-    onChange({ syncInterval: newValue })
-  }
-
   return (
     <div className={`space-y-6 ${viewMode === "desktop" ? "p-6" : "p-4"}`}>
       <div className={`grid ${viewMode === "desktop" ? "grid-cols-2 gap-8" : "grid-cols-1 gap-4"}`}>
         <div>
-          <Label htmlFor="taskName" className="text-base">任务名称</Label>
+          <div className="text-base font-medium mb-2">任务名称</div>
           <Input
-            id="taskName"
             value={formData.taskName}
             onChange={(e) => onChange({ taskName: e.target.value })}
             placeholder="请输入任务名称"
-            className="mt-1.5 h-12 rounded-xl"
+            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>
-          <Label className="text-base">每日同步数量</Label>
-          <div className="flex items-center space-x-4 mt-1.5">
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              className="h-12 w-12 rounded-xl"
-              onClick={() => handleSyncCountChange(-1)}
-            >
-              <Minus className="h-4 w-4" />
-            </Button>
-            <div className="w-20 text-center text-base">{formData.syncCount}</div>
-            <Button
-              type="button"
-              variant="outline"
-              size="icon"
-              className="h-12 w-12 rounded-xl"
-              onClick={() => handleSyncCountChange(1)}
-            >
-              <Plus className="h-4 w-4" />
-            </Button>
-            <span className="text-gray-500">条/天</span>
+          <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>
-          <Label className="text-base">同步间隔</Label>
-          <div className="flex items-center space-x-4 mt-1.5">
+          <div className="text-base font-medium mb-2">每日同步数量</div>
+          <div className="flex items-center space-x-5">
             <Button
-              type="button"
               variant="outline"
-              size="icon"
-              className="h-12 w-12 rounded-xl"
-              onClick={() => handleSyncIntervalChange(-5)}
+              size="lg"
+              onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
+              className="h-12 w-12 rounded-xl bg-white border-gray-200"
             >
-              <Minus className="h-4 w-4" />
+              <Minus className="h-5 w-5" />
             </Button>
-            <div className="w-20 text-center text-base">{formData.syncInterval}</div>
+            <span className="w-8 text-center text-lg font-medium">{formData.syncCount}</span>
             <Button
-              type="button"
               variant="outline"
-              size="icon"
-              className="h-12 w-12 rounded-xl"
-              onClick={() => handleSyncIntervalChange(5)}
+              size="lg"
+              onClick={() => onChange({ syncCount: formData.syncCount + 1 })}
+              className="h-12 w-12 rounded-xl bg-white border-gray-200"
             >
-              <Plus className="h-4 w-4" />
+              <Plus className="h-5 w-5" />
             </Button>
-            <span className="text-gray-500">分钟</span>
-          </div>
-          <p className="text-sm text-gray-500 mt-1.5">设置每次发朋友圈的时间间隔</p>
-        </div>
-
-        <div>
-          <Label className="text-base">同步时间</Label>
-          <div className="grid grid-cols-2 gap-4 mt-1.5">
-            <Input
-              type="time"
-              value={formData.startTime}
-              onChange={(e) => onChange({ startTime: e.target.value })}
-              className="h-12 rounded-xl"
-            />
-            <Input
-              type="time"
-              value={formData.endTime}
-              onChange={(e) => onChange({ endTime: e.target.value })}
-              className="h-12 rounded-xl"
-            />
+            <span className="text-gray-500">条朋友圈</span>
           </div>
         </div>
 
         <div>
-          <Label className="text-base">账号类型</Label>
-          <div className="grid grid-cols-2 gap-4 mt-1.5">
-            <button
-              type="button"
-              className={`h-12 rounded-xl border ${
-                formData.accountType === "business"
-                  ? "border-blue-500 bg-blue-50 text-blue-600"
-                  : "border-gray-200 text-gray-600"
-              }`}
-              onClick={() => onChange({ accountType: "business" })}
-            >
-              业务号
-            </button>
-            <button
-              type="button"
-              className={`h-12 rounded-xl border ${
-                formData.accountType === "personal"
-                  ? "border-blue-500 bg-blue-50 text-blue-600"
-                  : "border-gray-200 text-gray-600"
-              }`}
-              onClick={() => onChange({ accountType: "personal" })}
-            >
-              人设号
-            </button>
+          <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">
-          <Label className="text-base">是否启用</Label>
+        <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>
       </div>
 
       <Button
         onClick={onNext}
-        className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
-        disabled={!formData.taskName}
+        className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base font-medium shadow-sm"
       >
         下一步
       </Button>

Cunkebao/app/workspace/moments-sync/components/content-selector.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { ContentSelector as CommonContentSelector } from "@/components/common/ContentSelector"
+import type { ContentLibrary } from "@/components/common/ContentSelector"
+
+interface ContentSelectorProps {
+  selectedLibraries: ContentLibrary[]
+  onLibrariesChange: (libraries: ContentLibrary[]) => void
+  onPrevious: () => void
+  onNext: () => void
+  onSave: () => void
+  onCancel: () => void
+}
+
+export function ContentSelector(props: ContentSelectorProps) {
+  return <CommonContentSelector {...props} />
+}

Cunkebao/app/workspace/moments-sync/components/content-viewer.tsx

@@ -100,4 +100,3 @@ export function ContentViewer({ tagId }: ContentViewerProps) {
     </div>
   )
 }
-

Cunkebao/app/workspace/moments-sync/components/device-selection-dialog.tsx

@@ -1,113 +1,76 @@
 "use client"
 
-import { useState, useEffect } from "react"
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
+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, Loader2 } from "lucide-react"
+import { Search, RefreshCw } from "lucide-react"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import { Checkbox } from "@/components/ui/checkbox"
-import { api } from "@/lib/api"
-import { showToast } from "@/lib/toast"
-
-interface ServerDevice {
-  id: number
-  imei: string
-  memo: string
-  wechatId: string
-  alive: number
-  totalFriend: number
-}
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 
 interface Device {
-  id: number
+  id: string
   name: string
   imei: string
   wxid: string
   status: "online" | "offline"
-  totalFriend: number
+  usedInPlans: number
 }
 
 interface DeviceSelectionDialogProps {
   open: boolean
   onOpenChange: (open: boolean) => void
-  selectedDevices: number[]
-  onSelect: (devices: number[]) => 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, setDevices] = useState<Device[]>([])
-  const [loading, setLoading] = useState(false)
-  const [tempSelectedDevices, setTempSelectedDevices] = useState<number[]>(selectedDevices)
 
-  useEffect(() => {
-    if (open) {
-      setTempSelectedDevices(selectedDevices)
-      fetchDevices()
-    }
-  }, [open, selectedDevices])
-
-  const fetchDevices = async () => {
-    const loadingToast = showToast("正在加载设备列表...", "loading", true);
-    try {
-      setLoading(true)
-      const response = await api.get<{code: number, msg: string, data: {list: ServerDevice[], total: number}}>('/v1/devices?page=1&limit=100')
-      
-      if (response.code === 200 && response.data.list) {
-        const transformedDevices: Device[] = response.data.list.map(device => ({
-          id: device.id,
-          name: device.memo || '设备_' + device.id,
-          imei: device.imei || '',
-          wxid: device.alias || device.wechatId || '',
-          status: device.alive === 1 ? "online" : "offline",
-          totalFriend: device.totalFriend || 0,
-          nickname: device.nickname || ''
-        }))
-        setDevices(transformedDevices)
-      } else {
-        showToast(response.msg || "获取设备列表失败", "error")
-      }
-    } catch (error: any) {
-      console.error('获取设备列表失败:', error)
-      showToast(error?.message || "请检查网络连接", "error")
-    } finally {
-      loadingToast.remove();
-      setLoading(false)
-    }
-  }
-
-  const handleRefresh = () => {
-    fetchDevices()
-  }
-
-  const handleDeviceToggle = (deviceId: number, checked: boolean) => {
-    if (checked) {
-      setTempSelectedDevices(prev => [...prev, deviceId])
-    } else {
-      setTempSelectedDevices(prev => prev.filter(id => id !== deviceId))
-    }
-  }
-
-  const handleConfirm = () => {
-    onSelect(tempSelectedDevices)
-    onOpenChange(false)
-  }
-
-  const handleCancel = () => {
-    setTempSelectedDevices(selectedDevices)
-    onOpenChange(false)
-  }
+  // 模拟设备数据
+  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 searchLower = searchQuery.toLowerCase()
     const matchesSearch =
-      (device.name || '').toLowerCase().includes(searchLower) ||
-      (device.imei || '').toLowerCase().includes(searchLower) ||
-      (device.wxid || '').toLowerCase().includes(searchLower)
+      device.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.imei.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      device.wxid.toLowerCase().includes(searchQuery.toLowerCase())
 
     const matchesStatus =
       statusFilter === "all" ||
@@ -144,50 +107,38 @@ export function DeviceSelectionDialog({ open, onOpenChange, selectedDevices, onS
               <SelectItem value="offline">离线</SelectItem>
             </SelectContent>
           </Select>
-          <Button variant="outline" size="icon" onClick={handleRefresh} disabled={loading}>
-            {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCw className="h-4 w-4" />}
+          <Button variant="outline" size="icon">
+            <RefreshCw className="h-4 w-4" />
           </Button>
         </div>
 
-        <ScrollArea className="flex-1 -mx-6 px-6" style={{overflowY: 'auto'}}>
-          {loading ? (
-            <div className="flex justify-center items-center py-8">
-              <Loader2 className="h-8 w-8 animate-spin text-blue-500" />
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {filteredDevices.map((device) => (
-                <label
-                  key={device.id}
-                  className="flex items-center space-x-3 p-4 rounded-lg hover:bg-gray-50 cursor-pointer"
-                  style={{paddingLeft: '0px',paddingRight: '0px'}}
-                >
-                  <Checkbox 
-                    checked={tempSelectedDevices.includes(device.id)}
-                    onCheckedChange={(checked) => handleDeviceToggle(device.id, checked as boolean)}
-                    className="h-5 w-5"
-                  />
-                  <div className="flex-1">
-                    <div className="flex items-center justify-between">
-                      <span className="font-medium">{device.name}</span>
-                      <Badge variant={device.status === "online" ? "default" : "secondary"}>
-                        {device.status === "online" ? "在线" : "离线"}
-                      </Badge>
-                    </div>
-                    <div className="text-sm text-gray-500 mt-1">
-                      <div>IMEI: {device.imei || '--'}</div>
-                      <div>微信号: {device.wxid || '--'}（{device.nickname || ''}）</div>
-                    </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>
-                </label>
-              ))}
-            </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>
-
-        <DialogFooter className="mt-4 flex gap-4 -mx-6 px-6">
-          <Button className="flex-1" onClick={handleConfirm}>确认</Button>
-        </DialogFooter>
       </DialogContent>
     </Dialog>
   )

Cunkebao/app/workspace/moments-sync/components/step-indicator.tsx

@@ -49,4 +49,3 @@ export function StepIndicator({
     </div>
   )
 }
-

Cunkebao/app/workspace/moments-sync/components/tag-editor.tsx

@@ -153,4 +153,3 @@ export function TagEditor({ tagId, initialData }: TagEditorProps) {
     </Card>
   )
 }
-