feat: 本次提交更新内容如下
样式调整完成
This commit is contained in:
笔记本里的永平
@@ -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"]}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user