fix(settings): 弹窗高度补 vh 基线，分区菜单去掉强调条（BUG-698）
设置弹窗的固定高度只用 dvh 写、没有回退。不认识该单位的引擎会把整条 height 与 max-height 作废，盒子退回按内容撑开，于是切分区就跳大小—— 这正是 BUG-554 现象的复发，而 BUG-554 的防复发「必须同时声明 width 与 height」只检查声明存不存在，挡不住「写了但没生效」。 实测（Chrome 151，真实产物 CSS + 复刻 DOM，1440×900）：dvh 正常时四个 分区恒定 866.80×640px，**事故不复现**；摘掉 dvh 后变成 313/313/378/1130， 宽度不动——与用户描述的形状完全一致。因此机制已证实，但用户当时的浏览器 未定位，BUG-698 记为 investigating 而非 resolved。 附带发现：任务书要求照抄的重复声明式回退 `height: 100vh; height: 100dvh;` 在本仓根本发布不出去——Lightning CSS 会合并同名属性的重复声明只留最后一条， 全仓唯一那处回退（sidebar-provider）在线上早就是死的，还有一条测试专门守着 这个从未发布过的写法。改用 @supports (height: 1dvh)：vh 作基线，dvh 作升级。 修复后不支持 dvh 的引擎也收敛到恒定 640px，支持的逐像素无变化。 同轮按产品决策去掉设置分区菜单的左侧/下方强调色条，选中与悬停改用面与 墨色等级区分，不用色相、不用字重。左侧会话列表的色条本轮不动。 - 新增 viewport-unit-fallback-contract（3 条，全文件），三次破坏性验证各自打红 - account-dialog-overlay 新增同尺寸契约与分区菜单契约 - 三条钉死旧 dvh 字面量的既有断言按「原值/新值/原因」更新，均未弱化 - tsc 0 错；lint 0 error / 118 warning（持平）；npm test 3346/3300/fail 31， 失败清单与基线逐字相同；/ 仍 ○ Static；样式 gzip +0.38%； 快速门 pytest 段 792 passed / 1 skipped / 0 failed Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JUei7K13cYxLHE3Axe4A45
This commit is contained in:
Jesse_Chen
co-authored by
Claude Opus 5
Claude Opus 5
parent
5582091851
commit
111b4a8455
+21
-1
@@ -8576,7 +8576,7 @@
|
||||
- 根因：`accountDialogClasses` 给每个分区不同宽度，高度随内容撑开。星盘资料没有列表/详情视图，添加表单始终渲染。第四个导航项直接 `router.push` 到 `/membership`。
|
||||
- 修复：四个分区共用 `.settings-modal` 固定尺寸。星盘资料改为列表→详情。账户与点数成为弹窗第四分区；删除 `/membership` 与 `/membership/orders`，旧链接重定向到 `/?settings=billing`。七处入口改为 `openAccountDialog("billing")`。
|
||||
- 验证：`frontend/tests/account-dialog-overlay.test.ts`、`billing-panel.test.ts`、`membership-page.test.ts`、`membership-navigation-contract.test.ts`、`chart-library-other-profile.test.ts`、`settings-url.test.ts`、`beam-avatar.test.ts`、`class-name-definition-contract.test.ts`、`tests/test_api_server_security.py -k capability_audit`。`next build --webpack` 中 `/` 为 Static，无 `/membership` 页面。
|
||||
- 防复发：设置弹窗必须同时声明 width 与 height；星盘资料默认视图不得无条件渲染 `<form`；`/` 保持 Static，不得 `useSearchParams`；收银台仍 `window.open`；硬跳转清单不得因本单变长。
|
||||
- 防复发：设置弹窗必须同时声明 width 与 height；星盘资料默认视图不得无条件渲染 `<form`；`/` 保持 Static，不得 `useSearchParams`；收银台仍 `window.open`；硬跳转清单不得因本单变长。**（2026-09-16 修正，见 BUG-698）**：「必须同时声明 width 与 height」这条防不住复发——它检查的是声明存在性，不是声明是否生效。`.settings-modal` 后来 width 与 height 都老实写着，却因为 height 只用 `dvh`、不认识该单位的引擎整条作废而再次随分区跳变。固定高度的单位回退口径以 BUG-698 为准。
|
||||
- 相关记录：BUG-434、BUG-251、BUG-143
|
||||
- 复发自：无
|
||||
- 修复版本：`dc6598d7`
|
||||
@@ -11477,3 +11477,23 @@
|
||||
- 相关记录：BUG-729～731（创建路由改造）、BUG-464（会话持久化归属）
|
||||
- 复发自：无
|
||||
- 修复版本：待发布
|
||||
|
||||
## BUG-698 | 设置弹窗尺寸随分区变化：dvh 无回退，且仓库唯一那处回退被压缩器吃掉
|
||||
|
||||
- 状态：investigating
|
||||
- 首次发现：2026-09-15
|
||||
- 最近更新：2026-09-16
|
||||
- 影响面：`frontend/src/app/globals.css`（`.settings-modal` / `.account-modal` 及全文件 8 处 `height: …dvh`）、设置弹窗四分区、登录页、后台外壳、移动端侧栏
|
||||
- 用户现象：「设置面板的弹窗大小不一样，选别的就立马缩小了。」宽度没动，高度在跳。
|
||||
- 触发条件：登录后打开设置弹窗，在个人资料 / 星盘资料 / 账户与点数 / 通用设置之间切换。
|
||||
- 根因（机制已证实，用户环境未定位）：`.settings-modal` 的 `height` 与 `max-height` 只写了 `dvh`，没有 `vh` 回退。不认识该单位的引擎会**整条声明作废**，`height` 回到 `auto`，高度改由内容决定；`max-height` 同时作废后连上限都没有，于是内容多的分区高、内容少的分区矮。宽度走 `vw` 不受影响，所以看上去只有高度在跳。
|
||||
- **实测（Chrome 151.0.7922.169，1440×900，真实 `next build` 产物 CSS + 逐节点复刻的弹窗 DOM）**：dvh 正常时四个分区全是 866.80 × 630.40、computed height 640px —— **事故在当前浏览器上不复现**；把 dvh 摘掉后四个分区变成 313.23 / 313.23 / 378.58 / 1130.16，宽度不变 —— **与用户描述的形状完全一致**。
|
||||
- `dvh` 自 Chrome/Edge 108、Safari 15.4、Firefox 101、Android WebView 108 起支持，因此该机制只在旧 iOS 15.0–15.3、未升级的 Android System WebView、或钉死旧 WebView 的 App 内置浏览器上成立。**用户当时用的是哪个浏览器尚未确认，这是本条停在 `investigating` 而不是 `resolved` 的唯一原因。**
|
||||
- 为什么 BUG-554 的防复发没拦住：BUG-554 的条款是「设置弹窗必须同时声明 width 与 height」，守着它的断言是 `assert.match(styles, /\.settings-modal \{[^}]*width:[^}]*height:/)` —— 它读 CSS 源文本，只检查**声明存不存在**，不检查声明**是否生效**。本次 width 与 height 都老实写着，条款全绿，现象照出。**BUG-554 的四个分区共用一个类这一条本轮未被推翻，且新增了直接断言常量的同尺寸契约把它钉死。**
|
||||
- 附带发现（比原判更严重）：任务书要求照抄 `globals.css:637` 的重复声明式回退 `height: 100vh; height: 100dvh;`。实测 **Lightning CSS（Tailwind v4 的压缩器）会合并同一规则内同名属性的重复声明，只保留最后一条**：源码写了两条，产物里 `.group\/sidebar-provider[data-viewport]` 只剩 `height:100dvh`。**全仓唯一那处 vh 回退在线上早就是死的**，而且 `birth-time-mobile-scroll-contract.test.ts` 还有一条断言专门守着这个从未发布过的写法。照任务书交付等于交一个 no-op。
|
||||
- 修复：改用特性查询 —— `vh` 作基线，`@supports (height: 1dvh)` 内升级为 `dvh`，压缩器无法证伪条件因而整块保留。覆盖凡 `height`（不含 `max-height` / `min-height`）用 dvh 的 8 处：`.standalone-page`、`.app-loading`、`.group\/sidebar-provider[data-viewport]`、`.admin-app-shell`、`.auth-page`、`[data-sidebar="sidebar"]`、`.settings-modal`（桌面与移动端）；另把 `.account-modal` / `.settings-modal` 的 `max-height` / `min-height` 一并纳入，因为实测里 `max-height` 塌成 `none` 也是尺寸失控的一环。同轮去掉设置分区菜单的强调色条并拆开选中/悬停两态（产品决策，不占编号）。
|
||||
- 验证：修复后同 harness 重测 —— dvh 正常的引擎四个分区仍是 866.80 × 630.40 / 640px（**与修复前逐像素一致，无回归**）；模拟不支持 dvh 的引擎从 313/378/1130 收敛到恒定 640px。新增 `frontend/tests/viewport-unit-fallback-contract.test.ts`（3 条，全文件范围），三次破坏性验证各自打红对应那条、还原后全绿。`account-dialog-overlay.test.ts` 新增同尺寸契约与分区菜单契约，破坏性验证同样打红。`tsc --noEmit` 0 错，`npm run lint` 0 error / 118 warning（持平基线），`next build` 后 `/` 仍 `○ Static`，快速门 pytest 段 792 passed / 1 skipped / 0 failed。
|
||||
- 防复发：**`height` 用 `dvh` 必须写成 `vh` 基线 + `@supports (height: 1dvh)` 升级，不得用 `height: 100vh; height: 100dvh;` 重复声明式回退**——后者会被 Lightning CSS 吃掉，从来没发布过。由 `frontend/tests/viewport-unit-fallback-contract.test.ts` 全文件强制，三条断言分别管「dvh 必须在特性查询内」「禁止重复声明式回退」「升级过的选择器必须有 vh 基线」。设置弹窗四分区必须映射到同一个类名，由 `account-dialog-overlay.test.ts` 直接断言常量。**只检查「声明存不存在」的 CSS 文本断言不算防线**（这就是 BUG-554 的教训），新写 CSS 契约要么断到实际产物、要么断到可被破坏性验证证伪的结构。
|
||||
- 相关记录：BUG-554（同一现象的第一次，本条为其复发）、BUG-695～697（触控与断点轮次，同一文件相邻区段）
|
||||
- 复发自：BUG-554
|
||||
- 修复版本：待发布
|
||||
|
||||
Reference in New Issue
Block a user