From 2081e6fa6b68bb28f8f0bd4781152798dcd4820f 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 19:32:22 +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=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../plan/new/steps/MessageSettings.tsx        | 298 +++++++++---------
 .../plan/new/steps/messages.module.scss       |  55 +++-
 2 files changed, 190 insertions(+), 163 deletions(-)

diff --git a/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx b/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx
index 9d2c795a..d344f898 100644
--- a/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx
+++ b/nkebao/src/pages/scenarios/plan/new/steps/MessageSettings.tsx
@@ -197,46 +197,46 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
       <div className={styles["messages-day-panel"]}>
         {plan.messages.map((message, messageIndex) => (
           <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 ? (
-                  <>
-                    <div className="w-10">间隔</div>
-                    <div className="w-40">
+            <div className={styles["messages-message-header"]}>
+              {/* 时间/间隔设置 */}
+              <div className={styles["messages-message-header-content"]}>
+                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  {plan.day === 0 ? (
+                    <>
+                      <span style={{ minWidth: 36 }}>间隔</span>
                       <Input
                         type="number"
-                        value={String(message.sendInterval)}
+                        value={String(message.sendInterval || 5)}
                         onChange={(e) =>
                           handleUpdateMessage(dayIndex, messageIndex, {
                             sendInterval: Number(e.target.value),
                           })
                         }
+                        style={{ width: 60 }}
                       />
-                    </div>
-                    <Button
-                      onClick={() => toggleIntervalUnit(dayIndex, messageIndex)}
-                      className="flex items-center space-x-1"
-                    >
-                      <ClockCircleOutlined className="h-3 w-3" />
-                      <span>
+                      <Button
+                        size="small"
+                        onClick={() =>
+                          toggleIntervalUnit(dayIndex, messageIndex)
+                        }
+                      >
+                        <ClockCircleOutlined />
                         {message.intervalUnit === "minutes" ? "分钟" : "秒"}
-                      </span>
-                    </Button>
-                  </>
-                ) : (
-                  <>
-                    <div className="font-medium">发送时间</div>
-                    <div className="flex items-center space-x-1">
+                      </Button>
+                    </>
+                  ) : (
+                    <>
+                      <span style={{ minWidth: 60 }}>发送时间</span>
                       <Input
                         type="number"
                         min={0}
                         max={23}
-                        value={String(message.scheduledTime?.hour || 0)}
+                        value={String(message.scheduledTime?.hour || 9)}
                         onChange={(e) =>
                           handleUpdateMessage(dayIndex, messageIndex, {
                             scheduledTime: {
                               ...(message.scheduledTime || {
-                                hour: 0,
+                                hour: 9,
                                 minute: 0,
                                 second: 0,
                               }),
@@ -244,7 +244,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                             },
                           })
                         }
-                        className="w-16"
+                        style={{ width: 40 }}
                       />
                       <span>:</span>
                       <Input
@@ -256,7 +256,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                           handleUpdateMessage(dayIndex, messageIndex, {
                             scheduledTime: {
                               ...(message.scheduledTime || {
-                                hour: 0,
+                                hour: 9,
                                 minute: 0,
                                 second: 0,
                               }),
@@ -264,7 +264,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                             },
                           })
                         }
-                        className="w-16"
+                        style={{ width: 40 }}
                       />
                       <span>:</span>
                       <Input
@@ -276,7 +276,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                           handleUpdateMessage(dayIndex, messageIndex, {
                             scheduledTime: {
                               ...(message.scheduledTime || {
-                                hour: 0,
+                                hour: 9,
                                 minute: 0,
                                 second: 0,
                               }),
@@ -284,55 +284,54 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                             },
                           })
                         }
-                        className="w-16"
+                        style={{ width: 40 }}
                       />
-                    </div>
-                  </>
-                )}
+                    </>
+                  )}
+                </div>
+                <button
+                  className={styles["messages-message-remove-btn"]}
+                  onClick={() => handleRemoveMessage(dayIndex, messageIndex)}
+                  title="删除"
+                >
+                  <CloseOutlined />
+                </button>
+              </div>
+              {/* 类型切换按钮 */}
+              <div className={styles["messages-message-type-btns"]}>
+                {messageTypes.map((type) => (
+                  <Button
+                    key={type.id}
+                    type={message.type === type.id ? "primary" : "default"}
+                    onClick={() =>
+                      handleUpdateMessage(dayIndex, messageIndex, {
+                        type: type.id as any,
+                      })
+                    }
+                    className={styles["messages-message-type-btn"]}
+                  >
+                    <type.icon />
+                  </Button>
+                ))}
               </div>
-              <Button
-                onClick={() => handleRemoveMessage(dayIndex, messageIndex)}
-              >
-                <CloseOutlined className="h-4 w-4" />
-              </Button>
             </div>
