refactor(download): open generated links directly without the popup
The success modal added a second click between the download button and the file: request -> "下载链接已生成" popup -> 立即下载. Drop it and open the generated relay link right away, keeping the previous new-tab behaviour; a missing link still surfaces the error view. - Replace renderSuccess with startDownload (anchor + target=_blank) - Remove the popup-only CSS: alert, code-row, copy button, chips, meta and the download action skin; error, cashier and scan-pay views keep their styles
This commit is contained in:
@@ -192,20 +192,6 @@
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__alert {
|
||||
margin: 0 0 14px;
|
||||
padding: 11px 13px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
border-radius: var(--radius, 8px);
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__alert--warn {
|
||||
color: var(--color-warning-text, #ad6800);
|
||||
background: var(--color-warning-bg, #fffbe6);
|
||||
border: 1px solid #fde68a;
|
||||
}
|
||||
|
||||
/* 提取码卡片 */
|
||||
.aksrt-dl-modal__code-card {
|
||||
padding: 13px 15px;
|
||||
@@ -223,14 +209,6 @@
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__code-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__code {
|
||||
display: block;
|
||||
min-width: 0;
|
||||
@@ -250,64 +228,6 @@
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__copy {
|
||||
appearance: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
height: 30px;
|
||||
padding: 0 14px;
|
||||
color: var(--focus-color, #f04494);
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
background: var(--focus-color-opacity1, rgba(240, 68, 148, 0.1));
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__copy:hover {
|
||||
background: var(--focus-color-opacity3, rgba(240, 68, 148, 0.3));
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__copy:focus-visible {
|
||||
outline: 2px solid var(--focus-color, #f04494);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__copy.is-done {
|
||||
color: var(--color-success, #10b981);
|
||||
background: var(--aksrt-green-soft, rgba(16, 185, 129, 0.12));
|
||||
}
|
||||
|
||||
/* 信息 chips 行 */
|
||||
.aksrt-dl-modal__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__chip {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
padding: 5px 11px;
|
||||
color: var(--muted-color, #777);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: var(--surface-2, rgba(0, 0, 0, 0.04));
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__chip i {
|
||||
color: var(--focus-color, #f04494);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.aksrt-dl-modal__actions {
|
||||
display: flex;
|
||||
@@ -352,16 +272,6 @@
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__download {
|
||||
min-height: 48px;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 10px 20px -8px rgba(var(--color-primary-rgb, 240, 68, 148), 0.55);
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__download:hover {
|
||||
box-shadow: 0 12px 24px -8px rgba(var(--color-primary-rgb, 240, 68, 148), 0.65);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 收银台（参考实现契约结构）
|
||||
* ============================================================ */
|
||||
@@ -845,11 +755,6 @@ body.aksrt-dl-modal-open {
|
||||
.aksrt-dl-modal__code {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.aksrt-dl-modal__chip {
|
||||
padding: 4px 10px;
|
||||
font-size: 11.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
+16
-73
@@ -4,7 +4,7 @@
|
||||
* 功能：
|
||||
* - 监听 [data-action="aksrt-download"] 按钮点击
|
||||
* - 调 POST /aksrt/v1/download/request
|
||||
* - 弹窗显示下载链接（含提取码）
|
||||
* - 成功后直接打开生成的下载链接；失败/购买等场景仍走弹窗
|
||||
*
|
||||
* 弹窗视觉走主题 design token（见 assets/css/frontend/cms-download.css），
|
||||
* 付费收银台沿用参考实现的 colorful header 结构。
|
||||
@@ -251,78 +251,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ===== 成功渲染 =====
|
||||
function renderSuccess(payload, returnFocusEl) {
|
||||
payload = payload || {};
|
||||
const code = String(payload.extract_code || '').trim();
|
||||
const has = !!payload.has_extract || code !== '';
|
||||
const safeCode = escapeHtml(code);
|
||||
const safeCodeAttr = escapeAttr(code);
|
||||
const expiresIn = typeof payload.expires_in === 'number' && payload.expires_in > 0
|
||||
? Math.max(1, Math.round(payload.expires_in / 60))
|
||||
: 10;
|
||||
|
||||
const hintMsg = '点击下方按钮开始下载，链接 ' + expiresIn + ' 分钟内有效。';
|
||||
|
||||
let body = '';
|
||||
if (code !== '') {
|
||||
body +=
|
||||
'<div class="aksrt-dl-modal__code-card">' +
|
||||
' <div class="aksrt-dl-modal__code-caption">网盘提取码</div>' +
|
||||
' <div class="aksrt-dl-modal__code-row">' +
|
||||
' <code class="aksrt-dl-modal__code">' + safeCode + '</code>' +
|
||||
' <button type="button" class="aksrt-dl-modal__copy" data-copy="' + safeCodeAttr + '"><span class="aksrt-dl-modal__copy-text">复制</span></button>' +
|
||||
' </div>' +
|
||||
'</div>' +
|
||||
'<p class="aksrt-dl-modal__msg">' + escapeHtml(hintMsg) + '</p>';
|
||||
} else if (has) {
|
||||
body += '<p class="aksrt-dl-modal__alert aksrt-dl-modal__alert--warn">下载源标记了提取码，但接口未返回具体内容，请检查资源下载源的 extract_code 字段。</p>';
|
||||
} else {
|
||||
body += '<p class="aksrt-dl-modal__msg">' + escapeHtml(hintMsg) + '</p>';
|
||||
// ===== 成功：直接打开生成的下载链接，不再弹窗 =====
|
||||
function startDownload(payload, returnFocusEl) {
|
||||
const url = payload && payload.dl_url ? String(payload.dl_url) : '';
|
||||
if (!url) {
|
||||
renderError('下载链接生成失败，请稍后重试', {}, returnFocusEl);
|
||||
return;
|
||||
}
|
||||
|
||||
const chips = [];
|
||||
const sourceLabel = String(payload.source_label || '').trim();
|
||||
if (sourceLabel !== '') {
|
||||
chips.push('<span class="aksrt-dl-modal__chip"><i class="fa fas fa-box" aria-hidden="true"></i>' + escapeHtml(sourceLabel) + '</span>');
|
||||
}
|
||||
if (chips.length) {
|
||||
body += '<div class="aksrt-dl-modal__meta">' + chips.join('') + '</div>';
|
||||
}
|
||||
|
||||
open(
|
||||
dlView('success', {
|
||||
subtitle: '下载链接已生成，请及时将文件保存到本地。',
|
||||
body: body,
|
||||
actions: [{
|
||||
kind: 'link',
|
||||
url: payload.dl_url || '#',
|
||||
label: '立即下载',
|
||||
icon: 'fa-download',
|
||||
cls: 'aksrt-dl-modal__download',
|
||||
attrs: 'target="_blank" rel="noopener noreferrer"',
|
||||
}],
|
||||
}),
|
||||
returnFocusEl
|
||||
);
|
||||
|
||||
// 复制按钮
|
||||
document.querySelectorAll('[data-copy]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
const text = btn.getAttribute('data-copy') || '';
|
||||
const label = btn.querySelector('.aksrt-dl-modal__copy-text') || btn;
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(text).then(function () {
|
||||
label.textContent = '已复制';
|
||||
btn.classList.add('is-done');
|
||||
setTimeout(function () {
|
||||
label.textContent = '复制';
|
||||
btn.classList.remove('is-done');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
// 与旧版弹窗内「立即下载」一致：新标签页打开本站中转链接。
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.target = '_blank';
|
||||
link.rel = 'noopener noreferrer';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
}
|
||||
|
||||
// ===== 主流程 =====
|
||||
@@ -403,7 +346,7 @@
|
||||
renderError(r.json.message || '请稍后重试', r.json.data || {}, button, r.json.code);
|
||||
return;
|
||||
}
|
||||
renderSuccess(r.json, button);
|
||||
startDownload(r.json, button);
|
||||
})
|
||||
.catch(function () {
|
||||
button.disabled = false;
|
||||
|
||||
Reference in New Issue
Block a user