admin/39235-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Autosave: 20260318-121747

Browse Source
This commit is contained in:
Flatlogic Bot 2026-03-18 12:17:47 +00:00
parent 9124c519b0
commit 052aa7cf4a
15 changed files with 1128 additions and 534 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
admin.php Normal file
View File

@ -0,0 +1,213 @@
<?php
declare(strict_types=1);
@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');
?>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SMS Chat — 管理后台</title>
<?php
// Read project preview data from environment
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
?>
<?php if ($projectDescription): ?>
<!-- Meta description -->
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
<!-- Open Graph meta tags -->
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<!-- Twitter meta tags -->
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<?php endif; ?>
<?php if ($projectImageUrl): ?>
<!-- Open Graph image -->
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<!-- Twitter image -->
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<?php endif; ?>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/custom.css?v=<?= time() ?>" rel="stylesheet">
</head>
<body data-page="admin">
<header class="topbar">
<div class="brand">
<div class="brand-badge">S</div>
<div>
SMS Chat
<div class="small text-muted">管理后台</div>
</div>
</div>
<div class="meta">
<span class="status-pill">● 系统正常</span>
<span>管理员：Admin</span>
<a class="btn btn-sm btn-outline-secondary" href="index.php">返回工作台</a>
</div>
</header>
<main class="admin-shell">
<aside class="admin-sidebar">
<nav class="nav flex-column">
<a class="nav-link active" href="#" data-section-link="dashboard">仪表盘</a>
<a class="nav-link" href="#" data-section-link="contacts">客户管理</a>
<a class="nav-link" href="#" data-section-link="messages">消息记录</a>
<a class="nav-link" href="#" data-section-link="send">发送短信</a>
<a class="nav-link" href="#" data-section-link="auto">自动回复</a>
<a class="nav-link" href="#" data-section-link="settings">Twilio 配置</a>
<a class="nav-link" href="#" data-section-link="system">系统设置</a>
</nav>
</aside>
<section class="admin-content">
<div class="section-card mb-4" data-section="dashboard">
<h5 class="mb-3">今日概览</h5>
<div class="row g-3">
<div class="col-md-4">
<div class="stat-card">
<div class="muted">今日发送</div>
<div class="fs-3 fw-semibold" data-stat="sent">0</div>
</div>
</div>
<div class="col-md-4">
<div class="stat-card">
<div class="muted">今日接收</div>
<div class="fs-3 fw-semibold" data-stat="received">0</div>
</div>
</div>
<div class="col-md-4">
<div class="stat-card">
<div class="muted">活跃客户</div>
<div class="fs-3 fw-semibold" data-stat="active">0</div>
</div>
</div>
</div>
</div>
<div class="section-card mb-4 d-none" data-section="contacts">
<h5 class="mb-3">客户管理</h5>
<div class="table-responsive">
<table class="table align-middle">
<thead>
<tr>
<th>手机号</th>
<th>标签</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody data-admin-contacts></tbody>
</table>
</div>
</div>
<div class="section-card mb-4 d-none" data-section="messages">
<h5 class="mb-3">消息记录</h5>
<div class="table-responsive">
<table class="table align-middle">
<thead>
<tr>
<th>手机号</th>
<th>方向</th>
<th>内容</th>
<th>时间</th>
</tr>
</thead>
<tbody data-admin-messages></tbody>
</table>
</div>
</div>
<div class="section-card mb-4 d-none" data-section="send">
<h5 class="mb-3">发送短信</h5>
<form class="row g-3" data-send-form>
<div class="col-md-4">
<label class="form-label">手机号</label>
<input class="form-control" name="phone" placeholder="+86 138 0013 8000" required>
</div>
<div class="col-md-8">
<label class="form-label">短信内容</label>
<input class="form-control" name="body" placeholder="输入要发送的短信内容" required>
</div>
<div class="col-12">
<button class="btn btn-primary px-4" type="submit">发送</button>
</div>
</form>
</div>
<div class="section-card mb-4 d-none" data-section="auto">
<h5 class="mb-3">自动回复</h5>
<form class="row g-3 mb-4" data-reply-form>
<div class="col-md-4">
<label class="form-label">关键词</label>
<input class="form-control" name="keyword" required>
</div>
<div class="col-md-8">
<label class="form-label">回复内容</label>
<input class="form-control" name="reply" required>
</div>
<div class="col-12">
<button class="btn btn-primary px-4" type="submit">添加规则</button>
</div>
</form>
<ul class="list-group" data-reply-list></ul>
</div>
<div class="section-card mb-4 d-none" data-section="settings">
<h5 class="mb-3">Twilio 配置</h5>
<form class="row g-3" data-settings-form>
<div class="col-md-4">
<label class="form-label">Account SID</label>
<input class="form-control" name="sid" placeholder="ACxxxxxxxx">
</div>
<div class="col-md-4">
<label class="form-label">Auth Token</label>
<input class="form-control" name="token" placeholder="••••••••">
</div>
<div class="col-md-4">
<label class="form-label">From 号码</label>
<input class="form-control" name="from" placeholder="+14155550199">
</div>
<div class="col-12">
<label class="form-label">Webhook 地址</label>
<input class="form-control" name="webhook" placeholder="https://your-domain.com/twilio/webhook">
</div>
<div class="col-12">
<button class="btn btn-primary px-4" type="submit">保存配置</button>
</div>
</form>
</div>
<div class="section-card d-none" data-section="system">
<h5 class="mb-3">系统设置</h5>
<form class="row g-3" data-system-form>
<div class="col-md-4">
<label class="form-label">刷新频率（秒）</label>
<input class="form-control" name="refresh_interval" value="3">
</div>
<div class="col-md-4">
<label class="form-label">主题</label>
<select class="form-select" name="theme">
<option value="light">浅色</option>
<option value="dark">深色</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label">管理员名称</label>
<input class="form-control" name="admin_name" value="Admin">
</div>
<div class="col-12">
<button class="btn btn-primary px-4" type="submit">保存设置</button>
</div>
</form>
</div>
</section>
</main>
<div class="toast-container"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" defer></script>
<script src="assets/js/main.js?v=<?= time() ?>" defer></script>
</body>
</html>

