From 2a45cf12768f33fb1d937f2e6788ae1d07b4cff8 Mon Sep 17 00:00:00 2001
From: xuncha <1658671838@qq.com>
Date: Tue, 27 Jan 2026 19:48:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AEui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/ContactsPage.scss | 70 +++++++++++++++----------------------
 src/pages/ContactsPage.tsx  |  3 --
 2 files changed, 28 insertions(+), 45 deletions(-)

diff --git a/src/pages/ContactsPage.scss b/src/pages/ContactsPage.scss
index 685ef4a..647423e 100644
--- a/src/pages/ContactsPage.scss
+++ b/src/pages/ContactsPage.scss
@@ -111,66 +111,52 @@
 
   .type-filters {
     display: flex;
-    gap: 16px;
+    gap: 12px;
     padding: 0 20px 12px;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    /* Allow horizontal scroll if needed on very small screens */
+
+    /* Hide scrollbar */
+    &::-webkit-scrollbar {
+      display: none;
+    }
 
     .filter-checkbox {
       display: flex;
+      /* Changed to flex with padding */
       align-items: center;
       gap: 8px;
       cursor: pointer;
       user-select: none;
       font-size: 14px;
       color: var(--text-primary);
+      padding: 6px 12px;
+      background: var(--bg-secondary);
+      border-radius: 8px;
+      transition: all 0.2s;
 
-      input[type="checkbox"] {
-        position: absolute;
-        opacity: 0;
-        pointer-events: none;
-
-        &:checked+.custom-checkbox {
-          background: var(--primary);
-          border-color: var(--primary);
-
-          &::after {
-            opacity: 1;
-            transform: scale(1);
-          }
-        }
+      &:hover {
+        background: var(--bg-hover);
       }
 
-      .custom-checkbox {
-        position: relative;
-        width: 18px;
-        height: 18px;
-        border: 2px solid var(--border-color);
-        border-radius: 4px;
-        background: var(--bg-primary);
-        transition: all 0.2s;
-
-        &::after {
-          content: '';
-          position: absolute;
-          left: 4px;
-          top: 1px;
-          width: 4px;
-          height: 8px;
-          border: solid white;
-          border-width: 0 2px 2px 0;
-          transform: rotate(45deg) scale(0);
-          opacity: 0;
-          transition: all 0.2s;
-        }
+      input[type="checkbox"] {
+        width: 16px;
+        height: 16px;
+        accent-color: var(--primary);
+        cursor: pointer;
+        opacity: 1;
+        /* Make visible */
+        position: static;
+        /* Make static */
+        pointer-events: auto;
+        /* Enable pointer events */
       }
 
       svg {
         color: var(--text-secondary);
         flex-shrink: 0;
-      }
-
-      &:hover .custom-checkbox {
-        border-color: var(--primary);
+        margin-left: 2px;
       }
     }
   }
diff --git a/src/pages/ContactsPage.tsx b/src/pages/ContactsPage.tsx
index 1e8ce72..3e6998f 100644
--- a/src/pages/ContactsPage.tsx
+++ b/src/pages/ContactsPage.tsx
@@ -230,7 +230,6 @@ function ContactsPage() {
                             checked={contactTypes.friends}
                             onChange={e => setContactTypes({ ...contactTypes, friends: e.target.checked })}
                         />
-                        <div className="custom-checkbox"></div>
                         <User size={16} />
                         <span>好友</span>
                     </label>
@@ -240,7 +239,6 @@ function ContactsPage() {
                             checked={contactTypes.groups}
                             onChange={e => setContactTypes({ ...contactTypes, groups: e.target.checked })}
                         />
-                        <div className="custom-checkbox"></div>
                         <Users size={16} />
                         <span>群聊</span>
                     </label>
@@ -250,7 +248,6 @@ function ContactsPage() {
                             checked={contactTypes.officials}
                             onChange={e => setContactTypes({ ...contactTypes, officials: e.target.checked })}
                         />
-                        <div className="custom-checkbox"></div>
                         <MessageSquare size={16} />
                         <span>公众号</span>
                     </label>