diff --git a/assets/css/frontend/cms-download.css b/assets/css/frontend/cms-download.css index 8d1fa39d..728eacf9 100644 --- a/assets/css/frontend/cms-download.css +++ b/assets/css/frontend/cms-download.css @@ -1,3 +1,13 @@ +/** + * AKSRT download / cashier modal. + * + * 下载弹窗走主题 design token(core/tokens.css);收银台沿用参考实现的 + * colorful-header 结构(pay-card 契约测试锁定的类名不可改动)。 + */ + +/* ============================================================ + * 弹窗外壳 + * ============================================================ */ .aksrt-dl-modal { position: fixed; inset: 0; @@ -14,13 +24,21 @@ .aksrt-dl-modal__backdrop { position: absolute; inset: 0; - background: rgb(0 0 0 / 55%); + background: rgb(15 23 42 / 55%); +} + +@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { + .aksrt-dl-modal__backdrop { + background: rgb(15 23 42 / 38%); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + } } .aksrt-dl-modal__dialog { position: relative; z-index: 1; - width: 400px; + width: 420px; max-width: calc(100% - 20px); margin: 0 auto; } @@ -33,173 +51,347 @@ color: var(--main-color, #111827); background: var(--main-bg-color, #fff); border: 0; - border-radius: var(--main-radius, 8px); - box-shadow: 0 24px 56px rgb(15 23 42 / 24%); + border-radius: var(--radius-xl, 12px); + box-shadow: var(--shadow-lg, 0 12px 32px rgba(18, 18, 18, 0.1)); } -.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__panel { - padding: 26px 28px 24px; +.aksrt-dl-modal.is-open .aksrt-dl-modal__dialog { + animation: aksrt-dl-modal-in 0.2s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } +@keyframes aksrt-dl-modal-in { + from { + transform: translateY(10px) scale(0.97); + opacity: 0; + } + + to { + transform: translateY(0) scale(1); + opacity: 1; + } +} + +/* 关闭按钮:下载视图中悬浮在渐变头部上 */ .aksrt-dl-modal__close, .aksrt-cashier__close { appearance: none; position: absolute; z-index: 9; - top: 10px; - right: 12px; + top: 12px; + right: 14px; + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; padding: 0; color: var(--muted-color, #6b7280); - font: 400 24px/1 sans-serif; + font: 400 20px/1 sans-serif; background: transparent; border: 0; + border-radius: 50%; box-shadow: none; cursor: pointer; } +.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close { + color: #fff; + background: rgb(255 255 255 / 22%); +} + +.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close:hover { + background: rgb(255 255 255 / 34%); +} + +.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close:focus-visible { + outline: 2px solid rgb(255 255 255 / 70%); + outline-offset: 1px; +} + .aksrt-dl-modal.is-cashier > .aksrt-dl-modal__dialog > .aksrt-dl-modal__panel > .aksrt-dl-modal__close { display: none; } +/* ============================================================ + * 主题化下载视图(成功 / 错误 / 扫码共用外壳) + * ============================================================ */ +.aksrt-dl-view { + /* 配色变量:按 dlv-* 修饰符整体换肤,按钮与阴影自动跟随 */ + --dl-from: var(--color-primary, #f04494); + --dl-to: var(--color-accent, #18a058); + --dl-text: #fff; +} + +.aksrt-dl-view.dlv-brand { + --dl-to: var(--aksrt-purple, #8b5cf6); +} + +.aksrt-dl-view.dlv-info { + --dl-from: var(--aksrt-blue, #3b82f6); + --dl-to: var(--aksrt-cyan, #06b6d4); +} + +.aksrt-dl-view.dlv-warn { + --dl-from: var(--color-warning, #f59e0b); + --dl-to: var(--aksrt-orange, #f97316); +} + +.aksrt-dl-view.dlv-error { + --dl-from: var(--color-error, #ef4444); + --dl-to: #dc2626; +} + +.aksrt-dl-view.dlv-vip { + --dl-from: var(--aksrt-vip-gold-2, #fda085); + --dl-to: var(--aksrt-vip-gold-1, #f6d365); + --dl-text: #6b4a12; +} + +.aksrt-dl-modal__hero { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; + padding: 26px 52px 22px; + overflow: hidden; + color: var(--dl-text); + text-align: center; + background: linear-gradient(135deg, var(--dl-from), var(--dl-to)); +} + +/* 装饰光斑(对应 pay-widget 的 orb 语言) */ +.aksrt-dl-modal__hero::before, +.aksrt-dl-modal__hero::after { + position: absolute; + border-radius: 100%; + background: rgb(255 255 255 / 14%); + content: ''; +} + +.aksrt-dl-modal__hero::before { + top: -46px; + right: -34px; + width: 150px; + height: 150px; +} + +.aksrt-dl-modal__hero::after { + bottom: -60px; + left: -40px; + width: 130px; + height: 130px; + opacity: 0.55; +} + +.aksrt-dl-modal__hero-icon { + display: flex; + align-items: center; + justify-content: center; + width: 56px; + height: 56px; + font-size: 25px; + background: rgb(255 255 255 / 22%); + border-radius: 50%; + box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%); +} + .aksrt-dl-modal__title { - margin: 0 28px 18px 0; - color: var(--main-color, #111827); - font: 700 20px/1.3 inherit; + margin: 0; + color: inherit; + font: 800 20px/1.3 inherit; +} + +.aksrt-dl-modal__subtitle { + margin: -2px 0 0; + font-size: 12.5px; + line-height: 1.55; + opacity: 0.82; +} + +.aksrt-dl-modal__content { + padding: 18px 22px 22px; } .aksrt-dl-modal__msg { - margin: 0 0 18px; - color: var(--muted-color, #4b5563); + margin: 0 0 14px; + color: var(--muted-color, #777); font-size: 14px; line-height: 1.65; } -.aksrt-dl-modal__msg--warn { - padding: 12px 0; - color: #92400e; - background: transparent; - border: 0; - border-top: 1px solid #fde68a; - border-bottom: 1px solid #fde68a; -} - -.aksrt-dl-modal__row { - display: grid; - grid-template-columns: 64px minmax(0, 1fr) 72px; - gap: 12px; - align-items: center; - padding: 12px 0; - margin: 0 0 18px; - border-top: 1px solid var(--main-border-color, #e5e7eb); - border-bottom: 1px solid var(--main-border-color, #e5e7eb); -} - -.aksrt-dl-modal__label { - color: var(--muted-color, #6b7280); +.aksrt-dl-modal__alert { + margin: 0 0 14px; + padding: 11px 13px; font-size: 13px; - font-weight: 600; - white-space: nowrap; + 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; + margin: 0 0 14px; + background: var(--surface-2, rgba(0, 0, 0, 0.04)); + border: 1px dashed var(--color-line-stronger, rgba(50, 50, 50, 0.12)); + border-radius: 10px; +} + +.aksrt-dl-modal__code-caption { + margin-bottom: 7px; + color: var(--muted-color, #777); + font-size: 11px; + font-weight: 700; + 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; overflow: hidden; - color: var(--main-color, #111827); - font: 800 18px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; - letter-spacing: 0.06em; + color: var(--color-primary, #f04494); + font: 800 20px/1.25 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); + letter-spacing: 0.12em; text-overflow: ellipsis; white-space: nowrap; } +.aksrt-dl-modal__code--wrap { + font-size: 14px; + font-weight: 500; + letter-spacing: 0.02em; + word-break: break-all; + white-space: normal; +} + .aksrt-dl-modal__copy { - appearance: none !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - width: 72px !important; - height: 32px !important; - padding: 0 !important; - overflow: visible !important; - color: #2563eb !important; - font-family: inherit !important; - font-size: 0 !important; - font-weight: 700 !important; - line-height: 1 !important; - text-indent: 0 !important; - white-space: nowrap !important; - cursor: pointer !important; - visibility: visible !important; - background: #eff6ff !important; - border: 1px solid #bfdbfe !important; - border-radius: 8px !important; - opacity: 1 !important; - -webkit-text-fill-color: #2563eb !important; -} - -.aksrt-dl-modal__copy::before, -.aksrt-dl-modal__copy::after { - display: none !important; - content: none !important; -} - -.aksrt-dl-modal__copy:hover { - color: #1d4ed8 !important; - background: #dbeafe !important; - border-color: #93c5fd !important; - -webkit-text-fill-color: #1d4ed8 !important; -} - -.aksrt-dl-modal__copy-text { - position: relative !important; - z-index: 2 !important; - display: inline-flex !important; - align-items: center !important; - justify-content: center !important; - color: #2563eb !important; - font-family: inherit !important; - font-size: 13px !important; - font-weight: 700 !important; - line-height: 1 !important; - text-indent: 0 !important; - white-space: nowrap !important; - visibility: visible !important; - opacity: 1 !important; - -webkit-text-fill-color: #2563eb !important; -} - -.aksrt-dl-modal__copy:hover .aksrt-dl-modal__copy-text { - color: #1d4ed8 !important; - -webkit-text-fill-color: #1d4ed8 !important; -} - -.aksrt-dl-modal__actions { - display: flex; - flex-wrap: wrap; - gap: 12px; - align-items: center; - padding-top: 4px; -} - -.aksrt-dl-modal__download { + appearance: none; display: inline-flex; align-items: center; justify-content: center; - min-height: 40px; - padding: 0 18px; - text-decoration: none; - cursor: pointer; + flex: 0 0 auto; + height: 30px; + padding: 0 14px; + color: var(--color-primary, #f04494); + font-family: inherit; + font-size: 12px; + font-weight: 700; + line-height: 1; + background: var(--color-primary-soft, rgba(240, 68, 148, 0.1)); border: 0; - border-radius: 9px; + border-radius: 999px; + cursor: pointer; } -.aksrt-dl-modal__balance { - margin-left: auto; - color: var(--muted-color, #6b7280); - font-size: 13px; - white-space: nowrap; +.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(--color-primary, #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(--color-primary, #f04494); + font-size: 12px; +} + +/* 操作按钮 */ +.aksrt-dl-modal__actions { + display: flex; + flex-direction: column; + gap: 10px; +} + +.aksrt-dl-modal__btn { + appearance: none; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + box-sizing: border-box; + width: 100%; + min-height: 42px; + padding: 0 18px; + color: var(--dl-text, #fff); + font-family: inherit; + font-size: 14px; + font-weight: 700; + text-decoration: none; + background: linear-gradient(135deg, var(--dl-from, var(--color-primary, #f04494)), var(--dl-to, var(--color-accent, #18a058))); + border: 0; + border-radius: 10px; + cursor: pointer; + transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; +} + +.aksrt-dl-modal__btn:hover { + transform: translateY(-1px); + filter: brightness(1.05); +} + +.aksrt-dl-modal__btn:active { + transform: scale(0.98); +} + +.aksrt-dl-modal__btn:focus-visible { + outline: 2px solid var(--color-primary, #f04494); + outline-offset: 2px; +} + +.aksrt-dl-modal__download { + min-height: 48px; + font-size: 15px; + box-shadow: 0 10px 20px -8px var(--dl-from, var(--color-primary, #f04494)); +} + +.aksrt-dl-modal__download:hover { + box-shadow: 0 12px 24px -8px var(--dl-from, var(--color-primary, #f04494)); +} + +/* ============================================================ + * 收银台(参考实现契约结构) + * ============================================================ */ .aksrt-dl-modal.is-cashier .aksrt-dl-modal__body { position: relative; min-height: 120px; @@ -224,7 +416,7 @@ align-items: center; justify-content: center; height: 120px; - border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0; + border-radius: var(--radius-xl, 12px) var(--radius-xl, 12px) 0 0; } .aksrt-dl-modal .colorful-bg > .colorful-make, @@ -287,6 +479,7 @@ text-align: center; } +/* 收银台内部使用的工具类作用域 */ .aksrt-dl-modal .text-center { text-align: center; } @@ -421,7 +614,7 @@ .aksrt-dl-modal .muted-box { padding: 10px; background: var(--muted-border-color, rgb(132 145 165 / 10%)); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-dl-modal .pay-tag { @@ -431,7 +624,7 @@ font-size: 12px; line-height: 1.4; background: rgb(41 151 247 / 10%); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-cashier__price-row { @@ -477,7 +670,7 @@ line-height: 16px; vertical-align: 1px; background: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-cashier__asset-icon { @@ -492,7 +685,7 @@ padding: 5px; text-align: center; border: 1px solid var(--main-border-color, rgb(132 145 165 / 20%)); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-dl-modal .payment-method-radio > * { @@ -534,7 +727,7 @@ font: inherit; background: var(--main-bg-color, #fff); border: 1px solid var(--main-border-color, #e5e7eb); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-dl-modal .relative { @@ -570,7 +763,7 @@ line-height: 1.5; text-align: center; background: rgb(255 84 115 / 10%); - border-radius: 4px; + border-radius: var(--radius-sm, 4px); } .aksrt-dl-modal .but.initiate-pay { @@ -600,6 +793,9 @@ text-decoration: none; } +/* ============================================================ + * 页面内已购信息块(下载区,随本文件一起加载) + * ============================================================ */ .resource-download-box__attrs { display: grid; gap: 6px; @@ -665,38 +861,29 @@ body.aksrt-dl-modal-open { } @media (max-width: 480px) { - .aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__panel { - padding: 24px 20px 22px; + .aksrt-dl-modal__hero { + padding: 24px 44px 20px; } - .aksrt-dl-modal__row { - grid-template-columns: 1fr 72px; - gap: 8px 12px; - } - - .aksrt-dl-modal__label { - grid-column: 1 / -1; + .aksrt-dl-modal__content { + padding: 16px 16px 18px; } .aksrt-dl-modal__code { - font-size: 17px; + font-size: 18px; } - .aksrt-dl-modal__actions { - flex-direction: column; - align-items: flex-start; - } - - .aksrt-dl-modal__download { - width: 100%; - } - - .aksrt-dl-modal__balance { - margin-left: 0; + .aksrt-dl-modal__chip { + padding: 4px 10px; + font-size: 11.5px; } } @media (prefers-reduced-motion: reduce) { + .aksrt-dl-modal.is-open .aksrt-dl-modal__dialog { + animation: none; + } + .aksrt-dl-modal .colorful-bg > .colorful-make { animation: none; } diff --git a/assets/js/cms-download.js b/assets/js/cms-download.js index b95fb8d4..38905e34 100644 --- a/assets/js/cms-download.js +++ b/assets/js/cms-download.js @@ -6,6 +6,9 @@ * - 调 POST /aksrt/v1/download/request * - 弹窗显示下载链接(含提取码) * + * 弹窗视觉走主题 design token(见 assets/css/frontend/cms-download.css), + * 付费收银台沿用参考实现的 colorful header 结构。 + * * 依赖: * - window.aksrtData.{ ajaxUrl, nonce, siteUrl } * - 主题已加载 fetch (现代浏览器) @@ -17,8 +20,6 @@ const REST_BASE = window.aksrtData.siteUrl ? window.aksrtData.siteUrl.replace(/\/$/, '') + '/wp-json/aksrt/v1' : '/wp-json/aksrt/v1'; const PAY_CONTENT_PATH = '/pay/content/'; - function tt(key, zh) { return zh; } - function escapeHtml(value) { return String(value == null ? '' : value) .replace(/&/g, '&') @@ -78,7 +79,7 @@ '
' + '' + (msg || '') + '
' + - (extra ? '' + escapeHtml(msg) + '
' : '', + actions: action ? [action] : [], + }), returnFocusEl ); @@ -197,22 +252,60 @@ } // ===== 成功渲染 ===== + function metaChip(icon, label) { + return '' + escapeHtml(label) + ''; + } + 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 dlUrl = escapeAttr(payload.dl_url || '#'); - const extractHtml = code !== '' - ? '' + safeCode + '' + tt('extract_missing', '下载源标记了提取码,但接口未返回具体内容,请检查资源下载源的 extract_code 字段。') + '
' : ''); + const expiresIn = typeof payload.expires_in === 'number' && payload.expires_in > 0 + ? Math.max(1, Math.round(payload.expires_in / 60)) + : 10; + + let body = ''; + if (code !== '') { + body += + '' + safeCode + '' +
+ ' ' +
+ ' 下载源标记了提取码,但接口未返回具体内容,请检查资源下载源的 extract_code 字段。
'; + } else { + body += '点击下方按钮开始下载,文件请及时保存到本地。
'; + } + + const chips = []; + const sourceLabel = String(payload.source_label || '').trim(); + if (sourceLabel !== '') { + chips.push('' + escapeHtml(sourceLabel) + ''); + } + chips.push(metaChip('fa-clock', '链接 ' + expiresIn + ' 分钟内有效')); + if (typeof payload.balance === 'number') { + chips.push(metaChip('fa-coins', '积分余额 ' + payload.balance)); + } + body += ''; + open( - '' + tt('hint', '点击下方按钮开始下载,链接 10 分钟内有效。') + '
') + - '' + tt('loading', '加载中…') + '
', + '加载中…
', returnFocusEl ); @@ -427,11 +524,11 @@ renderError(r.json.message || '', data, returnFocusEl, 'aksrt_need_vip'); return; } - if (code === 'aksrt_already_paid' || code === 'aksrt_already_followed') { + if (code === 'aksrt_already_paid') { window.location.reload(); return; } - renderError((r.json && r.json.message) || tt('default_err', '请稍后重试'), data, returnFocusEl, code); + renderError((r.json && r.json.message) || '请稍后重试', data, returnFocusEl, code); return; } var prev = r.json || {}; @@ -440,7 +537,7 @@ renderCashier(prev, returnFocusEl); }) .catch(function () { - renderError(tt('network_err', '网络错误,请稍后重试'), {}, returnFocusEl); + renderError('网络错误,请稍后重试', {}, returnFocusEl); }); } @@ -518,36 +615,36 @@ if (!isPoints && Number(preview.original) > Number(preview.base)) { regularPrice = '' + formatAssetLabel(preview, preview.original) + '' + regularPrice; } - priceRows += cashierPriceRow(tt('price', '价格'), regularPrice, 'aksrt-cashier__regular-price'); + priceRows += cashierPriceRow('价格', regularPrice, 'aksrt-cashier__regular-price'); } if (preview.list_amount !== preview.base) { priceRows += cashierPriceRow( - tt('vip_price', '会员价') + 'VIP' + escapeHtml(preview.vip_level || '') + '', + '会员价VIP' + escapeHtml(preview.vip_level || '') + '', '' + listLabel + '', 'c-red' ); } else if (preview.amount !== preview.base && !preview.rebate_discount && !preview.coupon_discount) { priceRows += cashierPriceRow( - tt('vip_price', '会员价') + 'VIP' + escapeHtml(preview.vip_level || '') + '', + '会员价VIP' + escapeHtml(preview.vip_level || '') + '', '' + amountLabel + '', 'c-red' ); } if (preview.rebate_discount > 0) { priceRows += cashierPriceRow( - tt('rebate_discount', '推广折扣'), + '推广折扣', '' + escapeHtml(preview.rebate_discount_label || ('-' + preview.rebate_discount)) + '' ); } if (preview.coupon_discount > 0) { priceRows += cashierPriceRow( - tt('coupon_discount', '优惠码'), + '优惠码', '' + escapeHtml(preview.coupon_discount_label || ('-' + preview.coupon_discount)) + '' ); } if (preview.amount !== preview.base || preview.rebate_discount > 0 || preview.coupon_discount > 0) { priceRows += cashierPriceRow( - tt('pay_amount', '支付金额'), + '支付金额', '' + amountLabel + '', 'font-bold c-red' ); @@ -562,27 +659,27 @@ if (isPoints) { body += '' + escapeHtml(data.message || tt('scan_hint', '请使用手机扫码完成支付,支付后刷新页面。')) + '
' + - (data.qr_content ? ('' + escapeHtml(data.qr_content || '') + '
' + escapeHtml(String(data.qr_content)) + '' + escapeHtml(data.message || '请使用手机扫码完成支付,支付后刷新页面。') + '
'; + open( + dlView('pay', { + subtitle: '支付完成后页面会自动刷新', + body: body, + actions: [{ kind: 'button', label: '我已支付', icon: 'fa-sync-alt', attrs: 'type="button" data-aksrt-reload' }], + }), + returnFocusEl + ); + const reloadBtn = document.querySelector('[data-aksrt-reload]'); + if (reloadBtn) reloadBtn.addEventListener('click', function () { window.location.reload(); }); + } + // ===== 事件绑定 ===== document.addEventListener('click', function (e) { const lowBtn = e.target.closest('[data-action="aksrt-need-credits"]');