🎨 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
2025-08-30 21:15:10 +08:00
parent 105b86c660
commit 6a87808612
274 changed files with 11025 additions and 7659 deletions
--- a/web/src/components/layout/HeaderBar/ActionButtons.jsx
+++ b/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}
--- a/web/src/components/layout/HeaderBar/HeaderLogo.jsx
+++ b/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('演示站点')}
--- a/web/src/components/layout/HeaderBar/LanguageSelector.jsx
+++ b/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>
  );
--- a/web/src/components/layout/HeaderBar/MobileMenuButton.jsx
+++ b/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'
    />
  );
 };
--- a/web/src/components/layout/HeaderBar/Navigation.jsx
+++ b/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}
--- a/web/src/components/layout/HeaderBar/NewYearButton.jsx
+++ b/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>
  );
--- a/web/src/components/layout/HeaderBar/NotificationButton.jsx
+++ b/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>
    );
--- a/web/src/components/layout/HeaderBar/SkeletonWrapper.jsx
+++ b/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>
    );
--- a/web/src/components/layout/HeaderBar/ThemeToggle.jsx
+++ b/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>
  );
--- a/web/src/components/layout/HeaderBar/UserArea.jsx
+++ b/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>
--- a/web/src/components/layout/HeaderBar/index.jsx
+++ b/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}