Feat/xyzen chat landing page #12

zhangligei · 2025-12-16T05:15:46Z

变更内容

新功能
修复 Bug
增强重构
其他（请描述）

简要描述本次 PR 的主要变更内容。

检查清单

默认已勾选，如不满足，请检查。

已在本地测试通过
已补充/更新相关文档
代码风格已经过 pre-commit 钩子检查
非企业版分支
遵循贡献者文档中的最佳实践

其他说明

如有特殊说明或注意事项，请补充。

- ♻️ 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

…ng-page

- 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

- Create interactive 3D lab scene using React Three Fiber - Implement 12+ device components (liquid handler, microscope, centrifuge, AGV robot, etc.) - Add device detail modal with 3D preview and specifications - Support device animations and interactive highlighting - Include device information database - Update navbar with 3D Lab navigation links - Enhance scrollbar styling for better UX

sourcery-ai

Sorry @zhangligei, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

Copilot

Pull request overview

This PR introduces a new 3D laboratory visualization feature for the Xyzen platform, along with theme system improvements across the application. The changes create an interactive 3D scene showcasing laboratory equipment with detailed information modals, while enhancing the existing chat landing page with proper light/dark theme support.

Key Changes:

Added a new interactive 3D laboratory page with clickable devices and detailed information modals
Implemented a reusable useTheme hook for consistent theme detection across components
Enhanced the chat landing page and hero parallax component with dynamic theme-aware styling

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 19 comments.

Show a summary per file

File	Description
web/src/router.tsx	Added new route for 3D lab page
web/src/hooks/useTheme.ts	New custom hook for theme state management with system preference detection
web/src/components/ui/hero-parallax.tsx	Integrated theme support for dynamic background and text colors
web/src/app/navbar/Tutorials.tsx	Updated tutorial link styling and added i18n support
web/src/app/navbar/Projects.tsx	Added 3D lab navigation entries with new Blender icon
web/src/app/navbar/NavbarFullWidth.tsx	Enhanced link handling to differentiate internal routes from external URLs
web/src/app/navbar/Navbar.tsx	Replaced Tutorial component with inline link implementation
web/src/app/chat/products.ts	Updated thumbnail URLs to light-themed versions
web/src/app/chat/page.tsx	Integrated theme support for dynamic styling
web/src/app/3D_lab/page.tsx	Main 3D lab page component with device interaction logic
web/src/app/3D_lab/styles.css	Custom animations and scrollbar styling for 3D lab
web/src/app/3D_lab/deviceInfo.ts	Device metadata and information structure
web/src/app/3D_lab/deviceComponents.tsx	Reusable 3D device component library
web/src/app/3D_lab/InteractiveLabScene.tsx	Main 3D scene setup with interactive devices
web/src/app/3D_lab/DeviceDetailModal.tsx	Modal component for displaying device details with 3D preview
web/index.css	Global scrollbar styling enhancements

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-16T05:23:44Z

web/src/app/3D_lab/InteractiveLabScene.tsx

+      <ClickableDevice
+        deviceId="microscope"
+        position={[0, 0.95, -4.2]}
+        onDeviceClick={onDeviceClick}
+        isHighlighted={highlightedDevice === 'microscope'}
+        isAnimating={animatingDevice === 'microscope'}
+        disabled={disabled}
+      >
+        <Microscope isAnimating={animatingDevice === 'microscope'} />
+      </ClickableDevice>


The disabled prop is not being passed to this ClickableDevice. This microscope instance should receive the disabled prop to prevent interaction when a modal is open, consistent with the liquid-handler implementation.

Copilot · 2025-12-16T05:23:44Z

web/src/app/3D_lab/InteractiveLabScene.tsx

+      <ClickableDevice
+        deviceId="centrifuge"
+        position={[-1.2, 0.95, -4.2]}
+        onDeviceClick={onDeviceClick}
+        isHighlighted={highlightedDevice === 'centrifuge'}
+        isAnimating={animatingDevice === 'centrifuge'}
+        disabled={disabled}
+      >
+        <Centrifuge isAnimating={animatingDevice === 'centrifuge'} />
+      </ClickableDevice>
+      <ClickableDevice
+        deviceId="centrifuge"
+        position={[1.2, 0.95, -4.2]}
+        onDeviceClick={onDeviceClick}
+        isHighlighted={highlightedDevice === 'centrifuge'}
+        isAnimating={animatingDevice === 'centrifuge'}
+        disabled={disabled}
+      >
+        <Centrifuge isAnimating={animatingDevice === 'centrifuge'} />
+      </ClickableDevice>


The disabled prop is not being passed to these ClickableDevice components. These centrifuge instances should receive the disabled prop to prevent interaction when a modal is open, consistent with the liquid-handler implementation.

Copilot · 2025-12-16T05:23:45Z

web/src/app/navbar/Projects.tsx

    name: 'Anti',
    description: '用于实验室模拟的3D数字孪生平台',
-    href: `/deepmd-kit`,
+    href: `/3D_lab`,


The route path "/3D_lab" is inconsistent with other naming conventions in the file. This same path is also used in Projects.tsx (line 168, 182). If the route path is changed, ensure all references are updated accordingly.

Copilot · 2025-12-16T05:23:45Z

web/src/app/navbar/Navbar.tsx

+        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>


