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
parent 979b45a898
commit 2cd21973f3
8 changed files with 281 additions and 118 deletions
@@ -0,0 +1,32 @@
+# 实施计划：修复 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。
+- 在“存储清理”页面展开所有选项，观察右侧是否出现极细滚动条，且不会挤压内容。
@@ -0,0 +1,48 @@
+# 设计规范：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 展开时，页面水平方向不发生位移。