From 1cbc0c6ed89323d2c9167a0a40f729d320d04a80 Mon Sep 17 00:00:00 2001
From: unknown <kate522@88.com>
Date: Thu, 17 Sep 2026 10:28:17 +0800
Subject: [PATCH] =?UTF-8?q?fix(payment):=20=E6=8E=92=E5=BA=8F=E7=AE=AD?=
 =?UTF-8?q?=E5=A4=B4=E6=94=B9=E4=B8=BA=E5=9F=BA=E7=BA=BF=E9=94=9A=E5=AE=9A?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E6=AD=A3=E8=A1=A8=E5=A4=B4=E7=AE=AD=E5=A4=B4?=
 =?UTF-8?q?=E7=9B=B8=E5=AF=B9=E6=96=87=E5=AD=97=E5=81=8F=E4=B8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

.orderby-but 从「无尺寸 inline 宿主 + 依赖绝对定位静态位置 + 固定
translateY(-3px)/6px」改为「零尺寸 inline-block 宿主 + bottom 锚定 + translateY(50%)」。

原理：空 inline-block 的基线即其下边缘，会与同行文字基线对齐，于是箭头盒可用 bottom
精确锚定到「基线以上 N em」；translateY(50%) 抵消箭头自身高度，使盒中心恒等于 bottom 值，
与 dashicons 盒高无关。两枚箭头中心分别落在基线以上 .725em / .075em，对称于文字视觉中心。

旧写法的问题：绝对定位元素未指定 top/bottom 时，其位置来自静态位置（容器内容盒顶部），
该值与表头字体/行高联动；在真实后台 CJK 字体度量下整体偏下。

量测（无头 Chrome + 真实 wp-admin common.css/list-tables.css + 真实表头标记）：
- 旧写法：箭头簇中心相对文字中心 +2.0px（复现用户反馈的「偏下一点」）
- 新写法：-0.09px；两箭头相对文字中心 -4.64 / +4.46，居中对称
- 表头行高两版均为 36.59px，无行高副作用

契约测试同步收紧：断言 bottom 锚定写法，并禁止回归到无 bottom 的固定像素位移。
---
 src/Admin/Native/PayChargeCards.php           | 15 ++++++++-----
 .../admin/charge-cards-page-contract.test.cjs | 22 ++++++++++++++-----
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/Admin/Native/PayChargeCards.php b/src/Admin/Native/PayChargeCards.php
index 49655b21..7e518f8b 100644
--- a/src/Admin/Native/PayChargeCards.php
+++ b/src/Admin/Native/PayChargeCards.php
@@ -1031,12 +1031,15 @@ class PayChargeCards {
         <style>
             .order-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; }
             .order-header .subsubsub { margin: 6px 0; }
-            /* 排序箭头：容器必须保持 inline（不要设 display / margin）。
-               箭头是绝对定位元素，其静态位置取自容器的行盒顶部；容器一旦变成零高度的 inline-block，
-               基线会退化为自身下边缘并与文字基线对齐，箭头整体下沉一个字高、脱离表头文字。 */
-            .orderby-but { position: relative; }
-            .orderby-but > a { opacity: .4; position: absolute; transform: translateY(-3px); transition: .3s; padding-right: 1em; }
-            .orderby-but > a + a { transform: translateY(6px); }
+            /* 排序箭头对齐：宿主做成零尺寸 inline-block —— 空 inline-block 的基线即其下边缘，
+               会与文字基线对齐，于是箭头可用 bottom 精确锚定到「基线以上 N em」。
+               箭头盒中心等于 bottom 值（translateY(50%) 抵消自身高度，与盒子高度无关）：
+               两枚中心分别落在基线以上 .725em / .075em，对称于文字视觉中心（约 .4em）。
+               不要改回「无尺寸 inline 宿主 + 依赖静态位置 + 固定 -3px/+6px」的写法：
+               静态位置随表头字体/字号变化，会让整组箭头相对文字偏下（历史缺陷，已量测确认偏下 2px）。 */
+            .orderby-but { display: inline-block; position: relative; width: 0; height: 0; }
+            .orderby-but > a { opacity: .4; position: absolute; left: 0; bottom: .725em; transform: translateY(50%); transition: opacity .3s; padding-right: 1em; }
+            .orderby-but > a + a { bottom: .075em; }
             .orderby-but:hover a { opacity: .6; }
             .orderby-but > a:hover { opacity: 1; }
             .aksrt-btnset { display: flex; flex-wrap: wrap; gap: 6px; }
