feat(ckchat): 添加联系人分组功能并实现骨架屏优化

添加新的联系人分组状态 newContractList 和对应的异步设置方法 asyncNewContractList
实现页面加载时的骨架屏效果，优化用户体验
重构 SidebarMenu 组件样式，分离骨架屏逻辑
新增 PageSkeleton 组件用于统一管理骨架屏

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

@@ -1,50 +1,100 @@
-.headerContainer {
-  background: #fff;
-  border-bottom: 1px solid #f0f0f0;
-}
-
-.searchBar {
-  padding: 16px 16px 8px;
+.sidebarMenu {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
   background: #fff;
 
-  :global(.ant-input) {
-    border-radius: 20px;
-    background: #f5f5f5;
-    border: none;
+  .headerContainer {
+    padding: 16px;
+    background: #fff;
+    border-bottom: 1px solid #f0f0f0;
 
-    &:focus {
+    .searchBar {
+      margin-bottom: 16px;
+      padding: 0;
       background: #fff;
-      border: 1px solid #1890ff;
-      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+
+      :global(.ant-input) {
+        border-radius: 20px;
+        background: #f5f5f5;
+        border: none;
+
+        &:focus {
+          background: #fff;
+          border: 1px solid #1890ff;
+          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+      }
+    }
+
+    .tabsContainer {
+      display: flex;
+      justify-content: space-around;
+      border-bottom: 1px solid #f0f0f0;
+      padding: 0 0 8px;
+
+      .tabItem {
+        padding: 8px 0;
+        flex: 1;
+        text-align: center;
+        cursor: pointer;
+        color: #999;
+        transition: all 0.3s;
+
+        &:hover {
+          color: #1890ff;
+        }
+
+        &.active {
+          color: #1890ff;
+          border-bottom: 2px solid #1890ff;
+        }
+
+        span {
+          margin-left: 4px;
+        }
+      }
     }
   }
 }
 
-.tabsContainer {
+// 骨架屏样式
+.skeletonContainer {
+  height: 100%;
+  padding: 16px;
   display: flex;
-  padding: 0 16px 8px;
-  border-bottom: 1px solid #f0f0f0;
+  flex-direction: column;
 
-  .tabItem {
+  .searchBarSkeleton {
+    margin-bottom: 16px;
+  }
+
+  .tabsContainerSkeleton {
     display: flex;
-    align-items: center;
-    padding: 8px 12px;
-    cursor: pointer;
-    border-radius: 4px;
-    transition: all 0.3s;
+    justify-content: space-around;
+    margin-bottom: 16px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f0f0;
+    gap: 8px;
+  }
 
-    &:hover {
-      color: #1890ff;
-      background-color: rgba(24, 144, 255, 0.1);
-    }
+  .contactListSkeleton {
+    flex: 1;
+    overflow-y: auto;
 
-    &.active {
-      color: #1890ff;
-      background-color: rgba(24, 144, 255, 0.1);
-    }
+    .contactItemSkeleton {
+      display: flex;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: 1px solid #f5f5f5;
 
-    span {
-      margin-left: 4px;
+      .contactInfoSkeleton {
+        margin-left: 12px;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
     }
   }
 }
@@ -59,3 +109,16 @@
   padding: 20px;
   text-align: center;
 }
+
+.contentContainer {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.footer {
+  padding: 10px;
+  text-align: center;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+  display: none; /* 默认隐藏底部，如果需要显示可以移除此行 */
+}