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