add i18n

2023-02-13 18:59:58 +08:00 · 2023-02-13 18:59:58 +08:00 · f2d088a42b
commit f2d088a42b
parent cfa8d07045
21 changed files with 369 additions and 200 deletions
--- a/packages/dashboard/auto-imports.d.ts
+++ b/packages/dashboard/auto-imports.d.ts
@ -182,6 +182,7 @@ declare global {
  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
  const useGamepad: typeof import('@vueuse/core')['useGamepad']
  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useI18n: typeof import('vue-i18n')['useI18n']
  const useIdle: typeof import('@vueuse/core')['useIdle']
  const useImage: typeof import('@vueuse/core')['useImage']
  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
@ -483,6 +484,7 @@ declare module 'vue' {
    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useI18n: UnwrapRef<typeof import('vue-i18n')['useI18n']>
    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
--- a/packages/dashboard/package.json
+++ b/packages/dashboard/package.json
@ -15,15 +15,18 @@
    "@casl/vue": "^2.2.1",
    "@floating-ui/dom": "^1.2.0",
    "@iconify/vue": "^4.1.0",
+    "@intlify/unplugin-vue-i18n": "^0.8.2",
    "@ping-pub/chain-registry-client": "^0.0.25",
    "@vitejs/plugin-vue-jsx": "^3.0.0",
    "@vueuse/core": "^9.12.0",
    "@vueuse/math": "^9.12.0",
+    "axios": "^1.3.2",
    "cross-fetch": "^3.1.5",
    "pinia": "^2.0.28",
    "vite-plugin-vue-layouts": "^0.7.0",
    "vite-plugin-vuetify": "^1.0.2",
    "vue": "^3.2.45",
+    "vue-i18n": "^9.2.2",
    "vue-router": "^4.1.6",
    "vue3-perfect-scrollbar": "^1.6.1",
    "vuetify": "3.0.6",
--- a/packages/dashboard/src/layouts/components/ChainProfile.vue
+++ b/packages/dashboard/src/layouts/components/ChainProfile.vue
@ -0,0 +1,55 @@
+<script setup lang="ts">
+
+import { useBlockchain } from '@/stores/useBlockchain';
+const chainStore = useBlockchain()
+
+</script>
+
+<template>
+  <VListItem class="m-0 p-0">
+    <template #prepend>
+    <VBadge
+      dot
+      location="bottom right"
+      offset-x="3"
+      offset-y="3"
+      bordered
+      color="success"
+      class="mr-2"
+    >
+      <VAvatar
+        class="cursor-pointer"
+        color="primary"
+        variant="tonal"
+      >
+        <VImg :src="chainStore.logo" /> 
+
+        <!-- SECTION Menu -->
+        <VMenu
+          activator="parent"
+          location="bottom start"
+          offset="14px"
+        >
+          <VList>
+            <!-- 👉 Rest -->
+            <VListSubheader v-if="chainStore.current.apis?.rest" title="Rest Endpoint" />
+            <VListItem v-for="i in chainStore.current.apis?.rest" link @click="chainStore.setRestEndpoint(i.address)">
+              <VListItemTitle>{{ i.provider }} <VIcon v-if="chainStore.availableEndpoint && i.address === chainStore.availableEndpoint" icon="mdi-check" color="primary" /></VListItemTitle>
+              <VListItemSubtitle>{{ i.address }}</VListItemSubtitle>
+            </VListItem>
+
+            <VListSubheader v-if="chainStore.current.apis?.grpc" title="gRPC Endpoint" />
+            <VListItem v-for="i in chainStore.current.apis?.grpc" link>
+              <VListItemTitle>{{ i.provider }}</VListItemTitle>
+              <VListItemSubtitle>{{ i.address }}</VListItemSubtitle>
+            </VListItem>
+          </VList>
+        </VMenu>
+        <!-- !SECTION -->
+      </VAvatar>
+    </VBadge>
+  </template>
+  <VListItemTitle>{{ chainStore.current?.chain_id || '' }}</VListItemTitle>
+  <VListItemSubtitle> {{ chainStore.availableEndpoint }}</VListItemSubtitle>
+  </VListItem>
+</template>
--- a/packages/dashboard/src/layouts/components/DefaultLayout.vue
+++ b/packages/dashboard/src/layouts/components/DefaultLayout.vue
@ -4,13 +4,15 @@ import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfi
 // Components
 import Footer from '@/layouts/components/Footer.vue'
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
-import UserProfile from '@/layouts/components/UserProfile.vue'
+import UserProfile from '@/layouts/components/ChainProfile.vue'

-import type { VerticalNavItems } from '@/@layouts/types'
 import { useDashboard } from '@/stores/useDashboard'

 // @layouts plugin
 import { VerticalNavLayout } from '@layouts'
+import NavBarI18n from './NavBarI18n.vue'
+import NavSearchBar from './NavSearchBar.vue'
+import NavBarNotifications from './NavBarNotifications.vue'

 const { appRouteTransition, isLessThanOverlayNavBreakpoint, isVerticalNavCollapsed } = useThemeConfig()
 const { width: windowWidth } = useWindowSize()
@ -38,11 +40,13 @@ dashboard.initial()
          <VIcon icon="mdi-menu" />
        </IconBtn>

-        <NavbarThemeSwitcher />
+        <UserProfile />

        <VSpacer />
-
-        <UserProfile />
+        <NavSearchBar />
+        <NavBarNotifications />
+        <NavBarI18n />
+        <NavbarThemeSwitcher />
      </div>
    </template>

--- a/packages/dashboard/src/layouts/components/NavBarI18n.vue
+++ b/packages/dashboard/src/layouts/components/NavBarI18n.vue
@ -11,8 +11,8 @@ const i18nCompLanguages: I18nLanguage[] = [
    i18nLang: 'en',
  },
  {
-    label: 'French',
-    i18nLang: 'fr',
+    label: '中文',
+    i18nLang: 'cn',
  },
  {
    label: 'Arabic',
@ -22,6 +22,7 @@ const i18nCompLanguages: I18nLanguage[] = [

 const handleLangChange = (lang: string) => {
  isAppRtl.value = lang === 'ar'
+  localStorage.setItem('lang', lang)
 }
 </script>

--- a/packages/dashboard/src/layouts/components/NavSearchBar.vue
+++ b/packages/dashboard/src/layouts/components/NavSearchBar.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { SearchHeader, SearchItem } from '@/@fake-db/types'
-import axios from '@axios'
+import axios from 'axios'
 import { useThemeConfig } from '@core/composable/useThemeConfig'

 interface Suggestion {
--- a/packages/dashboard/src/layouts/components/UserProfile.vue
+++ b/packages/dashboard/src/layouts/components/UserProfile.vue
@ -1,130 +0,0 @@
-<script setup lang="ts">
-import avatar1 from '@images/avatars/avatar-1.png'
-</script>
-
-<template>
-  <VBadge
-    dot
-    location="bottom right"
-    offset-x="3"
-    offset-y="3"
-    bordered
-    color="success"
-  >
-    <VAvatar
-      class="cursor-pointer"
-      color="primary"
-      variant="tonal"
-    >
-      <VImg :src="avatar1" />
-
-      <!-- SECTION Menu -->
-      <VMenu
-        activator="parent"
-        width="230"
-        location="bottom end"
-        offset="14px"
-      >
-        <VList>
-          <!-- 👉 User Avatar & Name -->
-          <VListItem>
-            <template #prepend>
-              <VListItemAction start>
-                <VBadge
-                  dot
-                  location="bottom right"
-                  offset-x="3"
-                  offset-y="3"
-                  color="success"
-                >
-                  <VAvatar
-                    color="primary"
-                    variant="tonal"
-                  >
-                    <VImg :src="avatar1" />
-                  </VAvatar>
-                </VBadge>
-              </VListItemAction>
-            </template>
-
-            <VListItemTitle class="font-weight-semibold">
-              John Doe
-            </VListItemTitle>
-            <VListItemSubtitle>Admin</VListItemSubtitle>
-          </VListItem>
-
-          <VDivider class="my-2" />
-
-          <!-- 👉 Profile -->
-          <VListItem link>
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-user"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>Profile</VListItemTitle>
-          </VListItem>
-
-          <!-- 👉 Settings -->
-          <VListItem link>
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-settings"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>Settings</VListItemTitle>
-          </VListItem>
-
-          <!-- 👉 Pricing -->
-          <VListItem link>
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-currency-dollar"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>Pricing</VListItemTitle>
-          </VListItem>
-
-          <!-- 👉 FAQ -->
-          <VListItem link>
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-help"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>FAQ</VListItemTitle>
-          </VListItem>
-
-          <!-- Divider -->
-          <VDivider class="my-2" />
-
-          <!-- 👉 Logout -->
-          <VListItem to="/login">
-            <template #prepend>
-              <VIcon
-                class="me-2"
-                icon="tabler-logout"
-                size="22"
-              />
-            </template>
-
-            <VListItemTitle>Logout</VListItemTitle>
-          </VListItem>
-        </VList>
-      </VMenu>
-      <!-- !SECTION -->
-    </VAvatar>
-  </VBadge>
-</template>
--- a/packages/dashboard/src/layouts/navigation/index.ts
+++ b/packages/dashboard/src/layouts/navigation/index.ts
@ -1,19 +0,0 @@
-import type { VerticalNavItems } from '@/@layouts/types'
-
-export default [
-  {
-    title: 'Home',
-    to: { name: 'index' },
-    icon: { icon: 'mdi-home-outline' },
-  },
-  {
-    title: 'Second page',
-    to: { name: 'second-page' },
-    icon: { icon: 'mdi-file-document-outline' },
-  },
-  {
-    title: 'Second2 page',
-    to: { name: 'second-page' },
-    icon: { icon: 'mdi-file-document-outline' },
-  },
-] as VerticalNavItems
--- a/packages/dashboard/src/main.ts
+++ b/packages/dashboard/src/main.ts
@ -3,6 +3,7 @@ import "@/plugins/vuetify/@iconify/icons-bundle";
 import App from "@/App.vue";
 import layoutsPlugin from "@/plugins/vuetify/layouts";
 import vuetify from "@/plugins/vuetify";
+import i18n from "@/plugins/i18n";
 import { loadFonts } from "@/plugins/vuetify/webfontloader";
 import "@/plugins/vuetify/@core/scss/template/index.scss";
 import "@/plugins/vuetify/styles/styles.scss";
@ -18,6 +19,7 @@ loadFonts();
 const app = createApp(App);

 // Use plugins
+app.use(i18n)
 app.use(vuetify);
 app.use(createPinia());
 app.use(layoutsPlugin);
--- a/packages/dashboard/src/pages/index.vue
+++ b/packages/dashboard/src/pages/index.vue
@ -1,31 +1,47 @@
 <script lang="ts" setup>
 import { useDashboard, LoadingStatus } from '@/stores/useDashboard';
 import ChainSummary from '@/components/ChainSummary.vue';
+import { computed, ref } from 'vue';
+import type { Chain } from '@ping-pub/chain-registry-client/dist/types';

 const dashboard = useDashboard()

 dashboard.$subscribe((mutation, state) => {
  localStorage.setItem('favorite', JSON.stringify(state.favorite))
 })
+const keywords = ref('')
+const chains = computed(()=> {
+  if(keywords.value) {
+    return Object.values(dashboard.chains).filter( (x: Chain)=>x.chain_name.indexOf(keywords.value) > -1)
+  }else{
+    return Object.values(dashboard.chains)
+  }
+})
 </script>
 <template>
-  <div class="d-flex flex-column align-center">
-    <div class="d-flex justify-center align-center align-self-center p-1 b1">
+  <div class="d-flex flex-column justify-center">
+    <div class="d-flex justify-center align-self-center p-1 b1">
      <VImg src="/logo.svg" width="85" height="85"/>
      <h1 class="text-primary text-h3 font-weight-bold d-none d-md-block ml-1">
        Ping Dashboard<VChip>Beta</VChip>
      </h1>
    </div>
-
-    <p class="mb-1">
-      Ping Dashboard is not just an explorer but also a wallet and more ... 🛠
-    </p>
-    <h2 class="mb-9">
-      Cosmos Ecosystem Blockchains 🚀
-    </h2>
+    <div class="d-flex flex-column align-center">
+      <p class="mb-1">
+        Ping Dashboard is not just an explorer but also a wallet and more ... 🛠
+      </p>
+      <h2 class="mb-9">
+        Cosmos Ecosystem Blockchains 🚀
+      </h2>
+    </div>
    <VProgressLinear v-if="dashboard.status !== LoadingStatus.Loaded " indeterminate color="primary darken-2"/>
-    <VRow>
-      <VCol v-for="k in dashboard.chains" md="3">
+    <VTextField v-model="keywords" variant="underlined" placeholder="Search chain name" style="max-width: 300px;" app>
+      <template #append-inner>
+        {{ chains.length }}/{{ dashboard.length }}
+      </template>
+    </VTextField>
+    <VRow class="my-auto">
+      <VCol v-for="k in chains" md="3">
        <VLazy min-height="40" min-width="200" transition="fade-transition">
          <ChainSummary :name="k.chain_name" />
        </VLazy>
--- a/packages/dashboard/src/plugins/i18n/index.ts
+++ b/packages/dashboard/src/plugins/i18n/index.ts
@ -0,0 +1,15 @@
+import { createI18n } from 'vue-i18n'
+
+const messages = Object.fromEntries(
+  Object.entries(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    import.meta.glob<{ default: any }>('./locales/*.json', { eager: true }))
+    .map(([key, value]) => [key.slice(10, -5), value.default]),
+)
+
+export default createI18n({
+  legacy: false,
+  locale: localStorage.getItem('lang') || 'en',
+  fallbackLocale: 'en',
+  messages,
+})
--- a/packages/dashboard/src/plugins/i18n/locales/cn.json
+++ b/packages/dashboard/src/plugins/i18n/locales/cn.json
@ -0,0 +1,9 @@
+{
+  "module": {
+    "chain": "面板首页",
+    "chain-test": "测试功能",
+  },
+  "Ecosystem": "生态系统",
+  "All Blockchains": "全部区块链",
+  "Favorite": "收藏夹"
+}
--- a/packages/dashboard/src/plugins/i18n/locales/en.json
+++ b/packages/dashboard/src/plugins/i18n/locales/en.json
@ -0,0 +1,9 @@
+{
+  "module": {
+    "chain": "Dashboard",
+    "chain-test": "test",
+  },
+  "Ecosystem": "Ecosystem",
+  "All Blockchains": "All Blockchain222",
+  "Favorite": "Favorite"
+}
--- a/packages/dashboard/src/plugins/vuetify/@core/components/I18n.vue
+++ b/packages/dashboard/src/plugins/vuetify/@core/components/I18n.vue
@ -21,7 +21,7 @@ watch(locale, val => {
  document.documentElement.setAttribute('lang', val as string)
 })

-const currentLang = ref(['en'])
+const currentLang = ref([localStorage.getItem('lang')|| 'en'])
 </script>

 <template>
--- a/packages/dashboard/src/plugins/vuetify/@layouts/components/VerticalNavGroup.vue
+++ b/packages/dashboard/src/plugins/vuetify/@layouts/components/VerticalNavGroup.vue
@ -194,7 +194,7 @@ watch(isVerticalNavMini(windowWidth, isVerticalNavHovered), val => {
      <TransitionGroup name="transition-slide-x">
        <!-- 👉 Title -->
        <Component
-          :is=" config.app.enableI18n ? 'i18n-t' : 'span'"
+          :is=" config.app.enableI18n && item.i18n ? 'i18n-t' : 'span'"
          v-bind="dynamicI18nProps(item.title, 'span')"
          v-show="!hideTitleAndBadge"
          key="title"
@ -205,7 +205,7 @@ watch(isVerticalNavMini(windowWidth, isVerticalNavHovered), val => {

        <!-- 👉 Badge -->
        <Component
-          :is="config.app.enableI18n ? 'i18n-t' : 'span'"
+          :is="config.app.enableI18n && false ? 'i18n-t' : 'span'"
          v-bind="dynamicI18nProps(item.badgeContent, 'span')"
          v-show="!hideTitleAndBadge"
          v-if="item.badgeContent"
--- a/packages/dashboard/src/plugins/vuetify/@layouts/components/VerticalNavLink.vue
+++ b/packages/dashboard/src/plugins/vuetify/@layouts/components/VerticalNavLink.vue
@ -22,13 +22,13 @@ const hideTitleAndBadge = isVerticalNavMini(windowWidth)
        class="nav-item-icon" />
      <TransitionGroup name="transition-slide-x">
        <!-- 👉 Title -->
-        <Component :is="config.app.enableI18n ? 'i18n-t' : 'span'" v-show="!hideTitleAndBadge" key="title"
+        <Component :is="config.app.enableI18n && item.i18n ? 'i18n-t' : 'span'" v-show="!hideTitleAndBadge" key="title"
          class="nav-item-title" v-bind="dynamicI18nProps(item.title, 'span')">
          {{ item.title }}
        </Component>

        <!-- 👉 Badge -->
-        <Component :is="config.app.enableI18n ? 'i18n-t' : 'span'" v-if="item.badgeContent" v-show="!hideTitleAndBadge"
+        <Component :is="false ? 'i18n-t' : 'span'" v-if="item.badgeContent" v-show="!hideTitleAndBadge"
          key="badge" class="nav-item-badge" :class="item.badgeClass"
          v-bind="dynamicI18nProps(item.badgeContent, 'span')">
          {{ item.badgeContent }}
--- a/packages/dashboard/src/stores/useBlockchain.ts
+++ b/packages/dashboard/src/stores/useBlockchain.ts
@ -1,12 +1,45 @@
 import { ref, computed } from "vue";
 import { defineStore } from "pinia";
+import { getLogo, useDashboard } from "./useDashboard";

-const route = useRoute()
-console.log('route', route)

 export const useBlockchain = defineStore("blockchain", () => {
-  const current = ref('');
+  const dbstore = useDashboard()

+  const rest = ref('')
+  const status = ref({} as Record<string, string>)

-  return { current };
+  const current = computed(()=>{
+    return dbstore.getCurrentChain()
+  });
+  const logo = computed(() => {
+    return getLogo(current.value?.logo_URIs)
+  })
+  const name = computed(() => {
+    return current.value.chain_name
+  })
+  const availableEndpoint = computed(() => {
+    const all = current.value?.apis?.rest
+    if(all) {
+      if(!rest.value || all.findIndex(x => x.address === rest.value) < 0) {        
+        const rn = Math.random()
+        rest.value = all[Math.floor(rn * all.length)].address
+      }
+    }
+    
+    return rest.value
+  })
+
+  function setRestEndpoint(endpoint: string) {
+    rest.value = endpoint
+  }
+
+  return { 
+    // states
+    availableEndpoint,
+    // getters
+    name, current, logo,
+    // actions
+    setRestEndpoint
+  };
 });
--- a/packages/dashboard/src/stores/useDashboard.ts
+++ b/packages/dashboard/src/stores/useDashboard.ts
@ -4,6 +4,7 @@ import { get } from '../libs/http'
 import type { Chain, Asset } from '@ping-pub/chain-registry-client/dist/types'
 import type { VerticalNavItems } from '@/@layouts/types'
 import ChainRegistryClient from '@ping-pub/chain-registry-client'
+import { useRouter } from "vue-router";

 export interface DirectoryChain {
  assets: Asset[],
@ -103,21 +104,30 @@ export const useDashboard = defineStore("dashboard", () => {
  const findChainByName = computed((name) => chains.value[name]);

  const computeChainNav = computed(() => {
+    // compute current menu
    const currChain = chains.value[current.value]
    let currNavItem: VerticalNavItems = []
-    if(currChain) {
+
+    const router = useRouter()
+    const routes = router?.getRoutes()||[]
+    console.log(routes)
+    if(currChain && routes) {
      currNavItem = [{
        title: currChain.pretty_name || currChain.chain_name || current.value,
        icon: {image: getLogo(currChain.logo_URIs), size: '22'},
-        children: [
-          {
-            title: 'Dashboard',
-            to: { path: `/${current.value}`},
-            icon: { icon: 'mdi-chevron-right', size: '22'}
-          }
-        ]
+        i18n: false,
+        children: routes
+                  .filter(x=>x.name && x.name.toString().startsWith('chain'))
+                  .map(x => ({
+                    title: `module.${x.name?.toString()}`, 
+                    to: {path: x.path.replace(':chain',current.value)}, 
+                    icon: { icon: 'mdi-chevron-right', size: '22'},
+                    i18n: true
+                  }))
+                  .sort((a,b)=>a.to.path.length - b.to.path.length)
      }]
    }
+    // compute favorite menu
    const favNavItems: VerticalNavItems = []
    favorite.value.forEach(name => {
      const ch = chains.value[name]
@ -130,20 +140,23 @@ export const useDashboard = defineStore("dashboard", () => {
      } 
    })
    
+    // combine all together
    return [...currNavItem,
        { heading: 'Ecosystem' },
        {
          title: 'Favorite', 
          children: favNavItems, 
          badgeContent: favorite.value.length,
-          badgeClass: 'bg-success',
+          badgeClass: 'bg-error',
+          i18n: true,
          icon: { icon: 'mdi-star', size: '22'}
        },
        {
          title: 'All Blockchains',
          to: { path : '/'},
          badgeContent: length.value,
-          badgeClass: 'bg-success',
+          badgeClass: 'bg-error',
+          i18n: true,
          icon: { icon: 'mdi-grid', size: '22'}
        }
      ]
@ -176,6 +189,9 @@ export const useDashboard = defineStore("dashboard", () => {
      current.value = name
    }
  }
+  function getCurrentChain() {
+    return chains.value[current.value]
+  }
  function setConfigSource(newSource: ConfigSource) {
    source.value = newSource
    initial()
@ -184,7 +200,7 @@ export const useDashboard = defineStore("dashboard", () => {
    // states
    status, favorite, current, chains, length, 
    // getters
-    computeChainNav, findChainByName, 
+    computeChainNav, findChainByName, getCurrentChain,
    // actions
    initial, loadingFromRegistry, loadingChainByName, setCurrentChain, setConfigSource
  };
--- a/packages/dashboard/themeConfig.ts
+++ b/packages/dashboard/themeConfig.ts
@ -19,7 +19,7 @@ export const { themeConfig, layoutConfig } = defineThemeConfig({
    contentWidth: ContentWidth.Boxed,
    contentLayoutNav: AppContentLayoutNav.Vertical,
    overlayNavFromBreakpoint: breakpointsVuetify.md + 16, // 16 for scrollbar. Docs: https://next.vuetifyjs.com/en/features/display-and-platform/
-    enableI18n: false,
+    enableI18n: true,
    theme: 'system',
    isRtl: false,
    skin: Skins.Default,
--- a/packages/dashboard/vite.config.ts
+++ b/packages/dashboard/vite.config.ts
@ -10,6 +10,8 @@ import Components from "unplugin-vue-components/vite";
 import AutoImport from "unplugin-auto-import/vite";
 import Pages from "vite-plugin-pages";

+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
+
 // https://vitejs.dev/config/
 export default defineConfig({
  plugins: [
@ -31,9 +33,16 @@ export default defineConfig({
      dts: true,
    }),
    AutoImport({
-      imports: ["vue", "vue-router", "@vueuse/core", "@vueuse/math", "pinia"],
+      imports: ["vue", "vue-router", "@vueuse/core", "@vueuse/math", "vue-i18n", "pinia"],
      vueTemplate: true,
    }),
+    VueI18nPlugin({
+      runtimeOnly: true,
+      compositionOnly: true,
+      include: [
+        fileURLToPath(new URL('./src/plugins/i18n/locales/**', import.meta.url)),
+      ],
+    }),
    DefineOptions(),
  ],
  resolve: {
--- a/yarn.lock
+++ b/yarn.lock
@ -486,6 +486,86 @@
  dependencies:
    "@iconify/types" "^2.0.0"

+"@intlify/bundle-utils@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@intlify/bundle-utils/-/bundle-utils-4.0.0.tgz#29c1d602c7e4e33b516581496a7c6740ed7e2585"
+  integrity sha512-klXrYT9VXyKEXsD6UY3pShg0O5MPC07n0TZ5RrSs5ry6T1eZVolIFGJi9c3qcDrh1qjJxgikRnPBmD7qGDqbjw==
+  dependencies:
+    "@intlify/message-compiler" next
+    "@intlify/shared" next
+    jsonc-eslint-parser "^1.0.1"
+    source-map "0.6.1"
+    yaml-eslint-parser "^0.3.2"
+
+"@intlify/core-base@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.2.2.tgz#5353369b05cc9fe35cab95fe20afeb8a4481f939"
+  integrity sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==
+  dependencies:
+    "@intlify/devtools-if" "9.2.2"
+    "@intlify/message-compiler" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+
+"@intlify/devtools-if@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/devtools-if/-/devtools-if-9.2.2.tgz#b13d9ac4b4e2fe6d2e7daa556517a8061fe8bd39"
+  integrity sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+
+"@intlify/message-compiler@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.2.2.tgz#e42ab6939b8ae5b3d21faf6a44045667a18bba1c"
+  integrity sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==
+  dependencies:
+    "@intlify/shared" "9.2.2"
+    source-map "0.6.1"
+
+"@intlify/message-compiler@next":
+  version "9.3.0-beta.16"
+  resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.3.0-beta.16.tgz#335f7bdb06cfb84d04a1a1c1d6eff2532dfd88e7"
+  integrity sha512-CGQI3xRcs1ET75eDQ0DUy3MRYOqTauRIIgaMoISKiF83gqRWg93FqN8lGMKcpBqaF4tI0JhsfosCaGiBL9+dnw==
+  dependencies:
+    "@intlify/shared" "9.3.0-beta.16"
+    source-map "0.6.1"
+
+"@intlify/shared@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.2.2.tgz#5011be9ca2b4ab86f8660739286e2707f9abb4a5"
+  integrity sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==
+
+"@intlify/shared@9.3.0-beta.16", "@intlify/shared@next":
+  version "9.3.0-beta.16"
+  resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.3.0-beta.16.tgz#74f254dbb7eac633b86d690a341349db29573896"
+  integrity sha512-kXbm4svALe3lX+EjdJxfnabOphqS4yQ1Ge/iIlR8tvUiYRCoNz3hig1M4336iY++Dfx5ytEQJPNjIcknNIuvig==
+
+"@intlify/unplugin-vue-i18n@^0.8.2":
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/@intlify/unplugin-vue-i18n/-/unplugin-vue-i18n-0.8.2.tgz#4196cb5bee4243bb3a33af76ce9663f3e106809a"
+  integrity sha512-cRnzPqSEZQOmTD+p4pwc3RTS9HxreLqfID0keoqZDZweCy/CGRMLLTNd15S4TUf1vSBhPF03DItEFDr1F+8MDA==
+  dependencies:
+    "@intlify/bundle-utils" "^4.0.0"
+    "@intlify/shared" next
+    "@rollup/pluginutils" "^4.2.0"
+    "@vue/compiler-sfc" "^3.2.45"
+    debug "^4.3.1"
+    fast-glob "^3.2.5"
+    js-yaml "^4.1.0"
+    json5 "^2.2.0"
+    pathe "^1.0.0"
+    picocolors "^1.0.0"
+    source-map "0.6.1"
+    unplugin "^1.0.0"
+
+"@intlify/vue-devtools@9.2.2":
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz#b95701556daf7ebb3a2d45aa3ae9e6415aed8317"
+  integrity sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+
 "@isaacs/string-locale-compare@^1.1.0":
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/@isaacs/string-locale-compare/-/string-locale-compare-1.1.0.tgz#291c227e93fd407a96ecd59879a35809120e432b"
@ -1568,6 +1648,14 @@
    "@chain-registry/types" "^0.14.0"
    cross-fetch "^3.1.5"

+"@rollup/pluginutils@^4.2.0":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
+  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
 "@rollup/pluginutils@^5.0.2":
  version "5.0.2"
  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.0.2.tgz#012b8f53c71e4f6f9cb317e311df1404f56e7a33"
@ -1891,7 +1979,7 @@
    "@vue/compiler-dom" "3.2.47"
    "@vue/shared" "3.2.47"

-"@vue/devtools-api@^6.4.5":
+"@vue/devtools-api@^6.2.1", "@vue/devtools-api@^6.4.5":
  version "6.5.0"
  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
  integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
@ -2037,11 +2125,16 @@ abbrev@1, abbrev@^1.0.0:
  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==

-acorn-jsx@^5.3.2:
+acorn-jsx@^5.2.0, acorn-jsx@^5.3.2:
  version "5.3.2"
  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==

+acorn@^7.1.1, acorn@^7.4.1:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
 acorn@^8.8.0, acorn@^8.8.1, acorn@^8.8.2:
  version "8.8.2"
  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
@ -2208,7 +2301,7 @@ available-typed-arrays@^1.0.5:
  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
  integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==

-axios@^1.0.0:
+axios@^1.0.0, axios@^1.3.2:
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.2.tgz#7ac517f0fa3ec46e0e636223fd973713a09c72b3"
  integrity sha512-1M3O703bYqYuPhbHeya5bnhpYVsDDRyQSabNja04mZtboLNSuZ4YrltestrLXfHgmzua4TpUqRiVKbiQuo2epw==
@ -2878,7 +2971,7 @@ de-indent@^1.0.2:
  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
  integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==

-debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
+debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
  version "4.3.4"
  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@ -3319,6 +3412,13 @@ eslint-scope@^7.1.1:
    esrecurse "^4.3.0"
    estraverse "^5.2.0"

+eslint-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
+  dependencies:
+    eslint-visitor-keys "^1.1.0"
+
 eslint-utils@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
@ -3326,6 +3426,11 @@ eslint-utils@^3.0.0:
  dependencies:
    eslint-visitor-keys "^2.0.0"

+eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+
 eslint-visitor-keys@^2.0.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
@ -3381,6 +3486,15 @@ eslint@^8.22.0:
    strip-json-comments "^3.1.0"
    text-table "^0.2.0"

+espree@^6.0.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
+  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.1.0"
+
 espree@^9.3.1, espree@^9.4.0:
  version "9.4.1"
  resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.1.tgz#51d6092615567a2c2cff7833445e37c28c0065bd"
@ -3426,7 +3540,7 @@ estraverse@^5.1.0, estraverse@^5.2.0:
  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==

-estree-walker@^2.0.2:
+estree-walker@^2.0.1, estree-walker@^2.0.2:
  version "2.0.2"
  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
  integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
@ -3501,7 +3615,7 @@ fast-glob@3.2.7:
    merge2 "^1.3.0"
    micromatch "^4.0.4"

-fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.12, fast-glob@^3.2.5, fast-glob@^3.2.9:
  version "3.2.12"
  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
  integrity sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==
@ -4553,11 +4667,22 @@ json-stringify-safe@^5.0.1:
  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
  integrity sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==

-json5@^2.2.1, json5@^2.2.2:
+json5@^2.2.0, json5@^2.2.1, json5@^2.2.2:
  version "2.2.3"
  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==

+jsonc-eslint-parser@^1.0.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsonc-eslint-parser/-/jsonc-eslint-parser-1.4.1.tgz#8cbe99f6f5199acbc5a823c4c0b6135411027fa6"
+  integrity sha512-hXBrvsR1rdjmB2kQmUjf1rEIa+TqHBGMge8pwi++C+Si1ad7EjZrJcpgwym+QGK/pqTx+K7keFAtLlVNdLRJOg==
+  dependencies:
+    acorn "^7.4.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^1.3.0"
+    espree "^6.0.0"
+    semver "^6.3.0"
+
 jsonc-parser@3.2.0, jsonc-parser@^3.2.0:
  version "3.2.0"
  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
@ -4759,7 +4884,7 @@ lodash.uniq@^4.5.0:
  resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
  integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==

-lodash@^4.17.15, lodash@^4.17.21:
+lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@ -5731,7 +5856,7 @@ picocolors@^1.0.0:
  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==

-picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2, picomatch@^2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
@ -6529,7 +6654,7 @@ sort-keys@^4.0.0:
  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==

-source-map@^0.6.1:
+source-map@0.6.1, source-map@^0.6.1:
  version "0.6.1"
  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
@ -7196,6 +7321,16 @@ vue-eslint-parser@^9.0.0, vue-eslint-parser@^9.0.1:
    lodash "^4.17.21"
    semver "^7.3.6"

+vue-i18n@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.2.2.tgz#aeb49d9424923c77e0d6441e3f21dafcecd0e666"
+  integrity sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==
+  dependencies:
+    "@intlify/core-base" "9.2.2"
+    "@intlify/shared" "9.2.2"
+    "@intlify/vue-devtools" "9.2.2"
+    "@vue/devtools-api" "^6.2.1"
+
 vue-router@^4.1.6:
  version "4.1.6"
  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.6.tgz#b70303737e12b4814578d21d68d21618469375a1"
@ -7447,6 +7582,15 @@ yallist@^4.0.0:
  resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
  integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==

+yaml-eslint-parser@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/yaml-eslint-parser/-/yaml-eslint-parser-0.3.2.tgz#c7f5f3904f1c06ad55dc7131a731b018426b4898"
+  integrity sha512-32kYO6kJUuZzqte82t4M/gB6/+11WAuHiEnK7FreMo20xsCKPeFH5tDBU7iWxR7zeJpNnMXfJyXwne48D0hGrg==
+  dependencies:
+    eslint-visitor-keys "^1.3.0"
+    lodash "^4.17.20"
+    yaml "^1.10.0"
+
 yaml@^1.10.0, yaml@^1.10.2:
  version "1.10.2"
  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"