feat: 添加蓝色主题支持并优化样式效果#74
Conversation
为组件添加蓝色主题支持，包括： 1. 新增蓝色主题颜色变量 2. 更新统计数字的渐变背景色 3. 添加浅色主题下的边框发光效果 4. 优化粒子效果和全局聚光灯在不同主题下的颜色表现 5. 统一符号颜色使用主题变量
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求旨在通过引入全新的蓝色主题来增强用户界面的视觉体验，并确保在不同主题模式下（特别是浅色主题）的视觉元素保持一致性和美观性。这包括对颜色变量、渐变背景、发光效果和动态粒子效果的全面调整，以提供更统一和吸引人的外观。 Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
本次 PR 为组件添加了蓝色主题支持，并对相关样式进行了优化。主要改动包括：
- 在 CSS 中添加了蓝色主题的颜色变量。
- 在 JSX 和 CSS 中根据当前主题（浅色/深色）动态调整了辉光、粒子和符号等元素的颜色。
- 将部分硬编码的颜色类名替换为更通用的主题类名。
整体方向是正确的，代码实现了预期功能。但在代码实现上，存在一些可以改进的地方，以提高代码的可维护性和可读性：
- CSS 中存在一些硬编码的颜色值，建议统一使用 CSS 变量管理。
- JSX 文件中存在重复的逻辑来判断主题并选择颜色，可以提炼成辅助函数或自定义 Hook。
具体的建议请见代码中的评论。
| html:not(.dark) .magic-bento-card--border-glow::after { | ||
| background: radial-gradient( | ||
| var(--glow-radius) circle at var(--glow-x) var(--glow-y), | ||
| rgba(41, 212, 255, calc(var(--glow-intensity) * 0.8)) 0%, | ||
| rgba(33, 91, 228, calc(var(--glow-intensity) * 0.4)) 30%, | ||
| transparent 60% | ||
| ); | ||
| } | ||
|
|
||
| html:not(.dark) .magic-bento-card--border-glow:hover { | ||
| box-shadow: | ||
| 0 4px 20px rgba(33, 91, 228, 0.15), | ||
| 0 0 30px rgba(41, 212, 255, 0.15); | ||
| } |
There was a problem hiding this comment.
在浅色主题的辉光和阴影效果中，颜色值如 rgba(41, 212, 255, ...) 和 rgba(33, 91, 228, ...) 被硬编码。这些值在多个地方重复出现（例如 325-333 行的粒子效果），使得主题颜色难以维护。建议在 :root 中为这些颜色的 RGB 值定义 CSS 变量，例如 --blue-primary-rgb: 33, 91, 228; 和 --blue-glow-rgb: 41, 212, 255;，然后在所有使用到的地方通过 rgba(var(--blue-glow-rgb), ...) 的方式引用。这将提高代码的可维护性和一致性。
| html.dark .text-theme-symbol { | ||
| color: #a78bfa !important; /* 紫色，深色主题 */ | ||
| } | ||
|
|
||
| html:not(.dark) .text-theme-symbol { | ||
| color: #215be4 !important; /* 蓝色，白色主题 */ | ||
| } |
There was a problem hiding this comment.
硬编码的颜色值不利于主题维护。建议使用CSS变量。浅色主题的颜色 #215be4 可以用现有的 --blue-primary 变量代替。对于深色主题的 #a78bfa，也建议为其创建一个新变量。
另外，请考虑是否可以通过提高选择器特异性来移除 !important 规则，这会使样式更易于管理。
| html.dark .text-theme-symbol { | |
| color: #a78bfa !important; /* 紫色，深色主题 */ | |
| } | |
| html:not(.dark) .text-theme-symbol { | |
| color: #215be4 !important; /* 蓝色，白色主题 */ | |
| } | |
| html.dark .text-theme-symbol { | |
| color: #a78bfa !important; /* 紫色，深色主题 */ | |
| } | |
| html:not(.dark) .text-theme-symbol { | |
| color: var(--blue-primary) !important; /* 蓝色，白色主题 */ | |
| } |
| const isDark = document.documentElement.classList.contains('dark'); | ||
| const currentGlowColor = isDark ? glowColor : '41, 212, 255'; |
There was a problem hiding this comment.
存在重复代码和魔法字符串。此处的逻辑 const isDark = document.documentElement.classList.contains('dark'); const currentGlowColor = isDark ? glowColor : '41, 212, 255'; 在 handleClick (258行) 和 GlobalSpotlight (338行) 中也重复出现。此外，'41, 212, 255' 是一个魔法字符串。
建议将此颜色值定义为模块级别的常量，并创建一个辅助函数来封装此逻辑，以消除重复并提高可维护性。例如：
const LIGHT_THEME_GLOW_COLOR = '41, 212, 255';
const getThemeGlowColor = (darkGlowColor) => {
// SSR guard
if (typeof document === 'undefined') return darkGlowColor;
const isDark = document.documentElement.classList.contains('dark');
return isDark ? darkGlowColor : LIGHT_THEME_GLOW_COLOR;
}然后在各处调用 getThemeGlowColor(glowColor)。
1 participant
为组件添加蓝色主题支持，包括：
Rpamis-Security Version
[The version of Rpamis-Security you are working on, e.g. 1.1.0, check your pom.xml dependency version]
Description
[Please describe the background, purpose, changes made, and how to test this PR]
Checklist
Please check the following items before code is ready to be reviewed.
mvn spring-javaformat:applymvn test)