数据集上传界面完善

web/pages/dataset-create.html

@@ -216,7 +216,7 @@
                             <label class="block text-sm font-medium text-gray-700 mb-2">存储位置</label>
                             <div class="flex items-center space-x-6">
                                 <label class="flex items-center cursor-pointer">
-                                    <input type="radio" name="storage" value="local" class="radio-custom absolute opacity-0" checked>
+                                    <input type="radio" name="storage" value="local" class="radio-custom absolute opacity-0" checked onchange="toggleStorageConfig()">
                                     <div class="flex items-center space-x-1">
                                         <div class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center">
                                             <div class="radio-dot"></div>
@@ -225,7 +225,7 @@
                                     </div>
                                 </label>
                                 <label class="flex items-center cursor-pointer">
-                                    <input type="radio" name="storage" value="cloud" class="radio-custom absolute opacity-0">
+                                    <input type="radio" name="storage" value="cloud" class="radio-custom absolute opacity-0" onchange="toggleStorageConfig()">
                                     <div class="flex items-center space-x-1">
                                         <div class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center">
                                             <div class="radio-dot"></div>
@@ -233,6 +233,45 @@
                                         <span class="text-sm text-gray-700">云平台存储</span>
                                     </div>
                                 </label>
+                                <label class="flex items-center cursor-pointer">
+                                    <input type="radio" name="storage" value="minio" class="radio-custom absolute opacity-0" onchange="toggleStorageConfig()">
+                                    <div class="flex items-center space-x-1">
+                                        <div class="w-4 h-4 rounded-full border-2 border-gray-300 flex items-center justify-center">
+                                            <div class="radio-dot"></div>
+                                        </div>
+                                        <span class="text-sm text-gray-700">MinIO存储</span>
+                                    </div>
+                                </label>
+                            </div>
+                            <!-- MinIO配置面板 -->
+                            <div id="minioConfigPanel" class="hidden mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
+                                <div class="grid grid-cols-2 gap-4">
+                                    <div>
+                                        <label class="block text-xs text-gray-600 mb-1">Endpoint地址</label>
+                                        <input type="text" name="minio_endpoint" placeholder="如：http://localhost:9000" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none">
+                                    </div>
+                                    <div>
+                                        <label class="block text-xs text-gray-600 mb-1">Bucket名称</label>
+                                        <input type="text" name="minio_bucket" placeholder="如：datasets" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none">
+                                    </div>
+                                    <div>
+                                        <label class="block text-xs text-gray-600 mb-1">Access Key</label>
+                                        <input type="text" name="minio_access_key" placeholder="Access Key" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none">
+                                    </div>
+                                    <div>
+                                        <label class="block text-xs text-gray-600 mb-1">Secret Key</label>
+                                        <input type="password" name="minio_secret_key" placeholder="Secret Key" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-primary focus:outline-none">
+                                    </div>
+                                </div>
+                                <div class="mt-3 flex items-center justify-between">
+                                    <div class="flex items-center">
+                                        <input type="checkbox" id="minioSSL" name="minio_ssl" class="mr-2">
+                                        <label for="minioSSL" class="text-xs text-gray-600">使用SSL连接</label>
+                                    </div>
+                                    <button type="button" onclick="testMinioConnection()" class="px-3 py-1 text-xs bg-white border border-primary text-primary rounded hover:bg-primary/5 transition-colors">
+                                        <i class="fa fa-plug mr-1"></i>测试连接
+                                    </button>
+                                </div>
                             </div>
                         </div>
 
@@ -247,10 +286,12 @@
                                 <input type="file" id="file-upload" class="absolute opacity-0" multiple accept=".jsonl,.xls,.xlsx">
                                 <div class="flex flex-col items-center space-y-2">
                                     <i class="fa fa-cloud-upload text-2xl text-gray-400"></i>
-                                    <p class="text-sm text-gray-600">点击或将文件拖拽到这里上传 (0/10)</p>
+                                    <p class="text-sm text-gray-600">点击或将文件拖拽到这里上传 (<span id="fileCount">0</span>/10)</p>
                                     <p class="text-xs text-gray-500">支持扩展名：jsonl, xls, xlsx, 文件最大200MB<br>一次最多导入10个文件</p>
                                 </div>
                             </div>
+                            <!-- 已上传文件列表 -->
+                            <div id="fileList" class="mt-4 space-y-2"></div>
                         </div>
 
                         <!-- 8. 模板链接 -->
@@ -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;
+                const files = Array.from(e.dataTransfer.files);
-                if (files.length) {
+                handleFiles(files);
-                    fileUpload.files = files;
-                    console.log('拖放的文件：', 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 `
+                    <div class="flex items-center justify-between bg-gray-50 px-4 py-2 rounded-lg border border-gray-200">
+                        <div class="flex items-center space-x-3">
+                            <i class="fa ${icon} text-primary text-lg"></i>
+                            <span class="text-sm text-gray-700 truncate max-w-md" title="${file.name}">${file.name}</span>
+                            <span class="text-xs text-gray-400">${size}</span>
+                        </div>
+                        <button type="button" onclick="removeFile(${index})" class="text-gray-400 hover:text-red-500 transition-colors" title="删除文件">
+                            <i class="fa fa-trash-o text-lg"></i>
+                        </button>
+                    </div>
+                `;
+            }).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',