249 lines
9.9 KiB
JavaScript
249 lines
9.9 KiB
JavaScript
const apiFetch = async (url, options = {}) => {
|
|
const opts = {
|
|
headers: { 'Content-Type': 'application/json' },
|
|
...options,
|
|
};
|
|
if (opts.body && typeof opts.body !== 'string') {
|
|
opts.body = JSON.stringify(opts.body);
|
|
}
|
|
const res = await fetch(url, opts);
|
|
if (!res.ok) {
|
|
throw new Error(`API error: ${res.status}`);
|
|
}
|
|
return res.json();
|
|
};
|
|
|
|
const showToast = (message, type = 'success') => {
|
|
const container = document.querySelector('.toast-container');
|
|
if (!container) return;
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast align-items-center text-bg-${type} border-0 show`;
|
|
toast.setAttribute('role', 'alert');
|
|
toast.innerHTML = `
|
|
<div class="d-flex">
|
|
<div class="toast-body">${message}</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
|
|
</div>`;
|
|
container.appendChild(toast);
|
|
setTimeout(() => toast.remove(), 3200);
|
|
};
|
|
|
|
const initFrontend = () => {
|
|
const countrySearch = document.getElementById('countrySearch');
|
|
const countryList = document.getElementById('countryList');
|
|
const selectedCode = document.getElementById('selectedCode');
|
|
const phoneNumber = document.getElementById('phoneNumber');
|
|
const startChat = document.getElementById('startChat');
|
|
const shortcutListUI = document.getElementById('shortcutList');
|
|
const newShortcut = document.getElementById('newShortcut');
|
|
const addShortcut = document.getElementById('addShortcut');
|
|
const chatInput = document.querySelector('[data-chat-input]');
|
|
const shortcutsDisplay = document.querySelector('[data-shortcuts]');
|
|
const emojiTrigger = document.querySelector('[data-emoji-trigger]');
|
|
const emojiPicker = document.querySelector('[data-emoji-picker]');
|
|
|
|
// Country Search & Selection
|
|
const renderCountries = (filter = '') => {
|
|
countryList.innerHTML = countries
|
|
.filter(c => c.name.includes(filter) || c.code.includes(filter))
|
|
.map(c => `
|
|
<div class="p-2 border-bottom" role="button" onclick="selectCountry('${c.name}', '${c.code}')">
|
|
${c.name} <span class="text-muted">${c.code}</span>
|
|
</div>
|
|
`).join('');
|
|
};
|
|
|
|
countrySearch.addEventListener('input', (e) => renderCountries(e.target.value));
|
|
|
|
window.selectCountry = (name, code) => {
|
|
selectedCode.textContent = code;
|
|
document.getElementById('searchTrigger').textContent = name + ' (' + code + ')';
|
|
bootstrap.Modal.getInstance(document.getElementById('countryModal')).hide();
|
|
};
|
|
|
|
renderCountries();
|
|
|
|
// Shortcuts Management
|
|
let shortcuts = JSON.parse(localStorage.getItem('shortcuts') || '[]');
|
|
|
|
const renderShortcuts = () => {
|
|
shortcutListUI.innerHTML = shortcuts.map((s, i) => `
|
|
<li class="list-group-item d-flex justify-content-between">${s}
|
|
<button class="btn btn-sm btn-danger" onclick="deleteShortcut(${i})">删除</button>
|
|
</li>
|
|
`).join('');
|
|
|
|
shortcutsDisplay.innerHTML = shortcuts.map(s => `
|
|
<button class="btn btn-sm btn-outline-info me-1" onclick="insertShortcut('${s}')">${s}</button>
|
|
`).join('');
|
|
};
|
|
|
|
window.insertShortcut = (text) => chatInput.value += text;
|
|
window.deleteShortcut = (index) => {
|
|
shortcuts.splice(index, 1);
|
|
localStorage.setItem('shortcuts', JSON.stringify(shortcuts));
|
|
renderShortcuts();
|
|
};
|
|
|
|
addShortcut.addEventListener('click', () => {
|
|
if (!newShortcut.value) return;
|
|
shortcuts.push(newShortcut.value);
|
|
localStorage.setItem('shortcuts', JSON.stringify(shortcuts));
|
|
newShortcut.value = '';
|
|
renderShortcuts();
|
|
});
|
|
|
|
renderShortcuts();
|
|
|
|
// Emoji Picker
|
|
emojiTrigger.addEventListener('click', () => emojiPicker.toggleAttribute('hidden'));
|
|
emojiPicker.addEventListener('emoji-click', (e) => {
|
|
chatInput.value += e.detail.unicode;
|
|
emojiPicker.setAttribute('hidden', '');
|
|
});
|
|
|
|
// Start Chat
|
|
startChat.addEventListener('click', () => {
|
|
if (!phoneNumber.value) return;
|
|
const phone = selectedCode.textContent + phoneNumber.value;
|
|
document.querySelector('[data-chat-title]').textContent = phone;
|
|
bootstrap.Modal.getInstance(document.getElementById('countryModal')).hide();
|
|
showToast('已开始与 ' + phone + ' 的聊天');
|
|
});
|
|
};
|
|
|
|
const initAdmin = () => {
|
|
const navLinks = document.querySelectorAll('[data-section-link]');
|
|
const sections = document.querySelectorAll('[data-section]');
|
|
|
|
navLinks.forEach(link => {
|
|
link.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const target = link.dataset.sectionLink;
|
|
navLinks.forEach(l => l.classList.remove('active'));
|
|
link.classList.add('active');
|
|
sections.forEach(s => s.classList.add('d-none'));
|
|
document.querySelector(`[data-section="${target}"]`).classList.remove('d-none');
|
|
|
|
if (target === 'dashboard') loadDashboard();
|
|
if (target === 'contacts') loadAdminContacts();
|
|
if (target === 'messages') loadAdminMessages();
|
|
if (target === 'auto') loadAutoReplies();
|
|
if (target === 'settings') loadSettings();
|
|
});
|
|
});
|
|
|
|
// Forms
|
|
document.querySelector('[data-send-form]')?.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const data = Object.fromEntries(new FormData(e.target));
|
|
try {
|
|
await apiFetch('/api/messages.php', { method: 'POST', body: { contact_phone: data.phone, body: data.body, direction: 'out' } });
|
|
showToast('发送成功');
|
|
e.target.reset();
|
|
} catch (e) { showToast('发送失败', 'danger'); }
|
|
});
|
|
|
|
document.querySelector('[data-reply-form]')?.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const data = Object.fromEntries(new FormData(e.target));
|
|
try {
|
|
await apiFetch('/api/auto_reply.php', { method: 'POST', body: data });
|
|
showToast('已添加规则');
|
|
e.target.reset();
|
|
loadAutoReplies();
|
|
} catch (e) { showToast('添加失败', 'danger'); }
|
|
});
|
|
|
|
document.querySelector('[data-settings-form]')?.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const data = Object.fromEntries(new FormData(e.target));
|
|
try {
|
|
await apiFetch('/api/settings.php', { method: 'POST', body: data });
|
|
showToast('配置已保存');
|
|
} catch (e) { showToast('保存失败', 'danger'); }
|
|
});
|
|
|
|
const loadDashboard = async () => {
|
|
try {
|
|
const data = await apiFetch('/api/stats.php');
|
|
document.querySelector('[data-stat="sent"]').textContent = data.sent || 0;
|
|
document.querySelector('[data-stat="received"]').textContent = data.received || 0;
|
|
document.querySelector('[data-stat="active"]').textContent = data.active || 0;
|
|
} catch (e) { console.error(e); }
|
|
};
|
|
|
|
const loadAdminContacts = async () => {
|
|
const data = await apiFetch('/api/contacts.php');
|
|
const list = document.querySelector('[data-admin-contacts]');
|
|
list.innerHTML = (data.contacts || []).map(c => `
|
|
<tr>
|
|
<td>${c.phone}</td>
|
|
<td>${c.tags || '-'}</td>
|
|
<td><span class="badge ${c.status === 'blocked' ? 'bg-danger' : 'bg-success'}">${c.status}</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary" onclick="toggleBlock('${c.id}', '${c.status}')">切换拉黑</button>
|
|
<button class="btn btn-sm btn-outline-danger" onclick="deleteContact('${c.id}')">删除</button>
|
|
</td>
|
|
</tr>
|
|
`).join('');
|
|
};
|
|
|
|
window.toggleBlock = async (id, currentStatus) => {
|
|
const newStatus = currentStatus === 'blocked' ? 'normal' : 'blocked';
|
|
await apiFetch(`/api/contacts.php?action=update&id=${id}`, { method: 'POST', body: { status: newStatus } });
|
|
loadAdminContacts();
|
|
};
|
|
|
|
window.deleteContact = async (id) => {
|
|
if (!confirm('确定删除？')) return;
|
|
await apiFetch(`/api/contacts.php?action=delete&id=${id}`, { method: 'POST' });
|
|
loadAdminContacts();
|
|
};
|
|
|
|
const loadAdminMessages = async () => {
|
|
const data = await apiFetch('/api/messages.php');
|
|
const list = document.querySelector('[data-admin-messages]');
|
|
list.innerHTML = (data.messages || []).map(m => `
|
|
<tr>
|
|
<td>${m.phone}</td>
|
|
<td>${m.direction}</td>
|
|
<td>${m.body}</td>
|
|
<td>${m.created_at}</td>
|
|
</tr>
|
|
`).join('');
|
|
};
|
|
|
|
const loadAutoReplies = async () => {
|
|
const data = await apiFetch('/api/auto_reply.php');
|
|
const list = document.querySelector('[data-reply-list]');
|
|
list.innerHTML = (data.rules || []).map(r => `
|
|
<li class="list-group-item d-flex justify-content-between">
|
|
<div><b>${r.keyword}</b>: ${r.reply}</div>
|
|
<button class="btn btn-sm btn-danger" onclick="deleteRule('${r.id}')">删除</button>
|
|
</li>
|
|
`).join('');
|
|
};
|
|
|
|
window.deleteRule = async (id) => {
|
|
await apiFetch(`/api/auto_reply.php?action=delete&id=${id}`, { method: 'POST' });
|
|
loadAutoReplies();
|
|
};
|
|
|
|
const loadSettings = async () => {
|
|
const data = await apiFetch('/api/settings.php');
|
|
if (!data) return;
|
|
const form = document.querySelector('[data-settings-form]');
|
|
form.sid.value = data.sid || '';
|
|
form.token.value = data.token || '';
|
|
form.from.value = data.from || '';
|
|
form.webhook.value = data.webhook || '';
|
|
};
|
|
|
|
loadDashboard();
|
|
};
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
if (document.body.dataset.page === 'agent') initFrontend();
|
|
if (document.body.dataset.page === 'admin') initAdmin();
|
|
}); |