-
-            <div className="flex items-center space-x-2 bg-white p-2 rounded-lg">
-              {messageTypes.map((type) => (
-                <Button
-                  key={type.id}
-                  type={message.type === type.id ? "primary" : "default"}
-                  onClick={() =>
+            <div className={styles["messages-message-content"]}>
+              {/* 文本消息 */}
+              {message.type === "text" && (
+                <Input.TextArea
+                  value={message.content}
+                  onChange={(e) =>
                     handleUpdateMessage(dayIndex, messageIndex, {
-                      type: type.id as any,
+                      content: e.target.value,
                     })
                   }
-                  className="flex flex-col items-center p-2 h-auto"
-                >
-                  <type.icon className="h-4 w-4" />
-                </Button>
-              ))}
-            </div>
-
-            {message.type === "text" && (
-              <Input.TextArea
-                value={message.content}
-                onChange={(e) =>
-                  handleUpdateMessage(dayIndex, messageIndex, {
-                    content: e.target.value,
-                  })
-                }
-                placeholder="请输入消息内容"
-                className="min-h-[100px]"
-              />
-            )}
-
-            {message.type === "miniprogram" && (
-              <div className="space-y-4">
-                <div className="space-y-2">
-                  <div className="font-medium">
-                    标题<span className="text-red-500">*</span>
-                  </div>
+                  placeholder="请输入消息内容"
+                  autoSize={{ minRows: 3, maxRows: 6 }}
+                />
+              )}
+              {/* 小程序消息 */}
+              {message.type === "miniprogram" && (
+                <>
                   <Input
                     value={message.title}
                     onChange={(e) =>
@@ -341,10 +340,8 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                       })
                     }
                     placeholder="请输入小程序标题"
+                    style={{ marginBottom: 8 }}
                   />
-                </div>
-                <div className="space-y-2">
-                  <div className="font-medium">描述</div>
                   <Input
                     value={message.description}
                     onChange={(e) =>
@@ -353,12 +350,8 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                       })
                     }
                     placeholder="请输入小程序描述"
+                    style={{ marginBottom: 8 }}
                   />
-                </div>
-                <div className="space-y-2">
-                  <div className="font-medium">
-                    链接<span className="text-red-500">*</span>
-                  </div>
                   <Input
                     value={message.address}
                     onChange={(e) =>
@@ -367,51 +360,49 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                       })
                     }
                     placeholder="请输入小程序路径"
+                    style={{ marginBottom: 8 }}
                   />
-                </div>
-                <div className="space-y-2">
-                  <div className="font-medium">
-                    封面<span className="text-red-500">*</span>
-                  </div>
-                  <div className="border-2 border-dashed rounded-lg p-4 text-center">
+                  <div style={{ marginBottom: 8 }}>
                     {message.coverImage ? (
-                      <div className="relative">
+                      <div
+                        style={{
+                          position: "relative",
+                          display: "inline-block",
+                        }}
+                      >
                         <img
-                          src={message.coverImage || "/placeholder.svg"}
+                          src={message.coverImage}
                           alt="封面"
-                          className="max-w-[200px] mx-auto rounded-lg"
+                          style={{ width: 120, borderRadius: 6 }}
                         />
                         <Button
+                          size="small"
                           onClick={() =>
                             handleUpdateMessage(dayIndex, messageIndex, {
                               coverImage: undefined,
                             })
                           }
+                          style={{ position: "absolute", top: 0, right: 0 }}
                         >
-                          <CloseOutlined className="h-4 w-4" />
+                          <CloseOutlined />
                         </Button>
                       </div>
                     ) : (
                       <Button
+                        icon={<UploadOutlined />}
                         onClick={() =>
                           handleFileUpload(dayIndex, messageIndex, "image")
                         }
                       >
-                        <UploadOutlined className="h-4 w-4 mr-2" />
                         上传封面
                       </Button>
                     )}
                   </div>
-                </div>
-              </div>
-            )}
-
-            {message.type === "link" && (
-              <div className="space-y-4">
-                <div className="space-y-2">
-                  <div className="font-medium">
-                    标题<span className="text-red-500">*</span>
-                  </div>
+                </>
+              )}
+              {/* 链接消息 */}
+              {message.type === "link" && (
+                <>
                   <Input
                     value={message.title}
                     onChange={(e) =>
@@ -420,10 +411,8 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                       })
                     }
                     placeholder="请输入链接标题"
+                    style={{ marginBottom: 8 }}
                   />
-                </div>
-                <div className="space-y-2">
-                  <div className="font-medium">描述</div>
                   <Input
                     value={message.description}
                     onChange={(e) =>
@@ -432,12 +421,8 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                       })
                     }
                     placeholder="请输入链接描述"
+                    style={{ marginBottom: 8 }}
                   />
-                </div>
-                <div className="space-y-2">
-                  <div className="font-medium">
-                    链接<span className="text-red-500">*</span>
-                  </div>
                   <Input
                     value={message.linkUrl}
                     onChange={(e) =>
@@ -446,84 +431,83 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                       })
                     }
                     placeholder="请输入链接地址"
+                    style={{ marginBottom: 8 }}
                   />
