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

先存一下

nkebao/src/pages/scenarios/NewPlan.tsx

@@ -3,6 +3,8 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Check, Settings } from 'lucide-react';
 import PageHeader from '@/components/PageHeader';
 import { useToast } from '@/components/ui/toast';
+import Layout from '@/components/Layout';
+import '@/components/Layout.css';
 
 // 步骤定义
 const steps = [
@@ -134,33 +136,55 @@ export default function NewPlan() {
     setCurrentStep((prev) => Math.max(prev - 1, 1));
   };
 
-  // 步骤指示器组件
+  // 步骤指示器组件（方案A：简洁线性进度条风格）
-  const StepIndicator = ({ steps, currentStep }: { steps: any[], currentStep: number }) => (
+  const StepIndicator = ({ steps, currentStep }: { steps: any[], currentStep: number }) => {
-    <div className="flex items-center justify-between mb-6">
+    const percent = ((currentStep - 1) / (steps.length - 1)) * 100;
-      {steps.map((step, index) => (
+    return (
-        <div key={step.id} className="flex items-center">
+      <div className="mb-8 px-2 pt-2">
-          <div className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium ${
+        {/* 进度条 */}
-            currentStep > step.id 
+        <div className="relative h-2 mb-7">
-              ? 'bg-green-500 text-white' 
+          <div className="absolute top-1/2 left-0 w-full h-1 bg-gray-200 rounded-full -translate-y-1/2" />
-              : currentStep === step.id 
+          <div
-                ? 'bg-blue-500 text-white' 
+            className="absolute top-1/2 left-0 h-1 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-full -translate-y-1/2 transition-all duration-300"
-                : 'bg-gray-200 text-gray-500'
+            style={{ width: `${percent}%` }}
-          }`}>
+          />
-            {currentStep > step.id ? <Check className="h-4 w-4" /> : step.id}
+          {/* 圆点 */}
+          <div className="absolute top-1/2 left-0 w-full flex justify-between -translate-y-1/2">
+            {steps.map((step, idx) => {
+              const isActive = currentStep === step.id;
+              const isDone = currentStep > step.id;
+              return (
+                <div key={step.id} className="flex flex-col items-center w-1/3">
+                  <div
+                    className={`w-7 h-7 flex items-center justify-center rounded-full border-2 transition-all duration-300 text-sm font-bold shadow-sm leading-none
+                      ${isActive ? 'bg-blue-500 border-blue-500 text-white scale-110' :
+                        isDone ? 'bg-indigo-500 border-indigo-500 text-white' :
+                        'bg-white border-gray-300 text-gray-400'}
+                    `}
+                  >
+                    {isDone ? <span className="flex items-center justify-center h-full w-full"><Check className="w-4 h-4" /></span> : <span className="flex items-center justify-center h-full w-full">{step.id}</span>}
+                  </div>
+                </div>
+              );
+            })}
           </div>
-          <div className="ml-2">
-            <div className="text-sm font-medium">{step.title}</div>
-            <div className="text-xs text-gray-500">{step.subtitle}</div>
-          </div>
-          {index < steps.length - 1 && (
-            <div className={`w-12 h-0.5 mx-4 ${
-              currentStep > step.id ? 'bg-green-500' : 'bg-gray-200'
-            }`} />
-          )}
         </div>
-      ))}
+        {/* 步骤文字 */}
-    </div>
+        <div className="flex justify-between">
-  );
+          {steps.map((step, idx) => {
+            const isActive = currentStep === step.id;
+            const isDone = currentStep > step.id;
+            return (
+              <div key={step.id} className="flex flex-col items-center w-1/3">
+                <span className={`text-xs font-semibold ${isActive ? 'text-blue-600' : isDone ? 'text-indigo-500' : 'text-gray-400'}`}>{step.title}</span>
+                <span className={`text-[11px] mt-0.5 ${isActive || isDone ? 'text-gray-500' : 'text-gray-400'}`}>{step.subtitle}</span>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
 
   // 基础设置步骤
   const BasicSettings = () => {
@@ -393,8 +417,8 @@ export default function NewPlan() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <Layout
-      <div className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col">
+      header={
         <PageHeader
           title="新建获客计划"
           defaultBackPath="/scenarios"
@@ -404,16 +428,16 @@ export default function NewPlan() {
             </button>
           }
         />
-
+      }
-        {/* 添加pt-16来避免被固定导航栏遮挡 */}
+    >
-        <div className="flex-1 flex flex-col pt-16">
+      <div className="max-w-[390px] mx-auto w-full bg-white min-h-screen flex flex-col">
-          <div className="px-4 py-6">
+        <div className="flex-1 flex flex-col">
+          <div className="px-4 pt-8">
             <StepIndicator steps={steps} currentStep={currentStep} />
           </div>
-
           <div className="flex-1 px-4 pb-20">{renderStepContent()}</div>
         </div>
       </div>
-    </div>
+    </Layout>
   );
 }