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

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

<div class="mb-6 bg-white rounded-lg shadow-md p-6">
    <div class="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-xl font-medium">{{.Contact.Nickname}}</h2>
            <p class="text-gray-500">{{.Contact.WechatID}}</p>
            <div class="mt-1 text-sm">成员数: <span class="font-medium">{{len .Members}}</span></div>
        </div>
        <div class="ml-auto">
            <button id="refresh-members" 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 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="member-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="member-filter px-4 py-2 bg-indigo-600 text-white rounded" data-filter="all">全部</button>
    <button class="member-filter px-4 py-2 bg-white text-gray-700 rounded" data-filter="owner">群主</button>
    <button class="member-filter px-4 py-2 bg-white text-gray-700 rounded" data-filter="admin">管理员</button>
    <button class="member-filter px-4 py-2 bg-white text-gray-700 rounded" data-filter="member">普通成员</button>
</div>

<!-- 成员列表 -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
    {{if .Members}}
        {{range .Members}}
            <div class="member-card bg-white rounded-lg shadow-sm overflow-hidden" data-role="{{.Role}}">
                <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">
                                <i class="fas fa-user text-xl"></i>
                            </div>
                        {{end}}
                        <div>
                            <h3 class="font-medium text-gray-900 truncate max-w-[150px]">{{.Nickname}}</h3>
                            <p class="text-xs flex items-center">
                                {{if eq .Role "owner"}}
                                    <span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded-full text-xs">群主</span>
                                {{else if eq .Role "admin"}}
                                    <span class="px-2 py-0.5 bg-blue-100 text-blue-800 rounded-full text-xs">管理员</span>
                                {{else}}
                                    <span class="px-2 py-0.5 bg-gray-100 text-gray-800 rounded-full text-xs">成员</span>
                                {{end}}
                            </p>
                        </div>
                    </div>
                    <div class="text-sm text-gray-500">
                        微信ID: {{.WechatID}}
                    </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-users text-5xl text-gray-300 mb-4"></i>
                <p class="text-gray-500 mb-4">未找到群成员</p>
                <button id="fetch-members" 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('member-search');
        const memberCards = document.querySelectorAll('.member-card');
        let currentFilter = 'all';

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

        // 成员角色过滤
        document.querySelectorAll('.member-filter').forEach(button => {
            button.addEventListener('click', function() {
                // 更新按钮样式
                document.querySelectorAll('.member-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');
                filterMembers();
            });
        });

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

        // 刷新成员列表
        document.getElementById('refresh-members')?.addEventListener('click', function() {
            window.location.reload();
        });

        // 获取成员列表
        document.getElementById('fetch-members')?.addEventListener('click', function() {
            window.location.reload();
        });
    });
</script>