2025-04-02 14:29:44 +08:00

123 lines
6.5 KiB
HTML

<div class="space-y-6">
<!-- 顶部导航链接 -->
<div class="flex items-center text-sm text-gray-500 mb-6">
<a href="/admin/robots/{{.Robot.ID}}" class="hover:text-gray-700">{{.Robot.Nickname}}</a>
<span class="mx-2">/</span>
<a href="/admin/robots/{{.Robot.ID}}/contacts" class="hover:text-gray-700">联系人</a>
<span class="mx-2">/</span>
<span class="text-gray-700 font-medium">{{.Contact.Nickname}}</span>
</div>
<!-- 联系人详情卡片 -->
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
<!-- 头部信息 -->
<div class="p-6 flex items-center border-b border-gray-100">
<div class="flex-shrink-0 mr-6">
{{if .Contact.Avatar}}
<img src="{{.Contact.Avatar}}" alt="{{.Contact.Nickname}}" class="w-24 h-24 rounded-full object-cover">
{{else}}
<div class="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center text-gray-500">
{{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}}
</div>
<div class="flex-grow">
<h2 class="text-2xl font-bold text-gray-800 mb-1">{{.Contact.Nickname}}</h2>
<div class="flex flex-wrap items-center gap-3 mt-2">
{{if .Contact.WechatID}}
<div class="flex items-center text-gray-500 text-sm">
<i class="fas fa-id-card mr-2"></i> {{.Contact.WechatID}}
</div>
{{end}}
<div 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}}
</div>
</div>
{{if eq .Contact.Type "group"}}
<div class="mt-4">
<a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/members" class="text-indigo-600 hover:text-indigo-800 text-sm">
<i class="fas fa-users mr-1"></i> 查看群成员 ({{.MemberCount}})
</a>
</div>
{{end}}
</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 class="grid grid-cols-1 md:grid-cols-3 border-b border-gray-100">
<div class="p-6 border-r border-gray-100">
<div class="text-sm text-gray-500 mb-1">消息数量</div>
<div class="text-xl font-semibold text-gray-800">{{.MessageCount}}</div>
</div>
<div class="p-6 border-r border-gray-100">
<div class="text-sm text-gray-500 mb-1">上次互动</div>
<div class="text-xl font-semibold text-gray-800">{{if .LastMessage}}{{.LastMessage.SendTime.Format "2006-01-02 15:04"}}{{else}}无记录{{end}}</div>
</div>
<div class="p-6">
<div class="text-sm text-gray-500 mb-1">备注</div>
<div class="text-xl font-semibold text-gray-800">{{if .Contact.Remark}}{{.Contact.Remark}}{{else}}无{{end}}</div>
</div>
</div>
<!-- 最近消息和操作 -->
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-800">最近消息</h3>
<a href="/admin/robots/{{.Robot.ID}}/contacts/{{.Contact.ID}}/messages" class="text-indigo-600 hover:text-indigo-800 text-sm">
查看全部 <i class="fas fa-arrow-right ml-1"></i>
</a>
</div>
{{if .RecentMessages}}
<div class="space-y-4 max-h-80 overflow-y-auto p-2">
{{range .RecentMessages}}
<div class="flex {{if .IsFromMe}}justify-end{{else}}justify-start{{end}}">
<div class="max-w-sm {{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 font-medium mb-1">{{.SenderName}}</div>
{{end}}
{{if eq .ContentType "text"}}
<p class="text-sm text-gray-800">{{.Content}}</p>
{{else if eq .ContentType "image"}}
<p class="text-sm text-gray-500">[图片消息]</p>
{{else if eq .ContentType "file"}}
<p class="text-sm text-gray-500">[文件消息]</p>
{{else if eq .ContentType "video"}}
<p class="text-sm text-gray-500">[视频消息]</p>
{{else if eq .ContentType "voice"}}
<p class="text-sm text-gray-500">[语音消息]</p>
{{end}}
<div class="text-xs text-right text-gray-400 mt-1">{{.SendTime.Format "15:04"}}</div>
</div>
</div>
{{end}}
</div>
{{else}}
<div class="text-center py-8 bg-gray-50 rounded-lg">
<i class="fas fa-comment-slash text-3xl text-gray-300 mb-2"></i>
<p class="text-gray-500">暂无聊天记录</p>
</div>
{{end}}
</div>
</div>
</div>
<!-- 引入发送消息对话框组件 -->
{{ embed "robot/send_message" .}}