12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- import { PropsWithChildren, useState } from 'react';
- import { useLaunch } from '@tarojs/taro';
- import { IntlProvider } from 'react-intl';
- import { ConfigProvider, Button } from 'antd';
- import './app.css';
- import { lightTheme, darkTheme } from './themes';
- const locale = (window.navigator.language || 'en').toLowerCase().split('-')[0]; // Get locale from browser or default to 'en'
- import messages_en from './assets/i18n/messages/en';
- import messages_zh from './assets/i18n/messages/zh';
- const messages = locale === 'zh' ? messages_zh : messages_en;
- function App({ children }: PropsWithChildren<React.ReactNode>) {
- useLaunch(() => {
- console.log('App launched.');
- });
- const [currentTheme, setCurrentTheme] = useState(lightTheme); // 默认使用 light 主题
- const changeTheme = (themeConfig: typeof lightTheme) => {
- setCurrentTheme(themeConfig);
- };
- // children 是将要会渲染的页面
- // return children
- return (
- <ConfigProvider theme={currentTheme}>
- <IntlProvider locale={locale} messages={messages}>
- <div
- style={{
- backgroundColor: currentTheme.token.colorBgLayout,
- color: currentTheme.token.colorText,
- borderRadius: '8px',
- boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
- }}
- >
- {children}
- <div className="fixed bottom-4 right-4">
- <Button type="primary" onClick={() => changeTheme(darkTheme)}>
- Switch to Dark Theme
- </Button>
- <Button type="primary" onClick={() => changeTheme(lightTheme)}>
- Switch to Light Theme
- </Button>
- </div>
- </div>
- </IntlProvider>
- </ConfigProvider>
- );
- }
- export default App;
|