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>