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 = "触客宝" }) => {
}
type={!isWeChat() ? "primary" : "default"}
- onClick={handleMenuClick}
+ onClick={() => handleMenuClick(0)}
>
功能中心
}
type={isWeChat() ? "primary" : "default"}
- onClick={handleMenuClick}
+ onClick={() => handleMenuClick(1)}
>
Ai智能客服
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}
+
+ )}
+