wechat-robot/internal/view/contact/index.html

<div class="mb-6">
    <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>
</div>

<div class="mb-4 grid grid-cols-2 gap-4">
    <div class="bg-white rounded-lg shadow-md p-4">
        <div class="flex items-center">
            <div class="flex-shrink-0">
                {{if .Robot.Avatar}}
                    <img src="{{.Robot.Avatar}}" alt="{{.Robot.Nickname}}" class="w-16 h-16 rounded-full">
                {{else}}
                    <div class="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
                        <i class="fas fa-user text-2xl"></i>
                    </div>
                {{end}}
            </div>
            <div class="ml-4">
                <h2 class="text-lg font-medium text-gray-900">{{.Robot.Nickname}}</h2>
                <p class="text-sm text-gray-500">{{.Robot.WechatID}}</p>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{if eq .Robot.Status "online"}}bg-green-100 text-green-800{{else}}bg-gray-100 text-gray-800{{end}}">
                    {{if eq .Robot.Status "online"}}在线{{else}}离线{{end}}
                </span>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-lg shadow-md p-4">
        <div class="flex justify-between items-center h-full">
            <div>
                <span class="text-lg font-medium text-gray-900">联系人总数</span>
                <div class="mt-1 text-3xl font-semibold text-indigo-600">{{len .Contacts}}</div>
            </div>
            <div class="space-x-2">
                <button id="refresh-contacts" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
                    <i class="fas fa-sync-alt mr-1"></i> 刷新列表
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 联系人搜索框 -->
<div class="mb-6">
    <div class="flex items-center bg-white shadow-sm rounded-md overflow-hidden">
        <div class="pl-4 text-gray-400">
            <i class="fas fa-search"></i>
        </div>
        <input 
            id="contact-search" 
            type="text" 
            placeholder="搜索联系人..." 
            class="flex-grow py-3 px-4 focus:outline-none"
        >
    </div>
</div>

<!-- 联系人类型切换 -->
<div class="mb-6 flex space-x-2">
    <button class="contact-filter px-4 py-2 bg-indigo-600 text-white rounded" data-filter="all">全部</button>
    <button class="contact-filter px-4 py-2 bg-white text-gray-700 rounded" data-filter="friend">好友</button>
    <button class="contact-filter px-4 py-2 bg-white text-gray-700 rounded" data-filter="group">群组</button>
</div>

<!-- 联系人列表 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
    {{if .Contacts}}
        {{range .Contacts}}
            <div class="contact-card bg-white rounded-lg shadow-sm overflow-hidden" data-type="{{.Type}}">
                <div class="p-4">
                    <div class="flex items-center mb-3">
                        {{if .Avatar}}
                            <img src="{{.Avatar}}" alt="{{.Nickname}}" class="w-12 h-12 rounded-full mr-3">
                        {{else}}
                            <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 mr-3">
                                {{if eq .Type "group"}}
                                    <i class="fas fa-users text-xl"></i>
                                {{else}}
                                    <i class="fas fa-user text-xl"></i>
                                {{end}}
                            </div>
                        {{end}}
                        <div>
                            <h3 class="font-medium text-gray-900 truncate max-w-[150px]">{{.Nickname}}</h3>
                            <p class="text-sm text-gray-500">
                                {{if eq .Type "group"}}
                                    <i class="fas fa-users mr-1"></i> 群聊
                                {{else}}
                                    <i class="fas fa-user mr-1"></i> 好友
                                {{end}}
                            </p>
                        </div>
                    </div>
                    <div class="flex justify-between mt-2">
                        <a href="/admin/robots/{{.RobotID}}/contacts/{{.ID}}" class="text-sm text-indigo-600 hover:text-indigo-800">
                            <i class="fas fa-comment-alt mr-1"></i> 聊天记录
                        </a>
                        {{if eq .Type "group"}}
                            <a href="/admin/robots/{{.RobotID}}/contacts/{{.ID}}/members" class="text-sm text-indigo-600 hover:text-indigo-800">
                                <i class="fas fa-users mr-1"></i> 查看成员
                            </a>
                        {{end}}
                    </div>
                </div>
            </div>
        {{end}}
    {{else}}
        <div class="col-span-full bg-white rounded-lg shadow-md p-8 text-center">
            <div class="flex flex-col items-center">
                <i class="fas fa-address-book text-5xl text-gray-300 mb-4"></i>
                <p class="text-gray-500 mb-4">未找到联系人</p>
                <button id="fetch-contacts" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
                    <i class="fas fa-sync-alt mr-1"></i> 获取联系人列表
                </button>
            </div>
        </div>
    {{end}}
</div>

<script>
    // 联系人搜索功能
    document.addEventListener('DOMContentLoaded', function() {
        const searchInput = document.getElementById('contact-search');
        const contactCards = document.querySelectorAll('.contact-card');
        let currentFilter = 'all';

        searchInput.addEventListener('input', function() {
            filterContacts();
        });

        // 联系人类型过滤
        document.querySelectorAll('.contact-filter').forEach(button => {
            button.addEventListener('click', function() {
                // 更新按钮样式
                document.querySelectorAll('.contact-filter').forEach(btn => {
                    btn.classList.remove('bg-indigo-600', 'text-white');
                    btn.classList.add('bg-white', 'text-gray-700');
                });
                this.classList.remove('bg-white', 'text-gray-700');
                this.classList.add('bg-indigo-600', 'text-white');

                // 设置当前过滤器
                currentFilter = this.getAttribute('data-filter');
                filterContacts();
            });
        });

        function filterContacts() {
            const searchTerm = searchInput.value.toLowerCase();
            
            contactCards.forEach(card => {
                const name = card.querySelector('h3').textContent.toLowerCase();
                const type = card.getAttribute('data-type');
                const matchesSearch = name.includes(searchTerm);
                const matchesFilter = currentFilter === 'all' || type === currentFilter;
                
                if (matchesSearch && matchesFilter) {
                    card.style.display = '';
                } else {
                    card.style.display = 'none';
                }
            });
        }

        // 刷新联系人列表
        document.getElementById('refresh-contacts')?.addEventListener('click', function() {
            window.location.reload();
        });

        // 获取联系人列表
        document.getElementById('fetch-contacts')?.addEventListener('click', function() {
            window.location.reload();
        });
    });
</script>