142 lines
6.7 KiB
HTML
142 lines
6.7 KiB
HTML
<div class="space-y-6">
|
||
<!-- 顶部导航链接 -->
|
||
<div class="flex items-center">
|
||
<a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.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">{{.Contact.Nickname}} 群成员</h1>
|
||
</div>
|
||
|
||
<!-- 群组信息 -->
|
||
<div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
|
||
{{if .Contact.Avatar}}
|
||
<img src="{{.Contact.Avatar}}" alt="{{.Contact.Nickname}}" class="w-16 h-16 rounded-full mr-4">
|
||
{{else}}
|
||
<div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 mr-4">
|
||
<i class="fas fa-users text-3xl"></i>
|
||
</div>
|
||
{{end}}
|
||
<div>
|
||
<h2 class="text-lg font-medium text-gray-800">{{.Contact.Nickname}}</h2>
|
||
<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 bg-blue-100 text-blue-800">
|
||
群聊
|
||
</span>
|
||
<span class="ml-2 text-sm text-gray-500">{{len .Members}} 名成员</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 搜索框 -->
|
||
<div class="relative">
|
||
<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 type="text" id="member-search" placeholder="搜索群成员..." class="block w-full pl-10 pr-3 py-2 border border-gray-200 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
|
||
</div>
|
||
|
||
<!-- 成员列表 -->
|
||
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
||
{{if .Members}}
|
||
{{range .Members}}
|
||
<div class="member-card border border-gray-100 rounded-lg p-4">
|
||
<div class="flex items-center">
|
||
{{if .Avatar}}
|
||
<img src="{{.Avatar}}" alt="{{.Nickname}}" class="w-12 h-12 rounded-full mr-4">
|
||
{{else}}
|
||
<div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center mr-4 text-gray-500">
|
||
<i class="fas fa-user"></i>
|
||
</div>
|
||
{{end}}
|
||
<div>
|
||
<h3 class="text-gray-900 font-medium member-name">{{.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 .Role "owner"}}bg-purple-100 text-purple-800{{else if eq .Role "admin"}}bg-indigo-100 text-indigo-800{{else}}bg-gray-100 text-gray-800{{end}}">
|
||
{{if eq .Role "owner"}}群主{{else if eq .Role "admin"}}管理员{{else}}成员{{end}}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{if .WechatID}}
|
||
<div class="mt-3 text-sm text-gray-500">
|
||
微信号: {{.WechatID}}
|
||
</div>
|
||
{{end}}
|
||
|
||
<div class="flex mt-4 pt-3 border-t border-gray-100 justify-end">
|
||
<button class="text-sm text-indigo-600 hover:text-indigo-800 mr-3 send-msg-btn"
|
||
data-id="{{.WechatID}}"
|
||
data-name="{{.Nickname}}"
|
||
data-avatar="{{.Avatar}}">
|
||
<i class="fas fa-comment mr-1"></i> 发消息
|
||
</button>
|
||
|
||
<button class="text-sm text-gray-500 hover:text-gray-700 view-info-btn"
|
||
data-id="{{.WechatID}}"
|
||
data-name="{{.Nickname}}">
|
||
<i class="fas fa-info-circle mr-1"></i> 详情
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
{{else}}
|
||
<div class="col-span-3 text-center py-10">
|
||
<i class="fas fa-users-slash text-5xl text-gray-300 mb-3"></i>
|
||
<p class="text-gray-500">没有找到群成员信息</p>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 搜索功能
|
||
const searchInput = document.getElementById('member-search');
|
||
const memberCards = document.querySelectorAll('.member-card');
|
||
|
||
searchInput.addEventListener('input', function() {
|
||
const searchTerm = this.value.toLowerCase();
|
||
|
||
memberCards.forEach(card => {
|
||
const name = card.querySelector('.member-name').textContent.toLowerCase();
|
||
if (name.includes(searchTerm)) {
|
||
card.classList.remove('hidden');
|
||
} else {
|
||
card.classList.add('hidden');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 发送消息按钮
|
||
document.querySelectorAll('.send-msg-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const memberId = this.dataset.id;
|
||
const memberName = this.dataset.name;
|
||
const memberAvatar = this.dataset.avatar;
|
||
|
||
// 这里可以调用发送消息的模态框
|
||
if (typeof App !== 'undefined' && typeof setMessageRecipient !== 'undefined') {
|
||
App.openModal('send-message-modal');
|
||
setMessageRecipient(memberId, memberName, 'friend', memberAvatar);
|
||
} else {
|
||
alert('发送消息给: ' + memberName);
|
||
}
|
||
});
|
||
});
|
||
|
||
// 查看详情按钮
|
||
document.querySelectorAll('.view-info-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
const memberId = this.dataset.id;
|
||
const memberName = this.dataset.name;
|
||
|
||
// 这里可以显示成员详情，暂时用alert代替
|
||
alert('查看详情: ' + memberName + ' (' + memberId + ')');
|
||
});
|
||
});
|
||
});
|
||
</script>
|