From a6b7d0970614936495e2c4bcff2dc21079edbef2 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Thu, 17 Sep 2026 22:25:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E5=85=85=E5=80=BC=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E6=89=93=E5=BC=80=E6=80=81=E6=94=B9=E4=B8=BA=20flex?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=AD=A3=E5=AF=B9=E8=AF=9D=E6=A1=86=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

无头 Chrome 对 Zibll 真实 CSS 的几何实证：bootstrap modal('show') 的
内联 display:block 下，.modal.flex .modal-dialog{margin:0} 使对话框
顶在左上角（l=0,t=0）；Zibll 生产环境打开态实为 CSS 的 display:flex
（壳的 .flex.jc 双轴居中，jQuery .show() 对 computed≠none 的壳是空
操作，内联 display 从未写入）。AKSRT 上一版把打开态定为 display:block，
导致对话框定位错误。

修复：credits.css 的 .modal[data-aksrt-charge-modal].in 改为
display:flex；credits.js openChargeModal 内联 display 同步改 flex。
静止态 display:none 规则不变。

几何复测（AKSRT 真实 CSS）：打开态中心与视口中心、与 Zibll 参考
逐像素一致（dlgCenter=vpCenter=379,213）；静止态 display:none。
契约 29/29 通过（新增 flex 断言与 block 禁令）。
---
 assets/css/routes/user-center/credits.css       |  8 +++++++-
 assets/js/credits.js                            |  4 +++-
 .../widget-system/balance-charge-modal.test.cjs | 17 +++++++++++++----
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/assets/css/routes/user-center/credits.css b/assets/css/routes/user-center/credits.css
index 959d14ef..7a12ba96 100644
--- a/assets/css/routes/user-center/credits.css
+++ b/assets/css/routes/user-center/credits.css
@@ -169,8 +169,14 @@
 .modal[data-aksrt-charge-modal] {
   display: none;
 }
+/* 打开态必须是 flex（而非 bootstrap 的内联 display:block）：无头 Chrome
+   对 Zibll 真实 CSS 的几何实证显示，display:block 下 .modal.flex
+   .modal-dialog{margin:0} 使对话框顶在左上角；flex 下由壳上的 .flex.jc
+   （align-items:center;justify-content:center）双轴居中——Zibll 生产环境
+   即此形态（其 jQuery .show() 对 computed≠none 的壳是空操作，内联
+   display 从未写入）。 */
 .modal[data-aksrt-charge-modal].in {
-  display: block;
+  display: flex;
 }
 
 .balance-charge-form .zib-widget {
diff --git a/assets/js/credits.js b/assets/js/credits.js
index 26a47996..9c21328f 100644
--- a/assets/js/credits.js
+++ b/assets/js/credits.js
@@ -401,7 +401,9 @@
 			if (modal.classList.contains('in')) return;
 			// 兼容旧缓存标记（uc-modal 带 hidden 属性）
 			modal.removeAttribute('hidden');
-			modal.style.display = 'block';
+			// 打开态用 flex 而非 block：壳的 .flex.jc 负责双轴居中，
+			// .modal.flex .modal-dialog{margin:0} 在 block 下会把对话框顶到左上角。
+			modal.style.display = 'flex';
 			void modal.offsetWidth; // 强制 reflow，让 .fade 过渡从初始态开始
 			modal.classList.add('in');
 			if (!chargeBackdrop) {
diff --git a/tests/widget-system/balance-charge-modal.test.cjs b/tests/widget-system/balance-charge-modal.test.cjs
index e276898b..0896f389 100644
--- a/tests/widget-system/balance-charge-modal.test.cjs
+++ b/tests/widget-system/balance-charge-modal.test.cjs
@@ -10,9 +10,11 @@
  *
  * 因此 credits.css 必须以 (0,2,0) 特异性压制：
  *   .modal[data-aksrt-charge-modal]        { display: none; }
- *   .modal[data-aksrt-charge-modal].in     { display: block; }
- * 展示态由 credits.js 自包含开关的内联 display:block 驱动（不依赖
- * jQuery/Bootstrap 运行时），关闭后内联样式撤除即回到隐藏规则。
+ *   .modal[data-aksrt-charge-modal].in     { display: flex; }
+ * 展示态由 credits.js 自包含开关的内联 display:flex 驱动（不依赖
+ * jQuery/Bootstrap 运行时；block 会破坏 .flex.jc 双轴居中——
+ * .modal.flex .modal-dialog{margin:0} 在 block 下使对话框顶在左上角），
+ * 关闭后内联样式撤除即回到隐藏规则。
  */
 const test = require('node:test');
 const assert = require('node:assert');
@@ -36,7 +38,11 @@ test('弹窗壳为 Zibll refresh_modal 同构静态壳并带 data 钩子', () =>
 test('弹窗壳静止态必须被 credits.css 显式隐藏（.flex 覆盖回归护栏）', () => {
   // (0,2,0) 特异性压制 main.css 的 .flex{display:flex}。
   assert.match(creditsCss, /\.modal\[data-aksrt-charge-modal\]\s*\{\s*display:\s*none;/);
-  assert.match(creditsCss, /\.modal\[data-aksrt-charge-modal\]\.in\s*\{\s*display:\s*block;/);
+  // 打开态必须是 flex 而非 block：.modal.flex .modal-dialog{margin:0} 在
+  // block 下使对话框顶在左上角（无头 Chrome 几何实证），flex 下由壳的
+  // .flex.jc 双轴居中（Zibll 生产环境即此形态）。
+  assert.match(creditsCss, /\.modal\[data-aksrt-charge-modal\]\.in\s*\{\s*display:\s*flex;/);
+  assert.doesNotMatch(creditsCss, /\.modal\[data-aksrt-charge-modal\]\.in\s*\{\s*display:\s*block;/);
 });
 
 test('开关自包含：不依赖 jQuery/Bootstrap modal 运行时', () => {
@@ -51,4 +57,7 @@ test('开关自包含：不依赖 jQuery/Bootstrap modal 运行时', () => {
   // 打开前移除旧缓存 hidden 标记；关闭走 300ms fade-out 收尾。
   assert.match(creditsJs, /removeAttribute\('hidden'\)/);
   assert.match(creditsJs, /void modal\.offsetWidth/);
+  // 打开态内联 display 必须是 flex（block 会破坏 .flex.jc 双轴居中）。
+  assert.match(creditsJs, /modal\.style\.display = 'flex'/);
+  assert.doesNotMatch(creditsJs, /modal\.style\.display = 'block'/);
 });