feat(I18n): Add Ii8n

feat(LocaleDropdown): Add LocaleDropdown Component

feat(store): Add localeStore

src/components/LocaleDropdown/index.ts

@@ -1,3 +1,3 @@
-import VLocaleDropdown from './src/VLocaleDropdown.vue'
+import LocaleDropdown from './src/LocaleDropdown.vue'
 
-export { VLocaleDropdown }
+export { LocaleDropdown }

src/components/LocaleDropdown/src/LocaleDropdown.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
+import { useLocaleStore } from '@/store/modules/locale'
+import { useCssVar } from '@vueuse/core'
+import { useLocale } from '@/hooks/web/useLocale'
+
+const localeStore = useLocaleStore()
+
+const langMap = computed(() => localeStore.localeMap)
+
+const textColor = useCssVar('--el-text-color-primary', document.documentElement)
+
+function setLang(lang: LocaleType) {
+  localeStore.setLocale({
+    lang
+  })
+  const { changeLocale } = useLocale()
+  changeLocale(lang)
+}
+</script>
+
+<template>
+  <ElDropdown trigger="click" @command="setLang">
+    <Icon icon="ion:language-sharp" :color="textColor" class="cursor-pointer" />
+    <template #dropdown>
+      <ElDropdownMenu>
+        <ElDropdownItem v-for="item in langMap" :key="item.lang" :command="item.lang">
+          {{ item.name }}
+        </ElDropdownItem>
+      </ElDropdownMenu>
+    </template>
+  </ElDropdown>
+</template>

src/components/LocaleDropdown/src/VLocaleDropdown.vue

@@ -1,19 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div>s</div>
-  <!-- <el-dropdown trigger="click">
-    <span class="el-dropdown-link">
-      Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
-    </span>
-    <template #dropdown>
-      <el-dropdown-menu>
-        <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
-        <el-dropdown-item :icon="CirclePlusFilled"> Action 2 </el-dropdown-item>
-        <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
-        <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
-        <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
-      </el-dropdown-menu>
-    </template>
-  </el-dropdown> -->
-</template>