fix: message theme

src/app/index.tsx

@@ -10,7 +10,6 @@ import { RouterProvider } from 'react-router-dom';
 import { Locale, Theme } from './enum';
 import { useAppSelector } from './hooks';
 import * as langs from './langs';
-import globalMessage from './message';
 import { store } from './store';
 import appTheme from './theme';
 
@@ -18,7 +17,6 @@ const { darkAlgorithm } = theme;
 
 const AppInternal: React.FC<{ router: Router }> = (props) => {
   const { router } = props;
-  const { message } = TocoApp.useApp();
 
   const locale = useAppSelector((state) => state.common.locale);
   const theme = useAppSelector((state) => state.common.theme);
@@ -46,10 +44,6 @@ const AppInternal: React.FC<{ router: Router }> = (props) => {
     };
   }, [primaryColor, theme]);
 
-  useEffect(() => {
-    globalMessage.setMessage(message);
-  }, [message]);
-
   useEffect(() => {
     document.documentElement.setAttribute(
       'data-color-scheme',
@@ -64,7 +58,9 @@ const AppInternal: React.FC<{ router: Router }> = (props) => {
         theme={themeConfig}
       >
         <ProConfigProvider valueTypeMap={customValueTypeMap}>
-          <RouterProvider router={router} />
+          <TocoApp style={{ height: '100%' }}>
+            <RouterProvider router={router} />
+          </TocoApp>
         </ProConfigProvider>
       </ConfigProvider>
     </IntlProvider>
@@ -74,9 +70,7 @@ const AppInternal: React.FC<{ router: Router }> = (props) => {
 const App: React.FC<{ router: Router }> = (props) => {
   return (
     <StoreProvider store={store}>
-      <TocoApp style={{ height: '100%' }}>
-        <AppInternal {...props} />
-      </TocoApp>
+      <AppInternal {...props} />
     </StoreProvider>
   );
 };

src/layout/index.tsx

@@ -1,9 +1,10 @@
 import { Theme } from '@/app/enum';
 import { useAppSelector } from '@/app/hooks';
+import globalMessage from '@/app/message';
 import { SettingOutlined } from '@ant-design/icons';
-import { Button, Image, Popover } from '@toco-design/components';
+import { App, Button, Image, Popover } from '@toco-design/components';
 import classNames from 'classnames';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styles from './index.module.css';
 import { HeaderOnly, HeaderSider, SiderOnly } from './layouts';
@@ -24,6 +25,11 @@ const Layout: React.FC<LayoutProps> = (props) => {
   const { type: typeProp } = props;
   const theme = useAppSelector((state) => state.common.theme);
   const navigate = useNavigate();
+  const { message } = App.useApp();
+
+  useEffect(() => {
+    globalMessage.setMessage(message);
+  }, [message]);
 
   const Component = useMemo(() => {
     const type = typeProp ?? LayoutType.Default;