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

存一波

nkebao/src/pages/workspace/auto-like/new/index.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import { Button, Input, Switch, message, Spin } from "antd";
 import {
+  ArrowLeftOutlined,
   PlusOutlined,
   MinusOutlined,
-  ArrowLeftOutlined,
+  CheckOutlined,
 } from "@ant-design/icons";
-import { Button, Input, Switch, message, Spin } from "antd";
 import { NavBar } from "antd-mobile";
 import Layout from "@/components/Layout/Layout";
 import {
@@ -13,11 +14,7 @@ import {
   updateAutoLikeTask,
   fetchAutoLikeTaskDetail,
 } from "./api";
-import {
-  CreateLikeTaskData,
-  UpdateLikeTaskData,
-  ContentType,
-} from "@/types/auto-like";
+import { ContentType } from "@/types/auto-like";
 import style from "./new.module.scss";
 
 const contentTypeLabels: Record<ContentType, string> = {
@@ -27,28 +24,32 @@ const contentTypeLabels: Record<ContentType, string> = {
   link: "链接",
 };
 
+const steps = ["基础设置", "设备选择", "人群选择"];
+
+const defaultForm = {
+  name: "",
+  interval: 5,
+  maxLikes: 200,
+  startTime: "08:00",
+  endTime: "22:00",
+  contentTypes: ["text", "image", "video"] as ContentType[],
+  devices: [] as string[],
+  friends: [] as string[],
+  targetTags: [] as string[],
+  friendMaxLikes: 10,
+  enableFriendTags: false,
+  friendTags: "",
+};
+
 const NewAutoLike: React.FC = () => {
   const navigate = useNavigate();
   const { id } = useParams<{ id: string }>();
   const isEditMode = !!id;
-  const [currentStep, setCurrentStep] = useState(1);
+  const [currentStep, setCurrentStep] = useState(0);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isLoading, setIsLoading] = useState(isEditMode);
   const [autoEnabled, setAutoEnabled] = useState(false);
-  const [formData, setFormData] = useState<CreateLikeTaskData>({
-    name: "",
-    interval: 5,
-    maxLikes: 200,
-    startTime: "08:00",
-    endTime: "22:00",
-    contentTypes: ["text", "image", "video"],
-    devices: [],
-    friends: [],
-    targetTags: [],
-    friendMaxLikes: 10,
-    enableFriendTags: false,
-    friendTags: "",
-  });
+  const [formData, setFormData] = useState({ ...defaultForm });
 
   useEffect(() => {
     if (isEditMode && id) {
@@ -89,12 +90,12 @@ const NewAutoLike: React.FC = () => {
     }
   };
 
-  const handleUpdateFormData = (data: Partial<CreateLikeTaskData>) => {
+  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 handleNext = () => setCurrentStep((prev) => Math.min(prev + 1, 2));
+  const handlePrev = () => setCurrentStep((prev) => Math.max(prev - 1, 0));
 
   const handleComplete = async () => {
     if (!formData.name.trim()) {
@@ -124,90 +125,104 @@ const NewAutoLike: React.FC = () => {
 
   // 步骤1：基础设置
   const renderBasicSettings = () => (
-    <div className={style["form-section"]}>
-      <div className={style["form-item"]}>
-        <label className={style["form-label"]}>任务名称</label>
+    <div className={style.formStep}>
+      <div className={style.formItem}>
+        <div className={style.formLabel}>任务名称</div>
         <Input
           placeholder="请输入任务名称"
           value={formData.name}
           onChange={(e) => handleUpdateFormData({ name: e.target.value })}
-          className={style["form-input"]}
+          className={style.input}
         />
       </div>
-      <div className={style["form-item"]}>
-        <label className={style["form-label"]}>点赞间隔</label>
-        <div className={style["stepper-group"]}>
-          <Button
-            icon={<MinusOutlined />}
+
+      <div className={style.formItem}>
+        <div className={style.formLabel}>点赞间隔</div>
+        <div className={style.counterRow}>
+          <button
+            type="button"
+            className={style.counterBtn}
             onClick={() =>
               handleUpdateFormData({
                 interval: Math.max(1, formData.interval - 1),
               })
             }
-            className={style["stepper-btn"]}
-          />
-          <span className={style["stepper-value"]}>{formData.interval} 秒</span>
-          <Button
-            icon={<PlusOutlined />}
+          >
+            <MinusOutlined />
+          </button>
+          <span className={style.counterValue}>{formData.interval} 秒</span>
+          <button
+            type="button"
+            className={style.counterBtn}
             onClick={() =>
               handleUpdateFormData({ interval: formData.interval + 1 })
             }
-            className={style["stepper-btn"]}
-          />
+          >
+            <PlusOutlined />
+          </button>
         </div>
+        <div className={style.counterTip}>设置两次点赞之间的最小时间间隔</div>
       </div>
-      <div className={style["form-item"]}>
-        <label className={style["form-label"]}>每日上限</label>
-        <div className={style["stepper-group"]}>
-          <Button
-            icon={<MinusOutlined />}
+
+      <div className={style.formItem}>
+        <div className={style.formLabel}>每日最大点赞数</div>
+        <div className={style.counterRow}>
+          <button
+            type="button"
+            className={style.counterBtn}
             onClick={() =>
               handleUpdateFormData({
                 maxLikes: Math.max(1, formData.maxLikes - 10),
               })
             }
-            className={style["stepper-btn"]}
-          />
-          <span className={style["stepper-value"]}>{formData.maxLikes} 次</span>
-          <Button
-            icon={<PlusOutlined />}
+          >
+            <MinusOutlined />
+          </button>
+          <span className={style.counterValue}>{formData.maxLikes} 次</span>
+          <button
+            type="button"
+            className={style.counterBtn}
             onClick={() =>
               handleUpdateFormData({ maxLikes: formData.maxLikes + 10 })
             }
-            className={style["stepper-btn"]}
-          />
+          >
+            <PlusOutlined />
+          </button>
         </div>
+        <div className={style.counterTip}>设置每天最多点赞的次数</div>
       </div>
-      <div className={style["form-item"]}>
-        <label className={style["form-label"]}>执行时间</label>
-        <div className={style["time-range"]}>
+
+      <div className={style.formItem}>
+        <div className={style.formLabel}>点赞时间范围</div>
+        <div className={style.timeRow}>
           <Input
             type="time"
             value={formData.startTime}
             onChange={(e) =>
               handleUpdateFormData({ startTime: e.target.value })
             }
-            className={style["time-input"]}
+            className={style.inputTime}
           />
-          <span className={style["time-separator"]}>至</span>
+          <span className={style.timeTo}>至</span>
           <Input
             type="time"
             value={formData.endTime}
             onChange={(e) => handleUpdateFormData({ endTime: e.target.value })}
-            className={style["time-input"]}
+            className={style.inputTime}
           />
         </div>
       </div>
-      <div className={style["form-item"]}>
-        <label className={style["form-label"]}>内容类型</label>
-        <div className={style["content-types"]}>
-          {(["text", "image", "video", "link"] as ContentType[]).map((type) => (
+
+      <div className={style.formItem}>
+        <div className={style.formLabel}>点赞内容类型</div>
+        <div className={style.contentTypes}>
+          {(["text", "image", "video"] as ContentType[]).map((type) => (
             <span
               key={type}
               className={
                 formData.contentTypes.includes(type)
-                  ? style["content-type-tag-active"]
-                  : style["content-type-tag"]
+                  ? style.contentTypeTagActive
+                  : style.contentTypeTag
               }
               onClick={() => {
                 const newTypes = formData.contentTypes.includes(type)
@@ -221,78 +236,109 @@ const NewAutoLike: React.FC = () => {
           ))}
         </div>
       </div>
-      <div className={style["form-item"]}>
-        <label className={style["form-label"]}>自动开启</label>
-        <Switch checked={autoEnabled} onChange={setAutoEnabled} />
+
+      <div className={style.formItem}>
+        <div className={style.switchRow}>
+          <span className={style.switchLabel}>启用好友标签</span>
+          <Switch
+            checked={formData.enableFriendTags}
+            onChange={(checked) =>
+              handleUpdateFormData({ enableFriendTags: checked })
+            }
+            className={style.switch}
+          />
+        </div>
+        {formData.enableFriendTags && (
+          <div className={style.formItem}>
+            <div className={style.formLabel}>好友标签</div>
+            <Input
+              placeholder="请输入标签"
+              value={formData.friendTags}
+              onChange={(e) =>
+                handleUpdateFormData({ friendTags: e.target.value })
+              }
+              className={style.input}
+            />
+            <div className={style.counterTip}>只给有此标签的好友点赞</div>
+          </div>
+        )}
       </div>
-      <div className={style["form-actions"]}>
-        <Button
-          type="primary"
-          block
-          onClick={handleNext}
-          size="large"
-          className={style["main-btn"]}
-        >
+
+      <div className={style.formItem}>
+        <div className={style.switchRow}>
+          <span className={style.switchLabel}>自动开启</span>
+          <Switch
+            checked={autoEnabled}
+            onChange={setAutoEnabled}
+            className={style.switch}
+          />
+        </div>
+      </div>
+
+      <div className={style.formStepBtnRow}>
+        <Button type="primary" onClick={handleNext} className={style.nextBtn}>
           下一步
         </Button>
       </div>
     </div>
   );
 
-  // 步骤2：设备选择（占位）
+  // 步骤2：设备选择
   const renderDeviceSelection = () => (
-    <div className={style["form-section"]}>
-      <div className={style["placeholder-content"]}>
-        <span className={style["placeholder-icon"]}>[设备选择组件占位]</span>
-        <div className={style["placeholder-text"]}>设备选择功能开发中...</div>
-        <div className={style["placeholder-subtext"]}>
-          当前已选择 {formData.devices?.length || 0} 个设备
-        </div>
+    <div className={style.formStep}>
+      <div className={style.formItem}>
+        <div className={style.formLabel}>选择设备</div>
+        <Input
+          placeholder="请选择设备"
+          value={formData.devices.join(", ")}
+          readOnly
+          onClick={() => message.info("这里应弹出设备选择器")}
+          className={style.input}
+        />
+        {formData.devices.length > 0 && (
+          <div className={style.selectedTip}>
+            已选设备: {formData.devices.length}个
+          </div>
+        )}
       </div>
-      <div className={style["form-actions"]}>
-        <Button
-          onClick={handlePrev}
-          size="large"
-          className={style["secondary-btn"]}
-        >
+      <div className={style.formStepBtnRow}>
+        <Button onClick={handlePrev} className={style.prevBtn}>
           上一步
         </Button>
-        <Button
-          type="primary"
-          onClick={handleNext}
-          size="large"
-          className={style["main-btn"]}
-        >
+        <Button type="primary" onClick={handleNext} className={style.nextBtn}>
           下一步
         </Button>
       </div>
     </div>
   );
 
-  // 步骤3：好友设置（占位）
-  const renderFriendSettings = () => (
-    <div className={style["form-section"]}>
-      <div className={style["placeholder-content"]}>
-        <span className={style["placeholder-icon"]}>[好友选择组件占位]</span>
-        <div className={style["placeholder-text"]}>好友设置功能开发中...</div>
-        <div className={style["placeholder-subtext"]}>
-          当前已选择 {formData.friends?.length || 0} 个好友
-        </div>
+  // 步骤3：人群选择
+  const renderFriendSelection = () => (
+    <div className={style.formStep}>
+      <div className={style.formItem}>
+        <div className={style.formLabel}>选择微信好友</div>
+        <Input
+          placeholder="请选择微信好友"
+          value={formData.friends.join(", ")}
+          readOnly
+          onClick={() => message.info("这里应弹出好友选择器")}
+          className={style.input}
+        />
+        {formData.friends.length > 0 && (
+          <div className={style.selectedTip}>
+            已选好友: {formData.friends.length}个
+          </div>
+        )}
       </div>
-      <div className={style["form-actions"]}>
-        <Button
-          onClick={handlePrev}
-          size="large"
-          className={style["secondary-btn"]}
-        >
+      <div className={style.formStepBtnRow}>
+        <Button onClick={handlePrev} className={style.prevBtn}>
           上一步
         </Button>
         <Button
           type="primary"
           onClick={handleComplete}
-          size="large"
           loading={isSubmitting}
-          className={style["main-btn"]}
+          className={style.completeBtn}
         >
           {isEditMode ? "更新任务" : "创建任务"}
         </Button>
@@ -321,21 +367,39 @@ const NewAutoLike: React.FC = () => {
         </NavBar>
       }
     >
-      <div className={style["new-page-bg"]}>
-        <div className={style["new-page-center"]}>
-          {/* 步骤器保留新项目的 */}
-          {/* 你可以在这里插入新项目的步骤器组件 */}
-          <div className={style["form-card"]}>
-            {currentStep === 1 && renderBasicSettings()}
-            {currentStep === 2 && renderDeviceSelection()}
-            {currentStep === 3 && renderFriendSettings()}
-            {isLoading && (
-              <div className={style["loading"]}>
-                <Spin />
-              </div>
-            )}
-          </div>
+      <div className={style.formBg}>
+        <div className={style.formSteps}>
+          {steps.map((s, i) => (
+            <div
+              key={s}
+              className={
+                style.formStepIndicator +
+                " " +
+                (i === currentStep
+                  ? style.formStepActive
+                  : i < currentStep
+                    ? style.formStepDone
+                    : "")
+              }
+            >
+              <span className={style.formStepNum}>
+                {i < currentStep ? <CheckOutlined /> : i + 1}
+              </span>
+              <span>{s}</span>
+            </div>
+          ))}
         </div>
+        {isLoading ? (
+          <div className={style.formLoading}>
+            <Spin />
+          </div>
+        ) : (
+          <>
+            {currentStep === 0 && renderBasicSettings()}
+            {currentStep === 1 && renderDeviceSelection()}
+            {currentStep === 2 && renderFriendSelection()}
+          </>
+        )}
       </div>
     </Layout>
   );