237 lines
10 KiB
HTML
237 lines
10 KiB
HTML
<div class="space-y-6">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<div class="flex items-center">
|
|
<a href="/admin/robots/{{.Robot.ID}}" class="text-indigo-600 hover:text-indigo-800 mr-4">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<h1 class="text-2xl font-bold text-gray-800">{{.Robot.Nickname}} 的联系人</h1>
|
|
</div>
|
|
{{if .Robot.WechatID}}
|
|
<p class="text-gray-500 mt-1">微信号：{{.Robot.WechatID}}</p>
|
|
{{end}}
|
|
</div>
|
|
|
|
<div class="flex space-x-2">
|
|
<button id="refresh-contacts" class="btn btn-secondary">
|
|
<i class="fas fa-sync-alt mr-1"></i> 刷新
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 联系人统计 -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div class="bg-white rounded-lg shadow-sm p-5">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4">
|
|
<i class="fas fa-address-book text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-gray-500">总联系人</div>
|
|
<div class="text-2xl font-semibold">{{len .Contacts}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-5">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
|
|
<i class="fas fa-user text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-gray-500">好友</div>
|
|
<div class="text-2xl font-semibold" id="friends-count">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm p-5">
|
|
<div class="flex items-center">
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
|
|
<i class="fas fa-users text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-gray-500">群聊</div>
|
|
<div class="text-2xl font-semibold" id="groups-count">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 搜索和过滤 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4">
|
|
<div class="flex flex-col sm:flex-row gap-4">
|
|
<div class="relative flex-grow">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<i class="fas fa-search text-gray-400"></i>
|
|
</div>
|
|
<input id="contact-search" type="text" placeholder="搜索联系人..."
|
|
class="block w-full pl-10 pr-3 py-2 border border-gray-200 rounded-md focus:ring-2 focus:ring-indigo-200 focus:border-indigo-300 shadow-sm">
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<button data-filter="all" class="px-4 py-2 rounded-md text-sm border-2 border-indigo-600 bg-indigo-600 text-white filter-btn">
|
|
全部
|
|
</button>
|
|
<button data-filter="friend" class="px-4 py-2 rounded-md text-sm border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 filter-btn">
|
|
好友
|
|
</button>
|
|
<button data-filter="group" class="px-4 py-2 rounded-md text-sm border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 filter-btn">
|
|
群聊
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 联系人列表 -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" id="contacts-grid">
|
|
{{if .Contacts}}
|
|
{{range .Contacts}}
|
|
<div class="contact-card bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-all" data-type="{{.Type}}">
|
|
<div class="p-4">
|
|
<div class="flex items-center">
|
|
{{if .Avatar}}
|
|
<img src="{{.Avatar}}" alt="{{.Nickname}}" class="w-12 h-12 rounded-full mr-4 object-cover">
|
|
{{else}}
|
|
<div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mr-4 text-gray-500">
|
|
{{if eq .Type "group"}}
|
|
<i class="fas fa-users"></i>
|
|
{{else}}
|
|
<i class="fas fa-user"></i>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="min-w-0 flex-1">
|
|
<h3 class="text-gray-900 font-medium truncate contact-name" title="{{.Nickname}}">{{.Nickname}}</h3>
|
|
<div class="flex items-center mt-1">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{if eq .Type "group"}}bg-blue-100 text-blue-800{{else}}bg-green-100 text-green-800{{end}}">
|
|
{{if eq .Type "group"}}群聊{{else}}好友{{end}}
|
|
</span>
|
|
{{if .WechatID}}
|
|
<span class="ml-2 text-xs text-gray-500 truncate">{{.WechatID}}</span>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 px-4 py-3 border-t border-gray-100 flex justify-end">
|
|
<a href="/admin/robots/{{$.Robot.ID}}/contacts/{{.ID}}" class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">
|
|
查看详情 <i class="fas fa-chevron-right ml-1"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{else}}
|
|
<div class="col-span-1 sm:col-span-2 lg:col-span-3 bg-white rounded-lg shadow-sm p-8 text-center">
|
|
<i class="fas fa-address-book text-5xl text-gray-300 mb-4"></i>
|
|
<h3 class="text-lg font-medium text-gray-700 mb-2">没有联系人</h3>
|
|
<p class="text-gray-500">机器人尚未同步联系人或者还没有联系人</p>
|
|
<button id="sync-contacts" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
|
|
<i class="fas fa-sync mr-2"></i> 同步联系人
|
|
</button>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 计算好友和群聊数量
|
|
function updateCounts() {
|
|
const contacts = document.querySelectorAll('.contact-card:not(.hidden)');
|
|
let friendsCount = 0;
|
|
let groupsCount = 0;
|
|
|
|
contacts.forEach(card => {
|
|
if (card.dataset.type === 'group') {
|
|
groupsCount++;
|
|
} else {
|
|
friendsCount++;
|
|
}
|
|
});
|
|
|
|
document.getElementById('friends-count').textContent = friendsCount;
|
|
document.getElementById('groups-count').textContent = groupsCount;
|
|
}
|
|
|
|
// 初始化计数
|
|
updateCounts();
|
|
|
|
// 搜索功能
|
|
const searchInput = document.getElementById('contact-search');
|
|
searchInput.addEventListener('input', function() {
|
|
const searchTerm = this.value.toLowerCase();
|
|
const contacts = document.querySelectorAll('.contact-card');
|
|
|
|
contacts.forEach(card => {
|
|
const name = card.querySelector('.contact-name').textContent.toLowerCase();
|
|
if (name.includes(searchTerm)) {
|
|
card.classList.remove('hidden');
|
|
} else {
|
|
card.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
updateCounts();
|
|
});
|
|
|
|
// 过滤功能
|
|
const filterButtons = document.querySelectorAll('.filter-btn');
|
|
let currentFilter = 'all';
|
|
|
|
filterButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// 更新按钮样式
|
|
filterButtons.forEach(btn => {
|
|
btn.classList.remove('bg-indigo-600', 'text-white', 'border-2', 'border-indigo-600');
|
|
btn.classList.add('bg-white', 'text-gray-700', 'border', 'border-gray-200');
|
|
});
|
|
|
|
this.classList.remove('bg-white', 'text-gray-700', 'border', 'border-gray-200');
|
|
this.classList.add('bg-indigo-600', 'text-white', 'border-2', 'border-indigo-600');
|
|
|
|
// 应用过滤
|
|
currentFilter = this.dataset.filter;
|
|
const contacts = document.querySelectorAll('.contact-card');
|
|
|
|
contacts.forEach(card => {
|
|
if (currentFilter === 'all' || card.dataset.type === currentFilter) {
|
|
card.classList.remove('hidden');
|
|
} else {
|
|
card.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
updateCounts();
|
|
});
|
|
});
|
|
|
|
// 刷新按钮
|
|
document.getElementById('refresh-contacts').addEventListener('click', function() {
|
|
const icon = this.querySelector('i');
|
|
icon.classList.add('animate-spin');
|
|
|
|
// 模拟刷新
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 500);
|
|
});
|
|
|
|
// 同步联系人按钮
|
|
const syncBtn = document.getElementById('sync-contacts');
|
|
if (syncBtn) {
|
|
syncBtn.addEventListener('click', function() {
|
|
this.disabled = true;
|
|
this.innerHTML = '<i class="fas fa-spinner animate-spin mr-2"></i> 同步中...';
|
|
|
|
// 这里实际上应该调用API
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 1500);
|
|
});
|
|
}
|
|
});
|
|
</script>
|