Skip to content

Commit 6c8e214

Browse files
jason5ng32jason5ng32
committed
Language Setting
1 parent b8cdd99 commit 6c8e214

File tree

7 files changed

+60
-31
lines changed

7 files changed

+60
-31
lines changed

‎frontend/components/Nav.vue‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,6 @@
1616
}">ing</span>
1717
</a>
1818

19-
<div class="btn-group mx-1" :data-bs-theme="isDarkMode ? 'dark' : 'light'">
20-
<button type="button" class="btn btn-sm dropdown-toggle jn-button" data-bs-toggle="dropdown"
21-
aria-expanded="false" aria-label="Language Selection">
22-
<i class="bi bi-translate"></i>
23-
</button>
24-
<ul class="dropdown-menu">
25-
<li><a class="dropdown-item" href="?hl=zh" @click="trackEvent('Nav', 'ToggleClick', 'LanguageChange')"><i
26-
class="fi fi-cn"></i> 中文</a></li>
27-
<li><a class="dropdown-item" href="?hl=en" @click="trackEvent('Nav', 'ToggleClick', 'LanguageChange')"><i
28-
class="fi fi-us"></i> English</a></li>
29-
<li><a class="dropdown-item" href="?hl=fr" @click="trackEvent('Nav', 'ToggleClick', 'LanguageChange')"><i
30-
class="fi fi-fr"></i> Français</a></li>
31-
</ul>
32-
</div>
33-
3419
<div id="Preferences" class="preference-button" @click.prevent="OpenPreferences" role="button"
3520
aria-label="Preferences">
3621
<i class="bi bi-toggles"></i>

‎frontend/components/widgets/Preferences.vue‎

Lines changed: 37 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,32 @@
1212
<div class="offcanvas-body pt-0 m-2">
1313
<div class="preferences-tip">{{ t('nav.preferences.preferenceTips') }}</div>
1414

15+
<!-- 语言设置 -->
16+
17+
<div id="Pref_language">
18+
<div class="form-label col-12 preferences-title"><i class="bi bi-translate"></i> {{
19+
t('nav.preferences.language') }}</div>
20+
<div class="btn-group-vertical col-auto w-50 mb-2" role="group" aria-label="Color Scheme">
21+
<template v-for="lang in ['auto','zh', 'en', 'fr']">
22+
<input type="radio" class="btn-check" :name="'language' + lang" :id="'language' + lang"
23+
autocomplete="off" :value="lang" v-model="userPreferences.lang"
24+
@change="prefLanguage(lang)">
25+
<label class="btn jn-number text-start" :class="{
26+
'btn-outline-dark': !isDarkMode,
27+
'btn-outline-light': isDarkMode,
28+
'active fw-bold': userPreferences.lang === lang
29+
}" :for="'language' + lang">
30+
<span v-if="lang === 'zh'"><i class="fi fi-cn"></i> 中文&nbsp;</span>
31+
<span v-else-if="lang === 'en'"><i class="fi fi-us"></i> English&nbsp;</span>
32+
<span v-else-if="lang === 'fr'"><i class="fi fi-fr"></i> Français&nbsp;</span>
33+
<span v-else>{{ t('nav.preferences.systemAuto') }}&nbsp;</span>
34+
<i class="bi bi-check2-circle" v-if="userPreferences.lang === lang"></i>
35+
</label>
36+
</template>
37+
</div>
38+
<div class="preferences-tip">{{ t('nav.preferences.languageTips') }}</div>
39+
</div>
40+
1541
<!-- 主题方案 -->
1642

