重构功能中心模块：更新功能卡片数据结构，新增KPI统计区域，优化样式和布局，提升用户体验和代码可读性。
This commit is contained in:
超级老白兔
@@ -64,9 +64,8 @@ const NavCommon: React.FC<NavCommonProps> = ({ 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<NavCommonProps> = ({ title = "触客宝" }) => {
|
||||
<Button
|
||||
icon={<BarChartOutlined />}
|
||||
type={!isWeChat() ? "primary" : "default"}
|
||||
onClick={handleMenuClick}
|
||||
onClick={() => handleMenuClick(0)}
|
||||
>
|
||||
功能中心
|
||||
</Button>
|
||||
<Button
|
||||
icon={<WechatOutlined />}
|
||||
type={isWeChat() ? "primary" : "default"}
|
||||
onClick={handleMenuClick}
|
||||
onClick={() => handleMenuClick(1)}
|
||||
>
|
||||
Ai智能客服
|
||||
</Button>
|
||||
|
||||
@@ -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: <AimOutlined style={{ fontSize: "24px" }} />,
|
||||
id: "customer-management",
|
||||
title: "客户好友管理",
|
||||
description: "管理客户关系,维护好友信息,查看沟通记录,提升客户满意度",
|
||||
icon: <TeamOutlined style={{ fontSize: "32px", color: "#1890ff" }} />,
|
||||
color: "#1890ff",
|
||||
count: 2,
|
||||
tag: "核心功能",
|
||||
features: [
|
||||
{
|
||||
id: "customer-management",
|
||||
title: "客户好友管理",
|
||||
description: "管理客户关系,维护好友信息,提升客户满意度",
|
||||
icon: <TeamOutlined style={{ fontSize: "24px" }} />,
|
||||
color: "#1890ff",
|
||||
path: "/pc/powerCenter/customer-management",
|
||||
isHot: true,
|
||||
},
|
||||
{
|
||||
id: "communication-record",
|
||||
title: "沟通记录",
|
||||
description: "记录和分析所有客户沟通历史,优化服务质量",
|
||||
icon: <CommentOutlined style={{ fontSize: "24px" }} />,
|
||||
color: "#52c41a",
|
||||
path: "/pc/powerCenter/communication-record",
|
||||
},
|
||||
"RFM价值评分系统",
|
||||
"多维度精准筛选",
|
||||
"完整聊天记录查看",
|
||||
"客户详情页面",
|
||||
],
|
||||
path: "/pc/powerCenter/customer-management",
|
||||
},
|
||||
{
|
||||
id: "ai",
|
||||
title: "AI智能功能",
|
||||
icon: <ThunderboltOutlined style={{ fontSize: "24px" }} />,
|
||||
id: "ai-reception",
|
||||
title: "AI接待设置",
|
||||
description: "配置AI自动回复,智能推送策略,提升接待效率和客户体验",
|
||||
icon: <CommentOutlined style={{ fontSize: "32px", color: "#722ed1" }} />,
|
||||
color: "#722ed1",
|
||||
count: 2,
|
||||
tag: "AI智能",
|
||||
features: [
|
||||
{
|
||||
id: "ai-training",
|
||||
title: "AI模型训练",
|
||||
description: "训练专属AI模型,提升智能服务能力",
|
||||
icon: <FileTextOutlined style={{ fontSize: "24px" }} />,
|
||||
color: "#fa8c16",
|
||||
path: "/pc/powerCenter/ai-training",
|
||||
isNew: true,
|
||||
},
|
||||
{
|
||||
id: "auto-greeting",
|
||||
title: "自动问候",
|
||||
description: "设置智能问候规则,自动化客户接待流程",
|
||||
icon: <SoundOutlined style={{ fontSize: "24px" }} />,
|
||||
color: "#722ed1",
|
||||
path: "/pc/powerCenter/auto-greeting",
|
||||
},
|
||||
"自动欢迎语设置",
|
||||
"AI智能推送策略",
|
||||
"标签化精准推送",
|
||||
"接待模式切换",
|
||||
],
|
||||
path: "/pc/powerCenter/ai-reception",
|
||||
},
|
||||
{
|
||||
id: "marketing",
|
||||
title: "营销管理",
|
||||
icon: <RiseOutlined style={{ fontSize: "24px" }} />,
|
||||
id: "content-library",
|
||||
title: "AI内容库配置",
|
||||
description: "管理AI内容库,配置调用权限,优化AI推送效果和内容质量",
|
||||
icon: <BookOutlined style={{ fontSize: "32px", color: "#52c41a" }} />,
|
||||
color: "#52c41a",
|
||||
count: 1,
|
||||
tag: "内容管理",
|
||||
features: [
|
||||
{
|
||||
id: "content-management",
|
||||
title: "内容管理",
|
||||
description: "管理营销内容,素材库,提升内容创作效率",
|
||||
icon: <EditOutlined style={{ fontSize: "24px" }} />,
|
||||
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% 本月",
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
<div className={styles.powerCenter}>
|
||||
{/* 功能分类展示 */}
|
||||
{featureCategories.map(category => (
|
||||
<div key={category.id} className={styles.categorySection}>
|
||||
{/* 分类标题 */}
|
||||
<div className={styles.categoryHeader}>
|
||||
<div
|
||||
className={styles.categoryIcon}
|
||||
style={{ backgroundColor: category.color }}
|
||||
>
|
||||
{category.icon}
|
||||
</div>
|
||||
<div className={styles.categoryInfo}>
|
||||
<h2 className={styles.categoryTitle}>{category.title}</h2>
|
||||
<span
|
||||
className={styles.categoryCount}
|
||||
style={{ backgroundColor: category.color, color: "#ffffff" }}
|
||||
>
|
||||
{category.count}个功能
|
||||
</span>
|
||||
</div>
|
||||
{/* 页面标题区域 */}
|
||||
<div className={styles.pageHeader}>
|
||||
<div className={styles.titleSection}>
|
||||
<div className={styles.mainTitle}>
|
||||
<div className={styles.titleIcon}>⭐</div>
|
||||
<h1>功能中心</h1>
|
||||
</div>
|
||||
<p className={styles.subtitle}>
|
||||
AI智能营销·一站式客户管理·高效业务增长
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 功能卡片 */}
|
||||
<div className={styles.featureCards}>
|
||||
<Row gutter={16}>
|
||||
{category.features.map(card => (
|
||||
<Col span={8} key={card.id}>
|
||||
<div
|
||||
key={card.id}
|
||||
className={styles.featureCard}
|
||||
onClick={() => handleCardClick(card)}
|
||||
>
|
||||
<div className={styles.cardContent}>
|
||||
<div className={styles.cardHeader}>
|
||||
<div
|
||||
className={styles.cardIcon}
|
||||
style={{ backgroundColor: card.color }}
|
||||
>
|
||||
{card.icon}
|
||||
</div>
|
||||
{/* 热门/新功能标签 */}
|
||||
{(card.isHot || card.isNew) && (
|
||||
<div
|
||||
className={styles.badge}
|
||||
data-type={card.isNew ? "new" : "hot"}
|
||||
>
|
||||
{card.isHot ? "热门" : "新功能"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 功能图标 */}
|
||||
</div>
|
||||
|
||||
{/* 功能信息 */}
|
||||
<div className={styles.cardInfo}>
|
||||
<h3 className={styles.cardTitle}>{card.title}</h3>
|
||||
<p className={styles.cardDescription}>
|
||||
{card.description}
|
||||
</p>
|
||||
<div className={styles.cardAction}>
|
||||
<span>点击进入功能</span>
|
||||
<span className={styles.arrow}>→</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* 核心功能模块 */}
|
||||
<div className={styles.coreFeatures}>
|
||||
<Row gutter={24}>
|
||||
{featureCategories.map(card => (
|
||||
<Col span={8} key={card.id}>
|
||||
<div
|
||||
className={styles.featureCard}
|
||||
onClick={() => handleCardClick(card)}
|
||||
>
|
||||
<div className={styles.cardContent}>
|
||||
<div className={styles.cardHeader}>
|
||||
<div className={styles.cardIcon}>{card.icon}</div>
|
||||
<div
|
||||
className={styles.cardTag}
|
||||
style={{ backgroundColor: card.color }}
|
||||
>
|
||||
{card.tag}
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* 页面底部 */}
|
||||
<div className={styles.footer}>
|
||||
<p>触客宝 AI私域营销系统 - 让每一次沟通都更有价值</p>
|
||||
<div className={styles.cardInfo}>
|
||||
<h3 className={styles.cardTitle}>{card.title}</h3>
|
||||
<p className={styles.cardDescription}>{card.description}</p>
|
||||
|
||||
<ul className={styles.featureList}>
|
||||
{card.features.map((feature, index) => (
|
||||
<li key={index}>{feature}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
|
||||
{/* KPI统计区域 */}
|
||||
<div className={styles.kpiSection}>
|
||||
<Row gutter={16}>
|
||||
{kpiData.map(kpi => (
|
||||
<Col span={6} key={kpi.id}>
|
||||
<div className={styles.kpiCard}>
|
||||
<div className={styles.kpiValue}>{kpi.value}</div>
|
||||
<div className={styles.kpiLabel}>{kpi.label}</div>
|
||||
{kpi.trend && (
|
||||
<div className={styles.kpiTrend}>
|
||||
<span className={styles.trendIcon}>{kpi.trend.icon}</span>
|
||||
<span className={styles.trendText}>{kpi.trend.text}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -121,6 +121,11 @@
|
||||
line-height: 1.4;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// 表情包消息
|
||||
|
||||
Reference in New Issue
Block a user