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

web/src/components/auth/LoginForm.js

@@ -170,7 +170,7 @@ const LoginForm = () => {
             setLoginLoading(false);
             return;
           }
-          
+
           userDispatch({ type: 'login', payload: data });
           setUserData(data);
           updateAPI();
@@ -313,7 +313,7 @@ const LoginForm = () => {
             <Title heading={3} className='!text-gray-800'>{systemName}</Title>
           </div>
 
-          <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+          <Card className="border-0 !rounded-2xl overflow-hidden">
             <div className="flex justify-center pt-6 pb-2">
               <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('登 录')}</Title>
             </div>
@@ -430,7 +430,7 @@ const LoginForm = () => {
             <Title heading={3}>{systemName}</Title>
           </div>
 
-          <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+          <Card className="border-0 !rounded-2xl overflow-hidden">
             <div className="flex justify-center pt-6 pb-2">
               <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('登 录')}</Title>
             </div>
@@ -581,7 +581,7 @@ const LoginForm = () => {
         width={450}
         centered
       >
-        <TwoFAVerification 
+        <TwoFAVerification
           onSuccess={handle2FASuccess}
           onBack={handleBackToLogin}
           isModal={true}

web/src/components/auth/PasswordResetConfirm.js

@@ -109,7 +109,7 @@ const PasswordResetConfirm = () => {
               <Title heading={3} className='!text-gray-800'>{systemName}</Title>
             </div>
 
-            <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+            <Card className="border-0 !rounded-2xl overflow-hidden">
               <div className="flex justify-center pt-6 pb-2">
                 <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('密码重置确认')}</Title>
               </div>

web/src/components/auth/PasswordResetForm.js

@@ -109,7 +109,7 @@ const PasswordResetForm = () => {
               <Title heading={3} className='!text-gray-800'>{systemName}</Title>
             </div>
 
-            <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+            <Card className="border-0 !rounded-2xl overflow-hidden">
               <div className="flex justify-center pt-6 pb-2">
                 <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('密码重置')}</Title>
               </div>

web/src/components/auth/RegisterForm.js

@@ -310,7 +310,7 @@ const RegisterForm = () => {
             <Title heading={3} className='!text-gray-800'>{systemName}</Title>
           </div>
 
-          <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+          <Card className="border-0 !rounded-2xl overflow-hidden">
             <div className="flex justify-center pt-6 pb-2">
               <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('注 册')}</Title>
             </div>
@@ -417,7 +417,7 @@ const RegisterForm = () => {
             <Title heading={3} className='!text-gray-800'>{systemName}</Title>
           </div>
 
-          <Card className="shadow-xl border-0 !rounded-2xl overflow-hidden">
+          <Card className="border-0 !rounded-2xl overflow-hidden">
             <div className="flex justify-center pt-6 pb-2">
               <Title heading={3} className="text-gray-800 dark:text-gray-200">{t('注 册')}</Title>
             </div>