# 设计规范：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 展开时，页面水平方向不发生位移。