feat(yuntu): refine crowd portrait download flow

This commit is contained in:
wxs 2026-04-23 21:01:45 +08:00
parent 735dd3ecf9
commit 6dcdbc1983

View File

@ -588,6 +588,26 @@
return `${brandPart}_${crowdSamplePart}_${crowdCountPart}_${timestampPart}.csv` return `${brandPart}_${crowdSamplePart}_${crowdCountPart}_${timestampPart}.csv`
} }
function ensureProgressToastStyle() {
if (document.getElementById("yuntu-portrait-progress-toast-style")) {
return
}
const style = document.createElement("style")
style.id = "yuntu-portrait-progress-toast-style"
style.textContent = `
.yuntu-portrait-progress-toast {
overflow: hidden !important;
}
.yuntu-portrait-progress-toast .swal2-html-container {
margin: 0.75em 0 0 !important;
overflow: hidden !important;
}
`
document.head.appendChild(style)
}
function showToast(icon, title) { function showToast(icon, title) {
const Toast = Swal.mixin({ const Toast = Swal.mixin({
toast: true, toast: true,
@ -616,28 +636,29 @@
const percent = this.getProgressPercent() const percent = this.getProgressPercent()
const remainingCount = Math.max(this.totalRequestCount - this.completedRequestCount, 0) const remainingCount = Math.max(this.totalRequestCount - this.completedRequestCount, 0)
const crowdHtml = crowdName const crowdHtml = crowdName
? `<div style="margin-bottom:8px;color:#5f5f5f;">当前人群:${escapeHtml(crowdName)}</div>` ? `<div style="margin-bottom:8px;color:#5f5f5f;white-space:normal;word-break:break-all;overflow-wrap:anywhere;">当前人群:${escapeHtml(crowdName)}</div>`
: "" : ""
return ` return `
<div style="min-width:320px;text-align:left;"> <div style="width:100%;text-align:left;white-space:normal;overflow:hidden;">
${crowdHtml} ${crowdHtml}
<div style="display:flex;justify-content:space-between;margin-bottom:6px;font-size:12px;"> <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px;font-size:12px;">
<span>${escapeHtml(statusText)}</span> <span style="flex:1;white-space:normal;word-break:break-all;overflow-wrap:anywhere;">${escapeHtml(statusText)}</span>
<span>${this.completedRequestCount}/${this.totalRequestCount}</span> <span style="flex:none;white-space:nowrap;">${this.completedRequestCount}/${this.totalRequestCount}</span>
</div> </div>
<div style="height:8px;background:#f3d7d2;border-radius:999px;overflow:hidden;"> <div style="height:8px;background:#f3d7d2;border-radius:999px;overflow:hidden;">
<div style="height:100%;width:${percent}%;background:#a52615;transition:width .2s ease;"></div> <div style="height:100%;width:${percent}%;background:#a52615;transition:width .2s ease;"></div>
</div> </div>
<div style="display:flex;justify-content:space-between;margin-top:6px;font-size:12px;color:#666;"> <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:6px;font-size:12px;color:#666;">
<span>已完成 ${this.completedRequestCount} 次请求</span> <span style="white-space:normal;word-break:break-all;overflow-wrap:anywhere;">已完成 ${this.completedRequestCount} 次请求</span>
<span>剩余 ${remainingCount} 次请求</span> <span style="flex:none;white-space:nowrap;">剩余 ${remainingCount} 次请求</span>
</div> </div>
</div> </div>
` `
} }
showProgressToast(statusText, crowdName = "") { showProgressToast(statusText, crowdName = "") {
ensureProgressToastStyle()
const toastOptions = { const toastOptions = {
toast: true, toast: true,
position: "top-end", position: "top-end",
@ -647,7 +668,11 @@
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false, allowEscapeKey: false,
title: "下载画像进度", title: "下载画像进度",
html: this.renderProgressHtml(statusText, crowdName) html: this.renderProgressHtml(statusText, crowdName),
width: 460,
customClass: {
popup: "yuntu-portrait-progress-toast"
}
} }
if (Swal.isVisible()) { if (Swal.isVisible()) {