From 1f3d39a1bd6c64461c506b66f9ef2f4625a0ab58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Thu, 9 Oct 2025 15:42:46 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=8A=9F=E8=83=BD=E4=B8=AD?= =?UTF-8?q?=E5=BF=83=E6=A8=A1=E5=9D=97=EF=BC=9A=E6=9B=B4=E6=96=B0=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E5=8D=A1=E7=89=87=E6=95=B0=E6=8D=AE=E7=BB=93=E6=9E=84?= =?UTF-8?q?=EF=BC=8C=E6=96=B0=E5=A2=9EKPI=E7=BB=9F=E8=AE=A1=E5=8C=BA?= =?UTF-8?q?=E5=9F=9F=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F=E5=92=8C?= =?UTF-8?q?=E5=B8=83=E5=B1=80=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E4=BD=93=E9=AA=8C=E5=92=8C=E4=BB=A3=E7=A0=81=E5=8F=AF=E8=AF=BB?= =?UTF-8?q?=E6=80=A7=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../workspace/moments-sync/new/index.tsx | 22 +- .../pc/ckbox/components/NavCommon/index.tsx | 9 +- .../pages/pc/ckbox/powerCenter/index.data.tsx | 156 +++--- .../pc/ckbox/powerCenter/index.module.scss | 519 ++++++++++-------- .../src/pages/pc/ckbox/powerCenter/index.tsx | 137 +++-- .../MessageRecord/MessageRecord.module.scss | 5 + 6 files changed, 448 insertions(+), 400 deletions(-) diff --git a/Cunkebao/src/pages/mobile/workspace/moments-sync/new/index.tsx b/Cunkebao/src/pages/mobile/workspace/moments-sync/new/index.tsx index b6d8d467..aa15519d 100644 --- a/Cunkebao/src/pages/mobile/workspace/moments-sync/new/index.tsx +++ b/Cunkebao/src/pages/mobile/workspace/moments-sync/new/index.tsx @@ -31,7 +31,7 @@ const defaultForm = { syncCount: 5, syncInterval: 30, syncType: 1, // 1=业务号 2=人设号 - accountType: "business" as "business" | "personal", // 仅UI用 + accountType: 1, // 仅UI用 enabled: true, deviceGroups: [] as any[], contentGroups: [] as any[], // 存完整内容库对象数组 @@ -67,8 +67,8 @@ const NewMomentsSync: React.FC = () => { endTime: res.timeRange?.end || "23:59", syncCount: res.config?.syncCount || res.syncCount || 5, syncInterval: res.config?.syncInterval || res.syncInterval || 30, - syncType: res.accountType === 1 ? 1 : 2, - accountType: res.accountType === 1 ? "business" : "personal", + syncType: res.config?.syncType, + accountType: res.config?.accountType, enabled: res.status === 1, deviceGroups: res.config?.deviceGroups || [], // 关键：用id字符串数组回填 @@ -101,11 +101,11 @@ const NewMomentsSync: React.FC = () => { }; // UI选择账号类型时同步syncType和accountType - const handleAccountTypeChange = (type: "business" | "personal") => { + const handleAccountTypeChange = (type: number) => { setFormData(prev => ({ ...prev, accountType: type, - syncType: type === "business" ? 1 : 2, + syncType: type, })); }; const handleDevicesChange = (devices: DeviceSelectionItem[]) => { @@ -135,11 +135,11 @@ const NewMomentsSync: React.FC = () => { const params = { name: formData.taskName, deviceGroups: formData.deviceGroups, - contentGroups: formData.contentGroups.map((lib: any) => lib.id), + contentGroups: contentGroupsOptions.map((lib: any) => lib.id), syncInterval: formData.syncInterval, syncCount: formData.syncCount, syncType: formData.syncType, // 账号类型真实传参 - accountType: formData.accountType === "business" ? 1 : 2, // 也要传 + accountType: formData.accountType, // 也要传 startTime: formData.startTime, endTime: formData.endTime, contentTypes: formData.contentTypes, @@ -227,14 +227,14 @@ const NewMomentsSync: React.FC = () => {
账号类型
diff --git a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx index c4701072..8c7f13ad 100644 --- a/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/components/NavCommon/index.tsx @@ -64,9 +64,8 @@ const NavCommon: React.FC = ({ title = "触客宝" }) => { }, []); // 处理菜单图标点击：在两个路由之间切换 - const handleMenuClick = () => { - const current = location.pathname; - if (current.startsWith("/pc/weChat")) { + const handleMenuClick = (index: number) => { + if (index === 0) { navigate("/pc/powerCenter"); } else { navigate("/pc/weChat"); @@ -214,14 +213,14 @@ const NavCommon: React.FC = ({ title = "触客宝" }) => { diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx index a3468602..32f97176 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx @@ -1,13 +1,4 @@ -import { - AimOutlined, - ThunderboltOutlined, - RiseOutlined, - TeamOutlined, - CommentOutlined, - FileTextOutlined, - SoundOutlined, - EditOutlined, -} from "@ant-design/icons"; +import { TeamOutlined, CommentOutlined, BookOutlined } from "@ant-design/icons"; // 数据类型定义 export interface FeatureCard { @@ -16,89 +7,106 @@ export interface FeatureCard { description: string; icon: React.ReactNode; color: string; + tag: string; + features: string[]; path?: string; - isNew?: boolean; - isHot?: boolean; } -export interface FeatureCategory { +export interface KPIData { id: string; - title: string; - icon: React.ReactNode; - color: string; - count: number; - features: FeatureCard[]; + value: string; + label: string; + trend?: { + icon: string; + text: string; + }; } -// 功能数据 -export const featureCategories: FeatureCategory[] = [ +// 功能数据 - 匹配图片中的三个核心模块 +export const featureCategories: FeatureCard[] = [ { - id: "core", - title: "核心功能", - icon: , + id: "customer-management", + title: "客户好友管理", + description: "管理客户关系,维护好友信息,查看沟通记录,提升客户满意度", + icon: , color: "#1890ff", - count: 2, + tag: "核心功能", features: [ - { - id: "customer-management", - title: "客户好友管理", - description: "管理客户关系,维护好友信息,提升客户满意度", - icon: , - color: "#1890ff", - path: "/pc/powerCenter/customer-management", - isHot: true, - }, - { - id: "communication-record", - title: "沟通记录", - description: "记录和分析所有客户沟通历史,优化服务质量", - icon: , - color: "#52c41a", - path: "/pc/powerCenter/communication-record", - }, + "RFM价值评分系统", + "多维度精准筛选", + "完整聊天记录查看", + "客户详情页面", ], + path: "/pc/powerCenter/customer-management", }, { - id: "ai", - title: "AI智能功能", - icon: , + id: "ai-reception", + title: "AI接待设置", + description: "配置AI自动回复,智能推送策略,提升接待效率和客户体验", + icon: , color: "#722ed1", - count: 2, + tag: "AI智能", features: [ - { - id: "ai-training", - title: "AI模型训练", - description: "训练专属AI模型,提升智能服务能力", - icon: , - color: "#fa8c16", - path: "/pc/powerCenter/ai-training", - isNew: true, - }, - { - id: "auto-greeting", - title: "自动问候", - description: "设置智能问候规则,自动化客户接待流程", - icon: , - color: "#722ed1", - path: "/pc/powerCenter/auto-greeting", - }, + "自动欢迎语设置", + "AI智能推送策略", + "标签化精准推送", + "接待模式切换", ], + path: "/pc/powerCenter/ai-reception", }, { - id: "marketing", - title: "营销管理", - icon: , + id: "content-library", + title: "AI内容库配置", + description: "管理AI内容库,配置调用权限,优化AI推送效果和内容质量", + icon: , color: "#52c41a", - count: 1, + tag: "内容管理", features: [ - { - id: "content-management", - title: "内容管理", - description: "管理营销内容,素材库,提升内容创作效率", - icon: , - color: "#722ed1", - path: "/pc/powerCenter/content-management", - }, + "多库管理与分类", + "AI调用权限配置", + "内容检索规则设置", + "手动内容上传", ], + path: "/pc/powerCenter/content-library", + }, +]; + +// KPI统计数据 +export const kpiData: KPIData[] = [ + { + id: "total-customers", + value: "1,234", + label: "总客户数", + trend: { + icon: "↑", + text: "12% 本月", + }, + }, + { + id: "active-customers", + value: "856", + label: "活跃客户", + trend: { + icon: "↑", + text: "8% 本月", + }, + }, + { + id: "ai-messages", + value: "3,542", + label: "AI处理消息", + trend: { + icon: "", + text: "今日", + }, + }, + { + id: "satisfaction", + value: "98%", + label: "客户满意度", + trend: { + icon: "↑", + text: "2% 本月", + }, }, ]; diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss index 79089122..8209d4d6 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.module.scss @@ -1,160 +1,188 @@ .powerCenter { padding: 40px; - background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); + background: #ffffff; min-height: 100vh; - // 功能分类区域 - .categorySection { - margin-bottom: 48px; + // 页面标题区域 + .pageHeader { + text-align: center; + margin-bottom: 60px; - .categoryHeader { - display: flex; - align-items: center; - margin-bottom: 24px; - padding: 0 8px; - - .categoryIcon { - width: 48px; - height: 48px; - color: #ffffff; - border-radius: 50%; + .titleSection { + .mainTitle { display: flex; align-items: center; justify-content: center; - margin-right: 16px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + gap: 16px; + margin-bottom: 16px; - .anticon { - font-size: 24px; - color: white; + .titleIcon { + font-size: 32px; + color: #722ed1; + } + + h1 { + font-size: 48px; + font-weight: 700; + color: #1a1a1a; + margin: 0; } } - .categoryInfo { + .subtitle { + font-size: 18px; + color: #666; + margin: 0; + font-weight: 400; + } + } + } + + // 核心功能模块 + .coreFeatures { + margin-bottom: 60px; + + .featureCard { + background: white; + border-radius: 16px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + transition: all 0.3s ease; + cursor: pointer; + overflow: hidden; + height: 400px; + + &:hover { + transform: translateY(-4px); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); + } + + .cardContent { + padding: 32px; + height: 100%; display: flex; - align-items: center; - gap: 10px; - .categoryTitle { - font-size: 24px; - font-weight: 600; - color: #1a1a1a; - margin: 0 0 4px 0; + flex-direction: column; + + .cardHeader { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 24px; + + .cardIcon { + width: 64px; + height: 64px; + border-radius: 16px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(24, 144, 255, 0.1); + } + + .cardTag { + color: white; + font-size: 12px; + font-weight: 500; + padding: 6px 12px; + border-radius: 16px; + height: 28px; + line-height: 16px; + display: flex; + align-items: center; + } } - .categoryCount { - font-size: 12px; - color: #666; - background: #f0f0f0; - border-radius: 12px; - border: 1px solid #e0e0e0; - height: 24px; - line-height: 20px; - padding: 0 10px; + .cardInfo { + flex: 1; + display: flex; + flex-direction: column; + + .cardTitle { + font-size: 20px; + 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 0 20px 0; + } + + .featureList { + list-style: none; + padding: 0; + margin: 0; + flex: 1; + + li { + font-size: 13px; + color: #666; + line-height: 1.5; + margin-bottom: 8px; + position: relative; + padding-left: 16px; + + &::before { + content: "•"; + color: #1890ff; + font-weight: bold; + position: absolute; + left: 0; + } + } + } } } } + } - .featureCards { - .featureCard { - border-radius: 16px; - border: none; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - transition: all 0.3s ease; - cursor: pointer; - position: relative; - overflow: hidden; - background: white; - padding: 20px; - box-sizing: border-box; - margin-bottom: 16px; + // KPI统计区域 + .kpiSection { + margin-bottom: 40px; - &:hover { - transform: translateY(-2px); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); + .kpiCard { + background: white; + border-radius: 12px; + padding: 24px; + text-align: center; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); + transition: all 0.3s ease; + + &:hover { + transform: translateY(-2px); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); + } + + .kpiValue { + font-size: 32px; + font-weight: 700; + color: #1a1a1a; + margin-bottom: 8px; + } + + .kpiLabel { + font-size: 14px; + color: #666; + margin-bottom: 8px; + } + + .kpiTrend { + display: flex; + align-items: center; + justify-content: center; + gap: 4px; + + .trendIcon { + color: #52c41a; + font-weight: bold; } - .cardContent { - .cardHeader { - position: relative; - display: flex; - justify-content: space-between; - margin-bottom: 10px; - .cardIcon { - color: #ffffff; - width: 48px; - height: 48px; - border-radius: 12px; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - .anticon { - font-size: 24px; - color: white; - } - } - .badge { - background: #ff6b35; - color: white; - font-size: 11px; - font-weight: 500; - padding: 4px 8px; - border-radius: 12px; - z-index: 2; - box-shadow: 0 1px 4px rgba(255, 107, 53, 0.3); - height: 24px; - // 新功能标签样式 - &[data-type="new"] { - background: #52c41a; - box-shadow: 0 1px 4px rgba(82, 196, 26, 0.3); - } - } - } - - .cardInfo { - flex: 1; - display: flex; - flex-direction: column; - justify-content: space-between; - - .cardTitle { - font-size: 16px; - font-weight: 600; - color: #1a1a1a; - margin: 0 0 8px 0; - line-height: 1.3; - } - - .cardDescription { - font-size: 14px; - color: #666; - line-height: 1.5; - margin: 0 0 12px 0; - display: -webkit-box; - -webkit-line-clamp: 2; - line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - flex: 1; - } - - .cardAction { - display: flex; - justify-content: space-between; - color: #979797; - font-size: 12px; - font-weight: 500; - - .arrow { - font-size: 14px; - transition: transform 0.3s ease; - } - - &:hover .arrow { - transform: translateX(4px); - } - } - } + .trendText { + font-size: 12px; + color: #52c41a; } } } @@ -180,63 +208,65 @@ .powerCenter { padding: 32px 24px; - .categorySection { - .categoryHeader { - .categoryIcon { - width: 44px; - height: 44px; + .pageHeader { + margin-bottom: 40px; - .anticon { - font-size: 22px; + .titleSection { + .mainTitle { + h1 { + font-size: 36px; + } + + .titleIcon { + font-size: 28px; } } - .categoryInfo { - .categoryTitle { - font-size: 22px; + .subtitle { + font-size: 16px; + } + } + } + + .coreFeatures { + .featureCard { + height: 360px; + + .cardContent { + padding: 24px; + + .cardHeader { + .cardIcon { + width: 56px; + height: 56px; + } + } + + .cardInfo { + .cardTitle { + font-size: 18px; + } + + .cardDescription { + font-size: 13px; + } + + .featureList { + li { + font-size: 12px; + } + } } } } + } - .featureCards { - .featureCard { - height: 180px; - width: 260px; - padding: 20px; + .kpiSection { + .kpiCard { + padding: 20px; - .cardContent { - .cardIcon { - width: 44px; - height: 44px; - margin: 18px auto 14px; - - .anticon { - font-size: 22px; - } - } - - .cardInfo { - padding: 0 14px 14px; - - .cardTitle { - font-size: 15px; - margin-bottom: 6px; - } - - .cardDescription { - font-size: 11px; - margin-bottom: 10px; - } - - .cardAction { - font-size: 11px; - - .arrow { - font-size: 12px; - } - } - } - } + .kpiValue { + font-size: 28px; } } } @@ -247,76 +277,89 @@ .powerCenter { padding: 24px 16px; - .categorySection { + .pageHeader { margin-bottom: 32px; - .categoryHeader { - .categoryIcon { - width: 40px; - height: 40px; + .titleSection { + .mainTitle { + flex-direction: column; + gap: 8px; - .anticon { - font-size: 20px; + h1 { + font-size: 28px; + } + + .titleIcon { + font-size: 24px; } } - .categoryInfo { - .categoryTitle { - font-size: 20px; + .subtitle { + font-size: 14px; + } + } + } + + .coreFeatures { + .featureCard { + height: 320px; + margin-bottom: 16px; + + .cardContent { + padding: 20px; + + .cardHeader { + margin-bottom: 16px; + + .cardIcon { + width: 48px; + height: 48px; + } + + .cardTag { + font-size: 11px; + padding: 4px 8px; + } } - .categoryCount { - font-size: 12px; - padding: 3px 10px; + .cardInfo { + .cardTitle { + font-size: 16px; + margin-bottom: 8px; + } + + .cardDescription { + font-size: 12px; + margin-bottom: 16px; + } + + .featureList { + li { + font-size: 11px; + margin-bottom: 6px; + } + } } } } + } - .featureCards { - .featureCard { - height: 160px; - width: 240px; - padding: 16px; + .kpiSection { + .kpiCard { + padding: 16px; + margin-bottom: 12px; - .cardContent { - .badge { - top: 10px; - right: 10px; - font-size: 10px; - padding: 3px 6px; - } + .kpiValue { + font-size: 24px; + } - .cardIcon { - width: 40px; - height: 40px; - margin: 16px auto 12px; + .kpiLabel { + font-size: 12px; + } - .anticon { - font-size: 20px; - } - } - - .cardInfo { - padding: 0 12px 12px; - - .cardTitle { - font-size: 14px; - margin-bottom: 6px; - } - - .cardDescription { - font-size: 10px; - margin-bottom: 8px; - } - - .cardAction { - font-size: 10px; - - .arrow { - font-size: 11px; - } - } - } + .kpiTrend { + .trendText { + font-size: 11px; } } } diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx index d0f00002..29aa7cbb 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx @@ -1,8 +1,9 @@ import React from "react"; import { useNavigate } from "react-router-dom"; import styles from "./index.module.scss"; -import { FeatureCard, featureCategories } from "./index.data.tsx"; +import { FeatureCard, featureCategories, kpiData } from "./index.data"; import { Col, Row } from "antd"; + const PowerCenter: React.FC = () => { const navigate = useNavigate(); @@ -14,82 +15,74 @@ const PowerCenter: React.FC = () => { return (
- {/* 功能分类展示 */} - {featureCategories.map(category => ( -
- {/* 分类标题 */} -
-
- {category.icon} -
-
-

{category.title}

- - {category.count}个功能 - -
+ {/* 页面标题区域 */} +
+
+
+
⭐
+

功能中心

+

+ AI智能营销·一站式客户管理·高效业务增长 +

+
+
- {/* 功能卡片 */} -
- - {category.features.map(card => ( - -
handleCardClick(card)} - > -
-
-
- {card.icon} -
- {/* 热门/新功能标签 */} - {(card.isHot || card.isNew) && ( -
- {card.isHot ? "热门" : "新功能"} -
- )} - - {/* 功能图标 */} -
- - {/* 功能信息 */} -
-

{card.title}

-

- {card.description} -

-
- 点击进入功能 - → -
-
+ {/* 核心功能模块 */} +
+ + {featureCategories.map(card => ( + +
handleCardClick(card)} + > +
+
+
{card.icon}
+
+ {card.tag}
- - ))} - -
-
- ))} - {/* 页面底部 */} -
-

触客宝 AI私域营销系统 - 让每一次沟通都更有价值

+
+

{card.title}

+

{card.description}

+ +
    + {card.features.map((feature, index) => ( +
  • {feature}
    • + ))} +
+
+
+
+ + ))} + +
+ + {/* KPI统计区域 */} +
+ + {kpiData.map(kpi => ( + +
+
{kpi.value}
+
{kpi.label}
+ {kpi.trend && ( +
+ {kpi.trend.icon} + {kpi.trend.text} +
+ )} +
+ + ))} +
); diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/MessageRecord.module.scss b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/MessageRecord.module.scss index d20bd680..c2cf7a46 100644 --- a/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/MessageRecord.module.scss +++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/ChatWindow/components/MessageRecord/MessageRecord.module.scss @@ -121,6 +121,11 @@ line-height: 1.4; white-space: pre-wrap; word-break: break-word; + &::after { + content: ""; + display: block; + clear: both; + } } // 表情包消息