Files

T

LingandRX 2cd21973f3 Develop (#5 )

* feat: enhance StorageCleanerPage with accordion for storage options and immediate preference saving

* feat: add reusable Button component and update StorageCleanerPage and TimestampPage to use it

* feat: add StorageCleanerConfirm component for confirmation dialog in StorageCleanerPage

* feat: implement fixed height and minimal scrollbar for Popup layout

2026-04-06 17:49:47 +08:00

2.0 KiB

Raw Blame History

设计规范：Popup 弹窗固定高度与极简滚动条

1. 目标

解决 Chrome 扩展弹窗高度“只增不减”的布局问题，提供稳定的 600px 固定高度体验，并实现符合极简主义设计规范的可复用滚动条样式。

2. 核心架构方案 (方案 A)

采用 Flex 布局 + 视口锁定 的策略，将弹窗尺寸固定在 400px * 600px。

2.1 容器层级设计

html, body: 锁定为 400px * 600px，并设置 overflow: hidden 防止出现双滚动条。
.app (根容器):
- 设置为 display: flex; flex-direction: column;。
- 高度撑满父级 (100%)。
- 锁定 overflow: hidden。
nav-container (导航栏):
- 位于顶部，高度固定，不参与 Flex 缩放。
内容展示区 (Page Container):
- 设置 flex: 1，自动填充剩余空间。
- 设置 overflow-y: auto，启用局部滚动。
- 设置 scrollbar-gutter: stable，预留滚动条空间，防止布局抖动。

3. 极简滚动条设计规范

为了确保在所有页面和组件中表现一致，采用全局 Webkit 伪元素定制方案。

3.1 变量定义

在 :root 中定义 CSS 变量以增强兼容性和可维护性：

--sb-width: 6px (极细)
--sb-thumb-color: rgba(0, 0, 0, 0.1) (浅灰色半透明)
--sb-thumb-hover: rgba(0, 0, 0, 0.18) (悬停时微深)
--sb-track-color: transparent (背景完全透明)

3.2 样式表现

滑块 (Thumb): 胶囊状圆角 (10px)。
背景剪裁 (Background Clip): 使用 content-box 结合透明边框来实现滑块与边缘的微距感。
自动应用: 使用通配符 *::-webkit-scrollbar 确保全局所有溢出容器均自动继承此样式。

4. 成功准则

切换“时间戳”和“存储清理”页面时，浏览器窗口大小保持 600px 不变。
当页面内容超过视口时，右侧显示细长、半透明的滚动条。
内容加载或 Accordion 展开时，页面水平方向不发生位移。

2.0 KiB Raw Blame History