feat: locale

src/App.tsx

@@ -1,19 +1,18 @@
 import { useEffect, useState } from 'react'
 import { useLocation, useNavigate, useRoutes } from 'react-router-dom'
-
-import { ConfigProvider, theme } from 'antd'
+import enUS from 'antd/locale/en_US'
 import zhCN from 'antd/locale/zh_CN'
 import dayjs from 'dayjs'
+
+import { ConfigProvider, theme } from 'antd'
 import { routerList } from '@/router'
 import { userStore } from '@/store/user'
 
 import 'dayjs/locale/zh-cn'
 import { settingStore } from '@/store/setting'
 
-dayjs.locale('zh-cn')
-
 function App() {
-  const { isDark } = settingStore()
+  const { isDark, locale } = settingStore()
   const location = useLocation()
   const navigate = useNavigate()
   const element = useRoutes(routerList)
@@ -33,14 +32,20 @@ function App() {
     }
     setLoad(true)
   }, [location.pathname, navigate, token])
+
   useEffect(() => {
     const html = document.querySelector('html')
     html?.classList.add(isDark ? 'dark' : 'light')
     html?.classList.remove(isDark ? 'light' : 'dark')
   }, [isDark])
+
+  useEffect(() => {
+    dayjs.locale(locale)
+  }, [locale])
+
   return (
     <ConfigProvider
-      locale={zhCN}
+      locale={locale === 'zh-cn' ? zhCN : enUS}
       theme={{
         algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
         cssVar: true,

src/layout/AppHeader/index.tsx

@@ -2,7 +2,7 @@ import { useContext } from 'react'
 import { useFullscreen } from 'ahooks'
 
 import type { MenuProps } from 'antd'
-import { Avatar, Dropdown } from 'antd'
+import { Avatar, Dropdown, Tooltip } from 'antd'
 import { userStore } from '@/store/user'
 import { AppLayoutContext } from '@/layout'
 import { settingStore } from '@/store/setting'
@@ -15,7 +15,7 @@ const items: MenuProps['items'] = [
 ]
 export default function AppHeader({ collapsed, setCollapsed }: { collapsed: boolean, setCollapsed: (e: boolean) => void }) {
   const { userInfo } = userStore()
-  const { isDark, toggleDark } = settingStore()
+  const { isDark, toggleDark, locale, toggleLocale } = settingStore()
   const { refresh } = useContext(AppLayoutContext)
   const [isFullscreen, { toggleFullscreen }] = useFullscreen(document.body)
 
@@ -32,8 +32,15 @@ export default function AppHeader({ collapsed, setCollapsed }: { collapsed: bool
         onClick={() => setCollapsed(!collapsed)}
       />
       <div className="ml-auto flex items-center justify-around px-[25px]">
+        <Tooltip title={locale}>
+          <div
+            className="icon-[bi--arrow-left-right] ml-[20px] cursor-pointer transition-all hover:scale-[1.2]"
+            onClick={() => toggleLocale(locale === 'zh-cn' ? 'en' : 'zh-cn')}
+          >
+          </div>
+        </Tooltip>
         <div
-          className="icon-[bi--github] ml-[15px] cursor-pointer transition-all hover:scale-[1.2]"
+          className="icon-[bi--github] ml-[20px] cursor-pointer transition-all hover:scale-[1.2]"
           onClick={() => window.open('https://github.com/mz-dfhp/React-Admin')}
         >
         </div>

src/store/setting.ts

@@ -3,17 +3,23 @@ import { createJSONStorage, persist } from 'zustand/middleware'
 
 interface State {
   isDark: boolean
+  locale: 'en' | 'zh-cn'
 }
 
 interface Action {
   toggleDark: () => void
+  toggleLocale: (value: State['locale']) => void
 }
 
 const settingStore = create(persist<State & Action>(set => ({
   isDark: false,
   toggleDark: () => {
     set(state => ({ isDark: !state.isDark }))
   },
+  locale: 'zh-cn',
+  toggleLocale: (value) => {
+    set(() => ({ locale: value }))
+  },
 }), {
   name: 'setting-storage',
   storage: createJSONStorage(() => localStorage),

src/views/count/index.tsx

@@ -1,4 +1,4 @@
-import { Button, Space } from 'antd'
+import { Button, DatePicker, Space } from 'antd'
 import { countStore } from '@/store/count'
 
 export default function Count() {
@@ -10,6 +10,9 @@ export default function Count() {
         <Button type="primary" onClick={() => decrement(1)}>+</Button>
         <Button type="primary" onClick={() => increment(1)}>-</Button>
       </Space>
+      <div>
+        <DatePicker />
+      </div>
     </div>
   )
 }