-
今日概览
-
-
-
-
+
今日发送
- 0
+
+
📊 今日概览
+
+
-
+
-
+
今日发送数量
+ 0
+
-
-
-
- 今日接收
- 0
+
+
-
+
今日接收数量
+ 0
+
-
-
-
活跃客户
- 0
+
+
+
活跃客户数
+ 0
+
- ${s}
+
+
+ `).join('');
+
+ shortcutsDisplay.innerHTML = shortcuts.map(s => `
+
+ `).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]');
@@ -160,5 +244,6 @@ const initAdmin = () => {
};
document.addEventListener('DOMContentLoaded', () => {
+ if (document.body.dataset.page === 'agent') initFrontend();
if (document.body.dataset.page === 'admin') initAdmin();
});
\ No newline at end of file
diff --git a/assets/pasted-20260318-133548-068e767a.png b/assets/pasted-20260318-133548-068e767a.png
new file mode 100644
index 0000000..8cb206c
Binary files /dev/null and b/assets/pasted-20260318-133548-068e767a.png differ
diff --git a/assets/pasted-20260318-133754-9e79eb96.png b/assets/pasted-20260318-133754-9e79eb96.png
new file mode 100644
index 0000000..d4aabaa
Binary files /dev/null and b/assets/pasted-20260318-133754-9e79eb96.png differ
diff --git a/assets/pasted-20260318-134030-9f06e8f9.png b/assets/pasted-20260318-134030-9f06e8f9.png
new file mode 100644
index 0000000..db737f9
Binary files /dev/null and b/assets/pasted-20260318-134030-9f06e8f9.png differ
diff --git a/assets/pasted-20260318-134348-b5f1b3ad.png b/assets/pasted-20260318-134348-b5f1b3ad.png
new file mode 100644
index 0000000..68c1bcb
Binary files /dev/null and b/assets/pasted-20260318-134348-b5f1b3ad.png differ
diff --git a/assets/pasted-20260318-151658-a33090bb.png b/assets/pasted-20260318-151658-a33090bb.png
new file mode 100644
index 0000000..c103b29
Binary files /dev/null and b/assets/pasted-20260318-151658-a33090bb.png differ
diff --git a/assets/pasted-20260318-152545-838ae9af.png b/assets/pasted-20260318-152545-838ae9af.png
new file mode 100644
index 0000000..fae6c4b
Binary files /dev/null and b/assets/pasted-20260318-152545-838ae9af.png differ
diff --git a/index.php b/index.php
index 84f2abe..aca10e8 100644
--- a/index.php
+++ b/index.php
@@ -14,58 +14,53 @@ declare(strict_types=1);
-
-
-
客户管理
-
-
-
-
+
- | 手机号 | -标签 | -状态 | -操作 | -
|---|
+
- 👥 客户管理
+
+
+
+
+
| 手机号 | +标签 | +状态 | +操作 | +
|---|
-
diff --git a/assets/css/custom.css b/assets/css/custom.css
index df83b66..09f7e31 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,16 +1,62 @@
-.topbar {
+/* Wrapper for Frontend */
+.app-frontend {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+.app-frontend .frontend-topbar {
display: flex;
justify-content: space-between;
align-items: center;
- padding: 1rem 2rem;
- background: #1f2937;
- color: #fff;
+ padding: 0.8rem 2rem;
+ background: #fff;
+ border-bottom: 1px solid #e5e7eb;
+ color: #333;
+ height: 60px;
}
-.brand { display: flex; align-items: center; gap: 10px; }
-.brand-badge { background: #25D366; color: white; padding: 5px 12px; border-radius: 5px; font-weight: bold; }
-.admin-shell { display: flex; min-height: 90vh; background: #f3f4f6; }
-.admin-sidebar { width: 240px; background: white; padding: 20px; border-right: 1px solid #e5e7eb; }
-.admin-content { flex: 1; padding: 20px; }
-.section-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
-.stat-card { padding: 15px; border-radius: 8px; background: #f9fafb; border: 1px solid #e5e7eb; }
-.toast-container { position: fixed; bottom: 20px; right: 20px; }
+.app-frontend .brand { display: flex; align-items: center; gap: 15px; font-weight: bold; }
+.app-frontend .frontend-app-shell {
+ display: flex;
+ flex: 1;
+ overflow: hidden;
+}
+.app-frontend .contacts-panel { width: 300px; border-right: 1px solid #e5e7eb; padding: 1rem; background: #fff;}
+.app-frontend .chat-panel { flex: 1; background: #f8f9fa; display: flex; flex-direction: column;}
+.app-frontend .frontend-chat-header { padding: 1rem; border-bottom: 1px solid #e5e7eb; background: #fff; }
+.app-frontend .frontend-chat-body { flex: 1; padding: 1rem; overflow-y: auto; }
+.app-frontend .frontend-chat-input-wrapper { padding: 1rem; border-top: 1px solid #e5e7eb; background: #fff; }
+
+/* Wrapper for Admin */
+.app-admin {
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+.app-admin .topbar {
+ height: 60px;
+ background: #25D366;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 20px;
+}
+.app-admin .brand { display: flex; align-items: center; gap: 15px; }
+.app-admin .admin-shell { display: flex; flex: 1; background: #f3f4f6; }
+.app-admin .admin-sidebar { width: 260px; background: white; padding: 20px; border-right: 1px solid #e5e7eb; }
+.app-admin .admin-sidebar .nav-link {
+ color: #374151;
+ padding: 12px 16px;
+ border-radius: 8px;
+ transition: all 0.2s;
+}
+.app-admin .admin-sidebar .nav-link:hover, .app-admin .admin-sidebar .nav-link.active {
+ background: #ecfdf5;
+ color: #059669;
+ font-weight: 600;
+}
+.app-admin .admin-content { flex: 1; padding: 20px; overflow-y: auto; }
+.app-admin .section-card { background: white; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
+.app-admin .stat-card { padding: 20px; border-radius: 12px; background: #f9fafb; border: 1px solid #e5e7eb; }
+.app-admin .btn-success { background-color: #25D366; border-color: #25D366; color: white; }
+.app-admin .btn-success:hover { background-color: #128C7E; border-color: #128C7E; }
+.app-admin .toast-container { position: fixed; bottom: 20px; right: 20px; }
\ No newline at end of file
diff --git a/assets/js/main.js b/assets/js/main.js
index 7690a0e..619ea6b 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -28,6 +28,90 @@ const showToast = (message, type = 'success') => {
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 => `
+ 消息记录
-
-
-
-
+
- | 手机号 | -方向 | -内容 | -时间 | -
|---|
+
- 💬 消息记录
+
+
+
+
+
| 手机号 | +方向 | +内容 | +时间 | +
|---|
-
+ 发送短信
- -
+
- 📤 发送短信
+ +
-
+ 自动回复
- -
+
- 🤖 自动回复规则
+ +
-
+ Twilio 配置
- -
+
- ⚙️ Twilio 配置
+ +
-
-
-
+ 系统设置
- -
+
+
+
+ 🖥 系统设置
+ +
+ ${c.name} ${c.code}
+
+ `).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) => `
+
- 
-
-
+
-
-
+
+
-
-
-
-
+
SMS短信平台
-
-
SMS短信平台
-
-
-
🔍 点击选择国家开始聊天...
+
-
-
+
-
-
-
+
+
-
- 请选择联系人
- 状态
+
+
- 🔍 点击选择国家开始聊天...
-
-
-
+
+
+
+
+
-
-
+
+
+
-
+
请选择联系人
+ 状态
+
+
+
+
+
+
+
+
+