feat(desktop): 第二轮统一页面视觉层级与样式权重 - #62
Conversation
- 增加最终加载的高权重视觉收口层 - 统一账号、设置、安全、工具与调试页面的表面和间距 - 清除内容区域残留的折射与模糊覆盖 - 增加视觉收口架构守卫
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1fc8475633
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| --ui-surface-muted: #f4f7f8; | ||
| --ui-surface-sunken: #e9eff1; | ||
| --ui-text: #172a32; | ||
| --ui-text-muted: #5f727b; |
There was a problem hiding this comment.
When the OS requests prefers-contrast: more, this later :root declaration has the same specificity as the overrides in glass.css but wins by source order, resetting --ui-text-muted from the high-contrast #40545d to the ordinary muted color. As a result, muted labels across the application no longer honor the user's contrast preference; keep these canonical tokens in the original source or repeat the contrast overrides after this block.
AGENTS.md reference: AGENTS.md:L367-L367
Useful? React with 👍 / 👎.
| #root .debug-columns { | ||
| gap: 14px; | ||
| grid-template-columns: minmax(300px, .78fr) minmax(360px, 1fr) minmax(420px, 1.15fr); |
There was a problem hiding this comment.
When the debug workspace is 901–1023px wide, this final #root rule overrides both the existing @media (max-width: 1023px) single-column layout and the container-query layouts because of its higher specificity. The three minimum tracks plus gaps require 1108px, so common narrow desktop windows overflow horizontally until the new 900px breakpoint activates; preserve the earlier responsive templates with equally specific overrides or avoid resetting grid-template-columns here.
Useful? React with 👍 / 👎.
| #root .dc-security-table td { | ||
| height: 54px; | ||
| color: var(--ui-text); | ||
| background: var(--ui-surface); |
There was a problem hiding this comment.
When the security table's container is at most 720px wide, its existing container query converts each cell into a two-column grid and permits long IDs, emails, and audit values to wrap. This fixed height: 54px still applies in that layout; because the enclosing card row uses overflow: hidden, wrapped values that need more than the remaining content height are clipped or overlap adjacent cells. Limit this height to the desktop table layout or reset it to auto inside the responsive container query.
Useful? React with 👍 / 👎.
1 participant
背景
v0.1.5已经把设计 token 和液体玻璃材质收敛到单一体系，但基于正式生产 Renderer 的截图验收发现，部分历史页面 class 的选择器权重仍高于最终视觉层。结果是工具、账号、安全、设置和调试页面在真实构建中仍会残留旧边框、旧模糊、过大的标题比例或不一致的卡片层级。本次改动
ui-refinement.css，继续复用既有--ui-*token，不引入第二套主题。#root页面作用域提供稳定选择器权重，修复零权重:where()被历史样式覆盖的问题。backdrop-filter和折射伪元素，玻璃仍只保留给 Dialog、Popover 与账号菜单等临时浮层。visualRefinement.test.ts，守卫最终导入顺序、关键页面覆盖范围和稳定表面契约。影响范围
仅涉及 Renderer CSS 和视觉架构测试，不修改业务状态、API、数据模型或桌面主进程逻辑。
本地校验
postcss成功解析ui-refinement.css（105 个顶层节点）main仅包含 3 个文件、单个提交GitHub Actions 将继续执行桌面测试、lint、构建、CodeQL 与跨平台打包验证。