From c5035ec5f1c363b14d6a09845aa5aa7f82b6d140 Mon Sep 17 00:00:00 2001 From: yikai Date: Sat, 16 Sep 2023 13:23:36 +0800 Subject: [PATCH] feat: add i18n header components --- threadpool/console-new/craco.config.js | 5 + threadpool/console-new/package.json | 3 + threadpool/console-new/public/favicon.ico | Bin 3870 -> 3333 bytes threadpool/console-new/public/index.html | 2 +- .../src/components/header/index.module.less | 14 +++ .../src/components/header/index.tsx | 86 ++++++++++++++++++ .../console-new/src/components/icon/index.tsx | 15 +++ .../components/layout-com/index.module.less | 3 + .../src/components/layout-com/index.tsx | 8 +- .../src/components/theme-com/index.tsx | 10 +- .../console-new/src/config/i18n/index.ts | 28 ++++++ .../console-new/src/config/i18n/locales/en.ts | 5 + .../console-new/src/config/i18n/locales/zh.ts | 5 + .../src/{ => config}/theme/dark-algorithm.ts | 6 +- .../src/config/theme/default-algnorithm.ts | 45 +++++++++ .../src/{ => config}/theme/default-theme.d.ts | 0 .../src/{ => config}/theme/index.ts | 0 threadpool/console-new/src/context/index.tsx | 59 +++++++++++- .../console-new/src/context/themeContext.tsx | 17 ---- .../console-new/src/hooks/useThemeMode.tsx | 8 +- threadpool/console-new/src/index.tsx | 12 +-- .../console-new/src/page/home/index.tsx | 8 +- .../src/theme/default-algnorithm.ts | 47 ---------- threadpool/console-new/yarn.lock | 13 ++- 24 files changed, 301 insertions(+), 98 deletions(-) create mode 100644 threadpool/console-new/src/components/header/index.module.less create mode 100644 threadpool/console-new/src/components/header/index.tsx create mode 100644 threadpool/console-new/src/components/icon/index.tsx create mode 100644 threadpool/console-new/src/config/i18n/index.ts create mode 100644 threadpool/console-new/src/config/i18n/locales/en.ts create mode 100644 threadpool/console-new/src/config/i18n/locales/zh.ts rename threadpool/console-new/src/{ => config}/theme/dark-algorithm.ts (93%) create mode 100644 threadpool/console-new/src/config/theme/default-algnorithm.ts rename threadpool/console-new/src/{ => config}/theme/default-theme.d.ts (100%) rename threadpool/console-new/src/{ => config}/theme/index.ts (100%) delete mode 100644 threadpool/console-new/src/context/themeContext.tsx delete mode 100644 threadpool/console-new/src/theme/default-algnorithm.ts diff --git a/threadpool/console-new/craco.config.js b/threadpool/console-new/craco.config.js index 88250a4c..0d7d72a2 100644 --- a/threadpool/console-new/craco.config.js +++ b/threadpool/console-new/craco.config.js @@ -33,6 +33,11 @@ module.exports = { }, }, ], + // style: { + // modules: { + // localIdentName: '[local]_[hash:base64:5]', // 可以自定义你的类名生成规则 + // }, + // }, webpack: { alias: { '@': resolve('src'), diff --git a/threadpool/console-new/package.json b/threadpool/console-new/package.json index dc6357f2..801cbd51 100644 --- a/threadpool/console-new/package.json +++ b/threadpool/console-new/package.json @@ -3,12 +3,15 @@ "version": "0.1.0", "private": true, "dependencies": { + "@ant-design/icons": "^5.2.6", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "ahooks": "^3.7.8", "antd": "^5.4.7", + "dayjs": "^1.11.9", "i18next": "^23.5.1", + "i18next-browser-languagedetector": "^7.1.0", "qs": "^6.11.2", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/threadpool/console-new/public/favicon.ico b/threadpool/console-new/public/favicon.ico index a11777cc471a4344702741ab1c8a588998b1311a..264e6fc675e3a9b2d9e46f00a6ec98b2a3d01889 100644 GIT binary patch literal 3333 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/threadpool/console-new/public/index.html b/threadpool/console-new/public/index.html index aa069f27..515b177d 100644 --- a/threadpool/console-new/public/index.html +++ b/threadpool/console-new/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Dashboard diff --git a/threadpool/console-new/src/components/header/index.module.less b/threadpool/console-new/src/components/header/index.module.less new file mode 100644 index 00000000..e4cf7f42 --- /dev/null +++ b/threadpool/console-new/src/components/header/index.module.less @@ -0,0 +1,14 @@ +.header-wrapper { + display: flex; + width: 100%; + justify-content: space-between; + .logo { + display: flex; + flex-direction: column; + width: 200px; + img { + flex: 1; + object-fit: contain; + } + } +} \ No newline at end of file diff --git a/threadpool/console-new/src/components/header/index.tsx b/threadpool/console-new/src/components/header/index.tsx new file mode 100644 index 00000000..2619f290 --- /dev/null +++ b/threadpool/console-new/src/components/header/index.tsx @@ -0,0 +1,86 @@ +import React, { useContext } from 'react'; +import style from './index.module.less'; +import { UserOutlined } from '@ant-design/icons'; +import { Avatar, Button, Col, Dropdown, Row, Switch, Tag } from 'antd'; +import useThemeMode from '@/hooks/useThemeMode'; +import { MyContext } from '@/context'; +import IconFont from '@/components/icon'; + +const HeaderChild = () => { + const { isDark, setIsDark } = useThemeMode(); + const { lang, setLang } = useContext(MyContext); + + const items = [ + { + key: '1', + label: ( + + 1st menu + + ), + }, + { + key: '2', + label: ( + + 2nd menu + + ), + }, + { + key: '3', + label: ( + + 登出 + + ), + }, + ]; + + return ( +
+
+ +
+
+ + + + + } style={{ cursor: 'pointer' }} /> + + + + {/* { + lang === 'zh' ? setLang('en') : setLang('zh'); + }} + style={{ cursor: 'pointer' }} + > + {lang === 'zh' ? 'zh' : 'en'} + */} + + + + { + setIsDark(e); + }} + > + + +
+
+ ); +}; +export default HeaderChild; diff --git a/threadpool/console-new/src/components/icon/index.tsx b/threadpool/console-new/src/components/icon/index.tsx new file mode 100644 index 00000000..335ec6a6 --- /dev/null +++ b/threadpool/console-new/src/components/icon/index.tsx @@ -0,0 +1,15 @@ +import { createFromIconfontCN } from '@ant-design/icons'; + +interface Props { + type: string; +} + +const MyIcon = createFromIconfontCN({ + scriptUrl: '//at.alicdn.com/t/c/font_4254722_1xl4w1k5c53.js', // 在 iconfont.cn 上生成 +}); + +const IconFont = (props: Props) => { + return ; +}; + +export default IconFont; diff --git a/threadpool/console-new/src/components/layout-com/index.module.less b/threadpool/console-new/src/components/layout-com/index.module.less index 6731ddf2..4d7b07bc 100644 --- a/threadpool/console-new/src/components/layout-com/index.module.less +++ b/threadpool/console-new/src/components/layout-com/index.module.less @@ -4,6 +4,9 @@ .header { height: 48px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03); + padding: 0 20px; + display: flex; + align-items: center; } .sider { height: calc(100vh - 48px); diff --git a/threadpool/console-new/src/components/layout-com/index.tsx b/threadpool/console-new/src/components/layout-com/index.tsx index b4450c47..13d25217 100644 --- a/threadpool/console-new/src/components/layout-com/index.tsx +++ b/threadpool/console-new/src/components/layout-com/index.tsx @@ -1,7 +1,7 @@ import { useState, useContext, ReactNode } from 'react'; import { DefaultTheme, ThemeContext } from 'styled-components'; -import { Layout, Button, Menu } from 'antd'; -import useThemeMode from '@/hooks/useThemeMode'; +import { Layout, Menu } from 'antd'; +import HeaderChild from '../header'; import { IMenuList } from '@/typings'; import style from './index.module.less'; @@ -19,11 +19,11 @@ const LayoutCom = (props: ILayoutCom) => { const onClick = (e: any) => { setCurrent(e.key); }; - const [setIsDark] = useThemeMode(); + return (
- +
{isSider && ( diff --git a/threadpool/console-new/src/components/theme-com/index.tsx b/threadpool/console-new/src/components/theme-com/index.tsx index 36e76349..95afad2b 100644 --- a/threadpool/console-new/src/components/theme-com/index.tsx +++ b/threadpool/console-new/src/components/theme-com/index.tsx @@ -2,10 +2,10 @@ import React, { useContext, useEffect, useState } from 'react'; import { DefaultTheme, ThemeProvider } from 'styled-components'; import { ConfigProvider, theme } from 'antd'; -import { darkAlgorithm } from '../../theme/dark-algorithm'; -import { defaultAlgorithm } from '../../theme/default-algnorithm'; -import { lightDefaultTheme, darkDefaultTheme } from '../../theme'; -import { MyThemeContext, THEME_NAME } from '../../context/themeContext'; +import { darkAlgorithm } from '../../config/theme/dark-algorithm'; +import { defaultAlgorithm } from '../../config/theme/default-algnorithm'; +import { lightDefaultTheme, darkDefaultTheme } from '../../config/theme'; +import { MyContext, THEME_NAME } from '../../context'; import zhCN from 'antd/es/locale/zh_CN'; interface ThemeProps { @@ -15,7 +15,7 @@ interface ThemeProps { const ThemeComponent = ({ children }: ThemeProps) => { const [themes, setThemes] = useState(defaultAlgorithm); const [myThemes, setMyThemes] = useState(lightDefaultTheme); - const { themeName } = useContext(MyThemeContext); + const { themeName } = useContext(MyContext); const changeMode = (themeName: THEME_NAME) => { if (themeName === THEME_NAME.DARK) { diff --git a/threadpool/console-new/src/config/i18n/index.ts b/threadpool/console-new/src/config/i18n/index.ts new file mode 100644 index 00000000..b610be8f --- /dev/null +++ b/threadpool/console-new/src/config/i18n/index.ts @@ -0,0 +1,28 @@ +// i18n.js + +import i18n from 'i18next'; +import { initReactI18next } from 'react-i18next'; +import zh from './locales/zh'; +import en from './locales/en'; +import LanguageDetector from 'i18next-browser-languagedetector'; + +i18n + .use(LanguageDetector) + .use(initReactI18next) + .init({ + resources: { + zh: { + translation: zh, + }, + en: { + translation: en, + }, + }, + debug: true, + fallbackLng: 'zh', // 默认语言 + interpolation: { + escapeValue: false, // 不转义HTML标签 + }, + }); + +export default i18n; diff --git a/threadpool/console-new/src/config/i18n/locales/en.ts b/threadpool/console-new/src/config/i18n/locales/en.ts new file mode 100644 index 00000000..9c4e9957 --- /dev/null +++ b/threadpool/console-new/src/config/i18n/locales/en.ts @@ -0,0 +1,5 @@ +const enTranslationMap: { [key: string]: string } = { + hello: 'hello', +}; + +export default enTranslationMap; diff --git a/threadpool/console-new/src/config/i18n/locales/zh.ts b/threadpool/console-new/src/config/i18n/locales/zh.ts new file mode 100644 index 00000000..dbf8591d --- /dev/null +++ b/threadpool/console-new/src/config/i18n/locales/zh.ts @@ -0,0 +1,5 @@ +const zhTranslationMap: { [key: string]: string } = { + hello: '你好', +}; + +export default zhTranslationMap; diff --git a/threadpool/console-new/src/theme/dark-algorithm.ts b/threadpool/console-new/src/config/theme/dark-algorithm.ts similarity index 93% rename from threadpool/console-new/src/theme/dark-algorithm.ts rename to threadpool/console-new/src/config/theme/dark-algorithm.ts index 8ed1fa92..e7d20afc 100644 --- a/threadpool/console-new/src/theme/dark-algorithm.ts +++ b/threadpool/console-new/src/config/theme/dark-algorithm.ts @@ -2,7 +2,7 @@ import { theme } from 'antd'; import { darkDefaultTheme } from '.'; export const darkAlgorithm = { token: { - borderRadius: 2, + borderRadius: 6, colorPrimary: darkDefaultTheme.primary, fontSize: 14, }, @@ -15,8 +15,8 @@ export const darkAlgorithm = { fontSize: 14, }, Table: { - borderRadius: 0, - borderRadiusLG: 0, + // borderRadius: 0, + // borderRadiusLG: 0, padding: 10, paddingXS: 5, margin: 0, diff --git a/threadpool/console-new/src/config/theme/default-algnorithm.ts b/threadpool/console-new/src/config/theme/default-algnorithm.ts new file mode 100644 index 00000000..be07d984 --- /dev/null +++ b/threadpool/console-new/src/config/theme/default-algnorithm.ts @@ -0,0 +1,45 @@ +import { theme } from 'antd'; +import { lightDefaultTheme } from '.'; +export const defaultAlgorithm = { + token: { + borderRadius: 6, + colorPrimary: lightDefaultTheme.primary, + fontSize: 14, + // colorBgBase: lightDefaultTheme.backgroundColor.bg1, + }, + components: { + Layout: { + bodyBg: lightDefaultTheme.backgroundColor.bg1, + headerBg: lightDefaultTheme.backgroundColor.bgHeader, + }, + // Button: { + // fontSize: 14, + // }, + // Table: { + // padding: 10, + // paddingXS: 5, + // margin: 0, + // fontSize: 14, + // colorBorderSecondary: lightDefaultTheme.borderColor.bl1, + // paddingContentVerticalLG: 4, + // }, + // Modal: { + // borderRadiusLG: 2, + // borderRadiusSM: 2, + // colorText: lightDefaultTheme.fontColor.fc3, + // borderRadius: 2, + // paddingContentHorizontalLG: 0, + // paddingMD: 0, + // }, + // Menu: { + // itemBg: lightDefaultTheme.backgroundColor.bg1, + // activeBarWidth: 0, + // activeBarHeight: 0, + // activeBarBorderWidth: 0, + // subMenuItemBorderRadius: 8, + // horizontalItemBorderRadius: 8, + // itemBorderRadius: 8, + // }, + }, + algorithm: theme.defaultAlgorithm, +}; diff --git a/threadpool/console-new/src/theme/default-theme.d.ts b/threadpool/console-new/src/config/theme/default-theme.d.ts similarity index 100% rename from threadpool/console-new/src/theme/default-theme.d.ts rename to threadpool/console-new/src/config/theme/default-theme.d.ts diff --git a/threadpool/console-new/src/theme/index.ts b/threadpool/console-new/src/config/theme/index.ts similarity index 100% rename from threadpool/console-new/src/theme/index.ts rename to threadpool/console-new/src/config/theme/index.ts diff --git a/threadpool/console-new/src/context/index.tsx b/threadpool/console-new/src/context/index.tsx index 4a06a7fa..a301aa29 100644 --- a/threadpool/console-new/src/context/index.tsx +++ b/threadpool/console-new/src/context/index.tsx @@ -1,18 +1,67 @@ -import React, { createContext, useState, ReactNode } from 'react'; +import React, { createContext, useState, ReactNode, useEffect } from 'react'; +import { ConfigProvider, theme } from 'antd'; +import { DefaultTheme, ThemeProvider } from 'styled-components'; +import enUS from 'antd/locale/en_US'; +import zhCN from 'antd/locale/zh_CN'; +import { darkDefaultTheme, lightDefaultTheme } from '@/config/theme'; +import { defaultAlgorithm } from '@/config/theme/default-algnorithm'; +import { darkAlgorithm } from '@/config/theme/dark-algorithm'; +import { useTranslation } from 'react-i18next'; export enum THEME_NAME { DEFAULT = 'default', DARK = 'dark', } -export const StoreContext = createContext<{ +export enum LANG_NAME { + ZH = 'zh', + EN = 'en', +} + +export const MyContext = createContext<{ themeName: string; + lang: LANG_NAME; setThemeName: (name: THEME_NAME) => void; + setLang: (lang: LANG_NAME) => void; } | null>(null); -export const Store: React.FC<{ +export const MyStore: React.FC<{ children: ReactNode; }> = ({ children }) => { - const [themeName, setThemeName] = useState(THEME_NAME.DEFAULT); - return {children}; + const [themeName, setThemeName] = useState(THEME_NAME.DEFAULT); + const [lang, setLang] = useState(LANG_NAME.ZH); + const [themes, setThemes] = useState(defaultAlgorithm); + const [myThemes, setMyThemes] = useState(lightDefaultTheme); + const { i18n } = useTranslation(); + + const changeMode = (themeName: THEME_NAME) => { + if (themeName === THEME_NAME.DARK) { + darkAlgorithm.algorithm = theme.darkAlgorithm; + // for ant change mode + setThemes(darkAlgorithm); + // for custome use mode + setMyThemes(darkDefaultTheme); + } else { + defaultAlgorithm.algorithm = theme.defaultAlgorithm; + setThemes(defaultAlgorithm); + setMyThemes(lightDefaultTheme); + } + }; + + useEffect(() => { + changeMode(themeName); + }, [themeName]); + + useEffect(() => { + // change lang + i18n.changeLanguage(lang); + }, [lang, i18n]); + + return ( + + + {children} + + + ); }; diff --git a/threadpool/console-new/src/context/themeContext.tsx b/threadpool/console-new/src/context/themeContext.tsx deleted file mode 100644 index 2b1bb54f..00000000 --- a/threadpool/console-new/src/context/themeContext.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React, { createContext, useState, ReactNode } from 'react'; - -export enum THEME_NAME { - DEFAULT = 'default', - DARK = 'dark', -} - -export const MyThemeContext = createContext<{ themeName: string; setThemeName: (name: THEME_NAME) => void } | null>( - null -); - -export const ThemeStore: React.FC<{ - children: ReactNode; -}> = ({ children }) => { - const [themeName, setThemeName] = useState(THEME_NAME.DEFAULT); - return {children}; -}; diff --git a/threadpool/console-new/src/hooks/useThemeMode.tsx b/threadpool/console-new/src/hooks/useThemeMode.tsx index d40bda18..502a31dd 100644 --- a/threadpool/console-new/src/hooks/useThemeMode.tsx +++ b/threadpool/console-new/src/hooks/useThemeMode.tsx @@ -1,16 +1,16 @@ import { useContext, useEffect } from 'react'; import { useLocalStorageState } from 'ahooks'; -import { MyThemeContext, THEME_NAME } from '@/context/themeContext'; +import { MyContext, THEME_NAME } from '@/context'; -const useThemeMode = () => { +const useThemeMode = (): { isDark: boolean | undefined; setIsDark: (isDark: boolean) => void } => { const [isDark, setIsDark] = useLocalStorageState('current-mode', { defaultValue: false }); - const { setThemeName } = useContext(MyThemeContext); + const { setThemeName } = useContext(MyContext); useEffect(() => { isDark ? setThemeName(THEME_NAME.DARK) : setThemeName(THEME_NAME.DEFAULT); }, [isDark, setThemeName]); - return [setIsDark]; + return { isDark, setIsDark }; }; export default useThemeMode; diff --git a/threadpool/console-new/src/index.tsx b/threadpool/console-new/src/index.tsx index 966bc555..682dd7f7 100644 --- a/threadpool/console-new/src/index.tsx +++ b/threadpool/console-new/src/index.tsx @@ -2,8 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; -import { ThemeStore } from './context/themeContext'; -import ThemeComponent from './components/theme-com'; +import { MyStore } from './context'; +import './config/i18n'; import 'antd/dist/reset.css'; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); @@ -12,12 +12,10 @@ root.render( {/* theme context */} - + {/* theme config context */} - - - - + + ); diff --git a/threadpool/console-new/src/page/home/index.tsx b/threadpool/console-new/src/page/home/index.tsx index 527ec194..b93126cb 100644 --- a/threadpool/console-new/src/page/home/index.tsx +++ b/threadpool/console-new/src/page/home/index.tsx @@ -1,7 +1,10 @@ -import { Button } from 'antd'; +import { Button, Calendar } from 'antd'; +import dayjs from 'dayjs'; import request from '@/utils'; +import { useTranslation } from 'react-i18next'; const Home = () => { + const { t } = useTranslation(); const fetchdata = (body: { duid: string }) => { return request<{ phone: string }>('https://mock.xiaojukeji.com/mock/16635/am/marketing/mis/member/archive/phone', { method: 'post', @@ -11,7 +14,8 @@ const Home = () => { return (
- + +
); }; diff --git a/threadpool/console-new/src/theme/default-algnorithm.ts b/threadpool/console-new/src/theme/default-algnorithm.ts deleted file mode 100644 index 20f7cc6a..00000000 --- a/threadpool/console-new/src/theme/default-algnorithm.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { theme } from 'antd'; -import { lightDefaultTheme } from '.'; -export const defaultAlgorithm = { - token: { - borderRadius: 2, - colorPrimary: lightDefaultTheme.primary, - fontSize: 14, - // colorBgBase: lightDefaultTheme.backgroundColor.bg1, - }, - components: { - Layout: { - bodyBg: lightDefaultTheme.backgroundColor.bg1, - headerBg: lightDefaultTheme.backgroundColor.bgHeader, - }, - Button: { - fontSize: 14, - }, - Table: { - borderRadius: 0, - borderRadiusLG: 0, - padding: 10, - paddingXS: 5, - margin: 0, - fontSize: 14, - colorBorderSecondary: lightDefaultTheme.borderColor.bl1, - paddingContentVerticalLG: 4, - }, - Modal: { - borderRadiusLG: 2, - borderRadiusSM: 2, - colorText: lightDefaultTheme.fontColor.fc3, - borderRadius: 2, - paddingContentHorizontalLG: 0, - paddingMD: 0, - }, - Menu: { - itemBg: lightDefaultTheme.backgroundColor.bg1, - activeBarWidth: 0, - activeBarHeight: 0, - activeBarBorderWidth: 0, - subMenuItemBorderRadius: 8, - horizontalItemBorderRadius: 8, - itemBorderRadius: 8, - }, - }, - algorithm: theme.defaultAlgorithm, -}; diff --git a/threadpool/console-new/yarn.lock b/threadpool/console-new/yarn.lock index 4924e267..6d118190 100644 --- a/threadpool/console-new/yarn.lock +++ b/threadpool/console-new/yarn.lock @@ -50,7 +50,7 @@ resolved "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz#4b2f65a17d4d32b526baa6414aca2117382bf8da" integrity sha512-4QBZg8ccyC6LPIRii7A0bZUk3+lEDCLnhB+FVsflGdcWPPmV+j3fire4AwwoqHV/BibgvBmR9ZIo4s867smv+g== -"@ant-design/icons@^5.2.2": +"@ant-design/icons@^5.2.2", "@ant-design/icons@^5.2.6": version "5.2.6" resolved "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.2.6.tgz#2d4a9a37f531eb2a20cebec01d6fb69cf593900d" integrity sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw== @@ -1187,7 +1187,7 @@ resolved "https://registry.npmmirror.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310" integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA== -"@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.19.4", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2": version "7.22.15" resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.22.15.tgz#38f46494ccf6cf020bd4eed7124b425e83e523b8" integrity sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA== @@ -4147,7 +4147,7 @@ data-urls@^2.0.0: whatwg-mimetype "^2.3.0" whatwg-url "^8.0.0" -dayjs@^1.11.1, dayjs@^1.9.1: +dayjs@^1.11.1, dayjs@^1.11.9, dayjs@^1.9.1: version "1.11.9" resolved "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.9.tgz#9ca491933fadd0a60a2c19f6c237c03517d71d1a" integrity sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA== @@ -5735,6 +5735,13 @@ husky@^8.0.0: resolved "https://registry.npmmirror.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184" integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg== +i18next-browser-languagedetector@^7.1.0: + version "7.1.0" + resolved "https://registry.npmmirror.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.1.0.tgz#01876fac51f86b78975e79b48ccb62e2313a2d7d" + integrity sha512-cr2k7u1XJJ4HTOjM9GyOMtbOA47RtUoWRAtt52z43r3AoMs2StYKyjS3URPhzHaf+mn10hY9dZWamga5WPQjhA== + dependencies: + "@babel/runtime" "^7.19.4" + i18next@^23.5.1: version "23.5.1" resolved "https://registry.npmmirror.com/i18next/-/i18next-23.5.1.tgz#7f7c35ffaa907618d9489f106d5006b09fbca3d3"