-                </div>
-                <div className="space-y-2">
-                  <div className="font-medium">
-                    封面<span className="text-red-500">*</span>
-                  </div>
-                  <div className="border-2 border-dashed rounded-lg p-4 text-center">
+                  <div style={{ marginBottom: 8 }}>
                     {message.coverImage ? (
-                      <div className="relative">
+                      <div
+                        style={{
+                          position: "relative",
+                          display: "inline-block",
+                        }}
+                      >
                         <img
-                          src={message.coverImage || "/placeholder.svg"}
+                          src={message.coverImage}
                           alt="封面"
-                          className="max-w-[200px] mx-auto rounded-lg"
+                          style={{ width: 120, borderRadius: 6 }}
                         />
                         <Button
+                          size="small"
                           onClick={() =>
                             handleUpdateMessage(dayIndex, messageIndex, {
                               coverImage: undefined,
                             })
                           }
+                          style={{ position: "absolute", top: 0, right: 0 }}
                         >
-                          <CloseOutlined className="h-4 w-4" />
+                          <CloseOutlined />
                         </Button>
                       </div>
                     ) : (
                       <Button
+                        icon={<UploadOutlined />}
                         onClick={() =>
                           handleFileUpload(dayIndex, messageIndex, "image")
                         }
                       >
-                        <UploadOutlined className="h-4 w-4 mr-2" />
                         上传封面
                       </Button>
                     )}
                   </div>
+                </>
+              )}
+              {/* 群邀请消息 */}
+              {message.type === "group" && (
+                <div style={{ marginBottom: 8 }}>
+                  <Button onClick={() => setIsGroupSelectOpen(true)}>
+                    {selectedGroupId
+                      ? mockGroups.find((g) => g.id === selectedGroupId)?.name
+                      : "选择邀请入的群"}
+                  </Button>
                 </div>
-              </div>
-            )}
-
-            {message.type === "group" && (
-              <div className="space-y-2">
-                <div className="font-medium">
-                  选择群聊<span className="text-red-500">*</span>
+              )}
+              {/* 图片/视频/文件消息 */}
+              {(message.type === "image" ||
+                message.type === "video" ||
+                message.type === "file") && (
+                <div style={{ marginBottom: 8 }}>
+                  <Button
+                    icon={<UploadOutlined />}
+                    onClick={() =>
+                      handleFileUpload(
+                        dayIndex,
+                        messageIndex,
+                        message.type as any
+                      )
+                    }
+                  >
+                    上传
+                    {message.type === "image"
+                      ? "图片"
+                      : message.type === "video"
+                        ? "视频"
+                        : "文件"}
+                  </Button>
                 </div>
-                <Button onClick={() => setIsGroupSelectOpen(true)}>
-                  {selectedGroupId
-                    ? mockGroups.find((g) => g.id === selectedGroupId)?.name
-                    : "选择邀请入的群"}
-                </Button>
-              </div>
-            )}
-
-            {(message.type === "image" ||
-              message.type === "video" ||
-              message.type === "file") && (
-              <div className="border-2 border-dashed rounded-lg p-4 text-center">
-                <Button
-                  onClick={() =>
-                    handleFileUpload(
-                      dayIndex,
-                      messageIndex,
-                      message.type as any
-                    )
-                  }
-                >
-                  <UploadOutlined className="h-4 w-4 mr-2" />
-                  上传
-                  {message.type === "image"
-                    ? "图片"
-                    : message.type === "video"
-                      ? "视频"
-                      : "文件"}
-                </Button>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         ))}
-
         <Button
           onClick={() => handleAddMessage(dayIndex)}
           className={styles["messages-add-message-btn"]}
diff --git a/nkebao/src/pages/scenarios/plan/new/steps/messages.module.scss b/nkebao/src/pages/scenarios/plan/new/steps/messages.module.scss
index 37ff9a1d..5dc19e7f 100644
--- a/nkebao/src/pages/scenarios/plan/new/steps/messages.module.scss
+++ b/nkebao/src/pages/scenarios/plan/new/steps/messages.module.scss
@@ -17,21 +17,64 @@
 .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;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(22, 119, 255, 0.06), 0 1.5px 4px rgba(0,0,0,0.04);
+  padding: 20px 12px 16px 12px;
+  margin-bottom: 20px;
+  border: 1.5px solid #f0f3fa;
+  transition: box-shadow 0.2s, border 0.2s, transform 0.2s;
+  position: relative;
+}
+.messages-message-card:hover {
+  box-shadow: 0 8px 24px rgba(22, 119, 255, 0.12), 0 2px 8px rgba(0,0,0,0.08);
+  border: 1.5px solid #1677ff;
+  transform: translateY(-2px) scale(1.01);
+}
+.messages-message-header {
+ 
+}
+.messages-message-header-content{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
 }
 .messages-message-type-btns {
   display: flex;
-  gap: 8px;
+  gap: 5px;
   margin-bottom: 8px;
 }
+.messages-message-type-btn{
+    width: 20px;
+}
+.messages-message-content {
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: #222;
+  line-height: 1.7;
+}
+.messages-message-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+}
+.messages-message-remove-btn {
+  color: #ff4d4f;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 0 8px;
+  transition: color 0.2s;
+}
+.messages-message-remove-btn:hover {
+  color: #d9363e;
+}
 .messages-add-message-btn {
   width: 100%;
   margin-top: 8px;