1743
<div id="Pref_colorScheme">
@@ -31,7 +57,7 @@
3157
t('nav.preferences.colorLight') }}</span>
3258
<span v-else-if="theme === 'dark'"><i class="bi bi-moon-stars"></i> {{
3359
t('nav.preferences.colorDark') }}</span>
34-
<span v-else>{{ t('nav.preferences.colorAuto') }}</span>
60+
<span v-else>{{ t('nav.preferences.systemAuto') }}</span>
3561
</label>
3662
</template>
3763
</div>
@@ -94,7 +120,7 @@
94120
:class="[isDarkMode ? 'border-light' : 'border-dark']">
95121
<div class="me-auto">
96122
<div class="fw-bold"><label class="form-check-label" for="autoStart">{{
97-
t('nav.preferences.autoRun')
123+
t('nav.preferences.autoRun')
98124
}}</label>
99125
</div>
100126
<div class="preferences-tip">{{ t('nav.preferences.autoRunTips') }}</div>
@@ -110,7 +136,7 @@
110136
:class="[isDarkMode ? 'border-light' : 'border-dark']" v-if="userPreferences.autoStart">
111137
<div class="me-auto">
112138
<div class="fw-bold"><label class="form-check-label" for="ConnectivityRefresh">{{
113-
t('nav.preferences.connectivityAutoRefresh') }}</label></div>
139+
t('nav.preferences.connectivityAutoRefresh') }}</label></div>
114140
<div class="preferences-tip">{{ t('nav.preferences.connectivityAutoRefreshTips') }}</div>
115141
</div>
116142
<div class="form-check form-switch col-auto ">
@@ -125,7 +151,7 @@
125151
:class="[isDarkMode ? 'border-light' : 'border-dark']" v-if="configs.bingMap">
126152
<div class="me-auto">
127153
<div class="fw-bold"><label class="form-check-label" for="showMap">{{
128-
t('nav.preferences.showMap')
154+
t('nav.preferences.showMap')
129155
}}</label>
130156
</div>
131157
<div class="preferences-tip">{{ t('nav.preferences.showMapTips') }}</div>
@@ -141,7 +167,7 @@
141167
:class="[isDarkMode ? 'border-light' : 'border-dark']" v-if="isMobile">
142168
<div class="me-auto">
143169
<div class="fw-bold"><label class="form-check-label" for="simpleMode">{{
144-
t('nav.preferences.simpleMode')
170+
t('nav.preferences.simpleMode')
145171
}}</label></div>
146172
<div class="preferences-tip">{{ t('nav.preferences.simpleModeTips') }}</div>
147173
</div>
@@ -156,7 +182,7 @@
156182
:class="[isDarkMode ? 'border-light' : 'border-dark']">
157183
<div class="me-auto">
158184
<div class="fw-bold"><label class="form-check-label" for="ConnectivityNotifications">{{
159-
t('nav.preferences.popupConnectivityNotifications') }}</label>
185+
t('nav.preferences.popupConnectivityNotifications') }}</label>
160186
</div>
161187
<div class="preferences-tip">{{ t('nav.preferences.popupConnectivityNotificationsTips') }}
162188
</div>
@@ -186,7 +212,7 @@ import { useMainStore } from '@/store';
186212
import { useI18n } from 'vue-i18n';
187213
import { trackEvent } from '@/utils/use-analytics';
188214
189-
const {t} = useI18n();
215+
const { t } = useI18n();
190216
191217
const store = useMainStore();
192218
const isDarkMode = computed(() => store.isDarkMode);
@@ -252,7 +278,10 @@ const prefTheme = (value) => {
252278
trackEvent('Nav', 'PreferenceClick', 'Theme');
253279
};
254280
255-
281+
const prefLanguage = (value) => {
282+
store.updatePreference('lang', value);
283+
trackEvent('Nav', 'PrefereceClick', 'LanguageChange');
284+
};
256285
257286
const prefConnectivityRefresh = (value) => {
258287
store.updatePreference('connectivityAutoRefresh', value);

‎frontend/locales/en.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"title": "Preferences",
1616
"preferenceTips": "These settings are saved in your browser for easy reuse. Some options require refreshing the page to take effect.",
1717
"colorScheme": "Color Scheme",
18-
"colorAuto": "Auto",
18+
"systemAuto": "Auto",
1919
"colorLight": "Day",
2020
"colorDark": "Night",
2121
"ipSourcesToCheck": "Servers To Check IPs",
@@ -32,7 +32,9 @@
3232
"popupConnectivityNotifications": "Pop-up Connectivity Alerts",
3333
"popupConnectivityNotificationsTips": "When enabled, the initial check's results are shown as a pop-up alert.",
3434
"ipDB": "IP Geolocation Database",
35-
"ipDBTips": "You can select the default IP geolocation source to use. If the selected source is unavailable, the system will use the subsequent sources in order."
35+
"ipDBTips": "You can select the default IP geolocation source to use. If the selected source is unavailable, the system will use the subsequent sources in order.",
36+
"language": "Language Setting",
37+
"languageTips": "Refreshing the browser will take effect."
3638
}
3739
},
3840
"shell": {

‎frontend/locales/fr.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"title": "Préférences",
1616
"preferenceTips": "Ces paramètres sont enregistrés dans votre navigateur pour une utilisation ultérieure. Certains paramètres nécessitent un rafraîchissement de la page pour prendre effet.",
1717
"colorScheme": "Schéma de Couleurs",
18-
"colorAuto": "Par Défaut Système",
18+
"systemAuto": "Système",
1919
"colorLight": "Jour",
2020
"colorDark": "Nuit",
2121
"ipSourcesToCheck": "Serveurs pour vérifier les adresses IP",
@@ -32,7 +32,9 @@
3232
"popupConnectivityNotifications": "Alertes de Connectivité Pop-up",
3333
"popupConnectivityNotificationsTips": "Activé, les résultats de la première vérification sont affichés sous forme d'alerte pop-up.",
3434
"ipDB": "Base de données de géolocalisation IP",
35-
"ipDBTips": "Vous pouvez sélectionner la source de données de géolocalisation IP par défaut. Si la source sélectionnée n'est pas disponible, le système utilisera les sources suivantes."
35+
"ipDBTips": "Vous pouvez sélectionner la source de données de géolocalisation IP par défaut. Si la source sélectionnée n'est pas disponible, le système utilisera les sources suivantes.",
36+
"language": "Paramètres de langue",
37+
"languageTips": "Rafraîchissement du navigateur pour prendre effet."
3638
}
3739
},
3840
"shell": {

‎frontend/locales/i18n.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,25 @@ import fr from './fr.json';
77

88

99
const messages = { en, zh, fr };
10+
const supportedLanguages = Object.keys(messages);
1011

12+
// 设置语言
1113
function setLanguage() {
1214
let locale = 'en';
15+
let storedPreferences = localStorage.getItem('userPreferences');
16+
storedPreferences = storedPreferences ? JSON.parse(storedPreferences) : {};
17+
if (supportedLanguages.includes(storedPreferences.lang)) {
18+
locale = storedPreferences.lang;
19+
return locale;
20+
}
1321
const searchParams = new URLSearchParams(window.location.search);
1422
const browserLanguage = navigator.language || navigator.userLanguage;
1523
const hl = searchParams.get('hl');
16-
if (hl && ['en', 'zh', 'fr'].includes(hl)) {
24+
if (hl && supportedLanguages.includes(hl)) {
1725
locale = hl;
1826
} else if (!hl) {
1927
const bl = browserLanguage.substring(0, 2);
20-
if (['en', 'zh', 'fr'].includes(bl)) {
28+
if (supportedLanguages.includes(bl)) {
2129
locale = bl;
2230
} else {
2331
locale = 'en';

‎frontend/locales/zh.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"title": "偏好设置",
1616
"preferenceTips": "这些设置会保存在浏览器，方便下次使用。部分选项需要刷新页面方可生效。",
1717
"colorScheme": "颜色方案",
18-
"colorAuto": "跟随系统",
18+
"systemAuto": "跟随系统",
1919
"colorLight": "白天",
2020
"colorDark": "黑夜",
2121
"ipSourcesToCheck": "IP 检测服务器数量",
@@ -32,7 +32,9 @@
3232
"popupConnectivityNotifications": "显示可用性检测气泡",
3333
"popupConnectivityNotificationsTips": "开启后，将会在首次检测时以气泡形式提示可用性结果。",
3434
"ipDB": "IP 解析数据源",
35-
"ipDBTips": "你可以选择你默认使用的 IP 地理位置数据源，如果你选定的不可用，系统会依次使用后续的数据源。"
35+
"ipDBTips": "你可以选择你默认使用的 IP 地理位置数据源，如果你选定的不可用，系统会依次使用后续的数据源。",
36+
"language": "语言设置",
37+
"languageTips": "刷新浏览器后生效。"
3638
}
3739
},
3840
"shell": {

‎frontend/store.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ export const useMainStore = defineStore('main', {
128128
popupConnectivityNotifications: true,
129129
ipCardsToShow: 6,
130130
ipGeoSource: 0,
131+
lang: 'auto',
131132
};
132133
const storedPreferences = localStorage.getItem('userPreferences');
133134
let preferencesToStore;

0 commit comments

Comments
 (0)