diff --git a/nkebao/src/components/Upload/MainImgUpload/index.module.scss b/nkebao/src/components/Upload/MainImgUpload/index.module.scss index 7b6def67..8f4222c4 100644 --- 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); - } - } - } - } - } - } - } -} diff --git a/nkebao/src/pages/mobile/scenarios/plan/new/index.tsx b/nkebao/src/pages/mobile/scenarios/plan/new/index.tsx index f75c6cc7..89e2995b 100644 --- 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 ( - + ); case 3: - return ( - - ); + return ; default: return null; } }; + // 渲染底部按钮 + const renderFooterButtons = () => { + return ( +
+ {currentStep > 1 && ( + + )} + +
+ ); + }; + return ( } + footer={renderFooterButtons()} > {renderStepContent()} diff --git a/nkebao/src/pages/mobile/scenarios/plan/new/steps/BasicSettings.tsx b/nkebao/src/pages/mobile/scenarios/plan/new/steps/BasicSettings.tsx index eaec26ce..e88abbc3 100644 --- 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 = ({ isEdit, formData, onChange, - onNext, sceneList, sceneLoading, }) => { @@ -759,12 +757,6 @@ const BasicSettings: React.FC = ({ onChange={value => onChange({ ...formData, enabled: value })} /> - -
- - 下一步 - -
); }; diff --git a/nkebao/src/pages/mobile/scenarios/plan/new/steps/FriendRequestSettings.tsx b/nkebao/src/pages/mobile/scenarios/plan/new/steps/FriendRequestSettings.tsx index 01775fcc..a8bf86f4 100644 --- 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 = ({ formData, onChange, - onNext, - onPrev, }) => { const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false); const [hasWarnings, setHasWarnings] = useState(false); @@ -82,11 +78,6 @@ const FriendRequestSettings: React.FC = ({ setIsTemplateDialogOpen(false); }; - const handleNext = () => { - // 即使有警告也允许进入下一步，但会显示提示 - onNext(); - }; - return (
{/* 选择设备区块 */} @@ -211,14 +202,6 @@ const FriendRequestSettings: React.FC = ({ /> )} - {/* 底部按钮 */} -
- - -
- {/* 招呼语模板弹窗 */} void; - onNext: () => void; - onPrev: () => void; } // 消息类型配置 @@ -66,8 +64,6 @@ const messageTypes = [ const MessageSettings: React.FC = ({ formData, onChange, - onNext, - onPrev, }) => { const [dayPlans, setDayPlans] = useState([ { @@ -165,9 +161,61 @@ const MessageSettings: React.FC = ({ 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: ( +
+ {plan.day === 0 ? "即时消息" : `第${plan.day}天`} + {dayIndex > 0 && ( +
+ ), children: (
{plan.messages.map((message, messageIndex) => ( @@ -424,7 +472,7 @@ const MessageSettings: React.FC = ({ content: urls[0] || "", }) } - count={1} + count={10} accept="image/*" />
@@ -441,6 +489,7 @@ const MessageSettings: React.FC = ({ }); }} maxSize={50} + maxCount={5} showPreview={true} />
@@ -457,6 +506,7 @@ const MessageSettings: React.FC = ({ }); }} maxSize={10} + maxCount={10} showPreview={true} acceptTypes={["excel", "word", "ppt"]} /> @@ -489,12 +539,7 @@ const MessageSettings: React.FC = ({ items={items} className={styles["messages-tab"]} /> -
- - -
+ {/* 添加天数计划弹窗 */}