fix(css): 弹窗在 portal 内重建共享令牌基座,修复样式静默失效

弹窗外壳由 runtime portal 到 <body>,已经位于任何页面级 token 作用域之外。此前
路由样式把语义别名挂在页面容器上:

  .aksrt-orders-page { --orders-ink: var(--color-ink, #333); }

弹窗内部再消费 var(--orders-ink) 时该变量不存在,整条声明被判为无效值丢弃。
CSS 自定义属性解析失败不会抛错,只表现为边框消失、次级文字发灰发透明,排查
成本很高——订单详情弹窗此前「样式没做完」的观感就来自这里。

修法是在弹窗外壳上重建基座,而不是逐个给弹窗补别名:外壳永远位于 portal 内,
任何弹窗都能直接消费。

- modal-runtime.css 新增 portal token bridge,在 .aksrt-modal-runtime 上声明
  --modal-ink / -ink-2 / -muted / -line / -line-soft / -surface / -surface-2 /
  -surface-3 / -primary / -on-primary / -warning / -success / -danger,
  全部以 var(--color-*, 回退值) 兜底
- orders.css 的 --detail-* 由直接推导调色板值改为映射 var(--modal-*),路由文件
  不再自行持有颜色定义,避免同类问题在下一个弹窗上重演
- 重建 assets/css/build/public.css 与 public.min.css

验证:node --test(已追踪用例)333 项 / 333 通过;确认重建后的 public.min.css
已包含 --modal-ink。视觉核对未在本次提交内完成(需要可运行的站点),如需可在
真实环境按订单详情弹窗逐项比对边框、分隔线与次级文字色。
This commit is contained in:
2026-09-18 23:17:18 +08:00
parent 3bec2a5777
commit c06aadb9a9
4 changed files with 71 additions and 12 deletions
+29
View File
@@ -6986,6 +6986,35 @@ body.aksrt-body-scroll .aksrt-show-on-scroll {
* @package AKSRT
*/
/* ---- portal token bridge ----
*
* 弹窗由 runtime portal 到 <body>,因此它位于任何「页面级 token 作用域」之外。
* 典型陷阱:路由样式把语义别名挂在页面上,例如
*
* .aksrt-orders-page { --orders-ink: var(--color-ink, #333); }
*
* 弹窗内部再去 `var(--orders-ink)` 时该变量不存在,整条声明会被静默丢弃——
* 表现为边框消失、次级文字变透明,而不是抛错,排查成本很高。
*
* 因此共享调色板在这里声明:本壳层永远在 portal 内,任何弹窗都能直接消费
* `--modal-*`。路由样式应把自己的局部别名映射到这里,而不是映射到页面级变量。
*/
.aksrt-modal-runtime {
--modal-ink: var(--color-ink, #333333);
--modal-ink-2: var(--color-ink-2, #4e5358);
--modal-muted: var(--color-ink-3, #777777);
--modal-line: var(--color-line-stronger, rgba(50, 50, 50, 0.12));
--modal-line-soft: var(--color-line, rgba(50, 50, 50, 0.06));
--modal-surface: var(--surface-1, #ffffff);
--modal-surface-2: var(--surface-2, #eeeeee);
--modal-surface-3: var(--surface-4, #f8f8f8);
--modal-primary: var(--color-primary, #f04494);
--modal-on-primary: var(--color-on-primary, #ffffff);
--modal-warning: var(--color-warning, #f59e0b);
--modal-success: var(--color-success, #10b981);
--modal-danger: var(--color-danger, #ef4444);
}
/* ---- scroll lock ---- */
html.aksrt-modal-runtime-open,
body.aksrt-modal-runtime-open {
+1 -1
View File
File diff suppressed because one or more lines are too long