🌓 feat(ui): add auto theme mode, refactor ThemeToggle, optimize header theme handling

- Feature: Introduce 'auto' theme mode - Detect system preference via matchMedia('(prefers-color-scheme: dark)') - Add useActualTheme context to expose the effective theme ('light'|'dark') - Persist selected mode in localStorage ('theme-mode') with 'auto' as default - Apply/remove `dark` class on <html> and sync `theme-mode` on <body> - Broadcast effective theme to iframes - UI: Redesign ThemeToggle with Dropdown items and custom highlight - Replace non-existent IconMonitor with IconRefresh - Use Dropdown.Menu + Dropdown.Item with built-in icon prop - Selected state uses custom background highlight; hover state preserved - Remove checkmark; selection relies on background styling - Current button icon reflects selected mode - Performance: reduce re-renders and unnecessary effects - Memoize theme options and current button icon (useMemo) - Simplify handleThemeToggle to accept only explicit modes ('light'|'dark'|'auto') - Minimize useEffect dependencies; remove unrelated deps - Header: streamline useHeaderBar - Use useActualTheme for iframe theme messaging - Remove unused statusDispatch - Remove isNewYear from theme effect dependencies - Home: send effective theme (useActualTheme) to external content iframes - i18n: add/enhance theme-related copy in locales (en/zh) - Chore: minor code cleanup and consistency - Improve readability and maintainability - Lint clean; no functional regressions
2025-08-23 03:02:35 +08:00
parent 08add538a0
commit 61ae19ac82
7 changed files with 173 additions and 47 deletions
--- a/web/src/components/layout/HeaderBar/LanguageSelector.jsx
+++ b/web/src/components/layout/HeaderBar/LanguageSelector.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com

 import React from 'react';
 import { Button, Dropdown } from '@douyinfe/semi-ui';
-import { IconLanguage } from '@douyinfe/semi-icons';
+import { Languages } from 'lucide-react';
 import { CN, GB } from 'country-flag-icons/react/3x2';

 const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
@@ -46,7 +46,7 @@ const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
      }
    >
      <Button
-        icon={<IconLanguage className="text-lg" />}
+        icon={<Languages size={18} />}
        aria-label={t('切换语言')}
        theme="borderless"
        type="tertiary"
--- a/web/src/components/layout/HeaderBar/NotificationButton.jsx
+++ b/web/src/components/layout/HeaderBar/NotificationButton.jsx
@@ -19,11 +19,11 @@ For commercial licensing, please contact support@quantumnous.com

 import React from 'react';
 import { Button, Badge } from '@douyinfe/semi-ui';
