update language

src/components/Selector.vue

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

src/constants/data.ts

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

src/locales/index.ts

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

src/views/Settings.vue

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