fix(theme): 兼容 VS Code 主题变量并修复 Naive UI var(...) 颜色解析报错

[Windsland52]

Summary by Sourcery

使主题处理与 VS Code 主题变量保持一致，并提升 Naive UI 主题覆盖的健壮性，以避免 var(...) 颜色解析错误。

新特性：

• 集成 VS Code 主题 CSS 变量来驱动 Naive UI 的主题覆盖以及滚动条/页面主体样式；当变量缺失时，提供合理的颜色后备值。

缺陷修复：

• 通过在将 CSS var(...) 主题颜色传入主题覆盖之前，先将其解析为具体颜色值，解决 Naive UI 颜色解析错误问题。
• 确保在系统主题或桥接主题发生变化时重新计算主题，使 UI 颜色保持同步，避免使用陈旧的颜色值。

增强改进：

• 为系统和桥接主题更新添加响应式追踪和事件处理逻辑，并在组件卸载时清理相关监听器。

Original summary in English

Summary by Sourcery

Align theme handling with VS Code theme variables and improve Naive UI theme override robustness to avoid var(...) color parsing errors.

New Features:

• Integrate VS Code theme CSS variables to drive Naive UI theme overrides and scrollbar/body styling, with sensible color fallbacks when variables are missing.

Bug Fixes:

• Resolve Naive UI color parsing errors by resolving CSS var(...) theme colors into concrete color values before passing them to theme overrides.
• Ensure theme recomputation when system theme or bridge theme changes, keeping UI colors in sync without stale values.

Enhancements:

• Add reactive tracking and event handling for system and bridge theme updates, including cleanup of listeners on component unmount.

[sourcery-ai]

Hey - 我发现了 1 个问题，并给出了一些整体层面的反馈：

• 'maa-bridge-theme-updated' 事件名在 Index.vue 和 App.vue 中都被硬编码了；建议将其提取为一个共享常量，以避免触发端和监听端之间出现拼写错误或不一致。
• isValidCssColor 帮助函数在每次重新计算 themeOverrides 时会被多次调用，并且在可用时总会调用 CSS.supports；你可以考虑按值缓存结果（memoize），或者在更早阶段对明显无效的输入进行短路，以减少重复的特性检测工作。

给 AI Agent 的提示

Please address the comments from this code review:

## Overall Comments
- The `'maa-bridge-theme-updated'` event name is hardcoded in both `Index.vue` and `App.vue`; consider extracting it into a shared constant to avoid typos or mismatches between emitter and listener.
- The `isValidCssColor` helper is invoked multiple times per `themeOverrides` recomputation and always calls `CSS.supports` when available; you might want to memoize results per value or short‑circuit obviously invalid inputs earlier to reduce repeated feature-detection work.

## Individual Comments

### Comment 1
<location path="src/App.vue" line_range="590" />
<code_context>
     document.body.setAttribute('class', payload.bodyClass)
   }
+
+  window.dispatchEvent(new Event('maa-bridge-theme-updated'))
 }

</code_context>
<issue_to_address>
**suggestion:** Extract the custom theme event name into a shared constant to avoid string mismatches.

This event name is duplicated here and in `Index.vue` (`window.addEventListener('maa-bridge-theme-updated', refreshVscodeTheme)`). To avoid mismatches if it changes or is mistyped, export a shared constant (e.g. `const BRIDGE_THEME_UPDATED_EVENT = 'maa-bridge-theme-updated'`) and use it in both places.
</issue_to_address>

---

Sourcery 对开源项目是免费的——如果你觉得我们的评审有帮助，欢迎分享给更多人 ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{帮我变得更有用！请对每条评论点击 👍 或 👎，我会根据你的反馈改进后续的评审。}

Original comment in English

Hey - I've found 1 issue, and left some high level feedback:

• The 'maa-bridge-theme-updated' event name is hardcoded in both Index.vue and App.vue; consider extracting it into a shared constant to avoid typos or mismatches between emitter and listener.
• The isValidCssColor helper is invoked multiple times per themeOverrides recomputation and always calls CSS.supports when available; you might want to memoize results per value or short‑circuit obviously invalid inputs earlier to reduce repeated feature-detection work.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The `'maa-bridge-theme-updated'` event name is hardcoded in both `Index.vue` and `App.vue`; consider extracting it into a shared constant to avoid typos or mismatches between emitter and listener.
- The `isValidCssColor` helper is invoked multiple times per `themeOverrides` recomputation and always calls `CSS.supports` when available; you might want to memoize results per value or short‑circuit obviously invalid inputs earlier to reduce repeated feature-detection work.

## Individual Comments

### Comment 1
<location path="src/App.vue" line_range="590" />
<code_context>
     document.body.setAttribute('class', payload.bodyClass)
   }
+
+  window.dispatchEvent(new Event('maa-bridge-theme-updated'))
 }

</code_context>
<issue_to_address>
**suggestion:** Extract the custom theme event name into a shared constant to avoid string mismatches.

This event name is duplicated here and in `Index.vue` (`window.addEventListener('maa-bridge-theme-updated', refreshVscodeTheme)`). To avoid mismatches if it changes or is mistyped, export a shared constant (e.g. `const BRIDGE_THEME_UPDATED_EVENT = 'maa-bridge-theme-updated'`) and use it in both places.
</issue_to_address>

---

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

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}