-
{card.icon}
+
+ {card.icon}
+
{
{card.features.map((feature, index) => (
- - {feature}
+ -
+ {feature}
+
))}
@@ -145,6 +171,61 @@ const PowerCenter: React.FC = () => {
))}
+
+ {/* 第二行：消息推送助手（单独一行，左边对齐） */}
+ {featureCategories.length > 3 && (
+
+
+ handleCardClick(featureCategories[3])}
+ >
+
+
+
+ {featureCategories[3].icon}
+
+
+ {featureCategories[3].tag}
+
+
+
+
+
+ {featureCategories[3].title}
+
+
+ {featureCategories[3].description}
+
+
+
+ {featureCategories[3].features.map((feature, index) => (
+ -
+ {feature}
+
+ ))}
+
+
+
+
+ )}
{/* 页面底部 */}
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/components/PushTaskModal.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/components/PushTaskModal.module.scss
new file mode 100644
index 00000000..a7d38777
--- /dev/null
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/components/PushTaskModal.module.scss
@@ -0,0 +1,521 @@
+.pushTaskModal {
+ .ant-modal-content {
+ padding: 0;
+ border-radius: 12px;
+ overflow: hidden;
+ }
+
+ .ant-modal-body {
+ padding: 0;
+ }
+}
+
+.modalHeader {
+ display: flex;
+ align-items: center;
+ padding: 20px 24px;
+ border-bottom: 1px solid #e8e8e8;
+ background: #fff;
+
+ .backButton {
+ margin-right: 16px;
+ color: #666;
+ padding: 0;
+ height: auto;
+
+ &:hover {
+ color: #1890ff;
+ }
+ }
+
+ .headerTitle {
+ flex: 1;
+
+ h2 {
+ font-size: 20px;
+ font-weight: 600;
+ color: #1a1a1a;
+ margin: 0 0 4px 0;
+ }
+
+ p {
+ font-size: 14px;
+ color: #666;
+ margin: 0;
+ }
+ }
+}
+
+.steps {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 24px;
+ background: #fafafa;
+ border-bottom: 1px solid #e8e8e8;
+
+ .step {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ flex: 1;
+ position: relative;
+
+ &:not(:last-child)::after {
+ content: "";
+ position: absolute;
+ top: 20px;
+ left: 60%;
+ right: -40%;
+ height: 2px;
+ background: #d9d9d9;
+ z-index: 0;
+ }
+
+ &.active:not(:last-child)::after,
+ &.completed:not(:last-child)::after {
+ background: #52c41a;
+ }
+
+ .stepIcon {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: #d9d9d9;
+ color: #fff;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 16px;
+ font-weight: 600;
+ position: relative;
+ z-index: 1;
+ margin-bottom: 8px;
+ }
+
+ &.active .stepIcon {
+ background: #52c41a;
+ }
+
+ &.completed .stepIcon {
+ background: #52c41a;
+ color: #fff;
+ }
+
+ span {
+ font-size: 14px;
+ color: #666;
+ }
+
+ &.active span {
+ color: #52c41a;
+ font-weight: 500;
+ }
+ }
+}
+
+.stepBody {
+ min-height: 500px;
+ max-height: 600px;
+ overflow-y: auto;
+ padding: 24px;
+}
+
+.stepContent {
+ .stepHeader {
+ margin-bottom: 20px;
+
+ h3 {
+ font-size: 18px;
+ font-weight: 600;
+ color: #1a1a1a;
+ margin: 0 0 8px 0;
+ }
+
+ p {
+ font-size: 14px;
+ color: #666;
+ margin: 0;
+ }
+ }
+}
+
+.searchBar {
+ margin-bottom: 20px;
+
+ .ant-input {
+ height: 40px;
+ }
+}
+
+.accountSelection {
+ .selectionControls {
+ margin-bottom: 16px;
+ }
+
+ .accountCards {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+ gap: 16px;
+ max-height: 400px;
+ overflow-y: auto;
+ padding: 8px;
+
+ .accountCard {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 16px;
+ border: 2px solid #e8e8e8;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.3s;
+ background: #fff;
+
+ &:hover {
+ border-color: #1890ff;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ }
+
+ &.selected {
+ border-color: #52c41a;
+ background: #f6ffed;
+ }
+
+ .cardName {
+ margin-top: 8px;
+ font-size: 14px;
+ color: #1a1a1a;
+ text-align: center;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 100%;
+ }
+
+ .onlineStatus {
+ margin-top: 4px;
+ font-size: 12px;
+ padding: 2px 8px;
+ border-radius: 12px;
+
+ &.online {
+ background: #f6ffed;
+ color: #52c41a;
+ }
+
+ &.offline {
+ background: #f5f5f5;
+ color: #999;
+ }
+ }
+
+ .checkmark {
+ position: absolute;
+ top: 8px;
+ right: 8px;
+ color: #52c41a;
+ font-size: 20px;
+ }
+ }
+ }
+}
+
+.step2Content {
+ .searchContainer {
+ display: flex;
+ gap: 12px;
+ margin-bottom: 16px;
+
+ .ant-input {
+ flex: 1;
+ }
+ }
+
+ .contentBody {
+ display: flex;
+ gap: 16px;
+ min-height: 400px;
+ }
+
+ .contactList,
+ .selectedList {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #d9d9d9;
+ border-radius: 6px;
+ overflow: hidden;
+ }
+
+ .listHeader {
+ padding: 12px 16px;
+ background-color: #fafafa;
+ border-bottom: 1px solid #d9d9d9;
+ font-weight: 500;
+ font-size: 14px;
+ color: #262626;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .listContent {
+ flex: 1;
+ overflow-y: auto;
+ padding: 8px;
+ min-height: 300px;
+ }
+
+ .contactItem {
+ display: flex;
+ align-items: center;
+ padding: 8px 12px;
+ border-radius: 4px;
+ margin-bottom: 4px;
+ transition: background-color 0.2s;
+ cursor: pointer;
+ gap: 12px;
+
+ &:hover {
+ background-color: #f5f5f5;
+ }
+
+ &.selected {
+ background-color: #e6f7ff;
+ }
+
+ .contactInfo {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ min-width: 0;
+ }
+
+ .contactName {
+ font-size: 14px;
+ color: #262626;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .conRemark {
+ font-size: 12px;
+ color: #8c8c8c;
+ }
+
+ .groupIcon {
+ color: #1890ff;
+ font-size: 12px;
+ margin-left: 4px;
+ }
+ }
+
+ .selectedItem {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 12px;
+ border-radius: 4px;
+ margin-bottom: 4px;
+ transition: background-color 0.2s;
+
+ &:hover {
+ background-color: #f5f5f5;
+ }
+
+ .contactInfo {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ min-width: 0;
+ }
+
+ .removeIcon {
+ color: #8c8c8c;
+ cursor: pointer;
+ padding: 4px;
+ border-radius: 2px;
+ transition: all 0.2s;
+
+ &:hover {
+ color: #ff4d4f;
+ background-color: #fff2f0;
+ }
+ }
+ }
+
+ .paginationContainer {
+ padding: 12px;
+ border-top: 1px solid #d9d9d9;
+ display: flex;
+ justify-content: center;
+ }
+
+ .loadingContainer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 200px;
+ flex-direction: column;
+ gap: 12px;
+ color: #8c8c8c;
+ }
+}
+
+.step3Content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ .messagePreview {
+ border: 2px dashed #52c41a;
+ border-radius: 8px;
+ padding: 20px;
+ background: #f6ffed;
+
+ .previewTitle {
+ font-size: 14px;
+ color: #52c41a;
+ font-weight: 500;
+ margin-bottom: 12px;
+ }
+
+ .messageBubble {
+ min-height: 60px;
+ padding: 12px;
+ background: #fff;
+ border-radius: 6px;
+ color: #666;
+ font-size: 14px;
+ line-height: 1.6;
+ }
+ }
+
+ .messageInputArea {
+ .messageInput {
+ margin-bottom: 12px;
+ }
+
+ .attachmentButtons {
+ display: flex;
+ gap: 8px;
+ margin-bottom: 12px;
+ }
+
+ .aiRewriteSection {
+ display: flex;
+ align-items: center;
+ margin-bottom: 8px;
+ }
+
+ .messageHint {
+ font-size: 12px;
+ color: #999;
+ }
+ }
+
+ .settingsPanel {
+ border: 1px solid #e8e8e8;
+ border-radius: 8px;
+ padding: 20px;
+ background: #fafafa;
+
+ .settingItem {
+ margin-bottom: 20px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ .settingLabel {
+ font-size: 14px;
+ font-weight: 500;
+ color: #1a1a1a;
+ margin-bottom: 12px;
+ }
+
+ .settingControl {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ span {
+ font-size: 14px;
+ color: #666;
+ min-width: 80px;
+ }
+ }
+ }
+ }
+
+ .pushPreview {
+ border: 1px solid #e8e8e8;
+ border-radius: 8px;
+ padding: 20px;
+ background: #fafafa;
+
+ .previewTitle {
+ font-size: 14px;
+ font-weight: 500;
+ color: #1a1a1a;
+ margin-bottom: 12px;
+ }
+
+ ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+
+ li {
+ font-size: 14px;
+ color: #666;
+ line-height: 1.8;
+ }
+ }
+ }
+}
+
+.modalFooter {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 16px 24px;
+ border-top: 1px solid #e8e8e8;
+ background: #fff;
+
+ .footerLeft {
+ font-size: 14px;
+ color: #666;
+ }
+
+ .footerRight {
+ display: flex;
+ gap: 12px;
+ }
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+ .pushTaskModal {
+ .ant-modal-content {
+ width: 90vw !important;
+ }
+ }
+
+ .step2Content {
+ .contentBody {
+ flex-direction: column;
+ }
+
+ .contactList,
+ .selectedList {
+ min-height: 200px;
+ }
+ }
+}
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/components/PushTaskModal.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/components/PushTaskModal.tsx
new file mode 100644
index 00000000..18ef6ce4
--- /dev/null
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/components/PushTaskModal.tsx
@@ -0,0 +1,767 @@
+import React, { useState, useEffect, useMemo } from "react";
+import {
+ Modal,
+ Input,
+ Button,
+ Avatar,
+ Checkbox,
+ Empty,
+ Spin,
+ message,
+ Pagination,
+ Slider,
+ Select,
+ Switch,
+} from "antd";
+import {
+ SearchOutlined,
+ CloseOutlined,
+ UserOutlined,
+ TeamOutlined,
+ ArrowLeftOutlined,
+ CheckCircleOutlined,
+ SendOutlined,
+} from "@ant-design/icons";
+import styles from "./PushTaskModal.module.scss";
+import {
+ useCustomerStore,
+} from "@/store/module/weChat/customer";
+import { getContactList, getGroupList } from "@/pages/pc/ckbox/weChat/api";
+
+export type PushType = "friend-message" | "group-message" | "group-announcement";
+
+interface PushTaskModalProps {
+ visible: boolean;
+ pushType: PushType;
+ onCancel: () => void;
+ onConfirm?: () => void;
+}
+
+interface WeChatAccount {
+ id: number;
+ name: string;
+ avatar?: string;
+ isOnline?: boolean;
+ wechatId?: string;
+}
+
+interface ContactItem {
+ id: number;
+ nickname: string;
+ avatar?: string;
+ conRemark?: string;
+ wechatId?: string;
+ gender?: number;
+ region?: string;
+ type?: "friend" | "group";
+}
+
+const PushTaskModal: React.FC
= ({
+ visible,
+ pushType,
+ onCancel,
+ onConfirm,
+}) => {
+ const [currentStep, setCurrentStep] = useState(1);
+ const [searchKeyword, setSearchKeyword] = useState("");
+ const [selectedAccounts, setSelectedAccounts] = useState([]);
+ const [selectedContacts, setSelectedContacts] = useState([]);
+ const [messageContent, setMessageContent] = useState("");
+ const [friendInterval, setFriendInterval] = useState(10);
+ const [messageInterval, setMessageInterval] = useState(1);
+ const [selectedTag, setSelectedTag] = useState("");
+ const [aiRewriteEnabled, setAiRewriteEnabled] = useState(false);
+ const [aiPrompt, setAiPrompt] = useState("");
+
+ // 步骤2数据
+ const [contactsData, setContactsData] = useState([]);
+ const [loadingContacts, setLoadingContacts] = useState(false);
+ const [step2Page, setStep2Page] = useState(1);
+ const [step2SearchValue, setStep2SearchValue] = useState("");
+ const step2PageSize = 20;
+
+ const customerList = useCustomerStore(state => state.customerList);
+
+ // 获取标题和描述
+ const getTitle = () => {
+ switch (pushType) {
+ case "friend-message":
+ return "好友消息推送";
+ case "group-message":
+ return "群消息推送";
+ case "group-announcement":
+ return "群公告推送";
+ default:
+ return "消息推送";
+ }
+ };
+
+ const getSubtitle = () => {
+ return "智能批量推送,AI智能话术改写";
+ };
+
+ // 步骤2的标题
+ const getStep2Title = () => {
+ switch (pushType) {
+ case "friend-message":
+ return "选择好友";
+ case "group-message":
+ case "group-announcement":
+ return "选择群";
+ default:
+ return "选择";
+ }
+ };
+
+ // 重置状态
+ const handleClose = () => {
+ setCurrentStep(1);
+ setSearchKeyword("");
+ setSelectedAccounts([]);
+ setSelectedContacts([]);
+ setMessageContent("");
+ setFriendInterval(10);
+ setMessageInterval(1);
+ setSelectedTag("");
+ setAiRewriteEnabled(false);
+ setAiPrompt("");
+ setStep2Page(1);
+ setStep2SearchValue("");
+ setContactsData([]);
+ onCancel();
+ };
+
+ // 步骤1：过滤微信账号
+ const filteredAccounts = useMemo(() => {
+ if (!searchKeyword.trim()) return customerList;
+ const keyword = searchKeyword.toLowerCase();
+ return customerList.filter(
+ account =>
+ (account.nickname || "").toLowerCase().includes(keyword) ||
+ (account.wechatId || "").toLowerCase().includes(keyword),
+ );
+ }, [customerList, searchKeyword]);
+
+ // 步骤1：切换账号选择
+ const handleAccountToggle = (account: any) => {
+ setSelectedAccounts(prev => {
+ const isSelected = prev.some(a => a.id === account.id);
+ if (isSelected) {
+ return prev.filter(a => a.id !== account.id);
+ }
+ return [...prev, account];
+ });
+ };
+
+ // 步骤1：全选/取消全选
+ const handleSelectAll = () => {
+ if (selectedAccounts.length === filteredAccounts.length) {
+ setSelectedAccounts([]);
+ } else {
+ setSelectedAccounts([...filteredAccounts]);
+ }
+ };
+
+ // 步骤2：加载好友/群数据
+ const loadStep2Data = async () => {
+ if (selectedAccounts.length === 0) return;
+
+ setLoadingContacts(true);
+ try {
+ const accountIds = selectedAccounts.map(a => a.id);
+ const params: any = {
+ page: step2Page,
+ limit: step2PageSize,
+ };
+
+ if (step2SearchValue.trim()) {
+ params.keyword = step2SearchValue.trim();
+ }
+
+ let response;
+ if (pushType === "friend-message") {
+ // 好友消息推送：获取好友列表
+ response = await getContactList(params);
+ } else {
+ // 群消息推送/群公告推送：获取群列表
+ response = await getGroupList(params);
+ }
+
+ const data = response.data || response.list || [];
+ setContactsData(data);
+ } catch (error) {
+ console.error("加载数据失败:", error);
+ message.error("加载数据失败");
+ } finally {
+ setLoadingContacts(false);
+ }
+ };
+
+ // 步骤2：当进入步骤2时加载数据
+ useEffect(() => {
+ if (currentStep === 2 && selectedAccounts.length > 0) {
+ loadStep2Data();
+ }
+ }, [currentStep, selectedAccounts, step2Page, step2SearchValue, pushType]);
+
+ // 步骤2：过滤联系人
+ const filteredContacts = useMemo(() => {
+ if (!step2SearchValue.trim()) return contactsData;
+ const keyword = step2SearchValue.toLowerCase();
+ return contactsData.filter(
+ contact =>
+ contact.nickname?.toLowerCase().includes(keyword) ||
+ contact.conRemark?.toLowerCase().includes(keyword) ||
+ contact.wechatId?.toLowerCase().includes(keyword),
+ );
+ }, [contactsData, step2SearchValue]);
+
+ // 步骤2：分页显示
+ const paginatedContacts = useMemo(() => {
+ const start = (step2Page - 1) * step2PageSize;
+ const end = start + step2PageSize;
+ return filteredContacts.slice(start, end);
+ }, [filteredContacts, step2Page]);
+
+ // 步骤2：切换联系人选择
+ const handleContactToggle = (contact: ContactItem) => {
+ setSelectedContacts(prev => {
+ const isSelected = prev.some(c => c.id === contact.id);
+ if (isSelected) {
+ return prev.filter(c => c.id !== contact.id);
+ }
+ return [...prev, contact];
+ });
+ };
+
+ // 步骤2：移除已选联系人
+ const handleRemoveContact = (contactId: number) => {
+ setSelectedContacts(prev => prev.filter(c => c.id !== contactId));
+ };
+
+ // 步骤2：全选当前页
+ const handleSelectAllContacts = () => {
+ if (paginatedContacts.length === 0) return;
+ const allSelected = paginatedContacts.every(contact =>
+ selectedContacts.some(c => c.id === contact.id),
+ );
+ if (allSelected) {
+ // 取消全选当前页
+ const currentPageIds = paginatedContacts.map(c => c.id);
+ setSelectedContacts(prev =>
+ prev.filter(c => !currentPageIds.includes(c.id)),
+ );
+ } else {
+ // 全选当前页
+ const toAdd = paginatedContacts.filter(
+ contact => !selectedContacts.some(c => c.id === contact.id),
+ );
+ setSelectedContacts(prev => [...prev, ...toAdd]);
+ }
+ };
+
+ // 下一步
+ const handleNext = () => {
+ if (currentStep === 1) {
+ if (selectedAccounts.length === 0) {
+ message.warning("请至少选择一个微信账号");
+ return;
+ }
+ setCurrentStep(2);
+ } else if (currentStep === 2) {
+ if (selectedContacts.length === 0) {
+ message.warning(`请至少选择一个${pushType === "friend-message" ? "好友" : "群"}`);
+ return;
+ }
+ setCurrentStep(3);
+ }
+ };
+
+ // 上一步
+ const handlePrev = () => {
+ if (currentStep > 1) {
+ setCurrentStep(currentStep - 1);
+ }
+ };
+
+ // 发送
+ const handleSend = () => {
+ if (!messageContent.trim()) {
+ message.warning("请输入消息内容");
+ return;
+ }
+ // TODO: 实现发送逻辑
+ console.log("发送推送", {
+ pushType,
+ accounts: selectedAccounts,
+ contacts: selectedContacts,
+ messageContent,
+ friendInterval,
+ messageInterval,
+ selectedTag,
+ aiRewriteEnabled,
+ aiPrompt,
+ });
+ message.success("推送任务已创建");
+ handleClose();
+ if (onConfirm) onConfirm();
+ };
+
+ // 渲染步骤1：选择微信账号
+ const renderStep1 = () => (
+
+
+
选择微信账号
+
可选择多个微信账号进行推送
+
+
+ }
+ value={searchKeyword}
+ onChange={e => setSearchKeyword(e.target.value)}
+ allowClear
+ />
+
+
+
+ 0 &&
+ selectedAccounts.length === filteredAccounts.length
+ }
+ indeterminate={
+ selectedAccounts.length > 0 &&
+ selectedAccounts.length < filteredAccounts.length
+ }
+ onChange={handleSelectAll}
+ disabled={filteredAccounts.length === 0}
+ >
+ 全选
+
+
+
+ {filteredAccounts.length > 0 ? (
+ filteredAccounts.map(account => {
+ const isSelected = selectedAccounts.some(a => a.id === account.id);
+ return (
+
handleAccountToggle(account)}
+ >
+
+ {!account.avatar && (account.nickname || account.name || "").charAt(0)}
+
+
+ {account.nickname || account.name || "未知"}
+
+
+ {account.isOnline ? "在线" : "离线"}
+
+ {isSelected && (
+
+ )}
+
+ );
+ })
+ ) : (
+
+ )}
+
+
+
+
+
+ }
+ value={step2SearchValue}
+ onChange={e => setStep2SearchValue(e.target.value)}
+ allowClear
+ />
+
+
+
+ {/* 左侧：好友/群列表 */}
+
+
+
+ {getStep2Title()}列表(共{filteredContacts.length}个)
+
+
+
+ {loadingContacts ? (
+
+
+ 加载中...
+
+ ) : paginatedContacts.length > 0 ? (
+ paginatedContacts.map(contact => {
+ const isSelected = selectedContacts.some(
+ c => c.id === contact.id,
+ );
+ return (
+
handleContactToggle(contact)}
+ >
+
+
+ ) : (
+
+ )
+ }
+ />
+
+
+ {contact.nickname}
+
+ {contact.conRemark && (
+
+ {contact.conRemark}
+
+ )}
+
+ {contact.type === "group" && (
+
+ )}
+
+ );
+ })
+ ) : (
+
+ )}
+
+ {filteredContacts.length > 0 && (
+
+
setStep2Page(p)}
+ showSizeChanger={false}
+ />
+
+ )}
+
+
+ {/* 右侧：已选列表 */}
+
+
+
+ 已选{getStep2Title()}列表(共{selectedContacts.length}个)
+
+ {selectedContacts.length > 0 && (
+
+ )}
+
+
+ {selectedContacts.length > 0 ? (
+ selectedContacts.map(contact => (
+
+
+
+ ) : (
+
+ )
+ }
+ />
+
+
{contact.nickname}
+ {contact.conRemark && (
+
+ {contact.conRemark}
+
+ )}
+
+ {contact.type === "group" && (
+
+ )}
+
+
handleRemoveContact(contact.id)}
+ />
+
+ ))
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
模拟推送内容
+
+ {messageContent || "开始添加消息内容..."}
+
+
+
+
+
setMessageContent(e.target.value)}
+ rows={4}
+ onKeyDown={e => {
+ if (e.ctrlKey && e.key === "Enter") {
+ e.preventDefault();
+ setMessageContent(prev => prev + "\n");
+ }
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ AI智能话术改写
+ {aiRewriteEnabled && (
+ setAiPrompt(e.target.value)}
+ style={{ marginLeft: 12, width: 200 }}
+ />
+ )}
+
+
+
+ 按住CTRL+ENTER换行,已配置1个话术组,已选择0个进行推送
+
+
+
+
+
+
好友间间隔
+
+ 间隔时间(秒)
+
+ {friendInterval} - 20
+
+
+
+
消息间间隔
+
+ 间隔时间(秒)
+
+ {messageInterval} - 12
+
+
+
+
完成打标签
+
+
+
+
+
+
+
+
推送预览
+
+ - 推送账号: {selectedAccounts.length}个
+ -
+ 推送{getStep2Title()}: {selectedContacts.length}个
+
+ - 话术组数: 0个
+ - 随机推送: 否
+ - 预计耗时: ~1分钟
+
+
+
+
+
}
+ onClick={handleClose}
+ className={styles.backButton}
+ >
+ 返回
+
+
+
{getTitle()}
+
{getSubtitle()}
+
+
+
= 1 ? styles.active : ""} ${currentStep > 1 ? styles.completed : ""}`}
+ >
+
+ {currentStep > 1 ? : "1"}
+
+
选择微信
+
+
= 2 ? styles.active : ""} ${currentStep > 2 ? styles.completed : ""}`}
+ >
+
+ {currentStep > 2 ? : "2"}
+
+
选择{getStep2Title()}
+
+
= 3 ? styles.active : ""}`}
+ >
+
3
+
一键群发
+
+
+ {currentStep === 1 && renderStep1()}
+ {currentStep === 2 && renderStep2()}
+ {currentStep === 3 && renderStep3()}
+
+
+ {/* 底部操作栏 */}
+
+
+ {currentStep === 1 && (
+ 已选择{selectedAccounts.length}个微信账号
+ )}
+ {currentStep === 2 && (
+
+ 已选择{selectedContacts.length}个{getStep2Title()}
+
+ )}
+ {currentStep === 3 && (
+
+ 推送账号: {selectedAccounts.length}个, 推送{getStep2Title()}:{" "}
+ {selectedContacts.length}个
+
+ )}
+
+
+ {currentStep === 1 && (
+ <>
+
+
+
+ )}
+ {currentStep === 2 && (
+ <>
+
+
+
+ )}
+ {currentStep === 3 && (
+ <>
+
+ }
+ onClick={handleSend}
+ >
+ 一键发送
+
+
+ )}
+
+
+
+
选择微信账号
+
可选择多个微信账号进行推送
+
+
+
+ }
+ value={searchKeyword}
+ onChange={e => setSearchKeyword(e.target.value)}
+ allowClear
+ />
+
+
+ {/* 未选择的账号列表 */}
+ {unselectedAccounts.length > 0 || filteredAccounts.length === 0 ? (
+
+ {unselectedAccounts.length > 0 ? (
+ unselectedAccounts.map(account => (
+
handleAccountToggle(account)}
+ >
+
+ {!account.avatar && (account.nickname || account.name || "").charAt(0)}
+
+
+
+ {account.nickname || account.name || "未知"}
+
+
+ {account.isOnline ? "在线" : "离线"}
+
+
+
+ ))
+ ) : (
+
+ )}
+
+ ) : null}
+
+ {/* 已选择的账号 */}
+ {selectedAccounts.length > 0 && (
+
+
+ 已选择 {selectedAccounts.length} 个微信账号
+
+
+
+ {selectedAccounts.map(account => (
+
+
+ {!account.avatar && (account.nickname || account.name || "").charAt(0)}
+
+
+
+ {account.nickname || account.name || "未知"}
+
+
+ {account.isOnline ? "在线" : "离线"}
+
+
+
+
+ ))}
+
+
+ )}
+
+
+
+
选择{getStep2Title()}
+
从{getStep2Title()}列表中选择推送对象
+
+
+ }
+ value={step2SearchValue}
+ onChange={e => setStep2SearchValue(e.target.value)}
+ allowClear
+ />
+
+
+
+ {/* 左侧：好友/群列表 */}
+
+
+
+ {getStep2Title()}列表(共{step2Total}个)
+
+
+
+ {loadingContacts ? (
+
+
+ 加载中...
+
+ ) : paginatedContacts.length > 0 ? (
+ paginatedContacts.map(contact => {
+ const isSelected = selectedContacts.some(
+ c => c.id === contact.id,
+ );
+ return (
+
handleContactToggle(contact)}
+ >
+
+
+ ) : (
+
+ )
+ }
+ />
+
+
+ {contact.nickname}
+
+ {contact.conRemark && (
+
+ {contact.conRemark}
+
+ )}
+
+ {contact.type === "group" && (
+
+ )}
+
+ );
+ })
+ ) : (
+
+ )}
+
+ {step2Total > 0 && (
+
+
setStep2Page(p)}
+ showSizeChanger={false}
+ />
+
+ )}
+
+
+ {/* 右侧：已选列表 */}
+
+
+
+ 已选{getStep2Title()}列表(共{selectedContacts.length}个)
+
+ {selectedContacts.length > 0 && (
+
+ )}
+
+
+ {selectedContacts.length > 0 ? (
+ selectedContacts.map(contact => (
+
+
+
+ ) : (
+
+ )
+ }
+ />
+
+
{contact.nickname}
+ {contact.conRemark && (
+
+ {contact.conRemark}
+
+ )}
+
+ {contact.type === "group" && (
+
+ )}
+
+
handleRemoveContact(contact.id)}
+ />
+
+ ))
+ ) : (
+
+ )}
+
+
+
+
+
+
+ {/* 左侧栏：内容编辑 */}
+
+ {/* 模拟推送内容 */}
+
+
模拟推送内容
+
+
当前编辑话术
+
+ {messageContent || "开始添加消息内容..."}
+
+
+
+
+ {/* 已保存话术组 */}
+
+
+ 已保存话术组({scriptGroups.length})
+
+ {scriptGroups.map(group => (
+
+
+
+ setSelectedScriptGroup(group.id)}
+ />
+ {group.name}
+
+ {group.messageCount}条消息
+
+
+
+ }
+ size="small"
+ className={styles.actionButton}
+ />
+ }
+ size="small"
+ className={styles.actionButton}
+ />
+
+
+ {selectedScriptGroup === group.id && (
+
+ {group.content}
+
+ )}
+
+ ))}
+
+
+ {/* 消息输入区域 */}
+
+
setMessageContent(e.target.value)}
+ rows={4}
+ onKeyDown={e => {
+ if (e.ctrlKey && e.key === "Enter") {
+ e.preventDefault();
+ setMessageContent(prev => prev + "\n");
+ }
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ AI智能话术改写
+ {aiRewriteEnabled && (
+ setAiPrompt(e.target.value)}
+ style={{ marginLeft: 12, width: 200 }}
+ />
+ )}
+
+
+
+ 按住CTRL+ENTER换行,已配置{scriptGroups.length}个话术组,已选择0个进行推送
+
+
+
+
+ {/* 右侧栏：设置和预览 */}
+
+ {/* 相关设置 */}
+
+
相关设置
+
+
好友间间隔
+
+ 间隔时间(秒)
+
+ {friendInterval} - 20
+
+
+
+
消息间间隔
+
+ 间隔时间(秒)
+
+ {messageInterval} - 12
+
+
+
+
+ {/* 完成打标签 */}
+
+
完成打标签
+
+
+
+ {/* 推送预览 */}
+
+
推送预览
+
+ - 推送账号: {selectedAccounts.length}个
+ -
+ 推送{getStep2Title()}: {selectedContacts.length}个
+
+ - 话术组数: 0个
+ - 随机推送: 否
+ - 预计耗时: ~1分钟
+
+
+
+
+
+ }
+ footer={null}
+ >
+
+ {/* 步骤指示器 */}
+
+
= 1 ? styles.active : ""} ${currentStep > 1 ? styles.completed : ""}`}
+ >
+
+ {currentStep > 1 ? : "1"}
+
+
选择微信
+
+
= 2 ? styles.active : ""} ${currentStep > 2 ? styles.completed : ""}`}
+ >
+
+ {currentStep > 2 ? : "2"}
+
+
选择{getStep2Title()}
+
+
= 3 ? styles.active : ""}`}
+ >
+
3
+
一键群发
+
+
+
+ {/* 步骤内容 */}
+
+ {currentStep === 1 && renderStep1()}
+ {currentStep === 2 && renderStep2()}
+ {currentStep === 3 && renderStep3()}
+
+
+ {/* 底部操作栏 */}
+
+
+ {currentStep === 1 && (
+ 已选择{selectedAccounts.length}个微信账号
+ )}
+ {currentStep === 2 && (
+
+ 已选择{selectedContacts.length}个{getStep2Title()}
+
+ )}
+ {currentStep === 3 && (
+
+ 推送账号: {selectedAccounts.length}个, 推送{getStep2Title()}:{" "}
+ {selectedContacts.length}个
+
+ )}
+
+
+ {currentStep === 1 && (
+ <>
+
+
+
+ )}
+ {currentStep === 2 && (
+ <>
+
+
+
+ )}
+ {currentStep === 3 && (
+ <>
+
+ }
+ onClick={handleSend}
+ >
+ 一键发送
+
+
+ )}
+
+
+
+
+ );
+};
+
+export default CreatePushTask;
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/index.module.scss
new file mode 100644
index 00000000..ccef81f1
--- /dev/null
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/index.module.scss
@@ -0,0 +1,194 @@
+.container {
+ padding: 40px;
+ background: #ffffff;
+ min-height: calc(100vh - 64px);
+
+ .section {
+ margin-bottom: 48px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ .sectionTitle {
+ font-size: 20px;
+ font-weight: 600;
+ color: #1a1a1a;
+ margin: 0 0 24px 0;
+ }
+
+ .cardGrid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 24px;
+
+ @media (max-width: 1200px) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media (max-width: 768px) {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ .dataRecordGrid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 24px;
+
+ @media (max-width: 768px) {
+ grid-template-columns: 1fr;
+ }
+ }
+
+ .taskCard {
+ background: white;
+ border-radius: 12px;
+ padding: 32px;
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+ transition: all 0.3s ease;
+ cursor: pointer;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ position: relative;
+ overflow: hidden;
+
+ &:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+ }
+
+ .cardIcon {
+ width: 56px;
+ height: 56px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: white;
+ font-size: 24px;
+ margin-bottom: 20px;
+ flex-shrink: 0;
+ }
+
+ .cardContent {
+ flex: 1;
+ width: 100%;
+
+ .cardTitle {
+ font-size: 18px;
+ font-weight: 600;
+ color: #1a1a1a;
+ margin: 0 0 12px 0;
+ line-height: 1.3;
+ }
+
+ .cardDescription {
+ font-size: 14px;
+ color: #666;
+ line-height: 1.6;
+ margin: 0;
+ }
+ }
+
+ .cardAction {
+ display: flex;
+ align-items: center;
+ margin-top: 20px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+ }
+ }
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+ .container {
+ padding: 32px 24px;
+
+ .section {
+ margin-bottom: 40px;
+
+ .sectionTitle {
+ font-size: 18px;
+ margin-bottom: 20px;
+ }
+
+ .taskCard {
+ padding: 24px;
+
+ .cardIcon {
+ width: 48px;
+ height: 48px;
+ font-size: 20px;
+ margin-bottom: 16px;
+ }
+
+ .cardContent {
+ .cardTitle {
+ font-size: 16px;
+ margin-bottom: 10px;
+ }
+
+ .cardDescription {
+ font-size: 13px;
+ }
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 768px) {
+ .container {
+ padding: 24px 16px;
+
+ .section {
+ margin-bottom: 32px;
+
+ .sectionTitle {
+ font-size: 16px;
+ margin-bottom: 16px;
+ }
+
+ .cardGrid {
+ gap: 16px;
+ }
+
+ .taskCard {
+ padding: 20px;
+
+ .cardIcon {
+ width: 44px;
+ height: 44px;
+ font-size: 18px;
+ margin-bottom: 12px;
+ }
+
+ .cardContent {
+ .cardTitle {
+ font-size: 15px;
+ margin-bottom: 8px;
+ }
+
+ .cardDescription {
+ font-size: 12px;
+ }
+ }
+
+ .cardAction {
+ margin-top: 16px;
+ font-size: 13px;
+ }
+ }
+ }
+ }
+}
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/index.tsx
new file mode 100644
index 00000000..acf205f3
--- /dev/null
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/message-push-assistant/index.tsx
@@ -0,0 +1,156 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import PowerNavigation from "@/components/PowerNavtion";
+import Layout from "@/components/Layout/LayoutFiexd";
+import {
+ UserOutlined,
+ MessageOutlined,
+ SoundOutlined,
+ BarChartOutlined,
+ HistoryOutlined,
+ SendOutlined,
+} from "@ant-design/icons";
+import styles from "./index.module.scss";
+
+export type PushType = "friend-message" | "group-message" | "group-announcement";
+
+const MessagePushAssistant: React.FC = () => {
+ const navigate = useNavigate();
+
+ // 创建推送任务卡片数据
+ const createTaskCards = [
+ {
+ id: "friend-message",
+ title: "好友消息推送",
+ description: "向选定的微信好友批量发送消息",
+ icon:
,
+ color: "#1890ff",
+ onClick: () => {
+ navigate("/pc/powerCenter/message-push-assistant/create-push-task/friend-message");
+ },
+ },
+ {
+ id: "group-message",
+ title: "群消息推送",
+ description: "向选定的微信群批量发送消息",
+ icon:
,
+ color: "#52c41a",
+ onClick: () => {
+ navigate("/pc/powerCenter/message-push-assistant/create-push-task/group-message");
+ },
+ },
+ {
+ id: "group-announcement",
+ title: "群公告推送",
+ description: "向选定的微信群发布群公告",
+ icon:
,
+ color: "#722ed1",
+ onClick: () => {
+ navigate("/pc/powerCenter/message-push-assistant/create-push-task/group-announcement");
+ },
+ },
+ ];
+
+ // 数据与记录卡片数据
+ const dataRecordCards = [
+ {
+ id: "data-statistics",
+ title: "数据统计",
+ description: "查看推送效果统计与话术对比分析",
+ icon:
,
+ color: "#ff7a00",
+ onClick: () => {
+ navigate("/pc/powerCenter/data-statistics");
+ },
+ },
+ {
+ id: "push-history",
+ title: "推送历史",
+ description: "查看所有推送任务的历史记录",
+ icon:
,
+ color: "#666666",
+ onClick: () => {
+ navigate("/pc/powerCenter/push-history");
+ },
+ },
+ ];
+
+ return (
+
+ navigate("/pc/powerCenter")}
+ />
+
+
+ );
+};
+
+export default MessagePushAssistant;
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/push-history/api.ts b/Touchkebao/src/pages/pc/ckbox/powerCenter/push-history/api.ts
new file mode 100644
index 00000000..dceeed01
--- /dev/null
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/push-history/api.ts
@@ -0,0 +1,65 @@
+import { request } from "@/api/request";
+import { PushHistoryRecord } from "./index";
+
+// 获取推送历史接口参数
+export interface GetPushHistoryParams {
+ page?: number;
+ pageSize?: number;
+ keyword?: string;
+ pushType?: string;
+ status?: string;
+}
+
+// 获取推送历史接口响应
+export interface GetPushHistoryResponse {
+ success: boolean;
+ message?: string;
+ data?: {
+ list: PushHistoryRecord[];
+ total: number;
+ page: number;
+ pageSize: number;
+ };
+}
+
+/**
+ * 获取推送历史列表
+ */
+export const getPushHistory = async (
+ params: GetPushHistoryParams
+): Promise