Viajero/Achievement_Inputing
2
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases 4 Wiki Activity

增加了进度条，提升等待感知[ci][0.2.4]
All checks were successful
CI / docker-ci (push) Successful in 34s
Details

Browse Source
This commit is contained in:
spdis
2025-11-27 12:21:08 +08:00
parent 835426b133
commit 281ade6ac9
1 changed files with 49 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
elastic/templates/elastic/upload.html
View File

@@ -54,6 +54,10 @@
.status-message.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.status-message.error { background-color: #f8d7da;color: #721c24; border: 1px solid #f5c6cb; }
.action-buttons { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.progress {position: relative; height: 12px; background: #e2e8f0; border-radius: 8px; overflow: hidden;}
.progress-bar {height: 100%; width: 0; background: linear-gradient(90deg, #4f46e5 0%, #60a5fa 100%); transition: width .2s ease;}
.progress-wrap {display:none; margin-top: 8px;}
.progress-text {margin-top: 6px; font-size: 12px; color: #334155;}
</style>
</head>
<body>
@@ -90,6 +94,10 @@
<button type="submit" class="btn btn-primary">上传并识别</button>
</form>
<div class="status-message" id="uploadMsg"></div>
<div class="progress-wrap" id="progressWrap">
<div class="progress"><div class="progress-bar" id="progressBar"></div></div>
<div class="progress-text" id="progressText"></div>
</div>
</div>
<div class="preview-container">
@@ -136,9 +144,25 @@ const kvForm = document.getElementById('kvForm');
const addFieldBtn = document.getElementById('addFieldBtn');
const syncFromTextBtn = document.getElementById('syncFromTextBtn');
const dropArea = document.getElementById('dropArea');
const progressWrap = document.getElementById('progressWrap');
const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
let currentImageRel = '';
function setProgress(p, text){
const v = Math.max(0, Math.min(100, Math.round(p||0)));
progressBar.style.width = v + '%';
progressText.textContent = (text||'') + (text? ' ' : '') + v + '%';
}
function showProgress(){
progressWrap.style.display = 'block';
}
function hideProgress(){
progressWrap.style.display = 'none';
setProgress(0, '');
}
async function convertToJpeg(file){
const url = URL.createObjectURL(file);
let img;
@@ -315,27 +339,39 @@ uploadForm.addEventListener('submit', async (e) => {
return;
}
showProgress();
setProgress(5, '转换为JPG');
let jpegFile = file;
try {
jpegFile = await convertToJpeg(file);
setProgress(50, '转换为JPG');
preview.src = URL.createObjectURL(jpegFile);
} catch (_) {
jpegFile = file;
setProgress(50, '转换为JPG');
}
const formData = new FormData();
formData.append('file', jpegFile);
try {
let prog = 50;
setProgress(prog, '识别中');
const timer = setInterval(() => {
prog = Math.min(95, prog + 1);
setProgress(prog, '识别中');
}, 120);
const resp = await fetch('/elastic/upload/', {
method: 'POST',
credentials: 'same-origin',
headers: { 'X-CSRFToken': getCookie('csrftoken') || '' },
body: formData,
});
clearInterval(timer);
const data = await resp.json();
if (!resp.ok || data.status !== 'success') {
throw new Error(data.message || '上传识别失败');
}
setProgress(100, '识别完成');
uploadMsg.textContent = data.message || '识别成功';
uploadMsg.className = 'status-message success';
uploadMsg.style.display = 'block';
@@ -343,10 +379,12 @@ uploadForm.addEventListener('submit', async (e) => {
renderFormFromObject(data.data || {});
currentImageRel = data.image;
confirmBtn.disabled = false;
setTimeout(hideProgress, 800);
} catch (e) {
uploadMsg.textContent = e.message || '发生错误';
uploadMsg.className = 'status-message error';
uploadMsg.style.display = 'block';
progressText.textContent = '识别失败';
}
});