FEAT => 本次更新项目为：

上传封面主图构建完成
2025-08-04 16:03:39 +08:00
parent a4be3d534f
commit 2ef2aff18f
6 changed files with 95 additions and 333 deletions
--- a/nkebao/src/components/Upload/MainImgUpload/index.module.scss
+++ b/nkebao/src/components/Upload/MainImgUpload/index.module.scss
@@ -1,7 +1,5 @@
 .mainImgUploadContainer {
  width: 100%;
-  display: flex;
-  flex-direction: column;

  // 覆盖 antd Upload 组件的默认样式
  :global {
@@ -25,8 +23,7 @@
  .mainImgUploadButton {
    width: 100%;
    aspect-ratio: 16 / 9;
-    min-height: 180px;
-    min-width: 320px;
+    min-height: clamp(90px, 20vw, 180px);
    border: 2px dashed #d9d9d9;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
@@ -37,7 +34,6 @@
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
-    flex: 1;

    &:hover {
      border-color: #1890ff;
@@ -59,13 +55,13 @@
      padding: 20px;

      .uploadingIcon {
-        font-size: 32px;
+        font-size: clamp(24px, 4vw, 32px);
        color: #1890ff;
        animation: pulse 2s infinite;
      }

      .uploadingText {
-        font-size: 14px;
+        font-size: clamp(11px, 2vw, 14px);
        color: #666;
        font-weight: 500;
      }
@@ -80,21 +76,21 @@
      text-align: center;

      .uploadIcon {
-        font-size: 48px;
+        font-size: clamp(50px, 6vw, 48px);
        color: #1890ff;
        transition: all 0.3s ease;
      }

      .uploadText {
        .uploadTitle {
-          font-size: 16px;
+          font-size: clamp(14px, 2.5vw, 16px);
          font-weight: 600;
          color: #333;
          margin-bottom: 4px;
        }

        .uploadSubtitle {
-          font-size: 12px;
+          font-size: clamp(10px, 1.5vw, 14px);
          color: #666;
          line-height: 1.4;
        }
@@ -127,15 +123,15 @@
      gap: 12px;

      .mainImgIcon {
-        width: 40px;
-        height: 40px;
+        width: clamp(28px, 5vw, 40px);
+        height: clamp(28px, 5vw, 40px);
        background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
-        font-size: 18px;
+        font-size: clamp(14px, 2.5vw, 18px);
        flex-shrink: 0;
      }

@@ -144,7 +140,7 @@
        min-width: 0;

        .mainImgName {
-          font-size: 14px;
+          font-size: clamp(11px, 2vw, 14px);
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
@@ -154,7 +150,7 @@
        }

        .mainImgSize {
-          font-size: 12px;
+          font-size: clamp(10px, 1.5vw, 12px);
          color: #666;
        }
      }
@@ -199,7 +195,7 @@
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
-      min-height: 180px;
+      min-height: clamp(90px, 20vw, 180px);
      border-radius: 8px;
      overflow: hidden;
      background: #f5f5f5;
@@ -293,266 +289,3 @@
    transform: scale(1);
  }
 }
-
-// 响应式设计
-@media (max-width: 768px) {
-  .mainImgUploadContainer {
-    .mainImgUploadButton {
-      aspect-ratio: 16 / 9;
-      min-height: 135px;
-      min-width: 240px;
-
-      .uploadContent {
-        padding: 16px;
-
-        .uploadIcon {
-          font-size: 36px;
-        }
-
-        .uploadText {
-          .uploadTitle {
-            font-size: 14px;
-          }
-
-          .uploadSubtitle {
-            font-size: 11px;
-          }
-        }
-      }
-
-      .uploadingContainer {
-        padding: 16px;
-
-        .uploadingIcon {
-          font-size: 28px;
-        }
-
-        .uploadingText {
-          font-size: 12px;
-        }
-      }
-    }
-
-    .mainImgItem {
-      .mainImgItemContent {
-        padding: 8px;
-
-        .mainImgIcon {
-          width: 32px;
-          height: 32px;
-          font-size: 16px;
-        }
-
-        .mainImgInfo {
-          .mainImgName {
-            font-size: 12px;
-          }
-
-          .mainImgSize {
-            font-size: 11px;
-          }
-        }
-
-        .mainImgActions {
-          .previewBtn,
-          .deleteBtn {
-            padding: 3px 6px;
-            font-size: 12px;
-          }
-        }
-      }
-
-      .mainImgPreview {
-        aspect-ratio: 16 / 9;
-        min-height: 135px;
-
-        .mainImgOverlay {
-          .mainImgActions {
-            .previewBtn,
-            .deleteBtn {
-              width: 28px;
-              height: 28px;
-
-              .anticon {
-                font-size: 12px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 480px) {
-  .mainImgUploadContainer {
-    .mainImgUploadButton {
-      aspect-ratio: 16 / 9;
-      min-height: 90px;
-      min-width: 160px;
-
-      .uploadContent {
-        padding: 12px;
-        gap: 8px;
-
-        .uploadIcon {
-          font-size: 28px;
-        }
-
-        .uploadText {
-          .uploadTitle {
-            font-size: 12px;
-          }
-
-          .uploadSubtitle {
-            font-size: 10px;
-          }
-        }
-      }
-
-      .uploadingContainer {
-        padding: 12px;
-        gap: 8px;
-
-        .uploadingIcon {
-          font-size: 24px;
-        }
-
-        .uploadingText {
-          font-size: 11px;
-        }
-      }
-    }
-
-    .mainImgItem {
-      .mainImgItemContent {
-        padding: 6px;
-        gap: 8px;
-
-        .mainImgIcon {
-          width: 28px;
-          height: 28px;
-          font-size: 14px;
-        }
-
-        .mainImgInfo {
-          .mainImgName {
-            font-size: 11px;
-          }
-
-          .mainImgSize {
-            font-size: 10px;
-          }
-        }
-
-        .mainImgActions {
-          .previewBtn,
-          .deleteBtn {
-            padding: 2px 4px;
-            font-size: 11px;
-          }
-        }
-      }
-
-      .mainImgPreview {
-        aspect-ratio: 16 / 9;
-        min-height: 90px;
-
-        .mainImgOverlay {
-          .mainImgActions {
-            .previewBtn,
-            .deleteBtn {
-              width: 24px;
-              height: 24px;
-
-              .anticon {
-                font-size: 11px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// 暗色主题支持
-@media (prefers-color-scheme: dark) {
-  .mainImgUploadContainer {
-    .mainImgUploadButton {
-      background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
-      border-color: #434343;
-
-      &:hover {
-        background: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
-        border-color: #40a9ff;
-      }
-
-      .uploadingContainer {
-        .uploadingText {
-          color: #ccc;
-        }
-      }
-
-      .uploadContent {
-        .uploadText {
-          .uploadTitle {
-            color: #fff;
-          }
-
-          .uploadSubtitle {
-            color: #ccc;
-          }
-        }
-      }
-    }
-
-    .mainImgItem {
-      background: #2a2a2a;
-      border-color: #434343;
-
-      &:hover {
-        border-color: #40a9ff;
-      }
-
-      .mainImgItemContent {
-        .mainImgInfo {
-          .mainImgName {
-            color: #fff;
-          }
-
-          .mainImgSize {
-            color: #ccc;
-          }
-        }
-
-        .mainImgActions {
-          .previewBtn,
-          .deleteBtn {
-            &:hover {
-              background: #434343;
-            }
-          }
-        }
-      }
-
-      .mainImgPreview {
-        background: #1f1f1f;
-
-        .mainImgOverlay {
-          .mainImgActions {
-            .previewBtn,
-            .deleteBtn {
-              background: rgba(255, 255, 255, 0.1);
-              color: #ccc;
-
-              &:hover {
-                background: rgba(255, 255, 255, 0.2);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
--- a/nkebao/src/pages/mobile/scenarios/plan/new/index.tsx
+++ b/nkebao/src/pages/mobile/scenarios/plan/new/index.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { message } from "antd";
+import { message, Button, Space } from "antd";
+import { ArrowLeftOutlined, ArrowRightOutlined } from "@ant-design/icons";
 import NavCommon from "@/components/NavCommon";
 import BasicSettings from "./steps/BasicSettings";
 import FriendRequestSettings from "./steps/FriendRequestSettings";
@@ -174,34 +175,42 @@ export default function NewPlan() {
            isEdit={isEdit}
            formData={formData}
            onChange={onChange}
-            onNext={handleNext}
            sceneList={sceneList}
            sceneLoading={sceneLoading}
          />
        );
      case 2:
        return (
-          <FriendRequestSettings
-            formData={formData}
-            onChange={onChange}
-            onNext={handleNext}
-            onPrev={handlePrev}
-          />
+          <FriendRequestSettings formData={formData} onChange={onChange} />
        );
      case 3:
-        return (
-          <MessageSettings
-            formData={formData}
-            onChange={onChange}
-            onNext={handleSave}
-            onPrev={handlePrev}
-          />
-        );
+        return <MessageSettings formData={formData} onChange={onChange} />;
      default:
        return null;
    }
  };

+  // 渲染底部按钮
+  const renderFooterButtons = () => {
+    return (
+      <div style={{ padding: "16px", display: "flex", gap: "12px" }}>
+        {currentStep > 1 && (
+          <Button onClick={handlePrev} size="large" style={{ flex: 1 }}>
+            上一步
+          </Button>
+        )}
+        <Button
+          type="primary"
+          size="large"
+          onClick={handleNext}
+          style={{ flex: 1 }}
+        >
+          {currentStep === steps.length ? "完成" : "下一步"}
+        </Button>
+      </div>
+    );
+  };
+
  return (
    <Layout
      header={
@@ -210,6 +219,7 @@ export default function NewPlan() {
          <StepIndicator currentStep={currentStep} steps={steps} />
        </>
      }
+      footer={renderFooterButtons()}
    >
      {renderStepContent()}
    </Layout>
--- a/nkebao/src/pages/mobile/scenarios/plan/new/steps/BasicSettings.tsx
+++ b/nkebao/src/pages/mobile/scenarios/plan/new/steps/BasicSettings.tsx
@@ -16,7 +16,6 @@ interface BasicSettingsProps {
  isEdit: boolean;
  formData: any;
  onChange: (data: any) => void;
-  onNext?: () => void;
  sceneList: any[];
  sceneLoading: boolean;
 }
@@ -94,7 +93,6 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
  isEdit,
  formData,
  onChange,
-  onNext,
  sceneList,
  sceneLoading,
 }) => {
@@ -759,12 +757,6 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
          onChange={value => onChange({ ...formData, enabled: value })}
        />
      </div>
-
-      <div className={styles["basic-footer-switch"]}>
-        <ButtonMobile block color="primary" onClick={onNext}>
-          下一步
-        </ButtonMobile>
-      </div>
    </div>
  );
 };
--- a/nkebao/src/pages/mobile/scenarios/plan/new/steps/FriendRequestSettings.tsx
+++ b/nkebao/src/pages/mobile/scenarios/plan/new/steps/FriendRequestSettings.tsx
@@ -9,8 +9,6 @@ import styles from "./friend.module.scss";
 interface FriendRequestSettingsProps {
  formData: any;
  onChange: (data: any) => void;
-  onNext: () => void;
-  onPrev: () => void;
 }

 // 招呼语模板
@@ -32,8 +30,6 @@ const remarkTypes = [
 const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({
  formData,
  onChange,
-  onNext,
-  onPrev,
 }) => {
  const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
  const [hasWarnings, setHasWarnings] = useState(false);
@@ -82,11 +78,6 @@ const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({
    setIsTemplateDialogOpen(false);
  };

-  const handleNext = () => {
-    // 即使有警告也允许进入下一步，但会显示提示
-    onNext();
-  };
-
  return (
    <div className={styles["friend-container"]}>
      {/* 选择设备区块 */}
@@ -211,14 +202,6 @@ const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({
        />
      )}

-      {/* 底部按钮 */}
-      <div className={styles["friend-footer"]}>
-        <Button onClick={onPrev}>上一步</Button>
-        <Button type="primary" onClick={handleNext}>
-          下一步
-        </Button>
-      </div>
-
      {/* 招呼语模板弹窗 */}
      <Modal
        open={isTemplateDialogOpen}
--- a/nkebao/src/pages/mobile/scenarios/plan/new/steps/MessageSettings.tsx
+++ b/nkebao/src/pages/mobile/scenarios/plan/new/steps/MessageSettings.tsx
@@ -48,8 +48,6 @@ interface DayPlan {
 interface MessageSettingsProps {
  formData: any;
  onChange: (data: any) => void;
-  onNext: () => void;
-  onPrev: () => void;
 }

 // 消息类型配置
@@ -66,8 +64,6 @@ const messageTypes = [
 const MessageSettings: React.FC<MessageSettingsProps> = ({
  formData,
  onChange,
-  onNext,
-  onPrev,
 }) => {
  const [dayPlans, setDayPlans] = useState<DayPlan[]>([
    {
@@ -165,9 +161,61 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
    message.success(`已添加第${newDay}天的消息计划`);
  };

+  // 删除天数计划
+  const handleRemoveDayPlan = (dayIndex: number) => {
+    if (dayIndex === 0) {
+      message.warning("不能删除即时消息");
+      return;
+    }
+
+    Modal.confirm({
+      title: "确认删除",
+      content: `确定要删除第${dayPlans[dayIndex].day}天的消息计划吗？`,
+      onOk: () => {
+        const updatedPlans = dayPlans.filter((_, index) => index !== dayIndex);
+        // 重新计算天数
+        const recalculatedPlans = updatedPlans.map((plan, index) => ({
+          ...plan,
+          day: index,
+        }));
+        setDayPlans(recalculatedPlans);
+        onChange({ ...formData, messagePlans: recalculatedPlans });
+        message.success(`已删除第${dayPlans[dayIndex].day}天的消息计划`);
+      },
+    });
+  };
+
  const items = dayPlans.map((plan, dayIndex) => ({
    key: plan.day.toString(),
-    label: plan.day === 0 ? "即时消息" : `第${plan.day}天`,
+    label: (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "2px",
+        }}
+      >
+        <span>{plan.day === 0 ? "即时消息" : `第${plan.day}天`}</span>
+        {dayIndex > 0 && (
+          <Button
+            type="text"
+            size="small"
+            icon={<CloseOutlined />}
+            onClick={e => {
+              e.stopPropagation();
+              handleRemoveDayPlan(dayIndex);
+            }}
+            style={{
+              padding: "0 4px",
+              minWidth: "auto",
+              color: "#ff4d4f",
+              fontSize: "12px",
+            }}
+            title="删除此天计划"
+          />
+        )}
+      </div>
+    ),
    children: (
      <div className={styles["messages-day-panel"]}>
        {plan.messages.map((message, messageIndex) => (
@@ -424,7 +472,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                        content: urls[0] || "",
                      })
                    }
-                    count={1}
+                    count={10}
                    accept="image/*"
                  />
                </div>
@@ -441,6 +489,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                      });
                    }}
                    maxSize={50}
+                    maxCount={5}
                    showPreview={true}
                  />
                </div>
@@ -457,6 +506,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
                      });
                    }}
                    maxSize={10}
+                    maxCount={10}
                    showPreview={true}
                    acceptTypes={["excel", "word", "ppt"]}
                  />
@@ -489,12 +539,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
        items={items}
        className={styles["messages-tab"]}
      />
-      <div className={styles["messages-footer"]}>
-        <Button onClick={onPrev}>上一步</Button>
-        <Button type="primary" onClick={onNext}>
-          下一步
-        </Button>
-      </div>
+
      {/* 添加天数计划弹窗 */}
      <Modal
        title="添加消息计划"
--- a/nkebao/src/pages/mobile/scenarios/plan/new/steps/messages.module.scss
+++ b/nkebao/src/pages/mobile/scenarios/plan/new/steps/messages.module.scss
@@ -15,7 +15,6 @@
  margin-bottom: 16px;
 }
 .messages-day-panel {
-  background: #fafbfc;
  border-radius: 10px;
  margin-bottom: 16px;
 }