feat: 添加 Web 管理台
This commit is contained in:
@@ -0,0 +1,316 @@
|
||||
const state = {
|
||||
busy: false
|
||||
};
|
||||
|
||||
const elements = {
|
||||
refreshButton: document.querySelector('#refreshButton'),
|
||||
logsButton: document.querySelector('#logsButton'),
|
||||
readyBadge: document.querySelector('#readyBadge'),
|
||||
panelStatus: document.querySelector('#panelStatus'),
|
||||
modelName: document.querySelector('#modelName'),
|
||||
operator: document.querySelector('#operator'),
|
||||
signalQuality: document.querySelector('#signalQuality'),
|
||||
uptime: document.querySelector('#uptime'),
|
||||
connectionState: document.querySelector('#connectionState'),
|
||||
connectionHint: document.querySelector('#connectionHint'),
|
||||
signalValue: document.querySelector('#signalValue'),
|
||||
signalHint: document.querySelector('#signalHint'),
|
||||
moduleModel: document.querySelector('#moduleModel'),
|
||||
moduleVersion: document.querySelector('#moduleVersion'),
|
||||
iccid: document.querySelector('#iccid'),
|
||||
smsForm: document.querySelector('#smsForm'),
|
||||
smsStatus: document.querySelector('#smsStatus'),
|
||||
messagesButton: document.querySelector('#messagesButton'),
|
||||
messageCount: document.querySelector('#messageCount'),
|
||||
messageList: document.querySelector('#messageList'),
|
||||
atForm: document.querySelector('#atForm'),
|
||||
atOutput: document.querySelector('#atOutput'),
|
||||
consoleState: document.querySelector('#consoleState'),
|
||||
logWindow: document.querySelector('#logWindow')
|
||||
};
|
||||
|
||||
function setText(node, value) {
|
||||
node.textContent = value || '--';
|
||||
}
|
||||
|
||||
function setStatusMessage(node, message, type = '') {
|
||||
node.textContent = message;
|
||||
node.classList.toggle('is-success', type === 'success');
|
||||
node.classList.toggle('is-error', type === 'error');
|
||||
}
|
||||
|
||||
async function requestJSON(url, options = {}) {
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(options.headers || {})
|
||||
},
|
||||
...options
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (!response.ok || data.success === false) {
|
||||
throw new Error(data.error || data.message || `HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
function formatUptime(seconds) {
|
||||
const total = Math.max(0, Math.floor(seconds || 0));
|
||||
const days = Math.floor(total / 86400);
|
||||
const hours = Math.floor((total % 86400) / 3600);
|
||||
const minutes = Math.floor((total % 3600) / 60);
|
||||
const secs = total % 60;
|
||||
|
||||
if (days > 0) {
|
||||
return `${days}天 ${hours}小时 ${minutes}分`;
|
||||
}
|
||||
if (hours > 0) {
|
||||
return `${hours}小时 ${minutes}分`;
|
||||
}
|
||||
if (minutes > 0) {
|
||||
return `${minutes}分 ${secs}秒`;
|
||||
}
|
||||
return `${secs}秒`;
|
||||
}
|
||||
|
||||
function formatModel(model = {}) {
|
||||
return [model.manufacturer, model.model].filter(Boolean).join(' ') || '--';
|
||||
}
|
||||
|
||||
function renderStatus(status, info) {
|
||||
const data = status.data || {};
|
||||
const infoData = info.data || {};
|
||||
const model = data.model || infoData.model || {};
|
||||
const signal = data.signal || {};
|
||||
const ready = Boolean(data.ready);
|
||||
|
||||
setText(elements.readyBadge, ready ? '模组已就绪' : '模组未就绪');
|
||||
setText(elements.panelStatus, ready ? 'ready' : 'not ready');
|
||||
setText(elements.modelName, formatModel(model));
|
||||
setText(elements.operator, data.operator || '未知');
|
||||
setText(elements.signalQuality, signal.quality || '未知');
|
||||
setText(elements.uptime, formatUptime(data.uptime));
|
||||
|
||||
setText(elements.connectionState, ready ? '运行中' : '未就绪');
|
||||
setText(elements.connectionHint, ready ? '串口、SIM、驻网和短信配置均已通过启动检查。' : '请检查启动日志和模组初始化状态。');
|
||||
setText(elements.signalValue, signal.rssi === undefined ? '--' : `RSSI ${signal.rssi}`);
|
||||
setText(elements.signalHint, signal.ber === undefined ? 'RSSI 与误码率将在刷新后显示。' : `误码率 ${signal.ber}，质量 ${signal.quality || '未知'}。`);
|
||||
setText(elements.moduleModel, model.model || '--');
|
||||
setText(elements.moduleVersion, model.version || '--');
|
||||
setText(elements.iccid, infoData.iccid || '--');
|
||||
}
|
||||
|
||||
function parseLogLine(line) {
|
||||
const levelMatch = line.match(/\[(INFO|WARN|ERROR)\]/);
|
||||
const timeMatch = line.match(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})/);
|
||||
return {
|
||||
time: timeMatch ? timeMatch[1].slice(11) : '',
|
||||
level: levelMatch ? levelMatch[1] : '',
|
||||
message: line.replace(/^(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2})\s*/, '')
|
||||
};
|
||||
}
|
||||
|
||||
function renderLogs(logs) {
|
||||
elements.logWindow.replaceChildren();
|
||||
|
||||
if (!logs.length) {
|
||||
const empty = document.createElement('p');
|
||||
empty.className = 'empty-state';
|
||||
empty.textContent = '暂无日志。';
|
||||
elements.logWindow.append(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
logs.forEach((line) => {
|
||||
const item = parseLogLine(line);
|
||||
const row = document.createElement('div');
|
||||
row.className = `log-line is-${item.level.toLowerCase()}`;
|
||||
|
||||
const level = document.createElement('span');
|
||||
level.className = 'log-level';
|
||||
level.textContent = item.level ? `${item.time} ${item.level}` : item.time;
|
||||
|
||||
const message = document.createElement('span');
|
||||
message.className = 'log-message';
|
||||
message.textContent = item.message;
|
||||
|
||||
row.append(level, message);
|
||||
fragment.append(row);
|
||||
});
|
||||
|
||||
elements.logWindow.append(fragment);
|
||||
elements.logWindow.scrollTop = elements.logWindow.scrollHeight;
|
||||
}
|
||||
|
||||
function formatDateTime(value) {
|
||||
if (!value) {
|
||||
return '--';
|
||||
}
|
||||
|
||||
const date = new Date(value);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return value;
|
||||
}
|
||||
|
||||
return date.toLocaleString('zh-CN', {
|
||||
hour12: false,
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function renderMessages(messages) {
|
||||
elements.messageList.replaceChildren();
|
||||
setText(elements.messageCount, `最近 ${messages.length} 条`);
|
||||
|
||||
if (!messages.length) {
|
||||
const empty = document.createElement('p');
|
||||
empty.className = 'empty-state empty-state--light';
|
||||
empty.textContent = '暂无收到的短信。';
|
||||
elements.messageList.append(empty);
|
||||
return;
|
||||
}
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
messages.forEach((message) => {
|
||||
const item = document.createElement('article');
|
||||
item.className = `message-item is-${message.status || 'received'}`;
|
||||
|
||||
const header = document.createElement('div');
|
||||
header.className = 'message-item__header';
|
||||
|
||||
const sender = document.createElement('strong');
|
||||
sender.textContent = message.sender || '未知号码';
|
||||
|
||||
const status = document.createElement('span');
|
||||
status.className = 'message-status';
|
||||
status.textContent = message.statusText || '已接收';
|
||||
|
||||
const time = document.createElement('time');
|
||||
time.textContent = formatDateTime(message.timestamp || message.receivedAt);
|
||||
|
||||
const text = document.createElement('p');
|
||||
text.className = 'message-text';
|
||||
text.textContent = message.text || '';
|
||||
|
||||
header.append(sender, status, time);
|
||||
item.append(header, text);
|
||||
fragment.append(item);
|
||||
});
|
||||
|
||||
elements.messageList.append(fragment);
|
||||
}
|
||||
|
||||
async function refreshLogs() {
|
||||
const logs = await requestJSON('/api/logs');
|
||||
renderLogs(logs.data || []);
|
||||
}
|
||||
|
||||
async function refreshMessages() {
|
||||
const messages = await requestJSON('/api/sms/received?limit=50');
|
||||
renderMessages(messages.data || []);
|
||||
}
|
||||
|
||||
async function refreshAll() {
|
||||
if (state.busy) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.busy = true;
|
||||
elements.refreshButton.disabled = true;
|
||||
elements.refreshButton.textContent = '刷新中';
|
||||
|
||||
try {
|
||||
const status = await requestJSON('/api/status');
|
||||
const info = await requestJSON('/api/modem/info');
|
||||
renderStatus(status, info);
|
||||
await refreshMessages();
|
||||
await refreshLogs();
|
||||
} catch (err) {
|
||||
setText(elements.readyBadge, '刷新失败');
|
||||
setText(elements.panelStatus, 'error');
|
||||
setText(elements.connectionState, '查询失败');
|
||||
setText(elements.connectionHint, err.message);
|
||||
} finally {
|
||||
elements.refreshButton.disabled = false;
|
||||
elements.refreshButton.textContent = '刷新状态';
|
||||
state.busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function sendSMS(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const submit = elements.smsForm.querySelector('button[type="submit"]');
|
||||
const formData = new FormData(elements.smsForm);
|
||||
const phone = String(formData.get('phone') || '').trim();
|
||||
const message = String(formData.get('message') || '').trim();
|
||||
|
||||
if (!phone || !message) {
|
||||
setStatusMessage(elements.smsStatus, '号码和内容都不能为空。', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
submit.disabled = true;
|
||||
setStatusMessage(elements.smsStatus, '发送中...');
|
||||
|
||||
try {
|
||||
const result = await requestJSON('/api/sms/send', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ phone, message })
|
||||
});
|
||||
setStatusMessage(elements.smsStatus, result.message || '短信发送成功。', result.success ? 'success' : 'error');
|
||||
await refreshLogs();
|
||||
} catch (err) {
|
||||
setStatusMessage(elements.smsStatus, err.message, 'error');
|
||||
} finally {
|
||||
submit.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function runATCommand(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const submit = elements.atForm.querySelector('button[type="submit"]');
|
||||
const command = String(new FormData(elements.atForm).get('command') || '').trim();
|
||||
|
||||
if (!command) {
|
||||
return;
|
||||
}
|
||||
|
||||
submit.disabled = true;
|
||||
setText(elements.consoleState, 'running');
|
||||
elements.atOutput.textContent = `> ${command}\n等待响应...`;
|
||||
|
||||
try {
|
||||
const result = await requestJSON('/api/modem/at', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ command })
|
||||
});
|
||||
elements.atOutput.textContent = `> ${command}\n${result.data.response || ''}`.trim();
|
||||
setText(elements.consoleState, 'done');
|
||||
await refreshLogs();
|
||||
} catch (err) {
|
||||
elements.atOutput.textContent = `> ${command}\nERROR: ${err.message}`;
|
||||
setText(elements.consoleState, 'error');
|
||||
} finally {
|
||||
submit.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
elements.refreshButton.addEventListener('click', refreshAll);
|
||||
elements.logsButton.addEventListener('click', refreshLogs);
|
||||
elements.messagesButton.addEventListener('click', refreshMessages);
|
||||
elements.smsForm.addEventListener('submit', sendSMS);
|
||||
elements.atForm.addEventListener('submit', runATCommand);
|
||||
|
||||
refreshAll();
|
||||
setInterval(() => {
|
||||
refreshMessages().catch(() => {});
|
||||
}, 5000);
|
||||
Reference in New Issue
Block a user