重构CustomerList组件样式和结构。更新了用户头像样式，以获得在线/离线状态的更好视觉反馈，添加了头像包装以保持布局一致性，并调整了在线指示器的尺寸和颜色。

Touchkebao/src/pages/pc/ckbox/weChat/components/CustomerList/com.module.scss

@@ -42,16 +42,25 @@
 
     &.active {
       .userAvatar {
-        border: 4px solid #1890ff;
-
-        .active & {
         border-color: #1890ff;
       }
+    }
+
+    .avatarWrapper {
+      position: relative;
+    }
+
+    .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.6;
-        }
+        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;
   }
 
   // 骨架屏样式

Touchkebao/src/pages/pc/ckbox/weChat/components/CustomerList/index.tsx

@@ -101,16 +101,25 @@ const CustomerList: React.FC = () => {
                   overflowCount={99}
                   className={styles.messageBadge}
                 >
+                  <div className={styles.avatarWrapper}>
                     <Avatar
                       src={customer.avatar}
                       size={50}
                       className={`${styles.userAvatar} ${!customer.isOnline ? styles.offline : ""}`}
                       style={{
-                      backgroundColor: !customer.avatar ? "#1890ff" : undefined,
+                        backgroundColor: !customer.avatar
+                          ? "#1890ff"
+                          : undefined,
                       }}
                     >
                       {!customer.avatar && customer.name.charAt(0)}
                     </Avatar>
+                    {customer.isOnline && (
+                      <span
+                        className={`${styles.onlineIndicator} ${styles.online}`}
+                      />
+                    )}
+                  </div>
                 </Badge>
               </div>
             ))}