2503 lines
91 KiB
JavaScript
2503 lines
91 KiB
JavaScript
/**
|
|
* CapacityReport - 容量报表处理程序
|
|
* 前端 JavaScript - TDesign 风格
|
|
*/
|
|
|
|
// ==================== 工具函数 ====================
|
|
|
|
function $(selector) {
|
|
return document.querySelector(selector);
|
|
}
|
|
|
|
function $$(selector) {
|
|
return document.querySelectorAll(selector);
|
|
}
|
|
|
|
function formatFileSize(bytes) {
|
|
if (bytes === 0) return '0 B';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
|
}
|
|
|
|
function formatDateTime(isoString) {
|
|
const date = new Date(isoString);
|
|
return date.toLocaleString('zh-CN');
|
|
}
|
|
|
|
function getFileIcon(filename) {
|
|
const ext = filename.split('.').pop().toLowerCase();
|
|
const icons = {
|
|
'xlsx': '📊',
|
|
'xls': '📊',
|
|
'csv': '📋',
|
|
'zip': '📦'
|
|
};
|
|
return icons[ext] || '📄';
|
|
}
|
|
|
|
// Toast 通知
|
|
function showToast(message, type = 'info') {
|
|
const container = $('#toastContainer');
|
|
const toast = document.createElement('div');
|
|
toast.className = `toast ${type}`;
|
|
|
|
const icons = {
|
|
'success': '✓',
|
|
'error': '✕',
|
|
'warning': '!',
|
|
'info': 'i'
|
|
};
|
|
|
|
toast.innerHTML = `
|
|
<span class="toast-icon">${icons[type] || 'i'}</span>
|
|
<span>${message}</span>
|
|
`;
|
|
container.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.style.animation = 'toastIn 0.3s ease reverse';
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, 3000);
|
|
}
|
|
|
|
// 确认对话框
|
|
function showConfirm(title, message) {
|
|
return new Promise((resolve) => {
|
|
const modal = $('#confirmModal');
|
|
$('#confirmTitle').textContent = title;
|
|
$('#confirmMessage').textContent = message;
|
|
modal.classList.add('active');
|
|
|
|
const handleOk = () => {
|
|
modal.classList.remove('active');
|
|
cleanup();
|
|
resolve(true);
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
modal.classList.remove('active');
|
|
cleanup();
|
|
resolve(false);
|
|
};
|
|
|
|
const cleanup = () => {
|
|
$('#confirmOk').removeEventListener('click', handleOk);
|
|
$('#confirmCancel').removeEventListener('click', handleCancel);
|
|
modal.querySelector('.modal-backdrop').removeEventListener('click', handleCancel);
|
|
};
|
|
|
|
$('#confirmOk').addEventListener('click', handleOk);
|
|
$('#confirmCancel').addEventListener('click', handleCancel);
|
|
modal.querySelector('.modal-backdrop').addEventListener('click', handleCancel);
|
|
});
|
|
}
|
|
|
|
// API 调用
|
|
async function api(endpoint, options = {}) {
|
|
const response = await fetch(`/api${endpoint}`, {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...options.headers
|
|
},
|
|
...options
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const error = await response.json().catch(() => ({ detail: response.statusText }));
|
|
throw new Error(error.detail || '请求失败');
|
|
}
|
|
|
|
return response.json();
|
|
}
|
|
|
|
|
|
// ==================== 主题管理 ====================
|
|
|
|
class ThemeManager {
|
|
constructor() {
|
|
this.theme = localStorage.getItem('theme') || 'light';
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
// 应用保存的主题
|
|
this.apply(this.theme);
|
|
|
|
// 使用事件委托绑定所有主题切换按钮
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.closest('#themeToggle') || e.target.closest('#toggleThemeBtn')) {
|
|
this.toggle();
|
|
}
|
|
});
|
|
|
|
// 监听系统主题变化
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
if (!localStorage.getItem('theme')) {
|
|
this.apply(e.matches ? 'dark' : 'light');
|
|
}
|
|
});
|
|
}
|
|
|
|
apply(theme) {
|
|
this.theme = theme;
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
|
|
// 更新设置页面显示
|
|
const themeText = $('#currentTheme');
|
|
if (themeText) {
|
|
themeText.textContent = theme === 'dark' ? '深色模式' : '浅色模式';
|
|
}
|
|
}
|
|
|
|
toggle() {
|
|
const newTheme = this.theme === 'dark' ? 'light' : 'dark';
|
|
this.apply(newTheme);
|
|
localStorage.setItem('theme', newTheme);
|
|
showToast(`已切换到${newTheme === 'dark' ? '深色' : '浅色'}模式`, 'success');
|
|
}
|
|
}
|
|
|
|
|
|
// ==================== 页面导航 ====================
|
|
|
|
class Navigation {
|
|
constructor() {
|
|
this.currentPage = 'upload';
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
$$('.nav-item').forEach(item => {
|
|
item.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
const page = item.dataset.page;
|
|
this.navigate(page);
|
|
});
|
|
});
|
|
}
|
|
|
|
navigate(page) {
|
|
// 更新导航状态
|
|
$$('.nav-item').forEach(item => {
|
|
item.classList.toggle('active', item.dataset.page === page);
|
|
});
|
|
|
|
// 切换页面
|
|
$$('.page').forEach(p => {
|
|
p.classList.toggle('active', p.id === `page-${page}`);
|
|
});
|
|
|
|
this.currentPage = page;
|
|
|
|
// 保存当前页面到 localStorage
|
|
localStorage.setItem('currentPage', page);
|
|
|
|
// 触发页面加载事件
|
|
window.dispatchEvent(new CustomEvent('pagechange', { detail: { page } }));
|
|
|
|
// 如果导航到上传页面，检查活动任务
|
|
if (page === 'upload') {
|
|
const uploader = window.fileUploader;
|
|
if (uploader && uploader.checkActiveTask) {
|
|
uploader.checkActiveTask();
|
|
}
|
|
}
|
|
}
|
|
|
|
restorePage() {
|
|
// 从 localStorage 恢复页面
|
|
const savedPage = localStorage.getItem('currentPage');
|
|
console.log('恢复页面:', savedPage);
|
|
if (savedPage) {
|
|
// 验证页面是否存在
|
|
const pageEl = $(`#page-${savedPage}`);
|
|
if (pageEl) {
|
|
this.navigate(savedPage);
|
|
return;
|
|
}
|
|
}
|
|
// 如果没有保存的页面或页面不存在，确保默认显示上传页面
|
|
// HTML 中已经设置了 upload 为默认 active，这里不需要额外操作
|
|
}
|
|
}
|
|
|
|
|
|
// ==================== 文件上传 ====================
|
|
|
|
class FileUploader {
|
|
constructor() {
|
|
this.files = [];
|
|
this.taskId = null;
|
|
this.pollInterval = null;
|
|
this.isUploading = false;
|
|
this.uploadStats = {
|
|
total: 0,
|
|
uploading: 0,
|
|
success: 0,
|
|
error: 0
|
|
};
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
const uploadZone = $('#uploadZone');
|
|
const fileInput = $('#fileInput');
|
|
const fileInputSingle = $('#fileInputSingle');
|
|
|
|
// 拖拽事件
|
|
uploadZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
uploadZone.classList.add('dragover');
|
|
});
|
|
|
|
uploadZone.addEventListener('dragleave', () => {
|
|
uploadZone.classList.remove('dragover');
|
|
});
|
|
|
|
uploadZone.addEventListener('drop', async (e) => {
|
|
e.preventDefault();
|
|
uploadZone.classList.remove('dragover');
|
|
|
|
const items = e.dataTransfer.items;
|
|
const files = [];
|
|
|
|
for (let item of items) {
|
|
if (item.kind === 'file') {
|
|
const entry = item.webkitGetAsEntry();
|
|
if (entry) {
|
|
await this.traverseEntry(entry, files, '');
|
|
}
|
|
}
|
|
}
|
|
|
|
this.addFiles(files);
|
|
});
|
|
|
|
// 文件选择（目录）
|
|
fileInput.addEventListener('change', (e) => {
|
|
const files = Array.from(e.target.files).map(f => ({
|
|
file: f,
|
|
path: f.webkitRelativePath || f.name
|
|
}));
|
|
this.addFiles(files);
|
|
fileInput.value = '';
|
|
});
|
|
|
|
// 点击上传区域时选择文件
|
|
uploadZone.addEventListener('click', (e) => {
|
|
if (e.target === uploadZone || e.target.closest('.upload-icon') || e.target.closest('h3') || e.target.closest('p')) {
|
|
fileInputSingle.click();
|
|
}
|
|
});
|
|
|
|
fileInputSingle.addEventListener('change', (e) => {
|
|
const files = Array.from(e.target.files).map(f => ({
|
|
file: f,
|
|
path: f.name
|
|
}));
|
|
this.addFiles(files);
|
|
fileInputSingle.value = '';
|
|
});
|
|
|
|
// 清空按钮
|
|
$('#clearFiles').addEventListener('click', () => {
|
|
if (!this.isUploading) {
|
|
this.clearFiles();
|
|
}
|
|
});
|
|
|
|
// 上传按钮
|
|
$('#startUpload').addEventListener('click', () => {
|
|
this.upload();
|
|
});
|
|
|
|
// 不在页面加载时自动检查任务，只在用户导航到上传页面时检查
|
|
// 避免无意义的轮询请求
|
|
|
|
// 下载结果按钮
|
|
$('#downloadResult').addEventListener('click', () => {
|
|
$('#downloadModal').classList.add('active');
|
|
});
|
|
|
|
// 下载选项
|
|
$$('.download-option').forEach(btn => {
|
|
btn.addEventListener('click', async () => {
|
|
const table = btn.dataset.table;
|
|
try {
|
|
const response = await fetch('/api/download', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
table_name: table,
|
|
format: 'xlsx'
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('下载失败');
|
|
}
|
|
|
|
const blob = await response.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `${table}_${new Date().toISOString().slice(0, 10)}.xlsx`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
window.URL.revokeObjectURL(url);
|
|
} catch (error) {
|
|
showToast(`下载失败: ${error.message}`, 'error');
|
|
}
|
|
$('#downloadModal').classList.remove('active');
|
|
});
|
|
});
|
|
|
|
$('#downloadCancel').addEventListener('click', () => {
|
|
$('#downloadModal').classList.remove('active');
|
|
});
|
|
|
|
// 关闭模态框点击背景
|
|
$('#downloadModal .modal-backdrop').addEventListener('click', () => {
|
|
$('#downloadModal').classList.remove('active');
|
|
});
|
|
|
|
// 新建任务
|
|
$('#newProcess').addEventListener('click', () => {
|
|
this.reset();
|
|
});
|
|
}
|
|
|
|
async traverseEntry(entry, files, path) {
|
|
if (entry.isFile) {
|
|
return new Promise((resolve) => {
|
|
entry.file((file) => {
|
|
const fullPath = path ? `${path}/${file.name}` : file.name;
|
|
files.push({ file, path: fullPath });
|
|
resolve();
|
|
});
|
|
});
|
|
} else if (entry.isDirectory) {
|
|
const reader = entry.createReader();
|
|
return new Promise((resolve) => {
|
|
reader.readEntries(async (entries) => {
|
|
const newPath = path ? `${path}/${entry.name}` : entry.name;
|
|
for (let subEntry of entries) {
|
|
await this.traverseEntry(subEntry, files, newPath);
|
|
}
|
|
resolve();
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
addFiles(newFiles) {
|
|
if (this.isUploading) return;
|
|
|
|
// 过滤有效文件
|
|
const validExtensions = ['.zip', '.xlsx', '.xls', '.csv'];
|
|
const filtered = newFiles.filter(f => {
|
|
const ext = '.' + f.path.split('.').pop().toLowerCase();
|
|
return validExtensions.includes(ext);
|
|
}).map(f => ({
|
|
...f,
|
|
status: 'pending', // pending, uploading, uploaded, error
|
|
progress: 0
|
|
}));
|
|
|
|
this.files.push(...filtered);
|
|
this.updateFileList();
|
|
}
|
|
|
|
updateFileList() {
|
|
const fileList = $('#fileList');
|
|
const fileItems = $('#fileItems');
|
|
const fileCount = $('#fileCount');
|
|
|
|
if (this.files.length === 0) {
|
|
fileList.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
fileList.style.display = 'block';
|
|
fileItems.innerHTML = this.files.map((f, i) => `
|
|
<div class="file-item ${f.status}" data-index="${i}" id="file-item-${i}">
|
|
<span class="file-item-icon">${getFileIcon(f.path)}</span>
|
|
<span class="file-item-name" title="${f.path}">${f.path}</span>
|
|
<span class="file-item-size">${formatFileSize(f.file.size)}</span>
|
|
<span class="file-item-status ${f.status}">
|
|
${this.getStatusText(f.status, f.progress)}
|
|
</span>
|
|
${f.status !== 'pending' ? `
|
|
<div class="file-progress">
|
|
<div class="file-progress-bar" style="width: ${f.progress}%"></div>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`).join('');
|
|
|
|
fileCount.textContent = `${this.files.length} 个文件`;
|
|
}
|
|
|
|
getStatusText(status, progress) {
|
|
switch (status) {
|
|
case 'pending': return '等待上传';
|
|
case 'uploading': return `上传中 ${progress}%`;
|
|
case 'uploaded': return '✓ 已完成';
|
|
case 'error': return '✕ 失败';
|
|
default: return '';
|
|
}
|
|
}
|
|
|
|
updateFileStatus(index, status, progress = 0) {
|
|
if (this.files[index]) {
|
|
this.files[index].status = status;
|
|
this.files[index].progress = progress;
|
|
|
|
const fileItem = $(`#file-item-${index}`);
|
|
if (fileItem) {
|
|
// 更新样式类
|
|
fileItem.className = `file-item ${status}`;
|
|
fileItem.dataset.index = index;
|
|
fileItem.id = `file-item-${index}`;
|
|
|
|
// 更新状态文本
|
|
const statusEl = fileItem.querySelector('.file-item-status');
|
|
if (statusEl) {
|
|
statusEl.className = `file-item-status ${status}`;
|
|
statusEl.textContent = this.getStatusText(status, progress);
|
|
}
|
|
|
|
// 更新或创建进度条
|
|
let progressEl = fileItem.querySelector('.file-progress');
|
|
if (status !== 'pending') {
|
|
if (!progressEl) {
|
|
progressEl = document.createElement('div');
|
|
progressEl.className = 'file-progress';
|
|
progressEl.innerHTML = '<div class="file-progress-bar"></div>';
|
|
fileItem.appendChild(progressEl);
|
|
}
|
|
progressEl.querySelector('.file-progress-bar').style.width = `${progress}%`;
|
|
}
|
|
|
|
// 自动滚动到当前上传的文件
|
|
if (status === 'uploading') {
|
|
fileItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
updateUploadStats() {
|
|
const stats = {
|
|
total: this.files.length,
|
|
uploading: this.files.filter(f => f.status === 'uploading').length,
|
|
success: this.files.filter(f => f.status === 'uploaded').length,
|
|
error: this.files.filter(f => f.status === 'error').length
|
|
};
|
|
|
|
$('#statsTotal').textContent = stats.total;
|
|
$('#statsUploading').textContent = stats.uploading;
|
|
$('#statsSuccess').textContent = stats.success;
|
|
$('#statsError').textContent = stats.error;
|
|
|
|
// 更新总进度
|
|
const totalProgress = Math.round((stats.success + stats.error) / stats.total * 100);
|
|
$('#totalPercent').textContent = `${totalProgress}%`;
|
|
$('#totalProgressBar').style.width = `${totalProgress}%`;
|
|
}
|
|
|
|
clearFiles() {
|
|
this.files = [];
|
|
this.updateFileList();
|
|
$('#totalProgress').style.display = 'none';
|
|
$('#uploadStats').style.display = 'none';
|
|
}
|
|
|
|
async upload() {
|
|
if (this.files.length === 0) {
|
|
showToast('请先选择文件', 'warning');
|
|
return;
|
|
}
|
|
|
|
if (this.isUploading) {
|
|
showToast('正在上传中，请稍候', 'warning');
|
|
return;
|
|
}
|
|
|
|
// 检查是否有其他任务在运行
|
|
try {
|
|
const statusCheck = await api('/task/status');
|
|
if (statusCheck.has_active) {
|
|
const stageText = statusCheck.stage === 'uploading' ? '上传' : '处理';
|
|
showToast(`已有任务在运行（${stageText}中）`, 'warning');
|
|
// 显示当前任务状态
|
|
this.taskId = statusCheck.task_id;
|
|
$('#uploadZone').style.display = 'none';
|
|
$('#fileList').style.display = 'none';
|
|
$('#processSection').style.display = 'block';
|
|
$('#processActions').style.display = 'none';
|
|
$('#processStatus').className = 'process-status processing';
|
|
$('#processStatus').textContent = statusCheck.stage === 'uploading' ? '上传中...' : '处理中...';
|
|
if (statusCheck.logs && statusCheck.logs.length > 0) {
|
|
const logContent = $('#logContent');
|
|
logContent.innerHTML = statusCheck.logs.map(log => {
|
|
let level = 'info';
|
|
if (log.includes('[SUCCESS]')) level = 'success';
|
|
else if (log.includes('[ERROR]')) level = 'error';
|
|
else if (log.includes('[WARN]')) level = 'warn';
|
|
return `<div class="log-line ${level}">${log}</div>`;
|
|
}).join('');
|
|
}
|
|
if (statusCheck.stage === 'processing') {
|
|
this.pollStatus();
|
|
} else {
|
|
this.pollGlobalStatus();
|
|
}
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
console.error('检查任务状态失败:', error);
|
|
}
|
|
|
|
// 立即更新UI状态（在开始上传前）
|
|
// 隐藏上传区域和文件列表
|
|
$('#uploadZone').style.display = 'none';
|
|
$('#fileList').style.display = 'none';
|
|
$('#totalProgress').style.display = 'none';
|
|
$('#uploadStats').style.display = 'none';
|
|
|
|
// 显示处理区域（上传中状态）
|
|
$('#processSection').style.display = 'block';
|
|
$('#processActions').style.display = 'none';
|
|
$('#logContent').innerHTML = '<div class="log-line info">正在上传文件...</div>';
|
|
$('#processStatus').className = 'process-status processing';
|
|
$('#processStatus').textContent = '上传中...';
|
|
|
|
// 强制浏览器重绘
|
|
$('#processSection').offsetHeight;
|
|
|
|
this.isUploading = true;
|
|
$('#startUpload').disabled = true;
|
|
$('#clearFiles').disabled = true;
|
|
|
|
showToast('开始批量上传文件...', 'info');
|
|
|
|
try {
|
|
// 创建 FormData，添加所有文件
|
|
const formData = new FormData();
|
|
this.files.forEach(fileData => {
|
|
formData.append('files', fileData.file, fileData.path);
|
|
});
|
|
|
|
// 使用 XMLHttpRequest 来跟踪上传进度
|
|
const result = await new Promise((resolve, reject) => {
|
|
const xhr = new XMLHttpRequest();
|
|
|
|
// 上传进度事件
|
|
xhr.upload.addEventListener('progress', (e) => {
|
|
if (e.lengthComputable) {
|
|
const progress = Math.round((e.loaded / e.total) * 100);
|
|
// 更新日志显示进度
|
|
$('#logContent').innerHTML = `<div class="log-line info">正在上传文件... ${progress}%</div>`;
|
|
$('#processStatus').textContent = `上传中 ${progress}%`;
|
|
}
|
|
});
|
|
|
|
// 完成事件
|
|
xhr.addEventListener('load', () => {
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
try {
|
|
const result = JSON.parse(xhr.responseText);
|
|
resolve(result);
|
|
} catch {
|
|
resolve({ success: true });
|
|
}
|
|
} else {
|
|
reject(new Error('上传失败'));
|
|
}
|
|
});
|
|
|
|
// 错误事件
|
|
xhr.addEventListener('error', () => {
|
|
reject(new Error('网络错误'));
|
|
});
|
|
|
|
// 开始上传
|
|
xhr.open('POST', '/api/upload');
|
|
xhr.send(formData);
|
|
});
|
|
|
|
// 上传成功，获取后端返回的任务ID
|
|
const taskId = result.task_id || result.session_id;
|
|
if (!taskId) {
|
|
throw new Error('未获取到任务ID');
|
|
}
|
|
|
|
this.taskId = taskId;
|
|
console.log('上传完成，任务ID:', taskId);
|
|
|
|
// 注意：锁定已在后端上传接口中完成，这里不需要再次锁定
|
|
|
|
// 更新UI显示上传完成
|
|
$('#logContent').innerHTML = `<div class="log-line success">上传完成: ${result.file_count || this.files.length} 个文件</div>`;
|
|
$('#processStatus').textContent = '准备开始处理...';
|
|
showToast(`上传完成: ${result.file_count || this.files.length} 个文件`, 'success');
|
|
|
|
// 立即开始处理（不等待）
|
|
console.log('开始启动处理任务...');
|
|
this.startProcessing().catch(error => {
|
|
console.error('启动处理失败:', error);
|
|
showToast(`启动处理失败: ${error.message}`, 'error');
|
|
// 如果启动失败，恢复显示上传区域
|
|
$('#processSection').style.display = 'none';
|
|
this.restoreUploadUI();
|
|
});
|
|
|
|
} catch (error) {
|
|
showToast(`上传失败: ${error.message}`, 'error');
|
|
console.error('上传失败:', error);
|
|
// 上传失败，解锁全局任务（后端会自动处理，但这里也尝试解锁）
|
|
if (this.taskId) {
|
|
try {
|
|
await api('/task/unlock', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ task_id: this.taskId })
|
|
});
|
|
} catch (unlockError) {
|
|
console.error('解锁任务失败:', unlockError);
|
|
}
|
|
}
|
|
// 恢复显示上传区域
|
|
$('#processSection').style.display = 'none';
|
|
this.restoreUploadUI();
|
|
} finally {
|
|
this.isUploading = false;
|
|
$('#startUpload').disabled = false;
|
|
$('#clearFiles').disabled = false;
|
|
}
|
|
}
|
|
|
|
async startProcessing() {
|
|
if (!this.taskId) {
|
|
console.error('startProcessing: taskId 为空');
|
|
return;
|
|
}
|
|
|
|
console.log('startProcessing: 开始启动处理，taskId =', this.taskId);
|
|
|
|
try {
|
|
// 更新UI状态
|
|
$('#processStatus').textContent = '正在启动处理...';
|
|
$('#logContent').innerHTML = '<div class="log-line info">正在启动数据处理任务...</div>';
|
|
|
|
const response = await api('/process/start', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ task_id: this.taskId })
|
|
});
|
|
|
|
console.log('startProcessing: 处理任务已启动，响应:', response);
|
|
|
|
// 显示处理区域
|
|
$('#processSection').style.display = 'block';
|
|
$('#processActions').style.display = 'none';
|
|
$('#processStatus').className = 'process-status processing';
|
|
$('#processStatus').textContent = '处理中...';
|
|
$('#logContent').innerHTML = '<div class="log-line info">处理任务已启动，等待日志...</div>';
|
|
|
|
// 确保上传区域和文件列表保持隐藏
|
|
$('#uploadZone').style.display = 'none';
|
|
$('#fileList').style.display = 'none';
|
|
|
|
// 开始轮询状态（延迟一点，确保后端已经开始处理）
|
|
setTimeout(() => {
|
|
this.pollStatus();
|
|
}, 500);
|
|
|
|
} catch (error) {
|
|
console.error('startProcessing: 启动处理失败:', error);
|
|
showToast(`启动处理失败: ${error.message}`, 'error');
|
|
// 如果启动失败，恢复显示上传区域
|
|
$('#processSection').style.display = 'none';
|
|
this.restoreUploadUI();
|
|
// 解锁全局任务
|
|
if (this.taskId) {
|
|
try {
|
|
await api('/task/unlock', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ task_id: this.taskId })
|
|
});
|
|
} catch (unlockError) {
|
|
console.error('解锁任务失败:', unlockError);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
pollStatus() {
|
|
if (this.pollInterval) {
|
|
clearInterval(this.pollInterval);
|
|
}
|
|
|
|
if (!this.taskId) {
|
|
console.error('轮询状态失败: taskId 为空');
|
|
this.restoreUploadUI();
|
|
return;
|
|
}
|
|
|
|
console.log('开始轮询任务状态:', this.taskId);
|
|
|
|
// 绑定手动刷新按钮
|
|
const manualRefreshBtn = $('#manualRefreshLog');
|
|
if (manualRefreshBtn) {
|
|
manualRefreshBtn.onclick = () => {
|
|
this.refreshLogOnce();
|
|
};
|
|
}
|
|
|
|
// 监听自动刷新开关变化
|
|
const autoRefreshCheckbox = $('#autoRefreshLog');
|
|
if (autoRefreshCheckbox) {
|
|
autoRefreshCheckbox.addEventListener('change', (e) => {
|
|
if (e.target.checked) {
|
|
// 开启自动刷新，重新开始轮询
|
|
if (!this.pollInterval) {
|
|
this.pollStatus();
|
|
}
|
|
} else {
|
|
// 关闭自动刷新，停止轮询
|
|
if (this.pollInterval) {
|
|
clearInterval(this.pollInterval);
|
|
this.pollInterval = null;
|
|
console.log('已停止自动刷新轮询');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const poll = async () => {
|
|
try {
|
|
// 检查自动刷新开关
|
|
const autoRefreshCheckbox = $('#autoRefreshLog');
|
|
if (autoRefreshCheckbox && !autoRefreshCheckbox.checked) {
|
|
// 如果关闭了自动刷新，停止轮询
|
|
if (this.pollInterval) {
|
|
clearInterval(this.pollInterval);
|
|
this.pollInterval = null;
|
|
}
|
|
return;
|
|
}
|
|
const status = await api('/process/status', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ task_id: this.taskId })
|
|
});
|
|
|
|
// 更新日志
|
|
const logContent = $('#logContent');
|
|
if (status.logs && status.logs.length > 0) {
|
|
logContent.innerHTML = status.logs.map(log => {
|
|
let level = 'info';
|
|
if (log.includes('[SUCCESS]')) level = 'success';
|
|
else if (log.includes('[ERROR]')) level = 'error';
|
|
else if (log.includes('[WARN]')) level = 'warn';
|
|
return `<div class="log-line ${level}">${log}</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
// 自动滚动到底部（仅在自动刷新开启时）
|
|
if (autoRefreshCheckbox && autoRefreshCheckbox.checked) {
|
|
const container = $('#logContainer');
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
|
|
// 更新状态
|
|
const statusEl = $('#processStatus');
|
|
if (status.status === 'completed') {
|
|
statusEl.textContent = '处理完成';
|
|
statusEl.className = 'process-status completed';
|
|
$('#processActions').style.display = 'flex';
|
|
// 任务完成，立即停止轮询
|
|
if (this.pollInterval) {
|
|
clearInterval(this.pollInterval);
|
|
this.pollInterval = null;
|
|
}
|
|
showToast('数据处理完成！', 'success');
|
|
// 任务完成，不立即恢复上传区域，让用户查看结果
|
|
// 用户可以通过点击"新任务"按钮或切换页面来重置
|
|
this.files = []; // 清空已上传的文件
|
|
} else if (status.status === 'failed') {
|
|
statusEl.textContent = '处理失败';
|
|
statusEl.className = 'process-status failed';
|
|
$('#processActions').style.display = 'flex';
|
|
// 任务失败，立即停止轮询
|
|
if (this.pollInterval) {
|
|
clearInterval(this.pollInterval);
|
|
this.pollInterval = null;
|
|
}
|
|
showToast('数据处理失败', 'error');
|
|
// 任务失败，不立即恢复上传区域
|
|
this.files = [];
|
|
} else {
|
|
statusEl.textContent = '处理中...';
|
|
statusEl.className = 'process-status processing';
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('轮询状态失败:', error);
|
|
// 如果请求失败（如 404），可能是任务ID错误
|
|
if (error.message && error.message.includes('404')) {
|
|
clearInterval(this.pollInterval);
|
|
showToast('任务状态获取失败', 'error');
|
|
$('#processStatus').textContent = '状态获取失败';
|
|
$('#processStatus').className = 'process-status failed';
|
|
this.restoreUploadUI();
|
|
}
|
|
}
|
|
};
|
|
|
|
poll();
|
|
this.pollInterval = setInterval(poll, 1000);
|
|
}
|
|
|
|
async refreshLogOnce() {
|
|
if (!this.taskId) return;
|
|
|
|
try {
|
|
const status = await api('/process/status', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ task_id: this.taskId })
|
|
});
|
|
|
|
// 更新日志
|
|
const logContent = $('#logContent');
|
|
if (status.logs && status.logs.length > 0) {
|
|
logContent.innerHTML = status.logs.map(log => {
|
|
let level = 'info';
|
|
if (log.includes('[SUCCESS]')) level = 'success';
|
|
else if (log.includes('[ERROR]')) level = 'error';
|
|
else if (log.includes('[WARN]')) level = 'warn';
|
|
return `<div class="log-line ${level}">${log}</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
// 不自动滚动，让用户自己控制
|
|
} catch (error) {
|
|
console.error('手动刷新日志失败:', error);
|
|
}
|
|
}
|
|
|
|
restoreUploadUI() {
|
|
// 恢复显示上传区域（使用 flex 布局）
|
|
$('#uploadZone').style.display = 'flex';
|
|
// 只有当有文件时才显示文件列表
|
|
if (this.files.length > 0) {
|
|
$('#fileList').style.display = 'block';
|
|
}
|
|
// 隐藏进度和统计
|
|
$('#totalProgress').style.display = 'none';
|
|
$('#uploadStats').style.display = 'none';
|
|
this.isUploading = false;
|
|
$('#startUpload').disabled = false;
|
|
$('#clearFiles').disabled = false;
|
|
}
|
|
|
|
reset() {
|
|
this.files = [];
|
|
this.taskId = null;
|
|
this.isUploading = false;
|
|
if (this.pollInterval) {
|
|
clearInterval(this.pollInterval);
|
|
this.pollInterval = null;
|
|
}
|
|
|
|
this.updateFileList();
|
|
// 隐藏处理区域
|
|
$('#processSection').style.display = 'none';
|
|
$('#processActions').style.display = 'none';
|
|
$('#processStatus').className = 'process-status processing';
|
|
$('#processStatus').textContent = '处理中...';
|
|
$('#logContent').innerHTML = '';
|
|
// 恢复显示上传区域
|
|
this.restoreUploadUI();
|
|
console.log('任务已重置，UI 已恢复');
|
|
}
|
|
|
|
async checkActiveTask() {
|
|
// 检查是否有正在进行的任务（全局状态）
|
|
// 只在用户导航到上传页面时调用，避免无意义的请求
|
|
try {
|
|
const result = await api('/task/status');
|
|
if (result.has_active) {
|
|
// 有任务正在进行，隐藏上传区域，显示处理进度
|
|
$('#uploadZone').style.display = 'none';
|
|
$('#fileList').style.display = 'none';
|
|
$('#totalProgress').style.display = 'none';
|
|
$('#uploadStats').style.display = 'none';
|
|
this.taskId = result.task_id;
|
|
$('#processSection').style.display = 'block';
|
|
$('#processActions').style.display = 'none';
|
|
$('#processStatus').className = 'process-status processing';
|
|
|
|
// 根据阶段显示不同状态
|
|
const stageText = result.stage === 'uploading' ? '上传中...' : '处理中...';
|
|
$('#processStatus').textContent = stageText;
|
|
|
|
// 显示已有的日志
|
|
if (result.logs && result.logs.length > 0) {
|
|
const logContent = $('#logContent');
|
|
logContent.innerHTML = result.logs.map(log => {
|
|
let level = 'info';
|
|
if (log.includes('[SUCCESS]')) level = 'success';
|
|
else if (log.includes('[ERROR]')) level = 'error';
|
|
else if (log.includes('[WARN]')) level = 'warn';
|
|
return `<div class="log-line ${level}">${log}</div>`;
|
|
}).join('');
|
|
const container = $('#logContainer');
|
|
container.scrollTop = container.scrollHeight;
|
|
} else if (result.stage === 'uploading') {
|
|
$('#logContent').innerHTML = '<div class="log-line info">正在上传文件...</div>';
|
|
} else {
|
|
$('#logContent').innerHTML = '';
|
|
}
|
|
|
|
// 只有在处理中且自动刷新开启时才开始轮询
|
|
// 避免多人同时轮询导致并发过大
|
|
if (result.stage === 'processing') {
|
|
const autoRefreshCheckbox = $('#autoRefreshLog');
|
|
if (autoRefreshCheckbox && autoRefreshCheckbox.checked) {
|
|
this.pollStatus();
|
|
}
|
|
} else if (result.stage === 'uploading') {
|
|
// 上传中，轮询全局状态（但也要检查自动刷新）
|
|
const autoRefreshCheckbox = $('#autoRefreshLog');
|
|
if (autoRefreshCheckbox && autoRefreshCheckbox.checked) {
|
|
this.pollGlobalStatus();
|
|
}
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('检查活动任务失败:', error);
|
|
}
|
|
}
|
|
|
|
pollGlobalStatus() {
|
|
// 轮询全局任务状态（用于等待上传完成）
|
|
if (this.pollInterval) {
|
|
clearInterval(this.pollInterval);
|
|
}
|
|
|
|
const poll = async () => {
|
|
try {
|
|
// 检查自动刷新开关，如果关闭则停止轮询
|
|
const autoRefreshCheckbox = $('#autoRefreshLog');
|
|
if (autoRefreshCheckbox && !autoRefreshCheckbox.checked) {
|
|
if (this.pollInterval) {
|
|
clearInterval(this.pollInterval);
|
|
this.pollInterval = null;
|
|
}
|
|
return;
|
|
}
|
|
|
|
const result = await api('/task/status');
|
|
|
|
if (!result.has_active) {
|
|
// 任务已完成或取消，停止轮询并恢复上传界面
|
|
if (this.pollInterval) {
|
|
clearInterval(this.pollInterval);
|
|
this.pollInterval = null;
|
|
}
|
|
$('#processSection').style.display = 'none';
|
|
this.restoreUploadUI();
|
|
showToast('任务已完成', 'info');
|
|
} else if (result.stage === 'processing') {
|
|
// 转为处理中状态，切换到处理轮询
|
|
if (this.pollInterval) {
|
|
clearInterval(this.pollInterval);
|
|
this.pollInterval = null;
|
|
}
|
|
this.taskId = result.task_id;
|
|
$('#processStatus').textContent = '处理中...';
|
|
// 只有自动刷新开启时才继续轮询
|
|
if (autoRefreshCheckbox && autoRefreshCheckbox.checked) {
|
|
this.pollStatus();
|
|
}
|
|
} else {
|
|
// 仍在上传中
|
|
$('#processStatus').textContent = '上传中...';
|
|
}
|
|
} catch (error) {
|
|
console.error('轮询全局状态失败:', error);
|
|
}
|
|
};
|
|
|
|
poll();
|
|
this.pollInterval = setInterval(poll, 1000);
|
|
}
|
|
}
|
|
|
|
|
|
// ==================== 历史记录 ====================
|
|
|
|
class HistoryManager {
|
|
constructor() {
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
$('#refreshHistory').addEventListener('click', () => this.load());
|
|
$('#clearHistory').addEventListener('click', () => this.clear());
|
|
|
|
window.addEventListener('pagechange', (e) => {
|
|
if (e.detail.page === 'history') {
|
|
this.load();
|
|
}
|
|
});
|
|
}
|
|
|
|
async load() {
|
|
const container = $('#historyList');
|
|
container.innerHTML = '<div class="loading">加载中...</div>';
|
|
|
|
try {
|
|
const data = await api('/history', { method: 'POST' });
|
|
|
|
if (data.records.length === 0) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<span class="empty-icon">📭</span>
|
|
<p>暂无处理记录</p>
|
|
</div>
|
|
`;
|
|
// 即使没有历史记录，也要加载总占用大小
|
|
this.loadTotalSize();
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = data.records.map(record => `
|
|
<div class="history-item" data-id="${record.id}">
|
|
<div class="history-status ${record.status}"></div>
|
|
<div class="history-info">
|
|
<div class="history-id">${record.id}</div>
|
|
<div class="history-meta">
|
|
${formatDateTime(record.timestamp)} ·
|
|
${record.file_count} 个文件 ·
|
|
${record.elapsed_time ? record.elapsed_time + ' 秒' : '-'} ·
|
|
<span class="record-size" data-id="${record.id}">计算中...</span>
|
|
</div>
|
|
</div>
|
|
<div class="history-actions">
|
|
<button class="btn btn-sm btn-outline view-log" data-id="${record.id}">
|
|
📋 日志
|
|
</button>
|
|
<button class="btn btn-sm btn-danger delete-record" data-id="${record.id}">
|
|
🗑️
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
// 加载每个记录的占用大小
|
|
container.querySelectorAll('.record-size').forEach(el => {
|
|
this.loadRecordSize(el.dataset.id, el);
|
|
});
|
|
|
|
// 加载总占用大小
|
|
this.loadTotalSize();
|
|
|
|
// 绑定事件
|
|
container.querySelectorAll('.view-log').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
this.viewLog(btn.dataset.id);
|
|
});
|
|
});
|
|
|
|
container.querySelectorAll('.delete-record').forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
this.delete(btn.dataset.id);
|
|
});
|
|
});
|
|
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="empty-state"><p>加载失败: ${error.message}</p></div>`;
|
|
}
|
|
}
|
|
|
|
async viewLog(id) {
|
|
try {
|
|
const record = await api('/history/detail', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ record_id: id })
|
|
});
|
|
|
|
// 使用模态框显示日志
|
|
const modal = document.createElement('div');
|
|
modal.className = 'modal active';
|
|
modal.innerHTML = `
|
|
<div class="modal-backdrop"></div>
|
|
<div class="modal-content" style="width: 800px; max-height: 80vh;">
|
|
<h3>处理日志 - ${id}</h3>
|
|
<div class="log-container" style="height: 400px; margin-bottom: 16px;">
|
|
<div class="log-content">
|
|
${record.logs.map(log => {
|
|
let level = 'info';
|
|
if (log.includes('[SUCCESS]')) level = 'success';
|
|
else if (log.includes('[ERROR]')) level = 'error';
|
|
else if (log.includes('[WARN]')) level = 'warn';
|
|
return `<div class="log-line ${level}">${log}</div>`;
|
|
}).join('')}
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="btn btn-outline close-modal">关闭</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
|
|
modal.querySelector('.close-modal').addEventListener('click', () => modal.remove());
|
|
modal.querySelector('.modal-backdrop').addEventListener('click', () => modal.remove());
|
|
|
|
} catch (error) {
|
|
showToast(`加载日志失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async delete(id) {
|
|
const confirmed = await showConfirm('删除记录', '确定要删除这条历史记录吗？');
|
|
if (!confirmed) return;
|
|
|
|
try {
|
|
await api('/history/delete', { method: 'POST', body: JSON.stringify({ record_id: id }) });
|
|
showToast('删除成功', 'success');
|
|
this.load();
|
|
} catch (error) {
|
|
showToast(`删除失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async clear() {
|
|
const confirmed = await showConfirm('清空历史', '确定要清空所有历史记录吗？此操作不可恢复。');
|
|
if (!confirmed) return;
|
|
|
|
try {
|
|
await api('/history/clear', { method: 'POST' });
|
|
showToast('已清空所有历史记录', 'success');
|
|
this.load();
|
|
} catch (error) {
|
|
showToast(`清空失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async loadRecordSize(recordId, element) {
|
|
try {
|
|
const result = await api('/history/size', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ record_id: recordId })
|
|
});
|
|
if (result.success) {
|
|
element.textContent = result.size_formatted;
|
|
} else {
|
|
element.textContent = '计算失败';
|
|
}
|
|
} catch (error) {
|
|
element.textContent = '计算失败';
|
|
}
|
|
}
|
|
|
|
async loadTotalSize() {
|
|
const totalSizeEl = $('#totalHistorySize');
|
|
if (!totalSizeEl) return;
|
|
|
|
try {
|
|
const result = await api('/cache/size');
|
|
if (result.success) {
|
|
totalSizeEl.textContent = result.size_formatted;
|
|
} else {
|
|
totalSizeEl.textContent = '计算失败';
|
|
}
|
|
} catch (error) {
|
|
totalSizeEl.textContent = '计算失败';
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ==================== 数据库管理 ====================
|
|
|
|
class DatabaseManager {
|
|
constructor() {
|
|
this.currentTable = null;
|
|
this.currentPage = 1;
|
|
this.pageSize = 50;
|
|
this.totalPages = 1;
|
|
this.columns = [];
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
$('#searchInput').addEventListener('keyup', (e) => {
|
|
if (e.key === 'Enter') {
|
|
this.search();
|
|
}
|
|
});
|
|
|
|
$('#downloadTable').addEventListener('click', () => this.downloadTable());
|
|
$('#truncateTable').addEventListener('click', () => this.truncateTable());
|
|
$('#dropTable').addEventListener('click', () => this.dropTable());
|
|
|
|
$('#prevPage').addEventListener('click', () => {
|
|
if (this.currentPage > 1) {
|
|
this.currentPage--;
|
|
this.loadData();
|
|
}
|
|
});
|
|
|
|
$('#nextPage').addEventListener('click', () => {
|
|
if (this.currentPage < this.totalPages) {
|
|
this.currentPage++;
|
|
this.loadData();
|
|
}
|
|
});
|
|
|
|
window.addEventListener('pagechange', (e) => {
|
|
if (e.detail.page === 'database') {
|
|
this.testConnection();
|
|
this.loadTables();
|
|
}
|
|
});
|
|
}
|
|
|
|
async testConnection() {
|
|
const versionEl = $('#dbVersion');
|
|
if (!versionEl) return;
|
|
|
|
const versionBadge = versionEl.querySelector('.version-badge');
|
|
if (!versionBadge) return;
|
|
|
|
versionBadge.classList.remove('connected', 'error', 'unknown');
|
|
versionBadge.classList.add('unknown');
|
|
versionBadge.textContent = '检测中';
|
|
|
|
try {
|
|
const result = await api('/database/test', { method: 'POST' });
|
|
|
|
if (result.success) {
|
|
// 连接成功，加载服务器信息
|
|
await this.loadServerInfo();
|
|
} else {
|
|
// 连接失败
|
|
versionBadge.classList.remove('unknown');
|
|
versionBadge.classList.add('error');
|
|
versionBadge.textContent = '连接失败';
|
|
versionBadge.title = result.message || '无法连接到数据库';
|
|
}
|
|
} catch (error) {
|
|
// 连接异常
|
|
versionBadge.classList.remove('unknown');
|
|
versionBadge.classList.add('error');
|
|
versionBadge.textContent = '连接失败';
|
|
versionBadge.title = error.message || '连接异常';
|
|
}
|
|
}
|
|
|
|
async loadServerInfo() {
|
|
const versionEl = $('#dbVersion');
|
|
const loadDataEl = $('#loadDataSupport');
|
|
|
|
if (!versionEl || !loadDataEl) return;
|
|
|
|
try {
|
|
const info = await api('/database/info');
|
|
|
|
if (info.success) {
|
|
// 显示版本（连接成功）
|
|
const versionBadge = versionEl.querySelector('.version-badge');
|
|
versionBadge.classList.remove('unknown', 'error');
|
|
versionBadge.classList.add('connected');
|
|
versionBadge.textContent = info.version || '-';
|
|
versionBadge.title = '数据库版本';
|
|
|
|
// 显示 LOAD DATA INFILE 支持状态
|
|
const badge = loadDataEl.querySelector('.support-badge');
|
|
badge.classList.remove('unknown', 'supported', 'unsupported');
|
|
|
|
if (info.load_data_infile) {
|
|
badge.classList.add('supported');
|
|
badge.textContent = '已启用';
|
|
badge.title = info.load_data_message || '支持高速导入';
|
|
} else {
|
|
badge.classList.add('unsupported');
|
|
badge.textContent = '未启用';
|
|
badge.title = info.load_data_message || '将使用标准导入模式';
|
|
}
|
|
} else {
|
|
// 获取信息失败，但连接可能成功
|
|
const versionBadge = versionEl.querySelector('.version-badge');
|
|
versionBadge.classList.remove('unknown');
|
|
versionBadge.classList.add('error');
|
|
versionBadge.textContent = '获取失败';
|
|
versionBadge.title = info.error || '无法获取服务器信息';
|
|
}
|
|
} catch (error) {
|
|
console.error('获取服务器信息失败:', error);
|
|
const versionBadge = versionEl.querySelector('.version-badge');
|
|
versionBadge.classList.remove('unknown');
|
|
versionBadge.classList.add('error');
|
|
versionBadge.textContent = '获取失败';
|
|
versionBadge.title = error.message || '获取服务器信息异常';
|
|
}
|
|
}
|
|
|
|
async loadTables() {
|
|
const container = $('#tableList');
|
|
container.innerHTML = '<div class="loading">加载中...</div>';
|
|
|
|
try {
|
|
const data = await api('/database/tables');
|
|
|
|
if (data.tables.length === 0) {
|
|
container.innerHTML = '<div class="empty-state" style="padding: 24px;"><p>暂无数据表</p></div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = data.tables.map(table => `
|
|
<div class="table-item" data-table="${table}">
|
|
<span class="table-icon">📊</span>
|
|
<span>${table}</span>
|
|
</div>
|
|
`).join('');
|
|
|
|
container.querySelectorAll('.table-item').forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
container.querySelectorAll('.table-item').forEach(i => i.classList.remove('active'));
|
|
item.classList.add('active');
|
|
this.selectTable(item.dataset.table);
|
|
});
|
|
});
|
|
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="empty-state" style="padding: 24px;"><p>加载失败</p></div>`;
|
|
}
|
|
}
|
|
|
|
async selectTable(tableName) {
|
|
this.currentTable = tableName;
|
|
this.currentPage = 1;
|
|
|
|
$('#dbToolbar').style.display = 'flex';
|
|
$('#currentTable').textContent = tableName;
|
|
$('#pagination').style.display = 'flex';
|
|
|
|
try {
|
|
const info = await api('/database/table/info', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ table_name: tableName })
|
|
});
|
|
this.columns = info.columns.map(c => c.Field);
|
|
$('#rowCount').textContent = `${info.row_count} 行`;
|
|
|
|
await this.loadData();
|
|
|
|
} catch (error) {
|
|
showToast(`加载表信息失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async loadData() {
|
|
const container = $('#dataTableContainer');
|
|
container.innerHTML = '<div class="loading">加载中...</div>';
|
|
|
|
try {
|
|
const searchValue = $('#searchInput').value.trim();
|
|
let result;
|
|
|
|
if (searchValue && this.columns.length > 0) {
|
|
// 构建筛选条件（只用第一个字段搜索以提高性能）
|
|
const filters = {};
|
|
if (this.columns[0]) {
|
|
filters[this.columns[0]] = searchValue;
|
|
}
|
|
|
|
result = await api('/database/table/query', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
table_name: this.currentTable,
|
|
page: this.currentPage,
|
|
page_size: this.pageSize,
|
|
filters: filters
|
|
})
|
|
});
|
|
} else {
|
|
result = await api('/database/table/data', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
table_name: this.currentTable,
|
|
page: this.currentPage,
|
|
page_size: this.pageSize
|
|
})
|
|
});
|
|
}
|
|
|
|
this.totalPages = result.total_pages;
|
|
this.renderTable(result.data);
|
|
|
|
$('#pageInfo').textContent = `第 ${this.currentPage} / ${this.totalPages} 页 (共 ${result.total} 条)`;
|
|
$('#prevPage').disabled = this.currentPage <= 1;
|
|
$('#nextPage').disabled = this.currentPage >= this.totalPages;
|
|
|
|
} catch (error) {
|
|
container.innerHTML = `<div class="empty-state"><p>加载失败: ${error.message}</p></div>`;
|
|
}
|
|
}
|
|
|
|
renderTable(data) {
|
|
const container = $('#dataTableContainer');
|
|
|
|
if (data.length === 0) {
|
|
container.innerHTML = '<div class="empty-state"><p>暂无数据</p></div>';
|
|
return;
|
|
}
|
|
|
|
const columns = Object.keys(data[0]);
|
|
|
|
container.innerHTML = `
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
${columns.map(col => `<th>${col}</th>`).join('')}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${data.map(row => `
|
|
<tr>
|
|
${columns.map(col => `<td title="${row[col] || ''}">${row[col] ?? ''}</td>`).join('')}
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
}
|
|
|
|
search() {
|
|
this.currentPage = 1;
|
|
this.loadData();
|
|
}
|
|
|
|
async downloadTable() {
|
|
if (!this.currentTable) return;
|
|
try {
|
|
const response = await fetch('/api/download', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
table_name: this.currentTable,
|
|
format: 'xlsx'
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('下载失败');
|
|
}
|
|
|
|
const blob = await response.blob();
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `${this.currentTable}_${new Date().toISOString().slice(0, 10)}.xlsx`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
window.URL.revokeObjectURL(url);
|
|
} catch (error) {
|
|
showToast(`下载失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async truncateTable() {
|
|
if (!this.currentTable) return;
|
|
|
|
const confirmed = await showConfirm('清空表', `确定要清空表 "${this.currentTable}" 的所有数据吗？此操作不可恢复。`);
|
|
if (!confirmed) return;
|
|
|
|
try {
|
|
await api('/database/table/truncate', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ table_name: this.currentTable })
|
|
});
|
|
showToast('表已清空', 'success');
|
|
this.loadData();
|
|
} catch (error) {
|
|
showToast(`清空失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async dropTable() {
|
|
if (!this.currentTable) return;
|
|
|
|
const confirmed = await showConfirm('删除表', `确定要删除表 "${this.currentTable}" 吗？此操作不可恢复。`);
|
|
if (!confirmed) return;
|
|
|
|
try {
|
|
await api('/database/table/drop', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ table_name: this.currentTable })
|
|
});
|
|
showToast('表已删除', 'success');
|
|
this.currentTable = null;
|
|
$('#dbToolbar').style.display = 'none';
|
|
$('#pagination').style.display = 'none';
|
|
$('#dataTableContainer').innerHTML = '<div class="empty-state"><span class="empty-icon">👈</span><p>请选择左侧的数据表</p></div>';
|
|
this.loadTables();
|
|
} catch (error) {
|
|
showToast(`删除失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ==================== 设置管理 ====================
|
|
|
|
class SettingsManager {
|
|
constructor() {
|
|
this.sheetFilters = [];
|
|
this.extractFields = [];
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
// 数据库配置保存
|
|
$('#saveMysqlConfig').addEventListener('click', () => this.saveMysqlConfig());
|
|
$('#testDbConnection').addEventListener('click', () => this.testConnection());
|
|
|
|
// 密码显示/隐藏
|
|
$('#togglePassword').addEventListener('click', () => this.togglePasswordVisibility());
|
|
|
|
// Sheet 过滤规则
|
|
$('#addSheetFilter').addEventListener('click', () => this.addSheetFilter());
|
|
$('#newSheetFilter').addEventListener('keyup', (e) => {
|
|
if (e.key === 'Enter') this.addSheetFilter();
|
|
});
|
|
$('#saveSheetFilter').addEventListener('click', () => this.saveSheetFilters());
|
|
|
|
// 字段映射
|
|
$('#addFieldMapping').addEventListener('click', () => this.addFieldMapping());
|
|
$('#saveFieldMapping').addEventListener('click', () => this.saveFieldMappings());
|
|
|
|
window.addEventListener('pagechange', (e) => {
|
|
if (e.detail.page === 'settings') {
|
|
this.loadConfig();
|
|
}
|
|
});
|
|
}
|
|
|
|
togglePasswordVisibility() {
|
|
const input = $('#configPasswd');
|
|
const icon = $('#togglePassword .eye-icon');
|
|
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.textContent = '🙈';
|
|
} else {
|
|
input.type = 'password';
|
|
icon.textContent = '👁';
|
|
}
|
|
}
|
|
|
|
async loadConfig() {
|
|
try {
|
|
const config = await api('/config/full');
|
|
|
|
// 数据库配置
|
|
$('#configHost').value = config.mysql?.host || '';
|
|
$('#configPort').value = config.mysql?.port || 3306;
|
|
$('#configDbname').value = config.mysql?.dbname || '';
|
|
$('#configUser').value = config.mysql?.user || '';
|
|
$('#configPasswd').value = config.mysql?.passwd || '';
|
|
$('#configUpdate').textContent = `更新时间: ${config.update || '-'}`;
|
|
|
|
// Sheet 过滤规则
|
|
this.sheetFilters = config.sheet_filter || [];
|
|
this.renderSheetFilters();
|
|
|
|
// 字段映射
|
|
this.extractFields = config.extract_fields || [];
|
|
this.renderFieldMappings();
|
|
|
|
} catch (error) {
|
|
showToast(`加载配置失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async saveMysqlConfig() {
|
|
const data = {
|
|
host: $('#configHost').value.trim(),
|
|
port: parseInt($('#configPort').value) || 3306,
|
|
user: $('#configUser').value.trim(),
|
|
passwd: $('#configPasswd').value,
|
|
dbname: $('#configDbname').value.trim()
|
|
};
|
|
|
|
if (!data.host || !data.user || !data.dbname) {
|
|
showToast('请填写完整的数据库配置', 'warning');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await api('/config/mysql', {
|
|
method: 'POST',
|
|
body: JSON.stringify(data)
|
|
});
|
|
showToast('数据库配置已保存', 'success');
|
|
$('#configUpdate').textContent = `更新时间: ${result.update}`;
|
|
} catch (error) {
|
|
showToast(`保存失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async testConnection() {
|
|
try {
|
|
const result = await api('/database/test', { method: 'POST' });
|
|
if (result.success) {
|
|
showToast('数据库连接成功', 'success');
|
|
} else {
|
|
showToast(`连接失败: ${result.message}`, 'error');
|
|
}
|
|
} catch (error) {
|
|
showToast(`测试失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// ==================== Sheet 过滤规则 ====================
|
|
|
|
renderSheetFilters() {
|
|
const container = $('#sheetFilterList');
|
|
if (this.sheetFilters.length === 0) {
|
|
container.innerHTML = '<div class="empty-hint">暂无过滤规则</div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = this.sheetFilters.map((filter, index) => `
|
|
<div class="filter-item" data-index="${index}">
|
|
<span class="filter-text">${filter}</span>
|
|
<button class="btn-icon remove-filter" data-index="${index}" title="删除">✕</button>
|
|
</div>
|
|
`).join('');
|
|
|
|
// 绑定删除事件
|
|
container.querySelectorAll('.remove-filter').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const index = parseInt(btn.dataset.index);
|
|
this.sheetFilters.splice(index, 1);
|
|
this.renderSheetFilters();
|
|
});
|
|
});
|
|
}
|
|
|
|
addSheetFilter() {
|
|
const input = $('#newSheetFilter');
|
|
const value = input.value.trim();
|
|
|
|
if (!value) {
|
|
showToast('请输入过滤关键词', 'warning');
|
|
return;
|
|
}
|
|
|
|
if (this.sheetFilters.includes(value)) {
|
|
showToast('该关键词已存在', 'warning');
|
|
return;
|
|
}
|
|
|
|
this.sheetFilters.push(value);
|
|
input.value = '';
|
|
this.renderSheetFilters();
|
|
}
|
|
|
|
async saveSheetFilters() {
|
|
try {
|
|
const result = await api('/config/sheet-filter', {
|
|
method: 'POST',
|
|
body: JSON.stringify(this.sheetFilters)
|
|
});
|
|
showToast('Sheet 过滤规则已保存', 'success');
|
|
$('#configUpdate').textContent = `更新时间: ${result.update}`;
|
|
} catch (error) {
|
|
showToast(`保存失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// ==================== 字段映射配置 ====================
|
|
|
|
renderFieldMappings() {
|
|
const container = $('#fieldMappingList');
|
|
const countEl = $('#fieldCount');
|
|
|
|
// 更新字段数量显示
|
|
if (countEl) {
|
|
countEl.textContent = `${this.extractFields.length} 个字段`;
|
|
}
|
|
|
|
if (this.extractFields.length === 0) {
|
|
container.innerHTML = '<div class="empty-hint">暂无字段映射，点击下方按钮添加</div>';
|
|
return;
|
|
}
|
|
|
|
// 可用的字段类型
|
|
const fieldTypes = [
|
|
{ value: 'string', label: '字符串' },
|
|
{ value: 'datetime', label: '日期时间' },
|
|
{ value: 'int', label: '整数' },
|
|
{ value: 'float', label: '浮点数' },
|
|
{ value: 'text', label: '长文本' }
|
|
];
|
|
|
|
container.innerHTML = this.extractFields.map((field, index) => `
|
|
<div class="field-mapping-item" data-index="${index}">
|
|
<span class="field-mapping-number">${index + 1}</span>
|
|
<button class="btn-icon remove-mapping" data-index="${index}" title="删除此映射">✕</button>
|
|
<div class="field-mapping-header">
|
|
<div class="field-name">
|
|
<label>数据库字段名</label>
|
|
<input type="text" class="form-input field-input" value="${field.Field || ''}"
|
|
data-index="${index}" data-prop="Field" placeholder="输入字段名">
|
|
</div>
|
|
<div class="field-type">
|
|
<label>字段类型</label>
|
|
<select class="form-select type-select" data-index="${index}">
|
|
${fieldTypes.map(t => `
|
|
<option value="${t.value}" ${(field.Type || 'string') === t.value ? 'selected' : ''}>
|
|
${t.label}
|
|
</option>
|
|
`).join('')}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="extract-list">
|
|
<div class="extract-list-header">
|
|
<label>提取来源 (${(field.Extract || []).length} 个)</label>
|
|
<div class="add-extract-row">
|
|
<input type="text" class="form-input extract-input" placeholder="输入 Excel 列名"
|
|
data-index="${index}">
|
|
<button class="btn btn-sm btn-outline add-extract" data-index="${index}">添加</button>
|
|
</div>
|
|
</div>
|
|
${(field.Extract || []).length > 0 ? `
|
|
<div class="extract-tree" data-index="${index}">
|
|
${(field.Extract || []).map((extract, ei) => `
|
|
<div class="extract-tree-item">
|
|
<span class="tree-text">${extract}</span>
|
|
<button class="tree-remove" data-field="${index}" data-extract="${ei}" title="删除">✕</button>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
` : `
|
|
<div class="extract-empty">暂无提取来源，请在下方添加</div>
|
|
`}
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
// 绑定删除映射事件
|
|
container.querySelectorAll('.remove-mapping').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const index = parseInt(btn.dataset.index);
|
|
this.extractFields.splice(index, 1);
|
|
this.renderFieldMappings();
|
|
});
|
|
});
|
|
|
|
// 绑定字段名修改事件
|
|
container.querySelectorAll('.field-input').forEach(input => {
|
|
input.addEventListener('change', () => {
|
|
const index = parseInt(input.dataset.index);
|
|
this.extractFields[index].Field = input.value.trim();
|
|
});
|
|
});
|
|
|
|
// 绑定字段类型修改事件
|
|
container.querySelectorAll('.type-select').forEach(select => {
|
|
select.addEventListener('change', () => {
|
|
const index = parseInt(select.dataset.index);
|
|
this.extractFields[index].Type = select.value;
|
|
});
|
|
});
|
|
|
|
// 绑定删除提取来源事件
|
|
container.querySelectorAll('.tree-remove').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const fieldIndex = parseInt(btn.dataset.field);
|
|
const extractIndex = parseInt(btn.dataset.extract);
|
|
this.extractFields[fieldIndex].Extract.splice(extractIndex, 1);
|
|
this.renderFieldMappings();
|
|
});
|
|
});
|
|
|
|
// 绑定添加提取来源事件
|
|
container.querySelectorAll('.add-extract').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const index = parseInt(btn.dataset.index);
|
|
const input = container.querySelector(`.extract-input[data-index="${index}"]`);
|
|
const value = input.value.trim();
|
|
|
|
if (!value) return;
|
|
|
|
if (!this.extractFields[index].Extract) {
|
|
this.extractFields[index].Extract = [];
|
|
}
|
|
|
|
if (!this.extractFields[index].Extract.includes(value)) {
|
|
this.extractFields[index].Extract.push(value);
|
|
this.renderFieldMappings();
|
|
} else {
|
|
showToast('该来源已存在', 'warning');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 绑定回车添加
|
|
container.querySelectorAll('.extract-input').forEach(input => {
|
|
input.addEventListener('keyup', (e) => {
|
|
if (e.key === 'Enter') {
|
|
const index = parseInt(input.dataset.index);
|
|
container.querySelector(`.add-extract[data-index="${index}"]`).click();
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
addFieldMapping() {
|
|
this.extractFields.push({
|
|
Field: '',
|
|
Type: 'string',
|
|
Extract: []
|
|
});
|
|
this.renderFieldMappings();
|
|
|
|
// 滚动到底部
|
|
const container = $('#fieldMappingList');
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
|
|
async saveFieldMappings() {
|
|
// 过滤空字段
|
|
const validFields = this.extractFields.filter(f => f.Field && f.Field.trim());
|
|
|
|
if (validFields.length === 0) {
|
|
showToast('请至少添加一个有效的字段映射', 'warning');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const result = await api('/config/extract-fields', {
|
|
method: 'POST',
|
|
body: JSON.stringify(validFields)
|
|
});
|
|
this.extractFields = validFields;
|
|
showToast('字段映射配置已保存', 'success');
|
|
$('#configUpdate').textContent = `更新时间: ${result.update}`;
|
|
} catch (error) {
|
|
showToast(`保存失败: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// ==================== 初始化 ====================
|
|
|
|
// ==================== Cache 大小显示 ====================
|
|
|
|
async function updateCacheSize() {
|
|
const cacheSizeEl = $('#cacheSize');
|
|
if (!cacheSizeEl) return;
|
|
|
|
try {
|
|
const result = await api('/cache/size');
|
|
if (result.success) {
|
|
cacheSizeEl.textContent = `历史数据: ${result.size_formatted}`;
|
|
} else {
|
|
cacheSizeEl.textContent = '计算失败';
|
|
}
|
|
} catch (error) {
|
|
cacheSizeEl.textContent = '计算失败';
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// 主题管理（最先初始化）
|
|
new ThemeManager();
|
|
|
|
// 其他模块
|
|
const navigation = new Navigation();
|
|
window.fileUploader = new FileUploader();
|
|
new HistoryManager();
|
|
new DatabaseManager();
|
|
new SettingsManager();
|
|
|
|
// 恢复上次访问的页面
|
|
navigation.restorePage();
|
|
|
|
// 历史数据大小已在处理历史页面显示，不再在侧边栏显示
|
|
|
|
console.log('CapacityReport v2.0.0 已加载');
|
|
|
|
// 重启服务按钮事件（使用事件委托，支持所有页面的重启按钮）
|
|
document.addEventListener('click', async (e) => {
|
|
if (e.target.closest('.restart-btn') || e.target.closest('#restartService')) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const confirmed = await showConfirm(
|
|
'重启服务',
|
|
'确定要重启服务吗？这将中断当前所有操作。'
|
|
);
|
|
|
|
if (!confirmed) return;
|
|
|
|
// 显示加载遮罩
|
|
showRestartOverlay('正在重启服务...');
|
|
|
|
try {
|
|
await api('/service/restart', { method: 'POST' });
|
|
} catch (error) {
|
|
// 请求可能因为服务重启而失败，这是正常的
|
|
}
|
|
|
|
// 开始轮询检测服务是否恢复
|
|
pollServiceStatus();
|
|
}
|
|
});
|
|
|
|
// 显示重启加载遮罩
|
|
function showRestartOverlay(message) {
|
|
let overlay = $('#restartOverlay');
|
|
if (overlay) {
|
|
overlay.querySelector('.restart-overlay-text').textContent = message;
|
|
overlay.classList.add('active');
|
|
}
|
|
}
|
|
|
|
// 隐藏重启加载遮罩
|
|
function hideRestartOverlay() {
|
|
let overlay = $('#restartOverlay');
|
|
if (overlay) {
|
|
overlay.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
// 更新遮罩文字
|
|
function updateRestartOverlayText(message) {
|
|
let overlay = $('#restartOverlay');
|
|
if (overlay) {
|
|
overlay.querySelector('.restart-overlay-text').textContent = message;
|
|
}
|
|
}
|
|
|
|
// 轮询检测服务状态
|
|
function pollServiceStatus() {
|
|
let attempts = 0;
|
|
const maxAttempts = 60; // 最多尝试 60 次（约 5 分钟）
|
|
const pollInterval = 5000; // 每 5 秒检测一次
|
|
|
|
const checkService = async () => {
|
|
attempts++;
|
|
|
|
try {
|
|
const response = await fetch('/api/service/status', {
|
|
method: 'GET',
|
|
headers: { 'Content-Type': 'application/json' }
|
|
});
|
|
|
|
if (response.ok) {
|
|
// 服务已恢复
|
|
updateRestartOverlayText('服务已恢复，正在刷新页面...');
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 500);
|
|
return;
|
|
}
|
|
} catch (error) {
|
|
// 服务还未恢复，继续轮询
|
|
}
|
|
|
|
if (attempts < maxAttempts) {
|
|
setTimeout(checkService, pollInterval);
|
|
} else {
|
|
// 超时，提示用户手动刷新
|
|
hideRestartOverlay();
|
|
showToast('服务重启超时，请手动刷新页面', 'warning');
|
|
}
|
|
};
|
|
|
|
// 延迟 3 秒后开始轮询，给服务一些启动时间
|
|
setTimeout(checkService, 3000);
|
|
}
|
|
|
|
// 侧边栏折叠功能
|
|
const sidebar = $('#sidebar');
|
|
|
|
// 从 localStorage 读取折叠状态
|
|
const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true';
|
|
if (isCollapsed && sidebar) {
|
|
sidebar.classList.add('collapsed');
|
|
}
|
|
|
|
// 使用事件委托为所有侧边栏切换按钮绑定事件
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.closest('#sidebarToggle') || e.target.closest('.sidebar-toggle')) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (sidebar) {
|
|
sidebar.classList.toggle('collapsed');
|
|
const collapsed = sidebar.classList.contains('collapsed');
|
|
localStorage.setItem('sidebarCollapsed', collapsed ? 'true' : 'false');
|
|
}
|
|
}
|
|
});
|
|
|
|
// 初始化脚本编辑器（延迟初始化，只在页面显示时创建）
|
|
window.scriptEditor = new ScriptEditor();
|
|
|
|
// 监听页面切换事件，延迟初始化 Monaco Editor
|
|
window.addEventListener('pagechange', (e) => {
|
|
if (e.detail.page === 'script' && window.scriptEditor) {
|
|
// 延迟一点确保 DOM 已更新
|
|
setTimeout(() => {
|
|
window.scriptEditor.ensureEditor();
|
|
}, 100);
|
|
}
|
|
});
|
|
|
|
// 如果初始页面就是脚本编辑页面，也需要初始化
|
|
const initialPage = document.querySelector('.page.active')?.id;
|
|
if (initialPage === 'page-script' && window.scriptEditor) {
|
|
setTimeout(() => {
|
|
window.scriptEditor.ensureEditor();
|
|
}, 300);
|
|
}
|
|
});
|
|
|
|
|
|
// ==================== 脚本编辑器类 ====================
|
|
|
|
class ScriptEditor {
|
|
constructor() {
|
|
this.editor = null;
|
|
this.originalContent = '';
|
|
this.isModified = false;
|
|
this.monacoReady = false;
|
|
this.monacoLoading = false;
|
|
this.initAttempted = false;
|
|
|
|
// 只绑定事件，不立即初始化编辑器
|
|
this.bindEvents();
|
|
}
|
|
|
|
async waitForLoader() {
|
|
// 等待 loader.js 加载完成
|
|
let attempts = 0;
|
|
const maxAttempts = 50; // 最多等待 5 秒
|
|
|
|
while (attempts < maxAttempts) {
|
|
if (typeof require !== 'undefined' && typeof require.config === 'function') {
|
|
return true;
|
|
}
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
attempts++;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
async initMonaco() {
|
|
// 如果正在加载或已加载，直接返回
|
|
if (this.monacoLoading || this.monacoReady) {
|
|
return;
|
|
}
|
|
|
|
this.monacoLoading = true;
|
|
|
|
try {
|
|
// 等待 loader.js 加载完成
|
|
const loaderReady = await this.waitForLoader();
|
|
if (!loaderReady) {
|
|
throw new Error('Monaco Editor loader.js 加载超时');
|
|
}
|
|
|
|
// 只在第一次配置，避免重复配置导致冲突
|
|
if (!window.__monacoConfigSet) {
|
|
require.config({
|
|
paths: {
|
|
'vs': '/static/lib/monaco/vs'
|
|
},
|
|
'vs/nls': {
|
|
availableLanguages: {
|
|
'*': 'zh-cn' // 使用中文语言包
|
|
}
|
|
},
|
|
// 添加错误处理配置
|
|
onError: (err) => {
|
|
console.error('Monaco Editor 模块加载错误:', err);
|
|
// 不抛出错误，让加载继续
|
|
}
|
|
});
|
|
window.__monacoConfigSet = true;
|
|
}
|
|
|
|
// 先预加载关键依赖模块，确保它们完全加载
|
|
// 这样可以避免竞态条件导致的 undefined 描述符问题
|
|
await new Promise((resolve, reject) => {
|
|
setTimeout(() => {
|
|
try {
|
|
// 先加载 editor.api，确保基础 API 可用
|
|
require(['vs/editor.api.001a2486'], (apiModule) => {
|
|
if (!apiModule || !apiModule.editor) {
|
|
reject(new Error('editor.api 模块加载不完整'));
|
|
return;
|
|
}
|
|
// 验证关键 API 是否可用
|
|
if (!apiModule.editor || typeof apiModule.editor.create !== 'function') {
|
|
reject(new Error('editor.api 缺少关键方法'));
|
|
return;
|
|
}
|
|
console.log('editor.api 已加载并验证');
|
|
resolve();
|
|
}, (err) => {
|
|
console.error('editor.api 加载失败:', err);
|
|
reject(err);
|
|
});
|
|
} catch (error) {
|
|
reject(error);
|
|
}
|
|
}, 100);
|
|
});
|
|
|
|
// 再等待一点时间，确保所有依赖模块完全初始化
|
|
await new Promise(resolve => setTimeout(resolve, 150));
|
|
|
|
// 再加载完整的编辑器
|
|
await new Promise((resolve, reject) => {
|
|
try {
|
|
require(['vs/editor/editor.main'], (module) => {
|
|
// 检查模块是否正确加载
|
|
if (!module || !module.m) {
|
|
reject(new Error('Monaco Editor 模块加载不完整'));
|
|
return;
|
|
}
|
|
|
|
// 验证关键 API 是否可用
|
|
if (!module.m.editor || !module.m.editor.create) {
|
|
reject(new Error('Monaco Editor API 不完整'));
|
|
return;
|
|
}
|
|
|
|
// 将模块暴露到全局
|
|
window.monaco = module.m;
|
|
|
|
this.monacoReady = true;
|
|
this.monacoLoading = false;
|
|
console.log('Monaco Editor 加载成功');
|
|
resolve();
|
|
}, (err) => {
|
|
this.monacoLoading = false;
|
|
console.error('Monaco Editor 模块加载失败:', err);
|
|
// 尝试获取更详细的错误信息
|
|
if (err && err.requireModules) {
|
|
console.error('失败的模块:', err.requireModules);
|
|
}
|
|
reject(err);
|
|
});
|
|
} catch (error) {
|
|
this.monacoLoading = false;
|
|
console.error('Monaco Editor 加载异常:', error);
|
|
reject(error);
|
|
}
|
|
});
|
|
} catch (error) {
|
|
this.monacoLoading = false;
|
|
console.error('初始化 Monaco Editor 失败:', error);
|
|
showToast('编辑器加载失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async ensureEditor() {
|
|
// 检查容器是否存在且可见
|
|
const container = document.getElementById('scriptEditor');
|
|
if (!container) {
|
|
console.warn('脚本编辑器容器不存在');
|
|
return;
|
|
}
|
|
|
|
// 检查容器是否可见
|
|
const page = document.getElementById('page-script');
|
|
if (!page || !page.classList.contains('active')) {
|
|
console.warn('脚本编辑页面未激活');
|
|
return;
|
|
}
|
|
|
|
// 如果编辑器已创建，只需重新布局
|
|
if (this.editor) {
|
|
setTimeout(() => {
|
|
this.editor.layout();
|
|
}, 100);
|
|
return;
|
|
}
|
|
|
|
// 如果 Monaco 未加载，先加载
|
|
if (!this.monacoReady) {
|
|
await this.initMonaco();
|
|
}
|
|
|
|
// 创建编辑器
|
|
if (this.monacoReady && !this.editor) {
|
|
this.createEditor();
|
|
}
|
|
}
|
|
|
|
createEditor() {
|
|
const container = document.getElementById('scriptEditor');
|
|
if (!container) {
|
|
console.error('脚本编辑器容器不存在');
|
|
return;
|
|
}
|
|
|
|
// 如果编辑器已存在，先销毁
|
|
if (this.editor) {
|
|
try {
|
|
this.editor.dispose();
|
|
} catch (e) {
|
|
console.warn('销毁旧编辑器失败:', e);
|
|
}
|
|
}
|
|
|
|
try {
|
|
// 检测当前主题
|
|
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
|
|
// 创建编辑器实例
|
|
this.editor = monaco.editor.create(container, {
|
|
value: '-- 加载中...',
|
|
language: 'sql',
|
|
theme: isDark ? 'vs-dark' : 'vs',
|
|
fontSize: 14,
|
|
fontFamily: "'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace",
|
|
minimap: { enabled: true },
|
|
automaticLayout: true,
|
|
scrollBeyondLastLine: false,
|
|
wordWrap: 'on',
|
|
lineNumbers: 'on',
|
|
renderLineHighlight: 'all',
|
|
selectOnLineNumbers: true,
|
|
roundedSelection: true,
|
|
cursorBlinking: 'smooth',
|
|
cursorSmoothCaretAnimation: 'on',
|
|
smoothScrolling: true,
|
|
tabSize: 4,
|
|
insertSpaces: true,
|
|
folding: true,
|
|
foldingStrategy: 'indentation',
|
|
showFoldingControls: 'always',
|
|
bracketPairColorization: { enabled: true },
|
|
guides: {
|
|
bracketPairs: true,
|
|
indentation: true
|
|
},
|
|
suggest: {
|
|
showKeywords: true,
|
|
showSnippets: true
|
|
}
|
|
});
|
|
|
|
// 监听内容变化
|
|
this.editor.onDidChangeModelContent(() => {
|
|
this.checkModified();
|
|
});
|
|
|
|
// 监听光标位置变化
|
|
this.editor.onDidChangeCursorPosition((e) => {
|
|
this.updateCursorPosition(e.position);
|
|
});
|
|
|
|
// 添加快捷键
|
|
this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
|
|
this.saveScript();
|
|
});
|
|
|
|
// 监听窗口大小变化，自动调整布局
|
|
window.addEventListener('resize', () => {
|
|
if (this.editor) {
|
|
this.editor.layout();
|
|
}
|
|
});
|
|
|
|
// 延迟加载脚本内容，确保编辑器已完全渲染
|
|
setTimeout(() => {
|
|
this.loadScript();
|
|
}, 200);
|
|
} catch (error) {
|
|
console.error('创建编辑器失败:', error);
|
|
showToast('创建编辑器失败: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
async loadScript() {
|
|
try {
|
|
this.updateStatus('加载中...');
|
|
const result = await api('/script/content');
|
|
|
|
if (result.success) {
|
|
this.originalContent = result.content;
|
|
if (this.editor) {
|
|
this.editor.setValue(result.content);
|
|
}
|
|
|
|
// 更新路径和修改时间
|
|
const pathEl = document.getElementById('scriptPath');
|
|
const modifiedEl = document.getElementById('scriptModified');
|
|
|
|
if (pathEl) {
|
|
pathEl.textContent = result.path;
|
|
pathEl.title = result.path;
|
|
}
|
|
|
|
if (modifiedEl && result.modified) {
|
|
modifiedEl.textContent = `最后修改: ${result.modified}`;
|
|
}
|
|
|
|
this.isModified = false;
|
|
this.updateStatus('就绪');
|
|
} else {
|
|
showToast('加载脚本失败: ' + result.error, 'error');
|
|
this.updateStatus('加载失败');
|
|
}
|
|
} catch (error) {
|
|
showToast('加载脚本失败: ' + error.message, 'error');
|
|
this.updateStatus('加载失败');
|
|
}
|
|
}
|
|
|
|
async saveScript() {
|
|
if (!this.editor) return;
|
|
|
|
try {
|
|
this.updateStatus('保存中...');
|
|
const content = this.editor.getValue();
|
|
|
|
const result = await api('/script/save', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ content })
|
|
});
|
|
|
|
if (result.success) {
|
|
this.originalContent = content;
|
|
this.isModified = false;
|
|
|
|
// 更新修改时间
|
|
const modifiedEl = document.getElementById('scriptModified');
|
|
if (modifiedEl && result.modified) {
|
|
modifiedEl.textContent = `最后修改: ${result.modified}`;
|
|
}
|
|
|
|
showToast('脚本保存成功', 'success');
|
|
this.updateStatus('已保存');
|
|
} else {
|
|
showToast('保存失败: ' + result.error, 'error');
|
|
this.updateStatus('保存失败');
|
|
}
|
|
} catch (error) {
|
|
showToast('保存失败: ' + error.message, 'error');
|
|
this.updateStatus('保存失败');
|
|
}
|
|
}
|
|
|
|
formatScript() {
|
|
if (!this.editor) return;
|
|
|
|
// Monaco 内置的格式化功能
|
|
this.editor.getAction('editor.action.formatDocument').run();
|
|
showToast('格式化完成', 'success');
|
|
}
|
|
|
|
checkModified() {
|
|
if (!this.editor) return;
|
|
|
|
const current = this.editor.getValue();
|
|
this.isModified = current !== this.originalContent;
|
|
|
|
// 更新标题显示修改状态
|
|
const saveBtn = document.getElementById('saveScript');
|
|
if (saveBtn) {
|
|
if (this.isModified) {
|
|
saveBtn.classList.add('modified');
|
|
saveBtn.innerHTML = '💾 保存 *';
|
|
} else {
|
|
saveBtn.classList.remove('modified');
|
|
saveBtn.innerHTML = '💾 保存';
|
|
}
|
|
}
|
|
}
|
|
|
|
updateCursorPosition(position) {
|
|
const cursorEl = document.getElementById('editorCursor');
|
|
if (cursorEl) {
|
|
cursorEl.textContent = `行 ${position.lineNumber}, 列 ${position.column}`;
|
|
}
|
|
}
|
|
|
|
updateStatus(status) {
|
|
const statusEl = document.getElementById('editorStatus');
|
|
if (statusEl) {
|
|
statusEl.textContent = status;
|
|
}
|
|
}
|
|
|
|
updateTheme(isDark) {
|
|
if (this.editor) {
|
|
monaco.editor.setTheme(isDark ? 'vs-dark' : 'vs');
|
|
}
|
|
}
|
|
|
|
bindEvents() {
|
|
// 保存按钮
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.closest('#saveScript')) {
|
|
this.saveScript();
|
|
}
|
|
if (e.target.closest('#formatScript')) {
|
|
this.formatScript();
|
|
}
|
|
});
|
|
|
|
// 监听主题变化
|
|
const observer = new MutationObserver((mutations) => {
|
|
mutations.forEach((mutation) => {
|
|
if (mutation.attributeName === 'data-theme') {
|
|
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
this.updateTheme(isDark);
|
|
}
|
|
});
|
|
});
|
|
|
|
observer.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ['data-theme']
|
|
});
|
|
|
|
// 页面离开前提示保存
|
|
window.addEventListener('beforeunload', (e) => {
|
|
if (this.isModified) {
|
|
e.preventDefault();
|
|
e.returnValue = '您有未保存的更改，确定要离开吗？';
|
|
return e.returnValue;
|
|
}
|
|
});
|
|
}
|
|
}
|