From 1ccdfa3e126140eb502396c5da5b63257acfc097 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?=
 <fsmecx@gmail.com>
Date: Fri, 12 Sep 2025 15:47:27 +0800
Subject: [PATCH] =?UTF-8?q?refactor(powerCenter):=20=E5=B0=86=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E5=8D=A1=E7=89=87=E5=92=8C=E6=A0=87=E7=AD=BE=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=8A=BD=E7=A6=BB=E5=88=B0=E5=8D=95=E7=8B=AC=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构功能中心页面，将功能卡片数据和标签数据抽离到独立的index.data.tsx文件中
使用useState和useMemo实现标签过滤功能
---
 .../pages/pc/ckbox/powerCenter/index.data.tsx | 113 ++++++++++++++
 .../src/pages/pc/ckbox/powerCenter/index.tsx  | 139 ++++--------------
 2 files changed, 143 insertions(+), 109 deletions(-)
 create mode 100644 Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx

diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx
new file mode 100644
index 00000000..000e7af8
--- /dev/null
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx
@@ -0,0 +1,113 @@
+import React from "react";
+import {
+  AimOutlined,
+  SendOutlined,
+  CalendarOutlined,
+  TagsOutlined,
+  UserOutlined,
+  MessageOutlined,
+  FileTextOutlined,
+  RobotOutlined,
+  UserAddOutlined,
+} from "@ant-design/icons";
+
+export interface FeatureCard {
+  id: string;
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  color: string;
+  path?: string;
+  isNew?: boolean;
+}
+
+export interface TabItem {
+  key: string;
+  label: string;
+  active?: boolean;
+}
+
+export const featureCards: FeatureCard[] = [
+  {
+    id: "precision-send",
+    title: "精准群发",
+    description: "基于客户标签和行为数据进行精准群发",
+    icon: <AimOutlined />,
+    color: "#ff6b35",
+    path: "/pc/ckbox/precision-send",
+  },
+  {
+    id: "sop-send",
+    title: "SOP群发",
+    description: "使用触客宝SOP标准化流程进行批量消息发送",
+    icon: <SendOutlined />,
+    color: "#4285f4",
+    path: "/pc/ckbox/sop-send",
+  },
+  {
+    id: "moments-marketing",
+    title: "朋友圈营销",
+    description: "AI智能生成朋友圈内容，提升品牌曝光度",
+    icon: <CalendarOutlined />,
+    color: "#34a853",
+    path: "/pc/ckbox/moments-marketing",
+  },
+  {
+    id: "tag-management",
+    title: "标签管理",
+    description: "智能客户标签分类，精准用户画像分析",
+    icon: <TagsOutlined />,
+    color: "#9c27b0",
+    path: "/pc/ckbox/tag-management",
+  },
+  {
+    id: "customer-management",
+    title: "客户好友管理",
+    description: "统一管理客户信息和好友关系，提升服务效率",
+    icon: <UserOutlined />,
+    color: "#6366f1",
+    path: "/pc/ckbox/customer-management",
+  },
+  {
+    id: "communication-record",
+    title: "沟通记录",
+    description: "完整记录客户沟通历史，支持多维度查询分析",
+    icon: <MessageOutlined />,
+    color: "#06b6d4",
+    path: "/pc/ckbox/communication-record",
+  },
+  {
+    id: "content-management",
+    title: "内容管理",
+    description: "素材管理、数据词汇库、关键词自动回复",
+    icon: <FileTextOutlined />,
+    color: "#f59e0b",
+    path: "/pc/ckbox/content-management",
+  },
+  {
+    id: "ai-training",
+    title: "AI模型训练",
+    description: "自定义AI模型训练，打造专属智能客服助手",
+    icon: <RobotOutlined />,
+    color: "#ec4899",
+    path: "/pc/ckbox/ai-training",
+    isNew: true,
+  },
+  {
+    id: "auto-greeting",
+    title: "自动打招呼",
+    description: "智能识别新好友，自动发送个性化欢迎消息",
+    icon: <UserAddOutlined />,
+    color: "#10b981",
+    path: "/pc/ckbox/auto-greeting",
+  },
+];
+
+export const tabItems: TabItem[] = [
+  { key: "all", label: "全部功能" },
+  { key: "marketing", label: "营销推广" },
+  { key: "customer", label: "客户管理" },
+  { key: "ai", label: "AI智能" },
+  { key: "content", label: "内容管理" },
+  { key: "data", label: "数据分析" },
+];
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
index fac0f191..4320e3d6 100644
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
@@ -1,107 +1,12 @@
-import React from "react";
+import React, { useState, useMemo } from "react";
 import { Card, Row, Col, Button, Space } from "antd";
-import {
-  AimOutlined,
-  SendOutlined,
-  CalendarOutlined,
-  TagsOutlined,
-  UserOutlined,
-  MessageOutlined,
-  FileTextOutlined,
-  RobotOutlined,
-  UserAddOutlined,
-} from "@ant-design/icons";
 import { useNavigate } from "react-router-dom";
+import { featureCards, tabItems, FeatureCard } from "./index.data";
 import styles from "./index.module.scss";
 
