Forráskód Böngészése

在主题被应用到组件树之前,设置算法,而不是直接在state保存一个算法函数,避免出现过多的警告日志

dengdx 1 hónapja
szülő
commit
49f4503246
3 módosított fájl, 15 hozzáadás és 8 törlés
  1. 11 6
      src/app.tsx
  2. 2 1
      src/themes/darkTheme.ts
  3. 2 1
      src/themes/lightTheme.ts

+ 11 - 6
src/app.tsx

@@ -15,6 +15,7 @@ import FeatureNotAvailableFeedback from './components/FeatureNotAvailableFeedbac
 import { setFeatureNotAvailableOpen } from './states/featureNotAvailableSlice';
 import { setBusinessFlow } from './states/BusinessFlowSlice';
 import { logger } from './log/logger';
+import { theme } from 'antd';
 console.log = logger.log;
 console.warn = logger.warn;
 console.error = logger.error;
@@ -44,7 +45,11 @@ function AppContent({ children }: { children: ReactNode }): JSX.Element {
   );
   const { currentTheme, themeType } = useAppSelector((state) => state.theme);
   const [isI18nReady, setIsI18nReady] = useState(false);
-
+  const themeWithAlgorithm = {
+    ...currentTheme,
+    algorithm:
+      themeType === 'light' ? theme.defaultAlgorithm : theme.darkAlgorithm,
+  };
   useLaunch((): void => {
     console.log('App launched.');
   });
@@ -73,11 +78,11 @@ function AppContent({ children }: { children: ReactNode }): JSX.Element {
 
   console.log('当前语言:', currentLocale);
   console.log('messages', messages);
-  
+
   // children 是将要会渲染的页面
   // IntlProvider 始终存在,使用默认值避免 useIntl 报错
   return (
-    <ConfigProvider theme={currentTheme}>
+    <ConfigProvider theme={themeWithAlgorithm}>
       <IntlProvider
         locale={currentLocale ? currentLocale.split('_')[0] : 'en'} // en_US -> en,提供默认值
         messages={(messages as Record<string, string>) || {}} // 提供空对象作为默认值
@@ -91,7 +96,7 @@ function AppContent({ children }: { children: ReactNode }): JSX.Element {
             --button-bg-hover: ${currentTheme.token.buttonBgHover};
           }`}
         </style>
-        
+
         {/* 加载状态覆盖层 */}
         {(loading || !isI18nReady) && (
           <div
@@ -112,7 +117,7 @@ function AppContent({ children }: { children: ReactNode }): JSX.Element {
             <div>加载多语言资源中...</div>
           </div>
         )}
-        
+
         {/* 错误状态覆盖层 */}
         {error && (
           <div
@@ -140,7 +145,7 @@ function AppContent({ children }: { children: ReactNode }): JSX.Element {
             </button>
           </div>
         )}
-        
+
         {/* children 始终被渲染,满足 Taro 框架要求 */}
         <div
           style={{

+ 2 - 1
src/themes/darkTheme.ts

@@ -1,7 +1,8 @@
 import { theme } from 'antd';
 
 export const darkTheme = {
-  algorithm: theme.darkAlgorithm,
+  //algorithm: null,//theme.darkAlgorithm,
+  name: 'dark',
   token: {
     colorPrimary: '#ff5722', // 主色调
     colorBgContainer: '#000000', // 容器背景色

+ 2 - 1
src/themes/lightTheme.ts

@@ -1,7 +1,8 @@
 import { theme } from 'antd';
 
 export const lightTheme = {
-  algorithm: theme.defaultAlgorithm,
+  // algorithm: null,//theme.defaultAlgorithm,
+  name: 'light',
   token: {
     colorPrimary: '#1DA57A', // 主色调
     colorBgContainer: '#FFFFFF', // 容器背景色