From d763f482b1bce312c516f09731fab003129d99a0 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: Wed, 23 Jul 2025 16:44:13 +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?=E6=96=B0=E5=BB=BA=E6=9C=8B=E5=8F=8B=E5=9C=88=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/src/components/StepIndicator/index.tsx |   2 +-
 nkebao/src/pages/scenarios/plan/new/index.tsx |  24 +-
 .../plan/new/steps/BasicSettings.tsx          | 287 +++++++-----------
 .../plan/new/steps/FriendRequestSettings.tsx  | 255 ++++++++--------
 .../plan/new/steps/MessageSettings.tsx        |  37 ++-
 .../scenarios/plan/new/steps/base.module.scss | 149 +++++++++
 6 files changed, 413 insertions(+), 341 deletions(-)
 create mode 100644 nkebao/src/pages/scenarios/plan/new/steps/base.module.scss

diff --git a/nkebao/src/components/StepIndicator/index.tsx b/nkebao/src/components/StepIndicator/index.tsx
index 5702c77f..38cb7509 100644
--- a/nkebao/src/components/StepIndicator/index.tsx
+++ b/nkebao/src/components/StepIndicator/index.tsx
@@ -11,7 +11,7 @@ const StepIndicator: React.FC<StepIndicatorProps> = ({
   steps,
 }) => {
   return (
-    <div style={{ marginBottom: 24, overflowX: "auto" }}>
+    <div style={{ overflowX: "auto", padding: "30px 0px", background: "#fff" }}>
       <Steps current={currentStep - 1}>
         {steps.map((step, idx) => (
           <Steps.Step
diff --git a/nkebao/src/pages/scenarios/plan/new/index.tsx b/nkebao/src/pages/scenarios/plan/new/index.tsx
index a3987023..96bae635 100644
--- a/nkebao/src/pages/scenarios/plan/new/index.tsx
+++ b/nkebao/src/pages/scenarios/plan/new/index.tsx
@@ -1,8 +1,7 @@
 import { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { message } from "antd";
-import { NavBar } from "antd-mobile";
-import { ArrowLeftOutlined } from "@ant-design/icons";
+import NavCommon from "@/components/NavCommon";
 import BasicSettings from "./steps/BasicSettings";
 import FriendRequestSettings from "./steps/FriendRequestSettings";
 import MessageSettings from "./steps/MessageSettings";
@@ -205,25 +204,8 @@ export default function NewPlan() {
     <Layout
       header={
         <>
-          <NavBar
-            back={null}
-            style={{ background: "#fff" }}
-            left={
-              <div className="nav-title">
-                <ArrowLeftOutlined
-                  twoToneColor="#1677ff"
-                  onClick={() => router(-1)}
-                />
-              </div>
-            }
-          >
-            <span className="nav-title">
-              {isEdit ? "编辑朋友圈同步" : "新建朋友圈同步"}
-            </span>
-          </NavBar>
-          <div className="px-4 py-6">
-            <StepIndicator currentStep={currentStep} steps={steps} />
-          </div>
+          <NavCommon title={isEdit ? "编辑朋友圈同步" : "新建朋友圈同步"} />
+          <StepIndicator currentStep={currentStep} steps={steps} />
         </>
       }
     >
diff --git a/nkebao/src/pages/scenarios/plan/new/steps/BasicSettings.tsx b/nkebao/src/pages/scenarios/plan/new/steps/BasicSettings.tsx
index 1f989532..acaa58e5 100644
--- a/nkebao/src/pages/scenarios/plan/new/steps/BasicSettings.tsx
+++ b/nkebao/src/pages/scenarios/plan/new/steps/BasicSettings.tsx
@@ -1,17 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
-import {
-  Form,
-  Input,
-  Button,
-  Tag,
-  Switch,
-  // Upload,
-  Modal,
-  Alert,
-  Row,
-  Col,
-  message,
-} from "antd";
+import { Form, Input, Button, Tag, Switch, Modal } from "antd";
+import { Button as ButtonMobile } from "antd-mobile";
 import {
   PlusOutlined,
   EyeOutlined,
@@ -21,6 +10,8 @@ import {
   CheckOutlined,
 } from "@ant-design/icons";
 import { uploadFile } from "@/api/common";
+import Layout from "@/components/Layout/Layout";
+import styles from "./base.module.scss";
 
 interface BasicSettingsProps {
   isEdit: boolean;
@@ -424,31 +415,31 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
     formData.scenario !== 1 ? { display: "none" } : { display: "block" };
 
   return (
-    <div>
+    <div className={styles["basic-container"]}>
       {/* 场景选择区块 */}
-      {sceneLoading ? (
-        <div style={{ padding: 16, textAlign: "center" }}>加载中...</div>
-      ) : (
-        <Row gutter={20} className="grid grid-cols-3 gap-4">
-          {sceneList.map((scene) => (
-            <Col span={8} key={scene.id}>
-              <Button
-                type="primary"
+      <div className={styles["basic-scene-select"]}>
+        <div className={styles["basic-scene-grid"]}>
+          {sceneList.map((scene) => {
+            const selected = formData.scenario === scene.id;
+            return (
+              <button
+                key={scene.id}
                 onClick={() => handleScenarioSelect(scene.id)}
-                className={`w-full ${formData.scenario === scene.id ? "bg-blue-500" : "bg-gray-200"}`}
+                className={
+                  styles["basic-scene-btn"] +
+                  (selected ? " " + styles.selected : "")
+                }
               >
                 {scene.name.replace("获客", "")}
-              </Button>
-            </Col>
-          ))}
-        </Row>
-      )}
-
+              </button>
+            );
+          })}
+        </div>
+      </div>
       {/* 计划名称输入区 */}
-      <div className="mb-4">计划名称</div>
-      <div className="border p-2 mb-4">
+      <div className={styles["basic-label"]}>计划名称</div>
+      <div className={styles["basic-input-block"]}>
         <Input
-          className="w-full"
           value={formData.name}
           onChange={(e) =>
             onChange({ ...formData, name: String(e.target.value) })
@@ -456,17 +447,15 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
           placeholder="请输入计划名称"
         />
       </div>
-
-      <div className="mb-4">获客标签（可多选）</div>
+      <div className={styles["basic-label"]}>获客标签（可多选）</div>
       {/* 标签选择区块 */}
       {formData.scenario && (
-        <div className="flex pb-4" style={{ flexWrap: "wrap", gap: 8 }}>
+        <div className={styles["basic-tag-list"]}>
           {(currentScene?.scenarioTags || []).map((tag: string) => (
             <Tag
               key={tag}
               color={selectedScenarioTags.includes(tag) ? "blue" : "default"}
               onClick={() => handleScenarioTagToggle(tag)}
-              style={{ marginBottom: 4 }}
             >
               {tag}
             </Tag>
@@ -477,7 +466,6 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
               key={tag.id}
               color={selectedScenarioTags.includes(tag.id) ? "blue" : "default"}
               onClick={() => handleScenarioTagToggle(tag.id)}
-              style={{ marginBottom: 4 }}
               closable
               onClose={() => handleRemoveCustomTag(tag.id)}
             >
@@ -487,26 +475,30 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
         </div>
       )}
       {/* 自定义标签输入区 */}
-      <div className="flex p" style={{ gap: 8 }}>
-        <div className="border  p-2 flex-1">
+      <div className={styles["basic-custom-tag-input"]}>
+        <div
+          className={styles["basic-input-block"]}
+          style={{ marginBottom: 0 }}
+        >
           <Input
             type="text"
             value={customTagInput}
             onChange={(e) => setCustomTagInput(e.target.value)}
             placeholder="添加自定义标签"
-            className="w-full"
           />
         </div>
-        <div className="pt-1">
+        <div>
           <Button type="primary" onClick={handleAddCustomTag}>
             添加
           </Button>
         </div>
       </div>
-
       {/* 输入获客成功提示 */}
-      <div className="flex pt-4">
-        <div className="border  p-2 flex-1">
+      <div className={styles["basic-success-tip"]}>
+        <div
+          className={styles["basic-input-block"]}
+          style={{ marginBottom: 0 }}
+        >
           <Input
             type="text"
             value={tips}
@@ -515,21 +507,13 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
               onChange({ ...formData, tips: e.target.value });
             }}
             placeholder="请输入获客成功提示"
-            className="w-full"
           />
         </div>
       </div>
-
       {/* 选素材 */}
-      <div className="my-4" style={openPoster}>
-        <div className="mb-4">选择海报</div>
-        <div
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(3, 1fr)",
-            gap: 12,
-          }}
-        >
+      <div className={styles["basic-materials"]} style={openPoster}>
+        <div className={styles["basic-label"]}>选择海报</div>
+        <div className={styles["basic-materials-grid"]}>
           {[...materials, ...customPosters].map((material) => {
             const isSelected = selectedMaterials.some(
               (m) => m.id === material.id
@@ -538,19 +522,10 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
             return (
               <div
                 key={material.id}
-                style={{
-                  border: isSelected ? "2px solid #1890ff" : "2px solid #eee",
-                  borderRadius: 8,
-                  padding: 6,
-                  cursor: "pointer",
-                  background: isSelected ? "#e6f7ff" : "#fff",
-                  transition: "border 0.2s",
-                  textAlign: "center",
-                  position: "relative",
-                  height: 180 + 12, // 图片高度180+上下padding
-                  overflow: "hidden",
-                  minHeight: 192,
-                }}
+                className={
+                  styles["basic-material-card"] +
+                  (isSelected ? " " + styles.selected : "")
+                }
                 onClick={() => handleMaterialSelect(material)}
               >
                 {/* 预览按钮：自定义海报在左上，内置海报在右上 */}
@@ -607,31 +582,9 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
                 <img
                   src={material.preview}
                   alt={material.name}
-                  style={{
-                    width: 100,
-                    height: 180,
-                    objectFit: "cover",
-                    borderRadius: 4,
-                    marginBottom: 0,
-                    display: "block",
-                  }}
+                  className={styles["basic-material-img"]}
                 />
-                <div
-                  style={{
-                    position: "absolute",
-                    left: 0,
-                    bottom: 0,
-                    width: "100%",
-                    background: "rgba(0,0,0,0.5)",
-                    color: "#fff",
-                    fontSize: 14,
-                    padding: "4px 0",
-                    borderBottomLeftRadius: 4,
-                    borderBottomRightRadius: 4,
-                    textAlign: "center",
-                    zIndex: 3,
-                  }}
-                >
+                <div className={styles["basic-material-name"]}>
                   {material.name}
                 </div>
               </div>
@@ -639,19 +592,7 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
           })}
           {/* 添加海报卡片 */}
           <div
-            style={{
-              border: "2px dashed #bbb",
-              borderRadius: 8,
-              padding: 6,
-              cursor: "pointer",
-              background: "#fafbfc",
-              textAlign: "center",
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              height: 190,
-            }}
+            className={styles["basic-add-material"]}
             onClick={() => uploadInputRef.current?.click()}
           >
             <span style={{ fontSize: 36, color: "#bbb", marginBottom: 8 }}>
@@ -705,11 +646,10 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
         </Modal>
       </div>
       {/* 订单导入区块优化 */}
-      <div style={openOrder} className="my-4">
-        <div style={{ fontWeight: 500, marginBottom: 8 }}>订单表格上传</div>
-        <div style={{ display: "flex", gap: 12, marginBottom: 4 }}>
+      <div className={styles["basic-order-upload"]} style={openOrder}>
+        <div className={styles["basic-order-upload-label"]}>订单表格上传</div>
+        <div className={styles["basic-order-upload-actions"]}>
           <Button
-            type="button"
             style={{ display: "flex", alignItems: "center", gap: 4 }}
             onClick={handleDownloadTemplate}
           >
@@ -741,78 +681,68 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
             />
           </Button>
         </div>
-        <div style={{ color: "#888", fontSize: 13, marginBottom: 8 }}>
+        <div className={styles["basic-order-upload-tip"]}>
           支持 CSV、Excel 格式，上传后将文件保存到服务器
         </div>
       </div>
       {/* 电话获客设置区块，仅在选择电话获客场景时显示 */}
       {formData.scenario === 5 && (
-        <div style={{ margin: "16px 0" }}>
-          <div
-            style={{
-              background: "#f7f8fa",
-              borderRadius: 10,
-              padding: 20,
-              boxShadow: "0 2px 8px rgba(0,0,0,0.03)",
-              marginBottom: 12,
-            }}
-          >
-            <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 16 }}>
-              电话获客设置
+        <div className={styles["basic-phone-settings"]}>
+          <div style={{ fontWeight: 600, fontSize: 16, marginBottom: 16 }}>
+            电话获客设置
+          </div>
+          <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <span>自动加好友</span>
+              <Switch
+                checked={phoneSettings.autoAdd}
+                onChange={(v) =>
+                  setPhoneSettings((s) => ({ ...s, autoAdd: v }))
+                }
+              />
             </div>
-            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                }}
-              >
-                <span>自动加好友</span>
-                <Switch
-                  checked={phoneSettings.autoAdd}
-                  onChange={(v) =>
-                    setPhoneSettings((s) => ({ ...s, autoAdd: v }))
-                  }
-                />
-              </div>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                }}
-              >
-                <span>语音转文字</span>
-                <Switch
-                  checked={phoneSettings.speechToText}
-                  onChange={(v) =>
-                    setPhoneSettings((s) => ({ ...s, speechToText: v }))
-                  }
-                />
-              </div>
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                }}
-              >
-                <span>问题提取</span>
-                <Switch
-                  checked={phoneSettings.questionExtraction}
-                  onChange={(v) =>
-                    setPhoneSettings((s) => ({ ...s, questionExtraction: v }))
-                  }
-                />
-              </div>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <span>语音转文字</span>
+              <Switch
+                checked={phoneSettings.speechToText}
+                onChange={(v) =>
+                  setPhoneSettings((s) => ({ ...s, speechToText: v }))
+                }
+              />
+            </div>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <span>问题提取</span>
+              <Switch
+                checked={phoneSettings.questionExtraction}
+                onChange={(v) =>
+                  setPhoneSettings((s) => ({ ...s, questionExtraction: v }))
+                }
+              />
             </div>
           </div>
         </div>
       )}
       {/* 微信群设置区块，仅在选择微信群场景时显示 */}
       {formData.scenario === 7 && (
-        <div style={{ margin: "16px 0" }}>
+        <div className={styles["basic-wechat-group"]}>
           <div style={{ marginBottom: 8 }}>
             <Input
               value={weixinqunName}
@@ -833,24 +763,19 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
           </div>
         </div>
       )}
-
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          margin: "16px 0",
-        }}
-      >
+      <div className={styles["basic-footer-switch"]}>
         <span>是否启用</span>
         <Switch
           checked={formData.enabled}
           onChange={(value) => onChange({ ...formData, enabled: value })}
         />
       </div>
-      <Button className="mt-4" type="primary" onClick={onNext}>
-        下一步
-      </Button>
+
+      <div className={styles["basic-footer-switch"]}>
+        <ButtonMobile block color="primary" onClick={onNext}>
+          下一步
+        </ButtonMobile>
+      </div>
     </div>
   );
 };
