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:
kate522andClaude Opus 5 committed 2026-11-03 17:12:52 +08:00
1 parent f6fde18857
commit 0007e78bfe
5 files changed
+66 -44

No files matched your search

+6 -18
View File
@@ -39,25 +39,13 @@
min-width: 88px;
}
#comments .comment-image-upload .progress {
position: static;
inset: auto;
display: block;
width: 100%;
height: 3px;
margin-top: 4px;
/* 上传中:按钮内容换成「加载点 + 文案 + 铺满按钮的条纹进度层」。
按钮作为定位祖先,.progress 沿用 main.css 的绝对铺满(inset:0 / 100%)
与负 z-index,progress-bar 走 Bootstrap 的 progress-bar-success 条纹;
负层绘制在按钮背景之上、正文之下,因此文案与进度条同时可见。 */
#comments .comment-image-upload .input-expand-upload {
position: relative;
overflow: hidden;
border-radius: 3px;
background: rgba(255, 255, 255, 0.25);
}
#comments .comment-image-upload .progress-bar {
position: static;
inset: auto;
display: block;
height: 100%;
width: 0;
transition: width 0.2s ease;
}
#comments .comment-header .jio-identity-chip {
display: inline-flex;