From bd833828be903b047de946fad4f67e6d4f38816b 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 18:33:53 +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=9C=BA=E6=99=AF=E8=AE=A1=E5=88=92-=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE-=E5=8D=A1=E7=89=87=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=A4=84=E7=90=86=E4=B8=80=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plan/new/steps/FriendRequestSettings.tsx  | 288 ++++++++----------
 .../plan/new/steps/MessageSettings.tsx        |  75 +++--
 .../plan/new/steps/friend.module.scss         |  48 +++
 .../plan/new/steps/messages.module.scss       |  60 ++++
 4 files changed, 276 insertions(+), 195 deletions(-)
 create mode 100644 nkebao/src/pages/scenarios/plan/new/steps/friend.module.scss
 create mode 100644 nkebao/src/pages/scenarios/plan/new/steps/messages.module.scss

diff --git a/nkebao/src/pages/scenarios/plan/new/steps/FriendRequestSettings.tsx b/nkebao/src/pages/scenarios/plan/new/steps/FriendRequestSettings.tsx
index 16e458d2e..1c7b11e8a 100644
--- a/nkebao/src/pages/scenarios/plan/new/steps/FriendRequestSettings.tsx
+++ b/nkebao/src/pages/scenarios/plan/new/steps/FriendRequestSettings.tsx
@@ -1,19 +1,10 @@
 "use client";
 
 import React, { useState, useEffect } from "react";
-import {
-  Form,
-  Input,
-  Button,
-  Checkbox,
-  Modal,
-  Alert,
-  Select,
-  message,
-} from "antd";
-import { QuestionCircleOutlined, MessageOutlined } from "@ant-design/icons";
+import { Input, Button, Modal, Alert, Select } from "antd";
+import { MessageOutlined } from "@ant-design/icons";
 import DeviceSelection from "@/components/DeviceSelection";
