style(ckbox): 调整垂直用户列表样式和布局

- 修改侧边栏边框颜色为浅色
- 增加侧边栏宽度和头像尺寸
- 更新用户列表背景色和文字颜色
- 优化选中状态的视觉表现

Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/VerticalUserList.module.scss

@@ -2,18 +2,15 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: #2e2e2e;
-  color: #fff;
-  width: 60px;
+  background-color: #ffffff;
 
   .userListHeader {
     padding: 10px 0;
     text-align: center;
-    border-bottom: 1px solid #3a3a3a;
     cursor: pointer;
     .allFriends {
       font-size: 12px;
-      color: #ccc;
+      color: #333333;
     }
   }
 
@@ -40,35 +37,19 @@
     padding: 10px 0;
     position: relative;
     cursor: pointer;
-
-    &:hover {
-      background-color: #3a3a3a;
-    }
+    background: #ffffff;
 
     &.active {
-      background-color: #3a3a3a;
+      .userAvatar {
+        border: 4px solid #1890ff;
 
-      &::before {
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translateY(-50%);
-        width: 3px;
-        height: 20px;
-        background-color: #1890ff;
+        .active & {
+          border-color: #1890ff;
+        }
       }
     }
   }
 
-  .userAvatar {
-    border: 2px solid transparent;
-
-    .active & {
-      border-color: #1890ff;
-    }
-  }
-
   .messageBadge {
     :global(.ant-badge-count) {
       background-color: #ff4d4f;
@@ -90,11 +71,11 @@
     height: 8px;
     border-radius: 50%;
     border: 1px solid #2e2e2e;
-    
+
     &.online {
       background-color: #52c41a; // 绿色表示在线
     }
-    
+
     &.offline {
       background-color: #8c8c8c; // 灰色表示离线
     }

Cunkebao/src/pages/pc/ckbox/components/VerticalUserList/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { Avatar, Badge, Tooltip } from "antd";
 import styles from "./VerticalUserList.module.scss";
 import { useCkChatStore, asyncKfSelected } from "@/store/module/ckchat/ckchat";
@@ -42,7 +42,7 @@ const VerticalUserList: React.FC = () => {
               >
                 <Avatar
                   src={user.avatar}
-                  size={40}
+                  size={50}
                   className={styles.userAvatar}
                   style={{
                     backgroundColor: !user.avatar ? "#1890ff" : undefined,

Cunkebao/src/pages/pc/ckbox/index.module.scss

@@ -16,7 +16,7 @@
 
   .verticalSider {
     background: #2e2e2e;
-    border-right: 1px solid #3a3a3a;
+    border-right: 1px solid #f0f0f0;
     overflow: hidden;
   }
 

Cunkebao/src/pages/pc/ckbox/index.tsx

@@ -58,7 +58,7 @@ const CkboxPage: React.FC = () => {
         <Layout>
           {/* 垂直侧边栏 */}
 
-          <Sider width={60} className={styles.verticalSider}>
+          <Sider width={80} className={styles.verticalSider}>
             <VerticalUserList />
           </Sider>