From 89801236ebed9cca9703f6a0133715c8493020bf Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 18 Sep 2026 18:26:50 +0800 Subject: [PATCH] =?UTF-8?q?fix(pay):=20=E6=96=B9=E6=B3=95=E8=A1=8C?= =?UTF-8?q?=E8=BF=98=E5=8E=9F=20Zibll=20=E5=8E=9F=E6=A0=B7=EF=BC=88?= =?UTF-8?q?=E4=B8=8D=E6=8D=A2=E8=A1=8C=EF=BC=89=EF=BC=8C=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E6=94=B6=E7=BC=A9=E6=88=90=E8=8A=AF=E7=89=87=E4=B8=80=E8=A1=8C?= =?UTF-8?q?=E6=8E=92=E6=BB=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 上一轮给方法行加的 hh（flex-wrap:wrap）方向错误：行级换行使项目保持 「图标左+文字右」的宽形态直接断行（3+2 布局），永远不会收缩成参考 主题的芯片形态。Zibll 的真实机制是行不换行、项目经 flex 收缩后由项 内 hh 将文字折到图标下方，形成「图标上/文字下」窄芯片一行排满。 - 三处方法行还原为 flex mb10（与参考主题逐字一致）：充值/积分模板 与会员 pay-vip.js - 图标不变形由既有防护保障（flex:none + width:auto + max-width:none 抵消 bootstrap 全局 img 钳制） - 无头 Chrome 实测（bootstrap+main 真实加载组合，400px 弹窗）：5 渠 道一行 5 个芯片（62-73px、图标 35px），6 渠道一行 6 个（53-62px、 stripe 宽形 84px），与 Zibll 同 fixture 形态一致 - 契约测试同步：行标记锁定无 hh、img 四属性防变形断言保留（322 项 全部通过） --- assets/js/pay-vip.js | 2 +- .../user-center-renderers/credits-balance.php | 2 +- .../user-center-renderers/credits-wallet.php | 2 +- .../card-pass-modal-redeem.test.cjs | 20 ++++++++++--------- 4 files changed, 14 insertions(+), 12 deletions(-) diff --git a/assets/js/pay-vip.js b/assets/js/pay-vip.js index ff368c2e..a721d8d4 100644 --- a/assets/js/pay-vip.js +++ b/assets/js/pay-vip.js @@ -135,7 +135,7 @@ // 与余额充值/购买积分弹窗完全一致的组件）。 if (methods.length > 1) { append(parent, node("div", "muted-2-color em09 mb6", "请选择支付方式")); - var row = node("div", "flex hh mb10"); + var row = node("div", "flex mb10"); methods.forEach(function (method, index) { var id = text(method.id || "balance"); var item = node("div", "flex jc hh payment-method-radio hollow-radio flex-auto pointer" + (index === 0 ? " active" : "")); diff --git a/inc/helpers/user-center-renderers/credits-balance.php b/inc/helpers/user-center-renderers/credits-balance.php index fbcd3b51..2feeb163 100644 --- a/inc/helpers/user-center-renderers/credits-balance.php +++ b/inc/helpers/user-center-renderers/credits-balance.php @@ -123,7 +123,7 @@ $currency = (string) ($currency_name ?? __('积分', 'aksrt'));
1) : ?>
-
+
$pm) : $pm_id = (string) ($pm['id'] ?? ''); $pm_logo = 'card_pass' === $pm_id ? 'pay-card-pass-logo.svg' : 'pay-balance-logo.svg'; diff --git a/inc/helpers/user-center-renderers/credits-wallet.php b/inc/helpers/user-center-renderers/credits-wallet.php index 7f19fce4..a71c5ee0 100644 --- a/inc/helpers/user-center-renderers/credits-wallet.php +++ b/inc/helpers/user-center-renderers/credits-wallet.php @@ -180,7 +180,7 @@ $charge_custom_block = static function () use ($mark, $charge_mark_html, $charge
1) : ?>
-
+
$m) : $method_id = (string) ($m['id'] ?? ''); $method_logo = $charge_method_logos[$method_id] ?? ''; diff --git a/tests/widget-system/card-pass-modal-redeem.test.cjs b/tests/widget-system/card-pass-modal-redeem.test.cjs index 200076ea..bfc347de 100644 --- a/tests/widget-system/card-pass-modal-redeem.test.cjs +++ b/tests/widget-system/card-pass-modal-redeem.test.cjs @@ -202,19 +202,21 @@ test('核销订单契约：金额恒为 0，订单名称按 note 生成', () => assert.match(userOrders, /永久/); }); -test('多渠道防挤压：图标 flex:none + 方法行 hh 换行（三弹窗一致）', () => { - // 图标禁用 flex 压缩（参考主题同场景存在变形缺陷，实测 6 渠道 360px - // 容器图标被压至 31px、宽形 stripe 被压成 35px 方形）；并抵消 AKSRT - // bootstrap 全局 img{max-width:100%}（flex 压缩时把图标钳制到被压窄 - // 的项宽，实测 5 渠道 400px 弹窗图标被压成 16px 细条）。 +test('多渠道防挤压：图标 flex:none + 行不换行项目收缩成芯片（对齐 Zibll）', () => { + // 图标禁用 flex 压缩并抵消 AKSRT bootstrap 全局 img{max-width:100%} + // （flex 压缩时把图标钳制到被压窄的项宽，实测 5 渠道 400px 弹窗图标 + // 被压成 16px 细条）。行保持 Zibll 原样不换行：空间不足时项目收缩为 + // 「图标上/文字下」芯片（实测 5 渠道一行 5 个、6 渠道一行 6 个，图标 + // 恒为固有比例），绝不允许整行提前断行。 const rule = mainCss.match(/\.payment-method-radio img \{[\s\S]*?\n\}/); assert.ok(rule, 'main.css 应存在 .payment-method-radio img 规则块'); assert.match(rule[0], /height:\s*35px;/); assert.match(rule[0], /width:\s*auto;/); assert.match(rule[0], /max-width:\s*none;/); assert.match(rule[0], /flex:\s*none;/); - // 方法行启用 hh 换行（.flex.hh{flex-wrap:wrap}），放不下时整行换行。 - assert.match(wallet, /class="flex hh mb10"/); - assert.match(creditsRenderer, /class="flex hh mb10"/); - assert.match(payVipJs, /node\("div", "flex hh mb10"\)/); + // 方法行标记与参考主题逐字一致（.flex.mb10，无 hh）。 + assert.match(wallet, /class="flex mb10">/); + assert.match(creditsRenderer, /class="flex mb10">/); + assert.match(payVipJs, /node\("div", "flex mb10"\)/); + assert.doesNotMatch(payVipJs, /"flex hh mb10"/); });