-import Layout from "@/components/Layout/Layout";
+import styles from "./friend.module.scss";
 
 interface FriendRequestSettingsProps {
   formData: any;
@@ -46,8 +37,8 @@ const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({
 }) => {
   const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
   const [hasWarnings, setHasWarnings] = useState(false);
-  const [selectedDevices, setSelectedDevices] = useState<any[]>(
-    formData.selectedDevices || []
+  const [selectedDevices, setSelectedDevices] = useState<string[]>(
+    formData.device || []
   );
   const [showRemarkTip, setShowRemarkTip] = useState(false);
 
@@ -97,171 +88,156 @@ const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({
   };
 
   return (
-    <>
-      <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 className={styles["friend-container"]}>
+      {/* 选择设备区块 */}
+      <div className={styles["friend-label"]}>选择设备</div>
+      <div className={styles["friend-block"]}>
+        <DeviceSelection
+          selectedDevices={selectedDevices}
+          onSelect={(deviceIds) => {
+            setSelectedDevices(deviceIds);
+            onChange({ ...formData, device: deviceIds });
+          }}
+          placeholder="选择设备"
+        />
+      </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>
-                </div>
-              )}
+      {/* 好友备注区块 */}
+      <div className={styles["friend-label"]}>好友备注</div>
+      <div className={styles["friend-block"]} style={{ position: "relative" }}>
+        <Select
+          value={formData.remarkType || "phone"}
+          onChange={(value) => onChange({ ...formData, remarkType: value })}
+          style={{ width: "100%" }}
+        >
+          {remarkTypes.map((type) => (
+            <Select.Option key={type.value} value={type.value}>
+              {type.label}
+            </Select.Option>
+          ))}
+        </Select>
+        <span
+          className={styles["friend-remark-q"]}
+          onMouseEnter={() => setShowRemarkTip(true)}
+          onMouseLeave={() => setShowRemarkTip(false)}
+        >
+          ?
+        </span>
+        {showRemarkTip && (
+          <div className={styles["friend-remark-tip"]}>
+            <div>设置添加好友时的备注格式</div>
+            <div style={{ marginTop: 8, color: "#888", fontSize: 12 }}>
+              备注格式预览：
             </div>
-            <Select
-              value={formData.remarkType || "phone"}
-              onChange={(value) => onChange({ ...formData, remarkType: value })}
-              className="w-full mt-2"
+            <div style={{ marginTop: 4, color: "#1677ff" }}>
+              {formData.remarkType === "phone" &&
+                `138****1234+${getScenarioTitle()}`}
+              {formData.remarkType === "nickname" &&
+                `小红书用户2851+${getScenarioTitle()}`}
+              {formData.remarkType === "source" &&
+                `抖音直播+${getScenarioTitle()}`}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* 招呼语区块 */}
+      <div className={styles["friend-label"]}>招呼语</div>
+      <div className={styles["friend-block"]}>
+        <Input
+          value={formData.greeting}
+          onChange={(e) => onChange({ ...formData, greeting: e.target.value })}
+          placeholder="请输入招呼语"
+          suffix={
+            <Button
+              type="link"
+              onClick={() => setIsTemplateDialogOpen(true)}
+              style={{ padding: 0 }}
             >
-              {remarkTypes.map((type) => (
-                <Select.Option key={type.value} value={type.value}>
-                  {type.label}
-                </Select.Option>
-              ))}
-            </Select>
-          </div>
+              <MessageOutlined /> 参考模板
+            </Button>
+          }
+        />
+      </div>
 
-          <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
-              value={formData.greeting}
-              onChange={(e) =>
-                onChange({ ...formData, greeting: e.target.value })
-              }
-              placeholder="请输入招呼语"
-              className="mt-2"
-            />
-          </div>
+      {/* 添加间隔区块 */}
+      <div className={styles["friend-label"]}>添加间隔</div>
+      <div
+        className={styles["friend-interval-row"] + " " + styles["friend-block"]}
+      >
+        <Input
+          type="number"
+          value={formData.addFriendInterval || 1}
+          onChange={(e) =>
+            onChange({
+              ...formData,
+              addFriendInterval: Number(e.target.value),
+            })
+          }
+          style={{ width: 100 }}
+        />
+        <span>分钟</span>
+      </div>
 
-          <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={styles["friend-label"]}>允许加人的时间段</div>
+      <div className={styles["friend-time-row"] + " " + styles["friend-block"]}>
+        <Input
+          type="time"
+          value={formData.addFriendTimeStart || "09:00"}
+          onChange={(e) =>
+            onChange({ ...formData, addFriendTimeStart: e.target.value })
+          }
+          style={{ width: 120 }}
+        />
+        <span>至</span>
+        <Input
+          type="time"
+          value={formData.addFriendTimeEnd || "18:00"}
+          onChange={(e) =>
+            onChange({ ...formData, addFriendTimeEnd: e.target.value })
+          }
+          style={{ width: 120 }}
+        />
+      </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"
-              />
-            </div>
-          </div>
+      {hasWarnings && (
+        <Alert
+          message="警告"
+          description="您有未完成的设置项，建议完善后再进入下一步。"
+          type="warning"
+          showIcon
+          style={{ marginBottom: 16 }}
+        />
+      )}
 
-          {hasWarnings && (
-            <Alert
-              message="警告"
-              description="您有未完成的设置项，建议完善后再进入下一步。"
-              type="warning"
-              showIcon
-              className="bg-amber-50 border-amber-200"
-            />
-          )}
-        </div>
-      </Layout>
+      {/* 底部按钮 */}
+      <div className={styles["friend-footer"]}>
+        <Button onClick={onPrev}>上一步</Button>
+        <Button type="primary" onClick={handleNext}>
+          下一步
+        </Button>
+      </div>
 
+      {/* 招呼语模板弹窗 */}
       <Modal
         open={isTemplateDialogOpen}
         onCancel={() => setIsTemplateDialogOpen(false)}
         footer={null}
       >
-        <div className="space-y-2">
+        <div>
           {greetingTemplates.map((template, index) => (
             <Button
               key={index}
               onClick={() => handleTemplateSelect(template)}
-              style={{ width: "100%", marginBottom: 8 }}
+              className={styles["friend-modal-btn"]}
             >
               {template}
             </Button>
           ))}
         </div>
       </Modal>
-    </>
+    </div>
   );
 };
 
diff --git a/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx b/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx
index a3a34c24b..9d2c795a0 100644
--- a/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx
+++ b/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Form, Input, Button, Tabs, Modal, Alert, Upload, message } from "antd";
+import { Input, Button, Tabs, Modal, Alert, message } from "antd";
 import {
   PlusOutlined,
   CloseOutlined,
@@ -13,7 +13,7 @@ import {
   LinkOutlined,
   TeamOutlined,
 } from "@ant-design/icons";
-import Layout from "@/components/Layout/Layout";
+import styles from "./messages.module.scss";
 
 interface MessageContent {
   id: string;
@@ -194,9 +194,9 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
     key: plan.day.toString(),
     label: plan.day === 0 ? "即时消息" : `第${plan.day}天`,
     children: (
-      <div className="space-y-4">
+      <div className={styles["messages-day-panel"]}>
         {plan.messages.map((message, messageIndex) => (
-          <div key={message.id} className="space-y-4 p-4 bg-gray-50 rounded-lg">
+          <div key={message.id} className={styles["messages-message-card"]}>
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-2">
                 {plan.day === 0 ? (
@@ -524,7 +524,10 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
           </div>
         ))}
 
-        <Button onClick={() => handleAddMessage(dayIndex)} className="w-full">
+        <Button
+          onClick={() => handleAddMessage(dayIndex)}
+          className={styles["messages-add-message-btn"]}
+        >
           <PlusOutlined className="w-4 h-4 mr-2" />
           添加消息
         </Button>
@@ -533,31 +536,24 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
   }));
 
   return (
-    <>
-      <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>
-      </Layout>
-
+    <div className={styles["messages-container"]}>
+      <div className={styles["messages-header"]}>
+        <h2 className={styles["messages-title"]}>消息设置</h2>
+        <Button onClick={() => setIsAddDayPlanOpen(true)}>
+          <PlusOutlined />
+        </Button>
+      </div>
+      <Tabs
+        defaultActiveKey="0"
+        items={items}
+        className={styles["messages-tab"]}
+      />
+      <div className={styles["messages-footer"]}>
+        <Button onClick={onPrev}>上一步</Button>
+        <Button type="primary" onClick={onNext}>
+          下一步
+        </Button>
+      </div>
       {/* 添加天数计划弹窗 */}
       <Modal
         title="添加消息计划"
@@ -569,11 +565,13 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
         }}
       >
         <p className="text-sm text-gray-500 mb-4">选择要添加的消息计划类型</p>
-        <Button onClick={handleAddDayPlan} className="w-full">
+        <Button
+          onClick={handleAddDayPlan}
+          className={styles["messages-modal-btn"]}
+        >
           添加第 {dayPlans.length} 天计划
         </Button>
       </Modal>
-
       {/* 选择群聊弹窗 */}
       <Modal
         title="选择群聊"
@@ -584,15 +582,14 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
           setIsGroupSelectOpen(false);
         }}
       >
