LingandRX
2cd21973f3
* 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
49 lines
2.0 KiB
Markdown
49 lines
2.0 KiB
Markdown
# 设计规范：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 展开时，页面水平方向不发生位移。
|