Feat/locale support

package.json

@@ -29,6 +29,7 @@
     "stats-js": "^1.0.1",
     "three": "^0.149.0",
     "vue": "^3.2.45",
+    "vue-i18n": "^11.2.8",
     "vue-router": "^4.1.6",
     "vue3-apexcharts": "^1.4.1",
     "vuedraggable": "^4.1.0",

src/layout/widgets/Header.vue

@@ -73,6 +73,7 @@
             >
                 <v-icon size="small"></v-icon>
             </v-btn>
+            <LocaleSwitcher></LocaleSwitcher>
             <v-btn variant="text" icon="mdi" class="mr-2">
                 <v-avatar size="small" class="avatar">
                     <v-img :src="authEvent.userDetail.profile.avatar" alt="陈咩啊"></v-img>
@@ -115,6 +116,7 @@ import { computed, ref, onMounted } from 'vue';
 import Stats from 'stats-js';
 
 import logo from '@/assets/admin-logo.png';
+import LocaleSwitcher from './LocaleSwitcher.vue';
 
 const emit = defineEmits(['update:rail', 'update:mini', 'update:visible']);
 

src/layout/widgets/LocaleSwitcher.vue

@@ -0,0 +1,30 @@
+<template>
+    <v-btn ref="switchButton" icon variant="text">
+        <v-icon>mdi-earth</v-icon>
+    </v-btn>
+    <v-menu v-model="menuOpen" :activator="switchButton" location="bottom" anchor="top">
+        <v-list>
+            <v-list-item
+                v-for="(localeMessage, localeId) in localeMessages"
+                :key="localeId"
+                @click="changeLocale(localeId)"
+            >
+                <v-list-item-title>{{ localeMessage.languageName }}</v-list-item-title>
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useLocale } from 'vuetify';
+import localeMessages from '@/locales';
+
+const switchButton = ref(null);
+const menuOpen = ref(false);
+const { current } = useLocale();
+
+function changeLocale(locale) {
+    current.value = locale;
+}
+</script>

src/layout/widgets/MenuNodeTree.vue

@@ -1,13 +1,13 @@
 <template>
     <template v-for="(item, key) in props.data" :key="key">
-        <v-list-subheader v-if="item.name === 'Dashboard'">Dashboard</v-list-subheader>
-        <v-list-subheader v-if="item.name === 'componets'">Examples</v-list-subheader>
-        <v-list-subheader v-if="item.name === 'RBAC'">Access Control</v-list-subheader>
+        <v-list-subheader v-if="item.name === 'Dashboard'">{{ t('Dashboard') }}</v-list-subheader>
+        <v-list-subheader v-if="item.name === 'componets'">{{ t('Examples') }}</v-list-subheader>
+        <v-list-subheader v-if="item.name === 'RBAC'">{{ t('accessControl') }}</v-list-subheader>
         <!-- 如果是没有二级的菜单 -->
         <v-list-item
             v-if="item.meta?.visible && !item.children"
             :prepend-icon="item.meta?.icon as any"
-            :title="item.meta?.title as any"
+            :title="t(item.meta?.title) as any"
             :to="{ name: item.name }"
             class="mx-1"
             active-class="nav_active"
@@ -20,7 +20,7 @@
                 <v-list-item
                     v-bind="props"
                     :prepend-icon="item.meta.icon ? item.meta.icon : 'mdi-x?xx'"
-                    :title="item.meta.title as any"
+                    :title="t(item.meta.title) as any"
                     active-class="nav_active"
                     class="mx-1"
                     rounded="lg"
@@ -33,6 +33,9 @@
 
 <script lang="ts" setup>
 import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
 interface Props {
     data: any[];
 }

src/locales/en.ts

@@ -0,0 +1,14 @@
+const en = {
+    languageName: 'English',
+    accessControl: 'Access Control',
+    Components: 'Components',
+    Dashboard: 'Dashboard',
+    Examples: 'Examples',
+    Graphics: 'Graphics',
+    'Role-Based Access Control': 'Role-Based Access Control',
+    'Smart House': 'Smart House',
+    'Tesla Model S': 'Tesla Model S',
+    'Tree Menu': 'Tree Menu',
+};
+
+export default en;

src/locales/index.ts

@@ -0,0 +1,11 @@
+import en from './en';
+import zhHans from './zhHans';
+
+// NOTE: object keys must align with the exports from 'vuetify/locale'
+// See https://github.com/vuetifyjs/vuetify/blob/d751d7c60d05e6133878c373cb67ce353fe8613d/packages/vuetify/src/locale/index.ts
+const localeMessages = {
+    en: en,
+    zhHans: zhHans,
+};
+
+export default localeMessages;

src/locales/zhHans.ts

@@ -0,0 +1,14 @@
+const zhHans = {
+    languageName: '简体中文',
+    accessControl: '权限控制',
+    Components: '组件',
+    Dashboard: '主面板',
+    Examples: '范例',
+    Graphics: '图形化',
+    'Role-Based Access Control': '角色权限控制',
+    'Smart House': '智能家居',
+    'Tesla Model S': '特斯拉 Model S',
+    'Tree Menu': '菜单树',
+};
+
+export default zhHans;

src/main.ts

@@ -3,14 +3,32 @@ import { createPinia } from 'pinia';
 import './styles/index.scss';
 import App from './App.vue';
 import router, { syncRouter } from './router';
-import { vuetify } from '@/plugins/vuetify';
+import { createVuetify } from 'vuetify';
+import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n';
+import { createI18n, useI18n } from 'vue-i18n';
+import localeMessages from './locales';
 import registeComponent from './components';
 import { setupLiquidGlassDirective } from './directives/liquidGlass';
 
 const app = createApp(App);
 registeComponent(app);
 app.use(createPinia());
+
+const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: localeMessages,
+});
+app.use(i18n);
+
+const vuetify = createVuetify({
+    locale: {
+        adapter: createVueI18nAdapter({ i18n, useI18n }),
+    },
+});
 app.use(vuetify);
+
 setupLiquidGlassDirective(app);
 syncRouter().then((res) => {
     app.use(router);