feat: add setting locale supports in login page (#3642)

#### What type of PR is this?

/kind feature
/area console
/milestone 2.4.x

#### What this PR does / why we need it:

在登录页面添加语言设置的支持。

<img width="743" alt="image" src="https://user-images.githubusercontent.com/21301288/228879897-17d4a0c4-5d1d-4b5a-bd52-aaa1d5a287d1.png">

#### Special notes for your reviewer:

在登录页面测试语言切换是否生效即可。

#### Does this PR introduce a user-facing change?

```release-note
None
```

console/src/locales/index.ts

@@ -5,12 +5,32 @@ import en from "./en.yaml";
 // @ts-ignore
 import zhCN from "./zh-CN.yaml";
 
-const messages = {
-  en: en,
-  zh: zhCN,
-  "en-US": en,
-  "zh-CN": zhCN,
-};
+export const locales = [
+  {
+    code: "en",
+    package: en,
+    hidden: true,
+  },
+  {
+    name: "English",
+    code: "en-US",
+    package: en,
+  },
+  {
+    name: "简体中文",
+    code: "zh-CN",
+    package: zhCN,
+  },
+  {
+    code: "zh",
+    package: zhCN,
+  },
+];
+
+const messages = locales.reduce((acc, cur) => {
+  acc[cur.code] = cur.package;
+  return acc;
+}, {});
 
 const i18n = createI18n({
   legacy: false,

console/src/main.ts

@@ -245,10 +245,8 @@ async function initApp() {
     await userStore.fetchCurrentUser();
 
     // set locale
-    // @ts-ignore
     i18n.global.locale.value =
-      userStore.currentUser?.metadata.annotations?.["locale"] ||
-      getBrowserLanguage();
+      localStorage.getItem("locale") || getBrowserLanguage();
 
     if (userStore.isAnonymous) {
       return;

console/src/modules/system/users/Login.vue

@@ -1,11 +1,14 @@
 <script lang="ts" setup>
-import { onBeforeMount } from "vue";
+import { onBeforeMount, watch } from "vue";
 import router from "@/router";
 import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
 import { useUserStore } from "@/stores/user";
 import LoginForm from "@/components/login/LoginForm.vue";
 import { useRouteQuery } from "@vueuse/router";
 import SignupForm from "@/components/signup/SignupForm.vue";
+import { locales, getBrowserLanguage, i18n } from "@/locales";
+import MdiTranslate from "~icons/mdi/translate";
+import { useLocalStorage } from "@vueuse/core";
 
 const userStore = useUserStore();
 
@@ -24,6 +27,22 @@ const type = useRouteQuery<string>("type", "");
 function handleChangeType() {
   type.value = type.value === "signup" ? "" : "signup";
 }
+
+// setup locale
+const currentLocale = useLocalStorage(
+  "locale",
+  getBrowserLanguage() || locales[0].code
+);
+
+watch(
+  () => currentLocale.value,
+  (value) => {
+    i18n.global.locale.value = value;
+  },
+  {
+    immediate: true,
+  }
+);
 </script>
 <template>
   <div class="flex h-screen flex-col items-center justify-center">
@@ -39,5 +58,26 @@ function handleChangeType() {
         </span>
       </div>
     </div>
+    <div
+      class="absolute bottom-0 mb-10 flex items-center justify-center gap-2.5"
+    >
+      <label
+        for="locale"
+        class="block flex-shrink-0 text-sm font-medium text-gray-600"
+      >
+        <MdiTranslate />
+      </label>
+      <select
+        id="locale"
+        v-model="currentLocale"
+        class="block appearance-none rounded-md border-0 py-1.5 pl-3 pr-10 text-sm text-gray-800 outline-none ring-1 ring-inset ring-gray-200 focus:ring-primary"
+      >
+        <template v-for="locale in locales">
+          <option v-if="locale.name" :key="locale.code" :value="locale.code">
+            {{ locale.name }}
+          </option>
+        </template>
+      </select>
+    </div>
   </div>
 </template>