fix: login page refresh multiple times

This commit is contained in:
scarqin
2024-12-18 15:48:51 +08:00
parent a1bdc048a7
commit e449f86c01
3 changed files with 112 additions and 49 deletions
+34
View File
@@ -0,0 +1,34 @@
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint", "prettier"],
"rules": {
"react/react-in-jsx-scope": "off",
"prettier/prettier": "error",
"@typescript-eslint/no-explicit-any": "warn",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": ["warn"]
},
"settings": {
"react": {
"version": "detect"
}
}
}
+10
View File
@@ -0,0 +1,10 @@
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"tabWidth": 2,
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "avoid",
"jsxSingleQuote": false
}
@@ -4,69 +4,88 @@ import { memo, useEffect, useMemo } from 'react';
import { useGlobalContext } from '@common/contexts/GlobalStateContext';
import { Icon } from '@iconify/react/dist/iconify.js';
const LanguageSetting = ({mode = 'light'}:{mode?:'dark'|'light'}) => {
const { dispatch,state} = useGlobalContext()
const items = [
{
key: 'en-US',
label:<Button key="en" type="text" className="border-none p-0 flex items-center bg-transparent ">
English
</Button>,
title:'English'
},
{
key: 'ja-JP',
label: <Button key="jp" type="text" className="border-none p-0 flex items-center bg-transparent ">
const LanguageSetting = ({ mode = 'light' }: { mode?: 'dark' | 'light' }) => {
const { dispatch, state } = useGlobalContext();
const items = [
{
key: 'en-US',
label: (
<Button key="en" type="text" className="flex items-center p-0 bg-transparent border-none">
English
</Button>
),
title: 'English',
},
{
key: 'ja-JP',
label: (
<Button key="jp" type="text" className="flex items-center p-0 bg-transparent border-none">
</Button>,
title: '日本語',
},
{
key: 'zh-TW',
label: <Button key="tw" type="text" className="border-none p-0 flex items-center bg-transparent ">
</Button>,
title: '繁體中文',
},
{
key: 'zh-CN',
label: <Button key="cn" type="text" className="border-none p-0 flex items-center bg-transparent ">
</Button>,
title: '简体中文',
},
</Button>
),
title: '日本語',
},
{
key: 'zh-TW',
label: (
<Button key="tw" type="text" className="flex items-center p-0 bg-transparent border-none">
</Button>
),
title: '繁體中文',
},
{
key: 'zh-CN',
label: (
<Button key="cn" type="text" className="flex items-center p-0 bg-transparent border-none">
</Button>
),
title: '简体中文',
},
];
const langLabel = useMemo(()=>items.find((item) => item?.key === state.language)?.title,[state.language])
const langLabel = useMemo(
() => items.find(item => item?.key === state.language)?.title,
[state.language]
);
useEffect(()=>{
const savedLang = sessionStorage.getItem('i18nextLng')
const browserLang = navigator.language || navigator.userLanguage
if(savedLang){
dispatch({ type: 'UPDATE_LANGUAGE', language: savedLang });
}else{
dispatch({ type: 'UPDATE_LANGUAGE', language: browserLang });
}
},[
])
useEffect(() => {
const savedLang = sessionStorage.getItem('i18nextLng');
const browserLang = navigator.language || navigator.userLanguage;
if (savedLang) return;
dispatch({ type: 'UPDATE_LANGUAGE', language: browserLang });
}, []);
return (
<Dropdown
trigger={['hover']}
menu={{
items,
style:{minWidth:'80px'},
onClick: (e) => {
style: { minWidth: '80px' },
onClick: e => {
const { key } = e;
dispatch({ type: 'UPDATE_LANGUAGE', language: key });
dispatch({ type: 'UPDATE_LANGUAGE', language: key });
i18n.changeLanguage(key);
}
},
}}
>
<Button className={`border-none ${mode==='dark' ? "text-[#333] hover:text-[#333333b3]" : "text-[#ffffffb3] hover:text-[#fff] "}`} type="default" ghost >
<span className='flex items-center gap-[8px]'> <Icon icon="ic:baseline-language" width="14" height="14"/>{langLabel}</span>
</Button>
<Button
className={`border-none ${
mode === 'dark'
? 'text-[#333] hover:text-[#333333b3]'
: 'text-[#ffffffb3] hover:text-[#fff] '
}`}
type="default"
ghost
>
<span className="flex items-center gap-[8px]">
{' '}
<Icon icon="ic:baseline-language" width="14" height="14" />
{langLabel}
</span>
</Button>
</Dropdown>
);
};
export default memo(LanguageSetting);