From 29df2a3d8e4664c52405eb9c4da9a3763b96e288 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B9=98=E9=A3=8E?= Date: Fri, 16 Jan 2026 15:13:43 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=BC=BACustomerList=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=EF=BC=9A=E6=B7=BB=E5=8A=A0=E5=AE=A2=E6=88=B7=E4=BF=A1?= =?UTF-8?q?=E6=81=AF=E6=8F=90=E7=A4=BA=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98?= =?UTF-8?q?=E5=8C=96=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=94=B9=E5=96=84=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82=E6=9B=B4=E6=96=B0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E6=96=87=E4=BB=B6=E4=BB=A5=E6=94=AF=E6=8C=81=E6=96=B0?= =?UTF-8?q?=E7=9A=84tooltip=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=8A=A0=E8=BD=BD?= =?UTF-8?q?=E6=8C=87=E7=A4=BA=E5=99=A8=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/CustomerList/com.module.scss | 127 +++++++++++++----- .../weChat/components/CustomerList/index.tsx | 40 +++++- 2 files changed, 128 insertions(+), 39 deletions(-) diff --git a/src/pages/pc/ckbox/weChat/components/CustomerList/com.module.scss b/src/pages/pc/ckbox/weChat/components/CustomerList/com.module.scss index 3decb64..a2b100d 100644 --- a/src/pages/pc/ckbox/weChat/components/CustomerList/com.module.scss +++ b/src/pages/pc/ckbox/weChat/components/CustomerList/com.module.scss @@ -105,45 +105,98 @@ flex-direction: column; align-items: center; padding: 10px 0; - } - .skeletonItem { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 10px 0; - position: relative; - margin-bottom: 10px; - } - - .skeletonAvatar { - width: 50px; - height: 50px; - border-radius: 50%; - background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); - background-size: 200% 100%; - animation: skeleton-loading 1.5s infinite; - } - - .skeletonIndicator { - position: absolute; - bottom: 10px; - right: 10px; - width: 8px; - height: 8px; - border-radius: 50%; - background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); - background-size: 200% 100%; - animation: skeleton-loading 1.5s infinite; - } - - @keyframes skeleton-loading { - 0% { - background-position: 200% 0; + .skeletonItem { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 10px 0; + position: relative; + margin-bottom: 10px; } - 100% { - background-position: -200% 0; + + .skeletonAvatar { + width: 50px; + height: 50px; + border-radius: 50%; + background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); + background-size: 200% 100%; + animation: skeleton-loading 1.5s infinite; + } + + .skeletonIndicator { + position: absolute; + bottom: 10px; + right: 10px; + width: 8px; + height: 8px; + border-radius: 50%; + background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); + background-size: 200% 100%; + animation: skeleton-loading 1.5s infinite; + } + + @keyframes skeleton-loading { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } + } + } +} + +// Tooltip 样式 +:global { + .customerTooltip { + .ant-tooltip-inner { + background-color: rgba(0, 0, 0, 0.85); + padding: 12px 16px; + border-radius: 6px; + box-shadow: + 0 3px 6px -4px rgba(0, 0, 0, 0.12), + 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 9px 28px 8px rgba(0, 0, 0, 0.05); + } + + .ant-tooltip-arrow { + &::before { + background-color: rgba(0, 0, 0, 0.85); + } + } + } +} + +.tooltipContent { + min-width: 200px; + + .tooltipItem { + display: flex; + align-items: center; + line-height: 1.4; + margin-bottom: 6px; + + &:last-child { + margin-bottom: 0; + } + + .tooltipLabel { + color: rgba(255, 255, 255, 0.65); + font-size: 12px; + min-width: 70px; + flex-shrink: 0; + line-height: 1.4; + } + + .tooltipValue { + color: #ffffff; + font-size: 13px; + font-weight: 500; + word-break: break-all; + flex: 1; + line-height: 1.4; } } } diff --git a/src/pages/pc/ckbox/weChat/components/CustomerList/index.tsx b/src/pages/pc/ckbox/weChat/components/CustomerList/index.tsx index 8f50c57..2f834a5 100644 --- a/src/pages/pc/ckbox/weChat/components/CustomerList/index.tsx +++ b/src/pages/pc/ckbox/weChat/components/CustomerList/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { Avatar, Badge } from "antd"; +import { Avatar, Badge, Tooltip } from "antd"; import styles from "./com.module.scss"; import { useCustomerStore, @@ -74,6 +74,35 @@ const CustomerList: React.FC = () => { ); + // 渲染客服信息提示内容 + const renderTooltipContent = (customer: any) => { + const deviceName = customer.deviceExtra?.memo || customer.deviceExtra?.market_name || "未知设备"; + const deviceModel = customer.deviceExtra?.market_name || "未知型号"; + const wechatAlias = customer.alias || "未设置"; + const wechatId = customer.wechatId || "未知"; + + return ( +
+
+ 设备名称： + {deviceName} +
+
+ 设备型号： + {deviceModel} +
+
+ 微信号： + {wechatAlias} +
+
+ 微信ID： + {wechatId} +
+
+ ); + }; + return (
@@ -106,6 +135,12 @@ const CustomerList: React.FC = () => { count={getUnreadCount(customer.id)} overflowCount={99} className={styles.messageBadge} + > +
{ : undefined, }} > - {!customer.avatar && customer.name.charAt(0)} + {!customer.avatar && customer.nickname?.charAt(0)} {customer.isOnline && ( { /> )}
+
))}