🎛️ refactor: HeaderBar into modular components, add shared skeletons, and primary-colored nav hover
Summary
- Split HeaderBar into maintainable components and hooks
- Centralized skeleton loading UI via a reusable SkeletonWrapper
- Improved navigation UX with primary-colored hover indication
- Preserved API surface and passed linters
Why
- Improve readability, reusability, and testability of the header
- Remove duplicated skeleton logic across files
- Provide clearer hover feedback consistent with the theme
What’s changed
- Components (web/src/components/layout/HeaderBar/)
- New container: index.js
- New UI components: HeaderLogo.js, Navigation.js, ActionButtons.js, UserArea.js, MobileMenuButton.js, NewYearButton.js, NotificationButton.js, ThemeToggle.js, LanguageSelector.js
- New shared skeleton: SkeletonWrapper.js
- Updated entry: HeaderBar.js now re-exports ./HeaderBar/index.js
- Hooks (web/src/hooks/common/)
- New: useHeaderBar.js (state and actions for header)
- New: useNotifications.js (announcements state, unread calc, open/close)
- New: useNavigation.js (main nav link config)
- Skeleton refactor
- Navigation.js: replaced inline skeletons with <SkeletonWrapper type="navigation" .../>
- UserArea.js: replaced inline skeletons with <SkeletonWrapper type="userArea" .../>
- HeaderLogo.js: replaced image/title skeletons with <SkeletonWrapper type="image"/>, <SkeletonWrapper type="title"/>
- Navigation hover UX
- Added primary-colored hover to nav items for clearer pointer feedback
- Final hover style: hover:text-semi-color-primary (kept rounded + transition classes)
Non-functional
- No breaking API changes; HeaderBar usage stays the same
- All modified files pass lint checks
Notes for future work
- SkeletonWrapper is extensible: add new cases (e.g., card) in one place
- Components are small and test-friendly; unit tests can be added per component
Affected files (key)
- web/src/components/layout/HeaderBar.js
- web/src/components/layout/HeaderBar/index.js
- web/src/components/layout/HeaderBar/Navigation.js
- web/src/components/layout/HeaderBar/UserArea.js
- web/src/components/layout/HeaderBar/HeaderLogo.js
- web/src/components/layout/HeaderBar/ActionButtons.js
- web/src/components/layout/HeaderBar/MobileMenuButton.js
- web/src/components/layout/HeaderBar/NewYearButton.js
- web/src/components/layout/HeaderBar/NotificationButton.js
- web/src/components/layout/HeaderBar/ThemeToggle.js
- web/src/components/layout/HeaderBar/LanguageSelector.js
- web/src/components/layout/HeaderBar/SkeletonWrapper.js
- web/src/hooks/common/useHeaderBar.js
- web/src/hooks/common/useNotifications.js
- web/src/hooks/common/useNavigation.js
2025-08-18 03:20:56 +08:00
|
|
|
/*
|
|
|
|
|
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 <https://www.gnu.org/licenses/>.
|
|
|
|
|
|
|
|
|
|
For commercial licensing, please contact support@quantumnous.com
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
import { useMemo } from 'react';
|
|
|
|
|
|
2025-08-31 07:07:40 +08:00
|
|
|
export const useNavigation = (t, docsLink, headerNavModules) => {
|
2025-08-30 21:15:10 +08:00
|
|
|
const mainNavLinks = useMemo(
|
2025-08-31 07:07:40 +08:00
|
|
|
() => {
|
|
|
|
|
// 默认配置,如果没有传入配置则显示所有模块
|
|
|
|
|
const defaultModules = {
|
|
|
|
|
home: true,
|
|
|
|
|
console: true,
|
|
|
|
|
pricing: true,
|
|
|
|
|
docs: true,
|
|
|
|
|
about: true,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 使用传入的配置或默认配置
|
|
|
|
|
const modules = headerNavModules || defaultModules;
|
|
|
|
|
|
|
|
|
|
const allLinks = [
|
|
|
|
|
{
|
|
|
|
|
text: t('首页'),
|
|
|
|
|
itemKey: 'home',
|
|
|
|
|
to: '/',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: t('控制台'),
|
|
|
|
|
itemKey: 'console',
|
|
|
|
|
to: '/console',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
text: t('模型广场'),
|
|
|
|
|
itemKey: 'pricing',
|
|
|
|
|
to: '/pricing',
|
|
|
|
|
},
|
|
|
|
|
...(docsLink
|
|
|
|
|
? [
|
|
|
|
|
{
|
|
|
|
|
text: t('文档'),
|
|
|
|
|
itemKey: 'docs',
|
|
|
|
|
isExternal: true,
|
|
|
|
|
externalLink: docsLink,
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
: []),
|
|
|
|
|
{
|
|
|
|
|
text: t('关于'),
|
|
|
|
|
itemKey: 'about',
|
|
|
|
|
to: '/about',
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// 根据配置过滤导航链接
|
|
|
|
|
return allLinks.filter(link => {
|
|
|
|
|
if (link.itemKey === 'docs') {
|
|
|
|
|
return docsLink && modules.docs;
|
|
|
|
|
}
|
|
|
|
|
if (link.itemKey === 'pricing') {
|
|
|
|
|
// 支持新的pricing配置格式
|
|
|
|
|
return typeof modules.pricing === 'object' ? modules.pricing.enabled : modules.pricing;
|
|
|
|
|
}
|
|
|
|
|
return modules[link.itemKey] === true;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
[t, docsLink, headerNavModules],
|
2025-08-30 21:15:10 +08:00
|
|
|
);
|
🎛️ refactor: HeaderBar into modular components, add shared skeletons, and primary-colored nav hover
Summary
- Split HeaderBar into maintainable components and hooks
- Centralized skeleton loading UI via a reusable SkeletonWrapper
- Improved navigation UX with primary-colored hover indication
- Preserved API surface and passed linters
Why
- Improve readability, reusability, and testability of the header
- Remove duplicated skeleton logic across files
- Provide clearer hover feedback consistent with the theme
What’s changed
- Components (web/src/components/layout/HeaderBar/)
- New container: index.js
- New UI components: HeaderLogo.js, Navigation.js, ActionButtons.js, UserArea.js, MobileMenuButton.js, NewYearButton.js, NotificationButton.js, ThemeToggle.js, LanguageSelector.js
- New shared skeleton: SkeletonWrapper.js
- Updated entry: HeaderBar.js now re-exports ./HeaderBar/index.js
- Hooks (web/src/hooks/common/)
- New: useHeaderBar.js (state and actions for header)
- New: useNotifications.js (announcements state, unread calc, open/close)
- New: useNavigation.js (main nav link config)
- Skeleton refactor
- Navigation.js: replaced inline skeletons with <SkeletonWrapper type="navigation" .../>
- UserArea.js: replaced inline skeletons with <SkeletonWrapper type="userArea" .../>
- HeaderLogo.js: replaced image/title skeletons with <SkeletonWrapper type="image"/>, <SkeletonWrapper type="title"/>
- Navigation hover UX
- Added primary-colored hover to nav items for clearer pointer feedback
- Final hover style: hover:text-semi-color-primary (kept rounded + transition classes)
Non-functional
- No breaking API changes; HeaderBar usage stays the same
- All modified files pass lint checks
Notes for future work
- SkeletonWrapper is extensible: add new cases (e.g., card) in one place
- Components are small and test-friendly; unit tests can be added per component
Affected files (key)
- web/src/components/layout/HeaderBar.js
- web/src/components/layout/HeaderBar/index.js
- web/src/components/layout/HeaderBar/Navigation.js
- web/src/components/layout/HeaderBar/UserArea.js
- web/src/components/layout/HeaderBar/HeaderLogo.js
- web/src/components/layout/HeaderBar/ActionButtons.js
- web/src/components/layout/HeaderBar/MobileMenuButton.js
- web/src/components/layout/HeaderBar/NewYearButton.js
- web/src/components/layout/HeaderBar/NotificationButton.js
- web/src/components/layout/HeaderBar/ThemeToggle.js
- web/src/components/layout/HeaderBar/LanguageSelector.js
- web/src/components/layout/HeaderBar/SkeletonWrapper.js
- web/src/hooks/common/useHeaderBar.js
- web/src/hooks/common/useNotifications.js
- web/src/hooks/common/useNavigation.js
2025-08-18 03:20:56 +08:00
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
mainNavLinks,
|
|
|
|
|
};
|
|
|
|
|
};
|