fix: 背景图模式下对下拉弹出层使用毛玻璃

[zmdyy0318]

修改前

修改后

opus5.0

Made with Cursor

Sourcery 总结

通过为弹出菜单应用一致的半透明表面和背景模糊效果，提升其在背景图片上的下拉菜单可读性。

Bug 修复：

• 启用背景图片时，为弹出菜单表面提供更不透明且带模糊效果的背景，从而提升下拉菜单的可读性。

增强功能：

• 通过可复用的 CSS 变量集中管理背景图片的半透明效果，并为选择器和设置中的下拉菜单应用专用的表面样式。

Original summary in English

Sourcery 总结

改进背景图片模式下的下拉菜单表面样式，使菜单更加清晰且保持一致。

Bug 修复：

• 通过应用不透明度更高的半透明表面和背景模糊效果，提高背景图片上的下拉菜单可读性。

增强功能：

• 使用可复用的 CSS 变量集中管理背景图片的半透明样式，并在选择器和设置菜单中应用统一的下拉菜单表面样式。

Original summary in English

Sourcery 总结

改进背景图片模式下的浮动 UI 表面，在保留半透明视觉风格的同时，确保覆盖层内容清晰易读。

Bug 修复：

• 启用背景图片后，通过应用不透明度更高的表面和背景模糊效果，提升下拉菜单、弹出窗口、面板、抽屉和模态框的可读性。

增强功能：

• 使用可复用的 CSS 变量集中管理背景图片的透明度样式，并在各类浮动 UI 元素中应用一致的覆盖层表面处理。

Original summary in English

Summary by Sourcery

Improve floating UI surfaces in background-image mode to keep overlays readable while preserving the translucent visual style.

Bug Fixes:

• Improve readability of dropdowns, popovers, panels, drawers, and modals when background images are enabled by applying more opaque surfaces and backdrop blur.

Enhancements:

• Centralize background-image transparency styling with reusable CSS variables and apply a consistent overlay surface treatment across floating UI elements.

[sourcery-ai]

嘿——我发现了 1 个问题

面向 AI 代理的提示

请处理这次代码审查中的评论：

## 单独评论

### 评论 1
<location path="src/index.css" line_range="524" />
<code_context>
+  --mxu-bg-primary: color-mix(in srgb, var(--color-bg-primary) 88%, transparent);
+  --mxu-bg-secondary: color-mix(in srgb, var(--color-bg-secondary) 88%, transparent);
+  --mxu-bg-tertiary: color-mix(in srgb, var(--color-bg-tertiary) 88%, transparent);
+  --mxu-bg-hover: color-mix(in srgb, var(--color-bg-hover) 88%, transparent);
+  backdrop-filter: blur(12px);
+}
</code_context>
<issue_to_address>
**issue (bug_risk)：** 下拉菜单悬停透明度从未应用于实际的选项元素：调用方使用了诸如 `hover:bg-bg-hover` 这样的 Tailwind 类，但 CSS 覆盖规则只匹配带有字面量 `bg-bg-hover` 类的元素。因此，将鼠标悬停在选项上时，使用的是不透明的 `var(--color-bg-hover)`，而不是预期的 88% 透明度的磨砂颜色。

**触发条件：** 启用背景图片后，用户将鼠标悬停在下拉菜单选项上。

**建议修复：** 定位生成的悬停类（例如 `.has-background-image .hover\:bg-bg-hover:hover`），或者在 `.mxu-dropdown-surface` 上覆盖 `--color-bg-hover`，使现有的 Tailwind 悬停工具类解析为磨砂颜色。

```suggestion
.has-background-image .hover\:bg-bg-hover:hover {
```
</issue_to_address>

---

Sourcery 对开源项目免费——如果您喜欢我们的审查结果，请考虑分享它们 ✨

• X
• Mastodon
• LinkedIn
• Facebook

Original comment in English

Hey - I've found 1 issue

Prompt for AI Agents

Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="src/index.css" line_range="524" />
<code_context>
+  --mxu-bg-primary: color-mix(in srgb, var(--color-bg-primary) 88%, transparent);
+  --mxu-bg-secondary: color-mix(in srgb, var(--color-bg-secondary) 88%, transparent);
+  --mxu-bg-tertiary: color-mix(in srgb, var(--color-bg-tertiary) 88%, transparent);
+  --mxu-bg-hover: color-mix(in srgb, var(--color-bg-hover) 88%, transparent);
+  backdrop-filter: blur(12px);
+}
</code_context>
<issue_to_address>
**issue (bug_risk):** The dropdown hover opacity is never applied to the actual option elements: callers use Tailwind classes such as `hover:bg-bg-hover`, but the CSS override only matches elements with the literal `bg-bg-hover` class. Consequently, hovering an option uses the opaque `var(--color-bg-hover)` instead of the intended 88%-opacity frosted color.

**Triggers:** When a background image is enabled and the user hovers a dropdown option.

**Suggested fix:** Target the generated hover class (for example `.has-background-image .hover\:bg-bg-hover:hover`) or override `--color-bg-hover` on `.mxu-dropdown-surface` so the existing Tailwind hover utility resolves to the frosted color.

```suggestion
.has-background-image .hover\:bg-bg-hover:hover {
```
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook