feat(chat): 侧栏筛选改tab按钮式(好友列表|群列表带计数,对齐云客聊天窗口)

Co-Authored-By: Claude <noreply@anthropic.com>

yunkes/src/components/ChatSidebar.vue

@@ -15,7 +15,7 @@ const emit = defineEmits<{ select: [ChatSession] }>()
 const sessions = ref<ChatSession[]>([])
 const loading = ref(false)
 const errorMsg = ref<string | null>(null)
-const filter = ref<'all' | 'friend' | 'group'>('all')
+const filter = ref<'all' | 'friend' | 'group'>('friend')
 const keyword = ref('')
 
 async function load() {
@@ -41,6 +41,9 @@ function sessionDisplayName(name: string | null | undefined): string {
   return name
 }
 
+const friendCount = computed(() => sessions.value.filter(s => s.type === 'friend').length)
+const groupCount = computed(() => sessions.value.filter(s => s.type === 'group').length)
+
 const filtered = computed(() =>
   sessions.value
     .filter((s) => (filter.value === 'all' ? true : s.type === filter.value))
@@ -61,11 +64,18 @@ watch(() => [props.ownerId, props.channel] as const, load, { immediate: true })
 <template>
   <div class="yk-chat-side">
     <div class="yk-chat-side__top">
-      <el-select v-model="filter" size="small" style="width: 96px">
+      <div class="yk-chat-side__tabs">
-        <el-option label="全部" value="all" />
+        <button
-        <el-option label="好友" value="friend" />
+          class="yk-chat-side__tab"
-        <el-option label="群聊" value="group" />
+          :class="{ 'is-active': filter === 'friend' }"
-      </el-select>
+          @click="filter = 'friend'"
+        >好友列表 <span class="yk-chat-side__count">{{ friendCount }}</span></button>
+        <button
+          class="yk-chat-side__tab"
+          :class="{ 'is-active': filter === 'group' }"
+          @click="filter = 'group'"
+        >群列表 <span class="yk-chat-side__count">{{ groupCount }}</span></button>
+      </div>
       <el-input v-model="keyword" size="small" placeholder="搜索昵称/号" clearable />
     </div>
     <el-alert v-if="errorMsg" :title="errorMsg" type="error" :closable="false" />
@@ -102,4 +112,35 @@ watch(() => [props.ownerId, props.channel] as const, load, { immediate: true })
 .yk-chat-side__name { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; color: #303133; }
 .yk-chat-side__today { font-size: 11px; color: #909399; flex-shrink: 0; }
 .yk-chat-side__time { font-size: 11px; color: #c0c4cc; margin-top: 2px; }
+.yk-chat-side__tabs {
+  display: flex;
+  gap: 0;
+  margin-bottom: 6px;
+  border-bottom: 1px solid #e4e7ed;
+}
+.yk-chat-side__tab {
+  flex: 1;
+  padding: 6px 8px;
+  font-size: 13px;
+  color: #5a6472;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.18s ease;
+  text-align: center;
+}
+.yk-chat-side__tab.is-active {
+  color: var(--el-color-primary);
+  border-bottom-color: var(--el-color-primary);
+  font-weight: 600;
+}
+.yk-chat-side__tab:hover {
+  color: var(--el-color-primary);
+}
+.yk-chat-side__count {
+  font-size: 11px;
+  color: #909399;
+  margin-left: 2px;
+}
 </style>