fix(comments): render image upload progress like the reference
While uploading, the confirm button turned into a thin 3px bar below the label instead of the reference's striped overlay that fills the button. Two causes: - the markup used <span class="progress">; Bootstrap sizes the bar with a block-level .progress, so the swap produced a flattened line - shell.css carried a bespoke override pinning .progress to `position: static; height: 3px`, discarding the absolute full-size overlay that main.css already provides Changes: - emit the reference skeleton: <div class="progress progress-striped active"> > <div class="progress-bar progress-bar-success">, so the striped bar spans the button and the gradient shows through the translucent layer - give the upload button `position: relative` so the overlay is contained by the button rather than the dropdown panel; delete the static-line override - restore the reference's "正在处理请稍等..." toast and switch the label to "处理中 ..." at 100%, both keyed to the shared `miniupload_ajax` toast id so the completion message replaces the loading one - notify() now forwards the toast id instead of dropping it Tests: comment-image-upload contract gains two cases pinning the div-based striped overlay and the deletion of the 3px override; suite 835/836 with the pre-existing frontend-lifecycle failure. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
1 parent
f6fde18857
commit
0007e78bfe
5 files changed
+66
-44
No files matched your search
@@ -26,9 +26,9 @@
|
||||
textarea.dispatchEvent(new Event('input'));
|
||||
}
|
||||
|
||||
function notify(message, type) {
|
||||
function notify(message, type, id) {
|
||||
if (typeof window.notyf === 'function') {
|
||||
window.notyf(message, type);
|
||||
window.notyf(message, type, '', id || '');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,6 +127,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
/** 参考主题的上传中骨架:加载点 + 文案 + 铺满按钮的条纹进度层。 */
|
||||
function pendingMarkup() {
|
||||
return '<span class="miniupload-ing">'
|
||||
+ '<i class="loading mr3 c-white"></i>'
|
||||
+ '<span class="loading-text c-white">上传中<count class="px12 ml3"></count></span>'
|
||||
+ '<div class="progress progress-striped active"><div class="progress-bar progress-bar-success" role="progressbar" style="width:0"></div></div>'
|
||||
+ '</span>';
|
||||
}
|
||||
|
||||
function uploadErrorToast(message) {
|
||||
notify(message, 'danger', 'miniupload_ajax');
|
||||
}
|
||||
|
||||
function uploadImage(button) {
|
||||
var form = button.closest('.comment-image-upload');
|
||||
if (!form) return;
|
||||
@@ -153,7 +166,12 @@
|
||||
state.uploading = true;
|
||||
button.disabled = true;
|
||||
input.disabled = true;
|
||||
button.innerHTML = '<span class="miniupload-ing"><i class="loading mr3 c-white"></i><span class="loading-text c-white">上传中<count class="px12 ml3"></count></span><span class="progress progress-striped active"><span class="progress-bar progress-bar-success" role="progressbar" style="width:0"></span></span></span>';
|
||||
// 进度条与文案替换按钮内容;同时弹出参考主题的「正在处理」提示。
|
||||
button.innerHTML = pendingMarkup();
|
||||
// 复用固定 id:上传结束时由成功/失败提示替换这条加载态提示。
|
||||
if (typeof window.notyf === 'function') {
|
||||
window.notyf('正在处理请稍等...', 'load', '', 'miniupload_ajax');
|
||||
}
|
||||
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', uploadUrl, true);
|
||||
@@ -167,7 +185,7 @@
|
||||
var loadingText = button.querySelector('.loading-text');
|
||||
if (count) count.textContent = percent + '%';
|
||||
if (progress) progress.style.width = percent + '%';
|
||||
if (percent >= 100 && loadingText) loadingText.firstChild.nodeValue = '处理中';
|
||||
if (percent >= 100 && loadingText) loadingText.innerHTML = '处理中 ...';
|
||||
};
|
||||
|
||||
xhr.onload = function () {
|
||||
@@ -178,20 +196,20 @@
|
||||
|
||||
if (xhr.status < 200 || xhr.status >= 300 || typeof url !== 'string' || url.length < 6) {
|
||||
var message = response && response.message ? response.message : '图片上传失败';
|
||||
notify(message, 'danger');
|
||||
uploadErrorToast(message);
|
||||
restoreUploadButton(button, originalHtml);
|
||||
resetUpload(form);
|
||||
return;
|
||||
}
|
||||
|
||||
notify(response.message || '图片已上传', 'success');
|
||||
notify(response.message || '图片已上传', 'success', 'miniupload_ajax');
|
||||
insertAtCursor(findTextarea(button), '[img=' + url + ']\n');
|
||||
restoreUploadButton(button, originalHtml);
|
||||
resetUpload(form);
|
||||
};
|
||||
|
||||
xhr.onerror = function () {
|
||||
notify('网络错误,图片上传失败', 'danger');
|
||||
uploadErrorToast('网络错误,图片上传失败');
|
||||
restoreUploadButton(button, originalHtml);
|
||||
resetUpload(form);
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user