135 lines
7.2 KiB
HTML
135 lines
7.2 KiB
HTML
<div id="send-message-modal" class="modal">
|
||
<div class="modal-backdrop"></div>
|
||
<div class="modal-container">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3>发送消息</h3>
|
||
<button class="modal-close" onclick="App.closeModal('send-message-modal')">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="send-message-form" class="space-y-4">
|
||
<input type="hidden" id="contact-id" name="contact_id" value="">
|
||
<input type="hidden" id="robot-id" name="robot_id" value="{{.Robot.ID}}">
|
||
|
||
<div>
|
||
<label for="recipient" class="block text-sm font-medium text-gray-700 mb-1">发送给</label>
|
||
<div class="flex items-center">
|
||
<img id="contact-avatar" src="" alt="Contact" class="w-8 h-8 rounded-full mr-3">
|
||
<div>
|
||
<div id="contact-name" class="text-sm font-medium">联系人名称</div>
|
||
<div id="contact-type" class="text-xs text-gray-500">联系人类型</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<label for="message-type" class="block text-sm font-medium text-gray-700 mb-1">消息类型</label>
|
||
<select id="message-type" name="type" class="form-control">
|
||
<option value="text" selected>文本</option>
|
||
<option value="image">图片</option>
|
||
<option value="file">文件</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div id="text-content-container">
|
||
<label for="message-content" class="block text-sm font-medium text-gray-700 mb-1">消息内容</label>
|
||
<textarea id="message-content" name="content" rows="5" class="form-control" placeholder="请输入消息内容..."></textarea>
|
||
</div>
|
||
|
||
<div id="file-content-container" class="hidden">
|
||
<label for="file-upload" class="block text-sm font-medium text-gray-700 mb-1">上传文件</label>
|
||
<div class="flex items-center justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
||
<div class="space-y-1 text-center">
|
||
<svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
|
||
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
||
</svg>
|
||
<div class="flex justify-center">
|
||
<label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
|
||
<span>上传文件</span>
|
||
<input id="file-upload" name="file" type="file" class="sr-only">
|
||
</label>
|
||
</div>
|
||
<p class="text-xs text-gray-500">PNG, JPG, PDF, DOC 最大 10MB</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="selected-file" class="hidden mt-2">
|
||
<div class="flex items-center text-sm">
|
||
<i class="fas fa-file mr-2 text-gray-400"></i>
|
||
<span id="file-name" class="text-xs text-gray-600 truncate"></span>
|
||
<button type="button" id="remove-file" class="ml-2 text-xs text-red-500">
|
||
<i class="fas fa-times"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn-secondary" onclick="App.closeModal('send-message-modal')">取消</button>
|
||
<button type="button" class="btn-primary" id="send-message-btn">发送</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// 消息类型切换
|
||
const messageType = document.getElementById('message-type');
|
||
const textContainer = document.getElementById('text-content-container');
|
||
const fileContainer = document.getElementById('file-content-container');
|
||
|
||
messageType.addEventListener('change', function() {
|
||
if (this.value === 'text') {
|
||
textContainer.classList.remove('hidden');
|
||
fileContainer.classList.add('hidden');
|
||
} else {
|
||
textContainer.classList.add('hidden');
|
||
fileContainer.classList.remove('hidden');
|
||
}
|
||
});
|
||
|
||
// 文件上传处理
|
||
const fileUpload = document.getElementById('file-upload');
|
||
const selectedFile = document.getElementById('selected-file');
|
||
const fileName = document.getElementById('file-name');
|
||
const removeFile = document.getElementById('remove-file');
|
||
|
||
fileUpload.addEventListener('change', function() {
|
||
if (this.files.length > 0) {
|
||
fileName.textContent = this.files[0].name;
|
||
selectedFile.classList.remove('hidden');
|
||
}
|
||
});
|
||
|
||
removeFile.addEventListener('click', function() {
|
||
fileUpload.value = '';
|
||
selectedFile.classList.add('hidden');
|
||
});
|
||
|
||
// 发送消息按钮处理
|
||
document.getElementById('send-message-btn').addEventListener('click', async function() {
|
||
// 模拟消息发送
|
||
App.notify('消息发送功能开发中', 'info');
|
||
App.closeModal('send-message-modal');
|
||
});
|
||
|
||
// 设置联系人信息到模态框
|
||
window.setMessageRecipient = function(contactId, name, type, avatar) {
|
||
document.getElementById('contact-id').value = contactId;
|
||
document.getElementById('contact-name').textContent = name;
|
||
document.getElementById('contact-type').textContent = type === 'group' ? '群聊' : '好友';
|
||
|
||
const avatarImg = document.getElementById('contact-avatar');
|
||
if (avatar) {
|
||
avatarImg.src = avatar;
|
||
} else {
|
||
avatarImg.src = type === 'group'
|
||
? '/public/images/default-group-avatar.png'
|
||
: '/public/images/default-user-avatar.png';
|
||
}
|
||
};
|
||
});
|
||
</script>
|