YG-Soft/YG_FT_Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

数据集上传界面完善

Browse Source
This commit is contained in:
leokaka1
2026-01-19 14:53:16 +08:00
parent 373f5244e5
commit 88eaa33db0
1 changed files with 203 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

213
web/pages/dataset-create.html
View File

@@ -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;
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 `
<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',