From 4ba638787598216ec5186ad8c2a1ceb1a2252713 Mon Sep 17 00:00:00 2001
From: HCode <71808213+hyf-github-user@users.noreply.github.com>
Date: Mon, 2 Sep 2024 12:16:51 +0800
Subject: [PATCH] Hcode/fix luma (#135)

---
 ...-8919d19f-2aef-4aca-a427-e12da5499e47.json |  7 ++
 src/components/common/LanguageSelector.vue    | 68 +++++++++++++++++++
 src/components/common/TopHeader.vue           |  7 +-
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 change/@acedatacloud-nexior-8919d19f-2aef-4aca-a427-e12da5499e47.json
 create mode 100644 src/components/common/LanguageSelector.vue

diff --git a/change/@acedatacloud-nexior-8919d19f-2aef-4aca-a427-e12da5499e47.json b/change/@acedatacloud-nexior-8919d19f-2aef-4aca-a427-e12da5499e47.json
new file mode 100644
index 00000000..a9ebdbf2
--- /dev/null
+++ b/change/@acedatacloud-nexior-8919d19f-2aef-4aca-a427-e12da5499e47.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add language",
+  "packageName": "@acedatacloud/nexior",
+  "email": "1348977728@qq.com",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/common/LanguageSelector.vue b/src/components/common/LanguageSelector.vue
new file mode 100644
index 00000000..45081bf9
--- /dev/null
+++ b/src/components/common/LanguageSelector.vue
@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <el-dropdown max-height="700" trigger="click" @command="onSelectLocale">
+      <i class="icon">
+        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em">
+          <path
+            fill="currentColor"
+            d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"
+          ></path>
+        </svg>
+      </i>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item v-for="(locale, localeIndex) in locales" :key="localeIndex" :command="locale.value">
+            {{ locale.label }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { ElDropdown, ElDropdownItem, ElDropdownMenu } from 'element-plus';
+import { SUPPORTED_LOCALES, setI18nLanguage } from '@/i18n';
+import { setCookie } from 'typescript-cookie';
+import { getDomain } from '@/utils/initializer';
+
+export default defineComponent({
+  name: 'LanguageSelector',
+  components: {
+    ElDropdown,
+    ElDropdownItem,
+    ElDropdownMenu
+  },
+  data() {
+    return {
+      locales: SUPPORTED_LOCALES
+    };
+  },
+  methods: {
+    async onSelectLocale(locale: string) {
+      // change router
+      this.$router.push({ query: { ...this.$route.query, locale: undefined } });
+      await setI18nLanguage(locale);
+      this.setCookie(locale);
+      window.location.reload();
+    },
+    setCookie(locale: string) {
+      setCookie('LOCALE', locale, {
+        path: '/',
+        domain: getDomain()
+      });
+    }
+  }
+});
+</script>
+
+<style scoped>
+.icon {
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 4px;
+  color: var(--el-menu-text-color);
+  display: inline-block;
+}
+</style>
diff --git a/src/components/common/TopHeader.vue b/src/components/common/TopHeader.vue
index 14a990f3..8ba300d6 100644
--- a/src/components/common/TopHeader.vue
+++ b/src/components/common/TopHeader.vue
@@ -35,10 +35,12 @@
         <el-button type="primary" class="float-right" size="small" round @click="onLogin">{{
           $t('common.button.login')
         }}</el-button>
+        <language-selector class="locale float-right mr-4" />
         <dark-selector class="float-right mr-4" />
       </div>
       <div v-else class="float-right">
         <dark-selector />
+        <language-selector class="locale" />
         <div class="console" @click="onConsole">
           {{ $t('common.button.console') }}
         </div>
@@ -63,6 +65,7 @@ import { getBaseUrlAuth } from '@/utils';
 import { ROUTE_AUTH_LOGIN, ROUTE_CONSOLE_ROOT, ROUTE_INDEX } from '@/router';
 import { ElCol, ElRow, ElDropdown, ElMenu, ElSubMenu, ElMenuItem, ElDropdownItem, ElButton } from 'element-plus';
 import DarkSelector from './DarkSelector2.vue';
+import LanguageSelector from './LanguageSelector.vue';
 import Logo from './Logo.vue';
 
 export default defineComponent({
@@ -77,7 +80,8 @@ export default defineComponent({
     ElMenuItem,
     ElDropdownItem,
     ElButton,
-    ElSubMenu
+    ElSubMenu,
+    LanguageSelector
   },
   data() {
     return {
@@ -197,6 +201,7 @@ $height: 60px;
   .locale {
     cursor: pointer;
     display: inline-block;
+    margin-left: 10px; // Add left margin if needed
   }
 }
 @media only screen and (max-width: 768px) {