84
api/_bootstrap.php Normal file
View File

@ -0,0 +1,84 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/../db/config.php';
function json_response(array $payload): void {
header('Content-Type: application/json; charset=utf-8');
echo json_encode($payload, JSON_UNESCAPED_UNICODE);
exit;
}
function ensure_schema(): void {
static $done = false;
if ($done) return;
$pdo = db();
$pdo->exec("
CREATE TABLE IF NOT EXISTS contacts (
id INT AUTO_INCREMENT PRIMARY KEY,
phone VARCHAR(32) NOT NULL UNIQUE,
name VARCHAR(64) NULL,
tags VARCHAR(255) NULL,
status ENUM('normal','blocked') DEFAULT 'normal',
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)
");
$pdo->exec("
CREATE TABLE IF NOT EXISTS messages (
id INT AUTO_INCREMENT PRIMARY KEY,
contact_id INT NOT NULL,
direction ENUM('in','out') NOT NULL DEFAULT 'out',
body TEXT NOT NULL,
is_read TINYINT(1) DEFAULT 0,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (contact_id) REFERENCES contacts(id)
)
");
$pdo->exec("
CREATE TABLE IF NOT EXISTS settings (
id INT AUTO_INCREMENT PRIMARY KEY,
category VARCHAR(32) NOT NULL,
name VARCHAR(64) NOT NULL,
value TEXT NULL,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
UNIQUE KEY unique_setting (category, name)
)
");
$pdo->exec("
CREATE TABLE IF NOT EXISTS auto_reply (
id INT AUTO_INCREMENT PRIMARY KEY,
keyword VARCHAR(120) NOT NULL,
reply TEXT NOT NULL,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
)
");
$count = (int)$pdo->query("SELECT COUNT(*) FROM contacts")->fetchColumn();
if ($count === 0) {
$stmt = $pdo->prepare("INSERT INTO contacts (phone, name, tags, status) VALUES (?, ?, ?, ?)");
$stmt->execute(['+86 138 0013 8000', '华北客户', 'VIP,续费', 'normal']);
$stmt->execute(['+86 139 0009 1212', '深圳客户', '新线索', 'normal']);
$stmt->execute(['+1 415 555 0198', '海外客户', '海外', 'normal']);
$contacts = $pdo->query("SELECT id, phone FROM contacts")->fetchAll();
$msgStmt = $pdo->prepare("INSERT INTO messages (contact_id, direction, body, is_read, created_at) VALUES (?, ?, ?, ?, ?)");
foreach ($contacts as $contact) {
$msgStmt->execute([$contact['id'], 'in', '您好，我想了解套餐价格。', 0, date('Y-m-d H:i:s', strtotime('-2 hours'))]);
$msgStmt->execute([$contact['id'], 'out', '您好，这里是客服，请问您关注哪种短信套餐？', 1, date('Y-m-d H:i:s', strtotime('-90 minutes'))]);
}
}
$done = true;
}
function read_json(): array {
$raw = file_get_contents('php://input');
$data = json_decode($raw, true);
if (is_array($data)) return $data;
return $_POST ?? [];
}

21
api/auto_reply.php Normal file
View File

@ -0,0 +1,21 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/_bootstrap.php';
ensure_schema();
$pdo = db();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = read_json();
$keyword = trim((string)($input['keyword'] ?? ''));
$reply = trim((string)($input['reply'] ?? ''));
if ($keyword === '' || $reply === '') {
json_response(['success' => false, 'error' => 'Missing fields']);
}
$stmt = $pdo->prepare("INSERT INTO auto_reply (keyword, reply) VALUES (?, ?)");
$stmt->execute([$keyword, $reply]);
json_response(['success' => true]);
}
$rules = $pdo->query("SELECT id, keyword, reply, created_at FROM auto_reply ORDER BY created_at DESC")->fetchAll();
json_response(['rules' => $rules]);

64
api/contacts.php Normal file
View File

@ -0,0 +1,64 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/_bootstrap.php';
ensure_schema();
$pdo = db();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = read_json();
$action = $input['action'] ?? '';
if (empty($action)) {
// Handle create/get contact
$phone = $input['phone'] ?? '';
if (empty($phone)) json_response(['success' => false, 'error' => 'Missing phone']);
$stmt = $pdo->prepare("SELECT * FROM contacts WHERE phone = ?");
$stmt->execute([$phone]);
$contact = $stmt->fetch();
if (!$contact) {
$stmt = $pdo->prepare("INSERT INTO contacts (phone) VALUES (?)");
$stmt->execute([$phone]);
$id = $pdo->lastInsertId();
$stmt = $pdo->prepare("SELECT * FROM contacts WHERE id = ?");
$stmt->execute([$id]);
$contact = $stmt->fetch();
}
json_response(['success' => true, 'contact' => $contact]);
}
if ($action === 'update') {
$id = (int)($input['id'] ?? 0);
if ($id <= 0) json_response(['success' => false, 'error' => 'Missing id']);
$fields = [];
$params = [];
foreach (['name', 'tags', 'status'] as $field) {
if (array_key_exists($field, $input)) {
$fields[] = "$field = ?";
$params[] = $input[$field];
}
}
if (!$fields) json_response(['success' => false, 'error' => 'No changes']);
$params[] = $id;
$stmt = $pdo->prepare("UPDATE contacts SET " . implode(', ', $fields) . " WHERE id = ?");
$stmt->execute($params);
json_response(['success' => true]);
}
json_response(['success' => false, 'error' => 'Unknown action']);
}
$sql = "
SELECT c.id, c.phone, c.name, c.tags, c.status, c.updated_at,
(SELECT body FROM messages m WHERE m.contact_id = c.id ORDER BY m.created_at DESC LIMIT 1) AS last_message,
(SELECT created_at FROM messages m WHERE m.contact_id = c.id ORDER BY m.created_at DESC LIMIT 1) AS last_time,
(SELECT COUNT(*) FROM messages m WHERE m.contact_id = c.id AND m.direction = 'in' AND m.is_read = 0) AS unread_count
FROM contacts c
ORDER BY last_time DESC, c.updated_at DESC
";
$contacts = $pdo->query($sql)->fetchAll();
json_response(['contacts' => $contacts]);

73
api/messages.php Normal file
View File

@ -0,0 +1,73 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/_bootstrap.php';
ensure_schema();
$pdo = db();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = read_json();
$body = trim((string)($input['body'] ?? ''));
if ($body === '') json_response(['success' => false, 'error' => 'Empty body']);
$direction = $input['direction'] ?? 'out';
$contactId = (int)($input['contact_id'] ?? 0);
$phone = trim((string)($input['phone'] ?? ''));
if ($contactId <= 0 && $phone === '') {
json_response(['success' => false, 'error' => 'Missing contact']);
}
if ($contactId <= 0 && $phone !== '') {
$stmt = $pdo->prepare("SELECT id FROM contacts WHERE phone = ?");
$stmt->execute([$phone]);
$contactId = (int)($stmt->fetchColumn() ?: 0);
if ($contactId <= 0) {
$insert = $pdo->prepare("INSERT INTO contacts (phone, name, tags, status) VALUES (?, ?, ?, 'normal')");
$insert->execute([$phone, $input['name'] ?? null, $input['tags'] ?? null]);
$contactId = (int)$pdo->lastInsertId();
}
}
$stmt = $pdo->prepare("INSERT INTO messages (contact_id, direction, body, is_read) VALUES (?, ?, ?, ?)");
$stmt->execute([$contactId, $direction, $body, $direction === 'in' ? 0 : 1]);
json_response(['success' => true, 'contact_id' => $contactId]);
}
if (isset($_GET['all'])) {
$phoneFilter = trim((string)($_GET['phone'] ?? ''));
if ($phoneFilter !== '') {
$stmt = $pdo->prepare("
SELECT m.id, m.direction, m.body, m.created_at, c.phone
FROM messages m
JOIN contacts c ON c.id = m.contact_id
WHERE c.phone LIKE ?
ORDER BY m.created_at DESC
LIMIT 200
");
$stmt->execute(['%' . $phoneFilter . '%']);
$messages = $stmt->fetchAll();
} else {
$messages = $pdo->query("
SELECT m.id, m.direction, m.body, m.created_at, c.phone
FROM messages m
JOIN contacts c ON c.id = m.contact_id
ORDER BY m.created_at DESC
LIMIT 200
")->fetchAll();
}
json_response(['messages' => $messages]);
}
$contactId = (int)($_GET['contact_id'] ?? 0);
if ($contactId <= 0) {
json_response(['messages' => []]);
}
$stmt = $pdo->prepare("SELECT id, direction, body, created_at FROM messages WHERE contact_id = ? ORDER BY created_at ASC");
$stmt->execute([$contactId]);
$messages = $stmt->fetchAll();
$pdo->prepare("UPDATE messages SET is_read = 1 WHERE contact_id = ? AND direction = 'in'")->execute([$contactId]);
json_response(['messages' => $messages]);

34
api/settings.php Normal file
View File

@ -0,0 +1,34 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/_bootstrap.php';
ensure_schema();
$pdo = db();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$input = read_json();
$category = $input['category'] ?? 'general';
$data = $input['data'] ?? [];
if (!is_array($data)) {
json_response(['success' => false, 'error' => 'Invalid data']);
}
$stmt = $pdo->prepare("
INSERT INTO settings (category, name, value)
VALUES (?, ?, ?)
ON DUPLICATE KEY UPDATE value = VALUES(value), updated_at = CURRENT_TIMESTAMP
");
foreach ($data as $key => $value) {
$stmt->execute([$category, $key, (string)$value]);
}
json_response(['success' => true]);
}
$category = $_GET['category'] ?? 'general';
$stmt = $pdo->prepare("SELECT name, value FROM settings WHERE category = ?");
$stmt->execute([$category]);
$settings = $stmt->fetchAll();
$out = [];
foreach ($settings as $row) {
$out[$row['name']] = $row['value'];
}
json_response(['settings' => $out]);

16
api/stats.php Normal file
View File

@ -0,0 +1,16 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/_bootstrap.php';
ensure_schema();
$pdo = db();
$sent = (int)$pdo->query("SELECT COUNT(*) FROM messages WHERE direction = 'out' AND DATE(created_at) = CURDATE()")->fetchColumn();
$received = (int)$pdo->query("SELECT COUNT(*) FROM messages WHERE direction = 'in' AND DATE(created_at) = CURDATE()")->fetchColumn();
$active = (int)$pdo->query("SELECT COUNT(DISTINCT contact_id) FROM messages WHERE created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY)")->fetchColumn();
json_response([
'sent_today' => $sent,
'received_today' => $received,
'active_contacts' => $active,
]);

684
assets/css/custom.css
View File

@ -1,403 +1,353 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
:root {
--bg: #f5f7f9;
--surface: #ffffff;
--text: #111827;
--muted: #6b7280;
--border: #e5e7eb;
--primary: #25d366;
--primary-dark: #1ea856;
--sidebar-dark: #1f2937;
--sidebar-dark-muted: #9ca3af;
--shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
--radius-sm: 8px;
--radius-md: 12px;
}
* {
box-sizing: border-box;
}
body {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
color: #212529;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
margin: 0;
min-height: 100vh;
font-family: 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
background: var(--bg);
color: var(--text);
}
.main-wrapper {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
padding: 20px;
box-sizing: border-box;
position: relative;
z-index: 1;
.topbar {
height: 64px;
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1.5rem;
position: sticky;
top: 0;
z-index: 10;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
.brand {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 700;
font-size: 1.1rem;
}
.chat-container {
width: 100%;
max-width: 600px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
display: flex;
flex-direction: column;
height: 85vh;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
overflow: hidden;
.brand-badge {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--primary);
color: #fff;
display: grid;
place-items: center;
font-weight: 700;
}
.topbar .meta {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.9rem;
color: var(--muted);
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: rgba(37, 211, 102, 0.12);
color: var(--primary-dark);
font-weight: 600;
font-size: 0.75rem;
}
.app-shell {
height: calc(100vh - 64px);
display: flex;
gap: 1rem;
padding: 1rem 1.5rem 1.5rem;
}
.panel {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
}
.contacts-panel {
width: 320px;
display: flex;
flex-direction: column;
}
.contacts-panel .search {
padding: 1rem;
border-bottom: 1px solid var(--border);
}
.contacts-list {
overflow-y: auto;
}
.contact-item {
padding: 0.85rem 1rem;
border-bottom: 1px solid var(--border);
cursor: pointer;
display: flex;
justify-content: space-between;
gap: 0.75rem;
transition: background 0.15s ease;
}
.contact-item:hover,
.contact-item.active {
background: rgba(37, 211, 102, 0.08);
}
.contact-item .meta {
font-size: 0.75rem;
color: var(--muted);
}
.unread {
background: var(--primary);
color: #fff;
border-radius: 999px;
font-size: 0.7rem;
padding: 0.1rem 0.45rem;
font-weight: 700;
}
.chat-panel {
flex: 1;
display: flex;
flex-direction: column;
}
.chat-header {
padding: 1.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
background: rgba(255, 255, 255, 0.5);
font-weight: 700;
font-size: 1.1rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
.chat-actions .btn {
border-radius: 999px;
font-size: 0.8rem;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
.chat-body {
flex: 1;
padding: 1.25rem;
overflow-y: auto;
background: #fafafa;
}
.message {
max-width: 85%;
padding: 0.85rem 1.1rem;
border-radius: 16px;
line-height: 1.5;
font-size: 0.95rem;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
animation: fadeIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
max-width: 70%;
padding: 0.65rem 0.9rem;
border-radius: 14px;
margin-bottom: 0.6rem;
font-size: 0.9rem;
line-height: 1.4;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
.message.in {
background: #ffffff;
border: 1px solid var(--border);
}
.message.visitor {
align-self: flex-end;
background: linear-gradient(135deg, #212529 0%, #343a40 100%);
color: #fff;
border-bottom-right-radius: 4px;
.message.out {
background: rgba(37, 211, 102, 0.18);
margin-left: auto;
border: 1px solid rgba(37, 211, 102, 0.3);
}
.message.bot {
align-self: flex-start;
background: #ffffff;
color: #212529;
border-bottom-left-radius: 4px;
.message .time {
font-size: 0.7rem;
color: var(--muted);
margin-top: 0.35rem;
}
.chat-input-area {
padding: 1.25rem;
background: rgba(255, 255, 255, 0.5);
border-top: 1px solid rgba(0, 0, 0, 0.05);
.chat-input {
border-top: 1px solid var(--border);
padding: 1rem 1.25rem;
background: var(--surface);
}
.chat-input-area form {
.chat-input .form-control {
border-radius: 999px;
}
.quick-replies {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.quick-replies .btn {
border-radius: 999px;
font-size: 0.75rem;
}
.admin-shell {
display: grid;
grid-template-columns: 240px 1fr;
height: calc(100vh - 64px);
}
.admin-sidebar {
background: var(--sidebar-dark);
color: #fff;
padding: 1.5rem 1rem;
}
.admin-sidebar .nav-link {
color: var(--sidebar-dark-muted);
border-radius: 8px;
margin-bottom: 0.3rem;
padding: 0.6rem 0.85rem;
font-weight: 600;
}
.admin-sidebar .nav-link.active,
.admin-sidebar .nav-link:hover {
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
.admin-content {
padding: 1.5rem;
overflow-y: auto;
}
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.25rem;
box-shadow: var(--shadow);
}
.table thead th {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--muted);
}
.badge-status {
padding: 0.35rem 0.6rem;
border-radius: 999px;
font-size: 0.7rem;
}
.badge-status.normal {
background: rgba(37, 211, 102, 0.15);
color: var(--primary-dark);
}
.badge-status.blocked {
background: rgba(239, 68, 68, 0.12);
color: #b91c1c;
}
.section-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 1.5rem;
box-shadow: var(--shadow);
}
.toast-container {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 1055;
}
.form-control,
.form-select {
border-radius: 8px;
}
.btn-primary {
background: var(--primary);
border-color: var(--primary);
}
.btn-primary:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
}
.muted {
color: var(--muted);
}
.empty {
text-align: center;
color: var(--muted);
padding: 2rem 1rem;
}
@media (max-width: 992px) {
.app-shell {
flex-direction: column;
height: auto;
}
.contacts-panel {
width: 100%;
}
.admin-shell {
grid-template-columns: 1fr;
}
.admin-sidebar {
display: flex;
gap: 0.75rem;
}
.chat-input-area input {
flex: 1;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
padding: 0.75rem 1rem;
outline: none;
background: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.chat-input-area input:focus {
border-color: #23a6d5;
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.2);
}
.chat-input-area button {
background: #212529;
color: #fff;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.chat-input-area button:hover {
background: #000;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Background Animations */
.bg-animations {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.blob {
position: absolute;
width: 500px;
height: 500px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
filter: blur(80px);
animation: move 20s infinite alternate cubic-bezier(0.45, 0, 0.55, 1);
}
.blob-1 {
top: -10%;
left: -10%;
background: rgba(238, 119, 82, 0.4);
}
.blob-2 {
bottom: -10%;
right: -10%;
background: rgba(35, 166, 213, 0.4);
animation-delay: -7s;
width: 600px;
height: 600px;
}
.blob-3 {
top: 40%;
left: 30%;
background: rgba(231, 60, 126, 0.3);
animation-delay: -14s;
width: 450px;
height: 450px;
}
@keyframes move {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
33% { transform: translate(150px, 100px) rotate(120deg) scale(1.1); }
66% { transform: translate(-50px, 200px) rotate(240deg) scale(0.9); }
100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}
.header-link {
font-size: 14px;
color: #fff;
text-decoration: none;
background: rgba(0, 0, 0, 0.2);
padding: 0.5rem 1rem;
border-radius: 8px;
transition: all 0.3s ease;
}
.header-link:hover {
background: rgba(0, 0, 0, 0.4);
text-decoration: none;
}
/* Admin Styles */
.admin-container {
max-width: 900px;
margin: 3rem auto;
padding: 2.5rem;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0,0,0,0.15);
border: 1px solid rgba(255, 255, 255, 0.4);
position: relative;
z-index: 1;
}
.admin-container h1 {
margin-top: 0;
color: #212529;
font-weight: 800;
}
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px;
margin-top: 1.5rem;
}
.table th {
background: transparent;
border: none;
padding: 1rem;
color: #6c757d;
font-weight: 600;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 1px;
}
.table td {
background: #fff;
padding: 1rem;
border: none;
}
.table tr td:first-child { border-radius: 12px 0 0 12px; }
.table tr td:last-child { border-radius: 0 12px 12px 0; }
.form-group {
margin-bottom: 1.25rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
}
.form-control {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 12px;
background: #fff;
transition: all 0.3s ease;
box-sizing: border-box;
}
.form-control:focus {
outline: none;
border-color: #23a6d5;
box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1);
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-links {
display: flex;
gap: 1rem;
}
.admin-card {
background: rgba(255, 255, 255, 0.6);
padding: 2rem;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.5);
margin-bottom: 2.5rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.admin-card h3 {
margin-top: 0;
margin-bottom: 1.5rem;
font-weight: 700;
}
.btn-delete {
background: #dc3545;
color: white;
border: none;
padding: 0.25rem 0.5rem;
border-radius: 4px;
cursor: pointer;
}
.btn-add {
background: #212529;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
margin-top: 1rem;
}
.btn-save {
background: #0088cc;
color: white;
border: none;
padding: 0.8rem 1.5rem;
border-radius: 12px;
cursor: pointer;
font-weight: 600;
width: 100%;
transition: all 0.3s ease;
}
.webhook-url {
font-size: 0.85em;
color: #555;
margin-top: 0.5rem;
}
.history-table-container {
gap: 0.5rem;
overflow-x: auto;
background: rgba(255, 255, 255, 0.4);
padding: 1rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
}
.history-table {
width: 100%;
/* Emoji Button Alignment */
.chat-input .position-relative {
display: flex;
align-items: center;
}
.history-table-time {
width: 15%;
white-space: nowrap;
font-size: 0.85em;
color: #555;
[data-emoji-trigger] {
padding: 0.5rem 0.7rem;
font-size: 1.25rem;
line-height: 1;
background-color: var(--surface) !important;
border-color: var(--border) !important;
border-radius: 999px !important;
}
.history-table-user {
width: 35%;
background: rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 8px;
emoji-picker {
--emoji-size: 1.5rem;
--indicator-color: var(--primary);
--border-color: var(--border);
width: 320px;
height: 400px;
}
.history-table-ai {
width: 50%;
background: rgba(255, 255, 255, 0.5);
border-radius: 8px;
padding: 8px;
}
.no-messages {
text-align: center;
color: #777;
}

18
assets/js/countries.js Normal file
View File

@ -0,0 +1,18 @@
const countries = [
{ name: "马来西亚", code: "+60" },
{ name: "中国", code: "+86" },
{ name: "美国", code: "+1" },
{ name: "英国", code: "+44" },
{ name: "日本", code: "+81" },
{ name: "德国", code: "+49" },
{ name: "法国", code: "+33" },
{ name: "加拿大", code: "+1" },
{ name: "澳大利亚", code: "+61" },
{ name: "俄罗斯", code: "+7" },
{ name: "韩国", code: "+82" },
{ name: "巴西", code: "+55" },
{ name: "印度", code: "+91" },
{ name: "意大利", code: "+39" },
{ name: "西班牙", code: "+34" },
{ name: "墨西哥", code: "+52" }
];

225
assets/js/main.js
View File

@ -1,39 +1,196 @@
document.addEventListener('DOMContentLoaded', () => {
const chatForm = document.getElementById('chat-form');
const chatInput = document.getElementById('chat-input');
const chatMessages = document.getElementById('chat-messages');
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 appendMessage = (text, sender) => {
const msgDiv = document.createElement('div');
msgDiv.classList.add('message', sender);
msgDiv.textContent = text;
chatMessages.appendChild(msgDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
};
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);
};
chatForm.addEventListener('submit', async (e) => {
e.preventDefault();
const message = chatInput.value.trim();
if (!message) return;
const formatTime = (value) => {
if (!value) return '';
const d = new Date(value);
if (Number.isNaN(d.getTime())) return value;
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
};
appendMessage(message, 'visitor');
chatInput.value = '';
const initAgent = () => {
const listEl = document.querySelector('[data-contacts]');
const chatTitle = document.querySelector('[data-chat-title]');
const chatBody = document.querySelector('[data-chat-body]');
const form = document.querySelector('[data-chat-form]');
const input = document.querySelector('[data-chat-input]');
const emojiTrigger = document.querySelector('[data-emoji-trigger]');
const emojiPicker = document.querySelector('[data-emoji-picker]');
const shortcutList = document.getElementById('shortcutList');
const newShortcutInput = document.getElementById('newShortcut');
const addShortcutBtn = document.getElementById('addShortcut');
const shortcutContainer = document.querySelector('[data-shortcuts]');
try {
const response = await fetch('api/chat.php', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ message })
});
const data = await response.json();
// Artificial delay for realism
setTimeout(() => {
appendMessage(data.reply, 'bot');
}, 500);
} catch (error) {
console.error('Error:', error);
appendMessage("Sorry, something went wrong. Please try again.", 'bot');
}
let contacts = [];
let activeId = null;
let shortcuts = JSON.parse(localStorage.getItem('shortcuts') || '["你好", "请问有什么可以帮您？", "谢谢"]');
// Country selector
const countryList = document.getElementById('countryList');
const countrySearch = document.getElementById('countrySearch');
const selectedCode = document.getElementById('selectedCode');
const phoneInput = document.getElementById('phoneNumber');
const renderCountryList = (filter = '') => {
countryList.innerHTML = '';
countries.filter(c => c.name.includes(filter) || c.code.includes(filter)).forEach(c => {
const item = document.createElement('div');
item.className = 'country-item';
item.textContent = `${c.name} (${c.code})`;
item.onclick = () => {
selectedCode.textContent = c.code;
countrySearch.value = c.name;
renderCountryList();
};
countryList.appendChild(item);
});
};
countrySearch.addEventListener('input', e => renderCountryList(e.target.value));
renderCountryList();
document.getElementById('startChat').onclick = async () => {
const phone = selectedCode.textContent + phoneInput.value;
if (!phoneInput.value) return;
try {
// Send to API to create/get contact
const res = await apiFetch('/api/contacts.php', { method: 'POST', body: { phone } });
const newContact = res.contact;
contacts.unshift(newContact);
renderContacts();
setActive(newContact.id);
bootstrap.Modal.getInstance(document.getElementById('countryModal')).hide();
} catch (err) {
showToast('无法启动聊天', 'danger');
}
};
const renderShortcuts = () => {
shortcutContainer.innerHTML = shortcuts.map(s =>
`<button class="btn btn-sm btn-outline-info me-1" onclick="document.querySelector('[data-chat-input]').value += '${s}'">${s}</button>`
).join('');
shortcutList.innerHTML = shortcuts.map((s, i) => `
<li class="list-group-item d-flex justify-content-between">
${s} <button class="btn btn-sm btn-danger" onclick="removeShortcut(${i})">删除</button>
</li>
`).join('');
};
window.removeShortcut = (i) => {
shortcuts.splice(i, 1);
localStorage.setItem('shortcuts', JSON.stringify(shortcuts));
renderShortcuts();
};
addShortcutBtn.addEventListener('click', () => {
if(newShortcutInput.value) {
shortcuts.push(newShortcutInput.value);
localStorage.setItem('shortcuts', JSON.stringify(shortcuts));
newShortcutInput.value = '';
renderShortcuts();
}
});
emojiTrigger.addEventListener('click', () => emojiPicker.classList.toggle('d-none'));
emojiPicker.addEventListener('emoji-click', e => {
input.value += e.detail.unicode;
emojiPicker.classList.add('d-none');
});
const renderContacts = () => {
listEl.innerHTML = '';
contacts.forEach((contact) => {
const item = document.createElement('div');
item.className = `contact-item ${contact.id === activeId ? 'active' : ''}`;
item.style.padding = '10px';
item.style.borderBottom = '1px solid #eee';
item.style.cursor = 'pointer';
item.innerHTML = `
<div>
<div class="fw-semibold">${contact.phone}</div>
<div class="meta text-truncate" style="font-size: 0.8em; color: #666;">${contact.last_message || '暂无消息'}</div>
</div>
`;
item.addEventListener('click', () => setActive(contact.id));
listEl.appendChild(item);
});
});
};
const renderMessages = (messages) => {
chatBody.innerHTML = '';
messages.forEach((msg) => {
const item = document.createElement('div');
item.className = `message ${msg.direction === 'out' ? 'out' : 'in'}`;
item.innerHTML = `<div>${msg.body}</div><div class="time">${formatTime(msg.created_at)}</div>`;
chatBody.appendChild(item);
});
chatBody.scrollTop = chatBody.scrollHeight;
};
const loadContacts = async () => {
const data = await apiFetch('/api/contacts.php');
contacts = data.contacts || [];
renderContacts();
};
const loadMessages = async () => {
if (!activeId) return;
const data = await apiFetch(`/api/messages.php?contact_id=${activeId}`);
renderMessages(data.messages || []);
};
const setActive = async (id) => {
activeId = id;
const contact = contacts.find(c => c.id === id);
chatTitle.textContent = contact ? contact.phone : '未知联系人';
renderContacts();
await loadMessages();
};
form?.addEventListener('submit', async (e) => {
e.preventDefault();
if (!activeId) return;
const body = input.value.trim();
if (!body) return;
await apiFetch('/api/messages.php', { method: 'POST', body: { contact_id: activeId, body } });
input.value = '';
await loadMessages();
});
renderShortcuts();
loadContacts();
setInterval(loadContacts, 3000);
};
document.addEventListener('DOMContentLoaded', () => {
if (document.body.dataset.page === 'agent') initAgent();
});

BIN
assets/pasted-20260318-114609-f43679b2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 119 KiB

BIN
assets/pasted-20260318-115351-9232ce20.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

BIN
assets/pasted-20260318-120057-dbde59ee.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
assets/pasted-20260318-120348-619c1f5d.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

230
index.php
View File

@ -3,148 +3,112 @@ declare(strict_types=1);
@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');
$phpVersion = PHP_VERSION;
$now = date('Y-m-d H:i:s');
?>
<!doctype html>
<html lang="en">
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New Style</title>
<?php
// Read project preview data from environment
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
?>
<?php if ($projectDescription): ?>
<!-- Meta description -->
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
<!-- Open Graph meta tags -->
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<!-- Twitter meta tags -->
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<?php endif; ?>
<?php if ($projectImageUrl): ?>
<!-- Open Graph image -->
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<!-- Twitter image -->
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<?php endif; ?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<title>SMS Chat — 前端工作台</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/emoji-picker-element@1.18.10/dist/index.css" rel="stylesheet">
<link href="assets/css/custom.css?v=<?= time() ?>" rel="stylesheet">
<style>
:root {
--bg-color-start: #6a11cb;
--bg-color-end: #2575fc;
--text-color: #ffffff;
--card-bg-color: rgba(255, 255, 255, 0.01);
--card-border-color: rgba(255, 255, 255, 0.1);
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
overflow: hidden;
position: relative;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
animation: bg-pan 20s linear infinite;
z-index: -1;
}
@keyframes bg-pan {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
main {
padding: 2rem;
}
.card {
background: var(--card-bg-color);
border: 1px solid var(--card-border-color);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
.loader {
margin: 1.25rem auto 1.25rem;
width: 48px;
height: 48px;
border: 3px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hint {
opacity: 0.9;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
h1 {
font-size: 3rem;
font-weight: 700;
margin: 0 0 1rem;
letter-spacing: -1px;
}
p {
margin: 0.5rem 0;
font-size: 1.1rem;
}
code {
background: rgba(0,0,0,0.2);
padding: 2px 6px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
footer {
position: absolute;
bottom: 1rem;
font-size: 0.8rem;
opacity: 0.7;
}
.country-item { cursor: pointer; padding: 10px; border-bottom: 1px solid #eee; }
.country-item:hover { background-color: #f8f9fa; }
</style>
</head>
<body>
<main>
<div class="card">
<h1>Analyzing your requirements and generating your website…</h1>
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
<span class="sr-only">Loading…</span>
<body data-page="agent">
<header class="topbar">
<div class="brand">
<div class="brand-badge">S</div>
<div>
SMS Chat
<div class="small text-muted">前端聊天工作台</div>
</div>
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
<p class="hint">This page will update automatically as the plan is implemented.</p>
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
</div>
<div class="meta">
<span class="status-pill">● 在线</span>
<span>客服：Lina</span>
<button class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#settingsModal">⚙️ 设置</button>
</div>
</header>
<main class="app-shell">
<section class="panel contacts-panel">
<div class="search d-flex gap-2">
<div class="form-control" role="button" id="searchTrigger" data-bs-toggle="modal" data-bs-target="#countryModal" style="cursor: pointer; background: #fff; border: 1px solid #ced4da;">🔍 点击选择国家开始聊天...</div>
</div>
<div class="contacts-list" data-contacts></div>
</section>
<section class="panel chat-panel">
<div class="chat-header">
<div>
<div class="fw-semibold" data-chat-title>请选择联系人</div>
<div class="small muted" data-chat-meta>状态</div>
</div>
</div>
<div class="chat-body" data-chat-body></div>
<div class="chat-input-wrapper">
<div class="shortcut-list mb-2" data-shortcuts></div>
<div class="chat-input">
<form class="d-flex gap-2 align-items-center" data-chat-form>
<div class="position-relative">
<button class="btn btn-light border" type="button" data-emoji-trigger>😊</button>
<emoji-picker class="position-absolute d-none" style="bottom: 100%; left: 0; z-index: 1000;" data-emoji-picker></emoji-picker>
</div>
<input class="form-control" placeholder="输入短信内容..." data-chat-input />
<button class="btn btn-primary px-4" type="submit">发送</button>
</form>
</div>
</div>
</section>
</main>
<footer>
Page updated: <?= htmlspecialchars($now) ?> (UTC)
</footer>
<!-- Country Selection Modal -->
<div class="modal fade" id="countryModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">选择国家/地区</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<input class="form-control mb-2" placeholder="搜索国家名..." id="countrySearch" />
<div id="countryList" style="max-height: 300px; overflow-y: auto;"></div>
</div>
<div class="modal-footer">
<span id="selectedCode" class="me-auto fw-bold">+86</span>
<input class="form-control w-50" id="phoneNumber" placeholder="输入手机号" />
<button class="btn btn-primary" id="startChat">开始聊天</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="settingsModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">快捷回复设置</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="input-group mb-2">
<input class="form-control" id="newShortcut" placeholder="输入快捷短语" />
<button class="btn btn-success" id="addShortcut">添加</button>
</div>
<ul class="list-group" id="shortcutList"></ul>
</div>
</div>
</div>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3"></div>
<script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1.18.10/dist/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" defer></script>
<script src="assets/js/countries.js?v=<?= time() ?>" defer></script>
<script src="assets/js/main.js?v=<?= time() ?>" defer></script>
</body>
</html>
</html>