github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-20 14:37:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

update language

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-31 11:14:44 +08:00
parent 32ad9e4d15
commit c64ded8078
4 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Selector.vue
View File

@ -49,7 +49,7 @@ interface Option {
const emit = defineEmits(["change", "query"]); const emit = defineEmits(["change", "query"]);
const props = defineProps({ const props = defineProps({
options: { options: {
type: Array as PropType<(Option & { disabled: boolean })[]>, type: Array as PropType<(Option & { disabled?: boolean })[]>,
default: () => [], default: () => [],
}, },
value: { value: {

5
src/constants/data.ts
View File

@ -19,3 +19,8 @@ export enum TimeType {
HOUR_TIME = "HOUR", HOUR_TIME = "HOUR",
DAY_TIME = "DAY", DAY_TIME = "DAY",
} }
export const Languages = [
{ label: "English", value: "en" },
{ label: "Chinese", value: "zh" },
];

5
src/locales/index.ts
View File

@ -23,13 +23,12 @@ const messages = {
zh, zh,
}; };
const savedLanguage = window.localStorage.getItem("lang"); const savedLanguage = window.localStorage.getItem("language");
let language = navigator.language.split("-")[0]; let language = navigator.language.split("-")[0];
if (!savedLanguage) { if (!savedLanguage) {
window.localStorage.setItem("lang", language); window.localStorage.setItem("language", language);
} }
language = savedLanguage ? savedLanguage : language; language = savedLanguage ? savedLanguage : language;
const i18n = createI18n({ const i18n = createI18n({
locale: language, locale: language,
messages, messages,

23
src/views/Settings.vue
View File

@ -16,12 +16,13 @@ limitations under the License. -->
<div class="settings"> <div class="settings">
<div class="flex-h item"> <div class="flex-h item">
<span class="label">{{ t("language") }}</span> <span class="label">{{ t("language") }}</span>
<el-switch <Selector
v-model="lang" v-model="lang"
:options="Languages"
placeholder="Select a language"
@change="setLang" @change="setLang"
active-text="En" size="small"
inactive-text="Zh" style="font-size: 14px"
style="height: 25px"
/> />
</div> </div>
<div class="flex-h item"> <div class="flex-h item">
@ -72,12 +73,14 @@ import { ref, reactive } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import timeFormat from "@/utils/timeFormat"; import timeFormat from "@/utils/timeFormat";
import { Languages } from "@/constants/data";
import Selector from "@/components/Selector.vue";
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const state = reactive<{ timer: ReturnType<typeof setInterval> | null }>({ const state = reactive<{ timer: ReturnType<typeof setInterval> | null }>({
timer: null, timer: null,
}); });
const lang = ref<boolean>(locale.value === "zh" ? false : true); const lang = ref<string>(locale.value || "en");
const autoTime = ref<number>(6); const autoTime = ref<number>(6);
const auto = ref<boolean>(false); const auto = ref<boolean>(false);
const appStore = useAppStoreWithOut(); const appStore = useAppStoreWithOut();
@ -119,13 +122,8 @@ const changeAutoTime = () => {
} }
}; };
const setLang = (): void => { const setLang = (): void => {
if (lang.value) { locale.value = lang.value;
locale.value = "en"; window.localStorage.setItem("language", lang.value);
window.localStorage.setItem("lang", "en");
} else {
locale.value = "zh";
window.localStorage.setItem("lang", "zh");
}
}; };
const setUTCHour = () => { const setUTCHour = () => {
if (utcHour.value < -12) { if (utcHour.value < -12) {
@ -180,7 +178,6 @@ const setUTCMin = () => {
.settings { .settings {
color: #222; color: #222;
font-family: inherit;
font-size: 14px; font-size: 14px;
padding: 20px; padding: 20px;