+ 🖱️ 拖动旋转 | 滚轮缩放 | 右键平移 +
++ {deviceInfo.nameEn} +
++ {deviceInfo.description} +
++ {deviceInfo.usage} +
++ 正在演示设备工作流程 +
+ )} ++ Interactive Laboratory Visualization +
++
点击下方按钮，立即体验 Xyzen AI Agent
{item.description}
diff --git a/web/src/app/navbar/Projects.tsx b/web/src/app/navbar/Projects.tsx index 6db9cb6..14cdb78 100644 --- a/web/src/app/navbar/Projects.tsx +++ b/web/src/app/navbar/Projects.tsx @@ -134,7 +134,7 @@ import { // RectangleGroupIcon, } from '@heroicons/react/24/outline'; -import { SiUnrealengine,SiUnity,SiProton,SiX,SiStmicroelectronics } from 'react-icons/si'; +import { SiUnrealengine,SiUnity,SiProton,SiX,SiStmicroelectronics,SiBlender } from 'react-icons/si'; import { GitHubIcon } from '@/assets/SocialIcons'; import NavbarFullWidth from './NavbarFullWidth'; import type { NavbarFullWidthProps } from './types'; @@ -165,7 +165,7 @@ const resources = [ { name: 'Anti', description: '用于实验室模拟的3D数字孪生平台', - href: `/deepmd-kit`, + href: `/3D_lab`, icon: SiUnity, color:'text-rose-500', }, @@ -175,7 +175,14 @@ const resources = [ href: `/deepmd-kit`, icon: SiUnrealengine, color:'text-emerald-500', - } + }, + { + name:'3D Lab', + description: '展示3D实验室的实验仪器和场景', + href: `/3D_lab`, + icon: SiBlender, + color:'text-purple-500', + }, ]; const callsToAction = [ diff --git a/web/src/app/navbar/Tutorials.tsx b/web/src/app/navbar/Tutorials.tsx index 483fab8..5f6febc 100644 --- a/web/src/app/navbar/Tutorials.tsx +++ b/web/src/app/navbar/Tutorials.tsx @@ -59,17 +59,21 @@ 'use client'; -// import Link from 'next/link'; +// import Link from 'next/link' +import { useTranslation } from "react-i18next"; export default function Tutorial() { + const { t } = useTranslation(); + + return ( - 教程 - + 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" + > + {t('navbar.tutorial','Tutorial')} + ); } diff --git a/web/src/components/ui/hero-parallax.tsx b/web/src/components/ui/hero-parallax.tsx index 75ae479..a3c5a91 100644 --- a/web/src/components/ui/hero-parallax.tsx +++ b/web/src/components/ui/hero-parallax.tsx @@ -7,6 +7,7 @@ import { useTransform, } from 'motion/react'; import React from 'react'; +import { useTheme } from '@/hooks/useTheme'; export const HeroParallax = ({ products, @@ -17,6 +18,8 @@ export const HeroParallax = ({ thumbnail: string; }[]; }) => { + const { isDark } = useTheme(); + const firstRow = products.slice(0, 5); const secondRow = products.slice(5, 10); const thirdRow = products.slice(10, 15); @@ -56,9 +59,9 @@ export const HeroParallax = ({+
Xyzen 是一个 Agent， 他是一个会创造 Agent 的 Agent。 Xyzen 可以为你开启一个通往Agent 与MCP无限可能的大门。
diff --git a/web/src/hooks/useTheme.ts b/web/src/hooks/useTheme.ts new file mode 100644 index 0000000..3e2f4b0 --- /dev/null +++ b/web/src/hooks/useTheme.ts @@ -0,0 +1,28 @@ +'use client'; + +import { useUI } from '@/hooks/useUI'; +import { useEffect, useState } from 'react'; + +export function useTheme() { + const { theme } = useUI(); + const [isDark, setIsDark] = useState(false); + + useEffect(() => { + // 根据主题设置 isDark + const updateIsDark = () => { + setIsDark(theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)); + }; + + updateIsDark(); + + // 监听系统主题变化（当主题设置为 system 时） + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + mediaQuery.addEventListener('change', updateIsDark); + + return () => { + mediaQuery.removeEventListener('change', updateIsDark); + }; + }, [theme]); + + return { isDark }; +} diff --git a/web/src/router.tsx b/web/src/router.tsx index 8c9ac81..ce1650a 100644 --- a/web/src/router.tsx +++ b/web/src/router.tsx @@ -1,38 +1,57 @@ -import { BrowserRouter, Route, Routes } from 'react-router-dom'; -import App from './app/App'; -import ChatPage from './app/chat/page'; -import { EnvironmentPage } from './app/dashboard/environment'; -import EnvironmentDetail from './app/dashboard/environment/EnvironmentDetail'; -import DashboardHome from './app/dashboard/Home'; +import { Suspense, lazy } from "react"; +import { BrowserRouter, Route, Routes } from "react-router-dom"; +import App from "./app/App"; +import ProtectedDashboardLayout from "./components/layout/ProtectedDashboardPage"; -import CallbackPage from './app/login/CallbackPage'; -import LoginPage from './app/login/LoginPage'; -import UiTestPage from './app/ui/page'; -import ProtectedDashboardLayout from './components/layout/ProtectedDashboardPage'; +// 路由懒加载 +const ChatPage = lazy(() => import("./app/chat/page")); +const EnvironmentPage = lazy(() => + import("./app/dashboard/environment").then((module) => ({ + default: module.EnvironmentPage, + })) +); +const EnvironmentDetail = lazy( + () => import("./app/dashboard/environment/EnvironmentDetail") +); +const DesktopWindow = lazy(() => import("./app/dashboard/Desktop")); +const CallbackPage = lazy(() => import("./app/login/CallbackPage")); +const LoginPage = lazy(() => import("./app/login/LoginPage")); +const UiTestPage = lazy(() => import("./app/ui/page")); +const Lab3DPage = lazy(() => import("./app/3D_lab/page")); + +const LoadingFallback = () => ( +