diff --git a/web/src/components/layout/PageLayout.jsx b/web/src/components/layout/PageLayout.jsx index adb57306..f8cdfb0c 100644 --- a/web/src/components/layout/PageLayout.jsx +++ b/web/src/components/layout/PageLayout.jsx @@ -17,7 +17,7 @@ along with this program. If not, see . For commercial licensing, please contact support@quantumnous.com */ -import HeaderBar from './headerbar/index.jsx'; +import HeaderBar from './headerbar'; import { Layout } from '@douyinfe/semi-ui'; import SiderBar from './SiderBar'; import App from '../../App'; diff --git a/web/src/components/layout/headerbar/ActionButtons.jsx b/web/src/components/layout/headerbar/ActionButtons.jsx new file mode 100644 index 00000000..545b5227 --- /dev/null +++ b/web/src/components/layout/headerbar/ActionButtons.jsx @@ -0,0 +1,74 @@ +/* +Copyright (C) 2025 QuantumNous + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . + +For commercial licensing, please contact support@quantumnous.com +*/ + +import React from 'react'; +import NewYearButton from './NewYearButton'; +import NotificationButton from './NotificationButton'; +import ThemeToggle from './ThemeToggle'; +import LanguageSelector from './LanguageSelector'; +import UserArea from './UserArea'; + +const ActionButtons = ({ + isNewYear, + unreadCount, + onNoticeOpen, + theme, + onThemeToggle, + currentLang, + onLanguageChange, + userState, + isLoading, + isMobile, + isSelfUseMode, + logout, + navigate, + t, +}) => { + return ( +
+ + + + + + + + + +
+ ); +}; + +export default ActionButtons; diff --git a/web/src/components/layout/headerbar/HeaderLogo.jsx b/web/src/components/layout/headerbar/HeaderLogo.jsx new file mode 100644 index 00000000..73be0516 --- /dev/null +++ b/web/src/components/layout/headerbar/HeaderLogo.jsx @@ -0,0 +1,81 @@ +/* +Copyright (C) 2025 QuantumNous + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . + +For commercial licensing, please contact support@quantumnous.com +*/ + +import React from 'react'; +import { Link } from 'react-router-dom'; +import { Typography, Tag } from '@douyinfe/semi-ui'; +import SkeletonWrapper from '../components/SkeletonWrapper'; + +const HeaderLogo = ({ + isMobile, + isConsoleRoute, + logo, + logoLoaded, + isLoading, + systemName, + isSelfUseMode, + isDemoSiteMode, + t, +}) => { + if (isMobile && isConsoleRoute) { + return null; + } + + return ( + +
+ + logo +
+
+
+ + + {systemName} + + + {(isSelfUseMode || isDemoSiteMode) && !isLoading && ( + + {isSelfUseMode ? t('自用模式') : t('演示站点')} + + )} +
+
+ + ); +}; + +export default HeaderLogo; diff --git a/web/src/components/layout/headerbar/LanguageSelector.jsx b/web/src/components/layout/headerbar/LanguageSelector.jsx new file mode 100644 index 00000000..cbfd69b3 --- /dev/null +++ b/web/src/components/layout/headerbar/LanguageSelector.jsx @@ -0,0 +1,59 @@ +/* +Copyright (C) 2025 QuantumNous + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . + +For commercial licensing, please contact support@quantumnous.com +*/ + +import React from 'react'; +import { Button, Dropdown } from '@douyinfe/semi-ui'; +import { Languages } from 'lucide-react'; +import { CN, GB } from 'country-flag-icons/react/3x2'; + +const LanguageSelector = ({ currentLang, onLanguageChange, t }) => { + return ( + + onLanguageChange('zh')} + className={`!flex !items-center !gap-2 !px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'zh' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`} + > + + 中文 + + onLanguageChange('en')} + className={`!flex !items-center !gap-2 !px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'en' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`} + > + + English + + + } + > + + + ); + } else { + const showRegisterButton = !isSelfUseMode; + + const commonSizingAndLayoutClass = + 'flex items-center justify-center !py-[10px] !px-1.5'; + + const loginButtonSpecificStyling = + '!bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-700 transition-colors'; + let loginButtonClasses = `${commonSizingAndLayoutClass} ${loginButtonSpecificStyling}`; + + let registerButtonClasses = `${commonSizingAndLayoutClass}`; + + const loginButtonTextSpanClass = + '!text-xs !text-semi-color-text-1 dark:!text-gray-300 !p-1.5'; + const registerButtonTextSpanClass = '!text-xs !text-white !p-1.5'; + + if (showRegisterButton) { + if (isMobile) { + loginButtonClasses += ' !rounded-full'; + } else { + loginButtonClasses += ' !rounded-l-full !rounded-r-none'; + } + registerButtonClasses += ' !rounded-r-full !rounded-l-none'; + } else { + loginButtonClasses += ' !rounded-full'; + } + + return ( +
+ + + + {showRegisterButton && ( +
+ + + +
+ )} +
+ ); + } +}; + +export default UserArea; diff --git a/web/src/components/layout/headerbar/index.jsx b/web/src/components/layout/headerbar/index.jsx new file mode 100644 index 00000000..81b51d7f --- /dev/null +++ b/web/src/components/layout/headerbar/index.jsx @@ -0,0 +1,132 @@ +/* +Copyright (C) 2025 QuantumNous + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . + +For commercial licensing, please contact support@quantumnous.com +*/ + +import React from 'react'; +import { useHeaderBar } from '../../../hooks/common/useHeaderBar'; +import { useNotifications } from '../../../hooks/common/useNotifications'; +import { useNavigation } from '../../../hooks/common/useNavigation'; +import NoticeModal from '../NoticeModal'; +import MobileMenuButton from './MobileMenuButton'; +import HeaderLogo from './HeaderLogo'; +import Navigation from './Navigation'; +import ActionButtons from './ActionButtons'; + +const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => { + const { + userState, + statusState, + isMobile, + collapsed, + logoLoaded, + currentLang, + isLoading, + systemName, + logo, + isNewYear, + isSelfUseMode, + docsLink, + isDemoSiteMode, + isConsoleRoute, + theme, + headerNavModules, + pricingRequireAuth, + logout, + handleLanguageChange, + handleThemeToggle, + handleMobileMenuToggle, + navigate, + t, + } = useHeaderBar({ onMobileMenuToggle, drawerOpen }); + + const { + noticeVisible, + unreadCount, + handleNoticeOpen, + handleNoticeClose, + getUnreadKeys, + } = useNotifications(statusState); + + const { mainNavLinks } = useNavigation(t, docsLink, headerNavModules); + + return ( +
+ 0 ? 'system' : 'inApp'} + unreadKeys={getUnreadKeys()} + /> + +
+
+
+ + + +
+ + + + +
+
+
+ ); +}; + +export default HeaderBar;