🎨 chore(web): apply ESLint and Prettier auto-fixes (baseline)

- Ran: bun run eslint:fix && bun run lint:fix
- Inserted AGPL license header via eslint-plugin-header
- Enforced no-multiple-empty-lines and other lint rules
- Formatted code using Prettier v3 (@so1ve/prettier-config)
- No functional changes; formatting-only baseline across JS/JSX files

web/src/components/layout/Footer.jsx

@@ -40,85 +40,191 @@ const FooterBar = () => {
 
   const currentYear = new Date().getFullYear();
 
-  const customFooter = useMemo(() => (
-    <footer className="relative h-auto py-16 px-6 md:px-24 w-full flex flex-col items-center justify-between overflow-hidden">
-      <div className="absolute hidden md:block top-[204px] left-[-100px] w-[151px] h-[151px] rounded-full bg-[#FFD166]"></div>
-      <div className="absolute md:hidden bottom-[20px] left-[-50px] w-[80px] h-[80px] rounded-full bg-[#FFD166] opacity-60"></div>
+  const customFooter = useMemo(
+    () => (
+      <footer className='relative h-auto py-16 px-6 md:px-24 w-full flex flex-col items-center justify-between overflow-hidden'>
+        <div className='absolute hidden md:block top-[204px] left-[-100px] w-[151px] h-[151px] rounded-full bg-[#FFD166]'></div>
+        <div className='absolute md:hidden bottom-[20px] left-[-50px] w-[80px] h-[80px] rounded-full bg-[#FFD166] opacity-60'></div>
 
-      {isDemoSiteMode && (
-        <div className="flex flex-col md:flex-row justify-between w-full max-w-[1110px] mb-10 gap-8">
-          <div className="flex-shrink-0">
-            <img
-              src={logo}
-              alt={systemName}
-              className="w-16 h-16 rounded-full bg-gray-800 p-1.5 object-contain"
-            />
-          </div>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 w-full">
-            <div className="text-left">
-              <p className="!text-semi-color-text-0 font-semibold mb-5">{t('关于我们')}</p>
-              <div className="flex flex-col gap-4">
-                <a href="https://docs.newapi.pro/wiki/project-introduction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('关于项目')}</a>
-                <a href="https://docs.newapi.pro/support/community-interaction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('联系我们')}</a>
-                <a href="https://docs.newapi.pro/wiki/features-introduction/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('功能特性')}</a>
-              </div>
+        {isDemoSiteMode && (
+          <div className='flex flex-col md:flex-row justify-between w-full max-w-[1110px] mb-10 gap-8'>
+            <div className='flex-shrink-0'>
+              <img
+                src={logo}
+                alt={systemName}
+                className='w-16 h-16 rounded-full bg-gray-800 p-1.5 object-contain'
+              />
             </div>
 
-            <div className="text-left">
-              <p className="!text-semi-color-text-0 font-semibold mb-5">{t('文档')}</p>
-              <div className="flex flex-col gap-4">
-                <a href="https://docs.newapi.pro/getting-started/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('快速开始')}</a>
-                <a href="https://docs.newapi.pro/installation/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('安装指南')}</a>
-                <a href="https://docs.newapi.pro/api/" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">{t('API 文档')}</a>
+            <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 w-full'>
+              <div className='text-left'>
+                <p className='!text-semi-color-text-0 font-semibold mb-5'>
+                  {t('关于我们')}
+                </p>
+                <div className='flex flex-col gap-4'>
+                  <a
+                    href='https://docs.newapi.pro/wiki/project-introduction/'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='!text-semi-color-text-1'
+                  >
+                    {t('关于项目')}
+                  </a>
+                  <a
+                    href='https://docs.newapi.pro/support/community-interaction/'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='!text-semi-color-text-1'
+                  >
+                    {t('联系我们')}
+                  </a>
+                  <a
+                    href='https://docs.newapi.pro/wiki/features-introduction/'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='!text-semi-color-text-1'
+                  >
+                    {t('功能特性')}
+                  </a>
+                </div>
               </div>
-            </div>
 
-            <div className="text-left">
-              <p className="!text-semi-color-text-0 font-semibold mb-5">{t('相关项目')}</p>
-              <div className="flex flex-col gap-4">
-                <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">One API</a>
-                <a href="https://github.com/novicezk/midjourney-proxy" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">Midjourney-Proxy</a>
-                <a href="https://github.com/Deeptrain-Community/chatnio" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">chatnio</a>
-                <a href="https://github.com/Calcium-Ion/neko-api-key-tool" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">neko-api-key-tool</a>
+              <div className='text-left'>
+                <p className='!text-semi-color-text-0 font-semibold mb-5'>
+                  {t('文档')}
+                </p>
+                <div className='flex flex-col gap-4'>
+                  <a
+                    href='https://docs.newapi.pro/getting-started/'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='!text-semi-color-text-1'
+                  >
+                    {t('快速开始')}
+                  </a>
+                  <a
+                    href='https://docs.newapi.pro/installation/'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='!text-semi-color-text-1'
+                  >
+                    {t('安装指南')}
+                  </a>
+                  <a
+                    href='https://docs.newapi.pro/api/'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='!text-semi-color-text-1'
+                  >
+                    {t('API 文档')}
+                  </a>
+                </div>
               </div>
-            </div>
 
-            <div className="text-left">
-              <p className="!text-semi-color-text-0 font-semibold mb-5">{t('基于New API的项目')}</p>
-              <div className="flex flex-col gap-4">
-                <a href="https://github.com/Calcium-Ion/new-api-horizon" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">new-api-horizon</a>
-                {/* <a href="https://github.com/VoAPI/VoAPI" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">VoAPI</a> */}
+              <div className='text-left'>
+                <p className='!text-semi-color-text-0 font-semibold mb-5'>
+                  {t('相关项目')}
+                </p>
+                <div className='flex flex-col gap-4'>
+                  <a
+                    href='https://github.com/songquanpeng/one-api'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='!text-semi-color-text-1'
+                  >
+                    One API
+                  </a>
+                  <a
+                    href='https://github.com/novicezk/midjourney-proxy'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='!text-semi-color-text-1'
+                  >
+                    Midjourney-Proxy
+                  </a>
+                  <a
+                    href='https://github.com/Deeptrain-Community/chatnio'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='!text-semi-color-text-1'
+                  >
+                    chatnio
+                  </a>
+                  <a
+                    href='https://github.com/Calcium-Ion/neko-api-key-tool'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='!text-semi-color-text-1'
+                  >
+                    neko-api-key-tool
+                  </a>
+                </div>
+              </div>
+
+              <div className='text-left'>
+                <p className='!text-semi-color-text-0 font-semibold mb-5'>
+                  {t('基于New API的项目')}
+                </p>
+                <div className='flex flex-col gap-4'>
+                  <a
+                    href='https://github.com/Calcium-Ion/new-api-horizon'
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className='!text-semi-color-text-1'
+                  >
+                    new-api-horizon
+                  </a>
+                  {/* <a href="https://github.com/VoAPI/VoAPI" target="_blank" rel="noopener noreferrer" className="!text-semi-color-text-1">VoAPI</a> */}
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      )}
+        )}
 
-      <div className="flex flex-col md:flex-row items-center justify-between w-full max-w-[1110px] gap-6">
-        <div className="flex flex-wrap items-center gap-2">
-          <Typography.Text className="text-sm !text-semi-color-text-1">© {currentYear} {systemName}. {t('版权所有')}</Typography.Text>
-        </div>
+        <div className='flex flex-col md:flex-row items-center justify-between w-full max-w-[1110px] gap-6'>
+          <div className='flex flex-wrap items-center gap-2'>
+            <Typography.Text className='text-sm !text-semi-color-text-1'>
+              © {currentYear} {systemName}. {t('版权所有')}
+            </Typography.Text>
+          </div>
 
-        <div className="text-sm">
-          <span className="!text-semi-color-text-1">{t('设计与开发由')} </span>
-          <a href="https://github.com/QuantumNous/new-api" target="_blank" rel="noopener noreferrer" className="!text-semi-color-primary font-medium">New API</a>
-          <span className="!text-semi-color-text-1"> & </span>
-          <a href="https://github.com/songquanpeng/one-api" target="_blank" rel="noopener noreferrer" className="!text-semi-color-primary font-medium">One API</a>
+          <div className='text-sm'>
+            <span className='!text-semi-color-text-1'>
+              {t('设计与开发由')}{' '}
+            </span>
+            <a
+              href='https://github.com/QuantumNous/new-api'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='!text-semi-color-primary font-medium'
+            >
+              New API
+            </a>
+            <span className='!text-semi-color-text-1'> & </span>
+            <a
+              href='https://github.com/songquanpeng/one-api'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='!text-semi-color-primary font-medium'
+            >
+              One API
+            </a>
+          </div>
         </div>
-      </div>
-    </footer>
-  ), [logo, systemName, t, currentYear, isDemoSiteMode]);
+      </footer>
+    ),
+    [logo, systemName, t, currentYear, isDemoSiteMode],
+  );
 
   useEffect(() => {
     loadFooter();
   }, []);
 
   return (
-    <div className="w-full">
+    <div className='w-full'>
       {footer ? (
         <div
-          className="custom-footer"
+          className='custom-footer'
           dangerouslySetInnerHTML={{ __html: footer }}
         ></div>
       ) : (

web/src/components/layout/HeaderBar/ActionButtons.jsx

@@ -41,7 +41,7 @@ const ActionButtons = ({
   t,
 }) => {
   return (
-    <div className="flex items-center gap-2 md:gap-3">
+    <div className='flex items-center gap-2 md:gap-3'>
       <NewYearButton isNewYear={isNewYear} />
 
       <NotificationButton
@@ -50,11 +50,7 @@ const ActionButtons = ({
         t={t}
       />
 
-      <ThemeToggle
-        theme={theme}
-        onThemeToggle={onThemeToggle}
-        t={t}
-      />
+      <ThemeToggle theme={theme} onThemeToggle={onThemeToggle} t={t} />
 
       <LanguageSelector
         currentLang={currentLang}

web/src/components/layout/HeaderBar/HeaderLogo.jsx

@@ -38,35 +38,35 @@ const HeaderLogo = ({
   }
 
   return (
-    <Link to="/" className="group flex items-center gap-2">
-      <div className="relative w-8 h-8 md:w-8 md:h-8">
-        <SkeletonWrapper
-          loading={isLoading || !logoLoaded}
-          type="image"
-        />
+    <Link to='/' className='group flex items-center gap-2'>
+      <div className='relative w-8 h-8 md:w-8 md:h-8'>
+        <SkeletonWrapper loading={isLoading || !logoLoaded} type='image' />
         <img
           src={logo}
-          alt="logo"
-          className={`absolute inset-0 w-full h-full transition-all duration-200 group-hover:scale-110 rounded-full ${(!isLoading && logoLoaded) ? 'opacity-100' : 'opacity-0'}`}
+          alt='logo'
+          className={`absolute inset-0 w-full h-full transition-all duration-200 group-hover:scale-110 rounded-full ${!isLoading && logoLoaded ? 'opacity-100' : 'opacity-0'}`}
         />
       </div>
-      <div className="hidden md:flex items-center gap-2">
-        <div className="flex items-center gap-2">
+      <div className='hidden md:flex items-center gap-2'>
+        <div className='flex items-center gap-2'>
           <SkeletonWrapper
             loading={isLoading}
-            type="title"
+            type='title'
             width={120}
             height={24}
           >
-            <Typography.Title heading={4} className="!text-lg !font-semibold !mb-0">
+            <Typography.Title
+              heading={4}
+              className='!text-lg !font-semibold !mb-0'
+            >
               {systemName}
             </Typography.Title>
           </SkeletonWrapper>
           {(isSelfUseMode || isDemoSiteMode) && !isLoading && (
             <Tag
               color={isSelfUseMode ? 'purple' : 'blue'}
-              className="text-xs px-1.5 py-0.5 rounded whitespace-nowrap shadow-sm"
-              size="small"
+              className='text-xs px-1.5 py-0.5 rounded whitespace-nowrap shadow-sm'
+              size='small'
               shape='circle'
             >
               {isSelfUseMode ? t('自用模式') : t('演示站点')}

web/src/components/layout/HeaderBar/LanguageSelector.jsx

@@ -25,21 +25,21 @@ import { CN, GB } from 'country-flag-icons/react/3x2';
 const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
   return (
     <Dropdown
-      position="bottomRight"
+      position='bottomRight'
       render={
-        <Dropdown.Menu className="!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600">
+        <Dropdown.Menu className='!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600'>
           <Dropdown.Item
             onClick={() => 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'}`}
           >
-            <CN title="中文" className="!w-5 !h-auto" />
+            <CN title='中文' className='!w-5 !h-auto' />
             <span>中文</span>
           </Dropdown.Item>
           <Dropdown.Item
             onClick={() => 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'}`}
           >
-            <GB title="English" className="!w-5 !h-auto" />
+            <GB title='English' className='!w-5 !h-auto' />
             <span>English</span>
           </Dropdown.Item>
         </Dropdown.Menu>
@@ -48,9 +48,9 @@ const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
       <Button
         icon={<Languages size={18} />}
         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"
+        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'
       />
     </Dropdown>
   );

web/src/components/layout/HeaderBar/MobileMenuButton.jsx

@@ -36,13 +36,19 @@ const MobileMenuButton = ({
   return (
     <Button
       icon={
-        (isMobile ? drawerOpen : collapsed) ? <IconClose className="text-lg" /> : <IconMenu className="text-lg" />
+        (isMobile ? drawerOpen : collapsed) ? (
+          <IconClose className='text-lg' />
+        ) : (
+          <IconMenu className='text-lg' />
+        )
+      }
+      aria-label={
+        (isMobile ? drawerOpen : collapsed) ? t('关闭侧边栏') : t('打开侧边栏')
       }
-      aria-label={(isMobile ? drawerOpen : collapsed) ? t('关闭侧边栏') : t('打开侧边栏')}
       onClick={onToggle}
-      theme="borderless"
-      type="tertiary"
-      className="!p-2 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700"
+      theme='borderless'
+      type='tertiary'
+      className='!p-2 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700'
     />
   );
 };

web/src/components/layout/HeaderBar/Navigation.jsx

@@ -21,21 +21,16 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import SkeletonWrapper from './SkeletonWrapper';
 
-const Navigation = ({
-  mainNavLinks,
-  isMobile,
-  isLoading,
-  userState
-}) => {
+const Navigation = ({ mainNavLinks, isMobile, isLoading, userState }) => {
   const renderNavLinks = () => {
-    const baseClasses = 'flex-shrink-0 flex items-center gap-1 font-semibold rounded-md transition-all duration-200 ease-in-out';
+    const baseClasses =
+      'flex-shrink-0 flex items-center gap-1 font-semibold rounded-md transition-all duration-200 ease-in-out';
     const hoverClasses = 'hover:text-semi-color-primary';
     const spacingClasses = isMobile ? 'p-1' : 'p-2';
 
     const commonLinkClasses = `${baseClasses} ${spacingClasses} ${hoverClasses}`;
 
     return mainNavLinks.map((link) => {
-
       const linkContent = <span>{link.text}</span>;
 
       if (link.isExternal) {
@@ -58,11 +53,7 @@ const Navigation = ({
       }
 
       return (
-        <Link
-          key={link.itemKey}
-          to={targetPath}
-          className={commonLinkClasses}
-        >
+        <Link key={link.itemKey} to={targetPath} className={commonLinkClasses}>
           {linkContent}
         </Link>
       );
@@ -70,10 +61,10 @@ const Navigation = ({
   };
 
   return (
-    <nav className="flex flex-1 items-center gap-1 lg:gap-2 mx-2 md:mx-4 overflow-x-auto whitespace-nowrap scrollbar-hide">
+    <nav className='flex flex-1 items-center gap-1 lg:gap-2 mx-2 md:mx-4 overflow-x-auto whitespace-nowrap scrollbar-hide'>
       <SkeletonWrapper
         loading={isLoading}
-        type="navigation"
+        type='navigation'
         count={4}
         width={60}
         height={16}

web/src/components/layout/HeaderBar/NewYearButton.jsx

@@ -36,21 +36,24 @@ const NewYearButton = ({ isNewYear }) => {
 
   return (
     <Dropdown
-      position="bottomRight"
+      position='bottomRight'
       render={
-        <Dropdown.Menu className="!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600">
-          <Dropdown.Item onClick={handleNewYearClick} className="!text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-gray-600">
+        <Dropdown.Menu className='!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600'>
+          <Dropdown.Item
+            onClick={handleNewYearClick}
+            className='!text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-gray-600'
+          >
             Happy New Year!!! 🎉
           </Dropdown.Item>
         </Dropdown.Menu>
       }
     >
       <Button
-        theme="borderless"
-        type="tertiary"
-        icon={<span className="text-xl">🎉</span>}
-        aria-label="New Year"
-        className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 rounded-full"
+        theme='borderless'
+        type='tertiary'
+        icon={<span className='text-xl'>🎉</span>}
+        aria-label='New Year'
+        className='!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 rounded-full'
       />
     </Dropdown>
   );

web/src/components/layout/HeaderBar/NotificationButton.jsx

@@ -26,14 +26,15 @@ const NotificationButton = ({ unreadCount, onNoticeOpen, t }) => {
     icon: <Bell size={18} />,
     'aria-label': t('系统公告'),
     onClick: onNoticeOpen,
-    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",
+    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',
   };
 
   if (unreadCount > 0) {
     return (
-      <Badge count={unreadCount} type="danger" overflowCount={99}>
+      <Badge count={unreadCount} type='danger' overflowCount={99}>
         <Button {...buttonProps} />
       </Badge>
     );

web/src/components/layout/HeaderBar/SkeletonWrapper.jsx

@@ -62,13 +62,17 @@ const SkeletonWrapper = ({
   // 用户区域骨架屏 (头像 + 文本)
   const renderUserAreaSkeleton = () => {
     return (
-      <div className={`flex items-center p-1 rounded-full bg-semi-color-fill-0 dark:bg-semi-color-fill-1 ${className}`}>
+      <div
+        className={`flex items-center p-1 rounded-full bg-semi-color-fill-0 dark:bg-semi-color-fill-1 ${className}`}
+      >
         <Skeleton
           loading={true}
           active
-          placeholder={<Skeleton.Avatar active size="extra-small" className="shadow-sm" />}
+          placeholder={
+            <Skeleton.Avatar active size='extra-small' className='shadow-sm' />
+          }
         />
-        <div className="ml-1.5 mr-1">
+        <div className='ml-1.5 mr-1'>
           <Skeleton
             loading={true}
             active
@@ -107,12 +111,7 @@ const SkeletonWrapper = ({
       <Skeleton
         loading={true}
         active
-        placeholder={
-          <Skeleton.Title
-            active
-            style={{ width, height: 24 }}
-          />
-        }
+        placeholder={<Skeleton.Title active style={{ width, height: 24 }} />}
       />
     );
   };
@@ -124,12 +123,7 @@ const SkeletonWrapper = ({
         <Skeleton
           loading={true}
           active
-          placeholder={
-            <Skeleton.Title
-              active
-              style={{ width, height }}
-            />
-          }
+          placeholder={<Skeleton.Title active style={{ width, height }} />}
         />
       </div>
     );

web/src/components/layout/HeaderBar/ThemeToggle.jsx

@@ -25,29 +25,32 @@ import { useActualTheme } from '../../../context/Theme';
 const ThemeToggle = ({ theme, onThemeToggle, t }) => {
   const actualTheme = useActualTheme();
 
-  const themeOptions = useMemo(() => ([
-    {
-      key: 'light',
-      icon: <Sun size={18} />,
-      buttonIcon: <Sun size={18} />,
-      label: t('浅色模式'),
-      description: t('始终使用浅色主题')
-    },
-    {
-      key: 'dark',
-      icon: <Moon size={18} />,
-      buttonIcon: <Moon size={18} />,
-      label: t('深色模式'),
-      description: t('始终使用深色主题')
-    },
-    {
-      key: 'auto',
-      icon: <Monitor size={18} />,
-      buttonIcon: <Monitor size={18} />,
-      label: t('自动模式'),
-      description: t('跟随系统主题设置')
-    }
-  ]), [t]);
+  const themeOptions = useMemo(
+    () => [
+      {
+        key: 'light',
+        icon: <Sun size={18} />,
+        buttonIcon: <Sun size={18} />,
+        label: t('浅色模式'),
+        description: t('始终使用浅色主题'),
+      },
+      {
+        key: 'dark',
+        icon: <Moon size={18} />,
+        buttonIcon: <Moon size={18} />,
+        label: t('深色模式'),
+        description: t('始终使用深色主题'),
+      },
+      {
+        key: 'auto',
+        icon: <Monitor size={18} />,
+        buttonIcon: <Monitor size={18} />,
+        label: t('自动模式'),
+        description: t('跟随系统主题设置'),
+      },
+    ],
+    [t],
+  );
 
   const getItemClassName = (isSelected) =>
     isSelected
@@ -55,13 +58,13 @@ const ThemeToggle = ({ theme, onThemeToggle, t }) => {
       : 'hover:!bg-semi-color-fill-1';
 
   const currentButtonIcon = useMemo(() => {
-    const currentOption = themeOptions.find(option => option.key === theme);
+    const currentOption = themeOptions.find((option) => option.key === theme);
     return currentOption?.buttonIcon || themeOptions[2].buttonIcon;
   }, [theme, themeOptions]);
 
   return (
     <Dropdown
-      position="bottomRight"
+      position='bottomRight'
       render={
         <Dropdown.Menu>
           {themeOptions.map((option) => (
@@ -71,9 +74,9 @@ const ThemeToggle = ({ theme, onThemeToggle, t }) => {
               onClick={() => onThemeToggle(option.key)}
               className={getItemClassName(theme === option.key)}
             >
-              <div className="flex flex-col">
+              <div className='flex flex-col'>
                 <span>{option.label}</span>
-                <span className="text-xs text-semi-color-text-2">
+                <span className='text-xs text-semi-color-text-2'>
                   {option.description}
                 </span>
               </div>
@@ -83,8 +86,9 @@ const ThemeToggle = ({ theme, onThemeToggle, t }) => {
           {theme === 'auto' && (
             <>
               <Dropdown.Divider />
-              <div className="px-3 py-2 text-xs text-semi-color-text-2">
-                {t('当前跟随系统')}：{actualTheme === 'dark' ? t('深色') : t('浅色')}
+              <div className='px-3 py-2 text-xs text-semi-color-text-2'>
+                {t('当前跟随系统')}：
+                {actualTheme === 'dark' ? t('深色') : t('浅色')}
               </div>
             </>
           )}
@@ -94,9 +98,9 @@ const ThemeToggle = ({ theme, onThemeToggle, t }) => {
       <Button
         icon={currentButtonIcon}
         aria-label={t('切换主题')}
-        theme="borderless"
-        type="tertiary"
-        className="!p-1.5 !text-current focus:!bg-semi-color-fill-1 !rounded-full !bg-semi-color-fill-0 hover:!bg-semi-color-fill-1"
+        theme='borderless'
+        type='tertiary'
+        className='!p-1.5 !text-current focus:!bg-semi-color-fill-1 !rounded-full !bg-semi-color-fill-0 hover:!bg-semi-color-fill-1'
       />
     </Dropdown>
   );

web/src/components/layout/HeaderBar/UserArea.jsx

@@ -19,12 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import { Link } from 'react-router-dom';
-import {
-  Avatar,
-  Button,
-  Dropdown,
-  Typography,
-} from '@douyinfe/semi-ui';
+import { Avatar, Button, Dropdown, Typography } from '@douyinfe/semi-ui';
 import { ChevronDown } from 'lucide-react';
 import {
   IconExit,
@@ -48,7 +43,7 @@ const UserArea = ({
     return (
       <SkeletonWrapper
         loading={true}
-        type="userArea"
+        type='userArea'
         width={50}
         isMobile={isMobile}
       />
@@ -58,17 +53,20 @@ const UserArea = ({
   if (userState.user) {
     return (
       <Dropdown
-        position="bottomRight"
+        position='bottomRight'
         render={
-          <Dropdown.Menu className="!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600">
+          <Dropdown.Menu className='!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600'>
             <Dropdown.Item
               onClick={() => {
                 navigate('/console/personal');
               }}
-              className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white"
+              className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
             >
-              <div className="flex items-center gap-2">
-                <IconUserSetting size="small" className="text-gray-500 dark:text-gray-400" />
+              <div className='flex items-center gap-2'>
+                <IconUserSetting
+                  size='small'
+                  className='text-gray-500 dark:text-gray-400'
+                />
                 <span>{t('个人设置')}</span>
               </div>
             </Dropdown.Item>
@@ -76,10 +74,13 @@ const UserArea = ({
               onClick={() => {
                 navigate('/console/token');
               }}
-              className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white"
+              className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
             >
-              <div className="flex items-center gap-2">
-                <IconKey size="small" className="text-gray-500 dark:text-gray-400" />
+              <div className='flex items-center gap-2'>
+                <IconKey
+                  size='small'
+                  className='text-gray-500 dark:text-gray-400'
+                />
                 <span>{t('令牌管理')}</span>
               </div>
             </Dropdown.Item>
@@ -87,16 +88,25 @@ const UserArea = ({
               onClick={() => {
                 navigate('/console/topup');
               }}
-              className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white"
+              className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
             >
-              <div className="flex items-center gap-2">
-                <IconCreditCard size="small" className="text-gray-500 dark:text-gray-400" />
+              <div className='flex items-center gap-2'>
+                <IconCreditCard
+                  size='small'
+                  className='text-gray-500 dark:text-gray-400'
+                />
                 <span>{t('钱包管理')}</span>
               </div>
             </Dropdown.Item>
-            <Dropdown.Item onClick={logout} className="!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-red-500 dark:hover:!text-white">
-              <div className="flex items-center gap-2">
-                <IconExit size="small" className="text-gray-500 dark:text-gray-400" />
+            <Dropdown.Item
+              onClick={logout}
+              className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-red-500 dark:hover:!text-white'
+            >
+              <div className='flex items-center gap-2'>
+                <IconExit
+                  size='small'
+                  className='text-gray-500 dark:text-gray-400'
+                />
                 <span>{t('退出')}</span>
               </div>
             </Dropdown.Item>
@@ -104,74 +114,76 @@ const UserArea = ({
         }
       >
         <Button
-          theme="borderless"
-          type="tertiary"
-          className="flex items-center gap-1.5 !p-1 !rounded-full hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-700 !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2"
+          theme='borderless'
+          type='tertiary'
+          className='flex items-center gap-1.5 !p-1 !rounded-full hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-700 !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2'
         >
           <Avatar
-            size="extra-small"
+            size='extra-small'
             color={stringToColor(userState.user.username)}
-            className="mr-1"
+            className='mr-1'
           >
             {userState.user.username[0].toUpperCase()}
           </Avatar>
-          <span className="hidden md:inline">
-            <Typography.Text className="!text-xs !font-medium !text-semi-color-text-1 dark:!text-gray-300 mr-1">
+          <span className='hidden md:inline'>
+            <Typography.Text className='!text-xs !font-medium !text-semi-color-text-1 dark:!text-gray-300 mr-1'>
               {userState.user.username}
             </Typography.Text>
           </span>
-          <ChevronDown size={14} className="text-xs text-semi-color-text-2 dark:text-gray-400" />
+          <ChevronDown
+            size={14}
+            className='text-xs text-semi-color-text-2 dark:text-gray-400'
+          />
         </Button>
       </Dropdown>
     );
   } else {
     const showRegisterButton = !isSelfUseMode;
 
-    const commonSizingAndLayoutClass = "flex items-center justify-center !py-[10px] !px-1.5";
+    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";
+    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";
+    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";
+        loginButtonClasses += ' !rounded-full';
       } else {
-        loginButtonClasses += " !rounded-l-full !rounded-r-none";
+        loginButtonClasses += ' !rounded-l-full !rounded-r-none';
       }
-      registerButtonClasses += " !rounded-r-full !rounded-l-none";
+      registerButtonClasses += ' !rounded-r-full !rounded-l-none';
     } else {
-      loginButtonClasses += " !rounded-full";
+      loginButtonClasses += ' !rounded-full';
     }
 
     return (
-      <div className="flex items-center">
-        <Link to="/login" className="flex">
+      <div className='flex items-center'>
+        <Link to='/login' className='flex'>
           <Button
-            theme="borderless"
-            type="tertiary"
+            theme='borderless'
+            type='tertiary'
             className={loginButtonClasses}
           >
-            <span className={loginButtonTextSpanClass}>
-              {t('登录')}
-            </span>
+            <span className={loginButtonTextSpanClass}>{t('登录')}</span>
           </Button>
         </Link>
         {showRegisterButton && (
-          <div className="hidden md:block">
-            <Link to="/register" className="flex -ml-px">
+          <div className='hidden md:block'>
+            <Link to='/register' className='flex -ml-px'>
               <Button
-                theme="solid"
-                type="primary"
+                theme='solid'
+                type='primary'
                 className={registerButtonClasses}
               >
-                <span className={registerButtonTextSpanClass}>
-                  {t('注册')}
-                </span>
+                <span className={registerButtonTextSpanClass}>{t('注册')}</span>
               </Button>
             </Link>
           </div>

web/src/components/layout/HeaderBar/index.jsx

@@ -63,7 +63,7 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
   const { mainNavLinks } = useNavigation(t, docsLink);
 
   return (
-    <header className="text-semi-color-text-0 sticky top-0 z-50 transition-colors duration-300 bg-white/75 dark:bg-zinc-900/75 backdrop-blur-lg">
+    <header className='text-semi-color-text-0 sticky top-0 z-50 transition-colors duration-300 bg-white/75 dark:bg-zinc-900/75 backdrop-blur-lg'>
       <NoticeModal
         visible={noticeVisible}
         onClose={handleNoticeClose}
@@ -72,9 +72,9 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
         unreadKeys={getUnreadKeys()}
       />
 
-      <div className="w-full px-2">
-        <div className="flex items-center justify-between h-16">
-          <div className="flex items-center">
+      <div className='w-full px-2'>
+        <div className='flex items-center justify-between h-16'>
+          <div className='flex items-center'>
             <MobileMenuButton
               isConsoleRoute={isConsoleRoute}
               isMobile={isMobile}

web/src/components/layout/NoticeModal.jsx

@@ -18,15 +18,31 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState, useContext, useMemo } from 'react';
-import { Button, Modal, Empty, Tabs, TabPane, Timeline } from '@douyinfe/semi-ui';
+import {
+  Button,
+  Modal,
+  Empty,
+  Tabs,
+  TabPane,
+  Timeline,
+} from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
 import { API, showError, getRelativeTime } from '../../helpers';
 import { marked } from 'marked';
-import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations';
+import {
+  IllustrationNoContent,
+  IllustrationNoContentDark,
+} from '@douyinfe/semi-illustrations';
 import { StatusContext } from '../../context/Status';
 import { Bell, Megaphone } from 'lucide-react';
 
-const NoticeModal = ({ visible, onClose, isMobile, defaultTab = 'inApp', unreadKeys = [] }) => {
+const NoticeModal = ({
+  visible,
+  onClose,
+  isMobile,
+  defaultTab = 'inApp',
+  unreadKeys = [],
+}) => {
   const { t } = useTranslation();
   const [noticeContent, setNoticeContent] = useState('');
   const [loading, setLoading] = useState(false);
@@ -38,23 +54,25 @@ const NoticeModal = ({ visible, onClose, isMobile, defaultTab = 'inApp', unreadK
 
   const unreadSet = useMemo(() => new Set(unreadKeys), [unreadKeys]);
 
-  const getKeyForItem = (item) => `${item?.publishDate || ''}-${(item?.content || '').slice(0, 30)}`;
+  const getKeyForItem = (item) =>
+    `${item?.publishDate || ''}-${(item?.content || '').slice(0, 30)}`;
 
   const processedAnnouncements = useMemo(() => {
-    return (announcements || []).slice(0, 20).map(item => {
+    return (announcements || []).slice(0, 20).map((item) => {
       const pubDate = item?.publishDate ? new Date(item.publishDate) : null;
-      const absoluteTime = pubDate && !isNaN(pubDate.getTime())
-        ? `${pubDate.getFullYear()}-${String(pubDate.getMonth() + 1).padStart(2, '0')}-${String(pubDate.getDate()).padStart(2, '0')} ${String(pubDate.getHours()).padStart(2, '0')}:${String(pubDate.getMinutes()).padStart(2, '0')}`
-        : (item?.publishDate || '');
-      return ({
+      const absoluteTime =
+        pubDate && !isNaN(pubDate.getTime())
+          ? `${pubDate.getFullYear()}-${String(pubDate.getMonth() + 1).padStart(2, '0')}-${String(pubDate.getDate()).padStart(2, '0')} ${String(pubDate.getHours()).padStart(2, '0')}:${String(pubDate.getMinutes()).padStart(2, '0')}`
+          : item?.publishDate || '';
+      return {
         key: getKeyForItem(item),
         type: item.type || 'default',
         time: absoluteTime,
         content: item.content,
         extra: item.extra,
         relative: getRelativeTime(item.publishDate),
-        isUnread: unreadSet.has(getKeyForItem(item))
-      });
+        isUnread: unreadSet.has(getKeyForItem(item)),
+      };
     });
   }, [announcements, unreadSet]);
 
@@ -100,15 +118,23 @@ const NoticeModal = ({ visible, onClose, isMobile, defaultTab = 'inApp', unreadK
 
   const renderMarkdownNotice = () => {
     if (loading) {
-      return <div className="py-12"><Empty description={t('加载中...')} /></div>;
+      return (
+        <div className='py-12'>
+          <Empty description={t('加载中...')} />
+        </div>
+      );
     }
 
     if (!noticeContent) {
       return (
-        <div className="py-12">
+        <div className='py-12'>
           <Empty
-            image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
-            darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
+            image={
+              <IllustrationNoContent style={{ width: 150, height: 150 }} />
+            }
+            darkModeImage={
+              <IllustrationNoContentDark style={{ width: 150, height: 150 }} />
+            }
             description={t('暂无公告')}
           />
         </div>
@@ -118,7 +144,7 @@ const NoticeModal = ({ visible, onClose, isMobile, defaultTab = 'inApp', unreadK
     return (
       <div
         dangerouslySetInnerHTML={{ __html: noticeContent }}
-        className="notice-content-scroll max-h-[55vh] overflow-y-auto pr-2"
+        className='notice-content-scroll max-h-[55vh] overflow-y-auto pr-2'
       />
     );
   };
@@ -126,10 +152,14 @@ const NoticeModal = ({ visible, onClose, isMobile, defaultTab = 'inApp', unreadK
   const renderAnnouncementTimeline = () => {
     if (processedAnnouncements.length === 0) {
       return (
-        <div className="py-12">
+        <div className='py-12'>
           <Empty
-            image={<IllustrationNoContent style={{ width: 150, height: 150 }} />}
-            darkModeImage={<IllustrationNoContentDark style={{ width: 150, height: 150 }} />}
+            image={
+              <IllustrationNoContent style={{ width: 150, height: 150 }} />
+            }
+            darkModeImage={
+              <IllustrationNoContentDark style={{ width: 150, height: 150 }} />
+            }
             description={t('暂无系统公告')}
           />
         </div>
@@ -137,8 +167,8 @@ const NoticeModal = ({ visible, onClose, isMobile, defaultTab = 'inApp', unreadK
     }
 
     return (
-      <div className="max-h-[55vh] overflow-y-auto pr-2 card-content-scroll">
-        <Timeline mode="left">
+      <div className='max-h-[55vh] overflow-y-auto pr-2 card-content-scroll'>
+        <Timeline mode='left'>
           {processedAnnouncements.map((item, idx) => {
             const htmlContent = marked.parse(item.content || '');
             const htmlExtra = item.extra ? marked.parse(item.extra) : '';
@@ -147,12 +177,14 @@ const NoticeModal = ({ visible, onClose, isMobile, defaultTab = 'inApp', unreadK
                 key={idx}
                 type={item.type}
                 time={`${item.relative ? item.relative + ' ' : ''}${item.time}`}
-                extra={item.extra ? (
-                  <div
-                    className="text-xs text-gray-500"
-                    dangerouslySetInnerHTML={{ __html: htmlExtra }}
-                  />
-                ) : null}
+                extra={
+                  item.extra ? (
+                    <div
+                      className='text-xs text-gray-500'
+                      dangerouslySetInnerHTML={{ __html: htmlExtra }}
+                    />
+                  ) : null
+                }
                 className={item.isUnread ? '' : ''}
               >
                 <div>
@@ -179,26 +211,40 @@ const NoticeModal = ({ visible, onClose, isMobile, defaultTab = 'inApp', unreadK
   return (
     <Modal
       title={
-        <div className="flex items-center justify-between w-full">
+        <div className='flex items-center justify-between w-full'>
           <span>{t('系统公告')}</span>
-          <Tabs
-            activeKey={activeTab}
-            onChange={setActiveTab}
-            type='button'
-          >
-            <TabPane tab={<span className="flex items-center gap-1"><Bell size={14} /> {t('通知')}</span>} itemKey='inApp' />
-            <TabPane tab={<span className="flex items-center gap-1"><Megaphone size={14} /> {t('系统公告')}</span>} itemKey='system' />
+          <Tabs activeKey={activeTab} onChange={setActiveTab} type='button'>
+            <TabPane
+              tab={
+                <span className='flex items-center gap-1'>
+                  <Bell size={14} /> {t('通知')}
+                </span>
+              }
+              itemKey='inApp'
+            />
+            <TabPane
+              tab={
+                <span className='flex items-center gap-1'>
+                  <Megaphone size={14} /> {t('系统公告')}
+                </span>
+              }
+              itemKey='system'
+            />
           </Tabs>
         </div>
       }
       visible={visible}
       onCancel={onClose}
-      footer={(
-        <div className="flex justify-end">
-          <Button type='secondary' onClick={handleCloseTodayNotice}>{t('今日关闭')}</Button>
-          <Button type="primary" onClick={onClose}>{t('关闭公告')}</Button>
+      footer={
+        <div className='flex justify-end'>
+          <Button type='secondary' onClick={handleCloseTodayNotice}>
+            {t('今日关闭')}
+          </Button>
+          <Button type='primary' onClick={onClose}>
+            {t('关闭公告')}
+          </Button>
         </div>
-      )}
+      }
       size={isMobile ? 'full-width' : 'large'}
     >
       {renderBody()}
@@ -206,4 +252,4 @@ const NoticeModal = ({ visible, onClose, isMobile, defaultTab = 'inApp', unreadK
   );
 };
 
-export default NoticeModal; 
+export default NoticeModal;

web/src/components/layout/PageLayout.jsx

@@ -27,7 +27,13 @@ import React, { useContext, useEffect, useState } from 'react';
 import { useIsMobile } from '../../hooks/common/useIsMobile';
 import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed';
 import { useTranslation } from 'react-i18next';
-import { API, getLogo, getSystemName, showError, setStatusData } from '../../helpers';
+import {
+  API,
+  getLogo,
+  getSystemName,
+  showError,
+  setStatusData,
+} from '../../helpers';
 import { UserContext } from '../../context/User';
 import { StatusContext } from '../../context/Status';
 import { useLocation } from 'react-router-dom';
@@ -42,9 +48,12 @@ const PageLayout = () => {
   const { i18n } = useTranslation();
   const location = useLocation();
 
-  const shouldHideFooter = location.pathname.startsWith('/console') || location.pathname === '/pricing';
+  const shouldHideFooter =
+    location.pathname.startsWith('/console') ||
+    location.pathname === '/pricing';
 
-  const shouldInnerPadding = location.pathname.includes('/console') &&
+  const shouldInnerPadding =
+    location.pathname.includes('/console') &&
     !location.pathname.startsWith('/console/chat') &&
     location.pathname !== '/console/playground';
 
@@ -120,7 +129,10 @@ const PageLayout = () => {
           zIndex: 100,
         }}
       >
-        <HeaderBar onMobileMenuToggle={() => setDrawerOpen(prev => !prev)} drawerOpen={drawerOpen} />
+        <HeaderBar
+          onMobileMenuToggle={() => setDrawerOpen((prev) => !prev)}
+          drawerOpen={drawerOpen}
+        />
       </Header>
       <Layout
         style={{
@@ -142,12 +154,20 @@ const PageLayout = () => {
               width: 'var(--sidebar-current-width)',
             }}
           >
-            <SiderBar onNavigate={() => { if (isMobile) setDrawerOpen(false); }} />
+            <SiderBar
+              onNavigate={() => {
+                if (isMobile) setDrawerOpen(false);
+              }}
+            />
           </Sider>
         )}
         <Layout
           style={{
-            marginLeft: isMobile ? '0' : showSider ? 'var(--sidebar-current-width)' : '0',
+            marginLeft: isMobile
+              ? '0'
+              : showSider
+                ? 'var(--sidebar-current-width)'
+                : '0',
             flex: '1 1 auto',
             display: 'flex',
             flexDirection: 'column',

web/src/components/layout/SetupCheck.js

@@ -26,7 +26,10 @@ const SetupCheck = ({ children }) => {
   const location = useLocation();
 
   useEffect(() => {
-    if (statusState?.status?.setup === false && location.pathname !== '/setup') {
+    if (
+      statusState?.status?.setup === false &&
+      location.pathname !== '/setup'
+    ) {
       window.location.href = '/setup';
     }
   }, [statusState?.status?.setup, location.pathname]);
@@ -34,4 +37,4 @@ const SetupCheck = ({ children }) => {
   return children;
 };
 
-export default SetupCheck; 
+export default SetupCheck;

web/src/components/layout/SiderBar.jsx

@@ -23,17 +23,9 @@ import { useTranslation } from 'react-i18next';
 import { getLucideIcon } from '../../helpers/render';
 import { ChevronLeft } from 'lucide-react';
 import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed';
-import {
-  isAdmin,
-  isRoot,
-  showError
-} from '../../helpers';
+import { isAdmin, isRoot, showError } from '../../helpers';
 
-import {
-  Nav,
-  Divider,
-  Button,
-} from '@douyinfe/semi-ui';
+import { Nav, Divider, Button } from '@douyinfe/semi-ui';
 
 const routerMap = {
   home: '/',
@@ -54,7 +46,7 @@ const routerMap = {
   personal: '/console/personal',
 };
 
-const SiderBar = ({ onNavigate = () => { } }) => {
+const SiderBar = ({ onNavigate = () => {} }) => {
   const { t } = useTranslation();
   const [collapsed, toggleCollapsed] = useSidebarCollapsed();
 
@@ -275,14 +267,17 @@ const SiderBar = ({ onNavigate = () => { } }) => {
         key={item.itemKey}
         itemKey={item.itemKey}
         text={
-          <div className="flex items-center">
-            <span className="truncate font-medium text-sm" style={{ color: textColor }}>
+          <div className='flex items-center'>
+            <span
+              className='truncate font-medium text-sm'
+              style={{ color: textColor }}
+            >
               {item.text}
             </span>
           </div>
         }
         icon={
-          <div className="sidebar-icon-container flex-shrink-0">
+          <div className='sidebar-icon-container flex-shrink-0'>
             {getLucideIcon(item.itemKey, isSelected)}
           </div>
         }
@@ -302,14 +297,17 @@ const SiderBar = ({ onNavigate = () => { } }) => {
           key={item.itemKey}
           itemKey={item.itemKey}
           text={
-            <div className="flex items-center">
-              <span className="truncate font-medium text-sm" style={{ color: textColor }}>
+            <div className='flex items-center'>
+              <span
+                className='truncate font-medium text-sm'
+                style={{ color: textColor }}
+              >
                 {item.text}
               </span>
             </div>
           }
           icon={
-            <div className="sidebar-icon-container flex-shrink-0">
+            <div className='sidebar-icon-container flex-shrink-0'>
               {getLucideIcon(item.itemKey, isSelected)}
             </div>
           }
@@ -323,7 +321,10 @@ const SiderBar = ({ onNavigate = () => { } }) => {
                 key={subItem.itemKey}
                 itemKey={subItem.itemKey}
                 text={
-                  <span className="truncate font-medium text-sm" style={{ color: subTextColor }}>
+                  <span
+                    className='truncate font-medium text-sm'
+                    style={{ color: subTextColor }}
+                  >
                     {subItem.text}
                   </span>
                 }
@@ -339,18 +340,18 @@ const SiderBar = ({ onNavigate = () => { } }) => {
 
   return (
     <div
-      className="sidebar-container"
+      className='sidebar-container'
       style={{ width: 'var(--sidebar-current-width)' }}
     >
       <Nav
-        className="sidebar-nav"
+        className='sidebar-nav'
         defaultIsCollapsed={collapsed}
         isCollapsed={collapsed}
         onCollapseChange={toggleCollapsed}
         selectedKeys={selectedKeys}
-        itemStyle="sidebar-nav-item"
-        hoverStyle="sidebar-nav-item:hover"
-        selectedStyle="sidebar-nav-item-selected"
+        itemStyle='sidebar-nav-item'
+        hoverStyle='sidebar-nav-item:hover'
+        selectedStyle='sidebar-nav-item-selected'
         renderWrapper={({ itemElement, props }) => {
           const to = routerMapState[props.itemKey] || routerMap[props.itemKey];
 
@@ -381,27 +382,25 @@ const SiderBar = ({ onNavigate = () => { } }) => {
         }}
       >
         {/* 聊天区域 */}
-        <div className="sidebar-section">
-          {!collapsed && (
-            <div className="sidebar-group-label">{t('聊天')}</div>
-          )}
+        <div className='sidebar-section'>
+          {!collapsed && <div className='sidebar-group-label'>{t('聊天')}</div>}
           {chatMenuItems.map((item) => renderSubItem(item))}
         </div>
 
         {/* 控制台区域 */}
-        <Divider className="sidebar-divider" />
+        <Divider className='sidebar-divider' />
         <div>
           {!collapsed && (
-            <div className="sidebar-group-label">{t('控制台')}</div>
+            <div className='sidebar-group-label'>{t('控制台')}</div>
           )}
           {workspaceItems.map((item) => renderNavItem(item))}
         </div>
 
         {/* 个人中心区域 */}
-        <Divider className="sidebar-divider" />
+        <Divider className='sidebar-divider' />
         <div>
           {!collapsed && (
-            <div className="sidebar-group-label">{t('个人中心')}</div>
+            <div className='sidebar-group-label'>{t('个人中心')}</div>
           )}
           {financeItems.map((item) => renderNavItem(item))}
         </div>
@@ -409,10 +408,10 @@ const SiderBar = ({ onNavigate = () => { } }) => {
         {/* 管理员区域 - 只在管理员时显示 */}
         {isAdmin() && (
           <>
-            <Divider className="sidebar-divider" />
+            <Divider className='sidebar-divider' />
             <div>
               {!collapsed && (
-                <div className="sidebar-group-label">{t('管理员')}</div>
+                <div className='sidebar-group-label'>{t('管理员')}</div>
               )}
               {adminItems.map((item) => renderNavItem(item))}
             </div>
@@ -421,22 +420,28 @@ const SiderBar = ({ onNavigate = () => { } }) => {
       </Nav>
 
       {/* 底部折叠按钮 */}
-      <div className="sidebar-collapse-button">
+      <div className='sidebar-collapse-button'>
         <Button
-          theme="outline"
-          type="tertiary"
-          size="small"
+          theme='outline'
+          type='tertiary'
+          size='small'
           icon={
             <ChevronLeft
               size={16}
               strokeWidth={2.5}
-              color="var(--semi-color-text-2)"
-              style={{ transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)' }}
+              color='var(--semi-color-text-2)'
+              style={{
+                transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)',
+              }}
             />
           }
           onClick={toggleCollapsed}
           icononly={collapsed}
-          style={collapsed ? { padding: '4px', width: '100%' } : { padding: '4px 12px', width: '100%' }}
+          style={
+            collapsed
+              ? { padding: '4px', width: '100%' }
+              : { padding: '4px 12px', width: '100%' }
+          }
         >
           {!collapsed ? t('收起侧边栏') : null}
         </Button>