♻️ refactor: HeaderBar into modular, maintainable components & polish responsive UI

Summary
• Extracted `LogoSection`, `NavLinks`, `UserArea`, and `ActionButtons` from `HeaderBar.js`, reducing complexity and improving readability.
• Removed unused state, handlers, and redundant imports from `HeaderBar.js`.
• Simplified mobile/desktop logic:
  – Menu icon now shows only on mobile `/console` routes.
  – Logo, system name, and mode tags appear on all desktop screens and on mobile non-console pages.
• Reworked skeleton loaders:
  – Narrower width on mobile (`40 px`) and clearer spacing (`p-1`).
• Added global `.scrollbar-hide` utility in `index.css` to enable scrollable areas without visible scrollbars.
• Ensured nav bar is horizontally scrollable across all breakpoints.
• Cleaned up language-switch, New Year, and notice handlers; consolidated side effects.
• Updated imports and internal calls after component extraction.
• Passed required props to new sub-components and removed obsolete ones.
• Confirmed zero linter warnings after refactor.

Why
Breaking the monolithic header into focused components makes future updates simpler, facilitates isolation testing, and aligns with the existing component architecture under `components/`. The UI tweaks provide a better mobile experience and consistent styling across devices.

Notes
No backend changes required. All routes and contexts remain untouched.

web/src/components/settings/personal/components/UserInfoHeader.js

@@ -54,7 +54,7 @@ const UserInfoHeader = ({ t, userState }) => {
               {getAvatarText()}
               {getAvatarText()}
             </Avatar>
             </Avatar>
             <div className="flex-1 min-w-0">
             <div className="flex-1 min-w-0">
-              <div className="text-base text-3xl font-semibold truncate text-gray-800 dark:text-gray-100">
+              <div className="text-base !text-3xl font-semibold truncate text-gray-800 dark:text-gray-100">
                 {getUsername()}
                 {getUsername()}
               </div>
               </div>
               <div className="mt-1 flex flex-wrap gap-1 sm:gap-2">
               <div className="mt-1 flex flex-wrap gap-1 sm:gap-2">

web/src/components/topup/RechargeCard.jsx

@@ -236,17 +236,14 @@ const RechargeCard = ({
                     </div>
                     </div>
                   </div>
                   </div>
                 )}
                 )}
-
               </div>
               </div>
             ) : (
             ) : (
-              <div className='py-8'>
               <Banner
               <Banner
                 type='warning'
                 type='warning'
                 description={t('管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。')}
                 description={t('管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。')}
                 className='!rounded-xl'
                 className='!rounded-xl'
                 closeIcon={null}
                 closeIcon={null}
               />
               />
-              </div>
             )}
             )}
           </div>
           </div>
         </TabPane>
         </TabPane>

web/src/index.css

@@ -375,6 +375,21 @@ code {
 }
 }
 
 
 /* ==================== 滚动条样式统一管理 ==================== */
 /* ==================== 滚动条样式统一管理 ==================== */
+/* 通用隐藏滚动条工具类 */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  /* IE and Edge */
+  scrollbar-width: none;
+  /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+  /* Chrome, Safari, Opera */
+}
+
 /* 表格滚动条样式 */
 /* 表格滚动条样式 */
 .semi-table-body::-webkit-scrollbar {
 .semi-table-body::-webkit-scrollbar {
   width: 6px;
   width: 6px;