wechat-robot/internal/view/message/index.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">
                {{if eq .Contact.Type "group"}}
                    <i class="fas fa-users text-3xl"></i>
                {{else}}
                    <i class="fas fa-user text-3xl"></i>
                {{end}}
            </div>
        {{end}}
        <div>
            <h2 class="text-xl font-medium">{{.Contact.Nickname}}</h2>
            <p class="text-gray-500">{{.Contact.WechatID}}</p>
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{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 class="ml-auto">
            <button onclick="App.openModal('send-message-modal'); setMessageRecipient('{{.Contact.ID}}', '{{.Contact.Nickname}}', '{{.Contact.Type}}', '{{.Contact.Avatar}}');" 
                class="btn btn-primary">
                <i class="fas fa-paper-plane mr-2"></i> 发送消息
            </button>
        </div>
    </div>
</div>

<!-- 消息列表 -->
<div class="bg-white rounded-lg shadow-md p-6">
    <!-- 分页控制 -->
    <div class="flex justify-between items-center mb-6">
        <span class="text-gray-600">共 {{.TotalPages}} 页</span>
        <div class="flex space-x-2">
            {{if .HasPrev}}
                <a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/messages?page={{.PrevPage}}" class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded">
                    <i class="fas fa-chevron-left mr-1"></i> 上一页
                </a>
            {{else}}
                <span class="px-3 py-1 bg-gray-100 text-gray-400 rounded cursor-not-allowed">
                    <i class="fas fa-chevron-left mr-1"></i> 上一页
                </span>
            {{end}}
            
            <span class="px-3 py-1 bg-indigo-600 text-white rounded">{{.Page}}</span>
            
            {{if .HasNext}}
                <a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/messages?page={{.NextPage}}" class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded">
                    下一页 <i class="fas fa-chevron-right ml-1"></i>
                </a>
            {{else}}
                <span class="px-3 py-1 bg-gray-100 text-gray-400 rounded cursor-not-allowed">
                    下一页 <i class="fas fa-chevron-right ml-1"></i>
                </span>
            {{end}}
        </div>
    </div>
    
    <!-- 消息列表 -->
    <div class="space-y-6">
        {{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-4">
                        {{if not .IsFromMe}}
                            <div class="flex items-center mb-2">
                                <span class="text-xs text-gray-500 font-medium">{{.SenderName}}</span>
                            </div>
                        {{end}}
                        
                        {{if eq .ContentType "text"}}
                            <p class="text-gray-800 whitespace-pre-wrap">{{.Content}}</p>
                        {{else if eq .ContentType "image"}}
                            <div class="mb-2">
                                <img src="{{.MediaURL}}" alt="图片消息" class="max-w-full rounded-md">
                            </div>
                            <p class="text-xs text-gray-500">图片消息</p>
                        {{else if eq .ContentType "file"}}
                            <div class="flex items-center">
                                <i class="fas fa-file text-gray-400 text-2xl mr-3"></i>
                                <div>
                                    <p class="text-gray-800">{{.Content}}</p>
                                    <p class="text-xs text-gray-500">文件消息</p>
                                </div>
                            </div>
                        {{else if eq .ContentType "video"}}
                            <div class="flex items-center">
                                <i class="fas fa-video text-gray-400 text-2xl mr-3"></i>
                                <div>
                                    <p class="text-gray-800">视频消息</p>
                                </div>
                            </div>
                        {{else if eq .ContentType "voice"}}
                            <div class="flex items-center">
                                <i class="fas fa-microphone text-gray-400 text-2xl mr-3"></i>
                                <div>
                                    <p class="text-gray-800">语音消息</p>
                                </div>
                            </div>
                        {{else}}
                            <p class="text-gray-800">{{.Content}}</p>
                        {{end}}
                        
                        <div class="flex justify-end mt-2">
                            <span class="text-xs text-gray-400">{{.SendTime.Format "2006-01-02 15:04:05"}}</span>
                        </div>
                    </div>
                </div>
            {{end}}
        {{else}}
            <div class="text-center py-12">
                <i class="fas fa-comment-slash text-5xl text-gray-300 mb-4"></i>
                <p class="text-gray-500">没有聊天记录</p>
            </div>
        {{end}}
    </div>
    
    <!-- 底部分页控制 -->
    <div class="flex justify-center mt-8">
        <div class="inline-flex rounded-md shadow-sm">
            {{if gt .TotalPages 1}}
                {{if gt .Page 2}}
                    <a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/messages?page=1" class="px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-l-md">
                        1
                    </a>
                {{end}}
                
                {{if .HasPrev}}
                    <a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/messages?page={{.PrevPage}}" class="px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 {{if not (gt .Page 2)}}rounded-l-md{{end}}">
                        {{.PrevPage}}
                    </a>
                {{end}}
                
                <span class="px-4 py-2 border border-gray-300 bg-indigo-600 text-sm font-medium text-white">
                    {{.Page}}
                </span>
                
                {{if .HasNext}}
                    <a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/messages?page={{.NextPage}}" class="px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 {{if not (lt .Page .TotalPages)}}rounded-r-md{{end}}">
                        {{.NextPage}}
                    </a>
                {{end}}
                
                {{if lt .Page (sub .TotalPages 1)}}
                    <a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/messages?page={{.TotalPages}}" class="px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 rounded-r-md">
                        {{.TotalPages}}
                    </a>
                {{end}}
            {{end}}
        </div>
    </div>
</div>

<!-- 引入发送消息对话框组件 -->
{{ embed "robot/send_message" .}}