-import { IconBell } from '@douyinfe/semi-icons';
+import { Bell } from 'lucide-react';

 const NotificationButton = ({ unreadCount, onNoticeOpen, t }) => {
  const buttonProps = {
-    icon: <IconBell className="text-lg" />,
+    icon: <Bell size={18} />,
    'aria-label': t('系统公告'),
    onClick: onNoticeOpen,
    theme: "borderless",
--- a/web/src/components/layout/HeaderBar/ThemeToggle.jsx
+++ b/web/src/components/layout/HeaderBar/ThemeToggle.jsx
@@ -17,20 +17,88 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */

-import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
-import { IconSun, IconMoon } from '@douyinfe/semi-icons';
+import React, { useMemo } from 'react';
+import { Button, Dropdown } from '@douyinfe/semi-ui';
+import { Sun, Moon, Monitor } from 'lucide-react';
+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 getItemClassName = (isSelected) =>
+    isSelected
+      ? '!bg-semi-color-primary-light-default !font-semibold'
+      : 'hover:!bg-semi-color-fill-1';
+
+  const currentButtonIcon = useMemo(() => {
+    const currentOption = themeOptions.find(option => option.key === theme);
+    return currentOption?.buttonIcon || themeOptions[2].buttonIcon;
+  }, [theme, themeOptions]);
+
  return (
-    <Button
-      icon={theme === 'dark' ? <IconSun size="large" className="text-yellow-500" /> : <IconMoon size="large" className="text-gray-300" />}
-      aria-label={t('切换主题')}
-      onClick={onThemeToggle}
-      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
+      position="bottomRight"
+      render={
+        <Dropdown.Menu>
+          {themeOptions.map((option) => (
+            <Dropdown.Item
+              key={option.key}
+              icon={option.icon}
+              onClick={() => onThemeToggle(option.key)}
+              className={getItemClassName(theme === option.key)}
+            >
+              <div className="flex flex-col">
+                <span>{option.label}</span>
+                <span className="text-xs text-semi-color-text-2">
+                  {option.description}
+                </span>
+              </div>
+            </Dropdown.Item>
+          ))}
+
+          {theme === 'auto' && (
+            <>
+              <Dropdown.Divider />
+              <div className="px-3 py-2 text-xs text-semi-color-text-2">
+                {t('当前跟随系统')}：{actualTheme === 'dark' ? t('深色') : t('浅色')}
+              </div>
+            </>
+          )}
+        </Dropdown.Menu>
+      }
+    >
+      <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"
+      />
+    </Dropdown>
  );
 };

--- a/web/src/context/Theme/index.jsx
+++ b/web/src/context/Theme/index.jsx
@@ -17,39 +17,90 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */

-import { createContext, useCallback, useContext, useState } from 'react';
+import { createContext, useCallback, useContext, useState, useEffect } from 'react';

 const ThemeContext = createContext(null);
 export const useTheme = () => useContext(ThemeContext);

+const ActualThemeContext = createContext(null);
+export const useActualTheme = () => useContext(ActualThemeContext);
+
 const SetThemeContext = createContext(null);
 export const useSetTheme = () => useContext(SetThemeContext);

+// 检测系统主题偏好
+const getSystemTheme = () => {
+  if (typeof window !== 'undefined' && window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return 'light';
+};
+
 export const ThemeProvider = ({ children }) => {
  const [theme, _setTheme] = useState(() => {
    try {
-      return localStorage.getItem('theme-mode') || null;
+      return localStorage.getItem('theme-mode') || 'auto';
    } catch {
-      return null;
+      return 'auto';
    }
  });

-  const setTheme = useCallback((input) => {
-    _setTheme(input ? 'dark' : 'light');
+  const [systemTheme, setSystemTheme] = useState(getSystemTheme());

-    const body = document.body;
-    if (!input) {
-      body.removeAttribute('theme-mode');
-      localStorage.setItem('theme-mode', 'light');
-    } else {
-      body.setAttribute('theme-mode', 'dark');
-      localStorage.setItem('theme-mode', 'dark');
+  // 计算实际应用的主题
+  const actualTheme = theme === 'auto' ? systemTheme : theme;
+
+  // 监听系统主题变化
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+      const handleSystemThemeChange = (e) => {
+        setSystemTheme(e.matches ? 'dark' : 'light');
+      };
+
+      mediaQuery.addEventListener('change', handleSystemThemeChange);
+
+      return () => {
+        mediaQuery.removeEventListener('change', handleSystemThemeChange);
+      };
    }
  }, []);

+  // 应用主题到DOM
+  useEffect(() => {
+    const body = document.body;
+    if (actualTheme === 'dark') {
+      body.setAttribute('theme-mode', 'dark');
+      document.documentElement.classList.add('dark');
+    } else {
+      body.removeAttribute('theme-mode');
+      document.documentElement.classList.remove('dark');
+    }
+  }, [actualTheme]);
+
+  const setTheme = useCallback((newTheme) => {
+    let themeValue;
+
+    if (typeof newTheme === 'boolean') {
+      // 向后兼容原有的 boolean 参数
+      themeValue = newTheme ? 'dark' : 'light';
+    } else if (typeof newTheme === 'string') {
+      // 新的字符串参数支持 'light', 'dark', 'auto'
+      themeValue = newTheme;
+    } else {
+      themeValue = 'auto';
+    }
+
+    _setTheme(themeValue);
+    localStorage.setItem('theme-mode', themeValue);
+  }, []);
+
  return (
    <SetThemeContext.Provider value={setTheme}>
-      <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+      <ActualThemeContext.Provider value={actualTheme}>
+        <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+      </ActualThemeContext.Provider>
    </SetThemeContext.Provider>
  );
 };
--- a/web/src/hooks/common/useHeaderBar.js
+++ b/web/src/hooks/common/useHeaderBar.js
@@ -22,7 +22,7 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { UserContext } from '../../context/User';
 import { StatusContext } from '../../context/Status';
-import { useSetTheme, useTheme } from '../../context/Theme';
+import { useSetTheme, useTheme, useActualTheme } from '../../context/Theme';
 import { getLogo, getSystemName, API, showSuccess } from '../../helpers';
 import { useIsMobile } from './useIsMobile';
 import { useSidebarCollapsed } from './useSidebarCollapsed';
@@ -31,7 +31,7 @@ import { useMinimumLoadingTime } from './useMinimumLoadingTime';
 export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
  const { t, i18n } = useTranslation();
  const [userState, userDispatch] = useContext(UserContext);
-  const [statusState, statusDispatch] = useContext(StatusContext);
+  const [statusState] = useContext(StatusContext);
  const isMobile = useIsMobile();
  const [collapsed, toggleCollapsed] = useSidebarCollapsed();
  const [logoLoaded, setLogoLoaded] = useState(false);
@@ -54,6 +54,7 @@ export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
  const isConsoleRoute = location.pathname.startsWith('/console');

  const theme = useTheme();
+  const actualTheme = useActualTheme();
  const setTheme = useSetTheme();

  // Logo loading effect
@@ -65,21 +66,13 @@ export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
    img.onload = () => setLogoLoaded(true);
  }, [logo]);

-  // Theme effect
+  // Send theme to iframe
  useEffect(() => {
-    if (theme === 'dark') {
-      document.body.setAttribute('theme-mode', 'dark');
-      document.documentElement.classList.add('dark');
-    } else {
-      document.body.removeAttribute('theme-mode');
-      document.documentElement.classList.remove('dark');
-    }
-
    const iframe = document.querySelector('iframe');
    if (iframe) {
-      iframe.contentWindow.postMessage({ themeMode: theme }, '*');
+      iframe.contentWindow.postMessage({ themeMode: actualTheme }, '*');
    }
-  }, [theme, isNewYear]);
+  }, [actualTheme]);

  // Language change effect
  useEffect(() => {
@@ -110,8 +103,11 @@ export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
    i18n.changeLanguage(lang);
  };

-  const handleThemeToggle = () => {
-    setTheme(theme === 'dark' ? false : true);
+  const handleThemeToggle = (newTheme) => {
+    if (!newTheme || (newTheme !== 'light' && newTheme !== 'dark' && newTheme !== 'auto')) {
+      return;
+    }
+    setTheme(newTheme);
  };

  const handleMobileMenuToggle = () => {
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1984,5 +1984,15 @@
  "按顺序替换content中的变量占位符": "Replace variable placeholders in content in order",
  "Unix时间戳": "Unix timestamp",
  "隐私设置": "Privacy settings",
-  "记录请求与错误日志IP": "Record request and error log IP"
+  "记录请求与错误日志IP": "Record request and error log IP",
+  "切换主题": "Switch Theme",
+  "浅色模式": "Light Mode",
+  "深色模式": "Dark Mode",
+  "自动模式": "Auto Mode",
+  "始终使用浅色主题": "Always use light theme",
+  "始终使用深色主题": "Always use dark theme",
+  "跟随系统主题设置": "Follow system theme",
+  "当前跟随系统": "Currently following system",
+  "深色": "Dark",
+  "浅色": "Light"
 }
--- a/web/src/pages/Home/index.jsx
+++ b/web/src/pages/Home/index.jsx
@@ -18,11 +18,12 @@ For commercial licensing, please contact support@quantumnous.com
 */

 import React, { useContext, useEffect, useState } from 'react';
-import { Button, Typography, Tag, Input, ScrollList, ScrollItem } from '@douyinfe/semi-ui';
+import { Button, Typography, Input, ScrollList, ScrollItem } from '@douyinfe/semi-ui';
 import { API, showError, copy, showSuccess } from '../../helpers';
 import { useIsMobile } from '../../hooks/common/useIsMobile';
 import { API_ENDPOINTS } from '../../constants/common.constant';
 import { StatusContext } from '../../context/Status';
+import { useActualTheme } from '../../context/Theme';
 import { marked } from 'marked';
 import { useTranslation } from 'react-i18next';
 import { IconGithubLogo, IconPlay, IconFile, IconCopy } from '@douyinfe/semi-icons';
@@ -35,6 +36,7 @@ const { Text } = Typography;
 const Home = () => {
  const { t, i18n } = useTranslation();
  const [statusState] = useContext(StatusContext);
+  const actualTheme = useActualTheme();
  const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
  const [homePageContent, setHomePageContent] = useState('');
  const [noticeVisible, setNoticeVisible] = useState(false);
@@ -62,9 +64,8 @@ const Home = () => {
      if (data.startsWith('https://')) {
        const iframe = document.querySelector('iframe');
        if (iframe) {
-          const theme = localStorage.getItem('theme-mode') || 'light';
          iframe.onload = () => {
-            iframe.contentWindow.postMessage({ themeMode: theme }, '*');
+            iframe.contentWindow.postMessage({ themeMode: actualTheme }, '*');
            iframe.contentWindow.postMessage({ lang: i18n.language }, '*');
          };
        }