diff --git a/package.json b/package.json index e732b5e..819cdd2 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "dayjs": "^1.10.5", "eventemitter3": "^4.0.7", "immer": "^9.0.3", - "jotai": "^1.0.0", + "jotai": "^1.1.0", "lodash-es": "^4.17.21", "neverthrow": "^4.2.1", "react": "^17.0.2", @@ -69,6 +69,6 @@ "react-virtualized-auto-sizer": "^1.0.5", "react-window": "^1.8.6", "swr": "^0.5.6", - "use-immer": "^0.5.2" + "use-immer": "^0.6.0" } } diff --git a/src/containers/Proxies/components/Group/index.tsx b/src/containers/Proxies/components/Group/index.tsx index 14e096d..7bfb715 100644 --- a/src/containers/Proxies/components/Group/index.tsx +++ b/src/containers/Proxies/components/Group/index.tsx @@ -48,13 +48,13 @@ export function Group (props: GroupProps) { const canClick = config.type === 'Selector' return (
-
- { config.name } - { config.type } +
+ { config.name } + { config.type }
-
+
-
-
- { provider.name } +
+
+ { provider.name } { provider.vehicleType }
-
+
{ provider.updatedAt && - { `${t('providerUpdateTime')}: ${fromNow(new Date(provider.updatedAt), lang)}`} + { `${t('providerUpdateTime')}: ${fromNow(new Date(provider.updatedAt), lang)}`} } - - + +
    diff --git a/src/containers/Proxies/components/Provider/style.scss b/src/containers/Proxies/components/Provider/style.scss index 946eaf0..b10615e 100644 --- a/src/containers/Proxies/components/Provider/style.scss +++ b/src/containers/Proxies/components/Provider/style.scss @@ -7,25 +7,6 @@ color: $color-black-light; } -.proxy-provider-header { - display: flex; - align-items: center; - justify-content: space-between; -} - -.proxy-provider-header-part { - display: flex; - align-items: center; -} - -.proxy-provider-name { - margin-right: 24px; -} - -.proxy-provider-proxies { - list-style: none; -} - .proxy-provider-item { box-shadow: 0 0 24px 0 rgba(44, 138, 248, 0.2); @@ -33,28 +14,3 @@ box-shadow: 0 0 24px 0 rgba(84, 117, 154, 0.4); } } - -.proxy-provider-update { - line-height: 14px; - font-size: 14px; -} - -.proxy-provider-icon { - margin-left: 20px; - cursor: pointer; - - &.healthcheck { - color: $color-red; - } -} - -@media (max-width: 768px) { - .proxy-provider-header { - flex-direction: column; - align-items: flex-start; - } - - .proxy-provider-header-part { - margin: 6px 0; - } -} diff --git a/src/i18n/index.ts b/src/i18n/index.ts index c8c28b2..651fbd6 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -1,5 +1,3 @@ -import { getLocalStorageItem, setLocalStorageItem } from '@lib/helper' - import en_US from './en_US' import zh_CN from './zh_CN' @@ -10,34 +8,10 @@ export const Language = { export type Lang = keyof typeof Language -const languageKey = 'language' - export const locales = Object.keys(Language) -function getNavigatorLanguage (): string[] { - const found: string[] = [] - - if (window.navigator) { - if (window.navigator.languages) { - for (const lan of window.navigator.languages) { - found.push(lan) - } - } else if (window.navigator.language) { - found.push(navigator.language) - } - } - - return found -} - -export function getLanguage (): Lang { - const localLanguage = getLocalStorageItem(languageKey) - if (localLanguage && locales.includes(localLanguage)) { - return localLanguage as Lang - } - - const navigatorLanguage = getNavigatorLanguage() - for (const language of navigatorLanguage) { +export function getDefaultLanguage (): Lang { + for (const language of window.navigator.languages) { if (language.includes('zh')) { return 'zh_CN' } else if (language.includes('us')) { @@ -47,7 +21,3 @@ export function getLanguage (): Lang { return 'en_US' } - -export function setLanguage (lang: Lang) { - setLocalStorageItem(languageKey, lang) -} diff --git a/src/lib/helper.ts b/src/lib/helper.ts index 7a9c537..ccf160f 100644 --- a/src/lib/helper.ts +++ b/src/lib/helper.ts @@ -6,10 +6,6 @@ export function setLocalStorageItem (key: string, value: string) { return window.localStorage.setItem(key, value) } -export function removeLocalStorageItem (key: string) { - return window.localStorage.removeItem(key) -} - export function noop () {} export function getSearchParam(key: string) { diff --git a/src/lib/request.ts b/src/lib/request.ts index 16592f4..7585d81 100644 --- a/src/lib/request.ts +++ b/src/lib/request.ts @@ -1,6 +1,6 @@ import axios, { AxiosError } from 'axios' import { ResultAsync } from 'neverthrow' -import { getLocalStorageItem, getSearchParam, to } from '@lib/helper' +import { getLocalStorageItem, getSearchParam } from '@lib/helper' import { isClashX, jsBridge } from '@lib/jsBridge' import { createAsyncSingleton } from '@lib/asyncSingleton' import { Log } from '@models/Log' diff --git a/src/lib/streamer.ts b/src/lib/streamer.ts index 0a94a9d..6d88047 100644 --- a/src/lib/streamer.ts +++ b/src/lib/streamer.ts @@ -1,7 +1,6 @@ import EventEmitter from 'eventemitter3' import { SetRequired } from 'type-fest' import { ResultAsync } from 'neverthrow' -import { to } from '@lib/helper' export interface Config { url: string diff --git a/src/stores/jotai.ts b/src/stores/jotai.ts index 7760bb6..2c209e5 100644 --- a/src/stores/jotai.ts +++ b/src/stores/jotai.ts @@ -1,12 +1,13 @@ import { ResultAsync } from 'neverthrow' import { AxiosError } from 'axios' import { atom, useAtom } from 'jotai' +import { atomWithStorage } from 'jotai/utils' import { atomWithImmer } from 'jotai/immer' -import { useCallback, useEffect } from 'react' +import { useCallback, useEffect, useMemo } from 'react' import { get } from 'lodash-es' import useSWR from 'swr' -import { getLanguage, Language, setLanguage, locales, Lang } from '@i18n' +import { Language, locales, Lang, getDefaultLanguage } from '@i18n' import { useWarpImmerSetter } from '@lib/jotai' import * as API from '@lib/request' import * as Models from '@models' @@ -38,15 +39,11 @@ export function useIdentity () { return { identity: id, wrapFetcher, set } } -const language = atom(getLanguage()) +export const languageAtom = atomWithStorage('language', undefined) export function useI18n () { - const [lang, set] = useAtom(language) - - function setLang (lang: Lang) { - set(lang) - setLanguage(lang) - } + const [defaultLang, setLang] = useAtom(languageAtom) + const lang = useMemo(() => defaultLang ?? getDefaultLanguage(), [defaultLang]) const translation = useCallback( function (namespace: keyof typeof Language['en_US']) { diff --git a/windi.config.ts b/windi.config.ts index 2c2edd1..0056bf8 100644 --- a/windi.config.ts +++ b/windi.config.ts @@ -7,7 +7,8 @@ export default defineConfig({ primary: { 500: '#57befc', 600: '#2c8af8' - } + }, + red: '#f56c6c' }, textShadow: { primary: '0 0 6px rgb(44 138 248 / 40%)' diff --git a/yarn.lock b/yarn.lock index 3893fe6..5fd32d7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1634,10 +1634,10 @@ jiti@^1.10.1: resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.10.1.tgz#bc2a175b9435274dc8659d3d9a121a91c6b3a1af" integrity sha512-qux9juDtAC8HlZxAk/fku73ak4TWNLigRFTNzFShE/kw4bXVFsVu538vLXAxvNyPszXgpX4YxkXfwTYEi+zf5A== -jotai@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.0.0.tgz#d5e7f7044d89e543a9c7429a9723e11528b2760e" - integrity sha512-6hZGy3hqIlBlLSKppTrxDc1Vb7mi3I8eEQOIu7Kj6ceX1PSzjxdsEVC9TjAqaio8gZJEz+2ufNUf4afvbs0RXg== +jotai@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.1.0.tgz#a0f1afd15a187ab5578250d54a42bac999bfbaf9" + integrity sha512-+c/bMxS/c1LgsOYVfevOYLAu+WEgn85TJhmBoNSNHjMV+mTKZY0ACSyCrX1yz8KialK4+Ggm6d7Ek3sTXy8UgA== js-cookie@^2.2.1: version "2.2.1" @@ -2706,10 +2706,10 @@ uri-js@^4.2.2: dependencies: punycode "^2.1.0" -use-immer@^0.5.2: - version "0.5.2" - resolved "https://registry.yarnpkg.com/use-immer/-/use-immer-0.5.2.tgz#5f61d5662eb0df192663bb78e200521858e92499" - integrity sha512-aHnLa85kftWo05lqJVOy3GLXrydqu6kl0MXvo5k5OW8IoLJixa9NY/48Xdy0LlcqdakBTFLbSDZaYVPMVhYy8Q== +use-immer@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/use-immer/-/use-immer-0.6.0.tgz#ca6aa5ade93018e2c65cf128d19ada54fc23f70d" + integrity sha512-dFGRfvWCqPDTOt/S431ETYTg6+uxbpb7A1pptufwXVzGJY3RlXr38+3wyLNpc6SbbmAKjWl6+EP6uW74fkEsXQ== v8-compile-cache@^2.0.3: version "2.3.0"