FEAT => 本次更新项目为:

上传封面主图构建完成
This commit is contained in:
超级老白兔
2025-08-04 16:03:39 +08:00
parent a4be3d534f
commit 2ef2aff18f
6 changed files with 95 additions and 333 deletions

View File

@@ -1,7 +1,5 @@
.mainImgUploadContainer { .mainImgUploadContainer {
width: 100%; width: 100%;
display: flex;
flex-direction: column;
// 覆盖 antd Upload 组件的默认样式 // 覆盖 antd Upload 组件的默认样式
:global { :global {
@@ -25,8 +23,7 @@
.mainImgUploadButton { .mainImgUploadButton {
width: 100%; width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
min-height: 180px; min-height: clamp(90px, 20vw, 180px);
min-width: 320px;
border: 2px dashed #d9d9d9; border: 2px dashed #d9d9d9;
border-radius: 12px; border-radius: 12px;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
@@ -37,7 +34,6 @@
transition: all 0.3s ease; transition: all 0.3s ease;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
flex: 1;
&:hover { &:hover {
border-color: #1890ff; border-color: #1890ff;
@@ -59,13 +55,13 @@
padding: 20px; padding: 20px;
.uploadingIcon { .uploadingIcon {
font-size: 32px; font-size: clamp(24px, 4vw, 32px);
color: #1890ff; color: #1890ff;
animation: pulse 2s infinite; animation: pulse 2s infinite;
} }
.uploadingText { .uploadingText {
font-size: 14px; font-size: clamp(11px, 2vw, 14px);
color: #666; color: #666;
font-weight: 500; font-weight: 500;
} }
@@ -80,21 +76,21 @@
text-align: center; text-align: center;
.uploadIcon { .uploadIcon {
font-size: 48px; font-size: clamp(50px, 6vw, 48px);
color: #1890ff; color: #1890ff;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.uploadText { .uploadText {
.uploadTitle { .uploadTitle {
font-size: 16px; font-size: clamp(14px, 2.5vw, 16px);
font-weight: 600; font-weight: 600;
color: #333; color: #333;
margin-bottom: 4px; margin-bottom: 4px;
} }
.uploadSubtitle { .uploadSubtitle {
font-size: 12px; font-size: clamp(10px, 1.5vw, 14px);
color: #666; color: #666;
line-height: 1.4; line-height: 1.4;
} }
@@ -127,15 +123,15 @@
gap: 12px; gap: 12px;
.mainImgIcon { .mainImgIcon {
width: 40px; width: clamp(28px, 5vw, 40px);
height: 40px; height: clamp(28px, 5vw, 40px);
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%); background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white; color: white;
font-size: 18px; font-size: clamp(14px, 2.5vw, 18px);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -144,7 +140,7 @@
min-width: 0; min-width: 0;
.mainImgName { .mainImgName {
font-size: 14px; font-size: clamp(11px, 2vw, 14px);
font-weight: 500; font-weight: 500;
color: #333; color: #333;
margin-bottom: 4px; margin-bottom: 4px;
@@ -154,7 +150,7 @@
} }
.mainImgSize { .mainImgSize {
font-size: 12px; font-size: clamp(10px, 1.5vw, 12px);
color: #666; color: #666;
} }
} }
@@ -199,7 +195,7 @@
position: relative; position: relative;
width: 100%; width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
min-height: 180px; min-height: clamp(90px, 20vw, 180px);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
background: #f5f5f5; background: #f5f5f5;
@@ -293,266 +289,3 @@
transform: scale(1); 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);
}
}
}
}
}
}
}
}

View File

@@ -1,6 +1,7 @@
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { useNavigate, useParams } from "react-router-dom"; 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 NavCommon from "@/components/NavCommon";
import BasicSettings from "./steps/BasicSettings"; import BasicSettings from "./steps/BasicSettings";
import FriendRequestSettings from "./steps/FriendRequestSettings"; import FriendRequestSettings from "./steps/FriendRequestSettings";
@@ -174,34 +175,42 @@ export default function NewPlan() {
isEdit={isEdit} isEdit={isEdit}
formData={formData} formData={formData}
onChange={onChange} onChange={onChange}
onNext={handleNext}
sceneList={sceneList} sceneList={sceneList}
sceneLoading={sceneLoading} sceneLoading={sceneLoading}
/> />
); );
case 2: case 2:
return ( return (
<FriendRequestSettings <FriendRequestSettings formData={formData} onChange={onChange} />
formData={formData}
onChange={onChange}
onNext={handleNext}
onPrev={handlePrev}
/>
); );
case 3: case 3:
return ( return <MessageSettings formData={formData} onChange={onChange} />;
<MessageSettings
formData={formData}
onChange={onChange}
onNext={handleSave}
onPrev={handlePrev}
/>
);
default: default:
return null; 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 ( return (
<Layout <Layout
header={ header={
@@ -210,6 +219,7 @@ export default function NewPlan() {
<StepIndicator currentStep={currentStep} steps={steps} /> <StepIndicator currentStep={currentStep} steps={steps} />
</> </>
} }
footer={renderFooterButtons()}
> >
{renderStepContent()} {renderStepContent()}
</Layout> </Layout>

View File

@@ -16,7 +16,6 @@ interface BasicSettingsProps {
isEdit: boolean; isEdit: boolean;
formData: any; formData: any;
onChange: (data: any) => void; onChange: (data: any) => void;
onNext?: () => void;
sceneList: any[]; sceneList: any[];
sceneLoading: boolean; sceneLoading: boolean;
} }
@@ -94,7 +93,6 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
isEdit, isEdit,
formData, formData,
onChange, onChange,
onNext,
sceneList, sceneList,
sceneLoading, sceneLoading,
}) => { }) => {
@@ -759,12 +757,6 @@ const BasicSettings: React.FC<BasicSettingsProps> = ({
onChange={value => onChange({ ...formData, enabled: value })} onChange={value => onChange({ ...formData, enabled: value })}
/> />
</div> </div>
<div className={styles["basic-footer-switch"]}>
<ButtonMobile block color="primary" onClick={onNext}>
</ButtonMobile>
</div>
</div> </div>
); );
}; };