-        <div className="space-y-2">
+        <div>
           {mockGroups.map((group) => (
             <div
               key={group.id}
-              className={`p-4 rounded-lg cursor-pointer hover:bg-gray-100 ${
-                selectedGroupId === group.id
-                  ? "bg-blue-50 border border-blue-200"
-                  : ""
-              }`}
+              className={
+                styles["messages-group-select-item"] +
+                (selectedGroupId === group.id ? " " + styles.selected : "")
+              }
               onClick={() => handleSelectGroup(group.id)}
             >
               <div className="font-medium">{group.name}</div>
@@ -603,7 +600,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
           ))}
         </div>
       </Modal>
-    </>
+    </div>
   );
 };
 
diff --git a/nkebao/src/pages/scenarios/plan/new/steps/friend.module.scss b/nkebao/src/pages/scenarios/plan/new/steps/friend.module.scss
new file mode 100644
index 000000000..0c0f11386
--- /dev/null
+++ b/nkebao/src/pages/scenarios/plan/new/steps/friend.module.scss
@@ -0,0 +1,48 @@
+.friend-container {
+  padding: 12px;
+}
+.friend-label {
+  margin-bottom: 12px;
+  font-weight: 500;
+}
+.friend-block {
+  margin-bottom: 16px;
+}
+.friend-remark-tip {
+  position: absolute;
+  right: 0;
+  top: 36px;
+  z-index: 10;
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 6px;
+  padding: 12px;
+  width: 220px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+.friend-remark-q {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  cursor: pointer;
+  color: #888;
+}
+.friend-interval-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.friend-time-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.friend-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 32px;
+}
+.friend-modal-btn {
+  width: 100%;
+  margin-bottom: 8px;
+}
diff --git a/nkebao/src/pages/scenarios/plan/new/steps/messages.module.scss b/nkebao/src/pages/scenarios/plan/new/steps/messages.module.scss
new file mode 100644
index 000000000..37ff9a1db
--- /dev/null
+++ b/nkebao/src/pages/scenarios/plan/new/steps/messages.module.scss
@@ -0,0 +1,60 @@
+.messages-container {
+  padding: 16px;
+}
+.messages-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.messages-title {
+  font-size: 18px;
+  font-weight: 600;
+}
+.messages-tab {
+  margin-bottom: 16px;
+}
+.messages-day-panel {
+  background: #fafbfc;
+  border-radius: 10px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+.messages-message-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
+  padding: 16px;
+  margin-bottom: 16px;
+}
+.messages-message-type-btns {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.messages-add-message-btn {
+  width: 100%;
+  margin-top: 8px;
+}
+.messages-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 32px;
+}
+.messages-modal-btn {
+  width: 100%;
+  margin-bottom: 8px;
+}
+.messages-group-select-item {
+  padding: 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  background: #fff;
+  margin-bottom: 8px;
+  border: 1px solid #eee;
+  transition: border 0.2s, background 0.2s;
+}
+.messages-group-select-item.selected {
+  background: #e6f7ff;
+  border: 1.5px solid #1677ff;
+}