feat: 本次提交更新内容如下暂存一波

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

@@ -4,12 +4,12 @@ import {
   PlusOutlined,
   MinusOutlined,
   ArrowLeftOutlined,
-  CheckOutlined,
 } from "@ant-design/icons";
 import { Button, Input, Switch, Spin, message } from "antd";
 import Layout from "@/components/Layout/Layout";
 import DeviceSelection from "@/components/DeviceSelection";
 import FriendSelection from "@/components/FriendSelection";
+import StepIndicator from "@/components/StepIndicator";
 import {
   createAutoLikeTask,
   updateAutoLikeTask,
@@ -29,9 +29,9 @@ const contentTypeLabels: Record<ContentType, string> = {
 };
 
 const steps = [
-  { title: "基础设置", desc: "设置点赞规则" },
-  { title: "设备选择", desc: "选择执行设备" },
-  { title: "人群选择", desc: "选择目标人群" },
+  { id: 1, title: "基础设置", subtitle: "设置点赞规则" },
+  { id: 2, title: "设备选择", subtitle: "选择执行设备" },
+  { id: 3, title: "人群选择", subtitle: "选择目标人群" },
 ];
 
 const NewAutoLike: React.FC = () => {
@@ -146,38 +146,7 @@ const NewAutoLike: React.FC = () => {
 
   // 步骤器
   const renderStepIndicator = () => (
-    <div className={style.stepIndicatorWrapper}>
-      <div className={style.stepIndicator}>
-        {steps.map((s, i) => (
-          <div
-            key={s.title}
-            className={
-              style.stepItem +
-              " " +
-              (currentStep === i + 1
-                ? style.stepActive
-                : i + 1 < currentStep
-                  ? style.stepDone
-                  : "")
-            }
-          >
-            <span className={style.stepNum}>
-              {i + 1 < currentStep ? <CheckOutlined /> : i + 1}
-            </span>
-            <span className={style.stepTitle}>{s.title}</span>
-            <span className={style.stepDesc}>{s.desc}</span>
-          </div>
-        ))}
-      </div>
-      <div className={style.stepProgressBarBg}>
-        <div
-          className={style.stepProgressBar}
-          style={{
-            width: `${((currentStep - 1) / (steps.length - 1)) * 100}%`,
-          }}
-        ></div>
-      </div>
-    </div>
+    <StepIndicator steps={steps} currentStep={currentStep} />
   );
 
   // 步骤1：基础设置

nkebao/src/pages/workspace/auto-like/new/new.module.scss

@@ -5,95 +5,6 @@
   position: relative;
 }
 
-.stepIndicatorWrapper {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  background: #f8f6f3;
-  padding: 16px 0 8px 0;
-}
-
-.stepIndicator {
-  display: flex;
-  justify-content: center;
-  gap: 32px;
-}
-
-.stepItem {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #bbb;
-  font-size: 13px;
-  font-weight: 400;
-  transition: color 0.2s;
-  min-width: 80px;
-}
-
-.stepActive {
-  color: #188eee;
-  font-weight: 600;
-}
-
-.stepDone {
-  color: #19c37d;
-}
-
-.stepNum {
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  background: #e5e7eb;
-  color: #888;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 15px;
-  margin-bottom: 4px;
-}
-
-.stepActive .stepNum {
-  background: #188eee;
-  color: #fff;
-}
-
-.stepDone .stepNum {
-  background: #19c37d;
-  color: #fff;
-}
-
-.stepTitle {
-  font-size: 14px;
-  margin-top: 2px;
-  font-weight: 500;
-}
-
-.stepDesc {
-  font-size: 12px;
-  color: #888;
-  margin-top: 2px;
-  text-align: center;
-}
-
-.stepProgressBarBg {
-  position: relative;
-  width: 80%;
-  height: 4px;
-  background: #e5e7eb;
-  border-radius: 2px;
-  margin: 12px auto 0 auto;
-}
-
-.stepProgressBar {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  background: #188eee;
-  border-radius: 2px;
-  transition: width 0.3s;
-}
-
 .basicSection {
   background: none;
   border-radius: 0;