refactor(powerCenter): 将功能卡片和标签数据抽离到单独文件

重构功能中心页面，将功能卡片数据和标签数据抽离到独立的index.data.tsx文件中使用useState和useMemo实现标签过滤功能
2025-09-12 15:47:27 +08:00
parent 9816d7ec18
commit 1ccdfa3e12
2 changed files with 143 additions and 109 deletions
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx
+++ 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: "数据分析" },
+];
--- 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}