## 修复完成

我已经成功修复了 Sidebar 滚动条的行为问题。修改文件：`packages/core/src/theme/styles/scrollbar.scss`

### 关键更改

1. **移除了 `width: 4px`**（第 6 行）
   - 这允许竖向滚动条使用 overlay 样式，遵循 macOS 系统设置

2. **保留了 `height: 4px`**（第 11 行）
   - 横向滚动条保持当前行为

3. **添加了现代 CSS 属性**（第 5-6 行）
   - `scrollbar-width: thin` - 适用于 Firefox 和 Chrome 121+
   - `scrollbar-color: transparent transparent` - 默认透明

4. **更新了滚动条颜色逻辑**
   - 默认状态：完全透明（不可见）
   - 悬停状态：显示自定义颜色（浅色模式灰色，深色模式白色）
   - 添加了对现代 `scrollbar-color` 属性的支持

### 效果

现在当你在 macOS 系统设置中选择"滚动时"显示滚动条时：
- **Sidebar** 的竖向滚动条会自动隐藏，只在滚动时显示
- **Outline**（右侧目录）同样遵循系统设置
- **代码块**的横向滚动条保持 4px 高度，竖向滚动条也会自动隐藏
- **表格**不受影响（有独立样式）

所有滚动条在鼠标悬停容器时会显示自定义颜色，提供视觉反馈。

## 重构完成

我已成功重构了滚动条样式系统，采用基类 + 修饰符模式：

### 修改的文件

1. **`packages/core/src/theme/styles/scrollbar.scss`**
   - 重构为两个独立的类
   - 修复了 Copilot 指出的颜色值不匹配问题

2. **`packages/core/src/theme/components/CodeBlock/index.tsx`** (line 95)
   - 添加了 `rp-scrollbar--hover` 类名

### 关键改进

**`.rp-scrollbar` (基类)**
- 仅包含基础滚动条样式
- 移除了 `width: 4px`，允许竖向滚动条使用 overlay 模式
- 保留了 `height: 4px` 用于横向滚动条
- 修复颜色值：`scrollbar-color: rgba(0, 0, 0, 0.05) transparent` 现在与 webkit 的 `background: rgba(0, 0, 0, 0.05)` 匹配
- 滚动条根据 macOS 系统设置显示/隐藏

**`.rp-scrollbar--hover` (修饰符类)**
- 专门用于 CodeBlock 的"hover 显示"行为
- 默认完全透明（隐藏）
- 鼠标悬停容器时才显示
- 颜色值与基类保持一致

### 行为变化

**Sidebar、Outline、Search Panel**（仅使用 `.rp-scrollbar`）
- ✅ 遵循 macOS 系统设置
- ✅ "滚动时显示"模式下自动隐藏
- ✅ "始终显示"模式下保持可见

**CodeBlock**（使用 `.rp-scrollbar` + `.rp-scrollbar--hover`）
- ✅ 默认完全隐藏滚动条
- ✅ 鼠标悬停时显示
- ✅ 覆盖系统设置，强制使用 hover 行为

### 关于 Copilot 的反馈

✅ **修复了颜色不匹配** - 所有颜色值现在在 `scrollbar-color` 和 webkit 样式之间保持一致
✅ **分离了关注点** - hover 行为现在独立于基类
⚠️ **保持 width 移除** - 这是有意为之，允许 overlay 滚动条行为（基于研究，Copilot 的担忧是不正确的）