diff --git a/web/pages/dataset-create.html b/web/pages/dataset-create.html index 216e824..18c2d69 100644 --- a/web/pages/dataset-create.html +++ b/web/pages/dataset-create.html @@ -216,7 +216,7 @@
+ +
@@ -292,6 +333,9 @@ // 返回页面 let backUrl = 'main.html?page=dataset-manage'; + // 已选择的文件列表 + let selectedFiles = []; + // 页面加载完成后初始化 document.addEventListener('DOMContentLoaded', function() { // 根据URL参数设置返回页面 @@ -331,16 +375,14 @@ // 处理文件拖放 uploadArea.addEventListener('drop', (e) => { - const files = e.dataTransfer.files; - if (files.length) { - fileUpload.files = files; - console.log('拖放的文件：', files); - } + const files = Array.from(e.dataTransfer.files); + handleFiles(files); }); // 监听文件选择 fileUpload.addEventListener('change', () => { - console.log('选择的文件：', fileUpload.files); + const files = Array.from(fileUpload.files); + handleFiles(files); }); // 绑定导航点击事件 @@ -393,26 +435,177 @@ } } + // 处理文件选择 + function handleFiles(files) { + const validExtensions = ['.jsonl', '.xls', '.xlsx']; + const maxFileSize = 200 * 1024 * 1024; // 200MB + const maxFiles = 10; + + files.forEach(file => { + // 检查文件扩展名 + const ext = '.' + file.name.split('.').pop().toLowerCase(); + if (!validExtensions.includes(ext)) { + alert(`文件 "${file.name}" 扩展名不支持，请上传 jsonl、xls 或 xlsx 格式的文件`); + return; + } + + // 检查文件大小 + if (file.size > maxFileSize) { + alert(`文件 "${file.name}" 大小超过200MB限制`); + return; + } + + // 检查是否已存在相同文件 + const exists = selectedFiles.some(f => f.name === file.name && f.size === file.size); + if (exists) { + return; + } + + // 检查文件数量 + if (selectedFiles.length >= maxFiles) { + alert('最多只能上传10个文件'); + return; + } + + selectedFiles.push(file); + }); + + renderFileList(); + } + + // 渲染文件列表 + function renderFileList() { + const fileListEl = document.getElementById('fileList'); + const fileCountEl = document.getElementById('fileCount'); + + // 更新文件计数 + fileCountEl.textContent = selectedFiles.length; + + if (selectedFiles.length === 0) { + fileListEl.innerHTML = ''; + return; + } + + fileListEl.innerHTML = selectedFiles.map((file, index) => { + const size = formatFileSize(file.size); + const icon = getFileIcon(file.name); + return ` +
+
+ + ${file.name} + ${size} +
+ +
+ `; + }).join(''); + } + + // 格式化文件大小 + function formatFileSize(bytes) { + if (bytes < 1024) return bytes + ' B'; + if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'; + return (bytes / (1024 * 1024)).toFixed(1) + ' MB'; + } + + // 获取文件图标 + function getFileIcon(filename) { + const ext = filename.split('.').pop().toLowerCase(); + if (ext === 'xls' || ext === 'xlsx') { + return 'fa-file-excel-o'; + } else if (ext === 'jsonl' || ext === 'json') { + return 'fa-file-code-o'; + } + return 'fa-file-text-o'; + } + + // 删除文件 + function removeFile(index) { + selectedFiles.splice(index, 1); + renderFileList(); + } + // 数据集类型切换逻辑 function switchDatasetType() { // 数据集类型切换逻辑 } + // 存储位置切换逻辑 + function toggleStorageConfig() { + const storageValue = document.querySelector('input[name="storage"]:checked').value; + const minioConfigPanel = document.getElementById('minioConfigPanel'); + if (storageValue === 'minio') { + minioConfigPanel.classList.remove('hidden'); + } else { + minioConfigPanel.classList.add('hidden'); + } + } + + // 测试MinIO连接 + function testMinioConnection() { + const endpoint = document.querySelector('input[name="minio_endpoint"]').value; + const bucket = document.querySelector('input[name="minio_bucket"]').value; + const accessKey = document.querySelector('input[name="minio_access_key"]').value; + const secretKey = document.querySelector('input[name="minio_secret_key"]').value; + + if (!endpoint || !bucket || !accessKey || !secretKey) { + alert('请填写完整的MinIO配置信息'); + return; + } + + // 模拟测试连接 + alert('正在测试连接...\n\n连接成功！MinIO服务可用。'); + } + // 提交表单 async function submitForm() { const form = document.getElementById('datasetForm'); const formData = new FormData(form); + const storageValue = formData.get('storage'); const data = { name: formData.get('name'), dataset_type: formData.get('dataset_type'), - storage: formData.get('storage') + storage: storageValue }; + // 验证文件 + if (selectedFiles.length === 0) { + alert('请选择至少一个文件上传'); + return; + } + + // 如果选择MinIO存储，添加MinIO配置 + if (storageValue === 'minio') { + data.minio_config = { + endpoint: formData.get('minio_endpoint'), + bucket: formData.get('minio_bucket'), + access_key: formData.get('minio_access_key'), + secret_key: formData.get('minio_secret_key'), + ssl: formData.get('minio_ssl') === 'on' + }; + + // 验证MinIO配置 + if (!data.minio_config.endpoint || !data.minio_config.bucket || !data.minio_config.access_key || !data.minio_config.secret_key) { + alert('请填写完整的MinIO配置信息'); + return; + } + } + if (!data.name) { alert('请输入数据集名称'); return; } + // 添加文件信息到请求数据 + data.files = selectedFiles.map(file => ({ + name: file.name, + size: file.size, + type: file.type + })); + try { const response = await fetch(`${API_BASE}/dataset-manage`, { method: 'POST',