Feat/xyzen chat landing page #11
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- ♻️ refactor:Create /chat route with HeroParallax component for product showcase - Add products.ts with Xyzen product data - Implement chat page layout with animated parallax effect - Add CTA button linking to Bohrium Xyzen application - Update Navbar to include Projects menu with 5 ScienceOL products - Add dark mode styling for better visual appearance - Integrate React Router with new /chat route in router.tsx
- Create /chat route with HeroParallax component and product carousel - Add Projects menu to navbar with 5 ScienceOL products (Studio, Xyzen, PROTIUM, Anti, Lab-OS) - Implement responsive chat page with animated parallax and CTA button - Add Tutorial menu item linking to documentation - Create custom useTheme hook integrated with existing UiCore system - Support dynamic theme switching (system/dark/light modes) - Merge main branch and resolve conflicts
审阅者指南此 PR 在聊天登录页面中实现了动态主题，将应用内教程组件替换为导航栏中的外部文档链接，更新了亮模式下的产品缩略图，扩展了 HeroParallax 以支持主题，并引入了一个新的 products.ts 中更新产品缩略图的实体关系图erDiagram
PRODUCT {
string title
string link
string thumbnail
}
新的 useTheme 钩子及其集成的类图classDiagram
class useTheme {
+isDark: boolean
+useTheme(): boolean
}
class useUI {
+theme: string
}
useTheme --> useUI: uses
class HeroParallax {
+products: Product[]
+isDark: boolean
+HeroParallax(props)
}
HeroParallax --> useTheme: uses
class Header {
+isDark: boolean
+Header(isDark)
}
Header <-- HeroParallax: passes isDark
class ChatPage {
+isDark: boolean
+ChatPage()
}
ChatPage --> useTheme: uses
更新 NavbarMenu 和 Tutorials 集成的类图classDiagram
class NavbarMenu {
+NavbarMenu()
-TutorialComponent (removed)
+External tutorial link
}
class Tutorial {
+Tutorial()
+uses useTranslation
+renders external docs link
}
NavbarMenu --> Tutorial: renders link
文件级更改
提示和命令与 Sourcery 互动
自定义您的体验访问您的 仪表板 以：
获取帮助Original review guide in EnglishReviewer's GuideThis PR implements dynamic theming across the chat landing page, replaces the in-app tutorial component with an external docs link in the navbar, updates product thumbnails for light mode, extends HeroParallax with theme support, and introduces a new useTheme hook for detecting dark/light mode. Entity relationship diagram for updated product thumbnails in products.tserDiagram
PRODUCT {
string title
string link
string thumbnail
}
Class diagram for the new useTheme hook and its integrationclassDiagram
class useTheme {
+isDark: boolean
+useTheme(): boolean
}
class useUI {
+theme: string
}
useTheme --> useUI: uses
class HeroParallax {
+products: Product[]
+isDark: boolean
+HeroParallax(props)
}
HeroParallax --> useTheme: uses
class Header {
+isDark: boolean
+Header(isDark)
}
Header <-- HeroParallax: passes isDark
class ChatPage {
+isDark: boolean
+ChatPage()
}
ChatPage --> useTheme: uses
Class diagram for updated NavbarMenu and Tutorials integrationclassDiagram
class NavbarMenu {
+NavbarMenu()
-TutorialComponent (removed)
+External tutorial link
}
class Tutorial {
+Tutorial()
+uses useTranslation
+renders external docs link
}
NavbarMenu --> Tutorial: renders link
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
你好 - 我已审阅了你的更改，它们看起来很棒！
AI 代理的提示
请处理此代码审查中的评论：
## 独立评论
### 评论 1
<location> `web/src/app/navbar/Navbar.tsx:40-45` </location>
<code_context>
setOpen={setOpen}
/>
- <TutorialComponent
+ <a
+ className={`inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-neutral-900 focus:outline-none dark:text-neutral-100 ${'hover:text-indigo-600 dark:hover:text-indigo-500'}`}
+ href='https://docs.sciol.ac.cn'
+ >
+ <span>{t('navbar.tutorial')}</span>
+ </a>
+ {/* <Tutorial
index={4}
</code_context>
<issue_to_address>
**🚨 suggestion (security):** 教程链接的新锚点不会在新标签页中打开。
请添加 target="_blank" 和 rel="noopener noreferrer" 到锚点，以恢复新标签页行为并维护安全性。
```suggestion
<a
className={`inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-neutral-900 focus:outline-none dark:text-neutral-100 ${'hover:text-indigo-600 dark:hover:text-indigo-500'}`}
href='https://docs.sciol.ac.cn'
target="_blank"
rel="noopener noreferrer"
>
<span>{t('navbar.tutorial')}</span>
</a>
```
</issue_to_address>
### 评论 2
<location> `web/src/hooks/useTheme.ts:20-23` </location>
<code_context>
+
+ // 监听系统主题变化（当主题设置为 system 时）
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+ mediaQuery.addEventListener('change', updateIsDark);
+
+ return () => {
+ mediaQuery.removeEventListener('change', updateIsDark);
+ };
+ }, [theme]);
</code_context>
<issue_to_address>
**issue (bug_risk):** 直接在 MediaQueryList 上使用 addEventListener 可能不受所有浏览器的支持。
某些浏览器仅支持 MediaQueryList 的 'addListener' 和 'removeListener'。请添加兼容性检查或回退以确保可靠的主题更新。
</issue_to_address>帮助我更有用！请点击每个评论上的 👍 或 👎，我将使用反馈来改进您的评论。
Original comment in English
Hey there - I've reviewed your changes and they look great!
Prompt for AI Agents
Please address the comments from this code review:
## Individual Comments
### Comment 1
<location> `web/src/app/navbar/Navbar.tsx:40-45` </location>
<code_context>
setOpen={setOpen}
/>
- <TutorialComponent
+ <a
+ className={`inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-neutral-900 focus:outline-none dark:text-neutral-100 ${'hover:text-indigo-600 dark:hover:text-indigo-500'}`}
+ href='https://docs.sciol.ac.cn'
+ >
+ <span>{t('navbar.tutorial')}</span>
+ </a>
+ {/* <Tutorial
index={4}
</code_context>
<issue_to_address>
**🚨 suggestion (security):** The new anchor for the tutorial link does not open in a new tab.
Please add target="_blank" and rel="noopener noreferrer" to the anchor to restore new tab behavior and maintain security.
```suggestion
<a
className={`inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-neutral-900 focus:outline-none dark:text-neutral-100 ${'hover:text-indigo-600 dark:hover:text-indigo-500'}`}
href='https://docs.sciol.ac.cn'
target="_blank"
rel="noopener noreferrer"
>
<span>{t('navbar.tutorial')}</span>
</a>
```
</issue_to_address>
### Comment 2
<location> `web/src/hooks/useTheme.ts:20-23` </location>
<code_context>
+
+ // 监听系统主题变化（当主题设置为 system 时）
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+ mediaQuery.addEventListener('change', updateIsDark);
+
+ return () => {
+ mediaQuery.removeEventListener('change', updateIsDark);
+ };
+ }, [theme]);
</code_context>
<issue_to_address>
**issue (bug_risk):** Directly using addEventListener on MediaQueryList may not be supported in all browsers.
Some browsers only support 'addListener' and 'removeListener' for MediaQueryList. Please add a compatibility check or fallback to ensure reliable theme updates.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
Comment on lines
+40
to
+45
| <a | ||
| className={`inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-neutral-900 focus:outline-none dark:text-neutral-100 ${'hover:text-indigo-600 dark:hover:text-indigo-500'}`} | ||
| href='https://docs.sciol.ac.cn' | ||
| > | ||
| <span>{t('navbar.tutorial')}</span> | ||
| </a> |
There was a problem hiding this comment.
🚨 suggestion (security): 教程链接的新锚点不会在新标签页中打开。
请添加 target="_blank" 和 rel="noopener noreferrer" 到锚点，以恢复新标签页行为并维护安全性。
Suggested change
| <a | |
| className={`inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-neutral-900 focus:outline-none dark:text-neutral-100 ${'hover:text-indigo-600 dark:hover:text-indigo-500'}`} | |
| href='https://docs.sciol.ac.cn' | |
| > | |
| <span>{t('navbar.tutorial')}</span> | |
| </a> | |
| <a | |
| className={`inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-neutral-900 focus:outline-none dark:text-neutral-100 ${'hover:text-indigo-600 dark:hover:text-indigo-500'}`} | |
| href='https://docs.sciol.ac.cn' | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| <span>{t('navbar.tutorial')}</span> | |
| </a> |
Original comment in English
🚨 suggestion (security): The new anchor for the tutorial link does not open in a new tab.
Please add target="_blank" and rel="noopener noreferrer" to the anchor to restore new tab behavior and maintain security.
Suggested change
| <a | |
| className={`inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-neutral-900 focus:outline-none dark:text-neutral-100 ${'hover:text-indigo-600 dark:hover:text-indigo-500'}`} | |
| href='https://docs.sciol.ac.cn' | |
| > | |
| <span>{t('navbar.tutorial')}</span> | |
| </a> | |
| <a | |
| className={`inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-neutral-900 focus:outline-none dark:text-neutral-100 ${'hover:text-indigo-600 dark:hover:text-indigo-500'}`} | |
| href='https://docs.sciol.ac.cn' | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| > | |
| <span>{t('navbar.tutorial')}</span> | |
| </a> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
变更内容
简要描述本次 PR 的主要变更内容。
相关 Issue
请关联相关 Issue（如有）：#编号
检查清单
默认已勾选，如不满足，请检查。
其他说明
如有特殊说明或注意事项，请补充。
Sourcery 摘要
在聊天登录页和导航栏中引入动态主题，将教程菜单替换为外部文档链接，并刷新亮色主题的产品图片
新功能：
useThemehook 以检测和管理暗/亮模式Original summary in English
Summary by Sourcery
Introduce dynamic theming across the chat landing page and navbar, swap the tutorial menu for an external docs link, and refresh product images for light theme
New Features: