🐛 fix(theme): sync theme state between global context and local components

- Replace local isDarkMode state with global useTheme hook in TopUp component
- Replace local isDarkMode state with global useTheme hook in PersonalSetting component
- Remove redundant theme detection useEffect hooks that caused state inconsistency
- Update theme condition checks from isDarkMode to theme === 'dark'
- Fix issue where components showed dark gradients in light mode due to theme state mismatch
- Clean up trailing commas in import statements

This ensures all components stay synchronized with the global theme system managed by HeaderBar's theme toggle button.

web/src/components/settings/PersonalSetting.js

@@ -19,6 +19,7 @@ import {
 } from '../../helpers';
 } from '../../helpers';
 import Turnstile from 'react-turnstile';
 import Turnstile from 'react-turnstile';
 import { UserContext } from '../../context/User';
 import { UserContext } from '../../context/User';
+import { useTheme } from '../../context/Theme';
 import {
 import {
   Avatar,
   Avatar,
   Banner,
   Banner,
@@ -39,7 +40,7 @@ import {
   AutoComplete,
   AutoComplete,
   Checkbox,
   Checkbox,
   Tabs,
   Tabs,
-  TabPane,
+  TabPane
 } from '@douyinfe/semi-ui';
 } from '@douyinfe/semi-ui';
 import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations';
 import { IllustrationNoContent, IllustrationNoContentDark } from '@douyinfe/semi-illustrations';
 import {
 import {
@@ -53,7 +54,7 @@ import {
   IconKey,
   IconKey,
   IconDelete,
   IconDelete,
   IconChevronDown,
   IconChevronDown,
-  IconChevronUp,
+  IconChevronUp
 } from '@douyinfe/semi-icons';
 } from '@douyinfe/semi-icons';
 import { SiTelegram, SiWechat, SiLinux } from 'react-icons/si';
 import { SiTelegram, SiWechat, SiLinux } from 'react-icons/si';
 import { Bell, Shield, Webhook, Globe, Settings, UserPlus, ShieldCheck } from 'lucide-react';
 import { Bell, Shield, Webhook, Globe, Settings, UserPlus, ShieldCheck } from 'lucide-react';
@@ -64,6 +65,7 @@ const PersonalSetting = () => {
   const [userState, userDispatch] = useContext(UserContext);
   const [userState, userDispatch] = useContext(UserContext);
   let navigate = useNavigate();
   let navigate = useNavigate();
   const { t } = useTranslation();
   const { t } = useTranslation();
+  const theme = useTheme();
 
 
   const [inputs, setInputs] = useState({
   const [inputs, setInputs] = useState({
     wechat_verification_code: '',
     wechat_verification_code: '',
@@ -104,33 +106,6 @@ const PersonalSetting = () => {
   });
   });
   const [modelsLoading, setModelsLoading] = useState(true);
   const [modelsLoading, setModelsLoading] = useState(true);
   const [showWebhookDocs, setShowWebhookDocs] = useState(true);
   const [showWebhookDocs, setShowWebhookDocs] = useState(true);
-  const [isDarkMode, setIsDarkMode] = useState(false);
-
-  // 检测暗色模式
-  useEffect(() => {
-    const checkDarkMode = () => {
-      const isDark = document.documentElement.classList.contains('dark') || 
-                    window.matchMedia('(prefers-color-scheme: dark)').matches;
-      setIsDarkMode(isDark);
-    };
-
-    checkDarkMode();
-    
-    // 监听主题变化
-    const observer = new MutationObserver(checkDarkMode);
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['class']
-    });
-
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    mediaQuery.addListener(checkDarkMode);
-
-    return () => {
-      observer.disconnect();
-      mediaQuery.removeListener(checkDarkMode);
-    };
-  }, []);
 
 
   useEffect(() => {
   useEffect(() => {
     let status = localStorage.getItem('status');
     let status = localStorage.getItem('status');
@@ -413,7 +388,7 @@ const PersonalSetting = () => {
                 <Card
                 <Card
                   className="!rounded-2xl !border-0 !shadow-lg overflow-hidden"
                   className="!rounded-2xl !border-0 !shadow-lg overflow-hidden"
                   style={{
                   style={{
-                    background: isDarkMode 
+                    background: theme === 'dark'
                       ? 'linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%)'
                       ? 'linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%)'
                       : 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%)',
                       : 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%)',
                     position: 'relative'
                     position: 'relative'
@@ -444,7 +419,7 @@ const PersonalSetting = () => {
                             {isRoot() ? (
                             {isRoot() ? (
                               <Tag
                               <Tag
                                 size='small'
                                 size='small'
-                                className="!rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-600"
+                                className="!rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
                                 style={{ fontWeight: '500' }}
                                 style={{ fontWeight: '500' }}
                               >
                               >
                                 {t('超级管理员')}
                                 {t('超级管理员')}
@@ -452,7 +427,7 @@ const PersonalSetting = () => {
                             ) : isAdmin() ? (
                             ) : isAdmin() ? (
                               <Tag
                               <Tag
                                 size='small'
                                 size='small'
-                                className="!rounded-full bg-gray-50 dark:bg-gray-700 text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-600"
+                                className="!rounded-full bg-gray-50 dark:bg-gray-700 text-gray-600 dark:text-gray-300"
                                 style={{ fontWeight: '500' }}
                                 style={{ fontWeight: '500' }}
                               >
                               >
                                 {t('管理员')}
                                 {t('管理员')}
@@ -460,7 +435,7 @@ const PersonalSetting = () => {
                             ) : (
                             ) : (
                               <Tag
                               <Tag
                                 size='small'
                                 size='small'
-                                className="!rounded-full bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-600"
+                                className="!rounded-full bg-slate-50 dark:bg-slate-700 text-slate-600 dark:text-slate-300"
                                 style={{ fontWeight: '500' }}
                                 style={{ fontWeight: '500' }}
                               >
                               >
                                 {t('普通用户')}
                                 {t('普通用户')}
@@ -468,7 +443,7 @@ const PersonalSetting = () => {
                             )}
                             )}
                             <Tag
                             <Tag
                               size='small'
                               size='small'
-                              className="!rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-slate-600"
+                              className="!rounded-full bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300"
                               style={{ fontWeight: '500' }}
                               style={{ fontWeight: '500' }}
                             >
                             >
                               ID: {userState?.user?.id}
                               ID: {userState?.user?.id}

web/src/components/table/LogsTable.js

 import React, { useEffect, useState } from 'react';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useTranslation } from 'react-i18next';
 import {
 import {
-  CreditCard,
-  ShoppingCart,
-  Settings,
-  Server,
-  AlertTriangle,
-  HelpCircle,
-  Zap,
-  Play,
-  Clock,
-  Hash,
-  Key
-} from 'lucide-react';
-import {
   API,
   API,
   copy,
   copy,
   getTodayStartTimestamp,
   getTodayStartTimestamp,

web/src/i18n/locales/en.json

@@ -837,7 +837,18 @@
   "支付宝": "Alipay",
   "支付宝": "Alipay",
   "待使用收益": "Proceeds to be used",
   "待使用收益": "Proceeds to be used",
   "邀请人数": "Number of people invited",
   "邀请人数": "Number of people invited",
-  "兑换余额": "Exchange balance",
+  "兑换码充值": "Redemption code recharge",
+  "使用兑换码快速充值": "Use redemption code to quickly recharge",
+  "支付方式": "Payment method",
+  "邀请奖励": "Invite reward",
+  "或输入自定义金额": "Or enter a custom amount",
+  "选择充值额度": "Select recharge amount",
+  "实付": "Actual payment",
+  "快速方便的充值方式": "Quick and convenient recharge method",
+  "邀请好友获得额外奖励": "Invite friends to get additional rewards",
+  "邀请好友注册，好友充值后您可获得相应奖励": "Invite friends to register, and you can get the corresponding reward after the friend recharges",
+  "通过划转功能将奖励额度转入到您的账户余额中": "Transfer the reward amount to your account balance through the transfer function",
+  "邀请的好友越多，获得的奖励越多": "The more friends you invite, the more rewards you will get",
   "在线充值": "Online recharge",
   "在线充值": "Online recharge",
   "充值数量，最低 ": "Recharge quantity, minimum",
   "充值数量，最低 ": "Recharge quantity, minimum",
   "请选择充值金额": "Please select the recharge amount",
   "请选择充值金额": "Please select the recharge amount",
@@ -954,7 +965,7 @@
   "任务ID": "Task ID",
   "任务ID": "Task ID",
   "周": "week",
   "周": "week",
   "总计：": "Total:",
   "总计：": "Total:",
-  "划转": "transfer",
+  "划转到余额": "Transfer to balance",
   "可用额度": "Available credit",
   "可用额度": "Available credit",
   "邀请码：": "Invitation code:",
   "邀请码：": "Invitation code:",
   "最低": "lowest",
   "最低": "lowest",