diff --git a/nkebao/src/pages/scenarios/plan/new/steps/FriendRequestSettings.tsx b/nkebao/src/pages/scenarios/plan/new/steps/FriendRequestSettings.tsx
index f76e0fb3..16e458d2 100644
--- a/nkebao/src/pages/scenarios/plan/new/steps/FriendRequestSettings.tsx
+++ b/nkebao/src/pages/scenarios/plan/new/steps/FriendRequestSettings.tsx
@@ -13,6 +13,7 @@ import {
 } from "antd";
 import { QuestionCircleOutlined, MessageOutlined } from "@ant-design/icons";
 import DeviceSelection from "@/components/DeviceSelection";
+import Layout from "@/components/Layout/Layout";
 
 interface FriendRequestSettingsProps {
   formData: any;
@@ -97,143 +98,151 @@ const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({
 
   return (
     <>
-      <div className="space-y-6">
-        <div>
-          <span className="font-medium text-base">选择设备</span>
-          <div className="mt-2">
-            <DeviceSelection
-              selectedDevices={selectedDevices.map((d) => d.id)}
-              onSelect={(deviceIds) => {
-                const newSelectedDevices = deviceIds.map((id) => ({
-                  id,
-                  name: `设备 ${id}`,
-                  status: "online",
-                }));
-                setSelectedDevices(newSelectedDevices);
-                onChange({ ...formData, device: deviceIds });
-              }}
-              placeholder="选择设备"
-            />
+      <Layout
+        footer={
+          <div className="p-4 border-t bg-white">
+            <div className="flex justify-between">
+              <Button onClick={onPrev}>上一步</Button>
+              <Button type="primary" onClick={handleNext}>
+                下一步
+              </Button>
+            </div>
+          </div>
+        }
+      >
+        <div className="p-4 space-y-6">
+          <div>
+            <span className="font-medium text-base">选择设备</span>
+            <div className="mt-2">
+              <DeviceSelection
+                selectedDevices={selectedDevices.map((d) => d.id)}
+                onSelect={(deviceIds) => {
+                  const newSelectedDevices = deviceIds.map((id) => ({
+                    id,
+                    name: `设备 ${id}`,
+                    status: "online",
+                  }));
+                  setSelectedDevices(newSelectedDevices);
+                  onChange({ ...formData, device: deviceIds });
+                }}
+                placeholder="选择设备"
+              />
+            </div>
           </div>
-        </div>
 
-        <div className="mb-4">
-          <div className="flex items-center space-x-2 mb-1 relative">
-            <span className="font-medium text-base">好友备注</span>
-            <span
-              className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-gray-200 text-gray-500 text-xs cursor-pointer hover:bg-gray-300 transition-colors"
-              onMouseEnter={() => setShowRemarkTip(true)}
-              onMouseLeave={() => setShowRemarkTip(false)}
-              onClick={() => setShowRemarkTip((v) => !v)}
-            >
-              ?
-            </span>
-            {showRemarkTip && (
-              <div className="absolute left-24 top-0 z-20 w-64 p-3 bg-white border border-gray-200 rounded shadow-lg text-sm text-gray-700">
-                <div>设置添加好友时的备注格式</div>
-                <div className="mt-2 text-xs text-gray-500">备注格式预览：</div>
-                <div className="mt-1 text-blue-600">
-                  {formData.remarkType === "phone" &&
-                    `138****1234+${getScenarioTitle()}`}
-                  {formData.remarkType === "nickname" &&
-                    `小红书用户2851+${getScenarioTitle()}`}
-                  {formData.remarkType === "source" &&
-                    `抖音直播+${getScenarioTitle()}`}
+          <div className="mb-4">
+            <div className="flex items-center space-x-2 mb-1 relative">
+              <span className="font-medium text-base">好友备注</span>
+              <span
+                className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-gray-200 text-gray-500 text-xs cursor-pointer hover:bg-gray-300 transition-colors"
+                onMouseEnter={() => setShowRemarkTip(true)}
+                onMouseLeave={() => setShowRemarkTip(false)}
+                onClick={() => setShowRemarkTip((v) => !v)}
+              >
+                ?
+              </span>
+              {showRemarkTip && (
+                <div className="absolute left-24 top-0 z-20 w-64 p-3 bg-white border border-gray-200 rounded shadow-lg text-sm text-gray-700">
+                  <div>设置添加好友时的备注格式</div>
+                  <div className="mt-2 text-xs text-gray-500">
+                    备注格式预览：
+                  </div>
+                  <div className="mt-1 text-blue-600">
+                    {formData.remarkType === "phone" &&
+                      `138****1234+${getScenarioTitle()}`}
+                    {formData.remarkType === "nickname" &&
+                      `小红书用户2851+${getScenarioTitle()}`}
+                    {formData.remarkType === "source" &&
+                      `抖音直播+${getScenarioTitle()}`}
+                  </div>
                 </div>
-              </div>
-            )}
-          </div>
-          <Select
-            value={formData.remarkType || "phone"}
-            onChange={(value) => onChange({ ...formData, remarkType: value })}
-            className="w-full mt-2"
-          >
-            {remarkTypes.map((type) => (
-              <Select.Option key={type.value} value={type.value}>
-                {type.label}
-              </Select.Option>
-            ))}
-          </Select>
-        </div>
-
-        <div>
-          <div className="flex items-center justify-between">
-            <span className="font-medium text-base">招呼语</span>
-            <Button
-              onClick={() => setIsTemplateDialogOpen(true)}
-              className="text-blue-500"
+              )}
+            </div>
+            <Select
+              value={formData.remarkType || "phone"}
+              onChange={(value) => onChange({ ...formData, remarkType: value })}
+              className="w-full mt-2"
             >
-              <MessageOutlined className="h-4 w-4 mr-2" />
-              参考模板
-            </Button>
+              {remarkTypes.map((type) => (
+                <Select.Option key={type.value} value={type.value}>
+                  {type.label}
+                </Select.Option>
+              ))}
+            </Select>
           </div>
-          <Input
-            value={formData.greeting}
-            onChange={(e) =>
-              onChange({ ...formData, greeting: e.target.value })
-            }
-            placeholder="请输入招呼语"
-            className="mt-2"
-          />
-        </div>
 
-        <div>
-          <span className="font-medium text-base">添加间隔</span>
-          <div className="flex items-center space-x-2 mt-2">
+          <div>
+            <div className="flex items-center justify-between">
+              <span className="font-medium text-base">招呼语</span>
+              <Button
+                onClick={() => setIsTemplateDialogOpen(true)}
+                className="text-blue-500"
+              >
+                <MessageOutlined className="h-4 w-4 mr-2" />
+                参考模板
+              </Button>
+            </div>
             <Input
-              type="number"
-              value={formData.addFriendInterval || 1}
+              value={formData.greeting}
               onChange={(e) =>
-                onChange({
-                  ...formData,
-                  addFriendInterval: Number(e.target.value),
-                })
+                onChange({ ...formData, greeting: e.target.value })
               }
-            />
-            <div className="w-10">分钟</div>
-          </div>
-        </div>
-
-        <div>
-          <span className="font-medium text-base">允许加人的时间段</span>
-          <div className="flex items-center space-x-2 mt-2">
-            <Input
-              type="time"
-              value={formData.addFriendTimeStart || "09:00"}
-              onChange={(e) =>
-                onChange({ ...formData, addFriendTimeStart: e.target.value })
-              }
-              className="w-32"
-            />
-            <span>至</span>
-            <Input
-              type="time"
-              value={formData.addFriendTimeEnd || "18:00"}
-              onChange={(e) =>
-                onChange({ ...formData, addFriendTimeEnd: e.target.value })
-              }
-              className="w-32"
+              placeholder="请输入招呼语"
+              className="mt-2"
             />
           </div>
-        </div>
 
-        {hasWarnings && (
-          <Alert
-            message="警告"
-            description="您有未完成的设置项，建议完善后再进入下一步。"
-            type="warning"
-            showIcon
-            className="bg-amber-50 border-amber-200"
-          />
-        )}
+          <div>
+            <span className="font-medium text-base">添加间隔</span>
+            <div className="flex items-center space-x-2 mt-2">
+              <Input
+                type="number"
+                value={formData.addFriendInterval || 1}
+                onChange={(e) =>
+                  onChange({
+                    ...formData,
+                    addFriendInterval: Number(e.target.value),
+                  })
+                }
+              />
+              <div className="w-10">分钟</div>
+            </div>
+          </div>
 
-        <div className="flex justify-between pt-4">
-          <Button onClick={onPrev}>上一步</Button>
-          <Button type="primary" onClick={handleNext}>
-            下一步
-          </Button>
+          <div>
+            <span className="font-medium text-base">允许加人的时间段</span>
+            <div className="flex items-center space-x-2 mt-2">
+              <Input
+                type="time"
+                value={formData.addFriendTimeStart || "09:00"}
+                onChange={(e) =>
+                  onChange({ ...formData, addFriendTimeStart: e.target.value })
+                }
+                className="w-32"
+              />
+              <span>至</span>
+              <Input
+                type="time"
+                value={formData.addFriendTimeEnd || "18:00"}
+                onChange={(e) =>
+                  onChange({ ...formData, addFriendTimeEnd: e.target.value })
+                }
+                className="w-32"
+              />
+            </div>
+          </div>
+
+          {hasWarnings && (
+            <Alert
+              message="警告"
+              description="您有未完成的设置项，建议完善后再进入下一步。"
+              type="warning"
+              showIcon
+              className="bg-amber-50 border-amber-200"
+            />
+          )}
         </div>
-      </div>
+      </Layout>
 
       <Modal
         open={isTemplateDialogOpen}
diff --git a/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx b/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx
index f233ef07..a3a34c24 100644
--- a/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx
+++ b/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx
@@ -13,6 +13,7 @@ import {
   LinkOutlined,
   TeamOutlined,
 } from "@ant-design/icons";
+import Layout from "@/components/Layout/Layout";
 
 interface MessageContent {
   id: string;
@@ -533,23 +534,29 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
 
   return (
     <>
-      <div className="space-y-6">
-        <div className="flex items-center justify-between">
-          <h2 className="text-lg font-semibold">消息设置</h2>
-          <Button onClick={() => setIsAddDayPlanOpen(true)}>
-            <PlusOutlined className="h-4 w-4" />
-          </Button>
-        </div>
+      <Layout
+        footer={
+          <div className="p-4 border-t bg-white">
+            <div className="flex justify-between">
+              <Button onClick={onPrev}>上一步</Button>
+              <Button type="primary" onClick={onNext}>
+                下一步
+              </Button>
+            </div>
+          </div>
+        }
+      >
+        <div className="p-4 space-y-6">
+          <div className="flex items-center justify-between">
+            <h2 className="text-lg font-semibold">消息设置</h2>
+            <Button onClick={() => setIsAddDayPlanOpen(true)}>
+              <PlusOutlined className="h-4 w-4" />
+            </Button>
+          </div>
 
-        <Tabs defaultActiveKey="0" items={items} />
-
-        <div className="flex justify-between pt-4">
-          <Button onClick={onPrev}>上一步</Button>
-          <Button type="primary" onClick={onNext}>
-            下一步
-          </Button>
+          <Tabs defaultActiveKey="0" items={items} />
         </div>
-      </div>
+      </Layout>
 
       {/* 添加天数计划弹窗 */}
       <Modal
diff --git a/nkebao/src/pages/scenarios/plan/new/steps/base.module.scss b/nkebao/src/pages/scenarios/plan/new/steps/base.module.scss
new file mode 100644
index 00000000..b62b4420
--- /dev/null
+++ b/nkebao/src/pages/scenarios/plan/new/steps/base.module.scss
@@ -0,0 +1,149 @@
+.basic-container {
+  padding: 12px;
+}
+.basic-scene-select {
+  background: #fff;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 24px;
+}
+.basic-scene-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+.basic-scene-btn {
+  height: 40px;
+  border: none;
+  border-radius: 10px;
+  font-weight: 500;
+  font-size: 16px;
+  outline: none;
+  cursor: pointer;
+  background: rgba(#1677ff,0.1);
+  color: #1677ff;
+  transition: all 0.2s;
+}
+.basic-scene-btn.selected {
+  background: #1677ff;
+  color: #fff;
+  box-shadow: 0 2px 8px rgba(22,119,255,0.08);
+}
+.basic-label {
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+.basic-input-block {
+  border: 1px solid #eee;
+  padding: 8px;
+  margin-bottom: 16px;
+  border-radius: 6px;
+  background: #fff;
+}
+.basic-tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding-bottom: 16px;
+}
+.basic-custom-tag-input {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+.basic-success-tip {
+  display: flex;
+  padding-top: 16px;
+}
+.basic-materials {
+  margin: 16px 0;
+}
+.basic-materials-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 12px;
+}
+.basic-material-card {
+  border: 2px solid #eee;
+  border-radius: 8px;
+  padding: 6px;
+  cursor: pointer;
+  background: #fff;
+  text-align: center;
+  position: relative;
+  min-height: 192px;
+  transition: border 0.2s;
+}
+.basic-material-card.selected {
+  border: 2px solid #1890ff;
+  background: #e6f7ff;
+}
+.basic-material-img {
+  width: 100px;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 4px;
+  margin-bottom: 0;
+  display: block;
+}
+.basic-material-name {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background: rgba(0,0,0,0.5);
+  color: #fff;
+  font-size: 14px;
+  padding: 4px 0;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  text-align: center;
+  z-index: 3;
+}
+.basic-add-material {
+  border: 2px dashed #bbb;
+  border-radius: 8px;
+  padding: 6px;
+  cursor: pointer;
+  background: #fafbfc;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 190px;
+}
+.basic-order-upload {
+  margin: 16px 0;
+}
+.basic-order-upload-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.basic-order-upload-actions {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+.basic-order-upload-tip {
+  color: #888;
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+.basic-phone-settings {
+  margin: 16px 0;
+  background: #f7f8fa;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+  margin-bottom: 12px;
+}
+.basic-wechat-group {
+  margin: 16px 0;
+}
+.basic-footer-switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16px 0;
+}