View File

@@ -9,8 +9,6 @@ import styles from "./friend.module.scss";
interface FriendRequestSettingsProps { interface FriendRequestSettingsProps {
formData: any; formData: any;
onChange: (data: any) => void; onChange: (data: any) => void;
onNext: () => void;
onPrev: () => void;
} }
// 招呼语模板 // 招呼语模板
@@ -32,8 +30,6 @@ const remarkTypes = [
const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({ const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({
formData, formData,
onChange, onChange,
onNext,
onPrev,
}) => { }) => {
const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false); const [isTemplateDialogOpen, setIsTemplateDialogOpen] = useState(false);
const [hasWarnings, setHasWarnings] = useState(false); const [hasWarnings, setHasWarnings] = useState(false);
@@ -82,11 +78,6 @@ const FriendRequestSettings: React.FC<FriendRequestSettingsProps> = ({
setIsTemplateDialogOpen(false); setIsTemplateDialogOpen(false);
}; };
const handleNext = () => {
// 即使有警告也允许进入下一步,但会显示提示
onNext();
};
return ( return (
<div className={styles["friend-container"]}> <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 <Modal
open={isTemplateDialogOpen} open={isTemplateDialogOpen}

View File

@@ -48,8 +48,6 @@ interface DayPlan {
interface MessageSettingsProps { interface MessageSettingsProps {
formData: any; formData: any;
onChange: (data: any) => void; onChange: (data: any) => void;
onNext: () => void;
onPrev: () => void;
} }
// 消息类型配置 // 消息类型配置
@@ -66,8 +64,6 @@ const messageTypes = [
const MessageSettings: React.FC<MessageSettingsProps> = ({ const MessageSettings: React.FC<MessageSettingsProps> = ({
formData, formData,
onChange, onChange,
onNext,
onPrev,
}) => { }) => {
const [dayPlans, setDayPlans] = useState<DayPlan[]>([ const [dayPlans, setDayPlans] = useState<DayPlan[]>([
{ {
@@ -165,9 +161,61 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
message.success(`已添加第${newDay}天的消息计划`); 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) => ({ const items = dayPlans.map((plan, dayIndex) => ({
key: plan.day.toString(), 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: ( children: (
<div className={styles["messages-day-panel"]}> <div className={styles["messages-day-panel"]}>
{plan.messages.map((message, messageIndex) => ( {plan.messages.map((message, messageIndex) => (
@@ -424,7 +472,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
content: urls[0] || "", content: urls[0] || "",
}) })
} }
count={1} count={10}
accept="image/*" accept="image/*"
/> />
</div> </div>
@@ -441,6 +489,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
}); });
}} }}
maxSize={50} maxSize={50}
maxCount={5}
showPreview={true} showPreview={true}
/> />
</div> </div>
@@ -457,6 +506,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
}); });
}} }}
maxSize={10} maxSize={10}
maxCount={10}
showPreview={true} showPreview={true}
acceptTypes={["excel", "word", "ppt"]} acceptTypes={["excel", "word", "ppt"]}
/> />
@@ -489,12 +539,7 @@ const MessageSettings: React.FC<MessageSettingsProps> = ({
items={items} items={items}
className={styles["messages-tab"]} className={styles["messages-tab"]}
/> />
<div className={styles["messages-footer"]}>
<Button onClick={onPrev}></Button>
<Button type="primary" onClick={onNext}>
</Button>
</div>
{/* 添加天数计划弹窗 */} {/* 添加天数计划弹窗 */}
<Modal <Modal
title="添加消息计划" title="添加消息计划"

View File

@@ -15,7 +15,6 @@
margin-bottom: 16px; margin-bottom: 16px;
} }
.messages-day-panel { .messages-day-panel {
background: #fafbfc;
border-radius: 10px; border-radius: 10px;
margin-bottom: 16px; margin-bottom: 16px;
} }