-interface FeatureCard {
-  id: string;
-  title: string;
-  description: string;
-  icon: React.ReactNode;
-  color: string;
-  path?: string;
-  isNew?: boolean;
-}
-
 const PowerCenter: React.FC = () => {
   const navigate = useNavigate();
-
-  const featureCards: FeatureCard[] = [
-    {
-      id: "precision-send",
-      title: "精准群发",
-      description: "基于客户标签和行为数据进行精准群发",
-      icon: <AimOutlined />,
-      color: "#ff6b35",
-      path: "/pc/ckbox/precision-send",
-    },
-    {
-      id: "sop-send",
-      title: "SOP群发",
-      description: "使用触客宝SOP标准化流程进行批量消息发送",
-      icon: <SendOutlined />,
-      color: "#4285f4",
-      path: "/pc/ckbox/sop-send",
-    },
-    {
-      id: "moments-marketing",
-      title: "朋友圈营销",
-      description: "AI智能生成朋友圈内容，提升品牌曝光度",
-      icon: <CalendarOutlined />,
-      color: "#34a853",
-      path: "/pc/ckbox/moments-marketing",
-    },
-    {
-      id: "tag-management",
-      title: "标签管理",
-      description: "智能客户标签分类，精准用户画像分析",
-      icon: <TagsOutlined />,
-      color: "#9c27b0",
-      path: "/pc/ckbox/tag-management",
-    },
-    {
-      id: "customer-management",
-      title: "客户好友管理",
-      description: "统一管理客户信息和好友关系，提升服务效率",
-      icon: <UserOutlined />,
-      color: "#6366f1",
-      path: "/pc/ckbox/customer-management",
-    },
-    {
-      id: "communication-record",
-      title: "沟通记录",
-      description: "完整记录客户沟通历史，支持多维度查询分析",
-      icon: <MessageOutlined />,
-      color: "#06b6d4",
-      path: "/pc/ckbox/communication-record",
-    },
-    {
-      id: "content-management",
-      title: "内容管理",
-      description: "素材管理、数据词汇库、关键词自动回复",
-      icon: <FileTextOutlined />,
-      color: "#f59e0b",
-      path: "/pc/ckbox/content-management",
-    },
-    {
-      id: "ai-training",
-      title: "AI模型训练",
-      description: "自定义AI模型训练，打造专属智能客服助手",
-      icon: <RobotOutlined />,
-      color: "#ec4899",
-      path: "/pc/ckbox/ai-training",
-      isNew: true,
-    },
-    {
-      id: "auto-greeting",
-      title: "自动打招呼",
-      description: "智能识别新好友，自动发送个性化欢迎消息",
-      icon: <UserAddOutlined />,
-      color: "#10b981",
-      path: "/pc/ckbox/auto-greeting",
-    },
-  ];
+  const [activeTab, setActiveTab] = useState("all");
 
   const handleCardClick = (card: FeatureCard) => {
     if (card.path) {
@@ -109,14 +14,27 @@ const PowerCenter: React.FC = () => {
     }
   };
 
-  const tabItems = [
-    { key: "all", label: "全部功能", active: true },
-    { key: "marketing", label: "营销推广" },
-    { key: "customer", label: "客户管理" },
-    { key: "ai", label: "AI智能" },
-    { key: "content", label: "内容管理" },
-    { key: "data", label: "数据分析" },
-  ];
+  const handleTabClick = (tabKey: string) => {
+    setActiveTab(tabKey);
+  };
+
+  // 根据选中的标签过滤功能卡片
+  const filteredCards = useMemo(() => {
+    if (activeTab === "all") {
+      return featureCards;
+    }
+
+    const categoryMap: { [key: string]: string[] } = {
+      marketing: ["precision-send", "sop-send", "moments-marketing"],
+      customer: ["customer-management", "tag-management"],
+      ai: ["ai-training", "auto-greeting"],
+      content: ["content-management"],
+      data: ["communication-record"],
+    };
+
+    const categoryIds = categoryMap[activeTab] || [];
+    return featureCards.filter(card => categoryIds.includes(card.id));
+  }, [activeTab]);
 
   return (
     <div className={styles.powerCenter}>
@@ -131,8 +49,11 @@ const PowerCenter: React.FC = () => {
             {tabItems.map(item => (
               <Button
                 key={item.key}
-                type={item.active ? "primary" : "text"}
-                className={item.active ? styles.activeTab : styles.tab}
+                type={activeTab === item.key ? "primary" : "text"}
+                className={
+                  activeTab === item.key ? styles.activeTab : styles.tab
+                }
+                onClick={() => handleTabClick(item.key)}
               >
                 {item.label}
               </Button>
@@ -144,7 +65,7 @@ const PowerCenter: React.FC = () => {
       {/* 功能卡片网格 */}
       <div className={styles.cardGrid}>
         <Row gutter={[24, 24]}>
-          {featureCards.map(card => (
+          {filteredCards.map(card => (
             <Col key={card.id} xs={24} sm={12} md={8} lg={6} xl={6}>
               <Card
                 className={styles.featureCard}