From 644dd8912d0140cadb5f215e25cc9a5955fec91e 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: Tue, 25 Nov 2025 16:05:30 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84CustomerList=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=92=8C=E7=BB=93=E6=9E=84=E3=80=82?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=BA=86=E7=94=A8=E6=88=B7=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BB=A5=E8=8E=B7=E5=BE=97=E5=9C=A8?=
 =?UTF-8?q?=E7=BA=BF/=E7=A6=BB=E7=BA=BF=E7=8A=B6=E6=80=81=E7=9A=84?=
 =?UTF-8?q?=E6=9B=B4=E5=A5=BD=E8=A7=86=E8=A7=89=E5=8F=8D=E9=A6=88=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=86=E5=A4=B4=E5=83=8F=E5=8C=85=E8=A3=85?=
 =?UTF-8?q?=E4=BB=A5=E4=BF=9D=E6=8C=81=E5=B8=83=E5=B1=80=E4=B8=80=E8=87=B4?=
 =?UTF-8?q?=E6=80=A7=EF=BC=8C=E5=B9=B6=E8=B0=83=E6=95=B4=E4=BA=86=E5=9C=A8?=
 =?UTF-8?q?=E7=BA=BF=E6=8C=87=E7=A4=BA=E5=99=A8=E7=9A=84=E5=B0=BA=E5=AF=B8?=
 =?UTF-8?q?=E5=92=8C=E9=A2=9C=E8=89=B2=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CustomerList/com.module.scss   | 44 ++++++++++---------
 .../weChat/components/CustomerList/index.tsx  | 29 +++++++-----
 2 files changed, 42 insertions(+), 31 deletions(-)

diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/CustomerList/com.module.scss b/Touchkebao/src/pages/pc/ckbox/weChat/components/CustomerList/com.module.scss
index 29e92bf8..3decb640 100644
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/CustomerList/com.module.scss
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/CustomerList/com.module.scss
@@ -42,16 +42,25 @@
 
     &.active {
       .userAvatar {
-        border: 4px solid #1890ff;
+        border-color: #1890ff;
+      }
+    }
 
-        .active & {
-          border-color: #1890ff;
-        }
+    .avatarWrapper {
+      position: relative;
+    }
 
-        &.offline {
-          filter: grayscale(100%);
-          opacity: 0.6;
-        }
+    .userAvatar {
+      border: 4px solid transparent;
+      border-radius: 50%;
+      transition:
+        filter 0.2s ease,
+        opacity 0.2s ease,
+        border-color 0.2s ease;
+
+      &.offline {
+        filter: grayscale(100%);
+        opacity: 0.75;
       }
     }
     .allUser {
@@ -81,20 +90,13 @@
 
   .onlineIndicator {
     position: absolute;
-    bottom: 10px;
-    right: 10px;
-    width: 8px;
-    height: 8px;
+    bottom: 4px;
+    right: 4px;
+    width: 12px;
+    height: 12px;
     border-radius: 50%;
-    border: 1px solid #2e2e2e;
-
-    &.online {
-      background-color: #52c41a; // 绿色表示在线
-    }
-
-    &.offline {
-      background-color: #8c8c8c; // 灰色表示离线
-    }
+    border: 2px solid #ffffff;
+    background-color: #52c41a;
   }
 
   // 骨架屏样式
diff --git a/Touchkebao/src/pages/pc/ckbox/weChat/components/CustomerList/index.tsx b/Touchkebao/src/pages/pc/ckbox/weChat/components/CustomerList/index.tsx
index 55ba297f..6aa58c2b 100644
--- a/Touchkebao/src/pages/pc/ckbox/weChat/components/CustomerList/index.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/weChat/components/CustomerList/index.tsx
@@ -101,16 +101,25 @@ const CustomerList: React.FC = () => {
                   overflowCount={99}
                   className={styles.messageBadge}
                 >
-                  <Avatar
-                    src={customer.avatar}
-                    size={50}
-                    className={`${styles.userAvatar} ${!customer.isOnline ? styles.offline : ""}`}
-                    style={{
-                      backgroundColor: !customer.avatar ? "#1890ff" : undefined,
-                    }}
-                  >
-                    {!customer.avatar && customer.name.charAt(0)}
-                  </Avatar>
+                  <div className={styles.avatarWrapper}>
+                    <Avatar
+                      src={customer.avatar}
+                      size={50}
+                      className={`${styles.userAvatar} ${!customer.isOnline ? styles.offline : ""}`}
+                      style={{
+                        backgroundColor: !customer.avatar
+                          ? "#1890ff"
+                          : undefined,
+                      }}
+                    >
+                      {!customer.avatar && customer.name.charAt(0)}
+                    </Avatar>
+                    {customer.isOnline && (
+                      <span
+                        className={`${styles.onlineIndicator} ${styles.online}`}
+                      />
+                    )}
+                  </div>
                 </Badge>
               </div>
             ))}