Missing translation fallback value. The t function call on line 44 doesn't provide a default fallback value, unlike line 76 in Tutorials.tsx which uses t('navbar.tutorial','Tutorial'). For consistency and to ensure text is displayed if the translation key is missing, add a fallback: t('navbar.tutorial', 'Tutorial').

Suggested change

<span>{t('navbar.tutorial')}</span>

<span>{t('navbar.tutorial', 'Tutorial')}</span>

Copilot · 2025-12-16T05:23:46Z

web/src/app/3D_lab/InteractiveLabScene.tsx

+      <ClickableDevice
+        deviceId="centrifuge"
+        position={[-4.5, 0.95, -1.2]}
+        onDeviceClick={onDeviceClick}
+        isHighlighted={highlightedDevice === 'centrifuge'}
+        isAnimating={animatingDevice === 'centrifuge'}
+        disabled={disabled}
+      >
+        <Centrifuge isAnimating={animatingDevice === 'centrifuge'} />
+      </ClickableDevice>


The disabled prop is not being passed to ClickableDevice components for centrifuge and microscope instances. While the liquid-handler at line 553-564 correctly passes the disabled prop, multiple other ClickableDevice instances (lines 568-577, 585-602, 603-612, 615-624, 630-647, 659-668, 669-678, 679-688, 702-714, 715-727) are missing this prop. This means these devices will remain interactive even when a modal is open, which is inconsistent with the intended behavior.

Copilot · 2025-12-16T05:23:49Z

web/src/app/3D_lab/InteractiveLabScene.tsx

+      <ClickableDevice
+        deviceId="centrifuge"
+        position={[1.5, 0.95, 0.6]}
+        onDeviceClick={onDeviceClick}
+        isHighlighted={highlightedDevice === 'centrifuge'}
+        isAnimating={animatingDevice === 'centrifuge'}
+        disabled={disabled}
+      >
+        <Centrifuge isAnimating={animatingDevice === 'centrifuge'} />
+      </ClickableDevice>


The disabled prop is not being passed to this ClickableDevice. This centrifuge instance should receive the disabled prop to prevent interaction when a modal is open, consistent with the liquid-handler implementation.

Copilot · 2025-12-16T05:23:49Z

web/src/app/3D_lab/page.tsx

+              <button
+                onClick={() => setShowDeviceList(false)}
+                className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>


Missing accessible label for the close button. Screen reader users won't know what this button does. Add an aria-label attribute: aria-label="关闭设备列表" or wrap the button content with descriptive text.

Copilot · 2025-12-16T05:23:49Z

web/src/app/navbar/Projects.tsx

+  {
+    name:'3D Lab',
+    description: '展示3D实验室的实验仪器和场景',
+    href: `/3D_lab`,


The route path "/3D_lab" is inconsistent with other naming conventions in the file. This same path is also used in Projects.tsx (line 168, 182). If the route path is changed, ensure all references are updated accordingly.

Copilot · 2025-12-16T05:23:49Z

web/src/components/ui/hero-parallax.tsx

 };

-export const Header = () => {
+export const Header = ({isDark}:{isDark: boolean}) => {


The Header component parameter formatting is inconsistent. The parameter should have proper spacing: ({ isDark }: { isDark: boolean }) instead of ({isDark}:{isDark: boolean}).

Suggested change

export const Header = ({isDark}:{isDark: boolean}) => {

export const Header = ({ isDark }: { isDark: boolean }) => {

Copilot · 2025-12-16T05:23:50Z

web/src/app/navbar/Navbar.tsx

+// const Tutorial = Tutorial as React.ComponentType<{
+//   index: number;
+//   activeMenuItem: number | null;
+//   setActiveMenuItem: React.Dispatch<React.SetStateAction<number | null>>;
+//   open: boolean;
+//   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+// }>;


There's an inconsistency in the commented-out code. Line 12 names the variable "Tutorial" but line 13's comment refers to it as "Tutorial" in the type annotation. The original import was "Tutorial" (line 10), so the commented code should maintain this name consistently throughout.

zhangligei added 5 commits November 13, 2025 23:59

Merge main branch into feat/xyzen-chat-landing-page

6ed9aec

Merge remote-tracking branch 'origin/main' into feat/xyzen-chat-landi…

1f61e71

…ng-page

Copilot AI review requested due to automatic review settings December 16, 2025 05:15

sourcery-ai bot reviewed Dec 16, 2025

View reviewed changes

Copilot started reviewing on behalf of zhangligei December 16, 2025 05:16 View session

Copilot AI reviewed Dec 16, 2025

View reviewed changes

feat: 实现路由懒加载，优化页面加载性能

0b584fa

zhangligei closed this Dec 16, 2025

zhangligei reopened this Dec 16, 2025

zhangligei closed this Dec 16, 2025

	<span>{t('navbar.tutorial')}</span>
	<span>{t('navbar.tutorial', 'Tutorial')}</span>

	export const Header = ({isDark}:{isDark: boolean}) => {
	export const Header = ({ isDark }: { isDark: boolean }) => {

Feat/xyzen chat landing page #12

Feat/xyzen chat landing page #12

Uh oh!

Conversation

zhangligei commented Dec 16, 2025

变更内容

相关 Issue

检查清单

其他说明

Uh oh!

sourcery-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants