门店端适配新表 及操盘手端工作台优化

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

@@ -6,6 +6,7 @@ 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: {
@@ -24,163 +25,142 @@ 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>
-          <div className="text-base font-medium mb-2">任务名称</div>
+          <Label htmlFor="taskName" className="text-base">任务名称</Label>
           <Input
+            id="taskName"
             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"
+            className="mt-1.5 h-12 rounded-xl"
           />
         </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>
+          <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>
         </div>
 
         <div>
-          <div className="text-base font-medium mb-2">每日同步数量</div>
-          <div className="flex items-center space-x-5">
+          <Label className="text-base">同步间隔</Label>
+          <div className="flex items-center space-x-4 mt-1.5">
             <Button
+              type="button"
               variant="outline"
-              size="lg"
-              onClick={() => onChange({ syncCount: Math.max(1, formData.syncCount - 1) })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200"
+              size="icon"
+              className="h-12 w-12 rounded-xl"
+              onClick={() => handleSyncIntervalChange(-5)}
             >
-              <Minus className="h-5 w-5" />
+              <Minus className="h-4 w-4" />
             </Button>
-            <span className="w-8 text-center text-lg font-medium">{formData.syncCount}</span>
+            <div className="w-20 text-center text-base">{formData.syncInterval}</div>
             <Button
+              type="button"
               variant="outline"
-              size="lg"
-              onClick={() => onChange({ syncCount: formData.syncCount + 1 })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200"
+              size="icon"
+              className="h-12 w-12 rounded-xl"
+              onClick={() => handleSyncIntervalChange(5)}
             >
-              <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 items-center space-x-5">
-            <Button
-              variant="outline"
-              size="lg"
-              onClick={() => onChange({ syncInterval: Math.max(10, formData.syncInterval - 10) })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200"
-            >
-              <Minus className="h-5 w-5" />
-            </Button>
-            <span className="w-8 text-center text-lg font-medium">{formData.syncInterval}</span>
-            <Button
-              variant="outline"
-              size="lg"
-              onClick={() => onChange({ syncInterval: Math.min(120, formData.syncInterval + 10) })}
-              className="h-12 w-12 rounded-xl bg-white border-gray-200"
-            >
-              <Plus className="h-5 w-5" />
+              <Plus className="h-4 w-4" />
             </Button>
             <span className="text-gray-500">分钟</span>
           </div>
+          <p className="text-sm text-gray-500 mt-1.5">设置每次发朋友圈的时间间隔</p>
         </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>
+          <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"
+            />
           </div>
         </div>
 
-        <div className="flex items-center justify-between py-2">
-          <span className="text-base font-medium">是否启用</span>
+        <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>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <Label className="text-base">是否启用</Label>
           <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 font-medium shadow-sm"
+        className="w-full h-12 bg-blue-600 hover:bg-blue-700 rounded-xl text-base shadow-sm"
+        disabled={!formData.taskName}
       >
         下一步
       </Button>