-
- ));
- }
-
- return mainNavLinks.map((link) => {
- const commonLinkClasses = isMobileView
- ? 'flex-shrink-0 flex items-center gap-1 p-1 font-semibold'
- : 'flex-shrink-0 flex items-center gap-1 p-2 font-semibold';
-
- const linkContent = (
- {link.text}
- );
-
- if (link.isExternal) {
- return (
-
- {linkContent}
-
- );
- }
-
- let targetPath = link.to;
- if (link.itemKey === 'console' && !userState.user) {
- targetPath = '/login';
- }
-
- return (
-
- {linkContent}
-
- );
- });
- };
-
- const renderUserArea = () => {
- if (isLoading) {
- return (
-
-
- );
- }
-
- if (userState.user) {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {showRegisterButton && (
-
- );
- }
- };
-
- return (
-
-
-
-
-
- )}
-
-
-
-
-
- {isConsoleRoute && isMobile && (
- :
-
- {/* 中间可滚动导航区域（全部设备）*/}
-
-
- {/* 右侧用户信息及功能按钮 */}
-
- {(isLoading || !logoLoaded) && (
- 
-
-
-
-
- )}
-
-
- {systemName}
-
-
- {(isSelfUseMode || isDemoSiteMode) && !isLoading && (
-
- {isSelfUseMode ? t('自用模式') : t('演示站点')}
-
- )}
-
-
- {isNewYear && (
-
-
- Happy New Year!!! 🎉
-
-
- }
- >
-
- )}
-
- {unreadCount > 0 ? (
-
- }
- aria-label={t('系统公告')}
- onClick={handleNoticeOpen}
- theme="borderless"
- type="tertiary"
- size='small'
- className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 !rounded-full !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 hover:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2"
- />
-
- ) : (
- }
- aria-label={t('系统公告')}
- onClick={handleNoticeOpen}
- theme="borderless"
- type="tertiary"
- className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 !rounded-full !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 hover:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2"
- />
- )}
-
- :
- handleLanguageChange('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'}`}
- >
-
- handleLanguageChange('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'}`}
- >
-
-
- }
- >
- }
- aria-label={t('切换语言')}
- theme="borderless"
- type="tertiary"
- className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 !rounded-full !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 hover:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2"
- />
-
-
- {renderUserArea()}
-
-
+
+ );
+};
+
+export default ActionButtons;
diff --git a/web/src/components/layout/HeaderBar/HeaderLogo.js b/web/src/components/layout/HeaderBar/HeaderLogo.js
new file mode 100644
index 00000000..77e27bad
--- /dev/null
+++ b/web/src/components/layout/HeaderBar/HeaderLogo.js
@@ -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
+
+
+
+
+ );
+};
+
+export default HeaderLogo;
diff --git a/web/src/components/layout/HeaderBar/LanguageSelector.js b/web/src/components/layout/HeaderBar/LanguageSelector.js
new file mode 100644
index 00000000..1f5e0bb7
--- /dev/null
+++ b/web/src/components/layout/HeaderBar/LanguageSelector.js
@@ -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
+
+
+ {systemName}
+
+
+ {(isSelfUseMode || isDemoSiteMode) && !isLoading && (
+
+ {isSelfUseMode ? t('自用模式') : t('演示站点')}
+
+ )}
+
+
+
+ ));
+ };
+
+ // 用户区域骨架屏 (头像 + 文本)
+ const renderUserAreaSkeleton = () => {
+ return (
+
+
+ );
+ };
+
+ // Logo图片骨架屏
+ const renderImageSkeleton = () => {
+ return (
+
+
+
+
+ );
+ };
+
+ // 根据类型渲染不同的骨架屏
+ switch (type) {
+ case 'navigation':
+ return renderNavigationSkeleton();
+ case 'userArea':
+ return renderUserAreaSkeleton();
+ case 'image':
+ return renderImageSkeleton();
+ case 'title':
+ return renderTitleSkeleton();
+ case 'text':
+ default:
+ return renderTextSkeleton();
+ }
+};
+
+export default SkeletonWrapper;
diff --git a/web/src/components/layout/HeaderBar/ThemeToggle.js b/web/src/components/layout/HeaderBar/ThemeToggle.js
new file mode 100644
index 00000000..810a15db
--- /dev/null
+++ b/web/src/components/layout/HeaderBar/ThemeToggle.js
@@ -0,0 +1,37 @@
+/*
+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
+
+
+
+
+
+
+
+
+
+
+
+ {showRegisterButton && (
+
+ );
+ }
+};
+
+export default UserArea;
diff --git a/web/src/components/layout/HeaderBar/index.js b/web/src/components/layout/HeaderBar/index.js
new file mode 100644
index 00000000..2bdf0aca
--- /dev/null
+++ b/web/src/components/layout/HeaderBar/index.js
@@ -0,0 +1,129 @@
+/*
+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
+
+
+
+
+ )}
+
+
+
+
+
+
+
+