From 5d68a41931665f1cd665d114d6c1f9dcfd958ea8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?=
 =?UTF-8?q?=E5=B9=B3?= <fsmecx@gmail.com>
Date: Mon, 7 Jul 2025 22:25:24 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?=
 =?UTF-8?q?=E5=85=88=E5=AD=98=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/src/pages/scenarios/NewPlan.tsx | 90 ++++++++++++++++----------
 1 file changed, 57 insertions(+), 33 deletions(-)

diff --git a/nkebao/src/pages/scenarios/NewPlan.tsx b/nkebao/src/pages/scenarios/NewPlan.tsx
index fb734578..45a5f3db 100644
--- a/nkebao/src/pages/scenarios/NewPlan.tsx
+++ b/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));
   };
 
-  // 步骤指示器组件
-  const StepIndicator = ({ steps, currentStep }: { steps: any[], currentStep: number }) => (
-    <div className="flex items-center justify-between mb-6">
-      {steps.map((step, index) => (
-        <div key={step.id} className="flex items-center">
-          <div className={`flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium ${
-            currentStep > step.id 
-              ? 'bg-green-500 text-white' 
-              : currentStep === step.id 
-                ? 'bg-blue-500 text-white' 
-                : 'bg-gray-200 text-gray-500'
-          }`}>
-            {currentStep > step.id ? <Check className="h-4 w-4" /> : step.id}
+  // 步骤指示器组件（方案A：简洁线性进度条风格）
+  const StepIndicator = ({ steps, currentStep }: { steps: any[], currentStep: number }) => {
+    const percent = ((currentStep - 1) / (steps.length - 1)) * 100;
+    return (
+      <div className="mb-8 px-2 pt-2">
+        {/* 进度条 */}
+        <div className="relative h-2 mb-7">
+          <div className="absolute top-1/2 left-0 w-full h-1 bg-gray-200 rounded-full -translate-y-1/2" />
+          <div
+            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"
+            style={{ width: `${percent}%` }}
+          />
+          {/* 圆点 */}
+          <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">
-      <div className="max-w-[390px] mx-auto bg-white min-h-screen flex flex-col">
+    <Layout
+      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="px-4 py-6">
+      }
+    >
+      <div className="max-w-[390px] mx-auto w-full bg-white min-h-screen flex flex-col">
+        <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>
   );
 } 
\ No newline at end of file