feat(ota-relay): 更新ESP32-C3 OTA中继固件配置和功能增强
- 修改WiFi配置默认为STA模式连接路由器，并调整相关参数 - 优化调试日志系统，添加环形缓冲区支持HTTP日志拉取功能 - 重构健康监控，提高温度监控频率至1秒并添加电压监控定时器 - 更新分区表配置以适应4MB Flash布局 - 添加OTA更新组件依赖和蓝牙支持 - 修复UDP socket延迟创建时机，确保网络接口初始化正确 - 调整WiFi信号强度告警阈值，提升连接稳定性 - 更新README文档中的IP地址配置示例 - 修改VSCode端口配置为COM13
This commit is contained in:
小龙虾
+557
@@ -0,0 +1,557 @@
|
||||
// ==================== 全局状态 ====================
|
||||
let currentFile = null;
|
||||
let uploadProgress = 0;
|
||||
let isUploading = false;
|
||||
let logFilter = 'all';
|
||||
let logEntries = [];
|
||||
let logSocket = null;
|
||||
let latestSystemStatus = null;
|
||||
|
||||
// ==================== 工具函数 ====================
|
||||
function formatBytes(bytes) {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
|
||||
}
|
||||
|
||||
function formatTime(date) {
|
||||
return date.toTimeString().split(' ')[0];
|
||||
}
|
||||
|
||||
function showToast(message, type = 'success') {
|
||||
const toast = document.getElementById('toast');
|
||||
const icon = document.getElementById('toastIcon');
|
||||
const msg = document.getElementById('toastMessage');
|
||||
|
||||
toast.className = `toast ${type} show`;
|
||||
icon.textContent = type === 'success' ? '✓' : type === 'error' ? '✕' : '⚠';
|
||||
msg.textContent = message;
|
||||
|
||||
setTimeout(() => toast.classList.remove('show'), 3000);
|
||||
}
|
||||
|
||||
function getEspIp() {
|
||||
return document.getElementById('espIp').value.trim() || '192.168.31.127';
|
||||
}
|
||||
|
||||
function getBaseUrl() {
|
||||
return `http://${getEspIp()}`;
|
||||
}
|
||||
|
||||
// ==================== 日志系统 ====================
|
||||
function addLog(level, tag, message) {
|
||||
const logContent = document.getElementById('logContent');
|
||||
const time = formatTime(new Date());
|
||||
|
||||
const entry = { time, level, tag, message };
|
||||
logEntries.push(entry);
|
||||
|
||||
if (logFilter !== 'all' && level !== logFilter) {
|
||||
return;
|
||||
}
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.className = 'log-entry';
|
||||
div.innerHTML = `
|
||||
<span class="log-time">[${time}]</span>
|
||||
<span class="log-level ${level}">${level}</span>
|
||||
<span class="log-tag">[${tag}]</span>
|
||||
<span class="log-msg">${message}</span>
|
||||
`;
|
||||
|
||||
logContent.appendChild(div);
|
||||
logContent.scrollTop = logContent.scrollHeight;
|
||||
document.getElementById('logCount').textContent = logEntries.length;
|
||||
}
|
||||
|
||||
function clearLogs() {
|
||||
document.getElementById('logContent').innerHTML = '';
|
||||
logEntries = [];
|
||||
document.getElementById('logCount').textContent = '0';
|
||||
}
|
||||
|
||||
function toggleFilter(level, btn) {
|
||||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
logFilter = level;
|
||||
|
||||
const logContent = document.getElementById('logContent');
|
||||
logContent.innerHTML = '';
|
||||
logEntries.forEach(entry => {
|
||||
if (level === 'all' || entry.level === level) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'log-entry';
|
||||
div.innerHTML = `
|
||||
<span class="log-time">[${entry.time}]</span>
|
||||
<span class="log-level ${entry.level}">${entry.level}</span>
|
||||
<span class="log-tag">[${entry.tag}]</span>
|
||||
<span class="log-msg">${entry.message}</span>
|
||||
`;
|
||||
logContent.appendChild(div);
|
||||
}
|
||||
});
|
||||
logContent.scrollTop = logContent.scrollHeight;
|
||||
}
|
||||
|
||||
// ==================== 连接管理 ====================
|
||||
function updateConnectionUi(connected, text = null) {
|
||||
const badge = document.getElementById('connectionBadge');
|
||||
const label = document.getElementById('connectionText');
|
||||
badge.className = connected ? 'badge connected' : 'badge disconnected';
|
||||
label.textContent = text || (connected ? '已连接' : '未连接');
|
||||
}
|
||||
|
||||
function updateHealthUi(healthCode, freeHeap) {
|
||||
const healthNames = ['正常', '警告', '危险', '关机'];
|
||||
const health = healthCode !== undefined ? (healthNames[healthCode] || '未知') : '未知';
|
||||
document.getElementById('healthText').textContent = `系统${health}`;
|
||||
document.getElementById('healthBadge').className = healthCode === 0 ? 'badge connected' : 'badge warning';
|
||||
if (freeHeap !== undefined) {
|
||||
document.getElementById('statHeap').textContent = formatBytes(freeHeap);
|
||||
}
|
||||
}
|
||||
|
||||
function updateSystemStatusUi(data) {
|
||||
if (!data) return;
|
||||
|
||||
latestSystemStatus = data;
|
||||
|
||||
const wifi = data.wifi || {};
|
||||
const ota = data.ota || {};
|
||||
const healthCode = data.health;
|
||||
const relayStates = {
|
||||
0: '待机',
|
||||
1: '等待握手',
|
||||
2: '握手已发',
|
||||
3: '挑战已发',
|
||||
4: '收到握手响应',
|
||||
5: '会话密钥已发',
|
||||
6: '认证完成',
|
||||
7: '大小已发',
|
||||
8: '大小确认',
|
||||
9: '接收中',
|
||||
10: '转发中',
|
||||
11: '数据包已发',
|
||||
12: 'ACK正常',
|
||||
13: '等待重发',
|
||||
14: '接收完成',
|
||||
15: '传输完成',
|
||||
16: '结束已发',
|
||||
17: 'OTA完成',
|
||||
255: '错误'
|
||||
};
|
||||
|
||||
updateConnectionUi(!!wifi.connected, wifi.connected ? `${wifi.mode || 'STA'} 已连接` : `${wifi.mode || 'STA'} 未连接`);
|
||||
updateHealthUi(healthCode, data.free_heap);
|
||||
|
||||
// 显示固件版本
|
||||
if (data.version) {
|
||||
document.getElementById('fwVersion').textContent = `v${data.version}`;
|
||||
}
|
||||
|
||||
document.getElementById('statTemperature').textContent = Number.isFinite(data.temperature) ? `${data.temperature.toFixed(1)}°C` : '--';
|
||||
document.getElementById('statVoltage').textContent = Number.isFinite(data.voltage) ? `${data.voltage.toFixed(2)}V` : '--';
|
||||
document.getElementById('statWifi').textContent = wifi.connected ? (wifi.ip || '已连接') : '未连接';
|
||||
document.getElementById('statSignal').textContent = (wifi.rssi !== undefined && wifi.rssi !== -127) ? `${wifi.rssi} dBm` : '--';
|
||||
document.getElementById('statHeap').textContent = data.free_heap !== undefined ? formatBytes(data.free_heap) : '--';
|
||||
document.getElementById('statMinHeap').textContent = data.min_free_heap !== undefined ? formatBytes(data.min_free_heap) : '--';
|
||||
|
||||
const total = ota.total_size || 0;
|
||||
const stored = ota.stored_size || 0;
|
||||
const progress = total > 0 ? Math.min(100, Math.round(stored * 100 / total)) : 0;
|
||||
document.getElementById('statProgress').textContent = `${progress}%`;
|
||||
document.getElementById('statRelayState').textContent = relayStates[ota.relay_state] ?? '待机';
|
||||
}
|
||||
|
||||
async function testConnection() {
|
||||
if (!latestSystemStatus) {
|
||||
addLog('W', '连接', '暂无同步数据，请等待 1 秒自动同步');
|
||||
showToast('暂无同步数据，请稍等 1 秒', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
const wifi = latestSystemStatus.wifi || {};
|
||||
const connected = !!wifi.connected;
|
||||
updateSystemStatusUi(latestSystemStatus);
|
||||
addLog('I', '连接', connected
|
||||
? `当前已连接：${wifi.mode || 'STA'} ${wifi.ip || ''}`.trim()
|
||||
: `当前未连接：${wifi.mode || 'STA'}`);
|
||||
showToast(connected ? 'ESP32 当前在线' : 'ESP32 当前未连接', connected ? 'success' : 'warning');
|
||||
}
|
||||
|
||||
async function healthCheck() {
|
||||
if (!latestSystemStatus) {
|
||||
addLog('W', '健康', '暂无同步数据，请等待 1 秒自动同步');
|
||||
showToast('暂无同步数据，请稍等 1 秒', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
updateSystemStatusUi(latestSystemStatus);
|
||||
const data = latestSystemStatus;
|
||||
const healthNames = ['正常', '警告', '危险', '关机'];
|
||||
const health = data.health !== undefined ? (healthNames[data.health] || '未知') : '未知';
|
||||
addLog('I', '健康', `当前状态: ${health}, 空闲堆: ${data.free_heap} bytes, 温度: ${data.temperature}°C, 电压: ${data.voltage}V`);
|
||||
showToast(`当前健康状态: ${health}`, 'success');
|
||||
}
|
||||
|
||||
// ==================== CAN 帧发送 ====================
|
||||
async function sendCanFrame() {
|
||||
const ch = parseInt(document.getElementById('canChannel').value);
|
||||
const idStr = document.getElementById('canId').value.trim();
|
||||
const dlc = parseInt(document.getElementById('canDlc').value) || 8;
|
||||
const dataStr = document.getElementById('canData').value.trim();
|
||||
|
||||
let extId = 0;
|
||||
if (idStr.startsWith('0x') || idStr.startsWith('0X')) {
|
||||
extId = parseInt(idStr, 16);
|
||||
} else {
|
||||
extId = parseInt(idStr, 10);
|
||||
if (isNaN(extId)) extId = parseInt(idStr, 16);
|
||||
}
|
||||
|
||||
if (isNaN(extId)) {
|
||||
showToast('ID 格式错误', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
let dataHex = dataStr.replace(/\s/g, '');
|
||||
if (dataHex.length % 2 !== 0) {
|
||||
showToast('数据长度必须为偶数', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
addLog('I', 'CAN', `发送 CH${ch} ID=0x${extId.toString(16).toUpperCase()} DLC=${dlc}`);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${getBaseUrl()}/can/send`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
ch: ch,
|
||||
id: extId,
|
||||
dlc: dlc,
|
||||
data: dataHex
|
||||
}),
|
||||
signal: AbortSignal.timeout(5000)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'ok') {
|
||||
addLog('I', 'CAN', `响应: ${result.recv || '(无数据)'} (${result.recv_len || 0}B)`);
|
||||
|
||||
const respDiv = document.getElementById('canResponse');
|
||||
const respContent = document.getElementById('canRespContent');
|
||||
respDiv.style.display = 'block';
|
||||
respContent.textContent = result.recv
|
||||
? `0x${result.recv} (${result.recv_len} 字节)`
|
||||
: '无响应数据';
|
||||
|
||||
showToast(`CH${ch} 发送成功`, 'success');
|
||||
} else {
|
||||
addLog('E', 'CAN', `发送失败: code=${result.code}`);
|
||||
showToast(`发送失败: code=${result.code}`, 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
addLog('E', 'CAN', `发送失败: ${e.message}`);
|
||||
showToast('发送失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function onTargetChipChange() {
|
||||
const chip = document.getElementById('targetChip').value;
|
||||
const relayBtn = document.getElementById('relayBtn');
|
||||
const esp32Actions = document.getElementById('esp32Actions');
|
||||
|
||||
if (chip === 'esp32') {
|
||||
relayBtn.style.display = 'none';
|
||||
esp32Actions.style.display = 'block';
|
||||
} else {
|
||||
relayBtn.style.display = '';
|
||||
esp32Actions.style.display = 'none';
|
||||
}
|
||||
addLog('I', '目标', `切换到: ${chip === 'esp32' ? 'ESP32 自身升级' : 'GD32 Flash 中继'}`);
|
||||
}
|
||||
|
||||
function clearCanFields() {
|
||||
document.getElementById('canId').value = '0x18DA00F1';
|
||||
document.getElementById('canDlc').value = '8';
|
||||
document.getElementById('canData').value = '0102030405060708';
|
||||
document.getElementById('canResponse').style.display = 'none';
|
||||
}
|
||||
|
||||
// ==================== 文件处理 ====================
|
||||
function handleFileSelect(event) {
|
||||
const file = event.target.files[0];
|
||||
if (file) processFile(file);
|
||||
}
|
||||
|
||||
document.getElementById('uploadZone').addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
e.currentTarget.classList.add('dragover');
|
||||
});
|
||||
|
||||
document.getElementById('uploadZone').addEventListener('dragleave', (e) => {
|
||||
e.currentTarget.classList.remove('dragover');
|
||||
});
|
||||
|
||||
document.getElementById('uploadZone').addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
e.currentTarget.classList.remove('dragover');
|
||||
const file = e.dataTransfer.files[0];
|
||||
if (file) processFile(file);
|
||||
});
|
||||
|
||||
function processFile(file) {
|
||||
currentFile = file;
|
||||
const fileInfo = document.getElementById('fileInfo');
|
||||
const uploadBtn = document.getElementById('uploadBtn');
|
||||
|
||||
document.getElementById('fileName').textContent = file.name;
|
||||
document.getElementById('fileType').textContent = file.name.endsWith('.hex') ? 'Intel HEX' : 'Binary';
|
||||
document.getElementById('fileSize').textContent = formatBytes(file.size);
|
||||
|
||||
const chunks = Math.ceil(file.size / 4096);
|
||||
document.getElementById('fileChunks').textContent = chunks + ' 包';
|
||||
|
||||
fileInfo.classList.add('visible');
|
||||
uploadBtn.disabled = false;
|
||||
|
||||
addLog('I', '文件', `已选择: ${file.name} (${formatBytes(file.size)})`);
|
||||
showToast('文件已选择', 'success');
|
||||
}
|
||||
|
||||
function clearFile() {
|
||||
currentFile = null;
|
||||
document.getElementById('fileInput').value = '';
|
||||
document.getElementById('fileInfo').classList.remove('visible');
|
||||
document.getElementById('uploadBtn').disabled = true;
|
||||
document.getElementById('progressSection').classList.remove('visible');
|
||||
addLog('I', '文件', '文件已清除');
|
||||
}
|
||||
|
||||
// ==================== 上传固件 ====================
|
||||
async function startUpload() {
|
||||
if (!currentFile || isUploading) return;
|
||||
|
||||
const chip = document.getElementById('targetChip').value;
|
||||
isUploading = true;
|
||||
const uploadBtn = document.getElementById('uploadBtn');
|
||||
uploadBtn.disabled = true;
|
||||
uploadBtn.textContent = '上传中...';
|
||||
|
||||
const progressSection = document.getElementById('progressSection');
|
||||
progressSection.classList.add('visible');
|
||||
|
||||
addLog('I', '上传', `开始上传: ${currentFile.name} → ${chip.toUpperCase()}`);
|
||||
showToast(`开始上传固件到 ${chip.toUpperCase()}`, 'success');
|
||||
|
||||
try {
|
||||
const arrayBuffer = await currentFile.arrayBuffer();
|
||||
const fileSize = currentFile.size;
|
||||
|
||||
let body;
|
||||
let url = `${getBaseUrl()}/ota/upload`;
|
||||
|
||||
if (chip === 'esp32') {
|
||||
const headerJson = JSON.stringify({
|
||||
type: 'esp32',
|
||||
total_size: fileSize
|
||||
});
|
||||
const encoder = new TextEncoder();
|
||||
const headerBytes = encoder.encode(headerJson);
|
||||
const fileBytes = new Uint8Array(arrayBuffer);
|
||||
|
||||
const combined = new Uint8Array(headerBytes.length + fileSize);
|
||||
combined.set(headerBytes, 0);
|
||||
combined.set(fileBytes, headerBytes.length);
|
||||
|
||||
body = combined.buffer;
|
||||
} else {
|
||||
body = arrayBuffer;
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.upload.addEventListener('progress', (e) => {
|
||||
if (e.lengthComputable) {
|
||||
const percent = Math.round((e.loaded / e.total) * 100);
|
||||
uploadProgress = percent;
|
||||
document.getElementById('progressBar').style.width = percent + '%';
|
||||
document.getElementById('progressText').textContent =
|
||||
`已上传 ${formatBytes(e.loaded)} / ${formatBytes(e.total)}`;
|
||||
document.getElementById('progressPercent').textContent = percent + '%';
|
||||
document.getElementById('statProgress').textContent = percent + '%';
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
isUploading = false;
|
||||
uploadBtn.disabled = false;
|
||||
uploadBtn.textContent = '⬆️ 上传固件';
|
||||
|
||||
if (xhr.status === 200) {
|
||||
addLog('I', '上传', '固件上传完成！');
|
||||
showToast('固件上传成功', 'success');
|
||||
|
||||
if (chip === 'esp32') {
|
||||
document.getElementById('esp32Actions').style.display = 'block';
|
||||
// 安全间隔：3 秒后自动调用刷写，留时间确认状态
|
||||
let countdown = 3;
|
||||
addLog('I', 'OTA', `${countdown} 秒后自动调用 POST /ota/update 完成升级并重启...`);
|
||||
const timer = setInterval(() => {
|
||||
countdown--;
|
||||
if (countdown > 0) {
|
||||
addLog('I', 'OTA', `${countdown} 秒后开始刷写...`);
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
addLog('I', 'OTA', '开始刷写！');
|
||||
triggerEsp32Update();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
} else {
|
||||
addLog('E', '上传', `上传失败: HTTP ${xhr.status}`);
|
||||
showToast('上传失败', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('error', () => {
|
||||
isUploading = false;
|
||||
uploadBtn.disabled = false;
|
||||
uploadBtn.textContent = '⬆️ 上传固件';
|
||||
addLog('E', '上传', '上传过程发生错误');
|
||||
showToast('上传出错', 'error');
|
||||
});
|
||||
|
||||
xhr.open('POST', url);
|
||||
xhr.send(body);
|
||||
|
||||
} catch (e) {
|
||||
addLog('E', '上传', `上传失败: ${e.message}`);
|
||||
showToast('上传失败', 'error');
|
||||
isUploading = false;
|
||||
uploadBtn.disabled = false;
|
||||
uploadBtn.textContent = '⬆️ 上传固件';
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== ESP32 OTA 完成升级 ====================
|
||||
async function triggerEsp32Update() {
|
||||
addLog('I', 'OTA', '=== ESP32 OTA 完成，开始重启 ===');
|
||||
showToast('ESP32 正在重启...', 'success');
|
||||
|
||||
try {
|
||||
const response = await fetch(`${getBaseUrl()}/ota/update`, {
|
||||
method: 'POST',
|
||||
signal: AbortSignal.timeout(5000)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
addLog('I', 'OTA', `升级完成: ${data.message}`);
|
||||
addLog('I', 'OTA', 'ESP32 即将重启，新固件将生效，页面将继续通过 1 秒状态同步自动恢复显示');
|
||||
showToast('ESP32 重启中...', 'success');
|
||||
}
|
||||
} catch (e) {
|
||||
addLog('E', 'OTA', `升级失败: ${e.message}`);
|
||||
showToast('升级失败', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 触发 OTA 中继 ====================
|
||||
async function triggerRelay() {
|
||||
addLog('I', 'OTA', '触发 GD32 OTA 中继...');
|
||||
showToast('正在触发 OTA 中继', 'success');
|
||||
|
||||
document.getElementById('stage1').className = 'stage active';
|
||||
document.getElementById('statRelayState').textContent = '进行中';
|
||||
|
||||
try {
|
||||
const response = await fetch(`${getBaseUrl()}/ota/relay`, {
|
||||
method: 'POST',
|
||||
signal: AbortSignal.timeout(5000)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
addLog('I', 'OTA', 'OTA 中继已触发，正在等待 GD32 响应...');
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById('stage1').className = 'stage completed';
|
||||
document.getElementById('stage2').className = 'stage active';
|
||||
}, 2000);
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById('stage2').className = 'stage completed';
|
||||
document.getElementById('stage3').className = 'stage active';
|
||||
}, 4000);
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById('stage3').className = 'stage completed';
|
||||
document.getElementById('stage4').className = 'stage active';
|
||||
}, 6000);
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById('stage4').className = 'stage completed';
|
||||
document.getElementById('statRelayState').textContent = '完成';
|
||||
addLog('I', 'OTA', '=== OTA 中继完成 ===');
|
||||
showToast('OTA 流程完成！', 'success');
|
||||
}, 8000);
|
||||
|
||||
} else {
|
||||
addLog('E', 'OTA', `触发失败: HTTP ${response.status}`);
|
||||
showToast('触发失败', 'error');
|
||||
}
|
||||
} catch (e) {
|
||||
addLog('E', 'OTA', `触发失败: ${e.message}`);
|
||||
showToast('触发失败', 'error');
|
||||
document.getElementById('statRelayState').textContent = '失败';
|
||||
}
|
||||
}
|
||||
|
||||
// ==================== 轮询状态 ====================
|
||||
async function pollStatus() {
|
||||
try {
|
||||
const response = await fetch(`${getBaseUrl()}/system/status`, {
|
||||
signal: AbortSignal.timeout(3000)
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
updateSystemStatusUi(data);
|
||||
}
|
||||
} catch (e) {
|
||||
updateConnectionUi(false, '未连接');
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(pollStatus, 1000);
|
||||
|
||||
// ==================== ESP32 实时日志拉取 ====================
|
||||
async function pollLogs() {
|
||||
try {
|
||||
const response = await fetch(`${getBaseUrl()}/logs`, {
|
||||
signal: AbortSignal.timeout(2000)
|
||||
});
|
||||
if (!response.ok) return;
|
||||
const logs = await response.json();
|
||||
if (!Array.isArray(logs) || logs.length === 0) return;
|
||||
|
||||
// 解析 [I][WIFI] xxx 格式
|
||||
const levelMap = { 'E': 'E', 'W': 'W', 'I': 'I', 'D': 'D' };
|
||||
logs.forEach(line => {
|
||||
// 格式: [I][WIFI] message 或 [E][OTA] message
|
||||
const m = line.match(/^\[([EWID])\]\[([^\]]+)\]\s*(.*)$/);
|
||||
if (m) {
|
||||
addLog(levelMap[m[1]] || 'I', m[2], m[3].trimEnd());
|
||||
} else {
|
||||
addLog('I', 'ESP32', line.trimEnd());
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
// 静默失败，不打扰用户
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(pollLogs, 1000);
|
||||
|
||||
setTimeout(() => addLog('I', '系统', '上位机初始化完成，等待固件文件...'), 500);
|
||||
@@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ESP32 OTA 中继系统 - 上位机</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 顶部标题栏 -->
|
||||
<header class="header">
|
||||
<div class="logo-section">
|
||||
<div class="logo-icon">📡</div>
|
||||
<div class="logo-text">
|
||||
<h1>ESP32 OTA 中继系统</h1>
|
||||
<p>GD32 固件空中升级管理平台</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-badges">
|
||||
<div class="badge disconnected" id="connectionBadge">
|
||||
<span class="dot"></span>
|
||||
<span id="connectionText">未连接</span>
|
||||
</div>
|
||||
<div class="badge" id="healthBadge">
|
||||
<span class="dot"></span>
|
||||
<span id="healthText">系统正常</span>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<span id="fwVersion">v--</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 主网格布局 -->
|
||||
<div class="main-grid">
|
||||
<!-- 左侧面板 -->
|
||||
<div class="left-panel">
|
||||
<!-- 连接配置 -->
|
||||
<div class="card connection-card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<div class="icon">🔗</div>
|
||||
连接配置
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>ESP32 IP 地址</label>
|
||||
<div class="input-group">
|
||||
<input type="text" id="espIp" value="192.168.31.127" placeholder="输入 IP 地址">
|
||||
<button class="btn btn-secondary" onclick="testConnection()">测试</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>目标芯片</label>
|
||||
<select id="targetChip" onchange="onTargetChipChange()" style="width:100%;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text-primary);font-size:13px;">
|
||||
<option value="gd32">GD32（Flash 中继）</option>
|
||||
<option value="esp32">ESP32（自身升级）</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary" style="width:100%; margin-top:8px;" onclick="healthCheck()">
|
||||
🔍 执行健康检查
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 文件上传 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<div class="icon">📁</div>
|
||||
固件文件
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-zone" id="uploadZone" onclick="document.getElementById('fileInput').click()">
|
||||
<div class="upload-icon">📤</div>
|
||||
<h3>点击或拖拽文件到此处</h3>
|
||||
<p>支持 .hex 和 .bin 格式</p>
|
||||
</div>
|
||||
<input type="file" id="fileInput" class="file-input" accept=".hex,.bin" onchange="handleFileSelect(event)">
|
||||
|
||||
<div class="file-info" id="fileInfo">
|
||||
<div class="file-header">
|
||||
<div class="file-name">
|
||||
<span class="icon">📄</span>
|
||||
<span id="fileName">-</span>
|
||||
</div>
|
||||
<button class="btn btn-secondary" onclick="clearFile()" style="padding:6px 12px;">✕</button>
|
||||
</div>
|
||||
<div class="file-meta">
|
||||
<div class="meta-item"><span>类型:</span> <b id="fileType">-</b></div>
|
||||
<div class="meta-item"><span>大小:</span> <b id="fileSize">-</b></div>
|
||||
<div class="meta-item"><span>数据包:</span> <b id="fileChunks">-</b></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-section" id="progressSection">
|
||||
<div class="progress-bar-container">
|
||||
<div class="progress-bar" id="progressBar"></div>
|
||||
</div>
|
||||
<div class="progress-info">
|
||||
<span id="progressText">准备上传...</span>
|
||||
<span id="progressPercent">0%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-primary" id="uploadBtn" onclick="startUpload()" disabled>
|
||||
⬆️ 上传固件
|
||||
</button>
|
||||
<button class="btn btn-success" id="relayBtn" onclick="triggerRelay()">
|
||||
🚀 触发 OTA
|
||||
</button>
|
||||
</div>
|
||||
<div id="esp32Actions" style="display:none; margin-top:12px;">
|
||||
<button class="btn btn-primary" style="width:100%;" onclick="triggerEsp32Update()">
|
||||
🔄 完成 ESP32 升级（重启）
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OTA 阶段指示 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<div class="icon">📊</div>
|
||||
OTA 流程阶段
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-indicator">
|
||||
<div class="stage" id="stage1">
|
||||
<div class="stage-icon">1️⃣</div>
|
||||
<div class="stage-label">握手认证</div>
|
||||
</div>
|
||||
<div class="stage" id="stage2">
|
||||
<div class="stage-icon">2️⃣</div>
|
||||
<div class="stage-label">传输准备</div>
|
||||
</div>
|
||||
<div class="stage" id="stage3">
|
||||
<div class="stage-icon">3️⃣</div>
|
||||
<div class="stage-label">数据转发</div>
|
||||
</div>
|
||||
<div class="stage" id="stage4">
|
||||
<div class="stage-icon">4️⃣</div>
|
||||
<div class="stage-label">完成跳转</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧面板 -->
|
||||
<div class="right-panel">
|
||||
<!-- 实时状态 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<div class="icon">📈</div>
|
||||
实时状态
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-grid">
|
||||
<div class="status-item">
|
||||
<div class="value" id="statTemperature">--</div>
|
||||
<div class="label">芯片温度</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="value" id="statVoltage">--</div>
|
||||
<div class="label">电源电压</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="value" id="statWifi">--</div>
|
||||
<div class="label">WiFi 状态</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="value" id="statSignal">--</div>
|
||||
<div class="label">信号强度</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="value" id="statHeap">0</div>
|
||||
<div class="label">空闲堆</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="value" id="statMinHeap">0</div>
|
||||
<div class="label">最低空闲堆</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="value" id="statProgress">0%</div>
|
||||
<div class="label">上传进度</div>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<div class="value" id="statRelayState">待机</div>
|
||||
<div class="label">中继状态</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CAN 帧发送面板 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<div class="icon">📨</div>
|
||||
CAN 帧发送
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid; grid-template-columns:80px 1fr 80px 1fr; gap:12px; margin-bottom:16px;">
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:11px;color:var(--text-muted);margin-bottom:6px;display:block;">通道</label>
|
||||
<select id="canChannel" style="width:100%;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text-primary);font-size:13px;">
|
||||
<option value="0">CH0</option>
|
||||
<option value="1">CH1</option>
|
||||
<option value="2">CH2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:11px;color:var(--text-muted);margin-bottom:6px;display:block;">扩展帧 ID</label>
|
||||
<input type="text" id="canId" value="0x18DA00F1" placeholder="例如: 0x18DA00F1" style="width:100%;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text-primary);font-size:13px;">
|
||||
</div>
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:11px;color:var(--text-muted);margin-bottom:6px;display:block;">DLC</label>
|
||||
<input type="number" id="canDlc" value="8" min="1" max="64" style="width:100%;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text-primary);font-size:13px;">
|
||||
</div>
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label style="font-size:11px;color:var(--text-muted);margin-bottom:6px;display:block;">数据 (HEX)</label>
|
||||
<input type="text" id="canData" value="0102030405060708" placeholder="01020304..." style="width:100%;background:var(--bg-secondary);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text-primary);font-size:13px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;">
|
||||
<button class="btn btn-primary" style="flex:1;" onclick="sendCanFrame()">📤 发送</button>
|
||||
<button class="btn btn-secondary" onclick="clearCanFields()">清空</button>
|
||||
</div>
|
||||
<div id="canResponse" style="margin-top:16px;background:var(--bg-secondary);border-radius:10px;padding:12px 16px;font-family:monospace;font-size:12px;display:none;">
|
||||
<div style="color:var(--text-muted);margin-bottom:6px;">响应:</div>
|
||||
<div id="canRespContent" style="color:var(--accent);"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 调试日志 -->
|
||||
<div class="card log-panel">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
<div class="icon">🖥️</div>
|
||||
调试日志
|
||||
<span style="font-size:12px;color:var(--text-muted);font-weight:normal;margin-left:8px;">UDP:6666</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="log-header">
|
||||
<span style="font-size:13px;color:var(--text-muted);">实时日志输出</span>
|
||||
<div class="log-filters">
|
||||
<button class="filter-btn active" onclick="toggleFilter('all', this)">全部</button>
|
||||
<button class="filter-btn" onclick="toggleFilter('E', this)">错误</button>
|
||||
<button class="filter-btn" onclick="toggleFilter('W', this)">警告</button>
|
||||
<button class="filter-btn" onclick="toggleFilter('I', this)">信息</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-content" id="logContent">
|
||||
<div class="log-entry">
|
||||
<span class="log-time">[--:--:--]</span>
|
||||
<span class="log-level I">I</span>
|
||||
<span class="log-tag">[系统]</span>
|
||||
<span class="log-msg">等待上位机连接...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="log-footer">
|
||||
<span class="log-stats"><span id="logCount">0</span> 条日志</span>
|
||||
<button class="btn btn-secondary" onclick="clearLogs()" style="padding:6px 12px;font-size:12px;">清除日志</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast 提示 -->
|
||||
<div class="toast" id="toast">
|
||||
<span class="toast-icon" id="toastIcon">✓</span>
|
||||
<span class="toast-message" id="toastMessage">操作成功</span>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
+680
@@ -0,0 +1,680 @@
|
||||
:root {
|
||||
--bg-primary: #0a0e1a;
|
||||
--bg-secondary: #111827;
|
||||
--bg-card: #1a2235;
|
||||
--bg-card-hover: #1f2a40;
|
||||
--accent: #00d4ff;
|
||||
--accent-glow: rgba(0, 212, 255, 0.3);
|
||||
--accent-secondary: #7c3aed;
|
||||
--success: #10b981;
|
||||
--warning: #f59e0b;
|
||||
--danger: #ef4444;
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #94a3b8;
|
||||
--text-muted: #64748b;
|
||||
--border: #1e293b;
|
||||
--gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
--gradient-2: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
|
||||
--gradient-3: linear-gradient(135deg, #0a0e1a 0%, #1a2235 100%);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background:
|
||||
radial-gradient(ellipse 80% 50% at 20% 20%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(ellipse 60% 40% at 80% 80%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: var(--gradient-2);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
box-shadow: 0 8px 32px var(--accent-glow);
|
||||
}
|
||||
|
||||
.logo-text h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
background: var(--gradient-2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.logo-text p {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.status-badges {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
font-size: 13px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.badge .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.badge.connected .dot { background: var(--success); }
|
||||
.badge.disconnected .dot { background: var(--danger); animation: none; }
|
||||
.badge.warning .dot { background: var(--warning); }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
.main-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 420px 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.left-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: rgba(0, 212, 255, 0.2);
|
||||
box-shadow: 0 0 40px rgba(0, 212, 255, 0.05);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-title .icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: var(--gradient-2);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.connection-card .form-group {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 12px 16px;
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--gradient-2);
|
||||
color: white;
|
||||
box-shadow: 0 4px 20px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px var(--accent-glow);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-card-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.upload-zone {
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upload-zone::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(124, 58, 237, 0.05) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.upload-zone:hover::before,
|
||||
.upload-zone.dragover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.upload-zone:hover {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
margin: 0 auto 16px;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.upload-zone h3 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-zone p {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-info.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.file-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-name .icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.file-size {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
background: var(--bg-card);
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.meta-item span {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.progress-section {
|
||||
margin-top: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-section.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 10px;
|
||||
height: 12px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: var(--gradient-2);
|
||||
border-radius: 10px;
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-bar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(100%); }
|
||||
}
|
||||
|
||||
.progress-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.status-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.status-item .value {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
background: var(--gradient-2);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.status-item .label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.log-panel {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.log-panel .card-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.log-filters {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.filter-btn:hover,
|
||||
.filter-btn.active {
|
||||
background: var(--accent);
|
||||
color: white;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.log-content {
|
||||
flex: 1;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 12px;
|
||||
margin: 16px;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-track {
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.log-content::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.log-entry {
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.03);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.log-time { color: var(--text-muted); }
|
||||
.log-level {
|
||||
font-weight: 600;
|
||||
min-width: 24px;
|
||||
}
|
||||
.log-level.E { color: var(--danger); }
|
||||
.log-level.W { color: var(--warning); }
|
||||
.log-level.I { color: var(--accent); }
|
||||
.log-level.D { color: var(--text-muted); }
|
||||
.log-tag { color: var(--accent-secondary); }
|
||||
.log-msg { color: var(--text-primary); }
|
||||
|
||||
.log-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.log-stats {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stage-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.stage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stage:not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: calc(50% + 24px);
|
||||
width: calc(100% - 48px);
|
||||
height: 2px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.stage.active:not(:last-child)::after,
|
||||
.stage.completed:not(:last-child)::after {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.stage.active .stage-icon {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: white;
|
||||
box-shadow: 0 0 20px var(--accent-glow);
|
||||
}
|
||||
|
||||
.stage.completed .stage-icon {
|
||||
background: var(--success);
|
||||
border-color: var(--success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stage-label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stage.active .stage-label,
|
||||
.stage.completed .stage-label {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
|
||||
transform: translateY(100px);
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.toast.success { border-left: 4px solid var(--success); }
|
||||
.toast.error { border-left: 4px solid var(--danger); }
|
||||
.toast.warning { border-left: 4px solid var(--warning); }
|
||||
|
||||
.toast-icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
}
|
||||
|
||||
.left-panel .card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.left-panel .card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.left-panel .card:nth-child(3) { animation-delay: 0.3s; }
|
||||
|
||||
.right-panel .card:nth-child(1) { animation-delay: 0.15s; }
|
||||
.right-panel .card:nth-child(2) { animation-delay: 0.25s; }
|
||||
Reference in New Issue
Block a user