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

<div class="mb-6">
    <div class="flex items-center">
        <a href="/admin/robots/{{.Robot.ID}}/contacts" 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>
        <span class="ml-4 px-2 py-1 text-xs rounded-full {{if eq .Contact.Type "group"}}bg-blue-100 text-blue-800{{else}}bg-green-100 text-green-800{{end}}">
            {{if eq .Contact.Type "group"}}群聊{{else}}好友{{end}}
        </span>
    </div>
</div>

<div class="grid grid-cols-4 gap-6">
    <!-- 左侧：联系人信息 -->
    <div class="col-span-1 bg-white rounded-lg shadow-md p-6">
        <div class="flex flex-col items-center">
            {{if .Contact.Avatar}}
                <img src="{{.Contact.Avatar}}" alt="{{.Contact.Nickname}}" class="w-24 h-24 rounded-full mb-4">
            {{else}}
                <div class="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 mb-4">
                    {{if eq .Contact.Type "group"}}
                        <i class="fas fa-users text-4xl"></i>
                    {{else}}
                        <i class="fas fa-user text-4xl"></i>
                    {{end}}
                </div>
            {{end}}
            
            <h2 class="text-xl font-medium text-center">{{.Contact.Nickname}}</h2>
            <p class="text-gray-500 text-sm mb-4">{{.Contact.WechatID}}</p>
            
            <div class="w-full border-t border-gray-200 pt-4 mt-2">
                <div class="flex justify-between items-center mb-2">
                    <span class="text-gray-600">类型：</span>
                    <span class="font-medium">{{if eq .Contact.Type "group"}}群聊{{else}}好友{{end}}</span>
                </div>
                {{if .Contact.Remark}}
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">备注：</span>
                    <span class="font-medium">{{.Contact.Remark}}</span>
                </div>
                {{end}}
            </div>
            
            <div class="w-full mt-6 space-y-3">
                {{if eq .Contact.Type "group"}}
                    <a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/members" class="block w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded text-center">
                        <i class="fas fa-users mr-2"></i> 查看群成员
                    </a>
                {{end}}
                <a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/messages" class="block w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded text-center">
                    <i class="fas fa-history mr-2"></i> 完整聊天记录
                </a>
            </div>
        </div>
    </div>
    
    <!-- 右侧：聊天记录 -->
    <div class="col-span-3">
        <div class="bg-white rounded-lg shadow-md p-6 h-[75vh] flex flex-col">
            <h2 class="text-lg font-medium mb-4 flex-shrink-0">最近聊天记录</h2>
            
            <div class="flex-grow overflow-y-auto mb-4 space-y-4" id="messages-container">
                {{if .Messages}}
                    {{range .Messages}}
                        <div class="flex {{if .IsFromMe}}justify-end{{else}}justify-start{{end}}">
                            <div class="max-w-[70%] {{if .IsFromMe}}bg-indigo-100 rounded-tl-lg rounded-tr-lg rounded-bl-lg{{else}}bg-gray-100 rounded-tl-lg rounded-tr-lg rounded-br-lg{{end}} p-3">
                                {{if not .IsFromMe}}
                                    <div class="text-xs text-gray-500 mb-1">{{.SenderName}}</div>
                                {{end}}
                                
                                {{if eq .ContentType "text"}}
                                    <p class="text-gray-800 whitespace-pre-wrap">{{.Content}}</p>
                                {{else if eq .ContentType "image"}}
                                    <div class="relative">
                                        <img src="{{.MediaURL}}" alt="图片" class="max-w-full rounded">
                                        <p class="mt-1 text-xs text-gray-500">[图片]</p>
                                    </div>
                                {{else if eq .ContentType "voice"}}
                                    <div class="flex items-center bg-gray-200 rounded p-2">
                                        <i class="fas fa-volume-up text-gray-600 mr-2"></i>
                                        <span class="text-sm text-gray-700">[语音消息]</span>
                                    </div>
                                {{else if eq .ContentType "video"}}
                                    <div class="flex items-center bg-gray-200 rounded p-2">
                                        <i class="fas fa-video text-gray-600 mr-2"></i>
                                        <span class="text-sm text-gray-700">[视频消息]</span>
                                    </div>
                                {{else if eq .ContentType "file"}}
                                    <div class="flex items-center bg-gray-200 rounded p-2">
                                        <i class="fas fa-file text-gray-600 mr-2"></i>
                                        <span class="text-sm text-gray-700">[文件] {{.Content}}</span>
                                    </div>
                                {{else}}
                                    <p class="text-gray-800">{{.Content}}</p>
                                {{end}}
                                
                                <div class="text-xs text-gray-400 mt-1 text-right">
                                    {{.SendTime.Format "2006-01-02 15:04:05"}}
                                </div>
                            </div>
                        </div>
                    {{end}}
                {{else}}
                    <div class="flex justify-center items-center h-full">
                        <div class="text-center text-gray-500">
                            <i class="fas fa-comments text-5xl mb-4"></i>
                            <p>没有聊天记录</p>
                        </div>
                    </div>
                {{end}}
            </div>
            
            <div class="flex-shrink-0 mt-auto border-t pt-4">
                <div class="flex items-center">
                    <input
                        type="text"
                        id="message-input"
                        placeholder="输入消息..."
                        class="flex-grow px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
                        disabled
                    >
                    <button
                        id="send-button"
                        class="ml-2 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
                        disabled
                    >
                        发送
                    </button>
                </div>
                <p class="text-xs text-gray-500 mt-2 text-center">消息发送功能暂未实现</p>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 滚动到最新消息
        const messagesContainer = document.getElementById('messages-container');
        messagesContainer.scrollTop = messagesContainer.scrollHeight;
        
        // 在实际应用中可以添加发送消息的功能
        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');
    });
</script>