From be5a8483421edb9531bf23152f64e434b4d88f07 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, 10 Oct 2025 14:38:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=8A=9F=E8=83=BD=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83=E6=A8=A1=E5=9D=97=EF=BC=9A=E9=87=8D=E6=9E=84KPI?=
 =?UTF-8?q?=E7=BB=9F=E8=AE=A1=E5=8C=BA=E5=9F=9F=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA=E5=92=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C?=
 =?UTF-8?q?=E5=92=8C=E4=BB=A3=E7=A0=81=E5=8F=AF=E8=AF=BB=E6=80=A7=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/pc/ckbox/powerCenter/index.data.tsx |  17 +--
 .../src/pages/pc/ckbox/powerCenter/index.tsx  | 104 ++++++++++++++----
 2 files changed, 89 insertions(+), 32 deletions(-)

diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx
index 32f97176..34c14dd2 100644
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.data.tsx
@@ -92,21 +92,12 @@ export const kpiData: KPIData[] = [
     },
   },
   {
-    id: "ai-messages",
-    value: "3,542",
-    label: "AI处理消息",
+    id: "assigned-users",
+    value: "342",
+    label: "当前客服分配用户数",
     trend: {
       icon: "",
-      text: "今日",
-    },
-  },
-  {
-    id: "satisfaction",
-    value: "98%",
-    label: "客户满意度",
-    trend: {
-      icon: "↑",
-      text: "2% 本月",
+      text: "当前登录客服",
     },
   },
 ];
diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
index 29aa7cbb..d6d09e5d 100644
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/index.tsx
@@ -3,9 +3,19 @@ import { useNavigate } from "react-router-dom";
 import styles from "./index.module.scss";
 import { FeatureCard, featureCategories, kpiData } from "./index.data";
 import { Col, Row } from "antd";
+import {
+  UserOutlined,
+  TeamOutlined,
+  UsergroupAddOutlined,
+} from "@ant-design/icons";
 
 const PowerCenter: React.FC = () => {
   const navigate = useNavigate();
+  const getKpiBg = (id: string) => {
+    if (id === "total-customers") return "#1890ff";
+    if (id === "active-customers") return "#52c41a";
+    return "#722ed1";
+  };
 
   const handleCardClick = (card: FeatureCard) => {
     if (card.path) {
@@ -28,6 +38,78 @@ const PowerCenter: React.FC = () => {
         </div>
       </div>
 
+      {/* KPI统计区域（置顶，按图展示） */}
+      <div className={styles.kpiSection}>
+        <Row gutter={16}>
+          {kpiData.map(kpi => (
+            <Col span={8} key={kpi.id}>
+              <div className={styles.kpiCard}>
+                <div
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                  }}
+                >
+                  <div>
+                    <div
+                      className={styles.kpiLabel}
+                      style={{ textAlign: "left", marginBottom: 6 }}
+                    >
+                      {kpi.label}
+                    </div>
+                    <div
+                      className={styles.kpiValue}
+                      style={{ textAlign: "left", marginBottom: 6 }}
+                    >
+                      {kpi.value}
+                    </div>
+                    {kpi.trend && (
+                      <div
+                        className={styles.kpiTrend}
+                        style={{ justifyContent: "flex-start" }}
+                      >
+                        <span className={styles.trendIcon}>
+                          {kpi.trend.icon}
+                        </span>
+                        <span className={styles.trendText}>
+                          {kpi.trend.text}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                  <div
+                    aria-hidden
+                    style={{
+                      width: 56,
+                      height: 56,
+                      borderRadius: 12,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      background: getKpiBg(kpi.id),
+                      color: "#fff",
+                      boxShadow: "0 6px 14px rgba(0,0,0,0.18)",
+                    }}
+                  >
+                    {kpi.id === "total-customers" && (
+                      <UserOutlined style={{ fontSize: 22 }} />
+                    )}
+                    {kpi.id === "active-customers" && (
+                      <TeamOutlined style={{ fontSize: 22 }} />
+                    )}
+                    {kpi.id !== "total-customers" &&
+                      kpi.id !== "active-customers" && (
+                        <UsergroupAddOutlined style={{ fontSize: 22 }} />
+                      )}
+                  </div>
+                </div>
+              </div>
+            </Col>
+          ))}
+        </Row>
+      </div>
+
       {/* 核心功能模块 */}
       <div className={styles.coreFeatures}>
         <Row gutter={24}>
@@ -64,25 +146,9 @@ const PowerCenter: React.FC = () => {
           ))}
         </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 className={styles.footer}>
+        <p>触客宝 AI私域营销系统 - 让每一次沟通都更有价值</p>
       </div>
     </div>
   );