fix(revenue): match reference poster modal UI 1:1
The 推广海报 modal on the revenue page used a bespoke .uc-modal card — white panel, 12px radius, heavy shadow, title bar, corner × button and a full-width 保存海报 button — plus a light-gray plate with its own border-radius around the poster canvas. None of that exists in the reference theme, so the popup read as bordered and off-spec. Rebuild the modal on the reference poster-share structure: a borderless 360px .modal-dialog.poster-share centred by .modal.flex.jc, a .loading-mask overlay while the canvas renders, and the download/close buttons moved onto a .abs-center.hover-show-con layer that only fades in on hover. initAffiliatePoster() now drives Bootstrap 3 modal semantics (.in toggle, .modal-backdrop, body.modal-open, ESC and backdrop-click to close), mirroring the existing openChargeModal/closeChargeModal pair, and animates .modal-content from the 220px placeholder to the poster's real height before clearing the inline styles. No CSS added — every rule the reference modal needs was already ported. Drop the now-dead .uc-affiliate-poster rules; the shared .uc-modal shell and openModal/closeModal stay for the withdraw and transfer modals. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
1 parent
a120f61e13
commit
de0e5cd481
4 files changed
+135
-30
No files matched your search
@@ -47,11 +47,19 @@ test('revenue detail card is a four-row info list with no standalone QR block',
|
||||
assert.doesNotMatch(script, /function renderAffiliateQr/)
|
||||
assert.doesNotMatch(script, /renderAffiliateQr\(/)
|
||||
assert.doesNotMatch(script, /data-affiliate-qr/)
|
||||
// 海报弹窗:舞台 + 保存按钮 + 复用 openModal/closeModal。
|
||||
// 海报弹窗:参考主题 poster-share 形态 —— Bootstrap 语义 + .poster-imgbox 舞台。
|
||||
assert.match(script, /data-affiliate-poster-stage/)
|
||||
assert.match(script, /data-affiliate-poster-download/)
|
||||
assert.match(script, /openModal\(modal\)/)
|
||||
assert.match(script, /modal-backdrop/)
|
||||
assert.match(script, /classList\.add\('in'\)/)
|
||||
assert.match(script, /poster-imgbox/)
|
||||
assert.match(script, /classList\.add\('hide'\)/)
|
||||
assert.match(script, /link\.download = 'referral-poster\.png'/)
|
||||
// 弹窗开关不再走 uc-modal 的 openModal/closeModal(那套留给提现/转账弹窗)。
|
||||
const posterInit = script.slice(script.indexOf('function initAffiliatePoster'), script.indexOf('function buildPosterCanvas'))
|
||||
assert.doesNotMatch(posterInit, /openModal\(modal\)/)
|
||||
assert.doesNotMatch(posterInit, /closeModal\(modal\)/)
|
||||
assert.doesNotMatch(posterInit, /data-affiliate-poster-close/)
|
||||
// 链接由 PHP 直出:复制按钮立即可用,REST 只负责海报配置与佣金比例。
|
||||
assert.match(script, /var url = input \? input\.value : '';/)
|
||||
assert.match(script, /if \(copy\) copy\.disabled = !url;/)
|
||||
@@ -93,6 +101,31 @@ test('poster canvas is built from admin-configured copy and gated on the poster
|
||||
assert.match(script, /image\.crossOrigin = 'anonymous'/)
|
||||
})
|
||||
|
||||
test('poster modal markup is a 1:1 replica of the reference poster-share dialog', () => {
|
||||
const modal = read('inc', 'helpers', 'user-center-renderers', 'affiliate-poster-modal.php')
|
||||
// 参考主题骨架:Bootstrap 模态壳 + 360px 无边框对话框 + hover 浮钮层。
|
||||
assert.match(modal, /class="modal fade flex jc"/)
|
||||
assert.match(modal, /class="modal-dialog poster-share hover-show"/)
|
||||
assert.match(modal, /class="modal-content" style="height:220px;overflow:hidden"/)
|
||||
assert.match(modal, /class="poster-imgbox hover-show" data-affiliate-poster-stage/)
|
||||
assert.match(modal, /class="flex jc loading-mask absolute main-bg radius8"/)
|
||||
assert.match(modal, /class="but cir jb-blue poster-download hide"/)
|
||||
assert.match(modal, /class="but cir jb-yellow ml10"/)
|
||||
assert.match(modal, /#icon-close/)
|
||||
assert.match(modal, /data-dismiss="modal"/)
|
||||
// 自研 uc-modal 卡片形态(白底 + 标题栏 + 整宽保存钮 + 浅灰画框)已退役。
|
||||
assert.doesNotMatch(modal, /uc-modal__dialog/)
|
||||
assert.doesNotMatch(modal, /uc-modal__title/)
|
||||
assert.doesNotMatch(modal, /uc-modal__close/)
|
||||
assert.doesNotMatch(modal, /uc-modal__overlay/)
|
||||
assert.doesNotMatch(modal, /uc-affiliate-poster/)
|
||||
assert.doesNotMatch(modal, /btn-block/)
|
||||
|
||||
// 配套的 .uc-affiliate-poster 画框规则已从样式表删除。
|
||||
const css = read('assets', 'css', 'routes', 'user-center', 'revenue-earnings.css')
|
||||
assert.doesNotMatch(css, /uc-affiliate-poster/)
|
||||
})
|
||||
|
||||
test('invite-code input verifies live against the public REST endpoint', () => {
|
||||
const template = read('templates', 'parts', 'auth-content.php')
|
||||
assert.match(template, /data-invite-verify/)
|
||||
|
||||
Reference in new issue
Block a user