ContactList State

<template>
  <div class="contact-manager">
    <div class="contact-stats">
      <div class="stat-item">
        <span class="stat-label">好友数量:</span>
        <span class="stat-value">{{ friendList.length }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">群组数量:</span>
        <span class="stat-value">{{ groupList.length }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">未读申请:</span>
        <span class="stat-value">{{ friendApplicationUnreadCount }}</span>
      </div>
    </div>

    <div class="contact-actions">
      <button @click="handleAddFriend" class="action-btn">添加好友</button>
      <button @click="handleMarkAsRead" class="action-btn">标记已读</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useContactListState } from '@tencentcloud/chat-uikit-vue3';

const {
  friendList,
  groupList,
  blackList,
  friendApplicationUnreadCount,
  friendGroupList,
  friendApplicationList,
  groupApplicationList,
  addFriend,
  deleteFriend,
  setFriendRemark,
  markFriendApplicationAsRead,
  acceptFriendApplication,
  refuseFriendApplication,
  addToBlacklist,
  removeFromBlacklist,
  createFriendGroup,
  deleteFriendGroup,
  addToFriendGroup,
  removeFromFriendGroup,
  joinGroup,
  acceptGroupApplication,
  refuseGroupApplication,
} = useContactListState();

const handleAddFriend = async () => {
  try {
    await addFriend({
      userID: 'user123',
      addSource: 'AddSource_Type_Web',
      remark: '朋友',
      wording: '你好',
    });
    console.log('好友添加成功');
  } catch (error) {
    console.error('添加好友失败:', error);
  }
};

const handleMarkAsRead = async () => {
  try {
    await markFriendApplicationAsRead();
    console.log('已标记为已读');
  } catch (error) {
    console.error('标记失败:', error);
  }
};
</script>

<style scoped>
.contact-manager {
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.contact-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 6px;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
}

.contact-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  padding: 8px 16px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.action-btn:hover {
  background-color: #40a9ff;
}
</style>