app.tsx 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import { PropsWithChildren, useState } from 'react';
  2. import { useLaunch } from '@tarojs/taro';
  3. import { IntlProvider } from 'react-intl';
  4. import { ConfigProvider, Button } from 'antd';
  5. import './app.css';
  6. import { lightTheme, darkTheme } from './themes';
  7. const locale = (window.navigator.language || 'en').toLowerCase().split('-')[0]; // Get locale from browser or default to 'en'
  8. import messages_en from './assets/i18n/messages/en';
  9. import messages_zh from './assets/i18n/messages/zh';
  10. const messages = locale === 'zh' ? messages_zh : messages_en;
  11. function App({ children }: PropsWithChildren<React.ReactNode>) {
  12. useLaunch(() => {
  13. console.log('App launched.');
  14. });
  15. const [currentTheme, setCurrentTheme] = useState(lightTheme); // 默认使用 light 主题
  16. const changeTheme = (themeConfig: typeof lightTheme) => {
  17. setCurrentTheme(themeConfig);
  18. };
  19. // children 是将要会渲染的页面
  20. // return children
  21. return (
  22. <ConfigProvider theme={currentTheme}>
  23. <IntlProvider locale={locale} messages={messages}>
  24. <div
  25. style={{
  26. backgroundColor: currentTheme.token.colorBgLayout,
  27. color: currentTheme.token.colorText,
  28. borderRadius: '8px',
  29. boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
  30. }}
  31. >
  32. {children}
  33. <div className="fixed bottom-4 right-4">
  34. <Button type="primary" onClick={() => changeTheme(darkTheme)}>
  35. Switch to Dark Theme
  36. </Button>
  37. <Button type="primary" onClick={() => changeTheme(lightTheme)}>
  38. Switch to Light Theme
  39. </Button>
  40. </div>
  41. </div>
  42. </IntlProvider>
  43. </ConfigProvider>
  44. );
  45. }
  46. export default App;