diff --git a/tests/admin/charge-cards-page-contract.test.cjs b/tests/admin/charge-cards-page-contract.test.cjs
index fa433498..a54b8ade 100644
--- a/tests/admin/charge-cards-page-contract.test.cjs
+++ b/tests/admin/charge-cards-page-contract.test.cjs
@@ -3,8 +3,11 @@
 /**
  * 「卡密管理」后台页契约：
  * 1) 标题右侧按钮（page-title-action）由页面头部唯一输出，列表渲染不得再输出一次；
- * 2) 表头排序箭头宿主（.orderby-but）必须保持 inline，不能改成零高度 inline-block，
- *    否则绝对定位箭头的静态位置会落到文字基线上，整组箭头下沉一行字高。
+ * 2) 表头排序箭头必须锚定在「文字基线」上，而不是依赖绝对定位元素的静态位置：
+ *    宿主为零尺寸 inline-block（其基线=下边缘=文字基线），箭头用 bottom + translateY(50%)
+ *    定位，中心落在基线以上 .725em/.075em，对称于文字视觉中心。
+ *    历史缺陷：靠静态位置 + 固定 -3px/+6px，静态位置随表头字体/字号变化，
+ *    量测确认整组箭头相对文字偏下 2px。
  */
 
 const assert = require('node:assert/strict');
@@ -52,19 +55,28 @@ test('搜索提示仍由页面头部输出且列表不再自建头部', () => {
   assert.match(list, /private function render_list\(string \$s\): void/);
 });
 
-test('排序箭头宿主保持 inline，不使用零高度 inline-block 定位', () => {
+test('排序箭头锚定文字基线，不依赖绝对定位的静态位置', () => {
   const host = page.match(/\.orderby-but \{[^}]*\}/);
   assert.ok(host, '.orderby-but 规则缺失');
+  // 零尺寸 inline-block：基线即下边缘，从而把箭头锚定到文字基线；尺寸为零则不参与换行/行高。
   assert.match(host[0], /position:\s*relative/);
-  assert.doesNotMatch(host[0], /display\s*:/);
+  assert.match(host[0], /display:\s*inline-block/);
+  assert.match(host[0], /width:\s*0/);
+  assert.match(host[0], /height:\s*0/);
   assert.doesNotMatch(host[0], /margin-left/);
 
+  // 箭头必须显式给出 bottom（静态位置方案没有 bottom），并用 translateY(50%) 抵消自身高度。
   const arrow = page.match(/\.orderby-but > a \{[^}]*\}/);
   assert.ok(arrow, '.orderby-but > a 规则缺失');
   assert.match(arrow[0], /position:\s*absolute/);
+  assert.match(arrow[0], /bottom:\s*\.725em/);
+  assert.match(arrow[0], /transform:\s*translateY\(50%\)/);
   assert.match(arrow[0], /padding-right:\s*1em/);
 
-  assert.match(page, /\.orderby-but > a \+ a \{ transform: translateY\(6px\); \}/);
+  assert.match(page, /\.orderby-but > a \+ a \{ bottom: \.075em; \}/);
+  // 旧的静态位置写法（无 bottom + 固定像素位移）不得回归。
+  assert.doesNotMatch(page, /translateY\(-3px\)/);
+  assert.doesNotMatch(page, /\.orderby-but > a \+ a \{ transform: translateY\(6px\); \}/);
   assert.match(header + list, /<span class="orderby-but">/);
 });