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
33 lines
1.4 KiB
Markdown
33 lines
1.4 KiB
Markdown
# 实施计划：修复 Popup 布局与滚动条样式
|
|
|
|
## 1. 目标
|
|
|
|
按照设计规范实施固定高度布局与极简滚动条，确保扩展弹窗显示稳定且美观。
|
|
|
|
## 2. 实施步骤
|
|
|
|
### 2.1 CSS 核心样式更新 (`entrypoints/popup/App.css`)
|
|
|
|
1. **视口锁定**: 更新 `html`, `body` 样式，固定 `width: 400px`, `height: 600px`。
|
|
2. **根容器改造**:
|
|
- 将 `.app` 修改为 Flex 容器：`display: flex; flex-direction: column; height: 100%; overflow: hidden;`。
|
|
- 移除 `margin: 0 auto;` 和 `min-height: 100%;`。
|
|
3. **滚动条变量与全局注入**:
|
|
- 在 `:root` 中定义 `--sb-` 开头的滚动条样式变量。
|
|
- 使用 `*::-webkit-scrollbar` 系列伪元素定义全局极简滚动条。
|
|
|
|
### 2.2 React 结构重构 (`entrypoints/popup/App.tsx`)
|
|
|
|
1. **注入滚动容器**: 在 `nav-container` 之后，将所有的页面渲染（`TimestampPage`, `StorageCleanerPage`）包裹在一个统一的 `Box` 中。
|
|
2. **设置容器样式**: 给该 `Box` 设置 `sx={{ flex: 1, overflowY: 'auto', scrollbarGutter: 'stable' }}`。
|
|
|
|
### 2.3 质量保障
|
|
|
|
1. **Lint 检测**: 运行 `npm run lint` 检查样式变量引用和 JSX 结构。
|
|
2. **类型检查**: 运行 `npm run compile` 验证 MUI 组件属性。
|
|
|
|
## 3. 验证计划
|
|
|
|
- 手动切换导航栏，观察窗口尺寸是否维持在 600px。
|
|
- 在“存储清理”页面展开所有选项，观察右侧是否出现极细滚动条，且不会挤压内容。
|